@flood-md/agent 0.2.9 → 0.2.11

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

@@ -0,0 +1,232 @@
+# Settings workspace
+
+[Open the working composition](/playground/settings).
+
+Use a settings page when a person needs to review and change several related
+preferences together. This example groups workspace details and notifications
+in one form with a single save boundary. Fieldset names the groups, Field
+associates labels and errors, and Grid lets related fields share tracks when
+there is room. Use a standalone form control for a preference that should
+apply immediately and has no shared save boundary.
+
+## Save and discard
+
+The host keeps a draft and the last accepted snapshot. Save validates the
+workspace name, focuses its input if invalid and writes the full proposal
+before announcing success. A write failure leaves the draft available for
+retry. Discard restores the accepted snapshot and moves focus back to the first
+field. Keep the save control available after success so a focused submit
+button stays in the tab order.
+
+This playground uses a dedicated browser storage key. The first visit starts
+with defaults. If a saved snapshot cannot be read or parsed, show a retry
+action and leave that snapshot intact. Use the host's actual persistence and
+permission model when adapting the recipe.
+
+## Source
+
+```tsx
+"use client";
+
+import { useEffect, useRef, useState, type FormEvent } from "react";
+import {
+  Alert, Button, Container, Field, Fieldset, Grid, Heading, Inline,
+  Input, Select, Stack, Surface, Switch, Text,
+} from "@flood-md/react";
+import "./settings-workspace.css";
+
+const storageKey = "flood:settings-workspace:v1";
+const timeZones = ["UTC", "Europe/London", "America/New_York", "Asia/Tokyo"] as const;
+const maxNameLength = 80;
+type TimeZone = typeof timeZones[number];
+
+interface WorkspaceSettings {
+  name: string;
+  timeZone: TimeZone;
+  assignmentAlerts: boolean;
+  weeklyDigest: boolean;
+}
+
+const defaults: WorkspaceSettings = {
+  name: "Studio North",
+  timeZone: "UTC",
+  assignmentAlerts: true,
+  weeklyDigest: false,
+};
+
+function isTimeZone(value: unknown): value is TimeZone {
+  return timeZones.some(timeZone => timeZone === value);
+}
+
+function readSettings(): WorkspaceSettings {
+  const snapshot = window.localStorage.getItem(storageKey);
+  if (snapshot === null) return defaults;
+  const value: unknown = JSON.parse(snapshot);
+  if (
+    typeof value === "object" && value !== null &&
+    "name" in value && typeof value.name === "string" && value.name.trim() &&
+    value.name.length <= maxNameLength &&
+    "timeZone" in value && isTimeZone(value.timeZone) &&
+    "assignmentAlerts" in value && typeof value.assignmentAlerts === "boolean" &&
+    "weeklyDigest" in value && typeof value.weeklyDigest === "boolean"
+  ) {
+    return {
+      name: value.name,
+      timeZone: value.timeZone,
+      assignmentAlerts: value.assignmentAlerts,
+      weeklyDigest: value.weeklyDigest,
+    };
+  }
+  throw new Error("Invalid workspace settings");
+}
+
+export function SettingsWorkspace() {
+  const [accepted, setAccepted] = useState<WorkspaceSettings | null>(null);
+  const [draft, setDraft] = useState(defaults);
+  const [readError, setReadError] = useState(false);
+  const [nameError, setNameError] = useState("");
+  const [saveError, setSaveError] = useState("");
+  const [notice, setNotice] = useState("");
+  const nameInput = useRef<HTMLInputElement>(null);
+
+  function load() {
+    try {
+      const settings = readSettings();
+      setAccepted(settings);
+      setDraft(settings);
+      setReadError(false);
+    } catch {
+      setReadError(true);
+    }
+  }
+
+  useEffect(load, []);
+
+  const dirty = accepted !== null && (
+    draft.name !== accepted.name || draft.timeZone !== accepted.timeZone ||
+    draft.assignmentAlerts !== accepted.assignmentAlerts || draft.weeklyDigest !== accepted.weeklyDigest
+  );
+
+  function update<K extends keyof WorkspaceSettings>(key: K, value: WorkspaceSettings[K]) {
+    setDraft(current => ({ ...current, [key]: value }));
+    setNotice("");
+    if (key === "name") setNameError("");
+  }
+
+  function save(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!accepted) return;
+    const name = draft.name.trim();
+    if (!name) {
+      setNameError("Enter a workspace name.");
+      nameInput.current?.focus();
+      return;
+    }
+    const proposal = { ...draft, name };
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(proposal));
+    } catch {
+      setSaveError("Settings could not be saved. Try again.");
+      return;
+    }
+    setAccepted(proposal);
+    setDraft(proposal);
+    setNameError("");
+    setSaveError("");
+    setNotice("Settings saved.");
+  }
+
+  function reset() {
+    if (!accepted) return;
+    setDraft(accepted);
+    setNameError("");
+    setSaveError("");
+    setNotice("Unsaved changes discarded.");
+    nameInput.current?.focus({ preventScroll: true });
+  }
+
+  return (
+    <Container size="md" gutter="4">
+      <Stack gap="6">
+        <Heading level={1} size="page">Workspace settings</Heading>
+        {readError ? (
+          <Stack gap="4">
+            <Alert tone="error" announcement="polite">Settings could not be loaded.</Alert>
+            <Inline><Button variant="subtle" onClick={load}>Retry</Button></Inline>
+          </Stack>
+        ) : accepted ? (
+          <Surface padding="6" elevation="raised">
+            <form aria-label="Workspace settings" onSubmit={save} noValidate>
+              <Stack gap="6">
+                <Fieldset legend="General" legendSize="section">
+                  <Grid minItemWidth="14rem" gap="4">
+                    <Field label="Workspace name" required error={nameError}>
+                      {props => (
+                        <Input {...props} ref={nameInput} name="name" maxLength={maxNameLength}
+                          value={draft.name} onChange={event => update("name", event.currentTarget.value)} />
+                      )}
+                    </Field>
+                    <Field label="Time zone">
+                      {props => (
+                        <Select {...props} name="timeZone" value={draft.timeZone}
+                          onChange={event => {
+                            const value = event.currentTarget.value;
+                            if (isTimeZone(value)) update("timeZone", value);
+                          }}>
+                          {timeZones.map(timeZone => <option key={timeZone}>{timeZone}</option>)}
+                        </Select>
+                      )}
+                    </Field>
+                  </Grid>
+                </Fieldset>
+                <Fieldset legend="Notifications" legendSize="section">
+                  <Stack gap="0" className="settings-switches">
+                    <Switch className="settings-switch" label="New assignments" name="assignmentAlerts" checked={draft.assignmentAlerts}
+                      onChange={event => update("assignmentAlerts", event.currentTarget.checked)} />
+                    <Switch className="settings-switch" label="Weekly summary" name="weeklyDigest" checked={draft.weeklyDigest}
+                      onChange={event => update("weeklyDigest", event.currentTarget.checked)} />
+                  </Stack>
+                </Fieldset>
+                <Stack gap="4">
+                  {saveError && <Alert tone="error" announcement="polite">{saveError}</Alert>}
+                  <Inline gap="3">
+                    <Button type="submit">Save settings</Button>
+                    <Button variant="subtle" disabled={!dirty} onClick={reset}>Discard changes</Button>
+                    <Text size="compact" tone="subtle" role="status">{notice}</Text>
+                  </Inline>
+                </Stack>
+              </Stack>
+            </form>
+          </Surface>
+        ) : <Text role="status">Loading settings…</Text>}
+      </Stack>
+    </Container>
+  );
+}
+```
+
+```css
+.settings-switches {
+  max-inline-size: 16rem;
+}
+
+.flood-root .settings-switch {
+  inline-size: 100%;
+  justify-content: space-between;
+}
+
+.settings-switch input {
+  flex: none;
+}
+```
+
+## Review
+
+Check empty-name validation and its focus target, changes across sections,
+discard, persistence after reload and read/write failure. Confirm the form
+stacks at narrow widths and the labels remain readable with enlarged text.
+
+Compare the legend with the first switch label, then compare the spacing
+between the two switch labels. The row target already creates pitch. Align
+the tracks at the end of a bounded column and verify that each label still
+pairs clearly with its switch. See [visible weight](../layout.md#review-visible-weight).

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": []
+    }
+  ]
+}

package/dist/materials/token-sys.color.action.danger.content.json

@@ -0,0 +1,42 @@
+{
+  "role": "sys.color.action.danger.content",
+  "cssName": "--flood-sys-color-action-danger-content",
+  "description": "Destructive action text and icons",
+  "contexts": [
+    {
+      "preset": "neutral",
+      "theme": "dark",
+      "id": "sys.color.action.danger.content",
+      "type": "color",
+      "cssName": "--flood-sys-color-action-danger-content",
+      "description": "Destructive action text and icons",
+      "status": "experimental",
+      "visibility": "public",
+      "owner": "foundations",
+      "since": "0.2.4",
+      "usage": {
+        "allowed": [
+          "Destructive action text and icons"
+        ],
+        "avoid": [
+          "Validation messages",
+          "Keyboard focus"
+        ]
+      },
+      "value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          0.5411764705882353,
+          0.5411764705882353
+        ],
+        "alpha": 1
+      },
+      "alias": "ref.color.feedback.error",
+      "dependencies": [
+        "ref.color.feedback.error"
+      ],
+      "dependents": []
+    }
+  ]
+}

package/dist/materials/token-sys.color.action.ghost.content.json

@@ -0,0 +1,41 @@
+{
+  "role": "sys.color.action.ghost.content",
+  "cssName": "--flood-sys-color-action-ghost-content",
+  "description": "ghost action content",
+  "contexts": [
+    {
+      "preset": "neutral",
+      "theme": "dark",
+      "id": "sys.color.action.ghost.content",
+      "type": "color",
+      "cssName": "--flood-sys-color-action-ghost-content",
+      "description": "ghost action content",
+      "status": "experimental",
+      "visibility": "public",
+      "owner": "foundations",
+      "since": "0.2.0",
+      "usage": {
+        "allowed": [
+          "ghost action content"
+        ],
+        "avoid": [
+          "Standalone action without a visible containing context"
+        ]
+      },
+      "value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "alpha": 1
+      },
+      "alias": "ref.color.neutral.0",
+      "dependencies": [
+        "ref.color.neutral.0"
+      ],
+      "dependents": []
+    }
+  ]
+}

package/dist/materials/token-sys.color.action.ghost.disabled-content.json

@@ -0,0 +1,41 @@
+{
+  "role": "sys.color.action.ghost.disabled-content",
+  "cssName": "--flood-sys-color-action-ghost-disabled-content",
+  "description": "ghost action disabled-content",
+  "contexts": [
+    {
+      "preset": "neutral",
+      "theme": "dark",
+      "id": "sys.color.action.ghost.disabled-content",
+      "type": "color",
+      "cssName": "--flood-sys-color-action-ghost-disabled-content",
+      "description": "ghost action disabled-content",
+      "status": "experimental",
+      "visibility": "public",
+      "owner": "foundations",
+      "since": "0.2.0",
+      "usage": {
+        "allowed": [
+          "ghost action disabled-content"
+        ],
+        "avoid": [
+          "Standalone action without a visible containing context"
+        ]
+      },
+      "value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.47843137254901963,
+          0.47843137254901963,
+          0.47843137254901963
+        ],
+        "alpha": 1
+      },
+      "alias": "ref.color.neutral.550",
+      "dependencies": [
+        "ref.color.neutral.550"
+      ],
+      "dependents": []
+    }
+  ]
+}