# Viewership UI

> Copy-in UI components for Astro. Server-rendered markup, vanilla TypeScript, themed with `--vs-*` tokens in one `foundation.css`. No React, no Tailwind, no runtime npm dependencies.

## How to use a component

1. Add `foundation.css` once (e.g. `src/styles/foundation.css`) and import it in your base layout.
2. Copy a component's folder into `src/components/viewership/<slug>/`, and each dependency into its own sibling folder.
3. Import the `.astro` file and use it. Scripts boot themselves.

Shortcut: `/components/<slug>.bundle.txt` has every file a component needs, each with its destination path.

Credits: ported from [Beautiful UI](https://www.beautifului.dev) (MIT, © 2026 Shane Levine).

## Sections

- [Hero Statement](https://viewership.ai/design/components/hero-statement.md): Centred headline and actions above a wide media panel.
- [Hero Split](https://viewership.ai/design/components/hero-split.md): Headline and actions beside a media panel; stacks when narrow, flips with one prop.
- [Hero Index](https://viewership.ai/design/components/hero-index.md): Oversized left-aligned headline over a ruled row of facts. Type-led, no media.
- [Hero Poster](https://viewership.ai/design/components/hero-poster.md): Full-bleed image or video with the headline set over it, bottom left, behind a soft scrim.
- [Feature Cards](https://viewership.ai/design/components/feature-cards.md): Features as a joined index grid: numbered cells sharing hairlines, display-face titles, optional tags and links.
- [Feature Rules](https://viewership.ai/design/components/feature-rules.md): Headline pinned left, numbered features ruled like an index on the right.
- [Feature Bento](https://viewership.ai/design/components/feature-bento.md): One large accent tile, three light tiles and a dark closer. Built for five features, with optional figures.
- [Feature Alternating](https://viewership.ai/design/components/feature-alternating.md): Image and copy rows that swap sides as you scroll, for features that each deserve a picture.
- [Testimonial Spotlight](https://viewership.ai/design/components/testimonial-spotlight.md): One customer quote set large in the display face, with up to three supporting quotes beneath.
- [Testimonial Cards](https://viewership.ai/design/components/testimonial-cards.md): Quotes as an even row of cards with optional star ratings and initials avatars.
- [Testimonial Wall](https://viewership.ai/design/components/testimonial-wall.md): Staggered columns of quotes in mixed tones. Takes quotes of any length.
- [Logo Row](https://viewership.ai/design/components/logo-row.md): A lead-in line and one wrapping row of client or press logos. Names become wordmarks when there is no image.
- [Logo Grid](https://viewership.ai/design/components/logo-grid.md): Logos in bordered cells beside a short statement, like a spec sheet.
- [Logo Marquee](https://viewership.ai/design/components/logo-marquee.md): Logos drifting in a slow loop with faded edges. Pauses on hover, static under reduced motion.
- [Stats Band](https://viewership.ai/design/components/stats-band.md): Headline figures on a dark band, each with a label, a footnote and a source line.
- [Pricing Columns](https://viewership.ai/design/components/pricing-columns.md): Plans side by side as cards, with the featured plan inverted onto ink.
- [Pricing Rows](https://viewership.ai/design/components/pricing-rows.md): One plan per ruled row with name, inclusions, price and action. Handles many plans and long lists.
- [Pricing Commission](https://viewership.ai/design/components/pricing-commission.md): One lead offer shown large with the other packages as a quiet list. For services that quote by appointment.
- [Pricing Toggle](https://viewership.ai/design/components/pricing-toggle.md): Plans with a monthly or yearly switch built from native radios and CSS. No JavaScript.
- [FAQ Accordion](https://viewership.ai/design/components/faq-accordion.md): A centred column of expandable question cards on native details, with FAQPage structured data.
- [FAQ Split](https://viewership.ai/design/components/faq-split.md): Headline and a contact link pinned left, numbered ruled questions on the right. FAQPage data included.
- [FAQ Open](https://viewership.ai/design/components/faq-open.md): Every answer visible in a two-column grid on a tinted ground. For short answers people skim.
- [CTA Band](https://viewership.ai/design/components/cta-band.md): The closing call to action on a full-width accent band, centred.
- [CTA Card](https://viewership.ai/design/components/cta-card.md): An inset card with copy beside the actions and an optional square image.
- [CTA Ink](https://viewership.ai/design/components/cta-ink.md): A dark band with an oversized headline and the actions tucked bottom right.
- [Newsletter](https://viewership.ai/design/components/newsletter.md): Email sign-up with a short pitch and privacy line. A plain HTML form you point at any provider.
- [Header Bar](https://viewership.ai/design/components/header-bar.md): Brand left, links and a call to action right. Folds into a native details menu when narrow. No JavaScript.
- [Header Centered](https://viewership.ai/design/components/header-centered.md): Brand in the middle, links split either side, optional announcement strip. Folds into a details menu.
- [Footer Columns](https://viewership.ai/design/components/footer-columns.md): Brand and tagline beside link columns, with a ruled legal line beneath.
- [Footer Minimal](https://viewership.ai/design/components/footer-minimal.md): One line with the brand, a few links and the legal note. For landing pages and small sites.
- [Footer Wordmark](https://viewership.ai/design/components/footer-wordmark.md): Link columns on a dark ground with the brand set across the full width beneath.

## Components

- [Loading State](https://viewership.ai/design/components/loading-state.md): Pixel-grid loader with a shimmering label and elapsed timer.
- [Thinking](https://viewership.ai/design/components/thinking-state.md): Expandable agent trace for steps, reasoning, search or tool calls.
- [Streaming Text](https://viewership.ai/design/components/streaming-text.md): Streamed answer with inline citations, sources, actions and follow-ups.
- [Approval Card](https://viewership.ai/design/components/approval-card.md): Questions an agent asks, one step at a time, before acting.
- [Tool Chips](https://viewership.ai/design/components/tool-chips.md): Agent run as expandable tool-call rows, then file-diff chips.
- [Task Rows](https://viewership.ai/design/components/task-rows.md): Live agent task status as expandable capsules or a list.
- [Chat](https://viewership.ai/design/components/chat-composer.md): Tabbed chat panel with reasoning replies and a growing composer.
- [Prompt Bar](https://viewership.ai/design/components/prompt-bar.md): Message composer with @ sources, / commands and a model picker.
- [Recommendation Card](https://viewership.ai/design/components/recommendation-card.md): Agent suggestion with a confidence meter and alternatives.
- [Context Cards](https://viewership.ai/design/components/context-cards.md): Retrieved knowledge chunks with sources, entering in sequence.
- [Diff Table](https://viewership.ai/design/components/diff-table.md): AI-proposed table edits you include or skip, then apply.
- [Records Table](https://viewership.ai/design/components/records-table.md): CRM-style AI spreadsheet with tags, sorting and configurable AI columns.
- [Filter Table](https://viewership.ai/design/components/filter-table.md): Status chips that filter a table in place.
- [Sidebar Nav](https://viewership.ai/design/components/sidebar-nav.md): Collapsible workspace and chat navigation with searchable history.
- [Search](https://viewership.ai/design/components/search.md): Command search with live filtering and an empty state.
- [Flowchart](https://viewership.ai/design/components/flowchart.md): Workflow trigger and condition cards on a dotted canvas with draggable steps.
- [Insight Cards](https://viewership.ai/design/components/insight-cards.md): Paged agent insights with scrubbable SVG charts and follow-up prompts.
- [Code Block](https://viewership.ai/design/components/code-block.md): Line-numbered code listing with copy, or a unified diff.
- [Fine-tune Card](https://viewership.ai/design/components/fine-tune-card.md): Compact inspector the agent adjusts, then hands back to you.
- [Selection Actions](https://viewership.ai/design/components/selection-actions.md): Select text and a floating toolbar rewrites it in place.
- [Agent Screen](https://viewership.ai/design/components/agent-screen.md): An agent's live screen with an expandable viewer and recording.

## Atoms

- [Button](https://viewership.ai/design/components/button.md): Pill-shaped action button in six variants and three sizes.
- [Glide Menu](https://viewership.ai/design/components/glide-menu.md): One highlight that glides to the hovered or focused row.
- [Entity Chip](https://viewership.ai/design/components/entity-chip.md): Inline reference to a client, person or record, as a monogram and name.
- [Value Pill](https://viewership.ai/design/components/value-pill.md): Inline badge that sets a value off from running text.
- [Shimmer](https://viewership.ai/design/components/shimmer.md): Label with a moving light sweep that shows the agent is working.
- [Stream Text](https://viewership.ai/design/components/stream-text.md): Text that streams in like model output, with a blurred edge and caret.
- [Chip](https://viewership.ai/design/components/chip.md): Monospace chip for code values and field names in text.
- [Status Pill](https://viewership.ai/design/components/status-pill.md): Tinted status label with a leading dot, in five tones.
- [Segmented Control](https://viewership.ai/design/components/segmented-control.md): Equal-width segments with a sliding thumb, as a radio group.
- [Switch](https://viewership.ai/design/components/switch.md): On/off toggle on a native checkbox, in two sizes and two tones.
- [Progress Ring](https://viewership.ai/design/components/progress-ring.md): Small progress ring with a count or glyph in the center.
- [Text Row](https://viewership.ai/design/components/text-row.md): Label on the left, value and optional meta on the right.
- [Overlay core](https://viewership.ai/design/components/overlay.md): Positioning, dismissal, focus-trap and roving-focus helpers for popovers, menus and dialogs.
- [Icon](https://viewership.ai/design/components/icon.md): Twenty Lucide glyphs as inline SVG, sized and labelled through props.


---

# Viewership UI: component conventions

The contract every component (and every agent porting one) follows. If it
conflicts with an upstream source, this file wins.

## 1. What a component is

One folder per component under `src/ui/registry/<slug>/`:

| File | Purpose |
| --- | --- |
| `<Name>.astro` | The component. Consumers copy this. |
| `*.ts` (optional) | Helpers the component imports. List them in `meta.files`. |
| `demo.astro` | Gallery demo. Receives `variant` when `meta.variants` is set. |
| `meta.ts` | `export default { ... } satisfies ComponentMeta` (see `src/lib/types.ts`). |

The site finds components by globbing `meta.ts`. **Never edit a shared file to
register a component.** `src/ui/registry/button/` is the reference; read it first.

## 2. Stack rules

- **Astro + TypeScript + scoped CSS only.** No React, Tailwind or CSS-in-JS.
- **No runtime npm dependencies** unless reimplementing is unreasonable. If you
  add one, check its license (MIT/ISC/Apache-2.0 only), list it in `meta.npm`,
  and say so in your report.
- **Icons are inline SVG.** Use Lucide (ISC) paths. Iconoir (MIT) is fine when
  porting a component that used it. **Never copy Central Icons (proprietary).**
- Import other registry components relatively
  (`import Button from "../button/Button.astro";`) and list their slugs in
  `meta.dependencies`.

## 3. Styling

- Read every color, radius, shadow, font and easing from the `--vs-*` tokens in
  `src/ui/styles/foundation.css`. Never hard-code a theme color (pure `white`
  text on a filled accent is fine).
- The root element gets class `vs-<slug>`. Scope everything under the
  component's `<style>`.
- Script-created DOM is not scoped. Style it with `:global(...)` under your root class.
- Keyframes: use the shared `vs-fade-in`, `vs-fade-up`, `vs-pop-in`,
  `vs-shimmer-text`, `vs-pixel-on`, `vs-spin`, `vs-caret-blink` and `vs-pulse`.
  Prefix new ones `vs-<slug>-*`.
- Check both themes (`<html data-theme="dark">`).

### Tailwind to token map (for porting Beautiful UI)

| Upstream class | Use |
| --- | --- |
| `bg-surface`, `bg-canvas`, `bg-inset`, `bg-field`, `bg-page` | `var(--vs-surface)` / `--vs-canvas` / `--vs-inset` / `--vs-field` / `--vs-page` |
| `hover:bg-hover`, `bg-hover-2` | `var(--vs-hover)` / `var(--vs-hover-2)` |
| `text-ink`, `text-ink-2`, `text-ink-3` | `var(--vs-ink)` / `--vs-ink-2` / `--vs-ink-3` |
| `border-line`, `border-line-strong`, `var(--grid-line)` | `var(--vs-line)` / `--vs-line-strong` / `--vs-grid-line` |
| `text-accent`, `bg-accent-tint`, `text-accent-ink` | `var(--vs-accent)` / `--vs-accent-tint` / `--vs-accent-ink` |
| `text-green`, `bg-green-tint` (and red, orange) | `var(--vs-green)` / `--vs-green-tint` … |
| `shadow-hairline`, `shadow-btn`, `shadow-card`, `shadow-raised`, `shadow-overlay`, `shadow-inset-field` | `var(--vs-shadow-…)` |
| `rounded-chip`, `rounded-control`, `rounded-card`, `rounded-window`, `rounded-full` | `var(--vs-radius-chip)` / `-control` / `-card` / `-window` / `-pill` |
| `font-mono` | `font-family: var(--vs-font-mono)` |
| `var(--tooltip-*)` | `var(--vs-tooltip-*)` |
| Spacing `p-3`, `gap-1.5`, `h-7`, … | `n × 4px` (`p-3` = 12px) |
| Arbitrary values `text-[12.5px]`, `h-[27px]` | Keep the exact value. |
| `cubic-bezier(0.23,1,0.32,1)` | `var(--vs-ease-out)` |

Blocks marked **COMPONENT-SPECIFIC** in `reference/beautiful-ui/app/globals.css`
belong to that component. Port them into its `<style>`.

## 4. Behaviour (React to vanilla)

- **Server-render the markup** from props. Interactivity lives in a `<script>`
  in the component; Astro bundles it once per page.
- **Every instance works independently.** Boot pattern:

  ```ts
  <script>
    function init(root: HTMLElement) {
      /* wire one instance */
    }
    const boot = () =>
      document.querySelectorAll<HTMLElement>(".vs-slug:not([data-vs-ready])").forEach((root) => {
        root.dataset.vsReady = "";
        init(root);
      });
    boot();
    document.addEventListener("astro:page-load", boot); // View Transitions support
  </script>
  ```

- Pass data to the script through `data-*` attributes, or a
  `<script type="application/json" data-vs-config>` inside the root. Never use
  `define:vars`: it disables bundling.
- **Animated demos** (streams, loaders, step sequences): expose `autoplay` and
  `loop` props. Start when the root scrolls into view (IntersectionObserver),
  pause offscreen, clear every timer on teardown.
- **Reduced motion** (`prefers-reduced-motion: reduce`): render the final state
  immediately. No loops, no shimmer.
- **No-JS render** should show real content (final state, expanded list), not an empty box.

### Known Astro pitfalls

- **Inline object unions in frontmatter break the build.** `export type X = { … } | { … }`
  in a `.astro` file fails with `Unexpected "|"`. Declare named interfaces and
  union those (`type X = A | B`), or put the types in a `.ts` file in the component folder.

## 5. Accessibility (non-negotiable)

- Native elements first: `<button>`, `<a>`, `<details>`, `<dialog>`, `<input>`, `<table>`.
- Full keyboard support matching the WAI-ARIA Authoring Practices pattern
  (menu, listbox, combobox, tabs, switch, …).
- Visible focus via `box-shadow: var(--vs-focus-ring)` on `:focus-visible`.
- Accessible names on icon-only buttons. Use `aria-live` where upstream updates content dynamically.
- Pointer targets at least 24×24 px.

## 6. Fidelity

Match the upstream file closely: structure, spacing, type sizes, colors,
shadows, motion timings and easings. Upstream gallery demos double as specs.
Upstream "variants" become `meta.variants` plus a `variant` prop on the demo
(or on the component, when it is a real option).

## 7. Demo content

Write fresh demo copy, not the upstream ice-cream copy. Demos follow one
fictional client: **Northwind Outdoor** (`northwind.test`), a marketing team
using AI systems. Typical content: drafts in brand voice, weekly reports from
GA4, Ads and CRM data, citation tracking across ChatGPT, Perplexity, Gemini and
AI Overviews, Reddit and YouTube threads, campaign approvals. Numbers are
obvious samples. Never use real company names, client results or people.

## 8. Agent workflow

1. Work in `src/ui/registry/<slug>/` with Node 22.12+.
2. Edit only your assigned folders. Others work in parallel.
3. Verify with `npx astro check` (0 errors) and `npx astro build`.
4. Don't commit.
5. Report: what you ported, deviations from upstream and why, new licenses,
   anything unfinished.

## 9. Sections

A section is a full-width page block (`kind: "section"`): hero, feature grid,
pricing, FAQ and so on. Everything above applies, plus:

- **Respond to the container, not the viewport.** The root gets
  `container-type: inline-size` and layout changes use `@container`
  queries, so a section behaves the same in a gallery card, a column or a
  full page. Size type and spacing with `cqi` and `clamp()`.
- **One layout per block.** Each distinct design is its own registry entry
  (`hero-statement`, `hero-split`, …) so it can be copied as one file and
  browsed by category. Use props for small options (`reverse`, `tone`), not
  for switching between layouts.
- **Look comes from tokens.** Headlines use the `.vs-display` class from
  `foundation.css`; borders use `--vs-border-w`; hard or glowing shadows
  come through `--vs-pop-shadow`. Never branch on a theme name. Presets in
  `src/ui/styles/themes.css` (`data-vs-theme="editorial|brutalist|soft|midnight"`)
  restyle every section, so check a new section in all of them.
- **Headline = `title` + optional `accent`.** The accent words render in
  `<em>`, which each theme draws differently (italic serif, highlighter).
- **Content in, not baked in.** Copy, links and lists are props; media is a
  named slot. No images or fonts are bundled in a section. Demos use the
  Northwind art in `public/ui/demo/` (from `scripts/visuals/ui_demo_art.py`),
  never the Viewership sculptures.
- **Semantic and no-JS.** Native `<details>`, lists, figures and headings
  (`as` prop for the heading level). Sections should need no script.
- **Structured data where it earns its place** (FAQ emits FAQPage JSON-LD,
  with `schema={false}` to opt out).
- Categories: Hero, Features, Proof, Pricing, Conversion, Site chrome. Aim for
  three or more blocks in each.



---

# Stylesheets

> Design tokens (light and dark), shared keyframes and utilities. Every component needs this file.

- Import it once from your base layout.
- Follows the OS theme. Force one with `<html data-theme="light">` or `"dark"`.
- Components read tokens, never hard-coded colors, radii, shadows or easings.

## Tokens (65)

`--vs-page`, `--vs-canvas`, `--vs-surface`, `--vs-inset`, `--vs-field`, `--vs-hover`, `--vs-hover-2`, `--vs-ink`, `--vs-ink-2`, `--vs-ink-3`, `--vs-ink-inverse`, `--vs-line`, `--vs-line-strong`, `--vs-line-soft`, `--vs-accent`, `--vs-accent-ink`, `--vs-accent-tint`, `--vs-on-accent`, `--vs-green`, `--vs-green-tint`, `--vs-orange`, `--vs-orange-tint`, `--vs-red`, `--vs-red-tint`, `--vs-tooltip-bg`, `--vs-tooltip-fg`, `--vs-tooltip-muted`, `--vs-tooltip-border`, `--vs-elev-ring`, `--vs-elev-ring-strong`, `--vs-shadow-xs`, `--vs-shadow-sm`, `--vs-shadow-md`, `--vs-shadow-lg`, `--vs-shadow-inset-field`, `--vs-font-sans`, `--vs-font-stretch`, `--vs-font-mono`, `--vs-radius-chip`, `--vs-radius-control`, `--vs-radius-card`, `--vs-radius-window`, `--vs-radius-pill`, `--vs-ease-out`, `--vs-ease-in-out`, `--vs-ease-link`, `--vs-duration-fast`, `--vs-duration`, `--vs-grid-line`, `--vs-shadow-hairline`, `--vs-shadow-btn`, `--vs-shadow-card`, `--vs-shadow-raised`, `--vs-shadow-overlay`, `--vs-focus-ring`, `--vs-container`, `--vs-gutter`, `--vs-section-y`, `--vs-border-w`, `--vs-display-weight`, `--vs-display-stretch`, `--vs-display-tracking`, `--vs-display-leading`, `--vs-display-transform`, `--vs-accent-style`

## foundation.css

```css
/* ──────────────────────────────────────────────────────────
 * Viewership UI: foundation
 *
 * The one stylesheet every component needs. Import it once, globally:
 *
 *   import "../styles/foundation.css";
 *
 * Contents: design tokens (Viewership paper + ink, and a neutral
 * alternate), shared keyframes, and the reduced-motion baseline.
 * Components never hard-code colors, radii, shadows or easings; they read
 * these tokens, so a theme is just a different set of values.
 *
 * Token system adapted from Beautiful UI (MIT, © 2026 Shane Levine,
 * https://www.beautifului.dev); see THIRD_PARTY_NOTICES.md.
 *
 * Mode (paper or ink), on any element:
 *   - default follows the OS (prefers-color-scheme)
 *   - <html data-theme="light|dark"> forces one for the page
 *   - data-vs-mode="light|dark" forces one for an element and its subtree
 * Theme:
 *   - Viewership (paper + ink, signal accent) is the default
 *   - data-vs-theme="neutral" restores the original Beautiful UI look; put it
 *     on the same element as data-vs-mode
 * ────────────────────────────────────────────────────────── */

/* ── Viewership, paper (light) ── */
:root,
[data-vs-mode="light"] {
  color-scheme: light;

  /* Surfaces, back to front */
  --vs-page: #f2ece4;
  --vs-canvas: #e8e0d5;
  --vs-surface: #fbf8f3;
  --vs-inset: #f6f1ea;
  --vs-field: #ede6dc;
  --vs-hover: #f0e9e0;
  --vs-hover-2: #e5dccf;

  /* Ink ramp: primary, secondary, tertiary */
  --vs-ink: #0d0809;
  --vs-ink-2: #5a4f50;
  --vs-ink-3: #7a6f6e;
  /* Ink on top of a filled --vs-ink surface (primary buttons) */
  --vs-ink-inverse: #f2ece4;

  /* Hairlines */
  --vs-line: #e3dbd0;
  --vs-line-strong: #d2c7ba;
  --vs-line-soft: #ece5db;

  /* Accent + semantic condiments (use sparingly) */
  --vs-accent: #e1232a;
  --vs-accent-ink: #b81a20;
  --vs-accent-tint: #f8dde5;
  --vs-on-accent: #ffffff;
  --vs-green: #357045;
  --vs-green-tint: #dfe8da;
  --vs-orange: #9e5812;
  --vs-orange-tint: #f3e2c8;
  --vs-red: #b0341b;
  --vs-red-tint: #f4d9cc;

  /* Tooltips / dark popovers (stay dark in both modes) */
  --vs-tooltip-bg: #0d0809;
  --vs-tooltip-fg: #f2ece4;
  --vs-tooltip-muted: #a99e97;
  --vs-tooltip-border: #2b2023;

  /* Elevation: warm, ink-tinted, low. Rings are the hairline of a raised surface. */
  --vs-elev-ring: #e3dbd0;
  --vs-elev-ring-strong: #d2c7ba;
  --vs-shadow-xs: 0 1px 1px rgb(13 8 9 / 0.04), 0 1px 2px rgb(13 8 9 / 0.04);
  --vs-shadow-sm: 0 1px 2px rgb(13 8 9 / 0.04), 0 2px 4px rgb(13 8 9 / 0.04);
  --vs-shadow-md: 0 2px 4px rgb(13 8 9 / 0.04), 0 6px 14px rgb(13 8 9 / 0.05);
  --vs-shadow-lg: 0 4px 8px rgb(13 8 9 / 0.05), 0 16px 36px rgb(13 8 9 / 0.09);
  --vs-shadow-inset-field: inset 0 1px 2px rgb(13 8 9 / 0.1);

  /* Type: Archivo at its normal width for UI; mono is for code only */
  --vs-font-sans: "Archivo Variable", "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --vs-font-stretch: 100%;
  --vs-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Radii */
  --vs-radius-chip: 4px;
  --vs-radius-control: 6px;
  --vs-radius-card: 8px;
  --vs-radius-window: 12px;
  --vs-radius-pill: 999px;

  /* Motion */
  --vs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --vs-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --vs-ease-link: cubic-bezier(0.16, 1, 0.3, 1);
  --vs-duration-fast: 150ms;
  --vs-duration: 300ms;
}

/* ── Viewership, ink (dark) ── */
[data-vs-mode="dark"],
:root[data-theme="dark"] {
  color-scheme: dark;
  --vs-page: #0d0809;
  --vs-canvas: #120b0d;
  --vs-surface: #1a1214;
  --vs-inset: #150e10;
  --vs-field: #231a1c;
  --vs-hover: #221a1c;
  --vs-hover-2: #2c2225;
  --vs-ink: #f2ece4;
  --vs-ink-2: #b5aba3;
  --vs-ink-3: #8a7f7a;
  --vs-ink-inverse: #0d0809;
  --vs-line: #2a2023;
  --vs-line-strong: #3a2e31;
  --vs-line-soft: #211819;
  --vs-accent: #e8272a;
  --vs-accent-ink: #f7a9b8;
  --vs-accent-tint: rgb(232 39 42 / 0.18);
  --vs-green: #7fbf8e;
  --vs-green-tint: rgb(127 191 142 / 0.14);
  --vs-orange: #e2a35c;
  --vs-orange-tint: rgb(226 163 92 / 0.14);
  --vs-red: #f08a6b;
  --vs-red-tint: rgb(240 138 107 / 0.14);
  --vs-tooltip-bg: #2a1f22;
  --vs-tooltip-border: #3a2e31;
  --vs-elev-ring: rgb(242 236 228 / 0.09);
  --vs-elev-ring-strong: rgb(242 236 228 / 0.13);
  --vs-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.35);
  --vs-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.25), 0 2px 6px rgb(0 0 0 / 0.25);
  --vs-shadow-md: 0 2px 10px rgb(0 0 0 / 0.3);
  --vs-shadow-lg: 0 8px 28px rgb(0 0 0 / 0.45);
  --vs-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --vs-page: #0d0809;
    --vs-canvas: #120b0d;
    --vs-surface: #1a1214;
    --vs-inset: #150e10;
    --vs-field: #231a1c;
    --vs-hover: #221a1c;
    --vs-hover-2: #2c2225;
    --vs-ink: #f2ece4;
    --vs-ink-2: #b5aba3;
    --vs-ink-3: #8a7f7a;
    --vs-ink-inverse: #0d0809;
    --vs-line: #2a2023;
    --vs-line-strong: #3a2e31;
    --vs-line-soft: #211819;
    --vs-accent: #e8272a;
    --vs-accent-ink: #f7a9b8;
    --vs-accent-tint: rgb(232 39 42 / 0.18);
    --vs-green: #7fbf8e;
    --vs-green-tint: rgb(127 191 142 / 0.14);
    --vs-orange: #e2a35c;
    --vs-orange-tint: rgb(226 163 92 / 0.14);
    --vs-red: #f08a6b;
    --vs-red-tint: rgb(240 138 107 / 0.14);
    --vs-tooltip-bg: #2a1f22;
    --vs-tooltip-border: #3a2e31;
    --vs-elev-ring: rgb(242 236 228 / 0.09);
    --vs-elev-ring-strong: rgb(242 236 228 / 0.13);
    --vs-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.35);
    --vs-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.25), 0 2px 6px rgb(0 0 0 / 0.25);
    --vs-shadow-md: 0 2px 10px rgb(0 0 0 / 0.3);
    --vs-shadow-lg: 0 8px 28px rgb(0 0 0 / 0.45);
    --vs-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 0.45);
  }
}

/* ── Neutral (the original Beautiful UI look), light ── */
[data-vs-theme="neutral"] {
  color-scheme: light;
  --vs-page: oklch(0.985 0.001 286.376);
  --vs-canvas: oklch(0.961 0.002 247.84);
  --vs-surface: oklch(1 0 0);
  --vs-inset: oklch(0.979 0.002 247.839);
  --vs-field: oklch(0.961 0.001 286.375);
  --vs-hover: oklch(0.97 0.002 247.839);
  --vs-hover-2: oklch(0.933 0.003 247.86);
  --vs-ink: oklch(0.247 0.006 258.361);
  --vs-ink-2: oklch(0.506 0.01 264.477);
  --vs-ink-3: oklch(0.695 0.009 264.505);
  --vs-ink-inverse: oklch(0.985 0.001 286.376);
  --vs-line: oklch(0.946 0.003 264.542);
  --vs-line-strong: oklch(0.912 0.005 258.326);
  --vs-line-soft: oklch(0.966 0.002 264.542);
  --vs-accent: oklch(0.626 0.205 254.947);
  --vs-accent-ink: oklch(0.556 0.187 255.617);
  --vs-accent-tint: oklch(0.96 0.019 252.878);
  --vs-on-accent: #ffffff;
  --vs-green: oklch(0.603 0.155 150.883);
  --vs-green-tint: oklch(0.958 0.017 159.118);
  --vs-orange: oklch(0.689 0.179 49.902);
  --vs-orange-tint: oklch(0.964 0.021 67.581);
  --vs-red: oklch(0.621 0.192 23.042);
  --vs-red-tint: oklch(0.956 0.017 17.462);
  --vs-tooltip-bg: oklch(0.272 0.008 264.435);
  --vs-tooltip-fg: oklch(0.976 0.002 247.839);
  --vs-tooltip-muted: oklch(0.731 0.008 260.731);
  --vs-tooltip-border: oklch(0.356 0.007 264.474);
  --vs-elev-ring: oklch(0.946 0.003 264.542);
  --vs-elev-ring-strong: oklch(0.912 0.005 258.326);
  --vs-shadow-xs: 0 1px 1px oklch(0 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.04);
  --vs-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.04), 0 2px 4px oklch(0 0 0 / 0.04);
  --vs-shadow-md: 0 2px 4px oklch(0 0 0 / 0.04), 0 6px 14px oklch(0 0 0 / 0.06);
  --vs-shadow-lg: 0 4px 8px oklch(0 0 0 / 0.05), 0 16px 36px oklch(0 0 0 / 0.1);
  --vs-shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.12);
  --vs-font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --vs-font-stretch: 100%;
  --vs-font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --vs-radius-chip: 6px;
  --vs-radius-control: 8px;
  --vs-radius-card: 10px;
  --vs-radius-window: 14px;
  --vs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Neutral, dark ── */
[data-vs-theme="neutral"][data-vs-mode="dark"],
:root[data-theme="dark"][data-vs-theme="neutral"] {
  color-scheme: dark;
  --vs-page: oklch(0.209 0.004 264.477);
  --vs-canvas: oklch(0.231 0.004 264.487);
  --vs-surface: oklch(0.26 0.006 271.191);
  --vs-inset: oklch(0.243 0.004 264.492);
  --vs-field: oklch(0.293 0.006 271.223);
  --vs-hover: oklch(0.289 0.006 271.22);
  --vs-hover-2: oklch(0.318 0.007 274.747);
  --vs-ink: oklch(0.964 0.002 247.839);
  --vs-ink-2: oklch(0.731 0.008 260.731);
  --vs-ink-3: oklch(0.541 0.01 264.484);
  --vs-ink-inverse: oklch(0.231 0.004 264.487);
  --vs-line: oklch(0.308 0.006 258.354);
  --vs-line-strong: oklch(0.356 0.007 264.474);
  --vs-line-soft: oklch(0.278 0.006 258.354);
  --vs-accent: oklch(0.68 0.173 253.301);
  --vs-accent-ink: oklch(0.788 0.113 248.33);
  --vs-accent-tint: oklch(0.68 0.173 253.301 / 0.16);
  --vs-green: oklch(0.705 0.154 153.814);
  --vs-green-tint: oklch(0.705 0.154 153.814 / 0.14);
  --vs-orange: oklch(0.746 0.156 55.642);
  --vs-orange-tint: oklch(0.746 0.156 55.642 / 0.14);
  --vs-red: oklch(0.666 0.18 21.433);
  --vs-red-tint: oklch(0.666 0.18 21.433 / 0.14);
  --vs-tooltip-bg: oklch(0.182 0.004 264.459);
  --vs-tooltip-border: oklch(0.308 0.006 258.354);
  --vs-elev-ring: oklch(1 0 0 / 0.11);
  --vs-elev-ring-strong: oklch(1 0 0 / 0.15);
  --vs-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.3);
  --vs-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2), 0 2px 6px oklch(0 0 0 / 0.2);
  --vs-shadow-md: 0 2px 10px oklch(0 0 0 / 0.22);
  --vs-shadow-lg: 0 8px 28px oklch(0 0 0 / 0.34);
  --vs-shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.4);
}

/* ── Derived tokens ──
 * Re-declared on every element that sets a mode or theme, so their var()
 * references resolve against that element's palette, not the page's. */
:root,
[data-vs-mode],
[data-vs-theme] {
  --vs-grid-line: color-mix(in srgb, var(--vs-line) 78%, transparent);
  --vs-shadow-hairline: 0 0 0 1px var(--vs-line);
  --vs-shadow-btn: 0 0 0 1px var(--vs-elev-ring-strong), var(--vs-shadow-xs);
  --vs-shadow-card: 0 0 0 1px var(--vs-elev-ring), var(--vs-shadow-sm);
  --vs-shadow-raised: 0 0 0 1px var(--vs-elev-ring), var(--vs-shadow-md);
  --vs-shadow-overlay: 0 0 0 1px var(--vs-elev-ring-strong), var(--vs-shadow-lg);
  --vs-focus-ring: 0 0 0 2px var(--vs-surface), 0 0 0 3.5px var(--vs-accent);
}

/* A scoped mode or theme also sets the text basics, so components never
 * inherit the host page's colour or type. */
[data-vs-mode],
[data-vs-theme] {
  color: var(--vs-ink);
  font-family: var(--vs-font-sans);
  font-stretch: var(--vs-font-stretch);
}

/* ── Structure tokens (sections read these; themes restyle them) ──
 * Declared on :root only, never on [data-vs-mode], so a theme set on an
 * ancestor still reaches a nested mode scope. Optional tokens with no default
 * here (--vs-font-display, --vs-accent-family, --vs-em-bg, --vs-pop-shadow)
 * are read with a var() fallback, so a theme only sets what it changes. */
:root {
  --vs-container: 1160px;
  --vs-gutter: clamp(20px, 5cqi, 48px);
  --vs-section-y: clamp(56px, 9cqi, 112px);
  --vs-border-w: 1px;
  --vs-display-weight: 500;
  --vs-display-stretch: 100%;
  --vs-display-tracking: -0.025em;
  --vs-display-leading: 1.05;
  --vs-display-transform: none;
  --vs-accent-style: normal;
}

/* ── Shared keyframes (prefixed so they never collide with app CSS) ── */

@keyframes vs-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes vs-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes vs-pop-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes vs-shimmer-text {
  from { background-position: 150% center; }
  to { background-position: -50% center; }
}
@keyframes vs-pixel-on {
  0%, 100% { opacity: 0.15; }
  18%, 42% { opacity: 1; }
  62% { opacity: 0.15; }
}
@keyframes vs-spin {
  to { transform: rotate(360deg); }
}
@keyframes vs-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes vs-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

/* ── Shared utilities ── */

/* `hidden` always wins, even over a component's own `display` rule. */
:where([hidden]) {
  display: none !important;
}

/* Visually hidden but announced by screen readers. */
.vs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Display type for section headlines. Themes change the face, weight, case
 * and how an <em> accent word is drawn (italic serif, highlighter, colour). */
.vs-display {
  font-family: var(--vs-font-display, var(--vs-font-sans));
  font-weight: var(--vs-display-weight);
  font-stretch: var(--vs-display-stretch);
  letter-spacing: var(--vs-display-tracking);
  line-height: var(--vs-display-leading);
  text-transform: var(--vs-display-transform);
  text-wrap: balance;
  margin: 0;
}
.vs-display em {
  font-style: var(--vs-accent-style);
  font-family: var(--vs-accent-family, inherit);
  color: var(--vs-em-color, var(--vs-accent-ink));
  background: var(--vs-em-bg, none);
  padding-inline: var(--vs-em-pad, 0);
}

/* ── Reduced motion: components still render their end state ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vs-duration-fast: 0ms;
    --vs-duration: 0ms;
  }
}
```


---

# Button

> Pill-shaped action button in six variants and three sizes.

- **Slug:** `button`
- **Kind:** atom · **Category:** Actions
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/Button.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/button
- **All files in one bundle:** https://viewership.ai/design/components/button.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/button.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/button/`:

   - `Button.astro` (raw: https://viewership.ai/design/raw/button/Button.astro.txt)

npm packages: none.

## Usage

```astro
---
import Button from "../components/viewership/button/Button.astro";
---

<Button />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import Button from "./Button.astro";

interface Props {
  variant?: string;
}
const { variant = "Variants" } = Astro.props;
---

{variant === "Variants" && (
  <div class="row">
    <Button variant="primary">Run report</Button>
    <Button variant="secondary">Save draft</Button>
    <Button variant="ghost">Preview</Button>
    <Button variant="accent">Publish post</Button>
    <Button variant="success">Approve</Button>
    <Button variant="quiet">Cancel</Button>
  </div>
)}
{variant === "Sizes" && (
  <div class="row">
    <Button variant="primary" size="xs">Extra small</Button>
    <Button variant="primary" size="sm">Small</Button>
    <Button variant="primary" size="md">Medium</Button>
  </div>
)}

<style>
  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
</style>
```

## Variants

Demo variants: `Variants`, `Sizes`.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"primary" \| "secondary" \| "ghost" \| "accent" \| "success" \| "quiet"` | `"secondary"` | Visual style. |
| `size` | `"xs" \| "sm" \| "md"` | `"md"` | Height and padding. |
| `href` | `string` |  | Renders an <a> instead of a <button>. |
| `type` | `"button" \| "submit" \| "reset"` | `"button"` | Button type (ignored for links). |

## Used by

[Hero Statement](https://viewership.ai/design/components/hero-statement.md), [Hero Split](https://viewership.ai/design/components/hero-split.md), [Hero Index](https://viewership.ai/design/components/hero-index.md), [Hero Poster](https://viewership.ai/design/components/hero-poster.md), [Pricing Columns](https://viewership.ai/design/components/pricing-columns.md), [Pricing Rows](https://viewership.ai/design/components/pricing-rows.md), [Pricing Commission](https://viewership.ai/design/components/pricing-commission.md), [Pricing Toggle](https://viewership.ai/design/components/pricing-toggle.md), [CTA Band](https://viewership.ai/design/components/cta-band.md), [CTA Card](https://viewership.ai/design/components/cta-card.md), [CTA Ink](https://viewership.ai/design/components/cta-ink.md), [Header Bar](https://viewership.ai/design/components/header-bar.md), [Approval Card](https://viewership.ai/design/components/approval-card.md), [Recommendation Card](https://viewership.ai/design/components/recommendation-card.md), [Diff Table](https://viewership.ai/design/components/diff-table.md), [Selection Actions](https://viewership.ai/design/components/selection-actions.md), [Agent Screen](https://viewership.ai/design/components/agent-screen.md)

## Source

### `src/components/viewership/button/Button.astro`

```astro
---
/**
 * Button: pill-shaped action button.
 *
 * Ported from Beautiful UI `components/atoms/Button.tsx`
 * (MIT, © 2026 Shane Levine). Renders an <a> when `href` is set.
 *
 * @example
 * <Button variant="primary">Run report</Button>
 * <Button variant="quiet" size="xs" href="/docs">Docs</Button>
 */
import type { HTMLAttributes } from "astro/types";

type Variant = "primary" | "secondary" | "ghost" | "accent" | "success" | "quiet";
type Size = "xs" | "sm" | "md";

type Props = (HTMLAttributes<"button"> & HTMLAttributes<"a">) & {
  variant?: Variant;
  size?: Size;
  /** Render as a link. */
  href?: string;
  type?: "button" | "submit" | "reset";
};

const { variant = "secondary", size = "md", href, type = "button", class: className, ...rest } = Astro.props;
const Tag = href ? "a" : "button";
---

<Tag
  class:list={["vs-button", `vs-button--${variant}`, `vs-button--${size}`, className]}
  href={href}
  type={href ? undefined : type}
  {...rest}
>
  <slot />
</Tag>

<style>
  .vs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    font: inherit;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
      transform var(--vs-duration-fast) ease-out,
      background-color var(--vs-duration-fast) ease-out,
      opacity var(--vs-duration-fast) ease-out;
  }
  .vs-button:active {
    transform: scale(0.96);
  }
  .vs-button:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .vs-button:disabled,
  .vs-button[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
  }

  /* Sizes */
  .vs-button--xs {
    height: 28px;
    gap: 4px;
    padding: 0 10px;
    border-radius: var(--vs-radius-pill);
    font-size: 12px;
    font-weight: 400;
  }
  .vs-button--sm {
    height: 27px;
    gap: 6px;
    padding: 0 12px;
    border-radius: var(--vs-radius-pill);
    font-size: 13px;
  }
  .vs-button--md {
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--vs-radius-pill);
    font-size: 14px;
  }

  /* Variants */
  .vs-button--primary {
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  .vs-button--primary:hover {
    opacity: 0.9;
  }
  .vs-button--secondary {
    background: var(--vs-surface);
    color: var(--vs-ink);
    box-shadow: var(--vs-shadow-btn);
  }
  .vs-button--secondary:hover {
    background: var(--vs-inset);
  }
  .vs-button--secondary[aria-expanded="true"] {
    background: var(--vs-hover);
  }
  .vs-button--ghost {
    background: var(--vs-hover-2);
    color: var(--vs-ink);
  }
  .vs-button--ghost:hover {
    background: var(--vs-line-strong);
  }
  .vs-button--accent {
    background: var(--vs-accent);
    color: var(--vs-on-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  .vs-button--accent:hover {
    background: color-mix(in oklab, var(--vs-accent) 86%, black);
  }
  .vs-button--success {
    background: var(--vs-green);
    color: var(--vs-surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  .vs-button--success:hover {
    filter: brightness(0.95);
  }
  .vs-button--quiet {
    background: transparent;
    color: var(--vs-ink);
  }
  .vs-button--quiet:hover {
    background: var(--vs-hover);
  }

  @media (prefers-reduced-motion: reduce) {
    .vs-button:active {
      transform: none;
    }
  }
</style>
```


---

# Hero Statement

> Centred headline and actions above a wide media panel.

- **Slug:** `hero-statement`
- **Kind:** section · **Category:** Hero
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/hero-statement
- **All files in one bundle:** https://viewership.ai/design/components/hero-statement.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/hero-statement.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/hero-statement/`:

   - `HeroStatement.astro` (raw: https://viewership.ai/design/raw/hero-statement/HeroStatement.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)

npm packages: none.

## Usage

```astro
---
import HeroStatement from "../components/viewership/hero-statement/HeroStatement.astro";
---

<HeroStatement />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import HeroStatement from "./HeroStatement.astro";
---

<HeroStatement
  title="Gear for the"
  accent="long way round."
  body="Tents, packs and layers cut in small batches, repaired for life and shipped from one warehouse in Duluth."
  primary={{ label: "Shop the range", href: "#" }}
  secondary={{ label: "Read the repair promise", href: "#" }}
>
  <img slot="media" src="/ui/demo/ridgeline.webp" alt="Layered mountain ridges at dusk" width="1600" height="1000" loading="lazy" />
</HeroStatement>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Headline. |
| `accent` | `string` |  | Closing words of the headline, drawn in the theme's accent style (<em>). |
| `body` | `string` |  | Supporting paragraph. |
| `primary` | `{ label: string; href: string }` |  | Main call to action. |
| `secondary` | `{ label: string; href: string }` |  | Quieter second action. |
| `as` | `"h1" \| "h2"` | `"h1"` | Heading element. |
| `slot: media` | `slot` |  | Image, video or rendered visual, cropped to 16:7. |

## Source

### `src/components/viewership/hero-statement/HeroStatement.astro`

```astro
---
/**
 * HeroStatement: centred headline and actions over a wide media panel.
 *
 * Media goes in the `media` slot (image, video, rendered visual). The section
 * responds to its own width, and its look follows the --vs-* tokens or a
 * theme preset.
 *
 * @example
 * <HeroStatement title="Gear for the" accent="long way round." primary={{ label: "Shop", href: "/shop" }}>
 *   <img slot="media" src="/hero.webp" alt="" />
 * </HeroStatement>
 */
import Button from "../button/Button.astro";

interface Cta {
  label: string;
  href: string;
}
interface Props {
  title: string;
  /** Closing words of the headline, drawn in the theme's accent style. */
  accent?: string;
  body?: string;
  primary?: Cta;
  secondary?: Cta;
  /** Heading element. Use "h2" when the page already has an h1. */
  as?: "h1" | "h2";
  class?: string;
}

const { title, accent, body, primary, secondary, as: Heading = "h1", class: className } = Astro.props;
---

<section class:list={["vs-hero-statement", className]}>
  <div class="vs-hero-statement__inner">
    <Heading class="vs-display vs-hero-statement__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
    {body && <p class="vs-hero-statement__body">{body}</p>}
    {
      (primary || secondary) && (
        <div class="vs-hero-statement__actions">
          {primary && <Button href={primary.href} variant="primary">{primary.label}</Button>}
          {secondary && <Button href={secondary.href} variant="secondary">{secondary.label}</Button>}
        </div>
      )
    }
    {
      Astro.slots.has("media") && (
        <div class="vs-hero-statement__media">
          <slot name="media" />
        </div>
      )
    }
  </div>
</section>

<style>
  .vs-hero-statement {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
    text-align: center;
  }
  .vs-hero-statement__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-hero-statement__title {
    font-size: clamp(2.5rem, 10cqi, 6.75rem);
  }
  .vs-hero-statement__body {
    max-width: 34rem;
    margin: 1.5rem auto 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-hero-statement__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 2rem;
  }
  .vs-hero-statement__media {
    margin-top: clamp(40px, 7cqi, 72px);
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border: var(--vs-border-w) solid var(--vs-line);
    border-radius: var(--vs-radius-window);
    background: var(--vs-canvas);
    box-shadow: var(--vs-pop-shadow, none);
  }
  .vs-hero-statement__media :global(:is(img, video)) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
```


---

# Glide Menu

> One highlight that glides to the hovered or focused row.

- **Slug:** `glide-menu`
- **Kind:** atom · **Category:** Navigation
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/GlideMenu.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/glide-menu
- **All files in one bundle:** https://viewership.ai/design/components/glide-menu.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/glide-menu.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy these files into `src/components/viewership/glide-menu/`:

   - `GlideMenu.astro` (raw: https://viewership.ai/design/raw/glide-menu/GlideMenu.astro.txt)
   - `glide-menu.ts` (raw: https://viewership.ai/design/raw/glide-menu/glide-menu.ts.txt)

npm packages: none.

## Usage

```astro
---
import GlideMenu from "../components/viewership/glide-menu/GlideMenu.astro";
---

<GlideMenu />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import GlideMenu from "./GlideMenu.astro";

interface Props {
  variant?: string;
}
const { variant = "Menu" } = Astro.props;

const actions = [
  { label: "Run report", hint: "R", icon: '<polygon points="6 3 20 12 6 21 6 3"/>' },
  { label: "Add edit notes", hint: "C", icon: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>' },
  { label: "Duplicate draft", hint: "D", icon: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>' },
  { label: "Export report", hint: "E", icon: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>' },
];

const nav = [
  { label: "Content drafts", count: "14", current: true, icon: '<polygon points="6 3 20 12 6 21 6 3"/>' },
  { label: "Reports", count: "6", icon: '<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/><path d="M12 22V12"/><polyline points="3.29 7 12 12 20.71 7"/><path d="m7.5 4.27 9 5.15"/>' },
  { label: "Citations", count: "23", icon: '<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>' },
  { label: "Threads", icon: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>' },
  { label: "Approvals", icon: '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>' },
];
---

{variant === "Menu" && (
  <div class="popover">
    <p class="eyebrow">Draft 214 · Spring Trails</p>
    <GlideMenu class="list" arrowKeys aria-label="Draft actions" role="group">
      {actions.map((a) => (
        <button type="button" class="row" data-menu-row>
          <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" set:html={a.icon} />
          <span class="demo-label">{a.label}</span>
          <kbd class="hint">{a.hint}</kbd>
        </button>
      ))}
      <div class="sep" role="separator"></div>
      <button type="button" class="row row--danger" data-menu-row>
        <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <rect width="20" height="5" x="2" y="3" rx="1" /><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" /><path d="M10 12h4" />
        </svg>
        <span class="demo-label">Archive draft</span>
      </button>
    </GlideMenu>
  </div>
)}

{variant === "Navigation" && (
  <div class="sidebar" data-glide-nav-demo>
    <p class="eyebrow">Northwind Outdoor</p>
    <GlideMenu as="nav" class="list" aria-label="Marketing" highlightBg="var(--vs-hover-2)" highlightRadius="7px" arrowKeys>
      {nav.map((n) => (
        <a href={`#${n.label.toLowerCase().replace(/\W+/g, "-")}`} class="row nav-row" data-menu-row aria-current={n.current ? "page" : undefined}>
          <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" set:html={n.icon} />
          <span class="demo-label">{n.label}</span>
          {n.count && <span class="count">{n.count}</span>}
        </a>
      ))}
    </GlideMenu>
  </div>
)}

<script>
  // Demo only: keep clicks on the page and move aria-current to the clicked row.
  const boot = () =>
    document.querySelectorAll<HTMLElement>("[data-glide-nav-demo]:not([data-vs-ready])").forEach((demo) => {
      demo.dataset.vsReady = "";
      demo.addEventListener("click", (event) => {
        const link = (event.target as Element).closest<HTMLAnchorElement>("a[data-menu-row]");
        if (!link) return;
        event.preventDefault();
        demo.querySelectorAll("a[data-menu-row]").forEach((a) => a.removeAttribute("aria-current"));
        link.setAttribute("aria-current", "page");
      });
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .popover,
  .sidebar {
    margin: 0 auto;
    padding: 6px;
    border-radius: var(--vs-radius-window);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-overlay);
  }
  .popover {
    width: 248px;
  }
  .sidebar {
    width: 224px;
    box-shadow: var(--vs-shadow-card);
  }
  .eyebrow {
    margin: 0;
    padding: 2px 8px 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--vs-ink-3);
  }
  .list {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--vs-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--vs-duration-fast) ease-out;
  }
  .row:active {
    transform: scale(0.98);
  }
  .row:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .icon {
    flex-shrink: 0;
    color: var(--vs-ink-2);
  }
  .demo-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hint {
    font-family: var(--vs-font-mono);
    font-size: 11px;
    color: var(--vs-ink-3);
  }
  .row--danger,
  .row--danger .icon {
    color: var(--vs-red);
  }
  .sep {
    height: 1px;
    margin: 4px 0;
    background: var(--vs-line);
  }

  .nav-row {
    font-size: 14px;
    color: var(--vs-ink-2);
  }
  .nav-row[aria-current="page"] {
    color: var(--vs-ink);
    background: var(--vs-hover-2);
  }
  .nav-row[aria-current="page"] .icon {
    color: var(--vs-ink);
  }
  /* While the highlight is elsewhere, the active row drops its own fill. */
  .list[data-glide-active] .nav-row[aria-current="page"]:not([data-glide-current]) {
    background: transparent;
  }
  .count {
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--vs-ink-3);
  }

  @media (prefers-reduced-motion: reduce) {
    .row:active {
      transform: none;
    }
  }
</style>
```

## Variants

Demo variants: `Menu`, `Navigation`.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `"div" \| "nav"` | `"div"` | Root element. You set the role. |
| `rowSelector` | `string` | `"[data-menu-row]"` | Rows the highlight snaps to. |
| `highlightBg` | `string` | `"var(--vs-hover)"` | Highlight background. |
| `highlightRadius` | `string` | `"8px"` | Highlight corner radius. |
| `highlightInset` | `string` | `"0px"` | Horizontal inset; negative bleeds past rows (sets --vs-glide-inset). |
| `highlightClass` | `string` |  | Extra class on the highlight. Style with :global(). |
| `highlightStyle` | `string` |  | Extra highlight inline style. |
| `arrowKeys` | `boolean` | `false` | Up, Down, Home, End move focus between rows (roving tabindex). |
| `initGlideMenu(el, opts)` | `(el: HTMLElement, opts?: GlideMenuOptions) => () => void` |  | From glide-menu.ts: wire a script-built menu. Returns a teardown. |

## Used by

[Approval Card](https://viewership.ai/design/components/approval-card.md), [Prompt Bar](https://viewership.ai/design/components/prompt-bar.md), [Records Table](https://viewership.ai/design/components/records-table.md), [Sidebar Nav](https://viewership.ai/design/components/sidebar-nav.md), [Search](https://viewership.ai/design/components/search.md), [Fine-tune Card](https://viewership.ai/design/components/fine-tune-card.md)

## Source

### `src/components/viewership/glide-menu/GlideMenu.astro`

```astro
---
/**
 * GlideMenu: a container whose single highlight glides to the hovered or
 * focused row.
 *
 * Ported from Beautiful UI `components/primitives/GlideMenu.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * Mark rows with `data-menu-row` (or pass `rowSelector`). The highlight
 * follows pointer and keyboard focus; set `arrowKeys` for Up/Down/Home/End
 * with a roving tabindex. Roles (menu, listbox, nav) are up to you.
 *
 * Style the highlight with `highlightBg` / `highlightRadius` /
 * `highlightInset` (or `--vs-glide-*`). A `highlightClass` needs
 * `:global(...)`. While showing, the root has `data-glide-active` and the
 * row has `data-glide-current`.
 *
 * For menus built by script, use `initGlideMenu` from `./glide-menu`.
 *
 * @example
 * <GlideMenu class="list" highlightBg="var(--vs-field)" highlightRadius="6px" arrowKeys>
 *   <button data-menu-row>Run report</button>
 *   <button data-menu-row>Save draft</button>
 * </GlideMenu>
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & {
  /** Root element. */
  as?: "div" | "nav";
  /** Selector for rows the highlight snaps to. */
  rowSelector?: string;
  /** Highlight background. */
  highlightBg?: string;
  /** Highlight corner radius. */
  highlightRadius?: string;
  /** Horizontal inset of the highlight; negative values bleed outward. */
  highlightInset?: string;
  /** Extra class on the highlight (style it with :global). */
  highlightClass?: string;
  /** Extra inline style on the highlight. */
  highlightStyle?: string;
  /** Arrow keys / Home / End move focus between rows (roving tabindex). */
  arrowKeys?: boolean;
};

const {
  as: Tag = "div",
  rowSelector = "[data-menu-row]",
  highlightBg,
  highlightRadius,
  highlightInset,
  highlightClass,
  highlightStyle,
  arrowKeys = false,
  class: className,
  style,
  ...rest
} = Astro.props;

const vars = [
  highlightBg && `--vs-glide-bg: ${highlightBg}`,
  highlightRadius && `--vs-glide-radius: ${highlightRadius}`,
  highlightInset && `--vs-glide-inset: ${highlightInset}`,
]
  .filter(Boolean)
  .join("; ");
const rootStyle = [vars, typeof style === "string" ? style : ""].filter(Boolean).join("; ") || undefined;
---

<Tag
  class:list={["vs-glide-menu", className]}
  data-row-selector={rowSelector === "[data-menu-row]" ? undefined : rowSelector}
  data-arrow-keys={arrowKeys ? "" : undefined}
  style={rootStyle}
  {...rest}
>
  <span
    class:list={["vs-glide-menu__highlight", highlightClass]}
    style={highlightStyle}
    aria-hidden="true"
    data-glide-highlight
  ></span>
  <slot />
</Tag>

<script>
  import { initGlideMenu } from "./glide-menu";

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-glide-menu:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      initGlideMenu(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-glide-menu {
    position: relative;
  }
  .vs-glide-menu__highlight {
    position: absolute;
    top: 0;
    left: var(--vs-glide-inset, 0px);
    right: var(--vs-glide-inset, 0px);
    height: 0;
    opacity: 0;
    pointer-events: none;
    border-radius: var(--vs-glide-radius, 8px);
    background: var(--vs-glide-bg, var(--vs-hover));
  }
  /* Rows paint above the highlight. Zero specificity so consumers can override. */
  :global(:where(.vs-glide-menu [data-menu-row])) {
    position: relative;
  }

  @media (forced-colors: active) {
    .vs-glide-menu__highlight {
      outline: 1px solid Highlight;
      background: transparent;
    }
  }
</style>
```

### `src/components/viewership/glide-menu/glide-menu.ts`

```ts
/**
 * glide-menu: the behaviour behind <GlideMenu>.
 *
 * Ported from Beautiful UI `components/primitives/GlideMenu.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * One highlight glides between a container's rows, following pointer and
 * keyboard focus. GlideMenu.astro calls this; call it yourself for menus
 * built at runtime:
 *
 *   const stop = initGlideMenu(menuEl, { arrowKeys: true });
 *   // later: stop();
 *
 * A highlight element is created if missing. Style it with custom
 * properties on the container:
 *   --vs-glide-bg      (default var(--vs-hover))
 *   --vs-glide-radius  (default 8px)
 *   --vs-glide-inset   horizontal inset; negative bleeds outward (default 0)
 *
 * While showing, the container has `data-glide-active` and the row has
 * `data-glide-current`.
 */

export interface GlideMenuOptions {
  /** Selector for rows the highlight snaps to. Default `[data-menu-row]`, or the container's `data-row-selector`. */
  rowSelector?: string;
  /**
   * Arrow keys / Home / End move focus between rows, with a roving tabindex so
   * Tab enters and leaves the group in one stop. Default: the container's
   * `data-arrow-keys` attribute.
   */
  arrowKeys?: boolean;
}

const EASE = "var(--vs-ease-out, cubic-bezier(0.23, 1, 0.32, 1))";
const TRANSITION = `top 220ms ${EASE}, height 220ms ${EASE}, opacity 150ms ease`;

function ensureHighlight(root: HTMLElement): HTMLElement {
  const existing = root.querySelector<HTMLElement>(":scope > [data-glide-highlight]");
  if (existing) return existing;
  const hl = document.createElement("span");
  hl.setAttribute("aria-hidden", "true");
  hl.setAttribute("data-glide-highlight", "");
  Object.assign(hl.style, {
    position: "absolute",
    pointerEvents: "none",
    left: "var(--vs-glide-inset, 0px)",
    right: "var(--vs-glide-inset, 0px)",
    top: "0px",
    height: "0px",
    opacity: "0",
    borderRadius: "var(--vs-glide-radius, 8px)",
    background: "var(--vs-glide-bg, var(--vs-hover))",
  } satisfies Partial<CSSStyleDeclaration>);
  root.prepend(hl);
  return hl;
}

/** Wire one container. Returns a teardown function. */
export function initGlideMenu(root: HTMLElement, options: GlideMenuOptions = {}): () => void {
  const rowSelector = options.rowSelector ?? root.dataset.rowSelector ?? "[data-menu-row]";
  const arrowKeys = options.arrowKeys ?? root.hasAttribute("data-arrow-keys");
  const hl = ensureHighlight(root);
  const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");

  if (getComputedStyle(root).position === "static") root.style.position = "relative";

  let current: HTMLElement | null = null;
  let placedOnce = false;

  const rows = () =>
    Array.from(root.querySelectorAll<HTMLElement>(rowSelector)).filter(
      (row) => row !== root && !isDisabled(row) && row.getClientRects().length > 0,
    );

  const isDisabled = (row: HTMLElement) => row.matches(":disabled, [aria-disabled='true'], [inert] *");

  const rowFrom = (target: EventTarget | null): HTMLElement | null => {
    if (!(target instanceof Element)) return null;
    const row = target.closest<HTMLElement>(rowSelector);
    return row && row !== root && root.contains(row) ? row : null;
  };

  const place = (row: HTMLElement) => {
    const rowRect = row.getBoundingClientRect();
    const rootRect = root.getBoundingClientRect();
    hl.style.top = `${rowRect.top - rootRect.top - root.clientTop + root.scrollTop}px`;
    hl.style.height = `${rowRect.height}px`;
  };

  const moveTo = (row: HTMLElement) => {
    if (row === current || isDisabled(row)) return;
    // Rows must paint above the absolutely positioned highlight.
    if (getComputedStyle(row).position === "static") row.style.position = "relative";
    // The first placement jumps into position; later ones glide.
    hl.style.transition = reduce.matches ? "none" : placedOnce ? TRANSITION : "opacity 150ms ease";
    place(row);
    placedOnce = true;
    hl.style.opacity = "1";
    current?.removeAttribute("data-glide-current");
    current = row;
    row.setAttribute("data-glide-current", "");
    root.setAttribute("data-glide-active", "");
  };

  const hide = () => {
    hl.style.opacity = "0";
    current?.removeAttribute("data-glide-current");
    current = null;
    root.removeAttribute("data-glide-active");
  };

  const focusedRow = () => {
    const active = document.activeElement;
    return active instanceof HTMLElement && active.matches(":focus-visible") ? rowFrom(active) : null;
  };

  const onMouseOver = (event: MouseEvent) => {
    const row = rowFrom(event.target);
    if (row) moveTo(row);
  };
  const onMouseLeave = () => {
    // Hand the highlight back to a keyboard-focused row instead of hiding it.
    const row = focusedRow();
    if (row) moveTo(row);
    else hide();
  };
  const onFocusIn = (event: FocusEvent) => {
    const row = rowFrom(event.target);
    if (!row) return;
    moveTo(row);
    if (arrowKeys) setRoving(row);
  };
  const onFocusOut = (event: FocusEvent) => {
    const next = event.relatedTarget;
    if (next instanceof Node && root.contains(next)) return;
    if (!root.matches(":hover")) hide();
  };

  const setRoving = (active: HTMLElement) => {
    for (const row of root.querySelectorAll<HTMLElement>(rowSelector)) {
      row.tabIndex = row === active ? 0 : -1;
    }
  };

  const onKeyDown = (event: KeyboardEvent) => {
    if (event.altKey || event.ctrlKey || event.metaKey) return;
    const from = rowFrom(event.target);
    if (!from) return;
    const list = rows();
    const i = list.indexOf(from);
    let next: HTMLElement | undefined;
    if (event.key === "ArrowDown") next = list[(i + 1) % list.length];
    else if (event.key === "ArrowUp") next = list[(i - 1 + list.length) % list.length];
    else if (event.key === "Home") next = list[0];
    else if (event.key === "End") next = list[list.length - 1];
    if (!next) return;
    event.preventDefault();
    next.focus();
  };

  if (arrowKeys) {
    const list = rows();
    const initial =
      list.find((row) => row.matches("[aria-current]:not([aria-current='false']), [aria-checked='true'], [aria-selected='true']")) ??
      list[0];
    if (initial) setRoving(initial);
  }

  // Rows can reflow (fonts loading, a sidebar collapsing): keep the highlight on its row.
  const resize = new ResizeObserver(() => {
    if (current?.isConnected) place(current);
  });
  resize.observe(root);

  root.addEventListener("mouseover", onMouseOver);
  root.addEventListener("mouseleave", onMouseLeave);
  root.addEventListener("focusin", onFocusIn);
  root.addEventListener("focusout", onFocusOut);
  if (arrowKeys) root.addEventListener("keydown", onKeyDown);

  return () => {
    resize.disconnect();
    root.removeEventListener("mouseover", onMouseOver);
    root.removeEventListener("mouseleave", onMouseLeave);
    root.removeEventListener("focusin", onFocusIn);
    root.removeEventListener("focusout", onFocusOut);
    root.removeEventListener("keydown", onKeyDown);
    hide();
  };
}
```


---

# Hero Split

> Headline and actions beside a media panel; stacks when narrow, flips with one prop.

- **Slug:** `hero-split`
- **Kind:** section · **Category:** Hero
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/hero-split
- **All files in one bundle:** https://viewership.ai/design/components/hero-split.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/hero-split.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/hero-split/`:

   - `HeroSplit.astro` (raw: https://viewership.ai/design/raw/hero-split/HeroSplit.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)

npm packages: none.

## Usage

```astro
---
import HeroSplit from "../components/viewership/hero-split/HeroSplit.astro";
---

<HeroSplit />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import HeroSplit from "./HeroSplit.astro";
---

<HeroSplit
  title="Built to be mended,"
  accent="not replaced."
  body="Every pack comes with a map of where it was made and a promise to fix it for as long as you own it."
  primary={{ label: "Shop packs", href: "#" }}
  secondary={{ label: "How repairs work", href: "#" }}
  note="Free returns within 60 days, used or not."
>
  <img slot="media" src="/ui/demo/contours.webp" alt="Topographic contour map" width="1600" height="1100" loading="lazy" />
</HeroSplit>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Headline. |
| `accent` | `string` |  | Closing words of the headline, drawn in the theme's accent style. |
| `body` | `string` |  | Supporting paragraph. |
| `primary` | `{ label: string; href: string }` |  | Main call to action. |
| `secondary` | `{ label: string; href: string }` |  | Text-style second action. |
| `note` | `string` |  | Small line under the actions. |
| `reverse` | `boolean` | `false` | Media on the left. |
| `as` | `"h1" \| "h2"` | `"h1"` | Heading element. |
| `slot: media` | `slot` |  | Image or video, cropped to 4:3. |

## Source

### `src/components/viewership/hero-split/HeroSplit.astro`

```astro
---
/**
 * HeroSplit: copy on one side, media on the other. Stacks on narrow widths.
 *
 * @example
 * <HeroSplit title="Built to be mended," accent="not replaced." primary={{ label: "Shop", href: "/shop" }}>
 *   <img slot="media" src="/map.webp" alt="" />
 * </HeroSplit>
 */
import Button from "../button/Button.astro";

interface Cta {
  label: string;
  href: string;
}
interface Props {
  title: string;
  accent?: string;
  body?: string;
  primary?: Cta;
  secondary?: Cta;
  /** Small line under the actions: a guarantee, a rating, a note. */
  note?: string;
  /** Put the media on the left instead. */
  reverse?: boolean;
  as?: "h1" | "h2";
  class?: string;
}

const { title, accent, body, primary, secondary, note, reverse = false, as: Heading = "h1", class: className } = Astro.props;
---

<section class:list={["vs-hero-split", { "is-reverse": reverse }, className]}>
  <div class="vs-hero-split__inner">
    <div class="vs-hero-split__copy">
      <Heading class="vs-display vs-hero-split__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {body && <p class="vs-hero-split__body">{body}</p>}
      {
        (primary || secondary) && (
          <div class="vs-hero-split__actions">
            {primary && <Button href={primary.href} variant="primary">{primary.label}</Button>}
            {secondary && <Button href={secondary.href} variant="quiet">{secondary.label}</Button>}
          </div>
        )
      }
      {note && <p class="vs-hero-split__note">{note}</p>}
    </div>
    {
      Astro.slots.has("media") && (
        <div class="vs-hero-split__media">
          <slot name="media" />
        </div>
      )
    }
  </div>
</section>

<style>
  .vs-hero-split {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-hero-split__inner {
    display: grid;
    gap: clamp(32px, 6cqi, 72px);
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-hero-split__title {
    font-size: clamp(2.25rem, 7cqi, 4.75rem);
  }
  .vs-hero-split__body {
    max-width: 30rem;
    margin: 1.5rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-hero-split__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2rem;
  }
  .vs-hero-split__note {
    margin: 1.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--vs-ink-3);
  }
  .vs-hero-split__media {
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: var(--vs-border-w) solid var(--vs-line);
    border-radius: var(--vs-radius-card);
    background: var(--vs-canvas);
    box-shadow: var(--vs-pop-shadow, none);
  }
  .vs-hero-split__media :global(:is(img, video)) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @container (min-width: 760px) {
    .vs-hero-split__inner {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      align-items: center;
    }
    .is-reverse .vs-hero-split__media {
      order: -1;
    }
  }
</style>
```


---

# Entity Chip

> Inline reference to a client, person or record, as a monogram and name.

- **Slug:** `entity-chip`
- **Kind:** atom · **Category:** Content
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/EntityChip.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/entity-chip
- **All files in one bundle:** https://viewership.ai/design/components/entity-chip.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/entity-chip.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy these files into `src/components/viewership/entity-chip/`:

   - `EntityChip.astro` (raw: https://viewership.ai/design/raw/entity-chip/EntityChip.astro.txt)
   - `Monogram.astro` (raw: https://viewership.ai/design/raw/entity-chip/Monogram.astro.txt)

npm packages: none.

## Usage

```astro
---
import EntityChip from "../components/viewership/entity-chip/EntityChip.astro";
---

<EntityChip />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import EntityChip from "./EntityChip.astro";
import Monogram from "./Monogram.astro";
---

<div class="card">
  <div class="head">
    <Monogram color="var(--vs-ink)" class="mark">N</Monogram>
    <span class="title">Weekly marketing note</span>
  </div>
  <p>
    Send the spring trail draft to <EntityChip name="Northwind Outdoor" color="var(--vs-green)" />
    before the review window closes, and hold two posts for <EntityChip name="Gear Review Weekly" color="var(--vs-accent)" />.
  </p>
  <p>
    <EntityChip name="Ines Varga" color="var(--vs-orange)" monogram="IV" /> signed off the Q3 citation report;
    the GA4 export from <EntityChip name="Summit Analytics" color="var(--vs-red)" /> is still pending.
  </p>
</div>

<style>
  .card {
    max-width: 440px;
    margin: 0 auto;
    padding: 16px 18px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .head :global(.mark) {
    width: 20px;
    height: 20px;
    font-size: 10px;
    color: var(--vs-ink-inverse);
  }
  .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vs-ink);
  }
  p {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--vs-ink-2);
  }
  p + p {
    margin-top: 8px;
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` |  | Name shown in the chip. |
| `color` | `string` | `"var(--vs-orange)"` | Disc color (any CSS color). |
| `monogram` | `string` |  | Monogram glyph. Defaults to the first letter of name. |
| `<Monogram color>` | `slot + color` |  | Monogram.astro alone: a 16px decorative disc. |

## Used by

[Recommendation Card](https://viewership.ai/design/components/recommendation-card.md)

## Source

### `src/components/viewership/entity-chip/EntityChip.astro`

```astro
---
/**
 * EntityChip: inline reference to a person, brand or record, as a monogram and name.
 *
 * Ported from Beautiful UI `components/atoms/EntityChip.tsx`
 * (MIT, © 2026 Shane Levine). Softer than a StatusPill (no dot, no state) and not a mono
 * token (see Chip).
 *
 * @example
 * Cited by <EntityChip name="Northwind Outdoor" color="var(--vs-green)" />
 */
import type { HTMLAttributes } from "astro/types";
import Monogram from "./Monogram.astro";

type Props = HTMLAttributes<"span"> & {
  /** Entity name (the chip's text). */
  name: string;
  /** Monogram color. Any CSS color. */
  color?: string;
  /** Monogram glyph. Defaults to the first character of `name`. */
  monogram?: string;
};

const { name, color, monogram, class: className, ...rest } = Astro.props;
---

<span class:list={["vs-entity-chip", className]} {...rest}>
  <Monogram color={color}>{monogram ?? name.charAt(0)}</Monogram>
  <span class="vs-entity-chip__name">{name}</span>
</span>

<style>
  .vs-entity-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 2px;
    padding: 1px 6px 1px 3px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-field);
    box-shadow: var(--vs-shadow-hairline);
    vertical-align: middle;
  }
  .vs-entity-chip__name {
    font-size: 12px;
    font-weight: 500;
    color: var(--vs-ink);
  }
</style>
```

### `src/components/viewership/entity-chip/Monogram.astro`

```astro
---
/**
 * Monogram: a colored disc with an initial or short glyph.
 *
 * Ported from Beautiful UI `components/atoms/EntityChip.tsx`
 * (MIT, © 2026 Shane Levine). Hidden from assistive tech, so pair it with
 * the name.
 *
 * @example
 * <Monogram color="var(--vs-green)">K</Monogram>
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span"> & {
  /** Disc color. Any CSS color. */
  color?: string;
};

const { color = "var(--vs-orange)", class: className, ...rest } = Astro.props;
---

<span class:list={["vs-monogram", className]} style={`--vs-monogram-color: ${color}`} aria-hidden="true" {...rest}><slot /></span>

<style>
  .vs-monogram {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-monogram-color);
    color: white;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
  }
</style>
```


---

# Hero Index

> Oversized left-aligned headline over a ruled row of facts. Type-led, no media.

- **Slug:** `hero-index`
- **Kind:** section · **Category:** Hero
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/hero-index
- **All files in one bundle:** https://viewership.ai/design/components/hero-index.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/hero-index.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/hero-index/`:

   - `HeroIndex.astro` (raw: https://viewership.ai/design/raw/hero-index/HeroIndex.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)

npm packages: none.

## Usage

```astro
---
import HeroIndex from "../components/viewership/hero-index/HeroIndex.astro";
---

<HeroIndex />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import HeroIndex from "./HeroIndex.astro";
---

<HeroIndex
  title="Twelve years, one"
  accent="repair bench."
  body="Tents, packs and layers cut in small batches, repaired for life and shipped from one warehouse in Duluth."
  primary={{ label: "Shop the range", href: "#" }}
  secondary={{ label: "Book a repair", href: "#" }}
  facts={[
    { value: "12 yr", label: "Repair promise on every pack" },
    { value: "40", label: "Small batches a year" },
    { value: "2 days", label: "Average repair turnaround" },
    { value: "0", label: "Single-use shells" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Headline. |
| `accent` | `string` |  | Closing words of the headline, drawn in the theme's accent style. |
| `body` | `string` |  | Supporting paragraph, set in the right half on wide screens. |
| `primary` | `{ label: string; href: string }` |  | Main call to action. |
| `secondary` | `{ label: string; href: string }` |  | Quieter second action. |
| `facts` | `{ value: string; label: string }[]` | `[]` | Figures under the headline. |
| `as` | `"h1" \| "h2"` | `"h1"` | Heading element. |

## Source

### `src/components/viewership/hero-index/HeroIndex.astro`

```astro
---
/**
 * HeroIndex: an oversized left-aligned headline over a ruled row of facts.
 * No media needed; the type carries it.
 *
 * @example
 * <HeroIndex title="Twelve years, one" accent="repair bench."
 *   facts={[{ value: "12 yr", label: "Repair promise" }]} />
 */
import Button from "../button/Button.astro";

interface Cta {
  label: string;
  href: string;
}
interface Fact {
  value: string;
  label: string;
}
interface Props {
  title: string;
  accent?: string;
  body?: string;
  primary?: Cta;
  secondary?: Cta;
  facts?: Fact[];
  as?: "h1" | "h2";
  class?: string;
}

const { title, accent, body, primary, secondary, facts = [], as: Heading = "h1", class: className } = Astro.props;
---

<section class:list={["vs-hero-index", className]}>
  <div class="vs-hero-index__inner">
    <div class="vs-hero-index__copy">
      <Heading class="vs-display vs-hero-index__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {body && <p class="vs-hero-index__body">{body}</p>}
      {
        (primary || secondary) && (
          <div class="vs-hero-index__actions">
            {primary && <Button href={primary.href} variant="primary">{primary.label}</Button>}
            {secondary && <Button href={secondary.href} variant="secondary">{secondary.label}</Button>}
          </div>
        )
      }
    </div>
    {
      facts.length > 0 && (
        <dl class="vs-hero-index__facts">
          {facts.map((f) => (
            <div class="vs-hero-index__fact">
              <dt>{f.label}</dt>
              <dd class="vs-display">{f.value}</dd>
            </div>
          ))}
        </dl>
      )
    }
  </div>
</section>

<style>
  .vs-hero-index {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-hero-index__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-hero-index__copy {
    display: grid;
  }
  .vs-hero-index__title {
    font-size: clamp(2.75rem, 13cqi, 9rem);
    line-height: 0.95;
  }
  .vs-hero-index__body {
    max-width: 30rem;
    margin: 2.5rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-hero-index__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 2rem;
  }
  .vs-hero-index__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px;
    margin: clamp(40px, 7cqi, 80px) 0 0;
  }
  .vs-hero-index__fact {
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
    padding-top: 14px;
    border-top: calc(var(--vs-border-w) + 1px) solid var(--vs-ink);
  }
  .vs-hero-index__fact dd {
    margin: 0;
    font-size: clamp(2rem, 5cqi, 3.5rem);
  }
  .vs-hero-index__fact dt {
    font-size: 0.875rem;
    color: var(--vs-ink-2);
  }
  @container (min-width: 760px) {
    .vs-hero-index__copy {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: 24px;
    }
    .vs-hero-index__title {
      grid-column: 1 / -1;
    }
    .vs-hero-index__body,
    .vs-hero-index__actions {
      grid-column: 7 / -1;
    }
  }
</style>
```


---

# Hero Poster

> Full-bleed image or video with the headline set over it, bottom left, behind a soft scrim.

- **Slug:** `hero-poster`
- **Kind:** section · **Category:** Hero
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/hero-poster
- **All files in one bundle:** https://viewership.ai/design/components/hero-poster.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/hero-poster.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/hero-poster/`:

   - `HeroPoster.astro` (raw: https://viewership.ai/design/raw/hero-poster/HeroPoster.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)

npm packages: none.

## Usage

```astro
---
import HeroPoster from "../components/viewership/hero-poster/HeroPoster.astro";
---

<HeroPoster />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import HeroPoster from "./HeroPoster.astro";
---

<HeroPoster
  caption="Winter collection. Boundary Waters, Minnesota."
  title="Out past"
  accent="the last road."
  body="Shells and sleep systems rated for minus thirty, tested by people who go there on purpose."
  primary={{ label: "Shop winter", href: "#" }}
  secondary={{ label: "Field notes", href: "#" }}
>
  <img slot="media" src="/ui/demo/ridgeline-night.webp" alt="Mountain ridges under a full moon" width="1600" height="1000" loading="lazy" />
</HeroPoster>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `body` | `string` |  | Supporting paragraph. |
| `primary` | `{ label: string; href: string }` |  | Main call to action (accent button). |
| `secondary` | `{ label: string; href: string }` |  | Second action. |
| `caption` | `string` |  | Short line in the top corner. |
| `as` | `"h1" \| "h2"` | `"h1"` | Heading element. |
| `slot: media` | `slot` |  | Background image or video, covers the section. |

## Source

### `src/components/viewership/hero-poster/HeroPoster.astro`

```astro
---
/**
 * HeroPoster: full-bleed media with the headline set over it, bottom left.
 *
 * A scrim keeps the type readable on any image. Text is always light here,
 * whatever the theme mode, because it sits on the picture.
 *
 * @example
 * <HeroPoster title="Out past" accent="the last road." primary={{ label: "Shop", href: "/shop" }}>
 *   <img slot="media" src="/night.webp" alt="" />
 * </HeroPoster>
 */
import Button from "../button/Button.astro";

interface Cta {
  label: string;
  href: string;
}
interface Props {
  title: string;
  accent?: string;
  body?: string;
  primary?: Cta;
  secondary?: Cta;
  /** Short caption in the top corner: a place, a season, a credit. */
  caption?: string;
  as?: "h1" | "h2";
  class?: string;
}

const { title, accent, body, primary, secondary, caption, as: Heading = "h1", class: className } = Astro.props;
---

<section class:list={["vs-hero-poster", className]}>
  <div class="vs-hero-poster__media" aria-hidden={Astro.slots.has("media") ? undefined : "true"}>
    <slot name="media" />
  </div>
  <div class="vs-hero-poster__inner">
    {caption && <p class="vs-hero-poster__caption">{caption}</p>}
    <div class="vs-hero-poster__copy">
      <Heading class="vs-display vs-hero-poster__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {body && <p class="vs-hero-poster__body">{body}</p>}
      {
        (primary || secondary) && (
          <div class="vs-hero-poster__actions">
            {primary && <Button href={primary.href} variant="accent">{primary.label}</Button>}
            {secondary && <Button href={secondary.href} variant="secondary">{secondary.label}</Button>}
          </div>
        )
      }
    </div>
  </div>
</section>

<style>
  .vs-hero-poster {
    position: relative;
    container-type: inline-size;
    display: grid;
    overflow: hidden;
    background: #0d1118;
    color: #f6f2ea;
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-hero-poster__media {
    position: absolute;
    inset: 0;
  }
  .vs-hero-poster__media :global(:is(img, video)) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .vs-hero-poster__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(5 7 12 / 0.82) 0%, rgb(5 7 12 / 0.35) 45%, rgb(5 7 12 / 0) 75%);
  }
  .vs-hero-poster__inner {
    position: relative;
    display: flex;
    min-height: clamp(460px, 62cqi, 760px);
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: clamp(24px, 4cqi, 40px) var(--vs-gutter) var(--vs-section-y);
  }
  .vs-hero-poster__caption {
    margin: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    opacity: 0.8;
  }
  .vs-hero-poster__copy {
    max-width: 44rem;
    margin-top: auto;
  }
  .vs-hero-poster__title {
    font-size: clamp(2.5rem, 9cqi, 6.5rem);
  }
  .vs-hero-poster__title :global(em) {
    color: inherit;
    opacity: 0.75;
  }
  .vs-hero-poster__body {
    max-width: 30rem;
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    opacity: 0.85;
  }
  .vs-hero-poster__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 2rem;
  }
</style>
```


---

# Value Pill

> Inline badge that sets a value off from running text.

- **Slug:** `value-pill`
- **Kind:** atom · **Category:** Content
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/ValuePill.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/value-pill
- **All files in one bundle:** https://viewership.ai/design/components/value-pill.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/value-pill.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/value-pill/`:

   - `ValuePill.astro` (raw: https://viewership.ai/design/raw/value-pill/ValuePill.astro.txt)

npm packages: none.

## Usage

```astro
---
import ValuePill from "../components/viewership/value-pill/ValuePill.astro";
---

<ValuePill />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import ValuePill from "./ValuePill.astro";

interface Props {
  variant?: string;
}
const { variant = "In prose" } = Astro.props;
---

{variant === "In prose" && (
  <div class="card">
    <p>
      Approve the draft within <ValuePill tone="green">9 days</ValuePill> so it ships before
      the <ValuePill>Spring Trail</ValuePill> launch on <ValuePill tone="accent">Nov 18</ValuePill>.
    </p>
    <p>
      Bounce rate on the trail pack page hit <ValuePill tone="orange">62.4%</ValuePill>, and two links are
      <ValuePill tone="red">broken</ValuePill>.
    </p>
  </div>
)}

{variant === "Tones" && (
  <div class="row">
    <ValuePill>Organic</ValuePill>
    <ValuePill tone="green">9 days</ValuePill>
    <ValuePill tone="orange">62.4% bounce</ValuePill>
    <ValuePill tone="red">2 broken links</ValuePill>
    <ValuePill tone="accent">Nov 18</ValuePill>
  </div>
)}

<style>
  .card {
    max-width: 440px;
    margin: 0 auto;
    padding: 16px 18px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  p {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--vs-ink);
  }
  p + p {
    margin-top: 8px;
  }
  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
</style>
```

## Variants

Demo variants: `In prose`, `Tones`.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `"neutral" \| "green" \| "orange" \| "red" \| "accent"` | `"neutral"` | Tint, ring and text color. |

## Used by

[Recommendation Card](https://viewership.ai/design/components/recommendation-card.md)

## Source

### `src/components/viewership/value-pill/ValuePill.astro`

```astro
---
/**
 * ValuePill: inline badge that sets a plain value off from running text.
 *
 * Ported from Beautiful UI `components/atoms/ValuePill.tsx`
 * (MIT, © 2026 Shane Levine). Softer than a StatusPill (no dot) and not a
 * mono token (see Chip).
 *
 * @example
 * with a CTR of <ValuePill tone="green">4.1%</ValuePill>
 */
import type { HTMLAttributes } from "astro/types";

type Tone = "neutral" | "green" | "orange" | "red" | "accent";

type Props = HTMLAttributes<"span"> & {
  tone?: Tone;
};

const { tone = "neutral", class: className, ...rest } = Astro.props;
---

<span class:list={["vs-value-pill", `vs-value-pill--${tone}`, className]} {...rest}><slot /></span>

<style>
  .vs-value-pill {
    display: inline-flex;
    align-items: center;
    margin: 0 2px;
    padding: 0 6px;
    border-radius: var(--vs-radius-pill);
    font-size: 12px;
    font-weight: 500;
    vertical-align: middle;
  }
  .vs-value-pill--neutral {
    background: var(--vs-field);
    color: var(--vs-ink-2);
    box-shadow: var(--vs-shadow-hairline);
  }
  .vs-value-pill--green {
    background: var(--vs-green-tint);
    color: var(--vs-green);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--vs-green) 28%, transparent);
  }
  .vs-value-pill--orange {
    background: var(--vs-orange-tint);
    color: var(--vs-orange);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--vs-orange) 28%, transparent);
  }
  .vs-value-pill--red {
    background: var(--vs-red-tint);
    color: var(--vs-red);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--vs-red) 28%, transparent);
  }
  .vs-value-pill--accent {
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--vs-accent) 28%, transparent);
  }
  @media (forced-colors: active) {
    .vs-value-pill {
      outline: 1px solid CanvasText;
    }
  }
</style>
```


---

# Shimmer

> Label with a moving light sweep that shows the agent is working.

- **Slug:** `shimmer`
- **Kind:** atom · **Category:** Feedback
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/Shimmer.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/shimmer
- **All files in one bundle:** https://viewership.ai/design/components/shimmer.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/shimmer.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/shimmer/`:

   - `Shimmer.astro` (raw: https://viewership.ai/design/raw/shimmer/Shimmer.astro.txt)

npm packages: none.

## Usage

```astro
---
import Shimmer from "../components/viewership/shimmer/Shimmer.astro";
---

<Shimmer />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import Shimmer from "./Shimmer.astro";

const steps = [
  { label: "Read GA4 data for week 41", state: "done" },
  { label: "Compare against Google Ads spend", state: "done" },
  { label: "Drafting report summary…", state: "active" },
  { label: "Suggest budget moves for next week", state: "todo" },
];
---

<div class="stack">
  <div class="bar" role="status">
    <span class="spinner" aria-hidden="true"></span>
    <Shimmer>Summarizing weekly report…</Shimmer>
  </div>

  <ol class="steps" aria-label="Agent progress">
    {steps.map((s) => (
      <li class:list={["step", `step--${s.state}`]}>
        <span class="dot" aria-hidden="true"></span>
        {s.state === "active" ? <Shimmer>{s.label}</Shimmer> : <span>{s.label}</span>}
      </li>
    ))}
  </ol>
</div>

<style>
  .stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px 0 12px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-overlay);
    font-size: 12.5px;
  }
  .spinner {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.5px solid var(--vs-line-strong);
    border-top-color: var(--vs-ink-2);
    animation: vs-spin 700ms linear infinite;
  }
  .steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 300px;
    margin: 0;
    padding: 14px 16px;
    list-style: none;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
    font-size: 13px;
  }
  .step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--vs-ink-2);
  }
  .dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--vs-line-strong);
  }
  .step--done {
    color: var(--vs-ink-3);
  }
  .step--done .dot {
    background: var(--vs-green);
  }
  .step--active .dot {
    background: var(--vs-accent);
    animation: vs-pulse 1.4s ease-in-out infinite;
  }
  .step--todo {
    color: var(--vs-ink-3);
  }
  @media (prefers-reduced-motion: reduce) {
    .spinner,
    .step--active .dot {
      animation: none;
    }
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `(default slot)` | `text` |  | The label. Inherits font. Static under reduced motion. |

## Used by

[Selection Actions](https://viewership.ai/design/components/selection-actions.md)

## Source

### `src/components/viewership/shimmer/Shimmer.astro`

```astro
---
/**
 * Shimmer: a label with a light sweep, to show the agent is working.
 *
 * Ported from Beautiful UI `components/atoms/Shimmer.tsx`
 * (MIT, © 2026 Shane Levine). Inherits font size and weight. The text stays
 * real text; put it in an `aria-live` region when it appears dynamically.
 * Under reduced motion it renders as plain secondary ink.
 *
 * @example
 * <Shimmer>Drafting the weekly report…</Shimmer>
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span">;

const { class: className, ...rest } = Astro.props;
---

<span class:list={["vs-shimmer", className]} {...rest}><slot /></span>

<style>
  .vs-shimmer {
    display: inline-block;
    background-image: linear-gradient(90deg, var(--vs-ink-3) 35%, var(--vs-ink) 50%, var(--vs-ink-3) 65%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: vs-shimmer-text 1.8s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .vs-shimmer {
      animation: none;
      background: none;
      color: var(--vs-ink-2);
    }
  }
  @media (forced-colors: active) {
    .vs-shimmer {
      background: none;
      color: CanvasText;
    }
  }
</style>
```


---

# Stream Text

> Text that streams in like model output, with a blurred edge and caret.

- **Slug:** `stream-text`
- **Kind:** atom · **Category:** Feedback
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/StreamText.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/stream-text
- **All files in one bundle:** https://viewership.ai/design/components/stream-text.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/stream-text.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy these files into `src/components/viewership/stream-text/`:

   - `StreamText.astro` (raw: https://viewership.ai/design/raw/stream-text/StreamText.astro.txt)
   - `stream-text.ts` (raw: https://viewership.ai/design/raw/stream-text/stream-text.ts.txt)

npm packages: none.

## Usage

```astro
---
import StreamText from "../components/viewership/stream-text/StreamText.astro";
---

<StreamText />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import StreamText from "./StreamText.astro";
import Button from "../button/Button.astro";

interface Props {
  variant?: string;
}
const { variant = "Report summary" } = Astro.props;

const notes =
  "Organic sessions rose 12% week over week, led by the trail pack guide. Paid search held a 4.1x ROAS on flat spend. Perplexity now cites the guide on 3 of 5 tracked prompts. Move $800 from display to search next week.";
---

{variant === "Report summary" && (
  <div class="card" data-stream-demo>
    <div class="head">
      <div>
        <p class="title">Weekly report</p>
        <p class="sub">Northwind Outdoor · Week 41 · GA4</p>
      </div>
      <Button variant="secondary" size="xs" data-replay>Replay</Button>
    </div>
    <p class="body"><StreamText text={notes} reserveSpace /></p>
  </div>
)}

{variant === "Inline rewrite" && (
  <div class="card">
    <p class="body">
      Our trail packs are tested on real routes every season.{" "}
      <span class="selection"><StreamText text="Each pack carries 30 liters, weighs under a kilo and sheds rain on long climbs." charsPerTick={1} tickMs={18} loop loopDelay={2600} /></span>{" "}
      Spring colors ship to retailers Friday.
    </p>
  </div>
)}

<script>
  const boot = () =>
    document.querySelectorAll<HTMLElement>("[data-stream-demo]:not([data-vs-ready])").forEach((demo) => {
      demo.dataset.vsReady = "";
      const stream = demo.querySelector(".vs-stream-text");
      demo.querySelector("[data-replay]")?.addEventListener("click", () => {
        stream?.dispatchEvent(new CustomEvent("vs-stream-play"));
      });
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .card {
    max-width: 440px;
    margin: 0 auto;
    padding: 16px 18px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--vs-ink);
  }
  .sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--vs-ink-3);
  }
  .body {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--vs-ink);
  }
  .selection {
    border-radius: 3px;
    background: color-mix(in srgb, var(--vs-accent) 14%, var(--vs-surface));
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
</style>
```

## Variants

Demo variants: `Report summary`, `Inline rewrite`.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` |  | The text to stream. |
| `charsPerTick` | `number` | `2` | Characters per tick. Higher is faster. |
| `tickMs` | `number` | `9` | Tick interval, ms. |
| `blurTail` | `number` | `6` | Trailing characters that are blurred. |
| `caret` | `boolean` | `true` | Show the caret. Blinks once idle. |
| `autoplay` | `boolean` | `true` | Stream when in view. If false, wait for vs-stream-play. |
| `loop` | `boolean` | `false` | Replay after loopDelay. |
| `loopDelay` | `number` | `2400` | Pause before replay, ms. |
| `reserveSpace` | `boolean` | `false` | Reserve final size to prevent layout shift. Block contexts only. |
| `events` | `vs-stream-play · vs-stream-progress · vs-stream-done` |  | Dispatch vs-stream-play ({ text? }) to restart. Listen for progress ({ count }) and done. |
| `streamText(el, text, opts)` | `(el: HTMLElement, text: string, opts?: StreamTextOptions) => StreamTextHandle` |  | Stream into any element from your own script. Handle: pause, resume, finish, stop. |

## Used by

[Selection Actions](https://viewership.ai/design/components/selection-actions.md)

## Source

### `src/components/viewership/stream-text/StreamText.astro`

```astro
---
/**
 * StreamText: text that streams in like model output, with a soft blurred
 * edge and a caret that blinks once it settles.
 *
 * Adapted from Beautiful UI StreamText (MIT, © 2026 Shane Levine).
 *
 * - Without JS, and under reduced motion, the full text renders at once.
 * - Streams in view; pauses offscreen.
 * - Screen readers get the full text once from a hidden copy. The animated
 *   copy is aria-hidden.
 * - Script API on the root:
 *     el.dispatchEvent(new CustomEvent("vs-stream-play", { detail: { text } }))
 *     el.addEventListener("vs-stream-progress", (e) => e.detail.count)
 *     el.addEventListener("vs-stream-done", …)
 * - For your own DOM, import `streamText` from `./stream-text`.
 *
 * @example
 * <p><StreamText text="Organic sessions rose 12% week over week." /></p>
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span"> & {
  /** The text to stream. */
  text: string;
  /** Characters revealed per tick; higher is faster. */
  charsPerTick?: number;
  /** Interval between reveals, in ms. */
  tickMs?: number;
  /** How many trailing characters carry the soft blur edge. */
  blurTail?: number;
  /** Render the caret (solid while streaming, blinks once idle). */
  caret?: boolean;
  /** Start streaming when scrolled into view. When false, wait for `vs-stream-play`. */
  autoplay?: boolean;
  /** Replay after a pause once the text settles. */
  loop?: boolean;
  /** Pause before a loop restarts, in ms. */
  loopDelay?: number;
  /** Reserve the final text's space up front so nothing below shifts (block contexts only). */
  reserveSpace?: boolean;
};

const {
  text,
  charsPerTick = 2,
  tickMs = 9,
  blurTail = 6,
  caret = true,
  autoplay = true,
  loop = false,
  loopDelay = 2400,
  reserveSpace = false,
  class: className,
  ...rest
} = Astro.props;
---

<span
  class:list={["vs-stream-text", { "vs-stream-text--reserve": reserveSpace }, className]}
  data-chars-per-tick={charsPerTick}
  data-tick-ms={tickMs}
  data-blur-tail={blurTail}
  data-caret={caret ? "" : undefined}
  data-autoplay={autoplay ? "" : undefined}
  data-loop={loop ? "" : undefined}
  data-loop-delay={loopDelay}
  {...rest}
>
  <span class="vs-stream-text__sr">{text}</span>
  {reserveSpace && <span class="vs-stream-text__ghost" aria-hidden="true">{text}{caret && <span class="vs-stream-text__caret" />}</span>}
  <span class="vs-stream-text__visual" aria-hidden="true">{text}{caret && <span class="vs-stream-text__caret" />}</span>
</span>

<script>
  import { streamText, prefersReducedMotion, type StreamTextHandle } from "./stream-text";

  const cleanups = new Set<() => void>();

  function init(root: HTMLElement) {
    const visual = root.querySelector<HTMLElement>(".vs-stream-text__visual");
    const sr = root.querySelector<HTMLElement>(".vs-stream-text__sr");
    const ghost = root.querySelector<HTMLElement>(".vs-stream-text__ghost");
    if (!visual || !sr) return;

    const d = root.dataset;
    let text = sr.textContent ?? "";
    const opts = {
      charsPerTick: Number(d.charsPerTick) || 2,
      tickMs: Number(d.tickMs) || 9,
      blurTail: Number(d.blurTail ?? 6),
      caret: d.caret !== undefined,
    };
    const loop = d.loop !== undefined && !prefersReducedMotion();
    const loopDelay = Number(d.loopDelay) || 2400;

    let handle: StreamTextHandle | null = null;
    let loopTimer: ReturnType<typeof setTimeout> | undefined;
    let inView = false;

    const play = (next?: string) => {
      if (typeof next === "string" && next !== text) {
        text = next;
        sr.textContent = text;
        if (ghost?.firstChild) ghost.firstChild.textContent = text;
      }
      clearTimeout(loopTimer);
      handle?.stop();
      handle = streamText(visual, text, {
        ...opts,
        paused: !inView,
        onProgress: (count) => root.dispatchEvent(new CustomEvent("vs-stream-progress", { detail: { count } })),
        onDone: () => {
          root.dispatchEvent(new CustomEvent("vs-stream-done"));
          if (loop) loopTimer = setTimeout(() => play(), loopDelay);
        },
      });
    };

    const io = new IntersectionObserver(([entry]) => {
      inView = entry.isIntersecting;
      if (inView) handle?.resume();
      else handle?.pause();
    });
    io.observe(root);

    const onPlay = (event: Event) => play((event as CustomEvent<{ text?: string } | null>).detail?.text);
    root.addEventListener("vs-stream-play", onPlay);

    // Autoplay: clear to an empty line now (paused), then stream once visible.
    if (d.autoplay !== undefined && !prefersReducedMotion()) play();

    cleanups.add(() => {
      clearTimeout(loopTimer);
      handle?.stop();
      io.disconnect();
      root.removeEventListener("vs-stream-play", onPlay);
    });
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-stream-text:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
  document.addEventListener("astro:before-swap", () => {
    cleanups.forEach((fn) => fn());
    cleanups.clear();
  });
</script>

<style>
  .vs-stream-text__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Reserve mode: the hidden ghost holds the final size; the stream overlays it. */
  .vs-stream-text--reserve {
    display: grid;
  }
  .vs-stream-text--reserve > .vs-stream-text__ghost,
  .vs-stream-text--reserve > .vs-stream-text__visual {
    grid-area: 1 / 1;
  }
  .vs-stream-text__ghost {
    visibility: hidden;
  }

  /* Settled caret for the server render (the script styles its own inline). */
  .vs-stream-text__caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 1.5px;
    translate: 0 -0.5px;
    border-radius: 1px;
    background: currentColor;
    vertical-align: text-bottom;
    animation: vs-caret-blink 1s step-end infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .vs-stream-text__caret {
      animation: none;
    }
  }
</style>
```

### `src/components/viewership/stream-text/stream-text.ts`

```ts
/**
 * stream-text: the streaming engine behind <StreamText>.
 *
 * Adapted from Beautiful UI StreamText (MIT, © 2026 Shane Levine).
 * The newest characters resolve out of a soft blur; the caret stays solid
 * while streaming, then blinks. Styles are inline, so it works on any element:
 *
 *   const stream = streamText(span, "Organic sessions rose…", {
 *     onProgress: () => reanchorToolbar(),
 *     onDone: () => setMode("result"),
 *   });
 *   stream.stop();
 *
 * The target's children are replaced. Per-character updates are noisy for
 * screen readers: mark the target `aria-hidden` and expose the full text
 * elsewhere (StreamText.astro does), or set `aria-busy` on a live region
 * until `onDone`. Under reduced motion the full text appears at once.
 */

export interface StreamTextOptions {
  /** Characters revealed per tick; higher is faster. Default 2. */
  charsPerTick?: number;
  /** Interval between reveals in ms. Default 9. */
  tickMs?: number;
  /** How many trailing characters carry the soft blur edge. Default 6. */
  blurTail?: number;
  /** Render the caret (solid while streaming, blinks once idle). Default true. */
  caret?: boolean;
  /** Start paused (call resume()). Default false. */
  paused?: boolean;
  /** Fires each tick with the number of characters shown. */
  onProgress?: (count: number) => void;
  /** Fires once the full string is shown. */
  onDone?: () => void;
}

export interface StreamTextHandle {
  /** Stop for good and show the full text. */
  finish(): void;
  /** Stop for good where it is (no onDone). */
  stop(): void;
  pause(): void;
  resume(): void;
}

const TAIL_MASK = "linear-gradient(to right, oklch(0 0 0) 20%, oklch(0 0 0 / 0.2))";

function makeCaret(): HTMLSpanElement {
  const caret = document.createElement("span");
  caret.className = "vs-stream-text__caret";
  caret.setAttribute("aria-hidden", "true");
  Object.assign(caret.style, {
    display: "inline-block",
    width: "2px",
    height: "1.05em",
    marginLeft: "1.5px",
    translate: "0 -0.5px",
    borderRadius: "1px",
    background: "currentColor",
    verticalAlign: "text-bottom",
  } satisfies Partial<CSSStyleDeclaration>);
  return caret;
}

function makeTail(blur: boolean): HTMLSpanElement {
  const tail = document.createElement("span");
  tail.className = "vs-stream-text__tail";
  if (blur) {
    tail.style.filter = "blur(1.6px)";
    tail.style.setProperty("-webkit-mask-image", TAIL_MASK);
    tail.style.setProperty("mask-image", TAIL_MASK);
  }
  return tail;
}

export function prefersReducedMotion(): boolean {
  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}

/** Stream `text` into `target`. Returns a handle to pause, resume, finish or stop. */
export function streamText(target: HTMLElement, text: string, options: StreamTextOptions = {}): StreamTextHandle {
  const { charsPerTick = 2, tickMs = 9, blurTail = 6, caret: withCaret = true, onProgress, onDone } = options;
  const reduce = prefersReducedMotion();

  const head = document.createTextNode("");
  const tail = makeTail(!reduce);
  const caret = withCaret ? makeCaret() : null;
  target.replaceChildren(head, tail, ...(caret ? [caret] : []));

  let count = 0;
  let timer: ReturnType<typeof setInterval> | undefined;
  let done = false;
  let stopped = false;

  const render = () => {
    const shown = text.slice(0, count);
    const streaming = count < text.length;
    const split = streaming ? Math.max(0, shown.length - blurTail) : shown.length;
    head.data = shown.slice(0, split);
    tail.textContent = shown.slice(split);
    if (caret) caret.style.animation = streaming || reduce ? "none" : "vs-caret-blink 1s step-end infinite";
  };

  const clear = () => {
    if (timer !== undefined) clearInterval(timer);
    timer = undefined;
  };

  const complete = () => {
    clear();
    count = text.length;
    render();
    if (!done) {
      done = true;
      onDone?.();
    }
  };

  const tick = () => {
    count = Math.min(count + charsPerTick, text.length);
    render();
    onProgress?.(count);
    if (count >= text.length) complete();
  };

  const start = () => {
    if (done || stopped || timer !== undefined) return;
    timer = setInterval(tick, tickMs);
  };

  render();
  if (reduce || text.length === 0) complete();
  else if (!options.paused) start();

  return {
    finish() {
      if (stopped) return;
      stopped = true;
      complete();
    },
    stop() {
      stopped = true;
      clear();
    },
    pause: clear,
    resume: start,
  };
}
```


---

# Chip

> Monospace chip for code values and field names in text.

- **Slug:** `chip`
- **Kind:** atom · **Category:** Content
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/Chip.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/chip
- **All files in one bundle:** https://viewership.ai/design/components/chip.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/chip.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/chip/`:

   - `Chip.astro` (raw: https://viewership.ai/design/raw/chip/Chip.astro.txt)

npm packages: none.

## Usage

```astro
---
import Chip from "../components/viewership/chip/Chip.astro";
---

<Chip />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import Chip from "./Chip.astro";
---

<div class="card">
  <p>
    Every weekly report is keyed by <Chip>client_id</Chip> and pulled once per day. Set
    <Chip tone="accent">utm_campaign</Chip> before the draft goes out; if <Chip tone="orange">ga4_property</Chip>
    is missing, the report falls back to last week's source.
  </p>
  <p class="caption">Tokens · <Chip>brand_voice.yaml</Chip> · <Chip>draft_214</Chip></p>
</div>

<style>
  .card {
    max-width: 440px;
    margin: 0 auto;
    padding: 16px 18px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--vs-ink);
  }
  .caption {
    margin-top: 10px;
    font-size: 12px;
    color: var(--vs-ink-3);
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `"neutral" \| "accent" \| "orange"` | `"neutral"` | Background tint and text color. |

## Source

### `src/components/viewership/chip/Chip.astro`

```astro
---
/**
 * Chip: monospace token chip for code values like `utm_campaign`.
 *
 * Ported from Beautiful UI `components/atoms/Chip.tsx`
 * (MIT, © 2026 Shane Levine). Renders a <code> element.
 *
 * @example
 * Keyed by <Chip>client_id</Chip>
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"code"> & {
  tone?: "neutral" | "accent" | "orange";
};

const { tone = "neutral", class: className, ...rest } = Astro.props;
---

<code class:list={["vs-chip", `vs-chip--${tone}`, className]} {...rest}><slot /></code>

<style>
  .vs-chip {
    display: inline;
    padding: 2px 6px;
    border-radius: var(--vs-radius-chip);
    font-family: var(--vs-font-mono);
    font-size: 12px;
    line-height: 1;
    vertical-align: -1px;
  }
  .vs-chip--neutral {
    background: var(--vs-inset);
    color: var(--vs-ink-2);
  }
  .vs-chip--accent {
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
  }
  .vs-chip--orange {
    background: var(--vs-orange-tint);
    color: var(--vs-orange);
  }
  @media (forced-colors: active) {
    .vs-chip {
      outline: 1px solid CanvasText;
    }
  }
</style>
```


---

# Status Pill

> Tinted status label with a leading dot, in five tones.

- **Slug:** `status-pill`
- **Kind:** atom · **Category:** Feedback
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/StatusPill.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/status-pill
- **All files in one bundle:** https://viewership.ai/design/components/status-pill.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/status-pill.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/status-pill/`:

   - `StatusPill.astro` (raw: https://viewership.ai/design/raw/status-pill/StatusPill.astro.txt)

npm packages: none.

## Usage

```astro
---
import StatusPill from "../components/viewership/status-pill/StatusPill.astro";
---

<StatusPill />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import StatusPill from "./StatusPill.astro";

interface Props {
  variant?: string;
}
const { variant = "Campaigns" } = Astro.props;

const batches = [
  { id: "#214", lot: "Spring Search", status: "Live", tone: "green" },
  { id: "#215", lot: "Trail Test video", status: "In review", tone: "accent" },
  { id: "#216", lot: "Gear Guide email", status: "Needs approval", tone: "orange" },
  { id: "#217", lot: "Reddit AMA post", status: "Rejected", tone: "red" },
  { id: "#218", lot: "Summer promo", status: "Queued", tone: "neutral" },
] as const;
---

{variant === "Campaigns" && (
  <ul class="list" aria-label="This week's campaigns">
    {batches.map((b) => (
      <li class="item">
        <span class="id">{b.id}</span>
        <span class="lot">{b.lot}</span>
        <StatusPill tone={b.tone}>{b.status}</StatusPill>
      </li>
    ))}
  </ul>
)}

{variant === "Without dot" && (
  <div class="row">
    <StatusPill tone="green" dot={false}>Published</StatusPill>
    <StatusPill tone="accent" dot={false}>Client</StatusPill>
    <StatusPill tone="orange" dot={false}>Low budget</StatusPill>
    <StatusPill tone="red" dot={false}>Overdue</StatusPill>
    <StatusPill dot={false}>Draft</StatusPill>
  </div>
)}

<style>
  .list {
    max-width: 380px;
    margin: 0 auto;
    padding: 4px 16px;
    list-style: none;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 14px;
  }
  .item + .item {
    border-top: 1px solid var(--vs-line);
  }
  .id {
    width: 36px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--vs-ink-3);
  }
  .lot {
    flex: 1;
    min-width: 0;
    color: var(--vs-ink);
  }
  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
</style>
```

## Variants

Demo variants: `Campaigns`, `Without dot`.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `"green" \| "orange" \| "red" \| "accent" \| "neutral"` | `"neutral"` | Color. Maps to .vs-status-pill--<tone>. |
| `dot` | `boolean` | `true` | Show the leading dot. |

## Source

### `src/components/viewership/status-pill/StatusPill.astro`

```astro
---
/**
 * StatusPill: a tinted state label with a leading dot.
 *
 * Ported from Beautiful UI `components/atoms/StatusPill.tsx`
 * (MIT, © 2026 Shane Levine). Tones are modifier classes
 * (`.vs-status-pill--green`). The dot is decorative, so the text must carry
 * the state on its own.
 *
 * @example
 * <StatusPill tone="green">Published</StatusPill>
 */
import type { HTMLAttributes } from "astro/types";

type Tone = "green" | "orange" | "red" | "accent" | "neutral";

type Props = HTMLAttributes<"span"> & {
  tone?: Tone;
  /** Show the leading dot. */
  dot?: boolean;
};

const { tone = "neutral", dot = true, class: className, ...rest } = Astro.props;
---

<span class:list={["vs-status-pill", `vs-status-pill--${tone}`, className]} {...rest}>
  {dot && <span class="vs-status-pill__dot" aria-hidden="true"></span>}
  <slot />
</span>

<style>
  .vs-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--vs-radius-pill);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }
  .vs-status-pill__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: var(--vs-radius-pill);
    background: currentColor;
  }

  .vs-status-pill--green {
    background: var(--vs-green-tint);
    color: var(--vs-green);
  }
  .vs-status-pill--orange {
    background: var(--vs-orange-tint);
    color: var(--vs-orange);
  }
  .vs-status-pill--red {
    background: var(--vs-red-tint);
    color: var(--vs-red);
  }
  .vs-status-pill--accent {
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
  }
  .vs-status-pill--accent .vs-status-pill__dot {
    background: var(--vs-accent);
  }
  .vs-status-pill--neutral {
    background: var(--vs-inset);
    color: var(--vs-ink-2);
  }
  .vs-status-pill--neutral .vs-status-pill__dot {
    background: var(--vs-ink-3);
  }

  @media (forced-colors: active) {
    .vs-status-pill {
      outline: 1px solid CanvasText;
    }
    .vs-status-pill__dot {
      background: CanvasText;
    }
  }
</style>
```


---

# Segmented Control

> Equal-width segments with a sliding thumb, as a radio group.

- **Slug:** `segmented-control`
- **Kind:** atom · **Category:** Inputs
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/SegmentedControl.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/segmented-control
- **All files in one bundle:** https://viewership.ai/design/components/segmented-control.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/segmented-control.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/segmented-control/`:

   - `SegmentedControl.astro` (raw: https://viewership.ai/design/raw/segmented-control/SegmentedControl.astro.txt)

npm packages: none.

## Usage

```astro
---
import SegmentedControl from "../components/viewership/segmented-control/SegmentedControl.astro";
---

<SegmentedControl />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import SegmentedControl from "./SegmentedControl.astro";

const ranges = {
  Day: { kg: "64", note: "4 new since 6:30 am" },
  Week: { kg: "412", note: "27 new across 9 topics" },
  Month: { kg: "1,780", note: "112 new, 18 cited pages" },
};
---

<div class="card" data-seg-demo data-ranges={JSON.stringify(ranges)}>
  <div class="head">
    <span class="title">AI citations</span>
    <SegmentedControl label="Range" options={Object.keys(ranges)} value="Week" />
  </div>
  <p class="stat" aria-live="polite">
    <span class="kg" data-kg>{ranges.Week.kg}</span><span class="unit">cites</span>
    <span class="note" data-note>{ranges.Week.note}</span>
  </p>
  <div class="demo-foot">
    <span class="demo-label">Engine</span>
    <SegmentedControl label="Engine" options={[{ value: "chatgpt", label: "ChatGPT" }, { value: "perplexity", label: "Perplexity" }, { value: "gemini", label: "Gemini" }]} name="engine" />
  </div>
</div>

<script>
  const boot = () =>
    document.querySelectorAll<HTMLElement>("[data-seg-demo]:not([data-vs-ready])").forEach((demo) => {
      demo.dataset.vsReady = "";
      const ranges = JSON.parse(demo.dataset.ranges ?? "{}") as Record<string, { kg: string; note: string }>;
      const kg = demo.querySelector("[data-kg]");
      const note = demo.querySelector("[data-note]");
      demo.querySelector(".head")?.addEventListener("vs-change", (event) => {
        const range = ranges[(event as CustomEvent<{ value: string }>).detail.value];
        if (!range || !kg || !note) return;
        kg.textContent = range.kg;
        note.textContent = range.note;
      });
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .card {
    max-width: 380px;
    margin: 0 auto;
    padding: 16px 18px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vs-ink);
  }
  .stat {
    margin: 14px 0 16px;
    color: var(--vs-ink);
  }
  .kg {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .unit {
    margin-left: 4px;
    font-size: 14px;
    color: var(--vs-ink-2);
  }
  .note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--vs-ink-3);
  }
  .demo-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--vs-line);
  }
  .demo-label {
    font-size: 13px;
    color: var(--vs-ink-2);
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `(string \| { value: string; label: string })[]` |  | The segments, in order. |
| `value` | `string` |  | Selected value (default: first). |
| `label` | `string` |  | Accessible group name, or use aria-labelledby. |
| `name` | `string` |  | Form field name. Adds a hidden input. |
| `vs-change` | `CustomEvent<{ value: string; index: number }>` |  | Fires on selection. Root mirrors data-value. |

## Source

### `src/components/viewership/segmented-control/SegmentedControl.astro`

```astro
---
/**
 * SegmentedControl: equal-width segments with a sliding thumb.
 *
 * Ported from Beautiful UI `components/atoms/SegmentedControl.tsx`
 * (MIT, © 2026 Shane Levine). This is a WAI-ARIA radio group, not tabs:
 * one tab stop, arrow keys move and select, Home/End jump to the ends.
 *
 * The root fires a bubbling `vs-change` event with `detail: { value, index }`
 * and mirrors the value on `data-value`. Call `.click()` on an option to
 * select from script. Pass `name` to submit the value with a form.
 *
 * @example
 * <SegmentedControl label="Range" options={["Day", "Week", "Month"]} value="Week" />
 */
import type { HTMLAttributes } from "astro/types";

type Option = string | { value: string; label: string };

type Props = HTMLAttributes<"div"> & {
  /** Options, as plain strings or { value, label }. */
  options: Option[];
  /** Selected value. Defaults to the first option. */
  value?: string;
  /** Accessible name for the group (or pass aria-labelledby). */
  label?: string;
  /** Form field name; adds a hidden input carrying the value. */
  name?: string;
};

const { options, value, label, name, class: className, style, ...rest } = Astro.props;
const items = options.map((o) => (typeof o === "string" ? { value: o, label: o } : o));
const found = items.findIndex((o) => o.value === value);
const index = found === -1 ? 0 : found;
const rootStyle = [`--vs-seg-count: ${items.length}; --vs-seg-index: ${index}`, typeof style === "string" ? style : ""]
  .filter(Boolean)
  .join("; ");
---

<div
  class:list={["vs-segmented", className]}
  role="radiogroup"
  aria-label={label}
  data-value={items[index]?.value}
  style={rootStyle}
  {...rest}
>
  <span class="vs-segmented__thumb" aria-hidden="true"></span>
  {items.map((o, i) => (
    <button
      type="button"
      role="radio"
      class="vs-segmented__option"
      aria-checked={i === index ? "true" : "false"}
      tabindex={i === index ? 0 : -1}
      data-value={o.value}
    >
      {o.label}
    </button>
  ))}
  {name && <input type="hidden" name={name} value={items[index]?.value} />}
</div>

<script>
  function init(root: HTMLElement) {
    const options = () => Array.from(root.querySelectorAll<HTMLButtonElement>(".vs-segmented__option"));
    const input = root.querySelector<HTMLInputElement>("input[type=hidden]");

    const select = (index: number, focus: boolean) => {
      const list = options();
      const next = list[index];
      if (!next) return;
      if (focus) next.focus();
      if (next.getAttribute("aria-checked") === "true") return;
      list.forEach((option, i) => {
        option.setAttribute("aria-checked", String(i === index));
        option.tabIndex = i === index ? 0 : -1;
      });
      const value = next.dataset.value ?? "";
      root.style.setProperty("--vs-seg-index", String(index));
      root.dataset.value = value;
      if (input) input.value = value;
      root.dispatchEvent(new CustomEvent("vs-change", { bubbles: true, detail: { value, index } }));
    };

    root.addEventListener("click", (event) => {
      const option = (event.target as Element).closest<HTMLButtonElement>(".vs-segmented__option");
      if (option) select(options().indexOf(option), false);
    });

    root.addEventListener("keydown", (event) => {
      const list = options();
      const i = list.indexOf(event.target as HTMLButtonElement);
      if (i === -1) return;
      const last = list.length - 1;
      let next: number | null = null;
      if (event.key === "ArrowRight" || event.key === "ArrowDown") next = i === last ? 0 : i + 1;
      else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = i === 0 ? last : i - 1;
      else if (event.key === "Home") next = 0;
      else if (event.key === "End") next = last;
      if (next === null) return;
      event.preventDefault();
      select(next, true);
    });
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-segmented:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-segmented {
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(var(--vs-seg-count), 1fr);
    height: 32px;
    padding: 2px;
    box-sizing: border-box;
    border-radius: var(--vs-radius-pill);
    background: color-mix(in oklab, var(--vs-line) 60%, transparent);
    user-select: none;
  }
  .vs-segmented__thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc((100% - 4px) / var(--vs-seg-count));
    border-radius: var(--vs-radius-pill);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-hairline);
    transform: translateX(calc(var(--vs-seg-index) * 100%));
    transition: transform 200ms var(--vs-ease-out);
  }
  .vs-segmented__option {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 0 12px;
    border: none;
    border-radius: var(--vs-radius-pill);
    background: transparent;
    color: var(--vs-ink-3);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--vs-duration-fast) ease-out;
  }
  .vs-segmented__option:hover {
    color: var(--vs-ink-2);
  }
  .vs-segmented__option[aria-checked="true"] {
    color: var(--vs-ink);
  }
  .vs-segmented__option:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }

  @media (prefers-reduced-motion: reduce) {
    .vs-segmented__thumb {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .vs-segmented__thumb {
      outline: 2px solid Highlight;
    }
  }
</style>
```


---

# Switch

> On/off toggle on a native checkbox, in two sizes and two tones.

- **Slug:** `switch`
- **Kind:** atom · **Category:** Inputs
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/Switch.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/switch
- **All files in one bundle:** https://viewership.ai/design/components/switch.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/switch.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/switch/`:

   - `Switch.astro` (raw: https://viewership.ai/design/raw/switch/Switch.astro.txt)

npm packages: none.

## Usage

```astro
---
import Switch from "../components/viewership/switch/Switch.astro";
---

<Switch />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import Switch from "./Switch.astro";

interface Props {
  variant?: string;
}
const { variant = "Settings" } = Astro.props;
---

{variant === "Settings" && (
  <div class="card">
    <p class="title">Marketing automations</p>
    <div class="row">
      <div class="copy">
        <span class="name">Auto-send weekly report</span>
        <span class="hint">Email the GA4 and Ads summary every Monday.</span>
      </div>
      <Switch checked label="Auto-send weekly report" />
    </div>
    <div class="row">
      <div class="copy">
        <span class="name">Alert on new AI citations</span>
        <span class="hint">Post in Slack when ChatGPT cites a page.</span>
      </div>
      <Switch label="Alert on new AI citations" />
    </div>
    <div class="row">
      <div class="copy">
        <span class="name">Brand voice check</span>
        <span class="hint">Managed by the content lead.</span>
      </div>
      <Switch checked disabled label="Brand voice check" />
    </div>
  </div>
)}

{variant === "Compact" && (
  <div class="card compact">
    <p class="title">Citations table</p>
    <Switch size="sm" tone="accent" checked class="line" labelPosition="start">Show counts</Switch>
    <Switch size="sm" tone="accent" class="line" labelPosition="start">Hide competitors</Switch>
    <Switch size="sm" tone="accent" checked class="line" labelPosition="start">Group by engine</Switch>
  </div>
)}

<style>
  .card {
    max-width: 400px;
    margin: 0 auto;
    padding: 6px 18px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .compact {
    max-width: 260px;
    padding-bottom: 10px;
  }
  .title {
    margin: 10px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vs-ink);
  }
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
  }
  .row + .row {
    border-top: 1px solid var(--vs-line);
  }
  .copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .name {
    font-size: 14px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .hint {
    font-size: 12.5px;
    color: var(--vs-ink-3);
  }
  .compact .line {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: var(--vs-ink-2);
  }
</style>
```

## Variants

Demo variants: `Settings`, `Compact`.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `checked` | `boolean` | `false` | Initial state. |
| `disabled` | `boolean` | `false` | Disable the switch. |
| `name / value / id` | `string` |  | Passed to the native checkbox. |
| `label` | `string` |  | Accessible name if no visible label. |
| `size` | `"md" \| "sm"` | `"md"` | md 40×24; sm 30×18 (24px hit area). |
| `tone` | `"ink" \| "accent"` | `"ink"` | Track color when on. |
| `labelPosition` | `"start" \| "end"` | `"end"` | Slotted label position. |
| `change` | `Event` |  | Native change event. Read event.target.checked. |

## Used by

[Records Table](https://viewership.ai/design/components/records-table.md)

## Source

### `src/components/viewership/switch/Switch.astro`

```astro
---
/**
 * Switch: an on/off toggle on a native checkbox.
 *
 * Ported from Beautiful UI `components/atoms/Switch.tsx`
 * (MIT, © 2026 Shane Levine), plus the compact accent switch used by the
 * upstream RecordsTable (`size="sm" tone="accent"`).
 *
 * Built on `<input type="checkbox" role="switch">`: no script, Space toggles
 * it, it submits with forms, and it fires the native `change` event. The
 * default slot is the visible label; without one, pass `label`.
 *
 * @example
 * <Switch checked name="autoDraft">Auto-draft weekly report</Switch>
 */
import type { HTMLAttributes } from "astro/types";

type Props = Omit<HTMLAttributes<"label">, "for"> & {
  checked?: boolean;
  disabled?: boolean;
  name?: string;
  value?: string;
  /** id for the input (e.g. for aria-describedby targets elsewhere). */
  id?: string;
  /** Accessible name when there is no visible label in the slot. */
  label?: string;
  size?: "md" | "sm";
  /** Track color when on. */
  tone?: "ink" | "accent";
  /** Where the slotted label sits. */
  labelPosition?: "start" | "end";
};

const {
  checked = false,
  disabled = false,
  name,
  value,
  id,
  label,
  size = "md",
  tone = "ink",
  labelPosition = "end",
  class: className,
  ...rest
} = Astro.props;
const hasText = Astro.slots.has("default");
---

<label
  class:list={["vs-switch", `vs-switch--${size}`, `vs-switch--${tone}`, { "vs-switch--disabled": disabled }, className]}
  {...rest}
>
  {hasText && labelPosition === "start" && <span class="vs-switch__label"><slot /></span>}
  <span class="vs-switch__control">
    <input
      class="vs-switch__input"
      type="checkbox"
      role="switch"
      id={id}
      name={name}
      value={value}
      checked={checked}
      disabled={disabled}
      aria-label={hasText ? undefined : label}
    />
    <span class="vs-switch__track" aria-hidden="true"><span class="vs-switch__thumb"></span></span>
  </span>
  {hasText && labelPosition === "end" && <span class="vs-switch__label"><slot /></span>}
</label>

<style>
  .vs-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--vs-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .vs-switch--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .vs-switch__control {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
  }
  /* The real checkbox sits invisibly over the track (and pads small sizes to a 24px target). */
  .vs-switch__input {
    position: absolute;
    inset: -3px;
    z-index: 1;
    width: auto;
    height: auto;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }
  .vs-switch__track {
    position: relative;
    display: block;
    width: var(--vs-switch-w);
    height: var(--vs-switch-h);
    border-radius: var(--vs-radius-pill);
    background: var(--vs-line-strong);
    transition: background-color var(--vs-switch-duration) ease-out;
  }
  .vs-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--vs-switch-thumb);
    height: var(--vs-switch-thumb);
    border-radius: var(--vs-radius-pill);
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition:
      transform var(--vs-switch-duration) var(--vs-ease-out),
      background-color var(--vs-switch-duration) ease-out;
  }
  .vs-switch__input:checked + .vs-switch__track .vs-switch__thumb {
    transform: translateX(calc(var(--vs-switch-w) - var(--vs-switch-thumb) - 4px));
  }
  .vs-switch__input:focus-visible + .vs-switch__track {
    box-shadow: var(--vs-focus-ring);
  }

  /* Sizes */
  .vs-switch--md {
    --vs-switch-w: 40px;
    --vs-switch-h: 24px;
    --vs-switch-thumb: 20px;
    --vs-switch-duration: 200ms;
  }
  .vs-switch--sm {
    --vs-switch-w: 30px;
    --vs-switch-h: 18px;
    --vs-switch-thumb: 14px;
    --vs-switch-duration: 150ms;
    gap: 8px;
    font-size: 13px;
  }
  .vs-switch--sm .vs-switch__thumb {
    box-shadow: var(--vs-shadow-btn);
  }

  /* Tones */
  .vs-switch--ink .vs-switch__input:checked + .vs-switch__track {
    background: var(--vs-ink);
  }
  /* Keeps the thumb readable on the light ink track in dark mode. */
  .vs-switch--ink .vs-switch__input:checked + .vs-switch__track .vs-switch__thumb {
    background: var(--vs-ink-inverse);
  }
  .vs-switch--accent .vs-switch__input:checked + .vs-switch__track {
    background: var(--vs-accent);
  }

  @media (prefers-reduced-motion: reduce) {
    .vs-switch__track,
    .vs-switch__thumb {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .vs-switch__track,
    .vs-switch__thumb {
      forced-color-adjust: none;
    }
    .vs-switch .vs-switch__track {
      background: Canvas;
      outline: 1px solid CanvasText;
    }
    .vs-switch .vs-switch__thumb,
    .vs-switch .vs-switch__input:checked + .vs-switch__track .vs-switch__thumb {
      background: CanvasText;
    }
    .vs-switch .vs-switch__input:checked + .vs-switch__track {
      background: Highlight;
    }
  }
</style>
```


---

# Feature Cards

> Features as a joined index grid: numbered cells sharing hairlines, display-face titles, optional tags and links.

- **Slug:** `feature-cards`
- **Kind:** section · **Category:** Features
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/feature-cards
- **All files in one bundle:** https://viewership.ai/design/components/feature-cards.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/feature-cards.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/feature-cards/`:

   - `FeatureCards.astro` (raw: https://viewership.ai/design/raw/feature-cards/FeatureCards.astro.txt)

npm packages: none.

## Usage

```astro
---
import FeatureCards from "../components/viewership/feature-cards/FeatureCards.astro";
---

<FeatureCards />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FeatureCards from "./FeatureCards.astro";
---

<FeatureCards
  title="Six habits that"
  accent="make gear last."
  intro="No marketing gloss. This is what we do differently, and what it costs us to do it."
  items={[
    { title: "Repairs for life", body: "Send any pack back. We patch, re-stitch or replace the part and return it in two days.", tag: "Service", href: "#" },
    { title: "Small batches", body: "Forty runs a year, each sized to what we can inspect by hand.", tag: "Making" },
    { title: "Honest specs", body: "Weights, waterproof ratings and fabric sources on every product page.", tag: "Product" },
    { title: "Trail-tested", body: "A volunteer crew of guides signs off every design before it ships.", tag: "Making" },
    { title: "Ships from Duluth", body: "One warehouse, one team, orders out the same day before 2pm.", tag: "Service" },
    { title: "Resale built in", body: "Trade in a used piece and we refurbish and relist it.", tag: "Product", href: "#" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline, drawn in the theme's accent style. |
| `intro` | `string` |  | Paragraph set beside the headline on wide screens. |
| `items` | `{ title: string; body: string; tag?: string; href?: string }[]` |  | The features. Three or six fill the grid evenly. |
| `linkLabel` | `string` | `"Learn more"` | Text of the per-cell link. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/feature-cards/FeatureCards.astro`

```astro
---
/**
 * FeatureCards: features as a joined index grid. Cells share hairlines like a
 * spec sheet, each with a number, an optional tag, a display-face title and
 * an optional link. Hover tints the cell.
 *
 * @example
 * <FeatureCards title="Six habits that" accent="make gear last." items={[
 *   { title: "Repairs for life", body: "Send any pack back.", tag: "Service", href: "/repairs" },
 * ]} />
 */
interface Item {
  title: string;
  body: string;
  /** Short label in the top corner, e.g. a category. */
  tag?: string;
  /** Adds a "Learn more" link; the whole cell becomes clickable. */
  href?: string;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  items: Item[];
  /** Label for the per-cell link. */
  linkLabel?: string;
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, items, linkLabel = "Learn more", as: Heading = "h2", class: className } = Astro.props;
const num = (i: number) => String(i + 1).padStart(2, "0");
---

<section class:list={["vs-feature-cards", className]}>
  <div class="vs-feature-cards__inner">
    <header class="vs-feature-cards__head">
      <Heading class="vs-display vs-feature-cards__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {intro && <p class="vs-feature-cards__intro">{intro}</p>}
    </header>
    <ul class="vs-feature-cards__grid">
      {
        items.map((item, i) => (
          <li class="vs-feature-cards__cell">
            <div class="vs-feature-cards__meta">
              <span class="vs-feature-cards__num">{num(i)}</span>
              {item.tag && <span class="vs-feature-cards__tag">{item.tag}</span>}
            </div>
            <h3 class="vs-display vs-feature-cards__name">{item.title}</h3>
            <p class="vs-feature-cards__body">{item.body}</p>
            {item.href && (
              <a class="vs-feature-cards__link" href={item.href}>
                {linkLabel}
                <span class="vs-sr-only">: {item.title}</span>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M5 12h14" />
                  <path d="m12 5 7 7-7 7" />
                </svg>
              </a>
            )}
          </li>
        ))
      }
    </ul>
  </div>
</section>

<style>
  .vs-feature-cards {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-feature-cards__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-feature-cards__head {
    display: grid;
    gap: 1.25rem;
    align-items: end;
  }
  .vs-feature-cards__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-feature-cards__intro {
    max-width: 26rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  @container (min-width: 820px) {
    .vs-feature-cards__head {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      gap: 48px;
    }
  }

  /* The grid draws its hairlines with a 1px gap over a line-coloured ground. */
  .vs-feature-cards__grid {
    display: grid;
    gap: var(--vs-border-w);
    margin: clamp(32px, 6cqi, 64px) 0 0;
    padding: 0;
    list-style: none;
    border: var(--vs-border-w) solid var(--vs-line-strong);
    border-radius: var(--vs-radius-card);
    background: var(--vs-line-strong);
    overflow: hidden;
    box-shadow: var(--vs-pop-shadow, none);
  }
  @container (min-width: 560px) {
    .vs-feature-cards__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @container (min-width: 900px) {
    .vs-feature-cards__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .vs-feature-cards__cell {
    position: relative;
    display: flex;
    min-height: 260px;
    flex-direction: column;
    padding: clamp(20px, 3cqi, 32px);
    background: var(--vs-surface);
    transition: background-color var(--vs-duration) var(--vs-ease-out);
  }
  .vs-feature-cards__cell:hover {
    background: var(--vs-inset);
  }
  .vs-feature-cards__cell:hover .vs-feature-cards__num {
    color: var(--vs-accent-ink);
  }
  .vs-feature-cards__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 56px;
  }
  .vs-feature-cards__num {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--vs-ink-3);
    transition: color var(--vs-duration) var(--vs-ease-out);
  }
  .vs-feature-cards__tag {
    padding: 3px 10px;
    border: 1px solid var(--vs-line-strong);
    border-radius: var(--vs-radius-pill);
    font-size: 0.75rem;
    color: var(--vs-ink-2);
  }
  .vs-feature-cards__name {
    font-size: clamp(1.4rem, 2.6cqi, 1.75rem);
    line-height: 1.1;
  }
  .vs-feature-cards__body {
    margin: 10px 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-feature-cards__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: auto;
    padding-top: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--vs-ink);
    text-decoration: none;
  }
  .vs-feature-cards__link::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .vs-feature-cards__link svg {
    transition: transform var(--vs-duration) var(--vs-ease-out);
  }
  .vs-feature-cards__cell:hover .vs-feature-cards__link svg {
    transform: translateX(3px);
  }
  .vs-feature-cards__link:focus-visible {
    outline: none;
  }
  .vs-feature-cards__cell:has(.vs-feature-cards__link:focus-visible) {
    box-shadow: inset 0 0 0 2px var(--vs-accent);
  }
</style>
```


---

# Progress Ring

> Small progress ring with a count or glyph in the center.

- **Slug:** `progress-ring`
- **Kind:** atom · **Category:** Data
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/ProgressRing.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/progress-ring
- **All files in one bundle:** https://viewership.ai/design/components/progress-ring.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/progress-ring.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy these files into `src/components/viewership/progress-ring/`:

   - `ProgressRing.astro` (raw: https://viewership.ai/design/raw/progress-ring/ProgressRing.astro.txt)
   - `progress-ring.ts` (raw: https://viewership.ai/design/raw/progress-ring/progress-ring.ts.txt)

npm packages: none.

## Usage

```astro
---
import ProgressRing from "../components/viewership/progress-ring/ProgressRing.astro";
---

<ProgressRing />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import ProgressRing from "./ProgressRing.astro";
import Button from "../button/Button.astro";

const plan = [
  { lot: "Spring email", done: 5, total: 5, tone: "green", note: "Approved" },
  { lot: "Weekly report", done: 2, total: 5, tone: "orange", note: "In review", live: true },
  { lot: "Reddit replies", done: 1, total: 4, tone: "accent", note: "Next up" },
  { lot: "YouTube script", done: 1, total: 6, tone: "red", note: "Behind plan" },
] as const;
---

<div class="card" data-ring-demo>
  <div class="head">
    <span class="title">Today's content plan</span>
    <Button variant="secondary" size="xs" data-log>Log draft</Button>
  </div>
  <ul class="list">
    {plan.map((row) => (
      <li class="row">
        <ProgressRing
          progress={row.done / row.total}
          tone={row.tone}
          label={`${row.lot} drafts`}
          valueText={`${row.done} of ${row.total} drafts`}
          data-live={"live" in row ? "" : undefined}
          data-done={row.done}
          data-total={row.total}
        >
          {row.done}
        </ProgressRing>
        <span class="lot">{row.lot}</span>
        <span class="meta"><span data-count>{row.done}</span> of {row.total} · {row.note}</span>
      </li>
    ))}
  </ul>
</div>

<script>
  import { setProgressRing } from "./progress-ring";

  const boot = () =>
    document.querySelectorAll<HTMLElement>("[data-ring-demo]:not([data-vs-ready])").forEach((demo) => {
      demo.dataset.vsReady = "";
      const ring = demo.querySelector<HTMLElement>(".vs-progress-ring[data-live]");
      const count = ring?.closest(".row")?.querySelector("[data-count]");
      const button = demo.querySelector<HTMLButtonElement>("[data-log]");
      if (!ring || !button) return;
      const total = Number(ring.dataset.total);
      button.addEventListener("click", () => {
        const done = (Number(ring.dataset.done) + 1) % (total + 1);
        ring.dataset.done = String(done);
        setProgressRing(ring, done / total, `${done} of ${total} drafts`);
        const label = ring.querySelector(".vs-progress-ring__content");
        if (label) label.textContent = String(done);
        if (count) count.textContent = String(done);
      });
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .card {
    max-width: 380px;
    margin: 0 auto;
    padding: 14px 16px 6px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }
  .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vs-ink);
  }
  .list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
  }
  .row + .row {
    border-top: 1px solid var(--vs-line);
  }
  .lot {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--vs-ink);
  }
  .meta {
    font-size: 13px;
    color: var(--vs-ink-3);
    font-variant-numeric: tabular-nums;
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `progress` | `number` |  | 0 to 1. |
| `tone` | `"orange" \| "green" \| "red" \| "accent"` | `"orange"` | Arc color. |
| `size` | `number` | `28` | Diameter in px. |
| `stroke` | `number` | `2` | Stroke width in px. |
| `label` | `string` |  | Accessible name (or pass aria-labelledby). |
| `valueText` | `string` |  | Spoken value, e.g. "3 of 5 drafts". Center slot is visual only. |
| `setProgressRing(el, p, text?)` | `(el: HTMLElement, progress: number, valueText?: string) => void` |  | Animate to a new value and sync ARIA. |

## Source

### `src/components/viewership/progress-ring/ProgressRing.astro`

```astro
---
/**
 * ProgressRing: a small progress ring with content in the center; a task
 * badge.
 *
 * Ported from Beautiful UI `components/atoms/ProgressRing.tsx`
 * (MIT, © 2026 Shane Levine). A `progressbar` (0–100). The center slot is
 * visual, so describe it with `valueText` (e.g. "3 of 5 drafts").
 * Update from script with `setProgressRing(el, 0.6)` from `./progress-ring`.
 *
 * @example
 * <ProgressRing progress={0.6} tone="green" label="Report 214" valueText="3 of 5 steps">3</ProgressRing>
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span"> & {
  /** 0..1 */
  progress: number;
  tone?: "orange" | "green" | "red" | "accent";
  /** Diameter in px. */
  size?: number;
  /** Stroke width in px. */
  stroke?: number;
  /** Accessible name (or pass aria-labelledby). */
  label?: string;
  /** Human-readable value for assistive tech, e.g. "3 of 5 drafts". */
  valueText?: string;
};

const { progress, tone = "orange", size = 28, stroke = 2, label, valueText, class: className, style, ...rest } = Astro.props;
const p = Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 0));
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const rootStyle = [`width: ${size}px; height: ${size}px`, typeof style === "string" ? style : ""].filter(Boolean).join("; ");
---

<span
  class:list={["vs-progress-ring", `vs-progress-ring--${tone}`, className]}
  role="progressbar"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow={Math.round(p * 100)}
  aria-valuetext={valueText}
  aria-label={label}
  style={rootStyle}
  {...rest}
>
  <svg class="vs-progress-ring__svg" width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true">
    <circle class="vs-progress-ring__track" cx={size / 2} cy={size / 2} r={r} fill="none" stroke-width={stroke} />
    <circle
      class="vs-progress-ring__bar"
      cx={size / 2}
      cy={size / 2}
      r={r}
      fill="none"
      stroke-width={stroke}
      stroke-linecap="round"
      stroke-dasharray={c}
      stroke-dashoffset={c * (1 - p)}
    />
  </svg>
  <span class="vs-progress-ring__content" aria-hidden="true"><slot /></span>
</span>

<style>
  .vs-progress-ring {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  .vs-progress-ring__svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
  }
  .vs-progress-ring__track {
    stroke: var(--vs-line);
  }
  .vs-progress-ring__bar {
    stroke: var(--vs-ring-color);
    transition: stroke-dashoffset 400ms var(--vs-ease-out);
  }
  .vs-progress-ring__content {
    position: relative;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .vs-progress-ring--orange {
    --vs-ring-color: var(--vs-orange);
  }
  .vs-progress-ring--green {
    --vs-ring-color: var(--vs-green);
  }
  .vs-progress-ring--red {
    --vs-ring-color: var(--vs-red);
  }
  .vs-progress-ring--accent {
    --vs-ring-color: var(--vs-accent);
  }

  @media (prefers-reduced-motion: reduce) {
    .vs-progress-ring__bar {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .vs-progress-ring__track {
      stroke: GrayText;
    }
    .vs-progress-ring__bar {
      stroke: Highlight;
    }
  }
</style>
```

### `src/components/viewership/progress-ring/progress-ring.ts`

```ts
/**
 * progress-ring: update a <ProgressRing> from script.
 *
 * Ported from Beautiful UI `components/atoms/ProgressRing.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 *   setProgressRing(ringEl, 0.6, "3 of 5 drafts");
 *
 * Animates the arc and syncs aria-valuenow and aria-valuetext. Update the
 * center content yourself.
 */
export function setProgressRing(root: HTMLElement, progress: number, valueText?: string): void {
  const p = Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 0));
  const bar = root.querySelector<SVGCircleElement>(".vs-progress-ring__bar");
  if (bar) {
    const c = 2 * Math.PI * bar.r.baseVal.value;
    bar.style.strokeDasharray = String(c);
    bar.style.strokeDashoffset = String(c * (1 - p));
  }
  root.setAttribute("aria-valuenow", String(Math.round(p * 100)));
  if (valueText !== undefined) root.setAttribute("aria-valuetext", valueText);
}
```


---

# Feature Rules

> Headline pinned left, numbered features ruled like an index on the right.

- **Slug:** `feature-rules`
- **Kind:** section · **Category:** Features
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/feature-rules
- **All files in one bundle:** https://viewership.ai/design/components/feature-rules.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/feature-rules.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/feature-rules/`:

   - `FeatureRules.astro` (raw: https://viewership.ai/design/raw/feature-rules/FeatureRules.astro.txt)

npm packages: none.

## Usage

```astro
---
import FeatureRules from "../components/viewership/feature-rules/FeatureRules.astro";
---

<FeatureRules />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FeatureRules from "./FeatureRules.astro";
---

<FeatureRules
  title="How we"
  accent="make things last."
  intro="Five rules every product passes before it carries our name."
  items={[
    { title: "Design for the repair bench", body: "Every seam and zip can be replaced with hand tools. If it cannot be fixed, it does not ship." },
    { title: "Cut in small batches", body: "Forty runs a year, each sized to what we can inspect by hand before it leaves Duluth." },
    { title: "Publish the real specs", body: "Weights, ratings and mill names on every product page, measured by us, not the supplier." },
    { title: "Test with people who go far", body: "A volunteer crew of guides carries every prototype for a full season." },
    { title: "Take it back when you are done", body: "Trade-ins are refurbished and resold, so nothing we make ends up as landfill." },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline, drawn in the theme's accent style. |
| `intro` | `string` |  | Supporting paragraph under the headline. |
| `items` | `{ title: string; body: string }[]` |  | The features, numbered in order. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/feature-rules/FeatureRules.astro`

```astro
---
/**
 * FeatureRules: headline pinned on the left, numbered rows ruled like an
 * index on the right. Reads well with longer descriptions.
 *
 * @example
 * <FeatureRules title="How we" accent="make things last." items={[{ title: "Repairs", body: "..." }]} />
 */
interface Item {
  title: string;
  body: string;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  items: Item[];
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, items, as: Heading = "h2", class: className } = Astro.props;
const num = (i: number) => String(i + 1).padStart(2, "0");
---

<section class:list={["vs-feature-rules", className]}>
  <div class="vs-feature-rules__inner">
    <header class="vs-feature-rules__head">
      <Heading class="vs-display vs-feature-rules__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {intro && <p class="vs-feature-rules__intro">{intro}</p>}
    </header>
    <ol class="vs-feature-rules__list">
      {
        items.map((item, i) => (
          <li class="vs-feature-rules__row">
            <span class="vs-display vs-feature-rules__num" aria-hidden="true">{num(i)}</span>
            <div>
              <h3 class="vs-feature-rules__name">{item.title}</h3>
              <p class="vs-feature-rules__body">{item.body}</p>
            </div>
          </li>
        ))
      }
    </ol>
  </div>
</section>

<style>
  .vs-feature-rules {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-feature-rules__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-feature-rules__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-feature-rules__intro {
    max-width: 30rem;
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-feature-rules__list {
    margin: clamp(32px, 6cqi, 64px) 0 0;
    padding: 0;
    list-style: none;
    border-top: calc(var(--vs-border-w) + 1px) solid var(--vs-ink);
  }
  .vs-feature-rules__row {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 12px;
    padding: 22px 0;
    border-bottom: var(--vs-border-w) solid var(--vs-line-strong);
  }
  .vs-feature-rules__num {
    font-size: 1.5rem;
    color: var(--vs-ink-3);
    font-variant-numeric: tabular-nums;
  }
  .vs-feature-rules__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .vs-feature-rules__body {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  @container (min-width: 820px) {
    .vs-feature-rules__inner {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: clamp(32px, 6cqi, 80px);
      align-items: start;
    }
    .vs-feature-rules__head {
      position: sticky;
      top: 24px;
    }
    .vs-feature-rules__list {
      margin-top: 0;
    }
  }
</style>
```


---

# Text Row

> Label on the left, value and optional meta on the right.

- **Slug:** `text-row`
- **Kind:** atom · **Category:** Data
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/TextRow.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/text-row
- **All files in one bundle:** https://viewership.ai/design/components/text-row.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/text-row.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/text-row/`:

   - `TextRow.astro` (raw: https://viewership.ai/design/raw/text-row/TextRow.astro.txt)

npm packages: none.

## Usage

```astro
---
import TextRow from "../components/viewership/text-row/TextRow.astro";
---

<TextRow />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import TextRow from "./TextRow.astro";
---

<div class="card">
  <div class="head">
    <span class="title">Northwind · Week 41</span>
    <span class="sub">Report sent Mon, Oct 6</span>
  </div>
  <div class="rows">
    <TextRow label="Sessions" value="48,210" />
    <TextRow label="Conversions" value="1,204" meta="+8%" />
    <TextRow label="Ads ROAS" value="4.1x" meta="+0.3" />
    <TextRow label="AI citations">
      <span slot="value" class="score">37</span>
      <span slot="meta" class="up">+5</span>
    </TextRow>
  </div>
</div>

<style>
  .card {
    max-width: 360px;
    margin: 0 auto;
    padding: 14px 16px 4px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 6px;
  }
  .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vs-ink);
  }
  .sub {
    font-size: 12px;
    color: var(--vs-ink-3);
  }
  .rows > :global(* + *) {
    border-top: 1px solid var(--vs-line);
  }
  .score {
    font-weight: 600;
  }
  .up {
    color: var(--vs-green);
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` |  | Label. Or use the label slot. |
| `value` | `string` |  | Value, tabular figures. Or use the value slot. |
| `meta` | `string` |  | Muted note, like a delta. Or use the meta slot. |

## Source

### `src/components/viewership/text-row/TextRow.astro`

```astro
---
/**
 * TextRow: label on the left, value and optional meta on the right.
 *
 * Ported from Beautiful UI `components/atoms/TextRow.tsx`
 * (MIT, © 2026 Shane Levine). Pass strings as props, or use the `label`,
 * `value` and `meta` slots. Rows draw no dividers; the parent does.
 *
 * @example
 * <TextRow label="Organic sessions" value="48,210" meta="+12%" />
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & {
  label?: string;
  value?: string;
  meta?: string;
};

const { label, value, meta, class: className, ...rest } = Astro.props;
const hasMeta = meta !== undefined || Astro.slots.has("meta");
---

<div class:list={["vs-text-row", className]} {...rest}>
  <span class="vs-text-row__label"><slot name="label">{label}</slot></span>
  <span class="vs-text-row__end">
    <span class="vs-text-row__value"><slot name="value">{value}</slot></span>
    {hasMeta && <span class="vs-text-row__meta"><slot name="meta">{meta}</slot></span>}
  </span>
</div>

<style>
  .vs-text-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 8px 0;
    box-sizing: border-box;
  }
  .vs-text-row__label {
    font-size: 14px;
    color: var(--vs-ink-2);
  }
  .vs-text-row__end {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-align: right;
  }
  .vs-text-row__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--vs-ink);
    font-variant-numeric: tabular-nums;
  }
  .vs-text-row__meta {
    font-size: 13px;
    color: var(--vs-ink-3);
  }
</style>
```


---

# Feature Bento

> One large accent tile, three light tiles and a dark closer. Built for five features, with optional figures.

- **Slug:** `feature-bento`
- **Kind:** section · **Category:** Features
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/feature-bento
- **All files in one bundle:** https://viewership.ai/design/components/feature-bento.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/feature-bento.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/feature-bento/`:

   - `FeatureBento.astro` (raw: https://viewership.ai/design/raw/feature-bento/FeatureBento.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `icon`: `Icon.astro`, `icons.ts` (docs: https://viewership.ai/design/components/icon.md)

npm packages: none.

## Usage

```astro
---
import FeatureBento from "../components/viewership/feature-bento/FeatureBento.astro";
---

<FeatureBento />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FeatureBento from "./FeatureBento.astro";
---

<FeatureBento
  title="Built to"
  accent="outlast the trend."
  items={[
    { title: "Repairs for life", body: "Send any pack back. We patch, re-stitch or replace the part and return it fast.", icon: "shield", stat: "2 days" },
    { title: "Small batches", body: "Forty runs a year, each inspected by hand.", icon: "layers" },
    { title: "Honest specs", body: "Weights and ratings measured by us.", icon: "chart" },
    { title: "Trail-tested", body: "Guides carry every prototype for a season.", icon: "users" },
    { title: "Resale built in", body: "Trade in, we refurbish, someone else heads out.", icon: "globe" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline, drawn in the theme's accent style. |
| `intro` | `string` |  | Supporting paragraph. |
| `items` | `{ title: string; body: string; icon?: IconName; stat?: string }[]` |  | Five features; the first leads. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/feature-bento/FeatureBento.astro`

```astro
---
/**
 * FeatureBento: one large accent tile and four smaller ones. Built for five
 * items; the first leads. Icons are optional.
 *
 * @example
 * <FeatureBento title="Built to" accent="outlast the trend." items={[
 *   { title: "Repairs for life", body: "...", icon: "shield" },
 * ]} />
 */
import Icon from "../icon/Icon.astro";
import type { IconName } from "../icon/icons";

interface Item {
  title: string;
  body: string;
  icon?: IconName;
  /** A figure set large in the tile, e.g. "2 days". */
  stat?: string;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  items: Item[];
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, items, as: Heading = "h2", class: className } = Astro.props;
---

<section class:list={["vs-feature-bento", className]}>
  <div class="vs-feature-bento__inner">
    <header>
      <Heading class="vs-display vs-feature-bento__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {intro && <p class="vs-feature-bento__intro">{intro}</p>}
    </header>
    <ul class="vs-feature-bento__grid">
      {
        items.map((item) => (
          <li class="vs-feature-bento__tile">
            {item.icon && (
              <span class="vs-feature-bento__icon">
                <Icon name={item.icon} size={20} />
              </span>
            )}
            <div class="vs-feature-bento__text">
              {item.stat && <p class="vs-display vs-feature-bento__stat">{item.stat}</p>}
              <h3 class="vs-feature-bento__name">{item.title}</h3>
              <p class="vs-feature-bento__body">{item.body}</p>
            </div>
          </li>
        ))
      }
    </ul>
  </div>
</section>

<style>
  .vs-feature-bento {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-feature-bento__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-feature-bento__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-feature-bento__intro {
    max-width: 32rem;
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-feature-bento__grid {
    display: grid;
    gap: 12px;
    margin: clamp(32px, 6cqi, 64px) 0 0;
    padding: 0;
    list-style: none;
  }
  .vs-feature-bento__tile {
    display: flex;
    min-height: 180px;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border: var(--vs-border-w) solid var(--vs-line);
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-sm);
  }
  .vs-feature-bento__icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vs-line-strong);
    border-radius: var(--vs-radius-pill);
    color: var(--vs-ink);
  }
  .vs-feature-bento__stat {
    margin-bottom: 12px;
    font-size: clamp(2.5rem, 6cqi, 4rem);
    line-height: 0.95;
  }
  .vs-feature-bento__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .vs-feature-bento__body {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }

  /* The lead tile */
  .vs-feature-bento__tile:first-child {
    min-height: 300px;
    border-color: var(--vs-accent);
    background: var(--vs-accent);
    color: var(--vs-on-accent);
    box-shadow: var(--vs-pop-shadow, var(--vs-shadow-sm));
  }
  .vs-feature-bento__tile:first-child .vs-feature-bento__body {
    color: inherit;
    opacity: 0.85;
  }
  .vs-feature-bento__tile:first-child .vs-feature-bento__name {
    font-size: 1.5rem;
  }
  .vs-feature-bento__tile:first-child .vs-feature-bento__icon {
    border-color: color-mix(in srgb, var(--vs-on-accent) 40%, transparent);
    color: inherit;
  }
  /* The last tile goes dark for rhythm */
  .vs-feature-bento__tile:last-child:not(:first-child) {
    border-color: var(--vs-ink);
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
  }
  .vs-feature-bento__tile:last-child:not(:first-child) .vs-feature-bento__body {
    color: inherit;
    opacity: 0.7;
  }
  .vs-feature-bento__tile:last-child:not(:first-child) .vs-feature-bento__icon {
    border-color: color-mix(in srgb, var(--vs-ink-inverse) 35%, transparent);
    color: inherit;
  }

  @container (min-width: 620px) {
    .vs-feature-bento__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .vs-feature-bento__tile:first-child {
      grid-row: span 2;
    }
  }
  @container (min-width: 900px) {
    .vs-feature-bento__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .vs-feature-bento__tile:first-child {
      grid-column: span 2;
    }
  }
</style>
```


---

# Feature Alternating

> Image and copy rows that swap sides as you scroll, for features that each deserve a picture.

- **Slug:** `feature-alternating`
- **Kind:** section · **Category:** Features
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/feature-alternating
- **All files in one bundle:** https://viewership.ai/design/components/feature-alternating.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/feature-alternating.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/feature-alternating/`:

   - `FeatureAlternating.astro` (raw: https://viewership.ai/design/raw/feature-alternating/FeatureAlternating.astro.txt)

npm packages: none.

## Usage

```astro
---
import FeatureAlternating from "../components/viewership/feature-alternating/FeatureAlternating.astro";
---

<FeatureAlternating />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FeatureAlternating from "./FeatureAlternating.astro";
---

<FeatureAlternating
  items={[
    {
      kicker: "Made",
      title: "Mapped from the mill to your pack.",
      body: "Every product page lists where the fabric was woven, cut and sewn, with the batch number printed inside the lid.",
      image: { src: "/ui/demo/contours.webp", alt: "Topographic contour map", width: 1600, height: 1100 },
      link: { label: "See our mills", href: "#" },
    },
    {
      kicker: "Tested",
      title: "Carried for a season before it ships.",
      body: "Guides take each prototype out from first thaw to first snow, then tell us what broke.",
      image: { src: "/ui/demo/halftone-sun.webp", alt: "Halftone sun over the horizon", width: 1200, height: 1200 },
      link: { label: "Meet the crew", href: "#" },
    },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Optional section headline. Without it, row titles use `as`. |
| `accent` | `string` |  | Closing words of the headline. |
| `items` | `{ title: string; body: string; image: { src; alt; width?; height? }; kicker?: string; link?: { label; href } }[]` |  | Rows, in order. Even rows put the image on the right. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/feature-alternating/FeatureAlternating.astro`

```astro
---
/**
 * FeatureAlternating: media and copy in rows that swap sides, for features
 * that each deserve a picture. Rows stack on narrow widths.
 *
 * @example
 * <FeatureAlternating items={[
 *   { kicker: "01", title: "Mapped from the mill", body: "...",
 *     image: { src: "/map.webp", alt: "Contour map" }, link: { label: "See the mills", href: "/mills" } },
 * ]} />
 */
interface Picture {
  src: string;
  alt: string;
  width?: number;
  height?: number;
}
interface Link {
  label: string;
  href: string;
}
interface Item {
  title: string;
  body: string;
  image: Picture;
  /** Short label above the row title, e.g. a step number. */
  kicker?: string;
  link?: Link;
}
interface Props {
  title?: string;
  accent?: string;
  items: Item[];
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, items, as: Heading = "h2", class: className } = Astro.props;
const RowHeading = title ? "h3" : Heading;
---

<section class:list={["vs-feature-alt", className]}>
  <div class="vs-feature-alt__inner">
    {title && <Heading class="vs-display vs-feature-alt__title">{title}{accent && <> <em>{accent}</em></>}</Heading>}
    <div class="vs-feature-alt__rows">
      {
        items.map((item) => (
          <article class="vs-feature-alt__row">
            <div class="vs-feature-alt__media">
              <img src={item.image.src} alt={item.image.alt} width={item.image.width} height={item.image.height} loading="lazy" />
            </div>
            <div class="vs-feature-alt__copy">
              {item.kicker && <p class="vs-feature-alt__kicker">{item.kicker}</p>}
              <RowHeading class="vs-display vs-feature-alt__name">{item.title}</RowHeading>
              <p class="vs-feature-alt__body">{item.body}</p>
              {item.link && (
                <a class="vs-feature-alt__link" href={item.link.href}>
                  {item.link.label}
                </a>
              )}
            </div>
          </article>
        ))
      }
    </div>
  </div>
</section>

<style>
  .vs-feature-alt {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-feature-alt__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-feature-alt__title {
    margin-bottom: clamp(32px, 6cqi, 72px);
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-feature-alt__rows {
    display: grid;
    gap: clamp(48px, 9cqi, 112px);
  }
  .vs-feature-alt__row {
    display: grid;
    gap: clamp(24px, 5cqi, 64px);
    align-items: center;
  }
  .vs-feature-alt__media {
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border: var(--vs-border-w) solid var(--vs-line);
    border-radius: var(--vs-radius-card);
    background: var(--vs-canvas);
    box-shadow: var(--vs-pop-shadow, none);
  }
  .vs-feature-alt__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .vs-feature-alt__kicker {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--vs-accent-ink);
  }
  .vs-feature-alt__name {
    font-size: clamp(1.75rem, 4.5cqi, 3rem);
  }
  .vs-feature-alt__body {
    max-width: 28rem;
    margin: 1rem 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--vs-ink-2);
  }
  .vs-feature-alt__link {
    display: inline-block;
    margin-top: 1.5rem;
    padding-bottom: 2px;
    border-bottom: calc(var(--vs-border-w) + 1px) solid var(--vs-accent);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--vs-ink);
    text-decoration: none;
  }
  .vs-feature-alt__link:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  @container (min-width: 760px) {
    .vs-feature-alt__row {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
    .vs-feature-alt__row:nth-child(even) .vs-feature-alt__media {
      order: 2;
    }
    .vs-feature-alt__row:nth-child(even) {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
  }
</style>
```


---

# Overlay core

> Positioning, dismissal, focus-trap and roving-focus helpers for popovers, menus and dialogs.

- **Slug:** `overlay`
- **Kind:** atom · **Category:** Overlays
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/overlay
- **All files in one bundle:** https://viewership.ai/design/components/overlay.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/overlay.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/overlay/`:

   - `overlay.ts` (raw: https://viewership.ai/design/raw/overlay/overlay.ts.txt)

npm packages: none.

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
/** Demo: one anchored panel, re-placed on each side. Scroll a trigger to the edge to see flip and shift. */
interface Props {
  variant?: string;
}
const { variant = "Placement" } = Astro.props;
const placements = ["top", "right", "bottom", "left"] as const;
---

<div class="vs-overlay-demo" data-variant={variant}>
  <div class="row">
    {placements.map((p) => (
      <button type="button" class="trigger" data-placement={p} aria-expanded="false">
        {p}
      </button>
    ))}
  </div>
  <div class="panel" popover="manual" role="dialog" aria-label="Draft note">
    <p class="title">Spring launch draft</p>
    <p class="body">Brand voice checked. Waiting on editor approval.</p>
  </div>
</div>

<script>
  import { computePosition, autoUpdate, onDismiss, type Placement } from "./overlay";

  document.querySelectorAll<HTMLElement>(".vs-overlay-demo:not([data-vs-ready])").forEach((root) => {
    root.dataset.vsReady = "";
    const panel = root.querySelector<HTMLElement>(".panel")!;
    let cleanup: Array<() => void> = [];
    let openFor: HTMLElement | null = null;

    const close = () => {
      cleanup.forEach((fn) => fn());
      cleanup = [];
      openFor?.setAttribute("aria-expanded", "false");
      openFor = null;
      panel.hidePopover();
    };

    root.querySelectorAll<HTMLElement>(".trigger").forEach((trigger) => {
      trigger.addEventListener("click", () => {
        const same = openFor === trigger;
        close();
        if (same) return;
        openFor = trigger;
        trigger.setAttribute("aria-expanded", "true");
        panel.showPopover();
        const placement = trigger.dataset.placement as Placement;
        cleanup.push(autoUpdate(trigger, panel, () => computePosition(trigger, panel, { placement, offset: 8 })));
        cleanup.push(onDismiss(panel, close, { inside: [trigger] }));
      });
    });
  });
</script>

<style>
  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .trigger {
    height: 30px;
    padding: 0 14px;
    border: none;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-btn);
    color: var(--vs-ink);
    font: inherit;
    font-size: 13px;
    text-transform: capitalize;
    cursor: pointer;
  }
  .trigger[aria-expanded="true"] {
    background: var(--vs-hover);
  }
  .trigger:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .panel {
    width: 220px;
    padding: 10px 12px;
    border: none;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-overlay);
    color: var(--vs-ink);
    animation: vs-pop-in 160ms var(--vs-ease-out) both;
  }
  .title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
  }
  .body {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--vs-ink-2);
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `computePosition(anchor, floating, opts)` | `function` |  | Places a fixed element beside its anchor with flip and shift. |
| `autoUpdate(anchor, floating, update)` | `function` |  | Re-runs `update` on scroll and resize. Returns cleanup. |
| `onDismiss(el, dismiss, opts)` | `function` |  | Escape, outside-pointer and focus-out dismissal. Returns cleanup. |
| `trapFocus(container, opts)` | `function` |  | Contains Tab focus. Release restores prior focus. |
| `rovingFocus(container, opts)` | `function` |  | Arrow/Home/End navigation with typeahead. |
| `uid(prefix)` | `function` |  | Unique id for ARIA wiring. |

## Source

### `src/components/viewership/overlay/overlay.ts`

```ts
/**
 * overlay: shared behaviour for floating and modal components (popover,
 * tooltip, select, combobox, menus, dialogs). Framework-free:
 *   - computePosition / autoUpdate   anchor positioning with flip + shift
 *   - onDismiss                      Escape + outside-pointer dismissal
 *   - trapFocus                      modal focus containment + restore
 *   - rovingFocus                    arrow-key navigation + typeahead
 *   - uid                            stable ids for aria wiring
 *
 * Put floating elements in the top layer (Popover API or modal <dialog>) so
 * ancestors cannot clip them. Positions are viewport coordinates (fixed).
 */

export type Side = "top" | "right" | "bottom" | "left";
export type Align = "start" | "center" | "end";
export type Placement = Side | `${Side}-${Align}`;

export interface PositionOptions {
  placement?: Placement;
  /** Gap between anchor and floating element, px. */
  offset?: number;
  /** Minimum distance from the viewport edge, px. */
  padding?: number;
  /** Flip to the opposite side when the preferred side does not fit. */
  flip?: boolean;
  /** Slide along the cross axis to stay inside the viewport. */
  shift?: boolean;
  /** Match the anchor's width (select/combobox listboxes). */
  matchWidth?: boolean;
}

export interface PositionResult {
  x: number;
  y: number;
  side: Side;
  align: Align;
}

const OPPOSITE: Record<Side, Side> = { top: "bottom", bottom: "top", left: "right", right: "left" };

function split(p: Placement): [Side, Align] {
  const [side, align = "center"] = p.split("-") as [Side, Align?];
  return [side, align as Align];
}

function coords(a: DOMRect, f: { width: number; height: number }, side: Side, align: Align, offset: number) {
  const vertical = side === "top" || side === "bottom";
  let x = 0;
  let y = 0;
  if (vertical) {
    y = side === "bottom" ? a.bottom + offset : a.top - f.height - offset;
    x = align === "start" ? a.left : align === "end" ? a.right - f.width : a.left + (a.width - f.width) / 2;
  } else {
    x = side === "right" ? a.right + offset : a.left - f.width - offset;
    y = align === "start" ? a.top : align === "end" ? a.bottom - f.height : a.top + (a.height - f.height) / 2;
  }
  return { x, y };
}

function fits(side: Side, a: DOMRect, f: { width: number; height: number }, offset: number, pad: number) {
  const vw = window.innerWidth;
  const vh = window.innerHeight;
  switch (side) {
    case "bottom": return a.bottom + offset + f.height <= vh - pad;
    case "top": return a.top - offset - f.height >= pad;
    case "right": return a.right + offset + f.width <= vw - pad;
    case "left": return a.left - offset - f.width >= pad;
  }
}

/**
 * Positions `floating` next to `anchor` and writes `left/top` (fixed) plus
 * `data-side` / `data-align` (for direction-aware animations and arrows).
 */
export function computePosition(anchor: Element, floating: HTMLElement, opts: PositionOptions = {}): PositionResult {
  const { placement = "bottom", offset = 6, padding = 8, flip = true, shift = true, matchWidth = false } = opts;
  const a = anchor.getBoundingClientRect();

  floating.style.position = "fixed";
  floating.style.margin = "0";
  if (matchWidth) floating.style.minWidth = `${a.width}px`;
  const f = { width: floating.offsetWidth, height: floating.offsetHeight };

  let [side, align] = split(placement);
  if (flip && !fits(side, a, f, offset, padding) && fits(OPPOSITE[side], a, f, offset, padding)) {
    side = OPPOSITE[side];
  }
  let { x, y } = coords(a, f, side, align, offset);

  if (shift) {
    const maxX = window.innerWidth - f.width - padding;
    const maxY = window.innerHeight - f.height - padding;
    x = Math.min(Math.max(x, padding), Math.max(padding, maxX));
    y = Math.min(Math.max(y, padding), Math.max(padding, maxY));
  }

  floating.style.left = `${Math.round(x)}px`;
  floating.style.top = `${Math.round(y)}px`;
  floating.dataset.side = side;
  floating.dataset.align = align;
  // Transform origin points back at the anchor, for scale-in animations.
  const vertical = side === "top" || side === "bottom";
  const cross = align === "center" ? "center" : vertical ? (align === "start" ? "left" : "right") : align === "start" ? "top" : "bottom";
  floating.style.transformOrigin = `${OPPOSITE[side]} ${cross}`;
  return { x, y, side, align };
}

/**
 * Keeps a floating element positioned while open: on scroll (any ancestor),
 * resize, and size changes of either element. Returns a cleanup function.
 */
export function autoUpdate(anchor: Element, floating: HTMLElement, update: () => void): () => void {
  let frame = 0;
  const schedule = () => {
    cancelAnimationFrame(frame);
    frame = requestAnimationFrame(update);
  };
  window.addEventListener("scroll", schedule, { capture: true, passive: true });
  window.addEventListener("resize", schedule, { passive: true });
  const ro = new ResizeObserver(schedule);
  ro.observe(anchor);
  ro.observe(floating);
  update();
  return () => {
    cancelAnimationFrame(frame);
    window.removeEventListener("scroll", schedule, { capture: true });
    window.removeEventListener("resize", schedule);
    ro.disconnect();
  };
}

export interface DismissOptions {
  /** Elements that count as "inside" (e.g. the trigger). */
  inside?: Array<Element | null | undefined>;
  escape?: boolean;
  outsidePointer?: boolean;
  /** Close when focus moves outside (non-modal popovers). */
  focusOut?: boolean;
}

/**
 * Calls `dismiss(reason)` on Escape or a pointerdown outside `el` and
 * `inside`. Returns a cleanup function.
 */
export function onDismiss(
  el: HTMLElement,
  dismiss: (reason: "escape" | "outside" | "focusout") => void,
  { inside = [], escape = true, outsidePointer = true, focusOut = false }: DismissOptions = {},
): () => void {
  const isInside = (t: EventTarget | null) =>
    t instanceof Node && (el.contains(t) || inside.some((i) => i && i.contains(t)));

  const onKey = (e: KeyboardEvent) => {
    if (escape && e.key === "Escape" && !e.defaultPrevented) {
      e.preventDefault();
      dismiss("escape");
    }
  };
  const onPointer = (e: PointerEvent) => {
    if (outsidePointer && !isInside(e.target)) dismiss("outside");
  };
  const onFocus = (e: FocusEvent) => {
    if (focusOut && !isInside(e.target)) dismiss("focusout");
  };
  document.addEventListener("keydown", onKey);
  document.addEventListener("pointerdown", onPointer, true);
  document.addEventListener("focusin", onFocus);
  return () => {
    document.removeEventListener("keydown", onKey);
    document.removeEventListener("pointerdown", onPointer, true);
    document.removeEventListener("focusin", onFocus);
  };
}

const FOCUSABLE =
  'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';

function focusables(container: ParentNode): HTMLElement[] {
  return [...container.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(
    (el) => !el.closest("[inert]") && el.getClientRects().length > 0,
  );
}

/**
 * Contains Tab focus within `container` (for modal surfaces not using a
 * modal <dialog>, which traps natively). Returns a release function that
 * restores focus to whatever was focused before.
 */
export function trapFocus(container: HTMLElement, { initial }: { initial?: HTMLElement | null } = {}): () => void {
  const previous = document.activeElement as HTMLElement | null;
  (initial ?? focusables(container)[0] ?? container).focus({ preventScroll: true });

  const onKey = (e: KeyboardEvent) => {
    if (e.key !== "Tab") return;
    const items = focusables(container);
    if (!items.length) {
      e.preventDefault();
      return;
    }
    const first = items[0];
    const last = items[items.length - 1];
    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault();
      last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault();
      first.focus();
    }
  };
  container.addEventListener("keydown", onKey);
  return () => {
    container.removeEventListener("keydown", onKey);
    previous?.focus?.({ preventScroll: true });
  };
}

export interface RovingOptions {
  /** Selector for navigable items within the container. */
  items: string;
  orientation?: "vertical" | "horizontal" | "both";
  loop?: boolean;
  /** Type characters to jump to the item whose text starts with them. */
  typeahead?: boolean;
  /**
   * "focus": move real focus with a roving tabindex (menus, toolbars, tabs).
   * "active": keep focus on the container/input and move aria-activedescendant
   * (listboxes driven from a combobox input).
   */
  mode?: "focus" | "active";
  /** Element that receives aria-activedescendant in "active" mode. */
  controller?: HTMLElement;
  onMove?: (item: HTMLElement) => void;
}

/**
 * Arrow-key / Home / End navigation with optional typeahead.
 * Disabled items (`aria-disabled="true"` or `disabled`) are skipped.
 * Returns a handle to move programmatically, plus cleanup.
 */
export function rovingFocus(container: HTMLElement, opts: RovingOptions) {
  const { items: selector, orientation = "vertical", loop = true, typeahead = true, mode = "focus", controller, onMove } = opts;
  const keyTarget = controller ?? container;
  let buffer = "";
  let bufferTimer = 0;

  const list = () =>
    [...container.querySelectorAll<HTMLElement>(selector)].filter(
      (el) => el.getAttribute("aria-disabled") !== "true" && !(el as HTMLButtonElement).disabled && !el.hidden,
    );

  const current = () => {
    const items = list();
    if (mode === "active") {
      const id = (controller ?? container).getAttribute("aria-activedescendant");
      return items.findIndex((el) => el.id === id);
    }
    return items.findIndex((el) => el === document.activeElement || el.contains(document.activeElement));
  };

  function move(target: HTMLElement | null) {
    if (!target) return;
    if (mode === "focus") {
      list().forEach((el) => (el.tabIndex = el === target ? 0 : -1));
      target.focus({ preventScroll: false });
    } else {
      list().forEach((el) => el.removeAttribute("data-active"));
      target.dataset.active = "";
      if (!target.id) target.id = uid("vs-opt");
      (controller ?? container).setAttribute("aria-activedescendant", target.id);
      target.scrollIntoView({ block: "nearest" });
    }
    onMove?.(target);
  }

  function step(delta: number) {
    const items = list();
    if (!items.length) return;
    const i = current();
    let next = i === -1 ? (delta > 0 ? 0 : items.length - 1) : i + delta;
    if (loop) next = (next + items.length) % items.length;
    else next = Math.max(0, Math.min(items.length - 1, next));
    move(items[next]);
  }

  const prevKeys = orientation === "horizontal" ? ["ArrowLeft"] : orientation === "vertical" ? ["ArrowUp"] : ["ArrowUp", "ArrowLeft"];
  const nextKeys = orientation === "horizontal" ? ["ArrowRight"] : orientation === "vertical" ? ["ArrowDown"] : ["ArrowDown", "ArrowRight"];

  const onKey = (e: KeyboardEvent) => {
    if (nextKeys.includes(e.key)) {
      e.preventDefault();
      step(1);
    } else if (prevKeys.includes(e.key)) {
      e.preventDefault();
      step(-1);
    } else if (e.key === "Home") {
      e.preventDefault();
      move(list()[0] ?? null);
    } else if (e.key === "End") {
      e.preventDefault();
      const items = list();
      move(items[items.length - 1] ?? null);
    } else if (typeahead && mode === "focus" && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && e.key !== " ") {
      buffer += e.key.toLowerCase();
      window.clearTimeout(bufferTimer);
      bufferTimer = window.setTimeout(() => (buffer = ""), 500);
      const items = list();
      const start = Math.max(0, current() + (buffer.length === 1 ? 1 : 0));
      const ordered = [...items.slice(start), ...items.slice(0, start)];
      const hit = ordered.find((el) => (el.textContent ?? "").trim().toLowerCase().startsWith(buffer));
      if (hit) move(hit);
    }
  };

  keyTarget.addEventListener("keydown", onKey);
  if (mode === "focus") {
    const items = list();
    items.forEach((el, i) => (el.tabIndex = i === 0 ? 0 : -1));
  }

  return {
    move,
    first: () => move(list()[0] ?? null),
    last: () => {
      const items = list();
      move(items[items.length - 1] ?? null);
    },
    step,
    destroy: () => {
      keyTarget.removeEventListener("keydown", onKey);
      window.clearTimeout(bufferTimer);
    },
  };
}

let counter = 0;
/** Unique, stable-within-page id for aria wiring. */
export function uid(prefix = "at"): string {
  counter += 1;
  return `${prefix}-${counter.toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
}
```


---

# Testimonial Spotlight

> One customer quote set large in the display face, with up to three supporting quotes beneath.

- **Slug:** `testimonial-spotlight`
- **Kind:** section · **Category:** Proof
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/testimonial-spotlight
- **All files in one bundle:** https://viewership.ai/design/components/testimonial-spotlight.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/testimonial-spotlight.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/testimonial-spotlight/`:

   - `TestimonialSpotlight.astro` (raw: https://viewership.ai/design/raw/testimonial-spotlight/TestimonialSpotlight.astro.txt)

npm packages: none.

## Usage

```astro
---
import TestimonialSpotlight from "../components/viewership/testimonial-spotlight/TestimonialSpotlight.astro";
---

<TestimonialSpotlight />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import TestimonialSpotlight from "./TestimonialSpotlight.astro";
---

<TestimonialSpotlight
  items={[
    { quote: "The zip failed on day nine of a twelve-day trip. They fixed it in two days and the pack outlasted the rest of the season.", name: "Maya Ortiz", role: "Guide, Ridgeline Outfitters" },
    { quote: "The first jacket I have owned that came back from a repair looking better than it left.", name: "Daniel Okafor", role: "Trail runner" },
    { quote: "Honest weights on the page, and the pack matched them to the gram.", name: "Priya Raman", role: "Ultralight blogger" },
    { quote: "They asked what went wrong and then actually changed the design.", name: "Lena Voss", role: "Climbing coach" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `{ quote: string; name: string; role?: string }[]` |  | Quotes. The first leads; the next three sit in the row. |

## Source

### `src/components/viewership/testimonial-spotlight/TestimonialSpotlight.astro`

```astro
---
/**
 * TestimonialSpotlight: one quote set large in the display face, with up to
 * three supporting quotes in a ruled row beneath.
 *
 * Only publish quotes you have permission to use.
 *
 * @example
 * <TestimonialSpotlight items={[{ quote: "Fixed in two days.", name: "Maya Ortiz", role: "Guide" }]} />
 */
interface Item {
  quote: string;
  name: string;
  role?: string;
}
interface Props {
  items: Item[];
  class?: string;
}

const { items, class: className } = Astro.props;
const [lead, ...rest] = items;
const initials = (name: string) =>
  name
    .split(/\s+/)
    .map((p) => p[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();
---

<section class:list={["vs-testimonial-spotlight", className]}>
  <div class="vs-testimonial-spotlight__inner">
    {
      lead && (
        <figure class="vs-testimonial-spotlight__lead">
          <blockquote class="vs-display vs-testimonial-spotlight__quote">
            <p>{lead.quote}</p>
          </blockquote>
          <figcaption class="vs-testimonial-spotlight__by">
            <span class="vs-testimonial-spotlight__avatar" aria-hidden="true">{initials(lead.name)}</span>
            <span>
              <span class="vs-testimonial-spotlight__name">{lead.name}</span>
              {lead.role && <span class="vs-testimonial-spotlight__role">{lead.role}</span>}
            </span>
          </figcaption>
        </figure>
      )
    }
    {
      rest.length > 0 && (
        <ul class="vs-testimonial-spotlight__row">
          {rest.slice(0, 3).map((q) => (
            <li>
              <figure>
                <blockquote>
                  <p>{q.quote}</p>
                </blockquote>
                <figcaption>
                  <span class="vs-testimonial-spotlight__name">{q.name}</span>
                  {q.role && <span class="vs-testimonial-spotlight__role">{q.role}</span>}
                </figcaption>
              </figure>
            </li>
          ))}
        </ul>
      )
    }
  </div>
</section>

<style>
  .vs-testimonial-spotlight {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-testimonial-spotlight__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-testimonial-spotlight figure,
  .vs-testimonial-spotlight blockquote,
  .vs-testimonial-spotlight p {
    margin: 0;
  }
  .vs-testimonial-spotlight__quote {
    font-size: clamp(1.75rem, 5.2cqi, 3.5rem);
    line-height: 1.12;
  }
  .vs-testimonial-spotlight__quote p::before {
    content: "\201C";
  }
  .vs-testimonial-spotlight__quote p::after {
    content: "\201D";
  }
  .vs-testimonial-spotlight__by {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    font-size: 0.875rem;
  }
  .vs-testimonial-spotlight__by > span:last-child {
    display: flex;
    flex-direction: column;
  }
  .vs-testimonial-spotlight__avatar {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .vs-testimonial-spotlight__name {
    display: block;
    font-weight: 600;
  }
  .vs-testimonial-spotlight__role {
    display: block;
    color: var(--vs-ink-3);
  }
  .vs-testimonial-spotlight__row {
    display: grid;
    gap: 24px;
    margin: clamp(36px, 6cqi, 72px) 0 0;
    padding: 28px 0 0;
    list-style: none;
    border-top: calc(var(--vs-border-w) + 1px) solid var(--vs-ink);
  }
  .vs-testimonial-spotlight__row blockquote {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-testimonial-spotlight__row figcaption {
    margin-top: 14px;
    font-size: 0.875rem;
  }
  @container (min-width: 700px) {
    .vs-testimonial-spotlight__row {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      gap: 32px;
    }
  }
</style>
```


---

# Testimonial Cards

> Quotes as an even row of cards with optional star ratings and initials avatars.

- **Slug:** `testimonial-cards`
- **Kind:** section · **Category:** Proof
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/testimonial-cards
- **All files in one bundle:** https://viewership.ai/design/components/testimonial-cards.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/testimonial-cards.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/testimonial-cards/`:

   - `TestimonialCards.astro` (raw: https://viewership.ai/design/raw/testimonial-cards/TestimonialCards.astro.txt)

npm packages: none.

## Usage

```astro
---
import TestimonialCards from "../components/viewership/testimonial-cards/TestimonialCards.astro";
---

<TestimonialCards />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import TestimonialCards from "./TestimonialCards.astro";
---

<TestimonialCards
  title="Heard on"
  accent="the trail."
  items={[
    { quote: "We outfit twelve students a year. The fleet plan paid for itself in the first term.", name: "Tom Hendry", role: "Outdoor education lead", rating: 5 },
    { quote: "Boring answer: it works. Exciting answer: it works in sideways rain.", name: "Sam Whitlock", role: "Weekend camper", rating: 5 },
    { quote: "Heavier than the ultralight brands, and I have stopped caring.", name: "Ines Park", role: "Thru-hiker", rating: 4 },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Optional section headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `items` | `{ quote: string; name: string; role?: string; rating?: number }[]` |  | Quotes. Three fill a row. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/testimonial-cards/TestimonialCards.astro`

```astro
---
/**
 * TestimonialCards: quotes as an even row of cards, each with a star rating
 * (optional) and an initials avatar.
 *
 * @example
 * <TestimonialCards title="Heard on" accent="the trail." items={[{ quote: "...", name: "Maya Ortiz", rating: 5 }]} />
 */
interface Item {
  quote: string;
  name: string;
  role?: string;
  /** 1 to 5. Omit to hide the stars. */
  rating?: number;
}
interface Props {
  title?: string;
  accent?: string;
  items: Item[];
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, items, as: Heading = "h2", class: className } = Astro.props;
const initials = (name: string) =>
  name
    .split(/\s+/)
    .map((p) => p[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();
const star = "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z";
---

<section class:list={["vs-testimonial-cards", className]}>
  <div class="vs-testimonial-cards__inner">
    {title && <Heading class="vs-display vs-testimonial-cards__title">{title}{accent && <> <em>{accent}</em></>}</Heading>}
    <ul class="vs-testimonial-cards__grid">
      {
        items.map((q) => (
          <li>
            <figure class="vs-testimonial-cards__card">
              {q.rating && (
                <p class="vs-testimonial-cards__stars" role="img" aria-label={`${q.rating} out of 5 stars`}>
                  {Array.from({ length: 5 }, (_, i) => (
                    <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class:list={{ "is-off": i >= q.rating! }}>
                      <path d={star} />
                    </svg>
                  ))}
                </p>
              )}
              <blockquote>
                <p>{q.quote}</p>
              </blockquote>
              <figcaption class="vs-testimonial-cards__by">
                <span class="vs-testimonial-cards__avatar" aria-hidden="true">{initials(q.name)}</span>
                <span>
                  <span class="vs-testimonial-cards__name">{q.name}</span>
                  {q.role && <span class="vs-testimonial-cards__role">{q.role}</span>}
                </span>
              </figcaption>
            </figure>
          </li>
        ))
      }
    </ul>
  </div>
</section>

<style>
  .vs-testimonial-cards {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-testimonial-cards__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-testimonial-cards__title {
    margin-bottom: clamp(28px, 5cqi, 56px);
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-testimonial-cards__grid {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @container (min-width: 640px) {
    .vs-testimonial-cards__grid {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
  }
  .vs-testimonial-cards figure,
  .vs-testimonial-cards blockquote,
  .vs-testimonial-cards p {
    margin: 0;
  }
  .vs-testimonial-cards__card {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    border: var(--vs-border-w) solid var(--vs-line);
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-sm);
  }
  .vs-testimonial-cards__card blockquote {
    flex: 1;
    font-size: 1.0625rem;
    line-height: 1.5;
  }
  .vs-testimonial-cards__stars {
    display: flex;
    gap: 2px;
    color: var(--vs-accent);
  }
  .vs-testimonial-cards__stars svg {
    fill: currentColor;
  }
  .vs-testimonial-cards__stars .is-off {
    fill: var(--vs-line-strong);
  }
  .vs-testimonial-cards__by {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--vs-line);
    font-size: 0.875rem;
  }
  .vs-testimonial-cards__by > span:last-child {
    display: flex;
    flex-direction: column;
  }
  .vs-testimonial-cards__avatar {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
    font-size: 0.75rem;
    font-weight: 600;
  }
  .vs-testimonial-cards__name {
    font-weight: 600;
  }
  .vs-testimonial-cards__role {
    color: var(--vs-ink-3);
  }
</style>
```


---

# Testimonial Wall

> Staggered columns of quotes in mixed tones. Takes quotes of any length.

- **Slug:** `testimonial-wall`
- **Kind:** section · **Category:** Proof
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/testimonial-wall
- **All files in one bundle:** https://viewership.ai/design/components/testimonial-wall.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/testimonial-wall.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/testimonial-wall/`:

   - `TestimonialWall.astro` (raw: https://viewership.ai/design/raw/testimonial-wall/TestimonialWall.astro.txt)

npm packages: none.

## Usage

```astro
---
import TestimonialWall from "../components/viewership/testimonial-wall/TestimonialWall.astro";
---

<TestimonialWall />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import TestimonialWall from "./TestimonialWall.astro";
---

<TestimonialWall
  title="Kind"
  accent="words."
  intro="Unedited, from repair tickets and trip reports."
  items={[
    { quote: "The zip failed on day nine of a twelve-day trip. They fixed it in two days and the pack outlasted the season.", name: "Maya Ortiz", role: "Guide" },
    { quote: "Honest weights, to the gram.", name: "Priya Raman", role: "Ultralight blogger" },
    { quote: "We outfit twelve students a year. Nobody has lost a buckle since we switched.", name: "Tom Hendry", role: "Outdoor education lead" },
    { quote: "They asked what went wrong and then actually changed the design.", name: "Lena Voss", role: "Climbing coach" },
    { quote: "It works in sideways rain.", name: "Sam Whitlock", role: "Weekend camper" },
    { quote: "Sent back a ten-year-old pack expecting a refusal. Got it back with new straps and a note from the person who fixed it.", name: "Ruth Adeyemi", role: "Scout leader" },
    { quote: "The resale shop is how I afforded my first proper shell.", name: "Jonah Lee", role: "Student" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Optional centred headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `intro` | `string` |  | Line under the headline. |
| `items` | `{ quote: string; name: string; role?: string }[]` |  | Quotes. Six to nine fill the wall. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/testimonial-wall/TestimonialWall.astro`

```astro
---
/**
 * TestimonialWall: staggered columns of quotes in mixed tones. Tolerates
 * quotes of any length; columns follow the section width.
 *
 * @example
 * <TestimonialWall title="Kind" accent="words." items={[{ quote: "...", name: "Lena Voss" }]} />
 */
interface Item {
  quote: string;
  name: string;
  role?: string;
}
interface Props {
  title?: string;
  accent?: string;
  intro?: string;
  items: Item[];
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, items, as: Heading = "h2", class: className } = Astro.props;
---

<section class:list={["vs-testimonial-wall", className]}>
  <div class="vs-testimonial-wall__inner">
    {
      title && (
        <header class="vs-testimonial-wall__head">
          <Heading class="vs-display vs-testimonial-wall__title">
            {title}
            {accent && <> <em>{accent}</em></>}
          </Heading>
          {intro && <p class="vs-testimonial-wall__intro">{intro}</p>}
        </header>
      )
    }
    <ul class="vs-testimonial-wall__cols">
      {
        items.map((q) => (
          <li class="vs-testimonial-wall__cell">
            <figure>
              <blockquote>
                <p>{q.quote}</p>
              </blockquote>
              <figcaption>
                <span class="vs-testimonial-wall__name">{q.name}</span>
                {q.role && <span class="vs-testimonial-wall__role">{q.role}</span>}
              </figcaption>
            </figure>
          </li>
        ))
      }
    </ul>
  </div>
</section>

<style>
  .vs-testimonial-wall {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-testimonial-wall__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-testimonial-wall__head {
    margin-bottom: clamp(28px, 5cqi, 56px);
    text-align: center;
  }
  .vs-testimonial-wall__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-testimonial-wall__intro {
    max-width: 30rem;
    margin: 1rem auto 0;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-testimonial-wall__cols {
    margin: 0;
    padding: 0;
    list-style: none;
    column-gap: 14px;
  }
  @container (min-width: 560px) {
    .vs-testimonial-wall__cols {
      columns: 2;
    }
  }
  @container (min-width: 900px) {
    .vs-testimonial-wall__cols {
      columns: 3;
    }
  }
  .vs-testimonial-wall__cell {
    break-inside: avoid;
    margin-bottom: 14px;
  }
  .vs-testimonial-wall figure,
  .vs-testimonial-wall blockquote,
  .vs-testimonial-wall blockquote p {
    margin: 0;
  }
  .vs-testimonial-wall figure {
    padding: 24px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-canvas);
  }
  .vs-testimonial-wall blockquote {
    font-size: 1rem;
    line-height: 1.55;
  }
  .vs-testimonial-wall figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-top: 16px;
    font-size: 0.8125rem;
  }
  .vs-testimonial-wall__name {
    font-weight: 600;
  }
  .vs-testimonial-wall__role {
    color: var(--vs-ink-3);
  }
  .vs-testimonial-wall__cell:nth-child(3n + 2) figure {
    border: var(--vs-border-w) solid var(--vs-line);
    background: var(--vs-surface);
  }
  .vs-testimonial-wall__cell:nth-child(4n) figure {
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
  }
  .vs-testimonial-wall__cell:nth-child(4n) .vs-testimonial-wall__role {
    color: inherit;
    opacity: 0.6;
  }
  .vs-testimonial-wall__cell:nth-child(5n) figure {
    background: var(--vs-accent-tint);
  }
</style>
```


---

# Logo Row

> A lead-in line and one wrapping row of client or press logos. Names become wordmarks when there is no image.

- **Slug:** `logo-row`
- **Kind:** section · **Category:** Proof
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/logo-row
- **All files in one bundle:** https://viewership.ai/design/components/logo-row.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/logo-row.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/logo-row/`:

   - `LogoRow.astro` (raw: https://viewership.ai/design/raw/logo-row/LogoRow.astro.txt)

npm packages: none.

## Usage

```astro
---
import LogoRow from "../components/viewership/logo-row/LogoRow.astro";
---

<LogoRow />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import LogoRow from "./LogoRow.astro";
---

<LogoRow
  title="Stocked by independent shops from coast to coast"
  items={[{ name: "Harbor & Pine" }, { name: "Tallgrass" }, { name: "Lumen Co." }, { name: "Fieldnote" }, { name: "Saltmarsh" }, { name: "Kestrel" }]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Short lead-in line. |
| `items` | `{ name: string; src?: string; href?: string }[]` |  | Logos. Without `src` the name is set as a wordmark. |

## Source

### `src/components/viewership/logo-row/LogoRow.astro`

```astro
---
/**
 * LogoRow: a short lead-in line and one evenly spaced, wrapping row of logos.
 *
 * Give each item an `src` (single-colour marks work best) or leave it off to
 * set the name as a wordmark in the theme's display face.
 *
 * @example
 * <LogoRow title="Stocked by" items={[{ name: "Harbor & Pine" }, { name: "Lumen", src: "/logos/lumen.svg" }]} />
 */
interface Item {
  name: string;
  src?: string;
  href?: string;
}
interface Props {
  title?: string;
  items: Item[];
  class?: string;
}

const { title, items, class: className } = Astro.props;
---

<section class:list={["vs-logo-row", className]} aria-label={title ?? "Customers"}>
  <div class="vs-logo-row__inner">
    {title && <p class="vs-logo-row__title">{title}</p>}
    <ul class="vs-logo-row__list">
      {
        items.map((it) => {
          const mark = it.src ? <img src={it.src} alt={it.name} height="28" loading="lazy" /> : <span class="vs-display">{it.name}</span>;
          return <li>{it.href ? <a href={it.href}>{mark}</a> : mark}</li>;
        })
      }
    </ul>
  </div>
</section>

<style>
  .vs-logo-row {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-logo-row__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: clamp(40px, 6cqi, 72px) var(--vs-gutter);
  }
  .vs-logo-row__title {
    margin: 0 0 28px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--vs-ink-3);
  }
  .vs-logo-row__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px clamp(28px, 6cqi, 72px);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--vs-ink-2);
  }
  .vs-logo-row__list span {
    font-size: 1.375rem;
    white-space: nowrap;
  }
  .vs-logo-row__list img {
    display: block;
    width: auto;
    height: 28px;
    filter: grayscale(1);
    opacity: 0.75;
  }
  .vs-logo-row__list a {
    display: inline-flex;
    color: inherit;
    text-decoration: none;
  }
  .vs-logo-row__list a:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
</style>
```


---

# Logo Grid

> Logos in bordered cells beside a short statement, like a spec sheet.

- **Slug:** `logo-grid`
- **Kind:** section · **Category:** Proof
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/logo-grid
- **All files in one bundle:** https://viewership.ai/design/components/logo-grid.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/logo-grid.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/logo-grid/`:

   - `LogoGrid.astro` (raw: https://viewership.ai/design/raw/logo-grid/LogoGrid.astro.txt)

npm packages: none.

## Usage

```astro
---
import LogoGrid from "../components/viewership/logo-grid/LogoGrid.astro";
---

<LogoGrid />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import LogoGrid from "./LogoGrid.astro";
---

<LogoGrid
  title="Trusted by outfitters and schools"
  body="Over two hundred shops, guide services and outdoor programmes run on Northwind gear."
  items={[
    { name: "Harbor & Pine" },
    { name: "Tallgrass" },
    { name: "Lumen Co." },
    { name: "Fieldnote" },
    { name: "Saltmarsh" },
    { name: "Bearing" },
    { name: "Kestrel" },
    { name: "Orchard Row" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Short headline beside the grid. |
| `body` | `string` |  | Supporting line. |
| `items` | `{ name: string; src?: string; href?: string }[]` |  | Logos. Multiples of four fill the grid. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/logo-grid/LogoGrid.astro`

```astro
---
/**
 * LogoGrid: logos in bordered cells beside a short statement, like a spec
 * sheet. Two columns when narrow, four when wide.
 *
 * @example
 * <LogoGrid title="Trusted by outfitters" body="..." items={[{ name: "Kestrel" }]} />
 */
interface Item {
  name: string;
  src?: string;
  href?: string;
}
interface Props {
  title?: string;
  body?: string;
  items: Item[];
  as?: "h2" | "h3";
  class?: string;
}

const { title, body, items, as: Heading = "h2", class: className } = Astro.props;
---

<section class:list={["vs-logo-grid", className]}>
  <div class="vs-logo-grid__inner">
    {
      (title || body) && (
        <header class="vs-logo-grid__head">
          {title && <Heading class="vs-display vs-logo-grid__title">{title}</Heading>}
          {body && <p class="vs-logo-grid__body">{body}</p>}
        </header>
      )
    }
    <ul class="vs-logo-grid__cells">
      {
        items.map((it) => {
          const mark = it.src ? <img src={it.src} alt={it.name} height="28" loading="lazy" /> : <span class="vs-display">{it.name}</span>;
          return <li>{it.href ? <a href={it.href}>{mark}</a> : mark}</li>;
        })
      }
    </ul>
  </div>
</section>

<style>
  .vs-logo-grid {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-logo-grid__inner {
    display: grid;
    gap: 32px;
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-logo-grid__title {
    font-size: clamp(1.75rem, 4.5cqi, 2.75rem);
  }
  .vs-logo-grid__body {
    max-width: 22rem;
    margin: 1rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-logo-grid__cells {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--vs-border-w) solid var(--vs-line-strong);
    border-left: var(--vs-border-w) solid var(--vs-line-strong);
  }
  .vs-logo-grid__cells li {
    display: flex;
    min-height: 96px;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-right: var(--vs-border-w) solid var(--vs-line-strong);
    border-bottom: var(--vs-border-w) solid var(--vs-line-strong);
    color: var(--vs-ink-2);
    transition: background-color var(--vs-duration) var(--vs-ease-out);
  }
  .vs-logo-grid__cells li:hover {
    background: var(--vs-surface);
    color: var(--vs-ink);
  }
  .vs-logo-grid__cells span {
    font-size: 1.25rem;
    text-align: center;
  }
  .vs-logo-grid__cells img {
    display: block;
    width: auto;
    height: 28px;
    filter: grayscale(1);
    opacity: 0.75;
  }
  .vs-logo-grid__cells a {
    display: inline-flex;
    color: inherit;
    text-decoration: none;
  }
  .vs-logo-grid__cells a:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  @container (min-width: 720px) {
    .vs-logo-grid__cells {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @container (min-width: 960px) {
    .vs-logo-grid__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
      gap: 56px;
      align-items: start;
    }
  }
</style>
```


---

# Logo Marquee

> Logos drifting in a slow loop with faded edges. Pauses on hover, static under reduced motion.

- **Slug:** `logo-marquee`
- **Kind:** section · **Category:** Proof
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/logo-marquee
- **All files in one bundle:** https://viewership.ai/design/components/logo-marquee.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/logo-marquee.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/logo-marquee/`:

   - `LogoMarquee.astro` (raw: https://viewership.ai/design/raw/logo-marquee/LogoMarquee.astro.txt)

npm packages: none.

## Usage

```astro
---
import LogoMarquee from "../components/viewership/logo-marquee/LogoMarquee.astro";
---

<LogoMarquee />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import LogoMarquee from "./LogoMarquee.astro";
---

<LogoMarquee
  title="As seen in the field"
  items={[
    { name: "Harbor & Pine" },
    { name: "Tallgrass" },
    { name: "Lumen Co." },
    { name: "Fieldnote" },
    { name: "Saltmarsh" },
    { name: "Bearing" },
    { name: "Kestrel" },
    { name: "Orchard Row" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Short lead-in line. |
| `items` | `{ name: string; src?: string }[]` |  | Logos. Six or more keep the loop seamless. |
| `duration` | `number` | `40` | Seconds per loop. |

## Source

### `src/components/viewership/logo-marquee/LogoMarquee.astro`

```astro
---
/**
 * LogoMarquee: logos drifting in a slow continuous loop, with faded edges.
 * Pauses on hover; under reduced motion it becomes a static wrapping row.
 *
 * @example
 * <LogoMarquee title="As seen in the field" items={[{ name: "Kestrel" }]} />
 */
interface Item {
  name: string;
  src?: string;
}
interface Props {
  title?: string;
  items: Item[];
  /** Seconds for one full loop. */
  duration?: number;
  class?: string;
}

const { title, items, duration = 40, class: className } = Astro.props;
---

<section class:list={["vs-logo-marquee", className]} aria-label={title ?? "Customers"} style={`--vs-marquee-duration: ${duration}s`}>
  <div class="vs-logo-marquee__inner">
    {title && <p class="vs-logo-marquee__title">{title}</p>}
    <div class="vs-logo-marquee__viewport">
      <div class="vs-logo-marquee__track">
        {
          [0, 1].map((copy) => (
            <ul class="vs-logo-marquee__list" aria-hidden={copy === 1 ? "true" : undefined}>
              {items.map((it) => (
                <li>{it.src ? <img src={it.src} alt={copy === 1 ? "" : it.name} height="28" loading="lazy" /> : <span class="vs-display">{it.name}</span>}</li>
              ))}
            </ul>
          ))
        }
      </div>
    </div>
  </div>
</section>

<style>
  .vs-logo-marquee {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-logo-marquee__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: clamp(40px, 6cqi, 72px) var(--vs-gutter);
  }
  .vs-logo-marquee__title {
    margin: 0 0 28px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--vs-ink-3);
  }
  .vs-logo-marquee__viewport {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
  .vs-logo-marquee__track {
    display: flex;
    width: max-content;
    animation: vs-logo-marquee-scroll var(--vs-marquee-duration) linear infinite;
  }
  .vs-logo-marquee__track:hover {
    animation-play-state: paused;
  }
  .vs-logo-marquee__list {
    display: flex;
    flex: none;
    align-items: center;
    gap: clamp(40px, 6cqi, 80px);
    margin: 0;
    padding: 0 clamp(40px, 6cqi, 80px) 0 0;
    list-style: none;
    color: var(--vs-ink-2);
  }
  .vs-logo-marquee__list span {
    font-size: 1.5rem;
    white-space: nowrap;
  }
  .vs-logo-marquee__list img {
    display: block;
    width: auto;
    height: 28px;
    filter: grayscale(1);
    opacity: 0.75;
  }
  @keyframes vs-logo-marquee-scroll {
    to {
      transform: translateX(-50%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .vs-logo-marquee__track {
      width: auto;
      justify-content: center;
      animation: none;
    }
    .vs-logo-marquee__list[aria-hidden="true"] {
      display: none;
    }
    .vs-logo-marquee__list {
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 20px;
      padding-right: 0;
    }
    .vs-logo-marquee__viewport {
      mask-image: none;
      -webkit-mask-image: none;
    }
  }
</style>
```


---

# Stats Band

> Headline figures on a dark band, each with a label, a footnote and a source line.

- **Slug:** `stats-band`
- **Kind:** section · **Category:** Proof
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/stats-band
- **All files in one bundle:** https://viewership.ai/design/components/stats-band.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/stats-band.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/stats-band/`:

   - `StatsBand.astro` (raw: https://viewership.ai/design/raw/stats-band/StatsBand.astro.txt)

npm packages: none.

## Usage

```astro
---
import StatsBand from "../components/viewership/stats-band/StatsBand.astro";
---

<StatsBand />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import StatsBand from "./StatsBand.astro";
---

<StatsBand
  title="The repair bench, last year"
  stats={[
    { value: "11,400", label: "Repairs completed", note: "Up from 8,900" },
    { value: "2.1", label: "Days average turnaround" },
    { value: "94%", label: "Fixed, not replaced" },
    { value: "3,200", label: "Packs resold" },
  ]}
  source="Sample figures for a fictional brand."
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Small heading above the figures. |
| `stats` | `{ value: string; label: string; note?: string }[]` |  | Figures. Three or four read best. |
| `source` | `string` |  | Where the numbers come from. |
| `tone` | `"ink" \| "page"` | `"ink"` | Dark band or page ground. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/stats-band/StatsBand.astro`

```astro
---
/**
 * StatsBand: a few headline figures on a dark band, each with a label and an
 * optional footnote. Use real, sourced numbers only.
 *
 * @example
 * <StatsBand title="The bench in numbers" stats={[{ value: "11,400", label: "Repairs last year" }]} />
 */
interface Stat {
  value: string;
  label: string;
  note?: string;
}
interface Props {
  title?: string;
  stats: Stat[];
  /** Source or date line under the figures. */
  source?: string;
  /** "ink" sits on a dark band; "page" uses the page ground. */
  tone?: "ink" | "page";
  as?: "h2" | "h3";
  class?: string;
}

const { title, stats, source, tone = "ink", as: Heading = "h2", class: className } = Astro.props;
---

<section class:list={["vs-stats-band", `vs-stats-band--${tone}`, className]}>
  <div class="vs-stats-band__inner">
    {title && <Heading class="vs-stats-band__title">{title}</Heading>}
    <dl class="vs-stats-band__grid">
      {
        stats.map((s) => (
          <div class="vs-stats-band__stat">
            <dt class="vs-stats-band__label">{s.label}</dt>
            <dd class="vs-display vs-stats-band__value">{s.value}</dd>
            {s.note && <dd class="vs-stats-band__note">{s.note}</dd>}
          </div>
        ))
      }
    </dl>
    {source && <p class="vs-stats-band__source">{source}</p>}
  </div>
</section>

<style>
  .vs-stats-band {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
    --vs-stats-muted: var(--vs-ink-2);
    --vs-stats-rule: var(--vs-line-strong);
  }
  .vs-stats-band--ink {
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
    --vs-stats-muted: color-mix(in srgb, var(--vs-ink-inverse) 65%, transparent);
    --vs-stats-rule: color-mix(in srgb, var(--vs-ink-inverse) 22%, transparent);
  }
  .vs-stats-band__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: clamp(48px, 8cqi, 96px) var(--vs-gutter);
  }
  .vs-stats-band__title {
    margin: 0 0 clamp(28px, 5cqi, 48px);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--vs-stats-muted);
  }
  .vs-stats-band__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    margin: 0;
  }
  @container (min-width: 820px) {
    .vs-stats-band__grid {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
  }
  .vs-stats-band__stat {
    display: flex;
    flex-direction: column;
    padding-left: 18px;
    border-left: var(--vs-border-w) solid var(--vs-stats-rule);
  }
  .vs-stats-band__value {
    order: -1;
    margin: 0;
    font-size: clamp(2.25rem, 5.5cqi, 4rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .vs-stats-band__label {
    margin-top: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .vs-stats-band__note {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--vs-stats-muted);
  }
  .vs-stats-band__source {
    margin: clamp(28px, 5cqi, 48px) 0 0;
    font-size: 0.75rem;
    color: var(--vs-stats-muted);
  }
</style>
```


---

# Pricing Columns

> Plans side by side as cards, with the featured plan inverted onto ink.

- **Slug:** `pricing-columns`
- **Kind:** section · **Category:** Pricing
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/pricing-columns
- **All files in one bundle:** https://viewership.ai/design/components/pricing-columns.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/pricing-columns.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/pricing-columns/`:

   - `PricingColumns.astro` (raw: https://viewership.ai/design/raw/pricing-columns/PricingColumns.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)
   - `icon`: `Icon.astro`, `icons.ts` (docs: https://viewership.ai/design/components/icon.md)

npm packages: none.

## Usage

```astro
---
import PricingColumns from "../components/viewership/pricing-columns/PricingColumns.astro";
---

<PricingColumns />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import PricingColumns from "./PricingColumns.astro";
---

<PricingColumns
  title="Repair plans,"
  accent="priced plainly."
  intro="Sample prices for a fictional gear brand."
  note="Sample figures for demonstration."
  tiers={[
    {
      name: "Trail",
      price: "$180",
      period: "per pack",
      description: "A single repair or refit, done at the bench.",
      features: ["Stitching and seam tape", "Zip and buckle swaps", "Return shipping included"],
      cta: { label: "Book a repair", href: "#" },
    },
    {
      name: "Season",
      price: "$420",
      period: "per year",
      description: "Unlimited repairs and a yearly tune-up for the whole kit.",
      features: ["Unlimited repairs", "Annual waterproofing", "Loaner pack while we work", "Priority bench slot"],
      cta: { label: "Join for a season", href: "#" },
      featured: true,
      badge: "Most chosen",
    },
    {
      name: "Expedition",
      price: "By quote",
      description: "Guides, schools and teams outfitting twelve or more people.",
      features: ["Fleet maintenance plan", "On-site repair days", "Custom colourways"],
      cta: { label: "Request a quote", href: "#" },
    },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline, drawn in the theme's accent style. |
| `intro` | `string` |  | Supporting paragraph. |
| `tiers` | `{ name: string; price: string; period?: string; description?: string; features: string[]; cta: { label; href }; featured?: boolean; badge?: string }[]` |  | Plans. Two to four fit a row. |
| `note` | `string` |  | Small print under the plans. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/pricing-columns/PricingColumns.astro`

```astro
---
/**
 * PricingColumns: plans side by side, the featured one inverted onto ink.
 * Prices are plain strings, so "$420", "From $9k" or "By quote" all work.
 *
 * @example
 * <PricingColumns title="Repair plans," accent="priced plainly." tiers={[
 *   { name: "Trail", price: "$180", period: "per pack", features: ["Stitching"], cta: { label: "Book", href: "/book" } },
 * ]} />
 */
import Button from "../button/Button.astro";
import Icon from "../icon/Icon.astro";

interface Cta {
  label: string;
  href: string;
}
interface Tier {
  name: string;
  price: string;
  period?: string;
  description?: string;
  features: string[];
  cta: Cta;
  featured?: boolean;
  /** Small label on the plan, e.g. "Most chosen". */
  badge?: string;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  tiers: Tier[];
  /** Small print under the plans. */
  note?: string;
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, tiers, note, as: Heading = "h2", class: className } = Astro.props;
---

<section class:list={["vs-pricing-columns", className]}>
  <div class="vs-pricing-columns__inner">
    <header class="vs-pricing-columns__head">
      <Heading class="vs-display vs-pricing-columns__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {intro && <p class="vs-pricing-columns__intro">{intro}</p>}
    </header>
    <ul class="vs-pricing-columns__tiers">
      {
        tiers.map((t) => (
          <li class:list={["vs-pricing-columns__tier", { "is-featured": t.featured }]}>
            <div>
              <h3 class="vs-pricing-columns__name">
                {t.name}
                {t.badge && <span class="vs-pricing-columns__badge">{t.badge}</span>}
              </h3>
              {t.description && <p class="vs-pricing-columns__desc">{t.description}</p>}
            </div>
            <div class="vs-pricing-columns__buy">
              <p class="vs-display vs-pricing-columns__price">{t.price}</p>
              {t.period && <p class="vs-pricing-columns__period">{t.period}</p>}
              <div class="vs-pricing-columns__action">
                <Button href={t.cta.href} variant={t.featured ? "accent" : "secondary"}>{t.cta.label}</Button>
              </div>
            </div>
            <ul class="vs-pricing-columns__features">
              {t.features.map((f) => (
                <li>
                  <Icon name="check" size={16} strokeWidth={2.25} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </li>
        ))
      }
    </ul>
    {note && <p class="vs-pricing-columns__note">{note}</p>}
  </div>
</section>

<style>
  .vs-pricing-columns {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-pricing-columns__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-pricing-columns__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-pricing-columns__intro {
    max-width: 34rem;
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-pricing-columns__tiers {
    display: grid;
    gap: 16px;
    margin: clamp(28px, 5cqi, 56px) 0 0;
    padding: 0;
    list-style: none;
  }
  @container (min-width: 760px) {
    .vs-pricing-columns__tiers {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
  }
  .vs-pricing-columns__tier {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px;
    border: var(--vs-border-w) solid var(--vs-line);
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-sm);
  }
  .vs-pricing-columns__name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
  }
  .vs-pricing-columns__badge {
    padding: 3px 9px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-accent);
    color: var(--vs-on-accent);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .vs-pricing-columns__desc {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--vs-ink-2);
  }
  .vs-pricing-columns__buy {
    padding-bottom: 24px;
    border-bottom: var(--vs-border-w) solid var(--vs-line);
  }
  .vs-pricing-columns__price {
    font-size: clamp(2.25rem, 5cqi, 3.25rem);
    line-height: 1;
  }
  .vs-pricing-columns__period {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: var(--vs-ink-3);
  }
  .vs-pricing-columns__action {
    margin-top: 20px;
  }
  .vs-pricing-columns__action :global(.vs-button) {
    width: 100%;
  }
  .vs-pricing-columns__features {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
  }
  .vs-pricing-columns__features li {
    display: flex;
    gap: 10px;
    line-height: 1.4;
  }
  .vs-pricing-columns__features :global(.vs-icon) {
    margin-top: 2px;
    color: var(--vs-accent-ink);
  }
  .vs-pricing-columns__note {
    margin: 24px 0 0;
    font-size: 0.8125rem;
    color: var(--vs-ink-3);
  }

  /* Featured plan: inverted onto ink */
  .vs-pricing-columns__tier.is-featured {
    border-color: var(--vs-ink);
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
    box-shadow: var(--vs-pop-shadow, var(--vs-shadow-md));
  }
  .is-featured .vs-pricing-columns__desc,
  .is-featured .vs-pricing-columns__period {
    color: color-mix(in srgb, var(--vs-ink-inverse) 70%, transparent);
  }
  .is-featured .vs-pricing-columns__buy {
    border-color: color-mix(in srgb, var(--vs-ink-inverse) 22%, transparent);
  }
  .is-featured .vs-pricing-columns__features :global(.vs-icon) {
    color: var(--vs-accent);
  }
</style>
```


---

# Pricing Rows

> One plan per ruled row with name, inclusions, price and action. Handles many plans and long lists.

- **Slug:** `pricing-rows`
- **Kind:** section · **Category:** Pricing
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/pricing-rows
- **All files in one bundle:** https://viewership.ai/design/components/pricing-rows.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/pricing-rows.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/pricing-rows/`:

   - `PricingRows.astro` (raw: https://viewership.ai/design/raw/pricing-rows/PricingRows.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)
   - `icon`: `Icon.astro`, `icons.ts` (docs: https://viewership.ai/design/components/icon.md)

npm packages: none.

## Usage

```astro
---
import PricingRows from "../components/viewership/pricing-rows/PricingRows.astro";
---

<PricingRows />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import PricingRows from "./PricingRows.astro";
---

<PricingRows
  title="Pick your"
  accent="plan."
  tiers={[
    { name: "Trail", price: "$180", period: "per pack", description: "One repair, done at the bench.", features: ["Stitching and seam tape", "Zip and buckle swaps", "Return shipping"], cta: { label: "Book a repair", href: "#" } },
    {
      name: "Season",
      price: "$420",
      period: "per year",
      description: "Unlimited repairs for the whole kit.",
      features: ["Unlimited repairs", "Annual waterproofing", "Loaner pack", "Priority slot"],
      cta: { label: "Join", href: "#" },
      featured: true,
    },
    { name: "Expedition", price: "By quote", description: "Fleets of twelve or more.", features: ["Fleet plan", "On-site repair days", "Custom colourways"], cta: { label: "Request a quote", href: "#" } },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `intro` | `string` |  | Supporting paragraph. |
| `tiers` | `{ name: string; price: string; period?: string; description?: string; features: string[]; cta: { label; href }; featured?: boolean }[]` |  | Plans, one per row. The featured row is tinted. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/pricing-rows/PricingRows.astro`

```astro
---
/**
 * PricingRows: one plan per ruled row (name, inclusions, price and action).
 * Good for many plans or long feature lists. The featured row is tinted.
 *
 * @example
 * <PricingRows title="Pick your" accent="plan." tiers={[...]} />
 */
import Button from "../button/Button.astro";
import Icon from "../icon/Icon.astro";

interface Cta {
  label: string;
  href: string;
}
interface Tier {
  name: string;
  price: string;
  period?: string;
  description?: string;
  features: string[];
  cta: Cta;
  featured?: boolean;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  tiers: Tier[];
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, tiers, as: Heading = "h2", class: className } = Astro.props;
---

<section class:list={["vs-pricing-rows", className]}>
  <div class="vs-pricing-rows__inner">
    <Heading class="vs-display vs-pricing-rows__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
    {intro && <p class="vs-pricing-rows__intro">{intro}</p>}
    <ul class="vs-pricing-rows__list">
      {
        tiers.map((t) => (
          <li class:list={["vs-pricing-rows__row", { "is-featured": t.featured }]}>
            <div>
              <h3 class="vs-pricing-rows__name">{t.name}</h3>
              {t.description && <p class="vs-pricing-rows__desc">{t.description}</p>}
            </div>
            <ul class="vs-pricing-rows__features">
              {t.features.map((f) => (
                <li>
                  <Icon name="check" size={16} strokeWidth={2.25} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <div class="vs-pricing-rows__buy">
              <p class="vs-display vs-pricing-rows__price">{t.price}</p>
              {t.period && <p class="vs-pricing-rows__period">{t.period}</p>}
              <div class="vs-pricing-rows__action">
                <Button href={t.cta.href} variant={t.featured ? "primary" : "secondary"} size="sm">{t.cta.label}</Button>
              </div>
            </div>
          </li>
        ))
      }
    </ul>
  </div>
</section>

<style>
  .vs-pricing-rows {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-pricing-rows__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-pricing-rows__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-pricing-rows__intro {
    max-width: 34rem;
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-pricing-rows__list {
    margin: clamp(28px, 5cqi, 56px) 0 0;
    padding: 0;
    list-style: none;
    border-top: calc(var(--vs-border-w) + 1px) solid var(--vs-ink);
  }
  .vs-pricing-rows__row {
    display: grid;
    gap: 20px;
    padding: 28px 4px;
    border-bottom: var(--vs-border-w) solid var(--vs-line-strong);
  }
  .vs-pricing-rows__row.is-featured {
    padding-inline: 20px;
    background: var(--vs-accent-tint);
  }
  .vs-pricing-rows__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
  }
  .vs-pricing-rows__desc {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--vs-ink-2);
  }
  .vs-pricing-rows__features {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
  }
  .vs-pricing-rows__features li {
    display: flex;
    gap: 10px;
    line-height: 1.4;
  }
  .vs-pricing-rows__features :global(.vs-icon) {
    margin-top: 2px;
    color: var(--vs-accent-ink);
  }
  .vs-pricing-rows__price {
    font-size: clamp(2rem, 4.5cqi, 2.75rem);
    line-height: 1;
  }
  .vs-pricing-rows__period {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: var(--vs-ink-3);
  }
  .vs-pricing-rows__action {
    margin-top: 14px;
  }
  @container (min-width: 860px) {
    .vs-pricing-rows__row {
      grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
      gap: 32px;
      align-items: start;
    }
    .vs-pricing-rows__features {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .vs-pricing-rows__buy {
      text-align: right;
    }
  }
</style>
```


---

# Pricing Commission

> One lead offer shown large with the other packages as a quiet list. For services that quote by appointment.

- **Slug:** `pricing-commission`
- **Kind:** section · **Category:** Pricing
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/pricing-commission
- **All files in one bundle:** https://viewership.ai/design/components/pricing-commission.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/pricing-commission.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/pricing-commission/`:

   - `PricingCommission.astro` (raw: https://viewership.ai/design/raw/pricing-commission/PricingCommission.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)
   - `icon`: `Icon.astro`, `icons.ts` (docs: https://viewership.ai/design/components/icon.md)

npm packages: none.

## Usage

```astro
---
import PricingCommission from "../components/viewership/pricing-commission/PricingCommission.astro";
---

<PricingCommission />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import PricingCommission from "./PricingCommission.astro";
---

<PricingCommission
  title="Commissions"
  accent="by appointment."
  intro="Larger projects are scoped on a call and quoted in writing."
  tiers={[
    {
      name: "Season",
      price: "$420",
      period: "per year, billed once",
      description: "Our most chosen plan. Everything is repaired, nothing is replaced.",
      features: ["Unlimited repairs", "Annual waterproofing", "Loaner pack while we work", "Priority bench slot", "Resale credit on trade-ins", "A named contact on the bench"],
      cta: { label: "Request an introduction", href: "#" },
      featured: true,
    },
    { name: "Trail", price: "$180", description: "One repair, done at the bench.", cta: { label: "Book", href: "#" } },
    { name: "Expedition", price: "By quote", description: "Fleets of twelve or more.", cta: { label: "Ask", href: "#" } },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `intro` | `string` |  | Supporting paragraph. |
| `tiers` | `{ name: string; price: string; period?: string; description?: string; features?: string[]; cta: { label; href }; featured?: boolean }[]` |  | Packages. The featured one leads; the rest are listed beneath. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/pricing-commission/PricingCommission.astro`

```astro
---
/**
 * PricingCommission: one lead offer shown large, the other packages as a
 * quiet list beneath. Suits studios and services that quote by appointment.
 * The featured tier leads (or the first, if none is featured).
 *
 * @example
 * <PricingCommission title="Commissions" accent="by appointment." tiers={[...]} />
 */
import Button from "../button/Button.astro";
import Icon from "../icon/Icon.astro";

interface Cta {
  label: string;
  href: string;
}
interface Tier {
  name: string;
  price: string;
  period?: string;
  description?: string;
  features?: string[];
  cta: Cta;
  featured?: boolean;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  tiers: Tier[];
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, tiers, as: Heading = "h2", class: className } = Astro.props;
const leadIndex = Math.max(0, tiers.findIndex((t) => t.featured));
const lead = tiers[leadIndex];
const rest = tiers.filter((_, i) => i !== leadIndex);
---

<section class:list={["vs-pricing-commission", className]}>
  <div class="vs-pricing-commission__inner">
    <Heading class="vs-display vs-pricing-commission__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
    {intro && <p class="vs-pricing-commission__intro">{intro}</p>}
    {
      lead && (
        <article class="vs-pricing-commission__lead">
          <div>
            <h3 class="vs-pricing-commission__name">{lead.name}</h3>
            <p class="vs-display vs-pricing-commission__price">{lead.price}</p>
            {lead.period && <p class="vs-pricing-commission__period">{lead.period}</p>}
            {lead.description && <p class="vs-pricing-commission__desc">{lead.description}</p>}
            <div class="vs-pricing-commission__action">
              <Button href={lead.cta.href} variant="primary">{lead.cta.label}</Button>
            </div>
          </div>
          {lead.features && lead.features.length > 0 && (
            <ul class="vs-pricing-commission__features">
              {lead.features.map((f) => (
                <li>
                  <Icon name="check" size={16} strokeWidth={2.25} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          )}
        </article>
      )
    }
    {
      rest.length > 0 && (
        <ul class="vs-pricing-commission__also" aria-label="Other packages">
          {rest.map((t) => (
            <li>
              <span class="vs-pricing-commission__also-name">{t.name}</span>
              <span class="vs-pricing-commission__also-desc">{t.description}</span>
              <span class="vs-pricing-commission__also-price">{t.price}</span>
              <a class="vs-pricing-commission__also-link" href={t.cta.href}>
                {t.cta.label}
                <span class="vs-sr-only">: {t.name}</span>
                <Icon name="arrow-right" size={14} />
              </a>
            </li>
          ))}
        </ul>
      )
    }
  </div>
</section>

<style>
  .vs-pricing-commission {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-pricing-commission__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-pricing-commission__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-pricing-commission__intro {
    max-width: 34rem;
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-pricing-commission__lead {
    display: grid;
    gap: 32px;
    margin-top: clamp(28px, 5cqi, 56px);
    padding: clamp(24px, 5cqi, 48px);
    border: var(--vs-border-w) solid var(--vs-line);
    border-radius: var(--vs-radius-window);
    background: var(--vs-surface);
    box-shadow: var(--vs-pop-shadow, var(--vs-shadow-md));
  }
  .vs-pricing-commission__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
  }
  .vs-pricing-commission__price {
    margin-top: 20px;
    font-size: clamp(3rem, 10cqi, 6rem);
    line-height: 1;
  }
  .vs-pricing-commission__period {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--vs-ink-3);
  }
  .vs-pricing-commission__desc {
    max-width: 26rem;
    margin: 16px 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-pricing-commission__action {
    margin-top: 24px;
  }
  .vs-pricing-commission__features {
    display: grid;
    gap: 12px;
    align-content: start;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
  }
  .vs-pricing-commission__features li {
    display: flex;
    gap: 10px;
    line-height: 1.4;
  }
  .vs-pricing-commission__features :global(.vs-icon) {
    margin-top: 2px;
    color: var(--vs-accent-ink);
  }
  @container (min-width: 760px) {
    .vs-pricing-commission__lead {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(32px, 6cqi, 72px);
    }
    .vs-pricing-commission__features {
      padding-left: clamp(24px, 4cqi, 48px);
      border-left: var(--vs-border-w) solid var(--vs-line);
    }
  }
  .vs-pricing-commission__also {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .vs-pricing-commission__also li {
    display: grid;
    gap: 4px 20px;
    padding: 18px 4px;
    border-bottom: var(--vs-border-w) solid var(--vs-line-strong);
  }
  .vs-pricing-commission__also-name,
  .vs-pricing-commission__also-price {
    font-weight: 600;
  }
  .vs-pricing-commission__also-desc {
    font-size: 0.9375rem;
    color: var(--vs-ink-2);
  }
  .vs-pricing-commission__also-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--vs-ink);
    text-underline-offset: 4px;
  }
  .vs-pricing-commission__also-link:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  @container (min-width: 760px) {
    .vs-pricing-commission__also li {
      grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr) auto;
      align-items: baseline;
    }
  }
</style>
```


---

# Pricing Toggle

> Plans with a monthly or yearly switch built from native radios and CSS. No JavaScript.

- **Slug:** `pricing-toggle`
- **Kind:** section · **Category:** Pricing
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/pricing-toggle
- **All files in one bundle:** https://viewership.ai/design/components/pricing-toggle.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/pricing-toggle.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/pricing-toggle/`:

   - `PricingToggle.astro` (raw: https://viewership.ai/design/raw/pricing-toggle/PricingToggle.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)
   - `icon`: `Icon.astro`, `icons.ts` (docs: https://viewership.ai/design/components/icon.md)

npm packages: none.

## Usage

```astro
---
import PricingToggle from "../components/viewership/pricing-toggle/PricingToggle.astro";
---

<PricingToggle />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import PricingToggle from "./PricingToggle.astro";
---

<PricingToggle
  title="Gear club"
  accent="membership."
  intro="Rentals, repairs and member pricing in one subscription. Sample prices."
  saving="2 months free"
  tiers={[
    { name: "Weekend", monthly: "$9", yearly: "$90", description: "For a few trips a year.", features: ["Two rentals a month", "10% off repairs", "Member events"], cta: { label: "Join Weekend", href: "#" } },
    {
      name: "Trail",
      monthly: "$19",
      yearly: "$190",
      description: "For people out most weekends.",
      features: ["Unlimited rentals", "Free repairs", "Early access to drops", "Member events"],
      cta: { label: "Join Trail", href: "#" },
      featured: true,
    },
    { name: "Guide", monthly: "$39", yearly: "$390", description: "For guides and instructors.", features: ["Everything in Trail", "Fleet discounts", "Loaner kit on request"], cta: { label: "Join Guide", href: "#" } },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `intro` | `string` |  | Supporting paragraph. |
| `tiers` | `{ name: string; monthly: string; yearly: string; description?: string; features: string[]; cta: { label; href }; featured?: boolean }[]` |  | Plans with both prices. |
| `saving` | `string` |  | Badge beside the yearly option, e.g. "Save 20%". |
| `monthlyLabel` | `string` | `"Monthly"` | Label for the monthly option. |
| `yearlyLabel` | `string` | `"Yearly"` | Label for the yearly option. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/pricing-toggle/PricingToggle.astro`

```astro
---
/**
 * PricingToggle: plans with a monthly / yearly switch. The switch is two
 * native radio buttons and CSS :has(), so it needs no JavaScript and the
 * monthly prices show if CSS fails.
 *
 * @example
 * <PricingToggle title="Plans" saving="Two months free" tiers={[
 *   { name: "Solo", monthly: "$12", yearly: "$120", features: ["One user"], cta: { label: "Start", href: "/start" } },
 * ]} />
 */
import Button from "../button/Button.astro";
import Icon from "../icon/Icon.astro";

interface Cta {
  label: string;
  href: string;
}
interface Tier {
  name: string;
  monthly: string;
  yearly: string;
  description?: string;
  features: string[];
  cta: Cta;
  featured?: boolean;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  tiers: Tier[];
  /** Label next to the yearly option, e.g. "Save 20%". */
  saving?: string;
  monthlyLabel?: string;
  yearlyLabel?: string;
  as?: "h2" | "h3";
  class?: string;
}

const {
  title,
  accent,
  intro,
  tiers,
  saving,
  monthlyLabel = "Monthly",
  yearlyLabel = "Yearly",
  as: Heading = "h2",
  class: className,
} = Astro.props;
const group = `vs-pricing-toggle-${Math.random().toString(36).slice(2, 8)}`;
---

<section class:list={["vs-pricing-toggle", className]}>
  <div class="vs-pricing-toggle__inner">
    <header class="vs-pricing-toggle__head">
      <Heading class="vs-display vs-pricing-toggle__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {intro && <p class="vs-pricing-toggle__intro">{intro}</p>}
      <fieldset class="vs-pricing-toggle__switch">
        <legend class="vs-sr-only">Billing period</legend>
        <label>
          <input type="radio" name={group} value="monthly" checked />
          <span>{monthlyLabel}</span>
        </label>
        <label>
          <input type="radio" name={group} value="yearly" class="vs-pricing-toggle__yearly" />
          <span>
            {yearlyLabel}
            {saving && <em class="vs-pricing-toggle__saving">{saving}</em>}
          </span>
        </label>
      </fieldset>
    </header>
    <ul class="vs-pricing-toggle__tiers">
      {
        tiers.map((t) => (
          <li class:list={["vs-pricing-toggle__tier", { "is-featured": t.featured }]}>
            <h3 class="vs-pricing-toggle__name">{t.name}</h3>
            {t.description && <p class="vs-pricing-toggle__desc">{t.description}</p>}
            <p class="vs-pricing-toggle__price">
              <span class="vs-display vs-pricing-toggle__m">
                {t.monthly}
                <small>/ month</small>
              </span>
              <span class="vs-display vs-pricing-toggle__y">
                {t.yearly}
                <small>/ year</small>
              </span>
            </p>
            <div class="vs-pricing-toggle__action">
              <Button href={t.cta.href} variant={t.featured ? "accent" : "secondary"}>{t.cta.label}</Button>
            </div>
            <ul class="vs-pricing-toggle__features">
              {t.features.map((f) => (
                <li>
                  <Icon name="check" size={16} strokeWidth={2.25} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </li>
        ))
      }
    </ul>
  </div>
</section>

<style>
  .vs-pricing-toggle {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-pricing-toggle__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-pricing-toggle__head {
    display: grid;
    justify-items: center;
    text-align: center;
  }
  .vs-pricing-toggle__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-pricing-toggle__intro {
    max-width: 32rem;
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }

  /* The switch */
  .vs-pricing-toggle__switch {
    display: inline-flex;
    gap: 2px;
    margin: 2rem 0 0;
    padding: 3px;
    border: var(--vs-border-w) solid var(--vs-line-strong);
    border-radius: var(--vs-radius-pill);
    background: var(--vs-field);
  }
  .vs-pricing-toggle__switch label {
    position: relative;
    cursor: pointer;
  }
  .vs-pricing-toggle__switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .vs-pricing-toggle__switch span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--vs-radius-pill);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--vs-ink-2);
    transition: background-color var(--vs-duration-fast) ease-out, color var(--vs-duration-fast) ease-out;
  }
  .vs-pricing-toggle__switch input:checked + span {
    background: var(--vs-surface);
    color: var(--vs-ink);
    box-shadow: var(--vs-shadow-btn);
  }
  .vs-pricing-toggle__switch input:focus-visible + span {
    box-shadow: var(--vs-focus-ring);
  }
  .vs-pricing-toggle__saving {
    padding: 2px 7px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 600;
  }

  .vs-pricing-toggle__tiers {
    display: grid;
    gap: 16px;
    margin: clamp(28px, 5cqi, 48px) 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
  }
  @container (min-width: 760px) {
    .vs-pricing-toggle__tiers {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
  }
  .vs-pricing-toggle__tier {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: var(--vs-border-w) solid var(--vs-line);
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-sm);
  }
  .vs-pricing-toggle__tier.is-featured {
    border-color: var(--vs-accent);
    box-shadow: 0 0 0 1px var(--vs-accent), var(--vs-pop-shadow, var(--vs-shadow-md));
  }
  .vs-pricing-toggle__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
  }
  .vs-pricing-toggle__desc {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--vs-ink-2);
  }
  .vs-pricing-toggle__price {
    margin: 24px 0 0;
  }
  .vs-pricing-toggle__price .vs-display {
    font-size: clamp(2.25rem, 5cqi, 3rem);
    line-height: 1;
  }
  .vs-pricing-toggle__price small {
    font-family: var(--vs-font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vs-ink-3);
  }
  .vs-pricing-toggle__y {
    display: none;
  }
  .vs-pricing-toggle:has(.vs-pricing-toggle__yearly:checked) .vs-pricing-toggle__y {
    display: inline;
  }
  .vs-pricing-toggle:has(.vs-pricing-toggle__yearly:checked) .vs-pricing-toggle__m {
    display: none;
  }
  .vs-pricing-toggle__action {
    margin: 20px 0 24px;
  }
  .vs-pricing-toggle__action :global(.vs-button) {
    width: 100%;
  }
  .vs-pricing-toggle__features {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: var(--vs-border-w) solid var(--vs-line);
    font-size: 0.9375rem;
  }
  .vs-pricing-toggle__features li {
    display: flex;
    gap: 10px;
    line-height: 1.4;
  }
  .vs-pricing-toggle__features :global(.vs-icon) {
    margin-top: 2px;
    color: var(--vs-accent-ink);
  }
</style>
```


---

# FAQ Accordion

> A centred column of expandable question cards on native details, with FAQPage structured data.

- **Slug:** `faq-accordion`
- **Kind:** section · **Category:** Conversion
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/faq-accordion
- **All files in one bundle:** https://viewership.ai/design/components/faq-accordion.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/faq-accordion.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/faq-accordion/`:

   - `FaqAccordion.astro` (raw: https://viewership.ai/design/raw/faq-accordion/FaqAccordion.astro.txt)

npm packages: none.

## Usage

```astro
---
import FaqAccordion from "../components/viewership/faq-accordion/FaqAccordion.astro";
---

<FaqAccordion />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FaqAccordion from "./FaqAccordion.astro";
---

<FaqAccordion
  title="Questions,"
  accent="answered."
  schema={false}
  items={[
    { q: "What does the repair promise cover?", a: "Stitching, zips, seam tape and fabric patches on anything we made, for as long as you own it." },
    { q: "How long does a repair take?", a: "Two working days on average once the pack reaches the bench, plus shipping both ways." },
    { q: "Do you ship outside the United States?", a: "Yes, to Canada and the UK today. Duties are shown at checkout." },
    { q: "Can I return something I have used?", a: "Within 60 days, yes. Tell us what did not work and we will take it back." },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `intro` | `string` |  | Supporting paragraph. |
| `items` | `{ q: string; a: string }[]` |  | Questions and plain-text answers. |
| `openFirst` | `boolean` | `true` | Open the first question on load. |
| `schema` | `boolean` | `true` | Emit FAQPage JSON-LD. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/faq-accordion/FaqAccordion.astro`

```astro
---
/**
 * FaqAccordion: one centred column of expandable questions on native
 * <details>, with FAQPage JSON-LD included. Works without JavaScript.
 * Set `schema={false}` if the page already emits FAQPage markup.
 *
 * @example
 * <FaqAccordion title="Questions," accent="answered." items={[{ q: "Do you ship abroad?", a: "Yes." }]} />
 */
interface Item {
  q: string;
  /** Plain text. Also used verbatim in the structured data. */
  a: string;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  items: Item[];
  openFirst?: boolean;
  schema?: boolean;
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, items, openFirst = true, schema = true, as: Heading = "h2", class: className } = Astro.props;
const jsonLd = JSON.stringify({
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: items.map((i) => ({ "@type": "Question", name: i.q, acceptedAnswer: { "@type": "Answer", text: i.a } })),
}).replace(/</g, "\\u003c");
---

<section class:list={["vs-faq-accordion", className]}>
  <div class="vs-faq-accordion__inner">
    <header class="vs-faq-accordion__head">
      <Heading class="vs-display vs-faq-accordion__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {intro && <p class="vs-faq-accordion__intro">{intro}</p>}
    </header>
    <div class="vs-faq-accordion__list">
      {
        items.map((item, i) => (
          <details class="vs-faq-accordion__row" open={openFirst && i === 0}>
            <summary>
              <span class="vs-faq-accordion__q">{item.q}</span>
              <span class="vs-faq-accordion__mark" aria-hidden="true" />
            </summary>
            <p class="vs-faq-accordion__a">{item.a}</p>
          </details>
        ))
      }
    </div>
  </div>
  {schema && <script is:inline type="application/ld+json" set:html={jsonLd} />}
</section>

<style>
  .vs-faq-accordion {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-faq-accordion__inner {
    max-width: 52rem;
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-faq-accordion__head {
    text-align: center;
  }
  .vs-faq-accordion__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-faq-accordion__intro {
    max-width: 32rem;
    margin: 1.25rem auto 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-faq-accordion__list {
    display: grid;
    gap: 10px;
    margin-top: clamp(28px, 5cqi, 56px);
  }
  .vs-faq-accordion__row {
    border: var(--vs-border-w) solid var(--vs-line);
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    transition: box-shadow var(--vs-duration) var(--vs-ease-out);
  }
  .vs-faq-accordion__row[open] {
    box-shadow: var(--vs-shadow-md);
  }
  .vs-faq-accordion__row summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px;
    border-radius: inherit;
    cursor: pointer;
    list-style: none;
  }
  .vs-faq-accordion__row summary::-webkit-details-marker {
    display: none;
  }
  .vs-faq-accordion__row summary:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .vs-faq-accordion__q {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
  }
  .vs-faq-accordion__a {
    margin: 0;
    padding: 0 22px 20px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--vs-ink-2);
  }
  .vs-faq-accordion__mark {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-field);
  }
  .vs-faq-accordion__mark::before,
  .vs-faq-accordion__mark::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 13px;
    width: 12px;
    height: 2px;
    background: var(--vs-ink);
    transition: transform var(--vs-duration) var(--vs-ease-out);
  }
  .vs-faq-accordion__mark::after {
    transform: rotate(90deg);
  }
  .vs-faq-accordion__row[open] .vs-faq-accordion__mark::after {
    transform: rotate(0deg);
  }
</style>
```


---

# FAQ Split

> Headline and a contact link pinned left, numbered ruled questions on the right. FAQPage data included.

- **Slug:** `faq-split`
- **Kind:** section · **Category:** Conversion
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/faq-split
- **All files in one bundle:** https://viewership.ai/design/components/faq-split.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/faq-split.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/faq-split/`:

   - `FaqSplit.astro` (raw: https://viewership.ai/design/raw/faq-split/FaqSplit.astro.txt)

npm packages: none.

## Usage

```astro
---
import FaqSplit from "../components/viewership/faq-split/FaqSplit.astro";
---

<FaqSplit />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FaqSplit from "./FaqSplit.astro";
---

<FaqSplit
  title="Before you"
  accent="order."
  intro="The short version of how we work."
  contact={{ label: "Ask the bench a question", href: "#" }}
  schema={false}
  items={[
    { q: "What does the repair promise cover?", a: "Stitching, zips, seam tape and fabric patches on anything we made, for as long as you own it. Damage from a fire or a bear is on you." },
    { q: "How long does a repair take?", a: "Two working days on average once the pack reaches the bench, plus shipping both ways. Rush slots open each Friday." },
    { q: "Where are your fabrics made?", a: "Shells are woven in Portugal and finished in Wisconsin. Every product page lists the mill and the batch." },
    { q: "Do you ship outside the United States?", a: "Yes, to Canada and the UK today. Duties are shown at checkout so there are no surprises." },
    { q: "Can I return something I have used?", a: "Within 60 days, yes. Tell us what did not work and we will take it back, no form to fill in." },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `intro` | `string` |  | Supporting paragraph. |
| `contact` | `{ label: string; href: string }` |  | Link for questions not on the list. |
| `items` | `{ q: string; a: string }[]` |  | Questions and plain-text answers. |
| `openFirst` | `boolean` | `false` | Open the first question on load. |
| `schema` | `boolean` | `true` | Emit FAQPage JSON-LD. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/faq-split/FaqSplit.astro`

```astro
---
/**
 * FaqSplit: headline and a contact prompt pinned on the left, ruled
 * questions on the right. Native <details>, FAQPage JSON-LD included.
 *
 * @example
 * <FaqSplit title="Before you" accent="order." contact={{ label: "Write to us", href: "/contact" }} items={[...]} />
 */
interface Item {
  q: string;
  a: string;
}
interface Link {
  label: string;
  href: string;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  /** A link under the intro for questions not on the list. */
  contact?: Link;
  items: Item[];
  openFirst?: boolean;
  schema?: boolean;
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, contact, items, openFirst = false, schema = true, as: Heading = "h2", class: className } = Astro.props;
const jsonLd = JSON.stringify({
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: items.map((i) => ({ "@type": "Question", name: i.q, acceptedAnswer: { "@type": "Answer", text: i.a } })),
}).replace(/</g, "\\u003c");
---

<section class:list={["vs-faq-split", className]}>
  <div class="vs-faq-split__inner">
    <header class="vs-faq-split__head">
      <Heading class="vs-display vs-faq-split__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {intro && <p class="vs-faq-split__intro">{intro}</p>}
      {
        contact && (
          <a class="vs-faq-split__contact" href={contact.href}>
            {contact.label}
          </a>
        )
      }
    </header>
    <div class="vs-faq-split__list">
      {
        items.map((item, i) => (
          <details class="vs-faq-split__row" open={openFirst && i === 0}>
            <summary>
              <span class="vs-faq-split__num" aria-hidden="true">{String(i + 1).padStart(2, "0")}</span>
              <span class="vs-faq-split__q">{item.q}</span>
              <span class="vs-faq-split__mark" aria-hidden="true" />
            </summary>
            <p class="vs-faq-split__a">{item.a}</p>
          </details>
        ))
      }
    </div>
  </div>
  {schema && <script is:inline type="application/ld+json" set:html={jsonLd} />}
</section>

<style>
  .vs-faq-split {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-faq-split__inner {
    display: grid;
    gap: clamp(28px, 5cqi, 56px);
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-faq-split__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-faq-split__intro {
    max-width: 24rem;
    margin: 1.25rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-faq-split__contact {
    display: inline-block;
    margin-top: 1.25rem;
    padding-bottom: 2px;
    border-bottom: calc(var(--vs-border-w) + 1px) solid var(--vs-accent);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--vs-ink);
    text-decoration: none;
  }
  .vs-faq-split__contact:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .vs-faq-split__list {
    border-top: calc(var(--vs-border-w) + 1px) solid var(--vs-ink);
  }
  .vs-faq-split__row {
    border-bottom: var(--vs-border-w) solid var(--vs-line-strong);
  }
  .vs-faq-split__row summary {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 20px 4px;
    cursor: pointer;
    list-style: none;
  }
  .vs-faq-split__row summary::-webkit-details-marker {
    display: none;
  }
  .vs-faq-split__row summary:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .vs-faq-split__num {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--vs-ink-3);
  }
  .vs-faq-split__q {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
  }
  .vs-faq-split__a {
    margin: 0;
    padding: 0 4px 22px calc(2.25rem + 16px);
    max-width: 40rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--vs-ink-2);
  }
  .vs-faq-split__mark {
    position: relative;
    width: 14px;
    height: 14px;
  }
  .vs-faq-split__mark::before,
  .vs-faq-split__mark::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 2px;
    background: var(--vs-ink);
    transition: transform var(--vs-duration) var(--vs-ease-out);
  }
  .vs-faq-split__mark::after {
    transform: rotate(90deg);
  }
  .vs-faq-split__row[open] .vs-faq-split__mark::after {
    transform: rotate(0deg);
  }
  .vs-faq-split__row[open] .vs-faq-split__num {
    color: var(--vs-accent-ink);
  }
  @container (min-width: 820px) {
    .vs-faq-split__inner {
      grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
      gap: clamp(32px, 6cqi, 88px);
      align-items: start;
    }
    .vs-faq-split__head {
      position: sticky;
      top: 24px;
    }
  }
</style>
```


---

# FAQ Open

> Every answer visible in a two-column grid on a tinted ground. For short answers people skim.

- **Slug:** `faq-open`
- **Kind:** section · **Category:** Conversion
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/faq-open
- **All files in one bundle:** https://viewership.ai/design/components/faq-open.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/faq-open.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/faq-open/`:

   - `FaqOpen.astro` (raw: https://viewership.ai/design/raw/faq-open/FaqOpen.astro.txt)

npm packages: none.

## Usage

```astro
---
import FaqOpen from "../components/viewership/faq-open/FaqOpen.astro";
---

<FaqOpen />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FaqOpen from "./FaqOpen.astro";
---

<FaqOpen
  title="Plain"
  accent="answers."
  schema={false}
  items={[
    { q: "What does the repair promise cover?", a: "Stitching, zips, seam tape and patches on anything we made, for as long as you own it." },
    { q: "How long does a repair take?", a: "Two working days on average, plus shipping both ways." },
    { q: "Do you ship abroad?", a: "To Canada and the UK today, with duties shown at checkout." },
    { q: "Can I return used gear?", a: "Within 60 days, yes. No form to fill in." },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `intro` | `string` |  | Supporting paragraph. |
| `items` | `{ q: string; a: string }[]` |  | Questions and plain-text answers. |
| `schema` | `boolean` | `true` | Emit FAQPage JSON-LD. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/faq-open/FaqOpen.astro`

```astro
---
/**
 * FaqOpen: every answer visible in a two-column grid. Best for four to eight
 * short answers that people skim. FAQPage JSON-LD included.
 *
 * @example
 * <FaqOpen title="Plain" accent="answers." items={[{ q: "...", a: "..." }]} />
 */
interface Item {
  q: string;
  a: string;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  items: Item[];
  schema?: boolean;
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, items, schema = true, as: Heading = "h2", class: className } = Astro.props;
const jsonLd = JSON.stringify({
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: items.map((i) => ({ "@type": "Question", name: i.q, acceptedAnswer: { "@type": "Answer", text: i.a } })),
}).replace(/</g, "\\u003c");
---

<section class:list={["vs-faq-open", className]}>
  <div class="vs-faq-open__inner">
    <Heading class="vs-display vs-faq-open__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
    {intro && <p class="vs-faq-open__intro">{intro}</p>}
    <dl class="vs-faq-open__grid">
      {
        items.map((item) => (
          <div class="vs-faq-open__pair">
            <dt>{item.q}</dt>
            <dd>{item.a}</dd>
          </div>
        ))
      }
    </dl>
  </div>
  {schema && <script is:inline type="application/ld+json" set:html={jsonLd} />}
</section>

<style>
  .vs-faq-open {
    container-type: inline-size;
    background: var(--vs-canvas);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-faq-open__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-faq-open__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-faq-open__intro {
    max-width: 32rem;
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-faq-open__grid {
    display: grid;
    gap: 36px clamp(24px, 5cqi, 64px);
    margin: clamp(28px, 5cqi, 56px) 0 0;
  }
  @container (min-width: 700px) {
    .vs-faq-open__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .vs-faq-open__pair dt {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
  }
  .vs-faq-open__pair dt::before {
    content: "";
    display: block;
    width: 28px;
    height: calc(var(--vs-border-w) + 2px);
    margin-bottom: 14px;
    background: var(--vs-accent);
  }
  .vs-faq-open__pair dd {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--vs-ink-2);
  }
</style>
```


---

# CTA Band

> The closing call to action on a full-width accent band, centred.

- **Slug:** `cta-band`
- **Kind:** section · **Category:** Conversion
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/cta-band
- **All files in one bundle:** https://viewership.ai/design/components/cta-band.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/cta-band.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/cta-band/`:

   - `CtaBand.astro` (raw: https://viewership.ai/design/raw/cta-band/CtaBand.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)

npm packages: none.

## Usage

```astro
---
import CtaBand from "../components/viewership/cta-band/CtaBand.astro";
---

<CtaBand />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import CtaBand from "./CtaBand.astro";
---

<CtaBand
  title="Ready for a"
  accent="proper repair?"
  body="Send the pack back and we will have it on the trail again in two days."
  primary={{ label: "Book a repair", href: "#" }}
  secondary={{ label: "See the plans", href: "#" }}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `body` | `string` |  | Supporting line. |
| `primary` | `{ label: string; href: string }` |  | Main action. |
| `secondary` | `{ label: string; href: string }` |  | Second action. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/cta-band/CtaBand.astro`

```astro
---
/**
 * CtaBand: the closing ask on a full-width accent band, centred.
 *
 * @example
 * <CtaBand title="Ready for a" accent="proper repair?" primary={{ label: "Book a repair", href: "/repairs" }} />
 */
import Button from "../button/Button.astro";

interface Cta {
  label: string;
  href: string;
}
interface Props {
  title: string;
  accent?: string;
  body?: string;
  primary: Cta;
  secondary?: Cta;
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, body, primary, secondary, as: Heading = "h2", class: className } = Astro.props;
---

<section class:list={["vs-cta-band", className]}>
  <div class="vs-cta-band__inner">
    <Heading class="vs-display vs-cta-band__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
    {body && <p class="vs-cta-band__body">{body}</p>}
    <div class="vs-cta-band__actions">
      <Button href={primary.href} variant="primary">{primary.label}</Button>
      {secondary && <Button href={secondary.href} variant="secondary">{secondary.label}</Button>}
    </div>
  </div>
</section>

<style>
  .vs-cta-band {
    container-type: inline-size;
    background: var(--vs-accent);
    color: var(--vs-on-accent);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
    text-align: center;
  }
  .vs-cta-band__inner {
    display: grid;
    justify-items: center;
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-cta-band__title {
    font-size: clamp(2.25rem, 7cqi, 4.75rem);
  }
  .vs-cta-band__title :global(em) {
    color: inherit;
    background: none;
  }
  .vs-cta-band__body {
    max-width: 32rem;
    margin: 1rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    opacity: 0.85;
  }
  .vs-cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 2rem;
  }
</style>
```


---

# CTA Card

> An inset card with copy beside the actions and an optional square image.

- **Slug:** `cta-card`
- **Kind:** section · **Category:** Conversion
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/cta-card
- **All files in one bundle:** https://viewership.ai/design/components/cta-card.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/cta-card.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/cta-card/`:

   - `CtaCard.astro` (raw: https://viewership.ai/design/raw/cta-card/CtaCard.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)

npm packages: none.

## Usage

```astro
---
import CtaCard from "../components/viewership/cta-card/CtaCard.astro";
---

<CtaCard />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import CtaCard from "./CtaCard.astro";
---

<CtaCard
  title="Not sure what's wrong with it?"
  body="Send us a photo. A person on the bench will reply within a day."
  primary={{ label: "Send a photo", href: "#" }}
  secondary={{ label: "Read the care guides", href: "#" }}
>
  <img slot="media" src="/ui/demo/halftone-sun.webp" alt="" width="1200" height="1200" loading="lazy" />
</CtaCard>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `body` | `string` |  | Supporting line. |
| `primary` | `{ label: string; href: string }` |  | Main action. |
| `secondary` | `{ label: string; href: string }` |  | Text-style second action. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |
| `slot: media` | `slot` |  | Optional square image at the start of the card. |

## Source

### `src/components/viewership/cta-card/CtaCard.astro`

```astro
---
/**
 * CtaCard: an inset card with copy on one side and the actions on the other,
 * plus an optional image strip. Sits on the page ground.
 *
 * @example
 * <CtaCard title="Not sure what's wrong with it?" primary={{ label: "Send a photo", href: "/help" }}>
 *   <img slot="media" src="/sun.webp" alt="" />
 * </CtaCard>
 */
import Button from "../button/Button.astro";

interface Cta {
  label: string;
  href: string;
}
interface Props {
  title: string;
  accent?: string;
  body?: string;
  primary: Cta;
  secondary?: Cta;
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, body, primary, secondary, as: Heading = "h2", class: className } = Astro.props;
const hasMedia = Astro.slots.has("media");
---

<section class:list={["vs-cta-card", { "has-media": hasMedia }, className]}>
  <div class="vs-cta-card__inner">
    <div class="vs-cta-card__panel">
      {
        hasMedia && (
          <div class="vs-cta-card__media">
            <slot name="media" />
          </div>
        )
      }
      <div class="vs-cta-card__copy">
        <Heading class="vs-display vs-cta-card__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
        {body && <p class="vs-cta-card__body">{body}</p>}
      </div>
      <div class="vs-cta-card__actions">
        <Button href={primary.href} variant="primary">{primary.label}</Button>
        {secondary && <Button href={secondary.href} variant="quiet">{secondary.label}</Button>}
      </div>
    </div>
  </div>
</section>

<style>
  .vs-cta-card {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-cta-card__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-cta-card__panel {
    display: grid;
    gap: 24px;
    align-items: center;
    overflow: hidden;
    padding: clamp(24px, 5cqi, 56px);
    border: var(--vs-border-w) solid var(--vs-line);
    border-radius: var(--vs-radius-window);
    background: var(--vs-surface);
    box-shadow: var(--vs-pop-shadow, var(--vs-shadow-md));
  }
  .vs-cta-card__media {
    width: 96px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--vs-radius-card);
  }
  .vs-cta-card__media :global(img) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .vs-cta-card__title {
    font-size: clamp(1.75rem, 4.5cqi, 3rem);
  }
  .vs-cta-card__body {
    max-width: 30rem;
    margin: 0.75rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-cta-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  @container (min-width: 760px) {
    .vs-cta-card__panel {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 40px;
    }
    .has-media .vs-cta-card__panel {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }
    .vs-cta-card__media {
      width: 120px;
    }
  }
</style>
```


---

# CTA Ink

> A dark band with an oversized headline and the actions tucked bottom right.

- **Slug:** `cta-ink`
- **Kind:** section · **Category:** Conversion
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/cta-ink
- **All files in one bundle:** https://viewership.ai/design/components/cta-ink.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/cta-ink.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/cta-ink/`:

   - `CtaInk.astro` (raw: https://viewership.ai/design/raw/cta-ink/CtaInk.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)

npm packages: none.

## Usage

```astro
---
import CtaInk from "../components/viewership/cta-ink/CtaInk.astro";
---

<CtaInk />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import CtaInk from "./CtaInk.astro";
---

<CtaInk
  title="Keep it"
  accent="going."
  body="Every pack we have ever made is still repairable. Send yours in."
  primary={{ label: "Book a repair", href: "#" }}
  secondary={{ label: "See the plans", href: "#" }}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Headline, set very large. |
| `accent` | `string` |  | Closing words, drawn in the accent colour. |
| `body` | `string` |  | Short line above the actions. |
| `primary` | `{ label: string; href: string }` |  | Main action (accent button). |
| `secondary` | `{ label: string; href: string }` |  | Second action. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/cta-ink/CtaInk.astro`

```astro
---
/**
 * CtaInk: a dark band with an oversized headline and the actions tucked
 * bottom right. The loudest way to end a page.
 *
 * @example
 * <CtaInk title="Keep it" accent="going." primary={{ label: "Book a repair", href: "/repairs" }} />
 */
import Button from "../button/Button.astro";

interface Cta {
  label: string;
  href: string;
}
interface Props {
  title: string;
  accent?: string;
  body?: string;
  primary: Cta;
  secondary?: Cta;
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, body, primary, secondary, as: Heading = "h2", class: className } = Astro.props;
---

<section class:list={["vs-cta-ink", className]}>
  <div class="vs-cta-ink__inner">
    <Heading class="vs-display vs-cta-ink__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
    <div class="vs-cta-ink__side">
      {body && <p class="vs-cta-ink__body">{body}</p>}
      <div class="vs-cta-ink__actions">
        <Button href={primary.href} variant="accent">{primary.label}</Button>
        {secondary && <Button href={secondary.href} variant="secondary">{secondary.label}</Button>}
      </div>
    </div>
  </div>
</section>

<style>
  .vs-cta-ink {
    container-type: inline-size;
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-cta-ink__inner {
    display: grid;
    gap: 36px;
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-cta-ink__title {
    font-size: clamp(2.75rem, 12cqi, 9rem);
    line-height: 0.94;
  }
  .vs-cta-ink__title :global(em) {
    color: var(--vs-em-color, var(--vs-accent));
  }
  .vs-cta-ink__body {
    max-width: 22rem;
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--vs-ink-inverse) 70%, transparent);
  }
  .vs-cta-ink__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  @container (min-width: 760px) {
    .vs-cta-ink__inner {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 56px;
    }
  }
</style>
```


---

# Newsletter

> Email sign-up with a short pitch and privacy line. A plain HTML form you point at any provider.

- **Slug:** `newsletter`
- **Kind:** section · **Category:** Conversion
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/newsletter
- **All files in one bundle:** https://viewership.ai/design/components/newsletter.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/newsletter.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/newsletter/`:

   - `Newsletter.astro` (raw: https://viewership.ai/design/raw/newsletter/Newsletter.astro.txt)

npm packages: none.

## Usage

```astro
---
import Newsletter from "../components/viewership/newsletter/Newsletter.astro";
---

<Newsletter />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import Newsletter from "./Newsletter.astro";
---

<Newsletter
  title="Field notes,"
  accent="monthly."
  body="Trip reports, repair tips and first look at new batches. One email a month."
  action="#"
  method="get"
  note="No spam. Unsubscribe in one click."
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Headline. |
| `accent` | `string` |  | Closing words of the headline. |
| `body` | `string` |  | Short pitch. |
| `action` | `string` |  | Form endpoint (your email provider or a serverless function). |
| `method` | `"post" \| "get"` | `"post"` | Form method. |
| `field` | `string` | `"email"` | Name of the email field. |
| `placeholder` | `string` | `"you@example.com"` | Input placeholder. |
| `button` | `string` | `"Subscribe"` | Button label. |
| `note` | `string` |  | Small print under the form. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/newsletter/Newsletter.astro`

```astro
---
/**
 * Newsletter: an email sign-up with a short pitch and a privacy line.
 *
 * A plain HTML form: point `action` at your provider (Buttondown, ConvertKit,
 * a Netlify or Vercel function) and set `field` to the name it expects. No
 * JavaScript; the browser validates the email.
 *
 * @example
 * <Newsletter title="Field notes," accent="monthly." action="https://example.com/subscribe" />
 */
interface Props {
  title: string;
  accent?: string;
  body?: string;
  /** Form endpoint. */
  action: string;
  method?: "post" | "get";
  /** Name of the email field your provider expects. */
  field?: string;
  placeholder?: string;
  button?: string;
  /** Small print under the form. */
  note?: string;
  as?: "h2" | "h3";
  class?: string;
}

const {
  title,
  accent,
  body,
  action,
  method = "post",
  field = "email",
  placeholder = "you@example.com",
  button = "Subscribe",
  note,
  as: Heading = "h2",
  class: className,
} = Astro.props;
const id = `vs-newsletter-${Math.random().toString(36).slice(2, 8)}`;
---

<section class:list={["vs-newsletter", className]}>
  <div class="vs-newsletter__inner">
    <div class="vs-newsletter__copy">
      <Heading class="vs-display vs-newsletter__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {body && <p class="vs-newsletter__body">{body}</p>}
    </div>
    <form class="vs-newsletter__form" action={action} method={method}>
      <label class="vs-sr-only" for={id}>Email address</label>
      <div class="vs-newsletter__field">
        <input id={id} type="email" name={field} placeholder={placeholder} autocomplete="email" required />
        <button type="submit">{button}</button>
      </div>
      {note && <p class="vs-newsletter__note">{note}</p>}
    </form>
  </div>
</section>

<style>
  .vs-newsletter {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-newsletter__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
    border-top: var(--vs-border-w) solid var(--vs-line-strong);
  }
  .vs-newsletter__title {
    font-size: clamp(1.75rem, 5cqi, 3.25rem);
  }
  .vs-newsletter__body {
    max-width: 28rem;
    margin: 0.75rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-newsletter__field {
    display: flex;
    gap: 6px;
    padding: 6px;
    border: var(--vs-border-w) solid var(--vs-line-strong);
    border-radius: var(--vs-radius-pill);
    background: var(--vs-surface);
    box-shadow: var(--vs-pop-shadow, var(--vs-shadow-sm));
  }
  .vs-newsletter__field:focus-within {
    box-shadow: var(--vs-focus-ring);
  }
  .vs-newsletter__field input {
    flex: 1;
    width: 0;
    min-width: 0;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--vs-ink);
    font: inherit;
    font-size: 0.9375rem;
  }
  .vs-newsletter__field input::placeholder {
    color: var(--vs-ink-3);
  }
  .vs-newsletter__field input:focus {
    outline: none;
  }
  .vs-newsletter__field button {
    flex: none;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
  }
  .vs-newsletter__field button:hover {
    opacity: 0.9;
  }
  .vs-newsletter__field button:focus-visible {
    outline: 2px solid var(--vs-accent);
    outline-offset: 2px;
  }
  .vs-newsletter__note {
    margin: 12px 0 0;
    padding-left: 14px;
    font-size: 0.75rem;
    color: var(--vs-ink-3);
  }
  @container (min-width: 820px) {
    .vs-newsletter__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
      align-items: center;
      gap: 64px;
    }
  }
</style>
```


---

# Header Bar

> Brand left, links and a call to action right. Folds into a native details menu when narrow. No JavaScript.

- **Slug:** `header-bar`
- **Kind:** section · **Category:** Site chrome
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/header-bar
- **All files in one bundle:** https://viewership.ai/design/components/header-bar.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/header-bar.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/header-bar/`:

   - `HeaderBar.astro` (raw: https://viewership.ai/design/raw/header-bar/HeaderBar.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)

npm packages: none.

## Usage

```astro
---
import HeaderBar from "../components/viewership/header-bar/HeaderBar.astro";
---

<HeaderBar />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import HeaderBar from "./HeaderBar.astro";
---

<div class="demo">
  <HeaderBar
    brand="Northwind"
    current="#journal"
    links={[
      { label: "Shop", href: "#shop" },
      { label: "Repairs", href: "#repairs" },
      { label: "Resale", href: "#resale" },
      { label: "Journal", href: "#journal" },
    ]}
    cta={{ label: "Book a repair", href: "#" }}
  />
  <div class="demo__page" aria-hidden="true"></div>
</div>

<style>
  .demo__page {
    height: 260px;
    background: repeating-linear-gradient(to bottom, transparent 0 40px, var(--vs-line-soft) 40px 41px), var(--vs-page);
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` | `string` |  | Brand name, set as text unless the logo slot is used. |
| `brandHref` | `string` | `"/"` | Where the brand links. |
| `links` | `{ label: string; href: string }[]` |  | Main navigation. |
| `cta` | `{ label: string; href: string }` |  | Button at the end of the nav. |
| `current` | `string` |  | Href of the current page (sets aria-current). |
| `sticky` | `boolean` | `false` | Stick to the top while scrolling. |
| `slot: logo` | `slot` |  | Replaces the text brand. |

## Source

### `src/components/viewership/header-bar/HeaderBar.astro`

```astro
---
/**
 * HeaderBar: brand left, links and a call to action right. On narrow widths
 * the links fold into a native <details> menu, so it needs no JavaScript.
 *
 * Mark the current page with `current` (an href) for aria-current.
 *
 * @example
 * <HeaderBar brand="Northwind" links={[{ label: "Shop", href: "/shop" }]} cta={{ label: "Book a repair", href: "/repairs" }} />
 */
import Button from "../button/Button.astro";

interface NavLink {
  label: string;
  href: string;
}
interface Props {
  brand: string;
  brandHref?: string;
  links: NavLink[];
  cta?: NavLink;
  /** Href of the current page. */
  current?: string;
  /** Stick to the top of the viewport while scrolling. */
  sticky?: boolean;
  class?: string;
}

const { brand, brandHref = "/", links, cta, current, sticky = false, class: className } = Astro.props;
---

<header class:list={["vs-header-bar", { "is-sticky": sticky }, className]}>
  <div class="vs-header-bar__inner">
    <a class="vs-header-bar__brand" href={brandHref}>
      <slot name="logo">{brand}</slot>
    </a>

    <nav class="vs-header-bar__nav" aria-label="Main">
      <ul>
        {
          links.map((l) => (
            <li>
              <a href={l.href} aria-current={l.href === current ? "page" : undefined}>
                {l.label}
              </a>
            </li>
          ))
        }
      </ul>
      {cta && <Button href={cta.href} variant="primary" size="sm">{cta.label}</Button>}
    </nav>

    <details class="vs-header-bar__menu">
      <summary>
        <span>Menu</span>
        <span class="vs-header-bar__burger" aria-hidden="true"><i></i><i></i></span>
      </summary>
      <nav class="vs-header-bar__sheet" aria-label="Main">
        <ul>
          {
            links.map((l) => (
              <li>
                <a href={l.href} aria-current={l.href === current ? "page" : undefined}>
                  {l.label}
                </a>
              </li>
            ))
          }
        </ul>
        {cta && <Button href={cta.href} variant="primary">{cta.label}</Button>}
      </nav>
    </details>
  </div>
</header>

<style>
  .vs-header-bar {
    container-type: inline-size;
    position: relative;
    z-index: 10;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
    border-bottom: var(--vs-border-w) solid var(--vs-line);
  }
  .vs-header-bar.is-sticky {
    position: sticky;
    top: 0;
  }
  .vs-header-bar__inner {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: 0 var(--vs-gutter);
  }
  .vs-header-bar a:not(.vs-button) {
    color: inherit;
    text-decoration: none;
  }
  .vs-header-bar a:focus-visible,
  .vs-header-bar summary:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .vs-header-bar__brand {
    font-family: var(--vs-font-display, var(--vs-font-sans));
    font-size: 1.25rem;
    font-weight: var(--vs-display-weight);
    letter-spacing: var(--vs-display-tracking);
    text-transform: var(--vs-display-transform);
  }
  .vs-header-bar ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Inline nav (wide) */
  .vs-header-bar__nav {
    display: none;
    align-items: center;
    gap: 28px;
  }
  .vs-header-bar__nav ul {
    display: flex;
    gap: 24px;
    font-size: 0.9375rem;
  }
  .vs-header-bar__nav a:not(.vs-button) {
    color: var(--vs-ink-2);
    transition: color var(--vs-duration-fast) ease-out;
  }
  .vs-header-bar__nav a:not(.vs-button):hover,
  .vs-header-bar__nav a[aria-current="page"] {
    color: var(--vs-ink);
  }
  .vs-header-bar__nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--vs-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  /* Folded menu (narrow) */
  .vs-header-bar__menu summary {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 14px;
    border: var(--vs-border-w) solid var(--vs-line-strong);
    border-radius: var(--vs-radius-pill);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
  }
  .vs-header-bar__menu summary::-webkit-details-marker {
    display: none;
  }
  .vs-header-bar__burger {
    display: grid;
    gap: 4px;
  }
  .vs-header-bar__burger i {
    display: block;
    width: 14px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--vs-duration) var(--vs-ease-out);
  }
  .vs-header-bar__menu[open] .vs-header-bar__burger i:first-child {
    transform: translateY(2.75px) rotate(45deg);
  }
  .vs-header-bar__menu[open] .vs-header-bar__burger i:last-child {
    transform: translateY(-2.75px) rotate(-45deg);
  }
  .vs-header-bar__sheet {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 20px;
    padding: 12px var(--vs-gutter) 24px;
    border-bottom: var(--vs-border-w) solid var(--vs-line);
    background: var(--vs-page);
    box-shadow: var(--vs-shadow-lg);
    animation: vs-fade-in var(--vs-duration) var(--vs-ease-out);
  }
  .vs-header-bar__sheet li a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--vs-line);
    font-size: 1.0625rem;
  }

  @container (min-width: 820px) {
    .vs-header-bar__nav {
      display: flex;
    }
    .vs-header-bar__menu {
      display: none;
    }
  }
</style>
```


---

# Icon

> Twenty Lucide glyphs as inline SVG, sized and labelled through props.

- **Slug:** `icon`
- **Kind:** atom · **Category:** Content
- **Source:** ported from [Lucide](https://lucide.dev) (ISC)
- **Docs page:** https://viewership.ai/design/components/icon
- **All files in one bundle:** https://viewership.ai/design/components/icon.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/icon.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy these files into `src/components/viewership/icon/`:

   - `Icon.astro` (raw: https://viewership.ai/design/raw/icon/Icon.astro.txt)
   - `icons.ts` (raw: https://viewership.ai/design/raw/icon/icons.ts.txt)

npm packages: none.

## Usage

```astro
---
import Icon from "../components/viewership/icon/Icon.astro";
---

<Icon />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import Icon from "./Icon.astro";
import { iconNames } from "./icons";
---

<ul class="grid">
  {
    iconNames.map((name) => (
      <li>
        <Icon name={name} size={22} />
        <span>{name}</span>
      </li>
    ))
  }
</ul>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 20px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--vs-ink);
  }
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  span {
    font-size: 11px;
    color: var(--vs-ink-3);
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `IconName` |  | Glyph key: arrow-right, check, zap, layers, shield and more. See `icons.ts`. |
| `size` | `number` | `20` | Width and height in pixels. |
| `strokeWidth` | `number` | `1.75` | Stroke weight. |
| `label` | `string` |  | Accessible name. Omit to mark the icon decorative. |

## Used by

[Feature Bento](https://viewership.ai/design/components/feature-bento.md), [Pricing Columns](https://viewership.ai/design/components/pricing-columns.md), [Pricing Rows](https://viewership.ai/design/components/pricing-rows.md), [Pricing Commission](https://viewership.ai/design/components/pricing-commission.md), [Pricing Toggle](https://viewership.ai/design/components/pricing-toggle.md)

## Source

### `src/components/viewership/icon/Icon.astro`

```astro
---
/**
 * Icon: a small set of Lucide glyphs (ISC) as inline SVG.
 *
 * Decorative by default (aria-hidden). Pass `label` when the icon carries
 * meaning on its own. Sections use it for feature icons and list ticks;
 * `name` accepts any key in `icons.ts`, so add glyphs there.
 *
 * @example
 * <Icon name="zap" />
 * <Icon name="check" size={16} label="Included" />
 */
import { iconPaths, type IconName } from "./icons";

interface Props {
  name: IconName;
  size?: number;
  strokeWidth?: number;
  /** Accessible name. Omit for decorative icons. */
  label?: string;
  class?: string;
}

const { name, size = 20, strokeWidth = 1.75, label, class: className } = Astro.props;


---

<svg
  class:list={["vs-icon", className]}
  width={size}
  height={size}
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width={strokeWidth}
  stroke-linecap="round"
  stroke-linejoin="round"
  role={label ? "img" : undefined}
  aria-label={label}
  aria-hidden={label ? undefined : "true"}
  focusable="false"
  set:html={iconPaths[name]}
/>

<style>
  .vs-icon {
    flex: none;
    vertical-align: middle;
  }
</style>
```

### `src/components/viewership/icon/icons.ts`

```ts
/** Lucide (ISC) glyph bodies, 24x24 viewBox, stroke-based. Add keys here to extend Icon. */
export const iconNames = [
  "arrow-right",
  "arrow-up-right",
  "bot",
  "chart",
  "check",
  "clock",
  "code",
  "file",
  "globe",
  "layers",
  "lock",
  "mail",
  "minus",
  "plus",
  "search",
  "shield",
  "sparkles",
  "star",
  "users",
  "zap",
] as const;
export type IconName = (typeof iconNames)[number];

export const iconPaths: Record<IconName, string> = {
  "arrow-right": '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
  "arrow-up-right": '<path d="M7 7h10v10"/><path d="M7 17 17 7"/>',
  bot: '<path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>',
  chart: '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
  check: '<path d="M20 6 9 17l-5-5"/>',
  clock: '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>',
  code: '<path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>',
  file: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 13H8"/><path d="M16 17H8"/><path d="M16 13h-2"/>',
  globe: '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>',
  layers: '<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
  lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
  mail: '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',
  minus: '<path d="M5 12h14"/>',
  plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
  search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
  shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
  sparkles: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/>',
  star: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
  users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
  zap: '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>',
};
```


---

# Header Centered

> Brand in the middle, links split either side, optional announcement strip. Folds into a details menu.

- **Slug:** `header-centered`
- **Kind:** section · **Category:** Site chrome
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/header-centered
- **All files in one bundle:** https://viewership.ai/design/components/header-centered.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/header-centered.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/header-centered/`:

   - `HeaderCentered.astro` (raw: https://viewership.ai/design/raw/header-centered/HeaderCentered.astro.txt)

npm packages: none.

## Usage

```astro
---
import HeaderCentered from "../components/viewership/header-centered/HeaderCentered.astro";
---

<HeaderCentered />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import HeaderCentered from "./HeaderCentered.astro";
---

<div>
  <HeaderCentered
    brand="Northwind"
    announcement="Free repair check-ups through October."
    announcementHref="#"
    current="#shop"
    left={[
      { label: "Shop", href: "#shop" },
      { label: "Repairs", href: "#repairs" },
      { label: "Resale", href: "#resale" },
    ]}
    right={[
      { label: "Journal", href: "#journal" },
      { label: "Account", href: "#account" },
      { label: "Cart (0)", href: "#cart" },
    ]}
  />
  <div class="demo__page" aria-hidden="true"></div>
</div>

<style>
  .demo__page {
    height: 260px;
    background: repeating-linear-gradient(to bottom, transparent 0 40px, var(--vs-line-soft) 40px 41px), var(--vs-page);
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` | `string` |  | Brand name, set as text unless the logo slot is used. |
| `brandHref` | `string` | `"/"` | Where the brand links. |
| `left` | `{ label: string; href: string }[]` |  | Links left of the brand. |
| `right` | `{ label: string; href: string }[]` | `[]` | Links right of the brand. |
| `announcement` | `string` |  | One line in a strip above the header. |
| `announcementHref` | `string` |  | Makes the announcement a link. |
| `current` | `string` |  | Href of the current page. |
| `slot: logo` | `slot` |  | Replaces the text brand. |

## Source

### `src/components/viewership/header-centered/HeaderCentered.astro`

```astro
---
/**
 * HeaderCentered: brand in the middle, links split either side, with an
 * optional announcement strip above. Editorial and shop-front sites suit it.
 * Folds into a native <details> menu when narrow.
 *
 * @example
 * <HeaderCentered brand="Northwind" left={[{ label: "Shop", href: "/shop" }]}
 *   right={[{ label: "Account", href: "/account" }]} announcement="Free repairs this month" />
 */
interface NavLink {
  label: string;
  href: string;
}
interface Props {
  brand: string;
  brandHref?: string;
  left: NavLink[];
  right?: NavLink[];
  /** One line in a strip above the header. */
  announcement?: string;
  announcementHref?: string;
  current?: string;
  class?: string;
}

const { brand, brandHref = "/", left, right = [], announcement, announcementHref, current, class: className } = Astro.props;
const all = [...left, ...right];
---

<header class:list={["vs-header-centered", className]}>
  {
    announcement && (
      <p class="vs-header-centered__strip">{announcementHref ? <a href={announcementHref}>{announcement}</a> : announcement}</p>
    )
  }
  <div class="vs-header-centered__inner">
    <nav class="vs-header-centered__side" aria-label="Main">
      <ul>
        {
          left.map((l) => (
            <li>
              <a href={l.href} aria-current={l.href === current ? "page" : undefined}>
                {l.label}
              </a>
            </li>
          ))
        }
      </ul>
    </nav>

    <a class="vs-header-centered__brand" href={brandHref}>
      <slot name="logo">{brand}</slot>
    </a>

    <nav class="vs-header-centered__side vs-header-centered__side--end" aria-label="Secondary">
      <ul>
        {
          right.map((l) => (
            <li>
              <a href={l.href} aria-current={l.href === current ? "page" : undefined}>
                {l.label}
              </a>
            </li>
          ))
        }
      </ul>
    </nav>

    <details class="vs-header-centered__menu">
      <summary>Menu</summary>
      <nav class="vs-header-centered__sheet" aria-label="Main">
        <ul>
          {
            all.map((l) => (
              <li>
                <a href={l.href} aria-current={l.href === current ? "page" : undefined}>
                  {l.label}
                </a>
              </li>
            ))
          }
        </ul>
      </nav>
    </details>
  </div>
</header>

<style>
  .vs-header-centered {
    container-type: inline-size;
    position: relative;
    z-index: 10;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
    border-bottom: calc(var(--vs-border-w) + 1px) solid var(--vs-ink);
  }
  .vs-header-centered a {
    color: inherit;
    text-decoration: none;
  }
  .vs-header-centered a:focus-visible,
  .vs-header-centered summary:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .vs-header-centered ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .vs-header-centered__strip {
    margin: 0;
    padding: 8px var(--vs-gutter);
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
    font-size: 0.8125rem;
    text-align: center;
  }
  .vs-header-centered__strip a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .vs-header-centered__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 72px;
    gap: 24px;
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: 0 var(--vs-gutter);
  }
  .vs-header-centered__brand {
    font-family: var(--vs-font-display, var(--vs-font-sans));
    font-size: 1.625rem;
    font-weight: var(--vs-display-weight);
    letter-spacing: var(--vs-display-tracking);
    text-transform: var(--vs-display-transform);
  }
  .vs-header-centered__side {
    display: none;
  }
  .vs-header-centered__side ul {
    display: flex;
    gap: 24px;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
  }
  .vs-header-centered__side--end ul {
    justify-content: flex-end;
  }
  .vs-header-centered__side a[aria-current="page"],
  .vs-header-centered__side a:hover {
    text-decoration: underline;
    text-decoration-color: var(--vs-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  .vs-header-centered__menu {
    justify-self: end;
  }
  .vs-header-centered__menu summary {
    padding: 8px 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    list-style: none;
  }
  .vs-header-centered__menu summary::-webkit-details-marker {
    display: none;
  }
  .vs-header-centered__sheet {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--vs-gutter) 20px;
    background: var(--vs-page);
    border-bottom: calc(var(--vs-border-w) + 1px) solid var(--vs-ink);
    animation: vs-fade-in var(--vs-duration) var(--vs-ease-out);
  }
  .vs-header-centered__sheet a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--vs-line);
    font-size: 1.0625rem;
  }
  @container (min-width: 820px) {
    .vs-header-centered__inner {
      grid-template-columns: 1fr auto 1fr;
    }
    .vs-header-centered__side {
      display: block;
    }
    .vs-header-centered__menu {
      display: none;
    }
  }
</style>
```


---

# Footer Columns

> Brand and tagline beside link columns, with a ruled legal line beneath.

- **Slug:** `footer-columns`
- **Kind:** section · **Category:** Site chrome
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/footer-columns
- **All files in one bundle:** https://viewership.ai/design/components/footer-columns.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/footer-columns.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/footer-columns/`:

   - `FooterColumns.astro` (raw: https://viewership.ai/design/raw/footer-columns/FooterColumns.astro.txt)

npm packages: none.

## Usage

```astro
---
import FooterColumns from "../components/viewership/footer-columns/FooterColumns.astro";
---

<FooterColumns />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FooterColumns from "./FooterColumns.astro";
---

<FooterColumns
  brand="Northwind"
  tagline="Gear for the long way round, repaired for life."
  legal="© 2026 Northwind Outdoor. A fictional brand for demonstration."
  columns={[
    { title: "Shop", links: [{ label: "Packs", href: "#" }, { label: "Shells", href: "#" }, { label: "Tents", href: "#" }, { label: "Gift cards", href: "#" }] },
    { title: "Repair", links: [{ label: "Book a repair", href: "#" }, { label: "Repair promise", href: "#" }, { label: "Care guides", href: "#" }] },
    { title: "Company", links: [{ label: "About", href: "#" }, { label: "Journal", href: "#" }, { label: "Contact", href: "#" }] },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` | `string` |  | Brand name, set as text unless the logo slot is used. |
| `tagline` | `string` |  | One line under the brand. |
| `columns` | `{ title: string; links: { label: string; href: string }[] }[]` |  | Link columns. |
| `legal` | `string` |  | Copyright or legal line. |
| `slot: logo` | `slot` |  | Replaces the text brand. |

## Source

### `src/components/viewership/footer-columns/FooterColumns.astro`

```astro
---
/**
 * FooterColumns: brand and tagline beside link columns, legal line beneath.
 *
 * @example
 * <FooterColumns brand="Northwind" tagline="Gear for the long way round."
 *   columns={[{ title: "Shop", links: [{ label: "Packs", href: "/packs" }] }]} legal="© 2026 Northwind" />
 */
interface FooterLink {
  label: string;
  href: string;
}
interface Column {
  title: string;
  links: FooterLink[];
}
interface Props {
  brand: string;
  tagline?: string;
  columns: Column[];
  legal?: string;
  class?: string;
}

const { brand, tagline, columns, legal, class: className } = Astro.props;
---

<footer class:list={["vs-footer-columns", className]}>
  <div class="vs-footer-columns__inner">
    <div class="vs-footer-columns__top">
      <div>
        <a class="vs-footer-columns__brand" href="/">
          <slot name="logo">{brand}</slot>
        </a>
        {tagline && <p class="vs-footer-columns__tagline">{tagline}</p>}
      </div>
      <nav class="vs-footer-columns__cols" aria-label="Footer">
        {
          columns.map((c) => (
            <div>
              <h2 class="vs-footer-columns__col-title">{c.title}</h2>
              <ul>
                {c.links.map((l) => (
                  <li>
                    <a href={l.href}>{l.label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))
        }
      </nav>
    </div>
    {legal && <p class="vs-footer-columns__legal">{legal}</p>}
  </div>
</footer>

<style>
  .vs-footer-columns {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
    border-top: calc(var(--vs-border-w) + 1px) solid var(--vs-ink);
  }
  .vs-footer-columns__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: clamp(40px, 7cqi, 80px) var(--vs-gutter) 28px;
  }
  .vs-footer-columns a {
    color: inherit;
    text-decoration: none;
  }
  .vs-footer-columns a:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .vs-footer-columns__top {
    display: grid;
    gap: 40px;
  }
  .vs-footer-columns__brand {
    display: inline-block;
    font-family: var(--vs-font-display, var(--vs-font-sans));
    font-size: 1.5rem;
    font-weight: var(--vs-display-weight);
    letter-spacing: var(--vs-display-tracking);
    text-transform: var(--vs-display-transform);
  }
  .vs-footer-columns__tagline {
    max-width: 22rem;
    margin: 12px 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--vs-ink-2);
  }
  .vs-footer-columns__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
  .vs-footer-columns__col-title {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--vs-ink-3);
  }
  .vs-footer-columns ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
  }
  .vs-footer-columns ul a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .vs-footer-columns__legal {
    margin: 48px 0 0;
    padding-top: 20px;
    border-top: var(--vs-border-w) solid var(--vs-line-strong);
    font-size: 0.8125rem;
    color: var(--vs-ink-3);
  }
  @container (min-width: 760px) {
    .vs-footer-columns__top {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: 64px;
    }
    .vs-footer-columns__cols {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
  }
</style>
```


---

# Footer Minimal

> One line with the brand, a few links and the legal note. For landing pages and small sites.

- **Slug:** `footer-minimal`
- **Kind:** section · **Category:** Site chrome
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/footer-minimal
- **All files in one bundle:** https://viewership.ai/design/components/footer-minimal.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/footer-minimal.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/footer-minimal/`:

   - `FooterMinimal.astro` (raw: https://viewership.ai/design/raw/footer-minimal/FooterMinimal.astro.txt)

npm packages: none.

## Usage

```astro
---
import FooterMinimal from "../components/viewership/footer-minimal/FooterMinimal.astro";
---

<FooterMinimal />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FooterMinimal from "./FooterMinimal.astro";
---

<FooterMinimal
  brand="Northwind"
  legal="© 2026 Northwind Outdoor"
  links={[
    { label: "Shop", href: "#" },
    { label: "Repairs", href: "#" },
    { label: "Journal", href: "#" },
    { label: "Privacy", href: "#" },
    { label: "Terms", href: "#" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` | `string` |  | Brand name, set as text unless the logo slot is used. |
| `links` | `{ label: string; href: string }[]` |  | A handful of links. |
| `legal` | `string` |  | Copyright or legal line. |
| `slot: logo` | `slot` |  | Replaces the text brand. |

## Source

### `src/components/viewership/footer-minimal/FooterMinimal.astro`

```astro
---
/**
 * FooterMinimal: one line with the brand, a few links and the legal note.
 * For landing pages and small sites.
 *
 * @example
 * <FooterMinimal brand="Northwind" links={[{ label: "Privacy", href: "/privacy" }]} legal="© 2026 Northwind" />
 */
interface FooterLink {
  label: string;
  href: string;
}
interface Props {
  brand: string;
  links: FooterLink[];
  legal?: string;
  class?: string;
}

const { brand, links, legal, class: className } = Astro.props;
---

<footer class:list={["vs-footer-minimal", className]}>
  <div class="vs-footer-minimal__inner">
    <a class="vs-footer-minimal__brand" href="/">
      <slot name="logo">{brand}</slot>
    </a>
    <nav aria-label="Footer">
      <ul>
        {
          links.map((l) => (
            <li>
              <a href={l.href}>{l.label}</a>
            </li>
          ))
        }
      </ul>
    </nav>
    {legal && <p class="vs-footer-minimal__legal">{legal}</p>}
  </div>
</footer>

<style>
  .vs-footer-minimal {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
    border-top: var(--vs-border-w) solid var(--vs-line-strong);
  }
  .vs-footer-minimal__inner {
    display: grid;
    gap: 16px;
    align-items: center;
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: 28px var(--vs-gutter);
  }
  .vs-footer-minimal a {
    color: inherit;
    text-decoration: none;
  }
  .vs-footer-minimal a:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .vs-footer-minimal__brand {
    font-family: var(--vs-font-display, var(--vs-font-sans));
    font-size: 1.125rem;
    font-weight: var(--vs-display-weight);
    letter-spacing: var(--vs-display-tracking);
    text-transform: var(--vs-display-transform);
  }
  .vs-footer-minimal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--vs-ink-2);
  }
  .vs-footer-minimal ul a:hover {
    color: var(--vs-ink);
  }
  .vs-footer-minimal__legal {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--vs-ink-3);
  }
  @container (min-width: 760px) {
    .vs-footer-minimal__inner {
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 40px;
    }
    .vs-footer-minimal ul {
      justify-content: center;
    }
  }
</style>
```


---

# Footer Wordmark

> Link columns on a dark ground with the brand set across the full width beneath.

- **Slug:** `footer-wordmark`
- **Kind:** section · **Category:** Site chrome
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/footer-wordmark
- **All files in one bundle:** https://viewership.ai/design/components/footer-wordmark.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/footer-wordmark.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/footer-wordmark/`:

   - `FooterWordmark.astro` (raw: https://viewership.ai/design/raw/footer-wordmark/FooterWordmark.astro.txt)

npm packages: none.

## Usage

```astro
---
import FooterWordmark from "../components/viewership/footer-wordmark/FooterWordmark.astro";
---

<FooterWordmark />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FooterWordmark from "./FooterWordmark.astro";
---

<FooterWordmark
  brand="Northwind"
  tagline="Gear for the long way round, repaired for life."
  legal="© 2026 Northwind Outdoor. A fictional brand for demonstration."
  columns={[
    { title: "Shop", links: [{ label: "Packs", href: "#" }, { label: "Shells", href: "#" }, { label: "Tents", href: "#" }] },
    { title: "Repair", links: [{ label: "Book a repair", href: "#" }, { label: "Repair promise", href: "#" }, { label: "Care guides", href: "#" }] },
    { title: "Company", links: [{ label: "About", href: "#" }, { label: "Journal", href: "#" }, { label: "Contact", href: "#" }] },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` | `string` |  | Brand name, set huge across the bottom. |
| `tagline` | `string` |  | One line beside the columns. |
| `columns` | `{ title: string; links: { label: string; href: string }[] }[]` |  | Link columns. |
| `legal` | `string` |  | Copyright or legal line. |

## Source

### `src/components/viewership/footer-wordmark/FooterWordmark.astro`

```astro
---
/**
 * FooterWordmark: link columns on a dark ground, with the brand name set
 * across the full width beneath. Sized to its container, so it never
 * overflows.
 *
 * @example
 * <FooterWordmark brand="Northwind" columns={[...]} legal="© 2026 Northwind" />
 */
interface FooterLink {
  label: string;
  href: string;
}
interface Column {
  title: string;
  links: FooterLink[];
}
interface Props {
  brand: string;
  tagline?: string;
  columns: Column[];
  legal?: string;
  class?: string;
}

const { brand, tagline, columns, legal, class: className } = Astro.props;
---

<footer class:list={["vs-footer-wordmark", className]}>
  <div class="vs-footer-wordmark__inner">
    <div class="vs-footer-wordmark__top">
      {tagline && <p class="vs-footer-wordmark__tagline">{tagline}</p>}
      <nav class="vs-footer-wordmark__cols" aria-label="Footer">
        {
          columns.map((c) => (
            <div>
              <h2 class="vs-footer-wordmark__col-title">{c.title}</h2>
              <ul>
                {c.links.map((l) => (
                  <li>
                    <a href={l.href}>{l.label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))
        }
      </nav>
    </div>
    <a class="vs-display vs-footer-wordmark__giant" href="/">{brand}</a>
    {legal && <p class="vs-footer-wordmark__legal">{legal}</p>}
  </div>
</footer>

<style>
  .vs-footer-wordmark {
    container-type: inline-size;
    overflow: hidden;
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-footer-wordmark__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: clamp(40px, 7cqi, 80px) var(--vs-gutter) 24px;
  }
  .vs-footer-wordmark a {
    color: inherit;
    text-decoration: none;
  }
  .vs-footer-wordmark a:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .vs-footer-wordmark__top {
    display: grid;
    gap: 36px;
  }
  .vs-footer-wordmark__tagline {
    max-width: 20rem;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.45;
  }
  .vs-footer-wordmark__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
  .vs-footer-wordmark__col-title {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--vs-ink-inverse) 55%, transparent);
  }
  .vs-footer-wordmark ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
  }
  .vs-footer-wordmark ul a:hover {
    color: var(--vs-accent);
  }
  .vs-footer-wordmark .vs-footer-wordmark__giant {
    display: block;
    margin-top: clamp(40px, 8cqi, 96px);
    font-size: clamp(3rem, 19cqi, 15rem);
    line-height: 0.82;
    white-space: nowrap;
    color: var(--vs-accent);
  }
  .vs-footer-wordmark__legal {
    margin: 24px 0 0;
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--vs-ink-inverse) 55%, transparent);
  }
  @container (min-width: 760px) {
    .vs-footer-wordmark__top {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: 64px;
    }
    .vs-footer-wordmark__cols {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
  }
</style>
```


---

# Loading State

> Pixel-grid loader with a shimmering label and elapsed timer.

- **Slug:** `loading-state`
- **Kind:** component · **Category:** Feedback
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/LoadingState.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/loading-state
- **All files in one bundle:** https://viewership.ai/design/components/loading-state.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/loading-state.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/loading-state/`:

   - `LoadingState.astro` (raw: https://viewership.ai/design/raw/loading-state/LoadingState.astro.txt)

npm packages: none.

## Usage

```astro
---
import LoadingState from "../components/viewership/loading-state/LoadingState.astro";
---

<LoadingState />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import LoadingState from "./LoadingState.astro";
import Button from "../button/Button.astro";

interface Props {
  variant?: string;
}
const { variant = "Drive" } = Astro.props;
---

{variant === "Drive" && <LoadingState variant="drive" label="Drafting report 214" />}
{variant === "Dots" && <LoadingState variant="dots" label="Pulling GA4 data" />}
{variant === "Orbit" && <LoadingState variant="orbit" label="Syncing citation runs" />}
{variant === "Inline" && (
  <div class="inline-demo">
    <Button variant="secondary" aria-busy="true">
      <LoadingState inline announce={false} elapsed={false} label="Saving draft" />
    </Button>
    <p class="sentence">
      The weekly report is ready for review. <LoadingState inline variant="dots" label="Checking brand voice" />
    </p>
  </div>
)}

<style>
  .inline-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .sentence {
    margin: 0;
    max-width: 22rem;
    font-size: 13px;
    line-height: 1.6;
    color: var(--vs-ink-2);
    text-align: center;
  }
</style>
```

## Variants

Demo variants: `Drive`, `Dots`, `Orbit`, `Inline`.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"drive" \| "dots" \| "orbit"` | `"drive"` | Grid pattern. |
| `label` | `string` | `"Working"` | Status text, shown and announced. |
| `elapsed` | `boolean` | `true` | Show the elapsed timer (needs JS). |
| `startedAt` | `number` |  | Epoch ms the work started. Defaults to page load. |
| `inline` | `boolean` | `false` | Render as an inline <span> inside text or a button. |
| `shimmer` | `boolean` | `true` | Shimmer the label. |
| `autoplay` | `boolean` | `true` | Animate the grid. Pauses offscreen. |
| `announce` | `boolean` | `true` | Expose as role="status". Turn off inside a control that already reports busy. |

## Source

### `src/components/viewership/loading-state/LoadingState.astro`

```astro
---
/**
 * LoadingState: pixel-grid loader for long-running work.
 *
 * A 3×3 grid pulses in a wavefront beside a shimmering label and a live
 * elapsed timer.
 *
 *   drive  square cells, chevron wavefront moving right
 *   dots   the same wavefront on circular cells
 *   orbit  a comet lapping the grid perimeter
 *
 * `inline` renders a <span> that inherits the surrounding type.
 *
 * Ported from Beautiful UI `components/primitives/LoadingState.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * @example
 * <LoadingState label="Drafting report 214" />
 * <LoadingState variant="orbit" label="Syncing orders" startedAt={job.startedAt} />
 * <button aria-busy="true"><LoadingState inline announce={false} label="Saving" elapsed={false} /></button>
 */
import type { HTMLAttributes } from "astro/types";

type Variant = "drive" | "dots" | "orbit";

type Props = HTMLAttributes<"div"> & {
  variant?: Variant;
  /** Visible status text; also what screen readers announce. */
  label?: string;
  /** Show the live elapsed timer. */
  elapsed?: boolean;
  /** Epoch ms the work started; the timer counts from here. Defaults to page load. */
  startedAt?: number;
  /** Render inline (a <span>) so it can sit inside text or a button. */
  inline?: boolean;
  /** Shimmer the label. */
  shimmer?: boolean;
  /** Animate the grid. When false the grid rests in its dim state. */
  autoplay?: boolean;
  /** Expose as a polite live region (role="status"). Turn off inside an already-busy control. */
  announce?: boolean;
};

const {
  variant = "drive",
  label = "Working",
  elapsed = true,
  startedAt,
  inline = false,
  shimmer = true,
  autoplay = true,
  announce = true,
  class: className,
  ...rest
} = Astro.props;

/* chevron wavefront: column plus distance from the middle row, 90ms per step */
const chevron: (number | null)[] = Array.from({ length: 9 }, (_, i) => {
  const r = Math.floor(i / 3);
  const c = i % 3;
  return (c + Math.abs(r - 1)) * 90;
});

/* comet: clockwise around the perimeter, the centre cell stays off */
const ORBIT_ORDER = [0, 1, 2, 5, 8, 7, 6, 3];
const orbit: (number | null)[] = Array.from({ length: 9 }, (_, i) => {
  const k = ORBIT_ORDER.indexOf(i);
  return k === -1 ? null : k * 110;
});

const PATTERNS: Record<Variant, { delays: (number | null)[]; dur: number; round: boolean }> = {
  drive: { delays: chevron, dur: 650, round: false },
  dots: { delays: chevron, dur: 650, round: true },
  orbit: { delays: orbit, dur: 950, round: false },
};
const { delays, dur, round } = PATTERNS[variant] ?? PATTERNS.drive;
const Tag = inline ? "span" : "div";
---

<Tag
  class:list={["vs-loading-state", inline && "vs-loading-state--inline", round && "is-round", className]}
  role={announce ? "status" : undefined}
  data-autoplay={autoplay ? "" : undefined}
  data-started-at={startedAt}
  style={`--vs-ls-dur: ${dur}ms`}
  {...rest}
>
  <span class="ls-grid" aria-hidden="true">
    {delays.map((delay) =>
      delay === null ? <span class="cell is-off" /> : <span class="cell" style={`--vs-ls-delay: ${delay}ms`} />,
    )}
  </span>
  <span class:list={["ls-label", shimmer && "is-shimmer"]}>{label}</span>
  {elapsed && (
    <span class="elapsed" aria-hidden="true" data-elapsed>0.0s</span>
  )}
</Tag>

<style>
  .vs-loading-state {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
  }
  .vs-loading-state--inline {
    display: inline-flex;
    gap: 0.5em;
    vertical-align: middle;
  }

  .ls-grid {
    display: grid;
    flex-shrink: 0;
    grid-template-columns: repeat(3, 4px);
    gap: 1.5px;
  }
  .cell {
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: var(--vs-ink);
    opacity: 0.15;
  }
  .is-round .cell {
    border-radius: 50%;
  }
  .cell.is-off {
    opacity: 0.07;
  }
  [data-autoplay] .cell:not(.is-off) {
    animation: vs-pixel-on var(--vs-ls-dur) ease-in-out var(--vs-ls-delay) infinite;
  }

  .ls-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--vs-ink-2);
    white-space: nowrap;
  }
  .vs-loading-state--inline .ls-label {
    font-size: inherit;
    font-weight: inherit;
  }
  .ls-label.is-shimmer {
    color: transparent;
    background-image: linear-gradient(90deg, var(--vs-ink-3) 35%, var(--vs-ink) 50%, var(--vs-ink-3) 65%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: vs-shimmer-text 1.4s linear infinite;
  }

  .elapsed {
    font-family: var(--vs-font-sans);
    font-size: 12px;
    color: var(--vs-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .vs-loading-state--inline .elapsed {
    font-size: 0.92em;
  }

  /* offscreen: freeze the grid and shimmer where they are */
  [data-paused] .cell,
  [data-paused] .ls-label {
    animation-play-state: paused;
  }

  /* the timer needs script; without it, show only the loader and label */
  @media (scripting: none) {
    .elapsed {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-autoplay] .cell:not(.is-off) {
      animation: none;
    }
    .ls-label.is-shimmer {
      animation: none;
      background: none;
      color: var(--vs-ink-2);
    }
  }
  @media (forced-colors: active) {
    .cell {
      background: CanvasText;
    }
    .ls-label.is-shimmer {
      background: none;
      color: CanvasText;
    }
  }
</style>

<script>
  const format = (ms: number) => {
    const total = Math.max(0, Math.floor(ms / 100)) / 10;
    if (total < 60) return `${total.toFixed(1)}s`;
    return `${Math.floor(total / 60)}m ${(total % 60).toFixed(1)}s`;
  };

  function init(root: HTMLElement) {
    const out = root.querySelector<HTMLElement>("[data-elapsed]");
    const started = Number(root.dataset.startedAt) || Date.now();
    let interval: number | undefined;

    const render = () => {
      if (!root.isConnected) return teardown();
      if (out) out.textContent = format(Date.now() - started);
    };
    const start = () => {
      root.removeAttribute("data-paused");
      render();
      if (out && interval === undefined) interval = window.setInterval(render, 100);
    };
    const stop = () => {
      root.setAttribute("data-paused", "");
      window.clearInterval(interval);
      interval = undefined;
    };

    /* the timer measures wall-clock time, so pausing offscreen only skips repaints */
    const io = new IntersectionObserver(([entry]) => (entry?.isIntersecting ? start() : stop()));
    io.observe(root);
    render();

    function teardown() {
      stop();
      io.disconnect();
    }
    document.addEventListener("astro:before-swap", teardown, { once: true });
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-loading-state:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>
```


---

# Thinking

> Expandable agent trace for steps, reasoning, search or tool calls.

- **Slug:** `thinking-state`
- **Kind:** component · **Category:** Agent
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/ThinkingState.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/thinking-state
- **All files in one bundle:** https://viewership.ai/design/components/thinking-state.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/thinking-state.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/thinking-state/`:

   - `ThinkingState.astro` (raw: https://viewership.ai/design/raw/thinking-state/ThinkingState.astro.txt)

npm packages: none.

## Usage

```astro
---
import ThinkingState from "../components/viewership/thinking-state/ThinkingState.astro";
---

<ThinkingState />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import ThinkingState from "./ThinkingState.astro";
import type { ThinkingRow } from "./ThinkingState.astro";

interface Props {
  variant?: string;
}
const { variant = "Steps" } = Astro.props;

const steps: ThinkingRow[] = [
  { primary: "Reading this week's GA4 data" },
  { primary: "Checking Google Ads spend" },
  { primary: "Comparing AI citations", secondary: "6 prompts" },
  { primary: "Drafting the weekly summary" },
];

const reasoning: ThinkingRow[] = [
  { primary: "ChatGPT cited the trail pack guide on 4 of 6 prompts, and the gear list section gets quoted most often." },
  { primary: "Before featuring it in the spring email, I should check whether Perplexity and Gemini cite it too." },
];

const sources: ThinkingRow[] = [
  { primary: "Best trail packs for 2026, thread", secondary: "r/Backpacking" },
  { primary: "Northwind pack review: 300 miles", secondary: "YouTube" },
  { primary: "Lightweight packs under $200", secondary: "Gear Lab Reviews" },
];

const tools: ThinkingRow[] = [
  { primary: "Read", secondary: "ga4-export.ts", mono: true },
  { primary: "Edit", secondary: "WeeklyReport.astro", mono: true, add: 62, del: 18 },
  { primary: "Run", secondary: "npm run weekly-report", mono: true },
];
---

{variant === "Steps" && <ThinkingState variant="steps" rows={steps} done="Thought for 4 seconds" />}
{variant === "Reasoning" && <ThinkingState variant="reasoning" rows={reasoning} done="Thought for 4 seconds" />}
{variant === "Search" && (
  <ThinkingState
    variant="search"
    rows={sources}
    query="best lightweight trail packs reddit"
    more="+5 more"
    active="Searching threads"
    done="Searched threads"
  />
)}
{variant === "Coding" && <ThinkingState variant="coding" rows={tools} />}
```

## Variants

Demo variants: `Steps`, `Reasoning`, `Search`, `Coding`.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"steps" \| "reasoning" \| "search" \| "coding"` | `"steps"` | Checklist, prose, sources read, or tool calls. |
| `rows` | `{ primary: string; secondary?: string; mono?: boolean; add?: number; del?: number; href?: string }[]` |  | Trace rows. Search rows with href are links. |
| `active` | `string` | `per variant` | Header while working. |
| `done` | `string` | `per variant` | Header once settled. Announced politely. |
| `query` | `string` |  | Search only: the query line. |
| `more` | `string` |  | Search only: trailing note, e.g. "+5 more". |
| `open` | `boolean` | `false` | Stay expanded once settled. |
| `autoplay` | `boolean` | `true` | Play in view. When false or under reduced motion, the settled state renders. |
| `loop` | `boolean` | `false` | Replay after a pause. Stops once toggled. |

## Source

### `src/components/viewership/thinking-state/ThinkingState.astro`

```astro
---
/**
 * ThinkingState: expandable agent trace.
 *
 *   steps      step list with a spinner that settles into checks
 *   reasoning  prose reasoning that expands, then settles
 *   search     the query, then the sources read
 *   coding     tool trace: files read, edits (+/−), commands
 *
 * Plays once when scrolled into view, then stays expandable. The server
 * renders the settled state, which reduced motion and `autoplay={false}`
 * also show. Fires `vs-thinking-state:settled` (bubbles) when it settles.
 *
 * Ported from Beautiful UI `components/primitives/ThinkingState.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * @example
 * <ThinkingState variant="search" query="best trail running shoes 2026" rows={sources} />
 */
import type { HTMLAttributes } from "astro/types";

type Variant = "steps" | "reasoning" | "search" | "coding";

export interface ThinkingRow {
  /** Main text: the step, sentence, page title or tool name. */
  primary: string;
  /** Muted trailing text: a count, a domain, a file name. */
  secondary?: string;
  /** Set `secondary` in the mono face. */
  mono?: boolean;
  /** Lines added / removed (coding). */
  add?: number;
  del?: number;
  /** Search: link the source (opens in a new tab). */
  href?: string;
}

type Props = HTMLAttributes<"div"> & {
  variant?: Variant;
  rows: ThinkingRow[];
  /** Header while working. */
  active?: string;
  /** Header once settled. */
  done?: string;
  /** Search: the query line above the sources. */
  query?: string;
  /** Search: trailing note once settled, e.g. "+7 more". */
  more?: string;
  /** Leave the trace expanded once it settles. */
  open?: boolean;
  /** Play the sequence when scrolled into view. */
  autoplay?: boolean;
  /** Replay after a pause (stops once someone interacts). */
  loop?: boolean;
};

const {
  variant = "steps",
  rows = [],
  active: activeProp,
  done: doneProp,
  query,
  more,
  open = false,
  autoplay = true,
  loop = false,
  class: className,
  ...rest
} = Astro.props;

const DEFAULT_LABELS: Record<Variant, { active: string; done: string }> = {
  steps: { active: "Thinking", done: "Thought for a few seconds" },
  reasoning: { active: "Thinking", done: "Thought for a few seconds" },
  search: { active: "Searching the web", done: "Searched the web" },
  coding: { active: "Running tools", done: `Ran ${rows.length} tool${rows.length === 1 ? "" : "s"}` },
};
const active = activeProp ?? DEFAULT_LABELS[variant].active;
const done = doneProp ?? DEFAULT_LABELS[variant].done;
const panelId = `vs-thinking-${Math.random().toString(36).slice(2, 8)}`;
const TONES = ["accent", "orange", "green"];
---

<div
  class:list={["vs-thinking-state", `vs-thinking-state--${variant}`, className]}
  data-autoplay={autoplay ? "" : undefined}
  data-loop={loop ? "" : undefined}
  data-open={open ? "" : undefined}
  data-expanded={open ? "" : undefined}
  {...rest}
>
  <button type="button" class="header" aria-expanded={open ? "true" : "false"} aria-controls={panelId}>
    <svg class="glyph" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z"></path>
    </svg>
    <span class="ts-label ts-label--active">{active}</span>
    <span class="ts-label ts-label--done">{done}</span>
    <svg
      class="chevron"
      width="14"
      height="14"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2.2"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true"
    >
      <path d="M6 9l6 6 6-6"></path>
    </svg>
  </button>
  <span class="visually-hidden" role="status" data-live></span>

  <div class="panel" id={panelId}>
    <div class="panel-clip" data-panel-clip>
      <div class="trace-wrap">
        <span class="trace-line" aria-hidden="true" data-line></span>
        <div class="trace" data-trace>
          {query && (
            <div class="query">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
                <circle cx="11" cy="11" r="7"></circle>
                <path d="M21 21l-4.3-4.3"></path>
              </svg>
              <span>{query}</span>
            </div>
          )}
          {rows.map((row, i) => {
            const Tag = variant === "search" && row.href ? "a" : variant === "coding" ? "button" : "div";
            return (
              <Tag
                class="row"
                data-row
                style={`--vs-ts-i: ${i}`}
                href={Tag === "a" ? row.href : undefined}
                target={Tag === "a" ? "_blank" : undefined}
                rel={Tag === "a" ? "noreferrer" : undefined}
                type={Tag === "button" ? "button" : undefined}
                aria-pressed={Tag === "button" ? "false" : undefined}
              >
                {variant === "search" && (
                  <span class={`dot dot--${TONES[i % 3]}`} aria-hidden="true">
                    <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                      <circle cx="12" cy="12" r="9"></circle>
                      <path d="M3.5 12h17M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"></path>
                    </svg>
                  </span>
                )}
                {variant === "steps" && (
                  <span class="status-icon" aria-hidden="true">
                    <svg class="check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M20 6L9 17l-5-5"></path>
                    </svg>
                    <span class="spinner"></span>
                  </span>
                )}
                <span class="primary">
                  <span class="primary-text">{row.primary}</span>
                </span>
                {row.secondary && <span class:list={["secondary", row.mono && "is-mono"]}>{row.secondary}</span>}
                {row.add !== undefined && (
                  <span class="counts">
                    <span class="add">+{row.add}</span>{" "}
                    {row.del !== undefined && <span class="del">−{row.del}</span>}
                  </span>
                )}
              </Tag>
            );
          })}
          {more && <span class="more" data-more>{more}</span>}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .vs-thinking-state {
    display: flex;
    width: 100%;
    max-width: 380px;
    flex-direction: column;
    transition: min-height 400ms var(--vs-ease-out);
  }
  .vs-thinking-state[data-working],
  .vs-thinking-state[data-expanded] {
    min-height: 176px;
  }

  /* ── header ── */
  .header {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin: 0 -6px;
    padding: 4px 6px;
    border: none;
    border-radius: var(--vs-radius-control);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color 100ms ease-out;
  }
  .header:hover {
    background: var(--vs-hover-2);
  }
  .header:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .glyph {
    flex-shrink: 0;
    fill: var(--vs-ink-3);
    transition: fill 200ms ease-out;
  }
  [data-working] .glyph {
    fill: var(--vs-ink-2);
  }
  .ts-label {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }
  .ts-label--active {
    display: none;
    color: transparent;
    background-image: linear-gradient(90deg, var(--vs-ink-3) 35%, var(--vs-ink) 50%, var(--vs-ink-3) 65%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: vs-shimmer-text 1.4s linear infinite;
  }
  .ts-label--done {
    color: var(--vs-ink-2);
    animation: vs-fade-in 350ms ease-out both;
  }
  [data-working] .ts-label--active {
    display: inline;
  }
  [data-working] .ts-label--done {
    display: none;
  }
  .chevron {
    flex-shrink: 0;
    color: var(--vs-ink-3);
    transition: transform 300ms ease-out;
  }
  [data-expanded] .chevron {
    transform: rotate(180deg);
  }

  /* ── expandable trace ── */
  .panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 400ms var(--vs-ease-out),
      opacity 400ms var(--vs-ease-out);
  }
  [data-expanded] .panel {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .panel-clip {
    min-height: 0;
    overflow: hidden;
  }
  .trace-wrap {
    position: relative;
    margin: 4px 0 0 5px;
    padding-left: 16px;
  }
  .trace-line {
    position: absolute;
    top: -8px;
    left: 3px;
    width: 1px;
    height: calc(100% - 2px);
    background: var(--vs-line);
    transition: height 500ms var(--vs-ease-out);
  }
  .trace {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
  }

  .query {
    display: flex;
    height: 24px;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    font-size: 12.5px;
    color: var(--vs-ink-2);
  }
  .query svg {
    flex-shrink: 0;
    color: var(--vs-ink-3);
  }
  [data-expanded] .query {
    animation: vs-fade-up 300ms var(--vs-ease-out) both;
  }

  .row {
    display: flex;
    width: 100%;
    min-height: 28px;
    box-sizing: border-box;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
    border: none;
    border-radius: var(--vs-radius-chip);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    animation: vs-fade-up 320ms var(--vs-ease-out) calc(var(--vs-ts-i) * 120ms) both;
  }
  .row[hidden] {
    display: none;
  }
  a.row,
  button.row {
    cursor: pointer;
    transition: background-color 150ms ease-out;
  }
  a.row:hover,
  button.row:hover {
    background: var(--vs-hover);
  }
  button.row[aria-pressed="true"] {
    background: var(--vs-inset);
  }
  a.row:focus-visible,
  button.row:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }

  .primary {
    min-width: 0;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vs-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vs-thinking-state--reasoning .primary {
    font-weight: 400;
    line-height: 1.625;
    color: var(--vs-ink-2);
    white-space: normal;
  }
  /* search titles get the link underline that draws in on hover */
  .vs-thinking-state--search .primary-text {
    position: relative;
  }
  .vs-thinking-state--search .primary-text::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    content: "";
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 280ms var(--vs-ease-link);
  }
  a.row:hover .primary-text::after,
  a.row:focus-visible .primary-text::after {
    transform: scaleX(1);
  }
  .secondary {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--vs-ink-3);
  }
  .secondary.is-mono {
    font-family: var(--vs-font-mono);
  }
  .counts {
    flex-shrink: 0;
    font-family: var(--vs-font-sans);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .add {
    color: var(--vs-green);
  }
  .del {
    color: var(--vs-red);
  }

  .dot {
    display: flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--vs-on-accent);
  }
  .dot--accent {
    background: var(--vs-accent);
  }
  .dot--orange {
    background: var(--vs-orange);
  }
  .dot--green {
    background: var(--vs-green);
  }

  .status-icon {
    display: flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--vs-ink-3);
  }
  .spinner {
    display: none;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 1.5px solid var(--vs-line-strong);
    border-top-color: var(--vs-ink-2);
    border-radius: 50%;
    animation: vs-spin 700ms linear infinite;
  }
  .row.is-active .spinner {
    display: block;
  }
  .row.is-active .check {
    display: none;
  }

  .more {
    font-size: 12px;
    color: var(--vs-ink-3);
    animation: vs-fade-in 300ms ease-out both;
  }
  .more[hidden] {
    display: none;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* offscreen: hold the shimmer and spinner */
  [data-paused] .ts-label--active,
  [data-paused] .spinner {
    animation-play-state: paused;
  }

  /* hide the settled markup for the instant before the script rewinds it */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .vs-thinking-state[data-autoplay]:not([data-vs-ready]) {
      visibility: hidden;
    }
  }
  /* without script the header can't toggle, so show the trace */
  @media (scripting: none) {
    .panel {
      grid-template-rows: 1fr;
      opacity: 1;
    }
    .chevron {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ts-label--active {
      animation: none;
      background: none;
      color: var(--vs-ink-2);
    }
    .ts-label--done,
    .row,
    .more,
    [data-expanded] .query {
      animation: none;
    }
    .spinner {
      animation: none;
    }
  }
  @media (forced-colors: active) {
    .ts-label--active {
      background: none;
      color: CanvasText;
    }
  }
</style>

<script>
  /* stage timings: start → open → first rows → settle → fold away */
  const STAGES = [800, 600, 1800, 2600];
  const FINAL = STAGES.length;
  const LOOP_HOLD = 3200;

  /** One pending timeout that can pause and resume where it left off. */
  function createTimer() {
    let id: number | undefined;
    let fn: (() => void) | undefined;
    let left = 0;
    let due = 0;
    let paused = true;
    const arm = () => {
      due = performance.now() + left;
      id = window.setTimeout(() => {
        const run = fn;
        id = fn = undefined;
        run?.();
      }, left);
    };
    return {
      set(ms: number, next: () => void) {
        window.clearTimeout(id);
        id = undefined;
        fn = next;
        left = ms;
        if (!paused) arm();
      },
      pause() {
        if (paused) return;
        paused = true;
        if (id === undefined) return;
        window.clearTimeout(id);
        id = undefined;
        left = Math.max(0, due - performance.now());
      },
      resume() {
        if (!paused) return;
        paused = false;
        if (fn) arm();
      },
      clear() {
        window.clearTimeout(id);
        id = fn = undefined;
      },
    };
  }

  function init(root: HTMLElement) {
    const header = root.querySelector<HTMLButtonElement>(".header")!;
    const live = root.querySelector<HTMLElement>("[data-live]")!;
    const clip = root.querySelector<HTMLElement>("[data-panel-clip]")!;
    const line = root.querySelector<HTMLElement>("[data-line]")!;
    const trace = root.querySelector<HTMLElement>("[data-trace]")!;
    const more = root.querySelector<HTMLElement>("[data-more]");
    const rows = [...root.querySelectorAll<HTMLElement>("[data-row]")];
    const doneLabel = root.querySelector(".ts-label--done")?.textContent ?? "";
    const settledOpen = root.hasAttribute("data-open");
    const isSteps = root.classList.contains("vs-thinking-state--steps");
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let loop = root.hasAttribute("data-loop");

    let stage = FINAL;
    let manual: boolean | null = null;
    let announced = false;
    const timer = createTimer();

    const render = () => {
      const working = stage < 3;
      const auto = stage === FINAL ? settledOpen : stage >= 1;
      const expanded = manual ?? auto;
      const visible = stage < 2 ? 0 : stage === 2 ? Math.min(2, rows.length) : rows.length;

      root.toggleAttribute("data-working", working);
      root.toggleAttribute("data-expanded", expanded);
      header.setAttribute("aria-expanded", String(expanded));
      clip.inert = !expanded;
      rows.forEach((row, i) => {
        row.hidden = i >= visible;
        if (isSteps) row.classList.toggle("is-active", working && i === visible - 1);
      });
      if (more) more.hidden = stage < 3;
      /* px heights let the line grow smoothly; unmeasurable (hidden) falls back to the CSS calc */
      const h = trace.offsetHeight;
      line.style.height = h ? `${h - 2}px` : "";
    };

    const settle = () => {
      if (!announced) {
        announced = true;
        live.textContent = doneLabel;
      }
      root.dispatchEvent(new CustomEvent("vs-thinking-state:settled", { bubbles: true }));
    };

    const step = () => {
      stage += 1;
      render();
      if (stage === 3) settle();
      if (stage < FINAL) timer.set(STAGES[stage]!, step);
      else if (loop) timer.set(LOOP_HOLD, restart);
    };

    const restart = () => {
      /* never rewind while someone is reading or using it */
      if (!loop) return;
      if (root.matches(":hover") || root.contains(document.activeElement)) return timer.set(LOOP_HOLD, restart);
      stage = 0;
      manual = null;
      rows.forEach((row) => row.setAttribute("aria-pressed", "false"));
      render();
      timer.set(STAGES[0]!, step);
    };

    header.addEventListener("click", () => {
      const current = header.getAttribute("aria-expanded") === "true";
      manual = !current;
      loop = false;
      render();
    });

    /* coding rows: select one tool call at a time */
    rows.forEach((row) => {
      if (row.tagName !== "BUTTON") return;
      row.addEventListener("click", () => {
        const pressed = row.getAttribute("aria-pressed") === "true";
        rows.forEach((other) => other.setAttribute("aria-pressed", "false"));
        row.setAttribute("aria-pressed", String(!pressed));
      });
    });

    if (reduced || !root.hasAttribute("data-autoplay")) {
      render();
      return;
    }

    stage = 0;
    render();
    timer.set(STAGES[0]!, step);

    const io = new IntersectionObserver(([entry]) => {
      if (!root.isConnected) return teardown();
      if (entry?.isIntersecting) {
        root.removeAttribute("data-paused");
        timer.resume();
      } else {
        root.setAttribute("data-paused", "");
        timer.pause();
      }
    }, { threshold: 0.2 });
    io.observe(root);

    function teardown() {
      timer.clear();
      io.disconnect();
    }
    document.addEventListener("astro:before-swap", teardown, { once: true });
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-thinking-state:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>
```


---

# Streaming Text

> Streamed answer with inline citations, sources, actions and follow-ups.

- **Slug:** `streaming-text`
- **Kind:** component · **Category:** Agent
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/StreamingText.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/streaming-text
- **All files in one bundle:** https://viewership.ai/design/components/streaming-text.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/streaming-text.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/streaming-text/`:

   - `StreamingText.astro` (raw: https://viewership.ai/design/raw/streaming-text/StreamingText.astro.txt)

npm packages: none.

## Usage

```astro
---
import StreamingText from "../components/viewership/streaming-text/StreamingText.astro";
---

<StreamingText />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import StreamingText from "./StreamingText.astro";
import type { StreamingSource } from "./StreamingText.astro";

/* small inline favicons so the demo needs no network */
const icon = (svg: string) => `data:image/svg+xml,${encodeURIComponent(svg)}`;
const ICONS = {
  orders: icon(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#7a4a2a"/><path d="M17 45V27h8v18zm11 0V18h8v27zm11 0V31h8v14z" fill="#fff"/><path d="M16 49h32" stroke="#e9cdb4" stroke-width="4" stroke-linecap="round"/></svg>`,
  ),
  geo: icon(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#d9692b"/><path d="M32 13c3 8 12 12 12 23a12 12 0 0 1-24 0c0-6 3-9 6-12 0 5 2 8 5 8-2-7 0-13 1-19z" fill="#fff"/></svg>`,
  ),
  survey: icon(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#2f7a5b"/><path d="M18 26h24v9a12 12 0 0 1-24 0z" fill="#fff"/><path d="M42 29h3a5 5 0 0 1 0 10h-4" fill="none" stroke="#fff" stroke-width="4"/><path d="M16 50h30" stroke="#bfe6d3" stroke-width="4" stroke-linecap="round"/></svg>`,
  ),
};

const sources: StreamingSource[] = [
  { name: "GA4 sessions, September", domain: "ga4-sep.csv", image: ICONS.orders },
  { name: "AI citations, weeks 36–41", domain: "geo-log.md", image: ICONS.geo },
  { name: "Customer survey", domain: "nw-survey.pdf", image: ICONS.survey },
];

const answer =
  "The trail pack guide is your fastest-growing page. Organic sessions are up 23% this month, and it converts 9 points better than the category page. [1] Gemini and Perplexity now cite it too.";
---

<StreamingText
  content={answer}
  sources={sources}
  followUps={["Which pages get cited most", "Compare paid and organic conversion"]}
  labels={{ sources: "8 sources" }}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | `string \| ({ text: string } \| { cite: number })[]` |  | The answer. In a string, [n] cites sources[n - 1]; in tokens, cite is 0-based. |
| `sources` | `{ name: string; domain: string; href?: string; image?: string }[]` | `[]` | Cited sources. Without image, shows the first letter. |
| `followUps` | `string[]` | `[]` | Shown when done. Click fires vs-streaming-text:follow-up. |
| `labels` | `Partial<{ sources; followUps; copy; regenerate; good; bad }>` |  | Sources toggle, follow-ups heading and action button names. |
| `autoplay` | `boolean` | `true` | Stream when in view. If false or reduced motion, show the full answer. |
| `loop` | `boolean` | `true` | Restart after 3.4s (not while hovered or focused). Turn off in a real thread. |
| `fill` | `boolean` | `false` | Fill the parent instead of 380px. |

## Source

### `src/components/viewership/streaming-text/StreamingText.astro`

```astro
---
/**
 * StreamingText: a streamed answer with inline sources.
 *
 * Words resolve out of blur, citations pop in where cited, then the action
 * row, sources toggle and follow-ups become usable. `content` takes tokens,
 * or a string where a standalone `[n]` cites `sources[n - 1]`.
 *
 * Events (bubbling, on the root):
 *   vs-streaming-text:done       the stream finished
 *   vs-streaming-text:action     detail { action: "copy" | "regenerate" | "good" | "bad" }
 *   vs-streaming-text:follow-up  detail { text, index }
 *
 * Adapted from Beautiful UI StreamingText (MIT, © 2026 Shane Levine).
 *
 * @example
 * <StreamingText content="Organic traffic is up 12%. [1]" sources={sources} loop={false} />
 */
import type { HTMLAttributes } from "astro/types";

/** One streamed word. */
export interface StreamingWord {
  text: string;
  cite?: undefined;
}
/** A citation of `sources[cite]` (0-based), rendered as an inline chip. */
export interface StreamingCite {
  cite: number;
  text?: undefined;
}
export type StreamingToken = StreamingWord | StreamingCite;

export interface StreamingSource {
  name: string;
  /** Short mono label: a domain or a file name. */
  domain: string;
  href?: string;
  /** Avatar image URL (a favicon or data URI). Falls back to the first letter of `name`. */
  image?: string;
}

export interface StreamingLabels {
  /** Label on the sources toggle. Defaults to "N sources". */
  sources: string;
  /** Heading above the follow-up prompts. */
  followUps: string;
  copy: string;
  regenerate: string;
  good: string;
  bad: string;
}

type Props = HTMLAttributes<"div"> & {
  content: string | StreamingToken[];
  sources?: StreamingSource[];
  followUps?: string[];
  labels?: Partial<StreamingLabels>;
  /** Stream when scrolled into view. */
  autoplay?: boolean;
  /** Restart after a hold. Turn off when embedding in a real thread. */
  loop?: boolean;
  /** Fill the parent instead of the 380px reading measure. */
  fill?: boolean;
};

const {
  content,
  sources = [],
  followUps = [],
  labels,
  autoplay = true,
  loop = true,
  fill = false,
  class: className,
  ...rest
} = Astro.props;

const l: StreamingLabels = {
  sources: `${sources.length} source${sources.length === 1 ? "" : "s"}`,
  followUps: "Follow-ups",
  copy: "Copy",
  regenerate: "Regenerate",
  good: "Good response",
  bad: "Bad response",
  ...labels,
};

const tokens: StreamingToken[] =
  typeof content === "string"
    ? content
        .split(/\s+/)
        .filter(Boolean)
        .map((word) => {
          const cite = /^\[(\d+)\]$/.exec(word);
          return cite ? { cite: Number(cite[1]) - 1 } : { text: word };
        })
    : content;

const plainText = tokens
  .filter((t) => t.text !== undefined)
  .map((t) => t.text)
  .join(" ");

const ACTIONS = [
  { action: "copy", label: l.copy, icon: '<rect x="9" y="9" width="12" height="12" rx="2.5"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>' },
  { action: "regenerate", label: l.regenerate, icon: '<path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/>' },
  { action: "good", label: l.good, toggle: true, icon: '<path d="M7 10v12M15 5.88L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88z"/>' },
  { action: "bad", label: l.bad, toggle: true, icon: '<path d="M17 14V2M9 18.12L10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88z"/>' },
];

/* JSON for the script; escape "<" so the text can never close the <script> element */
const config = JSON.stringify({ text: plainText }).replaceAll("<", "\\u003c");
const panelId = `vs-streaming-${Math.random().toString(36).slice(2, 8)}`;
const initial = (name: string) => name.trim().charAt(0).toUpperCase();
---

<div
  class:list={["vs-streaming-text", fill && "is-fill", className]}
  data-autoplay={autoplay ? "" : undefined}
  data-loop={loop ? "" : undefined}
  data-done=""
  {...rest}
>
  <p class="answer" data-answer tabindex="-1">
    {tokens.map((token) => {
      if (token.cite === undefined) return <span class="token word" data-token>{token.text} </span>;
      const source = sources[token.cite];
      if (!source) return null;
      const Chip = source.href ? "a" : "span";
      return (
        <Chip
          class="token chip"
          data-token
          href={source.href}
          target={source.href ? "_blank" : undefined}
          rel={source.href ? "noreferrer" : undefined}
        >
          {source.image ? (
            <img class="avatar chip-avatar" src={source.image} alt="" width="12" height="12" />
          ) : (
            <span class="avatar chip-avatar is-letter" aria-hidden="true">{initial(source.name)}</span>
          )}
          <span>{source.domain}</span>
        </Chip>
      );
    })}
    <span class="caret" aria-hidden="true"></span>
  </p>
  <span class="visually-hidden" role="status" data-live></span>

  <div class="actions" data-after>
    {ACTIONS.map((a) => (
      <button
        type="button"
        class="icon-button"
        aria-label={a.label}
        title={a.label}
        data-action={a.action}
        aria-pressed={a.toggle ? "false" : undefined}
      >
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" set:html={a.icon} />
      </button>
    ))}
    {sources.length > 0 && (
      <button type="button" class="sources-toggle" aria-expanded="false" aria-controls={panelId} data-sources-toggle>
        <span class="stack" aria-hidden="true">
          {sources.map((source) =>
            source.image ? (
              <img class="avatar stack-avatar" src={source.image} alt="" width="14" height="14" />
            ) : (
              <span class="avatar stack-avatar is-letter">{initial(source.name)}</span>
            ),
          )}
        </span>
        <span class="sources-label">{l.sources}</span>
      </button>
    )}
  </div>

  {sources.length > 0 && (
    <div class="sources-panel" id={panelId} data-sources-panel>
      <div class="sources-clip" data-sources-clip>
        <div class="sources-list">
          {sources.map((source) => {
            const Row = source.href ? "a" : "div";
            return (
              <Row
                class="source"
                href={source.href}
                target={source.href ? "_blank" : undefined}
                rel={source.href ? "noreferrer" : undefined}
              >
                {source.image ? (
                  <img class="avatar source-avatar" src={source.image} alt="" width="16" height="16" />
                ) : (
                  <span class="avatar source-avatar is-letter" aria-hidden="true">{initial(source.name)}</span>
                )}
                <span class="source-name">{source.name}</span>
                <span class="source-domain">{source.domain}</span>
              </Row>
            );
          })}
        </div>
      </div>
    </div>
  )}

  {followUps.length > 0 && (
    <div class="follow-ups" data-after>
      <p class="follow-ups-heading">{l.followUps}</p>
      <div class="follow-ups-list">
        {followUps.map((text, i) => (
          <button type="button" class="follow-up" style={`--vs-st-i: ${i}`} data-follow-up={i}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M9 10l-5 5 5 5"></path>
              <path d="M20 4v7a4 4 0 0 1-4 4H4"></path>
            </svg>
            {text}
          </button>
        ))}
      </div>
    </div>
  )}

  <script is:inline type="application/json" data-vs-config set:html={config} />
</div>

<style>
  .vs-streaming-text {
    width: 100%;
    max-width: 380px;
    min-height: 15.5rem;
  }
  .vs-streaming-text.is-fill {
    max-width: none;
    min-height: 0;
  }

  /* ── answer ── */
  .answer {
    margin: 0;
    outline: none;
    font-size: 13px;
    line-height: 1.625;
    color: var(--vs-ink);
  }
  .token[hidden] {
    display: none;
  }
  /* each word resolves out of a soft blur as it arrives */
  [data-streaming] .word {
    animation: vs-streaming-text-blur-in 260ms var(--vs-ease-out) both;
  }
  @keyframes vs-streaming-text-blur-in {
    from {
      opacity: 0;
      filter: blur(4px);
    }
    to {
      opacity: 1;
      filter: blur(0);
    }
  }

  .chip {
    display: inline-flex;
    height: 18px;
    box-sizing: border-box;
    align-items: center;
    gap: 4px;
    margin: 0 4px 0 0;
    padding: 0 3px;
    border-radius: 5px;
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-hairline);
    color: var(--vs-ink-2);
    font-family: var(--vs-font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    translate: 0 -1px;
    transition:
      background-color 150ms ease-out,
      color 150ms ease-out;
  }
  [data-streaming] .chip {
    animation: vs-pop-in 250ms var(--vs-ease-out) both;
  }
  a.chip:hover {
    background: var(--vs-hover);
    color: var(--vs-ink);
  }

  .caret {
    display: none;
    width: 2px;
    height: 12px;
    margin-left: 2px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-ink);
    translate: 0 2px;
    animation: vs-fade-in 150ms ease-out both;
  }
  [data-streaming] .caret {
    display: inline-block;
  }

  /* favicon avatars */
  .avatar {
    flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--vs-ink) 9%, transparent);
  }
  .avatar.is-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
    font-family: var(--vs-font-sans);
    font-weight: 600;
    line-height: 1;
  }
  .chip-avatar {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    font-size: 7px;
  }
  .stack-avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--vs-surface);
    font-size: 8px;
  }
  .source-avatar {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 9px;
  }

  /* ── revealed once the stream completes ── */
  .actions,
  .follow-ups {
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease-out;
  }
  [data-done] .actions,
  [data-done] .follow-ups {
    opacity: 1;
    pointer-events: auto;
  }

  .actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 8px;
  }
  .icon-button {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--vs-radius-chip);
    background: transparent;
    color: var(--vs-ink-3);
    cursor: pointer;
    transition:
      background-color 100ms ease-out,
      color 100ms ease-out;
  }
  .icon-button:hover {
    background: var(--vs-hover-2);
    color: var(--vs-ink-2);
  }
  .icon-button[aria-pressed="true"] {
    color: var(--vs-ink);
  }
  .icon-button[aria-pressed="true"] svg {
    fill: color-mix(in oklab, currentColor 14%, transparent);
  }
  .icon-button.is-copied {
    color: var(--vs-green);
  }

  .sources-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    padding: 2px 4px;
    border: none;
    border-radius: var(--vs-radius-chip);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease-out;
  }
  .sources-toggle:hover {
    background: var(--vs-hover);
  }
  .stack {
    display: flex;
  }
  .stack > * + * {
    margin-left: -4px;
  }
  .sources-label {
    font-size: 12px;
    color: var(--vs-ink-2);
  }

  .sources-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 300ms var(--vs-ease-out),
      opacity 300ms var(--vs-ease-out);
  }
  [data-done][data-sources-open] .sources-panel {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .sources-clip {
    min-height: 0;
    overflow: hidden;
  }
  .sources-list {
    display: flex;
    flex-direction: column;
    margin-top: 6px;
    padding: 4px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-hairline);
  }
  .source {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--vs-radius-chip);
    color: var(--vs-ink-2);
    font-size: 12px;
    text-decoration: none;
    transition:
      background-color 150ms ease-out,
      color 150ms ease-out;
  }
  a.source:hover {
    background: var(--vs-hover);
    color: var(--vs-ink);
  }
  .source-name {
    position: relative;
    display: inline-block;
  }
  .source-name::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    content: "";
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 280ms var(--vs-ease-link);
  }
  a.source:hover .source-name::after,
  a.source:focus-visible .source-name::after {
    transform: scaleX(1);
  }
  .source-domain {
    margin-left: auto;
    font-family: var(--vs-font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    color: var(--vs-ink-3);
  }

  .follow-ups {
    margin-top: 10px;
  }
  .follow-ups-heading {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--vs-ink-2);
  }
  .follow-ups-list {
    display: flex;
    flex-direction: column;
    margin-top: 2px;
  }
  .follow-up {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -6px;
    padding: 6px;
    border: none;
    border-bottom: 1px solid var(--vs-line);
    border-radius: 7px;
    background: transparent;
    color: var(--vs-ink);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    transition: background-color 100ms ease-out;
  }
  .follow-up svg {
    flex-shrink: 0;
    color: var(--vs-ink-3);
  }
  .follow-up:hover {
    background: var(--vs-hover-2);
  }
  [data-done] .follow-up {
    animation: vs-fade-up 350ms var(--vs-ease-out) calc(var(--vs-st-i) * 90ms) both;
  }

  .icon-button:focus-visible,
  .sources-toggle:focus-visible,
  .follow-up:focus-visible,
  .source:focus-visible,
  .chip:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* hide the finished answer for the instant before the script rewinds it */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .vs-streaming-text[data-autoplay]:not([data-vs-ready]) {
      visibility: hidden;
    }
  }
  /* without script the toggle can't open the list, so show it */
  @media (scripting: none) {
    .sources-panel {
      grid-template-rows: 1fr;
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-streaming] .word,
    [data-streaming] .chip,
    [data-done] .follow-up {
      animation: none;
    }
    .follow-up {
      opacity: 1;
    }
  }
</style>

<script>
  const WORD_MS = 55;
  const HOLD_MS = 3400;

  /** One pending timeout that can pause and resume where it left off. */
  function createTimer() {
    let id: number | undefined;
    let fn: (() => void) | undefined;
    let left = 0;
    let due = 0;
    let paused = true;
    const arm = () => {
      due = performance.now() + left;
      id = window.setTimeout(() => {
        const run = fn;
        id = fn = undefined;
        run?.();
      }, left);
    };
    return {
      set(ms: number, next: () => void) {
        window.clearTimeout(id);
        id = undefined;
        fn = next;
        left = ms;
        if (!paused) arm();
      },
      pause() {
        if (paused) return;
        paused = true;
        if (id === undefined) return;
        window.clearTimeout(id);
        id = undefined;
        left = Math.max(0, due - performance.now());
      },
      resume() {
        if (!paused) return;
        paused = false;
        if (fn) arm();
      },
      clear() {
        window.clearTimeout(id);
        id = fn = undefined;
      },
    };
  }

  function init(root: HTMLElement) {
    const answer = root.querySelector<HTMLElement>("[data-answer]")!;
    const live = root.querySelector<HTMLElement>("[data-live]")!;
    const tokens = [...root.querySelectorAll<HTMLElement>("[data-token]")];
    const after = [...root.querySelectorAll<HTMLElement>("[data-after]")];
    const toggle = root.querySelector<HTMLButtonElement>("[data-sources-toggle]");
    const clip = root.querySelector<HTMLElement>("[data-sources-clip]");
    const config = JSON.parse(root.querySelector("[data-vs-config]")?.textContent || "{}") as { text?: string };
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const loop = root.hasAttribute("data-loop");

    const timer = createTimer();
    let count = tokens.length;
    let announced = false;
    let sourcesOpen = false;

    const emit = (name: string, detail?: unknown) =>
      root.dispatchEvent(new CustomEvent(`vs-streaming-text:${name}`, { bubbles: true, detail }));

    const renderSources = () => {
      const open = sourcesOpen && root.hasAttribute("data-done");
      root.toggleAttribute("data-sources-open", sourcesOpen);
      toggle?.setAttribute("aria-expanded", String(open));
      if (clip) clip.inert = !open;
    };

    const setDone = (done: boolean) => {
      root.toggleAttribute("data-done", done);
      root.toggleAttribute("data-streaming", !done);
      answer.setAttribute("aria-busy", String(!done));
      after.forEach((el) => (el.inert = !done));
      renderSources();
    };

    const finish = () => {
      setDone(true);
      if (!announced && config.text) {
        announced = true;
        live.textContent = config.text;
      }
      emit("done");
      if (loop) timer.set(HOLD_MS, restart);
    };

    const tick = () => {
      const token = tokens[count];
      if (token) token.hidden = false;
      count += 1;
      if (count >= tokens.length) finish();
      else timer.set(WORD_MS, tick);
    };

    const start = () => {
      count = 0;
      tokens.forEach((token) => (token.hidden = true));
      setDone(false);
      timer.set(WORD_MS, tick);
    };

    function restart() {
      /* don't rewind under someone's pointer, focus, or an open sources list */
      if (root.matches(":hover") || root.contains(document.activeElement) || sourcesOpen) {
        timer.set(HOLD_MS, restart);
        return;
      }
      start();
    }

    /* ── interactions ── */
    toggle?.addEventListener("click", () => {
      sourcesOpen = !sourcesOpen;
      renderSources();
    });

    root.querySelectorAll<HTMLButtonElement>("[data-action]").forEach((button) => {
      button.addEventListener("click", () => {
        const action = button.dataset.action!;
        if (action === "copy" && config.text) {
          navigator.clipboard?.writeText(config.text).then(() => {
            button.classList.add("is-copied");
            window.setTimeout(() => button.classList.remove("is-copied"), 1600);
          }, () => {});
        }
        if (action === "good" || action === "bad") {
          const pressed = button.getAttribute("aria-pressed") === "true";
          root.querySelectorAll("[data-action='good'], [data-action='bad']").forEach((b) => b.setAttribute("aria-pressed", "false"));
          button.setAttribute("aria-pressed", String(!pressed));
        }
        if (action === "regenerate" && !reduced && root.hasAttribute("data-autoplay")) {
          sourcesOpen = false;
          start();
          answer.focus();
        }
        emit("action", { action });
      });
    });

    root.querySelectorAll<HTMLButtonElement>("[data-follow-up]").forEach((button) => {
      button.addEventListener("click", () =>
        emit("follow-up", { text: button.textContent?.trim() ?? "", index: Number(button.dataset.followUp) }),
      );
    });

    if (reduced || !root.hasAttribute("data-autoplay")) {
      setDone(true);
      return;
    }

    start();

    const io = new IntersectionObserver(([entry]) => {
      if (!root.isConnected) return teardown();
      if (entry?.isIntersecting) timer.resume();
      else timer.pause();
    }, { threshold: 0.2 });
    io.observe(root);

    function teardown() {
      timer.clear();
      io.disconnect();
    }
    document.addEventListener("astro:before-swap", teardown, { once: true });
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-streaming-text:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>
```


---

# Approval Card

> Questions an agent asks, one step at a time, before acting.

- **Slug:** `approval-card`
- **Kind:** component · **Category:** Agent
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/ApprovalCard.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/approval-card
- **All files in one bundle:** https://viewership.ai/design/components/approval-card.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/approval-card.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/approval-card/`:

   - `ApprovalCard.astro` (raw: https://viewership.ai/design/raw/approval-card/ApprovalCard.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)
   - `glide-menu`: `GlideMenu.astro`, `glide-menu.ts` (docs: https://viewership.ai/design/components/glide-menu.md)

npm packages: none.

## Usage

```astro
---
import ApprovalCard from "../components/viewership/approval-card/ApprovalCard.astro";
---

<ApprovalCard />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import ApprovalCard from "./ApprovalCard.astro";
import type { ApprovalQuestion } from "./ApprovalCard.astro";

const questions: ApprovalQuestion[] = [
  {
    q: "Which angle should lead the spring campaign?",
    type: "radio",
    options: ["Trail readiness", "Weekend deals", "Gear care tips"],
  },
  {
    q: "Which channels get the first draft?",
    type: "check",
    options: ["Email newsletter", "Reddit threads", "YouTube script"],
  },
  {
    q: "How should we word the offer?",
    type: "radio",
    options: ["Free shipping", "Ten percent off", "Match last year"],
  },
];
---

<div class="stage">
  <ApprovalCard questions={questions} />
</div>

<style>
  .stage {
    display: flex;
    width: 100%;
    justify-content: center;
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `questions` | `{ q: string; type: "radio" \| "check"; options: string[] }[]` |  | One step per question. Free-text answer always allowed. |
| `labels` | `Partial<ApprovalLabels>` |  | Text overrides. |
| `resettable` | `boolean` | `true` | Show Start over after sending. |
| `autoAdvance` | `boolean` | `true` | Advance after a pointer or Space pick, not arrow keys. |
| `vs-approval-submit` | `CustomEvent<ApprovalAnswer[]>` |  | Fires on send. Skipped steps are empty. |
| `vs-approval-change` | `CustomEvent<{ index: number; answer: ApprovalAnswer }>` |  | Fires when a step's answer changes. |
| `vs-approval-dismiss` | `CustomEvent<{ index: number }>` |  | Fires on close, or Skip on the last step. |

## Source

### `src/components/viewership/approval-card/ApprovalCard.astro`

```astro
---
/**
 * ApprovalCard: questions an agent asks a person before acting.
 *
 * Adapted from Beautiful UI ApprovalCard (MIT, © 2026 Shane Levine).
 *
 * One question at a time. Options are native radios and checkboxes. Single
 * choice auto-advances on pointer or Space, not on arrow keys. Every
 * question also takes a free-text answer.
 *
 * Events (bubbling, on the root):
 *   vs-approval-submit   detail: ApprovalAnswer[] (one per question)
 *   vs-approval-change   detail: { index, answer: ApprovalAnswer }
 *   vs-approval-dismiss  detail: { index } (the question showing when closed)
 *
 * @example
 * <ApprovalCard questions={[{ q: "Publish today?", type: "radio", options: ["Yes", "Tomorrow"] }]} />
 */
import type { HTMLAttributes } from "astro/types";
import Button from "../button/Button.astro";
import GlideMenu from "../glide-menu/GlideMenu.astro";

export interface ApprovalQuestion {
  /** The question; it is the heading of its step. */
  q: string;
  /** "radio" = pick one, "check" = pick any. */
  type: "radio" | "check";
  options: string[];
}

/** What `vs-approval-submit` reports for each question. */
export interface ApprovalAnswer {
  question: string;
  /** Picked options, by label. */
  selected: string[];
  /** Picked options, by index. */
  indices: number[];
  /** Free-text answer ("" when empty). */
  custom: string;
}

export interface ApprovalLabels {
  skip: string;
  continue: string;
  send: string;
  customPlaceholder: string;
  customLabel: string;
  sentMessage: string;
  startOver: string;
  dismiss: string;
  reopen: string;
  previous: string;
  next: string;
  /** Screen-reader step text. {n} and {total} are replaced. */
  step: string;
}

type Props = HTMLAttributes<"div"> & {
  questions: ApprovalQuestion[];
  labels?: Partial<ApprovalLabels>;
  /** Show "Start over" after sending. */
  resettable?: boolean;
  /** Single-choice answers advance on their own (pointer or Space). */
  autoAdvance?: boolean;
};

const { questions = [], labels, resettable = true, autoAdvance = true, class: className, ...rest } = Astro.props;

const l: ApprovalLabels = {
  skip: "Skip",
  continue: "Continue",
  send: "Send",
  customPlaceholder: "Something else…",
  customLabel: "Something else",
  sentMessage: "Answers sent",
  startOver: "Start over",
  dismiss: "Dismiss",
  reopen: "Open approval",
  previous: "Previous question",
  next: "Next question",
  step: "Question {n} of {total}",
  ...labels,
};

const uid = `vs-approval-${Math.random().toString(36).slice(2, 8)}`;
const total = questions.length;
const checkPath = '<path d="M20 6L9 17l-5-5" />';
---

<div
  class:list={["vs-approval-card", className]}
  data-auto-advance={autoAdvance ? "" : undefined}
  data-labels={JSON.stringify({ continue: l.continue, send: l.send, step: l.step })}
  {...rest}
>
  <div class="card" data-card>
    <button type="button" class="dismiss" aria-label={l.dismiss} data-dismiss>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M18 6L6 18M6 6l12 12"></path>
      </svg>
    </button>

    <div class="pad">
      <div class="viewport" data-viewport>
        <div class="track" data-track>
          {questions.map((question, qi) => {
            const titleId = `${uid}-q${qi}`;
            const kind = question.type === "radio" ? "radio" : "checkbox";
            return (
              <div class="question" data-question={qi} data-type={question.type} data-active={qi === 0 ? "" : undefined}>
                <div class="title" id={titleId}>{question.q}</div>
                <GlideMenu class="options">
                  <div class="group" role={kind === "radio" ? "radiogroup" : "group"} aria-labelledby={titleId}>
                    {question.options.map((option, i) => (
                      <label class="option" data-menu-row>
                        <input class="native" type={kind} name={`${titleId}-opt`} value={String(i)} data-option={option} />
                        <span class:list={["mark", `mark--${kind}`]} aria-hidden="true">
                          {kind === "radio" ? (
                            <span class="dot"></span>
                          ) : (
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" set:html={checkPath} />
                          )}
                        </span>
                        <span class="option-label">{option}</span>
                      </label>
                    ))}
                  </div>
                  <label class="option option--custom" data-menu-row>
                    <input class="custom" type="text" placeholder={l.customPlaceholder} aria-label={`${l.customLabel}: ${question.q}`} autocomplete="off" data-custom />
                  </label>
                </GlideMenu>
              </div>
            );
          })}
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="pager">
        <button type="button" class="pager-btn" aria-label={l.previous} disabled data-prev>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 15l-6-6-6 6"></path></svg>
        </button>
        <span class="counter" aria-hidden="true" data-counter>{`1 / ${total}`}</span>
        <span class="vh" data-step-text>{l.step.replace("{n}", "1").replace("{total}", String(total))}</span>
        <button type="button" class="pager-btn" aria-label={l.next} disabled={total <= 1} data-next>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg>
        </button>
      </div>
      <div class="actions">
        <Button variant="ghost" size="sm" data-skip>{l.skip}</Button>
        <Button variant="accent" size="sm" disabled data-continue>{total <= 1 ? l.send : l.continue}</Button>
      </div>
    </div>
  </div>

  <div class="sent" role="status" tabindex="-1" hidden data-sent>
    <span class="sent-pill">
      <span class="sent-check" aria-hidden="true">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" set:html={checkPath} />
      </span>
      {l.sentMessage}
    </span>
    {resettable && <button type="button" class="start-over" data-reset>{l.startOver}</button>}
  </div>

  <button type="button" class="reopen" hidden data-reopen>{l.reopen}</button>
  <span class="vh" aria-live="polite" data-live></span>
</div>

<script>
  interface ApprovalAnswer {
    question: string;
    selected: string[];
    indices: number[];
    custom: string;
  }

  const ROLL_MS = 400;
  const ADVANCE_MS = 480;

  /** Odometer: each character that changes rolls up (or down). Built inline so it needs no scoped CSS. */
  function rollCounter(el: HTMLElement, value: string, animate: boolean) {
    const from = el.dataset.value ?? el.textContent ?? value;
    el.dataset.value = value;
    if (!animate || from === value) {
      el.textContent = value;
      return;
    }
    const fromN = parseInt(from, 10);
    const toN = parseInt(value, 10);
    const down = Number.isFinite(fromN) && Number.isFinite(toN) && toN < fromN;
    el.replaceChildren();
    const cols: HTMLElement[] = [];
    for (let i = 0; i < value.length; i++) {
      const o = from[i] ?? "";
      const n = value[i] ?? "";
      if (o === n) {
        el.append(n);
        continue;
      }
      const box = document.createElement("span");
      box.style.cssText = "display:inline-block;position:relative;overflow:hidden;height:1em;line-height:1em;vertical-align:-0.05em";
      const col = document.createElement("span");
      col.style.cssText = `display:flex;flex-direction:column;transition:transform 350ms cubic-bezier(0.4,0,0.2,1);transform:translateY(${down ? "-1em" : "0"})`;
      for (const ch of down ? [n, o] : [o, n]) {
        const cell = document.createElement("span");
        cell.style.cssText = "height:1em;line-height:1em";
        cell.textContent = ch;
        col.append(cell);
      }
      box.append(col);
      el.append(box);
      cols.push(col);
    }
    requestAnimationFrame(() =>
      requestAnimationFrame(() => cols.forEach((col) => (col.style.transform = `translateY(${down ? "0" : "-1em"})`))),
    );
    window.setTimeout(() => {
      if (el.dataset.value === value) el.textContent = value;
    }, ROLL_MS);
  }

  function init(root: HTMLElement) {
    const card = root.querySelector<HTMLElement>("[data-card]")!;
    const viewport = root.querySelector<HTMLElement>("[data-viewport]")!;
    const track = root.querySelector<HTMLElement>("[data-track]")!;
    const questions = [...root.querySelectorAll<HTMLElement>("[data-question]")];
    const prev = root.querySelector<HTMLButtonElement>("[data-prev]")!;
    const next = root.querySelector<HTMLButtonElement>("[data-next]")!;
    const skip = root.querySelector<HTMLButtonElement>("[data-skip]")!;
    const cont = root.querySelector<HTMLButtonElement>("[data-continue]")!;
    const counter = root.querySelector<HTMLElement>("[data-counter]")!;
    const stepText = root.querySelector<HTMLElement>("[data-step-text]")!;
    const sent = root.querySelector<HTMLElement>("[data-sent]")!;
    const reset = root.querySelector<HTMLButtonElement>("[data-reset]");
    const reopen = root.querySelector<HTMLButtonElement>("[data-reopen]")!;
    const dismiss = root.querySelector<HTMLButtonElement>("[data-dismiss]")!;
    const live = root.querySelector<HTMLElement>("[data-live]")!;
    const labels = JSON.parse(root.dataset.labels || "{}") as { continue: string; send: string; step: string };
    const autoAdvance = root.hasAttribute("data-auto-advance");
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
    const total = questions.length;
    if (!total) return;

    let qi = 0;
    let measured = false;
    let advanceTimer: number | undefined;
    let intent = 0; // timestamp of the last pointer / Space activation

    const inputs = (q: HTMLElement) => [...q.querySelectorAll<HTMLInputElement>("input.native")];
    const customOf = (q: HTMLElement) => q.querySelector<HTMLInputElement>("[data-custom]")!;

    const answerOf = (q: HTMLElement): ApprovalAnswer => {
      const picked = inputs(q).filter((i) => i.checked);
      return {
        question: q.querySelector(".title")?.textContent ?? "",
        selected: picked.map((i) => i.dataset.option ?? ""),
        indices: picked.map((i) => Number(i.value)),
        custom: customOf(q).value.trim(),
      };
    };
    const hasAnswer = (q: HTMLElement) => {
      const a = answerOf(q);
      return a.indices.length > 0 || a.custom.length > 0;
    };

    /* the viewport clips to the active question; the track slides it into place */
    const sync = (animate: boolean) => {
      const item = questions[qi]!;
      const anim = animate && !reduce.matches;
      viewport.toggleAttribute("data-animate", anim);
      track.toggleAttribute("data-animate", anim);
      viewport.style.height = `${item.offsetHeight}px`;
      track.style.transform = `translate3d(0, ${-item.offsetTop}px, 0)`;
    };

    const updateFooter = () => {
      const last = qi === total - 1;
      prev.disabled = qi <= 0;
      next.disabled = last;
      cont.disabled = !hasAnswer(questions[qi]!);
      cont.textContent = last ? labels.send : labels.continue;
    };

    const render = (animate: boolean) => {
      questions.forEach((q, i) => {
        const active = i === qi;
        q.toggleAttribute("data-active", active);
        q.inert = !active;
      });
      const value = `${qi + 1} / ${total}`;
      rollCounter(counter, value, animate && !reduce.matches);
      stepText.textContent = labels.step.replace("{n}", String(qi + 1)).replace("{total}", String(total));
      updateFooter();
      sync(animate);
    };

    const goTo = (index: number) => {
      window.clearTimeout(advanceTimer);
      const target = Math.min(Math.max(index, 0), total - 1);
      if (target === qi) return;
      const hadFocus = questions[qi]!.contains(document.activeElement);
      qi = target;
      render(measured);
      live.textContent = stepText.textContent ?? "";
      // Focus would be stranded in the now-inert question; carry it along.
      if (hadFocus) {
        const q = questions[qi]!;
        const into = inputs(q).find((i) => i.checked) ?? inputs(q)[0] ?? customOf(q);
        into.focus({ preventScroll: true });
      }
    };

    const send = () => {
      window.clearTimeout(advanceTimer);
      card.hidden = true;
      sent.hidden = false;
      root.dispatchEvent(new CustomEvent<ApprovalAnswer[]>("vs-approval-submit", { bubbles: true, detail: questions.map(answerOf) }));
      (reset ?? sent).focus();
    };

    const advance = () => {
      if (qi === total - 1) send();
      else goTo(qi + 1);
    };

    const close = () => {
      window.clearTimeout(advanceTimer);
      card.hidden = true;
      reopen.hidden = false;
      root.dispatchEvent(new CustomEvent("vs-approval-dismiss", { bubbles: true, detail: { index: qi } }));
      reopen.focus();
    };

    const emitChange = (q: HTMLElement) => {
      updateFooter();
      const index = questions.indexOf(q);
      root.dispatchEvent(new CustomEvent("vs-approval-change", { bubbles: true, detail: { index, answer: answerOf(q) } }));
    };

    questions.forEach((q) => {
      const custom = customOf(q);
      const radio = q.dataset.type === "radio";

      q.addEventListener("pointerdown", () => (intent = performance.now()));
      q.addEventListener("keydown", (event) => {
        const target = event.target as HTMLElement;
        if (event.key === " " && target.matches("input.native")) intent = performance.now();
        if (event.key === "Enter" && (target === custom || target.matches("input.native")) && hasAnswer(q)) {
          event.preventDefault();
          advance();
        }
      });

      q.addEventListener("change", (event) => {
        const input = event.target as HTMLInputElement;
        if (!input.matches("input.native")) return;
        if (radio && input.checked) custom.value = "";
        emitChange(q);
      });

      // Auto-advance only on a deliberate pick (pointer or Space), never while arrowing
      // through options. Listening to click also catches re-picking the checked option.
      q.addEventListener("click", (event) => {
        const input = event.target as HTMLElement;
        if (!radio || !autoAdvance || !input.matches("input.native")) return;
        if (performance.now() - intent > 800) return;
        window.clearTimeout(advanceTimer);
        advanceTimer = window.setTimeout(advance, ADVANCE_MS);
      });

      custom.addEventListener("input", () => {
        window.clearTimeout(advanceTimer);
        if (radio && custom.value) inputs(q).forEach((i) => (i.checked = false));
        emitChange(q);
      });
    });

    prev.addEventListener("click", () => goTo(qi - 1));
    next.addEventListener("click", () => goTo(qi + 1));
    skip.addEventListener("click", () => (qi === total - 1 ? close() : goTo(qi + 1)));
    cont.addEventListener("click", advance);
    dismiss.addEventListener("click", close);

    reopen.addEventListener("click", () => {
      reopen.hidden = true;
      card.hidden = false;
      render(false);
      dismiss.focus();
    });

    reset?.addEventListener("click", () => {
      questions.forEach((q) => {
        inputs(q).forEach((i) => (i.checked = false));
        customOf(q).value = "";
      });
      qi = 0;
      sent.hidden = true;
      card.hidden = false;
      render(false);
      questions[0]!.querySelector<HTMLInputElement>("input")?.focus();
    });

    // Questions can reflow (fonts, container width): keep the viewport fitted.
    const ro = new ResizeObserver(() => {
      if (!card.hidden) sync(false);
    });
    questions.forEach((q) => ro.observe(q));

    root.setAttribute("data-enhanced", "");
    render(false);
    measured = true;

    document.addEventListener(
      "astro:before-swap",
      () => {
        window.clearTimeout(advanceTimer);
        ro.disconnect();
      },
      { once: true },
    );
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-approval-card:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-approval-card {
    width: 100%;
    max-width: 320px;
  }
  .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* ── card ── */
  .card {
    position: relative;
    overflow: hidden;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
    animation: vs-fade-up 380ms var(--vs-ease-out) both;
  }
  .dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--vs-radius-control);
    background: transparent;
    color: var(--vs-ink-3);
    cursor: pointer;
    transition:
      background-color 100ms ease-out,
      color 100ms ease-out;
  }
  .dismiss:hover {
    background: var(--vs-hover);
    color: var(--vs-ink);
  }
  .pad {
    padding: 12px;
  }

  /* ── question stack ── */
  .viewport {
    overflow: hidden;
  }
  .viewport[data-animate] {
    transition: height 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .track {
    display: flex;
    flex-direction: column;
    gap: 26px;
    will-change: transform;
  }
  .track[data-animate] {
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Before the script measures, only the first question renders (no height flash). */
  .vs-approval-card:not([data-enhanced]) .question:not(:first-child) {
    display: none;
  }
  [data-enhanced] .question:not([data-active]) {
    opacity: 0;
    pointer-events: none;
  }
  [data-enhanced] .track[data-animate] .question {
    transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .title {
    padding-right: 28px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
  }
  .group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .option {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--vs-radius-control);
    text-align: left;
    cursor: pointer;
    transition: background-color 100ms ease-out;
  }
  /* inset ring: the sliding viewport clips anything drawn outside the row */
  .option:has(.native:focus-visible) {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--vs-accent) 70%, transparent);
  }
  .native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .mark {
    display: flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1.5px var(--vs-line-strong);
    color: transparent;
    transition:
      background-color 200ms ease-out,
      color 200ms ease-out,
      box-shadow 200ms ease-out;
  }
  .mark--radio {
    border-radius: 50%;
  }
  .mark--checkbox {
    border-radius: 5px;
  }
  .native:checked + .mark {
    background: var(--vs-ink);
    color: var(--vs-canvas);
    box-shadow: none;
  }
  .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vs-canvas);
    transform: scale(0);
    transition: transform 200ms ease-out;
  }
  .native:checked + .mark .dot {
    transform: scale(1);
  }
  .option-label {
    font-size: 13px;
    line-height: 1;
    color: var(--vs-ink-2);
    transition: color 200ms ease-out;
  }
  .native:checked ~ .option-label {
    color: var(--vs-ink);
  }
  .option--custom {
    cursor: text;
  }
  .custom {
    min-width: 0;
    height: 16px;
    flex: 1;
    padding: 0 0 0 6px;
    border: none;
    background: transparent;
    color: var(--vs-ink);
    font: inherit;
    font-size: 13px;
    outline: none;
  }
  .custom::placeholder {
    color: var(--vs-ink-3);
  }
  .option--custom:has(.custom:focus-visible) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-accent) 55%, transparent);
  }

  /* ── footer ── */
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
  }
  .pager {
    display: flex;
    align-items: center;
    gap: 1px;
    color: var(--vs-ink-3);
  }
  /* 24px hit area around the 18px upstream glyph box */
  .pager-btn {
    display: flex;
    width: 24px;
    height: 24px;
    margin: 0 -2px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: color 100ms ease-out;
  }
  .pager-btn:enabled:hover {
    color: var(--vs-ink);
  }
  .pager-btn:disabled {
    opacity: 0.3;
    cursor: default;
  }
  .counter {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.1px;
    line-height: 1;
    white-space: pre;
    color: var(--vs-ink-3);
  }
  .actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: -2px;
  }

  /* ── sent / closed ── */
  .sent {
    display: flex;
    align-items: center;
    gap: 12px;
    outline: none;
    animation: vs-pop-in 260ms var(--vs-ease-out) both;
  }
  .sent[hidden] {
    display: none;
  }
  .sent-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-green-tint);
    color: var(--vs-green);
    font-size: 12.5px;
    font-weight: 500;
  }
  .sent-check {
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vs-green);
    color: var(--vs-surface);
  }
  .start-over {
    min-height: 24px;
    padding: 0 2px;
    border: none;
    background: transparent;
    color: var(--vs-ink-3);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--vs-duration-fast) ease-out;
  }
  .start-over:hover {
    color: var(--vs-ink);
  }
  .reopen {
    padding: 8px 12px;
    border: none;
    border-radius: var(--vs-radius-control);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-btn);
    color: var(--vs-ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--vs-duration-fast) ease-out;
  }
  .reopen:hover {
    background: var(--vs-hover);
  }
  :is(.dismiss, .pager-btn, .start-over, .reopen):focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }

  @media (prefers-reduced-motion: reduce) {
    .card,
    .sent {
      animation: none;
    }
    .mark,
    .dot,
    .option-label {
      transition: none;
    }
  }
</style>
```


---

# Tool Chips

> Agent run as expandable tool-call rows, then file-diff chips.

- **Slug:** `tool-chips`
- **Kind:** component · **Category:** Agent
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/ToolChips.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/tool-chips
- **All files in one bundle:** https://viewership.ai/design/components/tool-chips.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/tool-chips.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/tool-chips/`:

   - `ToolChips.astro` (raw: https://viewership.ai/design/raw/tool-chips/ToolChips.astro.txt)

npm packages: none.

## Usage

```astro
---
import ToolChips from "../components/viewership/tool-chips/ToolChips.astro";
---

<ToolChips />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import ToolChips from "./ToolChips.astro";
import type { ToolDiff, ToolStep } from "./ToolChips.astro";

const steps: ToolStep[] = [
  {
    icon: "think",
    label: "Thinking",
    chip: "Planning the weekly report…",
    detail: [
      { text: "Paid search drove most conversions, so it leads the summary." },
      { text: "Two campaigns are waiting on client approval this week." },
    ],
  },
  {
    icon: "write",
    label: "Write 186 lines",
    chip: "WeeklyReport.astro",
    mono: true,
    detailMono: true,
    detail: [
      { text: "+ const rows = ga4.rows.filter((r) => r.paid)", tone: "add" },
      { text: '+ return report(rows, { client: "northwind" })', tone: "add" },
    ],
  },
  {
    icon: "run",
    label: "Rebuild and verify",
    chip: "npm run check",
    mono: true,
    detailMono: true,
    detail: [{ text: "✓ built in 1.4s" }, { text: "✓ 28 checks passed" }],
  },
  {
    icon: "read",
    label: "Read image",
    chip: "ai-citations.png",
    mono: true,
    detail: [
      { text: "1280 × 720 · bar chart, six prompts." },
      { text: "Perplexity citations are up 2 since August." },
    ],
  },
];

const diffs: ToolDiff[] = [
  {
    file: "report.css",
    add: 11,
    del: 0,
    lines: [
      { text: ".kpi-card {", tone: "ctx" },
      { text: "  gap: 14px;", tone: "del" },
      { text: "  gap: 12px;", tone: "add" },
      { text: "  container-type: inline-size;", tone: "add" },
      { text: "}", tone: "ctx" },
    ],
  },
  {
    file: "WeeklyReport.astro",
    add: 62,
    del: 18,
    lines: [
      { text: "const rows = ga4.rows;", tone: "ctx" },
      { text: "const paid = rows;", tone: "del" },
      { text: "const paid = rows.filter(", tone: "add" },
      { text: "  (r) => r.paid && r.converted,", tone: "add" },
      { text: ");", tone: "add" },
    ],
  },
  {
    file: "clients.ts",
    add: 6,
    del: 2,
    lines: [
      { text: 'export const client = "northwind-old";', tone: "del" },
      { text: 'export const client = "northwind";', tone: "add" },
    ],
  },
];
---

<ToolChips steps={steps} diffs={diffs} header="4 tool calls, 2 messages" more="+2 more" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` | `{ icon: "think" \| "write" \| "run" \| "read" \| "search"; label: string; chip: string; mono?: boolean; detailMono?: boolean; detail: { text: string; tone?: "add" }[] }[]` |  | Tool calls, in order. Rows expand to detail lines. |
| `diffs` | `{ file: string; add: number; del: number; lines?: { text: string; tone: "add" \| "del" \| "ctx" }[] }[]` | `[]` | Diff chips after the run. Chips with `lines` preview on hover, focus or click. |
| `header` | `string` | `"N tool calls"` | Run header label. |
| `more` | `string` |  | Trailing note, e.g. "+2 more". |
| `open` | `boolean` | `true` | Start expanded. |
| `autoplay` | `boolean` | `true` | Reveal rows 700ms apart in view. When false or under reduced motion, the full run renders. |
| `loop` | `boolean` | `false` | Replay after a hold. Stops once toggled. |

## Source

### `src/components/viewership/tool-chips/ToolChips.astro`

```astro
---
/**
 * ToolChips: an agent run as compact tool-call rows, then file-diff chips.
 *
 * Rows arrive one at a time (STEP_MS apart) and expand to show what the tool
 * did. Hover, focus or click a diff chip to preview its diff in a popover
 * that stays in the viewport (Esc closes it).
 *
 * Events (bubbling, on the root):
 *   vs-tool-chips:toggle-row   detail { label, open }
 *   vs-tool-chips:open-change  detail { open }
 *
 * Adapted from Beautiful UI ToolChips (MIT, © 2026 Shane Levine).
 *
 * @example
 * <ToolChips steps={steps} diffs={diffs} header="3 tool calls" />
 */
import type { HTMLAttributes } from "astro/types";

export type ToolIcon = "think" | "write" | "run" | "read" | "search";
export interface ToolDetailLine {
  text: string;
  tone?: "add";
}
export interface ToolStep {
  icon: ToolIcon;
  label: string;
  /** The inline chip: a file, command or one-line summary. */
  chip: string;
  /** Set the chip in mono. */
  mono?: boolean;
  /** Set the expanded detail in mono. */
  detailMono?: boolean;
  detail: ToolDetailLine[];
}
export interface ToolDiffLine {
  text: string;
  tone: "add" | "del" | "ctx";
}
export interface ToolDiff {
  file: string;
  add: number;
  del: number;
  /** Lines shown in the hover preview. */
  lines?: ToolDiffLine[];
}

type Props = HTMLAttributes<"div"> & {
  steps: ToolStep[];
  diffs?: ToolDiff[];
  /** Run header. Defaults to "N tool calls". */
  header?: string;
  /** Trailing note after the diff chips, e.g. "+2 more". */
  more?: string;
  /** Start with the run expanded. */
  open?: boolean;
  /** Play when scrolled into view. */
  autoplay?: boolean;
  /** Replay after a pause, never while someone is using it. */
  loop?: boolean;
};

const {
  steps = [],
  diffs = [],
  header = `${steps.length} tool call${steps.length === 1 ? "" : "s"}`,
  more,
  open = true,
  autoplay = true,
  loop = false,
  class: className,
  ...rest
} = Astro.props;

const ICONS: Record<ToolIcon, string> = {
  think: '<path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z" fill="currentColor" stroke="none"/>',
  write: '<path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z"/>',
  run: '<path d="M4 17l6-5-6-5M12 19h8"/>',
  read: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>',
  search: '<circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>',
};

const uid = `vs-tool-${Math.random().toString(36).slice(2, 8)}`;
---

<div
  class:list={["vs-tool-chips", className]}
  data-autoplay={autoplay ? "" : undefined}
  data-loop={loop ? "" : undefined}
  data-open={open ? "" : undefined}
  {...rest}
>
  <button type="button" class="run-header" aria-expanded={open ? "true" : "false"} aria-controls={`${uid}-run`} data-run-toggle>
    <svg class="run-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M6 9l6 6 6-6"></path>
    </svg>
    <span>{header}</span>
  </button>

  <div class="run" id={`${uid}-run`}>
    <div class="run-clip" data-run-clip>
      <div class="steps">
        {steps.map((step, i) => (
          <div class="step" data-step>
            <button type="button" class="step-row" aria-expanded="false" aria-controls={`${uid}-d${i}`} data-step-toggle={step.label}>
              <span class="step-icon" aria-hidden="true">
                <svg class="glyph" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={ICONS[step.icon] ?? ICONS.run} />
                <svg class="step-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M6 9l6 6 6-6"></path>
                </svg>
              </span>
              <span class="step-label">{step.label}</span>
              <span class:list={["step-chip", step.mono && "is-mono"]}>{step.chip}</span>
            </button>
            <div class="detail" id={`${uid}-d${i}`}>
              <div class="detail-clip" data-detail-clip>
                <div class:list={["detail-lines", step.detailMono && "is-mono"]}>
                  {step.detail.map((line) => <span class:list={["detail-line", line.tone === "add" && "is-add"]}>{line.text}</span>)}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {(diffs.length > 0 || more) && (
        <div class="diffs" data-diffs>
          {diffs.map((d, i) => (
            <button
              type="button"
              class="diff-chip"
              style={`--vs-tc-i: ${i}`}
              aria-label={`Show diff for ${d.file}, ${d.add} added${d.del > 0 ? `, ${d.del} removed` : ""}`}
              aria-expanded="false"
              aria-controls={d.lines?.length ? `${uid}-p${i}` : undefined}
              data-diff-chip={d.lines?.length ? `${uid}-p${i}` : undefined}
            >
              <span class="diff-file">{d.file}</span>
              <span class="diff-add">+{d.add}</span>
              {d.del > 0 && <span class="diff-del">−{d.del}</span>}
            </button>
          ))}
          {more && <span class="diff-more" style={`--vs-tc-i: ${diffs.length}`}>{more}</span>}
        </div>
      )}
    </div>
  </div>

  {diffs.map((d, i) =>
    d.lines?.length ? (
      <div class="preview" id={`${uid}-p${i}`} popover="manual" hidden data-preview>
        <div class="preview-head">
          <span class="preview-file">{d.file}</span>
          <span class="preview-counts">
            <span class="diff-add">+{d.add}</span>
            {d.del > 0 && <span class="diff-del"> −{d.del}</span>}
          </span>
        </div>
        <div class="preview-body">
          {d.lines.map((line) => (
            <div class:list={["preview-line", `is-${line.tone}`]}>
              <span class="preview-sign" aria-hidden="true">{line.tone === "add" ? "+" : line.tone === "del" ? "−" : " "}</span>
              <span class="preview-text">{line.text}</span>
            </div>
          ))}
        </div>
      </div>
    ) : null,
  )}
</div>

<style>
  .vs-tool-chips {
    width: 100%;
    max-width: 320px;
    min-height: 220px;
    padding-bottom: 4px;
  }

  button {
    font: inherit;
    color: inherit;
  }
  button:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }

  /* ── run header ── */
  .run-header {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    margin: 0 -6px;
    padding: 4px 6px;
    border: none;
    border-radius: var(--vs-radius-control);
    background: transparent;
    color: var(--vs-ink-2);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 100ms ease-out;
  }
  .run-header:hover {
    background: var(--vs-hover-2);
  }
  .run-chevron {
    transform: rotate(-90deg);
    transition: transform 200ms ease-out;
  }
  [data-open] .run-chevron {
    transform: rotate(0deg);
  }

  .run {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 300ms ease-out,
      opacity 300ms ease-out;
  }
  [data-open] .run {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  /* the negative margin + padding keeps content aligned while giving row hover pills room */
  .run-clip {
    min-height: 0;
    margin: 0 -4px;
    padding: 0 6px 4px;
    overflow: hidden;
  }

  /* ── tool call rows ── */
  .steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
  }
  .step {
    animation: vs-fade-up 300ms var(--vs-ease-out) both;
  }
  .step-row {
    display: flex;
    width: calc(100% + 6px);
    min-width: 0;
    height: 28px;
    align-items: center;
    gap: 8px;
    margin: 0 -3px;
    padding: 0 3px;
    border: none;
    border-radius: var(--vs-radius-control);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 100ms ease-out;
  }
  .step-row:hover {
    background: var(--vs-hover-2);
  }
  .step-icon {
    position: relative;
    display: flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--vs-ink-3);
  }
  .glyph {
    transition: opacity 100ms ease-out;
  }
  .step-chevron {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg);
    transition:
      opacity 150ms ease-out,
      transform 150ms ease-out;
  }
  .step-row:hover .glyph,
  .step-row:focus-visible .glyph,
  .step-row[aria-expanded="true"] .glyph {
    opacity: 0;
  }
  .step-row:hover .step-chevron,
  .step-row:focus-visible .step-chevron,
  .step-row[aria-expanded="true"] .step-chevron {
    opacity: 1;
  }
  .step-row[aria-expanded="true"] .step-chevron {
    transform: rotate(0deg);
  }
  .step-label {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .step-chip {
    display: block;
    min-width: 0;
    height: 22px;
    flex: 1;
    box-sizing: border-box;
    padding: 0 6px;
    overflow: hidden;
    border-radius: var(--vs-radius-chip);
    background: var(--vs-field);
    box-shadow: var(--vs-shadow-hairline);
    color: var(--vs-ink-2);
    font-size: 11.5px;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 100ms ease-out;
  }
  .step-chip:hover {
    background: var(--vs-hover-2);
  }
  .is-mono {
    font-family: var(--vs-font-mono);
  }

  .detail {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 300ms var(--vs-ease-out),
      opacity 300ms var(--vs-ease-out);
  }
  .step[data-row-open] .detail {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .detail-clip {
    min-height: 0;
    overflow: hidden;
  }
  .detail-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 4px 8px;
    padding: 2px 0 2px 14px;
    border-left: 1px solid var(--vs-line);
  }
  .detail-line {
    overflow: hidden;
    color: var(--vs-ink-2);
    font-size: 11.5px;
    line-height: 1.6;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .detail-line.is-add {
    color: var(--vs-green);
  }

  /* ── file-diff chips ── */
  .diffs {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--vs-line);
  }
  .diffs[hidden] {
    display: none;
  }
  .diff-chip {
    display: inline-flex;
    max-width: 100%;
    height: 28px;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    border: none;
    border-radius: var(--vs-radius-chip);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-btn);
    color: var(--vs-ink);
    font-family: var(--vs-font-mono);
    font-size: 11.5px;
    cursor: default;
    transition: background-color 100ms ease-out;
    animation: vs-pop-in 250ms var(--vs-ease-out) calc(var(--vs-tc-i) * 80ms) both;
  }
  .diff-chip[data-diff-chip] {
    cursor: pointer;
  }
  .diff-chip:hover,
  .diff-chip[aria-expanded="true"] {
    background: var(--vs-hover);
  }
  .diff-file {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .diff-add,
  .diff-del {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .diff-add {
    color: var(--vs-green);
  }
  .diff-del {
    color: var(--vs-red);
  }
  .diff-more {
    display: inline-flex;
    height: 28px;
    align-items: center;
    padding: 0 6px;
    color: var(--vs-ink-3);
    font-family: var(--vs-font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    animation: vs-fade-in 300ms ease-out calc(var(--vs-tc-i) * 80ms) both;
  }

  /* ── diff preview (top layer via the Popover API; fixed fallback) ── */
  .preview {
    position: fixed;
    inset: auto;
    z-index: 50;
    width: min(288px, calc(100vw - 24px));
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-overlay);
    color: var(--vs-ink);
    animation: vs-pop-in 160ms var(--vs-ease-out) both;
  }
  .preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--vs-line);
    font-family: var(--vs-font-mono);
    font-size: 11px;
  }
  .preview-file {
    min-width: 0;
    overflow: hidden;
    color: var(--vs-ink-2);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .preview-counts {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .preview-body {
    padding: 4px 0;
    font-family: var(--vs-font-mono);
    font-size: 11px;
    line-height: 1.8;
  }
  .preview-line {
    display: flex;
    gap: 8px;
    padding: 0 10px;
    color: var(--vs-ink-2);
    white-space: pre;
  }
  .preview-line.is-add {
    background: var(--vs-green-tint);
    color: var(--vs-green);
  }
  .preview-line.is-del {
    background: var(--vs-red-tint);
    color: var(--vs-red);
  }
  .preview-sign {
    width: 12px;
    flex-shrink: 0;
    user-select: none;
  }
  .preview-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* hide the finished run for the instant before the script rewinds it */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .vs-tool-chips[data-autoplay]:not([data-vs-ready]) {
      visibility: hidden;
    }
  }
  /* without script the rows can't toggle, so show what each tool did */
  @media (scripting: none) {
    .run {
      grid-template-rows: 1fr;
      opacity: 1;
    }
    .detail {
      grid-template-rows: 1fr;
      opacity: 1;
    }
    .run-chevron,
    .step-chevron {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .step,
    .diff-chip,
    .diff-more,
    .preview {
      animation: none;
    }
  }
</style>

<script>
  const STEP_MS = 700;
  const LOOP_HOLD = 4000;
  const GAP = 6;
  const MARGIN = 12;

  /** One pending timeout that can pause and resume where it left off. */
  function createTimer() {
    let id: number | undefined;
    let fn: (() => void) | undefined;
    let left = 0;
    let due = 0;
    let paused = true;
    const arm = () => {
      due = performance.now() + left;
      id = window.setTimeout(() => {
        const run = fn;
        id = fn = undefined;
        run?.();
      }, left);
    };
    return {
      set(ms: number, next: () => void) {
        window.clearTimeout(id);
        id = undefined;
        fn = next;
        left = ms;
        if (!paused) arm();
      },
      pause() {
        if (paused) return;
        paused = true;
        if (id === undefined) return;
        window.clearTimeout(id);
        id = undefined;
        left = Math.max(0, due - performance.now());
      },
      resume() {
        if (!paused) return;
        paused = false;
        if (fn) arm();
      },
      clear() {
        window.clearTimeout(id);
        id = fn = undefined;
      },
    };
  }

  const supportsPopover = typeof HTMLElement !== "undefined" && "showPopover" in HTMLElement.prototype;

  function init(root: HTMLElement) {
    const runToggle = root.querySelector<HTMLButtonElement>("[data-run-toggle]")!;
    const runClip = root.querySelector<HTMLElement>("[data-run-clip]")!;
    const stepEls = [...root.querySelectorAll<HTMLElement>("[data-step]")];
    const diffs = root.querySelector<HTMLElement>("[data-diffs]");
    const chips = [...root.querySelectorAll<HTMLButtonElement>("[data-diff-chip]")];
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const loop = root.hasAttribute("data-loop");
    const timer = createTimer();
    const total = stepEls.length + 1; // rows, then the diff chips
    let step = total;
    let touched = false;

    const emit = (name: string, detail: unknown) =>
      root.dispatchEvent(new CustomEvent(`vs-tool-chips:${name}`, { bubbles: true, detail }));

    /* ── run + rows ── */
    const setRunOpen = (open: boolean) => {
      root.toggleAttribute("data-open", open);
      runToggle.setAttribute("aria-expanded", String(open));
      runClip.inert = !open;
    };
    const setRowOpen = (stepEl: HTMLElement, open: boolean) => {
      stepEl.toggleAttribute("data-row-open", open);
      stepEl.querySelector("[data-step-toggle]")!.setAttribute("aria-expanded", String(open));
      stepEl.querySelector<HTMLElement>("[data-detail-clip]")!.inert = !open;
    };

    runToggle.addEventListener("click", () => {
      const open = !root.hasAttribute("data-open");
      touched = true;
      setRunOpen(open);
      if (!open) closePreview();
      emit("open-change", { open });
    });
    stepEls.forEach((stepEl) => {
      const button = stepEl.querySelector<HTMLButtonElement>("[data-step-toggle]")!;
      setRowOpen(stepEl, false);
      button.addEventListener("click", () => {
        const open = button.getAttribute("aria-expanded") !== "true";
        touched = true;
        setRowOpen(stepEl, open);
        emit("toggle-row", { label: button.dataset.stepToggle, open });
      });
    });
    setRunOpen(root.hasAttribute("data-open"));

    /* ── diff previews ── */
    let current: { chip: HTMLButtonElement; preview: HTMLElement } | null = null;
    let pinned = false; // opened by click/tap: stays until clicked again, Esc, or an outside press
    let closeTimer: number | undefined;

    const place = (chip: HTMLElement, preview: HTMLElement) => {
      const rect = chip.getBoundingClientRect();
      const vw = document.documentElement.clientWidth;
      const vh = window.innerHeight;
      const width = preview.offsetWidth;
      const height = preview.offsetHeight;
      const left = Math.max(MARGIN, Math.min(rect.left, vw - width - MARGIN));
      const fitsBelow = rect.bottom + GAP + height <= vh - MARGIN;
      const fitsAbove = rect.top - GAP - height >= MARGIN;
      const below = fitsBelow || !fitsAbove;
      let top = below ? rect.bottom + GAP : rect.top - GAP - height;
      top = Math.max(MARGIN, Math.min(top, vh - height - MARGIN));
      preview.style.left = `${left}px`;
      preview.style.top = `${top}px`;
      preview.style.transformOrigin = below ? "top left" : "bottom left";
      /* without the top layer, a transformed ancestor can shift `fixed`; correct for it */
      if (!supportsPopover) {
        const actual = preview.getBoundingClientRect();
        preview.style.left = `${left - (actual.left - left)}px`;
        preview.style.top = `${top - (actual.top - top)}px`;
      }
    };

    const openPreview = (chip: HTMLButtonElement) => {
      window.clearTimeout(closeTimer);
      if (current?.chip === chip) return;
      closePreview();
      const preview = root.querySelector<HTMLElement>(`#${CSS.escape(chip.dataset.diffChip!)}`);
      if (!preview) return;
      preview.hidden = false;
      if (supportsPopover) preview.showPopover();
      place(chip, preview);
      chip.setAttribute("aria-expanded", "true");
      current = { chip, preview };
    };

    function closePreview() {
      window.clearTimeout(closeTimer);
      if (!current) return;
      const { chip, preview } = current;
      if (supportsPopover && preview.matches(":popover-open")) preview.hidePopover();
      preview.hidden = true;
      chip.setAttribute("aria-expanded", "false");
      current = null;
      pinned = false;
    }
    /* a short grace period lets the pointer travel from chip to preview */
    const scheduleClose = () => {
      if (pinned) return;
      window.clearTimeout(closeTimer);
      closeTimer = window.setTimeout(closePreview, 120);
    };

    chips.forEach((chip) => {
      chip.addEventListener("pointerenter", (e) => e.pointerType === "mouse" && openPreview(chip));
      chip.addEventListener("pointerleave", (e) => e.pointerType === "mouse" && scheduleClose());
      chip.addEventListener("focus", () => chip.matches(":focus-visible") && openPreview(chip));
      chip.addEventListener("blur", scheduleClose);
      chip.addEventListener("click", () => {
        if (current?.chip === chip && pinned) return closePreview();
        openPreview(chip);
        pinned = true;
      });
    });
    root.querySelectorAll<HTMLElement>("[data-preview]").forEach((preview) => {
      preview.addEventListener("pointerenter", () => window.clearTimeout(closeTimer));
      preview.addEventListener("pointerleave", scheduleClose);
    });
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape" && current) {
        e.preventDefault();
        closePreview();
      }
    };
    const onViewport = () => current && place(current.chip, current.preview);
    const onOutside = (e: PointerEvent) => {
      if (current && !current.chip.contains(e.target as Node) && !current.preview.contains(e.target as Node)) closePreview();
    };
    document.addEventListener("keydown", onKey);
    document.addEventListener("pointerdown", onOutside);
    window.addEventListener("scroll", onViewport, { capture: true, passive: true });
    window.addEventListener("resize", onViewport, { passive: true });

    /* ── sequence ── */
    const render = () => {
      stepEls.forEach((el, i) => (el.hidden = i >= step));
      if (diffs) diffs.hidden = step < total;
    };

    const tick = () => {
      step += 1;
      render();
      if (step < total) timer.set(STEP_MS, tick);
      else if (loop) timer.set(LOOP_HOLD, restart);
    };

    function restart() {
      /* never rewind while someone is reading or using it */
      if (touched || current || root.matches(":hover") || root.contains(document.activeElement)) {
        if (!touched) timer.set(LOOP_HOLD, restart);
        return;
      }
      step = 0;
      stepEls.forEach((el) => setRowOpen(el, false));
      render();
      timer.set(STEP_MS, tick);
    }

    let io: IntersectionObserver | undefined;
    function teardown() {
      timer.clear();
      io?.disconnect();
      closePreview();
      document.removeEventListener("keydown", onKey);
      document.removeEventListener("pointerdown", onOutside);
      window.removeEventListener("scroll", onViewport, { capture: true });
      window.removeEventListener("resize", onViewport);
    }
    document.addEventListener("astro:before-swap", teardown, { once: true });

    if (reduced || !root.hasAttribute("data-autoplay")) {
      render();
      return;
    }

    step = 0;
    render();
    timer.set(STEP_MS, tick);
    io = new IntersectionObserver(([entry]) => {
      if (!root.isConnected) return teardown();
      if (entry?.isIntersecting) timer.resume();
      else timer.pause();
    }, { threshold: 0.2 });
    io.observe(root);
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-tool-chips:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>
```


---

# Task Rows

> Live agent task status as expandable capsules or a list.

- **Slug:** `task-rows`
- **Kind:** component · **Category:** Agent
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/TaskRows.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/task-rows
- **All files in one bundle:** https://viewership.ai/design/components/task-rows.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/task-rows.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/task-rows/`:

   - `TaskRows.astro` (raw: https://viewership.ai/design/raw/task-rows/TaskRows.astro.txt)

npm packages: none.

## Usage

```astro
---
import TaskRows from "../components/viewership/task-rows/TaskRows.astro";
---

<TaskRows />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import TaskRows from "./TaskRows.astro";
import type { TaskRow } from "./TaskRows.astro";

interface Props {
  variant?: string;
}
const { variant = "Capsules" } = Astro.props;

const rows: TaskRow[] = [
  {
    key: "verify",
    label: "Pulled GA4 and Ads data",
    amount: "6 sources",
    status: "done",
    details: [
      { label: "Matched campaigns to sessions", meta: "6/6" },
      { label: "Flagged missing UTM tags", meta: "0" },
    ],
  },
  {
    key: "citations",
    label: "Check AI search citations",
    amount: "5 engines",
    status: "running",
    step: 2,
    details: [
      { label: "Reading prompt tracker export", meta: "3 files" },
      { label: "Scoring share of voice", meta: "68%" },
    ],
  },
  {
    key: "draft",
    label: "Draft client updates",
    amount: "2 messages",
    status: "sequence",
    step: 3,
    details: [
      { label: "Northwind weekly report email", meta: "draft" },
      { label: "Spring launch approval note", meta: "draft" },
    ],
  },
];
---

<TaskRows rows={rows} variant={variant === "List" ? "list" : "capsules"} />
```

## Variants

Demo variants: `Capsules`, `List`.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rows` | `{ key?: string; label: string; amount?: string; status: "done" \| "running" \| "pending" \| "failed" \| "sequence"; step?: number; details?: { label: string; meta: string }[] }[]` |  | Tasks. "sequence" plays pending, failed (retrying), completed. `step` is the number in the spinner. |
| `variant` | `"capsules" \| "list"` | `"capsules"` | Capsules, or one card with a divided list. |
| `labels` | `Partial<{ completed; failed; running; pending; retrying }>` |  | Pill text and screen-reader status. |
| `autoplay` | `boolean` | `true` | Play in view. When false or under reduced motion, the settled state renders. |
| `loop` | `boolean` | `false` | Replay after a hold. Stops once a row is toggled. |

## Source

### `src/components/viewership/task-rows/TaskRows.astro`

```astro
---
/**
 * TaskRows: live agent task status as expandable rows.
 *
 * Each row has a status badge, a label, an amount and a status pill. Click a
 * row to show its steps. Layouts: separate capsules, or one divided card.
 *
 * Statuses: "done", "running", "pending", "failed", and "sequence", which
 * plays pending, failed (retrying), then completed when the rows scroll into
 * view. `loop` replays it. Fires `vs-task-rows:toggle-row` (detail { key,
 * open }) on the root.
 *
 * Ported from Beautiful UI `components/primitives/TaskRows.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * @example
 * <TaskRows rows={[{ label: "Pull GA4 data", amount: "3 properties", status: "running", step: 2 }]} />
 */
import type { HTMLAttributes } from "astro/types";

export interface TaskDetail {
  label: string;
  meta: string;
}
export interface TaskRow {
  /** Stable id, reported in events. Defaults to the row index. */
  key?: string;
  label: string;
  /** Muted figure beside the label, e.g. "12 suppliers". */
  amount?: string;
  status: "done" | "running" | "pending" | "failed" | "sequence";
  /** Number shown inside the spinner ring. Defaults to the row position. */
  step?: number;
  details?: TaskDetail[];
}
export interface TaskRowsLabels {
  completed: string;
  failed: string;
  /** Screen-reader status for running and pending rows (they have no pill). */
  running: string;
  pending: string;
  retrying: string;
}

type Props = HTMLAttributes<"div"> & {
  rows: TaskRow[];
  variant?: "capsules" | "list";
  labels?: Partial<TaskRowsLabels>;
  /** Play the status run when scrolled into view. */
  autoplay?: boolean;
  /** Replay after a hold, never while someone is using it. */
  loop?: boolean;
};

const { rows = [], variant = "capsules", labels, autoplay = true, loop = false, class: className, ...rest } = Astro.props;

const l: TaskRowsLabels = {
  completed: "Completed",
  failed: "Failed",
  running: "In progress",
  pending: "Queued",
  retrying: "retrying",
  ...labels,
};

const uid = `vs-task-${Math.random().toString(36).slice(2, 8)}`;
const R = 11; // (24 - stroke 2) / 2
const C = 2 * Math.PI * R;
---

<div
  class:list={["vs-task-rows", `vs-task-rows--${variant}`, className]}
  data-autoplay={autoplay ? "" : undefined}
  data-loop={loop ? "" : undefined}
  data-labels={JSON.stringify({ completed: l.completed, failed: l.failed, retrying: l.retrying })}
  {...rest}
>
  {rows.map((row, i) => {
    const phase = row.status === "sequence" ? "done" : row.status;
    const step = row.step ?? i + 1;
    const details = row.details ?? [];
    return (
      <div
        class="task"
        style={`--vs-tr-i: ${i}`}
        data-task={row.key ?? String(i)}
        data-phase={phase}
        data-sequence={row.status === "sequence" ? "" : undefined}
        data-running={row.status === "running" ? "" : undefined}
      >
        <button
          type="button"
          class="task-row"
          aria-expanded="false"
          aria-controls={details.length ? `${uid}-${i}` : undefined}
          disabled={!details.length}
          data-task-toggle
        >
          <span class="badge-slot" aria-hidden="true">
            {(row.status === "running" || row.status === "pending" || row.status === "sequence") && (
              <span class:list={["ring", row.status === "running" && "is-active"]}>
                <svg width="24" height="24" viewBox="0 0 24 24">
                  <circle class="ring-track" cx="12" cy="12" r={R} fill="none" stroke-width="2"></circle>
                  {row.status === "running" && (
                    <circle
                      class="ring-arc"
                      cx="12"
                      cy="12"
                      r={R}
                      fill="none"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-dasharray={`${C * 0.28} ${C * 0.72}`}
                    ></circle>
                  )}
                </svg>
                <span class="ring-step">{step}</span>
              </span>
            )}
            {(row.status === "failed" || row.status === "sequence") && (
              <span class="badge badge--red">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round">
                  <path d="M18 6L6 18M6 6l12 12"></path>
                </svg>
              </span>
            )}
            {(row.status === "done" || row.status === "sequence") && (
              <span class="badge badge--green">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M20 6L9 17l-5-5"></path>
                </svg>
              </span>
            )}
          </span>
          <span class="task-label">{row.label}</span>
          {row.status === "running" && <span class="visually-hidden">, {l.running}</span>}
          {row.status === "pending" && <span class="visually-hidden">, {l.pending}</span>}
          {row.status === "sequence" && <span class="visually-hidden sr-pending">, {l.pending}</span>}
          {row.amount && <span class="task-amount">{row.amount}</span>}
          {(row.status === "failed" || row.status === "sequence") && (
            <span class="pill pill--red">
              {l.failed}
              {row.status === "sequence" && <span class="visually-hidden">, {l.retrying}</span>}
              <svg class="retry" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"></path>
              </svg>
            </span>
          )}
          {(row.status === "done" || row.status === "sequence") && <span class="pill pill--green">{l.completed}</span>}
          <span class="chevron" aria-hidden="true">
            {details.length > 0 && (
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M6 9l6 6 6-6"></path>
              </svg>
            )}
          </span>
        </button>

        {details.length > 0 && (
          <div class="detail" id={`${uid}-${i}`}>
            <div class="detail-clip" data-detail-clip>
              <div class="detail-grid">
                <span class="detail-line" aria-hidden="true"></span>
                <div class="detail-items">
                  {details.map((d, j) => (
                    <div class="detail-item" style={`--vs-tr-j: ${j}`}>
                      <span class="detail-label">{d.label}</span>
                      <span class="detail-meta">{d.meta}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  })}
  <span class="visually-hidden" role="status" data-live></span>
</div>

<style>
  .vs-task-rows {
    display: flex;
    width: 100%;
    max-width: 440px;
    flex-direction: column;
  }
  .vs-task-rows--capsules {
    min-height: 196px;
    gap: 8px;
  }
  .vs-task-rows--list {
    align-self: flex-start;
    overflow: hidden;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }

  /* ── row shell ── */
  .task {
    align-self: stretch;
    overflow: hidden;
    transition:
      border-radius 300ms ease-out,
      background-color 300ms ease-out;
  }
  .task:hover {
    background: var(--vs-inset);
  }
  .vs-task-rows--capsules .task {
    border-radius: 22px;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .vs-task-rows--capsules .task:hover {
    background: var(--vs-inset);
  }
  .vs-task-rows--capsules .task[data-open] {
    border-radius: 14px;
  }
  .vs-task-rows--list .task {
    border-bottom: 1px solid var(--vs-line);
  }
  .vs-task-rows--list .task:last-of-type {
    border-bottom: 0;
  }
  /* rows wait offscreen, then enter staggered when the run starts */
  [data-idle] .task {
    opacity: 0;
  }
  [data-run] .task {
    animation: vs-fade-up 450ms var(--vs-ease-out) calc(var(--vs-tr-i) * 80ms) both;
  }

  .task-row {
    display: flex;
    width: 100%;
    height: 44px;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    border-radius: inherit;
    text-align: left;
    cursor: pointer;
  }
  .task-row:disabled {
    cursor: default;
  }
  .task-row:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--vs-accent) 70%, transparent);
  }

  .badge-slot {
    display: flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  .task-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: var(--vs-ink);
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .task-amount {
    color: var(--vs-ink-2);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* spinner ring */
  .ring {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  .ring svg {
    position: absolute;
    inset: 0;
  }
  .ring.is-active svg {
    animation: vs-spin 1.1s linear infinite;
  }
  .ring-track {
    stroke: var(--vs-line);
  }
  .ring-arc {
    stroke: var(--vs-ink-3);
  }
  .ring-step {
    position: relative;
    color: var(--vs-ink);
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .badge {
    display: flex;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--vs-surface);
    animation: vs-pop-in 300ms var(--vs-ease-out) both;
  }
  .badge--red {
    background: var(--vs-red);
  }
  .badge--green {
    background: var(--vs-green);
  }

  .pill {
    display: inline-flex;
    height: 22px;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border-radius: var(--vs-radius-pill);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
  }
  .pill--green {
    background: var(--vs-green-tint);
    color: var(--vs-green);
  }
  .pill--red {
    background: var(--vs-red-tint);
    color: var(--vs-red);
  }
  [data-sequence] .pill {
    animation: vs-fade-in 200ms ease-out both;
  }
  .retry {
    display: none;
  }
  [data-sequence] .retry {
    display: block;
    animation: vs-spin 1.2s linear infinite;
  }

  /* each phase shows only its own badge, pill and screen-reader status */
  .task:not([data-phase="pending"]):not([data-phase="running"]) .ring,
  .task:not([data-phase="pending"]) .sr-pending,
  .task:not([data-phase="failed"]) .badge--red,
  .task:not([data-phase="failed"]) .pill--red,
  .task:not([data-phase="done"]) .badge--green,
  .task:not([data-phase="done"]) .pill--green {
    display: none;
  }

  .chevron {
    display: flex;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-left: -8px;
    border-radius: 50%;
    color: var(--vs-ink-3);
  }
  .chevron svg {
    transition: transform 300ms ease-out;
  }
  [data-open] .chevron svg {
    transform: rotate(180deg);
  }

  /* ── dropdown detail ── */
  .detail {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 300ms var(--vs-ease-out),
      opacity 300ms var(--vs-ease-out);
  }
  [data-open] .detail {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .detail-clip {
    min-height: 0;
    overflow: hidden;
  }
  .detail-grid {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    margin-bottom: 10px;
    padding: 0 10px;
  }
  .detail-line {
    width: 1px;
    height: 100%;
    margin: 0 auto;
    background: var(--vs-line);
  }
  .detail-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  [data-open] .detail-item {
    animation: vs-fade-up 300ms var(--vs-ease-out) calc(120ms + var(--vs-tr-j) * 100ms) both;
  }
  .detail-label {
    color: var(--vs-ink-2);
    font-size: 12px;
  }
  .detail-meta {
    color: var(--vs-ink-3);
    font-family: var(--vs-font-sans);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* offscreen: hold the spinners */
  [data-paused] .ring svg,
  [data-paused] .retry {
    animation-play-state: paused;
  }

  /* hide the settled rows for the instant before the script rewinds them */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .vs-task-rows[data-autoplay]:not([data-vs-ready]) {
      visibility: hidden;
    }
  }
  /* without script the rows can't toggle, so show their steps */
  @media (scripting: none) {
    .detail {
      grid-template-rows: 1fr;
      opacity: 1;
    }
    .chevron svg {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-run] .task,
    .badge,
    [data-sequence] .pill,
    [data-open] .detail-item {
      animation: none;
    }
    .ring.is-active svg,
    [data-sequence] .retry {
      animation: none;
    }
  }
</style>

<script>
  /* rows enter → ring sweeps → running row opens → it closes and sequence rows fail → they resolve */
  const TICKS = [600, 900, 2400, 1400, 2400];
  const FINAL = TICKS.length;
  const LOOP_HOLD = 4000;

  /** One pending timeout that can pause and resume where it left off. */
  function createTimer() {
    let id: number | undefined;
    let fn: (() => void) | undefined;
    let left = 0;
    let due = 0;
    let paused = true;
    const arm = () => {
      due = performance.now() + left;
      id = window.setTimeout(() => {
        const run = fn;
        id = fn = undefined;
        run?.();
      }, left);
    };
    return {
      set(ms: number, next: () => void) {
        window.clearTimeout(id);
        id = undefined;
        fn = next;
        left = ms;
        if (!paused) arm();
      },
      pause() {
        if (paused) return;
        paused = true;
        if (id === undefined) return;
        window.clearTimeout(id);
        id = undefined;
        left = Math.max(0, due - performance.now());
      },
      resume() {
        if (!paused) return;
        paused = false;
        if (fn) arm();
      },
      clear() {
        window.clearTimeout(id);
        id = fn = undefined;
      },
    };
  }

  function init(root: HTMLElement) {
    const tasks = [...root.querySelectorAll<HTMLElement>("[data-task]")];
    const sequence = tasks.filter((t) => t.hasAttribute("data-sequence"));
    const autoOpen = tasks.find((t) => t.hasAttribute("data-running") && t.querySelector("[data-detail-clip]"));
    const live = root.querySelector<HTMLElement>("[data-live]")!;
    const labels = JSON.parse(root.dataset.labels || "{}") as { completed?: string; failed?: string; retrying?: string };
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const loop = root.hasAttribute("data-loop");
    const timer = createTimer();
    const manual = new Map<HTMLElement, boolean>();
    let tick = FINAL;
    let firstRun = true;
    let touched = false;

    const render = () => {
      const phase = tick < 3 ? "pending" : tick === 3 ? "failed" : "done";
      sequence.forEach((task) => {
        if (task.dataset.phase === phase) return;
        task.dataset.phase = phase;
        if (firstRun && phase !== "pending") {
          const name = task.querySelector(".task-label")?.textContent ?? "";
          live.textContent =
            phase === "failed" ? `${name}: ${labels.failed}, ${labels.retrying}` : `${name}: ${labels.completed}`;
        }
      });
      tasks.forEach((task) => {
        const open = manual.get(task) ?? (task === autoOpen && tick === 2);
        task.toggleAttribute("data-open", open);
        const button = task.querySelector("[data-task-toggle]")!;
        button.setAttribute("aria-expanded", String(open));
        const clip = task.querySelector<HTMLElement>("[data-detail-clip]");
        if (clip) clip.inert = !open;
      });
    };

    tasks.forEach((task) => {
      const button = task.querySelector<HTMLButtonElement>("[data-task-toggle]")!;
      button.addEventListener("click", () => {
        const open = !task.hasAttribute("data-open");
        touched = true;
        manual.set(task, open);
        render();
        root.dispatchEvent(new CustomEvent("vs-task-rows:toggle-row", { bubbles: true, detail: { key: task.dataset.task, open } }));
      });
    });

    const step = () => {
      tick += 1;
      render();
      if (tick < FINAL) timer.set(TICKS[tick]!, step);
      else {
        firstRun = false;
        if (loop) timer.set(LOOP_HOLD, restart);
      }
    };

    const start = () => {
      tick = 0;
      manual.clear();
      root.removeAttribute("data-run");
      void root.offsetWidth; // restart the entrance animation
      root.setAttribute("data-run", "");
      root.removeAttribute("data-idle");
      render();
      timer.set(TICKS[0]!, step);
    };

    function restart() {
      if (touched) return;
      if (root.matches(":hover") || root.contains(document.activeElement)) return timer.set(LOOP_HOLD, restart);
      start();
    }

    if (reduced || !root.hasAttribute("data-autoplay")) {
      render();
      return;
    }

    /* hold the rows back until the run is seen, then play it */
    tick = 0;
    root.setAttribute("data-idle", "");
    render();
    let started = false;
    const io = new IntersectionObserver(([entry]) => {
      if (!root.isConnected) return teardown();
      if (entry?.isIntersecting) {
        root.removeAttribute("data-paused");
        if (!started) {
          started = true;
          timer.resume();
          start();
        } else timer.resume();
      } else {
        root.setAttribute("data-paused", "");
        timer.pause();
      }
    }, { threshold: 0.2 });
    io.observe(root);

    function teardown() {
      timer.clear();
      io.disconnect();
    }
    document.addEventListener("astro:before-swap", teardown, { once: true });
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-task-rows:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>
```


---

# Chat

> Tabbed chat panel with reasoning replies and a growing composer.

- **Slug:** `chat-composer`
- **Kind:** component · **Category:** Agent
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/ChatComposer.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/chat-composer
- **All files in one bundle:** https://viewership.ai/design/components/chat-composer.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/chat-composer.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/chat-composer/`:

   - `ChatComposer.astro` (raw: https://viewership.ai/design/raw/chat-composer/ChatComposer.astro.txt)

npm packages: none.

## Usage

```astro
---
import ChatComposer from "../components/viewership/chat-composer/ChatComposer.astro";
---

<ChatComposer />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import ChatComposer, { type ChatThread } from "./ChatComposer.astro";

const threads: ChatThread[] = [
  {
    label: "Reports",
    prompt: "Compare this week's sessions to last week",
    replies: [
      { label: "GA4 Pull", sub: "Analytics Data", time: "4s", body: "Pulled sessions by channel for the last three weeks." },
      { label: "Comparison", sub: "Trend Detection", time: "2s", body: "Sessions are up 12%, led by organic search and Reddit referrals." },
    ],
  },
  {
    label: "Citations",
    prompt: "Which engine cites Northwind most often?",
    replies: [
      { label: "Prompt Runs", sub: "Citation Data", time: "3s", body: "Ran 40 tracked prompts across all four engines." },
      { label: "Share", sub: "Citation Trends", time: "2s", body: "Perplexity cites Northwind in 18 of 40 prompts, ahead of Gemini." },
    ],
  },
];
---

<div class="stage">
  <ChatComposer threads={threads} placeholder="Ask about a report or tag a campaign with @" demo />
</div>

<style>
  .stage {
    display: flex;
    justify-content: center;
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `threads` | `{ label: string; prompt?: string; replies?: { label; sub; time; body }[] }[]` | `[{ label: "Chat" }]` | One tab per thread, with an opening prompt and replies. |
| `active` | `number` | `0` | Initially selected tab. |
| `placeholder` | `string` | `"Ask anything"` | Composer placeholder. |
| `demo` | `boolean` | `false` | Add the user's message and replay scripted replies. Off by default; the component only emits `vs-chat-submit`. |
| `labels` | `{ tabs?, input?, send?, newChat?, history?, more?, for? }` |  | Accessible names, plus the word between a reply's sub-label and time. |

## Source

### `src/components/viewership/chat-composer/ChatComposer.astro`

```astro
---
/**
 * ChatComposer: a tabbed chat panel with reasoning replies above an
 * auto-growing composer. Tabs follow the WAI-ARIA tabs pattern; each tab is
 * its own thread.
 *
 * Ported from Beautiful UI `components/primitives/ChatComposer.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * Nothing is sent. Submit emits `vs-chat-submit` { text, tab, index } and
 * clears the composer. To render messages, dispatch `vs-chat-append` on the
 * root: { role: "user", text } or { role: "reply", label, sub, time, body }
 * (optional `index` picks a tab). With `demo`, submit also appends locally
 * and replays the active thread's scripted replies. The header buttons emit
 * `vs-chat-action` { action: "new" | "history" | "more" }.
 *
 * @example
 * <ChatComposer threads={[{ label: "Reports", prompt: "...", replies: [...] }]} />
 */
import type { HTMLAttributes } from "astro/types";

/** One agent reasoning row: "<label> <sub> for <time>" over a body line. */
export type ChatReply = { label: string; sub: string; time: string; body: string };
/** One tab: an optional opening prompt and the replies that follow it. */
export type ChatThread = { label: string; prompt?: string; replies?: ChatReply[] };

type Props = HTMLAttributes<"div"> & {
  threads?: ChatThread[];
  /** Index of the initially selected tab. */
  active?: number;
  placeholder?: string;
  /** Demo mode: append the user's message locally and replay scripted replies. */
  demo?: boolean;
  labels?: {
    tabs?: string;
    input?: string;
    send?: string;
    newChat?: string;
    history?: string;
    more?: string;
    /** Word between a reply's sub-label and its duration. */
    for?: string;
  };
};

const {
  threads = [{ label: "Chat" }],
  active = 0,
  placeholder = "Ask anything",
  demo = false,
  labels,
  class: className,
  ...rest
} = Astro.props;

const text = {
  tabs: "Conversations",
  input: "Chat prompt",
  send: "Send",
  newChat: "New chat",
  history: "History",
  more: "More options",
  for: "for",
  ...labels,
};
const uid = `vs-chat-${Math.random().toString(36).slice(2, 8)}`;
const current = Math.min(Math.max(active, 0), threads.length - 1);
---

<div class:list={["vs-chat-composer", className]} data-demo={demo ? "" : undefined} data-for={text.for} {...rest}>
  <div class="head">
    <div class="tabs" role="tablist" aria-label={text.tabs}>
      {threads.map((t, i) => (
        <button
          type="button"
          role="tab"
          class="tab"
          id={`${uid}-tab-${i}`}
          aria-controls={`${uid}-panel-${i}`}
          aria-selected={i === current ? "true" : "false"}
          tabindex={i === current ? 0 : -1}
        >
          {t.label}
        </button>
      ))}
    </div>
    <div class="actions">
      <button type="button" class="icon-btn" data-action="new" aria-label={text.newChat}>
        <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"></path></svg>
      </button>
      <button type="button" class="icon-btn" data-action="history" aria-label={text.history}>
        <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
      </button>
      <button type="button" class="icon-btn" data-action="more" aria-label={text.more}>
        <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.8"></circle><circle cx="12" cy="12" r="1.8"></circle><circle cx="19" cy="12" r="1.8"></circle></svg>
      </button>
    </div>
  </div>

  {threads.map((t, i) => (
    <div
      class="panel"
      role="tabpanel"
      id={`${uid}-panel-${i}`}
      aria-labelledby={`${uid}-tab-${i}`}
      tabindex="0"
      hidden={i !== current}
    >
      <div class="log" role="log" aria-live="polite" data-replies={JSON.stringify(t.replies ?? [])}>
        {t.prompt && (
          <div class="user">
            <div class="bubble">{t.prompt}</div>
          </div>
        )}
        {(t.replies ?? []).map((r) => (
          <div class="reply">
            <div class="reply-inner">
              <div class="reply-head">
                <span class="reply-label">{r.label}</span>
                <span class="reply-sub">{r.sub}</span>
                <span class="reply-time">{text.for} {r.time}</span>
              </div>
              <p class="reply-body">{r.body}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  ))}

  <div class="composer-wrap">
    <div class="composer">
      <textarea rows="1" placeholder={placeholder} aria-label={text.input}></textarea>
      <div class="send-row">
        <button type="button" class="send" aria-label={text.send} disabled>
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <template data-tpl="user">
    <div class="user is-new"><div class="bubble"></div></div>
  </template>
  <template data-tpl="reply">
    <div class="reply is-new">
      <div class="reply-inner">
        <div class="reply-head">
          <span class="reply-label"></span>
          <span class="reply-sub"></span>
          <span class="reply-time"></span>
        </div>
        <p class="reply-body"></p>
      </div>
    </div>
  </template>
</div>

<script>
  type Reply = { label: string; sub: string; time: string; body: string };
  type AppendDetail = ({ role: "user"; text: string } | ({ role: "reply"; resolving?: boolean } & Reply)) & { index?: number };

  function init(root: HTMLElement) {
    const tabs = [...root.querySelectorAll<HTMLButtonElement>('[role="tab"]')];
    const panels = [...root.querySelectorAll<HTMLElement>('[role="tabpanel"]')];
    const composer = root.querySelector<HTMLElement>(".composer")!;
    const input = root.querySelector<HTMLTextAreaElement>("textarea")!;
    const send = root.querySelector<HTMLButtonElement>(".send")!;
    const userTpl = root.querySelector<HTMLTemplateElement>('template[data-tpl="user"]')!;
    const replyTpl = root.querySelector<HTMLTemplateElement>('template[data-tpl="reply"]')!;
    const forWord = root.dataset.for ?? "for";
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
    let timers: ReturnType<typeof setTimeout>[] = [];
    let index = Math.max(0, tabs.findIndex((t) => t.getAttribute("aria-selected") === "true"));

    /* ── tabs ── */
    const select = (next: number, focus = false) => {
      index = (next + tabs.length) % tabs.length;
      tabs.forEach((tab, i) => {
        const on = i === index;
        tab.setAttribute("aria-selected", String(on));
        tab.tabIndex = on ? 0 : -1;
        panels[i].hidden = !on;
      });
      if (focus) tabs[index].focus();
    };
    tabs.forEach((tab, i) => {
      tab.addEventListener("click", () => select(i));
      tab.addEventListener("keydown", (event) => {
        const moves: Record<string, number> = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 };
        if (!(event.key in moves)) return;
        event.preventDefault();
        select(moves[event.key], true);
      });
    });

    root.querySelectorAll<HTMLButtonElement>("[data-action]").forEach((button) =>
      button.addEventListener("click", () =>
        root.dispatchEvent(new CustomEvent("vs-chat-action", { bubbles: true, detail: { action: button.dataset.action } })),
      ),
    );

    /* ── messages ── */
    const scrollDown = (panel: HTMLElement) =>
      panel.scrollTo({ top: panel.scrollHeight, behavior: reduce.matches ? "auto" : "smooth" });

    const append = (detail: AppendDetail) => {
      const panel = panels[detail.index ?? index];
      const log = panel?.querySelector<HTMLElement>(".log");
      if (!panel || !log) return null;
      let node: HTMLElement;
      if (detail.role === "user") {
        node = (userTpl.content.firstElementChild as HTMLElement).cloneNode(true) as HTMLElement;
        node.querySelector(".bubble")!.textContent = detail.text;
      } else {
        node = (replyTpl.content.firstElementChild as HTMLElement).cloneNode(true) as HTMLElement;
        node.querySelector(".reply-label")!.textContent = detail.label;
        node.querySelector(".reply-sub")!.textContent = detail.sub;
        node.querySelector(".reply-time")!.textContent = `${forWord} ${detail.time}`;
        node.querySelector(".reply-body")!.textContent = detail.body;
        if (detail.resolving) node.classList.add("is-resolving");
      }
      log.append(node);
      scrollDown(panel);
      return node;
    };
    root.addEventListener("vs-chat-append", (event) => {
      const detail = (event as CustomEvent<AppendDetail>).detail;
      if (detail) append(detail);
    });

    /* demo: replay the thread's scripted replies */
    const replay = (target: number) => {
      const log = panels[target].querySelector<HTMLElement>(".log")!;
      const replies = JSON.parse(log.dataset.replies || "[]") as Reply[];
      if (reduce.matches) {
        replies.forEach((r) => append({ role: "reply", ...r, index: target }));
        return;
      }
      let at = 500;
      replies.forEach((r, i) => {
        const last = i === replies.length - 1 && replies.length > 1;
        timers.push(
          setTimeout(() => {
            const node = append({ role: "reply", ...r, index: target, resolving: last });
            if (node && last) timers.push(setTimeout(() => node.classList.remove("is-resolving"), 1200));
          }, at),
        );
        at += 1400;
      });
    };

    /* ── composer ── */
    const grow = () => {
      if (CSS.supports("field-sizing", "content")) return;
      input.style.height = "auto";
      input.style.height = `${input.scrollHeight}px`;
    };
    const sync = () => {
      send.disabled = input.value.trim().length === 0;
      grow();
    };
    const submit = () => {
      const value = input.value.trim();
      if (!value) return;
      root.dispatchEvent(
        new CustomEvent("vs-chat-submit", { bubbles: true, detail: { text: value, tab: tabs[index]?.textContent?.trim() ?? "", index } }),
      );
      input.value = "";
      sync();
      if ("demo" in root.dataset) {
        timers.forEach(clearTimeout);
        timers = [];
        append({ role: "user", text: value });
        replay(index);
      }
    };

    input.addEventListener("input", sync);
    input.addEventListener("keydown", (event) => {
      if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
        event.preventDefault();
        submit();
      }
    });
    send.addEventListener("click", submit);
    composer.addEventListener("click", (event) => {
      if (!(event.target as Element).closest("button")) input.focus();
    });
    document.addEventListener("astro:before-swap", () => timers.forEach(clearTimeout), { once: true });
    sync();
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-chat-composer:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-chat-composer {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    width: 100%;
    max-width: 380px;
    height: 288px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }

  /* header: tabs + actions */
  .head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 6px;
    border-bottom: 1px solid var(--vs-line);
  }
  .tabs {
    display: flex;
    align-items: center;
  }
  .tab {
    padding: 3px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--vs-ink);
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.5;
    cursor: pointer;
    transition:
      background-color 100ms,
      opacity 100ms;
  }
  .tab:hover {
    opacity: 0.75;
  }
  .tab[aria-selected="true"] {
    background: var(--vs-field);
    opacity: 1;
  }
  .actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--vs-ink-3);
    cursor: pointer;
    transition:
      background-color 100ms,
      color 100ms;
  }
  .icon-btn:hover {
    background: var(--vs-hover);
    color: var(--vs-ink-2);
  }
  :is(.tab, .icon-btn, .send):focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }

  /* conversation: fixed region so the card never changes shape */
  .panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 10px 12px 4px;
    overflow-y: auto;
  }
  .panel[hidden] {
    display: none;
  }
  .panel:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--vs-accent) 70%, transparent);
  }
  .log {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* user bubble: right aligned, soft block */
  .user {
    display: flex;
    justify-content: flex-end;
    padding-left: 56px;
  }
  .bubble {
    padding: 6px 12px;
    border-radius: 12px;
    background: var(--vs-field);
    font-size: 13px;
    line-height: 1.4;
    color: var(--vs-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .user.is-new {
    animation: vs-chat-composer-rise 300ms var(--vs-ease-out) both;
  }

  /* reasoning reply: the outer element enters, the inner one resolves
     (separate elements so the entrance fill does not mask the dim) */
  .reply-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    transform-origin: top left;
    transition:
      opacity 400ms var(--vs-ease-out),
      filter 400ms var(--vs-ease-out),
      transform 400ms var(--vs-ease-out);
  }
  .reply.is-new {
    animation: vs-fade-up 400ms var(--vs-ease-out) both;
  }
  .reply.is-resolving .reply-inner {
    opacity: 0.55;
    filter: blur(0.5px);
    transform: scale(0.985);
  }
  .reply-head {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.3;
  }
  .reply-label {
    font-weight: 500;
    color: var(--vs-ink);
  }
  .reply-sub {
    color: var(--vs-ink-2);
  }
  .reply-time {
    color: var(--vs-ink);
  }
  .reply-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--vs-ink);
  }

  /* composer */
  .composer-wrap {
    flex-shrink: 0;
    margin-top: auto;
    padding: 6px;
  }
  .composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--vs-line);
    border-radius: var(--vs-radius-control);
    background: var(--vs-field);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035);
    cursor: text;
    transition:
      border-color 150ms,
      box-shadow 150ms;
  }
  .composer:focus-within {
    border-color: var(--vs-line-strong);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.025);
  }
  .composer:has(textarea:focus-visible) {
    box-shadow: var(--vs-focus-ring);
  }
  textarea {
    display: block;
    width: 100%;
    min-height: 18px;
    max-height: 92px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--vs-ink);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    resize: none;
    outline: none;
    overflow-y: auto;
    field-sizing: content;
  }
  textarea::placeholder {
    color: var(--vs-ink-3);
  }
  .send-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: var(--vs-ink);
    color: var(--vs-surface);
    cursor: pointer;
    transition:
      background-color 200ms,
      color 200ms,
      transform 200ms;
  }
  .send:enabled:active {
    transform: scale(0.96);
  }
  .send:disabled {
    background: var(--vs-line-strong);
    color: var(--vs-ink-2);
    cursor: default;
  }

  @keyframes vs-chat-composer-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .user.is-new,
    .reply.is-new {
      animation: none;
    }
    .reply.is-resolving .reply-inner {
      opacity: 1;
      filter: none;
      transform: none;
    }
    .send:enabled:active {
      transform: none;
    }
  }
</style>
```


---

# Prompt Bar

> Message composer with @ sources, / commands and a model picker.

- **Slug:** `prompt-bar`
- **Kind:** component · **Category:** Agent
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/PromptBar.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/prompt-bar
- **All files in one bundle:** https://viewership.ai/design/components/prompt-bar.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/prompt-bar.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/prompt-bar/`:

   - `PromptBar.astro` (raw: https://viewership.ai/design/raw/prompt-bar/PromptBar.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `glide-menu`: `GlideMenu.astro`, `glide-menu.ts` (docs: https://viewership.ai/design/components/glide-menu.md)

npm packages: none.

## Usage

```astro
---
import PromptBar from "../components/viewership/prompt-bar/PromptBar.astro";
---

<PromptBar />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import PromptBar, { type PromptCommand, type PromptModel, type PromptSource } from "./PromptBar.astro";

interface Props {
  variant?: string;
}
const { variant = "Rounded" } = Astro.props;

const sources: PromptSource[] = [
  { key: "attach", name: "Add photos & files", desc: "Upload from your computer", icon: "clip", attach: true },
  { key: "ga4", name: "GA4 data", desc: "Sessions, conversions, trends", icon: "chart" },
  { key: "campaigns", name: "Ad campaigns", desc: "18 campaigns, spend, ROAS", icon: "layers" },
  { key: "web", name: "Web search", desc: "Real-time news and info", icon: "globe" },
  { key: "brand", name: "Brand voice", desc: "Tone rules and examples", icon: "notes" },
  { key: "team", name: "Team chat", desc: "Read and post in channels", icon: "chat" },
  { key: "inbox", name: "Client inbox", desc: "Read and answer client mail", icon: "mail", connect: true },
];
const commands: PromptCommand[] = [
  { key: "compare", name: "/compare", desc: "This week vs. last week" },
  { key: "report", name: "/report", desc: "Build the weekly report" },
  { key: "citations", name: "/citations", desc: "Check AI search citations" },
  { key: "draft-email", name: "/draft-email", desc: "Write a client update" },
  { key: "summarize", name: "/summarize", desc: "Digest the thread so far" },
];
const models: PromptModel[] = [
  { key: "atlas-5", name: "Atlas 5", tag: "Flagship", flagship: true },
  { key: "atlas-mini", name: "Atlas Mini", tag: "Basic" },
  { key: "atlas-legacy", name: "Atlas 0.4", tag: "Legacy" },
];
---

<div class="stage">
  <PromptBar
    shape={variant === "Pill" ? "pill" : "rounded"}
    sources={sources}
    commands={commands}
    models={models}
    model="atlas-mini"
    placeholder="Ask about this week's campaigns…"
    autoplay
  />
</div>

<style>
  .stage {
    display: flex;
    width: 100%;
    max-width: 420px;
    min-height: 384px;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 32px;
  }
</style>
```

## Variants

Demo variants: `Rounded`, `Pill`.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shape` | `"rounded" \| "pill"` | `"rounded"` | Card radius, or pill (24px once text wraps). |
| `sources` | `{ key, name, desc, icon?, attach?, connect?, connected? }[]` | `[]` | The @ menu. `attach` opens the file picker; `connect` needs a connection first. Icons: clip, chart, layers, globe, flame, notes, chat, mail, or inner SVG. |
| `commands` | `{ key, name, desc }[]` | `[]` | The / menu. Names include the slash. |
| `models` | `{ key, name, tag?, flagship? }[]` |  | Model options. `flagship` plays a sweep. |
| `model` | `string` |  | Initial model key (default: second). |
| `placeholder` | `string` | `"Write a message…"` | Input placeholder. |
| `tall` | `boolean` | `false` | Multi-line hero size. |
| `autoplay` | `boolean` | `false` | Menu walkthrough in view. Stops on input and under reduced motion. |
| `loop` | `boolean` | `true` | Repeat the walkthrough. |
| `dictationLang` | `string` |  | Dictation language. Defaults to page language. |
| `Events` | `CustomEvent` |  | vs-prompt-submit { text, model, sources, command, attachments, files }, vs-prompt-model { key, name }. |

## Source

### `src/components/viewership/prompt-bar/PromptBar.astro`

```astro
---
/**
 * PromptBar: message composer with @ sources, / commands, model picker,
 * dictation and send.
 *
 * Ported from Beautiful UI `components/primitives/PromptBar.tsx`
 * (MIT, © 2026 Shane Levine). Some icons are Lucide (ISC).
 *
 * - The textarea is an ARIA combobox; the menus are listboxes driven with
 *   aria-activedescendant, so focus stays in the field.
 * - Dictation uses the Web Speech API, only after a click.
 * - `autoplay` runs a walkthrough in view, never under reduced motion.
 *   Any pointer or key input hands control to the user.
 *
 * Events (bubbling, on the root):
 *   vs-prompt-submit  detail: { text, model: { key, name }, sources: string[], command: string | null, attachments: string[], files: File[] }
 *   vs-prompt-model   detail: { key, name }
 *
 * @example
 * <PromptBar shape="pill" placeholder="Ask about this week's campaigns…" />
 */
import type { HTMLAttributes } from "astro/types";
import GlideMenu from "../glide-menu/GlideMenu.astro";

export interface PromptSource {
  key: string;
  name: string;
  desc: string;
  /** Built-in icon (clip, chart, layers, globe, flame, notes, chat, mail) or inner SVG markup. */
  icon?: string;
  /** Picking it opens the file picker instead of inserting a mention. */
  attach?: boolean;
  /** Needs connecting first; shows Connect / Connected. */
  connect?: boolean;
  connected?: boolean;
}
export interface PromptCommand {
  key: string;
  /** Including the slash, e.g. "/weekly-report". */
  name: string;
  desc: string;
}
export interface PromptModel {
  key: string;
  name: string;
  tag?: string;
  /** Selecting it plays the rainbow sweep. */
  flagship?: boolean;
}

type Props = HTMLAttributes<"div"> & {
  /** Corner style: card radius or full pill. */
  shape?: "rounded" | "pill";
  sources?: PromptSource[];
  commands?: PromptCommand[];
  models?: PromptModel[];
  /** Initially selected model key. Defaults to the second model (or the first). */
  model?: string;
  placeholder?: string;
  /** Hero sizing: a multi-line input with the controls on their own row. */
  tall?: boolean;
  /** Self-playing walkthrough of the menus (starts in view). */
  autoplay?: boolean;
  /** Repeat the walkthrough. */
  loop?: boolean;
  /** BCP 47 language for dictation. Defaults to the page language. */
  dictationLang?: string;
};

const {
  shape = "rounded",
  sources = [],
  commands = [],
  models = [
    { key: "flagship", name: "Flagship", tag: "Best", flagship: true },
    { key: "fast", name: "Fast", tag: "Basic" },
  ],
  model,
  placeholder = "Write a message…",
  tall = false,
  autoplay = false,
  loop = true,
  dictationLang,
  class: className,
  ...rest
} = Astro.props;

const uid = `vs-pb-${Math.random().toString(36).slice(2, 8)}`;
const current = models.find((m) => m.key === model) ?? models[1] ?? models[0];

const ICONS: Record<string, string> = {
  // upstream-drawn (MIT)
  clip: '<path d="m21.4 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" />',
  chart: '<path d="M4 20V10M10 20V4M16 20v-7M22 20H2" />',
  layers: '<path d="M12 2 2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5M2 12l10 5 10-5" />',
  globe: '<circle cx="12" cy="12" r="10" /><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />',
  // Lucide (ISC)
  flame: '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />',
  notes: '<rect width="8" height="4" x="8" y="2" rx="1" ry="1" /><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" /><path d="M12 11h4" /><path d="M12 16h4" /><path d="M8 11h.01" /><path d="M8 16h.01" />',
  chat: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />',
  mail: '<rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />',
};
const svg = (inner: string, size = 15, sw = 1.8) =>
  `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
const iconMarkup = (name?: string) => svg(!name ? ICONS.clip : name.includes("<") ? name : (ICONS[name] ?? ICONS.clip));

const clientConfig = {
  uid,
  sources: sources.map((s) => ({ ...s, iconSvg: iconMarkup(s.icon) })),
  commands,
  models,
  model: current?.key ?? "",
  placeholder,
  autoplay,
  loop,
  dictationLang: dictationLang ?? null,
};
---

<div
  class:list={["vs-prompt-bar", `pb--${shape}`, { "pb--tall": tall }, className]}
  {...rest}
>
  <script type="application/json" data-vs-config set:html={JSON.stringify(clientConfig)} />
  <div class="pb-anchor" data-anchor>
    <div class="pb-menu" id={`${uid}-menu`} role="listbox" aria-label="Sources" data-menu hidden>
      <span class="pb-hl" data-hl aria-hidden="true"></span>
      <div class="pb-options" data-options></div>
      <div class="pb-empty" data-empty hidden></div>
      <div class="pb-menu-foot" data-menu-foot aria-hidden="true">Type to search sources &amp; files</div>
    </div>

    <div class="pb-model-menu" data-model-menu hidden>
      <GlideMenu class="pb-model-list" role="menu" aria-label="Model" arrowKeys highlightBg="var(--vs-hover)" highlightRadius="6px">
        {
          models.map((m) => (
            <button type="button" class="pb-model-row" data-menu-row role="menuitemradio" aria-checked={m.key === current?.key ? "true" : "false"} data-model={m.key}>
              <span class="pb-model-name">{m.name}</span>
              {m.tag && <span class="pb-model-tag">{m.tag}</span>}
              <span class="pb-model-check" set:html={svg('<path d="M20 6L9 17l-5-5" />', 13, 2.5)} />
            </button>
          ))
        }
      </GlideMenu>
    </div>

    <div class="pb-composer" data-composer>
      <span class="pb-sweep" aria-hidden="true"><span class="pb-sweep-band" data-sweep></span></span>
      <span class="pb-measure" data-measure aria-hidden="true"></span>
      <div class="pb-attachments" data-attachments hidden></div>
      <div class="pb-controls" data-controls>
        <button type="button" class="pb-icon-btn pb-plus" data-plus aria-label="Add attachments and sources" aria-expanded="false" aria-controls={`${uid}-menu`}>
          <Fragment set:html={svg('<path d="M12 5v14M5 12h14" />', 16, 2)} />
        </button>
        <textarea
          class="pb-input"
          data-input
          rows="1"
          role="combobox"
          aria-label="Prompt"
          aria-autocomplete="list"
          aria-expanded="false"
          aria-controls={`${uid}-menu`}
          aria-haspopup="listbox"
          placeholder={placeholder}></textarea>
        <button type="button" class="pb-model-btn" data-model-btn aria-haspopup="menu" aria-expanded="false" aria-label={`Model: ${current?.name ?? ""}. Choose model`}>
          <span data-model-name>{current?.name}</span>
          <span class="pb-ink-3" set:html={svg('<path d="M6 9l6 6 6-6" />', 11, 2.4)} />
        </button>
        <button type="button" class="pb-icon-btn pb-mic" data-mic aria-label="Start dictation" aria-pressed="false">
          <span class="pb-mic-icon" set:html={svg('<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" /><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3" />', 15, 2)} />
          <span class="pb-eq" aria-hidden="true"><span></span><span></span><span></span></span>
        </button>
        <button type="button" class="pb-send" data-send aria-label="Send" disabled>
          <Fragment set:html={svg('<path d="M12 19V5M5 12l7-7 7 7" />', 16, 2.4)} />
        </button>
      </div>
    </div>
    <input type="file" multiple hidden data-file tabindex="-1" aria-hidden="true" />
  </div>
  <p class="pb-sr" aria-live="polite" data-live></p>
</div>

<script>
  interface Source {
    key: string;
    name: string;
    desc: string;
    iconSvg: string;
    attach?: boolean;
    connect?: boolean;
    connected?: boolean;
  }
  interface Command {
    key: string;
    name: string;
    desc: string;
  }
  interface Model {
    key: string;
    name: string;
    tag?: string;
    flagship?: boolean;
  }
  interface Config {
    uid: string;
    sources: Source[];
    commands: Command[];
    models: Model[];
    model: string;
    placeholder: string;
    autoplay: boolean;
    loop: boolean;
    dictationLang: string | null;
  }
  interface Row {
    key: string;
    name: string;
    desc: string;
    source?: Source;
  }
  interface AutoStep {
    draft: string;
    active?: number;
    connect?: boolean;
    modelOpen?: boolean;
    model?: "first-flagship" | "default";
    hold: number;
  }

  /* minimal Web Speech API surface (not in the DOM lib) */
  interface SpeechResultList {
    length: number;
    [index: number]: { 0: { transcript: string }; isFinal: boolean };
  }
  interface Recognition extends EventTarget {
    lang: string;
    continuous: boolean;
    interimResults: boolean;
    start(): void;
    stop(): void;
    abort(): void;
    onresult: ((event: { resultIndex: number; results: SpeechResultList }) => void) | null;
    onerror: ((event: { error: string }) => void) | null;
    onend: (() => void) | null;
  }
  type RecognitionCtor = new () => Recognition;

  const escapeHtml = (s: string) => s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);

  /* self-running demo: walk the @ menu, then the / menu, then upgrade the model */
  const AUTO_STEPS: AutoStep[] = [
    { draft: "", connect: false, model: "default", hold: 1100 },
    { draft: "@", active: 0, hold: 900 },
    { draft: "@", active: 1, hold: 620 },
    { draft: "@", active: 4, hold: 620 },
    { draft: "@", active: 6, hold: 700 },
    { draft: "@", active: 6, connect: true, hold: 1000 },
    { draft: "", hold: 700 },
    { draft: "/", active: 0, hold: 900 },
    { draft: "/", active: 1, hold: 620 },
    { draft: "/", active: 3, hold: 1000 },
    { draft: "", hold: 800 },
    { draft: "", modelOpen: true, hold: 1200 },
    { draft: "", model: "first-flagship", hold: 2400 },
    { draft: "", hold: 900 },
  ];

  /* the last @word or /word being typed, if any */
  function parseToken(draft: string): { kind: "at" | "slash"; query: string; start: number } | null {
    const match = /(^|\s)([@/])([\w-]*)$/.exec(draft);
    if (!match) return null;
    return { kind: match[2] === "@" ? "at" : "slash", query: match[3].toLowerCase(), start: match.index + match[1].length };
  }

  function init(root: HTMLElement) {
    const cfg = JSON.parse(root.querySelector("script[data-vs-config]")?.textContent || "{}") as Config;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
    const q = <T extends HTMLElement = HTMLElement>(sel: string) => root.querySelector<T>(sel)!;
    const anchor = q("[data-anchor]");
    const menu = q("[data-menu]");
    const hl = q("[data-hl]");
    const optionsEl = q("[data-options]");
    const emptyEl = q("[data-empty]");
    const menuFoot = q("[data-menu-foot]");
    const modelMenu = q("[data-model-menu]");
    const sweep = q("[data-sweep]");
    const measure = q("[data-measure]");
    const attachmentsEl = q("[data-attachments]");
    const controls = q("[data-controls]");
    const plusBtn = q<HTMLButtonElement>("[data-plus]");
    const input = q<HTMLTextAreaElement>("[data-input]");
    const modelBtn = q<HTMLButtonElement>("[data-model-btn]");
    const modelName = q("[data-model-name]");
    const micBtn = q<HTMLButtonElement>("[data-mic]");
    const sendBtn = q<HTMLButtonElement>("[data-send]");
    const fileInput = q<HTMLInputElement>("[data-file]");
    const live = q("[data-live]");
    const tall = root.classList.contains("pb--tall");

    const sources = cfg.sources.map((s) => ({ ...s }));
    let model = cfg.models.find((m) => m.key === cfg.model) ?? cfg.models[0];
    const defaultModel = model;
    let attachments: { name: string; file?: File }[] = [];
    let dismissed = false;
    let plusOpen = false;
    let modelOpen = false;
    let active = 0;
    let engaged = false;
    let rows: Row[] = [];
    let menuKind: "at" | "slash" | null = null;
    let lastKey = "";
    let listening = false;
    let recognition: Recognition | null = null;

    /* ── menus ─────────────────────────────────────────── */
    const token = () => (dismissed ? null : parseToken(input.value));
    const computeMenu = () => {
      const t = token();
      const kind: "at" | "slash" | null = plusOpen ? "at" : (t?.kind ?? null);
      const query = plusOpen ? "" : (t?.query ?? "");
      const list: Row[] =
        kind === "at"
          ? sources.filter((s) => s.name.toLowerCase().includes(query)).map((s) => ({ key: s.key, name: s.name, desc: s.desc, source: s }))
          : kind === "slash"
            ? cfg.commands.filter((c) => c.name.replace(/^\//, "").toLowerCase().startsWith(query))
            : [];
      return { kind, query, list };
    };

    const placeHighlight = () => {
      const target = optionsEl.children[active] as HTMLElement | undefined;
      const show = !!target && engaged && rows.length > 0;
      if (target) {
        hl.style.top = `${target.offsetTop}px`;
        hl.style.height = `${target.offsetHeight}px`;
      }
      hl.style.opacity = show ? "1" : "0";
      optionsEl.querySelectorAll("[role=option]").forEach((el, i) => el.setAttribute("aria-selected", String(i === active)));
      if (target && engaged) input.setAttribute("aria-activedescendant", target.id);
      else input.removeAttribute("aria-activedescendant");
    };

    const renderMenu = () => {
      const { kind, query, list } = computeMenu();
      const key = `${kind}|${query}`;
      if (key !== lastKey) {
        active = 0;
        engaged = false;
        lastKey = key;
      }
      menuKind = kind;
      rows = list;
      const open = kind !== null;
      const wasOpen = !menu.hidden;
      menu.hidden = !open;
      input.setAttribute("aria-expanded", String(open));
      plusBtn.setAttribute("aria-expanded", String(plusOpen));
      plusBtn.classList.toggle("is-active", plusOpen);
      if (!open) {
        input.removeAttribute("aria-activedescendant");
        return;
      }
      if (!wasOpen && !reduce.matches) {
        menu.classList.remove("is-anim");
        void menu.offsetWidth;
        menu.classList.add("is-anim");
      }
      menu.setAttribute("aria-label", kind === "at" ? "Sources and files" : "Commands");
      optionsEl.innerHTML = list
        .map((row, i) => {
          const s = row.source;
          const connect = s?.connect
            ? `<span class="pb-connect${s.connected ? " is-connected" : ""}" data-connect="${escapeHtml(s.key)}">${s.connected ? "Connected" : "Connect"}</span>`
            : "";
          return `<div class="pb-option" role="option" id="${cfg.uid}-opt-${i}" aria-selected="false" data-index="${i}">${
            s ? `<span class="pb-option-icon">${s.iconSvg}</span>` : ""
          }<span class="pb-option-name">${escapeHtml(row.name)}</span><span class="pb-option-desc">${escapeHtml(row.desc)}</span>${connect}</div>`;
        })
        .join("");
      emptyEl.hidden = list.length > 0;
      emptyEl.textContent = list.length ? "" : `No matches for “${query}”`;
      menuFoot.textContent = kind === "at" ? "Type to search sources & files" : "Type to search commands";
      if (active >= list.length) active = 0;
      placeHighlight();
    };

    const closeMenus = () => {
      plusOpen = false;
      setModelOpen(false);
      renderMenu();
    };

    const toggleConnect = (key: string) => {
      const s = sources.find((x) => x.key === key);
      if (!s) return;
      s.connected = !s.connected;
      live.textContent = `${s.name} ${s.connected ? "connected" : "disconnected"}.`;
      renderMenu();
    };

    const pick = (row: Row | undefined) => {
      if (!row) return;
      const t = token();
      const before = t ? input.value.slice(0, t.start) : input.value;
      const s = row.source;
      if (s?.connect && !s.connected) {
        toggleConnect(s.key);
        return;
      }
      if (s?.attach) {
        if (t) input.value = before;
        plusOpen = false;
        fileInput.click();
      } else if (menuKind === "at") {
        input.value = `${before}@${row.name} `;
      } else {
        input.value = `${before}${row.name} `;
      }
      plusOpen = false;
      dismissed = false;
      input.focus();
      input.setSelectionRange(input.value.length, input.value.length);
      sync();
    };

    optionsEl.addEventListener("mousedown", (e) => e.preventDefault());
    optionsEl.addEventListener("mousemove", (e) => {
      const opt = (e.target as Element).closest<HTMLElement>("[data-index]");
      if (!opt) return;
      const i = Number(opt.dataset.index);
      if (i !== active || !engaged) {
        active = i;
        engaged = true;
        placeHighlight();
      }
    });
    menu.addEventListener("mouseleave", () => {
      engaged = false;
      placeHighlight();
    });
    optionsEl.addEventListener("click", (e) => {
      const connect = (e.target as Element).closest<HTMLElement>("[data-connect]");
      if (connect) {
        e.stopPropagation();
        toggleConnect(connect.dataset.connect!);
        return;
      }
      const opt = (e.target as Element).closest<HTMLElement>("[data-index]");
      if (opt) pick(rows[Number(opt.dataset.index)]);
    });

    plusBtn.addEventListener("click", () => {
      setModelOpen(false);
      plusOpen = !plusOpen;
      renderMenu();
      input.focus();
    });

    /* ── model menu ────────────────────────────────────── */
    function setModelOpen(open: boolean, focusMenu = false) {
      modelOpen = open;
      modelBtn.setAttribute("aria-expanded", String(open));
      if (!open) {
        modelMenu.hidden = true;
        return;
      }
      plusOpen = false;
      renderMenu();
      modelMenu.hidden = false;
      const a = anchor.getBoundingClientRect();
      const t = modelBtn.getBoundingClientRect();
      modelMenu.style.left = `${Math.max(0, Math.min(t.left - a.left, a.width - modelMenu.offsetWidth))}px`;
      modelMenu.style.bottom = `${a.bottom - t.top + 8}px`;
      if (!reduce.matches) {
        modelMenu.classList.remove("is-anim");
        void modelMenu.offsetWidth;
        modelMenu.classList.add("is-anim");
      }
      if (focusMenu) modelMenu.querySelector<HTMLElement>('[aria-checked="true"]')?.focus();
    }
    const selectModel = (next: Model, announce = true) => {
      const changed = next.key !== model.key;
      model = next;
      modelName.textContent = next.name;
      modelBtn.setAttribute("aria-label", `Model: ${next.name}. Choose model`);
      modelMenu.querySelectorAll<HTMLElement>("[data-model]").forEach((el) => el.setAttribute("aria-checked", String(el.dataset.model === next.key)));
      setModelOpen(false);
      sync();
      if (changed && next.flagship) celebrate();
      if (announce) {
        live.textContent = `Model: ${next.name}`;
        root.dispatchEvent(new CustomEvent("vs-prompt-model", { bubbles: true, detail: { key: next.key, name: next.name } }));
      }
    };
    modelBtn.addEventListener("click", (e) => setModelOpen(!modelOpen, e.detail === 0));
    modelMenu.addEventListener("mousedown", (e) => e.preventDefault());
    modelMenu.addEventListener("click", (e) => {
      const row = (e.target as Element).closest<HTMLElement>("[data-model]");
      const next = cfg.models.find((m) => m.key === row?.dataset.model);
      if (!next) return;
      const viaKeyboard = e.detail === 0;
      selectModel(next);
      (viaKeyboard ? modelBtn : input).focus();
    });
    modelMenu.addEventListener("keydown", (e) => {
      if (e.key === "Escape") {
        e.preventDefault();
        e.stopPropagation();
        setModelOpen(false);
        modelBtn.focus();
      } else if (e.key === "Tab") setModelOpen(false);
    });

    /* rainbow sweep across the composer interior */
    let sweepAnim: Animation | null = null;
    function celebrate() {
      if (reduce.matches || sweepAnim?.playState === "running") return;
      sweepAnim = sweep.animate(
        [
          { transform: "translateX(-110%)", opacity: 0 },
          { opacity: 1, offset: 0.2 },
          { opacity: 1, offset: 0.75 },
          { transform: "translateX(230%)", opacity: 0 },
        ],
        { duration: 650, easing: "cubic-bezier(0.16, 1, 0.3, 1)" },
      );
    }

    /* ── attachments ───────────────────────────────────── */
    const fileSvg = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></svg>';
    const xSvg = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" /></svg>';
    const renderAttachments = () => {
      attachmentsEl.hidden = attachments.length === 0;
      attachmentsEl.innerHTML = attachments
        .map(
          (a, i) =>
            `<span class="pb-chip">${fileSvg}<span class="pb-chip-name">${escapeHtml(a.name)}</span><button type="button" class="pb-chip-x" data-remove="${i}" aria-label="Remove ${escapeHtml(a.name)}">${xSvg}</button></span>`,
        )
        .join("");
      sync();
    };
    attachmentsEl.addEventListener("click", (e) => {
      const btn = (e.target as Element).closest<HTMLElement>("[data-remove]");
      if (!btn) return;
      const removed = attachments[Number(btn.dataset.remove)];
      attachments = attachments.filter((_, i) => i !== Number(btn.dataset.remove));
      renderAttachments();
      live.textContent = `Removed ${removed?.name ?? "attachment"}.`;
      input.focus();
    });
    fileInput.addEventListener("change", () => {
      const files = Array.from(fileInput.files ?? []);
      attachments = [...attachments, ...files.map((file) => ({ name: file.name, file }))];
      fileInput.value = "";
      renderAttachments();
      if (files.length) live.textContent = `Attached ${files.map((f) => f.name).join(", ")}.`;
      input.focus();
    });

    /* ── layout: wrap text above the controls, then grow to a max ── */
    const sync = () => {
      const draft = input.value;
      measure.textContent = draft;
      const fixed = 28 * 3 + modelBtn.offsetWidth + 16;
      const inlineWidth = controls.clientWidth - fixed;
      const wide = tall || draft.includes("\n") || measure.offsetWidth + 8 > inlineWidth;
      root.classList.toggle("is-wide", wide);
      root.classList.toggle("has-attachments", attachments.length > 0);
      const min = tall ? 68 : 28;
      const max = tall ? 160 : 100;
      input.style.height = "0px";
      const h = input.scrollHeight;
      input.style.height = `${Math.min(Math.max(h, min), max)}px`;
      input.style.overflowY = h > max ? "auto" : "hidden";
      sendBtn.disabled = !(draft.trim().length > 0 || attachments.length > 0);
      renderMenu();
    };

    const send = () => {
      if (sendBtn.disabled) return;
      const text = input.value.trim();
      const mentions = sources.filter((s) => text.includes(`@${s.name}`)).map((s) => s.name);
      const command = cfg.commands.find((c) => text.startsWith(c.name) || text.includes(` ${c.name}`))?.name ?? null;
      root.dispatchEvent(
        new CustomEvent("vs-prompt-submit", {
          bubbles: true,
          detail: {
            text,
            model: { key: model.key, name: model.name },
            sources: mentions,
            command,
            attachments: attachments.map((a) => a.name),
            files: attachments.flatMap((a) => (a.file ? [a.file] : [])),
          },
        }),
      );
      input.value = "";
      attachments = [];
      renderAttachments();
      closeMenus();
      live.textContent = "Message sent.";
    };
    sendBtn.addEventListener("click", send);

    input.addEventListener("input", () => {
      dismissed = false;
      plusOpen = false;
      sync();
    });
    input.addEventListener("keydown", (e) => {
      if (menuKind && rows.length > 0) {
        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
          e.preventDefault();
          if (engaged) active = (active + (e.key === "ArrowDown" ? 1 : rows.length - 1)) % rows.length;
          engaged = true;
          placeHighlight();
          return;
        }
        if ((e.key === "Enter" && !e.shiftKey && !e.isComposing) || e.key === "Tab") {
          e.preventDefault();
          pick(rows[active]);
          return;
        }
      }
      if (e.key === "Escape") {
        if (menuKind || modelOpen) e.preventDefault();
        dismissed = true;
        closeMenus();
        return;
      }
      if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
        e.preventDefault();
        send();
      }
    });
    input.addEventListener("blur", () => {
      // Leaving the field closes the listbox (clicks on options are kept by preventDefault).
      requestAnimationFrame(() => {
        if (!root.contains(document.activeElement)) {
          plusOpen = false;
          dismissed = true;
          renderMenu();
        }
      });
    });

    /* ── dictation (Web Speech API, only on click) ─────── */
    const w = window as unknown as { SpeechRecognition?: RecognitionCtor; webkitSpeechRecognition?: RecognitionCtor };
    const Speech = w.SpeechRecognition ?? w.webkitSpeechRecognition;
    const markUnsupported = (message: string) => {
      micBtn.setAttribute("aria-disabled", "true");
      micBtn.classList.add("is-unsupported");
      micBtn.title = message;
      micBtn.setAttribute("aria-label", `Dictation unavailable: ${message}`);
      live.textContent = message;
    };
    const setListening = (on: boolean) => {
      listening = on;
      micBtn.classList.toggle("is-listening", on);
      micBtn.setAttribute("aria-pressed", String(on));
      micBtn.setAttribute("aria-label", on ? "Stop dictation" : "Start dictation");
      input.placeholder = on ? "Listening…" : cfg.placeholder;
    };
    micBtn.addEventListener("click", () => {
      if (micBtn.getAttribute("aria-disabled") === "true") {
        live.textContent = micBtn.title;
        return;
      }
      if (!Speech) {
        markUnsupported("This browser doesn't support dictation.");
        return;
      }
      if (listening) {
        recognition?.stop();
        return;
      }
      const base = input.value.trimEnd();
      recognition = new Speech();
      recognition.lang = cfg.dictationLang ?? (document.documentElement.lang || navigator.language);
      recognition.continuous = false;
      recognition.interimResults = true;
      recognition.onresult = (event) => {
        let transcript = "";
        for (let i = 0; i < event.results.length; i += 1) transcript += event.results[i][0].transcript;
        input.value = base ? `${base} ${transcript.trim()}` : transcript.trim();
        sync();
      };
      recognition.onerror = (event) => {
        if (event.error === "not-allowed" || event.error === "service-not-allowed") markUnsupported("Microphone access is blocked.");
        else if (event.error !== "no-speech" && event.error !== "aborted") live.textContent = "Dictation stopped.";
      };
      recognition.onend = () => {
        setListening(false);
        input.focus();
      };
      try {
        recognition.start();
        setListening(true);
        live.textContent = "Listening…";
      } catch {
        markUnsupported("Dictation couldn't start.");
      }
    });

    /* ── outside clicks close the menus ────────────────── */
    const onPointerDown = (e: PointerEvent) => {
      if ((modelOpen || plusOpen) && !root.contains(e.target as Node)) closeMenus();
    };
    document.addEventListener("pointerdown", onPointerDown);

    /* ── autoplay walkthrough ──────────────────────────── */
    let auto = cfg.autoplay && !reduce.matches;
    let step = 0;
    let autoTimer: number | undefined;
    let inView = false;
    const flagship = cfg.models.find((m) => m.flagship);
    const applyStep = () => {
      if (!auto || !inView) return;
      if (step >= AUTO_STEPS.length) {
        if (!cfg.loop) return stopAuto(false);
        step = 0;
      }
      const s = AUTO_STEPS[step];
      dismissed = false;
      input.value = s.draft;
      sync();
      if (s.active !== undefined && rows.length) {
        active = Math.min(s.active, rows.length - 1);
        engaged = true;
        placeHighlight();
      }
      if (s.connect !== undefined) {
        const target = sources.find((x) => x.connect);
        if (target && !!target.connected !== s.connect) toggleConnect(target.key);
      }
      if (s.modelOpen) setModelOpen(true);
      if (s.model === "default" && model.key !== defaultModel.key) selectModel(defaultModel, false);
      if (s.model === "first-flagship" && flagship) selectModel(flagship, false);
      step += 1;
      autoTimer = window.setTimeout(applyStep, s.hold);
    };
    const stopAuto = (clearDraft: boolean) => {
      if (!auto) return;
      auto = false;
      window.clearTimeout(autoTimer);
      io.disconnect();
      if (clearDraft) input.value = "";
      dismissed = false;
      setModelOpen(false);
      sync();
    };
    const takeOver = (e: Event) => {
      if (!auto) return;
      stopAuto(e.target === input);
    };
    root.addEventListener("pointerdown", takeOver, true);
    root.addEventListener("keydown", takeOver, true);
    root.addEventListener("focusin", takeOver, true);
    const io = new IntersectionObserver(([entry]) => {
      inView = entry.isIntersecting;
      window.clearTimeout(autoTimer);
      if (inView && auto) applyStep();
    });
    if (auto) io.observe(root);

    // Rewrap when the composer's width changes.
    const ro = new ResizeObserver(() => sync());
    ro.observe(controls);
    sync();

    return () => {
      window.clearTimeout(autoTimer);
      io.disconnect();
      ro.disconnect();
      sweepAnim?.cancel();
      recognition?.abort();
      document.removeEventListener("pointerdown", onPointerDown);
    };
  }

  const teardowns = new Set<() => void>();
  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-prompt-bar:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      teardowns.add(init(root));
    });
  boot();
  document.addEventListener("astro:page-load", boot);
  document.addEventListener("astro:before-swap", () => {
    teardowns.forEach((fn) => fn());
    teardowns.clear();
  });
</script>

<style>
  .vs-prompt-bar {
    --pb-radius: 14px;
    --pb-ctl-radius: 8px;
    width: 100%;
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    text-align: left;
  }
  .pb--pill {
    --pb-radius: var(--vs-radius-pill);
    --pb-ctl-radius: var(--vs-radius-pill);
  }
  .pb--pill.is-wide,
  .pb--pill.has-attachments {
    --pb-radius: 24px;
  }
  .pb--tall {
    --pb-radius: 22px;
  }
  .pb-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pb-ink-3 {
    display: inline-flex;
    color: var(--vs-ink-3);
  }
  .pb-anchor {
    position: relative;
  }
  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  button:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }

  /* ── @ / slash menu ─────────────────────────────────── */
  .pb-menu {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    padding: 4px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-raised);
    transform-origin: bottom center;
  }
  .pb-menu[hidden],
  .pb-model-menu[hidden],
  .pb-empty[hidden],
  .pb-attachments[hidden] {
    display: none;
  }
  .pb-menu.is-anim,
  .pb-model-menu.is-anim {
    animation: vs-pop-in 180ms var(--vs-ease-out) both;
  }
  .pb-model-menu.is-anim {
    transform-origin: bottom left;
  }
  .pb-hl {
    position: absolute;
    right: 4px;
    left: 4px;
    height: 0;
    border-radius: 6px;
    background: var(--vs-hover);
    opacity: 0;
    pointer-events: none;
    transition:
      top 220ms var(--vs-ease-out),
      height 220ms var(--vs-ease-out),
      opacity 150ms ease;
  }
  .pb-options {
    position: relative;
  }
  .vs-prompt-bar :global(.pb-option) {
    position: relative;
    display: flex;
    width: 100%;
    height: 36px;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    border-radius: 6px;
    cursor: pointer;
  }
  .vs-prompt-bar :global(.pb-option-icon) {
    display: flex;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--vs-ink-2);
  }
  .vs-prompt-bar :global(.pb-option-name) {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .vs-prompt-bar :global(.pb-option-desc) {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    font-size: 12px;
    color: var(--vs-ink-3);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vs-prompt-bar :global(.pb-connect) {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--vs-accent-ink);
    transition: color 100ms ease-out;
  }
  .vs-prompt-bar :global(.pb-connect:hover) {
    text-decoration: underline;
  }
  .vs-prompt-bar :global(.pb-connect.is-connected) {
    color: var(--vs-green);
    text-decoration: none;
  }
  .pb-empty {
    display: flex;
    height: 36px;
    align-items: center;
    padding: 0 8px;
    font-size: 12px;
    color: var(--vs-ink-3);
  }
  .pb-menu-foot {
    margin-top: 4px;
    padding: 6px 8px 4px;
    border-top: 1px solid var(--vs-line);
    font-size: 11px;
    color: var(--vs-ink-3);
  }

  /* ── model menu ─────────────────────────────────────── */
  .pb-model-menu {
    position: absolute;
    z-index: 10;
    width: 176px;
    padding: 4px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-raised);
  }
  .pb-model-list {
    display: flex;
    flex-direction: column;
  }
  .pb-model-row {
    display: flex;
    width: 100%;
    height: 30px;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    border-radius: 6px;
    text-align: left;
  }
  .pb-model-row:focus-visible {
    box-shadow: none;
  }
  .pb-model-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vs-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pb-model-tag {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--vs-ink-3);
  }
  .pb-model-check {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--vs-ink);
    visibility: hidden;
  }
  .pb-model-row[aria-checked="true"] .pb-model-check {
    visibility: visible;
  }

  /* ── composer ───────────────────────────────────────── */
  .pb-composer {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    overflow: hidden;
    border: 1px solid var(--vs-line);
    border-radius: var(--pb-radius);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
    transition:
      border-color 150ms ease-out,
      border-radius 150ms ease-out;
  }
  .pb--tall .pb-composer {
    gap: 10px;
    padding: 14px;
  }
  .pb-composer:focus-within {
    border-color: var(--vs-line-strong);
  }
  .pb-sweep {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
  }
  .pb-sweep-band {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 55%;
    opacity: 0;
    background: linear-gradient(
      90deg,
      transparent,
      oklch(0.72 0.19 25 / 0.55),
      oklch(0.8 0.16 65 / 0.55),
      oklch(0.88 0.16 100 / 0.55),
      oklch(0.78 0.17 150 / 0.55),
      oklch(0.8 0.12 210 / 0.55),
      oklch(0.66 0.18 260 / 0.55),
      oklch(0.64 0.2 305 / 0.55),
      transparent
    );
    filter: blur(10px);
    transform: translateX(-110%);
  }
  .pb-measure {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    font-size: 13px;
    line-height: 18px;
    white-space: pre;
  }
  .pb-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 2px 0;
  }
  .pb--pill .pb-attachments {
    padding-inline: 4px;
  }
  .vs-prompt-bar :global(.pb-chip) {
    display: flex;
    height: 26px;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 6px;
    border-radius: var(--vs-radius-chip);
    background: var(--vs-field);
    box-shadow: var(--vs-shadow-hairline);
    font-size: 11.5px;
    color: var(--vs-ink-2);
    animation: vs-pop-in 200ms var(--vs-ease-out) both;
  }
  .pb--pill :global(.pb-chip) {
    border-radius: var(--vs-radius-pill);
  }
  .vs-prompt-bar :global(.pb-chip-name) {
    max-width: 144px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vs-prompt-bar :global(.pb-chip-x) {
    display: flex;
    width: 24px;
    height: 24px;
    margin: -4px 0;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--vs-ink-3);
    transition: background-color 100ms ease-out, color 100ms ease-out;
  }
  .pb--pill :global(.pb-chip-x) {
    border-radius: var(--vs-radius-pill);
  }
  .vs-prompt-bar :global(.pb-chip-x:hover) {
    background: color-mix(in srgb, var(--vs-line) 70%, transparent);
    color: var(--vs-ink);
  }

  /* controls grid: inline, or text on its own row once it wraps */
  .pb-controls {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto 28px 28px;
    align-items: end;
    gap: 6px 4px;
  }
  .pb-plus {
    grid-area: 1 / 1;
  }
  .pb-input {
    grid-area: 1 / 2;
  }
  .pb-model-btn {
    grid-area: 1 / 3;
  }
  .pb-mic {
    grid-area: 1 / 4;
  }
  .pb-send {
    grid-area: 1 / 5;
  }
  .is-wide .pb-controls {
    grid-template-columns: 28px auto minmax(0, 1fr) 28px 28px;
  }
  .is-wide .pb-input {
    grid-area: 1 / 1 / 2 / -1;
  }
  .is-wide .pb-plus {
    grid-area: 2 / 1;
  }
  .is-wide .pb-model-btn {
    grid-area: 2 / 2;
    justify-self: start;
  }
  .is-wide .pb-mic {
    grid-area: 2 / 4;
  }
  .is-wide .pb-send {
    grid-area: 2 / 5;
  }

  .pb-icon-btn {
    display: flex;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    justify-self: start;
    border-radius: var(--pb-ctl-radius);
    color: var(--vs-ink-3);
    transition:
      background-color 150ms ease-out,
      color 150ms ease-out,
      transform 150ms ease-out;
  }
  .pb-icon-btn:hover,
  .pb-plus.is-active {
    background: var(--vs-hover);
    color: var(--vs-ink);
  }
  .pb-icon-btn:active {
    transform: scale(0.94);
  }
  .pb-input {
    width: 100%;
    min-width: 0;
    min-height: 28px;
    padding: 5px 4px;
    border: 0;
    background: transparent;
    color: var(--vs-ink);
    font: inherit;
    font-size: 13px;
    line-height: 18px;
    overflow-wrap: anywhere;
    resize: none;
    outline: none;
  }
  .pb--tall .pb-input {
    min-height: 68px;
    padding: 8px;
    font-size: 14px;
    line-height: 20px;
  }
  .pb-input::placeholder {
    color: var(--vs-ink-3);
  }
  .pb-model-btn {
    display: flex;
    height: 28px;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    border-radius: var(--pb-ctl-radius);
    color: var(--vs-ink-2);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 150ms ease-out, color 150ms ease-out;
  }
  .pb-model-btn:hover,
  .pb-model-btn[aria-expanded="true"] {
    background: var(--vs-hover);
    color: var(--vs-ink);
  }

  /* dictation */
  .pb-eq {
    display: none;
    height: 14px;
    align-items: center;
    gap: 2.5px;
  }
  .pb-eq span {
    width: 2.5px;
    height: 100%;
    border-radius: var(--vs-radius-pill);
    background: currentColor;
    animation: vs-prompt-bar-eq 900ms ease-in-out infinite;
  }
  .pb-eq span:nth-child(2) {
    animation-delay: 150ms;
  }
  .pb-eq span:nth-child(3) {
    animation-delay: 300ms;
  }
  @keyframes vs-prompt-bar-eq {
    0%,
    100% {
      transform: scaleY(0.35);
    }
    50% {
      transform: scaleY(1);
    }
  }
  .pb-mic.is-listening {
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
  }
  .pb-mic.is-listening .pb-eq {
    display: flex;
  }
  .pb-mic.is-listening .pb-mic-icon {
    display: none;
  }
  .pb-mic-icon {
    display: flex;
  }
  .pb-mic.is-unsupported {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .pb-send {
    display: flex;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--pb-ctl-radius);
    background: var(--vs-ink);
    color: var(--vs-surface);
    transition:
      background-color 200ms ease-out,
      color 200ms ease-out,
      transform 200ms ease-out;
  }
  .pb-send:enabled:active {
    transform: scale(0.94);
  }
  .pb-send:disabled {
    background: var(--vs-line-strong);
    color: var(--vs-ink-2);
    cursor: default;
  }

  @media (prefers-reduced-motion: reduce) {
    .pb-menu.is-anim,
    .pb-model-menu.is-anim,
    .vs-prompt-bar :global(.pb-chip) {
      animation: none;
    }
    .pb-hl,
    .pb-composer {
      transition: none;
    }
    .pb-eq span {
      animation: none;
      transform: scaleY(0.7);
    }
  }
  @media (forced-colors: active) {
    .pb-hl {
      outline: 1px solid Highlight;
    }
    .pb-send:disabled {
      opacity: 0.5;
    }
  }
</style>
```


---

# Recommendation Card

> Agent suggestion with a confidence meter and alternatives.

- **Slug:** `recommendation-card`
- **Kind:** component · **Category:** Agent
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/RecommendationCard.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/recommendation-card
- **All files in one bundle:** https://viewership.ai/design/components/recommendation-card.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/recommendation-card.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/recommendation-card/`:

   - `RecommendationCard.astro` (raw: https://viewership.ai/design/raw/recommendation-card/RecommendationCard.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)
   - `entity-chip`: `EntityChip.astro`, `Monogram.astro` (docs: https://viewership.ai/design/components/entity-chip.md)
   - `value-pill`: `ValuePill.astro` (docs: https://viewership.ai/design/components/value-pill.md)

npm packages: none.

## Usage

```astro
---
import RecommendationCard from "../components/viewership/recommendation-card/RecommendationCard.astro";
---

<RecommendationCard />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import RecommendationCard from "./RecommendationCard.astro";
import type { RecommendationOption } from "./RecommendationCard.astro";

const options: RecommendationOption[] = [
  {
    key: "shift",
    body: [
      "Shift budget to",
      { entity: "Northwind Spring Search", color: "var(--vs-green)" },
      "with ROAS",
      { value: "4.2x", tone: "green" },
    ],
    short: "Shift budget to Spring Search · 4.2x",
    signal: 3,
    tone: "green",
    label: "High confidence",
    cta: "Accept",
    ctaVariant: "accent",
  },
  {
    key: "swap",
    body: ["Swap the hero creative to", { value: "Trail Test video" }, "for the spring launch."],
    short: "Swap hero creative to Trail Test",
    signal: 2,
    tone: "orange",
    label: "Needs review",
    cta: "Configure",
    ctaVariant: "primary",
  },
  {
    key: "even",
    body: ["Fall back to an", { strong: "even split" }, "across every campaign."],
    short: "Even split across every campaign",
    signal: 0,
    tone: "neutral",
    label: "No signal",
    cta: "Accept even split",
    ctaVariant: "primary",
  },
];
---

<div class="stage">
  <RecommendationCard title="Want me to move this week's ad budget?" options={options} />
</div>

<style>
  .stage {
    display: flex;
    width: 100%;
    justify-content: center;
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | The agent's question. |
| `options` | `RecommendationOption[]` |  | { key, body, short, signal (0–3), tone, label, cta, ctaVariant? }. body is a string or parts: strings, { entity, color? }, { value, tone? }, { strong }. |
| `selected` | `number` | `0` | Initial option index. |
| `labels` | `Partial<RecommendationLabels>` |  | alternatives, otherOptions, accepted, confidence (meter name). |
| `vs-recommendation-accept` | `CustomEvent<{ key: string; index: number }>` |  | Fires on accept. The card only shows "Accepted"; do the work in your handler. |
| `vs-recommendation-select` | `CustomEvent<{ key: string; index: number }>` |  | Fires when an alternative is promoted. |
| `vs-recommendation-toggle` | `CustomEvent<{ open: boolean }>` |  | Fires when the drawer toggles. |

## Source

### `src/components/viewership/recommendation-card/RecommendationCard.astro`

```astro
---
/**
 * RecommendationCard: agent suggestion with a confidence meter,
 * alternatives and an accept button.
 *
 * Ported from Beautiful UI `components/primitives/RecommendationCard.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * The card does no work itself. It reports choices as events. Bodies are
 * built from parts: strings, `{ entity }`, `{ value }` and `{ strong }`.
 *
 * Events (bubbling, on the root):
 *   vs-recommendation-accept  detail: { key, index }
 *   vs-recommendation-select  detail: { key, index }
 *   vs-recommendation-toggle  detail: { open }
 *
 * @example
 * <RecommendationCard title="Publish this draft?" options={[{ key: "a", body: "Publish the Spring Trail draft.", short: "Publish", signal: 3, tone: "green", label: "High confidence", cta: "Accept" }]} />
 */
import type { HTMLAttributes } from "astro/types";
import Button from "../button/Button.astro";
import EntityChip from "../entity-chip/EntityChip.astro";
import ValuePill from "../value-pill/ValuePill.astro";

type Tone = "green" | "orange" | "red" | "accent" | "neutral";
type CtaVariant = "primary" | "secondary" | "ghost" | "accent" | "success" | "quiet";

/** An EntityChip inside the body. */
export interface RecommendationEntityPart {
  entity: string;
  color?: string;
  monogram?: string;
}
/** A ValuePill inside the body. */
export interface RecommendationValuePart {
  value: string;
  tone?: Tone;
}
/** Emphasized text inside the body. */
export interface RecommendationStrongPart {
  strong: string;
}
export type RecommendationBodyPart = string | RecommendationEntityPart | RecommendationValuePart | RecommendationStrongPart;

export interface RecommendationOption {
  /** Stable id, reported in events. */
  key: string;
  /** The recommendation in prose. */
  body: string | RecommendationBodyPart[];
  /** One-line summary used in the alternatives drawer. */
  short: string;
  /** Confidence, 0–3 bars. */
  signal: number;
  tone: Tone;
  /** Confidence label, e.g. "High confidence". */
  label: string;
  /** Primary action text. */
  cta: string;
  ctaVariant?: CtaVariant;
}

export interface RecommendationLabels {
  alternatives: string;
  otherOptions: string;
  accepted: string;
  /** Accessible name of the meter. */
  confidence: string;
}

type Props = HTMLAttributes<"div"> & {
  title: string;
  options: RecommendationOption[];
  /** Index of the initial recommendation. */
  selected?: number;
  labels?: Partial<RecommendationLabels>;
};

const { title, options = [], selected = 0, labels, class: className, ...rest } = Astro.props;

const l: RecommendationLabels = {
  alternatives: "Alternatives",
  otherOptions: "Other options",
  accepted: "Accepted",
  confidence: "Confidence",
  ...labels,
};

const uid = `vs-rec-${Math.random().toString(36).slice(2, 8)}`;
const sel = Math.min(Math.max(0, selected), Math.max(0, options.length - 1));
const active = options[sel];
const TONE: Record<Tone, string> = {
  green: "var(--vs-green)",
  orange: "var(--vs-orange)",
  red: "var(--vs-red)",
  accent: "var(--vs-accent)",
  neutral: "var(--vs-ink-3)",
};
const toneOf = (tone: Tone) => TONE[tone] ?? TONE.neutral;
const bars = [0, 1, 2];
const parts = (body: RecommendationOption["body"]): RecommendationBodyPart[] => (typeof body === "string" ? [body] : body);
const config = options.map((o) => ({
  key: o.key,
  signal: o.signal,
  tone: toneOf(o.tone),
  label: o.label,
  cta: o.cta,
  ctaVariant: o.ctaVariant ?? "primary",
}));
---

<div
  class:list={["vs-recommendation-card", className]}
  data-selected={sel}
  data-accepted-label={l.accepted}
  {...rest}
>
  <script is:inline type="application/json" data-vs-config set:html={JSON.stringify(config).replace(/</g, "\\u003c")} />
  <div class="pad">
    <span class="title">{title}</span>
    <div class="bodies" aria-live="polite">
      {options.map((o, i) => (
        <p class="body" data-body={i} hidden={i !== sel}>
          {parts(o.body).map((part, j) => (
            <>
              {j > 0 && !(typeof part === "string" && /^[.,;:!?)]/.test(part)) ? " " : ""}
              {typeof part === "string" ? (
                part
              ) : "entity" in part ? (
                <EntityChip name={part.entity} color={part.color} monogram={part.monogram} />
              ) : "value" in part ? (
                <ValuePill tone={part.tone}>{part.value}</ValuePill>
              ) : (
                <span class="strong">{part.strong}</span>
              )}
            </>
          ))}
        </p>
      ))}
    </div>
  </div>

  <div class="drawer" id={`${uid}-drawer`} inert data-drawer>
    <div class="drawer-clip">
      <div class="drawer-inner">
        <p class="drawer-label" id={`${uid}-others`}>{l.otherOptions}</p>
        <div role="group" aria-labelledby={`${uid}-others`}>
          {options.map((o, i) => (
            <button type="button" class="alt" data-alt={i} hidden={i === sel}>
              <span class="meter" aria-hidden="true" style={`--vs-rec-tone: ${toneOf(o.tone)}`}>
                {bars.map((b) => <span class="bar" data-on={b < o.signal ? "" : undefined}></span>)}
              </span>
              <span class="alt-short">{o.short}</span>
              <span class="alt-label">{o.label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  </div>

  <div class="footer">
    <span
      class="confidence"
      role="meter"
      aria-label={l.confidence}
      aria-valuemin="0"
      aria-valuemax="3"
      aria-valuenow={active?.signal ?? 0}
      aria-valuetext={active?.label}
      data-meter
    >
      <span class="meter" style={`--vs-rec-tone: ${active ? toneOf(active.tone) : TONE.neutral}`} data-meter-bars>
        {bars.map((b) => <span class="bar" data-on={active && b < active.signal ? "" : undefined}></span>)}
      </span>
      <span class="confidence-label" data-meter-label>{active?.label}</span>
    </span>

    <span class="actions">
      <Button variant="secondary" size="sm" class="alt-toggle" aria-expanded="false" aria-controls={`${uid}-drawer`} data-toggle>
        {l.alternatives}
      </Button>
      <Button variant={active?.ctaVariant ?? "primary"} size="sm" class="cta" data-accept>
        {active?.cta}
      </Button>
    </span>
  </div>
  <span class="vh" aria-live="polite" data-live></span>
</div>

<script>
  interface OptionConfig {
    key: string;
    signal: number;
    tone: string;
    label: string;
    cta: string;
    ctaVariant: string;
  }

  function init(root: HTMLElement) {
    const config = JSON.parse(root.querySelector("[data-vs-config]")?.textContent || "[]") as OptionConfig[];
    const bodies = [...root.querySelectorAll<HTMLElement>("[data-body]")];
    const alts = [...root.querySelectorAll<HTMLButtonElement>("[data-alt]")];
    const drawer = root.querySelector<HTMLElement>("[data-drawer]")!;
    const toggle = root.querySelector<HTMLButtonElement>("[data-toggle]")!;
    const accept = root.querySelector<HTMLButtonElement>("[data-accept]")!;
    const meter = root.querySelector<HTMLElement>("[data-meter]")!;
    const meterBars = root.querySelector<HTMLElement>("[data-meter-bars]")!;
    const meterLabel = root.querySelector<HTMLElement>("[data-meter-label]")!;
    const live = root.querySelector<HTMLElement>("[data-live]")!;
    const acceptedLabel = root.dataset.acceptedLabel ?? "Accepted";
    if (!config.length) return;

    let selected = Number(root.dataset.selected ?? 0);
    let accepted = false;

    const renderCta = () => {
      const o = config[selected]!;
      accept.className = accept.className.replace(/\bvs-button--(primary|secondary|ghost|accent|success|quiet)\b/, `vs-button--${accepted ? "success" : o.ctaVariant}`);
      accept.textContent = accepted ? acceptedLabel : o.cta;
    };

    const select = (index: number) => {
      const o = config[index];
      if (!o) return;
      selected = index;
      accepted = false;
      bodies.forEach((b, i) => {
        b.hidden = i !== index;
        if (i === index) {
          b.removeAttribute("data-enter");
          void b.offsetWidth;
          b.setAttribute("data-enter", "");
        }
      });
      alts.forEach((a, i) => (a.hidden = i === index));
      meterBars.style.setProperty("--vs-rec-tone", o.tone);
      [...meterBars.children].forEach((bar, b) => bar.toggleAttribute("data-on", b < o.signal));
      meterLabel.textContent = o.label;
      meter.setAttribute("aria-valuenow", String(o.signal));
      meter.setAttribute("aria-valuetext", o.label);
      renderCta();
    };

    toggle.addEventListener("click", () => {
      const open = toggle.getAttribute("aria-expanded") !== "true";
      toggle.setAttribute("aria-expanded", String(open));
      drawer.toggleAttribute("data-open", open);
      drawer.inert = !open;
      root.dispatchEvent(new CustomEvent("vs-recommendation-toggle", { bubbles: true, detail: { open } }));
    });

    alts.forEach((alt) => {
      alt.addEventListener("click", () => {
        const index = Number(alt.dataset.alt);
        const position = alts.filter((a) => !a.hidden).indexOf(alt);
        select(index);
        // The picked row leaves the list; keep focus on the row now in its place.
        const visible = alts.filter((a) => !a.hidden);
        (visible[Math.min(position, visible.length - 1)] ?? toggle).focus();
        root.dispatchEvent(new CustomEvent("vs-recommendation-select", { bubbles: true, detail: { key: config[index]!.key, index } }));
      });
    });

    accept.addEventListener("click", () => {
      if (accepted) return;
      accepted = true;
      renderCta();
      live.textContent = acceptedLabel;
      root.dispatchEvent(new CustomEvent("vs-recommendation-accept", { bubbles: true, detail: { key: config[selected]!.key, index: selected } }));
    });
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-recommendation-card:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-recommendation-card {
    width: 100%;
    max-width: 380px;
    overflow: hidden;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .pad {
    padding: 12px;
  }
  .title {
    font-size: 14px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .body {
    min-height: 48px;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.625;
    color: var(--vs-ink-2);
  }
  .body[data-enter] {
    animation: vs-fade-in 180ms ease-out both;
  }
  .strong {
    font-weight: 500;
    color: var(--vs-ink);
  }

  /* ── alternatives drawer: a distinctly new section of the card ── */
  .drawer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 300ms var(--vs-ease-link),
      opacity 300ms var(--vs-ease-link);
  }
  .drawer[data-open] {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .drawer-clip {
    min-height: 0;
    overflow: hidden;
  }
  .drawer-inner {
    padding: 8px;
    border-top: 1px solid var(--vs-line);
    background: var(--vs-surface);
  }
  .drawer-label {
    margin: 0;
    padding: 0 6px 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--vs-ink-3);
  }
  .alt {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border: none;
    border-radius: var(--vs-radius-control);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 100ms ease-out;
  }
  .alt:hover {
    background: var(--vs-hover);
  }
  .alt:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .alt[hidden] {
    display: none;
  }
  .alt-short {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    font-size: 12.5px;
    color: var(--vs-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .alt-label {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--vs-ink-3);
  }

  /* ── meter ── */
  .meter {
    display: flex;
    align-items: flex-end;
    gap: 2px;
  }
  .bar {
    width: 4px;
    height: 10px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-line-strong);
    transition: background-color 300ms ease-out;
  }
  .bar[data-on] {
    background: var(--vs-rec-tone);
  }

  /* ── footer ── */
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    background: var(--vs-surface);
  }
  .confidence {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .confidence-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vs-ink-2);
  }
  .actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: -2px;
  }
  .actions :global(.alt-toggle) {
    padding: 0 10px;
    font-size: 12.5px;
  }
  .actions :global(.cta) {
    font-size: 12.5px;
  }

  @media (prefers-reduced-motion: reduce) {
    .drawer,
    .bar {
      transition: none;
    }
    .body[data-enter] {
      animation: none;
    }
  }
  @media (forced-colors: active) {
    .bar {
      background: GrayText;
    }
    .bar[data-on] {
      background: CanvasText;
    }
  }
</style>
```


---

# Context Cards

> Retrieved knowledge chunks with sources, entering in sequence.

- **Slug:** `context-cards`
- **Kind:** component · **Category:** Agent
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/ContextCards.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/context-cards
- **All files in one bundle:** https://viewership.ai/design/components/context-cards.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/context-cards.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/context-cards/`:

   - `ContextCards.astro` (raw: https://viewership.ai/design/raw/context-cards/ContextCards.astro.txt)

npm packages: none.

## Usage

```astro
---
import ContextCards from "../components/viewership/context-cards/ContextCards.astro";
---

<ContextCards />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import ContextCards, { type ContextChunk } from "./ContextCards.astro";

const chunks: ContextChunk[] = [
  {
    title: "Brand voice rule",
    chars: 290,
    body: "Headlines stay under 60 characters, with no exclamation marks, before a draft goes to client review.",
    source: "Brand Voice Guide.pdf",
    badge: "PDF",
    tone: "red",
  },
  {
    title: "Weekly traffic row",
    chars: 1250,
    body: "Q4 sessions by channel: organic +18%, paid search +6%, email -11%; pause ad groups under 40 clicks weekly.",
    source: "GA4 Channel Export.csv",
    badge: "CSV",
    tone: "green",
  },
];
---

<div class="stage">
  <ContextCards chunks={chunks} count={32} />
</div>

<style>
  .stage {
    display: flex;
    justify-content: center;
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `chunks` | `{ title; chars: string \| number; body; source; badge; tone?: "red" \| "green" \| "orange" \| "accent"; href? }[]` | `[]` | Retrieved chunks. A source chip with `href` is a link; otherwise a button that emits `vs-context-source`. |
| `header` | `string` | `"All chunks"` | Header label and section name. |
| `count` | `string \| number` | `chunks.length` | Count beside the header. |
| `autoplay` | `boolean` | `true` | Play entrance once in view. false shows the final state. |

## Source

### `src/components/viewership/context-cards/ContextCards.astro`

```astro
---
/**
 * ContextCards: retrieved knowledge chunks with their sources, entering in
 * sequence. A source chip is a link (with `href`) or a button that emits
 * `vs-context-source`.
 *
 * Ported from Beautiful UI `components/primitives/ContextCards.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * @example
 * <ContextCards chunks={chunks} count={32} />
 *
 * Events: `vs-context-source` (detail: { index, source, title }) when a
 * button-style source chip is activated.
 */
import type { HTMLAttributes } from "astro/types";

export type ContextChunk = {
  title: string;
  /** Size line, e.g. "290 characters". A number is formatted as "N characters". */
  chars: string | number;
  body: string;
  /** Source document name. */
  source: string;
  /** Short file-type badge, e.g. "PDF". */
  badge: string;
  tone?: "red" | "green" | "orange" | "accent";
  /** Optional link for the source chip. */
  href?: string;
};

type Props = HTMLAttributes<"section"> & {
  chunks?: ContextChunk[];
  /** Header label. */
  header?: string;
  /** Count beside the header (e.g. total chunks in the index). Defaults to chunks.length. */
  count?: string | number;
  /** Play the entrance when scrolled into view. false renders the final state. */
  autoplay?: boolean;
};

const { chunks = [], header = "All chunks", count, autoplay = true, class: className, ...rest } = Astro.props;
const chars = (c: ContextChunk["chars"]) => (typeof c === "number" ? `${c.toLocaleString("en-US")} characters` : c);
---

<section
  class:list={["vs-context-cards", className]}
  data-autoplay={autoplay ? "" : undefined}
  aria-label={header}
  {...rest}
>
  <div class="header">
    <span class="title">{header}</span>
    <span class="count">{count ?? chunks.length}</span>
  </div>

  {chunks.map((chunk, i) => {
    const Source = chunk.href ? "a" : "button";
    return (
    <article class="card" style={`--i: ${i}`} aria-label={chunk.title}>
      <div class="bar">
        <span class="chunk-title">
          <svg aria-hidden="true" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h10"></path></svg>
          <span class="truncate">{chunk.title}</span>
        </span>
        <span class="chars">{chars(chunk.chars)}</span>
      </div>
      <p class="body">{chunk.body}</p>
      <div class="foot">
        <Source
          class="source"
          href={chunk.href}
          type={chunk.href ? undefined : "button"}
          data-source-index={chunk.href ? undefined : i}
          aria-label={`Open source: ${chunk.source}`}
        >
          <span class:list={["badge", `tone-${chunk.tone ?? "accent"}`]} aria-hidden="true">{chunk.badge}</span>
          {chunk.source}
          <svg aria-hidden="true" width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M7 7h10v10"></path></svg>
        </Source>
      </div>
    </article>
    );
  })}
</section>

<script>
  function init(root: HTMLElement) {
    root.querySelectorAll<HTMLButtonElement>("button.source").forEach((button) => {
      button.addEventListener("click", () => {
        const card = button.closest("article");
        root.dispatchEvent(
          new CustomEvent("vs-context-source", {
            bubbles: true,
            detail: {
              index: Number(button.dataset.sourceIndex),
              source: button.textContent?.trim() ?? "",
              title: card?.getAttribute("aria-label") ?? "",
            },
          }),
        );
      });
    });

    // Entrance: hidden until scrolled into view, then played once.
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (!("autoplay" in root.dataset) || reduce || !("IntersectionObserver" in window)) return;
    root.dataset.enter = "wait";
    const io = new IntersectionObserver(
      (entries) => {
        if (!entries.some((e) => e.isIntersecting)) return;
        io.disconnect();
        root.dataset.enter = "play";
      },
      { threshold: 0.2 },
    );
    io.observe(root);
    document.addEventListener("astro:before-swap", () => io.disconnect(), { once: true });
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-context-cards:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-context-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 380px;
  }

  .header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
  }
  .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vs-ink);
  }
  .count {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-hairline);
    font-size: 11.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--vs-ink-2);
  }

  .card {
    overflow: hidden;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--vs-line);
  }
  .chunk-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .chunk-title svg {
    flex-shrink: 0;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chars {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--vs-ink-3);
  }
  .body {
    margin: 0;
    padding: 8px 12px 4px;
    font-size: 12.5px;
    line-height: 1.625;
    color: var(--vs-ink-2);
  }
  .foot {
    padding: 0 12px 12px;
  }

  .source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    border: none;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-btn);
    color: var(--vs-ink-2);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition:
      opacity 300ms var(--vs-ease-out),
      transform 300ms var(--vs-ease-out),
      background-color 300ms var(--vs-ease-out);
  }
  .source:hover {
    background: var(--vs-hover);
  }
  .source:focus-visible {
    outline: none;
    box-shadow: var(--vs-shadow-btn), var(--vs-focus-ring);
  }
  .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    font-size: 7px;
    font-weight: 700;
    color: var(--vs-surface);
  }
  .tone-red {
    background: var(--vs-red);
  }
  .tone-green {
    background: var(--vs-green);
  }
  .tone-orange {
    background: var(--vs-orange);
  }
  .tone-accent {
    background: var(--vs-accent);
  }

  /* entrance: only once the script has taken over (no-JS shows the final state) */
  .vs-context-cards[data-enter="wait"] :is(.header, .card, .source) {
    opacity: 0;
  }
  .vs-context-cards[data-enter="play"] .header {
    animation: vs-fade-in 400ms ease-out both;
  }
  .vs-context-cards[data-enter="play"] .card {
    animation: vs-fade-up 400ms var(--vs-ease-out) calc(var(--i) * 100ms) both;
  }
  .vs-context-cards[data-enter="play"] .source {
    animation: vs-pop-in 300ms var(--vs-ease-out) calc(700ms + var(--i) * 80ms) both;
  }

  @media (prefers-reduced-motion: reduce) {
    .vs-context-cards[data-enter] :is(.header, .card, .source) {
      opacity: 1;
      animation: none;
    }
  }
</style>
```


---

# Diff Table

> AI-proposed table edits you include or skip, then apply.

- **Slug:** `diff-table`
- **Kind:** component · **Category:** Data
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/DiffTable.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/diff-table
- **All files in one bundle:** https://viewership.ai/design/components/diff-table.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/diff-table.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/diff-table/`:

   - `DiffTable.astro` (raw: https://viewership.ai/design/raw/diff-table/DiffTable.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)

npm packages: none.

## Usage

```astro
---
import DiffTable from "../components/viewership/diff-table/DiffTable.astro";
---

<DiffTable />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import DiffTable from "./DiffTable.astro";
import type { DiffColumn, DiffRow } from "./DiffTable.astro";

const columns: DiffColumn[] = [
  { key: "asset", label: "Asset", kind: "title" },
  { key: "channel", label: "Channel", kind: "tag" },
  { key: "owner", label: "Owner" },
];

const rows: DiffRow[] = [
  { key: "faq", cells: { asset: "Old FAQ Post", channel: "Blog", owner: "dana-w" }, change: "remove" },
  { key: "recap", cells: { asset: "Recap Thread", channel: "Social", owner: "marcus-t" }, change: "remove" },
  { key: "trail", cells: { asset: "Trail Guide", channel: "Blog", owner: "priya-s" } },
  { key: "care", cells: { asset: "Gear Care Email", channel: "Email", owner: "dana-w" }, change: "add" },
];
---

<div class="stage">
  <DiffTable
    columns={columns}
    rows={rows}
    tagTones={{ Blog: "accent", Social: "neutral", Email: "green" }}
    labels={{ title: "Proposed content cleanup" }}
  />
</div>

<style>
  .stage {
    display: flex;
    width: 100%;
    justify-content: center;
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `columns` | `{ key: string; label: string; width?: string; kind?: "title" \| "tag" \| "text" }[]` |  | Column order and headers. The first column names the row. |
| `rows` | `{ key: string; cells: Record<string, string>; change?: "remove" \| "add" }[]` |  | Table data. Rows with `change` are proposed edits. |
| `tagTones` | `Record<string, "accent" \| "neutral" \| "green" \| "orange" \| "red">` | `{}` | Dot color per tag value. |
| `labels` | `Partial<DiffTableLabels>` |  | Text overrides: title, hint, removal(s), addition(s), apply, applied, includeRemove, includeAdd, removedRow, addedRow. |
| `autoplay` | `boolean` | `true` | Play when scrolled into view. Reduced motion and no-JS show the final diff. |
| `loop` | `boolean` | `false` | Replay after a 4s hold until interaction. |
| `vs-diff-toggle` | `CustomEvent<{ key: string; included: boolean }>` |  | Fires when a change is included or skipped. |
| `vs-diff-apply` | `CustomEvent<{ removed: string[]; added: string[]; skipped: string[] }>` |  | Fires on Apply with row keys by kind. The table only shows a confirmation. |

## Source

### `src/components/viewership/diff-table/DiffTable.astro`

```astro
---
/**
 * DiffTable: AI-proposed edits sweeping through tabular data.
 *
 * Ported from Beautiful UI `components/primitives/DiffTable.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * The proposed edit plays once when the table scrolls into view and rests on
 * the completed diff: removals turn red and strike through, then added rows
 * grow in with include checkboxes and a summary footer. Clicking a changed
 * row toggles it. "Apply" reports the included edits; the table itself
 * changes nothing. Without JS or with reduced motion, the final diff renders.
 *
 * Events (bubbling, on the root):
 *   vs-diff-toggle  detail: { key, included }
 *   vs-diff-apply   detail: { removed: string[], added: string[], skipped: string[] }
 *
 * @example
 * <DiffTable columns={[{ key: "asset", label: "Asset", kind: "title" }]} rows={[{ key: "a", cells: { asset: "Gear Guide" }, change: "add" }]} />
 */
import type { HTMLAttributes } from "astro/types";
import Button from "../button/Button.astro";

type Tone = "accent" | "neutral" | "green" | "orange" | "red";

export interface DiffColumn {
  key: string;
  label: string;
  /** CSS width for the column, e.g. "34%". */
  width?: string;
  /** "title" = strong first column, "tag" = dot pill, "text" = muted text (default). */
  kind?: "title" | "tag" | "text";
}

export interface DiffRow {
  key: string;
  cells: Record<string, string>;
  /** The proposed edit for this row, if any. */
  change?: "remove" | "add";
}

export interface DiffTableLabels {
  title: string;
  hint: string;
  removal: string;
  removals: string;
  addition: string;
  additions: string;
  /** {n} is replaced. */
  apply: string;
  applyPlural: string;
  applied: string;
  appliedPlural: string;
  /** Checkbox names; {name} is the row's first cell. */
  includeRemove: string;
  includeAdd: string;
  /** Screen-reader suffix on changed rows. */
  removedRow: string;
  addedRow: string;
}

type Props = HTMLAttributes<"div"> & {
  columns: DiffColumn[];
  rows: DiffRow[];
  /** Dot color per tag value (for "tag" columns). */
  tagTones?: Record<string, Tone>;
  labels?: Partial<DiffTableLabels>;
  /** Play the sweep when scrolled into view. */
  autoplay?: boolean;
  /** Replay after a hold, until someone interacts. */
  loop?: boolean;
};

const { columns = [], rows = [], tagTones = {}, labels, autoplay = true, loop = false, class: className, ...rest } = Astro.props;

const l: DiffTableLabels = {
  title: "Proposed changes",
  hint: "Click changed rows to toggle",
  removal: "removal",
  removals: "removals",
  addition: "addition",
  additions: "additions",
  apply: "Apply {n} change",
  applyPlural: "Apply {n} changes",
  applied: "{n} edit applied",
  appliedPlural: "{n} edits applied",
  includeRemove: "Include: remove {name}",
  includeAdd: "Include: add {name}",
  removedRow: "proposed removal",
  addedRow: "proposed addition",
  ...labels,
};

const uid = `vs-diff-${Math.random().toString(36).slice(2, 8)}`;
const TONE: Record<Tone, string> = {
  accent: "var(--vs-accent)",
  neutral: "var(--vs-ink-3)",
  green: "var(--vs-green)",
  orange: "var(--vs-orange)",
  red: "var(--vs-red)",
};
const DEFAULT_WIDTHS = ["34%", "30%", "36%"];
const removals = rows.filter((r) => r.change === "remove").length;
const additions = rows.filter((r) => r.change === "add").length;
const total = removals + additions;
const plural = (n: number, one: string, many: string) => (n === 1 ? one : many).replace("{n}", String(n));
const summary = `${removals} ${removals === 1 ? l.removal : l.removals} · ${additions} ${additions === 1 ? l.addition : l.additions}`;
const lastCol = columns.length - 1;
const checkPath = '<path d="M20 6L9 17l-5-5" />';
---

<div
  class:list={["vs-diff-table", className]}
  data-tinted
  data-settled
  data-autoplay={autoplay ? "" : undefined}
  data-loop={loop ? "" : undefined}
  data-labels={JSON.stringify({
    removal: l.removal,
    removals: l.removals,
    addition: l.addition,
    additions: l.additions,
    apply: l.apply,
    applyPlural: l.applyPlural,
    applied: l.applied,
    appliedPlural: l.appliedPlural,
  })}
  {...rest}
>
  <div class="card">
    <div class="bar">
      <span class="title" id={`${uid}-title`}>{l.title}</span>
      <span class="hint">{l.hint}</span>
    </div>

    <table class="dt-table" aria-labelledby={`${uid}-title`}>
      <colgroup>
        {columns.map((c, i) => <col style={`width: ${c.width ?? DEFAULT_WIDTHS[i] ?? "auto"}`} />)}
      </colgroup>
      <thead>
        <tr>
          {columns.map((c) => <th scope="col" class="th">{c.label}</th>)}
        </tr>
      </thead>
      <tbody>
        {rows.map((row) => {
          const name = row.cells[columns[0]?.key ?? ""] ?? row.key;
          return (
            <tr class="row" data-row={row.key} data-change={row.change}>
              {columns.map((c, ci) => {
                const value = row.cells[c.key] ?? "";
                const kind = c.kind ?? (ci === 0 ? "title" : "text");
                const content = (
                  <div class="pad">
                    {kind === "tag" ? (
                      <span class="tag">
                        <span class="tag-dot" style={`background: ${TONE[tagTones[value] ?? "neutral"]}`}></span>
                        <span class="tag-label">{value}</span>
                      </span>
                    ) : ci === lastCol && row.change ? (
                      <span class="end">
                        <span class="truncate">{value}</span>
                        <label class="mark-wrap">
                          <input
                            class="native"
                            type="checkbox"
                            checked
                            aria-label={(row.change === "remove" ? l.includeRemove : l.includeAdd).replace("{name}", name)}
                            data-include={row.key}
                          />
                          <span class:list={["mark", `mark--${row.change}`]} aria-hidden="true">
                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" set:html={checkPath} />
                          </span>
                        </label>
                      </span>
                    ) : (
                      <span class="truncate">
                        {value}
                        {ci === 0 && row.change && <span class="vh">, {row.change === "remove" ? l.removedRow : l.addedRow}</span>}
                      </span>
                    )}
                  </div>
                );
                return (
                  <td class:list={["cell", `cell--${kind}`, ci === lastCol && "cell--last"]}>
                    {row.change === "add" ? (
                      <div class="dt-grow">
                        <div class="grow-clip">{content}</div>
                      </div>
                    ) : (
                      content
                    )}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>

    <div class="footer">
      <div class="pending" data-pending>
        <span class="summary" aria-live="polite" data-summary>{summary}</span>
        <Button variant="accent" size="sm" class="apply" disabled={total === 0} data-apply>
          {plural(total, l.apply, l.applyPlural)}
        </Button>
      </div>
      <span class="applied" role="status" tabindex="-1" hidden data-applied>
        <span class="applied-check" aria-hidden="true">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" set:html={checkPath} />
        </span>
        <span data-applied-text></span>
      </span>
    </div>
  </div>
</div>

<script>
  const STAGE_DELAYS = [180, 260];
  const LOOP_HOLD = 4000;

  interface Labels {
    removal: string;
    removals: string;
    addition: string;
    additions: string;
    apply: string;
    applyPlural: string;
    applied: string;
    appliedPlural: string;
  }

  function init(root: HTMLElement) {
    const l = JSON.parse(root.dataset.labels || "{}") as Labels;
    const rows = [...root.querySelectorAll<HTMLTableRowElement>("tr[data-change]")];
    const boxes = [...root.querySelectorAll<HTMLInputElement>("[data-include]")];
    const summary = root.querySelector<HTMLElement>("[data-summary]")!;
    const apply = root.querySelector<HTMLButtonElement>("[data-apply]")!;
    const pending = root.querySelector<HTMLElement>("[data-pending]")!;
    const applied = root.querySelector<HTMLElement>("[data-applied]")!;
    const appliedText = root.querySelector<HTMLElement>("[data-applied-text]")!;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const loop = root.hasAttribute("data-loop");

    let stage = 2;
    let accepted = false;
    let touched = false;
    let visible = false;
    let timer: number | undefined;

    const plural = (n: number, one: string, many: string) => (n === 1 ? one : many).replace("{n}", String(n));
    const changeOf = (box: HTMLInputElement) => box.closest<HTMLElement>("tr")?.dataset.change;
    const counts = () => {
      const on = boxes.filter((b) => b.checked);
      return {
        removals: on.filter((b) => changeOf(b) === "remove").length,
        additions: on.filter((b) => changeOf(b) === "add").length,
      };
    };

    const renderSummary = () => {
      const { removals, additions } = counts();
      const total = removals + additions;
      summary.textContent = `${removals} ${removals === 1 ? l.removal : l.removals} · ${additions} ${additions === 1 ? l.addition : l.additions}`;
      apply.textContent = plural(total, l.apply, l.applyPlural);
      apply.disabled = total === 0;
    };

    const setStage = (next: number) => {
      stage = next;
      root.toggleAttribute("data-tinted", stage >= 1);
      root.toggleAttribute("data-settled", stage >= 2);
      // Changed rows are only operable once the diff has settled.
      boxes.forEach((b) => (b.disabled = stage < 2 || accepted));
    };

    const toggle = (box: HTMLInputElement) => {
      touched = true;
      renderSummary();
      root.dispatchEvent(
        new CustomEvent("vs-diff-toggle", { bubbles: true, detail: { key: box.dataset.include, included: box.checked } }),
      );
    };

    boxes.forEach((box) => box.addEventListener("change", () => toggle(box)));

    // The whole changed row is a pointer target for its checkbox.
    rows.forEach((row) => {
      const box = row.querySelector<HTMLInputElement>("[data-include]");
      if (!box) return;
      row.addEventListener("click", (event) => {
        if (stage < 2 || accepted || (event.target as Element).closest("label, input")) return;
        box.checked = !box.checked;
        toggle(box);
      });
    });

    apply.addEventListener("click", () => {
      if (accepted) return;
      accepted = true;
      touched = true;
      window.clearTimeout(timer);
      const { removals, additions } = counts();
      appliedText.textContent = plural(removals + additions, l.applied, l.appliedPlural);
      pending.hidden = true;
      applied.hidden = false;
      root.setAttribute("data-accepted", "");
      setStage(2);
      applied.focus();
      const key = (b: HTMLInputElement) => b.dataset.include ?? "";
      root.dispatchEvent(
        new CustomEvent("vs-diff-apply", {
          bubbles: true,
          detail: {
            removed: boxes.filter((b) => b.checked && changeOf(b) === "remove").map(key),
            added: boxes.filter((b) => b.checked && changeOf(b) === "add").map(key),
            skipped: boxes.filter((b) => !b.checked).map(key),
          },
        }),
      );
    });

    const scheduleLoop = () => {
      window.clearTimeout(timer);
      if (!loop || touched || accepted || !visible || stage < 2) return;
      timer = window.setTimeout(() => {
        if (root.matches(":hover") || root.contains(document.activeElement)) return scheduleLoop();
        play();
      }, LOOP_HOLD);
    };

    const play = () => {
      window.clearTimeout(timer);
      boxes.forEach((b) => (b.checked = true));
      renderSummary();
      setStage(0);
      let i = 0;
      const step = () => {
        setStage(stage + 1);
        i += 1;
        if (i < STAGE_DELAYS.length) timer = window.setTimeout(step, STAGE_DELAYS[i]);
        else scheduleLoop();
      };
      timer = window.setTimeout(step, STAGE_DELAYS[0]);
    };

    renderSummary();
    setStage(2);
    if (reduce || !root.hasAttribute("data-autoplay")) return;

    // Hold the plain table until it is seen, then sweep the edit through it.
    setStage(0);
    let started = false;
    const io = new IntersectionObserver(
      ([entry]) => {
        if (!root.isConnected) return teardown();
        visible = Boolean(entry?.isIntersecting);
        if (!visible) {
          if (stage >= 2) window.clearTimeout(timer);
          return;
        }
        if (!started) {
          started = true;
          play();
        } else scheduleLoop();
      },
      { threshold: 0.3 },
    );
    io.observe(root);

    function teardown() {
      window.clearTimeout(timer);
      io.disconnect();
    }
    document.addEventListener("astro:before-swap", teardown, { once: true });
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-diff-table:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-diff-table {
    width: 100%;
    max-width: 380px;
  }
  .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .card {
    position: relative;
    overflow: hidden;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--vs-line);
  }
  .title {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .hint {
    font-size: 11px;
    color: var(--vs-ink-3);
    visibility: hidden;
  }
  [data-settled]:not([data-accepted]) .hint {
    visibility: visible;
  }

  /* ── table ── */
  .dt-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: left;
  }
  .th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--vs-line);
    font-size: 12px;
    font-weight: 500;
    color: var(--vs-ink-3);
  }
  .row {
    border-bottom: 1px solid var(--vs-line);
    transition:
      background-color 150ms ease-out,
      filter 150ms ease-out;
  }
  .row:last-child {
    border-bottom: 0;
  }
  .cell {
    padding: 0;
    vertical-align: middle;
  }
  .pad {
    padding: 10px 12px;
  }
  .truncate {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cell--title {
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--vs-ink);
    transition: color 200ms ease-out;
  }
  .cell--text {
    font-size: 12.5px;
    color: var(--vs-ink-2);
    transition: color 200ms ease-out;
  }
  .tag {
    display: inline-flex;
    height: 22px;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-hairline);
    font-size: 11.5px;
    font-weight: 500;
    transition: opacity 200ms ease-out;
  }
  .tag-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
  }
  .tag-label {
    color: var(--vs-ink-2);
    white-space: nowrap;
  }
  .end {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  /* removals: red tint + strike, once the sweep reaches them */
  [data-tinted] .row[data-change="remove"]:has(.native:checked) {
    background: var(--vs-red-tint);
  }
  [data-tinted] .row[data-change="remove"]:has(.native:checked) :is(.cell--title, .cell--text) {
    color: var(--vs-red);
  }
  [data-tinted] .row[data-change="remove"]:has(.native:checked) .tag {
    opacity: 0.55;
  }
  [data-tinted] .row[data-change="remove"]:has(.native:checked) .cell--last .truncate {
    text-decoration-line: line-through;
    text-decoration-color: color-mix(in srgb, var(--vs-red) 50%, transparent);
  }

  /* additions: grow in once settled; green while included */
  .row[data-change="add"] .tag {
    background: var(--vs-surface);
  }
  .row[data-change="add"] :is(.cell--title, .cell--text) {
    color: var(--vs-ink-3);
  }
  .row[data-change="add"]:has(.native:checked) {
    background: var(--vs-green-tint);
  }
  .row[data-change="add"]:has(.native:checked) :is(.cell--title, .cell--text) {
    color: var(--vs-green);
  }
  .dt-grow {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition:
      grid-template-rows 200ms var(--vs-ease-out),
      opacity 200ms var(--vs-ease-out),
      visibility 0s 200ms;
  }
  [data-settled] .dt-grow {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition:
      grid-template-rows 200ms var(--vs-ease-out),
      opacity 200ms var(--vs-ease-out);
  }
  .grow-clip {
    min-height: 0;
    overflow: hidden;
  }

  /* changed rows are the control once the diff settles */
  [data-settled]:not([data-accepted]) .row[data-change] {
    cursor: pointer;
  }
  [data-settled]:not([data-accepted]) .row[data-change]:hover {
    filter: brightness(0.985);
  }

  /* ── include mark (a native checkbox) ── */
  .mark-wrap {
    position: relative;
    display: flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin: -3px;
    cursor: pointer;
  }
  .row[data-change="remove"] .mark-wrap {
    visibility: hidden;
  }
  [data-settled] .row[data-change="remove"] .mark-wrap {
    visibility: visible;
  }
  .native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }
  .native:disabled {
    cursor: default;
  }
  .mark {
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-hairline);
    color: transparent;
    transform: scale(0.92);
    transition:
      background-color 150ms ease-out,
      color 150ms ease-out,
      transform 150ms ease-out;
  }
  .native:checked + .mark {
    color: var(--vs-surface);
    box-shadow: none;
    transform: scale(1);
  }
  .native:checked + .mark--remove {
    background: var(--vs-red);
  }
  .native:checked + .mark--add {
    background: var(--vs-green);
  }
  .native:focus-visible + .mark {
    box-shadow: var(--vs-focus-ring);
  }

  /* ── footer ── */
  .footer {
    display: none;
    min-height: 44px;
    align-items: center;
    padding: 10px;
    border-top: 1px solid var(--vs-line);
    animation: vs-fade-up 180ms var(--vs-ease-out) both;
  }
  [data-settled] .footer {
    display: flex;
  }
  .pending {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
  .pending[hidden] {
    display: none;
  }
  .summary {
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--vs-ink-3);
  }
  .pending :global(.apply) {
    font-size: 12px;
  }
  .applied {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-green-tint);
    color: var(--vs-green);
    font-size: 12.5px;
    font-weight: 500;
    outline: none;
    animation: vs-pop-in 180ms var(--vs-ease-out) both;
  }
  .applied[hidden] {
    display: none;
  }
  .applied-check {
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vs-green);
    color: var(--vs-surface);
  }

  @media (prefers-reduced-motion: reduce) {
    .row,
    .cell--title,
    .cell--text,
    .tag,
    .dt-grow,
    [data-settled] .dt-grow,
    .mark {
      transition: none;
    }
    .footer,
    .applied {
      animation: none;
    }
  }
  @media (forced-colors: active) {
    .native:checked + .mark {
      background: Highlight;
      color: HighlightText;
    }
    [data-tinted] .row[data-change="remove"]:has(.native:checked) .cell--title {
      text-decoration-line: line-through;
    }
  }
</style>
```


---

# Records Table

> CRM-style AI spreadsheet with tags, sorting and configurable AI columns.

- **Slug:** `records-table`
- **Kind:** component · **Category:** Data
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/RecordsTable.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/records-table
- **All files in one bundle:** https://viewership.ai/design/components/records-table.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/records-table.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/records-table/`:

   - `RecordsTable.astro` (raw: https://viewership.ai/design/raw/records-table/RecordsTable.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `glide-menu`: `GlideMenu.astro`, `glide-menu.ts` (docs: https://viewership.ai/design/components/glide-menu.md)
   - `switch`: `Switch.astro` (docs: https://viewership.ai/design/components/switch.md)

npm packages: none.

## Usage

```astro
---
import RecordsTable from "../components/viewership/records-table/RecordsTable.astro";
---

<RecordsTable />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import RecordsTable, { type RecordRow } from "./RecordsTable.astro";

/* Sources that AI engines cite for Northwind Outdoor. All names are fictional. */
const accounts: RecordRow[] = [
  { id: "campinggear", name: "r/CampingGear · Reddit", tags: ["Reddit", "Cited"], last: "9 days ago", lastDays: 9, strength: "strong", website: "reddit.test", ai: "Ridgecrest, Summit & Pine" },
  { id: "trailnotes", name: "Trail Notes Weekly · Leeds", tags: ["Reddit", "YouTube", "Blog"], last: "3 weeks ago", lastDays: 21, strength: "strong", website: "trailnotes.test", ai: "Alder Peak, Two Rivers Co" },
  { id: "gearlab", name: "Gear Lab Reviews · Melbourne", tags: ["Forum", "Reviews"], last: "2 months ago", lastDays: 60, strength: "weak", website: "gearlab-reviews.test", ai: "Summit & Pine, Saltline Gear" },
  { id: "basecamp-pod", name: "Basecamp Podcast · Ghent", tags: ["Podcast", "Cited", "Seasonal"], last: "15 days ago", lastDays: 15, strength: "weak", website: "basecamp-pod.test", ai: "Two Rivers Co, Emberline" },
  { id: "outdoor-wire", name: "Outdoor Wire News · Denver", tags: ["News", "Newsletter"], last: "over 1 year ago", lastDays: 400, strength: "veryweak", website: "outdoor-wire.test", ai: "Ridgecrest, Pale Ridge" },
  { id: "packlight", name: "Packlight Shorts · Lisbon", tags: ["Shorts", "YouTube"], last: "5 months ago", lastDays: 150, strength: "veryweak", ai: "Saltline Gear, Alder Peak" },
  { id: "ul-hikers", name: "r/Ultralight · Reddit", tags: ["Reddit", "Guides", "Seasonal"], last: "No contact", strength: "none", website: "reddit.test", ai: "Pale Ridge, Emberline" },
  { id: "alpine-stay", name: "Alpine Stay Guide · Banff", tags: ["Travel", "Reviews"], last: "3 months ago", lastDays: 90, strength: "veryweak", website: "alpine-stay.test", ai: "Summit & Pine, Two Rivers Co" },
  { id: "hike-forum", name: "HikeTalk Forum · Chicago", tags: ["Forum", "Cited"], last: "over 1 year ago", lastDays: 420, strength: "veryweak", website: "hiketalk.test", ai: "Ridgecrest, Saltline Gear" },
  { id: "orchard-outfit", name: "Orchard Outfitters · Hobart", tags: ["Retailer", "Blog", "Newsletter"], last: "2 months ago", lastDays: 62, strength: "weak", website: "orchard-outfit.test", ai: "Alder Peak, Pale Ridge" },
  { id: "kiln-trails", name: "Kiln Trails Channel · Kyoto", tags: ["Reddit", "Reviews", "Seasonal"], last: "11 days ago", lastDays: 11, strength: "strong", website: "kiln-trails.test", ai: "Emberline, Summit & Pine" },
  { id: "saltgrass", name: "Saltgrass Daily · Oslo", tags: ["News", "YouTube"], last: "about 1 month ago", lastDays: 33, strength: "weak", website: "saltgrass.test", ai: "Two Rivers Co, Ridgecrest" },
  { id: "wren", name: "Wren & Wild Blog · Edinburgh", tags: ["Reddit", "Podcast"], last: "4 days ago", lastDays: 4, strength: "strong", website: "wren-wild.test", ai: "Saltline Gear, Pale Ridge" },
  { id: "dune", name: "Dune Road Surf Talk · San Diego", tags: ["Shorts", "Seasonal"], last: "8 months ago", lastDays: 240, strength: "weak", website: "dune-road.test", ai: "Alder Peak, Emberline" },
  { id: "foundry", name: "Foundry Expo Hall · Pittsburgh", tags: ["Events", "Cited", "Reviews"], last: "about 2 years ago", lastDays: 730, strength: "none", website: "foundry-expo.test", ai: "Summit & Pine, Ridgecrest" },
  { id: "parlour", name: "Parlour Nine Vlog · Montréal", tags: ["Reddit", "YouTube"], last: "about 1 month ago", lastDays: 30, strength: "veryweak", ai: "Two Rivers Co, Saltline Gear" },
  { id: "greenhouse", name: "Greenhouse Goods · Copenhagen", tags: ["Retailer", "Guides"], last: "15 days ago", lastDays: 15, strength: "weak", website: "greenhouse-goods.test", ai: "Pale Ridge, Alder Peak" },
  { id: "low-tide", name: "Low Tide Paddle Club · Halifax", tags: ["Forum", "Blog"], last: "9 days ago", lastDays: 9, strength: "strong", website: "low-tide.test", ai: "Emberline, Two Rivers Co" },
  { id: "sundial", name: "Sundial Books & Maps · Seville", tags: ["Reddit", "Retailer"], last: "over 2 years ago", lastDays: 800, strength: "none", website: "sundial-maps.test", ai: "Ridgecrest, Summit & Pine" },
  { id: "meridian", name: "Meridian Media · Singapore", tags: ["News", "Newsletter", "Cited"], last: "about 1 month ago", lastDays: 35, strength: "veryweak", website: "meridian-media.test", ai: "Saltline Gear, Emberline" },
  { id: "thistle", name: "Thistle Trail Guides · Dublin", tags: ["Reddit", "Guides"], last: "No contact", strength: "none", ai: "Alder Peak, Pale Ridge" },
  { id: "clay", name: "Clay Ridge Climbing · Naples", tags: ["Forum", "YouTube"], last: "almost 2 years ago", lastDays: 700, strength: "veryweak", website: "clay-ridge.test", ai: "Two Rivers Co, Summit & Pine" },
  { id: "cobalt", name: "Cobalt Climbing Blog · Boulder", tags: ["Shorts", "Newsletter"], last: "6 days ago", lastDays: 6, strength: "strong", website: "cobalt-climbing.test", ai: "Ridgecrest, Emberline" },
  { id: "verandah", name: "Verandah Travel Notes · Galle", tags: ["Travel", "Seasonal", "Reviews"], last: "18 days ago", lastDays: 18, strength: "weak", website: "verandah-travel.test", ai: "Pale Ridge, Saltline Gear" },
  { id: "loom", name: "Loom & Ledge · Glasgow", tags: ["Reddit", "Events", "Blog"], last: "2 days ago", lastDays: 2, strength: "strong", website: "loom-ledge.test", ai: "Summit & Pine, Alder Peak" },
  { id: "pressroom", name: "The Gear Pressroom · Wellington", tags: ["Reddit", "YouTube", "Cited"], last: "5 weeks ago", lastDays: 36, strength: "weak", website: "gear-pressroom.test", ai: "Two Rivers Co, Ridgecrest" },
  { id: "alder", name: "Alder Camp Forum · Tallinn", tags: ["Forum", "Reviews"], last: "No contact", strength: "none", ai: "Emberline, Pale Ridge" },
  { id: "bluebird", name: "Bluebird Bike Trails · Utrecht", tags: ["Reddit", "Blog", "Seasonal"], last: "7 days ago", lastDays: 7, strength: "strong", website: "bluebird-trails.test", ai: "Saltline Gear, Summit & Pine" },
];
---

<RecordsTable
  rows={accounts}
  caption="Cited sources"
  columns={{ company: "Source" }}
  tagColors={{
    Reddit: "red",
    Cited: "amber",
    YouTube: "orange",
    Reviews: "cyan",
    Blog: "green",
    Seasonal: "yellow",
    News: "purple",
    Newsletter: "lime",
    Forum: "magenta",
    Podcast: "pink",
    Guides: "cyan",
    Retailer: "green",
    Shorts: "orange",
    Travel: "purple",
    Events: "magenta",
  }}
  aiColumn={{ label: "Competitors cited", prompt: { before: "Find competitors cited by ", chip: "Source" } }}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rows` | `RecordRow[]` |  | { id, name, tags, last, lastDays?, strength, website?, ai? }. Omit `lastDays` for no contact. `ai` is the AI column value. |
| `caption` | `string` | `"Records"` | Hidden caption. Also names the scroll region and select-all. |
| `columns` | `{ company?, categories?, last?, strength?, links? }` |  | Header labels. |
| `columnConfig` | `Partial<Record<ColumnKey, Partial<ColumnConfig>>>` |  | Popover overrides: type, tool, toolKind, inputs, prompt. |
| `tagColors` | `Record<string, string>` |  | Tag → palette name (amber, lime, yellow, purple, orange, cyan, red, magenta, green, pink) or CSS color. |
| `strengthLabels` | `Partial<Record<Strength, string>>` |  | Strength level labels. |
| `models` | `string[]` | `["Atlas 5", "Atlas 4.2", "Atlas Mini"]` | Tool picker models. First is the default. |
| `aiColumn` | `{ label, type?, tool?, prompt? } \| null` | `{ label: "Competitors" }` | AI property added by the + menu. Cells resolve to each row's `ai`. |
| `sort` | `{ key: "name" \| "last" \| "strength"; dir?: 1 \| -1 }` | `{ key: "name", dir: 1 }` | Initial sort. |
| `fill` | `boolean` | `false` | Fill the parent card, no border or shadow. |
| `maxHeight` | `string` | `"438px"` | Scroll viewport max height. |
| `Events` | `CustomEvent` |  | vs-records-selection { ids }, vs-records-sort { key, dir }, vs-records-calculate { column, label }, vs-records-property { type }, vs-records-add-calculation. |

## Source

### `src/components/viewership/records-table/RecordsTable.astro`

```astro
---
/**
 * RecordsTable: CRM-style AI spreadsheet. Click a header to configure the
 * column and run "Go calculate". The + header adds an AI property.
 *
 * Ported from Beautiful UI `components/primitives/RecordsTable.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * - Real <table>; sortable headers expose `aria-sort`.
 * - Resize by dragging the header edge or ←/→ on the handle (Shift = bigger steps).
 * - Popovers use the top layer (Popover API), with a `position: fixed` fallback.
 * - Renders without JS (sorted by name); interaction needs the script.
 *
 * Events (bubbling, on the root):
 *   vs-records-selection   detail: { ids: string[] }
 *   vs-records-sort        detail: { key: "name" | "last" | "strength", dir: 1 | -1 }
 *   vs-records-calculate   detail: { column: ColumnKey, label: string }
 *   vs-records-property    detail: { type: string }
 *   vs-records-add-calculation
 *
 * @example
 * <RecordsTable rows={accounts} caption="Partner accounts" aiColumn={{ label: "Competing brands" }} />
 */
import type { HTMLAttributes } from "astro/types";
import GlideMenu from "../glide-menu/GlideMenu.astro";
import Switch from "../switch/Switch.astro";

export type Strength = "strong" | "weak" | "veryweak" | "none";
export type ColumnKey = "company" | "categories" | "last" | "strength" | "links" | "ai";

export interface RecordRow {
  id: string;
  name: string;
  tags: string[];
  /** Display text for the last interaction, e.g. "9 days ago" or "No contact". */
  last: string;
  /** Days since the last interaction, for sorting. Omit (or null) for no contact. */
  lastDays?: number | null;
  strength: Strength;
  /** Bare domain, e.g. "northwind.test". */
  website?: string;
  /** The value the AI column resolves to for this row. */
  ai?: string;
}

export interface RecordsPrompt {
  before: string;
  /** An @-mentioned input, rendered as a chip. */
  chip?: string;
  after?: string;
}

export interface ColumnConfig {
  label: string;
  /** Property type shown in the popover (one of the property types). */
  type: string;
  /** Tool label, e.g. a model name, "Web search" or "User input". */
  tool: string;
  toolKind: "model" | "web" | "user";
  inputs: string[];
  prompt?: RecordsPrompt;
}

export interface AiColumn {
  label: string;
  type?: string;
  tool?: string;
  prompt?: RecordsPrompt;
}

type Props = HTMLAttributes<"div"> & {
  rows: RecordRow[];
  /** Table caption (visually hidden) and scroll-region name. */
  caption?: string;
  /** Header labels. */
  columns?: Partial<Record<Exclude<ColumnKey, "ai">, string>>;
  /** Per-column popover configuration overrides. */
  columnConfig?: Partial<Record<ColumnKey, Partial<ColumnConfig>>>;
  /** Tag → palette name or CSS color. Unlisted tags get a stable color. */
  tagColors?: Record<string, string>;
  /** Labels for the four strength levels. */
  strengthLabels?: Partial<Record<Strength, string>>;
  /** Models offered in the Tool picker; the first is the default. */
  models?: string[];
  /** The AI property the + menu adds. `null` hides the + menu's effect. */
  aiColumn?: AiColumn | null;
  /** Initial sort. */
  sort?: { key: "name" | "last" | "strength"; dir?: 1 | -1 };
  /** Stretch to fill a parent card, dropping the border and shadow. */
  fill?: boolean;
  /** Max height of the scroll viewport (ignored with `fill`). */
  maxHeight?: string;
};

const {
  rows,
  caption = "Records",
  columns = {},
  columnConfig = {},
  tagColors = {},
  strengthLabels = {},
  models = ["Atlas 5", "Atlas 4.2", "Atlas Mini"],
  aiColumn = { label: "Competitors" },
  sort = { key: "name", dir: 1 },
  fill = false,
  maxHeight = "438px",
  class: className,
  style,
  ...rest
} = Astro.props;

const uid = `vs-rt-${Math.random().toString(36).slice(2, 8)}`;

/* ── labels ─────────────────────────────────────────────── */
const L = {
  company: columns.company ?? "Company",
  categories: columns.categories ?? "Categories",
  last: columns.last ?? "Last interaction",
  strength: columns.strength ?? "Connection strength",
  links: columns.links ?? "Links",
  ai: aiColumn?.label ?? "Insights",
};

const STRENGTH: Record<Strength, { label: string; color: string; rank: number }> = {
  strong: { label: strengthLabels.strong ?? "Very strong", color: "var(--vs-green)", rank: 3 },
  weak: { label: strengthLabels.weak ?? "Weak", color: "var(--vs-orange)", rank: 2 },
  veryweak: { label: strengthLabels.veryweak ?? "Very weak", color: "var(--vs-red)", rank: 1 },
  none: { label: strengthLabels.none ?? "No communication", color: "var(--vs-ink-3)", rank: 0 },
};

/* ── tag colors: one mid-lightness base hue per tag, mixed against the theme ── */
const PALETTE: Record<string, string> = {
  amber: "oklch(0.76 0.13 70)",
  lime: "oklch(0.77 0.16 122)",
  yellow: "oklch(0.80 0.15 101)",
  purple: "oklch(0.62 0.18 293)",
  orange: "oklch(0.71 0.16 48)",
  cyan: "oklch(0.72 0.10 221)",
  red: "oklch(0.64 0.19 27)",
  magenta: "oklch(0.66 0.21 323)",
  green: "oklch(0.70 0.13 162)",
  pink: "oklch(0.67 0.19 3)",
};
const paletteKeys = Object.keys(PALETTE);
const tagBase = (tag: string) => {
  const chosen = tagColors[tag];
  if (chosen) return PALETTE[chosen] ?? chosen;
  let h = 0;
  for (const ch of tag) h = (h * 31 + ch.charCodeAt(0)) >>> 0;
  return PALETTE[paletteKeys[h % paletteKeys.length]];
};

/* ── glyphs (upstream-drawn, MIT) ───────────────────────── */
const TYPE_GLYPHS: Record<string, string> = {
  Text: '<path d="M4 6h16M4 12h10M4 18h7" />',
  File: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" />',
  Collection: '<ellipse cx="12" cy="5" rx="8" ry="3" /><path d="M4 5v14c0 1.66 3.58 3 8 3s8-1.34 8-3V5M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3" />',
  "Single select": '<circle cx="12" cy="12" r="9" /><path d="m8.5 12 2.4 2.4 4.6-4.9" />',
  "Multi select": '<path d="M11 6h9M11 12h9M11 18h9" /><path d="M4 6l1.5 1.5L8 5M4 12l1.5 1.5L8 11M4 18l1.5 1.5L8 17" />',
  URL: '<path d="M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1" /><path d="M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1" />',
  Reference: '<path d="M7 17 17 7M9 7h8v8" />',
  JSON: '<path d="M8 4c-2 0-2 2-2 3s.5 3-2 3c2.5 0 2 2 2 3s0 3 2 3" /><path d="M16 4c2 0 2 2 2 3s-.5 3 2 3c-2.5 0-2 2-2 3s0 3-2 3" />',
  "File splitter": '<rect x="8" y="8" width="12" height="12" rx="2" /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" />',
  Date: '<rect x="3" y="5" width="18" height="16" rx="2.5" /><path d="M8 3v4M16 3v4M3 10h18" />',
};
const TOOL_GLYPHS = {
  model: '<path d="M12 3l1.7 5.1a2 2 0 0 0 1.2 1.2L20 11l-5.1 1.7a2 2 0 0 0-1.2 1.2L12 19l-1.7-5.1a2 2 0 0 0-1.2-1.2L4 11l5.1-1.7a2 2 0 0 0 1.2-1.2z" />',
  web: '<circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a13.5 13.5 0 0 1 3.5 9 13.5 13.5 0 0 1-3.5 9 13.5 13.5 0 0 1-3.5-9A13.5 13.5 0 0 1 12 3z" />',
  user: '<circle cx="12" cy="8" r="4" /><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1" />',
};
const PROPERTY_TYPES = ["Text", "File", "Collection", "Single select", "Multi select", "URL", "Reference", "JSON", "File splitter"];
const svg = (inner: string, size = 14, sw = 1.8) =>
  `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
const modelSvg = () =>
  `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">${TOOL_GLYPHS.model}</svg>`;
const I = {
  check: '<path d="m5 12 4 4L19 6" />',
  chevron: '<path d="M9 6l6 6-6 6" />',
  arrowDown: '<path d="M12 5v14M5 12l7 7 7-7" />',
  plus: '<path d="M12 5v14M5 12h14" />',
  external: '<path d="M14 5h5v5M19 5l-8 8" />',
  info: '<circle cx="12" cy="12" r="9" /><path d="M12 8h.01M11 12h1v4h1" />',
  refresh: '<path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6" />',
  pin: '<path d="M12 17v5M8 3h8l-1 7 3 3H6l3-3-1-7z" />',
  gear: '<circle cx="12" cy="12" r="3" /><path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1" />',
  eyeOff: '<path d="M10.6 5.1A9.8 9.8 0 0 1 12 5c7 0 10 7 10 7a16.3 16.3 0 0 1-2.1 3M6.6 6.6A16 16 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.4-1.6M3 3l18 18" /><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />',
  compact: '<path d="M4 8h16M7 4 3 8l4 4M17 4l4 4-4 4M4 16h16" />',
  reset: '<path d="M3 12a9 9 0 1 0 3-6.7M3 4v6h6" />',
  clear: '<path d="M5 5l14 14M19 5 5 19" />',
};

/* ── per-column popover configuration ───────────────────── */
const model0 = models[0] ?? "Model";
const baseConfig: Record<ColumnKey, ColumnConfig> = {
  company: { label: L.company, type: "Text", tool: "User input", toolKind: "user", inputs: [] },
  categories: {
    label: L.categories, type: "Multi select", tool: model0, toolKind: "model", inputs: [L.company],
    prompt: { before: "Tag each ", chip: L.company, after: " with its market categories." },
  },
  last: { label: L.last, type: "Date", tool: "User input", toolKind: "user", inputs: [] },
  strength: {
    label: L.strength, type: "Single select", tool: model0, toolKind: "model", inputs: [L.last],
    prompt: { before: "Score the relationship from ", chip: L.last, after: "." },
  },
  links: {
    label: L.links, type: "URL", tool: "Web search", toolKind: "web", inputs: [L.company],
    prompt: { before: "Find the website for ", chip: L.company, after: "." },
  },
  ai: {
    label: L.ai, type: aiColumn?.type ?? "Text", tool: aiColumn?.tool ?? "Web search", toolKind: "web", inputs: [L.company],
    prompt: aiColumn?.prompt ?? { before: `Find ${L.ai.toLowerCase()} for `, chip: L.company },
  },
};
const config = Object.fromEntries(
  (Object.keys(baseConfig) as ColumnKey[]).map((k) => [k, { ...baseConfig[k], ...columnConfig[k] }]),
) as Record<ColumnKey, ColumnConfig>;
const inputOptions = [L.company, L.categories, L.last, L.strength, L.links];

/* ── initial order (server render matches the script's sort) ── */
const rank = (s: Strength) => STRENGTH[s].rank;
const lastValue = (r: RecordRow) => (r.lastDays === undefined || r.lastDays === null ? Number.POSITIVE_INFINITY : r.lastDays);
const dir = sort.dir ?? 1;
const sorted = [...rows].sort((a, b) => {
  const v =
    sort.key === "name"
      ? a.name.localeCompare(b.name)
      : sort.key === "last"
        ? lastValue(a) - lastValue(b) || a.name.localeCompare(b.name)
        : rank(a.strength) - rank(b.strength);
  return (Number.isNaN(v) ? 0 : v) * dir;
});

const avg = rows.length ? Math.round((rows.reduce((sum, r) => sum + rank(r.strength), 0) / rows.length / 3) * 100) : 0;
const avgColor = avg >= 67 ? "var(--vs-green)" : avg >= 34 ? "var(--vs-orange)" : "var(--vs-red)";
const linkCount = rows.filter((r) => r.website).length;
const ariaSort = (key: string) => (sort.key === key ? (dir === 1 ? "ascending" : "descending") : undefined);

const clientConfig = {
  uid,
  rows: rows.map((r) => ({ id: r.id, name: r.name, lastDays: lastValue(r), last: r.last, rank: rank(r.strength), ai: r.ai ?? "" })),
  sort: { key: sort.key, dir },
  columns: config,
  typeGlyphs: TYPE_GLYPHS,
  toolGlyphs: TOOL_GLYPHS,
  aiEnabled: aiColumn !== null,
};

const rootStyle = [fill ? "" : `--rt-max-h: ${maxHeight}`, typeof style === "string" ? style : ""].filter(Boolean).join("; ") || undefined;

const headers: Array<{ key: Exclude<ColumnKey, "company" | "ai">; glyph: string; sortKey?: "last" | "strength" }> = [
  { key: "categories", glyph: TYPE_GLYPHS["Multi select"] },
  { key: "last", glyph: TYPE_GLYPHS.Date, sortKey: "last" },
  { key: "strength", glyph: TYPE_GLYPHS["Single select"], sortKey: "strength" },
  { key: "links", glyph: TYPE_GLYPHS.URL },
];
---

<div class:list={["vs-records-table", { "is-fill": fill }, className]} style={rootStyle} data-uid={uid} {...rest}>
  <script type="application/json" data-vs-config set:html={JSON.stringify(clientConfig)} />

  <div class="rt-scroll" tabindex="0" role="region" aria-label={`${caption}. Scroll horizontally and vertically to view all columns and records.`}>
    <table class="rt-table">
      <caption class="rt-sr">{caption}</caption>
      <colgroup>
        <col data-col="company" style="width: 270px" />
        <col data-col="categories" style="width: 275px" />
        <col data-col="last" style="width: 190px" />
        <col data-col="strength" style="width: 210px" />
        <col data-col="links" style="width: 175px" />
        <col data-col="actions" style="width: 100px" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col" class="rt-th rt-sticky" data-col="company" aria-sort={ariaSort("name")}>
            <div class="rt-head rt-head--company">
              <label class="rt-checkbox">
                <input type="checkbox" data-select-all aria-label={`Select all ${caption.toLowerCase()}`} />
                <span class="rt-box" aria-hidden="true"><Fragment set:html={svg(I.check, 12)} /><span class="rt-dash"></span></span>
              </label>
              <button type="button" class="rt-head-btn" data-prop="company" aria-haspopup="dialog" aria-expanded="false">
                <span class="rt-trunc">{L.company}</span>
              </button>
              <button type="button" class="rt-sort" data-sort="name" aria-label={`Sort by ${L.company}`}>
                <Fragment set:html={svg(I.arrowDown, 12)} />
              </button>
            </div>
            <span class="rt-resize" role="separator" tabindex="0" aria-orientation="vertical" aria-label={`Resize ${L.company} column`} data-resize="company" data-min="180"></span>
          </th>
          {
            headers.map((h) => (
              <th scope="col" class="rt-th" data-col={h.key} aria-sort={h.sortKey ? ariaSort(h.sortKey) : undefined}>
                <div class="rt-head">
                  <button type="button" class="rt-head-btn" data-prop={h.key} aria-haspopup="dialog" aria-expanded="false">
                    <span class="rt-head-icon" set:html={svg(h.glyph, 15)} />
                    <span class="rt-trunc">{L[h.key]}</span>
                  </button>
                  {h.sortKey && (
                    <button type="button" class="rt-sort" data-sort={h.sortKey} aria-label={`Sort by ${L[h.key]}`}>
                      <Fragment set:html={svg(I.arrowDown, 12)} />
                    </button>
                  )}
                </div>
                <span class="rt-resize" role="separator" tabindex="0" aria-orientation="vertical" aria-label={`Resize ${L[h.key]} column`} data-resize={h.key} data-min="120"></span>
              </th>
            ))
          }
          <th scope="col" class="rt-th" data-col="ai" hidden>
            <div class="rt-head">
              <button type="button" class="rt-head-btn" data-prop="ai" aria-haspopup="dialog" aria-expanded="false">
                <span class="rt-head-icon" data-ai-icon set:html={svg(TYPE_GLYPHS[config.ai.type] ?? TYPE_GLYPHS.Text, 15)} />
                <span class="rt-trunc">{L.ai}</span>
              </button>
            </div>
            <span class="rt-resize" role="separator" tabindex="0" aria-orientation="vertical" aria-label={`Resize ${L.ai} column`} data-resize="ai" data-min="120"></span>
          </th>
          <th scope="col" class="rt-th" data-col="actions">
            <span class="rt-sr">Table actions</span>
            <div class="rt-actions">
              <button type="button" class="rt-icon-btn" data-open-add aria-label="New property" aria-haspopup="menu" aria-expanded="false" data-recpop>
                <Fragment set:html={svg(I.plus, 15, 2)} />
              </button>
              <button type="button" class="rt-icon-btn rt-icon-btn--quiet" data-open-options aria-label="Table options" aria-haspopup="menu" aria-expanded="false" data-recpop>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="19" cy="12" r="1.6" /></svg>
              </button>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        {
          sorted.map((row, index) => {
            const s = STRENGTH[row.strength];
            return (
              <tr class="rt-row" data-id={row.id}>
                <td class="rt-cell rt-sticky rt-company" data-col="company">
                  <div class="rt-company-inner">
                  <span class="rt-gutter">
                    <span class="rt-rownum" aria-hidden="true">{index + 1}</span>
                    <label class="rt-checkbox">
                      <input type="checkbox" data-select={row.id} aria-label={`Select ${row.name}`} />
                      <span class="rt-box" aria-hidden="true"><Fragment set:html={svg(I.check, 12)} /><span class="rt-dash"></span></span>
                    </label>
                  </span>
                  <span class="rt-mark" aria-hidden="true">{row.name.slice(0, 1).toUpperCase()}</span>
                  {row.website ? (
                    <a class="rt-name has-link" href={`https://${row.website}`} title={row.name}>{row.name}</a>
                  ) : (
                    <span class="rt-name" title={row.name}>{row.name}</span>
                  )}
                  </div>
                </td>
                <td class="rt-cell" data-col="categories">
                  <span class="rt-val">
                    <span class="rt-tags" title={row.tags.join(", ")}>
                      {row.tags.map((tag) => (
                        <span class="rt-tag" style={`--rt-tag: ${tagBase(tag)}`}>{tag}</span>
                      ))}
                      <span class="rt-more" hidden aria-hidden="true"></span>
                    </span>
                  </span>
                </td>
                <td class:list={["rt-cell", { "rt-muted": row.lastDays === undefined || row.lastDays === null }]} data-col="last">
                  <span class="rt-val">{row.last}</span>
                </td>
                <td class="rt-cell" data-col="strength">
                  <span class="rt-val rt-strength">
                    <span class="rt-dot" style={`background: ${s.color}`} aria-hidden="true"></span>
                    {s.label}
                  </span>
                </td>
                <td class="rt-cell" data-col="links">
                  <span class="rt-val">
                    {row.website ? (
                      <a class="rt-link" href={`https://${row.website}`} title={row.website} target="_blank" rel="noreferrer">
                        <span class="rt-link-label">{row.website}</span>
                        <Fragment set:html={svg(I.external, 12)} />
                        <span class="rt-sr">(opens in a new tab)</span>
                      </a>
                    ) : (
                      <span class="rt-muted" aria-label="No link">–</span>
                    )}
                  </span>
                </td>
                <td class="rt-cell" data-col="ai" hidden>
                  <span class="rt-val"><span class="rt-muted">–</span></span>
                </td>
                <td class="rt-cell" data-col="actions"></td>
              </tr>
            );
          })
        }
      </tbody>
      <tfoot>
        <tr>
          <td class="rt-cell rt-sticky" data-col="company">
            <span class="rt-foot rt-foot-label"><span class="rt-foot-num">{rows.length}</span> count</span>
          </td>
          <td class="rt-cell" data-col="categories">
            <button type="button" class="rt-add-calc" data-add-calc><Fragment set:html={svg(I.plus, 15)} />Add calculation</button>
          </td>
          <td class="rt-cell rt-muted" data-col="last"><span class="rt-foot">–</span></td>
          <td class="rt-cell" data-col="strength">
            <span class="rt-foot rt-average"><span class="rt-dot" style={`background: ${avgColor}`} aria-hidden="true"></span>{avg}% average</span>
          </td>
          <td class="rt-cell" data-col="links"><span class="rt-foot rt-muted">{linkCount} links</span></td>
          <td class="rt-cell rt-muted" data-col="ai" hidden><span class="rt-foot" data-ai-foot>–</span></td>
          <td class="rt-cell" data-col="actions"></td>
        </tr>
      </tfoot>
    </table>
  </div>

  <p class="rt-sr" aria-live="polite" data-live></p>

  {/* ── property configuration popover ─────────────────── */}
  <div class="rt-pop rt-prop" id={`${uid}-prop`} popover="manual" role="dialog" aria-labelledby={`${uid}-prop-title`} data-recpop data-pop="prop">
    <div class="rt-prop-title" id={`${uid}-prop-title`} data-prop-title>{L.company}</div>

    <div class="rt-config-row">
      <span class="rt-config-label" id={`${uid}-type-label`}>Type</span>
      <button type="button" class="rt-config-btn" data-picker-open="type" aria-haspopup="menu" aria-expanded="false" aria-labelledby={`${uid}-type-label ${uid}-type-value`}>
        <span class="rt-ink-2" data-type-icon set:html={svg(TYPE_GLYPHS.Text)} />
        <span id={`${uid}-type-value`} data-type-label>Text</span>
        <span class="rt-ink-3" set:html={svg(I.chevron, 12, 2.2)} />
      </button>
      <div class="rt-picker" data-picker="type" hidden>
        <div class="rt-picker-label" aria-hidden="true">Property type</div>
        <GlideMenu class="rt-picker-list" role="menu" aria-label="Property type" arrowKeys>
          {
            PROPERTY_TYPES.map((type) => (
              <button type="button" class="rt-menu-row" data-menu-row role="menuitemradio" aria-checked="false" data-value={type}>
                <span class="rt-row-icon rt-ink-2" set:html={svg(TYPE_GLYPHS[type], 15)} />
                <span class="rt-row-label">{type}</span>
                <span class="rt-row-check" set:html={svg(I.check, 14, 2.2)} />
              </button>
            ))
          }
        </GlideMenu>
      </div>
    </div>

    <div class="rt-config-row">
      <span class="rt-config-label" id={`${uid}-tool-label`}>Tool</span>
      <button type="button" class="rt-config-btn" data-picker-open="tool" aria-haspopup="menu" aria-expanded="false" aria-labelledby={`${uid}-tool-label ${uid}-tool-value`}>
        <span class="rt-ink-2" data-tool-icon set:html={svg(TOOL_GLYPHS.user)} />
        <span id={`${uid}-tool-value`} data-tool-label>User input</span>
        <span class="rt-ink-3" set:html={svg(I.chevron, 12, 2.2)} />
      </button>
      <div class="rt-picker" data-picker="tool" hidden>
        <div class="rt-picker-label" aria-hidden="true">Model</div>
        <GlideMenu class="rt-picker-list" role="menu" aria-label="Model" arrowKeys>
          {
            models.map((m) => (
              <button type="button" class="rt-menu-row" data-menu-row role="menuitemradio" aria-checked="false" data-value={m}>
                <span class="rt-row-icon rt-accent" set:html={modelSvg()} />
                <span class="rt-row-label">{m}</span>
                <span class="rt-row-check" set:html={svg(I.check, 14, 2.2)} />
              </button>
            ))
          }
        </GlideMenu>
      </div>
    </div>

    <div class="rt-config-row">
      <span class="rt-config-label">Grounding</span>
      <span class="rt-config-group">
        <Switch size="sm" tone="accent" label="Grounding" />
        <button type="button" class="rt-help-btn" data-help aria-label="About grounding" aria-expanded="false" aria-controls={`${uid}-help`}>
          <Fragment set:html={svg(I.info, 13)} />
        </button>
      </span>
      <div class="rt-help" id={`${uid}-help`} hidden>Grounding lets the model verify generated values against connected sources.</div>
    </div>

    <div class="rt-config-row">
      <span class="rt-config-label" id={`${uid}-inputs-label`}>Inputs</span>
      <button type="button" class="rt-config-btn rt-config-btn--inputs" data-picker-open="inputs" aria-haspopup="menu" aria-expanded="false" aria-labelledby={`${uid}-inputs-label ${uid}-inputs-value`}>
        <span class="rt-input-chips" id={`${uid}-inputs-value`} data-inputs-value>Select inputs</span>
        <span class="rt-ink-3" set:html={svg(I.chevron, 12, 2.2)} />
      </button>
      <div class="rt-picker rt-picker--wide" data-picker="inputs" hidden>
        <div class="rt-picker-label" aria-hidden="true">Use values from</div>
        <GlideMenu class="rt-picker-list" role="menu" aria-label="Calculation inputs" arrowKeys>
          {
            inputOptions.map((input) => (
              <button type="button" class="rt-menu-row" data-menu-row role="menuitemcheckbox" aria-checked="false" data-value={input}>
                <span class="rt-mini-box" aria-hidden="true" set:html={svg(I.check, 11, 2.4)} />
                <span class="rt-row-label">{input}</span>
              </button>
            ))
          }
        </GlideMenu>
      </div>
    </div>

    <div class="rt-prompt" contenteditable="true" role="textbox" aria-multiline="true" spellcheck="true" aria-label="Calculation prompt" data-placeholder="Set a prompt (press @ to mention an input)" data-prompt></div>

    <button type="button" class="rt-go" data-calc>
      <Fragment set:html={svg(I.refresh, 14, 1.9)} />
      Go calculate
    </button>

    <GlideMenu class="rt-prop-actions" highlightInset="-6px">
      <button type="button" class="rt-action-row" data-menu-row data-pin aria-pressed="false">
        <span class="rt-ink-2" data-pin-icon set:html={svg(I.pin, 15)} />
        <span data-pin-label>Pin</span>
      </button>
      <button type="button" class="rt-action-row" data-menu-row data-more aria-expanded="false" aria-controls={`${uid}-more`}>
        <span class="rt-ink-2" set:html={svg(I.gear, 15)} />
        <span class="rt-grow">More settings</span>
        <span class="rt-ink-3 rt-more-chevron" set:html={svg(I.chevron, 12, 2.2)} />
      </button>
      <button type="button" class="rt-action-row" data-menu-row data-hide hidden>
        <span class="rt-ink-2" set:html={svg(I.eyeOff, 15)} />
        Hide from view
      </button>
    </GlideMenu>

    <div class="rt-more-settings" id={`${uid}-more`} hidden>
      <div class="rt-subhead">Behavior</div>
      <div class="rt-config-row"><span class="rt-config-label">Required value</span><Switch size="sm" tone="accent" label="Required value" /></div>
      <div class="rt-config-row"><span class="rt-config-label">Allow empty results</span><Switch size="sm" tone="accent" label="Allow empty results" checked /></div>
      <div class="rt-config-row"><span class="rt-config-label">Show confidence</span><Switch size="sm" tone="accent" label="Show confidence" /></div>
    </div>
  </div>

  {/* ── new property menu ─────────────────────────────── */}
  <div class="rt-pop rt-menu rt-menu--add" popover="manual" data-recpop data-pop="add">
    <div class="rt-menu-label" aria-hidden="true">New property</div>
    <GlideMenu class="rt-menu-list" role="menu" aria-label="New property" arrowKeys>
      {
        PROPERTY_TYPES.map((type) => (
          <button type="button" class="rt-menu-item" data-menu-row role="menuitem" data-add-type={type}>
            <span class="rt-ink-2" set:html={svg(TYPE_GLYPHS[type], 15)} />
            {type}
          </button>
        ))
      }
    </GlideMenu>
  </div>

  {/* ── table options menu ─────────────────────────────── */}
  <div class="rt-pop rt-menu rt-menu--options" popover="manual" data-recpop data-pop="options">
    <div class="rt-menu-label" aria-hidden="true">Table options</div>
    <GlideMenu class="rt-menu-list" role="menu" aria-label="Table options" arrowKeys>
      <button type="button" class="rt-menu-item" data-menu-row role="menuitem" data-option="add"><span class="rt-ink-2" set:html={svg(I.plus, 15, 2)} />Add property</button>
      <button type="button" class="rt-menu-item" data-menu-row role="menuitem" data-option="compact"><span class="rt-ink-2" set:html={svg(I.compact, 15)} />Compact columns</button>
      <button type="button" class="rt-menu-item" data-menu-row role="menuitem" data-option="reset"><span class="rt-ink-2" set:html={svg(I.reset, 15)} />Reset column widths</button>
      <div class="rt-menu-sep" role="separator"></div>
      <button type="button" class="rt-menu-item" data-menu-row role="menuitem" data-option="clear"><span class="rt-ink-2" set:html={svg(I.clear, 15)} />Clear selection</button>
    </GlideMenu>
  </div>
</div>

<script>
  import { initGlideMenu } from "../glide-menu/glide-menu";

  type ColumnKey = "company" | "categories" | "last" | "strength" | "links" | "ai";
  type SortKey = "name" | "last" | "strength";
  interface Prompt {
    before: string;
    chip?: string;
    after?: string;
  }
  interface ColumnConfig {
    label: string;
    type: string;
    tool: string;
    toolKind: "model" | "web" | "user";
    inputs: string[];
    prompt?: Prompt;
  }
  interface Config {
    uid: string;
    rows: { id: string; name: string; lastDays: number | null; last: string; rank: number; ai: string }[];
    sort: { key: SortKey; dir: 1 | -1 };
    columns: Record<ColumnKey, ColumnConfig>;
    typeGlyphs: Record<string, string>;
    toolGlyphs: Record<"model" | "web" | "user", string>;
    aiEnabled: boolean;
  }

  const DEFAULT_WIDTHS: Record<string, number> = { company: 270, categories: 275, last: 190, strength: 210, links: 175, ai: 240, actions: 100 };
  const COMPACT_WIDTHS: Record<string, number> = { company: 220, categories: 220, last: 155, strength: 180, links: 160, ai: 200 };
  const STEP_MS = 110;

  const svg = (inner: string, size = 14, sw = 1.8) =>
    `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
  const escapeHtml = (s: string) => s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);

  function init(root: HTMLElement) {
    const configEl = root.querySelector<HTMLScriptElement>("script[data-vs-config]");
    if (!configEl) return;
    const cfg = JSON.parse(configEl.textContent || "{}") as Config;
    // JSON turns Infinity into null; null means "no contact" (sorts last).
    const rowsById = new Map(cfg.rows.map((r) => [r.id, { ...r, lastDays: r.lastDays ?? Number.POSITIVE_INFINITY }]));
    const columns = cfg.columns;

    const scroller = root.querySelector<HTMLElement>(".rt-scroll")!;
    const table = root.querySelector<HTMLTableElement>(".rt-table")!;
    const colgroup = table.querySelector("colgroup")!;
    const tbody = table.tBodies[0];
    const live = root.querySelector<HTMLElement>("[data-live]")!;
    const selectAll = root.querySelector<HTMLInputElement>("[data-select-all]")!;
    const propPop = root.querySelector<HTMLElement>('[data-pop="prop"]')!;
    const addPop = root.querySelector<HTMLElement>('[data-pop="add"]')!;
    const optionsPop = root.querySelector<HTMLElement>('[data-pop="options"]')!;
    const addBtn = root.querySelector<HTMLButtonElement>("[data-open-add]")!;
    const optionsBtn = root.querySelector<HTMLButtonElement>("[data-open-options]")!;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");

    const cleanups: Array<() => void> = [];
    const rowEls = () => Array.from(tbody.rows) as HTMLTableRowElement[];
    const colEl = (key: string) => colgroup.querySelector<HTMLTableColElement>(`col[data-col="${key}"]`);
    const cellsOf = (key: string) => Array.from(table.querySelectorAll<HTMLTableCellElement>(`th[data-col="${key}"], td[data-col="${key}"]`));

    /* ── selection ─────────────────────────────────────── */
    const selected = new Set<string>();
    const syncSelection = (announce = true) => {
      const all = rowEls();
      for (const tr of all) {
        const id = tr.dataset.id!;
        const on = selected.has(id);
        tr.classList.toggle("is-selected", on);
        const box = tr.querySelector<HTMLInputElement>("[data-select]");
        if (box) box.checked = on;
      }
      const count = all.filter((tr) => selected.has(tr.dataset.id!)).length;
      selectAll.checked = count > 0 && count === all.length;
      selectAll.indeterminate = count > 0 && count < all.length;
      if (announce) root.dispatchEvent(new CustomEvent("vs-records-selection", { bubbles: true, detail: { ids: [...selected] } }));
    };
    tbody.addEventListener("change", (event) => {
      const box = (event.target as Element).closest<HTMLInputElement>("[data-select]");
      if (!box) return;
      const id = box.dataset.select!;
      if (box.checked) selected.add(id);
      else selected.delete(id);
      syncSelection();
    });
    selectAll.addEventListener("change", () => {
      const ids = rowEls().map((tr) => tr.dataset.id!);
      if (selectAll.checked) ids.forEach((id) => selected.add(id));
      else ids.forEach((id) => selected.delete(id));
      syncSelection();
    });

    /* ── sorting ───────────────────────────────────────── */
    let sort = { ...cfg.sort };
    const sortHeaders: Record<SortKey, HTMLTableCellElement | null> = {
      name: table.querySelector('th[data-col="company"]'),
      last: table.querySelector('th[data-col="last"]'),
      strength: table.querySelector('th[data-col="strength"]'),
    };
    const applySort = () => {
      const trs = rowEls();
      trs.sort((a, b) => {
        const ra = rowsById.get(a.dataset.id!)!;
        const rb = rowsById.get(b.dataset.id!)!;
        const v =
          sort.key === "name"
            ? ra.name.localeCompare(rb.name)
            : sort.key === "last"
              ? ra.lastDays - rb.lastDays || ra.name.localeCompare(rb.name)
              : ra.rank - rb.rank;
        return (Number.isNaN(v) ? 0 : v) * sort.dir;
      });
      trs.forEach((tr, i) => {
        tbody.appendChild(tr);
        const num = tr.querySelector(".rt-rownum");
        if (num) num.textContent = String(i + 1);
      });
      for (const [key, th] of Object.entries(sortHeaders) as [SortKey, HTMLTableCellElement | null][]) {
        if (!th) continue;
        if (key === sort.key) th.setAttribute("aria-sort", sort.dir === 1 ? "ascending" : "descending");
        else th.removeAttribute("aria-sort");
        th.querySelector(".rt-sort")?.classList.toggle("is-visible", key === sort.key);
        th.querySelector(".rt-sort")?.classList.toggle("is-desc", key === sort.key && sort.dir === -1);
      }
    };
    root.querySelectorAll<HTMLButtonElement>("[data-sort]").forEach((btn) => {
      btn.addEventListener("click", () => {
        const key = btn.dataset.sort as SortKey;
        sort = sort.key === key ? { key, dir: (sort.dir * -1) as 1 | -1 } : { key, dir: 1 };
        closeAll();
        applySort();
        paintCalc();
        root.dispatchEvent(new CustomEvent("vs-records-sort", { bubbles: true, detail: { ...sort } }));
      });
    });

    /* ── tags: fit as many as the cell allows, then "+N" ── */
    const tagWidths = new WeakMap<HTMLElement, { tags: number[]; more: number }>();
    const measureTags = (box: HTMLElement) => {
      const tags = Array.from(box.querySelectorAll<HTMLElement>(".rt-tag"));
      const more = box.querySelector<HTMLElement>(".rt-more")!;
      tags.forEach((t) => (t.hidden = false));
      more.textContent = `+${tags.length}`;
      more.hidden = false;
      const m = { tags: tags.map((t) => t.offsetWidth), more: more.offsetWidth };
      tagWidths.set(box, m);
      return m;
    };
    const fitTags = (box: HTMLElement) => {
      if (!box.isConnected || box.getClientRects().length === 0) return;
      const m = tagWidths.get(box) ?? measureTags(box);
      if (!m.tags.length || m.tags[0] === 0) return;
      const available = box.clientWidth;
      let used = 0;
      let count = 0;
      for (let i = 0; i < m.tags.length; i += 1) {
        const next = used + (count > 0 ? 4 : 0) + m.tags[i];
        const hiddenAfter = m.tags.length - (i + 1);
        if (next + (hiddenAfter > 0 ? 4 + m.more : 0) > available) break;
        used = next;
        count += 1;
      }
      const tags = box.querySelectorAll<HTMLElement>(".rt-tag");
      tags.forEach((t, i) => (t.hidden = i >= count));
      const more = box.querySelector<HTMLElement>(".rt-more")!;
      const hidden = tags.length - count;
      more.hidden = hidden <= 0;
      more.textContent = `+${hidden}`;
    };
    const tagBoxes = Array.from(root.querySelectorAll<HTMLElement>(".rt-tags"));
    const tagObserver = new ResizeObserver((entries) => entries.forEach((e) => fitTags(e.target as HTMLElement)));
    tagBoxes.forEach((box) => tagObserver.observe(box));
    document.fonts?.ready.then(() => tagBoxes.forEach((box) => (tagWidths.delete(box), fitTags(box))));
    cleanups.push(() => tagObserver.disconnect());

    /* ── column widths: fill once, then lock every column explicitly ── */
    const widths: Record<string, number> = { ...DEFAULT_WIDTHS };
    let initialWidths: Record<string, number> = { ...DEFAULT_WIDTHS };
    let aiAdded = false;
    const applyWidths = () => {
      const keys = ["company", "categories", "last", "strength", "links", ...(aiAdded ? ["ai"] : []), "actions"];
      for (const key of keys) {
        const col = colEl(key);
        if (col) col.style.width = `${widths[key]}px`;
      }
      const total = keys.reduce((sum, k) => sum + widths[k], 0);
      table.style.width = `${total}px`;
      table.style.minWidth = `${total}px`;
      root.querySelectorAll<HTMLElement>("[data-resize]").forEach((h) => {
        const key = h.dataset.resize!;
        h.setAttribute("aria-valuenow", String(Math.round(widths[key])));
        h.setAttribute("aria-valuemin", h.dataset.min ?? "120");
        h.setAttribute("aria-valuemax", "800");
        h.setAttribute("aria-valuetext", `${Math.round(widths[key])} pixels`);
      });
    };
    const lockWidths = () => {
      if (scroller.getClientRects().length === 0) return false;
      const ths = Array.from(table.tHead!.rows[0].cells).filter((th) => !th.hidden);
      for (const th of ths) {
        const key = th.dataset.col!;
        widths[key] = th.getBoundingClientRect().width;
      }
      initialWidths = { ...widths };
      applyWidths();
      return true;
    };
    // Measure once visible (the gallery may render this inside a hidden variant panel).
    if (!lockWidths()) {
      const vis = new ResizeObserver(() => {
        if (lockWidths()) vis.disconnect();
      });
      vis.observe(scroller);
      cleanups.push(() => vis.disconnect());
    }

    const startResize = (handle: HTMLElement, event: PointerEvent) => {
      event.preventDefault();
      event.stopPropagation();
      closeAll();
      const key = handle.dataset.resize!;
      const min = Number(handle.dataset.min ?? 120);
      const startX = event.clientX;
      const startWidth = widths[key];
      const prevCursor = document.body.style.cursor;
      const prevSelect = document.body.style.userSelect;
      document.body.style.cursor = "col-resize";
      document.body.style.userSelect = "none";
      handle.classList.add("is-resizing");
      const move = (e: PointerEvent) => {
        widths[key] = Math.max(min, startWidth + e.clientX - startX);
        applyWidths();
      };
      const finish = () => {
        window.removeEventListener("pointermove", move);
        window.removeEventListener("pointerup", finish);
        window.removeEventListener("pointercancel", finish);
        document.body.style.cursor = prevCursor;
        document.body.style.userSelect = prevSelect;
        handle.classList.remove("is-resizing");
      };
      window.addEventListener("pointermove", move);
      window.addEventListener("pointerup", finish);
      window.addEventListener("pointercancel", finish);
    };
    root.querySelectorAll<HTMLElement>("[data-resize]").forEach((handle) => {
      handle.addEventListener("pointerdown", (e) => startResize(handle, e));
      handle.addEventListener("keydown", (e) => {
        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
        e.preventDefault();
        const key = handle.dataset.resize!;
        const step = e.shiftKey ? 40 : 10;
        widths[key] = Math.min(800, Math.max(Number(handle.dataset.min ?? 120), widths[key] + (e.key === "ArrowRight" ? step : -step)));
        applyWidths();
      });
    });

    /* ── popovers (top layer when supported) ───────────── */
    const supportsPopover = typeof HTMLElement.prototype.showPopover === "function";
    let openPop: HTMLElement | null = null;
    let openTrigger: HTMLElement | null = null;
    let propCol: ColumnKey | null = null;
    let ignoreScroll = false;

    let placement: { pop: HTMLElement; anchorEl: HTMLElement; width: number; align: "left" | "right" } | null = null;
    const positionPop = (pop: HTMLElement, anchor: DOMRect, width: number, align: "left" | "right") => {
      const h = pop.offsetHeight;
      const left =
        align === "right"
          ? Math.max(8, Math.min(anchor.right - width, window.innerWidth - width - 8))
          : Math.max(8, Math.min(anchor.left, window.innerWidth - width - 8));
      let top = anchor.bottom + 6;
      if (top + h > window.innerHeight - 8 && anchor.top - h - 6 > 8) top = anchor.top - h - 6;
      pop.style.left = `${left}px`;
      pop.style.top = `${top}px`;
      pop.style.transformOrigin = align === "right" ? "top right" : "top left";
    };
    const showPop = (pop: HTMLElement, anchor: DOMRect, width: number, align: "left" | "right" = "left", anchorEl?: HTMLElement) => {
      pop.classList.add("is-open");
      if (supportsPopover) pop.showPopover();
      positionPop(pop, anchor, width, align);
      placement = anchorEl ? { pop, anchorEl, width, align } : null;
      pop.classList.remove("is-anim");
      void pop.offsetWidth;
      pop.classList.add("is-anim");
    };
    const hidePop = (pop: HTMLElement) => {
      pop.classList.remove("is-open", "is-anim");
      if (supportsPopover && pop.matches(":popover-open")) pop.hidePopover();
    };
    const closeAll = (restoreFocus = false) => {
      closePickers();
      setHelp(false);
      if (openPop) hidePop(openPop);
      openPop = null;
      placement = null;
      root.querySelectorAll('[data-prop][aria-expanded="true"], [data-open-add], [data-open-options]').forEach((el) => el.setAttribute("aria-expanded", "false"));
      table.querySelectorAll(".is-colsel").forEach((el) => el.classList.remove("is-colsel"));
      const trigger = openTrigger;
      openTrigger = null;
      propCol = null;
      if (restoreFocus && trigger?.isConnected) trigger.focus();
    };
    const focusFirst = (container: HTMLElement) => {
      const target = container.querySelector<HTMLElement>('[aria-checked="true"][data-menu-row]') ?? container.querySelector<HTMLElement>("[data-menu-row]:not([hidden])");
      target?.focus({ preventScroll: true });
    };

    const onDocPointerDown = (event: PointerEvent) => {
      if (!openPop) return;
      const target = event.target as Element;
      if (target.closest("[data-recpop]") || (openTrigger && openTrigger.contains(target))) return;
      closeAll();
    };
    const onDocKeyDown = (event: KeyboardEvent) => {
      if (event.key !== "Escape" || !openPop) return;
      if (closePickers(true)) return;
      event.preventDefault();
      closeAll(true);
    };
    document.addEventListener("pointerdown", onDocPointerDown);
    document.addEventListener("keydown", onDocKeyDown);
    // Re-anchor rather than close: on-screen keyboards fire resize while typing in the popover.
    const onWinResize = () => {
      if (placement?.anchorEl.isConnected) positionPop(placement.pop, placement.anchorEl.getBoundingClientRect(), placement.width, placement.align);
    };
    window.addEventListener("resize", onWinResize);
    window.addEventListener("scroll", onWinResize, { passive: true });
    cleanups.push(() => {
      document.removeEventListener("pointerdown", onDocPointerDown);
      document.removeEventListener("keydown", onDocKeyDown);
      window.removeEventListener("resize", onWinResize);
      window.removeEventListener("scroll", onWinResize);
    });
    scroller.addEventListener("scroll", () => {
      if (ignoreScroll) {
        ignoreScroll = false;
        return;
      }
      if (openPop) closeAll();
    });

    /* ── property popover ──────────────────────────────── */
    const overrides: Partial<Record<ColumnKey, Partial<ColumnConfig>>> = {};
    const pinned = new Set<ColumnKey>();
    const metaOf = (col: ColumnKey): ColumnConfig => ({ ...columns[col], ...overrides[col] });
    const q = <T extends HTMLElement = HTMLElement>(sel: string) => propPop.querySelector<T>(sel)!;
    const titleEl = q("[data-prop-title]");
    const typeIcon = q("[data-type-icon]");
    const typeLabel = q("[data-type-label]");
    const toolIcon = q("[data-tool-icon]");
    const toolLabel = q("[data-tool-label]");
    const inputsValue = q("[data-inputs-value]");
    const promptEl = q("[data-prompt]");
    const calcBtn = q<HTMLButtonElement>("[data-calc]");
    const pinBtn = q<HTMLButtonElement>("[data-pin]");
    const moreBtn = q<HTMLButtonElement>("[data-more]");
    const hideBtn = q<HTMLButtonElement>("[data-hide]");
    const moreSettings = q("#" + CSS.escape(`${cfg.uid}-more`));
    const helpBtn = q<HTMLButtonElement>("[data-help]");
    const helpEl = q("#" + CSS.escape(`${cfg.uid}-help`));

    const setHelp = (open: boolean) => {
      helpBtn.setAttribute("aria-expanded", String(open));
      helpEl.hidden = !open;
    };
    helpBtn.addEventListener("click", () => setHelp(Boolean(helpEl.hidden)));

    const toolSvg = (kind: ColumnConfig["toolKind"]) =>
      kind === "model"
        ? `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">${cfg.toolGlyphs.model}</svg>`
        : svg(cfg.toolGlyphs[kind]);

    const renderInputs = (list: string[]) => {
      if (!list.length) {
        inputsValue.textContent = "Select inputs";
        return;
      }
      inputsValue.innerHTML =
        list
          .slice(0, 2)
          .map((i) => `<span class="rt-input-chip">${escapeHtml(i)}</span>`)
          .join("") + (list.length > 2 ? `<span class="rt-input-more">+${list.length - 2}</span>` : "");
    };

    const renderProp = (col: ColumnKey) => {
      const meta = metaOf(col);
      titleEl.textContent = meta.label;
      typeIcon.innerHTML = svg(cfg.typeGlyphs[meta.type] ?? cfg.typeGlyphs.Text);
      typeLabel.textContent = meta.type;
      toolIcon.innerHTML = toolSvg(meta.toolKind);
      toolIcon.className = meta.toolKind === "model" ? "rt-accent" : "rt-ink-2";
      toolLabel.textContent = meta.tool;
      renderInputs(meta.inputs);
      propPop.querySelectorAll<HTMLElement>('[data-picker="inputs"] [data-value]').forEach((row) => {
        row.hidden = row.dataset.value === meta.label;
        row.setAttribute("aria-checked", String(meta.inputs.includes(row.dataset.value!)));
      });
      propPop.querySelectorAll<HTMLElement>('[data-picker="type"] [data-value]').forEach((row) => row.setAttribute("aria-checked", String(row.dataset.value === meta.type)));
      propPop.querySelectorAll<HTMLElement>('[data-picker="tool"] [data-value]').forEach((row) => row.setAttribute("aria-checked", String(row.dataset.value === meta.tool)));
      promptEl.setAttribute("aria-label", `${meta.label} calculation prompt`);
      if (meta.prompt) {
        promptEl.innerHTML =
          escapeHtml(meta.prompt.before) +
          (meta.prompt.chip ? `<span class="rt-prompt-chip" contenteditable="false">${escapeHtml(meta.prompt.chip)}</span>` : "") +
          escapeHtml(meta.prompt.after ?? "");
      } else promptEl.innerHTML = "";
      calcBtn.disabled = col === "company" || calc !== null;
      renderPin(col);
      hideBtn.hidden = col !== "ai";
      setMore(false);
      setHelp(false);
    };

    const renderPin = (col: ColumnKey) => {
      const isPinned = pinned.has(col);
      pinBtn.setAttribute("aria-pressed", String(isPinned));
      pinBtn.classList.toggle("is-pinned", isPinned);
      q("[data-pin-label]").textContent = isPinned ? "Unpin" : "Pin";
    };
    const setMore = (open: boolean) => {
      moreBtn.setAttribute("aria-expanded", String(open));
      moreBtn.classList.toggle("is-open", open);
      moreSettings.hidden = !open;
    };
    moreBtn.addEventListener("click", () => setMore(Boolean(moreSettings.hidden)));
    pinBtn.addEventListener("click", () => {
      if (!propCol) return;
      if (pinned.has(propCol)) pinned.delete(propCol);
      else pinned.add(propCol);
      renderPin(propCol);
    });

    const openProp = (col: ColumnKey, trigger: HTMLElement, viaKeyboard: boolean) => {
      const reopenSame = openPop === propPop && propCol === col;
      closeAll();
      if (reopenSame) return;
      const th = trigger.closest("th")!;
      propCol = col;
      openTrigger = trigger;
      openPop = propPop;
      trigger.setAttribute("aria-expanded", "true");
      cellsOf(col).forEach((c) => c.classList.add("is-colsel"));
      renderProp(col);
      showPop(propPop, th.getBoundingClientRect(), 320, "left", th);
      if (viaKeyboard) q<HTMLButtonElement>('[data-picker-open="type"]').focus({ preventScroll: true });
    };
    root.querySelectorAll<HTMLButtonElement>("[data-prop]").forEach((btn) => {
      btn.addEventListener("click", (e) => openProp(btn.dataset.prop as ColumnKey, btn, e.detail === 0));
    });

    const setAiIcon = (type: string) => {
      root.querySelector("[data-ai-icon]")!.innerHTML = svg(cfg.typeGlyphs[type] ?? cfg.typeGlyphs.Text, 15);
    };

    /* pickers inside the popover */
    let openPicker: HTMLElement | null = null;
    const closePickers = (restoreFocus = false) => {
      if (!openPicker) return false;
      const trigger = propPop.querySelector<HTMLElement>(`[data-picker-open="${openPicker.dataset.picker}"]`);
      openPicker.hidden = true;
      trigger?.setAttribute("aria-expanded", "false");
      openPicker = null;
      if (restoreFocus) trigger?.focus();
      return true;
    };
    propPop.querySelectorAll<HTMLButtonElement>("[data-picker-open]").forEach((btn) => {
      btn.addEventListener("click", (e) => {
        const name = btn.dataset.pickerOpen!;
        const picker = propPop.querySelector<HTMLElement>(`[data-picker="${name}"]`)!;
        const wasOpen = openPicker === picker;
        closePickers();
        setHelp(false);
        if (wasOpen) return;
        picker.hidden = false;
        openPicker = picker;
        btn.setAttribute("aria-expanded", "true");
        // Flip to the left when the right side has no room.
        const popRect = propPop.getBoundingClientRect();
        picker.classList.toggle("is-flipped", popRect.right + 20 + picker.offsetWidth > window.innerWidth - 8);
        picker.classList.remove("is-anim");
        void picker.offsetWidth;
        picker.classList.add("is-anim");
        if (e.detail === 0) focusFirst(picker);
      });
    });
    propPop.querySelector('[data-picker="type"]')!.addEventListener("click", (e) => {
      const row = (e.target as Element).closest<HTMLElement>("[data-value]");
      if (!row || !propCol) return;
      overrides[propCol] = { ...overrides[propCol], type: row.dataset.value! };
      if (propCol === "ai") setAiIcon(row.dataset.value!);
      renderProp(propCol);
      closePickers(true);
    });
    propPop.querySelector('[data-picker="tool"]')!.addEventListener("click", (e) => {
      const row = (e.target as Element).closest<HTMLElement>("[data-value]");
      if (!row || !propCol) return;
      overrides[propCol] = { ...overrides[propCol], tool: row.dataset.value!, toolKind: "model" };
      renderProp(propCol);
      closePickers(true);
    });
    propPop.querySelector('[data-picker="inputs"]')!.addEventListener("click", (e) => {
      const row = (e.target as Element).closest<HTMLElement>("[data-value]");
      if (!row || !propCol) return;
      const current = metaOf(propCol).inputs;
      const value = row.dataset.value!;
      const next = current.includes(value) ? current.filter((i) => i !== value) : [...current, value];
      overrides[propCol] = { ...overrides[propCol], inputs: next };
      row.setAttribute("aria-checked", String(next.includes(value)));
      renderInputs(next);
    });

    /* ── calculation: resolve one row per beat ─────────── */
    let calc: { col: ColumnKey; resolved: number; timer: number } | null = null;
    let aiDone = false;
    const aiFoot = root.querySelector<HTMLElement>("[data-ai-foot]")!;
    const calcMarkup = '<span class="rt-calc"><span class="rt-muted">Calculating…</span><span class="rt-pulse"></span></span>';
    const renderAiCell = (td: HTMLTableCellElement) => {
      const id = td.parentElement!.dataset.id!;
      const value = rowsById.get(id)?.ai ?? "";
      td.querySelector(".rt-val")!.innerHTML = aiDone && value ? escapeHtml(value) : '<span class="rt-muted">–</span>';
      td.title = aiDone ? value : "";
    };
    const paintCalc = () => {
      if (!calc) return;
      const { col, resolved } = calc;
      rowEls().forEach((tr, i) => {
        const td = tr.querySelector<HTMLTableCellElement>(`td[data-col="${col}"]`);
        if (!td) return;
        const pending = i >= resolved;
        if (pending && !td.classList.contains("is-calc")) {
          td.classList.add("is-calc");
          td.insertAdjacentHTML("beforeend", calcMarkup);
        } else if (!pending && td.classList.contains("is-calc")) {
          td.classList.remove("is-calc");
          td.querySelector(".rt-calc")?.remove();
          if (col === "ai") {
            const value = rowsById.get(tr.dataset.id!)?.ai ?? "";
            td.querySelector(".rt-val")!.innerHTML = value ? escapeHtml(value) : '<span class="rt-muted">–</span>';
            td.title = value;
          }
          if (col === "categories") {
            const box = td.querySelector<HTMLElement>(".rt-tags");
            if (box) fitTags(box);
          }
        }
      });
    };
    const finishCalc = () => {
      if (!calc) return;
      const { col } = calc;
      window.clearInterval(calc.timer);
      calc.resolved = Number.POSITIVE_INFINITY;
      paintCalc();
      calc = null;
      if (col === "ai") {
        aiDone = true;
        aiFoot.textContent = `${cfg.rows.length} filled`;
      }
      live.textContent = `${metaOf(col).label} calculated for ${cfg.rows.length} rows.`;
    };
    const tick = () => {
      if (!calc) return;
      calc.resolved += 1;
      if (calc.resolved > cfg.rows.length) finishCalc();
      else paintCalc();
    };
    const runCalc = (col: ColumnKey) => {
      if (calc || col === "company") return;
      calc = { col, resolved: 0, timer: 0 };
      live.textContent = `Calculating ${metaOf(col).label}…`;
      root.dispatchEvent(new CustomEvent("vs-records-calculate", { bubbles: true, detail: { column: col, label: metaOf(col).label } }));
      if (reduce.matches) {
        finishCalc();
        return;
      }
      paintCalc();
      calc.timer = window.setInterval(tick, STEP_MS);
    };
    cleanups.push(() => calc && window.clearInterval(calc.timer));
    calcBtn.addEventListener("click", () => {
      if (!propCol) return;
      const col = propCol;
      closeAll(true);
      runCalc(col);
    });

    /* ── the AI column ─────────────────────────────────── */
    const setAiVisible = (on: boolean) => {
      aiAdded = on;
      cellsOf("ai").forEach((cell) => (cell.hidden = !on));
      const existing = colEl("ai");
      if (on && !existing) {
        const col = document.createElement("col");
        col.dataset.col = "ai";
        colEl("actions")!.before(col);
      } else if (!on && existing) existing.remove();
      applyWidths();
    };
    const addAiColumn = (type: string) => {
      if (!cfg.aiEnabled) return;
      if (calc?.col === "ai") {
        window.clearInterval(calc.timer);
        calc = null;
      }
      aiDone = false;
      overrides.ai = { ...overrides.ai, type };
      setAiIcon(type);
      aiFoot.textContent = "–";
      table.querySelectorAll<HTMLTableCellElement>('td[data-col="ai"]').forEach((td) => {
        if (td.closest("tbody")) {
          td.classList.remove("is-calc");
          td.querySelector(".rt-calc")?.remove();
          renderAiCell(td);
        }
      });
      setAiVisible(true);
      root.dispatchEvent(new CustomEvent("vs-records-property", { bubbles: true, detail: { type } }));
      live.textContent = `Added ${metaOf("ai").label} column.`;
      // Reveal the new column, then open its configuration anchored to it.
      requestAnimationFrame(() => {
        ignoreScroll = true;
        scroller.scrollLeft = scroller.scrollWidth;
        const btn = root.querySelector<HTMLButtonElement>('[data-prop="ai"]')!;
        requestAnimationFrame(() => openProp("ai", btn, true));
      });
    };
    hideBtn.addEventListener("click", () => {
      if (calc?.col === "ai") {
        window.clearInterval(calc.timer);
        calc = null;
      }
      aiDone = false;
      closeAll();
      setAiVisible(false);
      live.textContent = `${metaOf("ai").label} column hidden.`;
      addBtn.focus();
    });

    /* + menu and options menu */
    const toggleMenu = (pop: HTMLElement, btn: HTMLButtonElement, align: "left" | "right", viaKeyboard: boolean, width: number) => {
      const wasOpen = openPop === pop;
      closeAll();
      if (wasOpen) return;
      openPop = pop;
      openTrigger = btn;
      btn.setAttribute("aria-expanded", "true");
      showPop(pop, btn.getBoundingClientRect(), width, align, btn);
      if (viaKeyboard) focusFirst(pop);
    };
    addBtn.addEventListener("click", (e) => toggleMenu(addPop, addBtn, "left", e.detail === 0, 260));
    optionsBtn.addEventListener("click", (e) => toggleMenu(optionsPop, optionsBtn, "right", e.detail === 0, 220));
    addPop.addEventListener("click", (e) => {
      const item = (e.target as Element).closest<HTMLElement>("[data-add-type]");
      if (!item) return;
      closeAll();
      addAiColumn(item.dataset.addType!);
    });
    optionsPop.addEventListener("click", (e) => {
      const item = (e.target as Element).closest<HTMLElement>("[data-option]");
      if (!item) return;
      const option = item.dataset.option;
      if (option === "add") {
        const anchor = optionsBtn.getBoundingClientRect();
        closeAll();
        openPop = addPop;
        openTrigger = addBtn;
        addBtn.setAttribute("aria-expanded", "true");
        showPop(addPop, anchor, 260, "right", optionsBtn);
        if (e.detail === 0) focusFirst(addPop);
        return;
      }
      if (option === "compact") Object.assign(widths, COMPACT_WIDTHS);
      if (option === "reset") Object.assign(widths, initialWidths);
      if (option === "clear") {
        selected.clear();
        syncSelection();
      }
      applyWidths();
      closeAll(true);
    });

    root.querySelector("[data-add-calc]")?.addEventListener("click", () => {
      root.dispatchEvent(new CustomEvent("vs-records-add-calculation", { bubbles: true }));
    });

    // Light up GlideMenus inside popovers that GlideMenu's own boot may have missed.
    root.querySelectorAll<HTMLElement>(".vs-glide-menu:not([data-vs-ready])").forEach((menu) => {
      menu.dataset.vsReady = "";
      cleanups.push(initGlideMenu(menu));
    });

    applySort();
    syncSelection(false);

    return () => {
      closeAll();
      cleanups.forEach((fn) => fn());
    };
  }

  const teardowns = new Set<() => void>();
  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-records-table:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      const stop = init(root);
      if (stop) teardowns.add(stop);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
  document.addEventListener("astro:before-swap", () => {
    teardowns.forEach((fn) => fn());
    teardowns.clear();
  });
</script>

<style>
  .vs-records-table {
    --rt-line: color-mix(in srgb, var(--vs-line) 78%, transparent);
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--vs-line);
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.06);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    text-align: left;
  }
  .vs-records-table.is-fill {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .is-fill .rt-scroll {
    max-height: none;
    flex: 1;
  }

  .rt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .rt-ink-2 {
    display: inline-flex;
    color: var(--vs-ink-2);
  }
  .rt-ink-3 {
    display: inline-flex;
    color: var(--vs-ink-3);
  }
  .rt-accent {
    display: inline-flex;
    color: var(--vs-accent-ink);
  }
  .rt-muted {
    color: var(--vs-ink-3);
  }
  .rt-trunc {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  button:focus-visible,
  a:focus-visible,
  [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }

  /* ── scroll viewport + grid ─────────────────────────── */
  .rt-scroll {
    max-height: var(--rt-max-h, 438px);
    overflow: auto;
    overscroll-behavior: none;
    scrollbar-color: var(--vs-line-strong) transparent;
    scrollbar-gutter: stable;
  }
  .rt-scroll:focus-visible {
    box-shadow: inset 0 0 0 2px var(--vs-accent);
  }
  .rt-table {
    width: 100%;
    min-width: 1220px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--vs-ink);
    font-size: 13px;
    font-weight: 500;
    table-layout: fixed;
  }
  .rt-table th,
  .rt-table td {
    border-right: 1px solid var(--rt-line);
    border-bottom: 1px solid var(--rt-line);
    text-align: left;
    vertical-align: middle;
  }
  .rt-table tr > :last-child {
    border-right: 0;
  }
  .rt-table thead th {
    position: sticky;
    z-index: 5;
    top: 0;
    height: 35px;
    padding: 0;
    background: var(--vs-surface);
    color: var(--vs-ink-2);
    font-size: 12.5px;
    font-weight: 500;
  }
  .rt-table thead th.rt-sticky {
    z-index: 7;
  }

  /* header: property button + sort arrow */
  .rt-head {
    display: flex;
    height: 35px;
    align-items: center;
    transition: background-color 120ms ease-out, color 120ms ease-out;
  }
  .rt-head--company {
    gap: 8px;
    padding-left: 6px;
  }
  .rt-th:hover .rt-head {
    background: var(--vs-hover);
  }
  .rt-head-btn {
    display: flex;
    min-width: 0;
    height: 35px;
    flex: 1;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: var(--vs-ink-2);
    text-align: left;
    transition: color 120ms ease-out;
  }
  .rt-head--company .rt-head-btn {
    padding-left: 0;
  }
  .rt-th:hover .rt-head-btn {
    color: var(--vs-ink);
  }
  .rt-head-btn:focus-visible {
    box-shadow: inset 0 0 0 2px var(--vs-accent);
  }
  .rt-head-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--vs-ink-3);
  }
  .rt-sort {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    margin-left: -8px;
    border-radius: var(--vs-radius-chip);
    color: var(--vs-ink-2);
    opacity: 0;
    transition: opacity 120ms ease-out, transform 160ms var(--vs-ease-out), background-color 120ms ease-out;
  }
  .rt-sort:hover {
    background: var(--vs-hover-2);
    color: var(--vs-ink);
  }
  .rt-th:hover .rt-sort,
  .rt-sort:focus-visible,
  .rt-sort.is-visible {
    opacity: 1;
  }
  .rt-sort.is-desc {
    transform: rotate(180deg);
  }

  .rt-resize {
    position: absolute;
    z-index: 12;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
  }
  .rt-resize::after {
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 5px;
    width: 2px;
    border-radius: 99px;
    background: var(--vs-accent);
    content: "";
    opacity: 0;
    transform: scaleY(0.65);
    transition: opacity 120ms ease-out, transform 150ms var(--vs-ease-out);
  }
  .rt-resize:hover::after,
  .rt-resize:focus-visible::after,
  .rt-resize.is-resizing::after {
    opacity: 1;
    transform: scaleY(1);
  }
  .rt-resize:focus-visible {
    box-shadow: none;
  }

  .rt-actions {
    display: flex;
    height: 35px;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
  }
  .rt-icon-btn {
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: var(--vs-ink-2);
    transition: background-color 100ms ease-out, color 100ms ease-out;
  }
  .rt-icon-btn--quiet {
    color: var(--vs-ink-3);
  }
  .rt-icon-btn:hover,
  .rt-icon-btn[aria-expanded="true"] {
    background: var(--vs-hover);
    color: var(--vs-ink);
  }

  /* ── checkbox ───────────────────────────────────────── */
  .rt-checkbox {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    border-radius: var(--vs-radius-chip);
    cursor: pointer;
  }
  .rt-checkbox input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .rt-box {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in oklab, var(--vs-ink-3) 55%, var(--vs-surface));
    border-radius: 6px;
    background: color-mix(in oklab, var(--vs-ink) 5%, var(--vs-surface));
    color: var(--vs-on-accent);
    pointer-events: none;
    transition: border-color 140ms ease-out, background-color 140ms ease-out, transform 140ms var(--vs-ease-out);
  }
  .rt-box :global(svg),
  .rt-dash {
    display: none;
  }
  .rt-dash {
    width: 8px;
    height: 1.5px;
    border-radius: 99px;
    background: var(--vs-on-accent);
  }
  .rt-checkbox:hover .rt-box {
    border-color: color-mix(in oklab, var(--vs-ink-3) 80%, var(--vs-surface));
    background: var(--vs-hover);
  }
  .rt-checkbox:active .rt-box {
    transform: scale(0.96);
  }
  .rt-checkbox input:focus-visible + .rt-box {
    box-shadow: var(--vs-focus-ring);
  }
  .rt-checkbox input:checked + .rt-box,
  .rt-checkbox input:indeterminate + .rt-box {
    border-color: var(--vs-accent);
    background: var(--vs-accent);
  }
  .rt-checkbox input:checked + .rt-box :global(svg) {
    display: block;
  }
  .rt-checkbox input:indeterminate + .rt-box .rt-dash {
    display: block;
  }

  /* ── cells ──────────────────────────────────────────── */
  .rt-cell {
    height: 35px;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rt-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--vs-surface);
    box-shadow: 5px 0 8px -10px oklch(0 0 0 / 0.4);
  }
  .rt-company {
    padding-left: 6px;
  }
  .rt-company-inner {
    display: flex;
    min-width: 0;
    align-items: center;
  }
  .rt-row > .rt-cell {
    transition: background-color 120ms ease-out, color 120ms ease-out;
  }
  .rt-row:hover > .rt-cell {
    background: var(--vs-hover);
  }
  .rt-row.is-selected > .rt-cell {
    background: color-mix(in srgb, var(--vs-accent) 7%, var(--vs-surface));
  }

  /* gutter: the row number gives way to the checkbox on hover, focus or selection */
  .rt-gutter {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    margin-right: 4px;
  }
  .rt-rownum {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    color: var(--vs-ink-3);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
  }
  .rt-gutter .rt-checkbox {
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  .rt-row:hover .rt-gutter .rt-checkbox,
  .rt-row.is-selected .rt-gutter .rt-checkbox,
  .rt-gutter:focus-within .rt-checkbox {
    opacity: 1;
  }
  .rt-row:hover .rt-rownum,
  .rt-row.is-selected .rt-rownum,
  .rt-gutter:focus-within .rt-rownum {
    visibility: hidden;
  }

  .rt-mark {
    display: inline-flex;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--vs-ink-2);
    background: var(--vs-field);
    font-size: 10px;
    font-weight: 500;
  }
  .rt-name {
    min-width: 0;
    overflow: hidden;
    color: var(--vs-ink);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rt-name.has-link:hover,
  .rt-name.has-link:focus-visible {
    color: var(--vs-accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .rt-val {
    display: contents;
  }

  /* tags */
  .rt-tags {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 4px;
    overflow: hidden;
  }
  .rt-tag {
    display: inline-flex;
    height: 23px;
    max-width: 115px;
    flex-shrink: 0;
    align-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rt-tag) 34%, var(--vs-surface));
    border-radius: 8px;
    padding: 0 7px;
    /* Text leans on --vs-ink, which flips with the mode: AA (4.5:1+) on the tint in paper and ink. */
    color: color-mix(in srgb, var(--rt-tag) 45%, var(--vs-ink));
    background: color-mix(in srgb, var(--rt-tag) 22%, var(--vs-surface));
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rt-tag[hidden],
  .rt-more[hidden] {
    display: none;
  }
  .rt-more {
    display: inline-flex;
    height: 23px;
    flex-shrink: 0;
    align-items: center;
    border: 1px solid var(--vs-line-strong);
    border-radius: 6px;
    padding: 0 7px;
    color: var(--vs-ink-3);
    background: var(--vs-inset);
    font-size: 11px;
    font-weight: 500;
  }

  .rt-strength {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--vs-ink-2);
  }
  .rt-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
  }
  .rt-link {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: var(--vs-accent-ink);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
    transition: color 120ms ease-out, text-decoration-color 120ms ease-out;
  }
  .rt-link-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rt-link :global(svg) {
    flex-shrink: 0;
  }
  .rt-link:hover,
  .rt-link:focus-visible {
    color: var(--vs-ink);
    text-decoration-color: currentColor;
  }

  /* selected column: the property being configured */
  .rt-table th:global(.is-colsel) {
    background: color-mix(in srgb, var(--vs-accent) 8%, var(--vs-surface));
    box-shadow: inset 0 2px 0 var(--vs-accent);
  }
  .rt-table th:global(.is-colsel) .rt-head-btn,
  .rt-table th:global(.is-colsel) .rt-head-icon {
    color: var(--vs-accent-ink);
  }
  .rt-table td:global(.is-colsel) {
    background: color-mix(in srgb, var(--vs-accent) 4%, var(--vs-surface));
  }
  .rt-row:hover > td:global(.is-colsel) {
    background: color-mix(in srgb, var(--vs-accent) 8%, var(--vs-surface));
  }
  .rt-row.is-selected > td:global(.is-colsel) {
    background: color-mix(in srgb, var(--vs-accent) 10%, var(--vs-surface));
  }

  /* calculating state */
  .rt-cell:global(.is-calc) > .rt-val {
    display: none;
  }
  .vs-records-table :global(.rt-calc) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .vs-records-table :global(.rt-pulse) {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--vs-accent);
    animation: vs-pulse 1.1s ease-in-out infinite;
  }

  /* footer calculations */
  .rt-table tfoot td {
    position: sticky;
    z-index: 4;
    bottom: 0;
    height: 35px;
    background: var(--vs-inset);
    color: var(--vs-ink-2);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
  }
  .rt-table tfoot .rt-sticky {
    z-index: 6;
    background: var(--vs-inset);
  }
  .rt-foot {
    display: inline-flex;
    height: 35px;
    align-items: center;
    vertical-align: middle;
  }
  .rt-foot-label {
    color: var(--vs-ink-2);
  }
  .rt-foot-num {
    margin-right: 3px;
    color: var(--vs-ink);
    font-variant-numeric: tabular-nums;
  }
  .rt-average {
    gap: 7px;
    color: var(--vs-ink-2);
  }
  .rt-add-calc {
    display: inline-flex;
    height: 35px;
    align-items: center;
    gap: 6px;
    color: var(--vs-ink-3);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: color 120ms ease-out, transform 140ms var(--vs-ease-out);
  }
  .rt-add-calc:hover {
    color: var(--vs-ink);
  }
  .rt-add-calc:active {
    transform: scale(0.96);
  }

  /* ── popovers ───────────────────────────────────────── */
  .rt-pop {
    position: fixed;
    inset: auto;
    z-index: 50;
    display: none;
    margin: 0;
    border: 0;
    overflow: visible;
    background: var(--vs-surface);
    color: var(--vs-ink);
    box-shadow: var(--vs-shadow-overlay);
    font-family: var(--vs-font-sans);
    font-size: 13px;
    text-align: left;
  }
  .rt-pop.is-open {
    display: block;
  }
  .rt-pop.is-anim {
    animation: vs-pop-in 160ms var(--vs-ease-out) both;
  }
  .rt-prop {
    width: 320px;
    padding: 12px 12px 6px;
    border-radius: 14px;
  }
  .rt-menu {
    padding: 6px;
    border-radius: 14px;
  }
  .rt-menu--add {
    width: 260px;
  }
  .rt-menu--options {
    width: 220px;
  }
  .rt-prop-title {
    padding-bottom: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .rt-config-row {
    position: relative;
    display: flex;
    height: 32px;
    align-items: center;
    justify-content: space-between;
  }
  .rt-config-label {
    font-size: 13px;
    color: var(--vs-ink-3);
  }
  .rt-config-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .rt-config-btn {
    display: flex;
    max-width: 220px;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vs-ink);
    transition: background-color 100ms ease-out;
  }
  .rt-config-btn:hover,
  .rt-config-btn[aria-expanded="true"] {
    background: var(--vs-hover);
  }
  .rt-config-btn--inputs {
    font-weight: 400;
    color: var(--vs-ink-2);
  }
  .rt-input-chips {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
  }
  .vs-records-table :global(.rt-input-chip),
  .vs-records-table :global(.rt-prompt-chip) {
    max-width: 92px;
    overflow: hidden;
    border-radius: 5px;
    padding: 2px 6px;
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vs-records-table :global(.rt-prompt-chip) {
    max-width: none;
  }
  .vs-records-table :global(.rt-input-more) {
    font-size: 11px;
    font-weight: 500;
    color: var(--vs-ink-3);
  }
  .rt-help-btn {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--vs-ink-3);
    transition: background-color 100ms ease-out, color 100ms ease-out;
  }
  .rt-help-btn:hover {
    background: var(--vs-hover);
    color: var(--vs-ink);
  }
  .rt-help {
    position: absolute;
    z-index: 30;
    top: 30px;
    right: 0;
    width: 230px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--vs-tooltip-bg);
    color: var(--vs-tooltip-fg);
    box-shadow: var(--vs-shadow-overlay);
    font-size: 12px;
    line-height: 1.6;
  }

  /* side pickers */
  .rt-picker {
    position: absolute;
    z-index: 30;
    top: 0;
    left: calc(100% + 20px);
    width: 210px;
    padding: 6px;
    border-radius: 12px;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-overlay);
    transform-origin: top left;
  }
  .rt-picker--wide {
    width: 220px;
  }
  .rt-picker.is-flipped {
    right: calc(100% + 20px);
    left: auto;
    transform-origin: top right;
  }
  .rt-picker:global(.is-anim) {
    animation: vs-pop-in 140ms var(--vs-ease-out) both;
  }
  .rt-picker[hidden],
  .rt-help[hidden],
  .rt-more-settings[hidden] {
    display: none;
  }
  .rt-picker-label,
  .rt-menu-label {
    padding: 2px 8px 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--vs-ink-3);
  }
  .rt-menu-label {
    padding-top: 4px;
    font-size: 12px;
  }
  .rt-picker-list,
  .rt-menu-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .rt-menu-row {
    display: flex;
    width: 100%;
    height: 32px;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vs-ink);
    text-align: left;
  }
  .rt-menu-row[hidden] {
    display: none;
  }
  .rt-row-icon {
    display: flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  .rt-row-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rt-row-check {
    display: inline-flex;
    visibility: hidden;
    color: var(--vs-ink);
  }
  .rt-menu-row[aria-checked="true"] .rt-row-check {
    visibility: visible;
  }
  .rt-mini-box {
    display: flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vs-line-strong);
    border-radius: 5px;
    color: transparent;
  }
  .rt-menu-row[aria-checked="true"] .rt-mini-box {
    border-color: var(--vs-accent);
    background: var(--vs-accent);
    color: var(--vs-on-accent);
  }
  .rt-menu-item {
    display: flex;
    width: 100%;
    height: 36px;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--vs-ink);
    text-align: left;
  }
  .rt-menu-sep {
    height: 1px;
    margin: 4px 0;
    background: var(--vs-line);
  }
  .rt-menu-row:focus-visible,
  .rt-menu-item:focus-visible,
  .rt-action-row:focus-visible {
    box-shadow: none;
    outline: none;
  }

  /* prompt */
  .rt-prompt {
    min-height: 88px;
    margin-top: 8px;
    padding: 12px;
    border-radius: 10px;
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-hairline);
    color: var(--vs-ink);
    font-size: 13px;
    line-height: 1.625;
    cursor: text;
    outline: none;
    transition: box-shadow 150ms ease-out;
  }
  .rt-prompt:focus {
    box-shadow: 0 0 0 2px var(--vs-accent);
  }
  .rt-prompt:empty::before {
    content: attr(data-placeholder);
    color: var(--vs-ink-3);
  }

  .rt-go {
    display: flex;
    width: 100%;
    height: 36px;
    margin-top: 10px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    color: var(--vs-ink);
    box-shadow: var(--vs-shadow-btn);
    font-size: 12.5px;
    font-weight: 500;
    transition: background-color 150ms ease-out, transform 150ms ease-out;
  }
  .rt-go:hover {
    background: var(--vs-hover);
  }
  .rt-go:active {
    transform: scale(0.98);
  }
  .rt-go:disabled {
    opacity: 0.6;
    cursor: default;
  }

  .rt-prop-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--vs-line);
  }
  .rt-action-row {
    display: flex;
    height: 32px;
    align-items: center;
    gap: 10px;
    margin: 0 -6px;
    padding: 0 6px;
    border-radius: 8px;
    color: var(--vs-ink);
    font-size: 13px;
    line-height: 1;
    text-align: left;
    transition: transform 150ms ease-out;
  }
  .rt-action-row[hidden] {
    display: none;
  }
  .rt-action-row:active {
    transform: scale(0.96);
  }
  .rt-action-row.is-pinned > :first-child {
    color: var(--vs-accent-ink);
  }
  .rt-grow {
    flex: 1;
  }
  .rt-more-chevron {
    transition: transform 150ms ease-out;
  }
  .rt-action-row.is-open .rt-more-chevron {
    transform: rotate(90deg);
  }
  .rt-more-settings {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--vs-line);
    animation: vs-fade-up 160ms var(--vs-ease-out) both;
  }
  .rt-subhead {
    padding-bottom: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--vs-ink-3);
  }

  /* touch: :hover sticks after a tap, so neutralize row/header hovers there */
  @media (hover: none) {
    .rt-row:hover > .rt-cell {
      background: transparent;
    }
    .rt-row:hover > td:global(.is-colsel) {
      background: color-mix(in srgb, var(--vs-accent) 4%, var(--vs-surface));
    }
    .rt-th:hover .rt-head {
      background: transparent;
    }
    .rt-th:hover .rt-head-btn {
      color: var(--vs-ink-2);
    }
    .rt-gutter .rt-checkbox {
      opacity: 1;
    }
    .rt-rownum {
      visibility: hidden;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .rt-pop.is-anim,
    .rt-picker:global(.is-anim),
    .rt-more-settings {
      animation: none;
    }
    .vs-records-table :global(.rt-pulse) {
      animation: none;
      opacity: 1;
    }
    .rt-sort,
    .rt-row > .rt-cell,
    .rt-box {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .rt-pop {
      outline: 1px solid CanvasText;
    }
    .rt-box {
      forced-color-adjust: none;
    }
  }
</style>
```


---

# Filter Table

> Status chips that filter a table in place.

- **Slug:** `filter-table`
- **Kind:** component · **Category:** Data
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/FilterTable.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/filter-table
- **All files in one bundle:** https://viewership.ai/design/components/filter-table.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/filter-table.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/filter-table/`:

   - `FilterTable.astro` (raw: https://viewership.ai/design/raw/filter-table/FilterTable.astro.txt)

npm packages: none.

## Usage

```astro
---
import FilterTable from "../components/viewership/filter-table/FilterTable.astro";
---

<FilterTable />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FilterTable, { type FilterColumn, type FilterRow } from "./FilterTable.astro";

const columns: FilterColumn[] = [
  { key: "task", label: "Task name", width: 1.3, kind: "title" },
  { key: "date", label: "Date", width: 0.6, kind: "date" },
  { key: "status", label: "Status", width: 0.95, kind: "status" },
  { key: "account", label: "Channel", width: 0.9, kind: "muted" },
];

const rows: FilterRow[] = [
  { task: "Draft spring trail email", date: "Dec 03", status: "todo", account: "Email" },
  { task: "Review GEO citation report", date: "Sep 22", status: "progress", account: "Perplexity" },
  { task: "Approve gear guide video", date: "Jan 02", status: "todo", account: "YouTube" },
  { task: "Reply to camping thread", date: "Nov 08", status: "progress", account: "Reddit" },
  { task: "Send weekly GA4 report", date: "Apr 14", status: "done", account: "GA4" },
];
---

<div class="stage">
  <FilterTable rows={rows} columns={columns} caption="Marketing tasks" labels={{ result: "{filter}: showing {shown} of {total} tasks" }} />
</div>

<style>
  .stage {
    display: flex;
    justify-content: center;
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rows` | `Record<string, string>[]` | `[]` | One object per row, keyed by column key. |
| `columns` | `{ key; label; width?; kind?: "title" \| "muted" \| "date" \| "status" }[]` | `task / date / status / owner` | Column order, labels, widths and cell style. |
| `statuses` | `{ key; label; tone?: "amber" \| "cyan" \| "green" \| "red" \| "violet" \| "gray" }[]` | `To do / In Progress / Completed` | Filter chips and status pills. Counts come from `rows`. |
| `statusKey` | `string` | `"status"` | Row field holding the status key. |
| `filter` | `string` | `"all"` | Initial filter. |
| `caption` | `string` | `"Tasks"` | Hidden table caption. |
| `labels` | `{ all?, filterGroup?, result? }` |  | Chip and screen reader text. `result` takes {shown}, {total}, {filter}. |

## Source

### `src/components/viewership/filter-table/FilterTable.astro`

```astro
---
/**
 * FilterTable: status chips that filter a table in place. Chip counts come
 * from the data.
 *
 * Ported from Beautiful UI `components/primitives/FilterTable.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * @example
 * <FilterTable rows={tasks} caption="Marketing tasks" />
 *
 * Events: `vs-filter-change` (detail: { filter, shown, total }) on the root.
 */
import type { HTMLAttributes } from "astro/types";

export type FilterTone = "amber" | "cyan" | "green" | "red" | "violet" | "gray";
export type FilterStatus = { key: string; label: string; tone?: FilterTone };
export type FilterColumn = {
  key: string;
  label: string;
  /** Relative column width. */
  width?: number;
  /** title = emphasised, muted = secondary ink, date = muted + tabular, status = pill. */
  kind?: "title" | "muted" | "date" | "status";
};
export type FilterRow = Record<string, string>;

type Props = HTMLAttributes<"div"> & {
  rows?: FilterRow[];
  columns?: FilterColumn[];
  statuses?: FilterStatus[];
  /** Row field that holds the status key. */
  statusKey?: string;
  /** Initially selected filter ("all" or a status key). */
  filter?: string;
  /** Visually hidden table caption (also names the scroll region). */
  caption?: string;
  labels?: {
    all?: string;
    filterGroup?: string;
    /** Announced after filtering. Tokens: {shown}, {total}, {filter}. */
    result?: string;
  };
};

const DEFAULT_COLUMNS: FilterColumn[] = [
  { key: "task", label: "Task name", width: 1.3, kind: "title" },
  { key: "date", label: "Date", width: 0.6, kind: "date" },
  { key: "status", label: "Status", width: 0.95, kind: "status" },
  { key: "owner", label: "Owner", width: 0.9, kind: "muted" },
];

const DEFAULT_STATUSES: FilterStatus[] = [
  { key: "todo", label: "To do", tone: "amber" },
  { key: "progress", label: "In Progress", tone: "cyan" },
  { key: "done", label: "Completed", tone: "green" },
];

const {
  rows = [],
  columns = DEFAULT_COLUMNS,
  statuses = DEFAULT_STATUSES,
  statusKey = "status",
  filter = "all",
  caption = "Tasks",
  labels,
  class: className,
  ...rest
} = Astro.props;

const text = {
  all: "All",
  filterGroup: "Filter by status",
  result: "{filter}: showing {shown} of {total} rows",
  ...labels,
};

const uid = `vs-ft-${Math.random().toString(36).slice(2, 8)}`;
const statusOf = new Map(statuses.map((s) => [s.key, s]));
const filters = [
  { key: "all", label: text.all, tone: undefined as FilterTone | undefined, count: rows.length },
  ...statuses.map((s) => ({ ...s, count: rows.filter((r) => r[statusKey] === s.key).length })),
];
const totalWidth = columns.reduce((n, c) => n + (c.width ?? 1), 0);
const shown = (row: FilterRow) => filter === "all" || row[statusKey] === filter;
---

<div class:list={["vs-filter-table", className]} data-status-key={statusKey} data-result={text.result} {...rest}>
  <div class="chips" role="group" aria-label={text.filterGroup}>
    {filters.map((f) => (
      <button type="button" class="chip" aria-pressed={filter === f.key ? "true" : "false"} aria-controls={uid} data-filter={f.key} data-label={f.label}>
        {f.tone && <span class:list={["dot", `tone-${f.tone}`]} aria-hidden="true"></span>}
        {f.label}
        <span class="count">{f.count}</span>
      </button>
    ))}
  </div>

  <div class="scroll" role="region" aria-label={`${caption}, scrollable`} tabindex="0">
    <table id={uid}>
      <caption class="sr-only">{caption}</caption>
      <colgroup>
        {columns.map((c) => <col style={`width: ${(((c.width ?? 1) / totalWidth) * 100).toFixed(3)}%`} />)}
      </colgroup>
      <thead>
        <tr>
          {columns.map((c) => <th scope="col">{c.label}</th>)}
        </tr>
      </thead>
      <tbody>
        {rows.map((row) => (
          <tr data-status={row[statusKey]} data-hidden={shown(row) ? undefined : ""} aria-hidden={shown(row) ? undefined : "true"}>
            {columns.map((c) => {
              const value = row[c.key] ?? "";
              const status = c.kind === "status" ? statusOf.get(value) : undefined;
              return (
                <td>
                  <div class="ft-collapse">
                    <div class="clip">
                      <div class:list={["cell", `cell--${c.kind ?? "muted"}`]}>
                        {c.kind === "status" ? (
                          <span class:list={["pill", `tone-${status?.tone ?? "gray"}`]}>{status?.label ?? value}</span>
                        ) : (
                          <span class="value">{value}</span>
                        )}
                      </div>
                    </div>
                  </div>
                </td>
              );
            })}
          </tr>
        ))}
      </tbody>
    </table>
  </div>

  <p class="sr-only" role="status" aria-live="polite" data-announce></p>
</div>

<script>
  function init(root: HTMLElement) {
    const chips = [...root.querySelectorAll<HTMLButtonElement>(".chip")];
    const rows = [...root.querySelectorAll<HTMLTableRowElement>("tbody tr")];
    const announce = root.querySelector<HTMLElement>("[data-announce]");
    const template = root.dataset.result ?? "";

    const apply = (key: string, chip: HTMLButtonElement) => {
      let shown = 0;
      for (const row of rows) {
        const visible = key === "all" || row.dataset.status === key;
        if (visible) shown++;
        row.toggleAttribute("data-hidden", !visible);
        if (visible) row.removeAttribute("aria-hidden");
        else row.setAttribute("aria-hidden", "true");
      }
      chips.forEach((c) => c.setAttribute("aria-pressed", String(c === chip)));
      if (announce) {
        announce.textContent = template
          .replace("{shown}", String(shown))
          .replace("{total}", String(rows.length))
          .replace("{filter}", chip.dataset.label ?? key);
      }
      root.dispatchEvent(
        new CustomEvent("vs-filter-change", { detail: { filter: key, shown, total: rows.length }, bubbles: true }),
      );
    };

    chips.forEach((chip) =>
      chip.addEventListener("click", () => {
        if (chip.getAttribute("aria-pressed") === "true") return;
        apply(chip.dataset.filter ?? "all", chip);
      }),
    );
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-filter-table:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-filter-table {
    width: 100%;
    max-width: 420px;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* status tones */
  .tone-amber {
    --tag-base: oklch(0.757 0.153 66.401);
  }
  .tone-cyan {
    --tag-base: oklch(0.671 0.118 219.351);
  }
  .tone-green {
    --tag-base: oklch(0.652 0.131 162.865);
  }
  .tone-red {
    --tag-base: oklch(0.65 0.17 24);
  }
  .tone-violet {
    --tag-base: oklch(0.62 0.19 300);
  }
  .tone-gray {
    --tag-base: var(--vs-ink-3);
  }

  /* filter chips */
  .chips {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 -4px 4px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar {
    display: none;
  }
  .chip {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border: none;
    border-radius: var(--vs-radius-pill);
    background: transparent;
    color: var(--vs-ink-2);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition:
      background-color 200ms,
      box-shadow 200ms,
      color 200ms;
  }
  .chip:hover {
    background: var(--vs-hover);
  }
  .chip[aria-pressed="true"] {
    background: var(--vs-surface);
    color: var(--vs-ink);
    box-shadow: var(--vs-shadow-btn);
  }
  .chip:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tag-base);
  }
  .count {
    padding: 0 4px;
    border-radius: 4px;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: var(--vs-ink-3);
    transition: background-color 200ms, color 200ms;
  }
  .chip[aria-pressed="true"] .count {
    background: var(--vs-field);
    color: var(--vs-ink-2);
  }

  /* table */
  .scroll {
    overflow-x: auto;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
    scrollbar-width: none;
  }
  .scroll::-webkit-scrollbar {
    display: none;
  }
  .scroll:focus-visible {
    outline: none;
    box-shadow: var(--vs-shadow-card), var(--vs-focus-ring);
  }
  table {
    width: 100%;
    min-width: 420px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }
  th,
  td {
    padding: 0;
    vertical-align: top;
    text-align: left;
    border-right: 1px solid var(--vs-grid-line);
  }
  th:last-child,
  td:last-child {
    border-right: none;
  }
  th {
    padding: 8px 12px;
    border-bottom: 1px solid var(--vs-grid-line);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vs-ink-2);
  }
  tbody tr {
    transition: background-color 100ms;
  }
  tbody tr:hover:not([data-hidden]) {
    background: var(--vs-hover);
  }

  /* row collapse: grid-template-rows 1fr ↔ 0fr */
  .ft-collapse {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition:
      grid-template-rows 300ms var(--vs-ease-out),
      opacity 300ms var(--vs-ease-out);
  }
  tr[data-hidden] .ft-collapse {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  .clip {
    min-height: 0;
    overflow: hidden;
  }
  .cell {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    min-height: 40px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--vs-grid-line);
    font-size: 13px;
    color: var(--vs-ink-2);
  }
  .value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cell--title .value {
    font-weight: 500;
    color: var(--vs-ink);
  }
  .cell--date .value {
    font-variant-numeric: tabular-nums;
  }

  /* status pill */
  .pill {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    height: 23px;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, var(--tag-base) 34%, var(--vs-surface));
    border-radius: 8px;
    background: color-mix(in srgb, var(--tag-base) 20%, var(--vs-surface));
    color: color-mix(in srgb, var(--tag-base) 92%, var(--vs-ink));
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }
  :global(:root[data-theme="dark"]) .pill {
    background: color-mix(in srgb, var(--tag-base) 34%, var(--vs-surface));
    color: color-mix(in srgb, var(--tag-base) 86%, white);
  }
  @media (prefers-color-scheme: dark) {
    :global(:root:not([data-theme="light"])) .pill {
      background: color-mix(in srgb, var(--tag-base) 34%, var(--vs-surface));
      color: color-mix(in srgb, var(--tag-base) 86%, white);
    }
  }
</style>
```


---

# Sidebar Nav

> Collapsible workspace and chat navigation with searchable history.

- **Slug:** `sidebar-nav`
- **Kind:** component · **Category:** Navigation
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/SidebarNav.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/sidebar-nav
- **All files in one bundle:** https://viewership.ai/design/components/sidebar-nav.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/sidebar-nav.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/sidebar-nav/`:

   - `SidebarNav.astro` (raw: https://viewership.ai/design/raw/sidebar-nav/SidebarNav.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `glide-menu`: `GlideMenu.astro`, `glide-menu.ts` (docs: https://viewership.ai/design/components/glide-menu.md)

npm packages: none.

## Usage

```astro
---
import SidebarNav from "../components/viewership/sidebar-nav/SidebarNav.astro";
---

<SidebarNav />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import SidebarNav from "./SidebarNav.astro";

const chats = [
  { id: "weekly-report", label: "Weekly GA4 report" },
  { id: "spring-launch", label: "Spring launch campaign" },
  { id: "citations", label: "ChatGPT citation check" },
  { id: "brand-voice", label: "Brand voice guide" },
  { id: "reddit", label: "Reply to a Reddit thread" },
  { id: "approvals", label: "Campaign approval list" },
  { id: "email-draft", label: "Draft the spring email" },
  { id: "ads-audit", label: "Google Ads spend audit" },
];
---

<SidebarNav
  workspace={{ key: "northwind", name: "Northwind Outdoor", monogram: "N" }}
  recents={chats}
  height="560px"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `workspace` | `{ key, name, monogram? }` | `{ key: "workspace", name: "Workspace" }` | Current workspace. |
| `workspaces` | `SidebarWorkspace[]` |  | Switcher menu workspaces. Defaults to the current one. |
| `menuActions` | `{ key, label, icon? }[]` | `New workspace / Workspace settings / Invite team members` | Workspace menu actions. Sign out is always last. |
| `items` | `{ key, label, icon?, count?, href? }[]` | `Home / Invite users 3/10` | Primary rows. `icon`: built-in name (home, invite, inbox, calendar, chart, book, settings, spark) or inner SVG. `href` makes a link. |
| `recents` | `{ id, label, href? }[]` | `[]` | Searchable chat history. |
| `recentsLabel` | `string` | `"Chats"` | History label. |
| `activeNav / activeRecent` | `string` |  | Current item. Gets aria-current="page". |
| `newChat` | `boolean` | `true` | Show the New chat row. |
| `footerLabel / footerHref` | `string \| null` | `"Upgrade"` | Footer button. null hides it. |
| `collapsed` | `boolean` | `false` | Start as the 52px rail. |
| `fill / height` | `boolean / string` | `false / "600px"` | Fill parent height, or fixed height. |
| `Events` | `CustomEvent` |  | vs-sidebar-navigate { key }, vs-sidebar-pick { id, label }, vs-sidebar-new-chat, vs-sidebar-toggle { collapsed }, vs-sidebar-workspace { key }, vs-sidebar-menu { action }, vs-sidebar-footer. |

## Source

### `src/components/viewership/sidebar-nav/SidebarNav.astro`

```astro
---
/**
 * SidebarNav: collapsible workspace and chat navigation with a gliding hover
 * state and searchable history. Collapsing keeps every rail glyph centred
 * at x = 26 in both states.
 *
 * Ported from Beautiful UI `components/primitives/SidebarNav.tsx`
 * (MIT, © 2026 Shane Levine). Icons are Lucide (ISC).
 *
 * - Collapse and expand buttons use `aria-expanded`; the current item
 *   carries `aria-current="page"`.
 * - Items with `href` render as links; without, as buttons that fire an event.
 * - Without JS the expanded sidebar renders with working links.
 *
 * Events (bubbling, on the root):
 *   vs-sidebar-navigate   detail: { key }
 *   vs-sidebar-pick       detail: { id, label }
 *   vs-sidebar-new-chat
 *   vs-sidebar-toggle     detail: { collapsed }
 *   vs-sidebar-workspace  detail: { key }
 *   vs-sidebar-menu       detail: { action }
 *   vs-sidebar-footer
 *
 * @example
 * <SidebarNav workspace={{ key: "northwind", name: "Northwind Outdoor" }} recents={chats} />
 */
import type { HTMLAttributes } from "astro/types";
import GlideMenu from "../glide-menu/GlideMenu.astro";

export interface SidebarWorkspace {
  key: string;
  name: string;
  /** Single glyph for the menu's monogram. Defaults to the first letter. */
  monogram?: string;
}
export interface SidebarItem {
  key: string;
  label: string;
  /** A built-in icon name (home, invite, inbox, calendar, chart, book, settings, spark) or raw inner SVG markup (24×24, stroked). */
  icon?: string;
  /** Trailing meta, e.g. "3/10". */
  count?: string;
  href?: string;
}
export interface SidebarRecent {
  id: string;
  label: string;
  href?: string;
}

type Props = HTMLAttributes<"nav"> & {
  /** Current workspace. */
  workspace?: SidebarWorkspace;
  /** Every workspace listed in the switcher (defaults to just the current one). */
  workspaces?: SidebarWorkspace[];
  /** Workspace menu actions below the workspace list. */
  menuActions?: Array<{ key: string; label: string; icon?: string }>;
  items?: SidebarItem[];
  /** Label of the history section. */
  recentsLabel?: string;
  recents?: SidebarRecent[];
  /** Key of the current primary item (aria-current). */
  activeNav?: string;
  /** Id of the current chat (aria-current). */
  activeRecent?: string;
  /** Show the New chat row. */
  newChat?: boolean;
  footerLabel?: string | null;
  footerHref?: string;
  /** Start collapsed. */
  collapsed?: boolean;
  /** Fill the parent's height instead of `height`. */
  fill?: boolean;
  height?: string;
};

const {
  workspace = { key: "workspace", name: "Workspace" },
  workspaces,
  menuActions = [
    { key: "new-workspace", label: "New workspace", icon: "plus" },
    { key: "settings", label: "Workspace settings", icon: "settings" },
    { key: "invite", label: "Invite team members", icon: "invite" },
  ],
  items = [
    { key: "home", label: "Home", icon: "home" },
    { key: "invite", label: "Invite users", icon: "invite", count: "3/10" },
  ],
  recentsLabel = "Chats",
  recents = [],
  activeNav,
  activeRecent,
  newChat = true,
  footerLabel = "Upgrade",
  footerHref,
  collapsed = false,
  fill = false,
  height = "600px",
  class: className,
  style,
  "aria-label": ariaLabel = "Workspace navigation",
  ...rest
} = Astro.props;

const uid = `vs-sb-${Math.random().toString(36).slice(2, 8)}`;
const allWorkspaces = workspaces?.length ? workspaces : [workspace];

/* Lucide icons (ISC). */
const ICONS: Record<string, string> = {
  home: '<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" /><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />',
  invite: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M19 8v6" /><path d="M22 11h-6" />',
  edit: '<path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" />',
  search: '<circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />',
  x: '<path d="M18 6 6 18" /><path d="m6 6 12 12" />',
  chevronDown: '<path d="m6 9 6 6 6-6" />',
  panelClose: '<rect width="18" height="18" x="3" y="3" rx="2" /><path d="M9 3v18" /><path d="m16 15-3-3 3-3" />',
  panelOpen: '<rect width="18" height="18" x="3" y="3" rx="2" /><path d="M9 3v18" /><path d="m14 9 3 3-3 3" />',
  plus: '<path d="M5 12h14" /><path d="M12 5v14" />',
  settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><circle cx="12" cy="12" r="3" />',
  logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><path d="m16 17 5-5-5-5" /><path d="M21 12H9" />',
  check: '<path d="M20 6 9 17l-5-5" />',
  spark: '<path d="M12 3l1.8 7.2L21 12l-7.2 1.8L12 21l-1.8-7.2L3 12l7.2-1.8z" />',
  inbox: '<path d="M22 12h-6l-2 3h-4l-2-3H2" /><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />',
  calendar: '<path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />',
  chart: '<path d="M3 3v16a2 2 0 0 0 2 2h16" /><path d="M18 17V9" /><path d="M13 17V5" /><path d="M8 17v-3" />',
  book: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />',
};
const icon = (name: string | undefined, size = 18, sw = 2) => {
  const inner = !name ? ICONS.home : name.includes("<") ? name : (ICONS[name] ?? ICONS.home);
  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
};

const rootStyle = [fill ? "--sb-h: 100%" : `--sb-h: ${height}`, typeof style === "string" ? style : ""].filter(Boolean).join("; ");
---

<nav
  class:list={["vs-sidebar-nav", className]}
  id={uid}
  data-collapsed={collapsed ? "true" : "false"}
  aria-label={ariaLabel}
  style={rootStyle}
  {...rest}
>
  <div class="sb-tree">
    <div class="sb-top">
      <button
        type="button"
        class="sb-workspace"
        data-workspace-trigger
        aria-haspopup="menu"
        aria-expanded="false"
        aria-controls={`${uid}-ws-menu`}
        inert={collapsed}
      >
        <span class="sb-logo" set:html={icon("spark")} />
        <span class="sb-copy sb-ws-name">{workspace.name}</span>
        <span class="sb-copy sb-ws-chevron" set:html={icon("chevronDown", 16)} />
        <span class="sb-sr">, switch workspace</span>
      </button>
      <button type="button" class="sb-collapse" data-collapse aria-label="Collapse sidebar" aria-expanded="true" aria-controls={uid} inert={collapsed}>
        <Fragment set:html={icon("panelClose")} />
      </button>
      <button type="button" class="sb-expand" data-expand aria-label="Expand sidebar" aria-expanded="false" aria-controls={uid} inert={!collapsed}>
        <Fragment set:html={icon("panelOpen")} />
      </button>
    </div>

    <GlideMenu class="sb-group" rowSelector="[data-row]" highlightBg="var(--vs-hover-2)" highlightRadius="7px" highlightInset="8px" highlightClass="sb-highlight">
      {
        newChat && (
          <button type="button" class="sb-row" data-row data-new-chat title={collapsed ? "New chat" : undefined}>
            <span class="sb-icon" set:html={icon("edit")} />
            <span class="sb-copy sb-label">New chat</span>
          </button>
        )
      }
      {
        items.map((item) => {
          const current = item.key === activeNav;
          const Tag = item.href ? "a" : "button";
          return (
            <Tag
              class="sb-row"
              data-row
              data-nav={item.key}
              href={item.href}
              type={item.href ? undefined : "button"}
              aria-current={current ? "page" : undefined}
            >
              <span class="sb-icon" set:html={icon(item.icon)} />
              <span class="sb-copy sb-label">{item.label}</span>
              {item.count && <span class="sb-copy sb-count">{item.count}</span>}
            </Tag>
          );
        })
      }
    </GlideMenu>

    <div class="sb-chats" data-chats inert={collapsed}>
      <div class="sb-copy sb-chats-head">
        <div class="sb-chats-label" id={`${uid}-chats-label`}>
          <Fragment set:html={icon("chevronDown", 16)} />
          <span>{recentsLabel}</span>
        </div>
        <button type="button" class="sb-search-btn" data-search-open aria-label={`Search ${recentsLabel.toLowerCase()}`} aria-expanded="false" aria-controls={`${uid}-search`}>
          <Fragment set:html={icon("search", 16)} />
        </button>
        <div class="sb-search" id={`${uid}-search`} data-search>
          <span class="sb-search-icon" set:html={icon("search", 15)} />
          <input type="search" class="sb-search-input" data-search-input placeholder={`Search ${recentsLabel.toLowerCase()}`} aria-label={`Search ${recentsLabel.toLowerCase()} history`} tabindex="-1" />
          <button type="button" class="sb-search-close" data-search-close aria-label="Close search" tabindex="-1">
            <Fragment set:html={icon("x", 16)} />
          </button>
        </div>
      </div>

      <GlideMenu class="sb-group sb-recents" rowSelector="[data-row]" highlightBg="var(--vs-hover-2)" highlightRadius="7px" highlightInset="8px" highlightClass="sb-highlight" role="list" aria-labelledby={`${uid}-chats-label`}>
        {
          recents.map((item) => {
            const current = item.id === activeRecent;
            const Tag = item.href ? "a" : "button";
            return (
              <div role="listitem" class="sb-li" data-recent-item>
                <Tag
                  class="sb-row sb-row--recent"
                  data-row
                  data-recent={item.id}
                  href={item.href}
                  type={item.href ? undefined : "button"}
                  title={item.label}
                  aria-current={current ? "page" : undefined}
                >
                  <span class="sb-copy sb-label">{item.label}</span>
                </Tag>
              </div>
            );
          })
        }
      </GlideMenu>
      <p class="sb-copy sb-empty" data-empty hidden>No {recentsLabel.toLowerCase()} found</p>
      <p class="sb-sr" aria-live="polite" data-search-status></p>
    </div>

    {
      footerLabel && (
        <div class="sb-copy sb-footer" data-footer inert={collapsed}>
          {footerHref ? (
            <a class="sb-footer-btn" href={footerHref}>{footerLabel}</a>
          ) : (
            <button type="button" class="sb-footer-btn" data-footer-btn>
              {footerLabel}
            </button>
          )}
        </div>
      )
    }
  </div>

  <div class="sb-menu" id={`${uid}-ws-menu`} popover="manual" data-ws-menu>
    <GlideMenu class="sb-menu-list" role="menu" aria-label="Workspace" arrowKeys highlightBg="var(--vs-hover-2)" highlightRadius="8px">
      {
        allWorkspaces.map((ws) => (
          <button
            type="button"
            class="sb-menu-row sb-menu-row--ws"
            data-menu-row
            role="menuitemradio"
            aria-checked={ws.key === workspace.key ? "true" : "false"}
            data-ws={ws.key}
          >
            <span class="sb-monogram" aria-hidden="true">{ws.monogram ?? ws.name.charAt(0)}</span>
            <span class="sb-menu-label sb-menu-label--strong">{ws.name}</span>
            <span class="sb-menu-check" set:html={icon("check", 18)} />
          </button>
        ))
      }
      <div class="sb-menu-sep" role="separator"></div>
      {
        menuActions.map((a) => (
          <button type="button" class="sb-menu-row" data-menu-row role="menuitem" data-action={a.key}>
            <span class="sb-menu-icon" set:html={icon(a.icon, 16)} />
            <span class="sb-menu-label">{a.label}</span>
          </button>
        ))
      }
      <div class="sb-menu-sep" role="separator"></div>
      <button type="button" class="sb-menu-row" data-menu-row role="menuitem" data-action="sign-out">
        <span class="sb-menu-icon" set:html={icon("logout", 16)} />
        <span class="sb-menu-label">Sign out</span>
      </button>
    </GlideMenu>
  </div>
</nav>

<script>
  function init(root: HTMLElement) {
    const emit = (name: string, detail?: unknown) => root.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }));
    const q = <T extends HTMLElement = HTMLElement>(sel: string) => root.querySelector<T>(sel);

    const wsTrigger = q<HTMLButtonElement>("[data-workspace-trigger]")!;
    const collapseBtn = q<HTMLButtonElement>("[data-collapse]")!;
    const expandBtn = q<HTMLButtonElement>("[data-expand]")!;
    const chats = q("[data-chats]")!;
    const footer = q("[data-footer]");
    const menu = q("[data-ws-menu]")!;
    const searchOpenBtn = q<HTMLButtonElement>("[data-search-open]")!;
    const searchInput = q<HTMLInputElement>("[data-search-input]")!;
    const searchClose = q<HTMLButtonElement>("[data-search-close]")!;
    const empty = q("[data-empty]")!;
    const status = q("[data-search-status]")!;
    const newChatBtn = q<HTMLButtonElement>("[data-new-chat]");

    /* ── collapse ──────────────────────────────────────── */
    const navRows = Array.from(root.querySelectorAll<HTMLElement>("[data-nav], [data-new-chat]"));
    const setCollapsed = (collapsed: boolean, moveFocus: boolean) => {
      root.dataset.collapsed = String(collapsed);
      collapseBtn.inert = collapsed;
      wsTrigger.inert = collapsed;
      chats.inert = collapsed;
      if (footer) footer.inert = collapsed;
      expandBtn.inert = !collapsed;
      collapseBtn.setAttribute("aria-expanded", String(!collapsed));
      expandBtn.setAttribute("aria-expanded", String(!collapsed));
      // Icon-only rows keep a tooltip while collapsed.
      navRows.forEach((row) => {
        if (collapsed) row.title = row.querySelector(".sb-label")?.textContent ?? "";
        else row.removeAttribute("title");
      });
      if (collapsed) {
        closeMenu(false);
        closeSearch(false);
      }
      if (moveFocus) (collapsed ? expandBtn : collapseBtn).focus();
      emit("vs-sidebar-toggle", { collapsed });
    };
    collapseBtn.addEventListener("click", () => setCollapsed(true, true));
    expandBtn.addEventListener("click", () => setCollapsed(false, true));

    /* ── current item ──────────────────────────────────── */
    const setCurrent = (row: HTMLElement | null) => {
      root.querySelectorAll("[data-row][aria-current]").forEach((el) => el.removeAttribute("aria-current"));
      row?.setAttribute("aria-current", "page");
    };
    root.querySelectorAll<HTMLElement>("[data-nav]").forEach((row) => {
      row.addEventListener("click", () => {
        if (row.tagName === "BUTTON") setCurrent(row);
        emit("vs-sidebar-navigate", { key: row.dataset.nav });
      });
    });
    root.querySelectorAll<HTMLElement>("[data-recent]").forEach((row) => {
      row.addEventListener("click", () => {
        if (row.tagName === "BUTTON") setCurrent(row);
        emit("vs-sidebar-pick", { id: row.dataset.recent, label: row.textContent?.trim() });
      });
    });
    newChatBtn?.addEventListener("click", () => {
      setCurrent(null);
      emit("vs-sidebar-new-chat");
    });
    root.querySelector("[data-footer-btn]")?.addEventListener("click", () => emit("vs-sidebar-footer"));

    /* ── workspace menu (top layer) ────────────────────── */
    const supportsPopover = typeof HTMLElement.prototype.showPopover === "function";
    let menuOpen = false;
    const openMenu = (viaKeyboard: boolean) => {
      menuOpen = true;
      wsTrigger.setAttribute("aria-expanded", "true");
      menu.classList.add("is-open");
      if (supportsPopover) menu.showPopover();
      positionMenu();
      menu.classList.remove("is-anim");
      void menu.offsetWidth;
      menu.classList.add("is-anim");
      if (viaKeyboard) menu.querySelector<HTMLElement>('[aria-checked="true"]')?.focus();
    };
    function positionMenu() {
      const rect = wsTrigger.getBoundingClientRect();
      const width = menu.offsetWidth;
      menu.style.left = `${Math.max(8, Math.min(rect.left, window.innerWidth - width - 8))}px`;
      menu.style.top = `${rect.bottom + 6}px`;
    }
    function closeMenu(restoreFocus: boolean) {
      if (!menuOpen) return;
      menuOpen = false;
      wsTrigger.setAttribute("aria-expanded", "false");
      menu.classList.remove("is-open", "is-anim");
      if (supportsPopover && menu.matches(":popover-open")) menu.hidePopover();
      if (restoreFocus) wsTrigger.focus();
    }
    wsTrigger.addEventListener("click", (e) => (menuOpen ? closeMenu(false) : openMenu(e.detail === 0)));
    wsTrigger.addEventListener("keydown", (e) => {
      if (e.key === "ArrowDown" && !menuOpen) {
        e.preventDefault();
        openMenu(true);
      }
    });
    menu.addEventListener("click", (e) => {
      const row = (e.target as Element).closest<HTMLElement>("[data-menu-row]");
      if (!row) return;
      if (row.dataset.ws) {
        menu.querySelectorAll("[data-ws]").forEach((el) => el.setAttribute("aria-checked", String(el === row)));
        const name = row.querySelector(".sb-menu-label")?.textContent ?? "";
        const label = root.querySelector(".sb-ws-name");
        if (label) label.textContent = name;
        emit("vs-sidebar-workspace", { key: row.dataset.ws });
      } else emit("vs-sidebar-menu", { action: row.dataset.action });
      closeMenu(true);
    });
    menu.addEventListener("keydown", (e) => {
      if (e.key === "Escape" || e.key === "Tab") {
        if (e.key === "Escape") e.preventDefault();
        closeMenu(e.key === "Escape");
      }
    });
    const onPointerDown = (e: PointerEvent) => {
      const t = e.target as Element;
      if (menuOpen && !t.closest("[data-ws-menu]") && !wsTrigger.contains(t)) closeMenu(false);
    };
    const onResize = () => menuOpen && positionMenu();
    document.addEventListener("pointerdown", onPointerDown);
    window.addEventListener("resize", onResize);
    window.addEventListener("scroll", onResize, { passive: true });

    /* ── chat search: the field grows right → left from the search control ── */
    const recentItems = Array.from(root.querySelectorAll<HTMLElement>("[data-recent-item]"));
    const filter = () => {
      const query = searchInput.value.trim().toLowerCase();
      let shown = 0;
      recentItems.forEach((item) => {
        const match = (item.textContent ?? "").toLowerCase().includes(query);
        item.hidden = !match;
        if (match) shown += 1;
      });
      empty.hidden = !(query && shown === 0);
      status.textContent = query ? (shown ? `${shown} ${shown === 1 ? "result" : "results"}` : empty.textContent ?? "") : "";
    };
    const openSearch = () => {
      root.dataset.search = "open";
      searchOpenBtn.setAttribute("aria-expanded", "true");
      searchOpenBtn.tabIndex = -1;
      searchInput.tabIndex = 0;
      searchClose.tabIndex = 0;
      searchInput.focus();
    };
    function closeSearch(restoreFocus: boolean) {
      if (root.dataset.search !== "open") return;
      delete root.dataset.search;
      searchOpenBtn.setAttribute("aria-expanded", "false");
      searchOpenBtn.tabIndex = 0;
      searchInput.tabIndex = -1;
      searchClose.tabIndex = -1;
      searchInput.value = "";
      filter();
      if (restoreFocus) searchOpenBtn.focus();
    }
    searchOpenBtn.addEventListener("click", openSearch);
    searchClose.addEventListener("click", () => closeSearch(true));
    searchInput.addEventListener("input", filter);
    searchInput.addEventListener("keydown", (e) => {
      if (e.key === "Escape") {
        e.preventDefault();
        closeSearch(true);
      }
    });

    return () => {
      closeMenu(false);
      document.removeEventListener("pointerdown", onPointerDown);
      window.removeEventListener("resize", onResize);
      window.removeEventListener("scroll", onResize);
    };
  }

  const teardowns = new Set<() => void>();
  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-sidebar-nav:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      teardowns.add(init(root));
    });
  boot();
  document.addEventListener("astro:page-load", boot);
  document.addEventListener("astro:before-swap", () => {
    teardowns.forEach((fn) => fn());
    teardowns.clear();
  });
</script>

<style>
  .vs-sidebar-nav {
    --sb-expanded: 224px;
    --sb-collapsed: 52px;
    --sb-duration: 280ms;
    --sb-copy-duration: 180ms;
    --sb-copy-offset: 8px;
    --sb-search-duration: 180ms;
    --sb-easing: var(--vs-ease-link);
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: var(--sb-expanded);
    height: var(--sb-h, 600px);
    overflow: hidden;
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    text-align: left;
    transition: width var(--sb-duration) var(--sb-easing);
  }
  .vs-sidebar-nav[data-collapsed="true"] {
    width: var(--sb-collapsed);
  }

  .sb-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  button,
  a {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
  }
  button:focus-visible,
  a:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }

  /* one persistent 224px tree, clipped by the shell */
  .sb-tree {
    display: flex;
    width: var(--sb-expanded);
    min-height: 0;
    flex-shrink: 0;
    flex-direction: column;
  }

  .sb-copy {
    opacity: 1;
    transform: translateX(0);
    transition:
      opacity var(--sb-copy-duration) ease-out,
      transform var(--sb-copy-duration) var(--sb-easing);
  }
  [data-collapsed="true"] .sb-copy {
    pointer-events: none;
    opacity: 0;
    transform: translateX(calc(var(--sb-copy-offset) * -1));
  }

  /* ── header ─────────────────────────────────────────── */
  .sb-top {
    position: relative;
    height: 40px;
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  .sb-workspace {
    position: absolute;
    top: 4px;
    left: 8px;
    display: flex;
    width: 164px;
    height: 32px;
    align-items: center;
    padding: 0 8px;
    border-radius: 8px;
    text-align: left;
    transition: background-color 100ms ease-out, transform 100ms ease-out;
  }
  .sb-workspace:hover,
  .sb-workspace[aria-expanded="true"] {
    background: var(--vs-hover-2);
  }
  .sb-workspace:active {
    transform: scale(0.99);
  }
  .sb-logo {
    display: flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--vs-ink);
    transition: opacity var(--sb-copy-duration) ease-out;
  }
  .sb-ws-name {
    min-width: 0;
    flex: 1;
    margin-left: 6px;
    overflow: hidden;
    color: var(--vs-ink-2);
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sb-ws-chevron {
    display: flex;
    flex-shrink: 0;
    margin-left: 4px;
    color: var(--vs-ink-3);
  }
  .sb-collapse,
  .sb-expand {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--vs-ink-3);
    transition:
      opacity var(--sb-copy-duration) ease-out,
      background-color 150ms ease-out,
      color 150ms ease-out;
  }
  .sb-collapse {
    top: 4px;
    right: 8px;
    width: 32px;
    height: 32px;
  }
  .sb-expand {
    top: 2px;
    left: 8px;
    width: 36px;
    height: 36px;
    opacity: 0;
    pointer-events: none;
  }
  .sb-collapse:hover,
  .sb-expand:hover {
    background: var(--vs-hover-2);
    color: var(--vs-ink);
  }
  [data-collapsed="true"] .sb-workspace {
    pointer-events: none;
  }
  [data-collapsed="true"] .sb-logo,
  [data-collapsed="true"] .sb-collapse {
    pointer-events: none;
    opacity: 0;
  }
  [data-collapsed="true"] .sb-expand {
    pointer-events: auto;
    opacity: 1;
  }

  /* ── rows ───────────────────────────────────────────── */
  .sb-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .sb-row {
    position: relative;
    display: flex;
    width: 208px;
    height: 32px;
    margin: 0 8px;
    align-items: center;
    padding: 0 8px;
    border-radius: 8px;
    color: var(--vs-ink-2);
    text-align: left;
    transition:
      width var(--sb-copy-duration) var(--sb-easing),
      background-color 150ms ease-out,
      color 150ms ease-out,
      transform 150ms ease-out;
  }
  [data-collapsed="true"] .sb-row {
    width: 36px;
  }
  .sb-row:active {
    transform: scale(0.98);
  }
  .sb-row[aria-current="page"] {
    background: var(--vs-hover-2);
    color: var(--vs-ink);
  }
  /* The gliding highlight stands in for the current row's fill while it is out. */
  .sb-group[data-glide-active] .sb-row[aria-current="page"] {
    background: transparent;
  }
  .sb-row:focus-visible {
    box-shadow: inset 0 0 0 2px var(--vs-accent);
  }
  .sb-icon {
    display: flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  .sb-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sb-icon + .sb-label {
    margin-left: 6px;
  }
  .sb-count {
    flex-shrink: 0;
    margin-right: 8px;
    color: var(--vs-ink-3);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .vs-sidebar-nav :global(.sb-highlight) {
    transition: width var(--sb-copy-duration) var(--sb-easing);
  }
  [data-collapsed="true"] :global(.sb-highlight) {
    right: auto;
    width: 36px;
  }

  /* ── chats ──────────────────────────────────────────── */
  .sb-chats {
    min-height: 0;
    flex: 1;
    margin-top: 12px;
    overflow-y: auto;
  }
  .sb-chats-head {
    position: relative;
    height: 32px;
    margin: 0 8px 4px;
  }
  .sb-chats-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    color: var(--vs-ink-3);
    font-size: 12.5px;
    font-weight: 500;
    transition:
      opacity var(--sb-search-duration) var(--sb-easing),
      transform var(--sb-search-duration) var(--sb-easing);
  }
  .sb-search-btn {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--vs-ink-3);
    transition:
      opacity var(--sb-search-duration) ease-out,
      background-color 150ms ease-out,
      color 150ms ease-out,
      transform 150ms ease-out;
  }
  .sb-search-btn:hover {
    background: var(--vs-hover-2);
    color: var(--vs-ink);
  }
  .sb-search-btn:active {
    transform: scale(0.96);
  }
  .sb-search {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    display: flex;
    width: 28px;
    height: 32px;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--vs-field);
    box-shadow: var(--vs-shadow-hairline);
    color: var(--vs-ink-3);
    opacity: 0;
    pointer-events: none;
    transition:
      width var(--sb-search-duration) var(--sb-easing),
      opacity var(--sb-search-duration) var(--sb-easing);
  }
  .sb-search:focus-within {
    color: var(--vs-ink-2);
  }
  [data-search="open"] .sb-search {
    width: 100%;
    opacity: 1;
    pointer-events: auto;
  }
  [data-search="open"] .sb-chats-label {
    pointer-events: none;
    opacity: 0;
    transform: translateX(-4px);
  }
  [data-search="open"] .sb-search-btn {
    pointer-events: none;
    opacity: 0;
  }
  .sb-search-icon {
    display: flex;
    flex-shrink: 0;
    margin-left: 8px;
  }
  .sb-search-input {
    min-width: 0;
    flex: 1;
    margin-left: 6px;
    border: 0;
    background: transparent;
    color: var(--vs-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .sb-search-input::placeholder {
    color: var(--vs-ink-3);
  }
  .sb-search-input::-webkit-search-cancel-button {
    display: none;
  }
  .sb-search-close {
    display: flex;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--vs-ink-3);
    transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
  }
  .sb-search-close:hover {
    background: var(--vs-hover-2);
    color: var(--vs-ink);
  }
  .sb-search-close:focus-visible {
    box-shadow: inset 0 0 0 2px var(--vs-accent);
  }
  .sb-empty {
    margin: 0 8px;
    padding: 8px;
    color: var(--vs-ink-3);
    font-size: 12.5px;
  }

  /* ── footer ─────────────────────────────────────────── */
  .sb-footer {
    width: 208px;
    margin: 12px 8px 0;
    padding-top: 12px;
    border-top: 1px solid var(--vs-line);
  }
  .sb-footer-btn {
    display: flex;
    width: 100%;
    height: 32px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--vs-radius-control);
    background: var(--vs-hover-2);
    color: var(--vs-ink);
    font-size: 12.5px;
    font-weight: 500;
    transition: background-color 150ms ease-out, transform 150ms ease-out;
  }
  .sb-footer-btn:hover {
    background: var(--vs-line-strong);
  }
  .sb-footer-btn:active {
    transform: scale(0.98);
  }

  /* ── workspace menu ─────────────────────────────────── */
  .sb-menu {
    position: fixed;
    inset: auto;
    z-index: 50;
    display: none;
    width: 256px;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 14px;
    overflow: visible;
    background: var(--vs-surface);
    color: var(--vs-ink);
    box-shadow: var(--vs-shadow-overlay);
    font-family: var(--vs-font-sans);
    text-align: left;
    transform-origin: top left;
  }
  .sb-menu.is-open {
    display: block;
  }
  .sb-menu.is-anim {
    animation: vs-pop-in 180ms var(--vs-ease-out) both;
  }
  .sb-menu-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .sb-menu-row {
    display: flex;
    width: 100%;
    height: 36px;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border-radius: 8px;
    text-align: left;
  }
  .sb-menu-row--ws {
    height: 40px;
  }
  .sb-menu-row:focus-visible {
    box-shadow: none;
  }
  .sb-monogram {
    display: flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--vs-ink);
    color: var(--vs-surface);
    font-size: 11px;
    font-weight: 600;
  }
  .sb-menu-icon {
    display: flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--vs-ink-2);
  }
  .sb-menu-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: var(--vs-ink);
    font-size: 13.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sb-menu-label--strong {
    font-weight: 500;
  }
  .sb-menu-check {
    display: flex;
    flex-shrink: 0;
    color: var(--vs-ink);
    visibility: hidden;
  }
  .sb-menu-row[aria-checked="true"] .sb-menu-check {
    visibility: visible;
  }
  .sb-menu-sep {
    height: 1px;
    margin: 4px 0;
    background: var(--vs-line);
  }

  @media (prefers-reduced-motion: reduce) {
    .vs-sidebar-nav,
    .sb-copy,
    .sb-row,
    .sb-search,
    .sb-chats-label,
    .vs-sidebar-nav :global(.sb-highlight) {
      transition: none;
    }
    .sb-menu.is-anim {
      animation: none;
    }
  }
  @media (forced-colors: active) {
    .sb-row[aria-current="page"] {
      outline: 1px solid Highlight;
    }
    .sb-menu {
      outline: 1px solid CanvasText;
    }
  }
</style>
```


---

# Search

> Command search with live filtering and an empty state.

- **Slug:** `search`
- **Kind:** component · **Category:** Navigation
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/SearchList.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/search
- **All files in one bundle:** https://viewership.ai/design/components/search.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/search.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/search/`:

   - `SearchList.astro` (raw: https://viewership.ai/design/raw/search/SearchList.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `glide-menu`: `GlideMenu.astro`, `glide-menu.ts` (docs: https://viewership.ai/design/components/glide-menu.md)

npm packages: none.

## Usage

```astro
---
import SearchList from "../components/viewership/search/SearchList.astro";
---

<SearchList />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import SearchList from "./SearchList.astro";

const items = [
  "Build the weekly GA4 report",
  "Find new Reddit threads",
  "Compare ChatGPT citations",
  "Draft the spring launch email",
  "Check AI Overviews mentions",
  "Audit Google Ads spend",
  "Pause low-ROAS campaigns",
];
---

<div class="stage">
  <SearchList
    items={items}
    labels={{ placeholder: "Search tasks…", ariaLabel: "Search tasks", listLabel: "Marketing tasks" }}
  />
</div>

<style>
  .stage {
    display: flex;
    width: 100%;
    justify-content: center;
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `string[]` |  | Items. Case-insensitive substring match. |
| `limit` | `number` | `5` | Suggestions shown for an empty query. |
| `value` | `string` | `""` | Initial query. Works without JS. |
| `labels` | `Partial<SearchListLabels>` |  | placeholder, ariaLabel, listLabel, emptyTitle, emptyHint, clear, results ("{n} results"), oneResult. |
| `vs-search-select` | `CustomEvent<{ value: string; index: number }>` |  | Fires on pick. index points into items. |
| `vs-search-input` | `CustomEvent<{ query: string; count: number }>` |  | Fires on each query change. |

## Source

### `src/components/viewership/search/SearchList.astro`

```astro
---
/**
 * SearchList: command search with live filtering and an empty state.
 *
 * Ported from Beautiful UI `components/primitives/SearchList.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * Accessibility: WAI-ARIA combobox with an inline listbox. Focus stays in
 * the field; ↑/↓ move the active option, Enter picks it, Escape clears.
 * Result counts are announced politely.
 *
 * Events (bubbling, on the root):
 *   vs-search-select  detail: { value, index }  (index into `items`)
 *   vs-search-input   detail: { query, count }
 *
 * @example
 * <SearchList items={["Build the weekly report", "Check AI citations"]} />
 */
import type { HTMLAttributes } from "astro/types";
import GlideMenu from "../glide-menu/GlideMenu.astro";

export interface SearchListLabels {
  placeholder: string;
  /** Accessible name of the field. */
  ariaLabel: string;
  /** Accessible name of the results list. */
  listLabel: string;
  emptyTitle: string;
  emptyHint: string;
  clear: string;
  /** Announced result count; {n} is replaced. */
  results: string;
  oneResult: string;
}

type Props = HTMLAttributes<"div"> & {
  items: string[];
  labels?: Partial<SearchListLabels>;
  /** How many items show while the query is empty. */
  limit?: number;
  /** Initial query. */
  value?: string;
};

const { items = [], labels, limit = 5, value = "", class: className, ...rest } = Astro.props;

const l: SearchListLabels = {
  placeholder: "Search…",
  ariaLabel: "Search",
  listLabel: "Results",
  emptyTitle: "No results found",
  emptyHint: "Adjust your search to try again",
  clear: "Clear search",
  results: "{n} results",
  oneResult: "1 result",
  ...labels,
};

const uid = `vs-search-${Math.random().toString(36).slice(2, 8)}`;
const q = value.toLowerCase();
const shown = items.map((item, i) => (q ? item.toLowerCase().includes(q) : i < limit));
const empty = value.length > 2 && !shown.some(Boolean);
const searchIcon = '<circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" />';
---

<div
  class:list={["vs-search", className]}
  data-limit={limit}
  data-labels={JSON.stringify({ results: l.results, oneResult: l.oneResult, emptyTitle: l.emptyTitle })}
  {...rest}
>
  <div class="card">
    <div class="field">
      <svg class="field-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" set:html={searchIcon} />
      <input
        class="input"
        type="text"
        role="combobox"
        aria-label={l.ariaLabel}
        aria-autocomplete="list"
        aria-controls={`${uid}-list`}
        aria-expanded={shown.some(Boolean) ? "true" : "false"}
        autocomplete="off"
        spellcheck="false"
        placeholder={l.placeholder}
        value={value}
        data-input
      />
      <button type="button" class="clear" aria-label={l.clear} hidden={!value} data-clear>
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true">
          <path d="M18 6L6 18M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <div class="empty" hidden={!empty} data-empty>
      <span class="empty-icon" aria-hidden="true">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" set:html={searchIcon} />
      </span>
      <span class="empty-title">{l.emptyTitle}</span>
      <span class="empty-hint">{l.emptyHint}</span>
    </div>

    <div class="results" hidden={empty} data-results>
      <GlideMenu class="list" role="listbox" id={`${uid}-list`} aria-label={l.listLabel} highlightRadius="6px">
        {items.map((item, i) => (
          <div class="option" role="option" id={`${uid}-opt-${i}`} aria-selected="false" data-menu-row data-index={i} hidden={!shown[i]}>
            {item}
          </div>
        ))}
      </GlideMenu>
    </div>
  </div>
  <span class="vh" aria-live="polite" data-live></span>
</div>

<script>
  function init(root: HTMLElement) {
    const input = root.querySelector<HTMLInputElement>("[data-input]")!;
    const clear = root.querySelector<HTMLButtonElement>("[data-clear]")!;
    const empty = root.querySelector<HTMLElement>("[data-empty]")!;
    const results = root.querySelector<HTMLElement>("[data-results]")!;
    const list = root.querySelector<HTMLElement>("[role=listbox]")!;
    const options = [...root.querySelectorAll<HTMLElement>("[role=option]")];
    const live = root.querySelector<HTMLElement>("[data-live]")!;
    const labels = JSON.parse(root.dataset.labels || "{}") as { results: string; oneResult: string; emptyTitle: string };
    const limit = Number(root.dataset.limit ?? 5);

    let visible: HTMLElement[] = options.filter((o) => !o.hidden);
    let active = -1;
    let announceTimer: number | undefined;

    const setActive = (index: number, fromPointer = false) => {
      active = index;
      options.forEach((o) => {
        const on = o === visible[index];
        o.setAttribute("aria-selected", String(on));
        o.toggleAttribute("data-active", on);
      });
      const option = visible[index];
      if (option) {
        input.setAttribute("aria-activedescendant", option.id);
        if (!fromPointer) {
          // Move the glide highlight with the keyboard (it follows mouseover).
          option.dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
          option.scrollIntoView({ block: "nearest" });
        }
      } else {
        input.removeAttribute("aria-activedescendant");
        list.dispatchEvent(new MouseEvent("mouseleave"));
      }
    };

    const update = () => {
      const query = input.value;
      const q = query.toLowerCase();
      const before = new Set(visible);
      visible = [];
      options.forEach((o, i) => {
        const show = q ? (o.textContent ?? "").trim().toLowerCase().includes(q) : i < limit;
        o.hidden = !show;
        if (!show) return;
        visible.push(o);
        // Rows that just appeared fade in.
        if (!before.has(o)) {
          o.removeAttribute("data-enter");
          void o.offsetWidth;
          o.setAttribute("data-enter", "");
        }
      });
      const isEmpty = query.length > 2 && visible.length === 0;
      empty.hidden = !isEmpty;
      results.hidden = isEmpty;
      clear.hidden = !query;
      input.setAttribute("aria-expanded", String(visible.length > 0));
      setActive(-1);

      window.clearTimeout(announceTimer);
      announceTimer = window.setTimeout(() => {
        live.textContent =
          visible.length === 0 ? labels.emptyTitle : visible.length === 1 ? labels.oneResult : labels.results.replace("{n}", String(visible.length));
      }, 500);
      root.dispatchEvent(new CustomEvent("vs-search-input", { bubbles: true, detail: { query, count: visible.length } }));
    };

    const choose = (option: HTMLElement) => {
      const value = (option.textContent ?? "").trim();
      input.value = value;
      update();
      input.focus();
      root.dispatchEvent(new CustomEvent("vs-search-select", { bubbles: true, detail: { value, index: Number(option.dataset.index) } }));
    };

    input.addEventListener("input", update);

    input.addEventListener("keydown", (event) => {
      if (event.altKey || event.ctrlKey || event.metaKey) return;
      const n = visible.length;
      if (event.key === "ArrowDown" && n) {
        event.preventDefault();
        setActive(active < 0 ? 0 : (active + 1) % n);
      } else if (event.key === "ArrowUp" && n) {
        event.preventDefault();
        setActive(active <= 0 ? n - 1 : active - 1);
      } else if (event.key === "Enter" && visible[active]) {
        event.preventDefault();
        choose(visible[active]!);
      } else if (event.key === "Escape" && input.value) {
        event.preventDefault();
        input.value = "";
        update();
      }
    });

    // Keep focus in the field when picking with the pointer.
    list.addEventListener("mousedown", (event) => event.preventDefault());
    list.addEventListener("click", (event) => {
      const option = (event.target as Element).closest<HTMLElement>("[role=option]");
      if (option) choose(option);
    });
    list.addEventListener("mouseover", (event) => {
      if (!event.isTrusted) return;
      const option = (event.target as Element).closest<HTMLElement>("[role=option]");
      if (option) setActive(visible.indexOf(option), true);
    });

    clear.addEventListener("click", () => {
      input.value = "";
      update();
      input.focus();
    });

    document.addEventListener("astro:before-swap", () => window.clearTimeout(announceTimer), { once: true });
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-search:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-search {
    display: flex;
    width: 100%;
    max-width: 288px;
    min-height: 248px;
    flex-direction: column;
    align-items: stretch;
  }
  .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .card {
    width: 100%;
    align-self: flex-start;
    overflow: hidden;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-raised);
    transition: box-shadow var(--vs-duration-fast) ease-out;
  }
  .card:has(.input:focus-visible) {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--vs-accent) 60%, transparent),
      var(--vs-shadow-md);
  }

  /* ── field ── */
  .field {
    display: flex;
    height: 40px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid var(--vs-line);
    transition: background-color 100ms ease-out;
  }
  .field:hover {
    background: var(--vs-hover);
  }
  .field-icon {
    flex-shrink: 0;
    color: var(--vs-ink-3);
  }
  .input {
    min-width: 0;
    flex: 1;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--vs-ink);
    font: inherit;
    font-size: 13px;
    outline: none;
  }
  .input::placeholder {
    color: var(--vs-ink-3);
  }
  .clear {
    display: flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--vs-radius-pill);
    background: transparent;
    color: var(--vs-ink-3);
    cursor: pointer;
    animation: vs-fade-in 150ms ease-out both;
    transition:
      background-color 100ms ease-out,
      color 100ms ease-out;
  }
  .clear:hover {
    background: color-mix(in srgb, var(--vs-line) 70%, transparent);
    color: var(--vs-ink);
  }
  .clear:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .clear[hidden] {
    display: none;
  }

  /* ── results ── */
  .results {
    padding: 4px;
  }
  .results[hidden] {
    display: none;
  }
  .list {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .option {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 32px;
    align-items: center;
    padding: 0 8px;
    border-radius: 6px;
    color: var(--vs-ink);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    user-select: none;
  }
  .option[hidden] {
    display: none;
  }
  .option[data-enter] {
    animation: vs-fade-in 200ms ease-out both;
  }
  /* Keyboard-active row keeps a fill whenever the glide highlight is not on it. */
  .list:not([data-glide-active]) .option[data-active] {
    background: var(--vs-hover);
  }

  /* ── empty state ── */
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 32px 16px;
    animation: vs-fade-in 250ms ease-out both;
  }
  .empty[hidden] {
    display: none;
  }
  .empty-icon {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border-radius: var(--vs-radius-control);
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-hairline);
    color: var(--vs-ink-3);
  }
  .empty-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .empty-hint {
    font-size: 12px;
    color: var(--vs-ink-3);
  }

  @media (forced-colors: active) {
    .option[data-active] {
      outline: 2px solid Highlight;
    }
  }
</style>
```


---

# Flowchart

> Workflow trigger and condition cards on a dotted canvas with draggable steps.

- **Slug:** `flowchart`
- **Kind:** component · **Category:** Data
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/Flowchart.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/flowchart
- **All files in one bundle:** https://viewership.ai/design/components/flowchart.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/flowchart.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy these files into `src/components/viewership/flowchart/`:

   - `Flowchart.astro` (raw: https://viewership.ai/design/raw/flowchart/Flowchart.astro.txt)
   - `layout.ts` (raw: https://viewership.ai/design/raw/flowchart/layout.ts.txt)

npm packages: none.

## Usage

```astro
---
import Flowchart from "../components/viewership/flowchart/Flowchart.astro";
---

<Flowchart />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import Flowchart, { type FlowEdge, type FlowStep } from "./Flowchart.astro";

const properties = ["channel", "topic", "tone", "format"].map((name) => ({ name }));

const steps: FlowStep[] = [
  {
    id: "trigger",
    row: 0,
    x: 0.5,
    w: 300,
    kind: { label: "Trigger", hue: "accent" },
    hue: "accent",
    icon: "package",
    title: "New content request",
    caption: "Trigger when a client submits a request",
  },
  {
    id: "cond",
    row: 1,
    x: 0.5,
    w: 356,
    kind: { label: "If / Else", hue: "amber" },
    conditions: [
      {
        join: "If",
        source: "request",
        property: { value: "channel", options: properties },
        value: {
          value: "Reddit",
          options: [
            { name: "Reddit", tag: "Threads" },
            { name: "YouTube", tag: "Video" },
            { name: "LinkedIn", tag: "Social" },
            { name: "Email", tag: "Owned" },
          ],
        },
      },
      {
        join: "and",
        source: "request",
        property: { value: "tone", options: properties },
        wrap: true,
        value: {
          value: "Plain and direct, with sample numbers",
          options: [
            { name: "Plain and direct, with sample numbers" },
            { name: "Warm brand voice" },
            { name: "Technical and precise" },
            { name: "Short and punchy" },
          ],
        },
      },
    ],
  },
];

const edges: FlowEdge[] = [{ from: "trigger", to: "cond" }];
---

<div class="stage">
  <Flowchart steps={steps} edges={edges} labels={{ canvas: "Content request workflow" }} />
</div>

<style>
  .stage {
    max-width: 560px;
    margin-inline: auto;
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` | `FlowStep[]` | `[]` | Cards: { id, row, x (0–1 centre), w (px), kind?: { label, hue }, hue?, icon?, title?, caption?, conditions? }. A step with `conditions` is a condition card. |
| `edges` | `{ from: string; to: string }[]` | `[]` | Connectors from the bottom of `from` to the top of `to`. |
| `sourceIcon` | `"spark" \| "package" \| "flame"` | `"spark"` | Icon on the condition record chip. |
| `labels` | `{ canvas?, moveHint? }` |  | Canvas name and keyboard-move hint for step cards. |

## Source

### `src/components/viewership/flowchart/Flowchart.astro`

```astro
---
/**
 * Flowchart: an agent workflow on a dotted canvas. Step cards and condition
 * cards (If / and rows of select chips) are joined by bezier connectors.
 * Cards drag freely and connectors follow. Condition chips open listbox
 * dropdowns.
 *
 * Adapted from Beautiful UI Flowchart (MIT, © 2026 Shane Levine).
 *
 * Keyboard: arrow keys nudge a focused step card (Shift = bigger steps);
 * chips follow the listbox pattern (Arrow/Home/End/Enter/Escape).
 *
 * Events on the root:
 *   vs-flowchart-select  detail: { id | null }
 *   vs-flowchart-change  detail: { node, condition, field: "property" | "value", value }
 */
import type { HTMLAttributes } from "astro/types";
import { PILL_OFFSET, rowLayout, type LayoutNode } from "./layout";

export type FlowIcon = "spark" | "package" | "flame";
/** Named hues, or any CSS color. */
export type FlowHue = "violet" | "amber" | "accent" | "green" | "red" | "orange" | (string & {});
export type FlowOption = { name: string; tag?: string };
export type FlowSelect = {
  value: string;
  options: FlowOption[];
  /** Menu width in px. Defaults: 144 property, 176 value, 256 wrapped value. */
  menuWidth?: number;
  /** Which edge of the chip the menu aligns to. */
  align?: "left" | "right";
};
export type FlowCondition = {
  /** Row lead word: "If", "and", "or". */
  join: string;
  /** Record chip, e.g. "order". */
  source: string;
  property: FlowSelect;
  /** Comparison word between property and value. */
  operator?: string;
  value: FlowSelect;
  /** Put the value chip on its own indented line (for long values). */
  wrap?: boolean;
};
export type FlowStep = {
  id: string;
  /** Vertical row (0 = top). */
  row: number;
  /** Horizontal centre, 0–1 of the canvas width. */
  x: number;
  /** Card width in px (clamped to 92% of the canvas). */
  w: number;
  kind?: { label: string; hue: FlowHue };
  hue?: FlowHue;
  icon?: FlowIcon;
  title?: string;
  caption?: string;
  /** When set, renders a condition card instead of a step card. */
  conditions?: FlowCondition[];
};
export type FlowEdge = { from: string; to: string };

type Props = HTMLAttributes<"div"> & {
  steps?: FlowStep[];
  edges?: FlowEdge[];
  /** Icon on the condition rows' record chip. */
  sourceIcon?: FlowIcon;
  labels?: { canvas?: string; moveHint?: string };
};

const { steps = [], edges = [], sourceIcon = "spark", labels, class: className, ...rest } = Astro.props;
const text = { canvas: "Workflow", moveHint: "Arrow keys move this card.", ...labels };

const HUES: Record<string, string> = {
  violet: "oklch(0.5 0.13 355)",
  amber: "var(--vs-orange)",
  accent: "var(--vs-accent)",
  green: "var(--vs-green)",
  red: "var(--vs-red)",
  orange: "var(--vs-orange)",
};
const hue = (h?: FlowHue) => (h ? (HUES[h] ?? h) : "var(--vs-accent)");

const ICONS: Record<FlowIcon, string> = {
  spark:
    '<path d="M12 3l1.8 7.2L21 12l-7.2 1.8L12 21l-1.8-7.2L3 12l7.2-1.8z"/>',
  package:
    '<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/><path d="M12 22V12"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="m7.5 4.27 9 5.15"/>',
  flame:
    '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>',
};

/* first-paint layout from estimated heights; the script measures and corrects */
const estimate = (s: FlowStep) => {
  const pill = s.kind ? PILL_OFFSET : 0;
  if (!s.conditions) return pill + 56;
  const lines = s.conditions.reduce((n, c) => n + (c.wrap ? 2 : 1), 0);
  return pill + 20 + lines * 24 + Math.max(lines - 1, 0) * 6;
};
const nodes: LayoutNode[] = steps.map((s) => ({ id: s.id, row: s.row, x: s.x, w: s.w, kind: Boolean(s.kind) }));
const heights = Object.fromEntries(steps.map((s) => [s.id, estimate(s)]));
const { canvasH, topOf } = rowLayout(nodes, heights);
const byId = new Map(nodes.map((n) => [n.id, n]));
const staticEdges = edges
  .map((e) => {
    const a = byId.get(e.from);
    const b = byId.get(e.to);
    if (!a || !b) return null;
    return { x1: a.x * 100, y1: topOf(a) + heights[a.id], x2: b.x * 100, y2: topOf(b) + (b.kind ? PILL_OFFSET : 0) };
  })
  .filter((e) => e !== null);

const uid = `vs-flow-${Math.random().toString(36).slice(2, 8)}`;
const config = JSON.stringify({ nodes, edges, heights });
---

<div
  class:list={["vs-flowchart", className]}
  role="group"
  aria-label={text.canvas}
  style={`height: ${canvasH}px`}
  {...rest}
>
  <script type="application/json" data-vs-config set:html={config} />
  <span class="sr-only" id={`${uid}-hint`}>{text.moveHint}</span>

  <svg class="edges" aria-hidden="true" width="100%" height="100%">
    {staticEdges.map((e) => <line class="edge edge-static" x1={`${e.x1}%`} y1={e.y1} x2={`${e.x2}%`} y2={e.y2} />)}
    {edges.map(() => <path class="edge" d="" />)}
  </svg>

  {steps.map((step) => {
    const n = byId.get(step.id)!;
    return (
      <div
        class="node"
        data-node={step.id}
        style={`left: ${step.x * 100}%; top: ${topOf(n)}px; width: min(${step.w}px, 92%); --hue: ${hue(step.hue)}`}
      >
        {step.kind && (
          <span class="kind" style={`--hue: ${hue(step.kind.hue)}`}>
            {step.kind.label}
          </span>
        )}
        {step.conditions ? (
          <div class="card card--condition">
            <div class="conditions">
              {step.conditions.map((c, ci) => {
                type ChipSpec = { field: "property" | "value"; sel: FlowSelect; dot: boolean; width: number; align: "left" | "right" };
                const selects: ChipSpec[] = [
                  { field: "property", sel: c.property, dot: false, width: 144, align: "left" },
                  { field: "value", sel: c.value, dot: true, width: 176, align: "right" },
                ];
                const chip = (s: ChipSpec) => {
                  const id = `${uid}-${step.id}-${ci}-${s.field}`;
                  return (
                    <span class="select" data-ui data-node-id={step.id} data-condition={ci} data-field={s.field}>
                      <button
                        type="button"
                        class="chip"
                        aria-haspopup="listbox"
                        aria-expanded="false"
                        aria-controls={id}
                        aria-label={`${c.join} ${c.source} ${s.field === "property" ? "property" : c.property.value}: ${s.sel.value}`}
                      >
                        {s.dot && <span class="dot" style={`--hue: ${hue(step.kind?.hue ?? step.hue)}`}></span>}
                        <span class="chip-value">{s.sel.value}</span>
                        <svg aria-hidden="true" class="chevron" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
                      </button>
                      <div
                        class:list={["menu", `menu--${s.sel.align ?? s.align}`]}
                        id={id}
                        role="listbox"
                        aria-label={s.field === "property" ? "Property" : c.property.value}
                        style={`width: ${s.sel.menuWidth ?? (c.wrap && s.field === "value" ? 256 : s.width)}px`}
                        hidden
                      >
                        <span class="glide" aria-hidden="true"></span>
                        {s.sel.options.map((o) => (
                          <div role="option" class="option" tabindex="-1" aria-selected={o.name === s.sel.value ? "true" : "false"} data-name={o.name}>
                            <span class="option-name">{o.name}</span>
                            {o.tag && <span class="option-tag">{o.tag}</span>}
                            <svg aria-hidden="true" class="check" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>
                          </div>
                        ))}
                      </div>
                    </span>
                  );
                };
                return (
                  <div class:list={["cond-row", c.wrap && "cond-row--wrap"]}>
                    <svg aria-hidden="true" class="handle" width="10" height="16" viewBox="0 0 10 16" fill="currentColor">
                      {[3, 8, 13].map((y) => (
                        <>
                          <circle cx="3" cy={y} r="1.1" />
                          <circle cx="7.5" cy={y} r="1.1" />
                        </>
                      ))}
                    </svg>
                    <span class="join">{c.join}</span>
                    <span class="source" data-ui>
                      <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" set:html={ICONS[sourceIcon]} />
                      {c.source}
                    </span>
                    {chip(selects[0])}
                    <span class="join-op">{c.operator ?? "is"}</span>
                    {c.wrap ? <span class="wrap-value">{chip({ ...selects[1], align: "left" })}</span> : chip(selects[1])}
                  </div>
                );
              })}
            </div>
          </div>
        ) : (
          <button type="button" class="card card--step" aria-pressed="false" aria-describedby={`${uid}-hint`}>
            <span class="step-icon" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" set:html={ICONS[step.icon ?? "spark"]} />
            </span>
            <span class="step-text">
              <span class="step-title">{step.title}</span>
              <span class="step-caption">{step.caption}</span>
            </span>
          </button>
        )}
      </div>
    );
  })}
</div>

<script>
  import { bezier, PILL_OFFSET, rowLayout, type LayoutNode } from "./layout";

  type Config = { nodes: LayoutNode[]; edges: { from: string; to: string }[]; heights: Record<string, number> };
  const clamp = (v: number, lo: number, hi: number) => Math.min(Math.max(v, lo), Math.max(lo, hi));

  function init(root: HTMLElement) {
    const configEl = root.querySelector<HTMLScriptElement>("script[data-vs-config]");
    if (!configEl) return;
    const { nodes, edges, heights } = JSON.parse(configEl.textContent || "{}") as Config;
    const svg = root.querySelector<SVGSVGElement>("svg.edges")!;
    svg.querySelectorAll(".edge-static").forEach((l) => l.remove());
    const paths = [...svg.querySelectorAll<SVGPathElement>("path.edge")];
    const els = new Map(nodes.map((n) => [n.id, root.querySelector<HTMLElement>(`[data-node="${CSS.escape(n.id)}"]`)!]));
    const offsets: Record<string, { dx: number; dy: number }> = {};
    let width = root.clientWidth || 480;
    let selected: string | null = null;
    let layout = rowLayout(nodes, heights);

    const place = (n: LayoutNode) => {
      const off = offsets[n.id];
      return { w: Math.min(n.w, width * 0.92), cx: n.x * width + (off?.dx ?? 0), top: layout.topOf(n) + (off?.dy ?? 0) };
    };
    const anchors = (n: LayoutNode) => {
      const { cx, top } = place(n);
      return { top: { x: cx, y: top + (n.kind ? PILL_OFFSET : 0) }, bottom: { x: cx, y: top + (heights[n.id] ?? 90) } };
    };

    const render = () => {
      layout = rowLayout(nodes, heights);
      root.style.height = `${layout.canvasH}px`;
      svg.setAttribute("width", String(width));
      svg.setAttribute("height", String(layout.canvasH));
      for (const n of nodes) {
        const el = els.get(n.id);
        if (!el) continue;
        const { w, cx, top } = place(n);
        el.style.left = `${cx}px`;
        el.style.top = `${top}px`;
        el.style.width = `${w}px`;
      }
      edges.forEach((e, i) => {
        const a = nodes.find((n) => n.id === e.from);
        const b = nodes.find((n) => n.id === e.to);
        if (!a || !b || !paths[i]) return;
        paths[i].setAttribute("d", bezier(anchors(a).bottom, anchors(b).top));
        paths[i].classList.toggle("is-lit", selected === e.from || selected === e.to);
      });
    };

    const measure = () => {
      width = root.clientWidth || width;
      els.forEach((el, id) => {
        const h = el.offsetHeight;
        if (h) heights[id] = h;
      });
      render();
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(root);
    els.forEach((el) => ro.observe(el));

    /* keep a card inside the canvas */
    const moveTo = (n: LayoutNode, dx: number, dy: number) => {
      const { w } = place(n);
      const h = heights[n.id] ?? 90;
      const baseCx = n.x * width;
      const baseTop = layout.topOf(n);
      const cx = clamp(baseCx + dx, w / 2 + 8, width - w / 2 - 8);
      const top = clamp(baseTop + dy, 8, layout.canvasH - h - 8);
      offsets[n.id] = { dx: cx - baseCx, dy: top - baseTop };
      render();
    };

    /* ── dragging ── */
    let suppressClick = false;
    for (const n of nodes) {
      const el = els.get(n.id);
      if (!el) continue;
      el.addEventListener("pointerdown", (event) => {
        if (event.button !== 0 || (event.target as Element).closest("[data-ui]")) return;
        const start = { x: event.clientX, y: event.clientY, dx: offsets[n.id]?.dx ?? 0, dy: offsets[n.id]?.dy ?? 0 };
        let moved = false;
        const onMove = (e: PointerEvent) => {
          const dx = start.dx + e.clientX - start.x;
          const dy = start.dy + e.clientY - start.y;
          if (!moved && Math.hypot(e.clientX - start.x, e.clientY - start.y) < 3) return;
          moved = true;
          el.dataset.dragging = "";
          moveTo(n, dx, dy);
        };
        const onUp = () => {
          window.removeEventListener("pointermove", onMove);
          window.removeEventListener("pointerup", onUp);
          window.removeEventListener("pointercancel", onUp);
          delete el.dataset.dragging;
          if (moved) {
            /* a real drag shouldn't also toggle selection */
            suppressClick = true;
            setTimeout(() => (suppressClick = false), 0);
          }
        };
        window.addEventListener("pointermove", onMove);
        window.addEventListener("pointerup", onUp);
        window.addEventListener("pointercancel", onUp);
      });

      /* ── selection + keyboard nudge (step cards) ── */
      const button = el.querySelector<HTMLButtonElement>("button.card--step");
      if (!button) continue;
      button.addEventListener("click", () => {
        if (suppressClick) return;
        selected = selected === n.id ? null : n.id;
        root.querySelectorAll<HTMLButtonElement>("button.card--step").forEach((b) =>
          b.setAttribute("aria-pressed", String(b === button && selected === n.id)),
        );
        render();
        root.dispatchEvent(new CustomEvent("vs-flowchart-select", { bubbles: true, detail: { id: selected } }));
      });
      button.addEventListener("keydown", (event) => {
        const step = event.shiftKey ? 32 : 8;
        const delta: Record<string, [number, number]> = {
          ArrowLeft: [-step, 0],
          ArrowRight: [step, 0],
          ArrowUp: [0, -step],
          ArrowDown: [0, step],
        };
        const d = delta[event.key];
        if (!d) return;
        event.preventDefault();
        moveTo(n, (offsets[n.id]?.dx ?? 0) + d[0], (offsets[n.id]?.dy ?? 0) + d[1]);
      });
    }

    /* ── select chips (listbox pattern, gliding highlight) ── */
    let openClose: ((focusChip: boolean) => void) | null = null;

    root.querySelectorAll<HTMLElement>(".select").forEach((wrap) => {
      const chip = wrap.querySelector<HTMLButtonElement>("button.chip")!;
      const menu = wrap.querySelector<HTMLElement>('[role="listbox"]')!;
      const glide = menu.querySelector<HTMLElement>(".glide")!;
      const valueEl = chip.querySelector<HTMLElement>(".chip-value")!;
      const options = [...menu.querySelectorAll<HTMLElement>('[role="option"]')];
      let hovered: number | null = null;

      const valueIndex = () => Math.max(0, options.findIndex((o) => o.getAttribute("aria-selected") === "true"));
      const moveGlide = (instant = false) => {
        const row = options[hovered ?? valueIndex()];
        if (instant) glide.style.transition = "none";
        if (row) {
          glide.style.top = `${row.offsetTop}px`;
          glide.style.height = `${row.offsetHeight}px`;
        }
        glide.style.opacity = hovered !== null ? "1" : "0";
        if (instant) {
          void glide.offsetHeight;
          glide.style.transition = "";
        }
      };
      const close = (focusChip: boolean) => {
        menu.hidden = true;
        chip.setAttribute("aria-expanded", "false");
        hovered = null;
        if (openClose === close) openClose = null;
        if (focusChip) chip.focus();
      };
      const open = (focusIndex?: number) => {
        if (openClose && openClose !== close) openClose(false);
        openClose = close;
        menu.hidden = false;
        chip.setAttribute("aria-expanded", "true");
        hovered = focusIndex ?? null;
        moveGlide(true);
        if (focusIndex !== undefined) options[focusIndex]?.focus();
      };
      const pick = (i: number) => {
        options.forEach((o, k) => o.setAttribute("aria-selected", String(k === i)));
        const value = options[i].dataset.name ?? "";
        valueEl.textContent = value;
        chip.setAttribute("aria-label", chip.getAttribute("aria-label")!.replace(/: .*$/, `: ${value}`));
        close(true);
        root.dispatchEvent(
          new CustomEvent("vs-flowchart-change", {
            bubbles: true,
            detail: { node: wrap.dataset.nodeId, condition: Number(wrap.dataset.condition), field: wrap.dataset.field, value },
          }),
        );
      };

      chip.addEventListener("click", () => (menu.hidden ? open() : close(false)));
      chip.addEventListener("keydown", (event) => {
        if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
          event.preventDefault();
          open(event.key === "ArrowUp" ? options.length - 1 : valueIndex());
        } else if (event.key === "Escape" && !menu.hidden) close(true);
      });
      menu.addEventListener("mouseleave", () => {
        hovered = null;
        moveGlide();
      });
      options.forEach((option, i) => {
        option.addEventListener("mouseenter", () => {
          hovered = i;
          moveGlide();
        });
        option.addEventListener("focus", () => {
          hovered = i;
          moveGlide();
        });
        option.addEventListener("click", () => pick(i));
        option.addEventListener("keydown", (event) => {
          const last = options.length - 1;
          const to: Record<string, number> = { ArrowDown: Math.min(i + 1, last), ArrowUp: Math.max(i - 1, 0), Home: 0, End: last };
          if (event.key in to) {
            event.preventDefault();
            options[to[event.key]].focus();
          } else if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            pick(i);
          } else if (event.key === "Escape") {
            event.preventDefault();
            close(true);
          } else if (event.key === "Tab") close(false);
        });
      });
    });

    /* click anywhere else closes the open menu */
    const onDocDown = (event: PointerEvent) => {
      if (openClose && !(event.target as Element).closest(".select[data-ui]")) openClose(false);
    };
    document.addEventListener("pointerdown", onDocDown);
    document.addEventListener(
      "astro:before-swap",
      () => {
        ro.disconnect();
        document.removeEventListener("pointerdown", onDocDown);
      },
      { once: true },
    );
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-flowchart:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-flowchart {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--vs-radius-card);
    background-color: var(--vs-page);
    background-image: radial-gradient(var(--vs-line-strong) 1px, transparent 1.25px);
    background-size: 22px 22px;
    background-position: center;
    box-shadow: var(--vs-shadow-hairline);
    user-select: none;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* connectors */
  .edges {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
  }
  .edge {
    fill: none;
    stroke: var(--vs-line-strong);
    stroke-width: 1.25;
    transition: stroke 150ms;
  }
  .edge.is-lit {
    stroke: var(--vs-accent);
  }

  /* nodes */
  .node {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    transform: translateX(-50%);
    touch-action: none;
  }
  .node[data-dragging] {
    z-index: 2;
    cursor: grabbing;
  }
  .node:has(.menu:not([hidden])) {
    z-index: 3;
  }
  .kind {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--hue) 14%, var(--vs-page));
    color: color-mix(in srgb, var(--hue) 80%, var(--vs-ink));
    font-size: 11.5px;
    font-weight: 500;
  }

  .card {
    width: 100%;
    border-radius: 18px;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
    transition: box-shadow 150ms;
  }
  .card:hover {
    box-shadow: var(--vs-shadow-raised);
  }

  /* step card */
  .card--step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .card--step[aria-pressed="true"] {
    box-shadow:
      0 0 0 1.5px var(--vs-accent),
      0 2px 10px rgba(0, 0, 0, 0.045);
  }
  .card--step:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .step-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--hue) 12%, var(--vs-surface));
    color: var(--hue);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hue) 20%, var(--vs-surface));
  }
  .step-text {
    min-width: 0;
  }
  .step-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--vs-ink);
  }
  .step-caption {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.375;
    color: var(--vs-ink-2);
  }

  /* condition card */
  .conditions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
  }
  .cond-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
  }
  .cond-row--wrap {
    flex-wrap: wrap;
  }
  .wrap-value {
    max-width: 100%;
    padding-left: 49px;
  }
  .handle {
    flex-shrink: 0;
    cursor: grab;
    color: color-mix(in srgb, var(--vs-ink-3) 70%, transparent);
  }
  .join {
    width: 28px;
    font-size: 12.5px;
    color: var(--vs-ink-2);
  }
  .join-op {
    font-size: 12.5px;
    color: var(--vs-ink-2);
  }
  .source {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-btn);
    font-size: 12px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .source svg {
    color: var(--vs-ink-2);
  }

  /* select chip + menu */
  .select {
    position: relative;
    display: inline-flex;
    min-width: 0;
  }
  .chip {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 6px;
    border: none;
    border-radius: 6px;
    background: var(--vs-field);
    color: var(--vs-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 100ms;
  }
  .chip:hover,
  .chip[aria-expanded="true"] {
    background: var(--vs-hover-2);
  }
  .chip:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .chip-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chevron {
    flex-shrink: 0;
    color: var(--vs-ink-3);
  }
  .dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hue);
  }

  .menu {
    position: absolute;
    bottom: 100%;
    z-index: 20;
    margin-bottom: 6px;
    padding: 4px;
    border-radius: 10px;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-raised);
    animation: vs-pop-in 180ms var(--vs-ease-out) both;
  }
  .menu--left {
    left: 0;
    transform-origin: bottom left;
  }
  .menu--right {
    right: 0;
    transform-origin: bottom right;
  }
  .glide {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 0;
    height: 0;
    border-radius: 6px;
    background: var(--vs-hover);
    opacity: 0;
    pointer-events: none;
    transition:
      top 220ms var(--vs-ease-out),
      height 220ms var(--vs-ease-out),
      opacity 150ms ease;
  }
  .option {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
  }
  .option:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--vs-accent) 70%, transparent);
  }
  .option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .option-tag {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--vs-ink-3);
  }
  .check {
    flex-shrink: 0;
    color: var(--vs-ink);
    visibility: hidden;
  }
  .option[aria-selected="true"] .check {
    visibility: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .menu {
      animation: none;
    }
    .glide,
    .edge,
    .card {
      transition: none;
    }
  }
</style>
```

### `src/components/viewership/flowchart/layout.ts`

```ts
/**
 * Flowchart layout math, shared by the server render (estimated heights)
 * and the client script (measured heights, live width, drag offsets).
 * Adapted from Beautiful UI Flowchart (MIT, © 2026 Shane Levine).
 */

const PAD_Y = 24;
const ROW_GAP = 64;
/** Kind pill + gap above a card. */
export const PILL_OFFSET = 30;

export type LayoutNode = { id: string; row: number; x: number; w: number; kind: boolean };
export type Point = { x: number; y: number };

/** Row tops and total canvas height from per-node heights. */
export function rowLayout(nodes: LayoutNode[], heights: Record<string, number>) {
  const rows = [...new Set(nodes.map((n) => n.row))].sort((a, b) => a - b);
  const rowH = rows.map((r) => Math.max(...nodes.filter((n) => n.row === r).map((n) => heights[n.id] ?? 90)));
  const rowY: number[] = [];
  rows.forEach((_, i) => {
    rowY[i] = i === 0 ? PAD_Y : rowY[i - 1] + rowH[i - 1] + ROW_GAP;
  });
  const canvasH = rows.length ? rowY[rows.length - 1] + rowH[rows.length - 1] + PAD_Y : PAD_Y * 2;
  const topOf = (n: LayoutNode) => rowY[rows.indexOf(n.row)];
  return { canvasH, topOf };
}

/** The connector between two anchors: a clamped vertical bezier. */
export function bezier(from: Point, to: Point) {
  const k = Math.min(Math.max(Math.abs(to.y - from.y) * 0.55, 24), 84);
  return `M ${from.x} ${from.y} C ${from.x} ${from.y + k}, ${to.x} ${to.y - k}, ${to.x} ${to.y}`;
}
```


---

# Insight Cards

> Paged agent insights with scrubbable SVG charts and follow-up prompts.

- **Slug:** `insight-cards`
- **Kind:** component · **Category:** Data
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/InsightCards.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/insight-cards
- **All files in one bundle:** https://viewership.ai/design/components/insight-cards.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/insight-cards.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy these files into `src/components/viewership/insight-cards/`:

   - `InsightCards.astro` (raw: https://viewership.ai/design/raw/insight-cards/InsightCards.astro.txt)
   - `insight-chart.ts` (raw: https://viewership.ai/design/raw/insight-cards/insight-chart.ts.txt)

npm packages: none.

## Usage

```astro
---
import InsightCards from "../components/viewership/insight-cards/InsightCards.astro";
---

<InsightCards />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import InsightCards from "./InsightCards.astro";
import type { InsightPage } from "./insight-chart";

const days = ["Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"];

const pages: InsightPage[] = [
  {
    key: "channels",
    prose: [
      "The weakest channel for ",
      { entity: "Northwind", color: "var(--vs-orange)" },
      " is Paid Social: down ",
      { mono: "-6%", tone: "red" },
      " or ",
      { mono: "-$2,453", tone: "red" },
      ".",
    ],
    card: {
      kind: "compare",
      caption: "Revenue vs. last week",
      series: [
        { name: "Paid Social", values: [-2.9, -3.4, -3.05, -3.86, -3.52, -4.1, -3.82, -4.41], sub: "-$2,377", tone: "red", color: "var(--vs-orange)" },
        { name: "Organic Search", values: [0.22, 0.58, 0.42, 0.91, 0.76, 1.08, 0.96, 1.15], sub: "+$617", tone: "green", color: "var(--vs-accent)" },
      ],
      labels: days,
    },
    pill: "Should I rebalance the channel mix?",
  },
  {
    key: "spend",
    prose: ["Unusually high ad spend on ", { strong: "Mar 13" }, ": ", { mono: "+$1,834", tone: "red" }, " above your daily average."],
    card: {
      kind: "anomaly",
      title: "High ad spend",
      metrics: [
        { key: "spend", label: "Spend", values: [274, 289, 264, 307, 331, 1210, 1718, 2112], format: { style: "money" }, threshold: "$2,112 threshold" },
        { key: "usage", label: "Usage", values: [18, 19, 17, 21, 22, 58, 81, 96], format: { style: "unit", unit: "clicks" }, threshold: "82 clicks threshold" },
      ],
      total: "$2,112 spent",
      delta: "+$1,834",
      deltaNote: "vs 3 weeks",
      labels: days,
    },
    pill: "Get tips on cutting wasted ad spend",
  },
  {
    key: "mix",
    prose: ["You're heavily reliant on ", { entity: "Organic Search", color: "var(--vs-orange)" }, ": it's ", { strong: "72.5%" }, " of your tracked revenue."],
    card: {
      kind: "allocation",
      title: "Organic Search allocation",
      monogram: "O",
      color: "var(--vs-orange)",
      segments: [
        { name: "ORGANIC", label: "Organic Search", pct: 72.5, amount: "$51,785", color: "var(--vs-orange)" },
        { name: "PAID", label: "Paid Search", pct: 22.8, amount: "$16,278", color: "var(--vs-line-strong)", tone: "var(--vs-ink-2)" },
        { name: "EMAIL", label: "Email", pct: 4.7, amount: "$3,357", color: "var(--vs-line)", tone: "var(--vs-ink-3)" },
      ],
      note: "Share of current attributed revenue. Choosing a channel changes the inspected group without moving the card.",
    },
    pill: "If we add a GEO campaign, what changes?",
  },
];
---

<InsightCards pages={pages} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `pages` | `InsightPage[]` |  | { key, prose, card, pill? }. Prose tokens: string, { entity, color? }, { mono, tone }, { strong }. Types are in insight-chart.ts. |
| `card (compare)` | `{ kind: "compare"; series: { name, values, sub, tone, color }[]; caption?; badge?; format?; labels? }` |  | Two-series comparison with a scrubbable line chart. |
| `card (anomaly)` | `{ kind: "anomaly"; title; metrics: { key, label, values, format, threshold }[]; total; delta; deltaNote; color?; labels? }` |  | Line chart with a metric toggle. |
| `card (allocation)` | `{ kind: "allocation"; title; segments: { name, label, pct, amount, color, tone? }[]; note; monogram?; color? }` |  | Segmented bar with legend and detail box. |
| `format` | `{ style: "percent" \| "money" \| "unit"; unit?; decimals?; signed?; currency? }` |  | Value format in tooltips, readouts and summaries. |
| `title` | `string` | `"Insights"` | Pager heading. |
| `page` | `number` | `0` | Initial page. |
| `autoplay / interval` | `boolean / number` | `false / 6000` | Advance pages while in view. Pauses on hover or focus, stops on interaction, off with reduced motion. |
| `Events` | `CustomEvent` |  | vs-insight-page { index, key }, vs-insight-ask { key, text }. |

## Source

### `src/components/viewership/insight-cards/InsightCards.astro`

```astro
---
/**
 * InsightCards: paged agent insights. Each page has a sentence with inline
 * entities and deltas, a mini chart and a suggested follow-up. Card kinds:
 * comparison chart, anomaly chart with a metric toggle, allocation bar.
 *
 * Ported from Beautiful UI `components/primitives/InsightCards.tsx`
 * (MIT, © 2026 Shane Levine).
 * Charts are native SVG (see insight-chart.ts) and render on the server.
 *
 * - Charts scrub by pointer, or focus (a slider) and use ←/→, Home/End;
 *   Escape clears. Each has a text summary.
 * - Charts draw in on scroll into view (instantly under reduced motion or
 *   without JS).
 * - `autoplay` pauses on hover/focus and stops on any interaction.
 *
 * Events (bubbling CustomEvents on the root):
 *   vs-insight-page  detail: { index, key }
 *   vs-insight-ask   detail: { key, text }      (the follow-up pill)
 *
 * @example
 * <InsightCards pages={pages} title="Insights" />
 */
import type { HTMLAttributes } from "astro/types";
import {
  areaPath,
  domain,
  formatValue,
  linePath,
  niceTicks,
  smooth,
  summarize,
  yOf,
  ANOMALY_BOX,
  COMPARE_BOX,
  type AnomalyCard,
  type CompareCard,
  type InsightPage,
  type ProseEntity,
  type ProseMono,
  type ProseStrong,
  type ProseToken,
} from "./insight-chart";

type Props = HTMLAttributes<"div"> & {
  pages: InsightPage[];
  /** Heading shown before the page count. */
  title?: string;
  /** Initially shown page. */
  page?: number;
  /** Advance pages automatically while in view. */
  autoplay?: boolean;
  /** Autoplay interval in ms. */
  interval?: number;
};

const { pages, title = "Insights", page = 0, autoplay = false, interval = 6000, class: className, ...rest } = Astro.props;

const uid = `vs-ic-${Math.random().toString(36).slice(2, 8)}`;
const start = Math.min(Math.max(0, page), Math.max(0, pages.length - 1));

const isEntity = (t: ProseToken): t is ProseEntity => typeof t === "object" && "entity" in t;
const isMono = (t: ProseToken): t is ProseMono => typeof t === "object" && "mono" in t;
const isStrong = (t: ProseToken): t is ProseStrong => typeof t === "object" && "strong" in t;

const compareChart = (card: CompareCard) => {
  const f = card.format ?? { style: "percent" as const };
  const dense = card.series.map((s) => smooth(s.values));
  const dom = domain(dense);
  return {
    f,
    dense,
    dom,
    lines: dense.map((d) => linePath(d, dom, COMPARE_BOX)),
    areas: dense.map((d) => areaPath(d, dom, COMPARE_BOX)),
    ends: dense.map((d) => yOf(d[d.length - 1] ?? 0, dom, COMPARE_BOX)),
    summary: summarize(card.series, f, card.labels),
    last: card.series.map((s) => s.values[s.values.length - 1] ?? 0),
  };
};
const anomalyChart = (card: AnomalyCard) => {
  const m = card.metrics[0];
  const dense = smooth(m.values);
  const dom = domain([dense]);
  return {
    m,
    line: linePath(dense, dom, ANOMALY_BOX),
    end: yOf(dense[dense.length - 1] ?? 0, dom, ANOMALY_BOX),
    ticks: niceTicks(dom, 3).map((v) => ({ v, y: yOf(v, dom, ANOMALY_BOX), label: formatValue(v, { ...m.format, signed: false }) })),
    summary: summarize([{ name: m.label, values: m.values }], m.format, card.labels),
  };
};
const xLabels = (labels?: string[]) =>
  labels?.length ? [labels[0], labels[Math.floor((labels.length - 1) / 2)], labels[labels.length - 1]] : null;
const chevrons = ["M15 18l-6-6 6-6", "M9 6l6 6-6 6"];
---

<div
  class:list={["vs-insight-cards", className]}
  data-autoplay={autoplay ? "" : undefined}
  data-interval={interval}
  {...rest}
>
  <script type="application/json" data-vs-config set:html={JSON.stringify({ pages, start })} />
  <div class="ic-pager">
    <h3 class="ic-heading">
      <span class="ic-heading-title">{title}</span>
      <span class="ic-heading-count"><span class="ic-sr">(</span>{pages.length}<span class="ic-sr"> total)</span></span>
    </h3>
    <span class="ic-pager-btns">
      {
        chevrons.map((d, i) => (
          <button type="button" class="ic-pager-btn" data-move={i === 0 ? -1 : 1} aria-label={i === 0 ? "Previous insight" : "Next insight"} aria-controls={`${uid}-slides`}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={d} /></svg>
          </button>
        ))
      }
    </span>
  </div>

  <div class="ic-slides" id={`${uid}-slides`} aria-live={autoplay ? "off" : "polite"} data-slides>
    {
      pages.map((p, pi) => {
        const card = p.card;
        return (
          <section class="ic-slide" role="group" aria-roledescription="insight" aria-label={`${pi + 1} of ${pages.length}`} hidden={pi !== start} data-slide={pi}>
            <p class="ic-prose">
              {p.prose.map((t) =>
                typeof t === "string" ? (
                  t
                ) : isEntity(t) ? (
                  <span class="ic-entity"><span class="ic-entity-dot" style={`background: ${t.color ?? "var(--vs-orange)"}`} aria-hidden="true" />@{t.entity}</span>
                ) : isMono(t) ? (
                  <code class:list={["ic-mono", `ic-tone-${t.tone}`]}>{t.mono}</code>
                ) : isStrong(t) ? (
                  <span class="ic-strong">{t.strong}</span>
                ) : null,
              )}
            </p>

            <div class="ic-card-wrap">
              {card.kind === "compare" && (() => {
                const c = compareChart(card);
                const xl = xLabels(card.labels);
                return (
                  <div class="ic-card">
                    <div class="ic-legend">
                      {card.series.map((s, i) => (
                        <div class="ic-legend-item">
                          <span class="ic-legend-name"><span class="ic-dot" style={`background: ${s.color}`} aria-hidden="true" />{s.name}</span>
                          <span class:list={["ic-big", `ic-tone-${s.tone}`]}>{formatValue(c.last[i], c.f)}</span>
                          <code class:list={["ic-mono", `ic-tone-${s.tone}`]}>{s.sub}</code>
                        </div>
                      ))}
                    </div>
                    <div class="ic-chart">
                      <div class="ic-chart-bar">
                        <span class="ic-caption">{card.caption ?? "Trend snapshot"}</span>
                        <span class="ic-badge">{card.badge ?? "Snapshot"}</span>
                      </div>
                      <div
                        class="ic-stage"
                        data-stage
                        data-page={pi}
                        tabindex="0"
                        role="slider"
                        aria-label={`${card.caption ?? "Trend"} chart. Use the arrow keys to scrub.`}
                        aria-describedby={`${uid}-sum-${pi}`}
                        aria-valuemin="0"
                        aria-valuemax={Math.max(0, card.series[0].values.length - 1)}
                        aria-valuenow={Math.max(0, card.series[0].values.length - 1)}
                        aria-valuetext={card.series.map((s, i) => `${s.name} ${formatValue(c.last[i], c.f)}`).join(", ")}
                      >
                        <svg class="ic-svg" viewBox="0 0 1000 166" preserveAspectRatio="none" aria-hidden="true">
                          <defs>
                            {card.series.map((s, i) => (
                              <linearGradient id={`${uid}-g${pi}-${i}`} x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0" style={`stop-color: ${s.color}; stop-opacity: 0.1`} />
                                <stop offset="1" style={`stop-color: ${s.color}; stop-opacity: 0`} />
                              </linearGradient>
                            ))}
                          </defs>
                          <g class="ic-lines">
                            {card.series.map((s, i) => (
                              <>
                                <path class="ic-area" d={c.areas[i]} fill={`url(#${uid}-g${pi}-${i})`} data-area={i} />
                                <path class="ic-line" d={c.lines[i]} style={`stroke: ${s.color}`} data-line={i} />
                              </>
                            ))}
                          </g>
                        </svg>
                        {card.series.map((s, i) => (
                          <span class="ic-end" style={`top: ${c.ends[i].toFixed(1)}px; color: ${s.color}`} data-end={i} aria-hidden="true" />
                        ))}
                        {xl && <div class="ic-xlabels" aria-hidden="true">{xl.map((l) => <span>{l}</span>)}</div>}
                      </div>
                      <p class="ic-sr" id={`${uid}-sum-${pi}`}>{c.summary}</p>
                    </div>
                  </div>
                );
              })()}

              {card.kind === "anomaly" && (() => {
                const a = anomalyChart(card);
                const color = card.color ?? "var(--vs-red)";
                const xl = xLabels(card.labels);
                return (
                  <div class="ic-card">
                    <div class="ic-row">
                      <span class="ic-title">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--vs-red)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
                        {card.title}
                      </span>
                      <span class="ic-badge">{card.badge ?? "Snapshot"}</span>
                    </div>
                    <div class="ic-chart">
                      <div class="ic-chart-bar">
                        <span class="ic-caption" data-readout>{a.m.threshold}</span>
                        {card.metrics.length > 1 && (
                          <span class="ic-seg" role="group" aria-label="Metric">
                            {card.metrics.map((m, i) => (
                              <button type="button" class="ic-seg-btn" aria-pressed={i === 0 ? "true" : "false"} data-metric={i}>{m.label}</button>
                            ))}
                          </span>
                        )}
                      </div>
                      <div
                        class="ic-stage"
                        data-stage
                        data-page={pi}
                        tabindex="0"
                        role="slider"
                        aria-label={`${card.title} chart. Use the arrow keys to scrub.`}
                        aria-describedby={`${uid}-sum-${pi}`}
                        aria-valuemin="0"
                        aria-valuemax={Math.max(0, a.m.values.length - 1)}
                        aria-valuenow={Math.max(0, a.m.values.length - 1)}
                        aria-valuetext={`${a.m.label} ${formatValue(a.m.values[a.m.values.length - 1] ?? 0, a.m.format)}`}
                        style={`--ic-line: ${color}`}
                      >
                        <svg class="ic-svg" viewBox="0 0 1000 166" preserveAspectRatio="none" aria-hidden="true">
                          <g data-grid>
                            {a.ticks.map((t) => <path class="ic-grid-line" d={`M0,${t.y.toFixed(1)}H1000`} />)}
                          </g>
                          <g class="ic-lines">
                            <path class="ic-line" d={a.line} style={`stroke: ${color}`} data-line="0" />
                          </g>
                        </svg>
                        <div class="ic-grid-labels" data-grid-labels aria-hidden="true">
                          {a.ticks.map((t) => <span style={`top: ${t.y.toFixed(1)}px`}>{t.label}</span>)}
                        </div>
                        <span class="ic-end" style={`top: ${a.end.toFixed(1)}px; color: ${color}`} data-end="0" aria-hidden="true" />
                        {xl && <div class="ic-xlabels" aria-hidden="true">{xl.map((l) => <span>{l}</span>)}</div>}
                      </div>
                      <p class="ic-sr" id={`${uid}-sum-${pi}`} data-summary>{a.summary}</p>
                    </div>
                    <div class="ic-foot">
                      <span class="ic-total">{card.total}</span>
                      <code class:list={["ic-mono", `ic-tone-${card.deltaTone ?? "red"}`]}>{card.delta}</code>
                      <span class="ic-note">{card.deltaNote}</span>
                    </div>
                  </div>
                );
              })()}

              {card.kind === "allocation" && (() => {
                const al = card;
                const first = al.segments[0];
                return (
                  <div class="ic-card" data-allocation={pi}>
                    <span class="ic-title">
                      <span class="ic-mono-disc" style={`background: ${al.color ?? first?.color ?? "var(--vs-orange)"}`} aria-hidden="true">{al.monogram ?? al.title.charAt(0)}</span>
                      {al.title}
                    </span>
                    <span class="ic-amount" data-amount>{first?.amount}</span>
                    <div class="ic-bar" role="group" aria-label="Allocation segments">
                      {al.segments.map((s, i) => (
                        <button
                          type="button"
                          class="ic-bar-seg"
                          aria-pressed={i === 0 ? "true" : "false"}
                          aria-label={`${s.label}: ${s.pct}%`}
                          data-seg={i}
                          style={`width: ${s.pct}%; background: ${s.color}`}
                        >
                          <span class="ic-bar-shine" />
                        </button>
                      ))}
                    </div>
                    <div class="ic-legend-row" role="group" aria-label="Allocation legend">
                      {al.segments.map((s, i) => (
                        <button type="button" class="ic-chip" aria-pressed={i === 0 ? "true" : "false"} data-seg={i}>
                          <span class="ic-chip-dot" style={`background: ${s.color}`} aria-hidden="true" />
                          {s.name} <span class="ic-tabular">{s.pct}%</span>
                        </button>
                      ))}
                    </div>
                    <div class="ic-detail" aria-live="polite">
                      <span class="ic-detail-label" data-detail-label style={`color: ${first?.tone ?? first?.color}`}>{first?.label}</span>
                      <span class="ic-detail-note">{al.note}</span>
                    </div>
                  </div>
                );
              })()}
            </div>

            {p.pill && <button type="button" class="ic-pill" data-ask={p.key}>{p.pill}</button>}
          </section>
        );
      })
    }
  </div>
</div>

<script>
  import {
    ANOMALY_BOX,
    COMPARE_BOX,
    SAMPLES_PER_SEGMENT,
    VIEW_W,
    areaPath,
    domain,
    formatValue,
    linePath,
    niceTicks,
    smooth,
    summarize,
    yOf,
    type AllocationCard,
    type AnomalyCard,
    type CompareCard,
    type InsightPage,
    type ValueFormat,
  } from "./insight-chart";

  const escapeHtml = (s: string) => s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);

  interface Series {
    name: string;
    values: number[];
    dense: number[];
    color: string;
  }

  /** Wire one scrubbable chart. */
  function initChart(stage: HTMLElement, page: InsightPage, reduce: boolean) {
    const card = page.card as CompareCard | AnomalyCard;
    const isAnomaly = card.kind === "anomaly";
    const box = isAnomaly ? ANOMALY_BOX : COMPARE_BOX;
    const chart = stage.closest(".ic-card")!;
    const readout = chart.querySelector<HTMLElement>("[data-readout]");
    const summaryEl = chart.querySelector<HTMLElement>("[data-summary]");
    let metricIndex = 0;

    const seriesFor = (): Series[] => {
      if (card.kind === "anomaly") {
        const m = card.metrics[metricIndex];
        const color = card.color ?? "var(--vs-red)";
        return [{ name: m.label, values: m.values, dense: smooth(m.values), color }];
      }
      return card.series.map((s) => ({ name: s.name, values: s.values, dense: smooth(s.values), color: s.color }));
    };
    const formatFor = (): ValueFormat =>
      card.kind === "anomaly" ? card.metrics[metricIndex].format : (card.format ?? { style: "percent" });

    let series = seriesFor();
    let dom = domain(series.map((s) => s.dense));
    const lines = Array.from(stage.querySelectorAll<SVGPathElement>("[data-line]"));
    const areas = Array.from(stage.querySelectorAll<SVGPathElement>("[data-area]"));
    const ends = Array.from(stage.querySelectorAll<HTMLElement>("[data-end]"));

    /* scrub layer */
    const cursor = document.createElement("span");
    cursor.className = "ic-cursor";
    cursor.hidden = true;
    const tipAnchor = document.createElement("span");
    tipAnchor.className = "ic-tip-anchor";
    tipAnchor.hidden = true;
    const dots = series.map(() => {
      const d = document.createElement("span");
      d.className = "ic-scrub-dot";
      d.hidden = true;
      return d;
    });
    stage.append(cursor, ...dots, tipAnchor);

    let index: number | null = null;
    const pointCount = () => series[0]?.dense.length ?? 0;
    const render = () => {
      const n = pointCount();
      const show = index !== null && n > 1;
      cursor.hidden = !show;
      tipAnchor.hidden = !show;
      dots.forEach((d) => (d.hidden = !show));
      const f = formatFor();
      if (show && index !== null) {
        const pct = (index / (n - 1)) * 100;
        cursor.style.left = `${pct}%`;
        tipAnchor.style.left = `${Math.min(Math.max(pct, 28), 72)}%`;
        series.forEach((s, i) => {
          dots[i].style.left = `${pct}%`;
          dots[i].style.top = `${yOf(s.dense[index!], dom, box)}px`;
          dots[i].style.color = s.color;
        });
        tipAnchor.innerHTML = `<span class="ic-tip">${series
          .map((s) => `<span class="ic-tip-item"><span class="ic-tip-dot" style="background:${escapeHtml(s.color)}"></span>${escapeHtml(formatValue(s.dense[index!], f))}</span>`)
          .join("")}</span>`;
        if (readout) readout.textContent = formatValue(series[0].dense[index], { ...f, signed: false });
      } else if (readout && card.kind === "anomaly") {
        readout.textContent = card.metrics[metricIndex].threshold;
      }
      // Slider semantics follow the original (unsmoothed) readings.
      const raw = index === null ? series[0].values.length - 1 : Math.round(index / SAMPLES_PER_SEGMENT);
      const labels = card.labels;
      stage.setAttribute("aria-valuenow", String(raw));
      stage.setAttribute(
        "aria-valuetext",
        `${labels?.[raw] ? `${labels[raw]}: ` : ""}${series.map((s) => `${s.name} ${formatValue(s.values[raw] ?? 0, f)}`).join(", ")}`,
      );
    };

    const fromPointer = (e: PointerEvent) => {
      const rect = stage.getBoundingClientRect();
      const progress = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
      index = Math.round(progress * (pointCount() - 1));
      render();
    };
    const clear = () => {
      index = null;
      render();
    };
    stage.addEventListener("pointerdown", fromPointer);
    stage.addEventListener("pointermove", fromPointer);
    stage.addEventListener("pointerleave", clear);
    stage.addEventListener("pointercancel", clear);
    stage.addEventListener("pointerup", (e) => {
      if (e.pointerType !== "mouse") clear();
    });
    stage.addEventListener("blur", clear);
    stage.addEventListener("keydown", (e) => {
      const n = pointCount();
      const last = n - 1;
      const step = SAMPLES_PER_SEGMENT;
      const current = index ?? last;
      let next: number | null | undefined;
      if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = Math.max(0, (index === null ? last : Math.ceil(current / step) * step) - step);
      else if (e.key === "ArrowRight" || e.key === "ArrowUp") next = Math.min(last, Math.floor(current / step) * step + step);
      else if (e.key === "Home") next = 0;
      else if (e.key === "End") next = last;
      else if (e.key === "Escape") next = null;
      if (next === undefined) return;
      e.preventDefault();
      index = next;
      render();
    });

    /* geometry */
    const paint = (denseSets: number[][], d: [number, number]) => {
      denseSets.forEach((dense, i) => {
        lines[i]?.setAttribute("d", linePath(dense, d, box));
        areas[i]?.setAttribute("d", areaPath(dense, d, box));
        if (ends[i]) ends[i].style.top = `${yOf(dense[dense.length - 1] ?? 0, d, box)}px`;
      });
    };
    const paintGrid = () => {
      const grid = stage.querySelector("[data-grid]");
      const labels = stage.querySelector("[data-grid-labels]");
      if (!grid || !labels) return;
      const f = { ...formatFor(), signed: false };
      const ticks = niceTicks(dom, 3);
      grid.innerHTML = ticks.map((v) => `<path class="ic-grid-line" d="M0,${yOf(v, dom, box).toFixed(1)}H${VIEW_W}" />`).join("");
      labels.innerHTML = ticks.map((v) => `<span style="top:${yOf(v, dom, box).toFixed(1)}px">${escapeHtml(formatValue(v, f))}</span>`).join("");
    };

    /* metric toggle morphs the line */
    let raf = 0;
    chart.querySelectorAll<HTMLButtonElement>("[data-metric]").forEach((btn) => {
      btn.addEventListener("click", () => {
        const next = Number(btn.dataset.metric);
        if (next === metricIndex || card.kind !== "anomaly") return;
        chart.querySelectorAll("[data-metric]").forEach((b) => b.setAttribute("aria-pressed", String(b === btn)));
        const fromSets = series.map((s) => s.dense);
        const fromDom = dom;
        metricIndex = next;
        series = seriesFor();
        dom = domain(series.map((s) => s.dense));
        if (summaryEl) summaryEl.textContent = summarize([{ name: series[0].name, values: series[0].values }], formatFor(), card.labels);
        render();
        cancelAnimationFrame(raf);
        if (reduce || fromSets[0].length !== series[0].dense.length) {
          paint(series.map((s) => s.dense), dom);
          paintGrid();
          return;
        }
        const t0 = performance.now();
        const ease = (t: number) => 1 - (1 - t) ** 3;
        const frame = (now: number) => {
          const t = ease(Math.min(1, (now - t0) / 380));
          const sets = series.map((s, i) => s.dense.map((v, j) => fromSets[i][j] + (v - fromSets[i][j]) * t));
          const d: [number, number] = [fromDom[0] + (dom[0] - fromDom[0]) * t, fromDom[1] + (dom[1] - fromDom[1]) * t];
          paint(sets, d);
          if (t < 1) raf = requestAnimationFrame(frame);
          else paintGrid();
        };
        paintGrid();
        raf = requestAnimationFrame(frame);
      });
    });

    /* draw in once visible */
    if (!reduce) {
      stage.classList.add("is-pending");
      const io = new IntersectionObserver(([entry]) => {
        if (!entry.isIntersecting) return;
        io.disconnect();
        stage.classList.remove("is-pending");
      });
      io.observe(stage);
      return () => {
        io.disconnect();
        cancelAnimationFrame(raf);
      };
    }
    return () => cancelAnimationFrame(raf);
  }

  function initAllocation(cardEl: HTMLElement, card: AllocationCard) {
    const amount = cardEl.querySelector<HTMLElement>("[data-amount]")!;
    const label = cardEl.querySelector<HTMLElement>("[data-detail-label]")!;
    const select = (i: number) => {
      const s = card.segments[i];
      if (!s) return;
      cardEl.querySelectorAll<HTMLElement>("[data-seg]").forEach((el) => el.setAttribute("aria-pressed", String(Number(el.dataset.seg) === i)));
      amount.textContent = s.amount;
      label.textContent = s.label;
      label.style.color = s.tone ?? s.color;
    };
    cardEl.querySelectorAll<HTMLButtonElement>("[data-seg]").forEach((btn) => btn.addEventListener("click", () => select(Number(btn.dataset.seg))));
  }

  function init(root: HTMLElement) {
    const cfg = JSON.parse(root.querySelector("script[data-vs-config]")?.textContent || "{}") as { pages: InsightPage[]; start: number };
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const slides = Array.from(root.querySelectorAll<HTMLElement>("[data-slide]"));
    const slidesEl = root.querySelector<HTMLElement>("[data-slides]")!;
    const cleanups: Array<() => void> = [];
    let current = cfg.start;

    root.querySelectorAll<HTMLElement>("[data-stage]").forEach((stage) => {
      const page = cfg.pages[Number(stage.dataset.page)];
      if (page) cleanups.push(initChart(stage, page, reduce));
    });
    root.querySelectorAll<HTMLElement>("[data-allocation]").forEach((el) => {
      const page = cfg.pages[Number(el.dataset.allocation)];
      if (page?.card.kind === "allocation") initAllocation(el, page.card);
    });

    const show = (i: number) => {
      const next = (i + slides.length) % slides.length;
      if (next === current) return;
      slides[current].hidden = true;
      const slide = slides[next];
      slide.hidden = false;
      if (!reduce) {
        slide.classList.remove("is-entering");
        void slide.offsetWidth;
        slide.classList.add("is-entering");
      }
      current = next;
      root.dispatchEvent(new CustomEvent("vs-insight-page", { bubbles: true, detail: { index: next, key: cfg.pages[next]?.key } }));
    };
    root.querySelectorAll<HTMLButtonElement>("[data-move]").forEach((btn) => btn.addEventListener("click", () => show(current + Number(btn.dataset.move))));
    root.querySelectorAll<HTMLButtonElement>("[data-ask]").forEach((btn) =>
      btn.addEventListener("click", () => root.dispatchEvent(new CustomEvent("vs-insight-ask", { bubbles: true, detail: { key: btn.dataset.ask, text: btn.textContent?.trim() } }))),
    );

    /* autoplay: in view only, pauses on hover/focus, yields to any interaction */
    if (root.hasAttribute("data-autoplay") && !reduce && slides.length > 1) {
      const interval = Number(root.dataset.interval) || 6000;
      let timer: number | undefined;
      let inView = false;
      let paused = false;
      let stopped = false;
      const schedule = () => {
        window.clearTimeout(timer);
        if (stopped || paused || !inView) return;
        timer = window.setTimeout(() => {
          show(current + 1);
          schedule();
        }, interval);
      };
      const stop = () => {
        stopped = true;
        window.clearTimeout(timer);
        slidesEl.setAttribute("aria-live", "polite");
      };
      const io = new IntersectionObserver(([entry]) => {
        inView = entry.isIntersecting;
        schedule();
      });
      io.observe(root);
      root.addEventListener("pointerdown", stop, true);
      root.addEventListener("keydown", stop, true);
      root.addEventListener("mouseenter", () => ((paused = true), schedule()));
      root.addEventListener("mouseleave", () => ((paused = false), schedule()));
      root.addEventListener("focusin", () => ((paused = true), schedule()));
      root.addEventListener("focusout", () => ((paused = false), schedule()));
      cleanups.push(() => {
        io.disconnect();
        window.clearTimeout(timer);
      });
    }

    return () => cleanups.forEach((fn) => fn());
  }

  const teardowns = new Set<() => void>();
  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-insight-cards:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      teardowns.add(init(root));
    });
  boot();
  document.addEventListener("astro:page-load", boot);
  document.addEventListener("astro:before-swap", () => {
    teardowns.forEach((fn) => fn());
    teardowns.clear();
  });
</script>

<style>
  .vs-insight-cards {
    width: 100%;
    max-width: 344px;
    min-height: 408px;
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    text-align: left;
  }
  .ic-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  button:focus-visible,
  .ic-stage:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }

  /* pager header */
  .ic-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ic-heading {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
  }
  .ic-heading-count {
    color: var(--vs-ink-3);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }
  .ic-pager-btns {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .ic-pager-btn {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--vs-ink-3);
    transition: background-color 100ms ease-out, color 100ms ease-out, transform 100ms ease-out;
  }
  .ic-pager-btn:hover {
    background: var(--vs-hover);
    color: var(--vs-ink);
  }
  .ic-pager-btn:active {
    transform: scale(0.96);
  }

  /* page */
  .ic-slide.is-entering {
    animation: vs-insight-cards-in 250ms var(--vs-ease-out) both;
  }
  @keyframes vs-insight-cards-in {
    from {
      opacity: 0;
      filter: blur(4px);
    }
    to {
      opacity: 1;
      filter: blur(0);
    }
  }
  .ic-prose {
    margin: 6px 0 0;
    color: var(--vs-ink-2);
    font-size: 12.5px;
    line-height: 1.625;
  }
  .ic-entity {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--vs-ink);
    font-weight: 500;
    vertical-align: baseline;
  }
  .ic-entity-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .ic-strong {
    color: var(--vs-ink);
    font-weight: 500;
  }
  .ic-mono {
    font-family: var(--vs-font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
  }
  .ic-tone-red {
    color: var(--vs-red);
  }
  .ic-tone-green {
    color: var(--vs-green);
  }
  .ic-card-wrap {
    margin-top: 8px;
  }
  .ic-card {
    min-height: 278px;
    padding: 12px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-hairline);
  }
  .ic-pill {
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-surface);
    color: var(--vs-ink);
    box-shadow: var(--vs-shadow-btn);
    font-size: 12px;
    text-align: left;
    transition: background-color 100ms ease-out;
  }
  .ic-pill:hover {
    background: var(--vs-hover);
  }

  /* compare legend */
  .ic-legend {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .ic-legend-item {
    flex: 1;
  }
  .ic-legend-name {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--vs-ink-2);
    font-size: 11.5px;
  }
  .ic-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .ic-big {
    display: block;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }

  /* chart well */
  .ic-chart {
    margin-top: 8px;
    overflow: hidden;
    border-radius: var(--vs-radius-control);
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-hairline);
  }
  .ic-chart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--vs-line);
  }
  .ic-caption {
    color: var(--vs-ink-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .ic-badge {
    padding: 2px 8px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-field);
    color: var(--vs-ink-2);
    font-size: 10.5px;
    font-weight: 500;
  }
  .ic-seg {
    display: flex;
    padding: 2px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-field);
  }
  .ic-seg-btn {
    padding: 2px 8px;
    border-radius: var(--vs-radius-pill);
    color: var(--vs-ink-3);
    font-size: 10.5px;
    font-weight: 500;
    transition: background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
  }
  .ic-seg-btn:hover {
    color: var(--vs-ink-2);
  }
  .ic-seg-btn[aria-pressed="true"] {
    background: var(--vs-surface);
    color: var(--vs-ink);
    box-shadow: var(--vs-shadow-btn);
  }
  .ic-seg-btn:active {
    transform: scale(0.96);
  }

  .ic-stage {
    position: relative;
    height: 166px;
    overflow: hidden;
    cursor: crosshair;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }
  .ic-stage:focus-visible {
    box-shadow: inset 0 0 0 2px var(--vs-accent);
  }
  .ic-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .ic-lines {
    clip-path: inset(0 0 0 0);
    transition: clip-path 900ms var(--vs-ease-out);
  }
  .ic-stage:global(.is-pending) .ic-lines {
    clip-path: inset(0 100% 0 0);
    transition: none;
  }
  .ic-line {
    fill: none;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .ic-area {
    stroke: none;
  }
  .vs-insight-cards :global(.ic-grid-line) {
    fill: none;
    stroke: var(--vs-line-strong);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
  }
  .ic-grid-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .ic-grid-labels :global(span) {
    position: absolute;
    left: 8px;
    transform: translateY(-115%);
    color: var(--vs-ink-3);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }
  .ic-xlabels {
    position: absolute;
    right: 8px;
    bottom: 4px;
    left: 8px;
    display: flex;
    justify-content: space-between;
    color: var(--vs-ink-3);
    font-size: 10px;
    pointer-events: none;
  }
  .ic-end {
    position: absolute;
    left: calc(100% - 6px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
    transform: translate(-50%, -50%);
    transition: opacity 300ms ease-out 700ms;
  }
  .ic-stage:global(.is-pending) .ic-end {
    opacity: 0;
    transition: none;
  }

  /* scrub cursor + tooltip */
  .vs-insight-cards :global(.ic-cursor) {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--vs-ink);
    opacity: 0.26;
    pointer-events: none;
  }
  .vs-insight-cards :global(.ic-scrub-dot) {
    position: absolute;
    z-index: 4;
    width: 8px;
    height: 8px;
    border: 2px solid var(--vs-surface);
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .vs-insight-cards :global(.ic-tip-anchor) {
    position: absolute;
    z-index: 5;
    top: 8px;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .vs-insight-cards :global(.ic-tip) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 9px;
    border: 1px solid var(--vs-line-strong);
    border-radius: 8px;
    background: var(--vs-tooltip-bg);
    color: var(--vs-tooltip-fg);
    box-shadow: var(--vs-shadow-overlay);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .vs-insight-cards :global(.ic-tip-item) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .vs-insight-cards :global(.ic-tip-dot) {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
  }

  /* anomaly */
  .ic-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ic-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--vs-ink);
    font-size: 12px;
    font-weight: 500;
  }
  .ic-foot {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
  }
  .ic-total {
    color: var(--vs-ink);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .ic-note {
    color: var(--vs-ink-3);
    font-size: 11px;
  }

  /* allocation */
  .ic-mono-disc {
    display: flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-size: 8px;
    font-weight: 700;
  }
  .ic-amount {
    display: block;
    margin-top: 4px;
    color: var(--vs-ink);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .ic-bar {
    display: flex;
    height: 36px;
    gap: 2px;
    margin-top: 12px;
    padding: 2px;
    overflow: hidden;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-field);
  }
  .ic-bar-seg {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: var(--vs-radius-pill);
    opacity: 0.58;
    transition:
      opacity 300ms var(--vs-ease-link),
      transform 300ms var(--vs-ease-link),
      box-shadow 300ms var(--vs-ease-link);
  }
  .ic-bar-seg[aria-pressed="true"] {
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }
  .ic-bar-seg:active {
    transform: scale(0.98);
  }
  .ic-bar-shine {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 0%;
    border-radius: var(--vs-radius-pill);
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition:
      width 500ms var(--vs-ease-link),
      opacity 500ms var(--vs-ease-link);
  }
  .ic-bar-seg[aria-pressed="true"] .ic-bar-shine {
    width: calc(100% - 8px);
    opacity: 1;
  }
  .ic-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
  }
  .ic-chip {
    display: flex;
    min-height: 24px;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--vs-radius-pill);
    color: var(--vs-ink-2);
    font-size: 11px;
    transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
  }
  .ic-chip:hover {
    background: var(--vs-hover);
    color: var(--vs-ink);
  }
  .ic-chip[aria-pressed="true"] {
    background: var(--vs-field);
    color: var(--vs-ink);
  }
  .ic-chip:active {
    transform: scale(0.96);
  }
  .ic-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  .ic-tabular {
    font-variant-numeric: tabular-nums;
  }
  .ic-detail {
    min-height: 64px;
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: var(--vs-radius-control);
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-hairline);
  }
  .ic-detail-label {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
  }
  .ic-detail-note {
    display: block;
    margin-top: 4px;
    color: var(--vs-ink-3);
    font-size: 11px;
    line-height: 1.625;
  }

  @media (prefers-reduced-motion: reduce) {
    .ic-slide.is-entering {
      animation: none;
    }
    .ic-lines,
    .ic-end,
    .ic-bar-seg,
    .ic-bar-shine {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .ic-line {
      stroke: CanvasText !important;
    }
    .ic-bar-seg {
      forced-color-adjust: none;
      outline: 1px solid CanvasText;
    }
  }
</style>
```

### `src/components/viewership/insight-cards/insight-chart.ts`

```ts
/**
 * insight-chart: types and chart maths for <InsightCards>.
 *
 * Ported from Beautiful UI `components/primitives/InsightCards.tsx`
 * (MIT, © 2026 Shane Levine). Native SVG line chart: Catmull-Rom
 * smoothing, paths, grid ticks, value formatting and a text summary. No DOM
 * access, so server render and client script share it.
 */

export type Tone = "red" | "green";

/** Prose is a list of tokens: plain strings, @entities, mono deltas and emphasis. */
export interface ProseEntity {
  entity: string;
  /** Dot color, any CSS color. */
  color?: string;
}
export interface ProseMono {
  mono: string;
  tone: Tone;
}
export interface ProseStrong {
  strong: string;
}
export type ProseToken = string | ProseEntity | ProseMono | ProseStrong;

export interface ValueFormat {
  style: "percent" | "money" | "unit";
  /** Suffix for style "unit", e.g. "clicks". */
  unit?: string;
  /** Fraction digits (percent defaults to 2, others to 0). */
  decimals?: number;
  /** Prefix positive values with "+" (percent defaults to true). */
  signed?: boolean;
  /** Currency symbol for style "money". Default "$". */
  currency?: string;
}

export interface CompareSeries {
  name: string;
  values: number[];
  /** Mono sub-line under the big value, e.g. "-$2,377.66". */
  sub: string;
  tone: Tone;
  /** Line color, any CSS color. */
  color: string;
}
export interface CompareCard {
  kind: "compare";
  /** Chart toolbar caption. */
  caption?: string;
  badge?: string;
  series: CompareSeries[];
  format?: ValueFormat;
  /** X-axis labels, one per value (first, middle and last are shown). */
  labels?: string[];
}

export interface AnomalyMetric {
  key: string;
  label: string;
  values: number[];
  format: ValueFormat;
  /** Shown in the chart toolbar when not scrubbing, e.g. "$2,112 threshold". */
  threshold: string;
}
export interface AnomalyCard {
  kind: "anomaly";
  title: string;
  badge?: string;
  metrics: AnomalyMetric[];
  /** Line color. Default var(--vs-red). */
  color?: string;
  /** Footer: big value, mono delta and a note. */
  total: string;
  delta: string;
  deltaTone?: Tone;
  deltaNote: string;
  labels?: string[];
}

export interface AllocationSegment {
  name: string;
  label: string;
  pct: number;
  amount: string;
  /** Segment fill, any CSS color. */
  color: string;
  /** Label color in the detail box (defaults to `color`). */
  tone?: string;
}
export interface AllocationCard {
  kind: "allocation";
  title: string;
  monogram?: string;
  /** Monogram disc color. */
  color?: string;
  segments: AllocationSegment[];
  note: string;
}

export type InsightCard = CompareCard | AnomalyCard | AllocationCard;

export interface InsightPage {
  key: string;
  prose: ProseToken[];
  card: InsightCard;
  /** Suggested follow-up shown as a pill button. */
  pill?: string;
}

/* ── maths ─────────────────────────────────────────────── */

export const SAMPLES_PER_SEGMENT = 9;
export const VIEW_W = 1000;

/** Catmull-Rom resample: a sparse series becomes a dense, smoothly curved one. */
export function smooth(values: number[], perSegment = SAMPLES_PER_SEGMENT): number[] {
  if (values.length < 3) return values.slice();
  const out: number[] = [];
  const n = values.length;
  for (let i = 0; i < n - 1; i += 1) {
    const p0 = values[Math.max(0, i - 1)];
    const p1 = values[i];
    const p2 = values[i + 1];
    const p3 = values[Math.min(n - 1, i + 2)];
    for (let s = 0; s < perSegment; s += 1) {
      const t = s / perSegment;
      const t2 = t * t;
      const t3 = t2 * t;
      out.push(0.5 * (2 * p1 + (-p0 + p2) * t + (2 * p0 - 5 * p1 + 4 * p2 - p3) * t2 + (-p0 + 3 * p1 - 3 * p2 + p3) * t3));
    }
  }
  out.push(values[n - 1]);
  return out;
}

export interface Box {
  height: number;
  top: number;
  bottom: number;
}

/** Plot boxes (px in the 1000x166 viewBox); must match the viewBox in InsightCards.astro. */
export const COMPARE_BOX: Box = { height: 166, top: 40, bottom: 22 };
export const ANOMALY_BOX: Box = { height: 166, top: 34, bottom: 22 };

export function domain(series: number[][]): [number, number] {
  const all = series.flat();
  let min = Math.min(...all);
  let max = Math.max(...all);
  if (!Number.isFinite(min) || !Number.isFinite(max)) return [0, 1];
  if (min === max) {
    min -= 1;
    max += 1;
  }
  const pad = (max - min) * 0.06;
  return [min - pad, max + pad];
}

export function yOf(value: number, [min, max]: [number, number], box: Box): number {
  const plot = box.height - box.top - box.bottom;
  return box.top + (1 - (value - min) / (max - min)) * plot;
}

/** SVG path for a dense series across the full view width. */
export function linePath(dense: number[], dom: [number, number], box: Box): string {
  if (!dense.length) return "";
  const step = dense.length > 1 ? VIEW_W / (dense.length - 1) : 0;
  return dense.map((v, i) => `${i ? "L" : "M"}${(i * step).toFixed(1)},${yOf(v, dom, box).toFixed(1)}`).join("");
}

export function areaPath(dense: number[], dom: [number, number], box: Box): string {
  const line = linePath(dense, dom, box);
  return line ? `${line}L${VIEW_W},${box.height}L0,${box.height}Z` : "";
}

/** About `count` round tick values inside the domain. */
export function niceTicks([min, max]: [number, number], count = 3): number[] {
  const raw = (max - min) / (count + 1);
  const mag = 10 ** Math.floor(Math.log10(raw));
  const norm = raw / mag;
  const step = (norm >= 5 ? 5 : norm >= 2 ? 2 : 1) * mag;
  const ticks: number[] = [];
  for (let v = Math.ceil(min / step) * step; v <= max; v += step) ticks.push(Number(v.toFixed(10)));
  return ticks;
}

export function formatValue(value: number, f: ValueFormat = { style: "percent" }): string {
  const decimals = f.decimals ?? (f.style === "percent" ? 2 : 0);
  const signed = f.signed ?? f.style === "percent";
  const abs = Math.abs(value).toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
  const sign = value < 0 ? "-" : signed && value > 0 ? "+" : "";
  if (f.style === "percent") return `${sign}${abs}%`;
  if (f.style === "money") return `${sign}${f.currency ?? "$"}${abs}`;
  return `${sign}${abs}${f.unit ? ` ${f.unit}` : ""}`;
}

/** Plain-language chart summary for assistive tech. */
export function summarize(series: Array<{ name: string; values: number[] }>, f: ValueFormat, labels?: string[]): string {
  const span = labels?.length ? ` from ${labels[0]} to ${labels[labels.length - 1]}` : ` over ${series[0]?.values.length ?? 0} readings`;
  const parts = series.map((s) => {
    const first = s.values[0] ?? 0;
    const last = s.values[s.values.length - 1] ?? 0;
    const peak = Math.max(...s.values);
    const low = Math.min(...s.values);
    const dir = last > first ? "rose" : last < first ? "fell" : "held";
    return `${s.name} ${dir} from ${formatValue(first, f)} to ${formatValue(last, f)} (high ${formatValue(peak, f)}, low ${formatValue(low, f)})`;
  });
  return `Line chart${span}. ${parts.join("; ")}.`;
}
```


---

# Code Block

> Line-numbered code listing with copy, or a unified diff.

- **Slug:** `code-block`
- **Kind:** component · **Category:** Content
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/CodeBlock.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/code-block
- **All files in one bundle:** https://viewership.ai/design/components/code-block.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/code-block.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy these files into `src/components/viewership/code-block/`:

   - `CodeBlock.astro` (raw: https://viewership.ai/design/raw/code-block/CodeBlock.astro.txt)
   - `highlight.ts` (raw: https://viewership.ai/design/raw/code-block/highlight.ts.txt)

npm packages: none.

## Usage

```astro
---
import CodeBlock from "../components/viewership/code-block/CodeBlock.astro";
---

<CodeBlock />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import CodeBlock from "./CodeBlock.astro";

interface Props {
  variant?: string;
}
const { variant = "Code" } = Astro.props;

const before = `export async function draftPost() {
  const brief = await getBrief("spring-trails");
  const data = await ga4.fetch({ brief });
  await voice.apply(data, { tone: "plain" });
  return data.summary;
}`;

const after = `export async function draftPost() {
  const brief = await getBrief("spring-trails");
  const data = await ga4.fetch({ brief });
  await voice.apply(data, { tone: "direct" });
  if (!data.approved) return null;
  return data.summary;
}`;

const brief = `{
  "campaign": "Spring Trails",
  "channel": "Email",
  "drafts": 12,
  "score": 87.5,
  "approved": true,
  "publishDate": null
}`;
---

<div class="stage">
  {variant === "Code" && <CodeBlock filename="draft.ts" code={after} />}
  {variant === "Diff" && <CodeBlock variant="diff" filename="draft.ts" diff={{ before, after }} />}
  {variant === "JSON" && <CodeBlock filename="briefs/spring-trails.json" code={brief} />}
</div>

<style>
  .stage {
    display: flex;
    justify-content: center;
  }
</style>
```

## Variants

Demo variants: `Code`, `Diff`, `JSON`.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"code" \| "diff"` | `"code"` | Code listing or unified diff. |
| `code` | `string` |  | Source text for the code view. |
| `lines` | `string[]` |  | Alternative to `code`: one string per line. |
| `language` | `"ts" \| "js" \| "json" \| "text"` |  | Highlighting hint. Inferred from `filename`. |
| `diff` | `DiffRow[] \| { before: string; after: string }` |  | Diff rows, or two texts diffed at build time. |
| `filename` | `string` | `"index.ts"` | Shown in the header. |
| `copyText` | `string` |  | Clipboard text. Defaults to the listing. |
| `labels` | `{ copy?, copied?, copiedAnnouncement? }` |  | Copy button and screen reader text. |

## Source

### `src/components/viewership/code-block/CodeBlock.astro`

```astro
---
/**
 * CodeBlock: a light editor panel with two views.
 *   - code: line-numbered listing with a Copy button
 *   - diff: unified diff with word-level add/del highlights
 * Syntax colouring happens at build time, so no-JS renders fully.
 *
 * Adapted from Beautiful UI CodeBlock (MIT, © 2026 Shane Levine).
 *
 * @example
 * <CodeBlock filename="draft.ts" code={source} />
 * <CodeBlock variant="diff" filename="draft.ts" diff={{ before, after }} />
 *
 * Events: `vs-code-copy` (detail: { text }) fires on the root after a copy.
 */
import type { HTMLAttributes } from "astro/types";
import { diffLines, languageFor, tokenize, tokenizeLines, type DiffRow, type Language } from "./highlight";

export type { CodePiece, DiffRow, Language } from "./highlight";

type Props = HTMLAttributes<"div"> & {
  /** "code" (line-numbered listing) or "diff" (unified diff). */
  variant?: "code" | "diff";
  /** Source text for the code view (split on newlines). */
  code?: string;
  /** Alternative to `code`: one string per line. */
  lines?: string[];
  /** Language hint for highlighting. Inferred from `filename` when omitted. */
  language?: Language;
  /** Diff view: explicit rows, or two texts to diff at build time. */
  diff?: DiffRow[] | { before: string; after: string };
  /** Filename shown in the header (also the region's accessible name). */
  filename?: string;
  /** Text placed on the clipboard; defaults to the listing. */
  copyText?: string;
  labels?: { copy?: string; copied?: string; copiedAnnouncement?: string };
};

const {
  variant = "code",
  code,
  lines,
  language,
  diff = [],
  filename = "index.ts",
  copyText,
  labels,
  class: className,
  ...rest
} = Astro.props;

const text = { copy: "Copy", copied: "Copied", copiedAnnouncement: "Code copied to clipboard", ...labels };
const lang = language ?? languageFor(filename);
const isDiff = variant === "diff";

const source = code ?? (lines ?? []).join("\n");
const listing = isDiff ? [] : tokenizeLines(source.replace(/\n$/, ""), lang);
const rows: DiffRow[] = Array.isArray(diff) ? diff : diffLines(diff.before, diff.after);
const added = rows.filter((r) => r.type === "add").length;
const removed = rows.filter((r) => r.type === "del").length;
const gutter = Math.max(isDiff ? Math.max(0, ...rows.map((r) => r.old ?? r.cur ?? 0)) : listing.length, 1);
const gutterWidth = gutter >= 100 ? 28 : 20;

const config = JSON.stringify({ text: copyText ?? source, copied: text.copied, announce: text.copiedAnnouncement });
---

<div
  class:list={["vs-code-block", className]}
  data-variant={variant}
  style={`--vs-code-gutter: ${gutterWidth}px`}
  {...rest}
>
  <div class="head">
    <span class="file">
      <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
        <path d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"></path>
      </svg>
      <span class="name">{filename}</span>
    </span>

    {isDiff ? (
      <span class="stat">
        <span class="plus"><span class="sr-only">{added} added, </span><span aria-hidden="true">+{added}</span></span>
        <span class="minus"><span class="sr-only">{removed} removed</span><span aria-hidden="true">-{removed}</span></span>
      </span>
    ) : (
      <>
        <button type="button" class="copy" data-copy>
          <svg class="icon-copy" aria-hidden="true" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
          <svg class="icon-check" aria-hidden="true" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>
          <span data-copy-label>{text.copy}</span><span class="sr-only"> code</span>
        </button>
        <span class="sr-only" role="status" aria-live="polite" data-copy-status></span>
        <script type="application/json" data-vs-config set:html={config} />
      </>
    )}
  </div>

  <div class="body">
    <div class="lines">
      <span class="rule" aria-hidden="true"></span>
      {isDiff
        ? rows.map((r) => (
            <div class:list={["row", r.type !== "ctx" && `row--${r.type}`]}>
              {r.type !== "ctx" && <span class="bar" aria-hidden="true"></span>}
              <span class="num" aria-hidden="true">{(r.type === "del" ? r.old : r.cur) ?? ""}</span>
              {/* one line: whitespace between expressions would render inside pre-wrap */}
              <code>{r.type !== "ctx" && <span class="sr-only">{r.type === "add" ? "Added: " : "Removed: "}</span>}{r.pieces.map((p) => { const kids = tokenize(p.text, lang).map((t) => (t.kind ? <span class={`tk tk-${t.kind}`}>{t.text}</span> : t.text)); return p.change === "add" ? <ins>{kids}</ins> : p.change === "del" ? <del>{kids}</del> : kids; })}</code>
            </div>
          ))
        : listing.map((line, i) => (
            <div class="row">
              <span class="num" aria-hidden="true">{i + 1}</span>
              <code>{line.map((t) => (t.kind ? <span class={`tk tk-${t.kind}`}>{t.text}</span> : t.text))}</code>
            </div>
          ))}
    </div>
  </div>
</div>

<script>
  function init(root: HTMLElement) {
    const button = root.querySelector<HTMLButtonElement>("[data-copy]");
    const configEl = root.querySelector<HTMLScriptElement>("script[data-vs-config]");
    if (!button || !configEl) return;
    const label = button.querySelector<HTMLElement>("[data-copy-label]")!;
    const status = root.querySelector<HTMLElement>("[data-copy-status]")!;
    const idle = label.textContent ?? "Copy";
    const config = JSON.parse(configEl.textContent || "{}") as { text: string; copied: string; announce: string };
    let timer: ReturnType<typeof setTimeout> | undefined;

    button.addEventListener("click", async () => {
      try {
        await navigator.clipboard.writeText(config.text);
      } catch {
        return; // clipboard unavailable (insecure context) or permission denied
      }
      clearTimeout(timer);
      root.dataset.copied = "";
      label.textContent = config.copied;
      status.textContent = config.announce;
      root.dispatchEvent(new CustomEvent("vs-code-copy", { detail: { text: config.text }, bubbles: true }));
      timer = setTimeout(() => {
        delete root.dataset.copied;
        label.textContent = idle;
        status.textContent = "";
      }, 1500);
    });
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-code-block:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-code-block {
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }

  .sr-only {
    user-select: none;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* header: file, then diff stat or copy */
  .head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid var(--vs-line);
    font-size: 12.5px;
  }
  .file {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
  }
  .file svg {
    flex-shrink: 0;
    color: var(--vs-ink-3);
  }
  .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--vs-font-mono);
    line-height: 1;
    color: var(--vs-ink);
  }
  .stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-family: var(--vs-font-sans);
    font-size: 12px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .plus {
    color: var(--vs-green);
  }
  .minus {
    color: var(--vs-red);
  }

  .copy {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    margin-left: auto;
    margin-right: -4px;
    padding: 0 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--vs-ink-3);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition:
      color 100ms,
      background-color 100ms;
  }
  .copy:hover {
    background: var(--vs-hover);
    color: var(--vs-ink);
  }
  .copy:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .icon-check {
    display: none;
  }
  .vs-code-block[data-copied] .copy {
    color: var(--vs-green);
  }
  .vs-code-block[data-copied] .icon-copy {
    display: none;
  }
  .vs-code-block[data-copied] .icon-check {
    display: block;
  }

  /* body: equal 12px inset on top / left / right; lines wrap */
  .body {
    padding: 12px 0;
    font-family: var(--vs-font-mono);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--vs-ink-2);
  }
  .lines {
    position: relative;
  }
  .rule {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--vs-code-gutter);
    width: 1px;
    background: var(--vs-line);
    pointer-events: none;
  }
  .row {
    position: relative;
    display: grid;
    grid-template-columns: var(--vs-code-gutter) minmax(0, 1fr);
    align-items: start;
  }
  .num {
    user-select: none;
    text-align: center;
    font-size: 11px;
    color: var(--vs-ink-3);
  }
  code {
    min-height: 1lh;
    padding: 0 12px 0 4px;
    font: inherit;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  /* syntax: strings & numbers, keywords, function calls */
  .tk-string,
  .tk-number {
    color: var(--vs-orange);
  }
  .tk-keyword {
    color: var(--vs-accent-ink);
  }
  .tk-fn,
  .tk-key {
    color: var(--vs-ink);
    font-weight: 500;
  }
  .tk-comment {
    color: var(--vs-ink-3);
  }

  /* diff rows */
  .row--add {
    background: var(--vs-green-tint);
  }
  .row--del {
    background: var(--vs-red-tint);
  }
  .row--add .num {
    color: var(--vs-green);
  }
  .row--del .num {
    color: var(--vs-red);
  }
  .bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
  }
  .row--add .bar {
    background: var(--vs-green);
  }
  .row--del .bar {
    background: repeating-linear-gradient(45deg, var(--vs-red) 0, var(--vs-red) 1.5px, transparent 1.5px, transparent 3px);
  }
  ins,
  del {
    margin: 0 -1px;
    padding: 0 2px;
    border-radius: 3px;
    text-decoration: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  ins {
    background: color-mix(in srgb, var(--vs-green) 18%, transparent);
  }
  del {
    background: color-mix(in srgb, var(--vs-red) 18%, transparent);
  }
</style>
```

### `src/components/viewership/code-block/highlight.ts`

```ts
/**
 * Build-time helpers for CodeBlock: a JS/TS/JSON tokenizer and a unified
 * line diff with word-level pieces.
 *
 * Adapted from Beautiful UI CodeBlock (MIT, © 2026 Shane Levine).
 */

export type Language = "ts" | "js" | "json" | "text";

export type TokenKind = "keyword" | "string" | "number" | "fn" | "key" | "comment";
export type Token = { text: string; kind?: TokenKind };

/** A run of code within a diff row; `change` marks a word-level add/del. */
export type CodePiece = { text: string; change?: "add" | "del" };
/** One row of a unified diff: old/new line numbers, its kind, and its pieces. */
export type DiffRow = {
  old: number | null;
  cur: number | null;
  type: "ctx" | "add" | "del";
  pieces: CodePiece[];
};

const JS_KEYWORDS = new Set([
  "import", "from", "export", "default", "async", "function", "const", "let", "var", "await",
  "return", "if", "else", "for", "while", "new", "throw", "try", "catch", "null", "true", "false",
  "undefined", "type", "interface", "as", "of", "in", "class", "extends", "switch", "case", "break",
  "continue", "this", "typeof", "satisfies",
]);

const JS_TOKEN =
  /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|("(?:\\.|[^"\\\n])*"|'(?:\\.|[^'\\\n])*'|`(?:\\.|[^`\\])*`)|(\b\d+(?:\.\d+)?\b)|([A-Za-z_$][\w$]*)/g;

const JSON_TOKEN = /("(?:\\.|[^"\\\n])*")|(-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|\b(true|false|null)\b/g;

/** Infer a language from a filename extension. */
export function languageFor(filename = ""): Language {
  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
  if (ext === "json" || ext === "jsonc") return "json";
  if (["js", "mjs", "cjs", "jsx"].includes(ext)) return "js";
  return "ts";
}

/** Tokenize source text. Unmatched text becomes plain (kind-less) tokens. */
export function tokenize(text: string, language: Language = "ts"): Token[] {
  if (language === "text") return [{ text }];
  const out: Token[] = [];
  let last = 0;
  const push = (t: string, kind?: TokenKind) => {
    if (!t) return;
    const prev = out[out.length - 1];
    if (!kind && prev && !prev.kind) prev.text += t;
    else out.push({ text: t, kind });
  };
  const re = new RegExp(language === "json" ? JSON_TOKEN : JS_TOKEN);
  for (const m of text.matchAll(re)) {
    const idx = m.index ?? 0;
    const rest = text.slice(idx + m[0].length);
    push(text.slice(last, idx));
    if (language === "json") {
      if (m[1]) push(m[1], /^\s*:/.test(rest) ? "key" : "string");
      else if (m[2]) push(m[2], "number");
      else push(m[0], "keyword");
    } else if (m[1]) push(m[1], "comment");
    else if (m[2]) push(m[2], "string");
    else if (m[3]) push(m[3], "number");
    else if (m[4] && JS_KEYWORDS.has(m[4])) push(m[4], "keyword");
    else if (m[4] && /^\s*\(/.test(rest)) push(m[4], "fn");
    else push(m[0]);
    last = idx + m[0].length;
  }
  push(text.slice(last));
  return out;
}

/** Tokenize a whole listing, then split it into per-line token arrays
 *  (so block comments and template strings may span lines). */
export function tokenizeLines(text: string, language: Language = "ts"): Token[][] {
  const lines: Token[][] = [[]];
  for (const tok of tokenize(text, language)) {
    tok.text.split("\n").forEach((part, i) => {
      if (i > 0) lines.push([]);
      if (part) lines[lines.length - 1].push({ text: part, kind: tok.kind });
    });
  }
  return lines;
}

/* ── diff ── */

function lcsTable<T>(a: T[], b: T[]): number[][] {
  const t = Array.from({ length: a.length + 1 }, () => new Array<number>(b.length + 1).fill(0));
  for (let i = a.length - 1; i >= 0; i--)
    for (let j = b.length - 1; j >= 0; j--)
      t[i][j] = a[i] === b[j] ? t[i + 1][j + 1] + 1 : Math.max(t[i + 1][j], t[i][j + 1]);
  return t;
}

type Op<T> = { type: "ctx" | "add" | "del"; value: T; ai: number; bi: number };

function diffSeq<T>(a: T[], b: T[]): Op<T>[] {
  const t = lcsTable(a, b);
  const ops: Op<T>[] = [];
  let i = 0;
  let j = 0;
  while (i < a.length && j < b.length) {
    if (a[i] === b[j]) ops.push({ type: "ctx", value: a[i], ai: i++, bi: j++ });
    else if (t[i + 1][j] >= t[i][j + 1]) ops.push({ type: "del", value: a[i], ai: i++, bi: -1 });
    else ops.push({ type: "add", value: b[j], ai: -1, bi: j++ });
  }
  while (i < a.length) ops.push({ type: "del", value: a[i], ai: i++, bi: -1 });
  while (j < b.length) ops.push({ type: "add", value: b[j], ai: -1, bi: j++ });
  return ops;
}

const WORD = /"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`[^`]*`|[\w$]+|\s+|[^\w$\s]/g;

/** Word-level pieces for a removed/added line pair. Returns null when the
 *  lines share too little to make a highlight meaningful. */
function wordPieces(before: string, after: string): [CodePiece[], CodePiece[]] | null {
  const a = before.match(WORD) ?? [];
  const b = after.match(WORD) ?? [];
  const ops = diffSeq(a, b);
  const common = ops.filter((o) => o.type === "ctx").reduce((n, o) => n + o.value.trim().length, 0);
  const longest = Math.max(before.trim().length, after.trim().length, 1);
  if (common / longest < 0.4) return null;

  const build = (side: "del" | "add") => {
    const pieces: CodePiece[] = [];
    const kept = ops.filter((o) => o.type === "ctx" || o.type === side);
    kept.forEach((o, k) => {
      let changed = o.type === side;
      // whitespace sandwiched between two changes joins the highlight
      if (!changed && /^\s+$/.test(o.value) && kept[k - 1]?.type === side && kept[k + 1]?.type === side) changed = true;
      const prev = pieces[pieces.length - 1];
      const change = changed ? side : undefined;
      if (prev && prev.change === change) prev.text += o.value;
      else pieces.push({ text: o.value, change });
    });
    return pieces;
  };
  return [build("del"), build("add")];
}

/** Unified diff of two texts, with word-level highlights on paired lines. */
export function diffLines(before: string, after: string): DiffRow[] {
  const ops = diffSeq(before.split("\n"), after.split("\n"));
  const rows: DiffRow[] = [];
  let k = 0;
  while (k < ops.length) {
    const op = ops[k];
    if (op.type === "ctx") {
      rows.push({ old: op.ai + 1, cur: op.bi + 1, type: "ctx", pieces: [{ text: op.value }] });
      k++;
      continue;
    }
    // a hunk: every consecutive del/add, rendered dels-then-adds
    const dels: Op<string>[] = [];
    const adds: Op<string>[] = [];
    while (k < ops.length && ops[k].type !== "ctx") (ops[k].type === "del" ? dels : adds).push(ops[k++]);
    const pairs = dels.map((d, i) => (adds[i] ? wordPieces(d.value, adds[i].value) : null));
    dels.forEach((d, i) =>
      rows.push({ old: d.ai + 1, cur: null, type: "del", pieces: pairs[i]?.[0] ?? [{ text: d.value }] }),
    );
    adds.forEach((a, i) =>
      rows.push({ old: null, cur: a.bi + 1, type: "add", pieces: pairs[i]?.[1] ?? [{ text: a.value }] }),
    );
  }
  return rows;
}
```


---

# Fine-tune Card

> Compact inspector the agent adjusts, then hands back to you.

- **Slug:** `fine-tune-card`
- **Kind:** component · **Category:** Agent
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/FineTuneCard.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/fine-tune-card
- **All files in one bundle:** https://viewership.ai/design/components/fine-tune-card.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/fine-tune-card.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/fine-tune-card/`:

   - `FineTuneCard.astro` (raw: https://viewership.ai/design/raw/fine-tune-card/FineTuneCard.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `glide-menu`: `GlideMenu.astro`, `glide-menu.ts` (docs: https://viewership.ai/design/components/glide-menu.md)

npm packages: none.

## Usage

```astro
---
import FineTuneCard from "../components/viewership/fine-tune-card/FineTuneCard.astro";
---

<FineTuneCard />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FineTuneCard from "./FineTuneCard.astro";
import type { FineTuneEdit, FineTuneField } from "./FineTuneCard.astro";

const fields: FineTuneField[] = [
  { key: "width", label: "W", name: "Width", value: 324, min: 40, max: 999 },
  { key: "height", label: "H", name: "Height", value: 96, min: 24, max: 999 },
  { key: "radius", label: "Radius", value: 28, min: 0, max: 64 },
  { key: "opacity", label: "Opacity", value: 100, min: 0, max: 100, suffix: "%" },
];

// What the agent changes when the card scrolls into view.
const edits: FineTuneEdit[] = [
  { field: "radius", value: 14 },
  { field: "height", value: 120 },
  { layout: 2 },
  { type: "Launch" },
];
---

<div class="stage">
  <FineTuneCard
    fields={fields}
    options={["Launch", "Standard", "Teaser"]}
    edits={edits}
    labels={{ title: "Post card" }}
  />
</div>

<style>
  .stage {
    display: flex;
    width: 100%;
    justify-content: center;
    /* room for the type menu, which opens upward */
    padding-top: 24px;
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `fields` | `{ key; label; name?; value; min; max; step?; suffix? }[]` |  | Scrub-able number fields in pairs. `name` is the full accessible name when label is short. |
| `options` | `string[]` |  | Type menu options. |
| `layout` | `0 \| 1 \| 2` | `0` | Initial layout: row, column, grid. |
| `type` | `string` |  | Initial type. Empty shows the placeholder. |
| `edits` | `{ field?: string; value?: number; layout?: number; type?: string }[]` | `[]` | Changes the agent makes, in order, when scrolled into view. Interaction takes over. |
| `autoplay` | `boolean` | `true` | Play edits on scroll into view. |
| `loop` | `boolean` | `false` | Replay after a 4s hold until interaction. |
| `labels` | `Partial<FineTuneCardLabels>` |  | Text overrides: title, layout, type, placeholder, adjust, edited, layouts. |
| `vs-fine-tune-change` | `CustomEvent<{ layout; layoutName; values; type; source: "user" \| "agent" }>` |  | Fires on every change, by you or the agent. |

## Source

### `src/components/viewership/fine-tune-card/FineTuneCard.astro`

```astro
---
/**
 * FineTuneCard: a compact inspector the agent (and you) can adjust.
 *
 * Adapted from Beautiful UI FineTuneCard (MIT, © 2026 Shane Levine).
 *
 * A layout switch (row / column / grid), scrub-able number fields and a type
 * menu. Drag a field's label sideways, use up/down arrows (Shift for x10), or
 * type. Changed fields turn accent and the header flips from "Adjust" to
 * "Edited".
 *
 * Pass `edits` to have the agent make changes when the card scrolls into
 * view. Any interaction hands control back to you. Without JS or with
 * reduced motion, the edits render already applied.
 *
 * Number fields are labelled text inputs with spinbutton semantics, the
 * layout switch is a radio group, and the type menu is a listbox. Each has a
 * `name` so the card can sit inside a form.
 *
 * Events (bubbling, on the root):
 *   vs-fine-tune-change  detail: { layout, layoutName, values, type, source: "user" | "agent" }
 *
 * @example
 * <FineTuneCard fields={[{ key: "radius", label: "Radius", value: 12, min: 0, max: 48 }]} options={["Standard", "Launch"]} />
 */
import type { HTMLAttributes } from "astro/types";
import GlideMenu from "../glide-menu/GlideMenu.astro";

export interface FineTuneField {
  key: string;
  /** Visible label (the scrub handle), e.g. "W". */
  label: string;
  /** Full accessible name when the label is abbreviated, e.g. "Width". */
  name?: string;
  /** Starting value; the field turns accent once it differs. */
  value: number;
  min: number;
  max: number;
  step?: number;
  suffix?: string;
}

/** One agent step: set a field, the layout, or the type. */
export interface FineTuneEdit {
  /** Field key to change (with `value`). */
  field?: string;
  value?: number;
  /** Layout index: 0 row, 1 column, 2 grid. */
  layout?: number;
  /** Type option to pick. */
  type?: string;
}

export interface FineTuneCardLabels {
  title: string;
  layout: string;
  type: string;
  placeholder: string;
  adjust: string;
  edited: string;
  /** Names of the three layout options. */
  layouts: [string, string, string];
}

type Props = HTMLAttributes<"div"> & {
  fields: FineTuneField[];
  /** Options in the Type menu. */
  options: string[];
  labels?: Partial<FineTuneCardLabels>;
  /** Initial layout index. */
  layout?: number;
  /** Initial type (defaults to the placeholder). */
  type?: string;
  /** Changes the agent makes on its own. */
  edits?: FineTuneEdit[];
  /** Play `edits` when scrolled into view. */
  autoplay?: boolean;
  /** Replay the edits after a hold, until someone interacts. */
  loop?: boolean;
};

const {
  fields = [],
  options = [],
  labels,
  layout = 0,
  type,
  edits = [],
  autoplay = true,
  loop = false,
  class: className,
  ...rest
} = Astro.props;

const l: FineTuneCardLabels = {
  title: "Card",
  layout: "Layout",
  type: "Type",
  placeholder: "Select type",
  adjust: "Adjust",
  edited: "Edited",
  layouts: ["Row", "Column", "Grid"],
  ...labels,
};

const uid = `vs-ftc-${Math.random().toString(36).slice(2, 8)}`;

/* The no-JS / reduced-motion render shows the agent's edits already applied. */
const initial = {
  layout,
  type: type ?? "",
  values: Object.fromEntries(fields.map((f) => [f.key, f.value])) as Record<string, number>,
};
const final = { layout: initial.layout, type: initial.type, values: { ...initial.values } };
for (const e of edits) {
  if (e.field !== undefined && e.value !== undefined && e.field in final.values) final.values[e.field] = e.value;
  if (e.layout !== undefined) final.layout = e.layout;
  if (e.type !== undefined) final.type = e.type;
}
const changed =
  final.layout !== layout || final.type !== initial.type || fields.some((f) => final.values[f.key] !== f.value);
const pairs: FineTuneField[][] = [];
for (let i = 0; i < fields.length; i += 2) pairs.push(fields.slice(i, i + 2));
const config = { initial, edits, layouts: l.layouts, placeholder: l.placeholder };
---

<div
  class:list={["vs-fine-tune-card", className]}
  data-autoplay={autoplay && edits.length ? "" : undefined}
  data-loop={loop ? "" : undefined}
  data-changed={changed ? "" : undefined}
  {...rest}
>
  <script is:inline type="application/json" data-vs-config set:html={JSON.stringify(config).replace(/</g, "\\u003c")} />

  <div class="bar">
    <span class="title">{l.title}</span>
    <span class="status" aria-live="polite">
      <span class="adjust">
        <span class="spark" aria-hidden="true">
          <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z"></path></svg>
        </span>
        <span class="adjust-text">{l.adjust}</span>
      </span>
      <span class="edited">
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"></path></svg>
        {l.edited}
      </span>
    </span>
  </div>

  <div class="section">
    <p class="section-title" id={`${uid}-layout`}>{l.layout}</p>
    <div class="seg" role="radiogroup" aria-labelledby={`${uid}-layout`} style={`--vs-ftc-seg: ${final.layout}`} data-seg>
      <span class="seg-thumb" aria-hidden="true"></span>
      {[0, 1, 2].map((i) => (
        <button
          type="button"
          role="radio"
          class="seg-btn"
          aria-checked={i === final.layout ? "true" : "false"}
          aria-label={l.layouts[i]}
          tabindex={i === final.layout ? 0 : -1}
          data-seg-option={i}
        >
          {i === 0 && <span class="glyph glyph--row" aria-hidden="true"><span></span><span></span><span></span></span>}
          {i === 1 && <span class="glyph glyph--col" aria-hidden="true"><span></span><span></span></span>}
          {i === 2 && <span class="glyph glyph--grid" aria-hidden="true"><span></span><span></span><span></span><span></span></span>}
        </button>
      ))}
      <input type="hidden" name="layout" value={l.layouts[final.layout]} data-seg-input />
    </div>

    {pairs.map((pair) => (
      <div class="pair">
        {pair.map((f) => {
          const id = `${uid}-${f.key}`;
          const v = final.values[f.key] ?? f.value;
          return (
            <div
              class="field"
              data-field={f.key}
              data-default={f.value}
              data-min={f.min}
              data-max={f.max}
              data-step={f.step ?? 1}
              data-suffix={f.suffix ?? ""}
              data-active={v !== f.value ? "" : undefined}
            >
              <label class="handle" for={id} data-handle>
                {f.label}
                {f.name && f.name !== f.label && <span class="vh">, {f.name}</span>}
              </label>
              <input
                class="num"
                id={id}
                name={f.key}
                type="text"
                inputmode="numeric"
                role="spinbutton"
                autocomplete="off"
                aria-valuemin={f.min}
                aria-valuemax={f.max}
                aria-valuenow={v}
                aria-valuetext={f.suffix ? `${v}${f.suffix}` : undefined}
                value={String(v)}
              />
              {f.suffix && <span class="suffix" aria-hidden="true">{f.suffix}</span>}
            </div>
          );
        })}
      </div>
    ))}
  </div>

  <div class="footer">
    <span class="footer-label" id={`${uid}-type`}>{l.type}</span>
    <div class="select" data-select>
      <button
        type="button"
        class="trigger"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls={`${uid}-menu`}
        aria-labelledby={`${uid}-type ${uid}-value`}
        data-trigger
      >
        <span class="value" id={`${uid}-value`} data-placeholder={final.type ? undefined : ""} data-value>{final.type || l.placeholder}</span>
        <svg class="chevron" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg>
      </button>
      <input type="hidden" name="type" value={final.type} data-type-input />
      <div class="menu" hidden data-menu>
        <GlideMenu class="menu-list" role="listbox" id={`${uid}-menu`} aria-labelledby={`${uid}-type`} highlightBg="var(--vs-field)" highlightRadius="6px" arrowKeys>
          {options.map((o) => (
            <div class="opt" role="option" tabindex="-1" aria-selected={o === final.type ? "true" : "false"} data-menu-row data-option={o}>
              {o}
            </div>
          ))}
        </GlideMenu>
      </div>
    </div>
  </div>
</div>

<script>
  interface Edit {
    field?: string;
    value?: number;
    layout?: number;
    type?: string;
  }
  interface Config {
    initial: { layout: number; type: string; values: Record<string, number> };
    edits: Edit[];
    layouts: string[];
    placeholder: string;
  }

  const START_DELAY = 600;
  const STEP_GAP = 650;
  const TWEEN_MS = 450;
  const LOOP_HOLD = 4000;

  function init(root: HTMLElement) {
    const config = JSON.parse(root.querySelector("[data-vs-config]")?.textContent || "{}") as Config;
    const fields = [...root.querySelectorAll<HTMLElement>("[data-field]")];
    const seg = root.querySelector<HTMLElement>("[data-seg]")!;
    const segOptions = [...root.querySelectorAll<HTMLButtonElement>("[data-seg-option]")];
    const segInput = root.querySelector<HTMLInputElement>("[data-seg-input]")!;
    const trigger = root.querySelector<HTMLButtonElement>("[data-trigger]")!;
    const valueEl = root.querySelector<HTMLElement>("[data-value]")!;
    const typeInput = root.querySelector<HTMLInputElement>("[data-type-input]")!;
    const menu = root.querySelector<HTMLElement>("[data-menu]")!;
    const opts = [...root.querySelectorAll<HTMLElement>("[data-option]")];
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const loop = root.hasAttribute("data-loop");

    const num = (el: HTMLElement, k: string) => Number(el.dataset[k]);
    const inputOf = (f: HTMLElement) => f.querySelector<HTMLInputElement>(".num")!;
    const fieldByKey = (key: string) => fields.find((f) => f.dataset.field === key);

    let layout = Number(seg.style.getPropertyValue("--vs-ftc-seg")) || 0;
    let type = typeInput.value;
    const values: Record<string, number> = Object.fromEntries(fields.map((f) => [f.dataset.field!, Number(inputOf(f).value)]));

    /* ── state → DOM ── */
    const refreshChanged = () => {
      const changed =
        layout !== config.initial.layout ||
        type !== config.initial.type ||
        fields.some((f) => values[f.dataset.field!] !== num(f, "default"));
      root.toggleAttribute("data-changed", changed);
    };

    const emit = (source: "user" | "agent") => {
      refreshChanged();
      root.dispatchEvent(
        new CustomEvent("vs-fine-tune-change", {
          bubbles: true,
          detail: { layout, layoutName: config.layouts[layout], values: { ...values }, type, source },
        }),
      );
    };

    const clamp = (f: HTMLElement, v: number) => Math.min(num(f, "max"), Math.max(num(f, "min"), Math.round(v)));

    const paintField = (f: HTMLElement, v: number) => {
      const input = inputOf(f);
      if (document.activeElement !== input || input.value !== String(v)) input.value = String(v);
      input.setAttribute("aria-valuenow", String(v));
      if (f.dataset.suffix) input.setAttribute("aria-valuetext", `${v}${f.dataset.suffix}`);
      f.toggleAttribute("data-active", v !== num(f, "default"));
    };

    const setField = (f: HTMLElement, v: number, source: "user" | "agent") => {
      const next = clamp(f, v);
      values[f.dataset.field!] = next;
      paintField(f, next);
      emit(source);
    };

    const paintLayout = (i: number) => {
      layout = Math.min(2, Math.max(0, i));
      seg.style.setProperty("--vs-ftc-seg", String(layout));
      segOptions.forEach((o, j) => {
        o.setAttribute("aria-checked", String(j === layout));
        o.tabIndex = j === layout ? 0 : -1;
      });
      segInput.value = config.layouts[layout] ?? "";
    };

    const paintType = (value: string) => {
      type = value;
      valueEl.textContent = value || config.placeholder;
      valueEl.toggleAttribute("data-placeholder", !value);
      typeInput.value = value;
      opts.forEach((o) => o.setAttribute("aria-selected", String(o.dataset.option === value)));
    };

    const setLayout = (i: number, source: "user" | "agent", focus = false) => {
      paintLayout(i);
      if (focus) segOptions[layout]!.focus();
      emit(source);
    };

    const setType = (value: string, source: "user" | "agent") => {
      paintType(value);
      emit(source);
    };

    /* type menu */
    const onOutside = (event: PointerEvent) => {
      if (!root.querySelector("[data-select]")!.contains(event.target as Node)) closeMenu(false);
    };
    const openMenu = (focus: boolean) => {
      if (!menu.hidden) return;
      menu.hidden = false;
      trigger.setAttribute("aria-expanded", "true");
      document.addEventListener("pointerdown", onOutside);
      if (focus) {
        const target = opts.find((o) => o.getAttribute("aria-selected") === "true") ?? opts[0];
        opts.forEach((o) => (o.tabIndex = o === target ? 0 : -1));
        target?.focus();
      }
    };
    function closeMenu(focusTrigger: boolean) {
      if (menu.hidden) return;
      menu.hidden = true;
      trigger.setAttribute("aria-expanded", "false");
      document.removeEventListener("pointerdown", onOutside);
      if (focusTrigger) trigger.focus();
    }

    trigger.addEventListener("click", () => (menu.hidden ? openMenu(true) : closeMenu(false)));
    trigger.addEventListener("keydown", (event) => {
      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
        event.preventDefault();
        openMenu(true);
      }
    });
    menu.addEventListener("click", (event) => {
      const opt = (event.target as Element).closest<HTMLElement>("[data-option]");
      if (!opt) return;
      setType(opt.dataset.option ?? "", "user");
      closeMenu(true);
    });
    menu.addEventListener("keydown", (event) => {
      const opt = (event.target as Element).closest<HTMLElement>("[data-option]");
      if (event.key === "Escape") {
        event.preventDefault();
        closeMenu(true);
      } else if ((event.key === "Enter" || event.key === " ") && opt) {
        event.preventDefault();
        setType(opt.dataset.option ?? "", "user");
        closeMenu(true);
      } else if (event.key === "Tab") closeMenu(false);
    });

    /* ── layout radio group ── */
    seg.addEventListener("click", (event) => {
      const o = (event.target as Element).closest<HTMLButtonElement>("[data-seg-option]");
      if (o) setLayout(Number(o.dataset.segOption), "user");
    });
    seg.addEventListener("keydown", (event) => {
      let next: number | null = null;
      if (event.key === "ArrowRight" || event.key === "ArrowDown") next = (layout + 1) % 3;
      else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = (layout + 2) % 3;
      else if (event.key === "Home") next = 0;
      else if (event.key === "End") next = 2;
      if (next === null) return;
      event.preventDefault();
      setLayout(next, "user", true);
    });

    /* ── number fields: scrub, arrows, typing ── */
    fields.forEach((f) => {
      const input = inputOf(f);
      const handle = f.querySelector<HTMLElement>("[data-handle]")!;
      const step = num(f, "step") || 1;
      let drag: { x: number; v: number; moved: boolean } | null = null;

      handle.addEventListener("pointerdown", (event) => {
        if (event.button !== 0) return;
        handle.setPointerCapture(event.pointerId);
        drag = { x: event.clientX, v: values[f.dataset.field!] ?? 0, moved: false };
      });
      handle.addEventListener("pointermove", (event) => {
        if (!drag) return;
        const dx = event.clientX - drag.x;
        if (Math.abs(dx) > 2) drag.moved = true;
        if (drag.moved) setField(f, drag.v + (dx / 2) * step, "user");
      });
      const endDrag = () => {
        if (drag?.moved) handle.dataset.dragged = "";
        drag = null;
      };
      handle.addEventListener("pointerup", endDrag);
      handle.addEventListener("pointercancel", endDrag);
      // A drag should not also focus the input via the label.
      handle.addEventListener("click", (event) => {
        if (handle.hasAttribute("data-dragged")) {
          event.preventDefault();
          delete handle.dataset.dragged;
        }
      });

      input.addEventListener("keydown", (event) => {
        const mult = event.shiftKey ? 10 : 1;
        const v = values[f.dataset.field!] ?? 0;
        if (event.key === "ArrowUp") {
          event.preventDefault();
          setField(f, v + step * mult, "user");
        } else if (event.key === "ArrowDown") {
          event.preventDefault();
          setField(f, v - step * mult, "user");
        } else if (event.key === "PageUp") {
          event.preventDefault();
          setField(f, v + step * 10, "user");
        } else if (event.key === "PageDown") {
          event.preventDefault();
          setField(f, v - step * 10, "user");
        } else if (event.key === "Enter") {
          input.blur();
        }
      });
      input.addEventListener("input", () => {
        const clean = input.value.replace(/[^\d-]/g, "");
        if (clean !== input.value) input.value = clean;
        const n = Number(clean);
        // Live-apply while the typed value is in range; clamp on commit.
        if (clean !== "" && clean !== "-" && n >= num(f, "min") && n <= num(f, "max")) {
          values[f.dataset.field!] = n;
          input.setAttribute("aria-valuenow", String(n));
          f.toggleAttribute("data-active", n !== num(f, "default"));
          emit("user");
        }
      });
      input.addEventListener("change", () => {
        const n = Number(input.value);
        setField(f, Number.isFinite(n) && input.value !== "" ? n : values[f.dataset.field!] ?? 0, "user");
        input.value = String(values[f.dataset.field!]);
      });
      // Clicking the chip's padding focuses its input.
      f.addEventListener("click", (event) => {
        if (event.target === f) input.focus();
      });
    });

    /* ── the agent ── */
    let timers: number[] = [];
    let raf = 0;
    let touched = false;
    let visible = false;
    let running = false;
    const later = (ms: number, fn: () => void) => timers.push(window.setTimeout(fn, ms));
    const stop = () => {
      timers.forEach((t) => window.clearTimeout(t));
      timers = [];
      cancelAnimationFrame(raf);
      running = false;
      root.removeAttribute("data-agent");
    };

    const tween = (f: HTMLElement, to: number) => {
      const from = values[f.dataset.field!] ?? 0;
      const t0 = performance.now();
      const frame = (now: number) => {
        const t = Math.min(1, (now - t0) / TWEEN_MS);
        const eased = 1 - Math.pow(1 - t, 3);
        values[f.dataset.field!] = clamp(f, from + (to - from) * eased);
        paintField(f, values[f.dataset.field!]!);
        if (t < 1) raf = requestAnimationFrame(frame);
        else emit("agent");
      };
      raf = requestAnimationFrame(frame);
    };

    const reset = () => {
      fields.forEach((f) => {
        values[f.dataset.field!] = config.initial.values[f.dataset.field!] ?? num(f, "default");
        paintField(f, values[f.dataset.field!]!);
      });
      paintLayout(config.initial.layout);
      paintType(config.initial.type);
      refreshChanged();
    };

    const play = () => {
      stop();
      reset();
      running = true;
      root.setAttribute("data-agent", "");
      let at = START_DELAY;
      for (const edit of config.edits) {
        if (edit.field !== undefined && edit.value !== undefined) {
          const f = fieldByKey(edit.field);
          if (f) later(at, () => tween(f, edit.value!));
          at += TWEEN_MS + STEP_GAP;
        }
        if (edit.layout !== undefined) {
          const i = edit.layout;
          later(at, () => setLayout(i, "agent"));
          at += 300 + STEP_GAP;
        }
        if (edit.type !== undefined) {
          const value = edit.type;
          const opt = opts.find((o) => o.dataset.option === value);
          later(at, () => openMenu(false));
          if (opt) later(at + 350, () => opt.dispatchEvent(new MouseEvent("mouseover", { bubbles: true })));
          later(at + 800, () => {
            setType(value, "agent");
            closeMenu(false);
          });
          at += 800 + STEP_GAP;
        }
      }
      later(at, () => {
        running = false;
        root.removeAttribute("data-agent");
        if (loop) later(LOOP_HOLD, again);
      });
    };

    function again() {
      if (touched || !visible) return;
      if (root.matches(":hover") || root.contains(document.activeElement)) return later(LOOP_HOLD, again);
      play();
    }

    // Any hands-on interaction takes over from the agent, keeping what it has done so far.
    const takeOver = () => {
      if (touched) return;
      touched = true;
      stop();
      refreshChanged();
    };
    root.addEventListener("pointerdown", (event) => event.isTrusted && takeOver());
    root.addEventListener("keydown", (event) => event.isTrusted && takeOver());

    refreshChanged();
    if (reduce || !root.hasAttribute("data-autoplay")) return;

    // Start from the untouched card; the agent works once it is on screen.
    reset();
    let started = false;
    const io = new IntersectionObserver(
      ([entry]) => {
        if (!root.isConnected) return teardown();
        visible = Boolean(entry?.isIntersecting);
        if (visible && !started && !touched) {
          started = true;
          play();
        } else if (visible && started && !running && loop && !touched) {
          later(LOOP_HOLD, again);
        }
      },
      { threshold: 0.4 },
    );
    io.observe(root);

    function teardown() {
      stop();
      io.disconnect();
      document.removeEventListener("pointerdown", onOutside);
    }
    document.addEventListener("astro:before-swap", teardown, { once: true });
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-fine-tune-card:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-fine-tune-card {
    position: relative;
    width: 100%;
    max-width: 240px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-raised);
  }
  .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* ── header ── */
  .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--vs-line);
  }
  .title {
    font-size: 13px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .status {
    display: flex;
  }
  .adjust,
  .edited {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .edited {
    display: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--vs-green);
    animation: vs-pop-in 250ms var(--vs-ease-out) both;
  }
  [data-changed]:not([data-agent]) .adjust {
    display: none;
  }
  [data-changed]:not([data-agent]) .edited {
    display: flex;
  }
  .spark {
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 30%, transparent);
    border-radius: 5px;
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
    box-sizing: border-box;
  }
  .adjust-text {
    background-image: linear-gradient(90deg, var(--vs-accent) 35%, var(--vs-accent-ink) 50%, var(--vs-accent) 65%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 12px;
    font-weight: 500;
    animation: vs-shimmer-text 1.4s linear infinite;
  }

  /* ── layout section ── */
  .section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--vs-line);
  }
  .section-title {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vs-ink);
  }
  .seg {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 2px;
    border-radius: var(--vs-radius-control);
    background: var(--vs-field);
  }
  .seg-thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc((100% - 4px) / 3);
    border-radius: 6px;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-btn);
    transform: translateX(calc(var(--vs-ftc-seg, 0) * 100%));
    transition: transform 300ms var(--vs-ease-out);
  }
  .seg-btn {
    position: relative;
    z-index: 1;
    display: flex;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--vs-ink-3);
    cursor: pointer;
    transition: color 200ms ease-out;
  }
  .seg-btn[aria-checked="true"] {
    color: var(--vs-accent-ink);
  }
  .glyph {
    display: flex;
    gap: 2px;
  }
  .glyph--col {
    flex-direction: column;
  }
  .glyph--grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
  }
  .glyph span {
    width: 6px;
    height: 6px;
    box-sizing: border-box;
    border: 1.2px solid currentColor;
    border-radius: 2px;
  }

  .pair {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .field {
    display: flex;
    min-width: 0;
    height: 26px;
    box-sizing: border-box;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 2px;
    border-radius: var(--vs-radius-chip);
    background: var(--vs-field);
    cursor: text;
    transition:
      background-color 200ms ease-out,
      box-shadow 200ms ease-out;
  }
  .field[data-active] {
    background: var(--vs-accent-tint);
    box-shadow: 0 0 0 1px var(--vs-accent);
  }
  .field:has(.num:focus-visible) {
    box-shadow: var(--vs-focus-ring);
  }
  .handle {
    display: flex;
    height: 100%;
    flex-shrink: 0;
    align-items: center;
    padding: 0 2px;
    border-radius: 4px;
    color: var(--vs-ink-3);
    font-size: 12px;
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
    transition: color var(--vs-duration-fast) ease-out;
  }
  .handle:hover {
    color: var(--vs-ink-2);
  }
  .field:has(.num:focus-visible) .handle {
    color: var(--vs-accent-ink);
  }
  .num {
    min-width: 0;
    flex: 1;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--vs-ink);
    font: inherit;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    outline: none;
  }
  .suffix {
    flex-shrink: 0;
    padding-right: 2px;
    font-size: 11.5px;
    color: var(--vs-ink-3);
  }

  /* type menu */
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
  }
  .footer-label {
    font-size: 12px;
    color: var(--vs-ink-3);
  }
  .select {
    position: relative;
    width: 120px;
    margin-right: -2px;
  }
  .trigger {
    display: flex;
    width: 100%;
    height: 26px;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 4px 8px;
    border: none;
    border-radius: var(--vs-radius-chip);
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-hairline);
    font: inherit;
    cursor: pointer;
    transition: box-shadow 200ms ease-out;
  }
  .trigger[aria-expanded="true"] {
    box-shadow: 0 0 0 1px var(--vs-accent);
  }
  .trigger:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .value {
    font-size: 12px;
    color: var(--vs-ink);
  }
  .value[data-placeholder] {
    color: var(--vs-ink-3);
  }
  .chevron {
    color: var(--vs-ink-3);
    transition: transform 200ms ease-out;
  }
  .trigger[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
  }
  .menu {
    position: absolute;
    right: 0;
    bottom: 32px;
    z-index: 10;
    width: 120px;
    box-sizing: border-box;
    padding: 4px;
    border-radius: 10px;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-raised);
    transform-origin: bottom right;
    animation: vs-pop-in 200ms var(--vs-ease-out) both;
  }
  .menu-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .opt {
    position: relative;
    z-index: 1;
    display: flex;
    height: 26px;
    align-items: center;
    padding: 0 8px;
    border-radius: 6px;
    color: var(--vs-ink);
    font-size: 12.5px;
    cursor: pointer;
    outline: none;
  }
  .opt[aria-selected="true"] {
    background: var(--vs-field);
  }
  .menu-list[data-glide-active] .opt[aria-selected="true"]:not([data-glide-current]) {
    background: transparent;
  }
  .opt:focus-visible {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-accent) 60%, transparent);
  }

  @media (prefers-reduced-motion: reduce) {
    .adjust-text {
      animation: none;
      background: none;
      color: var(--vs-accent-ink);
    }
    .edited,
    .menu {
      animation: none;
    }
    .seg-thumb,
    .chevron,
    .field {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .seg-thumb {
      outline: 2px solid Highlight;
    }
    .field[data-active] {
      outline: 1px solid Highlight;
    }
  }
</style>
```


---

# Selection Actions

> Select text and a floating toolbar rewrites it in place.

- **Slug:** `selection-actions`
- **Kind:** component · **Category:** Agent
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/SelectionActions.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/selection-actions
- **All files in one bundle:** https://viewership.ai/design/components/selection-actions.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/selection-actions.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/selection-actions/`:

   - `SelectionActions.astro` (raw: https://viewership.ai/design/raw/selection-actions/SelectionActions.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)
   - `shimmer`: `Shimmer.astro` (docs: https://viewership.ai/design/components/shimmer.md)
   - `stream-text`: `StreamText.astro`, `stream-text.ts` (docs: https://viewership.ai/design/components/stream-text.md)

npm packages: none.

## Usage

```astro
---
import SelectionActions from "../components/viewership/selection-actions/SelectionActions.astro";
---

<SelectionActions />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import SelectionActions, { type SelectionSegment } from "./SelectionActions.astro";

const passage: SelectionSegment[] = [
  { text: "The trail pack page gets most AI citations. ", rewrite: "Most AI citations point to the trail pack page. " },
  { text: "Keep it in this week's client report. ", rewrite: "Add it to this week's Northwind report. " },
  {
    text: "Update it first thing Friday so the copy has a full day for review before the weekend launch.",
    rewrites: {
      Improve: "Update the trail pack page Friday morning so the copy gets a full day of review before launch.",
      Shorten: "Update it Friday morning so review finishes before launch.",
      "Change tone": "Let's update it first thing Friday, so the team has a full day to review before launch.",
      "Fix grammar": "Update it first thing on Friday so the copy has a full day for review before the weekend launch.",
      custom: "Update the trail pack page at 9 am Friday. A full review day keeps the launch copy on brand.",
    },
  },
];
---

<SelectionActions passage={passage} selected={2} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `passage` | `{ text, rewrites?, rewrite? }[]` |  | Segments (usually sentences). Selection snaps to them. `rewrites` is keyed by action or "custom"; `rewrite` is the fallback. |
| `selected` | `number \| [number, number]` | `0` | Initial segment or inclusive range. |
| `actions` | `{ primary: SelectionAction[]; more: SelectionAction[] }` | `Explain, Improve · Shorten, Tone, Grammar` | { id, icon?, action?, busyLabel? }. Omit `action` for non-rewrite actions. |
| `labels` | `{ keep?, discard?, placeholder?, toolbar? }` |  | UI and aria text. |
| `autoShow` | `boolean` | `true` | Show the toolbar once in view. |
| `Events` | `CustomEvent` |  | vs-selection-action { action, prompt?, text, rewrite, respondWith(text \| Promise) }, vs-selection-keep { original, text }, vs-selection-discard { original }. |

## Source

### `src/components/viewership/selection-actions/SelectionActions.astro`

```astro
---
/**
 * SelectionActions: select text and a floating toolbar rewrites it in place.
 * Running an action shimmers a busy label, streams the rewrite, then asks
 * to Keep, Discard or Try again.
 *
 * Ported from Beautiful UI `components/primitives/SelectionActions.tsx`
 * (MIT, © 2026 Shane Levine). Icons are Lucide (ISC) equivalents.
 *
 * The passage is a list of segments (usually sentences). Mouse selection,
 * tapping a sentence, or ←/→ (Shift to extend) snaps to whole segments.
 * Tab enters the toolbar; Escape returns to the passage.
 *
 * Rewrites come from each segment's `rewrites` (keyed by action or "custom")
 * or `rewrite`. To produce your own, listen for `vs-selection-action` and
 * call `event.detail.respondWith(stringOrPromise)` synchronously.
 *
 * Events (bubbling, on the root):
 *   vs-selection-action   detail: { action, prompt?, text, rewrite: boolean, respondWith(text | Promise<text>) }
 *   vs-selection-keep     detail: { original, text }
 *   vs-selection-discard  detail: { original }
 *
 * @example
 * <SelectionActions passage={[{ text: "Lead with the offer. " }, { text: "Then add proof.", rewrite: "Follow with one proof point." }]} selected={1} />
 */
import type { HTMLAttributes } from "astro/types";
import Button from "../button/Button.astro";
import Shimmer from "../shimmer/Shimmer.astro";

export interface SelectionSegment {
  text: string;
  /** Rewrite per action name (e.g. "Improve", "Shorten", "Change tone", "Fix grammar", or "custom"). */
  rewrites?: Record<string, string>;
  /** Fallback rewrite for any action. */
  rewrite?: string;
}
export interface SelectionAction {
  /** Visible label. */
  id: string;
  /** Built-in icon (explain, improve, shorten, tone, grammar) or inner SVG markup. */
  icon?: string;
  /** Action name sent with the event and used to pick a rewrite. Omit for actions that don't rewrite (e.g. Explain). */
  action?: string;
  /** Gerund shown while it runs, e.g. "Improving". */
  busyLabel?: string;
}
export interface SelectionActionSet {
  primary: SelectionAction[];
  more: SelectionAction[];
}
export interface SelectionLabels {
  keep: string;
  discard: string;
  placeholder: string;
  toolbar: string;
}

type Props = HTMLAttributes<"div"> & {
  passage: SelectionSegment[];
  /** Initially selected segment index, or an inclusive [start, end] range. */
  selected?: number | [number, number];
  actions?: SelectionActionSet;
  labels?: Partial<SelectionLabels>;
  /** Show the toolbar for the initial selection once in view. */
  autoShow?: boolean;
};

const DEFAULT_ACTIONS: SelectionActionSet = {
  primary: [
    { id: "Explain", icon: "explain" },
    { id: "Improve", icon: "improve", action: "Improve", busyLabel: "Improving" },
  ],
  more: [
    { id: "Shorten", icon: "shorten", action: "Shorten", busyLabel: "Shortening" },
    { id: "Tone", icon: "tone", action: "Change tone", busyLabel: "Changing tone" },
    { id: "Grammar", icon: "grammar", action: "Fix grammar" },
  ],
};

const {
  passage,
  selected = 0,
  actions = DEFAULT_ACTIONS,
  labels = {},
  autoShow = true,
  class: className,
  ...rest
} = Astro.props;

const copy: SelectionLabels = { keep: "Keep", discard: "Discard", placeholder: "Describe edits", toolbar: "Edit selection", ...labels };
const uid = `vs-sa-${Math.random().toString(36).slice(2, 8)}`;
const [selStart, selEnd] = Array.isArray(selected) ? selected : [selected, selected];

/* Lucide (ISC) */
const ICONS: Record<string, string> = {
  explain: '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><path d="M12 17h.01" />',
  improve: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" />',
  shorten: '<circle cx="6" cy="6" r="3" /><path d="M8.12 8.12 12 12" /><path d="M20 4 8.12 15.88" /><circle cx="6" cy="18" r="3" /><path d="M14.8 14.8 20 20" />',
  tone: '<circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><path d="M9 9h.01" /><path d="M15 9h.01" />',
  grammar: '<path d="m6 16 6-12 6 12" /><path d="M8 12h8" /><path d="m16 20 2 2 4-4" />',
  send: '<path d="m5 12 7-7 7 7" /><path d="M12 19V5" />',
  chevron: '<path d="m9 18 6-6-6-6" />',
  check: '<path d="M20 6 9 17l-5-5" />',
  close: '<path d="M18 6 6 18" /><path d="m6 6 12 12" />',
  retry: '<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" />',
};
const icon = (name: string | undefined, size = 14, sw = 1.8) => {
  const inner = !name ? "" : name.includes("<") ? name : (ICONS[name] ?? "");
  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
};

const clientConfig = {
  segments: passage.map((s) => ({ text: s.text, rewrites: s.rewrites ?? {}, rewrite: s.rewrite ?? null })),
  selected: [selStart, selEnd],
  busy: Object.fromEntries([...actions.primary, ...actions.more].filter((a) => a.action).map((a) => [a.action, a.busyLabel ?? "Editing"])),
  autoShow,
};
---

<div class:list={["vs-selection-actions", className]} {...rest}>
  <script type="application/json" data-vs-config set:html={JSON.stringify(clientConfig)} />
  <div class="sa-host" data-host>
    <p class="sa-passage" data-passage aria-describedby={`${uid}-hint`}>
      {
        passage.map((seg, i) => {
          if (i === selStart) {
            return (
              <span class="sa-sel" data-sel>{passage.slice(selStart, selEnd + 1).map((s, j) => <span class="sa-seg" data-seg={selStart + j}>{s.text}</span>)}</span>
            );
          }
          if (i > selStart && i <= selEnd) return null;
          return <span class="sa-seg" data-seg={i}>{seg.text}</span>;
        })
      }
    </p>
    <p class="sa-sr" id={`${uid}-hint`}>Select text, or use the arrow keys to choose a sentence (Shift extends), then press Tab to reach the edit toolbar.</p>

    <div class="sa-anchor" data-anchor hidden>
      <div class="sa-bar" role="toolbar" aria-label={copy.toolbar} data-bar data-mode="idle">
        <div class="sa-content" data-content>
          <span class="sa-busy" data-busy hidden>
            <span class="sa-spinner" aria-hidden="true"></span>
            <Shimmer class="sa-busy-label" data-busy-shimmer>Improving…</Shimmer>
            <span class="sa-busy-label" data-busy-plain hidden>Improving…</span>
          </span>

          <span class="sa-result" data-result hidden>
            <button type="button" class="sa-keep" data-keep>
              <Fragment set:html={icon("check")} />
              {copy.keep}
            </button>
            <Button variant="quiet" size="xs" class="sa-btn" data-discard>
              <Fragment set:html={icon("close")} />
              {copy.discard}
            </Button>
            <span class="sa-sep" aria-hidden="true"></span>
            <button type="button" class="sa-round" data-retry aria-label="Try again">
              <Fragment set:html={icon("retry")} />
            </button>
          </span>

          <span class="sa-idle" data-idle>
            <span class="sa-prompt-wrap" data-prompt-wrap>
              <form class="sa-form" data-form>
                <input class="sa-input" data-input aria-label={copy.placeholder} placeholder={copy.placeholder} autocomplete="off" />
              </form>
            </span>
            <span class="sa-actions-wrap" data-actions-wrap>
              <span class="sa-sep sa-sep--strong" data-lead-sep aria-hidden="true"></span>
              {
                actions.primary.map((a) => (
                  <Button variant="quiet" size="xs" class="sa-btn" data-act={a.action ?? ""} data-id={a.id}>
                    <Fragment set:html={icon(a.icon)} />
                    {a.id}
                  </Button>
                ))
              }
              <span class="sa-more" data-more inert>
                {
                  actions.more.map((a) => (
                    <Button variant="quiet" size="xs" class="sa-btn" data-act={a.action ?? ""} data-id={a.id}>
                      <Fragment set:html={icon(a.icon)} />
                      {a.id}
                    </Button>
                  ))
                }
              </span>
              <span class="sa-sep" aria-hidden="true"></span>
              <button type="button" class="sa-round sa-round--ink" data-expand aria-label="Show more actions" aria-expanded="false">
                <span class="sa-chevron" set:html={icon("chevron")} />
              </button>
            </span>
            <span class="sa-send-wrap" data-send-wrap inert>
              <button type="button" class="sa-send" data-send aria-label="Send edit instruction">
                <Fragment set:html={icon("send", 16, 2.4)} />
              </button>
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>
  <p class="sa-sr" aria-live="polite" data-live></p>
</div>

<script>
  import { streamText, type StreamTextHandle } from "../stream-text/stream-text";

  interface Segment {
    text: string;
    rewrites: Record<string, string>;
    rewrite: string | null;
  }
  interface Config {
    segments: Segment[];
    selected: [number, number];
    busy: Record<string, string>;
    autoShow: boolean;
  }
  type Mode = "idle" | "thinking" | "streaming" | "result";

  const EASE = "cubic-bezier(0.23, 1, 0.32, 1)";
  const escapeHtml = (s: string) => s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);

  function init(root: HTMLElement) {
    const cfg = JSON.parse(root.querySelector("script[data-vs-config]")?.textContent || "{}") as Config;
    const segments = cfg.segments.map((s) => ({ ...s }));
    let [start, end] = cfg.selected;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    const q = <T extends HTMLElement = HTMLElement>(sel: string) => root.querySelector<T>(sel)!;
    const host = q("[data-host]");
    const passageEl = q("[data-passage]");
    const anchor = q("[data-anchor]");
    const bar = q("[data-bar]");
    const content = q("[data-content]");
    const busyEl = q("[data-busy]");
    const busyShimmer = q("[data-busy-shimmer]");
    const busyPlain = q("[data-busy-plain]");
    const resultEl = q("[data-result]");
    const idleEl = q("[data-idle]");
    const promptWrap = q("[data-prompt-wrap]");
    const form = q<HTMLFormElement>("[data-form]");
    const input = q<HTMLInputElement>("[data-input]");
    const actionsWrap = q("[data-actions-wrap]");
    const leadSep = q("[data-lead-sep]");
    const more = q("[data-more]");
    const expandBtn = q<HTMLButtonElement>("[data-expand]");
    const sendWrap = q("[data-send-wrap]");
    const live = q("[data-live]");

    let mode: Mode = "idle";
    let action = "Improve";
    let pendingText = "";
    let original: Segment[] = [];
    let stream: StreamTextHandle | null = null;
    let thinkTimer: number | undefined;
    let showTimer: number | undefined;
    let frame = 0;
    let widthAnim: Animation | null = null;
    let shown = false;
    let runId = 0;

    passageEl.tabIndex = 0;

    /* ── render the passage with the selection wrapped in one span ── */
    const selEl = () => passageEl.querySelector<HTMLElement>("[data-sel]");
    const renderPassage = () => {
      let html = "";
      segments.forEach((s, i) => {
        const seg = `<span class="sa-seg" data-seg="${i}">${escapeHtml(s.text)}</span>`;
        if (i === start) html += '<span class="sa-sel" data-sel>';
        html += seg;
        if (i === end) html += "</span>";
      });
      passageEl.innerHTML = html;
      place();
    };
    const selectedText = () => segments.slice(start, end + 1).map((s) => s.text).join("");
    const rewriteFor = (name: string) =>
      segments
        .slice(start, end + 1)
        .map((s) => s.rewrites[name] ?? s.rewrite ?? s.text)
        .join("");

    /* ── placement: centred on the selection, under its last line ── */
    function place() {
      cancelAnimationFrame(frame);
      frame = requestAnimationFrame(() => {
        const sel = selEl();
        if (!sel) return;
        const lines = Array.from(sel.getClientRects());
        const last = lines.at(-1);
        const first = lines[0];
        if (!last || !first) return;
        const bounds = sel.getBoundingClientRect();
        const hostRect = host.getBoundingClientRect();
        const w = bar.offsetWidth;
        const h = bar.offsetHeight || 36;
        let x = bounds.left - hostRect.left + bounds.width / 2;
        const minX = 8 - hostRect.left + w / 2;
        const maxX = window.innerWidth - 8 - hostRect.left - w / 2;
        x = minX > maxX ? (minX + maxX) / 2 : Math.min(Math.max(x, minX), maxX);
        let y = last.bottom - hostRect.top + 8;
        if (last.bottom + 8 + h > window.innerHeight - 8 && first.top - 8 - h > 8) y = first.top - hostRect.top - 8 - h;
        anchor.style.transform = `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0) translateX(-50%)`;
      });
    }

    /* ── modes + the width morph between them ──────────── */
    const setMode = (next: Mode) => {
      const previous = mode;
      const fromWidth = bar.getBoundingClientRect().width;
      mode = next;
      bar.dataset.mode = next;
      busyEl.hidden = !(next === "thinking" || next === "streaming");
      busyShimmer.hidden = next !== "thinking";
      busyPlain.hidden = next !== "streaming";
      resultEl.hidden = next !== "result";
      idleEl.hidden = next !== "idle";
      const toWidth = Math.ceil(content.getBoundingClientRect().width) + 8;
      if (shown && previous !== next && Math.abs(toWidth - fromWidth) > 1 && !reduce) {
        widthAnim?.cancel();
        widthAnim = bar.animate([{ width: `${fromWidth}px` }, { width: `${toWidth}px` }], { duration: 320, easing: EASE });
      }
      place();
    };

    const setExpanded = (open: boolean) => {
      bar.toggleAttribute("data-expanded", open);
      expandBtn.setAttribute("aria-expanded", String(open));
      expandBtn.setAttribute("aria-label", open ? "Show fewer actions" : "Show more actions");
      more.inert = !open;
      promptWrap.inert = open;
      leadSep.hidden = open;
      place();
    };

    let typingWidth = 0;
    const setTyping = (typing: boolean) => {
      if (typing && !typingWidth) {
        typingWidth = Math.ceil(bar.getBoundingClientRect().width);
        bar.style.setProperty("--sa-typing", `${typingWidth}px`);
        bar.toggleAttribute("data-typing", true);
      } else if (!typing && typingWidth) {
        typingWidth = 0;
        bar.style.removeProperty("--sa-typing");
        bar.toggleAttribute("data-typing", false);
      }
      actionsWrap.inert = typing;
      sendWrap.inert = !typing;
    };

    /* ── running an action ─────────────────────────────── */
    const run = (name: string, prompt?: string) => {
      if (mode === "result") commit(false);
      const id = ++runId;
      action = name;
      setExpanded(false);
      original = segments.slice(start, end + 1).map((s) => ({ ...s }));
      const text = selectedText();
      let response: Promise<string> | null = null;
      root.dispatchEvent(
        new CustomEvent("vs-selection-action", {
          bubbles: true,
          detail: {
            action: name,
            prompt,
            text,
            rewrite: true,
            respondWith: (value: string | Promise<string>) => {
              response = Promise.resolve(value);
            },
          },
        }),
      );
      const label = cfg.busy[name] ?? "Editing";
      busyShimmer.textContent = `${label}…`;
      busyPlain.textContent = `${label}…`;
      live.textContent = `${label}…`;
      setMode("thinking");
      const fallback = rewriteFor(prompt ? "custom" : name);
      const minWait = new Promise<void>((resolve) => (thinkTimer = window.setTimeout(resolve, reduce ? 0 : 700)));
      Promise.all([response ?? Promise.resolve(fallback), minWait])
        .then(([rewrite]) => id === runId && startStream(rewrite))
        .catch(() => {
          if (id !== runId) return;
          live.textContent = "Couldn't rewrite the selection.";
          setMode("idle");
        });
    };

    const startStream = (rewrite: string) => {
      setMode("streaming");
      pendingText = rewrite;
      const sel = selEl();
      if (!sel) return;
      passageEl.setAttribute("aria-busy", "true");
      stream?.stop();
      stream = streamText(sel, rewrite, {
        charsPerTick: 2,
        tickMs: 9,
        onProgress: place,
        onDone: () => {
          passageEl.removeAttribute("aria-busy");
          // Settle into plain text: no caret once the result is offered.
          sel.textContent = rewrite;
          setMode("result");
          live.textContent = `Rewrite ready: ${rewrite} Keep or discard it.`;
        },
      });
    };

    /** Commit (keep) or revert (discard) the streamed rewrite. */
    const commit = (keep: boolean) => {
      runId += 1;
      stream?.stop();
      stream = null;
      window.clearTimeout(thinkTimer);
      passageEl.removeAttribute("aria-busy");
      if (keep && pendingText) {
        segments.splice(start, end - start + 1, { text: pendingText, rewrites: {}, rewrite: null });
        end = start;
        root.dispatchEvent(new CustomEvent("vs-selection-keep", { bubbles: true, detail: { original: original.map((s) => s.text).join(""), text: pendingText } }));
      } else if (original.length) {
        root.dispatchEvent(new CustomEvent("vs-selection-discard", { bubbles: true, detail: { original: original.map((s) => s.text).join("") } }));
      }
      pendingText = "";
      original = [];
      renderPassage();
    };

    const reset = (keep: boolean) => {
      commit(keep);
      input.value = "";
      setTyping(false);
      setExpanded(false);
      setMode("idle");
      live.textContent = keep ? "Rewrite kept." : "Rewrite discarded.";
      focusFirst();
    };

    /* ── wiring ────────────────────────────────────────── */
    root.querySelectorAll<HTMLButtonElement>("[data-act]").forEach((btn) => {
      btn.addEventListener("click", () => {
        const name = btn.dataset.act;
        if (name) run(name);
        else root.dispatchEvent(new CustomEvent("vs-selection-action", { bubbles: true, detail: { action: btn.dataset.id, text: selectedText(), rewrite: false, respondWith: () => {} } }));
      });
    });
    expandBtn.addEventListener("click", () => setExpanded(!bar.hasAttribute("data-expanded")));
    input.addEventListener("input", () => setTyping(input.value.trim().length > 0));
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const prompt = input.value.trim();
      if (prompt) run(prompt, prompt);
      else run("Improve");
    });
    q("[data-send]").addEventListener("click", () => {
      const prompt = input.value.trim();
      if (prompt) run(prompt, prompt);
    });
    q("[data-keep]").addEventListener("click", () => reset(true));
    q("[data-discard]").addEventListener("click", () => reset(false));
    q("[data-retry]").addEventListener("click", () => {
      const name = action;
      commit(false);
      run(name, cfg.busy[name] ? undefined : name);
    });

    /* toolbar keyboard: ←/→ between controls, Escape back to the passage */
    const controls = () =>
      Array.from(bar.querySelectorAll<HTMLElement>("button, input")).filter(
        (el) => !el.closest("[inert], [hidden]") && el.getClientRects().length > 0,
      );
    function focusFirst() {
      requestAnimationFrame(() => controls()[0]?.focus());
    }
    bar.addEventListener("keydown", (e) => {
      const target = e.target as HTMLElement;
      if (e.key === "Escape") {
        e.preventDefault();
        if (bar.hasAttribute("data-expanded")) setExpanded(false);
        else passageEl.focus();
        return;
      }
      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
      if (target === input) {
        const atStart = input.selectionStart === 0 && input.selectionEnd === 0;
        const atEnd = input.selectionStart === input.value.length;
        if ((e.key === "ArrowLeft" && !atStart) || (e.key === "ArrowRight" && !atEnd)) return;
      }
      const list = controls();
      const i = list.indexOf(target);
      if (i === -1) return;
      e.preventDefault();
      list[(i + (e.key === "ArrowRight" ? 1 : -1) + list.length) % list.length]?.focus();
    });

    /* ── choosing a selection ──────────────────────────── */
    const select = (a: number, b: number) => {
      if (mode === "thinking" || mode === "streaming") return;
      if (mode === "result") {
        commit(true);
        setMode("idle");
      }
      start = Math.max(0, Math.min(a, b));
      end = Math.min(segments.length - 1, Math.max(a, b));
      renderPassage();
      show();
      live.textContent = `Selected: ${selectedText()}`;
    };
    const segIndex = (node: Node | null) => {
      const el = node instanceof Element ? node : node?.parentElement;
      const seg = el?.closest<HTMLElement>("[data-seg]");
      return seg && passageEl.contains(seg) ? Number(seg.dataset.seg) : -1;
    };
    passageEl.addEventListener("pointerup", (e) => {
      // Let the browser settle the selection first.
      requestAnimationFrame(() => {
        const s = window.getSelection();
        if (s && !s.isCollapsed && s.rangeCount) {
          const range = s.getRangeAt(0);
          if (!passageEl.contains(range.commonAncestorContainer)) return;
          const hits = Array.from(passageEl.querySelectorAll<HTMLElement>("[data-seg]"))
            .filter((seg) => range.intersectsNode(seg) && range.toString().trim().length > 0)
            .map((seg) => Number(seg.dataset.seg));
          // Drop segments the range only grazes at its very edge.
          let a = segIndex(range.startContainer);
          let b = segIndex(range.endContainer);
          if (range.endOffset === 0 && b > a) b -= 1;
          if (a === -1 || b === -1) [a, b] = [Math.min(...hits), Math.max(...hits)];
          s.removeAllRanges();
          if (Number.isFinite(a) && Number.isFinite(b)) select(a, b);
          return;
        }
        const i = segIndex(e.target as Node);
        if (i !== -1) select(i, i);
      });
    });
    passageEl.addEventListener("keydown", (e) => {
      const last = segments.length - 1;
      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
        e.preventDefault();
        if (e.shiftKey) select(start, Math.min(last, end + 1));
        else select(Math.min(last, end + 1), Math.min(last, end + 1));
      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
        e.preventDefault();
        if (e.shiftKey) select(Math.max(0, start - 1), end > start ? end - 1 : end);
        else select(Math.max(0, start - 1), Math.max(0, start - 1));
      } else if (e.key === "Home") {
        e.preventDefault();
        select(0, 0);
      } else if (e.key === "End") {
        e.preventDefault();
        select(last, last);
      }
    });

    /* ── appearance ────────────────────────────────────── */
    function show() {
      if (shown) return;
      shown = true;
      anchor.hidden = false;
      place();
      requestAnimationFrame(() => {
        anchor.classList.add("is-visible");
        if (!reduce) bar.classList.add("is-popping");
      });
    }
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && cfg.autoShow && !shown) {
        showTimer = window.setTimeout(show, reduce ? 0 : 280);
        io.disconnect();
      }
    });
    io.observe(root);

    const ro = new ResizeObserver(place);
    ro.observe(host);
    window.addEventListener("resize", place);
    window.addEventListener("scroll", place, { passive: true, capture: true });

    renderPassage();
    setMode("idle");
    setExpanded(false);
    setTyping(false);

    return () => {
      runId += 1;
      stream?.stop();
      window.clearTimeout(thinkTimer);
      window.clearTimeout(showTimer);
      cancelAnimationFrame(frame);
      widthAnim?.cancel();
      io.disconnect();
      ro.disconnect();
      window.removeEventListener("resize", place);
      window.removeEventListener("scroll", place, { capture: true });
    };
  }

  const teardowns = new Set<() => void>();
  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-selection-actions:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      teardowns.add(init(root));
    });
  boot();
  document.addEventListener("astro:page-load", boot);
  document.addEventListener("astro:before-swap", () => {
    teardowns.forEach((fn) => fn());
    teardowns.clear();
  });
</script>

<style>
  .vs-selection-actions {
    width: 100%;
    max-width: 460px;
    font-family: var(--vs-font-sans);
    text-align: left;
  }
  .sa-host {
    position: relative;
    padding-bottom: 48px;
  }
  .sa-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sa-passage {
    margin: 0;
    border-radius: 4px;
    color: var(--vs-ink);
    font-size: 13px;
    line-height: 1.625;
    cursor: text;
    -webkit-user-select: text;
    user-select: text;
  }
  .sa-passage:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .sa-passage :global(.sa-sel) {
    border-radius: 3px;
    background: color-mix(in srgb, var(--vs-accent) 14%, var(--vs-surface));
    color: var(--vs-ink);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  :global(:root[data-theme="dark"]) .sa-passage :global(.sa-sel) {
    background: var(--vs-accent-tint);
  }
  @media (prefers-color-scheme: dark) {
    :global(:root:not([data-theme="light"])) .sa-passage :global(.sa-sel) {
      background: var(--vs-accent-tint);
    }
  }

  /* ── the floating bar ───────────────────────────────── */
  .sa-anchor {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    will-change: transform;
    transition:
      transform 320ms var(--vs-ease-in-out),
      opacity 180ms ease-out;
  }
  .sa-anchor.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  /* A 36px pill wraps 28px controls at a 4px inset: concentric 14px radii. */
  .sa-bar {
    display: flex;
    width: fit-content;
    max-width: calc(100vw - 48px);
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    overflow: hidden;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-surface);
    color: var(--vs-ink);
    box-shadow: var(--vs-shadow-overlay);
    font-weight: 400;
  }
  .sa-bar.is-popping {
    animation: vs-pop-in 220ms var(--vs-ease-out) both;
  }
  .sa-bar[data-typing] {
    width: var(--sa-typing);
  }
  .sa-content {
    display: flex;
    width: fit-content;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  .sa-bar[data-typing] .sa-content {
    width: calc(var(--sa-typing) - 8px);
  }
  .sa-idle,
  .sa-result {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .sa-busy {
    display: inline-flex;
    height: 28px;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    color: var(--vs-ink-2);
    font-size: 12.5px;
    white-space: nowrap;
  }
  .sa-spinner {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 1.5px solid var(--vs-line-strong);
    border-top-color: var(--vs-ink-2);
    border-radius: 50%;
    animation: vs-spin 700ms linear infinite;
  }
  .sa-busy :global(.sa-busy-label) {
    font-size: 12.5px;
    font-weight: 400;
  }

  button {
    font: inherit;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  button:focus-visible,
  .sa-input:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .sa-bar :global(.sa-btn) {
    flex-shrink: 0;
  }
  .sa-keep {
    display: inline-flex;
    height: 28px;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-ink);
    color: var(--vs-canvas);
    box-shadow: var(--vs-shadow-hairline);
    font-size: 12.5px;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
  }
  .sa-keep:hover {
    opacity: 0.9;
  }
  .sa-keep:active {
    transform: scale(0.96);
  }
  .sa-sep {
    width: 1px;
    height: 16px;
    flex-shrink: 0;
    margin: 0 2px;
    background: var(--vs-line);
  }
  .sa-sep--strong {
    margin: 0 4px;
    background: var(--vs-line-strong);
  }
  .sa-round {
    display: flex;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--vs-radius-pill);
    background: transparent;
    color: var(--vs-ink-3);
    transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
  }
  .sa-round:hover {
    background: var(--vs-hover-2);
    color: var(--vs-ink-2);
  }
  .sa-round--ink {
    color: var(--vs-ink);
  }
  .sa-round--ink:hover {
    background: var(--vs-hover);
    color: var(--vs-ink);
  }
  .sa-round:active {
    transform: scale(0.96);
  }
  .sa-chevron {
    display: flex;
    transition: transform 400ms var(--vs-ease-out);
  }
  .sa-bar[data-expanded] .sa-chevron {
    transform: rotate(180deg);
  }

  /* idle: prompt field · actions (+ more) · send */
  .sa-prompt-wrap,
  .sa-actions-wrap,
  .sa-more,
  .sa-send-wrap {
    display: flex;
    min-width: 0;
    align-items: center;
    overflow: hidden;
    transition-duration: 400ms;
    transition-timing-function: var(--vs-ease-out);
  }
  .sa-prompt-wrap {
    max-width: 145px;
    transition-property: max-width, opacity, transform;
  }
  .sa-bar[data-typing] .sa-prompt-wrap {
    max-width: calc(var(--sa-typing) - 40px);
  }
  .sa-bar[data-expanded] .sa-prompt-wrap {
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
  }
  .sa-form {
    display: flex;
    width: 145px;
    height: 28px;
    flex-shrink: 0;
    align-items: center;
    margin: 0;
    transition: width 400ms var(--vs-ease-out);
  }
  .sa-bar[data-typing] .sa-form {
    width: calc(var(--sa-typing) - 40px);
  }
  .sa-input {
    width: 100%;
    height: 28px;
    padding: 0 10px 0 12px;
    border: 0;
    border-radius: var(--vs-radius-pill);
    background: transparent;
    color: var(--vs-ink);
    font: inherit;
    font-size: 12.5px;
  }
  .sa-input::placeholder {
    color: var(--vs-ink-3);
  }
  .sa-actions-wrap {
    gap: 2px;
    max-width: 224px;
    transition-property: max-width, opacity, transform;
  }
  .sa-bar[data-expanded] .sa-actions-wrap {
    max-width: 462px;
  }
  .sa-bar[data-typing] .sa-actions-wrap {
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
  }
  .sa-more {
    gap: 2px;
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    transition-property: max-width, opacity, margin;
  }
  .sa-bar[data-expanded] .sa-more {
    max-width: 262px;
    margin-left: 2px;
    opacity: 1;
  }
  .sa-send-wrap {
    max-width: 0;
    opacity: 0;
    transform: scale(0.88);
    transition-property: max-width, opacity, transform;
  }
  .sa-bar[data-typing] .sa-send-wrap {
    max-width: 30px;
    opacity: 1;
    transform: scale(1);
  }
  .sa-send {
    display: flex;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-ink);
    color: var(--vs-surface);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
  }
  .sa-send:active {
    transform: scale(0.94);
  }

  @media (prefers-reduced-motion: reduce) {
    .sa-anchor,
    .sa-prompt-wrap,
    .sa-actions-wrap,
    .sa-more,
    .sa-send-wrap,
    .sa-form,
    .sa-chevron {
      transition: none;
    }
    .sa-bar.is-popping {
      animation: none;
    }
    .sa-spinner {
      animation: none;
      border-top-color: var(--vs-line-strong);
    }
  }
  @media (forced-colors: active) {
    .sa-bar {
      outline: 1px solid CanvasText;
    }
    .sa-passage :global(.sa-sel) {
      forced-color-adjust: none;
      background: Highlight;
      color: HighlightText;
    }
  }
</style>
```


---

# Agent Screen

> An agent's live screen with an expandable viewer and recording.

- **Slug:** `agent-screen`
- **Kind:** component · **Category:** Agent
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/primitives/AgentScreen.tsx) (MIT)
- **Docs page:** https://viewership.ai/design/components/agent-screen
- **All files in one bundle:** https://viewership.ai/design/components/agent-screen.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/agent-screen.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/agent-screen/`:

   - `AgentScreen.astro` (raw: https://viewership.ai/design/raw/agent-screen/AgentScreen.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)

npm packages: none.

## Usage

```astro
---
import AgentScreen from "../components/viewership/agent-screen/AgentScreen.astro";
---

<AgentScreen />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import AgentScreen from "./AgentScreen.astro";

interface Props {
  variant?: string;
}
const { variant = "Working" } = Astro.props;
---

<div class="stage">
  <AgentScreen agentName="Reporting agent" state={variant === "Loading" ? "connecting" : "live"} />
</div>

<style>
  .stage {
    display: flex;
    width: 100%;
    justify-content: center;
  }
</style>
```

## Variants

Demo variants: `Working`, `Loading`.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `agentName` | `string` | `"Agent"` | Caption and viewer title. |
| `state` | `"live" \| "connecting"` | `"live"` | connecting disables opening. |
| `src` | `string` |  | Image or video URL. Falls back to a sample desktop. |
| `<slot />` | `HTML` |  | Custom screen markup. Size in em or cqw. |
| `labels` | `Partial<AgentScreenLabels>` |  | Text overrides. |
| `vs-agent-screen-open / -close` | `CustomEvent` |  | Fires when the viewer opens or collapses. |
| `vs-agent-screen-record` | `CustomEvent<{ recording: true }>` |  | Fires when recording starts. |
| `vs-agent-screen-end` | `CustomEvent<{ seconds: number }>` |  | Fires when recording ends. |

## Source

### `src/components/viewership/agent-screen/AgentScreen.astro`

```astro
---
/**
 * AgentScreen: a card showing an agent's screen, with a viewer and recording.
 *
 * Ported from Beautiful UI `components/primitives/AgentScreen.tsx`
 * (MIT, © 2026 Shane Levine).
 *
 * Hover or focus shows "Open", which expands a native <dialog> viewer.
 * Recording keeps running when the viewer closes. Custom markup goes in the
 * default slot (size in em or container units), or pass `src`.
 *
 * Events (bubbling): vs-agent-screen-open, -close, -record, -end { seconds }
 *
 * @example
 * <AgentScreen agentName="Reporting agent" />
 */
import type { HTMLAttributes } from "astro/types";
import Button from "../button/Button.astro";

export interface AgentScreenLabels {
  /** "{name}" is replaced with agentName. */
  screen: string;
  open: string;
  collapse: string;
  teach: string;
  end: string;
  connecting: string;
  recording: string;
  recordingStarted: string;
  /** "{time}" is replaced. */
  recordingEnded: string;
}

type Props = HTMLAttributes<"div"> & {
  agentName?: string;
  state?: "live" | "connecting";
  /** Image or video URL for a real stream (replaces the faux desktop). */
  src?: string;
  labels?: Partial<AgentScreenLabels>;
};

const { agentName = "Agent", state = "live", src, labels, class: className, ...rest } = Astro.props;

const l: AgentScreenLabels = {
  screen: "{name}'s screen",
  open: "Open",
  collapse: "Collapse",
  teach: "Teach a task",
  end: "End",
  connecting: "Connecting to agent's screen",
  recording: "Recording",
  recordingStarted: "Recording started",
  recordingEnded: "Recording ended at {time}",
  ...labels,
};

const uid = `vs-agent-screen-${Math.random().toString(36).slice(2, 8)}`;
const live = state === "live";
const screenName = l.screen.replace("{name}", agentName);
const isVideo = src ? /\.(mp4|webm|mov|m4v)(\?|$)/i.test(src) : false;
const R = 12; // (26 - 2) / 2
const C = 2 * Math.PI * R;
const cursorPath =
  "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z";
const lots = [
  { name: "Spring Trail Search", origin: "Google Ads", price: "$7.80", target: true },
  { name: "Brand Defense", origin: "Google Ads", price: "$6.95" },
  { name: "Camp Stove Retarget", origin: "Meta Ads", price: "$5.40" },
  { name: "Gear Guide Video", origin: "YouTube", price: "$9.10" },
];
const mail = { from: "Dana Whitfield", subject: "Weekly report for Northwind Outdoor", time: "9:38" };
const dock = ["accent", "green", "orange", "red", "ink-2", "accent", "green", "orange"];
---

<div
  class:list={["vs-agent-screen", className]}
  data-state={state}
  data-labels={JSON.stringify({ recordingStarted: l.recordingStarted, recordingEnded: l.recordingEnded })}
  {...rest}
>
  <div class="frame" data-frame>
    <div class="slot" data-slot>
      <div class="screen" data-screen>
        {src ? (
          isVideo ? (
            <video class="media" src={src} autoplay muted loop playsinline></video>
          ) : (
            <img class="media" src={src} alt="" />
          )
        ) : (
          <slot>
            <div class="desk" aria-hidden="true">
              <div class="menubar">
                <span class="mb-strong">Browser</span><span>File</span><span>Edit</span><span>View</span>
                <span class="mb-right">Mon Oct 12 · 9:41</span>
              </div>

              <div class="win win--mail">
                <div class="win-bar"><span class="lights"><i></i><i></i><i></i></span></div>
                <div class="mail">
                  <div class="mail-head">
                    <span class="mail-avatar">D</span>
                    <span class="mail-meta">
                      <span class="mail-from">{mail.from}<span class="mail-time">{mail.time}</span></span>
                      <span class="mail-to">To: team@northwind.test</span>
                    </span>
                  </div>
                  <span class="mail-title">{mail.subject}</span>
                  <span class="line" style="width: 92%"></span>
                  <span class="line" style="width: 80%"></span>
                  <span class="line" style="width: 86%"></span>
                  <span class="line" style="width: 44%"></span>
                </div>
              </div>

              <div class="win win--browser">
                <div class="win-bar">
                  <span class="lights"><i></i><i></i><i></i></span>
                  <span class="tab"><span class="tab-icon"></span>Ads report</span>
                </div>
                <div class="url">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"></path></svg>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"></path></svg>
                  <span class="url-field">reports.northwind.test/ads</span>
                </div>
                <div class="page">
                  <div class="page-head">
                    <span class="logo">N</span>
                    <span class="page-title">Campaign spend</span>
                    <span class="page-btn">Queue · 2</span>
                  </div>
                  <div class="search"><span class="search-field">campaign, channel…</span><span class="search-go">Search</span></div>
                  {lots.map((lot) => (
                    <div class:list={["lot", lot.target && "is-target"]}>
                      <span class="lot-avatar"></span>
                      <span class="lot-text">
                        <span class="lot-name">{lot.name}</span>
                        <span class="lot-origin">{lot.origin} · last 7 days</span>
                      </span>
                      <span class="lot-price">{lot.price}</span>
                      <span class="lot-cta">Review</span>
                    </div>
                  ))}
                </div>
              </div>

              <div class="dock">
                {dock.map((tone) => <span class="dock-icon" style={`background: var(--vs-${tone})`}></span>)}
              </div>
            </div>
          </slot>
        )}
      </div>
    </div>

    {live ? (
      <>
        <svg class="cursor cursor--rest" width="30" height="30" viewBox="0 0 24 24" aria-hidden="true"><path d={cursorPath}></path></svg>
        <div class="reveal">
          <span class="reveal-btn">
            <Button variant="accent" size="sm" aria-haspopup="dialog" aria-controls={`${uid}-viewer`} aria-label={`${l.open} ${screenName}`} data-open>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line>
              </svg>
              {l.open}
            </Button>
          </span>
        </div>
        <span class="rec-badge" hidden data-rec-badge>
          <span class="rec-dot" aria-hidden="true"></span>
          <span class="vh">{l.recording}</span>
          <span data-time>00:00</span>
        </span>
      </>
    ) : (
      <div class="loading" role="status">
        <svg class="spinner" width="26" height="26" aria-hidden="true">
          <circle cx="13" cy="13" r={R} fill="none" stroke="rgba(255,255,255,0.18)" stroke-width="2"></circle>
          <circle cx="13" cy="13" r={R} fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-dasharray={`${C * 0.28} ${C * 0.72}`}></circle>
        </svg>
        <span class="loading-text">{l.connecting}</span>
      </div>
    )}
  </div>

  <div class="caption">{screenName}</div>

  {live && (
    <dialog class="viewer" id={`${uid}-viewer`} aria-labelledby={`${uid}-name`} data-dialog>
      <div class="panel">
        <div class="titlebar">
          <div class="tb-left">
            <span class="tb-name" id={`${uid}-name`}>{agentName}</span>
            <span class="rec-pill" hidden data-rec-pill>
              <span class="rec-dot" aria-hidden="true"></span>
              <span class="vh">{l.recording}</span>
              <span data-time>00:00</span>
            </span>
          </div>
          <div class="controls">
            <Button variant="secondary" size="sm" class="teach" data-teach>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <circle cx="12" cy="12" r="9"></circle><circle cx="12" cy="12" r="3.5" fill="currentColor" stroke="none"></circle>
              </svg>
              {l.teach}
            </Button>
            <button type="button" class="end" hidden data-end>
              <span class="end-square" aria-hidden="true"></span>
              {l.end}
            </button>
            <button type="button" class="icon-btn" aria-label={l.collapse} data-collapse>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line>
              </svg>
            </button>
          </div>
        </div>
        <div class="view" data-view>
          <svg class="cursor cursor--follow" width="30" height="30" viewBox="0 0 24 24" aria-hidden="true" data-follow><path d={cursorPath}></path></svg>
        </div>
      </div>
    </dialog>
  )}
  <span class="vh" aria-live="polite" data-live></span>
</div>

<script>
  const fmt = (total: number) =>
    `${String(Math.floor(total / 60)).padStart(2, "0")}:${String(total % 60).padStart(2, "0")}`;

  function init(root: HTMLElement) {
    if (root.dataset.state !== "live") return;
    const frame = root.querySelector<HTMLElement>("[data-frame]")!;
    const slot = root.querySelector<HTMLElement>("[data-slot]")!;
    const screen = root.querySelector<HTMLElement>("[data-screen]")!;
    const openBtn = root.querySelector<HTMLButtonElement>("[data-open]")!;
    const dialog = root.querySelector<HTMLDialogElement>("[data-dialog]")!;
    const view = root.querySelector<HTMLElement>("[data-view]")!;
    const follow = root.querySelector<SVGElement>("[data-follow]")!;
    const teach = root.querySelector<HTMLButtonElement>("[data-teach]")!;
    const end = root.querySelector<HTMLButtonElement>("[data-end]")!;
    const collapse = root.querySelector<HTMLButtonElement>("[data-collapse]")!;
    const badge = root.querySelector<HTMLElement>("[data-rec-badge]")!;
    const pill = root.querySelector<HTMLElement>("[data-rec-pill]")!;
    const times = [...root.querySelectorAll<HTMLElement>("[data-time]")];
    const live = root.querySelector<HTMLElement>("[data-live]")!;
    const labels = JSON.parse(root.dataset.labels || "{}") as { recordingStarted: string; recordingEnded: string };

    let secs = 0;
    let tick: number | undefined;

    const open = () => {
      if (dialog.open) return;
      view.prepend(screen); // one screen node: a stream keeps playing
      dialog.showModal();
      document.documentElement.style.overflow = "hidden";
      root.dispatchEvent(new CustomEvent("vs-agent-screen-open", { bubbles: true }));
    };

    dialog.addEventListener("close", () => {
      slot.append(screen);
      follow.style.opacity = "0";
      document.documentElement.style.overflow = "";
      openBtn.focus({ preventScroll: true });
      root.dispatchEvent(new CustomEvent("vs-agent-screen-close", { bubbles: true }));
    });
    // A click on the dialog box itself (outside the panel) is a backdrop click.
    dialog.addEventListener("click", (event) => {
      if (event.target === dialog) dialog.close();
    });
    collapse.addEventListener("click", () => dialog.close());

    frame.addEventListener("click", open);
    openBtn.addEventListener("click", (event) => {
      event.stopPropagation();
      open();
    });

    const paintTime = () => times.forEach((t) => (t.textContent = fmt(secs)));
    const setRecording = (on: boolean) => {
      window.clearInterval(tick);
      teach.hidden = on;
      end.hidden = !on;
      badge.hidden = !on;
      pill.hidden = !on;
      root.toggleAttribute("data-recording", on);
      if (on) {
        secs = 0;
        paintTime();
        tick = window.setInterval(() => {
          secs += 1;
          paintTime();
        }, 1000);
      }
    };

    teach.addEventListener("click", () => {
      setRecording(true);
      end.focus();
      live.textContent = labels.recordingStarted;
      root.dispatchEvent(new CustomEvent("vs-agent-screen-record", { bubbles: true, detail: { recording: true } }));
    });
    end.addEventListener("click", () => {
      const seconds = secs;
      setRecording(false);
      teach.focus();
      live.textContent = labels.recordingEnded.replace("{time}", fmt(seconds));
      root.dispatchEvent(new CustomEvent("vs-agent-screen-end", { bubbles: true, detail: { seconds } }));
    });

    // The viewer hides the system pointer and draws the agent-style one instead.
    view.addEventListener("mousemove", (event) => {
      const r = view.getBoundingClientRect();
      follow.style.transform = `translate(${event.clientX - r.left}px, ${event.clientY - r.top}px)`;
      follow.style.opacity = "1";
    });
    view.addEventListener("mouseleave", () => (follow.style.opacity = "0"));

    document.addEventListener(
      "astro:before-swap",
      () => {
        window.clearInterval(tick);
        if (dialog.open) dialog.close();
      },
      { once: true },
    );
  }

  const boot = () =>
    document.querySelectorAll<HTMLElement>(".vs-agent-screen:not([data-vs-ready])").forEach((root) => {
      root.dataset.vsReady = "";
      init(root);
    });
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

<style>
  .vs-agent-screen {
    width: 100%;
    max-width: 340px;
  }
  .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* ── resting card ── */
  .frame {
    position: relative;
    aspect-ratio: 2964 / 1856;
    overflow: hidden;
    border-radius: var(--vs-radius-window);
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-card);
    animation: vs-fade-up 380ms var(--vs-ease-out) both;
    transition: box-shadow 150ms ease-out;
  }
  [data-state="live"] .frame {
    cursor: pointer;
  }
  [data-state="live"] .frame:hover {
    box-shadow: var(--vs-shadow-raised);
  }
  .slot,
  .screen {
    position: absolute;
    inset: 0;
  }
  .screen {
    overflow: hidden;
    background: var(--vs-inset);
    container-type: inline-size;
  }
  .media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cursor {
    position: absolute;
    pointer-events: none;
    fill: #111318;
    stroke: #fff;
    stroke-width: 1.4;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
  }
  .cursor--rest {
    left: 42%;
    top: 53%;
  }
  .cursor--follow {
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0;
  }

  .reveal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 19, 24, 0);
    transition: background-color 150ms ease-out;
  }
  .reveal-btn {
    opacity: 0;
    transform: translateY(4px);
    transition:
      opacity 150ms ease-out,
      transform 150ms ease-out;
  }
  .frame:hover .reveal,
  .frame:focus-within .reveal {
    background: rgba(17, 19, 24, 0.18);
  }
  .frame:hover .reveal-btn,
  .frame:focus-within .reveal-btn {
    opacity: 1;
    transform: translateY(0);
  }
  @media (hover: none) {
    /* No hover on touch: keep the way in visible. */
    .reveal-btn {
      opacity: 1;
      transform: none;
    }
  }

  .rec-badge,
  .rec-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--vs-radius-pill);
    color: var(--vs-red);
    font-size: 11.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .rec-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px 2px 6px;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-btn);
    animation: vs-pop-in 200ms var(--vs-ease-out) both;
  }
  .rec-pill {
    flex-shrink: 0;
    padding: 2px 8px 2px 6px;
    background: var(--vs-red-tint);
  }
  .rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vs-red);
    animation: vs-pulse 1.1s ease-in-out infinite;
  }

  .loading {
    position: absolute;
    inset: 0;
    background: #000;
  }
  .spinner {
    position: absolute;
    top: calc(50% - 13px);
    left: calc(50% - 13px);
    display: block;
    animation: vs-spin 1.1s linear infinite;
  }
  .loading-text {
    position: absolute;
    top: calc(50% + 28px);
    right: 0;
    left: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12.5px;
    font-weight: 500;
    text-align: center;
  }

  .caption {
    margin-top: 10px;
    padding: 0 2px;
    overflow: hidden;
    color: var(--vs-ink);
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── viewer ── */
  .viewer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    box-sizing: border-box;
    margin: 0;
    padding: 16px;
    border: 0;
    background: transparent;
    overflow: hidden;
  }
  .viewer[open] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (min-width: 640px) {
    .viewer {
      padding: 24px;
    }
  }
  .viewer::backdrop {
    background: rgba(0, 0, 0, 0.6);
    animation: vs-fade-in 180ms ease-out both;
  }
  :global(:root[data-theme="dark"]) .viewer::backdrop {
    background: rgba(0, 0, 0, 0.75);
  }
  @media (prefers-color-scheme: dark) {
    :global(:root:not([data-theme="light"])) .viewer::backdrop {
      background: rgba(0, 0, 0, 0.75);
    }
  }
  .panel {
    position: relative;
    display: flex;
    max-height: 100%;
    flex-direction: column;
    overflow: hidden;
    padding: 0 8px 8px;
    border-radius: 16px;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-overlay);
    animation: vs-pop-in 240ms var(--vs-ease-out) both;
  }
  .titlebar {
    display: flex;
    height: 44px;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 6px;
  }
  .tb-left {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }
  .tb-name {
    overflow: hidden;
    color: var(--vs-ink);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .controls {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
  }
  .controls :global(.teach) {
    gap: 4px;
    padding-left: 6px;
  }
  .end {
    display: inline-flex;
    height: 27px;
    align-items: center;
    gap: 6px;
    padding: 0 12px 0 10px;
    border: none;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-red);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    color: var(--vs-surface);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition:
      transform 150ms ease-out,
      filter 150ms ease-out;
  }
  .end:hover {
    filter: brightness(0.95);
  }
  .end:active {
    transform: scale(0.96);
  }
  .end-square {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: white;
  }
  .icon-btn {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--vs-radius-control);
    background: transparent;
    color: var(--vs-ink-3);
    cursor: pointer;
    transition:
      background-color 100ms ease-out,
      color 100ms ease-out;
  }
  .icon-btn:hover {
    background: var(--vs-hover);
    color: var(--vs-ink);
  }
  :is(.end, .icon-btn):focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .view {
    position: relative;
    width: min(960px, 90vw, calc((100vh - 150px) * 2964 / 1856));
    min-height: 0;
    aspect-ratio: 2964 / 1856;
    overflow: hidden;
    border-radius: 8px;
    background: var(--vs-inset);
    cursor: none;
  }

  /* ── faux desktop: 1em = 1/34 of the screen width, so it scales with any frame ── */
  .desk {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(
      140deg,
      color-mix(in oklch, var(--vs-accent) 62%, var(--vs-page)) 0%,
      color-mix(in oklch, var(--vs-orange) 55%, var(--vs-page)) 62%,
      color-mix(in oklch, var(--vs-red) 50%, var(--vs-page)) 100%
    );
    color: var(--vs-ink);
    font-size: calc(100cqw / 34);
    line-height: 1.25;
    user-select: none;
  }
  .menubar {
    position: absolute;
    inset: 0 0 auto;
    display: flex;
    height: 1.3em;
    align-items: center;
    gap: 0.9em;
    padding: 0 0.9em;
    background: color-mix(in oklch, var(--vs-surface) 45%, transparent);
    font-size: 0.6em;
  }
  .mb-strong {
    font-weight: 600;
  }
  .mb-right {
    margin-left: auto;
  }

  .win {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.7em;
    background: var(--vs-surface);
    box-shadow:
      0 0 0 0.05em oklch(0 0 0 / 0.12),
      0 0.6em 1.6em oklch(0 0 0 / 0.22);
  }
  /* the browser overlaps the mail window's left edge by a hair, like stacked windows */
  .win--mail {
    top: 10%;
    left: 53%;
    width: 42%;
    height: 50%;
  }
  .win--browser {
    top: 15%;
    left: 4%;
    width: 50%;
    height: 70%;
  }
  .win-bar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5em;
    height: 1.7em;
    padding: 0 0.7em;
    border-bottom: 0.05em solid var(--vs-line);
    background: var(--vs-inset);
  }
  .lights {
    display: flex;
    gap: 0.3em;
  }
  .lights i {
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--vs-red);
  }
  .lights i:nth-child(2) {
    background: var(--vs-orange);
  }
  .lights i:nth-child(3) {
    background: var(--vs-green);
  }
  .tab {
    display: flex;
    align-items: center;
    gap: 0.35em;
    align-self: flex-end;
    height: 1.3em;
    padding: 0 0.6em;
    border-radius: 0.4em 0.4em 0 0;
    background: var(--vs-surface);
    font-size: 0.55em;
  }
  .tab-icon {
    width: 0.8em;
    height: 0.8em;
    border-radius: 0.2em;
    background: var(--vs-accent);
  }
  .url {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 0.7em;
    border-bottom: 0.05em solid var(--vs-line);
    color: var(--vs-ink-3);
  }
  .url svg {
    width: 0.9em;
    height: 0.9em;
  }
  .url-field {
    flex: 1;
    padding: 0.2em 0.8em;
    border-radius: 99em;
    background: var(--vs-field);
    font-family: var(--vs-font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 0.5em;
  }
  .page {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.55em;
    padding: 0.8em 0.9em;
    overflow: hidden;
  }
  .page-head {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .logo {
    display: grid;
    width: 1.2em;
    height: 1.2em;
    place-items: center;
    border-radius: 0.3em;
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
    font-size: 0.7em;
    font-weight: 700;
  }
  .page-title {
    font-size: 0.7em;
    font-weight: 600;
  }
  .page-btn {
    margin-left: auto;
    padding: 0.25em 0.8em;
    border-radius: 99em;
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-btn);
    font-size: 0.45em;
  }
  .search {
    display: flex;
    gap: 0.4em;
    padding: 0.35em;
    border-radius: 0.6em;
    background: var(--vs-inset);
  }
  .search-field {
    flex: 1;
    padding: 0.2em 0.7em;
    border-radius: 99em;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-hairline);
    color: var(--vs-ink-3);
    font-size: 0.45em;
  }
  .search-go {
    padding: 0.2em 0.8em;
    border-radius: 99em;
    background: var(--vs-accent);
    color: var(--vs-on-accent);
    font-size: 0.45em;
  }
  .lot {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.25em 0.35em;
    border-radius: 0.45em;
  }
  .lot.is-target {
    background: var(--vs-accent-tint);
    box-shadow: 0 0 0 0.08em var(--vs-accent);
  }
  .lot-avatar {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
    border-radius: 50%;
    background: color-mix(in oklch, var(--vs-orange) 35%, var(--vs-surface));
  }
  .lot-text {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
  }
  .lot-name {
    font-size: 0.55em;
    font-weight: 600;
  }
  .lot-origin {
    color: var(--vs-ink-3);
    font-size: 0.45em;
  }
  .lot-price {
    color: var(--vs-ink-2);
    font-size: 0.5em;
    font-variant-numeric: tabular-nums;
  }
  .lot-cta {
    padding: 0.2em 0.7em;
    border-radius: 99em;
    background: var(--vs-inset);
    box-shadow: var(--vs-shadow-hairline);
    font-size: 0.45em;
  }
  .is-target .lot-cta {
    background: var(--vs-accent);
    box-shadow: none;
    color: var(--vs-on-accent);
  }

  .mail {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 0.45em;
    padding: 0.8em 0.9em;
  }
  .mail-head {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 0.05em solid var(--vs-line);
  }
  .mail-avatar {
    display: grid;
    width: 1.6em;
    height: 1.6em;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background: var(--vs-green);
    color: var(--vs-surface);
    font-size: 0.6em;
    font-weight: 600;
  }
  .mail-meta {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
  }
  .mail-from {
    display: flex;
    justify-content: space-between;
    font-size: 0.55em;
    font-weight: 600;
  }
  .mail-time {
    color: var(--vs-ink-3);
    font-weight: 400;
  }
  .mail-to {
    color: var(--vs-ink-3);
    font-size: 0.45em;
  }
  .mail-title {
    margin: 0.2em 0;
    font-size: 0.65em;
    font-weight: 600;
  }
  .line {
    height: 0.3em;
    border-radius: 99em;
    background: var(--vs-line-strong);
  }

  .dock {
    position: absolute;
    bottom: 2.5%;
    left: 50%;
    display: flex;
    gap: 0.45em;
    padding: 0.4em 0.5em;
    border-radius: 0.8em;
    background: color-mix(in oklch, var(--vs-surface) 45%, transparent);
    box-shadow: 0 0 0 0.05em color-mix(in oklch, var(--vs-surface) 60%, transparent);
    transform: translateX(-50%);
  }
  .dock-icon {
    width: 1.5em;
    height: 1.5em;
    border-radius: 0.4em;
  }

  @media (prefers-reduced-motion: reduce) {
    .frame,
    .panel,
    .rec-badge,
    .viewer::backdrop,
    .rec-dot,
    .spinner {
      animation: none;
    }
    .reveal,
    .reveal-btn {
      transition: none;
    }
  }
</style>
```