@schlessera/brain-ui-react 0.35.0 → 0.37.0

package/src/components/graph/graph-controls.tsx

@@ -1,42 +1,49 @@
+import { useBrainUiRoot } from "../../root-context.js";
 import { useEffect, useRef, useState } from "react";
 import { Loader2, Search, SlidersHorizontal, X } from "lucide-react";
-import { api, type BrainSearchHit } from "../../lib/api-client.js";
+import type { BrainSearchHit } from "../../lib/api-client.js";
+import { useMediaQuery } from "../../hooks/use-media-query.js";
 import {
   useGraphStore,
   type DiscoveryColorBy,
   type LocalDirection,
   type SizeBy,
 } from "../../stores/graph-store.js";
-import { cn } from "../../lib/utils.js";
+import { Field, Rows, Segmented, ToggleRow, ValueRow } from "./graph-form.js";
+
+/** D22's ladder: the expanded rail, and D6's controls column, from 900. */
+export const LAPTOP_QUERY = "(min-width: 900px)";
+/** D6's four-pane rule: the right rail needs 1440. */
+export const WIDE_QUERY = "(min-width: 1440px)";
+
+const DEPTHS = [1, 2, 3] as const;
 
 /**
- * Per-mode option forms. Desktop: a floating card in the top-right of the
- * canvas. Mobile: a slide-up sheet behind a filter button (tap targets kept
- * at ≥44px). Only the options that matter per mode — everything else stays
- * out until a later phase earns it.
+ * Per-mode option forms. Below `laptop:` they live in a slide-up sheet
+ * behind a filter button (tap targets kept at >= 44px). From `laptop:` up
+ * the D6 controls column (`GraphControlsColumn`) owns `ControlsBody` and
+ * this overlay renders nothing — one picker in the DOM, never two.
+ *
+ * This is the container (S7): every option reads and writes the graph
+ * store; the form primitives are `graph-form.tsx`, on the kit.
  */
 export function GraphControls() {
   const [mobileOpen, setMobileOpen] = useState(false);
+  const laptop = useMediaQuery(LAPTOP_QUERY);
+  if (laptop) return null;
 
   return (
     <>
-      {/* Mobile: floating filter button */}
       <button
         onClick={() => setMobileOpen(true)}
-        className="absolute right-3 top-3 z-10 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-surface-overlay text-foreground shadow-lg md:hidden"
+        className="absolute right-3 top-3 z-10 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-surface-overlay text-foreground shadow-lg"
         title="Graph options"
       >
         <SlidersHorizontal className="h-4.5 w-4.5" />
       </button>
 
-      {/* Desktop: docked card */}
-      <div className="absolute right-4 top-4 z-10 hidden w-64 rounded-xl border border-border bg-surface-overlay/95 p-4 shadow-xl backdrop-blur md:block">
-        <ControlsBody />
-      </div>
-
-      {/* Mobile: bottom sheet */}
       {mobileOpen && (
-        <div className="fixed inset-0 z-40 md:hidden">
+        <div className="fixed inset-0 z-40">
           <div
             className="absolute inset-0 bg-background/60"
             onClick={() => setMobileOpen(false)}
@@ -60,19 +67,46 @@ export function GraphControls() {
   );
 }
 
-function ControlsBody() {
+/** The per-mode form. Shared by the phone sheet and the D6 column. */
+export function ControlsBody() {
   const mode = useGraphStore((s) => s.mode);
   return (
     <div className="flex flex-col gap-4">
       <SceneSearch />
       {mode === "local" && <LocalControls />}
       {mode === "discovery" && <DiscoveryControls />}
+      {(mode === "local" || mode === "discovery") && <ColourControls />}
       {mode === "clusters" && <ClustersControls />}
       {mode === "maintenance" && <MaintenanceControls />}
     </div>
   );
 }
 
+/** The four colourings, in the design's order. */
+export const COLOUR_RULES: { value: DiscoveryColorBy; label: string }[] = [
+  { value: "topic", label: "Topic" },
+  { value: "distance", label: "Distance" },
+  { value: "folder", label: "Folder" },
+  { value: "entity", label: "Entity" },
+];
+
+/**
+ * D6's `Label "Colour"` + `FilterRow` (topic · distance · folder · entity),
+ * for the two modes drawn around a focus node. Every rule is servable from
+ * what a node carries — `community`, `distance`, `path`, `type` — so none is
+ * disabled; a corpus with no computed topics colours everything neutral
+ * under "Topic" and the legend says so, rather than hiding the rule.
+ */
+function ColourControls() {
+  const colorBy = useGraphStore((s) => s.discoveryColorBy);
+  const setColorBy = useGraphStore((s) => s.setDiscoveryColorBy);
+  return (
+    <Field label="Colour">
+      <Segmented options={COLOUR_RULES} value={colorBy} onChange={(v) => setColorBy(v as DiscoveryColorBy)} />
+    </Field>
+  );
+}
+
 /** Highlights matches in the current scene — no refetch. */
 function SceneSearch() {
   const sceneQuery = useGraphStore((s) => s.sceneQuery);
@@ -113,17 +147,6 @@ function LocalControls() {
           onPick={(path) => setLocalParams({ center: path })}
         />
       </Field>
-      <Field label="Depth">
-        <Segmented
-          options={[
-            { value: "1", label: "1" },
-            { value: "2", label: "2" },
-            { value: "3", label: "3" },
-          ]}
-          value={String(local.depth)}
-          onChange={(v) => setLocalParams({ depth: Number(v) as 1 | 2 | 3 })}
-        />
-      </Field>
       <Field label="Direction">
         <Segmented
           options={[
@@ -135,6 +158,16 @@ function LocalControls() {
           onChange={(v) => setLocalParams({ direction: v as LocalDirection })}
         />
       </Field>
+      <Rows>
+        <ValueRow
+          label="Depth"
+          options={DEPTHS}
+          value={local.depth}
+          format={(d) => `${d} hop${d === 1 ? "" : "s"}`}
+          onChange={(depth) => setLocalParams({ depth })}
+          last
+        />
+      </Rows>
     </>
   );
 }
@@ -142,8 +175,6 @@ function LocalControls() {
 function DiscoveryControls() {
   const discovery = useGraphStore((s) => s.discovery);
   const setDiscoveryParams = useGraphStore((s) => s.setDiscoveryParams);
-  const colorBy = useGraphStore((s) => s.discoveryColorBy);
-  const setColorBy = useGraphStore((s) => s.setDiscoveryColorBy);
   const defaultRoot = useGraphStore((s) => s.meta?.defaultRoot ?? null);
 
   return (
@@ -173,16 +204,6 @@ function DiscoveryControls() {
           className="w-full accent-(--color-primary)"
         />
       </Field>
-      <Field label="Color by">
-        <Segmented
-          options={[
-            { value: "distance", label: "Distance" },
-            { value: "folder", label: "Folder" },
-          ]}
-          value={colorBy}
-          onChange={(v) => setColorBy(v as DiscoveryColorBy)}
-        />
-      </Field>
       {/* Direction is only meaningful with an explicit root: the default-root
           distances were walked once at index time. */}
     </>
@@ -206,13 +227,15 @@ function ClustersControls() {
           onChange={(v) => setSizeBy(v as SizeBy)}
         />
       </Field>
-      <Field label="Isolated notes">
-        <Toggle
+      <Rows>
+        <ToggleRow
           checked={clusters.isolates}
           onChange={(v) => setClustersParams({ isolates: v })}
-          label="Include notes without links"
+          label="Isolated notes"
+          subtitle="include notes without links"
+          last
         />
-      </Field>
+      </Rows>
     </>
   );
 }
@@ -225,28 +248,29 @@ function MaintenanceControls() {
   return (
     <>
       <Field label="Findings">
-        <div className="flex flex-col">
-          <Toggle
+        <Rows>
+          <ToggleRow
             checked={filters.orphans}
             onChange={(v) => setFilters({ orphans: v })}
             label="Orphans"
           />
-          <Toggle
+          <ToggleRow
             checked={filters.unreachable}
             onChange={(v) => setFilters({ unreachable: v })}
             label="Unreachable"
           />
-          <Toggle
+          <ToggleRow
             checked={filters.broken}
             onChange={(v) => setFilters({ broken: v })}
             label="Broken links"
           />
-          <Toggle
+          <ToggleRow
             checked={filters.stale}
             onChange={(v) => setFilters({ stale: v })}
             label="Stale notes"
+            last
           />
-        </div>
+        </Rows>
       </Field>
       <Field label={`Stale after ${maintenance.staleDays} days`}>
         <input
@@ -263,82 +287,6 @@ function MaintenanceControls() {
   );
 }
 
-// --- Small form primitives ---------------------------------------------------
-
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div>
-      <div className="mb-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-        {label}
-      </div>
-      {children}
-    </div>
-  );
-}
-
-function Segmented({
-  options,
-  value,
-  onChange,
-}: {
-  options: { value: string; label: string }[];
-  value: string;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <div className="flex rounded-lg border border-border bg-surface-raised p-0.5">
-      {options.map((opt) => (
-        <button
-          key={opt.value}
-          onClick={() => onChange(opt.value)}
-          className={cn(
-            "min-h-9 flex-1 rounded-md px-2 py-1.5 text-xs font-medium transition-colors",
-            value === opt.value
-              ? "bg-surface-overlay text-foreground"
-              : "text-muted-foreground hover:text-foreground"
-          )}
-        >
-          {opt.label}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-function Toggle({
-  checked,
-  onChange,
-  label,
-}: {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  label: string;
-}) {
-  return (
-    <button
-      role="switch"
-      aria-checked={checked}
-      onClick={() => onChange(!checked)}
-      className="flex min-h-9 w-full items-center justify-between gap-2 text-left text-xs text-foreground"
-    >
-      {label}
-      <span
-        className={cn(
-          "relative h-5 w-9 shrink-0 rounded-full transition-colors",
-          checked ? "bg-primary" : "bg-surface-raised border border-border"
-        )}
-      >
-        <span
-          className={cn(
-            "absolute top-0.5 h-4 w-4 rounded-full bg-foreground transition-transform",
-            checked ? "translate-x-4" : "translate-x-0.5"
-          )}
-        />
-      </span>
-    </button>
-  );
-}
-
 /**
  * Debounced note search backed by /api/brain/search — the graph twin of the
  * search modal's flow, inlined so picking a center/root never leaves the view.
@@ -352,12 +300,20 @@ function NotePicker({
   placeholder?: string;
   onPick: (path: string) => void;
 }) {
+  const root = useBrainUiRoot();
+  const api = root.api;
   const [query, setQuery] = useState("");
   const [editing, setEditing] = useState(false);
   const [results, setResults] = useState<BrainSearchHit[]>([]);
   const [loading, setLoading] = useState(false);
   const controllerRef = useRef<AbortController | null>(null);
+  const blurTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
+  useEffect(() => {
+    setQuery(""); setEditing(false); setResults([]);
+    const cleanup = () => clearTimeout(blurTimer.current);
+    return cleanup;
+  }, [root]);
   const trimmed = query.trim();
 
   useEffect(() => {
@@ -388,7 +344,7 @@ function NotePicker({
       clearTimeout(t);
       controllerRef.current?.abort();
     };
-  }, [editing, trimmed]);
+  }, [editing, trimmed, root, api]);
 
   return (
     <div className="relative">
@@ -402,7 +358,7 @@ function NotePicker({
           }}
           onBlur={() => {
             // Delay so a click on a result lands before the list unmounts.
-            setTimeout(() => setEditing(false), 150);
+            blurTimer.current = setTimeout(() => setEditing(false), 150);
           }}
           onChange={(e) => setQuery(e.target.value)}
           placeholder={placeholder}

package/src/components/graph/graph-form.tsx

@@ -0,0 +1,183 @@
+import { FilterRow, Label, ListRow, Surface, Toggle } from "@schlessera/brain-ui-kit";
+import { useId, type ReactNode } from "react";
+import { cn } from "../../lib/utils.js";
+
+/**
+ * The graph options form's primitives, on the kit (S7, the `graph`
+ * directory). `GraphControls` stays the container — every option reads and
+ * writes the graph store — and composes these. The canvas itself is WebGL
+ * and has no kit counterpart; the kit's `GraphView` is a static
+ * neighbourhood drawing for a chat answer, not a scene.
+ *
+ * A segmented choice is the kit `FilterRow`: one tab stop, ←→ and Home/End
+ * inside, activation following focus — which is what a mode switch is. A
+ * switch is the kit `Toggle`, named by the visible text beside it.
+ *
+ * D6 draws the depth and the switches as a `Surface pad={0}` of group
+ * `ListRow`s (`Rows`, `ToggleRow`, `ValueRow`): the row carries the handler
+ * and its own title names it, the same shape D5's Settings groups use.
+ */
+export function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div>
+      <div className="mb-1.5">
+        <Label text={label} />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export function Segmented({
+  options,
+  value,
+  onChange,
+}: {
+  options: { value: string; label: string }[];
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const active = Math.max(0, options.findIndex((o) => o.value === value));
+  return (
+    <FilterRow
+      items={options.map((o) => ({ label: o.label, onClick: () => onChange(o.value) }))}
+      active={active}
+      mono={false}
+    />
+  );
+}
+
+export function SwitchRow({
+  checked,
+  onChange,
+  label,
+}: {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label: string;
+}) {
+  const id = useId();
+  return (
+    <div className="flex min-h-11 w-full items-center justify-between gap-3 text-xs text-foreground">
+      <span id={id}>{label}</span>
+      <Toggle on={checked} tone="amber" labelledBy={id} onClick={() => onChange(!checked)} />
+    </div>
+  );
+}
+
+/** A `Surface pad={0}` of group `ListRow`s — D6's depth and switch block. */
+export function Rows({ children }: { children: ReactNode }) {
+  return <Surface pad={0}>{children}</Surface>;
+}
+
+/**
+ * A switch row inside `Rows`. The kit `ListRow`'s toggle is decorative and
+ * the row is the button, named by its title (the D5 pattern).
+ */
+export function ToggleRow({
+  checked,
+  onChange,
+  label,
+  subtitle,
+  tone = "amber",
+  last = false,
+}: {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label: string;
+  subtitle?: string;
+  tone?: "amber" | "teal" | "purple";
+  last?: boolean;
+}) {
+  return (
+    <ListRow
+      title={label}
+      subtitle={subtitle}
+      subMono={subtitle !== undefined}
+      toggle={checked}
+      toggleTone={tone}
+      last={last}
+      onClick={() => onChange(!checked)}
+    />
+  );
+}
+
+/**
+ * A switch the host cannot serve yet, drawn anyway (the sixth pass, §3b:
+ * "until that exists the control is drawn but disabled with its reason, the
+ * same rule the palette follows"). The reason prints in mono where the
+ * subtitle would go, and the switch is the kit `Toggle` in its disabled
+ * state — `aria-disabled`, out of the tab order, dimmed by the kit's own
+ * rule, never a bare opacity on the row. It keeps its role and its name,
+ * because a control the reader is told about should also be one a screen
+ * reader can find. The no-op handler is what gives it the role: the kit
+ * gates every operable trait on a handler, and "disabled" is a state of an
+ * operable switch, not the absence of one.
+ */
+export function DisabledToggleRow({
+  label,
+  reason,
+  tone = "amber",
+  last = false,
+}: {
+  label: string;
+  /** Mono, printed under the title: "needs provenance". */
+  reason: string;
+  tone?: "amber" | "teal" | "purple";
+  last?: boolean;
+}) {
+  const id = useId();
+  return (
+    <div
+      className={cn(
+        "flex min-h-14 w-full items-center justify-between gap-3 px-3.5 py-2.5",
+        !last && "border-b border-border"
+      )}
+      data-disabled-row=""
+    >
+      <div className="flex min-w-0 flex-col gap-1">
+        <span id={id} className="text-[13px] text-foreground">
+          {label}
+        </span>
+        <span className="font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground">{reason}</span>
+      </div>
+      <Toggle on={false} tone={tone} labelledBy={id} disabled onClick={noop} />
+    </div>
+  );
+}
+
+function noop() {}
+
+/**
+ * A row whose trailing mono value is the current choice and whose click
+ * steps to the next one — D6's `Depth · 2 hops`. The subtitle spells the
+ * ring so the step is not a surprise.
+ */
+export function ValueRow<T extends string | number>({
+  label,
+  options,
+  value,
+  format,
+  onChange,
+  last = false,
+}: {
+  label: string;
+  options: readonly T[];
+  value: T;
+  format: (value: T) => string;
+  onChange: (value: T) => void;
+  last?: boolean;
+}) {
+  const index = Math.max(0, options.indexOf(value));
+  const next = options[(index + 1) % options.length]!;
+  return (
+    <ListRow
+      title={label}
+      subtitle={options.map(format).join(" · ")}
+      subMono
+      value={format(value)}
+      last={last}
+      onClick={() => onChange(next)}
+    />
+  );
+}

package/src/components/graph/graph-maintenance.tsx

@@ -13,17 +13,9 @@ import { GraphEmptyState } from "./graph-empty-state.js";
 import { GraphCanvas } from "./graph-canvas-lazy.js";
 import { CenteredSpinner } from "./graph-spinner.js";
 import { matchScene } from "./lib/graph-helpers.js";
+import { useGraphTheme } from "./use-graph-theme.js";
 import { cn } from "../../lib/utils.js";
 
-/** Finding-type colors: dataviz status palette (warning/serious/critical) plus
- * the light end of the distance ramp for "stale" — checked against #0c0e12. */
-const FINDING_COLORS = {
-  orphan: "#fab219",
-  unreachable: "#ec835a",
-  broken: "#d03b3b",
-  stale: "#86b6ef",
-} as const;
-
 // --- Maintenance -------------------------------------------------------------
 
 type FindingKind = "orphan" | "unreachable" | "stale";
@@ -51,6 +43,9 @@ export function MaintenanceBody() {
   const openFile = useFileStore((s) => s.openFile);
   const setFilePanelOpen = useUIStore((s) => s.setFilePanelOpen);
   const listRef = useRef<HTMLDivElement>(null);
+  // The four lenses: the kit's `--bk-canvas-lens-*`, resolved for the scheme
+  // in force, so the list's headings and the canvas agree in both themes.
+  const lens = useGraphTheme().palette.lens;
 
   // One node per document, first matching section wins (a stale orphan is an
   // orphan); ring index encodes the finding kind.
@@ -122,7 +117,7 @@ export function MaintenanceBody() {
               hoveredId={hoveredId}
               matchIds={matchIds}
               nodeColor={(node) =>
-                FINDING_COLORS[(node as FindingNode).finding ?? "stale"]
+                lens[(node as FindingNode).finding ?? "stale"]
               }
               onSelect={select}
               onHover={hover}
@@ -143,7 +138,7 @@ export function MaintenanceBody() {
             <FindingSection
               title={`Orphans (${findings.orphans.length})`}
               hint="No links in or out."
-              color={FINDING_COLORS.orphan}
+              color={lens.orphan}
               nodes={findings.orphans}
               selectedId={selectedId}
               onSelect={select}
@@ -154,7 +149,7 @@ export function MaintenanceBody() {
             <FindingSection
               title={`Unreachable from root (${findings.unreachable.length})`}
               hint="No link path from the graph root reaches these."
-              color={FINDING_COLORS.unreachable}
+              color={lens.unreachable}
               nodes={findings.unreachable}
               selectedId={selectedId}
               onSelect={select}
@@ -166,7 +161,7 @@ export function MaintenanceBody() {
               <SectionHeading
                 title={`Broken links (${findings.brokenLinks.length})`}
                 hint="Wiki links whose target resolves to nothing."
-                color={FINDING_COLORS.broken}
+                color={lens.broken}
               />
               <FindingRows
                 empty={findings.brokenLinks.length === 0}
@@ -183,7 +178,7 @@ export function MaintenanceBody() {
             <FindingSection
               title={`Stale notes (${findings.stale.length})`}
               hint={`Untouched for over ${findings.staleDays} days.`}
-              color={FINDING_COLORS.stale}
+              color={lens.stale}
               nodes={findings.stale}
               subOf={(n) => `${(n as GraphNodePayload & { updated: string }).updated} · ${n.path}`}
               selectedId={selectedId}