@anchrd/intel-ui 0.3.0 → 0.5.0

package/src/app/app.tsx

@@ -1,62 +1,107 @@
-import { useMutation } from "@tanstack/react-query";
-import { Link, Outlet } from "@tanstack/react-router";
-import { BookOpen, LogOut, Network, Wrench } from "lucide-react";
-import { AppLogo } from "@/branding/branding.tsx";
-import { loginPath } from "@/data/intel-data-provider/intel-data-provider.ts";
+import { Link, Outlet, useRouterState } from "@tanstack/react-router";
+import { useRef, useState } from "react";
+import { AppSidebar } from "@/app/app-sidebar/app-sidebar.tsx";
+import { HeaderSearch } from "@/app/header-search/header-search.tsx";
+import { createSidebarPreferences } from "@/app/sidebar-preferences/sidebar-preferences.ts";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
+const sections = [
+  { path: "/knowledge", labelKey: "nav.knowledge" },
+  { path: "/flows", labelKey: "nav.flows" },
+  { path: "/tools", labelKey: "nav.tools" },
+] as const;
+
 export function App() {
-  const { data, i18n } = useIntelRouterContext();
-  const logout = useMutation({
-    mutationFn: () => data.logout(),
-    onSuccess: () => window.location.assign(loginPath()),
-  });
-  const navigation = [
-    { to: "/knowledge" as const, label: i18n.t("nav.knowledge"), icon: BookOpen },
-    { to: "/flows" as const, label: i18n.t("nav.flows"), icon: Network },
-    { to: "/tools" as const, label: i18n.t("nav.tools"), icon: Wrench },
-  ];
+  const { i18n } = useIntelRouterContext();
+  const pathname = useRouterState({ select: (state) => state.location.pathname });
+  const current = sections.find(
+    (section) => pathname === section.path || pathname.startsWith(`${section.path}/`),
+  );
+
+  // Read once: the stored preference is the starting point, after which the shell's own state is
+  // the truth. Re-reading on every render would fight the drag.
+  const preferences = useRef(createSidebarPreferences()).current;
+  const stored = useRef(preferences.read()).current;
+  const [open, setOpen] = useState(stored.open);
+  const [width, setWidth] = useState(stored.width);
 
   return (
-    <div className="min-h-screen bg-background text-foreground">
-      <aside className="fixed inset-y-0 left-0 z-20 flex w-64 flex-col border-r border-sidebar-border bg-sidebar p-4 text-sidebar-foreground">
-        <Link to="/knowledge" className="mb-8 flex items-center gap-3 px-2 font-semibold">
-          <AppLogo className="size-9" />
-          <span>{i18n.t("app.name")}</span>
-        </Link>
-        <nav aria-label={i18n.t("nav.primary")} className="space-y-1">
-          {navigation.map(({ to, label, icon: Icon }) => (
-            <Link
-              key={to}
-              to={to}
-              activeProps={{ "aria-current": "page" }}
-              className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring aria-[current=page]:bg-sidebar-accent aria-[current=page]:font-medium aria-[current=page]:text-sidebar-accent-foreground"
-            >
-              <Icon aria-hidden="true" className="size-4" />
-              {label}
-            </Link>
-          ))}
-        </nav>
-        <div className="mt-auto space-y-2">
-          {logout.isError ? (
-            <p role="alert" className="px-3 text-sm text-destructive">
-              {i18n.t("auth.signOutFailed")}
-            </p>
-          ) : null}
-          <button
-            type="button"
-            onClick={() => logout.mutate()}
-            disabled={logout.isPending}
-            className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm outline-none hover:bg-sidebar-accent focus-visible:ring-2 focus-visible:ring-sidebar-ring disabled:opacity-60"
-          >
-            <LogOut aria-hidden="true" className="size-4" />
-            {i18n.t("auth.signOut")}
-          </button>
+    // ⚠️ `h-svh` is what keeps the box inside the screen. The registry's wrapper only carries
+    // `min-h-svh`, so its height follows its content — and the inset, an `inset` variant with a
+    // margin all round, then stands 16px taller than the viewport at best and grows with a long
+    // document at worst. Both times the lower border and its two rounded corners end up under the
+    // fold and the whole page scrolls. With a definite height the inset stretches to
+    // `100svh - 16px`, and the overflow below belongs to the container around the outlet, which
+    // already carries `min-h-0 overflow-auto` for exactly that. Set here rather than in
+    // `components/ui/sidebar.tsx`: that is registry code and an edit in it is silently gone at the
+    // next sync.
+    <SidebarProvider
+      className="h-svh"
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        preferences.write({ open: next, width });
+      }}
+      style={{ "--sidebar-width": `${width}px` } as React.CSSProperties}
+    >
+      <AppSidebar
+        width={width}
+        onWidthChange={(next) => {
+          setWidth(next);
+          preferences.write({ open, width: next });
+        }}
+      />
+      {/* ⚠️ `min-w-0` is not cosmetic: the inset is a flex item beside the sidebar and carries
+          `min-width: auto`, so it never shrinks below its content's min-content width. One wide
+          child (a flow canvas, a table of raw JSON) would widen the page instead of scrolling
+          inside its own container. Learned in gate, GATE-76 D. */}
+      {/* `overflow-hidden` is the second half of the rounding: the box is rounded but nothing
+          clipped its children, so an opaque panel inside it — the flow editor's inspector carries
+          `bg-card` — painted its own square corner over the rounded one. Invisible in the light
+          theme, where card and background are the same white, and plain to see in the dark one.
+          Scrolling is unaffected: the container around the outlet below owns it. */}
+      <SidebarInset className="min-w-0 overflow-hidden md:border">
+        <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" aria-label={i18n.t("shell.toggleSidebar")} />
+          <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to="/knowledge">{i18n.t("app.name")}</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              {current ? (
+                <>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>{i18n.t(current.labelKey)}</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </>
+              ) : null}
+            </BreadcrumbList>
+          </Breadcrumb>
+          {/* The bar for area-owned actions. A screen renders into it through `ActionSlot`;
+              search is the shell's own, because it has to open from every screen alike and belongs
+              to none of them. It stays first, so a screen's actions line up to its right. */}
+          <div data-slot="header-actions" className="ml-auto flex items-center gap-2">
+            <HeaderSearch />
+          </div>
+        </header>
+        <div className="flex min-h-0 flex-1 flex-col overflow-auto">
+          <Outlet />
         </div>
-      </aside>
-      <main className="ml-64 min-h-screen">
-        <Outlet />
-      </main>
-    </div>
+      </SidebarInset>
+    </SidebarProvider>
   );
 }

package/src/app/header-search/header-search.tsx

@@ -0,0 +1,291 @@
+import type { Flow, ToolCapability } from "@anchrd/intel-contract";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { FileText, Search, Workflow, Wrench } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+const Kinds = ["knowledge", "flow", "tool"] as const;
+type Kind = (typeof Kinds)[number];
+
+// Enough to answer "where was that again" without turning the dialog into a result page.
+const ResultLimit = 8;
+
+const areaFor = { knowledge: "/knowledge", flow: "/flows", tool: "/tools" } as const;
+
+function isMac(): boolean {
+  return typeof navigator !== "undefined" && /mac/i.test(navigator.userAgent);
+}
+
+// ⚠️ The deliberate boundary of this ticket, named rather than hidden: Intel has a search endpoint
+// for Knowledge only, so Knowledge hits come from `searchKnowledge()` and the server decides both
+// what matches and what may be seen. Flows and Tools have no such endpoint — they are the same
+// authorized lists the screens render, narrowed here in the client.
+//
+// That is safe in the one direction that matters: `listFlows()` returns what the caller may see
+// (the flow repository's `listVisible`), and `listTools()` is one live `tools/list` with the user's
+// own portal token. The client narrows a permitted set; it can never widen one, and no permission
+// decision is taken here.
+//
+// When either list outgrows what a browser should hold, that is a new ticket for a search endpoint
+// — not a silent regression of this one.
+function matches(query: string, ...fields: (string | null)[]): boolean {
+  const needle = query.toLocaleLowerCase();
+  return fields.some((field) => field?.toLocaleLowerCase().includes(needle));
+}
+
+export function HeaderSearch() {
+  const { data, i18n } = useIntelRouterContext();
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const [text, setText] = useState("");
+  const [kind, setKind] = useState<Kind | null>(null);
+  const query = text.trim();
+  const restoreTo = useRef<HTMLElement | null>(null);
+
+  function change(next: boolean) {
+    if (next) restoreTo.current = document.activeElement as HTMLElement | null;
+    setOpen(next);
+  }
+
+  // The same combination opens and closes the dialog. Radix does not swallow the key while it is
+  // open, so one toggling listener on the window covers both directions from every screen.
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key.toLowerCase() !== "k" || !(event.metaKey || event.ctrlKey) || event.altKey) {
+        return;
+      }
+      event.preventDefault();
+      if (!open) restoreTo.current = document.activeElement as HTMLElement | null;
+      setOpen(!open);
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+
+  const shows = (candidate: Kind) => kind === null || kind === candidate;
+  // A filter that excludes a kind does not ask for it either: no request, and therefore no group
+  // that could show up empty.
+  const knowledge = useQuery({
+    queryKey: ["knowledge-search", query],
+    queryFn: () => data.searchKnowledge({ query, limit: ResultLimit }),
+    enabled: open && shows("knowledge") && query.length > 0,
+  });
+  // ⚠️ Deliberately the whole list, not one folder of the tree: a search that only saw the level
+  // someone happened to have open would miss the flow they are looking for. The sidebar tree asks
+  // per folder and keeps its own keys; only the Tools key is shared with the screen that fills it.
+  const flows = useQuery({
+    queryKey: ["flows"],
+    queryFn: () => data.listFlows(),
+    enabled: open && shows("flow") && query.length > 0,
+  });
+  const tools = useQuery({
+    queryKey: ["tools"],
+    queryFn: () => data.listTools(),
+    enabled: open && shows("tool") && query.length > 0,
+  });
+
+  const active = [
+    ...(shows("knowledge") ? [knowledge] : []),
+    ...(shows("flow") ? [flows] : []),
+    ...(shows("tool") ? [tools] : []),
+  ];
+  const searching = query.length > 0 && active.some((source) => source.isPending);
+  const failed = query.length > 0 && active.some((source) => source.isError);
+
+  const knowledgeHits = shows("knowledge") ? (knowledge.data?.items ?? []) : [];
+  const flowHits: Flow[] = shows("flow")
+    ? (flows.data?.items ?? [])
+        .filter((flow) => matches(query, flow.title, flow.description))
+        .slice(0, ResultLimit)
+    : [];
+  const toolHits: ToolCapability[] = shows("tool")
+    ? (tools.data?.items ?? [])
+        .filter((tool) => matches(query, tool.name, tool.title, tool.description))
+        .slice(0, ResultLimit)
+    : [];
+  const total = knowledgeHits.length + flowHits.length + toolHits.length;
+
+  function reach(hit: Kind, select: string) {
+    setOpen(false);
+    void navigate({ to: areaFor[hit], search: { select } });
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => change(true)}
+        aria-label={i18n.t("search.open")}
+        aria-keyshortcuts="Meta+K Control+K"
+        className="flex h-8 items-center gap-2 rounded-md border bg-background px-2.5 text-sm text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring sm:w-56"
+      >
+        <Search aria-hidden="true" className="size-4 shrink-0" />
+        <span className="truncate">{i18n.t("search.open")}</span>
+        {/* The hint repeats what `aria-keyshortcuts` already announces, so the accessible name
+            stays the label above rather than "Search ⌘K". */}
+        <kbd className="ml-auto hidden rounded border bg-muted px-1.5 font-sans text-[10px] sm:inline">
+          {isMac() ? "⌘K" : "Ctrl K"}
+        </kbd>
+      </button>
+
+      {/* ⚠️ Composed from `Dialog` and `Command` rather than from the registry's `CommandDialog`
+          for two reasons that both matter here: `CommandDialog` forwards its extra props to the
+          dialog root, so `shouldFilter` would never reach cmdk, and it renders its title outside
+          `DialogContent`, where it does not name the dialog for a screen reader. */}
+      <Dialog open={open} onOpenChange={change}>
+        <DialogContent
+          className="overflow-hidden p-0"
+          // ⚠️ Radix hands focus back to the dialog's trigger. This dialog is usually opened by a
+          // shortcut and has no trigger at all, so without this the caret would land on the body
+          // and a keyboard user would start over at the top of the page.
+          onCloseAutoFocus={(event) => {
+            event.preventDefault();
+            restoreTo.current?.focus();
+          }}
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>{i18n.t("search.title")}</DialogTitle>
+            <DialogDescription>{i18n.t("search.description")}</DialogDescription>
+          </DialogHeader>
+          {/* Every source has already decided what matches — the server for Knowledge, the client
+              filter above for the two lists. Letting cmdk filter again would hide rows the server
+              returned, because a row's value is its identity rather than its text. */}
+          <Command shouldFilter={false}>
+            <CommandInput
+              value={text}
+              onValueChange={setText}
+              placeholder={i18n.t("search.placeholder")}
+            />
+            <fieldset className="flex flex-wrap gap-1 border-b px-3 py-2">
+              <legend className="sr-only">{i18n.t("search.filter")}</legend>
+              {[null, ...Kinds].map((candidate) => (
+                <button
+                  key={candidate ?? "all"}
+                  type="button"
+                  aria-pressed={kind === candidate}
+                  onClick={() => setKind(candidate)}
+                  // ⚠️ cmdk turns Enter into "open the highlighted result" on the command root,
+                  // without looking at where the key came from. Unstopped, Enter on a filter would
+                  // leave the dialog for a hit instead of narrowing the list.
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+                  }}
+                  className="rounded-full border px-2.5 py-1 text-xs outline-none aria-pressed:bg-primary aria-pressed:text-primary-foreground focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  {i18n.t(candidate === null ? "search.all" : `search.kind.${candidate}`)}
+                </button>
+              ))}
+            </fieldset>
+            <CommandList>
+              {query.length === 0 ? (
+                <p className="py-6 text-center text-sm text-muted-foreground">
+                  {i18n.t("search.hint")}
+                </p>
+              ) : null}
+              {/* Three states that never read as one another: still asking, could not ask, and asked
+              with nothing to show. A failing source is an alert even when another one answered. */}
+              {failed ? (
+                <div role="alert" className="space-y-3 px-3 py-6 text-center text-sm">
+                  <p className="text-destructive">{i18n.t("search.failed")}</p>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      for (const source of active) if (source.isError) void source.refetch();
+                    }}
+                    className="rounded-md border px-2.5 py-1 text-xs outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    {i18n.t("common.retry")}
+                  </button>
+                </div>
+              ) : null}
+              {searching ? (
+                <p role="status" className="py-6 text-center text-sm text-muted-foreground">
+                  {i18n.t("search.searching")}
+                </p>
+              ) : null}
+              {!searching && !failed && query.length > 0 && total === 0 ? (
+                <CommandEmpty>{i18n.t("search.empty", { query })}</CommandEmpty>
+              ) : null}
+
+              {knowledgeHits.length > 0 ? (
+                <CommandGroup heading={i18n.t("search.kind.knowledge")}>
+                  {knowledgeHits.map((citation) => (
+                    <CommandItem
+                      key={`${citation.nodeId}:${citation.versionId}`}
+                      value={`knowledge:${citation.nodeId}:${citation.versionId}`}
+                      onSelect={() => reach("knowledge", citation.nodeId)}
+                    >
+                      <FileText aria-hidden="true" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate">{citation.title}</span>
+                        <span className="block truncate text-xs text-muted-foreground">
+                          {citation.passage}
+                        </span>
+                      </span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ) : null}
+              {flowHits.length > 0 ? (
+                <CommandGroup heading={i18n.t("search.kind.flow")}>
+                  {flowHits.map((flow) => (
+                    <CommandItem
+                      key={flow.id}
+                      value={`flow:${flow.id}`}
+                      onSelect={() => reach("flow", flow.id)}
+                    >
+                      <Workflow aria-hidden="true" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate">{flow.title}</span>
+                        {flow.description ? (
+                          <span className="block truncate text-xs text-muted-foreground">
+                            {flow.description}
+                          </span>
+                        ) : null}
+                      </span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ) : null}
+              {toolHits.length > 0 ? (
+                <CommandGroup heading={i18n.t("search.kind.tool")}>
+                  {toolHits.map((tool) => (
+                    <CommandItem
+                      key={tool.name}
+                      value={`tool:${tool.name}`}
+                      onSelect={() => reach("tool", tool.name)}
+                    >
+                      <Wrench aria-hidden="true" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate">{tool.title ?? tool.name}</span>
+                        <span className="block truncate font-mono text-xs text-muted-foreground">
+                          {tool.name}
+                        </span>
+                      </span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ) : null}
+            </CommandList>
+          </Command>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/app/sidebar-preferences/sidebar-preferences.ts

@@ -0,0 +1,68 @@
+import type {
+  SidebarPreferenceDeps,
+  SidebarPreferenceStore,
+  SidebarPreferences,
+} from "./sidebar-preferences.types.ts";
+
+// Below the minimum the tree is unreadable and the sidebar cannot be dragged back open by eye;
+// above the maximum the content box stops being the larger half. Both are the reason the drag
+// exists at all, so neither is configurable.
+export const MinSidebarWidth = 180;
+export const MaxSidebarWidth = 520;
+export const DefaultSidebarWidth = 256;
+
+const storageKey = "intel.sidebar";
+const defaults: SidebarPreferences = { open: true, width: DefaultSidebarWidth };
+
+export function clampSidebarWidth(width: number): number {
+  if (!Number.isFinite(width)) return DefaultSidebarWidth;
+  return Math.min(MaxSidebarWidth, Math.max(MinSidebarWidth, Math.round(width)));
+}
+
+function browserStorage(): Pick<Storage, "getItem" | "setItem"> | null {
+  // Reading `localStorage` throws outright in a few privacy modes, so the guard is a try, not a
+  // typeof check. Losing the preference is acceptable; losing the shell is not.
+  try {
+    return typeof window === "undefined" ? null : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+// The shell's own client state: not server data, so it stays out of TanStack Query, but it has to
+// survive a page change — which in a SPA includes a full reload — so it is written through.
+export function createSidebarPreferences(deps: SidebarPreferenceDeps = {}): SidebarPreferenceStore {
+  const storage = deps.storage === undefined ? browserStorage() : deps.storage;
+
+  return {
+    read() {
+      let raw: string | null = null;
+      try {
+        raw = storage?.getItem(storageKey) ?? null;
+      } catch {
+        return defaults;
+      }
+      if (raw === null) return defaults;
+      let parsed: unknown;
+      try {
+        parsed = JSON.parse(raw);
+      } catch {
+        return defaults;
+      }
+      if (typeof parsed !== "object" || parsed === null) return defaults;
+      const value = parsed as Partial<SidebarPreferences>;
+      return {
+        open: typeof value.open === "boolean" ? value.open : defaults.open,
+        width: clampSidebarWidth(typeof value.width === "number" ? value.width : defaults.width),
+      };
+    },
+    write(preferences) {
+      try {
+        storage?.setItem(
+          storageKey,
+          JSON.stringify({ open: preferences.open, width: clampSidebarWidth(preferences.width) }),
+        );
+      } catch {}
+    },
+  };
+}

package/src/app/sidebar-preferences/sidebar-preferences.types.ts

@@ -0,0 +1,15 @@
+export interface SidebarPreferences {
+  open: boolean;
+  width: number;
+}
+
+export interface SidebarPreferenceStore {
+  read(): SidebarPreferences;
+  write(preferences: SidebarPreferences): void;
+}
+
+export interface SidebarPreferenceDeps {
+  // A `null` storage disables persistence. `undefined` means "use the browser's", which is not the
+  // same thing: a test passes null, a browser without localStorage produces null on its own.
+  storage?: Pick<Storage, "getItem" | "setItem"> | null;
+}

package/src/app/sidebar-resize-handle/sidebar-resize-handle.tsx

@@ -0,0 +1,86 @@
+import { useRef } from "react";
+import {
+  clampSidebarWidth,
+  MaxSidebarWidth,
+  MinSidebarWidth,
+} from "@/app/sidebar-preferences/sidebar-preferences.ts";
+import { cn } from "@/lib/utils";
+
+const KeyboardStep = 16;
+
+// The registry has no resizable sidebar, so this is the one piece of the shell that is not a
+// primitive. It is an ARIA window splitter rather than a bare div: a drag-only handle exists for
+// nobody on a keyboard, and the tree behind it is the entire navigation.
+export function SidebarResizeHandle({
+  width,
+  label,
+  onWidthChange,
+}: {
+  width: number;
+  label: string;
+  onWidthChange(width: number): void;
+}) {
+  const drag = useRef<{ pointerId: number; startX: number; startWidth: number } | null>(null);
+
+  return (
+    // The WAI-ARIA window-splitter pattern is a focusable separator carrying a value. The rule's
+    // suggested `<hr>` cannot take focus, which would remove the keyboard operation this handle
+    // exists to provide.
+    // biome-ignore lint/a11y/useSemanticElements: a focusable window splitter cannot be an <hr>
+    <button
+      type="button"
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={label}
+      aria-valuenow={width}
+      aria-valuemin={MinSidebarWidth}
+      aria-valuemax={MaxSidebarWidth}
+      className={cn(
+        "absolute inset-y-0 -right-1 z-20 hidden w-2 cursor-col-resize outline-none md:block",
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2",
+        "hover:after:bg-sidebar-ring focus-visible:after:bg-sidebar-ring",
+        "focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        // Collapsed there is no sidebar left to drag. The shell already unmounts the whole panel
+        // then; this keeps the handle from reappearing should it ever be mounted collapsed.
+        "group-data-[state=collapsed]:hidden",
+      )}
+      onPointerDown={(event) => {
+        drag.current = {
+          pointerId: event.pointerId,
+          startX: event.clientX,
+          startWidth: width,
+        };
+        event.currentTarget.setPointerCapture(event.pointerId);
+      }}
+      onPointerMove={(event) => {
+        const active = drag.current;
+        if (!active || active.pointerId !== event.pointerId) return;
+        // Measured against the width the drag started from, never against the live value: reading
+        // back the clamped width would make the handle drift away from the cursor at the limits.
+        onWidthChange(clampSidebarWidth(active.startWidth + (event.clientX - active.startX)));
+      }}
+      onPointerUp={(event) => {
+        drag.current = null;
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }}
+      onPointerCancel={() => {
+        drag.current = null;
+      }}
+      onKeyDown={(event) => {
+        const next =
+          event.key === "ArrowLeft"
+            ? width - KeyboardStep
+            : event.key === "ArrowRight"
+              ? width + KeyboardStep
+              : event.key === "Home"
+                ? MinSidebarWidth
+                : event.key === "End"
+                  ? MaxSidebarWidth
+                  : null;
+        if (next === null) return;
+        event.preventDefault();
+        onWidthChange(clampSidebarWidth(next));
+      }}
+    />
+  );
+}