@kerfjs/ui 5.0.0-beta.83 → 5.0.0-beta.85
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/ai/component-catalog.json +6 -2
- package/ai/component-composition.json +8 -1
- package/ai/components/pane.md +4 -2
- package/ai/public-api-signatures-v1.md +9 -9
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/dist/catalog-resources.d.ts +2 -2
- package/dist/catalog.d.ts +3 -3
- package/dist/catalog.js +1 -1
- package/dist/{chunk-EA5R75B5.js → chunk-KL3W6FUN.js} +2 -2
- package/dist/{chunk-EA5R75B5.js.map → chunk-KL3W6FUN.js.map} +1 -1
- package/dist/{chunk-3BXDWEGB.js → chunk-SJW5BCEQ.js} +3 -1
- package/dist/chunk-SJW5BCEQ.js.map +1 -0
- package/dist/{nav-stack-B1Qc2e5q.d.ts → nav-stack-BvSKY448.d.ts} +10 -2
- package/dist/nav-stack.d.ts +1 -1
- package/dist/nav-stack.js +1 -1
- package/dist/split-view.d.ts +1 -1
- package/dist/split-view.js +1 -1
- package/dist/styles/catalog/components/catalog-example.css +0 -1
- package/dist/styles/catalog/components/catalog-stage.css +16 -2
- package/dist/styles/components/layout/pane/pane.css +15 -0
- package/dist/styles/components/layout/workbench/workbench.css +17 -0
- package/dist/styles/components/navigation/nav-stack/nav-stack.css +21 -5
- package/dist/styles/nav-stack.css +21 -5
- package/dist/styles/pane.css +15 -0
- package/dist/styles/workbench.css +17 -0
- package/dist/{types-CXrh9Wyx.d.ts → types-Bn-dXLcs.d.ts} +1 -1
- package/dist/workbench.d.ts +1 -1
- package/dist/workbench.js +1 -1
- package/docs/catalog.md +2 -1
- package/docs/layout.md +6 -0
- package/docs/nav-stack.md +13 -4
- package/docs/ux-demo.md +2 -2
- package/docs/workbench.md +2 -0
- package/package.json +1 -1
- package/dist/chunk-3BXDWEGB.js.map +0 -1
|
@@ -625,7 +625,8 @@
|
|
|
625
625
|
"A pane boundary needs an opt-in separator on any combination of logical sides.",
|
|
626
626
|
"Pinned chrome needs a divider from the scrolling content only while content is scrolled beneath it (wireScrollDividers).",
|
|
627
627
|
"A lowered background must cover the scrolling work viewport and blank space after short content without a second scroll container (appearance: sunken).",
|
|
628
|
-
"A child table or other component needs edge-to-edge decoration with text aligned to other pane content."
|
|
628
|
+
"A child table or other component needs edge-to-edge decoration with text aligned to other pane content.",
|
|
629
|
+
"An opaque edge-to-edge child needs a reserved vertical scrollbar gutter."
|
|
629
630
|
],
|
|
630
631
|
"avoidWhen": [
|
|
631
632
|
"Do not use Pane as a padded card or add a competing scroll owner around its content slot.",
|
|
@@ -647,6 +648,7 @@
|
|
|
647
648
|
"responsive placement and visibility",
|
|
648
649
|
"whether the chrome dividers follow the scroll, always show, or never show (chromeDividers)",
|
|
649
650
|
"default or sunken scrolling work surface (appearance)",
|
|
651
|
+
"whether to reserve a vertical scrollbar gutter for opaque edge-to-edge content (--kui-pane-scrollbar-gutter)",
|
|
650
652
|
"optional keyboard or programmatic focus (tabIndex) and persistent focus outline (outlined)"
|
|
651
653
|
],
|
|
652
654
|
"variants": [
|
|
@@ -672,7 +674,8 @@
|
|
|
672
674
|
"The pane is unpadded; separators are independently opt-in on logical edges and default off.",
|
|
673
675
|
"Safe areas: the root and separators paint through unsafe areas while header, content, and footer pad the sides the pane still reaches (routed by --kui-edge-inset-*); content block insets are scroll padding.",
|
|
674
676
|
"The scrolling content exposes its resolved logical inline padding to descendants as --kui-pane-content-inset-inline-start/end, including safe areas and deepInset.",
|
|
675
|
-
"deepInset adds --kui-space-xs to every side of the scrolling content and its block scroll padding; header/footer chrome still owns safe-area padding at its edge."
|
|
677
|
+
"deepInset adds --kui-space-xs to every side of the scrolling content and its block scroll padding; header/footer chrome still owns safe-area padding at its edge.",
|
|
678
|
+
"For opaque edge-to-edge children, --kui-pane-scrollbar-gutter: stable reserves a vertical scrollbar gutter outside the published content insets; the default is auto."
|
|
676
679
|
]
|
|
677
680
|
},
|
|
678
681
|
"delivery": {
|
|
@@ -718,6 +721,7 @@
|
|
|
718
721
|
"--kui-pane-chrome-background",
|
|
719
722
|
"--kui-pane-content-inset-inline-start",
|
|
720
723
|
"--kui-pane-content-inset-inline-end",
|
|
724
|
+
"--kui-pane-scrollbar-gutter",
|
|
721
725
|
"--kui-sunken-panel-background"
|
|
722
726
|
],
|
|
723
727
|
"links": {
|
|
@@ -613,6 +613,11 @@
|
|
|
613
613
|
"owner": "application",
|
|
614
614
|
"required": false
|
|
615
615
|
},
|
|
616
|
+
{
|
|
617
|
+
"id": "whether to reserve a vertical scrollbar gutter for opaque edge-to-edge content (--kui-pane-scrollbar-gutter)",
|
|
618
|
+
"owner": "application",
|
|
619
|
+
"required": false
|
|
620
|
+
},
|
|
616
621
|
{
|
|
617
622
|
"id": "optional keyboard or programmatic focus (tabIndex) and persistent focus outline (outlined)",
|
|
618
623
|
"owner": "application",
|
|
@@ -649,7 +654,8 @@
|
|
|
649
654
|
"The pane is unpadded; separators are independently opt-in on logical edges and default off.",
|
|
650
655
|
"Safe areas: the root and separators paint through unsafe areas while header, content, and footer pad the sides the pane still reaches (routed by --kui-edge-inset-*); content block insets are scroll padding.",
|
|
651
656
|
"The scrolling content exposes its resolved logical inline padding to descendants as --kui-pane-content-inset-inline-start/end, including safe areas and deepInset.",
|
|
652
|
-
"deepInset adds --kui-space-xs to every side of the scrolling content and its block scroll padding; header/footer chrome still owns safe-area padding at its edge."
|
|
657
|
+
"deepInset adds --kui-space-xs to every side of the scrolling content and its block scroll padding; header/footer chrome still owns safe-area padding at its edge.",
|
|
658
|
+
"For opaque edge-to-edge children, --kui-pane-scrollbar-gutter: stable reserves a vertical scrollbar gutter outside the published content insets; the default is auto."
|
|
653
659
|
]
|
|
654
660
|
}
|
|
655
661
|
},
|
|
@@ -679,6 +685,7 @@
|
|
|
679
685
|
"--kui-pane-chrome-background",
|
|
680
686
|
"--kui-pane-content-inset-inline-start",
|
|
681
687
|
"--kui-pane-content-inset-inline-end",
|
|
688
|
+
"--kui-pane-scrollbar-gutter",
|
|
682
689
|
"--kui-sunken-panel-background"
|
|
683
690
|
]
|
|
684
691
|
},
|
package/ai/components/pane.md
CHANGED
|
@@ -15,6 +15,7 @@ Organize a sidebar, main area, inspector, or dialog column into fixed vertical h
|
|
|
15
15
|
- Pinned chrome needs a divider from the scrolling content only while content is scrolled beneath it (wireScrollDividers).
|
|
16
16
|
- A lowered background must cover the scrolling work viewport and blank space after short content without a second scroll container (appearance: sunken).
|
|
17
17
|
- A child table or other component needs edge-to-edge decoration with text aligned to other pane content.
|
|
18
|
+
- An opaque edge-to-edge child needs a reserved vertical scrollbar gutter.
|
|
18
19
|
|
|
19
20
|
**Not when:**
|
|
20
21
|
|
|
@@ -62,7 +63,7 @@ Zones (a zone is bound to JSX only through its listed prop; never assume the zon
|
|
|
62
63
|
|
|
63
64
|
## State and wiring
|
|
64
65
|
|
|
65
|
-
**The app owns:** root and content semantics; accessible labels; header, content, and footer children; which logical boundaries show separators; which sides may compensate for device safe areas in an app-owned arrangement (safeAreaEdges); responsive placement and visibility; whether the chrome dividers follow the scroll, always show, or never show (chromeDividers); default or sunken scrolling work surface (appearance); optional keyboard or programmatic focus (tabIndex) and persistent focus outline (outlined).
|
|
66
|
+
**The app owns:** root and content semantics; accessible labels; header, content, and footer children; which logical boundaries show separators; which sides may compensate for device safe areas in an app-owned arrangement (safeAreaEdges); responsive placement and visibility; whether the chrome dividers follow the scroll, always show, or never show (chromeDividers); default or sunken scrolling work surface (appearance); whether to reserve a vertical scrollbar gutter for opaque edge-to-edge content (--kui-pane-scrollbar-gutter); optional keyboard or programmatic focus (tabIndex) and persistent focus outline (outlined).
|
|
66
67
|
|
|
67
68
|
**Wiring:** `wireScrollDividers` is optional.
|
|
68
69
|
|
|
@@ -79,6 +80,7 @@ Margin: child · border: conditional · padding: child (layout role: structure).
|
|
|
79
80
|
- Safe areas: the root and separators paint through unsafe areas while header, content, and footer pad the sides the pane still reaches (routed by --kui-edge-inset-\*); content block insets are scroll padding.
|
|
80
81
|
- The scrolling content exposes its resolved logical inline padding to descendants as --kui-pane-content-inset-inline-start/end, including safe areas and deepInset.
|
|
81
82
|
- deepInset adds --kui-space-xs to every side of the scrolling content and its block scroll padding; header/footer chrome still owns safe-area padding at its edge.
|
|
83
|
+
- For opaque edge-to-edge children, --kui-pane-scrollbar-gutter: stable reserves a vertical scrollbar gutter outside the published content insets; the default is auto.
|
|
82
84
|
|
|
83
85
|
## Accessibility
|
|
84
86
|
|
|
@@ -93,7 +95,7 @@ Public class hooks (select for layout placement only, never to change the compon
|
|
|
93
95
|
|
|
94
96
|
Never put `kui-pane`, `kui-pane__content`, `kui-pane__footer`, `kui-pane__header`, `kui-pane__toolbar` on an element you write; render `Pane` instead (`KUI-L103`).
|
|
95
97
|
|
|
96
|
-
Public tokens it reads: `--kui-edge-inset-block-end`, `--kui-edge-inset-block-start`, `--kui-edge-inset-inline-end`, `--kui-edge-inset-inline-start`, `--kui-pane-separator-color`, `--kui-pane-separator-width`, `--kui-pane-chrome-background`, `--kui-pane-content-inset-inline-start`, `--kui-pane-content-inset-inline-end`, `--kui-sunken-panel-background`. Set a token only where its public contract allows; prefer a prop.
|
|
98
|
+
Public tokens it reads: `--kui-edge-inset-block-end`, `--kui-edge-inset-block-start`, `--kui-edge-inset-inline-end`, `--kui-edge-inset-inline-start`, `--kui-pane-separator-color`, `--kui-pane-separator-width`, `--kui-pane-chrome-background`, `--kui-pane-content-inset-inline-start`, `--kui-pane-content-inset-inline-end`, `--kui-pane-scrollbar-gutter`, `--kui-sunken-panel-background`. Set a token only where its public contract allows; prefer a prop.
|
|
97
99
|
|
|
98
100
|
Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
|
|
99
101
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Public API signatures for the UI authoring corpus
|
|
2
2
|
|
|
3
|
-
Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.
|
|
3
|
+
Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.85` and `kerfjs@5.0.0-beta.85`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
|
|
4
4
|
|
|
5
5
|
## `@kerfjs/ui/css-values`
|
|
6
6
|
|
|
@@ -1295,7 +1295,7 @@ export { type ScrollDividerTarget, type WireScrollDividersOptions, wireScrollDiv
|
|
|
1295
1295
|
## `@kerfjs/ui/nav-stack`
|
|
1296
1296
|
|
|
1297
1297
|
```ts
|
|
1298
|
-
export { c as NavStack, N as NavStackProps, d as NavStackToolbarConfig, a as NavStackView, e as NavStackViewBottomToolbar, f as NavStackViewToolbar } from './nav-stack-
|
|
1298
|
+
export { c as NavStack, N as NavStackProps, d as NavStackToolbarConfig, a as NavStackView, e as NavStackViewBottomToolbar, f as NavStackViewToolbar } from './nav-stack-BvSKY448.js';
|
|
1299
1299
|
import 'kerfjs';
|
|
1300
1300
|
import './semantic-content-BbzjvSu9.js';
|
|
1301
1301
|
import './list.js';
|
|
@@ -1338,7 +1338,7 @@ export { type WireNavStackOptions, wireNavStack };
|
|
|
1338
1338
|
```ts
|
|
1339
1339
|
import * as kerfjs from 'kerfjs';
|
|
1340
1340
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
1341
|
-
import { N as NavStackProps, a as NavStackView } from './nav-stack-
|
|
1341
|
+
import { N as NavStackProps, a as NavStackView } from './nav-stack-BvSKY448.js';
|
|
1342
1342
|
import { ResizableRegionProps } from './resizable-region.js';
|
|
1343
1343
|
import './list.js';
|
|
1344
1344
|
import './flex-alignment-4ms8ZbV8.js';
|
|
@@ -1543,7 +1543,7 @@ export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlac
|
|
|
1543
1543
|
```ts
|
|
1544
1544
|
import { SafeHtml } from 'kerfjs';
|
|
1545
1545
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
1546
|
-
import { b as NavPane, N as NavStackProps } from './nav-stack-
|
|
1546
|
+
import { b as NavPane, N as NavStackProps } from './nav-stack-BvSKY448.js';
|
|
1547
1547
|
import { ListConfig } from './list.js';
|
|
1548
1548
|
import { PaneConfig } from './pane.js';
|
|
1549
1549
|
import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
|
|
@@ -2408,14 +2408,14 @@ export { DEFAULT_BREAKPOINTS, type DeviceBreakpoints, type DeviceClass, type Dev
|
|
|
2408
2408
|
```ts
|
|
2409
2409
|
import * as kerfjs from 'kerfjs';
|
|
2410
2410
|
import { SafeHtml } from 'kerfjs';
|
|
2411
|
-
import { a as CatalogProps } from './types-
|
|
2412
|
-
export { b as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogStageRootAttributes } from './types-
|
|
2411
|
+
import { a as CatalogProps } from './types-Bn-dXLcs.js';
|
|
2412
|
+
export { b as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogStageRootAttributes } from './types-Bn-dXLcs.js';
|
|
2413
2413
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
2414
2414
|
import './toolbar.js';
|
|
2415
2415
|
import './sides-BPSWde0A.js';
|
|
2416
2416
|
import './pane.js';
|
|
2417
2417
|
import './workbench.js';
|
|
2418
|
-
import './nav-stack-
|
|
2418
|
+
import './nav-stack-BvSKY448.js';
|
|
2419
2419
|
import './list.js';
|
|
2420
2420
|
import './flex-alignment-4ms8ZbV8.js';
|
|
2421
2421
|
import './css-values.js';
|
|
@@ -2503,14 +2503,14 @@ export { Catalog, CatalogExample, type CatalogExampleAlign, type CatalogExampleP
|
|
|
2503
2503
|
## `@kerfjs/ui/catalog-resources`
|
|
2504
2504
|
|
|
2505
2505
|
```ts
|
|
2506
|
-
import { C as CatalogResource } from './types-
|
|
2506
|
+
import { C as CatalogResource } from './types-Bn-dXLcs.js';
|
|
2507
2507
|
import './toolbar.js';
|
|
2508
2508
|
import 'kerfjs';
|
|
2509
2509
|
import './semantic-content-BbzjvSu9.js';
|
|
2510
2510
|
import './sides-BPSWde0A.js';
|
|
2511
2511
|
import './pane.js';
|
|
2512
2512
|
import './workbench.js';
|
|
2513
|
-
import './nav-stack-
|
|
2513
|
+
import './nav-stack-BvSKY448.js';
|
|
2514
2514
|
import './list.js';
|
|
2515
2515
|
import './flex-alignment-4ms8ZbV8.js';
|
|
2516
2516
|
import './css-values.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Web Awesome JSX signatures for the UI authoring corpus
|
|
2
2
|
|
|
3
|
-
Generated from the emitted `@kerfjs/ui@5.0.0-beta.
|
|
3
|
+
Generated from the emitted `@kerfjs/ui@5.0.0-beta.85` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
|
|
4
4
|
|
|
5
5
|
```ts
|
|
6
6
|
import { KerfCustomElement } from 'kerfjs/jsx-runtime';
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { C as CatalogResource } from './types-
|
|
1
|
+
import { C as CatalogResource } from './types-Bn-dXLcs.js';
|
|
2
2
|
import './toolbar.js';
|
|
3
3
|
import 'kerfjs';
|
|
4
4
|
import './semantic-content-BbzjvSu9.js';
|
|
5
5
|
import './sides-BPSWde0A.js';
|
|
6
6
|
import './pane.js';
|
|
7
7
|
import './workbench.js';
|
|
8
|
-
import './nav-stack-
|
|
8
|
+
import './nav-stack-BvSKY448.js';
|
|
9
9
|
import './list.js';
|
|
10
10
|
import './flex-alignment-4ms8ZbV8.js';
|
|
11
11
|
import './css-values.js';
|
package/dist/catalog.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as kerfjs from 'kerfjs';
|
|
2
2
|
import { SafeHtml } from 'kerfjs';
|
|
3
|
-
import { a as CatalogProps } from './types-
|
|
4
|
-
export { b as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogStageRootAttributes } from './types-
|
|
3
|
+
import { a as CatalogProps } from './types-Bn-dXLcs.js';
|
|
4
|
+
export { b as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogStageRootAttributes } from './types-Bn-dXLcs.js';
|
|
5
5
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
6
6
|
import './toolbar.js';
|
|
7
7
|
import './sides-BPSWde0A.js';
|
|
8
8
|
import './pane.js';
|
|
9
9
|
import './workbench.js';
|
|
10
|
-
import './nav-stack-
|
|
10
|
+
import './nav-stack-BvSKY448.js';
|
|
11
11
|
import './list.js';
|
|
12
12
|
import './flex-alignment-4ms8ZbV8.js';
|
|
13
13
|
import './css-values.js';
|
package/dist/catalog.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { WORKBENCH_MAIN_MIN_SIZE, WORKBENCH_MAIN_MIN_HEIGHT, workbenchRegionId, WORKBENCH_RESIZE_DEFAULTS } from './chunk-S4ZGTDSG.js';
|
|
2
|
-
import { NavStack } from './chunk-
|
|
2
|
+
import { NavStack } from './chunk-SJW5BCEQ.js';
|
|
3
3
|
import { clampRegionSize, ResizeGrip } from './chunk-Y6KT7ZTR.js';
|
|
4
4
|
import { FloatingToolbar } from './chunk-S3ECMF23.js';
|
|
5
5
|
import { panelToggleGroup, composedPanelBody, relocatedPanelGroups } from './chunk-TTGIHMDR.js';
|
|
@@ -503,4 +503,4 @@ function Workbench({
|
|
|
503
503
|
|
|
504
504
|
export { Workbench };
|
|
505
505
|
|
|
506
|
-
//# sourceMappingURL=chunk-
|
|
506
|
+
//# sourceMappingURL=chunk-KL3W6FUN.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/layout/workbench/internal/workbench-toolbars.tsx","../src/components/layout/workbench/workbench.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-EA5R75B5.js","sourcesContent":["import type { KerfUiContent } from '../../../../shared/content/semantic-content.js';\nimport {\n composedPanelBody,\n type PanelBottomToolbar,\n type PanelChromePlacement,\n type PanelSide,\n type PanelToggle,\n type PanelToggleAttributes,\n panelToggleGroup,\n type PanelToolbar,\n relocatedPanelGroups,\n} from '../../../../shared/panels/panel-toolbar.js';\nimport {\n FloatingToolbar,\n type FloatingToolbarPosition,\n} from '../../../actions/floating-toolbar/floating-toolbar.js';\nimport {\n Toolbar,\n type ToolbarConfig,\n} from '../../../actions/toolbar/toolbar.js';\nimport { List, type ListConfig } from '../../../collections/list/list.js';\nimport {\n NavStack,\n type NavStackProps,\n} from '../../../navigation/nav-stack/nav-stack.js';\nimport { Pane, type PaneConfig } from '../../pane/pane.js';\nimport {\n type WorkbenchPanelKey,\n workbenchRegionId,\n} from './workbench-resize.js';\n\n/** The standard toggle a Workbench renders for a panel (see {@link PanelToggle}). */\nexport type WorkbenchPanelToggle = PanelToggle;\n\n/**\n * A Workbench panel's top toolbar, composed by the Workbench so its groups can\n * follow the panel's open state (see {@link PanelToolbar} for the roles).\n * A collapsed rail's marked groups and toggle go to the leading edge of\n * `mainToolbar` (left rail) or its trailing edge (right rail); a collapsed\n * drawer's go to the trailing edge of `mainBottomToolbar`, else to a\n * `FloatingToolbar` in the work area's bottom-end corner.\n */\nexport type WorkbenchPanelToolbar = PanelToolbar;\nexport type WorkbenchPanelBottomToolbar = PanelBottomToolbar;\n\n/**\n * The work area's top toolbar; collapsed rails add their groups to it. Its\n * configuration forwards to its `Toolbar`. It draws no divider of its own by\n * default: the work area's `Pane` draws one under its header chrome, wherever\n * that chrome ends, while `main` is scrolled (`mainPane.chromeDividers`).\n */\nexport interface WorkbenchMainToolbar extends ToolbarConfig {\n label: string;\n /** The work area's title, usually an extra-large `ToolbarText`. */\n title?: KerfUiContent;\n /** Groups after the title. */\n leading?: KerfUiContent;\n center?: KerfUiContent;\n /** Groups at the trailing edge, before a collapsed right rail's groups. */\n trailing?: KerfUiContent;\n}\n\n/**\n * The work area's bottom toolbar; a collapsed drawer adds its groups to it.\n * Its configuration forwards to its `Toolbar`. It draws no divider of its own\n * by default: the work area's `Pane` draws one over its footer chrome while\n * more of `main` lies below (`mainPane.chromeDividers`).\n */\nexport interface WorkbenchMainBottomToolbar extends ToolbarConfig {\n label: string;\n leading?: KerfUiContent;\n center?: KerfUiContent;\n trailing?: KerfUiContent;\n}\n\nconst SIDES: Record<WorkbenchPanelKey, PanelSide> = {\n leftRail: 'left',\n rightRail: 'right',\n bottomDrawer: 'bottom',\n};\n\n/** A panel as far as its toolbar is concerned. */\nexport interface WorkbenchToolbarPanel {\n toolbar?: WorkbenchPanelToolbar;\n navStack?: Omit<\n NavStackProps,\n 'panelToggle' | 'hideToolbar' | 'className' | 'slot'\n >;\n header?: KerfUiContent;\n headerList?: ListConfig;\n headerPlacement?: PanelChromePlacement;\n footer?: KerfUiContent;\n footerList?: ListConfig;\n bottomToolbar?: WorkbenchPanelBottomToolbar;\n footerPlacement?: PanelChromePlacement;\n /** Configuration for the `Pane` a `toolbar` panel's content renders in. */\n pane?: PaneConfig;\n content?: KerfUiContent;\n collapsed?: boolean;\n /** The corner a collapsed panel's restore controls float in. */\n restorePosition?: FloatingToolbarPosition;\n}\n\n/** A Workbench toggle's wiring hooks: its side, morph key, and panel. */\nconst toggleAttributes = (\n workbenchId: string,\n key: WorkbenchPanelKey,\n): PanelToggleAttributes => ({\n 'data-workbench-toggle': SIDES[key],\n // Keyed, so the morph removes a toggle that leaves a toolbar instead of\n // reusing its (possibly focused) button for a different control.\n 'data-key': `${workbenchRegionId(workbenchId, key)}-toggle`,\n 'aria-controls': workbenchRegionId(workbenchId, key),\n});\n\n/**\n * The groups a collapsed panel hands to the work area: its marked groups,\n * then its toggle. Empty while the panel is open or has no toolbar.\n */\nexport function relocatedGroups(\n workbenchId: string,\n key: WorkbenchPanelKey,\n panel: WorkbenchToolbarPanel | undefined,\n): KerfUiContent[] {\n const active = panel?.navStack?.views.at(-1);\n const toolbar =\n active && panel?.toolbar\n ? {\n ...panel.toolbar,\n leading: active.toolbar?.leading,\n center: active.toolbar?.center,\n trailing: active.toolbar?.trailing,\n }\n : panel?.toolbar;\n return relocatedPanelGroups(\n toolbar,\n SIDES[key],\n Boolean(panel?.collapsed),\n toggleAttributes(workbenchId, key),\n );\n}\n\n/**\n * A panel's content, wrapped in a `Pane` under its composed toolbar when it\n * has one (with its optional `footer` below). Without a toolbar the content\n * renders as given.\n */\nexport function panelBody(\n workbenchId: string,\n key: WorkbenchPanelKey,\n panel: WorkbenchToolbarPanel,\n) {\n const toolbar = panel.toolbar;\n if (panel.navStack) {\n const stack = panel.navStack;\n return NavStack({\n ...stack,\n toolbarConfig: {\n label: stack.toolbarConfig?.label ?? toolbar?.label,\n dividerSides:\n stack.toolbarConfig?.dividerSides ?? toolbar?.dividerSides,\n centerAlign: stack.toolbarConfig?.centerAlign ?? toolbar?.centerAlign,\n responsive: stack.toolbarConfig?.responsive ?? toolbar?.responsive,\n responsiveAt:\n stack.toolbarConfig?.responsiveAt ?? toolbar?.responsiveAt,\n safeAreaEdges:\n stack.toolbarConfig?.safeAreaEdges ?? toolbar?.safeAreaEdges,\n titleSize: stack.toolbarConfig?.titleSize,\n headingLevel: stack.toolbarConfig?.headingLevel,\n },\n panelToggle: toolbar?.toggle\n ? panelToggleGroup(\n SIDES[key],\n toolbar.toggle,\n Boolean(panel.collapsed),\n toggleAttributes(workbenchId, key),\n )\n : undefined,\n });\n }\n if (!toolbar) return panel.content;\n return composedPanelBody({\n toolbar,\n side: SIDES[key],\n collapsed: Boolean(panel.collapsed),\n attributes: toggleAttributes(workbenchId, key),\n pane: panel.pane,\n header: panel.header,\n headerList: panel.headerList,\n headerPlacement: panel.headerPlacement,\n footer: panel.footer,\n footerList: panel.footerList,\n bottomToolbar: panel.bottomToolbar,\n footerPlacement: panel.footerPlacement,\n content: panel.content ?? null,\n });\n}\n\n/**\n * The work area's `mainHeader` / `mainFooter` chrome in a `List` carrying the\n * app's configuration; an omitted or `undefined` field keeps the `List`\n * default (no divider: the work area's `Pane` draws its chrome dividers).\n */\nfunction chromeList(content: KerfUiContent, config: ListConfig | undefined) {\n return (\n <List\n dividerSides={config?.dividerSides}\n gap={config?.gap}\n hAlign={config?.hAlign}\n vAlign={config?.vAlign}\n textInsets={config?.textInsets}\n controlInsets={config?.controlInsets}\n >\n {content}\n </List>\n );\n}\n\n/**\n * Whether the work area's header or footer chrome stays pinned (`fixed`),\n * scrolls away with the content (`scroll`), or stays pinned while the work\n * area is tall enough and scrolls with the content when it is short (`auto`,\n * the Pane's `chromePlacement=\"auto\"`; it applies to the pinned header and\n * footer together).\n */\nexport type WorkbenchChromePlacement = PanelChromePlacement;\n\n/**\n * The work area: the app's `main` in a `Pane` (configured by `mainPane`)\n * under `mainToolbar` and any `mainHeader` list, and above any `mainFooter`\n * list and `mainBottomToolbar` (the header and footer lists configured by\n * `mainHeaderList` / `mainFooterList`), with each collapsed panel's groups\n * added to the toolbar on its side. Without any of that chrome, `main`\n * renders as given; only `mainPane.appearance` applies to the Workbench's\n * own scroll region in that case.\n */\nexport function mainBody({\n workbenchId,\n main,\n mainToolbar,\n mainHeader,\n mainFooter,\n mainBottomToolbar,\n mainHeaderPlacement = 'fixed',\n mainFooterPlacement = 'fixed',\n mainPane,\n mainHeaderList,\n mainFooterList,\n leftRail,\n rightRail,\n bottomDrawer,\n}: {\n workbenchId: string;\n main: KerfUiContent;\n mainToolbar?: WorkbenchMainToolbar;\n mainHeader?: KerfUiContent;\n mainFooter?: KerfUiContent;\n mainBottomToolbar?: WorkbenchMainBottomToolbar;\n mainHeaderPlacement?: WorkbenchChromePlacement;\n mainFooterPlacement?: WorkbenchChromePlacement;\n mainPane?: PaneConfig;\n mainHeaderList?: ListConfig;\n mainFooterList?: ListConfig;\n leftRail?: WorkbenchToolbarPanel;\n rightRail?: WorkbenchToolbarPanel;\n bottomDrawer?: WorkbenchToolbarPanel;\n}) {\n if (!mainToolbar && !mainBottomToolbar && !mainHeader && !mainFooter)\n return main;\n const left = relocatedGroups(workbenchId, 'leftRail', leftRail);\n const right = relocatedGroups(workbenchId, 'rightRail', rightRail);\n const drawer = mainBottomToolbar\n ? relocatedGroups(workbenchId, 'bottomDrawer', bottomDrawer)\n : [];\n // The Pane draws one divider under the header chrome and one over the\n // footer chrome, wherever that chrome ends, from the scroll state.\n const header =\n !mainToolbar && !mainHeader ? undefined : (\n <>\n {mainToolbar ? (\n <Toolbar\n label={mainToolbar.label}\n dividerSides={mainToolbar.dividerSides}\n centerAlign={mainToolbar.centerAlign}\n responsive={mainToolbar.responsive}\n responsiveAt={mainToolbar.responsiveAt}\n safeAreaEdges={mainToolbar.safeAreaEdges}\n leading={\n <>\n {left}\n {mainToolbar.title}\n {mainToolbar.leading}\n </>\n }\n center={mainToolbar.center}\n trailing={\n <>\n {mainToolbar.trailing}\n {right}\n </>\n }\n />\n ) : null}\n {mainHeader ? chromeList(mainHeader, mainHeaderList) : null}\n </>\n );\n const footer =\n !mainFooter && !mainBottomToolbar ? undefined : (\n <>\n {mainFooter ? chromeList(mainFooter, mainFooterList) : null}\n {mainBottomToolbar ? (\n <Toolbar\n position=\"footer\"\n label={mainBottomToolbar.label}\n dividerSides={mainBottomToolbar.dividerSides}\n centerAlign={mainBottomToolbar.centerAlign}\n responsive={mainBottomToolbar.responsive}\n responsiveAt={mainBottomToolbar.responsiveAt}\n safeAreaEdges={mainBottomToolbar.safeAreaEdges}\n leading={mainBottomToolbar.leading}\n center={mainBottomToolbar.center}\n trailing={\n <>\n {mainBottomToolbar.trailing}\n {drawer}\n </>\n }\n />\n ) : null}\n </>\n );\n const scrollHeader = mainHeaderPlacement === 'scroll';\n const scrollFooter = mainFooterPlacement === 'scroll';\n return (\n <Pane\n header={scrollHeader ? undefined : header}\n footer={scrollFooter ? undefined : footer}\n chromePlacement={\n mainHeaderPlacement === 'auto' || mainFooterPlacement === 'auto'\n ? 'auto'\n : 'fixed'\n }\n contentElement={mainPane?.contentElement}\n contentLabel={mainPane?.contentLabel}\n separators={mainPane?.separators}\n safeAreaEdges={mainPane?.safeAreaEdges}\n chromeDividers={mainPane?.chromeDividers}\n appearance={mainPane?.appearance}\n deepInset={mainPane?.deepInset}\n tabIndex={mainPane?.tabIndex}\n outlined={mainPane?.outlined}\n >\n {scrollHeader || scrollFooter ? (\n // Chrome that scrolls joins the content in one gapless column that\n // fills the scroller, so it scrolls away with the content.\n <List flex>\n {scrollHeader ? header : null}\n {main}\n {scrollFooter ? footer : null}\n </List>\n ) : (\n main\n )}\n </Pane>\n );\n}\n\n/**\n * A collapsed panel's groups when the work area has no toolbar on its side\n * to take them: a `FloatingToolbar` for the panel's restore corner, so the\n * panel can always be reopened.\n */\nexport function floatingRestore(\n workbenchId: string,\n key: WorkbenchPanelKey,\n panel: WorkbenchToolbarPanel | undefined,\n hasTargetToolbar: boolean,\n) {\n if (hasTargetToolbar) return undefined;\n const groups = relocatedGroups(workbenchId, key, panel);\n if (groups.length === 0) return undefined;\n return (\n <FloatingToolbar\n label={panel!.toolbar!.label}\n position={\n panel!.restorePosition ??\n (key === 'leftRail' ? 'bottom-start' : 'bottom-end')\n }\n >\n {groups}\n </FloatingToolbar>\n );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { ListConfig } from '../../collections/list/list.js';\nimport type { NavStackProps } from '../../navigation/nav-stack/nav-stack.js';\nimport type { PaneConfig } from '../pane/pane.js';\nimport { ResizeGrip } from '../resizable-region/internal/resize-grip.js';\nimport {\n clampRegionSize,\n type ResizableRegionAxis,\n type ResizableRegionCollapseMotion,\n type ResizableRegionContentOverflow,\n type ResizableRegionEdge,\n type ResizableRegionPresentation,\n type ResizableRegionRestorePosition,\n type ResizableRegionSeparator,\n} from '../resizable-region/resizable-region.js';\nimport {\n WORKBENCH_MAIN_MIN_HEIGHT,\n WORKBENCH_MAIN_MIN_SIZE,\n WORKBENCH_RESIZE_DEFAULTS,\n type WorkbenchPanelKey,\n workbenchRegionId,\n} from './internal/workbench-resize.js';\nimport {\n floatingRestore,\n mainBody,\n panelBody,\n type WorkbenchChromePlacement,\n type WorkbenchMainBottomToolbar,\n type WorkbenchMainToolbar,\n type WorkbenchPanelBottomToolbar,\n type WorkbenchPanelToolbar,\n} from './internal/workbench-toolbars.js';\n\nexport type {\n WorkbenchChromePlacement,\n WorkbenchMainBottomToolbar,\n WorkbenchMainToolbar,\n WorkbenchPanelBottomToolbar,\n WorkbenchPanelToggle,\n WorkbenchPanelToolbar,\n} from './internal/workbench-toolbars.js';\n\n/**\n * The Workbench container breakpoint below which a panel presents as an\n * overlay: `narrow` (704px or less) or `compact` (448px or less) — the same\n * breakpoints as `ResizableRegion`'s `responsiveFillAt` — or `never` to keep\n * it inline at every width.\n */\nexport type WorkbenchResponsiveOverlayAt =\n 'compact' | 'narrow' | 'never' | number;\n\n/**\n * How wide a rail's overlay is in a compact (448px or less) Workbench: `inset`\n * fills the Workbench less a dismiss margin on the side away from the rail's\n * edge, so a press beside it closes it; `full` fills the Workbench.\n */\nexport type WorkbenchCompactOverlay = 'inset' | 'full';\n\n/** Drag-resize limits for a resizable Workbench panel, in px. */\nexport interface WorkbenchPanelResizable {\n /** Smallest size (default 180 for a rail, 120 for the drawer). */\n min?: number;\n /** Largest size (default 480). */\n max?: number;\n}\n\n/** Region sizing, collapse, and presentation shared by either panel body. */\ninterface WorkbenchPanelBase {\n /** Whether the panel is currently collapsed (the app owns this). */\n collapsed?: boolean;\n /**\n * Rail width, or drawer height, in px. Overrides the CSS default. For a\n * resizable panel it is the current size (default 280 for a rail, 220 for\n * the drawer), clamped to the limits; the app owns it and `wireWorkbench`\n * reports each resize.\n */\n size?: number;\n /**\n * Opt in to drag and keyboard resizing on the panel's inner separator:\n * `true` for the default limits, or `{ min, max }`. Off by default. Pair it\n * with `wireWorkbench` from `@kerfjs/ui/wire-workbench`.\n */\n resizable?: boolean | WorkbenchPanelResizable;\n /** Accessible name for the panel region. */\n label?: string;\n /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel region. */\n tabIndex?: 0 | -1;\n /** Keep the standard focus outline visible while this panel is expanded. */\n outlined?: boolean;\n separator?: ResizableRegionSeparator;\n collapseMotion?: ResizableRegionCollapseMotion;\n contentOverflow?: ResizableRegionContentOverflow;\n presentation?: ResizableRegionPresentation;\n /**\n * Present the panel as an overlay, without a separator, below a Workbench\n * container breakpoint, and inline above it. `compact` and `narrow` use\n * CSS container queries; a positive number is a pixel threshold measured\n * by `wireWorkbench` and requires a `collapsed` signal. A rail overlays from its side at full\n * height, over the work area and an open drawer; the bottom drawer\n * overlays the bottom of the work-area column. Rails default to `narrow`\n * (pass `never` to keep one inline); the drawer defaults to inline.\n */\n responsiveOverlayAt?: WorkbenchResponsiveOverlayAt;\n /**\n * A rail's overlay width in a compact Workbench (default `inset`: the\n * Workbench less `--kui-workbench-overlay-dismiss-margin`, 44px). Ignored\n * by the drawer.\n */\n compactOverlay?: WorkbenchCompactOverlay;\n /**\n * Control shown while collapsed, in a safe-area-aware corner of the\n * Workbench (not the viewport); the bottom drawer's sits in the work-area\n * column. Prefer `toolbar.toggle`, which the Workbench relocates into the\n * work area's toolbar (or this corner when that toolbar is absent).\n */\n restoreControl?: SafeHtml;\n restorePosition?: ResizableRegionRestorePosition;\n}\n\n/** The original static panel body: one toolbar, optional fixed chrome, and one Pane. */\nexport interface WorkbenchStaticPanel\n extends\n WorkbenchPanelBase,\n NavPane<WorkbenchPanelToolbar, WorkbenchPanelBottomToolbar> {\n /** The composed toolbar; marked groups and its toggle relocate on collapse. */\n toolbar?: WorkbenchPanelToolbar;\n headerPlacement?: WorkbenchChromePlacement;\n footerPlacement?: WorkbenchChromePlacement;\n navStack?: never;\n}\n\n/** A panel whose active NavStack view supplies the toolbar, fixed header, and scroll body. */\nexport interface WorkbenchNavigationPanel extends WorkbenchPanelBase {\n navStack: Omit<\n NavStackProps,\n 'panelToggle' | 'hideToolbar' | 'className' | 'slot'\n >;\n /** Supplies the standard toggle; active view groups precede it and may relocate on collapse. */\n toolbar: Omit<\n WorkbenchPanelToolbar,\n 'title' | 'leading' | 'center' | 'trailing'\n > & {\n toggle: NonNullable<WorkbenchPanelToolbar['toggle']>;\n };\n content?: never;\n header?: never;\n headerList?: never;\n headerPlacement?: never;\n footer?: never;\n footerList?: never;\n bottomToolbar?: never;\n footerPlacement?: never;\n pane?: never;\n}\n\n/** A collapsible Workbench side rail or bottom drawer. */\nexport type WorkbenchPanel = WorkbenchStaticPanel | WorkbenchNavigationPanel;\n\nexport interface WorkbenchProps {\n /**\n * The Workbench's `id`. Each panel's `id` derives from it —\n * `<id>-left-rail`, `<id>-right-rail`, `<id>-bottom-drawer` — so a toggle\n * can name the panel it shows and hides with `aria-controls`.\n */\n id: string;\n label: string;\n /** The central work area. */\n main: KerfUiContent;\n /**\n * The work area's top toolbar. A collapsed left rail's marked groups\n * and toggle lead it; a collapsed right rail's trail it. With it, `main`\n * renders in a `Pane` below the toolbar.\n */\n mainToolbar?: WorkbenchMainToolbar;\n /**\n * Fixed content under `mainToolbar` — supporting copy such as a\n * description — divided from the scrolling `main` below it.\n */\n mainHeader?: KerfUiContent;\n /**\n * Fixed content over `mainBottomToolbar` — a status line or a resource\n * toolbar — divided from the scrolling `main` above it.\n */\n mainFooter?: KerfUiContent;\n /**\n * The work area's bottom toolbar. A collapsed drawer's marked groups and\n * toggle trail it; without it they float in the work area's corner.\n */\n mainBottomToolbar?: WorkbenchMainBottomToolbar;\n /**\n * Whether `mainToolbar` and `mainHeader` stay pinned (`fixed`, default),\n * scroll away with `main` (`scroll`) — useful where large text would leave\n * pinned chrome little room — or stay pinned while the work area is tall\n * enough and scroll with `main` when it is short (`auto`).\n */\n mainHeaderPlacement?: WorkbenchChromePlacement;\n /** The same for `mainFooter` and `mainBottomToolbar` (default `fixed`). */\n mainFooterPlacement?: WorkbenchChromePlacement;\n /**\n * Configuration for the work area's `Pane` (`contentElement`,\n * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`), which it has whenever it\n * has a toolbar, `mainHeader`, or `mainFooter`; without that chrome, `main`\n * renders as given and this is ignored. Omitted or `undefined` fields keep\n * the `Pane` defaults.\n */\n mainPane?: PaneConfig;\n /** Accessible name for the central region when it needs its own landmark. */\n mainLabel?: string;\n /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the central region. */\n mainTabIndex?: 0 | -1;\n /** Keep the standard focus outline visible on the central region. */\n mainOutlined?: boolean;\n /**\n * Configuration for the `List` that holds `mainHeader` (`gap`, `hAlign`,\n * `vAlign`, `dividerSides`, `textInsets`, `controlInsets`). Omitted or\n * `undefined` fields keep the defaults (no divider: the work area's\n * `Pane` draws the line under its header chrome).\n */\n mainHeaderList?: ListConfig;\n /**\n * The same for the `List` that holds `mainFooter` (no divider by default:\n * the work area's `Pane` draws the line over its footer chrome).\n */\n mainFooterList?: ListConfig;\n leftRail?: WorkbenchPanel;\n rightRail?: WorkbenchPanel;\n bottomDrawer?: WorkbenchPanel;\n /**\n * Minimum width, in px, the work area keeps beside the inline rails, fixed\n * or `resizable` (default 320; `0` turns it off). Resizing a rail stops\n * where the work area would drop below it, and inline rails shrink\n * proportionally when the Workbench gets narrower. Workbenches without a\n * rail ignore it.\n */\n mainMinSize?: number;\n /**\n * Minimum height, in px, the work area keeps above an inline bottom drawer,\n * fixed or `resizable` (default 120; `0` turns it off) — the drawer's\n * counterpart of `mainMinSize`. Resizing the drawer stops where the work\n * area would drop below it, and the drawer shrinks when the Workbench gets\n * shorter. Workbenches without a drawer ignore it.\n */\n mainMinHeight?: number;\n /** Dim the work area below any open overlay and absorb outside presses; off by default. */\n overlayBackdrop?: boolean;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\ninterface ResolvedResize {\n regionId: string;\n axis: ResizableRegionAxis;\n edge: ResizableRegionEdge;\n size: number;\n min: number;\n max: number;\n}\n\n/**\n * Each panel's separator is its inner edge. Growing the left rail moves that\n * edge toward the inline end; growing the right rail or the drawer moves it\n * toward the start — the same edge vocabulary `ResizableRegion` uses.\n */\nconst EDGES: Record<WorkbenchPanelKey, ResizableRegionEdge> = {\n leftRail: 'end',\n rightRail: 'start',\n bottomDrawer: 'start',\n};\n\nconst DEFAULT_LABELS: Record<WorkbenchPanelKey, string> = {\n leftRail: 'left rail',\n rightRail: 'right rail',\n bottomDrawer: 'bottom drawer',\n};\n\nfunction resolveResize(\n id: string,\n key: WorkbenchPanelKey,\n panel: WorkbenchPanel,\n): ResolvedResize | undefined {\n if (!panel.resizable) return undefined;\n const defaults = WORKBENCH_RESIZE_DEFAULTS[key];\n const limits = panel.resizable === true ? {} : panel.resizable;\n const min = limits.min ?? defaults.min;\n const max = Math.max(min, limits.max ?? defaults.max);\n return {\n regionId: workbenchRegionId(id, key),\n axis: key === 'bottomDrawer' ? 'vertical' : 'horizontal',\n edge: EDGES[key],\n size: clampRegionSize(panel.size ?? defaults.size, min, max),\n min,\n max,\n };\n}\n\n/** The attributes a resizable panel adds for the resize wiring to read. */\nconst resizeAttributes = (resize: ResolvedResize | undefined) =>\n resize\n ? {\n 'data-resizable': 'true',\n 'data-region-id': resize.regionId,\n 'data-axis': resize.axis,\n 'data-edge': resize.edge,\n }\n : {};\n\n/**\n * A resizable panel's size lives in the resize wiring's track property, so a\n * drag or key press resizes the panel before the app re-renders; the CSS maps\n * it onto the rail width or drawer height.\n */\nfunction panelStyle(\n panel: WorkbenchPanel,\n resize: ResolvedResize | undefined,\n sizeProperty: string,\n) {\n if (resize) return `--kui-resizable-region-size:${resize.size}px`;\n return panel.size ? `${sizeProperty}: ${panel.size}px` : undefined;\n}\n\n/**\n * The separator a resizable panel owns: the same focusable `role=\"separator\"`\n * contract a `ResizableRegion` handle carries, so one resize wiring drives\n * both. It leaves the tab order while the panel is collapsed or not inline.\n */\nfunction PanelHandle({\n panel,\n resize,\n label,\n}: {\n panel: WorkbenchPanel;\n resize: ResolvedResize;\n label: string;\n}) {\n const inert =\n Boolean(panel.collapsed) || (panel.presentation ?? 'inline') !== 'inline';\n return (\n <div\n class=\"kui-workbench__handle\"\n role=\"separator\"\n tabindex={inert ? '-1' : '0'}\n aria-label={`Resize ${label}`}\n aria-orientation={\n resize.axis === 'horizontal' ? 'vertical' : 'horizontal'\n }\n aria-valuemin={resize.min}\n aria-valuemax={resize.max}\n aria-valuenow={resize.size}\n aria-hidden={inert ? 'true' : undefined}\n data-kui-resize-handle\n data-region-id={resize.regionId}\n >\n <span class=\"kui-workbench__handle-icon\" aria-hidden=\"true\">\n <ResizeGrip axis={resize.axis} />\n </span>\n </div>\n );\n}\n\n/**\n * A collapsed panel leaves the accessibility tree as a whole, like a collapsed\n * `CollapsiblePanel`: its content and separator are already inert or hidden,\n * so the labeled landmark would otherwise stay behind, empty, for a screen\n * reader to land on. Its restore control renders outside it and stays\n * reachable.\n */\nfunction hiddenFromAccessibility(panel: WorkbenchPanel) {\n return panel.collapsed || panel.presentation === 'hidden'\n ? ('true' as const)\n : undefined;\n}\n\n/** A breakpoint's attribute value; `never` (or none) renders no attribute. */\nconst responsiveAt = (at: WorkbenchResponsiveOverlayAt | undefined) =>\n at === 'never' ? undefined : at;\n\nconst inline = (panel: WorkbenchPanel | undefined) =>\n Boolean(panel && (panel.presentation ?? 'inline') === 'inline');\n\nconst expanded = (panel: WorkbenchPanel | undefined) =>\n Boolean(panel && !panel.collapsed);\n\nconst responsiveRail = (panel: WorkbenchPanel | undefined) =>\n panel ? responsiveAt(panel.responsiveOverlayAt ?? 'narrow') : undefined;\n\nconst responsiveDrawer = (panel: WorkbenchPanel | undefined) =>\n panel ? responsiveAt(panel.responsiveOverlayAt) : undefined;\n\nfunction Rail({\n id,\n side,\n panel,\n}: {\n id: string;\n side: 'left' | 'right';\n panel: WorkbenchPanel;\n}) {\n const key: WorkbenchPanelKey = side === 'left' ? 'leftRail' : 'rightRail';\n const resize = resolveResize(id, key, panel);\n return (\n <aside\n id={workbenchRegionId(id, key)}\n class={`kui-workbench__rail kui-workbench__rail--${side}`}\n data-workbench-rail={side}\n data-appearance={\n !panel.toolbar && panel.pane?.appearance === 'sunken'\n ? 'sunken'\n : undefined\n }\n data-collapsed={String(panel.collapsed ?? false)}\n data-outlined={\n !panel.collapsed && panel.presentation !== 'hidden' && panel.outlined\n ? 'true'\n : undefined\n }\n data-separator={panel.separator ?? 'auto'}\n data-collapse-motion={panel.collapseMotion ?? 'slide'}\n data-content-overflow={panel.contentOverflow ?? 'clip'}\n data-presentation={panel.presentation ?? 'inline'}\n data-responsive-overlay-at={responsiveAt(\n panel.responsiveOverlayAt ?? 'narrow',\n )}\n data-compact-overlay={panel.compactOverlay ?? 'inset'}\n {...resizeAttributes(resize)}\n aria-label={panel.label || undefined}\n aria-hidden={hiddenFromAccessibility(panel)}\n tabindex={\n panel.collapsed || panel.presentation === 'hidden'\n ? panel.tabIndex === undefined\n ? undefined\n : -1\n : panel.tabIndex\n }\n inert={Boolean(panel.collapsed)}\n style={panelStyle(panel, resize, '--kui-workbench-rail-width')}\n >\n <div\n class=\"kui-workbench__panel-content\"\n data-workbench-panel-content\n inert={Boolean(panel.collapsed)}\n >\n {panelBody(id, key, panel)}\n </div>\n {resize && (\n <PanelHandle\n panel={panel}\n resize={resize}\n label={panel.label || DEFAULT_LABELS[key]}\n />\n )}\n </aside>\n );\n}\n\nfunction Drawer({ id, panel }: { id: string; panel: WorkbenchPanel }) {\n const resize = resolveResize(id, 'bottomDrawer', panel);\n return (\n <section\n id={workbenchRegionId(id, 'bottomDrawer')}\n class=\"kui-workbench__drawer\"\n data-workbench-drawer\n data-appearance={\n !panel.toolbar && panel.pane?.appearance === 'sunken'\n ? 'sunken'\n : undefined\n }\n data-collapsed={String(panel.collapsed ?? false)}\n data-outlined={\n !panel.collapsed && panel.presentation !== 'hidden' && panel.outlined\n ? 'true'\n : undefined\n }\n data-separator={panel.separator ?? 'auto'}\n data-collapse-motion={panel.collapseMotion ?? 'slide'}\n data-content-overflow={panel.contentOverflow ?? 'clip'}\n data-presentation={panel.presentation ?? 'inline'}\n data-responsive-overlay-at={responsiveAt(panel.responsiveOverlayAt)}\n {...resizeAttributes(resize)}\n aria-label={panel.label || undefined}\n aria-hidden={hiddenFromAccessibility(panel)}\n tabindex={\n panel.collapsed || panel.presentation === 'hidden'\n ? panel.tabIndex === undefined\n ? undefined\n : -1\n : panel.tabIndex\n }\n inert={Boolean(panel.collapsed)}\n style={panelStyle(panel, resize, '--kui-workbench-drawer-height')}\n >\n <div\n class=\"kui-workbench__panel-content\"\n data-workbench-panel-content\n inert={Boolean(panel.collapsed)}\n >\n {panelBody(id, 'bottomDrawer', panel)}\n </div>\n {resize && (\n <PanelHandle\n panel={panel}\n resize={resize}\n label={panel.label || DEFAULT_LABELS.bottomDrawer}\n />\n )}\n </section>\n );\n}\n\n/** A collapsed panel's restore control, outside the clipped panel. */\nfunction restore(\n panel: WorkbenchPanel | undefined,\n side: 'left' | 'right' | 'bottom',\n position: ResizableRegionRestorePosition,\n generated: SafeHtml | undefined,\n) {\n const control = panel?.restoreControl ?? generated;\n if (!panel?.collapsed || !control || panel.presentation === 'hidden')\n return '';\n return (\n <div\n class=\"kui-workbench__restore\"\n data-panel={side}\n data-position={panel.restorePosition ?? position}\n >\n {control}\n </div>\n );\n}\n\n/**\n * The Xcode-like multi-panel workspace: a collapsible left rail, right rail, and\n * bottom drawer around a central work area (any absent). Collapsing snaps the\n * panel's track to zero in one reflow while its fixed-size content slides out via\n * a composited transform — the instant-width / sliding-content technique, so the\n * work area relayouts once, not per frame. Bottom-drawer content stays anchored\n * to the shell's stable bottom edge throughout that transition. The app owns\n * each `collapsed` flag; the collapse is pure CSS. A collapsed panel renders\n * `inert` and `aria-hidden`, so neither Tab nor assistive technology reaches\n * controls that have slid out of view or an empty landmark (its restore control\n * lives outside it and stays reachable). A panel may opt in to drag and keyboard resizing with\n * `resizable`, which `wireWorkbench` drives. See `docs/23-app-layouts.md` §3.3.\n */\nexport function Workbench({\n id,\n label,\n main,\n leftRail,\n rightRail,\n bottomDrawer,\n mainToolbar,\n mainHeader,\n mainFooter,\n mainBottomToolbar,\n mainHeaderPlacement,\n mainFooterPlacement,\n mainPane,\n mainLabel,\n mainTabIndex,\n mainOutlined = false,\n mainHeaderList,\n mainFooterList,\n mainMinSize = WORKBENCH_MAIN_MIN_SIZE,\n mainMinHeight = WORKBENCH_MAIN_MIN_HEIGHT,\n overlayBackdrop = false,\n className = '',\n slot,\n}: WorkbenchProps) {\n // Each work-area minimum applies only on an axis a panel shares with it:\n // the width beside a rail, the height above the drawer.\n const px = (value: number) => Math.max(0, Math.round(value));\n const mainMin = leftRail || rightRail ? px(mainMinSize) : undefined;\n const mainMinBlock = bottomDrawer ? px(mainMinHeight) : undefined;\n const style = [\n mainMin === undefined ? '' : `--_kui-workbench-main-min-width:${mainMin}px`,\n mainMinBlock === undefined\n ? ''\n : `--_kui-workbench-main-min-height:${mainMinBlock}px`,\n ]\n .filter(Boolean)\n .join(';');\n return (\n <section\n class={`kui-workbench ${className}`.trim()}\n id={id}\n data-component=\"workbench\"\n data-main-min-size={mainMin === undefined ? undefined : String(mainMin)}\n data-main-min-height={\n mainMinBlock === undefined ? undefined : String(mainMinBlock)\n }\n data-left-inline-expanded={\n inline(leftRail) && expanded(leftRail) ? 'true' : undefined\n }\n data-right-inline-expanded={\n inline(rightRail) && expanded(rightRail) ? 'true' : undefined\n }\n data-left-responsive-inline={\n inline(leftRail) ? responsiveRail(leftRail) : undefined\n }\n data-right-responsive-inline={\n inline(rightRail) ? responsiveRail(rightRail) : undefined\n }\n data-left-responsive-expanded={\n inline(leftRail) && expanded(leftRail)\n ? responsiveRail(leftRail)\n : undefined\n }\n data-right-responsive-expanded={\n inline(rightRail) && expanded(rightRail)\n ? responsiveRail(rightRail)\n : undefined\n }\n data-rail-overlay-expanded={\n (leftRail?.presentation === 'overlay' && expanded(leftRail)) ||\n (rightRail?.presentation === 'overlay' && expanded(rightRail))\n ? 'true'\n : undefined\n }\n data-drawer-overlay-expanded={\n bottomDrawer?.presentation === 'overlay' && expanded(bottomDrawer)\n ? 'true'\n : undefined\n }\n data-drawer-responsive-expanded={\n inline(bottomDrawer) && expanded(bottomDrawer)\n ? responsiveDrawer(bottomDrawer)\n : undefined\n }\n data-overlay-backdrop={overlayBackdrop ? 'true' : undefined}\n data-responsive-overlay={\n responsiveRail(leftRail) ||\n responsiveRail(rightRail) ||\n responsiveDrawer(bottomDrawer)\n ? 'true'\n : undefined\n }\n style={style || undefined}\n aria-label={label}\n slot={slot}\n >\n {leftRail && <Rail id={id} side=\"left\" panel={leftRail} />}\n {restore(\n leftRail,\n 'left',\n 'bottom-start',\n floatingRestore(id, 'leftRail', leftRail, Boolean(mainToolbar)),\n )}\n <div class=\"kui-workbench__center\">\n <div\n class=\"kui-workbench__main\"\n data-workbench-main\n data-outlined={mainOutlined ? 'true' : undefined}\n role={mainLabel ? 'region' : undefined}\n aria-label={mainLabel}\n tabindex={mainTabIndex}\n data-drawer-inline-expanded={\n inline(bottomDrawer) && expanded(bottomDrawer) ? 'true' : undefined\n }\n data-drawer-responsive-inline={\n inline(bottomDrawer) ? responsiveDrawer(bottomDrawer) : undefined\n }\n data-appearance={\n !mainToolbar &&\n !mainBottomToolbar &&\n !mainHeader &&\n !mainFooter &&\n mainPane?.appearance === 'sunken'\n ? 'sunken'\n : undefined\n }\n >\n {mainBody({\n workbenchId: id,\n main,\n mainToolbar,\n mainHeader,\n mainFooter,\n mainBottomToolbar,\n mainHeaderPlacement,\n mainFooterPlacement,\n mainPane,\n mainHeaderList,\n mainFooterList,\n leftRail,\n rightRail,\n bottomDrawer,\n })}\n </div>\n {bottomDrawer && <Drawer id={id} panel={bottomDrawer} />}\n {restore(\n bottomDrawer,\n 'bottom',\n 'bottom-end',\n floatingRestore(\n id,\n 'bottomDrawer',\n bottomDrawer,\n Boolean(mainBottomToolbar),\n ),\n )}\n </div>\n {rightRail && <Rail id={id} side=\"right\" panel={rightRail} />}\n {restore(\n rightRail,\n 'right',\n 'bottom-end',\n floatingRestore(id, 'rightRail', rightRail, Boolean(mainToolbar)),\n )}\n {overlayBackdrop ? (\n <div\n class=\"kui-workbench__backdrop\"\n data-workbench-backdrop\n aria-hidden=\"true\"\n />\n ) : null}\n </section>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/layout/workbench/internal/workbench-toolbars.tsx","../src/components/layout/workbench/workbench.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-KL3W6FUN.js","sourcesContent":["import type { KerfUiContent } from '../../../../shared/content/semantic-content.js';\nimport {\n composedPanelBody,\n type PanelBottomToolbar,\n type PanelChromePlacement,\n type PanelSide,\n type PanelToggle,\n type PanelToggleAttributes,\n panelToggleGroup,\n type PanelToolbar,\n relocatedPanelGroups,\n} from '../../../../shared/panels/panel-toolbar.js';\nimport {\n FloatingToolbar,\n type FloatingToolbarPosition,\n} from '../../../actions/floating-toolbar/floating-toolbar.js';\nimport {\n Toolbar,\n type ToolbarConfig,\n} from '../../../actions/toolbar/toolbar.js';\nimport { List, type ListConfig } from '../../../collections/list/list.js';\nimport {\n NavStack,\n type NavStackProps,\n} from '../../../navigation/nav-stack/nav-stack.js';\nimport { Pane, type PaneConfig } from '../../pane/pane.js';\nimport {\n type WorkbenchPanelKey,\n workbenchRegionId,\n} from './workbench-resize.js';\n\n/** The standard toggle a Workbench renders for a panel (see {@link PanelToggle}). */\nexport type WorkbenchPanelToggle = PanelToggle;\n\n/**\n * A Workbench panel's top toolbar, composed by the Workbench so its groups can\n * follow the panel's open state (see {@link PanelToolbar} for the roles).\n * A collapsed rail's marked groups and toggle go to the leading edge of\n * `mainToolbar` (left rail) or its trailing edge (right rail); a collapsed\n * drawer's go to the trailing edge of `mainBottomToolbar`, else to a\n * `FloatingToolbar` in the work area's bottom-end corner.\n */\nexport type WorkbenchPanelToolbar = PanelToolbar;\nexport type WorkbenchPanelBottomToolbar = PanelBottomToolbar;\n\n/**\n * The work area's top toolbar; collapsed rails add their groups to it. Its\n * configuration forwards to its `Toolbar`. It draws no divider of its own by\n * default: the work area's `Pane` draws one under its header chrome, wherever\n * that chrome ends, while `main` is scrolled (`mainPane.chromeDividers`).\n */\nexport interface WorkbenchMainToolbar extends ToolbarConfig {\n label: string;\n /** The work area's title, usually an extra-large `ToolbarText`. */\n title?: KerfUiContent;\n /** Groups after the title. */\n leading?: KerfUiContent;\n center?: KerfUiContent;\n /** Groups at the trailing edge, before a collapsed right rail's groups. */\n trailing?: KerfUiContent;\n}\n\n/**\n * The work area's bottom toolbar; a collapsed drawer adds its groups to it.\n * Its configuration forwards to its `Toolbar`. It draws no divider of its own\n * by default: the work area's `Pane` draws one over its footer chrome while\n * more of `main` lies below (`mainPane.chromeDividers`).\n */\nexport interface WorkbenchMainBottomToolbar extends ToolbarConfig {\n label: string;\n leading?: KerfUiContent;\n center?: KerfUiContent;\n trailing?: KerfUiContent;\n}\n\nconst SIDES: Record<WorkbenchPanelKey, PanelSide> = {\n leftRail: 'left',\n rightRail: 'right',\n bottomDrawer: 'bottom',\n};\n\n/** A panel as far as its toolbar is concerned. */\nexport interface WorkbenchToolbarPanel {\n toolbar?: WorkbenchPanelToolbar;\n navStack?: Omit<\n NavStackProps,\n 'panelToggle' | 'hideToolbar' | 'className' | 'slot'\n >;\n header?: KerfUiContent;\n headerList?: ListConfig;\n headerPlacement?: PanelChromePlacement;\n footer?: KerfUiContent;\n footerList?: ListConfig;\n bottomToolbar?: WorkbenchPanelBottomToolbar;\n footerPlacement?: PanelChromePlacement;\n /** Configuration for the `Pane` a `toolbar` panel's content renders in. */\n pane?: PaneConfig;\n content?: KerfUiContent;\n collapsed?: boolean;\n /** The corner a collapsed panel's restore controls float in. */\n restorePosition?: FloatingToolbarPosition;\n}\n\n/** A Workbench toggle's wiring hooks: its side, morph key, and panel. */\nconst toggleAttributes = (\n workbenchId: string,\n key: WorkbenchPanelKey,\n): PanelToggleAttributes => ({\n 'data-workbench-toggle': SIDES[key],\n // Keyed, so the morph removes a toggle that leaves a toolbar instead of\n // reusing its (possibly focused) button for a different control.\n 'data-key': `${workbenchRegionId(workbenchId, key)}-toggle`,\n 'aria-controls': workbenchRegionId(workbenchId, key),\n});\n\n/**\n * The groups a collapsed panel hands to the work area: its marked groups,\n * then its toggle. Empty while the panel is open or has no toolbar.\n */\nexport function relocatedGroups(\n workbenchId: string,\n key: WorkbenchPanelKey,\n panel: WorkbenchToolbarPanel | undefined,\n): KerfUiContent[] {\n const active = panel?.navStack?.views.at(-1);\n const toolbar =\n active && panel?.toolbar\n ? {\n ...panel.toolbar,\n leading: active.toolbar?.leading,\n center: active.toolbar?.center,\n trailing: active.toolbar?.trailing,\n }\n : panel?.toolbar;\n return relocatedPanelGroups(\n toolbar,\n SIDES[key],\n Boolean(panel?.collapsed),\n toggleAttributes(workbenchId, key),\n );\n}\n\n/**\n * A panel's content, wrapped in a `Pane` under its composed toolbar when it\n * has one (with its optional `footer` below). Without a toolbar the content\n * renders as given.\n */\nexport function panelBody(\n workbenchId: string,\n key: WorkbenchPanelKey,\n panel: WorkbenchToolbarPanel,\n) {\n const toolbar = panel.toolbar;\n if (panel.navStack) {\n const stack = panel.navStack;\n return NavStack({\n ...stack,\n toolbarConfig: {\n label: stack.toolbarConfig?.label ?? toolbar?.label,\n dividerSides:\n stack.toolbarConfig?.dividerSides ?? toolbar?.dividerSides,\n centerAlign: stack.toolbarConfig?.centerAlign ?? toolbar?.centerAlign,\n responsive: stack.toolbarConfig?.responsive ?? toolbar?.responsive,\n responsiveAt:\n stack.toolbarConfig?.responsiveAt ?? toolbar?.responsiveAt,\n safeAreaEdges:\n stack.toolbarConfig?.safeAreaEdges ?? toolbar?.safeAreaEdges,\n titleSize: stack.toolbarConfig?.titleSize,\n headingLevel: stack.toolbarConfig?.headingLevel,\n },\n panelToggle: toolbar?.toggle\n ? panelToggleGroup(\n SIDES[key],\n toolbar.toggle,\n Boolean(panel.collapsed),\n toggleAttributes(workbenchId, key),\n )\n : undefined,\n });\n }\n if (!toolbar) return panel.content;\n return composedPanelBody({\n toolbar,\n side: SIDES[key],\n collapsed: Boolean(panel.collapsed),\n attributes: toggleAttributes(workbenchId, key),\n pane: panel.pane,\n header: panel.header,\n headerList: panel.headerList,\n headerPlacement: panel.headerPlacement,\n footer: panel.footer,\n footerList: panel.footerList,\n bottomToolbar: panel.bottomToolbar,\n footerPlacement: panel.footerPlacement,\n content: panel.content ?? null,\n });\n}\n\n/**\n * The work area's `mainHeader` / `mainFooter` chrome in a `List` carrying the\n * app's configuration; an omitted or `undefined` field keeps the `List`\n * default (no divider: the work area's `Pane` draws its chrome dividers).\n */\nfunction chromeList(content: KerfUiContent, config: ListConfig | undefined) {\n return (\n <List\n dividerSides={config?.dividerSides}\n gap={config?.gap}\n hAlign={config?.hAlign}\n vAlign={config?.vAlign}\n textInsets={config?.textInsets}\n controlInsets={config?.controlInsets}\n >\n {content}\n </List>\n );\n}\n\n/**\n * Whether the work area's header or footer chrome stays pinned (`fixed`),\n * scrolls away with the content (`scroll`), or stays pinned while the work\n * area is tall enough and scrolls with the content when it is short (`auto`,\n * the Pane's `chromePlacement=\"auto\"`; it applies to the pinned header and\n * footer together).\n */\nexport type WorkbenchChromePlacement = PanelChromePlacement;\n\n/**\n * The work area: the app's `main` in a `Pane` (configured by `mainPane`)\n * under `mainToolbar` and any `mainHeader` list, and above any `mainFooter`\n * list and `mainBottomToolbar` (the header and footer lists configured by\n * `mainHeaderList` / `mainFooterList`), with each collapsed panel's groups\n * added to the toolbar on its side. Without any of that chrome, `main`\n * renders as given; only `mainPane.appearance` applies to the Workbench's\n * own scroll region in that case.\n */\nexport function mainBody({\n workbenchId,\n main,\n mainToolbar,\n mainHeader,\n mainFooter,\n mainBottomToolbar,\n mainHeaderPlacement = 'fixed',\n mainFooterPlacement = 'fixed',\n mainPane,\n mainHeaderList,\n mainFooterList,\n leftRail,\n rightRail,\n bottomDrawer,\n}: {\n workbenchId: string;\n main: KerfUiContent;\n mainToolbar?: WorkbenchMainToolbar;\n mainHeader?: KerfUiContent;\n mainFooter?: KerfUiContent;\n mainBottomToolbar?: WorkbenchMainBottomToolbar;\n mainHeaderPlacement?: WorkbenchChromePlacement;\n mainFooterPlacement?: WorkbenchChromePlacement;\n mainPane?: PaneConfig;\n mainHeaderList?: ListConfig;\n mainFooterList?: ListConfig;\n leftRail?: WorkbenchToolbarPanel;\n rightRail?: WorkbenchToolbarPanel;\n bottomDrawer?: WorkbenchToolbarPanel;\n}) {\n if (!mainToolbar && !mainBottomToolbar && !mainHeader && !mainFooter)\n return main;\n const left = relocatedGroups(workbenchId, 'leftRail', leftRail);\n const right = relocatedGroups(workbenchId, 'rightRail', rightRail);\n const drawer = mainBottomToolbar\n ? relocatedGroups(workbenchId, 'bottomDrawer', bottomDrawer)\n : [];\n // The Pane draws one divider under the header chrome and one over the\n // footer chrome, wherever that chrome ends, from the scroll state.\n const header =\n !mainToolbar && !mainHeader ? undefined : (\n <>\n {mainToolbar ? (\n <Toolbar\n label={mainToolbar.label}\n dividerSides={mainToolbar.dividerSides}\n centerAlign={mainToolbar.centerAlign}\n responsive={mainToolbar.responsive}\n responsiveAt={mainToolbar.responsiveAt}\n safeAreaEdges={mainToolbar.safeAreaEdges}\n leading={\n <>\n {left}\n {mainToolbar.title}\n {mainToolbar.leading}\n </>\n }\n center={mainToolbar.center}\n trailing={\n <>\n {mainToolbar.trailing}\n {right}\n </>\n }\n />\n ) : null}\n {mainHeader ? chromeList(mainHeader, mainHeaderList) : null}\n </>\n );\n const footer =\n !mainFooter && !mainBottomToolbar ? undefined : (\n <>\n {mainFooter ? chromeList(mainFooter, mainFooterList) : null}\n {mainBottomToolbar ? (\n <Toolbar\n position=\"footer\"\n label={mainBottomToolbar.label}\n dividerSides={mainBottomToolbar.dividerSides}\n centerAlign={mainBottomToolbar.centerAlign}\n responsive={mainBottomToolbar.responsive}\n responsiveAt={mainBottomToolbar.responsiveAt}\n safeAreaEdges={mainBottomToolbar.safeAreaEdges}\n leading={mainBottomToolbar.leading}\n center={mainBottomToolbar.center}\n trailing={\n <>\n {mainBottomToolbar.trailing}\n {drawer}\n </>\n }\n />\n ) : null}\n </>\n );\n const scrollHeader = mainHeaderPlacement === 'scroll';\n const scrollFooter = mainFooterPlacement === 'scroll';\n return (\n <Pane\n header={scrollHeader ? undefined : header}\n footer={scrollFooter ? undefined : footer}\n chromePlacement={\n mainHeaderPlacement === 'auto' || mainFooterPlacement === 'auto'\n ? 'auto'\n : 'fixed'\n }\n contentElement={mainPane?.contentElement}\n contentLabel={mainPane?.contentLabel}\n separators={mainPane?.separators}\n safeAreaEdges={mainPane?.safeAreaEdges}\n chromeDividers={mainPane?.chromeDividers}\n appearance={mainPane?.appearance}\n deepInset={mainPane?.deepInset}\n tabIndex={mainPane?.tabIndex}\n outlined={mainPane?.outlined}\n >\n {scrollHeader || scrollFooter ? (\n // Chrome that scrolls joins the content in one gapless column that\n // fills the scroller, so it scrolls away with the content.\n <List flex>\n {scrollHeader ? header : null}\n {main}\n {scrollFooter ? footer : null}\n </List>\n ) : (\n main\n )}\n </Pane>\n );\n}\n\n/**\n * A collapsed panel's groups when the work area has no toolbar on its side\n * to take them: a `FloatingToolbar` for the panel's restore corner, so the\n * panel can always be reopened.\n */\nexport function floatingRestore(\n workbenchId: string,\n key: WorkbenchPanelKey,\n panel: WorkbenchToolbarPanel | undefined,\n hasTargetToolbar: boolean,\n) {\n if (hasTargetToolbar) return undefined;\n const groups = relocatedGroups(workbenchId, key, panel);\n if (groups.length === 0) return undefined;\n return (\n <FloatingToolbar\n label={panel!.toolbar!.label}\n position={\n panel!.restorePosition ??\n (key === 'leftRail' ? 'bottom-start' : 'bottom-end')\n }\n >\n {groups}\n </FloatingToolbar>\n );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { ListConfig } from '../../collections/list/list.js';\nimport type { NavStackProps } from '../../navigation/nav-stack/nav-stack.js';\nimport type { PaneConfig } from '../pane/pane.js';\nimport { ResizeGrip } from '../resizable-region/internal/resize-grip.js';\nimport {\n clampRegionSize,\n type ResizableRegionAxis,\n type ResizableRegionCollapseMotion,\n type ResizableRegionContentOverflow,\n type ResizableRegionEdge,\n type ResizableRegionPresentation,\n type ResizableRegionRestorePosition,\n type ResizableRegionSeparator,\n} from '../resizable-region/resizable-region.js';\nimport {\n WORKBENCH_MAIN_MIN_HEIGHT,\n WORKBENCH_MAIN_MIN_SIZE,\n WORKBENCH_RESIZE_DEFAULTS,\n type WorkbenchPanelKey,\n workbenchRegionId,\n} from './internal/workbench-resize.js';\nimport {\n floatingRestore,\n mainBody,\n panelBody,\n type WorkbenchChromePlacement,\n type WorkbenchMainBottomToolbar,\n type WorkbenchMainToolbar,\n type WorkbenchPanelBottomToolbar,\n type WorkbenchPanelToolbar,\n} from './internal/workbench-toolbars.js';\n\nexport type {\n WorkbenchChromePlacement,\n WorkbenchMainBottomToolbar,\n WorkbenchMainToolbar,\n WorkbenchPanelBottomToolbar,\n WorkbenchPanelToggle,\n WorkbenchPanelToolbar,\n} from './internal/workbench-toolbars.js';\n\n/**\n * The Workbench container breakpoint below which a panel presents as an\n * overlay: `narrow` (704px or less) or `compact` (448px or less) — the same\n * breakpoints as `ResizableRegion`'s `responsiveFillAt` — or `never` to keep\n * it inline at every width.\n */\nexport type WorkbenchResponsiveOverlayAt =\n 'compact' | 'narrow' | 'never' | number;\n\n/**\n * How wide a rail's overlay is in a compact (448px or less) Workbench: `inset`\n * fills the Workbench less a dismiss margin on the side away from the rail's\n * edge, so a press beside it closes it; `full` fills the Workbench.\n */\nexport type WorkbenchCompactOverlay = 'inset' | 'full';\n\n/** Drag-resize limits for a resizable Workbench panel, in px. */\nexport interface WorkbenchPanelResizable {\n /** Smallest size (default 180 for a rail, 120 for the drawer). */\n min?: number;\n /** Largest size (default 480). */\n max?: number;\n}\n\n/** Region sizing, collapse, and presentation shared by either panel body. */\ninterface WorkbenchPanelBase {\n /** Whether the panel is currently collapsed (the app owns this). */\n collapsed?: boolean;\n /**\n * Rail width, or drawer height, in px. Overrides the CSS default. For a\n * resizable panel it is the current size (default 280 for a rail, 220 for\n * the drawer), clamped to the limits; the app owns it and `wireWorkbench`\n * reports each resize.\n */\n size?: number;\n /**\n * Opt in to drag and keyboard resizing on the panel's inner separator:\n * `true` for the default limits, or `{ min, max }`. Off by default. Pair it\n * with `wireWorkbench` from `@kerfjs/ui/wire-workbench`.\n */\n resizable?: boolean | WorkbenchPanelResizable;\n /** Accessible name for the panel region. */\n label?: string;\n /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel region. */\n tabIndex?: 0 | -1;\n /** Keep the standard focus outline visible while this panel is expanded. */\n outlined?: boolean;\n separator?: ResizableRegionSeparator;\n collapseMotion?: ResizableRegionCollapseMotion;\n contentOverflow?: ResizableRegionContentOverflow;\n presentation?: ResizableRegionPresentation;\n /**\n * Present the panel as an overlay, without a separator, below a Workbench\n * container breakpoint, and inline above it. `compact` and `narrow` use\n * CSS container queries; a positive number is a pixel threshold measured\n * by `wireWorkbench` and requires a `collapsed` signal. A rail overlays from its side at full\n * height, over the work area and an open drawer; the bottom drawer\n * overlays the bottom of the work-area column. Rails default to `narrow`\n * (pass `never` to keep one inline); the drawer defaults to inline.\n */\n responsiveOverlayAt?: WorkbenchResponsiveOverlayAt;\n /**\n * A rail's overlay width in a compact Workbench (default `inset`: the\n * Workbench less `--kui-workbench-overlay-dismiss-margin`, 44px). Ignored\n * by the drawer.\n */\n compactOverlay?: WorkbenchCompactOverlay;\n /**\n * Control shown while collapsed, in a safe-area-aware corner of the\n * Workbench (not the viewport); the bottom drawer's sits in the work-area\n * column. Prefer `toolbar.toggle`, which the Workbench relocates into the\n * work area's toolbar (or this corner when that toolbar is absent).\n */\n restoreControl?: SafeHtml;\n restorePosition?: ResizableRegionRestorePosition;\n}\n\n/** The original static panel body: one toolbar, optional fixed chrome, and one Pane. */\nexport interface WorkbenchStaticPanel\n extends\n WorkbenchPanelBase,\n NavPane<WorkbenchPanelToolbar, WorkbenchPanelBottomToolbar> {\n /** The composed toolbar; marked groups and its toggle relocate on collapse. */\n toolbar?: WorkbenchPanelToolbar;\n headerPlacement?: WorkbenchChromePlacement;\n footerPlacement?: WorkbenchChromePlacement;\n navStack?: never;\n}\n\n/** A panel whose active NavStack view supplies the toolbar, fixed header, and scroll body. */\nexport interface WorkbenchNavigationPanel extends WorkbenchPanelBase {\n navStack: Omit<\n NavStackProps,\n 'panelToggle' | 'hideToolbar' | 'className' | 'slot'\n >;\n /** Supplies the standard toggle; active view groups precede it and may relocate on collapse. */\n toolbar: Omit<\n WorkbenchPanelToolbar,\n 'title' | 'leading' | 'center' | 'trailing'\n > & {\n toggle: NonNullable<WorkbenchPanelToolbar['toggle']>;\n };\n content?: never;\n header?: never;\n headerList?: never;\n headerPlacement?: never;\n footer?: never;\n footerList?: never;\n bottomToolbar?: never;\n footerPlacement?: never;\n pane?: never;\n}\n\n/** A collapsible Workbench side rail or bottom drawer. */\nexport type WorkbenchPanel = WorkbenchStaticPanel | WorkbenchNavigationPanel;\n\nexport interface WorkbenchProps {\n /**\n * The Workbench's `id`. Each panel's `id` derives from it —\n * `<id>-left-rail`, `<id>-right-rail`, `<id>-bottom-drawer` — so a toggle\n * can name the panel it shows and hides with `aria-controls`.\n */\n id: string;\n label: string;\n /** The central work area. */\n main: KerfUiContent;\n /**\n * The work area's top toolbar. A collapsed left rail's marked groups\n * and toggle lead it; a collapsed right rail's trail it. With it, `main`\n * renders in a `Pane` below the toolbar.\n */\n mainToolbar?: WorkbenchMainToolbar;\n /**\n * Fixed content under `mainToolbar` — supporting copy such as a\n * description — divided from the scrolling `main` below it.\n */\n mainHeader?: KerfUiContent;\n /**\n * Fixed content over `mainBottomToolbar` — a status line or a resource\n * toolbar — divided from the scrolling `main` above it.\n */\n mainFooter?: KerfUiContent;\n /**\n * The work area's bottom toolbar. A collapsed drawer's marked groups and\n * toggle trail it; without it they float in the work area's corner.\n */\n mainBottomToolbar?: WorkbenchMainBottomToolbar;\n /**\n * Whether `mainToolbar` and `mainHeader` stay pinned (`fixed`, default),\n * scroll away with `main` (`scroll`) — useful where large text would leave\n * pinned chrome little room — or stay pinned while the work area is tall\n * enough and scroll with `main` when it is short (`auto`).\n */\n mainHeaderPlacement?: WorkbenchChromePlacement;\n /** The same for `mainFooter` and `mainBottomToolbar` (default `fixed`). */\n mainFooterPlacement?: WorkbenchChromePlacement;\n /**\n * Configuration for the work area's `Pane` (`contentElement`,\n * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`), which it has whenever it\n * has a toolbar, `mainHeader`, or `mainFooter`; without that chrome, `main`\n * renders as given and this is ignored. Omitted or `undefined` fields keep\n * the `Pane` defaults.\n */\n mainPane?: PaneConfig;\n /** Accessible name for the central region when it needs its own landmark. */\n mainLabel?: string;\n /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the central region. */\n mainTabIndex?: 0 | -1;\n /** Keep the standard focus outline visible on the central region. */\n mainOutlined?: boolean;\n /**\n * Configuration for the `List` that holds `mainHeader` (`gap`, `hAlign`,\n * `vAlign`, `dividerSides`, `textInsets`, `controlInsets`). Omitted or\n * `undefined` fields keep the defaults (no divider: the work area's\n * `Pane` draws the line under its header chrome).\n */\n mainHeaderList?: ListConfig;\n /**\n * The same for the `List` that holds `mainFooter` (no divider by default:\n * the work area's `Pane` draws the line over its footer chrome).\n */\n mainFooterList?: ListConfig;\n leftRail?: WorkbenchPanel;\n rightRail?: WorkbenchPanel;\n bottomDrawer?: WorkbenchPanel;\n /**\n * Minimum width, in px, the work area keeps beside the inline rails, fixed\n * or `resizable` (default 320; `0` turns it off). Resizing a rail stops\n * where the work area would drop below it, and inline rails shrink\n * proportionally when the Workbench gets narrower. Workbenches without a\n * rail ignore it.\n */\n mainMinSize?: number;\n /**\n * Minimum height, in px, the work area keeps above an inline bottom drawer,\n * fixed or `resizable` (default 120; `0` turns it off) — the drawer's\n * counterpart of `mainMinSize`. Resizing the drawer stops where the work\n * area would drop below it, and the drawer shrinks when the Workbench gets\n * shorter. Workbenches without a drawer ignore it.\n */\n mainMinHeight?: number;\n /** Dim the work area below any open overlay and absorb outside presses; off by default. */\n overlayBackdrop?: boolean;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\ninterface ResolvedResize {\n regionId: string;\n axis: ResizableRegionAxis;\n edge: ResizableRegionEdge;\n size: number;\n min: number;\n max: number;\n}\n\n/**\n * Each panel's separator is its inner edge. Growing the left rail moves that\n * edge toward the inline end; growing the right rail or the drawer moves it\n * toward the start — the same edge vocabulary `ResizableRegion` uses.\n */\nconst EDGES: Record<WorkbenchPanelKey, ResizableRegionEdge> = {\n leftRail: 'end',\n rightRail: 'start',\n bottomDrawer: 'start',\n};\n\nconst DEFAULT_LABELS: Record<WorkbenchPanelKey, string> = {\n leftRail: 'left rail',\n rightRail: 'right rail',\n bottomDrawer: 'bottom drawer',\n};\n\nfunction resolveResize(\n id: string,\n key: WorkbenchPanelKey,\n panel: WorkbenchPanel,\n): ResolvedResize | undefined {\n if (!panel.resizable) return undefined;\n const defaults = WORKBENCH_RESIZE_DEFAULTS[key];\n const limits = panel.resizable === true ? {} : panel.resizable;\n const min = limits.min ?? defaults.min;\n const max = Math.max(min, limits.max ?? defaults.max);\n return {\n regionId: workbenchRegionId(id, key),\n axis: key === 'bottomDrawer' ? 'vertical' : 'horizontal',\n edge: EDGES[key],\n size: clampRegionSize(panel.size ?? defaults.size, min, max),\n min,\n max,\n };\n}\n\n/** The attributes a resizable panel adds for the resize wiring to read. */\nconst resizeAttributes = (resize: ResolvedResize | undefined) =>\n resize\n ? {\n 'data-resizable': 'true',\n 'data-region-id': resize.regionId,\n 'data-axis': resize.axis,\n 'data-edge': resize.edge,\n }\n : {};\n\n/**\n * A resizable panel's size lives in the resize wiring's track property, so a\n * drag or key press resizes the panel before the app re-renders; the CSS maps\n * it onto the rail width or drawer height.\n */\nfunction panelStyle(\n panel: WorkbenchPanel,\n resize: ResolvedResize | undefined,\n sizeProperty: string,\n) {\n if (resize) return `--kui-resizable-region-size:${resize.size}px`;\n return panel.size ? `${sizeProperty}: ${panel.size}px` : undefined;\n}\n\n/**\n * The separator a resizable panel owns: the same focusable `role=\"separator\"`\n * contract a `ResizableRegion` handle carries, so one resize wiring drives\n * both. It leaves the tab order while the panel is collapsed or not inline.\n */\nfunction PanelHandle({\n panel,\n resize,\n label,\n}: {\n panel: WorkbenchPanel;\n resize: ResolvedResize;\n label: string;\n}) {\n const inert =\n Boolean(panel.collapsed) || (panel.presentation ?? 'inline') !== 'inline';\n return (\n <div\n class=\"kui-workbench__handle\"\n role=\"separator\"\n tabindex={inert ? '-1' : '0'}\n aria-label={`Resize ${label}`}\n aria-orientation={\n resize.axis === 'horizontal' ? 'vertical' : 'horizontal'\n }\n aria-valuemin={resize.min}\n aria-valuemax={resize.max}\n aria-valuenow={resize.size}\n aria-hidden={inert ? 'true' : undefined}\n data-kui-resize-handle\n data-region-id={resize.regionId}\n >\n <span class=\"kui-workbench__handle-icon\" aria-hidden=\"true\">\n <ResizeGrip axis={resize.axis} />\n </span>\n </div>\n );\n}\n\n/**\n * A collapsed panel leaves the accessibility tree as a whole, like a collapsed\n * `CollapsiblePanel`: its content and separator are already inert or hidden,\n * so the labeled landmark would otherwise stay behind, empty, for a screen\n * reader to land on. Its restore control renders outside it and stays\n * reachable.\n */\nfunction hiddenFromAccessibility(panel: WorkbenchPanel) {\n return panel.collapsed || panel.presentation === 'hidden'\n ? ('true' as const)\n : undefined;\n}\n\n/** A breakpoint's attribute value; `never` (or none) renders no attribute. */\nconst responsiveAt = (at: WorkbenchResponsiveOverlayAt | undefined) =>\n at === 'never' ? undefined : at;\n\nconst inline = (panel: WorkbenchPanel | undefined) =>\n Boolean(panel && (panel.presentation ?? 'inline') === 'inline');\n\nconst expanded = (panel: WorkbenchPanel | undefined) =>\n Boolean(panel && !panel.collapsed);\n\nconst responsiveRail = (panel: WorkbenchPanel | undefined) =>\n panel ? responsiveAt(panel.responsiveOverlayAt ?? 'narrow') : undefined;\n\nconst responsiveDrawer = (panel: WorkbenchPanel | undefined) =>\n panel ? responsiveAt(panel.responsiveOverlayAt) : undefined;\n\nfunction Rail({\n id,\n side,\n panel,\n}: {\n id: string;\n side: 'left' | 'right';\n panel: WorkbenchPanel;\n}) {\n const key: WorkbenchPanelKey = side === 'left' ? 'leftRail' : 'rightRail';\n const resize = resolveResize(id, key, panel);\n return (\n <aside\n id={workbenchRegionId(id, key)}\n class={`kui-workbench__rail kui-workbench__rail--${side}`}\n data-workbench-rail={side}\n data-appearance={\n !panel.toolbar && panel.pane?.appearance === 'sunken'\n ? 'sunken'\n : undefined\n }\n data-collapsed={String(panel.collapsed ?? false)}\n data-outlined={\n !panel.collapsed && panel.presentation !== 'hidden' && panel.outlined\n ? 'true'\n : undefined\n }\n data-separator={panel.separator ?? 'auto'}\n data-collapse-motion={panel.collapseMotion ?? 'slide'}\n data-content-overflow={panel.contentOverflow ?? 'clip'}\n data-presentation={panel.presentation ?? 'inline'}\n data-responsive-overlay-at={responsiveAt(\n panel.responsiveOverlayAt ?? 'narrow',\n )}\n data-compact-overlay={panel.compactOverlay ?? 'inset'}\n {...resizeAttributes(resize)}\n aria-label={panel.label || undefined}\n aria-hidden={hiddenFromAccessibility(panel)}\n tabindex={\n panel.collapsed || panel.presentation === 'hidden'\n ? panel.tabIndex === undefined\n ? undefined\n : -1\n : panel.tabIndex\n }\n inert={Boolean(panel.collapsed)}\n style={panelStyle(panel, resize, '--kui-workbench-rail-width')}\n >\n <div\n class=\"kui-workbench__panel-content\"\n data-workbench-panel-content\n inert={Boolean(panel.collapsed)}\n >\n {panelBody(id, key, panel)}\n </div>\n {resize && (\n <PanelHandle\n panel={panel}\n resize={resize}\n label={panel.label || DEFAULT_LABELS[key]}\n />\n )}\n </aside>\n );\n}\n\nfunction Drawer({ id, panel }: { id: string; panel: WorkbenchPanel }) {\n const resize = resolveResize(id, 'bottomDrawer', panel);\n return (\n <section\n id={workbenchRegionId(id, 'bottomDrawer')}\n class=\"kui-workbench__drawer\"\n data-workbench-drawer\n data-appearance={\n !panel.toolbar && panel.pane?.appearance === 'sunken'\n ? 'sunken'\n : undefined\n }\n data-collapsed={String(panel.collapsed ?? false)}\n data-outlined={\n !panel.collapsed && panel.presentation !== 'hidden' && panel.outlined\n ? 'true'\n : undefined\n }\n data-separator={panel.separator ?? 'auto'}\n data-collapse-motion={panel.collapseMotion ?? 'slide'}\n data-content-overflow={panel.contentOverflow ?? 'clip'}\n data-presentation={panel.presentation ?? 'inline'}\n data-responsive-overlay-at={responsiveAt(panel.responsiveOverlayAt)}\n {...resizeAttributes(resize)}\n aria-label={panel.label || undefined}\n aria-hidden={hiddenFromAccessibility(panel)}\n tabindex={\n panel.collapsed || panel.presentation === 'hidden'\n ? panel.tabIndex === undefined\n ? undefined\n : -1\n : panel.tabIndex\n }\n inert={Boolean(panel.collapsed)}\n style={panelStyle(panel, resize, '--kui-workbench-drawer-height')}\n >\n <div\n class=\"kui-workbench__panel-content\"\n data-workbench-panel-content\n inert={Boolean(panel.collapsed)}\n >\n {panelBody(id, 'bottomDrawer', panel)}\n </div>\n {resize && (\n <PanelHandle\n panel={panel}\n resize={resize}\n label={panel.label || DEFAULT_LABELS.bottomDrawer}\n />\n )}\n </section>\n );\n}\n\n/** A collapsed panel's restore control, outside the clipped panel. */\nfunction restore(\n panel: WorkbenchPanel | undefined,\n side: 'left' | 'right' | 'bottom',\n position: ResizableRegionRestorePosition,\n generated: SafeHtml | undefined,\n) {\n const control = panel?.restoreControl ?? generated;\n if (!panel?.collapsed || !control || panel.presentation === 'hidden')\n return '';\n return (\n <div\n class=\"kui-workbench__restore\"\n data-panel={side}\n data-position={panel.restorePosition ?? position}\n >\n {control}\n </div>\n );\n}\n\n/**\n * The Xcode-like multi-panel workspace: a collapsible left rail, right rail, and\n * bottom drawer around a central work area (any absent). Collapsing snaps the\n * panel's track to zero in one reflow while its fixed-size content slides out via\n * a composited transform — the instant-width / sliding-content technique, so the\n * work area relayouts once, not per frame. Bottom-drawer content stays anchored\n * to the shell's stable bottom edge throughout that transition. The app owns\n * each `collapsed` flag; the collapse is pure CSS. A collapsed panel renders\n * `inert` and `aria-hidden`, so neither Tab nor assistive technology reaches\n * controls that have slid out of view or an empty landmark (its restore control\n * lives outside it and stays reachable). A panel may opt in to drag and keyboard resizing with\n * `resizable`, which `wireWorkbench` drives. See `docs/23-app-layouts.md` §3.3.\n */\nexport function Workbench({\n id,\n label,\n main,\n leftRail,\n rightRail,\n bottomDrawer,\n mainToolbar,\n mainHeader,\n mainFooter,\n mainBottomToolbar,\n mainHeaderPlacement,\n mainFooterPlacement,\n mainPane,\n mainLabel,\n mainTabIndex,\n mainOutlined = false,\n mainHeaderList,\n mainFooterList,\n mainMinSize = WORKBENCH_MAIN_MIN_SIZE,\n mainMinHeight = WORKBENCH_MAIN_MIN_HEIGHT,\n overlayBackdrop = false,\n className = '',\n slot,\n}: WorkbenchProps) {\n // Each work-area minimum applies only on an axis a panel shares with it:\n // the width beside a rail, the height above the drawer.\n const px = (value: number) => Math.max(0, Math.round(value));\n const mainMin = leftRail || rightRail ? px(mainMinSize) : undefined;\n const mainMinBlock = bottomDrawer ? px(mainMinHeight) : undefined;\n const style = [\n mainMin === undefined ? '' : `--_kui-workbench-main-min-width:${mainMin}px`,\n mainMinBlock === undefined\n ? ''\n : `--_kui-workbench-main-min-height:${mainMinBlock}px`,\n ]\n .filter(Boolean)\n .join(';');\n return (\n <section\n class={`kui-workbench ${className}`.trim()}\n id={id}\n data-component=\"workbench\"\n data-main-min-size={mainMin === undefined ? undefined : String(mainMin)}\n data-main-min-height={\n mainMinBlock === undefined ? undefined : String(mainMinBlock)\n }\n data-left-inline-expanded={\n inline(leftRail) && expanded(leftRail) ? 'true' : undefined\n }\n data-right-inline-expanded={\n inline(rightRail) && expanded(rightRail) ? 'true' : undefined\n }\n data-left-responsive-inline={\n inline(leftRail) ? responsiveRail(leftRail) : undefined\n }\n data-right-responsive-inline={\n inline(rightRail) ? responsiveRail(rightRail) : undefined\n }\n data-left-responsive-expanded={\n inline(leftRail) && expanded(leftRail)\n ? responsiveRail(leftRail)\n : undefined\n }\n data-right-responsive-expanded={\n inline(rightRail) && expanded(rightRail)\n ? responsiveRail(rightRail)\n : undefined\n }\n data-rail-overlay-expanded={\n (leftRail?.presentation === 'overlay' && expanded(leftRail)) ||\n (rightRail?.presentation === 'overlay' && expanded(rightRail))\n ? 'true'\n : undefined\n }\n data-drawer-overlay-expanded={\n bottomDrawer?.presentation === 'overlay' && expanded(bottomDrawer)\n ? 'true'\n : undefined\n }\n data-drawer-responsive-expanded={\n inline(bottomDrawer) && expanded(bottomDrawer)\n ? responsiveDrawer(bottomDrawer)\n : undefined\n }\n data-overlay-backdrop={overlayBackdrop ? 'true' : undefined}\n data-responsive-overlay={\n responsiveRail(leftRail) ||\n responsiveRail(rightRail) ||\n responsiveDrawer(bottomDrawer)\n ? 'true'\n : undefined\n }\n style={style || undefined}\n aria-label={label}\n slot={slot}\n >\n {leftRail && <Rail id={id} side=\"left\" panel={leftRail} />}\n {restore(\n leftRail,\n 'left',\n 'bottom-start',\n floatingRestore(id, 'leftRail', leftRail, Boolean(mainToolbar)),\n )}\n <div class=\"kui-workbench__center\">\n <div\n class=\"kui-workbench__main\"\n data-workbench-main\n data-outlined={mainOutlined ? 'true' : undefined}\n role={mainLabel ? 'region' : undefined}\n aria-label={mainLabel}\n tabindex={mainTabIndex}\n data-drawer-inline-expanded={\n inline(bottomDrawer) && expanded(bottomDrawer) ? 'true' : undefined\n }\n data-drawer-responsive-inline={\n inline(bottomDrawer) ? responsiveDrawer(bottomDrawer) : undefined\n }\n data-appearance={\n !mainToolbar &&\n !mainBottomToolbar &&\n !mainHeader &&\n !mainFooter &&\n mainPane?.appearance === 'sunken'\n ? 'sunken'\n : undefined\n }\n >\n {mainBody({\n workbenchId: id,\n main,\n mainToolbar,\n mainHeader,\n mainFooter,\n mainBottomToolbar,\n mainHeaderPlacement,\n mainFooterPlacement,\n mainPane,\n mainHeaderList,\n mainFooterList,\n leftRail,\n rightRail,\n bottomDrawer,\n })}\n </div>\n {bottomDrawer && <Drawer id={id} panel={bottomDrawer} />}\n {restore(\n bottomDrawer,\n 'bottom',\n 'bottom-end',\n floatingRestore(\n id,\n 'bottomDrawer',\n bottomDrawer,\n Boolean(mainBottomToolbar),\n ),\n )}\n </div>\n {rightRail && <Rail id={id} side=\"right\" panel={rightRail} />}\n {restore(\n rightRail,\n 'right',\n 'bottom-end',\n floatingRestore(id, 'rightRail', rightRail, Boolean(mainToolbar)),\n )}\n {overlayBackdrop ? (\n <div\n class=\"kui-workbench__backdrop\"\n data-workbench-backdrop\n aria-hidden=\"true\"\n />\n ) : null}\n </section>\n );\n}\n"]}
|
|
@@ -42,6 +42,7 @@ function NavStack({
|
|
|
42
42
|
panelToggle,
|
|
43
43
|
hideToolbar = false,
|
|
44
44
|
bottomToolbar,
|
|
45
|
+
separator = "auto",
|
|
45
46
|
chromeDividers = "scroll",
|
|
46
47
|
className = "",
|
|
47
48
|
slot
|
|
@@ -59,6 +60,7 @@ function NavStack({
|
|
|
59
60
|
"data-component": "nav-stack",
|
|
60
61
|
"data-nav-stack-id": id,
|
|
61
62
|
"data-depth": String(views.length),
|
|
63
|
+
"data-separator": separator,
|
|
62
64
|
"data-chrome-dividers": chromeDividers === "always" || chromeDividers === "none" ? chromeDividers : void 0,
|
|
63
65
|
"aria-label": label,
|
|
64
66
|
slot,
|
|
@@ -169,4 +171,4 @@ function NavStack({
|
|
|
169
171
|
|
|
170
172
|
export { NavStack };
|
|
171
173
|
|
|
172
|
-
//# sourceMappingURL=chunk-
|
|
174
|
+
//# sourceMappingURL=chunk-SJW5BCEQ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/navigation/nav-stack/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-SJW5BCEQ.js","sourcesContent":["import { ChevronLeft } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { PanelBottomToolbar } from '../../../shared/panels/panel-toolbar.js';\nimport { Toolbar, type ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n type HeadingLevel,\n ToolbarText,\n type ToolbarTextSize,\n} from '../../actions/toolbar-text/toolbar-text.js';\nimport { List, type ListConfig } from '../../collections/list/list.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView extends NavPane<\n NavStackViewToolbar,\n PanelBottomToolbar\n> {\n /** Stable identity for keyed reconcile and transition direction. */\n key: string;\n}\n\n/** Per-view top toolbar. The stack supplies its back control before `leading`. */\nexport interface NavStackViewToolbar extends NavStackToolbarConfig {\n title?: string;\n leading?: KerfUiContent;\n center?: KerfUiContent;\n trailing?: KerfUiContent;\n}\n\n/** A view's structured bottom toolbar; it cross-fades on navigation. */\nexport type NavStackViewBottomToolbar = PanelBottomToolbar;\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n /** Accessible name of the top toolbar (default: none). */\n label?: string;\n /** Size of the view title's `ToolbarText` (default `large`). */\n titleSize?: ToolbarTextSize;\n /** Expose the view title as a heading at this level (default: a plain span). */\n headingLevel?: HeadingLevel;\n}\n\nexport interface NavStackProps {\n id: string;\n /** Accessible name for the stack region. */\n label: string;\n /** The stack, root first; the last entry is the active top view. */\n views: NavStackView[];\n /** Accessible label for the icon-only back control (default \"Back\"). */\n backLabel?: string;\n /** The back control's icon (default a chevron-left `LucideIcon`). */\n backIcon?: KerfUiContent;\n /**\n * Visible text beside the back icon, such as the previous view's title\n * (default: icon only). When set, the text names the control and\n * `backLabel` is not used.\n */\n backText?: string;\n /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n toolbarConfig?: NavStackToolbarConfig;\n /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */\n panelToggle?: KerfUiContent;\n /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n hideToolbar?: boolean;\n /** Optional persistent bottom toolbar used when the active view does not provide one. */\n bottomToolbar?: NavStackViewBottomToolbar;\n /**\n * Stack chrome separator. `auto` (default) draws both available edges\n * against a sunken active Pane and otherwise follows `chromeDividers`;\n * `hidden` suppresses the stack-owned edges.\n */\n separator?: 'auto' | 'hidden';\n /**\n * The line under the top chrome and over the bottom toolbar, where they\n * meet the active view. `scroll` (default) shows the chrome's line only\n * while the view's content is scrolled beneath it, and the bottom\n * toolbar's only while more content lies below — never when the content\n * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n * wired above the stack; unwired, neither shows. `always` shows both\n * without the wiring; `none` neither, even when wired. The line is drawn\n * inside the chrome, so no state moves the chrome or the content. A\n * A sunken active Pane still draws the separator unless\n * `separator=\"hidden\"`. A `toolbarConfig.dividerSides` edge is the Toolbar's\n * own and is unaffected.\n */\n chromeDividers?: 'scroll' | 'always' | 'none';\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nconst DEFAULT_SAFE_AREA_EDGES = [\n 'block-start',\n 'inline-start',\n 'inline-end',\n] as const;\n\nconst DEFAULT_BOTTOM_SAFE_AREA_EDGES = [\n 'block-end',\n 'inline-start',\n 'inline-end',\n] as const;\n\nfunction chromeList(content: KerfUiContent, config?: ListConfig) {\n return (\n <List\n dividerSides={config?.dividerSides}\n gap={config?.gap}\n hAlign={config?.hAlign}\n vAlign={config?.vAlign}\n textInsets={config?.textInsets}\n controlInsets={config?.controlInsets}\n >\n {content}\n </List>\n );\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `toolbar` fills the zones,\n * and `toolbarConfig` supplies defaults. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n id,\n label,\n views,\n backLabel = 'Back',\n backIcon,\n backText,\n toolbarConfig = {},\n panelToggle,\n hideToolbar = false,\n bottomToolbar,\n separator = 'auto',\n chromeDividers = 'scroll',\n className = '',\n slot,\n}: NavStackProps) {\n const topIndex = views.length - 1;\n const top = views[topIndex];\n const topToolbar = top?.toolbar;\n const bottom = top?.bottomToolbar ?? bottomToolbar;\n const canPop = views.length > 1;\n return (\n <section\n class={`kui-nav-stack ${className}`.trim()}\n id={id}\n data-component=\"nav-stack\"\n data-nav-stack-id={id}\n data-depth={String(views.length)}\n data-separator={separator}\n data-chrome-dividers={\n chromeDividers === 'always' || chromeDividers === 'none'\n ? chromeDividers\n : undefined\n }\n aria-label={label}\n slot={slot}\n >\n {!hideToolbar && (\n <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n <Toolbar\n label={topToolbar?.label ?? toolbarConfig.label}\n dividerSides={\n topToolbar?.dividerSides ?? toolbarConfig.dividerSides\n }\n centerAlign={topToolbar?.centerAlign ?? toolbarConfig.centerAlign}\n responsive={topToolbar?.responsive ?? toolbarConfig.responsive}\n responsiveAt={\n topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt\n }\n safeAreaEdges={\n topToolbar?.safeAreaEdges ??\n toolbarConfig.safeAreaEdges ??\n DEFAULT_SAFE_AREA_EDGES\n }\n leading={\n <>\n {canPop && (\n <ToolbarControlGroup\n appearance=\"borderless\"\n shape=\"rounded\"\n content={backText ? 'mixed' : 'icon'}\n single\n >\n <button\n type=\"button\"\n class=\"kui-nav-stack__back\"\n data-nav-back\n aria-label={backText ? undefined : backLabel}\n >\n {backIcon ?? (\n <LucideIcon\n icon={ChevronLeft}\n name=\"chevron-left\"\n className=\"kui-nav-stack__back-icon\"\n />\n )}\n {backText ? <span>{backText}</span> : null}\n </button>\n </ToolbarControlGroup>\n )}\n {topToolbar?.leading}\n <ToolbarText\n text={topToolbar?.title ?? ''}\n size={\n topToolbar?.titleSize ?? toolbarConfig.titleSize ?? 'large'\n }\n headingLevel={\n topToolbar?.headingLevel ?? toolbarConfig.headingLevel\n }\n fill\n />\n </>\n }\n center={topToolbar?.center}\n trailing={\n <>\n {topToolbar?.trailing}\n {panelToggle}\n </>\n }\n />\n </div>\n )}\n <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n {views.map((view, index) => (\n <article\n class=\"kui-nav-stack__view\"\n data-key={view.key}\n data-nav-key={view.key}\n data-nav-active={String(index === topIndex)}\n aria-hidden={String(index !== topIndex)}\n >\n {view.pane ||\n view.header !== undefined ||\n view.footer !== undefined ? (\n <Pane\n appearance={view.pane?.appearance}\n deepInset={view.pane?.deepInset}\n tabIndex={view.pane?.tabIndex}\n outlined={view.pane?.outlined}\n contentElement={view.pane?.contentElement}\n contentLabel={view.pane?.contentLabel}\n separators={view.pane?.separators}\n safeAreaEdges={view.pane?.safeAreaEdges}\n chromeDividers={view.pane?.chromeDividers}\n header={\n view.header === undefined ? undefined : (\n <div data-nav-stack-header>\n {chromeList(view.header, view.headerList)}\n </div>\n )\n }\n footer={\n view.footer === undefined ? undefined : (\n <div data-nav-stack-footer>\n {chromeList(view.footer, view.footerList)}\n </div>\n )\n }\n >\n {view.content}\n </Pane>\n ) : (\n view.content\n )}\n </article>\n ))}\n </div>\n {bottom && (\n <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n <Toolbar\n position=\"footer\"\n label={bottom.label}\n dividerSides={bottom.dividerSides}\n centerAlign={bottom.centerAlign}\n responsive={bottom.responsive}\n responsiveAt={bottom.responsiveAt}\n safeAreaEdges={\n bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES\n }\n leading={bottom.leading}\n center={bottom.center}\n trailing={bottom.trailing}\n />\n </footer>\n )}\n </section>\n );\n}\n"]}
|
|
@@ -72,6 +72,12 @@ interface NavStackProps {
|
|
|
72
72
|
hideToolbar?: boolean;
|
|
73
73
|
/** Optional persistent bottom toolbar used when the active view does not provide one. */
|
|
74
74
|
bottomToolbar?: NavStackViewBottomToolbar;
|
|
75
|
+
/**
|
|
76
|
+
* Stack chrome separator. `auto` (default) draws both available edges
|
|
77
|
+
* against a sunken active Pane and otherwise follows `chromeDividers`;
|
|
78
|
+
* `hidden` suppresses the stack-owned edges.
|
|
79
|
+
*/
|
|
80
|
+
separator?: 'auto' | 'hidden';
|
|
75
81
|
/**
|
|
76
82
|
* The line under the top chrome and over the bottom toolbar, where they
|
|
77
83
|
* meet the active view. `scroll` (default) shows the chrome's line only
|
|
@@ -81,7 +87,9 @@ interface NavStackProps {
|
|
|
81
87
|
* wired above the stack; unwired, neither shows. `always` shows both
|
|
82
88
|
* without the wiring; `none` neither, even when wired. The line is drawn
|
|
83
89
|
* inside the chrome, so no state moves the chrome or the content. A
|
|
84
|
-
*
|
|
90
|
+
* A sunken active Pane still draws the separator unless
|
|
91
|
+
* `separator="hidden"`. A `toolbarConfig.dividerSides` edge is the Toolbar's
|
|
92
|
+
* own and is unaffected.
|
|
85
93
|
*/
|
|
86
94
|
chromeDividers?: 'scroll' | 'always' | 'none';
|
|
87
95
|
className?: string;
|
|
@@ -96,6 +104,6 @@ interface NavStackProps {
|
|
|
96
104
|
* and `toolbarConfig` supplies defaults. A single-pane
|
|
97
105
|
* layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.
|
|
98
106
|
*/
|
|
99
|
-
declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, chromeDividers, className, slot, }: NavStackProps): kerfjs.SafeHtml;
|
|
107
|
+
declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, separator, chromeDividers, className, slot, }: NavStackProps): kerfjs.SafeHtml;
|
|
100
108
|
|
|
101
109
|
export { type NavStackProps as N, type NavStackView as a, type NavPane as b, NavStack as c, type NavStackToolbarConfig as d, type NavStackViewBottomToolbar as e, type NavStackViewToolbar as f };
|
package/dist/nav-stack.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { c as NavStack, N as NavStackProps, d as NavStackToolbarConfig, a as NavStackView, e as NavStackViewBottomToolbar, f as NavStackViewToolbar } from './nav-stack-
|
|
1
|
+
export { c as NavStack, N as NavStackProps, d as NavStackToolbarConfig, a as NavStackView, e as NavStackViewBottomToolbar, f as NavStackViewToolbar } from './nav-stack-BvSKY448.js';
|
|
2
2
|
import 'kerfjs';
|
|
3
3
|
import './semantic-content-BbzjvSu9.js';
|
|
4
4
|
import './list.js';
|
package/dist/nav-stack.js
CHANGED
package/dist/split-view.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as kerfjs from 'kerfjs';
|
|
2
2
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
3
|
-
import { N as NavStackProps, a as NavStackView } from './nav-stack-
|
|
3
|
+
import { N as NavStackProps, a as NavStackView } from './nav-stack-BvSKY448.js';
|
|
4
4
|
import { ResizableRegionProps } from './resizable-region.js';
|
|
5
5
|
import './list.js';
|
|
6
6
|
import './flex-alignment-4ms8ZbV8.js';
|
package/dist/split-view.js
CHANGED
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
background-color: transparent;
|
|
7
7
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h8v8H0zM8 8h8v8H8z'/%3E%3C/svg%3E");
|
|
8
8
|
background-size: 1rem 1rem;
|
|
9
|
-
padding: var(--kui-space-xs);
|
|
10
9
|
}
|
|
11
10
|
|
|
12
11
|
.kui-catalog__stage[data-background-style="vertical-stripes"] {
|
|
@@ -14,6 +13,21 @@
|
|
|
14
13
|
background-size: 1rem 1rem;
|
|
15
14
|
}
|
|
16
15
|
|
|
16
|
+
.kui-catalog__stage[data-background-style="layout-guide"] {
|
|
17
|
+
background-image: linear-gradient(
|
|
18
|
+
to right,
|
|
19
|
+
transparent 15px,
|
|
20
|
+
rgb(142 142 147 / 12%) 15px 16px,
|
|
21
|
+
transparent 16px 23px,
|
|
22
|
+
rgb(142 142 147 / 12%) 23px 24px,
|
|
23
|
+
transparent 24px 32px,
|
|
24
|
+
rgb(142 142 147 / 12%) 32px 33px,
|
|
25
|
+
transparent 33px
|
|
26
|
+
);
|
|
27
|
+
background-size: auto;
|
|
28
|
+
background-repeat: no-repeat;
|
|
29
|
+
}
|
|
30
|
+
|
|
17
31
|
.kui-catalog__stage[data-background-style="surface"] {
|
|
18
32
|
background-color: var(--kui-color-surface);
|
|
19
33
|
background-image: none;
|
|
@@ -33,7 +47,7 @@
|
|
|
33
47
|
width: min(100%, 70rem);
|
|
34
48
|
min-width: 0;
|
|
35
49
|
min-height: 100%;
|
|
36
|
-
padding: var(--kui-
|
|
50
|
+
padding: var(--kui-space-m);
|
|
37
51
|
box-sizing: border-box;
|
|
38
52
|
place-items: start;
|
|
39
53
|
}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
--kui-pane-separator-inline-start-width: 0;
|
|
5
5
|
--kui-pane-separator-inline-end-width: 0;
|
|
6
6
|
|
|
7
|
+
position: relative;
|
|
7
8
|
display: grid;
|
|
8
9
|
min-width: 0;
|
|
9
10
|
min-height: 0;
|
|
@@ -27,6 +28,18 @@
|
|
|
27
28
|
outline-offset: -3px;
|
|
28
29
|
}
|
|
29
30
|
|
|
31
|
+
/* A bleeding child can establish its own paint layer above the Pane outline.
|
|
32
|
+
Repeat the ring as an overlay after the content, without intercepting input. */
|
|
33
|
+
.kui-pane:is(:focus-visible, [data-outlined="true"])::after {
|
|
34
|
+
position: absolute;
|
|
35
|
+
z-index: 1;
|
|
36
|
+
outline: var(--kui-focus-ring);
|
|
37
|
+
outline-offset: -3px;
|
|
38
|
+
content: "";
|
|
39
|
+
inset: 0;
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
30
43
|
/* Paint the active scroll owner once, so alpha lowered colors do not stack.
|
|
31
44
|
Fixed chrome leaves the content slot scrolling; auto chrome lets the Pane
|
|
32
45
|
root scroll in its short mode, while its content remains transparent. */
|
|
@@ -180,6 +193,8 @@
|
|
|
180
193
|
/* Add one outer gutter without changing the inherited item-margin token.
|
|
181
194
|
Nested Row, List, and Grid therefore keep their own default 8px insets. */
|
|
182
195
|
.kui-pane[data-deep-inset="true"] > .kui-pane__content {
|
|
196
|
+
/* Reserve a vertical scrollbar gutter when the host uses opaque edge-to-edge content. */
|
|
197
|
+
scrollbar-gutter: var(--kui-pane-scrollbar-gutter, auto);
|
|
183
198
|
--_kui-pane-deep-block-inset: var(--kui-space-xs);
|
|
184
199
|
--kui-pane-content-inset-inline-start: calc(
|
|
185
200
|
var(--_kui-pane-safe-inline-start) + var(--kui-space-xs)
|
|
@@ -100,6 +100,7 @@
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
.kui-workbench__main {
|
|
103
|
+
position: relative;
|
|
103
104
|
flex: 1;
|
|
104
105
|
min-height: 0;
|
|
105
106
|
overflow: auto;
|
|
@@ -113,6 +114,22 @@
|
|
|
113
114
|
outline-offset: -3px;
|
|
114
115
|
}
|
|
115
116
|
|
|
117
|
+
/* A sole Pane can host an opaque full-width scroller above the main outline.
|
|
118
|
+
Keep the selected work-area ring in the final paint layer, without blocking
|
|
119
|
+
controls in that Pane. Other main compositions retain their own outline. */
|
|
120
|
+
.kui-workbench__main:has(> [data-component="pane"]:only-child):is(
|
|
121
|
+
:focus-visible,
|
|
122
|
+
[data-outlined="true"]
|
|
123
|
+
)::after {
|
|
124
|
+
position: absolute;
|
|
125
|
+
z-index: 1;
|
|
126
|
+
outline: var(--kui-focus-ring);
|
|
127
|
+
outline-offset: -3px;
|
|
128
|
+
content: "";
|
|
129
|
+
inset: 0;
|
|
130
|
+
pointer-events: none;
|
|
131
|
+
}
|
|
132
|
+
|
|
116
133
|
/* When no Pane chrome is composed, the Workbench region owns its scroll.
|
|
117
134
|
A resizable auto-overflow panel instead scrolls its content box so its
|
|
118
135
|
separator handle remains fixed. Paint only that owner. */
|
|
@@ -197,10 +197,19 @@
|
|
|
197
197
|
neither, whatever it reports. The chrome's line is an overlaid 1px pseudo-element
|
|
198
198
|
(whatever the chrome holds never covers it) and the bottom's border is
|
|
199
199
|
always there, so showing either never moves the chrome, the toolbar, or
|
|
200
|
-
the content. A cross-fading chrome copy keeps the line its snapshot had.
|
|
201
|
-
|
|
200
|
+
the content. A cross-fading chrome copy keeps the line its snapshot had.
|
|
201
|
+
With `separator="auto"`, an active sunken Pane also colors both available
|
|
202
|
+
edges; `hidden` suppresses the stack-owned lines. */
|
|
203
|
+
.kui-nav-stack[data-separator="auto"]:has(
|
|
204
|
+
> .kui-nav-stack__viewport
|
|
205
|
+
> .kui-nav-stack__view[data-nav-active="true"]
|
|
206
|
+
> [data-component="pane"][data-appearance="sunken"]
|
|
207
|
+
)
|
|
208
|
+
> .kui-nav-stack__chrome::after,
|
|
209
|
+
.kui-nav-stack[data-separator="auto"]:not([data-chrome-dividers])
|
|
202
210
|
> .kui-nav-stack__chrome[data-scroll-divider*="b"]::after,
|
|
203
|
-
.kui-nav-stack[data-chrome-dividers="always"]
|
|
211
|
+
.kui-nav-stack[data-separator="auto"][data-chrome-dividers="always"]
|
|
212
|
+
> .kui-nav-stack__chrome::after {
|
|
204
213
|
position: absolute;
|
|
205
214
|
block-size: 1px;
|
|
206
215
|
background: var(--kui-color-neutral-border-normal);
|
|
@@ -210,9 +219,16 @@
|
|
|
210
219
|
pointer-events: none;
|
|
211
220
|
}
|
|
212
221
|
|
|
213
|
-
.kui-nav-stack
|
|
222
|
+
.kui-nav-stack[data-separator="auto"]:has(
|
|
223
|
+
> .kui-nav-stack__viewport
|
|
224
|
+
> .kui-nav-stack__view[data-nav-active="true"]
|
|
225
|
+
> [data-component="pane"][data-appearance="sunken"]
|
|
226
|
+
)
|
|
227
|
+
> .kui-nav-stack__bottom,
|
|
228
|
+
.kui-nav-stack[data-separator="auto"]:not([data-chrome-dividers])
|
|
214
229
|
> .kui-nav-stack__bottom[data-scroll-divider*="t"],
|
|
215
|
-
.kui-nav-stack[data-chrome-dividers="always"]
|
|
230
|
+
.kui-nav-stack[data-separator="auto"][data-chrome-dividers="always"]
|
|
231
|
+
> .kui-nav-stack__bottom {
|
|
216
232
|
--_kui-nav-stack-bottom-divider: var(--kui-color-neutral-border-normal);
|
|
217
233
|
}
|
|
218
234
|
|
|
@@ -197,10 +197,19 @@
|
|
|
197
197
|
neither, whatever it reports. The chrome's line is an overlaid 1px pseudo-element
|
|
198
198
|
(whatever the chrome holds never covers it) and the bottom's border is
|
|
199
199
|
always there, so showing either never moves the chrome, the toolbar, or
|
|
200
|
-
the content. A cross-fading chrome copy keeps the line its snapshot had.
|
|
201
|
-
|
|
200
|
+
the content. A cross-fading chrome copy keeps the line its snapshot had.
|
|
201
|
+
With `separator="auto"`, an active sunken Pane also colors both available
|
|
202
|
+
edges; `hidden` suppresses the stack-owned lines. */
|
|
203
|
+
.kui-nav-stack[data-separator="auto"]:has(
|
|
204
|
+
> .kui-nav-stack__viewport
|
|
205
|
+
> .kui-nav-stack__view[data-nav-active="true"]
|
|
206
|
+
> [data-component="pane"][data-appearance="sunken"]
|
|
207
|
+
)
|
|
208
|
+
> .kui-nav-stack__chrome::after,
|
|
209
|
+
.kui-nav-stack[data-separator="auto"]:not([data-chrome-dividers])
|
|
202
210
|
> .kui-nav-stack__chrome[data-scroll-divider*="b"]::after,
|
|
203
|
-
.kui-nav-stack[data-chrome-dividers="always"]
|
|
211
|
+
.kui-nav-stack[data-separator="auto"][data-chrome-dividers="always"]
|
|
212
|
+
> .kui-nav-stack__chrome::after {
|
|
204
213
|
position: absolute;
|
|
205
214
|
block-size: 1px;
|
|
206
215
|
background: var(--kui-color-neutral-border-normal);
|
|
@@ -210,9 +219,16 @@
|
|
|
210
219
|
pointer-events: none;
|
|
211
220
|
}
|
|
212
221
|
|
|
213
|
-
.kui-nav-stack
|
|
222
|
+
.kui-nav-stack[data-separator="auto"]:has(
|
|
223
|
+
> .kui-nav-stack__viewport
|
|
224
|
+
> .kui-nav-stack__view[data-nav-active="true"]
|
|
225
|
+
> [data-component="pane"][data-appearance="sunken"]
|
|
226
|
+
)
|
|
227
|
+
> .kui-nav-stack__bottom,
|
|
228
|
+
.kui-nav-stack[data-separator="auto"]:not([data-chrome-dividers])
|
|
214
229
|
> .kui-nav-stack__bottom[data-scroll-divider*="t"],
|
|
215
|
-
.kui-nav-stack[data-chrome-dividers="always"]
|
|
230
|
+
.kui-nav-stack[data-separator="auto"][data-chrome-dividers="always"]
|
|
231
|
+
> .kui-nav-stack__bottom {
|
|
216
232
|
--_kui-nav-stack-bottom-divider: var(--kui-color-neutral-border-normal);
|
|
217
233
|
}
|
|
218
234
|
|
package/dist/styles/pane.css
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
--kui-pane-separator-inline-start-width: 0;
|
|
5
5
|
--kui-pane-separator-inline-end-width: 0;
|
|
6
6
|
|
|
7
|
+
position: relative;
|
|
7
8
|
display: grid;
|
|
8
9
|
min-width: 0;
|
|
9
10
|
min-height: 0;
|
|
@@ -27,6 +28,18 @@
|
|
|
27
28
|
outline-offset: -3px;
|
|
28
29
|
}
|
|
29
30
|
|
|
31
|
+
/* A bleeding child can establish its own paint layer above the Pane outline.
|
|
32
|
+
Repeat the ring as an overlay after the content, without intercepting input. */
|
|
33
|
+
.kui-pane:is(:focus-visible, [data-outlined="true"])::after {
|
|
34
|
+
position: absolute;
|
|
35
|
+
z-index: 1;
|
|
36
|
+
outline: var(--kui-focus-ring);
|
|
37
|
+
outline-offset: -3px;
|
|
38
|
+
content: "";
|
|
39
|
+
inset: 0;
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
30
43
|
/* Paint the active scroll owner once, so alpha lowered colors do not stack.
|
|
31
44
|
Fixed chrome leaves the content slot scrolling; auto chrome lets the Pane
|
|
32
45
|
root scroll in its short mode, while its content remains transparent. */
|
|
@@ -180,6 +193,8 @@
|
|
|
180
193
|
/* Add one outer gutter without changing the inherited item-margin token.
|
|
181
194
|
Nested Row, List, and Grid therefore keep their own default 8px insets. */
|
|
182
195
|
.kui-pane[data-deep-inset="true"] > .kui-pane__content {
|
|
196
|
+
/* Reserve a vertical scrollbar gutter when the host uses opaque edge-to-edge content. */
|
|
197
|
+
scrollbar-gutter: var(--kui-pane-scrollbar-gutter, auto);
|
|
183
198
|
--_kui-pane-deep-block-inset: var(--kui-space-xs);
|
|
184
199
|
--kui-pane-content-inset-inline-start: calc(
|
|
185
200
|
var(--_kui-pane-safe-inline-start) + var(--kui-space-xs)
|
|
@@ -100,6 +100,7 @@
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
.kui-workbench__main {
|
|
103
|
+
position: relative;
|
|
103
104
|
flex: 1;
|
|
104
105
|
min-height: 0;
|
|
105
106
|
overflow: auto;
|
|
@@ -113,6 +114,22 @@
|
|
|
113
114
|
outline-offset: -3px;
|
|
114
115
|
}
|
|
115
116
|
|
|
117
|
+
/* A sole Pane can host an opaque full-width scroller above the main outline.
|
|
118
|
+
Keep the selected work-area ring in the final paint layer, without blocking
|
|
119
|
+
controls in that Pane. Other main compositions retain their own outline. */
|
|
120
|
+
.kui-workbench__main:has(> [data-component="pane"]:only-child):is(
|
|
121
|
+
:focus-visible,
|
|
122
|
+
[data-outlined="true"]
|
|
123
|
+
)::after {
|
|
124
|
+
position: absolute;
|
|
125
|
+
z-index: 1;
|
|
126
|
+
outline: var(--kui-focus-ring);
|
|
127
|
+
outline-offset: -3px;
|
|
128
|
+
content: "";
|
|
129
|
+
inset: 0;
|
|
130
|
+
pointer-events: none;
|
|
131
|
+
}
|
|
132
|
+
|
|
116
133
|
/* When no Pane chrome is composed, the Workbench region owns its scroll.
|
|
117
134
|
A resizable auto-overflow panel instead scrolls its content box so its
|
|
118
135
|
separator handle remains fixed. Paint only that owner. */
|
|
@@ -47,7 +47,7 @@ type CatalogStageRootAttributes = Readonly<Record<`data-${string}`, string | und
|
|
|
47
47
|
'data-background-style'?: never;
|
|
48
48
|
}>;
|
|
49
49
|
/** Background used behind catalog specimens. */
|
|
50
|
-
type CatalogBackgroundStyle = 'checkerboard' | 'vertical-stripes' | 'surface' | 'sunken';
|
|
50
|
+
type CatalogBackgroundStyle = 'checkerboard' | 'vertical-stripes' | 'layout-guide' | 'surface' | 'sunken';
|
|
51
51
|
/**
|
|
52
52
|
* The Catalog sidebar's configuration, forwarded to its Workbench left rail.
|
|
53
53
|
* Everything is optional; omitted fields keep the Catalog's defaults.
|
package/dist/workbench.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SafeHtml } from 'kerfjs';
|
|
2
2
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
3
|
-
import { b as NavPane, N as NavStackProps } from './nav-stack-
|
|
3
|
+
import { b as NavPane, N as NavStackProps } from './nav-stack-BvSKY448.js';
|
|
4
4
|
import { ListConfig } from './list.js';
|
|
5
5
|
import { PaneConfig } from './pane.js';
|
|
6
6
|
import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
|
package/dist/workbench.js
CHANGED
package/docs/catalog.md
CHANGED
|
@@ -39,7 +39,8 @@ description?, tags?, resources?, related? }] }`. Each entry becomes a sidebar
|
|
|
39
39
|
() => SafeHtml` in your app and call `renderers[active]()` in your render.
|
|
40
40
|
- **`backgroundStyle`** — the preview stage backdrop: `checkerboard` (default,
|
|
41
41
|
8px squares),
|
|
42
|
-
`vertical-stripes` (alternating 8px bands), `
|
|
42
|
+
`vertical-stripes` (alternating 8px bands), `layout-guide` (single-pixel
|
|
43
|
+
vertical rules at 15px, 23px, and 32px from the stage edge), `surface`, or `sunken`. The
|
|
43
44
|
patterned choices share the main Pane's sunken surface and reveal transparent
|
|
44
45
|
specimen edges; `surface` paints an
|
|
45
46
|
opaque backdrop. `sunken` leaves the stage
|
package/docs/layout.md
CHANGED
|
@@ -44,6 +44,10 @@ inline edge then sits 16px from it. The default is `false`. This extra padding
|
|
|
44
44
|
adds to any device safe-area inset; a header or footer still owns the safe-area
|
|
45
45
|
padding at its edge while the content keeps its extra 8px. The pane's header,
|
|
46
46
|
footer, background, and separators still reach their usual edges.
|
|
47
|
+
For opaque edge-to-edge content, set `--kui-pane-scrollbar-gutter: stable` on the
|
|
48
|
+
Pane or an ancestor. This reserves a vertical scrollbar gutter so a child that
|
|
49
|
+
bleeds through the inline padding stops before the scroll indicator. The default
|
|
50
|
+
is `auto`; the optional gutter is outside the published content inset values.
|
|
47
51
|
|
|
48
52
|
```tsx
|
|
49
53
|
<Pane deepInset>
|
|
@@ -65,6 +69,8 @@ draws the standard focus ring. Set `outlined` to keep that ring visible as an
|
|
|
65
69
|
application-controlled state, such as a drop target, whether or not the Pane is
|
|
66
70
|
focused. `PaneConfig` forwards both options through layouts that render a Pane.
|
|
67
71
|
Give a focusable Pane a useful `label` when it represents a distinct region.
|
|
72
|
+
The ring paints above edge-to-edge child surfaces without intercepting their
|
|
73
|
+
buttons, selects, or nested scrolling.
|
|
68
74
|
|
|
69
75
|
### Lowered work surfaces
|
|
70
76
|
|
package/docs/nav-stack.md
CHANGED
|
@@ -138,9 +138,17 @@ When a remembered control was removed during the controlled rerender, the same
|
|
|
138
138
|
fallback order applies. Disposing the helper stops future transitions and
|
|
139
139
|
cleans up any temporary fallback `tabindex` it added.
|
|
140
140
|
|
|
141
|
-
##
|
|
141
|
+
## Separators and scroll dividers
|
|
142
142
|
|
|
143
|
-
|
|
143
|
+
`separator="auto"` (the default) draws a line under the top chrome and above
|
|
144
|
+
the optional bottom toolbar when the active view's Pane has
|
|
145
|
+
`appearance="sunken"`, even if its content fits and no scroll wiring runs. The
|
|
146
|
+
line follows the active view on push and pop. Set `separator="hidden"` to hide
|
|
147
|
+
both stack-owned edges, including lines requested by `chromeDividers`. The
|
|
148
|
+
existing 1px edges change color without moving the content. A view's own Pane
|
|
149
|
+
header and footer separators remain controlled by that Pane.
|
|
150
|
+
|
|
151
|
+
For a flat active view, the stack draws no permanent line. With
|
|
144
152
|
`wireScrollDividers(appRoot)` installed (see
|
|
145
153
|
[Layout › Scroll dividers](layout.md#scroll-dividers)), the top chrome shows a
|
|
146
154
|
line along its bottom edge only while the active view's content is scrolled
|
|
@@ -153,10 +161,11 @@ the line keys on whichever actually scrolls — the view, or the Pane's content
|
|
|
153
161
|
and a Pane header or footer draws its own boundary instead. An explicit
|
|
154
162
|
`toolbarConfig.dividerSides` still draws a permanent Toolbar edge.
|
|
155
163
|
|
|
156
|
-
`chromeDividers` configures both lines, with the same values as a `Pane`'s:
|
|
164
|
+
`chromeDividers` configures both lines for flat views, with the same values as a `Pane`'s:
|
|
157
165
|
`scroll` (the default) follows the scroll state above and draws nothing until
|
|
158
166
|
the wiring runs; `always` keeps both lines, with or without the wiring; `none`
|
|
159
|
-
drops them even when the wiring reports scroll state.
|
|
167
|
+
drops them even when the wiring reports scroll state. A sunken active Pane still
|
|
168
|
+
shows the separator unless `separator="hidden"`. This option does not change the
|
|
160
169
|
top Toolbar's own `dividerSides`.
|
|
161
170
|
|
|
162
171
|
```tsx
|
package/docs/ux-demo.md
CHANGED
|
@@ -28,7 +28,7 @@ deterministic state, and semantic layout owners from the [recipe guide](./recipe
|
|
|
28
28
|
- `ai/component-catalog.json` is the canonical catalog metadata. A deterministic checked-in projection supplies the demo's unique id, category, kind (`component`, `composition`, or `recipe`), source (`kerf` or `webawesome`), name, description, recommendation, direct `uses` dependencies, existing documentation path, and demo-source path; first-party, recipe, and Web Awesome renderer maps are exhaustively typed against its generated id unions. Functional groups follow their authored importance order; components precede compositions inside each group, equal-importance entries use alphabetical order, and the Recipes group comes last. Composition names stay concise and project a visible `Composition` sidebar tag. Non-supported Web Awesome recommendations project to a visible `Discouraged` tag, with Popup as the deliberate conditional exception. Demo paths resolve to the matching `ui/ux-demo/demos/<id>.tsx` or `ui/ux-demo/recipes/*.tsx` file, or to `ui/ux-demo/webawesome-demos.tsx` for Web Awesome entries. `ui/ux-demo/main.tsx` owns only the catalog shell, shared state, routing, and interaction wiring. First-party component entries additionally derive `ui/src/<public-subpath>.tsx` from their canonical `delivery.browserImport` or opt-in `delivery.moduleImport`.
|
|
29
29
|
- Every detail footer groups compact `Demo source` and `Guidance` actions; first-party component details also expose `Component source`. Web Awesome details say `Integration guidance` to distinguish the local integration contract from the upstream component implementation. Each button retains its repository-relative path in the DOM for verification and uses a deploy-safe absolute GitHub blob URL with a contextual new-tab name; the demo does not depend on a local source server or add a package runtime export. At phone widths, the resource group and related-component selector stack as full-width rows, with any resource overflow contained locally so labels cannot overlap the selector or widen the document.
|
|
30
30
|
- The master/detail shell groups first-party routes by category with production `ListHeader` and `ListItem` components. Catalog entries can supply short reusable trailing tags; the Web Awesome projection uses them to label exactly the 15 discouraged choices. The 70 ecosystem components live in a separate `Web Awesome` disclosure with seven subgroups, so they remain discoverable without being presented as first-class `@kerfjs/ui` exports. Direct Web Awesome routes open the disclosure and reveal the selected row at wide sizes; narrow layouts keep the expanded list in document flow rather than introducing a competing nested scroller.
|
|
31
|
-
- The shell itself uses `@kerfjs/ui/layout.css`: sidebars, details, previews, dialogs, and resize specimens share unpadded panes plus self-contained content items. Its sidebar identity uses the Kerf logo beside a vertically centered title, with supporting copy in its own aligned row; the current-view heading is also a toolbar. The shared Catalog sidebar includes a filter for entry and heading names that works across first-party and ecosystem sections, including collapsed sections. Collapsing the catalog removes the pane completely and moves its restore action to the main toolbar's leading edge instead of leaving an icon-only rail. The selected view description remains inset below the page toolbar. The preview stage sits directly in the sunken main Pane with its
|
|
31
|
+
- The shell itself uses `@kerfjs/ui/layout.css`: sidebars, details, previews, dialogs, and resize specimens share unpadded panes plus self-contained content items. Its sidebar identity uses the Kerf logo beside a vertically centered title, with supporting copy in its own aligned row; the current-view heading is also a toolbar. The shared Catalog sidebar includes a filter for entry and heading names that works across first-party and ecosystem sections, including collapsed sections. Collapsing the catalog removes the pane completely and moves its restore action to the main toolbar's leading edge instead of leaving an icon-only rail. The selected view description remains inset below the page toolbar. The preview stage sits directly in the sunken main Pane, with its canvas padded by the medium spacing token. The checkerboard belongs to that stage, rather than a viewport-height wrapper or nested card, and one explicitly repeated SVG tile keeps the pattern continuous through below-fold content. A lightly separated footer keeps live status above compact source, guidance, and relationship groups. The focused `ResizableRegion` specimen stretches its surface through the available stage height and reports committed width in that shared status footer; narrow layouts retain local horizontal access when the pane is resized wider than the stage, and the split remains readable at 200% root scaling. Geometry coverage checks wide, intermediate, narrow, and 200% zoom layouts.
|
|
32
32
|
- The composer-form recipe demonstrates one coherent visible form surface with toolbar title/supporting-copy hierarchy, fields and actions on the shared 8px control gutter, and 24px major rhythm. Its conditional error or success `StateBanner` is the only nested semantic surface. Reset synchronizes the upgraded Web Awesome fields' live value properties with their empty controlled attributes and announces `Draft reset`; browser coverage preserves behavior and verifies wide, narrow, dark, validation, success, reset, 200% zoom, and forced-colors states.
|
|
33
33
|
- The list-detail dialog recipe is laid out like a `Workbench` on roomy devices: a headerless `DialogSurface` modal whose `SplitView` holds a full-height list sidebar `Pane` with its own toolbar beside a full-height detail `Pane` that carries the primary xl title, the `data-dialog="close"` control, and the record actions in its footer. Compact devices get a full-screen sheet with its own labeled header, footer actions, and a list-to-detail drill-down. Browser geometry coverage protects those relationships at wide and narrow widths.
|
|
34
34
|
- Catalog-only brand marks, preview dimensions, checkerboard tiles, and the compound display-settings control retain local geometry because they are specimen chrome or intrinsic control anatomy rather than reusable application spacing roles.
|
|
@@ -48,7 +48,7 @@ deterministic state, and semantic layout owners from the [recipe guide](./recipe
|
|
|
48
48
|
collapsible-search specimen follows the selected group shape with a
|
|
49
49
|
concentric inner radius in both collapsed and expanded states.
|
|
50
50
|
- Recipe ownership notes are hidden by default. A page-toolbar toggle reveals each recipe's note as its `CatalogExample` note above the framed specimen, so instructional copy never covers the composition.
|
|
51
|
-
- Settings exercise light/dark, increased contrast, and reduced motion without changing component code. The theme action starts from the operating system's effective color scheme, always names the appearance it will switch to, and installs an explicit light or dark override when activated; contrast and reduced motion expose their independent preferences through `aria-pressed`. The display-control group wraps whole independent controls at narrow widths so all stay reachable. The adjacent Background menu chooses an 8px-square checkerboard (default), 8px vertical stripes, surface, or sunken for the preview stage; the
|
|
51
|
+
- Settings exercise light/dark, increased contrast, and reduced motion without changing component code. The theme action starts from the operating system's effective color scheme, always names the appearance it will switch to, and installs an explicit light or dark override when activated; contrast and reduced motion expose their independent preferences through `aria-pressed`. The display-control group wraps whole independent controls at narrow widths so all stay reachable. The adjacent Background menu chooses an 8px-square checkerboard (default), 8px vertical stripes, a layout guide with single-pixel rules at 15px, 23px, and 32px, surface, or sunken for the preview stage. The demo saves all four display choices in browser storage and restores them across entries and reloads. A saved light or dark choice remains explicit when the operating-system appearance changes; without one, the theme follows the system. Invalid or unavailable storage falls back to defaults while the controls remain usable.
|
|
52
52
|
- The footer action log is an `aria-live` region, making interactions visible to both people and browser tests.
|
|
53
53
|
- The focused Toast route calls Web Awesome's documented programmatic stack API and notes that Hot Sheet 2 still uses its own app-level toast implementation; the catalog demonstrates ecosystem support without implying current product adoption.
|
|
54
54
|
- Browser coverage walks every Kerf, composition, and Web Awesome route, checks every listed Web Awesome custom element is registered in its focused specimen, exercises the ecosystem disclosure and both relationship directions, validates offline source/guidance hrefs and accessible wide/narrow/200%-zoom wrapping, and covers tab selection/reordering/overflow, semantic palettes and scoped overrides, light/dark rendering, toolbar popup and responsive find behavior, single/multiline search alignment, menu alignment, banner urgency, keyboard resizing, live custom-element values, and representative wide/narrow captures.
|
package/docs/workbench.md
CHANGED
|
@@ -82,6 +82,8 @@ outline is hidden until it expands. `mainPane` and a panel's `pane` forward the
|
|
|
82
82
|
same options to an inner Pane when that is the intended focus owner. Give
|
|
83
83
|
the central region `mainLabel` when it needs its own named landmark; panel
|
|
84
84
|
regions use their `label`.
|
|
85
|
+
When a sole Pane fills the main region, the Workbench ring paints above opaque
|
|
86
|
+
edge-to-edge Pane content without blocking pointer input in that content.
|
|
85
87
|
|
|
86
88
|
Each static `WorkbenchPanel` takes `content`, an optional `toolbar` and `footer` (see
|
|
87
89
|
[Panel toolbars](#panel-toolbars)), an optional `collapsed`, an optional
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/navigation/nav-stack/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-3BXDWEGB.js","sourcesContent":["import { ChevronLeft } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { PanelBottomToolbar } from '../../../shared/panels/panel-toolbar.js';\nimport { Toolbar, type ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n type HeadingLevel,\n ToolbarText,\n type ToolbarTextSize,\n} from '../../actions/toolbar-text/toolbar-text.js';\nimport { List, type ListConfig } from '../../collections/list/list.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView extends NavPane<\n NavStackViewToolbar,\n PanelBottomToolbar\n> {\n /** Stable identity for keyed reconcile and transition direction. */\n key: string;\n}\n\n/** Per-view top toolbar. The stack supplies its back control before `leading`. */\nexport interface NavStackViewToolbar extends NavStackToolbarConfig {\n title?: string;\n leading?: KerfUiContent;\n center?: KerfUiContent;\n trailing?: KerfUiContent;\n}\n\n/** A view's structured bottom toolbar; it cross-fades on navigation. */\nexport type NavStackViewBottomToolbar = PanelBottomToolbar;\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n /** Accessible name of the top toolbar (default: none). */\n label?: string;\n /** Size of the view title's `ToolbarText` (default `large`). */\n titleSize?: ToolbarTextSize;\n /** Expose the view title as a heading at this level (default: a plain span). */\n headingLevel?: HeadingLevel;\n}\n\nexport interface NavStackProps {\n id: string;\n /** Accessible name for the stack region. */\n label: string;\n /** The stack, root first; the last entry is the active top view. */\n views: NavStackView[];\n /** Accessible label for the icon-only back control (default \"Back\"). */\n backLabel?: string;\n /** The back control's icon (default a chevron-left `LucideIcon`). */\n backIcon?: KerfUiContent;\n /**\n * Visible text beside the back icon, such as the previous view's title\n * (default: icon only). When set, the text names the control and\n * `backLabel` is not used.\n */\n backText?: string;\n /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n toolbarConfig?: NavStackToolbarConfig;\n /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */\n panelToggle?: KerfUiContent;\n /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n hideToolbar?: boolean;\n /** Optional persistent bottom toolbar used when the active view does not provide one. */\n bottomToolbar?: NavStackViewBottomToolbar;\n /**\n * The line under the top chrome and over the bottom toolbar, where they\n * meet the active view. `scroll` (default) shows the chrome's line only\n * while the view's content is scrolled beneath it, and the bottom\n * toolbar's only while more content lies below — never when the content\n * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n * wired above the stack; unwired, neither shows. `always` shows both\n * without the wiring; `none` neither, even when wired. The line is drawn\n * inside the chrome, so no state moves the chrome or the content. A\n * `toolbarConfig.dividerSides` edge is the Toolbar's own and is unaffected.\n */\n chromeDividers?: 'scroll' | 'always' | 'none';\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nconst DEFAULT_SAFE_AREA_EDGES = [\n 'block-start',\n 'inline-start',\n 'inline-end',\n] as const;\n\nconst DEFAULT_BOTTOM_SAFE_AREA_EDGES = [\n 'block-end',\n 'inline-start',\n 'inline-end',\n] as const;\n\nfunction chromeList(content: KerfUiContent, config?: ListConfig) {\n return (\n <List\n dividerSides={config?.dividerSides}\n gap={config?.gap}\n hAlign={config?.hAlign}\n vAlign={config?.vAlign}\n textInsets={config?.textInsets}\n controlInsets={config?.controlInsets}\n >\n {content}\n </List>\n );\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `toolbar` fills the zones,\n * and `toolbarConfig` supplies defaults. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n id,\n label,\n views,\n backLabel = 'Back',\n backIcon,\n backText,\n toolbarConfig = {},\n panelToggle,\n hideToolbar = false,\n bottomToolbar,\n chromeDividers = 'scroll',\n className = '',\n slot,\n}: NavStackProps) {\n const topIndex = views.length - 1;\n const top = views[topIndex];\n const topToolbar = top?.toolbar;\n const bottom = top?.bottomToolbar ?? bottomToolbar;\n const canPop = views.length > 1;\n return (\n <section\n class={`kui-nav-stack ${className}`.trim()}\n id={id}\n data-component=\"nav-stack\"\n data-nav-stack-id={id}\n data-depth={String(views.length)}\n data-chrome-dividers={\n chromeDividers === 'always' || chromeDividers === 'none'\n ? chromeDividers\n : undefined\n }\n aria-label={label}\n slot={slot}\n >\n {!hideToolbar && (\n <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n <Toolbar\n label={topToolbar?.label ?? toolbarConfig.label}\n dividerSides={\n topToolbar?.dividerSides ?? toolbarConfig.dividerSides\n }\n centerAlign={topToolbar?.centerAlign ?? toolbarConfig.centerAlign}\n responsive={topToolbar?.responsive ?? toolbarConfig.responsive}\n responsiveAt={\n topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt\n }\n safeAreaEdges={\n topToolbar?.safeAreaEdges ??\n toolbarConfig.safeAreaEdges ??\n DEFAULT_SAFE_AREA_EDGES\n }\n leading={\n <>\n {canPop && (\n <ToolbarControlGroup\n appearance=\"borderless\"\n shape=\"rounded\"\n content={backText ? 'mixed' : 'icon'}\n single\n >\n <button\n type=\"button\"\n class=\"kui-nav-stack__back\"\n data-nav-back\n aria-label={backText ? undefined : backLabel}\n >\n {backIcon ?? (\n <LucideIcon\n icon={ChevronLeft}\n name=\"chevron-left\"\n className=\"kui-nav-stack__back-icon\"\n />\n )}\n {backText ? <span>{backText}</span> : null}\n </button>\n </ToolbarControlGroup>\n )}\n {topToolbar?.leading}\n <ToolbarText\n text={topToolbar?.title ?? ''}\n size={\n topToolbar?.titleSize ?? toolbarConfig.titleSize ?? 'large'\n }\n headingLevel={\n topToolbar?.headingLevel ?? toolbarConfig.headingLevel\n }\n fill\n />\n </>\n }\n center={topToolbar?.center}\n trailing={\n <>\n {topToolbar?.trailing}\n {panelToggle}\n </>\n }\n />\n </div>\n )}\n <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n {views.map((view, index) => (\n <article\n class=\"kui-nav-stack__view\"\n data-key={view.key}\n data-nav-key={view.key}\n data-nav-active={String(index === topIndex)}\n aria-hidden={String(index !== topIndex)}\n >\n {view.pane ||\n view.header !== undefined ||\n view.footer !== undefined ? (\n <Pane\n appearance={view.pane?.appearance}\n deepInset={view.pane?.deepInset}\n tabIndex={view.pane?.tabIndex}\n outlined={view.pane?.outlined}\n contentElement={view.pane?.contentElement}\n contentLabel={view.pane?.contentLabel}\n separators={view.pane?.separators}\n safeAreaEdges={view.pane?.safeAreaEdges}\n chromeDividers={view.pane?.chromeDividers}\n header={\n view.header === undefined ? undefined : (\n <div data-nav-stack-header>\n {chromeList(view.header, view.headerList)}\n </div>\n )\n }\n footer={\n view.footer === undefined ? undefined : (\n <div data-nav-stack-footer>\n {chromeList(view.footer, view.footerList)}\n </div>\n )\n }\n >\n {view.content}\n </Pane>\n ) : (\n view.content\n )}\n </article>\n ))}\n </div>\n {bottom && (\n <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n <Toolbar\n position=\"footer\"\n label={bottom.label}\n dividerSides={bottom.dividerSides}\n centerAlign={bottom.centerAlign}\n responsive={bottom.responsive}\n responsiveAt={bottom.responsiveAt}\n safeAreaEdges={\n bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES\n }\n leading={bottom.leading}\n center={bottom.center}\n trailing={bottom.trailing}\n />\n </footer>\n )}\n </section>\n );\n}\n"]}
|