ClintchizandClaude Opus 5
949cf78636
DataTable replaces the 20-line Table scaffold entirely: columns, sorting, filtering, pagination, selection, bulk actions, comparison layout, sticky first column, custom HTML cells, and a remote source driven by a `request` output rather than a function prop (props travel as HTML attributes, so a function arrives as its own source text). Toaster replaces the hand-rolled status div: tone icons, actions, hover pause/resume and a progress bar. Overlays audit -- Modal and Drawer declared aria-modal="true" but nothing ever moved focus into the panel, so the @keydown handler on their root never ran and closeOnEscape did nothing. Focus, focus restore, a Tab trap and a body scroll lock now live in the reactive runtime, shared by both. ContextMenu placed pointer menus by subtracting a guessed 340x420 from the viewport, which pushed every menu that was not that size away from the pointer; it now positions at the pointer and lets the anchored clamp pull it back once it can be measured. The reactive runtime size budget moves 150k -> 175k to cover anchored overlays, dialog behaviour, the toaster and the DataTable client half. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
import { readFileSync } from "node:fs";
|
|
import { join } from "node:path";
|
|
import { uiComponentsDir } from "./registry.ts";
|
|
export interface UiComponentMetadata {
|
|
name: string;
|
|
mount: string;
|
|
category?: string;
|
|
purpose?: string;
|
|
props?: Array<{ name: string; default?: unknown }>;
|
|
events?: string[];
|
|
}
|
|
export interface UiComponentReference {
|
|
count: number;
|
|
components: UiComponentMetadata[];
|
|
}
|
|
let referenceCache: UiComponentReference | undefined;
|
|
export function uiComponentReference(): UiComponentReference {
|
|
if (!referenceCache)
|
|
referenceCache = JSON.parse(
|
|
readFileSync(join(uiComponentsDir(), "..", "component-reference.json"), "utf8"),
|
|
) as UiComponentReference;
|
|
return structuredClone(referenceCache);
|
|
}
|
|
export function findUiComponent(name: string): UiComponentMetadata | undefined {
|
|
return uiComponentReference().components.find(
|
|
(component) => component.name === name || component.mount === name,
|
|
);
|
|
}
|
|
export function auditUiComponents(): Array<{ component: string; issue: string }> {
|
|
const issues: Array<{ component: string; issue: string }> = [];
|
|
for (const component of uiComponentReference().components) {
|
|
const props = new Set((component.props ?? []).map((prop) => prop.name));
|
|
if (!props.has("class"))
|
|
issues.push({ component: component.name, issue: "missing class prop" });
|
|
if (!props.has("size")) issues.push({ component: component.name, issue: "missing size prop" });
|
|
if (!props.has("color"))
|
|
issues.push({ component: component.name, issue: "missing color prop" });
|
|
}
|
|
return issues;
|
|
}
|