@arbor-education/design-system.components 0.15.0 → 0.16.1

package/.ralph/storybook-upgrade/prd.json

@@ -1,777 +0,0 @@
-{
-  "branchName": "feature/MIS-70118-storybook-skill",
-  "userStories": [
-    {
-      "id": "STORY-010",
-      "title": "Write stories for Button",
-      "acceptanceCriteria": [
-        "Run /write-stories Button",
-        "All 4 Golden Girls agents called (Sophia, Blanche, Rose, Dorothy)",
-        "Rich component description with When to use / When NOT to use / Design guidance / Accessibility",
-        "argTypes populated for all key props with descriptions, controls, and defaults",
-        "Interactive Default story wired to Controls",
-        "Stories for every variant (primary, secondary, tertiary, primary-destructive, secondary-destructive, tertiary-destructive, ghost)",
-        "Disabled state story",
-        "AllVariants overview story",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence incorporated (page 2216957127)",
-        "Type check and lint pass"
-      ],
-      "priority": 1,
-      "passes": true,
-      "notes": "Button is the most-used component in the system. Its stories currently have argTypes but no component description, no story descriptions, and no design guidance. High traffic docs page — maximum impact."
-    },
-    {
-      "id": "STORY-020",
-      "title": "Write stories for Badge",
-      "acceptanceCriteria": [
-        "Run /write-stories Badge",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions for size, colour, children, a11yLabel",
-        "Interactive Default story wired to Controls",
-        "Stories for all 7 colour variants and 3 sizes",
-        "Accessibility story for a11yLabel",
-        "AllVariants overview story",
-        "Per-story descriptions on every story",
-        "Story wrapper styles use CSS tokens not hardcoded values",
-        "Type check and lint pass"
-      ],
-      "priority": 1,
-      "passes": true,
-      "notes": "Badge already has a withDescription helper and decent structure but no component description, no argType descriptions, and wrappers use hardcoded '1rem' instead of tokens. Upgrade to full write-stories standard."
-    },
-    {
-      "id": "STORY-030",
-      "title": "Write stories for Banner",
-      "acceptanceCriteria": [
-        "Run /write-stories Banner",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use / When NOT to use",
-        "argTypes with descriptions for level, text, title, icon, hideIcon, buttonText, buttonOnClick",
-        "Interactive Default story wired to Controls",
-        "Stories for all 4 levels (neutral, info, warning, destructive)",
-        "Stories for optional content combos (WithTitle, WithButton, WithTitleAndButton, TitleOnly)",
-        "ContentGuidelines story showing ideal vs edge case content length",
-        "AllVariants overview story",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence incorporated (page 2216762167)",
-        "Type check and lint pass"
-      ],
-      "priority": 1,
-      "passes": true,
-      "notes": "Banner has good story coverage for variants but zero descriptions, zero argType descriptions, and no Confluence design guidance. The Confluence page (2216762167) has rich guidance on types, colours, content length, and icon usage."
-    },
-    {
-      "id": "STORY-040",
-      "title": "Write stories for Icon",
-      "acceptanceCriteria": [
-        "Run /write-stories Icon",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions for name, size, className",
-        "Interactive Default story with select controls for icon name and size",
-        "Story showing all available sizes",
-        "Story showing a curated grid of commonly-used icons",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 1,
-      "passes": true,
-      "notes": "Icon stories are 30 lines — just a Default with select controls. No autodocs tag, no component description, no size comparison, no icon gallery. The allowedIcons import has the full icon set."
-    },
-    {
-      "id": "STORY-050",
-      "title": "Write stories for Heading",
-      "acceptanceCriteria": [
-        "Run /write-stories Heading",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions for all props",
-        "Interactive Default story wired to Controls",
-        "Stories for all heading levels and variants",
-        "AllVariants overview story",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 1,
-      "passes": true,
-      "notes": "Heading is 142 lines — has some content but needs the full write-stories treatment with component description and design guidance."
-    },
-    {
-      "id": "STORY-060",
-      "title": "Write stories for Tag",
-      "acceptanceCriteria": [
-        "Run /write-stories Tag",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs Badge vs Pill",
-        "argTypes with descriptions for all props",
-        "Interactive Default story wired to Controls",
-        "Stories for all variants and sizes",
-        "Dismissible tag story with onDismiss handler",
-        "AllVariants overview story",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 1,
-      "passes": true,
-      "notes": "Tag is 98 lines. Important to differentiate from Badge and Pill in the component description."
-    },
-    {
-      "id": "STORY-070",
-      "title": "Write stories for Pill",
-      "acceptanceCriteria": [
-        "Run /write-stories Pill",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs Tag vs Badge",
-        "argTypes with descriptions for text, checkbox, initialValue, onclick",
-        "Interactive Default story wired to Controls",
-        "Stories for checkbox variant and pre-checked state",
-        "AllVariants overview story",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 1,
-      "passes": true,
-      "notes": "Pill is 33 lines and minimal. Story names are currently camelCase (withCheckbox, preChecked) — should be PascalCase per convention."
-    },
-    {
-      "id": "STORY-080",
-      "title": "Write stories for Dot",
-      "acceptanceCriteria": [
-        "Run /write-stories Dot",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions for all props",
-        "Interactive Default story wired to Controls",
-        "Stories for all colour/variant options",
-        "AllVariants overview story",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 1,
-      "passes": true,
-      "notes": "Dot is 41 lines. Small component but needs the full treatment."
-    },
-    {
-      "id": "STORY-090",
-      "title": "Write stories for Progress",
-      "acceptanceCriteria": [
-        "Run /write-stories Progress",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions for all props",
-        "Interactive Default story wired to Controls",
-        "Stories for various progress values (0%, 25%, 50%, 75%, 100%)",
-        "Stories for different variants/colours if applicable",
-        "Accessibility story showing aria attributes",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 1,
-      "passes": true,
-      "notes": "Progress is 90 lines. Needs accessibility documentation especially — progress bars need proper aria-valuenow/aria-valuemin/aria-valuemax."
-    },
-    {
-      "id": "STORY-100",
-      "title": "Write stories for Separator",
-      "acceptanceCriteria": [
-        "Run /write-stories Separator",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories showing with and without title",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 1,
-      "passes": true,
-      "notes": "Separator is 15 lines — the most minimal story file in the entire codebase. Just a Default with a hardcoded 'titleValue' string. Needs everything."
-    },
-    {
-      "id": "STORY-110",
-      "title": "Write stories for FormField",
-      "acceptanceCriteria": [
-        "Run /write-stories FormField",
-        "All 4 Golden Girls agents called",
-        "Rich component description explaining FormField as the wrapper pattern",
-        "argTypes with descriptions for all props",
-        "Interactive Default story wired to Controls",
-        "Stories showing FormField with different input types",
-        "Error state story with validation message",
-        "Required field story",
-        "WithHelpText story",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence incorporated (page 2216957127)",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": true,
-      "notes": "FormField is the wrapper component for all form inputs. 181 lines currently. Critical to document its relationship with child input components."
-    },
-    {
-      "id": "STORY-120",
-      "title": "Write stories for TextInput",
-      "acceptanceCriteria": [
-        "Run /write-stories TextInput",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for placeholder, disabled, error, required states",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": true,
-      "notes": "TextInput is 42 lines. Basic form input — needs error, disabled, required states documented. Completed 2026-04-22: 7 stories (Default, Sizes, States, WithFormField, InputTypes, ControlledWithValidation, WithForwardRef). Key contribution: explicit aria-invalid gotcha on bare TextInput."
-    },
-    {
-      "id": "STORY-130",
-      "title": "Write stories for NumberInput",
-      "acceptanceCriteria": [
-        "Run /write-stories NumberInput",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for min/max, step, disabled, error states",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence (page 2216957127 — number inputs section)",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": true,
-      "notes": "Completed 2026-04-23: 8 stories (Default, Disabled, WithError, WithMinMax, DecimalStep, SpinnersDisabled, InFormField, ControlledInput). Key contributions: DecimalStep story makes Decimal.js precision benefit concrete with native JS comparison panel; onBlur override gotcha (consumer onBlur silently kills blur-clamping); controlled/uncontrolled trap documented."
-    },
-    {
-      "id": "STORY-140",
-      "title": "Write stories for TextArea",
-      "acceptanceCriteria": [
-        "Run /write-stories TextArea",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for placeholder, disabled, error, resize behaviour",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": true,
-      "notes": "Completed 2026-04-23: 7 stories (Default, WithError, Disabled, FixedHeight, ReadOnly, WithFormField, ControlledWithCharacterCount). Key: autoSize mechanics documented, CSS resize gotcha, no forwardRef, character count with 3-colour token progression (grey→caution→destructive)."
-    },
-    {
-      "id": "STORY-150",
-      "title": "Write stories for CheckboxInput",
-      "acceptanceCriteria": [
-        "Run /write-stories CheckboxInput",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for checked, unchecked, indeterminate, disabled, error states",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": true,
-      "notes": "Completed 2026-04-23: 12 stories (Default, Checked, Indeterminate, DisabledUnchecked, DisabledChecked, DisabledIndeterminate, WithoutLabel, AllStates, InteractiveControlled, SelectAllWithIndeterminate, CheckboxGroupStory, CheckboxGroupDisabled). Key contributions: SelectAllWithIndeterminate is the canonical select-all+indeterminate pattern; controlled-only gotcha documented; aria-checked spread order clarified; CheckboxGroup public API confirmed."
-    },
-    {
-      "id": "STORY-160",
-      "title": "Write stories for RadioButtonInput",
-      "acceptanceCriteria": [
-        "Run /write-stories RadioButtonInput",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for selected, disabled, error states",
-        "Story showing a radio group with multiple options",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": true,
-      "notes": "Completed 2026-04-24: 10 stories (Default, Checked, Disabled, DisabledChecked, WithError, WithoutLabel, AllStates, RadioGroup, RadioGroupDisabled, RadioGroupWithError). Key contributions: hasError is ARIA-only gotcha (zero visual change to indicator); name is functionally mandatory despite not being TS-required; RadioButtonGroup uses single checkedValue at group level vs CheckboxGroup per-item pattern; fieldset-level disabled via HTMLFieldSetElement props."
-    },
-    {
-      "id": "STORY-170",
-      "title": "Write stories for SelectDropdown",
-      "acceptanceCriteria": [
-        "Run /write-stories SelectDropdown",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs Combobox",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for single select, multi-select, disabled, error, searchable",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": false,
-      "notes": "SelectDropdown is 200 lines. Important to differentiate from Combobox and Dropdown in the component description."
-    },
-    {
-      "id": "STORY-180",
-      "title": "Write stories for ColourPickerDropdown",
-      "acceptanceCriteria": [
-        "Run /write-stories ColourPickerDropdown",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": false,
-      "notes": "ColourPickerDropdown is 29 lines. Minimal."
-    },
-    {
-      "id": "STORY-190",
-      "title": "Write stories for TimeInput",
-      "acceptanceCriteria": [
-        "Run /write-stories TimeInput",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for different time formats, disabled, error states",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence (page 2216957127 — date/time section)",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": false,
-      "notes": "TimeInput is 170 lines. Confluence page 2216957127 has date/time input guidance."
-    },
-    {
-      "id": "STORY-200",
-      "title": "Write stories for DatePicker",
-      "acceptanceCriteria": [
-        "Run /write-stories DatePicker",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs DateTimePicker",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for disabled, error, min/max date, pre-selected date",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence (pages 2216957127 and 2216891079)",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": false,
-      "notes": "DatePicker is 105 lines. Confluence has guidance on date/time inputs (2216957127) and popup behaviour (2216891079)."
-    },
-    {
-      "id": "STORY-210",
-      "title": "Write stories for DateTimePicker",
-      "acceptanceCriteria": [
-        "Run /write-stories DateTimePicker",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs DatePicker",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for disabled, error, pre-selected datetime",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence (pages 2216957127 and 2216891079)",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": false,
-      "notes": "DateTimePicker is 202 lines. Builds on DatePicker — document the relationship."
-    },
-    {
-      "id": "STORY-220",
-      "title": "Write stories for Fieldset",
-      "acceptanceCriteria": [
-        "Run /write-stories Fieldset",
-        "All 4 Golden Girls agents called",
-        "Rich component description explaining when to group fields",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories showing fieldset with multiple form fields",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": false,
-      "notes": "Fieldset is 89 lines. Wrapper for grouping related form fields."
-    },
-    {
-      "id": "STORY-230",
-      "title": "Write stories for Label",
-      "acceptanceCriteria": [
-        "Run /write-stories Label",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for required indicator, different label sizes if applicable",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": false,
-      "notes": "Label is 15 lines — tied for most minimal. Used by FormField internally but also standalone."
-    },
-    {
-      "id": "STORY-240",
-      "title": "Write stories for SearchBar",
-      "acceptanceCriteria": [
-        "Run /write-stories SearchBar",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs Combobox",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for placeholder, disabled, with clear button, controlled",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": false,
-      "notes": "SearchBar is 86 lines. Differentiate from Combobox in description."
-    },
-    {
-      "id": "STORY-250",
-      "title": "Write stories for EditableText",
-      "acceptanceCriteria": [
-        "Run /write-stories EditableText",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for edit mode, read-only, validation, different text types",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": false,
-      "notes": "EditableText is 136 lines. Inline editing component — needs interactive stories showing the edit/view toggle."
-    },
-    {
-      "id": "STORY-260",
-      "title": "Write stories for Combobox",
-      "acceptanceCriteria": [
-        "Run /write-stories Combobox",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs SelectDropdown vs SearchBar",
-        "Compound component docs page if applicable (Combobox.Trigger, Combobox.ButtonTrigger, Combobox.Listbox)",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for single select, multi-select, async search, grouped options",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": false,
-      "notes": "Combobox is 358 lines and already has a basic description.component. It has sub-components (Trigger, ButtonTrigger, Listbox) so may need the compound component docs page pattern. Has existing mock data in mocks/comboboxStoryOptions."
-    },
-    {
-      "id": "STORY-270",
-      "title": "Write stories for Toggle",
-      "acceptanceCriteria": [
-        "Run /write-stories Toggle",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs Checkbox",
-        "argTypes with descriptions (already decent — verify and enhance)",
-        "Interactive Default story wired to Controls",
-        "All existing stories preserved and enhanced with design guidance",
-        "Per-story descriptions on every story",
-        "Story wrapper styles use ds-text class and CSS tokens",
-        "Type check and lint pass"
-      ],
-      "priority": 2,
-      "passes": false,
-      "notes": "Toggle is already 239 lines with comprehensive JSDoc and argTypes — but it wasn't done through write-stories so it lacks Confluence design guidance, the ds-text wrapper convention, and proper token usage in inline styles (uses hardcoded '12px', '14px', '8px'). Lowest priority in Tier 2."
-    },
-    {
-      "id": "STORY-275",
-      "title": "Write documentation story for PopupParentContext",
-      "acceptanceCriteria": [
-        "Create src/utils/PopupParentContext.stories.tsx (or appropriate path for a utility)",
-        "Storybook title: 'Utils/PopupParentContext'",
-        "tags: ['autodocs'] in meta",
-        "Rich description explaining what PopupParentContext is, why it exists, and when consumers need it",
-        "Description lists ALL components that use it: Dropdown, Modal, Tooltip, DatePicker, DateTimePicker, Combobox, SlideoverManager",
-        "Default story showing the problem: a floating element clipped by overflow:hidden without context",
-        "WithCustomContainer story showing a ref-based provider that re-parents portals into a specific container",
-        "Per-story descriptions explaining each scenario",
-        "Realistic Arbor-style examples (e.g. a modal inside a scrollable panel)",
-        "Type check and lint pass"
-      ],
-      "priority": 3,
-      "passes": false,
-      "notes": "PopupParentContext is a React context, NOT a component — /write-stories won't work here. This needs a manually authored documentation story. It's exported from src/utils/PopupParentContext.ts and consumed by Dropdown, Modal, Tooltip, DatePicker, DateTimePicker, Combobox, SlideoverManager, and Table column filters. The context holds a RefObject<HTMLElement | null> that controls where portalled floating elements render. Default is getDefaultPopupParent(). Consumers need this when rendering floating components inside containers with overflow:hidden or specific z-index stacking contexts."
-    },
-    {
-      "id": "STORY-280",
-      "title": "Write stories for Modal",
-      "acceptanceCriteria": [
-        "Run /write-stories Modal",
-        "All 4 Golden Girls agents called",
-        "Compound component docs page with sub-component prop tables (Modal.Body, Modal.Footer)",
-        "Rich component description with When to use vs Slideover vs Dropdown",
-        "argTypes with descriptions for open, closeHandler, title, size, etc.",
-        "Interactive Default story with useState toggle",
-        "Stories for different sizes, with/without footer, delete confirmation pattern",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence (pages 2216762125 and 2216891079)",
-        "Type check and lint pass"
-      ],
-      "priority": 3,
-      "passes": false,
-      "notes": "Modal is 37 lines — the MOST HEINOUS offender for a compound component. Has Modal.Body and Modal.Footer sub-components that need prop tables. Confluence pages 2216762125 (Modals) and 2216891079 (Popup vs Modal vs Slideover) have rich design guidance. This is where the write-stories compound component pattern will shine brightest."
-    },
-    {
-      "id": "STORY-290",
-      "title": "Write stories for ModalManager",
-      "acceptanceCriteria": [
-        "Run /write-stories ModalManager",
-        "All 4 Golden Girls agents called",
-        "Rich component description explaining the manager pattern vs raw Modal",
-        "argTypes with descriptions",
-        "Interactive Default story showing programmatic open/close via ModalUtils",
-        "Stories for different modal configurations via the manager",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence incorporated",
-        "Type check and lint pass"
-      ],
-      "priority": 3,
-      "passes": false,
-      "notes": "ModalManager is 497 lines — has content but needs the full write-stories treatment. Uses ModalUtils and PubSub pattern which needs clear documentation."
-    },
-    {
-      "id": "STORY-300",
-      "title": "Write stories for Toast",
-      "acceptanceCriteria": [
-        "Run /write-stories Toast",
-        "All 4 Golden Girls agents called",
-        "Compound component docs page with sub-component prop tables (Toast.Provider, Toast.Viewport)",
-        "Rich component description with When to use vs Banner",
-        "argTypes with descriptions for variant and other key props",
-        "Interactive Default story with useState toggle",
-        "Stories for all 4 variants (information, success, warning, danger)",
-        "ContentGuidelines story showing ideal (1 line) vs acceptable (2 lines) vs too long",
-        "AllVariants overview story",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence incorporated (page 2216957106)",
-        "Type check and lint pass"
-      ],
-      "priority": 3,
-      "passes": false,
-      "notes": "Toast is 113 lines, has basic description.component but it just mentions Radix docs. Confluence page 2216957106 has rich guidance: max 2 lines (ideally 1), icon alignment rules. The Radix compound component pattern (Toast.Provider, Toast.Viewport) needs proper sub-component prop tables."
-    },
-    {
-      "id": "STORY-310",
-      "title": "Write stories for Tabs",
-      "acceptanceCriteria": [
-        "Run /write-stories Tabs",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for different tab counts, disabled tabs, controlled tabs",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 3,
-      "passes": false,
-      "notes": "Tabs is 92 lines. Check if this is a compound component with sub-components that need the custom docs page pattern."
-    },
-    {
-      "id": "STORY-320",
-      "title": "Write stories for TabsItem",
-      "acceptanceCriteria": [
-        "Run /write-stories TabsItem",
-        "All 4 Golden Girls agents called",
-        "Rich component description explaining relationship to Tabs parent",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 3,
-      "passes": false,
-      "notes": "TabsItem is 55 lines. Sub-component of Tabs — consider whether these should be merged into one compound component docs page. Sophia will advise."
-    },
-    {
-      "id": "STORY-330",
-      "title": "Write stories for Tooltip",
-      "acceptanceCriteria": [
-        "Run /write-stories Tooltip",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs TooltipWrapper",
-        "argTypes with descriptions",
-        "Interactive Default story",
-        "Stories for different placements, trigger types, rich content",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence (pages 2216891079 and 2371747857)",
-        "Type check and lint pass"
-      ],
-      "priority": 3,
-      "passes": false,
-      "notes": "Tooltip is 35 lines. Confluence pages 2216891079 (popup behaviour) and 2371747857 (tooltip triggers) have guidance. Important to differentiate from TooltipWrapper."
-    },
-    {
-      "id": "STORY-340",
-      "title": "Write stories for TooltipWrapper",
-      "acceptanceCriteria": [
-        "Run /write-stories TooltipWrapper",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs Tooltip",
-        "argTypes with descriptions",
-        "Interactive Default story",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 3,
-      "passes": false,
-      "notes": "TooltipWrapper is 24 lines. Convenience wrapper around Tooltip — document the relationship clearly."
-    },
-    {
-      "id": "STORY-350",
-      "title": "Write stories for SlideoverManager",
-      "acceptanceCriteria": [
-        "Run /write-stories SlideoverManager",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs Modal",
-        "argTypes with descriptions",
-        "Interactive Default story with programmatic open/close",
-        "Stories for different sizes and slide directions",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence (page 2216891079)",
-        "Type check and lint pass"
-      ],
-      "priority": 3,
-      "passes": false,
-      "notes": "SlideoverManager is 374 lines. Uses SlideoverUtils and PubSub pattern. Confluence page 2216891079 has guidance on when to use Slideover vs Modal."
-    },
-    {
-      "id": "STORY-360",
-      "title": "Write stories for Card",
-      "acceptanceCriteria": [
-        "Run /write-stories Card",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for different card layouts and content types",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 4,
-      "passes": false,
-      "notes": "Card is 99 lines. General layout container."
-    },
-    {
-      "id": "STORY-370",
-      "title": "Write stories for Row",
-      "acceptanceCriteria": [
-        "Run /write-stories Row",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for different row configurations",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 4,
-      "passes": false,
-      "notes": "Row is 85 lines. Layout component."
-    },
-    {
-      "id": "STORY-380",
-      "title": "Write stories for Section",
-      "acceptanceCriteria": [
-        "Run /write-stories Section",
-        "All 4 Golden Girls agents called",
-        "Rich component description",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for section with header, header link, collapsible",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence (page 2217056643)",
-        "Type check and lint pass"
-      ],
-      "priority": 4,
-      "passes": false,
-      "notes": "Section is 90 lines. Confluence page 2217056643 has section header link style guidance."
-    },
-    {
-      "id": "STORY-390",
-      "title": "Write stories for Avatar",
-      "acceptanceCriteria": [
-        "Run /write-stories Avatar",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs AvatarGroup vs SingleUser",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for all sizes, with/without image, initials fallback",
-        "AllVariants overview story",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 4,
-      "passes": false,
-      "notes": "Avatar is 92 lines. Part of the user identity component family — document relationship to AvatarGroup and SingleUser."
-    },
-    {
-      "id": "STORY-400",
-      "title": "Write stories for AvatarGroup",
-      "acceptanceCriteria": [
-        "Run /write-stories AvatarGroup",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs individual Avatar",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for different group sizes, overflow indicator, max count",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 4,
-      "passes": false,
-      "notes": "AvatarGroup is 218 lines. Shows a collection of Avatars with overflow."
-    },
-    {
-      "id": "STORY-410",
-      "title": "Write stories for SingleUser",
-      "acceptanceCriteria": [
-        "Run /write-stories SingleUser",
-        "All 4 Golden Girls agents called",
-        "Rich component description with When to use vs Avatar",
-        "argTypes with descriptions",
-        "Interactive Default story wired to Controls",
-        "Stories for different sizes and content configurations",
-        "Per-story descriptions on every story",
-        "Type check and lint pass"
-      ],
-      "priority": 4,
-      "passes": false,
-      "notes": "SingleUser is 63 lines. Combines Avatar with user details — document the relationship."
-    },
-    {
-      "id": "STORY-430",
-      "title": "Write stories for Table",
-      "acceptanceCriteria": [
-        "Run /write-stories Table",
-        "All 4 Golden Girls agents called",
-        "Rich component description explaining AG Grid wrapper pattern",
-        "argTypes with descriptions for key Table props",
-        "Interactive Default story wired to Controls",
-        "Stories for sorting, filtering, pagination, custom cell renderers",
-        "Documentation of GridApiContext usage pattern",
-        "Per-story descriptions on every story",
-        "Design guidance from Confluence (page 2371747857 — table row heights)",
-        "Type check and lint pass"
-      ],
-      "priority": 5,
-      "passes": false,
-      "notes": "Table is the BEAST — 1412 lines of AG Grid wrapper stories. Already has a lot of content but needs the full write-stories treatment with proper component description, design guidance, and argTypes. Confluence page 2371747857 has table row height guidance. This is the hardest component to document because of AG Grid's complexity. Save it for last. NOTE: two new sub-components added in main (2026-04-22): Table.TableControls (composed header bar with search/bulk-actions/hide-columns/settings/undo-redo/expand/download/help) and CheckboxCellRenderer (dsCheckboxCellRenderer, for editable boolean cells). Stories must cover both."
-    }
-  ]
-}