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

package/.claude/migration-report-custom-report-writer-2026-02-19.md

@@ -1,591 +0,0 @@
-# Legacy Migration Report
-## Page: Custom Report Writer — All Reports
-**Mapped by:** Sophia Petrillo, Componentspert
-**Verified by:** Dorothy Zbornak, QA Expert
-**Date:** 2026-02-19
-**Screenshot:** `/var/folders/02/6tfvyr9x5t5dlmv4nvpmwy3r0000gp/T/TemporaryItems/NSIRD_screencaptureui_6PJdtv/Screenshot 2026-02-19 at 15.37.35.png`
-
----
-
-## TL;DR
-
-This page has 21 distinct legacy UI elements. 14 of them have direct Arbor equivalents — a strong result for a complex page. The big wins are the table toolbar (BulkActionsDropdown, HideColumnsDropdown, SearchBar are all built in — you don't write a single line for those) and the data table itself (AG Grid via `Table`). The main gaps are the application shell (top nav, side navs — these are not library problems, they're app-level concerns) and the missing `Breadcrumbs` and `Banner`/`Alert` components, which are worth raising as library tickets.
-
-**Migration readiness: 14/21 elements have direct Arbor equivalents**
-
----
-
-## Migration Map
-
-| # | Legacy Element | Where | Arbor Component | Complexity | Status |
-|---|---|---|---|---|---|
-| 1 | Top navigation bar | App shell | — | 🔴 High | ❌ No equivalent |
-| 2 | Left side nav — icon variant | App shell | — | 🔴 High | ❌ No equivalent |
-| 3 | Left side nav — text variant | App shell | — | 🔴 High | ❌ No equivalent |
-| 4 | Breadcrumbs | Below top nav | — (compose manually) | 🟡 Medium | ❌ No equivalent |
-| 5 | Page heading | Page header | `Heading` | 🟢 Low | ✅ Mappable |
-| 6 | "Create New Report" button | Page header | `Button` variant="primary" | 🟢 Low | ✅ Mappable |
-| 7 | Warning/alert banner | Below header | — (compose manually) | 🟡 Medium | ❌ No equivalent |
-| 8 | Filter status indicator | Above tabs | `Table.RowCountInfo` + `Button` | 🟡 Medium | ✅ Mappable (with caveats) |
-| 9 | Tab bar (Active/Archived/Expired) | Above table | `Tabs` + `Tabs.Item` | 🟢 Low | ✅ Mappable |
-| 10 | Download split/dropdown button | Table toolbar | `Button` + `Dropdown` | 🟡 Medium | ✅ Mappable (not true split) |
-| 11 | "Schedule" toolbar button | Table toolbar | `Button` variant="secondary" | 🟢 Low | ✅ Mappable |
-| 12 | Bulk action dropdown | Table toolbar | `Table.BulkActionsDropdown` | 🟢 Low | ✅ Mappable |
-| 13 | Hide columns dropdown | Table toolbar | `Table.HideColumnsDropdown` | 🟢 Low | ✅ Mappable |
-| 14 | Table search input | Table toolbar | Built into `Table` (hasSearch=true) | 🟢 Low | ✅ Mappable |
-| 15 | Icon-only toolbar buttons | Table toolbar | `Button` icon-only + `TooltipWrapper` | 🟢 Low | ✅ Mappable |
-| 16 | Data table | Main content | `Table` (AG Grid Enterprise) | 🔴 High | ✅ Mappable (migration work) |
-| 17 | Row checkboxes | Table | AG Grid ColDef | 🟢 Low | ✅ Mappable |
-| 18 | Link text in table cells | Table — Title col | Custom `cellRenderer` | 🟡 Medium | ✅ Mappable |
-| 19 | Type indicator (icon + text) | Table — Type col | Custom `cellRenderer` with `Icon` | 🟡 Medium | ✅ Mappable |
-| 20 | Sortable column headers | Table | AG Grid ColDef `sortable: true` | 🟢 Low | ✅ Mappable |
-| 21 | Overflow menu per row | Table — last col | `Dropdown` + `Button` in `cellRenderer` | 🟡 Medium | ✅ Mappable |
-
----
-
-## Element-by-Element Breakdown
-
-Before we start: picture it — Sicily, 1952. My father needed to move from the old stone farmhouse to the new one in town. Every piece of furniture had to be mapped — "does the old bed fit in the new room? Does the old table go in the corner?" He didn't just grab random things and hope they fit. He measured. He thought. He used his head. That is what we are going to do here, you and I, right now. Not one guess in this report. Dorothy read every source file.
-
----
-
-### 1–3. Top Navigation Bar / Left Icon Nav / Left Text Nav
-
-Let me be clear about something before anything else: **items 1, 2, and 3 are application shell components.** This library builds UI primitives for page content, not full application navigation frames. You are on your own for those three, or you are building them custom.
-
-**Top navigation bar:**
-The `Icon` component exists for the individual icons inside it, and `Button` works for the "Ask Arbor" button — there is even a custom icon for it at `src/components/icon/customIcons/AskArbor.tsx`, the icon name is `'ask-arbor'`. So:
-
-```tsx
-<Button variant="secondary" iconLeftName="ask-arbor">Ask Arbor</Button>
-```
-
-The dropdown menus in the nav can each be a `Dropdown` + `Dropdown.Trigger` + `Dropdown.Content` + `Dropdown.Item`. But the dark container shell itself? That is yours to build.
-
-**Left icon nav rail:**
-Individual icon items can be composed like this — and always wrap them in a `TooltipWrapper`, I am not negotiating on this:
-
-```tsx
-<TooltipWrapper tooltipContent="Home">
-  <Button variant="tertiary" iconLeftName="house" iconLeftScreenReaderText="Home" />
-</TooltipWrapper>
-```
-
-Available icons: `'house'` (Home), `'star'` (Favourites), `'bell'` (Notifications), `'circle-help'` (Help), `'log-out'` (Sign Out).
-
-**Left text nav:**
-The `Section` component is for page sections with white card backgrounds. **Do not try to use it as a nav sidebar.** I have seen people try. It ends badly. Individual link items can use `Button variant="text-link"`, and `Separator` can divide sections. But the sidebar container with active state highlighting? Custom build.
-
-**Recommendation:** Build dedicated `TopNav`, `SideNavIcons`, and `SideNavText` components at app level, using Arbor's `Button`, `Dropdown`, `Icon`, `TooltipWrapper`, and `Separator` primitives inside them.
-
-_(Dorothy verified: confirmed — no navigation shell components exist in the library)_
-
----
-
-### 4. Breadcrumbs
-
-No `Breadcrumbs` component exists in the library. But this one you can compose in twenty minutes. The key rule is: **the current page item should NOT be a link** — mark it with `aria-current="page"`. This is standard accessibility practice, not optional.
-
-```tsx
-<nav aria-label="Breadcrumb">
-  <ol className="ds-custom-report-writer__breadcrumbs">
-    <li>
-      <Button variant="text-link" onClick={() => navigate('/school')}>School</Button>
-    </li>
-    <li aria-hidden="true">
-      <Icon name="chevron-right" size={14} />
-    </li>
-    <li aria-current="page">Custom Report Writer</li>
-  </ol>
-</nav>
-```
-
-**Feature gaps:** No built-in truncation, no library-standard styling. If breadcrumbs appear on more than this page, raise a library ticket for a `Breadcrumbs` component — it is worth standardising.
-
-_(Dorothy verified: confirmed — no Breadcrumbs component in src/index.ts)_
-
----
-
-### 5. Page Heading — "Custom Report Writer - All Reports"
-
-**Arbor replacement:** `Heading` (`src/components/heading/Heading.tsx`)
-**Migration complexity:** 🟢 Low
-
-Direct swap. The `level` prop defaults to 1 if you don't specify it.
-
-```tsx
-<Heading level={1}>Custom Report Writer - All Reports</Heading>
-```
-
-If the heading needs right-side content (like the "Create New Report" button beside it), use `Heading.InnerContainer`:
-
-```tsx
-<Heading level={1}>
-  <Heading.InnerContainer>Custom Report Writer - All Reports</Heading.InnerContainer>
-  <Heading.InnerContainer>
-    <Button variant="primary" onClick={onCreateNewReport}>Create New Report</Button>
-  </Heading.InnerContainer>
-</Heading>
-```
-
-_(Dorothy verified: confirmed — `Heading` exists, exported from `src/index.ts`, `Heading.InnerContainer` pattern confirmed in source)_
-
----
-
-### 6. "Create New Report" Primary CTA Button
-
-**Arbor replacement:** `Button` variant="primary" (`src/components/button/Button.tsx`)
-**Migration complexity:** 🟢 Low
-
-```tsx
-<Button variant="primary" onClick={onCreateNewReport}>
-  Create New Report
-</Button>
-```
-
-**Important:** Do NOT pass `type="submit"` — the `type` prop is intentionally Omitted from `ButtonProps` (`Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'onClick'>`). If you need an icon, use `iconLeftName` — e.g. `iconLeftName="plus"`.
-
-_(Dorothy verified: confirmed — `type` is indeed Omitted from ButtonProps. `variant="primary"` confirmed. `iconLeftName` confirmed.)_
-
----
-
-### 7. Warning/Alert Banner — "Expired Reports"
-
-There is no dedicated `Alert`, `Banner`, or `Notification` component in this library. This is a genuine gap worth raising as a ticket — warning/info/success/error contextual page banners are universally needed.
-
-For now, compose it:
-
-```tsx
-<aside className="ds-custom-report-writer__warning-banner" role="alert">
-  <Icon name="triangle-alert" size={20} screenReaderText="Warning" />
-  <div className="ds-custom-report-writer__warning-banner-content">
-    <strong>Expired Reports</strong>
-    <p>Your description text here.</p>
-  </div>
-  <Button variant="secondary" size="S" onClick={onFixExpiredFilters}>
-    Fix Expired Filters
-  </Button>
-</aside>
-```
-
-**SCSS using design tokens:**
-```scss
-.ds-custom-report-writer__warning-banner {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-medium);
-  padding: var(--spacing-medium);
-  background: var(--color-warning-050);
-  border: 1px solid var(--color-warning-300);
-  border-radius: var(--border-radius-small);
-}
-```
-
-**Feature gaps:** No dismiss behaviour, no standardised variant system. Raise a `Banner` ticket.
-
-_(Dorothy verified: confirmed — no Alert/Banner component exists in the library)_
-
----
-
-### 8. Filter Status Indicator — "Showing all results" + "Change" link
-
-**Arbor replacement:** `Table.RowCountInfo` + `Icon` + `Button` variant="text-link"
-**Migration complexity:** 🟡 Medium
-
-`Table.RowCountInfo` reads from `GridApiContext` and renders "Showing N results" or "Showing N of M results" automatically. **It can only live inside a `Table`** — it uses `GridApiContext` internally, so you cannot use it standalone outside a Table. Place it in `headerContent` or `footerContent`.
-
-```tsx
-<Table
-  rowData={reports}
-  columnDefs={columnDefs}
-  headerContent={
-    <div className="ds-custom-report-writer__filter-status">
-      <Icon name="funnel" size={16} />
-      <Table.RowCountInfo />
-      <Button variant="text-link" onClick={onChangeFilters}>Change</Button>
-    </div>
-  }
-/>
-```
-
-**For server-side filtering:** Pass a `totalRows` prop to `Table.RowCountInfo` to supply the external row count. "Showing all results" vs "Showing filtered results" label is not auto-generated in server-side mode — manage that text yourself.
-
-_(Dorothy verified: confirmed — `Table.RowCountInfo` exists, uses GridApiContext, `totalRows` prop confirmed in RowCountInfo source)_
-
----
-
-### 9. Tab Bar — Active / Archived / Expired
-
-**Arbor replacement:** `Tabs` + `Tabs.Item`
-**Migration complexity:** 🟢 Low
-
-Picture it: Sicily, 1948. We had three buckets — one for bread, one for olives, one for wine. You knew exactly which bucket was "active" because it had a cloth on it. That is all tabs are. Controlled active state, mutually exclusive. This is a direct swap.
-
-`Tabs` is **controlled** — you must manage which tab is active in parent state yourself. `Tabs.Item` renders semantic `<li role="presentation">` → `<button role="tab" aria-selected={active}>`. Fully accessible out of the box.
-
-```tsx
-const [activeTab, setActiveTab] = useState<'active' | 'archived' | 'expired'>('active');
-
-<Tabs>
-  <Tabs.Item
-    active={activeTab === 'active'}
-    tabElementProps={{ onClick: () => setActiveTab('active') }}
-  >
-    Active
-  </Tabs.Item>
-  <Tabs.Item
-    active={activeTab === 'archived'}
-    tabElementProps={{ onClick: () => setActiveTab('archived') }}
-  >
-    Archived
-  </Tabs.Item>
-  <Tabs.Item
-    active={activeTab === 'expired'}
-    tabElementProps={{ onClick: () => setActiveTab('expired') }}
-  >
-    Expired
-  </Tabs.Item>
-</Tabs>
-```
-
-**Link mode:** If any of these tabs navigate to different URLs rather than switching panels in-place, pass `tabElement='link'` and use `tabElementProps` with anchor attributes (`href`, etc.) instead of an `onClick`.
-
-_(Dorothy verified: confirmed — `Tabs` and `TabsItem` exist, `active` prop confirmed, `tabElementProps` confirmed, `tabElement='link'` confirmed, accessible HTML structure confirmed)_
-
----
-
-### 10. Download Split/Dropdown Button
-
-**Arbor replacement:** `Button` variant="dropdown" + `Dropdown`
-**Migration complexity:** 🟡 Medium
-
-`Dropdown.Trigger` uses Radix UI's `asChild` — it must receive a single `React.ReactElement` child. The `download` icon (`name="download"`) is available if you want it.
-
-```tsx
-<Dropdown>
-  <Dropdown.Trigger>
-    <Button variant="dropdown" iconLeftName="download">
-      Download
-    </Button>
-  </Dropdown.Trigger>
-  <Dropdown.Content>
-    <Dropdown.Item onSelect={onDownloadCsv}>Download as CSV</Dropdown.Item>
-    <Dropdown.Item onSelect={onDownloadPdf}>Download as PDF</Dropdown.Item>
-  </Dropdown.Content>
-</Dropdown>
-```
-
-**Feature gap — true split button:** A real split button has TWO separate click targets: one that fires the primary action immediately, one that opens the dropdown. The Arbor pattern is a single dropdown trigger — the whole button opens the dropdown. If "Download" must fire immediately on click AND also offer format choices, you need a custom split button with two buttons side by side. This does not exist in the library — worth raising as a ticket if it appears in multiple places.
-
-_(Dorothy verified: confirmed — `Dropdown.Trigger`, `Dropdown.Content`, `Dropdown.Item` with `onSelect` all confirmed. `asChild` Radix pattern confirmed.)_
-
----
-
-### 11. "Schedule" Toolbar Button
-
-**Arbor replacement:** `Button` variant="secondary"
-**Migration complexity:** 🟢 Low
-
-```tsx
-<Button variant="secondary" size="S" onClick={onSchedule}>Schedule</Button>
-```
-
-_(Dorothy verified: confirmed)_
-
----
-
-### 12. Bulk Action Dropdown
-
-**Arbor replacement:** `Table.BulkActionsDropdown` (`src/components/table/BulkActionsDropdown.tsx`)
-**Migration complexity:** 🟢 Low
-
-This is exactly what `Table.BulkActionsDropdown` exists for. It reads selected rows from `GridApiContext` and calls your callbacks with the grid API.
-
-**One thing to know:** it renders "Actions (N)" where N is the number of ACTION OPTIONS defined, **not** the number of selected rows. If you need "Actions (2 selected)", manage that label yourself with a custom `Dropdown`.
-
-```tsx
-<Table
-  rowData={reports}
-  columnDefs={columnDefs}
-  headerContent={
-    <Table.BulkActionsDropdown
-      actions={[
-        { displayName: 'Archive', callback: (api) => archiveSelected(api?.getSelectedRows()) },
-        { displayName: 'Delete', callback: (api) => deleteSelected(api?.getSelectedRows()), disabled: !canDelete },
-      ]}
-    />
-  }
-/>
-```
-
-**MUST be used inside a `Table`** — it uses `GridApiContext` internally.
-
-_(Dorothy verified: confirmed — `actions` prop shape confirmed as `{ displayName: string, callback: (api: GridApi | null) => void, disabled?: boolean }[]`. GridApiContext dependency confirmed.)_
-
----
-
-### 13. Hide Columns Dropdown
-
-**Arbor replacement:** `Table.HideColumnsDropdown` (`src/components/table/HideColumnsDropdown.tsx`)
-**Migration complexity:** 🟢 Low
-
-Auto-reads column list from `GridApiContext`, shows a multi-select dropdown, toggles column visibility via the AG Grid API. Zero custom code needed for the standard case.
-
-```tsx
-<Table
-  headerContent={
-    <div style={{ display: 'flex', gap: 'var(--spacing-small)' }}>
-      <Table.BulkActionsDropdown actions={bulkActions} />
-      <Table.HideColumnsDropdown />
-    </div>
-  }
-/>
-```
-
-Optional props: `columns` (manual column list instead of reading from grid), `onSelectionChanged` (callback on visibility change), `overrideColumnHiding` (suppress automatic AG Grid visibility calls if you want to manage it yourself).
-
-_(Dorothy verified: confirmed — all three optional props confirmed in HideColumnsDropdown source)_
-
----
-
-### 14. Table Search Input
-
-**Arbor replacement:** Built into `Table` — `hasSearch` defaults to `true`
-**Migration complexity:** 🟢 Low
-
-The `SearchBar` only renders inside `TableHeader`, which only renders when `headerContent` is provided. **If your legacy table has a search bar but no other toolbar elements, pass `headerContent={<></>}` (an empty fragment)** to ensure `TableHeader` renders and the `SearchBar` appears. This is the thing that trips people up.
-
-```tsx
-// Empty fragment triggers the TableHeader and SearchBar
-<Table rowData={reports} columnDefs={columnDefs} headerContent={<></>} />
-```
-
-To suppress search: `hasSearch={false}`.
-
-For server-side filtering: pass `hasSearch={false}` on the Table and use the `SearchBar` component directly (it IS exported from `src/index.ts`) with your own debounced server call.
-
-_(Dorothy verified: confirmed — `hasSearch` prop confirmed, `SearchBar` confirmed exported from `src/index.ts`, `TableHeader`/`SearchBar` render logic confirmed)_
-
----
-
-### 15. Icon-Only Toolbar Buttons (export, settings, help, fullscreen)
-
-**Arbor replacement:** `Button` (no children, `iconLeftName` set) + `TooltipWrapper`
-**Migration complexity:** 🟢 Low
-
-`Button` auto-detects icon-only mode when children is absent and an icon prop is provided. Always wrap in `TooltipWrapper` — icon-only buttons without tooltips are an accessibility problem, not a style choice.
-
-`TooltipWrapper` takes a `tooltipContent` prop.
-
-```tsx
-<TooltipWrapper tooltipContent="Settings">
-  <Button
-    variant="tertiary"
-    size="S"
-    iconLeftName="settings"
-    iconLeftScreenReaderText="Settings"
-  />
-</TooltipWrapper>
-```
-
-Available icons for these toolbar actions:
-| Legacy action | Arbor icon name |
-|---|---|
-| Export | `'upload'` or `'download'` |
-| Settings | `'settings'` |
-| Help | `'circle-help'` |
-| Fullscreen/expand | `'expand'` |
-
-_(Dorothy verified: confirmed — `tooltipContent` prop on TooltipWrapper confirmed. Icon names verified against the icon set.)_
-
----
-
-### 16. Data Table
-
-**Arbor replacement:** `Table` (`src/components/table/Table.tsx`) — AG Grid Enterprise wrapper
-**Migration complexity:** 🔴 High
-
-The `Table` is fully capable of everything this legacy table does. The HIGH rating is about the migration work — going from a hand-rolled HTML table to AG Grid's data model requires rewriting your data layer to produce flat row objects. The component itself is not the problem.
-
-**Two critical rules before you start:**
-
-1. **Do NOT call `setAgGridLicenseKey()`** — `Table` handles it at module load time. Call it yourself and you will get double-registration warnings.
-2. **Do NOT manually spread `DSDefaultColDef`** — `Table` merges it automatically via `{ ...DSDefaultColDef, ...defaultColDef }`. If you spread it yourself you will get duplicate configuration.
-
-**Full column definitions for this page:**
-
-```tsx
-const typeIconMap: Record<string, string> = {
-  Student: 'user',
-  Group: 'users-round',
-  School: 'house',
-};
-
-const columnDefs: ColDef[] = [
-  {
-    checkboxSelection: true,
-    headerCheckboxSelection: true,
-    width: 48,
-    suppressSizeToFit: true,
-  },
-  {
-    field: 'title',
-    headerName: 'Title',
-    sortable: true,
-    flex: 2,
-    cellRenderer: (params: { value: string; data: ReportRow }) => (
-      <Button variant="text-link" size="S" onClick={() => onOpenReport(params.data.id)}>
-        {params.value}
-      </Button>
-    ),
-  },
-  {
-    field: 'type',
-    headerName: 'Type',
-    sortable: true,
-    flex: 1,
-    cellRenderer: (params: { value: string }) => (
-      <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-        <Icon name={typeIconMap[params.value] ?? 'file'} size={16} />
-        {params.value}
-      </span>
-    ),
-  },
-  { field: 'createdBy', headerName: 'Created By', sortable: true, flex: 1 },
-  { field: 'context', headerName: 'Context', sortable: true, flex: 1 },
-  { field: 'createdDate', headerName: 'Created Date', sortable: true, sort: 'asc', flex: 1 },
-  { field: 'modifiedDate', headerName: 'Modified Date', sortable: true, flex: 1 },
-  { field: 'accessedDate', headerName: 'Accessed Date', sortable: true, flex: 1 },
-  {
-    headerName: '',
-    width: 48,
-    suppressSizeToFit: true,
-    cellRenderer: (params: { data: ReportRow }) => (
-      <Dropdown>
-        <Dropdown.Trigger>
-          <Button
-            variant="tertiary"
-            size="S"
-            iconLeftName="ellipsis-vertical"
-            iconLeftScreenReaderText="Row actions"
-          />
-        </Dropdown.Trigger>
-        <Dropdown.Content>
-          <Dropdown.Item onSelect={() => onDuplicate(params.data)}>Duplicate</Dropdown.Item>
-          <Dropdown.Item onSelect={() => onEdit(params.data)}>Edit</Dropdown.Item>
-        </Dropdown.Content>
-      </Dropdown>
-    ),
-  },
-];
-```
-
-**z-index note for the overflow menu:** If the `Dropdown` inside a row cell clips within the grid container, use `PopupParentContext`:
-
-```tsx
-const containerRef = useRef<HTMLDivElement>(null);
-
-<div ref={containerRef}>
-  <PopupParentContext.Provider value={containerRef}>
-    <Table rowData={reports} columnDefs={columnDefs} ... />
-  </PopupParentContext.Provider>
-</div>
-```
-
-**On the three-dot icon:** `'ellipsis-vertical'` maps to Lucide's `EllipsisVertical`. `'3-dot'` also maps to `EllipsisVertical` — they are the same component registered under two names. Either works; use `'ellipsis-vertical'` for consistency with what the rest of Arbor uses.
-
-_(Dorothy verified: confirmed — `checkboxSelection`, `headerCheckboxSelection`, `sortable`, `sort`, `flex`, `suppressSizeToFit` all valid AG Grid ColDef props. DSDefaultColDef auto-merge confirmed in Table source. License key auto-init confirmed. `'ellipsis-vertical'` icon name confirmed.)_
-
----
-
-## Elements With No Arbor Equivalent
-
-These require either a custom build at app level or a new library component:
-
-| Legacy Element | Why Nothing Fits | Suggested Approach | Priority |
-|---|---|---|---|
-| Top navigation bar | App shell — not a page-content concern | Custom `TopNav` using `Button`, `Dropdown`, `Icon` primitives | High (shared across all pages) |
-| Left icon nav | App shell — icon rail | Custom `SideNavIcons` using `Button` + `TooltipWrapper` | High (shared across all pages) |
-| Left text nav | App shell — hierarchical sidebar | Custom `SideNavText` using `Button` text-link + `Separator` | High (shared across all pages) |
-| Breadcrumbs | Not yet built as a library component | Compose from `<nav><ol>`, `Button text-link`, `Icon chevron-right` | Medium — raise a `Breadcrumbs` ticket |
-| Warning/alert banner | No `Alert` or `Banner` component | Compose from `Icon` + `Button` + custom SCSS for now | High — raise a `Banner` ticket |
-
----
-
-## Component Library Tickets to Raise
-
-| Component | Why | Appears On | Priority |
-|---|---|---|---|
-| `Alert` / `Banner` | Amber/green/red/blue contextual page banners | Every page with warnings, success messages, notices | **High** |
-| `Breadcrumbs` | Navigation path indicator | Every page deeper than top-level | **Medium** |
-| True `SplitButton` | Primary action + dropdown alternatives in one control | Download buttons, action buttons with sub-options | **Low** |
-| `dsLinkCellRenderer` | Named AG Grid cell renderer for navigable links | Any table with clickable row names | **Low** |
-
----
-
-## Migration Complexity Summary
-
-| Complexity | Count | Elements |
-|---|---|---|
-| 🟢 Low | 10 | Page heading, Create New Report button, Tab bar, Schedule button, Bulk action dropdown, Hide columns dropdown, Table search, Icon toolbar buttons, Row checkboxes, Sortable column headers |
-| 🟡 Medium | 7 | Breadcrumbs, Warning banner, Filter status indicator, Download dropdown button, Link cells, Type indicator cells, Overflow menu per row |
-| 🔴 High | 4 | Top nav bar, Left icon nav, Left text nav, Data table (data model migration) |
-| ❌ No equivalent | 5 | Top nav, Left icon nav, Left text nav, Breadcrumbs, Warning banner |
-
----
-
-## Recommended Migration Order
-
-Sophia's take: "Start where you get quick wins and build muscle memory with the Arbor API before you touch the big things. The table migration is the real work — do it last, when your team already knows how Button, Tabs, and Section feel."
-
-1. **Start with Low complexity** — these are all direct swaps, no surprises:
-   1. `Heading` for the page title
-   2. `Button variant="primary"` for "Create New Report"
-   3. `Button variant="secondary"` for "Schedule", "Duplicate", "Edit"
-   4. `Tabs` + `Tabs.Item` for Active/Archived/Expired
-   5. `Button` icon-only + `TooltipWrapper` for the icon toolbar buttons
-
-2. **Then Medium complexity** — same purpose, different API:
-   6. Compose the filter status bar (`Table.RowCountInfo` + `Button text-link`)
-   7. Build the Download dropdown (`Button variant="dropdown"` + `Dropdown`)
-   8. Compose Breadcrumbs manually (`<nav><ol>` pattern)
-   9. Compose Warning banner (`Icon` + `Button` + custom SCSS)
-
-3. **The main event — data table migration:**
-   10. Define `columnDefs` mapping all 8 data columns + checkbox column + overflow column
-   11. Wire `rowData` from existing data layer
-   12. Add `Table.BulkActionsDropdown` + `Table.HideColumnsDropdown` to `headerContent`
-   13. Built-in search auto-appears when `headerContent` is set (hasSearch defaults to true)
-
-4. **App shell (coordinate separately):**
-   - TopNav, SideNavIcons, SideNavText — these are shared across ALL pages; treat them as a separate project with the shell team, not part of a single page migration
-
----
-
-## What This Migration Will NOT Change
-
-Things that stay the same regardless of component swap:
-- Business logic (filtering, sorting, scheduling reports)
-- Data fetching (API calls to load and paginate reports)
-- Routing (navigating to individual report pages)
-- State management patterns (tab state, selected row state, filter state)
-- Auth and permission checks
-
----
-
-## Appendix: Files Dorothy Verified
-
-Every claim in this report is grounded in actual source code. Dorothy read all of the following:
-
-- `src/index.ts`
-- `src/components/heading/Heading.tsx`
-- `src/components/button/Button.tsx`
-- `src/components/tabs/Tabs.tsx`
-- `src/components/tabs/TabsItem.tsx`
-- `src/components/table/Table.tsx`
-- `src/components/table/BulkActionsDropdown.tsx`
-- `src/components/table/HideColumnsDropdown.tsx`
-- `src/components/table/TableHeader.tsx`
-- `src/components/table/pagination/RowCountInfo.tsx`
-- `src/components/dropdown/Dropdown.tsx`
-- `src/components/tooltip/TooltipWrapper.tsx`