artifacts: demo scrollbar death, figure natural sizing + fullscreen, downloads, invert toggles (release polish 7)

- demo iframe: scrolling=no (the bridge auto-sizes; a scrollable iframe
  trapped the wheel) + content-box so the bridge height is the viewport
- figures: svgNaturalWidth hug + center (w-fit max-w-full mx-auto),
  full-width fallback for viewBox-only svgs
- fullscreen: MermaidOverlay figure mode (raw svg, white stage, invert
  carried); openFigure context; figureFocus rides the mermaid Esc layer
- downloads: figure.svg + <slug>.html (raw pre-bridge), shared download.ts
- invert: manual ContrastIcon toggle on both cards — invert(1)
  hue-rotate(180deg) on the white-bearing element, default off, no
  detection, no theme wiring (owner rulings 2026-10-07)

1433 tests green; live smoke passed (hug/center measured, filters verified,
downloads fired, Esc closed; wheel-chaining structurally sound)

components/artifacts/visual-card.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+import { useState } from "react";
+import { ContrastIcon, DownloadIcon, MaximizeIcon } from "lucide-react";
+import { useSessionMermaid } from "@/components/session-overlay";
+import { downloadFile } from "@/components/artifacts/download";
 import { DispatchCard } from "@/components/artifacts/dispatch-card";
 import type { ArtifactPartProps, VisualResult } from "@/src/core";
 
@@ -25,6 +29,20 @@ export function sanitizeSvg(svg: string): string {
 		.replace(/(href|xlink:href)\s*=\s*(?:"\s*(?:javascript|data:text\/html)[^"]*"|'\s*(?:javascript|data:text\/html)[^']*'|(?:javascript|data:text\/html)[^\s>]*)/gi, "");
 }
 
+/** The svg root's DECLARED width in px, when there is one — the natural
+ *  size the card displays at instead of stretching to full width (owner,
+ *  2026-10-07). %, em, "auto", or a missing attribute → null (the caller
+ *  falls back to full-width). Pure. */
+export function svgNaturalWidth(svg: string): number | null {
+	const m = /<svg\b[^>]*?\bwidth\s*=\s*["']([^"']+)["'][^>]*>/i.exec(svg);
+	if (!m) return null;
+	const value = m[1]!.trim();
+	const px = /^(\d+(?:\.\d+)?)(?:px)?$/i.exec(value);
+	if (!px) return null;
+	const n = Number.parseFloat(px[1]!);
+	return Number.isFinite(n) && n > 0 ? n : null;
+}
+
 export function VisualCard({ part }: ArtifactPartProps) {
 	if (part.state !== "output-available") return null;
 	return <DispatchCard toolCallId={part.toolCallId} kind="visual" />;
@@ -33,6 +51,12 @@ export function VisualCard({ part }: ArtifactPartProps) {
 /** The figure itself — exported: the steer card renders the delivered artifact. */
 export function VisualOutputCard({ output }: { output: unknown }) {
 	const result = output as VisualResult | undefined;
+	const overlay = useSessionMermaid();
+	// Brightness inversion (owner, 2026-10-07): a MANUAL toggle only — no
+	// detection, no theme wiring. Default off; a toggled figure passes its
+	// state into the fullscreen overlay (openFigure).
+	const [inverted, setInverted] = useState(false);
+	const natural = result && typeof result.svg === "string" ? svgNaturalWidth(result.svg) : null;
 	if (!result || typeof result.svg !== "string") {
 		return (
 			<div className="rounded-xl border bg-card p-4 text-sm text-muted-foreground">
@@ -54,13 +78,58 @@ export function VisualOutputCard({ output }: { output: unknown }) {
 	}
 	return (
 		<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="visual-card">
-			<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Figure</div>
-			{/* Scale to the display area: the svg always fills the card's width
-			   (w-full), h-auto keeps the aspect ratio — no white strips beside
-			   narrower figures, oversized ones shrink to fit. bg-white stays as a
-			   neutral backing for svgs without their own background. */}
+			<div className="flex items-center justify-between gap-2">
+				<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Figure</div>
+				<div className="flex items-center gap-0.5">
+					{overlay && (
+						<button
+							type="button"
+							aria-label="Open figure fullscreen"
+							title="Open fullscreen"
+							onClick={() => overlay.openFigure(result.svg, inverted)}
+							data-testid="visual-open"
+							className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+						>
+							<MaximizeIcon className="size-3.5" />
+						</button>
+					)}
+					<button
+						type="button"
+						aria-label="Invert brightness"
+						aria-pressed={inverted}
+						title="Invert brightness"
+						onClick={() => setInverted((v) => !v)}
+						data-testid="visual-invert"
+						className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+					>
+						<ContrastIcon className="size-3.5" />
+					</button>
+					<button
+						type="button"
+						aria-label="Download figure as SVG"
+						title="Download as SVG"
+						onClick={() => downloadFile("figure.svg", result.svg, "image/svg+xml")}
+						data-testid="visual-download"
+						className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+					>
+						<DownloadIcon className="size-3.5" />
+					</button>
+				</div>
+			</div>
+			{/* Natural sizing (owner, 2026-10-07): a declared-width svg sits at
+			   ITS size — the white figure area hugs it and centers (mx-auto),
+			   max-w-full still shrinks oversized ones to fit the card. No
+			   declared size (viewBox-only, %-width) keeps the old full-width
+			   law. The invert filter rides the bg-white holder, so the backing
+			   flips white→black together with the strokes; transparent areas
+			   ARE the backing. */}
 			<div
-				className="mt-2 overflow-hidden rounded-lg bg-white [&_svg]:h-auto [&_svg]:w-full"
+				className={
+					natural !== null
+						? "mx-auto mt-2 w-fit max-w-full overflow-hidden rounded-lg bg-white [&_svg]:h-auto [&_svg]:max-w-full"
+						: "mt-2 w-full overflow-hidden rounded-lg bg-white [&_svg]:h-auto [&_svg]:w-full"
+				}
+				style={{ filter: inverted ? "invert(1) hue-rotate(180deg)" : undefined }}
 				dangerouslySetInnerHTML={{ __html: sanitizeSvg(result.svg) }}
 				data-testid="visual-svg"
 			/>