@kerfjs/ui 5.0.0-beta.53 → 5.0.0-beta.54

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.
Files changed (69) hide show
  1. package/README.md +1 -0
  2. package/ai/application-ui-diagnostic-ids-v1.json +1 -0
  3. package/ai/component-catalog-v2.json +82 -6
  4. package/ai/component-catalog-v2.schema.json +2 -1
  5. package/ai/component-catalog.json +105 -10
  6. package/ai/public-api-signatures-v1.md +204 -18
  7. package/ai/skill.md +23 -17
  8. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  9. package/analyzer/index.mjs +48 -0
  10. package/analyzer/loud-pairs.d.mts +49 -0
  11. package/analyzer/loud-pairs.mjs +357 -0
  12. package/dist/app-tab.d.ts +7 -5
  13. package/dist/app-tab.js +1 -1
  14. package/dist/{chunk-EKYZCRCX.js → chunk-3CGQ7ZNO.js} +54 -22
  15. package/dist/chunk-3CGQ7ZNO.js.map +1 -0
  16. package/dist/{chunk-UKKSMZYT.js → chunk-46263QLK.js} +51 -1
  17. package/dist/chunk-46263QLK.js.map +1 -0
  18. package/dist/{chunk-NDUGJ4TU.js → chunk-5NDQABWK.js} +1 -1
  19. package/dist/{chunk-NDUGJ4TU.js.map → chunk-5NDQABWK.js.map} +1 -1
  20. package/dist/{chunk-CCMKJWLX.js → chunk-NE5JAOQS.js} +7 -7
  21. package/dist/chunk-NE5JAOQS.js.map +1 -0
  22. package/dist/chunk-PSHUSWQH.js +18 -0
  23. package/dist/chunk-PSHUSWQH.js.map +1 -0
  24. package/dist/{chunk-VOCPXGQN.js → chunk-VHADGP3B.js} +9 -8
  25. package/dist/chunk-VHADGP3B.js.map +1 -0
  26. package/dist/chunk-XQV2B4IL.js +14 -0
  27. package/dist/chunk-XQV2B4IL.js.map +1 -0
  28. package/dist/collapsible-panel.d.ts +6 -2
  29. package/dist/collapsible-panel.js +1 -0
  30. package/dist/collapsible-panel.js.map +1 -1
  31. package/dist/floating-toolbar.d.ts +5 -2
  32. package/dist/floating-toolbar.js +1 -1
  33. package/dist/index.js +6 -5
  34. package/dist/resizable-region.d.ts +4 -1
  35. package/dist/resizable-region.js +1 -1
  36. package/dist/split-view.js +1 -1
  37. package/dist/styles/collapsible-panel.css +88 -10
  38. package/dist/styles/floating-toolbar.css +11 -6
  39. package/dist/styles/resizable-region.css +81 -13
  40. package/dist/styles/workbench.css +472 -10
  41. package/dist/wire-resizable-regions.d.ts +2 -1
  42. package/dist/wire-resizable-regions.js +2 -1
  43. package/dist/wire-tab-bars.js +1 -1
  44. package/dist/wire-workbench.d.ts +109 -0
  45. package/dist/wire-workbench.js +355 -0
  46. package/dist/wire-workbench.js.map +1 -0
  47. package/dist/workbench.d.ts +65 -6
  48. package/dist/workbench.js +180 -76
  49. package/dist/workbench.js.map +1 -1
  50. package/docs/accessibility.md +54 -9
  51. package/docs/app-layouts.md +12 -1
  52. package/docs/collapsible-panel.md +59 -1
  53. package/docs/component-selection.md +16 -6
  54. package/docs/document-baseline.md +4 -0
  55. package/docs/layout.md +5 -1
  56. package/docs/recipes.md +5 -3
  57. package/docs/type-contracts.md +2 -1
  58. package/docs/ui-analyzer.md +94 -19
  59. package/docs/ui-doctor.md +6 -0
  60. package/docs/ux-demo.md +1 -1
  61. package/docs/webawesome-theme.md +11 -2
  62. package/docs/workbench.md +302 -7
  63. package/llms.txt +7 -3
  64. package/package.json +5 -1
  65. package/ux-demo/recipes/collapsible-sidebar.tsx +8 -7
  66. package/dist/chunk-CCMKJWLX.js.map +0 -1
  67. package/dist/chunk-EKYZCRCX.js.map +0 -1
  68. package/dist/chunk-UKKSMZYT.js.map +0 -1
  69. package/dist/chunk-VOCPXGQN.js.map +0 -1
package/docs/workbench.md CHANGED
@@ -22,7 +22,22 @@ it can also be embedded. See [Document baseline](document-baseline.md).
22
22
 
23
23
  `Workbench` is declarative and the collapse is **pure CSS** — no wire. The app
24
24
  owns each panel's `collapsed` flag (usually a signal) and toggles it; the panel
25
- animates itself.
25
+ animates itself. Panels are fixed-size by default; a panel can opt in to drag
26
+ and keyboard resizing (see [Resizable panels](#resizable-panels)), and
27
+ `wireWorkbench` can make overlay panels transient (see
28
+ [Transient overlays](#transient-overlays)).
29
+
30
+ A collapsed panel renders `inert` and `aria-hidden="true"` on the rail or
31
+ drawer itself, and `inert` on its content, straight from `collapsed`, so
32
+ neither Tab nor assistive technology reaches controls that have slid out of
33
+ view, none of them can scroll back into view, and no empty labeled landmark
34
+ stays behind. The slide-out still animates,
35
+ and the panel's `restoreControl` lives outside the inert content, so it stays
36
+ reachable. Expanding the panel makes its content reachable again in the same
37
+ render. When the panel closes with focus inside it, `wireWorkbench` (given the
38
+ panel's `collapsed` signal) moves focus back out (see
39
+ [Transient overlays](#transient-overlays)); without it, that focus move is the
40
+ app's.
26
41
 
27
42
  ```tsx
28
43
  const navCollapsed = signal(false);
@@ -61,15 +76,288 @@ an optional `label`. Common shell behavior is configured rather than restyled:
61
76
  - `contentOverflow: "clip" | "auto" | "visible"` lets a drawer temporarily
62
77
  expose an open popup without a descendant override;
63
78
  - `presentation: "inline" | "overlay" | "hidden"` supports compact overlays
64
- or a responsive replacement. Overlay panels clamp both their track and fixed-size
65
- animated content to the configured viewport-relative maximum;
79
+ or a responsive replacement. An overlay rail spans the Workbench height at
80
+ its side and an overlay drawer spans the work-area column at the bottom,
81
+ each exactly at its configured size (its separator border included, as in
82
+ flow) up to the viewport-relative overlay maximum; the content fills the
83
+ panel inside its border, so it is clamped with it;
84
+ - `responsiveOverlayAt: "narrow" | "compact"` presents a rail or the bottom
85
+ drawer as an overlay below a Workbench container breakpoint — 704px or less
86
+ for `narrow`, 448px or less for `compact`, the breakpoints of
87
+ `ResizableRegion`'s `responsiveFillAt` — and inline above it. The CSS
88
+ decides, so the app needs no `deviceClass` check for presentation; a
89
+ collapsed overlay drops its surface and shadow so nothing covers the work
90
+ area, and the work area keeps the safe-area inset of the edge the overlay
91
+ covers. When overlays meet, the order is fixed rather than by which opened
92
+ last: both rails stack above the drawer, as inline rails span the
93
+ Workbench's full height beside the drawer's column, and the right rail
94
+ stacks above the left. Rails take `--kui-workbench-overlay-z` (41) and the
95
+ drawer one less. Restore controls take `--kui-workbench-restore-z`, which
96
+ defaults to two less than the overlay z-index (39), so they sit beneath
97
+ every overlay: an open overlay covers another panel's restore control as
98
+ it covers the rest of the work area, and a collapsed overlay, which drops
99
+ its pointer events, leaves the control beneath it usable;
66
100
  - `restoreControl` places an application-owned restore affordance in a
67
- safe-area-aware viewport corner (`restorePosition` chooses the corner).
101
+ corner of the Workbench itself while the panel is collapsed
102
+ (`restorePosition` chooses the corner), inset by
103
+ `--kui-workbench-restore-inset` (16px) plus the unsafe area of each edge the
104
+ corner reaches. A rail's control sits in the Workbench's corner; the
105
+ drawer's sits in the corner of the work-area column it restores into, so it
106
+ never lands on an expanded rail. A collapsed rail's control floats the
107
+ same inset above the top edge of an expanded inline bottom drawer, which
108
+ spans the column reaching that corner once the rail collapses, so it never
109
+ covers the drawer's content; it returns to the corner when the drawer
110
+ collapses (the drawer publishes its edge as a CSS anchor scoped to its own
111
+ Workbench; without anchor positioning the control keeps the corner). An
112
+ overlay drawer publishes no edge: an open one covers the control, as every
113
+ open overlay does. Because it is anchored to the Workbench
114
+ rather than the viewport, an embedded Workbench never floats it over page
115
+ chrome outside it, and it scrolls with the Workbench. Compose it from the
116
+ package controls — a `single` `ToolbarControlGroup` around one icon button
117
+ carrying `collapsiblePanelToggleIcon(side, true)` — rather than a bare
118
+ button. To give it `FloatingToolbar`'s toolbar role and floating look, wrap
119
+ that group in a `FloatingToolbar` whose `position` matches the corner: the
120
+ corner owns the inset (it sets `--kui-floating-toolbar-inset` to 0), so the
121
+ toolbar floats from the corner instead of doubling it.
122
+
123
+ - `resizable: true | { min, max }` opts the panel in to drag and keyboard
124
+ resizing, driven by `wireWorkbench` (off by default).
68
125
 
69
126
  The same policy props are available on `ResizableRegion` and
70
127
  `CollapsiblePanel`, so a resizable application shell does not need to reach
71
128
  into `.kui-resizable-region__content`.
72
129
 
130
+ ## Resizable panels
131
+
132
+ Resizing is **opt-in per panel**. Give a panel `resizable` — `true` for the
133
+ default limits (rails 180–480px, drawer 120–480px) or `{ min, max }` — and
134
+ render its `size` from an app-owned signal. The panel then owns a separator on
135
+ its inner edge (the left rail's end, the right rail's start, the drawer's top)
136
+ with the same focusable `role="separator"` contract as a `ResizableRegion`
137
+ handle. `wireWorkbench` drives it:
138
+
139
+ ```tsx
140
+ import { wireWorkbench } from "@kerfjs/ui/wire-workbench";
141
+
142
+ const navSize = signal(280);
143
+ const consoleSize = signal(200);
144
+
145
+ <Workbench
146
+ id="studio"
147
+ label="Studio"
148
+ main={<Editor />}
149
+ mainMinSize={320} // the default: the editor never drops below 320px wide
150
+ mainMinHeight={120} // the default: the drawer leaves it 120px of height
151
+ leftRail={{
152
+ content: <Navigator />,
153
+ label: "Navigator",
154
+ collapsed: navCollapsed.value,
155
+ size: navSize.value,
156
+ resizable: { min: 200, max: 420 },
157
+ responsiveOverlayAt: "narrow", // an overlay when the Workbench is 704px or narrower
158
+ }}
159
+ bottomDrawer={{
160
+ content: <Console />,
161
+ label: "Console",
162
+ size: consoleSize.value,
163
+ resizable: true,
164
+ }}
165
+ />;
166
+
167
+ // once, after mount:
168
+ const stop = wireWorkbench(root, {
169
+ id: "studio",
170
+ panels: {
171
+ leftRail: {
172
+ size: navSize,
173
+ storageKey: "studio.nav-width",
174
+ collapsed: navCollapsed, // a transient overlay: takes focus, closes on Escape / outside press
175
+ },
176
+ bottomDrawer: { size: consoleSize, storageKey: "studio.console-height" },
177
+ },
178
+ });
179
+ ```
180
+
181
+ - **Pointer:** dragging the separator resizes the panel live (the wire marks
182
+ it `data-resizing` and suppresses content motion) and commits the final
183
+ size to the signal on release.
184
+ - **Keyboard:** focus the separator; arrow keys resize by `step` (16px),
185
+ Shift+arrow by `largeStep` (64px), Home/End jump to `min`/`max`. The
186
+ separator's `aria-valuenow`/`aria-valuemin`/`aria-valuemax` report the size
187
+ and limits.
188
+ - **Limits:** every size — dragged, typed, restored from storage, or passed
189
+ by the app — is clamped to `min`/`max` when rendered.
190
+ - **Work-area minimum:** beside its inline rails, fixed or resizable, the work
191
+ area keeps at least `mainMinSize` px of width (a `Workbench` prop, default
192
+ 320; `0` turns it off), and above an inline bottom drawer at least
193
+ `mainMinHeight` px of height (default 120; `0` turns it off). A dragged or
194
+ keyed rail stops growing where the work area would drop below its width,
195
+ and the drawer where it would drop below its height, so wide rails or a tall
196
+ drawer cannot crowd out the editor; `aria-valuemax` reports that reachable
197
+ maximum. When the Workbench itself narrows, the rails shrink in proportion
198
+ to their sizes, and when it gets shorter the drawer shrinks (their content
199
+ follows the shown size) while the work area holds its minimum; a squeezed
200
+ panel can still be made smaller, never larger, and never below its own
201
+ `min`. Two fixed 280px rails in a 720px Workbench show 200px each rather
202
+ than leaving the editor 160px. Each minimum applies only to a Workbench with a
203
+ panel on its axis, and never exceeds the Workbench itself.
204
+ - **Squeezed below `min`:** when the Workbench is too narrow for a rail's
205
+ `min` beside the work-area minimum, the rail shows less than its `min` (a
206
+ 172px Navigator whose `min` is 180). Its separator then reports that shown
207
+ width in `aria-valuenow`, and `aria-valuemin`/`aria-valuemax` pin to the
208
+ same value: the WAI-ARIA window splitter's value is the separator's actual
209
+ position, and the range must contain it, so a screen reader hears the width
210
+ on screen rather than a configured limit the layout cannot honor — and a
211
+ range that does not move, because the separator cannot move a rail the
212
+ container holds. A pinned separator commits nothing: arrow keys, Home/End,
213
+ and drags leave the rail's remembered size (and its storage) alone, so a
214
+ rail remembered at 280px returns at 280px, with the configured range, once
215
+ there is room.
216
+ - **Small Workbenches:** inline panels have no shrink floor of their own, by
217
+ design; the work area's minimums win, so in a very small Workbench a rail or
218
+ the drawer can become a sliver. Do not add your own `min-width` /
219
+ `min-height` to hold a panel open. Give the panel
220
+ `responsiveOverlayAt: "narrow"` (704px of Workbench width or less) or
221
+ `"compact"` (448px or less) instead: below that breakpoint it presents as a
222
+ full-size overlay over the work area rather than squeezing beside it (see
223
+ the catalog's resizable and responsive-drawer Workbench examples).
224
+ - **Collapse:** `collapsed` never changes a size. A collapsed panel keeps its
225
+ size (its content slides out at that width), its separator leaves the tab
226
+ order, and expanding it returns it at the size it had.
227
+ - **Persistence:** with a `storageKey`, the size is loaded from `storage`
228
+ (default `localStorage`) at wire-up and saved on every change, like
229
+ `wireSidebar`'s collapsed state.
230
+ - **Overlays never resize:** an overlay or hidden panel — including a rail
231
+ whose `responsiveOverlayAt` breakpoint currently applies — hides its
232
+ separator and is never resizable, and it leaves the work-area minimum to the
233
+ rails still in flow. With `responsiveOverlayAt` no device check is needed;
234
+ otherwise pass `deviceClass` and resizing is suspended while `compact` is
235
+ true, where rails present as overlay drawers or are replaced.
236
+ - `wireWorkbench` drives only the panels it is given, matched by the
237
+ Workbench `id`, so it never double-drives a `ResizableRegion` (or another
238
+ Workbench) under the same root. `onResize({ panel, size, source })` reports
239
+ each committed resize.
240
+
241
+ ## Transient overlays
242
+
243
+ An overlay panel covers the work area, so it should open only when the user
244
+ asks for it and close as easily as it opened. Give `wireWorkbench` a panel's
245
+ app-owned `collapsed` signal (`size` is optional, so a panel need not be
246
+ resizable) and it treats the panel as a transient overlay whenever it
247
+ presents as one, mirroring `wireSidebar`'s compact overlay:
248
+
249
+ - **Collapsed on entering the breakpoint:** when a panel's
250
+ `responsiveOverlayAt` breakpoint begins to apply — at wire-up, when the
251
+ Workbench first renders, or when it narrows across the breakpoint — the
252
+ wiring remembers the panel's inline `collapsed` state and collapses it, so
253
+ nothing covers the work area until the user opens it. When the breakpoint
254
+ stops applying (and on disposal) the remembered inline state comes back.
255
+ These presentation changes skip the collapse motion.
256
+ - **Focus moves in, and Tab stays in:** a panel that opens while it presents
257
+ as an overlay takes focus on its first focusable control (typically the
258
+ close control in its header), because it covers the work area and the
259
+ control that opened it. While it is open, Tab and Shift+Tab cycle through
260
+ its controls and never reach the covered work area; Escape, its own close
261
+ control, or an outside press leaves it. This is the ARIA dialog pattern
262
+ `wireSidebar`'s compact overlay follows. A panel opening inline never moves
263
+ focus.
264
+ - **Escape** closes the open overlay panel that holds focus, else the most
265
+ recently opened one. An Escape another handler already handled
266
+ (`defaultPrevented`) is left alone.
267
+ - **Outside press:** a pointer press that starts and ends outside an open
268
+ overlay panel closes it. The app's own toggle still works: its click closes
269
+ the panel before the wiring looks, and the press that opens a panel never
270
+ closes it.
271
+ - **Focus:** when a panel closes with focus inside it — whatever closed it,
272
+ including the app's own control inside the panel — focus returns to the
273
+ control that had it when the panel opened (typically its toggle; one inside
274
+ another panel that has closed since is skipped), else to
275
+ the first focusable control in the panel's `restoreControl`, else to a
276
+ focusable control outside the panel whose `aria-controls` names the panel
277
+ (or an element inside it). The last is what a panel already open at
278
+ wire-up relies on, since nothing opened it: give the app's toggle
279
+ `aria-controls` naming the panel. A pointer press inside the panel that
280
+ drops focus to the page counts as focus inside: Safari never focuses a
281
+ clicked button, so pressing the panel's own Hide control blurs the focused
282
+ control before the click closes it, and focus still returns. Focus the user
283
+ has moved to another element since is left alone. Each panel's `id` derives from the
284
+ Workbench's — `<id>-left-rail`, `<id>-right-rail`, `<id>-bottom-drawer`:
285
+
286
+ ```tsx
287
+ <button
288
+ data-action="toggle-navigator"
289
+ aria-controls="editor-left-rail"
290
+ aria-expanded={String(!navCollapsed.value)}
291
+ aria-label={navCollapsed.value ? "Show navigator" : "Hide navigator"}
292
+ >
293
+ <LucideIcon {...collapsiblePanelToggleIcon("left", navCollapsed.value)} />
294
+ </button>
295
+ ```
296
+
297
+ An open overlay can cover the control that opened it: a narrow Workbench's
298
+ right-rail overlay spans the full height at the end edge, over the trailing
299
+ end of the work area's toolbar, where its toggle usually sits. Escape and an
300
+ outside press still close it, but neither is a visible, pointer-reachable
301
+ control. So give every panel that may present as an overlay its own close
302
+ control, as a `CollapsiblePanel` puts its collapse toggle in its own header:
303
+ render the panel content as a `Pane` whose header `Toolbar` holds the title
304
+ and a `single`, borderless `ToolbarControlGroup` around one icon button
305
+ carrying `collapsiblePanelToggleIcon(side, false)`. The work area's toggle
306
+ stays the always-visible way to show the panel. The catalog's resizable
307
+ example does this for both rails.
308
+
309
+ The drawer works the same way. The catalog's responsive overlay drawer
310
+ example is the whole pattern for a bottom drawer:
311
+
312
+ ```tsx
313
+ const outputCollapsed = signal(false); // open inline by default
314
+
315
+ <Workbench
316
+ id="editor"
317
+ label="Editor"
318
+ main={<Editor />} // its toolbar toggles `outputCollapsed`
319
+ bottomDrawer={{
320
+ label: "Output",
321
+ content: <OutputPane />, // a Pane whose header holds its close control
322
+ collapsed: outputCollapsed.value,
323
+ size: 180,
324
+ responsiveOverlayAt: "narrow",
325
+ }}
326
+ />;
327
+
328
+ wireWorkbench(root, {
329
+ id: "editor",
330
+ panels: { bottomDrawer: { collapsed: outputCollapsed } },
331
+ });
332
+ ```
333
+
334
+ Above 704px of Workbench width the drawer takes its own track below the
335
+ editor. At 704px or less it overlays the bottom of the full-height editor,
336
+ starts hidden, and closes from its own header, on Escape, or on a press
337
+ outside it; widening the Workbench again brings it back inline in the state
338
+ it had before.
339
+
340
+ Escape and outside-press dismissal apply to static `presentation: "overlay"`
341
+ panels too; entering and leaving the collapsed state around a breakpoint is
342
+ only for `responsiveOverlayAt`, because a static presentation is the app's
343
+ choice. Inline panels are never touched. Pass `dismissOverlays: false` to
344
+ leave every `collapsed` write, and all focus handling, to the app.
345
+
346
+ Overlays are exclusive by default, like `wireSidebar`'s compact overlays:
347
+ opening a panel while it presents as an overlay closes every other open
348
+ overlay panel, the bottom drawer included. At a narrow width two rails are
349
+ wider than the Workbench, so without this the right rail would cover the
350
+ navigator's own close control. Panels presenting inline are never closed by
351
+ it, so a wide Workbench keeps both rails open. Pass `exclusiveOverlays: false`
352
+ to let overlays stay open together; they then stack in the fixed order above,
353
+ and Tab stays in the one that holds focus (else the most recently opened
354
+ one).
355
+
356
+ Where the browser supports `overflow-clip-margin`, the 20px hit target
357
+ straddles the panel's separator line like a `ResizableRegion` handle;
358
+ elsewhere it sits just inside the panel's inner edge, because the panel clips
359
+ its sliding content.
360
+
73
361
  ## Resizable application-shell migration
74
362
 
75
363
  An application such as Hot Sheet can replace its shell descendant overrides
@@ -89,7 +377,13 @@ with state-derived props:
89
377
  collapseMotion="fade-slide"
90
378
  contentOverflow={createMenuOpen.value ? "visible" : "clip"}
91
379
  presentation={mobile.value ? "overlay" : "inline"}
92
- restoreControl={<button data-action="show-drawer">Show terminals</button>}
380
+ restoreControl={
381
+ <ToolbarControlGroup label="Terminals" single>
382
+ <button data-action="show-drawer" aria-label="Show terminals">
383
+ <LucideIcon {...collapsiblePanelToggleIcon("bottom", true)} />
384
+ </button>
385
+ </ToolbarControlGroup>
386
+ }
93
387
  >
94
388
  <TerminalDrawer />
95
389
  </ResizableRegion>
@@ -113,8 +407,9 @@ set `--kui-workbench-rail-width` and `--kui-workbench-drawer-height` on a
113
407
  Workbench instance. The supported composition classes are `.kui-workbench`,
114
408
  `.kui-workbench__rail`, `.kui-workbench__rail--left`,
115
409
  `.kui-workbench__rail--right`, `.kui-workbench__center`,
116
- `.kui-workbench__main`, `.kui-workbench__drawer`, and
117
- `.kui-workbench__panel-content`, and `.kui-workbench__restore`; these exact hooks are cataloged for tools that
410
+ `.kui-workbench__main`, `.kui-workbench__drawer`,
411
+ `.kui-workbench__panel-content`, `.kui-workbench__handle`,
412
+ `.kui-workbench__handle-icon`, and `.kui-workbench__restore`; these exact hooks are cataloged for tools that
118
413
  must classify public application selectors. Prefer the component props and two
119
414
  size tokens before selecting internal anatomy, and do not target its data
120
415
  attributes or descendant tags as styling contracts.
package/llms.txt CHANGED
@@ -80,8 +80,10 @@ the folder modules, and CSS only imports their owner stylesheets.
80
80
  [`kerf-ui-doctor`](./docs/ui-doctor.md). Its portable JSON report merges
81
81
  profile/catalog, TypeScript, Kerf ESLint, and static analyzer diagnostics;
82
82
  CSS-adjacent component props are checked from catalog `cssValueProps`, so
83
- prefer its canonical shorthand or typed helper over raw CSS strings;
84
- repair source-located errors until exit 0. Use full mode for release gates;
83
+ prefer its canonical shorthand or typed helper over raw CSS strings; a
84
+ `--wa-color-{tone}-fill-loud` override without a governing `on-loud` (same
85
+ or ancestor scope, possibly in a co-loaded stylesheet), or whose literal
86
+ pair measures below 4.5:1, is review finding `KUI-L018` (set both); repair source-located errors until exit 0. Use full mode for release gates;
85
87
  generated `dist`/`coverage`, dependency, cache, evidence, and nested-worktree
86
88
  directories are excluded consistently from every static stage.
87
89
  [`kerf-ui-analyze`](./docs/ui-analyzer.md) remains available when only static
@@ -199,7 +201,8 @@ the folder modules, and CSS only imports their owner stylesheets.
199
201
  optional icon in a `ToolbarControlGroup`, an extra-large `ToolbarText` directly
200
202
  in the leading zone, and actions in a trailing group. Supporting copy is
201
203
  app-owned content below. Do not create a private heading wrapper or restyle the
202
- toolbar.
204
+ toolbar. A narrow peripheral rail or drawer, where extra-large would truncate
205
+ at its minimum size, names itself with the default `ToolbarText` size.
203
206
  - **Use `Text` for ordinary semantic headings, paragraphs, and inline secondary
204
207
  text outside toolbar title zones.** Omit `variant` for the default `p`, pass
205
208
  `h1`–`h6` based on the document outline, or use `variant="span"` inside a row,
@@ -322,6 +325,7 @@ shell, `@kerfjs/ui/collapsible-panel` (`CollapsiblePanel`, `CollapsiblePanelTogg
322
325
  - [component-contract.md](./docs/component-contract.md): what a component owns vs. what the app owns.
323
326
  - [accessibility.md](./docs/accessibility.md): keyboard and ARIA contracts per component.
324
327
  - [recipes.md](./docs/recipes.md): production compositions (app shell, list-detail dialog, composer form, …) as copyable references.
328
+ - [workbench.md](./docs/workbench.md): the `Workbench` multi-panel shell, its collapse policies, and opt-in `resizable` panels driven by `wireWorkbench` (`@kerfjs/ui/wire-workbench`: drag, keyboard, min/max, persistence, compact suspension), the `mainMinSize` / `mainMinHeight` work-area minimums (default 320px wide beside any inline rail, 120px tall above the drawer) that resizable panels stop at and inline panels shrink around, and a panel's `responsiveOverlayAt` (`narrow` / `compact`, rails and the bottom drawer) that presents it as an overlay below a Workbench container breakpoint without a device-class check; a panel given its `collapsed` signal is a transient overlay (collapsed on entering the breakpoint, takes focus and keeps Tab inside while open, closed by Escape or an outside press, focus returned; `dismissOverlays`), and overlays are exclusive by default (opening one closes the others; `exclusiveOverlays: false` opts out).
325
329
  - [app-layouts.md](./docs/app-layouts.md): choosing `NavStack`/`SplitView`/`Workbench`/`TabScaffold` by data + interaction + device, and dialog presentation, plus the safe-area model (surfaces paint through unsafe areas; content pads only the edges it reaches; `Pane.safeAreaEdges` for app-owned arrangements, `Toolbar.safeAreaEdges` for an app bar or bottom bar at a screen edge).
326
330
  - [webawesome-theme.md](./docs/webawesome-theme.md): the optional Web Awesome theme; catalog coverage means themed-and-supported, not preferred (prefer the Kerf primitive when one exists). The UX sidebar visibly tags superseded and exceptional Web Awesome choices as `Discouraged`; Popup remains an available conditional positioning primitive.
327
331
  - [component-catalog.json](./ai/component-catalog.json) + [component-catalog-extension.schema.json](./ai/component-catalog-extension.schema.json) + [catalog-authoring.json](./ai/catalog-authoring.json) + [public-api-signatures-v1.md](./ai/public-api-signatures-v1.md) + [webawesome-jsx-signatures-v1.md](./ai/webawesome-jsx-signatures-v1.md): machine-readable selection facts, a reusable app-component extension contract, Catalog authoring discovery, and exact signatures.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kerfjs/ui",
3
- "version": "5.0.0-beta.53",
3
+ "version": "5.0.0-beta.54",
4
4
  "description": "Accessible, composable UI primitives for kerf applications.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -230,6 +230,10 @@
230
230
  "types": "./dist/wire-tab-scaffold.d.ts",
231
231
  "import": "./dist/wire-tab-scaffold.js"
232
232
  },
233
+ "./wire-workbench": {
234
+ "types": "./dist/wire-workbench.d.ts",
235
+ "import": "./dist/wire-workbench.js"
236
+ },
233
237
  "./loading-spinner": {
234
238
  "types": "./dist/loading-spinner.d.ts",
235
239
  "browser": "./dist/browser/loading-spinner.js",
@@ -147,8 +147,9 @@ export const createRecipe: RecipeFactory = (announce) => {
147
147
 
148
148
  // Each panel's own header holds its collapse toggle; its expand toggle shows
149
149
  // only while it is collapsed, so exactly one control owns each action. The
150
- // rail's sits in the main header; the drawer's floats at the bottom edge the
151
- // drawer opens from. wireSidebar hands focus between them.
150
+ // rail's sits in the main header; the drawer's is the drawer's own
151
+ // `restoreControl`, which the panel floats in its container's bottom-end
152
+ // corner. wireSidebar hands focus between them.
152
153
  const main = () => (
153
154
  <Pane
154
155
  element="main"
@@ -194,6 +195,11 @@ export const createRecipe: RecipeFactory = (announce) => {
194
195
  size={168}
195
196
  collapsed={drawerCollapsed.value}
196
197
  label="Activity"
198
+ restoreControl={
199
+ <FloatingToolbar label="Activity drawer">
200
+ <ToolbarControlGroup single>{drawerToggle()}</ToolbarControlGroup>
201
+ </FloatingToolbar>
202
+ }
197
203
  >
198
204
  <Pane
199
205
  header={
@@ -246,11 +252,6 @@ export const createRecipe: RecipeFactory = (announce) => {
246
252
  </Grid>
247
253
  {drawer()}
248
254
  </List>
249
- {drawerCollapsed.value ? (
250
- <FloatingToolbar label="Activity drawer">
251
- <ToolbarControlGroup single>{drawerToggle()}</ToolbarControlGroup>
252
- </FloatingToolbar>
253
- ) : null}
254
255
  </Row>
255
256
  );
256
257
 
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-CCMKJWLX.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em } from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-tab-id',\n 'data-selected',\n 'data-tab-dragging',\n 'data-tab-drop-position',\n]);\n\ntype AppTabRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-tab-id'?: never;\n 'data-selected'?: never;\n 'data-tab-dragging'?: never;\n 'data-tab-drop-position'?: never;\n }\n>;\n\nexport type AppTabPresentation = 'pill' | 'segmented' | 'icon-only';\nexport type AppTabSize = 'default' | 'compact';\n\nexport interface AppTabProps {\n id: string;\n name: string;\n selected?: boolean;\n closable?: boolean;\n draggable?: boolean;\n leading?: KerfUiContent;\n trailing?: KerfUiContent;\n /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */\n presentation?: AppTabPresentation;\n /** Compact tabs use the 32px application-rail height. */\n size?: AppTabSize;\n /** Maximum visible label width in CSS pixels before ellipsis. */\n labelMaxWidth?: number;\n /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n closeIcon?: SafeHtml;\n selectAction?: string;\n closeAction?: string;\n className?: string;\n /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n placeholder?: boolean;\n /**\n * Dormant but named: the tab is known and still opening. Keeps `name`\n * visible in the quiet text color and as the tab's accessible name, shows\n * `trailing` (for example a `LoadingSpinner`), and disables select, close,\n * and dragging with `aria-busy`, like `placeholder`. Same pill geometry as\n * the live tab, so swapping it in place does not shift the bar.\n * `placeholder` wins when both are set.\n */\n pending?: boolean;\n rootAttributes?: AppTabRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nfunction CloseIcon() {\n return (\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.25\"\n stroke-linecap=\"round\"\n >\n <path d=\"m7 7 10 10\"></path>\n <path d=\"M17 7 7 17\"></path>\n </svg>\n );\n}\n\nexport function AppTab({\n id,\n name,\n selected = false,\n closable = true,\n draggable = false,\n leading,\n trailing,\n presentation = 'pill',\n size = 'default',\n labelMaxWidth,\n closeIcon,\n selectAction = 'select-tab',\n closeAction = 'close-tab',\n className = '',\n placeholder = false,\n pending = false,\n rootAttributes = {},\n slot,\n}: AppTabProps) {\n // Both loading states leave the tab dormant; only `placeholder` hides the name.\n const dormant = placeholder || pending;\n const named = pending && !placeholder;\n const keyshortcuts = [\n closable ? 'Delete Backspace' : '',\n draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n ]\n .filter(Boolean)\n .join(' ');\n const extensionAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n return (\n <div\n {...extensionAttributes}\n class={`kui-app-tab ${className}`.trim()}\n data-component=\"app-tab\"\n data-tab-id={id}\n data-selected={String(selected)}\n data-presentation={presentation}\n data-size={size}\n data-placeholder={placeholder ? 'true' : undefined}\n data-pending={named ? 'true' : undefined}\n draggable={dormant ? 'false' : draggable ? 'true' : 'false'}\n aria-busy={dormant ? 'true' : undefined}\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-app-tab-label-max-width:${labelMaxWidth}px`\n }\n slot={slot}\n >\n {closable && (\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"kui-app-tab__close\"\n data-action={dormant ? undefined : closeAction}\n data-tab-id={id}\n disabled={dormant || undefined}\n aria-label={`Close ${name}`}\n title={`Close ${name}`}\n >\n <span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">\n {closeIcon ?? <CloseIcon />}\n </span>\n </button>\n )}\n <button\n type=\"button\"\n class=\"kui-app-tab__select\"\n role=\"tab\"\n aria-selected={String(selected)}\n aria-label={presentation === 'icon-only' || named ? name : undefined}\n aria-keyshortcuts={dormant ? undefined : keyshortcuts || undefined}\n data-action={dormant ? undefined : selectAction}\n data-tab-id={id}\n disabled={dormant || undefined}\n tabindex={dormant ? '-1' : selected ? '0' : '-1'}\n >\n {leading}\n <span\n class=\"kui-app-tab__name\"\n aria-hidden={presentation === 'icon-only' ? 'true' : undefined}\n >\n {placeholder ? <Skeleton width={em(7)} /> : name}\n </span>\n {closable || trailing ? (\n <span class=\"kui-app-tab__trailing\">{trailing}</span>\n ) : undefined}\n </button>\n </div>\n );\n}\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/wire-resizable-regions.ts"],"names":[],"mappings":"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","file":"chunk-EKYZCRCX.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nimport {\n clampRegionSize,\n type ResizableRegionAxis,\n type ResizableRegionEdge,\n resizeRegionFromPointer,\n} from './resizable-region.js';\n\nexport interface ResizeCommit {\n id: string;\n size: number;\n source: 'keyboard' | 'pointer';\n}\n\nexport interface WireResizableRegionsOptions {\n step?: number;\n largeStep?: number;\n onPreview?: (change: ResizeCommit) => void;\n onCommit: (change: ResizeCommit) => void;\n}\n\ninterface RegionState {\n region: HTMLElement;\n handle: HTMLElement;\n id: string;\n axis: ResizableRegionAxis;\n edge: ResizableRegionEdge;\n min: number;\n /** The rendered `max` prop. */\n declaredMax: number;\n /** The largest size the region can actually show: `declaredMax`, or less when a parent clamps the track. */\n max: number;\n /** The shown size, which a parent clamp can hold below the rendered size. */\n size: number;\n}\n\nconst REGION_SELECTOR = '[data-component=\"resizable-region\"]';\nconst HANDLE_SELECTOR = '[data-kui-resize-handle]';\nconst INSET_ATTRIBUTE = 'data-handle-inset';\n/** Attributes a re-render can write back over the reported state. */\nconst REPORTED_ATTRIBUTES = ['aria-valuenow', 'aria-valuemax', INSET_ATTRIBUTE];\n/**\n * How far the handle's hit target reaches past the separator (the CSS places\n * the 20px handle at `-10px` on the region's edge).\n */\nconst HANDLE_OVERHANG = 10;\n\n/**\n * The size the region renders or was last resized to. The track's custom\n * property is the source, not aria-valuenow, which reports the shown size and\n * can sit below the rendered size while a parent clamps the track.\n */\nfunction renderedSize(region: HTMLElement, handle: HTMLElement) {\n const size = Number.parseFloat(\n region.style.getPropertyValue('--kui-resizable-region-size'),\n );\n return Number.isFinite(size)\n ? size\n : Number(handle.getAttribute('aria-valuenow'));\n}\n\n/**\n * Whether the handle must sit inside the region. When a parent clamps the\n * track, the separator reaches the parent's edge, where a clipping ancestor\n * (an app shell, a scroll frame) would cut off the half of the hit target\n * and its focus ring that overhang the region. With less room past the\n * separator than that overhang, the region carries `data-handle-inset`, and\n * the CSS moves the handle and its ring inside.\n */\nfunction handleInset(state: RegionState, size: number) {\n return state.max < state.declaredMax && state.max - size < HANDLE_OVERHANG;\n}\n\nfunction setInset(region: HTMLElement, inset: boolean) {\n if (region.hasAttribute(INSET_ATTRIBUTE) !== inset)\n region.toggleAttribute(INSET_ATTRIBUTE, inset);\n}\n\nfunction setAttributeIfChanged(\n element: HTMLElement,\n name: string,\n value: string,\n) {\n if (element.getAttribute(name) !== value) element.setAttribute(name, value);\n}\n\n/**\n * The largest size a parent lets the region show. The track is\n * `size + edge extent` (its flex basis), but a parent may clamp it (a\n * `max-width: 100%` stage, a narrow container). Probing the track at the\n * declared maximum for one synchronous layout read measures how much of that\n * size is visible; the probe is restored before anything paints. Without\n * layout (no box yet, or an `auto` basis under a responsive fill) the declared\n * maximum stands.\n */\nfunction visibleMax(\n region: HTMLElement,\n axis: ResizableRegionAxis,\n min: number,\n max: number,\n) {\n const property = '--kui-resizable-region-size';\n const previous = region.style.getPropertyValue(property);\n region.style.setProperty(property, `${max}px`);\n const basis = Number.parseFloat(\n globalThis.getComputedStyle(region).flexBasis,\n );\n const box = region.getBoundingClientRect();\n region.style.setProperty(property, previous);\n const track = axis === 'horizontal' ? box.width : box.height;\n if (!Number.isFinite(basis) || track <= 0 || track >= basis - 0.5) return max;\n return Math.max(min, Math.min(max, Math.floor(track - (basis - max))));\n}\n\n/**\n * Apply a live size to an expanded region before the app commits it. The\n * collapse-motion content keeps a fixed width from the expanded size so its\n * slide reads as a slide, not a squeeze; it has to follow the live size too, or\n * the content stays at the previous width until the app re-renders.\n */\nfunction applySize(state: RegionState, size: number) {\n const value = `${size}px`;\n state.region.style.setProperty('--kui-resizable-region-size', value);\n state.region.style.setProperty('--kui-resizable-region-expanded-size', value);\n state.handle.setAttribute('aria-valuenow', String(size));\n setInset(state.region, handleInset(state, size));\n}\n\n/** Wire pointer and separator-keyboard behavior for every ResizableRegion below root. */\nexport function wireResizableRegions(\n root: HTMLElement,\n {\n step = 16,\n largeStep = 64,\n onPreview,\n onCommit,\n }: WireResizableRegionsOptions,\n) {\n let stopPointer: (() => void) | undefined;\n // The handle announces its visible maximum in aria-valuemax, which hides the\n // rendered `max` prop. Remember it per handle; a re-render that writes a\n // different aria-valuemax than the one announced here supersedes it.\n const announced = new WeakMap<\n HTMLElement,\n { declaredMax: number; max: number; size: number; inset: boolean }\n >();\n\n function regionState(handle: Element): RegionState | undefined {\n const region = handle.closest<HTMLElement>(REGION_SELECTOR);\n if (!(region instanceof HTMLElement) || !(handle instanceof HTMLElement))\n return undefined;\n const id = region.dataset.regionId;\n const axis = region.dataset.axis;\n const edge = region.dataset.edge;\n const min = Number(handle.getAttribute('aria-valuemin'));\n const valueMax = Number(handle.getAttribute('aria-valuemax'));\n const remembered = announced.get(handle);\n const declaredMax =\n remembered?.max === valueMax ? remembered.declaredMax : valueMax;\n const size = renderedSize(region, handle);\n if (\n !id ||\n region.dataset.collapsed === 'true' ||\n region.dataset.presentation !== 'inline' ||\n (axis !== 'horizontal' && axis !== 'vertical') ||\n (edge !== 'start' && edge !== 'end') ||\n !Number.isFinite(min) ||\n !Number.isFinite(declaredMax) ||\n !Number.isFinite(size)\n )\n return undefined;\n const max = visibleMax(region, axis, min, declaredMax);\n return {\n region,\n handle,\n id,\n axis,\n edge,\n min,\n declaredMax,\n max,\n size: clampRegionSize(size, min, max),\n };\n }\n\n /**\n * Report what is shown: the visible maximum and the shown size. Nothing is\n * committed — the app's size stays its own until the user resizes.\n */\n function announce(state: RegionState) {\n const inset = handleInset(state, state.size);\n announced.set(state.handle, {\n declaredMax: state.declaredMax,\n max: state.max,\n size: state.size,\n inset,\n });\n // Unchanged values are not rewritten, so the observer below never sees\n // its own report as a re-render.\n setAttributeIfChanged(state.handle, 'aria-valuemax', String(state.max));\n setAttributeIfChanged(state.handle, 'aria-valuenow', String(state.size));\n setInset(state.region, inset);\n }\n\n const handleOf = (region: HTMLElement) =>\n region.querySelector<HTMLElement>(`:scope > ${HANDLE_SELECTOR}`);\n\n /** Re-measure a region at rest and report what it shows. */\n function sync(region: HTMLElement) {\n if (!region.isConnected || region.dataset.resizing === 'true') return;\n const handle = handleOf(region);\n const state = handle ? regionState(handle) : undefined;\n if (state) announce(state);\n }\n\n /** Whether the region still shows the state this wiring last reported. */\n function reportedByUs(region: HTMLElement) {\n const handle = handleOf(region);\n const remembered = handle ? announced.get(handle) : undefined;\n return (\n remembered !== undefined &&\n handle?.getAttribute('aria-valuemax') === String(remembered.max) &&\n handle.getAttribute('aria-valuenow') === String(remembered.size) &&\n region.hasAttribute(INSET_ATTRIBUTE) === remembered.inset\n );\n }\n\n // Keep the reported values current without a focus or an interaction.\n // A ResizeObserver on every region and its parent re-measures when the\n // space changes (a narrowed viewport, a parent that grows back); a\n // MutationObserver catches a re-render that writes the rendered props back\n // over the reported values, and regions a re-render adds or removes. Both\n // measure once per affected region per batch, after layout or in a\n // microtask, never per frame.\n const observed = new Set<Element>();\n const resizeObserver =\n typeof ResizeObserver === 'function'\n ? new ResizeObserver((entries) => {\n const regions = new Set<HTMLElement>();\n for (const { target } of entries) {\n if (target.matches(REGION_SELECTOR))\n regions.add(target as HTMLElement);\n for (const child of target.querySelectorAll<HTMLElement>(\n `:scope > ${REGION_SELECTOR}`,\n ))\n regions.add(child);\n }\n for (const region of regions) sync(region);\n })\n : undefined;\n\n /** Observe every region below root and its parent; release the rest. */\n function observeRegions() {\n if (!resizeObserver) return;\n const wanted = new Set<Element>();\n for (const region of root.querySelectorAll(REGION_SELECTOR)) {\n wanted.add(region);\n // A region found below root always has a parent element.\n wanted.add(region.parentElement as Element);\n }\n for (const element of observed)\n if (!wanted.has(element)) {\n resizeObserver.unobserve(element);\n observed.delete(element);\n }\n for (const element of wanted)\n if (!observed.has(element)) {\n resizeObserver.observe(element);\n observed.add(element);\n }\n }\n\n const mutationObserver = new MutationObserver((records) => {\n const regions = new Set<HTMLElement>();\n let structural = false;\n for (const record of records) {\n if (record.type === 'childList') {\n structural = true;\n continue;\n }\n const target = record.target as HTMLElement;\n const region = target.matches(REGION_SELECTOR)\n ? target\n : target.matches(HANDLE_SELECTOR)\n ? target.closest<HTMLElement>(REGION_SELECTOR)\n : null;\n if (region && !reportedByUs(region)) regions.add(region);\n }\n // Newly observed regions are measured by the ResizeObserver's first\n // notification.\n if (structural) observeRegions();\n for (const region of regions) sync(region);\n });\n mutationObserver.observe(root, {\n subtree: true,\n childList: true,\n attributes: true,\n attributeFilter: REPORTED_ATTRIBUTES,\n });\n observeRegions();\n\n /**\n * Commit a size, then re-announce: an app that re-renders the committed\n * size synchronously writes the rendered `max` prop back to aria-valuemax.\n */\n function commit(state: RegionState, change: ResizeCommit) {\n onCommit(change);\n const settled = state.handle.isConnected\n ? regionState(state.handle)\n : undefined;\n if (settled) announce(settled);\n }\n\n const stopFocus = delegate(\n root,\n 'focusin',\n HANDLE_SELECTOR,\n (_event, handle) => {\n const state = regionState(handle);\n if (state) announce(state);\n },\n );\n\n const stopKeydown = delegate(\n root,\n 'keydown',\n HANDLE_SELECTOR,\n (event, handle) => {\n const keyboardEvent = event as KeyboardEvent;\n const state = regionState(handle);\n if (!state) return;\n announce(state);\n let next: number | undefined;\n if (keyboardEvent.key === 'Home') next = state.min;\n if (keyboardEvent.key === 'End') next = state.max;\n const increment = keyboardEvent.shiftKey ? largeStep : step;\n if (state.axis === 'horizontal' && keyboardEvent.key === 'ArrowLeft')\n next = resizeRegionFromPointer(state.size, -increment, state.edge);\n if (state.axis === 'horizontal' && keyboardEvent.key === 'ArrowRight')\n next = resizeRegionFromPointer(state.size, increment, state.edge);\n if (state.axis === 'vertical' && keyboardEvent.key === 'ArrowUp')\n next = resizeRegionFromPointer(state.size, -increment, state.edge);\n if (state.axis === 'vertical' && keyboardEvent.key === 'ArrowDown')\n next = resizeRegionFromPointer(state.size, increment, state.edge);\n if (next === undefined) return;\n keyboardEvent.preventDefault();\n const size = clampRegionSize(next, state.min, state.max);\n applySize(state, size);\n commit(state, { id: state.id, size, source: 'keyboard' });\n },\n );\n\n const stopPointerDown = delegate(\n root,\n 'pointerdown',\n HANDLE_SELECTOR,\n (event, handle) => {\n const pointerEvent = event as PointerEvent;\n if (pointerEvent.button !== 0) return;\n const state = regionState(handle);\n if (!state) return;\n pointerEvent.preventDefault();\n announce(state);\n state.handle.setPointerCapture?.(pointerEvent.pointerId);\n const startCoordinate =\n state.axis === 'horizontal'\n ? pointerEvent.clientX\n : pointerEvent.clientY;\n let next = state.size;\n const move = (moveEvent: PointerEvent) => {\n const coordinate =\n state.axis === 'horizontal' ? moveEvent.clientX : moveEvent.clientY;\n next = clampRegionSize(\n resizeRegionFromPointer(\n state.size,\n coordinate - startCoordinate,\n state.edge,\n ),\n state.min,\n state.max,\n );\n applySize(state, next);\n onPreview?.({ id: state.id, size: next, source: 'pointer' });\n };\n const finish = () => {\n root.removeEventListener('pointermove', move);\n root.removeEventListener('pointerup', finish);\n root.removeEventListener('pointercancel', finish);\n stopPointer = undefined;\n delete state.region.dataset.resizing;\n commit(state, { id: state.id, size: next, source: 'pointer' });\n };\n stopPointer?.();\n stopPointer = finish;\n state.region.dataset.resizing = 'true';\n root.addEventListener('pointermove', move);\n root.addEventListener('pointerup', finish, { once: true });\n root.addEventListener('pointercancel', finish, { once: true });\n },\n );\n\n return () => {\n mutationObserver.disconnect();\n resizeObserver?.disconnect();\n observed.clear();\n stopPointer?.();\n stopFocus();\n stopKeydown();\n stopPointerDown();\n };\n}\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/wire-tab-bars.ts"],"names":["target"],"mappings":"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","file":"chunk-UKKSMZYT.js","sourcesContent":["import type { TabActivation } from './tab-bar.js';\n\nexport type TabReorderSource = 'pointer' | 'keyboard';\nexport type TabDropPosition = 'before' | 'after';\n\nexport interface TabReorder {\n barId: string;\n sourceId: string;\n targetId: string;\n position: TabDropPosition;\n source: TabReorderSource;\n}\n\nexport type { TabActivation } from './tab-bar.js';\n\nexport interface WireTabBarsOptions {\n onReorder: (change: TabReorder) => void;\n /**\n * How arrow / Home / End keys activate tabs (default `'automatic'`):\n * - `'automatic'` moves roving focus **and** selects the focused tab (clicks it).\n * - `'manual'` moves roving focus only; the user selects with Enter / Space / click\n * (the ARIA Tabs manual-activation pattern). Use this when activation is a heavy or\n * side-effecting action (e.g. a tab that loads a project) so arrowing through the\n * strip doesn't trigger it on every tab.\n *\n * A per-bar `data-tab-activation=\"manual\" | \"automatic\"` attribute (see the `TabBar`\n * `activation` prop) overrides this option for that strip.\n */\n activation?: TabActivation;\n}\n\ntype TabRoot = HTMLElement;\ntype TabBarRoot = HTMLElement;\n\nconst AUTO_SCROLL_EDGE_PX = 56;\nconst AUTO_SCROLL_MIN_PX_PER_SECOND = 180;\nconst AUTO_SCROLL_MAX_PX_PER_SECOND = 900;\n\nexport function reorderTabs<T>(\n items: readonly T[],\n getId: (item: T) => string,\n sourceId: string,\n targetId: string,\n position: TabDropPosition,\n): T[] {\n if (sourceId === targetId) return [...items];\n const source = items.find((item) => getId(item) === sourceId);\n if (!source || !items.some((item) => getId(item) === targetId))\n return [...items];\n const remaining = items.filter((item) => getId(item) !== sourceId);\n const targetIndex = remaining.findIndex((item) => getId(item) === targetId);\n remaining.splice(targetIndex + (position === 'after' ? 1 : 0), 0, source);\n return remaining;\n}\n\nfunction tabRoot(target: EventTarget | null): TabRoot | undefined {\n return target instanceof Element\n ? (target.closest<TabRoot>('[data-component=\"app-tab\"]') ?? undefined)\n : undefined;\n}\n\nfunction tabBar(tab: TabRoot): TabBarRoot | undefined {\n return tab.closest<TabBarRoot>('[data-component=\"tab-bar\"]') ?? undefined;\n}\n\nfunction tabId(tab: TabRoot): string | undefined {\n return tab.dataset.tabId || undefined;\n}\n\nfunction barId(bar: TabBarRoot): string | undefined {\n return bar.dataset.tabBarId || undefined;\n}\n\nfunction positionFor(event: DragEvent, tab: TabRoot): TabDropPosition {\n const bounds = tab.getBoundingClientRect();\n return event.clientX < bounds.left + bounds.width / 2 ? 'before' : 'after';\n}\n\nfunction tabsIn(bar: TabBarRoot): HTMLButtonElement[] {\n return [\n ...bar.querySelectorAll<HTMLButtonElement>(\n '[data-kui-tab-list] [role=\"tab\"]',\n ),\n ];\n}\n\nfunction reveal(tab: HTMLElement | null | undefined): void {\n tab?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n}\n\n/** Wire reordering and keyboard navigation while leaving controlled state in the application. */\nexport function wireTabBars(\n root: HTMLElement | Document,\n { onReorder, activation = 'automatic' }: WireTabBarsOptions,\n): () => void {\n const ownerDocument = (\n root.nodeType === 9 ? (root as Document) : root.ownerDocument\n )!;\n const view = ownerDocument.defaultView!;\n let autoScroll:\n | {\n strip: HTMLElement;\n velocity: number;\n frame: number | undefined;\n previousTime: number | undefined;\n }\n | undefined;\n const stopAutoScroll = () => {\n if (!autoScroll) return;\n if (autoScroll.frame !== undefined)\n view.cancelAnimationFrame(autoScroll.frame);\n delete autoScroll.strip.dataset.tabAutoscroll;\n autoScroll = undefined;\n };\n const runAutoScroll = (time: number) => {\n const current = autoScroll;\n if (!current) return;\n current.frame = undefined;\n const elapsed =\n current.previousTime === undefined\n ? 1000 / 60\n : Math.min(40, Math.max(1, time - current.previousTime));\n current.previousTime = time;\n const maximum = Math.max(\n 0,\n current.strip.scrollWidth - current.strip.clientWidth,\n );\n const previous = current.strip.scrollLeft;\n current.strip.scrollLeft = Math.max(\n 0,\n Math.min(maximum, previous + (current.velocity * elapsed) / 1000),\n );\n if (current.strip.scrollLeft === previous) {\n stopAutoScroll();\n return;\n }\n current.frame = view.requestAnimationFrame(runAutoScroll);\n };\n const updateAutoScroll = (event: DragEvent, strip: HTMLElement) => {\n if (strip.scrollWidth <= strip.clientWidth) {\n stopAutoScroll();\n return;\n }\n const bounds = strip.getBoundingClientRect();\n const edge = Math.min(AUTO_SCROLL_EDGE_PX, bounds.width / 3);\n const startDistance = event.clientX - bounds.left;\n const endDistance = bounds.right - event.clientX;\n let direction = 0;\n let strength = 0;\n if (startDistance >= 0 && startDistance < edge) {\n direction = -1;\n strength = 1 - startDistance / edge;\n } else if (endDistance >= 0 && endDistance < edge) {\n direction = 1;\n strength = 1 - endDistance / edge;\n }\n if (direction === 0) {\n stopAutoScroll();\n return;\n }\n const maximum = Math.max(0, strip.scrollWidth - strip.clientWidth);\n if (\n (direction < 0 && strip.scrollLeft <= 0) ||\n (direction > 0 && strip.scrollLeft >= maximum)\n ) {\n stopAutoScroll();\n return;\n }\n const speed =\n AUTO_SCROLL_MIN_PX_PER_SECOND +\n (AUTO_SCROLL_MAX_PX_PER_SECOND - AUTO_SCROLL_MIN_PX_PER_SECOND) *\n strength *\n strength;\n if (autoScroll?.strip !== strip) stopAutoScroll();\n autoScroll ??= {\n strip,\n velocity: 0,\n frame: undefined,\n previousTime: undefined,\n };\n autoScroll.velocity = direction * speed;\n strip.dataset.tabAutoscroll = direction < 0 ? 'start' : 'end';\n autoScroll.frame ??= view.requestAnimationFrame(runAutoScroll);\n };\n let dragged: { barId: string; tabId: string } | undefined;\n const clearDropPositions = () =>\n root\n .querySelectorAll<HTMLElement>('[data-tab-drop-position]')\n .forEach((tab) => delete tab.dataset.tabDropPosition);\n const clear = () => {\n stopAutoScroll();\n dragged = undefined;\n root\n .querySelectorAll<HTMLElement>(\n '[data-tab-dragging], [data-tab-drop-position]',\n )\n .forEach((tab) => {\n delete tab.dataset.tabDragging;\n delete tab.dataset.tabDropPosition;\n });\n };\n let disposed = false;\n const afterControlledRender = (sourceBarId: string, sourceTabId: string) =>\n globalThis.queueMicrotask(() => {\n if (disposed) return;\n const tab = [\n ...root.querySelectorAll<TabRoot>('[data-component=\"app-tab\"]'),\n ].find((candidate) => {\n const candidateBar = tabBar(candidate);\n return (\n tabId(candidate) === sourceTabId &&\n candidateBar !== undefined &&\n barId(candidateBar) === sourceBarId\n );\n });\n const button = tab?.querySelector<HTMLButtonElement>('[role=\"tab\"]');\n button?.focus();\n reveal(button);\n });\n\n const onDragStart = (event: Event) => {\n const dragEvent = event as DragEvent;\n const tab = tabRoot(event.target);\n const bar = tab && tabBar(tab);\n const sourceId = tab && tabId(tab);\n const sourceBarId = bar && barId(bar);\n if (\n !tab ||\n tab.getAttribute('draggable') !== 'true' ||\n !sourceId ||\n !sourceBarId\n )\n return;\n dragged = { barId: sourceBarId, tabId: sourceId };\n tab.dataset.tabDragging = 'true';\n if (dragEvent.dataTransfer) {\n dragEvent.dataTransfer.effectAllowed = 'move';\n dragEvent.dataTransfer.setData(\n 'application/x-kerf-tab',\n `${sourceBarId}:${sourceId}`,\n );\n }\n };\n const onDragOver = (event: Event) => {\n const dragEvent = event as DragEvent;\n const tab = tabRoot(event.target);\n const bar =\n event.target instanceof Element\n ? (event.target.closest<TabBarRoot>('[data-component=\"tab-bar\"]') ??\n undefined)\n : undefined;\n const targetId = tab && tabId(tab);\n const targetBarId = bar && barId(bar);\n if (!dragged || !bar || targetBarId !== dragged.barId) {\n stopAutoScroll();\n clearDropPositions();\n return;\n }\n dragEvent.preventDefault();\n const strip = bar.querySelector<HTMLElement>('[data-kui-tab-list]');\n if (strip) updateAutoScroll(dragEvent, strip);\n else stopAutoScroll();\n clearDropPositions();\n if (!tab || !targetId || targetId === dragged.tabId) return;\n tab.dataset.tabDropPosition = positionFor(dragEvent, tab);\n if (dragEvent.dataTransfer) dragEvent.dataTransfer.dropEffect = 'move';\n };\n const onDrop = (event: Event) => {\n const dragEvent = event as DragEvent;\n const tab = tabRoot(event.target);\n const bar = tab && tabBar(tab);\n const targetId = tab && tabId(tab);\n const targetBarId = bar && barId(bar);\n if (\n !dragged ||\n !tab ||\n !targetId ||\n targetId === dragged.tabId ||\n targetBarId !== dragged.barId\n ) {\n clear();\n return;\n }\n dragEvent.preventDefault();\n const change: TabReorder = {\n barId: dragged.barId,\n sourceId: dragged.tabId,\n targetId,\n position: positionFor(dragEvent, tab),\n source: 'pointer',\n };\n clear();\n onReorder(change);\n afterControlledRender(change.barId, change.sourceId);\n };\n const onKeyDown = (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n const button =\n event.target instanceof Element\n ? event.target.closest<HTMLButtonElement>('[role=\"tab\"]')\n : null;\n const tab = button && tabRoot(button);\n const bar = tab && tabBar(tab);\n if (!button || !tab || !bar) return;\n if (keyboardEvent.key === 'Delete' || keyboardEvent.key === 'Backspace') {\n const close = tab.querySelector<HTMLButtonElement>('.kui-app-tab__close');\n if (!close) return;\n keyboardEvent.preventDefault();\n close.click();\n return;\n }\n const tabs = tabsIn(bar);\n const current = tabs.indexOf(button);\n if (current < 0) return;\n if (\n keyboardEvent.altKey &&\n keyboardEvent.shiftKey &&\n (keyboardEvent.key === 'ArrowLeft' || keyboardEvent.key === 'ArrowRight')\n ) {\n const target =\n tabs[current + (keyboardEvent.key === 'ArrowLeft' ? -1 : 1)];\n const sourceId = tabId(tab);\n const targetRoot = target && tabRoot(target);\n const targetId = targetRoot && tabId(targetRoot);\n const sourceBarId = barId(bar);\n if (\n !target ||\n !sourceId ||\n !targetId ||\n !sourceBarId ||\n tab.getAttribute('draggable') !== 'true'\n )\n return;\n keyboardEvent.preventDefault();\n onReorder({\n barId: sourceBarId,\n sourceId,\n targetId,\n position: keyboardEvent.key === 'ArrowLeft' ? 'before' : 'after',\n source: 'keyboard',\n });\n afterControlledRender(sourceBarId, sourceId);\n return;\n }\n let next: number | undefined;\n if (keyboardEvent.key === 'ArrowRight') next = (current + 1) % tabs.length;\n else if (keyboardEvent.key === 'ArrowLeft')\n next = (current - 1 + tabs.length) % tabs.length;\n else if (keyboardEvent.key === 'Home') next = 0;\n else if (keyboardEvent.key === 'End') next = tabs.length - 1;\n if (next === undefined) return;\n keyboardEvent.preventDefault();\n // A per-bar data-tab-activation attribute overrides the wireTabBars option.\n const perBar = bar.dataset.tabActivation;\n const mode: TabActivation =\n perBar === 'manual' || perBar === 'automatic' ? perBar : activation;\n const target = tabs[next]!;\n target.focus();\n // Manual activation moves roving focus only; the user selects with Enter / Space\n // (native on the tab <button>) or click. Automatic also selects the focused tab.\n if (mode === 'automatic') {\n target.click();\n // Activation can synchronously replace the controlled strip. Resolve the\n // logical tab again after rendering instead of leaving focus on a dead node.\n if (!target.isConnected)\n afterControlledRender(\n bar.dataset.tabBarId!,\n tabRoot(target)!.dataset.tabId!,\n );\n }\n reveal(target);\n };\n const onFocusIn = (event: Event) => {\n const tab =\n event.target instanceof HTMLElement &&\n event.target.matches('[role=\"tab\"]')\n ? event.target\n : undefined;\n reveal(tab);\n };\n\n root.addEventListener('dragstart', onDragStart);\n root.addEventListener('dragover', onDragOver);\n root.addEventListener('drop', onDrop);\n root.addEventListener('dragend', clear);\n root.addEventListener('keydown', onKeyDown);\n root.addEventListener('focusin', onFocusIn);\n root\n .querySelectorAll<HTMLElement>(\n '[data-kui-tab-list] [role=\"tab\"][aria-selected=\"true\"]',\n )\n .forEach(reveal);\n\n return () => {\n disposed = true;\n clear();\n root.removeEventListener('dragstart', onDragStart);\n root.removeEventListener('dragover', onDragOver);\n root.removeEventListener('drop', onDrop);\n root.removeEventListener('dragend', clear);\n root.removeEventListener('keydown', onKeyDown);\n root.removeEventListener('focusin', onFocusIn);\n };\n}\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/resizable-region.tsx"],"names":[],"mappings":";;;AA0CO,IAAM,eAAA,GAAkB,CAAC,IAAA,EAAc,GAAA,EAAa,QACzD,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,IAAI,GAAA,EAAK,IAAA,CAAK,KAAA,CAAM,IAAI,CAAC,CAAC;AACxC,IAAM,uBAAA,GAA0B,CACrC,SAAA,EACA,KAAA,EACA,SACG,SAAA,GAAY,KAAA,IAAS,IAAA,KAAS,OAAA,GAAU,EAAA,GAAK,CAAA;AAElD,SAAS,UAAA,CAAW,EAAE,IAAA,EAAK,EAAkC;AAC3D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,MAAA,EAAO,cAAA;AAAA,MACP,cAAA,EAAa,GAAA;AAAA,MACb,gBAAA,EAAe,OAAA;AAAA,MAEd,QAAA,EAAA,IAAA,KAAS,+BACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,SAAA,EAAU,CAAA;AAAA,wBAClB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW;AAAA,OAAA,EACrB,oBAEA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,SAAA,EAAU,CAAA;AAAA,wBAClB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW;AAAA,OAAA,EACrB;AAAA;AAAA,GAEJ;AAEJ;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA,GAAO,YAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,KAAA;AAAA,EACZ,aAAA,GAAgB,KAAA;AAAA,EAChB,SAAA,GAAY,MAAA;AAAA,EACZ,cAAA,GAAiB,OAAA;AAAA,EACjB,eAAA,GAAkB,MAAA;AAAA,EAClB,YAAA,GAAe,QAAA;AAAA,EACf,cAAA;AAAA,EACA,eAAA,GAAkB,IAAA,KAAS,YAAA,IAAgB,IAAA,KAAS,QAChD,cAAA,GACA,YAAA;AAAA,EACJ,gBAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,YAAA,GAAe,eAAA,CAAgB,IAAA,EAAM,GAAA,EAAK,GAAG,CAAA;AACnD,EAAA,MAAM,QAAA,GAAW,YAAY,CAAA,GAAI,YAAA;AACjC,EAAA,MAAM,WAAA,GAAc,IAAA,KAAS,YAAA,GAAe,UAAA,GAAa,YAAA;AACzD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,sBAAA;AAAA,QACN,gBAAA,EAAe,kBAAA;AAAA,QACf,gBAAA,EAAgB,EAAA;AAAA,QAChB,WAAA,EAAW,IAAA;AAAA,QACX,WAAA,EAAW,IAAA;AAAA,QACX,gBAAA,EAAgB,OAAO,SAAS,CAAA;AAAA,QAChC,oBAAA,EAAoB,OAAO,aAAa,CAAA;AAAA,QACxC,gBAAA,EAAgB,SAAA;AAAA,QAChB,sBAAA,EAAsB,cAAA;AAAA,QACtB,uBAAA,EAAuB,eAAA;AAAA,QACvB,mBAAA,EAAmB,YAAA;AAAA,QACnB,yBAAA,EAAyB,gBAAA;AAAA,QACzB,KAAA,EAAO,CAAA,4BAAA,EAA+B,QAAQ,CAAA,wCAAA,EAA2C,YAAY,CAAA,EAAA,CAAA;AAAA,QACrG,YAAA,EAAY,KAAA;AAAA,QACZ,aAAA,EAAa,YAAA,KAAiB,QAAA,GAAW,MAAA,GAAS,MAAA;AAAA,QAElD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAiC,QAAA,EAAS,CAAA;AAAA,0BACrD,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,8BAAA;AAAA,cACN,IAAA,EAAK,WAAA;AAAA,cACL,QAAA,EAAU,SAAA,IAAa,YAAA,KAAiB,QAAA,GAAW,IAAA,GAAO,GAAA;AAAA,cAC1D,YAAA,EAAY,UAAU,KAAK,CAAA,CAAA;AAAA,cAC3B,kBAAA,EAAkB,WAAA;AAAA,cAClB,eAAA,EAAe,YAAY,CAAA,GAAI,GAAA;AAAA,cAC/B,eAAA,EAAe,GAAA;AAAA,cACf,eAAA,EAAe,QAAA;AAAA,cACf,aAAA,EACE,SAAA,IAAa,YAAA,KAAiB,QAAA,GAAW,MAAA,GAAS,MAAA;AAAA,cAEpD,wBAAA,EAAsB,IAAA;AAAA,cACtB,gBAAA,EAAgB,EAAA;AAAA,cAEhB,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,mCAAA,EAAoC,aAAA,EAAY,QACzD,QAAA,EAAA,UAAA,oBAAc,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,CAAA,EACzC;AAAA;AAAA;AACF;AAAA;AAAA,KACF;AAAA,IACC,SAAA,IAAa,cAAA,IAAkB,YAAA,KAAiB,QAAA,oBAC/C,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,+BAAA;AAAA,QACN,qBAAA,EAAqB,EAAA;AAAA,QACrB,eAAA,EAAe,eAAA;AAAA,QAEd,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ","file":"chunk-VOCPXGQN.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport type ResizableRegionAxis = 'horizontal' | 'vertical';\nexport type ResizableRegionEdge = 'start' | 'end';\nexport type ResizableRegionSeparator = 'auto' | 'hidden';\nexport type ResizableRegionCollapseMotion = 'none' | 'slide' | 'fade-slide';\nexport type ResizableRegionContentOverflow = 'clip' | 'auto' | 'visible';\nexport type ResizableRegionPresentation = 'inline' | 'overlay' | 'hidden';\nexport type ResizableRegionRestorePosition = 'bottom-start' | 'bottom-end';\nexport type ResizableRegionResponsiveFillAt = 'compact' | 'narrow';\n\nexport interface ResizableRegionProps {\n id: string;\n label: string;\n size: number;\n min: number;\n max: number;\n axis?: ResizableRegionAxis;\n edge?: ResizableRegionEdge;\n collapsed?: boolean;\n transitioning?: boolean;\n /** Whether the separator line is painted. The resize hit target remains available. */\n separator?: ResizableRegionSeparator;\n /** Keep the track change instant while optionally sliding the fixed-size content. */\n collapseMotion?: ResizableRegionCollapseMotion;\n /** Overflow policy for content such as an open popup inside a bottom drawer. */\n contentOverflow?: ResizableRegionContentOverflow;\n /** Inline layout, an edge overlay, or a responsive replacement that removes the region. */\n presentation?: ResizableRegionPresentation;\n /** Always-available control rendered while collapsed, outside the clipped region. */\n restoreControl?: SafeHtml;\n /** Safe-area-aware viewport corner for `restoreControl`. */\n restorePosition?: ResizableRegionRestorePosition;\n /** Fill the available inline track and hide the separator below a container breakpoint. */\n responsiveFillAt?: ResizableRegionResponsiveFillAt;\n /** Decorative dormant content for the separator handle. Must not contain interactive descendants. */\n handleIcon?: SafeHtml;\n children: KerfUiContent;\n}\n\nexport const clampRegionSize = (size: number, min: number, max: number) =>\n Math.min(max, Math.max(min, Math.round(size)));\nexport const resizeRegionFromPointer = (\n startSize: number,\n delta: number,\n edge: ResizableRegionEdge,\n) => startSize + delta * (edge === 'start' ? -1 : 1);\n\nfunction ResizeGrip({ axis }: { axis: ResizableRegionAxis }) {\n return (\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n >\n {axis === 'horizontal' ? (\n <>\n <path d=\"M9 6v12\"></path>\n <path d=\"M15 6v12\"></path>\n </>\n ) : (\n <>\n <path d=\"M6 9h12\"></path>\n <path d=\"M6 15h12\"></path>\n </>\n )}\n </svg>\n );\n}\n\nexport function ResizableRegion({\n id,\n label,\n size,\n min,\n max,\n axis = 'horizontal',\n edge = 'end',\n collapsed = false,\n transitioning = false,\n separator = 'auto',\n collapseMotion = 'slide',\n contentOverflow = 'clip',\n presentation = 'inline',\n restoreControl,\n restorePosition = axis === 'horizontal' && edge === 'end'\n ? 'bottom-start'\n : 'bottom-end',\n responsiveFillAt,\n handleIcon,\n children,\n}: ResizableRegionProps) {\n const expandedSize = clampRegionSize(size, min, max);\n const resolved = collapsed ? 0 : expandedSize;\n const orientation = axis === 'horizontal' ? 'vertical' : 'horizontal';\n return (\n <>\n <section\n class=\"kui-resizable-region\"\n data-component=\"resizable-region\"\n data-region-id={id}\n data-axis={axis}\n data-edge={edge}\n data-collapsed={String(collapsed)}\n data-transitioning={String(transitioning)}\n data-separator={separator}\n data-collapse-motion={collapseMotion}\n data-content-overflow={contentOverflow}\n data-presentation={presentation}\n data-responsive-fill-at={responsiveFillAt}\n style={`--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`}\n aria-label={label}\n aria-hidden={presentation === 'hidden' ? 'true' : undefined}\n >\n <div class=\"kui-resizable-region__content\">{children}</div>\n <div\n class=\"kui-resizable-region__handle\"\n role=\"separator\"\n tabindex={collapsed || presentation !== 'inline' ? '-1' : '0'}\n aria-label={`Resize ${label}`}\n aria-orientation={orientation}\n aria-valuemin={collapsed ? 0 : min}\n aria-valuemax={max}\n aria-valuenow={resolved}\n aria-hidden={\n collapsed || presentation !== 'inline' ? 'true' : undefined\n }\n data-kui-resize-handle\n data-region-id={id}\n >\n <span class=\"kui-resizable-region__handle-icon\" aria-hidden=\"true\">\n {handleIcon ?? <ResizeGrip axis={axis} />}\n </span>\n </div>\n </section>\n {collapsed && restoreControl && presentation !== 'hidden' && (\n <div\n class=\"kui-resizable-region__restore\"\n data-region-restore={id}\n data-position={restorePosition}\n >\n {restoreControl}\n </div>\n )}\n </>\n );\n}\n"]}