@k2b/ui 0.30.0 → 0.32.0

package/dist/browser/layout/AppWorkspace.js

@@ -77,7 +77,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _tmpl$57 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-filters role=group><!$><!/><!$><!/>`),
   _tmpl$58 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__head-count><span>`),
   _tmpl$59 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-actions><!$><!/><!$><!/>`),
-  _tmpl$60 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><div class=k2b-app-workspace__head-lead><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$60 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><!$><!/><div class=k2b-app-workspace__head-lead><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
   _tmpl$61 = /*#__PURE__*/_$template(`<h1 class=k2b-app-workspace__head-heading data-k2b-page-trail-title>`),
   _tmpl$62 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace>`);
 import { Link } from "@k2b/ssr/nav";
@@ -87,8 +87,9 @@ import { Button, ButtonLink, IconButton, IconButtonLink } from "../actions/Butto
 import { useFilterMessages } from "../actions/filter-messages";
 import { dialogCore } from "../feedback/dialog-core";
 import { RenderErrorBoundary } from "../internal/render-error";
-import { APP_WORKSPACE_DETAIL_CLOSE_EVENT, APP_WORKSPACE_DETAIL_STEP_EVENT, APP_WORKSPACE_SIDEBAR_HIDE_EVENT, installAppWorkspaceController } from "./app-workspace-controller";
+import { APP_WORKSPACE_DETAIL_CLOSE_EVENT, APP_WORKSPACE_DETAIL_OPEN_EVENT, APP_WORKSPACE_DETAIL_STEP_EVENT, APP_WORKSPACE_SIDEBAR_HIDE_EVENT, installAppWorkspaceController } from "./app-workspace-controller";
 import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_MAIN_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable } from "./app-workspace-state";
+import { appWorkspaceInverseWidthCss, appWorkspaceWidthCss, appWorkspaceWidthToken, isAppWorkspaceWidthShare } from "./app-workspace-width";
 import BottomSheet, { bottomSheetAdaptiveOptions } from "./BottomSheet";
 import { PageTitle, usePageTrail } from "./PageTitle";
 import { SidebarItemPreview } from "./SidebarItemPreview";
@@ -137,7 +138,7 @@ function ResizeHandle(props) {
     const state = workspace?.initialLayoutState() ?? providerState;
     const id = props.panelId ?? "primary";
     const size = props.kind === "sidebar" ? state?.sidebarCollapsed ? APP_WORKSPACE_SIDEBAR_COLLAPSED : state?.sidebarWidth : props.kind === "pane" ? state?.paneWidths?.[id] : props.kind === "detail" ? state?.detailWidths?.[id] : state?.drawerHeights?.[id];
-    return Math.min(props.maxSize, Math.max(props.minSize, size ?? props.defaultSize));
+    return Math.min(props.maxSize, Math.max(props.minSize, size ?? (typeof props.defaultSize === "number" ? props.defaultSize : props.defaultSize.min)));
   };
   return (() => {
     var _el$ = _$getNextElement(_tmpl$);
@@ -153,7 +154,7 @@ function ResizeHandle(props) {
         _v$9 = props.panelId,
         _v$0 = props.edge,
         _v$1 = props.shadow ? "true" : undefined,
-        _v$10 = props.defaultSize,
+        _v$10 = appWorkspaceWidthToken(props.defaultSize),
         _v$11 = props.minSize,
         _v$12 = props.maxSize,
         _v$13 = props.style;
@@ -361,11 +362,12 @@ function AppWorkspaceMain(props) {
   // as `AppWorkspace.Detail` does with its width.
   const minWidth = () => {
     const value = props.minWidth;
-    return value !== undefined && Number.isFinite(value) && value > APP_WORKSPACE_MAIN_MIN ? Math.round(value) : undefined;
+    return isAppWorkspaceWidthShare(value) ? value : typeof value === "number" && Number.isFinite(value) && value > APP_WORKSPACE_MAIN_MIN ? Math.round(value) : undefined;
   };
   const minWidthRule = value => {
-    const main = `.k2b-app-workspace__main[data-workspace-main-min="${value}"]`;
-    return `.k2b-app-workspace:has(> .k2b-app-workspace__content > ${main}, > .k2b-app-workspace__content > :is(solid-island, solid-client) > ${main}){--k2b-workspace-main-min:${value}px}`;
+    const main = `.k2b-app-workspace__main[data-workspace-main-min="${appWorkspaceWidthToken(value)}"]`;
+    const inverse = typeof value === "number" ? "" : `;--k2b-workspace-main-min-grid:${appWorkspaceInverseWidthCss(value, "100%")};--k2b-workspace-main-min-cq:${appWorkspaceInverseWidthCss(value, "100cqi")}`;
+    return `.k2b-app-workspace:has(> .k2b-app-workspace__content > ${main}, > .k2b-app-workspace__content > :is(solid-island, solid-client) > ${main}){--k2b-workspace-main-min:${appWorkspaceWidthCss(value, "100%")}${inverse}}`;
   };
   return [_$createComponent(Show, {
     get when() {
@@ -385,7 +387,7 @@ function AppWorkspaceMain(props) {
         return `k2b-app-workspace__main ${hasPanes() ? "has-panes" : ""} ${props.class ?? ""}`;
       },
       get ["data-workspace-main-min"]() {
-        return minWidth();
+        return _$memo(() => minWidth() === undefined)() ? undefined : appWorkspaceWidthToken(minWidth());
       },
       get ["data-workspace-levels"]() {
         return levelsMode() ? "" : undefined;
@@ -441,7 +443,10 @@ function AppWorkspaceMain(props) {
             const variable = appWorkspacePanelVariable("pane", panelId);
             const isAnchor = () => region === anchorRegion();
             const resizable = () => !isAnchor() && (pane.props.resizable ?? rootResizable);
-            const defaultSize = () => pane.props.defaultSize ?? APP_WORKSPACE_PANE_DEFAULT;
+            const defaultSize = () => {
+              const value = pane.props.defaultSize;
+              return typeof value === "number" || isAppWorkspaceWidthShare(value) ? value : APP_WORKSPACE_PANE_DEFAULT;
+            };
             const minSize = () => pane.props.minSize ?? APP_WORKSPACE_PANE_MIN;
             const maxSize = () => Math.max(minSize(), pane.props.maxSize ?? APP_WORKSPACE_PANE_MAX);
             const before = () => levelsMode() || region.index < (anchorRegion()?.index ?? 0);
@@ -561,7 +566,7 @@ function AppWorkspaceMain(props) {
                       _v$26 = !levelsMode() && pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : undefined,
                       _v$27 = isAnchor() ? undefined : {
                         // A stored width keeps to this pane's limits before the controller attaches.
-                        "--k2b-workspace-panel-size": `clamp(${minSize()}px, var(${variable}, ${defaultSize()}px), ${maxSize()}px)`,
+                        "--k2b-workspace-panel-size": `clamp(${minSize()}px, var(${variable}, ${appWorkspaceWidthCss(defaultSize(), "var(--k2b-workspace-width)")}), ${maxSize()}px)`,
                         "--k2b-workspace-panel-min": `${minSize()}px`
                       };
                     _v$14 !== _p$.e && _$setAttribute(_el$15, "id", _p$.e = _v$14);
@@ -614,11 +619,14 @@ function AppWorkspaceMain(props) {
     return _el$12;
   })()];
 }
+
+/** The Detail region's DOM id, for application controls that target it with aria-controls. */
+export const appWorkspaceDetailElementId = id => `k2b-workspace-detail-${assertStableUiId(id, "AppWorkspace.Detail id")}`;
 function AppWorkspaceDetail(props) {
   const workspaceMessages = useWorkspaceMessages();
   const rootResizable = useContext(ResizeContext);
   const panelId = () => assertStableUiId(props.id, "AppWorkspace.Detail id");
-  const domId = () => `k2b-workspace-detail-${panelId()}`;
+  const domId = () => appWorkspaceDetailElementId(props.id);
   const variable = () => appWorkspacePanelVariable("detail", panelId());
   // Start widths of 20, 26, 30, and 34 rem. They feed `aria-valuenow` and the
   // `var(…, Npx)` first-paint fallback, so they are behaviour, not taste.
@@ -649,15 +657,20 @@ function AppWorkspaceDetail(props) {
   let aside;
   onMount(() => {
     const close = () => props.onClose?.();
+    const open = () => {
+      if (props.available !== false) props.onOpen?.();
+    };
     const isStep = detail => typeof detail === "object" && detail !== null && "direction" in detail && (detail.direction === 1 || detail.direction === -1);
     const step = event => {
       if (!(event instanceof CustomEvent) || !isStep(event.detail)) return;
       const item = props.onStep?.(event.detail.direction);
       if (item instanceof HTMLElement) event.detail.item = item;
     };
+    aside?.addEventListener(APP_WORKSPACE_DETAIL_OPEN_EVENT, open);
     aside?.addEventListener(APP_WORKSPACE_DETAIL_CLOSE_EVENT, close);
     aside?.addEventListener(APP_WORKSPACE_DETAIL_STEP_EVENT, step);
     onCleanup(() => {
+      aside?.removeEventListener(APP_WORKSPACE_DETAIL_OPEN_EVENT, open);
       aside?.removeEventListener(APP_WORKSPACE_DETAIL_CLOSE_EVENT, close);
       aside?.removeEventListener(APP_WORKSPACE_DETAIL_STEP_EVENT, step);
     });
@@ -674,6 +687,12 @@ function AppWorkspaceDetail(props) {
     },
     "aria-expanded": "false",
     "data-app-workspace-detail-toggle": "",
+    get ["data-workspace-detail-reopen"]() {
+      return props.onOpen ? "true" : undefined;
+    },
+    get disabled() {
+      return props.available === false;
+    },
     "class": "k2b-app-workspace__detail-toggle",
     get children() {
       return [_$getNextElement(_tmpl$1), _$memo(() => workspaceMessages().details)];
@@ -701,6 +720,7 @@ function AppWorkspaceDetail(props) {
         get maxSize() {
           return maxWidth();
         },
+        shadow: true,
         get style() {
           return sizeStyle();
         }
@@ -722,14 +742,15 @@ function AppWorkspaceDetail(props) {
         _v$34 = props.openOnChoice === false ? "request" : undefined,
         _v$35 = panelId(),
         _v$36 = resizable() ? "true" : "false",
-        _v$37 = props.onClose ? "true" : undefined,
-        _v$38 = props.onStep ? "true" : undefined,
-        _v$39 = !props.open,
-        _v$40 = {
+        _v$37 = props.onOpen ? "true" : undefined,
+        _v$38 = props.onClose ? "true" : undefined,
+        _v$39 = props.onStep ? "true" : undefined,
+        _v$40 = !props.open || props.available === false,
+        _v$41 = {
           ...sizeStyle(),
           "view-transition-name": props.viewTransitionName
         },
-        _v$41 = workspaceMessages().detailFullHeight;
+        _v$42 = workspaceMessages().detailFullHeight;
       _v$30 !== _p$.e && _$setAttribute(_el$20, "id", _p$.e = _v$30);
       _v$31 !== _p$.t && _$className(_el$20, _p$.t = _v$31);
       _v$32 !== _p$.a && _$setAttribute(_el$20, "data-width", _p$.a = _v$32);
@@ -737,11 +758,12 @@ function AppWorkspaceDetail(props) {
       _v$34 !== _p$.i && _$setAttribute(_el$20, "data-workspace-detail-choice", _p$.i = _v$34);
       _v$35 !== _p$.n && _$setAttribute(_el$20, "data-workspace-panel-id", _p$.n = _v$35);
       _v$36 !== _p$.s && _$setAttribute(_el$20, "data-workspace-resizable", _p$.s = _v$36);
-      _v$37 !== _p$.h && _$setAttribute(_el$20, "data-workspace-detail-closable", _p$.h = _v$37);
-      _v$38 !== _p$.r && _$setAttribute(_el$20, "data-workspace-detail-steppable", _p$.r = _v$38);
-      _v$39 !== _p$.d && _$setProperty(_el$20, "hidden", _p$.d = _v$39);
-      _p$.l = _$style(_el$20, _v$40, _p$.l);
-      _v$41 !== _p$.u && _$setAttribute(_el$21, "aria-label", _p$.u = _v$41);
+      _v$37 !== _p$.h && _$setAttribute(_el$20, "data-workspace-detail-reopen", _p$.h = _v$37);
+      _v$38 !== _p$.r && _$setAttribute(_el$20, "data-workspace-detail-closable", _p$.r = _v$38);
+      _v$39 !== _p$.d && _$setAttribute(_el$20, "data-workspace-detail-steppable", _p$.d = _v$39);
+      _v$40 !== _p$.l && _$setProperty(_el$20, "hidden", _p$.l = _v$40);
+      _p$.u = _$style(_el$20, _v$41, _p$.u);
+      _v$42 !== _p$.c && _$setAttribute(_el$21, "aria-label", _p$.c = _v$42);
       return _p$;
     }, {
       e: undefined,
@@ -755,7 +777,8 @@ function AppWorkspaceDetail(props) {
       r: undefined,
       d: undefined,
       l: undefined,
-      u: undefined
+      u: undefined,
+      c: undefined
     });
     return _el$20;
   })()];
@@ -810,22 +833,22 @@ function AppWorkspaceBottomDrawer(props) {
     var _el$24 = _$getNextElement(_tmpl$11);
     _$insert(_el$24, () => props.children);
     _$effect(_p$ => {
-      var _v$42 = domId(),
-        _v$43 = `k2b-app-workspace__drawer ${props.class ?? ""}`,
-        _v$44 = props.height ?? "md",
-        _v$45 = panelId(),
-        _v$46 = resizable() ? "true" : "false",
-        _v$47 = !props.open,
-        _v$48 = `var(${variable()}, ${defaultHeight()}px)`,
-        _v$49 = props.viewTransitionName;
-      _v$42 !== _p$.e && _$setAttribute(_el$24, "id", _p$.e = _v$42);
-      _v$43 !== _p$.t && _$className(_el$24, _p$.t = _v$43);
-      _v$44 !== _p$.a && _$setAttribute(_el$24, "data-height", _p$.a = _v$44);
-      _v$45 !== _p$.o && _$setAttribute(_el$24, "data-workspace-panel-id", _p$.o = _v$45);
-      _v$46 !== _p$.i && _$setAttribute(_el$24, "data-workspace-resizable", _p$.i = _v$46);
-      _v$47 !== _p$.n && _$setProperty(_el$24, "hidden", _p$.n = _v$47);
-      _v$48 !== _p$.s && _$setStyleProperty(_el$24, "--k2b-workspace-panel-size", _p$.s = _v$48);
-      _v$49 !== _p$.h && _$setStyleProperty(_el$24, "view-transition-name", _p$.h = _v$49);
+      var _v$43 = domId(),
+        _v$44 = `k2b-app-workspace__drawer ${props.class ?? ""}`,
+        _v$45 = props.height ?? "md",
+        _v$46 = panelId(),
+        _v$47 = resizable() ? "true" : "false",
+        _v$48 = !props.open,
+        _v$49 = `var(${variable()}, ${defaultHeight()}px)`,
+        _v$50 = props.viewTransitionName;
+      _v$43 !== _p$.e && _$setAttribute(_el$24, "id", _p$.e = _v$43);
+      _v$44 !== _p$.t && _$className(_el$24, _p$.t = _v$44);
+      _v$45 !== _p$.a && _$setAttribute(_el$24, "data-height", _p$.a = _v$45);
+      _v$46 !== _p$.o && _$setAttribute(_el$24, "data-workspace-panel-id", _p$.o = _v$46);
+      _v$47 !== _p$.i && _$setAttribute(_el$24, "data-workspace-resizable", _p$.i = _v$47);
+      _v$48 !== _p$.n && _$setProperty(_el$24, "hidden", _p$.n = _v$48);
+      _v$49 !== _p$.s && _$setStyleProperty(_el$24, "--k2b-workspace-panel-size", _p$.s = _v$49);
+      _v$50 !== _p$.h && _$setStyleProperty(_el$24, "view-transition-name", _p$.h = _v$50);
       return _p$;
     }, {
       e: undefined,
@@ -928,10 +951,10 @@ function AppWorkspaceSidebar(props) {
                       _$addEventListener(_el$25, "click", event => choose(event, () => close()));
                       _$insert(_el$25, resolved);
                       _$effect(_p$ => {
-                        var _v$50 = props.label,
-                          _v$51 = accent;
-                        _v$50 !== _p$.e && _$setAttribute(_el$25, "aria-label", _p$.e = _v$50);
-                        _p$.t = _$style(_el$25, _v$51, _p$.t);
+                        var _v$51 = props.label,
+                          _v$52 = accent;
+                        _v$51 !== _p$.e && _$setAttribute(_el$25, "aria-label", _p$.e = _v$51);
+                        _p$.t = _$style(_el$25, _v$52, _p$.t);
                         return _p$;
                       }, {
                         e: undefined,
@@ -1015,10 +1038,10 @@ function AppWorkspaceSidebar(props) {
             typeof _ref$4 === "function" ? _$use(_ref$4, _el$26) : row = _el$26;
             _$insert(_el$26, () => desktop()?.children);
             _$effect(_p$ => {
-              var _v$52 = stacked() ? "both" : undefined,
-                _v$53 = stacked() ? "horizontal" : undefined;
-              _v$52 !== _p$.e && _$setAttribute(_el$26, "data-scroll-fade-mode", _p$.e = _v$52);
-              _v$53 !== _p$.t && _$setAttribute(_el$26, "data-scroll-fade-axis", _p$.t = _v$53);
+              var _v$53 = stacked() ? "both" : undefined,
+                _v$54 = stacked() ? "horizontal" : undefined;
+              _v$53 !== _p$.e && _$setAttribute(_el$26, "data-scroll-fade-mode", _p$.e = _v$53);
+              _v$54 !== _p$.t && _$setAttribute(_el$26, "data-scroll-fade-axis", _p$.t = _v$54);
               return _p$;
             }, {
               e: undefined,
@@ -1036,12 +1059,12 @@ function AppWorkspaceSidebar(props) {
                 _el$27.$$click = event => openAll(event.currentTarget);
                 _$insert(_el$28, () => workspaceMessages().sidebarAll);
                 _$effect(_p$ => {
-                  var _v$54 = sheetOpen(),
-                    _v$55 = props.label ? workspaceMessages().sidebarAllLabel({
+                  var _v$55 = sheetOpen(),
+                    _v$56 = props.label ? workspaceMessages().sidebarAllLabel({
                       label: props.label
                     }) : undefined;
-                  _v$54 !== _p$.e && _$setAttribute(_el$27, "aria-expanded", _p$.e = _v$54);
-                  _v$55 !== _p$.t && _$setAttribute(_el$27, "aria-label", _p$.t = _v$55);
+                  _v$55 !== _p$.e && _$setAttribute(_el$27, "aria-expanded", _p$.e = _v$55);
+                  _v$56 !== _p$.t && _$setAttribute(_el$27, "aria-label", _p$.t = _v$56);
                   return _p$;
                 }, {
                   e: undefined,
@@ -1234,10 +1257,10 @@ const AppWorkspaceSidebarSection = props => {
             _$setAttribute(_el$38, "aria-controls", id);
             _$insert(_el$38, title, _el$41, _co$5);
             _$effect(_p$ => {
-              var _v$56 = open(),
-                _v$57 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
-              _v$56 !== _p$.e && _$setAttribute(_el$38, "aria-expanded", _p$.e = _v$56);
-              _v$57 !== _p$.t && _$className(_el$39, _p$.t = _v$57);
+              var _v$57 = open(),
+                _v$58 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
+              _v$57 !== _p$.e && _$setAttribute(_el$38, "aria-expanded", _p$.e = _v$57);
+              _v$58 !== _p$.t && _$className(_el$39, _p$.t = _v$58);
               return _p$;
             }, {
               e: undefined,
@@ -1359,10 +1382,10 @@ const AppWorkspaceSidebarItemStatus = props => {
       }
     }));
     _$effect(_p$ => {
-      var _v$58 = waiting() !== null ? undefined : count() ? "count" : dot() ? "dot" : undefined,
-        _v$59 = waiting() === null ? undefined : waiting() ? "count" : "zero";
-      _v$58 !== _p$.e && _$setAttribute(_el$52, "data-unread", _p$.e = _v$58);
-      _v$59 !== _p$.t && _$setAttribute(_el$52, "data-waiting", _p$.t = _v$59);
+      var _v$59 = waiting() !== null ? undefined : count() ? "count" : dot() ? "dot" : undefined,
+        _v$60 = waiting() === null ? undefined : waiting() ? "count" : "zero";
+      _v$59 !== _p$.e && _$setAttribute(_el$52, "data-unread", _p$.e = _v$59);
+      _v$60 !== _p$.t && _$setAttribute(_el$52, "data-waiting", _p$.t = _v$60);
       return _p$;
     }, {
       e: undefined,
@@ -1587,10 +1610,10 @@ function AppWorkspaceSidebarItem(props) {
       }
     }), _el$82, _co$12);
     _$effect(_p$ => {
-      var _v$60 = oneLine() ? "1" : undefined,
-        _v$61 = !oneLine() && typeof label() === "string" ? label() : undefined;
-      _v$60 !== _p$.e && _$setAttribute(_el$76, "data-lines", _p$.e = _v$60);
-      _v$61 !== _p$.t && _$setAttribute(_el$76, "data-label", _p$.t = _v$61);
+      var _v$61 = oneLine() ? "1" : undefined,
+        _v$62 = !oneLine() && typeof label() === "string" ? label() : undefined;
+      _v$61 !== _p$.e && _$setAttribute(_el$76, "data-lines", _p$.e = _v$61);
+      _v$62 !== _p$.t && _$setAttribute(_el$76, "data-label", _p$.t = _v$62);
       return _p$;
     }, {
       e: undefined,
@@ -1605,10 +1628,10 @@ function AppWorkspaceSidebarItem(props) {
       var _el$83 = _$getNextElement(_tmpl$40);
       _$insert(_el$83, meta);
       _$effect(_p$ => {
-        var _v$62 = props.preview?.trigger === "row" ? metaId : undefined,
-          _v$63 = metaVisibility() === "hover" ? "hover" : undefined;
-        _v$62 !== _p$.e && _$setAttribute(_el$83, "id", _p$.e = _v$62);
-        _v$63 !== _p$.t && _$setAttribute(_el$83, "data-visibility", _p$.t = _v$63);
+        var _v$63 = props.preview?.trigger === "row" ? metaId : undefined,
+          _v$64 = metaVisibility() === "hover" ? "hover" : undefined;
+        _v$63 !== _p$.e && _$setAttribute(_el$83, "id", _p$.e = _v$63);
+        _v$64 !== _p$.t && _$setAttribute(_el$83, "data-visibility", _p$.t = _v$64);
         return _p$;
       }, {
         e: undefined,
@@ -1649,12 +1672,12 @@ function AppWorkspaceSidebarItem(props) {
               _el$87.$$click = select;
               _$insert(_el$87, content);
               _$effect(_p$ => {
-                var _v$67 = actionSlot()?.disabled,
-                  _v$68 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                  _v$69 = label();
-                _v$67 !== _p$.e && _$setProperty(_el$87, "disabled", _p$.e = _v$67);
-                _v$68 !== _p$.t && _$setAttribute(_el$87, "data-visibility", _p$.t = _v$68);
-                _v$69 !== _p$.a && _$setAttribute(_el$87, "aria-label", _p$.a = _v$69);
+                var _v$68 = actionSlot()?.disabled,
+                  _v$69 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                  _v$70 = label();
+                _v$68 !== _p$.e && _$setProperty(_el$87, "disabled", _p$.e = _v$68);
+                _v$69 !== _p$.t && _$setAttribute(_el$87, "data-visibility", _p$.t = _v$69);
+                _v$70 !== _p$.a && _$setAttribute(_el$87, "aria-label", _p$.a = _v$70);
                 return _p$;
               }, {
                 e: undefined,
@@ -1670,12 +1693,12 @@ function AppWorkspaceSidebarItem(props) {
             _el$86.$$click = select;
             _$insert(_el$86, content);
             _$effect(_p$ => {
-              var _v$64 = actionSlot()?.href,
-                _v$65 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                _v$66 = label();
-              _v$64 !== _p$.e && _$setAttribute(_el$86, "href", _p$.e = _v$64);
-              _v$65 !== _p$.t && _$setAttribute(_el$86, "data-visibility", _p$.t = _v$65);
-              _v$66 !== _p$.a && _$setAttribute(_el$86, "aria-label", _p$.a = _v$66);
+              var _v$65 = actionSlot()?.href,
+                _v$66 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                _v$67 = label();
+              _v$65 !== _p$.e && _$setAttribute(_el$86, "href", _p$.e = _v$65);
+              _v$66 !== _p$.t && _$setAttribute(_el$86, "data-visibility", _p$.t = _v$66);
+              _v$67 !== _p$.a && _$setAttribute(_el$86, "aria-label", _p$.a = _v$67);
               return _p$;
             }, {
               e: undefined,
@@ -2026,10 +2049,10 @@ const AppWorkspaceNavTree = props => {
           var _el$94 = _$getNextElement(_tmpl$46);
           _$insert(_el$94, () => item.meta);
           _$effect(_p$ => {
-            var _v$70 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
-              _v$71 = item.metaVisibility === "hover" ? "hover" : undefined;
-            _v$70 !== _p$.e && _$className(_el$94, _p$.e = _v$70);
-            _v$71 !== _p$.t && _$setAttribute(_el$94, "data-visibility", _p$.t = _v$71);
+            var _v$71 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
+              _v$72 = item.metaVisibility === "hover" ? "hover" : undefined;
+            _v$71 !== _p$.e && _$className(_el$94, _p$.e = _v$71);
+            _v$72 !== _p$.t && _$setAttribute(_el$94, "data-visibility", _p$.t = _v$72);
             return _p$;
           }, {
             e: undefined,
@@ -2181,28 +2204,28 @@ const AppWorkspaceNavTree = props => {
           }
         }), _el$104, _co$14);
         _$effect(_p$ => {
-          var _v$72 = siblings().length,
-            _v$73 = place() + 1,
-            _v$74 = selected(),
-            _v$75 = hasChildren() ? isExpanded(item.id) : undefined,
-            _v$76 = item.disabled ? "true" : undefined,
-            _v$77 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
-            _v$78 = movable() ? true : undefined,
-            _v$79 = item.id,
-            _v$80 = dragged()?.id === item.id ? "" : undefined,
-            _v$81 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
-            _v$82 = String(props.indented === false ? 0 : depth);
-          _v$72 !== _p$.e && _$setAttribute(_el$99, "aria-setsize", _p$.e = _v$72);
-          _v$73 !== _p$.t && _$setAttribute(_el$99, "aria-posinset", _p$.t = _v$73);
-          _v$74 !== _p$.a && _$setAttribute(_el$99, "aria-selected", _p$.a = _v$74);
-          _v$75 !== _p$.o && _$setAttribute(_el$99, "aria-expanded", _p$.o = _v$75);
-          _v$76 !== _p$.i && _$setAttribute(_el$99, "aria-disabled", _p$.i = _v$76);
-          _v$77 !== _p$.n && _$setAttribute(_el$99, "tabindex", _p$.n = _v$77);
-          _v$78 !== _p$.s && _$setAttribute(_el$99, "draggable", _p$.s = _v$78);
-          _v$79 !== _p$.h && _$setAttribute(_el$99, "data-k2b-nav-tree-id", _p$.h = _v$79);
-          _v$80 !== _p$.r && _$setAttribute(_el$99, "data-k2b-nav-tree-dragging", _p$.r = _v$80);
-          _v$81 !== _p$.d && _$setAttribute(_el$99, "data-k2b-nav-tree-drop", _p$.d = _v$81);
-          _v$82 !== _p$.l && _$setStyleProperty(_el$99, "--k2b-nav-tree-depth", _p$.l = _v$82);
+          var _v$73 = siblings().length,
+            _v$74 = place() + 1,
+            _v$75 = selected(),
+            _v$76 = hasChildren() ? isExpanded(item.id) : undefined,
+            _v$77 = item.disabled ? "true" : undefined,
+            _v$78 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
+            _v$79 = movable() ? true : undefined,
+            _v$80 = item.id,
+            _v$81 = dragged()?.id === item.id ? "" : undefined,
+            _v$82 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
+            _v$83 = String(props.indented === false ? 0 : depth);
+          _v$73 !== _p$.e && _$setAttribute(_el$99, "aria-setsize", _p$.e = _v$73);
+          _v$74 !== _p$.t && _$setAttribute(_el$99, "aria-posinset", _p$.t = _v$74);
+          _v$75 !== _p$.a && _$setAttribute(_el$99, "aria-selected", _p$.a = _v$75);
+          _v$76 !== _p$.o && _$setAttribute(_el$99, "aria-expanded", _p$.o = _v$76);
+          _v$77 !== _p$.i && _$setAttribute(_el$99, "aria-disabled", _p$.i = _v$77);
+          _v$78 !== _p$.n && _$setAttribute(_el$99, "tabindex", _p$.n = _v$78);
+          _v$79 !== _p$.s && _$setAttribute(_el$99, "draggable", _p$.s = _v$79);
+          _v$80 !== _p$.h && _$setAttribute(_el$99, "data-k2b-nav-tree-id", _p$.h = _v$80);
+          _v$81 !== _p$.r && _$setAttribute(_el$99, "data-k2b-nav-tree-dragging", _p$.r = _v$81);
+          _v$82 !== _p$.d && _$setAttribute(_el$99, "data-k2b-nav-tree-drop", _p$.d = _v$82);
+          _v$83 !== _p$.l && _$setStyleProperty(_el$99, "--k2b-nav-tree-depth", _p$.l = _v$83);
           return _p$;
         }, {
           e: undefined,
@@ -2256,10 +2279,10 @@ const AppWorkspaceNavTree = props => {
     typeof _ref$7 === "function" ? _$use(_ref$7, _el$105) : root = _el$105;
     _$insert(_el$105, () => renderItems(roots, 0));
     _$effect(_p$ => {
-      var _v$83 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
-        _v$84 = props.ariaLabel;
-      _v$83 !== _p$.e && _$className(_el$105, _p$.e = _v$83);
-      _v$84 !== _p$.t && _$setAttribute(_el$105, "aria-label", _p$.t = _v$84);
+      var _v$84 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
+        _v$85 = props.ariaLabel;
+      _v$84 !== _p$.e && _$className(_el$105, _p$.e = _v$84);
+      _v$85 !== _p$.t && _$setAttribute(_el$105, "aria-label", _p$.t = _v$85);
       return _p$;
     }, {
       e: undefined,
@@ -2384,6 +2407,15 @@ function AppWorkspaceHead(props) {
   const resolvedCount = children(() => props.head?.count);
   // A nested workspace is part of a page that already shows its title.
   const trail = props.nested ? () => undefined : usePageTrail();
+  // Main already publishes the active region in SSR and on each selection.
+  // Scope both sides to this workspace, including transparent island hosts;
+  // a nested Main must never decide whether its parent's head is visible.
+  const mobilePane = () => props.head?.mobilePane === undefined ? undefined : assertStableUiId(props.head.mobilePane, "AppWorkspace.Head mobilePane");
+  const mobilePaneRule = pane => {
+    const main = `.k2b-app-workspace__main.has-panes:not([data-workspace-levels]) > [data-workspace-mobile-active="true"]:not([data-workspace-main-region="${pane}"])`;
+    const host = `.k2b-ui .k2b-app-workspace:has(> .k2b-app-workspace__head[data-workspace-head-pane="${pane}"]):has(> .k2b-app-workspace__content > ${main}, > .k2b-app-workspace__content > :is(solid-island, solid-client) > ${main})`;
+    return `@media not all and (min-width:48rem){${host} > .k2b-app-workspace__head,${host} > .k2b-app-workspace__content > .k2b-app-workspace__detail-toggle,${host} > .k2b-app-workspace__content > :is(solid-island, solid-client) > .k2b-app-workspace__detail-toggle{display:none}}`;
+  };
   const resetContent = () => filters().reset;
   const primaryContent = () => [(() => {
     var _el$114 = _$getNextElement(_tmpl$53);
@@ -2396,7 +2428,9 @@ function AppWorkspaceHead(props) {
   })()];
   return (() => {
     var _el$116 = _$getNextElement(_tmpl$60),
-      _el$117 = _el$116.firstChild,
+      _el$142 = _el$116.firstChild,
+      [_el$143, _co$25] = _$getNextMarker(_el$142.nextSibling),
+      _el$117 = _el$143.nextSibling,
       _el$127 = _el$117.firstChild,
       [_el$128, _co$18] = _$getNextMarker(_el$127.nextSibling),
       _el$129 = _el$128.nextSibling,
@@ -2407,8 +2441,18 @@ function AppWorkspaceHead(props) {
       [_el$134, _co$21] = _$getNextMarker(_el$133.nextSibling),
       _el$135 = _el$134.nextSibling,
       [_el$136, _co$22] = _$getNextMarker(_el$135.nextSibling),
-      _el$142 = _el$117.nextSibling,
-      [_el$143, _co$25] = _$getNextMarker(_el$142.nextSibling);
+      _el$144 = _el$117.nextSibling,
+      [_el$145, _co$26] = _$getNextMarker(_el$144.nextSibling);
+    _$insert(_el$116, _$createComponent(Show, {
+      get when() {
+        return mobilePane();
+      },
+      children: pane => (() => {
+        var _el$146 = _$getNextElement(_tmpl$6);
+        _$effect(() => _$setProperty(_el$146, "innerHTML", mobilePaneRule(pane())));
+        return _el$146;
+      })()
+    }), _el$143, _co$25);
     _$insert(_el$117, _$createComponent(IconButton, {
       "class": "k2b-app-workspace__head-toggle",
       get label() {
@@ -2434,10 +2478,10 @@ function AppWorkspaceHead(props) {
         as: "p",
         fallback: true
       }), (() => {
-        var _el$144 = _$getNextElement(_tmpl$61);
-        _$setAttribute(_el$144, "data-k2b-server", isServer ? "" : undefined);
-        _$insert(_el$144, () => current().title);
-        return _el$144;
+        var _el$147 = _$getNextElement(_tmpl$61);
+        _$setAttribute(_el$147, "data-k2b-server", isServer ? "" : undefined);
+        _$insert(_el$147, () => current().title);
+        return _el$147;
       })()]
     }), _el$130, _co$19);
     _$insert(_el$117, _$createComponent(Show, {
@@ -2569,16 +2613,19 @@ function AppWorkspaceHead(props) {
         }), _el$141, _co$24);
         return _el$137;
       }
-    }), _el$143, _co$25);
+    }), _el$145, _co$26);
     _$effect(_p$ => {
-      var _v$85 = trail()?.ancestors.length ? "up" : trail() ? "title" : undefined,
-        _v$86 = props.head ? "" : undefined;
-      _v$85 !== _p$.e && _$setAttribute(_el$116, "data-trail", _p$.e = _v$85);
-      _v$86 !== _p$.t && _$setAttribute(_el$116, "data-row", _p$.t = _v$86);
+      var _v$86 = trail()?.ancestors.length ? "up" : trail() ? "title" : undefined,
+        _v$87 = props.head ? "" : undefined,
+        _v$88 = mobilePane();
+      _v$86 !== _p$.e && _$setAttribute(_el$116, "data-trail", _p$.e = _v$86);
+      _v$87 !== _p$.t && _$setAttribute(_el$116, "data-row", _p$.t = _v$87);
+      _v$88 !== _p$.a && _$setAttribute(_el$116, "data-workspace-head-pane", _p$.a = _v$88);
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined
     });
     return _el$116;
   })();
@@ -2613,14 +2660,17 @@ const AppWorkspace = props => {
     const slots = createMemo(() => flatten(resolved()));
     // Same props object, same memo value: a sibling change must not rebuild the head's slots.
     const head = createMemo(() => slots().find(headSlot)?.props);
-    const content = () => slots().filter(value => !headSlot(value));
-    return [_$createComponent(AppWorkspaceHead, {
+    // Keep one head instance at the explicit slot's position. Object links
+    // before it must also precede its view controls in SSR and keyboard order.
+    // Callers without a slot retain the automatic leading head.
+    const renderedHead = _$createComponent(AppWorkspaceHead, {
       sidebarId: sidebarId,
       nested: nested,
       get head() {
         return head();
       }
-    }), _$memo(content)];
+    });
+    return _$memo(() => head() ? slots().map(value => headSlot(value) ? value.props === head() ? renderedHead : null : value) : [renderedHead, ...slots()]);
   };
   return _$createComponent(ResizeContext.Provider, {
     get value() {
@@ -2630,23 +2680,23 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          var _el$145 = _$getNextElement(_tmpl$62);
+          var _el$148 = _$getNextElement(_tmpl$62);
           var _ref$8 = root;
-          typeof _ref$8 === "function" ? _$use(_ref$8, _el$145) : root = _el$145;
-          _$insert(_el$145, contents);
+          typeof _ref$8 === "function" ? _$use(_ref$8, _el$148) : root = _el$148;
+          _$insert(_el$148, contents);
           _$effect(_p$ => {
-            var _v$87 = `k2b-app-workspace ${props.class ?? ""}`,
-              _v$88 = props.mobileSurface,
-              _v$89 = props.flat ? "true" : undefined,
-              _v$90 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
-              _v$91 = props.resizable === false ? "false" : "true",
-              _v$92 = appWorkspaceLayoutStyle(initialLayoutState());
-            _v$87 !== _p$.e && _$className(_el$145, _p$.e = _v$87);
-            _v$88 !== _p$.t && _$setAttribute(_el$145, "data-mobile-surface", _p$.t = _v$88);
-            _v$89 !== _p$.a && _$setAttribute(_el$145, "data-flat", _p$.a = _v$89);
-            _v$90 !== _p$.o && _$setAttribute(_el$145, "data-sidebar-collapsed", _p$.o = _v$90);
-            _v$91 !== _p$.i && _$setAttribute(_el$145, "data-workspace-resizable", _p$.i = _v$91);
-            _p$.n = _$style(_el$145, _v$92, _p$.n);
+            var _v$89 = `k2b-app-workspace ${props.class ?? ""}`,
+              _v$90 = props.mobileSurface,
+              _v$91 = props.flat ? "true" : undefined,
+              _v$92 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
+              _v$93 = props.resizable === false ? "false" : "true",
+              _v$94 = appWorkspaceLayoutStyle(initialLayoutState());
+            _v$89 !== _p$.e && _$className(_el$148, _p$.e = _v$89);
+            _v$90 !== _p$.t && _$setAttribute(_el$148, "data-mobile-surface", _p$.t = _v$90);
+            _v$91 !== _p$.a && _$setAttribute(_el$148, "data-flat", _p$.a = _v$91);
+            _v$92 !== _p$.o && _$setAttribute(_el$148, "data-sidebar-collapsed", _p$.o = _v$92);
+            _v$93 !== _p$.i && _$setAttribute(_el$148, "data-workspace-resizable", _p$.i = _v$93);
+            _p$.n = _$style(_el$148, _v$94, _p$.n);
             return _p$;
           }, {
             e: undefined,
@@ -2656,7 +2706,7 @@ const AppWorkspace = props => {
             i: undefined,
             n: undefined
           });
-          return _el$145;
+          return _el$148;
         }
       });
     }
@@ -2672,10 +2722,10 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
 });
 AppWorkspace.Head = AppWorkspaceHeadSlot;
 AppWorkspace.Content = props => (() => {
-  var _el$146 = _$getNextElement(_tmpl$5);
-  _$insert(_el$146, () => props.children);
-  _$effect(() => _$className(_el$146, `k2b-app-workspace__content ${props.class ?? ""}`));
-  return _el$146;
+  var _el$149 = _$getNextElement(_tmpl$5);
+  _$insert(_el$149, () => props.children);
+  _$effect(() => _$className(_el$149, `k2b-app-workspace__content ${props.class ?? ""}`));
+  return _el$149;
 })();
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;