@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,74 @@
+/* ---- Dialog: the native <dialog>, a cream pane in a 1 px tray rim over the navy scrim; --drawer floats in from the right edge ---- */
+/* The pane (D5, Seth's check drawer 301:2011): the tray rim, 12 px corners (11 inside), the raised ground and one
+   floating lift, since it sits over a scrim. Every part sits 28 in from the sides, the band's own inset, so the title,
+   the content and the foot share one edge. It never grows past the window (K4): the head and the foot stay, the
+   content between them scrolls. Nothing is clipped (K9), so the foot rounds its own corners.
+   A plate, a well or a hover inside sits half a step above the pane (raised to press): the house sunk exactly in light,
+   and still seen in dark, where the page's sunk is the pane's own raised. The house points --ws-surface-sunk at --ws-raised-sunk here. */
+.ws-dialog { --ws-dialog-inset: var(--ws-band-inset); display: flex; flex-direction: column; width: calc(100% - var(--space-xl)); max-width: 42rem; /* raw: Ignite's Dialog cap (max-w-2xl); no width token */ max-height: calc(100dvh - var(--space-xl)); padding: 0; overflow: visible; border: var(--ws-rim) solid var(--ws-tray); border-radius: var(--ws-radius-drawer); background: var(--ws-raised); color: var(--color-text-body); box-shadow: var(--ws-shadow-float); }
+dialog.ws-dialog:not([open]) { display: none; }
+.ws-dialog::backdrop { background: var(--ws-scrim); }
+/* The compact head (K6): one title, at most one line under it, the close and at most two icon acts. Facts, chips and
+   buttons go in the content. It never wraps (a card's head drops its aside under a short title; here the close stays
+   top right and the title wraps beside it). The close is Seth's 32 px tray square, centred on the title's first line
+   (on its letters, which sit a hairline above the 28 px line's middle). Doubled class: IconButton's transparent
+   ground comes later in the bundle and would win. */
+.ws-dialog > .ws-head { flex-wrap: nowrap; gap: var(--space-sm); padding: var(--ws-card-inset) var(--ws-dialog-inset) var(--space-md); }
+/* A head with no content after it (a confirm) keeps the 20 the content leaves above the foot. */
+.ws-dialog > .ws-head:has(+ .ws-band) { padding-bottom: var(--ws-card-inset); }
+.ws-dialog > .ws-head > div { gap: var(--space-xxs); min-width: 0; }
+.ws-icon-btn.ws-dialog__close { --ws-dialog-close: var(--ws-control-h); margin-block: calc((var(--ws-leading-title) - var(--ws-dialog-close)) / 2 - var(--ws-hairline)) calc((var(--ws-leading-title) - var(--ws-dialog-close)) / 2 + var(--ws-hairline)); border-radius: var(--ws-radius-row); background-color: var(--ws-tray); color: var(--color-text-heading); }
+@media (hover: hover) { .ws-icon-btn.ws-dialog__close:hover { background-color: var(--ws-well-hover); } }
+@media (pointer: coarse) { .ws-icon-btn.ws-dialog__close { --ws-dialog-close: var(--ws-touch); } }
+/* The content scrolls on its own (K4) and holds its parts 16 apart. 4 px on top keeps a first field's focus ring. It runs
+   the pane's full width, so its own focus ring (a keyboard scroller) is drawn inside it, never over the rim (D8). */
+.ws-dialog__content { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-md); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-xxs) var(--ws-dialog-inset) var(--ws-card-inset); }
+.ws-dialog__content:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+.ws-dialog > .ws-band { border-bottom-left-radius: var(--ws-radius-drawer-inner); border-bottom-right-radius: var(--ws-radius-drawer-inner); }
+/* The foot's buttons as one group, right of its note: they wrap together, the one primary last. On a phone they fill
+   the width in equal halves, and stack, the primary at the bottom, where a half would be under 160 or a label would
+   break (Seth's pane foot, 301:2099, the same rule as Button's ws-btn-split). */
+.ws-dialog__acts { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-left: auto; }
+@media (max-width: 40rem) { .ws-dialog__acts { flex: 1 1 100%; } .ws-dialog__acts > * { flex: 1 1 var(--space-8xl); min-width: min(100%, max-content); } }
+/* A short window or a phone (K6): the whole pane scrolls as one, only the head stays, so the content gets the screen
+   even when a head holds more than its title. The content still grows into a drawer's height, so its foot stays at
+   the bottom instead of floating under a short content. */
+@media (max-height: 40rem), (max-width: 40rem) {
+  .ws-dialog { overflow-y: auto; overscroll-behavior: contain; }
+  .ws-dialog__content { flex: 1 0 auto; overflow: visible; }
+  .ws-dialog > .ws-head { position: sticky; top: 0; z-index: 1; border-radius: var(--ws-radius-drawer-inner) var(--ws-radius-drawer-inner) 0 0; background: var(--ws-raised); }
+}
+/* The drawer (K5): 440 wide, floating 12 in from the window's edges with the stage's corners; under 40rem it is the
+   whole screen. --start comes from the left edge. */
+.ws-dialog--drawer { width: min(calc(100% - var(--ws-stage-inset) * 2), var(--ws-thing-width)); max-width: none; height: calc(100% - var(--ws-stage-inset) * 2); max-height: calc(100dvh - var(--ws-stage-inset) * 2); margin: var(--ws-stage-inset) var(--ws-stage-inset) var(--ws-stage-inset) auto; }
+.ws-dialog--drawer-start { margin: var(--ws-stage-inset) auto var(--ws-stage-inset) var(--ws-stage-inset); }
+@media (max-width: 40rem) {
+  .ws-dialog--drawer { width: 100%; height: 100%; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
+  .ws-dialog--drawer > :is(.ws-head, .ws-band) { border-radius: 0; }
+}
+/* Motion (D7, North's window, js@540954): it grows 14 px up out of .98 on the settle spring (.32 / .1) as the scrim fades
+   in over .2 s, then its details settle in after it ("opens grow from their slot, then details settle": the head, the
+   content and the foot rise 6 px out of a 3 px blur over .32 s soft, .08 s after it and 22 ms apart, as North's opened
+   tile's details). It leaves faster and shorter: 8 px down to .98 over .12 s. A drawer slides in from its edge on the
+   grow curve over .55 s ("Card grows open") and goes back over .4 s ("Card closes back into place"). Native <dialog>
+   only: @starting-style for the entrance, display and overlay allow-discrete so the exit plays. With reduced motion it
+   simply appears and goes. */
+dialog.ws-dialog { --ws-dialog-after: 80ms; /* raw: North's details wait .08 s (open.content delay) */ }
+@media (prefers-reduced-motion: no-preference) {
+  dialog.ws-dialog, dialog.ws-dialog::backdrop { transition: opacity var(--ws-duration-exit) var(--ws-ease-exit), transform var(--ws-duration-exit) var(--ws-ease-exit), overlay var(--ws-duration-exit) var(--ws-ease-exit) allow-discrete, display var(--ws-duration-exit) var(--ws-ease-exit) allow-discrete; }
+  dialog.ws-dialog:not([open]) { opacity: 0; transform: translateY(var(--space-xs)) scale(var(--ws-open-scale-pane)); }
+  dialog.ws-dialog:not([open])::backdrop { opacity: 0; }
+  dialog.ws-dialog[open] { transition: opacity var(--ws-spring-settle-duration) var(--ws-spring-settle), transform var(--ws-spring-settle-duration) var(--ws-spring-settle), overlay 0s allow-discrete, display 0s allow-discrete; }
+  dialog.ws-dialog[open]::backdrop { transition: opacity var(--ws-duration-hover) var(--ws-ease-soft), overlay 0s allow-discrete, display 0s allow-discrete; }
+  dialog.ws-dialog--drawer[open] { transition: opacity var(--ws-duration-grow) var(--ws-ease-grow), transform var(--ws-duration-grow) var(--ws-ease-grow), overlay 0s allow-discrete, display 0s allow-discrete; }
+  dialog.ws-dialog--drawer:not([open]) { transform: translateX(calc(100% + var(--ws-stage-inset))); transition-duration: var(--ws-duration-shrink); transition-timing-function: var(--ws-ease-grow); }
+  dialog.ws-dialog--drawer-start:not([open]) { transform: translateX(calc(-100% - var(--ws-stage-inset))); }
+  dialog.ws-dialog[open] > * { animation: ws-settle var(--ws-duration-settle) var(--ws-ease-soft) var(--ws-dialog-after) backwards; }
+  @supports (animation-delay: calc(sibling-index() * 1ms)) { dialog.ws-dialog[open] > * { animation-delay: calc(var(--ws-dialog-after) + (sibling-index() - 1) * var(--ws-stagger-detail)); } }
+  @starting-style {
+    dialog.ws-dialog[open] { opacity: 0; transform: translateY(var(--space-sm-plus)) scale(var(--ws-open-scale-pane)); }
+    dialog.ws-dialog--drawer[open] { transform: translateX(calc(100% + var(--ws-stage-inset))); }
+    dialog.ws-dialog--drawer-start[open] { transform: translateX(calc(-100% - var(--ws-stage-inset))); }
+    dialog.ws-dialog[open]::backdrop { opacity: 0; }
+  }
+}

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

@@ -1,9 +1,9 @@
-Nothing here yet: the same card the place would show, with its mark on the dots and the one act that fills it.
+Nothing here yet: the same plain cream card the place would show, with its mark and the one act that fills it.
 
 ## Use it when
 
 - A page or a panel has no data yet for a reason the person can act on (nothing connected, nothing created, no matches).
-- An app's first screen should introduce itself before there is anything real to show (the app's own face, still, on the dots).
+- An app's first screen should introduce itself before there is anything real to show (the app's own face, still, on the plain card).
 - A filtered list comes back with nothing: say so, and offer the one way to see something again.
 
 ## Not for
@@ -14,11 +14,14 @@ Nothing here yet: the same card the place would show, with its mark on the dots
 
 ## Anatomy
 
-- The same `Card`, on the dotted field (`chartDots`), centred text, `--space-md` side padding and `--space-2xl` top padding.
-- Its mark: an icon on a cream disc (`--radius-full`, the hairline shadow, `--color-text-heading` icon at `--space-md`, 16 px); a first-run introduction uses a smaller, plain 24 px `ws-disc` and line icon instead, standing in for an app's own illustration.
-- A 16 px semibold navy title (`--ws-text-value`, `ws-tracking-title`).
-- One sentence under it, `max-w-md`, body grey-7.
-- An optional action underneath, with `--space-xxs` of its own top padding.
+- The same `Card` (the tray rim round the cream), plain cream with no dots (the dotted field is a chart's ground
+  only, owner's ruling of 2 Nov), centred text, 40 px above
+  (`--space-2xl`), 16 px at the sides and under, its parts 8 px apart.
+- Its mark: an icon on a cream disc (`--radius-full`, the hairline shadow, `--color-text-heading` icon at `--space-md`, 16 px); a first-run introduction uses a smaller, plain 24 px disc on the sunk cream (`ws-empty-state__mark--intro`, a 12 px line icon, no shadow) instead, standing in for an app's own illustration.
+- A 15 / 22 semibold navy title (`ws-section`, Seth's section title).
+- One sentence under it, 14 / 20 in `--color-text-body`, at most 260 px wide.
+- The act in the card's band (`ws-band`, its buttons in `ws-band__acts`); in a card under 26rem the act takes the
+  band's whole line.
 
 ## Variants and sizes
 
@@ -32,14 +35,18 @@ Nothing here yet: the same card the place would show, with its mark on the dots
 - **First use**: the small intro disc, a welcoming title, the one act that starts things.
 - **No matches**: a search or filter icon, a title naming what did not match, an act that clears the filter.
 - **Unavailable data**: an icon naming what is missing, a title that says what is not connected, an act that connects it.
-- **With an action**: the act sits under the sentence, its own small gap above it.
+- **With an action**: the act sits in the band, at its end on a wide card, across the whole band on a narrow one.
 - **Without an action**: the card ends after the sentence; nothing is invented to fill the space.
+- **Long title**: it wraps, centred; nothing is cut off.
+- **Loading**: not an empty state. Use `Skeleton` until the answer arrives.
+- **Dark**: the card and the disc follow the theme.
 
 ## Behaviour
 
 - Keyboard: its title is a real heading (`h2`), so the empty card is reachable like any other section; its action, if given, is a normal button or link.
 - Pointer and touch: only the action (if any) is interactive; the rest of the card is static.
-- Motion: the whole card rises in (`ws-rise`, `--ws-duration-settle` on `--ws-ease-soft`) like any other arriving card.
+- Motion: the whole card settles in (`ws-settle`: 6 px, out of a 3 px blur, `--ws-duration-settle`) like any other
+  arriving card.
 - Reduced motion: it appears in place without rising.
 
 ## Content
@@ -60,13 +67,15 @@ Nothing here yet: the same card the place would show, with its mark on the dots
 
 ## Rules
 
-- "An empty state is the same card with the place's mark on the dots and the act that fills it in the band" (the system's own pattern).
+- An empty state is the same plain cream card with the place's mark and the act that fills it in the band; the dots
+  are a chart's ground only, never an empty state's (owner, 2 Nov; logged in 17-decisions).
 - A card whose data does not exist is left out, never faked: `EmptyState` is for "there is an answer, and it is nothing you can act on yet", never a stand-in for data that will never come.
-- The same dots, the same card edge, the same title size as every other chart card: an empty state never looks like a different kind of surface.
+- The same card rim, the same cream, the same title as every other card: an empty state never looks like a different
+  kind of surface.
 
 ## Source
 
-**Derived from**: the card system's dotted-field pattern, generalized so a plain 24 px disc and line icon stand in
+**Derived from**: the card system's empty-state pattern (once drawn on the dotted field, now a plain card), generalized so a plain 24 px disc and line icon stand in
 for an app's own illustration rather than requiring one. **Precedent**: the first product built on the system (its
 own first-run screen used an agent's face image in this slot).
 
@@ -74,3 +83,24 @@ own first-run screen used an agent's face image in this slot).
 band" (the card's footer band, with its 28 px sides and inset shade). The reference implementation has no footer
 band at all: its action is a plain centred slot directly under the sentence. This preview follows the documented
 band rule; the component as built does not currently draw one.
+
+## Markup
+
+```html
+<div class="ws-card">
+  <div class="ws-empty-state__body">
+    <span class="ws-empty-state__mark" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.5"/><path d="M13 13l-2.5-2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span>
+    <h2 class="ws-section">No leads match</h2>
+    <p class="ws-body ws-empty-state__words">Try a different stage or clear the filter.</p>
+  </div>
+  <footer class="ws-band">
+    <div class="ws-band__words"><p class="ws-band__title">Clear the filter</p></div>
+    <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Clear</button></div>
+  </footer>
+</div>
+```
+
+## Styles
+
+`EmptyState/style.css` (the body and the mark); the card and the band are `Card` and the house. Tokens:
+`--space-2xl`, `--space-md`, `--space-xl`, `--ws-shadow-hairline`, `--ws-surface-sunk`, `--color-text-heading`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Cards" height=596 -->
+<!-- @dsCard group="Cards" height=352 -->
 <!doctype html>
 <html>
 <head>
@@ -8,11 +8,11 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage ws-stage--grey">
+<div class="ws-stage">
 
-  <div class="ws-stack" style="min-width: 300px;">
+  <div class="ws-stack" style="width: 340px;">
     <span class="ws-muted">First use: an introduction, a plain disc and icon standing in for the app's own mark</span>
-    <div class="ws-card ws-dots">
+    <div class="ws-card">
       <div class="ws-empty-state__body">
         <span class="ws-empty-state__mark ws-empty-state__mark--intro" aria-hidden="true">
           <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h10a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H7l-2.5 2v-2H3a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z"/></svg>
@@ -25,14 +25,14 @@
           <p class="ws-band__title">Start your first call</p>
           <p class="ws-band__how">The assistant lines up who to call next</p>
         </div>
-        <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Start</button>
+        <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Start</button></div>
       </footer>
     </div>
   </div>
 
-  <div class="ws-stack" style="min-width: 300px;">
+  <div class="ws-stack" style="width: 340px;">
     <span class="ws-muted">No matches</span>
-    <div class="ws-card ws-dots">
+    <div class="ws-card">
       <div class="ws-empty-state__body">
         <span class="ws-empty-state__mark" aria-hidden="true">
           <svg viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.5"/><path d="M13 13l-2.5-2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
@@ -44,14 +44,14 @@
         <div class="ws-band__words">
           <p class="ws-band__title">Clear the filter</p>
         </div>
-        <button type="button" class="ws-btn ws-btn--secondary">Clear</button>
+        <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Clear</button></div>
       </footer>
     </div>
   </div>
 
-  <div class="ws-stack" style="min-width: 300px;">
+  <div class="ws-stack" style="width: 340px;">
     <span class="ws-muted">Unavailable data: left out, never faked, except where its own act still fits the band</span>
-    <div class="ws-card ws-dots">
+    <div class="ws-card">
       <div class="ws-empty-state__body">
         <span class="ws-empty-state__mark" aria-hidden="true">
           <svg viewBox="0 0 16 16" fill="none"><path d="M8 2l6 3.5v5L8 14l-6-3.5v-5L8 2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 8v3M8 5.5v.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
@@ -63,7 +63,7 @@
         <div class="ws-band__words">
           <p class="ws-band__title">Connect your site</p>
         </div>
-        <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Connect</button>
+        <div class="ws-band__acts"><button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Connect</button></div>
       </footer>
     </div>
   </div>

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

@@ -0,0 +1,9 @@
+/* ---- EmptyState: a plain cream card with a mark, a title, one sentence and the act in the band (the dots are a chart's ground only) ---- */
+.ws-empty-state__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-2xl) var(--space-md) var(--space-md); text-align: center; }
+/* The mark: an icon on a cream disc with the hairline; a first run uses the plain 24 px ws-disc instead (--intro). */
+.ws-empty-state__mark { display: flex; width: var(--space-xl); height: var(--space-xl); align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-bg-page); box-shadow: var(--ws-shadow-hairline); }
+.ws-empty-state__mark svg { width: var(--space-md); height: var(--space-md); color: var(--color-text-heading); }
+.ws-empty-state__mark--intro { width: var(--space-lg); height: var(--space-lg); background: var(--ws-surface-sunk); box-shadow: none; }
+.ws-empty-state__mark--intro svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+.ws-empty-state__words { max-width: calc(var(--space-9xl) + var(--space-4xl) - var(--space-xxs)); }
+

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

@@ -1,82 +1,107 @@
-The frame for every page before the product's main workspace: the wordmark top left, a centred column rising in, and on a wide
-window a grey panel beside it holding a sample of the product's own cards.
+The frame for every page before the product's main workspace: the wordmark top left, a centred column, and on a wide
+frame a grey panel beside it holding a sample of the product's own cards.
 
 ## Use it when
 
-- Sign-in, an invite, or any of the welcome steps need the product's frame before a person has a team or a chat
-  to land in.
-- A status screen (an expired invite, a setup gate) needs the same quiet, centred frame.
+- Sign-in, an invite, or any welcome step needs the product's frame before a person has a team or a chat to land in.
+- A gate before the product (an expired invite, a setup step) needs the same quiet, centred frame.
 
 ## Not for
 
-- Anything inside the main workspace itself: once a person is signed in, `Workspace` and the sidebar take over: `EntryShell`
-  never wraps a chat or an app page.
-- A dialog or a drawer: those float over the workspace; `EntryShell` is a whole page's own frame.
-- A page that needs the full window's width: the column is capped (`max-w-sm` by default, `max-w-xl` for a wider
-  step), never edge to edge.
+- Anything inside the workspace: once a person is signed in, `AppShell` (or the chat) takes over.
+- A dialog or a drawer: those float over the workspace.
+- A whole-page failure: `StatusScreen`.
 
 ## Anatomy
 
-- Wordmark: top left of the main column, plain navy text "Fello" at 16 px semibold (`--font-size-md`,
-  `--color-text-heading`); no logo file exists for this system, so the column shows the name alone, no `href` since
-  there is nowhere to link yet.
-- Centre: the column rises in (`ws-arrive`) and sits in the middle of the height, the sign-in form alone, no cast of
-  faces above it.
-- Form: one card's worth of fields and the product's one large navy button, full width
-  (`ws-btn--lg`, `--ws-control-h-md`, 36 px).
-- Aside (from a wide window only): a panel of the sidebar's own grey (`--ws-page`), `--ws-radius-panel` (16 px)
-  corners, holding one or more sample cards, the first on its own, the rest a step lower and after it, each
-  rising in on its own beat.
+- The shell (`.ws-entry-shell`): a size container named `ws-entry-shell`. It fills its parent (K17): a parent with a
+  height (`min-height: 100%`), a flex column that has only a `min-height` (`flex: 1 0 auto`), or `--page` for the
+  window's (`100dvh`).
+- Main (`__main`): the cream ground, 24 inside.
+  - Wordmark (`__wordmark`): "Fello" in navy, 16 / 24 semibold, top left, no link.
+  - Centre (`__center`): the column, centred both ways, 40 above and below.
+  - Form (`__form`): up to 320 wide (`--space-9xl` + `--space-7xl`), its parts 24 apart; the title (`__title`)
+    24 / 32 semibold, centred; the field the large one, 36 tall (40 on touch); the one large navy button, full width.
+- Aside (`__aside`): from 48rem of the shell's own width only. The grey (`--ws-page`), 16 px corners, 8 in from the
+  frame, 40 inside, centred, holding an eyebrow and sample cards (`__samples`, 16 apart; `__sample`, 16 inside, a label
+  in `ws-muted` over Seth's 32 / 38 tile figure, `__sample-figure`). It is `aria-hidden`.
 
 ## Variants and sizes
 
-| Width | Shows |
+| Its own width | Shows |
 | --- | --- |
-| Narrow (no `preview`, or under `lg`) | The main column alone, centred in the full width |
-| Wide, with a `preview` | The main column capped, the grey aside beside it with its sample cards |
+| Under 48rem | The main column alone, the form centred in it |
+| 48rem and up, with an aside | The main column and the grey aside, each half, both the frame's full height |
 
 ## States
 
-- **Default**: as drawn above, the form ready for input.
-- **Rising in**: the whole centred column arrives with `ws-arrive`; the aside's cards rise in after it, each a
-  beat later than the one before (`ws-rise`, staggered by `--ws-duration-instant` per card).
-- **Submitting**: the one button shows its own pending state (a working dot, disabled siblings): not drawn in
-  this static preview; see `Button`'s `pending` prop.
-- **Narrow window**: the aside is hidden entirely (`hidden lg:flex`), never shrunk to fit beside the form.
+- **Default**: the form ready for input.
+- **Arriving**: the centre arrives (`ws-arrive`), the sample cards settle in after it (`ws-settle`, `--ws-i`).
+- **Error**: the field's error under it (`ws-field-msg--error`, `aria-describedby`), the field's salmon edge.
+- **Submitting**: the button's own pending state (see `Button`); nothing else moves.
+- **Narrow**: the aside is left out, never squeezed beside the form.
 
 ## Behaviour
 
-- Keyboard: the email field and the one button are the whole tab order.
-- The frame scrolls itself on a standalone page (21 Oct 2026): a long welcome step is never cut off, unlike the
-  workspace's own canvas, which never scrolls on its own.
-- Motion: everything here uses `--ws-ease-soft`; reduced motion lands every piece in place without rising.
-- The aside is `aria-hidden`: it is a picture of the product, nothing in it can be reached by keyboard or read by
-  a screen reader.
+- Keyboard: the field and the button are the whole tab order.
+- The frame scrolls itself on a standalone page; a long step is never cut off.
+- Motion on `--ws-ease-soft`; reduced motion lands every piece in place.
+- The aside is a picture: hidden from screen readers, nothing in it to press.
 
 ## Content
 
-- The heading names the one act ("Sign in"), sentence case, no em dashes.
-- The button's words are the one act in full ("Continue"), never a bare "Submit" or "Go".
-- The aside's sample numbers are realistic but never real: "26 cold calls", not a live figure.
+- The title names the one act ("Sign in"), sentence case.
+- The button's words are the act in full ("Continue"), never "Submit".
+- The aside's numbers are realistic but never real.
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
 | `children` | `ReactNode` | The page's own form or steps |
-| `preview` | `ReactNode[]` | Sample cards for the aside; its absence hides the aside entirely |
-| `note` | `string` | The aside's small eyebrow label |
-| `width` | `string` | The column's cap (`max-w-sm` default, `max-w-xl` for a longer step) |
+| `preview` | `ReactNode[]` | Sample cards for the aside; without it there is no aside |
+| `note` | `string` | The aside's eyebrow |
+| `page` | `boolean` | Fills the window (`--page`) |
 
 ## Rules
 
-- **The preview is a picture of the product**, never real data: it is hidden from screen readers and holds
-  nothing to press.
-- No microphone test step and no consent popup appear on any entry page (the system's rule); none is drawn here
-  either.
+- **The preview is a picture of the product**, never real data.
+- No microphone test and no consent popup on any entry page.
 
 ## Source
 
-**Derived from**: the product's entry frame (the wordmark, the rising centred column, the grey aside previewing
-sample cards). **Precedent**: the first product built on the system (its own wordmark is a coloured mark and name;
-this system draws plain navy text instead, since no shared logo file exists).
+**Derived from**: the product's entry frame (the wordmark, the centred column, the grey aside of samples), Seth's 32 /
+38 tile figure (D6) and Revenue OS fault K17 (the shell did not fill its frame: on Sign in the aside stopped at 780 in a
+900 window). **Precedent**: the first product built on the system.
+
+## Markup
+
+```html
+<div class="ws-entry-shell ws-entry-shell--page">
+  <div class="ws-entry-shell__main">
+    <span class="ws-entry-shell__wordmark">Fello</span>
+    <div class="ws-entry-shell__center ws-arrive">
+      <form class="ws-entry-shell__form">
+        <h1 class="ws-entry-shell__title">Sign in</h1>
+        <div class="ws-field">
+          <label class="ws-label" for="email">Email</label>
+          <input class="ws-input" id="email" type="email" autocomplete="email">
+        </div>
+        <div class="ws-entry-shell__acts"><button type="submit" class="ws-btn ws-btn--primary ws-btn--lg">Continue</button></div>
+      </form>
+    </div>
+  </div>
+  <aside class="ws-entry-shell__aside" aria-hidden="true">
+    <p class="ws-eyebrow">What&rsquo;s waiting</p>
+    <div class="ws-entry-shell__samples">
+      <div class="ws-card ws-entry-shell__sample"><span class="ws-muted">Cold calls</span><span class="ws-entry-shell__sample-figure">26</span></div>
+    </div>
+  </aside>
+</div>
+```
+
+## Styles
+
+`EntryShell/style.css`, with `Input`, `Button` and `Card` for the field, the button and the samples. Tokens: `--ws-page`,
+`--color-bg-page`, `--ws-radius-panel`, `--ws-control-h-md`, `--ws-text-figure`, `--ws-leading-figure`,
+`--ws-tracking-display`, `--space-9xl`, `--space-7xl`, `--space-2xl`, `--space-lg`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Desk" height=488 -->
+<!-- @dsCard group="Desk" height=984 -->
 <!doctype html>
 <html>
 <head>
@@ -8,37 +8,70 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage" style="justify-content: center;">
-  <div style="display: grid; width: 900px; max-width: 100%; min-height: 440px; border: var(--ws-hairline) solid var(--ws-edge-card); border-radius: var(--ws-radius-panel); overflow: hidden;"><div class="ws-entry-shell">
-    <div class="ws-entry-shell__main">
-      <span class="ws-entry-shell__wordmark">Fello</span>
-      <div class="ws-entry-shell__center">
-        <form class="ws-entry-shell__form" onsubmit="return false;">
-          <h1 class="ws-entry-shell__title">Sign in</h1>
-          <div class="ws-field">
-            <label class="ws-label" for="es-email">Email</label>
-            <input class="ws-input" id="es-email" type="email" placeholder="ryan@theyoungteam.example" autocomplete="email">
+<div class="ws-stage ws-stage--column" style="align-items: center;">
+
+  <div class="ws-stack" style="width: 900px; max-width: 100%;">
+    <span class="ws-muted">From 48rem of its own width: the form centred in its column, the grey aside of samples beside it, both the frame's full height</span>
+    <div style="display: grid; min-height: 440px; border-radius: var(--ws-radius-panel); overflow: hidden; box-shadow: var(--ws-shadow-hairline);"><div class="ws-entry-shell">
+      <div class="ws-entry-shell__main">
+        <span class="ws-entry-shell__wordmark">Fello</span>
+        <div class="ws-entry-shell__center ws-arrive">
+          <form class="ws-entry-shell__form" onsubmit="return false;">
+            <h1 class="ws-entry-shell__title">Sign in</h1>
+            <div class="ws-field">
+              <label class="ws-label" for="es-email">Email</label>
+              <input class="ws-input" id="es-email" type="email" placeholder="ryan@theyoungteam.example" autocomplete="email">
+            </div>
+            <div class="ws-entry-shell__acts">
+              <button type="submit" class="ws-btn ws-btn--primary ws-btn--lg">Continue</button>
+            </div>
+          </form>
+        </div>
+      </div>
+      <aside class="ws-entry-shell__aside" aria-hidden="true">
+        <p class="ws-eyebrow">What&rsquo;s waiting</p>
+        <div class="ws-entry-shell__samples">
+          <div class="ws-card ws-entry-shell__sample ws-settle" style="--ws-i: 1;">
+            <span class="ws-muted">Cold calls</span>
+            <span class="ws-entry-shell__sample-figure">26</span>
           </div>
-          <div class="ws-entry-shell__acts">
-            <button type="submit" class="ws-btn ws-btn--primary ws-btn--lg">Continue</button>
+          <div class="ws-card ws-entry-shell__sample ws-settle" style="--ws-i: 2;">
+            <span class="ws-muted">New leads</span>
+            <span class="ws-entry-shell__sample-figure">4</span>
           </div>
-        </form>
-      </div>
-    </div>
-    <aside class="ws-entry-shell__aside" aria-hidden="true">
-      <p class="ws-eyebrow">What&rsquo;s waiting</p>
-      <div class="ws-entry-shell__samples">
-        <div class="ws-card ws-entry-shell__sample ws-rise">
-          <span class="ws-muted">Cold calls</span>
-          <span class="ws-entry-shell__sample-figure">26</span>
         </div>
-        <div class="ws-card ws-entry-shell__sample ws-rise" style="animation-delay: var(--ws-stagger);">
-          <span class="ws-muted">New leads</span>
-          <span class="ws-entry-shell__sample-figure">4</span>
+      </aside>
+    </div></div>
+  </div>
+
+  <div class="ws-stack" style="width: 560px; max-width: 100%;">
+    <span class="ws-muted">Under 48rem: the form alone, the aside left out rather than squeezed; an error under the field</span>
+    <div style="display: grid; min-height: 440px; border-radius: var(--ws-radius-panel); overflow: hidden; box-shadow: var(--ws-shadow-hairline);"><div class="ws-entry-shell">
+      <div class="ws-entry-shell__main">
+        <span class="ws-entry-shell__wordmark">Fello</span>
+        <div class="ws-entry-shell__center">
+          <form class="ws-entry-shell__form" onsubmit="return false;">
+            <h1 class="ws-entry-shell__title">Sign in</h1>
+            <div class="ws-field">
+              <label class="ws-label" for="es-email-2">Email</label>
+              <input class="ws-input" id="es-email-2" type="email" value="ryan@theyoungteam" aria-invalid="true" aria-describedby="es-email-2-msg" autocomplete="email">
+              <p class="ws-field-msg ws-field-msg--error" id="es-email-2-msg">
+                <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><circle cx="6" cy="6" r="4.5"/><path d="M6 3.75v2.5M6 8.25v.01"/></svg>
+                Add the part after the @, like theyoungteam.com
+              </p>
+            </div>
+            <div class="ws-entry-shell__acts">
+              <button type="submit" class="ws-btn ws-btn--primary ws-btn--lg">Continue</button>
+            </div>
+          </form>
         </div>
       </div>
-    </aside>
-  </div></div>
+      <aside class="ws-entry-shell__aside" aria-hidden="true">
+        <p class="ws-eyebrow">What&rsquo;s waiting</p>
+      </aside>
+    </div></div>
+  </div>
+
 </div>
 </body>
 </html>

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

@@ -0,0 +1,19 @@
+/* ---- EntryShell: the sign-in page, the form centred in its 320 column and, from 48rem of the shell's own width, the grey
+   aside of samples. It fills its parent (K17): a parent with a height, a flex column with only a min-height (flex: 1),
+   or --page for the window's. ---- */
+.ws-entry-shell { container: ws-entry-shell / inline-size; display: flex; flex: 1 0 auto; min-height: 100%; }
+.ws-entry-shell--page { min-height: 100dvh; }
+.ws-entry-shell__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: var(--space-lg) var(--space-lg); background: var(--color-bg-page); }
+.ws-entry-shell__wordmark { align-self: flex-start; font-size: var(--font-size-md); line-height: var(--space-lg); font-weight: 600; color: var(--color-text-heading); }
+.ws-entry-shell__center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); padding: var(--space-2xl) 0; }
+.ws-entry-shell__form { width: 100%; max-width: calc(var(--space-9xl) + var(--space-7xl)); display: flex; flex-direction: column; gap: var(--space-lg); }
+.ws-entry-shell__title { margin: 0; font-size: var(--font-size-xl); line-height: var(--space-xl); font-weight: 600; letter-spacing: var(--ws-tracking-title); color: var(--color-text-heading); text-align: center; }
+/* The sign-in field is the large one, 36 px (still 40 on touch). */
+.ws-entry-shell .ws-input { min-height: var(--ws-control-h-md); }
+.ws-entry-shell__acts { display: flex; flex-direction: column; gap: var(--space-sm); text-align: center; }
+.ws-entry-shell__aside { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); margin: var(--space-xs); padding: var(--space-2xl); border-radius: var(--ws-radius-panel); background: var(--ws-page); }
+.ws-entry-shell__samples { display: flex; gap: var(--space-md); }
+.ws-entry-shell__sample { flex: 1; min-width: 0; padding: var(--ws-card-padding-lg); display: flex; flex-direction: column; gap: var(--space-xxs); }
+.ws-entry-shell__sample-figure { font-size: var(--ws-text-figure); line-height: var(--ws-leading-figure); font-weight: 400; letter-spacing: var(--ws-tracking-display); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+/* A narrow shell is the form alone: the aside is a picture, never squeezed beside it. */
+@container ws-entry-shell (max-width: 48rem) { .ws-entry-shell__aside { display: none; } }