const { MicroText, Timecode, CameraStatus, KinoTape, tapeAdvance } = window.DASKINODesignSystem_5a312e;
/* A CAMADA EDITORIAL.
O v1 falava numa voz só: mono, tracked, em caixa alta — a voz do aparelho.
Funciona para um rótulo e trabalha contra qualquer coisa que se leia de fato.
Aqui entra a segunda voz. A serif é a matéria; o mono continua sendo o
aparelho em volta dela (folio, rubrica, ficha técnica, crédito). A regra é
dura e vale para o site inteiro: se é para LER, é serif. Se é para
IDENTIFICAR, é mono. Nada no meio. */
const ED = "var(--font-editorial)";
const MONO = "var(--font-mono)";
/* Três pesos de régua e cada um quer dizer uma coisa: fina separa itens da
mesma família, grossa abre uma seção, dupla é masthead — só aparece duas
vezes na página inteira. */
function EdRule({ weight = "hair", style }) {
const c = "var(--rule-strong)";
if (weight === "double") return ;
if (weight === "thick") return ;
return ;
}
/* Rubrica: o mono no seu lugar certo. Número opcional à esquerda, como a
numeração de seção de uma revista. */
function EdKicker({ children, n, tone = "dim", right }) {
return (
);
}
/* Manchete. `level` escolhe o corpo; a serif é sempre apertada e nunca tracked
— é o oposto do mono, e essa oposição é o ponto. */
const HEADS = { banner: "clamp(40px,7.2vw,104px)", lg: "clamp(32px,5vw,76px)", md: "clamp(26px,3.4vw,52px)", sm: "clamp(21px,2.2vw,34px)", xs: "clamp(18px,1.7vw,25px)" };
function EdHead({ children, level = "md", weight = 400, italic, as = "h2", measure, style }) {
return React.createElement(as, {
style: {
margin: 0, fontFamily: ED, fontOpticalSizing: "auto", fontSize: HEADS[level] || HEADS.md,
fontWeight: weight, fontStyle: italic ? "italic" : "normal",
lineHeight: level === "banner" || level === "lg" ? 0.98 : 1.11,
letterSpacing: "var(--tr-editorial)", textWrap: "balance",
maxWidth: measure ? "var(--measure-" + measure + ")" : undefined, ...style
}
}, children);
}
/* O olho da matéria: a linha que vem sob a manchete e explica. Itálico, um
corpo acima do texto, cinza. */
function EdDek({ children, measure = "narrow", style }) {
return
{children}
;
}
/* Corpo de texto. Justificado com hifenização, como se compõe uma coluna
estreita de verdade — sem isso a serif abre rios. */
function EdBody({ children, size = 16, measure, dim, style }) {
return
{children}
;
}
/* Capitular. Três linhas de altura, encostada na primeira linha do bloco. */
function EdDropCap({ children, size = 16, style }) {
const t = String(children || "");
return (
{t.slice(0, 1)}
{t.slice(1)}
);
}
/* Legenda de foto: itálico pequeno à esquerda, crédito em mono à direita. É o
par que faz uma imagem parecer publicada em vez de colada. */
function EdCaption({ children, credit, style }) {
return (
{children}
{credit && {credit}}
);
}
/* Cabeça de seção: régua grossa, rubrica, contagem. Abre cada bloco da página. */
function EdSection({ label, count, right, children, style }) {
return (
);
}
/* A barra de folio — cabeçalho de página impressa. Aparece no topo da home e no
topo de cada ficha, e é o que dá à navegação a sensação de estar dentro de
uma edição numerada em vez de um site. */
function EdFolio({ left, mid, right, style }) {
return (
{left}
{mid && {mid}}
{right}
);
}
/* Grade de colunas com filete vertical entre elas. O filete é o que faz a
página parecer composta e não empilhada — e some no mobile, onde uma coluna
só não tem vizinho de quem se separar. */
function EdCols({ children, cols = 3, gap = "clamp(20px,2.4vw,38px)", min = 190, style }) {
const kids = React.Children.toArray(children);
return (
);
}
/* A ficha técnica: pares rótulo/valor em mono, separados por filete. É o
aparelho fazendo o que sabe — e liberando a serif de ter que dar dados. */
function EdSpecs({ items, style }) {
const list = items.filter(([, v]) => v);
return (
{list.map(([k, v], i) => (
{k}{v}
))}
);
}
/* Uma linha de índice. Número discreto, título em serif, entrega em mono. Sem
fólio e sem indicador de peso: a página de origem no deck organiza o site por
dentro, mas não é assunto de quem visita. */
function EdIndexRow({ f, n, go, dense }) {
const [h, setH] = React.useState(false);
return (
);
}
/* A linha do ARQUIVO, no fundo preto: barra de acento territorial e o título na
fita — a feição do site antigo, que é a que funciona. A fita é rasterizada
num cap fixo, então quem cabe só se sabe MEDINDO: o wrapper informa a largura
real e o cap sai dela. Títulos de 39 caracteres e de 4 convivem na mesma
coluna sem constante chutada. */
function EdTapeRow({ f, go }) {
const [h, setH] = React.useState(false);
const wrap = React.useRef(null);
const [w, setW] = React.useState(0);
React.useEffect(() => {
const el = wrap.current;
if (!el) return;
const read = () => setW(el.clientWidth);
read();
const ro = new ResizeObserver(read);
ro.observe(el);
return () => ro.disconnect();
}, []);
const cap = w ? Math.max(11, Math.min(34, (w - 2) / (0.42 * f.word.length))) : 20;
return (
);
}
Object.assign(window, { ED, MONO, EdRule, EdKicker, EdHead, EdDek, EdBody, EdDropCap, EdCaption, EdSection, EdFolio, EdCols, EdSpecs, EdIndexRow, EdTapeRow, HEADS });