altitude-design 0.5.0 → 0.6.0

package/dist/guidance/references/build/fixtures/patterns/assistant-conversation.jsx

@@ -32,12 +32,6 @@ function Thread({ restored }) {
   React.useEffect(() => { if (turn.state === 'complete') setUsed((u) => Math.min(99, u + 9)); }, [turn.state]);
   return (
     <div className="col ac">
-      <A.ToggleGroup type="single" size="sm" aria-label="Make the next send fail" value={failure} onValueChange={(v) => setFailure(/** @type {any} */ (v) || 'none')}>
-        <A.ToggleGroupItem value="none">Works</A.ToggleGroupItem>
-        <A.ToggleGroupItem value="offline">Offline</A.ToggleGroupItem>
-        <A.ToggleGroupItem value="rate-limited">Rate limited</A.ToggleGroupItem>
-        <A.ToggleGroupItem value="context-full">Context full</A.ToggleGroupItem>
-      </A.ToggleGroup>
       <A.Conversation aria-label="Assistant">
         <A.ConversationContent>
           {turn.input !== undefined && <A.Message from="user"><A.MessageContent>{turn.input}</A.MessageContent></A.Message>}
@@ -61,6 +55,14 @@ function Thread({ restored }) {
           <A.PromptInputSubmit />
         </A.PromptInputToolbar>
       </A.PromptInput>
+      <details className="preview-fixtures"><summary>Example fixtures</summary>
+        <A.ToggleGroup type="single" size="sm" aria-label="Make the next send fail" value={failure} onValueChange={(v) => setFailure(/** @type {any} */ (v) || 'none')}>
+          <A.ToggleGroupItem value="none">Works</A.ToggleGroupItem>
+          <A.ToggleGroupItem value="offline">Offline</A.ToggleGroupItem>
+          <A.ToggleGroupItem value="rate-limited">Rate limited</A.ToggleGroupItem>
+          <A.ToggleGroupItem value="context-full">Context full</A.ToggleGroupItem>
+        </A.ToggleGroup>
+      </details>
     </div>
   );
 }

package/dist/guidance/references/build/fixtures/patterns/members.jsx

@@ -76,30 +76,34 @@ function App() {
     setStatus([fresh.length && `${fresh.length} ${fresh.length === 1 ? 'invite' : 'invites'} sent`, already && `${already} ${already === 1 ? 'address is' : 'addresses are'} already in the workspace`].filter(Boolean).join(', ') + '.');
   };
   return (
-    <main className="mb-page">
-      <h2 id="mb-heading" tabIndex={-1} className="mb-h">Members</h2>
-      <A.Card className="mb-invite" aria-labelledby="mb-invite-h">
-        <h3 id="mb-invite-h" className="mb-sub">Invite people</h3>
-        <A.Field label="Email addresses" hint="Separate addresses with commas, or paste a list.">
-          <A.TagInput value={emails} onValueChange={setEmails} noun={['address', 'addresses']} placeholder="name@acme.dev" disabled={sending}
-            normalize={(t) => t.trim().toLowerCase()} validate={(t) => (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t) ? undefined : `${t} isn’t an email address.`)} />
-        </A.Field>
-        <div className="mb-roles"><span id="mb-role-label" className="mb-legend">Role</span>
-          <A.RadioGroup value={role} onValueChange={setRole} aria-labelledby="mb-role-label">{ROLES.map((r) => <A.Radio key={r.value} value={r.value} label={r.label} description={r.description} />)}</A.RadioGroup>
-        </div>
-        <div><A.Button variant="primary" loading={sending} disabled={!emails.length} onClick={send}>{sending ? 'Sending invites' : emails.length > 1 ? `Send ${emails.length} invites` : 'Send invite'}</A.Button></div>
-      </A.Card>
-      <A.Switch label="Make the next role change fail" checked={failNext} onCheckedChange={setFailNext} />
-      <A.Table aria-label="Members and invitations">
-        <A.TableHeader><A.TableRow><A.TableHead>Person</A.TableHead><A.TableHead>Role</A.TableHead><A.TableHead align="end"><span className="mb-vh">Actions</span></A.TableHead></A.TableRow></A.TableHeader>
-        <A.TableBody>{people.map((p) => <MemberRow key={p.id} person={p} me={me} owners={owners} fail={fail}
-          onRole={(id, r) => setPeople((l) => l.map((x) => (x.id === id ? { ...x, role: r } : x)))}
-          onRemove={(x) => { setPeople((l) => l.filter((y) => y.id !== x.id)); setStatus(`${x.name} was removed.`); }}
-          onResend={(x) => setStatus(`Invite resent to ${x.name}.`)}
-          onRevoke={(x) => { setPeople((l) => l.filter((y) => y.id !== x.id)); setStatus(`Invitation to ${x.name} revoked.`); document.getElementById('mb-heading')?.focus(); }} />)}</A.TableBody>
-      </A.Table>
-      <A.WorkflowStatus>{status}</A.WorkflowStatus>
-    </main>
+    <>
+      <main className="mb-page">
+        <h2 id="mb-heading" tabIndex={-1} className="mb-h">Members</h2>
+        <A.Card className="mb-invite" aria-labelledby="mb-invite-h">
+          <h3 id="mb-invite-h" className="mb-sub">Invite people</h3>
+          <A.Field label="Email addresses" hint="Separate addresses with commas, or paste a list.">
+            <A.TagInput value={emails} onValueChange={setEmails} noun={['address', 'addresses']} placeholder="name@acme.dev" disabled={sending}
+              normalize={(t) => t.trim().toLowerCase()} validate={(t) => (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t) ? undefined : `${t} isn’t an email address.`)} />
+          </A.Field>
+          <div className="mb-roles"><span id="mb-role-label" className="mb-legend">Role</span>
+            <A.RadioGroup value={role} onValueChange={setRole} aria-labelledby="mb-role-label">{ROLES.map((r) => <A.Radio key={r.value} value={r.value} label={r.label} description={r.description} />)}</A.RadioGroup>
+          </div>
+          <div><A.Button variant="primary" loading={sending} disabled={!emails.length} onClick={send}>{sending ? 'Sending invites' : emails.length > 1 ? `Send ${emails.length} invites` : 'Send invite'}</A.Button></div>
+        </A.Card>
+        <A.Table aria-label="Members and invitations">
+          <A.TableHeader><A.TableRow><A.TableHead>Person</A.TableHead><A.TableHead>Role</A.TableHead><A.TableHead align="end"><span className="mb-vh">Actions</span></A.TableHead></A.TableRow></A.TableHeader>
+          <A.TableBody>{people.map((p) => <MemberRow key={p.id} person={p} me={me} owners={owners} fail={fail}
+            onRole={(id, r) => setPeople((l) => l.map((x) => (x.id === id ? { ...x, role: r } : x)))}
+            onRemove={(x) => { setPeople((l) => l.filter((y) => y.id !== x.id)); setStatus(`${x.name} was removed.`); }}
+            onResend={(x) => setStatus(`Invite resent to ${x.name}.`)}
+            onRevoke={(x) => { setPeople((l) => l.filter((y) => y.id !== x.id)); setStatus(`Invitation to ${x.name} revoked.`); document.getElementById('mb-heading')?.focus(); }} />)}</A.TableBody>
+        </A.Table>
+        <A.WorkflowStatus>{status}</A.WorkflowStatus>
+      </main>
+      <details className="preview-fixtures"><summary>Example fixtures</summary>
+        <A.Switch label="Make the next role change fail" checked={failNext} onCheckedChange={setFailNext} />
+      </details>
+    </>
   );
 }
 // preview:end

package/dist/guidance/references/build/fixtures/patterns/settings.jsx

@@ -37,36 +37,40 @@ function App() {
   const field = (key, label, hint) => <A.Field label={label} hint={hint} error={general.errors[key]}><A.Input id={'ws-' + key} value={general.draft[key]} onChange={(e) => general.setField(key, e.target.value)} /></A.Field>;
   if (deleted) return <main className="st-page"><h2 ref={heading} tabIndex={-1} className="st-h">Workspace deleted</h2><p>Acme and everything in it were deleted.</p><A.WorkflowStatus>{remove.status}</A.WorkflowStatus></main>;
   return (
-    <main className="st-page">
-      <h2 ref={heading} tabIndex={-1} className="st-h">Workspace settings</h2>
-      <nav aria-label="Settings sections" className="st-nav"><a href="#st-general">General</a><a href="#st-notify">Notifications</a><a href="#st-billing">Billing</a><a href="#st-danger">Danger zone</a></nav>
-      <A.Switch label="Make the next change fail" checked={failNext} onCheckedChange={setFailNext} />
-      <A.SettingsSection id="st-general" title="General" description="Saved together: change what you need, then save once.">
-        <form className="st-form" noValidate onSubmit={(e) => { e.preventDefault(); void general.submit(); }}>
-          <A.ErrorSummary errors={Object.entries(general.errors).map(([k, message]) => ({ id: 'ws-' + k, label: k === 'name' ? 'Workspace name' : 'Workspace URL', message }))} focusKey={general.submitCount} />
-          {field('name', 'Workspace name', 'Shown to everyone in the workspace.')}
-          {field('url', 'Workspace URL', 'altitude.app/' + general.draft.url)}
-        </form>
-      </A.SettingsSection>
-      <A.SettingsSection id="st-notify" title="Notifications" description="Each change applies as soon as you make it.">
-        <A.SettingsRow label="Weekly digest" description="A summary of activity every Monday." status={writes.digest}><A.Switch checked={prefs.digest} onCheckedChange={(v) => apply('digest', v)} /></A.SettingsRow>
-        <A.SettingsRow label="Mentions" description="Email me when someone mentions me." status={writes.mentions}><A.Switch checked={prefs.mentions} onCheckedChange={(v) => apply('mentions', v)} /></A.SettingsRow>
-      </A.SettingsSection>
-      <A.SettingsSection id="st-billing" title="Billing" readOnlyReason="Only workspace owners can change billing details. Ask Maya Chen.">
-        <A.SettingsRow label="Billing email" description="Invoices and receipts go here."><A.Input defaultValue="finance@acme.dev" /></A.SettingsRow>
-      </A.SettingsSection>
-      <A.SettingsSection id="st-danger" title="Danger zone" tone="critical">
-        <A.SettingsRow label="Delete workspace" description={remove.consequence}><A.Button variant="danger" onClick={remove.request}>Delete workspace</A.Button></A.SettingsRow>
-      </A.SettingsSection>
-      <A.WorkflowStatus>{general.status || remove.status}</A.WorkflowStatus>
-      <A.SaveBar record={general} />
-      <A.Dialog open={confirming} background="stationary" dismissible={remove.phase !== 'pending'} onOpenChange={(o) => { if (!o) { remove.cancel(); setTyped(''); } }} returnFocus={() => heading.current}
-        title="Delete Acme workspace?" description={remove.consequence}
-        footer={<><A.Button disabled={remove.phase === 'pending'} onClick={() => { remove.cancel(); setTyped(''); }}>Keep workspace</A.Button><A.Button variant="danger" disabled={typed !== 'Acme' || remove.phase === 'pending'} onClick={remove.phase === 'failed' ? remove.retry : remove.confirm}>{remove.phase === 'pending' ? 'Deleting workspace' : remove.phase === 'failed' ? 'Try deleting again' : 'Delete workspace'}</A.Button></>}>
-        <A.Field label="Type Acme to confirm"><A.Input value={typed} onChange={(e) => setTyped(e.target.value)} autoComplete="off" /></A.Field>
-        {remove.error && <p role="alert">{remove.error}</p>}
-      </A.Dialog>
-    </main>
+    <>
+      <main className="st-page">
+        <h2 ref={heading} tabIndex={-1} className="st-h">Workspace settings</h2>
+        <nav aria-label="Settings sections" className="st-nav"><a href="#st-general">General</a><a href="#st-notify">Notifications</a><a href="#st-billing">Billing</a><a href="#st-danger">Danger zone</a></nav>
+        <A.SettingsSection id="st-general" title="General" description="Saved together: change what you need, then save once.">
+          <form className="st-form" noValidate onSubmit={(e) => { e.preventDefault(); void general.submit(); }}>
+            <A.ErrorSummary errors={Object.entries(general.errors).map(([k, message]) => ({ id: 'ws-' + k, label: k === 'name' ? 'Workspace name' : 'Workspace URL', message }))} focusKey={general.submitCount} />
+            {field('name', 'Workspace name', 'Shown to everyone in the workspace.')}
+            {field('url', 'Workspace URL', 'altitude.app/' + general.draft.url)}
+          </form>
+        </A.SettingsSection>
+        <A.SettingsSection id="st-notify" title="Notifications" description="Each change applies as soon as you make it.">
+          <A.SettingsRow label="Weekly digest" description="A summary of activity every Monday." status={writes.digest}><A.Switch checked={prefs.digest} onCheckedChange={(v) => apply('digest', v)} /></A.SettingsRow>
+          <A.SettingsRow label="Mentions" description="Email me when someone mentions me." status={writes.mentions}><A.Switch checked={prefs.mentions} onCheckedChange={(v) => apply('mentions', v)} /></A.SettingsRow>
+        </A.SettingsSection>
+        <A.SettingsSection id="st-billing" title="Billing" readOnlyReason="Only workspace owners can change billing details. Ask Maya Chen.">
+          <A.SettingsRow label="Billing email" description="Invoices and receipts go here."><A.Input defaultValue="finance@acme.dev" /></A.SettingsRow>
+        </A.SettingsSection>
+        <A.SettingsSection id="st-danger" title="Danger zone" tone="critical">
+          <A.SettingsRow label="Delete workspace" description={remove.consequence}><A.Button variant="danger" onClick={remove.request}>Delete workspace</A.Button></A.SettingsRow>
+        </A.SettingsSection>
+        <A.WorkflowStatus>{general.status || remove.status}</A.WorkflowStatus>
+        <A.SaveBar record={general} />
+        <A.Dialog open={confirming} background="stationary" dismissible={remove.phase !== 'pending'} onOpenChange={(o) => { if (!o) { remove.cancel(); setTyped(''); } }} returnFocus={() => heading.current}
+          title="Delete Acme workspace?" description={remove.consequence}
+          footer={<><A.Button disabled={remove.phase === 'pending'} onClick={() => { remove.cancel(); setTyped(''); }}>Keep workspace</A.Button><A.Button variant="danger" disabled={typed !== 'Acme' || remove.phase === 'pending'} onClick={remove.phase === 'failed' ? remove.retry : remove.confirm}>{remove.phase === 'pending' ? 'Deleting workspace' : remove.phase === 'failed' ? 'Try deleting again' : 'Delete workspace'}</A.Button></>}>
+          <A.Field label="Type Acme to confirm"><A.Input value={typed} onChange={(e) => setTyped(e.target.value)} autoComplete="off" /></A.Field>
+          {remove.error && <p role="alert">{remove.error}</p>}
+        </A.Dialog>
+      </main>
+      <details className="preview-fixtures"><summary>Example fixtures</summary>
+        <A.Switch label="Make the next change fail" checked={failNext} onCheckedChange={setFailNext} />
+      </details>
+    </>
   );
 }
 // preview:end

package/dist/guidance/visual/ActionsInPlace.md

@@ -6,12 +6,12 @@ The application chooses that policy from its domain. A danger button does not im
 
 ## Try the same example in two views
 
-- [Focused recovery preview](https://github.com/richlaconte/altitude/blob/v0.5.0/project/components/ActionsInPlace/preview.html) — archive, Undo, and restore later from Archived.
-- [Complete Files example](https://github.com/richlaconte/altitude/blob/v0.5.0/project/components/ActionsInPlace/preview.html#files) — rename with the exported InlineEdit, archive, recover, and permanently delete from Archived.
-- [InlineEdit comparison](https://github.com/richlaconte/altitude/blob/v0.5.0/project/components/InlineEdit/preview.html) and [Dialog presentation comparison](https://github.com/richlaconte/altitude/blob/v0.5.0/project/components/Dialog/preview.html).
+- [Focused recovery preview](https://github.com/richlaconte/altitude/blob/v0.6.0/project/components/ActionsInPlace/preview.html) — archive, Undo, and restore later from Archived.
+- [Complete Files example](https://github.com/richlaconte/altitude/blob/v0.6.0/project/components/ActionsInPlace/preview.html#files) — rename with the exported InlineEdit, archive, recover, and permanently delete from Archived.
+- [InlineEdit comparison](https://github.com/richlaconte/altitude/blob/v0.6.0/project/components/InlineEdit/preview.html) and [Dialog presentation comparison](https://github.com/richlaconte/altitude/blob/v0.6.0/project/components/Dialog/preview.html).
 - Generated Storybook stories: `Patterns/ActionsInPlace`, `Inputs/InlineEdit`, and `Overlays/Dialog`.
 
-Both Files views use the same source and service in [`build/previews.txt`](https://github.com/richlaconte/altitude/blob/v0.5.0/build/previews.txt). The default has no fixture toolbar in the product. Expand “Example fixtures and source” below the scene to select the deterministic service behavior, reset records/counters, simulate an external change, or inspect accepted requests. “Connection interrupted after save” commits at 100 ms and loses its response at 1,200 ms; the UI must reconcile that result before offering recovery or retry.
+Both Files views use the same source and service in [`build/previews.txt`](https://github.com/richlaconte/altitude/blob/v0.6.0/build/previews.txt). The default has no fixture toolbar in the product. Expand “Example fixtures and source” below the scene to select the deterministic service behavior, reset records/counters, simulate an external change, or inspect accepted requests. “Connection interrupted after save” commits at 100 ms and loses its response at 1,200 ms; the UI must reconcile that result before offering recovery or retry.
 
 ## Act and recover
 
@@ -438,12 +438,9 @@ export default function FilesApp() {
 .aip-target span { color: var(--ink-muted); font: 400 12.5px/17px var(--font-sans); }
 .aip-documentation { margin-top: var(--space-6); border-top: 1px solid var(--line); padding-top: var(--space-4); font: 400 12.5px/17px var(--font-sans); }
 .aip a { color: var(--accent-ink); }
-.aip-harness { margin-top: var(--space-4); color: var(--ink-muted); }
-.aip-harness summary { cursor: pointer; }
-.aip-harness label { display: grid; gap: var(--space-2); }
-.aip-harness select { max-width: 100%; font: inherit; padding: var(--space-2); background: var(--surface-well); color: var(--ink); border: 1px solid var(--line-control); border-radius: var(--radius-sm); }
-.aip-harness-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
-.aip-harness pre { overflow: auto; max-height: 220px; font: 12px/1.5 var(--font-mono); }
+.preview-fixtures label { display: grid; gap: var(--space-2); }
+.preview-fixtures select { max-width: 100%; font: inherit; padding: var(--space-2); background: var(--surface-well); color: var(--ink); border: 1px solid var(--line-control); border-radius: var(--radius-sm); }
+.preview-fixtures pre { overflow: auto; max-height: 220px; font: 12px/1.5 var(--font-mono); }
 @media (max-width: 600px) { #root { padding: 16px; } .aip-list > li { align-items: stretch; flex-direction: column; gap: var(--space-2); } .aip-row-actions { align-self: flex-start; } .aip-toolbar > .alt-input { max-width: none; } .aip-header > .aip-meta { display: none; } .aip-recovery .alt-alert-inner, .aip-file .alt-alert-inner { flex-wrap: wrap; } .aip-recovery .alt-alert-body, .aip-file .alt-alert-body { flex-basis: calc(100% - 60px); } .aip-recovery .alt-alert-action, .aip-file .alt-alert-action { width: 100%; } }
 ```
 <!-- recipe-css:end -->
@@ -458,6 +455,6 @@ Every state has text or an ARIA equivalent when motion and shadows are absent. N
 
 ## Verification and scope
 
-[`build/checks/actions-in-place.mjs`](https://github.com/richlaconte/altitude/blob/v0.5.0/build/checks/actions-in-place.mjs) exercises the canonical fixture model and browser interactions under React 18 and 19: duplicate requests, revision conflicts, uncertain outcomes, ordered feedback, dismissed/replaced recovery, targeted deletion, pending Close, old/new dialog sessions, focus recovery, reduced motion, increased contrast, forced colors, and narrow layouts. [The validation record](https://github.com/richlaconte/altitude/blob/v0.5.0/project/ActionsInPlaceValidation.md) distinguishes engineering evidence from remaining assistive-technology and participant gates.
+[`build/checks/actions-in-place.mjs`](https://github.com/richlaconte/altitude/blob/v0.6.0/build/checks/actions-in-place.mjs) exercises the canonical fixture model and browser interactions under React 18 and 19: duplicate requests, revision conflicts, uncertain outcomes, ordered feedback, dismissed/replaced recovery, targeted deletion, pending Close, old/new dialog sessions, focus recovery, reduced motion, increased contrast, forced colors, and narrow layouts. [The validation record](https://github.com/richlaconte/altitude/blob/v0.6.0/project/ActionsInPlaceValidation.md) distinguishes engineering evidence from remaining assistive-technology and participant gates.
 
 [EditRegion](../components/EditRegion/README.md) now edits several fields of one record in place with this guide's session rules (issue #12 proposed ItemGroup, PropertyList, DataTable row expansion and Board card editing as its multi-field consumers). ConfirmAction and a shared action hook remain deferred. These demos do not establish two independent real application needs for those abstractions, and they do not establish a measured usability benefit. Structural activation counts and proposed design intent are not participant results.

package/dist/guidance/visual/Distinctiveness.md

@@ -2,7 +2,7 @@
 
 Interfaces built by agents now have a look people recognise and distrust: purple gradients, Inter, a centred hero, three icon cards, a sidebar and a grid of equal cards on every screen. Altitude is made for apps that agents write, so it can fall into that look twice: through its own defaults, and through what agents compose from them. This chapter says how it stays out, and how we keep checking, because the look keeps moving.
 
-The evidence is in **Research** ("Generated interfaces converge"). Every tell, with its sources and where Altitude stands, is in [`tells.json`](https://github.com/richlaconte/altitude/blob/v0.5.0/project/tells.json). Looking generated is half the problem; the other half is breaking established rules (hierarchy, labelling, recovery, honesty), which [Fundamentals](Fundamentals.md) covers.
+The evidence is in **Research** ("Generated interfaces converge"). Every tell, with its sources and where Altitude stands, is in [`tells.json`](https://github.com/richlaconte/altitude/blob/v0.6.0/project/tells.json). Looking generated is half the problem; the other half is breaking established rules (hierarchy, labelling, recovery, honesty), which [Fundamentals](Fundamentals.md) covers.
 
 ## Why it happens
 

package/dist/guidance/visual/Research.md

@@ -622,7 +622,7 @@ A measurement, then a design review ([#97](https://github.com/richlaconte/altitu
 - **A pointer over the list holds the close.** A delayed close could move the next row under a pointer reaching for it. The close waits while a mouse is over the list, capped at `dur-settle`; touch has no hover, so it doesn't wait.
 - **`dur-linger` is 2000ms by judgement.** About four words read in roughly a second (Nielsen's 1s flow limit) plus a second to act; the top of the "second or two" asked for.
 
-Not yet tested with people: whether the close is noticeable enough at `dur-travel-3`, and whether waiting for the pointer to leave the list reads as lag. Both are open in [the validation record](https://github.com/richlaconte/altitude/blob/v0.5.0/project/ActionsInPlaceValidation.md).
+Not yet tested with people: whether the close is noticeable enough at `dur-travel-3`, and whether waiting for the pointer to leave the list reads as lag. Both are open in [the validation record](https://github.com/richlaconte/altitude/blob/v0.6.0/project/ActionsInPlaceValidation.md).
 
 ### E47 · Can a chart Altitude doesn't draw keep its rules?
 

package/dist/guidance/visual/Theming.md

@@ -165,7 +165,7 @@ That gets shadcn's components onto Altitude's colors and shadows. The elevation
 
 ### Charts
 
-shadcn/ui's `Chart` is Recharts underneath (Tremor wraps Recharts too), so charts already built with it can take Altitude's colours and most of its chart rules without being rewritten. What they can't take is listed at the end. [`examples/shadcn-chart`](https://github.com/richlaconte/altitude/blob/v0.5.0/examples/shadcn-chart) is this setup, checked in both schemes by `build/checks/shadcn-chart.mjs`.
+shadcn/ui's `Chart` is Recharts underneath (Tremor wraps Recharts too), so charts already built with it can take Altitude's colours and most of its chart rules without being rewritten. What they can't take is listed at the end. [`examples/shadcn-chart`](https://github.com/richlaconte/altitude/blob/v0.6.0/examples/shadcn-chart) is this setup, checked in both schemes by `build/checks/shadcn-chart.mjs`.
 
 **Map the palette.** Add the chart lines to the `@theme inline` block above, so Tailwind's `fill-chart-1` and the like are Altitude's slots:
 

package/dist/index.cjs

@@ -12249,6 +12249,7 @@ var BoardCard = React65.forwardRef(function BoardCard2({
   label,
   heldBy,
   settle,
+  status,
   onRename,
   value,
   renderEditor,
@@ -12265,7 +12266,7 @@ var BoardCard = React65.forwardRef(function BoardCard2({
   const [mode, setMode] = React65.useState(null);
   const self = React65.useRef(null);
   const name = label ?? id;
-  const depth = useDepth({ heldBy, settle });
+  const depth = useDepth({ heldBy, settle, status });
   const refocus = React65.useRef(false);
   const done = () => {
     refocus.current = true;