@schlessera/brain-ui-react 0.8.0 → 0.9.0

package/src/components/chat/mermaid-viewer.tsx

@@ -0,0 +1,336 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Minus, Plus, Maximize2, X } from "lucide-react";
+import { sizeSvgForExport } from "../../lib/mermaid.js";
+import { ShareMenu } from "../share/share-menu.js";
+import { buildDiagramShareOptions } from "./mermaid-share.js";
+
+/**
+ * Full-screen, pan-and-zoom view of one diagram.
+ *
+ * Hand-rolled on pointer events rather than pulling a pan/zoom library: the
+ * whole surface is two transforms and the repo has no other dependency of that
+ * shape. Touch gestures work because the stage sets `touch-action: none` —
+ * the browser hands us every pointer instead of scrolling the page, which is
+ * also why no preventDefault is needed on the touch path. Wheel is the one
+ * exception: React's onWheel is passive, so it is bound manually.
+ *
+ * The SVG string is the same one the block already rendered, so opening the
+ * viewer costs no mermaid work. Both copies carry mermaid's ids; that is
+ * harmless because the markup is byte-identical — a `url(#id)` in either copy
+ * resolves to an identical marker.
+ */
+
+const MIN_SCALE = 0.15;
+const MAX_SCALE = 12;
+/** Small diagrams may grow to fill the stage, but blowing one up 8x reads as broken. */
+const MAX_FIT_SCALE = 2.5;
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+function clampScale(s: number): number {
+  return Math.min(MAX_SCALE, Math.max(MIN_SCALE, s));
+}
+
+export function MermaidViewer({
+  svg,
+  source,
+  onClose,
+}: {
+  svg: string;
+  source: string;
+  onClose: () => void;
+}) {
+  const stageRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  // Mermaid ships `width: 100%` + `max-width` on the svg, which has no
+  // intrinsic size to measure or to scale from. Reuse the export sizer to pin
+  // it to its viewBox pixels; the transform below does all the scaling.
+  const sizedSvg = useMemo(() => sizeSvgForExport(svg), [svg]);
+  const [scale, setScale] = useState(1);
+  const [offset, setOffset] = useState<Point>({ x: 0, y: 0 });
+  const [ready, setReady] = useState(false);
+
+  // Live gesture state lives in refs: pointer maths must not wait for a render.
+  const pointers = useRef(new Map<number, Point>());
+  const pinch = useRef<{ dist: number; center: Point } | null>(null);
+  const panFrom = useRef<{ pointer: Point; offset: Point } | null>(null);
+  const view = useRef({ scale: 1, offset: { x: 0, y: 0 } });
+  /** The scale `fit()` last produced — the baseline double-click toggles against. */
+  const fitScale = useRef(1);
+  /** Set once the user pans/zooms; after that nothing may re-fit behind their back. */
+  const touched = useRef(false);
+
+  const apply = useCallback((next: { scale: number; offset: Point }) => {
+    view.current = next;
+    setScale(next.scale);
+    setOffset(next.offset);
+  }, []);
+
+  /** Natural (untransformed) size of the diagram — offsetWidth ignores transforms. */
+  const natural = useCallback((): { w: number; h: number } | null => {
+    const el = contentRef.current;
+    if (!el || !el.offsetWidth || !el.offsetHeight) return null;
+    return { w: el.offsetWidth, h: el.offsetHeight };
+  }, []);
+
+  const fit = useCallback(() => {
+    const stage = stageRef.current;
+    const size = natural();
+    if (!stage || !size) return;
+    const pad = 32;
+    const sx = (stage.clientWidth - pad * 2) / size.w;
+    const sy = (stage.clientHeight - pad * 2) / size.h;
+    const next = clampScale(Math.min(MAX_FIT_SCALE, Math.min(sx, sy)));
+    fitScale.current = next;
+    apply({
+      scale: next,
+      offset: {
+        x: (stage.clientWidth - size.w * next) / 2,
+        y: (stage.clientHeight - size.h * next) / 2,
+      },
+    });
+  }, [apply, natural]);
+
+  useLayoutEffect(() => {
+    // Re-runs when the diagram itself changes, which happens while the message
+    // is still streaming — so a user who has already panned keeps their view.
+    if (!touched.current) fit();
+    setReady(true);
+  }, [fit, sizedSvg]);
+
+  /** Zoom about a stage-local anchor, so the point under the cursor/fingers stays put. */
+  const zoomAt = useCallback(
+    (factor: number, anchor: Point) => {
+      // Any deliberate zoom counts as touching the view — including the
+      // toolbar buttons and the wheel. Without this a diagram that is still
+      // streaming would re-fit itself out from under the reader's zoom.
+      touched.current = true;
+      const { scale: prev, offset: prevOffset } = view.current;
+      const next = clampScale(prev * factor);
+      if (next === prev) return;
+      const ratio = next / prev;
+      apply({
+        scale: next,
+        offset: {
+          x: anchor.x - (anchor.x - prevOffset.x) * ratio,
+          y: anchor.y - (anchor.y - prevOffset.y) * ratio,
+        },
+      });
+    },
+    [apply]
+  );
+
+  const zoomCenter = useCallback(
+    (factor: number) => {
+      const stage = stageRef.current;
+      if (!stage) return;
+      zoomAt(factor, { x: stage.clientWidth / 2, y: stage.clientHeight / 2 });
+    },
+    [zoomAt]
+  );
+
+  const stagePoint = (e: { clientX: number; clientY: number }): Point => {
+    const rect = stageRef.current?.getBoundingClientRect();
+    return { x: e.clientX - (rect?.left ?? 0), y: e.clientY - (rect?.top ?? 0) };
+  };
+
+  // Wheel must be bound manually: React's onWheel is passive, so it cannot
+  // preventDefault, and the page behind would scroll (or the browser would
+  // pinch-zoom the whole PWA on a ctrl+wheel trackpad gesture).
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      // A trackpad pinch arrives as ctrlKey+wheel with small deltas; a mouse
+      // wheel arrives as coarse notches. Both map to the same exponential.
+      const factor = Math.exp(-e.deltaY * (e.ctrlKey ? 0.01 : 0.0015));
+      zoomAt(factor, stagePoint(e));
+    };
+    stage.addEventListener("wheel", onWheel, { passive: false });
+    return () => stage.removeEventListener("wheel", onWheel);
+  }, [zoomAt]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+      else if (e.key === "+" || e.key === "=") zoomCenter(1.25);
+      else if (e.key === "-" || e.key === "_") zoomCenter(0.8);
+      else if (e.key === "0") fit();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose, zoomCenter, fit]);
+
+  // Lock body scroll while open.
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+
+  // Re-fit on rotation / resize only while the view is untouched, so a resize
+  // never yanks a diagram the user has deliberately panned into place.
+  useEffect(() => {
+    const onResize = () => {
+      if (!touched.current) fit();
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [fit]);
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    pointers.current.set(e.pointerId, stagePoint(e));
+    if (pointers.current.size === 2) {
+      const [a, b] = [...pointers.current.values()];
+      pinch.current = {
+        dist: Math.hypot(a.x - b.x, a.y - b.y),
+        center: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 },
+      };
+      panFrom.current = null;
+    } else if (pointers.current.size === 1) {
+      panFrom.current = { pointer: stagePoint(e), offset: view.current.offset };
+    }
+  };
+
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (!pointers.current.has(e.pointerId)) return;
+    const p = stagePoint(e);
+    pointers.current.set(e.pointerId, p);
+
+    if (pointers.current.size >= 2 && pinch.current) {
+      const [a, b] = [...pointers.current.values()];
+      const dist = Math.hypot(a.x - b.x, a.y - b.y);
+      const center = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+      if (pinch.current.dist > 0) {
+        touched.current = true;
+        // Pan and zoom in one step: the midpoint drift moves the diagram, the
+        // distance ratio scales it about that same midpoint.
+        const drift = {
+          x: center.x - pinch.current.center.x,
+          y: center.y - pinch.current.center.y,
+        };
+        // Committed through apply(), not written straight to the ref: two
+        // fingers moving in parallel (or a pinch already clamped at min/max)
+        // produce no scale change, and zoomAt() returns early — the drift
+        // would then be stranded in the ref and the diagram would not pan.
+        apply({
+          scale: view.current.scale,
+          offset: {
+            x: view.current.offset.x + drift.x,
+            y: view.current.offset.y + drift.y,
+          },
+        });
+        zoomAt(dist / pinch.current.dist, center);
+      }
+      pinch.current = { dist, center };
+      return;
+    }
+
+    if (panFrom.current) {
+      touched.current = true;
+      apply({
+        scale: view.current.scale,
+        offset: {
+          x: panFrom.current.offset.x + (p.x - panFrom.current.pointer.x),
+          y: panFrom.current.offset.y + (p.y - panFrom.current.pointer.y),
+        },
+      });
+    }
+  };
+
+  const endPointer = (e: React.PointerEvent) => {
+    pointers.current.delete(e.pointerId);
+    if (pointers.current.size >= 2) {
+      // Still pinching, but with a DIFFERENT pair (a stray third touch got
+      // lifted). Rebase the baseline, or the next move would compare the new
+      // pair's spread against the old pair's and jump.
+      const [a, b] = [...pointers.current.values()];
+      pinch.current = {
+        dist: Math.hypot(a.x - b.x, a.y - b.y),
+        center: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 },
+      };
+      return;
+    }
+    pinch.current = null;
+    if (pointers.current.size === 1) {
+      // Lifting one finger of a pinch must not teleport the diagram: re-anchor
+      // the pan to whichever pointer is still down.
+      const [remaining] = [...pointers.current.values()];
+      panFrom.current = { pointer: remaining, offset: view.current.offset };
+    } else if (pointers.current.size === 0) {
+      panFrom.current = null;
+    }
+  };
+
+  const onDoubleClick = (e: React.MouseEvent) => {
+    touched.current = true;
+    // Compared against the FIT scale, not against 1: a diagram that fits at
+    // 125% would otherwise read as "already zoomed" and double-click would
+    // re-fit it to exactly where it already was.
+    if (view.current.scale > fitScale.current * 1.05) fit();
+    else zoomAt(2, stagePoint(e));
+  };
+
+  const btn =
+    "flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground";
+
+  // Portalled to <body>: message bubbles animate through framer-motion, and a
+  // transformed ancestor becomes the containing block for `fixed`, which would
+  // pin this overlay to the bubble instead of the viewport.
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex flex-col bg-background/95 backdrop-blur-sm">
+      <div
+        className="flex items-center justify-between gap-2 border-b border-border/60 px-3 py-2"
+        style={{ paddingTop: "calc(0.5rem + env(safe-area-inset-top))" }}
+      >
+        <span className="px-1 font-[family-name:var(--font-mono)] text-xs tabular-nums text-muted-foreground">
+          {Math.round(scale * 100)}%
+        </span>
+        <div className="flex items-center gap-1">
+          <button type="button" title="Zoom out" onClick={() => zoomCenter(0.8)} className={btn}>
+            <Minus className="h-4 w-4" />
+          </button>
+          <button type="button" title="Zoom in" onClick={() => zoomCenter(1.25)} className={btn}>
+            <Plus className="h-4 w-4" />
+          </button>
+          <button type="button" title="Fit to screen" onClick={fit} className={btn}>
+            <Maximize2 className="h-4 w-4" />
+          </button>
+          <ShareMenu options={buildDiagramShareOptions(source)} title="Share diagram" />
+          <button type="button" title="Close" onClick={onClose} className={btn}>
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <div
+        ref={stageRef}
+        className="relative flex-1 cursor-grab touch-none overflow-hidden active:cursor-grabbing [&_svg]:max-w-none"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={endPointer}
+        onPointerCancel={endPointer}
+        onDoubleClick={onDoubleClick}
+      >
+        <div
+          ref={contentRef}
+          className="absolute left-0 top-0 origin-top-left"
+          style={{
+            transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+            visibility: ready ? "visible" : "hidden",
+          }}
+          dangerouslySetInnerHTML={{ __html: sizedSvg }}
+        />
+      </div>
+    </div>,
+    document.body
+  );
+}

package/src/components/files/file-viewer.tsx

@@ -13,6 +13,7 @@ import { splitFrontmatter } from "../../lib/frontmatter.js";
 import { stripMarkdown } from "../../lib/strip-markdown.js";
 import { inlineMermaidDiagrams, isMermaidPath } from "../../lib/mermaid.js";
 import { MermaidBlock } from "../chat/mermaid-block.js";
+import { buildDiagramShareOptions } from "../chat/mermaid-share.js";
 import type { FileContentResponse } from "@schlessera/brain-ui-sdk/protocol";
 
 export function FileViewer() {
@@ -296,6 +297,22 @@ function buildFileShareOptions(content: FileContentResponse, fileName: string):
     ];
   }
 
+  // A standalone .mmd/.mermaid file is a diagram, so it shares like one — the
+  // same PNG/PDF/SVG/source set the in-chat diagram offers, plus its source file.
+  if (content.kind === "text" && isMermaidPath(content.path)) {
+    const source = content.content ?? "";
+    return [
+      ...buildDiagramShareOptions(source, { filename: baseName(fileName) }),
+      {
+        id: "mmd-file",
+        label: "Share source file",
+        hint: "Original .mmd source",
+        run: async () =>
+          shareFile(new File([source], fileName, { type: "text/plain" }), { title: fileName }),
+      },
+    ];
+  }
+
   // Raw text / unknown: no share for V1 (user limited to previewable types).
   return [];
 }

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/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;
+  }
+}