@pixel-point/toolcraft 0.0.18 → 0.0.19

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

@@ -0,0 +1,221 @@
+import { describe, expect, it } from "vitest";
+
+import { ToolcraftArtifactExportError } from "./export-error";
+import {
+  createToolcraftSvgDocument,
+  createToolcraftSvgProductContainer,
+  serializeToolcraftSvgDocument,
+} from "./svg-document";
+import { TOOLCRAFT_SVG_NAMESPACE } from "./svg-policy";
+
+const frame = Object.freeze({ height: 80, width: 120, x: -10, y: 5 });
+
+function createSvgElement(name: string): Readonly<{
+  container: SVGGElement;
+  element: Element;
+}> {
+  const { container } = createToolcraftSvgProductContainer();
+  const element = container.ownerDocument.createElementNS(
+    TOOLCRAFT_SVG_NAMESPACE,
+    name,
+  );
+  container.append(element);
+  return { container, element };
+}
+
+describe("Toolcraft SVG document", () => {
+  it("serializes valued attributes as strict standalone XML", () => {
+    const { document } = createToolcraftSvgDocument(frame);
+    const { container } = createToolcraftSvgProductContainer();
+    const rect = container.ownerDocument.createElementNS(
+      TOOLCRAFT_SVG_NAMESPACE,
+      "rect",
+    );
+    rect.setAttribute("data-column-track", "true");
+    rect.setAttribute("height", "40");
+    rect.setAttribute("width", "20");
+    container.append(rect);
+
+    const artifact = serializeToolcraftSvgDocument({
+      backgroundColor: "#123456",
+      container,
+      document,
+      frame,
+    });
+    const parsed = new DOMParser().parseFromString(
+      artifact.source,
+      "image/svg+xml",
+    );
+
+    expect(artifact.source).toContain('data-column-track="true"');
+    expect(parsed.querySelector("parsererror")).toBeNull();
+    expect(parsed.documentElement.namespaceURI).toBe(TOOLCRAFT_SVG_NAMESPACE);
+    expect(parsed.documentElement.getAttribute("viewBox")).toBe("-10 5 120 80");
+    expect(
+      parsed.documentElement.children[0]?.getAttribute(
+        "data-toolcraft-background",
+      ),
+    ).toBe("true");
+    expect(
+      parsed.documentElement.children[1]?.getAttribute(
+        "data-toolcraft-product-scene",
+      ),
+    ).toBe("true");
+    expect(artifact.vectorElementCount).toBe(1);
+  });
+
+  it.each([
+    "animate",
+    "discard",
+    "foreignObject",
+    "image",
+    "script",
+    "style",
+  ])("rejects forbidden <%s> content", (elementName) => {
+    const { container } = createSvgElement(elementName);
+
+    expect(() =>
+      serializeToolcraftSvgDocument({
+        backgroundColor: null,
+        container,
+        document: createToolcraftSvgDocument(frame).document,
+        frame,
+      }),
+    ).toThrow(ToolcraftArtifactExportError);
+  });
+
+  it.each([
+    ["onclick", "alert(1)", "event attribute"],
+    ["href", "https://example.com/shape.svg#icon", "external href"],
+    ["fill", "url(https://example.com/fill.svg#paint)", "external url()"],
+  ])("rejects unsafe %s attributes", (name, value, message) => {
+    const { container } = createToolcraftSvgProductContainer();
+    const use = container.ownerDocument.createElementNS(
+      TOOLCRAFT_SVG_NAMESPACE,
+      "use",
+    );
+    use.setAttribute(name, value);
+    container.append(use);
+
+    expect(() =>
+      serializeToolcraftSvgDocument({
+        backgroundColor: null,
+        container,
+        document: createToolcraftSvgDocument(frame).document,
+        frame,
+      }),
+    ).toThrow(message);
+  });
+
+  it("rejects documents without a visible product vector", () => {
+    const { container } = createToolcraftSvgProductContainer();
+    const defs = container.ownerDocument.createElementNS(
+      TOOLCRAFT_SVG_NAMESPACE,
+      "defs",
+    );
+    const path = container.ownerDocument.createElementNS(
+      TOOLCRAFT_SVG_NAMESPACE,
+      "path",
+    );
+    defs.append(path);
+    container.append(defs);
+
+    expect(() =>
+      serializeToolcraftSvgDocument({
+        backgroundColor: null,
+        container,
+        document: createToolcraftSvgDocument(frame).document,
+        frame,
+      }),
+    ).toThrow("visible vector primitive");
+  });
+
+  it("rejects product attempts to mutate runtime-owned markers", () => {
+    const { container, element } = createSvgElement("rect");
+    element.setAttribute("data-toolcraft-background", "true");
+
+    expect(() =>
+      serializeToolcraftSvgDocument({
+        backgroundColor: null,
+        container,
+        document: createToolcraftSvgDocument(frame).document,
+        frame,
+      }),
+    ).toThrow("runtime-owned marker attributes");
+
+    element.removeAttribute("data-toolcraft-background");
+    container.removeAttribute("data-toolcraft-product-scene");
+    expect(() =>
+      serializeToolcraftSvgDocument({
+        backgroundColor: null,
+        container,
+        document: createToolcraftSvgDocument(frame).document,
+        frame,
+      }),
+    ).toThrow("runtime-owned SVG group");
+  });
+
+  it("requires unique ids and resolved local references", () => {
+    const { container } = createToolcraftSvgProductContainer();
+    const defs = container.ownerDocument.createElementNS(
+      TOOLCRAFT_SVG_NAMESPACE,
+      "defs",
+    );
+    const shape = container.ownerDocument.createElementNS(
+      TOOLCRAFT_SVG_NAMESPACE,
+      "path",
+    );
+    shape.setAttribute("id", "shape");
+    defs.append(shape);
+    const use = container.ownerDocument.createElementNS(
+      TOOLCRAFT_SVG_NAMESPACE,
+      "use",
+    );
+    use.setAttribute("href", "#missing");
+    container.append(defs, use);
+
+    expect(() =>
+      serializeToolcraftSvgDocument({
+        backgroundColor: null,
+        container,
+        document: createToolcraftSvgDocument(frame).document,
+        frame,
+      }),
+    ).toThrow("#missing has no matching element");
+
+    use.setAttribute("href", "#shape");
+    const duplicate = container.ownerDocument.createElementNS(
+      TOOLCRAFT_SVG_NAMESPACE,
+      "rect",
+    );
+    duplicate.setAttribute("id", "shape");
+    container.append(duplicate);
+    expect(() =>
+      serializeToolcraftSvgDocument({
+        backgroundColor: null,
+        container,
+        document: createToolcraftSvgDocument(frame).document,
+        frame,
+      }),
+    ).toThrow("non-empty and unique");
+  });
+
+  it("rejects non-content XML nodes", () => {
+    const { container } = createSvgElement("rect");
+    container.append(
+      container.ownerDocument.createProcessingInstruction(
+        "xml-stylesheet",
+        'href="https://example.com/styles.css"',
+      ),
+    );
+
+    expect(() =>
+      serializeToolcraftSvgDocument({
+        backgroundColor: null,
+        container,
+        document: createToolcraftSvgDocument(frame).document,
+        frame,
+      }),
+    ).toThrow("only elements and text nodes");
+  });
+});

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

@@ -15,6 +15,7 @@ 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/react/app-shell/runtime-public-api.test.tsx

@@ -40,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);
@@ -83,6 +91,7 @@ describe("Toolcraft template runtime public API", () => {
       | "rendererPipelineRegistration"
       | "sceneBoundsProvider"
       | "schema"
+      | "svgExportRenderer"
     >();
     expectTypeOf<
       keyof React.ComponentProps<typeof ToolcraftApp>
@@ -99,6 +108,7 @@ describe("Toolcraft template runtime public API", () => {
       | "sceneBoundsProvider"
       | "schema"
       | "style"
+      | "svgExportRenderer"
     >();
     expectTypeOf<
       keyof React.ComponentProps<typeof ToolcraftRoot>