@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
|
@@ -38,6 +38,29 @@ function tabsIn(bar) {
|
|
|
38
38
|
function reveal(tab) {
|
|
39
39
|
tab?.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
40
40
|
}
|
|
41
|
+
function revealInStrip(tab) {
|
|
42
|
+
const strip = tab.closest("[data-kui-tab-list]");
|
|
43
|
+
if (!strip || strip.scrollWidth <= strip.clientWidth) return;
|
|
44
|
+
const bounds = strip.getBoundingClientRect();
|
|
45
|
+
const box = tab.getBoundingClientRect();
|
|
46
|
+
if (box.left < bounds.left) strip.scrollLeft -= bounds.left - box.left;
|
|
47
|
+
else if (box.right > bounds.right)
|
|
48
|
+
strip.scrollLeft += Math.min(
|
|
49
|
+
box.right - bounds.right,
|
|
50
|
+
box.left - bounds.left
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
function selectedTabs(root) {
|
|
54
|
+
const selected = /* @__PURE__ */ new Map();
|
|
55
|
+
root.querySelectorAll(
|
|
56
|
+
'[data-kui-tab-list] [role="tab"][aria-selected="true"]'
|
|
57
|
+
).forEach((button) => {
|
|
58
|
+
const tab = tabRoot(button);
|
|
59
|
+
const bar = tab && tabBar(tab);
|
|
60
|
+
if (bar && !selected.has(bar)) selected.set(bar, button);
|
|
61
|
+
});
|
|
62
|
+
return selected;
|
|
63
|
+
}
|
|
41
64
|
function wireTabBars(root, { onReorder, activation = "automatic" }) {
|
|
42
65
|
const ownerDocument = root.nodeType === 9 ? root : root.ownerDocument;
|
|
43
66
|
const view = ownerDocument.defaultView;
|
|
@@ -264,8 +287,35 @@ function wireTabBars(root, { onReorder, activation = "automatic" }) {
|
|
|
264
287
|
root.querySelectorAll(
|
|
265
288
|
'[data-kui-tab-list] [role="tab"][aria-selected="true"]'
|
|
266
289
|
).forEach(reveal);
|
|
290
|
+
const selectedIds = /* @__PURE__ */ new Map();
|
|
291
|
+
const recordSelection = () => {
|
|
292
|
+
const changed = [];
|
|
293
|
+
for (const [bar, button] of selectedTabs(root)) {
|
|
294
|
+
const id = barId(bar);
|
|
295
|
+
const tab = tabRoot(button);
|
|
296
|
+
const selectedId = tab && tabId(tab);
|
|
297
|
+
if (!id || !selectedId) continue;
|
|
298
|
+
if (selectedIds.has(id) && selectedIds.get(id) !== selectedId)
|
|
299
|
+
changed.push(button);
|
|
300
|
+
selectedIds.set(id, selectedId);
|
|
301
|
+
}
|
|
302
|
+
return changed;
|
|
303
|
+
};
|
|
304
|
+
recordSelection();
|
|
305
|
+
const selectionObserver = new view.MutationObserver(() => {
|
|
306
|
+
if (disposed) return;
|
|
307
|
+
for (const button of recordSelection())
|
|
308
|
+
if (ownerDocument.activeElement !== button) revealInStrip(button);
|
|
309
|
+
});
|
|
310
|
+
selectionObserver.observe(root, {
|
|
311
|
+
subtree: true,
|
|
312
|
+
childList: true,
|
|
313
|
+
attributes: true,
|
|
314
|
+
attributeFilter: ["aria-selected"]
|
|
315
|
+
});
|
|
267
316
|
return () => {
|
|
268
317
|
disposed = true;
|
|
318
|
+
selectionObserver.disconnect();
|
|
269
319
|
clear();
|
|
270
320
|
root.removeEventListener("dragstart", onDragStart);
|
|
271
321
|
root.removeEventListener("dragover", onDragOver);
|
|
@@ -278,4 +328,4 @@ function wireTabBars(root, { onReorder, activation = "automatic" }) {
|
|
|
278
328
|
|
|
279
329
|
export { reorderTabs, wireTabBars };
|
|
280
330
|
|
|
281
|
-
//# sourceMappingURL=chunk-
|
|
331
|
+
//# sourceMappingURL=chunk-46263QLK.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/wire-tab-bars.ts"],"names":["target"],"mappings":"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","file":"chunk-46263QLK.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/**\n * Scroll a tab's own strip, and nothing else, so the tab is fully visible.\n * Used for selection changes the application makes without focus (adding and\n * selecting a tab): unlike `scrollIntoView`, it never scrolls the page to a\n * bar that is out of view.\n */\nfunction revealInStrip(tab: HTMLElement): void {\n const strip = tab.closest<HTMLElement>('[data-kui-tab-list]');\n if (!strip || strip.scrollWidth <= strip.clientWidth) return;\n const bounds = strip.getBoundingClientRect();\n const box = tab.getBoundingClientRect();\n if (box.left < bounds.left) strip.scrollLeft -= bounds.left - box.left;\n else if (box.right > bounds.right)\n strip.scrollLeft += Math.min(\n box.right - bounds.right,\n box.left - bounds.left,\n );\n}\n\n/** The selected tab button of every bar below root, keyed by bar. */\nfunction selectedTabs(root: HTMLElement | Document) {\n const selected = new Map<TabBarRoot, HTMLElement>();\n root\n .querySelectorAll<HTMLElement>(\n '[data-kui-tab-list] [role=\"tab\"][aria-selected=\"true\"]',\n )\n .forEach((button) => {\n const tab = tabRoot(button);\n const bar = tab && tabBar(tab);\n if (bar && !selected.has(bar)) selected.set(bar, button);\n });\n return selected;\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 // Reveal a tab the application selects without focus (for example a tab it\n // adds and selects) once its controlled render lands. Only a change of a\n // bar's selected tab reveals, so a re-render that keeps the selection never\n // pulls a strip the user scrolled back to it.\n const selectedIds = new Map<string, string>();\n const recordSelection = () => {\n const changed: HTMLElement[] = [];\n for (const [bar, button] of selectedTabs(root)) {\n const id = barId(bar);\n const tab = tabRoot(button);\n const selectedId = tab && tabId(tab);\n if (!id || !selectedId) continue;\n if (selectedIds.has(id) && selectedIds.get(id) !== selectedId)\n changed.push(button);\n selectedIds.set(id, selectedId);\n }\n return changed;\n };\n recordSelection();\n const selectionObserver = new view.MutationObserver(() => {\n if (disposed) return;\n for (const button of recordSelection())\n if (ownerDocument.activeElement !== button) revealInStrip(button);\n });\n selectionObserver.observe(root, {\n subtree: true,\n childList: true,\n attributes: true,\n attributeFilter: ['aria-selected'],\n });\n\n return () => {\n disposed = true;\n selectionObserver.disconnect();\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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/floating-toolbar.tsx"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"sources":["../src/floating-toolbar.tsx"],"names":[],"mappings":";;;AAiCO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,YAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,gBAAA,EAAe,kBAAA;AAAA,MACf,eAAA,EAAe,QAAA;AAAA,MACf,IAAA,EAAK,SAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-5NDQABWK.js","sourcesContent":["import type { KerfUiContent } from './semantic-content.js';\n\n/** Where a {@link FloatingToolbar} floats within its positioned container. */\nexport type FloatingToolbarPosition =\n 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n\nexport interface FloatingToolbarProps {\n /** Toolbar contents — normally one or more `ToolbarControlGroup`s. */\n children: KerfUiContent;\n /** Accessible name for the toolbar (required — it exposes `role=\"toolbar\"`). */\n label: string;\n /**\n * Corner or edge it floats to inside its nearest positioned ancestor.\n * Default: `'bottom-end'`.\n */\n position?: FloatingToolbarPosition;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A toolbar that floats above the main content of its nearest positioned\n * ancestor — a transparent, forced-dark cluster of controls (e.g. a drawer\n * restore button) that sits over the content but NOT over dialogs or overlays\n * (it is not in the top layer). It is inset from the container edges by\n * `--kui-floating-toolbar-inset` (default `--kui-space-m`, i.e. 8px more than a\n * top toolbar's own inset); override that token, on the toolbar or an\n * ancestor, to move it. Inside a `Workbench`, `CollapsiblePanel`, or\n * `ResizableRegion` restore corner the corner owns the inset, so the toolbar\n * floats from the corner's own position. The app owns the controls and their\n * behavior — wire them with `delegate()` as usual.\n */\nexport function FloatingToolbar({\n children,\n label,\n position = 'bottom-end',\n className = '',\n slot,\n}: FloatingToolbarProps) {\n return (\n <div\n class={`kui-floating-toolbar ${className}`.trim()}\n data-component=\"floating-toolbar\"\n data-position={position}\n role=\"toolbar\"\n aria-label={label}\n slot={slot}\n >\n {children}\n </div>\n );\n}\n"]}
|
|
@@ -51,8 +51,8 @@ function AppTab({
|
|
|
51
51
|
const dormant = placeholder || pending;
|
|
52
52
|
const named = pending && !placeholder;
|
|
53
53
|
const keyshortcuts = [
|
|
54
|
-
closable ? "Delete Backspace" : "",
|
|
55
|
-
draggable ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : ""
|
|
54
|
+
closable && !dormant ? "Delete Backspace" : "",
|
|
55
|
+
draggable && !dormant ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : ""
|
|
56
56
|
].filter(Boolean).join(" ");
|
|
57
57
|
const extensionAttributes = filterDataAttributes(
|
|
58
58
|
rootAttributes,
|
|
@@ -97,11 +97,11 @@ function AppTab({
|
|
|
97
97
|
role: "tab",
|
|
98
98
|
"aria-selected": String(selected),
|
|
99
99
|
"aria-label": presentation === "icon-only" || named ? name : void 0,
|
|
100
|
-
"aria-keyshortcuts":
|
|
101
|
-
"data-action":
|
|
100
|
+
"aria-keyshortcuts": keyshortcuts || void 0,
|
|
101
|
+
"data-action": placeholder ? void 0 : selectAction,
|
|
102
102
|
"data-tab-id": id,
|
|
103
|
-
disabled:
|
|
104
|
-
tabindex:
|
|
103
|
+
disabled: placeholder || void 0,
|
|
104
|
+
tabindex: !placeholder && selected ? "0" : "-1",
|
|
105
105
|
children: [
|
|
106
106
|
leading,
|
|
107
107
|
/* @__PURE__ */ jsx(
|
|
@@ -123,4 +123,4 @@ function AppTab({
|
|
|
123
123
|
|
|
124
124
|
export { AppTab };
|
|
125
125
|
|
|
126
|
-
//# sourceMappingURL=chunk-
|
|
126
|
+
//# sourceMappingURL=chunk-NE5JAOQS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-NE5JAOQS.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 * Named and still opening: the tab is known but its content is loading.\n * Keeps `name` visible in the quiet text color and as the tab's accessible\n * name, shows `trailing` (for example a `LoadingSpinner`), and marks the\n * tab `aria-busy`. Unlike `placeholder` it stays selectable — the\n * application shows placeholder content in its panel until loading\n * completes — while close and dragging stay disabled. Same pill geometry\n * as 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 disable close and dragging; a `placeholder` (unknown\n // tab) is also unselectable and hides its name, while a `pending` (known,\n // still opening) tab stays selectable so its panel can show placeholders.\n const dormant = placeholder || pending;\n const named = pending && !placeholder;\n const keyshortcuts = [\n closable && !dormant ? 'Delete Backspace' : '',\n draggable && !dormant ? '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={keyshortcuts || undefined}\n data-action={placeholder ? undefined : selectAction}\n data-tab-id={id}\n disabled={placeholder || undefined}\n tabindex={!placeholder && 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"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// src/workbench-resize.ts
|
|
2
|
+
var SLUGS = {
|
|
3
|
+
leftRail: "left-rail",
|
|
4
|
+
rightRail: "right-rail",
|
|
5
|
+
bottomDrawer: "bottom-drawer"
|
|
6
|
+
};
|
|
7
|
+
var workbenchRegionId = (id, panel) => `${id}-${SLUGS[panel]}`;
|
|
8
|
+
var WORKBENCH_RESIZE_DEFAULTS = {
|
|
9
|
+
leftRail: { size: 280, min: 180, max: 480 },
|
|
10
|
+
rightRail: { size: 280, min: 180, max: 480 },
|
|
11
|
+
bottomDrawer: { size: 220, min: 120, max: 480 }
|
|
12
|
+
};
|
|
13
|
+
var WORKBENCH_MAIN_MIN_SIZE = 320;
|
|
14
|
+
var WORKBENCH_MAIN_MIN_HEIGHT = 120;
|
|
15
|
+
|
|
16
|
+
export { WORKBENCH_MAIN_MIN_HEIGHT, WORKBENCH_MAIN_MIN_SIZE, WORKBENCH_RESIZE_DEFAULTS, workbenchRegionId };
|
|
17
|
+
|
|
18
|
+
//# sourceMappingURL=chunk-PSHUSWQH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/workbench-resize.ts"],"names":[],"mappings":";AAMA,IAAM,KAAA,GAA2C;AAAA,EAC/C,QAAA,EAAU,WAAA;AAAA,EACV,SAAA,EAAW,YAAA;AAAA,EACX,YAAA,EAAc;AAChB,CAAA;AAGO,IAAM,iBAAA,GAAoB,CAAC,EAAA,EAAY,KAAA,KAC5C,GAAG,EAAE,CAAA,CAAA,EAAI,KAAA,CAAM,KAAK,CAAC,CAAA;AAGhB,IAAM,yBAAA,GAGT;AAAA,EACF,UAAU,EAAE,IAAA,EAAM,KAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAI;AAAA,EAC1C,WAAW,EAAE,IAAA,EAAM,KAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAI;AAAA,EAC3C,cAAc,EAAE,IAAA,EAAM,KAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA;AAC5C;AAOO,IAAM,uBAAA,GAA0B;AAOhC,IAAM,yBAAA,GAA4B","file":"chunk-PSHUSWQH.js","sourcesContent":["// The resizable-panel contract shared by `Workbench` (which renders it) and\n// `wireWorkbench` (which drives it). Internal.\n\n/** A Workbench panel slot, named after its `WorkbenchProps` prop. */\nexport type WorkbenchPanelKey = 'leftRail' | 'rightRail' | 'bottomDrawer';\n\nconst SLUGS: Record<WorkbenchPanelKey, string> = {\n leftRail: 'left-rail',\n rightRail: 'right-rail',\n bottomDrawer: 'bottom-drawer',\n};\n\n/** The `data-region-id` a resizable panel carries, e.g. `studio-left-rail`. */\nexport const workbenchRegionId = (id: string, panel: WorkbenchPanelKey) =>\n `${id}-${SLUGS[panel]}`;\n\n/** Default size and limits (px) for a panel whose `resizable` omits them. */\nexport const WORKBENCH_RESIZE_DEFAULTS: Record<\n WorkbenchPanelKey,\n { size: number; min: number; max: number }\n> = {\n leftRail: { size: 280, min: 180, max: 480 },\n rightRail: { size: 280, min: 180, max: 480 },\n bottomDrawer: { size: 220, min: 120, max: 480 },\n};\n\n/**\n * Default minimum width (px) a Workbench keeps for its work area beside its\n * inline rails, fixed or resizable: resizable rails stop growing there, and\n * every inline rail shrinks proportionally when the container narrows.\n */\nexport const WORKBENCH_MAIN_MIN_SIZE = 320;\n\n/**\n * Default minimum height (px) a Workbench keeps for its work area above an\n * inline bottom drawer: a resizable drawer stops growing there, and the drawer\n * shrinks when the Workbench gets shorter.\n */\nexport const WORKBENCH_MAIN_MIN_HEIGHT = 120;\n"]}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import { jsxs, Fragment
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
// src/
|
|
4
|
-
var clampRegionSize = (size, min, max) => Math.min(max, Math.max(min, Math.round(size)));
|
|
5
|
-
var resizeRegionFromPointer = (startSize, delta, edge) => startSize + delta * (edge === "start" ? -1 : 1);
|
|
3
|
+
// src/resize-grip.tsx
|
|
6
4
|
function ResizeGrip({ axis }) {
|
|
7
5
|
return /* @__PURE__ */ jsx(
|
|
8
6
|
"svg",
|
|
@@ -23,6 +21,8 @@ function ResizeGrip({ axis }) {
|
|
|
23
21
|
}
|
|
24
22
|
);
|
|
25
23
|
}
|
|
24
|
+
var clampRegionSize = (size, min, max) => Math.min(max, Math.max(min, Math.round(size)));
|
|
25
|
+
var resizeRegionFromPointer = (startSize, delta, edge) => startSize + delta * (edge === "start" ? -1 : 1);
|
|
26
26
|
function ResizableRegion({
|
|
27
27
|
id,
|
|
28
28
|
label,
|
|
@@ -64,9 +64,10 @@ function ResizableRegion({
|
|
|
64
64
|
"data-responsive-fill-at": responsiveFillAt,
|
|
65
65
|
style: `--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`,
|
|
66
66
|
"aria-label": label,
|
|
67
|
-
"aria-hidden": presentation === "hidden" ? "true" : void 0,
|
|
67
|
+
"aria-hidden": collapsed || presentation === "hidden" ? "true" : void 0,
|
|
68
|
+
inert: collapsed,
|
|
68
69
|
children: [
|
|
69
|
-
/* @__PURE__ */ jsx("div", { class: "kui-resizable-region__content", children }),
|
|
70
|
+
/* @__PURE__ */ jsx("div", { class: "kui-resizable-region__content", inert: collapsed, children }),
|
|
70
71
|
/* @__PURE__ */ jsx(
|
|
71
72
|
"div",
|
|
72
73
|
{
|
|
@@ -99,6 +100,6 @@ function ResizableRegion({
|
|
|
99
100
|
] });
|
|
100
101
|
}
|
|
101
102
|
|
|
102
|
-
export { ResizableRegion, clampRegionSize, resizeRegionFromPointer };
|
|
103
|
+
export { ResizableRegion, ResizeGrip, clampRegionSize, resizeRegionFromPointer };
|
|
103
104
|
|
|
104
|
-
//# sourceMappingURL=chunk-
|
|
105
|
+
//# sourceMappingURL=chunk-VHADGP3B.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/resize-grip.tsx","../src/resizable-region.tsx"],"names":["jsxs","Fragment","jsx"],"mappings":"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","file":"chunk-VHADGP3B.js","sourcesContent":["import type { ResizableRegionAxis } from './resizable-region.js';\n\n/**\n * The dormant two-line grip a resize separator shows on hover and focus. Shared\n * by `ResizableRegion` and resizable `Workbench` panels so both separators read\n * the same. Internal.\n */\nexport function 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","import type { SafeHtml } from 'kerfjs';\n\nimport { ResizeGrip } from './resize-grip.js';\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 /** Snap the track to zero. The region renders `inert` and `aria-hidden`\n * while collapsed, so neither Tab nor assistive technology reaches it or\n * lands on an empty landmark; `restoreControl` renders outside the region. */\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 corner of the region's container (not the viewport) 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\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 // Collapsed, the labeled region leaves the accessibility tree whole\n // (its content is inert and its separator already hidden), so no\n // empty landmark stays behind; the restore control is a sibling.\n aria-hidden={\n collapsed || presentation === 'hidden' ? 'true' : undefined\n }\n inert={collapsed}\n >\n <div class=\"kui-resizable-region__content\" inert={collapsed}>\n {children}\n </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"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { wireResizeHandles } from './chunk-3CGQ7ZNO.js';
|
|
2
|
+
|
|
3
|
+
// src/wire-resizable-regions.ts
|
|
4
|
+
function wireResizableRegions(root, options) {
|
|
5
|
+
return wireResizeHandles(
|
|
6
|
+
root,
|
|
7
|
+
options,
|
|
8
|
+
'[data-component="resizable-region"]'
|
|
9
|
+
);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export { wireResizableRegions };
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=chunk-XQV2B4IL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/wire-resizable-regions.ts"],"names":[],"mappings":";;;AASO,SAAS,oBAAA,CACd,MACA,OAAA,EACA;AACA,EAAA,OAAO,iBAAA;AAAA,IACL,IAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACF;AACF","file":"chunk-XQV2B4IL.js","sourcesContent":["import {\n type ResizeCommit,\n type WireResizableRegionsOptions,\n wireResizeHandles,\n} from './resize-wiring.js';\n\nexport type { ResizeCommit, WireResizableRegionsOptions };\n\n/** Wire pointer and separator-keyboard behavior for every ResizableRegion below root. */\nexport function wireResizableRegions(\n root: HTMLElement,\n options: WireResizableRegionsOptions,\n) {\n return wireResizeHandles(\n root,\n options,\n '[data-component=\"resizable-region\"]',\n );\n}\n"]}
|
|
@@ -57,7 +57,7 @@ interface CollapsiblePanelProps {
|
|
|
57
57
|
collapseMotion?: ResizableRegionCollapseMotion;
|
|
58
58
|
contentOverflow?: ResizableRegionContentOverflow;
|
|
59
59
|
presentation?: ResizableRegionPresentation;
|
|
60
|
-
/** Control shown in a safe-area-aware
|
|
60
|
+
/** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */
|
|
61
61
|
restoreControl?: SafeHtml;
|
|
62
62
|
restorePosition?: ResizableRegionRestorePosition;
|
|
63
63
|
className?: string;
|
|
@@ -69,7 +69,11 @@ interface CollapsiblePanelProps {
|
|
|
69
69
|
* slides out via `transform` (one reflow, composited — the same technique
|
|
70
70
|
* `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored
|
|
71
71
|
* to the panel's fixed bottom edge, so the track cannot move its layout origin
|
|
72
|
-
* underneath the transform transition.
|
|
72
|
+
* underneath the transform transition. A collapsed panel renders `inert` (with
|
|
73
|
+
* `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches
|
|
74
|
+
* content that has slid out of view; its `restoreControl` renders outside the
|
|
75
|
+
* panel and stays reachable.
|
|
76
|
+
* The app owns the `collapsed` signal;
|
|
73
77
|
* pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,
|
|
74
78
|
* and persistence semantics, and with `CollapsiblePanelToggle` for the standard
|
|
75
79
|
* affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.
|
|
@@ -65,6 +65,7 @@ function CollapsiblePanel({
|
|
|
65
65
|
"data-presentation": presentation,
|
|
66
66
|
"aria-label": label || void 0,
|
|
67
67
|
"aria-hidden": collapsed || presentation === "hidden" ? "true" : void 0,
|
|
68
|
+
inert: collapsed,
|
|
68
69
|
style: size ? `${sizeVar}: ${size}px` : void 0,
|
|
69
70
|
children: /* @__PURE__ */ jsx("div", { class: "kui-collapsible-panel__content", children })
|
|
70
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/collapsible-panel.tsx"],"names":[],"mappings":";;;;AA8BO,SAAS,0BAAA,CACd,MACA,SAAA,EACkE;AAClE,EAAA,IAAI,IAAA,KAAS,MAAA;AACX,IAAA,OAAO,SAAA,GACH,EAAE,IAAA,EAAM,aAAA,EAAe,IAAA,EAAM,iBAAA,EAAkB,GAC/C,EAAE,IAAA,EAAM,cAAA,EAAgB,IAAA,EAAM,kBAAA,EAAmB;AACvD,EAAA,IAAI,IAAA,KAAS,OAAA;AACX,IAAA,OAAO,SAAA,GACH,EAAE,IAAA,EAAM,cAAA,EAAgB,IAAA,EAAM,kBAAA,EAAmB,GACjD,EAAE,IAAA,EAAM,eAAA,EAAiB,IAAA,EAAM,mBAAA,EAAoB;AACzD,EAAA,OAAO,SAAA,GACH,EAAE,IAAA,EAAM,eAAA,EAAiB,IAAA,EAAM,mBAAA,EAAoB,GACnD,EAAE,IAAA,EAAM,gBAAA,EAAkB,IAAA,EAAM,oBAAA,EAAqB;AAC3D;AAyBO,SAAS,sBAAA,CAAuB;AAAA,EACrC,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAgC;AAC9B,EAAA,MAAM,KAAA,GAAQ,0BAAA,CAA2B,IAAA,EAAM,SAAS,CAAA;AACxD,EAAA,MAAM,UAAA,GAAa,KAAA,KAAU,SAAA,GAAY,QAAA,GAAW,UAAA,CAAA;AACpD,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,KAAA,EAAO,CAAA,8BAAA,EAAiC,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACzD,aAAA,EAAa,MAAA;AAAA,MACb,yBAAA,EAAyB,OAAA;AAAA,MACzB,eAAA,EAAe,MAAA,CAAO,CAAC,SAAS,CAAA;AAAA,MAChC,YAAA,EAAY,UAAA;AAAA,MACZ,IAAA;AAAA,MAEA,8BAAC,UAAA,EAAA,EAAW,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM;AAAA;AAAA,GAClD;AAEJ;
|
|
1
|
+
{"version":3,"sources":["../src/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n PanelBottomClose,\n PanelBottomOpen,\n PanelLeftClose,\n PanelLeftOpen,\n PanelRightClose,\n PanelRightOpen,\n} from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\nimport type {\n ResizableRegionCollapseMotion,\n ResizableRegionContentOverflow,\n ResizableRegionPresentation,\n ResizableRegionRestorePosition,\n ResizableRegionSeparator,\n} from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = 'left' | 'right' | 'bottom';\n\n/**\n * The standard collapse/expand icon for a panel `side` and `collapsed` state,\n * so every app's sidebars and drawers use one recognizable convention:\n * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`\n * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while\n * collapsed. Exposed so an app can render its own toggle affordance.\n */\nexport function collapsiblePanelToggleIcon(\n side: CollapsiblePanelSide,\n collapsed: boolean,\n): { icon: Parameters<typeof LucideIcon>[0]['icon']; name: string } {\n if (side === 'left')\n return collapsed\n ? { icon: PanelLeftOpen, name: 'panel-left-open' }\n : { icon: PanelLeftClose, name: 'panel-left-close' };\n if (side === 'right')\n return collapsed\n ? { icon: PanelRightOpen, name: 'panel-right-open' }\n : { icon: PanelRightClose, name: 'panel-right-close' };\n return collapsed\n ? { icon: PanelBottomOpen, name: 'panel-bottom-open' }\n : { icon: PanelBottomClose, name: 'panel-bottom-close' };\n}\n\nexport interface CollapsiblePanelToggleProps {\n /** The panel this toggle controls. */\n side: CollapsiblePanelSide;\n /** The panel's current collapsed state (drives the icon direction). */\n collapsed: boolean;\n /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n action: string;\n /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n panelId?: string;\n /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n label?: string;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n side,\n collapsed,\n action,\n panelId,\n label,\n className = '',\n slot,\n}: CollapsiblePanelToggleProps) {\n const glyph = collapsiblePanelToggleIcon(side, collapsed);\n const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n return (\n <button\n type=\"button\"\n class={`kui-collapsible-panel__toggle ${className}`.trim()}\n data-action={action}\n data-collapsible-target={panelId}\n aria-expanded={String(!collapsed)}\n aria-label={accessible}\n slot={slot}\n >\n <LucideIcon icon={glyph.icon} name={glyph.name} />\n </button>\n );\n}\n\nexport interface CollapsiblePanelProps {\n /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n id: string;\n /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n side: CollapsiblePanelSide;\n /** Whether the panel is currently collapsed (the app owns this signal). */\n collapsed?: boolean;\n /** Rail width or drawer height in px. Overrides the CSS default. */\n size?: number;\n /** Accessible label for the panel region. */\n label?: string;\n /** Panel content. */\n children?: KerfUiContent;\n separator?: ResizableRegionSeparator;\n collapseMotion?: ResizableRegionCollapseMotion;\n contentOverflow?: ResizableRegionContentOverflow;\n presentation?: ResizableRegionPresentation;\n /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n restoreControl?: SafeHtml;\n restorePosition?: ResizableRegionRestorePosition;\n className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n id,\n side,\n collapsed = false,\n size,\n label,\n children,\n separator = 'auto',\n collapseMotion = 'slide',\n contentOverflow = 'clip',\n presentation = 'inline',\n restoreControl,\n restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n className = '',\n}: CollapsiblePanelProps) {\n const sizeVar =\n side === 'bottom'\n ? '--kui-collapsible-panel-height'\n : '--kui-collapsible-panel-width';\n return (\n <>\n <aside\n class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n data-component=\"collapsible-panel\"\n data-collapsible-panel={id}\n data-side={side}\n data-collapsed={String(collapsed)}\n data-separator={separator}\n data-collapse-motion={collapseMotion}\n data-content-overflow={contentOverflow}\n data-presentation={presentation}\n aria-label={label || undefined}\n aria-hidden={\n collapsed || presentation === 'hidden' ? 'true' : undefined\n }\n inert={collapsed}\n style={size ? `${sizeVar}: ${size}px` : undefined}\n >\n <div class=\"kui-collapsible-panel__content\">{children}</div>\n </aside>\n {collapsed && restoreControl && presentation !== 'hidden' && (\n <div\n class=\"kui-collapsible-panel__restore\"\n data-panel-restore={id}\n data-position={restorePosition}\n >\n {restoreControl}\n </div>\n )}\n </>\n );\n}\n"]}
|
|
@@ -23,8 +23,11 @@ interface FloatingToolbarProps {
|
|
|
23
23
|
* restore button) that sits over the content but NOT over dialogs or overlays
|
|
24
24
|
* (it is not in the top layer). It is inset from the container edges by
|
|
25
25
|
* `--kui-floating-toolbar-inset` (default `--kui-space-m`, i.e. 8px more than a
|
|
26
|
-
* top toolbar's own inset); override that token
|
|
27
|
-
*
|
|
26
|
+
* top toolbar's own inset); override that token, on the toolbar or an
|
|
27
|
+
* ancestor, to move it. Inside a `Workbench`, `CollapsiblePanel`, or
|
|
28
|
+
* `ResizableRegion` restore corner the corner owns the inset, so the toolbar
|
|
29
|
+
* floats from the corner's own position. The app owns the controls and their
|
|
30
|
+
* behavior — wire them with `delegate()` as usual.
|
|
28
31
|
*/
|
|
29
32
|
declare function FloatingToolbar({ children, label, position, className, slot, }: FloatingToolbarProps): kerfjs.SafeHtml;
|
|
30
33
|
|
package/dist/floating-toolbar.js
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export { wireTokenSearchFields } from './chunk-CMUIXJZM.js';
|
|
2
2
|
export { ValueTable, ValueTableRow } from './chunk-44IG7PFV.js';
|
|
3
|
-
export { wireResizableRegions } from './chunk-
|
|
4
|
-
|
|
3
|
+
export { wireResizableRegions } from './chunk-XQV2B4IL.js';
|
|
4
|
+
|
|
5
|
+
export { reorderTabs, wireTabBars } from './chunk-46263QLK.js';
|
|
5
6
|
export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
|
|
6
7
|
export { TabBar } from './chunk-N3GKMPDW.js';
|
|
7
8
|
export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-HJKRCKDR.js';
|
|
@@ -10,15 +11,15 @@ export { Select } from './chunk-T22EM4ET.js';
|
|
|
10
11
|
export { Spacer } from './chunk-ZMBU522F.js';
|
|
11
12
|
export { StateBanner } from './chunk-BJJKFVWW.js';
|
|
12
13
|
export { SunkenPanel } from './chunk-6ZXOQEAN.js';
|
|
13
|
-
export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-
|
|
14
|
+
export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-VHADGP3B.js';
|
|
14
15
|
export { Row } from './chunk-5I22LMCV.js';
|
|
15
16
|
export { EmptyState } from './chunk-E36EVCKG.js';
|
|
16
|
-
export { FloatingToolbar } from './chunk-
|
|
17
|
+
export { FloatingToolbar } from './chunk-5NDQABWK.js';
|
|
17
18
|
export { Grid } from './chunk-C2FAYFDE.js';
|
|
18
19
|
export { ListActionRow } from './chunk-RNZAKSME.js';
|
|
19
20
|
export { ListInsetControl } from './chunk-D7GWXIAS.js';
|
|
20
21
|
export { ListInsetText } from './chunk-ZK5EGVFP.js';
|
|
21
|
-
export { AppTab } from './chunk-
|
|
22
|
+
export { AppTab } from './chunk-NE5JAOQS.js';
|
|
22
23
|
export { ToolbarActionLink, ToolbarControlGroup } from './chunk-ZIYOJFZD.js';
|
|
23
24
|
export { Toolbar } from './chunk-MTM43SJO.js';
|
|
24
25
|
export { ListItem } from './chunk-GUIHMIT2.js';
|
|
@@ -17,6 +17,9 @@ interface ResizableRegionProps {
|
|
|
17
17
|
max: number;
|
|
18
18
|
axis?: ResizableRegionAxis;
|
|
19
19
|
edge?: ResizableRegionEdge;
|
|
20
|
+
/** Snap the track to zero. The region renders `inert` and `aria-hidden`
|
|
21
|
+
* while collapsed, so neither Tab nor assistive technology reaches it or
|
|
22
|
+
* lands on an empty landmark; `restoreControl` renders outside the region. */
|
|
20
23
|
collapsed?: boolean;
|
|
21
24
|
transitioning?: boolean;
|
|
22
25
|
/** Whether the separator line is painted. The resize hit target remains available. */
|
|
@@ -29,7 +32,7 @@ interface ResizableRegionProps {
|
|
|
29
32
|
presentation?: ResizableRegionPresentation;
|
|
30
33
|
/** Always-available control rendered while collapsed, outside the clipped region. */
|
|
31
34
|
restoreControl?: SafeHtml;
|
|
32
|
-
/** Safe-area-aware viewport
|
|
35
|
+
/** Safe-area-aware corner of the region's container (not the viewport) for `restoreControl`. */
|
|
33
36
|
restorePosition?: ResizableRegionRestorePosition;
|
|
34
37
|
/** Fill the available inline track and hide the separator below a container breakpoint. */
|
|
35
38
|
responsiveFillAt?: ResizableRegionResponsiveFillAt;
|
package/dist/resizable-region.js
CHANGED
package/dist/split-view.js
CHANGED