@nadicodeai/design-system 0.21.0 → 0.22.0

package/AGENTS.md

@@ -41,4 +41,4 @@ Handoff gate: `npm run lint:design && npm run lint && npm run build && npm run t
 - Authoring is contract-first: a visual behavior comes from `DESIGN.md`, from our own shipped surfaces, or from an explicit user approval — never from another product's rendered output (ADR 0047). Screenshots verify, they never author. Ask when the contract leaves a decision open, and stop and re-read `DESIGN.md` before a second visual patch to the same component.
 - Name everything as NadicodeAI-owned primitives. A source brand appears only in a `../docs/adr/` decision record, as the history of what once inspired a choice; never in a name, a comment, a contract, or any living design document (ADR 0047).
 - Any change to package-consumed output ends with an explicit release decision, a version bump or a `[no-publish]` commit marker (enforced by the pre-push release gate; procedure: `../docs/internal/npm-publishing.md`).
-- The deleted `design-canvas/` prototypes live only in git history. `src/css/motion.css` owns shared runtime motion primitives, while `src/js/chat-autoplay.js` is the single allowed runtime JS enhancer; never reconstruct the prototypes or add a second runtime JS surface.
+- The deleted `design-canvas/` prototypes and static chat/autoplay surface live only in git history. `src/css/motion.css` owns shared runtime motion primitives; never reconstruct the prototypes or add a runtime JS surface.

package/DESIGN.md

@@ -482,7 +482,7 @@ Kernel compositions arrange approved primitives for a content role. They must no
 Each reusable concern has one home and one authoring surface, so a member is documented and shipped in exactly one place:
 
 - **Tokens** — exact reusable values live in this contract's `colors`, `spacing`, `rounded`, and `typography`; they export to the generated token layer (with a hand-authored local token layer beside it). No component or section may re-encode a token value.
-- **Framework-agnostic CSS components** — the brand/display CSS components that remain in this package (the agent-chat family, the run-state `state-tag` family, the entity-status `status-tag` family, `image`, and the small label/badge/link metadata components). Their names and semantics live once in `## Components`; design-system CSS realises that catalog without a second recipe or component-token hierarchy.
+- **Framework-agnostic CSS components** — the brand/display CSS components that remain in this package (agent-work artifacts, the run-state `state-tag` family, the entity-status `status-tag` family, `image`, and the small label/badge/link metadata components). Their names and semantics live once in `## Components`; design-system CSS realises that catalog without a second recipe or component-token hierarchy.
 - **Reusable compositions and sections** — patterns that arrange the page grammar and lower tiers for a content role. They ship as React shadcn compositions from `@nadicodeai/ui`, composed over the kept page grammar; they are not a pure-CSS section layer and do not add a second component catalog here.
 - **Layout grammar** — the page-frame, row, lane, seam, stage, and marker system documented across this `## Layout` section, carried by the layout CSS layer.
 - **Specimens** — static demonstrations of already-defined primitives. They invent no geometry, seams, heights, or responsive behavior; they only assemble shipped tiers for inspection.
@@ -563,7 +563,7 @@ On coarse or non-hover input capability, every interactive target is at least 44
 Corners are restrained and assigned by material role.
 
 - Use `{rounded.none}` for page rows, frame edges, grid cells, and structural modules.
-- Use `{rounded.md}` (6 px) for resting content surfaces, controls, buttons, chips, status tags, tooltips, chat bubbles, and small artifacts.
+- Use `{rounded.md}` (6 px) for resting content surfaces, controls, buttons, chips, status tags, tooltips, and small artifacts.
 - Use `{rounded.2xl}` (12 px) for menus, popovers, and dialogs.
 - Use `{rounded.3xl}` (16 px) for inset sheets and takeovers.
 - Use `{rounded.full}` only for intrinsically circular identity/avatar chrome and compact control marks whose geometry is inherently round or pill-shaped. It never turns a content surface, button, badge, or navigation item into a pill by default.
@@ -596,15 +596,13 @@ Interactive CSS components must expose a visible `:focus-visible` state using th
 
 Content surfaces display specific content types inside the grammar. They are valid when the content exists; they do not replace the page frame, row model, or seam rules.
 
-**`image`** — editorial media mount, the single home for art-directed imagery inside the grammar. A bounded media fill (img, picture, video, or inline SVG) with an optional mono tag chip overlaid on the media and an optional body-tone caption bar below it, both typed by the generated caption utilities applied in markup. Square-cornered (`{rounded.none}`): a mounted print, not a floating card — the parent frame supplies the visual system. With `data-frame="true"` it draws exactly one hairline (its own `{colors.line}` border), so it sits inside a borderless `panel-cell` or a visual slot without repairing or stacking onto any grid seam. The aspect ratio is the per-instance `--nc-image-ratio` knob (default 4 / 3) — set the prop on the element, never re-derive geometry inline. Variant: `data-strip="true"` is the full-width divider form for thin editorial bands between page rows (thread, texture, panorama) — the ratio unlocks and the height resolves from the responsive `{spacing.h-strip-*}` tokens through the layout-layer collapsed alias. Use `image` for every illustrated image, photographic surface, or image divider; use `artifact-preview` when the visual is an agent-produced document surface.
+**`image`** — editorial media mount, the single home for art-directed imagery inside the grammar. A bounded media fill (img, picture, video, or inline SVG) with an optional mono tag chip overlaid on the media and an optional body-tone caption bar below it, both typed by the generated caption utilities applied in markup. Square-cornered (`{rounded.none}`): a mounted print, not a floating card — the parent frame supplies the visual system. With `data-frame="true"` it draws exactly one hairline (its own `{colors.line}` border), so it sits inside a borderless `panel-cell` or a visual slot without repairing or stacking onto any grid seam. The aspect ratio is the per-instance `--nc-image-ratio` knob (default 4 / 3) — set the prop on the element, never re-derive geometry inline. Variant: `data-strip="true"` is the full-width divider form for thin editorial bands between page rows (thread, texture, panorama) — the ratio unlocks and the height resolves from the responsive `{spacing.h-strip-*}` tokens through the layout-layer collapsed alias. Use `image` for every illustrated image, photographic surface, or image divider. Conversation artifacts render through assistant-ui rather than a design-system CSS family.
 
 ### Agentic Work Surfaces
 
-Agentic work surfaces are the NadicodeAI-specific layer. They show people and agents working together through conversations, artifacts, approvals, memory, state, tools, and handoffs. Use these when there is concrete work output or workflow state to inspect.
+Agentic work surfaces are the NadicodeAI-specific display layer outside the conversation renderer. They show concrete work output or workflow state such as memory, state, run progress, identity, and handoffs. Conversation messages, tools, artifacts, approvals, and pending indicators belong to assistant-ui.
 
-**`artifact-surface`** — inspectable output area. Use for proposal previews, reports, plans, spreadsheets, schedules, approval states, source traces, run logs, workflow maps, and conversation artifacts.
-
-**`artifact-preview`** — compact inspectable artifact card for an agent-produced document, sheet, report, or code excerpt. The header identifies the artifact kind and the body carries the preview; use `artifact-surface` for a larger work area.
+**`artifact-surface`** — inspectable output area outside a conversation. Use for proposal previews, reports, plans, spreadsheets, schedules, run logs, and workflow maps.
 
 Status-tag variants share the same compact sans rectangle at `{typography.caption-strong}`, `{rounded.md}` — a small subtle-tinted rectangle, never a capsule — and differentiate by tone: a paired background+text ramp step, not a border-left rail. Tone is `[data-tone]`, not BEM modifiers. Gray is the default tone; color is reserved for marking health and exceptions, so every terminal or no-action entity status (inactive, archived, rejected, canceled, expired, revoked, denied) renders gray. Subtle-only (no solid/filled variant), no icons inside the badge, no text-transform; labels render verbatim from the source's own i18n dictionary. `status-tag` is the entity-status vocabulary — agent, credential, activation, customer, invitation, subscription, and health values that live on a record — and stays a sibling of `state-tag`: the two families never blend, and `status-tag` never touches the `{colors.state-*}` tokens.
 
@@ -618,14 +616,6 @@ Status-tag variants share the same compact sans rectangle at `{typography.captio
 
 **`status-tag-blue`** — an in-progress, pending, or trial entity status still moving toward a resolution.
 
-**`chat-thread`** — conversation container showing how people instruct, correct, review, or approve agents. Static markup always renders the complete conversation. The package's optional `chat-autoplay.js` progressive enhancer activates only on `data-nc-autoplay`, reveals messages in order while keeping the newest turn visible, loops while the thread is in view, and injects its own pause/resume control. It shows the complete thread immediately when reduced motion is requested. Consumers never author the enhancer control in static markup.
-
-**`chat-bubble-user`** — human message bubble. Dark surface, white text.
-
-**`chat-bubble-agent`** — agent message bubble. Light surface, ink text.
-
-**`tool-call-trace`** — compact code/trace row. Use only when tool use is relevant to the explanation.
-
 State-tag variants share the same compact rectangular shape at `{typography.caption-mono}` and differentiate by a 3 px colored `border-left` consuming the matching `{colors.state-*}` token. Shape carries meaning; color carries variant.
 
 **`state-tag-ready`** — workflow state tag for work that is ready or waiting to start. Uses `{colors.state-ready}` for the left edge.
@@ -640,12 +630,6 @@ State-tag variants share the same compact rectangular shape at `{typography.capt
 
 **`state-row`** — full-width workflow-state divider inside an agentic work surface. Its bounded hairlines belong to the row and its dot consumes the same state token as the matching `state-tag` variant.
 
-**`typing-dots`** — compact agent typing indicator. It uses the agent accent rail and the shared motion hooks; reduced-motion behavior comes from the package motion layer.
-
-**`approval-gate`** — human-in-the-loop pause surface. Use when an agent action requires explicit review, correction, approval, or rejection.
-
-**`agent-avatar`** — identity slot for an agent personality or role. The chrome is reusable; the visual asset is project-specific.
-
 **`usage-meter`** — token, cost, latency, or run-count display.
 
 **`run-timeline`** — vertical step thread for an agent run, handoff, or workflow execution.

package/README.md

@@ -84,14 +84,6 @@ Consumer overrides belong in an explicit later layer:
 
 The exact layer order and ownership rules are defined in `DESIGN.md`.
 
-### Optional chat auto-play
-
-Static chat markup needs no JavaScript. To opt a `data-nc-autoplay` thread into
-progressive playback, include the public
-`@nadicodeai/design-system/css/chat-autoplay.js` export. The `chat-thread`
-entry in [`DESIGN.md`](./DESIGN.md#agentic-work-surfaces) owns the behavior and
-accessibility contract.
-
 ### Worked example (static HTML)
 
 ```html
@@ -109,26 +101,13 @@ accessibility contract.
       <div class="nc-page-frame">
         <section class="nc-page-row">
           <div class="nc-row-lane nc-row-lane-active">
-            <!-- A playing chat thread: opt in with data-nc-autoplay -->
-            <div class="nc-chat-thread" data-nc-autoplay>
-              <div class="nc-chat-thread-body">
-                <div class="nc-chat-bubble-user">Which contract template should I use?</div>
-                <div class="nc-chat-bubble-agent" data-accent="green">
-                  Use the approved 2026 revision in Drive · Legal · Templates. It already has the updated privacy clauses.
-                </div>
-              </div>
-            </div>
+            <div class="nc-artifact-surface">Inspectable agent output</div>
           </div>
         </section>
       </div>
     </main>
-
-    <!-- Optional: omit this script and the thread above stays a full static conversation. -->
-    <script src="https://unpkg.com/@nadicodeai/design-system/css/chat-autoplay.js"></script>
   </body>
 </html>
 ```
 
-`examples/chat-showcase.html` is the live proof page for the chat CSS components and auto-play enhancer.
-
 Use the monorepo's `brand/brand-book/` for NadicodeAI story, positioning, buyer, promise, method, use cases, technology story, trust doctrine, identity, voice, visual direction, sales behavior, language, and boundaries.

package/dist/css/index.css

@@ -1753,265 +1753,6 @@
   }
 }
 
-/* src/css/components/chat-thread.css */
-@layer components {
-  .nc-chat-thread {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    border: var(--nc-guide) solid var(--nc-line);
-    border-radius: var(--nc-rounded-md);
-    background: var(--nc-canvas);
-    color: var(--nc-ink);
-    font-family:
-      "Geist",
-      "Inter",
-      system-ui,
-      -apple-system,
-      "Segoe UI",
-      sans-serif;
-  }
-  .nc-chat-thread-header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 14px 16px;
-    border-bottom: var(--nc-guide) solid var(--nc-line);
-    background: var(--nc-canvas);
-  }
-  .nc-chat-thread-domain {
-    font-family:
-      "Geist Mono",
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      monospace;
-    font-size: 11px;
-    font-weight: 500;
-    line-height: 16px;
-    color: var(--nc-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .nc-chat-thread-identity {
-    min-width: 0;
-    flex: 1;
-  }
-  .nc-chat-thread-name {
-    display: flex;
-    align-items: baseline;
-    gap: 6px;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    color: var(--nc-ink);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .nc-chat-thread-name .nc-chat-thread-role {
-    min-width: 0;
-    overflow: hidden;
-    font-weight: 400;
-    color: var(--nc-muted);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .nc-chat-thread-workflow {
-    flex: 0 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    font-family:
-      "Geist Mono",
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      monospace;
-    font-size: 11px;
-    line-height: 16px;
-    color: var(--nc-body);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .nc-chat-thread-body {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden auto;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 16px 18px;
-    background: radial-gradient(var(--nc-line) 0.8px, transparent 0.8px) 8px 8px / 12px 12px, var(--nc-canvas);
-  }
-  .nc-chat-pause {
-    display: block;
-    align-self: flex-end;
-    margin: var(--nc-xs) var(--nc-xs) 0;
-    padding: var(--nc-xs) var(--nc-sm);
-    background: var(--nc-canvas);
-    color: var(--nc-muted);
-    border: var(--nc-guide) solid var(--nc-line);
-    border-radius: var(--nc-rounded-xs);
-    font-family: var(--nc-type-caption-mono-font-family);
-    font-size: var(--nc-type-caption-mono-font-size);
-    font-weight: var(--nc-type-caption-mono-font-weight);
-    line-height: var(--nc-type-caption-mono-line-height);
-    letter-spacing: var(--nc-type-caption-mono-letter-spacing);
-    cursor: pointer;
-    transition:
-      background-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
-      border-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
-      color var(--nc-duration-confirm) var(--nc-ease-out-strong),
-      opacity var(--nc-duration-confirm) var(--nc-ease-out-strong);
-  }
-  @media (hover: hover) and (pointer: fine) {
-    .nc-chat-pause:hover {
-      color: var(--nc-ink);
-      border-color: var(--nc-body);
-    }
-  }
-  .nc-chat-pause[aria-pressed=true] {
-    color: var(--nc-ink);
-    border-color: var(--nc-body);
-  }
-  .nc-chat-pause:active {
-    opacity: 0.9;
-  }
-  .nc-chat-thread-footer {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 10px 16px;
-    border-top: var(--nc-guide) solid var(--nc-line);
-    background: var(--nc-canvas);
-  }
-}
-
-/* src/css/components/chat-bubble-user.css */
-@layer components {
-  .nc-chat-bubble-user {
-    align-self: flex-end;
-    width: fit-content;
-    max-width: 84%;
-    padding: 9px 13px;
-    border: var(--nc-guide) solid var(--nc-ink);
-    border-radius: var(--nc-rounded-md);
-    background: var(--nc-ink);
-    color: var(--nc-canvas);
-    font-family:
-      "Geist",
-      "Inter",
-      system-ui,
-      -apple-system,
-      "Segoe UI",
-      sans-serif;
-    font-size: 14px;
-    line-height: 20px;
-    white-space: pre-wrap;
-    word-break: break-word;
-    animation-name: nc-msg-in;
-  }
-}
-
-/* src/css/components/chat-bubble-agent.css */
-@layer components {
-  .nc-chat-bubble-agent {
-    --nc-accent: var(--nc-link);
-    align-self: flex-start;
-    width: fit-content;
-    max-width: 84%;
-    padding: 9px 13px 9px 15px;
-    border: var(--nc-guide) solid var(--nc-line);
-    border-radius: var(--nc-rounded-md);
-    box-shadow: inset 3px 0 0 0 var(--nc-accent);
-    background: var(--nc-canvas);
-    color: var(--nc-ink);
-    font-family:
-      "Geist",
-      "Inter",
-      system-ui,
-      -apple-system,
-      "Segoe UI",
-      sans-serif;
-    font-size: 14px;
-    line-height: 20px;
-    white-space: pre-wrap;
-    word-break: break-word;
-    animation-name: nc-msg-in;
-  }
-  .nc-chat-bubble-agent[data-accent=green] {
-    --nc-accent: var(--nc-link);
-  }
-  .nc-chat-bubble-agent[data-accent=cyan] {
-    --nc-accent: var(--nc-info);
-  }
-  .nc-chat-bubble-agent[data-accent=amber] {
-    --nc-accent: var(--nc-warning-deep);
-  }
-  .nc-chat-bubble-agent[data-accent=ink] {
-    --nc-accent: var(--nc-ink);
-  }
-  .nc-chat-bubble-agent[data-accent=red] {
-    --nc-accent: var(--nc-error);
-  }
-  .nc-chat-bubble-agent code {
-    padding: 1px 5px;
-    border-radius: var(--nc-rounded-xs);
-    background: var(--nc-canvas-soft-2);
-    color: var(--nc-ink);
-    font-family:
-      "Geist Mono",
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      monospace;
-    font-size: 12px;
-  }
-}
-
-/* src/css/components/tool-call-trace.css */
-@layer components {
-  .nc-tool-call-trace {
-    align-self: flex-start;
-    width: fit-content;
-    max-width: 92%;
-    padding: 6px 10px;
-    border: var(--nc-guide) solid var(--nc-line);
-    border-radius: var(--nc-rounded-sm);
-    background: var(--nc-canvas-soft-2);
-    color: var(--nc-body);
-    font-family:
-      "Geist Mono",
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      monospace;
-    font-size: 12px;
-    line-height: 17px;
-    animation-name: nc-msg-in;
-  }
-  .nc-tool-call-trace::before {
-    content: "";
-    display: inline-block;
-    width: 13px;
-    height: 13px;
-    margin-right: 8px;
-    vertical-align: -2px;
-    background-color: var(--nc-muted);
-    -webkit-mask: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-chevron-right"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="m9 18 6-6-6-6" />%0A</svg>%0A') center / contain no-repeat;
-    mask: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-chevron-right"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="m9 18 6-6-6-6" />%0A</svg>%0A') center / contain no-repeat;
-  }
-}
-
 /* src/css/components/memory-item.css */
 @layer components {
   .nc-memory-item {
@@ -2091,241 +1832,6 @@
   }
 }
 
-/* src/css/components/approval-gate.css */
-@layer components {
-  .nc-approval-gate {
-    align-self: stretch;
-    display: grid;
-    gap: 6px;
-    padding: 12px;
-    border: var(--nc-guide) solid color-mix(in srgb, var(--nc-warning-deep) 40%, var(--nc-warning-soft));
-    border-radius: var(--nc-rounded-md);
-    background: var(--nc-warning-soft);
-    color: var(--nc-ink);
-    font-family:
-      "Geist",
-      "Inter",
-      system-ui,
-      -apple-system,
-      "Segoe UI",
-      sans-serif;
-    animation-name: nc-msg-in;
-    transition:
-      background-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
-      border-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
-      color var(--nc-duration-confirm) var(--nc-ease-out-strong);
-  }
-  .nc-approval-gate-label {
-    font-family:
-      "Geist Mono",
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      monospace;
-    font-size: 10px;
-    font-weight: 600;
-    line-height: 16px;
-    color: var(--nc-warning-deep);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-  }
-  .nc-approval-gate-title {
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    color: var(--nc-ink);
-  }
-  .nc-approval-gate-copy {
-    font-size: 13px;
-    line-height: 18px;
-    color: var(--nc-body);
-  }
-  .nc-approval-gate-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    margin-top: 2px;
-  }
-  .nc-approval-gate-actions button {
-    padding: 5px 10px;
-    border: var(--nc-guide) solid var(--nc-ink);
-    border-radius: var(--nc-rounded-sm);
-    background: var(--nc-ink);
-    color: var(--nc-canvas);
-    font-family: inherit;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-    cursor: pointer;
-  }
-  .nc-approval-gate-actions button[data-variant=secondary] {
-    border-color: var(--nc-line);
-    background: var(--nc-canvas);
-    color: var(--nc-ink);
-  }
-  .nc-approval-gate-actions button[data-variant=outline] {
-    border-color: var(--nc-line);
-    background: transparent;
-    color: var(--nc-ink);
-  }
-  .nc-approval-gate-actions button[data-variant=destructive] {
-    border-color: var(--nc-error);
-    background: var(--nc-canvas);
-    color: var(--nc-error-deep);
-  }
-  .nc-approval-gate-actions button::before {
-    content: "";
-    display: inline-block;
-    width: 13px;
-    height: 13px;
-    margin-right: 5px;
-    vertical-align: -2px;
-    background-color: currentColor;
-    -webkit-mask: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-check"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="M20 6 9 17l-5-5" />%0A</svg>%0A') center / contain no-repeat;
-    mask: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-check"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="M20 6 9 17l-5-5" />%0A</svg>%0A') center / contain no-repeat;
-  }
-  .nc-approval-gate-actions button[data-variant=secondary]::before {
-    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-square-pen"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />%0A  <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" />%0A</svg>%0A');
-    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-square-pen"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />%0A  <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" />%0A</svg>%0A');
-  }
-  .nc-approval-gate-actions button[data-approval-choice=deny]::before {
-    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-ban"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <circle cx="12" cy="12" r="10" />%0A  <path d="M4.929 4.929 19.07 19.071" />%0A</svg>%0A');
-    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-ban"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <circle cx="12" cy="12" r="10" />%0A  <path d="M4.929 4.929 19.07 19.071" />%0A</svg>%0A');
-  }
-  .nc-approval-gate-actions button[data-approval-choice=session]::before {
-    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-clock"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <circle cx="12" cy="12" r="10" />%0A  <path d="M12 6v6l4 2" />%0A</svg>%0A');
-    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-clock"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <circle cx="12" cy="12" r="10" />%0A  <path d="M12 6v6l4 2" />%0A</svg>%0A');
-  }
-  .nc-approval-gate-actions button[data-approval-choice=always]::before {
-    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-shield"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <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" />%0A</svg>%0A');
-    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-shield"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <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" />%0A</svg>%0A');
-  }
-  .nc-approval-gate-actions button:focus-visible {
-    outline: var(--nc-focus-ring-width) solid var(--nc-focus-ring);
-    outline-offset: 0;
-  }
-}
-
-/* src/css/components/artifact-preview.css */
-@layer components {
-  .nc-artifact-preview {
-    align-self: stretch;
-    overflow: hidden;
-    border: var(--nc-guide) solid var(--nc-line);
-    border-radius: var(--nc-rounded-md);
-    background: var(--nc-canvas);
-    font-family:
-      "Geist",
-      "Inter",
-      system-ui,
-      -apple-system,
-      "Segoe UI",
-      sans-serif;
-    animation-name: nc-msg-in;
-  }
-  .nc-artifact-preview-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 7px 10px;
-    border-bottom: var(--nc-guide) solid var(--nc-line);
-    background: var(--nc-canvas-soft);
-  }
-  .nc-artifact-preview-header::before {
-    content: "";
-    flex: none;
-    width: 14px;
-    height: 14px;
-    background-color: var(--nc-muted);
-    -webkit-mask: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-file-text"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />%0A  <path d="M14 2v5a1 1 0 0 0 1 1h5" />%0A  <path d="M10 9H8" />%0A  <path d="M16 13H8" />%0A  <path d="M16 17H8" />%0A</svg>%0A') center / contain no-repeat;
-    mask: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-file-text"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />%0A  <path d="M14 2v5a1 1 0 0 0 1 1h5" />%0A  <path d="M10 9H8" />%0A  <path d="M16 13H8" />%0A  <path d="M16 17H8" />%0A</svg>%0A') center / contain no-repeat;
-  }
-  .nc-artifact-preview[data-kind=sheet] .nc-artifact-preview-header::before {
-    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-table"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="M12 3v18" />%0A  <rect width="18" height="18" x="3" y="3" rx="2" />%0A  <path d="M3 9h18" />%0A  <path d="M3 15h18" />%0A</svg>%0A');
-    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-table"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="M12 3v18" />%0A  <rect width="18" height="18" x="3" y="3" rx="2" />%0A  <path d="M3 9h18" />%0A  <path d="M3 15h18" />%0A</svg>%0A');
-  }
-  .nc-artifact-preview[data-kind=code] .nc-artifact-preview-header::before {
-    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-code"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="m16 18 6-6-6-6" />%0A  <path d="m8 6-6 6 6 6" />%0A</svg>%0A');
-    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-code"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="m16 18 6-6-6-6" />%0A  <path d="m8 6-6 6 6 6" />%0A</svg>%0A');
-  }
-  .nc-artifact-preview[data-kind=pdf] .nc-artifact-preview-header::before {
-    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-file"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />%0A  <path d="M14 2v5a1 1 0 0 0 1 1h5" />%0A</svg>%0A');
-    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-file"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />%0A  <path d="M14 2v5a1 1 0 0 0 1 1h5" />%0A</svg>%0A');
-  }
-  .nc-artifact-preview[data-kind=report] .nc-artifact-preview-header::before {
-    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-chart-column"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="M3 3v16a2 2 0 0 0 2 2h16" />%0A  <path d="M18 17V9" />%0A  <path d="M13 17V5" />%0A  <path d="M8 17v-3" />%0A</svg>%0A');
-    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.21.0 - ISC -->%0A<svg%0A  class="lucide lucide-chart-column"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.6"%0A  stroke-linecap="round"%0A  stroke-linejoin="round"%0A>%0A  <path d="M3 3v16a2 2 0 0 0 2 2h16" />%0A  <path d="M18 17V9" />%0A  <path d="M13 17V5" />%0A  <path d="M8 17v-3" />%0A</svg>%0A');
-  }
-  .nc-artifact-preview-title {
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 18px;
-    color: var(--nc-ink);
-  }
-  .nc-artifact-preview-kind {
-    margin-left: auto;
-    font-family:
-      "Geist Mono",
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      monospace;
-    font-size: 10px;
-    font-weight: 500;
-    line-height: 16px;
-    color: var(--nc-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-  .nc-artifact-preview-body {
-    padding: 10px 12px;
-    color: var(--nc-body);
-    font-size: 13px;
-    line-height: 18px;
-    white-space: pre-wrap;
-  }
-}
-
-/* src/css/components/typing-dots.css */
-@layer components {
-  .nc-typing-dots {
-    --nc-accent: var(--nc-link);
-    align-self: flex-start;
-    display: inline-flex;
-    gap: 4px;
-    align-items: center;
-    width: fit-content;
-    padding: 10px 14px 10px 15px;
-    border: var(--nc-guide) solid var(--nc-line);
-    border-radius: var(--nc-rounded-md);
-    box-shadow: inset 3px 0 0 0 var(--nc-accent);
-    background: var(--nc-canvas);
-  }
-  .nc-typing-dots[data-accent=green] {
-    --nc-accent: var(--nc-link);
-  }
-  .nc-typing-dots[data-accent=cyan] {
-    --nc-accent: var(--nc-info);
-  }
-  .nc-typing-dots[data-accent=amber] {
-    --nc-accent: var(--nc-warning-deep);
-  }
-  .nc-typing-dots[data-accent=ink] {
-    --nc-accent: var(--nc-ink);
-  }
-  .nc-typing-dots[data-accent=red] {
-    --nc-accent: var(--nc-error);
-  }
-  .nc-typing-dots-dot {
-    width: 5px;
-    height: 5px;
-    border-radius: var(--nc-rounded-full);
-    background: var(--nc-muted);
-  }
-}
-
 /* src/css/components/state-row.css */
 @layer components {
   .nc-state-row {
@@ -2384,55 +1890,6 @@
   }
 }
 
-/* src/css/components/agent-avatar.css */
-@layer components {
-  .nc-agent-avatar {
-    --nc-accent: var(--nc-line);
-    display: grid;
-    place-items: center;
-    width: 32px;
-    height: 32px;
-    overflow: hidden;
-    border: var(--nc-guide) solid var(--nc-accent);
-    border-radius: var(--nc-rounded-full);
-    background: var(--nc-canvas-soft);
-    color: var(--nc-ink);
-    font-family:
-      "Geist Mono",
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      monospace;
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 1;
-    letter-spacing: 0.02em;
-  }
-  .nc-agent-avatar img,
-  .nc-agent-avatar svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .nc-agent-avatar[data-accent=green] {
-    --nc-accent: var(--nc-link);
-  }
-  .nc-agent-avatar[data-accent=cyan] {
-    --nc-accent: var(--nc-info);
-  }
-  .nc-agent-avatar[data-accent=amber] {
-    --nc-accent: var(--nc-warning-deep);
-  }
-  .nc-agent-avatar[data-accent=ink] {
-    --nc-accent: var(--nc-ink);
-  }
-  .nc-agent-avatar[data-accent=red] {
-    --nc-accent: var(--nc-error);
-  }
-}
-
 /* src/css/components/usage-meter.css */
 @layer components {
   .nc-usage-meter {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -12,7 +12,6 @@
     "./tokens/dtcg": "./dist/tokens/nadicode.dtcg.json",
     "./tailwind": "./dist/tailwind/nadicode.tailwind.json",
     "./css": "./dist/css/index.css",
-    "./css/chat-autoplay.js": "./dist/css/chat-autoplay.js",
     "./icons/*": "./dist/icons/*",
     "./favicon/*": "./dist/favicon/*",
     "./assets/logo-mark": {

package/dist/css/chat-autoplay.js

@@ -1,537 +0,0 @@
-/*
- * chat-autoplay.js — the single optional vanilla enhancer for NadicodeAI chat
- * threads. The ONLY JavaScript in @nadicodeai/design-system.
- *
- * It is pure progressive enhancement, framework-free, dependency-free, with no
- * module-loader statements and no third-party runtime. It turns an
- * already-static `.nc-chat-thread` into an auto-playing, looping agent
- * conversation.
- *
- * Runtime behavior:
- *
- *  (a) Motion on: messages are hidden, then revealed in scripted source order by
- *      toggling the `.nc-anim-msg-in` hook (the rise-in). A typing indicator
- *      (`.nc-typing-dots`) shows between turns, the thread body auto-scrolls to
- *      the newest message, the `.nc-usage-meter-fill` is driven via `--nc-usage`,
- *      and after `LOOP_HOLD` the cycle restarts.
- *
- *  (b) `prefers-reduced-motion: reduce`: the FULL thread is shown immediately,
- *      every message visible, NO loop, no typing animation. (We also stop if the
- *      preference changes to reduce mid-play.)
- *
- *  (c) Script absent: the conversation renders FULLY and statically from CSS
- *      alone. The atoms set `animation-name: nc-msg-in` but, without the
- *      `.nc-anim-msg-in` hook supplying a duration, that is inert and every
- *      message is visible. This file is the ONLY thing that ever hides a message
- *      (via the per-element inline `display` it sets while playing). No hidden
- *      class is ever present in static markup, so no-JS == full static thread.
- *
- *  (d) Playback starts on scroll-into-view via `IntersectionObserver`; it pauses
- *      (resets to the static full thread and re-arms) when scrolled fully out.
- *
- * Timing parity with `src/css/motion.css`: the loop reads the duration token
- * (`--nc-duration-stagger`) from the thread's computed style and uses the
- * per-role `defaultTiming()` rhythm below. The stagger unit comes from CSS, not
- * a re-typed magic number; this module owns the sequencing cadence because it
- * is runtime behavior rather than a reusable visual token.
- *
- * Opt-in: only `.nc-chat-thread[data-nc-autoplay]` elements are enhanced. A
- * thread without the attribute is left fully static.
- *
- * Usage (no bundler assumed):
- *   <script src="…/css/chat-autoplay.js"></script>
- * It self-initializes on DOMContentLoaded and also exposes
- * `window.ncChatAutoplay.init(root?)` for manual / dynamic init.
- */
-(function () {
-  "use strict";
-
-  if (typeof window === "undefined" || typeof document === "undefined") return;
-
-  // The CSS token owns visual stagger. These values own runtime sequencing.
-  var LOOP_HOLD = 6000; // Keep the completed state visible for most of the loop.
-  var START_DELAY = 240;
-
-  function defaultTiming(role, textLen) {
-    var len = textLen || 0;
-    switch (role) {
-      case "user":
-        return { typingMs: 0, holdMs: 1100 + len * 8 };
-      case "tool":
-        return { typingMs: 380, holdMs: 700 };
-      case "state":
-        return { typingMs: 220, holdMs: 700 };
-      case "memory":
-        return { typingMs: 380, holdMs: 900 };
-      case "handoff":
-        return { typingMs: 420, holdMs: 1300 };
-      case "approval":
-        return { typingMs: 460, holdMs: 1600 };
-      case "artifact":
-        return { typingMs: 600, holdMs: 1800 };
-      case "agent":
-      default:
-        return { typingMs: 680, holdMs: 900 + len * 12 };
-    }
-  }
-
-  // Infer a message's role from its NadicodeAI atom class so authors don't have
-  // to duplicate the role in a data attribute. An explicit `data-nc-role`
-  // overrides. Falls back to "agent" (the slowest, safest cadence).
-  var ROLE_BY_CLASS = [
-    ["nc-chat-bubble-user", "user"],
-    ["nc-chat-bubble-agent", "agent"],
-    ["nc-tool-call-trace", "tool"],
-    ["nc-memory-item", "memory"],
-    ["nc-handoff-banner", "handoff"],
-    ["nc-approval-gate", "approval"],
-    ["nc-artifact-preview", "artifact"],
-    ["nc-state-row", "state"],
-  ];
-
-  function roleOf(el) {
-    var explicit = el.getAttribute("data-nc-role");
-    if (explicit) return explicit;
-    for (var i = 0; i < ROLE_BY_CLASS.length; i++) {
-      if (el.classList.contains(ROLE_BY_CLASS[i][0])) return ROLE_BY_CLASS[i][1];
-    }
-    return "agent";
-  }
-
-  function reducedMotion() {
-    return (
-      typeof window.matchMedia === "function" &&
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches
-    );
-  }
-
-  // Read a duration token (e.g. "--nc-duration-stagger") off a live element and
-  // return milliseconds. Falls back to a documented default that equals the
-  // motion.css value if the bundle is not loaded (graceful, never throws).
-  function durationToken(el, name, fallbackMs) {
-    var raw = getComputedStyle(el).getPropertyValue(name).trim();
-    if (!raw) return fallbackMs;
-    if (raw.slice(-2) === "ms") return parseFloat(raw) || fallbackMs;
-    if (raw.slice(-1) === "s") return (parseFloat(raw) || 0) * 1000 || fallbackMs;
-    var n = parseFloat(raw);
-    return isNaN(n) ? fallbackMs : n;
-  }
-
-  // ── One thread's player ───────────────────────────────────────────────────
-  function ChatThreadPlayer(thread) {
-    this.thread = thread;
-    this.body = thread.querySelector(".nc-chat-thread-body");
-    // Stable, source-ordered list of message atoms inside the body. The typing
-    // indicator and any element flagged to ignore are NOT messages.
-    this.messages = this.body
-      ? Array.prototype.filter.call(this.body.children, function (el) {
-          return (
-            el.nodeType === 1 &&
-            !el.classList.contains("nc-typing-dots") &&
-            el.getAttribute("data-nc-autoplay-ignore") === null
-          );
-        })
-      : [];
-    this.typing = this.body ? this.body.querySelector(".nc-typing-dots") : null;
-    this.meterFill = thread.querySelector(".nc-usage-meter-fill");
-    this.staggerMs = 160; // overwritten from the CSS token at enhance()
-    this.timers = [];
-    this.running = false;
-    this.cancelled = false;
-    // Monotonic loop epoch. `_runLoop` captures the value live at start and every
-    // guard checks it. `stop()`/`rearm()` bump it so a stale continuation — a
-    // `_sleep` timer that already fired but whose `.then` is still queued when the
-    // player is stopped and immediately re-armed on scroll-in — sees a mismatched
-    // epoch and dies permanently, instead of resuming once `cancelled` flips back
-    // to false and racing the fresh loop. Single, uninterrupted playback never
-    // changes the epoch mid-run, so the observed sequence is unchanged.
-    this.generation = 0;
-    // WCAG 2.2.2 user-pause latch. Set true when the user presses the pause button;
-    // cleared when the user presses resume. play() and the in-view observer branch
-    // both check it; a paused thread stays paused across scroll-out/in.
-    this.userPaused = false;
-    // Set to true once the sequence has reached its end at least once. Used by
-    // the IntersectionObserver entry branch: a thread that has completed is shown
-    // in its final visible state on re-entry rather than replayed from blank, so
-    // a reader who scrolls back sees the payoff frame instead of an empty/typing state.
-    this.completedOnce = false;
-    // Accent for an auto-created typing bubble, inferred from the first agent
-    // bubble's data-accent (default green, matching the prototype).
-    this.accent = "green";
-    var firstAgent = thread.querySelector(".nc-chat-bubble-agent[data-accent]");
-    if (firstAgent) this.accent = firstAgent.getAttribute("data-accent") || "green";
-  }
-
-  ChatThreadPlayer.prototype._clearTimers = function () {
-    for (var i = 0; i < this.timers.length; i++) clearTimeout(this.timers[i]);
-    this.timers = [];
-  };
-
-  ChatThreadPlayer.prototype._sleep = function (ms) {
-    var timers = this.timers;
-    return new Promise(function (resolve) {
-      var t = setTimeout(resolve, ms);
-      timers.push(t);
-    });
-  };
-
-  // Fully static, fully visible end-state. Used for no-loop (reduced-motion),
-  // for pause-out-of-view, and as the baseline each loop resets from. Removes
-  // every trace the player added so the DOM matches the no-JS static thread.
-  ChatThreadPlayer.prototype._showAll = function () {
-    for (var i = 0; i < this.messages.length; i++) {
-      var m = this.messages[i];
-      m.style.display = "";
-      m.classList.remove("nc-anim-msg-in");
-    }
-    this._hideTyping();
-    this.thread.removeAttribute("data-nc-playing");
-  };
-
-  ChatThreadPlayer.prototype._hideAllMessages = function () {
-    for (var i = 0; i < this.messages.length; i++) {
-      this.messages[i].style.display = "none";
-      this.messages[i].classList.remove("nc-anim-msg-in");
-    }
-  };
-
-  ChatThreadPlayer.prototype._scrollToBottom = function () {
-    var body = this.body;
-    if (!body) return;
-    requestAnimationFrame(function () {
-      body.scrollTop = body.scrollHeight;
-    });
-  };
-
-  // Ensure a typing indicator exists; create one if the markup has none so the
-  // "typing between turns" behaviour works on any thread. Created element is
-  // tagged so _showAll can drop it.
-  ChatThreadPlayer.prototype._ensureTyping = function () {
-    if (this.typing) return this.typing;
-    if (!this.body) return null;
-    var el = document.createElement("div");
-    el.className = "nc-typing-dots";
-    el.setAttribute("data-accent", this.accent);
-    el.setAttribute("aria-hidden", "true");
-    el.setAttribute("data-nc-autoplay-created", "");
-    for (var i = 0; i < 3; i++) {
-      var dot = document.createElement("span");
-      dot.className = "nc-typing-dots-dot nc-anim-typing";
-      dot.style.setProperty("--nc-anim-delay", i * this.staggerMs + "ms");
-      el.appendChild(dot);
-    }
-    el.style.display = "none";
-    this.body.appendChild(el);
-    this.typing = el;
-    return el;
-  };
-
-  ChatThreadPlayer.prototype._showTyping = function () {
-    var el = this._ensureTyping();
-    if (!el) return;
-    // Move the indicator to the end of the body so it sits below revealed turns.
-    this.body.appendChild(el);
-    el.style.display = "";
-    this._scrollToBottom();
-  };
-
-  ChatThreadPlayer.prototype._hideTyping = function () {
-    if (this.typing) this.typing.style.display = "none";
-  };
-
-  ChatThreadPlayer.prototype._setMeter = function (fraction) {
-    if (!this.meterFill) return;
-    var pct = Math.max(0, Math.min(1, fraction)) * 100;
-    this.meterFill.style.setProperty("--nc-usage", pct + "%");
-  };
-
-  ChatThreadPlayer.prototype._reveal = function (msg, index) {
-    msg.style.display = "";
-    // Re-trigger the rise-in: the hook supplies duration/easing; the atom
-    // already carries `animation-name: nc-msg-in`. Force a reflow so re-adding
-    // the class restarts the animation on a re-loop.
-    msg.style.setProperty("--nc-anim-delay", "0ms");
-    msg.classList.remove("nc-anim-msg-in");
-    void msg.offsetWidth;
-    msg.classList.add("nc-anim-msg-in");
-    this._setMeter((index + 1) / this.messages.length);
-    this._scrollToBottom();
-  };
-
-  // A loop is "stale" once it is cancelled OR a newer epoch has started; either
-  // way it must stop touching the DOM. `myGen` is captured once at start so a queued
-  // continuation can detect that the player was stopped-and-re-armed underneath
-  // it (see the `generation` note in the constructor).
-  ChatThreadPlayer.prototype._runLoop = function () {
-    var myGen = this.generation;
-    function stale(player) {
-      return player.cancelled || player.generation !== myGen;
-    }
-    function loop(player) {
-      if (stale(player)) return Promise.resolve();
-      player._hideAllMessages();
-      player._hideTyping();
-      player._setMeter(0);
-      return player
-        ._sleep(START_DELAY)
-        .then(function () {
-          var chain = Promise.resolve();
-          player.messages.forEach(function (msg, i) {
-            chain = chain.then(function () {
-              if (stale(player)) return;
-              var role = roleOf(msg);
-              var t = defaultTiming(role, (msg.textContent || "").trim().length);
-              var step = function () {
-                if (stale(player)) return;
-                player._hideTyping();
-                player._reveal(msg, i);
-                return player._sleep(t.holdMs);
-              };
-              if (t.typingMs > 0) {
-                player._showTyping();
-                return player._sleep(t.typingMs).then(step);
-              }
-              return step();
-            });
-          });
-          return chain;
-        })
-        .then(function () {
-          if (stale(player)) return;
-          // Mark completion before the hold so the observer entry branch can
-          // show the final state on re-entry without replaying from blank.
-          player.completedOnce = true;
-          return player._sleep(LOOP_HOLD);
-        })
-        .then(function () {
-          if (stale(player)) return;
-          return loop(player);
-        });
-    }
-    return loop(this);
-  };
-
-  ChatThreadPlayer.prototype.play = function () {
-    if (this.running || this.cancelled) return;
-    // WCAG 2.2.2: user-pressed pause wins over every automatic restart.
-    if (this.userPaused) return;
-    // (b) Reduced motion: show the full thread immediately, no loop, no typing.
-    if (reducedMotion()) {
-      this._showAll();
-      this._setMeter(1);
-      return;
-    }
-    if (!this.messages.length) return;
-    this.running = true;
-    this.thread.setAttribute("data-nc-playing", "");
-    this._runLoop();
-  };
-
-  // Stop and reset to the fully-visible static thread (re-armable).
-  ChatThreadPlayer.prototype.stop = function () {
-    this.cancelled = true;
-    this.generation++; // retire the running loop's queued continuations
-    this._clearTimers();
-    this.running = false;
-    this._showAll();
-    this._setMeter(1);
-  };
-
-  // Re-arm a stopped player (used when the thread scrolls back into view). Bump
-  // the epoch again so a still-queued continuation from the just-stopped loop can
-  // never resume now that `cancelled` is cleared — only the loop `play()` starts
-  // next will match the current epoch.
-  ChatThreadPlayer.prototype.rearm = function () {
-    this.cancelled = false;
-    this.generation++;
-    this.running = false;
-  };
-
-  // Inject the enhancer-owned pause/resume button into the thread card.
-  // One button per thread, positioned top-right above the body. Uses
-  // data-nc-autoplay-name for an accessible per-thread subject, e.g.
-  // "Pause <value>"/"Resume <value>"; falls back to "Pause demonstration".
-  // Never called in reduced-motion mode (contract (b): no button for a path
-  // that plays nothing).
-  ChatThreadPlayer.prototype._injectPauseButton = function () {
-    var thread = this.thread;
-    var subject = thread.getAttribute("data-nc-autoplay-name") || "demonstration";
-    var btn = document.createElement("button");
-    btn.type = "button";
-    btn.className = "nc-chat-pause";
-    btn.setAttribute("aria-pressed", "false");
-    btn.textContent = "Pause " + subject;
-    btn.addEventListener(
-      "click",
-      function () {
-        if (this.userPaused) {
-          // Resume: clear the latch, rearm and play.
-          this.userPaused = false;
-          btn.setAttribute("aria-pressed", "false");
-          btn.textContent = "Pause " + subject;
-          this.rearm();
-          this.play();
-        } else {
-          // Pause: set the latch, stop and reveal full content.
-          this.userPaused = true;
-          btn.setAttribute("aria-pressed", "true");
-          btn.textContent = "Resume " + subject;
-          this.stop();
-        }
-      }.bind(this),
-    );
-    // Insert before the body so the button sits above the scrolling content.
-    var body = thread.querySelector(".nc-chat-thread-body");
-    if (body) {
-      thread.insertBefore(btn, body);
-    } else {
-      thread.appendChild(btn);
-    }
-    this.pauseBtn = btn;
-  };
-
-  // ── Initialisation ──────────────────────────────────────────────────────
-  var players = [];
-  var observer = null;
-
-  function enhance(thread) {
-    if (thread.__ncAutoplayPlayer) return thread.__ncAutoplayPlayer;
-    var player = new ChatThreadPlayer(thread);
-    // Read the stagger token off the live thread (parity with motion.css);
-    // fallback equals the motion.css default (60ms) if the bundle is absent.
-    player.staggerMs = durationToken(thread, "--nc-duration-stagger", 60);
-    thread.__ncAutoplayPlayer = player;
-    players.push(player);
-    // Inject the pause/resume button unless reduced-motion is on (that path
-    // plays nothing and must inject no button — WCAG 2.2.2 scope follows the
-    // animation).
-    if (!reducedMotion()) {
-      player._injectPauseButton();
-    }
-    return player;
-  }
-
-  function startObserving() {
-    if (typeof window.IntersectionObserver !== "function") {
-      // No IntersectionObserver: degrade by playing immediately (still respects
-      // reduced motion inside play()).
-      for (var i = 0; i < players.length; i++) players[i].play();
-      return;
-    }
-    // Manual re-init (the documented `window.ncChatAutoplay.init(root)` path for
-    // dynamic content) calls this again; tear down the prior observer first so a
-    // repeat init replaces — rather than stacks — observers. A single self-init
-    // (the common path) hits this once and `observer` is null, so behavior is
-    // unchanged; only repeated manual init benefits (no leaked observers, no
-    // duplicate intersection callbacks per thread).
-    if (observer) observer.disconnect();
-    observer = new IntersectionObserver(
-      function (entries) {
-        for (var i = 0; i < entries.length; i++) {
-          var entry = entries[i];
-          var player = entry.target.__ncAutoplayPlayer;
-          if (!player) continue;
-          if (entry.isIntersecting) {
-            // (d) Start when scrolled into view — but only if the player is not
-            // already running its loop. Re-arming a mid-loop player kills and
-            // restarts it from blank (the long right thread reads as dead under
-            // scroll crossings). A player is "running" once play() sets the flag
-            // and until stop() clears it; the loop recursion holds this state.
-            // WCAG 2.2.2: do not override a user-pressed pause on scroll-in.
-            if (player.userPaused) continue;
-            if (!player.running) {
-              if (player.completedOnce) {
-                // The sequence finished at least once. Show the full final state
-                // immediately so the reader sees the payoff frame, not a blank/
-                // typing restart. The loop resumes from this state on the next
-                // natural cycle if the thread stays in view.
-                player._showAll();
-                player._setMeter(1);
-              } else {
-                player.rearm();
-                player.play();
-              }
-            }
-          } else if (entry.intersectionRatio === 0) {
-            // Stop only when the thread is FULLY out of view (ratio exactly 0).
-            // At partial visibility (e.g. ratio 0.228) do nothing — collapsing
-            // to the finished card while the thread is still on screen is the
-            // bug this guard fixes.
-            if (player.running) {
-              player.stop();
-            }
-          }
-        }
-      },
-      { threshold: [0, 0.25] },
-    );
-    for (var j = 0; j < players.length; j++) observer.observe(players[j].thread);
-  }
-
-  // ── Enhancer-armed, run-once scroll entrance ─────────────────────────────
-  // Arms .nc-settle elements that are fully below the viewport at init.
-  // On first IntersectionObserver entry, switches data-nc-settle from "armed"
-  // to "in" (triggers the CSS nc-msg-in animation) and immediately unobserves
-  // so the rise-in fires once and is never reversed on scroll-back. Elements
-  // already visible at load are left unarmed (no flash; hero region untouched).
-  // prefers-reduced-motion: skip entirely — page fully visible without JS.
-  function initSettle(scope) {
-    if (reducedMotion()) return;
-    if (typeof window.IntersectionObserver !== "function") return;
-    var settleElements = (scope || document).querySelectorAll(".nc-settle");
-    if (!settleElements.length) return;
-    var settleObserver = new IntersectionObserver(
-      function (entries, obs) {
-        for (var i = 0; i < entries.length; i++) {
-          if (entries[i].isIntersecting) {
-            entries[i].target.setAttribute("data-nc-settle", "in");
-            obs.unobserve(entries[i].target);
-          }
-        }
-      },
-      { threshold: 0.1 },
-    );
-    for (var i = 0; i < settleElements.length; i++) {
-      var el = settleElements[i];
-      var rect = el.getBoundingClientRect();
-      // Arm only elements whose top edge is fully below the viewport.
-      if (rect.top > window.innerHeight) {
-        el.setAttribute("data-nc-settle", "armed");
-        settleObserver.observe(el);
-      }
-    }
-  }
-
-  function init(root) {
-    var scope = root || document;
-    var threads = scope.querySelectorAll(".nc-chat-thread[data-nc-autoplay]");
-    for (var i = 0; i < threads.length; i++) enhance(threads[i]);
-    initSettle(scope);
-    startObserving();
-    return players;
-  }
-
-  // Respond to a runtime change of the reduced-motion preference: collapse any
-  // running player to the static full thread.
-  if (typeof window.matchMedia === "function") {
-    var mq = window.matchMedia("(prefers-reduced-motion: reduce)");
-    var onChange = function () {
-      if (!mq.matches) return;
-      for (var i = 0; i < players.length; i++) {
-        if (players[i].running) players[i].stop();
-      }
-    };
-    if (typeof mq.addEventListener === "function") mq.addEventListener("change", onChange);
-    else if (typeof mq.addListener === "function") mq.addListener(onChange);
-  }
-
-  window.ncChatAutoplay = { init: init, players: players };
-
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", function () {
-      init();
-    });
-  } else {
-    init();
-  }
-})();