@legionworks/facet 1.9.0

package/src/gallery-web/frame/renderers/dompurify-shim.ts

@@ -0,0 +1,112 @@
+/**
+ * DOMPurify shim for bundled frame contexts.
+ *
+ * DOMPurify captures `document` methods at instance-construction time
+ * (`createNodeIterator`, `createTreeWalker`, `getElementsByTagName`,
+ * `importNode`, `createDocumentFragment`) and calls them with `this`
+ * detached from the document. Standalone this survives; inside the
+ * mermaid/d3/katex frame bundle the detached calls surface as
+ * `TypeError: Illegal invocation` on the first HTML-label sanitize
+ * (plain-text labels skip the NodeIterator path).
+ *
+ * Fix: DOMPurify's factory form builds a fresh instance against an
+ * explicit window, and the frame's document carries the captured
+ * methods as OWN properties pre-bound to the real document — the own
+ * property wins over the prototype at capture time, so every detached
+ * `.call(...)` lands on the right `this`. DOMPurify also reassigns its
+ * internal document to `template.content.ownerDocument` (a DIFFERENT
+ * Document object) when HTMLTemplateElement exists, so that document
+ * gets the bound methods too. The import-time default instance is
+ * never trusted in the verifier's inlined harness bundle.
+ */
+
+import purifyFactory from "dompurify";
+
+type PurifyInstance = typeof purifyFactory & { isSupported?: boolean };
+
+/** Document methods DOMPurify captures and calls unbound. */
+const DOCUMENT_METHODS = [
+  "createNodeIterator",
+  "createTreeWalker",
+  "getElementsByTagName",
+  "getElementsByTagNameNS",
+  "importNode",
+  "createDocumentFragment",
+] as const;
+
+/**
+ * Shadow DOMPurify's captured methods with pre-bound OWN properties on
+ * the given document. Behavior is identical for all other callers — a
+ * bound copy of the same method.
+ */
+function bindDocumentMethods(realDocument: Document): void {
+  for (const name of DOCUMENT_METHODS) {
+    const existing = Object.getOwnPropertyDescriptor(realDocument, name);
+    if (existing !== undefined) continue;
+    const method = (realDocument as unknown as Record<string, unknown>)[name];
+    if (typeof method === "function") {
+      const fn = method as (...args: unknown[]) => unknown;
+      Object.defineProperty(realDocument, name, {
+        // `this`-AWARE, never hard-bound. DOMPurify parses input into a
+        // FRESH document and invokes these against it; a copy bound to
+        // `realDocument` would query the wrong document, find nothing,
+        // and silently return empty output (every mermaid label came
+        // back blank). Honour the call-time receiver and fall back to
+        // the real document only for the detached calls that produced
+        // `TypeError: Illegal invocation` in the bundled frame.
+        value: function shadowed(this: unknown, ...args: unknown[]): unknown {
+          const receiver =
+            this === undefined || this === null || this === globalThis ? realDocument : this;
+          return fn.apply(receiver, args);
+        },
+        configurable: true,
+        writable: true,
+      });
+    }
+  }
+}
+
+function ensureBoundDocumentMethods(realWindow: Window & typeof globalThis): boolean {
+  const realDocument = realWindow.document;
+  if (realDocument === undefined) return false;
+  bindDocumentMethods(realDocument);
+  // DOMPurify REASSIGNS its internal document to
+  // `template.content.ownerDocument` when HTMLTemplateElement exists —
+  // a DIFFERENT Document object (the template's inert document). That
+  // one must carry the bound methods too, or the HTML-label path
+  // still hits the unbound capture.
+  try {
+    const probeTemplate = realDocument.createElement("template");
+    const contentDoc = probeTemplate.content?.ownerDocument;
+    if (contentDoc !== undefined && contentDoc !== null && contentDoc !== realDocument) {
+      bindDocumentMethods(contentDoc);
+    }
+  } catch {
+    // template probing is best-effort; the main document patch stands
+  }
+  return true;
+}
+
+let bound: PurifyInstance | null = null;
+
+function resolveBound(): PurifyInstance {
+  if (bound !== null) return bound;
+  const w = globalThis.window as (Window & typeof globalThis) | undefined;
+  if (w !== undefined) ensureBoundDocumentMethods(w);
+  const candidate = purifyFactory(w) as PurifyInstance;
+  // A supported instance carries `sanitize`; an unsupported factory
+  // shell does not — fall back to the import-time default rather than
+  // break the render path.
+  bound = typeof candidate.sanitize === "function" ? candidate : purifyFactory;
+  return bound;
+}
+
+const shim = new Proxy({} as PurifyInstance, {
+  get(_target, prop, receiver) {
+    const instance = resolveBound();
+    const value = Reflect.get(instance, prop, receiver);
+    return typeof value === "function" ? value.bind(instance) : value;
+  },
+});
+
+export default shim;

package/src/gallery-web/frame/renderers/html.ts

@@ -0,0 +1,48 @@
+import { decodeArtifactBytes, type RenderContext } from "./registry";
+import {
+  isAllowedHtmlUrl,
+  isHtmlDeniedElement,
+  isHtmlEventHandlerAttribute,
+  isHtmlInlineStyleAttribute,
+  isHtmlUrlAttributeName,
+  isHtmlUrlBearingAttribute,
+} from "../../../shared/html/policy";
+
+function shouldKeepAttribute(elementName: string, name: string, value: string): boolean {
+  if (isHtmlEventHandlerAttribute(name) || isHtmlInlineStyleAttribute(name)) return false;
+  if (isHtmlUrlBearingAttribute(elementName, name))
+    return isAllowedHtmlUrl(elementName, name, value);
+  return !isHtmlUrlAttributeName(name);
+}
+
+function sanitizeParsedHtml(root: HTMLElement): void {
+  for (const element of Array.from(root.querySelectorAll("*"))) {
+    const tagName = element.localName.toLowerCase();
+    if (isHtmlDeniedElement(tagName)) {
+      element.remove();
+      continue;
+    }
+    for (const attribute of Array.from(element.attributes)) {
+      if (!shouldKeepAttribute(tagName, attribute.name.toLowerCase(), attribute.value))
+        element.removeAttribute(attribute.name);
+    }
+  }
+}
+
+export function createHtmlRendererRoot(ownerDocument: Document): HTMLElement {
+  const root = ownerDocument.createElement("div");
+  root.setAttribute("data-facet-renderer-root", "true");
+  root.className = "facet-html-root";
+  return root;
+}
+
+export async function renderHtml(ctx: RenderContext, bytes: Uint8Array): Promise<void> {
+  const ownerDocument = ctx.container.ownerDocument;
+  const root = createHtmlRendererRoot(ownerDocument);
+  const parsed = new DOMParser().parseFromString(decodeArtifactBytes(bytes), "text/html");
+  const parsedBody = parsed.body;
+  sanitizeParsedHtml(parsedBody);
+  for (const child of Array.from(parsedBody.childNodes))
+    root.appendChild(ownerDocument.adoptNode(child));
+  ctx.container.replaceChildren(root);
+}

package/src/gallery-web/frame/renderers/markdown.ts

@@ -0,0 +1,81 @@
+/**
+ * Markdown renderer — Marked with raw HTML treated as DATA.
+ *
+ * Marked passes raw HTML tokens through to the output BY DEFAULT. The
+ * renderer override escapes them at TOKEN level — before any HTML is
+ * attached to the DOM — so raw `<script>`, `<img onerror=…>`, inline
+ * handlers, and iframes remain VISIBLE TEXT. Sanitize-after-insert is
+ * too late (the parser already ran); the frame CSP is the backstop.
+ *
+ * Fenced ```mermaid blocks are delegated to the real mermaid renderer
+ * and their `<pre>` is replaced by the sanitized SVG; the markdown
+ * render only resolves after every embedded diagram promise settles.
+ */
+
+import { Marked } from "marked";
+
+import { type RenderContext, decodeArtifactBytes } from "./registry";
+
+const ESCAPES: ReadonlyMap<string, string> = new Map([
+  ["&", "&amp;"],
+  ["<", "&lt;"],
+  [">", "&gt;"],
+  ['"', "&quot;"],
+  ["'", "&#39;"],
+]);
+
+export function escapeHtml(text: string): string {
+  return text.replace(/[&<>"']/g, (char) => ESCAPES.get(char) ?? char);
+}
+
+/**
+ * Instance-scoped Marked: the html-token override escapes raw HTML
+ * (block AND inline) so no raw-HTML token can ever create an element.
+ */
+const marked = new Marked({
+  gfm: true,
+  renderer: {
+    html(token) {
+      return escapeHtml(token.text);
+    },
+  },
+});
+
+/**
+ * Pure stage: markdown text → HTML string with raw-HTML tokens
+ * escaped at TOKEN level. No DOM — testable without a browser.
+ */
+export async function markdownToSanitizedHtml(text: string): Promise<string> {
+  return await Promise.resolve(marked.parse(text));
+}
+
+/**
+ * Render a markdown artifact. The HTML is assembled in a detached
+ * `<template>`, every mermaid fence is awaited and replaced by its
+ * sanitized SVG, and only then does the fragment cross into the live
+ * container — one attach, after all diagram promises settle.
+ */
+export async function renderMarkdown(ctx: RenderContext, bytes: Uint8Array): Promise<void> {
+  const text = decodeArtifactBytes(bytes);
+  const html = await markdownToSanitizedHtml(text);
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  const mermaidBlocks = Array.from(
+    template.content.querySelectorAll("pre > code.language-mermaid"),
+  );
+  // Plain markdown must not pay Mermaid's multi-megabyte load + parse cost.
+  const renderMermaidInto =
+    mermaidBlocks.length === 0 ? null : (await import("./mermaid")).renderMermaidInto;
+  for (const code of mermaidBlocks) {
+    const source = code.textContent ?? "";
+    const pre = code.parentElement;
+    if (pre === null) continue;
+    const region = document.createElement("div");
+    region.setAttribute("data-facet-diagram-region", "true");
+    region.tabIndex = 0;
+    await renderMermaidInto!(region, source, ctx.theme);
+    if (region.firstElementChild !== null) pre.replaceWith(region);
+    else pre.remove();
+  }
+  ctx.container.appendChild(template.content);
+}

package/src/gallery-web/frame/renderers/mermaid.ts

@@ -0,0 +1,120 @@
+/**
+ * Mermaid renderer — the REAL mermaid runtime, `securityLevel: "loose"`.
+ *
+ * Renders the diagram to an SVG string via `mermaid.render()`, awaits
+ * completion, then imports the result through the ONE sanitized-SVG
+ * import path (`svg.ts`). Mermaid's strict/sandbox levels add a
+ * whole-SVG DOMPurify pass on top — redundant here, and broken in the
+ * verifier's inlined harness bundle: the shim DOMPurify's SVG-input `_initDocument` path
+ * resolves `body` to null and returns `""` for every diagram. "loose"
+ * skips that pass (`!isLooseSecurityLevel` guard in mermaid's render),
+ * so `importSanitizedSvgText` is the SOLE outer-SVG sanitizer — script,
+ * foreignObject, on* handlers, and non-fragment URLs are still stripped
+ * there; the frame CSP is the backstop. Per-label `sanitizeText`
+ * (DOMPurify via the shim) is unaffected by the security level.
+ *
+ * Two render-time hazards are handled explicitly:
+ *   1. `mermaid.render()` leaves its sandbox container (`d<id>` div)
+ *      in the document — it is removed after every render so it can
+ *      never inflate the verifier's SVG census.
+ *   2. `suppressErrorRendering` keeps parse failures from injecting
+ *      mermaid's own error SVG; a failed render surfaces as a
+ *      facet-error marker instead.
+ *
+ * `flowchart.htmlLabels` is OFF: labels render as SVG text, so markup
+ * inside a label is DATA (visible text), never an HTML subtree — the
+ * nested-`<svg>`-in-label forgery probe has no surface to land on.
+ */
+
+import mermaid from "mermaid";
+
+import type { ResolvedGalleryTheme } from "../../theme";
+import { FacetRenderError, type RenderContext, decodeArtifactBytes } from "./registry";
+import { importSanitizedSvgText } from "./svg";
+
+let initialized = false;
+
+export function mermaidInitializeConfig(theme: ResolvedGalleryTheme) {
+  return {
+    startOnLoad: false,
+    securityLevel: "loose" as const,
+    suppressErrorRendering: true,
+    theme: theme === "dark" ? ("dark" as const) : ("default" as const),
+    darkMode: theme === "dark",
+    // htmlLabels OFF at EVERY level that can re-enable it. An HTML label
+    // is emitted inside a `<foreignObject>`, which the SVG import path
+    // strips as an XSS vector — so an HTML label renders as an EMPTY
+    // box. Text labels keep markup as DATA and survive the sanitizer.
+    htmlLabels: false,
+    flowchart: { htmlLabels: false },
+    class: { htmlLabels: false },
+  };
+}
+
+function ensureMermaidInitialized(theme: ResolvedGalleryTheme): void {
+  if (initialized) return;
+  initialized = true;
+  mermaid.initialize(mermaidInitializeConfig(theme));
+}
+
+let renderCounter = 0;
+
+/**
+ * Render one mermaid diagram source into the container. Awaits
+ * `mermaid.render()` completion BEFORE the SVG crosses the sanitized
+ * import path — the direct render promise depends on this barrier.
+ */
+export async function renderMermaidInto(
+  container: HTMLElement,
+  source: string,
+  theme: ResolvedGalleryTheme,
+): Promise<void> {
+  ensureMermaidInitialized(theme);
+  renderCounter += 1;
+  const id = `facet-mermaid-${renderCounter}-${crypto.randomUUID()}`;
+  let svg: string;
+  try {
+    const result = await mermaid.render(id, source);
+    svg = result.svg;
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    throw new FacetRenderError(`mermaid render failed: ${message}`, "mermaid_render_error");
+  } finally {
+    // Mermaid parks its sandbox in `d<id>` and does not remove it.
+    document.getElementById(`d${id}`)?.remove();
+  }
+  await importSanitizedSvgText(container, svg, { marker: "graph" });
+  restoreNaturalSize(container.lastElementChild);
+}
+
+/**
+ * Mermaid stamps `width="100%"` + `style="max-width:<natural>px"` on its
+ * root, which SHRINKS a wide diagram to the container — a 10:1 flowchart
+ * fit-to-width renders as an unreadable strip (live-measured: 3791×377
+ * viewBox squeezed to 1248×124, 33% text scale). Readability wins: pin
+ * the root at its natural viewBox width and let the scrollable stage
+ * (both axes, top-left origin) reach the rest. viewBox-native zoom still
+ * applies on top — zoom mutates the viewBox, not these styles.
+ */
+function restoreNaturalSize(el: Element | null): void {
+  if (el === null || el.tagName.toLowerCase() !== "svg") return;
+  const viewBox = el.getAttribute("viewBox");
+  if (viewBox === null) return;
+  const parts = viewBox
+    .trim()
+    .split(/[\s,]+/)
+    .map(Number);
+  const width = parts[2];
+  if (parts.length !== 4 || width === undefined || !Number.isFinite(width) || width <= 0) {
+    return;
+  }
+  const svg = el as SVGElement;
+  svg.style.width = `${Math.ceil(width)}px`;
+  svg.style.maxWidth = "none";
+  svg.style.height = "auto";
+}
+
+/** Render a standalone mermaid artifact (artifactType "mermaid"). */
+export async function renderMermaidDocument(ctx: RenderContext, bytes: Uint8Array): Promise<void> {
+  await renderMermaidInto(ctx.container, decodeArtifactBytes(bytes), ctx.theme);
+}

package/src/gallery-web/frame/renderers/registry.ts

@@ -0,0 +1,260 @@
+import type { ArtifactType } from "../../../shared/contracts/artifact-types";
+import { isRenderer, type Renderer as RendererKind } from "../../../shared/contracts/renderers";
+import { HTML_STRUCTURAL_GROUPS } from "../../../shared/html/policy";
+import type { VerdictObserved } from "../../../shared/contracts/validation";
+import type { ObservedCountKey } from "../../../shared/contracts/observed-counts";
+import { isTsxExecutionMode, type TsxExecutionMode } from "../../../shared/tsx/execution";
+import type { ResolvedGalleryTheme } from "../../theme";
+
+export { ARTIFACT_TYPES, type ArtifactType } from "../../../shared/contracts/artifact-types";
+
+/**
+ * Frame-side renderer registry — keyed by ArtifactType.
+ *
+ * Runs INSIDE the artifact frame. Gallery and Tier 1 have paired
+ * type-specific entries that instantiate this registry with the SAME
+ * renderer modules; the build-metafile parity gate turns red if those
+ * module sets diverge. Artifact bytes are DATA: dispatch routes them to
+ * the typed renderer and every renderer builds DOM through trusted APIs.
+ *
+ * No zod in the frame bundle: the wire shape is plain JS here.
+ */
+
+export interface RenderContext {
+  readonly container: HTMLElement;
+  readonly theme: ResolvedGalleryTheme;
+  readonly nonce?: string;
+}
+
+export type Renderer = (
+  ctx: RenderContext,
+  bytes: Uint8Array,
+  renderer: RendererKind,
+  execution?: TsxExecutionMode,
+) => Promise<void>;
+
+/**
+ * Typed render failure. `code` travels into the facet-error element's
+ * text so the verifier's discriminative surface can name the reason.
+ */
+export class FacetRenderError extends Error {
+  constructor(
+    message: string,
+    readonly code: string,
+  ) {
+    super(message);
+    this.name = "FacetRenderError";
+  }
+}
+
+export function decodeArtifactBytes(bytes: Uint8Array): string {
+  return new TextDecoder("utf-8", { fatal: false }).decode(bytes);
+}
+
+export const RENDER_ERROR_ATTRIBUTE = "data-facet-error";
+export const RENDER_ERROR_ELEMENT = "facet-error";
+
+/**
+ * Append the renderer-owned error marker. The element carries
+ * `data-facet-error` so every observation channel (page shim,
+ * protocol probes) counts it the same way.
+ */
+function renderErrorMessage(value: unknown): string {
+  if (value instanceof Error) return value.message;
+  if (typeof value === "string") return value;
+  if (typeof value === "object" && value !== null) {
+    const event = value as {
+      readonly error?: unknown;
+      readonly message?: unknown;
+      readonly reason?: unknown;
+    };
+    for (const candidate of [event.reason, event.error, event.message]) {
+      if (candidate instanceof Error) return candidate.message;
+      if (typeof candidate === "string") return candidate;
+      if (
+        typeof candidate === "object" &&
+        candidate !== null &&
+        "message" in candidate &&
+        typeof candidate.message === "string"
+      ) {
+        return candidate.message;
+      }
+    }
+  }
+  return "interactive TSX runtime error";
+}
+
+export function appendRenderError(container: HTMLElement, value: unknown): void {
+  const el = container.ownerDocument.createElement(RENDER_ERROR_ELEMENT);
+  el.setAttribute(RENDER_ERROR_ATTRIBUTE, "true");
+  el.textContent = renderErrorMessage(value);
+  container.appendChild(el);
+}
+
+export type PageShimCounts = Pick<VerdictObserved, ObservedCountKey | "html" | "errorCount">;
+
+const RENDERER_ROOT_SELECTOR = 'svg[data-facet-renderer-root="true"]';
+const MARKED_ROOT_SELECTOR = '[data-facet-renderer-root="true"]';
+const RENDERER_GRAPH_ATTRIBUTE = "data-facet-renderer-graph";
+
+function safeSelectorElementsWithin(scope: ParentNode, selector: string): Element[] {
+  // The shim lives in the PAGE world on purpose: a hostile page can
+  // monkey-patch querySelectorAll and lie here — the Tier 1 verdict
+  // detects that lie against the protocol authority. Reading through
+  // the patchable API is the design, not a bug.
+  try {
+    return Array.from(scope.querySelectorAll(selector));
+  } catch {
+    return [];
+  }
+}
+
+function safeSelectorElements(selector: string): Element[] {
+  return safeSelectorElementsWithin(document, selector);
+}
+
+function hasMarkedRootAncestor(root: Element, roots: ReadonlySet<Element>): boolean {
+  let parent = root.parentElement;
+  while (parent !== null) {
+    if (roots.has(parent)) return true;
+    parent = parent.parentElement;
+  }
+  return false;
+}
+
+function nonDegenerateViewBox(svg: Element): boolean {
+  const parts = (svg.getAttribute("viewBox") ?? "")
+    .trim()
+    .split(/[\s,]+/)
+    .map((part) => Number.parseFloat(part));
+  if (parts.length !== 4) return false;
+  const [, , width, height] = parts as [number, number, number, number];
+  return Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0;
+}
+
+/** Page-world self-report the frame's direct render promise resolves with. UNTRUSTED by design. */
+export function countPageShim(): PageShimCounts {
+  const markedCandidates = safeSelectorElements(RENDERER_ROOT_SELECTOR);
+  const candidateSet = new Set(markedCandidates);
+  const roots = markedCandidates.filter((root) => !hasMarkedRootAncestor(root, candidateSet));
+  const graphRoots = roots.filter((root) => root.getAttribute(RENDERER_GRAPH_ATTRIBUTE) === "true");
+  const allMarkedCandidates = safeSelectorElements(MARKED_ROOT_SELECTOR);
+  const markedSet = new Set(allMarkedCandidates);
+  const htmlRoots = allMarkedCandidates.filter(
+    (root) => root.nodeName.toLowerCase() !== "svg" && !hasMarkedRootAncestor(root, markedSet),
+  );
+  const html =
+    htmlRoots.length === 0
+      ? undefined
+      : {
+          rendererRootCount: htmlRoots.length,
+          headingCount: 0,
+          tableCount: 0,
+          listCount: 0,
+          imageCount: 0,
+          canvasCount: 0,
+          externalImageCount: 0,
+        };
+  for (const root of htmlRoots) {
+    html!.headingCount += safeSelectorElementsWithin(
+      root,
+      HTML_STRUCTURAL_GROUPS.headings.join(","),
+    ).length;
+    html!.tableCount += safeSelectorElementsWithin(
+      root,
+      HTML_STRUCTURAL_GROUPS.tables.join(","),
+    ).length;
+    html!.listCount += safeSelectorElementsWithin(
+      root,
+      HTML_STRUCTURAL_GROUPS.lists.join(","),
+    ).length;
+    const images = safeSelectorElementsWithin(root, HTML_STRUCTURAL_GROUPS.images.join(","));
+    html!.imageCount += images.length;
+    html!.externalImageCount += images.filter((image) => {
+      try {
+        return new URL(image.getAttribute("src") ?? "").protocol === "https:";
+      } catch {
+        return false;
+      }
+    }).length;
+    html!.canvasCount += safeSelectorElementsWithin(
+      root,
+      HTML_STRUCTURAL_GROUPS.canvases.join(","),
+    ).length;
+  }
+  const mermaidNodeCount = graphRoots.reduce(
+    (count, root) => count + safeSelectorElementsWithin(root, "g.node").length,
+    0,
+  );
+  // Marker-scoped renderer counts deliberately differ from this document-wide
+  // canvas census: a smuggled canvas outside a renderer root remains observable.
+  // getContext() would create the surface being observed and turn the probe into a false positive.
+  const opaqueRegionCount = safeSelectorElements("*").filter(
+    (element) => element.nodeName.toLowerCase() === "canvas",
+  ).length;
+  return {
+    rendererRootSvgCount: roots.length,
+    graphCount: graphRoots.length,
+    mermaidNodeCount,
+    visibleSvgCount: roots.filter(nonDegenerateViewBox).length,
+    opaqueRegionCount,
+    externalImageCount: html?.externalImageCount ?? 0,
+    errorCount: safeSelectorElements("[data-facet-error]").length,
+    ...(html === undefined ? {} : { html }),
+  };
+}
+
+export interface RendererRegistry {
+  readonly get: (type: string) => Renderer | undefined;
+}
+
+export function createRendererRegistry(
+  entries: readonly (readonly [ArtifactType, Renderer])[],
+): RendererRegistry {
+  const registry = new Map<string, Renderer>(entries);
+  return {
+    get(type: string): Renderer | undefined {
+      return registry.get(type);
+    },
+  };
+}
+
+/**
+ * Dispatch one artifact through the registry. Unknown types throw — the caller
+ * turns the throw into a facet-error marker, never executable content.
+ */
+export async function dispatchRender(
+  registry: RendererRegistry,
+  ctx: RenderContext,
+  payload: {
+    readonly artifactType: string;
+    readonly renderer: RendererKind;
+    readonly bytes: Uint8Array;
+    readonly theme: ResolvedGalleryTheme;
+    readonly execution?: TsxExecutionMode;
+  },
+): Promise<void> {
+  if (!isRenderer(payload.renderer)) {
+    throw new FacetRenderError(
+      `Artifact renderer '${payload.renderer}' is not supported in this frame`,
+      "invalid_request",
+    );
+  }
+  const renderer = registry.get(payload.artifactType);
+  if (renderer === undefined) {
+    throw new FacetRenderError(
+      `Artifact type '${payload.artifactType}' has no renderer in this frame`,
+      "unsupported_reserved_type",
+    );
+  }
+  if (payload.artifactType === "tsx" && !isTsxExecutionMode(payload.execution)) {
+    throw new FacetRenderError("TSX artifact payload is missing execution", "invalid_request");
+  }
+  if (payload.artifactType !== "tsx" && payload.execution === "interactive") {
+    throw new FacetRenderError(
+      "Interactive execution is only supported for TSX artifacts",
+      "invalid_request",
+    );
+  }
+  await renderer(ctx, payload.bytes, payload.renderer, payload.execution);
+}