admin-ui-starter-kit 0.1.2 → 0.1.4

package/.agents/skills/admin-ui-consumer-migration/SKILL.md

@@ -0,0 +1,135 @@
+---
+name: admin-ui-consumer-migration
+description: Use when migrating a React app to consume `admin-ui-starter-kit`, replacing copied local UI folders, auditing exact package imports, deciding what stays app-owned, or wiring framework adapters such as Inertia without recreating local package mirrors.
+---
+
+# Admin UI Consumer Migration
+
+Use this skill inside consuming apps, not when editing package internals.
+
+Goal: move reusable UI to `admin-ui-starter-kit` imports while keeping
+app-specific routing, APIs, auth, translations, brand assets, and domain logic
+inside the app.
+
+## First reads
+
+When available in the installed package or repo, read these before editing:
+
+1. `MIGRATION.md` — migration sequence and deletion rules.
+2. `COMPONENT_SELECTION.md` — which component/import to use.
+3. `INTEGRATION.md` — install, provider, exact import, and framework wiring.
+4. `.agents/skills/component-library-rules/references/components/INDEX.json` —
+   searchable component index.
+
+Do not bulk-load every component doc. Use the index, then read only the matching
+component file.
+
+## Migration order
+
+1. Install package, stylesheet, and `<UIProvider>`.
+2. Replace typography, buttons, badges, cards, and simple display components.
+3. Replace repeated row and metadata patterns with `Item` and `MetadataList`.
+4. Replace form rows with `FormField` / `ControlledFormField`.
+5. Replace tables, filters, metrics, comments, overlays, and other features.
+6. Replace page/header/sidebar layout surfaces last.
+7. Delete copied local folders only after imports, typecheck, and build are
+   clean.
+
+When migrating date pickers, install `react-day-picker@^10` for
+`admin-ui-starter-kit/base/date-pickers`. If the app has copied local
+DayPicker wrappers or passes `calendarProps`, update deprecated v9 names
+(`fromYear`, `toYear`, `table`, `nav_button`, `day_selected`, …) to DayPicker
+v10 names (`startMonth`, `endMonth`, `month_grid`, `button_previous` /
+`button_next`, `selected`, …). The package's own
+`yearSelection.fromYear` / `toYear` props remain valid.
+
+## Exact package imports only
+
+Use:
+
+```tsx
+import { Button } from 'admin-ui-starter-kit/base/buttons';
+import { Text } from 'admin-ui-starter-kit/typography';
+import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata';
+import { Comments } from 'admin-ui-starter-kit/features/comments';
+```
+
+Do not use:
+
+```tsx
+import { Button } from '@/components/ui/base/buttons';
+import { Button } from 'admin-ui-starter-kit/base';
+import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata/metadata-list';
+```
+
+If a path is not listed in `package.json` `exports`, treat it as private.
+
+## Adapter rule
+
+Adapters are allowed only when they bind app-specific behaviour.
+
+Good:
+
+```tsx
+import { Link, router } from '@inertiajs/react';
+import { Button, type ButtonProps } from 'admin-ui-starter-kit/base/buttons';
+
+export function InertiaButton({ href, ...props }: ButtonProps & { href: string }) {
+	return <Button {...props} onClick={() => router.visit(href)} />;
+}
+```
+
+Bad:
+
+```ts
+export { Button } from 'admin-ui-starter-kit/base/buttons';
+```
+
+Do not create local mirrors, barrels, or aliases that hide package imports.
+Agents should replace call-site imports directly unless a wrapper adds routing,
+auth, API, translation, or domain behaviour.
+
+## Keep app-owned
+
+Do not migrate these into package imports or generic wrappers:
+
+- Brand/logo assets and product marks.
+- Error boundaries.
+- Auth, permission gates, tenant/workspace selectors.
+- Route-aware global search content and API-backed search.
+- Domain-specific cards/features that encode business rules.
+- Inertia/router/query clients, Wayfinder actions, API calls, app i18n.
+- Page-level data loading and layout orchestration.
+
+## Useful commands
+
+Run in the consuming app:
+
+```bash
+npx admin-ui-starter-kit-audit
+npx admin-ui-starter-kit-audit --fix
+npm run typecheck
+npm run build
+```
+
+Use `--fix` only for conservative import rewrites from known copied paths.
+Review the diff before deleting local folders.
+
+## Component selection shortcuts
+
+| Need | Import |
+| --- | --- |
+| Text/headings | `admin-ui-starter-kit/typography` |
+| Buttons | `admin-ui-starter-kit/base/buttons` |
+| Badges | `admin-ui-starter-kit/base/badge` |
+| Card shell | `admin-ui-starter-kit/base/cards` |
+| Icon/avatar/title row | `admin-ui-starter-kit/base/item` |
+| Label/value metadata | `admin-ui-starter-kit/base/display/metadata` |
+| Form rows | `admin-ui-starter-kit/base/forms` |
+| Date pickers | `admin-ui-starter-kit/base/date-pickers` |
+| Tables | `admin-ui-starter-kit/base/table` |
+| Filters | `admin-ui-starter-kit/features/filters` |
+| Comments | `admin-ui-starter-kit/features/comments` |
+| Dialogs/drawers | `admin-ui-starter-kit/features/overlays` |
+| Metrics/charts | `admin-ui-starter-kit/composed/analytics` |
+| Page/header/sidebar | `admin-ui-starter-kit/layout/page`, `/header`, `/sidebar` |

package/.agents/skills/component-library-rules/SKILL.md

@@ -56,6 +56,11 @@ These deeper guides live alongside this file under `references/`. The skill stay
 
 Don't read all of them — find the matching guide for the immediate task, follow it, return.
 
+Consumer-app migration guidance lives outside this maintainer skill:
+[`../admin-ui-consumer-migration/SKILL.md`](../admin-ui-consumer-migration/SKILL.md),
+`MIGRATION.md`, and `COMPONENT_SELECTION.md`. Use those when replacing copied
+local UI in downstream apps.
+
 ## Component reference index
 
 Every component documented in the showcase has a generated markdown
@@ -99,9 +104,14 @@ to see how the library uses it before writing fresh code.
 The references are generated from the MDX showcase by
 `npm run docs:sync-skill`; CI runs the freshness check via `npm run verify`.
 
-## This is the only skill in this repo
+## Maintainer skill scope
 
-There are no other skills shipped with this repo. The harness may surface generic skills (`frontend-design`, `shadcn`, `tailwind-v4-shadcn`, etc.) from the user's plugin set, but **this skill is the source of truth for anything inside `src/components/**`**. Where they conflict, this skill wins. The relevant material from those generic skills is inlined here:
+This skill is the source of truth for anything inside `src/components/**`.
+The separate `admin-ui-consumer-migration` skill is for downstream app
+migrations. The harness may surface generic skills (`frontend-design`,
+`shadcn`, `tailwind-v4-shadcn`, etc.) from the user's plugin set, but for this
+package's component internals, this skill wins. The relevant material from
+those generic skills is inlined here:
 
 - **Visual taste / "escape generic AI aesthetics"** → see rule 16 (visual evaluation) and the "Tone for visual work" section in `AGENTS.md`. The library voice is calm, neutral, dense without being cramped — admin density, not marketing flash.
 - **Adding a shadcn primitive** → step 0 of [`references/base-wrapper.md`](references/base-wrapper.md): `npx shadcn@latest add <primitive>` lands the file in `src/components/ui/<primitive>.tsx`. Then write the wrapper.
@@ -875,6 +885,7 @@ The library has **no concept of an application locale**. It does not ship Bulgar
 
 - **User-facing strings** — via the `strings` prop merged through `useStrings(defaults, override)`. The defaults are English; consumers map their backend i18n into the prop.
 - **`date-fns` Locale objects** — accept a `locale?: import('date-fns').Locale` prop directly and forward it to `date-fns` formatters / `react-day-picker`. Default to `enUS` when none is passed. Never accept a string locale identifier the library has to map.
+- **DayPicker v10 pass-throughs** — `base/date-pickers` uses `react-day-picker@^10`. Any `calendarProps` the library forwards must use v10 prop/classNames names (`startMonth`, `endMonth`, `month_grid`, …), not deprecated v9 compatibility names (`fromYear`, `toYear`, `table`, `nav_button`, `day_selected`, …). The package-level `yearSelection.fromYear` / `toYear` API stays supported and is mapped internally to DayPicker v10 `startMonth` / `endMonth`.
 - **Number / currency / date formatters** — read via `useMoneyConfig().locale` and `useDatesConfig().locale`. Consumers set their root locale once on `<UIProvider>`.
 
 Forbidden:

package/.agents/skills/component-library-rules/references/components/INDEX.json

@@ -62,6 +62,7 @@
   {"id":"features/metrics-stat-cards","title":"Features · Metrics · Stat cards","description":"Two stat tile flavors built from the unified `Metric` component — `accent` (dark surface + sparkline) and `colored` (segmented progress bar).","layer":"features","family":"Metrics","tags":["features","metrics","analytics","stat","cards","tile","flavors"],"sourcePath":"src/components/composed/analytics","examples":["MetricAccent","MetricColored"],"doc":"./features__metrics-stat-cards.md"},
   {"id":"features/overlays","title":"Features · Overlays","description":"","layer":"","family":"Overlays","tags":["overlays","features"],"sourcePath":"src/components/features/overlays","examples":["APISurface","DialogDefault","DialogEmphasisTones","DialogRichContent","DialogFormPattern","Drawer4Directions","AlertDialogConfirmationPatterns","BestPractices"],"doc":"./features__overlays.md"},
   {"id":"features/rich-text-editor","title":"Features · Rich text editor","description":"Tiptap-backed editor with bold / italic / strike / lists / quote / undo-redo. Falls back to a non-editable preview when @tiptap/react is not bundled. Strings overridable via the `strings` prop.","layer":"features","family":"Inputs","tags":["features","inputs","rich-text-editor","rich","text","editor","tiptap"],"sourcePath":"src/components/features/rich-text-editor","examples":["ProductionWiring","Default","CompactSmallerInlineNote","EmptyPlaceholder","Disabled","StringsOverride"],"doc":"./features__rich-text-editor.md"},
+  {"id":"layout/layout-app-shell","title":"Layout · App shell","description":"Standalone header-first shell with a 70px+ topbar and a sidebar/content body grid.","layer":"layout","family":"Shells","tags":["layout","shells","app-shell","app","shell","standalone","header"],"sourcePath":"src/components/layout/app-shell","examples":["DarkHeaderLeftSidebar","LightHeaderRightSidebar"],"doc":"./layout__layout-app-shell.md"},
   {"id":"layout/layout-containers","title":"Layout · Containers","description":"Container and Section primitives for page structure, width clamps, padding density, and semantic wrappers.","layer":"layout","family":"Building blocks","tags":["layout","building","blocks","containers","container","section","primitives","page"],"sourcePath":"src/components/layout/containers","examples":["NarrowContainer","WideContainer","BareContainer","SectionRhythm"],"doc":"./layout__layout-containers.md"},
   {"id":"layout/layout-header","title":"Layout · Header","description":"Topbar, breadcrumbs, command search, notifications, and action slots in a realistic app-shell canvas.","layer":"layout","family":"Shells","tags":["layout","shells","header","topbar","breadcrumbs","command"],"sourcePath":"src/components/layout","examples":["AppHeaderComposition","HeaderPartials","CustomNotificationRenderer"],"doc":"./layout__layout-header.md"},
   {"id":"layout/layout-page","title":"Layout · Page","description":"Page shell, header partials, actions, and content regions with framework-neutral links.","layer":"layout","family":"Shells","tags":["layout","shells","page","shell","header","partials","actions"],"sourcePath":"src/components/layout/page","examples":["ProductionPageShell","ComposablePartials"],"doc":"./layout__layout-page.md"},

package/.agents/skills/component-library-rules/references/components/INDEX.md

@@ -81,6 +81,7 @@ Agents: prefer `INDEX.json` (structured) for discovery; this file is for humans.
 
 ## layout
 
+- [Layout · App shell](./layout__layout-app-shell.md) — Standalone header-first shell with a 70px+ topbar and a sidebar/content body grid.
 - [Layout · Containers](./layout__layout-containers.md) — Container and Section primitives for page structure, width clamps, padding density, and semantic wrappers.
 - [Layout · Header](./layout__layout-header.md) — Topbar, breadcrumbs, command search, notifications, and action slots in a realistic app-shell canvas.
 - [Layout · Page](./layout__layout-page.md) — Page shell, header partials, actions, and content regions with framework-neutral links.

package/.agents/skills/component-library-rules/references/components/base__buttons.md

@@ -29,6 +29,7 @@ examples:
   - RealisticToolbar
 imports:
   - @/components/base/buttons
+  - @/components/typography
 tags:
   - base
   - foundations
@@ -64,6 +65,7 @@ import {
 	type ButtonStyle,
 	type ButtonSize,
 } from '@/components/base/buttons';
+import { Text } from '@/components/typography';
 
 const VARIANTS: ButtonVariant[] = ['dark', 'primary', 'secondary', 'error', 'warning', 'success', 'light', 'action'];
 const STYLES: ButtonStyle[] = ['solid', 'outline', 'ghost'];
@@ -145,7 +147,9 @@ export function IconOnlySizes() {
 	return (
 		<div className="flex flex-wrap items-center gap-2">
 			{ICON_SIZES.map((sz) => (
-				<BaseButton key={sz} size={sz} icon={Plus}>{''}</BaseButton>
+				<BaseButton key={sz} size={sz} icon={Plus} aria-label={`Add item (${sz})`}>
+					{''}
+				</BaseButton>
 			))}
 		</div>
 	);
@@ -236,7 +240,15 @@ export function TooltipButtonExample() {
 		<div className="flex flex-wrap gap-2">
 			<TooltipButton withTooltip="Hello tooltip">Hover me</TooltipButton>
 			<TooltipButton withTooltip="Save changes" variant="success" icon={Save}>Save</TooltipButton>
-			<TooltipButton withTooltip="Permanently delete" variant="error" icon={Trash2} size="icon-sm">{''}</TooltipButton>
+			<TooltipButton
+				withTooltip="Permanently delete"
+				variant="error"
+				icon={Trash2}
+				size="icon-sm"
+				aria-label="Permanently delete"
+			>
+				{''}
+			</TooltipButton>
 		</div>
 	);
 }
@@ -289,12 +301,12 @@ export function PageActionButtonSizes() {
 
 export function RealisticToolbar() {
 	return (
-		<div className="flex w-full max-w-2xl items-center justify-between rounded-md border bg-card px-4 py-3">
-			<div className="flex items-center gap-2">
+		<div className="flex w-full max-w-2xl flex-col gap-3 rounded-md border bg-card px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+			<div className="flex min-w-0 items-center gap-2">
 				<Button buttonStyle="ghost" variant="secondary" icon={ArrowRight}>Back</Button>
-				<div className="text-sm font-medium">Order #1042</div>
+				<Text weight="medium" className="min-w-0">Order #1042</Text>
 			</div>
-			<div className="flex items-center gap-2">
+			<div className="flex flex-wrap items-center gap-2">
 				<Button variant="error" buttonStyle="outline" icon={Trash2}>Delete</Button>
 				<Button variant="secondary" icon={Share2}>Share</Button>
 				<Button variant="primary" icon={Save}>Save changes</Button>

package/.agents/skills/component-library-rules/references/components/base__combobox.md

@@ -443,7 +443,7 @@ export function CustomItemRendering() {
 		return MOCK_CUSTOMERS.filter((c) => c.name.toLowerCase().includes(q));
 	}, [search]);
 	return (
-		<div className="flex flex-col gap-2 w-96">
+		<div className="flex w-full max-w-sm flex-col gap-2">
 			<EnhancedCombobox
 				items={filtered}
 				searchValue={search}

package/.agents/skills/component-library-rules/references/components/base__event-calendar.md

@@ -117,7 +117,7 @@ export function FilterEventRenderEventCustomEventRendering() {
 								categories={categories}
 								filterEvent={(e) => e.category !== 'wine'}
 								renderEvent={(event, category) => (
-									<div className="px-1.5 py-0.5 text-[10px] rounded bg-foreground/8 text-foreground truncate">
+									<div className="truncate rounded-sm bg-foreground/8 px-1.5 py-0.5 text-[length:var(--text-xxs)] text-foreground">
 										{category?.label?.split(' ')[0] ?? ''} · {event.title}
 									</div>
 								)}

package/.agents/skills/component-library-rules/references/components/base__forms.md

@@ -156,8 +156,8 @@ export function InputBasic() {
 	return (
 		<div className="flex w-full max-w-sm flex-col gap-3">
 			<Input placeholder="Type something…" />
-			<Input defaultValue="Pre-filled value" />
-			<Input disabled defaultValue="Disabled" />
+			<Input aria-label="Pre-filled value" defaultValue="Pre-filled value" />
+			<Input aria-label="Disabled example" disabled defaultValue="Disabled" />
 		</div>
 	);
 }
@@ -167,7 +167,7 @@ export function InputWithIcons() {
 		<div className="flex w-full max-w-sm flex-col gap-3">
 			<Input startIcon={Search} placeholder="Search orders…" />
 			<Input endIcon={Mail} placeholder="you@example.com" />
-			<Input startIcon={Lock} type="password" defaultValue="hunter2" />
+			<Input aria-label="Password" startIcon={Lock} type="password" defaultValue="hunter2" />
 		</div>
 	);
 }
@@ -176,8 +176,8 @@ export function InputWithAddons() {
 	return (
 		<div className="flex w-full max-w-sm flex-col gap-3">
 			<Input startAddon="$" placeholder="0.00" />
-			<Input endAddon="kg" defaultValue="2.4" />
-			<Input startAddon="$" endAddon="USD" defaultValue="49.00" />
+			<Input aria-label="Weight in kilograms" endAddon="kg" defaultValue="2.4" />
+			<Input aria-label="Amount in USD" startAddon="$" endAddon="USD" defaultValue="49.00" />
 		</div>
 	);
 }
@@ -188,12 +188,13 @@ export function InputClearableLoading() {
 		<div className="flex w-full max-w-sm flex-col gap-3">
 			<Input
 				clearable
+				aria-label="Clearable value"
 				value={val}
 				onChange={(e) => setVal(e.target.value)}
 				onClear={() => setVal('')}
 			/>
-			<Input isLoading defaultValue="Loading…" />
-			<Input invalid defaultValue="Invalid value" />
+			<Input aria-label="Loading value" isLoading defaultValue="Loading…" />
+			<Input aria-label="Invalid value" invalid defaultValue="Invalid value" />
 		</div>
 	);
 }
@@ -204,6 +205,7 @@ export function InputCharacterCount() {
 		<div className="w-full max-w-sm">
 			<Input
 				value={val}
+				aria-label="Biography"
 				onChange={(e) => setVal(e.target.value)}
 				maxLength={60}
 				showCharacterCount
@@ -559,6 +561,7 @@ export function PhoneInputExample() {
 	return (
 		<div className="w-full max-w-sm">
 			<PhoneInput
+				aria-label="Phone number"
 				value={val}
 				onChange={(e) => setVal(e.target.value)}
 				defaultPrefix="US"

package/.agents/skills/component-library-rules/references/components/base__item.md

@@ -77,7 +77,7 @@ export function Basic() {
 					<ItemDescription>Receive email + in-app alerts</ItemDescription>
 				</ItemContent>
 				<ItemActions>
-					<Switch checked />
+					<Switch checked aria-label="Email and app notifications" />
 				</ItemActions>
 			</Item>
 		</ItemGroup>

package/.agents/skills/component-library-rules/references/components/base__map.md

@@ -45,7 +45,7 @@ export function Default() {
 		<div className="h-96 w-full max-w-3xl overflow-hidden rounded-md border border-border">
 			<Map center={NEW_YORK} zoom={4}>
 				<MapTileLayer />
-				<MapMarker position={NEW_YORK}>
+				<MapMarker position={NEW_YORK} ariaLabel="New York marker">
 					<MapPopup>New York</MapPopup>
 				</MapMarker>
 			</Map>
@@ -58,16 +58,16 @@ export function MultipleMarkers() {
 		<div className="h-96 w-full max-w-3xl overflow-hidden rounded-md border border-border">
 			<Map center={[39.5, -98]} zoom={4}>
 				<MapTileLayer />
-				<MapMarker position={NEW_YORK}>
+				<MapMarker position={NEW_YORK} ariaLabel="New York marker">
 					<MapPopup>New York — Northeast HQ</MapPopup>
 				</MapMarker>
-				<MapMarker position={LOS_ANGELES}>
+				<MapMarker position={LOS_ANGELES} ariaLabel="Los Angeles marker">
 					<MapPopup>Los Angeles — West coast</MapPopup>
 				</MapMarker>
-				<MapMarker position={CHICAGO}>
+				<MapMarker position={CHICAGO} ariaLabel="Chicago marker">
 					<MapPopup>Chicago — Midwest hub</MapPopup>
 				</MapMarker>
-				<MapMarker position={SAN_FRANCISCO}>
+				<MapMarker position={SAN_FRANCISCO} ariaLabel="San Francisco marker">
 					<MapPopup>San Francisco — Bay Area</MapPopup>
 				</MapMarker>
 			</Map>
@@ -80,7 +80,7 @@ export function TighterZoom() {
 		<div className="h-72 w-full max-w-3xl overflow-hidden rounded-md border border-border">
 			<Map center={NEW_YORK} zoom={12}>
 				<MapTileLayer />
-				<MapMarker position={NEW_YORK}>
+				<MapMarker position={NEW_YORK} ariaLabel="New York marker">
 					<MapPopup>New York — Manhattan</MapPopup>
 				</MapMarker>
 			</Map>
@@ -93,7 +93,7 @@ export function CompactSize() {
 		<div className="h-48 w-full max-w-md overflow-hidden rounded-md border border-border">
 			<Map center={SAN_FRANCISCO} zoom={11}>
 				<MapTileLayer />
-				<MapMarker position={SAN_FRANCISCO}>
+				<MapMarker position={SAN_FRANCISCO} ariaLabel="San Francisco marker">
 					<MapPopup>San Francisco</MapPopup>
 				</MapMarker>
 			</Map>

package/.agents/skills/component-library-rules/references/components/base__navigation.md

@@ -91,18 +91,18 @@ export function SectionNavSticky() {
 								<aside className="md:sticky md:top-24 md:self-start">
 									<SectionNav
 										items={[
-											{ id: 'overview', label: 'Overview', icon: Home },
-											{ id: 'orders', label: 'Orders', icon: FolderOpen },
-											{ id: 'team', label: 'Team', icon: Users },
-											{ id: 'preferences', label: 'Preferences', icon: Settings },
+											{ id: 'nav-overview', label: 'Overview', icon: Home },
+											{ id: 'nav-orders', label: 'Orders', icon: FolderOpen },
+											{ id: 'nav-team', label: 'Team', icon: Users },
+											{ id: 'nav-preferences', label: 'Preferences', icon: Settings },
 										]}
 									/>
 								</aside>
 								<div className="space-y-6">
-									<section id="overview" className="rounded-md border border-border p-4 min-h-[140px]"><strong>Overview</strong> — section anchor target.</section>
-									<section id="orders" className="rounded-md border border-border p-4 min-h-[140px]"><strong>Orders</strong> — section anchor target.</section>
-									<section id="team" className="rounded-md border border-border p-4 min-h-[140px]"><strong>Team</strong> — section anchor target.</section>
-									<section id="preferences" className="rounded-md border border-border p-4 min-h-[140px]"><strong>Preferences</strong> — section anchor target.</section>
+									<section id="nav-overview" className="rounded-md border border-border p-4 min-h-[140px]"><strong>Overview</strong> — section anchor target.</section>
+									<section id="nav-orders" className="rounded-md border border-border p-4 min-h-[140px]"><strong>Orders</strong> — section anchor target.</section>
+									<section id="nav-team" className="rounded-md border border-border p-4 min-h-[140px]"><strong>Team</strong> — section anchor target.</section>
+									<section id="nav-preferences" className="rounded-md border border-border p-4 min-h-[140px]"><strong>Preferences</strong> — section anchor target.</section>
 								</div>
 							</div>
 		</>

package/.agents/skills/component-library-rules/references/components/base__table.md

@@ -177,7 +177,7 @@ export function SurfaceGlassHeaderTransparentCleanOutlineNoMutedHeader() {
 export function SurfaceFlatInsideSmartCardTableRendersNoChrome() {
 	return (
 		<>
-			<div className="rounded-lg border border-border bg-card p-1">
+			<div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-border bg-card p-1">
 								<DataTable<Order>
 									columns={columns}
 									data={data}
@@ -346,7 +346,7 @@ export function CellRenderers() {
 export function WithRowSelection() {
 	const [selection, setSelection] = useState<RowSelectionState>({});
 	return (
-		<div className="flex flex-col gap-2">
+		<div className="flex w-full min-w-0 max-w-full flex-col gap-2 overflow-hidden">
 			<DataTable<Order>
 				columns={columns}
 				data={data}

package/.agents/skills/component-library-rules/references/components/base__typography.md

@@ -23,6 +23,7 @@ examples:
   - DangerousHTMLExample
   - RealisticArticle
 imports:
+  - @/components/base/forms/fields
   - @/components/typography/heading
   - @/components/typography/label
   - @/components/typography/text
@@ -53,6 +54,7 @@ import { Text } from '@/components/typography/text';
 import Label from '@/components/typography/label';
 import TextLink from '@/components/typography/text-link';
 import { HighLight, Underline, DangerousHTML } from '@/components/typography/typography';
+import { Input } from '@/components/base/forms/fields';
 
 const SIZES = ['xxs', 'xs', 'sm', 'base', 'lg', 'xl'] as const;
 const TYPES = ['main', 'inverse', 'secondary', 'discrete', 'error', 'success', 'primary'] as const;
@@ -170,12 +172,12 @@ export function LabelExample() {
 	return (
 		<div className="flex flex-col gap-3 w-full max-w-sm">
 			<div className="space-y-1">
-				<Label>Email address</Label>
-				<input className="w-full rounded border border-border bg-background px-2 py-1.5 text-sm" placeholder="you@example.com" />
+				<Label htmlFor="typography-email">Email address</Label>
+				<Input id="typography-email" placeholder="you@example.com" />
 			</div>
 			<div className="space-y-1">
-				<Label className="text-primary">Custom-coloured label</Label>
-				<input className="w-full rounded border border-border bg-background px-2 py-1.5 text-sm" />
+				<Label htmlFor="typography-custom-label" className="text-primary">Custom-coloured label</Label>
+				<Input id="typography-custom-label" />
 			</div>
 		</div>
 	);

package/.agents/skills/component-library-rules/references/components/composed__ai-elements.md

@@ -77,7 +77,7 @@ pnpm add -D tailwindcss@^4 @tailwindcss/vite`;
 export function AiShimmerExample() {
 	return (
 		<>
-			<div className="flex flex-col gap-3">
+			<div className="flex w-full min-w-0 max-w-full flex-col gap-3">
 								<AiShimmer>Generating insights…</AiShimmer>
 								<AiShimmer paused>Paused</AiShimmer>
 							</div>
@@ -88,7 +88,7 @@ export function AiShimmerExample() {
 export function AiAgentExample() {
 	return (
 		<>
-			<div className="flex flex-col gap-3">
+			<div className="flex w-full min-w-0 max-w-full flex-col gap-3">
 								<AiAgent name="Atlas" subtitle="claude-4.7-1m" status="thinking" icon={Bot} />
 								<AiAgent
 									name="Helios"
@@ -107,7 +107,7 @@ export function AiAgentExample() {
 export function AiCodeBlockExample() {
 	return (
 		<>
-			<div className="flex flex-col gap-3">
+			<div className="flex w-full min-w-0 max-w-full flex-col gap-3">
 								<AiCodeBlock code={REACT_SAMPLE} language="tsx" filename="Counter.tsx" showLineNumbers />
 								<AiCodeBlock code={SHELL_SAMPLE} language="shell" />
 							</div>
@@ -213,7 +213,7 @@ export function AiSourcesExample() {
 export function AiReasoningExample() {
 	return (
 		<>
-			<div className="flex flex-col gap-3">
+			<div className="flex w-full min-w-0 max-w-full flex-col gap-3">
 								<AiReasoning streaming defaultExpanded>
 									{`Looking at the schema, I need to:\n1. Group rows by booking date\n2. Sum totals per group\n3. Pull refund deltas from the parallel table…`}
 								</AiReasoning>

package/.agents/skills/component-library-rules/references/components/composed__api-key-list.md

@@ -45,7 +45,7 @@ export function DefaultVisibleSecretsCallbacksForAddDelete() {
 	const [keys, setKeys] = useState(initial);
 	return (
 		<>
-			<Col className="max-w-sm">
+			<Col className="max-w-xl">
 								<ApiKeyList
 									items={keys}
 									onAdd={() => {
@@ -66,7 +66,7 @@ export function MaskedSecretsStripeStyle() {
 		]);
 	return (
 		<>
-			<Col className="max-w-sm">
+			<Col className="max-w-xl">
 								<ApiKeyList items={maskedKeys} title="Stripe API keys" />
 							</Col>
 		</>
@@ -76,7 +76,7 @@ export function MaskedSecretsStripeStyle() {
 export function EmptyState() {
 	return (
 		<>
-			<Col className="max-w-sm">
+			<Col className="max-w-xl">
 								<ApiKeyList items={[]} onAdd={() => {}} />
 							</Col>
 		</>
@@ -86,7 +86,7 @@ export function EmptyState() {
 export function LocalizedStrings() {
 	return (
 		<>
-			<Col className="max-w-sm">
+			<Col className="max-w-xl">
 								<ApiKeyList
 									items={initial}
 									strings={{