@arbor-education/design-system.components 0.10.0 → 0.11.1

package/.claude/agent-memory/blanche-designspert/MEMORY.md

@@ -0,0 +1,64 @@
+# Blanche Designspert - Persistent Memory
+
+## Key File Locations
+- Design tokens: `src/tokens.scss` (CSS custom properties, NOT Sass vars - globally available, never import)
+- Component public API: `src/index.ts`
+- Styles entry: `src/index.scss`
+- `src/pages/` does NOT exist on the current branch (confirmed 2026-04-17) — was on a prior branch
+
+## Token Conventions (confirmed from src/tokens.scss)
+- Spacing tokens: `--spacing-xsmall` (0.25rem), `--spacing-small` (0.5rem), `--spacing-medium` (0.75rem), `--spacing-large` (1rem), `--spacing-xlarge` (1.5rem), `--spacing-xxlarge` (2rem), `--spacing-xxxlarge` (4rem)
+- Grey scale: `--color-grey-050` through `--color-grey-900` (050, 100, 200, 300, 400, 500, 600, 700, 800, 900)
+- Mono: `--color-mono-black` (#202020), `--color-mono-white` (#ffffff)
+- Font sizes: `--font-size-1-11` through `--font-size-8-40` (no `--font-size-5-18` listed on line 9-16 but IS defined at line 16)
+- Font weights: `--font-weight-regular`, `--font-weight-medium`, `--font-weight-semi-bold`, `--font-weight-bold`
+- Border radius: `--border-radius-xsmall` (4px), `--border-radius-small` (8px), `--border-radius-large` (16px), `--border-radius-round` (99px)
+- Line heights: `--line-height-tight` (1.25), `--line-height-default` (1.5)
+
+## Semantic / Component Tokens (use over base tokens)
+- Hyperlink color: `--type-body-hyperlink-color` (maps to `--color-brand-700`) - use for link text
+- Hyperlink weight: `--type-body-hyperlink-weight` (maps to `--font-weight-medium`)
+- Body text size: `--type-body-p-size` (maps to `--font-size-2-13`)
+- Page background: `--page-color-background` (maps to `--color-grey-050`)
+- Page border: `--page-base-color-border` (maps to `--color-grey-050`)
+- Page heading text: `--page-heading-color-text` (maps to `--color-mono-black`)
+- Page heading gap: `--page-heading-spacing-gap` (maps to `--spacing-small`)
+- Default icon color: `--icons-icon-default` (maps to `--color-grey-900`)
+- Focus color: `--focus-color-focus` (maps to `--color-brand-500`)
+
+## CSS Naming Conventions
+- Prefix: `ds-` (all design system classes)
+- BEM: `ds-{block}`, `ds-{block}__{element}`, `ds-{block}--{modifier}`
+- SCSS file: camelCase matching directory name (e.g. `assessmentsPage.scss`)
+- Use `classnames` library for conditional classes
+
+## Typography Color Patterns (for body text in pages)
+- Primary / heading text: `--color-grey-900` or `--color-mono-black`
+- Secondary / supporting text: `--color-grey-600` or `--color-grey-500`
+- Muted / disabled: `--color-grey-400`
+- Links: use breadcrumb component tokens when in breadcrumbs (NOT raw `--type-body-hyperlink-color` or `--color-grey-600`)
+- Current breadcrumb text: `--breadcrumbs-breadcrumb-link-active-color-text` (maps to `--color-grey-900`)
+
+## Breadcrumb Component Tokens (tokens exist — line numbers may drift as tokens.scss grows)
+- List gap: `--breadcrumbs-spacing-gap-horizontal` (maps to `--spacing-small`)
+- Divider color: `--breadcrumbs-divider-default-color` (maps to `--color-grey-600`)
+- Link default color: `--breadcrumbs-breadcrumb-link-default-color-text` (maps to `--color-grey-600`)
+- Link hover color: `--breadcrumbs-breadcrumb-link-hover-color-text` (maps to `--color-brand-600`)
+- Link active/current color: `--breadcrumbs-breadcrumb-link-active-color-text` (maps to `--color-grey-900`)
+- Link hover icon color: `--breadcrumbs-breadcrumb-link-hover-color-icon` (maps to `--color-brand-600`)
+- Link default icon color: `--breadcrumbs-breadcrumb-link-default-color-icon` (maps to `--color-grey-600`)
+- No breadcrumb-specific font-weight token exists; use `--type-body-hyperlink-weight` for link weight
+
+## Design Token Hierarchy to Enforce
+1. Component tokens (e.g. `--breadcrumbs-breadcrumb-link-default-color-text`) - most specific, prefer always
+2. Semantic tokens (e.g. `--type-body-hyperlink-color`, `--page-color-background`)
+3. Base tokens (e.g. `--color-grey-600`) - only if no semantic equivalent
+
+## Known Issues / Patterns
+- Breadcrumb implementations commonly use `--color-grey-600` or `--type-body-hyperlink-color` when dedicated `--breadcrumbs-*` component tokens exist and should be used instead
+- Breadcrumb hover state commonly missing color change; `--breadcrumbs-breadcrumb-link-hover-color-text` should be applied on hover alongside text-decoration
+- `--type-body-bold-weight` DOES exist in tokens.scss (maps to `--font-weight-semi-bold`). It IS a valid semantic token. Use it for bold body text emphasis instead of reaching for the base token directly.
+- Also note: `--hyperlink-default`, `--hyperlink-hover`, `--hyperlink-active` are component tokens for hyperlinks. These are the most specific link tokens and should be used in preference to `--type-body-hyperlink-color` for actual inline hyperlinks.
+- `src/examples/` does NOT exist on the current branch (confirmed 2026-04-17) — was on a prior branch
+- No `@use` import needed for tokens.scss in SCSS files - tokens are CSS custom properties, globally available
+- Do NOT use breadcrumb component tokens (e.g. `--breadcrumbs-breadcrumb-link-default-color-text`) for non-breadcrumb elements like table row counts. Use `--color-grey-600` for secondary/supporting body text when no semantic token exists.

package/.claude/agent-memory/blanche-designspert/token-review-patterns.md

@@ -0,0 +1,29 @@
+# Token Review Patterns
+
+## Breadcrumb Link Colors
+- WRONG: `color: var(--color-grey-600)` on `<a>` links
+- RIGHT: `color: var(--type-body-hyperlink-color)` — this is the semantic token that maps to `--color-brand-700`
+- Hover color should also align: consider `--color-brand-800` or leaving underline as the affordance
+- The raw grey is not the design system's intended link color
+
+## Page Background
+- Pages should have `background-color: var(--page-color-background)` on the root element
+- The token maps to `--color-grey-050` — a light wash that distinguishes page from white cards
+
+## Assessment Row Separators
+- The `Separator` component is already used in AssessmentsPage.tsx between items
+- The SCSS `__assessment-item` block is empty — no border-bottom needed since Separator handles it
+- BUT `__assessment-row` uses `padding: var(--spacing-medium) 0` which is fine for internal padding
+
+## Hardcoded Values
+- Always check for hardcoded `content: '/'` in pseudo-elements — this is acceptable for BEM separators (not a token)
+- Hardcoded `flex: 1` is acceptable (not a design token concern)
+- Hardcoded `white-space: nowrap` is acceptable
+
+## Missing min-height / line-height
+- Body text blocks benefit from `line-height: var(--line-height-default)` for readability
+- Name fields (`__assessment-name`) in list rows should usually have line-height set
+
+## Assessment List Row Spacing
+- `padding: var(--spacing-medium) 0` on rows = 0.75rem top/bottom — confirm against Figma
+- Gap between row elements `var(--spacing-medium)` = 0.75rem — consistent

package/.claude/agent-memory/dorothy-fact-checker/MEMORY.md

@@ -0,0 +1,129 @@
+# Dorothy Fact-Checker Memory
+
+## Agent File Locations
+- Agent definitions (all four): `.claude/agents/{blanche-designspert,dorothy-fact-checker,rose-storybookspert,sophia-componentspert}.md`
+- Agent memory directories: `.claude/agent-memory/{agent-name}/`
+- These files use relative paths (from project root) for portability across developer machines
+- Frontmatter `name` field must match the filename (without .md extension)
+
+## The Golden Girls Team
+- blanche-designspert: model sonnet, color purple, design tokens & styling
+- dorothy-fact-checker: model opus, color blue, QA & fact-checking
+- rose-storybookspert: model sonnet, color pink, Storybook stories
+- sophia-componentspert: model sonnet, color gold, component guidance
+- Emojis: blanche=lipstick, dorothy=magnifying glass, rose=rose, sophia=purse
+
+## Create-Page Skill Integration
+- Skill at `.claude/skills/create-page/SKILL.md` calls agents at steps 3/4 (Sophia), 6 (Blanche), 8 (Rose), 10 (Dorothy)
+- Agent names in backtick code refs are what matter for resolution, not the heading text
+
+## Verification Patterns
+- When checking agent file changes, compare against what was loaded into the system prompt (which reflects the pre-change state) since these files may be untracked and have no git history to diff against
+- The Grep tool and memory system resolve relative paths against the project working directory
+- Claude Code injects absolute paths at runtime even when files use relative paths -- this is expected behavior
+
+## Common Issues to Watch For
+- Absolute paths leaking into config files (especially `/Users/{username}/...` patterns)
+- Files claimed to be committed but actually untracked (check `git ls-files` and `git status`)
+- Agent memory directories may be empty (no MEMORY.md) until agents run for the first time -- this is by design
+
+## Project Structure Notes
+- `src/pages/` is a new directory added for page-level components (not in original architecture)
+- No `Pages/*` path alias exists in tsconfig.json -- only `Components/*` and `Utils/*`
+- Therefore page exports in `src/index.ts` must use relative paths (`./pages/...`) not aliases
+- ESLint catches stylistic issues that `check-types` and `style-lint` do not -- always run all three
+
+## Common Hallucination Patterns
+- Agents may claim "all quality checks passed" but only run check-types and style-lint, missing ESLint errors
+- ESLint stylistic rules (@stylistic/arrow-parens, @stylistic/brace-style, @stylistic/operator-linebreak, @stylistic/jsx-one-expression-per-line) are frequently violated in generated code
+- The `yarn eslint` command is not listed in CLAUDE.md's common commands but is critical for quality
+- **NEW PAGE REGISTRATION**: Agents frequently create page component files but forget to register them in `src/index.ts` (export) and `src/index.scss` (@use). The existing pattern (see AssessmentsPage) requires BOTH. Without these, the SCSS is dead code and the component is not part of the library's public API
+- Icon name grep: allowedIcons file is `.tsx` not `.ts` -- use correct extension when searching
+- **Components that DO exist (agents have hallucinated these as missing):**
+  - `Badge` IS exported (index.ts line 20) with `BadgeColour`, `BadgeProps`, `BadgeSize` — `'sm'|'md'|'lg'` sizes, 7 colours
+  - `Dot` IS exported (index.ts line 18) with `DotColour`
+  - `CheckboxInput` IS exported (index.ts line 24)
+  - `SearchBar` IS exported (index.ts line 40)
+  - `BooleanCellRenderer` IS exported (index.ts line 47), also registered as `'dsBooleanCellRenderer'`
+- **Sophia prop hallucinations (confirmed 2026-02-19):**
+  - Button `ghost` variant does NOT exist (actual: primary, secondary, tertiary, primary-destructive, secondary-destructive, text-link, dropdown) ✅ CORRECT
+  - Section `defaultExpanded` does NOT exist (actual: `collapsed` boolean, inverted logic) ✅ CORRECT
+  - Section `headerContent` does NOT exist (Section has buttonText/buttonOnClick for a single button, not an arbitrary ReactNode slot -- Table has headerContent) ✅ CORRECT
+  - Icon `grip-vertical` does NOT exist (actual name: `'grab'` which maps to GripVertical lucide icon) ✅ CORRECT
+  - CheckboxInput IS exported from index.ts (line 24, confirmed 2026-04-17) -- DO NOT claim it's internal
+  - Tree data: codebase uses `treeDataChildrenField` pattern, not `getDataPath` ✅ CORRECT
+  - TextInput has NO icon/prefix support -- it's a bare `<input>` wrapper with only `size` and `hasError` custom props; everything else is passthrough from InputHTMLAttributes ✅ CORRECT
+  - Dropdown has `Dropdown.SelectItem` in addition to `Dropdown.Item` -- agents often omit SelectItem ✅ CORRECT
+  - Table's `treeData`, `getDataPath`, `rowDragManaged` are AG Grid passthroughs (via AgGridReactProps), not Arbor-specific features -- agents should not present them as Table component features ✅ CORRECT
+- **Dorothy's mistakes (corrected):**
+  - ❌ I incorrectly claimed Button `iconLeftName`/`iconRightName` props don't exist - THEY DO EXIST (Button.tsx). User caught this error. These props are real and should be used.
+  - ❌ I claimed CheckboxInput was NOT exported — WRONG. CheckboxInput IS exported (index.ts line 24, confirmed 2026-04-17).
+  - ❌ I claimed Badge does NOT exist — WRONG. Badge IS exported (index.ts line 20, confirmed 2026-04-17) with BadgeColour/BadgeProps/BadgeSize types.
+
+## Table Cell Renderers (verified 2026-02-19)
+- All three registered in Table.tsx `components` prop by string name:
+  - `dsInlineTextCellRenderer` -> InlineTextCellRenderer (renders span with value)
+  - `dsSelectDropdownCellRenderer` -> SelectDropdownCellRenderer (renders dropdown Button, paired with dsSelectDropdownCellEditor)
+  - `dsButtonCellRenderer` -> ButtonCellRenderer (spreads ButtonProps from value, supports iconLeftName/iconRightName for icon buttons)
+- Only `Table.ButtonCellRenderer` is exposed as a static property; others used via string names in colDef
+- `Table.DefaultValueFormatter` also exposed as static property
+
+## Table Themes (verified 2026-02-19)
+- `tidyTheme`: activated via `tableTheme="tidy"` prop. White bg, no borders, clean look. Full example in TidyTable story.
+- `defaultTheme`: the standard theme, supports hasColumnBorders and tableSpacing settings
+- TidyTable story demonstrates: treeData + treeDataChildrenField + inline editing + all cell renderers together
+
+## Section Component (verified 2026-02-19)
+- `title` prop is typed as `string` (NOT ReactNode) -- cannot directly embed JSX like Pill
+- Chevron icon IS auto-added when `collapsible={true}` (chevron-down/chevron-up with aria-expanded)
+- `collapsed` prop sets initial state (inverted from defaultExpanded)
+- `buttonText`/`buttonOnClick` for optional action button in heading
+- `titleIconName`/`titleIconColor`/`titleIconScreenReaderText` for icon next to title
+
+## Sophia Accuracy Trend
+- 2026-02-19 (earlier): Multiple hallucinations (ghost variant, defaultExpanded, headerContent on Section, grip-vertical icon)
+- 2026-02-19 (Student Profile analysis): 100% accuracy on all prop claims across 8 components. Zero hallucinations. Only omissions were Dropdown.SelectItem, some Button variants, and SearchBar.placeholderText -- all editorial choices, not errors.
+- 2026-02-19 (Migration mapping): 14/14 claims verified. Zero hallucinations. Correct on: Heading.InnerContainer, Button type Omit, Tabs semantic HTML, BulkActionsDropdown actions.length (not selected rows), both '3-dot' and 'ellipsis-vertical' icon aliases, setAgGridLicenseKey auto-call, all Table sub-component props. Minor omissions: Tabs.Item link mode, headerContent gatekeeper for search.
+- TooltipWrapper: triggerProps.asChild is technically valid but redundant -- TooltipTrigger already hardcodes asChild={true}
+
+## Icon Alias Gotcha (verified 2026-02-19)
+- `'3-dot'` and `'ellipsis-vertical'` both map to Lucide `EllipsisVertical` -- they are interchangeable aliases
+- `'grab'` maps to Lucide `GripVertical` (NOT `'grip-vertical'`)
+- Prefer Lucide-style naming ('ellipsis-vertical') over legacy aliases ('3-dot') for consistency
+
+## Table Search Gatekeeper (verified 2026-02-19)
+- SearchBar in Table only renders when BOTH `headerContent` is truthy AND `hasSearch` is true (default)
+- `headerContent` controls whether `<TableHeader>` renders at all (Table.tsx line 149)
+- If `headerContent` is falsy, `hasSearch={true}` does nothing -- no search bar appears
+- `quickFilterText` is wired to search state (Table.tsx line 196)
+
+## Export Status (verified 2026-04-17 against src/index.ts)
+- SearchBar: exported (line 40) ✅
+- CheckboxInput: exported (line 24) ✅
+- CheckboxGroup: NOT exported — internal only ✅
+- RadioButtonGroup: NOT exported — internal only ✅
+- BooleanCellRenderer: exported (line 47) ✅ — also registered as `'dsBooleanCellRenderer'` in Table
+- New exports added recently: Toggle, Row, SingleUser, Combobox (+ types), TimeInput (+ types), DatePicker, DateTimePicker (+ types)
+
+## Pill Component API
+- `onclick` prop (lowercase c) accepts `(checked: boolean) => void`
+- Uses `useEffect` to fire onclick on checked state change, including on mount
+- State setters from `useState` are stable references, so passing them directly as onclick is safe
+
+## Test Quality Benchmarks
+- Tests should use accessible queries (getByRole, getByLabelText) over getByText/getByTestId
+- userEvent is preferred over fireEvent for user interactions
+- Tests should verify callback arguments, not just that callbacks were called
+- Edge cases (empty state, no data) should be covered
+
+## Recurring Bugs in Generated Pages (confirmed 2026-02-19)
+- **Icon name `'edit'` does NOT exist** in allowedIcons.tsx -- correct name is `'pencil'`
+- **CSS ds- prefix mismatch**: SCSS uses `.ds-{page-name}` but component JSX omits the `ds-` prefix. Always verify SCSS selectors match JSX classNames
+- **Direct SCSS import in page components**: Pages in `src/pages/` should NOT `import './foo.scss'` directly (causes TS2307). Pages in `src/examples/pages/` CAN use direct imports because Storybook/Vitest handle them fine (global.d.ts declares `*.scss` modules). The `src/examples/` path is for example/demo pages that are NOT part of the library build
+- **Pill renders as `<span>`, NOT `<button>`**: Tests that use `getByRole('button')` to find Pills will fail. Use `getByText` instead
+- **SearchBar inactive state**: SearchBar with empty `searchValue` renders as a collapsed Button, not an input. Tests must click to activate it first, or initialize with non-empty searchValue
+- **TS error downplaying**: Agents may call real TS compilation errors "warnings" or "expected" -- always verify exit code of `yarn check-types`
+- **Page registration still forgotten**: AssessmentBuilderPage was missing from both index.ts and index.scss (same pattern as before)
+- **`@stylistic/jsx-one-expression-per-line` is the #1 ESLint violation**: `<br />` tags inline with text content always trigger this. 12 of 13 ESLint errors in StudentProfilePage were this exact rule. The `--fix` flag can auto-resolve these
+- **Unused imports in test files**: Agents import `beforeEach` from vitest but never use it (1 of 13 errors in StudentProfilePage)
+- **`src/examples/pages/` is a separate convention** from `src/pages/`: example pages are NOT library exports and do NOT need registration in index.ts/index.scss. Direct SCSS imports are fine here

package/.claude/agent-memory/rose-storybookspert/MEMORY.md

@@ -0,0 +1,29 @@
+# Rose's Storybookspert Memory
+
+See `patterns.md` for full details on codebase conventions.
+
+## Quick Reference
+
+- Meta/StoryObj import: `from '@storybook/react-vite'`
+- fn() import: `from 'storybook/test'` (NOT `@storybook/test`)
+- Meta pattern: `satisfies Meta<typeof ComponentName>` with `export default meta`
+- Story type: `type Story = StoryObj<typeof meta>`
+- Storybook version: v9 (storybook package) with `@storybook/react-vite` ^9.1.8
+- Page-level stories: use `layout: 'fullscreen'` in parameters
+- `src/pages/` does NOT exist on the current branch (confirmed 2026-04-17) — this directory was on a previous branch and may not be present
+- Story files use `.stories.tsx` extension (not `.story.tsx` for new files)
+- tsconfig excludes `*.story.tsx` but includes `*.stories.tsx` and `*.test.tsx`
+
+## useState in Story Render Functions
+
+- Do NOT use `eslint-disable-next-line react-hooks/rules-of-hooks` — the `react-hooks` plugin
+  is NOT configured in this project's eslint.config.mts, so the disable comment itself causes
+  an ESLint error ("Definition for rule not found").
+- Instead, extract stateful render logic into a named template component defined above the story:
+  `const MyTemplate = (args: React.ComponentProps<typeof MyComponent>) => { ... }`
+  then reference it: `render: MyTemplate`. See Toast.stories.tsx for the inline render alternative
+  (useState directly in the render arrow function also works fine without any disable comment).
+
+## Known Pre-existing Issues
+
+- `src/pages/` directory does not exist on the current branch — notes about AssessmentsPage TS errors are stale (from a prior branch)

package/.claude/agent-memory/rose-storybookspert/patterns.md

@@ -0,0 +1,132 @@
+# Storybook Patterns in This Codebase
+
+## Import Patterns
+
+```tsx
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+import { ComponentName } from 'Components/componentName/ComponentName';
+// OR for pages:
+import { PageName } from './PageName';
+import type { SomeType } from './PageName';
+```
+
+## Meta Definition Pattern
+
+Use `satisfies Meta<typeof X>` (preferred modern pattern, matches Tabs/TextInput):
+
+```tsx
+const meta = {
+  title: 'Components/ComponentName',   // OR 'Pages/PageName'
+  component: ComponentName,
+  parameters: {
+    layout: 'centered',    // or 'fullscreen' for pages, 'padded' for layout components
+  },
+  tags: ['autodocs'],
+  args: {
+    // shared default args (e.g. fn() callbacks)
+    onClick: fn(),
+  },
+  argTypes: {
+    someProp: {
+      control: 'select',
+      options: ['a', 'b'],
+      description: 'What this prop does',
+    },
+    children: {
+      control: false,   // disable control for children
+    },
+  },
+} satisfies Meta<typeof ComponentName>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+```
+
+Older pattern (still valid, used in Card/Pill/Modal):
+```tsx
+const meta: Meta<typeof ComponentName> = { ... };
+export default meta;
+// stories without StoryObj type annotation
+```
+
+## Story Definition
+
+```tsx
+export const Default: Story = {
+  name: 'Human-readable Name',   // optional override
+  args: {
+    // story-specific args, merged with meta args
+  },
+};
+```
+
+## Action Callbacks
+
+Always use `fn()` from `'storybook/test'`. Put shared callbacks in meta `args`,
+story-specific ones in story `args`.
+
+## Tags
+
+- `tags: ['autodocs']` enables automatic docs page generation
+- Most components use this
+
+## Layout Options
+
+- `layout: 'centered'` - for small components (inputs, buttons, etc.)
+- `layout: 'fullscreen'` - for page-level components
+- `layout: 'padded'` - for components that need some breathing room
+
+## Path Aliases
+
+- Components: `Components/button/Button` (no `src/` prefix)
+- Utils: `Utils/hooks/useHook`
+- Pages: use relative imports (`./PageName`) since they live in `src/pages/`
+
+## Story Descriptions
+
+JSDoc comments above story exports appear in Storybook docs. Use them liberally.
+Component-level description goes in `parameters.docs.description.component`.
+
+## Fixture Data
+
+Define fixtures as `const` arrays/objects above the story exports. Use realistic,
+domain-appropriate data (school assessments, not "foo/bar").
+
+## Page Components with AG Grid Tables
+
+Pages that wrap Table (AG Grid) do NOT need to mock the Table in stories - the
+real Table component renders fine in Storybook. Tests mock it with vi.mock().
+For stories, supply realistic `rowData` fixtures via the page's data props (e.g.
+`activeGradeSets`, `archivedGradeSets`). The table will render with real AG Grid.
+
+Story fixture arrays for grade-set-style pages should include realistic UK school
+data: GCSE 9 to 1, BTEC, Below/At/Above, T-Levels, Cambridge Nationals, etc.
+
+## Tab-Switching Page Pattern
+
+For pages with internally-controlled tab state (like GradeSetsPage), stories
+should supply data for BOTH tabs so reviewers can actually switch tabs and see
+different content. Document in the JSDoc which tab is selected by default and
+what happens when the other tab is clicked.
+
+## Example Pages Location
+
+Pages under `src/examples/pages/` (not `src/pages/`) are Figma-to-code
+compositions used as design system demos. They use relative imports (e.g.
+`./StudentProfilePage`). Story files go alongside the component:
+`src/examples/pages/studentProfile/StudentProfilePage.stories.tsx`.
+
+## Placeholder SVG Pattern in Page Stories
+
+When a page uses placeholder SVGs for missing components, document the pattern
+in the component JSDoc. Include a markdown table listing each placeholder,
+its Figma layer ID, and the reason it is a placeholder. This helps readers
+understand what they are seeing and track which components still need building.
+
+## Default Story With No Args
+
+When a component has sensible built-in mock data (e.g. `educationHistory`
+defaulting to `MOCK_EDUCATION_HISTORY` internally), the Default story can
+omit `args` entirely - just `export const Default: Story = { name: '...' }`.
+All shared callbacks are already wired via meta `args` with `fn()`.

package/.claude/agent-memory/sophia-componentspert/MEMORY.md

@@ -0,0 +1,14 @@
+# Sophia Componentspert Memory
+
+See topic files for details:
+- [components.md](./components.md) - Component APIs, gotchas, and patterns
+
+## Key Project Facts
+- Path aliases: `Components/*` → `src/components/*`, `Utils/*` → `src/utils/*`
+- CSS prefix: `ds-` (e.g. `ds-button`, `ds-button--primary`)
+- Package manager: yarn (NOT npm)
+- Button prop is `variant` not `type` - common gotcha
+- SearchBar IS exported from src/index.ts (confirmed 2026-04-17) - available to consumers
+- CheckboxGroup EXISTS but is NOT exported from src/index.ts — internal only (confirmed 2026-04-17)
+- New components added 2026-04-17: Toggle, Row, SingleUser, DatePicker, DateTimePicker, TimeInput, Combobox, BooleanCellRenderer
+- BooleanCellRenderer registered in Table as `'dsBooleanCellRenderer'` string name AND exported directly