@k2b/ui 0.9.1 → 0.11.0

package/dist/ssr/layout/AppOverview.js

@@ -3,7 +3,7 @@ import { memo as _$memo } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { ssr as _$ssr } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
-var _tmpl$ = ["<p>", "</p>"],
+var _tmpl$ = ["<p class=\"k2b-app-overview__panel-description\">", "</p>"],
   _tmpl$2 = ["<div class=\"k2b-app-overview__toolbar\">", "</div>"],
   _tmpl$3 = ["<div class=\"k2b-app-overview__panel-header\"><div><h2>", "</h2>", "</div>", "</div>"],
   _tmpl$4 = ["<section class=\"", "\">", "", "</section>"],

package/dist/ssr/layout/AppOverview.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/AppOverview.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport Placeholder from \"../surfaces/Placeholder\";\nimport { PanelHeader } from \"./PanelHeader\";\n\nexport type AppOverviewProps = {\n  title: string;\n  subtitle?: string;\n  icon: string;\n  /** The page's single primary action, such as a create button or menu. */\n  actions?: JSX.Element;\n  class?: string;\n  children: JSX.Element;\n};\n\nexport type AppOverviewPanelProps = {\n  title: string;\n  description?: JSX.Element;\n  toolbar?: JSX.Element;\n  class?: string;\n  children: JSX.Element;\n};\n\nexport type AppOverviewEmptyStateProps = {\n  title: string;\n  description?: JSX.Element;\n  icon?: string;\n  class?: string;\n  children?: JSX.Element;\n};\n\nexport type AppOverviewCardsProps = {\n  class?: string;\n  children: JSX.Element;\n};\n\ntype AppOverviewComponent = ((props: AppOverviewProps) => JSX.Element) & {\n  Main: (props: AppOverviewPanelProps) => JSX.Element;\n  Aside: (props: AppOverviewPanelProps) => JSX.Element;\n  Cards: (props: AppOverviewCardsProps) => JSX.Element;\n  EmptyState: (props: AppOverviewEmptyStateProps) => JSX.Element;\n};\n\nconst tablerIconClass = (icon: string | null | undefined, fallback: string): string => {\n  const value = icon?.trim() || fallback;\n  return value.startsWith(\"ti \") ? value : `ti ${value}`;\n};\n\nconst AppOverviewPanelHeader = (props: Pick<AppOverviewPanelProps, \"title\" | \"description\" | \"toolbar\">): JSX.Element => (\n  <div class=\"k2b-app-overview__panel-header\">\n    <div>\n      <h2>{props.title}</h2>\n      <Show when={props.description}>\n        <p>{props.description}</p>\n      </Show>\n    </div>\n    <Show when={props.toolbar}>\n      <div class=\"k2b-app-overview__toolbar\">{props.toolbar}</div>\n    </Show>\n  </div>\n);\n\nconst AppOverviewMain = (props: AppOverviewPanelProps): JSX.Element => (\n  <section class={`k2b-app-overview__main ${props.class ?? \"\"}`}>\n    <AppOverviewPanelHeader title={props.title} description={props.description} toolbar={props.toolbar} />\n    {props.children}\n  </section>\n);\n\nconst AppOverviewAside = (props: AppOverviewPanelProps): JSX.Element => (\n  <aside class={`k2b-app-overview__aside ${props.class ?? \"\"}`}>\n    <AppOverviewPanelHeader title={props.title} description={props.description} toolbar={props.toolbar} />\n    {props.children}\n  </aside>\n);\n\nconst AppOverviewCards = (props: AppOverviewCardsProps): JSX.Element => (\n  <div class={`k2b-app-overview__cards ${props.class ?? \"\"}`}>{props.children}</div>\n);\n\nconst AppOverviewEmptyState = (props: AppOverviewEmptyStateProps): JSX.Element => (\n  <Placeholder\n    surface=\"paper\"\n    variant=\"panel\"\n    title={props.title}\n    description={props.description}\n    icon={props.icon ? tablerIconClass(props.icon, \"ti-inbox\") : undefined}\n    action={props.children}\n    class={props.class}\n  />\n);\n\nconst AppOverview = ((props: AppOverviewProps): JSX.Element => (\n  <div class={`k2b-app-overview ${props.class ?? \"\"}`}>\n    <header class=\"k2b-app-overview__header\">\n      <span class=\"k2b-app-overview__icon\" aria-hidden=\"true\">\n        <i class={tablerIconClass(props.icon, \"ti-apps\")} />\n      </span>\n      <PanelHeader as=\"h1\" size=\"lg\" title={props.title} subtitle={props.subtitle} actions={props.actions} />\n    </header>\n    <div class=\"k2b-app-overview__columns\">{props.children}</div>\n  </div>\n)) as AppOverviewComponent;\n\nAppOverview.Main = AppOverviewMain;\nAppOverview.Aside = AppOverviewAside;\nAppOverview.Cards = AppOverviewCards;\nAppOverview.EmptyState = AppOverviewEmptyState;\n\nexport default AppOverview;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AACzC,OAAO,WAAW,MAAM,yBAAyB;AACjD,SAAS,WAAW,QAAQ,eAAe;AAwC3C,MAAM,eAAe,GAAG,CAAC,IAA+B,EAAE,QAAgB,KAAa;EACrF,MAAM,KAAK,GAAG,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,QAAQ;EACtC,OAAO,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,MAAM,KAAK,EAAE;AACxD,CAAC;AAED,MAAM,sBAAsB,GAAI,KAAuE,4BAG5F,KAAK,CAAC,KAAK,8BACf,IAAI;EAAA,IAAC,IAAI;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA;IAAA,8BACvB,KAAK,CAAC,WAAW;EAAA;AAAA,gCAGxB,IAAI;EAAA,IAAC,IAAI;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;EAAA;IAAA,+BACiB,KAAK,CAAC,OAAO;EAAA;AAAA,IAG1D;AAED,MAAM,eAAe,GAAI,KAA4B,mBACnC,mCAA0B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BAC1D,sBAAsB;EAAA,IAAC,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cACjG,KAAK,CAAC,QAAQ,EAElB;AAED,MAAM,gBAAgB,GAAI,KAA4B,mBACtC,oCAA2B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BACzD,sBAAsB;EAAA,IAAC,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cACjG,KAAK,CAAC,QAAQ,EAElB;AAED,MAAM,gBAAgB,GAAI,KAA4B,mBACxC,oCAA2B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,WAAG,KAAK,CAAC,QAAQ,EAC5E;AAED,MAAM,qBAAqB,GAAI,KAAiC,sBAC7D,WAAW;EACV,OAAO;EACP,OAAO;EAAA,IACP,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAClB,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAC9B,IAAI;IAAA,OAAE,oBAAK,CAAC,IAAI,MAAG,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,SAAS;EAAA;EAAA,IACtE,MAAM;IAAA,OAAE,KAAK,CAAC,QAAQ;EAAA;EAAA;IAAA,OACf,KAAK,CAAC,KAAK;EAAA;AAAA,EAErB;AAED,MAAM,WAAW,GAAK,KAAuB,mBAC/B,6BAAoB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,mCAGnC,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,4CAEjD,WAAW;EAAC,EAAE;EAAM,IAAI;EAAA,IAAM,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,QAAQ;IAAA,OAAE,KAAK,CAAC,QAAQ;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cAE7D,KAAK,CAAC,QAAQ,EAEhC;AAE1B,WAAW,CAAC,IAAI,GAAG,eAAe;AAClC,WAAW,CAAC,KAAK,GAAG,gBAAgB;AACpC,WAAW,CAAC,KAAK,GAAG,gBAAgB;AACpC,WAAW,CAAC,UAAU,GAAG,qBAAqB;AAE9C,eAAe,WAAW","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/AppOverview.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport Placeholder from \"../surfaces/Placeholder\";\nimport { PanelHeader } from \"./PanelHeader\";\n\nexport type AppOverviewProps = {\n  title: string;\n  subtitle?: string;\n  icon: string;\n  /** The page's single primary action, such as a create button or menu. */\n  actions?: JSX.Element;\n  class?: string;\n  children: JSX.Element;\n};\n\nexport type AppOverviewPanelProps = {\n  title: string;\n  description?: JSX.Element;\n  toolbar?: JSX.Element;\n  class?: string;\n  children: JSX.Element;\n};\n\nexport type AppOverviewEmptyStateProps = {\n  title: string;\n  description?: JSX.Element;\n  icon?: string;\n  class?: string;\n  children?: JSX.Element;\n};\n\nexport type AppOverviewCardsProps = {\n  class?: string;\n  children: JSX.Element;\n};\n\ntype AppOverviewComponent = ((props: AppOverviewProps) => JSX.Element) & {\n  Main: (props: AppOverviewPanelProps) => JSX.Element;\n  Aside: (props: AppOverviewPanelProps) => JSX.Element;\n  Cards: (props: AppOverviewCardsProps) => JSX.Element;\n  EmptyState: (props: AppOverviewEmptyStateProps) => JSX.Element;\n};\n\nconst tablerIconClass = (icon: string | null | undefined, fallback: string): string => {\n  const value = icon?.trim() || fallback;\n  return value.startsWith(\"ti \") ? value : `ti ${value}`;\n};\n\nconst AppOverviewPanelHeader = (props: Pick<AppOverviewPanelProps, \"title\" | \"description\" | \"toolbar\">): JSX.Element => (\n  <div class=\"k2b-app-overview__panel-header\">\n    <div>\n      <h2>{props.title}</h2>\n      <Show when={props.description}>\n        <p class=\"k2b-app-overview__panel-description\">{props.description}</p>\n      </Show>\n    </div>\n    <Show when={props.toolbar}>\n      <div class=\"k2b-app-overview__toolbar\">{props.toolbar}</div>\n    </Show>\n  </div>\n);\n\nconst AppOverviewMain = (props: AppOverviewPanelProps): JSX.Element => (\n  <section class={`k2b-app-overview__main ${props.class ?? \"\"}`}>\n    <AppOverviewPanelHeader title={props.title} description={props.description} toolbar={props.toolbar} />\n    {props.children}\n  </section>\n);\n\nconst AppOverviewAside = (props: AppOverviewPanelProps): JSX.Element => (\n  <aside class={`k2b-app-overview__aside ${props.class ?? \"\"}`}>\n    <AppOverviewPanelHeader title={props.title} description={props.description} toolbar={props.toolbar} />\n    {props.children}\n  </aside>\n);\n\nconst AppOverviewCards = (props: AppOverviewCardsProps): JSX.Element => (\n  <div class={`k2b-app-overview__cards ${props.class ?? \"\"}`}>{props.children}</div>\n);\n\nconst AppOverviewEmptyState = (props: AppOverviewEmptyStateProps): JSX.Element => (\n  <Placeholder\n    surface=\"paper\"\n    variant=\"panel\"\n    title={props.title}\n    description={props.description}\n    icon={props.icon ? tablerIconClass(props.icon, \"ti-inbox\") : undefined}\n    action={props.children}\n    class={props.class}\n  />\n);\n\nconst AppOverview = ((props: AppOverviewProps): JSX.Element => (\n  <div class={`k2b-app-overview ${props.class ?? \"\"}`}>\n    <header class=\"k2b-app-overview__header\">\n      <span class=\"k2b-app-overview__icon\" aria-hidden=\"true\">\n        <i class={tablerIconClass(props.icon, \"ti-apps\")} />\n      </span>\n      <PanelHeader as=\"h1\" size=\"lg\" title={props.title} subtitle={props.subtitle} actions={props.actions} />\n    </header>\n    <div class=\"k2b-app-overview__columns\">{props.children}</div>\n  </div>\n)) as AppOverviewComponent;\n\nAppOverview.Main = AppOverviewMain;\nAppOverview.Aside = AppOverviewAside;\nAppOverview.Cards = AppOverviewCards;\nAppOverview.EmptyState = AppOverviewEmptyState;\n\nexport default AppOverview;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AACzC,OAAO,WAAW,MAAM,yBAAyB;AACjD,SAAS,WAAW,QAAQ,eAAe;AAwC3C,MAAM,eAAe,GAAG,CAAC,IAA+B,EAAE,QAAgB,KAAa;EACrF,MAAM,KAAK,GAAG,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,QAAQ;EACtC,OAAO,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,MAAM,KAAK,EAAE;AACxD,CAAC;AAED,MAAM,sBAAsB,GAAI,KAAuE,4BAG5F,KAAK,CAAC,KAAK,8BACf,IAAI;EAAA,IAAC,IAAI;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA;IAAA,8BACqB,KAAK,CAAC,WAAW;EAAA;AAAA,gCAGpE,IAAI;EAAA,IAAC,IAAI;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;EAAA;IAAA,+BACiB,KAAK,CAAC,OAAO;EAAA;AAAA,IAG1D;AAED,MAAM,eAAe,GAAI,KAA4B,mBACnC,mCAA0B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BAC1D,sBAAsB;EAAA,IAAC,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cACjG,KAAK,CAAC,QAAQ,EAElB;AAED,MAAM,gBAAgB,GAAI,KAA4B,mBACtC,oCAA2B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BACzD,sBAAsB;EAAA,IAAC,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cACjG,KAAK,CAAC,QAAQ,EAElB;AAED,MAAM,gBAAgB,GAAI,KAA4B,mBACxC,oCAA2B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,WAAG,KAAK,CAAC,QAAQ,EAC5E;AAED,MAAM,qBAAqB,GAAI,KAAiC,sBAC7D,WAAW;EACV,OAAO;EACP,OAAO;EAAA,IACP,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAClB,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAC9B,IAAI;IAAA,OAAE,oBAAK,CAAC,IAAI,MAAG,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,SAAS;EAAA;EAAA,IACtE,MAAM;IAAA,OAAE,KAAK,CAAC,QAAQ;EAAA;EAAA;IAAA,OACf,KAAK,CAAC,KAAK;EAAA;AAAA,EAErB;AAED,MAAM,WAAW,GAAK,KAAuB,mBAC/B,6BAAoB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,mCAGnC,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,4CAEjD,WAAW;EAAC,EAAE;EAAM,IAAI;EAAA,IAAM,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,QAAQ;IAAA,OAAE,KAAK,CAAC,QAAQ;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cAE7D,KAAK,CAAC,QAAQ,EAEhC;AAE1B,WAAW,CAAC,IAAI,GAAG,eAAe;AAClC,WAAW,CAAC,KAAK,GAAG,gBAAgB;AACpC,WAAW,CAAC,KAAK,GAAG,gBAAgB;AACpC,WAAW,CAAC,UAAU,GAAG,qBAAqB;AAE9C,eAAe,WAAW","ignoreList":[]}

package/dist/ssr/layout/AppWorkspace.js

@@ -11,40 +11,41 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=
   _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 = ["<aside", " class=\"", "\"", "><div class=\"k2b-app-workspace__sidebar-desktop\">", "</div></aside>"],
-  _tmpl$6 = ["<script>", "</script>"],
-  _tmpl$7 = ["<span aria-hidden=\"true\"><i", "></i></span>"],
-  _tmpl$8 = ["<span class=\"k2b-app-workspace__sidebar-section-count\">", "</span>"],
-  _tmpl$9 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-section-toggle\"", ">", "<i", " aria-hidden=\"true\"></i></button>"],
-  _tmpl$0 = ["<div class=\"k2b-app-workspace__sidebar-section-actions\">", "</div>"],
-  _tmpl$1 = ["<header class=\"k2b-app-workspace__sidebar-section-header\">", "", "</header>"],
-  _tmpl$10 = ["<div", "", " class=\"k2b-app-workspace__sidebar-section-content\">", "</div>"],
-  _tmpl$11 = ["<h2>", "</h2>"],
-  _tmpl$12 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
-  _tmpl$13 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$14 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
-  _tmpl$15 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
-  _tmpl$16 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
-  _tmpl$17 = ["<span class=\"k2b-app-workspace__sidebar-item-copy\">", "<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>", "</span>"],
-  _tmpl$18 = ["<i", "></i>"],
-  _tmpl$19 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
-  _tmpl$20 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
-  _tmpl$21 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
-  _tmpl$22 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\"", " aria-hidden=\"true\"><i", "></i></span>"],
-  _tmpl$23 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
-  _tmpl$24 = ["<span class=\"", "\"", ">", "</span>"],
-  _tmpl$25 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
-  _tmpl$26 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
-  _tmpl$27 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", ">", "", "</div>"],
-  _tmpl$28 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
-  _tmpl$29 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
-  _tmpl$30 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$31 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
-  _tmpl$32 = ["<div class=\"", "\">", "</div>"];
+  _tmpl$5 = ["<div class=\"k2b-app-workspace__sidebar-desktop\">", "</div>"],
+  _tmpl$6 = ["<aside", " class=\"", "\"", "", ">", "</aside>"],
+  _tmpl$7 = ["<script>", "</script>"],
+  _tmpl$8 = ["<span aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$9 = ["<span class=\"k2b-app-workspace__sidebar-section-count\">", "</span>"],
+  _tmpl$0 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-section-toggle\"", ">", "<i", " aria-hidden=\"true\"></i></button>"],
+  _tmpl$1 = ["<div class=\"k2b-app-workspace__sidebar-section-actions\">", "</div>"],
+  _tmpl$10 = ["<header class=\"k2b-app-workspace__sidebar-section-header\">", "", "</header>"],
+  _tmpl$11 = ["<div", "", " class=\"k2b-app-workspace__sidebar-section-content\">", "</div>"],
+  _tmpl$12 = ["<h2>", "</h2>"],
+  _tmpl$13 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
+  _tmpl$14 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$15 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
+  _tmpl$16 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
+  _tmpl$17 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
+  _tmpl$18 = ["<span class=\"k2b-app-workspace__sidebar-item-copy\">", "<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>", "</span>"],
+  _tmpl$19 = ["<i", "></i>"],
+  _tmpl$20 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
+  _tmpl$21 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
+  _tmpl$22 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
+  _tmpl$23 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\"", " aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$24 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
+  _tmpl$25 = ["<span class=\"", "\"", ">", "</span>"],
+  _tmpl$26 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
+  _tmpl$27 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
+  _tmpl$28 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", ">", "", "</div>"],
+  _tmpl$29 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
+  _tmpl$30 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
+  _tmpl$31 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$32 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
+  _tmpl$33 = ["<div class=\"", "\">", "</div>"];
 import { Link } from "@k2b/ssr/nav";
 import { children, createContext, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, useContext } from "solid-js";
 import { useUiMessages } from "../intl/messages";
-import { installAppWorkspaceController } from "./app-workspace-controller";
+import { APP_WORKSPACE_SIDEBAR_HIDE_EVENT, installAppWorkspaceController } from "./app-workspace-controller";
 import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable } from "./app-workspace-state";
 import { SidebarItemPreview } from "./SidebarItemPreview";
 import { createScrollFade } from "./scroll-fade";
@@ -336,19 +337,36 @@ function AppWorkspaceSidebar(props) {
   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 domId = () => props.id ?? `k2b-workspace-sidebar-${generatedId}`;
+  // Hidden navigation is not rendered at all, so its labels are neither shown
+  // nor reachable; reading the children lazily keeps them from being created.
+  const resolved = children(() => props.hidden ? undefined : props.children);
   const slots = createMemo(() => flatten(resolved()).filter(sidebarChildSlot));
   const desktop = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_DESKTOP));
-  return [_$ssr(_tmpl$5, _$ssrAttribute("id", _$escape(domId, true), false), `k2b-app-workspace__sidebar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.label, true), false) + _$ssrAttribute("data-mobile", props.mobile === "stacked" ? "stacked" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-collapsible", props.collapsible ? "true" : "false", false), _$escape(desktop()?.children)), _$createComponent(Show, {
+  let aside;
+  onMount(() => {
+    const requestHide = () => props.onHiddenChange?.(true);
+    aside?.addEventListener(APP_WORKSPACE_SIDEBAR_HIDE_EVENT, requestHide);
+    onCleanup(() => aside?.removeEventListener(APP_WORKSPACE_SIDEBAR_HIDE_EVENT, requestHide));
+  });
+  return [_$ssr(_tmpl$6, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__sidebar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$ssrAttribute("hidden", props.hidden || undefined, true) + _$ssrAttribute("data-mobile", props.mobile === "stacked" ? "stacked" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-collapsible", props.collapsible ? "true" : "false", false) + _$ssrAttribute("data-workspace-hideable", props.onHiddenChange ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
     get when() {
-      return resizable();
+      return !props.hidden;
+    },
+    get children() {
+      return _$ssr(_tmpl$5, _$escape(desktop()?.children));
+    }
+  }))), _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!resizable())() && !props.hidden;
     },
     get children() {
       return _$createComponent(ResizeHandle, {
         kind: "sidebar",
         edge: "end",
-        controls: domId,
+        get controls() {
+          return domId();
+        },
         get defaultSize() {
           return defaultSize();
         },
@@ -390,7 +408,7 @@ const AppWorkspaceSidebarBody = props => {
     get ["data-scroll-fade-mode"]() {
       return props.scrollFade !== false ? "both" : undefined;
     }
-  }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), _$escape(props.children), false), _$ssr(_tmpl$6, SIDEBAR_SCROLL_MEMORY_SCRIPT)];
+  }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), _$escape(props.children), false), _$ssr(_tmpl$7, SIDEBAR_SCROLL_MEMORY_SCRIPT)];
 };
 const AppWorkspaceSidebarFooter = props => _$ssrElement("footer", _$mergeProps({
   get ["class"]() {
@@ -406,14 +424,14 @@ const AppWorkspaceSidebarSection = props => {
       return props.icon;
     },
     get children() {
-      return _$ssr(_tmpl$7, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+      return _$ssr(_tmpl$8, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
     }
   }), props.title, _$createComponent(Show, {
     get when() {
       return props.count !== undefined;
     },
     get children() {
-      return _$ssr(_tmpl$8, _$escape(props.count));
+      return _$ssr(_tmpl$9, _$escape(props.count));
     }
   })];
   return _$ssrElement("section", _$mergeProps({
@@ -428,7 +446,7 @@ const AppWorkspaceSidebarSection = props => {
       return props.title || props.actions;
     },
     get children() {
-      return _$ssr(_tmpl$1, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$10, _$escape(_$createComponent(Show, {
         get when() {
           return props.collapsible;
         },
@@ -438,23 +456,23 @@ const AppWorkspaceSidebarSection = props => {
               return props.title;
             },
             get children() {
-              return _$ssr(_tmpl$11, _$escape(title()));
+              return _$ssr(_tmpl$12, _$escape(title()));
             }
           });
         },
         get children() {
-          return _$ssr(_tmpl$9, _$ssrAttribute("aria-expanded", _$escape(open(), true), false) + _$ssrAttribute("aria-controls", _$escape(id, true), false), _$escape(title()), _$ssrAttribute("class", open() ? "ti ti-chevron-down" : "ti ti-chevron-right", false));
+          return _$ssr(_tmpl$0, _$ssrAttribute("aria-expanded", _$escape(open(), true), false) + _$ssrAttribute("aria-controls", _$escape(id, true), false), _$escape(title()), _$ssrAttribute("class", open() ? "ti ti-chevron-down" : "ti ti-chevron-right", false));
         }
       })), _$escape(_$createComponent(Show, {
         get when() {
           return props.actions;
         },
         get children() {
-          return _$ssr(_tmpl$0, _$escape(props.actions));
+          return _$ssr(_tmpl$1, _$escape(props.actions));
         }
       })));
     }
-  })), _$ssr(_tmpl$10, _$ssrAttribute("id", _$escape(id, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children))], false);
+  })), _$ssr(_tmpl$11, _$ssrAttribute("id", _$escape(id, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children))], false);
 };
 const AppWorkspaceSidebarItemIcon = props => mergeProps({
   kind: SIDEBAR_ITEM_ICON
@@ -468,7 +486,7 @@ const AppWorkspaceSidebarItemMeta = props => mergeProps({
 const AppWorkspaceSidebarItemAction = props => mergeProps({
   kind: SIDEBAR_ITEM_ACTION
 }, props);
-const AppWorkspaceSidebarItemActions = props => _$ssr(_tmpl$12, _$ssrAttribute("data-visibility", props.visibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(props.children));
+const AppWorkspaceSidebarItemActions = props => _$ssr(_tmpl$13, _$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 ?? ""}`;
@@ -600,19 +618,19 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      return _$ssr(_tmpl$13, _$escape(iconContent() ?? _$ssr(_tmpl$18, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
+      return _$ssr(_tmpl$14, _$escape(iconContent() ?? _$ssr(_tmpl$19, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
     }
-  }), _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
+  }), _$ssr(_tmpl$18, _$escape(_$createComponent(Show, {
     get when() {
       return props.context || props.contextMeta;
     },
     get children() {
-      return _$ssr(_tmpl$15, _$escape(props.context), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$16, _$escape(props.context), _$escape(_$createComponent(Show, {
         get when() {
           return props.contextMeta;
         },
         get children() {
-          return _$ssr(_tmpl$14, _$escape(props.contextMeta));
+          return _$ssr(_tmpl$15, _$escape(props.contextMeta));
         }
       })));
     }
@@ -621,13 +639,13 @@ function AppWorkspaceSidebarItem(props) {
       return props.description;
     },
     get children() {
-      return _$ssr(_tmpl$16, _$escape(props.description));
+      return _$ssr(_tmpl$17, _$escape(props.description));
     }
   }))), _$createComponent(Show, {
     get when() {
       return meta();
     },
-    children: value => _$ssr(_tmpl$19, _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(value()))
+    children: value => _$ssr(_tmpl$20, _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(value()))
   })];
   const singleAction = () => {
     const label = () => actionSlot()?.label ?? props.actionLabel ?? messages().rowAction;
@@ -641,7 +659,7 @@ function AppWorkspaceSidebarItem(props) {
       actionSlot()?.onSelect?.(event);
       props.onActionClick?.(event);
     };
-    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$18, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
+    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$19, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
     return _$createComponent(Show, {
       get when() {
         return Boolean(actionSlot() || props.actionIcon);
@@ -652,10 +670,10 @@ function AppWorkspaceSidebarItem(props) {
             return _$memo(() => !!actionSlot()?.href)() && !actionSlot()?.disabled;
           },
           get fallback() {
-            return _$ssr(_tmpl$21, _$ssrAttribute("disabled", actionSlot()?.disabled, true) + _$ssrAttribute("data-visibility", actionSlot()?.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label(), true), false), _$escape(content()));
+            return _$ssr(_tmpl$22, _$ssrAttribute("disabled", actionSlot()?.disabled, true) + _$ssrAttribute("data-visibility", actionSlot()?.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label(), true), false), _$escape(content()));
           },
           get children() {
-            return _$ssr(_tmpl$20, _$ssrAttribute("href", _$escape(actionSlot()?.href, true), false), _$ssrAttribute("data-visibility", actionSlot()?.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label(), true), false), _$escape(content()));
+            return _$ssr(_tmpl$21, _$ssrAttribute("href", _$escape(actionSlot()?.href, true), false), _$ssrAttribute("data-visibility", actionSlot()?.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label(), true), false), _$escape(content()));
           }
         });
       }
@@ -891,21 +909,21 @@ const AppWorkspaceNavTree = props => {
           return rowIcon();
         },
         get children() {
-          return _$ssr(_tmpl$22, _$ssrAttribute("data-k2b-nav-tree-toggle", usesIconDisclosure() ? "" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false));
+          return _$ssr(_tmpl$23, _$ssrAttribute("data-k2b-nav-tree-toggle", usesIconDisclosure() ? "" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false));
         }
-      }), _$ssr(_tmpl$23, _$escape(item.label)), _$createComponent(Show, {
+      }), _$ssr(_tmpl$24, _$escape(item.label)), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          return _$ssr(_tmpl$24, `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));
+          return _$ssr(_tmpl$25, `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 _$memo(() => !!hasChildren())() && !usesIconDisclosure();
         },
         get children() {
-          return _$ssr(_tmpl$25, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
+          return _$ssr(_tmpl$26, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -960,17 +978,17 @@ const AppWorkspaceNavTree = props => {
         },
         children: rowContent
       });
-      return _$ssr(_tmpl$27, _$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, {
+      return _$ssr(_tmpl$28, _$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 _$memo(() => !!hasChildren())() && isExpanded(item.id);
         },
         get children() {
-          return _$ssr(_tmpl$26, _$escape(renderItems(nested, depth + 1, item.id)));
+          return _$ssr(_tmpl$27, _$escape(renderItems(nested, depth + 1, item.id)));
         }
       })));
     }
   });
-  return _$ssr(_tmpl$28, `k2b-app-workspace__nav-tree ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.ariaLabel, true), false), _$escape(renderItems(roots, 0)));
+  return _$ssr(_tmpl$29, `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({
@@ -981,10 +999,10 @@ const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProp
   get when() {
     return props.title;
   },
-  children: title => _$ssr(_tmpl$11, _$escape(title()))
-})), _$ssr(_tmpl$29, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
+  children: title => _$ssr(_tmpl$12, _$escape(title()))
+})), _$ssr(_tmpl$30, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
 const AppWorkspaceSidebarIconAction = props => {
-  const content = _$ssr(_tmpl$30, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+  const content = _$ssr(_tmpl$31, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
     title: props.label,
@@ -1050,7 +1068,7 @@ const AppWorkspace = props => {
       return props.resizable !== false;
     },
     get children() {
-      return _$ssr(_tmpl$31, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$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));
+      return _$ssr(_tmpl$32, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$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));
     }
   });
 };
@@ -1062,7 +1080,7 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
     return props.children;
   }
 });
-AppWorkspace.Content = props => _$ssr(_tmpl$32, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+AppWorkspace.Content = props => _$ssr(_tmpl$33, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
 AppWorkspace.Detail = AppWorkspaceDetail;