zz-meridian 0.2.0 → 0.3.0

package/payload/src/components/patterns/assistant/text.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { Prose } from '@/components/patterns/prose';
+
+/**
+ * One text part of an assistant reply: the model's markdown, read by the same safe reader as the rest of the product.
+ *
+ * Every model this template has been pointed at answers in markdown, so a plain paragraph shows `**bold**`, `- `
+ * bullets and `|---|` table rules literally. `Prose` renders it, and it is the reader that is already safe for content
+ * nobody vetted: raw HTML stays text and every URL passes `safeMarkdownUrl`, so an answer cannot smuggle markup or a
+ * `javascript:` link into the panel.
+ *
+ * The wrapper carries `data-assistant-text` because a reply can now be a list, a table or a code block: a check that
+ * reads the reply has one stable handle instead of guessing which element the text ended up in.
+ *
+ * The first and last child margins are trimmed: a markdown paragraph carries `my-3`, which would push the reply away
+ * from its "Assistant" caption and the next message in the thread's 16px rhythm.
+ */
+export function AssistantText({ text }: { text: string }) {
+  return (
+    <div data-assistant-text className="min-w-0">
+      <Prose size="sm" className="max-w-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">{text}</Prose>
+    </div>
+  );
+}

package/payload/src/components/patterns/command-palette/README.md

@@ -16,7 +16,7 @@ A Dialog (`surface-raised`, `radius-xl` 24px, `shadow-overlay`, 600px wide, 14%
 
 ## Data
 
-Commands are built from the `nav` prop, the same groups the Rail gets (one "Go to" per destination, its group as the hint) and the appearance actions. A match ranks by where the query starts in the label, then by the original order; the group hint also matches ("operate" finds Health, Customers, API keys).
+Commands are built from the `nav` prop, the same groups the Rail gets (one "Go to" per destination, its group as the hint) and the appearance actions. A match ranks by where the query starts in the label, then by the original order; the group hint also matches ("operate" finds Health, Customers, API keys). Like the Rail's, `nav` carries each entry's icon as a component, so it cannot be built in a server component — see the Rail's README.
 
 ## States
 

package/payload/src/components/patterns/filter-bar/README.md

@@ -6,10 +6,10 @@ Status: beta
 
 ## Anatomy
 
-1. **Search**: a small Search input, up to 288px wide from 768px, full width below; `/` focuses it from anywhere.
+1. **Search**: a small Search input, up to 288px wide once the bar is 832px, full width below; `/` focuses it from anywhere.
 2. **Filters**: one small Select per dimension, its name inside the trigger in `ink-3` ("Status All"). A filter that is on takes `accent-tint` with an `accent-line` outline, so the reader sees at once what narrows the list.
 3. **Clear**: a ghost button, shown only while something is filtered.
-4. **Result**: a quiet count of what passes ("5 of 240"), `text-xs` `ink-3`, from 1024px.
+4. **Result**: a quiet count of what passes ("5 of 240"), `text-xs` `ink-3`, once the bar is 960px.
 5. **View controls** (optional): a Segmented control or a menu on the right.
 6. **Filters button** (phones): with a count of active filters on an `accent` disc; it opens a Sheet holding each filter as a Field, the view controls, Clear filters and Show results.
 7. **Provenance line** (when `setBy`): the Agent mark (small), "Set by Claude · these filters came from the assistant", and Clear.
@@ -46,7 +46,7 @@ Every control is `control-sm` (32px; 28px compact), 8px apart. The bar sits insi
 ## Surfaces
 
 - **Console**: one row.
-- **Mobile**: under 768px, search plus the Filters button; the Sheet rises from the bottom with Show results as its primary action.
+- **Mobile**: once the bar is narrower than 832px, search plus the Filters button; the Sheet rises from the bottom with Show results as its primary action. The bar reads its OWN width (a container query), not the window's, because the rail, a split row, the assistant's column and an embed all narrow the bar without narrowing the window: 832px keeps the search and the filters on one row, 960px also shows the result count.
 - **Embed**: inline views show no bar (the tool's arguments are the filters, named in the title); fullscreen shows the full bar with the provenance line.
 
 ## Agents

package/payload/src/components/patterns/filter-bar/index.tsx

@@ -24,6 +24,10 @@ export type Filter = {
  * Search, filters and view controls for one list, in one row. On phones the search takes the row and the filters move
  * behind one Filters button that opens a sheet. When an agent set the filters, the bar says so ("Set by Claude")
  * until a person changes them, and Clear returns every filter to its off state.
+ *
+ * The bar reads its OWN width, not the window's: it is a container, and the row collapses on `@max-[52rem]` rather
+ * than on a viewport breakpoint. A bar in a split row, beside the assistant's column or inside an embed is narrow
+ * while the window is wide, and a viewport breakpoint would keep every filter in a row that has no room for them.
  */
 export function FilterBar({
   search,
@@ -69,7 +73,7 @@ export function FilterBar({
     });
 
   return (
-    <div className={cn('flex min-w-0 flex-col gap-3', className)}>
+    <div className={cn('@container flex min-w-0 flex-col gap-3', className)}>
       <div className="flex min-w-0 items-center gap-2">
         {search ? (
           <SearchInput
@@ -78,14 +82,14 @@ export function FilterBar({
             onValueChange={search.onChange}
             placeholder={search.placeholder ?? 'Search'}
             shortcut="/"
-            className="min-w-0 flex-1 md:max-w-72"
+            className="min-w-0 flex-1 @min-[52rem]:max-w-72"
           />
         ) : null}
-        <div className="flex min-w-0 items-center gap-2 max-md:hidden">{selects('sm')}</div>
+        <div className="flex min-w-0 items-center gap-2 @max-[52rem]:hidden">{selects('sm')}</div>
         {filters.length ? (
           <Sheet open={open} onOpenChange={setOpen}>
             <SheetTrigger asChild>
-              <Button size="sm" icon={<SlidersHorizontal />} className="md:hidden">
+              <Button size="sm" icon={<SlidersHorizontal />} className="@min-[52rem]:hidden">
                 Filters{active ? <span className="t-num -mr-0.5 grid h-4.5 min-w-4.5 place-items-center rounded-full bg-accent px-1 text-2xs font-semibold text-on-accent">{active}</span> : null}
               </Button>
             </SheetTrigger>
@@ -107,11 +111,11 @@ export function FilterBar({
           </Sheet>
         ) : null}
         {onClear && active ? (
-          <Button size="sm" variant="ghost" icon={<X />} onClick={onClear} className="max-md:hidden">Clear</Button>
+          <Button size="sm" variant="ghost" icon={<X />} onClick={onClear} className="@max-[52rem]:hidden">Clear</Button>
         ) : null}
         <div className="ml-auto flex shrink-0 items-center gap-3">
-          {result ? <span className="t-num text-xs whitespace-nowrap text-ink-3 max-lg:hidden">{result}</span> : null}
-          {view ? <div className="max-md:hidden">{view}</div> : null}
+          {result ? <span className="t-num text-xs whitespace-nowrap text-ink-3 @max-[60rem]:hidden">{result}</span> : null}
+          {view ? <div className="@max-[52rem]:hidden">{view}</div> : null}
         </div>
       </div>
       {setBy && active ? (

package/payload/src/components/patterns/form-section/README.md

@@ -21,6 +21,8 @@ Status: beta
 | Saves on its own | `onSave`, `onDiscard`, `dirty` | Text fields, selects: anything that should not apply on each keystroke |
 | Applies at once | no `onSave` | Switches and segmented controls; add a footnote that says so |
 | Danger zone | `tone="critical"` | Irreversible actions; the title and border take the critical tone |
+| Layout only | `as="div"` | The same head and card with no `<form>` around them: a card holding a table that runs edge to edge (tokens, people, members), or a form of its own, since forms cannot nest. Nothing submits, so there is no save bar — its children save themselves |
+| Layout only, flush | `as="div" flush` | The table runs to the card's edges; the card clips it and drops its header row's top border, so the card's edge is the table's edge |
 
 ## Sizes
 
@@ -50,7 +52,9 @@ Status: beta
 
 ## Composition
 
-A form element holding a fieldset; Field, Input, Select, Switch and Segmented from Layer 2; Banner for errors; Button for the save bar; Toast for confirmation. Settings pages stack sections 56px apart at the data width, on the same left edge as every other page.
+A form element holding a fieldset, or — with `as="div"` — a plain element holding a div; Field, Input, Select, Switch and Segmented from Layer 2; Table when the section holds one; Banner for errors; Button for the save bar; Toast for confirmation. Settings pages stack sections 56px apart at the data width, on the same left edge as every other page.
+
+`SettingRow` is a section's own child and needs nothing from `FormSection`: with `as="div"` and no `onSave`, a switch that applies the moment it is flipped sits in the same layout, saving itself.
 
 ## Data
 

package/payload/src/components/patterns/form-section/index.tsx

@@ -6,11 +6,18 @@ import { cn } from '@/lib/cn';
 import { Banner } from '@/components/ui/banner';
 import { Button } from '@/components/ui/button';
 
+/** The title column and the card column, shared by the form and the layout-only variant. */
+const GRID = 'grid gap-x-10 gap-y-5 @3xl:grid-cols-[15rem_minmax(0,64rem)]';
+
 /**
  * A titled group of settings that saves on its own. Its title and one sentence sit on the left, the fields in a card on
  * the right (stacked on narrow widths). With `onSave`, editing shows a save bar that stays in view until the change is
  * saved or discarded; without it, every control applies at once and the section says so. `tone="critical"` is the
  * danger zone.
+ *
+ * `as="div"` is the same layout with no `<form>` around it, for a section that cannot have one: a card holding a table
+ * that runs edge to edge (access tokens, people, members), or a form of its own, since forms cannot nest. It has no
+ * save bar — nothing submits — so its children save themselves. `flush` drops the body's padding for that table.
  */
 export function FormSection({
   title,
@@ -24,6 +31,8 @@ export function FormSection({
   onDiscard,
   saveLabel = 'Save changes',
   tone = 'default',
+  as = 'form',
+  flush = false,
   footnote,
   className,
 }: {
@@ -42,6 +51,10 @@ export function FormSection({
   onDiscard?: () => void;
   saveLabel?: string;
   tone?: 'default' | 'critical';
+  /** `div` renders no `<form>`, for a card that holds a table or a form of its own. See the doc comment. */
+  as?: 'form' | 'div';
+  /** No padding around the body: for a table that runs edge to edge. */
+  flush?: boolean;
   /** A quiet line under the fields: "Changes apply at once". */
   footnote?: ReactNode;
   className?: string;
@@ -50,45 +63,67 @@ export function FormSection({
     e.preventDefault();
     if (dirty && !saving) void onSave?.();
   };
-  return (
-    <section className={cn('@container', className)}>
-      <form onSubmit={submit} className="grid gap-x-10 gap-y-5 @3xl:grid-cols-[15rem_minmax(0,64rem)]">
-        <header className="min-w-0 @3xl:pt-1">
-          <h2 className={cn('t-card', tone === 'critical' && 'text-critical-ink')}>{title}</h2>
-          {description ? <p className="t-small mt-2 text-pretty text-ink-2">{description}</p> : null}
-        </header>
-        <div className="min-w-0">
-          <div className={cn('relative rounded-lg border bg-surface shadow-card', tone === 'critical' ? 'border-critical/30' : 'border-line')}>
-            <fieldset disabled={Boolean(readOnly) || saving} className="m-0 flex min-w-0 flex-col gap-5 border-0 p-(--card-pad)">
-              {error ? <Banner tone="critical" title="Not saved">{error}</Banner> : null}
-              {readOnly ? (
-                <p className="flex items-center gap-2 rounded-md bg-surface-sunk px-3 py-2 text-xs text-ink-2"><Lock className="size-3.5 shrink-0 text-ink-3" />{readOnly}</p>
-              ) : null}
-              {children}
-            </fieldset>
-            {onSave ? (
-              <div
-                aria-hidden={!dirty}
-                className={cn(
-                  'sticky bottom-4 z-10 grid transition-[grid-template-rows,opacity] duration-(--dur-enter) ease-out',
-                  dirty ? 'grid-rows-[1fr] opacity-100' : 'pointer-events-none grid-rows-[0fr] opacity-0',
-                )}
-              >
-                <div className="overflow-hidden">
-                  <div className="flex flex-wrap items-center gap-3 rounded-b-lg border-t border-line bg-surface-raised/90 px-(--card-pad) py-3 backdrop-blur-md">
-                    <p className="flex items-center gap-2 text-sm text-ink-2"><span aria-hidden className="size-1.5 rounded-full bg-accent" />Unsaved changes</p>
-                    <div className="ml-auto flex items-center gap-2">
-                      <Button variant="ghost" size="sm" onClick={onDiscard} disabled={saving} tabIndex={dirty ? 0 : -1}>Discard</Button>
-                      <Button type="submit" variant="primary" size="sm" busy={saving} tabIndex={dirty ? 0 : -1}>{saveLabel}</Button>
-                    </div>
-                  </div>
+  const body = cn(
+    'm-0 flex min-w-0 flex-col border-0',
+    // The same rule Card and CardBody apply to a table as the first child, in the shape this body is built from: the
+    // Table component wraps its table in a div, so the table is one level down, and `data-flush` is how the card above
+    // knows to clip its own rounded corner.
+    flush
+      ? 'has-[>div:first-child>table]:overflow-hidden [&>div:first-child>table>thead>tr>th]:border-t-0'
+      : 'gap-5 p-(--card-pad)',
+  );
+  const inner = (
+    <>
+      {error ? <Banner tone="critical" title="Not saved">{error}</Banner> : null}
+      {readOnly ? (
+        <p className="flex items-center gap-2 rounded-md bg-surface-sunk px-3 py-2 text-xs text-ink-2"><Lock className="size-3.5 shrink-0 text-ink-3" />{readOnly}</p>
+      ) : null}
+      {children}
+    </>
+  );
+  // The two columns, in the shape both variants share. Built once and placed inside whichever element wraps it, rather
+  // than a wrapper component chosen per render: a component defined here would be a new type on every render, and React
+  // would remount the fields inside it, dropping focus on each keystroke.
+  const cols = (
+    <>
+    <header className="min-w-0 @3xl:pt-1">
+      <h2 className={cn('t-card', tone === 'critical' && 'text-critical-ink')}>{title}</h2>
+      {description ? <p className="t-small mt-2 text-pretty text-ink-2">{description}</p> : null}
+    </header>
+    <div className="min-w-0">
+      <div className={cn('relative rounded-lg border bg-surface shadow-card', tone === 'critical' ? 'border-critical/30' : 'border-line', flush && 'has-[>[data-flush]:first-child]:overflow-hidden')}>
+        {as === 'form' ? (
+          <fieldset data-flush={flush ? '' : undefined} disabled={Boolean(readOnly) || saving} className={body}>{inner}</fieldset>
+        ) : (
+          <div data-flush={flush ? '' : undefined} className={body}>{inner}</div>
+        )}
+        {onSave && as === 'form' ? (
+          <div
+            aria-hidden={!dirty}
+            className={cn(
+              'sticky bottom-4 z-10 grid transition-[grid-template-rows,opacity] duration-(--dur-enter) ease-out',
+              dirty ? 'grid-rows-[1fr] opacity-100' : 'pointer-events-none grid-rows-[0fr] opacity-0',
+            )}
+          >
+            <div className="overflow-hidden">
+              <div className="flex flex-wrap items-center gap-3 rounded-b-lg border-t border-line bg-surface-raised/90 px-(--card-pad) py-3 backdrop-blur-md">
+                <p className="flex items-center gap-2 text-sm text-ink-2"><span aria-hidden className="size-1.5 rounded-full bg-accent" />Unsaved changes</p>
+                <div className="ml-auto flex items-center gap-2">
+                  <Button variant="ghost" size="sm" onClick={onDiscard} disabled={saving} tabIndex={dirty ? 0 : -1}>Discard</Button>
+                  <Button type="submit" variant="primary" size="sm" busy={saving} tabIndex={dirty ? 0 : -1}>{saveLabel}</Button>
                 </div>
               </div>
-            ) : null}
+            </div>
           </div>
-          {footnote ? <p className="t-caption mt-2.5">{footnote}</p> : null}
-        </div>
-      </form>
+        ) : null}
+      </div>
+      {footnote ? <p className="t-caption mt-2.5">{footnote}</p> : null}
+    </div>
+    </>
+  );
+  return (
+    <section className={cn('@container', className)}>
+      {as === 'form' ? <form onSubmit={submit} className={GRID}>{cols}</form> : <div className={GRID}>{cols}</div>}
     </section>
   );
 }

package/payload/src/components/patterns/form-section/preview.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { Field } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
 import { Switch } from '@/components/ui/switch';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { FormSection, SettingRow } from '.';
 import { app, domain } from '@/app.config';
 
@@ -28,6 +29,22 @@ export default function FormSectionPreview() {
           <Field label="Email">{(p) => <Input {...p} defaultValue={`finance@${domain}`} />}</Field>
         </FormSection>
       </Specimen>
+      <Specimen label="Layout only" note="No form around the card, so it can hold a table that runs edge to edge — or a form of its own, since forms cannot nest. Nothing submits, so a setting that applies at once simply sits in the same layout." stack>
+        <FormSection as="div" flush title="Access tokens" description="Tokens this workspace has issued. A token is shown once, when it is created.">
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeader>Name</TableHeader>
+                <TableHeader>Last used</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow><TableCell>ci-deploy</TableCell><TableCell muted>2 days ago</TableCell></TableRow>
+              <TableRow><TableCell>grafana-read</TableCell><TableCell muted>Never</TableCell></TableRow>
+            </TableBody>
+          </Table>
+        </FormSection>
+      </Specimen>
       <Specimen label="Applies at once" note="No onSave: switches take effect immediately and the footnote says so." stack>
         <FormSection title="Notifications" description={`What ${app.name} emails you about.`} footnote="Changes apply at once.">
           <Switch label="Incident alerts" description="When a service is degraded or down." defaultChecked />

package/payload/src/components/patterns/period-select/index.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { PERIODS, PERIOD_LABEL, type Period } from '@/lib/period';
+import { PERIODS, PERIOD_LABEL, PERIOD_SHORT, type Period } from '@/lib/period';
 import { Segmented } from '@/components/ui/segmented';
 
 /** One period the control offers: its value, the short label it shows ("30D") and the full name in its title. */
 export type PeriodOption<P extends string = Period> = { value: P; short: string; label: string };
 
-const SHORT: Record<Period, string> = { '7d': '7D', '30d': '30D', '90d': '90D', all: 'All' };
-const DEFAULT_OPTIONS: PeriodOption[] = PERIODS.map((p) => ({ value: p, short: SHORT[p], label: PERIOD_LABEL[p] }));
+// Both labels come from `@/lib/period`, beside `PERIODS`: a product that adds a period there (a 24-hour one) must not
+// have to patch this component to make the types line up.
+const DEFAULT_OPTIONS: PeriodOption[] = PERIODS.map((p) => ({ value: p, short: PERIOD_SHORT[p], label: PERIOD_LABEL[p] }));
 
 /**
  * The reporting period for a whole page. Given `onChange`, it is controlled: the page holds the period (in state, in

package/payload/src/components/patterns/rail/README.md

@@ -16,6 +16,8 @@ Status: beta
 
 App mark, Avatar and Appearance menu, on `frame` (a translucent wash with `backdrop-blur-xl`) and a `line` hairline on its right edge. The navigation is the `nav` prop: the template passes `nav` from `src/app.config.ts`, and a product whose destinations depend on the person (admin or member, platform or team) passes the groups that person may see; the rail holds no route knowledge of its own. Pass the same groups to the Command palette.
 
+**`nav` cannot be built in a server component.** Each entry carries its Lucide icon as a component, and a function cannot cross from a server component to a client one — React refuses at runtime with "Functions cannot be passed directly to Client Components", so every page answers 500 while types, lint and tests stay green. Build the groups in a client module (`src/views/console-chrome.tsx` is the template's: `'use client'`, importing `nav` and narrowing it by who is signed in) and render that from the layout. `pnpm verify` catches it: it builds and serves the app and audits every page, so a 500 fails there.
+
 ## Sizes
 
 | Part | Value |

package/payload/src/components/ui/card/README.md

@@ -9,7 +9,7 @@ Status: beta
 1. **Container**: `surface`, 1px `line` border, `radius-lg` 12px, `shadow-card`.
 2. **Top edge**: a 1px `highlight-top` line inset 12px from each side. Transparent on light, where the shadow lifts the card; a faint lit edge on dark, where shadows do not read.
 3. **Header** (`CardHeader`, optional): title, an optional description under it, actions on the right.
-4. **Body** (`CardBody`): the content; `flush` removes the padding for a list or table that runs edge to edge.
+4. **Body** (`CardBody`): the content; `flush` removes the padding for a list or table that runs edge to edge, and a `Table` as its first child is then clipped by the body with its header row's top border dropped — the card's edge is the table's edge, with no second line under it and no square corner over the card's rounded one. A second table in the same body keeps its top border.
 5. **Footer** (`CardFooter`, optional): a quiet band with a hairline above: a link to the full view, a caption.
 
 ## Variants
@@ -86,4 +86,4 @@ import { Card, CardBody, CardFooter, CardHeader } from '@/components/ui/card';
 </Card>
 ```
 
-`Card`: `interactive` and div attributes. `CardHeader`: `title`, `description`, `actions`, `divided`. `CardBody`: `flush`. `CardFooter`: div attributes.
+`Card`: `interactive` and div attributes. `CardHeader`: `title`, `description`, `actions`, `divided`, `wrap` (let the title wrap to as many lines as it needs, for a title that is the point of the card rather than a label in a list). `CardBody`: `flush` (no padding, and a first-child `Table` is clipped with its top border dropped). `CardFooter`: div attributes.

package/payload/src/components/ui/card/index.tsx

@@ -11,6 +11,10 @@ export function Card({ className, interactive, ...rest }: HTMLAttributes<HTMLDiv
       className={cn(
         'relative flex min-w-0 flex-col rounded-lg border border-line bg-surface shadow-card',
         'before:pointer-events-none before:absolute before:inset-x-3 before:top-0 before:h-px before:bg-highlight-top',
+        // A flush body as the first child means its content fills the corner — a table's header row, whose square
+        // `surface-sunk` fill would otherwise stand over this card's rounded one. The body clips what is inside it;
+        // only clipping HERE makes the corner round. Narrow on purpose: it is exactly the card-with-a-table case.
+        'has-[>[data-flush]:first-child]:overflow-hidden',
         interactive && 'edge-lit edge-hover transition-[box-shadow,border-color,transform] duration-(--dur-enter) hover:border-line-strong hover:shadow-halo',
         className,
       )}
@@ -26,6 +30,7 @@ export function CardHeader({
   actions,
   className,
   divided,
+  wrap,
 }: {
   title: ReactNode;
   description?: ReactNode;
@@ -33,11 +38,14 @@ export function CardHeader({
   className?: string;
   /** A hairline under the head, when the body is a table or a list that runs edge to edge. */
   divided?: boolean;
+  /** Let the title wrap instead of truncating. For a title that is the point of the card — an objective, a record's
+   *  name — rather than a label in a list, where one line and an ellipsis is the right answer. */
+  wrap?: boolean;
 }) {
   return (
     <div className={cn('flex items-start gap-4 px-(--card-pad) pt-[calc(var(--card-pad)-4px)]', divided ? 'border-b border-line pb-3.5' : 'pb-1', className)}>
       <div className="min-w-0 flex-1">
-        <h2 className="t-card truncate">{title}</h2>
+        <h2 className={cn('t-card', wrap ? 'text-pretty' : 'truncate')}>{title}</h2>
         {description ? <p className="t-caption mt-1 text-pretty">{description}</p> : null}
       </div>
       {actions ? <div className="-my-1 flex shrink-0 items-center gap-1.5">{actions}</div> : null}
@@ -46,7 +54,25 @@ export function CardHeader({
 }
 
 export function CardBody({ className, flush, ...rest }: HTMLAttributes<HTMLDivElement> & { flush?: boolean }) {
-  return <div className={cn('min-w-0 flex-1', flush ? '' : 'px-(--card-pad) pt-3 pb-(--card-pad)', className)} {...rest} />;
+  return (
+    <div
+      // `data-flush` is how the Card above clips its own rounded corner when this is its first child. See `Card`.
+      data-flush={flush ? '' : undefined}
+      className={cn(
+        'min-w-0 flex-1',
+        flush
+          // A table as the body's first child runs edge to edge, so the body clips it and drops the header's own top
+          // border. Without the clip the header's `surface-sunk` fill squares off the card's rounded top corners, and
+          // without the drop its `border-y` draws a second line directly under the card's own edge — most visible in
+          // dark, where both lines are the same colour. DataTable's own section already did this; a plain Card with a
+          // Table did not. Only the FIRST table loses its top border: a second one is separated from what is above it.
+          ? 'has-[>div:first-child>table]:overflow-hidden [&>div:first-child>table>thead>tr>th]:border-t-0'
+          : 'px-(--card-pad) pt-3 pb-(--card-pad)',
+        className,
+      )}
+      {...rest}
+    />
+  );
 }
 
 /** A quiet band at the foot of a card: a link to the full view, a caption. */

package/payload/src/components/ui/card/preview.tsx

@@ -5,6 +5,7 @@ import { Specimen, Plane } from '@/system/specimen';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardBody, CardFooter, CardHeader } from '.';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 
 const ROWS = [
   ['POST /v1/messages', '612ms'],
@@ -46,6 +47,30 @@ export default function CardPreview() {
           </Card>
         </Plane>
       </Specimen>
+      <Specimen label="Flush, a table first" note="A flush body clips a table that is its first child, and drops the header row's top border: the card's edge is the table's edge, with no second line under it and no square corner over the card's round one." stack>
+        <Plane>
+          <Card className="max-w-md">
+            <CardBody flush>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableHeader>Endpoint</TableHeader>
+                    <TableHeader align="right">p95</TableHeader>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {ROWS.map(([r, v]) => (
+                    <TableRow key={r}>
+                      <TableCell><span className="font-mono text-xs">{r}</span></TableCell>
+                      <TableCell align="right" numeric>{v}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardBody>
+          </Card>
+        </Plane>
+      </Specimen>
       <Specimen label="Interactive" note="The whole card is one link: the border strengthens and it lifts on hover." stack>
         <Plane className="grid gap-4 sm:grid-cols-2">
           <Card interactive className="p-(--card-pad)">

package/payload/src/components/ui/segmented/README.md

@@ -37,7 +37,7 @@ The thumb slides and resizes over `dur-enter` with `ease-out`; labels change col
 ## Surfaces
 
 - **Console**: in the masthead (the period) or a card head (a view switch).
-- **Mobile**: it never wraps; shorten labels ("30D") or move it to its own row.
+- **Mobile**: it never wraps. When the labels are wider than the room the track has, the track scrolls sideways with the edge fade (`scroll-fade-x`), in a card head with counts in the labels ("All 37 · Idea 3 · Scored 25") as much as anywhere else; shorten labels ("30D") where you can, and prefer five options or fewer.
 - **Embed**: the period control in the embed head, `sm`.
 
 ## Agents

package/payload/src/components/ui/segmented/index.tsx

@@ -46,7 +46,10 @@ export function Segmented<V extends string>({
       value={value}
       onValueChange={(v) => v && onChange(v as V)}
       aria-label={label}
-      className={cn('relative inline-flex shrink-0 items-center rounded-md bg-surface-sunk p-0.5 ring-1 ring-line ring-inset', className)}
+      className={cn(
+        'scroll-fade-x relative inline-flex min-w-0 max-w-full items-center overflow-x-auto rounded-md bg-surface-sunk p-0.5 ring-1 ring-line ring-inset [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+        className,
+      )}
     >
       {thumb ? (
         <span

package/payload/src/lib/collection.ts

@@ -11,13 +11,26 @@ export type Collection<T extends Record<string, unknown>, K extends keyof T & st
   name: string;
   label: string;
   description: string;
-  /** The record without its key. */
+  /** The record without its key, as a write takes it. */
   fields: z.ZodObject;
+  /**
+   * Fields the data layer works out and no write ever takes: a score, a band, a stage, a value joined in from another
+   * table. They live on the record, so a page reads them and the assistant may filter on them, and they are never in
+   * `fields` — a change cannot set one, because `patchOf` builds its shape from `fields` alone.
+   */
+  derived?: (keyof T & string)[];
   key: K;
   title: (row: T) => string;
   query: (q: Query) => Promise<{ rows: T[]; total: number }>;
-  create?: (input: Omit<T, K>) => Promise<T>;
-  update?: (ids: string[], patch: Partial<Omit<T, K>>) => Promise<T[]>;
+  /**
+   * A plain record, validated by `fields`, and never `Omit<T, K>`.
+   *
+   * A record type carries fields a write does not take — the worked-out ones above, and data joined in from elsewhere —
+   * and a form hands over strings, so `Omit<T, K>` demands things the caller cannot supply and every real data layer
+   * ends up casting around it. The write shape is `fields`; this says so, and `fields.parse` is what holds it.
+   */
+  create?: (input: Record<string, unknown>) => Promise<T>;
+  update?: (ids: string[], patch: Record<string, unknown>) => Promise<T[]>;
   remove?: (ids: string[]) => Promise<number>;
   /** Operations only a page may perform; the assistant and an MCP server never get them. */
   pageOnly?: Op[];
@@ -63,6 +76,7 @@ export function arrayCollection<T extends Record<string, unknown>, K extends key
   label: string;
   description: string;
   fields: z.ZodObject;
+  derived?: (keyof T & string)[];
   key: K;
   title: (row: T) => string;
   rows: T[];
@@ -82,6 +96,9 @@ export function arrayCollection<T extends Record<string, unknown>, K extends key
   const missing = (ids: string[]) => ids.filter((id) => !rows().some((r) => r[key] === id));
   const pick = (ids: string[]) => {
     const gone = missing(ids);
+    // The sentence is the whole diagnosis, and the same one reaches the form's banner, the assistant's tool result and
+    // a REST route of your own: `src/lib/assistant/tools.ts` wraps a thrown message, and the sample's server actions
+    // return it, so nothing has to be translated between them. A REST surface maps it to a status where it lives.
     if (gone.length) throw new Error(`No ${name} with id ${gone.join(', ')}`);
     return rows().filter((r) => ids.includes(r[key] as string));
   };
@@ -91,6 +108,7 @@ export function arrayCollection<T extends Record<string, unknown>, K extends key
     label: def.label,
     description: def.description,
     fields: def.fields,
+    derived: def.derived,
     key,
     title: def.title,
     pageOnly: def.pageOnly,
@@ -160,9 +178,15 @@ export function visibleFields(c: AnyCollection): z.ZodObject {
   return c.fields.omit(Object.fromEntries(((c.hidden ?? []) as string[]).map((f) => [f, true])) as Record<string, true>).strict();
 }
 
-/** The input schema of the query tool: field names come from the collection, so an unknown or hidden field is rejected. */
+/** The input schema of the query tool: field names come from the collection, so an unknown or hidden field is rejected.
+ *
+ * `derived` fields are named here and nowhere else: they are readable and queryable, and no write can set one, because
+ * `fields` is what a write takes. `visibleFields` has already dropped the hidden ones from `fields`, so only a hidden
+ * derived field needs dropping here. */
 export function queryInput(c: AnyCollection) {
-  const field = z.enum([c.key, ...Object.keys(visibleFields(c).shape)] as [string, ...string[]]);
+  const hidden = new Set((c.hidden ?? []) as string[]);
+  const derived = ((c.derived ?? []) as string[]).filter((f) => !hidden.has(f));
+  const field = z.enum([c.key, ...Object.keys(visibleFields(c).shape), ...derived] as [string, ...string[]]);
   const scalar = z.union([z.string(), z.number(), z.boolean(), z.null()]);
   return z.object({
     where: z.array(z.object({ field, op: z.enum(['eq', 'ne', 'gt', 'lt', 'contains', 'in']), value: z.union([scalar, z.array(scalar)]) })).optional(),

package/payload/src/lib/period.ts

@@ -9,6 +9,8 @@
 export const PERIODS = ['7d', '30d', '90d', 'all'] as const;
 export type Period = (typeof PERIODS)[number];
 
+/** The picker's own default. Read it with `parsePeriod(undefined)`, which returns this for anything it does not know —
+ *  a product's own period context does not need a second constant to start from. */
 const DEFAULT_PERIOD: Period = '30d';
 
 export const PERIOD_LABEL: Record<Period, string> = {
@@ -18,6 +20,15 @@ export const PERIOD_LABEL: Record<Period, string> = {
   all: 'All time',
 };
 
+/** The picker's short label per period ("30D"), here beside the full name so one file holds the vocabulary: a product
+ *  that adds its own period edits this file and the picker follows, with nothing to patch in the component. */
+export const PERIOD_SHORT: Record<Period, string> = {
+  '7d': '7D',
+  '30d': '30D',
+  '90d': '90D',
+  all: 'All',
+};
+
 /** Days in a period, or `null` for `all`. */
 export const PERIOD_DAYS: Record<Period, number | null> = {
   '7d': 7,

package/payload/src/views/not-found-address.tsx

@@ -7,7 +7,7 @@ import { app } from '@/app.config';
 import { Button } from '@/components/ui/button';
 import { openCommand } from '@/components/patterns/command-palette';
 import { cn } from '@/lib/cn';
-import { nearestOf, readable } from '@/views/not-found';
+import { nearestOf, readable, homeLabel } from '@/views/not-found';
 
 /**
  * The address that led nowhere, walked back to the deepest page that exists: that part is a link, the part after it is
@@ -43,7 +43,7 @@ export function MissingAddress({ size = 'display' }: { size?: 'display' | 'quiet
 }
 
 /**
- * The ways back: the nearest page that exists first, then the Overview when that is somewhere else. Inside the shell,
+ * The ways back: the nearest page that exists first, then the home page when that is somewhere else. Inside the shell,
  * where the command palette lives, a miss at the root offers search instead. The caller lays them out.
  */
 export function WayBack({ size = 'lg', search = false }: { size?: 'md' | 'lg'; search?: boolean }) {
@@ -52,10 +52,10 @@ export function WayBack({ size = 'lg', search = false }: { size?: 'md' | 'lg'; s
   return (
     <>
       <Button asChild variant="primary" size={size}>
-        <Link href={n.href}><ArrowLeft />{atRoot ? 'Go to Overview' : `Back to ${n.label}`}</Link>
+        <Link href={n.href}><ArrowLeft />{atRoot ? `Go to ${homeLabel}` : `Back to ${n.label}`}</Link>
       </Button>
       {!atRoot ? (
-        <Button asChild size={size}><Link href="/">Go to Overview</Link></Button>
+        <Button asChild size={size}><Link href="/">Go to {homeLabel}</Link></Button>
       ) : search ? (
         <Button size={size} icon={<Search />} onClick={openCommand}>Search pages</Button>
       ) : null}