@flood-md/agent 0.2.8 → 0.2.10

package/dist/materials/guide-theming.md

@@ -0,0 +1,73 @@
+# Customization · 0.2.5
+
+Start with the neutral dark foundations profile. `FloodRoot` selects it locally;
+version 0.2.5 does not provide a light foundations profile or a theme editor.
+Use component props for everyday variations and semantic CSS roles for project
+styling. Keep typography, spacing and finite geometry in relative units.
+
+## Scope your overrides
+
+Import Flood before your own stylesheet and put a class on the same root:
+
+```tsx
+import "@flood-md/react/styles.css";
+import "./theme.css";
+import { FloodRoot, Input, Field } from "@flood-md/react";
+
+export function App() {
+  return (
+    <FloodRoot className="my-app">
+      <Field label="Workspace name">
+        {(props) => <Input {...props} />}
+      </Field>
+    </FloodRoot>
+  );
+}
+```
+
+This example uses Field's function child; in Next.js put it in a client component.
+Import global styles once from the root layout.
+
+```css
+/* theme.css: an opt-in project override, not a new Flood default. */
+.my-app[data-flood-foundations="neutral"][data-flood-theme="dark"] {
+  --flood-sys-radius-field: 1.25rem;
+  --flood-sys-type-body-size: 1rem;
+}
+```
+
+The selector targets the same scope and has enough specificity to override the
+profile declarations. A custom property set on an ancestor may be replaced by a
+profile declaration on FloodRoot. Inspect computed values in the actual host app.
+
+## Choose semantic roles
+
+Use public `sys.*` roles, exposed in CSS as `--flood-sys-*`. Families include
+surface, content, actions, fields, feedback, focus, typography, spacing, radii,
+control sizes and motion. The [foundations guide](foundations.md) explains the
+typed lookup, manifest and scope rules.
+
+Reference (`ref.*`) values are internal building blocks. Their IDs are not a
+public customization contract. Existing props such as Button size/variant,
+Input controlSize and Surface elevation handle many variations without overrides.
+
+## Preserve useful distinctions
+
+Keep primary text readable, secondary text appropriate for its size, and necessary
+field boundaries distinct from quiet decorative borders. Preserve visible keyboard
+focus and native control behavior. Check text with WCAG and APCA guidance in the
+actual composition; a token name or a screenshot does not certify accessibility.
+Test narrow layouts, increased root text size, forced colors and reduced motion.
+
+## Legacy themes outside FloodRoot
+
+Earlier controls outside FloodRoot retain the legacy `--flood-*` variables and
+OS-following light/dark behavior. Explicit `data-flood-theme="light"` or `"dark"`
+selects that legacy theme. These variables do not configure the new foundations
+profile, and changing FloodRoot's theme attribute does not create a supported
+light foundations theme.
+
+For an existing 0.1.x project, follow its installed guide and compare the
+[migration instructions](installation.md#updates-from-011) before adopting
+FloodRoot. Keep the exact Flood package versions aligned and verify your app
+after changing CSS scope or customization.

package/dist/materials/recipe-command-palette.md

@@ -0,0 +1,66 @@
+# Command palette
+
+Compose Dialog and CommandList when commands need a modal search surface. Keep
+routing, permissions and business actions in your application. This is a project
+recipe using the 0.2.7 source API, not another package export.
+
+```tsx
+"use client";
+
+import { useState } from "react";
+import { Button, CommandList, Dialog, FloodRoot } from "@flood-md/react";
+
+export function CommandPalette({ onCommand }: { onCommand: (id: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+
+  function changeOpen(next: boolean) {
+    if (next) setQuery("");
+    setOpen(next);
+  }
+
+  return (
+    <FloodRoot>
+      <Dialog
+        title="Commands"
+        open={open}
+        onOpenChange={changeOpen}
+        trigger={props => <Button {...props} variant="subtle">Commands</Button>}
+      >
+        <CommandList
+          label="Search commands"
+          hideLabel
+          query={query}
+          onQueryChange={setQuery}
+          items={[
+            { id: "new-project", label: "New project", group: "Projects", keywords: ["create"] },
+            { id: "recent-projects", label: "Recent projects", group: "Projects" },
+            { id: "settings", label: "Open settings", group: "Workspace" },
+          ]}
+          onAction={id => {
+            changeOpen(false);
+            onCommand(id);
+          }}
+        />
+      </Dialog>
+    </FloodRoot>
+  );
+}
+```
+
+Import the Flood stylesheet once at your application entry. If this component
+already lives inside FloodRoot, reuse that scope instead of adding another one.
+
+Dialog owns modal focus, Escape, outside dismissal and trigger focus restoration.
+CommandList owns filtering, grouped results and keyboard invocation. Opening the
+palette clears its query; closing it does not execute a command. Escape stays
+available to Dialog rather than being consumed by the search control.
+
+`onCommand` identifies a host-owned action. It is not awaited: keep saving state,
+errors and navigation in your application. An action may move focus to its own
+destination; the layer should preserve that deliberate focus change.
+
+Add a global shortcut only at the application boundary, with your own editing,
+permission and nested-layer policy. Do not display a shortcut hint until that
+shortcut actually works. No shortcut, router, fuzzy-ranking service or command
+permission engine is installed by this recipe.

package/dist/materials/recipe-filter-bar.md

@@ -0,0 +1,59 @@
+# Filter bar
+
+Compose existing Field, SearchInput, Select and Button. Filtering belongs to the
+host collection, not to DataTable. This recipe filters the full local data set
+before handing it to the table and resets page and selection when filters change.
+
+```tsx
+"use client";
+import {useState} from "react";
+import {Button, DataTable, Field, Inline, SearchInput, Select, Stack} from "@flood-md/react";
+
+const projects = [
+  {id: "design", name: "Design system", status: "Active", members: 12},
+  {id: "website", name: "Website", status: "Active", members: 4},
+  {id: "research", name: "Research", status: "Draft", members: 2},
+];
+
+export function ProjectTable() {
+  const [query, setQuery] = useState("");
+  const [status, setStatus] = useState("all");
+  const [page, setPage] = useState(1);
+  const [selected, setSelected] = useState<readonly string[]>([]);
+  function resetResults() { setPage(1); setSelected([]); }
+  const visible = projects.filter(project =>
+    project.name.toLowerCase().includes(query.trim().toLowerCase()) &&
+    (status === "all" || project.status === status));
+
+  return <Stack gap="4">
+    <Inline gap="3" align="end">
+      <Field label="Search projects">{props => <SearchInput {...props}
+        value={query} onChange={event => {setQuery(event.currentTarget.value); resetResults();}} />}</Field>
+      <Field label="Status">{props => <Select {...props} value={status}
+        onChange={event => {setStatus(event.currentTarget.value); resetResults();}}>
+        <option value="all">All statuses</option>
+        <option value="Active">Active</option>
+        <option value="Draft">Draft</option>
+      </Select>}</Field>
+      {(query || status !== "all") && <Button variant="subtle"
+        onClick={() => {setQuery(""); setStatus("all"); resetResults();}}>Clear filters</Button>}
+    </Inline>
+    <DataTable caption="Projects" selectable pageSize={5}
+      page={page} onPageChange={setPage} selectedIds={selected} onSelectionChange={setSelected}
+      columns={[{id:"name",label:"Project",sortable:true},
+        {id:"status",label:"Status"}, {id:"members",label:"Members",sortable:true,align:"end"}]}
+      rows={visible.map(project => ({id:project.id,label:project.name,cells:{
+        name:project.name,status:project.status,members:project.members}}))} />
+  </Stack>;
+}
+```
+
+Place inside FloodRoot and import the shared stylesheet once. Keep visible labels
+for filters, including when defaults are active. A clear action resets actual
+values. Expose active filters as removable Tag components when the filter set
+gets larger; do not add a duplicate generic FilterBar component just for layout.
+
+For remote data, debounce or submit at the host boundary, cancel obsolete requests
+and map loading/error states explicitly. Do not pass an individual server page to
+this client-paginated DataTable or interpret the page aggregate as server-wide
+selection. Use Table + Pagination for a remote query contract.

package/dist/materials/recipe-form-submission.md

@@ -0,0 +1,39 @@
+# Form submission
+
+Keep validation, pending state and recovery explicit. Native validity runs
+before submit. Application or server errors belong to the form and its fields.
+
+```tsx
+"use client";
+import {useRef, useState} from "react";
+import {Alert, Button, Field, Input, Stack} from "@flood-md/react";
+
+export function ProjectForm({save}: {save: (data: FormData) => Promise<void>}) {
+  const locked = useRef(false);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+  const [saved, setSaved] = useState(false);
+  return <form onSubmit={async event => {
+    event.preventDefault();
+    if (locked.current) return;
+    const data = new FormData(event.currentTarget);
+    locked.current = true;
+    setPending(true); setError(""); setSaved(false);
+    try { await save(data); setSaved(true); }
+    catch { setError("Could not save. Your changes are still here. Try again."); }
+    finally { locked.current = false; setPending(false); }
+  }} aria-busy={pending}>
+    <Stack gap="4">
+      <Field label="Project name">{props => <Input {...props} name="name" required readOnly={pending} />}</Field>
+      {error && <Alert tone="error" announcement="assertive">{error}</Alert>}
+      {saved && <Alert tone="success" announcement="polite">Project saved.</Alert>}
+      <Button type="submit" loading={pending}>Save project</Button>
+    </Stack>
+  </form>;
+}
+```
+
+Capture FormData before disabling any native fields. This example preserves user
+input after failure. Map returned field errors to Field and optionally ErrorSummary;
+never pretend the request succeeded. The host supplies persistence, cancellation,
+authentication and navigation. Place inside FloodRoot and import its CSS once.

package/dist/materials/recipe-grouped-form.md

@@ -0,0 +1,66 @@
+# Grouped form
+
+Use a shared outer grid for peer groups, with the same surface padding and field
+spacing. Each group owns its title and reading order. Two short fields stack
+inside each group; the next row reuses the same tracks instead of inventing a
+new four-column or uneven grid. This recipe illustrates workspace preferences,
+not an invoice-specific screen or a universal two-column requirement.
+
+Choose the number of tracks from the task and declared viewport. A long-address
+group may span the row; a short field does not need its own column. Keep related
+fields together in DOM order, including when an optional field disappears.
+Use Grid, Fieldset, Surface and Field rather than recreating their recipes.
+
+Import the shared stylesheet once and render inside FloodRoot. onApply receives
+native FormData in the host; this recipe implements no persistence or permissions.
+Those limits belong here in documentation, not as repeated captions in the form.
+
+## Source
+
+```tsx
+"use client";
+import type {FormEvent} from 'react';
+import {Button,Field,Fieldset,Grid,Input,Select,Stack,Surface} from '@flood-md/react';
+
+/** Shared outer tracks; groups retain their own reading order and field ownership. */
+export function GroupedForm({showBillingEmail=true,onApply}:{showBillingEmail?:boolean;onApply?:(values:FormData)=>void}) {
+  function submit(event:FormEvent<HTMLFormElement>){event.preventDefault();onApply?.(new FormData(event.currentTarget));}
+  return <form aria-label="Workspace settings" onSubmit={submit}>
+    <Stack gap="8">
+      <Grid columns={2} gap="6">
+        <Surface padding="6"><Fieldset legendSize="section" legend="Identity"><Stack gap="6">
+          <Field label="Workspace name" required>{props=><Input {...props} name="workspace" required />}</Field>
+          <Field label="Reference">{props=><Input {...props} name="reference" />}</Field>
+        </Stack></Fieldset></Surface>
+        <Surface padding="6"><Fieldset legendSize="section" legend="Locale"><Stack gap="6">
+          <Field label="Language">{props=><Select {...props} name="language" defaultValue="en"><option value="en">English</option><option value="ru">Русский</option></Select>}</Field>
+          <Field label="Time zone">{props=><Select {...props} name="timezone" defaultValue="UTC"><option value="UTC">UTC</option><option value="Asia/Almaty">Almaty</option></Select>}</Field>
+        </Stack></Fieldset></Surface>
+        <Surface padding="6"><Fieldset legendSize="section" legend="Primary contact"><Stack gap="6">
+          <Field label="Contact name">{props=><Input {...props} name="contact" />}</Field>
+          <Field label="Contact email">{props=><Input {...props} name="contactEmail" type="email" />}</Field>
+        </Stack></Fieldset></Surface>
+        <Surface padding="6"><Fieldset legendSize="section" legend="Billing contact"><Stack gap="6">
+          <Field label="Billing name">{props=><Input {...props} name="billing" />}</Field>
+          {showBillingEmail&&<Field label="Billing email">{props=><Input {...props} name="billingEmail" type="email" />}</Field>}
+        </Stack></Fieldset></Surface>
+      </Grid>
+      <Button type="submit">Apply settings</Button>
+    </Stack>
+  </form>;
+}
+```
+
+## Review
+
+Compare left/right edges and gutters in both rows, label/control associations,
+native required submission and omitted optional content. Inspect long labels and
+enlarged text at the host's declared widths. Do not judge a form by zero page
+overflow alone. Read the [forms workflow](/agent/references/flood-forms/SKILL.md)
+and [content workflow](/agent/references/flood-interface-content/SKILL.md) before
+adapting it. A useful form does not need a helper paragraph under every title.
+
+Independent sections use Fieldset legendSize="section" and keep one shared outer
+Grid across peer groups. Field labels retain the compact inner gap; Stack owns
+row separation. The hierarchy workflow explains why section titles and choice
+captions are different roles.

package/dist/materials/recipe-select-all.md

@@ -0,0 +1,31 @@
+# Select all
+
+An aggregate checkbox derives its state from the selectable collection. Keep
+unavailable rows outside that collection. This recipe adds no component export.
+
+```tsx
+"use client";
+import {useState} from "react";
+import {Checkbox, Stack} from "@flood-md/react";
+
+export function Selection() {
+  const items = ["Design", "Engineering", "Support"];
+  const [selected, setSelected] = useState<string[]>([]);
+  const all = items.every(item => selected.includes(item));
+  const some = items.some(item => selected.includes(item));
+  return <Stack gap="2">
+    <Checkbox label="Select all" checked={all} indeterminate={some && !all}
+      onChange={event => setSelected(event.currentTarget.checked ? [...items] : [])} />
+    {items.map(item => <Checkbox key={item} label={item} checked={selected.includes(item)}
+      onChange={event => {
+        const checked = event.currentTarget.checked;
+        setSelected(previous => checked ? [...previous, item] : previous.filter(value => value !== item));
+      }} />)}
+  </Stack>;
+}
+```
+
+Read `checked` before scheduling an update if the event may outlive the handler.
+For remote collections, specify whether Select all means the visible page,
+filtered results or every record. A client-side array does not imply server-wide
+selection. Keep selection counts and bulk-action permissions in the host.

package/dist/materials/recipe-split-button.md

@@ -0,0 +1,26 @@
+# Split button
+
+Keep the common action directly available and place alternatives in Menu.
+ButtonGroup preserves independent native Tab stops; Menu owns popup navigation.
+
+```tsx
+import {Button, ButtonGroup, IconButton, Menu} from "@flood-md/react";
+
+export function PublishActions({onAction}: {onAction: (action: string) => void}) {
+  return <ButtonGroup label="Publish actions">
+    <Button variant="subtle" onClick={() => onAction("publish")}>Publish</Button>
+    <Menu label="More publishing actions" align="end"
+      trigger={props => <IconButton {...props} label="More publishing actions" variant="subtle">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </IconButton>}
+      items={[{id:"schedule",label:"Schedule…"},{id:"draft",label:"Save draft"}]}
+      onAction={onAction} />
+  </ButtonGroup>;
+}
+```
+
+The primary button performs an action; the icon button only opens alternatives.
+Use matching variants and sizes. Do not make the whole group one button or nest
+an action in another button. The host owns pending state and confirmation.

package/dist/materials/recipe-table-bulk-actions.md

@@ -0,0 +1,88 @@
+# Table bulk actions
+
+Compose DataTable, Toolbar, Button and AlertDialog with host-owned selection and
+operation state. There is no separate BulkActions import. The runnable example
+uses the same typed source as this page and only changes an in-memory collection.
+
+## Choose the operation scope
+
+DataTable receives the complete local collection. Its select-all checkbox selects
+the current page; selected IDs on other pages are retained. The action uses all
+selected eligible IDs in that collection. A protected row cannot be selected.
+Remote selection, permissions, transport and server results remain host-owned;
+this recipe does not imply selection of every remote search result.
+
+Read workflow:composition, workflow:data-display and workflow:navigation for the
+composition and toolbar. Apply feedback/accessibility/verification when checking
+the operation. The knowledge catalog links the actual component contracts.
+
+```tsx
+"use client";
+import {useState} from 'react';
+import {AlertDialog, Button, DataTable, Inline, Section, Stack, StatusIndicator, Surface, Text, Toolbar} from '@flood-md/react';
+
+const initialProjects = [
+  {id:'system',name:'Design system'}, {id:'website',name:'Website'},
+  {id:'docs',name:'Documentation'}, {id:'research',name:'Research'},
+  {id:'preview',name:'Component preview'}, {id:'locked',name:'Protected project'},
+];
+
+/** Local host composition; no backend operation or new BulkActions export. */
+export function TableBulkActions() {
+  const [projects,setProjects] = useState(initialProjects);
+  const [selected,setSelected] = useState<string[]>([]);
+  const [pending,setPending] = useState<string[] | null>(null);
+  const [message,setMessage] = useState('');
+  const [page,setPage] = useState(1);
+  const eligible = new Set(projects.filter(project=>project.id!=='locked').map(project=>project.id));
+  const selection = selected.filter(id=>eligible.has(id));
+  function archive() {
+    const ids = new Set(pending ?? []);
+    const count = projects.filter(project=>ids.has(project.id)&&eligible.has(project.id)).length;
+    setProjects(projects.filter(project=>!ids.has(project.id)||!eligible.has(project.id)));
+    setSelected([]);setPending(null);setPage(1);
+    setMessage(`${count} ${count===1?'project archived':'projects archived'}.`);
+  }
+  return <Surface padding="4">
+    <Section title="Projects">
+      <Stack gap="4">
+        <Inline gap="3">
+          <Text size="compact">{selection.length} selected</Text>
+          <Toolbar label="Bulk project actions">
+            <Inline gap="2">
+              <AlertDialog open={pending!==null} onOpenChange={open=>setPending(open?[...selection]:null)}
+                trigger={props=><Button {...props} size="sm" variant="subtle" disabled={!selection.length}>Archive projects</Button>}
+                title="Archive selected projects?" description={`${pending?.length??0} selected projects will leave this list.`}
+                confirmLabel="Archive selected" cancelLabel="Keep projects" confirmDisabled={!pending?.length} onConfirm={archive} />
+              <Button size="sm" variant="ghost" disabled={!selection.length} onClick={()=>setSelected([])}>Clear selection</Button>
+            </Inline>
+          </Toolbar>
+        </Inline>
+        <DataTable caption="Project list" hideCaption selectable pageSize={3} page={page} onPageChange={setPage} minWidth="28rem"
+          columns={[{id:'name',label:'Project',sortable:true},{id:'scope',label:'Scope'}]}
+          rows={projects.map(project=>({id:project.id,label:project.name,selectionDisabled:project.id==='locked',cells:{name:project.name,scope:project.id==='locked'?'Protected':'Standard'}}))}
+          selectedIds={selection} onSelectionChange={setSelected} />
+        <Inline gap="3">
+          <Button size="sm" variant="subtle" onClick={()=>{setProjects(initialProjects);setSelected([]);setPending(null);setPage(1);setMessage('Starting collection restored.');}}>Reset</Button>
+          {message && <StatusIndicator size="sm" label={message} tone="success" announce />}
+        </Inline>
+      </Stack>
+    </Section>
+  </Surface>;
+}
+```
+
+## Ownership and checks
+
+Capture the proposed IDs when opening confirmation. Cancel must preserve rows
+and selection. Confirm changes only the eligible IDs in that captured proposal.
+The example then clears selection, reports the actual local count and allows
+restoring the initial collection. A real asynchronous host needs separate pending,
+failure and retry handling; do not report success before an accepted result.
+
+Check no selection, select-all on one page, selection across pages, the protected
+row, cancel and confirm, reset, keyboard focus restoration and narrow layout.
+Use the table's ScrollArea rather than letting its minimum width overflow the
+page. StatusIndicator owns the action result; do not replace it with custom
+status markup. Scope and rendered quality require actual host checks, not just
+a passing knowledge lookup.

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

@@ -0,0 +1,134 @@
+# Workspace review
+
+[Try the local example](/playground/content#workspace-review). This composition
+uses the same source for the live view and the example below. Import the Flood
+stylesheet once and render it inside FloodRoot. No network, upload, authorization
+or persistent save is implemented: acceptance captures native FormData in memory.
+
+## Choose the owner
+
+Section supplies the heading and supporting content. Field owns the Input/Select
+associations; Checkbox owns its label and native form value. Button supplies submit
+and reset actions. StatusIndicator describes draft/snapshot state without a
+handmade dot. Alert announces local acceptance, and DescriptionList shows the
+accepted values separately from the current draft.
+
+The rendered form keeps task labels and operation state concise. Example-only
+storage and permission limits are documented above; they are not repeated as
+badges, helper paragraphs and drawer descriptions in the product composition.
+
+Drawer owns modal focus, scroll locking and dismissal. Its FileList/FileItem rows
+reuse FileMeta and StatusIndicator. The English example supplies an explicit
+locale for file metadata, keeping server and browser formatting consistent.
+No parallel popup, field or file chip is
+implemented in this recipe. Stack, Inline and Surface own the composition's gaps
+and containment. An unstyled section wrapper provides the demonstration anchor.
+
+## Apply relevant skills
+
+Read [composition](/agent/references/flood-composition/SKILL.md),
+[forms](/agent/references/flood-forms/SKILL.md),
+[spacing](/agent/references/flood-spacing/SKILL.md),
+[overlays](/agent/references/flood-overlays/SKILL.md) and
+[feedback](/agent/references/flood-feedback/SKILL.md) as those tasks arise.
+The [skills index](/docs/skills) routes other work without loading every guide.
+
+Controlled values are reset explicitly after checking that native reset was not
+cancelled. Browser validity blocks an empty or whitespace-only name before
+submission. Unchecked updates are absent from FormData. Changing a draft keeps
+the accepted snapshot intact and marks it stale. Closing the drawer never resets
+the form. The status uses text as well as color.
+
+## Source
+
+```tsx
+"use client";
+import {useRef, useState, type FormEvent} from "react";
+import {Button, Checkbox, DescriptionList, Drawer, Field, FileItem, FileList,
+  Inline, Input, Link, Section, Select, Stack, StatusIndicator, Surface, Text} from "@flood-md/react";
+
+const defaults = {name: "Design workspace", visibility: "private", updates: true};
+
+/** Host state and native form semantics; no persistence or upload transport. */
+export function WorkspaceReview() {
+  const [draft, setDraft] = useState(defaults);
+  const [saved, setSaved] = useState<Record<string, string> | null>(null);
+  const [error, setError] = useState("");
+  const [filesOpen, setFilesOpen] = useState(false);
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    setSaved({name: String(data.get("workspace")), visibility: String(data.get("visibility")),
+      updates: data.has("updates") ? "On" : "Off"});
+    setError("");
+  }
+  function reset(event: FormEvent<HTMLFormElement>) {
+    const nativeEvent = event.nativeEvent;
+    queueMicrotask(() => {
+      if (nativeEvent.defaultPrevented) return;
+      setDraft(defaults); setSaved(null); setError("");
+    });
+  }
+  const dirty = saved !== null && (saved.name !== draft.name || saved.visibility !== draft.visibility
+    || saved.updates !== (draft.updates ? "On" : "Off"));
+
+  return <Surface padding="4">
+    <Section title="Workspace settings">
+      <Stack gap="6">
+        <form aria-label="Workspace review settings" onSubmit={submit} onReset={reset}>
+          <Stack gap="4">
+            <Field label="Workspace name" required error={error || undefined}>
+              {control => <Input {...control} ref={nameRef} name="workspace" required pattern={".*\\S.*"}
+                value={draft.name} onChange={event => {setDraft({...draft, name: event.currentTarget.value}); setError("");}}
+                onInvalid={() => setError("Enter a workspace name, including at least one non-space character.")} />}
+            </Field>
+            <Field label="Visibility">
+              {control => <Select {...control} name="visibility" value={draft.visibility}
+                onChange={event => setDraft({...draft, visibility: event.currentTarget.value})}>
+                <option value="private">Only me</option><option value="team">Project team</option>
+              </Select>}
+            </Field>
+            <Checkbox label="Product updates" name="updates" value="yes" checked={draft.updates}
+              onChange={event => setDraft({...draft, updates: event.currentTarget.checked})} />
+            <Inline gap="3">
+              <Button type="submit">Apply changes</Button><Button type="reset" variant="subtle">Reset settings</Button>
+              {saved && <StatusIndicator size="sm" tone={!dirty ? "success" : "neutral"}
+                label={dirty ? "Unapplied changes" : "Applied"} />}
+            </Inline>
+          </Stack>
+        </form>
+        {saved && <Stack gap="3">
+          <DescriptionList items={[
+            {id:"name", term:"Accepted name", description:saved.name},
+            {id:"visibility", term:"Accepted visibility", description:saved.visibility === "team" ? "Project team" : "Only me"},
+            {id:"updates", term:"Accepted updates", description:saved.updates},
+          ]} />
+        </Stack>}
+        <Drawer title="Files"
+          open={filesOpen} onOpenChange={setFilesOpen} closeLabel="Close project files"
+          trigger={props => <Button {...props} variant="subtle">Review files</Button>}
+          footer={<Button onClick={() => setFilesOpen(false)}>Done reviewing</Button>}>
+          <Stack gap="4"><FileList label="Sample project files">
+            <FileItem lang="en" name="Research findings — international expansion and onboarding.pdf" format="PDF" size={2457600}
+              description={<StatusIndicator label="Ready for review" tone="info" size="sm" />} />
+            <FileItem lang="en" name="Brand guidelines.pdf" format="PDF" size={1048576}
+              description={<StatusIndicator label="Reviewed" tone="success" size="sm" />} />
+          </FileList></Stack>
+        </Drawer>
+        <Text as="p" size="helper" tone="subtle"><Link href="/docs/recipes/workspace-review">Read the composition and its checks</Link></Text>
+      </Stack>
+    </Section>
+  </Surface>;
+}
+```
+
+## Verify in the host
+
+Exercise invalid submit and focus, corrected submit, unchecked values, dirty
+drafts, normal/cancelled reset and the accepted snapshot. Open the drawer by
+keyboard, dismiss it and verify focus returns to the trigger. Inspect its long
+file names and metadata with enlarged text and RTL at a narrow width; local
+scrolling must keep all content reachable without page overflow. These checks
+support this recipe; they do not certify every possible host composition.

package/dist/materials/token-sys.color.accent.content.json

@@ -0,0 +1,41 @@
+{
+  "role": "sys.color.accent.content",
+  "cssName": "--flood-sys-color-accent-content",
+  "description": "Accent text and metadata on neutral dark surfaces",
+  "contexts": [
+    {
+      "preset": "neutral",
+      "theme": "dark",
+      "id": "sys.color.accent.content",
+      "type": "color",
+      "cssName": "--flood-sys-color-accent-content",
+      "description": "Accent text and metadata on neutral dark surfaces",
+      "status": "experimental",
+      "visibility": "public",
+      "owner": "foundations",
+      "since": "0.2.4",
+      "usage": {
+        "allowed": [
+          "Accent text and metadata on neutral dark surfaces"
+        ],
+        "avoid": [
+          "Keyboard focus indicators"
+        ]
+      },
+      "value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          0.3607843137254902,
+          0.6588235294117647
+        ],
+        "alpha": 1
+      },
+      "alias": "ref.color.accent.default",
+      "dependencies": [
+        "ref.color.accent.default"
+      ],
+      "dependents": []
+    }
+  ]
+}