@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,129 @@
+/* ---- MetricTile: North's key metric, a rimmed tile that opens across its row into its chart and a side column ---- */
+/* The set: 16 apart; one across under 30rem, two from 30rem, four from 60rem (it measures itself). */
+.ws-metric-tiles { container-type: inline-size; }
+.ws-metric-tiles__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
+@container (min-width: 30rem) { .ws-metric-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@container (min-width: 60rem) { .ws-metric-tiles__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+/* Closed: the tray rim (8 outside, 7 inside), a cream surface 16 inside with 12 between label, figure and bar, and a
+   foot on the tray. The whole tile is one button that opens it; hover and focus darken the rim (Seth's well hover). */
+.ws-metric-tile { display: flex; min-width: 0; flex-direction: column; border: 0; border-radius: var(--ws-radius-card); background: var(--ws-tray); padding: var(--ws-rim); color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
+.ws-metric-tile:focus-visible, .ws-metric-tile--selected { background: var(--ws-well-hover); }
+@media (hover: hover) { .ws-metric-tile:not(.ws-metric-tile--open):hover { background: var(--ws-well-hover); } }
+.ws-metric-tile__surface { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--ws-radius-card-inner); background: var(--color-bg-page); }
+.ws-metric-tile__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-width: 0; }
+.ws-metric-tile__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ws-text-control); font-weight: 500; line-height: var(--ws-leading-control); color: var(--color-text-body); }
+/* The go arrow rests 4 px back and steps forward under the pointer or the focus. On touch, where nothing hovers, it
+   sits on the content edge. */
+.ws-metric-tile__go { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); color: var(--color-text-heading); }
+@media (hover: hover) {
+  .ws-metric-tile__go { transform: translateX(calc(var(--ws-nudge) * -1)); }
+  .ws-metric-tile:hover .ws-metric-tile__go, .ws-metric-tile:focus-visible .ws-metric-tile__go { transform: none; }
+}
+.ws-metric-tile__value { white-space: nowrap; font-size: var(--font-size-3xl); font-weight: 400; line-height: var(--space-3xl); letter-spacing: var(--ws-tracking-display); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-metric-tile { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+  .ws-metric-tile__go { transition: transform var(--ws-duration-settle) var(--ws-ease-soft); }
+  .ws-metric-tile__preview { transition: filter var(--ws-duration-shrink) ease; }
+}
+/* A closed preview chart is greyed and wakes to its colours under the pointer or the focus (North). */
+.ws-metric-tile__preview { display: flex; align-items: center; height: var(--space-lg); filter: grayscale(1) contrast(0.55) brightness(1.32); }
+.ws-metric-tile:focus-visible .ws-metric-tile__preview { display: flex; align-items: center; height: var(--space-lg); filter: none; }
+@media (hover: hover) { .ws-metric-tile:hover .ws-metric-tile__preview { display: flex; align-items: center; height: var(--space-lg); filter: none; } }
+/* The mini charts (North's Home tiles), in the bar's place: a column strip (__cols, one __col a period, the period in
+   progress __col--now, lighter) or a line with dots (__line, an inline SVG: one <line> a step, one <circle> a point,
+   the last __now and larger). Each is 36 tall and reaches up into the 12 above it, so its baseline sits where a
+   PaceBar's 24 slot ends and the tile keeps its height. Columns 8 apart and stopping 12 short of the right edge, 2 px
+   top corners, cut every --step of the height by a fine line in the ground's colour (North's scale lines through the
+   bars); the baseline runs the full width. The line's points run from 4 in to 12 short, over a 0.5 px mid rule. Grey
+   at rest (the heading navy at 20% over the ground whatever the tone, the period in progress 11%, so every tile rests
+   the same grey); under the pointer or the focus they wake to the tone (the period in progress 55%) over 400 ms, as
+   a preview does. --tone on the chart, navy by default. A zero column is a 1 px stub on the baseline, never left out. */
+.ws-metric-tile { --woke: 0; }
+.ws-metric-tile:focus-visible { --woke: 1; }
+@media (hover: hover) { .ws-metric-tile:hover { --woke: 1; } }
+.ws-metric-tile__cols, .ws-metric-tile__line { --mark-tone: var(--tone, var(--color-text-heading)); --mark-hue: color-mix(in srgb, var(--mark-tone) calc(var(--woke, 1) * 100%), var(--color-text-heading)); --mark: color-mix(in srgb, var(--mark-hue) calc(20% + var(--woke, 1) * 80%), var(--color-bg-page)); position: relative; flex-shrink: 0; height: calc(var(--space-lg) + var(--space-sm)); margin-top: calc(var(--space-sm) * -1); }
+.ws-metric-tile__cols { display: flex; align-items: flex-end; gap: var(--space-xs); padding-right: var(--space-sm); border-bottom: var(--ws-line) solid color-mix(in srgb, var(--ws-edge-card) calc(var(--woke, 1) * 100%), var(--ws-chart-foot)); }
+.ws-metric-tile__cols::after { content: ""; position: absolute; inset: 0 var(--space-sm) 0 0; background: repeating-linear-gradient(to top, transparent 0 calc(var(--step) - var(--ws-hairline) * 1.5), var(--color-bg-page) 0 var(--step)); pointer-events: none; }
+.ws-metric-tile__col { flex: 1; min-width: 0; height: max(var(--ws-line), var(--v, 0%)); border-radius: var(--ws-radius-chip) var(--ws-radius-chip) 0 0; background: var(--mark); transform-origin: bottom; }
+.ws-metric-tile__col--now { background: color-mix(in srgb, var(--mark-hue) calc(11% + var(--woke, 1) * 44%), var(--color-bg-page)); }
+.ws-metric-tile__line::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: var(--ws-hairline) solid color-mix(in srgb, var(--ws-edge-slot) calc(var(--woke, 1) * 100%), var(--ws-chart-foot)); }
+.ws-metric-tile__line > svg { position: absolute; top: 0; left: var(--space-xxs); width: calc(100% - var(--space-xxs) - var(--space-sm)); height: 100%; overflow: visible; }
+.ws-metric-tile__line line { stroke: var(--mark); stroke-width: calc(var(--ws-hairline) * 2.5); stroke-linecap: round; }
+.ws-metric-tile__line circle { r: calc(var(--ws-hairline) * 5); fill: var(--mark); stroke: var(--color-bg-page); stroke-width: calc(var(--ws-hairline) * 3); }
+.ws-metric-tile__line .ws-metric-tile__now { r: calc(var(--ws-hairline) * 9); }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-metric-tile__cols, .ws-metric-tile__col { transition: background-color var(--ws-duration-shrink) ease, border-color var(--ws-duration-shrink) ease; }
+  .ws-metric-tile__line::before { transition: border-color var(--ws-duration-shrink) ease; }
+  .ws-metric-tile__line :is(line, circle) { transition: stroke var(--ws-duration-shrink) ease, fill var(--ws-duration-shrink) ease; }
+  /* The draw (North's Home intro, "Metric + goal bars fill"): with --draw on the tile its chart draws over the card's
+     share of the page fill (--ws-duration-fill-page x 0.79: North's .21 card stagger leaves each card 0.79 of it).
+     Column i of --n starts at its share of the first half and rises from the baseline over the second half on the
+     settle curve. The line draws left to right at an even pace, step i (--i) after step i - 1 (each <line> wears
+     pathLength="1"), over the first three quarters; each dot pops as the line reaches it. Then the foot's figure rises
+     in. In a .ws-build card it all starts at the card's --ws-build-at. */
+  .ws-metric-tile--draw { --ws-tile-draw: calc(var(--ws-duration-fill-page) * 0.79); }
+  .ws-metric-tile--draw .ws-metric-tile__col { animation: ws-grow-up calc(var(--ws-tile-draw) * 0.5) var(--ws-ease-settle) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-tile-draw) * 0.5 * var(--i, 0) / max(var(--n, 2) - 1, 1)); }
+  .ws-metric-tile--draw .ws-metric-tile__line line { stroke-dasharray: 1 1; animation: ws-draw calc(var(--ws-tile-draw) * 0.75 / max(var(--n, 2) - 1, 1)) var(--ws-ease-steady) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-tile-draw) * 0.75 * var(--i, 0) / max(var(--n, 2) - 1, 1)); }
+  .ws-metric-tile--draw .ws-metric-tile__line circle { transform-box: fill-box; transform-origin: center; animation: ws-bloom var(--ws-duration-settle) var(--ws-ease-pop) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-tile-draw) * 0.75 * var(--i, 0) / max(var(--n, 2) - 1, 1)); }
+  .ws-metric-tile--draw .ws-metric-tile__foot b { animation: ws-rise var(--ws-duration-settle) var(--ws-ease-soft) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-tile-draw)); }
+}
+/* The foot on the tray: 32 tall, 16 at the sides, 12/16 words; figures 600 and never cut, the words give way first. */
+.ws-metric-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--space-xl); padding: var(--space-xs) var(--space-md); font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-body); }
+.ws-metric-tile__foot > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.ws-metric-tile__foot b { flex-shrink: 0; font-weight: 600; color: var(--color-text-heading); }
+/* Dense (North's KPI rail): 12 / 14 inside, 4 apart, a 28/32 figure. */
+.ws-metric-tile--dense .ws-metric-tile__surface { gap: var(--space-xxs); padding: var(--space-sm) var(--space-sm-plus); }
+.ws-metric-tile--dense .ws-metric-tile__label { font-size: var(--ws-text-dense); line-height: var(--space-md); }
+.ws-metric-tile--dense .ws-metric-tile__value { font-size: var(--ws-text-figure-row); line-height: var(--ws-leading-figure-row); }
+/* Selected in a row of tiles: the darker rim and a 2 px navy tab 8 under it, 16 in from each side. */
+.ws-metric-tile--selected { position: relative; }
+.ws-metric-tile--selected::after { content: ""; position: absolute; left: var(--space-md); right: var(--space-md); bottom: calc((var(--space-xs) + var(--ws-ring)) * -1); height: var(--ws-ring); border-radius: var(--ws-radius-chip); background: var(--color-text-heading); }
+
+/* Open: the tile takes the whole row (12 outside, 11 inside), the others are gone; its surface is the chart (20 24 8 28)
+   beside a 420 side column behind a 0.5 px rule. Under 60rem the side column moves under the chart. */
+.ws-metric-tiles__grid:has(> .ws-metric-tile--open) > :not(.ws-metric-tile--open) { display: none; }
+.ws-metric-tile--open { grid-column: 1 / -1; min-height: calc(var(--space-9xl) + var(--space-8xl) + var(--space-md)); border-radius: var(--ws-radius-drawer); cursor: default; }
+.ws-metric-tile--open > .ws-metric-tile__surface { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--space-9xl) * 2 + var(--space-md) + var(--space-xxs)); gap: 0; padding: 0; border-radius: var(--ws-radius-drawer-inner); }
+.ws-metric-tile__main { display: flex; min-width: 0; flex-direction: column; gap: var(--space-xxs-plus); padding: var(--ws-card-inset) var(--space-lg) var(--space-xs) var(--ws-band-inset); }
+.ws-metric-tile--open .ws-metric-tile__head { align-items: flex-start; }
+/* The open label names the metric at 20 px; its dotted line says a description opens from it. */
+.ws-metric-tile--open .ws-metric-tile__label { font-size: var(--font-size-lg2); line-height: var(--space-lg); text-decoration: underline dotted; text-decoration-thickness: calc(var(--ws-hairline) * 3); text-underline-offset: var(--space-xxs-plus); }
+.ws-metric-tile--open .ws-metric-tile__value { font-size: calc(var(--space-3xl) + var(--space-xxs)); line-height: calc(var(--space-3xl) + var(--space-xs)); color: var(--tone-word, var(--color-text-heading)); }
+.ws-metric-tile__chart { position: relative; flex: 1; min-height: var(--space-9xl); }
+.ws-metric-tile__chart--segs { display: flex; flex: 0 1 auto; min-height: 0; flex-direction: column; gap: var(--space-lg); padding: var(--space-md) 0 var(--space-xs); }
+/* A segment of the open chart (North's breakdown): name, figure and its share of pace over a PaceBar, 10 under. */
+.ws-metric-tile__seg-line { display: flex; align-items: baseline; gap: var(--space-xs-plus); font-size: var(--ws-text-body); line-height: var(--ws-leading-row); color: var(--color-text-heading); }
+.ws-metric-tile__seg-line > span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
+.ws-metric-tile__seg-line > b { font-weight: 600; font-variant-numeric: tabular-nums; }
+.ws-metric-tile__seg-line > em { width: calc(var(--space-2xl) + var(--space-xxs)); font-style: normal; font-size: var(--ws-text-control); text-align: right; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
+.ws-metric-tile__seg .ws-pace-bar { margin-top: var(--space-xxs); }
+.ws-metric-tile__key { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xxs) var(--space-md); font-size: var(--ws-text-dense); font-weight: 500; line-height: var(--space-md); color: var(--color-text-body); }
+.ws-metric-tile__key > span { display: inline-flex; align-items: center; gap: var(--space-xxs-plus); }
+.ws-metric-tile__key i { width: var(--space-xs); height: var(--space-xs); border-radius: var(--ws-radius-chip); background: var(--tone); }
+.ws-metric-tile__side { display: flex; min-width: 0; flex-direction: column; padding: var(--space-sm) 0 var(--space-md); border-left: var(--ws-divider); }
+.ws-metric-tile__section { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm) var(--space-sm-plus) var(--space-sm) var(--space-lg); }
+.ws-metric-tile__section + .ws-metric-tile__section { border-top: var(--ws-divider); }
+.ws-metric-tile__section--grow { flex: 1; }
+.ws-metric-tile__section-title { font-size: var(--ws-text-control); font-weight: 500; line-height: var(--ws-leading-control); color: var(--color-text-heading); }
+.ws-metric-tile__preview > .ws-tick-strip { flex: 1; }
+.ws-metric-tile__tools { display: flex; align-items: center; gap: var(--space-xxs); padding: 0 var(--space-sm-plus) 0 var(--space-lg); }
+.ws-metric-tile__tools > span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ws-text-dense); font-weight: 500; color: var(--color-text-muted); }
+.ws-metric-tile__mover { display: grid; grid-template-columns: var(--space-xs) minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-xs-plus); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); }
+.ws-metric-tile__mover > i { width: var(--space-xs); height: var(--space-xs); border-radius: var(--ws-radius-chip); background: var(--tone); }
+.ws-metric-tile__mover > b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; color: var(--color-text-heading); }
+.ws-metric-tile__mover > em { font-style: normal; font-weight: 600; color: var(--color-text-heading); font-variant-numeric: tabular-nums; text-align: right; }
+.ws-metric-tile__acts { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
+/* Seth's pane pair: the two acts share the row in equal halves, the primary last; each takes the row when the two
+   do not fit side by side. */
+.ws-metric-tile__acts > * { flex: 1 1 0; min-width: max-content; }
+.ws-metric-tile--open > .ws-metric-tile__foot { min-height: var(--space-2xl); padding-inline: var(--ws-band-inset); }
+@container (max-width: 60rem) {
+  .ws-metric-tile--open > .ws-metric-tile__surface { grid-template-columns: minmax(0, 1fr); }
+  .ws-metric-tile__side { border-left: 0; border-top: var(--ws-divider); }
+  .ws-metric-tile__chart:not(.ws-metric-tile__chart--segs) { min-height: calc(var(--space-9xl) + var(--space-4xl)); }
+}
+@container (max-width: 30rem) {
+  .ws-metric-tile__main { padding: var(--space-md); }
+  .ws-metric-tile__section, .ws-metric-tile__tools { padding-inline: var(--space-md); }
+  .ws-metric-tile--open > .ws-metric-tile__foot { padding-inline: var(--space-md); }
+}

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

@@ -0,0 +1,106 @@
+A thing that changes its place or its size goes there as itself: a card flying to the full screen and back, a figure growing open across its row, the chat moving between its modes. The browser's own view transitions, started by `morph()` from the package, on Seth's curves.
+
+## Use it when
+
+- One element changes place or size because of a person's act and should be seen to go there: a chat card to its full
+  screen and back, a tile opening across its row and closing back into its slot, the chat between docked and full
+  screen.
+- The change is a class or a state flip the app can make inside one function.
+
+## Not for
+
+- Something arriving or leaving: that is the component's own entrance and exit (`Menu`, `Dialog`, `Panel`, `Toast`).
+- A height opening in place (a fold, a lane): that is the component's own height motion.
+- A page change: a route's own transition is the app's, not the kit's.
+
+## Anatomy
+
+- `morph(update, { as, el, close })` from `@felloinnovations/brand-kit`: runs `update` as a same-document view
+  transition. It names `el` `ws-morph` for the move, copies its ground, corners and backdrop to the frame
+  (`--ws-morph-ground`, `--ws-morph-radius`, `--ws-morph-backdrop`) and marks the root `data-ws-morph="<as>"` while it
+  runs, so only the kit's own transitions take these curves. It resolves when the move has finished.
+- The lift (`full` only): when `update` leaves `el` `position: fixed` (a chat card's `ws-chat-card--full`), morph()
+  puts it in the top layer as a manual popover (`popover="manual"`, `showPopover()`, marked `data-ws-lifted`), so the
+  full screen covers the window wherever the element sits. Without it, any ancestor with a transform, a filter or
+  backdrop-filter (AppShell's glass stage, the chat's glass), `contain` or `will-change` becomes the fixed element's
+  box, and the card fills only that ancestor, squashed. Lifted, focus moves into it (its `[autofocus]`, else its first
+  control, unless it already holds focus) and Escape runs `close` (default: `update` again, right when `update` is a
+  toggle); when an update leaves it unfixed it drops back into its slot and focus goes back where it was. The lift
+  happens with or without motion.
+- The frame (`::view-transition-group(ws-morph)`): moves and resizes as one shape on the kind's curve, in the
+  element's ground with the hairline edge, and cuts what is inside to its corners.
+- The words (`::view-transition-old` and `-new`): never scale (North css:1485). The old view rides in the frame's
+  corner at its own size until 55 % of the way, then fades off over .1 s as the new one fades in at its own size over
+  .32 s soft (`--ws-duration-settle`, `--ws-ease-soft`), so the frame never flies empty.
+- The page behind cross-fades over .32 s soft (North's "Page behind fades").
+
+## Variants and sizes
+
+| `as` | Seth's name for it | Time and curve |
+| --- | --- | --- |
+| `full` (default) | "Full screen: open / close (card, type and chart together)" | `--ws-duration-morph` (.45 s) on `--ws-ease-morph` (.5, 0, .15, 1), 32 ms late, both ways |
+| `grow` | "Card grows open" | `--ws-duration-grow` (.55 s) on `--ws-ease-grow` (.32, .72, 0, 1) |
+| `shrink` | "Card closes back into place" | `--ws-duration-shrink` (.4 s) on `--ws-ease-grow`: faster than it opened |
+| `shift` | "Chat moves between full screen, dock and pop-out" | `--ws-duration-shift` (.55 s) on `--ws-ease-shift` (.25, 1, .5, 1) |
+
+## States
+
+- **Moving**: the frame on its curve, the old words in its corner, then the new words fading in.
+- **Interrupted**: a second morph before the first ends skips the first to its end and starts from there.
+- **Reduced motion**: no transition; `update` runs at once (and `full` still lifts and drops the element).
+- **No view transitions** (an older browser): `update` runs at once; nothing else changes.
+- **Full**: lifted into the top layer above everything, Escape and its Back button close it, focus inside it.
+
+## Behaviour
+
+- `el` must still be in the page after `update` (the same node, its class changed), or the page names the new element
+  `view-transition-name: ws-morph` itself and leaves `el` out. `full` needs `el`: it is the element lifted.
+- Full screen's way back lives inside the element (a Back button in its head that runs the same morph): the lifted
+  element sits above the whole page, so a control outside it is covered. Escape closes it too, unless a menu, popover or
+  dialog open inside it takes the Escape first.
+- In React, flush the state inside it, and give Escape the way back:
+  `morph(() => flushSync(() => setFull(true)), { el: ref.current, close: () => flushSync(() => setFull(false)) })`; the
+  Back button runs `morph(() => flushSync(() => setFull(false)), { el: ref.current })`.
+- The page does not take presses for the length of the move (the browser's own rule while a view transition runs).
+- In the scoped build (`fello.scoped.css`) the root is not `.fello`, so the move takes the browser's default cross-fade
+  instead of Seth's curves.
+
+## Rules
+
+- One element in flight at a time, as itself; never a copy sliding in from elsewhere.
+- Words never scale: they ride, fade off and fade back.
+- Closing is never slower than opening (`shrink` .4 s after `grow` .55 s; `full` is .45 s both ways, as North).
+
+## Source
+
+**Derived from**: Seth's North DialKit config (app.js@824790: `open.expand` .55 grow, `open.collapse` .4 grow,
+`chat.morph` .45 (.5, 0, .15, 1) after .032 s, `chat.shift` .55 (.25, 1, .5, 1)), the chat card's fly-out (css:1259 to
+1505: the frame in flight, the parts under it fading out, snapping and fading back from 55 % of the way) and the chat's
+mode moves (js@648700). North moves `top`, `left`, `width` and `height` every frame in script; the kit hands the move
+to the browser's view transitions, so nothing runs per frame.
+
+## Markup
+
+```ts
+import { morph } from '@felloinnovations/brand-kit';
+
+// The toggle sits in the card's head ("Full screen", then "Back"); Escape runs the same toggle.
+const go = card.querySelector('.ws-chat-card__head .ws-btn');
+go.addEventListener('click', () =>
+  morph(() => {
+    const full = card.classList.toggle('ws-chat-card--full');
+    go.textContent = full ? 'Back' : 'Full screen';
+  }, { as: 'full', el: card }));
+
+tile.addEventListener('click', () => {
+  const opening = tile.getAttribute('aria-expanded') !== 'true';
+  morph(() => tile.setAttribute('aria-expanded', String(opening)), { as: opening ? 'grow' : 'shrink', el: tile });
+});
+```
+
+## Styles
+
+`Morph/style.css`, built into `bundle.css` and `fello.css`: the `::view-transition-*` rules under
+`:root[data-ws-morph]`, inside `(prefers-reduced-motion: no-preference)`, and the lifted element's reset
+(`[data-ws-lifted]`: the browser's popover box gives way to the element's own). Tokens only. The helper is
+`src/lib/motion.ts`.

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

@@ -0,0 +1,103 @@
+<!-- @dsCard group="Cards" height=980 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Morph</title>
+<link rel="stylesheet" href="../../tokens.css">
+<link rel="stylesheet" href="../bundle.css">
+</head>
+<body>
+<div class="ws-stage ws-stage--column">
+
+  <div class="ws-stack">
+    <span class="ws-muted">Live: press Full screen. The card flies to the full screen as itself on the morph curve (.45 s), its words fading off and back at their own size; Back carries it home the same way</span>
+    <div style="position: relative; contain: layout; height: 460px; padding: var(--space-lg); border-radius: var(--ws-radius-panel); background: var(--ws-frame);">
+      <div class="ws-card ws-chat-card" id="morph-card">
+        <div class="ws-chat-card__head">
+          <span class="ws-eyebrow">Chart</span>
+          <button type="button" class="ws-btn ws-btn--secondary" id="morph-card-go">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>Priya Nair</span><b>9</b></li>
+          <li class="ws-chat-card__row"><span>Sam Rivera</span><b>4</b></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">Live: press a figure. It grows open across its row on the grow curve (.55 s) while the others step back; pressed again it closes back into its place, faster (.4 s)</span>
+    <div id="morph-row" style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm);">
+      <button type="button" class="ws-card" aria-expanded="false" style="display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-md); text-align: left;"><span class="ws-meta">Calls</span><span class="ws-section">42</span></button>
+      <button type="button" class="ws-card" aria-expanded="false" style="display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-md); text-align: left;"><span class="ws-meta">Replies</span><span class="ws-section">17</span></button>
+      <button type="button" class="ws-card" aria-expanded="false" style="display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-md); text-align: left;"><span class="ws-meta">Booked</span><span class="ws-section">5</span></button>
+    </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('morph-card'), go = document.getElementById('morph-card-go');
+      go.addEventListener('click', () => morph(() => {
+        const full = card.classList.toggle('ws-chat-card--full');
+        go.textContent = full ? 'Back' : 'Full screen';
+      }, { as: 'full', el: card }));
+      const row = document.getElementById('morph-row');
+      for (const tile of row.children) tile.addEventListener('click', () => {
+        const open = tile.getAttribute('aria-expanded') !== 'true';
+        morph(() => {
+          tile.setAttribute('aria-expanded', String(open));
+          tile.style.gridColumn = open ? '1 / -1' : '';
+          tile.style.minHeight = open ? '160px' : '';
+          for (const other of row.children) if (other !== tile) other.style.display = open ? 'none' : '';
+        }, { as: open ? 'grow' : 'shrink', el: tile });
+      });
+    })();
+  </script>
+
+</div>
+</body>
+</html>

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

@@ -0,0 +1,31 @@
+/* ---- Morph: a thing that changes its place or size goes there as itself (Seth's shared element in flight), on the
+   browser's own view transitions; morph() in the package starts one ---- */
+/* morph(update, { as, el }) names the element ws-morph and marks the root with data-ws-morph (the kind) while it runs, so
+   only the kit's own transitions take these curves. The frame (the transition's group) moves and resizes as one shape
+   on the kind's curve, in the element's ground and corners (morph() copies them to --ws-morph-ground, --ws-morph-radius
+   and --ws-morph-backdrop) with the hairline edge. What is inside never scales (North css:1485): the old view rides in
+   the frame's corner at its own size, cut to the frame, until 55 % of the way, where it fades off over .1 s as the new
+   one, at its own size, fades in over .32 s soft (css:1489 to 1495), so the frame never flies empty. The page behind
+   fades over .32 s soft (North's "Page behind fades").
+   The kinds: full, .45 s on the morph curve, 32 ms late (North's "Full screen: open / close"); grow, .55 s on the grow
+   curve ("Card grows open"); shrink, .4 s on the grow curve ("Card closes back into place"); shift, .55 s on the shift
+   curve ("Chat moves between full screen, dock and pop-out"). A browser without view transitions, and reduced motion,
+   get the change at once: morph() then runs the update alone. */
+/* An element morph() lifted into the top layer (`full`, data-ws-lifted) keeps its own look: the browser's popover
+   defaults (a fit-content box, auto margins, a medium border, padding, the Canvas colours) give way to anything the
+   element sets, and where it sets nothing it is a plain box in the page's words. */
+:where([data-ws-lifted]) { width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; }
+:root[data-ws-morph] { --ws-morph-for: var(--ws-duration-morph); --ws-morph-ease: var(--ws-ease-morph); --ws-morph-wait: 32ms; /* raw: North's morph waits .032 s */ --ws-morph-out: 100ms; /* raw: North's .1 s fade-out in flight */ }
+:root[data-ws-morph="grow"] { --ws-morph-for: var(--ws-duration-grow); --ws-morph-ease: var(--ws-ease-grow); --ws-morph-wait: 0s; }
+:root[data-ws-morph="shrink"] { --ws-morph-for: var(--ws-duration-shrink); --ws-morph-ease: var(--ws-ease-grow); --ws-morph-wait: 0s; }
+:root[data-ws-morph="shift"] { --ws-morph-for: var(--ws-duration-shift); --ws-morph-ease: var(--ws-ease-shift); --ws-morph-wait: 0s; }
+@keyframes ws-morph-out { to { opacity: 0; } }
+@keyframes ws-morph-in { from { opacity: 0; } }
+@media (prefers-reduced-motion: no-preference) {
+  :root[data-ws-morph]::view-transition-group(ws-morph) { animation-duration: var(--ws-morph-for); animation-timing-function: var(--ws-morph-ease); animation-delay: var(--ws-morph-wait); overflow: clip; border-radius: var(--ws-morph-radius, var(--ws-radius-card)); background: var(--ws-morph-ground, var(--ws-raised)); -webkit-backdrop-filter: var(--ws-morph-backdrop, none); backdrop-filter: var(--ws-morph-backdrop, none); box-shadow: var(--ws-shadow-hairline); }
+  :root[data-ws-morph]::view-transition-image-pair(ws-morph) { isolation: auto; }
+  :root[data-ws-morph]::view-transition-old(ws-morph), :root[data-ws-morph]::view-transition-new(ws-morph) { inline-size: auto; block-size: auto; mix-blend-mode: normal; }
+  :root[data-ws-morph]::view-transition-old(ws-morph) { animation: ws-morph-out var(--ws-morph-out) linear calc(var(--ws-morph-wait) + var(--ws-morph-for) * 0.55) both; }
+  :root[data-ws-morph]::view-transition-new(ws-morph) { animation: ws-morph-in var(--ws-duration-settle) var(--ws-ease-soft) calc(var(--ws-morph-wait) + var(--ws-morph-for) * 0.55) both; }
+  :root[data-ws-morph]::view-transition-old(root), :root[data-ws-morph]::view-transition-new(root) { animation-duration: var(--ws-duration-settle); animation-timing-function: var(--ws-ease-soft); }
+}

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

@@ -0,0 +1,164 @@
+Every move in Seth's North app on one live page: first a product screen to try them on, a numbered hint at each move and a list of what to notice; then, for developers, each behaviour by Seth's own label, North's values, a kit demo, the token or class to build with, and how close the kit is.
+
+## Use it when
+
+- You want to feel how the kit moves: try the screen at the top, number by number.
+- You need to know how something should move: find North's behaviour by its name in the reference, play it, and copy
+  the token or class from its row.
+- You want to see a spring's shape: play it, or turn on Slow everything down 4x.
+- You are checking what the kit does not do yet before you build it in an app: those rows say why.
+
+## Not for
+
+- Building a page: this is a reference card, not a component. Build with the components each row names.
+- A new spring or curve: add it to `tokens/design-tokens.json` (`motion.springs`) or `tokens/_product.css` and run
+  `node scripts/generate-tokens.mjs`; the springs come out as CSS for you.
+
+## Anatomy
+
+- The head: what the page is and how to use it.
+- Try it, the playground: a list of what to try and the screen beside it (above it on a phone).
+  - The list: the Slow motion switch, then each hint's navy number (`Badge`, `ws-badge--navy`), what to do and one
+    plain line on what to notice; the reduced-motion note under it.
+  - The screen: a real product screen built only from kit components and their README markup, in a 780 px frame that
+    stands for the window. `AppShell` with the glass stage and its nav (a group that folds, a `<details>` with a `Fold`
+    chevron; the fold button; on a phone the same nav in its drawer), `PageBar` as the bar (Ask Coach, Save), `Tabs`,
+    the dashboard that builds in on arrival (a `.ws-build` page: four `MetricTile--draw`s with their mini charts, three
+    column strips and a line with dots, beside a `Split` aside of `SideList--draw` goal rows, on track, over and
+    behind; Replay the arrival runs it again), a chart card (`ChatCard` with a `Segmented` Bars / Line and Full
+    screen around a `TrendLine` that morphs between columns and a line, its weeks pointed at through `HoverCard`, a
+    build card that lands after the goals), a `Heatmap`, a card that loads (`Skeleton`, then each line settling in), a list (`SideList`
+    picks) sorted from a `Menu`, the lead `Dialog` drawer, `ChatShell` in its bar, docked and full modes over the
+    `ws-chat-veil`, and a `Toast`.
+  - The hints: the number and a few words above the part they are about; on the bar and in the nav, where there is no
+    room, the number alone on the control's corner (`ws-badge-host`), its words in the list.
+- Reference for developers: the whole table below, folded away by default (a `<details>`, its summary the one line
+  that opens it). Its head: what a row is, the four counts and the reduced-motion note.
+- A group per section of North's motion notes (north-motion.md 1 to 14, then 17 for the states the others leave out):
+  Durations, Curves, Springs, Hover, Press, Focus, Open and close, Panels docking, Loading, Build-ins, Tooltips,
+  Stagger, Reduced motion, What never moves, Interaction states.
+- A row (`article.ws-card` > `.ws-head`), one behaviour: the status chip and Seth's label; North's values (duration,
+  curve or spring, with the file reference); the kit's token, class or helper; and the live demo. A demo that needs
+  room (a heatmap, the chat, a panel, a chart) spans the board's width. A row whose behaviour is played elsewhere on
+  the page links to that row.
+- In the playground, every move is the kit's own: CSS (hover, press, fold, the sliding pill and underline, menus,
+  the drawer, the toast, the heatmap square, the shimmer, the build-in on arrival, the bars to line morph), `morph()`
+  (the chart card to full screen and back, the chat
+  between its modes) and `reorder()` (the sorted list). Full screen lifts the card into the top layer, so it covers
+  the whole window even from inside the frame; Back or Escape brings it home.
+- Demos are the kit's own components and house classes. The curve demo is a `PaceBar` track whose dot crosses on the
+  row's duration and curve: Play sends it to the other end. One-shots (a draw, a fill, a build-in, a stagger) have
+  Replay.
+
+## Variants and sizes
+
+| Status | Chip | Meaning |
+| --- | --- | --- |
+| Exact | `ws-chip--live` | the kit moves as North does: Seth's value, Seth's curve or spring |
+| Close | `ws-chip--middle` | the kit moves the same way with a difference the row names (a duration 20 to 50 ms off, a timed curve where North has a spring, a step left out) |
+| JS helper | `ws-chip--accent` | CSS cannot start it alone; a small framework-free helper from the package does (`morph()`, `reorder()`, `rollPlaceholder()`) and the CSS moves it |
+| Not yet | `ws-chip` | not in the kit; the row says why (no component for it, an open question for Seth, or a rule the kit keeps instead) |
+
+Coverage, 206 behaviours (the page counts them in its head):
+
+| Group | Rows | Exact | Close | JS helper | Not yet |
+| --- | --- | --- | --- | --- | --- |
+| 1. Durations | 16 | 11 | 5 | 0 | 0 |
+| 2. Curves | 19 | 13 | 2 | 0 | 4 |
+| 3. Springs | 27 | 26 | 0 | 0 | 1 |
+| 4. Hover | 26 | 7 | 14 | 0 | 5 |
+| 5. Press | 8 | 3 | 1 | 0 | 4 |
+| 6. Focus | 7 | 4 | 2 | 0 | 1 |
+| 7. Open and close | 23 | 10 | 5 | 2 | 6 |
+| 8. Panels docking | 12 | 6 | 1 | 1 | 4 |
+| 9. Loading, working and loops | 11 | 5 | 2 | 0 | 4 |
+| 10. Number and chart build-ins | 13 | 5 | 2 | 0 | 6 |
+| 11. Tooltips and hover cards | 6 | 2 | 4 | 0 | 0 |
+| 12. Stagger | 11 | 6 | 2 | 1 | 2 |
+| 13. Reduced motion | 4 | 4 | 0 | 0 | 0 |
+| 14. What never moves | 10 | 6 | 3 | 0 | 1 |
+| 17. Interaction states | 13 | 7 | 2 | 1 | 3 |
+| All | 206 | 115 | 45 | 5 | 41 |
+
+## States
+
+- **Rest**: every demo at rest, exactly as its component draws it.
+- **Playing**: hover, press, Tab, click, Play or Replay.
+- **Slowed** (Slow motion, in Try it; this page only): every `--ws-*` duration, delay, stagger and loop token on `<html>` becomes
+  `calc(<its value> * var(--ws-motion-slow))` with `--ws-motion-slow: 4`, and the few raws a component keeps for itself
+  (the chat and panel exits and blur, the tooltip fade, the dialog's wait) are stretched on their own elements, so CSS
+  springs, curves, view transitions and the helpers all run four times slower together. Off, the inline values go.
+  Not a kit feature: an app never slows its motion.
+- **Reduced motion**: everything is still (D7): the house net makes every kit transition and animation instant, the
+  helpers skip to the end state, the placeholder holds, shimmers stop on their ghost. The page says which the browser
+  asks for. The slow switch then has nothing to slow.
+
+## Behaviour
+
+- Native CSS first: springs are `linear()` curves (`--ws-spring-<name>` over `--ws-spring-<name>-duration`, sampled
+  from the motion library's own solver, overshoot kept); sliding indicators ride CSS anchor positioning; heights grow
+  with `interpolate-size` and `::details-content`; enters and exits use `@starting-style` and
+  `transition-behavior: allow-discrete` where the kit opens the layer itself (Menu and Popover as a native popover, Dialog
+  as a native dialog); Toast, HoverCard, Panel and ChatShell play keyframes, and the app sets `data-leaving` and keeps the
+  node until the exit has played; moves of place and size use same-document view transitions.
+- A browser without one of these shows the change at once: no broken layout, nothing half-moved.
+- The playground's arrival (Motion's Build-in, a kit default): on first paint the four tiles rise 70 ms apart
+  (`--ws-stagger-part`), each tile's columns grow in one after another and its line draws step by step with its dots
+  popping, over 0.79 of `--ws-duration-fill-page`, then its foot figure rises in; the goals card rises fifth and its
+  bars fill in order; the chart card rises sixth and its columns grow in over `--ws-duration-draw`. Replay the arrival
+  runs fresh copies. Bars / Line: the columns melt into the line on `--ws-spring-morph-chart` while the line draws over
+  `--ws-duration-draw`; back, they grow down from the dots. Reduced motion: all of it final at once.
+- Motion changes how things move, never where they rest: a resting demo is its component's resting look, pixel for
+  pixel.
+- Only transform, opacity, clip and size move where the platform allows; nothing runs a script per frame (the helpers
+  hand the move to the browser).
+
+## Rules
+
+- Build with the token or class in the row, never North's raw numbers.
+- Springs are for what the person drives (a press, a pointer, an indicator, a panel); timed curves are for what the
+  system plays (a draw, a build-in, a loop).
+- Exits are shorter than entrances.
+- Overshoot only on marks under 24 px and indicators, never a card, a panel, a field or words.
+- Reduced motion is still: write motion inside `(prefers-reduced-motion: no-preference)`; the house net catches the
+  rest.
+
+## Source
+
+**Derived from**: Seth's North artifact (style1.css and app.js: the DialKit "Motion" config `nn`, app.js@824790 to
+@833500, the intro timeline `eb`, and the springs and tweens in the bundle), as inventoried in the kit-upgrade notes
+(north-motion.md, sections 1 to 19), and the kit's decisions D7 (motion), D8 (focus) and D15 (palettes).
+
+## Markup
+
+A row:
+
+```html
+<article class="ws-card" aria-label="Toggle pill slide (bars / line, lanes)"><div class="ws-head">
+  <div class="ws-stack ws-stack--tight">
+    <span class="ws-cluster"><span class="ws-chip ws-chip--live">Exact</span><span class="ws-row-name">Toggle pill slide (bars / line, lanes)</span></span>
+    <span class="ws-meta">North: select.pill: spring visualDuration / bounce .38 / .16</span>
+    <span class="ws-meta">Kit: --ws-spring-indicator over --ws-spring-indicator-duration (700ms); Segmented</span>
+  </div>
+  <div class="ws-cluster"><!-- the live demo --></div>
+</div></article>
+```
+
+A spring in CSS, a helper in script:
+
+```css
+.thing { transition: transform var(--ws-spring-press-duration) var(--ws-spring-press); }
+```
+
+```ts
+import { morph, reorder, rollPlaceholder } from '@felloinnovations/brand-kit';
+morph(() => card.classList.toggle('ws-chat-card--full'), { as: 'full', el: card });
+reorder(() => list.append(...sorted), list);
+const stop = rollPlaceholder(rollElement, 3400);
+```
+
+## Styles
+
+None of its own: the page is the house classes and the components' own `style.css` (a few inline styles place the
+playground's frame, the hints and the chat bar). Its script only flips states the way an app does and carries copies of
+`morph()` and `reorder()` (a preview cannot import the package).