@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,64 @@
+/* ---- ActionList: a card's ranked list of next acts: who or what, the reason in words, the one act at the right. --brief
+   is North's "what changed" list on a page's head: one quiet 40 px line each, the line taking the surface on hover with
+   its acts appearing on it ---- */
+.ws-action-list { container: ws-action-list / inline-size; display: flex; flex-direction: column; }
+/* A row: 12 above and below, the card's 20 px edge at both sides (the head above it uses the same edge), 16 between
+   parts (Seth's fix row), a 0.5 px line between rows. Every part sits on the name's first line (Seth's fix row), however
+   many lines the reason runs to: that line is 24 (a chip's height, held without one), and the lead (the 28 avatar;
+   another mark sets --ws-action-list-lead to its height) and the act are trimmed to it by their margins, so they centre on it. */
+.ws-action-list__row { --ws-action-list-line: var(--space-lg); --ws-action-list-lead: var(--ws-control-h-sm); --ws-action-list-act: var(--ws-control-h-sm); display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-sm) var(--ws-card-inset); }
+.ws-action-list__row > :first-child:not(.ws-action-list__text) { flex-shrink: 0; margin-block: calc((var(--ws-action-list-line) - var(--ws-action-list-lead)) / 2); }
+@media (pointer: coarse) { .ws-action-list__row { --ws-action-list-act: var(--ws-touch); } }
+.ws-action-list__row + .ws-action-list__row { border-top: var(--ws-divider); }
+.ws-action-list__text { display: flex; flex: 1; flex-direction: column; gap: var(--space-xxs); min-width: 0; }
+/* The name: Seth's row name, 15 / 20 medium navy, an optional chip beside it; the reason a 14 / 20 description. */
+.ws-action-list__title { display: flex; flex-wrap: wrap; align-items: center; min-height: var(--ws-action-list-line); gap: var(--space-xxs) var(--space-xs); font-size: var(--ws-text-section); line-height: var(--ws-leading-row); font-weight: 500; color: var(--color-text-heading); }
+.ws-action-list__reason { font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); color: var(--color-text-body); }
+.ws-action-list__act { flex-shrink: 0; margin-block: calc((var(--ws-action-list-line) - var(--ws-action-list-act)) / 2); }
+/* Loading: a ghost line where the name and the reason go (add ws-shimmer). */
+.ws-action-list__ghost { display: block; height: calc(var(--space-xs) + var(--space-3xs)); border-radius: var(--ws-radius-bar); background: var(--ws-track); }
+.ws-action-list__ghost.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
+
+/* --brief (North): rows 6 apart, 40 tall, 10 px corners, a glass ground with a 0.5 px navy edge. Hover: the line goes
+   to the surface and its edge a shade darker, nothing lifts or grows (D7; North's lifting row is not taken), its "Open"
+   act grows out and its dismiss shows; both also show on keyboard focus, and on touch they are always there. */
+.ws-action-list--brief { gap: var(--space-xxs-plus); }
+.ws-action-list__brief { position: relative; display: flex; align-items: center; min-height: var(--ws-row-h-dense); border-radius: var(--ws-radius-menu); background: color-mix(in srgb, var(--color-surface) 55%, transparent); box-shadow: inset 0 0 0 var(--ws-hairline) color-mix(in srgb, var(--ws-ink) 8%, transparent); transition: background-color var(--ws-duration-hover) var(--ws-ease-soft), box-shadow var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-action-list__main { display: flex; flex: 1; align-items: center; align-self: stretch; gap: var(--space-sm); min-width: 0; padding: 0 var(--space-xxs) 0 var(--space-md); border: 0; border-radius: inherit; background: none; font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); text-align: left; cursor: pointer; }
+.ws-action-list__main:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+.ws-action-list__lead { flex: none; font-weight: 600; color: var(--color-text-heading); }
+.ws-action-list__gist { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-body); }
+/* "Open": the needs-you word (salmon's AA step), a 16 px arrow; folded to nothing until the line is hovered or focused. */
+.ws-action-list__go { display: inline-flex; flex: none; align-items: center; gap: var(--space-xxs); max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 600; color: var(--ws-word-needs); transition: opacity var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-action-list__go svg { width: var(--ws-icon); height: var(--ws-icon); flex-shrink: 0; }
+.ws-action-list__dismiss { margin-right: var(--space-xs); opacity: 0; color: var(--color-text-muted); transition: opacity var(--ws-duration-hover) var(--ws-ease-soft), background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-action-list__main:focus-visible .ws-action-list__go { max-width: var(--space-7xl); opacity: 1; }
+.ws-action-list__dismiss:focus-visible, .ws-action-list__brief:focus-within .ws-action-list__dismiss { opacity: 1; }
+@media (hover: hover) {
+  .ws-action-list__brief:hover { background-color: var(--color-surface); box-shadow: inset 0 0 0 var(--ws-hairline) color-mix(in srgb, var(--ws-ink) 10%, transparent); }
+  .ws-action-list__brief:hover .ws-action-list__go { max-width: var(--space-7xl); opacity: 1; }
+  .ws-action-list__brief:hover .ws-action-list__dismiss { opacity: 1; }
+  .ws-action-list__dismiss:hover { background: var(--ws-hover-strong); color: var(--color-text-heading); }
+}
+/* Motion, only where it is wanted: "Open" growing out, the arrow's step. */
+@media (prefers-reduced-motion: no-preference) {
+  .ws-action-list__go { transition: max-width var(--ws-duration-settle) var(--ws-ease-grow), opacity var(--ws-duration-hover) var(--ws-ease-soft); }
+  .ws-action-list__go svg { transition: transform var(--ws-duration-hover) var(--ws-ease-soft); }
+}
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .ws-action-list__brief:hover .ws-action-list__go svg { transform: translateX(var(--space-3xs)); }
+}
+@media (hover: none) { .ws-action-list__go { max-width: none; opacity: 1; } .ws-action-list__dismiss { opacity: 1; } }
+/* On touch the dismiss's 40 px hit area reaches 8 past its box: the line keeps 8 clear after "Open" so a tap on the
+   arrow never dismisses. */
+@media (pointer: coarse) { .ws-action-list__main { padding-right: var(--space-xs); } }
+/* Narrow (a list under 24rem, a phone's card): the act drops under the words, on their edge, so the reason keeps the
+   row's width instead of breaking a word a line; a brief line's "Open" keeps only its arrow (its words, at no size,
+   stay in the line's name), so the gist keeps the room. */
+@container ws-action-list (max-width: 24rem) {
+  .ws-action-list__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-xs) var(--space-md); }
+  .ws-action-list__text, .ws-action-list__act { grid-column: 2; }
+  .ws-action-list__text:first-child, .ws-action-list__text:first-child ~ * { grid-column: 1 / -1; }
+  .ws-action-list__act { justify-self: start; margin-block: 0; }
+  .ws-action-list__go { gap: 0; font-size: 0; }
+}

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

@@ -14,7 +14,8 @@ Who reached out, two weeks of day cells a row, a navy dot for a day done and a c
 
 **Anatomy**
 
-- Two week blocks of seven day cells, Monday to Sunday, a narrow gap between them; each cell is a square that scales with the column.
+- Two week blocks of seven day cells, Monday to Sunday, a narrow gap between them; each cell is a square that scales with the column up to 32 px (`--space-xl`), then stops; in a wider card the
+  spare room goes after the count, so the days still read as a calendar.
 - A day with outreach: a navy dot, lighter the longer ago it was, filling the full cell as a circle.
 - A day without: an empty cream square with the slot's fine edge, `--ws-radius-control` (4 px) corners.
 - Today: the same empty square outlined in salmon at half strength.
@@ -29,12 +30,28 @@ Who reached out, two weeks of day cells a row, a navy dot for a day done and a c
 | `tip` | A day with outreach shows its own small card (its call and outcome) while pointed at |
 | `more` | Adds the quiet line under the grid for names outside the matrix |
 
+**Parts and modifiers**
+
+- `.ws-activity-grid__grid--week`: one week instead of two (seven day columns, no gap column).
+- `.ws-activity-grid__letter`: a day's initial over its column (11 px muted); `--today` is today's, in the salmon word.
+- `.ws-activity-grid__letter--today`: today's initial, in `--ws-word-needs`; under 18rem it is the only letter left.
+- `.ws-activity-grid__dot--past`: a day done a week ago, a lighter navy.
+- `.ws-activity-grid__dot--pointed`: the day under the pointer, salmon (`--ws-chart-under-half` (chart tone 3, so a palette that sets it moves it); with a `__tip`).
+- `.ws-activity-grid__today`: today's cell while nothing is done yet: a salmon edge (`--ws-chart-under-half` at half strength).
+- `.ws-activity-grid__empty--future`: a day not reached yet: a dashed edge.
+- `.ws-activity-grid__count--zero`: a row with no days done: the count in regular muted grey.
+- `.ws-activity-grid__note`: the quiet line under the grid (12 px muted) naming who has not reached out.
+- `.ws-activity-grid__tip`: a day's own small card over its cell (use with `ws-menu`), 8 above it.
+- `.ws-activity-grid__tip-title`: the tip's first line, medium.
+
 **States**
 
 - Default: the matrix simply shows; rows read top to bottom by who did the most.
 - Hover (`tip` given): the pointed-at day's dot turns salmon and its small card appears above it.
 - Quiet: a person with every cell empty, name and count both muted grey, never highlighted as an error.
-- Narrow: columns shrink and stay square; the label column keeps its own width.
+- Narrow: columns shrink and stay square; the label column keeps its own width. Under 18rem (two weeks in a phone
+  card) the gap halves to 2 and the day letters go, all but today's, so no two letters run into each other; the week
+  labels still mark each week's start.
 - Disabled / error / focus / pressed / selected: do not apply to the grid itself; only a `tip` cell responds to a pointer.
 - Reduced motion: cells are simply in place.
 
@@ -69,3 +86,22 @@ Who reached out, two weeks of day cells a row, a navy dot for a day done and a c
 ## Source
 
 **Derived from**: the system's chart rules for a day-cell matrix, the navy "done" tone and the quiet-line pattern for naming who hasn't acted (tokens: `--ws-radius-control`, `--color-brand-navy`, `--ws-word-needs`). **Precedent**: the first product built on the system.
+
+## Markup
+
+```html
+<div class="ws-dots ws-activity-grid__body">
+  <figure class="ws-activity-grid__grid" aria-label="Days with outreach, last two weeks: Priya 6 days">
+    <!-- head row: an empty cell, the week, the gap, the week, the count column -->
+    <span aria-hidden="true"></span><span class="ws-activity-grid__week" aria-hidden="true">Week of Sep 28</span><span aria-hidden="true"></span>
+    <!-- one row a person: the name, 7 day cells, the gap, 7 day cells, the count -->
+    <span class="ws-activity-grid__name ws-activity-grid__name--active" aria-hidden="true">Priya</span>
+    <span class="ws-activity-grid__cell"><span class="ws-activity-grid__dot"></span></span>
+    <span class="ws-activity-grid__cell"><span class="ws-activity-grid__empty"></span></span>
+    <span class="ws-activity-grid__count" aria-hidden="true">6</span>
+  </figure>
+</div>
+```
+
+**Styles**: `ActivityGrid/style.css`, in `bundle.css` and `fello.css` as `.ws-activity-grid`. Every value is a token. `.ws-activity-grid` itself has no styles: it is the hook that
+names the chart (and the root for its modifiers); its parts carry the styles.

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

@@ -119,7 +119,7 @@
 
   <div class="ws-stack">
     <span class="ws-muted">A day pointed at can show its own small card (`tip`); a quiet name stays grey</span>
-    <div style="width: 300px;">
+    <div style="width: 300px; padding-top: var(--space-xl);">
     <div class="ws-card ws-card--inset ws-activity-grid">
       <figure class="ws-activity-grid__grid ws-activity-grid__grid--week" aria-label="Days with outreach, this week: Priya 3 days, Dana 0 days">
         <span aria-hidden="true"></span>

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

@@ -0,0 +1,35 @@
+/* ---- ActivityGrid: who reached out, two weeks of day cells a row and a count at the end ---- */
+.ws-activity-grid__body { display: flex; flex-direction: column; gap: var(--space-xl); padding: var(--space-md) var(--ws-card-inset) var(--space-xxs-plus); container-type: inline-size; }
+/* Day columns share the room up to 32 px each, then stop: in a wide card the days stay a calendar (not 64 px discs)
+   and the count stays beside them, the spare room after it. */
+.ws-activity-grid__grid { display: grid; width: 100%; grid-template-columns: minmax(var(--space-4xl), max-content) repeat(7, minmax(0, var(--space-xl))) var(--space-xs) repeat(7, minmax(0, var(--space-xl))) calc(var(--space-md) + var(--space-xs) * 0.75); justify-content: start; gap: var(--space-xxs); align-items: center; }
+.ws-activity-grid__grid--week { grid-template-columns: minmax(var(--space-4xl), max-content) repeat(7, minmax(0, var(--space-xl))) calc(var(--space-md) + var(--space-xs) * 0.75); }
+.ws-activity-grid__week { grid-column: span 7; align-self: end; font-size: var(--ws-text-micro); font-weight: 500; line-height: var(--font-size-xs); color: var(--color-text-body); text-wrap: balance; }
+.ws-activity-grid__letter { text-align: center; font-size: var(--ws-text-micro); font-weight: 500; color: var(--color-text-muted); }
+.ws-activity-grid__letter--today { color: var(--ws-word-needs); }
+.ws-activity-grid__name { padding-right: var(--space-xs); font-size: var(--ws-text-meta); line-height: var(--space-md); color: var(--color-text-muted); white-space: nowrap; }
+.ws-activity-grid__name--active { font-weight: 500; color: var(--color-text-heading); }
+.ws-activity-grid__cell { position: relative; width: 100%; aspect-ratio: 1; }
+/* A day done: a navy dot, a week ago a lighter navy; salmon while pointed at. */
+.ws-activity-grid__dot { display: block; width: 100%; height: 100%; border-radius: var(--radius-full); background: var(--color-text-heading); }
+.ws-activity-grid__dot--past { background: color-mix(in srgb, var(--ws-chart-navy-light) 40%, var(--color-text-heading)); }
+.ws-activity-grid__dot--pointed { background: var(--ws-chart-under-half); }
+.ws-activity-grid__empty, .ws-activity-grid__today { display: block; width: 100%; height: 100%; border-radius: var(--ws-radius-control); border: var(--ws-hairline) solid var(--ws-edge-slot); background: var(--color-bg-page); }
+.ws-activity-grid__today { border: var(--ws-line) solid color-mix(in srgb, var(--ws-chart-under-half) 50%, var(--color-bg-page)); }
+.ws-activity-grid__empty--future { border-style: dashed; }
+.ws-activity-grid__count { text-align: right; font-size: var(--ws-text-chart); font-weight: 600; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+.ws-activity-grid__count--zero { font-weight: 400; color: var(--color-text-muted); }
+.ws-activity-grid__note { font-size: var(--ws-text-dense); color: var(--color-text-muted); }
+/* Narrow (a phone's card, two weeks under 18rem): the day columns fall under 9 px, where 11 px day letters would run
+   into each other. The gap halves so the cells stay as large as they can, and the letters go, all but today's; the
+   week labels still say where each week starts. */
+@container (max-width: 18rem) {
+  .ws-activity-grid__grid { column-gap: var(--space-3xs); }
+  .ws-activity-grid__letter:not(.ws-activity-grid__letter--today) { visibility: hidden; }
+  /* today's letter is wider than its column now: centre it on the column rather than let it run off to the right */
+  .ws-activity-grid__letter--today { justify-self: center; }
+}
+/* A day's own small card (tip), a menu lifted over its cell. Use with ws-menu. */
+.ws-activity-grid__tip { position: absolute; left: 50%; bottom: calc(100% + var(--space-xs)); transform: translateX(-50%); padding: var(--space-sm); }
+.ws-activity-grid__tip-title { font-weight: 500; }
+

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

@@ -1,110 +1,240 @@
-A conventional product shell for a project that is not chat-first: a left nav of grouped rows, a top bar with the page's
-name and its one act, and a cream stage between them.
+A product's frame, drawn from Seth's North app: a 232 px nav of grouped rows on the frame's wash, a glass stage beside
+it, a 56 px bar at the stage's top and a body that owns the scroll. It folds to a 64 px rail and, on a phone, gives the
+nav to a drawer.
 
 ## Use it when
 
-- The product's work happens on pages a person browses and acts on, not in one running conversation (a chat-first
-  product uses `Sidebar` and a chat instead; see Not for).
-- There are more sections than fit as a flat list and they fall into a few groups (Work, Reports, Settings).
-- Every page needs the same place to search and the same place for its one primary act.
-- A team member needs a persistent reminder of who they are signed in as, at the foot of the nav.
+- The product's work happens on pages a person moves between: a pipeline, a report, a list, settings.
+- There are more destinations than fit a flat list, and they fall into a few groups (Reports, Settings).
+- Every page needs the same place for its name, its acts and a way to fold the nav away.
+- A team member needs to see who they are signed in as, pinned at the foot of the nav.
 
 ## Not for
 
-- A chat-first product where people act by talking to an agent and the pages only show results: use `Sidebar`, organised
-  by app and thread, with no top bar.
-- A single-purpose tool with under about five destinations and no groups: a plain list of `ws-row`s needs no eyebrows or
-  shell.
-- A page's own filters or view switches: those are `Tabs` or `Segmented` inside the stage, never nav rows.
-- The marketing site: it keeps the kit's own `MarketingNav`.
+- A chat-first screen where people act by talking to an agent: that is a chat (`ChatShell`, from WP-cards) with the
+  thread's own `PageBar` when a report opens full screen.
+- A handful of destinations with no groups: a `TopBar` across the top reads better.
+- A page's own filters or view switches: those are `Tabs` or `Segmented` in the body, never nav rows.
+- The marketing site: it keeps `MarketingNav`.
 
 ## Anatomy
 
-- Nav: `--ws-sidebar-width` (232 px) wide, no card of its own, sitting on `--ws-page` beside the stage.
-- Wordmark: the product's name in plain navy type, 16 px semibold (`--ws-text-value`), `--color-text-heading`. A
-  chat-first product's own `Sidebar` draws its own orb and iridescent wordmark instead; a page-based product supplies
-  its mark in this slot when it has one.
-- A group: an eyebrow (12 px, 600, uppercase, `--letter-spacing-overline`, `--color-text-muted`) above its rows.
-- A row: 32 px tall (`--ws-control-h`, the `ws-row` shape), a 20 px line icon (`--ws-icon-lg` is 20 px, used here as a
-  20 px line icon rather than a face), 14 px medium navy words (`--color-text-heading`), `--ws-radius-row` (6 px) corners.
-  The current row is washed `--ws-sidebar-hover`; a count chip (the sidebar's badge shape: the `--ws-tint-needs` wash,
-  its number in `--ws-word-needs`, since salmon itself is never words) sits right-aligned for what needs the person.
-- The person: at the nav's foot, a hairline (`--ws-edge-card`) above it, a neutral `--ws-avatar` disc with navy initials,
-  their name 14 px medium navy, their role 12 px muted.
-- Top bar: `--ws-header-h` (56 px), on the stage, a hairline below it; the page's name 26 px semibold (`--font-size-2xl`,
-  the `headline` role) at the left, a 36 px search box (`--ws-control-h-md`, 4 px corners, the field's hairline) and one
-  `primary`, `large` button at the right.
-- Stage: a 16 px cornered cream surface (`--ws-radius-panel`, drawn with the `ws-card` hairline outline so it reads as one
-  surface against the grey), 24 px gutters (`--ws-gutter`) inside it; the gutter is the canvas's, so a page never adds its
-  own side padding.
-- The shell fills its parent's height (`height: 100%`): on a page, give that parent the window's height (`100dvh`).
-- In fello.css: `.ws-app-shell`, `__nav`, `__wordmark`, `__eyebrow` (with `ws-eyebrow`), `__rows`, `__row` (+ `--current`),
-  `__name`, `__count`, `__foot`, `__stage`, `__bar`, `__title`, `__search`, `__body`; folded: `__rail`, `__mark`
-  (+ `--current`, `--wordmark`).
+- **Frame** (`.ws-app-shell`): the window's ground, `--ws-frame` (Seth's `#EBF0F5` to cream wash over 640 px). It
+  fills its parent's height: give that parent the window's (`100dvh`). It is a size container named `ws-app-shell`.
+- **Nav** (`__nav`): 232 px (`--ws-sidebar-width`), no card of its own, on the frame. It sits on the stage's insets
+  (13 top, 12 bottom) so its top and foot line up with the stage.
+  - Head (`__head`): 56 tall (`--ws-header-h`), so the product's name sits on the bar's line. The name (`__wordmark`)
+    18 / 24 semibold navy; at its right one 32 px icon button that folds the nav. Sides 12 and 8 (the groups'), the name 10 inside them, so it starts on the row icons' edge, 22 in.
+  - Groups (`__groups`): the part that scrolls, between the head and the person. Each group (`__group`) has 12 / 8
+    sides and 4 above and below. A 1 px rule (`--ws-edge-card`) runs the nav's full width between groups, none above
+    the first.
+  - Group name (`__eyebrow`): Seth's sentence-case head, 11 / 16 medium in muted, 28 tall with 12 above the words, on
+    the icons' edge (22 from the nav's side). Seth draws it at 10 px; the kit keeps its 11 px floor.
+  - Rows (`__rows`, `__row`): 28 tall (`--ws-control-h-sm`, 40 on touch), 2 apart, 10 px sides, 6 px corners. A 20 px
+    icon box (the 16 px icon inside it), 4 px, then the name (`__name`) in 13 / 18 medium body grey, truncated with
+    its full words in `title`. Rows are real links (`<a href>`).
+  - Count (`__count`): Seth's navy pill, 18 tall, at least 18 wide, 11 px semibold figures in the act fill's word
+    colour (`--ws-on-act`).
+  - The person (`__foot`): pinned at the foot under a full-width 1 px rule, never scrolled away, 12 above and 6 below,
+    on the rows' edges (22 in at the left, 18 at the right: the groups' 12 / 8 and a row's 10). A 28 px avatar, 10 px,
+    then the name 13 / 16 medium navy (`__foot-name`) over the role in `ws-muted`.
+- **Stage** (`__stage`): `--ws-glass` with a 4 px blur (`--ws-glass-blur`), a 1 px `--ws-edge-stage` edge, 16 px corners
+  (`--ws-radius-panel`), 13 from the window's top (`--ws-stage-inset-top`), 12 from its right and bottom
+  (`--ws-stage-inset`), no gap to the nav (the nav's own 8 px is the gap). `--wash` gives it the Fia frames' cream
+  wash (`--ws-stage-wash`) instead of glass.
+- **Bar** (`__bar`): at least 56 tall, 8 above and below (a bar that wraps never touches the stage's edge), on the
+  content's 32 px edges, flat. It holds the page's name (`__title`, 16 / 22
+  semibold, one line), a `Breadcrumb`, or a `PageBar` (put both classes on one `<header>`), and at its right the acts
+  (`__acts`, 8 apart): a search box (`__search`: a `<label>` round an `<input type="search">`, 220 wide, giving down
+  to 160, 32 tall (40 on touch), the field's inset hairline, the focus ring on the box) and the page's one primary. Its
+  0.5 px edge (an inset hairline, so the bar stays a whole 56 and its controls sit on whole pixels) shows only once the
+  body has scrolled (`__bar--scrolled`).
+- **Body** (`__body`): the page itself. 16 under the bar, 32 at the sides, 40 at the foot, its parts 16 apart. It
+  scrolls and never chains into the window (`overscroll-behavior: contain`), it is a size container (as `.ws-page` is),
+  and its content is capped at the board's two columns (1128, `2 x --ws-chart-card-w + --ws-gap-component`, the same
+  as `.ws-page`; Seth's North caps at 1119) on one start edge, so a section, its tiles, a board and a `Split` all end
+  on one edge. Put no `.ws-page` inside it.
+  - `__body--wide`: a Fia app page (Grow, Fixes, Inbox, Tally) runs the body's full width, Seth's 1350 in a 1416
+    stage, with no cap.
+  - A filled page (a `ws-split--fill` straight in the body, Seth's report and its drawer) ends 24 above the stage's
+    foot (`--ws-gap-group`) instead of 40.
+- **Menu button** (`__menu`): an icon button in the bar, shown only in the phone form (never beside the open nav or
+  the folded rail).
+- **Touch**: the search box is 40 tall and its words 16, so a phone or tablet never zooms into it on focus.
+- In fello.css: `.ws-app-shell` (+ `--folded`, `--wash`), `__nav`, `__head`, `__wordmark`, `__groups`, `__group`,
+  `__eyebrow`, `__rows`, `__row` (+ `--current`), `__name`, `__count`, `__foot`, `__foot-words`, `__foot-name`,
+  `__stage`, `__bar` (+ `--scrolled`), `__title`, `__acts`, `__search`, `__menu`, `__body` (+ `--wide`); the 0.4
+  rail markup `__rail` and `__mark` (+ `--current`, `--wordmark`) still draws, and so does a 0.4 nav (wordmark, group
+  names, rows and person straight in `__nav`, no `__head` or `__groups`): the nav itself scrolls then, with the
+  wordmark and the person pinned to its ends.
 
 ## Variants and sizes
 
 | Variant | Width | Shows |
 | --- | --- | --- |
-| Open (default) | 232 px (`--ws-sidebar-width`) | Wordmark, grouped rows with words and counts, the person |
-| Folded | 72 px (`--ws-rail-width`) | The same rows as marks only, centred, no words, no counts, no person name |
+| Open (default) | 232 px | The head, grouped rows with names and counts, the person |
+| Folded (`--folded`) | 64 px | The same nav: 40 px rows of icons, the current one on its pill; names faded (still read aloud), counts gone, each row's name and count in its `title` (a pointer's tooltip, a screen reader's description), group names and rules gone, the avatar centred |
+| Phone (under 60rem of the shell) | none | The bar's menu button opens the same nav in a drawer at the drawer's width; the stage goes edge to edge, 16 px sides |
+
+| Body | Content width | Use |
+| --- | --- | --- |
+| `__body` (default) | Up to 1128, on the start edge | A page of sections, tiles and boards (North) |
+| `__body--wide` | The body's full width | A Fia app page drawn at 1350 (Grow, Fixes, Inbox, Tally) |
 
 ## States
 
-- **Default**: a quiet row, navy words, no wash.
-- **Hover**: `--ws-sidebar-hover` under the pointer.
-- **Current**: the page's own row keeps the wash without the pointer (`aria-current="page"`).
-- **Needs you**: the salmon count chip on a row, same shape as the sidebar's badge.
-- **Folded**: labels and counts disappear; each mark keeps an `aria-label` so it stays reachable.
-- **Touch**: rows and the search box expand to the 40 px floor; the primary button is already `large` (36 px boxed, 48 px
-  full width on a phone per the house rule for every submit and mobile CTA).
-- **Narrow stage**: below 768 px the nav becomes the phone pattern (a folded bar or a drawer, not drawn here); the top
-  bar's search collapses to an icon button first.
+- **Rest**: body-grey names, muted icons, no wash.
+- **Hover** (pointers that hover): Seth's navy wash, `--ws-hover` (5%), on the row's 6 px corners.
+- **Press**: `--ws-hover-strong` (6%). Rows never scale.
+- **Current** (`aria-current="page"`, or `--current`): a white pill (`--color-surface`, 4 px corners, Seth's two soft
+  navy shades, a light rim in dark), the icon in salmon (a mark keeps Seth's coral) and the name at salmon's AA word
+  step, `--color-text-brand-strong` (D2). Hovering it changes nothing.
+- **Focus**: the 2 px navy ring drawn inside the row (D8), so rows 2 apart never cut it. A body with nothing in it to
+  focus takes the keyboard itself (so it can be scrolled by keys); its ring is drawn inside it too, since the stage
+  clips anything outside.
+- **Needs you**: the navy count pill. A bare number, its meaning in `.ws-sr` words inside it ("7 waiting"), never
+  `aria-label` on the span (ARIA does not let a plain span carry a label).
+- **Long name**: truncates on one line, the full name in `title`.
+- **Folded**: only the icons show, so every row carries its name (and its count, "Pipeline, 7 waiting") in `title`;
+  in React, a `Tooltip` on hover and focus.
+- **Many rows**: the groups scroll; the head and the person stay. In 0.4 markup (no `__groups`) the nav scrolls and the
+  wordmark and the person stick to its ends, on the frame's wash.
+- **Scrolled**: `__bar--scrolled` shows the bar's 0.5 px edge. Set it from the body's scroll:
+  `body.onscroll = () => bar.classList.toggle('ws-app-shell__bar--scrolled', body.scrollTop > 0)`.
+- **Loading**: the body holds `.ws-shimmer` ghosts the size of what is coming, with `aria-busy="true"` and a
+  `<span class="ws-sr" role="status">` saying what is loading (never `aria-label` on the body's `div`); the nav and
+  bar stay.
+- **Phone**: see Variants. On a phone keep the bar to one line: the page's name, at most two icon acts. The search
+  box goes; give the bar a search icon act or put the search at the top of the drawer. With `viewport-fit=cover` the
+  bar keeps clear of the notch and the body's foot clear of the home bar (`env(safe-area-inset-*)`), as the sides do.
 
 ## Behaviour
 
-- Keyboard: every row is a real link or button in document order; the current page is `aria-current="page"`, not colour
-  alone.
-- Pointer: hover washes the row under the pointer; nothing opens on hover alone (no flyouts from this shell).
-- Motion: the current row's wash can glide between rows on `--ws-ease-soft` as in `Sidebar`, or simply be present; the
-  fold trades width over `--ws-duration-settle`. Reduced motion: both land without animating.
-- Touch: 40 px floor on every boxed control, 24 px on a word-only act, same as every other control in the system.
+- Keyboard: rows are links in document order; the fold button carries `aria-expanded` and toggles `--folded` on the
+  shell. The phone's drawer is a `Dialog` (`ws-dialog--drawer`) holding the same `__nav` markup; the head's button
+  becomes its close.
+- Pointer: hover only tints. Nothing opens on hover.
+- Motion (North): the fold trades width over `--ws-duration-shift` on `--ws-ease-shift`; the rows, the current pill
+  and the fold button ride the nav's edge as it moves (nothing jumps to the middle and back), names fade over
+  `--ws-duration-hover`, washes ease in over 200 ms, the bar's edge over `--ws-duration-settle`. The current pill
+  slides to the new page's row, across groups (North's "Sidebar active row slide", `springs.nav` .4 / .1), plain CSS
+  with no script and no new markup: the current row is a CSS anchor and the rows' scroller (`__groups`, or a 0.4 nav
+  that holds its rows) draws the travelling pill in its `::before`, under the rows and the group names, its four edges
+  easing on motion's own `spring(.4, .1)` written out as `linear()` (550 ms; `--ws-spring-nav-duration` and `--ws-spring-nav`). At rest the current row paints its own pill (the 0.4 look); while the rows are pointed at
+  or hold focus the travelling pill takes its place, so a page chosen then (an app that routes without a reload)
+  slides. The fold and a resize carry the pill with its row at once. Without CSS anchor positioning the pill moves at
+  once; the 0.4 rail's marks stay put. The hover wash growing from the pointer (Seth's 18 px seed) is not drawn yet.
+  Reduced motion: everything lands at once. Try it in the preview: click a row.
+- Touch: rows and the menu button grow to the 40 px floor (K10).
+- Nothing inside the stage is trapped by its glass: the blur is drawn by a layer under the content (`::before`), not by
+  the stage, because an element with a `backdrop-filter` becomes the box of every `position: fixed` thing inside it. So
+  a toaster, a phone's full-screen `Panel` or anything the app fixes to the window reaches the window from inside the
+  stage; menus, popovers and dialogs sit in the top layer, a full-screen chat card is lifted there by `morph()`, and a
+  tooltip is anchored to the window. The stage still clips what is inside it to its 16 px corners.
+- The shell owns the scroll (K1, K2): only the body and the groups scroll; nothing in them is squashed.
 
 ## Content
 
-- A group's eyebrow names the kind of page ("Work", "Reports"), uppercase, two words at most.
-- A row's name is the page's own name, sentence case, truncated rather than wrapped.
-- The top bar's title repeats the current page's name exactly, once: the row does not repeat it below.
+- A group's name says what kind of page it holds ("Reports"), sentence case, two words at most. The first group can
+  go without one.
+- A row's name is the page's own name, sentence case.
+- The bar names the page once, exactly as its row does; no second heading repeats it in the body.
 - No em dashes; a count is a bare number.
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `groups` | `{ eyebrow: string; items: NavRow[] }[]` | The nav's sections, in order |
-| `NavRow` | `{ label, icon, href, current?, count? }` | One row: its words, its 20 px icon, whether it is the current page, its count chip |
-| `person` | `{ name, role, initials }` | The foot block |
-| `folded` | `boolean` | Shows the 72 px rail instead of the 232 px nav |
-| `title` | `string` | The top bar's page name |
-| `search` | `{ placeholder, onSearch }` | The top bar's search box |
-| `primaryAction` | `{ label, onClick }` | The top bar's one `primary`, `large` button |
+| `groups` | `{ name?: string; items: NavRow[] }[]` | The nav's groups, in order |
+| `NavRow` | `{ label, icon, href, current?, count? }` | One row: its words, its 16 px icon, whether it is the current page, its count |
+| `person` | `{ name, role, initials }` | The foot |
+| `folded` | `boolean` | The 64 px rail |
+| `bar` | `ReactNode` | The bar's content: a title, a `Breadcrumb` or a `PageBar`, and its acts |
+| `wash` | `boolean` | The cream stage instead of glass |
 
 ## Rules
 
-- **One navy button per page**: the top bar's primary act is the page's one navy button; a row or the stage's own cards
-  never add a second (desk-rules §1).
-- **The gutter is the canvas's**: the stage pads its own content at 24 px; a page placed inside never adds its own side
-  margin (space-and-layout.md, "A page never adds its own padding inside the canvas").
-- **Groups, not a flat list**: once destinations exceed about five, they fall under an eyebrow rather than running
-  together, the same proximity rule as any group of rows (space-and-layout.md, "Grouping").
-- **One navy button per page** and the shared gutters and header height carry over unchanged from a chat-first shell
-  to a page-based one.
-- The brand kit has no shell, nav or top bar of its own to diverge from; this piece is assembled entirely from the
-  shared sizing, colour and spacing tokens.
+- **One navy button per page**: the bar's primary is the page's one; nothing in the body adds a second.
+- **The body is the page**: it brings the 32 px gutter; a page inside never adds its own padding or a `.ws-page`.
+- **The person never scrolls away** and the head never moves: only the groups scroll (K11).
+- **Real links, `aria-current="page"`**: never a clickable `<li>`, never colour alone.
+- **Seth's tokens only**: no raw colour, size or corner; dark comes from the tokens (D12).
 
 ## Source
 
-**Derived from**: a chat-first shell's nav row (32 px row, sliding current wash, salmon count badge), its stage
-gutters and header height, and the one-navy-button-per-page rule, adapted from a chat-first shell to a page-based one.
-**Precedent**: an intentional addition decided from the system, 26 Oct 2026 (the first product built on the system is
-chat-first and never needed this shell).
+**Derived from**: Seth's North app (`style1.css` 22 to 112, 531 to 560; the 232 px sidebar, its 28 px rows, rules,
+navy count, white current pill, the 64 px rail, the glass stage and the frame), the Fia frames' 56 px thread header and
+32 px gutter (D4), and Revenue OS faults K1, K2, K3, K11 and K12. **Precedent**: kit 0.4's AppShell, upgraded in place
+4 Nov 2026 (the 0.4 markup still draws).
+
+## Markup
+
+```html
+<div class="ws-app-shell">
+  <nav class="ws-app-shell__nav" aria-label="Main">
+    <div class="ws-app-shell__head">
+      <span class="ws-app-shell__wordmark">Fello</span>
+      <button type="button" class="ws-icon-btn" aria-label="Fold the menu" aria-expanded="true">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2.5" width="12" height="11" rx="2"/><path d="M6 2.5v11"/></svg>
+      </button>
+    </div>
+    <div class="ws-app-shell__groups">
+      <div class="ws-app-shell__group">
+        <ul class="ws-app-shell__rows">
+          <li><a href="/pipeline" class="ws-app-shell__row" aria-current="page">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M2 6.5h12"/></svg>
+            <span class="ws-app-shell__name">Pipeline</span>
+            <span class="ws-app-shell__count">7<span class="ws-sr"> waiting</span></span>
+          </a></li>
+        </ul>
+      </div>
+      <div class="ws-app-shell__group">
+        <h2 class="ws-app-shell__eyebrow">Reports</h2>
+        <ul class="ws-app-shell__rows">
+          <li><a href="/performance" class="ws-app-shell__row">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13V8M8 13V3M13 13V9.5"/></svg>
+            <span class="ws-app-shell__name">Performance</span>
+          </a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="ws-app-shell__foot">
+      <span class="ws-avatar ws-avatar--sm ws-avatar--plain">PN</span>
+      <span class="ws-app-shell__foot-words">
+        <span class="ws-app-shell__foot-name">Priya Nair</span>
+        <span class="ws-muted">Team lead</span>
+      </span>
+    </div>
+  </nav>
+  <div class="ws-app-shell__stage">
+    <header class="ws-app-shell__bar">
+      <button type="button" class="ws-icon-btn ws-app-shell__menu" aria-label="Open the menu">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/></svg>
+      </button>
+      <h1 class="ws-app-shell__title">Pipeline</h1>
+      <div class="ws-app-shell__acts">
+        <label class="ws-app-shell__search">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><circle cx="6.8" cy="6.8" r="3.8"/><path d="M9.7 9.7l3.6 3.6"/></svg>
+          <input type="search" placeholder="Search leads" aria-label="Search leads">
+        </label>
+        <button type="button" class="ws-btn ws-btn--primary">Add a lead</button>
+      </div>
+    </header>
+    <main class="ws-app-shell__body">
+      <!-- the page: sections, tiles, a board, a Split -->
+    </main>
+  </div>
+</div>
+```
+
+## Styles
+
+`AppShell/style.css`, with `IconButton`, `Button` and `Avatar` for the bar's acts and the person (`ws-muted` is the
+house's). Tokens: `--ws-frame`,
+`--ws-glass`, `--ws-glass-blur`, `--ws-stage-wash`, `--ws-edge-stage`, `--ws-stage-inset-top`, `--ws-stage-inset`,
+`--ws-sidebar-width`, `--ws-header-h`, `--ws-control-h-sm`, `--ws-touch`, `--ws-field`, `--ws-field-ink`,
+`--ws-focus-width`, `--ws-focus-color`, `--ws-focus-offset`, `--ws-radius-row`, `--ws-radius-control`,
+`--ws-radius-panel`, `--ws-hover`, `--ws-hover-strong`, `--ws-float-rim`, `--ws-shade`, `--ws-ink`,
+`--color-surface`, `--color-text-brand-strong`, `--ws-chart-under-half`, `--ws-on-act`, `--ws-edge-card`,
+`--ws-hairline`, `--ws-chart-card-w`, `--ws-gap-component`, `--ws-gap-group`, `--ws-text-value`, `--ws-duration-shift`, `--ws-ease-shift`. The shell sets `--ws-gutter` to `--space-xl` (32)
+for everything inside it.