@k2b/ui 0.33.0 → 0.35.0

package/dist/ssr/internal/radio-keys.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["internal/radio-keys.ts"],"sourcesContent":["/**\n * Roving focus for a single-choice radio group: arrows move and select with wrapping, Home and End select the first\n * and last option. Returns the index to select, or `undefined` for keys the group does not handle.\n */\nexport const radioKeyTarget = (key: string, index: number, count: number): number | undefined => {\n  if (count === 0) return undefined;\n  if (key === \"ArrowRight\" || key === \"ArrowDown\") return (index + 1) % count;\n  if (key === \"ArrowLeft\" || key === \"ArrowUp\") return (index - 1 + count) % count;\n  if (key === \"Home\") return 0;\n  if (key === \"End\") return count - 1;\n  return undefined;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA,OAAO,MAAM,cAAc,GAAG,CAAC,GAAW,EAAE,KAAa,EAAE,KAAa,KAAyB;EAC/F,IAAI,KAAK,KAAK,CAAC,EAAE,OAAO,SAAS;EACjC,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,WAAW,EAAE,OAAO,CAAC,KAAK,GAAG,CAAC,IAAI,KAAK;EAC3E,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,SAAS,EAAE,OAAO,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,IAAI,KAAK;EAChF,IAAI,GAAG,KAAK,MAAM,EAAE,OAAO,CAAC;EAC5B,IAAI,GAAG,KAAK,KAAK,EAAE,OAAO,KAAK,GAAG,CAAC;EACnC,OAAO,SAAS;AAClB,CAAC","ignoreList":[]}

package/dist/ssr/layout/AnchoredPopover.js

@@ -0,0 +1,142 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssrStyle as _$ssrStyle } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<div popover=\"auto\" role=\"dialog\"", " tabindex=\"-1\"", " style=\"", "\">", "</div>"];
+import { createEffect, createSignal, onCleanup, onMount, Show, untrack } from "solid-js";
+import { returnFocus, ringOnReturn } from "../internal/focus-return";
+const GAP = 6;
+const MARGIN = 8;
+const sheetQuery = "(max-width: 47.999rem)";
+
+/**
+ * A panel anchored to a control, for content that is more than a menu, such as a card with a slider. It opens on the
+ * side with room and keeps that side while open, so a panel that changes its content never jumps to the other side.
+ * Escape, a click outside and another press of the anchor close it; the focus returns to where it was. On a phone it
+ * is a bottom sheet.
+ */
+export function AnchoredPopover(props) {
+  let surface;
+  let previous = null;
+  let ring = false;
+  let pressedAnchor;
+  /** The side chosen when the panel opened; kept until it closes. */
+  let openedAbove;
+  const [shown, setShown] = createSignal();
+  const [sheet, setSheet] = createSignal(false);
+  const place = () => {
+    const anchor = shown();
+    if (!surface || !anchor) return;
+    if (!anchor.isConnected) {
+      hide();
+      props.onClose();
+      return;
+    }
+    if (sheet()) {
+      surface.style.left = "";
+      surface.style.top = "";
+      return;
+    }
+    const viewport = window.visualViewport;
+    const view = {
+      top: (viewport?.offsetTop ?? 0) + MARGIN,
+      bottom: (viewport ? viewport.offsetTop + viewport.height : window.innerHeight) - MARGIN,
+      left: (viewport?.offsetLeft ?? 0) + MARGIN,
+      right: (viewport ? viewport.offsetLeft + viewport.width : window.innerWidth) - MARGIN
+    };
+    const box = anchor.getBoundingClientRect();
+    const size = surface.getBoundingClientRect();
+    const roomAbove = box.top - GAP - view.top;
+    const roomBelow = view.bottom - box.bottom - GAP;
+    if (openedAbove === undefined) {
+      const planned = Math.max(size.height, props.plannedHeight ?? 0);
+      openedAbove = (props.side ?? "below") === "above" ? planned <= roomAbove || roomAbove > roomBelow : planned > roomBelow && roomAbove > roomBelow;
+    }
+    surface.style.setProperty("--k2b-anchored-popover-room", `${Math.round(Math.max(120, openedAbove ? roomAbove : roomBelow))}px`);
+    const top = openedAbove ? box.top - GAP - size.height : box.bottom + GAP;
+    const left = (props.align ?? "end") === "end" ? box.right - size.width : box.left;
+    surface.style.left = `${Math.round(Math.max(view.left, Math.min(left, view.right - size.width)))}px`;
+    surface.style.top = `${Math.round(Math.max(view.top, Math.min(top, view.bottom - size.height)))}px`;
+  };
+  const restoreFocus = () => {
+    const focused = document.activeElement;
+    if (focused && focused !== document.body && !surface?.contains(focused)) return;
+    if (previous?.isConnected) returnFocus(previous, ring);
+  };
+  const hide = () => {
+    restoreFocus();
+    if (surface?.matches(":popover-open")) surface.hidePopover();
+    openedAbove = undefined;
+    setShown(undefined);
+  };
+  const pressed = event => {
+    const anchor = shown();
+    pressedAnchor = anchor && event.target instanceof Node && anchor.contains(event.target) ? anchor : undefined;
+  };
+  const clicked = event => {
+    const anchor = shown();
+    if (!anchor || !(event.target instanceof Node) || !anchor.contains(event.target)) return;
+    pressedAnchor = anchor;
+    hide();
+    props.onClose();
+  };
+  createEffect(() => {
+    const anchor = props.anchor ?? undefined;
+    untrack(() => {
+      if (!anchor) {
+        if (shown()) hide();
+        return;
+      }
+      if (anchor === pressedAnchor) {
+        pressedAnchor = undefined;
+        props.onClose();
+        return;
+      }
+      if (shown() === anchor || !surface) return;
+      if (!shown()) {
+        previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        ring = ringOnReturn(previous ?? anchor);
+      }
+      setSheet(typeof matchMedia === "function" && matchMedia(sheetQuery).matches);
+      setShown(anchor);
+      if (!surface.matches(":popover-open")) surface.showPopover();
+      place();
+      queueMicrotask(() => (props.initialFocus?.() ?? surface)?.focus({
+        preventScroll: true
+      }));
+    });
+  });
+  const scrolled = event => {
+    if (!(event.target instanceof Node && surface?.contains(event.target))) place();
+  };
+  onMount(() => {
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", scrolled, true);
+    window.visualViewport?.addEventListener("resize", place);
+    document.addEventListener("pointerdown", pressed, true);
+    document.addEventListener("click", clicked, true);
+    const observer = typeof ResizeObserver === "function" && surface ? new ResizeObserver(place) : undefined;
+    if (surface) observer?.observe(surface);
+    onCleanup(() => {
+      observer?.disconnect();
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", scrolled, true);
+      window.visualViewport?.removeEventListener("resize", place);
+      document.removeEventListener("pointerdown", pressed, true);
+      document.removeEventListener("click", clicked, true);
+      if (surface?.matches(":popover-open")) hide();
+    });
+  });
+  return _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$ssrAttribute("class", _$escape(["k2b-anchored-popover", props.class].filter(Boolean).join(" "), true), false) + _$ssrAttribute("data-sheet", sheet() ? "" : _$escape(undefined, true), false), _$ssrStyle(props.width ? {
+    "--k2b-anchored-popover-width": props.width
+  } : undefined), _$escape(_$createComponent(Show, {
+    get when() {
+      return shown();
+    },
+    get children() {
+      return props.children;
+    }
+  })));
+}
+//# sourceMappingURL=AnchoredPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["layout/AnchoredPopover.tsx"],"sourcesContent":["import { createEffect, createSignal, type JSX, onCleanup, onMount, Show, untrack } from \"solid-js\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\n\nexport type AnchoredPopoverProps = {\n  /** The control the panel belongs to. The panel is open while this is set. */\n  anchor: HTMLElement | null | undefined;\n  /** Called on Escape, a click outside, another press of the anchor, and when the anchor leaves the page. */\n  onClose: () => void;\n  /** The panel's accessible name; it is a non-modal dialog. */\n  label: string;\n  children: JSX.Element;\n  /** Which edge lines up with the anchor. Defaults to `end`, like a menu at the end of a toolbar. */\n  align?: \"start\" | \"end\";\n  /** The side tried first; the panel flips only when the other side has more room. Defaults to `below`. */\n  side?: \"below\" | \"above\";\n  /**\n   * The tallest the panel gets while open, in px, such as a list it can switch to. The side is chosen for this height\n   * and kept, so a panel that grows never flips. Defaults to its height when it opens.\n   */\n  plannedHeight?: number;\n  /** Width of the panel on wide screens, such as `21rem`. On a phone it is a bottom sheet across the screen. */\n  width?: string;\n  /** Moves the focus into the panel when it opens; defaults to the panel itself. */\n  initialFocus?: () => HTMLElement | null | undefined;\n  class?: string;\n};\n\nconst GAP = 6;\nconst MARGIN = 8;\nconst sheetQuery = \"(max-width: 47.999rem)\";\n\n/**\n * A panel anchored to a control, for content that is more than a menu, such as a card with a slider. It opens on the\n * side with room and keeps that side while open, so a panel that changes its content never jumps to the other side.\n * Escape, a click outside and another press of the anchor close it; the focus returns to where it was. On a phone it\n * is a bottom sheet.\n */\nexport function AnchoredPopover(props: AnchoredPopoverProps): JSX.Element {\n  let surface: HTMLDivElement | undefined;\n  let previous: HTMLElement | null = null;\n  let ring = false;\n  let pressedAnchor: HTMLElement | undefined;\n  /** The side chosen when the panel opened; kept until it closes. */\n  let openedAbove: boolean | undefined;\n  const [shown, setShown] = createSignal<HTMLElement>();\n  const [sheet, setSheet] = createSignal(false);\n\n  const place = () => {\n    const anchor = shown();\n    if (!surface || !anchor) return;\n    if (!anchor.isConnected) {\n      hide();\n      props.onClose();\n      return;\n    }\n    if (sheet()) {\n      surface.style.left = \"\";\n      surface.style.top = \"\";\n      return;\n    }\n    const viewport = window.visualViewport;\n    const view = {\n      top: (viewport?.offsetTop ?? 0) + MARGIN,\n      bottom: (viewport ? viewport.offsetTop + viewport.height : window.innerHeight) - MARGIN,\n      left: (viewport?.offsetLeft ?? 0) + MARGIN,\n      right: (viewport ? viewport.offsetLeft + viewport.width : window.innerWidth) - MARGIN,\n    };\n    const box = anchor.getBoundingClientRect();\n    const size = surface.getBoundingClientRect();\n    const roomAbove = box.top - GAP - view.top;\n    const roomBelow = view.bottom - box.bottom - GAP;\n    if (openedAbove === undefined) {\n      const planned = Math.max(size.height, props.plannedHeight ?? 0);\n      openedAbove =\n        (props.side ?? \"below\") === \"above\" ? planned <= roomAbove || roomAbove > roomBelow : planned > roomBelow && roomAbove > roomBelow;\n    }\n    surface.style.setProperty(\"--k2b-anchored-popover-room\", `${Math.round(Math.max(120, openedAbove ? roomAbove : roomBelow))}px`);\n    const top = openedAbove ? box.top - GAP - size.height : box.bottom + GAP;\n    const left = (props.align ?? \"end\") === \"end\" ? box.right - size.width : box.left;\n    surface.style.left = `${Math.round(Math.max(view.left, Math.min(left, view.right - size.width)))}px`;\n    surface.style.top = `${Math.round(Math.max(view.top, Math.min(top, view.bottom - size.height)))}px`;\n  };\n\n  const restoreFocus = () => {\n    const focused = document.activeElement;\n    if (focused && focused !== document.body && !surface?.contains(focused)) return;\n    if (previous?.isConnected) returnFocus(previous, ring);\n  };\n\n  const hide = () => {\n    restoreFocus();\n    if (surface?.matches(\":popover-open\")) surface.hidePopover();\n    openedAbove = undefined;\n    setShown(undefined);\n  };\n\n  const pressed = (event: PointerEvent) => {\n    const anchor = shown();\n    pressedAnchor = anchor && event.target instanceof Node && anchor.contains(event.target) ? anchor : undefined;\n  };\n  const clicked = (event: MouseEvent) => {\n    const anchor = shown();\n    if (!anchor || !(event.target instanceof Node) || !anchor.contains(event.target)) return;\n    pressedAnchor = anchor;\n    hide();\n    props.onClose();\n  };\n\n  createEffect(() => {\n    const anchor = props.anchor ?? undefined;\n    untrack(() => {\n      if (!anchor) {\n        if (shown()) hide();\n        return;\n      }\n      if (anchor === pressedAnchor) {\n        pressedAnchor = undefined;\n        props.onClose();\n        return;\n      }\n      if (shown() === anchor || !surface) return;\n      if (!shown()) {\n        previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n        ring = ringOnReturn(previous ?? anchor);\n      }\n      setSheet(typeof matchMedia === \"function\" && matchMedia(sheetQuery).matches);\n      setShown(anchor);\n      if (!surface.matches(\":popover-open\")) surface.showPopover();\n      place();\n      queueMicrotask(() => (props.initialFocus?.() ?? surface)?.focus({ preventScroll: true }));\n    });\n  });\n\n  const scrolled = (event: Event) => {\n    if (!(event.target instanceof Node && surface?.contains(event.target))) place();\n  };\n\n  onMount(() => {\n    window.addEventListener(\"resize\", place);\n    window.addEventListener(\"scroll\", scrolled, true);\n    window.visualViewport?.addEventListener(\"resize\", place);\n    document.addEventListener(\"pointerdown\", pressed, true);\n    document.addEventListener(\"click\", clicked, true);\n    const observer = typeof ResizeObserver === \"function\" && surface ? new ResizeObserver(place) : undefined;\n    if (surface) observer?.observe(surface);\n    onCleanup(() => {\n      observer?.disconnect();\n      window.removeEventListener(\"resize\", place);\n      window.removeEventListener(\"scroll\", scrolled, true);\n      window.visualViewport?.removeEventListener(\"resize\", place);\n      document.removeEventListener(\"pointerdown\", pressed, true);\n      document.removeEventListener(\"click\", clicked, true);\n      if (surface?.matches(\":popover-open\")) hide();\n    });\n  });\n\n  return (\n    <div\n      ref={surface}\n      popover=\"auto\"\n      role=\"dialog\"\n      aria-label={props.label}\n      tabIndex={-1}\n      class={[\"k2b-anchored-popover\", props.class].filter(Boolean).join(\" \")}\n      data-sheet={sheet() ? \"\" : undefined}\n      style={props.width ? { \"--k2b-anchored-popover-width\": props.width } : undefined}\n      onToggle={(event) => {\n        if ((event as ToggleEvent).newState === \"open\") return;\n        if (shown()) {\n          openedAbove = undefined;\n          setShown(undefined);\n          restoreFocus();\n          props.onClose();\n        }\n        setTimeout(() => {\n          pressedAnchor = undefined;\n        });\n      }}\n    >\n      <Show when={shown()}>{props.children}</Show>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/layout/AppWorkspace.js

@@ -73,6 +73,7 @@ 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";
@@ -80,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();
@@ -244,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;
@@ -399,11 +424,18 @@ function AppWorkspaceMain(props) {
                 get children() {
                   return handle();
                 }
-              }), _$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(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;
                 },
@@ -987,13 +1019,73 @@ const AppWorkspaceSidebarItemStatus = props => {
     }
   })));
 };
+/**
+ * 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,
@@ -1003,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);
@@ -1074,7 +1169,7 @@ function AppWorkspaceSidebarRow(props) {
       }
     });
   };
-  return _$createComponent(Show, {
+  return [_$createComponent(Show, {
     get when() {
       return props.hasActions;
     },
@@ -1092,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();
@@ -1254,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;
     },
@@ -1371,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);
@@ -1548,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;
         },
@@ -1664,10 +1785,11 @@ const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProp
   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 => {
+  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: {
@@ -1675,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;
     }
@@ -1705,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