@pixel-point/toolcraft 0.0.17 → 0.0.19

package/templates/runtime/export/svg-document.ts

@@ -0,0 +1,400 @@
+import type { ToolcraftExportFrame } from "./export-frame";
+import { ToolcraftArtifactExportError } from "./export-error";
+import {
+  TOOLCRAFT_FORBIDDEN_SVG_ELEMENTS,
+  TOOLCRAFT_SVG_BACKGROUND_ATTRIBUTE,
+  TOOLCRAFT_SVG_NAMESPACE,
+  TOOLCRAFT_SVG_NON_RENDERING_CONTAINERS,
+  TOOLCRAFT_SVG_PRODUCT_SCENE_ATTRIBUTE,
+  TOOLCRAFT_SVG_VECTOR_PRIMITIVES,
+} from "./svg-policy";
+
+const forbiddenElementNames = new Set<string>(
+  TOOLCRAFT_FORBIDDEN_SVG_ELEMENTS,
+);
+const vectorPrimitiveNames = new Set<string>(
+  TOOLCRAFT_SVG_VECTOR_PRIMITIVES,
+);
+const nonRenderingContainerNames = new Set<string>(
+  TOOLCRAFT_SVG_NON_RENDERING_CONTAINERS,
+);
+
+type ToolcraftSvgDocument = Readonly<{ document: XMLDocument }>;
+type ToolcraftSvgProductContainer = Readonly<{ container: SVGGElement }>;
+
+export type ToolcraftSerializedSvgDocument = Readonly<{
+  source: string;
+  vectorElementCount: number;
+}>;
+
+function getDocumentImplementation(): DOMImplementation {
+  if (typeof document === "undefined") {
+    throw new ToolcraftArtifactExportError({
+      code: "svg-document-invalid",
+      message: "SVG export requires browser XML document support.",
+    });
+  }
+  return document.implementation;
+}
+
+function createSvgXmlDocument(rootName: "g" | "svg"): XMLDocument {
+  return getDocumentImplementation().createDocument(
+    TOOLCRAFT_SVG_NAMESPACE,
+    rootName,
+    null,
+  );
+}
+
+function setFrameAttributes(
+  root: SVGSVGElement,
+  frame: ToolcraftExportFrame,
+): void {
+  root.setAttribute("width", String(frame.width));
+  root.setAttribute("height", String(frame.height));
+  root.setAttribute(
+    "viewBox",
+    `${frame.x} ${frame.y} ${frame.width} ${frame.height}`,
+  );
+}
+
+export function createToolcraftSvgDocument(
+  frame: ToolcraftExportFrame,
+): ToolcraftSvgDocument {
+  const svgDocument = createSvgXmlDocument("svg");
+  const root = svgDocument.querySelector("svg");
+  if (!root) {
+    throw new ToolcraftArtifactExportError({
+      code: "svg-document-invalid",
+      message: "Runtime could not create the SVG document root.",
+    });
+  }
+  setFrameAttributes(root, frame);
+  return Object.freeze({ document: svgDocument });
+}
+
+export function createToolcraftSvgProductContainer(): ToolcraftSvgProductContainer {
+  const productDocument = createSvgXmlDocument("g");
+  const container = productDocument.querySelector("g");
+  if (!container) {
+    throw new ToolcraftArtifactExportError({
+      code: "svg-document-invalid",
+      message: "Runtime could not create the SVG product container.",
+    });
+  }
+  container.setAttribute(TOOLCRAFT_SVG_PRODUCT_SCENE_ATTRIBUTE, "true");
+  return Object.freeze({ container });
+}
+
+function hasNonRenderingAncestor(
+  element: Element,
+  container: Element,
+): boolean {
+  let current = element.parentElement;
+  while (current && !current.isSameNode(container)) {
+    if (nonRenderingContainerNames.has(current.localName.toLowerCase())) {
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+
+function validateUrlReferences(
+  attribute: Attr,
+  referencedIds?: Set<string>,
+): void {
+  const attributeName = attribute.localName.toLowerCase();
+  const value = attribute.value.trim();
+  if (attributeName === "href" || attributeName === "src") {
+    if (!value.startsWith("#")) {
+      throw new ToolcraftArtifactExportError({
+        code: "svg-content-invalid",
+        message: `SVG export cannot contain external ${attribute.name} references.`,
+      });
+    }
+    const referencedId = value.slice(1).trim();
+    if (!referencedId) {
+      throw new ToolcraftArtifactExportError({
+        code: "svg-content-invalid",
+        message: `SVG export ${attribute.name} references must name a local element.`,
+      });
+    }
+    referencedIds?.add(referencedId);
+  }
+
+  const urlPattern = /url\(\s*(['"]?)(.*?)\1\s*\)/giu;
+  for (const match of value.matchAll(urlPattern)) {
+    const reference = match[2]?.trim() ?? "";
+    if (!reference.startsWith("#")) {
+      throw new ToolcraftArtifactExportError({
+        code: "svg-content-invalid",
+        message: `SVG export cannot contain external url() references in ${attribute.name}.`,
+      });
+    }
+    const referencedId = reference.slice(1).trim();
+    if (!referencedId) {
+      throw new ToolcraftArtifactExportError({
+        code: "svg-content-invalid",
+        message: `SVG export url() in ${attribute.name} must name a local element.`,
+      });
+    }
+    referencedIds?.add(referencedId);
+  }
+}
+
+function validateProductContainer(container: Element): number {
+  if (
+    container.namespaceURI !== TOOLCRAFT_SVG_NAMESPACE ||
+    container.localName !== "g" ||
+    container.getAttribute(TOOLCRAFT_SVG_PRODUCT_SCENE_ATTRIBUTE) !== "true"
+  ) {
+    throw new ToolcraftArtifactExportError({
+      code: "svg-content-invalid",
+      message: "SVG product content must use the runtime-owned SVG group.",
+    });
+  }
+
+  let vectorElementCount = 0;
+  const definedIds = new Set<string>();
+  const referencedIds = new Set<string>();
+  const elements = [container, ...container.querySelectorAll("*")];
+  for (const element of elements) {
+    for (const node of element.childNodes) {
+      if (node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.TEXT_NODE) {
+        throw new ToolcraftArtifactExportError({
+          code: "svg-content-invalid",
+          message: "SVG export content may contain only elements and text nodes.",
+        });
+      }
+    }
+    if (element.namespaceURI !== TOOLCRAFT_SVG_NAMESPACE) {
+      throw new ToolcraftArtifactExportError({
+        code: "svg-content-invalid",
+        message: "SVG export content must use the SVG namespace.",
+      });
+    }
+
+    const elementName = element.localName.toLowerCase();
+    if (
+      (element !== container &&
+        element.hasAttribute(TOOLCRAFT_SVG_PRODUCT_SCENE_ATTRIBUTE)) ||
+      element.hasAttribute(TOOLCRAFT_SVG_BACKGROUND_ATTRIBUTE)
+    ) {
+      throw new ToolcraftArtifactExportError({
+        code: "svg-content-invalid",
+        message: "SVG product content cannot use runtime-owned marker attributes.",
+      });
+    }
+    if (forbiddenElementNames.has(elementName)) {
+      throw new ToolcraftArtifactExportError({
+        code: "svg-content-invalid",
+        message: `SVG export cannot contain <${element.localName}> content.`,
+      });
+    }
+    if (
+      vectorPrimitiveNames.has(elementName) &&
+      !hasNonRenderingAncestor(element, container)
+    ) {
+      vectorElementCount += 1;
+    }
+
+    for (const attribute of element.attributes) {
+      if (attribute.localName.toLowerCase() === "id") {
+        const id = attribute.value.trim();
+        if (!id || definedIds.has(id)) {
+          throw new ToolcraftArtifactExportError({
+            code: "svg-content-invalid",
+            message: "SVG export element ids must be non-empty and unique.",
+          });
+        }
+        definedIds.add(id);
+      }
+      if (attribute.localName.toLowerCase().startsWith("on")) {
+        throw new ToolcraftArtifactExportError({
+          code: "svg-content-invalid",
+          message: `SVG export cannot contain event attribute ${attribute.name}.`,
+        });
+      }
+      validateUrlReferences(attribute, referencedIds);
+    }
+  }
+
+  for (const referencedId of referencedIds) {
+    if (!definedIds.has(referencedId)) {
+      throw new ToolcraftArtifactExportError({
+        code: "svg-content-invalid",
+        message: `SVG export local reference #${referencedId} has no matching element.`,
+      });
+    }
+  }
+
+  if (vectorElementCount === 0) {
+    throw new ToolcraftArtifactExportError({
+      code: "svg-content-empty",
+      message: "SVG export must contain at least one visible vector primitive.",
+    });
+  }
+  return vectorElementCount;
+}
+
+function createBackground(
+  svgDocument: XMLDocument,
+  frame: ToolcraftExportFrame,
+  color: string,
+): SVGRectElement {
+  if (!color.trim()) {
+    throw new ToolcraftArtifactExportError({
+      code: "svg-content-invalid",
+      message: "SVG export background color must not be blank.",
+    });
+  }
+  const background = svgDocument.createElementNS(
+    TOOLCRAFT_SVG_NAMESPACE,
+    "rect",
+  );
+  background.setAttribute(TOOLCRAFT_SVG_BACKGROUND_ATTRIBUTE, "true");
+  background.setAttribute("fill", color);
+  background.setAttribute("x", String(frame.x));
+  background.setAttribute("y", String(frame.y));
+  background.setAttribute("width", String(frame.width));
+  background.setAttribute("height", String(frame.height));
+  const fill = background.getAttributeNode("fill");
+  if (fill) validateUrlReferences(fill);
+  return background;
+}
+
+function requireStrictSvgSource(
+  source: string,
+  frame: ToolcraftExportFrame,
+  backgroundColor: string | null,
+  expectedVectorElementCount: number,
+): void {
+  const parsed = new DOMParser().parseFromString(source, "image/svg+xml");
+  if (parsed.getElementsByTagName("parsererror").length > 0) {
+    throw new ToolcraftArtifactExportError({
+      code: "svg-serialization-failed",
+      message: "Serialized SVG export is not valid XML.",
+    });
+  }
+  const root = parsed.documentElement;
+  if (
+    root.localName !== "svg" ||
+    root.namespaceURI !== TOOLCRAFT_SVG_NAMESPACE ||
+    root.getAttribute("width") !== String(frame.width) ||
+    root.getAttribute("height") !== String(frame.height) ||
+    root.getAttribute("viewBox") !==
+      `${frame.x} ${frame.y} ${frame.width} ${frame.height}`
+  ) {
+    throw new ToolcraftArtifactExportError({
+      code: "svg-serialization-failed",
+      message: "Serialized SVG export lost its runtime-owned frame metadata.",
+    });
+  }
+
+  const productContainers = root.querySelectorAll(
+    `[${TOOLCRAFT_SVG_PRODUCT_SCENE_ATTRIBUTE}]`,
+  );
+  const backgrounds = root.querySelectorAll(
+    `[${TOOLCRAFT_SVG_BACKGROUND_ATTRIBUTE}]`,
+  );
+  const productContainer = productContainers[0];
+  const expectedChildCount = backgroundColor === null ? 1 : 2;
+  if (
+    productContainers.length !== 1 ||
+    !productContainer ||
+    productContainer.parentElement !== root ||
+    root.children.length !== expectedChildCount ||
+    root.children[expectedChildCount - 1] !== productContainer ||
+    validateProductContainer(productContainer) !== expectedVectorElementCount
+  ) {
+    throw new ToolcraftArtifactExportError({
+      code: "svg-serialization-failed",
+      message: "Serialized SVG export lost its runtime-owned product structure.",
+    });
+  }
+
+  if (backgroundColor === null) {
+    if (backgrounds.length > 0) {
+      throw new ToolcraftArtifactExportError({
+        code: "svg-serialization-failed",
+        message: "Serialized SVG export gained an unexpected background.",
+      });
+    }
+    return;
+  }
+
+  const background = backgrounds[0];
+  if (
+    backgrounds.length !== 1 ||
+    !background ||
+    background.localName !== "rect" ||
+    background.parentElement !== root ||
+    root.children[0] !== background ||
+    background.getAttribute("fill") !== backgroundColor ||
+    background.getAttribute("x") !== String(frame.x) ||
+    background.getAttribute("y") !== String(frame.y) ||
+    background.getAttribute("width") !== String(frame.width) ||
+    background.getAttribute("height") !== String(frame.height)
+  ) {
+    throw new ToolcraftArtifactExportError({
+      code: "svg-serialization-failed",
+      message: "Serialized SVG export lost its runtime-owned background.",
+    });
+  }
+}
+
+export function serializeToolcraftSvgDocument({
+  backgroundColor,
+  container,
+  document: svgDocument,
+  frame,
+}: Readonly<{
+  backgroundColor: string | null;
+  container: SVGGElement;
+  document: XMLDocument;
+  frame: ToolcraftExportFrame;
+}>): ToolcraftSerializedSvgDocument {
+  try {
+    const vectorElementCount = validateProductContainer(container);
+    const root = svgDocument.querySelector("svg");
+    if (!root) {
+      throw new ToolcraftArtifactExportError({
+        code: "svg-document-invalid",
+        message: "Runtime SVG document is missing its root.",
+      });
+    }
+    if (root.childNodes.length > 0) {
+      throw new ToolcraftArtifactExportError({
+        code: "svg-document-invalid",
+        message: "Runtime SVG document must be assembled exactly once.",
+      });
+    }
+
+    const productContent = svgDocument.importNode(container, true);
+    const nodes: Node[] =
+      backgroundColor === null
+        ? [productContent]
+        : [createBackground(svgDocument, frame, backgroundColor), productContent];
+    root.append(...nodes);
+
+    const source = `<?xml version="1.0" encoding="UTF-8"?>\n${new XMLSerializer().serializeToString(svgDocument)}`;
+    requireStrictSvgSource(
+      source,
+      frame,
+      backgroundColor,
+      vectorElementCount,
+    );
+    return Object.freeze({ source, vectorElementCount });
+  } catch (error) {
+    if (error instanceof ToolcraftArtifactExportError) {
+      throw error;
+    }
+    throw new ToolcraftArtifactExportError(
+      {
+        code: "svg-serialization-failed",
+        message: "Toolcraft could not serialize the SVG export.",
+      },
+      { cause: error },
+    );
+  }
+}

package/templates/runtime/export/svg-policy.ts

@@ -0,0 +1,47 @@
+export const TOOLCRAFT_SVG_NAMESPACE = "http://www.w3.org/2000/svg" as const;
+export const TOOLCRAFT_SVG_BACKGROUND_ATTRIBUTE =
+  "data-toolcraft-background" as const;
+export const TOOLCRAFT_SVG_PRODUCT_SCENE_ATTRIBUTE =
+  "data-toolcraft-product-scene" as const;
+
+export const TOOLCRAFT_FORBIDDEN_SVG_ELEMENTS = Object.freeze([
+  "animate",
+  "animatecolor",
+  "animatemotion",
+  "animatetransform",
+  "audio",
+  "canvas",
+  "discard",
+  "embed",
+  "feimage",
+  "foreignobject",
+  "handler",
+  "iframe",
+  "image",
+  "object",
+  "script",
+  "set",
+  "style",
+  "video",
+] as const);
+
+export const TOOLCRAFT_SVG_VECTOR_PRIMITIVES = Object.freeze([
+  "circle",
+  "ellipse",
+  "line",
+  "path",
+  "polygon",
+  "polyline",
+  "rect",
+  "text",
+  "use",
+] as const);
+
+export const TOOLCRAFT_SVG_NON_RENDERING_CONTAINERS = Object.freeze([
+  "clippath",
+  "defs",
+  "marker",
+  "mask",
+  "pattern",
+  "symbol",
+] as const);

package/templates/runtime/index.ts

@@ -13,6 +13,9 @@ export type {
 } from "./react/model-rendering/model-render-binding";
 export * from "./schema/define-toolcraft";
 export { TOOLCRAFT_CANVAS_RENDER_SCALE } from "./schema/canvas-render-scale";
+export * from "./schema/collection-item-controls";
+export * from "./schema/control-applicability";
+export * from "./schema/artifact-export-actions";
 export * from "./schema/keyframe-capability";
 export * from "./schema/runtime-targets";
 export * from "./schema/types";

package/templates/runtime/model-import/model-import-limits.ts

@@ -1,5 +1,4 @@
 import type {
-  ResolvedToolcraftModelFileDropSchema,
   ToolcraftModelFormat,
   ToolcraftModelFileDropSchema,
   ToolcraftModelImportLimits,
@@ -143,9 +142,21 @@ function normalizeTopologyProfile(
   return normalizedProfile;
 }
 
-export function normalizeToolcraftModelFileDrop(
-  control: ToolcraftModelFileDropSchema,
-): ResolvedToolcraftModelFileDropSchema {
+type NormalizedToolcraftModelFileDropSchema<
+  TControl extends ToolcraftModelFileDropSchema,
+> = Omit<
+  TControl,
+  "modelFormats" | "modelLimits" | "multiple" | "topologyProfile"
+> & {
+  modelFormats: readonly ToolcraftModelFormat[];
+  modelLimits: ToolcraftModelImportLimits;
+  multiple: false;
+  topologyProfile: ToolcraftModelTopologyProfile;
+};
+
+export function normalizeToolcraftModelFileDrop<
+  TControl extends ToolcraftModelFileDropSchema,
+>(control: TControl): NormalizedToolcraftModelFileDropSchema<TControl> {
   const multiple: unknown = control.multiple;
 
   if (multiple !== undefined && multiple !== false) {

package/templates/runtime/react/app-shell/runtime-public-api.test.tsx

@@ -9,6 +9,7 @@ import * as ToolcraftReact from "../index";
 import {
   isToolcraftLayerVisibleInTree,
   useToolcraftMediaPresentationUrls,
+  useToolcraftProductSceneFrame,
 } from "../index";
 import { CanvasShell } from "../canvas/canvas-shell";
 import { ControlsPanel } from "../controls-panel/controls-panel";
@@ -39,6 +40,14 @@ describe("Toolcraft template runtime public API", () => {
     expect(ToolcraftRuntime).not.toHaveProperty(
       "toolcraftControlsResetHistorySource",
     );
+    expect(ToolcraftRuntime.TOOLCRAFT_SVG_NAMESPACE).toBe(
+      "http://www.w3.org/2000/svg",
+    );
+    expect(ToolcraftRuntime).not.toHaveProperty("exportToolcraftSvgArtifact");
+    expect(ToolcraftRuntime).not.toHaveProperty("createToolcraftSvgDocument");
+    expect(ToolcraftRuntime).not.toHaveProperty(
+      "serializeToolcraftSvgDocument",
+    );
     expect(ToolcraftReact.useToolcraftDispatch).toBe(useToolcraftDispatch);
     expect(ToolcraftReact.useToolcraftSelector).toBe(useToolcraftSelector);
     expect(ToolcraftReact.useToolcraftPipeline).toBe(useToolcraftPipeline);
@@ -53,6 +62,10 @@ describe("Toolcraft template runtime public API", () => {
       isToolcraftLayerVisibleInTree,
     );
     expect(isToolcraftLayerVisibleInTree).toEqual(expect.any(Function));
+    expect(ToolcraftReact.useToolcraftProductSceneFrame).toBe(
+      useToolcraftProductSceneFrame,
+    );
+    expect(useToolcraftProductSceneFrame).toEqual(expect.any(Function));
     expect(ToolcraftReact).not.toHaveProperty("ToolcraftStoreContext");
     expect(ToolcraftReact).not.toHaveProperty("useToolcraftStore");
   });
@@ -71,12 +84,14 @@ describe("Toolcraft template runtime public API", () => {
       | "canvasContent"
       | "controlRenderers"
       | "exportRenderer"
+      | "infiniteCanvasContent"
       | "modelPresentation"
       | "onPanelAction"
       | "renderDefaultCanvasMedia"
       | "rendererPipelineRegistration"
       | "sceneBoundsProvider"
       | "schema"
+      | "svgExportRenderer"
     >();
     expectTypeOf<
       keyof React.ComponentProps<typeof ToolcraftApp>
@@ -85,6 +100,7 @@ describe("Toolcraft template runtime public API", () => {
       | "className"
       | "controlRenderers"
       | "exportRenderer"
+      | "infiniteCanvasContent"
       | "modelPresentation"
       | "onPanelAction"
       | "renderDefaultCanvasMedia"
@@ -92,6 +108,7 @@ describe("Toolcraft template runtime public API", () => {
       | "sceneBoundsProvider"
       | "schema"
       | "style"
+      | "svgExportRenderer"
     >();
     expectTypeOf<
       keyof React.ComponentProps<typeof ToolcraftRoot>
@@ -153,7 +170,9 @@ describe("Toolcraft template runtime public API", () => {
   it("keeps shell and panel host props separate", () => {
     expectTypeOf<
       keyof React.ComponentProps<typeof CanvasShell>
-    >().toEqualTypeOf<"children" | "renderDefaultMedia">();
+    >().toEqualTypeOf<
+      "children" | "infiniteCanvasContent" | "renderDefaultMedia"
+    >();
     expectTypeOf<React.ComponentProps<typeof PanelHost>>().toHaveProperty(
       "panelType",
     );
@@ -211,6 +230,7 @@ describe("Toolcraft template runtime public API", () => {
     };
     const canvasWithSlotProps: React.ComponentProps<typeof CanvasShell> = {
       children: <div />,
+      infiniteCanvasContent: <div />,
       renderDefaultMedia: false,
     };
     // @ts-expect-error Canvas upload belongs to schema.canvas.upload.

package/templates/runtime/react/app-shell/settings-transfer.test.ts

@@ -18,6 +18,12 @@ function createSettingsSchema() {
         sections: [
           {
             controls: {
+              fill: {
+                defaultValue: "#112233",
+                label: "Fill",
+                target: "appearance.fill",
+                type: "color",
+              },
               prompt: {
                 defaultValue: "Initial prompt",
                 label: "Prompt",
@@ -250,4 +256,19 @@ describe("settings transfer", () => {
 
     expect(state.values["style.opacity"]).toBe(75);
   });
+
+  it("canonicalizes legacy Color payloads during settings import", () => {
+    const schema = createSettingsSchema();
+    const initialState = createToolcraftState(schema);
+    const payload = {
+      ...createToolcraftSettingsPayload(initialState),
+      values: { "appearance.fill": { hex: "#abc" } },
+    };
+
+    const state = reduceWithCommands(initialState, (dispatch) => {
+      applyToolcraftSettingsPayload({ dispatch, state: initialState }, payload);
+    });
+
+    expect(state.values["appearance.fill"]).toBe("#AABBCC");
+  });
 });

package/templates/runtime/react/app-shell/toolcraft-app.scene-export.test.tsx

@@ -10,6 +10,35 @@ afterEach(() => {
 });
 
 describe("ToolcraftApp scene export boundary", () => {
+  it("applies composition scene bounds to the live infinite product surface", () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 180, unit: "px", width: 320 },
+        sizing: { defaultMode: "infinite", mode: "editable-output" },
+      },
+      panels: {},
+      persistence: { storage: "none" },
+    });
+    const { container } = render(
+      <ToolcraftApp
+        canvasContent={<div data-testid="product-scene" />}
+        sceneBoundsProvider={() => [
+          { height: 240, width: 400, x: -200, y: -120 },
+        ]}
+        schema={schema}
+      />,
+    );
+    const productScene = container.querySelector<HTMLElement>(
+      "[data-toolcraft-product-scene]",
+    );
+
+    expect(productScene?.style.height).toBe("240px");
+    expect(productScene?.style.left).toBe("-200px");
+    expect(productScene?.style.top).toBe("-120px");
+    expect(productScene?.style.width).toBe("400px");
+  });
+
   it("fails before mount when a typed product export has no shared renderer", () => {
     const schema = defineToolcraft({
       canvas: {
@@ -48,6 +77,51 @@ describe("ToolcraftApp scene export boundary", () => {
           schema={schema}
         />,
       ),
-    ).toThrow("Product-owned export actions require exportRenderer");
+    ).toThrow("Product-owned image/video export actions require exportRenderer");
+  });
+
+  it("requires typed SVG actions and SVG renderers to correspond", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                footer: {
+                  actions: [
+                    {
+                      label: "Export SVG",
+                      role: "export-svg",
+                      value: "export.svg",
+                    },
+                  ],
+                  target: "actions.output",
+                  type: "panelActions",
+                },
+              },
+            },
+          ],
+          title: "Controls",
+        },
+      },
+      persistence: { storage: "none" },
+    });
+
+    expect(() => render(<ToolcraftApp schema={schema} />)).toThrow(
+      "A typed SVG export action requires svgExportRenderer",
+    );
+    expect(() =>
+      render(
+        <ToolcraftApp
+          schema={defineToolcraft({
+            canvas: { enabled: true },
+            panels: {},
+            persistence: { storage: "none" },
+          })}
+          svgExportRenderer={{ baseFileName: "vector", renderFrame: () => {} }}
+        />,
+      ),
+    ).toThrow("svgExportRenderer requires a typed SVG export action");
   });
 });