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

package/.claude/design-assessment-daily-attendance-2026-04-10.md

@@ -1,566 +0,0 @@
-# Design Feasibility Assessment
-## Design: Daily Attendance Page (1366px Desktop)
-**Written by:** Sophia Petrillo, Componentspert, age none-of-your-business
-**Fact-checked by:** Sophia herself, reading actual source files (Dorothy would be proud)
-**Date:** 2026-04-10
-
----
-
-## What Is This Thing, Anyway?
-
-Picture it: Sicily, 1961. My father kept a ledger of every student who showed up for morning mass at the village school. Every morning, same ritual. Tick the name, note the time, mark the absences. He did it with a pen and a ruled notebook. Now you want to do it on a 1366-pixel screen with a full AG Grid, a sidebar, a top navigation, filter bars, and pagination. Progress. Mostly.
-
-This design is a **Daily Attendance data view** — a full application page for a school management system. It has a top navigation bar, a left sidebar with collapsible section navigation, a breadcrumb trail, a page heading with action button, a filter summary bar, and a full-featured data table with a toolbar, column headers, row data including attendance mark icons, and pagination.
-
-Let me tell you exactly what we have, what needs a little work, and what you're going to have to build yourself. Sit down. This is going to take a minute.
-
----
-
-## Section 1: What We Already Have — Use These As-Is
-
-### 1. Page Heading Row — `Heading` + `Heading.InnerContainer`
-**File:** `src/components/heading/Heading.tsx`
-
-The design shows "Daily Attendance" as an h1 heading on the left and a primary green action button on the right — exactly what `Heading.InnerContainer` was born for. Two `InnerContainer` children: left gets the title text, right gets the `Button`.
-
-```tsx
-<Heading level={1}>
-  <Heading.InnerContainer>Daily Attendance</Heading.InnerContainer>
-  <Heading.InnerContainer>
-    <Button variant="primary">Button Text</Button>
-  </Heading.InnerContainer>
-</Heading>
-```
-
-No custom flex divs. No new wrappers. This is the supported pattern, and it works.
-
----
-
-### 2. Primary Action Button — `Button`
-**File:** `src/components/button/Button.tsx`
-
-The design shows a primary green "Button Text" button top-right of the heading. Straightforward.
-
-- `variant="primary"` — confirmed variant
-- `size="M"` — default
-
-Also used for the "Edit" button in the filter bar (`variant="secondary"`) and the "Expand table" button in the footer (`variant="secondary"` or `variant="tertiary"`).
-
----
-
-### 3. Icon-Only Toolbar Buttons — `Button` (icon-only mode)
-**File:** `src/components/button/Button.tsx`
-
-The table toolbar (right side) shows: search icon, comment/message icon, download icon, fullscreen/expand icon. These are all icon-only buttons. Button auto-applies `ds-button--icon-only` when no `children` is passed but `iconLeftName` or `iconRightName` is set.
-
-All required icons are confirmed in `allowedIcons.tsx`:
-- Search: `'search'`
-- Message/comment: `'message-square-more'`
-- Download: `'download'`
-- Fullscreen/expand: `'expand'`
-
-```tsx
-<Button variant="secondary" borderless iconLeftName="search" iconLeftScreenReaderText="Search table" />
-<Button variant="secondary" borderless iconLeftName="message-square-more" iconLeftScreenReaderText="Comments" />
-<Button variant="secondary" borderless iconLeftName="download" iconLeftScreenReaderText="Download" />
-<Button variant="secondary" borderless iconLeftName="expand" iconLeftScreenReaderText="Fullscreen" />
-```
-
-The `borderless` prop removes borders — appropriate for inline toolbar icons.
-
----
-
-### 4. Undo / Redo Toolbar Buttons — `Button`
-**File:** `src/components/button/Button.tsx`
-
-The left side of the table toolbar shows undo and redo icon buttons. Both icons confirmed in `allowedIcons.tsx`:
-- `'undo'` — maps to `Undo2`
-- `'redo'` — maps to `Redo2`
-
-```tsx
-<Button variant="secondary" borderless iconLeftName="undo" iconLeftScreenReaderText="Undo" />
-<Button variant="secondary" borderless iconLeftName="redo" iconLeftScreenReaderText="Redo" />
-```
-
----
-
-### 5. Table — `Table` (AG Grid Enterprise wrapper)
-**File:** `src/components/table/Table.tsx`
-
-This is the centrepiece of the design and the `Table` component handles everything. The design shows:
-- Checkbox column (AG Grid built-in `checkboxSelection` + `headerCheckboxSelection` on ColDef)
-- Sortable column headers with column menu icons (AG Grid built-in)
-- Time range hyperlink cells — use `dsButtonCellRenderer` with `variant="text-link"`
-- Text content cells (Lesson/Event, Year Group, Event Type, Teacher) — standard AG Grid string cells
-- Marks column with icon+count groups — **needs a custom cell renderer** (see Section 2)
-- "(No Students)" text cells — standard string cell
-
-Key `Table` props:
-- `rowData` — your attendance records
-- `columnDefs` — column config array (see Column config below)
-- `headerContent` — ReactNode for the toolbar (BulkActionsDropdown + undo/redo left; HideColumns + icon buttons right)
-- `footerContent` — ReactNode for pagination area
-- `hasSearch={false}` — suppress the built-in SearchBar since the design uses a dedicated search icon button in the toolbar instead
-
-**Column config sketch:**
-```tsx
-const columnDefs = [
-  { checkboxSelection: true, headerCheckboxSelection: true, width: 40, suppressHeaderMenuButton: false },
-  { field: 'time', headerName: 'Time', cellRenderer: 'dsButtonCellRenderer', cellRendererParams: { variant: 'text-link' } },
-  { field: 'lesson', headerName: 'Lesson/Event' },
-  { field: 'yearGroup', headerName: 'Year Group' },
-  { field: 'eventType', headerName: 'Event Type' },
-  { field: 'teacher', headerName: 'Teacher' },
-  { field: 'marks', headerName: 'Marks', cellRenderer: AttendanceMarksCellRenderer }, // custom — see Section 2
-];
-```
-
-**Important:** `setAgGridLicenseKey()` is called internally at module load — no need to call it in page components.
-
----
-
-### 6. Table Toolbar (Actions Dropdown) — `Table.BulkActionsDropdown`
-**File:** `src/components/table/BulkActionsDropdown.tsx`
-
-The design shows "Actions (0)" as a dropdown button in the top-left of the table toolbar. This is `Table.BulkActionsDropdown` exactly.
-
-```tsx
-<Table.BulkActionsDropdown
-  actions={[
-    { displayName: 'Export selected', callback: (api) => { /* ... */ } },
-  ]}
-/>
-```
-
-Note: the label renders as "Actions (N)" where N is `actions.length` — it counts the number of action options, not selected rows. If you want "Actions (0)" to reflect selected row count, you'd need to manage the actions array dynamically. That's an application concern, not a component limitation.
-
----
-
-### 7. Hide Columns Dropdown — `Table.HideColumnsDropdown`
-**File:** `src/components/table/HideColumnsDropdown.tsx`
-
-The design shows "Hide (1)" dropdown button. This is `Table.HideColumnsDropdown`. It renders "Hide (N)" when columns are hidden or "Hide Columns" when none are hidden. It reads columns from `GridApiContext` automatically. Must be inside `Table` to access context.
-
-```tsx
-<Table.HideColumnsDropdown />
-```
-
----
-
-### 8. Table Settings Dropdown (Gear Icon) — `Table.TableSettingsDropdown`
-**File:** `src/components/table/TableSettingsDropdown.tsx`
-
-The design shows a gear/settings icon button in the table toolbar. This is `Table.TableSettingsDropdown` exactly — a `Button variant="secondary" borderless` with `iconRightName="settings"` that opens a dropdown with spacing/borders/cell colours controls. Confirmed in source.
-
-```tsx
-<Table.TableSettingsDropdown />
-```
-
----
-
-### 9. Table Pagination — `Table.PaginationControls` + `Table.RowCountInfo`
-**Files:**
-- `src/components/table/pagination/PaginationControls.tsx`
-- `src/components/table/pagination/RowCountInfo.tsx`
-
-The design's table footer shows:
-- "Showing 100 of 664 results" — `Table.RowCountInfo` renders this exact format when totalRows differs from displayedRows, confirmed in source: `Showing ${displayedRowCount} of ${totalRows} results`
-- Pagination: |< < [Page 1] of 7 > >| — `Table.PaginationControls` renders all five of these (first, prev, page-input, next, last)
-- "Expand table" button — a `Button` in the footerContent slot
-
-```tsx
-footerContent={
-  <>
-    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-      <Table.RowCountInfo totalRows={664} />
-      <Table.PaginationControls />
-    </div>
-    <Button variant="secondary" size="S" iconRightName="expand">Expand table</Button>
-  </>
-}
-```
-
----
-
-### 10. Avatar (User Avatar in Top Nav) — `Avatar`
-**File:** `src/components/avatar/Avatar.tsx`
-
-The top nav shows a circular user photo with a chevron dropdown. `Avatar` handles image display with `src` and `alt` props. Wrap in `Dropdown.Trigger` for the chevron dropdown behaviour.
-
-```tsx
-<Dropdown>
-  <Dropdown.Trigger>
-    <button>
-      <Avatar src={userPhotoUrl} alt="User name" size="small" />
-      <Icon name="chevron-down" size={16} />
-    </button>
-  </Dropdown.Trigger>
-  <Dropdown.Content>...</Dropdown.Content>
-</Dropdown>
-```
-
-Or use `UserDropdown` (see below) which handles the full avatar + dropdown pattern natively.
-
----
-
-### 11. User Avatar + Dropdown — `UserDropdown`
-**File:** `src/components/userDropdown/UserDropdown.tsx`
-
-The top nav user avatar + chevron + dropdown menu maps to `UserDropdown` exactly. Props confirmed in source:
-- `user: { name, subtitle?, avatarSrc?, avatarAlt?, avatarInitials? }`
-- `sections?: UserDropdownSection[]` — for app switching sections
-- `onSignOut: () => void`
-- `variant?: 'dark' | 'light'` — use `'light'` for a light-coloured nav bar
-
-The product logos (Arbor logo variants: ArborLogo, GovhubLogo, KeyLogo, etc.) are exported from `src/index.ts` as named exports alongside `UserDropdown`:
-```ts
-export { ArborLogo, GovhubLogo, KeyLogo, SampeopleLogo, RobinLogo, TimetablerLogo }
-```
-
-These can be passed as `logo` inside a `UserDropdownApp` for the product branding area.
-
----
-
-### 12. Icon Component — `Icon`
-**File:** `src/components/icon/Icon.tsx`
-
-Used throughout. All icons needed for this design are confirmed present in `allowedIcons.tsx`:
-- `'chevron-down'`, `'chevron-up'` — nav dropdowns and collapsibles
-- `'favourite-outline'` — star icon on active nav item (maps to Lucide `Star`)
-- `'menu'` — hamburger icon for sidebar collapse
-- `'search'` — table toolbar search
-- `'settings'` — gear icon (used by `Table.TableSettingsDropdown` internally)
-- `'undo'`, `'redo'` — table toolbar
-- `'message-square-more'` — comment/message icon
-- `'download'` — download icon
-- `'expand'` — fullscreen/expand icon
-- `'check'`, `'x'`, `'circle-alert'` — for attendance mark indicators (green check, red X, warning)
-- `'copy'` — link/copy icon in breadcrumbs
-- `'grid-3x3'` — the green grid icon in the filter bar
-- `'ask-arbor'` — custom AI icon for "Ask Arbor" button (confirmed custom icon)
-- `'sparkles'` — sparkle icon on "Ask Arbor" button
-
-Sizes available: 12, 16, 24 ONLY.
-
----
-
-### 13. Separator — `Separator`
-**File:** `src/components/separator/Separator.tsx`
-
-Useful for visual dividers between nav sections, within dropdowns, and in the sidebar between sections. Confirmed exported.
-
----
-
-### 14. Section (Page wrapper) — `Section`
-**File:** `src/components/section/Section.tsx`
-
-Wrap the Table in a `Section` for the white card background, border-radius, and padding that the design implies around the data table area.
-
-```tsx
-<Section>
-  <Table ... />
-</Section>
-```
-
-`Section` does NOT accept arbitrary `headerContent` — that prop belongs to `Table`, not `Section`. `Section` has `title`, `collapsible`, `buttonText`/`buttonOnClick` for a single header button.
-
----
-
-### 15. Tooltip — `Tooltip` / `TooltipWrapper`
-**Files:** `src/components/tooltip/Tooltip.tsx`, `src/components/tooltip/TooltipWrapper.tsx`
-
-Useful for the attendance mark icons in the Marks column — wrapping each icon+count group in a tooltip explaining what the icon means (e.g. "Present: 24", "Unauthorised: 1", "Absent: 3"). Radix UI based, so accessible by default.
-
----
-
-### 16. Tag — `Tag`
-**File:** `src/components/tag/Tag.tsx`
-
-Not explicitly in this design's primary UI, but `Tag` with `color="green"` is close to the "active nav item" green highlight treatment. More likely just a CSS class concern on the nav item itself, but `Tag` is available if needed for labelling.
-
----
-
-## Section 2: Almost There — Needs Modifications or Custom Work Within Existing Patterns
-
-### 1. Attendance Marks Cell Renderer — Custom Cell Renderer (NOT a new component)
-
-The Marks column is the trickiest cell in the table. It shows groups of: icon + count — specifically:
-- Green check icon + count (e.g. "24")
-- Orange warning/circle icon + count (e.g. "1")
-- Red X icon + count (e.g. "3")
-- Or the text "(No Students)"
-
-**What we have:** `dsButtonCellRenderer`, `dsInlineTextCellRenderer`, `dsSelectDropdownCellRenderer` as built-in registered renderers. None of these handle the multi-icon-group pattern.
-
-**What's needed:** A custom cell renderer component — `AttendanceMarksCellRenderer` — that uses `Icon` and inline text:
-
-```tsx
-const AttendanceMarksCellRenderer = ({ value }) => {
-  if (!value || value.length === 0) return <span>(No Students)</span>;
-  return (
-    <div className="ds-attendance-marks">
-      {value.map(({ icon, count, color }) => (
-        <span key={icon} className={`ds-attendance-marks__group ds-attendance-marks__group--${color}`}>
-          <Icon name={icon} size={16} />
-          <span>{count}</span>
-        </span>
-      ))}
-    </div>
-  );
-};
-```
-
-Then register it on the Table via the `components` prop:
-```tsx
-<Table
-  components={{ dsAttendanceMarksCellRenderer: AttendanceMarksCellRenderer }}
-  columnDefs={[
-    { field: 'marks', cellRenderer: 'dsAttendanceMarksCellRenderer' }
-  ]}
-/>
-```
-
-**Effort:** Low. This is standard AG Grid cell renderer pattern. AG Grid's `components` prop on `Table` accepts custom renderers. No library changes required — this is application-level code.
-
----
-
-### 2. Filter/Info Bar — Composed from Existing Components, No Standard Component
-
-The design shows a green grid icon on the left, filter summary text in the middle, and an "Edit" secondary button on the right. There is no `FilterBar` component in the library.
-
-**What we have:** `Icon`, `Button`, and `Heading.InnerContainer` for the layout. The filter text is just a string.
-
-**What's needed:** Compose it yourself as a `<div>` with flex layout:
-
-```tsx
-<div className="ds-daily-attendance__filter-bar">
-  <div className="ds-daily-attendance__filter-bar-left">
-    <Icon name="grid-3x3" size={16} />
-    <span>Select Date Wed, 05 Feb 2025 AM Showing Attendance Registers...</span>
-  </div>
-  <Button variant="secondary" size="S">Edit</Button>
-</div>
-```
-
-**Effort:** Low — this is page-level layout code, not a missing component. A reusable `FilterBar` component would be nice if this pattern repeats across many pages, but it doesn't need to live in the library to build this page.
-
----
-
-### 3. Breadcrumbs — No Component, Composed from Primitives
-
-**What we have:** No `Breadcrumbs` component exists (confirmed in library, confirmed in memory). The design shows "Students / Attendance / Registers / Daily Attendance" with a copy icon.
-
-**What's needed:** Compose it:
-
-```tsx
-<nav aria-label="Breadcrumb">
-  <ol>
-    <li><a href="/students">Students</a></li>
-    <li aria-hidden>/</li>
-    <li><a href="/attendance">Attendance</a></li>
-    <li aria-hidden>/</li>
-    <li><a href="/registers">Registers</a></li>
-    <li aria-hidden>/</li>
-    <li aria-current="page">Daily Attendance</li>
-  </ol>
-  <Button variant="tertiary" borderless iconLeftName="copy" iconLeftScreenReaderText="Copy link" />
-</nav>
-```
-
-**Effort:** Low for this page. Medium if you want a proper reusable `Breadcrumbs` component in the library. Given this design uses it, it may be worth a library ticket.
-
----
-
-### 4. HideColumnsDropdown Label Behaviour
-
-The design shows "Hide (1)" — meaning it shows the count of **hidden** columns. In the source, `HideColumnsDropdown` renders `Hide (${hiddenColumns.length})` where `hiddenColumns` is the array of column IDs passed to `handleVisibilityChange`. This means it shows the count of hidden columns, which is correct.
-
-However, the initial state renders "Hide Columns" (not "Hide (0)"). If the design requires "Hide (1)" to appear from initial render with one column pre-hidden, you'd need to pre-populate the `hiddenColumns` state — or pass `columns` prop with one already hidden. This is a minor behavioural note, not a blocker.
-
----
-
-### 5. BulkActionsDropdown — "Actions (0)" Label
-
-As noted above, `Table.BulkActionsDropdown` shows `Actions (N)` where N is `actions.length`, not selected row count. The design shows "Actions (0)" implying zero selected rows, but the component counts action items. To show "(0 selected)" semantics, you'd need to filter `actions` based on `gridApi.getSelectedRows().length` or build a wrapper that adjusts the label. This may or may not matter depending on product requirements.
-
----
-
-## Section 3: Build From Scratch — These Don't Exist Yet
-
-### 1. Top Navigation Bar — NO EQUIVALENT
-
-**The confirmed gap:** There is no `TopNav`, `AppHeader`, or navigation shell component in the library. The library note says explicitly: "No TopNav / application header component."
-
-The top nav contains:
-- Arbor logo (far left)
-- Main nav links with chevron-down dropdowns (My Items, Students, School, Reporting, System)
-- Search bar (centre-right)
-- "Ask Arbor" AI button with sparkle icon
-- User avatar + chevron dropdown (handled by `UserDropdown`)
-- Product logos/branding (far right — handled by exported logo components)
-
-**What we have:** `UserDropdown` handles the avatar section. `Icon` provides `'ask-arbor'` and `'sparkles'`. `Button` can render the "Ask Arbor" button. `Dropdown` + `Button` can handle each nav link item. `SearchBar` is now exported and could power the central search.
-
-**What's needed:** An `AppTopNav` (or `TopNav`) component that composes all of this into an application-level navigation shell. This is a **high effort** new component — it needs responsive behaviour, keyboard navigation, proper ARIA roles (`role="navigation"`, `aria-label`), and likely a full design spec of its own.
-
-**Workaround for this page:** Since this is an application page (not the shell itself), you may not be building the TopNav from this library at all — it may live in the host application. Clarify scope with the team.
-
----
-
-### 2. Left Sidebar Navigation — NO EQUIVALENT
-
-**The confirmed gap:** There is no `SideNav`, `Sidebar`, or application sidebar component in the library. Confirmed: "No SideNav / sidebar navigation component."
-
-The sidebar contains:
-- Hamburger collapse toggle
-- Section labels (non-clickable headers like "Attendance")
-- Collapsible sections (`Section` with `collapsible={true}` comes CLOSE but is not a nav element)
-- Active nav item with green highlight and star icon
-- Nested link lists
-
-**What we have:** `Section` with `collapsible={true}` provides collapse/expand with chevron toggle. `Icon` provides the `'menu'`, `'chevron-down'`, `'chevron-up'`, `'favourite-outline'` (star) icons. `Button` with `variant="text-link"` can render nav links.
-
-**What's needed:** A `SideNav` component with:
-- `role="navigation"` with `aria-label`
-- Collapsible section groups (could wrap `Section` internally)
-- Active state highlighting
-- Hamburger collapse mode (collapses to icons-only at narrow widths)
-- `aria-current="page"` on active link
-
-**Effort:** High. This is a structural shell component with complex state (which sections expanded, which item active, collapsed/expanded mode) and accessibility requirements.
-
-**Workaround:** Like the TopNav, this likely lives in the host application, not the component library. Confirm with team.
-
----
-
-### 3. Collapsible Sidebar Section Groups with Active States — Partially Covered
-
-`Section` with `collapsible={true}` gives you the expand/collapse behaviour, but:
-- `Section` is a page-level card with white background and padding — not a transparent nav section
-- `Section` doesn't support active item highlighting
-- `Section` doesn't render `<nav>`, `<ul>`, or `<li>` — it renders a card with a `<section>` element
-
-So while the collapse mechanic exists, the visual and semantic treatment of a sidebar nav section is fundamentally different from what `Section` provides. You'd need custom composition for proper sidebar sections.
-
----
-
-## Section 4: Tricky Bits — Pay Attention Here
-
-### 1. Table Toolbar Layout (headerContent)
-
-The table header has a **split left/right layout**: Actions + undo + redo on the left; Hide + search + comment + download + settings + fullscreen on the right. The `Table`'s `headerContent` and the `TableHeader` component use `display: flex; justify-content: space-between` internally. Pass two grouped `<div>` elements as children of `headerContent` and they'll auto-align left and right:
-
-```tsx
-headerContent={[
-  <div key="left" style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
-    <Table.BulkActionsDropdown actions={bulkActions} />
-    <Button variant="secondary" borderless size="S" iconLeftName="undo" iconLeftScreenReaderText="Undo" />
-    <Button variant="secondary" borderless size="S" iconLeftName="redo" iconLeftScreenReaderText="Redo" />
-  </div>,
-  <div key="right" style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
-    <Table.HideColumnsDropdown />
-    <Button variant="secondary" borderless iconLeftName="search" iconLeftScreenReaderText="Search" />
-    <Button variant="secondary" borderless iconLeftName="message-square-more" iconLeftScreenReaderText="Comments" />
-    <Button variant="secondary" borderless iconLeftName="download" iconLeftScreenReaderText="Download" />
-    <Table.TableSettingsDropdown />
-    <Button variant="secondary" borderless iconLeftName="expand" iconLeftScreenReaderText="Fullscreen" />
-  </div>,
-]}
-```
-
-**Note:** Pass `hasSearch={false}` on the Table since you're managing search via the toolbar icon button yourself.
-
-### 2. hasSearch and SearchBar Interaction
-
-The design shows a search icon button in the toolbar, NOT the built-in SearchBar that `Table` renders by default. By default `hasSearch={true}`, which renders `SearchBar` below the `headerContent` children inside `TableHeader`. Set `hasSearch={false}` to suppress it, and manage your own search icon button behaviour.
-
-### 3. GridApiContext Dependency for Table Sub-components
-
-`Table.BulkActionsDropdown`, `Table.HideColumnsDropdown`, `Table.RowCountInfo`, `Table.PaginationControls`, and `Table.TableSettingsDropdown` ALL read from `GridApiContext` internally. They **must** be rendered inside the `Table` component tree to function — pass them via `headerContent` or `footerContent` props, not as siblings outside `<Table>`.
-
-### 4. Attendance Marks Icons — Use Existing Icon Names
-
-For the marks cell, the correct icon names from `allowedIcons.tsx` are:
-- Green check: `'check'` or `'circle-check'` or `'circle-check-big'`
-- Orange warning: `'circle-alert'` or `'triangle-alert'`
-- Red X: `'x'` or `'circle-x'`
-
-Do not invent icon names. Verify against `allowedIcons.tsx` before using.
-
----
-
-## Section 5: The Verdict
-
-Picture it: Sicily again, 1962. After my Uncle Nunzio finished his assessment of the village, he told my father: "Forty percent of the houses are perfect. Forty percent need new windows and a coat of paint. Twenty percent need to be knocked down and started over." My father nodded and said, "So we can start building?" Nunzio said, "The forty percent that's perfect? Start there."
-
-That's where we are.
-
-### Is It Buildable With Our Existing Components? **Mostly. Yes.**
-
-The core of this page — the data table with all its toolbar sub-components, pagination, the heading, buttons, icons, and the user avatar dropdown — is all there. The library covers the data-dense heart of this screen completely and accurately.
-
-What's missing is the **application chrome** (TopNav, SideNav). But those almost certainly live in the host application, not this library. If you're just building the page content area (which is likely what this assessment is actually for), you're in excellent shape.
-
-### Summary Table
-
-| Design Element | Library Component | Status |
-|---|---|---|
-| Page h1 heading + action button | `Heading` + `Heading.InnerContainer` + `Button` | Ready |
-| Primary "Button Text" button | `Button variant="primary"` | Ready |
-| Edit button | `Button variant="secondary"` | Ready |
-| Data table (columns, sorting, checkboxes) | `Table` (AG Grid) | Ready |
-| Actions (0) dropdown | `Table.BulkActionsDropdown` | Ready |
-| Undo / Redo icon buttons | `Button` + `iconLeftName="undo/redo"` | Ready |
-| Hide (1) dropdown | `Table.HideColumnsDropdown` | Ready |
-| Search icon button | `Button` icon-only | Ready |
-| Comment icon button | `Button` icon-only | Ready |
-| Download icon button | `Button` icon-only | Ready |
-| Settings (gear) dropdown | `Table.TableSettingsDropdown` | Ready |
-| Fullscreen icon button | `Button` icon-only | Ready |
-| "Showing 100 of 664 results" | `Table.RowCountInfo` | Ready |
-| Pagination controls (|< < 1 of 7 > >|) | `Table.PaginationControls` | Ready |
-| Expand table button | `Button variant="secondary"` | Ready |
-| Time cell as hyperlink | `Button variant="text-link"` via `dsButtonCellRenderer` | Ready |
-| Text cells (lesson, year, teacher etc) | AG Grid standard string cells | Ready |
-| Attendance marks cell (icon+count groups) | Custom `AttendanceMarksCellRenderer` | App-level code needed |
-| User avatar | `Avatar` or `UserDropdown` | Ready |
-| Filter/info bar | Composed: `Icon` + text + `Button` | App-level layout needed |
-| Breadcrumbs | Composed: links + `Separator` + `Button` | App-level layout needed |
-| Icons (all toolbar/nav icons) | `Icon` + `allowedIcons.tsx` | Ready |
-| Product logos (top nav far right) | Exported logo components | Ready |
-| Top navigation bar | None | Missing — NEW component needed |
-| Left sidebar navigation | None | Missing — NEW component needed |
-
-### What Actually Needs Work
-
-| Item | Where | Effort |
-|---|---|---|
-| `AttendanceMarksCellRenderer` | Application code (passed via `components` prop to Table) | Low |
-| Filter/Info Bar layout | Application code (page-level CSS) | Low |
-| Breadcrumbs composition | Application code | Low |
-| `TopNav` component | New library component (or host application) | High |
-| `SideNav` component | New library component (or host application) | High |
-
-### Summary Verdict
-
-The **page content area** (everything below the top nav and to the right of the sidebar) is **highly feasible** with existing components. You need one custom cell renderer for attendance marks, some page-level layout CSS for the filter bar and breadcrumbs, and you're building.
-
-The **application chrome** (TopNav, SideNav) is missing from the library entirely, but the assumption is those live in the host application or are a separate initiative. If you do need to add them to the library, budget significant effort — these are complex shell components.
-
-**Recommendation:** Start building. The table, toolbar, pagination, heading, and buttons are all ready. Do the custom marks renderer as application-level code. Come back to the library to discuss TopNav and SideNav as separate tickets.
-
----
-
-## Appendix: Source Files Read to Verify This Assessment
-
-- `/Users/ameemorris/dev/Arbor/design-system.components/src/index.ts`
-- `/Users/ameemorris/dev/Arbor/design-system.components/src/components/table/Table.tsx`
-- `/Users/ameemorris/dev/Arbor/design-system.components/src/components/table/BulkActionsDropdown.tsx`
-- `/Users/ameemorris/dev/Arbor/design-system.components/src/components/table/HideColumnsDropdown.tsx`
-- `/Users/ameemorris/dev/Arbor/design-system.components/src/components/table/TableSettingsDropdown.tsx`
-- `/Users/ameemorris/dev/Arbor/design-system.components/src/components/table/pagination/PaginationControls.tsx`
-- `/Users/ameemorris/dev/Arbor/design-system.components/src/components/table/pagination/RowCountInfo.tsx`
-- `/Users/ameemorris/dev/Arbor/design-system.components/src/components/icon/allowedIcons.tsx`
-- `/Users/ameemorris/dev/Arbor/design-system.components/src/components/userDropdown/UserDropdown.tsx`
-- `/Users/ameemorris/dev/Arbor/design-system.components/.claude/agent-memory/sophia-componentspert/components.md`
-- `/Users/ameemorris/dev/Arbor/design-system.components/.claude/component-library.md` (first 400 lines)