// ---------------------------------------------------------------------------// The artifact gallery's preview slot.//// An artifact is a live component, so the grid needs something to show for it.// Two things can be shown, and this component prefers the first:////   1. a CAPTURED RENDER — sanitized markup of the artifact actually rendering.//      Written at create time from the smoke render, which produces its loading//      composition (cards, tables, chart frames, skeletons) with no data in it,//      and REPLACED once a viewer opens the artifact and it settles, at which//      point the same composition carries real numbers and rows.//   2. a SCHEMATIC — the deterministic figure below, derived from the id.//// The fallback is total: a real render if there is one, otherwise the// schematic. Nothing here can fail to draw something, which is what lets every// producer upstream fail open.//// ## Why the markup is inserted directly, and not into an iframe//// An iframe with `srcdoc` is the reflex for "render HTML I did not write", and// it is the wrong tool here on both axes:////   - It does not inherit the console's stylesheet. The markup's entire visual//     layer is Tailwind classes plus theme tokens, and a srcdoc document has//     neither — so every preview would need the compiled stylesheet and the//     Geist woff2 inlined into it, per card, or it would render as unstyled//     black-on-white text. Nine cards would each pay that.//   - The security it buys is against a threat this markup does not carry.//// What is actually being inserted is not arbitrary HTML. It is OUR OWN server// render, produced by React's server renderer inside a QuickJS sandbox from// code that already passed the create-time guards, then reduced by// `sanitizeArtifactPreviewMarkup` to an ALLOWLIST: known-inert elements, known// attributes, no `script`, no `style` element, no `img`, no `iframe`, no// handler, no external reference of any kind, ids namespaced so a preview// cannot collide with the console document. The sanitizer is the boundary, and// it is written not to trust the renderer's output either — see its header.//// So direct insertion is the correct trade: the preview inherits the console's// fonts, tokens and dark mode for free, costs one DOM subtree instead of one// document, and is inert by allowlist rather than by container. The container// still does its share — `pointer-events-none`, `aria-hidden`, `contain`, and a// transform scale — so the preview cannot be clicked, focused, read by a screen// reader, or paint outside its box.//// The schematic remains for everything with no preview yet: deliberately// abstract hairline geometry in the grayscale ramp, the same vocabulary as the// marketing site's graph-paper illustrations, because a placeholder that// imitated a screenshot would be lying about what it knows. It is derived from// `artifactId`, so a given artifact always draws the same figure and the eye// can use the shape as a weak landmark.// --------------------------------------------------------------------------- import { useLayoutEffect, useRef, useState } from "react";import type { ArtifactPreview as ArtifactPreviewValue } from "@executor-js/sdk/shared"; import { cn } from "../lib/utils"; /** FNV-1a over the id — a stable, well-mixed seed from an opaque string. */const seedFrom = (value: string): number => {  let hash = 2_166_136_261;  for (let index = 0; index < value.length; index += 1) {    hash ^= value.charCodeAt(index);    hash = Math.imul(hash, 16_777_619);  }  return hash >>> 0;}; /** * mulberry32 — a tiny deterministic PRNG. * * `Math.random` would reshuffle every card on every render; the schematic is * only useful as a landmark if it is a pure function of the artifact's id. */const sequenceFrom = (seed: number): (() => number) => {  let state = seed;  return () => {    state = (state + 0x6d_2b_79_f5) >>> 0;    let t = state;    t = Math.imul(t ^ (t >>> 15), t | 1);    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);    return ((t ^ (t >>> 14)) >>> 0) / 4_294_967_296;  };}; /** Pick a value in `[min, max)` from the sequence, rounded to whole units. */const between = (next: () => number, min: number, max: number): number =>  Math.round(min + next() * (max - min)); // The frame the schematics are drawn in. 16:10, matching the card's preview box.const WIDTH = 320;const HEIGHT = 200; // Content inset. The chrome bar sits at the top; body layouts own everything// below `BODY_TOP`.const PAD = 20;const BODY_TOP = 56; /** Rounded blocks read as UI; every layout builds out of this one primitive. */function Block(props: {  readonly x: number;  readonly y: number;  readonly width: number;  readonly height: number;  readonly className?: string;}) {  return (    <rect      x={props.x}      y={props.y}      width={props.width}      height={props.height}      rx={2}      className={cn("fill-muted-foreground/20", props.className)}    />  );} /** * The header every artifact has: a title bar and a couple of controls. * * Keeping it constant across layouts is what makes the four body figures read * as variations of one interface rather than four unrelated drawings. */function Chrome(props: { readonly next: () => number }) {  const titleWidth = between(props.next, 64, 120);  return (    <>      <Block x={PAD} y={22} width={titleWidth} height={9} className="fill-muted-foreground/35" />      <Block x={WIDTH - PAD - 44} y={23} width={20} height={7} />      <Block x={WIDTH - PAD - 20} y={23} width={20} height={7} />    </>  );} /** A bar chart: the shape of a metrics artifact. */function BarsFigure(props: { readonly next: () => number }) {  const { next } = props;  const count = between(next, 6, 9);  const span = WIDTH - PAD * 2;  const gap = 6;  const barWidth = (span - gap * (count - 1)) / count;  const floor = HEIGHT - PAD - 14;  const maxHeight = floor - BODY_TOP - 4;   return (    <>      {Array.from({ length: count }, (_, index) => {        const height = between(next, Math.round(maxHeight * 0.25), maxHeight);        return (          <Block            key={index}            x={PAD + index * (barWidth + gap)}            y={floor - height}            width={barWidth}            height={height}            className={index % 3 === 0 ? "fill-muted-foreground/35" : undefined}          />        );      })}      <line        x1={PAD}        y1={floor + 5}        x2={WIDTH - PAD}        y2={floor + 5}        className="stroke-border"        strokeWidth={1}      />    </>  );} /** A table: the shape of a list or report artifact. */function RowsFigure(props: { readonly next: () => number }) {  const { next } = props;  const rows = between(next, 4, 6);  const rowHeight = (HEIGHT - PAD - BODY_TOP) / rows;   return (    <>      {Array.from({ length: rows }, (_, index) => {        const y = BODY_TOP + index * rowHeight;        const leadWidth = between(next, 70, 130);        const tailWidth = between(next, 24, 44);        return (          <g key={index}>            <Block              x={PAD}              y={y}              width={leadWidth}              height={8}              className={index === 0 ? "fill-muted-foreground/35" : undefined}            />            <Block x={WIDTH - PAD - tailWidth} y={y} width={tailWidth} height={8} />            {index < rows - 1 ? (              <line                x1={PAD}                y1={y + rowHeight - 7}                x2={WIDTH - PAD}                y2={y + rowHeight - 7}                className="stroke-border"                strokeWidth={1}              />            ) : null}          </g>        );      })}    </>  );} /** A tile grid: the shape of a stat or summary dashboard. */function TilesFigure(props: { readonly next: () => number }) {  const { next } = props;  const columns = 2;  const rows = 2;  const gap = 12;  const tileWidth = (WIDTH - PAD * 2 - gap * (columns - 1)) / columns;  const tileHeight = (HEIGHT - PAD - BODY_TOP - gap * (rows - 1)) / rows;   return (    <>      {Array.from({ length: columns * rows }, (_, index) => {        const column = index % columns;        const row = Math.floor(index / columns);        const x = PAD + column * (tileWidth + gap);        const y = BODY_TOP + row * (tileHeight + gap);        const valueWidth = between(next, 28, 54);        return (          <g key={index}>            <rect              x={x}              y={y}              width={tileWidth}              height={tileHeight}              rx={4}              className="fill-transparent stroke-border"              strokeWidth={1}            />            <Block x={x + 12} y={y + 14} width={between(next, 30, 46)} height={6} />            <Block              x={x + 12}              y={y + 28}              width={valueWidth}              height={11}              className="fill-muted-foreground/35"            />          </g>        );      })}    </>  );} /** A list beside a panel: the shape of a detail or explorer artifact. */function SplitFigure(props: { readonly next: () => number }) {  const { next } = props;  const railWidth = 96;  const panelX = PAD + railWidth + 14;  const panelWidth = WIDTH - PAD - panelX;  const panelHeight = HEIGHT - PAD - BODY_TOP;  const points = Array.from({ length: 7 }, (_, index) => {    const x = panelX + 12 + (index * (panelWidth - 24)) / 6;    const y = BODY_TOP + panelHeight - 16 - between(next, 6, panelHeight - 40);    return `${x},${y}`;  }).join(" ");   return (    <>      {Array.from({ length: 4 }, (_, index) => (        <Block          key={index}          x={PAD}          y={BODY_TOP + index * 22}          width={between(next, 52, railWidth)}          height={8}          className={index === 0 ? "fill-muted-foreground/35" : undefined}        />      ))}      <rect        x={panelX}        y={BODY_TOP}        width={panelWidth}        height={panelHeight}        rx={4}        className="fill-transparent stroke-border"        strokeWidth={1}      />      <polyline        points={points}        className="fill-none stroke-muted-foreground/50"        strokeWidth={1.5}        strokeLinejoin="round"        strokeLinecap="round"      />    </>  );} const FIGURES = [BarsFigure, RowsFigure, TilesFigure, SplitFigure] as const; /** The figure names, in the order `FIGURES` holds them. */export const ARTIFACT_PREVIEW_FIGURES = ["bars", "rows", "tiles", "split"] as const; export type ArtifactPreviewFigure = (typeof ARTIFACT_PREVIEW_FIGURES)[number]; /** * Which schematic an artifact draws. * * Exported so the choice is testable as a pure function: determinism is this * component's contract, not an implementation detail. */export const artifactPreviewFigure = (artifactId: string): ArtifactPreviewFigure =>  ARTIFACT_PREVIEW_FIGURES[seedFrom(artifactId) % ARTIFACT_PREVIEW_FIGURES.length] ?? "bars"; /** * The width the stored markup is laid out at before being scaled to fit. * * The markup came from a server renderer with no viewport, so it has no * intrinsic width. Laying it out at a desktop width and scaling the whole thing * down is what makes the card read as a small screenshot of the artifact rather * than a cramped phone rendering of it — a table stays a table, a four-column * stat row stays four columns. * * 880 matches the width the shell actually frames an artifact at * (`.artifact-root` is `max-width: 1100px` minus its padding), so the layout * the card shows is the layout the artifact really has. */const LAYOUT_WIDTH = 880; /** The 16:10 slice of that width — one card's worth of the artifact. */const LAYOUT_HEIGHT = Math.round((LAYOUT_WIDTH * 10) / 16); /** * The artifact's real loading-state markup, scaled into the card. * * `dangerouslySetInnerHTML` is the right call here and the sanitizer is why — * see this file's header for the full argument. In short: the markup is our own * sandboxed server render reduced to an allowlist of inert elements and * attributes, with no script, style element, image, frame, handler or external * reference able to survive. The wrapper adds containment on top: it cannot be * clicked or focused (`pointer-events-none`, no tabbable descendants survive * sanitizing), it is invisible to assistive tech (`aria-hidden`), and `contain` * plus `overflow-hidden` stop it painting or laying out beyond its box. */function LayoutPreview(props: { readonly markup: string }) {  const frameRef = useRef<HTMLDivElement | null>(null);  const [scale, setScale] = useState<number | null>(null);   // The scale has to be MEASURED, not written as a constant.  //  // The card is fluid — one, two or three across depending on the viewport — so  // any fixed divisor is right at exactly one breakpoint and wrong at the rest.  // Container query units cannot do it either: `calc(100cqw / 880)` is a  // length, and `scale()` takes a unitless number, so that expression is  // invalid and the browser drops the whole transform — which renders the  // markup at 1:1 and shows nothing but its top-left corner.  useLayoutEffect(() => {    const frame = frameRef.current;    if (!frame) return;    const measure = () => {      const width = frame.clientWidth;      if (width > 0) setScale(width / LAYOUT_WIDTH);    };    measure();    const observer = new ResizeObserver(measure);    observer.observe(frame);    return () => observer.disconnect();  }, []);   return (    <div      ref={frameRef}      data-slot="artifact-preview"      data-preview-kind="layout"      aria-hidden="true"      className="pointer-events-none absolute inset-0 select-none overflow-hidden [contain:strict]"    >      <div        // Scaled from the top-left, so what the card shows is the artifact's        // first screen — heading first — rather than a slice of its middle.        style={{          width: LAYOUT_WIDTH,          height: LAYOUT_HEIGHT,          transform: `scale(${scale ?? 0})`,          transformOrigin: "top left",          // The framing the shell itself gives an artifact, so the preview is          // not flush against the card's hairline.          padding: 24,          // Hidden until measured: a frame at 1:1 would flash the corner of the          // markup at full size before the first measurement lands.          visibility: scale === null ? "hidden" : "visible",        }}        // eslint-disable-next-line react/no-danger -- allowlist-sanitized SSR output; see the module header        dangerouslySetInnerHTML={{ __html: props.markup }}      />    </div>  );} /** * What the gallery draws for an artifact. * * Strict fallback chain — image, else layout, else schematic — so there is * always something to show and every producer upstream can fail open. * * Decorative by construction in all three cases, so it is hidden from assistive * technology and from the accessibility tree the e2e locators read: the card's * link already carries the artifact's name. */export function ArtifactPreview(props: {  readonly artifactId: string;  readonly preview?: ArtifactPreviewValue | null;  readonly className?: string;}) {  if (artifactPreviewKind(props.preview) === "layout" && props.preview) {    return <LayoutPreview markup={props.preview.markup} />;  }  return <ArtifactSchematic artifactId={props.artifactId} className={props.className} />;} /** * Which preview an artifact gets. * * Exported so the fallback is testable as a pure function rather than only * through a rendered tree: "a real render beats the schematic, and an empty one * is not a real render" is the contract, and it is the part that would silently * regress — every producer upstream fails open, so this is what guarantees * there is always something to draw. */export const artifactPreviewKind = (  preview: ArtifactPreviewValue | null | undefined,): "layout" | "schematic" => (preview && preview.markup !== "" ? "layout" : "schematic"); /** * The fallback figure, for an artifact with no captured preview. * * Exported so the fallback is testable on its own terms, and so the gallery's * empty-ish states can draw it deliberately. */export function ArtifactSchematic(props: {  readonly artifactId: string;  readonly className?: string;}) {  const seed = seedFrom(props.artifactId);  const next = sequenceFrom(seed);  const Figure = FIGURES[seed % FIGURES.length] ?? BarsFigure;  // Unique per artifact: two schematics on one page must not share a pattern id.  const gridId = `artifact-preview-grid-${seed.toString(36)}`;   return (    <svg      data-slot="artifact-preview"      viewBox={`0 0 ${WIDTH} ${HEIGHT}`}      preserveAspectRatio="xMidYMid slice"      aria-hidden="true"      focusable="false"      className={cn("size-full", props.className)}    >      <defs>        {/* The graph-paper field, at the same restraint as the marketing hero. */}        <pattern id={gridId} width={16} height={16} patternUnits="userSpaceOnUse">          <path d="M16 0H0V16" className="fill-none stroke-border" strokeWidth={1} />        </pattern>      </defs>      <rect width={WIDTH} height={HEIGHT} className="fill-transparent" />      <rect width={WIDTH} height={HEIGHT} fill={`url(#${gridId})`} opacity={0.5} />      <Chrome next={next} />      <Figure next={next} />    </svg>  );}