@arbor-education/design-system.components 0.13.0 → 0.14.0

package/src/index.scss

@@ -3,8 +3,10 @@
 @use "./global.scss";
 @use "components/button/button.scss";
 @use "components/icon/icon.scss";
+@use "components/icoText/icoText.scss";
 @use "components/heading/heading.scss";
 @use "components/card/card.scss";
+@use "components/articleCard/articleCard.scss";
 @use "components/dropdown/dropdown.scss";
 @use "components/formField/formField.scss";
 @use "components/formField/fieldset/fieldset.scss";
@@ -35,6 +37,8 @@
 @use "components/banner/banner.scss";
 @use "components/editableText/editableText.scss";
 @use "components/progress/progress.scss";
+@use "components/kpiCard/kpiCard.scss";
+@use "components/kvpList/kvpList.scss";
 @use "components/toast/toast.scss";
 @use "components/datePicker/datePicker.scss";
 @use "components/dateTimePicker/dateTimePicker.scss";

package/src/index.ts

@@ -1,15 +1,18 @@
+export { ArticleCard, type ArticleCardProps } from 'Components/articleCard/ArticleCard';
 export { Avatar } from 'Components/avatar/Avatar';
 export { AvatarGroup } from 'Components/avatarGroup/AvatarGroup';
 export { Badge } from 'Components/badge/Badge';
 export { Banner } from 'Components/banner/Banner';
 export { Button } from 'Components/button/Button';
-export { Card } from 'Components/card/Card';
+export { Card, type CardProps } from 'Components/card/Card';
 export { Combobox } from 'Components/combobox/Combobox';
 export { DatePicker } from 'Components/datePicker/DatePicker';
 export { DateTimePicker } from 'Components/dateTimePicker/DateTimePicker';
 export { Dot } from 'Components/dot/Dot';
 export { Dropdown } from 'Components/dropdown/Dropdown';
 export { EditableText } from 'Components/editableText/EditableText';
+export { Fieldset } from 'Components/formField/fieldset/Fieldset';
+export { FormField } from 'Components/formField/FormField';
 export { CheckboxGroup } from 'Components/formField/inputs/checkbox/CheckboxGroup';
 export { CheckboxInput } from 'Components/formField/inputs/checkbox/CheckboxInput';
 export { ColourPickerDropdown } from 'Components/formField/inputs/colourPickerDropdown/ColourPickerDropdown';
@@ -18,12 +21,13 @@ export { RadioButtonGroup } from 'Components/formField/inputs/radio/RadioButtonG
 export { RadioButtonInput } from 'Components/formField/inputs/radio/RadioButtonInput';
 export { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
 export { TextInput } from 'Components/formField/inputs/text/TextInput';
-export { TimeInput } from 'Components/formField/inputs/time/TimeInput';
 export { TextArea } from 'Components/formField/inputs/textArea/TextArea';
-export { Fieldset } from 'Components/formField/fieldset/Fieldset';
-export { FormField } from 'Components/formField/FormField';
+export { TimeInput } from 'Components/formField/inputs/time/TimeInput';
 export { Heading } from 'Components/heading/Heading';
 export { Icon } from 'Components/icon/Icon';
+export { IcoText, type IcoTextHeadingProps, type IcoTextIconProps, type IcoTextParagraphProps, type IcoTextProps } from 'Components/icoText/IcoText';
+export { KPICard, type KPICardProps } from 'Components/kpiCard/KPICard';
+export { KVPList, type KVPListDefinitionProps, type KVPListProps, type KVPListRowProps, type KVPListTermProps } from 'Components/kvpList/KVPList';
 export { Modal } from 'Components/modal/Modal';
 export { ModalManager } from 'Components/modal/modalManager/ModalManager';
 export { Pill } from 'Components/pill/Pill';
@@ -35,6 +39,11 @@ export { Separator } from 'Components/separator/Separator';
 export { SingleUser } from 'Components/singleUser/SingleUser';
 export { Slideover } from 'Components/slideover/Slideover';
 export { SlideoverManager } from 'Components/slideoverManager/SlideoverManager';
+export { BooleanCellRenderer } from 'Components/table/cellRenderers/BooleanCellRenderer';
+export { CheckboxCellRenderer } from 'Components/table/cellRenderers/CheckboxCellRenderer';
+export { DefaultCellRenderer } from 'Components/table/cellRenderers/DefaultCellRenderer';
+export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
+export { GridApiContext } from 'Components/table/GridApiContext';
 export { Table } from 'Components/table/Table';
 export { Tabs } from 'Components/tabs/Tabs';
 export { Tag } from 'Components/tag/Tag';

package/src/tokens.scss

@@ -211,6 +211,12 @@
   --kpi-spacing-vertical: var(--spacing-large);
   --kpi-color-benchmark-text: var(--color-grey-500);
   --kpi-color-benchmark-text-bg: var(--color-grey-100);
+  --kvp-list-color-text-subtle: var(--color-grey-800);
+  --kvp-list-color-text-strong: var(--color-mono-black);
+  --ico-text-spacing-gap-horizontal: var(--spacing-large);
+  --ico-text-spacing-gap-vertical: var(--spacing-medium);
+  --kpi-card-color-text-label: var(--color-grey-800);
+  --kpi-card-color-text-value: var(--color-mono-black);
   --tag-radius: var(--border-radius-round);
   --tag-neutral-color-text: var(--color-grey-900);
   --tag-neutral-color-background: var(--color-grey-050);

package/tokens/json/Arbor.json

@@ -51,6 +51,36 @@
       "$value": "{color.grey.100}"
     }
   },
+  "kvp-list": {
+    "color-text-subtle": {
+      "$type": "color",
+      "$value": "{color.grey.800}"
+    },
+    "color-text-strong": {
+      "$type": "color",
+      "$value": "{color.mono.black}"
+    }
+  },
+  "ico-text": {
+    "spacing-gap-horizontal": {
+      "$type": "dimension",
+      "$value": "{spacing.large}"
+    },
+    "spacing-gap-vertical": {
+      "$type": "dimension",
+      "$value": "{spacing.medium}"
+    }
+  },
+  "kpi-card": {
+    "color-text-label": {
+      "$type": "color",
+      "$value": "{color.grey.800}"
+    },
+    "color-text-value": {
+      "$type": "color",
+      "$value": "{color.mono.black}"
+    }
+  },
   "tag": {
     "radius": {
       "$type": "borderRadius",

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

@@ -1,64 +0,0 @@
-# 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/dorothy-fact-checker/MEMORY.md

@@ -1,129 +0,0 @@
-# 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

@@ -1,29 +0,0 @@
-# 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/sophia-componentspert/MEMORY.md

@@ -1,14 +0,0 @@
-# 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