@breathe-ds/ui 0.1.1 → 0.3.0

package/components/AnchorNav.tsx

@@ -5,30 +5,42 @@ import { Container } from "./Container";
 
 export type AnchorItem = { id: string; label: string };
 
+type Labels = {
+  /** aria-label of the anchor nav */
+  nav: string;
+};
+
+const EN: Labels = {
+  nav: "On this page",
+};
+
 type Props = {
   items: AnchorItem[];
-  /** Classe de deslocamento do sticky (altura do header). Padrão `top-20` (header de 80px). */
+  /** Sticky offset class (header height). Default `top-20` (80px header). */
   stickyTop?: string;
-  /** Componente de link do app (ex.: next-intl Link). Default: <a>. */
+  /** The app's link component (e.g. next-intl Link). Default: <a>. */
   linkComponent?: ElementType;
   className?: string;
+  /** Strings (English defaults); the app passes the ones for its locale. */
+  labels?: Partial<Labels>;
 };
 
 /**
- * Navegação contextual de âncoras — cápsula flutuante que acompanha a rolagem
- * (extraída do TreatmentAnchorNav do ttcab). Dois comportamentos:
- *  1. Scroll-spy: um IntersectionObserver marca como ativa a seção que cruza a
- *     faixa ~35% do topo; o pill correspondente acende.
- *  2. Indicador deslizante: um <span> absoluto mede o pill ativo (offsetLeft/
- *     Width, imune ao scroll horizontal da cápsula) e desliza até ele na curva
- *     da família. Em tela estreita a cápsula rola e centraliza o ativo.
- * Sinal do ativo = o indicador (preenchimento ink/12 + contorno), NÃO cor do
- * texto: o texto fica sempre `ink` sobre `surface`, sem frame de contraste
- * fraco. prefers-reduced-motion corta o deslize. As seções-alvo precisam de
- * `scroll-mt-*` compatível com o sticky (ex.: `scroll-mt-40`).
+ * Contextual anchor navigation — floating capsule that follows the scroll
+ * (extracted from ttcab's TreatmentAnchorNav). Two behaviors:
+ *  1. Scroll-spy: an IntersectionObserver marks as active the section that
+ *     crosses the band at ~35% from the top; the matching pill lights up.
+ *  2. Sliding indicator: an absolute <span> measures the active pill (offsetLeft/
+ *     Width, immune to the capsule's horizontal scroll) and slides to it on the
+ *     family's curve. On narrow screens the capsule scrolls and centers the active one.
+ * The active signal = the indicator (ink/12 fill + outline), NOT text color:
+ * the text is always `ink` on `surface`, with no low-contrast frame.
+ * prefers-reduced-motion removes the slide. Target sections need a
+ * `scroll-mt-*` compatible with the sticky offset (e.g. `scroll-mt-40`).
  */
-export function AnchorNav({ items, stickyTop = "top-20", linkComponent, className = "" }: Props) {
+export function AnchorNav({ items, stickyTop = "top-20", linkComponent, className = "", labels }: Props) {
   const L: ElementType = linkComponent ?? "a";
+  const t = { ...EN, ...labels };
   const [active, setActive] = useState(items[0]?.id ?? "");
   const listRef = useRef<HTMLUListElement>(null);
   const linkRefs = useRef<Record<string, HTMLAnchorElement | null>>({});
@@ -53,9 +65,9 @@ export function AnchorNav({ items, stickyTop = "top-20", linkComponent, classNam
     return () => io.disconnect();
   }, [items]);
 
-  // Chegada com #hash por navegação client-side: rola até a âncora (no full
-  // load o browser já faz; aqui é idempotente). Reaplica algumas vezes para
-  // vencer o reset tardio de scroll do roteador.
+  // Arriving with a #hash via client-side navigation: scrolls to the anchor (on
+  // a full load the browser already does it; here it's idempotent). Reapplies a
+  // few times to beat the router's late scroll reset.
   useEffect(() => {
     const hash = window.location.hash.slice(1);
     if (!hash || !items.some((it) => it.id === hash)) return;
@@ -76,7 +88,7 @@ export function AnchorNav({ items, stickyTop = "top-20", linkComponent, classNam
     setPill({ x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight, ready: true });
   };
 
-  // Mede o pill ativo + revela na cápsula em telas estreitas
+  // Measures the active pill + reveals it in the capsule on narrow screens
   useLayoutEffect(() => {
     measure();
     const el = linkRefs.current[active];
@@ -88,7 +100,7 @@ export function AnchorNav({ items, stickyTop = "top-20", linkComponent, classNam
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active]);
 
-  // Recalcula em resize (quebras/fontes mudam a largura)
+  // Recalculates on resize (line breaks/fonts change the width)
   useEffect(() => {
     window.addEventListener("resize", measure);
     return () => window.removeEventListener("resize", measure);
@@ -96,14 +108,14 @@ export function AnchorNav({ items, stickyTop = "top-20", linkComponent, classNam
   }, [active]);
 
   return (
-    <nav aria-label="Nesta página" className={`sticky ${stickyTop} z-30 py-3 ${className}`}>
+    <nav aria-label={t.nav} className={`sticky ${stickyTop} z-30 py-3 ${className}`}>
       <Container>
         <div className="flex justify-center">
           <ul
             ref={listRef}
             className="relative flex max-w-full list-none gap-1 overflow-x-auto rounded-pill border border-line bg-surface/95 p-1.5 shadow-[0_10px_28px_-14px_rgba(0,0,0,0.35)] backdrop-blur [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
           >
-            {/* Indicador deslizante */}
+            {/* Sliding indicator */}
             <span
               aria-hidden="true"
               className="pointer-events-none absolute top-0 left-0 rounded-pill bg-ink/[0.12] shadow-[inset_0_0_0_1px_var(--color-line)] transition-[transform,width,height,opacity] duration-[320ms] ease-cg motion-reduce:transition-none"

package/components/Avatar.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  /** Person's name: the initials fallback and nothing else (the image is decorative). */
+  name: string;
+  /** Photo src. Without it, the initials in a tinted bubble (as the team cards of novo.creeta). */
+  photo?: string;
+  /** Your own image element (e.g. next/image), replaces `photo`. */
+  children?: ReactNode;
+  /** Side in px. */
+  size?: number;
+  /** White ring, for stacked groups. */
+  ring?: boolean;
+  className?: string;
+};
+
+export const initials = (name: string) =>
+  name
+    .trim()
+    .split(/\s+/)
+    .filter((w) => w.length > 2 || w === name)
+    .slice(0, 2)
+    .map((w) => w[0]?.toUpperCase() ?? "")
+    .join("");
+
+/** Round portrait, decorative (the name is written next to it). */
+export function Avatar({ name, photo, children, size = 40, ring = false, className = "" }: Props) {
+  const style = { width: size, height: size, fontSize: Math.round(size * 0.36) };
+  const base = `inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full ${ring ? "ring-2 ring-card" : ""} ${className}`;
+  if (children) return <span aria-hidden="true" className={base} style={style}>{children}</span>;
+  if (photo) return <img src={photo} alt="" loading="lazy" decoding="async" className={`${base} object-cover`} style={style} />;
+  return (
+    <span aria-hidden="true" className={`${base} bg-ink/[0.12] font-heading font-bold text-ink`} style={style}>
+      {initials(name)}
+    </span>
+  );
+}

package/components/BackgroundVideo.tsx

@@ -3,31 +3,31 @@
 import { useEffect, useRef, useState } from "react";
 
 type Props = {
-  /** Clipe curto, sem som, em repetição (arquivo do próprio site). */
+  /** Short, muted, looping clip (file hosted by the site itself). */
   src: string;
-  /** Versão maior, baixada só em telas largas (a partir de `from`). */
+  /** Larger version, downloaded only on wide screens (from `from` up). */
   srcLarge?: string;
-  /** Largura mínima (px) para a versão maior. 1024 por padrão. */
+  /** Minimum width (px) for the larger version. Defaults to 1024. */
   from?: 768 | 1024;
-  /** Quadro parado: aparece antes de o vídeo carregar, sem JS e com movimento reduzido. */
+  /** Still frame: shown before the video loads, without JS, and with reduced motion. */
   poster: string;
-  /** Quadro parado da versão maior, quando ela é outro vídeo (ex.: vertical no celular, deitado no desktop). */
+  /** Still frame of the larger version, when it is a different video (e.g. vertical on mobile, landscape on desktop). */
   posterLarge?: string;
-  /** Aproxima o vídeo para cortar bordas gravadas no arquivo. */
+  /** Zooms the video in to crop edges baked into the file. */
   trimEdges?: boolean;
-  /** object-position do vídeo (ex.: "center 20%" p/ manter o rosto num clipe vertical). */
+  /** object-position of the video (e.g. "center 20%" to keep the face in a vertical clip). */
   objectPosition?: string;
-  /** Rótulos do botão de pausa (injetáveis p/ i18n). */
+  /** Pause button labels (injectable for i18n). */
   labels?: { pause?: string; play?: string };
   className?: string;
 };
 
 /**
- * Vídeo de fundo da família Cuidado Global — espelha o `VideoFundo` do creeta
- * com os tokens do Breathe (ink/surface). Clipe mudo em repetição, é enfeite:
- * fica fora da leitura de tela (aria-hidden). Não usa o atributo `autoplay`:
- * só começa depois de conferir prefers-reduced-motion e economia de dados
- * (save-data). Tem botão de pausa (WCAG 2.2.2) no canto superior-direito.
+ * Background video of the Cuidado Global family — mirrors creeta's `VideoFundo`
+ * with the Breathe tokens (ink/surface). Muted looping clip, purely decorative:
+ * hidden from screen readers (aria-hidden). Does not use the `autoplay`
+ * attribute: it only starts after checking prefers-reduced-motion and data
+ * saver (save-data). Has a pause button (WCAG 2.2.2) in the top-right corner.
  */
 export function BackgroundVideo({
   src,
@@ -93,7 +93,7 @@ export function BackgroundVideo({
       <button
         type="button"
         onClick={toggle}
-        aria-label={running ? labels?.pause ?? "Pausar vídeo" : labels?.play ?? "Reproduzir vídeo"}
+        aria-label={running ? labels?.pause ?? "Pause video" : labels?.play ?? "Play video"}
         className="absolute top-4 right-4 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-ink/85 text-surface backdrop-blur-md transition-colors duration-200 hover:bg-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface motion-reduce:transition-none"
       >
         {running ? (

package/components/BottomNav.tsx

@@ -2,75 +2,75 @@
 
 import { useEffect, useId, useRef, useState, type ComponentType, type ElementType, type ReactNode } from "react";
 
-/** Ícone no padrão lucide (o componente, não o nó): a barra decide o tamanho. */
+/** Icon in the lucide pattern (the component, not the node): the bar decides the size. */
 export type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
 
-/** Uma página do site, em ordem de importância. As primeiras ficam na barra;
- *  as que não couberem vão para o "Mais". */
+/** One page of the site, in order of importance. The first ones stay on the bar;
+ *  those that don't fit go into "More". */
 export type BottomPage = {
   href: string;
   label: ReactNode;
   Icon: IconType;
-  /** A página atual é esta? (o app decide: rota/idioma são dele) */
+  /** Is this the current page? (the app decides: route/locale are its own) */
   active?: boolean;
 };
 
-/** Saída extra do painel "Mais" (ex.: cursos em outro site): endereço escrito
- *  embaixo e seta para fora, como no novo.creeta. */
+/** Extra exit in the "More" panel (e.g. courses on another site): address written
+ *  underneath and an outward arrow, as on novo.creeta. */
 export type BottomExtra = {
   href: string;
   label: ReactNode;
   Icon: IconType;
-  /** Linha menor sob o rótulo (ex.: o domínio). Com `external` e sem isto, mostra o domínio do href. */
+  /** Smaller line under the label (e.g. the domain). With `external` and without this, shows the href's domain. */
   description?: ReactNode;
   external?: boolean;
   active?: boolean;
 };
 
 type Labels = {
-  /** aria-label da barra */
+  /** aria-label of the bar */
   nav: string;
-  /** rótulo da aba "Mais" */
+  /** label of the "More" tab */
   more: string;
-  /** aria-label do painel */
+  /** aria-label of the panel */
   morePages: string;
-  /** sr-only depois de "Mais": "mais páginas" */
+  /** sr-only after "More": "more pages" */
   morePagesSr: string;
-  /** sr-only quando a página atual está no "Mais" */
+  /** sr-only when the current page is inside "More" */
   currentHere: string;
-  /** sr-only em link externo */
+  /** sr-only on an external link */
   newTab: string;
 };
 
-const PT: Labels = {
-  nav: "Navegação principal",
-  more: "Mais",
-  morePages: "Mais páginas",
-  morePagesSr: "mais páginas",
-  currentHere: "(a página atual está aqui)",
-  newTab: "(abre em outra aba)",
+const EN: Labels = {
+  nav: "Main navigation",
+  more: "More",
+  morePages: "More pages",
+  morePagesSr: "more pages",
+  currentHere: "(the current page is here)",
+  newTab: "(opens in a new tab)",
 };
 
 type Props = {
   pages: BottomPage[];
   extras?: BottomExtra[];
-  /** Componente de link do app (ex.: next-intl Link). Default: <a>. */
+  /** The app's link component (e.g. next-intl Link). Default: <a>. */
   linkComponent?: ElementType;
-  /** A partir de que largura o header assume e a barra some. creeta: `md`; ttcab: `lg`. */
+  /** From which width the header takes over and the bar disappears. creeta: `md`; ttcab: `lg`. */
   hideFrom?: "md" | "lg";
-  /** Textos (padrão pt-BR); o app passa os do idioma. */
+  /** Strings (English defaults); the app passes the ones for its locale. */
   labels?: Partial<Labels>;
-  /** Embutida num contêiner `relative` (demo, moldura de celular): barra, véu e
-   *  painel ficam `absolute` dentro dele e aparecem em qualquer largura. */
+  /** Embedded in a `relative` container (demo, phone frame): bar, veil and
+   *  panel are `absolute` inside it and show at any width. */
   embedded?: boolean;
 };
 
-/** Largura mínima de uma aba, em px: abaixo disso o rótulo não cabe. */
+/** Minimum width of a tab, in px: below this the label doesn't fit. */
 export const TAB_MIN_WIDTH = 64;
 
-/** Quantas páginas aparecem direto na barra, para uma largura útil. A última
- *  aba é sempre o "Mais" (é nele que ficam as páginas que não couberam e as
- *  saídas extras), então cabe uma página a menos que o número de abas. */
+/** How many pages show directly on the bar, for a given usable width. The last
+ *  tab is always "More" (that's where the pages that didn't fit and the extra
+ *  exits live), so one page fewer than the number of tabs fits. */
 export function howManyFit(width: number, total: number): number {
   const tabs = Math.floor(width / TAB_MIN_WIDTH);
   return Math.max(2, Math.min(total, tabs - 1));
@@ -83,9 +83,9 @@ const ArrowUpRight = () => (
   <svg aria-hidden="true" viewBox="0 0 24 24" className="h-[18px] w-[18px] shrink-0" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
 );
 
-// Aba: coluna ícone+rótulo. Ativa ganha FORMA (pílula clara), não só cor —
-// legível pra quem não distingue cor. Encolhe no toque, como botão de app.
-// O nome de transição faz o destaque deslizar entre as abas na troca de página.
+// Tab: icon+label column. The active one gets a SHAPE (light pill), not just color —
+// readable for people who can't tell colors apart. Shrinks on touch, like an app button.
+// The view-transition name makes the highlight slide between tabs on page change.
 const tab = (active: boolean) =>
   [
     "flex h-14 w-full flex-col items-center justify-center gap-1 rounded-[20px] px-1 text-[10.5px] font-medium leading-none tracking-tight",
@@ -101,29 +101,29 @@ const row = (active?: boolean) =>
 const bubble = "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink";
 
 /**
- * Navegação principal no celular: barra flutuante ao alcance do polegar, como
- * em app. É o código da BarraNavegacao do novo.creeta (e do BottomNav do
- * ttcab), neutro por tokens: `ink` na barra, `surface` na aba ativa.
+ * Main navigation on mobile: floating bar within thumb reach, app-like. It is
+ * the code of novo.creeta's BarraNavegacao (and ttcab's BottomNav), made
+ * neutral through tokens: `ink` on the bar, `surface` on the active tab.
  *
- * - Dinâmica: mostra quantas páginas couberem na largura (ResizeObserver,
- *   64px por aba). A última aba é sempre o "Mais", com o resto e as saídas
- *   extras. Num celular comum são quatro páginas e o "Mais".
- * - Véu atrás da barra: o conteúdo some aos poucos antes de chegar nela.
- * - O painel "Mais" é um popover nativo: fecha com Esc e com toque fora,
- *   devolve o foco ao botão e abre mesmo sem JavaScript. Embutido (demo),
- *   vira um painel absoluto dentro da moldura, com a mesma entrada.
- * - Some a partir de `hideFrom` (md no creeta, lg no ttcab), onde o header assume.
+ * - Dynamic: shows as many pages as fit the width (ResizeObserver, 64px per
+ *   tab). The last tab is always "More", holding the rest and the extra
+ *   exits. On a typical phone that's four pages plus "More".
+ * - Veil behind the bar: content fades out gradually before reaching it.
+ * - The "More" panel is a native popover: closes on Esc and on tap outside,
+ *   returns focus to the button and opens even without JavaScript. Embedded
+ *   (demo), it becomes an absolute panel inside the frame, with the same entrance.
+ * - Hidden from `hideFrom` up (md on creeta, lg on ttcab), where the header takes over.
  */
 export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg", labels, embedded = false }: Props) {
   const L: ElementType = linkComponent ?? "a";
-  const t = { ...PT, ...labels };
+  const t = { ...EN, ...labels };
   const list = useRef<HTMLUListElement>(null);
   const panel = useRef<HTMLDivElement>(null);
   const wrap = useRef<HTMLDivElement>(null);
   const panelId = useId();
-  // antes de medir: o caso do celular comum (5 abas = 4 páginas + Mais)
+  // before measuring: the typical phone case (5 tabs = 4 pages + More)
   const [visible, setVisible] = useState(() => howManyFit(5 * TAB_MIN_WIDTH, pages.length));
-  const [open, setOpen] = useState(false); // só no modo embutido
+  const [open, setOpen] = useState(false); // embedded mode only
 
   useEffect(() => {
     const ul = list.current;
@@ -145,15 +145,15 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
     try {
       if (el?.matches(":popover-open")) el.hidePopover?.();
     } catch {
-      /* navegador sem popover: não há o que fechar */
+      /* browser without popover support: nothing to close */
     }
   };
 
-  // Trocou de página: o painel fecha.
+  // Page changed: the panel closes.
   const activeHref = pages.find((p) => p.active)?.href;
   useEffect(close, [activeHref]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Embutido: fecha com Esc e com toque fora (o popover nativo faz isso sozinho).
+  // Embedded: closes on Esc and on tap outside (the native popover does this by itself).
   useEffect(() => {
     if (!embedded || !open) return;
     const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
@@ -173,11 +173,12 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
   const inMore = pages.slice(visible);
   const moreActive = inMore.some((p) => p.active) || extras.some((x) => x.active);
   const pos = embedded ? "absolute" : "fixed";
-  const hide = embedded ? "" : ` ${hideFrom}:hidden`;
+  // full class names (Tailwind only generates what it finds written in the code)
+  const hide = embedded ? "" : hideFrom === "md" ? " md:hidden" : " lg:hidden";
 
   const panelInner = (
     <nav aria-label={t.morePages}>
-      {/* Um item por linha: em duas colunas o painel ficava confuso. */}
+      {/* One item per row: in two columns the panel got confusing. */}
       {inMore.length > 0 && (
         <ul className="grid list-none gap-1">
           {inMore.map(({ href, label, Icon, active }, i) => (
@@ -223,8 +224,8 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
   return (
     <div ref={wrap} className={embedded ? "contents" : undefined}>
       <style>{CSS}</style>
-      {/* Véu atrás da barra: o conteúdo que rola some aos poucos antes de
-          chegar nela, em vez de aparecer cortado pelas bordas. */}
+      {/* Veil behind the bar: scrolling content fades out gradually before
+          reaching it, instead of showing up clipped by the edges. */}
       <div
         aria-hidden="true"
         className={`pointer-events-none ${pos} inset-x-0 bottom-0 z-40 h-28 bg-gradient-to-t from-surface from-35% via-surface/85 via-65% to-transparent [view-transition-name:veu]${hide}`}
@@ -246,7 +247,7 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
             </li>
           ))}
           <li className="min-w-0 flex-1">
-            {/* popovertarget em minúsculas: o React 18 não conhece o atributo e o repassa como está. */}
+            {/* popovertarget in lowercase: React 18 doesn't know the attribute and passes it through as is. */}
             <button
               type="button"
               {...(embedded ? { "aria-expanded": open, "aria-controls": panelId, onClick: () => setOpen((o) => !o) } : { popovertarget: panelId })}
@@ -262,12 +263,12 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
 
       {embedded ? (
         open && (
-          <div id={panelId} className="cg-mais-painel cg-mais-painel--embutido">
+          <div id={panelId} className="cg-more-panel cg-more-panel--embedded">
             {panelInner}
           </div>
         )
       ) : (
-        <div ref={panel} id={panelId} {...{ popover: "auto" }} className={`cg-mais-painel cg-mais-painel--${hideFrom}`}>
+        <div ref={panel} id={panelId} {...{ popover: "auto" }} className={`cg-more-panel cg-more-panel--${hideFrom}`}>
           {panelInner}
         </div>
       )}
@@ -275,26 +276,26 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
   );
 }
 
-/* Painel "Mais": logo acima da barra; entra crescendo a partir do canto do
-   botão "Mais", em 0,18s (igual ao .mais-painel do novo.creeta). */
+/* "More" panel: right above the bar; enters growing from the corner of the
+   "More" button, in 0.18s (same as novo.creeta's .mais-painel). */
 const CSS = `
-.cg-mais-painel{
+.cg-more-panel{
   position:fixed; inset:auto .75rem calc(5.75rem + env(safe-area-inset-bottom)) .75rem;
   width:auto; margin:0; border:0; border-radius:26px; padding:.5rem;
-  background:#fff; color:var(--color-ink);
+  background:var(--color-card); color:var(--color-ink);
   box-shadow:0 20px 48px -16px rgb(0 0 0 / .35), 0 1px 2px rgb(0 0 0 / .1);
   opacity:0; transform:translateY(8px) scale(.97); transform-origin:88% 100%;
   transition:opacity 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1), overlay 180ms allow-discrete, display 180ms allow-discrete;
 }
-.cg-mais-painel:popover-open, .cg-mais-painel--embutido{ opacity:1; transform:none; }
-@starting-style{ .cg-mais-painel:popover-open, .cg-mais-painel--embutido{ opacity:0; transform:translateY(8px) scale(.97); } }
-.cg-mais-painel::backdrop{ background:transparent; }
-.cg-mais-painel--embutido{ position:absolute; z-index:50; }
+.cg-more-panel:popover-open, .cg-more-panel--embedded{ opacity:1; transform:none; }
+@starting-style{ .cg-more-panel:popover-open, .cg-more-panel--embedded{ opacity:0; transform:translateY(8px) scale(.97); } }
+.cg-more-panel::backdrop{ background:transparent; }
+.cg-more-panel--embedded{ position:absolute; z-index:50; }
 @media (prefers-reduced-motion:reduce){
-  .cg-mais-painel{ transform:none; transition:opacity 120ms ease; }
-  @starting-style{ .cg-mais-painel:popover-open, .cg-mais-painel--embutido{ transform:none; } }
+  .cg-more-panel{ transform:none; transition:opacity 120ms ease; }
+  @starting-style{ .cg-more-panel:popover-open, .cg-more-panel--embedded{ transform:none; } }
 }
-/* A partir do breakpoint a barra não existe: o painel também não. */
-@media (min-width:768px){ .cg-mais-painel--md{ display:none !important; } }
-@media (min-width:1024px){ .cg-mais-painel--lg{ display:none !important; } }
+/* From the breakpoint up the bar doesn't exist: neither does the panel. */
+@media (min-width:768px){ .cg-more-panel--md{ display:none !important; } }
+@media (min-width:1024px){ .cg-more-panel--lg{ display:none !important; } }
 `;

package/components/Breadcrumb.tsx

@@ -0,0 +1,45 @@
+import type { ElementType, ReactNode } from "react";
+
+export type Crumb = { label: ReactNode; href: string };
+
+type Props = {
+  /** From the section the page belongs to down to the parent of the current page. */
+  items: Crumb[];
+  linkComponent?: ElementType;
+  /** aria-label of the nav. */
+  label?: string;
+  className?: string;
+};
+
+// trail link: no resting underline (two underlines side by side weighed too much);
+// it shows on hover and on focus
+const link =
+  "inline-flex min-h-11 items-center text-ink underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-ink focus-visible:decoration-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none";
+
+/**
+ * Breadcrumb — the trail of a novo.creeta article: "← Section › Parent", so
+ * the text starts right away. The first crumb carries the back arrow; the
+ * current page is not listed (its title follows).
+ */
+export function Breadcrumb({ items, linkComponent, label = "Trail", className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  return (
+    <nav aria-label={label} className={className}>
+      <ol className="m-0 flex list-none flex-wrap items-center gap-x-2 p-0 text-sm font-semibold text-ink/80">
+        {items.map((c, i) => (
+          <li key={`${i}-${c.href}`} className="flex items-center gap-x-2">
+            {i > 0 && (
+              <svg aria-hidden="true" viewBox="0 0 24 24" width={14} height={14} className="text-ink/50" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6" /></svg>
+            )}
+            <L href={c.href} className={`${link} ${i === 0 ? "gap-1.5" : ""}`}>
+              {i === 0 && (
+                <svg aria-hidden="true" viewBox="0 0 24 24" width={16} height={16} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m12 19-7-7 7-7M19 12H5" /></svg>
+              )}
+              {c.label}
+            </L>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/components/BreatheMark.tsx

@@ -1,21 +1,22 @@
 type Props = {
-  /** Lado em px (quadrado). É o tamanho do glifo visível: a caixa do SVG é
-   *  justa ao anel + ponto, sem ar interno (o espaço entre símbolo e nome
-   *  fica a cargo do layout). */
+  /** Side in px (square). This is the size of the visible glyph: the SVG box
+   *  is tight to the ring + dot, with no inner padding (the space between
+   *  symbol and name is up to the layout). */
   size?: number;
-  /** Segundos de um ciclo respiratório completo (inspira+expira). */
+  /** Seconds of one full breathing cycle (inhale + exhale). */
   duration?: number;
-  /** Anima? (ainda respeita prefers-reduced-motion). */
+  /** Animate? (still respects prefers-reduced-motion). */
   animated?: boolean;
   className?: string;
   title?: string;
 };
 
 /**
- * Símbolo vivo do Breathe — um anel aberto (gesto fluido, contínuo) com um
- * ponto no respiro, abstração do logotipo do creeta (forma redonda + ponto).
- * NEUTRO: usa currentColor, herda a cor do contexto (a paleta vem de cada app).
- * "Respira" num pulso suave de escala; respeita prefers-reduced-motion.
+ * Living symbol of Breathe: an open ring (a fluid, continuous gesture) with a
+ * dot at the breath gap, an abstraction of the creeta logo (round shape + dot).
+ * NEUTRAL: uses currentColor and inherits the color from context (the palette
+ * comes from each app). It "breathes" with a soft scale pulse; respects
+ * prefers-reduced-motion.
  */
 export function BreatheMark({
   size = 96,
@@ -26,19 +27,6 @@ export function BreatheMark({
 }: Props) {
   return (
     <span className={className} style={{ display: "inline-flex", lineHeight: 0 }}>
-      <style>{`
-        @keyframes breathe-mark-inhale {
-          0%, 100% { transform: scale(0.93); }
-          50%      { transform: scale(1.05); }
-        }
-        .breathe-mark__g {
-          transform-box: fill-box;
-          transform-origin: center;
-          animation: breathe-mark-inhale var(--breathe-dur, 6s) cubic-bezier(0.37, 0, 0.63, 1) infinite;
-        }
-        .breathe-mark--static .breathe-mark__g { animation: none; }
-        @media (prefers-reduced-motion: reduce) { .breathe-mark__g { animation: none; } }
-      `}</style>
       <svg
         width={size}
         height={size}
@@ -50,7 +38,7 @@ export function BreatheMark({
         style={{ ["--breathe-dur" as string]: `${duration}s` }}
       >
         <g className="breathe-mark__g">
-          {/* anel aberto — gesto contínuo com um respiro no topo */}
+          {/* open ring: a continuous gesture with a breath gap at the top */}
           <path
             d="M 42 17.5 A 17 17 0 1 1 22 17.5"
             fill="none"
@@ -58,7 +46,7 @@ export function BreatheMark({
             strokeWidth="8.5"
             strokeLinecap="round"
           />
-          {/* ponto do respiro */}
+          {/* the breath dot */}
           <circle cx="32" cy="14.5" r="4.4" fill="currentColor" />
         </g>
       </svg>