@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/assistant-ui/elements/mermaid-diagram.tsx

@@ -0,0 +1,340 @@
+"use client";
+
+import { renderMermaidSVG } from "beautiful-mermaid";
+import { Maximize2, Minus, Plus, RotateCcw, X } from "lucide-react";
+import {
+  type FC,
+  type ReactNode,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { sanitizeMermaidSvg } from "../../chat/sanitize-mermaid-svg";
+import { cn } from "../../chat/gallery-thread/cn";
+
+export type MermaidDiagramProps = {
+  code: string;
+  className?: string;
+  /** Renders a skeleton instead of the diagram while `true`. */
+  streaming?: boolean;
+};
+
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 4;
+
+type MermaidZoomProps = {
+  svg: string;
+  children: ReactNode;
+};
+
+function MermaidZoom({ svg, children }: MermaidZoomProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [transform, setTransform] = useState({ x: 0, y: 0, scale: 1 });
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const drag = useRef<{
+    startX: number;
+    startY: number;
+    originX: number;
+    originY: number;
+  } | null>(null);
+  const transformRef = useRef(transform);
+  transformRef.current = transform;
+
+  const zoomSvg = useMemo(
+    () =>
+      sanitizeMermaidSvg(
+        svg
+          .replace(/id="([^"]+)"/g, 'id="$1-zoom"')
+          .replace(/url\(#([^)]+)\)/g, "url(#$1-zoom)")
+          .replace(/(href|xlink:href)="#([^"]+)"/g, '$1="#$2-zoom"'),
+      ),
+    [svg],
+  );
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    setTransform({ x: 0, y: 0, scale: 1 });
+    triggerRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        handleClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const focusables = overlayRef.current?.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      );
+      const first = focusables?.[0];
+      const last = focusables?.[focusables.length - 1];
+      if (!first || !last) return;
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, handleClose]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) closeRef.current?.focus();
+  }, [isOpen]);
+
+  const zoomBy = useCallback((factor: number, cx?: number, cy?: number) => {
+    setTransform((t) => {
+      const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, t.scale * factor));
+      const ratio = scale / t.scale;
+      if (cx === undefined || cy === undefined) {
+        const viewport = viewportRef.current;
+        cx = (viewport?.clientWidth ?? 0) / 2;
+        cy = (viewport?.clientHeight ?? 0) / 2;
+      }
+      return {
+        scale,
+        x: cx - (cx - t.x) * ratio,
+        y: cy - (cy - t.y) * ratio,
+      };
+    });
+  }, []);
+
+  const onWheel = useCallback(
+    (e: React.WheelEvent) => {
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+      const rect = viewport.getBoundingClientRect();
+      zoomBy(
+        Math.exp(-e.deltaY * 0.0015),
+        e.clientX - rect.left,
+        e.clientY - rect.top,
+      );
+    },
+    [zoomBy],
+  );
+
+  const onPointerDown = useCallback((e: React.PointerEvent) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const t = transformRef.current;
+    drag.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      originX: t.x,
+      originY: t.y,
+    };
+  }, []);
+
+  const onPointerMove = useCallback((e: React.PointerEvent) => {
+    const d = drag.current;
+    if (!d) return;
+    setTransform((t) => ({
+      ...t,
+      x: d.originX + e.clientX - d.startX,
+      y: d.originY + e.clientY - d.startY,
+    }));
+  }, []);
+
+  const onPointerUp = useCallback(() => {
+    drag.current = null;
+  }, []);
+
+  return (
+    <div
+      data-slot="mermaid-zoom-wrap"
+      className="aui-mermaid-zoom-wrap group/mermaid relative"
+    >
+      {children}
+      <button
+        ref={triggerRef}
+        type="button"
+        data-slot="mermaid-zoom-trigger"
+        aria-label="Expand diagram"
+        onClick={() => setIsOpen(true)}
+        className="aui-mermaid-zoom-trigger text-muted-foreground hover:text-foreground hover:border-muted-foreground/70 border-border bg-background absolute top-2 end-2 cursor-pointer rounded-md border p-1.5 opacity-0 transition group-hover/mermaid:opacity-100 focus-visible:opacity-100"
+      >
+        <Maximize2 className="size-3.5" />
+      </button>
+      {isOpen &&
+        createPortal(
+          <div
+            ref={overlayRef}
+            data-slot="mermaid-zoom-overlay"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Diagram"
+            className="aui-mermaid-zoom-overlay fade-in animate-in bg-background fixed inset-0 z-50 duration-200"
+          >
+            <div
+              ref={viewportRef}
+              className="aui-mermaid-zoom-viewport h-full w-full cursor-grab touch-none overflow-hidden active:cursor-grabbing"
+              onWheel={onWheel}
+              onPointerDown={onPointerDown}
+              onPointerMove={onPointerMove}
+              onPointerUp={onPointerUp}
+              onPointerCancel={onPointerUp}
+            >
+              <div
+                data-slot="mermaid-zoom-content"
+                className="aui-mermaid-zoom-content flex h-full w-full items-center justify-center [&_svg]:max-h-[80vh] [&_svg]:max-w-[90vw]"
+                style={{
+                  transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,
+                  transformOrigin: "0 0",
+                }}
+                dangerouslySetInnerHTML={{ __html: zoomSvg }}
+              />
+            </div>
+            <div
+              data-slot="mermaid-zoom-toolbar"
+              className="aui-mermaid-zoom-toolbar border-border bg-background absolute top-4 end-4 flex items-center gap-1 rounded-lg border p-1"
+            >
+              <button
+                type="button"
+                aria-label="Zoom in"
+                onClick={() => zoomBy(1.25)}
+                className="text-muted-foreground hover:text-foreground cursor-pointer rounded-sm p-1.5"
+              >
+                <Plus className="size-4" />
+              </button>
+              <button
+                type="button"
+                aria-label="Zoom out"
+                onClick={() => zoomBy(0.8)}
+                className="text-muted-foreground hover:text-foreground cursor-pointer rounded-sm p-1.5"
+              >
+                <Minus className="size-4" />
+              </button>
+              <button
+                type="button"
+                aria-label="Reset zoom"
+                onClick={() => setTransform({ x: 0, y: 0, scale: 1 })}
+                className="text-muted-foreground hover:text-foreground cursor-pointer rounded-sm p-1.5"
+              >
+                <RotateCcw className="size-4" />
+              </button>
+              <button
+                ref={closeRef}
+                type="button"
+                aria-label="Close"
+                onClick={handleClose}
+                className="text-muted-foreground hover:text-foreground cursor-pointer rounded-sm p-1.5"
+              >
+                <X className="size-4" />
+              </button>
+            </div>
+          </div>,
+          document.body,
+        )}
+    </div>
+  );
+}
+
+const MermaidDiagramImpl: FC<MermaidDiagramProps> = ({
+  code,
+  className,
+  streaming = false,
+}) => {
+  const result = useMemo(() => {
+    if (streaming) return null;
+    try {
+      return {
+        svg: sanitizeMermaidSvg(
+          renderMermaidSVG(code, {
+            bg: "var(--background)",
+            fg: "var(--foreground)",
+            muted: "var(--muted-foreground)",
+            border: "var(--border)",
+            accent: "var(--foreground)",
+            transparent: true,
+          }),
+        ),
+        error: null,
+      };
+    } catch (err) {
+      return {
+        svg: null,
+        error: err instanceof Error ? err : new Error(String(err)),
+      };
+    }
+  }, [streaming, code]);
+
+  if (!result) {
+    return (
+      <div
+        data-slot="mermaid-skeleton"
+        aria-label="Rendering diagram"
+        className={cn(
+          "aui-mermaid-skeleton bg-muted flex h-32 animate-pulse items-center justify-center gap-3 rounded-b-lg p-4",
+          className,
+        )}
+      >
+        <div className="bg-muted-foreground/20 h-8 w-20 rounded-md" />
+        <div className="bg-muted-foreground/20 h-px w-10" />
+        <div className="bg-muted-foreground/20 h-8 w-20 rounded-md" />
+        <div className="bg-muted-foreground/20 h-px w-10" />
+        <div className="bg-muted-foreground/20 h-8 w-20 rounded-md" />
+      </div>
+    );
+  }
+
+  if (result.error) {
+    return (
+      <div
+        data-slot="mermaid-fallback"
+        className={cn(
+          "aui-mermaid-fallback bg-muted/75 rounded-b-lg",
+          className,
+        )}
+      >
+        <pre className="overflow-x-auto p-4 text-sm">{code.trim()}</pre>
+        <p className="text-muted-foreground border-border border-t px-4 py-1.5 text-xs">
+          diagram could not be rendered
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <MermaidZoom svg={result.svg}>
+      <div
+        data-slot="mermaid-diagram"
+        className={cn(
+          "aui-mermaid-diagram bg-muted overflow-x-auto rounded-b-lg p-2 [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-full",
+          className,
+        )}
+        dangerouslySetInnerHTML={{ __html: result.svg }}
+      />
+    </MermaidZoom>
+  );
+};
+
+const MermaidDiagram = memo(
+  MermaidDiagramImpl,
+) as unknown as FC<MermaidDiagramProps> & {
+  Zoom: typeof MermaidZoom;
+};
+
+MermaidDiagram.displayName = "MermaidDiagram";
+MermaidDiagram.Zoom = MermaidZoom;
+
+export { MermaidDiagram, MermaidZoom };

package/src/components/brand/BrandWordmark.tsx

@@ -0,0 +1,32 @@
+/**
+ * The digithings wordmark.
+ *
+ * Same 4×4 mask the brand studio composes
+ * (`packages/brand/studio/wordmark-mask.svg`), drawn in `currentColor`.
+ * Each app mirrors that file to `/wordmark-mask.svg` (see
+ * `packages/brand/build-studio.py`). Static on purpose: the animated build
+ * belongs to the studio, not to a page header.
+ */
+export function BrandWordmark({
+  className,
+  label = "digithings",
+  mask = "/wordmark-mask.svg",
+}: {
+  className?: string;
+  /** Accessible name. The mark is ink, not text. */
+  label?: string;
+  /**
+   * Mask URL. Apps served under a base path pass the prefixed path; the
+   * default is the site root.
+   */
+  mask?: string;
+}) {
+  return (
+    <span
+      className={className ? `brand-wordmark ${className}` : "brand-wordmark"}
+      role="img"
+      aria-label={label}
+      style={{ ["--brand-wordmark" as string]: `url("${mask}")` }}
+    />
+  );
+}

package/src/components/changelog/ReleaseRail.tsx

@@ -0,0 +1,81 @@
+/**
+ * The release rail — the changelog's row grammar, OpenCode-informed: a two-column
+ * grid per release with the version, date and product pinned in a sticky aside,
+ * and the shipped title with its highlights in the wide column under a hairline.
+ * Static, so the whole changelog renders without JavaScript (D1, #4429). Generic:
+ * rows arrive as data and the caller owns the order, so a site can fold its own
+ * release source in without this part knowing where releases come from.
+ */
+import type { ReactNode } from "react";
+import { cn } from "../../lib/utils";
+
+export interface ReleaseRailItem {
+  /** The product or package the release belongs to, e.g. `digichat`. */
+  product: string;
+  /** The version as published, e.g. `v2.3.1`. */
+  version: string;
+  /** The release date, ISO `YYYY-MM-DD`. */
+  date: string;
+  /** The published title. */
+  title: string;
+  /** The release URL, so the version stays the link. */
+  href: string;
+  /** The release kind as tagged upstream, e.g. `fix` or `release`. */
+  tag?: string;
+  /** Optional highlights, one plain clause each. */
+  entries?: ReactNode[];
+}
+
+export interface ReleaseRailProps {
+  items: ReleaseRailItem[];
+  className?: string;
+}
+
+export function ReleaseRail({ items, className }: ReleaseRailProps) {
+  return (
+    <ol className={cn("m-0 grid list-none gap-0 p-0", className)}>
+      {items.map((item) => (
+        <li
+          key={`${item.product}-${item.version}`}
+          className="grid gap-[0.9rem] border-t border-hair py-[1.6rem] first:border-t-0 first:pt-0 last:pb-0 sm:grid-cols-[180px_1fr] sm:gap-[3rem]"
+        >
+          <div className="flex flex-col gap-[0.3rem] sm:sticky sm:top-[5rem] sm:self-start">
+            <a
+              href={item.href}
+              className="font-mono text-[0.9rem] font-medium text-ink underline-offset-[3px] hover:underline"
+            >
+              {item.version}
+            </a>
+            <span className="font-mono text-[length:var(--type-meta)] tracking-[0.02em] text-ink-mute">
+              <time dateTime={item.date}>{item.date}</time>
+              {item.tag ? ` · ${item.tag}` : ""}
+            </span>
+            <span className="font-mono text-[length:var(--type-meta)] tracking-[0.02em] text-ink-mute">
+              {item.product}
+            </span>
+          </div>
+          <div className="min-w-0">
+            <p className="m-0 text-[length:var(--type-body)] font-medium leading-[1.5] text-ink">
+              {item.title}
+            </p>
+            {item.entries && item.entries.length > 0 ? (
+              <ul className="m-0 mt-[0.8rem] grid list-none gap-[0.6rem] p-0">
+                {item.entries.map((entry, index) => (
+                  <li
+                    key={index}
+                    className="flex gap-[0.75rem] text-[0.9rem] leading-[1.7] text-ink-soft"
+                  >
+                    <span aria-hidden="true" className="shrink-0 font-mono text-ink-mute">
+                      [*]
+                    </span>
+                    <span>{entry}</span>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/components/changelog/index.ts

@@ -0,0 +1 @@
+export { ReleaseRail, type ReleaseRailItem, type ReleaseRailProps } from "./ReleaseRail";

package/src/components/chat/ChatCodeBlock.tsx

@@ -0,0 +1,67 @@
+"use client";
+/**
+ * Fenced code + copy affordance for <ChatMarkdown> (#1418): a hairline
+ * figure with a microtype caption (language label · copy) over verbatim
+ * code. The copy button is the only stateful piece — it flips to `copied`
+ * for a beat via navigator.clipboard and silently no-ops where the API is
+ * unavailable (e.g. cross-origin iframes — the digichat embed rule).
+ * <ChatCopyButton> is exported solo so transcripts can pin the same
+ * affordance to whole turns (digichat-ui's .dc-msg-copy / .dc-code-copy
+ * rebuild on it). Box surface, caption row, and button mechanics live in
+ * styles/chat-core.css.
+ */
+import { useState } from "react";
+
+export type ChatCopyButtonProps = {
+  /** Payload written to the clipboard. */
+  text: string;
+  ariaLabel?: string;
+  className?: string;
+};
+
+export function ChatCopyButton({ text, ariaLabel = "Copy", className }: ChatCopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const cls = ["chat-md-copy", copied ? "is-copied" : "", className ?? ""]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <button
+      type="button"
+      className={cls}
+      aria-label={ariaLabel}
+      onClick={() =>
+        navigator.clipboard?.writeText(text).then(
+          () => {
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1200);
+          },
+          () => {},
+        )
+      }
+    >
+      {copied ? "copied" : "copy"}
+    </button>
+  );
+}
+
+export type ChatCodeBlockProps = {
+  /** Raw source — rendered verbatim and used as the copy payload. */
+  code: string;
+  /** Caption language label, e.g. `python`. */
+  lang?: string;
+  className?: string;
+};
+
+export function ChatCodeBlock({ code, lang, className }: ChatCodeBlockProps) {
+  return (
+    <figure className={["chat-md-code", className ?? ""].filter(Boolean).join(" ")}>
+      <figcaption>
+        <span>{lang}</span>
+        <ChatCopyButton text={code} ariaLabel="Copy code" />
+      </figcaption>
+      <pre>
+        <code>{code}</code>
+      </pre>
+    </figure>
+  );
+}

package/src/components/chat/ChatMarkdown.tsx

@@ -0,0 +1,66 @@
+/**
+ * Chat markdown — the rich-text frame for an assistant turn (#1418):
+ * headings, emphasis, lists, quotes, links, tables, math and diagrams styled
+ * on the token palette so rendered markdown reads as one surface with the
+ * transcript. Renders a `.chat-md` scope whose ELEMENT combinators (with their
+ * color-mix washes and ::marker accents) live in styles/chat-core.css —
+ * markdown renderers need no per-node classes; bare tags pick up the
+ * grammar, which is exactly how digichat-ui's .dc-md-* map onto it. Fenced
+ * code with the copy affordance is <ChatCodeBlock>; a bare <pre> still
+ * reads as the same hairline box.
+ *
+ * Two ways in:
+ *
+ *   <ChatMarkdown>{nodes}</ChatMarkdown>       frame only — static, server-safe
+ *   <ChatMarkdown source={md} />               frame + renderer
+ *
+ * `source` runs the shared pipeline in <ChatMarkdownSource>: GFM, `$inline$` /
+ * `$$block$$` math via remark-math + rehype-katex (rendered at parse time, so
+ * it survives with JS off), and ```mermaid fences via <ChatMermaidBlock>
+ * (client-only, lazily imported, source shown until it draws). Both may be
+ * combined — `source` renders first, then children, which is how a streaming
+ * turn pins <ChatStreamCursor> to the end of the text.
+ *
+ * The children-only path stays directive-free and server-safe.
+ *
+ * It does NOT, however, avoid the cost: `ChatMarkdownSource` is a **static**
+ * import below, so react-markdown, remark-gfm, remark-math, rehype-katex (→ katex,
+ * 266 KB raw / 76 KB gzipped) and <ChatMermaidBlock> are in the module graph of
+ * every consumer, including one that only ever passes children. An earlier version
+ * of this comment claimed "passing `source` pulls in the client renderer", implying
+ * the children path escaped it; that was wrong. Only `mermaid` itself (~2.9 MB) is
+ * genuinely deferred, via `await import("mermaid")` inside the effect.
+ *
+ * Making the whole renderer dynamic would be the real fix and is not done here: it
+ * would turn every `source` render into a suspense boundary and change the
+ * streaming behaviour, which needs its own change with its own review.
+ */
+import type { ReactNode } from "react";
+
+import { ChatMarkdownSource, type CodeBlockOverride } from "./ChatMarkdownSource";
+
+export type { CodeBlockOverride } from "./ChatMarkdownSource";
+
+export type ChatMarkdownProps = {
+  children?: ReactNode;
+  /** Markdown source — GFM + `$math$` + ```mermaid, rendered by the shared pipeline. */
+  source?: string;
+  className?: string;
+  /** Per-fence-language block-code hook — see {@link CodeBlockOverride}. Only
+   * consulted when `source` is passed; the children-only frame has nothing to
+   * parse. Optional, and additive: omit it and every fence renders exactly as
+   * before (mermaid diagram, or the copy-caption code block). */
+  renderCodeBlock?: CodeBlockOverride;
+};
+
+export function ChatMarkdown({ children, source, className, renderCodeBlock }: ChatMarkdownProps) {
+  const cls = ["chat-md min-w-0 text-[0.88rem] leading-[1.6]", className ?? ""]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div className={cls}>
+      {source ? <ChatMarkdownSource source={source} renderCodeBlock={renderCodeBlock} /> : null}
+      {children}
+    </div>
+  );
+}