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)
This commit is contained in:
amosblomqvist
@@ -1,7 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { useContext, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { ContrastIcon, DownloadIcon } from "lucide-react";
|
||||
import { ChatActionsContext } from "@/components/chat";
|
||||
import { downloadFile, slugFilename } from "@/components/artifacts/download";
|
||||
import { DispatchCard } from "@/components/artifacts/dispatch-card";
|
||||
import type { ArtifactPartProps, DemoResult } from "@/src/core";
|
||||
|
||||
@@ -106,6 +108,11 @@ function DemoFrame({ title, html }: { title: string; html: string }) {
|
||||
const actions = useContext(ChatActionsContext);
|
||||
const iframeRef = useRef<HTMLIFrameElement | null>(null);
|
||||
const [state, setState] = useState<DemoBridgeState>(INITIAL_DEMO_BRIDGE_STATE);
|
||||
// Brightness inversion (owner, 2026-10-07): a MANUAL toggle only — no
|
||||
// detection, no theme wiring. The filter rides the iframe element, which
|
||||
// carries the card's white backing, so one class flips page + content
|
||||
// together while hue-rotate(180deg) undoes invert's hue flip.
|
||||
const [inverted, setInverted] = useState(false);
|
||||
const srcDoc = useMemo(() => buildDemoSrcDoc(html), [html]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -123,8 +130,29 @@ function DemoFrame({ title, html }: { title: string; html: string }) {
|
||||
<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="demo-card">
|
||||
<div className="flex items-baseline justify-between gap-2">
|
||||
<div className="font-medium">{title}</div>
|
||||
<div className="shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
interactive demo
|
||||
<div className="flex shrink-0 items-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Invert brightness"
|
||||
aria-pressed={inverted}
|
||||
title="Invert brightness"
|
||||
onClick={() => setInverted((v) => !v)}
|
||||
data-testid="demo-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 demo as HTML"
|
||||
title="Download as HTML"
|
||||
onClick={() => downloadFile(`${slugFilename(title)}.html`, html, "text/html")}
|
||||
data-testid="demo-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 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">interactive demo</div>
|
||||
</div>
|
||||
</div>
|
||||
{state.error && (
|
||||
@@ -141,8 +169,21 @@ function DemoFrame({ title, html }: { title: string; html: string }) {
|
||||
// but never touch the app's storage, cookies, or DOM.
|
||||
sandbox="allow-scripts"
|
||||
srcDoc={srcDoc}
|
||||
// scrolling OFF (owner, 2026-10-07): the bridge auto-sizes the
|
||||
// iframe to its content, so an internal scrollbar can only appear
|
||||
// before the first resize lands — and a scrollable iframe TRAPS
|
||||
// the wheel (session scrolling stalls over the demo). With
|
||||
// scrolling disabled the wheel chains straight to the session.
|
||||
scrolling="no"
|
||||
className="mt-2 w-full rounded-lg border bg-white"
|
||||
style={{ height: state.height ?? 360 }}
|
||||
// content-box: the bridge reports the CONTENT height — with the
|
||||
// preflight's border-box the 2px border would eat into it and clip
|
||||
// the bottom of the demo (smoke finding, 2026-10-07).
|
||||
style={{
|
||||
height: state.height ?? 360,
|
||||
boxSizing: "content-box",
|
||||
filter: inverted ? "invert(1) hue-rotate(180deg)" : undefined,
|
||||
}}
|
||||
data-testid="demo-iframe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* Artifact download helpers (release polish, 2026-10-07): the tiny
|
||||
* save-a-blob seam shared by the demo + figure cards, plus the filename
|
||||
* slug. The slug is pure (test-pinned); downloadFile touches the DOM and
|
||||
* only runs on click.
|
||||
*/
|
||||
|
||||
/** Slugify a demo title into a filename stem — lowercase, accents folded,
|
||||
* runs of non-alphanumerics collapsed to "-", trimmed, capped at 64
|
||||
* chars. Empty/fully-symbolic titles fall back to "demo". */
|
||||
export function slugFilename(title: string): string {
|
||||
const slug = title
|
||||
.toLowerCase()
|
||||
.normalize("NFKD")
|
||||
.replace(/[\u0300-\u036f]/g, "")
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-+|-+$/g, "")
|
||||
.slice(0, 64);
|
||||
return slug || "demo";
|
||||
}
|
||||
|
||||
/** Save text as a downloaded file. The blob URL is revoked right after the
|
||||
* click — Chromium keeps the download alive past the revoke. */
|
||||
export function downloadFile(name: string, text: string, mime: string): void {
|
||||
const blob = new Blob([text], { type: mime });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = name;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user