@kerfjs/ui 5.0.0-beta.93 → 5.0.0-beta.94
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 +4 -1
- package/ai/public-api-signatures-v1.md +36 -9
- package/ai/skill.md +7 -2
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/dist/catalog-resources.d.ts +1 -1
- package/dist/catalog.d.ts +5 -3
- package/dist/catalog.js +30 -0
- package/dist/catalog.js.map +1 -1
- package/dist/{types-BNP4gA41.d.ts → types-CVgIwSdq.d.ts} +44 -2
- package/dist/wire-catalog.d.ts +29 -4
- package/dist/wire-catalog.js +26 -10
- package/dist/wire-catalog.js.map +1 -1
- package/docs/catalog.md +26 -0
- package/docs/component-contract.md +3 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -373,7 +373,10 @@ guidance, public hooks, and explicit geometry ownership; then concatenate its
|
|
|
373
373
|
`entries` with Kerf's shipped `entries` in the AI context. Keep package/source
|
|
374
374
|
identity alongside each input when ids could collide. This makes a combined
|
|
375
375
|
tool reason about both sides of a composition using one vocabulary without
|
|
376
|
-
pretending app-local components are `@kerfjs/ui` exports.
|
|
376
|
+
pretending app-local components are `@kerfjs/ui` exports. A package that
|
|
377
|
+
keeps a `kerf.components.json` generates this extension with
|
|
378
|
+
`kerf-component-catalog` by setting `kerfComponentCatalog.selectionOutput`
|
|
379
|
+
instead of maintaining a second JSON by hand.
|
|
377
380
|
For a consumer UX demo, `@kerfjs/ui/catalog-projection` derives rows and
|
|
378
381
|
relationships from that extension; `kerf-catalog-demo --write` emits a typed
|
|
379
382
|
module and `--check` catches drift. See the [catalog guide](./docs/catalog.md)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Public API signatures for the UI authoring corpus
|
|
2
2
|
|
|
3
|
-
Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.
|
|
3
|
+
Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.94` and `kerfjs@5.0.0-beta.94`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
|
|
4
4
|
|
|
5
5
|
## `@kerfjs/ui/css-values`
|
|
6
6
|
|
|
@@ -2414,8 +2414,8 @@ export { DEFAULT_BREAKPOINTS, type DeviceBreakpoints, type DeviceClass, type Dev
|
|
|
2414
2414
|
```ts
|
|
2415
2415
|
import * as kerfjs from 'kerfjs';
|
|
2416
2416
|
import { SafeHtml } from 'kerfjs';
|
|
2417
|
-
import { b as CatalogProps } from './types-
|
|
2418
|
-
export { a as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as
|
|
2417
|
+
import { b as CatalogProps } from './types-CVgIwSdq.js';
|
|
2418
|
+
export { a as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogSettingsConfig, i as CatalogStageRootAttributes, j as CatalogUxReview } from './types-CVgIwSdq.js';
|
|
2419
2419
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
2420
2420
|
import './toolbar.js';
|
|
2421
2421
|
import './sides-BPSWde0A.js';
|
|
@@ -2437,8 +2437,10 @@ import './resizable-region.js';
|
|
|
2437
2437
|
* toolbar, description, preview stage, and resource footer. The sidebar's
|
|
2438
2438
|
* standard toggle moves into the entry toolbar while it is collapsed, and on
|
|
2439
2439
|
* a small screen the sidebar overlays the stage like any Workbench rail.
|
|
2440
|
+
* An entry's `settings` render in a right-rail settings pane beside the stage,
|
|
2441
|
+
* with the same toggle relocation and small-screen overlay.
|
|
2440
2442
|
*/
|
|
2441
|
-
declare function Catalog({ id, brand, sections, active, content, collapsed, theme, increasedContrast, reducedMotion, backgroundControl, headerActions, uxReview, secondarySections, sidebarFooter, status, backgroundStyle, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
|
|
2443
|
+
declare function Catalog({ id, brand, sections, active, content, collapsed, theme, increasedContrast, reducedMotion, backgroundControl, headerActions, settings, settingsCollapsed, settingsPanel, uxReview, secondarySections, sidebarFooter, status, backgroundStyle, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSettingsAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
|
|
2442
2444
|
|
|
2443
2445
|
/** How a specimen aligns its visible edge with its `ListHeader` label. */
|
|
2444
2446
|
type CatalogExampleAlign = 'glyph' | 'inline-control' | 'text-trigger' | 'none';
|
|
@@ -2535,7 +2537,7 @@ export { Catalog, CatalogExample, type CatalogExampleAlign, type CatalogExampleP
|
|
|
2535
2537
|
## `@kerfjs/ui/catalog-resources`
|
|
2536
2538
|
|
|
2537
2539
|
```ts
|
|
2538
|
-
import { C as CatalogResource } from './types-
|
|
2540
|
+
import { C as CatalogResource } from './types-CVgIwSdq.js';
|
|
2539
2541
|
import './toolbar.js';
|
|
2540
2542
|
import 'kerfjs';
|
|
2541
2543
|
import './semantic-content-BbzjvSu9.js';
|
|
@@ -2589,7 +2591,7 @@ export { type CatalogGuidanceKind, type CatalogResourceKind, type CatalogResourc
|
|
|
2589
2591
|
|
|
2590
2592
|
```ts
|
|
2591
2593
|
import { Signal } from 'kerfjs';
|
|
2592
|
-
import { a as CatalogBackgroundStyle } from './types-
|
|
2594
|
+
import { a as CatalogBackgroundStyle } from './types-CVgIwSdq.js';
|
|
2593
2595
|
import './toolbar.js';
|
|
2594
2596
|
import './semantic-content-BbzjvSu9.js';
|
|
2595
2597
|
import './sides-BPSWde0A.js';
|
|
@@ -2618,6 +2620,11 @@ interface WireCatalogOptions {
|
|
|
2618
2620
|
onToggleMotion?: () => void;
|
|
2619
2621
|
/** Report a preview background choice; the app updates `backgroundStyle`. */
|
|
2620
2622
|
onSelectBackground?: (style: CatalogBackgroundStyle) => void;
|
|
2623
|
+
/**
|
|
2624
|
+
* Invoked when the settings pane toggle is activated. With
|
|
2625
|
+
* `settingsCollapsed`, `wireCatalog` has already flipped the signal.
|
|
2626
|
+
*/
|
|
2627
|
+
onToggleSettings?: () => void;
|
|
2621
2628
|
/** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */
|
|
2622
2629
|
onToggleSecondary?: () => void;
|
|
2623
2630
|
/** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */
|
|
@@ -2634,6 +2641,7 @@ interface WireCatalogOptions {
|
|
|
2634
2641
|
toggleMotionAction?: string;
|
|
2635
2642
|
selectBackgroundAction?: string;
|
|
2636
2643
|
toggleSecondaryAction?: string;
|
|
2644
|
+
toggleSettingsAction?: string;
|
|
2637
2645
|
/**
|
|
2638
2646
|
* The sidebar's app-owned collapsed flag. With it, the catalog's Workbench
|
|
2639
2647
|
* sidebar is wired like any Workbench rail: it becomes a transient overlay
|
|
@@ -2653,6 +2661,25 @@ interface WireCatalogOptions {
|
|
|
2653
2661
|
* catalog remembers the user's sidebar width.
|
|
2654
2662
|
*/
|
|
2655
2663
|
sidebarStorageKey?: string;
|
|
2664
|
+
/**
|
|
2665
|
+
* The settings pane's app-owned collapsed flag, rendered as the Catalog's
|
|
2666
|
+
* `settingsCollapsed`. With it, `wireCatalog` owns the pane's toggle (each
|
|
2667
|
+
* press flips the signal) and wires the pane like any Workbench rail: a
|
|
2668
|
+
* transient overlay on a small screen (collapsed as the breakpoint applies,
|
|
2669
|
+
* closed on Escape or a press outside, focus handed back).
|
|
2670
|
+
*/
|
|
2671
|
+
settingsCollapsed?: Signal<boolean>;
|
|
2672
|
+
/**
|
|
2673
|
+
* The app-owned settings pane width signal for a Catalog rendered with
|
|
2674
|
+
* `settingsPanel={{ resizable: true, size: settingsSize.value }}`. Each
|
|
2675
|
+
* committed drag or keyboard resize is written to it.
|
|
2676
|
+
*/
|
|
2677
|
+
settingsSize?: Signal<number>;
|
|
2678
|
+
/**
|
|
2679
|
+
* With `settingsSize`, load and save the width under this storage key so
|
|
2680
|
+
* the catalog remembers the user's settings pane width.
|
|
2681
|
+
*/
|
|
2682
|
+
settingsStorageKey?: string;
|
|
2656
2683
|
/** The Catalog's `id`, when it is not the default `kui-catalog`. */
|
|
2657
2684
|
id?: string;
|
|
2658
2685
|
/**
|
|
@@ -2683,14 +2710,14 @@ interface CatalogRevealOptions {
|
|
|
2683
2710
|
declare function revealCatalogEntry(root: HTMLElement, id: string, { block, inline, behavior, media, }?: CatalogRevealOptions): () => void;
|
|
2684
2711
|
/**
|
|
2685
2712
|
* Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar
|
|
2686
|
-
* item selection (and the related-entry popup menu), the sidebar collapse toggle,
|
|
2687
|
-
* the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates
|
|
2713
|
+
* item selection (and the related-entry popup menu), the sidebar collapse toggle,
|
|
2714
|
+
* the settings pane toggle, and the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates
|
|
2688
2715
|
* them in the callbacks; optionally mirror the active id into the URL via `urlParam`.
|
|
2689
2716
|
* It also wires the scroll dividers below root (`wireScrollDividers`), so the
|
|
2690
2717
|
* catalog's panes and every example in it show their chrome dividers only
|
|
2691
2718
|
* while scrolled. Returns a disposer.
|
|
2692
2719
|
*/
|
|
2693
|
-
declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleContrast, onToggleMotion, onSelectBackground, onToggleSecondary, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, collapsed, sidebarSize, sidebarStorageKey, id: catalogId, onUxReviewProject, }: WireCatalogOptions): () => void;
|
|
2720
|
+
declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleContrast, onToggleMotion, onSelectBackground, onToggleSecondary, onToggleSettings, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSettingsAction, collapsed, sidebarSize, sidebarStorageKey, settingsCollapsed, settingsSize, settingsStorageKey, id: catalogId, onUxReviewProject, }: WireCatalogOptions): () => void;
|
|
2694
2721
|
|
|
2695
2722
|
export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog };
|
|
2696
2723
|
```
|
package/ai/skill.md
CHANGED
|
@@ -136,14 +136,19 @@ second, package-qualified input beside `./component-catalog.json`: search both,
|
|
|
136
136
|
preserve their source identity, and use the shared `geometry` vocabulary across
|
|
137
137
|
their composition boundary. An extension entry's optional `uses` ids resolve
|
|
138
138
|
against both catalogs; its `source` and `demoSource` are repository-relative
|
|
139
|
-
files for consumer catalog links.
|
|
139
|
+
files for consumer catalog links. A project with `kerf.components.json` generates
|
|
140
|
+
that extension with `kerf-component-catalog` (`kerfComponentCatalog.selectionOutput`
|
|
141
|
+
plus per-component `selection` blocks) rather than hand-writing it. When a consuming project has reusable visual
|
|
140
142
|
components, derive demo rows with `@kerfjs/ui/catalog-projection` or
|
|
141
143
|
`kerf-catalog-demo --write`, then guard drift with `--check`; see
|
|
142
144
|
`../docs/catalog.md`. For a local catalog's UX Review **Capture region** link,
|
|
143
145
|
add `uxReviewPlugin()` from the Node-only `@kerfjs/ui/vite-ux-review` to the
|
|
144
146
|
Vite config, report the project with `wireCatalog`'s `onUxReviewProject`, and
|
|
145
147
|
render `Catalog` with `uxReview={{ projectDirectory }}`; never hand-roll the
|
|
146
|
-
endpoint or the `uxreview://` link.
|
|
148
|
+
endpoint or the `uxreview://` link. For per-entry variant/state controls, pass
|
|
149
|
+
them as `Catalog`'s `settings` (with `settingsCollapsed` and the same signal as
|
|
150
|
+
`wireCatalog`'s `settingsCollapsed`); never build a separate settings aside and
|
|
151
|
+
toggle. Prefer its generated `component-composition.json`. A package
|
|
147
152
|
scaffolded by `create-kerf-component` owns the decisions in
|
|
148
153
|
`kerf.components.json`; run `npm run catalog:check` before using its output. If
|
|
149
154
|
no generated extension exists, start from the checked examples and require the
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Web Awesome JSX signatures for the UI authoring corpus
|
|
2
2
|
|
|
3
|
-
Generated from the emitted `@kerfjs/ui@5.0.0-beta.
|
|
3
|
+
Generated from the emitted `@kerfjs/ui@5.0.0-beta.94` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
|
|
4
4
|
|
|
5
5
|
```ts
|
|
6
6
|
import { KerfCustomElement } from 'kerfjs/jsx-runtime';
|
package/dist/catalog.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as kerfjs from 'kerfjs';
|
|
2
2
|
import { SafeHtml } from 'kerfjs';
|
|
3
|
-
import { b as CatalogProps } from './types-
|
|
4
|
-
export { a as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as
|
|
3
|
+
import { b as CatalogProps } from './types-CVgIwSdq.js';
|
|
4
|
+
export { a as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogSettingsConfig, i as CatalogStageRootAttributes, j as CatalogUxReview } from './types-CVgIwSdq.js';
|
|
5
5
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
6
6
|
import './toolbar.js';
|
|
7
7
|
import './sides-BPSWde0A.js';
|
|
@@ -23,8 +23,10 @@ import './resizable-region.js';
|
|
|
23
23
|
* toolbar, description, preview stage, and resource footer. The sidebar's
|
|
24
24
|
* standard toggle moves into the entry toolbar while it is collapsed, and on
|
|
25
25
|
* a small screen the sidebar overlays the stage like any Workbench rail.
|
|
26
|
+
* An entry's `settings` render in a right-rail settings pane beside the stage,
|
|
27
|
+
* with the same toggle relocation and small-screen overlay.
|
|
26
28
|
*/
|
|
27
|
-
declare function Catalog({ id, brand, sections, active, content, collapsed, theme, increasedContrast, reducedMotion, backgroundControl, headerActions, uxReview, secondarySections, sidebarFooter, status, backgroundStyle, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
|
|
29
|
+
declare function Catalog({ id, brand, sections, active, content, collapsed, theme, increasedContrast, reducedMotion, backgroundControl, headerActions, settings, settingsCollapsed, settingsPanel, uxReview, secondarySections, sidebarFooter, status, backgroundStyle, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSettingsAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
|
|
28
30
|
|
|
29
31
|
/** How a specimen aligns its visible edge with its `ListHeader` label. */
|
|
30
32
|
type CatalogExampleAlign = 'glyph' | 'inline-control' | 'text-trigger' | 'none';
|
package/dist/catalog.js
CHANGED
|
@@ -320,6 +320,9 @@ function Catalog({
|
|
|
320
320
|
reducedMotion,
|
|
321
321
|
backgroundControl = false,
|
|
322
322
|
headerActions,
|
|
323
|
+
settings,
|
|
324
|
+
settingsCollapsed = false,
|
|
325
|
+
settingsPanel = {},
|
|
323
326
|
uxReview,
|
|
324
327
|
secondarySections,
|
|
325
328
|
sidebarFooter,
|
|
@@ -333,6 +336,7 @@ function Catalog({
|
|
|
333
336
|
toggleMotionAction = "catalog-toggle-motion",
|
|
334
337
|
selectBackgroundAction = "catalog-select-background",
|
|
335
338
|
toggleSecondaryAction = "catalog-toggle-secondary",
|
|
339
|
+
toggleSettingsAction = "catalog-toggle-settings",
|
|
336
340
|
headerPlacement = "auto",
|
|
337
341
|
footerPlacement = "auto",
|
|
338
342
|
sidebar = {},
|
|
@@ -347,12 +351,15 @@ function Catalog({
|
|
|
347
351
|
const nextTheme = theme === "dark" ? "light" : "dark";
|
|
348
352
|
const catalogName = `${brand.title} catalog`;
|
|
349
353
|
const displayControls = increasedContrast !== void 0 || reducedMotion !== void 0 || backgroundControl || theme !== void 0;
|
|
354
|
+
const hasSettings = settings !== void 0 && settings !== null && settings !== false;
|
|
355
|
+
const settingsTitle = settingsPanel.title ?? "Settings";
|
|
350
356
|
return /* @__PURE__ */ jsx(
|
|
351
357
|
"main",
|
|
352
358
|
{
|
|
353
359
|
class: `kui-catalog ${className}`.trim(),
|
|
354
360
|
"data-component": "catalog",
|
|
355
361
|
"data-sidebar-collapsed": String(collapsed),
|
|
362
|
+
"data-settings-collapsed": hasSettings ? String(settingsCollapsed) : void 0,
|
|
356
363
|
slot,
|
|
357
364
|
children: /* @__PURE__ */ jsx(
|
|
358
365
|
Workbench,
|
|
@@ -415,6 +422,29 @@ function Catalog({
|
|
|
415
422
|
}
|
|
416
423
|
)
|
|
417
424
|
},
|
|
425
|
+
rightRail: hasSettings ? {
|
|
426
|
+
label: name ? `${name} ${settingsTitle}` : settingsTitle,
|
|
427
|
+
size: settingsPanel.size ?? 288,
|
|
428
|
+
resizable: settingsPanel.resizable,
|
|
429
|
+
separator: settingsPanel.separator,
|
|
430
|
+
collapseMotion: settingsPanel.collapseMotion,
|
|
431
|
+
presentation: settingsPanel.presentation,
|
|
432
|
+
responsiveOverlayAt: settingsPanel.responsiveOverlayAt,
|
|
433
|
+
compactOverlay: settingsPanel.compactOverlay,
|
|
434
|
+
collapsed: settingsCollapsed,
|
|
435
|
+
toolbar: {
|
|
436
|
+
...settingsPanel.toolbar,
|
|
437
|
+
label: `${settingsTitle} header`,
|
|
438
|
+
// A peripheral rail beside the xl entry title takes the
|
|
439
|
+
// default title size, so it never truncates at 288px.
|
|
440
|
+
title: /* @__PURE__ */ jsx(ToolbarText, { text: settingsTitle, headingLevel: 2 }),
|
|
441
|
+
toggle: {
|
|
442
|
+
action: toggleSettingsAction,
|
|
443
|
+
name: settingsTitle.toLocaleLowerCase()
|
|
444
|
+
}
|
|
445
|
+
},
|
|
446
|
+
content: settings
|
|
447
|
+
} : void 0,
|
|
418
448
|
mainToolbar: {
|
|
419
449
|
...mainToolbar,
|
|
420
450
|
label: `${name} header`,
|
package/dist/catalog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/catalog/components/catalog-resource-footer.tsx","../src/catalog/components/catalog-section-entries.tsx","../src/catalog/components/catalog-secondary-sections.tsx","../src/catalog/components/catalog-section-list.tsx","../src/catalog/components/catalog-sidebar.tsx","../src/catalog/components/catalog-stage.tsx","../src/catalog/components/catalog-ux-review-link.tsx","../src/catalog/components/catalog.tsx","../src/catalog/components/catalog-example.tsx","../src/catalog/components/catalog-example-stack.tsx"],"names":["jsxs","jsx","Fragment","protectedAttributes"],"mappings":"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","file":"catalog.js","sourcesContent":["import { ExternalLink, Waypoints } from 'lucide';\n\nimport {\n PopupMenu,\n type PopupMenuEntry,\n} from '../../components/actions/popup-menu/popup-menu.js';\nimport {\n Toolbar,\n type ToolbarConfig,\n} from '../../components/actions/toolbar/toolbar.js';\nimport {\n ToolbarActionLink,\n ToolbarControlGroup,\n} from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport { Row } from '../../components/layout/row/row.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport type { CatalogRelated, CatalogResource } from '../types.js';\n\ninterface CatalogResourceFooterProps {\n name: string;\n resources: readonly CatalogResource[];\n related: readonly CatalogRelated[];\n status?: KerfUiContent;\n selectAction: string;\n toolbar?: ToolbarConfig;\n}\n\nfunction relatedMenuItems(\n related: readonly CatalogRelated[],\n selectAction: string,\n): PopupMenuEntry[] {\n const groups: string[] = [];\n for (const entry of related)\n if (!groups.includes(entry.group)) groups.push(entry.group);\n\n const items: PopupMenuEntry[] = [];\n groups.forEach((group, index) => {\n if (index > 0) items.push({ kind: 'divider' });\n items.push({ kind: 'heading', label: group });\n for (const entry of related)\n if (entry.group === group)\n items.push({\n label: entry.name,\n action: selectAction,\n attributes: { 'data-item-id': entry.id },\n });\n });\n return items;\n}\n\n/** Status, resources, and related-entry navigation for the active specimen. */\nexport function CatalogResourceFooter({\n name,\n resources,\n related,\n status,\n selectAction,\n toolbar,\n}: CatalogResourceFooterProps) {\n return (\n <>\n {status ? (\n <Row\n hAlign=\"space-between\"\n vAlign=\"baseline\"\n gap=\"xs\"\n wrap\n textInsets=\"trl\"\n >\n {status}\n </Row>\n ) : null}\n <Toolbar\n position=\"footer\"\n label={`${name} resources`}\n dividerSides={toolbar?.dividerSides}\n centerAlign={toolbar?.centerAlign}\n responsive={toolbar?.responsive ?? 'stack'}\n responsiveAt={toolbar?.responsiveAt ?? 'narrow'}\n safeAreaEdges={toolbar?.safeAreaEdges}\n leading={\n resources.length > 0 ? (\n <ToolbarControlGroup\n label={`${name} resources`}\n content=\"mixed\"\n size=\"compact\"\n overflow=\"wrap\"\n >\n {resources.map((resource) => (\n <ToolbarActionLink\n href={resource.href}\n label={resource.label}\n detail={resource.detail}\n ariaLabel={`${name}: ${resource.label} (opens in new tab)`}\n external\n icon={<LucideIcon icon={ExternalLink} name=\"external-link\" />}\n />\n ))}\n </ToolbarControlGroup>\n ) : null\n }\n trailing={\n related.length > 0 ? (\n <ToolbarControlGroup\n single\n content=\"mixed\"\n nestedDropdown\n menuInset=\"compact\"\n size=\"compact\"\n label=\"Related entries\"\n >\n <PopupMenu\n text=\"Components\"\n icon={<LucideIcon icon={Waypoints} name=\"waypoints\" />}\n placement=\"top-end\"\n items={relatedMenuItems(related, selectAction)}\n rootAttributes={{ 'data-catalog-related': '' }}\n />\n </ToolbarControlGroup>\n ) : null\n }\n />\n </>\n );\n}\n","import { List } from '../../components/collections/list/list.js';\nimport { ListHeader } from '../../components/collections/list-header/list-header.js';\nimport { ListItem } from '../../components/collections/list-item/list-item.js';\nimport type { CatalogEntry, CatalogSection } from '../types.js';\n\n/** One labeled section of catalog entries. */\nexport function CatalogSectionEntries({\n section,\n active,\n selectAction,\n}: {\n section: CatalogSection;\n active: string;\n selectAction: string;\n}) {\n return (\n <List rootAttributes={{ 'data-catalog-section': section.category }}>\n <ListHeader label={section.category} />\n <List gap=\"2xs\">\n {section.entries.map((entry: CatalogEntry) => (\n <ListItem\n action={selectAction}\n itemId={entry.id}\n label={entry.name}\n status={entry.tags?.join(' · ')}\n selected={active === entry.id}\n title={entry.description}\n multiline\n rootAttributes={{ 'data-catalog-entry-name': entry.name }}\n />\n ))}\n </List>\n </List>\n );\n}\n","import { List } from '../../components/collections/list/list.js';\nimport { ListHeader } from '../../components/collections/list-header/list-header.js';\nimport type { CatalogSecondaryGroup } from '../types.js';\nimport { CatalogSectionEntries } from './catalog-section-entries.js';\n\ninterface CatalogSecondarySectionsProps {\n group: CatalogSecondaryGroup;\n active: string;\n selectAction: string;\n toggleAction: string;\n}\n\n/** The quieter, optionally collapsible navigation below primary sections. */\nexport function CatalogSecondarySections({\n group,\n active,\n selectAction,\n toggleAction,\n}: CatalogSecondarySectionsProps) {\n const open = !group.collapsible || Boolean(group.expanded);\n return (\n <List\n dividerSides=\"t\"\n controlInsets=\"t\"\n rootAttributes={{ 'data-catalog-secondary-group': group.label }}\n >\n {group.collapsible ? (\n <ListHeader\n label={group.label}\n toggle\n expanded={open}\n action={toggleAction}\n />\n ) : (\n <ListHeader label={group.label} />\n )}\n <List\n gap=\"m\"\n rootAttributes={{\n 'data-catalog-secondary': '',\n 'data-catalog-secondary-collapsed': String(!open),\n }}\n >\n {group.sections.map((section) => (\n <CatalogSectionEntries\n section={section}\n active={active}\n selectAction={selectAction}\n />\n ))}\n </List>\n </List>\n );\n}\n","import type { CatalogSection } from '../types.js';\nimport { CatalogSectionEntries } from './catalog-section-entries.js';\n\n/** The primary category sections in the catalog navigation. */\nexport function CatalogSectionList({\n sections,\n active,\n selectAction,\n}: {\n sections: readonly CatalogSection[];\n active: string;\n selectAction: string;\n}) {\n return (\n <>\n {sections.map((section) => (\n <CatalogSectionEntries\n section={section}\n active={active}\n selectAction={selectAction}\n />\n ))}\n </>\n );\n}\n","import { List } from '../../components/collections/list/list.js';\nimport { ListInsetText } from '../../components/collections/list-inset-text/list-inset-text.js';\nimport { Text } from '../../components/typography/text/text.js';\nimport type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport type {\n CatalogBrand,\n CatalogSecondaryGroup,\n CatalogSection,\n} from '../types.js';\nimport { CatalogSecondarySections } from './catalog-secondary-sections.js';\nimport { CatalogSectionList } from './catalog-section-list.js';\n\ninterface CatalogSidebarProps {\n brand: CatalogBrand;\n sections: readonly CatalogSection[];\n active: string;\n secondarySections?: CatalogSecondaryGroup;\n footer?: KerfUiContent;\n selectAction: string;\n toggleSecondaryAction: string;\n}\n\n/** The catalog navigation: brand subtitle, entry sections, and footer. */\nexport function CatalogSidebar({\n brand,\n sections,\n active,\n secondarySections,\n footer,\n selectAction,\n toggleSecondaryAction,\n}: CatalogSidebarProps) {\n return (\n <nav aria-label={`${brand.title} components`} data-catalog-sidebar>\n <List gap=\"m\" controlInsets=\"b\">\n {brand.subtitle ? (\n <ListInsetText sides=\"rl\">\n <Text variant=\"span\" size=\"compact\" tone=\"quiet\">\n {brand.subtitle}\n </Text>\n </ListInsetText>\n ) : null}\n <CatalogSectionList\n sections={sections}\n active={active}\n selectAction={selectAction}\n />\n {secondarySections ? (\n <CatalogSecondarySections\n group={secondarySections}\n active={active}\n selectAction={selectAction}\n toggleAction={toggleSecondaryAction}\n />\n ) : null}\n <ListInsetText\n sides=\"rl\"\n rootAttributes={{ 'data-catalog-filter-empty': '' }}\n >\n <Text variant=\"span\" tone=\"quiet\">\n No matching items\n </Text>\n </ListInsetText>\n {footer}\n </List>\n </nav>\n );\n}\n","import type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../shared/dom/extension-attributes.js';\nimport type {\n CatalogBackgroundStyle,\n CatalogStageRootAttributes,\n} from '../types.js';\n\nconst protectedAttributes = new Set([\n 'data-catalog-stage',\n 'data-background-style',\n]);\n\ninterface CatalogStageProps {\n name: string;\n content: KerfUiContent;\n backgroundStyle?: CatalogBackgroundStyle;\n rootAttributes?: CatalogStageRootAttributes;\n}\n\n/** The preview canvas for an active Catalog entry. */\nexport function CatalogStage({\n name,\n content,\n backgroundStyle = 'checkerboard',\n rootAttributes = {},\n}: CatalogStageProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n protectedAttributes,\n );\n return (\n <section\n {...safeRootAttributes}\n class=\"kui-catalog__stage\"\n data-catalog-stage\n data-background-style={backgroundStyle}\n aria-label={`${name} preview`}\n >\n <div class=\"kui-catalog__canvas\">{content}</div>\n </section>\n );\n}\n","import { Scan } from 'lucide';\n\nimport {\n ToolbarActionLink,\n ToolbarControlGroup,\n} from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport type { CatalogEntry, CatalogUxReview } from '../types.js';\nimport { uxReviewCaptureUrl } from '../ux-review.js';\n\n/**\n * The \"Capture region\" header link for the active entry. `wireCatalog` adds\n * the page URL to its context when it is followed, since the URL can change\n * after this render (`urlParam`).\n */\nexport function CatalogUxReviewLink({\n uxReview: { projectDirectory, name },\n entry,\n category,\n}: {\n uxReview: CatalogUxReview & { name: string };\n entry: CatalogEntry;\n category: string;\n}) {\n return (\n <ToolbarControlGroup\n appearance=\"borderless\"\n single\n size=\"compact\"\n content=\"mixed\"\n buttonAppearance=\"push\"\n >\n <ToolbarActionLink\n href={uxReviewCaptureUrl({\n projectDirectory,\n title: `${name}: ${entry.name}`,\n context: `${name} catalog\\nSelected ${category}: ${entry.name} (${entry.id})`,\n })}\n label=\"Capture region\"\n ariaLabel={`Capture ${entry.name} in UX Review`}\n icon={<LucideIcon icon={Scan} name=\"scan\" />}\n />\n </ToolbarControlGroup>\n );\n}\n","import { Contrast, Moon, Sun, X, ZapOff } from 'lucide';\n\nimport { PopupMenu } from '../../components/actions/popup-menu/popup-menu.js';\nimport { ToolbarControlGroup } from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../components/actions/toolbar-text/toolbar-text.js';\nimport { ListInsetControl } from '../../components/collections/list-inset-control/list-inset-control.js';\nimport { ListInsetText } from '../../components/collections/list-inset-text/list-inset-text.js';\nimport { TokenSearchField } from '../../components/forms/token-search-field/token-search-field.js';\nimport { Workbench } from '../../components/layout/workbench/workbench.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport { Text } from '../../components/typography/text/text.js';\nimport type { CatalogEntry, CatalogProps, CatalogSection } from '../types.js';\nimport { CatalogResourceFooter } from './catalog-resource-footer.js';\nimport { CatalogSidebar } from './catalog-sidebar.js';\nimport { CatalogStage } from './catalog-stage.js';\nimport { CatalogUxReviewLink } from './catalog-ux-review-link.js';\n\nfunction findEntry(\n sections: readonly CatalogSection[],\n id: string,\n): { entry: CatalogEntry; category: string } | undefined {\n for (const section of sections) {\n for (const entry of section.entries)\n if (entry.id === id) return { entry, category: section.category };\n }\n return undefined;\n}\n\n/**\n * Controlled, stateless component-catalog shell: a `Workbench` whose left rail\n * is the catalog navigation and whose work area is the active entry — its\n * toolbar, description, preview stage, and resource footer. The sidebar's\n * standard toggle moves into the entry toolbar while it is collapsed, and on\n * a small screen the sidebar overlays the stage like any Workbench rail.\n */\nexport function Catalog({\n id = 'kui-catalog',\n brand,\n sections,\n active,\n content,\n collapsed = false,\n theme,\n increasedContrast,\n reducedMotion,\n backgroundControl = false,\n headerActions,\n uxReview,\n secondarySections,\n sidebarFooter,\n status,\n backgroundStyle,\n stageRootAttributes,\n selectAction = 'catalog-select',\n toggleSidebarAction = 'catalog-toggle-sidebar',\n toggleThemeAction = 'catalog-toggle-theme',\n toggleContrastAction = 'catalog-toggle-contrast',\n toggleMotionAction = 'catalog-toggle-motion',\n selectBackgroundAction = 'catalog-select-background',\n toggleSecondaryAction = 'catalog-toggle-secondary',\n headerPlacement = 'auto',\n footerPlacement = 'auto',\n sidebar = {},\n mainToolbar,\n footerToolbar,\n className = '',\n slot,\n}: CatalogProps) {\n const found =\n findEntry(sections, active) ??\n (secondarySections\n ? findEntry(secondarySections.sections, active)\n : undefined);\n const selected = found?.entry;\n const name = selected?.name ?? '';\n const nextTheme = theme === 'dark' ? 'light' : 'dark';\n const catalogName = `${brand.title} catalog`;\n const displayControls =\n increasedContrast !== undefined ||\n reducedMotion !== undefined ||\n backgroundControl ||\n theme !== undefined;\n\n return (\n <main\n class={`kui-catalog ${className}`.trim()}\n data-component=\"catalog\"\n data-sidebar-collapsed={String(collapsed)}\n slot={slot}\n >\n <Workbench\n id={id}\n label={catalogName}\n leftRail={{\n label: catalogName,\n size: sidebar.size ?? 288,\n resizable: sidebar.resizable,\n separator: sidebar.separator,\n collapseMotion: sidebar.collapseMotion,\n presentation: sidebar.presentation,\n responsiveOverlayAt: sidebar.responsiveOverlayAt,\n compactOverlay: sidebar.compactOverlay,\n collapsed,\n toolbar: {\n ...sidebar.toolbar,\n label: `${catalogName} header`,\n title: (\n <>\n {brand.logoUrl ? (\n <ToolbarControlGroup\n appearance=\"borderless\"\n content=\"avatar\"\n shape=\"rounded\"\n single\n avatarImage={brand.logoUrl}\n >\n {null}\n </ToolbarControlGroup>\n ) : null}\n <ToolbarText text={brand.title} size=\"large\" headingLevel={1} />\n </>\n ),\n toggle: { action: toggleSidebarAction, name: catalogName },\n },\n header: (\n <ListInsetControl sides=\"rbl\">\n <TokenSearchField\n id={`${id}-filter`}\n label=\"Filter catalog\"\n placeholder=\"Filter items or headings\"\n editorAttributes={{ 'data-catalog-filter': '' }}\n trailingAction={{\n icon: <LucideIcon icon={X} name=\"x\" />,\n label: 'Clear filter',\n action: 'catalog-clear-filter',\n }}\n />\n </ListInsetControl>\n ),\n content: (\n <CatalogSidebar\n brand={brand}\n sections={sections}\n active={active}\n secondarySections={secondarySections}\n footer={sidebarFooter}\n selectAction={selectAction}\n toggleSecondaryAction={toggleSecondaryAction}\n />\n ),\n }}\n mainToolbar={{\n ...mainToolbar,\n label: `${name} header`,\n // The entry title stays whole; actions wrap below it when narrow.\n responsive: mainToolbar?.responsive ?? 'wrap',\n title: <ToolbarText text={name} size=\"xlarge\" headingLevel={2} />,\n trailing: (\n <>\n {headerActions}\n {uxReview && found ? (\n <CatalogUxReviewLink\n uxReview={{ ...uxReview, name: uxReview.name ?? brand.title }}\n entry={found.entry}\n category={found.category}\n />\n ) : null}\n {displayControls ? (\n <ToolbarControlGroup\n appearance=\"borderless\"\n content=\"mixed\"\n size=\"compact\"\n overflow=\"wrap\"\n buttonAppearance=\"push\"\n label=\"Catalog display settings\"\n >\n {increasedContrast !== undefined ? (\n <button\n type=\"button\"\n data-action={toggleContrastAction}\n aria-pressed={String(increasedContrast)}\n >\n <LucideIcon icon={Contrast} name=\"contrast\" />\n <span>Contrast</span>\n </button>\n ) : null}\n {reducedMotion !== undefined ? (\n <button\n type=\"button\"\n data-action={toggleMotionAction}\n aria-pressed={String(reducedMotion)}\n >\n <LucideIcon icon={ZapOff} name=\"zap-off\" />\n <span>Reduce motion</span>\n </button>\n ) : null}\n {backgroundControl ? (\n <PopupMenu\n text=\"Background\"\n rootAttributes={{ 'data-catalog-background-menu': '' }}\n items={[\n { value: 'checkerboard', label: 'Checkerboard' },\n {\n value: 'vertical-stripes',\n label: 'Vertical stripes',\n },\n { value: 'layout-guide', label: 'Layout guide' },\n { value: 'surface', label: 'Surface' },\n { value: 'sunken', label: 'Sunken' },\n ].map(({ value, label }) => ({\n label,\n action: selectBackgroundAction,\n checked: (backgroundStyle ?? 'checkerboard') === value,\n attributes: { 'data-background-choice': value },\n }))}\n />\n ) : null}\n {theme ? (\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 ) : null}\n </ToolbarControlGroup>\n ) : null}\n </>\n ),\n }}\n mainPane={{ appearance: 'sunken' }}\n mainFooter={\n <CatalogResourceFooter\n name={name}\n resources={selected?.resources ?? []}\n related={selected?.related ?? []}\n status={status}\n selectAction={selectAction}\n toolbar={footerToolbar}\n />\n }\n mainHeader={\n selected?.description ? (\n <ListInsetText\n sides=\"trbl\"\n rootAttributes={{ 'data-catalog-description': '' }}\n >\n <Text variant=\"span\">{selected.description}</Text>\n </ListInsetText>\n ) : null\n }\n mainHeaderPlacement={headerPlacement}\n mainFooterPlacement={footerPlacement}\n main={\n <CatalogStage\n name={name}\n content={content}\n backgroundStyle={backgroundStyle}\n rootAttributes={stageRootAttributes}\n />\n }\n />\n </main>\n );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nimport { ListHeader } from '../../components/collections/list-header/list-header.js';\nimport { ListInsetText } from '../../components/collections/list-inset-text/list-inset-text.js';\nimport { Text } from '../../components/typography/text/text.js';\nimport type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../shared/dom/extension-attributes.js';\n\n/** How a specimen aligns its visible edge with its `ListHeader` label. */\nexport type CatalogExampleAlign =\n 'glyph' | 'inline-control' | 'text-trigger' | 'none';\n\nexport interface CatalogExampleViewport {\n layout?: 'grid' | 'flex' | 'flex-column';\n width?: 'full' | 'compact' | 'medium' | 'wide' | 'text' | 'control';\n /** Fixed specimen height; `app` frames an application-sized recipe or layout.\n * A fixed height is definite, so a child that fills with `height: 100%`\n * (a horizontal `ResizableRegion`, say) spans the whole frame. */\n height?: 'short' | 'reduced' | 'medium' | 'tall' | 'app';\n /** A minimum the frame may grow past. It is not a definite height: a child\n * sized with `height: 100%` falls back to its content height, so use\n * `height` when the specimen must fill the frame. */\n minHeight?: 'short' | 'medium';\n frame?: 'solid' | 'dashed';\n surface?: 'default' | 'lowered';\n overflow?: 'hidden' | 'auto-x';\n responsive?: 'roomy-only';\n shadow?: boolean;\n /** Public component custom properties applied to the specimen viewport. */\n tokens?: Readonly<Record<`--${string}`, string>>;\n}\n\nconst protectedAttributes = 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\nexport interface CatalogExampleProps {\n label?: string;\n note?: SafeHtml | string;\n align?: CatalogExampleAlign;\n /** Optional catalog-owned constraints for demonstrating layout components. */\n viewport?: CatalogExampleViewport;\n /** Replacement guidance shown when a roomy-only viewport is hidden. */\n compactFallback?: SafeHtml | string;\n rootAttributes?: CatalogExampleRootAttributes;\n className?: string;\n children?: KerfUiContent;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** A labeled catalog specimen with optional explanatory text and alignment. */\nexport function CatalogExample({\n label,\n note,\n align = 'none',\n viewport,\n compactFallback,\n rootAttributes = {},\n className = '',\n children,\n slot,\n}: CatalogExampleProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n protectedAttributes,\n );\n const viewportStyle = viewport?.tokens\n ? Object.entries(viewport.tokens)\n .map(([name, value]) => `${name}:${value}`)\n .join(';')\n : undefined;\n const specimen = viewport ? (\n <div\n class=\"kui-catalog-example__viewport\"\n data-catalog-example-viewport\n data-layout={viewport.layout}\n data-width={viewport.width}\n data-height={viewport.height}\n data-min-height={viewport.minHeight}\n data-frame={viewport.frame}\n data-surface={viewport.surface}\n data-overflow={viewport.overflow}\n data-responsive={viewport.responsive}\n data-shadow={viewport.shadow ? 'true' : undefined}\n style={viewportStyle}\n >\n {children}\n </div>\n ) : (\n children\n );\n\n return (\n <section\n {...safeRootAttributes}\n class={`kui-catalog-example ${className}`.trim()}\n data-catalog-example\n data-align={align}\n slot={slot}\n >\n {label !== undefined ? (\n <ListHeader\n label={label}\n width=\"content\"\n rootAttributes={{ 'data-catalog-example-label': '' }}\n />\n ) : null}\n {note !== undefined ? (\n <ListInsetText\n sides=\"rl\"\n className=\"kui-catalog-example__note\"\n rootAttributes={{ 'data-catalog-example-note': '' }}\n >\n <Text variant=\"span\" size=\"compact\" tone=\"quiet\">\n {note}\n </Text>\n </ListInsetText>\n ) : null}\n {compactFallback !== undefined ? (\n <Text tone=\"quiet\" className=\"kui-catalog-example__compact-fallback\">\n {compactFallback}\n </Text>\n ) : null}\n {specimen}\n </section>\n );\n}\n","import type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../shared/dom/extension-attributes.js';\n\nconst protectedAttributes = 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 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 CatalogExampleStackProps {\n label?: string;\n rootAttributes?: CatalogExampleStackRootAttributes;\n className?: string;\n children?: KerfUiContent;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** A vertically stacked group of catalog examples. */\nexport function CatalogExampleStack({\n label,\n rootAttributes = {},\n className = '',\n children,\n slot,\n}: CatalogExampleStackProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n protectedAttributes,\n );\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 slot={slot}\n >\n {children}\n </section>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/catalog/components/catalog-resource-footer.tsx","../src/catalog/components/catalog-section-entries.tsx","../src/catalog/components/catalog-secondary-sections.tsx","../src/catalog/components/catalog-section-list.tsx","../src/catalog/components/catalog-sidebar.tsx","../src/catalog/components/catalog-stage.tsx","../src/catalog/components/catalog-ux-review-link.tsx","../src/catalog/components/catalog.tsx","../src/catalog/components/catalog-example.tsx","../src/catalog/components/catalog-example-stack.tsx"],"names":["jsxs","jsx","Fragment","protectedAttributes"],"mappings":"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","file":"catalog.js","sourcesContent":["import { ExternalLink, Waypoints } from 'lucide';\n\nimport {\n PopupMenu,\n type PopupMenuEntry,\n} from '../../components/actions/popup-menu/popup-menu.js';\nimport {\n Toolbar,\n type ToolbarConfig,\n} from '../../components/actions/toolbar/toolbar.js';\nimport {\n ToolbarActionLink,\n ToolbarControlGroup,\n} from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport { Row } from '../../components/layout/row/row.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport type { CatalogRelated, CatalogResource } from '../types.js';\n\ninterface CatalogResourceFooterProps {\n name: string;\n resources: readonly CatalogResource[];\n related: readonly CatalogRelated[];\n status?: KerfUiContent;\n selectAction: string;\n toolbar?: ToolbarConfig;\n}\n\nfunction relatedMenuItems(\n related: readonly CatalogRelated[],\n selectAction: string,\n): PopupMenuEntry[] {\n const groups: string[] = [];\n for (const entry of related)\n if (!groups.includes(entry.group)) groups.push(entry.group);\n\n const items: PopupMenuEntry[] = [];\n groups.forEach((group, index) => {\n if (index > 0) items.push({ kind: 'divider' });\n items.push({ kind: 'heading', label: group });\n for (const entry of related)\n if (entry.group === group)\n items.push({\n label: entry.name,\n action: selectAction,\n attributes: { 'data-item-id': entry.id },\n });\n });\n return items;\n}\n\n/** Status, resources, and related-entry navigation for the active specimen. */\nexport function CatalogResourceFooter({\n name,\n resources,\n related,\n status,\n selectAction,\n toolbar,\n}: CatalogResourceFooterProps) {\n return (\n <>\n {status ? (\n <Row\n hAlign=\"space-between\"\n vAlign=\"baseline\"\n gap=\"xs\"\n wrap\n textInsets=\"trl\"\n >\n {status}\n </Row>\n ) : null}\n <Toolbar\n position=\"footer\"\n label={`${name} resources`}\n dividerSides={toolbar?.dividerSides}\n centerAlign={toolbar?.centerAlign}\n responsive={toolbar?.responsive ?? 'stack'}\n responsiveAt={toolbar?.responsiveAt ?? 'narrow'}\n safeAreaEdges={toolbar?.safeAreaEdges}\n leading={\n resources.length > 0 ? (\n <ToolbarControlGroup\n label={`${name} resources`}\n content=\"mixed\"\n size=\"compact\"\n overflow=\"wrap\"\n >\n {resources.map((resource) => (\n <ToolbarActionLink\n href={resource.href}\n label={resource.label}\n detail={resource.detail}\n ariaLabel={`${name}: ${resource.label} (opens in new tab)`}\n external\n icon={<LucideIcon icon={ExternalLink} name=\"external-link\" />}\n />\n ))}\n </ToolbarControlGroup>\n ) : null\n }\n trailing={\n related.length > 0 ? (\n <ToolbarControlGroup\n single\n content=\"mixed\"\n nestedDropdown\n menuInset=\"compact\"\n size=\"compact\"\n label=\"Related entries\"\n >\n <PopupMenu\n text=\"Components\"\n icon={<LucideIcon icon={Waypoints} name=\"waypoints\" />}\n placement=\"top-end\"\n items={relatedMenuItems(related, selectAction)}\n rootAttributes={{ 'data-catalog-related': '' }}\n />\n </ToolbarControlGroup>\n ) : null\n }\n />\n </>\n );\n}\n","import { List } from '../../components/collections/list/list.js';\nimport { ListHeader } from '../../components/collections/list-header/list-header.js';\nimport { ListItem } from '../../components/collections/list-item/list-item.js';\nimport type { CatalogEntry, CatalogSection } from '../types.js';\n\n/** One labeled section of catalog entries. */\nexport function CatalogSectionEntries({\n section,\n active,\n selectAction,\n}: {\n section: CatalogSection;\n active: string;\n selectAction: string;\n}) {\n return (\n <List rootAttributes={{ 'data-catalog-section': section.category }}>\n <ListHeader label={section.category} />\n <List gap=\"2xs\">\n {section.entries.map((entry: CatalogEntry) => (\n <ListItem\n action={selectAction}\n itemId={entry.id}\n label={entry.name}\n status={entry.tags?.join(' · ')}\n selected={active === entry.id}\n title={entry.description}\n multiline\n rootAttributes={{ 'data-catalog-entry-name': entry.name }}\n />\n ))}\n </List>\n </List>\n );\n}\n","import { List } from '../../components/collections/list/list.js';\nimport { ListHeader } from '../../components/collections/list-header/list-header.js';\nimport type { CatalogSecondaryGroup } from '../types.js';\nimport { CatalogSectionEntries } from './catalog-section-entries.js';\n\ninterface CatalogSecondarySectionsProps {\n group: CatalogSecondaryGroup;\n active: string;\n selectAction: string;\n toggleAction: string;\n}\n\n/** The quieter, optionally collapsible navigation below primary sections. */\nexport function CatalogSecondarySections({\n group,\n active,\n selectAction,\n toggleAction,\n}: CatalogSecondarySectionsProps) {\n const open = !group.collapsible || Boolean(group.expanded);\n return (\n <List\n dividerSides=\"t\"\n controlInsets=\"t\"\n rootAttributes={{ 'data-catalog-secondary-group': group.label }}\n >\n {group.collapsible ? (\n <ListHeader\n label={group.label}\n toggle\n expanded={open}\n action={toggleAction}\n />\n ) : (\n <ListHeader label={group.label} />\n )}\n <List\n gap=\"m\"\n rootAttributes={{\n 'data-catalog-secondary': '',\n 'data-catalog-secondary-collapsed': String(!open),\n }}\n >\n {group.sections.map((section) => (\n <CatalogSectionEntries\n section={section}\n active={active}\n selectAction={selectAction}\n />\n ))}\n </List>\n </List>\n );\n}\n","import type { CatalogSection } from '../types.js';\nimport { CatalogSectionEntries } from './catalog-section-entries.js';\n\n/** The primary category sections in the catalog navigation. */\nexport function CatalogSectionList({\n sections,\n active,\n selectAction,\n}: {\n sections: readonly CatalogSection[];\n active: string;\n selectAction: string;\n}) {\n return (\n <>\n {sections.map((section) => (\n <CatalogSectionEntries\n section={section}\n active={active}\n selectAction={selectAction}\n />\n ))}\n </>\n );\n}\n","import { List } from '../../components/collections/list/list.js';\nimport { ListInsetText } from '../../components/collections/list-inset-text/list-inset-text.js';\nimport { Text } from '../../components/typography/text/text.js';\nimport type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport type {\n CatalogBrand,\n CatalogSecondaryGroup,\n CatalogSection,\n} from '../types.js';\nimport { CatalogSecondarySections } from './catalog-secondary-sections.js';\nimport { CatalogSectionList } from './catalog-section-list.js';\n\ninterface CatalogSidebarProps {\n brand: CatalogBrand;\n sections: readonly CatalogSection[];\n active: string;\n secondarySections?: CatalogSecondaryGroup;\n footer?: KerfUiContent;\n selectAction: string;\n toggleSecondaryAction: string;\n}\n\n/** The catalog navigation: brand subtitle, entry sections, and footer. */\nexport function CatalogSidebar({\n brand,\n sections,\n active,\n secondarySections,\n footer,\n selectAction,\n toggleSecondaryAction,\n}: CatalogSidebarProps) {\n return (\n <nav aria-label={`${brand.title} components`} data-catalog-sidebar>\n <List gap=\"m\" controlInsets=\"b\">\n {brand.subtitle ? (\n <ListInsetText sides=\"rl\">\n <Text variant=\"span\" size=\"compact\" tone=\"quiet\">\n {brand.subtitle}\n </Text>\n </ListInsetText>\n ) : null}\n <CatalogSectionList\n sections={sections}\n active={active}\n selectAction={selectAction}\n />\n {secondarySections ? (\n <CatalogSecondarySections\n group={secondarySections}\n active={active}\n selectAction={selectAction}\n toggleAction={toggleSecondaryAction}\n />\n ) : null}\n <ListInsetText\n sides=\"rl\"\n rootAttributes={{ 'data-catalog-filter-empty': '' }}\n >\n <Text variant=\"span\" tone=\"quiet\">\n No matching items\n </Text>\n </ListInsetText>\n {footer}\n </List>\n </nav>\n );\n}\n","import type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../shared/dom/extension-attributes.js';\nimport type {\n CatalogBackgroundStyle,\n CatalogStageRootAttributes,\n} from '../types.js';\n\nconst protectedAttributes = new Set([\n 'data-catalog-stage',\n 'data-background-style',\n]);\n\ninterface CatalogStageProps {\n name: string;\n content: KerfUiContent;\n backgroundStyle?: CatalogBackgroundStyle;\n rootAttributes?: CatalogStageRootAttributes;\n}\n\n/** The preview canvas for an active Catalog entry. */\nexport function CatalogStage({\n name,\n content,\n backgroundStyle = 'checkerboard',\n rootAttributes = {},\n}: CatalogStageProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n protectedAttributes,\n );\n return (\n <section\n {...safeRootAttributes}\n class=\"kui-catalog__stage\"\n data-catalog-stage\n data-background-style={backgroundStyle}\n aria-label={`${name} preview`}\n >\n <div class=\"kui-catalog__canvas\">{content}</div>\n </section>\n );\n}\n","import { Scan } from 'lucide';\n\nimport {\n ToolbarActionLink,\n ToolbarControlGroup,\n} from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport type { CatalogEntry, CatalogUxReview } from '../types.js';\nimport { uxReviewCaptureUrl } from '../ux-review.js';\n\n/**\n * The \"Capture region\" header link for the active entry. `wireCatalog` adds\n * the page URL to its context when it is followed, since the URL can change\n * after this render (`urlParam`).\n */\nexport function CatalogUxReviewLink({\n uxReview: { projectDirectory, name },\n entry,\n category,\n}: {\n uxReview: CatalogUxReview & { name: string };\n entry: CatalogEntry;\n category: string;\n}) {\n return (\n <ToolbarControlGroup\n appearance=\"borderless\"\n single\n size=\"compact\"\n content=\"mixed\"\n buttonAppearance=\"push\"\n >\n <ToolbarActionLink\n href={uxReviewCaptureUrl({\n projectDirectory,\n title: `${name}: ${entry.name}`,\n context: `${name} catalog\\nSelected ${category}: ${entry.name} (${entry.id})`,\n })}\n label=\"Capture region\"\n ariaLabel={`Capture ${entry.name} in UX Review`}\n icon={<LucideIcon icon={Scan} name=\"scan\" />}\n />\n </ToolbarControlGroup>\n );\n}\n","import { Contrast, Moon, Sun, X, ZapOff } from 'lucide';\n\nimport { PopupMenu } from '../../components/actions/popup-menu/popup-menu.js';\nimport { ToolbarControlGroup } from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../components/actions/toolbar-text/toolbar-text.js';\nimport { ListInsetControl } from '../../components/collections/list-inset-control/list-inset-control.js';\nimport { ListInsetText } from '../../components/collections/list-inset-text/list-inset-text.js';\nimport { TokenSearchField } from '../../components/forms/token-search-field/token-search-field.js';\nimport { Workbench } from '../../components/layout/workbench/workbench.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport { Text } from '../../components/typography/text/text.js';\nimport type { CatalogEntry, CatalogProps, CatalogSection } from '../types.js';\nimport { CatalogResourceFooter } from './catalog-resource-footer.js';\nimport { CatalogSidebar } from './catalog-sidebar.js';\nimport { CatalogStage } from './catalog-stage.js';\nimport { CatalogUxReviewLink } from './catalog-ux-review-link.js';\n\nfunction findEntry(\n sections: readonly CatalogSection[],\n id: string,\n): { entry: CatalogEntry; category: string } | undefined {\n for (const section of sections) {\n for (const entry of section.entries)\n if (entry.id === id) return { entry, category: section.category };\n }\n return undefined;\n}\n\n/**\n * Controlled, stateless component-catalog shell: a `Workbench` whose left rail\n * is the catalog navigation and whose work area is the active entry — its\n * toolbar, description, preview stage, and resource footer. The sidebar's\n * standard toggle moves into the entry toolbar while it is collapsed, and on\n * a small screen the sidebar overlays the stage like any Workbench rail.\n * An entry's `settings` render in a right-rail settings pane beside the stage,\n * with the same toggle relocation and small-screen overlay.\n */\nexport function Catalog({\n id = 'kui-catalog',\n brand,\n sections,\n active,\n content,\n collapsed = false,\n theme,\n increasedContrast,\n reducedMotion,\n backgroundControl = false,\n headerActions,\n settings,\n settingsCollapsed = false,\n settingsPanel = {},\n uxReview,\n secondarySections,\n sidebarFooter,\n status,\n backgroundStyle,\n stageRootAttributes,\n selectAction = 'catalog-select',\n toggleSidebarAction = 'catalog-toggle-sidebar',\n toggleThemeAction = 'catalog-toggle-theme',\n toggleContrastAction = 'catalog-toggle-contrast',\n toggleMotionAction = 'catalog-toggle-motion',\n selectBackgroundAction = 'catalog-select-background',\n toggleSecondaryAction = 'catalog-toggle-secondary',\n toggleSettingsAction = 'catalog-toggle-settings',\n headerPlacement = 'auto',\n footerPlacement = 'auto',\n sidebar = {},\n mainToolbar,\n footerToolbar,\n className = '',\n slot,\n}: CatalogProps) {\n const found =\n findEntry(sections, active) ??\n (secondarySections\n ? findEntry(secondarySections.sections, active)\n : undefined);\n const selected = found?.entry;\n const name = selected?.name ?? '';\n const nextTheme = theme === 'dark' ? 'light' : 'dark';\n const catalogName = `${brand.title} catalog`;\n const displayControls =\n increasedContrast !== undefined ||\n reducedMotion !== undefined ||\n backgroundControl ||\n theme !== undefined;\n const hasSettings =\n settings !== undefined && settings !== null && settings !== false;\n const settingsTitle = settingsPanel.title ?? 'Settings';\n\n return (\n <main\n class={`kui-catalog ${className}`.trim()}\n data-component=\"catalog\"\n data-sidebar-collapsed={String(collapsed)}\n data-settings-collapsed={\n hasSettings ? String(settingsCollapsed) : undefined\n }\n slot={slot}\n >\n <Workbench\n id={id}\n label={catalogName}\n leftRail={{\n label: catalogName,\n size: sidebar.size ?? 288,\n resizable: sidebar.resizable,\n separator: sidebar.separator,\n collapseMotion: sidebar.collapseMotion,\n presentation: sidebar.presentation,\n responsiveOverlayAt: sidebar.responsiveOverlayAt,\n compactOverlay: sidebar.compactOverlay,\n collapsed,\n toolbar: {\n ...sidebar.toolbar,\n label: `${catalogName} header`,\n title: (\n <>\n {brand.logoUrl ? (\n <ToolbarControlGroup\n appearance=\"borderless\"\n content=\"avatar\"\n shape=\"rounded\"\n single\n avatarImage={brand.logoUrl}\n >\n {null}\n </ToolbarControlGroup>\n ) : null}\n <ToolbarText text={brand.title} size=\"large\" headingLevel={1} />\n </>\n ),\n toggle: { action: toggleSidebarAction, name: catalogName },\n },\n header: (\n <ListInsetControl sides=\"rbl\">\n <TokenSearchField\n id={`${id}-filter`}\n label=\"Filter catalog\"\n placeholder=\"Filter items or headings\"\n editorAttributes={{ 'data-catalog-filter': '' }}\n trailingAction={{\n icon: <LucideIcon icon={X} name=\"x\" />,\n label: 'Clear filter',\n action: 'catalog-clear-filter',\n }}\n />\n </ListInsetControl>\n ),\n content: (\n <CatalogSidebar\n brand={brand}\n sections={sections}\n active={active}\n secondarySections={secondarySections}\n footer={sidebarFooter}\n selectAction={selectAction}\n toggleSecondaryAction={toggleSecondaryAction}\n />\n ),\n }}\n rightRail={\n hasSettings\n ? {\n label: name ? `${name} ${settingsTitle}` : settingsTitle,\n size: settingsPanel.size ?? 288,\n resizable: settingsPanel.resizable,\n separator: settingsPanel.separator,\n collapseMotion: settingsPanel.collapseMotion,\n presentation: settingsPanel.presentation,\n responsiveOverlayAt: settingsPanel.responsiveOverlayAt,\n compactOverlay: settingsPanel.compactOverlay,\n collapsed: settingsCollapsed,\n toolbar: {\n ...settingsPanel.toolbar,\n label: `${settingsTitle} header`,\n // A peripheral rail beside the xl entry title takes the\n // default title size, so it never truncates at 288px.\n title: <ToolbarText text={settingsTitle} headingLevel={2} />,\n toggle: {\n action: toggleSettingsAction,\n name: settingsTitle.toLocaleLowerCase(),\n },\n },\n content: settings,\n }\n : undefined\n }\n mainToolbar={{\n ...mainToolbar,\n label: `${name} header`,\n // The entry title stays whole; actions wrap below it when narrow.\n responsive: mainToolbar?.responsive ?? 'wrap',\n title: <ToolbarText text={name} size=\"xlarge\" headingLevel={2} />,\n trailing: (\n <>\n {headerActions}\n {uxReview && found ? (\n <CatalogUxReviewLink\n uxReview={{ ...uxReview, name: uxReview.name ?? brand.title }}\n entry={found.entry}\n category={found.category}\n />\n ) : null}\n {displayControls ? (\n <ToolbarControlGroup\n appearance=\"borderless\"\n content=\"mixed\"\n size=\"compact\"\n overflow=\"wrap\"\n buttonAppearance=\"push\"\n label=\"Catalog display settings\"\n >\n {increasedContrast !== undefined ? (\n <button\n type=\"button\"\n data-action={toggleContrastAction}\n aria-pressed={String(increasedContrast)}\n >\n <LucideIcon icon={Contrast} name=\"contrast\" />\n <span>Contrast</span>\n </button>\n ) : null}\n {reducedMotion !== undefined ? (\n <button\n type=\"button\"\n data-action={toggleMotionAction}\n aria-pressed={String(reducedMotion)}\n >\n <LucideIcon icon={ZapOff} name=\"zap-off\" />\n <span>Reduce motion</span>\n </button>\n ) : null}\n {backgroundControl ? (\n <PopupMenu\n text=\"Background\"\n rootAttributes={{ 'data-catalog-background-menu': '' }}\n items={[\n { value: 'checkerboard', label: 'Checkerboard' },\n {\n value: 'vertical-stripes',\n label: 'Vertical stripes',\n },\n { value: 'layout-guide', label: 'Layout guide' },\n { value: 'surface', label: 'Surface' },\n { value: 'sunken', label: 'Sunken' },\n ].map(({ value, label }) => ({\n label,\n action: selectBackgroundAction,\n checked: (backgroundStyle ?? 'checkerboard') === value,\n attributes: { 'data-background-choice': value },\n }))}\n />\n ) : null}\n {theme ? (\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 ) : null}\n </ToolbarControlGroup>\n ) : null}\n </>\n ),\n }}\n mainPane={{ appearance: 'sunken' }}\n mainFooter={\n <CatalogResourceFooter\n name={name}\n resources={selected?.resources ?? []}\n related={selected?.related ?? []}\n status={status}\n selectAction={selectAction}\n toolbar={footerToolbar}\n />\n }\n mainHeader={\n selected?.description ? (\n <ListInsetText\n sides=\"trbl\"\n rootAttributes={{ 'data-catalog-description': '' }}\n >\n <Text variant=\"span\">{selected.description}</Text>\n </ListInsetText>\n ) : null\n }\n mainHeaderPlacement={headerPlacement}\n mainFooterPlacement={footerPlacement}\n main={\n <CatalogStage\n name={name}\n content={content}\n backgroundStyle={backgroundStyle}\n rootAttributes={stageRootAttributes}\n />\n }\n />\n </main>\n );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nimport { ListHeader } from '../../components/collections/list-header/list-header.js';\nimport { ListInsetText } from '../../components/collections/list-inset-text/list-inset-text.js';\nimport { Text } from '../../components/typography/text/text.js';\nimport type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../shared/dom/extension-attributes.js';\n\n/** How a specimen aligns its visible edge with its `ListHeader` label. */\nexport type CatalogExampleAlign =\n 'glyph' | 'inline-control' | 'text-trigger' | 'none';\n\nexport interface CatalogExampleViewport {\n layout?: 'grid' | 'flex' | 'flex-column';\n width?: 'full' | 'compact' | 'medium' | 'wide' | 'text' | 'control';\n /** Fixed specimen height; `app` frames an application-sized recipe or layout.\n * A fixed height is definite, so a child that fills with `height: 100%`\n * (a horizontal `ResizableRegion`, say) spans the whole frame. */\n height?: 'short' | 'reduced' | 'medium' | 'tall' | 'app';\n /** A minimum the frame may grow past. It is not a definite height: a child\n * sized with `height: 100%` falls back to its content height, so use\n * `height` when the specimen must fill the frame. */\n minHeight?: 'short' | 'medium';\n frame?: 'solid' | 'dashed';\n surface?: 'default' | 'lowered';\n overflow?: 'hidden' | 'auto-x';\n responsive?: 'roomy-only';\n shadow?: boolean;\n /** Public component custom properties applied to the specimen viewport. */\n tokens?: Readonly<Record<`--${string}`, string>>;\n}\n\nconst protectedAttributes = 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\nexport interface CatalogExampleProps {\n label?: string;\n note?: SafeHtml | string;\n align?: CatalogExampleAlign;\n /** Optional catalog-owned constraints for demonstrating layout components. */\n viewport?: CatalogExampleViewport;\n /** Replacement guidance shown when a roomy-only viewport is hidden. */\n compactFallback?: SafeHtml | string;\n rootAttributes?: CatalogExampleRootAttributes;\n className?: string;\n children?: KerfUiContent;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** A labeled catalog specimen with optional explanatory text and alignment. */\nexport function CatalogExample({\n label,\n note,\n align = 'none',\n viewport,\n compactFallback,\n rootAttributes = {},\n className = '',\n children,\n slot,\n}: CatalogExampleProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n protectedAttributes,\n );\n const viewportStyle = viewport?.tokens\n ? Object.entries(viewport.tokens)\n .map(([name, value]) => `${name}:${value}`)\n .join(';')\n : undefined;\n const specimen = viewport ? (\n <div\n class=\"kui-catalog-example__viewport\"\n data-catalog-example-viewport\n data-layout={viewport.layout}\n data-width={viewport.width}\n data-height={viewport.height}\n data-min-height={viewport.minHeight}\n data-frame={viewport.frame}\n data-surface={viewport.surface}\n data-overflow={viewport.overflow}\n data-responsive={viewport.responsive}\n data-shadow={viewport.shadow ? 'true' : undefined}\n style={viewportStyle}\n >\n {children}\n </div>\n ) : (\n children\n );\n\n return (\n <section\n {...safeRootAttributes}\n class={`kui-catalog-example ${className}`.trim()}\n data-catalog-example\n data-align={align}\n slot={slot}\n >\n {label !== undefined ? (\n <ListHeader\n label={label}\n width=\"content\"\n rootAttributes={{ 'data-catalog-example-label': '' }}\n />\n ) : null}\n {note !== undefined ? (\n <ListInsetText\n sides=\"rl\"\n className=\"kui-catalog-example__note\"\n rootAttributes={{ 'data-catalog-example-note': '' }}\n >\n <Text variant=\"span\" size=\"compact\" tone=\"quiet\">\n {note}\n </Text>\n </ListInsetText>\n ) : null}\n {compactFallback !== undefined ? (\n <Text tone=\"quiet\" className=\"kui-catalog-example__compact-fallback\">\n {compactFallback}\n </Text>\n ) : null}\n {specimen}\n </section>\n );\n}\n","import type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../shared/dom/extension-attributes.js';\n\nconst protectedAttributes = 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 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 CatalogExampleStackProps {\n label?: string;\n rootAttributes?: CatalogExampleStackRootAttributes;\n className?: string;\n children?: KerfUiContent;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** A vertically stacked group of catalog examples. */\nexport function CatalogExampleStack({\n label,\n rootAttributes = {},\n className = '',\n children,\n slot,\n}: CatalogExampleStackProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n protectedAttributes,\n );\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 slot={slot}\n >\n {children}\n </section>\n );\n}\n"]}
|
|
@@ -73,10 +73,27 @@ interface CatalogSidebarConfig extends Pick<WorkbenchPanel, 'resizable' | 'separ
|
|
|
73
73
|
/** The sidebar header toolbar's configuration (default: no divider; its pane draws one while scrolled). */
|
|
74
74
|
toolbar?: ToolbarConfig;
|
|
75
75
|
}
|
|
76
|
+
/**
|
|
77
|
+
* The Catalog settings pane's configuration, forwarded to its Workbench right
|
|
78
|
+
* rail. Everything is optional; omitted fields keep the Catalog's defaults.
|
|
79
|
+
*/
|
|
80
|
+
interface CatalogSettingsConfig extends Pick<WorkbenchPanel, 'resizable' | 'separator' | 'collapseMotion' | 'presentation' | 'responsiveOverlayAt' | 'compactOverlay'> {
|
|
81
|
+
/**
|
|
82
|
+
* Pane width in px (default 288). With `resizable`, it is the current
|
|
83
|
+
* width: render the app's size signal here and hand the same signal to
|
|
84
|
+
* `wireCatalog`'s `settingsSize`, which writes each committed resize to it.
|
|
85
|
+
*/
|
|
86
|
+
size?: number;
|
|
87
|
+
/** The pane's title (default `Settings`); it also names the toggle. */
|
|
88
|
+
title?: string;
|
|
89
|
+
/** The pane header toolbar's configuration. */
|
|
90
|
+
toolbar?: ToolbarConfig;
|
|
91
|
+
}
|
|
76
92
|
interface CatalogProps {
|
|
77
93
|
/**
|
|
78
94
|
* The catalog's `id` (default `kui-catalog`). Its Workbench derives the
|
|
79
|
-
* sidebar's id from it (`<id>-left-rail`)
|
|
95
|
+
* sidebar's id from it (`<id>-left-rail`) and the settings pane's
|
|
96
|
+
* (`<id>-right-rail`), which `wireCatalog` wires.
|
|
80
97
|
*/
|
|
81
98
|
id?: string;
|
|
82
99
|
brand: CatalogBrand;
|
|
@@ -92,6 +109,29 @@ interface CatalogProps {
|
|
|
92
109
|
/** Show the preview background chooser; `backgroundStyle` remains app-owned. */
|
|
93
110
|
backgroundControl?: boolean;
|
|
94
111
|
headerActions?: KerfUiContent;
|
|
112
|
+
/**
|
|
113
|
+
* The active entry's settings (variant and state controls for its preview).
|
|
114
|
+
* When supplied, the Catalog renders a settings pane beside the stage — a
|
|
115
|
+
* Workbench right rail titled `settingsPanel.title` — with the standard
|
|
116
|
+
* toggle: in the pane's header while it is open, at the end of the entry
|
|
117
|
+
* toolbar while it is collapsed. Omit it (or pass `null`) for an entry with
|
|
118
|
+
* no settings; neither the pane nor the toggle renders. Below the
|
|
119
|
+
* Workbench's `narrow` breakpoint the pane overlays the stage.
|
|
120
|
+
*/
|
|
121
|
+
settings?: KerfUiContent;
|
|
122
|
+
/**
|
|
123
|
+
* Whether the settings pane is collapsed (default `false`). The app owns
|
|
124
|
+
* it; hand the same signal to `wireCatalog`'s `settingsCollapsed`, which
|
|
125
|
+
* flips it from the toggle and makes the pane a transient overlay on a
|
|
126
|
+
* small screen.
|
|
127
|
+
*/
|
|
128
|
+
settingsCollapsed?: boolean;
|
|
129
|
+
/**
|
|
130
|
+
* The settings pane's title, size, resizing, and overlay configuration
|
|
131
|
+
* (default: `Settings`, 288px, not resizable, an overlay below the
|
|
132
|
+
* Workbench's `narrow` breakpoint, `inset` in a compact Workbench).
|
|
133
|
+
*/
|
|
134
|
+
settingsPanel?: CatalogSettingsConfig;
|
|
95
135
|
/**
|
|
96
136
|
* Show a "Capture region" link to UX Review after `headerActions`, preset
|
|
97
137
|
* with the project and the active entry. Supply it once the project is known
|
|
@@ -112,6 +152,8 @@ interface CatalogProps {
|
|
|
112
152
|
toggleMotionAction?: string;
|
|
113
153
|
selectBackgroundAction?: string;
|
|
114
154
|
toggleSecondaryAction?: string;
|
|
155
|
+
/** The settings pane toggle's `data-action` (default `catalog-toggle-settings`). */
|
|
156
|
+
toggleSettingsAction?: string;
|
|
115
157
|
/**
|
|
116
158
|
* Whether the entry toolbar and description stay pinned above the preview
|
|
117
159
|
* (`fixed`), scroll away with it (`scroll`), or stay pinned while the entry
|
|
@@ -144,4 +186,4 @@ interface CatalogProps {
|
|
|
144
186
|
slot?: string;
|
|
145
187
|
}
|
|
146
188
|
|
|
147
|
-
export type { CatalogResource as C, CatalogBackgroundStyle as a, CatalogProps as b, CatalogBrand as c, CatalogEntry as d, CatalogRelated as e, CatalogSecondaryGroup as f, CatalogSection as g,
|
|
189
|
+
export type { CatalogResource as C, CatalogBackgroundStyle as a, CatalogProps as b, CatalogBrand as c, CatalogEntry as d, CatalogRelated as e, CatalogSecondaryGroup as f, CatalogSection as g, CatalogSettingsConfig as h, CatalogStageRootAttributes as i, CatalogUxReview as j };
|
package/dist/wire-catalog.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Signal } from 'kerfjs';
|
|
2
|
-
import { a as CatalogBackgroundStyle } from './types-
|
|
2
|
+
import { a as CatalogBackgroundStyle } from './types-CVgIwSdq.js';
|
|
3
3
|
import './toolbar.js';
|
|
4
4
|
import './semantic-content-BbzjvSu9.js';
|
|
5
5
|
import './sides-BPSWde0A.js';
|
|
@@ -28,6 +28,11 @@ interface WireCatalogOptions {
|
|
|
28
28
|
onToggleMotion?: () => void;
|
|
29
29
|
/** Report a preview background choice; the app updates `backgroundStyle`. */
|
|
30
30
|
onSelectBackground?: (style: CatalogBackgroundStyle) => void;
|
|
31
|
+
/**
|
|
32
|
+
* Invoked when the settings pane toggle is activated. With
|
|
33
|
+
* `settingsCollapsed`, `wireCatalog` has already flipped the signal.
|
|
34
|
+
*/
|
|
35
|
+
onToggleSettings?: () => void;
|
|
31
36
|
/** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */
|
|
32
37
|
onToggleSecondary?: () => void;
|
|
33
38
|
/** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */
|
|
@@ -44,6 +49,7 @@ interface WireCatalogOptions {
|
|
|
44
49
|
toggleMotionAction?: string;
|
|
45
50
|
selectBackgroundAction?: string;
|
|
46
51
|
toggleSecondaryAction?: string;
|
|
52
|
+
toggleSettingsAction?: string;
|
|
47
53
|
/**
|
|
48
54
|
* The sidebar's app-owned collapsed flag. With it, the catalog's Workbench
|
|
49
55
|
* sidebar is wired like any Workbench rail: it becomes a transient overlay
|
|
@@ -63,6 +69,25 @@ interface WireCatalogOptions {
|
|
|
63
69
|
* catalog remembers the user's sidebar width.
|
|
64
70
|
*/
|
|
65
71
|
sidebarStorageKey?: string;
|
|
72
|
+
/**
|
|
73
|
+
* The settings pane's app-owned collapsed flag, rendered as the Catalog's
|
|
74
|
+
* `settingsCollapsed`. With it, `wireCatalog` owns the pane's toggle (each
|
|
75
|
+
* press flips the signal) and wires the pane like any Workbench rail: a
|
|
76
|
+
* transient overlay on a small screen (collapsed as the breakpoint applies,
|
|
77
|
+
* closed on Escape or a press outside, focus handed back).
|
|
78
|
+
*/
|
|
79
|
+
settingsCollapsed?: Signal<boolean>;
|
|
80
|
+
/**
|
|
81
|
+
* The app-owned settings pane width signal for a Catalog rendered with
|
|
82
|
+
* `settingsPanel={{ resizable: true, size: settingsSize.value }}`. Each
|
|
83
|
+
* committed drag or keyboard resize is written to it.
|
|
84
|
+
*/
|
|
85
|
+
settingsSize?: Signal<number>;
|
|
86
|
+
/**
|
|
87
|
+
* With `settingsSize`, load and save the width under this storage key so
|
|
88
|
+
* the catalog remembers the user's settings pane width.
|
|
89
|
+
*/
|
|
90
|
+
settingsStorageKey?: string;
|
|
66
91
|
/** The Catalog's `id`, when it is not the default `kui-catalog`. */
|
|
67
92
|
id?: string;
|
|
68
93
|
/**
|
|
@@ -93,13 +118,13 @@ interface CatalogRevealOptions {
|
|
|
93
118
|
declare function revealCatalogEntry(root: HTMLElement, id: string, { block, inline, behavior, media, }?: CatalogRevealOptions): () => void;
|
|
94
119
|
/**
|
|
95
120
|
* Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar
|
|
96
|
-
* item selection (and the related-entry popup menu), the sidebar collapse toggle,
|
|
97
|
-
* the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates
|
|
121
|
+
* item selection (and the related-entry popup menu), the sidebar collapse toggle,
|
|
122
|
+
* the settings pane toggle, and the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates
|
|
98
123
|
* them in the callbacks; optionally mirror the active id into the URL via `urlParam`.
|
|
99
124
|
* It also wires the scroll dividers below root (`wireScrollDividers`), so the
|
|
100
125
|
* catalog's panes and every example in it show their chrome dividers only
|
|
101
126
|
* while scrolled. Returns a disposer.
|
|
102
127
|
*/
|
|
103
|
-
declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleContrast, onToggleMotion, onSelectBackground, onToggleSecondary, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, collapsed, sidebarSize, sidebarStorageKey, id: catalogId, onUxReviewProject, }: WireCatalogOptions): () => void;
|
|
128
|
+
declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleContrast, onToggleMotion, onSelectBackground, onToggleSecondary, onToggleSettings, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSettingsAction, collapsed, sidebarSize, sidebarStorageKey, settingsCollapsed, settingsSize, settingsStorageKey, id: catalogId, onUxReviewProject, }: WireCatalogOptions): () => void;
|
|
104
129
|
|
|
105
130
|
export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog };
|
package/dist/wire-catalog.js
CHANGED
|
@@ -149,6 +149,7 @@ function wireCatalog(root, {
|
|
|
149
149
|
onToggleMotion,
|
|
150
150
|
onSelectBackground,
|
|
151
151
|
onToggleSecondary,
|
|
152
|
+
onToggleSettings,
|
|
152
153
|
urlParam,
|
|
153
154
|
revealSelection,
|
|
154
155
|
selectAction = "catalog-select",
|
|
@@ -158,9 +159,13 @@ function wireCatalog(root, {
|
|
|
158
159
|
toggleMotionAction = "catalog-toggle-motion",
|
|
159
160
|
selectBackgroundAction = "catalog-select-background",
|
|
160
161
|
toggleSecondaryAction = "catalog-toggle-secondary",
|
|
162
|
+
toggleSettingsAction = "catalog-toggle-settings",
|
|
161
163
|
collapsed,
|
|
162
164
|
sidebarSize,
|
|
163
165
|
sidebarStorageKey,
|
|
166
|
+
settingsCollapsed,
|
|
167
|
+
settingsSize,
|
|
168
|
+
settingsStorageKey,
|
|
164
169
|
id: catalogId = "kui-catalog",
|
|
165
170
|
onUxReviewProject
|
|
166
171
|
}) {
|
|
@@ -273,19 +278,30 @@ function wireCatalog(root, {
|
|
|
273
278
|
)
|
|
274
279
|
);
|
|
275
280
|
}
|
|
276
|
-
if (
|
|
281
|
+
if (settingsCollapsed || onToggleSettings) {
|
|
277
282
|
disposers.push(
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
collapsed,
|
|
283
|
-
size: sidebarSize,
|
|
284
|
-
storageKey: sidebarStorageKey
|
|
285
|
-
}
|
|
286
|
-
}
|
|
283
|
+
delegate(root, "click", `[data-action="${toggleSettingsAction}"]`, () => {
|
|
284
|
+
if (settingsCollapsed)
|
|
285
|
+
settingsCollapsed.value = !settingsCollapsed.peek();
|
|
286
|
+
onToggleSettings?.();
|
|
287
287
|
})
|
|
288
288
|
);
|
|
289
|
+
}
|
|
290
|
+
const panels = {};
|
|
291
|
+
if (collapsed || sidebarSize)
|
|
292
|
+
panels.leftRail = {
|
|
293
|
+
collapsed,
|
|
294
|
+
size: sidebarSize,
|
|
295
|
+
storageKey: sidebarStorageKey
|
|
296
|
+
};
|
|
297
|
+
if (settingsCollapsed || settingsSize)
|
|
298
|
+
panels.rightRail = {
|
|
299
|
+
collapsed: settingsCollapsed,
|
|
300
|
+
size: settingsSize,
|
|
301
|
+
storageKey: settingsStorageKey
|
|
302
|
+
};
|
|
303
|
+
if (panels.leftRail || panels.rightRail)
|
|
304
|
+
disposers.push(wireWorkbench(root, { id: catalogId, panels }));
|
|
289
305
|
if (onUxReviewProject)
|
|
290
306
|
disposers.push(
|
|
291
307
|
delegate(
|
package/dist/wire-catalog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/catalog/wiring/wire-catalog.ts"],"names":["view"],"mappings":"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","file":"wire-catalog.js","sourcesContent":["import { delegate, type Signal } from 'kerfjs';\n\nimport { readTokenSearchField } from '../../components/forms/token-search-field/token-search-field.js';\nimport { wireWorkbench } from '../../components/layout/workbench/wiring/wire-workbench.js';\nimport { wireScrollDividers } from '../../wiring/wire-scroll-dividers.js';\nimport type { CatalogBackgroundStyle } from '../types.js';\nimport { loadUxReviewProject } from '../ux-review.js';\n\nexport interface WireCatalogOptions {\n /** Invoked with the entry id when a sidebar item or a related-entry option is chosen. */\n onSelect: (id: string) => void;\n /** Invoked when the sidebar collapse/expand control is activated. */\n onToggleSidebar?: () => void;\n /** Invoked when the theme toggle is activated. */\n onToggleTheme?: () => void;\n /** Report a contrast-toggle press; the app updates its signal and applies the preference. */\n onToggleContrast?: () => void;\n /** Report a reduced-motion-toggle press; the app updates its signal and applies the preference. */\n onToggleMotion?: () => void;\n /** Report a preview background choice; the app updates `backgroundStyle`. */\n onSelectBackground?: (style: CatalogBackgroundStyle) => void;\n /** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */\n onToggleSecondary?: () => void;\n /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */\n urlParam?: string;\n /**\n * Reveal the chosen sidebar row after selection. `true` uses desktop-safe\n * defaults; pass options to customize scroll alignment or the media guard.\n */\n revealSelection?: boolean | CatalogRevealOptions;\n selectAction?: string;\n toggleSidebarAction?: string;\n toggleThemeAction?: string;\n toggleContrastAction?: string;\n toggleMotionAction?: string;\n selectBackgroundAction?: string;\n toggleSecondaryAction?: string;\n /**\n * The sidebar's app-owned collapsed flag. With it, the catalog's Workbench\n * sidebar is wired like any Workbench rail: it becomes a transient overlay\n * on a small screen (collapsed as the breakpoint applies, closed on Escape\n * or a press outside, focus handed back), and choosing an entry from the\n * open overlay closes it.\n */\n collapsed?: Signal<boolean>;\n /**\n * The app-owned sidebar width signal for a Catalog rendered with\n * `sidebar={{ resizable: true, size: sidebarSize.value }}`. Each committed\n * drag or keyboard resize is written to it.\n */\n sidebarSize?: Signal<number>;\n /**\n * With `sidebarSize`, load and save the width under this storage key so the\n * catalog remembers the user's sidebar width.\n */\n sidebarStorageKey?: string;\n /** The Catalog's `id`, when it is not the default `kui-catalog`. */\n id?: string;\n /**\n * Ask the page's server once for its UX Review project directory (served by\n * `uxReviewPlugin` from `@kerfjs/ui/vite-ux-review`) and report it, so the\n * app can render the Catalog with `uxReview`. Never called on static\n * hosting or a server without the plugin.\n */\n onUxReviewProject?: (projectDirectory: string) => void;\n}\n\nexport interface CatalogRevealOptions {\n /** Scroll alignment within the sidebar. Default `'nearest'`. */\n block?: ScrollLogicalPosition;\n /** Cross-axis alignment. Default `'nearest'`. */\n inline?: ScrollLogicalPosition;\n /** Scroll behavior. Default `'auto'`. */\n behavior?: ScrollBehavior;\n /**\n * Only reveal when this media query matches. Defaults to the Catalog's\n * desktop layout; pass `false` to reveal at every viewport size.\n */\n media?: string | false;\n}\n\n// The Workbench keeps the sidebar inline above its `narrow` breakpoint (704px).\nconst catalogDesktopMedia = '(min-width: 44.01rem)';\n\n/** Keep the sidebar filter local to the shared Catalog, including across controlled rerenders. */\nfunction wireCatalogFilter(root: HTMLElement): () => void {\n const view = root.ownerDocument.defaultView!;\n let filterValue = '';\n let query = '';\n let currentEditor: HTMLElement | null = null;\n const matches = (name: string) => name.toLocaleLowerCase().includes(query);\n const apply = () => {\n const editor = root.querySelector<HTMLElement>('[data-catalog-filter]');\n const nav = root.querySelector<HTMLElement>('[data-catalog-sidebar]');\n if (!editor || !nav) return;\n if (editor !== currentEditor) {\n currentEditor = editor;\n if (readTokenSearchField(editor).query !== filterValue)\n editor.textContent = filterValue;\n }\n const field = editor.closest<HTMLElement>(\n '[data-component=\"token-search-field\"]',\n )!;\n field.dataset.catalogFilterActive = String(Boolean(query));\n const placeholderVisible = String(!filterValue);\n if (field.dataset.placeholderVisible !== placeholderVisible)\n field.dataset.placeholderVisible = placeholderVisible;\n const clear = field.querySelector<HTMLElement>(\n '[data-action=\"catalog-clear-filter\"]',\n )!;\n clear.style.display = query ? '' : 'none';\n nav.dataset.catalogFilterActive = String(Boolean(query));\n let visibleEntries = 0;\n for (const section of nav.querySelectorAll<HTMLElement>(\n '[data-catalog-section]',\n )) {\n const group = section.closest<HTMLElement>(\n '[data-catalog-secondary-group]',\n );\n const headingMatches =\n matches(section.dataset.catalogSection!) ||\n (group !== null && matches(group.dataset.catalogSecondaryGroup!));\n let sectionEntries = 0;\n for (const entry of section.querySelectorAll<HTMLElement>(\n '[data-catalog-entry-name]',\n )) {\n const visible =\n !query || headingMatches || matches(entry.dataset.catalogEntryName!);\n entry.hidden = !visible;\n if (visible) sectionEntries++;\n }\n section.hidden = Boolean(query) && sectionEntries === 0;\n visibleEntries += sectionEntries;\n }\n for (const group of nav.querySelectorAll<HTMLElement>(\n '[data-catalog-secondary-group]',\n )) {\n group.hidden =\n Boolean(query) &&\n !Array.from(\n group.querySelectorAll<HTMLElement>('[data-catalog-section]'),\n ).some((section) => !section.hidden);\n const toggle = group.querySelector<HTMLElement>('[aria-expanded]');\n const content = group.querySelector<HTMLElement>(\n '[data-catalog-secondary-collapsed]',\n );\n if (toggle && content) {\n const expanded = query\n ? !group.hidden\n : content.dataset.catalogSecondaryCollapsed !== 'true';\n toggle.setAttribute('aria-expanded', String(expanded));\n const arrow = toggle.querySelector<HTMLElement>(\n '[data-component=\"disclosure-arrow\"]',\n );\n if (arrow) {\n arrow.dataset.open = String(expanded);\n arrow.dataset.direction = expanded ? 'down' : 'right';\n arrow.style.setProperty(\n '--_kui-disclosure-arrow-rotation',\n expanded ? '90deg' : '0deg',\n );\n }\n }\n }\n const empty = nav.querySelector<HTMLElement>(\n '[data-catalog-filter-empty]',\n )!;\n empty.dataset.visible = String(Boolean(query) && visibleEntries === 0);\n };\n const onInput = (event: Event) => {\n const target = event.target as HTMLElement | null;\n const editor = target?.closest<HTMLElement>('[data-catalog-filter]');\n if (!editor || !root.contains(editor)) return;\n filterValue = readTokenSearchField(editor).query;\n query = filterValue.trim().toLocaleLowerCase();\n apply();\n };\n const onClick = (event: Event) => {\n const target = event.target as Element;\n if (!target.closest('[data-action=\"catalog-clear-filter\"]')) return;\n const editor = root.querySelector<HTMLElement>('[data-catalog-filter]')!;\n filterValue = '';\n query = '';\n editor.textContent = '';\n apply();\n editor.focus();\n };\n root.addEventListener('input', onInput);\n root.addEventListener('click', onClick);\n const observer = new view.MutationObserver(() => {\n if (filterValue) apply();\n });\n observer.observe(root, {\n attributes: true,\n attributeFilter: ['data-placeholder-visible'],\n childList: true,\n subtree: true,\n });\n apply();\n return () => {\n root.removeEventListener('input', onInput);\n root.removeEventListener('click', onClick);\n observer.disconnect();\n };\n}\n\n/**\n * Reveal one Catalog sidebar entry after the controlled render settles without\n * moving focus. Returns a cancellation function for rapid selection changes.\n */\nexport function revealCatalogEntry(\n root: HTMLElement,\n id: string,\n {\n block = 'nearest',\n inline = 'nearest',\n behavior = 'auto',\n media = catalogDesktopMedia,\n }: CatalogRevealOptions = {},\n): () => void {\n const view = root.ownerDocument.defaultView;\n if (!view || (media && !view.matchMedia(media).matches)) return () => {};\n const frame = view.requestAnimationFrame(() => {\n for (const item of root.querySelectorAll<HTMLElement>('[data-item-id]')) {\n if (item.dataset.itemId !== id) continue;\n item.scrollIntoView({ block, inline, behavior });\n break;\n }\n });\n return () => view.cancelAnimationFrame(frame);\n}\n\n/**\n * Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar\n * item selection (and the related-entry popup menu), the sidebar collapse toggle, and\n * the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates\n * them in the callbacks; optionally mirror the active id into the URL via `urlParam`.\n * It also wires the scroll dividers below root (`wireScrollDividers`), so the\n * catalog's panes and every example in it show their chrome dividers only\n * while scrolled. Returns a disposer.\n */\nexport function wireCatalog(\n root: HTMLElement,\n {\n onSelect,\n onToggleSidebar,\n onToggleTheme,\n onToggleContrast,\n onToggleMotion,\n onSelectBackground,\n onToggleSecondary,\n urlParam,\n revealSelection,\n selectAction = 'catalog-select',\n toggleSidebarAction = 'catalog-toggle-sidebar',\n toggleThemeAction = 'catalog-toggle-theme',\n toggleContrastAction = 'catalog-toggle-contrast',\n toggleMotionAction = 'catalog-toggle-motion',\n selectBackgroundAction = 'catalog-select-background',\n toggleSecondaryAction = 'catalog-toggle-secondary',\n collapsed,\n sidebarSize,\n sidebarStorageKey,\n id: catalogId = 'kui-catalog',\n onUxReviewProject,\n }: WireCatalogOptions,\n): () => void {\n let disposed = false;\n const view = root.ownerDocument.defaultView;\n if (onUxReviewProject && view)\n void loadUxReviewProject(view.location.href, (input, init) =>\n view.fetch(input, init),\n ).then((directory) => {\n if (directory && !disposed) onUxReviewProject(directory);\n });\n let cancelReveal: (() => void) | undefined;\n const select = (id: string) => {\n onSelect(id);\n const view = root.ownerDocument.defaultView;\n if (urlParam && view) {\n const url = new URL(view.location.href);\n url.searchParams.set(urlParam, id);\n view.history.replaceState(null, '', url);\n }\n // An open overlay sidebar gives way to the entry just chosen from it.\n const rail = root.ownerDocument.getElementById(`${catalogId}-left-rail`);\n if (\n collapsed &&\n !collapsed.peek() &&\n rail &&\n root.ownerDocument.defaultView?.getComputedStyle(rail).position ===\n 'absolute'\n )\n collapsed.value = true;\n if (revealSelection) {\n cancelReveal?.();\n cancelReveal = revealCatalogEntry(\n root,\n id,\n revealSelection === true ? undefined : revealSelection,\n );\n }\n };\n\n const disposers: Array<() => void> = [\n wireScrollDividers(root),\n wireCatalogFilter(root),\n // Sidebar items AND the footer's related-entry popup-menu items both carry\n // `data-action={selectAction}` + `data-item-id`, so one delegated click covers both.\n delegate(\n root,\n 'click',\n `[data-action=\"${selectAction}\"]`,\n (_event, element) => {\n const id = (element as HTMLElement).dataset.itemId;\n if (id) select(id);\n },\n ),\n ];\n if (onToggleSidebar) {\n disposers.push(\n delegate(root, 'click', `[data-action=\"${toggleSidebarAction}\"]`, () =>\n onToggleSidebar(),\n ),\n );\n }\n if (onToggleTheme) {\n disposers.push(\n delegate(root, 'click', `[data-action=\"${toggleThemeAction}\"]`, () =>\n onToggleTheme(),\n ),\n );\n }\n if (onToggleContrast) {\n disposers.push(\n delegate(root, 'click', `[data-action=\"${toggleContrastAction}\"]`, () =>\n onToggleContrast(),\n ),\n );\n }\n if (onToggleMotion) {\n disposers.push(\n delegate(root, 'click', `[data-action=\"${toggleMotionAction}\"]`, () =>\n onToggleMotion(),\n ),\n );\n }\n if (onSelectBackground) {\n disposers.push(\n delegate(\n root,\n 'click',\n `[data-action=\"${selectBackgroundAction}\"]`,\n (_event, element) => {\n const style = element.getAttribute('data-background-choice');\n if (\n style === 'checkerboard' ||\n style === 'vertical-stripes' ||\n style === 'layout-guide' ||\n style === 'surface' ||\n style === 'sunken'\n )\n onSelectBackground(style);\n },\n ),\n );\n }\n if (onToggleSecondary) {\n disposers.push(\n delegate(root, 'click', `[data-action=\"${toggleSecondaryAction}\"]`, () =>\n onToggleSecondary(),\n ),\n );\n }\n if (collapsed || sidebarSize)\n disposers.push(\n wireWorkbench(root, {\n id: catalogId,\n panels: {\n leftRail: {\n collapsed,\n size: sidebarSize,\n storageKey: sidebarStorageKey,\n },\n },\n }),\n );\n if (onUxReviewProject)\n // The capture context names the page the review came from. The URL can\n // change after the link rendered (`urlParam`), so stamp it as the link is\n // followed; the browser navigates to the href as it stands after the click.\n disposers.push(\n delegate(\n root,\n 'click',\n 'a.kui-toolbar-action-link[href^=\"uxreview://capture\"]',\n (_event, element) => {\n const link = element as HTMLAnchorElement;\n const url = new URL(link.href);\n const context = (url.searchParams.get('context') ?? '').replace(\n /\\nPage: [^\\n]*$/,\n '',\n );\n url.searchParams.set(\n 'context',\n `${context}\\nPage: ${link.ownerDocument.location.href}`,\n );\n link.href = url.href;\n },\n ),\n );\n return () => {\n disposed = true;\n cancelReveal?.();\n for (const dispose of disposers.splice(0)) dispose();\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/catalog/wiring/wire-catalog.ts"],"names":["view"],"mappings":"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","file":"wire-catalog.js","sourcesContent":["import { delegate, type Signal } from 'kerfjs';\n\nimport { readTokenSearchField } from '../../components/forms/token-search-field/token-search-field.js';\nimport {\n wireWorkbench,\n type WireWorkbenchOptions,\n} from '../../components/layout/workbench/wiring/wire-workbench.js';\nimport { wireScrollDividers } from '../../wiring/wire-scroll-dividers.js';\nimport type { CatalogBackgroundStyle } from '../types.js';\nimport { loadUxReviewProject } from '../ux-review.js';\n\nexport interface WireCatalogOptions {\n /** Invoked with the entry id when a sidebar item or a related-entry option is chosen. */\n onSelect: (id: string) => void;\n /** Invoked when the sidebar collapse/expand control is activated. */\n onToggleSidebar?: () => void;\n /** Invoked when the theme toggle is activated. */\n onToggleTheme?: () => void;\n /** Report a contrast-toggle press; the app updates its signal and applies the preference. */\n onToggleContrast?: () => void;\n /** Report a reduced-motion-toggle press; the app updates its signal and applies the preference. */\n onToggleMotion?: () => void;\n /** Report a preview background choice; the app updates `backgroundStyle`. */\n onSelectBackground?: (style: CatalogBackgroundStyle) => void;\n /**\n * Invoked when the settings pane toggle is activated. With\n * `settingsCollapsed`, `wireCatalog` has already flipped the signal.\n */\n onToggleSettings?: () => void;\n /** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */\n onToggleSecondary?: () => void;\n /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */\n urlParam?: string;\n /**\n * Reveal the chosen sidebar row after selection. `true` uses desktop-safe\n * defaults; pass options to customize scroll alignment or the media guard.\n */\n revealSelection?: boolean | CatalogRevealOptions;\n selectAction?: string;\n toggleSidebarAction?: string;\n toggleThemeAction?: string;\n toggleContrastAction?: string;\n toggleMotionAction?: string;\n selectBackgroundAction?: string;\n toggleSecondaryAction?: string;\n toggleSettingsAction?: string;\n /**\n * The sidebar's app-owned collapsed flag. With it, the catalog's Workbench\n * sidebar is wired like any Workbench rail: it becomes a transient overlay\n * on a small screen (collapsed as the breakpoint applies, closed on Escape\n * or a press outside, focus handed back), and choosing an entry from the\n * open overlay closes it.\n */\n collapsed?: Signal<boolean>;\n /**\n * The app-owned sidebar width signal for a Catalog rendered with\n * `sidebar={{ resizable: true, size: sidebarSize.value }}`. Each committed\n * drag or keyboard resize is written to it.\n */\n sidebarSize?: Signal<number>;\n /**\n * With `sidebarSize`, load and save the width under this storage key so the\n * catalog remembers the user's sidebar width.\n */\n sidebarStorageKey?: string;\n /**\n * The settings pane's app-owned collapsed flag, rendered as the Catalog's\n * `settingsCollapsed`. With it, `wireCatalog` owns the pane's toggle (each\n * press flips the signal) and wires the pane like any Workbench rail: a\n * transient overlay on a small screen (collapsed as the breakpoint applies,\n * closed on Escape or a press outside, focus handed back).\n */\n settingsCollapsed?: Signal<boolean>;\n /**\n * The app-owned settings pane width signal for a Catalog rendered with\n * `settingsPanel={{ resizable: true, size: settingsSize.value }}`. Each\n * committed drag or keyboard resize is written to it.\n */\n settingsSize?: Signal<number>;\n /**\n * With `settingsSize`, load and save the width under this storage key so\n * the catalog remembers the user's settings pane width.\n */\n settingsStorageKey?: string;\n /** The Catalog's `id`, when it is not the default `kui-catalog`. */\n id?: string;\n /**\n * Ask the page's server once for its UX Review project directory (served by\n * `uxReviewPlugin` from `@kerfjs/ui/vite-ux-review`) and report it, so the\n * app can render the Catalog with `uxReview`. Never called on static\n * hosting or a server without the plugin.\n */\n onUxReviewProject?: (projectDirectory: string) => void;\n}\n\nexport interface CatalogRevealOptions {\n /** Scroll alignment within the sidebar. Default `'nearest'`. */\n block?: ScrollLogicalPosition;\n /** Cross-axis alignment. Default `'nearest'`. */\n inline?: ScrollLogicalPosition;\n /** Scroll behavior. Default `'auto'`. */\n behavior?: ScrollBehavior;\n /**\n * Only reveal when this media query matches. Defaults to the Catalog's\n * desktop layout; pass `false` to reveal at every viewport size.\n */\n media?: string | false;\n}\n\n// The Workbench keeps the sidebar inline above its `narrow` breakpoint (704px).\nconst catalogDesktopMedia = '(min-width: 44.01rem)';\n\n/** Keep the sidebar filter local to the shared Catalog, including across controlled rerenders. */\nfunction wireCatalogFilter(root: HTMLElement): () => void {\n const view = root.ownerDocument.defaultView!;\n let filterValue = '';\n let query = '';\n let currentEditor: HTMLElement | null = null;\n const matches = (name: string) => name.toLocaleLowerCase().includes(query);\n const apply = () => {\n const editor = root.querySelector<HTMLElement>('[data-catalog-filter]');\n const nav = root.querySelector<HTMLElement>('[data-catalog-sidebar]');\n if (!editor || !nav) return;\n if (editor !== currentEditor) {\n currentEditor = editor;\n if (readTokenSearchField(editor).query !== filterValue)\n editor.textContent = filterValue;\n }\n const field = editor.closest<HTMLElement>(\n '[data-component=\"token-search-field\"]',\n )!;\n field.dataset.catalogFilterActive = String(Boolean(query));\n const placeholderVisible = String(!filterValue);\n if (field.dataset.placeholderVisible !== placeholderVisible)\n field.dataset.placeholderVisible = placeholderVisible;\n const clear = field.querySelector<HTMLElement>(\n '[data-action=\"catalog-clear-filter\"]',\n )!;\n clear.style.display = query ? '' : 'none';\n nav.dataset.catalogFilterActive = String(Boolean(query));\n let visibleEntries = 0;\n for (const section of nav.querySelectorAll<HTMLElement>(\n '[data-catalog-section]',\n )) {\n const group = section.closest<HTMLElement>(\n '[data-catalog-secondary-group]',\n );\n const headingMatches =\n matches(section.dataset.catalogSection!) ||\n (group !== null && matches(group.dataset.catalogSecondaryGroup!));\n let sectionEntries = 0;\n for (const entry of section.querySelectorAll<HTMLElement>(\n '[data-catalog-entry-name]',\n )) {\n const visible =\n !query || headingMatches || matches(entry.dataset.catalogEntryName!);\n entry.hidden = !visible;\n if (visible) sectionEntries++;\n }\n section.hidden = Boolean(query) && sectionEntries === 0;\n visibleEntries += sectionEntries;\n }\n for (const group of nav.querySelectorAll<HTMLElement>(\n '[data-catalog-secondary-group]',\n )) {\n group.hidden =\n Boolean(query) &&\n !Array.from(\n group.querySelectorAll<HTMLElement>('[data-catalog-section]'),\n ).some((section) => !section.hidden);\n const toggle = group.querySelector<HTMLElement>('[aria-expanded]');\n const content = group.querySelector<HTMLElement>(\n '[data-catalog-secondary-collapsed]',\n );\n if (toggle && content) {\n const expanded = query\n ? !group.hidden\n : content.dataset.catalogSecondaryCollapsed !== 'true';\n toggle.setAttribute('aria-expanded', String(expanded));\n const arrow = toggle.querySelector<HTMLElement>(\n '[data-component=\"disclosure-arrow\"]',\n );\n if (arrow) {\n arrow.dataset.open = String(expanded);\n arrow.dataset.direction = expanded ? 'down' : 'right';\n arrow.style.setProperty(\n '--_kui-disclosure-arrow-rotation',\n expanded ? '90deg' : '0deg',\n );\n }\n }\n }\n const empty = nav.querySelector<HTMLElement>(\n '[data-catalog-filter-empty]',\n )!;\n empty.dataset.visible = String(Boolean(query) && visibleEntries === 0);\n };\n const onInput = (event: Event) => {\n const target = event.target as HTMLElement | null;\n const editor = target?.closest<HTMLElement>('[data-catalog-filter]');\n if (!editor || !root.contains(editor)) return;\n filterValue = readTokenSearchField(editor).query;\n query = filterValue.trim().toLocaleLowerCase();\n apply();\n };\n const onClick = (event: Event) => {\n const target = event.target as Element;\n if (!target.closest('[data-action=\"catalog-clear-filter\"]')) return;\n const editor = root.querySelector<HTMLElement>('[data-catalog-filter]')!;\n filterValue = '';\n query = '';\n editor.textContent = '';\n apply();\n editor.focus();\n };\n root.addEventListener('input', onInput);\n root.addEventListener('click', onClick);\n const observer = new view.MutationObserver(() => {\n if (filterValue) apply();\n });\n observer.observe(root, {\n attributes: true,\n attributeFilter: ['data-placeholder-visible'],\n childList: true,\n subtree: true,\n });\n apply();\n return () => {\n root.removeEventListener('input', onInput);\n root.removeEventListener('click', onClick);\n observer.disconnect();\n };\n}\n\n/**\n * Reveal one Catalog sidebar entry after the controlled render settles without\n * moving focus. Returns a cancellation function for rapid selection changes.\n */\nexport function revealCatalogEntry(\n root: HTMLElement,\n id: string,\n {\n block = 'nearest',\n inline = 'nearest',\n behavior = 'auto',\n media = catalogDesktopMedia,\n }: CatalogRevealOptions = {},\n): () => void {\n const view = root.ownerDocument.defaultView;\n if (!view || (media && !view.matchMedia(media).matches)) return () => {};\n const frame = view.requestAnimationFrame(() => {\n for (const item of root.querySelectorAll<HTMLElement>('[data-item-id]')) {\n if (item.dataset.itemId !== id) continue;\n item.scrollIntoView({ block, inline, behavior });\n break;\n }\n });\n return () => view.cancelAnimationFrame(frame);\n}\n\n/**\n * Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar\n * item selection (and the related-entry popup menu), the sidebar collapse toggle,\n * the settings pane toggle, and the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates\n * them in the callbacks; optionally mirror the active id into the URL via `urlParam`.\n * It also wires the scroll dividers below root (`wireScrollDividers`), so the\n * catalog's panes and every example in it show their chrome dividers only\n * while scrolled. Returns a disposer.\n */\nexport function wireCatalog(\n root: HTMLElement,\n {\n onSelect,\n onToggleSidebar,\n onToggleTheme,\n onToggleContrast,\n onToggleMotion,\n onSelectBackground,\n onToggleSecondary,\n onToggleSettings,\n urlParam,\n revealSelection,\n selectAction = 'catalog-select',\n toggleSidebarAction = 'catalog-toggle-sidebar',\n toggleThemeAction = 'catalog-toggle-theme',\n toggleContrastAction = 'catalog-toggle-contrast',\n toggleMotionAction = 'catalog-toggle-motion',\n selectBackgroundAction = 'catalog-select-background',\n toggleSecondaryAction = 'catalog-toggle-secondary',\n toggleSettingsAction = 'catalog-toggle-settings',\n collapsed,\n sidebarSize,\n sidebarStorageKey,\n settingsCollapsed,\n settingsSize,\n settingsStorageKey,\n id: catalogId = 'kui-catalog',\n onUxReviewProject,\n }: WireCatalogOptions,\n): () => void {\n let disposed = false;\n const view = root.ownerDocument.defaultView;\n if (onUxReviewProject && view)\n void loadUxReviewProject(view.location.href, (input, init) =>\n view.fetch(input, init),\n ).then((directory) => {\n if (directory && !disposed) onUxReviewProject(directory);\n });\n let cancelReveal: (() => void) | undefined;\n const select = (id: string) => {\n onSelect(id);\n const view = root.ownerDocument.defaultView;\n if (urlParam && view) {\n const url = new URL(view.location.href);\n url.searchParams.set(urlParam, id);\n view.history.replaceState(null, '', url);\n }\n // An open overlay sidebar gives way to the entry just chosen from it.\n const rail = root.ownerDocument.getElementById(`${catalogId}-left-rail`);\n if (\n collapsed &&\n !collapsed.peek() &&\n rail &&\n root.ownerDocument.defaultView?.getComputedStyle(rail).position ===\n 'absolute'\n )\n collapsed.value = true;\n if (revealSelection) {\n cancelReveal?.();\n cancelReveal = revealCatalogEntry(\n root,\n id,\n revealSelection === true ? undefined : revealSelection,\n );\n }\n };\n\n const disposers: Array<() => void> = [\n wireScrollDividers(root),\n wireCatalogFilter(root),\n // Sidebar items AND the footer's related-entry popup-menu items both carry\n // `data-action={selectAction}` + `data-item-id`, so one delegated click covers both.\n delegate(\n root,\n 'click',\n `[data-action=\"${selectAction}\"]`,\n (_event, element) => {\n const id = (element as HTMLElement).dataset.itemId;\n if (id) select(id);\n },\n ),\n ];\n if (onToggleSidebar) {\n disposers.push(\n delegate(root, 'click', `[data-action=\"${toggleSidebarAction}\"]`, () =>\n onToggleSidebar(),\n ),\n );\n }\n if (onToggleTheme) {\n disposers.push(\n delegate(root, 'click', `[data-action=\"${toggleThemeAction}\"]`, () =>\n onToggleTheme(),\n ),\n );\n }\n if (onToggleContrast) {\n disposers.push(\n delegate(root, 'click', `[data-action=\"${toggleContrastAction}\"]`, () =>\n onToggleContrast(),\n ),\n );\n }\n if (onToggleMotion) {\n disposers.push(\n delegate(root, 'click', `[data-action=\"${toggleMotionAction}\"]`, () =>\n onToggleMotion(),\n ),\n );\n }\n if (onSelectBackground) {\n disposers.push(\n delegate(\n root,\n 'click',\n `[data-action=\"${selectBackgroundAction}\"]`,\n (_event, element) => {\n const style = element.getAttribute('data-background-choice');\n if (\n style === 'checkerboard' ||\n style === 'vertical-stripes' ||\n style === 'layout-guide' ||\n style === 'surface' ||\n style === 'sunken'\n )\n onSelectBackground(style);\n },\n ),\n );\n }\n if (onToggleSecondary) {\n disposers.push(\n delegate(root, 'click', `[data-action=\"${toggleSecondaryAction}\"]`, () =>\n onToggleSecondary(),\n ),\n );\n }\n if (settingsCollapsed || onToggleSettings) {\n disposers.push(\n delegate(root, 'click', `[data-action=\"${toggleSettingsAction}\"]`, () => {\n if (settingsCollapsed)\n settingsCollapsed.value = !settingsCollapsed.peek();\n onToggleSettings?.();\n }),\n );\n }\n // One wireWorkbench call owns every wired rail, so overlays stay exclusive.\n const panels: WireWorkbenchOptions['panels'] = {};\n if (collapsed || sidebarSize)\n panels.leftRail = {\n collapsed,\n size: sidebarSize,\n storageKey: sidebarStorageKey,\n };\n if (settingsCollapsed || settingsSize)\n panels.rightRail = {\n collapsed: settingsCollapsed,\n size: settingsSize,\n storageKey: settingsStorageKey,\n };\n if (panels.leftRail || panels.rightRail)\n disposers.push(wireWorkbench(root, { id: catalogId, panels }));\n if (onUxReviewProject)\n // The capture context names the page the review came from. The URL can\n // change after the link rendered (`urlParam`), so stamp it as the link is\n // followed; the browser navigates to the href as it stands after the click.\n disposers.push(\n delegate(\n root,\n 'click',\n 'a.kui-toolbar-action-link[href^=\"uxreview://capture\"]',\n (_event, element) => {\n const link = element as HTMLAnchorElement;\n const url = new URL(link.href);\n const context = (url.searchParams.get('context') ?? '').replace(\n /\\nPage: [^\\n]*$/,\n '',\n );\n url.searchParams.set(\n 'context',\n `${context}\\nPage: ${link.ownerDocument.location.href}`,\n );\n link.href = url.href;\n },\n ),\n );\n return () => {\n disposed = true;\n cancelReveal?.();\n for (const dispose of disposers.splice(0)) dispose();\n };\n}\n"]}
|
package/docs/catalog.md
CHANGED
|
@@ -64,6 +64,14 @@ expanded? }`. When `collapsible`, the label is a disclosure toggle controlling
|
|
|
64
64
|
`expanded` (the app owns it; wire it with `wireCatalog`'s `onToggleSecondary`).
|
|
65
65
|
- Optional slots: `headerActions` (extra header controls), `sidebarFooter` (extra
|
|
66
66
|
sidebar content), and `status` (a footer status line).
|
|
67
|
+
- **`settings`** — the active entry's settings (variant and state controls for
|
|
68
|
+
its preview). When supplied, the Catalog renders a **Settings** pane beside the
|
|
69
|
+
stage (its Workbench right rail) with the standard collapse toggle: in the
|
|
70
|
+
pane's header while it is open, at the end of the entry toolbar while it is
|
|
71
|
+
collapsed. Omit it (or pass `null`) for an entry with no settings; neither the
|
|
72
|
+
pane nor its toggle renders. Supply only the controls — compose them from
|
|
73
|
+
`ListInsetControl` + `Select` (or other form components) so they share the
|
|
74
|
+
pane's text column; the Catalog owns the pane, its title, and its toggle.
|
|
67
75
|
|
|
68
76
|
The sidebar includes a `TokenSearchField` in its fixed header for every Catalog
|
|
69
77
|
consumer, so the filter remains visible while the entries scroll. `wireCatalog`
|
|
@@ -211,6 +219,9 @@ Catalogs for downstream components should conform to the
|
|
|
211
219
|
contract and can start from the checked
|
|
212
220
|
[`component-catalog-extension.json`](./examples/component-catalog-extension.json)
|
|
213
221
|
example; provide those entries beside Kerf's shipped catalog to AI tools.
|
|
222
|
+
Packages that keep a `kerf.components.json` can generate this file instead of
|
|
223
|
+
hand-maintaining it: set `kerfComponentCatalog.selectionOutput` and run
|
|
224
|
+
`kerf-component-catalog` (see `create-kerf-component`'s README).
|
|
214
225
|
An extension entry may declare `uses` with direct Kerf or extension entry ids,
|
|
215
226
|
plus repository-relative `source` and `demoSource` paths. Keep the ids unique
|
|
216
227
|
and resolvable across both catalogs; paths use `/` separators and cannot
|
|
@@ -454,6 +465,21 @@ revealCatalogEntry(app, initial, { block: "center" });
|
|
|
454
465
|
header's `ToolbarConfig`). A resizable sidebar's width is app state like
|
|
455
466
|
`collapsed`: render your size signal as `sidebar.size` and pass the same signal
|
|
456
467
|
as `wireCatalog`'s `sidebarSize` (plus `sidebarStorageKey` to remember it).
|
|
468
|
+
- **`settingsCollapsed`** is transient UI like `collapsed`: render your signal as
|
|
469
|
+
`settingsCollapsed` and pass the same signal as `wireCatalog`'s
|
|
470
|
+
`settingsCollapsed`. `wireCatalog` then flips it from the toggle (report it
|
|
471
|
+
with `onToggleSettings`, which runs after the flip) and wires the pane as a
|
|
472
|
+
Workbench rail: below the `narrow` breakpoint it starts collapsed and opens as
|
|
473
|
+
an overlay over the stage that Escape or a press outside closes, handing focus
|
|
474
|
+
back to the toggle. The sidebar and settings overlays are exclusive. Without
|
|
475
|
+
the signal, `onToggleSettings` alone reports the press and the app flips its
|
|
476
|
+
own state.
|
|
477
|
+
- **`settingsPanel`** configures the settings pane like `sidebar` configures the
|
|
478
|
+
sidebar: `title` (default `Settings`; it also names the toggle), `size`
|
|
479
|
+
(default 288px), `resizable`, `separator`, `collapseMotion`, `presentation`,
|
|
480
|
+
`responsiveOverlayAt`, `compactOverlay`, and `toolbar`. A resizable pane's
|
|
481
|
+
width is app state: render your signal as `settingsPanel.size` and pass it as
|
|
482
|
+
`wireCatalog`'s `settingsSize` (plus `settingsStorageKey` to remember it).
|
|
457
483
|
- **`mainToolbar` / `footerToolbar`** take the entry toolbar's and the resource
|
|
458
484
|
footer toolbar's `ToolbarConfig` (`dividerSides`, `centerAlign`, `responsive`,
|
|
459
485
|
`responsiveAt`, `safeAreaEdges`). The defaults are a wrapping entry toolbar
|
|
@@ -275,6 +275,9 @@ example. Keep app and Kerf entries as package-qualified inputs, then let people
|
|
|
275
275
|
or AI tools search their combined entries and compare `geometry` before adding
|
|
276
276
|
wrappers or insets. Do not add app-owned entries to Kerf's canonical catalog or
|
|
277
277
|
claim Kerf delivery paths for them.
|
|
278
|
+
Packages that keep a `kerf.components.json` can generate this file instead of
|
|
279
|
+
hand-maintaining it: set `kerfComponentCatalog.selectionOutput` and run
|
|
280
|
+
`kerf-component-catalog` (see `create-kerf-component`'s README).
|
|
278
281
|
Extension entries may add `uses` for direct composition dependencies and
|
|
279
282
|
repository-relative `source` and `demoSource` files. Resolve each dependency
|
|
280
283
|
against the combined Kerf and consumer catalogs; do not duplicate a Kerf id.
|