@k2b/ui 0.32.0 → 0.34.0

package/dist/ssr/layout/AppWorkspace.js

@@ -8,70 +8,72 @@ 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 = ["<p class=\"k2b-truncate-fade\">", "</p>"],
-  _tmpl$3 = ["<div class=\"k2b-app-workspace__level-actions\">", "</div>"],
-  _tmpl$4 = ["<header class=\"k2b-app-workspace__level-head\">", "<div class=\"k2b-app-workspace__level-title\"><h2 tabindex=\"-1\"><span class=\"k2b-truncate-fade\">", "</span></h2>", "</div>", "</header>"],
-  _tmpl$5 = ["<style>", "</style>"],
-  _tmpl$6 = ["<div class=\"k2b-app-workspace__main-primary\" data-workspace-main-region=\"main\"", ">", "</div>"],
-  _tmpl$7 = ["<section", " class=\"", "\"", " style=\"", "\">", "</section>"],
-  _tmpl$8 = "<i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i>",
-  _tmpl$9 = ["<div class=\"k2b-app-workspace__level-body\"", ">", "</div>"],
-  _tmpl$0 = "<i class=\"ti ti-layout-sidebar-right\" aria-hidden=\"true\"></i>",
-  _tmpl$1 = ["<aside", " class=\"", "\"", "", " style=\"", "\"><button type=\"button\" class=\"k2b-app-workspace__detail-grabber\"", " aria-pressed=\"false\"><span aria-hidden=\"true\"></span></button>", "</aside>"],
-  _tmpl$10 = ["<aside", " class=\"", "\"", "", " style=\"", "\">", "</aside>"],
-  _tmpl$11 = ["<nav class=\"k2b-app-workspace__sidebar-sheet\"", " style=\"", "\">", "</nav>"],
-  _tmpl$12 = ["<div class=\"k2b-app-workspace__sidebar-desktop\"", ">", "</div>"],
-  _tmpl$13 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-all\" aria-haspopup=\"dialog\"", "><span>", "</span><i class=\"ti ti-chevron-down\" aria-hidden=\"true\"></i></button>"],
-  _tmpl$14 = ["<script>", "</script>"],
-  _tmpl$15 = ["<span aria-hidden=\"true\"><i", "></i></span>"],
-  _tmpl$16 = ["<span class=\"k2b-app-workspace__sidebar-section-count\">", "</span>"],
-  _tmpl$17 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-section-toggle\"", ">", "<i", " aria-hidden=\"true\"></i></button>"],
-  _tmpl$18 = ["<div class=\"k2b-app-workspace__sidebar-section-actions\">", "</div>"],
-  _tmpl$19 = ["<header class=\"k2b-app-workspace__sidebar-section-header\">", "", "</header>"],
-  _tmpl$20 = ["<div", "", " class=\"k2b-app-workspace__sidebar-section-content\">", "</div>"],
-  _tmpl$21 = ["<h2>", "</h2>"],
-  _tmpl$22 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
-  _tmpl$23 = "<span class=\"k2b-app-workspace__sidebar-status-mention\" aria-hidden=\"true\">@</span>",
-  _tmpl$24 = "<span class=\"k2b-app-workspace__sidebar-status-muted\" aria-hidden=\"true\"><i class=\"ti ti-bell-off\"></i></span>",
-  _tmpl$25 = ["<span class=\"k2b-app-workspace__sidebar-status-count\"", ">", "</span>"],
-  _tmpl$26 = ["<span class=\"k2b-app-workspace__sidebar-status-unread\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$27 = ["<span class=\"k2b-sr-only\">, ", "</span>"],
-  _tmpl$28 = ["<span class=\"k2b-app-workspace__sidebar-status\"", ">", "</span>"],
-  _tmpl$29 = "<span class=\"k2b-app-workspace__sidebar-status-dot\"></span>",
-  _tmpl$30 = ["<span", " aria-hidden=\"true\">", "</span>"],
-  _tmpl$31 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
-  _tmpl$32 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label k2b-truncate-fade\">", "</span>", "</span>"],
-  _tmpl$33 = ["<span class=\"k2b-app-workspace__sidebar-item-description k2b-truncate-fade\">", "</span>"],
-  _tmpl$34 = ["<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 k2b-truncate-fade-lines\">", "</span></span>", "</span>"],
-  _tmpl$35 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
-  _tmpl$36 = ["<i", "></i>"],
-  _tmpl$37 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
-  _tmpl$38 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
-  _tmpl$39 = ["<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 k2b-truncate-fade-lines\">", "</span></span><span class=\"k2b-app-workspace__sidebar-item-description k2b-truncate-fade\">", "</span></span>"],
-  _tmpl$40 = ["<span class=\"", "\"", ">", "</span>"],
-  _tmpl$41 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
-  _tmpl$42 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text k2b-truncate-fade-lines\">", "</span></span>"],
-  _tmpl$43 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
-  _tmpl$44 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", " style=\"", "\">", "", "</div>"],
-  _tmpl$45 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
-  _tmpl$46 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
-  _tmpl$47 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$48 = ["<span class=\"k2b-app-workspace__head-primary-label\">", "</span>"],
-  _tmpl$49 = "<i class=\"ti ti-layout-sidebar\" aria-hidden=\"true\"></i>",
-  _tmpl$50 = ["<div class=\"k2b-app-workspace__head-views\">", "</div>"],
-  _tmpl$51 = ["<div class=\"k2b-app-workspace__head-filters\" role=\"group\"", ">", "", "</div>"],
-  _tmpl$52 = ["<span class=\"k2b-app-workspace__head-count\"><span>", "</span></span>"],
-  _tmpl$53 = ["<div class=\"k2b-app-workspace__head-actions\">", "", "</div>"],
-  _tmpl$54 = ["<div class=\"k2b-app-workspace__head\"", ">", "<div class=\"k2b-app-workspace__head-lead\">", "", "", "", "", "</div>", "</div>"],
-  _tmpl$55 = ["<h1 class=\"k2b-app-workspace__head-heading\" data-k2b-page-trail-title", ">", "</h1>"],
-  _tmpl$56 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
-  _tmpl$57 = ["<div class=\"", "\">", "</div>"];
+  _tmpl$2 = ["<span class=\"k2b-app-workspace__level-lead\">", "</span>"],
+  _tmpl$3 = ["<p class=\"k2b-truncate-fade\">", "</p>"],
+  _tmpl$4 = ["<div class=\"k2b-app-workspace__level-actions\">", "</div>"],
+  _tmpl$5 = ["<header class=\"k2b-app-workspace__level-head\">", "<div class=\"k2b-app-workspace__level-title\"><h2 tabindex=\"-1\">", "<span class=\"k2b-truncate-fade\">", "</span></h2>", "</div>", "</header>"],
+  _tmpl$6 = ["<style>", "</style>"],
+  _tmpl$7 = ["<div class=\"k2b-app-workspace__main-primary\" data-workspace-main-region=\"main\"", ">", "</div>"],
+  _tmpl$8 = ["<section", " class=\"", "\"", " style=\"", "\">", "</section>"],
+  _tmpl$9 = "<i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i>",
+  _tmpl$0 = ["<div class=\"k2b-app-workspace__level-body\"", ">", "</div>"],
+  _tmpl$1 = "<i class=\"ti ti-layout-sidebar-right\" aria-hidden=\"true\"></i>",
+  _tmpl$10 = ["<aside", " class=\"", "\"", "", " style=\"", "\"><button type=\"button\" class=\"k2b-app-workspace__detail-grabber\"", " aria-pressed=\"false\"><span aria-hidden=\"true\"></span></button>", "</aside>"],
+  _tmpl$11 = ["<aside", " class=\"", "\"", "", " style=\"", "\">", "</aside>"],
+  _tmpl$12 = ["<nav class=\"k2b-app-workspace__sidebar-sheet\"", " style=\"", "\">", "</nav>"],
+  _tmpl$13 = ["<div class=\"k2b-app-workspace__sidebar-desktop\"", ">", "</div>"],
+  _tmpl$14 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-all\" aria-haspopup=\"dialog\"", "><span>", "</span><i class=\"ti ti-chevron-down\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$15 = ["<script>", "</script>"],
+  _tmpl$16 = ["<span aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$17 = ["<span class=\"k2b-app-workspace__sidebar-section-count\">", "</span>"],
+  _tmpl$18 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-section-toggle\"", ">", "<i", " aria-hidden=\"true\"></i></button>"],
+  _tmpl$19 = ["<div class=\"k2b-app-workspace__sidebar-section-actions\">", "</div>"],
+  _tmpl$20 = ["<header class=\"k2b-app-workspace__sidebar-section-header\">", "", "</header>"],
+  _tmpl$21 = ["<div", "", " class=\"k2b-app-workspace__sidebar-section-content\">", "</div>"],
+  _tmpl$22 = ["<h2>", "</h2>"],
+  _tmpl$23 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
+  _tmpl$24 = "<span class=\"k2b-app-workspace__sidebar-status-mention\" aria-hidden=\"true\">@</span>",
+  _tmpl$25 = "<span class=\"k2b-app-workspace__sidebar-status-muted\" aria-hidden=\"true\"><i class=\"ti ti-bell-off\"></i></span>",
+  _tmpl$26 = ["<span class=\"k2b-app-workspace__sidebar-status-count\"", ">", "</span>"],
+  _tmpl$27 = ["<span class=\"k2b-app-workspace__sidebar-status-unread\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$28 = ["<span class=\"k2b-sr-only\">, ", "</span>"],
+  _tmpl$29 = ["<span class=\"k2b-app-workspace__sidebar-status\"", ">", "</span>"],
+  _tmpl$30 = "<span class=\"k2b-app-workspace__sidebar-status-dot\"></span>",
+  _tmpl$31 = ["<span", " aria-hidden=\"true\">", "</span>"],
+  _tmpl$32 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
+  _tmpl$33 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label k2b-truncate-fade\">", "</span>", "</span>"],
+  _tmpl$34 = ["<span class=\"k2b-app-workspace__sidebar-item-description k2b-truncate-fade\">", "</span>"],
+  _tmpl$35 = ["<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 k2b-truncate-fade-lines\">", "</span></span>", "</span>"],
+  _tmpl$36 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
+  _tmpl$37 = ["<i", "></i>"],
+  _tmpl$38 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
+  _tmpl$39 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
+  _tmpl$40 = ["<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 k2b-truncate-fade-lines\">", "</span></span><span class=\"k2b-app-workspace__sidebar-item-description k2b-truncate-fade\">", "</span></span>"],
+  _tmpl$41 = ["<span class=\"", "\"", ">", "</span>"],
+  _tmpl$42 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
+  _tmpl$43 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text k2b-truncate-fade-lines\">", "</span></span>"],
+  _tmpl$44 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
+  _tmpl$45 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", " style=\"", "\">", "", "</div>"],
+  _tmpl$46 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
+  _tmpl$47 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
+  _tmpl$48 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$49 = ["<span class=\"k2b-app-workspace__head-primary-label\">", "</span>"],
+  _tmpl$50 = "<i class=\"ti ti-layout-sidebar\" aria-hidden=\"true\"></i>",
+  _tmpl$51 = ["<div class=\"k2b-app-workspace__head-views\">", "</div>"],
+  _tmpl$52 = ["<div class=\"k2b-app-workspace__head-filters\" role=\"group\"", ">", "", "</div>"],
+  _tmpl$53 = ["<span class=\"k2b-app-workspace__head-count\"><span>", "</span></span>"],
+  _tmpl$54 = ["<div class=\"k2b-app-workspace__head-actions\">", "", "</div>"],
+  _tmpl$55 = ["<div class=\"k2b-app-workspace__head\"", ">", "<div class=\"k2b-app-workspace__head-lead\">", "", "", "", "", "</div>", "</div>"],
+  _tmpl$56 = ["<h1 class=\"k2b-app-workspace__head-heading\" data-k2b-page-trail-title", ">", "</h1>"],
+  _tmpl$57 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
+  _tmpl$58 = ["<div class=\"", "\">", "</div>"];
 import { Link } from "@k2b/ssr/nav";
 import { children, createContext, createEffect, createMemo, createRoot, createSignal, createUniqueId, For, getOwner, mergeProps, on, onCleanup, onMount, Show, useContext } from "solid-js";
 import { Dynamic, isServer } from "solid-js/web";
 import { Button, ButtonLink, IconButton, IconButtonLink } from "../actions/Button";
 import { useFilterMessages } from "../actions/filter-messages";
 import { dialogCore } from "../feedback/dialog-core";
+import { Tooltip } from "../feedback/Tooltip";
 import { RenderErrorBoundary } from "../internal/render-error";
 import { APP_WORKSPACE_DETAIL_CLOSE_EVENT, APP_WORKSPACE_DETAIL_OPEN_EVENT, APP_WORKSPACE_DETAIL_STEP_EVENT, APP_WORKSPACE_SIDEBAR_HIDE_EVENT, installAppWorkspaceController } from "./app-workspace-controller";
 import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_MAIN_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable } from "./app-workspace-state";
@@ -79,11 +81,23 @@ import { appWorkspaceInverseWidthCss, appWorkspaceWidthCss, appWorkspaceWidthTok
 import BottomSheet, { bottomSheetAdaptiveOptions } from "./BottomSheet";
 import { PageTitle, usePageTrail } from "./PageTitle";
 import { SidebarItemPreview } from "./SidebarItemPreview";
+import { inSidebarRail, SidebarRailHint } from "./SidebarRailHint";
 import { AppWorkspaceSidebarSwitcher } from "./SidebarSwitcher";
 import { createScrollFade, scrollFadeEdges } from "./scroll-fade";
 import { rememberSidebarScroll } from "./sidebar-scroll-memory";
 import { assertStableUiId, assertUniqueStableUiIds } from "./stable-id";
 import { useWorkspaceMessages } from "./workspace-messages";
+/** The narrowest container of each levels width class, as the stylesheet's breakpoints define them (48rem, 80rem). */
+const LEVEL_CLASS_WIDTH = {
+  1: 0,
+  2: 768,
+  3: 1280
+};
+/** The last shown level's minimum width when the level does not declare one; the stylesheet uses the same value. */
+const LEVEL_LAST_MIN = 320;
+/** The width the last shown level keeps at least: its declared minimum, never below the default. */
+const levelLastMin = minSize => Math.max(minSize ?? 0, LEVEL_LAST_MIN);
+const nonEmptyStyle = style => Object.keys(style).length ? style : undefined;
 const ResizeContext = createContext(true);
 /** The enclosing workspace: its head names the sidebar, and a nested workspace leaves the page title to it. */
 const WorkspaceContext = createContext();
@@ -168,19 +182,27 @@ function LevelHead(props) {
   // server and the client would then disagree on hydration keys.
   const description = children(() => props.description);
   const actions = children(() => props.actions);
-  return _$ssr(_tmpl$4, _$escape(props.children), _$escape(props.label), _$escape(_$createComponent(Show, {
+  const lead = children(() => props.lead);
+  return _$ssr(_tmpl$5, _$escape(props.children), _$escape(_$createComponent(Show, {
+    get when() {
+      return lead();
+    },
+    get children() {
+      return _$ssr(_tmpl$2, _$escape(lead()));
+    }
+  })), _$escape(props.label), _$escape(_$createComponent(Show, {
     get when() {
       return description();
     },
     get children() {
-      return _$ssr(_tmpl$2, _$escape(description()));
+      return _$ssr(_tmpl$3, _$escape(description()));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return actions();
     },
     get children() {
-      return _$ssr(_tmpl$3, _$escape(actions()));
+      return _$ssr(_tmpl$4, _$escape(actions()));
     }
   })));
 }
@@ -235,8 +257,20 @@ function AppWorkspaceMain(props) {
     return open;
   });
   const depth = () => Math.max(1, levels().findIndex(pane => pane.props.id === props.level) + 1);
+  /** How many of the deepest levels a width class shows: up to its count, as long as their minimum widths fit. */
+  const levelCount = widthClass => {
+    const all = levels();
+    let count = Math.min(widthClass, all.length);
+    while (count > 1) {
+      const end = Math.max(depth(), count);
+      const needed = all.slice(end - count, end).reduce((sum, pane, offset) => sum + (end - count + offset + 1 === end ? levelLastMin(pane.props.minSize) : pane.props.minSize ?? APP_WORKSPACE_PANE_MIN), 0);
+      if (needed <= LEVEL_CLASS_WIDTH[widthClass]) break;
+      count--;
+    }
+    return count;
+  };
   const levelClasses = (index, kind) => [1, 2, 3].filter(widthClass => {
-    const count = Math.min(widthClass, levels().length);
+    const count = levelCount(widthClass);
     const end = Math.max(depth(), count);
     const start = end - count + 1;
     return kind === "first" ? index === start && index > 1 : kind === "last" ? index === end : kind === "handle" ? index >= start && index + 1 <= end : index >= start && index <= end;
@@ -287,7 +321,7 @@ function AppWorkspaceMain(props) {
     get when() {
       return minWidth();
     },
-    children: value => _$ssr(_tmpl$5, minWidthRule(value()))
+    children: value => _$ssr(_tmpl$6, minWidthRule(value()))
   }), _$ssrElement("div", _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__main ${hasPanes() ? "has-panes" : ""} ${props.class ?? ""}`;
@@ -334,7 +368,7 @@ function AppWorkspaceMain(props) {
             return props.mobilePane ?? (anchor?.type === "pane" ? anchor.slot.props.id : "main");
           };
           if (region.type === "primary") {
-            return _$ssr(_tmpl$6, _$ssrAttribute("data-workspace-mobile-active", activeMobilePane() === "main" ? "true" : "false", false), _$escape(region.children));
+            return _$ssr(_tmpl$7, _$ssrAttribute("data-workspace-mobile-active", activeMobilePane() === "main" ? "true" : "false", false), _$escape(region.children));
           }
           const pane = region.slot;
           const levelIndex = () => levels().indexOf(pane) + 1;
@@ -390,11 +424,18 @@ function AppWorkspaceMain(props) {
                 get children() {
                   return handle();
                 }
-              }), _$ssr(_tmpl$7, _$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-level", levelsMode() ? _$escape(levelIndex(), true) : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-level-shown", _$escape(levelAttr("shown"), true), false) + _$ssrAttribute("data-workspace-level-first", _$escape(levelAttr("first"), true), false) + _$ssrAttribute("data-workspace-level-last", _$escape(levelAttr("last"), true), false) + _$ssrAttribute("data-workspace-main-region", _$escape(pane.props.id, true), false) + _$ssrAttribute("data-workspace-mobile-active", (levelsMode() ? levelClasses(levelIndex(), "shown").split(" ").includes("1") : 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", !levelsMode() && pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", !levelsMode() && pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$ssrStyle(isAnchor() ? undefined : {
-                // A stored width keeps to this pane's limits before the controller attaches.
-                "--k2b-workspace-panel-size": `clamp(${minSize()}px, var(${variable}, ${appWorkspaceWidthCss(defaultSize(), "var(--k2b-workspace-width)")}), ${maxSize()}px)`,
-                "--k2b-workspace-panel-min": `${minSize()}px`
-              }), levelsMode() ? _$escape([_$createComponent(LevelHead, {
+              }), _$ssr(_tmpl$8, _$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-level", levelsMode() ? _$escape(levelIndex(), true) : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-level-shown", _$escape(levelAttr("shown"), true), false) + _$ssrAttribute("data-workspace-level-first", _$escape(levelAttr("first"), true), false) + _$ssrAttribute("data-workspace-level-last", _$escape(levelAttr("last"), true), false) + _$ssrAttribute("data-workspace-main-region", _$escape(pane.props.id, true), false) + _$ssrAttribute("data-workspace-mobile-active", (levelsMode() ? levelClasses(levelIndex(), "shown").split(" ").includes("1") : 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", !levelsMode() && pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", !levelsMode() && pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$ssrStyle(nonEmptyStyle({
+                ...(isAnchor() ? {} : {
+                  // A stored width keeps to this pane's limits before the controller attaches.
+                  "--k2b-workspace-panel-size": `clamp(${minSize()}px, var(${variable}, ${appWorkspaceWidthCss(defaultSize(), "var(--k2b-workspace-width)")}), ${maxSize()}px)`,
+                  "--k2b-workspace-panel-min": `${minSize()}px`
+                }),
+                // The last shown level fills the rest, but never below its minimum; set on every level, so a workspace
+                // nested in a wide level does not inherit that minimum.
+                ...(levelsMode() ? {
+                  "--k2b-workspace-level-min": `${levelLastMin(pane.props.minSize)}px`
+                } : {})
+              })), levelsMode() ? _$escape([_$createComponent(LevelHead, {
                 get label() {
                   return pane.props.label;
                 },
@@ -404,6 +445,9 @@ function AppWorkspaceMain(props) {
                 get actions() {
                   return pane.props.actions;
                 },
+                get lead() {
+                  return pane.props.lead;
+                },
                 get children() {
                   return _$createComponent(Show, {
                     get when() {
@@ -427,13 +471,13 @@ function AppWorkspaceMain(props) {
                           return props.onLevelNavigate ? navigateBack : undefined;
                         },
                         get children() {
-                          return _$ssr(_tmpl$8);
+                          return _$ssr(_tmpl$9);
                         }
                       });
                     }
                   });
                 }
-              }), _$ssr(_tmpl$9, _$ssrAttribute("data-scroll", pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$escape(pane.props.children))]) : _$escape(pane.props.children)), _$createComponent(Show, {
+              }), _$ssr(_tmpl$0, _$ssrAttribute("data-scroll", pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$escape(pane.props.children))]) : _$escape(pane.props.children)), _$createComponent(Show, {
                 get when() {
                   return _$memo(() => !!resizable())() && before();
                 },
@@ -504,7 +548,7 @@ function AppWorkspaceDetail(props) {
       aside?.removeEventListener(APP_WORKSPACE_DETAIL_STEP_EVENT, step);
     });
   });
-  return [_$ssr(_tmpl$5, workspaceRule()), _$createComponent(Button, {
+  return [_$ssr(_tmpl$6, workspaceRule()), _$createComponent(Button, {
     type: "button",
     variant: "ghost",
     get ["aria-controls"]() {
@@ -520,7 +564,7 @@ function AppWorkspaceDetail(props) {
     },
     "class": "k2b-app-workspace__detail-toggle",
     get children() {
-      return [_$ssr(_tmpl$0), workspaceMessages().details];
+      return [_$ssr(_tmpl$1), workspaceMessages().details];
     }
   }), _$createComponent(Show, {
     get when() {
@@ -551,7 +595,7 @@ function AppWorkspaceDetail(props) {
         }
       });
     }
-  }), _$ssr(_tmpl$1, _$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-detail-phone", props.phone === "page" ? "page" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-choice", props.openOnChoice === false ? "request" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-detail-reopen", props.onOpen ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-closable", props.onClose ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-steppable", props.onStep ? "true" : _$escape(undefined, true), false), _$ssrAttribute("hidden", !props.open || props.available === false, true), _$ssrStyle({
+  }), _$ssr(_tmpl$10, _$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-detail-phone", props.phone === "page" ? "page" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-choice", props.openOnChoice === false ? "request" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-detail-reopen", props.onOpen ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-closable", props.onClose ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-steppable", props.onStep ? "true" : _$escape(undefined, true), false), _$ssrAttribute("hidden", !props.open || props.available === false, true), _$ssrStyle({
     ...sizeStyle(),
     "view-transition-name": props.viewTransitionName
   }), _$ssrAttribute("aria-label", _$escape(workspaceMessages().detailFullHeight, true), false), _$escape(props.children))];
@@ -602,7 +646,7 @@ function AppWorkspaceBottomDrawer(props) {
         }
       });
     }
-  }), _$ssr(_tmpl$10, _$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))];
+  }), _$ssr(_tmpl$11, _$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))];
 }
 function AppWorkspaceSidebar(props) {
   const rootResizable = useContext(ResizeContext);
@@ -687,7 +731,7 @@ function AppWorkspaceSidebar(props) {
                       console.error("AppWorkspace.Sidebar: write the sidebar children as JSX inside AppWorkspace.Sidebar so they can render a second time in the All sheet; pre-resolved children cannot be reused.");
                       return null;
                     }
-                    return _$ssr(_tmpl$11, _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$ssrStyle(accent), _$escape(resolved()));
+                    return _$ssr(_tmpl$12, _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$ssrStyle(accent), _$escape(resolved()));
                   }
                 });
               }
@@ -754,14 +798,14 @@ function AppWorkspaceSidebar(props) {
           return !props.hidden;
         },
         get children() {
-          return [_$ssr(_tmpl$12, _$ssrAttribute("data-scroll-fade-mode", stacked() ? "both" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-axis", stacked() ? "horizontal" : _$escape(undefined, true), false), _$escape(desktop()?.children)), _$createComponent(Show, {
+          return [_$ssr(_tmpl$13, _$ssrAttribute("data-scroll-fade-mode", stacked() ? "both" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-axis", stacked() ? "horizontal" : _$escape(undefined, true), false), _$escape(desktop()?.children)), _$createComponent(Show, {
             get when() {
               return stacked();
             },
             get children() {
-              return [_$ssr(_tmpl$13, _$ssrAttribute("aria-expanded", _$escape(sheetOpen(), true), false) + _$ssrAttribute("aria-label", props.label ? _$escape(workspaceMessages().sidebarAllLabel({
+              return [_$ssr(_tmpl$14, _$ssrAttribute("aria-expanded", _$escape(sheetOpen(), true), false) + _$ssrAttribute("aria-label", props.label ? _$escape(workspaceMessages().sidebarAllLabel({
                 label: props.label
-              }), true) : _$escape(undefined, true), false), _$escape(workspaceMessages().sidebarAll)), _$ssr(_tmpl$14, CHIP_ROW_SCRIPT)];
+              }), true) : _$escape(undefined, true), false), _$escape(workspaceMessages().sidebarAll)), _$ssr(_tmpl$15, CHIP_ROW_SCRIPT)];
             }
           })];
         }
@@ -841,7 +885,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$14, SIDEBAR_SCROLL_MEMORY_SCRIPT)];
+  }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), _$escape(props.children), false), _$ssr(_tmpl$15, SIDEBAR_SCROLL_MEMORY_SCRIPT)];
 };
 const AppWorkspaceSidebarFooter = props => _$ssrElement("footer", _$mergeProps({
   get ["class"]() {
@@ -857,14 +901,14 @@ const AppWorkspaceSidebarSection = props => {
       return props.icon;
     },
     get children() {
-      return _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+      return _$ssr(_tmpl$16, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
     }
   }), props.title, _$createComponent(Show, {
     get when() {
       return props.count !== undefined;
     },
     get children() {
-      return _$ssr(_tmpl$16, _$escape(props.count));
+      return _$ssr(_tmpl$17, _$escape(props.count));
     }
   })];
   return _$ssrElement("section", _$mergeProps({
@@ -879,7 +923,7 @@ const AppWorkspaceSidebarSection = props => {
       return props.title || props.actions;
     },
     get children() {
-      return _$ssr(_tmpl$19, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$20, _$escape(_$createComponent(Show, {
         get when() {
           return props.collapsible;
         },
@@ -889,23 +933,23 @@ const AppWorkspaceSidebarSection = props => {
               return props.title;
             },
             get children() {
-              return _$ssr(_tmpl$21, _$escape(title()));
+              return _$ssr(_tmpl$22, _$escape(title()));
             }
           });
         },
         get children() {
-          return _$ssr(_tmpl$17, _$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$18, _$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$18, _$escape(props.actions));
+          return _$ssr(_tmpl$19, _$escape(props.actions));
         }
       })));
     }
-  })), _$ssr(_tmpl$20, _$ssrAttribute("id", _$escape(id, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children))], false);
+  })), _$ssr(_tmpl$21, _$ssrAttribute("id", _$escape(id, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children))], false);
 };
 const AppWorkspaceSidebarItemIcon = props => mergeProps({
   kind: SIDEBAR_ITEM_ICON
@@ -919,7 +963,7 @@ const AppWorkspaceSidebarItemMeta = props => mergeProps({
 const AppWorkspaceSidebarItemAction = props => mergeProps({
   kind: SIDEBAR_ITEM_ACTION
 }, props);
-const AppWorkspaceSidebarItemActions = props => _$ssr(_tmpl$22, _$ssrAttribute("data-visibility", props.visibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(props.children));
+const AppWorkspaceSidebarItemActions = props => _$ssr(_tmpl$23, _$ssrAttribute("data-visibility", props.visibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(props.children));
 const AppWorkspaceSidebarItemStatus = props => {
   const workspaceMessages = useWorkspaceMessages();
   const waiting = () => props.waiting && Number.isFinite(props.waiting.count) ? Math.max(0, Math.floor(props.waiting.count)) : null;
@@ -935,7 +979,7 @@ const AppWorkspaceSidebarItemStatus = props => {
   // The element itself stays when there is nothing to show: empty, it takes no
   // space, and it still keeps the row's label on one line, so the first count
   // never re-wraps the label and moves the rows below.
-  return _$ssr(_tmpl$28, _$ssrAttribute("data-unread", waiting() !== null ? _$escape(undefined, true) : count() ? "count" : dot() ? "dot" : _$escape(undefined, true), false) + _$ssrAttribute("data-waiting", waiting() === null ? _$escape(undefined, true) : waiting() ? "count" : "zero", false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$29, _$ssrAttribute("data-unread", waiting() !== null ? _$escape(undefined, true) : count() ? "count" : dot() ? "dot" : _$escape(undefined, true), false) + _$ssrAttribute("data-waiting", waiting() === null ? _$escape(undefined, true) : waiting() ? "count" : "zero", false), _$escape(_$createComponent(Show, {
     get when() {
       return description();
     },
@@ -945,16 +989,16 @@ const AppWorkspaceSidebarItemStatus = props => {
           return props.mention;
         },
         get children() {
-          return _$ssr(_tmpl$23);
+          return _$ssr(_tmpl$24);
         }
       }), _$createComponent(Show, {
         get when() {
           return props.muted;
         },
         get children() {
-          return _$ssr(_tmpl$24);
+          return _$ssr(_tmpl$25);
         }
-      }), _$ssr(_tmpl$26, _$escape(_$createComponent(Show, {
+      }), _$ssr(_tmpl$27, _$escape(_$createComponent(Show, {
         get when() {
           return count() || waiting() === 0;
         },
@@ -964,24 +1008,84 @@ const AppWorkspaceSidebarItemStatus = props => {
               return dot();
             },
             get children() {
-              return _$ssr(_tmpl$29);
+              return _$ssr(_tmpl$30);
             }
           });
         },
         get children() {
-          return _$ssr(_tmpl$25, _$ssrAttribute("data-mention", props.mention ? "true" : _$escape(undefined, true), false), count() > 99 ? "99+" : _$escape(count()));
+          return _$ssr(_tmpl$26, _$ssrAttribute("data-mention", props.mention ? "true" : _$escape(undefined, true), false), count() > 99 ? "99+" : _$escape(count()));
         }
-      }))), _$ssr(_tmpl$27, _$escape(description()))];
+      }))), _$ssr(_tmpl$28, _$escape(description()))];
     }
   })));
 };
+/**
+ * Hover actions overlay a row's end, so the label and count under them fade
+ * out while they show. The row measures how far the overlay reaches into its
+ * count (`--k2b-sidebar-item-cover`) and how much of that the count and gap
+ * after the label already take (`--k2b-sidebar-item-label-trail`), so the
+ * label keeps all the width the overlay leaves it. The stylesheet applies
+ * both only while the overlay shows, and assumes its usual size until then.
+ */
+function observeSidebarRowCover(row) {
+  if (isServer || typeof ResizeObserver === "undefined") return;
+  // A hidden count, such as an empty status, or hidden actions have no box to measure from.
+  const laidOut = element => Boolean(element?.getClientRects().length);
+  const measure = () => {
+    const main = row.querySelector(":scope > .k2b-app-workspace__sidebar-item-main");
+    const label = main?.querySelector(":scope > :is(.k2b-app-workspace__sidebar-item-copy, .k2b-app-workspace__sidebar-item-label)");
+    const overlays = Array.from(row.querySelectorAll(':scope > .k2b-app-workspace__sidebar-item-actions[data-visibility="hover"]:last-child, :scope > .k2b-app-workspace__sidebar-item-action[data-visibility="hover"]')).filter(element => laidOut(element) && getComputedStyle(element).position === "absolute");
+    if (!main || !laidOut(label) || !overlays.length) {
+      row.style.removeProperty("--k2b-sidebar-item-cover");
+      row.style.removeProperty("--k2b-sidebar-item-label-trail");
+      return;
+    }
+    // Lengths along the inline axis, measured toward the row's end.
+    const rtl = getComputedStyle(row).direction === "rtl";
+    const end = element => {
+      const box = element.getBoundingClientRect();
+      return rtl ? -box.left : box.right;
+    };
+    const start = Math.min(...overlays.map(element => {
+      const box = element.getBoundingClientRect();
+      return rtl ? -box.right : box.left;
+    }));
+    const meta = main.querySelector(":scope > .k2b-app-workspace__sidebar-item-meta");
+    const content = end(laidOut(meta) ? meta : label);
+    row.style.setProperty("--k2b-sidebar-item-cover", `${Math.max(0, content - start)}px`);
+    row.style.setProperty("--k2b-sidebar-item-label-trail", `${Math.max(0, content - end(label))}px`);
+  };
+  const resized = new ResizeObserver(measure);
+  // The label, the count, and the actions can be replaced while the row stays.
+  const replaced = new MutationObserver(() => observe());
+  const observe = () => {
+    const main = row.querySelector(":scope > .k2b-app-workspace__sidebar-item-main");
+    if (main) replaced.observe(main, {
+      childList: true
+    });
+    resized.disconnect();
+    resized.observe(row);
+    for (const element of row.querySelectorAll(":scope > .k2b-app-workspace__sidebar-item-main > :is(.k2b-app-workspace__sidebar-item-copy, .k2b-app-workspace__sidebar-item-label, .k2b-app-workspace__sidebar-item-meta), :scope > :is(.k2b-app-workspace__sidebar-item-actions, .k2b-app-workspace__sidebar-item-action)")) resized.observe(element);
+  };
+  replaced.observe(row, {
+    childList: true
+  });
+  observe();
+  onCleanup(() => {
+    replaced.disconnect();
+    resized.disconnect();
+  });
+}
+
 /** Shared visual and semantic row frame for flat sidebar items and tree items. */
 function AppWorkspaceSidebarRow(props) {
+  const [link, setLink] = createSignal();
+  const [hinted, setHinted] = createSignal(false);
   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,
+    title: hinted() ? undefined : props.title,
     "data-tone": props.tone,
     style: {
       "view-transition-name": props.viewTransitionName,
@@ -991,9 +1095,12 @@ function AppWorkspaceSidebarRow(props) {
   });
   const current = () => props.active === "ancestor" ? "true" : props.active ? "page" : undefined;
   const Control = control => {
-    const attrs = () => control.grouped ? {
-      class: "k2b-app-workspace__sidebar-item-main"
-    } : common();
+    const attrs = () => ({
+      ...(control.grouped ? {
+        class: "k2b-app-workspace__sidebar-item-main"
+      } : common()),
+      ref: setLink
+    });
     return _$createComponent(Show, {
       get when() {
         return Boolean(props.href && !props.disabled);
@@ -1062,7 +1169,7 @@ function AppWorkspaceSidebarRow(props) {
       }
     });
   };
-  return _$createComponent(Show, {
+  return [_$createComponent(Show, {
     get when() {
       return props.hasActions;
     },
@@ -1080,7 +1187,26 @@ function AppWorkspaceSidebarRow(props) {
         grouped: true
       })), _$escape(props.actions)], false);
     }
-  });
+  }), _$createComponent(Show, {
+    get when() {
+      return link();
+    },
+    keyed: true,
+    children: element => _$createComponent(SidebarRailHint, {
+      target: () => element,
+      get label() {
+        return props.title ?? props.hint;
+      },
+      get focusTarget() {
+        return props.focusTarget ?? (() => element);
+      },
+      labelSelector: ".k2b-app-workspace__sidebar-item-label-text",
+      get titled() {
+        return props.title !== undefined;
+      },
+      onArm: () => setHinted(true)
+    })
+  })];
 }
 function AppWorkspaceSidebarItem(props) {
   const workspaceMessages = useWorkspaceMessages();
@@ -1111,22 +1237,22 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      return _$ssr(_tmpl$30, _$ssrAttribute("class",
+      return _$ssr(_tmpl$31, _$ssrAttribute("class",
       // An object row's own glyph sits in a soft chip of the app colour; custom content such as an avatar keeps
       // its own look.
-      props.variant === "object" && !iconContent() ? "k2b-app-workspace__sidebar-item-icon k2b-icon-tile" : "k2b-app-workspace__sidebar-item-icon", false), _$escape(iconContent() ?? _$ssr(_tmpl$36, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
+      props.variant === "object" && !iconContent() ? "k2b-app-workspace__sidebar-item-icon k2b-icon-tile" : "k2b-app-workspace__sidebar-item-icon", false), _$escape(iconContent() ?? _$ssr(_tmpl$37, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
     }
-  }), _$ssr(_tmpl$34, _$escape(_$createComponent(Show, {
+  }), _$ssr(_tmpl$35, _$escape(_$createComponent(Show, {
     get when() {
       return props.context || props.contextMeta;
     },
     get children() {
-      return _$ssr(_tmpl$32, _$escape(props.context), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$33, _$escape(props.context), _$escape(_$createComponent(Show, {
         get when() {
           return props.contextMeta;
         },
         get children() {
-          return _$ssr(_tmpl$31, _$escape(props.contextMeta));
+          return _$ssr(_tmpl$32, _$escape(props.contextMeta));
         }
       })));
     }
@@ -1135,14 +1261,14 @@ function AppWorkspaceSidebarItem(props) {
       return props.description;
     },
     get children() {
-      return _$ssr(_tmpl$33, _$escape(props.description));
+      return _$ssr(_tmpl$34, _$escape(props.description));
     }
   }))), _$createComponent(Show, {
     get when() {
       return hasMeta();
     },
     get children() {
-      return _$ssr(_tmpl$35, _$ssrAttribute("id", props.preview?.trigger === "row" ? _$escape(metaId, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(meta()));
+      return _$ssr(_tmpl$36, _$ssrAttribute("id", props.preview?.trigger === "row" ? _$escape(metaId, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(meta()));
     }
   })];
   const singleAction = () => {
@@ -1157,7 +1283,7 @@ function AppWorkspaceSidebarItem(props) {
       actionSlot()?.onSelect?.(event);
       props.onActionClick?.(event);
     };
-    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$36, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
+    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$37, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
     return _$createComponent(Show, {
       get when() {
         return Boolean(actionSlot() || props.actionIcon);
@@ -1168,10 +1294,10 @@ function AppWorkspaceSidebarItem(props) {
             return _$memo(() => !!actionSlot()?.href)() && !actionSlot()?.disabled;
           },
           get fallback() {
-            return _$ssr(_tmpl$38, _$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$39, _$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$37, _$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$38, _$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()));
           }
         });
       }
@@ -1242,6 +1368,9 @@ function AppWorkspaceSidebarItem(props) {
     get title() {
       return props.title;
     },
+    get hint() {
+      return _$memo(() => typeof label() === "string")() ? label() : undefined;
+    },
     get viewTransitionName() {
       return props.viewTransitionName;
     },
@@ -1359,7 +1488,7 @@ const AppWorkspaceNavTree = props => {
     },
     children: (item, place) => {
       const nested = createMemo(() => navTreeItems(item.children));
-      const hasChildren = () => nested().length > 0;
+      const hasChildren = () => item.hasChildren ?? nested().length > 0;
       const selected = () => props.selectedId === item.id;
       const siblingIndex = id => siblings().findIndex(sibling => sibling.id === id);
       const movable = () => Boolean(props.onMove && item.movable && !item.disabled);
@@ -1477,31 +1606,31 @@ const AppWorkspaceNavTree = props => {
             get ["data-k2b-nav-tree-toggle"]() {
               return usesIconDisclosure() ? "" : undefined;
             }
-          }, () => iconAccessibility(item.iconLabel)), _$ssr(_tmpl$36, _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false)), false);
+          }, () => iconAccessibility(item.iconLabel)), _$ssr(_tmpl$37, _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false)), false);
         }
       }), _$createComponent(Show, {
         get when() {
           return item.description !== undefined;
         },
         get fallback() {
-          return _$ssr(_tmpl$42, _$ssrAttribute("data-label", typeof item.label === "string" ? _$escape(item.label, true) : _$escape(undefined, true), false), _$escape(item.label));
+          return _$ssr(_tmpl$43, _$ssrAttribute("data-label", typeof item.label === "string" ? _$escape(item.label, true) : _$escape(undefined, true), false), _$escape(item.label));
         },
         get children() {
-          return _$ssr(_tmpl$39, _$ssrAttribute("data-label", typeof item.label === "string" ? _$escape(item.label, true) : _$escape(undefined, true), false), _$escape(item.label), _$escape(item.description));
+          return _$ssr(_tmpl$40, _$ssrAttribute("data-label", typeof item.label === "string" ? _$escape(item.label, true) : _$escape(undefined, true), false), _$escape(item.label), _$escape(item.description));
         }
       }), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          return _$ssr(_tmpl$40, `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$41, `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$41, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
+          return _$ssr(_tmpl$42, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -1536,6 +1665,10 @@ const AppWorkspaceNavTree = props => {
         get title() {
           return item.title;
         },
+        get hint() {
+          return _$memo(() => typeof item.label === "string")() ? item.label : undefined;
+        },
+        focusTarget: () => treeItem,
         get viewTransitionName() {
           return item.viewTransitionName;
         },
@@ -1608,12 +1741,12 @@ const AppWorkspaceNavTree = props => {
         endDrag();
         requestMove(target.move, false);
       };
-      return _$ssr(_tmpl$44, _$ssrAttribute("aria-level", _$escape(depth, true) + 1, false) + _$ssrAttribute("aria-setsize", _$escape(siblings().length, true), false) + _$ssrAttribute("aria-posinset", _$escape(place(), 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("draggable", movable() ? _$escape(true, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-k2b-nav-tree-id", _$escape(item.id, true), false) + _$ssrAttribute("data-k2b-nav-tree-parent-id", _$escape(parentId, true), false) + _$ssrAttribute("data-k2b-nav-tree-dragging", dragged()?.id === item.id ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-k2b-nav-tree-drop", dropTarget()?.id === item.id ? _$escape(dropTarget().side, true) : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-nav-tree-depth:", _$escape(String(props.indented === false ? 0 : depth), true)), _$escape(row()), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$45, _$ssrAttribute("aria-level", _$escape(depth, true) + 1, false) + _$ssrAttribute("aria-setsize", _$escape(siblings().length, true), false) + _$ssrAttribute("aria-posinset", _$escape(place(), 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("draggable", movable() ? _$escape(true, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-k2b-nav-tree-id", _$escape(item.id, true), false) + _$ssrAttribute("data-k2b-nav-tree-parent-id", _$escape(parentId, true), false) + _$ssrAttribute("data-k2b-nav-tree-dragging", dragged()?.id === item.id ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-k2b-nav-tree-drop", dropTarget()?.id === item.id ? _$escape(dropTarget().side, true) : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-nav-tree-depth:", _$escape(String(props.indented === false ? 0 : depth), true)), _$escape(row()), _$escape(_$createComponent(Show, {
         get when() {
           return _$memo(() => !!hasChildren())() && isExpanded(item.id);
         },
         get children() {
-          return _$ssr(_tmpl$43, _$escape(renderItems(nested, depth + 1, item.id)));
+          return _$ssr(_tmpl$44, _$escape(renderItems(nested, depth + 1, item.id)));
         }
       })));
     }
@@ -1638,7 +1771,7 @@ const AppWorkspaceNavTree = props => {
       doc?.removeEventListener("pointermove", forgetDrag, true);
     });
   });
-  return _$ssr(_tmpl$45, `k2b-app-workspace__nav-tree ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.ariaLabel, true), false), _$escape(renderItems(roots, 0)));
+  return _$ssr(_tmpl$46, `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({
@@ -1649,13 +1782,14 @@ const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProp
   get when() {
     return props.title;
   },
-  children: title => _$ssr(_tmpl$21, _$escape(title()))
-})), _$ssr(_tmpl$46, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
+  children: title => _$ssr(_tmpl$22, _$escape(title()))
+})), _$ssr(_tmpl$47, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
 const AppWorkspaceSidebarIconAction = props => {
-  const content = _$ssr(_tmpl$47, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+  let target;
+  const content = _$ssr(_tmpl$48, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
   const attrs = () => ({
+    ref: element => target = element,
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
-    title: props.label,
     "aria-label": props.label,
     "data-tone": props.tone,
     style: {
@@ -1663,19 +1797,31 @@ const AppWorkspaceSidebarIconAction = props => {
     },
     ...modeAttrs(props.sidebarMode)
   });
-  if (!props.href || props.disabled) return _$ssrElement("button", _$mergeProps({
+  // The icon never shows its label, so the hint names it in every state; in the collapsed rail it sits beside the
+  // icon like the rail's other entries.
+  const hint = _$createComponent(Tooltip, {
+    target: () => target,
+    get content() {
+      return props.label;
+    },
+    get placement() {
+      return inSidebarRail(target) ? "right" : undefined;
+    },
+    delay: 0
+  });
+  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({
+  }), _$escape(content), false), hint];
+  if (props.navigation !== "enhanced" || !props.onNavigate) return [_$ssrElement("a", _$mergeProps({
     get href() {
       return props.href;
     }
-  }, attrs), _$escape(content), false);
-  return _$createComponent(Link, _$mergeProps({
+  }, attrs), _$escape(content), false), hint];
+  return [_$createComponent(Link, _$mergeProps({
     get href() {
       return props.href;
     }
@@ -1693,7 +1839,7 @@ const AppWorkspaceSidebarIconAction = props => {
       return props.onClick;
     },
     children: content
-  }));
+  })), hint];
 };
 /**
  * The row above the work area. From 48 to 64 rem it holds the button that
@@ -1730,12 +1876,12 @@ function AppWorkspaceHead(props) {
     return `@media not all and (min-width:48rem){${host} > .k2b-app-workspace__head,${host} > .k2b-app-workspace__content > .k2b-app-workspace__detail-toggle,${host} > .k2b-app-workspace__content > :is(solid-island, solid-client) > .k2b-app-workspace__detail-toggle{display:none}}`;
   };
   const resetContent = () => filters().reset;
-  const primaryContent = () => [_$ssr(_tmpl$47, _$ssrAttribute("class", _$escape(props.head?.primary?.icon, true), false)), _$ssr(_tmpl$48, _$escape(props.head?.primary?.label))];
-  return _$ssr(_tmpl$54, _$ssrAttribute("data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : _$escape(undefined, true), false) + _$ssrAttribute("data-row", props.head ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-head-pane", _$escape(mobilePane(), true), false), _$escape(_$createComponent(Show, {
+  const primaryContent = () => [_$ssr(_tmpl$48, _$ssrAttribute("class", _$escape(props.head?.primary?.icon, true), false)), _$ssr(_tmpl$49, _$escape(props.head?.primary?.label))];
+  return _$ssr(_tmpl$55, _$ssrAttribute("data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : _$escape(undefined, true), false) + _$ssrAttribute("data-row", props.head ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-head-pane", _$escape(mobilePane(), true), false), _$escape(_$createComponent(Show, {
     get when() {
       return mobilePane();
     },
-    children: pane => _$ssr(_tmpl$5, mobilePaneRule(pane()))
+    children: pane => _$ssr(_tmpl$6, mobilePaneRule(pane()))
   })), _$escape(_$createComponent(IconButton, {
     "class": "k2b-app-workspace__head-toggle",
     get label() {
@@ -1747,7 +1893,7 @@ function AppWorkspaceHead(props) {
     "aria-expanded": "false",
     "data-app-workspace-sidebar-toggle": "",
     get children() {
-      return _$ssr(_tmpl$49);
+      return _$ssr(_tmpl$50);
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -1759,20 +1905,20 @@ function AppWorkspaceHead(props) {
       },
       as: "p",
       fallback: true
-    }), _$ssr(_tmpl$55, _$ssrAttribute("data-k2b-server", isServer ? "" : _$escape(undefined, true), false), _$escape(current().title))]
+    }), _$ssr(_tmpl$56, _$ssrAttribute("data-k2b-server", isServer ? "" : _$escape(undefined, true), false), _$escape(current().title))]
   })), _$escape(_$createComponent(Show, {
     get when() {
       return resolvedViews.toArray().some(Boolean);
     },
     get children() {
-      return _$ssr(_tmpl$50, _$escape(resolvedViews()));
+      return _$ssr(_tmpl$51, _$escape(resolvedViews()));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return resolvedFilters.toArray().some(Boolean) || props.head?.filtered;
     },
     get children() {
-      return _$ssr(_tmpl$51, _$ssrAttribute("aria-label", _$escape(filters().filters, true), false), _$escape(resolvedFilters()), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$52, _$ssrAttribute("aria-label", _$escape(filters().filters, true), false), _$escape(resolvedFilters()), _$escape(_$createComponent(Show, {
         get when() {
           return props.head?.filtered;
         },
@@ -1819,14 +1965,14 @@ function AppWorkspaceHead(props) {
       return _$memo(() => !!props.head?.filtered)() && resolvedCount.toArray().some(value => value !== undefined && value !== null && value !== false);
     },
     get children() {
-      return _$ssr(_tmpl$52, _$escape(resolvedCount()));
+      return _$ssr(_tmpl$53, _$escape(resolvedCount()));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return resolvedActions.toArray().some(Boolean) || props.head?.primary;
     },
     get children() {
-      return _$ssr(_tmpl$53, _$escape(resolvedActions()), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$54, _$escape(resolvedActions()), _$escape(_$createComponent(Show, {
         get when() {
           return props.head?.primary;
         },
@@ -1918,7 +2064,7 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          return _$ssr(_tmpl$56, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, 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(contents()));
+          return _$ssr(_tmpl$57, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, 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(contents()));
         }
       });
     }
@@ -1933,7 +2079,7 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
   }
 });
 AppWorkspace.Head = AppWorkspaceHeadSlot;
-AppWorkspace.Content = props => _$ssr(_tmpl$57, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+AppWorkspace.Content = props => _$ssr(_tmpl$58, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
 AppWorkspace.Detail = AppWorkspaceDetail;