@kerfjs/ui 5.0.0-beta.33 → 5.0.0-beta.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -2
- package/ai/component-catalog-v2-overrides.json +10 -0
- package/ai/component-catalog-v2.json +86 -1
- package/ai/component-catalog.json +100 -2
- package/ai/public-api-signatures-v1.md +86 -3
- package/ai/skill.md +3 -2
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/dist/browser/row.js +3 -0
- package/dist/catalog.js +2 -1
- package/dist/catalog.js.map +1 -1
- package/dist/{chunk-RL6COPKF.js → chunk-7JQAQWVC.js} +6 -1
- package/dist/chunk-7JQAQWVC.js.map +1 -0
- package/dist/chunk-QHCBZTDK.js +46 -0
- package/dist/chunk-QHCBZTDK.js.map +1 -0
- package/dist/chunk-R3EBGEAW.js +46 -0
- package/dist/chunk-R3EBGEAW.js.map +1 -0
- package/dist/flex-alignment-CF8NLj7i.d.ts +4 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +6 -4
- package/dist/list.d.ts +7 -2
- package/dist/list.js +2 -1
- package/dist/row.d.ts +23 -0
- package/dist/row.js +5 -0
- package/dist/row.js.map +1 -0
- package/dist/styles/list.css +29 -0
- package/dist/styles/row.css +46 -0
- package/dist/styles/styles.css +1 -0
- package/docs/component-contract.md +3 -2
- package/docs/component-integration.md +63 -0
- package/docs/component-selection.md +6 -4
- package/docs/layout.md +26 -1
- package/docs/ux-demo.md +10 -0
- package/llms.txt +5 -2
- package/package.json +15 -3
- package/dist/chunk-RL6COPKF.js.map +0 -1
package/dist/catalog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/catalog.tsx"],"names":[],"mappings":"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","file":"catalog.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n ExternalLink,\n Moon,\n PanelLeftClose,\n PanelLeftOpen,\n Sun,\n Waypoints,\n} from 'lucide';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { List } from './list.js';\nimport { ListHeader } from './list-header.js';\nimport { ListItem } from './list-item.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Pane } from './pane.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** A reference link shown in the detail footer for the active entry. */\nexport interface CatalogResource {\n label: string;\n href: string;\n /** Optional monospace detail (e.g. a file path) shown after the label. */\n detail?: string;\n}\n\n/** A related entry offered in the detail footer's \"Related entries\" popup menu. */\nexport interface CatalogRelated {\n id: string;\n name: string;\n /** Group heading in the menu, e.g. \"Uses\" / \"Used by\". */\n group: string;\n}\n\nexport interface CatalogEntry {\n id: string;\n name: string;\n description?: string;\n /** Short metadata tags shown at the trailing edge of the sidebar row. */\n tags?: readonly string[];\n resources?: readonly CatalogResource[];\n related?: readonly CatalogRelated[];\n}\n\nexport interface CatalogSection {\n category: string;\n entries: readonly CatalogEntry[];\n}\n\n/**\n * A secondary group of sections shown below the primary sidebar sections with a\n * quieter \"ecosystem\" treatment (e.g. third-party components). Optionally\n * collapsible — the app owns `expanded` and toggles it from `wireCatalog`'s\n * `onToggleSecondary`.\n */\nexport interface CatalogSecondaryGroup {\n label: string;\n sections: readonly CatalogSection[];\n /** When true, the group's label is a disclosure toggle controlling `expanded`. */\n collapsible?: boolean;\n /** Whether the group is expanded (controlled). Ignored unless `collapsible`. */\n expanded?: boolean;\n}\n\nexport interface CatalogBrand {\n title: string;\n subtitle?: string;\n /** Logo image URL (rendered decorative). Omit for a text-only brand. */\n logoUrl?: string;\n}\n\nexport interface CatalogProps {\n brand: CatalogBrand;\n sections: readonly CatalogSection[];\n /** The controlled active entry id — the app owns this signal. */\n active: string;\n /** The rendered preview for the active entry; the app computes it from `active`. */\n content: KerfUiContent;\n /** Whether the sidebar is collapsed (controlled). */\n collapsed?: boolean;\n /** Current theme; when set, a theme toggle is shown that switches to the opposite. Omit to hide it. */\n theme?: 'light' | 'dark';\n /** Extra header controls placed before the theme toggle (each a `ToolbarControlGroup`). */\n headerActions?: KerfUiContent;\n /** A secondary \"ecosystem\" group of sections below the primary category groups. */\n secondarySections?: CatalogSecondaryGroup;\n /** Extra sidebar content below the category groups (and the secondary group). */\n sidebarFooter?: KerfUiContent;\n /** Status line content shown at the start of the detail footer. */\n status?: KerfUiContent;\n /**\n * Whether to highlight specimens' computed borders (or transparent outer\n * bounds) and non-zero margins. Pass a boolean (rather than omitting the\n * prop) when the active entry can switch between component and composition\n * previews; `wireCatalogGeometryOverlay` keeps the overlay synchronized.\n */\n geometryOverlay?: boolean;\n selectAction?: string;\n toggleSidebarAction?: string;\n toggleThemeAction?: string;\n /** Action fired by the secondary group's disclosure toggle (when collapsible). */\n toggleSecondaryAction?: string;\n className?: string;\n}\n\nfunction findEntry(\n sections: readonly CatalogSection[],\n id: string,\n): CatalogEntry | undefined {\n for (const section of sections) {\n for (const entry of section.entries) if (entry.id === id) return entry;\n }\n return undefined;\n}\n\nfunction catalogEntryTags(\n tags: readonly string[] | undefined,\n): SafeHtml | undefined {\n if (!tags?.length) return undefined;\n return (\n <span class=\"kui-catalog__tags\">\n {tags.map((tag) => (\n <span class=\"kui-catalog__tag\">{tag}</span>\n ))}\n </span>\n );\n}\n\n/**\n * Render the related entries as a `wa-dropdown` popup-menu body: a heading per\n * `group` (first-seen order) followed by that group's entries, each a navigable\n * item carrying the same `selectAction` the sidebar items use, so a chosen entry\n * routes through the one `wireCatalog` select handler.\n */\nfunction relatedMenuItems(\n related: readonly CatalogRelated[],\n selectAction: string,\n): SafeHtml[] {\n const groups: string[] = [];\n for (const entry of related)\n if (!groups.includes(entry.group)) groups.push(entry.group);\n const nodes: SafeHtml[] = [];\n groups.forEach((group, index) => {\n if (index > 0) nodes.push(<wa-divider></wa-divider>);\n nodes.push(<small class=\"kui-catalog__related-heading\">{group}</small>);\n for (const entry of related) {\n if (entry.group === group)\n nodes.push(\n <wa-dropdown-item data-action={selectAction} data-item-id={entry.id}>\n {entry.name}\n </wa-dropdown-item>,\n );\n }\n });\n return nodes;\n}\n\n/**\n * A reusable component-catalog shell: a collapsible category sidebar, a titled\n * detail stage that renders the active entry's preview, and a footer with\n * reference links and a related-entry popup menu. Built entirely from public\n * `@kerfjs/ui` primitives. Controlled and stateless — the app owns the `active`,\n * `collapsed`, and `theme` signals and computes `content` from `active` in its own\n * render; wire the sidebar/collapse/theme actions with `wireCatalog`.\n */\nexport function Catalog({\n brand,\n sections,\n active,\n content,\n collapsed = false,\n theme,\n headerActions,\n secondarySections,\n sidebarFooter,\n status,\n geometryOverlay,\n selectAction = 'catalog-select',\n toggleSidebarAction = 'catalog-toggle-sidebar',\n toggleThemeAction = 'catalog-toggle-theme',\n toggleSecondaryAction = 'catalog-toggle-secondary',\n className = '',\n}: CatalogProps) {\n const selected =\n findEntry(sections, active) ??\n (secondarySections\n ? findEntry(secondarySections.sections, active)\n : undefined);\n const name = selected?.name ?? '';\n const nextTheme = theme === 'dark' ? 'light' : 'dark';\n const resources = selected?.resources ?? [];\n const related = selected?.related ?? [];\n\n return (\n <main\n class={`kui-catalog ${className}`.trim()}\n data-component=\"catalog\"\n data-sidebar-collapsed={String(collapsed)}\n data-geometry-overlay={\n geometryOverlay === undefined ? undefined : String(geometryOverlay)\n }\n >\n <Pane\n element=\"aside\"\n className=\"kui-catalog__sidebar\"\n label={`${brand.title} catalog`}\n contentElement=\"nav\"\n contentLabel={`${brand.title} components`}\n separators={['inline-end']}\n headerClassName=\"kui-catalog__brand\"\n header={\n <>\n <Toolbar\n label={`${brand.title} catalog header`}\n dividerSides=\"\"\n leading={\n <ToolbarControlGroup\n appearance=\"borderless\"\n className=\"kui-catalog__identity\"\n >\n {brand.logoUrl ? (\n <img class=\"kui-catalog__mark\" src={brand.logoUrl} alt=\"\" />\n ) : (\n <></>\n )}\n <h1>{brand.title}</h1>\n </ToolbarControlGroup>\n }\n trailing={\n <ToolbarControlGroup appearance=\"borderless\" single>\n <button\n type=\"button\"\n data-action={toggleSidebarAction}\n aria-label={`Collapse ${brand.title} catalog`}\n >\n <LucideIcon icon={PanelLeftClose} name=\"panel-left-close\" />\n </button>\n </ToolbarControlGroup>\n }\n />\n {brand.subtitle ? (\n <p class=\"kui-catalog__subtitle\">{brand.subtitle}</p>\n ) : (\n <></>\n )}\n </>\n }\n >\n <>\n {sections.map((section) => (\n <section class=\"kui-catalog__group\">\n <ListHeader label={section.category} />\n <List className=\"kui-catalog__items\">\n {section.entries.map((entry) => (\n <ListItem\n action={selectAction}\n itemId={entry.id}\n label={entry.name}\n trailing={catalogEntryTags(entry.tags)}\n selected={active === entry.id}\n title={entry.description}\n multiline\n />\n ))}\n </List>\n </section>\n ))}\n {secondarySections ? (\n <section class=\"kui-catalog__group kui-catalog__group--secondary\">\n {secondarySections.collapsible ? (\n <ListHeader\n label={secondarySections.label}\n toggle\n expanded={Boolean(secondarySections.expanded)}\n action={toggleSecondaryAction}\n />\n ) : (\n <ListHeader label={secondarySections.label} />\n )}\n {!secondarySections.collapsible || secondarySections.expanded ? (\n <div class=\"kui-catalog__secondary\" data-catalog-secondary>\n {secondarySections.sections.map((section) => (\n <section class=\"kui-catalog__secondary-group\">\n <h3 class=\"kui-catalog__secondary-heading\">\n {section.category}\n </h3>\n <List className=\"kui-catalog__items\">\n {section.entries.map((entry) => (\n <ListItem\n action={selectAction}\n itemId={entry.id}\n label={entry.name}\n trailing={catalogEntryTags(entry.tags)}\n selected={active === entry.id}\n title={entry.description}\n multiline\n />\n ))}\n </List>\n </section>\n ))}\n </div>\n ) : (\n <></>\n )}\n </section>\n ) : (\n <></>\n )}\n {sidebarFooter ?? <></>}\n </>\n </Pane>\n <Pane\n element=\"article\"\n className=\"kui-catalog__detail\"\n contentElement=\"section\"\n contentLabel={`${name} preview`}\n contentClassName=\"kui-catalog__stage\"\n headerClassName=\"kui-catalog__header\"\n header={\n <>\n <Toolbar\n label={`${name} header`}\n dividerSides=\"\"\n leading={\n <>\n {collapsed ? (\n <ToolbarControlGroup appearance=\"borderless\" single>\n <button\n type=\"button\"\n data-action={toggleSidebarAction}\n aria-label={`Expand ${brand.title} catalog`}\n >\n <LucideIcon\n icon={PanelLeftOpen}\n name=\"panel-left-open\"\n />\n </button>\n </ToolbarControlGroup>\n ) : (\n <></>\n )}\n <ToolbarControlGroup\n appearance=\"borderless\"\n className=\"kui-catalog__title\"\n >\n <h2>{name}</h2>\n </ToolbarControlGroup>\n </>\n }\n trailing={\n <div class=\"kui-catalog__header-actions\">\n {headerActions}\n {theme ? (\n <ToolbarControlGroup\n className=\"kui-catalog__settings\"\n label=\"Catalog display\"\n >\n <button\n type=\"button\"\n data-action={toggleThemeAction}\n aria-label={`Use ${nextTheme} theme`}\n data-theme-preview={theme}\n >\n {nextTheme === 'dark' ? (\n <LucideIcon icon={Moon} name=\"moon\" />\n ) : (\n <LucideIcon icon={Sun} name=\"sun\" />\n )}\n <span>{nextTheme === 'dark' ? 'Dark' : 'Light'}</span>\n </button>\n </ToolbarControlGroup>\n ) : (\n <></>\n )}\n </div>\n }\n />\n {selected?.description ? (\n <p class=\"kui-catalog__description kui-content-item\">\n {selected.description}\n </p>\n ) : (\n <></>\n )}\n </>\n }\n footerClassName=\"kui-catalog__footer\"\n footer={\n <>\n {status ? <div class=\"kui-catalog__status\">{status}</div> : <></>}\n <Toolbar\n label={`${name} resources`}\n dividerSides=\"\"\n leading={\n resources.length > 0 ? (\n <nav\n class=\"kui-catalog__resources\"\n aria-label={`${name} resources`}\n >\n <ToolbarControlGroup\n className=\"kui-catalog__resource-group\"\n label={`${name} resources`}\n >\n {resources.map((resource) => (\n <a\n class=\"kui-catalog__resource\"\n href={resource.href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n aria-label={`${name}: ${resource.label} (opens in new tab)`}\n >\n <LucideIcon\n icon={ExternalLink}\n name=\"external-link\"\n />\n <span>{resource.label}</span>\n {resource.detail ? (\n <code>{resource.detail}</code>\n ) : (\n <></>\n )}\n </a>\n ))}\n </ToolbarControlGroup>\n </nav>\n ) : (\n <></>\n )\n }\n trailing={\n related.length > 0 ? (\n <div class=\"kui-catalog__related\" data-catalog-related>\n <ToolbarControlGroup\n single\n className=\"kui-catalog__related-group\"\n label=\"Related entries\"\n >\n <wa-dropdown\n class=\"kui-catalog__related-menu\"\n placement=\"top-end\"\n data-key={`kui-catalog-related-${active}`}\n data-morph-skip-children\n >\n <wa-button slot=\"trigger\" appearance=\"plain\" with-caret>\n <span class=\"kui-catalog__related-trigger\">\n <LucideIcon icon={Waypoints} name=\"waypoints\" />\n <span class=\"kui-catalog__related-label\">\n Components\n </span>\n </span>\n </wa-button>\n {relatedMenuItems(related, selectAction)}\n </wa-dropdown>\n </ToolbarControlGroup>\n </div>\n ) : (\n <></>\n )\n }\n />\n </>\n }\n >\n <div class=\"kui-catalog__canvas\">\n {content}\n {geometryOverlay !== undefined ? (\n <div\n class=\"kui-catalog__geometry-overlay\"\n data-catalog-geometry-overlay\n data-morph-skip-children\n aria-hidden=\"true\"\n />\n ) : (\n <></>\n )}\n </div>\n </Pane>\n </main>\n );\n}\n\n/**\n * How a {@link CatalogExample}'s content aligns its visible left edge with the\n * example's `ListHeader` label (which sits 16px in — 8px title + 8px label):\n * - `'glyph'` — a bare glyph/text specimen with no inline geometry insets the full 16px.\n * - `'inline-control'` — a control that already carries ~8px of its own inline padding insets 8px so its content lands on the same line.\n * - `'none'` — a content-item / composition that owns its geometry and already aligns; no inset (default).\n */\nexport type CatalogExampleAlign = 'glyph' | 'inline-control' | 'none';\n\nconst catalogExampleProtectedAttributes = new Set([\n 'data-catalog-example',\n 'data-catalog-example-stack',\n 'data-catalog-example-label',\n 'data-catalog-example-note',\n 'data-align',\n]);\n\ntype CatalogExampleRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-catalog-example'?: never;\n 'data-catalog-example-stack'?: never;\n 'data-catalog-example-label'?: never;\n 'data-catalog-example-note'?: never;\n 'data-align'?: never;\n }\n>;\n\ntype CatalogExampleStackRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-catalog-example'?: never;\n 'data-catalog-example-stack'?: never;\n 'data-catalog-example-label'?: never;\n 'data-catalog-example-note'?: never;\n 'data-align'?: never;\n }\n>;\n\nexport interface CatalogExampleProps {\n /** The example's label, shown as a `ListHeader` above the specimen. Omit for a bare specimen. */\n label?: string;\n /** Optional explanatory note between the label and the specimen. */\n note?: SafeHtml | string;\n /** Alignment inset for the specimen — see {@link CatalogExampleAlign}. Default `'none'`. */\n align?: CatalogExampleAlign;\n /** Safe authoring `data-*` metadata for the rendered section. Helper-owned structural attributes remain protected. */\n rootAttributes?: CatalogExampleRootAttributes;\n className?: string;\n children?: KerfUiContent;\n}\n\n/**\n * One labeled example in a catalog preview: a `ListHeader` label, an optional\n * note, and the specimen. `align` insets the specimen so its visible left edge\n * lines up with the label text, encoding the catalog's alignment rules as a\n * first-class prop instead of per-demo CSS. The inset is published as the\n * `--kui-catalog-example-align` custom property so a debug overlay can exclude it\n * from a specimen's measured margin.\n */\nexport function CatalogExample({\n label,\n note,\n align = 'none',\n rootAttributes = {},\n className = '',\n children,\n}: CatalogExampleProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n catalogExampleProtectedAttributes,\n );\n return (\n <section\n {...safeRootAttributes}\n class={`kui-catalog-example ${className}`.trim()}\n data-catalog-example\n data-align={align}\n >\n {label !== undefined ? (\n <ListHeader\n label={label}\n rootAttributes={{ 'data-catalog-example-label': '' }}\n />\n ) : (\n <></>\n )}\n {note !== undefined ? (\n <p class=\"kui-catalog-example__note\" data-catalog-example-note>\n {note}\n </p>\n ) : (\n <></>\n )}\n {children}\n </section>\n );\n}\n\nexport interface CatalogExampleStackProps {\n /** Accessible label for the stack region. */\n label?: string;\n /** Safe authoring `data-*` metadata for the rendered stack. Helper-owned structural attributes remain protected. */\n rootAttributes?: CatalogExampleStackRootAttributes;\n className?: string;\n children?: KerfUiContent;\n}\n\n/**\n * A vertically-stacked group of {@link CatalogExample}s with the catalog's\n * example rhythm. The semantic `section` becomes a named `region` when `label`\n * is supplied; an unlabeled stack remains an ordinary grouping.\n */\nexport function CatalogExampleStack({\n label,\n rootAttributes = {},\n className = '',\n children,\n}: CatalogExampleStackProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n catalogExampleProtectedAttributes,\n );\n return (\n <section\n {...safeRootAttributes}\n class={`kui-catalog-example-stack ${className}`.trim()}\n data-catalog-example-stack\n aria-label={label}\n >\n {children}\n </section>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/catalog.tsx"],"names":[],"mappings":"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","file":"catalog.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n ExternalLink,\n Moon,\n PanelLeftClose,\n PanelLeftOpen,\n Sun,\n Waypoints,\n} from 'lucide';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { List } from './list.js';\nimport { ListHeader } from './list-header.js';\nimport { ListItem } from './list-item.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Pane } from './pane.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** A reference link shown in the detail footer for the active entry. */\nexport interface CatalogResource {\n label: string;\n href: string;\n /** Optional monospace detail (e.g. a file path) shown after the label. */\n detail?: string;\n}\n\n/** A related entry offered in the detail footer's \"Related entries\" popup menu. */\nexport interface CatalogRelated {\n id: string;\n name: string;\n /** Group heading in the menu, e.g. \"Uses\" / \"Used by\". */\n group: string;\n}\n\nexport interface CatalogEntry {\n id: string;\n name: string;\n description?: string;\n /** Short metadata tags shown at the trailing edge of the sidebar row. */\n tags?: readonly string[];\n resources?: readonly CatalogResource[];\n related?: readonly CatalogRelated[];\n}\n\nexport interface CatalogSection {\n category: string;\n entries: readonly CatalogEntry[];\n}\n\n/**\n * A secondary group of sections shown below the primary sidebar sections with a\n * quieter \"ecosystem\" treatment (e.g. third-party components). Optionally\n * collapsible — the app owns `expanded` and toggles it from `wireCatalog`'s\n * `onToggleSecondary`.\n */\nexport interface CatalogSecondaryGroup {\n label: string;\n sections: readonly CatalogSection[];\n /** When true, the group's label is a disclosure toggle controlling `expanded`. */\n collapsible?: boolean;\n /** Whether the group is expanded (controlled). Ignored unless `collapsible`. */\n expanded?: boolean;\n}\n\nexport interface CatalogBrand {\n title: string;\n subtitle?: string;\n /** Logo image URL (rendered decorative). Omit for a text-only brand. */\n logoUrl?: string;\n}\n\nexport interface CatalogProps {\n brand: CatalogBrand;\n sections: readonly CatalogSection[];\n /** The controlled active entry id — the app owns this signal. */\n active: string;\n /** The rendered preview for the active entry; the app computes it from `active`. */\n content: KerfUiContent;\n /** Whether the sidebar is collapsed (controlled). */\n collapsed?: boolean;\n /** Current theme; when set, a theme toggle is shown that switches to the opposite. Omit to hide it. */\n theme?: 'light' | 'dark';\n /** Extra header controls placed before the theme toggle (each a `ToolbarControlGroup`). */\n headerActions?: KerfUiContent;\n /** A secondary \"ecosystem\" group of sections below the primary category groups. */\n secondarySections?: CatalogSecondaryGroup;\n /** Extra sidebar content below the category groups (and the secondary group). */\n sidebarFooter?: KerfUiContent;\n /** Status line content shown at the start of the detail footer. */\n status?: KerfUiContent;\n /**\n * Whether to highlight specimens' computed borders (or transparent outer\n * bounds) and non-zero margins. Pass a boolean (rather than omitting the\n * prop) when the active entry can switch between component and composition\n * previews; `wireCatalogGeometryOverlay` keeps the overlay synchronized.\n */\n geometryOverlay?: boolean;\n selectAction?: string;\n toggleSidebarAction?: string;\n toggleThemeAction?: string;\n /** Action fired by the secondary group's disclosure toggle (when collapsible). */\n toggleSecondaryAction?: string;\n className?: string;\n}\n\nfunction findEntry(\n sections: readonly CatalogSection[],\n id: string,\n): CatalogEntry | undefined {\n for (const section of sections) {\n for (const entry of section.entries) if (entry.id === id) return entry;\n }\n return undefined;\n}\n\nfunction catalogEntryTags(\n tags: readonly string[] | undefined,\n): SafeHtml | undefined {\n if (!tags?.length) return undefined;\n return (\n <span class=\"kui-catalog__tags\">\n {tags.map((tag) => (\n <span class=\"kui-catalog__tag\">{tag}</span>\n ))}\n </span>\n );\n}\n\n/**\n * Render the related entries as a `wa-dropdown` popup-menu body: a heading per\n * `group` (first-seen order) followed by that group's entries, each a navigable\n * item carrying the same `selectAction` the sidebar items use, so a chosen entry\n * routes through the one `wireCatalog` select handler.\n */\nfunction relatedMenuItems(\n related: readonly CatalogRelated[],\n selectAction: string,\n): SafeHtml[] {\n const groups: string[] = [];\n for (const entry of related)\n if (!groups.includes(entry.group)) groups.push(entry.group);\n const nodes: SafeHtml[] = [];\n groups.forEach((group, index) => {\n if (index > 0) nodes.push(<wa-divider></wa-divider>);\n nodes.push(<small class=\"kui-catalog__related-heading\">{group}</small>);\n for (const entry of related) {\n if (entry.group === group)\n nodes.push(\n <wa-dropdown-item data-action={selectAction} data-item-id={entry.id}>\n {entry.name}\n </wa-dropdown-item>,\n );\n }\n });\n return nodes;\n}\n\n/**\n * A reusable component-catalog shell: a collapsible category sidebar, a titled\n * detail stage that renders the active entry's preview, and a footer with\n * reference links and a related-entry popup menu. Built entirely from public\n * `@kerfjs/ui` primitives. Controlled and stateless — the app owns the `active`,\n * `collapsed`, and `theme` signals and computes `content` from `active` in its own\n * render; wire the sidebar/collapse/theme actions with `wireCatalog`.\n */\nexport function Catalog({\n brand,\n sections,\n active,\n content,\n collapsed = false,\n theme,\n headerActions,\n secondarySections,\n sidebarFooter,\n status,\n geometryOverlay,\n selectAction = 'catalog-select',\n toggleSidebarAction = 'catalog-toggle-sidebar',\n toggleThemeAction = 'catalog-toggle-theme',\n toggleSecondaryAction = 'catalog-toggle-secondary',\n className = '',\n}: CatalogProps) {\n const selected =\n findEntry(sections, active) ??\n (secondarySections\n ? findEntry(secondarySections.sections, active)\n : undefined);\n const name = selected?.name ?? '';\n const nextTheme = theme === 'dark' ? 'light' : 'dark';\n const resources = selected?.resources ?? [];\n const related = selected?.related ?? [];\n\n return (\n <main\n class={`kui-catalog ${className}`.trim()}\n data-component=\"catalog\"\n data-sidebar-collapsed={String(collapsed)}\n data-geometry-overlay={\n geometryOverlay === undefined ? undefined : String(geometryOverlay)\n }\n >\n <Pane\n element=\"aside\"\n className=\"kui-catalog__sidebar\"\n label={`${brand.title} catalog`}\n contentElement=\"nav\"\n contentLabel={`${brand.title} components`}\n separators={['inline-end']}\n headerClassName=\"kui-catalog__brand\"\n header={\n <>\n <Toolbar\n label={`${brand.title} catalog header`}\n dividerSides=\"\"\n leading={\n <ToolbarControlGroup\n appearance=\"borderless\"\n className=\"kui-catalog__identity\"\n >\n {brand.logoUrl ? (\n <img class=\"kui-catalog__mark\" src={brand.logoUrl} alt=\"\" />\n ) : (\n <></>\n )}\n <h1>{brand.title}</h1>\n </ToolbarControlGroup>\n }\n trailing={\n <ToolbarControlGroup appearance=\"borderless\" single>\n <button\n type=\"button\"\n data-action={toggleSidebarAction}\n aria-label={`Collapse ${brand.title} catalog`}\n >\n <LucideIcon icon={PanelLeftClose} name=\"panel-left-close\" />\n </button>\n </ToolbarControlGroup>\n }\n />\n {brand.subtitle ? (\n <p class=\"kui-catalog__subtitle\">{brand.subtitle}</p>\n ) : (\n <></>\n )}\n </>\n }\n >\n <>\n {sections.map((section) => (\n <section class=\"kui-catalog__group\">\n <ListHeader label={section.category} />\n <List className=\"kui-catalog__items\">\n {section.entries.map((entry) => (\n <ListItem\n action={selectAction}\n itemId={entry.id}\n label={entry.name}\n trailing={catalogEntryTags(entry.tags)}\n selected={active === entry.id}\n title={entry.description}\n multiline\n />\n ))}\n </List>\n </section>\n ))}\n {secondarySections ? (\n <section class=\"kui-catalog__group kui-catalog__group--secondary\">\n {secondarySections.collapsible ? (\n <ListHeader\n label={secondarySections.label}\n toggle\n expanded={Boolean(secondarySections.expanded)}\n action={toggleSecondaryAction}\n />\n ) : (\n <ListHeader label={secondarySections.label} />\n )}\n {!secondarySections.collapsible || secondarySections.expanded ? (\n <div class=\"kui-catalog__secondary\" data-catalog-secondary>\n {secondarySections.sections.map((section) => (\n <section class=\"kui-catalog__secondary-group\">\n <h3 class=\"kui-catalog__secondary-heading\">\n {section.category}\n </h3>\n <List className=\"kui-catalog__items\">\n {section.entries.map((entry) => (\n <ListItem\n action={selectAction}\n itemId={entry.id}\n label={entry.name}\n trailing={catalogEntryTags(entry.tags)}\n selected={active === entry.id}\n title={entry.description}\n multiline\n />\n ))}\n </List>\n </section>\n ))}\n </div>\n ) : (\n <></>\n )}\n </section>\n ) : (\n <></>\n )}\n {sidebarFooter ?? <></>}\n </>\n </Pane>\n <Pane\n element=\"article\"\n className=\"kui-catalog__detail\"\n contentElement=\"section\"\n contentLabel={`${name} preview`}\n contentClassName=\"kui-catalog__stage\"\n headerClassName=\"kui-catalog__header\"\n header={\n <>\n <Toolbar\n label={`${name} header`}\n dividerSides=\"\"\n leading={\n <>\n {collapsed ? (\n <ToolbarControlGroup appearance=\"borderless\" single>\n <button\n type=\"button\"\n data-action={toggleSidebarAction}\n aria-label={`Expand ${brand.title} catalog`}\n >\n <LucideIcon\n icon={PanelLeftOpen}\n name=\"panel-left-open\"\n />\n </button>\n </ToolbarControlGroup>\n ) : (\n <></>\n )}\n <ToolbarControlGroup\n appearance=\"borderless\"\n className=\"kui-catalog__title\"\n >\n <h2>{name}</h2>\n </ToolbarControlGroup>\n </>\n }\n trailing={\n <div class=\"kui-catalog__header-actions\">\n {headerActions}\n {theme ? (\n <ToolbarControlGroup\n className=\"kui-catalog__settings\"\n label=\"Catalog display\"\n >\n <button\n type=\"button\"\n data-action={toggleThemeAction}\n aria-label={`Use ${nextTheme} theme`}\n data-theme-preview={theme}\n >\n {nextTheme === 'dark' ? (\n <LucideIcon icon={Moon} name=\"moon\" />\n ) : (\n <LucideIcon icon={Sun} name=\"sun\" />\n )}\n <span>{nextTheme === 'dark' ? 'Dark' : 'Light'}</span>\n </button>\n </ToolbarControlGroup>\n ) : (\n <></>\n )}\n </div>\n }\n />\n {selected?.description ? (\n <p class=\"kui-catalog__description kui-content-item\">\n {selected.description}\n </p>\n ) : (\n <></>\n )}\n </>\n }\n footerClassName=\"kui-catalog__footer\"\n footer={\n <>\n {status ? <div class=\"kui-catalog__status\">{status}</div> : <></>}\n <Toolbar\n label={`${name} resources`}\n dividerSides=\"\"\n leading={\n resources.length > 0 ? (\n <nav\n class=\"kui-catalog__resources\"\n aria-label={`${name} resources`}\n >\n <ToolbarControlGroup\n className=\"kui-catalog__resource-group\"\n label={`${name} resources`}\n >\n {resources.map((resource) => (\n <a\n class=\"kui-catalog__resource\"\n href={resource.href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n aria-label={`${name}: ${resource.label} (opens in new tab)`}\n >\n <LucideIcon\n icon={ExternalLink}\n name=\"external-link\"\n />\n <span>{resource.label}</span>\n {resource.detail ? (\n <code>{resource.detail}</code>\n ) : (\n <></>\n )}\n </a>\n ))}\n </ToolbarControlGroup>\n </nav>\n ) : (\n <></>\n )\n }\n trailing={\n related.length > 0 ? (\n <div class=\"kui-catalog__related\" data-catalog-related>\n <ToolbarControlGroup\n single\n className=\"kui-catalog__related-group\"\n label=\"Related entries\"\n >\n <wa-dropdown\n class=\"kui-catalog__related-menu\"\n placement=\"top-end\"\n data-key={`kui-catalog-related-${active}`}\n data-morph-skip-children\n >\n <wa-button slot=\"trigger\" appearance=\"plain\" with-caret>\n <span class=\"kui-catalog__related-trigger\">\n <LucideIcon icon={Waypoints} name=\"waypoints\" />\n <span class=\"kui-catalog__related-label\">\n Components\n </span>\n </span>\n </wa-button>\n {relatedMenuItems(related, selectAction)}\n </wa-dropdown>\n </ToolbarControlGroup>\n </div>\n ) : (\n <></>\n )\n }\n />\n </>\n }\n >\n <div class=\"kui-catalog__canvas\">\n {content}\n {geometryOverlay !== undefined ? (\n <div\n class=\"kui-catalog__geometry-overlay\"\n data-catalog-geometry-overlay\n data-morph-skip-children\n aria-hidden=\"true\"\n />\n ) : (\n <></>\n )}\n </div>\n </Pane>\n </main>\n );\n}\n\n/**\n * How a {@link CatalogExample}'s content aligns its visible left edge with the\n * example's `ListHeader` label (which sits 16px in — 8px title + 8px label):\n * - `'glyph'` — a bare glyph/text specimen with no inline geometry insets the full 16px.\n * - `'inline-control'` — a control that already carries ~8px of its own inline padding insets 8px so its content lands on the same line.\n * - `'none'` — a content-item / composition that owns its geometry and already aligns; no inset (default).\n */\nexport type CatalogExampleAlign = 'glyph' | 'inline-control' | 'none';\n\nconst catalogExampleProtectedAttributes = new Set([\n 'data-catalog-example',\n 'data-catalog-example-stack',\n 'data-catalog-example-label',\n 'data-catalog-example-note',\n 'data-align',\n]);\n\ntype CatalogExampleRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-catalog-example'?: never;\n 'data-catalog-example-stack'?: never;\n 'data-catalog-example-label'?: never;\n 'data-catalog-example-note'?: never;\n 'data-align'?: never;\n }\n>;\n\ntype CatalogExampleStackRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-catalog-example'?: never;\n 'data-catalog-example-stack'?: never;\n 'data-catalog-example-label'?: never;\n 'data-catalog-example-note'?: never;\n 'data-align'?: never;\n }\n>;\n\nexport interface CatalogExampleProps {\n /** The example's label, shown as a `ListHeader` above the specimen. Omit for a bare specimen. */\n label?: string;\n /** Optional explanatory note between the label and the specimen. */\n note?: SafeHtml | string;\n /** Alignment inset for the specimen — see {@link CatalogExampleAlign}. Default `'none'`. */\n align?: CatalogExampleAlign;\n /** Safe authoring `data-*` metadata for the rendered section. Helper-owned structural attributes remain protected. */\n rootAttributes?: CatalogExampleRootAttributes;\n className?: string;\n children?: KerfUiContent;\n}\n\n/**\n * One labeled example in a catalog preview: a `ListHeader` label, an optional\n * note, and the specimen. `align` insets the specimen so its visible left edge\n * lines up with the label text, encoding the catalog's alignment rules as a\n * first-class prop instead of per-demo CSS. The inset is published as the\n * `--kui-catalog-example-align` custom property so a debug overlay can exclude it\n * from a specimen's measured margin.\n */\nexport function CatalogExample({\n label,\n note,\n align = 'none',\n rootAttributes = {},\n className = '',\n children,\n}: CatalogExampleProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n catalogExampleProtectedAttributes,\n );\n return (\n <section\n {...safeRootAttributes}\n class={`kui-catalog-example ${className}`.trim()}\n data-catalog-example\n data-align={align}\n >\n {label !== undefined ? (\n <ListHeader\n label={label}\n rootAttributes={{ 'data-catalog-example-label': '' }}\n />\n ) : (\n <></>\n )}\n {note !== undefined ? (\n <p class=\"kui-catalog-example__note\" data-catalog-example-note>\n {note}\n </p>\n ) : (\n <></>\n )}\n {children}\n </section>\n );\n}\n\nexport interface CatalogExampleStackProps {\n /** Accessible label for the stack region. */\n label?: string;\n /** Safe authoring `data-*` metadata for the rendered stack. Helper-owned structural attributes remain protected. */\n rootAttributes?: CatalogExampleStackRootAttributes;\n className?: string;\n children?: KerfUiContent;\n}\n\n/**\n * A vertically-stacked group of {@link CatalogExample}s with the catalog's\n * example rhythm. The semantic `section` becomes a named `region` when `label`\n * is supplied; an unlabeled stack remains an ordinary grouping.\n */\nexport function CatalogExampleStack({\n label,\n rootAttributes = {},\n className = '',\n children,\n}: CatalogExampleStackProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n catalogExampleProtectedAttributes,\n );\n return (\n <section\n {...safeRootAttributes}\n class={`kui-catalog-example-stack ${className}`.trim()}\n data-catalog-example-stack\n aria-label={label}\n >\n {children}\n </section>\n );\n}\n"]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { verticalAlignment, horizontalAlignment } from './chunk-R3EBGEAW.js';
|
|
1
2
|
import { space } from './chunk-OL4TC3U2.js';
|
|
2
3
|
import { jsx } from 'kerfjs/jsx-runtime';
|
|
3
4
|
|
|
@@ -14,6 +15,8 @@ function List({
|
|
|
14
15
|
children,
|
|
15
16
|
gap = false,
|
|
16
17
|
flex = false,
|
|
18
|
+
hAlign = "full",
|
|
19
|
+
vAlign = "top",
|
|
17
20
|
scrollable = false,
|
|
18
21
|
dividerSides = "",
|
|
19
22
|
className = ""
|
|
@@ -31,6 +34,8 @@ function List({
|
|
|
31
34
|
"data-component": "list",
|
|
32
35
|
"data-gap": String(Boolean(gap)),
|
|
33
36
|
"data-flex": String(Boolean(flex)),
|
|
37
|
+
"data-h-align": horizontalAlignment(hAlign),
|
|
38
|
+
"data-v-align": verticalAlignment(vAlign),
|
|
34
39
|
"data-scrollable": String(scrollable),
|
|
35
40
|
"divider-sides": dividerSides || void 0,
|
|
36
41
|
style: style || void 0,
|
|
@@ -41,4 +46,4 @@ function List({
|
|
|
41
46
|
|
|
42
47
|
export { List };
|
|
43
48
|
|
|
44
|
-
//# sourceMappingURL=chunk-
|
|
49
|
+
//# sourceMappingURL=chunk-7JQAQWVC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/list.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAoBO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,GAAA,GAAM,KAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,KAAA;AAAA,EACT,UAAA,GAAa,KAAA;AAAA,EACb,YAAA,GAAe,EAAA;AAAA,EACf,SAAA,GAAY;AACd,CAAA,EAAc;AACZ,EAAA,MAAM,QAAA,GACJ,GAAA,KAAQ,IAAA,GACJ,qBAAA,GACA,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACpC,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA,IAAO,MAAA;AACf,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,QAAA,GAAW,CAAA,gBAAA,EAAmB,QAAQ,CAAA,CAAA,GAAK,EAAA;AAAA,IAC3C,SAAA,GAAY,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,GAAK;AAAA,GAChD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACpC,gBAAA,EAAe,MAAA;AAAA,MACf,UAAA,EAAU,MAAA,CAAO,OAAA,CAAQ,GAAG,CAAC,CAAA;AAAA,MAC7B,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,iBAAA,EAAiB,OAAO,UAAU,CAAA;AAAA,MAClC,iBAAe,YAAA,IAAgB,MAAA;AAAA,MAC/B,OAAO,KAAA,IAAS,MAAA;AAAA,MAEf;AAAA;AAAA,GACH;AAEJ","file":"chunk-7JQAQWVC.js","sourcesContent":["import {\n type CssFlex,\n type CssFlexKeyword,\n type CssLength,\n space,\n type UiSpaceName,\n} from './css-values.js';\nimport type { DividerSides } from './divider-sides.js';\nimport {\n type HorizontalAlignment,\n horizontalAlignment,\n type VerticalAlignment,\n verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n 'none',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n];\n\nexport interface ListProps {\n children?: KerfUiContent;\n /** Use the standard item gap, a named UI spacing token, or a typed CSS length. Defaults to no gap. */\n gap?: boolean | UiSpaceName | CssLength;\n /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n flex?: boolean | CssFlexKeyword | CssFlex;\n /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */\n hAlign?: HorizontalAlignment;\n /** Vertical distribution. Defaults to top. */\n vAlign?: VerticalAlignment;\n /** Own vertical scrolling and overscroll containment. */\n scrollable?: boolean;\n /** Physical divider edges in canonical top/right/bottom/left order. */\n dividerSides?: DividerSides;\n className?: string;\n}\n\n/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */\nexport function List({\n children,\n gap = false,\n flex = false,\n hAlign = 'full',\n vAlign = 'top',\n scrollable = false,\n dividerSides = '',\n className = '',\n}: ListProps) {\n const gapValue =\n gap === true\n ? 'var(--kui-list-gap)'\n : spaceNames.includes(gap as UiSpaceName)\n ? space(gap as UiSpaceName)\n : gap || undefined;\n const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n const style = [\n gapValue ? `--_kui-list-gap:${gapValue}` : '',\n flexValue ? `--_kui-list-flex:${flexValue}` : '',\n ]\n .filter(Boolean)\n .join(';');\n\n return (\n <div\n class={`kui-list ${className}`.trim()}\n data-component=\"list\"\n data-gap={String(Boolean(gap))}\n data-flex={String(Boolean(flex))}\n data-h-align={horizontalAlignment(hAlign)}\n data-v-align={verticalAlignment(vAlign)}\n data-scrollable={String(scrollable)}\n divider-sides={dividerSides || undefined}\n style={style || undefined}\n >\n {children}\n </div>\n );\n}\n\nexport type {\n CssFlex,\n CssFlexKeyword,\n CssLength,\n UiSpaceName,\n} from './css-values.js';\nexport type { DividerSides } from './divider-sides.js';\nexport type {\n HorizontalAlignment,\n VerticalAlignment,\n} from './flex-alignment.js';\n"]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { verticalAlignment, horizontalAlignment } from './chunk-R3EBGEAW.js';
|
|
2
|
+
import { space } from './chunk-OL4TC3U2.js';
|
|
3
|
+
import { jsx } from 'kerfjs/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
var spaceNames = [
|
|
6
|
+
"none",
|
|
7
|
+
"2xs",
|
|
8
|
+
"xs",
|
|
9
|
+
"s",
|
|
10
|
+
"m",
|
|
11
|
+
"l",
|
|
12
|
+
"xl"
|
|
13
|
+
];
|
|
14
|
+
function Row({
|
|
15
|
+
children,
|
|
16
|
+
hAlign = "left",
|
|
17
|
+
vAlign = "full",
|
|
18
|
+
gap = "xs",
|
|
19
|
+
flex = false,
|
|
20
|
+
wrap = false,
|
|
21
|
+
className = ""
|
|
22
|
+
}) {
|
|
23
|
+
const gapValue = spaceNames.includes(gap) ? space(gap) : gap;
|
|
24
|
+
const flexValue = flex === true ? "1 1 auto" : flex || void 0;
|
|
25
|
+
const style = [
|
|
26
|
+
`--_kui-row-gap:${gapValue}`,
|
|
27
|
+
flexValue ? `--_kui-row-flex:${flexValue}` : ""
|
|
28
|
+
].filter(Boolean).join(";");
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
class: `kui-row ${className}`.trim(),
|
|
33
|
+
"data-component": "row",
|
|
34
|
+
"data-h-align": horizontalAlignment(hAlign),
|
|
35
|
+
"data-v-align": verticalAlignment(vAlign),
|
|
36
|
+
"data-flex": String(Boolean(flex)),
|
|
37
|
+
"data-wrap": String(wrap),
|
|
38
|
+
style,
|
|
39
|
+
children
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export { Row };
|
|
45
|
+
|
|
46
|
+
//# sourceMappingURL=chunk-QHCBZTDK.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/row.tsx"],"names":[],"mappings":";;;;AAeA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAkBO,SAAS,GAAA,CAAI;AAAA,EAClB,QAAA;AAAA,EACA,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,MAAA;AAAA,EACT,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY;AACd,CAAA,EAAa;AACX,EAAA,MAAM,WAAW,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACnD,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,kBAAkB,QAAQ,CAAA,CAAA;AAAA,IAC1B,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK;AAAA,GAC/C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnC,gBAAA,EAAe,KAAA;AAAA,MACf,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,KAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-QHCBZTDK.js","sourcesContent":["import {\n type CssFlex,\n type CssFlexKeyword,\n type CssLength,\n space,\n type UiSpaceName,\n} from './css-values.js';\nimport {\n type HorizontalAlignment,\n horizontalAlignment,\n type VerticalAlignment,\n verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n 'none',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n];\n\nexport interface RowProps {\n children?: KerfUiContent;\n /** Horizontal distribution. Defaults to left. */\n hAlign?: HorizontalAlignment;\n /** Vertical alignment and wrapped-line distribution. Defaults to full. */\n vAlign?: VerticalAlignment;\n /** A named UI spacing token or typed CSS length. Defaults to xs. */\n gap?: UiSpaceName | CssLength;\n /** Allow this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n flex?: boolean | CssFlexKeyword | CssFlex;\n /** Allow children to wrap onto additional lines. */\n wrap?: boolean;\n className?: string;\n}\n\n/** A horizontal flex row with explicit physical-axis alignment and spacing. */\nexport function Row({\n children,\n hAlign = 'left',\n vAlign = 'full',\n gap = 'xs',\n flex = false,\n wrap = false,\n className = '',\n}: RowProps) {\n const gapValue = spaceNames.includes(gap as UiSpaceName)\n ? space(gap as UiSpaceName)\n : gap;\n const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n const style = [\n `--_kui-row-gap:${gapValue}`,\n flexValue ? `--_kui-row-flex:${flexValue}` : '',\n ]\n .filter(Boolean)\n .join(';');\n\n return (\n <div\n class={`kui-row ${className}`.trim()}\n data-component=\"row\"\n data-h-align={horizontalAlignment(hAlign)}\n data-v-align={verticalAlignment(vAlign)}\n data-flex={String(Boolean(flex))}\n data-wrap={String(wrap)}\n style={style}\n >\n {children}\n </div>\n );\n}\n\nexport type {\n CssFlex,\n CssFlexKeyword,\n CssLength,\n UiSpaceName,\n} from './css-values.js';\nexport type {\n HorizontalAlignment,\n VerticalAlignment,\n} from './flex-alignment.js';\n"]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
// src/flex-alignment.ts
|
|
2
|
+
function horizontalAlignment(value) {
|
|
3
|
+
switch (value) {
|
|
4
|
+
case "left":
|
|
5
|
+
case "l":
|
|
6
|
+
case "flex-start":
|
|
7
|
+
return "left";
|
|
8
|
+
case "center":
|
|
9
|
+
case "c":
|
|
10
|
+
case "space-around":
|
|
11
|
+
return "center";
|
|
12
|
+
case "right":
|
|
13
|
+
case "r":
|
|
14
|
+
case "flex-end":
|
|
15
|
+
return "right";
|
|
16
|
+
case "full":
|
|
17
|
+
case "f":
|
|
18
|
+
case "space-between":
|
|
19
|
+
return "full";
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
function verticalAlignment(value) {
|
|
23
|
+
switch (value) {
|
|
24
|
+
case "top":
|
|
25
|
+
case "t":
|
|
26
|
+
case "flex-start":
|
|
27
|
+
return "top";
|
|
28
|
+
case "middle":
|
|
29
|
+
case "m":
|
|
30
|
+
case "c":
|
|
31
|
+
case "space-around":
|
|
32
|
+
return "middle";
|
|
33
|
+
case "bottom":
|
|
34
|
+
case "b":
|
|
35
|
+
case "flex-end":
|
|
36
|
+
return "bottom";
|
|
37
|
+
case "full":
|
|
38
|
+
case "f":
|
|
39
|
+
case "space-between":
|
|
40
|
+
return "full";
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export { horizontalAlignment, verticalAlignment };
|
|
45
|
+
|
|
46
|
+
//# sourceMappingURL=chunk-R3EBGEAW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/flex-alignment.ts"],"names":[],"mappings":";AAgCO,SAAS,oBACd,KAAA,EAC8B;AAC9B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,MAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,OAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,OAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA;AAEb;AAEO,SAAS,kBACd,KAAA,EAC4B;AAC5B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,KAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,KAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA;AAEb","file":"chunk-R3EBGEAW.js","sourcesContent":["export type HorizontalAlignment =\n | 'left'\n | 'l'\n | 'flex-start'\n | 'center'\n | 'c'\n | 'space-around'\n | 'right'\n | 'r'\n | 'flex-end'\n | 'full'\n | 'f'\n | 'space-between';\n\nexport type VerticalAlignment =\n | 'top'\n | 't'\n | 'flex-start'\n | 'middle'\n | 'm'\n | 'c'\n | 'space-around'\n | 'bottom'\n | 'b'\n | 'flex-end'\n | 'full'\n | 'f'\n | 'space-between';\n\nexport type CanonicalHorizontalAlignment = 'left' | 'center' | 'right' | 'full';\nexport type CanonicalVerticalAlignment = 'top' | 'middle' | 'bottom' | 'full';\n\nexport function horizontalAlignment(\n value: HorizontalAlignment,\n): CanonicalHorizontalAlignment {\n switch (value) {\n case 'left':\n case 'l':\n case 'flex-start':\n return 'left';\n case 'center':\n case 'c':\n case 'space-around':\n return 'center';\n case 'right':\n case 'r':\n case 'flex-end':\n return 'right';\n case 'full':\n case 'f':\n case 'space-between':\n return 'full';\n }\n}\n\nexport function verticalAlignment(\n value: VerticalAlignment,\n): CanonicalVerticalAlignment {\n switch (value) {\n case 'top':\n case 't':\n case 'flex-start':\n return 'top';\n case 'middle':\n case 'm':\n case 'c':\n case 'space-around':\n return 'middle';\n case 'bottom':\n case 'b':\n case 'flex-end':\n return 'bottom';\n case 'full':\n case 'f':\n case 'space-between':\n return 'full';\n }\n}\n"]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
type HorizontalAlignment = 'left' | 'l' | 'flex-start' | 'center' | 'c' | 'space-around' | 'right' | 'r' | 'flex-end' | 'full' | 'f' | 'space-between';
|
|
2
|
+
type VerticalAlignment = 'top' | 't' | 'flex-start' | 'middle' | 'm' | 'c' | 'space-around' | 'bottom' | 'b' | 'flex-end' | 'full' | 'f' | 'space-between';
|
|
3
|
+
|
|
4
|
+
export type { HorizontalAlignment as H, VerticalAlignment as V };
|
package/dist/index.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export { LoadingSpinner, LoadingSpinnerProps } from './loading-spinner.js';
|
|
|
13
13
|
export { LucideIcon, LucideIconProps, LucideNode } from './lucide-icon.js';
|
|
14
14
|
export { Pane, PaneContentElement, PaneElement, PaneProps, PaneSeparatorSide } from './pane.js';
|
|
15
15
|
export { ResizableRegion, ResizableRegionAxis, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionEdge, ResizableRegionPresentation, ResizableRegionProps, ResizableRegionRestorePosition, ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
|
|
16
|
+
export { Row, RowProps } from './row.js';
|
|
16
17
|
export { SegmentedControl, SegmentedControlAppearance, SegmentedControlChoice, SegmentedControlLayout, SegmentedControlProps, SegmentedControlShape, SegmentedControlSize } from './segmented-control.js';
|
|
17
18
|
export { Select, SelectChoice, SelectFocusRingOwner, SelectPresentation, SelectProps, SelectSelectedPresentation, SelectSize } from './select.js';
|
|
18
19
|
export { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
@@ -30,5 +31,6 @@ export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from
|
|
|
30
31
|
export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
|
|
31
32
|
export { TokenSearchCollapsibleOptions, TokenSearchEdit, TokenSearchFieldsHandle, TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.js';
|
|
32
33
|
export { D as DividerSides } from './divider-sides-267FA7sY.js';
|
|
34
|
+
export { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-CF8NLj7i.js';
|
|
33
35
|
import 'kerfjs';
|
|
34
36
|
import 'lucide';
|
package/dist/index.js
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
|
+
export { wireResizableRegions } from './chunk-WN52USHV.js';
|
|
1
2
|
export { reorderTabs, wireTabBars } from './chunk-UKKSMZYT.js';
|
|
2
3
|
export { wireTokenSearchFields } from './chunk-VDUJZF5G.js';
|
|
4
|
+
export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-TIGSG6BX.js';
|
|
3
5
|
export { ValueTable, ValueTableRow } from './chunk-V6HCTCVD.js';
|
|
4
|
-
export {
|
|
6
|
+
export { Select } from './chunk-CK6P5AUK.js';
|
|
5
7
|
export { StateBanner } from './chunk-UDHHKZWO.js';
|
|
6
8
|
export { SunkenPanel } from './chunk-SOK5EUF7.js';
|
|
7
9
|
export { DialogSurface, PopupSurface } from './chunk-WSXUPSID.js';
|
|
8
10
|
export { TabBar } from './chunk-ZPWZIVI6.js';
|
|
9
|
-
export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-TIGSG6BX.js';
|
|
10
11
|
export { ToolbarText } from './chunk-V6GQKOX2.js';
|
|
11
12
|
export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-CAB6NQ2T.js';
|
|
13
|
+
export { Row } from './chunk-QHCBZTDK.js';
|
|
12
14
|
export { SegmentedControl } from './chunk-E34TE2ZI.js';
|
|
13
|
-
export { Select } from './chunk-CK6P5AUK.js';
|
|
14
15
|
export { FloatingToolbar } from './chunk-DYBPI5O2.js';
|
|
15
16
|
export { ListActionRow } from './chunk-DAO2VFTT.js';
|
|
16
17
|
export { ListInsetControl } from './chunk-MFR2IIFG.js';
|
|
@@ -21,7 +22,8 @@ export { Toolbar } from './chunk-VXFGMDA7.js';
|
|
|
21
22
|
export { Pane } from './chunk-I4V3UDSA.js';
|
|
22
23
|
export { ListHeader } from './chunk-OC275HHS.js';
|
|
23
24
|
export { ListItem } from './chunk-I45QO2IZ.js';
|
|
24
|
-
export { List } from './chunk-
|
|
25
|
+
export { List } from './chunk-7JQAQWVC.js';
|
|
26
|
+
|
|
25
27
|
|
|
26
28
|
export { Skeleton } from './chunk-T7DOWS6T.js';
|
|
27
29
|
export { calc, colorVar, em, flex, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-OL4TC3U2.js';
|
package/dist/list.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as kerfjs from 'kerfjs';
|
|
2
2
|
import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
|
|
3
3
|
import { D as DividerSides } from './divider-sides-267FA7sY.js';
|
|
4
|
+
import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-CF8NLj7i.js';
|
|
4
5
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
5
6
|
|
|
6
7
|
interface ListProps {
|
|
@@ -9,6 +10,10 @@ interface ListProps {
|
|
|
9
10
|
gap?: boolean | UiSpaceName | CssLength;
|
|
10
11
|
/** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
|
|
11
12
|
flex?: boolean | CssFlexKeyword | CssFlex;
|
|
13
|
+
/** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */
|
|
14
|
+
hAlign?: HorizontalAlignment;
|
|
15
|
+
/** Vertical distribution. Defaults to top. */
|
|
16
|
+
vAlign?: VerticalAlignment;
|
|
12
17
|
/** Own vertical scrolling and overscroll containment. */
|
|
13
18
|
scrollable?: boolean;
|
|
14
19
|
/** Physical divider edges in canonical top/right/bottom/left order. */
|
|
@@ -16,6 +21,6 @@ interface ListProps {
|
|
|
16
21
|
className?: string;
|
|
17
22
|
}
|
|
18
23
|
/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */
|
|
19
|
-
declare function List({ children, gap, flex, scrollable, dividerSides, className, }: ListProps): kerfjs.SafeHtml;
|
|
24
|
+
declare function List({ children, gap, flex, hAlign, vAlign, scrollable, dividerSides, className, }: ListProps): kerfjs.SafeHtml;
|
|
20
25
|
|
|
21
|
-
export { CssFlex, CssFlexKeyword, CssLength, DividerSides, List, type ListProps, UiSpaceName };
|
|
26
|
+
export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, UiSpaceName, VerticalAlignment };
|
package/dist/list.js
CHANGED
package/dist/row.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as kerfjs from 'kerfjs';
|
|
2
|
+
import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
|
|
3
|
+
import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-CF8NLj7i.js';
|
|
4
|
+
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
5
|
+
|
|
6
|
+
interface RowProps {
|
|
7
|
+
children?: KerfUiContent;
|
|
8
|
+
/** Horizontal distribution. Defaults to left. */
|
|
9
|
+
hAlign?: HorizontalAlignment;
|
|
10
|
+
/** Vertical alignment and wrapped-line distribution. Defaults to full. */
|
|
11
|
+
vAlign?: VerticalAlignment;
|
|
12
|
+
/** A named UI spacing token or typed CSS length. Defaults to xs. */
|
|
13
|
+
gap?: UiSpaceName | CssLength;
|
|
14
|
+
/** Allow this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
|
|
15
|
+
flex?: boolean | CssFlexKeyword | CssFlex;
|
|
16
|
+
/** Allow children to wrap onto additional lines. */
|
|
17
|
+
wrap?: boolean;
|
|
18
|
+
className?: string;
|
|
19
|
+
}
|
|
20
|
+
/** A horizontal flex row with explicit physical-axis alignment and spacing. */
|
|
21
|
+
declare function Row({ children, hAlign, vAlign, gap, flex, wrap, className, }: RowProps): kerfjs.SafeHtml;
|
|
22
|
+
|
|
23
|
+
export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, Row, type RowProps, UiSpaceName, VerticalAlignment };
|
package/dist/row.js
ADDED
package/dist/row.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"row.js"}
|
package/dist/styles/list.css
CHANGED
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
flex: var(--_kui-list-flex, initial);
|
|
14
14
|
flex-direction: column;
|
|
15
15
|
align-items: stretch;
|
|
16
|
+
align-content: space-between;
|
|
17
|
+
justify-content: flex-start;
|
|
16
18
|
gap: var(--_kui-list-gap, 0);
|
|
17
19
|
box-shadow:
|
|
18
20
|
inset 0 1px var(--_kui-list-divider-top),
|
|
@@ -21,6 +23,33 @@
|
|
|
21
23
|
inset 1px 0 var(--_kui-list-divider-left);
|
|
22
24
|
}
|
|
23
25
|
|
|
26
|
+
.kui-list[data-h-align="left"] {
|
|
27
|
+
align-items: flex-start;
|
|
28
|
+
align-content: flex-start;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.kui-list[data-h-align="center"] {
|
|
32
|
+
align-items: center;
|
|
33
|
+
align-content: space-around;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.kui-list[data-h-align="right"] {
|
|
37
|
+
align-items: flex-end;
|
|
38
|
+
align-content: flex-end;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.kui-list[data-v-align="middle"] {
|
|
42
|
+
justify-content: space-around;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.kui-list[data-v-align="bottom"] {
|
|
46
|
+
justify-content: flex-end;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.kui-list[data-v-align="full"] {
|
|
50
|
+
justify-content: space-between;
|
|
51
|
+
}
|
|
52
|
+
|
|
24
53
|
.kui-list[data-scrollable="true"] {
|
|
25
54
|
overflow-y: auto;
|
|
26
55
|
overscroll-behavior-y: contain;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
.kui-row {
|
|
2
|
+
--kui-row-gap: var(--kui-layout-item-gap, 0.5rem);
|
|
3
|
+
|
|
4
|
+
display: flex;
|
|
5
|
+
min-width: 0;
|
|
6
|
+
min-height: 0;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
flex: var(--_kui-row-flex, initial);
|
|
9
|
+
flex-direction: row;
|
|
10
|
+
flex-wrap: nowrap;
|
|
11
|
+
align-items: stretch;
|
|
12
|
+
align-content: space-between;
|
|
13
|
+
justify-content: flex-start;
|
|
14
|
+
gap: var(--_kui-row-gap, var(--kui-row-gap));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.kui-row[data-wrap="true"] {
|
|
18
|
+
flex-wrap: wrap;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.kui-row[data-h-align="center"] {
|
|
22
|
+
justify-content: space-around;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.kui-row[data-h-align="right"] {
|
|
26
|
+
justify-content: flex-end;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.kui-row[data-h-align="full"] {
|
|
30
|
+
justify-content: space-between;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.kui-row[data-v-align="top"] {
|
|
34
|
+
align-items: flex-start;
|
|
35
|
+
align-content: flex-start;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.kui-row[data-v-align="middle"] {
|
|
39
|
+
align-items: center;
|
|
40
|
+
align-content: space-around;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.kui-row[data-v-align="bottom"] {
|
|
44
|
+
align-items: flex-end;
|
|
45
|
+
align-content: flex-end;
|
|
46
|
+
}
|
package/dist/styles/styles.css
CHANGED
|
@@ -269,7 +269,8 @@ Logical-edge separator lines are independently opt-in and default off.
|
|
|
269
269
|
geometry classes.
|
|
270
270
|
`List` is the corresponding layout-only vertical stack: its children stretch by
|
|
271
271
|
default, while `gap`, `flex`, and `scrollable` opt into typed spacing,
|
|
272
|
-
flex growth, and vertical scroll ownership. `
|
|
272
|
+
flex growth, and vertical scroll ownership. `Row.flex` uses the same typed flex
|
|
273
|
+
participation contract on the horizontal counterpart. `dividerSides` accepts canonical
|
|
273
274
|
physical top/right/bottom/left combinations such as `tr` and `trbl`; the stack
|
|
274
275
|
adds no list semantics, margin, or padding of its own. Use a direct finite
|
|
275
276
|
spacing shorthand such as `gap="2xs"`, or pass a `CssLength` created by the
|
|
@@ -280,7 +281,7 @@ length. Raw CSS strings and source-only `remify(4px)` are not valid runtime
|
|
|
280
281
|
props. The `CssLength` name intentionally includes percentages for UI dimension
|
|
281
282
|
props. Its opaque string brand improves authoring correctness; it is not a CSS
|
|
282
283
|
sanitizer or security boundary.
|
|
283
|
-
`List.flex` likewise
|
|
284
|
+
`Row.flex` and `List.flex` likewise accept their boolean default, finite keywords, or `CssFlex`
|
|
284
285
|
from `flex(grow, shrink, basis)`. `Skeleton` width/height use `CssSize`, radius
|
|
285
286
|
uses `CssLength`, and `SelectChoice.color` uses `CssColor` from `uiColor()` or
|
|
286
287
|
`colorVar()`. Never exchange these property grammars. List rows expose
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# Public component integration workflow
|
|
2
|
+
|
|
3
|
+
The canonical `ai/component-catalog.json` is also the integration manifest for
|
|
4
|
+
first-party public components. Every entry with `source: "kerf"` and
|
|
5
|
+
`kind: "component"` projects into the package, build, root API, catalog demo,
|
|
6
|
+
and AI authoring surfaces. This keeps a new List-like primitive from reaching a
|
|
7
|
+
late build or release gate before an omitted surface is discovered.
|
|
8
|
+
|
|
9
|
+
Author the implementation, CSS, catalog facts, demo, and behavior tests first.
|
|
10
|
+
Then run:
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm run component-integrations:dry-run
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
The dry run reports every mismatched projection together, using diff-like
|
|
17
|
+
`expected` and `actual` lines without changing files or failing the command.
|
|
18
|
+
Resolve the complete report, build the package, regenerate signatures with
|
|
19
|
+
`npm run ai:signatures:sync`, and refresh reviewed compatibility digests with
|
|
20
|
+
`npm run ai:compatibility:sync`. `npm run check:component-integrations` runs the
|
|
21
|
+
same validator in failing CI mode, and the package `check` gate includes it.
|
|
22
|
+
|
|
23
|
+
For each catalog component, the validator checks:
|
|
24
|
+
|
|
25
|
+
- the source module and stylesheet;
|
|
26
|
+
- the tsup entry and typed package subpath, including the browser-conditioned
|
|
27
|
+
entry when the catalog declares `browserImport`;
|
|
28
|
+
- the CSS package export;
|
|
29
|
+
- root-barrel exposure for browser-conditioned components;
|
|
30
|
+
- the stable catalog route, demo module, and exhaustive demo registry; and
|
|
31
|
+
- inclusion of the public subpath in the generated AI signature reference.
|
|
32
|
+
|
|
33
|
+
The existing catalog sync and compatibility gates remain responsible for the
|
|
34
|
+
typed catalog projections, catalog count/order, and artifact digests. Public
|
|
35
|
+
API signatures derive component subpaths from the catalog, so a newly cataloged
|
|
36
|
+
component can no longer be silently omitted from that corpus.
|
|
37
|
+
|
|
38
|
+
Non-component helpers, wiring modules, compositions, recipes, and development
|
|
39
|
+
tools remain explicit package surfaces. They do not masquerade as visual
|
|
40
|
+
components merely to enter this workflow.
|
|
41
|
+
|
|
42
|
+
## Change-local verification and bundle review
|
|
43
|
+
|
|
44
|
+
Run `npm run check:change` after changing a public component. It synchronizes
|
|
45
|
+
both catalog projections, declarations, AI signatures, and compatibility
|
|
46
|
+
digests; names every checked-in projection changed by that synchronization;
|
|
47
|
+
runs the catalog/component contracts, unit coverage, consumer bundle tests,
|
|
48
|
+
source and packed type contracts; builds the production catalog; and reports
|
|
49
|
+
the exact gzip byte delta from the last reviewed baseline. The broader
|
|
50
|
+
`npm run check` remains the release gate.
|
|
51
|
+
|
|
52
|
+
Intentional bundle changes use the same workflow with an explicit review
|
|
53
|
+
reason:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
npm run check:change -- --update-bundle-budget \
|
|
57
|
+
--reason "Added the reviewed List detail states and keyboard behavior"
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
That mode writes `demo-bundle-budget.json`, records the previous and new exact
|
|
61
|
+
measurements and budgets with the reason and timestamp, and rounds the total
|
|
62
|
+
budget to the next 100 bytes. Do not edit the budget or add a history comment
|
|
63
|
+
by hand.
|