@schlessera/brain-ui-react 0.12.0 → 0.13.0

package/src/components/dev/share-harness.tsx

@@ -0,0 +1,243 @@
+import { useCallback, useEffect, useState } from "react";
+import { AlertTriangle, RefreshCw, Send, Trash2 } from "lucide-react";
+import {
+  DEFAULT_SHARE_TARGET_PATH,
+  getShareStore,
+  type StoredShare,
+} from "@schlessera/brain-ui-sdk/share-target";
+
+/**
+ * Dev-only stand-in for the system share sheet.
+ *
+ * A real share needs an installed PWA, and on Android the intent filters are
+ * baked into the WebAPK at install time — so every manifest change costs a
+ * reinstall and a wait. This posts the same multipart body to the same path
+ * from inside the page, which the service worker handles through exactly the
+ * same code path: same handler, same stash, same redirect. Everything except
+ * the manifest registration itself can be verified here.
+ *
+ * Two things to watch:
+ *
+ *   - The page must be CONTROLLED by the service worker. If it is not, the POST
+ *     goes to the network instead, which is what the warning below is for.
+ *   - A `fetch()` is not a navigation. Its `mode` is "cors" rather than
+ *     "navigate", and it carries the session cookie, which a real cross-site
+ *     share never does. So this exercises the handler and the stash faithfully,
+ *     but never the browser rendering the landing page — and it cannot tell you
+ *     anything about how an UNAUTHENTICATED share behaves.
+ */
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function ShareHarness({
+  path = DEFAULT_SHARE_TARGET_PATH,
+}: {
+  path?: string;
+}) {
+  const [title, setTitle] = useState("");
+  const [text, setText] = useState("An article worth keeping");
+  const [url, setUrl] = useState("https://example.com/post");
+  const [files, setFiles] = useState<File[]>([]);
+  const [result, setResult] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState<StoredShare[]>([]);
+  const [controlled, setControlled] = useState(true);
+
+  const refresh = useCallback(async () => {
+    try {
+      setPending(await getShareStore().list());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof navigator === "undefined" || !("serviceWorker" in navigator)) {
+      setControlled(false);
+      return;
+    }
+    // Re-read on takeover: the interesting case is a page that starts
+    // uncontrolled and gains a worker, which is exactly when a fixed initial
+    // reading would leave the warning lying.
+    const update = () => setControlled(navigator.serviceWorker.controller !== null);
+    update();
+    navigator.serviceWorker.addEventListener("controllerchange", update);
+    void refresh();
+    return () =>
+      navigator.serviceWorker.removeEventListener("controllerchange", update);
+  }, [refresh]);
+
+  async function send() {
+    setError(null);
+    setResult(null);
+    const form = new FormData();
+    if (title) form.set("title", title);
+    if (text) form.set("text", text);
+    if (url) form.set("url", url);
+    for (const file of files) form.append("files", file);
+
+    try {
+      // The service worker answers with a 303 and fetch follows it, so the
+      // final URL is what the browser would have landed on after a real share
+      // — including the ?share= id.
+      const response = await fetch(path, { method: "POST", body: form });
+      if (response.ok) {
+        setResult(response.url);
+      } else {
+        setError(`${response.status} ${response.statusText}`);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      // Refresh either way: a failed send can still have stashed something.
+      await refresh();
+    }
+  }
+
+  async function drop(id: string) {
+    await getShareStore().delete(id);
+    await refresh();
+  }
+
+  return (
+    <div className="mx-auto flex max-w-2xl flex-col gap-6 p-6 text-foreground">
+      <header className="flex flex-col gap-1">
+        <h1 className="text-xl font-semibold">Share target harness</h1>
+        <p className="text-sm text-muted-foreground">
+          Posts a multipart share to <code>{path}</code> from inside the page.
+          The service worker handles it exactly as it would a real share.
+        </p>
+      </header>
+
+      {!controlled && (
+        <div className="flex items-start gap-2 rounded-lg border border-border bg-surface-raised p-3 text-sm">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+          <span>
+            No service worker controls this page, so the POST goes to the
+            network and the server answers with the no-worker fallback rather
+            than stashing anything. Load a production build (the worker is
+            disabled in dev) and reload once after it installs.
+          </span>
+        </div>
+      )}
+
+      <div className="flex flex-col gap-3">
+        <Field label="title" value={title} onChange={setTitle} />
+        <Field label="text" value={text} onChange={setText} />
+        <Field label="url" value={url} onChange={setUrl} />
+
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="text-muted-foreground">files</span>
+          <input
+            type="file"
+            multiple
+            onChange={(e) => setFiles(Array.from(e.target.files ?? []))}
+            className="text-sm"
+          />
+        </label>
+
+        <button
+          type="button"
+          onClick={() => void send()}
+          className="flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
+        >
+          <Send className="h-4 w-4" />
+          Share it
+        </button>
+      </div>
+
+      {error && (
+        <p className="rounded-lg border border-destructive/40 bg-destructive/10 p-3 text-sm">
+          {error}
+        </p>
+      )}
+
+      {result && (
+        <div className="flex flex-col gap-2 rounded-lg border border-border p-3 text-sm">
+          <span className="text-muted-foreground">Landed on</span>
+          <code className="break-all">{result}</code>
+          <button
+            type="button"
+            onClick={() => window.location.assign(result)}
+            className="self-start rounded-md border border-border px-3 py-1 text-sm"
+          >
+            Open it
+          </button>
+        </div>
+      )}
+
+      <section className="flex flex-col gap-2">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm font-medium">Stashed shares ({pending.length})</h2>
+          <button
+            type="button"
+            onClick={() => void refresh()}
+            className="flex items-center gap-1 text-sm text-muted-foreground"
+          >
+            <RefreshCw className="h-3.5 w-3.5" />
+            Refresh
+          </button>
+        </div>
+
+        {pending.length === 0 && (
+          <p className="text-sm text-muted-foreground">Nothing stashed.</p>
+        )}
+
+        {pending.map((share) => (
+          <div
+            key={share.id}
+            className="flex flex-col gap-1 rounded-lg border border-border p-3 text-sm"
+          >
+            <div className="flex items-center justify-between gap-2">
+              <code className="break-all text-xs text-muted-foreground">
+                {share.id}
+              </code>
+              <button
+                type="button"
+                onClick={() => void drop(share.id)}
+                aria-label="Delete stashed share"
+                className="text-muted-foreground"
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+            {share.title && <div>title: {share.title}</div>}
+            {share.text && <div>text: {share.text}</div>}
+            {share.url && <div>url: {share.url}</div>}
+            {share.files.map((file, i) => (
+              <div key={`${file.name}-${i}`} className="text-muted-foreground">
+                {file.name} ({file.type || "unknown"}, {formatBytes(file.size)})
+              </div>
+            ))}
+          </div>
+        ))}
+      </section>
+    </div>
+  );
+}
+
+function Field({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  onChange: (next: string) => void;
+}) {
+  return (
+    <label className="flex flex-col gap-1 text-sm">
+      <span className="text-muted-foreground">{label}</span>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="rounded-lg border border-border bg-surface px-3 py-2 text-sm"
+      />
+    </label>
+  );
+}

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

@@ -1,6 +1,7 @@
 import { FileWarning, Download } from "lucide-react";
 import type { FileContentResponse } from "@schlessera/brain-ui-sdk/protocol";
 import { API_BASE } from "../../lib/backend.js";
+import { ZoomableImage } from "../images/zoomable-image.js";
 
 export function FileViewerBinary({ content }: { content: FileContentResponse }) {
   const isImage = content.mime?.startsWith("image/");
@@ -11,7 +12,15 @@ export function FileViewerBinary({ content }: { content: FileContentResponse })
     return (
       <div className="flex h-full flex-col items-center justify-center gap-3 p-6">
         <div className="flex max-h-full max-w-full overflow-auto rounded-lg border border-border bg-surface p-2">
-          <img src={rawUrl} alt={content.path} className="max-h-[70vh] max-w-full object-contain" />
+          {/* Tap to open the zoom viewer: the panel is narrow, so the preview is
+              a thumbnail of anything larger than it. */}
+          <ZoomableImage
+            src={rawUrl}
+            alt={content.path}
+            className="max-h-[70vh] max-w-full cursor-zoom-in object-contain"
+            mime={content.mime}
+            bytes={content.size}
+          />
         </div>
         <div className="flex flex-wrap items-center justify-center gap-2 text-xs text-muted-foreground">
           <span>

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

@@ -14,6 +14,7 @@ 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 { buildImageShareOptions } from "../images/image-share.js";
 import type { FileContentResponse } from "@schlessera/brain-ui-sdk/protocol";
 
 export function FileViewer() {
@@ -182,9 +183,17 @@ function formatSize(bytes: number): string {
 function buildFileShareOptions(content: FileContentResponse, fileName: string): ShareOption[] {
   const rawUrl = `${API_BASE}/files/content?path=${encodeURIComponent(content.path)}&raw=1`;
 
-  // Single-action share for previewable images / PDFs: ship the bytes as-is.
   if (content.kind === "binary") {
-    if (content.mime?.startsWith("image/") || content.mime === "application/pdf") {
+    // An image gets both: the original bytes, and a lighter re-encode for
+    // messaging. The original is first, and nothing is downgraded unasked.
+    if (content.mime?.startsWith("image/")) {
+      return buildImageShareOptions(rawUrl, fileName, {
+        mime: content.mime,
+        bytes: content.size,
+      });
+    }
+    // A PDF ships as-is: there is no client-side recompression for one.
+    if (content.mime === "application/pdf") {
       return [
         {
           id: "file",

package/src/components/images/image-share.ts

@@ -0,0 +1,57 @@
+import { fetchAsFile, shareFile } from "../../lib/share.js";
+import {
+  SHARE_OPTIMIZED,
+  formatBytes,
+  optimizeImage,
+  optimizedFilename,
+} from "../../lib/image-optimize.js";
+import type { ShareOption } from "../share/share-menu.js";
+
+/**
+ * Share options for one image, used by both the file viewer's header menu and
+ * the full-screen image viewer.
+ *
+ * Two deliberate actions rather than one silently-processed payload:
+ *
+ * - **Original** ships the bytes untouched. This is the default and the first
+ *   entry; a generated image is worth what its pixels are worth.
+ * - **Optimized** re-encodes down toward a messaging-friendly size, and only
+ *   when that actually changes something — an image already inside the target
+ *   falls back to the original rather than being recompressed for show.
+ */
+export function buildImageShareOptions(
+  url: string,
+  filename: string,
+  opts: { mime?: string; bytes?: number } = {}
+): ShareOption[] {
+  const shareOriginal = async (): Promise<boolean> => {
+    const file = await fetchAsFile(url, filename, opts.mime);
+    return shareFile(file, { title: filename });
+  };
+
+  return [
+    {
+      id: "image-original",
+      label: "Share original",
+      hint: opts.bytes ? `Full quality · ${formatBytes(opts.bytes)}` : "Full quality",
+      run: shareOriginal,
+    },
+    {
+      id: "image-optimized",
+      label: "Share optimized",
+      hint: `JPEG, up to ${SHARE_OPTIMIZED.maxEdge}px · under ${formatBytes(SHARE_OPTIMIZED.maxBytes)}`,
+      run: async () => {
+        const original = await fetchAsFile(url, filename, opts.mime);
+        const result = await optimizeImage(original, SHARE_OPTIMIZED);
+        // null means "nothing to gain" (already small enough) or "could not be
+        // decoded". Either way the original is the right thing to send, and
+        // silently sending nothing would be worse than sending more bytes.
+        if (!result) return shareFile(original, { title: filename });
+        const file = new File([result.blob], optimizedFilename(filename), {
+          type: "image/jpeg",
+        });
+        return shareFile(file, { title: filename });
+      },
+    },
+  ];
+}

package/src/components/images/image-viewer.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { ShareMenu } from "../share/share-menu.js";
+import { ZoomViewer } from "../viewer/zoom-viewer.js";
+import { buildImageShareOptions } from "./image-share.js";
+
+/**
+ * Full-screen, pan-and-zoom view of one image — the same surface the mermaid
+ * viewer uses, so a diagram and a picture behave identically.
+ *
+ * `maxFitScale: 1` because raster pixels are finite: opening a 400px image at
+ * 250% would show nothing but interpolation. Zooming past 100% is still
+ * available, it just is not where the viewer starts.
+ */
+export function ImageViewer({
+  src,
+  alt,
+  filename,
+  mime,
+  bytes,
+  onClose,
+}: {
+  src: string;
+  alt?: string;
+  filename: string;
+  mime?: string;
+  bytes?: number;
+  onClose: () => void;
+}) {
+  // The natural size is unknown until the decode finishes, and `fit()` measures
+  // the DOM — so the load event is what tells the viewer to fit.
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <ZoomViewer
+      onClose={onClose}
+      refitKey={loaded ? src : null}
+      maxFitScale={1}
+      label={`Image viewer: ${filename}`}
+      actions={
+        <ShareMenu
+          options={buildImageShareOptions(src, filename, { mime, bytes })}
+          title="Share image"
+        />
+      }
+    >
+      {/* Not lazy: this only mounts once the reader has opened the viewer. */}
+      <img src={src} alt={alt ?? filename} onLoad={() => setLoaded(true)} draggable={false} />
+    </ZoomViewer>
+  );
+}

package/src/components/images/zoomable-image.tsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { Expand } from "lucide-react";
+import { imageFilenameFromSrc } from "../../lib/image-source.js";
+import { ImageViewer } from "./image-viewer.js";
+
+/**
+ * An image that opens into the full-screen zoom viewer when tapped — the same
+ * treatment a mermaid diagram gets, and for the same reason: the inline preview
+ * is only as wide as the viewport, which on a phone means a generated image is
+ * visible but not legible.
+ *
+ * Click-to-open rather than pinch-in-place: both the chat transcript and the
+ * file panel scroll, and a zoom surface embedded in a scroller has to steal the
+ * gestures that scrolling needs. Opening a dedicated stage keeps both intact.
+ *
+ * Sharing is deliberately NOT offered here. The hover affordance sits inside
+ * markdown prose and inside a file panel, both of which clip overflow, and a
+ * share menu that drops out of a clipping ancestor loses its lower entries. The
+ * viewer this opens carries the share menu, and the file viewer's own header
+ * has one too.
+ *
+ * The wrapper is a `span`, not a `div`: markdown puts images inside paragraphs,
+ * and a block element there is invalid nesting.
+ */
+export function ZoomableImage({
+  src,
+  alt,
+  className,
+  mime,
+  bytes,
+  toolbar = true,
+  imgProps,
+}: {
+  src: string;
+  alt?: string;
+  /** Classes for the inline `<img>` itself. */
+  className?: string;
+  mime?: string;
+  /** Byte size when known (the file viewer knows it; the chat does not). */
+  bytes?: number;
+  /**
+   * Hover expand button. Off for thumbnails, where a 28px button would cover
+   * the picture it is meant to act on — tapping the image still opens it.
+   */
+  toolbar?: boolean;
+  imgProps?: Omit<React.ComponentPropsWithoutRef<"img">, "src" | "alt" | "className">;
+}) {
+  const [zoomed, setZoomed] = useState(false);
+  const filename = imageFilenameFromSrc(src, mime);
+
+  return (
+    <span className="group relative inline-block max-w-full align-top">
+      <img
+        {...imgProps}
+        src={src}
+        alt={alt ?? ""}
+        // The whole image is the affordance — the hover button is pointer-only,
+        // and this has to work on a touch screen. Focusable and Enter/Space
+        // activated because for a thumbnail (toolbar off) this is the ONLY way
+        // in, so it cannot be pointer-only either.
+        role="button"
+        tabIndex={0}
+        onClick={() => setZoomed(true)}
+        onKeyDown={(e) => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          e.preventDefault();
+          setZoomed(true);
+        }}
+        className={className}
+      />
+      {toolbar && (
+        <button
+          type="button"
+          title="Open image"
+          onClick={() => setZoomed(true)}
+          className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-md bg-surface-raised/80 text-muted-foreground opacity-0 transition-all hover:bg-surface-overlay hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100"
+        >
+          <Expand className="h-3.5 w-3.5" />
+        </button>
+      )}
+      {zoomed && (
+        <ImageViewer
+          src={src}
+          alt={alt}
+          filename={filename}
+          mime={mime}
+          bytes={bytes}
+          onClose={() => setZoomed(false)}
+        />
+      )}
+    </span>
+  );
+}