@k2b/ui 0.1.0-rc.0

package/dist/browser/layout/AppWorkspace.js

@@ -0,0 +1,1502 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__resize role=separator><span aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__main-primary data-workspace-main-region=main>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<section>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<aside>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<nav class=k2b-app-workspace__sidebar-mobile><details><summary><span class=k2b-app-workspace__sidebar-mobile-trigger><i class="ti ti-menu-2"aria-hidden=true></i><span></span></span><i class="ti ti-chevron-down"aria-hidden=true></i></summary><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<aside><div class=k2b-app-workspace__sidebar-desktop>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-mobile-items>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<footer>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-section-actions>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<header class=k2b-app-workspace__sidebar-section-header><!$><!/><!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<section><!$><!/><!$><!/>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<h2>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-item-actions>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div><button type=button class=k2b-app-workspace__sidebar-item-main></button><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div><a class=k2b-app-workspace__sidebar-item-main></a><!$><!/>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<button type=button>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<a>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<i>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true><i>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<div role=tree>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace>`);
+import { Link } from "@k2b/ssr/nav";
+import { children, createContext, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, useContext } from "solid-js";
+import { useUiMessages } from "../intl/messages";
+import { 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 { assertStableUiId, assertUniqueStableUiIds } from "./stable-id";
+const ResizeContext = createContext(true);
+const LayoutStateContext = createContext(null);
+const SidebarModeContext = createContext("desktop");
+const MAIN_PANE = Symbol("AppWorkspace.MainPane");
+const SIDEBAR_MOBILE_TRIGGER = Symbol("AppWorkspace.SidebarMobileTrigger");
+const SIDEBAR_MOBILE = Symbol("AppWorkspace.SidebarMobile");
+const SIDEBAR_DESKTOP = Symbol("AppWorkspace.SidebarDesktop");
+const SIDEBAR_ITEM_ICON = Symbol("AppWorkspace.SidebarItemIcon");
+const SIDEBAR_ITEM_LABEL = Symbol("AppWorkspace.SidebarItemLabel");
+const SIDEBAR_ITEM_META = Symbol("AppWorkspace.SidebarItemMeta");
+const SIDEBAR_ITEM_ACTION = Symbol("AppWorkspace.SidebarItemAction");
+const NAV_TREE_ITEM = Symbol("AppWorkspace.NavTree.Item");
+const flatten = value => {
+  // Solid control-flow components such as <For> expose their rendered value
+  // through an accessor. Compound slots may therefore be nested behind a
+  // function even after `children()` resolves the outer collection.
+  if (typeof value === "function") return flatten(value());
+  if (Array.isArray(value)) return value.flatMap(flatten);
+  return value === null || value === undefined || typeof value === "boolean" ? [] : [value];
+};
+const mainPaneSlot = value => Boolean(value && typeof value === "object" && "kind" in value && value.kind === MAIN_PANE);
+const sidebarChildSlot = value => Boolean(value && typeof value === "object" && "kind" in value && [SIDEBAR_MOBILE_TRIGGER, SIDEBAR_MOBILE, SIDEBAR_DESKTOP].includes(value.kind));
+const sidebarItemSlot = value => Boolean(value && typeof value === "object" && "kind" in value && [SIDEBAR_ITEM_ICON, SIDEBAR_ITEM_LABEL, SIDEBAR_ITEM_META, SIDEBAR_ITEM_ACTION].includes(value.kind));
+const navTreeItemSlot = value => Boolean(value && typeof value === "object" && "kind" in value && value.kind === NAV_TREE_ITEM);
+function ResizeHandle(props) {
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$effect(_p$ => {
+      var _v$ = props.label ?? (props.kind === "sidebar" ? "Resize navigation" : props.kind === "pane" ? "Resize workspace pane" : props.kind === "detail" ? "Resize detail panel" : "Resize bottom drawer"),
+        _v$2 = props.controls,
+        _v$3 = props.kind === "drawer" ? "horizontal" : "vertical",
+        _v$4 = props.minSize,
+        _v$5 = props.maxSize,
+        _v$6 = props.defaultSize,
+        _v$7 = props.kind,
+        _v$8 = props.panelId,
+        _v$9 = props.edge,
+        _v$0 = props.shadow ? "true" : undefined,
+        _v$1 = props.defaultSize,
+        _v$10 = props.minSize,
+        _v$11 = props.maxSize,
+        _v$12 = props.style;
+      _v$ !== _p$.e && _$setAttribute(_el$, "aria-label", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$, "aria-controls", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$, "aria-orientation", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$, "aria-valuemin", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setAttribute(_el$, "aria-valuemax", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setAttribute(_el$, "aria-valuenow", _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setAttribute(_el$, "data-app-workspace-resize", _p$.s = _v$7);
+      _v$8 !== _p$.h && _$setAttribute(_el$, "data-workspace-panel-id", _p$.h = _v$8);
+      _v$9 !== _p$.r && _$setAttribute(_el$, "data-workspace-resize-edge", _p$.r = _v$9);
+      _v$0 !== _p$.d && _$setAttribute(_el$, "data-workspace-resize-shadow", _p$.d = _v$0);
+      _v$1 !== _p$.l && _$setAttribute(_el$, "data-workspace-default-size", _p$.l = _v$1);
+      _v$10 !== _p$.u && _$setAttribute(_el$, "data-workspace-min-size", _p$.u = _v$10);
+      _v$11 !== _p$.c && _$setAttribute(_el$, "data-workspace-max-size", _p$.c = _v$11);
+      _p$.w = _$style(_el$, _v$12, _p$.w);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined,
+      c: undefined,
+      w: undefined
+    });
+    return _el$;
+  })();
+}
+const modeAttrs = mode => mode && mode !== "always" ? {
+  "data-sidebar-mode": mode
+} : {};
+/** Same rule as `modeAttrs`, for the un-prefixed `data` bag on sidebar items. */
+const modeData = mode => mode && mode !== "always" ? {
+  "sidebar-mode": mode
+} : {};
+const scrollAttrs = key => key ? {
+  "data-scroll-preserve": key
+} : {};
+const iconClass = (icon, fallback = "ti-circle") => icon?.startsWith("ti ") ? icon : `ti ${icon || fallback}`;
+function AppWorkspaceMainPane(props) {
+  return {
+    kind: MAIN_PANE,
+    props,
+    domId: `k2b-workspace-pane-${createUniqueId()}`
+  };
+}
+function AppWorkspaceMain(props) {
+  const rootResizable = useContext(ResizeContext);
+  const resolved = children(() => props.children);
+  const values = createMemo(() => flatten(resolved()));
+  const paneIds = createMemo(() => {
+    const ids = values().filter(mainPaneSlot).map(slot => slot.props.id);
+    assertUniqueStableUiIds(ids, "AppWorkspace.MainPane id");
+    return ids;
+  });
+  const regions = createMemo(() => {
+    const all = values();
+    const primary = all.filter(value => !mainPaneSlot(value));
+    const primaryIndex = all.findIndex(value => !mainPaneSlot(value));
+    let inserted = false;
+    const result = [];
+    all.forEach((value, index) => {
+      if (mainPaneSlot(value)) {
+        if (value.props.open !== false) result.push({
+          type: "pane",
+          index,
+          slot: value
+        });
+      } else if (!inserted) {
+        inserted = true;
+        result.push({
+          type: "primary",
+          index: primaryIndex,
+          children: primary
+        });
+      }
+    });
+    return result;
+  });
+  const anchorRegion = createMemo(() => regions().find(candidate => candidate.type === "primary") ?? regions()[0]);
+  // Presence of a MainPane slot — not of an *open* one — decides the split
+  // layout. Deriving it from `regions()` made a workspace whose panes are all
+  // closed fall back to `resolved()`, which renders the raw slot objects.
+  const hasPanes = createMemo(() => paneIds().length > 0);
+  return (() => {
+    var _el$2 = _$getNextElement(_tmpl$2);
+    _$spread(_el$2, _$mergeProps({
+      get ["class"]() {
+        return `k2b-app-workspace__main ${hasPanes() ? "has-panes" : ""} ${props.class ?? ""}`;
+      },
+      get ["data-mobile-pane"]() {
+        return props.mobilePane;
+      },
+      get ["data-scroll"]() {
+        return props.scroll === false ? "false" : undefined;
+      },
+      get ["aria-busy"]() {
+        return props["aria-busy"];
+      }
+    }, () => scrollAttrs(props.scrollPreserveKey)), false, true);
+    _$insert(_el$2, _$createComponent(Show, {
+      get when() {
+        return hasPanes();
+      },
+      get fallback() {
+        return resolved();
+      },
+      get children() {
+        return regions().flatMap(region => {
+          const anchor = anchorRegion();
+          const activeMobilePane = props.mobilePane ?? (anchor?.type === "pane" ? anchor.slot.props.id : "main");
+          if (region.type === "primary") {
+            return (() => {
+              var _el$3 = _$getNextElement(_tmpl$3);
+              _$setAttribute(_el$3, "data-workspace-mobile-active", activeMobilePane === "main" ? "true" : "false");
+              _$insert(_el$3, () => region.children);
+              return _el$3;
+            })();
+          }
+          const pane = region.slot;
+          const panelId = assertStableUiId(pane.props.id, "AppWorkspace.MainPane id");
+          const variable = appWorkspacePanelVariable("pane", panelId);
+          const isAnchor = region === anchor;
+          const resizable = !isAnchor && (pane.props.resizable ?? rootResizable);
+          const defaultSize = pane.props.defaultSize ?? 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 content = (() => {
+            var _el$4 = _$getNextElement(_tmpl$4);
+            _$setAttribute(_el$4, "data-workspace-panel-id", panelId);
+            _$setAttribute(_el$4, "data-workspace-resizable", resizable ? "true" : "false");
+            _$insert(_el$4, () => pane.props.children);
+            _$effect(_p$ => {
+              var _v$13 = pane.domId,
+                _v$14 = `k2b-app-workspace__main-pane ${isAnchor ? "is-primary" : ""} ${pane.props.class ?? ""}`,
+                _v$15 = pane.props.label,
+                _v$16 = pane.props.id,
+                _v$17 = activeMobilePane === pane.props.id ? "true" : "false",
+                _v$18 = pane.props.surface === "navigation" ? "navigation" : undefined,
+                _v$19 = pane.props.scroll === false ? "false" : undefined,
+                _v$20 = isAnchor ? undefined : {
+                  "--k2b-workspace-panel-size": `var(${variable}, ${defaultSize}px)`
+                };
+              _v$13 !== _p$.e && _$setAttribute(_el$4, "id", _p$.e = _v$13);
+              _v$14 !== _p$.t && _$className(_el$4, _p$.t = _v$14);
+              _v$15 !== _p$.a && _$setAttribute(_el$4, "aria-label", _p$.a = _v$15);
+              _v$16 !== _p$.o && _$setAttribute(_el$4, "data-workspace-main-region", _p$.o = _v$16);
+              _v$17 !== _p$.i && _$setAttribute(_el$4, "data-workspace-mobile-active", _p$.i = _v$17);
+              _v$18 !== _p$.n && _$setAttribute(_el$4, "data-surface", _p$.n = _v$18);
+              _v$19 !== _p$.s && _$setAttribute(_el$4, "data-scroll", _p$.s = _v$19);
+              _p$.h = _$style(_el$4, _v$20, _p$.h);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined,
+              o: undefined,
+              i: undefined,
+              n: undefined,
+              s: undefined,
+              h: undefined
+            });
+            return _el$4;
+          })();
+          if (!resizable) return content;
+          const before = region.index < (anchor?.index ?? 0);
+          const handle = _$createComponent(ResizeHandle, {
+            kind: "pane",
+            edge: before ? "end" : "start",
+            get controls() {
+              return pane.domId;
+            },
+            panelId: panelId,
+            defaultSize: defaultSize,
+            minSize: minSize,
+            maxSize: maxSize,
+            get shadow() {
+              return pane.props.resizeShadow !== false;
+            },
+            get label() {
+              return `Resize ${pane.props.label}`;
+            }
+          });
+          return before ? [content, handle] : [handle, content];
+        });
+      }
+    }));
+    _$runHydrationEvents();
+    return _el$2;
+  })();
+}
+function AppWorkspaceDetail(props) {
+  const rootResizable = useContext(ResizeContext);
+  const panelId = () => assertStableUiId(props.id, "AppWorkspace.Detail id");
+  const domId = () => `k2b-workspace-detail-${panelId()}`;
+  const variable = () => appWorkspacePanelVariable("detail", panelId());
+  // Cloud's `detailDefaultWidth`. These feed `aria-valuenow` and the
+  // `var(…, Npx)` first-paint fallback, so they are behaviour, not taste.
+  const widths = {
+    sm: 288,
+    md: 384,
+    lg: 480,
+    xl: 544
+  };
+  const defaultWidth = () => widths[props.width ?? "md"] ?? APP_WORKSPACE_DETAIL_DEFAULT;
+  const minWidth = () => props.minWidth ?? APP_WORKSPACE_DETAIL_MIN;
+  const maxWidth = () => Math.max(minWidth(), props.maxWidth ?? APP_WORKSPACE_DETAIL_MAX);
+  const resizable = () => props.resizable ?? rootResizable;
+  return [_$createComponent(Show, {
+    get when() {
+      return resizable();
+    },
+    get children() {
+      return _$createComponent(ResizeHandle, {
+        kind: "detail",
+        edge: "start",
+        get controls() {
+          return domId();
+        },
+        get panelId() {
+          return panelId();
+        },
+        get defaultSize() {
+          return defaultWidth();
+        },
+        get minSize() {
+          return minWidth();
+        },
+        get maxSize() {
+          return maxWidth();
+        },
+        shadow: true,
+        get style() {
+          return {
+            "--k2b-workspace-panel-size": `var(${variable()}, ${defaultWidth()}px)`
+          };
+        }
+      });
+    }
+  }), (() => {
+    var _el$5 = _$getNextElement(_tmpl$5);
+    _$insert(_el$5, () => props.children);
+    _$effect(_p$ => {
+      var _v$21 = domId(),
+        _v$22 = `k2b-app-workspace__detail ${props.class ?? ""}`,
+        _v$23 = props.width ?? "md",
+        _v$24 = panelId(),
+        _v$25 = resizable() ? "true" : "false",
+        _v$26 = !props.open,
+        _v$27 = `var(${variable()}, ${defaultWidth()}px)`,
+        _v$28 = props.viewTransitionName;
+      _v$21 !== _p$.e && _$setAttribute(_el$5, "id", _p$.e = _v$21);
+      _v$22 !== _p$.t && _$className(_el$5, _p$.t = _v$22);
+      _v$23 !== _p$.a && _$setAttribute(_el$5, "data-width", _p$.a = _v$23);
+      _v$24 !== _p$.o && _$setAttribute(_el$5, "data-workspace-panel-id", _p$.o = _v$24);
+      _v$25 !== _p$.i && _$setAttribute(_el$5, "data-workspace-resizable", _p$.i = _v$25);
+      _v$26 !== _p$.n && _$setProperty(_el$5, "hidden", _p$.n = _v$26);
+      _v$27 !== _p$.s && _$setStyleProperty(_el$5, "--k2b-workspace-panel-size", _p$.s = _v$27);
+      _v$28 !== _p$.h && _$setStyleProperty(_el$5, "view-transition-name", _p$.h = _v$28);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined
+    });
+    return _el$5;
+  })()];
+}
+function AppWorkspaceBottomDrawer(props) {
+  const rootResizable = useContext(ResizeContext);
+  const panelId = () => assertStableUiId(props.id, "AppWorkspace.BottomDrawer id");
+  const domId = () => `k2b-workspace-drawer-${panelId()}`;
+  const variable = () => appWorkspacePanelVariable("drawer", panelId());
+  // Cloud's `drawerDefaultHeight`.
+  const heights = {
+    sm: 192,
+    md: 240,
+    lg: 320
+  };
+  const defaultHeight = () => heights[props.height ?? "md"] ?? APP_WORKSPACE_DRAWER_DEFAULT;
+  const minHeight = () => props.minHeight ?? APP_WORKSPACE_DRAWER_MIN;
+  const maxHeight = () => Math.max(minHeight(), props.maxHeight ?? APP_WORKSPACE_DRAWER_MAX);
+  const resizable = () => props.resizable ?? rootResizable;
+  return [_$createComponent(Show, {
+    get when() {
+      return resizable();
+    },
+    get children() {
+      return _$createComponent(ResizeHandle, {
+        kind: "drawer",
+        edge: "start",
+        get controls() {
+          return domId();
+        },
+        get panelId() {
+          return panelId();
+        },
+        get defaultSize() {
+          return defaultHeight();
+        },
+        get minSize() {
+          return minHeight();
+        },
+        get maxSize() {
+          return maxHeight();
+        },
+        shadow: true,
+        get style() {
+          return {
+            "--k2b-workspace-panel-size": `var(${variable()}, ${defaultHeight()}px)`
+          };
+        }
+      });
+    }
+  }), (() => {
+    var _el$6 = _$getNextElement(_tmpl$5);
+    _$insert(_el$6, () => props.children);
+    _$effect(_p$ => {
+      var _v$29 = domId(),
+        _v$30 = `k2b-app-workspace__drawer ${props.class ?? ""}`,
+        _v$31 = props.height ?? "md",
+        _v$32 = panelId(),
+        _v$33 = resizable() ? "true" : "false",
+        _v$34 = !props.open,
+        _v$35 = `var(${variable()}, ${defaultHeight()}px)`,
+        _v$36 = props.viewTransitionName;
+      _v$29 !== _p$.e && _$setAttribute(_el$6, "id", _p$.e = _v$29);
+      _v$30 !== _p$.t && _$className(_el$6, _p$.t = _v$30);
+      _v$31 !== _p$.a && _$setAttribute(_el$6, "data-height", _p$.a = _v$31);
+      _v$32 !== _p$.o && _$setAttribute(_el$6, "data-workspace-panel-id", _p$.o = _v$32);
+      _v$33 !== _p$.i && _$setAttribute(_el$6, "data-workspace-resizable", _p$.i = _v$33);
+      _v$34 !== _p$.n && _$setProperty(_el$6, "hidden", _p$.n = _v$34);
+      _v$35 !== _p$.s && _$setStyleProperty(_el$6, "--k2b-workspace-panel-size", _p$.s = _v$35);
+      _v$36 !== _p$.h && _$setStyleProperty(_el$6, "view-transition-name", _p$.h = _v$36);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined
+    });
+    return _el$6;
+  })()];
+}
+const AppWorkspaceSidebarMobileTrigger = props => ({
+  kind: SIDEBAR_MOBILE_TRIGGER,
+  ...props
+});
+function AppWorkspaceSidebar(props) {
+  const rootResizable = useContext(ResizeContext);
+  const resizable = () => props.resizable ?? rootResizable;
+  const defaultSize = () => props.defaultSize ?? APP_WORKSPACE_SIDEBAR_DEFAULT;
+  const minSize = () => props.minSize ?? (props.collapsible ? APP_WORKSPACE_SIDEBAR_COLLAPSED : APP_WORKSPACE_SIDEBAR_MIN);
+  const maxSize = () => props.maxSize ?? APP_WORKSPACE_SIDEBAR_MAX;
+  const generatedId = createUniqueId();
+  const domId = `k2b-workspace-sidebar-${generatedId}`;
+  const resolved = children(() => props.children);
+  const slots = createMemo(() => flatten(resolved()).filter(sidebarChildSlot));
+  const mobileTrigger = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_MOBILE_TRIGGER));
+  const mobile = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_MOBILE));
+  const desktop = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_DESKTOP));
+  return [_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!mobileTrigger())() && mobile();
+    },
+    get children() {
+      var _el$7 = _$getNextElement(_tmpl$6),
+        _el$8 = _el$7.firstChild,
+        _el$9 = _el$8.firstChild,
+        _el$0 = _el$9.firstChild,
+        _el$1 = _el$0.firstChild,
+        _el$10 = _el$1.nextSibling,
+        _el$11 = _el$9.nextSibling,
+        [_el$12, _co$] = _$getNextMarker(_el$11.nextSibling);
+      _$insert(_el$10, () => mobileTrigger().label);
+      _$insert(_el$8, _$createComponent(SidebarModeContext.Provider, {
+        value: "mobile",
+        get children() {
+          return mobile().children;
+        }
+      }), _el$12, _co$);
+      _$effect(() => _$setAttribute(_el$7, "aria-label", mobileTrigger().label));
+      return _el$7;
+    }
+  }), (() => {
+    var _el$13 = _$getNextElement(_tmpl$7),
+      _el$14 = _el$13.firstChild;
+    _$setAttribute(_el$13, "id", domId);
+    _$insert(_el$14, _$createComponent(SidebarModeContext.Provider, {
+      value: "desktop",
+      get children() {
+        return desktop()?.children;
+      }
+    }));
+    _$effect(_p$ => {
+      var _v$37 = `k2b-app-workspace__sidebar ${props.class ?? ""}`,
+        _v$38 = mobileTrigger()?.label,
+        _v$39 = resizable() ? "true" : "false",
+        _v$40 = props.collapsible ? "true" : "false";
+      _v$37 !== _p$.e && _$className(_el$13, _p$.e = _v$37);
+      _v$38 !== _p$.t && _$setAttribute(_el$13, "aria-label", _p$.t = _v$38);
+      _v$39 !== _p$.a && _$setAttribute(_el$13, "data-workspace-resizable", _p$.a = _v$39);
+      _v$40 !== _p$.o && _$setAttribute(_el$13, "data-workspace-collapsible", _p$.o = _v$40);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$13;
+  })(), _$createComponent(Show, {
+    get when() {
+      return resizable();
+    },
+    get children() {
+      return _$createComponent(ResizeHandle, {
+        kind: "sidebar",
+        edge: "end",
+        controls: domId,
+        get defaultSize() {
+          return defaultSize();
+        },
+        get minSize() {
+          return minSize();
+        },
+        get maxSize() {
+          return maxSize();
+        },
+        get shadow() {
+          return props.resizeShadow !== false;
+        }
+      });
+    }
+  })];
+}
+const AppWorkspaceSidebarMobile = props => ({
+  kind: SIDEBAR_MOBILE,
+  children: props.children
+});
+const AppWorkspaceSidebarDesktop = props => ({
+  kind: SIDEBAR_DESKTOP,
+  children: props.children
+});
+const AppWorkspaceSidebarMobileItems = props => (() => {
+  var _el$15 = _$getNextElement(_tmpl$8);
+  _$spread(_el$15, _$mergeProps(() => scrollAttrs(props.scrollPreserveKey)), false, true);
+  _$insert(_el$15, () => props.children);
+  _$runHydrationEvents();
+  return _el$15;
+})();
+const AppWorkspaceSidebarBody = props => (() => {
+  var _el$16 = _$getNextElement(_tmpl$2);
+  _$spread(_el$16, _$mergeProps({
+    get ["class"]() {
+      return `k2b-app-workspace__sidebar-body ${props.class ?? ""}`;
+    }
+  }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), false, true);
+  _$insert(_el$16, () => props.children);
+  _$runHydrationEvents();
+  return _el$16;
+})();
+const AppWorkspaceSidebarMobileBody = props => (() => {
+  var _el$17 = _$getNextElement(_tmpl$2);
+  _$spread(_el$17, _$mergeProps({
+    get ["class"]() {
+      return `k2b-app-workspace__sidebar-mobile-body ${props.class ?? ""}`;
+    }
+  }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), false, true);
+  _$insert(_el$17, () => props.children);
+  _$runHydrationEvents();
+  return _el$17;
+})();
+const AppWorkspaceSidebarFooter = props => (() => {
+  var _el$18 = _$getNextElement(_tmpl$9);
+  _$spread(_el$18, _$mergeProps({
+    get ["class"]() {
+      return `k2b-app-workspace__sidebar-footer ${props.class ?? ""}`;
+    }
+  }, () => modeAttrs(props.sidebarMode)), false, true);
+  _$insert(_el$18, () => props.children);
+  _$runHydrationEvents();
+  return _el$18;
+})();
+const AppWorkspaceSidebarSection = props => (() => {
+  var _el$19 = _$getNextElement(_tmpl$10),
+    _el$26 = _el$19.firstChild,
+    [_el$27, _co$4] = _$getNextMarker(_el$26.nextSibling),
+    _el$28 = _el$27.nextSibling,
+    [_el$29, _co$5] = _$getNextMarker(_el$28.nextSibling);
+  _$spread(_el$19, _$mergeProps({
+    get ["class"]() {
+      return `k2b-app-workspace__sidebar-section ${props.class ?? ""}`;
+    }
+  }, () => modeAttrs(props.sidebarMode)), false, true);
+  _$insert(_el$19, _$createComponent(Show, {
+    get when() {
+      return props.title || props.actions;
+    },
+    get children() {
+      var _el$20 = _$getNextElement(_tmpl$1),
+        _el$22 = _el$20.firstChild,
+        [_el$23, _co$2] = _$getNextMarker(_el$22.nextSibling),
+        _el$24 = _el$23.nextSibling,
+        [_el$25, _co$3] = _$getNextMarker(_el$24.nextSibling);
+      _$insert(_el$20, _$createComponent(Show, {
+        get when() {
+          return props.title;
+        },
+        children: title => (() => {
+          var _el$30 = _$getNextElement(_tmpl$11);
+          _$insert(_el$30, title);
+          return _el$30;
+        })()
+      }), _el$23, _co$2);
+      _$insert(_el$20, _$createComponent(Show, {
+        get when() {
+          return props.actions;
+        },
+        get children() {
+          var _el$21 = _$getNextElement(_tmpl$0);
+          _$insert(_el$21, () => props.actions);
+          return _el$21;
+        }
+      }), _el$25, _co$3);
+      return _el$20;
+    }
+  }), _el$27, _co$4);
+  _$insert(_el$19, () => props.children, _el$29, _co$5);
+  _$runHydrationEvents();
+  return _el$19;
+})();
+const AppWorkspaceSidebarItemIcon = props => ({
+  kind: SIDEBAR_ITEM_ICON,
+  ...props
+});
+const AppWorkspaceSidebarItemLabel = props => ({
+  kind: SIDEBAR_ITEM_LABEL,
+  ...props
+});
+const AppWorkspaceSidebarItemMeta = props => ({
+  kind: SIDEBAR_ITEM_META,
+  ...props
+});
+const AppWorkspaceSidebarItemAction = props => ({
+  kind: SIDEBAR_ITEM_ACTION,
+  ...props
+});
+const AppWorkspaceSidebarItemActions = props => (() => {
+  var _el$31 = _$getNextElement(_tmpl$12);
+  _$insert(_el$31, () => props.children);
+  _$effect(() => _$setAttribute(_el$31, "data-visibility", props.visibility === "hover" ? "hover" : undefined));
+  return _el$31;
+})();
+/** Shared visual and semantic row frame for flat sidebar items and tree items. */
+function AppWorkspaceSidebarRow(props) {
+  const className = () => `k2b-app-workspace__sidebar-item ${props.hasActions ? "has-action" : ""} ${props.active ? props.activeClass ?? "is-active" : ""} ${props.class ?? ""}`;
+  const data = () => Object.fromEntries(Object.entries(props.data ?? {}).filter(([, value]) => value !== undefined && value !== null).map(([key, value]) => [`data-${key}`, String(value)]));
+  const common = () => ({
+    class: className(),
+    title: props.title,
+    "data-tone": props.tone,
+    "data-mode": props.mode,
+    style: {
+      "view-transition-name": props.viewTransitionName,
+      "--k2b-sidebar-item-depth": props.depth === undefined ? undefined : String(Math.max(0, props.depth))
+    },
+    ...data()
+  });
+  const current = () => props.active ? "page" : undefined;
+  if (props.hasActions) {
+    if (!props.href || props.disabled) {
+      return (() => {
+        var _el$32 = _$getNextElement(_tmpl$13),
+          _el$33 = _el$32.firstChild,
+          _el$34 = _el$33.nextSibling,
+          [_el$35, _co$6] = _$getNextMarker(_el$34.nextSibling);
+        _$spread(_el$32, _$mergeProps(common, {
+          get ["data-disabled"]() {
+            return props.disabled ? "true" : undefined;
+          }
+        }), false, true);
+        _$addEventListener(_el$33, "click", props.onClick, true);
+        _$insert(_el$33, () => props.children);
+        _$insert(_el$32, () => props.actions, _el$35, _co$6);
+        _$effect(_p$ => {
+          var _v$41 = props.tabIndex,
+            _v$42 = props.disabled;
+          _v$41 !== _p$.e && _$setAttribute(_el$33, "tabindex", _p$.e = _v$41);
+          _v$42 !== _p$.t && _$setProperty(_el$33, "disabled", _p$.t = _v$42);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        _$runHydrationEvents();
+        return _el$32;
+      })();
+    }
+    if (props.navigation !== "enhanced" || !props.onNavigate) {
+      return (() => {
+        var _el$36 = _$getNextElement(_tmpl$14),
+          _el$37 = _el$36.firstChild,
+          _el$38 = _el$37.nextSibling,
+          [_el$39, _co$7] = _$getNextMarker(_el$38.nextSibling);
+        _$spread(_el$36, _$mergeProps(common), false, true);
+        _$addEventListener(_el$37, "click", props.onClick, true);
+        _$insert(_el$37, () => props.children);
+        _$insert(_el$36, () => props.actions, _el$39, _co$7);
+        _$effect(_p$ => {
+          var _v$43 = props.href,
+            _v$44 = props.tabIndex,
+            _v$45 = current();
+          _v$43 !== _p$.e && _$setAttribute(_el$37, "href", _p$.e = _v$43);
+          _v$44 !== _p$.t && _$setAttribute(_el$37, "tabindex", _p$.t = _v$44);
+          _v$45 !== _p$.a && _$setAttribute(_el$37, "aria-current", _p$.a = _v$45);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        _$runHydrationEvents();
+        return _el$36;
+      })();
+    }
+    return (() => {
+      var _el$40 = _$getNextElement(_tmpl$15),
+        _el$41 = _el$40.firstChild,
+        [_el$42, _co$8] = _$getNextMarker(_el$41.nextSibling),
+        _el$43 = _el$42.nextSibling,
+        [_el$44, _co$9] = _$getNextMarker(_el$43.nextSibling);
+      _$spread(_el$40, _$mergeProps(common), false, true);
+      _$insert(_el$40, _$createComponent(Link, {
+        get href() {
+          return props.href;
+        },
+        "class": "k2b-app-workspace__sidebar-item-main",
+        get tabIndex() {
+          return props.tabIndex;
+        },
+        get ["aria-current"]() {
+          return current();
+        },
+        get replace() {
+          return props.replace;
+        },
+        get scroll() {
+          return props.scroll;
+        },
+        get onNavigate() {
+          return props.onNavigate;
+        },
+        get onClick() {
+          return props.onClick;
+        },
+        get children() {
+          return props.children;
+        }
+      }), _el$42, _co$8);
+      _$insert(_el$40, () => props.actions, _el$44, _co$9);
+      _$runHydrationEvents();
+      return _el$40;
+    })();
+  }
+  if (!props.href || props.disabled) {
+    return (() => {
+      var _el$45 = _$getNextElement(_tmpl$16);
+      _$spread(_el$45, _$mergeProps(common, {
+        get tabIndex() {
+          return props.tabIndex;
+        },
+        get disabled() {
+          return props.disabled;
+        },
+        get onClick() {
+          return props.onClick;
+        }
+      }), false, true);
+      _$insert(_el$45, () => props.children);
+      _$runHydrationEvents();
+      return _el$45;
+    })();
+  }
+  if (props.navigation !== "enhanced" || !props.onNavigate) {
+    return (() => {
+      var _el$46 = _$getNextElement(_tmpl$17);
+      _$spread(_el$46, _$mergeProps({
+        get href() {
+          return props.href;
+        }
+      }, common, {
+        get tabIndex() {
+          return props.tabIndex;
+        },
+        get ["aria-current"]() {
+          return current();
+        },
+        get onClick() {
+          return props.onClick;
+        }
+      }), false, true);
+      _$insert(_el$46, () => props.children);
+      _$runHydrationEvents();
+      return _el$46;
+    })();
+  }
+  return _$createComponent(Link, _$mergeProps({
+    get href() {
+      return props.href;
+    }
+  }, common, {
+    get tabIndex() {
+      return props.tabIndex;
+    },
+    get ["aria-current"]() {
+      return current();
+    },
+    get replace() {
+      return props.replace;
+    },
+    get scroll() {
+      return props.scroll;
+    },
+    get onNavigate() {
+      return props.onNavigate;
+    },
+    get onClick() {
+      return props.onClick;
+    },
+    get children() {
+      return props.children;
+    }
+  }));
+}
+function AppWorkspaceSidebarItem(props) {
+  const messages = useUiMessages();
+  const mode = useContext(SidebarModeContext);
+  const resolved = children(() => props.children);
+  const resolvedActions = children(() => props.actions);
+  const values = createMemo(() => flatten(resolved()));
+  const slots = createMemo(() => values().filter(sidebarItemSlot));
+  const iconSlot = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_ITEM_ICON));
+  const labelSlot = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_ITEM_LABEL));
+  const metaSlot = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_ITEM_META));
+  const actionSlot = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_ITEM_ACTION));
+  const legacy = createMemo(() => values().filter(value => !sidebarItemSlot(value)));
+  const label = () => labelSlot()?.children ?? (legacy().length === 1 ? legacy()[0] : legacy());
+  const icon = () => iconSlot()?.icon ?? props.icon;
+  const iconContent = () => iconSlot()?.children;
+  const meta = () => metaSlot()?.children ?? props.meta;
+  const metaVisibility = () => metaSlot()?.visibility ?? props.metaVisibility;
+  const customActions = () => resolvedActions();
+  const hasCustomActions = () => Boolean(customActions());
+  const hasAction = () => Boolean(actionSlot() || props.actionIcon || hasCustomActions());
+  const mainContent = [_$createComponent(Show, {
+    get when() {
+      return iconContent() || icon();
+    },
+    get children() {
+      var _el$47 = _$getNextElement(_tmpl$18);
+      _$insert(_el$47, () => iconContent() ?? (() => {
+        var _el$50 = _$getNextElement(_tmpl$20);
+        _$effect(() => _$className(_el$50, iconClass(icon())));
+        return _el$50;
+      })());
+      return _el$47;
+    }
+  }), (() => {
+    var _el$48 = _$getNextElement(_tmpl$19),
+      _el$49 = _el$48.firstChild;
+    _$insert(_el$49, () => label());
+    _$effect(() => _$setAttribute(_el$48, "data-marquee", labelSlot()?.marquee === false ? undefined : "true"));
+    return _el$48;
+  })(), _$createComponent(Show, {
+    get when() {
+      return meta();
+    },
+    children: value => (() => {
+      var _el$51 = _$getNextElement(_tmpl$21);
+      _$insert(_el$51, value);
+      _$effect(() => _$setAttribute(_el$51, "data-visibility", metaVisibility() === "hover" ? "hover" : undefined));
+      return _el$51;
+    })()
+  })];
+  const singleAction = () => {
+    const slot = actionSlot();
+    if (!slot && !props.actionIcon) return null;
+    const content = slot?.children ?? (() => {
+      var _el$52 = _$getNextElement(_tmpl$20);
+      _$effect(() => _$className(_el$52, iconClass(slot?.icon ?? props.actionIcon, "ti-dots")));
+      return _el$52;
+    })();
+    const label = slot?.label ?? props.actionLabel ?? messages().rowAction;
+    const select = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      slot?.onSelect?.(event);
+      props.onActionClick?.(event);
+    };
+    // A row action that is a link must still navigate — only the row's own
+    // click handling is suppressed.
+    const follow = event => {
+      event.stopPropagation();
+      slot?.onSelect?.(event);
+      props.onActionClick?.(event);
+    };
+    return slot?.href ? (() => {
+      var _el$53 = _$getNextElement(_tmpl$22);
+      _el$53.$$click = follow;
+      _$setAttribute(_el$53, "aria-label", label);
+      _$insert(_el$53, content);
+      _$effect(_p$ => {
+        var _v$46 = slot.href,
+          _v$47 = slot.visibility === "hover" ? "hover" : undefined;
+        _v$46 !== _p$.e && _$setAttribute(_el$53, "href", _p$.e = _v$46);
+        _v$47 !== _p$.t && _$setAttribute(_el$53, "data-visibility", _p$.t = _v$47);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      _$runHydrationEvents();
+      return _el$53;
+    })() : (() => {
+      var _el$54 = _$getNextElement(_tmpl$23);
+      _el$54.$$click = select;
+      _$setAttribute(_el$54, "aria-label", label);
+      _$insert(_el$54, content);
+      _$effect(() => _$setAttribute(_el$54, "data-visibility", slot?.visibility === "hover" ? "hover" : undefined));
+      _$runHydrationEvents();
+      return _el$54;
+    })();
+  };
+  const actions = () => [_$memo(customActions), _$memo(singleAction)];
+  return _$createComponent(AppWorkspaceSidebarRow, {
+    mode: mode,
+    get hasActions() {
+      return hasAction();
+    },
+    get href() {
+      return props.href;
+    },
+    get navigation() {
+      return props.navigation;
+    },
+    get replace() {
+      return props.replace;
+    },
+    get scroll() {
+      return props.scroll;
+    },
+    get onNavigate() {
+      return props.onNavigate;
+    },
+    get onClick() {
+      return props.onClick;
+    },
+    get active() {
+      return props.active;
+    },
+    get activeClass() {
+      return props.activeClass;
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    get tone() {
+      return props.tone;
+    },
+    get title() {
+      return props.title;
+    },
+    get viewTransitionName() {
+      return props.viewTransitionName;
+    },
+    get ["class"]() {
+      return props.class;
+    },
+    get depth() {
+      return props.depth;
+    },
+    get actions() {
+      return actions();
+    },
+    get data() {
+      return {
+        ...props.data,
+        ...modeData(props.sidebarMode),
+        "has-actions": hasCustomActions() ? "true" : undefined,
+        "action-visibility": actionSlot()?.visibility === "hover" ? "hover" : undefined
+      };
+    },
+    children: mainContent
+  });
+}
+const navTreeItems = value => flatten(value).filter(navTreeItemSlot);
+const AppWorkspaceNavTreeItem = props => ({
+  kind: NAV_TREE_ITEM,
+  ...props
+});
+const AppWorkspaceNavTree = props => {
+  const mode = useContext(SidebarModeContext);
+  let root;
+  const resolved = children(() => props.children);
+  const roots = createMemo(() => navTreeItems(resolved()));
+  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = createSignal([...new Set(props.defaultExpandedIds ?? [])]);
+  const [focusedId, setFocusedId] = createSignal(props.selectedId ?? null);
+  const expandedIds = createMemo(() => new Set(props.expandedIds ?? uncontrolledExpandedIds()));
+  const isExpanded = id => expandedIds().has(id);
+  const setExpanded = (id, expanded) => {
+    const next = new Set(expandedIds());
+    if (expanded) next.add(id);else next.delete(id);
+    const value = [...next];
+    if (props.expandedIds === undefined) setUncontrolledExpandedIds(value);
+    props.onExpandedIdsChange?.(value);
+  };
+  const visibleIds = createMemo(() => {
+    const result = [];
+    const visit = items => {
+      for (const item of items) {
+        if (item.disabled) continue;
+        result.push(item.id);
+        const nested = navTreeItems(item.children);
+        if (nested.length > 0 && isExpanded(item.id)) visit(nested);
+      }
+    };
+    visit(roots());
+    return result;
+  });
+  const tabStopId = () => {
+    const visible = visibleIds();
+    const focused = focusedId();
+    if (focused && visible.includes(focused)) return focused;
+    if (props.selectedId && visible.includes(props.selectedId)) return props.selectedId;
+    return visible[0] ?? null;
+  };
+  const treeItemElements = () => Array.from(root?.querySelectorAll("[data-k2b-nav-tree-id]") ?? []).filter(element => element.getAttribute("aria-disabled") !== "true");
+  const focusItem = id => {
+    if (!id) return;
+    const element = treeItemElements().find(candidate => candidate.dataset.k2bNavTreeId === id);
+    element?.focus({
+      preventScroll: true
+    });
+  };
+  const renderItems = (value, depth, parentId) => _$createComponent(For, {
+    get each() {
+      return navTreeItems(value);
+    },
+    children: item => {
+      const nested = createMemo(() => navTreeItems(item.children));
+      const hasChildren = () => nested().length > 0;
+      const selected = () => props.selectedId === item.id;
+      let treeItem;
+      const activate = event => {
+        if (item.disabled) return;
+        treeItem?.focus({
+          preventScroll: true
+        });
+        setFocusedId(item.id);
+        if (hasChildren() && !item.href && !item.onSelect && !props.onSelectedIdChange) {
+          setExpanded(item.id, !isExpanded(item.id));
+          return;
+        }
+        props.onSelectedIdChange?.(item.id);
+        item.onSelect?.(event);
+      };
+      const toggle = event => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!item.disabled && hasChildren()) setExpanded(item.id, !isExpanded(item.id));
+      };
+      const onRowClick = event => {
+        if (event.target?.closest("[data-k2b-nav-tree-toggle]")) {
+          toggle(event);
+          return;
+        }
+        activate(event);
+      };
+      const rowControl = () => {
+        const firstChild = treeItem?.firstElementChild;
+        if (!firstChild?.classList.contains("has-action")) return firstChild;
+        return firstChild.firstElementChild;
+      };
+      const onKeyDown = event => {
+        if (event.target !== event.currentTarget) return;
+        if (event.altKey || event.ctrlKey || event.metaKey) return;
+        const items = treeItemElements();
+        const index = items.indexOf(event.currentTarget);
+        if (event.key === "ArrowDown" && index >= 0) {
+          event.preventDefault();
+          items[Math.min(items.length - 1, index + 1)]?.focus({
+            preventScroll: true
+          });
+          return;
+        }
+        if (event.key === "ArrowUp" && index >= 0) {
+          event.preventDefault();
+          items[Math.max(0, index - 1)]?.focus({
+            preventScroll: true
+          });
+          return;
+        }
+        if (event.key === "Home") {
+          event.preventDefault();
+          items[0]?.focus({
+            preventScroll: true
+          });
+          return;
+        }
+        if (event.key === "End") {
+          event.preventDefault();
+          items.at(-1)?.focus({
+            preventScroll: true
+          });
+          return;
+        }
+        if (event.key === "ArrowRight" && hasChildren()) {
+          event.preventDefault();
+          if (!isExpanded(item.id)) setExpanded(item.id, true);else queueMicrotask(() => focusItem(nested()[0]?.id ?? null));
+          return;
+        }
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          if (hasChildren() && isExpanded(item.id)) setExpanded(item.id, false);else focusItem(parentId ?? null);
+          return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          rowControl()?.click();
+        }
+      };
+      const usesIconDisclosure = () => hasChildren() && Boolean(item.icon && item.expandedIcon);
+      const rowIcon = () => usesIconDisclosure() && isExpanded(item.id) ? item.expandedIcon : item.icon;
+      const rowContent = [_$createComponent(Show, {
+        get when() {
+          return rowIcon();
+        },
+        get children() {
+          var _el$55 = _$getNextElement(_tmpl$24),
+            _el$56 = _el$55.firstChild;
+          _$effect(_p$ => {
+            var _v$48 = usesIconDisclosure() ? "" : undefined,
+              _v$49 = iconClass(rowIcon());
+            _v$48 !== _p$.e && _$setAttribute(_el$55, "data-k2b-nav-tree-toggle", _p$.e = _v$48);
+            _v$49 !== _p$.t && _$className(_el$56, _p$.t = _v$49);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$55;
+        }
+      }), (() => {
+        var _el$57 = _$getNextElement(_tmpl$19),
+          _el$58 = _el$57.firstChild;
+        _$insert(_el$58, () => item.label);
+        return _el$57;
+      })(), _$createComponent(Show, {
+        get when() {
+          return item.meta !== undefined;
+        },
+        get children() {
+          var _el$59 = _$getNextElement(_tmpl$25);
+          _$insert(_el$59, () => item.meta);
+          _$effect(_p$ => {
+            var _v$50 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
+              _v$51 = item.metaVisibility === "hover" ? "hover" : undefined;
+            _v$50 !== _p$.e && _$className(_el$59, _p$.e = _v$50);
+            _v$51 !== _p$.t && _$setAttribute(_el$59, "data-visibility", _p$.t = _v$51);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$59;
+        }
+      }), _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!hasChildren())() && !usesIconDisclosure();
+        },
+        get children() {
+          var _el$60 = _$getNextElement(_tmpl$26),
+            _el$61 = _el$60.firstChild;
+          _$effect(() => _$className(_el$61, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
+          return _el$60;
+        }
+      })];
+      const row = () => _$createComponent(AppWorkspaceSidebarRow, {
+        mode: mode,
+        get hasActions() {
+          return Boolean(item.actions);
+        },
+        get href() {
+          return item.href;
+        },
+        get navigation() {
+          return item.navigation;
+        },
+        get replace() {
+          return item.replace;
+        },
+        get scroll() {
+          return item.scroll;
+        },
+        get onNavigate() {
+          return item.onNavigate;
+        },
+        onClick: onRowClick,
+        get active() {
+          return selected();
+        },
+        get disabled() {
+          return item.disabled;
+        },
+        get tone() {
+          return item.tone;
+        },
+        get title() {
+          return item.title;
+        },
+        get viewTransitionName() {
+          return item.viewTransitionName;
+        },
+        get ["class"]() {
+          return `k2b-app-workspace__nav-tree-row ${item.class ?? ""}`;
+        },
+        get depth() {
+          return props.indented === false ? 0 : depth;
+        },
+        tabIndex: -1,
+        get actions() {
+          return item.actions;
+        },
+        get data() {
+          return {
+            "has-actions": item.actions ? "true" : undefined
+          };
+        },
+        children: rowContent
+      });
+      return (() => {
+        var _el$62 = _$getNextElement(_tmpl$28),
+          _el$64 = _el$62.firstChild,
+          [_el$65, _co$0] = _$getNextMarker(_el$64.nextSibling),
+          _el$66 = _el$65.nextSibling,
+          [_el$67, _co$1] = _$getNextMarker(_el$66.nextSibling);
+        _$addEventListener(_el$62, "drop", item.onDrop);
+        _$addEventListener(_el$62, "dragleave", item.onDragLeave);
+        _$addEventListener(_el$62, "dragover", item.onDragOver);
+        _$addEventListener(_el$62, "dragenter", item.onDragEnter);
+        _el$62.$$keydown = onKeyDown;
+        _el$62.addEventListener("focus", () => setFocusedId(item.id));
+        var _ref$ = treeItem;
+        typeof _ref$ === "function" ? _$use(_ref$, _el$62) : treeItem = _el$62;
+        _$setAttribute(_el$62, "aria-level", depth + 1);
+        _$setAttribute(_el$62, "data-k2b-nav-tree-parent-id", parentId);
+        _$insert(_el$62, row, _el$65, _co$0);
+        _$insert(_el$62, _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!hasChildren())() && isExpanded(item.id);
+          },
+          get children() {
+            var _el$63 = _$getNextElement(_tmpl$27);
+            _$insert(_el$63, () => renderItems(nested(), depth + 1, item.id));
+            return _el$63;
+          }
+        }), _el$67, _co$1);
+        _$effect(_p$ => {
+          var _v$52 = selected(),
+            _v$53 = hasChildren() ? isExpanded(item.id) : undefined,
+            _v$54 = item.disabled ? "true" : undefined,
+            _v$55 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
+            _v$56 = item.id;
+          _v$52 !== _p$.e && _$setAttribute(_el$62, "aria-selected", _p$.e = _v$52);
+          _v$53 !== _p$.t && _$setAttribute(_el$62, "aria-expanded", _p$.t = _v$53);
+          _v$54 !== _p$.a && _$setAttribute(_el$62, "aria-disabled", _p$.a = _v$54);
+          _v$55 !== _p$.o && _$setAttribute(_el$62, "tabindex", _p$.o = _v$55);
+          _v$56 !== _p$.i && _$setAttribute(_el$62, "data-k2b-nav-tree-id", _p$.i = _v$56);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined
+        });
+        _$runHydrationEvents();
+        return _el$62;
+      })();
+    }
+  });
+  return (() => {
+    var _el$68 = _$getNextElement(_tmpl$29);
+    var _ref$2 = root;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$68) : root = _el$68;
+    _$insert(_el$68, () => renderItems(roots(), 0));
+    _$effect(_p$ => {
+      var _v$57 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
+        _v$58 = props.ariaLabel;
+      _v$57 !== _p$.e && _$className(_el$68, _p$.e = _v$57);
+      _v$58 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$58);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$68;
+  })();
+};
+AppWorkspaceNavTree.Item = AppWorkspaceNavTreeItem;
+const AppWorkspaceSidebarIconGrid = props => (() => {
+  var _el$69 = _$getNextElement(_tmpl$30),
+    _el$71 = _el$69.firstChild,
+    [_el$72, _co$10] = _$getNextMarker(_el$71.nextSibling),
+    _el$70 = _el$72.nextSibling;
+  _$spread(_el$69, _$mergeProps({
+    get ["class"]() {
+      return `k2b-app-workspace__sidebar-icon-grid-wrap ${props.class ?? ""}`;
+    }
+  }, () => modeAttrs(props.sidebarMode)), false, true);
+  _$insert(_el$69, _$createComponent(Show, {
+    get when() {
+      return props.title;
+    },
+    children: title => (() => {
+      var _el$73 = _$getNextElement(_tmpl$11);
+      _$insert(_el$73, title);
+      return _el$73;
+    })()
+  }), _el$72, _co$10);
+  _$insert(_el$70, () => props.children);
+  _$effect(() => _$setAttribute(_el$70, "data-columns", props.columns ?? 2));
+  _$runHydrationEvents();
+  return _el$69;
+})();
+const AppWorkspaceSidebarIconAction = props => {
+  const content = (() => {
+    var _el$74 = _$getNextElement(_tmpl$31);
+    _$effect(() => _$className(_el$74, iconClass(props.icon)));
+    return _el$74;
+  })();
+  const attrs = () => ({
+    class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
+    title: props.label,
+    "aria-label": props.label,
+    "data-tone": props.tone,
+    style: {
+      "view-transition-name": props.viewTransitionName
+    },
+    ...modeAttrs(props.sidebarMode)
+  });
+  if (!props.href || props.disabled) return (() => {
+    var _el$75 = _$getNextElement(_tmpl$16);
+    _$spread(_el$75, _$mergeProps(attrs, {
+      get disabled() {
+        return props.disabled;
+      },
+      get onClick() {
+        return props.onClick;
+      }
+    }), false, true);
+    _$insert(_el$75, content);
+    _$runHydrationEvents();
+    return _el$75;
+  })();
+  if (props.navigation !== "enhanced" || !props.onNavigate) return (() => {
+    var _el$76 = _$getNextElement(_tmpl$17);
+    _$spread(_el$76, _$mergeProps({
+      get href() {
+        return props.href;
+      }
+    }, attrs, {
+      get onClick() {
+        return props.onClick;
+      }
+    }), false, true);
+    _$insert(_el$76, content);
+    _$runHydrationEvents();
+    return _el$76;
+  })();
+  return _$createComponent(Link, _$mergeProps({
+    get href() {
+      return props.href;
+    }
+  }, attrs, {
+    get replace() {
+      return props.replace;
+    },
+    get scroll() {
+      return props.scroll;
+    },
+    get onNavigate() {
+      return props.onNavigate;
+    },
+    get onClick() {
+      return props.onClick;
+    },
+    children: content
+  }));
+};
+const AppWorkspace = props => {
+  let root;
+  const serverLayoutState = useContext(LayoutStateContext);
+  const initialLayoutState = () => props.layoutState?.() ?? serverLayoutState;
+
+  // The resize handles are inert markup until the controller is attached, so
+  // the workspace attaches it itself and scopes it to this root. `onMount`
+  // never runs during SSR, and the disposer removes every listener. A host
+  // shell may own one document-level controller for SSR and hydrated roots;
+  // its marker keeps controller ownership singular without app-level props.
+  onMount(() => {
+    if (props.controller === false || !root || root.closest("[data-k2b-app-workspace-controller]")) return;
+    onCleanup(installAppWorkspaceController({
+      root,
+      readState: () => props.layoutState ? props.layoutState() : serverLayoutState,
+      writeState: state => props.onLayoutChange?.(state)
+    }));
+  });
+  return _$createComponent(ResizeContext.Provider, {
+    get value() {
+      return props.resizable !== false;
+    },
+    get children() {
+      var _el$77 = _$getNextElement(_tmpl$32);
+      var _ref$3 = root;
+      typeof _ref$3 === "function" ? _$use(_ref$3, _el$77) : root = _el$77;
+      _$insert(_el$77, () => props.children);
+      _$effect(_p$ => {
+        var _v$59 = `k2b-app-workspace ${props.class ?? ""}`,
+          _v$60 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
+          _v$61 = props.resizable === false ? "false" : "true",
+          _v$62 = appWorkspaceLayoutStyle(initialLayoutState());
+        _v$59 !== _p$.e && _$className(_el$77, _p$.e = _v$59);
+        _v$60 !== _p$.t && _$setAttribute(_el$77, "data-sidebar-collapsed", _p$.t = _v$60);
+        _v$61 !== _p$.a && _$setAttribute(_el$77, "data-workspace-resizable", _p$.a = _v$61);
+        _p$.o = _$style(_el$77, _v$62, _p$.o);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined
+      });
+      return _el$77;
+    }
+  });
+};
+AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext.Provider, {
+  get value() {
+    return props.state ?? null;
+  },
+  get children() {
+    return props.children;
+  }
+});
+AppWorkspace.Content = props => (() => {
+  var _el$78 = _$getNextElement(_tmpl$2);
+  _$insert(_el$78, () => props.children);
+  _$effect(() => _$className(_el$78, `k2b-app-workspace__content ${props.class ?? ""}`));
+  return _el$78;
+})();
+AppWorkspace.Main = AppWorkspaceMain;
+AppWorkspace.MainPane = AppWorkspaceMainPane;
+AppWorkspace.Detail = AppWorkspaceDetail;
+AppWorkspace.BottomDrawer = AppWorkspaceBottomDrawer;
+AppWorkspace.Sidebar = AppWorkspaceSidebar;
+AppWorkspace.SidebarMobileTrigger = AppWorkspaceSidebarMobileTrigger;
+AppWorkspace.SidebarMobile = AppWorkspaceSidebarMobile;
+AppWorkspace.SidebarMobileItems = AppWorkspaceSidebarMobileItems;
+AppWorkspace.SidebarMobileBody = AppWorkspaceSidebarMobileBody;
+AppWorkspace.SidebarDesktop = AppWorkspaceSidebarDesktop;
+AppWorkspace.SidebarSection = AppWorkspaceSidebarSection;
+AppWorkspace.SidebarBody = AppWorkspaceSidebarBody;
+AppWorkspace.SidebarFooter = AppWorkspaceSidebarFooter;
+AppWorkspace.SidebarItem = AppWorkspaceSidebarItem;
+AppWorkspace.SidebarItemIcon = AppWorkspaceSidebarItemIcon;
+AppWorkspace.SidebarItemLabel = AppWorkspaceSidebarItemLabel;
+AppWorkspace.SidebarItemMeta = AppWorkspaceSidebarItemMeta;
+AppWorkspace.SidebarItemAction = AppWorkspaceSidebarItemAction;
+AppWorkspace.SidebarItemActions = AppWorkspaceSidebarItemActions;
+AppWorkspace.NavTree = AppWorkspaceNavTree;
+AppWorkspace.SidebarIconGrid = AppWorkspaceSidebarIconGrid;
+AppWorkspace.SidebarIconAction = AppWorkspaceSidebarIconAction;
+export default AppWorkspace;
+_$delegateEvents(["click", "keydown"]);
+//# sourceMappingURL=AppWorkspace.js.map