@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.11
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 +1 -0
- package/ai/component-catalog.json +62 -0
- package/ai/public-api-signatures-v1.md +48 -4
- package/ai/skill.md +1 -1
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/dist/browser/floating-toolbar.js +3 -0
- package/dist/catalog.js +7 -4
- package/dist/catalog.js.map +1 -1
- package/dist/{chunk-W5EQ3HYQ.js → chunk-5ATCDSQS.js} +2 -2
- package/dist/{chunk-W5EQ3HYQ.js.map → chunk-5ATCDSQS.js.map} +1 -1
- package/dist/chunk-5E2HVJ33.js +10 -0
- package/dist/chunk-5E2HVJ33.js.map +1 -0
- package/dist/{chunk-LC3YSAZC.js → chunk-CH4SQ6H5.js} +2 -2
- package/dist/{chunk-LC3YSAZC.js.map → chunk-CH4SQ6H5.js.map} +1 -1
- package/dist/{chunk-CVZYNJJ5.js → chunk-LCOBDOCC.js} +2 -2
- package/dist/chunk-LCOBDOCC.js.map +1 -0
- package/dist/{chunk-MFKMHK5W.js → chunk-RNPGFQ33.js} +3 -3
- package/dist/chunk-RNPGFQ33.js.map +1 -0
- package/dist/{chunk-Y5MRDTLC.js → chunk-XE5ZLPCC.js} +2 -2
- package/dist/{chunk-Y5MRDTLC.js.map → chunk-XE5ZLPCC.js.map} +1 -1
- package/dist/floating-toolbar.d.ts +28 -0
- package/dist/floating-toolbar.js +3 -0
- package/dist/floating-toolbar.js.map +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +12 -11
- package/dist/list-header.js +1 -1
- package/dist/panel-header.js +1 -1
- package/dist/select.js +1 -1
- package/dist/styles/catalog.css +29 -5
- package/dist/styles/floating-toolbar.css +38 -0
- package/dist/styles/toolbar-control-group.css +14 -0
- package/dist/toolbar-control-group.d.ts +3 -1
- package/dist/toolbar-control-group.js +1 -1
- package/dist/wire-token-search-fields.d.ts +11 -2
- package/dist/wire-token-search-fields.js +1 -1
- package/docs/accessibility.md +12 -1
- package/docs/component-selection.md +1 -0
- package/docs/design/templates/empty-state/filtered-dark.svg +1 -0
- package/docs/design/templates/empty-state/filtered.svg +1 -0
- package/docs/design/templates/empty-state/with-action-dark.svg +1 -0
- package/docs/design/templates/empty-state/with-action.svg +1 -0
- package/docs/design/templates/empty-state-dark.svg +7 -0
- package/docs/design/templates/empty-state.svg +7 -0
- package/docs/design/templates/list-action-row/default-dark.svg +1 -0
- package/docs/design/templates/list-action-row/default.svg +1 -0
- package/docs/design/templates/list-action-row/selected-dark.svg +1 -0
- package/docs/design/templates/list-action-row/selected.svg +1 -0
- package/docs/design/templates/list-action-row-dark.svg +7 -0
- package/docs/design/templates/list-action-row.svg +7 -0
- package/docs/design/templates/list-header/action-dark.svg +1 -0
- package/docs/design/templates/list-header/action.svg +1 -0
- package/docs/design/templates/list-header/count-dark.svg +1 -0
- package/docs/design/templates/list-header/count.svg +1 -0
- package/docs/design/templates/list-header/toggle-collapsed-dark.svg +1 -0
- package/docs/design/templates/list-header/toggle-collapsed.svg +1 -0
- package/docs/design/templates/list-header/toggle-expanded-dark.svg +1 -0
- package/docs/design/templates/list-header/toggle-expanded.svg +1 -0
- package/docs/design/templates/list-header-dark.svg +11 -0
- package/docs/design/templates/list-header.svg +11 -0
- package/docs/design/templates/list-item/default-dark.svg +1 -0
- package/docs/design/templates/list-item/default.svg +1 -0
- package/docs/design/templates/list-item/multiline-dark.svg +1 -0
- package/docs/design/templates/list-item/multiline.svg +1 -0
- package/docs/design/templates/list-item/selected-dark.svg +1 -0
- package/docs/design/templates/list-item/selected.svg +1 -0
- package/docs/design/templates/list-item/trailing-dark.svg +1 -0
- package/docs/design/templates/list-item/trailing.svg +1 -0
- package/docs/design/templates/list-item-dark.svg +11 -0
- package/docs/design/templates/list-item.svg +11 -0
- package/docs/design/templates/segmented-control/equal-dark.svg +1 -0
- package/docs/design/templates/segmented-control/equal.svg +1 -0
- package/docs/design/templates/segmented-control/pill-small-dark.svg +1 -0
- package/docs/design/templates/segmented-control/pill-small.svg +1 -0
- package/docs/design/templates/segmented-control-dark.svg +7 -0
- package/docs/design/templates/segmented-control.svg +7 -0
- package/docs/design/templates/skeleton/avatar-dark.svg +1 -0
- package/docs/design/templates/skeleton/avatar.svg +1 -0
- package/docs/design/templates/skeleton/block-dark.svg +1 -0
- package/docs/design/templates/skeleton/block.svg +1 -0
- package/docs/design/templates/skeleton/lines-dark.svg +1 -0
- package/docs/design/templates/skeleton/lines.svg +1 -0
- package/docs/design/templates/skeleton-dark.svg +9 -0
- package/docs/design/templates/skeleton.svg +9 -0
- package/docs/design/templates/state-banner/danger-dark.svg +1 -0
- package/docs/design/templates/state-banner/danger.svg +1 -0
- package/docs/design/templates/state-banner/info-dark.svg +1 -0
- package/docs/design/templates/state-banner/info.svg +1 -0
- package/docs/design/templates/state-banner/success-dark.svg +1 -0
- package/docs/design/templates/state-banner/success.svg +1 -0
- package/docs/design/templates/state-banner/warning-dark.svg +1 -0
- package/docs/design/templates/state-banner/warning.svg +1 -0
- package/docs/design/templates/state-banner-dark.svg +11 -0
- package/docs/design/templates/state-banner.svg +11 -0
- package/docs/design/templates/tab-bar/workspace-tabs-dark.svg +1 -0
- package/docs/design/templates/tab-bar/workspace-tabs.svg +1 -0
- package/docs/design/templates/tab-bar-dark.svg +5 -0
- package/docs/design/templates/tab-bar.svg +5 -0
- package/docs/design/templates/token-search-field/empty-dark.svg +1 -0
- package/docs/design/templates/token-search-field/empty.svg +1 -0
- package/docs/design/templates/token-search-field/tokens-dark.svg +1 -0
- package/docs/design/templates/token-search-field/tokens.svg +1 -0
- package/docs/design/templates/token-search-field-dark.svg +7 -0
- package/docs/design/templates/token-search-field.svg +7 -0
- package/docs/design/templates/toolbar/title-and-actions-dark.svg +1 -0
- package/docs/design/templates/toolbar/title-and-actions.svg +1 -0
- package/docs/design/templates/toolbar-dark.svg +5 -0
- package/docs/design/templates/toolbar-text/default-dark.svg +1 -0
- package/docs/design/templates/toolbar-text/default.svg +1 -0
- package/docs/design/templates/toolbar-text/large-dark.svg +1 -0
- package/docs/design/templates/toolbar-text/large.svg +1 -0
- package/docs/design/templates/toolbar-text/small-dark.svg +1 -0
- package/docs/design/templates/toolbar-text/small.svg +1 -0
- package/docs/design/templates/toolbar-text-dark.svg +9 -0
- package/docs/design/templates/toolbar-text.svg +9 -0
- package/docs/design/templates/toolbar.svg +5 -0
- package/docs/design/templates/value-table/details-dark.svg +1 -0
- package/docs/design/templates/value-table/details.svg +1 -0
- package/docs/design/templates/value-table-dark.svg +5 -0
- package/docs/design/templates/value-table.svg +5 -0
- package/docs/design/templates.md +31 -0
- package/llms.txt +2 -2
- package/package.json +10 -2
- package/dist/chunk-CVZYNJJ5.js.map +0 -1
- package/dist/chunk-MFKMHK5W.js.map +0 -1
package/README.md
CHANGED
|
@@ -98,6 +98,7 @@ as a `New` marker.
|
|
|
98
98
|
| `DisclosureArrow` | `@kerfjs/ui/disclosure-arrow` | `@kerfjs/ui/disclosure-arrow.css` |
|
|
99
99
|
| `Toolbar` | `@kerfjs/ui/toolbar` | `@kerfjs/ui/toolbar.css` |
|
|
100
100
|
| `ToolbarControlGroup` | `@kerfjs/ui/toolbar-control-group` | `@kerfjs/ui/toolbar-control-group.css` |
|
|
101
|
+
| `FloatingToolbar` | `@kerfjs/ui/floating-toolbar` | `@kerfjs/ui/floating-toolbar.css` |
|
|
101
102
|
| `ToolbarText` | `@kerfjs/ui/toolbar-text` | `@kerfjs/ui/toolbar-text.css` |
|
|
102
103
|
| `ListActionRow` | `@kerfjs/ui/list-action-row` | `@kerfjs/ui/list-action-row.css` |
|
|
103
104
|
| `ListItem` | `@kerfjs/ui/list-item` | `@kerfjs/ui/list-item.css` |
|
|
@@ -454,6 +454,68 @@
|
|
|
454
454
|
"recipe": "docs/component-selection.md#problem-to-component-matrix"
|
|
455
455
|
}
|
|
456
456
|
},
|
|
457
|
+
{
|
|
458
|
+
"id": "floating-toolbar",
|
|
459
|
+
"name": "FloatingToolbar",
|
|
460
|
+
"category": "Structure",
|
|
461
|
+
"kind": "component",
|
|
462
|
+
"source": "kerf",
|
|
463
|
+
"description": "A transparent, forced-dark toolbar that floats over its container's content.",
|
|
464
|
+
"uses": [],
|
|
465
|
+
"purpose": "A transparent, forced-dark toolbar that floats over its container's content.",
|
|
466
|
+
"publicExports": [
|
|
467
|
+
"FloatingToolbar"
|
|
468
|
+
],
|
|
469
|
+
"useWhen": [
|
|
470
|
+
"Float a small cluster of controls (e.g. a drawer restore) over scrolling content without covering dialogs."
|
|
471
|
+
],
|
|
472
|
+
"avoidWhen": [
|
|
473
|
+
"Do not use for a primary page or panel toolbar, or for anything that must sit above overlays (it is not top-layer)."
|
|
474
|
+
],
|
|
475
|
+
"alternatives": [
|
|
476
|
+
{
|
|
477
|
+
"id": "toolbar",
|
|
478
|
+
"relationship": "nearest"
|
|
479
|
+
}
|
|
480
|
+
],
|
|
481
|
+
"appOwns": [
|
|
482
|
+
"controls",
|
|
483
|
+
"position",
|
|
484
|
+
"visibility"
|
|
485
|
+
],
|
|
486
|
+
"variants": [
|
|
487
|
+
"bottom-end",
|
|
488
|
+
"bottom-start",
|
|
489
|
+
"bottom",
|
|
490
|
+
"top-end",
|
|
491
|
+
"top-start",
|
|
492
|
+
"top"
|
|
493
|
+
],
|
|
494
|
+
"accessibility": [
|
|
495
|
+
"Give the toolbar an accessible name (label is required — it exposes role=\"toolbar\")."
|
|
496
|
+
],
|
|
497
|
+
"delivery": {
|
|
498
|
+
"browserImport": "@kerfjs/ui/floating-toolbar",
|
|
499
|
+
"manualCssImport": "@kerfjs/ui/floating-toolbar.css",
|
|
500
|
+
"sideEffects": [
|
|
501
|
+
"browser-condition-css"
|
|
502
|
+
]
|
|
503
|
+
},
|
|
504
|
+
"wiring": [],
|
|
505
|
+
"publicClasses": [
|
|
506
|
+
"kui-floating-toolbar"
|
|
507
|
+
],
|
|
508
|
+
"publicTokens": [
|
|
509
|
+
"--kui-floating-toolbar-inset",
|
|
510
|
+
"--kui-space-m",
|
|
511
|
+
"--kui-space-xs"
|
|
512
|
+
],
|
|
513
|
+
"links": {
|
|
514
|
+
"catalogRoute": "?component=floating-toolbar",
|
|
515
|
+
"documentation": "docs/component-selection.md",
|
|
516
|
+
"recipe": "docs/component-selection.md#problem-to-component-matrix"
|
|
517
|
+
}
|
|
518
|
+
},
|
|
457
519
|
{
|
|
458
520
|
"id": "toolbar-text",
|
|
459
521
|
"name": "ToolbarText",
|
|
@@ -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.11` and `kerfjs@5.0.0-beta.11`. 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/disclosure-arrow`
|
|
6
6
|
|
|
@@ -81,12 +81,47 @@ interface ToolbarControlGroupProps {
|
|
|
81
81
|
appearance?: 'contained' | 'borderless';
|
|
82
82
|
tone?: 'default' | 'dark';
|
|
83
83
|
buttonAppearance?: 'plain' | 'push';
|
|
84
|
+
/** Corner shape: fully round `pill` (default) or a softer `rounded` rectangle. */
|
|
85
|
+
shape?: 'pill' | 'rounded';
|
|
84
86
|
}
|
|
85
|
-
declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance }: ToolbarControlGroupProps): SafeHtml;
|
|
87
|
+
declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance, shape }: ToolbarControlGroupProps): SafeHtml;
|
|
86
88
|
|
|
87
89
|
export { ToolbarControlGroup, type ToolbarControlGroupProps };
|
|
88
90
|
```
|
|
89
91
|
|
|
92
|
+
## `@kerfjs/ui/floating-toolbar`
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
import { SafeHtml } from 'kerfjs';
|
|
96
|
+
|
|
97
|
+
/** Where a {@link FloatingToolbar} floats within its positioned container. */
|
|
98
|
+
type FloatingToolbarPosition = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
|
|
99
|
+
interface FloatingToolbarProps {
|
|
100
|
+
/** Toolbar contents — normally one or more `ToolbarControlGroup`s. */
|
|
101
|
+
children: SafeHtml | SafeHtml[];
|
|
102
|
+
/** Accessible name for the toolbar (required — it exposes `role="toolbar"`). */
|
|
103
|
+
label: string;
|
|
104
|
+
/**
|
|
105
|
+
* Corner or edge it floats to inside its nearest positioned ancestor.
|
|
106
|
+
* Default: `'bottom-end'`.
|
|
107
|
+
*/
|
|
108
|
+
position?: FloatingToolbarPosition;
|
|
109
|
+
className?: string;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* A toolbar that floats above the main content of its nearest positioned
|
|
113
|
+
* ancestor — a transparent, forced-dark cluster of controls (e.g. a drawer
|
|
114
|
+
* restore button) that sits over the content but NOT over dialogs or overlays
|
|
115
|
+
* (it is not in the top layer). It is inset from the container edges by
|
|
116
|
+
* `--kui-floating-toolbar-inset` (default `--kui-space-m`, i.e. 8px more than a
|
|
117
|
+
* top toolbar's own inset); override that token to move it. The app owns the
|
|
118
|
+
* controls and their behavior — wire them with `delegate()` as usual.
|
|
119
|
+
*/
|
|
120
|
+
declare function FloatingToolbar({ children, label, position, className }: FloatingToolbarProps): SafeHtml;
|
|
121
|
+
|
|
122
|
+
export { FloatingToolbar, type FloatingToolbarPosition, type FloatingToolbarProps };
|
|
123
|
+
```
|
|
124
|
+
|
|
90
125
|
## `@kerfjs/ui/list-header`
|
|
91
126
|
|
|
92
127
|
```ts
|
|
@@ -1156,6 +1191,15 @@ interface TokenSearchSubmit {
|
|
|
1156
1191
|
id: string;
|
|
1157
1192
|
editor: HTMLElement;
|
|
1158
1193
|
}
|
|
1194
|
+
/** Reported to {@link WireTokenSearchFieldsOptions.onEdit} on every editor input. */
|
|
1195
|
+
interface TokenSearchEdit extends TokenSearchSubmit {
|
|
1196
|
+
/**
|
|
1197
|
+
* The `InputEvent` that mutated the editor — read `event.inputType` / `event.data`
|
|
1198
|
+
* to gate commit behavior (e.g. only parse a chip on whitespace-terminated input)
|
|
1199
|
+
* without keeping a separate `input` listener.
|
|
1200
|
+
*/
|
|
1201
|
+
event: InputEvent;
|
|
1202
|
+
}
|
|
1159
1203
|
/** Reported when adjacent-token keyboard deletion asks the app to drop a chip. */
|
|
1160
1204
|
interface TokenSearchTokenRemoval {
|
|
1161
1205
|
id: string;
|
|
@@ -1216,7 +1260,7 @@ interface TokenSearchCollapsibleOptions {
|
|
|
1216
1260
|
interface WireTokenSearchFieldsOptions {
|
|
1217
1261
|
onSubmit?: (submission: TokenSearchSubmit) => void;
|
|
1218
1262
|
/** Fired on every editor `input`, after the browser mutates it, so a caller can drop its own `input` listener. */
|
|
1219
|
-
onEdit?: (edit:
|
|
1263
|
+
onEdit?: (edit: TokenSearchEdit) => void;
|
|
1220
1264
|
/** Managed collapsible transient behavior. `true`/omitted = on with defaults; `false` = fully off. */
|
|
1221
1265
|
collapsible?: boolean | TokenSearchCollapsibleOptions;
|
|
1222
1266
|
/** Opt-in atomic-chip keyboard behavior (off by default). `true` = on with defaults. */
|
|
@@ -1246,7 +1290,7 @@ interface TokenSearchFieldsHandle {
|
|
|
1246
1290
|
*/
|
|
1247
1291
|
declare function wireTokenSearchFields(root: HTMLElement, { onSubmit, onEdit, collapsible, keyboard }?: WireTokenSearchFieldsOptions): TokenSearchFieldsHandle;
|
|
1248
1292
|
|
|
1249
|
-
export { type TokenSearchCollapsibleOptions, type TokenSearchFieldsHandle, type TokenSearchKeyboardOptions, type TokenSearchSubmit, type TokenSearchTokenRemoval, type WireTokenSearchFieldsOptions, wireTokenSearchFields };
|
|
1293
|
+
export { type TokenSearchCollapsibleOptions, type TokenSearchEdit, type TokenSearchFieldsHandle, type TokenSearchKeyboardOptions, type TokenSearchSubmit, type TokenSearchTokenRemoval, type WireTokenSearchFieldsOptions, wireTokenSearchFields };
|
|
1250
1294
|
```
|
|
1251
1295
|
|
|
1252
1296
|
## `kerfjs/actions`
|
package/ai/skill.md
CHANGED
|
@@ -57,7 +57,7 @@ Hard rules:
|
|
|
57
57
|
8. `ResizableRegion` uses `wireResizableRegions()` for Arrow, Shift+Arrow, Home/End, and pointer behavior. The app owns size persistence. `handleIcon` replaces decorative dormant glyph content only.
|
|
58
58
|
9. Use controlled `SegmentedControl` for a small exclusive choice set. Select `appearance="toolbar"` when nesting it inside `ToolbarControlGroup`; use rounded or pill shapes for standalone contexts. Handle its action, update `value`, keep meaningful choice labels, and preserve every enabled native button in sequential Tab order.
|
|
59
59
|
10. Compose `AppTab` inside controlled `TabBar`; call `wireTabBars()` once and retain its disposer. It owns same-bar drag mechanics, including proximity-based horizontal edge autoscroll, while the app applies `onReorder` and owns order, selection, panels, close policy, routing, and persistence. Arrow/Home/End select on move by default; pass `activation: 'manual'` (or `TabBar activation="manual"` per strip) so arrow keys move focus only and the user selects with Enter/Space/click — use it when selecting a tab is a heavy action. Use runtime-filtered `rootAttributes` for domain metadata and keep an optional `closeIcon` decorative and noninteractive.
|
|
60
|
-
11. Use token-controlled `TokenSearchField` when free text and removable structured filters share one editor. Editable text stays DOM-owned between token changes. The leading icon, first text line, clear action, and trailing slot share one fixed row when content wraps. The app owns parsing and suggestions; call `readTokenSearchField()` on input, empty `textContent` on clear, use `placeTokenSearchCaret()` after explicit controlled focus changes, and call `wireTokenSearchFields()` once so Enter submits without inserting a line break and keyboard chip deletion restores focus plus the text-relative caret after controlled replacement. Enable `collapsible` for an animated iconic closed state, standalone or inside `ToolbarControlGroup`; the field keeps text or tokens expanded, and `wireTokenSearchFields()` manages the transient expand/collapse/focus by default (activate to reveal + focus, Escape or empty blur to collapse). Bind the field's `expanded` to the returned handle's `expanded(id)` signal or adopt your own via `collapsible.signals`; opt a behavior out only when the app must own it. Do not hand-roll the open handler, the focusout collapse, or a clear-button mousedown guard — the helper owns them. For real-app adoption it also provides a focusout keep-open exception (`data-token-search-keep-open` regions or `collapsible.keepOpenOn(target)`, so a sibling suggestions/date/help surface does not collapse an empty field), opt-in atomic-chip keyboard (`keyboard`: Backspace/Delete remove the adjacent chip via `onRemoveToken`, ArrowRight moves the caret past a trailing chip), and an `onEdit({id, editor})` input callback — reach for these instead of re-adding hand-rolled keydown/input handlers around the field.
|
|
60
|
+
11. Use token-controlled `TokenSearchField` when free text and removable structured filters share one editor. Editable text stays DOM-owned between token changes. The leading icon, first text line, clear action, and trailing slot share one fixed row when content wraps. The app owns parsing and suggestions; call `readTokenSearchField()` on input, empty `textContent` on clear, use `placeTokenSearchCaret()` after explicit controlled focus changes, and call `wireTokenSearchFields()` once so Enter submits without inserting a line break and keyboard chip deletion restores focus plus the text-relative caret after controlled replacement. Enable `collapsible` for an animated iconic closed state, standalone or inside `ToolbarControlGroup`; the field keeps text or tokens expanded, and `wireTokenSearchFields()` manages the transient expand/collapse/focus by default (activate to reveal + focus, Escape or empty blur to collapse). Bind the field's `expanded` to the returned handle's `expanded(id)` signal or adopt your own via `collapsible.signals`; opt a behavior out only when the app must own it. Do not hand-roll the open handler, the focusout collapse, or a clear-button mousedown guard — the helper owns them. For real-app adoption it also provides a focusout keep-open exception (`data-token-search-keep-open` regions or `collapsible.keepOpenOn(target)`, so a sibling suggestions/date/help surface does not collapse an empty field), opt-in atomic-chip keyboard (`keyboard`: Backspace/Delete remove the adjacent chip via `onRemoveToken`, ArrowRight moves the caret past a trailing chip), and an `onEdit({id, editor, event})` input callback (the `InputEvent` lets you gate on `inputType`/`data`) — reach for these instead of re-adding hand-rolled keydown/input handlers around the field.
|
|
61
61
|
12. Demo work uses public production component subpaths and their browser-selected CSS. Give every public visual component its own category-grouped catalog route; list themed third-party components under a clearly labeled collapsible ecosystem section, with a focused route for each. Project its deterministic repository-relative demo source and existing documentation path so the detail can expose `View demo source` and `Read guidance` links without a runtime export; also derive first-party component implementation paths from their canonical browser imports, and label Web Awesome documentation as Kerf integration guidance. Declare direct `uses` relationships so `Used by` stays derivable, and theme shell chrome through the same semantic tokens as the stage instead of drawing a substitute.
|
|
62
62
|
13. The Web Awesome theme makes Tooltip and Popover arrowless by default. Keep that default unless a pointer materially clarifies the anchor; opt back in with `--wa-tooltip-arrow-size`, `--kui-wa-popover-arrow-size`, or a popover's public `--arrow-size`, and use `without-arrow` when local no-arrow intent should survive theme changes.
|
|
63
63
|
14. Treat the complete Web Awesome catalog as support coverage, not a recommendation list. Consider Popup when it replaces custom anchored positioning. Prefer Kerf `Select` over direct Dropdown/Dropdown Item/Select/Option composition, `SegmentedControl` over Button Group, `TabBar` or `SegmentedControl` over Web Awesome Tabs, `LucideIcon` over Web Awesome Icon, and `ResizableRegion` over Split Panel. Use Tree/Tree Item, Animated Image, and Comparison only for a specific required behavior; avoid Zoomable Frame.
|
|
@@ -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.11` 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.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { ListHeader } from './chunk-
|
|
1
|
+
import { ListHeader } from './chunk-5ATCDSQS.js';
|
|
2
2
|
import { ListItem } from './chunk-L4OKFDJY.js';
|
|
3
|
-
import { ToolbarControlGroup } from './chunk-
|
|
3
|
+
import { ToolbarControlGroup } from './chunk-RNPGFQ33.js';
|
|
4
4
|
import { Toolbar } from './chunk-DAFFDO33.js';
|
|
5
5
|
|
|
6
|
-
import { LucideIcon } from './chunk-W2FK7ZNY.js';
|
|
7
6
|
|
|
8
7
|
|
|
8
|
+
import { LucideIcon } from './chunk-W2FK7ZNY.js';
|
|
9
9
|
import { PanelLeftClose, Moon, Sun, PanelLeftOpen, Waypoints, ExternalLink } from 'lucide';
|
|
10
10
|
import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
|
|
11
11
|
|
|
@@ -118,7 +118,10 @@ function Catalog({
|
|
|
118
118
|
resource.detail ? /* @__PURE__ */ jsx("code", { children: resource.detail }) : /* @__PURE__ */ jsx(Fragment, {})
|
|
119
119
|
] })) }) }) : /* @__PURE__ */ jsx(Fragment, {}),
|
|
120
120
|
trailing: related.length > 0 ? /* @__PURE__ */ jsx("div", { class: "kui-catalog__related", "data-catalog-related": true, children: /* @__PURE__ */ jsx(ToolbarControlGroup, { single: true, className: "kui-catalog__related-group", label: "Related entries", children: /* @__PURE__ */ jsxs("wa-dropdown", { class: "kui-catalog__related-menu", placement: "top-end", "data-key": `kui-catalog-related-${active}`, "data-morph-skip-children": true, children: [
|
|
121
|
-
/* @__PURE__ */ jsx("wa-button", { slot: "trigger", appearance: "plain", "with-caret": true,
|
|
121
|
+
/* @__PURE__ */ jsx("wa-button", { slot: "trigger", appearance: "plain", "with-caret": true, children: /* @__PURE__ */ jsxs("span", { class: "kui-catalog__related-trigger", children: [
|
|
122
|
+
/* @__PURE__ */ jsx(LucideIcon, { icon: Waypoints, name: "waypoints" }),
|
|
123
|
+
/* @__PURE__ */ jsx("span", { class: "kui-catalog__related-label", children: "Component" })
|
|
124
|
+
] }) }),
|
|
122
125
|
relatedMenuItems(related, selectAction)
|
|
123
126
|
] }) }) }) : /* @__PURE__ */ jsx(Fragment, {})
|
|
124
127
|
}
|
package/dist/catalog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/catalog.tsx"],"names":[],"mappings":"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","file":"catalog.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ExternalLink, Moon, PanelLeftClose, PanelLeftOpen, Sun, Waypoints } from 'lucide';\n\nimport { ListHeader } from './list-header.js';\nimport { ListItem } from './list-item.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** A reference link shown in the detail footer for the active entry. */\nexport interface CatalogResource {\n label: string;\n href: string;\n /** Optional monospace detail (e.g. a file path) shown after the label. */\n detail?: string;\n}\n\n/** A related entry offered in the detail footer's \"Related entries\" popup menu. */\nexport interface CatalogRelated {\n id: string;\n name: string;\n /** Group heading in the menu, e.g. \"Uses\" / \"Used by\". */\n group: string;\n}\n\nexport interface CatalogEntry {\n id: string;\n name: string;\n description?: string;\n resources?: readonly CatalogResource[];\n related?: readonly CatalogRelated[];\n}\n\nexport interface CatalogSection {\n category: string;\n entries: readonly CatalogEntry[];\n}\n\n/**\n * A secondary group of sections shown below the primary sidebar sections with a\n * quieter \"ecosystem\" treatment (e.g. third-party components). Optionally\n * collapsible — the app owns `expanded` and toggles it from `wireCatalog`'s\n * `onToggleSecondary`.\n */\nexport interface CatalogSecondaryGroup {\n label: string;\n sections: readonly CatalogSection[];\n /** When true, the group's label is a disclosure toggle controlling `expanded`. */\n collapsible?: boolean;\n /** Whether the group is expanded (controlled). Ignored unless `collapsible`. */\n expanded?: boolean;\n}\n\nexport interface CatalogBrand {\n title: string;\n subtitle?: string;\n /** Logo image URL (rendered decorative). Omit for a text-only brand. */\n logoUrl?: string;\n}\n\nexport interface CatalogProps {\n brand: CatalogBrand;\n sections: readonly CatalogSection[];\n /** The controlled active entry id — the app owns this signal. */\n active: string;\n /** The rendered preview for the active entry; the app computes it from `active`. */\n content: SafeHtml;\n /** Whether the sidebar is collapsed (controlled). */\n collapsed?: boolean;\n /** Current theme; when set, a theme toggle is shown that switches to the opposite. Omit to hide it. */\n theme?: 'light' | 'dark';\n /** Extra header controls placed before the theme toggle (each a `ToolbarControlGroup`). */\n headerActions?: SafeHtml;\n /** A secondary \"ecosystem\" group of sections below the primary category groups. */\n secondarySections?: CatalogSecondaryGroup;\n /** Extra sidebar content below the category groups (and the secondary group). */\n sidebarFooter?: SafeHtml;\n /** Status line content shown at the start of the detail footer. */\n status?: SafeHtml;\n selectAction?: string;\n toggleSidebarAction?: string;\n toggleThemeAction?: string;\n /** Action fired by the secondary group's disclosure toggle (when collapsible). */\n toggleSecondaryAction?: string;\n className?: string;\n}\n\nfunction findEntry(sections: readonly CatalogSection[], id: string): CatalogEntry | undefined {\n for (const section of sections) {\n for (const entry of section.entries) if (entry.id === id) return entry;\n }\n return undefined;\n}\n\n/**\n * Render the related entries as a `wa-dropdown` popup-menu body: a heading per\n * `group` (first-seen order) followed by that group's entries, each a navigable\n * item carrying the same `selectAction` the sidebar items use, so a chosen entry\n * routes through the one `wireCatalog` select handler.\n */\nfunction relatedMenuItems(related: readonly CatalogRelated[], selectAction: string): SafeHtml[] {\n const groups: string[] = [];\n for (const entry of related) if (!groups.includes(entry.group)) groups.push(entry.group);\n const nodes: SafeHtml[] = [];\n groups.forEach((group, index) => {\n if (index > 0) nodes.push(<wa-divider></wa-divider>);\n nodes.push(<small class=\"kui-catalog__related-heading\">{group}</small>);\n for (const entry of related) {\n if (entry.group === group) nodes.push(<wa-dropdown-item data-action={selectAction} data-item-id={entry.id}>{entry.name}</wa-dropdown-item>);\n }\n });\n return nodes;\n}\n\n/**\n * A reusable component-catalog shell: a collapsible category sidebar, a titled\n * detail stage that renders the active entry's preview, and a footer with\n * reference links and a related-entry popup menu. Built entirely from public\n * `@kerfjs/ui` primitives. Controlled and stateless — the app owns the `active`,\n * `collapsed`, and `theme` signals and computes `content` from `active` in its own\n * render; wire the sidebar/collapse/theme actions with `wireCatalog`.\n */\nexport function Catalog({\n brand,\n sections,\n active,\n content,\n collapsed = false,\n theme,\n headerActions,\n secondarySections,\n sidebarFooter,\n status,\n selectAction = 'catalog-select',\n toggleSidebarAction = 'catalog-toggle-sidebar',\n toggleThemeAction = 'catalog-toggle-theme',\n toggleSecondaryAction = 'catalog-toggle-secondary',\n className = '',\n}: CatalogProps) {\n const selected = findEntry(sections, active) ?? (secondarySections ? findEntry(secondarySections.sections, active) : undefined);\n const name = selected?.name ?? '';\n const nextTheme = theme === 'dark' ? 'light' : 'dark';\n const resources = selected?.resources ?? [];\n const related = selected?.related ?? [];\n\n return <main class={`kui-catalog ${className}`.trim()} data-component=\"catalog\" data-sidebar-collapsed={String(collapsed)}>\n <aside class=\"kui-catalog__sidebar kui-pane\" aria-label={`${brand.title} catalog`}>\n <header class=\"kui-catalog__brand kui-pane__toolbar\">\n <Toolbar\n label={`${brand.title} catalog header`}\n divider={false}\n leading={<ToolbarControlGroup appearance=\"borderless\" className=\"kui-catalog__identity\">{brand.logoUrl ? <img class=\"kui-catalog__mark\" src={brand.logoUrl} alt=\"\" /> : <></>}<h1>{brand.title}</h1></ToolbarControlGroup>}\n trailing={<ToolbarControlGroup appearance=\"borderless\" single><button type=\"button\" data-action={toggleSidebarAction} aria-label={`Collapse ${brand.title} catalog`}><LucideIcon icon={PanelLeftClose} name=\"panel-left-close\" /></button></ToolbarControlGroup>}\n />\n {brand.subtitle ? <p class=\"kui-catalog__subtitle\">{brand.subtitle}</p> : <></>}\n </header>\n <nav class=\"kui-pane__content kui-content\" aria-label={`${brand.title} components`}>\n {sections.map((section) => <section class=\"kui-catalog__group\">\n <ListHeader label={section.category} />\n <div class=\"kui-catalog__items\">\n {section.entries.map((entry) => <ListItem action={selectAction} itemId={entry.id} label={entry.name} selected={active === entry.id} title={entry.description} multiline />)}\n </div>\n </section>)}\n {secondarySections ? <section class=\"kui-catalog__group kui-catalog__group--secondary\">\n <ListHeader label={secondarySections.label} toggle={secondarySections.collapsible} expanded={secondarySections.collapsible ? Boolean(secondarySections.expanded) : undefined} action={secondarySections.collapsible ? toggleSecondaryAction : undefined} />\n {!secondarySections.collapsible || secondarySections.expanded\n ? <div class=\"kui-catalog__secondary\" data-catalog-secondary>\n {secondarySections.sections.map((section) => <section class=\"kui-catalog__secondary-group\">\n <h3 class=\"kui-catalog__secondary-heading\">{section.category}</h3>\n <div class=\"kui-catalog__items\">\n {section.entries.map((entry) => <ListItem action={selectAction} itemId={entry.id} label={entry.name} selected={active === entry.id} title={entry.description} multiline />)}\n </div>\n </section>)}\n </div>\n : <></>}\n </section> : <></>}\n {sidebarFooter}\n </nav>\n </aside>\n <article class=\"kui-catalog__detail kui-pane\">\n <header class=\"kui-catalog__header kui-pane__toolbar\">\n <Toolbar\n label={`${name} header`}\n divider={false}\n leading={<>{collapsed ? <ToolbarControlGroup appearance=\"borderless\" single><button type=\"button\" data-action={toggleSidebarAction} aria-label={`Expand ${brand.title} catalog`}><LucideIcon icon={PanelLeftOpen} name=\"panel-left-open\" /></button></ToolbarControlGroup> : <></>}<ToolbarControlGroup appearance=\"borderless\" className=\"kui-catalog__title\"><h2>{name}</h2></ToolbarControlGroup></>}\n trailing={<div class=\"kui-catalog__header-actions\">{headerActions}{theme ? <ToolbarControlGroup className=\"kui-catalog__settings\" label=\"Catalog display\"><button type=\"button\" data-action={toggleThemeAction} aria-label={`Use ${nextTheme} theme`} data-theme-preview={theme}>{nextTheme === 'dark' ? <LucideIcon icon={Moon} name=\"moon\" /> : <LucideIcon icon={Sun} name=\"sun\" />}<span>{nextTheme === 'dark' ? 'Dark' : 'Light'}</span></button></ToolbarControlGroup> : <></>}</div>}\n />\n {selected?.description ? <p class=\"kui-catalog__description kui-content-item\">{selected.description}</p> : <></>}\n </header>\n <section class=\"kui-catalog__stage kui-pane__content\" aria-label={`${name} preview`}>\n <div class=\"kui-catalog__canvas\">{content}</div>\n </section>\n <footer class=\"kui-catalog__footer kui-pane__footer\">\n {status ? <div class=\"kui-catalog__status\">{status}</div> : <></>}\n <Toolbar\n label={`${name} resources`}\n divider={false}\n leading={resources.length > 0\n ? <nav class=\"kui-catalog__resources\" aria-label={`${name} resources`}><ToolbarControlGroup className=\"kui-catalog__resource-group\" label={`${name} resources`}>{resources.map((resource) => <a class=\"kui-catalog__resource\" href={resource.href} target=\"_blank\" rel=\"noopener noreferrer\" aria-label={`${name}: ${resource.label} (opens in new tab)`}><LucideIcon icon={ExternalLink} name=\"external-link\" /><span>{resource.label}</span>{resource.detail ? <code>{resource.detail}</code> : <></>}</a>)}</ToolbarControlGroup></nav>\n : <></>}\n trailing={related.length > 0\n ? <div class=\"kui-catalog__related\" data-catalog-related><ToolbarControlGroup single className=\"kui-catalog__related-group\" label=\"Related entries\"><wa-dropdown class=\"kui-catalog__related-menu\" placement=\"top-end\" data-key={`kui-catalog-related-${active}`} data-morph-skip-children><wa-button slot=\"trigger\" appearance=\"plain\" with-caret aria-label=\"Related entries\"><LucideIcon icon={Waypoints} name=\"waypoints\" /></wa-button>{relatedMenuItems(related, selectAction)}</wa-dropdown></ToolbarControlGroup></div>\n : <></>}\n />\n </footer>\n </article>\n </main>;\n}\n\n/**\n * How a {@link CatalogExample}'s content aligns its visible left edge with the\n * example's `ListHeader` label (which sits 16px in — 8px title + 8px label):\n * - `'glyph'` — a bare glyph/text specimen with no inline geometry insets the full 16px.\n * - `'inline-control'` — a control that already carries ~8px of its own inline padding insets 8px so its content lands on the same line.\n * - `'none'` — a content-item / composition that owns its geometry and already aligns; no inset (default).\n */\nexport type CatalogExampleAlign = 'glyph' | 'inline-control' | 'none';\n\nexport interface CatalogExampleProps {\n /** The example's label, shown as a `ListHeader` above the specimen. Omit for a bare specimen. */\n label?: string;\n /** Optional explanatory note between the label and the specimen. */\n note?: SafeHtml | string;\n /** Alignment inset for the specimen — see {@link CatalogExampleAlign}. Default `'none'`. */\n align?: CatalogExampleAlign;\n className?: string;\n children?: SafeHtml | readonly SafeHtml[];\n}\n\n/**\n * One labeled example in a catalog preview: a `ListHeader` label, an optional\n * note, and the specimen. `align` insets the specimen so its visible left edge\n * lines up with the label text, encoding the catalog's alignment rules as a\n * first-class prop instead of per-demo CSS. The inset is published as the\n * `--kui-catalog-example-align` custom property so a debug overlay can exclude it\n * from a specimen's measured margin.\n */\nexport function CatalogExample({ label, note, align = 'none', className = '', children }: CatalogExampleProps) {\n return <section class={`kui-catalog-example ${className}`.trim()} data-catalog-example data-align={align}>\n {label !== undefined ? <ListHeader label={label} /> : <></>}\n {note !== undefined ? <p class=\"kui-catalog-example__note\">{note}</p> : <></>}\n {children}\n </section>;\n}\n\nexport interface CatalogExampleStackProps {\n /** Accessible label for the stack region. */\n label?: string;\n className?: string;\n children?: SafeHtml | readonly SafeHtml[];\n}\n\n/** A vertically-stacked group of {@link CatalogExample}s with the catalog's example rhythm. */\nexport function CatalogExampleStack({ label, className = '', children }: CatalogExampleStackProps) {\n return <div class={`kui-catalog-example-stack ${className}`.trim()} data-catalog-example-stack aria-label={label}>{children}</div>;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/catalog.tsx"],"names":[],"mappings":"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","file":"catalog.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ExternalLink, Moon, PanelLeftClose, PanelLeftOpen, Sun, Waypoints } from 'lucide';\n\nimport { ListHeader } from './list-header.js';\nimport { ListItem } from './list-item.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** A reference link shown in the detail footer for the active entry. */\nexport interface CatalogResource {\n label: string;\n href: string;\n /** Optional monospace detail (e.g. a file path) shown after the label. */\n detail?: string;\n}\n\n/** A related entry offered in the detail footer's \"Related entries\" popup menu. */\nexport interface CatalogRelated {\n id: string;\n name: string;\n /** Group heading in the menu, e.g. \"Uses\" / \"Used by\". */\n group: string;\n}\n\nexport interface CatalogEntry {\n id: string;\n name: string;\n description?: string;\n resources?: readonly CatalogResource[];\n related?: readonly CatalogRelated[];\n}\n\nexport interface CatalogSection {\n category: string;\n entries: readonly CatalogEntry[];\n}\n\n/**\n * A secondary group of sections shown below the primary sidebar sections with a\n * quieter \"ecosystem\" treatment (e.g. third-party components). Optionally\n * collapsible — the app owns `expanded` and toggles it from `wireCatalog`'s\n * `onToggleSecondary`.\n */\nexport interface CatalogSecondaryGroup {\n label: string;\n sections: readonly CatalogSection[];\n /** When true, the group's label is a disclosure toggle controlling `expanded`. */\n collapsible?: boolean;\n /** Whether the group is expanded (controlled). Ignored unless `collapsible`. */\n expanded?: boolean;\n}\n\nexport interface CatalogBrand {\n title: string;\n subtitle?: string;\n /** Logo image URL (rendered decorative). Omit for a text-only brand. */\n logoUrl?: string;\n}\n\nexport interface CatalogProps {\n brand: CatalogBrand;\n sections: readonly CatalogSection[];\n /** The controlled active entry id — the app owns this signal. */\n active: string;\n /** The rendered preview for the active entry; the app computes it from `active`. */\n content: SafeHtml;\n /** Whether the sidebar is collapsed (controlled). */\n collapsed?: boolean;\n /** Current theme; when set, a theme toggle is shown that switches to the opposite. Omit to hide it. */\n theme?: 'light' | 'dark';\n /** Extra header controls placed before the theme toggle (each a `ToolbarControlGroup`). */\n headerActions?: SafeHtml;\n /** A secondary \"ecosystem\" group of sections below the primary category groups. */\n secondarySections?: CatalogSecondaryGroup;\n /** Extra sidebar content below the category groups (and the secondary group). */\n sidebarFooter?: SafeHtml;\n /** Status line content shown at the start of the detail footer. */\n status?: SafeHtml;\n selectAction?: string;\n toggleSidebarAction?: string;\n toggleThemeAction?: string;\n /** Action fired by the secondary group's disclosure toggle (when collapsible). */\n toggleSecondaryAction?: string;\n className?: string;\n}\n\nfunction findEntry(sections: readonly CatalogSection[], id: string): CatalogEntry | undefined {\n for (const section of sections) {\n for (const entry of section.entries) if (entry.id === id) return entry;\n }\n return undefined;\n}\n\n/**\n * Render the related entries as a `wa-dropdown` popup-menu body: a heading per\n * `group` (first-seen order) followed by that group's entries, each a navigable\n * item carrying the same `selectAction` the sidebar items use, so a chosen entry\n * routes through the one `wireCatalog` select handler.\n */\nfunction relatedMenuItems(related: readonly CatalogRelated[], selectAction: string): SafeHtml[] {\n const groups: string[] = [];\n for (const entry of related) if (!groups.includes(entry.group)) groups.push(entry.group);\n const nodes: SafeHtml[] = [];\n groups.forEach((group, index) => {\n if (index > 0) nodes.push(<wa-divider></wa-divider>);\n nodes.push(<small class=\"kui-catalog__related-heading\">{group}</small>);\n for (const entry of related) {\n if (entry.group === group) nodes.push(<wa-dropdown-item data-action={selectAction} data-item-id={entry.id}>{entry.name}</wa-dropdown-item>);\n }\n });\n return nodes;\n}\n\n/**\n * A reusable component-catalog shell: a collapsible category sidebar, a titled\n * detail stage that renders the active entry's preview, and a footer with\n * reference links and a related-entry popup menu. Built entirely from public\n * `@kerfjs/ui` primitives. Controlled and stateless — the app owns the `active`,\n * `collapsed`, and `theme` signals and computes `content` from `active` in its own\n * render; wire the sidebar/collapse/theme actions with `wireCatalog`.\n */\nexport function Catalog({\n brand,\n sections,\n active,\n content,\n collapsed = false,\n theme,\n headerActions,\n secondarySections,\n sidebarFooter,\n status,\n selectAction = 'catalog-select',\n toggleSidebarAction = 'catalog-toggle-sidebar',\n toggleThemeAction = 'catalog-toggle-theme',\n toggleSecondaryAction = 'catalog-toggle-secondary',\n className = '',\n}: CatalogProps) {\n const selected = findEntry(sections, active) ?? (secondarySections ? findEntry(secondarySections.sections, active) : undefined);\n const name = selected?.name ?? '';\n const nextTheme = theme === 'dark' ? 'light' : 'dark';\n const resources = selected?.resources ?? [];\n const related = selected?.related ?? [];\n\n return <main class={`kui-catalog ${className}`.trim()} data-component=\"catalog\" data-sidebar-collapsed={String(collapsed)}>\n <aside class=\"kui-catalog__sidebar kui-pane\" aria-label={`${brand.title} catalog`}>\n <header class=\"kui-catalog__brand kui-pane__toolbar\">\n <Toolbar\n label={`${brand.title} catalog header`}\n divider={false}\n leading={<ToolbarControlGroup appearance=\"borderless\" className=\"kui-catalog__identity\">{brand.logoUrl ? <img class=\"kui-catalog__mark\" src={brand.logoUrl} alt=\"\" /> : <></>}<h1>{brand.title}</h1></ToolbarControlGroup>}\n trailing={<ToolbarControlGroup appearance=\"borderless\" single><button type=\"button\" data-action={toggleSidebarAction} aria-label={`Collapse ${brand.title} catalog`}><LucideIcon icon={PanelLeftClose} name=\"panel-left-close\" /></button></ToolbarControlGroup>}\n />\n {brand.subtitle ? <p class=\"kui-catalog__subtitle\">{brand.subtitle}</p> : <></>}\n </header>\n <nav class=\"kui-pane__content kui-content\" aria-label={`${brand.title} components`}>\n {sections.map((section) => <section class=\"kui-catalog__group\">\n <ListHeader label={section.category} />\n <div class=\"kui-catalog__items\">\n {section.entries.map((entry) => <ListItem action={selectAction} itemId={entry.id} label={entry.name} selected={active === entry.id} title={entry.description} multiline />)}\n </div>\n </section>)}\n {secondarySections ? <section class=\"kui-catalog__group kui-catalog__group--secondary\">\n <ListHeader label={secondarySections.label} toggle={secondarySections.collapsible} expanded={secondarySections.collapsible ? Boolean(secondarySections.expanded) : undefined} action={secondarySections.collapsible ? toggleSecondaryAction : undefined} />\n {!secondarySections.collapsible || secondarySections.expanded\n ? <div class=\"kui-catalog__secondary\" data-catalog-secondary>\n {secondarySections.sections.map((section) => <section class=\"kui-catalog__secondary-group\">\n <h3 class=\"kui-catalog__secondary-heading\">{section.category}</h3>\n <div class=\"kui-catalog__items\">\n {section.entries.map((entry) => <ListItem action={selectAction} itemId={entry.id} label={entry.name} selected={active === entry.id} title={entry.description} multiline />)}\n </div>\n </section>)}\n </div>\n : <></>}\n </section> : <></>}\n {sidebarFooter}\n </nav>\n </aside>\n <article class=\"kui-catalog__detail kui-pane\">\n <header class=\"kui-catalog__header kui-pane__toolbar\">\n <Toolbar\n label={`${name} header`}\n divider={false}\n leading={<>{collapsed ? <ToolbarControlGroup appearance=\"borderless\" single><button type=\"button\" data-action={toggleSidebarAction} aria-label={`Expand ${brand.title} catalog`}><LucideIcon icon={PanelLeftOpen} name=\"panel-left-open\" /></button></ToolbarControlGroup> : <></>}<ToolbarControlGroup appearance=\"borderless\" className=\"kui-catalog__title\"><h2>{name}</h2></ToolbarControlGroup></>}\n trailing={<div class=\"kui-catalog__header-actions\">{headerActions}{theme ? <ToolbarControlGroup className=\"kui-catalog__settings\" label=\"Catalog display\"><button type=\"button\" data-action={toggleThemeAction} aria-label={`Use ${nextTheme} theme`} data-theme-preview={theme}>{nextTheme === 'dark' ? <LucideIcon icon={Moon} name=\"moon\" /> : <LucideIcon icon={Sun} name=\"sun\" />}<span>{nextTheme === 'dark' ? 'Dark' : 'Light'}</span></button></ToolbarControlGroup> : <></>}</div>}\n />\n {selected?.description ? <p class=\"kui-catalog__description kui-content-item\">{selected.description}</p> : <></>}\n </header>\n <section class=\"kui-catalog__stage kui-pane__content\" aria-label={`${name} preview`}>\n <div class=\"kui-catalog__canvas\">{content}</div>\n </section>\n <footer class=\"kui-catalog__footer kui-pane__footer\">\n {status ? <div class=\"kui-catalog__status\">{status}</div> : <></>}\n <Toolbar\n label={`${name} resources`}\n divider={false}\n leading={resources.length > 0\n ? <nav class=\"kui-catalog__resources\" aria-label={`${name} resources`}><ToolbarControlGroup className=\"kui-catalog__resource-group\" label={`${name} resources`}>{resources.map((resource) => <a class=\"kui-catalog__resource\" href={resource.href} target=\"_blank\" rel=\"noopener noreferrer\" aria-label={`${name}: ${resource.label} (opens in new tab)`}><LucideIcon icon={ExternalLink} name=\"external-link\" /><span>{resource.label}</span>{resource.detail ? <code>{resource.detail}</code> : <></>}</a>)}</ToolbarControlGroup></nav>\n : <></>}\n trailing={related.length > 0\n ? <div class=\"kui-catalog__related\" data-catalog-related><ToolbarControlGroup single className=\"kui-catalog__related-group\" label=\"Related entries\"><wa-dropdown class=\"kui-catalog__related-menu\" placement=\"top-end\" data-key={`kui-catalog-related-${active}`} data-morph-skip-children><wa-button slot=\"trigger\" appearance=\"plain\" with-caret><span class=\"kui-catalog__related-trigger\"><LucideIcon icon={Waypoints} name=\"waypoints\" /><span class=\"kui-catalog__related-label\">Component</span></span></wa-button>{relatedMenuItems(related, selectAction)}</wa-dropdown></ToolbarControlGroup></div>\n : <></>}\n />\n </footer>\n </article>\n </main>;\n}\n\n/**\n * How a {@link CatalogExample}'s content aligns its visible left edge with the\n * example's `ListHeader` label (which sits 16px in — 8px title + 8px label):\n * - `'glyph'` — a bare glyph/text specimen with no inline geometry insets the full 16px.\n * - `'inline-control'` — a control that already carries ~8px of its own inline padding insets 8px so its content lands on the same line.\n * - `'none'` — a content-item / composition that owns its geometry and already aligns; no inset (default).\n */\nexport type CatalogExampleAlign = 'glyph' | 'inline-control' | 'none';\n\nexport interface CatalogExampleProps {\n /** The example's label, shown as a `ListHeader` above the specimen. Omit for a bare specimen. */\n label?: string;\n /** Optional explanatory note between the label and the specimen. */\n note?: SafeHtml | string;\n /** Alignment inset for the specimen — see {@link CatalogExampleAlign}. Default `'none'`. */\n align?: CatalogExampleAlign;\n className?: string;\n children?: SafeHtml | readonly SafeHtml[];\n}\n\n/**\n * One labeled example in a catalog preview: a `ListHeader` label, an optional\n * note, and the specimen. `align` insets the specimen so its visible left edge\n * lines up with the label text, encoding the catalog's alignment rules as a\n * first-class prop instead of per-demo CSS. The inset is published as the\n * `--kui-catalog-example-align` custom property so a debug overlay can exclude it\n * from a specimen's measured margin.\n */\nexport function CatalogExample({ label, note, align = 'none', className = '', children }: CatalogExampleProps) {\n return <section class={`kui-catalog-example ${className}`.trim()} data-catalog-example data-align={align}>\n {label !== undefined ? <ListHeader label={label} /> : <></>}\n {note !== undefined ? <p class=\"kui-catalog-example__note\">{note}</p> : <></>}\n {children}\n </section>;\n}\n\nexport interface CatalogExampleStackProps {\n /** Accessible label for the stack region. */\n label?: string;\n className?: string;\n children?: SafeHtml | readonly SafeHtml[];\n}\n\n/** A vertically-stacked group of {@link CatalogExample}s with the catalog's example rhythm. */\nexport function CatalogExampleStack({ label, className = '', children }: CatalogExampleStackProps) {\n return <div class={`kui-catalog-example-stack ${className}`.trim()} data-catalog-example-stack aria-label={label}>{children}</div>;\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { DisclosureArrow } from './chunk-56RJXPHG.js';
|
|
2
1
|
import { filterDataAttributes, filterControlAttributes } from './chunk-7BR3DO2A.js';
|
|
3
2
|
import { Skeleton } from './chunk-B24C4A6T.js';
|
|
3
|
+
import { DisclosureArrow } from './chunk-56RJXPHG.js';
|
|
4
4
|
import { jsx, jsxs } from 'kerfjs/jsx-runtime';
|
|
5
5
|
|
|
6
6
|
var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
|
|
@@ -39,4 +39,4 @@ function ListHeader({ label, count, countLabel, badge, action, actionLabel, acti
|
|
|
39
39
|
|
|
40
40
|
export { ListHeader };
|
|
41
41
|
|
|
42
|
-
//# sourceMappingURL=chunk-
|
|
42
|
+
//# sourceMappingURL=chunk-5ATCDSQS.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list-header.tsx"],"names":[],"mappings":"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","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/list-header.tsx"],"names":[],"mappings":"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","file":"chunk-5ATCDSQS.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { DisclosureArrow } from './disclosure-arrow.js';\nimport { filterControlAttributes, filterDataAttributes } from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-has-badge',\n 'data-has-count',\n 'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set(['data-action']);\n\ntype ListHeaderRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-has-badge'?: never;\n 'data-has-count'?: never;\n 'data-toggle'?: never;\n }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-action'?: never;\n popoverTarget?: string;\n popoverTargetAction?: 'toggle' | 'show' | 'hide';\n 'aria-controls'?: string;\n 'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n }\n>;\n\ninterface ListHeaderBaseProps {\n label: string;\n action?: string;\n actionLabel?: string;\n actionIcon?: SafeHtml;\n actionDisabled?: boolean;\n disabledReason?: string;\n expanded?: boolean;\n toggle?: boolean;\n /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n placeholder?: boolean;\n rootAttributes?: ListHeaderRootAttributes;\n triggerAttributes?: ListHeaderTriggerAttributes;\n}\n\ntype ListHeaderIndicatorProps =\n | { count: number; countLabel: string; badge?: never }\n | { count?: never; countLabel?: never; badge?: SafeHtml };\n\nexport type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps;\n\nexport function ListHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled = false, disabledReason, expanded, toggle = false, placeholder = false, rootAttributes = {}, triggerAttributes = {} }: ListHeaderProps) {\n const extensionRootAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n const extensionTriggerAttributes = filterControlAttributes(triggerAttributes, PROTECTED_TRIGGER_DATA_ATTRIBUTES);\n const normalizedCount = typeof count === 'number' && Number.isSafeInteger(count) && count >= 0 ? count : undefined;\n const normalizedCountLabel = normalizedCount === undefined\n ? undefined\n : typeof countLabel === 'string' && countLabel.trim() ? countLabel : String(normalizedCount);\n const renderedBadge = normalizedCount === undefined ? badge : undefined;\n const renderedActionIcon = actionIcon ?? (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n const accessibleLabel = normalizedCount === undefined ? undefined : `${label}, ${normalizedCountLabel}`;\n const indicator = placeholder\n ? ((normalizedCount !== undefined || renderedBadge) && <span class=\"kui-list-header__badge\"><Skeleton width=\"1.75em\" /></span>)\n : normalizedCount === undefined\n ? renderedBadge && <span class=\"kui-list-header__badge\">{renderedBadge}</span>\n : <span class=\"kui-list-header__count\" aria-hidden=\"true\">{normalizedCount}</span>;\n const busy = placeholder ? ('true' as const) : undefined;\n if (toggle) {\n return <header {...extensionRootAttributes} class=\"kui-list-header\" data-component=\"list-header\" data-has-badge={String(Boolean(renderedBadge))} data-has-count={String(normalizedCount !== undefined)} data-toggle=\"true\" data-placeholder={placeholder ? 'true' : undefined} aria-busy={busy}><button {...extensionTriggerAttributes} type=\"button\" class=\"kui-list-header__title kui-list-header__toggle\" data-action={placeholder ? undefined : action} disabled={placeholder || undefined} aria-label={accessibleLabel} aria-expanded={String(Boolean(expanded))}><span class=\"kui-list-header__label\">{label}</span>{indicator}{renderedActionIcon && <span class=\"kui-list-header__action-layer\">{renderedActionIcon}</span>}</button></header>;\n }\n return <header {...extensionRootAttributes} class=\"kui-list-header\" data-component=\"list-header\" data-has-badge={String(Boolean(renderedBadge))} data-has-count={String(normalizedCount !== undefined)} data-toggle=\"false\" data-placeholder={placeholder ? 'true' : undefined} aria-busy={busy}><div class=\"kui-list-header__title\"><h2 class=\"kui-list-header__label\" aria-label={accessibleLabel}>{label}</h2>{indicator}</div>{action && <button {...extensionTriggerAttributes} type=\"button\" class=\"kui-list-header__action\" data-action={placeholder ? undefined : action} aria-label={actionLabel} title={actionDisabled ? disabledReason : actionLabel} disabled={actionDisabled || placeholder || undefined}>{renderedActionIcon}</button>}</header>;\n}\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx } from 'kerfjs/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
// src/floating-toolbar.tsx
|
|
4
|
+
function FloatingToolbar({ children, label, position = "bottom-end", className = "" }) {
|
|
5
|
+
return /* @__PURE__ */ jsx("div", { class: `kui-floating-toolbar ${className}`.trim(), "data-component": "floating-toolbar", "data-position": position, role: "toolbar", "aria-label": label, children });
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export { FloatingToolbar };
|
|
9
|
+
|
|
10
|
+
//# sourceMappingURL=chunk-5E2HVJ33.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/floating-toolbar.tsx"],"names":[],"mappings":";;;AAiCO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAAU,KAAA,EAAO,WAAW,YAAA,EAAc,SAAA,GAAY,IAAG,EAAyB;AAClH,EAAA,2BAAQ,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,GAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,kBAAA,EAAmB,iBAAe,QAAA,EAAU,IAAA,EAAK,SAAA,EAAU,YAAA,EAAY,OAAQ,QAAA,EAAS,CAAA;AACxK","file":"chunk-5E2HVJ33.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\n/** Where a {@link FloatingToolbar} floats within its positioned container. */\nexport type FloatingToolbarPosition =\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'top'\n | 'top-start'\n | 'top-end';\n\nexport interface FloatingToolbarProps {\n /** Toolbar contents — normally one or more `ToolbarControlGroup`s. */\n children: SafeHtml | SafeHtml[];\n /** Accessible name for the toolbar (required — it exposes `role=\"toolbar\"`). */\n label: string;\n /**\n * Corner or edge it floats to inside its nearest positioned ancestor.\n * Default: `'bottom-end'`.\n */\n position?: FloatingToolbarPosition;\n className?: string;\n}\n\n/**\n * A toolbar that floats above the main content of its nearest positioned\n * ancestor — a transparent, forced-dark cluster of controls (e.g. a drawer\n * restore button) that sits over the content but NOT over dialogs or overlays\n * (it is not in the top layer). It is inset from the container edges by\n * `--kui-floating-toolbar-inset` (default `--kui-space-m`, i.e. 8px more than a\n * top toolbar's own inset); override that token to move it. The app owns the\n * controls and their behavior — wire them with `delegate()` as usual.\n */\nexport function FloatingToolbar({ children, label, position = 'bottom-end', className = '' }: FloatingToolbarProps) {\n return <div class={`kui-floating-toolbar ${className}`.trim()} data-component=\"floating-toolbar\" data-position={position} role=\"toolbar\" aria-label={label}>{children}</div>;\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { LucideIcon } from './chunk-W2FK7ZNY.js';
|
|
2
1
|
import { Skeleton } from './chunk-B24C4A6T.js';
|
|
2
|
+
import { LucideIcon } from './chunk-W2FK7ZNY.js';
|
|
3
3
|
import { ChevronDown } from 'lucide';
|
|
4
4
|
import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
|
|
5
5
|
|
|
@@ -36,4 +36,4 @@ function Select({ name, value, label, ariaLabel, choices, className = "", placeh
|
|
|
36
36
|
|
|
37
37
|
export { Select };
|
|
38
38
|
|
|
39
|
-
//# sourceMappingURL=chunk-
|
|
39
|
+
//# sourceMappingURL=chunk-CH4SQ6H5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/select.tsx"],"names":[],"mappings":"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","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/select.tsx"],"names":[],"mappings":"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","file":"chunk-CH4SQ6H5.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronDown } from 'lucide';\n\nimport { LucideIcon, type LucideNode } from './lucide-icon.js';\nimport { Skeleton } from './skeleton.js';\n\nexport interface SelectChoice<Value extends string = string> {\n value: Value;\n label: string;\n icon?: LucideNode;\n iconName?: string;\n color?: string;\n group?: string;\n separatorBefore?: boolean;\n}\n\nexport interface SelectProps<Value extends string = string> {\n name: string;\n value: Value;\n label?: string;\n ariaLabel?: string;\n choices: readonly SelectChoice<Value>[];\n className?: string;\n /** Empty-value hint text shown in the closed control (the native select placeholder). */\n placeholderText?: string;\n disabled?: boolean;\n fitMenu?: boolean;\n renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n placeholder?: boolean;\n}\n\nexport function Select<Value extends string>({ name, value, label, ariaLabel, choices, className = '', placeholderText, disabled = false, fitMenu = false, renderSelected, placeholder = false }: SelectProps<Value>) {\n if (placeholder) {\n return <div class={`kui-select kui-select--placeholder ${className}`.trim()} data-component=\"select\" data-placeholder=\"true\" aria-busy=\"true\">\n {label && <span class=\"kui-select__placeholder-label\">{label}</span>}\n <span class=\"kui-select__placeholder-box\" aria-label={ariaLabel} role=\"img\">\n <Skeleton width=\"10em\" />\n <span class=\"kui-select__placeholder-chevron\" aria-hidden=\"true\"><LucideIcon icon={ChevronDown} name=\"chevron-down\" /></span>\n </span>\n </div>;\n }\n const selected = choices.find((choice) => choice.value === value);\n const icon = (choice: SelectChoice<Value>, selectedIcon = false) => <span data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`} data-morph-skip slot=\"start\" class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`} style={choice.color ? `color:${choice.color}` : undefined}>{choice.icon ? <LucideIcon icon={choice.icon} name={choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')} /> : null}</span>;\n const option = (choice: SelectChoice<Value>) => <>{choice.separatorBefore && <wa-divider></wa-divider>}<wa-option value={choice.value}>{choice.icon ? icon(choice) : null}{choice.label}</wa-option></>;\n const groups = [...new Set(choices.map((choice) => choice.group).filter((group): group is string => Boolean(group)))];\n const ungrouped = choices.filter((choice) => !choice.group);\n return <wa-select class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''} ${className}`.trim()} data-component=\"select\" name={name} label={label} aria-label={ariaLabel} value={value} placeholder={placeholderText} disabled={disabled}>\n {selected && (renderSelected ? <span data-key={`${name}:${value}:custom-selected`} slot=\"start\" class=\"kui-select__custom-selected\">{renderSelected(selected)}</span> : selected.icon ? icon(selected, true) : null)}\n {ungrouped.map(option)}\n {groups.map((group, index) => <div class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`} role=\"group\" aria-label={group}><span class=\"kui-select__group-title\">{group}</span>{choices.filter((choice) => choice.group === group).map(option)}</div>)}\n </wa-select>;\n}\n"]}
|
|
@@ -158,7 +158,7 @@ function wireTokenSearchFields(root, { onSubmit, onEdit, collapsible = true, key
|
|
|
158
158
|
if (onEdit) {
|
|
159
159
|
const field = editor.closest('[data-component="token-search-field"]');
|
|
160
160
|
const id = field?.dataset.tokenSearchId;
|
|
161
|
-
if (id && field?.dataset.disabled !== "true") onEdit({ id, editor });
|
|
161
|
+
if (id && field?.dataset.disabled !== "true") onEdit({ id, editor, event });
|
|
162
162
|
}
|
|
163
163
|
const deletion = pending.get(editor);
|
|
164
164
|
pending.delete(editor);
|
|
@@ -262,4 +262,4 @@ function wireTokenSearchFields(root, { onSubmit, onEdit, collapsible = true, key
|
|
|
262
262
|
|
|
263
263
|
export { wireTokenSearchFields };
|
|
264
264
|
|
|
265
|
-
//# sourceMappingURL=chunk-
|
|
265
|
+
//# sourceMappingURL=chunk-LCOBDOCC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/wire-token-search-fields.ts"],"names":["block"],"mappings":"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","file":"chunk-LCOBDOCC.js","sourcesContent":["import { delegate, type Signal,signal } from 'kerfjs';\n\nimport { placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';\n\nexport interface TokenSearchSubmit {\n id: string;\n editor: HTMLElement;\n}\n\n/** Reported to {@link WireTokenSearchFieldsOptions.onEdit} on every editor input. */\nexport interface TokenSearchEdit extends TokenSearchSubmit {\n /**\n * The `InputEvent` that mutated the editor — read `event.inputType` / `event.data`\n * to gate commit behavior (e.g. only parse a chip on whitespace-terminated input)\n * without keeping a separate `input` listener.\n */\n event: InputEvent;\n}\n\n/** Reported when adjacent-token keyboard deletion asks the app to drop a chip. */\nexport interface TokenSearchTokenRemoval {\n id: string;\n /** The `data-token-value` of the token the app should remove from its state. */\n value: string;\n editor: HTMLElement;\n /** `'backward'` = the token before the caret (Backspace); `'forward'` = after (Delete). */\n direction: 'backward' | 'forward';\n}\n\n/**\n * Opt-in keyboard behavior for the atomic token chips. Off unless `keyboard` is\n * set; each piece defaults on once opted in. The helper never mutates app state:\n * a removal is reported through {@link TokenSearchKeyboardOptions.onRemoveToken}\n * for the caller to apply, while caret movement past a chip is a pure ephemeral\n * mechanic the helper performs itself.\n */\nexport interface TokenSearchKeyboardOptions {\n /**\n * From a collapsed caret with no selection, Backspace removes the token\n * immediately before it and Delete the token immediately after — reported via\n * `onRemoveToken` — instead of deleting a character. Default: true.\n */\n removeAdjacentToken?: boolean;\n /**\n * ArrowRight moves the caret past a trailing atomic token so text typed next\n * lands after the chip. Default: true.\n */\n moveCaretPastToken?: boolean;\n /** Apply the reported removal to your controlled state, then re-render. */\n onRemoveToken?: (removal: TokenSearchTokenRemoval) => void;\n}\n\n/**\n * Managed collapsible behavior for the iconic TokenSearchField. Every piece is on\n * by default; disable a specific one to own it in the app. Provide `signals` to\n * drive app-owned `expanded` signals per field id instead of helper-created ones.\n */\nexport interface TokenSearchCollapsibleOptions {\n /** Expand the field and focus its editor when the iconic trigger is activated. Default: true. */\n expandOnActivate?: boolean;\n /** Collapse the field when focus leaves it while it is empty. Default: true. */\n collapseOnEmptyBlur?: boolean;\n /** Collapse an empty field on Escape and restore focus to its trigger. Default: true. */\n collapseOnEscape?: boolean;\n /** Focus the editor on expand and the trigger on Escape-collapse. Default: true. */\n manageFocus?: boolean;\n /**\n * Keep an empty field expanded when focus moves to a caller-owned surface\n * rendered outside the field — a suggestions dropdown, date picker, or help\n * popover shown beside it. Return true for any focus target that must NOT\n * trigger collapse-on-empty-blur. An element carrying `data-token-search-keep-open`\n * (or any node inside one) is always exempt, so this predicate is only needed\n * for surfaces you cannot mark declaratively.\n */\n keepOpenOn?: (target: Node | null) => boolean;\n /** App-owned `expanded` signals keyed by field id; adopted instead of helper-created. */\n signals?: Readonly<Record<string, Signal<boolean>>>;\n}\n\nexport interface WireTokenSearchFieldsOptions {\n onSubmit?: (submission: TokenSearchSubmit) => void;\n /** Fired on every editor `input`, after the browser mutates it, so a caller can drop its own `input` listener. */\n onEdit?: (edit: TokenSearchEdit) => void;\n /** Managed collapsible transient behavior. `true`/omitted = on with defaults; `false` = fully off. */\n collapsible?: boolean | TokenSearchCollapsibleOptions;\n /** Opt-in atomic-chip keyboard behavior (off by default). `true` = on with defaults. */\n keyboard?: boolean | TokenSearchKeyboardOptions;\n}\n\n/**\n * The value returned from {@link wireTokenSearchFields}: call it (or `dispose()`) to\n * tear down. When collapsible behavior is managed, it also exposes the transient\n * `expanded` state per field id so the app can read it in render, hand in its own\n * signal, or drive it imperatively.\n */\nexport interface TokenSearchFieldsHandle {\n (): void;\n dispose(): void;\n /** The managed `expanded` signal for a field id (adopted or helper-created); undefined when unmanaged. */\n expanded(id: string): Signal<boolean> | undefined;\n /** Expand the field (and, when focus is managed, focus its editor). */\n open(id: string): void;\n /** Collapse the field (and, when focus is managed, restore focus to its trigger). */\n close(id: string): void;\n}\n\ninterface PendingTokenDeletion {\n id: string;\n offset: number;\n tokenCount: number;\n}\n\nfunction editorFromEvent(root: HTMLElement, event: Event): HTMLElement | undefined {\n const target = event.target;\n if (!(target instanceof Element)) return;\n const editor = target.closest<HTMLElement>('[data-token-search-editor]');\n return editor && root.contains(editor) ? editor : undefined;\n}\n\nfunction caretQueryOffset(editor: HTMLElement): number | undefined {\n const selection = editor.ownerDocument.getSelection();\n if (!selection || selection.rangeCount === 0) return;\n const selectionRange = selection.getRangeAt(0);\n if (!editor.contains(selectionRange.startContainer)) return;\n const prefixRange = editor.ownerDocument.createRange();\n prefixRange.selectNodeContents(editor);\n prefixRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);\n const prefix = editor.ownerDocument.createElement('div');\n prefix.append(prefixRange.cloneContents());\n return readTokenSearchField(prefix).query.length;\n}\n\nfunction replacementEditor(root: HTMLElement, id: string): HTMLElement | undefined {\n return [...root.querySelectorAll<HTMLElement>('[data-token-search-editor]')]\n .find((editor) => editor.dataset.tokenSearchEditor === id);\n}\n\nfunction editorIsEmpty(editor: HTMLElement): boolean {\n const value = readTokenSearchField(editor);\n return value.query.length === 0 && value.tokens.length === 0;\n}\n\nconst TOKEN_SELECTOR = '[data-component=\"token-search-token\"]';\nconst TEXT_SELECTOR = '[data-token-search-text]';\nconst stripZwsp = (text: string): string => text.replaceAll('', '');\n\n/** The collapsed, in-editor caret range, or undefined when there is a selection or none. */\nfunction collapsedCaret(editor: HTMLElement): Range | undefined {\n const selection = editor.ownerDocument.getSelection();\n if (!selection || selection.rangeCount === 0) return;\n const range = selection.getRangeAt(0);\n if (!range.collapsed || !editor.contains(range.startContainer)) return;\n return range;\n}\n\n/** The direct child of `editor` that contains `node` (or `node` itself), else null. */\nfunction topBlock(editor: HTMLElement, node: Node): Node | null {\n let current: Node = node;\n while (current.parentNode && current.parentNode !== editor) current = current.parentNode;\n return current.parentNode === editor ? current : null;\n}\n\n/** A text node or text span holding no visible character (only zero-width spacers). */\nfunction isBlankText(node: Node): boolean {\n if (node.nodeType === Node.TEXT_NODE) return stripZwsp((node as CharacterData).data) === '';\n return node instanceof Element && node.matches(TEXT_SELECTOR) && stripZwsp(node.textContent ?? '') === '';\n}\n\n/** The nearest sibling block on `direction`, skipping blank text spacers. */\nfunction meaningfulSibling(block: Node, direction: 'backward' | 'forward'): Node | null {\n let sibling = direction === 'backward' ? block.previousSibling : block.nextSibling;\n while (sibling && isBlankText(sibling)) sibling = direction === 'backward' ? sibling.previousSibling : sibling.nextSibling;\n return sibling;\n}\n\n/** The node immediately on `direction` of the caret, only when no visible character separates them. */\nfunction caretSideNode(editor: HTMLElement, range: Range, direction: 'backward' | 'forward'): Node | null {\n const { startContainer: container, startOffset: offset } = range;\n if (container.nodeType === Node.TEXT_NODE) {\n const text = (container as CharacterData).data;\n const side = direction === 'backward' ? text.slice(0, offset) : text.slice(offset);\n if (stripZwsp(side).length > 0) return null;\n // An in-editor text node always has a top block (itself or its wrapping span).\n return meaningfulSibling(topBlock(editor, container)!, direction);\n }\n const child = container.childNodes[direction === 'backward' ? offset - 1 : offset] as Node | undefined;\n if (child) {\n // `child` is a descendant of the in-editor caret container, so it has a top block.\n const block = topBlock(editor, child)!;\n return isBlankText(child) ? meaningfulSibling(block, direction) : block;\n }\n const block = topBlock(editor, container);\n return block ? meaningfulSibling(block, direction) : null;\n}\n\n/** The atomic token chip adjacent to a collapsed caret on `direction`, if any. */\nfunction adjacentToken(editor: HTMLElement, direction: 'backward' | 'forward'): HTMLElement | undefined {\n const range = collapsedCaret(editor);\n if (!range) return;\n const node = caretSideNode(editor, range, direction);\n if (!node) return;\n const base = node instanceof Element ? node : node.parentElement;\n const chip = base?.closest<HTMLElement>(TOKEN_SELECTOR) ?? null;\n return chip && editor.contains(chip) ? chip : undefined;\n}\n\n/** Move the caret to just after an atomic token chip so typed text lands after it.\n * Only reached after {@link collapsedCaret} already found a live selection, and the\n * chip is a direct block of the editor. */\nfunction placeCaretAfterToken(editor: HTMLElement, chip: HTMLElement): void {\n const selection = editor.ownerDocument.getSelection()!;\n const range = editor.ownerDocument.createRange();\n range.setStartAfter(topBlock(editor, chip)!);\n range.collapse(true);\n selection.removeAllRanges();\n selection.addRange(range);\n editor.focus({ preventScroll: true });\n}\n\n/**\n * Wire every TokenSearchField under `root`: submit on Enter, preserve the caret across\n * controlled token deletion, and (by default) manage the collapsible field's transient\n * expand/collapse/focus. Returns a {@link TokenSearchFieldsHandle} — a disposer that also\n * exposes the managed `expanded` state per field id.\n */\nexport function wireTokenSearchFields(\n root: HTMLElement,\n { onSubmit, onEdit, collapsible = true, keyboard = false }: WireTokenSearchFieldsOptions = {},\n): TokenSearchFieldsHandle {\n const managed = collapsible !== false;\n const config = typeof collapsible === 'object' ? collapsible : {};\n const expandOnActivate = managed && (config.expandOnActivate ?? true);\n const collapseOnEmptyBlur = managed && (config.collapseOnEmptyBlur ?? true);\n const collapseOnEscape = managed && (config.collapseOnEscape ?? true);\n const manageFocus = managed && (config.manageFocus ?? true);\n const keepOpenOn = config.keepOpenOn;\n const keyboardOn = keyboard !== false;\n const keyboardConfig = typeof keyboard === 'object' ? keyboard : {};\n const removeAdjacentToken = keyboardOn && (keyboardConfig.removeAdjacentToken ?? true);\n const moveCaretPastToken = keyboardOn && (keyboardConfig.moveCaretPastToken ?? true);\n const onRemoveToken = keyboardConfig.onRemoveToken;\n const adopted = config.signals ?? {};\n const created = new Map<string, Signal<boolean>>();\n\n /** True when focus moving to `element` should keep an empty field expanded. */\n const isExemptTarget = (element: Element | null): boolean => {\n if (!element) return false;\n if (element.closest('[data-token-search-keep-open]')) return true;\n return keepOpenOn ? keepOpenOn(element) : false;\n };\n\n const signalFor = (id: string): Signal<boolean> => {\n const own = adopted[id];\n if (own) return own;\n let field = created.get(id);\n if (!field) {\n field = signal(false);\n created.set(id, field);\n }\n return field;\n };\n const setExpanded = (id: string, next: boolean) => {\n const state = signalFor(id);\n if (state.value !== next) state.value = next;\n };\n const view = () => root.ownerDocument.defaultView!;\n const focusAfterRender = (id: string, selector: string) => {\n view().requestAnimationFrame(() => {\n const target = root.querySelector<HTMLElement>(\n `[data-component=\"token-search-field\"][data-token-search-id=\"${CSS.escape(id)}\"] ${selector}`,\n );\n if (!target) return;\n if (target.matches('[data-token-search-editor]')) placeTokenSearchCaret(target);\n else target.focus();\n });\n };\n const openField = (id: string) => {\n setExpanded(id, true);\n if (manageFocus) focusAfterRender(id, '[data-token-search-editor]');\n };\n const closeField = (id: string) => {\n setExpanded(id, false);\n if (manageFocus) focusAfterRender(id, '.kui-token-search__expand');\n };\n\n const pending = new WeakMap<HTMLElement, PendingTokenDeletion>();\n const onBeforeInput = (event: Event) => {\n const inputEvent = event as InputEvent;\n const editor = editorFromEvent(root, event);\n if (!editor || !inputEvent.inputType.startsWith('delete') || editor.ownerDocument.activeElement !== editor) return;\n const field = editor.closest<HTMLElement>('[data-component=\"token-search-field\"]');\n const id = field?.dataset.tokenSearchId;\n const offset = caretQueryOffset(editor);\n if (!id || offset === undefined || field?.dataset.disabled === 'true') return;\n pending.set(editor, {\n id,\n offset,\n tokenCount: editor.querySelectorAll('[data-component=\"token-search-token\"]').length,\n });\n };\n const onInput = (event: Event) => {\n const editor = editorFromEvent(root, event);\n if (!editor) return;\n if (onEdit) {\n const field = editor.closest<HTMLElement>('[data-component=\"token-search-field\"]');\n const id = field?.dataset.tokenSearchId;\n if (id && field?.dataset.disabled !== 'true') onEdit({ id, editor, event: event as InputEvent });\n }\n const deletion = pending.get(editor);\n pending.delete(editor);\n if (!deletion || editor.querySelectorAll('[data-component=\"token-search-token\"]').length >= deletion.tokenCount) return;\n editor.ownerDocument.defaultView!.requestAnimationFrame(() => {\n const replacement = replacementEditor(root, deletion.id);\n if (!replacement) return;\n const active = replacement.ownerDocument.activeElement;\n if (active !== editor && active !== replacement && active !== replacement.ownerDocument.body) return;\n placeTokenSearchCaret(replacement, deletion.offset);\n });\n };\n root.addEventListener('beforeinput', onBeforeInput, true);\n root.addEventListener('input', onInput, true);\n\n const disposers: Array<() => void> = [\n () => root.removeEventListener('beforeinput', onBeforeInput, true),\n () => root.removeEventListener('input', onInput, true),\n ];\n\n disposers.push(\n delegate(root, 'keydown', '[data-token-search-editor]', (event, element) => {\n const keyboardEvent = event as KeyboardEvent;\n const editor = element as HTMLElement;\n if (keyboardEvent.isComposing) return;\n const field = editor.closest<HTMLElement>('[data-component=\"token-search-field\"]');\n const id = field?.dataset.tokenSearchId;\n if (!id || field?.dataset.disabled === 'true') return;\n if (keyboardEvent.key === 'Enter') {\n keyboardEvent.preventDefault();\n onSubmit?.({ id, editor });\n return;\n }\n if (removeAdjacentToken && (keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete')) {\n const direction = keyboardEvent.key === 'Backspace' ? 'backward' : 'forward';\n const chip = adjacentToken(editor, direction);\n if (chip) {\n keyboardEvent.preventDefault();\n onRemoveToken?.({ id, value: chip.dataset.tokenValue ?? '', editor, direction });\n return;\n }\n }\n if (moveCaretPastToken && keyboardEvent.key === 'ArrowRight') {\n const chip = adjacentToken(editor, 'forward');\n if (chip) {\n keyboardEvent.preventDefault();\n placeCaretAfterToken(editor, chip);\n return;\n }\n }\n if (collapseOnEscape && keyboardEvent.key === 'Escape' && field?.dataset.collapsible === 'true' && editorIsEmpty(editor)) {\n keyboardEvent.preventDefault();\n closeField(id);\n }\n }),\n );\n\n if (expandOnActivate) {\n disposers.push(\n delegate(root, 'click', '.kui-token-search__expand', (_event, element) => {\n // The selector guarantees a collapsible field ancestor; only skip a disabled one.\n const field = (element as HTMLElement).closest<HTMLElement>('[data-component=\"token-search-field\"]');\n const id = field?.dataset.tokenSearchId;\n if (id && field?.dataset.disabled !== 'true') openField(id);\n }),\n );\n }\n\n if (collapseOnEmptyBlur) {\n // Pressing an in-field control (clear, trailing, token, or the trigger) must not\n // blur the editor — otherwise the transient blur would collapse the field before\n // the control's own handler runs. Keeping focus also keeps the click firing.\n disposers.push(\n delegate(root, 'mousedown', '[data-component=\"token-search-field\"][data-collapsible=\"true\"] button', (event) => {\n event.preventDefault();\n }),\n );\n disposers.push(\n delegate(root, 'focusout', '[data-token-search-editor]', (event, element) => {\n const editor = element as HTMLElement;\n const field = editor.closest<HTMLElement>('[data-component=\"token-search-field\"]');\n const id = field?.dataset.tokenSearchId;\n if (!id || field?.dataset.collapsible !== 'true' || field.dataset.disabled === 'true') return;\n const next = (event as FocusEvent).relatedTarget;\n if (next instanceof Node && field.contains(next)) return;\n if (isExemptTarget(next instanceof Element ? next : null)) return;\n if (!editorIsEmpty(editor)) return;\n view().queueMicrotask(() => {\n const active = field.ownerDocument.activeElement;\n if (!field.contains(active) && !isExemptTarget(active)) setExpanded(id, false);\n });\n }),\n );\n }\n\n const dispose = () => {\n for (const stop of disposers.splice(0)) stop();\n };\n const handle = (() => dispose()) as TokenSearchFieldsHandle;\n handle.dispose = dispose;\n handle.expanded = (id) => (managed ? signalFor(id) : undefined);\n handle.open = (id) => {\n if (managed) openField(id);\n };\n handle.close = (id) => {\n if (managed) closeField(id);\n };\n return handle;\n}\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx } from 'kerfjs/jsx-runtime';
|
|
2
2
|
|
|
3
3
|
// src/toolbar-control-group.tsx
|
|
4
|
-
function ToolbarControlGroup({ children, label, className = "", expanded = false, single = false, appearance = "contained", tone = "default", buttonAppearance = "plain" }) {
|
|
5
|
-
return /* @__PURE__ */ jsx("div", { class: `kui-toolbar-control-group ${className}`.trim(), "data-component": "toolbar-control-group", role: label ? "group" : void 0, "aria-label": label, "data-appearance": appearance, "data-tone": tone, "data-button-appearance": buttonAppearance, "data-expanded": String(expanded), "data-single": String(single), children });
|
|
4
|
+
function ToolbarControlGroup({ children, label, className = "", expanded = false, single = false, appearance = "contained", tone = "default", buttonAppearance = "plain", shape = "pill" }) {
|
|
5
|
+
return /* @__PURE__ */ jsx("div", { class: `kui-toolbar-control-group ${className}`.trim(), "data-component": "toolbar-control-group", role: label ? "group" : void 0, "aria-label": label, "data-appearance": appearance, "data-tone": tone, "data-button-appearance": buttonAppearance, "data-expanded": String(expanded), "data-single": String(single), "data-shape": shape, children });
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
export { ToolbarControlGroup };
|
|
9
9
|
|
|
10
|
-
//# sourceMappingURL=chunk-
|
|
10
|
+
//# sourceMappingURL=chunk-RNPGFQ33.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/toolbar-control-group.tsx"],"names":[],"mappings":";;;AAeO,SAAS,oBAAoB,EAAE,QAAA,EAAU,OAAO,SAAA,GAAY,EAAA,EAAI,WAAW,KAAA,EAAO,MAAA,GAAS,KAAA,EAAO,UAAA,GAAa,aAAa,IAAA,GAAO,SAAA,EAAW,mBAAmB,OAAA,EAAS,KAAA,GAAQ,QAAO,EAA6B;AAC3N,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,0BAAA,EAA6B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,uBAAA,EAAwB,IAAA,EAAM,KAAA,GAAQ,OAAA,GAAU,QAAW,YAAA,EAAY,KAAA,EAAO,iBAAA,EAAiB,UAAA,EAAY,WAAA,EAAW,IAAA,EAAM,wBAAA,EAAwB,gBAAA,EAAkB,iBAAe,MAAA,CAAO,QAAQ,CAAA,EAAG,aAAA,EAAa,MAAA,CAAO,MAAM,CAAA,EAAG,YAAA,EAAY,OAAQ,QAAA,EAAS,CAAA;AACtV","file":"chunk-RNPGFQ33.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface ToolbarControlGroupProps {\n children: SafeHtml | SafeHtml[];\n label?: string;\n className?: string;\n expanded?: boolean;\n single?: boolean;\n appearance?: 'contained' | 'borderless';\n tone?: 'default' | 'dark';\n buttonAppearance?: 'plain' | 'push';\n /** Corner shape: fully round `pill` (default) or a softer `rounded` rectangle. */\n shape?: 'pill' | 'rounded';\n}\n\nexport function ToolbarControlGroup({ children, label, className = '', expanded = false, single = false, appearance = 'contained', tone = 'default', buttonAppearance = 'plain', shape = 'pill' }: ToolbarControlGroupProps) {\n return <div class={`kui-toolbar-control-group ${className}`.trim()} data-component=\"toolbar-control-group\" role={label ? 'group' : undefined} aria-label={label} data-appearance={appearance} data-tone={tone} data-button-appearance={buttonAppearance} data-expanded={String(expanded)} data-single={String(single)} data-shape={shape}>{children}</div>;\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ToolbarText } from './chunk-RUNWEPR4.js';
|
|
2
|
-
import { ToolbarControlGroup } from './chunk-
|
|
2
|
+
import { ToolbarControlGroup } from './chunk-RNPGFQ33.js';
|
|
3
3
|
import { Toolbar } from './chunk-DAFFDO33.js';
|
|
4
4
|
import { Skeleton } from './chunk-B24C4A6T.js';
|
|
5
5
|
import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
|
|
@@ -17,4 +17,4 @@ function PanelHeader({ title, titleId, summary, summaryId, icon, iconClassName =
|
|
|
17
17
|
|
|
18
18
|
export { PanelHeader };
|
|
19
19
|
|
|
20
|
-
//# sourceMappingURL=chunk-
|
|
20
|
+
//# sourceMappingURL=chunk-XE5ZLPCC.js.map
|