@k2b/ui 0.33.0 → 0.35.0

package/dist/browser/layout/AnchoredPopover.js

@@ -0,0 +1,180 @@
+import { template as _$template } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div popover=auto role=dialog tabindex=-1>`);
+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 (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _el$.addEventListener("toggle", event => {
+      if (event.newState === "open") return;
+      if (shown()) {
+        openedAbove = undefined;
+        setShown(undefined);
+        restoreFocus();
+        props.onClose();
+      }
+      setTimeout(() => {
+        pressedAnchor = undefined;
+      });
+    });
+    var _ref$ = surface;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$) : surface = _el$;
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return shown();
+      },
+      get children() {
+        return props.children;
+      }
+    }));
+    _$effect(_p$ => {
+      var _v$ = props.label,
+        _v$2 = ["k2b-anchored-popover", props.class].filter(Boolean).join(" "),
+        _v$3 = sheet() ? "" : undefined,
+        _v$4 = props.width ? {
+          "--k2b-anchored-popover-width": props.width
+        } : undefined;
+      _v$ !== _p$.e && _$setAttribute(_el$, "aria-label", _p$.e = _v$);
+      _v$2 !== _p$.t && _$className(_el$, _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$, "data-sheet", _p$.a = _v$3);
+      _p$.o = _$style(_el$, _v$4, _p$.o);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$;
+  })();
+}
+//# sourceMappingURL=AnchoredPopover.js.map

package/dist/browser/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/browser/layout/AppWorkspace.js

@@ -87,6 +87,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";
@@ -94,11 +95,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();
@@ -335,8 +348,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;
@@ -581,11 +606,18 @@ function AppWorkspaceMain(props) {
                       _v$24 = pane.props.surface === "navigation" ? "navigation" : undefined,
                       _v$25 = !levelsMode() && pane.props.scroll === false ? "false" : undefined,
                       _v$26 = !levelsMode() && pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : undefined,
-                      _v$27 = 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`
-                      };
+                      _v$27 = 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`
+                        } : {})
+                      });
                     _v$14 !== _p$.e && _$setAttribute(_el$18, "id", _p$.e = _v$14);
                     _v$15 !== _p$.t && _$className(_el$18, _p$.t = _v$15);
                     _v$16 !== _p$.a && _$setAttribute(_el$18, "aria-label", _p$.a = _v$16);
@@ -1411,13 +1443,73 @@ const AppWorkspaceSidebarItemStatus = props => {
     return _el$55;
   })();
 };
+/**
+ * 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,
@@ -1427,9 +1519,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);
@@ -1514,7 +1609,7 @@ function AppWorkspaceSidebarRow(props) {
       }
     });
   };
-  return _$createComponent(Show, {
+  return [_$createComponent(Show, {
     get when() {
       return props.hasActions;
     },
@@ -1529,6 +1624,7 @@ function AppWorkspaceSidebarRow(props) {
         [_el$69, _co$1] = _$getNextMarker(_el$68.nextSibling),
         _el$70 = _el$69.nextSibling,
         [_el$71, _co$10] = _$getNextMarker(_el$70.nextSibling);
+      _$use(row => onMount(() => observeSidebarRowCover(row)), _el$67);
       _$spread(_el$67, _$mergeProps(common, {
         get ["data-disabled"]() {
           return props.disabled ? "true" : undefined;
@@ -1541,7 +1637,26 @@ function AppWorkspaceSidebarRow(props) {
       _$runHydrationEvents();
       return _el$67;
     }
-  });
+  }), _$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();
@@ -1794,6 +1909,9 @@ function AppWorkspaceSidebarItem(props) {
     get title() {
       return props.title;
     },
+    get hint() {
+      return _$memo(() => typeof label() === "string")() ? label() : undefined;
+    },
     get viewTransitionName() {
       return props.viewTransitionName;
     },
@@ -1911,7 +2029,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);
@@ -2120,6 +2238,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;
         },
@@ -2335,14 +2457,15 @@ const AppWorkspaceSidebarIconGrid = props => (() => {
   return _el$109;
 })();
 const AppWorkspaceSidebarIconAction = props => {
+  let target;
   const content = (() => {
     var _el$114 = _$getNextElement(_tmpl$54);
     _$effect(() => _$className(_el$114, iconClass(props.icon)));
     return _el$114;
   })();
   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: {
@@ -2350,7 +2473,19 @@ const AppWorkspaceSidebarIconAction = props => {
     },
     ...modeAttrs(props.sidebarMode)
   });
-  if (!props.href || props.disabled) return (() => {
+  // 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 [(() => {
     var _el$115 = _$getNextElement(_tmpl$33);
     _$spread(_el$115, _$mergeProps(attrs, {
       get disabled() {
@@ -2363,8 +2498,8 @@ const AppWorkspaceSidebarIconAction = props => {
     _$insert(_el$115, content);
     _$runHydrationEvents();
     return _el$115;
-  })();
-  if (props.navigation !== "enhanced" || !props.onNavigate) return (() => {
+  })(), hint];
+  if (props.navigation !== "enhanced" || !props.onNavigate) return [(() => {
     var _el$116 = _$getNextElement(_tmpl$34);
     _$spread(_el$116, _$mergeProps({
       get href() {
@@ -2378,8 +2513,8 @@ const AppWorkspaceSidebarIconAction = props => {
     _$insert(_el$116, content);
     _$runHydrationEvents();
     return _el$116;
-  })();
-  return _$createComponent(Link, _$mergeProps({
+  })(), hint];
+  return [_$createComponent(Link, _$mergeProps({
     get href() {
       return props.href;
     }
@@ -2397,7 +2532,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