Phase 1: Shared Foundation

Objective

Port types, utilities, and styles that have no component dependencies into canary. These are leaf nodes in the dependency graph — all subsequent phases depend on them.

Corresponds to Wave 0 of the Porting Strategy.

Entry Criteria

Phase 0 must be complete. Verify by checking artifacts — do NOT re-run the full build/test suite.

Verify before starting:

• Canary-refactor stories exist: ls src/canary-refactor/reference/items/ shows items-grid.stories.tsx and item-detail.stories.tsx
• Stale artifacts removed: ls src/canary-refactor/components/ shows no files from prior work (directory may not exist or is empty)
• VRT baselines captured: ls tests/vrt/__snapshots__/ shows baseline files for canary-refactor stories
• ESLint rule present: grep -A2 'canary.*extras' eslint.config.mjs confirms canary-to-extras import restriction exists
• Phase 0 exit gate passed: check for npm run lint + npm run test success in the Phase 0 terminal output or CI log (do not re-run)

Tasks

T1.1 — Port PaginationData

• Copy ux-prototype/src/types/extras/model/general/pagination.ts to ux-prototype/src/types/canary/pagination.ts
• Flatten the directory structure (per Q9 decision): the canary version is at types/canary/pagination.ts, not types/canary/model/general/pagination.ts
• Pure interface, no changes to the content needed
• Verify: npx tsc --noEmit passes

T1.2 — Port formatters

• Copy ux-prototype/src/components/extras/atoms/shared/formatters.ts to ux-prototype/src/components/canary/atoms/shared/formatters.ts
• Create the canary/atoms/shared/ directory if it doesn’t exist
• Pure functions, no changes to the content needed (the getTimezoneAbbreviation private function used by formatTime is self-contained)
• Copy any existing formatter tests if they exist; adapt imports
• Verify: npx tsc --noEmit passes, unit tests pass

T1.3 — Port ag-theme-arda.css

• Copy ux-prototype/src/styles/ag-theme-arda.css to ux-prototype/src/styles/canary/ag-theme-arda.css
• Verify AG Grid CSS variable references (--ag-*) resolve correctly — these are AG Grid’s built-in variables, not Arda tokens
• Verify .arda-sort-header, .arda-sort-header-text, .arda-sort-header-icon, .arda-sort-header-btn, .arda-sort-menu-dropdown classes are present (needed by SortMenuHeader in Phase 3)

Acceptance Criteria

• types/canary/pagination.ts exists with PaginationData interface
• components/canary/atoms/shared/formatters.ts exists with all formatter functions
• styles/canary/ag-theme-arda.css exists
• npx tsc --noEmit passes
• No imports from extras in any new file
• npm run lint passes