@schlessera/brain-ui-react 0.35.0 → 0.37.0

package/src/lib/backend.ts

@@ -11,26 +11,36 @@
  * time, and ES imports are hoisted, so it would always capture the default
  * instead of what the shell configured.
  */
-import { uiConfig } from "../config.js";
+import { uiConfig, type BrainUiConfig } from "../config.js";
 
 /** Base URL for API calls. Empty backendUrl = same-origin "/api". */
-export function apiBase(): string {
-  return `${uiConfig.backendUrl}/api`;
+export function apiBaseFor(config: BrainUiConfig): string {
+  return `${config.backendUrl}/api`;
 }
 
 /** WebSocket URL. Derives wss/ws + host from backendUrl, else same-origin. */
-export function getWsUrl(): string {
-  if (uiConfig.backendUrl) {
-    const url = new URL("/ws", uiConfig.backendUrl);
+export function getWsUrlFor(
+  config: BrainUiConfig,
+  location?: Pick<Location, "protocol" | "host">,
+): string {
+  if (config.backendUrl) {
+    const url = new URL("/ws", config.backendUrl);
     url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
     return url.toString();
   }
   // Same-origin (default).
-  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-  return `${protocol}//${window.location.host}/ws`;
+  const origin = location ?? window.location;
+  const protocol = origin.protocol === "https:" ? "wss:" : "ws:";
+  return `${protocol}//${origin.host}/ws`;
 }
 
 /** Base URL for direct fetch calls (streaming endpoints). */
-export function getBackendUrl(path: string): string {
-  return `${uiConfig.backendUrl}${path}`;
+export function getBackendUrlFor(config: BrainUiConfig, path: string): string {
+  return `${config.backendUrl}${path}`;
 }
+
+// Existing consumers still address the default configuration. Root-owned
+// clients use the explicit helpers above, and keep their config in a closure.
+export function apiBase(): string { return apiBaseFor(uiConfig); }
+export function getWsUrl(): string { return getWsUrlFor(uiConfig); }
+export function getBackendUrl(path: string): string { return getBackendUrlFor(uiConfig, path); }

package/src/lib/diff.ts

@@ -1,10 +1,12 @@
-// Standalone text-diff engine behind the Edit tool's diff view: line-level
-// LCS with word-level refinement for single-line change pairs. Pure data —
-// no React; rendering stays in components/chat/tool-views.tsx.
-
-// ------------------------------------------------------------
-// Diff helpers — line-level LCS with word-level refinement
-// ------------------------------------------------------------
+// Standalone line-diff engine behind the Edit tool's diff view: a line-level
+// LCS that merges `old_string` / `new_string` into one signed listing. Pure
+// data — no React; rendering is the kit `DiffBlock` (tinted) in
+// components/chat/tool-views.tsx.
+//
+// There used to be a word-level refinement here (a changed-token highlight
+// inside a single-line change pair). The design's diff has no such thing —
+// the sign column and the row grounds are the whole vocabulary — so it went
+// with the seventh drop rather than surviving as an app-only decoration.
 
 type DiffOp<T> = { kind: "same" | "del" | "ins"; value: T };
 
@@ -50,53 +52,12 @@ function diffSeq<T>(
   return ops;
 }
 
-/** A word token, flagged when it differs from its counterpart line. */
-export type WordToken = { text: string; changed: boolean };
-
-/**
- * Token-level LCS for a single deleted/inserted line pair. Splitting on
- * `/(\s+)/` keeps the whitespace as its own tokens so we can reassemble the
- * line exactly. Unchanged tokens are shared between both sides.
- */
-function wordDiff(oldLine: string, newLine: string): { del: WordToken[]; ins: WordToken[] } {
-  const a = oldLine.split(/(\s+)/);
-  const b = newLine.split(/(\s+)/);
-  // Token-level LCS is O(words²); a pathological minified line would be slow.
-  // Above the cap, skip word refinement and flag the whole line as changed.
-  if (a.length * b.length > 10_000) {
-    return {
-      del: [{ text: oldLine, changed: true }],
-      ins: [{ text: newLine, changed: true }],
-    };
-  }
-  const ops = diffSeq(a, b);
-  const del: WordToken[] = [];
-  const ins: WordToken[] = [];
-  for (const op of ops) {
-    if (op.kind === "same") {
-      del.push({ text: op.value, changed: false });
-      ins.push({ text: op.value, changed: false });
-    } else if (op.kind === "del") {
-      del.push({ text: op.value, changed: true });
-    } else {
-      ins.push({ text: op.value, changed: true });
-    }
-  }
-  return { del, ins };
-}
-
-/** A rendered diff row. `tokens` is set only for word-refined single-line edits. */
-export type DiffRow = {
-  kind: "same" | "del" | "ins";
-  line: string;
-  tokens: WordToken[] | null;
-};
+/** A rendered diff row. */
+export type DiffRow = { kind: "same" | "del" | "ins"; line: string };
 
 /**
  * Merge `old_string`/`new_string` into a single diff: unchanged lines appear
- * once as neutral, deletions/insertions keep the red/green treatment. A change
- * block that is exactly one deleted line against one inserted line gets
- * word-level highlighting.
+ * once as context, deletions before insertions within each change block.
  */
 export function computeDiffRows(oldStr: string, newStr: string): DiffRow[] {
   const oldLines = oldStr.split("\n");
@@ -106,8 +67,8 @@ export function computeDiffRows(oldStr: string, newStr: string): DiffRow[] {
   // back to a naive "all old removed, all new added" diff.
   if (oldLines.length * newLines.length > 250_000) {
     return [
-      ...oldLines.map((line): DiffRow => ({ kind: "del", line, tokens: null })),
-      ...newLines.map((line): DiffRow => ({ kind: "ins", line, tokens: null })),
+      ...oldLines.map((line): DiffRow => ({ kind: "del", line })),
+      ...newLines.map((line): DiffRow => ({ kind: "ins", line })),
     ];
   }
   const ops = diffSeq(oldLines, newLines);
@@ -115,7 +76,7 @@ export function computeDiffRows(oldStr: string, newStr: string): DiffRow[] {
   let idx = 0;
   while (idx < ops.length) {
     if (ops[idx].kind === "same") {
-      rows.push({ kind: "same", line: ops[idx].value, tokens: null });
+      rows.push({ kind: "same", line: ops[idx].value });
       idx++;
       continue;
     }
@@ -127,14 +88,19 @@ export function computeDiffRows(oldStr: string, newStr: string): DiffRow[] {
       else inss.push(ops[idx].value);
       idx++;
     }
-    if (dels.length === 1 && inss.length === 1) {
-      const { del, ins } = wordDiff(dels[0], inss[0]);
-      rows.push({ kind: "del", line: dels[0], tokens: del });
-      rows.push({ kind: "ins", line: inss[0], tokens: ins });
-    } else {
-      for (const d of dels) rows.push({ kind: "del", line: d, tokens: null });
-      for (const s of inss) rows.push({ kind: "ins", line: s, tokens: null });
-    }
+    for (const d of dels) rows.push({ kind: "del", line: d });
+    for (const s of inss) rows.push({ kind: "ins", line: s });
   }
   return rows;
 }
+
+const SIGNS: Record<DiffRow["kind"], string> = { same: " ", del: "-", ins: "+" };
+
+/**
+ * The rows as the signed text the kit `DiffBlock` reads: `- ` / `+ ` / two
+ * spaces before each line, so a context line that itself starts with `-` or
+ * `+` cannot be read as a change.
+ */
+export function diffText(rows: DiffRow[]): string {
+  return rows.map((r) => `${SIGNS[r.kind]} ${r.line}`).join("\n");
+}

package/src/lib/light-dark.ts

@@ -0,0 +1,83 @@
+/**
+ * Reading a kit token as a VALUE, for the two places the app draws outside
+ * the DOM: the sigma graph canvas and the mermaid diagram theme.
+ *
+ * Every `--bk-*` token is `light-dark(<paper>, <dark>)` (kit D32), and
+ * `getComputedStyle` hands that expression back verbatim — a custom property
+ * computes to its specified value, and the browser only picks the half when a
+ * property that takes a colour consumes it. A canvas `fillStyle` never does:
+ * it silently rejects the string and keeps whatever it held before, which is
+ * how the graph's labels came to draw in the canvas default black on a dark
+ * ground. So the app splits the expression itself, on the scheme the
+ * element's `color-scheme` resolves to.
+ *
+ * Pure functions here; `hooks/use-color-scheme.ts` decides which half.
+ */
+
+import { LIGHT_TOKENS, TOKENS, type TokenName } from "@schlessera/brain-ui-kit";
+
+export type ColorScheme = "light" | "dark";
+
+/** Splits `a, b` at the top-level comma, so `rgba(1,2,3,.4)` stays whole. */
+function halves(inner: string): [string, string] | null {
+  let depth = 0;
+  for (let i = 0; i < inner.length; i++) {
+    const ch = inner[i];
+    if (ch === "(") depth++;
+    else if (ch === ")") depth--;
+    else if (ch === "," && depth === 0) return [inner.slice(0, i).trim(), inner.slice(i + 1).trim()];
+  }
+  return null;
+}
+
+/**
+ * The half of a `light-dark(<light>, <dark>)` expression for a scheme. A
+ * value that is not one — a bare hex, an rgba, a token the kit spells the
+ * same in both themes — comes back unchanged.
+ */
+export function resolveLightDark(value: string, scheme: ColorScheme): string {
+  const trimmed = value.trim();
+  const m = /^light-dark\((.*)\)$/s.exec(trimmed);
+  if (!m) return trimmed;
+  const pair = halves(m[1]!);
+  if (!pair) return trimmed;
+  return scheme === "light" ? pair[0] : pair[1];
+}
+
+/**
+ * Which half the document is showing: the root's computed `color-scheme`,
+ * with `light dark` (the kit's `data-theme="system"`) and anything else the
+ * browser reports (`normal`, `only light`) settled by `prefers-color-scheme`.
+ */
+export function documentColorScheme(): ColorScheme {
+  if (typeof document === "undefined" || typeof getComputedStyle !== "function") return "dark";
+  const declared = getComputedStyle(document.documentElement).colorScheme?.trim() ?? "";
+  const words = declared.split(/\s+/).filter((w) => w === "light" || w === "dark");
+  if (words.length === 1) return words[0] as ColorScheme;
+  return prefersDark() ? "dark" : "light";
+}
+
+export function prefersDark(): boolean {
+  try {
+    return (
+      typeof window !== "undefined" &&
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * A kit token's value in one scheme: the stylesheet's declaration, resolved,
+ * so a host that re-points a token is honoured; the kit's own table where
+ * there is no document (a test, a server) or the stylesheet is not loaded.
+ */
+export function readToken(name: TokenName, scheme: ColorScheme): string {
+  if (typeof document !== "undefined" && typeof getComputedStyle === "function") {
+    const declared = getComputedStyle(document.documentElement).getPropertyValue(`--bk-${name}`);
+    if (declared.trim()) return resolveLightDark(declared, scheme);
+  }
+  return resolveLightDark(scheme === "light" ? LIGHT_TOKENS[name] : TOKENS[name], scheme);
+}