@flood-md/agent 0.2.11 → 0.2.13

package/dist/materials/recipe-collection-views.md

@@ -61,7 +61,9 @@ checkboxes with no resulting action.
 
 Selecting projects reveals one shared action bar floating at the viewport bottom. It shows the
 selected count, changes status, confirms archiving and clears the
-selection. Selection spans the filtered client collection across its pages.
+selection. DataTable uses `showSelection={false}` to keep its result range and
+pagination while announcing the selected count without displaying it again.
+Selection spans the filtered client collection across its pages.
 Changing the query resets it. Archiving captures IDs and names before opening
 the confirmation. Cancel keeps the selection and records intact.
 
@@ -70,6 +72,10 @@ records after the optional onUpdateStatus callback accepts the whole operation.
 Reload returns to the declared fixtures. A rejection keeps accepted records and
 selection intact. Retry uses the failed operation's captured IDs and status.
 Dismiss or a deliberate query/selection change abandons its feedback.
+Report results in a floating ToastRegion so the table stays in place.
+Use the default bottom-end placement. Success expires automatically. A failed
+update offers a persistent Retry action. While the selection rail is visible,
+raise the toast above it without changing the table's scroll clearance.
 
 Only one update can run at a time. Pending actions are disabled. If the user
 changes the query or selection while an update is pending, its result still
@@ -113,7 +119,7 @@ export function ProjectSelectionActions({ projects, pending, onUpdate, onClear }
     <VisuallyHidden role="status">{pending ? 'Updating…' : ''}</VisuallyHidden>
     {archive && <AlertDialog
         title={`Archive ${archive.length} ${archive.length === 1 ? 'project' : 'projects'}?`}
-        description={`${archive.map(project => project.name).join(', ')} will move to Archived.`}
+        description={`${archive.map(project => project.name).join(', ')}\n${archive.length === 1 ? 'It' : 'They'} will move to Archived.`}
         confirmLabel="Archive projects"
         cancelLabel="Keep projects"
         open
@@ -129,29 +135,52 @@ export function ProjectSelectionActions({ projects, pending, onUpdate, onClear }
 
 The panel uses the existing floating-surface tokens and a viewport-safe inset.
 It leaves normal document flow and stays centered when the document scrolls.
+Check the table header position and scroll dimensions with zero, one and
+several selected records. A collection that fits should keep fitting on selection.
 BulkActionBar keeps a single pill-shaped row with at most two visible commands
 by default. Lower-priority commands move into More as space shrinks; the host
-does not add a second row of commands. ResizeObserver measures its actual height, and the
-collection reserves enough bottom space for the final rows and pagination to
-scroll above the panel. Keep this measured clearance with the host styles.
+keeps the commands on one row. Budget bottom clearance in the base layout
+using the control height, the panel chrome and the viewport inset. At the end
+of a scroll, the final rows and pagination should be reachable above the panel.
+Keep the scroll area inside the bordered Surface and clip the frame at its
+rounded corners so the table footer cannot cover the outline.
 
 ```css
 .collection-examples { padding-block:var(--flood-sys-space-8); min-inline-size:0; }
 .collection-view-controls { min-inline-size:0; }
 .flood-root .collection-filter-editor { inline-size:min(42rem,calc(100vw - 2rem)); }
 
+.collection-projects {
+  --collection-selection-inset: max(var(--flood-sys-space-4), env(safe-area-inset-bottom));
+  --collection-selection-control-height: var(--flood-sys-control-sm-height);
+  --collection-selection-height: calc(var(--collection-selection-control-height) + 2 * (var(--flood-sys-space-1) + var(--flood-sys-stroke-width)));
+  padding-block-end: calc(var(--collection-selection-inset) + var(--collection-selection-height) + var(--flood-sys-space-2));
+}
+
+@media (pointer: coarse) {
+  .collection-projects {
+    --collection-selection-control-height: max(var(--flood-sys-control-sm-height), var(--flood-sys-size-touch));
+  }
+}
+
+.collection-table-frame {
+  border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative);
+  overflow: clip;
+}
+
 .collection-selection-panel {
   position: fixed;
   inset-inline: 0;
-  inset-block-end: max(var(--flood-sys-space-4), env(safe-area-inset-bottom));
+  inset-block-end: var(--collection-selection-inset);
   margin-inline: auto;
   inline-size: min(26rem, calc(100% - 2 * var(--flood-sys-space-4)));
   max-inline-size: calc(100% - 2 * var(--flood-sys-space-4));
   z-index: var(--flood-sys-layer-sticky);
 }
 
-.collection-projects[data-selected="true"] {
-  padding-block-end: calc(var(--collection-selection-height, 0px) + 2 * var(--flood-sys-space-4) + env(safe-area-inset-bottom));
+.flood-root .collection-selection-panel + .flood-toast-region {
+  inset-block-end: calc(var(--collection-selection-inset) + var(--collection-selection-height) + var(--flood-sys-space-2));
+  max-block-size: calc(100dvh - var(--collection-selection-inset) - var(--collection-selection-height) - var(--flood-sys-space-6));
 }
 ```
 
@@ -210,6 +239,12 @@ defines reset scope and supplies canClear for any state held by quickFilters.
 At most two task-important quick properties remain inline; additional properties
 belong inside Filters. Summaries outside the panel name the property and preserve
 any-match meaning. Container width, rather than viewport size, governs reflow.
+When search and filters share a wide row with a status or view selector, use
+`align="end"` on CollectionToolbar. Check that the final control reaches the
+row's trailing content edge and that the row wraps with enlarged text.
+The Projects table places its Columns control in CollectionToolbar's `actions`
+slot via DataTable's `toolbar` render function. It shares the tool row with
+search and filters, and the commands wrap as a group in a narrow container.
 
 CollectionViewSwitcher owns the separate accepted-view choice and adaptive
 commands. It reuses Field/Select and Button/OverflowActions with the same size.
@@ -222,7 +257,7 @@ SearchInput, Select, Menu, MultiSelect and SegmentedControl own input/choice beh
 Popover contains the condition draft and Tag removes applied conditions. Button
 and IconButton perform actions. Several view commands use OverflowActions; a
 single command uses Button directly. Field/Fieldset, Grid/Stack/Inline, Dialog,
-AlertDialog and Alert retain their own roles. DataTable/StatusIndicator and
+AlertDialog and ToastRegion retain their own roles. DataTable/StatusIndicator and
 FileList/FileItem/FileMeta demonstrate two result structures. No owner is inserted
 merely to increase its usage count, and no new package atom is needed for layout.
 
@@ -293,7 +328,7 @@ export function readCollectionViews(key:string,schema:CollectionSchema,storage:V
 
 ```tsx
 "use client";
-import {useEffect,useRef,useState,type FormEvent} from 'react';
+import {useEffect,useRef,useState,type FormEvent,type ReactNode} from 'react';
 import {Alert,AlertDialog,Button,CollectionToolbar,CollectionViewSwitcher,Dialog,Field,FilterGroup,IconSlot,Inline,Input,Menu,Select,Stack,Tag,type OverflowAction} from '@flood-md/react';
 import {collectionQueryKey,copyCollectionQuery,parseCollectionQuery,readCollectionViews,type CollectionQuery,type CollectionSchema,type CollectionView,type FilterProperty,type ViewRead,type ViewStorage} from './collection-views-model';
 
@@ -340,13 +375,13 @@ export function AppliedFilterControl({ property, value, onChange }: {
 
 interface CollectionViewControlsProps {
  label:string;schema:CollectionSchema;presets:readonly CollectionView[];
- value:CollectionQuery;onValueChange:(query:CollectionQuery)=>void;storageKey:string;storage?:ViewStorage;
+ value:CollectionQuery;onValueChange:(query:CollectionQuery)=>void;storageKey:string;storage?:ViewStorage;toolbarActions?:ReactNode;
 }
 type NameDraft={kind:'create'|'rename';id?:string;name:string;snapshot:CollectionQuery;error?:string;invalid?:string};
 const inlineFilterLimit = 2;
 
 /** Host recipe: shared behaviour, not a second Flood component implementation. */
-export function CollectionViewControls({label,schema,presets,value,onValueChange,storageKey,storage}:CollectionViewControlsProps){
+export function CollectionViewControls({label,schema,presets,value,onValueChange,storageKey,storage,toolbarActions}:CollectionViewControlsProps){
  const [saved,setSaved]=useState<ViewRead|{state:'loading';views:[]}>({state:'loading',views:[]}),[selectedId,setSelectedId]=useState(presets[0].id);
  const [editing,setEditing]=useState(false),[draft,setDraft]=useState(()=>copyCollectionQuery(value)),[draftError,setDraftError]=useState('');
  const [advancedEditor, setAdvancedEditor] = useState(false);
@@ -435,6 +470,7 @@ export function CollectionViewControls({label,schema,presets,value,onValueChange
   {saved.state==='error'&&<Stack gap="3"><Alert tone="error">Saved views could not be read.</Alert><Inline gap="3"><Button size="sm" variant="subtle" onClick={()=>setReadAttempt(attempt=>attempt+1)}>Retry saved views</Button>{saved.raw!==null&&<Button size="sm" variant="subtle" onClick={exportSnapshot}>Export snapshot</Button>}<Button size="sm" variant="subtle" tone="danger" onClick={()=>{viewInput.current?.focus({preventScroll:true});setConfirmation({kind:'replace'});}}>Replace saved views</Button></Inline></Stack>}
   {operationError&&<Alert tone="error" announcement="polite"><Inline gap="3">{operationError.message}<Button size="sm" variant="ghost" onClick={()=>setOperationError(null)}>Dismiss</Button></Inline></Alert>}
   <CollectionToolbar label={label+' collection toolbar'} searchValue={value.search}
+    actions={toolbarActions}
     onSearchValueChange={search=>onValueChange({...value,search})}
     searchLabel={'Search '+label.toLowerCase()} searchPlaceholder={'Search '+label.toLowerCase()+'…'} clearSearchLabel={'Clear '+label.toLowerCase()+' search'}
     appliedFiltersLabel={label+' applied filters'}
@@ -496,8 +532,8 @@ chosen consumer with actual data and their own chrome.
 
 ```tsx
 "use client";
-import {useEffect,useRef,useState} from 'react';
-import {Alert,Button,DataTable,EmptyState,Field,FileItem,FileList,FloodRoot,Heading,Inline,Select,Stack,StatusIndicator,Tabs} from '@flood-md/react';
+import {useRef,useState} from 'react';
+import {Button,DataTable,EmptyState,Field,FileItem,FileList,FloodRoot,Heading,Select,Stack,StatusIndicator,Surface,Tabs,ToastRegion,type ToastItem} from '@flood-md/react';
 import {SiteHeader} from './site-header';
 import {SiteFooter} from './site-footer';
 import {CollectionViewControls} from './recipes/collection-views';
@@ -532,10 +568,8 @@ export function ProjectCollection({storage,onUpdateStatus}: {
  const [page, setPage] = useState(1);
  const [selection, setSelection] = useState<readonly string[]>([]);
  const [pending, setPending] = useState(false);
- const [feedback, setFeedback] = useState<
-   { kind: 'success'; message: string } |
-   { kind: 'error'; update: ProjectStatusUpdate; message: string } | null
- >(null);
+ const [feedback, setFeedback] = useState<ToastItem | null>(null);
+ const feedbackSequence = useRef(0);
  const inFlight = useRef(false);
  const collection = useRef<HTMLElement>(null);
  const selectionPanel = useRef<HTMLDivElement>(null);
@@ -549,20 +583,6 @@ export function ProjectCollection({storage,onUpdateStatus}: {
  const selectedProjects=rows.filter(project=>selection.includes(project.id));
  const hasSelection = selectedProjects.length > 0;
 
- useEffect(() => {
-   const panel = selectionPanel.current;
-   const host = collection.current;
-   if (!hasSelection || !panel || !host) return;
-   const measure = () => host.style.setProperty('--collection-selection-height', `${panel.getBoundingClientRect().height}px`);
-   measure();
-   const observer = new ResizeObserver(measure);
-   observer.observe(panel);
-   return () => {
-     observer.disconnect();
-     host.style.removeProperty('--collection-selection-height');
-   };
- }, [hasSelection]);
-
  async function updateStatus(proposal: ProjectStatusUpdate) {
    if (inFlight.current) return;
    const update = { ids: [...new Set(proposal.ids)], status: proposal.status };
@@ -580,33 +600,38 @@ export function ProjectCollection({storage,onUpdateStatus}: {
      setSelection(current => current.filter(id => !ids.has(id)));
      setPage(1);
      const result = update.status === 'active' ? 'set active' : update.status;
-     setFeedback({ kind: 'success', message: `${ids.size} ${ids.size === 1 ? 'project' : 'projects'} ${result}.` });
+     setFeedback({ id: String(++feedbackSequence.current), status: 'success', title: `${ids.size} ${ids.size === 1 ? 'project' : 'projects'} ${result}.` });
    } catch {
-     setFeedback({ kind: 'error', update, message: `Couldn’t update ${update.ids.length} ${update.ids.length === 1 ? 'project' : 'projects'}.` });
+     setFeedback({
+       id: String(++feedbackSequence.current),
+       status: 'error',
+       title: `Couldn’t update ${update.ids.length} ${update.ids.length === 1 ? 'project' : 'projects'}.`,
+       action: { label: 'Retry update', onClick: () => {
+         collection.current?.focus({ preventScroll: true });
+         void updateStatus(update);
+       }},
+     });
    } finally {
      inFlight.current = false;
      setPending(false);
    }
  }
 
- return <section ref={collection} tabIndex={-1} className="collection-projects" data-selected={hasSelection || undefined} aria-label="Projects collection"><Stack gap="6">
-  <CollectionViewControls label="Projects" schema={projectSchema} presets={projectPresets} value={query} onValueChange={change} storageKey="flood-project-views-v1" storage={storage}/>
+ return <section ref={collection} tabIndex={-1} className="collection-projects" aria-label="Projects collection"><Stack gap="6">
   {hasSelection&&<div ref={selectionPanel} className="collection-selection-panel"><ProjectSelectionActions projects={selectedProjects} pending={pending} onUpdate={update=>{void updateStatus(update);}} onClear={()=>{
    collection.current?.focus({preventScroll:true});setSelection([]);setFeedback(null);
   }}/></div>}
-  {feedback&&<Alert tone={feedback.kind==='error'?'error':'success'} announcement="polite"><Inline gap="3">
-   {feedback.message}
-   {feedback.kind==='error'&&<Button size="sm" variant="subtle" disabled={pending} onClick={()=>{
-    collection.current?.focus({preventScroll:true});void updateStatus(feedback.update);
-   }}>Retry update</Button>}
-   <Button size="sm" variant="ghost" disabled={pending} onClick={()=>{
-    collection.current?.focus({preventScroll:true});setFeedback(null);
-   }}>Dismiss</Button>
-  </Inline></Alert>}
-  <DataTable caption="Projects" hideCaption minWidth="36rem" selectable pageSize={5} page={page} onPageChange={setPage} selectedIds={selection} onSelectionChange={ids=>{setSelection(ids);setFeedback(null);}} sort={query.sort} onSortChange={sort=>change({...query,sort})}
+  <ToastRegion label="Project updates" items={feedback ? [feedback] : []}
+   onDismiss={id=>setFeedback(current=>current?.id===id?null:current)}/>
+  <Surface padding="0" className="collection-table-frame">
+   <DataTable caption="Projects" hideCaption minWidth="36rem" selectable showSelection={false} pageSize={5} page={page} onPageChange={setPage} selectedIds={selection} onSelectionChange={ids=>{setSelection(ids);setFeedback(null);}} sort={query.sort} onSortChange={sort=>change({...query,sort})}
+   inset="roomy" showColumnVisibility
+   toolbar={({columns}) => <CollectionViewControls label="Projects" schema={projectSchema} presets={projectPresets}
+     value={query} onValueChange={change} storageKey="flood-project-views-v1" storage={storage} toolbarActions={columns}/>}
    emptyContent={<EmptyState title="No matching projects" actions={<Button variant="subtle" onClick={()=>{change({...query,search:'',conditions:[]});collection.current?.querySelector<HTMLInputElement>('.flood-collection-toolbar input')?.focus({preventScroll:true});}}>Reset filters</Button>}/>}
-   columns={[{id:'name',label:'Project',sortable:true},{id:'owner',label:'Owner',sortable:true},{id:'status',label:'Status',sortable:true},{id:'priority',label:'Priority',sortable:true}]}
+   columns={[{id:'name',label:'Project',sortable:true,hideable:false},{id:'owner',label:'Owner',sortable:true},{id:'status',label:'Status',sortable:true},{id:'priority',label:'Priority',sortable:true}]}
    rows={rows.map(project=>({id:project.id,label:project.name,cells:{name:project.name,owner:owners.find(owner=>owner.value===project.owner)!.label,status:<StatusIndicator label={projectSchema.properties[0].options.find(option=>option.value===project.status)!.label} tone={project.status==='active'?'success':project.status==='paused'?'warning':'neutral'}/>,priority:project.priority==='urgent'?'Urgent':'Normal'},sortValues:{name:project.name,owner:project.owner,status:project.status,priority:project.priority==='urgent'?1:0}}))}/>
+  </Surface>
  </Stack></section>;
 }
 

package/dist/materials/recipe-navigation-workspace.md

@@ -62,6 +62,9 @@ embedded shell an explicit block size. Choose `scroll="page"` for natural
 document scrolling. Place a persistent top bar and footer in the shell slots,
 and PageHeader inside main. The shell has a skip target and owns the scroll
 boundary; the host owns routes and persisted choices.
+For a full-window workspace with a padded content edge, use
+`scrollContentInset="none"` when that padding already clears the overlay rail.
+Verify that the document width stays fixed as its collection grows and shrinks.
 
 For a single Sidebar, opt into `navigationDrawer` with a width threshold in CSS
 pixels and a `renderContent(close)` function. AppShell observes its own width.

package/dist/materials/recipe-record-management.md

@@ -2,22 +2,22 @@
 
 [Open the working composition](/playground/records).
 
-Search requests, narrow the list by status, open one request, and edit it in a
-Drawer. Saving applies the accepted changes and returns to the same list.
+Search requests, narrow the table by status, open one request, and edit it in a
+Drawer. Saving updates the request and returns to the same table.
 The example uses in-memory fixtures that reset on reload.
 
 ## Choose where details open
 
 Use a Drawer for a bounded inspection or edit that starts and ends in the same
 list. Use a destination page for details that need a stable URL, substantial
-room, or several independent tasks. This example uses a named Open button
-because opening its Drawer is an action on the current screen.
+room, or several independent tasks.
 
 When users compare several attributes, DataTable can use a `primaryAction`
 in the identity column. Pass the Drawer trigger handlers and ref to that
 action. Check the row background, title and description, checkbox and any
 secondary menu independently. Use `toolbar` and `inset="roomy"` for a heading
-and filters that share the table surface.
+and filters that share the table surface. Use the request title as the visible
+action and keep its ID beside it for disambiguation.
 
 ```tsx
 <Drawer title="Review workspace access" size="lg"
@@ -36,11 +36,11 @@ and filters that share the table surface.
         },
       }]} />
   )}>
-  <Stack gap="6">
-    <Section title="Customer message">
+  <Stack gap="8">
+    <Section title="Customer message" headingLevel={3} headingSize="group">
       <Text as="p">Confirm who should manage member permissions.</Text>
     </Section>
-    <Section title="Assignment">
+    <Section title="Assignment" headingLevel={3} headingSize="group">
       <Field label="Owner">{field => <Input {...field} />}</Field>
     </Section>
   </Stack>
@@ -51,17 +51,36 @@ Use `size="lg"` when long messages and several field groups need the wider
 reading area. Compose the body from Section for separately named content,
 DescriptionList for facts and Fieldset for related controls. Check wrapping and
 scrolling with the longest title and a real footer action before selecting a size.
+Use the group heading size inside a detail Drawer to keep the record name prominent.
+Keep the request facts in one DescriptionList and use a compact, captioned Table
+for related records that have comparable columns, such as activity dates and events.
+Give that table its own heading when it identifies a distinct section. The Drawer
+body owns vertical scrolling and the footer keeps the next action within reach.
+
+When the detail contains line items and a total, use the Table footer to mark
+the summary and keep its amount aligned with the line-item amounts. A row header
+labels the total, and the Table footer supplies the separator and emphasis.
+
+```tsx
+<tfoot>
+  <tr>
+    <th scope="row" colSpan={2}>Total</th>
+    <td data-numeric>{formattedTotal}</td>
+  </tr>
+</tfoot>
+```
 
 ## Keep browsing state and edit state separate
 
 Keep search, filter, accepted records and the open record ID in the host.
-Keep the list and its ScrollArea mounted while the Drawer is open. Reset the
+Keep the DataTable and its ScrollArea mounted while the Drawer is open. Reset the
 scroll position only when the user changes the query or filter.
 
 Entering edit mode copies the selected record. Cancel edit returns to details
 without changing accepted data. Saving replaces the record by stable ID.
-Recompute matches using the existing search and filter. If the updated record
-leaves the results, explain why and preserve the query. For a remote save, close
+Recompute matches using the existing search and filter. Use a floating ToastRegion
+for the save result so it cannot move the table. If the updated record leaves
+the results, explain why and preserve the query. For a remote save, close
 on accepted data and retain the draft with actionable feedback on failure.
 
 ## Restore focus to a useful place
@@ -69,8 +88,9 @@ on accepted data and retain the draft with actionable feedback on failure.
 Forward the Drawer trigger props from the single overlay to the row action
 that opens it. Focus Edit request when details open, Subject when editing starts,
 and Edit request after Cancel edit. On close, return focus to the same row
-action without scrolling. If the row left the results, focus Search requests
-without clearing it.
+action without scrolling. Drawer resolves `getFallbackFocus` after closing
+if the row left the results. The recipe returns Search requests and keeps
+the current query.
 
 Keep subject and ID together in the list. Status earns a stable trailing slot
 because users filter and compare by it. Put owner and the longer summary in the
@@ -91,9 +111,10 @@ Drawer's conditional detail content.
 
 import {useEffect, useId, useLayoutEffect, useRef, useState, type FormEvent} from "react";
 import {
-  Alert, Button, DataList, DataListItem, DescriptionList, Drawer, EmptyState,
-  Field, Grid, Heading, Inline, Input, ScrollArea, SearchInput, Select,
-  Stack, StatusIndicator, Surface,
+  Button, DataTable, DescriptionList, Drawer, EmptyState,
+  Field, Grid, Heading, Inline, Input, SearchInput, Section, Select,
+  Stack, StatusIndicator, Surface, Table, ToastRegion,
+  type DataTableColumn, type ToastItem,
 } from "@flood-md/react";
 
 const statuses = {
@@ -111,6 +132,24 @@ type RequestRecord = {
   summary: string;
 };
 
+const requestColumns: DataTableColumn[] = [
+  {id: "subject", label: "Subject", sortable: true},
+  {id: "status", label: "Status", sortable: true},
+];
+
+const activityByRequest: Record<string, readonly {date: string; activity: string}[]> = {
+  "REQ-105": [
+    {date: "2026-11-10", activity: "Access issue reported"},
+    {date: "2026-11-11", activity: "Identity verified"},
+    {date: "2026-11-12", activity: "Recovery link sent"},
+  ],
+  "REQ-117": [
+    {date: "2026-11-11", activity: "Permission review requested"},
+    {date: "2026-11-12", activity: "Regional roles exported"},
+  ],
+};
+const activityDate = new Intl.DateTimeFormat("en", {month: "short", day: "numeric", timeZone: "UTC"});
+
 const fixtures: RequestRecord[] = [
   {id: "REQ-104", title: "Update billing address", owner: "Mina Chen", status: "new", summary: "Use the new address on future invoices."},
   {id: "REQ-105", title: "Restore workspace access", owner: "Alex Morgan", status: "active", summary: "A teammate cannot sign in after changing email."},
@@ -143,25 +182,20 @@ export function RecordManagement() {
   const [status, setStatus] = useState<Status | "all">("all");
   const [recordId, setRecordId] = useState<string | null>(null);
   const [draft, setDraft] = useState<RequestRecord | null>(null);
-  const [notice, setNotice] = useState("");
+  const [notice, setNotice] = useState<ToastItem | null>(null);
   const search = useRef<HTMLInputElement>(null);
-  const list = useRef<HTMLDivElement>(null);
+  const table = useRef<HTMLDivElement>(null);
   const subject = useRef<HTMLInputElement>(null);
   const edit = useRef<HTMLButtonElement>(null);
-  const opener = useRef<HTMLButtonElement>(null);
-  const restore = useRef(false);
   const returnToEdit = useRef(false);
   const selected = records.find(record => record.id === recordId);
+  const activity = selected ? activityByRequest[selected.id] : undefined;
   const results = records.filter(record => matchesRequest(record, query, status));
   const editing = draft !== null;
   const open = selected !== undefined;
 
   useBrowserLayoutEffect(() => {
-    if (!open && restore.current) {
-      restore.current = false;
-      const target = opener.current?.isConnected ? opener.current : search.current;
-      target?.focus({preventScroll: true});
-    } else if (editing) {
+    if (editing) {
       subject.current?.focus({preventScroll: true});
     } else if (open && returnToEdit.current) {
       returnToEdit.current = false;
@@ -172,12 +206,11 @@ export function RecordManagement() {
   function changeQuery(nextQuery: string, nextStatus: Status | "all") {
     setQuery(nextQuery);
     setStatus(nextStatus);
-    setNotice("");
-    if (list.current) list.current.scrollTop = 0;
+    setNotice(null);
+    table.current?.querySelector('[role="region"][aria-label="Requests"]')?.scrollTo({top: 0});
   }
 
   function closeRecord() {
-    restore.current = true;
     returnToEdit.current = false;
     setDraft(null);
     setRecordId(null);
@@ -194,9 +227,12 @@ export function RecordManagement() {
     }
     const updated = {...draft, title, owner: draft.owner.trim()};
     setRecords(current => current.map(record => record.id === updated.id ? updated : record));
-    setNotice(matchesRequest(updated, query, status)
-      ? `${updated.id} updated.`
-      : `${updated.id} updated and no longer matches the current search or filter.`);
+    setNotice({
+      id: updated.id,
+      title: `${updated.id} updated`,
+      description: matchesRequest(updated, query, status) ? undefined : "It no longer matches your search or filter.",
+      status: "success",
+    });
     closeRecord();
   }
 
@@ -231,35 +267,37 @@ export function RecordManagement() {
         open={open}
         onOpenChange={open => { if (!open) closeRecord(); }}
         initialFocusRef={edit}
-        trigger={({ref, onClick, "aria-expanded": expanded, ...trigger}) =>
-          <Surface elevation="raised" padding="4">
-            <ScrollArea ref={list} role="region" aria-label="Request results" style={{maxBlockSize: "22rem"}}>
-              {results.length > 0
-                ? <DataList aria-label="Requests">
-                  {results.map(record => <DataListItem
-                    key={record.id}
-                    title={record.title}
-                    description={record.id}
-                    metadata={<StatusIndicator {...statuses[record.status]} size="sm" />}
-                    actions={<Button {...trigger} aria-expanded={Boolean(expanded && record.id === recordId)}
-                      aria-label={`Open ${record.id} ${record.title}`}
-                      variant="subtle" size="sm" onClick={event => {
-                        opener.current = event.currentTarget;
-                        ref(event.currentTarget);
-                        setRecordId(record.id);
-                        onClick?.(event);
-                      }}>Open</Button>}
-                  />)}
-                </DataList>
-                : <EmptyState title="No matching requests" actions={<Button variant="subtle" onClick={() => {
-                  search.current?.focus({preventScroll: true});
-                  changeQuery("", "all");
-                }}>Clear filters</Button>} />}
-            </ScrollArea>
+        getFallbackFocus={() => search.current}
+        trigger={({ref, onClick, ...trigger}) =>
+          <Surface elevation="raised" padding="0" className="request-table-frame">
+            <DataTable ref={table} caption="Requests" hideCaption inset="roomy" minWidth="min-content"
+              maxViewportHeight="26rem" stickyHeader pageSize={fixtures.length}
+              columns={requestColumns} rows={results.map(record => ({
+                id: record.id,
+                cells: {status: <StatusIndicator {...statuses[record.status]} size="sm" />},
+                sortValues: {status: statuses[record.status].label},
+                primaryAction: {
+                  column: "subject", title: record.title, description: record.id,
+                  buttonProps: {
+                    ...trigger,
+                    "aria-expanded": open && record.id === recordId,
+                    "aria-label": `${record.title}, ${record.id}`,
+                    onClick: event => {
+                      ref(event.currentTarget);
+                      setRecordId(record.id);
+                      onClick?.(event);
+                    },
+                  },
+                },
+              }))}
+              emptyContent={<EmptyState title="No matching requests" actions={<Button variant="subtle" onClick={() => {
+                search.current?.focus({preventScroll: true});
+                changeQuery("", "all");
+              }}>Clear filters</Button>} />} />
           </Surface>}
         footer={draft
-          ? <Inline gap="2"><Button type="submit" form={formId}>Save changes</Button>
-            <Button variant="subtle" onClick={cancelEdit}>Cancel edit</Button></Inline>
+          ? <Inline gap="2"><Button variant="subtle" onClick={cancelEdit}>Cancel edit</Button>
+            <Button type="submit" form={formId}>Save changes</Button></Inline>
           : <Button ref={edit} onClick={() => { if (selected) setDraft({...selected}); }}>Edit request</Button>}
       >
         {draft
@@ -283,13 +321,23 @@ export function RecordManagement() {
               </Field>
             </Stack>
           </form>
-          : selected && <DescriptionList items={[
+          : selected && <Stack gap="8"><DescriptionList items={[
               {id: "request-id", term: "Request ID", description: selected.id},
               {id: "owner", term: "Owner", description: selected.owner || "Unassigned"},
               {id: "status", term: "Status", description: <StatusIndicator {...statuses[selected.status]} />},
-            ]} />}
+            ]} />
+            {activity && <Section title="Activity" headingLevel={3} headingSize="group">
+              <Table caption="Request activity" hideCaption density="compact">
+                <thead><tr><th scope="col">Date</th><th scope="col">Event</th></tr></thead>
+                <tbody>{activity.map(item => <tr key={item.date}>
+                  <td><time dateTime={item.date}>{activityDate.format(new Date(item.date))}</time></td>
+                  <td>{item.activity}</td>
+                </tr>)}</tbody>
+              </Table>
+            </Section>}
+          </Stack>}
       </Drawer>
-      {notice && <Alert tone="success" announcement="polite">{notice}</Alert>}
+      <ToastRegion items={notice ? [notice] : []} onDismiss={() => setNotice(null)} />
     </Stack>
   </section>;
 }

package/knowledge.json

@@ -21,6 +21,11 @@
       "name": "Data & feedback",
       "description": "Structured content, files and honest operation states."
     },
+    {
+      "id": "charts",
+      "name": "Charts",
+      "description": "Visualize trends, comparisons, distributions and change."
+    },
     {
       "id": "quality",
       "name": "Quality",
@@ -65,10 +70,16 @@
     "verification": [
       "quality"
     ],
+    "visual-review": [
+      "quality"
+    ],
     "interface-content": [
       "composition",
       "quality"
     ],
+    "screen-composition": [
+      "composition"
+    ],
     "hierarchy": [
       "foundations",
       "composition"
@@ -247,6 +258,10 @@
     "content": [
       "data-feedback"
     ],
+    "charts": [
+      "charts",
+      "data-feedback"
+    ],
     "feedback": [
       "data-feedback"
     ]
@@ -328,6 +343,7 @@
     }
   ],
   "documentGroups": {
+    "charts.md": ["charts", "data-feedback", "composition"],
     "recipes/record-management.md": ["data-feedback", "composition"],
     "recipes/settings-workspace.md": ["interaction", "composition"],
     "README.md": [

package/lib/inspect.d.ts

@@ -1,5 +1,5 @@
 export interface InspectionTarget {tag:string;id:string|null;className:string;label:string;}
-export interface InspectionIssue {id:'icons.text-glyph'|'icons.unslotted-svg'|'table.mixed-row-centre'|'table.word-fragment'|'copy.action-echo'|'copy.unowned-support'|'forms.track-drift'|'forms.content-track-drift'|'layout.page-overflow';target:InspectionTarget;related?:InspectionTarget;message:string;offset?:number;word?:string;}
+export interface InspectionIssue {id:'icons.text-glyph'|'icons.unslotted-svg'|'table.mixed-row-centre'|'table.word-fragment'|'copy.action-echo'|'copy.unowned-support'|'forms.track-drift'|'forms.content-track-drift'|'layout.page-overflow'|'layout.record-scroll-owner';target:InspectionTarget;related?:InspectionTarget;message:string;offset?:number;word?:string;}
 export interface RenderedUIInspection {
   schemaVersion:1;issues:InspectionIssue[];copy:InspectionTarget[];
   fields:(InspectionTarget&{x:number;y:number;width:number;height:number})[];
@@ -7,6 +7,18 @@ export interface RenderedUIInspection {
 }
 /** Invoke inside a browser document, e.g. page.evaluate(inspectRenderedUI). No mutation or network calls. */
 export declare function inspectRenderedUI(options?:{rootSelector?:string;maxElements?:number}):RenderedUIInspection;
-export interface SourceUIIssue {id:'composition.native-dialog'|'composition.native-control'|'composition.layout-owner'|'composition.scaled-minimum';line:number;column:number;excerpt:string;owner:string;message:string;}
+export interface WorkspaceScrollOptions {
+  /** Selector for one full-window AppShell. Defaults to .flood-app-shell. */
+  rootSelector?: string;
+  /** Set true for overflowing fixtures or false for fixtures whose content must fit. */
+  expectOverflow?: boolean;
+}
+/** Run with page.evaluate after the workspace settles. Throws on a broken scroll contract. */
+export declare function assertWorkspaceScroll(options?: WorkspaceScrollOptions): {
+  documentGutter: number;
+  documentOverflow: number;
+  workspaceOverflow: number;
+};
+export interface SourceUIIssue {id:'composition.native-dialog'|'composition.native-control'|'composition.page-scroll'|'composition.layout-owner'|'composition.scaled-minimum';line:number;column:number;excerpt:string;owner:string;message:string;}
 /** Text observations, not an AST or conformance check. No file access, execution or network. */
 export declare function inspectSourceUI(source:string,options?:{format?:'jsx'|'css';maxFindings?:number}):{schemaVersion:1;issues:SourceUIIssue[];truncated:boolean;notChecked:string[]};