61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T3f97,"use client"; import * as React from "react"; import { motion, useMotionValueEvent, useReducedMotion, useScroll, useTransform, } from "framer-motion"; import { cn } from "@/lib/utils"; /** * Timeline — a linha do tempo que avança junto com a página. * * ── O que estava errado aqui, e não era "estilo" ─────────────────────────── * * Esta peça entrou no registry colada de fora e ninguém passou a régua: * * · **Copy de outra marca dentro do item.** O componente escrevia, fixo no * corpo, "Changelog from my journey" e "I've been working on Aceternity for * the past 2 years". Quem instalasse recebia o texto de outra pessoa e teria * que editar o arquivo do registry pra tirar. Agora a cabeça é slot: sem * `title` a linha começa direto no primeiro nó, que é o piso honesto. * · **Cor crua de paleta.** `bg-white`, `dark:bg-neutral-950`, `text-black`, * `from-purple-500 via-blue-500`. Roxo e azul não são de marca nenhuma — * eram de todas. Agora o trilho é `--border` e o preenchido é `--brand`, então * a mesma linha sai na cor de quem instalou. * · **Animar `height`.** O preenchimento crescia por altura, que é layout a cada * quadro. Virou `scaleY` com origem no topo: mesma leitura, no compositor. * · **Nó sem estado.** Os doze pontos eram idênticos do começo ao fim, então a * linha não dizia onde a pessoa está. Agora cada nó tem três estados — feito, * agora, a seguir — e eles saem da MESMA fração que preenche o trilho, medida * uma vez por layout. Sem isso o ponto e o traço discordariam na tela. * · **`py-20 md:px-10 max-w-7xl` embutido.** A peça impunha a largura e o * respiro da página inteira, então ela só cabia numa página inteira. Dentro de * um painel, de uma coluna ou de um card, saía cortada. Agora o item ocupa o * que o pai der. * * ── A anatomia ──────────────────────────────────────────────────────────── * * `rótulo (meta) → título → corpo`, com o nó do trilho ao lado servindo de * evidência. Sem `meta`, o rótulo vira "Etapa 01" — numerar é melhor que deixar * o degrau sem nome, porque é o número que deixa a pessoa dizer "travei na 3". * * Quem pediu menos movimento recebe a linha inteira preenchida e todos os nós * no estado final: o conteúdo é o mesmo, sem percurso. * * ── Quem rola ───────────────────────────────────────────────────────────── * * Por padrão, a página. Com `scrollContainer`, um contêiner próprio: a linha * mora num painel, num modal ou num card com rolagem, e o progresso passa a ser o * percurso DELE. Sem isso a peça ficava muda em qualquer lugar onde a página não * rola, presa no estado em que nasceu. * * ── Por que o estado deixou de ser uma palavra ──────────────────────────── * * Antes, o degrau atual se anunciava com a etiqueta "agora" ao lado da data: * caixa alta, mono, tracking largo — a terceira etiqueta em caixa alta da mesma * linha, contando com a data e com o que o consumidor põe no corpo. É esse * empilhamento de etiqueta que dá a cara de gerado por IA: tudo vira rótulo e * nada vira desenho. E era etiqueta redundante, porque o nó ao lado já estava * dizendo a mesma coisa. * * O estado agora é ANATOMIA, não texto: * * · **feito** — nó cheio, conteúdo em peso normal. Já passou, não pede atenção. * · **agora** — o marco ganha superfície: cartão com fundo, borda e um fio da * marca colado na esquerda, encostando no trilho. É o único degrau com caixa * na coluna inteira, então o olho acha em um quadro, sem ler nada. * · **a seguir** — nó vazado e título em cinza de apoio. Está lá, ainda não é * agora. O recuo NÃO é por opacidade: opacidade em cima de `--muted-foreground` * derruba o contraste do texto abaixo do piso de legibilidade, e o degrau que * ainda não chegou é justamente o que a pessoa está tentando ler. * * A palavra continua existindo pra quem não vê a tela, em `sr-only`: leitor de * tela não enxerga fio nem fundo, e "onde eu estou" é a pergunta que a peça * existe pra responder. Texto invisível não é etiqueta — é a legenda do desenho. */ export interface TimelineEntry { title: React.ReactNode; content: React.ReactNode; /** O rótulo acima do título: data, fase, prazo. Sem isto vira "Etapa 01". */ meta?: React.ReactNode; } export interface TimelineProps extends Omit, "title"> { data: TimelineEntry[]; /** Cabeça opcional. Sem ela a linha começa direto no primeiro nó. */ title?: React.ReactNode; /** Uma frase abaixo do título. Só aparece se `title` existir. */ description?: React.ReactNode; /** O que a linha diz quando `data` chega vazio. */ emptyLabel?: React.ReactNode; /** * Contêiner que rola, quando não é a página. O progresso vira o percurso dele, * de ponta a ponta. O elemento precisa estar posicionado (`relative`). */ scrollContainer?: React.RefObject; } const ESTADO = { feito: "feito", agora: "agora", aseguir: "a seguir", } as const; export function Timeline({ data, title, description, emptyLabel = "Nenhuma etapa por aqui ainda.", scrollContainer, className, ...props }: TimelineProps) { const listaRef = React.useRef(null); const nosRef = React.useRef<(HTMLLIElement | null)[]>([]); const semMovimento = useReducedMotion(); /** * A fração de cada etapa dentro da lista — medida, não estimada. * * Dividir 1 pelo número de etapas seria mais curto e estaria errado sempre que * uma etapa tem três linhas e a seguinte tem dez: o ponto acenderia antes ou * depois de o traço chegar nele, e a linha passaria a discordar de si mesma. * Aqui a fração sai do offset real do nó, então traço e ponto são a mesma * medida lida duas vezes. */ const [fracoes, setFracoes] = React.useState([]); React.useEffect(() => { const lista = listaRef.current; if (!lista) return; const medir = () => { // As duas medidas na mesma régua: com `offsetHeight` dividindo um delta de // `getBoundingClientRect`, a fração encolhia junto com o `scale` de quem // hospeda a peça, e o ponto acendia antes de o traço chegar nele. const caixa = lista.getBoundingClientRect(); const alturaTotal = caixa.height || 1; setFracoes( nosRef.current.map((no) => no ? (no.getBoundingClientRect().top - caixa.top) / alturaTotal : 0, ), ); }; medir(); if (typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(medir); ro.observe(lista); return () => ro.disconnect(); }, [data]); /* * `end 60%`, e não `end 50%`: o traço precisa terminar de encher ANTES de a * última etapa sair pela borda de cima, senão a linha nunca é vista completa * — a pessoa rola, o traço ainda está a 80% e o conteúdo já acabou. */ const { scrollYProgress } = useScroll( scrollContainer ? { container: scrollContainer as React.RefObject } : { target: listaRef, offset: ["start 85%", "end 60%"] }, ); // `scaleY` e não `height`: altura é layout a cada quadro, escala é compositor. const escala = useTransform(scrollYProgress, [0, 1], [0, 1]); const opacidade = useTransform(scrollYProgress, [0, 0.06], [0, 1]); const [alcancados, setAlcancados] = React.useState(0); useMotionValueEvent(scrollYProgress, "change", (p) => { setAlcancados(fracoes.filter((f) => f <= p).length); }); /* * O evento só avisa quando o progresso MUDA. Se a primeira leitura chega antes * de as frações existirem (o normal: as duas nascem no mesmo commit), o nó fica * no piso até a pessoa rolar, enquanto o traço já está na posição certa. Era por * isso que a mesma peça nascia no último passo numa tela e no primeiro em outra. */ React.useEffect(() => { setAlcancados(fracoes.filter((f) => f <= scrollYProgress.get()).length); }, [fracoes, scrollYProgress]); /* * Piso de um: linha do tempo sem degrau atual não é linha do tempo. * * Com `alcancados` em zero — antes de a peça entrar na faixa de rolagem que a * preenche — TODOS os nós caíam em "a seguir": doze pontos vazios e doze * títulos apagados, uma lista morta. Pior, `i === total - 1` virava `i === -1` * e nem o "agora" existia, então a peça não dizia nada em nenhum dos seus * estados. O primeiro marco é o presente por definição; o traço continua em * zero e cresce com a rolagem, que é o que ele tem a dizer. */ const total = semMovimento ? data.length : Math.max(1, alcancados); if (!data.length) { return (

{emptyLabel}

); } return (

{title && (

{title}

{description && (

{description}

)}

)} {/* * O trilho é irmão do `

` (mais `