@tristan2828/ui-foundation 4.55.0 → 4.57.0

package/conventions/docs/add-an-entity.md

@@ -214,14 +214,14 @@ is a filled-in example while the Widgets demo is still here).
    `editInPlace({ kind: 'choice', ... })` with `DateField` as the
    control, `defaultOpen`, `modal={false}`, `onChange={(day) =>
    props.commit(day)}` and `onOpenChange` cancelling on close, as a
-   Select is (Storybook `app/DateField` EditInPlace). The backend column
+   Select is (the fixtures' `app/DateField` EditInPlace). The backend column
    is a SQL `date` (`datetime.date` in the model).
 
    **An image on a record** (a photo of it) is the stored file's id on the
    wire (`string`, nullable), and on the form the foundation's
    `ImageField` in a `Controller` (`z.string().nullable()`): `value` and
    `onChange` are the id, `thumbUrl` the record's saved photo,
-   `onBusyChange` holds the submit while a file uploads (Storybook
+   `onBusyChange` holds the submit while a file uploads (the fixtures'
    `app/ImageField`). Its `upload` is the app's own, one function in the
    gateway that sends the file to the app's endpoint and resolves to
    `{ id, thumbUrl, url }` (the `ImageUploadResult`), rejecting with the

package/conventions/docs/cell-patterns.md

@@ -52,7 +52,7 @@ view render them, and their specs pin them. Patterns 19 (stage circle),
 20 (count linking to the related records) and 22 (a highlighted row),
 the multi-value variant of 4, the step bar and star in 9, the dependency
 list in 10, the ring in 13 and the pressed icon in 15 were each built
-for a real app's screen first; the package's Storybook renders
+for a real app's screen first; the package's fixtures renders
 them (`app/StageCircle`, `app/CountLink`, `patterns/CellPatterns`,
 `patterns/Scales`, `app/DataTable`), and
 its checks pin their accessibility and contrast in both themes. The
@@ -151,7 +151,7 @@ narrow.
   read-only cell isn't a button: `render={<span role="img" aria-label … tabIndex={0} />}`
   keeps it focusable and named without faking one.
 - Needs the `TooltipProvider` that `AppShell` mounts — free in any
-  cell, absent in an isolated Storybook story.
+  cell, absent in an isolated fixture.
 - Encode the value in the glyph's **shape** (solid / half / slashed /
   dashed), not its colour.
 - **Give the trigger a focus ring**
@@ -162,7 +162,7 @@ narrow.
 
 A multi value (several categories on one record) where each value has
 its own icon and colour slot, and the column is narrow. The package's
-Storybook renders it (`patterns/CellPatterns`, "Icons with one tooltip").
+fixtures render it (`patterns/CellPatterns`, "Icons with one tooltip").
 
 ```tsx
 // values: the row's categories, `undefined` for one still loading.
@@ -323,7 +323,7 @@ own state.
 
 ### Two variants the package draws: a step bar and a star
 
-Both are in the package's Storybook (`patterns/Scales`), every value on
+Both are in the package's fixtures (`patterns/Scales`), every value on
 the page and on a card, measured by axe and the glyph check in both
 themes. Each is one image to a screen reader, named in words.
 
@@ -375,7 +375,7 @@ A one-to-many value (`★ 4.7 (3)` opening a per-person breakdown).
 
 The records a row waits on (parts it needs, a date that has to pass,
 other records that have to finish), summarised in the cell, listed in
-the popover. The package's Storybook renders it
+the popover. The package's fixtures render it
 (`patterns/CellPatterns`, "Dependency list").
 
 - **The cell: a computed summary.** "Ready" when nothing holds the row,
@@ -567,7 +567,7 @@ now", "happened"). Widget's In Stock column is the reference
 A yes/no that belongs to another value rather than having a column of
 its own: a "focus" flag that only exists while the status is "doing", a
 "pinned" mark on an open item. It's a small icon button inside the owning
-value's cell, beside its word. The package's Storybook renders it
+value's cell, beside its word. The package's fixtures render it
 (`patterns/CellPatterns`, "Pressed icon in a cell").
 
 **Pick it over the Switch** when the yes/no only means something while
@@ -621,7 +621,7 @@ export function FocusToggle({ item }: { item: Item }) {
   mode (3.2:1; dark is 5.2:1). `/70` measures 2.7:1, and a control a
   reader can't see fails them. Hover lifts it to full
   `muted-foreground`. axe doesn't measure icons, so the package's
-  Storybook glyph check does.
+  fixtures glyph check does.
 - **Tone: `destructive-text`, read as "flagged", not "error".** A flag
   claims attention ahead of the rest of the row, and the destructive
   tone is the one with that pull. The other tones are taken where it
@@ -1201,8 +1201,8 @@ const CATEGORY_COLUMNS: LegacyColumnDef<Category, unknown>[] = [
     create={(name) => createCategory.mutateAsync({ name, colour: 'blue', icon: 'house' })} />} … />
 ```
 
-The worked example is the package's Storybook story `app/DataTable`
-"Edit in the rows" (`data-table.stories.tsx`); the template has no small
+The worked example is the package's fixture `app/DataTable`
+"Edit in the rows" (`data-table.fixtures.tsx`); the template has no small
 entity yet.
 
 ### A table of a few short columns: `width="content"`
@@ -1223,7 +1223,7 @@ A status that's an ordered lifecycle (each record moves through the same
 stages, in the same order, toward one that means *done*), with one or
 more exit states off the side. A small circle beside the word fills as
 the record moves on. The package ships it: `StageCircle`, rendered with
-every stage and tone in its Storybook (`app/StageCircle`).
+every stage and tone in its fixtures (`app/StageCircle`).
 
 | Stage (`stage`) | Drawn as | Say it for |
 |---|---|---|
@@ -1290,7 +1290,7 @@ cell: ({ getValue }) => {
 A count of the records in another table that point at this row (open
 Tasks per Project, items per Tag), which opens that table already filtered
 to them. The count is a `computed` integer (the entity plan's type).
-The package ships it: `CountLink`, rendered in its Storybook
+The package ships it: `CountLink`, rendered in its fixtures
 (`app/CountLink`).
 
 ```tsx
@@ -1359,7 +1359,7 @@ months), each heading with a count and a summary ("4 · 1 h 12 m"). The
 same screens usually want one quick filter as pills above the rows (All /
 Video / Audio / Text, one pressed at a time) rather than a dropdown: there
 are few values, and switching between them is the main thing people do.
-Raised for an app's feed (issue #135); the package's Storybook renders it
+Raised for an app's feed (issue #135); the package's fixtures renders it
 (`app/DataTable` "Grouped" and "Grouped no matches"), with axe in both
 themes.
 
@@ -1446,7 +1446,7 @@ current one. `DataTable`'s `highlightRow` returns true for it.
   `opacity-50` (or `text-foreground/60`) drops their text under 4.5:1 the
   same way. Render their text in `text-muted-foreground`, which is
   measured, and keep the word that says done.
-- Storybook's `app/DataTable` Highlighted story has two highlighted rows
+- The fixtures' `app/DataTable` Highlighted story has two highlighted rows
   (one striped), pinned columns and muted text inside them, under axe and
   the token check in both themes; `e2e/data-table.spec.ts` checks every
   cell wears the wash.
@@ -1459,7 +1459,7 @@ columns: **grouped by one of its choice fields**, picked by the reader
 house), and **one record at a time without leaving the list**, its notes
 and key facts in a panel beside the rows. `DataTable`'s `groupings` and
 `detailPanel` (4.46) do both. Raised for an app's task list; the
-package's Storybook renders it (`app/DataTable grouping`), with axe in
+package's fixtures render it (`app/DataTable grouping`), with axe in
 both themes and its specs in a real browser.
 
 ```tsx

package/conventions/docs/column-options.md

@@ -108,10 +108,9 @@ copied tokens, and every one drifted:
 An option using a fill the design system can't produce is being judged as
 something the app can't render.
 
-**Render the options from the app's real components.** Storybook is already
-in this repo and is the obvious host: the cards then use the real tokens
-and the real `Badge`, and the winner can be copied straight out. Do this
-rather than hand-writing a standalone HTML page.
+**Render the options from the app's real components** where the pattern
+needs the real tokens and the real `Badge`, so the winner can be copied
+straight out, rather than hand-writing a standalone HTML page.
 
 ## After the pick
 

package/conventions/docs/design-language.md

@@ -57,7 +57,7 @@ shade in both themes, because it always carries white text and the page
 behind it never enters the calculation.
 
 Measured ratios (WCAG 2.x, sRGB) are recorded next to each primitive in
-the package's `styles/theme.css`, and its `e2e/storybook-visual.spec.ts` re-checks all
+the package's `styles/theme.css`, and its `e2e/fixtures-visual.spec.ts` re-checks all
 twelve tone/style combinations with axe against the rendered DOM in both
 themes. **A new tone or style is not done until it appears in that story.**
 
@@ -116,7 +116,7 @@ Two rules that keep this honest:
 An icon that carries meaning on its own (a stage circle, a category's
 icon, a pressed flag) must clear WCAG's **3:1 non-text minimum** against
 the background behind it, in both themes. axe measures text only, so the
-package's Storybook has a glyph check of its own: every `<svg>` in its
+package's fixtures have a glyph check of its own: every `<svg>` in its
 design-language stories, its ink (with any opacity modifier painted over
 its background) against what's behind it. Every `*-text` tone, every
 category slot and `muted-foreground` clear it as they are. An opacity
@@ -235,7 +235,7 @@ Five things about them:
 - **The glyph check re-measures them.** All twelve clear the 3:1
   non-text minimum in both themes, on the page and on a card (recorded in
   `theme.css`). axe checks text contrast, not icon contrast, so the
-  package's Storybook glyph check draws an icon in each slot on both
+  package's fixtures glyph check draws an icon in each slot on both
   surfaces (`patterns/CategoricalColour`) and fails a change that takes
   one below 3:1. Its `SideBySide` story shows both themes at once, under
   normal vision and simulated deuteranopia and protanopia.
@@ -389,8 +389,8 @@ set, not a `DataTable` prop:
   doesn't change. The selectors are in `styles/theme.css`. A composite
   reaches `compact` with the `density-compact:` variant (`styles/index.css`:
   any ancestor with `data-density="compact"`), the way `WidgetCard` and
-  `ModuleCard` do; an app's own card can use it too. Storybook's
-  Density toolbar shows any story at a density, and `patterns/Density`
+  `ModuleCard` do; an app's own card can use it too. the package's
+  fixtures page shows any fixture at a density, and `patterns/Density`
   shows the primitives, `DataTable`, the sidebar and the hub cards at
   each. Its checks
   measure that every step changes what it should, and that the default
@@ -507,7 +507,7 @@ const layout = useWidgetLayout('my-app:hub', Object.keys(HUB_CARDS))
   equal columns that wraps (the class above: one column on a phone, as
   many 288px-or-wider columns as fit). Each card is as tall as its rows;
   it doesn't stretch to its tallest neighbour.
-- Storybook's `app/WidgetCard` shows three widgets on a page and every
+- The fixtures' `app/WidgetCard` shows three widgets on a page and every
   one in each state, a folded summary in each state and an accordion,
   and `app/WidgetLayoutSheet` a hub with its Customize sheet; its checks run axe and the token and glyph checks in
   both themes and at `large`.
@@ -577,7 +577,7 @@ const { data, isLoading, error, refetch } = useProjectsSummaryQuery()
   own page. The row scrolls inside itself and the page never does. A
   desktop shows the cards either way, so don't render your own row
   beside a strip hidden on a phone.
-- Storybook's `app/ModuleCard` shows a hub with a strip and a widget,
+- The fixtures' `app/ModuleCard` shows a hub with a strip and a widget,
   every state, both at `compact`, and both again as a row of chips (Row,
   Row states); its checks run axe and the token and glyph checks in both
   themes and at `large`, measure the strip at a desktop and a phone
@@ -603,7 +603,7 @@ under its own header.
   swaps the tone's own icon for a better one (a lock for read-only).
 - **A wash, not a fill:** the tone at 10% (20% in dark) with `foreground`
   text and the tone's `*-text` icon. The message reads as body text, so
-  nothing inside it is muted. Storybook's `app/Notice` measures every
+  nothing inside it is muted. The fixtures' `app/Notice` measures every
   tone with axe and the glyph check in both themes.
 - **One or two sentences and at most one action**: what the state means
   and what to do about it. More than that belongs in a section.

package/conventions/docs/reminders.md

@@ -35,7 +35,7 @@ const push = usePushPermission()
 - **Put it where reminders are set**: the top of the reminders list, or a
   settings page. One per device: each phone or browser allows its own.
 - **Every state says what to do next.** `AllowReminders` shows them all
-  (the package's Storybook, `app/AllowReminders`):
+  (the package's fixtures, `app/AllowReminders`):
 
 | `status` | Means | Shows |
 |---|---|---|
@@ -80,6 +80,30 @@ Scope it to the signed-in user, as Widgets are.
   package's `reminders` only with its `Reminder` model (imported, or the
   job run without a model). So an app without push, or with its own
   table, gets neither from `create_all` or autogenerate.
+- **Channels beyond push** (email, a phone-alert app): hand the job a
+  sender per channel, and it still decides what's due and stamps it once.
+  A sender is `async def send(session, reminder)`: it returns `None` when
+  sent, or a `ChannelResult` ("sent", "failed" with its `error`, or
+  "skipped"), and an exception it raises is a failed result. `channels`
+  picks a reminder's channels (every one when left out; push is
+  `"push"`), and `on_sent` sees each reminder's results before its stamp
+  is committed, so a last-sent time per channel lands with it:
+
+  ```python
+  reminders.register(
+      model=MyReminder,
+      senders={"email": send_email},
+      channels=lambda r: r.channels.split(","),
+      on_sent=stamp_channels,  # async (session, reminder, results)
+  )
+  ```
+
+  One failed channel doesn't stop the others; it's sent to error
+  reporting, and the reminder is done for the day either way (a channel
+  that's down isn't tried again every minute). A sender reads the session
+  but doesn't write it. `run_due_reminders` (same arguments) returns
+  each reminder's results, for a script or a test; a sender named
+  `"push"` replaces the package's.
 - **Something else to send?** Call `send_push` from the app's own code or
   job: a message when a long task finishes, a daily summary. The `url` is
   always the app's own path.

package/conventions/docs/timed-screens.md

@@ -30,7 +30,7 @@ package has the parts, so a screen like this is assembled, not rebuilt:
 | `usePrefersReducedMotion` | Whether to swap movement for a fade |
 
 All of them are imported from `@tristan2828/ui-foundation`. The package's
-Storybook has the whole thing working together: `app/SessionView`, the
+The package's fixtures have the whole thing working together: `app/SessionView`, the
 Timer story, and the same run on the dark stage, DarkStage.
 
 ## The view

package/dist/components/app/data-environment-banner.d.ts

@@ -1,5 +1,5 @@
 export declare function DataEnvironmentBanner(): import("react").JSX.Element;
-/** The banner itself, for a label already known (Storybook, tests). Renders nothing for null. */
+/** The banner itself, for a label already known (fixtures, tests). Renders nothing for null. */
 export declare function DataEnvironmentNotice({ label }: {
     label: string | null;
 }): import("react").JSX.Element | null;

package/dist/components/app/data-environment-banner.js

@@ -16,7 +16,7 @@ export function DataEnvironmentBanner() {
     const label = useDataLabel();
     return _jsx(DataEnvironmentNotice, { label: label });
 }
-/** The banner itself, for a label already known (Storybook, tests). Renders nothing for null. */
+/** The banner itself, for a label already known (fixtures, tests). Renders nothing for null. */
 export function DataEnvironmentNotice({ label }) {
     if (label === null)
         return null;

package/eslint/index.js

@@ -29,7 +29,7 @@ function shippedPrimitives() {
   for (const dir of ['../dist/components/ui', '../src/components/ui']) {
     try {
       return readdirSync(new URL(dir, import.meta.url))
-        .filter((file) => /^[a-z0-9-]+\.(js|tsx)$/.test(file) && !file.includes('.stories.'))
+        .filter((file) => /^[a-z0-9-]+\.(js|tsx)$/.test(file) && !file.includes('.fixtures.'))
         .map((file) => file.replace(/\.(js|tsx)$/, ''))
     } catch {
       // Not there — try the next location.
@@ -130,7 +130,6 @@ export default function uiFoundation(options = {}) {
     // session's in-progress files fail another session's verify.
     globalIgnores([
       'dist',
-      'storybook-static',
       'test-results',
       'playwright-report',
       'public/mockServiceWorker.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.55.0",
+  "version": "4.57.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {
@@ -66,11 +66,11 @@
     "gen:api": "openapi-typescript ./openapi/foundation.yaml -o ./src/api/schema.ts",
     "lint": "eslint .",
     "docs:index": "node scripts/doc-index.mjs",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "preview-storybook": "vite preview --outDir storybook-static --port 6006 --strictPort",
+    "harness": "vite -c vite.harness.config.ts",
+    "build-harness": "vite build -c vite.harness.config.ts",
+    "preview-harness": "vite preview -c vite.harness.config.ts",
     "verify:fast": "npm run gen:api && git diff --exit-code -- src/api/schema.ts && node scripts/doc-index.mjs --check && tsc -b && eslint . --max-warnings 0 && node bin/ui-foundation.mjs check-deps && npm run build && vitest run",
-    "verify": "npm run verify:fast && playwright test -c playwright.storybook.config.ts"
+    "verify": "npm run verify:fast && playwright test -c playwright.harness.config.ts"
   },
   "peerDependencies": {
     "@axe-core/playwright": "^4.13.0",
@@ -157,8 +157,6 @@
     "@base-ui/react": "^1.8.0",
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.63.0",
-    "@storybook/addon-docs": "^10.6.0",
-    "@storybook/react-vite": "^10.6.0",
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/eslint-plugin-query": "^5.103.1",
     "@tanstack/react-query": "^5.103.1",
@@ -180,7 +178,6 @@
     "react-hook-form": "^7.88.0",
     "react-router": "^7.18.4",
     "sonner": "^2.0.8",
-    "storybook": "^10.6.3",
     "tailwindcss": "^4.3.3",
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.70.0",