makersclaw 0.2.0 → 0.3.1

package/registry/blocks/sidebar/sidebar.jsx

@@ -0,0 +1,864 @@
+"use client";
+
+import { createContext, isValidElement, useContext, useEffect, useId, useState } from "react";
+import {
+  Avatar,
+  Badge,
+  Button,
+  Collapsible,
+  CommandDialog,
+  Icon,
+  IconButton,
+  KbdGroup,
+  Menu,
+  ScrollArea,
+  Separator,
+  Sheet,
+  StatusDot,
+  Tooltip,
+  cx,
+} from "../../ui";
+import { PanelBody, guard, run } from "./sidebar-panel";
+
+// Sidebar — an app's navigation down the left edge: the app's name (and a
+// workspace switcher when there is more than one), groups of items with
+// icons, counts and nested items, a custom slot, and the signed-in person
+// at the foot with their menu. The block owns what a hand-drawn sidebar
+// gets wrong: the active item said to a screen reader (aria-current), a
+// collapse to icons that keeps every label (as a tooltip) and is
+// remembered, and a phone layout where the sidebar is a Sheet behind a
+// trigger instead of a column squeezing the page. The app owns the items
+// (data in) and what choosing one does (href or onSelect).
+//
+//   <SidebarLayout storageKey="crm.sidebar" sidebar={<Sidebar title="Harbor CRM" groups={NAV} user={me} />}>
+//     <header><SidebarTrigger /> …</header>
+//     …the page…
+//   </SidebarLayout>
+//
+// Beyond the column: inset and floating looks, a ⌘K search over every
+// item, folding groups, a second column (the app's panel, or a parent's
+// children to drill into), a primary button, and a "…" menu per item.
+//
+// README.md beside this file lists every prop.
+
+const WIDE = "(min-width: 768px)";
+
+const SidebarContext = createContext(null);
+
+/** The layout's state, for a control of your own: { collapsed,
+ *  setCollapsed, toggle, mobileOpen, setMobileOpen }. Null outside a
+ *  SidebarLayout. */
+export function useSidebar() {
+  return useContext(SidebarContext);
+}
+
+function readStored(key) {
+  try {
+    const v = window.localStorage.getItem(key);
+    return v === "1" ? true : v === "0" ? false : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeStored(key, value) {
+  try {
+    window.localStorage.setItem(key, value ? "1" : "0");
+  } catch {
+    // private window, blocked storage: the choice lasts this visit only
+  }
+}
+
+export function SidebarLayout({
+  sidebar,
+  children,
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  storageKey,
+  shortcut = "b",
+  variant,
+  className,
+}) {
+  // The look is the Sidebar's `variant` unless the layout is given one:
+  // inset needs the page drawn as a card, so the frame has to know.
+  const look = variant ?? (isValidElement(sidebar) ? sidebar.props?.variant : undefined);
+  const controlled = collapsed !== undefined;
+  const [own, setOwn] = useState(defaultCollapsed);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const isCollapsed = controlled ? collapsed : own;
+
+  // Stored after mount: the server has no storage, so the first paint is
+  // the default and the remembered width follows at once.
+  useEffect(() => {
+    if (!storageKey || controlled) return;
+    const stored = readStored(storageKey);
+    if (stored !== null) setOwn(stored);
+  }, [storageKey, controlled]);
+
+  // Widening past the phone layout closes the sheet: the column is back.
+  useEffect(() => {
+    const mq = window.matchMedia(WIDE);
+    const onChange = () => mq.matches && setMobileOpen(false);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+
+  function setCollapsed(next) {
+    const value = typeof next === "function" ? next(isCollapsed) : Boolean(next);
+    if (!controlled) setOwn(value);
+    if (storageKey) writeStored(storageKey, value);
+    onCollapsedChange?.(value);
+  }
+
+  function toggle() {
+    if (window.matchMedia(WIDE).matches) setCollapsed(!isCollapsed);
+    else setMobileOpen((o) => !o);
+  }
+
+  // Cmd/Ctrl + B, as in most editors — never while typing in a field.
+  useEffect(() => {
+    if (!shortcut) return undefined;
+    const onKey = (e) => {
+      if (!(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey || e.key.toLowerCase() !== shortcut) return;
+      if (e.target.closest?.("input, textarea, select, [contenteditable='true']")) return;
+      e.preventDefault();
+      toggle();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  });
+
+  const value = { collapsed: isCollapsed, setCollapsed, toggle, mobileOpen, setMobileOpen };
+  return (
+    <SidebarContext.Provider value={value}>
+      <div className={cx("flex w-full text-foreground", look === "inset" ? "bg-background md:bg-muted/40" : "bg-background", className)}>
+        {sidebar}
+        <div
+          className={cx(
+            "flex min-w-0 flex-1 flex-col",
+            look === "inset" && "bg-background md:my-2 md:mr-2 md:rounded-xl md:border md:border-border md:shadow-sm",
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </SidebarContext.Provider>
+  );
+}
+
+/** The one button that opens the sidebar on a phone and collapses it to
+ *  icons on a wider window. Put it in the page's header. */
+export function SidebarTrigger({ className }) {
+  const ctx = useSidebar();
+  if (!ctx) return null;
+  return (
+    <>
+      <IconButton
+        icon="menu"
+        label="Open navigation"
+        aria-expanded={ctx.mobileOpen}
+        onClick={() => ctx.setMobileOpen(true)}
+        className={cx("md:hidden", className)}
+      />
+      <IconButton
+        icon="panel-left"
+        label={ctx.collapsed ? "Expand sidebar" : "Collapse sidebar"}
+        aria-expanded={!ctx.collapsed}
+        onClick={() => ctx.setCollapsed(!ctx.collapsed)}
+        className={cx("max-md:hidden", className)}
+      />
+    </>
+  );
+}
+
+
+const keyOf = (item) => String(item.key ?? item.href ?? item.label);
+const hasActive = (item) => Boolean(item.active || item.items?.some(hasActive));
+const shows = (badge) => badge != null && badge !== "";
+
+// The icon rail's active look rides on aria-current, so the state a reader
+// hears is the state the eye sees. (A wide row is a nav Button, which
+// paints its own aria-current; an icon button is square, not a nav row.)
+const CURRENT = "aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground aria-[current=page]:font-semibold";
+
+// The column's frame, per variant: a bordered column (today), a column on
+// the frame's own ground beside a page drawn as a card (inset), or a
+// rounded card held off the window's edge (floating).
+const SHELLS = {
+  sidebar: "sticky top-0 max-h-dvh self-stretch border-r border-border bg-muted/40",
+  inset: "sticky top-0 max-h-dvh self-stretch",
+  floating: "sticky top-2 m-2 max-h-[calc(100dvh-1rem)] self-stretch overflow-hidden rounded-xl border border-border bg-card shadow-sm",
+};
+
+// A row's "…" shows on hover or focus on a wide window, always where
+// there is no hover (a touch screen), and stays while its menu is open.
+const REVEAL =
+  "opacity-0 transition-opacity motion-reduce:transition-none group-hover/row:opacity-100 group-focus-within/row:opacity-100 " +
+  "has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100";
+
+// An href-only item chosen from the ⌘K palette: a full page load, with
+// the Makersclaw app's base path when there is one.
+function follow(href) {
+  if (typeof window === "undefined" || !href) return;
+  const base = /^[a-z]+:|^\/\//i.test(href) ? "" : document.documentElement.dataset.clawBasePath ?? "";
+  window.location.assign(base + href);
+}
+
+function focusSoon(id) {
+  requestAnimationFrame(() => document.getElementById(id)?.focus());
+}
+
+export function Sidebar({
+  groups,
+  items,
+  title,
+  subtitle,
+  logo,
+  switcher,
+  switcherLabel = "Switch workspace",
+  switcherPlacement = "header",
+  user,
+  userMenu,
+  children,
+  label = "Main",
+  variant = "sidebar",
+  headerActions,
+  search,
+  primaryAction,
+  footerActions,
+  footerActionsLabel = "Create",
+  drilldown = "inline",
+  panel,
+  className,
+}) {
+  const ctx = useSidebar();
+  const uid = useId();
+  const collapsed = Boolean(ctx?.collapsed);
+  const list = (groups ?? (items ? [{ items }] : [])).filter((g) => g && g.items?.length);
+  const drillMode = drilldown === "panel" || drilldown === "replace" ? drilldown : "inline";
+  const shell = SHELLS[variant] ?? SHELLS.sidebar;
+  // `panel` is a node of the app's own, or { title, search, items, … }.
+  const panelIsNode = Boolean(panel) && (isValidElement(panel) || typeof panel !== "object" || Array.isArray(panel));
+
+  // Open parents are held here so a click on a collapsed parent's icon can
+  // widen the sidebar with that parent open. A parent holding the active
+  // item starts open.
+  const [open, setOpen] = useState(() => {
+    const out = new Set();
+    for (const g of list) for (const it of g.items) if (it.items?.length && hasActive(it)) out.add(keyOf(it));
+    return out;
+  });
+  const setParent = (key, next) =>
+    setOpen((s) => {
+      const out = new Set(s);
+      if (next) out.add(key);
+      else out.delete(key);
+      return out;
+    });
+
+  // Folding groups (group.collapsible): the ones closed, by group key.
+  const groupKey = (group, gi) => String(group.key ?? group.label ?? gi);
+  const [folded, setFolded] = useState(() => new Set(list.flatMap((g, gi) => (g.collapsible && g.defaultOpen === false ? [groupKey(g, gi)] : []))));
+  const setGroup = (key, isOpen) =>
+    setFolded((s) => {
+      const out = new Set(s);
+      if (isOpen) out.delete(key);
+      else out.add(key);
+      return out;
+    });
+
+  // Drill-in (drilldown="panel" | "replace"): the parent whose children
+  // are shown. Starts at the one holding the active item.
+  const [drill, setDrill] = useState(() => {
+    if (drillMode === "inline") return null;
+    for (const g of list) for (const it of g.items) if (it.items?.length && hasActive(it)) return keyOf(it);
+    return null;
+  });
+  const drillItem = drill == null ? null : list.flatMap((g) => g.items).find((it) => it.items?.length && keyOf(it) === drill) ?? null;
+
+  // The phone sheet's second screen: the panel.
+  const [sheetPanel, setSheetPanel] = useState(false);
+  useEffect(() => {
+    if (!ctx?.mobileOpen) setSheetPanel(false);
+  }, [ctx?.mobileOpen]);
+
+  // ⌘K search over every item.
+  const [searching, setSearching] = useState(false);
+  const searchOpts = search ? (typeof search === "object" ? search : {}) : null;
+  const hotkey = searchOpts ? (searchOpts.hotkey === undefined ? "k" : searchOpts.hotkey) : null;
+  const searchLabel = searchOpts?.label ?? "Search";
+
+  function choose(item, { sheet } = {}) {
+    item.onSelect?.(item);
+    // With a panel, choosing on the phone shows the panel (the mails in
+    // the folder just chosen) instead of closing the sheet.
+    if (sheet && panel) setSheetPanel(true);
+    else ctx?.setMobileOpen(false);
+  }
+
+  // A choice in the user menu also closes the phone sheet — through
+  // groups and submenus too.
+  const closingSheet = (entries) =>
+    (entries ?? []).filter(Boolean).map((item) =>
+      Array.isArray(item.items)
+        ? { ...item, items: closingSheet(item.items) }
+        : item.onSelect
+          ? {
+              ...item,
+              onSelect: () => {
+                ctx?.setMobileOpen(false);
+                item.onSelect();
+              },
+            }
+          : item,
+    );
+
+  const mark = logo ?? <Avatar name={title} shape="square" size="sm" />;
+
+  function openDrill(key, where) {
+    const next = drillMode === "panel" && drill === key ? null : key;
+    setDrill(next);
+    if (next == null) return;
+    // Focus follows: to the back row (replace, or any drill on the phone),
+    // or the first child in the second column.
+    focusSoon(drillMode === "replace" || where === "s" ? `${uid}-${where}-back` : `${uid}-drill-first`);
+  }
+
+  function closeDrill(where) {
+    const key = drill;
+    setDrill(null);
+    if (key != null) focusSoon(`${uid}-${where}-parent-${key}`);
+  }
+
+  // ---- one item, three ways: the wide column, the icon rail, the sheet --
+
+  function leaf(item, { sheet, id }) {
+    const current = item.active ? "page" : undefined;
+    const button = (
+      <Button
+        id={id}
+        variant="nav"
+        size={sheet ? "md" : "sm"}
+        href={item.disabled ? undefined : item.href}
+        onClick={() => choose(item, { sheet })}
+        disabled={item.disabled}
+        aria-current={current}
+        className={item.description ? "py-1.5" : undefined}
+      >
+        {item.hue ? (
+          <span className="inline-flex size-4 shrink-0 items-center justify-center">
+            <StatusDot hue={item.hue} size="md" />
+          </span>
+        ) : item.icon ? (
+          <Icon name={item.icon} className="shrink-0" />
+        ) : null}
+        {item.description ? (
+          <span className="grid min-w-0 flex-1 text-left leading-tight">
+            <span className="truncate">{item.label}</span>
+            <span className="truncate text-xs text-muted-foreground">{item.description}</span>
+          </span>
+        ) : (
+          <span className="min-w-0 flex-1 truncate text-left">{item.label}</span>
+        )}
+        {shows(item.badge) ? <Badge className="shrink-0">{item.badge}</Badge> : null}
+      </Button>
+    );
+    if (!item.actions?.length) return button;
+    return (
+      <div className="group/row flex min-w-0 items-center gap-0.5">
+        {button}
+        <span className={cx("shrink-0", !sheet && REVEAL)}>
+          <Menu items={guard(item.actions, item)} label={`Actions for ${item.label}`} size={sheet ? "md" : "sm"} />
+        </span>
+      </div>
+    );
+  }
+
+  // A parent in drill-in mode: a row that opens its children (a second
+  // column, or in place of the list) instead of folding them in.
+  function drillRow(item, { sheet, where }) {
+    const key = keyOf(item);
+    const inPanel = drillMode === "panel" && !sheet;
+    return (
+      <Button
+        id={`${uid}-${where}-parent-${key}`}
+        variant="nav"
+        size={sheet ? "md" : "sm"}
+        onClick={() => openDrill(key, where)}
+        disabled={item.disabled}
+        aria-current={hasActive(item) ? "true" : undefined}
+        aria-expanded={inPanel ? drill === key : undefined}
+        className={inPanel ? "aria-expanded:bg-accent" : undefined}
+      >
+        {item.icon ? <Icon name={item.icon} className="shrink-0" /> : null}
+        <span className="min-w-0 flex-1 truncate text-left">{item.label}</span>
+        {shows(item.badge) ? <Badge className="shrink-0">{item.badge}</Badge> : null}
+        <Icon name="chevron-right" className="shrink-0 text-muted-foreground" />
+      </Button>
+    );
+  }
+
+  function wideItem(item, opts) {
+    if (!item.items?.length) return leaf(item, opts);
+    if (drillMode !== "inline") return drillRow(item, opts);
+    const key = keyOf(item);
+    return (
+      <div>
+        <Collapsible
+          open={open.has(key)}
+          onOpenChange={(next) => setParent(key, next)}
+          meta={shows(item.badge) ? item.badge : undefined}
+          title={
+            <span className="flex min-w-0 items-center gap-3">
+              {item.icon ? <Icon name={item.icon} className="shrink-0" /> : null}
+              <span className="truncate">{item.label}</span>
+            </span>
+          }
+          className={cx(
+            "[&>summary]:mx-0 [&>div]:pb-1 [&>div]:pt-0.5",
+            opts.sheet ? "[&>summary]:px-4" : "[&>summary]:min-h-9 [&>summary]:px-3 [&>summary]:py-1",
+          )}
+        >
+          <ul className="ml-5 grid gap-0.5 border-l border-border pl-2">
+            {item.items.map((child) => (
+              <li key={keyOf(child)}>{leaf(child, opts)}</li>
+            ))}
+          </ul>
+        </Collapsible>
+      </div>
+    );
+  }
+
+  function iconItem(item) {
+    const parent = item.items?.length > 0;
+    const count = shows(item.badge) ? item.badge : null;
+    const current = item.active || (parent && hasActive(item)) ? "page" : undefined;
+    return (
+      <Tooltip label={count != null ? `${item.label} (${count})` : item.label} side="right">
+        <span className="relative inline-flex">
+          <IconButton
+            icon={item.icon ?? "file"}
+            label={item.label}
+            size="sm"
+            href={parent || item.disabled ? undefined : item.href}
+            disabled={item.disabled}
+            aria-current={current}
+            aria-expanded={parent && drillMode === "panel" ? drill === keyOf(item) : undefined}
+            onClick={() => {
+              if (!parent) return choose(item);
+              // Drill-in to a column: the rail stays narrow beside it.
+              if (drillMode === "panel") return openDrill(keyOf(item), "r");
+              // Otherwise a parent's children need labels: widen, with it open.
+              if (drillMode === "replace") setDrill(keyOf(item));
+              else setParent(keyOf(item), true);
+              ctx?.setCollapsed(false);
+            }}
+            className={cx(CURRENT, drillMode === "panel" && "aria-expanded:bg-accent")}
+          />
+          {count != null ? (
+            <span aria-hidden="true" className="pointer-events-none absolute right-1 top-1 size-1.5 rounded-full bg-primary" />
+          ) : null}
+        </span>
+      </Tooltip>
+    );
+  }
+
+  // A drilled parent's children in place of the list: a back row, the
+  // parent's name, then its children.
+  function replaced(item, { sheet, where }) {
+    const headingId = `${uid}-${where}-drill`;
+    return (
+      <div className="grid gap-0.5">
+        <Button id={`${uid}-${where}-back`} variant="nav" size={sheet ? "md" : "sm"} onClick={() => closeDrill(where)}>
+          <Icon name="arrow-left" className="shrink-0" />
+          <span className="min-w-0 flex-1 truncate text-left">Back</span>
+        </Button>
+        <h2 id={headingId} className="flex h-8 items-center px-3 text-xs font-medium text-muted-foreground">
+          {item.label}
+        </h2>
+        <ul aria-labelledby={headingId} className="grid gap-0.5">
+          {item.items.map((child) => (
+            <li key={keyOf(child)}>{leaf(child, { sheet })}</li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+
+  function primary({ icons, sheet }) {
+    if (!primaryAction) return null;
+    const act = () => {
+      ctx?.setMobileOpen(false);
+      return run(primaryAction.onSelect, primaryAction, primaryAction.label);
+    };
+    if (icons) {
+      return (
+        <Tooltip label={primaryAction.label} side="right">
+          <IconButton icon={primaryAction.icon ?? "plus"} label={primaryAction.label} size="sm" variant="secondary" href={primaryAction.href} onClick={act} />
+        </Tooltip>
+      );
+    }
+    return (
+      <Button variant="secondary" size={sheet ? "md" : "sm"} align="start" icon={primaryAction.icon ?? "plus"} href={primaryAction.href} onClick={act} className="w-full">
+        {primaryAction.label}
+      </Button>
+    );
+  }
+
+  function nav({ sheet }) {
+    const icons = collapsed && !sheet;
+    const where = sheet ? "s" : "r";
+    // Replace mode (and any drill-in on the phone): the drilled parent's
+    // children stand in for the list.
+    const drilledHere = drillItem && !icons && (drillMode === "replace" || (sheet && drillMode === "panel"));
+    return (
+      <nav aria-label={label} className={cx("grid gap-3", icons ? "justify-items-center py-2" : "px-2 py-2")}>
+        {primaryAction && !drilledHere ? primary({ icons, sheet }) : null}
+        {drilledHere
+          ? replaced(drillItem, { sheet, where })
+          : list.map((group, gi) => {
+              const headingId = `${uid}-${where}-${gi}`;
+              const gk = groupKey(group, gi);
+              const rows = (
+                <ul
+                  aria-labelledby={group.label && !icons && !group.collapsible ? headingId : undefined}
+                  aria-label={group.label && !icons && group.collapsible ? group.label : undefined}
+                  className={cx("grid gap-0.5", icons && "justify-items-center")}
+                >
+                  {group.items.map((item) => (
+                    <li key={keyOf(item)}>{icons ? iconItem(item) : wideItem(item, { sheet, where })}</li>
+                  ))}
+                </ul>
+              );
+              if (group.collapsible && group.label && !icons) {
+                return (
+                  <Collapsible
+                    key={gk}
+                    open={!folded.has(gk)}
+                    onOpenChange={(next) => setGroup(gk, next)}
+                    meta={shows(group.badge) ? group.badge : undefined}
+                    title={<span className="truncate text-xs font-medium text-muted-foreground">{group.label}</span>}
+                    className={cx("[&>summary]:mx-0 [&>div]:pb-0 [&>div]:pt-0.5", sheet ? "[&>summary]:px-4" : "[&>summary]:min-h-8 [&>summary]:px-3 [&>summary]:py-1")}
+                  >
+                    {rows}
+                  </Collapsible>
+                );
+              }
+              return (
+                <div key={group.key ?? group.label ?? gi} className="grid gap-0.5">
+                  {group.label && !icons ? (
+                    <h2 id={headingId} className="flex h-8 items-center px-3 text-xs font-medium text-muted-foreground">
+                      {group.label}
+                    </h2>
+                  ) : icons && gi > 0 ? (
+                    <Separator className="mb-2 w-6" />
+                  ) : null}
+                  {rows}
+                </div>
+              );
+            })}
+        {children && !icons && !drilledHere ? <div className="px-2">{children}</div> : null}
+      </nav>
+    );
+  }
+
+  function brand({ icons, side = "bottom" }) {
+    const words = (
+      <span className="grid min-w-0 flex-1 text-left leading-tight">
+        <span className="truncate text-sm font-semibold">{title}</span>
+        {subtitle ? <span className="truncate text-xs font-normal text-muted-foreground">{subtitle}</span> : null}
+      </span>
+    );
+    if (switcher?.length) {
+      return (
+        <Menu
+          items={switcher}
+          label={`${title}, ${switcherLabel}`}
+          side={side === "top" && icons ? "right" : side}
+          align={side === "top" && icons ? "end" : "start"}
+          className={cx("min-h-12", icons ? "px-1.5" : "w-full px-2")}
+          trigger={
+            <>
+              {mark}
+              {icons ? null : words}
+              {icons ? null : <Icon name="chevrons-up-down" className="shrink-0 text-muted-foreground" />}
+            </>
+          }
+        />
+      );
+    }
+    return (
+      <div className={cx("flex min-h-12 items-center gap-2", icons ? "justify-center" : "px-2")}>
+        {icons ? <Tooltip label={title} side="right">{mark}</Tooltip> : mark}
+        {icons ? null : words}
+      </div>
+    );
+  }
+
+  // The top of the column: the brand (or, with the switcher in the foot,
+  // only the mark), then headerActions — a bell, a trigger.
+  function head({ icons }) {
+    const footSwitch = switcherPlacement === "footer" && switcher?.length;
+    const top = footSwitch ? (
+      <div className={cx("flex min-h-12 items-center", icons ? "justify-center" : "px-2")}>
+        {icons ? <Tooltip label={title} side="right">{mark}</Tooltip> : mark}
+      </div>
+    ) : (
+      brand({ icons })
+    );
+    if (icons || !headerActions) return top;
+    return (
+      <div className="flex items-center gap-1">
+        <div className="min-w-0 flex-1">{top}</div>
+        <div className="flex shrink-0 items-center gap-1">{headerActions}</div>
+      </div>
+    );
+  }
+
+  function searchRow({ icons, sheet }) {
+    if (!searchOpts) return null;
+    const openIt = () => {
+      ctx?.setMobileOpen(false);
+      setSearching(true);
+    };
+    const keys = hotkey ? `Meta+${String(hotkey).toUpperCase()}` : undefined;
+    if (icons) {
+      return (
+        <Tooltip label={searchLabel} side="right">
+          <IconButton icon="search" label={searchLabel} size="sm" onClick={openIt} aria-keyshortcuts={keys} />
+        </Tooltip>
+      );
+    }
+    return (
+      <Button variant="secondary" size={sheet ? "md" : "sm"} align="start" onClick={openIt} aria-keyshortcuts={keys} className="w-full">
+        <Icon name="search" className="shrink-0 text-muted-foreground" />
+        <span className="min-w-0 flex-1 truncate text-left font-normal text-muted-foreground">{searchOpts.placeholder ?? `${searchLabel}…`}</span>
+        {hotkey && !sheet ? <KbdGroup keys={["⌘", String(hotkey).toUpperCase()]} /> : null}
+      </Button>
+    );
+  }
+
+  // Every item, for the palette: a group's items under its label, a
+  // parent's children under the parent's name.
+  const searchItems = searchOpts
+    ? list.flatMap((group, gi) =>
+        group.items.flatMap((item) => {
+          const own = (it, parent) => ({
+            value: `${gi}:${parent ? `${keyOf(parent)}/` : ""}${keyOf(it)}`,
+            label: it.label,
+            description: parent ? parent.label : it.description,
+            icon: it.hue ? <StatusDot hue={it.hue} /> : it.icon,
+            group: group.label ?? searchOpts.groupLabel ?? "Go to",
+            keywords: it.keywords,
+            disabled: it.disabled,
+            onSelect: () => {
+              if (it.onSelect) it.onSelect(it);
+              else follow(it.href);
+            },
+          });
+          if (!item.items?.length) return [own(item)];
+          return [...(item.onSelect || item.href ? [own(item)] : []), ...item.items.map((child) => own(child, item))];
+        }),
+      )
+    : [];
+
+  function person({ icons }) {
+    if (!user) return null;
+    const face = <Avatar name={user.name} src={user.src} size="sm" />;
+    const words = (
+      <span className="grid min-w-0 flex-1 text-left leading-tight">
+        <span className="truncate text-sm font-medium">{user.name}</span>
+        {user.email ? <span className="truncate text-xs font-normal text-muted-foreground">{user.email}</span> : null}
+      </span>
+    );
+    if (!userMenu?.length) {
+      return <div className={cx("flex min-h-12 items-center gap-2", icons ? "justify-center" : "px-2")}>{face}{icons ? null : words}</div>;
+    }
+    // Opens upward from the foot of the window (beside the rail when it is
+    // icons), and flips where there is no room.
+    return (
+      <Menu
+        side={icons ? "right" : "top"}
+        align={icons ? "end" : "start"}
+        label={`${user.name}, account menu`}
+        items={closingSheet(userMenu)}
+        className={cx("min-h-12", icons ? "px-1.5" : "w-full px-2")}
+        trigger={
+          <>
+            {face}
+            {icons ? null : words}
+            {icons ? null : <Icon name="chevrons-up-down" className="shrink-0 text-muted-foreground" />}
+          </>
+        }
+      />
+    );
+  }
+
+  // The foot: the switcher (when it lives here), the person, and the "+"
+  // menu of footerActions beside them.
+  function foot({ icons, sheet }) {
+    const footSwitch = switcherPlacement === "footer" && switcher?.length && !sheet;
+    const plus = footerActions?.length ? (
+      <Menu
+        items={closingSheet(guard(footerActions))}
+        label={footerActionsLabel}
+        side={icons ? "right" : "top"}
+        align="end"
+        size={sheet ? "md" : "sm"}
+        trigger={<Icon name="plus" />}
+      />
+    ) : null;
+    if (!user && !plus && !footSwitch) return null;
+    return (
+      <div className="grid gap-1">
+        {footSwitch ? brand({ icons, side: "top" }) : null}
+        {user || plus ? (
+          <div className={cx("flex items-center gap-1", icons && "flex-col")}>
+            {user ? <div className={cx("min-w-0", !icons && "flex-1")}>{person({ icons })}</div> : null}
+            {plus}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  // The second column from 768px: a drilled parent's children
+  // (drilldown="panel"), else the panel.
+  function secondColumn() {
+    if (drillMode === "panel" && drillItem) {
+      const headingId = `${uid}-drill-title`;
+      return (
+        <div
+          className="flex min-h-0 flex-col"
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.stopPropagation();
+              closeDrill("r");
+            }
+          }}
+        >
+          <div className="flex min-h-14 shrink-0 items-center gap-2 border-b border-border px-3">
+            <h2 id={headingId} className="min-w-0 flex-1 truncate text-sm font-semibold">
+              {drillItem.label}
+            </h2>
+            <IconButton icon="x" label={`Close ${drillItem.label}`} size="sm" onClick={() => closeDrill("r")} />
+          </div>
+          <ScrollArea label={drillItem.label} className="min-h-0 flex-1" fade>
+            <ul aria-labelledby={headingId} className="grid gap-0.5 p-2">
+              {drillItem.items.map((child, i) => (
+                <li key={keyOf(child)}>{leaf(child, { sheet: false, id: i === 0 ? `${uid}-drill-first` : undefined })}</li>
+              ))}
+            </ul>
+          </ScrollArea>
+        </div>
+      );
+    }
+    if (!panel) return null;
+    if (panelIsNode) return panel;
+    return <PanelBody panel={panel} onChoose={() => ctx?.setMobileOpen(false)} />;
+  }
+
+  const inLayout = Boolean(ctx);
+  const second = secondColumn();
+  const hasFoot = Boolean(user || footerActions?.length || (switcherPlacement === "footer" && switcher?.length));
+  return (
+    <>
+      <div
+        data-sidebar=""
+        data-collapsed={collapsed ? "" : undefined}
+        data-variant={variant !== "sidebar" ? variant : undefined}
+        className={cx(inLayout ? "hidden md:flex" : "flex", "shrink-0", shell, className)}
+      >
+        <div
+          className={cx(
+            "flex min-h-0 shrink-0 flex-col transition-[width] duration-200 ease-out motion-reduce:transition-none",
+            collapsed ? "w-14" : "w-64",
+          )}
+        >
+          <div className={cx("shrink-0 py-2", collapsed ? "flex justify-center" : "px-2")}>{head({ icons: collapsed })}</div>
+          {searchOpts ? <div className={cx("shrink-0 pb-1", collapsed ? "flex justify-center" : "px-2")}>{searchRow({ icons: collapsed })}</div> : null}
+          <ScrollArea label={`${label} navigation`} className="flex-1" fade>
+            {nav({ sheet: false })}
+          </ScrollArea>
+          {hasFoot ? (
+            <div className={cx("shrink-0 border-t border-border py-2", collapsed ? "flex justify-center" : "px-2")}>
+              {foot({ icons: collapsed })}
+            </div>
+          ) : null}
+        </div>
+        {second ? (
+          <div className={cx("flex w-80 min-h-0 shrink-0 flex-col border-l border-border", variant === "sidebar" && "bg-background")}>{second}</div>
+        ) : null}
+      </div>
+      {searchOpts ? (
+        <CommandDialog
+          open={searching}
+          onOpenChange={setSearching}
+          hotkey={hotkey || undefined}
+          label={searchOpts.label ?? `Search ${title ?? label}`}
+          placeholder={searchOpts.placeholder ?? "Go to…"}
+          empty={searchOpts.empty ?? "Nothing by that name."}
+          items={searchItems}
+        />
+      ) : null}
+      {inLayout ? (
+        <Sheet
+          side="start"
+          open={ctx.mobileOpen}
+          onClose={() => ctx.setMobileOpen(false)}
+          title={title}
+          description={subtitle}
+          footer={user || footerActions?.length ? <div className="w-full">{foot({ icons: false, sheet: true })}</div> : null}
+        >
+          {ctx.mobileOpen ? (
+            sheetPanel && panel ? (
+              <div className="-mx-2 -my-2 grid gap-2">
+                <div className="px-2 pt-2">
+                  <Button variant="nav" size="md" onClick={() => setSheetPanel(false)}>
+                    <Icon name="arrow-left" className="shrink-0" />
+                    <span className="min-w-0 flex-1 truncate text-left">Back</span>
+                  </Button>
+                </div>
+                {panelIsNode ? panel : <PanelBody panel={panel} sheet onChoose={() => ctx.setMobileOpen(false)} />}
+              </div>
+            ) : (
+              <div className="-mx-2 -my-2 grid gap-2">
+                {headerActions ? <div className="flex flex-wrap items-center gap-1 px-2">{headerActions}</div> : null}
+                {searchOpts ? <div className="px-2">{searchRow({ icons: false, sheet: true })}</div> : null}
+                {switcher?.length ? (
+                  // The sheet's header already names the workspace: here the
+                  // switcher is just the way to change it.
+                  <div className="px-2">
+                    <Menu
+                      items={switcher}
+                      label={switcherLabel}
+                      align="start"
+                      className="min-h-11 w-full px-2"
+                      trigger={
+                        <>
+                          <Icon name="chevrons-up-down" className="shrink-0 text-muted-foreground" />
+                          <span className="min-w-0 flex-1 truncate text-left">{switcherLabel}</span>
+                        </>
+                      }
+                    />
+                  </div>
+                ) : null}
+                {panel ? (
+                  <div className="px-2">
+                    <Button variant="nav" size="md" onClick={() => setSheetPanel(true)}>
+                      <Icon name="list" className="shrink-0" />
+                      <span className="min-w-0 flex-1 truncate text-left">{(panelIsNode ? null : panel.title) ?? "Open list"}</span>
+                      <Icon name="chevron-right" className="shrink-0 text-muted-foreground" />
+                    </Button>
+                  </div>
+                ) : null}
+                {nav({ sheet: true })}
+              </div>
+            )
+          ) : null}
+        </Sheet>
+      ) : null}
+    </>
+  );
+}