@k2b/ui 0.22.0 → 0.24.0

package/dist/browser/layout/AppWorkspace.js

@@ -63,14 +63,17 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _tmpl$43 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
   _tmpl$44 = /*#__PURE__*/_$template(`<i class="ti ti-layout-sidebar"aria-hidden=true>`),
   _tmpl$45 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><!$><!/><!$><!/>`),
-  _tmpl$46 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace><!$><!/><!$><!/>`);
+  _tmpl$46 = /*#__PURE__*/_$template(`<h1 class=k2b-app-workspace__head-heading data-k2b-page-trail-title>`),
+  _tmpl$47 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace><!$><!/><!$><!/>`);
 import { Link } from "@k2b/ssr/nav";
 import { children, createContext, createEffect, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, useContext } from "solid-js";
+import { isServer } from "solid-js/web";
 import { IconButton } from "../actions/Button";
 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_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_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 { PageTitle, usePageTrail } from "./PageTitle";
 import { SidebarItemPreview } from "./SidebarItemPreview";
+import { AppWorkspaceSidebarSwitcher } from "./SidebarSwitcher";
 import { createScrollFade } from "./scroll-fade";
 import { assertStableUiId, assertUniqueStableUiIds } from "./stable-id";
 import { useWorkspaceMessages } from "./workspace-messages";
@@ -398,20 +401,22 @@ function AppWorkspaceDetail(props) {
     "--k2b-workspace-panel-min": `${minWidth()}px`,
     "--k2b-workspace-panel-max": `${maxWidth()}px`
   });
-  // The panel floats over the content area, and `Main` beside it makes room
-  // in CSS alone, so a server-rendered page arrives in its final geometry. A
-  // sibling cannot read the panel's own variables, so this rule hands the
-  // open panel's size to the content area around it.
-  const contentRule = () => {
+  // An open panel takes a column at the workspace's end, sized in CSS alone,
+  // so a server-rendered page arrives in its final geometry. The workspace
+  // cannot read the panel's own variables, so this rule hands the open
+  // panel's size to its workspace.
+  const workspaceRule = () => {
     const open = `#${domId()}:not([hidden])`;
-    return `.k2b-app-workspace__content:has(> ${open}, > :is(solid-island, solid-client) > ${open}){--k2b-detail-size:${size()};--k2b-detail-min:${minWidth()}px;--k2b-detail-max:${maxWidth()}px}`;
+    return `.k2b-app-workspace:has(> .k2b-app-workspace__content > ${open}, > .k2b-app-workspace__content > :is(solid-island, solid-client) > ${open}){--k2b-detail-size:${size()};--k2b-detail-min:${minWidth()}px;--k2b-detail-max:${maxWidth()}px}`;
   };
   let aside;
   onMount(() => {
     const close = () => props.onClose?.();
+    const isStep = detail => typeof detail === "object" && detail !== null && "direction" in detail && (detail.direction === 1 || detail.direction === -1);
     const step = event => {
-      const direction = event instanceof CustomEvent ? event.detail?.direction : undefined;
-      if (direction === 1 || direction === -1) props.onStep?.(direction);
+      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_CLOSE_EVENT, close);
     aside?.addEventListener(APP_WORKSPACE_DETAIL_STEP_EVENT, step);
@@ -422,7 +427,7 @@ function AppWorkspaceDetail(props) {
   });
   return [(() => {
     var _el$5 = _$getNextElement(_tmpl$5);
-    _$effect(() => _$setProperty(_el$5, "innerHTML", contentRule()));
+    _$effect(() => _$setProperty(_el$5, "innerHTML", workspaceRule()));
     return _el$5;
   })(), _$createComponent(Show, {
     get when() {
@@ -682,11 +687,12 @@ const AppWorkspaceSidebarDesktop = props => ({
 // hydrates. Islands load asynchronously and server-only sidebars never mount,
 // so `onMount` would be too late or never run. The memory is one
 // `sessionStorage` entry per path segment and sidebar position and ends with
-// the tab. A stored offset is applied first; the current item is then kept in
-// view, which is a no-op when the offset already shows it. The frame callback
+// the tab. A stored offset is applied first; the current item, or on a deeper
+// page the item that contains it, is then kept in view, which is a no-op when
+// the offset already shows it. The frame callback
 // repeats the restore once the whole document is parsed, because content that
 // follows the sidebar can still change its height before the first paint.
-const SIDEBAR_SCROLL_MEMORY_SCRIPT = ["(function(){", "var body=document.currentScript&&document.currentScript.previousElementSibling;if(!body)return;", "var storage;try{storage=window.sessionStorage}catch(_){return}", 'var key="k2b-sidebar-scroll:"+location.pathname.split("/")[1]+":"+document.querySelectorAll(".k2b-app-workspace__sidebar-body").length;', "var restore=function(){", "var stored=storage.getItem(key);if(stored!==null)body.scrollTop=Number(stored);", 'var current=body.querySelector(\'[aria-current="page"]\');if(current)current.scrollIntoView({block:"nearest"});', "};", "restore();requestAnimationFrame(restore);", "var frame=0;", 'body.addEventListener("scroll",function(){if(frame)return;frame=requestAnimationFrame(function(){frame=0;try{storage.setItem(key,String(body.scrollTop))}catch(_){}})},{passive:true});', "})();"].join("");
+const SIDEBAR_SCROLL_MEMORY_SCRIPT = ["(function(){", "var body=document.currentScript&&document.currentScript.previousElementSibling;if(!body)return;", "var storage;try{storage=window.sessionStorage}catch(_){return}", 'var key="k2b-sidebar-scroll:"+location.pathname.split("/")[1]+":"+document.querySelectorAll(".k2b-app-workspace__sidebar-body").length;', "var restore=function(){", "var stored=storage.getItem(key);if(stored!==null)body.scrollTop=Number(stored);", 'var current=body.querySelector(\'[aria-current="page"]\')||body.querySelector(\'[aria-current="true"]\');if(current)current.scrollIntoView({block:"nearest"});', "};", "restore();requestAnimationFrame(restore);", "var frame=0;", 'body.addEventListener("scroll",function(){if(frame)return;frame=requestAnimationFrame(function(){frame=0;try{storage.setItem(key,String(body.scrollTop))}catch(_){}})},{passive:true});', "})();"].join("");
 const AppWorkspaceSidebarBody = props => {
   let body;
   createScrollFade(() => body, () => props.scrollFade !== false);
@@ -851,11 +857,12 @@ const AppWorkspaceSidebarItemActions = props => (() => {
 })();
 const AppWorkspaceSidebarItemStatus = props => {
   const workspaceMessages = useWorkspaceMessages();
-  const count = () => typeof props.unread === "number" && props.unread >= 1 ? Math.floor(props.unread) : 0;
-  const dot = () => props.unread === true;
+  const waiting = () => props.waiting && Number.isFinite(props.waiting.count) ? Math.max(0, Math.floor(props.waiting.count)) : null;
+  const count = () => waiting() ?? (typeof props.unread === "number" && props.unread >= 1 ? Math.floor(props.unread) : 0);
+  const dot = () => waiting() === null && props.unread === true;
   // The marks are decorative; the row's accessible name gets one phrase instead,
   // which says no more than the "99+" a capped count shows.
-  const description = () => [count() > 99 ? workspaceMessages().sidebarUnreadMany : count() ? workspaceMessages().sidebarUnread({
+  const description = () => [waiting() !== null ? props.waiting?.label ?? "" : count() > 99 ? workspaceMessages().sidebarUnreadMany : count() ? workspaceMessages().sidebarUnread({
     count: count()
   }) : dot() ? workspaceMessages().sidebarNewActivity : "", props.mention ? workspaceMessages().sidebarMentioned : "", props.muted ? workspaceMessages().sidebarMuted : ""].filter(Boolean).join(", ");
   // The unread slot stays reserved at the end, and the marks that change most
@@ -893,7 +900,7 @@ const AppWorkspaceSidebarItemStatus = props => {
       }), _el$45, _co$8);
       _$insert(_el$36, _$createComponent(Show, {
         get when() {
-          return count();
+          return count() || waiting() === 0;
         },
         get fallback() {
           return _$createComponent(Show, {
@@ -916,7 +923,16 @@ const AppWorkspaceSidebarItemStatus = props => {
         }
       }));
       _$insert(_el$38, description, _el$41, _co$6);
-      _$effect(() => _$setAttribute(_el$33, "data-unread", count() ? "count" : dot() ? "dot" : undefined));
+      _$effect(_p$ => {
+        var _v$51 = waiting() !== null ? undefined : count() ? "count" : dot() ? "dot" : undefined,
+          _v$52 = waiting() === null ? undefined : waiting() ? "count" : "zero";
+        _v$51 !== _p$.e && _$setAttribute(_el$33, "data-unread", _p$.e = _v$51);
+        _v$52 !== _p$.t && _$setAttribute(_el$33, "data-waiting", _p$.t = _v$52);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
       return _el$33;
     }
   });
@@ -935,7 +951,7 @@ function AppWorkspaceSidebarRow(props) {
     },
     ...data()
   });
-  const current = () => props.active ? "page" : undefined;
+  const current = () => props.active === "ancestor" ? "true" : props.active ? "page" : undefined;
   const Control = control => {
     const attrs = () => control.grouped ? {
       class: "k2b-app-workspace__sidebar-item-main"
@@ -1141,10 +1157,10 @@ function AppWorkspaceSidebarItem(props) {
       var _el$68 = _$getNextElement(_tmpl$30);
       _$insert(_el$68, meta);
       _$effect(_p$ => {
-        var _v$51 = props.preview?.trigger === "row" ? metaId : undefined,
-          _v$52 = metaVisibility() === "hover" ? "hover" : undefined;
-        _v$51 !== _p$.e && _$setAttribute(_el$68, "id", _p$.e = _v$51);
-        _v$52 !== _p$.t && _$setAttribute(_el$68, "data-visibility", _p$.t = _v$52);
+        var _v$53 = props.preview?.trigger === "row" ? metaId : undefined,
+          _v$54 = metaVisibility() === "hover" ? "hover" : undefined;
+        _v$53 !== _p$.e && _$setAttribute(_el$68, "id", _p$.e = _v$53);
+        _v$54 !== _p$.t && _$setAttribute(_el$68, "data-visibility", _p$.t = _v$54);
         return _p$;
       }, {
         e: undefined,
@@ -1185,12 +1201,12 @@ function AppWorkspaceSidebarItem(props) {
               _el$72.$$click = select;
               _$insert(_el$72, content);
               _$effect(_p$ => {
-                var _v$56 = actionSlot()?.disabled,
-                  _v$57 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                  _v$58 = label();
-                _v$56 !== _p$.e && _$setProperty(_el$72, "disabled", _p$.e = _v$56);
-                _v$57 !== _p$.t && _$setAttribute(_el$72, "data-visibility", _p$.t = _v$57);
-                _v$58 !== _p$.a && _$setAttribute(_el$72, "aria-label", _p$.a = _v$58);
+                var _v$58 = actionSlot()?.disabled,
+                  _v$59 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                  _v$60 = label();
+                _v$58 !== _p$.e && _$setProperty(_el$72, "disabled", _p$.e = _v$58);
+                _v$59 !== _p$.t && _$setAttribute(_el$72, "data-visibility", _p$.t = _v$59);
+                _v$60 !== _p$.a && _$setAttribute(_el$72, "aria-label", _p$.a = _v$60);
                 return _p$;
               }, {
                 e: undefined,
@@ -1206,12 +1222,12 @@ function AppWorkspaceSidebarItem(props) {
             _el$71.$$click = select;
             _$insert(_el$71, content);
             _$effect(_p$ => {
-              var _v$53 = actionSlot()?.href,
-                _v$54 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                _v$55 = label();
-              _v$53 !== _p$.e && _$setAttribute(_el$71, "href", _p$.e = _v$53);
-              _v$54 !== _p$.t && _$setAttribute(_el$71, "data-visibility", _p$.t = _v$54);
-              _v$55 !== _p$.a && _$setAttribute(_el$71, "aria-label", _p$.a = _v$55);
+              var _v$55 = actionSlot()?.href,
+                _v$56 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                _v$57 = label();
+              _v$55 !== _p$.e && _$setAttribute(_el$71, "href", _p$.e = _v$55);
+              _v$56 !== _p$.t && _$setAttribute(_el$71, "data-visibility", _p$.t = _v$56);
+              _v$57 !== _p$.a && _$setAttribute(_el$71, "aria-label", _p$.a = _v$57);
               return _p$;
             }, {
               e: undefined,
@@ -1560,10 +1576,10 @@ const AppWorkspaceNavTree = props => {
           var _el$79 = _$getNextElement(_tmpl$36);
           _$insert(_el$79, () => item.meta);
           _$effect(_p$ => {
-            var _v$59 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
-              _v$60 = item.metaVisibility === "hover" ? "hover" : undefined;
-            _v$59 !== _p$.e && _$className(_el$79, _p$.e = _v$59);
-            _v$60 !== _p$.t && _$setAttribute(_el$79, "data-visibility", _p$.t = _v$60);
+            var _v$61 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
+              _v$62 = item.metaVisibility === "hover" ? "hover" : undefined;
+            _v$61 !== _p$.e && _$className(_el$79, _p$.e = _v$61);
+            _v$62 !== _p$.t && _$setAttribute(_el$79, "data-visibility", _p$.t = _v$62);
             return _p$;
           }, {
             e: undefined,
@@ -1715,28 +1731,28 @@ const AppWorkspaceNavTree = props => {
           }
         }), _el$89, _co$13);
         _$effect(_p$ => {
-          var _v$61 = siblings().length,
-            _v$62 = place() + 1,
-            _v$63 = selected(),
-            _v$64 = hasChildren() ? isExpanded(item.id) : undefined,
-            _v$65 = item.disabled ? "true" : undefined,
-            _v$66 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
-            _v$67 = movable() ? true : undefined,
-            _v$68 = item.id,
-            _v$69 = dragged()?.id === item.id ? "" : undefined,
-            _v$70 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
-            _v$71 = String(props.indented === false ? 0 : depth);
-          _v$61 !== _p$.e && _$setAttribute(_el$84, "aria-setsize", _p$.e = _v$61);
-          _v$62 !== _p$.t && _$setAttribute(_el$84, "aria-posinset", _p$.t = _v$62);
-          _v$63 !== _p$.a && _$setAttribute(_el$84, "aria-selected", _p$.a = _v$63);
-          _v$64 !== _p$.o && _$setAttribute(_el$84, "aria-expanded", _p$.o = _v$64);
-          _v$65 !== _p$.i && _$setAttribute(_el$84, "aria-disabled", _p$.i = _v$65);
-          _v$66 !== _p$.n && _$setAttribute(_el$84, "tabindex", _p$.n = _v$66);
-          _v$67 !== _p$.s && _$setAttribute(_el$84, "draggable", _p$.s = _v$67);
-          _v$68 !== _p$.h && _$setAttribute(_el$84, "data-k2b-nav-tree-id", _p$.h = _v$68);
-          _v$69 !== _p$.r && _$setAttribute(_el$84, "data-k2b-nav-tree-dragging", _p$.r = _v$69);
-          _v$70 !== _p$.d && _$setAttribute(_el$84, "data-k2b-nav-tree-drop", _p$.d = _v$70);
-          _v$71 !== _p$.l && _$setStyleProperty(_el$84, "--k2b-nav-tree-depth", _p$.l = _v$71);
+          var _v$63 = siblings().length,
+            _v$64 = place() + 1,
+            _v$65 = selected(),
+            _v$66 = hasChildren() ? isExpanded(item.id) : undefined,
+            _v$67 = item.disabled ? "true" : undefined,
+            _v$68 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
+            _v$69 = movable() ? true : undefined,
+            _v$70 = item.id,
+            _v$71 = dragged()?.id === item.id ? "" : undefined,
+            _v$72 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
+            _v$73 = String(props.indented === false ? 0 : depth);
+          _v$63 !== _p$.e && _$setAttribute(_el$84, "aria-setsize", _p$.e = _v$63);
+          _v$64 !== _p$.t && _$setAttribute(_el$84, "aria-posinset", _p$.t = _v$64);
+          _v$65 !== _p$.a && _$setAttribute(_el$84, "aria-selected", _p$.a = _v$65);
+          _v$66 !== _p$.o && _$setAttribute(_el$84, "aria-expanded", _p$.o = _v$66);
+          _v$67 !== _p$.i && _$setAttribute(_el$84, "aria-disabled", _p$.i = _v$67);
+          _v$68 !== _p$.n && _$setAttribute(_el$84, "tabindex", _p$.n = _v$68);
+          _v$69 !== _p$.s && _$setAttribute(_el$84, "draggable", _p$.s = _v$69);
+          _v$70 !== _p$.h && _$setAttribute(_el$84, "data-k2b-nav-tree-id", _p$.h = _v$70);
+          _v$71 !== _p$.r && _$setAttribute(_el$84, "data-k2b-nav-tree-dragging", _p$.r = _v$71);
+          _v$72 !== _p$.d && _$setAttribute(_el$84, "data-k2b-nav-tree-drop", _p$.d = _v$72);
+          _v$73 !== _p$.l && _$setStyleProperty(_el$84, "--k2b-nav-tree-depth", _p$.l = _v$73);
           return _p$;
         }, {
           e: undefined,
@@ -1790,10 +1806,10 @@ const AppWorkspaceNavTree = props => {
     typeof _ref$5 === "function" ? _$use(_ref$5, _el$90) : root = _el$90;
     _$insert(_el$90, () => renderItems(roots, 0));
     _$effect(_p$ => {
-      var _v$72 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
-        _v$73 = props.ariaLabel;
-      _v$72 !== _p$.e && _$className(_el$90, _p$.e = _v$72);
-      _v$73 !== _p$.t && _$setAttribute(_el$90, "aria-label", _p$.t = _v$73);
+      var _v$74 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
+        _v$75 = props.ariaLabel;
+      _v$74 !== _p$.e && _$className(_el$90, _p$.e = _v$74);
+      _v$75 !== _p$.t && _$setAttribute(_el$90, "aria-label", _p$.t = _v$75);
       return _p$;
     }, {
       e: undefined,
@@ -1895,11 +1911,14 @@ const AppWorkspaceSidebarIconAction = props => {
 };
 /**
  * The row above the work area. From 48 to 64 rem it holds the button that
- * opens the overlay sidebar. On a page with a page above it, at every width,
- * it shows the host's page title with the way up (see `PageTitle`); the
- * page's own `PageTitle` takes its place. It is one fixed height and draws no
- * line; CSS decides when it shows, so the server-rendered page already has
- * its final geometry.
+ * opens the overlay sidebar. On a page with a page above it, it shows the
+ * host's page title with the way up (see `PageTitle`); the page's own
+ * `PageTitle` takes its place. The visible title is no heading, because many
+ * pages render their own `h1`. From 64 rem a sidebar that marks the current
+ * page names it already: the row hides, and only on a page without its own
+ * `h1` its heading stays for assistive technology. It is one fixed height
+ * and draws no line; CSS decides when it shows, so the server-rendered page
+ * already has its final geometry.
  */
 function AppWorkspaceHead(props) {
   const messages = useWorkspaceMessages();
@@ -1929,13 +1948,18 @@ function AppWorkspaceHead(props) {
       get when() {
         return trail();
       },
-      children: current => _$createComponent(PageTitle, {
+      children: current => [_$createComponent(PageTitle, {
         get trail() {
           return current();
         },
         as: "p",
         fallback: true
-      })
+      }), (() => {
+        var _el$105 = _$getNextElement(_tmpl$46);
+        _$setAttribute(_el$105, "data-k2b-server", isServer ? "" : undefined);
+        _$insert(_el$105, () => current().title);
+        return _el$105;
+      })()]
     }), _el$104, _co$16);
     _$effect(() => _$setAttribute(_el$99, "data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : undefined));
     return _el$99;
@@ -1973,38 +1997,41 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          var _el$105 = _$getNextElement(_tmpl$46),
-            _el$106 = _el$105.firstChild,
-            [_el$107, _co$17] = _$getNextMarker(_el$106.nextSibling),
-            _el$108 = _el$107.nextSibling,
-            [_el$109, _co$18] = _$getNextMarker(_el$108.nextSibling);
+          var _el$106 = _$getNextElement(_tmpl$47),
+            _el$107 = _el$106.firstChild,
+            [_el$108, _co$17] = _$getNextMarker(_el$107.nextSibling),
+            _el$109 = _el$108.nextSibling,
+            [_el$110, _co$18] = _$getNextMarker(_el$109.nextSibling);
           var _ref$6 = root;
-          typeof _ref$6 === "function" ? _$use(_ref$6, _el$105) : root = _el$105;
-          _$insert(_el$105, _$createComponent(AppWorkspaceHead, {
+          typeof _ref$6 === "function" ? _$use(_ref$6, _el$106) : root = _el$106;
+          _$insert(_el$106, _$createComponent(AppWorkspaceHead, {
             sidebarId: sidebarId,
             nested: nested
-          }), _el$107, _co$17);
-          _$insert(_el$105, () => props.children, _el$109, _co$18);
+          }), _el$108, _co$17);
+          _$insert(_el$106, () => props.children, _el$110, _co$18);
           _$effect(_p$ => {
-            var _v$74 = `k2b-app-workspace ${props.class ?? ""}`,
-              _v$75 = props.mobileSurface,
-              _v$76 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
-              _v$77 = props.resizable === false ? "false" : "true",
-              _v$78 = appWorkspaceLayoutStyle(initialLayoutState());
-            _v$74 !== _p$.e && _$className(_el$105, _p$.e = _v$74);
-            _v$75 !== _p$.t && _$setAttribute(_el$105, "data-mobile-surface", _p$.t = _v$75);
-            _v$76 !== _p$.a && _$setAttribute(_el$105, "data-sidebar-collapsed", _p$.a = _v$76);
-            _v$77 !== _p$.o && _$setAttribute(_el$105, "data-workspace-resizable", _p$.o = _v$77);
-            _p$.i = _$style(_el$105, _v$78, _p$.i);
+            var _v$76 = `k2b-app-workspace ${props.class ?? ""}`,
+              _v$77 = props.mobileSurface,
+              _v$78 = props.flat ? "true" : undefined,
+              _v$79 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
+              _v$80 = props.resizable === false ? "false" : "true",
+              _v$81 = appWorkspaceLayoutStyle(initialLayoutState());
+            _v$76 !== _p$.e && _$className(_el$106, _p$.e = _v$76);
+            _v$77 !== _p$.t && _$setAttribute(_el$106, "data-mobile-surface", _p$.t = _v$77);
+            _v$78 !== _p$.a && _$setAttribute(_el$106, "data-flat", _p$.a = _v$78);
+            _v$79 !== _p$.o && _$setAttribute(_el$106, "data-sidebar-collapsed", _p$.o = _v$79);
+            _v$80 !== _p$.i && _$setAttribute(_el$106, "data-workspace-resizable", _p$.i = _v$80);
+            _p$.n = _$style(_el$106, _v$81, _p$.n);
             return _p$;
           }, {
             e: undefined,
             t: undefined,
             a: undefined,
             o: undefined,
-            i: undefined
+            i: undefined,
+            n: undefined
           });
-          return _el$105;
+          return _el$106;
         }
       });
     }
@@ -2019,10 +2046,10 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
   }
 });
 AppWorkspace.Content = props => (() => {
-  var _el$110 = _$getNextElement(_tmpl$2);
-  _$insert(_el$110, () => props.children);
-  _$effect(() => _$className(_el$110, `k2b-app-workspace__content ${props.class ?? ""}`));
-  return _el$110;
+  var _el$111 = _$getNextElement(_tmpl$2);
+  _$insert(_el$111, () => props.children);
+  _$effect(() => _$className(_el$111, `k2b-app-workspace__content ${props.class ?? ""}`));
+  return _el$111;
 })();
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
@@ -2030,6 +2057,7 @@ AppWorkspace.Detail = AppWorkspaceDetail;
 AppWorkspace.BottomDrawer = AppWorkspaceBottomDrawer;
 AppWorkspace.Sidebar = AppWorkspaceSidebar;
 AppWorkspace.SidebarDesktop = AppWorkspaceSidebarDesktop;
+AppWorkspace.SidebarSwitcher = AppWorkspaceSidebarSwitcher;
 AppWorkspace.SidebarSection = AppWorkspaceSidebarSection;
 AppWorkspace.SidebarBody = AppWorkspaceSidebarBody;
 AppWorkspace.SidebarFooter = AppWorkspaceSidebarFooter;