@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.
- package/README.md +1 -0
- package/ai/application-ui-diagnostic-ids-v1.json +1 -0
- package/ai/component-catalog-v2.json +82 -6
- package/ai/component-catalog-v2.schema.json +2 -1
- package/ai/component-catalog.json +105 -10
- package/ai/public-api-signatures-v1.md +204 -18
- package/ai/skill.md +23 -17
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/analyzer/index.mjs +48 -0
- package/analyzer/loud-pairs.d.mts +49 -0
- package/analyzer/loud-pairs.mjs +357 -0
- package/dist/app-tab.d.ts +7 -5
- package/dist/app-tab.js +1 -1
- package/dist/{chunk-EKYZCRCX.js → chunk-3CGQ7ZNO.js} +54 -22
- package/dist/chunk-3CGQ7ZNO.js.map +1 -0
- package/dist/{chunk-UKKSMZYT.js → chunk-46263QLK.js} +51 -1
- package/dist/chunk-46263QLK.js.map +1 -0
- package/dist/{chunk-NDUGJ4TU.js → chunk-5NDQABWK.js} +1 -1
- package/dist/{chunk-NDUGJ4TU.js.map → chunk-5NDQABWK.js.map} +1 -1
- package/dist/{chunk-CCMKJWLX.js → chunk-NE5JAOQS.js} +7 -7
- package/dist/chunk-NE5JAOQS.js.map +1 -0
- package/dist/chunk-PSHUSWQH.js +18 -0
- package/dist/chunk-PSHUSWQH.js.map +1 -0
- package/dist/{chunk-VOCPXGQN.js → chunk-VHADGP3B.js} +9 -8
- package/dist/chunk-VHADGP3B.js.map +1 -0
- package/dist/chunk-XQV2B4IL.js +14 -0
- package/dist/chunk-XQV2B4IL.js.map +1 -0
- package/dist/collapsible-panel.d.ts +6 -2
- package/dist/collapsible-panel.js +1 -0
- package/dist/collapsible-panel.js.map +1 -1
- package/dist/floating-toolbar.d.ts +5 -2
- package/dist/floating-toolbar.js +1 -1
- package/dist/index.js +6 -5
- package/dist/resizable-region.d.ts +4 -1
- package/dist/resizable-region.js +1 -1
- package/dist/split-view.js +1 -1
- package/dist/styles/collapsible-panel.css +88 -10
- package/dist/styles/floating-toolbar.css +11 -6
- package/dist/styles/resizable-region.css +81 -13
- package/dist/styles/workbench.css +472 -10
- package/dist/wire-resizable-regions.d.ts +2 -1
- package/dist/wire-resizable-regions.js +2 -1
- package/dist/wire-tab-bars.js +1 -1
- package/dist/wire-workbench.d.ts +109 -0
- package/dist/wire-workbench.js +355 -0
- package/dist/wire-workbench.js.map +1 -0
- package/dist/workbench.d.ts +65 -6
- package/dist/workbench.js +180 -76
- package/dist/workbench.js.map +1 -1
- package/docs/accessibility.md +54 -9
- package/docs/app-layouts.md +12 -1
- package/docs/collapsible-panel.md +59 -1
- package/docs/component-selection.md +16 -6
- package/docs/document-baseline.md +4 -0
- package/docs/layout.md +5 -1
- package/docs/recipes.md +5 -3
- package/docs/type-contracts.md +2 -1
- package/docs/ui-analyzer.md +94 -19
- package/docs/ui-doctor.md +6 -0
- package/docs/ux-demo.md +1 -1
- package/docs/webawesome-theme.md +11 -2
- package/docs/workbench.md +302 -7
- package/llms.txt +7 -3
- package/package.json +5 -1
- package/ux-demo/recipes/collapsible-sidebar.tsx +8 -7
- package/dist/chunk-CCMKJWLX.js.map +0 -1
- package/dist/chunk-EKYZCRCX.js.map +0 -1
- package/dist/chunk-UKKSMZYT.js.map +0 -1
- 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.
|
|
65
|
-
|
|
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
|
-
|
|
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={
|
|
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`,
|
|
117
|
-
`.kui-workbench__panel-content`,
|
|
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
|
-
|
|
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.
|
|
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
|
|
151
|
-
//
|
|
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":"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","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"]}
|