@breathe-ds/ui 0.5.4 → 0.6.0

package/README.md

@@ -192,21 +192,48 @@ from color, not from extra markup.
 
 ## Navigation
 
+- **ProfileSpotlight**: one person in focus (founder, course coordinator, guest) —
+  portrait on the left (photo or `living`, the team pages' living portrait), then
+  eyebrow, name, role, registration, bio and `actions`. `variant` `plain` (on the page
+  color) or `card` (white card). Stacks on phones.
+- **Texture & rhythm (opt-in)**: `.cg-grain` adds a barely-there paper grain (noise in
+  the ink color) to any background — the body, a band. `bg-surface-alt` (token
+  `--cg-surface-alt`, falls back to `surface`) is a band one step deeper than the page,
+  for alternating sections; TTCAB `#f6eedd` (ink-soft 4.58:1), Creeta `#e4ecee`.
+  Neutral fills and shadows are tokens too: `bg-tint` (`--cg-tint`, icon bubbles, pills,
+  placeholders; default ink at 8%) and `--cg-shadow` (the hue of soft shadows). TTCAB
+  derives them from the logo's orange (warm neutrals, never grey).
+  `.cg-dots` (dot grid, 16px) or `.cg-dots-edges` (only on the side gutters, fading
+  out before the content column — the Cloudflare touch) layer dots over a background.
+- **Search page, Apple-style**: `PageHero variant="centered"` (no box, title and one search
+  centred) + **FilterBar** (thin sticky bar of compact filters — `SelectField density="sm"` —
+  with the count and "clear" on the right; it publishes its height as `--cg-filterbar-h`, so
+  `StickyGroupHeading stickyTop="top-[calc(80px+var(--cg-filterbar-h,0px))]"` sticks right below).
+- **PullQuote** + **Highlight**: one line set large between sections — drawn quote
+  mark in the action color, balanced lines, hand-drawn underline (`Highlight`) on the
+  key words. `cite` adds the person (Byline with role); without it, a brand statement.
 - **Header**: brand (the app passes the link to the home page) · items · item with dropdown
   (icons on sub-items; final link with a → arrow, or ↗ if `external`) · language · CTA.
   Site convention: "Home" is just the house (`icon` + `iconOnly`), with a label for
   screen readers.
+  Long dropdowns: `columns: 2` (compact rows, max 2 columns) and `align: "end"` to keep
+  the wider menu inside the viewport; `groups` (in place of `children`) adds labelled
+  groups, e.g. `[{ label: "Navigation", children: [...] }]`.
 - **BottomNav**: on phone/tablet, navigation leaves the header and becomes the
   floating bottom bar. It is the code of novo.creeta's BarraNavegacao (= ttcab's
   BottomNav), made neutral through tokens: it receives ALL pages in order of importance
   (`pages`, with the lucide `Icon`) and shows as many as fit (64px per tab,
-  ResizeObserver); the rest and the external exits (`extras`, with the domain spelled out
+  ResizeObserver), **at most 5 tabs counting "More"** (4 pages + More, as the iOS and
+  Android tab bars; family rule of 2026-10-30: more than that cuts the labels and
+  shrinks the tap targets); the rest and the external exits (`extras`, with the domain spelled out
   and a ↗ arrow) go to the "More" panel, a native popover (Esc, tap outside, no
   JS). Gradient veil behind the bar. `hideFrom` = `md` (creeta) or `lg`
   (ttcab). `labels` for another language. `embedded` for the demo frame.
 - **AnchorNav**: floating capsule of page anchors (scroll-spy + sliding
   indicator), extracted from ttcab's TreatmentAnchorNav. Target sections need
-  a `scroll-mt-*` compatible with the sticky header.
+  a `scroll-mt-*` compatible with the sticky header. White capsule (`card`);
+  `tone="surface"` (default: active pill in the page color with a hairline) or
+  `tone="accent"` (action tint, active label in action-text — more emphasis).
 - **LanguageSwitcher**: the SeletorDeIdioma of novo.creeta — `menu` (button with
   the code, opens the three languages; header) or `list` (plain links; the Footer
   uses it). Same page in the other language, each language written in itself,

package/components/Accordion.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-import { useId, useState, type ReactNode } from "react";
+import { version as REACT_VERSION, useId, useState, type ReactNode } from "react";
+
+const INERT_ON = parseInt(REACT_VERSION, 10) >= 19 ? true : "";
 
 export type AccordionItem = {
   id: string;
@@ -85,8 +87,9 @@ export function Accordion({ items, defaultOpenId, single = true }: Props) {
               id={panelId}
               role="region"
               aria-labelledby={btnId}
-              // React 18 does not know `inert` as a boolean: empty string turns it on, undefined turns it off (in 19 the boolean works the same way).
-              {...({ inert: isOpen ? undefined : "" } as Record<string, unknown>)}
+              // closed panel out of the tab order: React 19 takes `inert` as a boolean (an empty
+              // string there means false); React 18 does not know it and needs the empty string
+              {...({ inert: isOpen ? undefined : INERT_ON } as Record<string, unknown>)}
               className={`grid transition-[grid-template-rows] duration-300 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none ${
                 isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
               }`}

package/components/AnchorNav.tsx

@@ -21,6 +21,10 @@ type Props = {
   /** The app's link component (e.g. next-intl Link). Default: <a>. */
   linkComponent?: ElementType;
   className?: string;
+  /** Tone of the active and hover pill. `surface` (default): the page color on the
+   *  white capsule, with a hairline. `accent`: the light action tint, the active
+   *  label in action-text (more emphasis). */
+  tone?: "surface" | "accent";
   /** Strings (English defaults); the app passes the ones for its locale. */
   labels?: Partial<Labels>;
 };
@@ -39,7 +43,8 @@ type Props = {
  * `scroll-mt-*` that, added to the theme's `scroll-padding-top` (96px), clears
  * the header plus the capsule (e.g. `scroll-mt-20` with an 80px header).
  */
-export function AnchorNav({ items, stickyTop = "top-20", linkComponent, className = "", labels }: Props) {
+export function AnchorNav({ items, stickyTop = "top-20", linkComponent, className = "", tone = "surface", labels }: Props) {
+  const accent = tone === "accent";
   const L: ElementType = linkComponent ?? "a";
   const t = { ...EN, ...labels };
   const [active, setActive] = useState(items[0]?.id ?? "");
@@ -121,12 +126,12 @@ export function AnchorNav({ items, stickyTop = "top-20", linkComponent, classNam
         <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"
+            className="relative flex max-w-full list-none gap-1 overflow-x-auto rounded-pill border border-line bg-card p-1.5 shadow-[0_10px_28px_-14px_color-mix(in_srgb,var(--color-shadow)_35%,transparent)] backdrop-blur [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
           >
             {/* 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"
+              className={`pointer-events-none absolute top-0 left-0 rounded-pill ${accent ? "bg-action-tint" : "bg-surface shadow-[inset_0_0_0_1px_var(--color-line)]"} transition-[transform,width,height,opacity] duration-[320ms] ease-cg motion-reduce:transition-none`}
               style={{ width: pill.w, height: pill.h, opacity: pill.ready ? 1 : 0, transform: `translate(${pill.x}px, ${pill.y}px)` }}
             />
             {items.map((n) => {
@@ -140,8 +145,8 @@ export function AnchorNav({ items, stickyTop = "top-20", linkComponent, classNam
                     href={`#${n.id}`}
                     aria-current={isActive ? "true" : undefined}
                     onClick={() => setActive(n.id)}
-                    className={`relative z-10 inline-block whitespace-nowrap rounded-pill border border-transparent px-3.5 py-2 font-heading text-[0.92rem] font-semibold text-ink transition-[background-color,border-color] duration-200 ease-cg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none ${
-                      isActive ? "" : "hover:border-ink/15 hover:bg-ink/[0.06]"
+                    className={`relative z-10 inline-block whitespace-nowrap rounded-pill border border-transparent px-3.5 py-2 font-heading text-[0.92rem] font-semibold ${isActive && accent ? "text-action-text" : "text-ink"} transition-[background-color,border-color,color] duration-200 ease-cg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none ${
+                      isActive ? "" : accent ? "hover:bg-action-tint/60" : "hover:bg-surface"
                     }`}
                   >
                     {n.label}

package/components/Avatar.tsx

@@ -30,7 +30,7 @@ export function Avatar({ name, photo, children, size = 40, ring = false, classNa
   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}>
+    <span aria-hidden="true" className={`${base} bg-tint font-heading font-bold text-ink`} style={style}>
       {initials(name)}
     </span>
   );

package/components/BottomNav.tsx

@@ -1,6 +1,9 @@
 "use client";
 
-import { useEffect, useId, useRef, useState, type ComponentType, type ElementType, type ReactNode } from "react";
+import { version as REACT_VERSION, useEffect, useId, useRef, useState, type ComponentType, type ElementType, type ReactNode } from "react";
+
+// the popover trigger attribute: camelCase in React 19+, lowercase passthrough in 18
+const POPOVER_TARGET = parseInt(REACT_VERSION, 10) >= 19 ? "popoverTarget" : "popovertarget";
 
 /** 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" }>;
@@ -71,8 +74,12 @@ export const TAB_MIN_WIDTH = 64;
 /** 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. */
+/** At most 5 tabs (4 pages + More), as the iOS and Android tab bars: on a wider
+ *  bar each tab gets room for its label instead of more tabs squeezing in. */
+export const MAX_TABS = 5;
+
 export function howManyFit(width: number, total: number): number {
-  const tabs = Math.floor(width / TAB_MIN_WIDTH);
+  const tabs = Math.min(MAX_TABS, Math.floor(width / TAB_MIN_WIDTH));
   return Math.max(2, Math.min(total, tabs - 1));
 }
 
@@ -98,7 +105,7 @@ const row = (active?: boolean) =>
   `flex min-h-14 items-center gap-3 rounded-[18px] px-3 font-medium transition-colors duration-150 active:bg-surface focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none ${
     active ? "bg-surface text-ink" : "text-ink"
   }`;
-const bubble = "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink";
+const bubble = "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-tint text-ink";
 
 /**
  * Main navigation on mobile: floating bar within thumb reach, app-like. It is
@@ -247,10 +254,10 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
             </li>
           ))}
           <li className="min-w-0 flex-1">
-            {/* popovertarget in lowercase: React 18 doesn't know the attribute and passes it through as is. */}
+            {/* React 19 knows `popoverTarget`; React 18 only passes the lowercase attribute through as is. */}
             <button
               type="button"
-              {...(embedded ? { "aria-expanded": open, "aria-controls": panelId, onClick: () => setOpen((o) => !o) } : { popovertarget: panelId })}
+              {...(embedded ? { "aria-expanded": open, "aria-controls": panelId, onClick: () => setOpen((o) => !o) } : { [POPOVER_TARGET]: panelId })}
               className={tab(embedded ? open || moreActive : moreActive)}
             >
               <MenuIcon />

package/components/Button.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes } from "react";
 
-type Variant = "solid" | "accent" | "outline" | "ghost" | "link";
+type Variant = "solid" | "accent" | "outline" | "ghost" | "link" | "outline-inverse";
 type Size = "sm" | "md" | "lg";
 
 const pillBase =
@@ -27,7 +27,10 @@ const variants: Record<Exclude<Variant, "link">, string> = {
   // the 4.5:1 of normal text. Keep the accent for ONE large button per block.
   accent: "bg-action text-on-action hover:brightness-[0.92]",
   outline: "border border-line text-ink hover:bg-ink/[0.05]",
-  ghost: "text-ink hover:bg-ink/[0.06]",
+  ghost: "text-ink hover:bg-tint",
+  // secondary on a dark panel (hero panel, StoryPanel, surface-panel): light outline,
+  // surface text (cream on petrol 9.41:1 on ttcab)
+  "outline-inverse": "border border-surface/45 text-surface hover:bg-surface/10",
 };
 
 const sizes: Record<Size, string> = {

package/components/Byline.tsx

@@ -9,6 +9,11 @@ type Props = {
    *  and the names go on their own line; without it, one inline line:
    *  avatar · name · action. */
   eyebrow?: ReactNode;
+  /** Hide the portraits (the card already shows a big photo of the person). */
+  hideAvatars?: boolean;
+  /** Small line under the name(s), aligned with them ("Physiotherapist").
+   *  Ignored when there is an `eyebrow`. */
+  subtitle?: ReactNode;
   /** Link after the name(s) ("Watch the video ↗"). */
   action?: { label: ReactNode; href: string; external?: boolean };
   /** Joiners between names: ", " and " and ". */
@@ -35,7 +40,7 @@ const nameLink =
  * - inline (under a topic card): portrait, name and "Watch the video ↗".
  * Portraits are decorative: the names carry the information.
  */
-export function Byline({ people, eyebrow, action, joiners = { sep: ", ", last: " and " }, cite = false, newTabLabel = "(opens in a new tab)", linkComponent, className = "" }: Props) {
+export function Byline({ people, eyebrow, subtitle, hideAvatars = false, action, joiners = { sep: ", ", last: " and " }, cite = false, newTabLabel = "(opens in a new tab)", linkComponent, className = "" }: Props) {
   const L: ElementType = linkComponent ?? "a";
   // portraits stack with a ring (as on the site); initials would lose their letters, so they sit side by side
   const stack = people.length > 1 && people.every((p) => p.photo || p.avatar);
@@ -65,6 +70,25 @@ export function Byline({ people, eyebrow, action, joiners = { sep: ", ", last: "
     </L>
   ) : null;
 
+  if (subtitle && !eyebrow) {
+    return (
+      <div className={`flex items-center gap-3 ${className}`}>
+        <span className={hideAvatars ? "hidden" : row}>
+          {people.map((p) => (
+            <Avatar key={p.name} name={p.name} photo={p.photo} size={people.length === 1 ? 40 : 36} ring={stack}>{p.avatar}</Avatar>
+          ))}
+        </span>
+        <div className="leading-snug">
+          <p className="m-0 text-sm font-semibold text-ink">
+            <Names className="not-italic">{names}</Names>
+            {actionEl && <> · {actionEl}</>}
+          </p>
+          <p className="m-0 mt-0.5 text-sm text-ink-soft">{subtitle}</p>
+        </div>
+      </div>
+    );
+  }
+
   if (eyebrow) {
     return (
       <div className={`flex items-center gap-3 ${className}`}>

package/components/Card.tsx

@@ -6,6 +6,10 @@ type Props = {
   href?: string;
   /** Lifts on hover (for clickable cards). */
   interactive?: boolean;
+  /** `outline` (default): page color with a hairline and a soft shadow.
+   *  `solid`: white card, no border, 28px corners — the family's testimonial
+   *  and profile cards. */
+  variant?: "outline" | "solid";
   className?: string;
 };
 
@@ -14,10 +18,14 @@ type Props = {
  * shadow**, 2xl radius (28px), surface background. With `href` it becomes a
  * link; with `interactive` it lifts on hover. No strong borders or heavy shadows.
  */
-export function Card({ children, href, interactive, className = "" }: Props) {
-  const cls = `block rounded-2xl border border-line bg-surface p-[clamp(20px,3vw,32px)] shadow-[0_2px_12px_rgba(20,71,83,0.06)] ${
+export function Card({ children, href, interactive, variant = "outline", className = "" }: Props) {
+  const look =
+    variant === "solid"
+      ? "rounded-[28px] bg-card p-5 md:p-8"
+      : "rounded-2xl border border-line bg-surface p-[clamp(20px,3vw,32px)] shadow-[0_2px_12px_color-mix(in_srgb,var(--color-shadow)_6%,transparent)]";
+  const cls = `block ${look} ${
     interactive || href
-      ? "transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_14px_34px_rgba(20,71,83,0.12)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none motion-reduce:hover:translate-y-0"
+      ? "transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_14px_34px_color-mix(in_srgb,var(--color-shadow)_12%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none motion-reduce:hover:translate-y-0"
       : ""
   } ${className}`;
   if (href) {

package/components/ContactRow.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useId, useState, type ReactNode } from "react";
+import { ChevronDown } from "lucide-react";
+import { Avatar } from "./Avatar";
+import { FADE_IN } from "./Rows";
+
+export type ContactAction = {
+  /** What the button does ("Ligar", "E-mail"). */
+  label: ReactNode;
+  /** The value shown under it: the number, the address. */
+  value: ReactNode;
+  href: string;
+  icon?: ReactNode;
+  /** sr-only after the label: who it reaches (" para Ana Souza"). */
+  srLabel?: ReactNode;
+  /** Long unbroken value (an e-mail) may wrap, only when it does not fit. */
+  breakAll?: boolean;
+  /** Opens in a new tab (WhatsApp). Say so in `srLabel`. */
+  external?: boolean;
+};
+
+type Props = {
+  /** Plain name: the initials. */
+  name: string;
+  /** The name as rendered (e.g. with the search match marked). */
+  nameDisplay?: ReactNode;
+  /** One quiet line under the name: the city. */
+  meta?: ReactNode;
+  /** Revealed when the row opens. */
+  actions: ContactAction[];
+  /** Start open (e.g. the only result of a search). */
+  defaultOpen?: boolean;
+  headingLevel?: "h3" | "h4";
+  className?: string;
+};
+
+/**
+ * ContactRow — one person in a long directory, as in the iPhone's Contacts:
+ * the list shows only what you scan by (initials, name, city); the ways to
+ * reach the person appear when you tap the row. 140 people with phone and
+ * e-mail always visible was a wall of data; this is a list of names.
+ *
+ * Put rows in a `ContactList` (the white inset-grouped panel with hairlines).
+ * The row is a button with `aria-expanded`; the actions are real links
+ * (wa.me, tel:, mailto:) written as plain text — icon + the value, 44px tall,
+ * underlined on hover — so the number can also be read and copied. No hover
+ * fill on the row (only a light press tint): open, row and actions share one
+ * white surface.
+ */
+export function ContactRow({ name, nameDisplay, meta, actions, defaultOpen = false, headingLevel: H = "h3", className = "" }: Props) {
+  const [open, setOpen] = useState(defaultOpen);
+  const panel = useId();
+  return (
+    <li className={`relative list-none ${className}`}>
+      <H className="m-0 font-normal">
+        <button
+          type="button"
+          aria-expanded={open}
+          aria-controls={panel}
+          onClick={() => setOpen((v) => !v)}
+          className="group/row flex min-h-16 w-full items-center gap-3.5 px-4 py-2.5 text-left transition-colors duration-150 active:bg-tint/50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none md:px-5"
+        >
+          <Avatar name={name} size={40} />
+          <span className="min-w-0 flex-1">
+            <span className="line-clamp-2 block font-heading text-[1.0625rem] leading-snug font-medium text-ink">{nameDisplay ?? name}</span>
+            {meta && <span className="mt-0.5 block truncate text-sm text-ink-soft">{meta}</span>}
+          </span>
+          <ChevronDown
+            aria-hidden="true"
+            size={18}
+            className={`shrink-0 text-ink-soft transition-transform duration-200 motion-reduce:transition-none ${open ? "rotate-180" : "group-hover/row:translate-y-0.5"}`}
+          />
+        </button>
+      </H>
+      <div id={panel} hidden={!open} className={`${FADE_IN} pr-4 pb-4 pl-[4.375rem] md:pr-5 md:pl-[4.625rem]`}>
+        {/* minimalista: ícone + valor, texto em ink sublinhado no hover; o nome da
+            ação ("WhatsApp", "E-mail") fica para o leitor de tela */}
+        <ul className="m-0 flex list-none flex-col gap-0.5 p-0 sm:flex-row sm:flex-wrap sm:gap-x-6">
+          {actions.map((a, i) => (
+            <li key={i}>
+              <a
+                href={a.href}
+                {...(a.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                className="group/act inline-flex min-h-11 max-w-full items-center gap-2 rounded-[2px] text-[0.9375rem] text-ink underline decoration-transparent decoration-[1.5px] underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none"
+              >
+                {a.icon && <span className="flex shrink-0 text-ink-soft group-hover/act:text-ink">{a.icon}</span>}
+                <span className="sr-only">{a.label}</span>
+                <span className={a.breakAll ? "[overflow-wrap:anywhere]" : undefined}>{a.value}</span>
+                {a.srLabel && <span className="sr-only">{a.srLabel}</span>}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </li>
+  );
+}
+
+/** The white inset-grouped panel of a section (iOS lists): rounded corners on
+ *  the group, rows separated by a hairline that starts at the name (after the
+ *  40px avatar + its padding: 70px, 74px from md), drawn as a ::before so the
+ *  row itself never moves. */
+export function ContactList({ children, className = "" }: { children: ReactNode; className?: string }) {
+  return (
+    <ul
+      className={`m-0 list-none overflow-hidden rounded-[22px] bg-card p-0 [&>li+li]:before:absolute [&>li+li]:before:top-0 [&>li+li]:before:right-0 [&>li+li]:before:left-[4.375rem] [&>li+li]:before:h-px [&>li+li]:before:bg-line [&>li+li]:before:content-[''] md:[&>li+li]:before:left-[4.625rem] ${className}`}
+    >
+      {children}
+    </ul>
+  );
+}

package/components/CourseCard.tsx

@@ -50,7 +50,7 @@ type Props = {
   className?: string;
 };
 
-const PILL = "inline-flex items-center rounded-pill bg-ink/[0.08] px-2.5 py-0.5 text-xs font-semibold text-ink";
+const PILL = "inline-flex items-center rounded-pill bg-tint px-2.5 py-0.5 text-xs font-semibold text-ink";
 
 /**
  * Course card of the Cuidado Global family — the class card (ttcab's
@@ -68,7 +68,7 @@ export function CourseCard({ cover, course, title, start, when, where, workload,
   if (workload)
     facts.push({
       tile: (
-        <span aria-hidden="true" className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-ink/[0.06] text-ink">
+        <span aria-hidden="true" className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-tint text-ink">
           <Clock size={20} strokeWidth={2} />
         </span>
       ),
@@ -77,7 +77,7 @@ export function CourseCard({ cover, course, title, start, when, where, workload,
   const pill = soldOut ? t.soldOut : seats;
 
   const foot = soldOut ? (
-    <span className="inline-flex min-h-11 items-center rounded-pill bg-ink/[0.08] px-5 font-heading font-semibold text-ink">{t.soldOut}</span>
+    <span className="inline-flex min-h-11 items-center rounded-pill bg-tint px-5 font-heading font-semibold text-ink">{t.soldOut}</span>
   ) : (
     action
   );

package/components/CtaCard.tsx

@@ -10,7 +10,9 @@ type Props = {
   action: ReactNode;
   /** Side card with the speaker's video (VideoInviteCard props). Omit for the text card alone. */
   video?: Omit<VideoInviteCardProps, "className">;
-  /** Any other side media (e.g. a still photo), placed in the same frame as the video. */
+  /** Any other side media (e.g. a still photo), placed in the same frame as the video.
+   *  It must fill the frame (`absolute inset-0 h-full w-full object-cover`): the frame
+   *  takes the height of the text card, not the photo's. */
   media?: ReactNode;
   className?: string;
 };

package/components/DateBadge.tsx

@@ -16,7 +16,7 @@ type Props = {
 export function DateBadge({ month, day, size = "md", className = "" }: Props) {
   const box = size === "lg" ? "h-14 w-14 rounded-2xl" : "h-12 w-12 rounded-xl";
   return (
-    <span aria-hidden="true" className={`flex ${box} shrink-0 flex-col items-center justify-center bg-ink/[0.06] text-ink ${className}`}>
+    <span aria-hidden="true" className={`flex ${box} shrink-0 flex-col items-center justify-center bg-tint text-ink ${className}`}>
       <span className="text-[0.6rem] font-bold uppercase leading-none tracking-[0.12em] text-ink-soft">{month}</span>
       <span className={`mt-1 font-heading font-bold leading-none ${size === "lg" ? "text-2xl" : "text-lg"}`}>{day}</span>
     </span>

package/components/EmptyState.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import { SearchX } from "lucide-react";
+
+type Props = {
+  /** What happened, in the product's words: "Ninguém encontrado para “Kirs”". */
+  title: ReactNode;
+  /** One sentence on why, or what the list contains. */
+  children?: ReactNode;
+  /** The fastest way out first: a "did you mean" line, a "widen the search" button. */
+  recovery?: ReactNode;
+  /** Short tips (spelling, fewer words). Rendered as a list. */
+  tips?: ReactNode[];
+  /** Actions at the foot: clear the filters, talk to the team. */
+  actions?: ReactNode;
+  /** Replaces the magnifier (an icon at 22px). */
+  icon?: ReactNode;
+  /** h2 by default; h3 inside a section that already has an h2. */
+  headingLevel?: "h2" | "h3";
+  className?: string;
+};
+
+/**
+ * EmptyState — what a list shows when nothing matches. Never a dead end: it
+ * names what was searched, offers the nearest way out (a corrected spelling,
+ * a wider filter), then tips, then a person to ask. A white card (the family's
+ * solid card) so the place of the results does not go blank; left aligned,
+ * because it is read, not admired.
+ *
+ * Render it inside an `aria-live="polite"` region (or announce the count
+ * elsewhere) so a screen reader hears that the results changed.
+ */
+export function EmptyState({ title, children, recovery, tips, actions, icon, headingLevel: H = "h2", className = "" }: Props) {
+  return (
+    <div className={`rounded-[28px] bg-card p-[clamp(24px,4vw,44px)] ${className}`}>
+      <span aria-hidden="true" className="flex h-12 w-12 items-center justify-center rounded-full bg-tint text-ink">
+        {icon ?? <SearchX size={22} strokeWidth={1.75} />}
+      </span>
+      <H className="mt-5 font-heading text-[1.375rem] leading-snug font-medium text-balance text-ink md:text-2xl">{title}</H>
+      {children && <div className="mt-2 max-w-[60ch] leading-relaxed text-ink-body">{children}</div>}
+      {recovery && <div className="mt-5">{recovery}</div>}
+      {tips && tips.length > 0 && (
+        <ul className="mt-6 max-w-[60ch] list-none space-y-2 border-t border-line pt-5">
+          {tips.map((tip, i) => (
+            <li key={i} className="relative pl-5 text-sm leading-relaxed text-ink-soft">
+              <span aria-hidden="true" className="absolute top-[0.6em] left-0 h-1.5 w-1.5 rounded-full bg-ink-soft/60" />
+              {tip}
+            </li>
+          ))}
+        </ul>
+      )}
+      {actions && <div className="mt-7 flex flex-wrap items-center gap-3">{actions}</div>}
+    </div>
+  );
+}

package/components/EventFacts.tsx

@@ -33,7 +33,7 @@ export function EventFacts({ facts, linkComponent, newTabLabel = "(opens in a ne
       {facts.map((f, i) => (
         <li key={i} className="flex items-center gap-4">
           {f.tile === "pin" ? (
-            <span aria-hidden="true" className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-ink/[0.06] text-ink">
+            <span aria-hidden="true" className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-tint text-ink">
               <MapPin size={20} strokeWidth={2} />
             </span>
           ) : (

package/components/EventRow.tsx

@@ -73,7 +73,7 @@ export function EventRow({ time, timeAccent, title, href, onSelect, organizers,
               {title}
             </L>
           )}
-          {badge && <span className="ml-2 inline-flex translate-y-[-2px] items-center rounded-pill bg-ink/[0.08] px-2.5 py-0.5 align-middle text-xs font-semibold text-ink">{badge}</span>}
+          {badge && <span className="ml-2 inline-flex translate-y-[-2px] items-center rounded-pill bg-tint px-2.5 py-0.5 align-middle text-xs font-semibold text-ink">{badge}</span>}
         </h3>
         {organizers && organizers.length > 0 && (
           <p className="mt-2 flex items-center gap-2 text-sm text-ink-body">
@@ -98,13 +98,13 @@ export function EventRow({ time, timeAccent, title, href, onSelect, organizers,
                 <Avatar key={p.name} name={p.name} photo={p.photo} size={28} ring>{p.avatar}</Avatar>
               ))}
             </span>
-            {peopleMore ? <span className="rounded-pill bg-ink/[0.08] px-2 py-0.5 text-xs font-semibold text-ink">{t.more(peopleMore)}</span> : null}
+            {peopleMore ? <span className="rounded-pill bg-tint px-2 py-0.5 text-xs font-semibold text-ink">{t.more(peopleMore)}</span> : null}
             <span className="sr-only">{shown.map((p) => p.name).join(", ")}</span>
           </p>
         )}
       </div>
       {cover && (
-        <div className="relative h-24 w-24 shrink-0 overflow-hidden rounded-2xl bg-ink/[0.06] md:h-36 md:w-36">
+        <div className="relative h-24 w-24 shrink-0 overflow-hidden rounded-2xl bg-tint md:h-36 md:w-36">
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img src={cover.src} alt={cover.alt ?? ""} loading="lazy" decoding="async" className="absolute inset-0 h-full w-full object-cover" />
         </div>

package/components/FactStrip.tsx

@@ -36,7 +36,7 @@ export function FactStrip({ facts, label, className = "" }: Props) {
     >
       {facts.map(({ Icon, title, text, separator = ", " }, i) => (
         <li key={i} className="flex items-center gap-4 py-5 md:px-8 md:py-0 lg:px-10">
-          <span aria-hidden="true" className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink">
+          <span aria-hidden="true" className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-tint text-ink">
             <Icon size={22} strokeWidth={1.75} />
           </span>
           <p className="m-0 leading-snug">

package/components/FilterBar.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useEffect, useRef, type ReactNode } from "react";
+
+type Props = {
+  /** The filters (compact SelectField density="sm", chips…), on the left. */
+  children: ReactNode;
+  /** On the right: the count and a "clear" action. */
+  aside?: ReactNode;
+  /** Accessible name of the bar ("Filtrar por local"). */
+  label: string;
+  /** Where it sticks, below the site's sticky header. A literal Tailwind class
+   *  written in your source (`top-20` = an 80px header). */
+  stickyTop?: string;
+  className?: string;
+};
+
+/**
+ * FilterBar — the thin bar of refining filters that comes after a search
+ * (Apple's store finder, Contacts): compact pills on the left, the count and
+ * "clear" on the right. It sticks below the header while the list scrolls; on
+ * the page colour, translucent, with a hairline under it.
+ *
+ * It measures itself and publishes its height as `--cg-filterbar-h` on the
+ * document, so headings that stick below it can use
+ * `top-[calc(80px+var(--cg-filterbar-h))]` and never slide under it, even when
+ * the bar wraps on a phone.
+ */
+export function FilterBar({ children, aside, label, stickyTop = "top-20", className = "" }: Props) {
+  const box = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = box.current;
+    if (!el || typeof ResizeObserver !== "function") return;
+    const root = document.documentElement;
+    const ro = new ResizeObserver(() => root.style.setProperty("--cg-filterbar-h", `${el.offsetHeight}px`));
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      root.style.removeProperty("--cg-filterbar-h");
+    };
+  }, []);
+  return (
+    <div ref={box} role="group" aria-label={label} className={`sticky ${stickyTop} z-20 -mx-4 border-b border-line bg-surface/90 px-4 py-3 backdrop-blur-md md:-mx-6 md:px-6 ${className}`}>
+      <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2">
+        <div className="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:flex-wrap sm:items-center">{children}</div>
+        {aside && <div className="flex items-center gap-4 text-sm text-ink-soft">{aside}</div>}
+      </div>
+    </div>
+  );
+}