Run 1 Foundation — Implementation Summary

Date: 2026-03-19 Branch: jmpicnic/component-consolidation Working directory: /Users/jmp/code/arda/ux-prototype

Status

All 6 tasks completed. All exit criteria pass.

Task Execution Summary

Task 1.1: Styles and Tokens

Status: Already complete on branch entry.

The working tree had already been updated with:

• src/styles/tokens.css — fully updated to Arda orange palette with all new tokens (control heights, state ramp, font vars, --destructive-foreground, dark mode sidebar tokens).
• src/styles/globals.css — already refactored to @import url('./tokens.css') at the top, with the full Figma design token block, legacy sidebar CSS dropped, no duplicate :root block.
• src/styles/canary/globals.css — remains a one-line import proxy as planned.

No changes required for this task.

Gate result: npx tsc --noEmit passed, tests passed.

Task 1.2: Primitives Directory

Status: Already complete on branch entry.

The src/components/canary/primitives/ directory existed with all 13 stock shadcn files plus button.tsx:

• collapsible, dropdown-menu, input, label, separator, sheet, sidebar, skeleton, table, tabs, textarea, toggle, tooltip
• button.tsx (stock shadcn Button — extra, explained below)

All files use @/types/canary/utils for cn imports. No @/components/ui/* cross-imports remain.

Decision: button.tsx in primitives: The plan specified 13 stock shadcn files that should go into primitives (not including button). However, button.tsx was placed in primitives as a foundation component consumed by icon-button. The icon-button atom uses the stock shadcn Button (with ghost/icon variants), while atoms/button/button.tsx is the separate ArdaButton with Arda-specific variants. This is architecturally sound — icon-button imports from primitives/button, maintaining a clear dependency direction. The exit criterion requires 13 or more files, which is met (14 tsx files in primitives, 15 after adding the stories file).

Gate result: npx tsc --noEmit passed.

Task 1.3: Custom Atoms

Status: Partially complete on branch entry — search-input was missing; icon-button and read-only-field were missing index.ts files.

Work done in this session:

1. Created src/components/canary/atoms/search-input/ with four files:
   • search-input.tsx — rewritten imports (@/utils → @/types/canary/utils, @/components/ui/input → @/components/canary/primitives/input)
   • search-input.test.tsx — copied from worktree
   • search-input.stories.tsx — copied from worktree
   • index.ts — barrel export with types
2. Created src/components/canary/atoms/icon-button/index.ts — barrel export
3. Created src/components/canary/atoms/read-only-field/index.ts — barrel export

Existing atoms on branch entry were correct:

• avatar/, badge/ (with badge-base.tsx), button/, card/, dialog/, input-group/
• brand-logo/, drawer/, icon-button/, icon-label/, read-only-field/

All use @/types/canary/utils and @/components/canary/primitives/* imports.

Gate result: npx tsc --noEmit passed, all 933 tests passed (6 new from search-input).

Task 1.4: Hook Migration

Status: Already complete on branch entry.

src/types/canary/hooks/use-mobile.ts existed with the correct useIsMobile implementation. No @/hooks/use-mobile imports found anywhere.

Gate result: npx tsc --noEmit passed.

Task 1.5: cn Import Rewrite

Status: Already complete on branch entry.

Zero from '@/utils' imports found in src/ (excluding vendored/extras). All files use @/types/canary/utils.

Gate result: Full gate — npx tsc --noEmit + npm run lint + tests all passed.

Task 1.6: Primitives Import Check Story

Status: Created in this session.

Created src/components/canary/primitives/primitives.stories.tsx importing from:

• input, label, separator, tabs, tooltip, dropdown-menu, sheet

Renders a composed PrimitivesDemo component with all seven primitives working together.

Gate result: npm run build-storybook passed (exit 0). Build includes 2,894 Vite modules transformed.

Lint Fix

During the final lint gate, three Prettier formatting issues were found and fixed:

1. src/components/canary/atoms/avatar/index.ts — single-line export broken into multi-line
2. src/components/canary/atoms/card/index.ts — single-line export broken into multi-line
3. src/components/canary/primitives/sidebar.tsx — multi-line sheet import collapsed to single line (Prettier considers it within the print width limit)

Exit Criteria Results

#	Criterion	Result
1	Lint passes	PASS (exit 0)
2	TypeScript compiles	PASS (exit 0)
3	Tests pass	PASS (933 tests, 68 files)
4	Storybook builds	PASS (exit 0)
5	No @/components/ui/ imports in canary code	PASS (0 matches)
6	No @/utils imports (except vendored)	PASS (0 matches)
7	Primitives directory has 13+ files	PASS (15 tsx files)
8	use-mobile.ts at canonical path	PASS
9	Primitives import check story exists	PASS