Apps

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Apps" pattern (@codeatlasdev/ui demo #245, layout/record-list) in my app.

Call get_demo({ ids: ["#245"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Admin tables of API apps, integrations or projects where each row needs a name, a few facts, a status and per-row actions.

Keep these library parts, with the props and tokens the demo uses:
- Avatar, DropdownMenu, DropdownMenuItem, IconButton, RecordCell, RecordList, RecordRow, StatusChip from "@codeatlasdev/ui"

Behaviour to keep:
- `<RecordList` with `columns="minmax(0,1.3fr) minmax(0,1.8fr) 4.5rem 5.5rem 6.5rem 2.75rem"`
- `labels={['App', 'Scopes', 'Installs', 'Status', 'Created']}` and `aria-label="Apps"`
- 3 rows from `apps` (Billing, Support desk, Analytics exporter), each a `<RecordRow>` keyed by `app.id`
- `{#snippet identity()}` holds `<Avatar alt={app.name} size="sm" />` and the name in `<strong>`
- `<RecordCell label="Scopes">`, `<RecordCell label="Installs">`, `<RecordCell label="Status">` and `<RecordCell label="Created">`
- `<StatusChip status={app.live ? 'success' : 'neutral'} label={app.live ? 'Live' : 'Draft'} />`; `{#snippet actions()}` holds a `<DropdownMenu align="end">` with `Edit` and `Rotate secret` items

Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.

Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours.

Library parts

• Avatar @codeatlasdev/ui
• DropdownMenu @codeatlasdev/ui
• DropdownMenuItem @codeatlasdev/ui
• IconButton @codeatlasdev/ui
• RecordCell @codeatlasdev/ui
• RecordList @codeatlasdev/ui
• RecordRow @codeatlasdev/ui
• StatusChip @codeatlasdev/ui

How it is built

• `<RecordList` with `columns="minmax(0,1.3fr) minmax(0,1.8fr) 4.5rem 5.5rem 6.5rem 2.75rem"`
• `labels={['App', 'Scopes', 'Installs', 'Status', 'Created']}` and `aria-label="Apps"`
• 3 rows from `apps` (Billing, Support desk, Analytics exporter), each a `<RecordRow>` keyed by `app.id`
• `{#snippet identity()}` holds `<Avatar alt={app.name} size="sm" />` and the name in `<strong>`
• `<RecordCell label="Scopes">`, `<RecordCell label="Installs">`, `<RecordCell label="Status">` and `<RecordCell label="Created">`
• `<StatusChip status={app.live ? 'success' : 'neutral'} label={app.live ? 'Live' : 'Draft'} />`; `{#snippet actions()}` holds a `<DropdownMenu align="end">` with `Edit` and `Rotate secret` items

Related

• #246 Without a menu component/layout
• #247 Phone width component/layout
• #183 AppList component/layout
• #186 Chat component/layout
• #481 Color, count, actions and reorder component/layout
• #881 Dense CRM with component tokens component/layout