@schlessera/brain-ui-react 0.7.2 → 0.9.0

package/src/components/share/share-menu.tsx

@@ -17,8 +17,17 @@ interface ShareMenuProps {
   title?: string;
   /** When provided, override the default icon button with a custom trigger. */
   className?: string;
-  /** Optional render-prop for a custom trigger; receives the click handler. */
-  renderTrigger?: (props: { onClick: () => void; busy: boolean }) => React.ReactNode;
+  /**
+   * Optional render-prop for a custom trigger. Receives the click handler plus
+   * the status icon, so a custom trigger keeps the busy/done/error feedback
+   * instead of silently swallowing it.
+   */
+  renderTrigger?: (props: {
+    onClick: () => void;
+    busy: boolean;
+    status: Status;
+    icon: React.ReactNode;
+  }) => React.ReactNode;
 }
 
 type Status = "idle" | "busy" | "done" | "error";
@@ -35,13 +44,18 @@ export function ShareMenu({ options, title = "Share", className, renderTrigger }
       if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false);
     };
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setOpen(false);
+      if (e.key !== "Escape") return;
+      // Captured and stopped: an Escape that dismisses this menu must not also
+      // reach whatever the menu is layered over (the diagram viewer closes on
+      // Escape too, and dismissing both at once reads as a bug).
+      e.stopPropagation();
+      setOpen(false);
     };
     document.addEventListener("mousedown", onDocClick);
-    document.addEventListener("keydown", onKey);
+    document.addEventListener("keydown", onKey, true);
     return () => {
       document.removeEventListener("mousedown", onDocClick);
-      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("keydown", onKey, true);
     };
   }, [open]);
 
@@ -87,7 +101,7 @@ export function ShareMenu({ options, title = "Share", className, renderTrigger }
   return (
     <div ref={wrapperRef} className={cn("relative inline-flex", className)}>
       {renderTrigger ? (
-        renderTrigger({ onClick: handleTrigger, busy: status === "busy" })
+        renderTrigger({ onClick: handleTrigger, busy: status === "busy", status, icon })
       ) : (
         <button
           onClick={handleTrigger}

package/src/index.ts

@@ -20,6 +20,11 @@ export { GraphPage } from "./components/graph/graph-page.js";
 // Markdown renderer (also useful standalone, e.g. for a dev kitchen sink).
 export { BrainMarkdown } from "./components/chat/brain-markdown.js";
 
+// Mermaid: standalone diagram block (streaming-safe) + the fence-to-SVG
+// inliner the share pipeline uses before handing markdown to the no-JS renderer.
+export { MermaidBlock } from "./components/chat/mermaid-block.js";
+export { inlineMermaidDiagrams, renderMermaidSvg } from "./lib/mermaid.js";
+
 // Stores + selectors the shell reads (service-worker busy check, deep links).
 export {
   useChatStore,

package/src/lib/client-environment.ts

@@ -0,0 +1,152 @@
+import type { ClientEnvironment } from "@schlessera/brain-ui-sdk/protocol";
+
+/**
+ * What this browser can actually do, measured rather than guessed.
+ *
+ * The agent is told this so it stops offering things the device can't do —
+ * "share that to WhatsApp" on a desktop with no share sheet, "take a photo of
+ * it" on a machine with no camera, "I'll check where you are" with
+ * geolocation unavailable. Every check is feature detection; nothing here
+ * parses a user-agent string, which is both unreliable and a fingerprinting
+ * surface we have no use for.
+ *
+ * Deliberately NOT included: anything that would prompt. Device presence is
+ * read from enumerateDevices(), which reports KINDS without permission (labels
+ * stay empty) — asking the reader for camera permission in order to write a
+ * system prompt would be a hostile trade.
+ */
+
+/** Marks the element whose width is the actual reading column. */
+export const READING_COLUMN_ATTR = "data-reading-column";
+
+/** Cached device inventory; undefined until the async probe has answered once. */
+let mediaKinds: { camera: boolean; microphone: boolean } | undefined;
+let probing = false;
+let deviceListenerBound = false;
+
+/**
+ * Ask which input devices exist. Cheap, permission-free, and async — so it is
+ * primed in the background and read synchronously at send time. The first
+ * message of a session may go out without the camera/mic facts rather than
+ * blocking on a device enumeration.
+ */
+export async function primeClientEnvironment(force = false): Promise<void> {
+  if ((mediaKinds && !force) || probing) return;
+  if (typeof navigator === "undefined") return;
+  const media = navigator.mediaDevices;
+  if (!media || typeof media.enumerateDevices !== "function") return;
+  probing = true;
+  try {
+    const devices = await media.enumerateDevices();
+    mediaKinds = {
+      camera: devices.some((d) => d.kind === "videoinput"),
+      microphone: devices.some((d) => d.kind === "audioinput"),
+    };
+    // A headset plugged in (or a webcam unplugged) mid-conversation changes
+    // the honest answer, so the cache follows the hardware.
+    if (!deviceListenerBound && typeof media.addEventListener === "function") {
+      deviceListenerBound = true;
+      media.addEventListener("devicechange", () => void primeClientEnvironment(true));
+    }
+  } catch {
+    // Enumeration blocked (permissions policy, older browser) — leave the
+    // capability unreported rather than guessing it exists.
+  } finally {
+    probing = false;
+  }
+}
+
+/** @internal Test seam — drops the cached device inventory. */
+export function resetClientEnvironmentCache(): void {
+  mediaKinds = undefined;
+  probing = false;
+  deviceListenerBound = false;
+}
+
+export function detectClientEnvironment(): ClientEnvironment | undefined {
+  if (typeof window === "undefined" || typeof navigator === "undefined") return undefined;
+  // Fire-and-forget: answers by the next message even if this one misses it.
+  void primeClientEnvironment();
+
+  const coarse = matches("(pointer: coarse)");
+  const env: ClientEnvironment = { formFactor: formFactor(coarse) };
+
+  if (coarse) env.touch = true;
+  if (matches("(display-mode: standalone)") || matches("(display-mode: fullscreen)")) {
+    env.standalone = true;
+  }
+
+  if (mediaKinds?.camera) env.camera = true;
+  if (mediaKinds?.microphone) env.microphone = true;
+  // getUserMedia and geolocation both require a secure context, which is also
+  // what the location tool needs.
+  if (navigator.geolocation && window.isSecureContext !== false) env.geolocation = true;
+
+  if (typeof navigator.share === "function") {
+    env.share = true;
+    // canShare({files}) needs a real File to answer honestly; a 1-byte probe
+    // is what the share paths themselves check before offering an image.
+    try {
+      const probe = new File([new Uint8Array(1)], "probe.png", { type: "image/png" });
+      if (typeof navigator.canShare === "function" && navigator.canShare({ files: [probe] })) {
+        env.shareFiles = true;
+      }
+    } catch {
+      // No File constructor / canShare threw — leave shareFiles unset.
+    }
+  }
+
+  const column = readingColumnWidth();
+  if (column) env.viewportWidth = column;
+
+  // Both are re-validated server-side against the platform's own locale and
+  // timezone databases; anything unrecognized is dropped there.
+  const locale = navigator.language;
+  if (locale && locale.length <= 35) env.locale = locale;
+  try {
+    const zone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    if (zone && zone.length <= 64) env.timeZone = zone;
+  } catch {
+    // Intl unavailable — omit.
+  }
+
+  return env;
+}
+
+/**
+ * Phone vs tablet from the SHORT edge of the screen, not from the current
+ * window width: a phone in landscape is 900+px wide and would otherwise be
+ * reported as a tablet, flipping the device description (and busting the
+ * prompt cache) every time the reader rotates.
+ */
+function formFactor(coarse: boolean): ClientEnvironment["formFactor"] {
+  if (!coarse) return "desktop";
+  const w = window.screen?.width ?? window.innerWidth ?? 0;
+  const h = window.screen?.height ?? window.innerHeight ?? 0;
+  const shortEdge = w && h ? Math.min(w, h) : w || h;
+  return shortEdge && shortEdge >= 600 ? "tablet" : "phone";
+}
+
+/**
+ * Width of the column text actually renders into — the chat layout caps it far
+ * below the window — rounded to 50px so that dragging a window edge does not
+ * rewrite the system prompt (and invalidate its cache) on every message.
+ */
+function readingColumnWidth(): number | undefined {
+  const el = document.querySelector(`[${READING_COLUMN_ATTR}]`);
+  const measured =
+    el?.getBoundingClientRect().width ||
+    window.innerWidth ||
+    document.documentElement?.clientWidth ||
+    0;
+  if (!measured) return undefined;
+  return Math.max(50, Math.round(measured / 50) * 50);
+}
+
+function matches(query: string): boolean {
+  try {
+    return typeof window.matchMedia === "function" && window.matchMedia(query).matches;
+  } catch {
+    return false;
+  }
+}

package/src/lib/mermaid-theme.ts

@@ -0,0 +1,246 @@
+/**
+ * Mermaid theme variables for the two surfaces a diagram can land on.
+ *
+ * Mermaid's stock "dark" theme is a blue-grey palette that reads as foreign
+ * next to the app's warm-neutral chrome, and its "neutral" theme is what the
+ * share renderer used to emit. Both are replaced by the "base" theme plus the
+ * variables below, so an in-app diagram and a shared PNG are recognisably the
+ * same product.
+ *
+ * Two rules kept the palette honest:
+ *   - Surfaces follow the tokens in theme.css, not approximations of them. A
+ *     chat diagram sits on `--color-surface` (#141619), not on the page
+ *     background, because MermaidBlock draws it on a raised plate.
+ *   - Multi-series colors reuse CATEGORICAL_SLOTS from the graph view, which
+ *     is the repo's one CVD-validated categorical palette. Slot order is the
+ *     CVD-safety mechanism there and is preserved here.
+ */
+import { CATEGORICAL_SLOTS, OTHER_COLOR } from "../components/graph/lib/graph-helpers.js";
+
+export type MermaidTheme = "dark" | "light";
+
+// These variables reach mermaid through initialize(), NOT through a
+// `%%{init: …}%%` directive: mermaid's directive path rewrites `'` to `"`
+// before parsing the JSON and drops any themeVariable containing a hyphen, so
+// a font stack cannot survive it. See the note in mermaid.ts.
+const SANS = '"Plus Jakarta Sans", system-ui, -apple-system, sans-serif';
+
+/** Ordered series colors, long enough for the 12-slot scales mermaid asks for. */
+const SERIES = [...CATEGORICAL_SLOTS, OTHER_COLOR, "#67b8e3", "#eab354", "#b197d4"];
+
+/** Expand a scale into the `${prefix}0..count-1` (or 1-based) shape mermaid wants. */
+function scale(prefix: string, count: number, oneBased = false): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (let i = 0; i < count; i++) {
+    out[`${prefix}${oneBased ? i + 1 : i}`] = SERIES[i % SERIES.length];
+  }
+  return out;
+}
+
+/**
+ * Dark: the in-app palette. Node fills use `--color-surface-overlay` so nodes
+ * sit a step above the block's own `--color-surface` plate, and borders use
+ * #3d4150 rather than `--color-border` (#2a2d35) — a 1px border at the token
+ * value all but disappears against the plate at diagram scale.
+ */
+const DARK: Record<string, string | boolean> = {
+  darkMode: true,
+  background: "#141619",
+  fontFamily: SANS,
+  fontSize: "14px",
+
+  primaryColor: "#1e2128",
+  primaryTextColor: "#e8e4df",
+  primaryBorderColor: "#3d4150",
+  secondaryColor: "#1a1d22",
+  secondaryTextColor: "#e8e4df",
+  secondaryBorderColor: "#3d4150",
+  tertiaryColor: "#0c0e12",
+  tertiaryTextColor: "#8a8691",
+  tertiaryBorderColor: "#2a2d35",
+
+  mainBkg: "#1e2128",
+  nodeBorder: "#3d4150",
+  nodeTextColor: "#e8e4df",
+  textColor: "#e8e4df",
+  lineColor: "#8a8691",
+  defaultLinkColor: "#8a8691",
+  titleColor: "#e09f3e",
+  edgeLabelBackground: "#141619",
+  clusterBkg: "#0c0e12",
+  clusterBorder: "#2a2d35",
+
+  noteBkgColor: "#1a1d22",
+  noteTextColor: "#e8e4df",
+  noteBorderColor: "#e09f3e",
+  errorBkgColor: "#2a1a1a",
+  errorTextColor: "#f87171",
+
+  // Sequence
+  actorBkg: "#1e2128",
+  actorBorder: "#3d4150",
+  actorTextColor: "#e8e4df",
+  actorLineColor: "#3d4150",
+  signalColor: "#8a8691",
+  signalTextColor: "#e8e4df",
+  labelBoxBkgColor: "#1a1d22",
+  labelBoxBorderColor: "#2a2d35",
+  labelTextColor: "#e8e4df",
+  loopTextColor: "#e8e4df",
+  activationBkgColor: "#1a1d22",
+  activationBorderColor: "#5bb5a2",
+  sequenceNumberColor: "#0c0e12",
+
+  // State / class / journey
+  labelColor: "#e8e4df",
+  altBackground: "#0c0e12",
+  classText: "#e8e4df",
+
+  // Gantt
+  sectionBkgColor: "#1a1d22",
+  altSectionBkgColor: "#141619",
+  sectionBkgColor2: "#1e2128",
+  gridColor: "#2a2d35",
+  taskBkgColor: "#2a2d35",
+  taskTextColor: "#e8e4df",
+  taskTextOutsideColor: "#e8e4df",
+  taskTextDarkColor: "#0c0e12",
+  taskBorderColor: "#3d4150",
+  doneTaskBkgColor: "#565b66",
+  doneTaskBorderColor: "#3d4150",
+  activeTaskBkgColor: "#e09f3e",
+  activeTaskBorderColor: "#e09f3e",
+  critBkgColor: "#d03b3b",
+  critBorderColor: "#d03b3b",
+  todayLineColor: "#5bb5a2",
+
+  // Pie
+  pieTitleTextColor: "#e8e4df",
+  pieSectionTextColor: "#0c0e12",
+  pieLegendTextColor: "#e8e4df",
+  pieStrokeColor: "#141619",
+  pieOuterStrokeColor: "#2a2d35",
+
+  // Quadrant / requirement / misc surfaces that don't inherit cleanly
+  quadrant1Fill: "#1e2128",
+  quadrant2Fill: "#1a1d22",
+  quadrant3Fill: "#141619",
+  quadrant4Fill: "#1e2128",
+  quadrantPointFill: "#e09f3e",
+  quadrantTitleFill: "#e8e4df",
+  quadrantInternalBorderStrokeFill: "#2a2d35",
+  quadrantExternalBorderStrokeFill: "#3d4150",
+};
+
+/**
+ * Light: what the share renderer emits. Tuned against the PNG/PDF template's
+ * own palette (`ui-server/src/render/template.ts`: #ffffff page, #f8fafc
+ * surface, #e5e7eb border, #1f2937 text) so a diagram doesn't look pasted in.
+ * The amber and teal are darkened from the app tokens — #e09f3e on white is a
+ * 1.9:1 line, unusable for edges or titles.
+ */
+const LIGHT: Record<string, string | boolean> = {
+  darkMode: false,
+  background: "#ffffff",
+  fontFamily: SANS,
+  fontSize: "14px",
+
+  primaryColor: "#f8fafc",
+  primaryTextColor: "#1f2937",
+  primaryBorderColor: "#c3c9d2",
+  secondaryColor: "#f3f4f6",
+  secondaryTextColor: "#1f2937",
+  secondaryBorderColor: "#c3c9d2",
+  tertiaryColor: "#ffffff",
+  tertiaryTextColor: "#6b7280",
+  tertiaryBorderColor: "#e5e7eb",
+
+  mainBkg: "#f8fafc",
+  nodeBorder: "#c3c9d2",
+  nodeTextColor: "#1f2937",
+  textColor: "#1f2937",
+  lineColor: "#6b7280",
+  defaultLinkColor: "#6b7280",
+  titleColor: "#9a6516",
+  edgeLabelBackground: "#ffffff",
+  clusterBkg: "#f3f4f6",
+  clusterBorder: "#d7dbe0",
+
+  noteBkgColor: "#fdf6e8",
+  noteTextColor: "#1f2937",
+  noteBorderColor: "#9a6516",
+  errorBkgColor: "#fdecec",
+  errorTextColor: "#b42323",
+
+  // Sequence
+  actorBkg: "#f8fafc",
+  actorBorder: "#c3c9d2",
+  actorTextColor: "#1f2937",
+  actorLineColor: "#c3c9d2",
+  signalColor: "#6b7280",
+  signalTextColor: "#1f2937",
+  labelBoxBkgColor: "#f3f4f6",
+  labelBoxBorderColor: "#d7dbe0",
+  labelTextColor: "#1f2937",
+  loopTextColor: "#1f2937",
+  activationBkgColor: "#f3f4f6",
+  activationBorderColor: "#2f7d6b",
+  sequenceNumberColor: "#ffffff",
+
+  // State / class / journey
+  labelColor: "#1f2937",
+  altBackground: "#f3f4f6",
+  classText: "#1f2937",
+
+  // Gantt
+  sectionBkgColor: "#f8fafc",
+  altSectionBkgColor: "#ffffff",
+  sectionBkgColor2: "#f3f4f6",
+  gridColor: "#e5e7eb",
+  taskBkgColor: "#e5e7eb",
+  taskTextColor: "#1f2937",
+  taskTextOutsideColor: "#1f2937",
+  taskTextDarkColor: "#1f2937",
+  taskBorderColor: "#c3c9d2",
+  doneTaskBkgColor: "#d7dbe0",
+  doneTaskBorderColor: "#c3c9d2",
+  activeTaskBkgColor: "#e0a75a",
+  activeTaskBorderColor: "#9a6516",
+  critBkgColor: "#e08a8a",
+  critBorderColor: "#b42323",
+  todayLineColor: "#2f7d6b",
+
+  // Pie
+  pieTitleTextColor: "#1f2937",
+  pieSectionTextColor: "#ffffff",
+  pieLegendTextColor: "#1f2937",
+  pieStrokeColor: "#ffffff",
+  pieOuterStrokeColor: "#d7dbe0",
+
+  // Quadrant
+  quadrant1Fill: "#f8fafc",
+  quadrant2Fill: "#f3f4f6",
+  quadrant3Fill: "#ffffff",
+  quadrant4Fill: "#f8fafc",
+  quadrantPointFill: "#9a6516",
+  quadrantTitleFill: "#1f2937",
+  quadrantInternalBorderStrokeFill: "#e5e7eb",
+  quadrantExternalBorderStrokeFill: "#d7dbe0",
+};
+
+const SERIES_SCALES: Record<string, string> = {
+  ...scale("pie", 12, true), // pie1..pie12
+  ...scale("cScale", 12), // cScale0..11 (journey, timeline, xychart)
+  ...scale("fillType", 8), // fillType0..7 (class/state/journey sections)
+  ...scale("git", 8), // git0..git7 (gitgraph branches)
+};
+
+const THEME_VARIABLES: Record<MermaidTheme, Record<string, string | boolean>> = {
+  dark: { ...DARK, ...SERIES_SCALES },
+  light: { ...LIGHT, ...SERIES_SCALES },
+};
+
+/** Theme variables for a target surface, as mermaid's `themeVariables` object. */
+export function mermaidThemeVariables(theme: MermaidTheme): Record<string, string | boolean> {
+  return THEME_VARIABLES[theme];
+}