@k2b/ui 0.1.0-rc.0

package/dist/ssr/layout/AppWorkspace.js

@@ -0,0 +1,976 @@
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { ssrElement as _$ssrElement } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrStyle as _$ssrStyle } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=\"separator\"", " style=\"", "\"><span aria-hidden=\"true\"></span></button>"],
+  _tmpl$2 = ["<div class=\"k2b-app-workspace__main-primary\" data-workspace-main-region=\"main\"", ">", "</div>"],
+  _tmpl$3 = ["<section", " class=\"", "\"", " style=\"", "\">", "</section>"],
+  _tmpl$4 = ["<aside", " class=\"", "\"", "", " style=\"", "\">", "</aside>"],
+  _tmpl$5 = ["<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>", "</details></nav>"],
+  _tmpl$6 = ["<aside", " class=\"", "\"", "><div class=\"k2b-app-workspace__sidebar-desktop\">", "</div></aside>"],
+  _tmpl$7 = ["<div class=\"k2b-app-workspace__sidebar-section-actions\">", "</div>"],
+  _tmpl$8 = ["<header class=\"k2b-app-workspace__sidebar-section-header\">", "", "</header>"],
+  _tmpl$9 = ["<h2>", "</h2>"],
+  _tmpl$0 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
+  _tmpl$1 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-main\"", "", ">", "</button>"],
+  _tmpl$10 = ["<a", " class=\"k2b-app-workspace__sidebar-item-main\"", ">", "</a>"],
+  _tmpl$11 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$12 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
+  _tmpl$13 = ["<i", "></i>"],
+  _tmpl$14 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
+  _tmpl$15 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
+  _tmpl$16 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
+  _tmpl$17 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\"", " aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$18 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
+  _tmpl$19 = ["<span class=\"", "\"", ">", "</span>"],
+  _tmpl$20 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
+  _tmpl$21 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
+  _tmpl$22 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", ">", "", "</div>"],
+  _tmpl$23 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
+  _tmpl$24 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
+  _tmpl$25 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$26 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
+  _tmpl$27 = ["<div class=\"", "\">", "</div>"];
+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 _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(props.label ?? (props.kind === "sidebar" ? "Resize navigation" : props.kind === "pane" ? "Resize workspace pane" : props.kind === "detail" ? "Resize detail panel" : "Resize bottom drawer"), true), false) + _$ssrAttribute("aria-controls", _$escape(props.controls, true), false) + _$ssrAttribute("aria-orientation", props.kind === "drawer" ? "horizontal" : "vertical", false) + _$ssrAttribute("aria-valuemin", _$escape(props.minSize, true), false) + _$ssrAttribute("aria-valuemax", _$escape(props.maxSize, true), false) + _$ssrAttribute("aria-valuenow", _$escape(props.defaultSize, true), false) + _$ssrAttribute("data-app-workspace-resize", _$escape(props.kind, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(props.panelId, true), false) + _$ssrAttribute("data-workspace-resize-edge", _$escape(props.edge, true), false) + _$ssrAttribute("data-workspace-resize-shadow", props.shadow ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-default-size", _$escape(props.defaultSize, true), false) + _$ssrAttribute("data-workspace-min-size", _$escape(props.minSize, true), false) + _$ssrAttribute("data-workspace-max-size", _$escape(props.maxSize, true), false), _$ssrStyle(props.style));
+}
+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 _$ssrElement("div", _$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)), _$escape(_$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 _$ssr(_tmpl$2, _$ssrAttribute("data-workspace-mobile-active", activeMobilePane === "main" ? "true" : "false", false), _$escape(region.children));
+        }
+        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 = _$ssr(_tmpl$3, _$ssrAttribute("id", _$escape(pane.domId, true), false), `k2b-app-workspace__main-pane ${isAnchor ? "is-primary" : ""} ${_$escape(pane.props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(pane.props.label, true), false) + _$ssrAttribute("data-workspace-main-region", _$escape(pane.props.id, true), false) + _$ssrAttribute("data-workspace-mobile-active", activeMobilePane === pane.props.id ? "true" : "false", false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId, true), false) + _$ssrAttribute("data-workspace-resizable", resizable ? "true" : "false", false) + _$ssrAttribute("data-surface", pane.props.surface === "navigation" ? "navigation" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll", pane.props.scroll === false ? "false" : _$escape(undefined, true), false), _$ssrStyle(isAnchor ? undefined : {
+          "--k2b-workspace-panel-size": `var(${variable}, ${defaultSize}px)`
+        }), _$escape(pane.props.children));
+        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];
+      });
+    }
+  })), false);
+}
+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)`
+          };
+        }
+      });
+    }
+  }), _$ssr(_tmpl$4, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__detail ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-width", _$escape(props.width ?? "md", true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false), _$ssrAttribute("hidden", !props.open, true), _$ssrStyleProperty("--k2b-workspace-panel-size:", `var(${_$escape(variable(), true)}, ${_$escape(defaultWidth(), true)}px)`) + _$ssrStyleProperty(";view-transition-name:", _$escape(props.viewTransitionName, true)), _$escape(props.children))];
+}
+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)`
+          };
+        }
+      });
+    }
+  }), _$ssr(_tmpl$4, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__drawer ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-height", _$escape(props.height ?? "md", true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false), _$ssrAttribute("hidden", !props.open, true), _$ssrStyleProperty("--k2b-workspace-panel-size:", `var(${_$escape(variable(), true)}, ${_$escape(defaultHeight(), true)}px)`) + _$ssrStyleProperty(";view-transition-name:", _$escape(props.viewTransitionName, true)), _$escape(props.children))];
+}
+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 mobileTrigger() && mobile();
+    },
+    get children() {
+      return _$ssr(_tmpl$5, _$ssrAttribute("aria-label", _$escape(mobileTrigger().label, true), false), _$escape(mobileTrigger().label), _$escape(_$createComponent(SidebarModeContext.Provider, {
+        value: "mobile",
+        get children() {
+          return mobile().children;
+        }
+      })));
+    }
+  }), _$ssr(_tmpl$6, _$ssrAttribute("id", _$escape(domId, true), false), `k2b-app-workspace__sidebar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(mobileTrigger()?.label, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-collapsible", props.collapsible ? "true" : "false", false), _$escape(_$createComponent(SidebarModeContext.Provider, {
+    value: "desktop",
+    get children() {
+      return desktop()?.children;
+    }
+  }))), _$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 => _$ssrElement("div", _$mergeProps({
+  "class": "k2b-app-workspace__sidebar-mobile-items"
+}, () => scrollAttrs(props.scrollPreserveKey)), _$escape(props.children), false);
+const AppWorkspaceSidebarBody = props => _$ssrElement("div", _$mergeProps({
+  get ["class"]() {
+    return `k2b-app-workspace__sidebar-body ${props.class ?? ""}`;
+  }
+}, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), _$escape(props.children), false);
+const AppWorkspaceSidebarMobileBody = props => _$ssrElement("div", _$mergeProps({
+  get ["class"]() {
+    return `k2b-app-workspace__sidebar-mobile-body ${props.class ?? ""}`;
+  }
+}, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), _$escape(props.children), false);
+const AppWorkspaceSidebarFooter = props => _$ssrElement("footer", _$mergeProps({
+  get ["class"]() {
+    return `k2b-app-workspace__sidebar-footer ${props.class ?? ""}`;
+  }
+}, () => modeAttrs(props.sidebarMode)), _$escape(props.children), false);
+const AppWorkspaceSidebarSection = props => _$ssrElement("section", _$mergeProps({
+  get ["class"]() {
+    return `k2b-app-workspace__sidebar-section ${props.class ?? ""}`;
+  }
+}, () => modeAttrs(props.sidebarMode)), [_$escape(_$createComponent(Show, {
+  get when() {
+    return props.title || props.actions;
+  },
+  get children() {
+    return _$ssr(_tmpl$8, _$escape(_$createComponent(Show, {
+      get when() {
+        return props.title;
+      },
+      children: title => _$ssr(_tmpl$9, _$escape(title()))
+    })), _$escape(_$createComponent(Show, {
+      get when() {
+        return props.actions;
+      },
+      get children() {
+        return _$ssr(_tmpl$7, _$escape(props.actions));
+      }
+    })));
+  }
+})), _$escape(props.children)], false);
+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 => _$ssr(_tmpl$0, _$ssrAttribute("data-visibility", props.visibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(props.children));
+/** 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 _$ssrElement("div", _$mergeProps(common, {
+        get ["data-disabled"]() {
+          return props.disabled ? "true" : undefined;
+        }
+      }), [_$ssr(_tmpl$1, _$ssrAttribute("tabindex", _$escape(props.tabIndex, true), false), _$ssrAttribute("disabled", props.disabled, true), _$escape(props.children)), _$escape(props.actions)], false);
+    }
+    if (props.navigation !== "enhanced" || !props.onNavigate) {
+      return _$ssrElement("div", common(), [_$ssr(_tmpl$10, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("tabindex", _$escape(props.tabIndex, true), false) + _$ssrAttribute("aria-current", _$escape(current(), true), false), _$escape(props.children)), _$escape(props.actions)], false);
+    }
+    return _$ssrElement("div", common(), [_$escape(_$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;
+      }
+    })), _$escape(props.actions)], false);
+  }
+  if (!props.href || props.disabled) {
+    return _$ssrElement("button", _$mergeProps({
+      type: "button"
+    }, common, {
+      get tabIndex() {
+        return props.tabIndex;
+      },
+      get disabled() {
+        return props.disabled;
+      }
+    }), _$escape(props.children), false);
+  }
+  if (props.navigation !== "enhanced" || !props.onNavigate) {
+    return _$ssrElement("a", _$mergeProps({
+      get href() {
+        return props.href;
+      }
+    }, common, {
+      get tabIndex() {
+        return props.tabIndex;
+      },
+      get ["aria-current"]() {
+        return current();
+      }
+    }), _$escape(props.children), false);
+  }
+  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() {
+      return _$ssr(_tmpl$11, _$escape(iconContent() ?? _$ssr(_tmpl$13, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
+    }
+  }), _$ssr(_tmpl$12, _$ssrAttribute("data-marquee", labelSlot()?.marquee === false ? _$escape(undefined, true) : "true", false), _$escape(label())), _$createComponent(Show, {
+    get when() {
+      return meta();
+    },
+    children: value => _$ssr(_tmpl$14, _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(value()))
+  })];
+  const singleAction = () => {
+    const slot = actionSlot();
+    if (!slot && !props.actionIcon) return null;
+    const content = slot?.children ?? _$ssr(_tmpl$13, _$ssrAttribute("class", _$escape(iconClass(slot?.icon ?? props.actionIcon, "ti-dots"), true), false));
+    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 ? _$ssr(_tmpl$15, _$ssrAttribute("href", _$escape(slot.href, true), false), _$ssrAttribute("data-visibility", slot.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label, true), false), _$escape(content)) : _$ssr(_tmpl$16, _$ssrAttribute("data-visibility", slot?.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label, true), false), _$escape(content));
+  };
+  const actions = () => [customActions(), 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() {
+          return _$ssr(_tmpl$17, _$ssrAttribute("data-k2b-nav-tree-toggle", usesIconDisclosure() ? "" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false));
+        }
+      }), _$ssr(_tmpl$18, _$escape(item.label)), _$createComponent(Show, {
+        get when() {
+          return item.meta !== undefined;
+        },
+        get children() {
+          return _$ssr(_tmpl$19, `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`, _$ssrAttribute("data-visibility", item.metaVisibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(item.meta));
+        }
+      }), _$createComponent(Show, {
+        get when() {
+          return hasChildren() && !usesIconDisclosure();
+        },
+        get children() {
+          return _$ssr(_tmpl$20, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
+        }
+      })];
+      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 _$ssr(_tmpl$22, _$ssrAttribute("aria-level", _$escape(depth, true) + 1, false) + _$ssrAttribute("aria-selected", _$escape(selected(), true), false) + _$ssrAttribute("aria-expanded", hasChildren() ? _$escape(isExpanded(item.id), true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-disabled", item.disabled ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", item.disabled ? -1 : tabStopId() === item.id ? 0 : -1, false) + _$ssrAttribute("data-k2b-nav-tree-id", _$escape(item.id, true), false) + _$ssrAttribute("data-k2b-nav-tree-parent-id", _$escape(parentId, true), false), _$escape(row()), _$escape(_$createComponent(Show, {
+        get when() {
+          return hasChildren() && isExpanded(item.id);
+        },
+        get children() {
+          return _$ssr(_tmpl$21, _$escape(renderItems(nested(), depth + 1, item.id)));
+        }
+      })));
+    }
+  });
+  return _$ssr(_tmpl$23, `k2b-app-workspace__nav-tree ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.ariaLabel, true), false), _$escape(renderItems(roots(), 0)));
+};
+AppWorkspaceNavTree.Item = AppWorkspaceNavTreeItem;
+const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProps({
+  get ["class"]() {
+    return `k2b-app-workspace__sidebar-icon-grid-wrap ${props.class ?? ""}`;
+  }
+}, () => modeAttrs(props.sidebarMode)), [_$escape(_$createComponent(Show, {
+  get when() {
+    return props.title;
+  },
+  children: title => _$ssr(_tmpl$9, _$escape(title()))
+})), _$ssr(_tmpl$24, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
+const AppWorkspaceSidebarIconAction = props => {
+  const content = _$ssr(_tmpl$25, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+  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 _$ssrElement("button", _$mergeProps({
+    type: "button"
+  }, attrs, {
+    get disabled() {
+      return props.disabled;
+    }
+  }), _$escape(content), false);
+  if (props.navigation !== "enhanced" || !props.onNavigate) return _$ssrElement("a", _$mergeProps({
+    get href() {
+      return props.href;
+    }
+  }, attrs), _$escape(content), false);
+  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() {
+      return _$ssr(_tmpl$26, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(props.children));
+    }
+  });
+};
+AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext.Provider, {
+  get value() {
+    return props.state ?? null;
+  },
+  get children() {
+    return props.children;
+  }
+});
+AppWorkspace.Content = props => _$ssr(_tmpl$27, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+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;
+//# sourceMappingURL=AppWorkspace.js.map