@ketvietlab/design-system 0.1.30 → 0.1.31

package/dist/catalogue/index.js

@@ -54,7 +54,7 @@ export const CATALOGUE_HOOKS = [
 export const CatalogueHead = () => html `<meta name="description" content="Két Việt public component documentation"><link rel="stylesheet" href="/design-system/catalogue/styles.css"><script type="module" src="/design-system/runtime/auto.js"></script>`;
 const registrationsFor = (groupId) => componentRegistry.filter((registration) => registration.groupId === groupId);
 const pathWithPreferences = (path, theme, density) => `${path}${path.includes('?') ? '&' : '?'}theme=${theme}&density=${density}`;
-const CatalogueRail = (props) => (_jsxs("aside", { "data-ui": "catalogue-rail", children: [_jsxs("a", { "data-ui": "catalogue-brand", href: pathWithPreferences('/', props.theme, props.density), children: [_jsx("span", { "aria-hidden": "true", children: "K" }), _jsx("strong", { children: "K\u00E9t Vi\u1EC7t" })] }), _jsx("p", { "data-ui": "catalogue-kicker", children: "Design system \u00B7 0.1.30" }), _jsxs("nav", { "data-ui": "catalogue-nav", "aria-label": "Design system documentation", children: [_jsx("span", { "data-ui": "catalogue-nav-section", children: "Get started" }), _jsx("a", { "data-ui": "catalogue-nav-group", href: pathWithPreferences('/', props.theme, props.density), "aria-current": props.active === 'overview' ? 'page' : null, children: _jsx("span", { children: "Overview" }) }), _jsxs("a", { "data-ui": "catalogue-nav-group", href: pathWithPreferences('/components', props.theme, props.density), "aria-current": props.active === 'components' ? 'page' : null, children: [_jsx("span", { children: "Components" }), _jsx("span", { "data-ui": "catalogue-nav-count", children: String(componentRegistry.length) })] }), _jsx("a", { "data-ui": "catalogue-nav-group", href: `/demo?theme=${props.theme}`, children: _jsx("span", { children: "Application demo" }) }), _jsxs("a", { "data-ui": "catalogue-nav-group", href: pathWithPreferences('/primitives', props.theme, props.density), "aria-current": props.active === 'primitives' ? 'page' : null, children: [_jsx("span", { children: "Primitive harness" }), _jsx("span", { "data-ui": "catalogue-nav-count", children: String(primitiveSections.flatMap((section) => section.components).length) })] }), _jsx("a", { "data-ui": "catalogue-nav-group", href: `/demo2?theme=${props.theme}`, children: _jsx("span", { children: "Application submenu demo" }) }), _jsx("span", { "data-ui": "catalogue-nav-section", children: "Component groups" }), each(componentGroups, (group) => group.id, (group) => (_jsxs("a", { "data-ui": "catalogue-nav-group", href: pathWithPreferences(`/components/${group.id}`, props.theme, props.density), "aria-current": props.active === group.id ? 'page' : null, children: [_jsx("span", { children: group.name }), _jsx("span", { "data-ui": "catalogue-nav-count", children: String(registrationsFor(group.id).length) })] }))), _jsx("span", { "data-ui": "catalogue-nav-section", children: "Reference" }), _jsxs("a", { "data-ui": "catalogue-nav-group", href: "/surfaces?kind=record&theme=light", children: [_jsx("span", { children: "Page patterns" }), _jsx("span", { "data-ui": "catalogue-nav-count", children: "3" })] }), _jsx("a", { "data-ui": "catalogue-nav-group", href: "/inventory", children: _jsx("span", { children: "Inventory" }) })] })] }));
+const CatalogueRail = (props) => (_jsxs("aside", { "data-ui": "catalogue-rail", children: [_jsxs("a", { "data-ui": "catalogue-brand", href: pathWithPreferences('/', props.theme, props.density), children: [_jsx("span", { "aria-hidden": "true", children: "K" }), _jsx("strong", { children: "K\u00E9t Vi\u1EC7t" })] }), _jsx("p", { "data-ui": "catalogue-kicker", children: "Design system \u00B7 0.1.31" }), _jsxs("nav", { "data-ui": "catalogue-nav", "aria-label": "Design system documentation", children: [_jsx("span", { "data-ui": "catalogue-nav-section", children: "Get started" }), _jsx("a", { "data-ui": "catalogue-nav-group", href: pathWithPreferences('/', props.theme, props.density), "aria-current": props.active === 'overview' ? 'page' : null, children: _jsx("span", { children: "Overview" }) }), _jsxs("a", { "data-ui": "catalogue-nav-group", href: pathWithPreferences('/components', props.theme, props.density), "aria-current": props.active === 'components' ? 'page' : null, children: [_jsx("span", { children: "Components" }), _jsx("span", { "data-ui": "catalogue-nav-count", children: String(componentRegistry.length) })] }), _jsx("a", { "data-ui": "catalogue-nav-group", href: `/demo?theme=${props.theme}`, children: _jsx("span", { children: "Application demo" }) }), _jsxs("a", { "data-ui": "catalogue-nav-group", href: pathWithPreferences('/primitives', props.theme, props.density), "aria-current": props.active === 'primitives' ? 'page' : null, children: [_jsx("span", { children: "Primitive harness" }), _jsx("span", { "data-ui": "catalogue-nav-count", children: String(primitiveSections.flatMap((section) => section.components).length) })] }), _jsx("a", { "data-ui": "catalogue-nav-group", href: `/demo2?theme=${props.theme}`, children: _jsx("span", { children: "Application submenu demo" }) }), _jsx("span", { "data-ui": "catalogue-nav-section", children: "Component groups" }), each(componentGroups, (group) => group.id, (group) => (_jsxs("a", { "data-ui": "catalogue-nav-group", href: pathWithPreferences(`/components/${group.id}`, props.theme, props.density), "aria-current": props.active === group.id ? 'page' : null, children: [_jsx("span", { children: group.name }), _jsx("span", { "data-ui": "catalogue-nav-count", children: String(registrationsFor(group.id).length) })] }))), _jsx("span", { "data-ui": "catalogue-nav-section", children: "Reference" }), _jsxs("a", { "data-ui": "catalogue-nav-group", href: "/surfaces?kind=record&theme=light", children: [_jsx("span", { children: "Page patterns" }), _jsx("span", { "data-ui": "catalogue-nav-count", children: "3" })] }), _jsx("a", { "data-ui": "catalogue-nav-group", href: "/inventory", children: _jsx("span", { children: "Inventory" }) })] })] }));
 const CataloguePreferences = (props) => (_jsxs("div", { "data-ui": "catalogue-controls", role: "group", "aria-label": "Catalogue preferences", children: [_jsx("span", { children: "Theme" }), each(['light', 'dark', 'system'], (value) => value, (value) => (_jsx("a", { href: pathWithPreferences(props.path, value, props.density), "aria-current": props.theme === value ? 'page' : null, children: value[0].toUpperCase() + value.slice(1) }))), _jsx("span", { children: "Density" }), each(['compact', 'default', 'comfortable'], (value) => value, (value) => (_jsx("a", { href: pathWithPreferences(props.path, props.theme, value), "aria-current": props.density === value ? 'page' : null, children: value === 'comfortable' ? 'Comfort' : value[0].toUpperCase() + value.slice(1) })))] }));
 const Overview = (props) => (_jsxs(_Fragment, { children: [_jsxs("header", { "data-ui": "catalogue-hero", children: [_jsxs("div", { children: [_jsx("p", { "data-ui": "catalogue-kicker", children: "SSR-first \u00B7 operational \u00B7 accessible" }), _jsx("h1", { "data-ui": "catalogue-title", children: "The interface language for K\u00E9t applications." }), _jsx("p", { "data-ui": "catalogue-intro", children: "Reusable contracts for dense business software\u2014designed to remain useful before JavaScript arrives and predictable when the workflow gets complicated." }), _jsx(LinkButton, { label: `Explore ${String(componentRegistry.length)} components`, href: pathWithPreferences('/components', props.theme, props.density), variant: "primary" }), _jsx(LinkButton, { label: "Review inventory", href: "/inventory", variant: "secondary" }), _jsx(LinkButton, { label: "Open application demo", href: `/demo?theme=${props.theme === 'system' ? 'light' : props.theme}`, variant: "secondary" }), _jsx(LinkButton, { label: "Try submenu navigation", href: `/demo2?theme=${props.theme === 'system' ? 'light' : props.theme}`, variant: "secondary" })] }), _jsx(CataloguePreferences, { path: "/", theme: props.theme, density: props.density })] }), _jsxs("section", { "data-ui": "catalogue-metrics", "aria-label": "Design system summary", children: [_jsxs("article", { children: [_jsx("strong", { children: String(componentRegistry.length) }), _jsx("span", { children: "public components" })] }), _jsxs("article", { children: [_jsx("strong", { children: String(componentGroups.reduce((total, group) => total + group.examples.length, 0)) }), _jsx("span", { children: "executable specimens" })] }), _jsxs("article", { children: [_jsx("strong", { children: String(componentGroups.length) }), _jsx("span", { children: "documented groups" })] }), _jsxs("article", { children: [_jsx("strong", { children: String(designSystemInventory.summary.plannedComponents) }), _jsx("span", { children: "planned contracts" })] })] }), _jsxs("section", { "data-ui": "catalogue-group", children: [_jsxs("header", { "data-ui": "catalogue-group-head", children: [_jsxs("div", { children: [_jsx("p", { "data-ui": "catalogue-kicker", children: "System map" }), _jsx("h2", { children: "Start with the contract" })] }), _jsx("p", { children: "Use the smallest stable layer that owns the behavior. Recipes compose components; applications own business state." })] }), _jsxs("div", { "data-ui": "catalogue-doc-grid", children: [_jsxs("article", { "data-ui": "catalogue-doc-card", children: [_jsx("span", { children: "01" }), _jsx("h3", { children: "Foundations" }), _jsx("p", { children: "Semantic tokens, density, focus, motion and responsive rules form one cascade." }), _jsx("a", { href: "/inventory#css", children: "Inspect CSS ownership \u2192" })] }), _jsxs("article", { "data-ui": "catalogue-doc-card", children: [_jsx("span", { children: "02" }), _jsx("h3", { children: "Components" }), _jsxs("p", { children: [String(componentRegistry.length), " renderer contracts with explicit owners, states and specimens."] }), _jsx("a", { href: pathWithPreferences('/components', props.theme, props.density), children: "Browse components \u2192" })] }), _jsxs("article", { "data-ui": "catalogue-doc-card", children: [_jsx("span", { children: "03" }), _jsx("h3", { children: "Page patterns" }), _jsx("p", { children: "ListPage, RecordPage and WorkspacePage are the only full-page identities." }), _jsx("a", { href: "/surfaces?kind=record&theme=light", children: "Review page surfaces \u2192" })] })] })] }), _jsxs("section", { "data-ui": "catalogue-group", children: [_jsxs("header", { "data-ui": "catalogue-group-head", children: [_jsxs("div", { children: [_jsx("p", { "data-ui": "catalogue-kicker", children: "Component library" }), _jsx("h2", { children: "Explore the system" })] }), _jsx("p", { children: "Every number below is a component contract, not a specimen card." })] }), _jsx("div", { "data-ui": "catalogue-doc-grid", children: each(componentGroups, (group) => group.id, (group) => (_jsxs("a", { "data-ui": "catalogue-doc-card", href: pathWithPreferences(`/components/${group.id}`, props.theme, props.density), children: [_jsx("span", { children: String(registrationsFor(group.id).length).padStart(2, '0') }), _jsx("h3", { children: group.name }), _jsx("p", { children: group.description })] }))) })] })] }));
 const ComponentIndex = (props) => (_jsxs(_Fragment, { children: [_jsxs("header", { "data-ui": "catalogue-hero", children: [_jsxs("div", { children: [_jsx("p", { "data-ui": "catalogue-kicker", children: "Reference / components" }), _jsxs("h1", { "data-ui": "catalogue-title", children: [String(componentRegistry.length), " public components"] }), _jsx("p", { "data-ui": "catalogue-intro", children: "Search the complete public surface by ownership group. Components may share a specimen, but every contract remains visible here." })] }), _jsx(CataloguePreferences, { path: props.path, theme: props.theme, density: props.density })] }), _jsx("div", { "data-ui": "catalogue-component-index", children: each(componentGroups, (group) => group.id, (group) => (_jsxs("section", { "data-ui": "catalogue-component-list", "aria-labelledby": `${group.id}-title`, children: [_jsxs("header", { children: [_jsx("h2", { id: `${group.id}-title`, children: group.name }), _jsx("span", { children: String(registrationsFor(group.id).length) })] }), each(registrationsFor(group.id), (registration) => registration.name, (registration) => (_jsxs("a", { "data-ui": "catalogue-component-link", href: `${pathWithPreferences(`/components/${group.id}`, props.theme, props.density)}#${registration.specimenId}`, children: [_jsx("strong", { children: registration.name }), _jsx("small", { children: registration.maturity })] })))] }))) })] }));