@felloinnovations/brand-kit 0.4.0 → 0.5.1

package/design-system/components/ChatCard/README.md

@@ -1,5 +1,5 @@
-A card that sits flat on the chat: one kind, one title, one sentence, its facts on a plate, and a footer band
-holding its one act.
+A card the agent brings into the chat (North's chat card: at most 556 px, 20 px inside, the 80 px tray): one kind or one
+chart, one title, one sentence, its facts on a plate or a breakdown, and the tray holding its one act.
 
 ## Use it when
 
@@ -11,27 +11,39 @@ holding its one act.
 
 - A simple fact already said in the words above it: say it once, in the chat's text or in the card, never both
   (the system's rule).
-- A drawing, a table, or a comparison of three rows or more: that is a rich card, whole in the side panel, with
-  only a one-line summary and "Open" left in the chat (the system's rule).
+- A wide table or a long comparison: the chat card holds a chart and a short breakdown (North's chat chart card);
+  anything wider opens in the card's own full screen or the side panel, with "Open" left in the chat.
 - A list of past suggestions: a card is for the one thing in front of the person now; Today's own list lives
   beside the chat, not repeated here.
 
 ## Anatomy
 
-- Shell: `ws-card`, 8 px corners (`--ws-radius-card`), a hairline edge (`--ws-edge-card`), 20 px inside
-  (`calc(space-md + space-xxs)`), flat (no float shadow).
-- Head: a small disc (`--space-lg`, 24 px) with a navy glyph, or salmon-tinted (`--ws-tint-needs`,
-  `--color-brand-salmon`) while the card waits on the person; its kind name next to it in the eyebrow style (12 px
-  semibold uppercase, `--letter-spacing-overline`, `--color-text-muted`): "Suggestion", "Task", "Reminder".
-- Title: `--font-size-md` (16 px) semibold, `--ws-tracking-title`, navy.
-- One sentence: 14 px, `--color-text-body`.
-- Facts plate: `--ws-surface-sunk`, 8 px corners, 12 px inside (`--ws-card-padding`).
-- Band: `ws-band` across the card's foot (`--ws-chart-foot` ground, `--ws-shadow-band`), 28 px at the sides
-  (`--ws-band-inset`); the door to what the app owns on the left ("Open in the app", a text act with an
-  arrow-up-right mark); the buttons on the right at `large` (36 px, `--ws-control-h-md`), every secondary button
-  first, the one navy primary last.
-- A needs-you reminder adds a timer chip (a small ring and its words, `--ws-surface-sunk` ground) in the head, and
-  a cross icon button (`--ws-control-h-sm`, 28 px) in the card's top right corner for "not now".
+- Shell: `ws-card ws-chat-card`, at most 556 px (`--ws-chart-card-w`), 8 px corners, 20 px inside (`--ws-card-inset`),
+  its parts 8 px apart, flat. On the chat's glass it keeps North's 0.5 px card edge (`--ws-edge-card`), not the page's
+  tray rim. It measures itself (a size container), so a narrow chat gets the narrow tray.
+- Head (`ws-chat-card__head`, 24 px tall at least, its parts spread): the kind (`ws-chat-card__kind`), a 24 px disc
+  (`ws-disc ws-chat-card__disc`) with a navy 12 px glyph, or salmon-tinted (`--needs`: `--ws-tint-needs` behind a `--ws-chart-under-half` glyph) while the
+  card waits on the person, and the kind next to it in the eyebrow style ("Suggestion", "Task", "Reminder").
+- Title: `ws-section` (15 / 22 semibold navy) for a kind card; `ws-title` (22 / 28) for a chart answer. One sentence
+  under it, 14 / 20 in `--color-text-body`.
+- Facts plate (`ws-plate ws-chat-card__facts`): `Plate` (14 / 16 inside), its facts side by side, 12 px words, 16
+  apart and 4 between lines, each name in semibold navy (`b`).
+- A chart answer's drawing (`ws-chat-card__graph`): the dotted field runs to the card's edges and sits only behind the
+  drawing, 16 above and 24 under it.
+- A breakdown (`ws-chat-card__rows`): rows edge to edge, 44 px tall, 0.5 px rules (`--ws-edge-slot`), the label 14 / 20
+  medium navy on the left, the figure semibold, tabular, at the right.
+- The tray (`ws-band ws-chat-card__band`): the band across the card's foot, 80 px tall, 28 px sides, the darker cream
+  and its inset shade; the door on the left ("Open in the app", 24 px tall), the buttons in `ws-band__acts` at the
+  right, at `large` (36 px), every secondary first and the one navy primary last.
+- Under 470 px (a narrow chat): the tray is 64 px, 12 / 20, its second line (`ws-band__how`) hides and the title steps
+  to 14 / 18 (it wraps, balanced, beside the acts); the acts stay on the title's line at their own width (North keeps
+  the docked card on one line) and drop under it together only when they cannot fit (a door and two buttons).
+- A needs-you reminder adds a timer chip in the head (`ws-chat-card__timer`: a 12 px clock and the time left, 12 px
+  medium tabular navy on the sunk cream, 2 px corners) and a cross (`ws-icon-btn ws-icon-btn--sm ws-chat-card__close`,
+  a 40 px hit area on touch) in the top right corner, 8 px in, for "not now"; the head keeps 32 px clear of it, so the
+  timer ends 16 px short of the cross.
+- 0.4 markup's act group, `ws-chat-card__acts`, still lays its buttons out at the band's end; new markup uses
+  `ws-band__acts`.
 
 ## Variants and sizes
 
@@ -46,8 +58,7 @@ holding its one act.
 ## States
 
 - **Default**: the card as drawn above.
-- **Waits on you**: the head's disc is salmon-tinted; the card is touched once by a soft light as it arrives
-  (`ws-shine-once`).
+- **Waits on you**: the head's disc is salmon-tinted (`ws-chat-card__disc--needs`).
 - **Pending**: the pressed button keeps its colour and shows a working dot; the other buttons step out of the way
   while the tap is in flight.
 - **Done**: the band's primary becomes a quiet Undo for as long as the act can still be taken back.
@@ -55,7 +66,10 @@ holding its one act.
 - **Empty**: a card whose data does not exist is never drawn, not even as a placeholder shell.
 - **Long title**: a question's title is never clamped (the yes it leads to is in it); other kinds clamp to two
   lines.
-- **Narrow**: in the 440 px side panel the band's acts wrap to a second line before anything truncates.
+- **Loading**: a `StatusLine` on top says what the agent is doing, the drawing is a `Skeleton` ghost, the tray holds a
+  `LoadBar`; the card is `aria-busy`.
+- **Narrow**: under 470 px the tray goes to 64 px with its acts beside the title; nothing truncates.
+- **Dark**: the edge, the tray and the dots follow the theme.
 
 ## Behaviour
 
@@ -64,10 +78,20 @@ holding its one act.
   "Not now" is the backend's own dismissal where one exists, kept in the browser otherwise, with 5 seconds to
   undo.
 - Pointer and touch: a tap on a button answers at once through the route handler, never a page navigation; the
-  band's controls sit at the 36 px large size, which already clears the 40 px touch floor with its own padding.
+  band's controls sit at the 36 px large size, 40 px on touch (the house touch floor).
   No side popups: a card acts in place.
-- Motion: the card rises in as it arrives (`ws-rise`, `--ws-duration-settle`); a card lit by a "waiting on you"
-  jump gets a brief mid-blue ring (`--ws-card-ring-lit`), not a float.
+- Motion: a card the app marks `ws-settle` as it arrives rises 6 px out of a 3 px blur on the card spring
+  (`--ws-spring-card`, .5 / .08, North's "Chart card arrives"); a chart draws over `--ws-duration-draw-chat`; a card lit
+  by a "waiting on you" jump gets a brief ring (`--ws-card-ring-lit`), not a float.
+- Full screen (`ws-chat-card--full`, North's cc-full): the card over the page, the stage inset from the window's edges,
+  16 px corners and the float drop, scrolling on its own. Toggle it inside `morph(update, { as: 'full', el: card })`
+  (see `Morph`): it flies there and back as itself over `--ws-duration-morph` (.45 s) on `--ws-ease-morph`, 32 ms late,
+  its words never scaling (North's "Full screen: open / close"). morph() lifts it into the top layer while it is full,
+  so it covers the window from inside the chat's glass, AppShell's stage or any ancestor with a transform, filter,
+  `contain` or `will-change` (a bare `position: fixed` would fill only that ancestor). Its toggle lives in its head
+  ("Full screen", then "Back"); Escape closes it as well; focus stays inside it and comes back to the toggle.
+- Reduced motion: it is simply there, and the full screen simply opens and closes.
+- The preview's last stack is live: Arrive and Full screen.
 
 ## Content
 
@@ -94,8 +118,8 @@ view.
 
 ## Rules
 
-- **A card sits flat on the chat**: `ws-card`, the cream, the 0.5 px edge, 8 px corners, 20 px inside, as every
-  card on the pages (26 Oct 2026); no float, a lit card gets its ring instead (the system's rule).
+- **A card sits flat on the chat**: the cream, North's 0.5 px edge, 8 px corners, 20 px inside, at most 556 px; no
+  float, a lit card gets its ring instead.
 - **Its acts sit on the footer band, laid out as a card's band (`ws-band`, see `Card`)** (26 Oct 2026): the door on the left, the buttons on
   the right, the one primary navy and last, every other button cream with the fine edge.
 - **Each needs-you card carries a timer and a cross** that means "not now", never a delete, with 5 seconds to
@@ -106,6 +130,68 @@ view.
 
 ## Source
 
-**Derived from**: the system's flat card rule (the cream shell, 0.5 px edge, 8 px corners), the footer band
-pattern for a door plus buttons, and the needs-you timer-and-cross pattern for a reminder. **Precedent**: the
-first product built on the system.
+**Derived from**: North's chat chart card (Figma 733:325166 "card 556 · inset 20 · tray 80"; style1.css:688-733,
+:1154-1190, :2001-2004), the system's footer band for a door plus buttons, and the needs-you timer-and-cross pattern.
+**Precedent**: the first product built on the system.
+
+## Markup
+
+```html
+<div class="ws-card ws-chat-card">
+  <p class="ws-title">Calls this week, by agent</p>
+  <p class="ws-body">Sam is three behind the team.</p>
+  <div class="ws-chat-card__graph ws-dots" aria-hidden="true"><!-- the drawing --></div>
+  <ul class="ws-chat-card__rows" aria-label="Calls this week">
+    <li class="ws-chat-card__row"><span>Dana Okafor</span><b>12</b></li>
+  </ul>
+  <div class="ws-band ws-chat-card__band">
+    <a class="ws-chat-card__door" href="/team">Open in the app</a>
+    <div class="ws-band__acts">
+      <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Not now</button>
+      <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Line them up</button>
+    </div>
+  </div>
+</div>
+
+<!-- A chart answer that opens full screen: the toggle in its head, run through morph() (see Morph) -->
+<div class="ws-card ws-chat-card">
+  <div class="ws-chat-card__head">
+    <span class="ws-eyebrow">Chart</span>
+    <button type="button" class="ws-btn ws-btn--secondary">Full screen</button><!-- "Back" while full -->
+  </div>
+  <p class="ws-title">Calls this week, by agent</p>
+  <div class="ws-chat-card__graph ws-dots" aria-hidden="true"><!-- the drawing --></div>
+</div>
+
+<!-- A needs-you reminder: the cross in the corner, the kind and the timer in the head -->
+<div class="ws-card ws-chat-card">
+  <button type="button" class="ws-icon-btn ws-icon-btn--sm ws-chat-card__close" aria-label="Not now: Call Priya back before her offer expires" title="Not now">
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+  </button>
+  <div class="ws-chat-card__head">
+    <span class="ws-chat-card__kind">
+      <span class="ws-disc ws-chat-card__disc ws-chat-card__disc--needs" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><!-- a bell --></svg></span>
+      <span class="ws-eyebrow">Reminder</span>
+    </span>
+    <span class="ws-chat-card__timer" title="2 hours left">
+      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3l2 1.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      2h left
+    </span>
+  </div>
+  <p class="ws-section">Call Priya back before her offer expires</p>
+  <p class="ws-body">She asked for a decision by end of day.</p>
+  <div class="ws-plate ws-chat-card__facts">
+    <span><b>Priya</b> &middot; offer on Oak Street</span>
+  </div>
+  <div class="ws-band ws-chat-card__band">
+    <a class="ws-chat-card__door" href="/leads/priya">Open in the app</a>
+    <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Mark done</button></div>
+  </div>
+</div>
+```
+
+## Styles
+
+`ChatCard/style.css`; the band and its acts are `Card`'s, the plate `Plate`'s. Tokens: `--ws-chart-card-w`,
+`--ws-card-inset`, `--ws-edge-card`, `--ws-edge-card-1x`, `--ws-edge-slot`, `--ws-radius-card-inner`, `--ws-tint-needs`,
+`--ws-surface-sunk`.

package/design-system/components/ChatCard/preview.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Chat" height=574 -->
+<!-- @dsCard group="Chat" height=1217 -->
 <!doctype html>
 <html>
 <head>
@@ -8,12 +8,11 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage" style="justify-content: center;">
-  <div class="ws-stack ws-stack--group" style="width: var(--ws-column-width); max-width: 100%;">
-
+<div class="ws-stage" style="background: var(--ws-frame);">
+  <div class="ws-stack ws-stack--group" style="width: var(--ws-chart-card-w);">
     <div class="ws-stack">
       <span class="ws-muted">Suggestion: a door on the left, Not now then the one navy act</span>
-      <div class="ws-card ws-chat-card ws-rise">
+      <div class="ws-card ws-chat-card ws-settle">
         <div class="ws-chat-card__head">
           <span class="ws-chat-card__kind">
             <span class="ws-disc ws-chat-card__disc" aria-hidden="true">
@@ -31,49 +30,167 @@
         <div class="ws-band ws-chat-card__band">
           <a class="ws-chat-card__door" href="#" onclick="return false;">
             Open in the app
-            <svg viewBox="0 0 16 16" fill="none"><path d="M4 12l8-8M7 4h5v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 12l8-8M7 4h5v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
           </a>
-          <span class="ws-chat-card__acts">
+          <div class="ws-band__acts">
             <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Not now</button>
             <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Send the nudge</button>
-          </span>
+          </div>
         </div>
       </div>
     </div>
 
     <div class="ws-stack">
-      <span class="ws-muted">Needs-you reminder: a timer, and a cross for &ldquo;not now&rdquo; (5 s to undo)</span>
-      <div class="ws-card ws-chat-card ws-rise" style="animation-delay: var(--ws-stagger);">
-        <button type="button" class="ws-icon-btn ws-icon-btn--sm ws-chat-card__close" aria-label="Not now: Call Priya back before her offer expires" title="Not now">
-          <svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-        </button>
-        <div class="ws-chat-card__head">
-          <span class="ws-chat-card__kind">
-            <span class="ws-disc ws-chat-card__disc ws-chat-card__disc--needs" aria-hidden="true">
-              <svg viewBox="0 0 16 16" fill="none"><path d="M4.5 11.5V7.8a3.5 3.5 0 0 1 7 0v3.7l1 1.2h-9z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 14a1.2 1.2 0 0 0 2 0" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
-            </span>
-            <span class="ws-eyebrow">Reminder</span>
-          </span>
-          <span class="ws-chat-card__timer" title="2 hours left">
-            <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3l2 1.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-            2h left
-          </span>
+      <span class="ws-muted">A chart answer: the dots only behind the drawing, a breakdown edge to edge, the tray</span>
+      <div class="ws-card ws-chat-card">
+        <p class="ws-title">Calls this week, by agent</p>
+        <p class="ws-body">Sam is three behind the team; Dana is on pace.</p>
+        <div class="ws-chat-card__graph ws-dots" aria-hidden="true">
+          <div class="ws-card__bars">
+            <div class="ws-card__bar" style="height: 80%;"></div>
+            <div class="ws-card__bar" style="height: 55%;"></div>
+            <div class="ws-card__bar" style="height: 30%;"></div>
+            <div class="ws-card__bar" style="height: 65%;"></div>
+          </div>
         </div>
-        <p class="ws-section">Call Priya back before her offer expires</p>
-        <p class="ws-body">She asked for a decision by end of day. The last note on her file is three days old.</p>
+        <ul class="ws-chat-card__rows" aria-label="Calls this week">
+          <li class="ws-chat-card__row"><span>Dana Okafor</span><b>12</b></li>
+          <li class="ws-chat-card__row"><span>Priya Nair</span><b>9</b></li>
+          <li class="ws-chat-card__row"><span>Sam Rivera</span><b>4</b></li>
+        </ul>
         <div class="ws-band ws-chat-card__band">
-          <a class="ws-chat-card__door" href="#" onclick="return false;">
-            Open in the app
-            <svg viewBox="0 0 16 16" fill="none"><path d="M4 12l8-8M7 4h5v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-          </a>
-          <span class="ws-chat-card__acts">
-            <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Mark done</button>
+          <div class="ws-band__words">
+            <p class="ws-band__title">Get Sam one more call</p>
+            <p class="ws-band__how">Coach lines up his next three</p>
+          </div>
+          <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Line them up</button></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="ws-stack">
+      <span class="ws-muted">Loading: what it is doing on top, a ghost drawing, the load bar in the tray</span>
+      <div class="ws-card ws-chat-card" aria-busy="true">
+        <p class="ws-status-line" role="status" title="Coach: building the chart, step 2 of 3">
+          <b class="ws-status-line__who">Coach</b>
+          <span class="ws-status-line__doing">Building the chart</span>
+          <span class="ws-status-line__step">2 of 3</span>
+        </p>
+        <div class="ws-skeleton ws-skeleton--title" style="width: 55%;" aria-hidden="true"></div>
+        <div class="ws-skeleton__chart" aria-hidden="true">
+          <i style="height: 70%;"></i><i style="height: 45%;"></i><i style="height: 25%;"></i><i style="height: 60%;"></i>
+        </div>
+        <div class="ws-band ws-chat-card__band">
+          <div class="ws-load-bar" style="flex: 1;">
+            <p class="ws-load-bar__words"><span class="ws-load-bar__dot" aria-hidden="true"></span>Reading this week&rsquo;s calls</p>
+            <span class="ws-load-bar__track" role="progressbar" aria-label="Reading this week's calls"><span class="ws-load-bar__fill"></span></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 400px;">
+    <span class="ws-muted">Needs-you reminder in a narrow chat: a timer, a cross for not now; the tray goes to 64</span>
+    <div class="ws-card ws-chat-card">
+      <button type="button" class="ws-icon-btn ws-icon-btn--sm ws-chat-card__close" aria-label="Not now: Call Priya back before her offer expires" title="Not now">
+        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+      </button>
+      <div class="ws-chat-card__head">
+        <span class="ws-chat-card__kind">
+          <span class="ws-disc ws-chat-card__disc ws-chat-card__disc--needs" aria-hidden="true">
+            <svg viewBox="0 0 16 16" fill="none"><path d="M4.5 11.5V7.8a3.5 3.5 0 0 1 7 0v3.7l1 1.2h-9z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 14a1.2 1.2 0 0 0 2 0" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
           </span>
+          <span class="ws-eyebrow">Reminder</span>
+        </span>
+        <span class="ws-chat-card__timer" title="2 hours left">
+          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3l2 1.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          2h left
+        </span>
+      </div>
+      <p class="ws-section">Call Priya back before her offer expires</p>
+      <p class="ws-body">She asked for a decision by end of day. The last note on her file is three days old.</p>
+      <div class="ws-band ws-chat-card__band">
+        <div class="ws-band__words">
+          <p class="ws-band__title">Call her now</p>
+          <p class="ws-band__how">Her number is on file</p>
         </div>
+        <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Mark done</button></div>
       </div>
     </div>
+  </div>
 
+  <div class="ws-stack" style="width: var(--ws-chart-card-w);" data-live>
+    <span class="ws-muted">Live: Arrive plays the card coming into the thread on the card spring (.5 / .08); Full screen in its head flies it to the window's full screen and back as itself on the morph curve (.45 s, Morph), lifted above the page; Back or Escape brings it home</span>
+    <div class="ws-cluster">
+      <button type="button" class="ws-btn ws-btn--secondary" id="cc-live-arrive">Arrive</button>
+    </div>
+    <div style="min-height: 260px;">
+      <div class="ws-card ws-chat-card ws-settle" id="cc-live">
+        <div class="ws-chat-card__head"><span class="ws-eyebrow">Chart</span><button type="button" class="ws-btn ws-btn--secondary" id="cc-live-full">Full screen</button></div>
+        <p class="ws-title">Calls this week, by agent</p>
+        <p class="ws-body">Sam is three behind the team; Dana is on pace.</p>
+        <ul class="ws-chat-card__rows" aria-label="Calls this week">
+          <li class="ws-chat-card__row"><span>Dana Okafor</span><b>12</b></li>
+          <li class="ws-chat-card__row"><span>Sam Rivera</span><b>4</b></li>
+        </ul>
+      </div>
+    </div>
   </div>
+  <script>
+    (() => {
+      // A copy of morph() from @felloinnovations/brand-kit (src/lib/motion.ts): a preview cannot import the package.
+      // `full` lifts the element into the top layer while it is fixed, so no ancestor (a transform, a filter, the glass,
+      // contain) can trap it; Escape runs the update again (a toggle) and focus comes back.
+      const morph = (() => {
+        const lifted = new WeakMap(), root = document.documentElement;
+        const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex="-1"])';
+        let last = 0;
+        const place = (el, close) => {
+          const was = lifted.get(el);
+          if (was) { lifted.delete(el); el.removeEventListener('keydown', was.onKey); if (el.matches(':popover-open')) el.hidePopover(); el.removeAttribute('popover'); delete el.dataset.wsLifted; }
+          if (getComputedStyle(el).position === 'fixed' && el.showPopover) {
+            const onKey = (e) => { if (e.key !== 'Escape' || e.defaultPrevented || el.querySelector(':popover-open, dialog[open]')) return; e.preventDefault(); morph(close, { as: 'full', el, close }); };
+            el.dataset.wsLifted = ''; el.popover = 'manual'; el.showPopover(); el.addEventListener('keydown', onKey);
+            lifted.set(el, { opener: was ? was.opener : document.activeElement, onKey });
+            if (!el.contains(document.activeElement)) { const to = el.querySelector('[autofocus]') || el.querySelector(FOCUSABLE) || el; if (to === el && !el.hasAttribute('tabindex')) el.tabIndex = -1; to.focus({ preventScroll: true }); }
+          } else if (was) { const o = was.opener, here = document.activeElement; if (o && o.isConnected && o !== here && (!here || here === document.body || el.contains(here))) o.focus({ preventScroll: true }); }
+        };
+        const morph = (update, { as = 'full', el, close } = {}) => {
+          const run = as === 'full' && el ? async () => { await update(); place(el, close || update); } : update;
+          if (!document.startViewTransition || matchMedia('(prefers-reduced-motion: reduce)').matches) return Promise.resolve(run()).then(() => {});
+          const id = ++last;
+          if (el) {
+            const s = getComputedStyle(el);
+            root.style.setProperty('--ws-morph-ground', s.backgroundColor);
+            root.style.setProperty('--ws-morph-radius', s.borderRadius);
+            root.style.setProperty('--ws-morph-backdrop', s.backdropFilter || 'none');
+            el.style.viewTransitionName = 'ws-morph';
+          }
+          root.dataset.wsMorph = as;
+          const move = document.startViewTransition(run);
+          move.ready.catch(() => {});
+          return move.finished.finally(() => {
+            if (el) el.style.viewTransitionName = '';
+            if (id !== last) return;
+            delete root.dataset.wsMorph;
+            for (const p of ['--ws-morph-ground', '--ws-morph-radius', '--ws-morph-backdrop']) root.style.removeProperty(p);
+          });
+        };
+        return morph;
+      })();
+      const card = document.getElementById('cc-live'), full = document.getElementById('cc-live-full');
+      document.getElementById('cc-live-arrive').addEventListener('click', () => {
+        card.classList.remove('ws-settle');
+        void card.offsetWidth;
+        card.classList.add('ws-settle');
+      });
+      full.addEventListener('click', () => morph(() => {
+        const on = card.classList.toggle('ws-chat-card--full');
+        full.textContent = on ? 'Back' : 'Full screen';
+      }, { as: 'full', el: card }));
+    })();
+  </script>
 </div>
 </body>
 </html>

package/design-system/components/ChatCard/style.css

@@ -0,0 +1,49 @@
+/* ---- ChatCard: a card the agent brings into the chat (North's chat card: at most 556, 20 inside, the 80 px tray): a door on the left of its band, its acts on the right ---- */
+/* North's chat card keeps the 0.5 px card edge on the chat's glass (the page's tray rim is for page cards). It
+   measures itself, so a narrow chat gets the narrow band. */
+.ws-chat-card { position: relative; container: ws-chat-card / inline-size; display: flex; flex-direction: column; gap: var(--space-xs); max-width: var(--ws-chart-card-w); padding: var(--ws-card-inset); border: var(--ws-hairline) solid var(--ws-edge-card); }
+@media (max-resolution: 1.49dppx) { .ws-chat-card { border-color: var(--ws-edge-card-1x); } }
+.ws-chat-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: var(--space-lg); }
+.ws-chat-card__kind { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
+.ws-chat-card__disc { width: var(--space-lg); height: var(--space-lg); }
+.ws-chat-card__disc svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+.ws-chat-card__disc--needs { background: var(--ws-tint-needs); color: var(--ws-chart-under-half); }
+.ws-chat-card__timer { display: inline-flex; align-items: center; gap: var(--space-xxs); padding: var(--space-xxs) var(--space-xs); border-radius: var(--ws-radius-chip); background: var(--ws-surface-sunk); color: var(--color-text-heading); font-size: var(--ws-text-dense); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ws-chat-card__timer svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+/* The close sits in the corner, 8 in; a head beside it keeps clear of it. */
+.ws-chat-card > .ws-chat-card__close { position: absolute; top: var(--space-xs); right: var(--space-xs); color: var(--color-text-muted); }
+.ws-chat-card:has(> .ws-chat-card__close) > .ws-chat-card__head { padding-right: var(--space-xl); }
+.ws-chat-card__facts { display: flex; flex-wrap: wrap; gap: var(--space-xxs) var(--space-md); font-size: var(--ws-text-dense); color: var(--color-text-body); }
+.ws-chat-card__facts b { font-weight: 600; color: var(--color-text-heading); }
+/* A chart answer's drawing: the dotted field runs to the card's edges and sits only behind the drawing, 24 under it. */
+.ws-chat-card__graph { margin: var(--space-xs) calc(var(--ws-card-inset) * -1) 0; padding: var(--space-md) var(--ws-card-inset) var(--space-lg); }
+/* A breakdown under the answer: rows edge to edge, 44 tall, 0.5 px rules, the label left and the figure right. */
+.ws-chat-card__rows { margin: 0 calc(var(--ws-card-inset) * -1); border-top: var(--ws-hairline) solid var(--ws-edge-slot); }
+.ws-chat-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: calc(var(--space-2xl) + var(--space-xxs)); padding: var(--space-xxs) var(--ws-card-inset); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
+.ws-chat-card__row + .ws-chat-card__row { border-top: var(--ws-hairline) solid var(--ws-edge-slot); }
+.ws-chat-card__row > b { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* The tray (the band) runs edge to edge under the card's words, 80 tall at least. */
+.ws-chat-card__band { margin: var(--space-xs) calc(var(--ws-card-inset) * -1) calc(var(--ws-card-inset) * -1); border-radius: 0 0 var(--ws-radius-card-inner) var(--ws-radius-card-inner); }
+.ws-chat-card__door { display: inline-flex; align-items: center; gap: var(--space-xxs); min-height: var(--space-lg); margin-right: auto; font-size: var(--ws-text-body); font-weight: 500; color: var(--color-text-body); text-decoration: none; }
+@media (hover: hover) { .ws-chat-card__door:hover { color: var(--color-text-heading); text-decoration: underline; } }
+.ws-chat-card__door svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+.ws-chat-card__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-left: auto; }
+/* A narrow chat (the card under 470): the tray goes to 64, 12 / 20, its second line hides and the title steps to
+   14 / 18. North keeps the docked card on one line, so the acts stay beside the title at their own width (the band's
+   share-the-line rule under 26rem made the tray 92 to 100 tall); they drop under it together only when they cannot fit. */
+@container ws-chat-card (max-width: 470px) {
+  .ws-chat-card__band { min-height: var(--space-4xl); column-gap: var(--space-sm); padding: var(--space-sm) var(--ws-card-inset); }
+  .ws-chat-card__band .ws-band__how { display: none; }
+  .ws-chat-card__band .ws-band__words { min-width: min(100%, var(--space-7xl)); }
+  .ws-chat-card__band .ws-band__title { font-size: var(--ws-text-body); line-height: var(--ws-leading-control); text-wrap: balance; }
+  .ws-chat-card__band .ws-band__acts { width: auto; }
+  .ws-chat-card__band .ws-band__acts > * { flex: none; }
+}
+/* Full screen (North's cc-full, css:751): the card over the page, the stage inset from the window's edges, 16 px corners
+   (8 in the thread), the float drop; it scrolls on its own. morph() (Morph, `as: 'full'`) carries it there and back as
+   itself and lifts it into the top layer while it is full, so no ancestor with a transform, a filter, a backdrop-filter
+   (the glass stage, the chat's glass), contain or will-change can make "full screen" fill only that ancestor. */
+.ws-chat-card--full { position: fixed; inset: var(--ws-stage-inset); z-index: var(--z-modal); width: auto; height: auto; max-width: none; margin: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--ws-radius-panel); box-shadow: var(--ws-shadow-float); }
+/* Motion (D7, North's "Chart card arrives", the card spring .5 / .08): a card the app marks ws-settle as it arrives rises
+   6 px out of a 3 px blur on that spring. Reduced motion: it is simply there. */
+@media (prefers-reduced-motion: no-preference) { .ws-chat-card.ws-settle { animation: ws-settle var(--ws-spring-card-duration) var(--ws-spring-card) backwards; animation-delay: calc(var(--ws-i, 0) * var(--ws-stagger-detail)); } }

package/design-system/components/ChatShell/README.md

@@ -0,0 +1,116 @@
+The chat's frame in three modes: a bar (only the field, over a veiled page), a column docked beside the page, and the
+full screen with one centred reading column.
+
+## Use it when
+
+- An app has a chat with its agent that a person opens over, beside or instead of the page they are on.
+- The chat should keep its place: the same thread moves between the bar, the docked column and the full screen.
+
+## Not for
+
+- A dialog that asks one thing: use `Dialog`.
+- A side pane of detail: use `Panel`.
+- A page's own ask field that opens the chat: that is a `Composer` on the page; it opens this.
+
+## Anatomy
+
+- The shell (`ws-chat-shell`): North's glass (`--ws-glass`, white at 59 % blurred 28 px, `--ws-glass-blur-chat`), a
+  1 px stage edge (`--ws-edge-stage`), 16 px corners; a column. It is not clipped (its parts are inset), so a menu
+  inside still shows.
+- The head (`ws-chat-shell__head`): 52 px tall, 20 px in on the left and 12 on the right, 8 px apart: the title
+  (`ws-section`), where the chat is (`ws-muted`, cut with a title), then the mode buttons (`IconButton` small, 2 px
+  apart; 12 apart on touch, so their 40 px hit areas never overlap) at the end; a 0.5 px navy rule under it (navy at 8 %).
+- The thread (`ws-chat-shell__thread`): the one scroller, 20 px down and 20 px in, the turns (`ChatTurn`) and topic
+  heads (`TopicRail`) in it, 64 px of room under the last item so it scrolls clear of the composer.
+- The composer area (`ws-chat-shell__compose`): 8 px above, 12 px at the sides and under, round a `Composer`.
+- The empty chat (`ws-chat-shell__empty`): low in the thread, a 26 / 32 semibold title (`ws-chat-shell__empty-title`),
+  one 14 / 20 line 8 px under it,
+  the starters (`SuggestionChip`, chat pills) 16 px under that.
+
+## Variants and sizes
+
+| Mode | Class | Look |
+| --- | --- | --- |
+| Docked | `ws-chat-shell--dock` in a `ws-chat-dock` | A column 420 px wide (dragged between 340 and 560), no shadow, 12 px beside the page; a resize handle in the gap; AppShell's nav folded to its rail before it |
+| Full screen | `ws-chat-shell--full` | The page card's frame, white at 94 %; the thread and the composer in one centred column at most 760 px, 28 px in at the least; items 24 px apart, 120 px of room under the last |
+| Bar | `ws-chat-shell--bar` | No shell: the field 60 px tall with 8 px corners and the chat bar's drop (`--ws-shadow-bar`; a live call adds the composer's ring), the page starters 14 px under it, over a veil (`ws-chat-veil`) that blurs the page |
+
+The resize handle (`ws-chat-shell__resize`): the 12 px gap at the column's right edge, a 3 x 40 grip (navy at 18 %, 36 % under the pointer and while dragged) at
+its middle, a col-resize pointer; a `role="separator"` with its value, moved by the arrow keys in the app, which sets
+`--ws-chat-dock-w` on the shell.
+
+## States
+
+- **Open** (North's chat, js@647700): the shell grows in from its mode's side (the bar from its top, the docked column
+  from its left edge, the full screen from 40 % down) out of .97 (`--ws-open-scale`) on the panel spring
+  (`--ws-spring-panel`, .42 / .12, "Opens / moves / docks"), fading in over `--ws-duration-hover` (.2 s) and out of an
+  8 px blur (`--ws-blur-panel`) over .24 s; its head fades in over `--ws-duration-text` (.25 s), .12 s after it.
+- **Change of mode** (North's "Chat moves between full screen, dock and pop-out", .55 s on the shift curve): the app
+  swaps the mode class inside `morph(update, { as: 'shift', el: shell })` from the package (see `Morph`), so the shell
+  moves to its new place and size as itself over `--ws-duration-shift` on `--ws-ease-shift`: its words ride in its
+  corner at their own size, then the new mode's words fade in from 55 % of the way. The docked width shifts on the
+  same curve, never while the handle is dragged (`ws-chat-shell--resizing`). Without view transitions, or with
+  reduced motion, the mode simply changes.
+- **Closing** (`data-leaving`): it goes to .97 into a 6 px blur, fading, over .16 s (js@674822), faster than it came;
+  remove it 160 ms later.
+- **Empty**: the empty chat with its starters.
+- **Busy**: the answer at work shows a `StatusLine`; nothing else in the shell changes.
+- **Narrow** (a window under 60rem, North's 960): the docked chat takes the whole width and the page waits behind it;
+  the handle goes.
+- **Reduced motion**: every mode is simply there.
+- The preview's last stack is live: Full screen and Dock change the mode, Close and Open play the exit and the entrance.
+- **Dark**: the glass, the edge, the veil and the rules follow the theme.
+
+## Behaviour
+
+- Keyboard: the head's mode buttons are real buttons with labels; Escape closes the bar; focus moves to the field when
+  the chat opens and back to what opened it when it closes.
+- Screen reader: the shell is a labelled region (`aside aria-label="Chat with Coach"`), the thread a labelled list.
+- Pointer: the docked column is resized by its handle; the full screen keeps one reading column at any width.
+- Touch: the head's buttons have 40 px hit areas.
+
+## Content
+
+- The title is the agent's name; where it is says which page it reads from ("On Pipeline").
+- The empty title asks what to work on, in the agent's voice, no em dash.
+
+## Rules
+
+- One thread, three modes: changing mode never reloads or reorders the chat.
+- The page steps aside for a docked chat; it is never covered by it.
+- In the full screen the reading column stays at most 760 px; a chart answer may break out wider.
+
+## Source
+
+**Derived from**: North's chat (style1.css:505-533, :584-591, :786-788, :1296-1300, :1362-1408, :1553-1560;
+js@647700-675000: the glass shell, the 52 px head, 20 / 22 thread inset, 28 between items, the 8 / 12 / 12 composer
+area, the bar's 60 px field and veil, the 420 docked column with its 3 x 40 grip, the 760 full-screen column, the
+open, re-form and shift motions). The thread's sides are 20 here, on the head's edge, where North has 22 against an
+18 px head (one content edge, D3).
+
+## Markup
+
+```html
+<div class="ws-chat-dock">
+  <nav class="ws-app-shell__rail" aria-label="Main"><!-- AppShell's rail --></nav>
+  <aside class="ws-chat-shell ws-chat-shell--dock" aria-label="Chat with Coach">
+    <header class="ws-chat-shell__head">
+      <h2 class="ws-section">Coach</h2>
+      <span class="ws-muted ws-chat-shell__where" title="On Pipeline">On Pipeline</span>
+      <span class="ws-chat-shell__tools"><!-- small IconButtons: full screen, close --></span>
+    </header>
+    <ol class="ws-chat-shell__thread" aria-label="Messages"><!-- ChatTurn and topic heads --></ol>
+    <div class="ws-chat-shell__compose"><!-- a Composer --></div>
+    <button type="button" class="ws-chat-shell__resize" role="separator" aria-orientation="vertical" aria-label="Resize the chat" aria-valuemin="340" aria-valuemax="560" aria-valuenow="420"></button>
+  </aside>
+  <main><!-- the page --></main>
+</div>
+```
+
+## Styles
+
+`ChatShell/style.css` (its keyframes `ws-chat-open` and `ws-chat-veil` live there). Tokens: `--ws-glass`,
+`--ws-glass-blur-chat`, `--ws-edge-stage`, `--ws-radius-panel`, `--ws-ink`, `--ws-shade`, `--ws-float-rim`,
+`--ws-page`, `--ws-blur-panel`, `--color-surface`, `--ws-hover`, `--ws-duration-calm`, `--ws-duration-shift`,
+`--ws-ease-settle`, `--ws-ease-shift`. The 760 column and the 420 width are component properties (`--ws-chat-col`,
+`--ws-chat-dock-w`).