admin-ui-starter-kit 0.1.4 → 0.4.3

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

@@ -1,20 +1,24 @@
 ---
 id: ui/overlays
 title: "UI · Overlays"
-description: "Dialog, Sheet, Popover, Tooltip, HoverCard."
+description: "Dialog, AlertDialog, Sheet, Drawer, Popover, Tooltip, and HoverCard."
 layer: ui
 family: "Overlays"
 sourcePath: src/components/ui
 examples:
   - DialogExample
+  - AlertDialogExample
   - SheetExample
+  - DrawerExample
   - PopoverExample
   - TooltipExample
   - HoverCardExample
 imports:
   - @/components/base/sheet
+  - @/components/ui/alert-dialog
   - @/components/ui/button
   - @/components/ui/dialog
+  - @/components/ui/drawer
   - @/components/ui/hover-card
   - @/components/ui/popover
   - @/components/ui/tooltip
@@ -22,24 +26,45 @@ tags:
   - ui
   - overlays
   - dialog
+  - alertdialog
   - sheet
-  - popover
-  - tooltip
+  - drawer
 ---
 
 # UI · Overlays
 
-Dialog, Sheet, Popover, Tooltip, HoverCard.
+Dialog, AlertDialog, Sheet, Drawer, Popover, Tooltip, and HoverCard.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui`
 
 ## Examples
 
 ```tsx
 import { useState } from 'react';
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import {
+	Drawer,
+	DrawerClose,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
+} from '@/components/ui/drawer';
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/base/sheet';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -51,18 +76,42 @@ export function DialogExample() {
 	return (
 		<>
 			<Dialog open={open} onOpenChange={setOpen}>
-									<DialogTrigger render={(p) => <Button {...p}>Open dialog</Button>} />
-									<DialogContent>
-										<DialogHeader>
-											<DialogTitle>Confirm action</DialogTitle>
-											<DialogDescription>This is a controlled dialog.</DialogDescription>
-										</DialogHeader>
-										<DialogFooter>
-											<Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
-											<Button onClick={() => setOpen(false)}>Confirm</Button>
-										</DialogFooter>
-									</DialogContent>
-								</Dialog>
+				<DialogTrigger render={(p) => <Button {...p}>Open dialog</Button>} />
+				<DialogContent>
+					<DialogHeader>
+						<DialogTitle>Confirm action</DialogTitle>
+						<DialogDescription>This is a controlled dialog.</DialogDescription>
+					</DialogHeader>
+					<DialogFooter>
+						<Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
+						<Button onClick={() => setOpen(false)}>Confirm</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</>
+	);
+}
+
+export function AlertDialogExample() {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			<AlertDialog open={open} onOpenChange={setOpen}>
+				<AlertDialogTrigger render={(p) => <Button variant="outline" {...p}>Open alert dialog</Button>} />
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Archive workspace?</AlertDialogTitle>
+						<AlertDialogDescription>
+							This action removes the workspace from active views.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction onClick={() => setOpen(false)}>Archive</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</>
 	);
 }
@@ -71,15 +120,39 @@ export function SheetExample() {
 	return (
 		<>
 			<Sheet>
-									<SheetTrigger render={(p) => <Button variant="outline" {...p}>Open sheet</Button>} />
-									<SheetContent>
-										<SheetHeader>
-											<SheetTitle>Sheet title</SheetTitle>
-											<SheetDescription>Side-anchored panel.</SheetDescription>
-										</SheetHeader>
-										<div className="px-4 py-2 text-sm">Sheet body content.</div>
-									</SheetContent>
-								</Sheet>
+				<SheetTrigger render={(p) => <Button variant="outline" {...p}>Open sheet</Button>} />
+				<SheetContent>
+					<SheetHeader>
+						<SheetTitle>Sheet title</SheetTitle>
+						<SheetDescription>Side-anchored panel.</SheetDescription>
+					</SheetHeader>
+					<div className="px-4 py-2 text-sm">Sheet body content.</div>
+				</SheetContent>
+			</Sheet>
+		</>
+	);
+}
+
+export function DrawerExample() {
+	return (
+		<>
+			<Drawer direction="right">
+				<DrawerTrigger asChild>
+					<Button variant="outline">Open drawer</Button>
+				</DrawerTrigger>
+				<DrawerContent>
+					<DrawerHeader>
+						<DrawerTitle>Drawer title</DrawerTitle>
+						<DrawerDescription>Vaul-powered side panel.</DrawerDescription>
+					</DrawerHeader>
+					<div className="px-4 py-2 text-sm">Drawer body content.</div>
+					<DrawerFooter>
+						<DrawerClose asChild>
+							<Button variant="outline">Close</Button>
+						</DrawerClose>
+					</DrawerFooter>
+				</DrawerContent>
+			</Drawer>
 		</>
 	);
 }
@@ -88,11 +161,11 @@ export function PopoverExample() {
 	return (
 		<>
 			<Popover>
-									<PopoverTrigger render={(p) => <Button variant="outline" {...p}>Open popover</Button>} />
-									<PopoverContent className="w-64 text-sm">
-										Popover content with arbitrary children.
-									</PopoverContent>
-								</Popover>
+				<PopoverTrigger render={(p) => <Button variant="outline" {...p}>Open popover</Button>} />
+				<PopoverContent className="w-64 text-sm">
+					Popover content with arbitrary children.
+				</PopoverContent>
+			</Popover>
 		</>
 	);
 }
@@ -101,11 +174,11 @@ export function TooltipExample() {
 	return (
 		<>
 			<Row>
-									<Tooltip>
-										<TooltipTrigger render={(p) => <Button variant="outline" {...p}>Hover me</Button>} />
-										<TooltipContent>Hello, I'm a tooltip.</TooltipContent>
-									</Tooltip>
-								</Row>
+				<Tooltip>
+					<TooltipTrigger render={(p) => <Button variant="outline" {...p}>Hover me</Button>} />
+					<TooltipContent>Hello, I'm a tooltip.</TooltipContent>
+				</Tooltip>
+			</Row>
 		</>
 	);
 }
@@ -114,13 +187,13 @@ export function HoverCardExample() {
 	return (
 		<>
 			<HoverCard>
-									<HoverCardTrigger render={(p) => <Button variant="link" {...p}>@maria</Button>} />
-									<HoverCardContent className="w-64 text-sm">
-										<div className="font-medium">Sarah Smitha</div>
-										<div className="text-muted-foreground">Account Manager</div>
-										<div className="mt-2 text-xs text-muted-foreground">Joined Jan 2023.</div>
-									</HoverCardContent>
-								</HoverCard>
+				<HoverCardTrigger render={(p) => <Button variant="link" {...p}>@maria</Button>} />
+				<HoverCardContent className="w-64 text-sm">
+					<div className="font-medium">Sarah Smitha</div>
+					<div className="text-muted-foreground">Account Manager</div>
+					<div className="mt-2 text-xs text-muted-foreground">Joined Jan 2023.</div>
+				</HoverCardContent>
+			</HoverCard>
 		</>
 	);
 }
@@ -129,7 +202,9 @@ export function HoverCardExample() {
 ## Example exports
 
 - `DialogExample`
+- `AlertDialogExample`
 - `SheetExample`
+- `DrawerExample`
 - `PopoverExample`
 - `TooltipExample`
 - `HoverCardExample`

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

@@ -22,7 +22,7 @@ tags:
 
 Manual composition of pagination controls.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/pagination`
 
 ## Examples

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

@@ -24,7 +24,7 @@ tags:
 
 Linear progress bar at varying values.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/progress`
 
 ## Examples

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

@@ -24,7 +24,7 @@ tags:
 
 Custom-styled scroll viewport.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/scroll-area`
 
 ## Examples

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

@@ -23,7 +23,7 @@ tags:
 
 Horizontal & vertical dividers.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/separator`
 
 ## Examples

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

@@ -24,7 +24,7 @@ tags:
 
 Animated loading placeholders.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/skeleton`
 
 ## Examples

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

@@ -23,7 +23,7 @@ tags:
 
 Toast notifications.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/button`
 
 ## Examples

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

@@ -24,7 +24,7 @@ tags:
 
 Loading spinner — sized via className.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/spinner`
 
 ## Examples
@@ -53,7 +53,7 @@ export function ColorViaClassName() {
 			<Row>
 								<Spinner className="size-5 text-primary" />
 								<Spinner className="size-5 text-destructive" />
-								<Spinner className="size-5 text-chart-2" />
+								<Spinner className="size-5 text-info" />
 								<Spinner className="size-5 text-muted-foreground" />
 							</Row>
 		</>

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

@@ -23,7 +23,7 @@ tags:
 
 Tab list with content panels.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/tabs`
 
 ## Examples

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

@@ -24,7 +24,7 @@ tags:
 
 Single toggle + radio/multiple group.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui`
 
 ## Examples

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

@@ -28,7 +28,7 @@ tags:
 
 Checkbox, Switch, RadioGroup, Slider primitives.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui`
 
 ## Examples

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

@@ -25,7 +25,7 @@ tags:
 
 shadcn badge primitive (no theming wrapper).
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/badge`
 
 ## Examples

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

@@ -24,7 +24,7 @@ tags:
 
 shadcn primitive card with header / title / description / content / footer.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/card`
 
 ## Examples

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

@@ -23,7 +23,7 @@ tags:
 
 shadcn table primitive (no data layer).
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/table`
 
 ## Examples

package/.agents/skills/component-library-rules/references/visual-eval.md

@@ -10,7 +10,7 @@ Any change observable in the browser preview:
 - Restyled component (className, density, spacing, color)
 - Refactored typography (Text/Heading)
 - New preview page or section
-- Changes to `App.css` tokens
+- Changes to CSS tokens in `src/css/themes/default.css` or `src/css/defaults.css`
 
 When the change is purely structural (types, refactors that pass tsc, hooks with no UI surface), skip this — but say so explicitly rather than silently dropping the check.
 

package/.agents/skills/component-quality-pass/SKILL.md

@@ -0,0 +1,47 @@
+---
+name: component-quality-pass
+description: Reusable audit workflow for this admin-ui-starter-kit component library. Use when asked to test, visually inspect, iron out inconsistencies, or clean up component quality across base, composed, features, layout, or preview pages, especially for whitespace, typography, tokenization, structure, API callbacks, strings, BEM hooks, visual screenshots, and functional tests.
+---
+
+# Component Quality Pass
+
+Use this skill to run a disciplined pass over component surfaces instead of clicking one page, fixing one visible defect, and missing the next one. It complements `component-library-rules`; load that skill first before editing `src/components/**`.
+
+## Workflow
+
+1. **Scope the pass.** Identify affected layers and routes: base, composed, features, layout, preview docs. If the user says "all", cover every registered preview route in the relevant sections.
+2. **Read the owning code.** Read the component, types, strings, partials/hooks, index export, preview example, tests, and nearby components in the same family.
+3. **Run static scans.** Use `scripts/scan-quality-smells.mjs` for token/layer/style smells and `scripts/list-preview-routes.mjs` to build the route list.
+4. **Inspect visually, slowly.** Use the Browser plugin's in-app browser and Playwright automation for visual validation. Visit each route, wait for lazy modules/fonts/rendering, then validate every visible example/variant/state on the page. Scroll top/middle/bottom, check desktop plus narrow widths, and capture screenshots for any changed or suspicious page.
+5. **Fix the component, not the preview.** If a preview exposes a defect, move the fix into `src/components/**` unless the preview is genuinely misusing the API.
+6. **Verify behavior.** Add or update tests for functional features and non-obvious base/composed behavior. Prefer callback/data/strings assertions over snapshots.
+7. **Run checks.** At minimum run focused tests/lint/typecheck for touched files, then broader `npm run lint:architecture`, `npm run test:exports`, `npm run typecheck`, `npm run lint`, and relevant Vitest suites.
+8. **Report residual risk.** Say which routes were visually inspected, which commands passed, and any generator checks or dirty-worktree areas that still need review.
+
+## Quality Bar
+
+Treat these as blocking defects:
+
+- Text hierarchy inconsistent for equivalent roles.
+- Whitespace disconnects related elements or smashes header/body/content.
+- Size variants in the same component family drift in height, padding, icon scale, text scale, or density without an intentional API reason.
+- Similar examples/variants disagree on spacing, alignment, tone, empty/loading/error states, focus treatment, or action placement.
+- Raw layout reimplements `SmartCard`, `Item`, `MetadataList`, `FormField`, `Button`, `Badge`, `Table`, or overlay primitives.
+- Feature components hardcode routing, data fetching, locale, strings, or consumer app types.
+- Components use raw color utilities where semantic tokens exist.
+- Preview pages duplicate implementation instead of demonstrating exported components.
+- Functional features lack callback/API tests for submit, select, add, remove, edit, async fetcher, error, or controlled state.
+- Public components lack stable `{name}--component` BEM hooks on real DOM roots.
+
+## References
+
+Read [references/audit-workflow.md](references/audit-workflow.md) when doing a real pass. It contains the concrete visual, structure, functionality, token, testing, and verification checklist.
+
+## Scripts
+
+- `node .agents/skills/component-quality-pass/scripts/list-preview-routes.mjs`
+  Lists registered preview routes as `http://localhost:5173/#/<id>`. Supports `--section`, `--family`, `--scope`, `--id`, `--json`.
+- `node .agents/skills/component-quality-pass/scripts/scan-quality-smells.mjs`
+  Reports common token, style, layering, and API smells. Treat output as a triage list, not proof of a bug.
+
+Use the scripts to focus the audit, but do not stop at script output. The Browser plugin + Playwright visual pass is mandatory for UI consistency work; do not replace it with static checks or a single screenshot.

package/.agents/skills/component-quality-pass/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Component Quality Pass"
+  short_description: "Audit component visuals, APIs, and tests"
+  default_prompt: "Use $component-quality-pass to run a visual, API, token, and test consistency pass over this component library."

package/.agents/skills/component-quality-pass/references/audit-workflow.md

@@ -0,0 +1,133 @@
+# Component Quality Audit Workflow
+
+## Route Coverage
+
+Start with the registered preview routes, not memory:
+
+```bash
+node .agents/skills/component-quality-pass/scripts/list-preview-routes.mjs
+node .agents/skills/component-quality-pass/scripts/list-preview-routes.mjs --section Features
+node .agents/skills/component-quality-pass/scripts/list-preview-routes.mjs --scope composed/commerce
+```
+
+For each relevant route:
+
+1. Open the route with the Browser plugin's in-app browser and Playwright automation.
+2. Wait for lazy modules, rendering, fonts, and async example data to settle.
+3. Inspect the first viewport.
+4. Validate every visible example/variant/state on the page, not just the first demo. For tabbed Preview/Code examples, inspect the rendered Preview pane; inspect Code only when source display is part of the defect.
+5. Exercise interactive examples enough to expose their states: open menus/popovers/dialogs, toggle density/selection controls, type into search fields, trigger empty/loading/error states when the page exposes them.
+6. Scroll to the middle and bottom; many defects appear below the fold.
+7. Check desktop and narrow widths.
+8. Capture screenshots when changing visuals or when reporting defects.
+
+Do not claim a route is clean after only opening it at the top.
+Do not claim a component family is clean until every documented size variant, tone variant, density variant, and meaningful state shown in preview has been inspected.
+
+## Visual Checklist
+
+Check every inspected page for:
+
+- Header/body spacing: content must not touch the title band, and related elements should not be separated by ornamental gaps.
+- Local rhythm: compact rows usually use `gap-0.5`, `gap-1`, or `gap-1.5`; larger `gap-3+` needs real grouping intent.
+- Typography: admin surfaces default to `sm` and `xs`; `text-base` is rare and should not appear in dense rows/cards.
+- Color: semantic states use `success`, `warning`, `destructive`, `info`, `primary`, `muted`; avoid raw hue classes and accidental `primary-foreground` text.
+- Tokenization: spacing, radius, text, row density, semantic color, and component-specific values should come from tokens or established wrappers. Literal one-off values need a clear, local reason.
+- Size consistency: `xs`/`sm`/`md`/`lg` variants should progress predictably across height, padding, icon size, text size, and radius. Compare siblings side-by-side and flag accidental jumps.
+- Borders: avoid one-sided "AI-looking" accent borders unless the component domain explicitly calls for it.
+- Icons: no icon clutter in metadata/labels; prefer text, `MetadataList`, or `Item` where the data is descriptive rather than actionable.
+- Cards: no cards inside cards unless the inner unit is a genuine repeated item, modal, or framed tool.
+- Tables: row actions belong in the table row action affordance/menu pattern, not permanent inline action columns unless the table API explicitly calls for action cells.
+- Responsive behavior: text must not overflow or collide on narrow widths; fixed-format elements need stable dimensions.
+- Cross-variant consistency: variants of the same surface should keep matching whitespace, alignment, action placement, focus states, and content hierarchy unless the variant intentionally changes those rules.
+
+## Structure Checklist
+
+Read the component and its neighbors before editing. Verify:
+
+- Layer boundaries match `component-library-rules`.
+- `base` wrappers are used instead of raw shadcn imports outside `base`.
+- `Item` is used for media + title/description + actions rows.
+- `SmartCard` is used for card chrome, title, description, footer, and dividers.
+- `MetadataList` or display primitives are used for label/value metadata.
+- `FormField` / `ControlledFormField` wraps label/control/error rows.
+- Feature folders expose `index.ts`, types, strings, hooks/partials where relevant.
+- Public roots include `{kebab-name}--component` on the actual DOM element.
+- Preview pages remain thin examples of real APIs, not private component copies.
+
+## Functionality Checklist
+
+For functional features, verify default props and all relevant callbacks:
+
+- Controlled value + `onValueChange` or `onChange`.
+- Submit/add/edit/remove/delete callbacks.
+- Row/item/result selection callbacks.
+- Async `fetcher` callback, debounce/cancel behavior, empty/error/loading states.
+- `onError` for async failures.
+- `strings` deep-partial overrides.
+- Slots and render-props for replaceable internals.
+- Accessors for consumer domain shapes.
+- No router, query library, framework, backend SDK, locale detection, or app ambient types.
+
+If a component cannot be used standalone with realistic default props and callbacks, fix the component API.
+
+## Tokenization And Static Scan
+
+Run:
+
+```bash
+node .agents/skills/component-quality-pass/scripts/scan-quality-smells.mjs
+```
+
+Investigate every report in touched areas. Common valid exceptions exist, but they must be intentional.
+
+High-priority smells:
+
+- `text-[10px]`, `text-[11px]`, `text-[13px]`, raw arbitrary colors.
+- `text-orange-*`, `bg-blue-*`, `border-purple-*`, etc. where semantic tokens exist.
+- `text-primary-foreground` outside actual primary backgrounds.
+- `bg-chart-*` outside real multi-series charts.
+- `focus:` instead of `focus-visible:`.
+- Raw `<button>`/`<input>` where base components exist.
+- Direct `@/components/ui/*` imports outside `src/components/base/**`.
+- Unguarded `console.warn` / `console.error`.
+- `navigator.language`, router imports, query-library imports, backend SDK imports.
+
+## Testing Checklist
+
+Use tests to lock functional contracts, not screenshots:
+
+- Base/composed: render contract, provider size/default resolution, slots, BEM hook if public.
+- Features: callback payloads, controlled state, strings overrides, slots/render-props, async fetcher success/error, add/edit/remove flows.
+- Hooks: state transitions, debounce/cancel behavior, error callbacks.
+- Avoid snapshots; use explicit assertions.
+
+Useful commands:
+
+```bash
+npm run typecheck
+npm run lint:architecture
+npm run test:exports
+npm run lint
+npx vitest run src/components/features --pool=threads --maxWorkers=1
+npm test -- --pool=threads --maxWorkers=1
+```
+
+For generated docs:
+
+```bash
+npm run docs:check-props
+npm run docs:sync-skill -- --check
+```
+
+If a generator check rewrites files on each run, report it as non-converging and inspect the diff; do not call it passed.
+
+## Final Report
+
+Keep the final report concrete:
+
+- Files/components changed.
+- Routes visually inspected and viewport coverage.
+- Functional tests added or updated.
+- Commands run and pass/fail status.
+- Remaining defects, generator drift, or dirty-worktree risks.

package/.agents/skills/component-quality-pass/scripts/list-preview-routes.mjs

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const args = process.argv.slice(2);
+const filters = new Map();
+let asJson = false;
+
+for (let i = 0; i < args.length; i += 1) {
+	const arg = args[i];
+	if (arg === '--json') {
+		asJson = true;
+		continue;
+	}
+	if (arg.startsWith('--')) {
+		const key = arg.slice(2);
+		const value = args[i + 1];
+		if (!value || value.startsWith('--')) {
+			throw new Error(`Missing value for ${arg}`);
+		}
+		filters.set(key, value.toLowerCase());
+		i += 1;
+	}
+}
+
+const registryPath = resolve(process.cwd(), 'src/preview/registry.tsx');
+const source = readFileSync(registryPath, 'utf8');
+const entries = [];
+const scopeRules = [];
+const scopeRulePattern = /\{\s*prefix:\s*'([^']+)'\s*,\s*scope:\s*'([^']+)'\s*\}/g;
+
+for (const match of source.matchAll(scopeRulePattern)) {
+	scopeRules.push({ prefix: match[1], scope: match[2] });
+}
+
+const entryPattern = /\{\s*id:\s*'([^']+)'\s*,\s*label:\s*'([^']+)'\s*,\s*section:\s*'([^']+)'\s*,\s*family:\s*'([^']+)'([^}]*)\}/g;
+
+for (const match of source.matchAll(entryPattern)) {
+	const [, id, label, section, family, rest] = match;
+	const explicitScope = rest.match(/scope:\s*'([^']+)'/)?.[1];
+	const derivedScope =
+		explicitScope ?? scopeRules.find((rule) => id.startsWith(rule.prefix))?.scope ?? '';
+	const status = rest.match(/status:\s*'([^']+)'/)?.[1] ?? '';
+	entries.push({
+		id,
+		label,
+		section,
+		family,
+		scope: derivedScope,
+		status,
+		url: `http://localhost:5173/#/${id}`,
+	});
+}
+
+const filtered = entries.filter((entry) => {
+	for (const [key, value] of filters) {
+		const actual = String(entry[key] ?? '').toLowerCase();
+		if (!actual.includes(value)) return false;
+	}
+	return true;
+});
+
+if (asJson) {
+	console.log(JSON.stringify(filtered, null, 2));
+} else {
+	for (const entry of filtered) {
+		const scope = entry.scope ? ` scope=${entry.scope}` : '';
+		const status = entry.status ? ` status=${entry.status}` : '';
+		console.log(`${entry.url}  [${entry.section} / ${entry.family}] ${entry.label}${scope}${status}`);
+	}
+}