@pixel-point/toolcraft 0.0.18 → 0.0.19

package/templates/runtime/react/controls-panel/__tests__/controls-panel.vector-interaction.test.tsx

@@ -60,7 +60,7 @@ describe("ControlsPanel vector pad interactions", () => {
     });
 
     const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
-    expect(values["geometry.position"]).toEqual({ x: "-1.00", y: "-1.00" });
+    expect(values["geometry.position"]).toEqual({ x: -1, y: -1 });
   });
 
   it("resets a vector pad to its default value on double click", () => {
@@ -115,12 +115,12 @@ describe("ControlsPanel vector pad interactions", () => {
       JSON.parse(screen.getByTestId("values-json").textContent ?? "{}")[
         "geometry.position"
       ],
-    ).toEqual({ x: "-1.00", y: "-1.00" });
+    ).toEqual({ x: -1, y: -1 });
 
     fireEvent.doubleClick(pad);
 
     const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
-    expect(values["geometry.position"]).toEqual({ x: "0.48", y: "-0.34" });
+    expect(values["geometry.position"]).toEqual({ x: 0.48, y: -0.34 });
     expect(screen.getByText("0.48, -0.34")).toBeTruthy();
   });
 
@@ -181,7 +181,7 @@ describe("ControlsPanel vector pad interactions", () => {
     });
 
     const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
-    expect(values["geometry.position"]).toEqual({ x: "0.80", y: "0.00" });
+    expect(values["geometry.position"]).toEqual({ x: 0.8, y: 0 });
   });
 
   it("locks vector pad movement vertically when shift drag is y-dominant", () => {
@@ -241,7 +241,7 @@ describe("ControlsPanel vector pad interactions", () => {
     });
 
     const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
-    expect(values["geometry.position"]).toEqual({ x: "0.00", y: "0.80" });
+    expect(values["geometry.position"]).toEqual({ x: 0, y: 0.8 });
   });
 
   it("renders vector pad values as compact rounded coordinates", () => {
@@ -383,6 +383,6 @@ describe("ControlsPanel vector pad interactions", () => {
     });
 
     const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
-    expect(values["math.vector"]).toEqual({ x: "-1.00", y: "1.00" });
+    expect(values["math.vector"]).toEqual({ x: -1, y: 1 });
   });
 });

package/templates/runtime/react/controls-panel/actions/controls-panel-actions.ts

@@ -10,6 +10,7 @@ import type {
   ToolcraftActionCommand,
   ToolcraftActionSchema,
 } from "../../../schema/types";
+import { isToolcraftArtifactExportAction } from "../../../schema/artifact-export-actions";
 import type {
   ToolcraftCommand,
   ToolcraftState,
@@ -204,8 +205,7 @@ export function useControlsPanelActions({
         setPanelActionFeedback(feedback);
       }
     };
-    const runtimeOwnsExport =
-      action.role === "export-image" || action.role === "export-video";
+    const runtimeOwnsExport = isToolcraftArtifactExportAction(action);
     const command = runtimeOwnsExport
       ? null
       : action.command ?? (onPanelAction ? null : getActionCommand(action));

package/templates/runtime/react/controls-panel/actions/export-action-runner.ts

@@ -1,16 +1,14 @@
-import type {
-  ToolcraftArtifactExportRequest,
-} from "../../../export/artifact-export-request";
+import type { ToolcraftArtifactExportRequest } from "../../../export/artifact-export-request";
+import { ToolcraftArtifactExportError } from "../../../export/export-error";
 import type { ToolcraftExportFrame } from "../../../export/export-frame";
+import { exportToolcraftImageArtifact } from "../../../export/image-artifact-export";
+import type { ToolcraftProductExportRenderer } from "../../../export/product-export-renderer";
+import type { ToolcraftProductSvgExportRenderer } from "../../../export/product-svg-export-renderer";
 import {
-  exportToolcraftImageArtifact,
-} from "../../../export/image-artifact-export";
-import type {
-  ToolcraftProductExportRenderer,
-} from "../../../export/product-export-renderer";
-import {
-  exportToolcraftVideoArtifact,
-} from "../../../export/video-artifact-export";
+  exportToolcraftSvgArtifact,
+  type ToolcraftSvgArtifactExportRequest,
+} from "../../../export/svg-artifact-export";
+import { exportToolcraftVideoArtifact } from "../../../export/video-artifact-export";
 import type { ToolcraftRendererPipelineClient } from "../../../rendering";
 import type {
   ToolcraftProductSceneBoundsProvider,
@@ -23,6 +21,7 @@ export type ToolcraftControlsSceneExport = Readonly<{
   boundsProvider?: ToolcraftProductSceneBoundsProvider;
   exportRenderer?: ToolcraftProductExportRenderer;
   productSceneRequired: boolean;
+  svgExportRenderer?: ToolcraftProductSvgExportRenderer;
   visibility: ToolcraftRuntimeSceneVisibility;
 }>;
 
@@ -54,12 +53,42 @@ function createSharedArtifactRequest(
   };
 }
 
+function requireSvgExportRenderer(
+  renderer: ToolcraftProductSvgExportRenderer | undefined,
+): ToolcraftProductSvgExportRenderer {
+  if (!renderer) {
+    throw new ToolcraftArtifactExportError({
+      code: "svg-render-failed",
+      message: "SVG export requires svgExportRenderer.",
+    });
+  }
+  return renderer;
+}
+
+function createSvgArtifactRequest(
+  request: ToolcraftExportActionRequest,
+): ToolcraftSvgArtifactExportRequest {
+  return {
+    boundsProvider: request.sceneExport.boundsProvider,
+    productSceneRequired: request.sceneExport.productSceneRequired,
+    rendererPipeline: request.rendererPipeline,
+    reportProgress: request.reportProgress,
+    state: request.state,
+    svgExportRenderer: requireSvgExportRenderer(
+      request.sceneExport.svgExportRenderer,
+    ),
+    visibility: request.sceneExport.visibility,
+  };
+}
+
 export function runToolcraftExportAction(
   request: ToolcraftExportActionRequest,
 ): PromiseLike<unknown> | null {
   switch (request.action.role) {
     case "export-image":
       return exportToolcraftImageArtifact(createSharedArtifactRequest(request));
+    case "export-svg":
+      return exportToolcraftSvgArtifact(createSvgArtifactRequest(request));
     case "export-video":
       return exportToolcraftVideoArtifact(createSharedArtifactRequest(request));
     default:

package/templates/runtime/react/controls-panel/layout/controls-panel-layout.tsx

@@ -95,6 +95,7 @@ export function getControlsRecord(
 
 export function getControlRenderGroups(
   entries: readonly ControlEntry[],
+  sectionHasOnlyColorFields: boolean,
 ): ControlRenderGroup[] {
   const groups: ControlRenderGroup[] = [];
   let index = 0;
@@ -107,7 +108,12 @@ export function getControlRenderGroups(
       continue;
     }
 
-    if (entry[1].type !== "color") {
+    const colorBankKey = getPlainColorBankKey(
+      entry[1],
+      sectionHasOnlyColorFields,
+    );
+
+    if (!colorBankKey) {
       groups.push({ entry, kind: "control" });
       index += 1;
       continue;
@@ -115,7 +121,13 @@ export function getControlRenderGroups(
 
     const colorEntries: ControlEntry[] = [];
 
-    while (entries[index]?.[1].type === "color") {
+    while (
+      entries[index] &&
+      getPlainColorBankKey(
+        entries[index][1],
+        sectionHasOnlyColorFields,
+      ) === colorBankKey
+    ) {
       const colorEntry = entries[index];
 
       if (colorEntry) {
@@ -144,6 +156,23 @@ export function getControlRenderGroups(
   return groups;
 }
 
+function getPlainColorBankKey(
+  control: ToolcraftControlSchema,
+  sectionHasOnlyColorFields: boolean,
+): string | null {
+  if (control.type !== "color") {
+    return null;
+  }
+
+  if (sectionHasOnlyColorFields) {
+    return "color-only-section";
+  }
+
+  const semanticGroup = control.semanticGroup?.trim();
+
+  return semanticGroup ? `semantic:${semanticGroup}` : null;
+}
+
 export function getControlRenderGroupIds(
   group: ControlRenderGroup,
 ): readonly string[] {

package/templates/runtime/react/controls-panel/layout/controls-panel-section.tsx

@@ -353,7 +353,10 @@ export function getControlsPanelSectionGroups({
     controlsById: visibleControls,
     layoutGroups: section.layoutGroups,
   });
-  const renderedGroups = getControlRenderGroups(renderableEntries).map(
+  const renderedGroups = getControlRenderGroups(
+    renderableEntries,
+    sectionHasOnlyColorFields,
+  ).map(
     (group) => {
       const ids = getControlRenderGroupIds(group);
       const groupEntries =

package/templates/runtime/react/controls-panel/renderers/controls-panel-action-renderer.tsx

@@ -11,6 +11,7 @@ import type {
   ToolcraftActionSchema,
   ToolcraftControlSchema,
 } from "../../../schema/types";
+import { isToolcraftArtifactExportAction } from "../../../schema/artifact-export-actions";
 
 export type ActionControlRunAction = (
   action: ToolcraftActionSchema,
@@ -57,7 +58,7 @@ function getActionLabel(action: ToolcraftActionSchema): string {
 }
 
 function isExportPanelAction(action: ToolcraftActionSchema): boolean {
-  if (action.role === "export-image" || action.role === "export-video") {
+  if (isToolcraftArtifactExportAction(action)) {
     return true;
   }
 

package/templates/runtime/react/controls-panel/renderers/controls-panel-basic-renderers.tsx

@@ -40,7 +40,7 @@ const canvasAspectRatioOptions = [
     label: preset.value,
     value: preset.value,
   })),
-  { label: "Custom...", value: "custom" },
+  { label: "Custom", value: "custom" },
 ] as const;
 
 export type BasicControlCommit = (
@@ -110,64 +110,14 @@ function CanvasAspectRatioControl({
     }
   }
 
-  function updateCustomDimension(
-    dimension: "height" | "width",
-    nextValue: string,
-    meta?: ControlChangeMeta,
-  ): void {
-    const numberValue = Number.parseFloat(nextValue);
-
-    if (!Number.isFinite(numberValue) || numberValue <= 0) {
-      return;
-    }
-
-    const width =
-      dimension === "width" ? Math.max(1, Math.round(numberValue)) : ratio.width;
-    const height =
-      dimension === "height" ? Math.max(1, Math.round(numberValue)) : ratio.height;
-
-    commitRatio(
-      {
-        height,
-        mode: "custom",
-        value: `${width}:${height}`,
-        width,
-      },
-      meta,
-    );
-  }
-
   return (
-    <div className="min-w-0 space-y-2" data-slot="canvas-aspect-ratio-control">
+    <div className="min-w-0" data-slot="canvas-aspect-ratio-control">
       <Select
         name={name}
         onValueChange={updatePreset}
         options={canvasAspectRatioOptions}
         value={selectedValue}
       />
-      {ratio.mode === "custom" ? (
-        <TextInput
-          inputs={[
-            {
-              commitOnBlur: true,
-              defaultValue: String(ratio.width),
-              name: "Width",
-              onValueChange: (nextValue, meta) =>
-                updateCustomDimension("width", nextValue, meta),
-              value: String(ratio.width),
-            },
-            {
-              commitOnBlur: true,
-              defaultValue: String(ratio.height),
-              name: "Height",
-              onValueChange: (nextValue, meta) =>
-                updateCustomDimension("height", nextValue, meta),
-              value: String(ratio.height),
-            },
-          ]}
-          inputsPerRow={2}
-        />
-      ) : null}
     </div>
   );
 }

package/templates/runtime/react/controls-panel/values/controls-panel-color-values.ts

@@ -24,15 +24,7 @@ export const defaultChannelMixerValues = {
 } satisfies ChannelMixerValues;
 
 export function asColorValue(value: unknown): { hex: string } {
-  if (typeof value === "string") {
-    return { hex: value };
-  }
-
-  if (isRecord(value)) {
-    return { hex: asString(value.hex, "#C1FF00") };
-  }
-
-  return { hex: "#C1FF00" };
+  return { hex: asString(value, "#C1FF00") };
 }
 
 export function asColorOpacityValue(value: unknown): ColorOpacityValue {

package/templates/runtime/react/controls-panel/values/controls-panel-spatial-values.ts

@@ -22,9 +22,14 @@ export function asRangeInputValue(value: unknown): { end: string; start: string
 
 export function asVectorValue(value: unknown): { x: string; y: string } {
   if (isRecord(value)) {
+    const asVectorComponent = (component: unknown): string =>
+      typeof component === "number" && Number.isFinite(component)
+        ? String(component)
+        : asString(component, "0.00");
+
     return {
-      x: asString(value.x, "0.00"),
-      y: asString(value.y, "0.00"),
+      x: asVectorComponent(value.x),
+      y: asVectorComponent(value.y),
     };
   }
 

package/templates/runtime/react/orientation-gizmo/orientation-gizmo-math.ts

@@ -10,13 +10,17 @@ import {
   scaleOrientationVector,
   type ToolcraftOrientationVector,
 } from "./orientation-quaternion";
+import {
+  readToolcraftOrientationPose,
+  type ToolcraftOrientationPose,
+} from "../../state/orientation-pose";
 
 export { ToolcraftOrientationQuaternion } from "./orientation-quaternion";
-
-export type ToolcraftOrientationPose = Readonly<{
-  position: readonly [number, number, number];
-  up: readonly [number, number, number];
-}>;
+export {
+  DEFAULT_TOOLCRAFT_ORIENTATION_POSE,
+  readToolcraftOrientationPose,
+  type ToolcraftOrientationPose,
+} from "../../state/orientation-pose";
 
 export type ToolcraftOrientationAxis = "+x" | "-x" | "+y" | "-y" | "+z" | "-z";
 
@@ -28,11 +32,6 @@ export type ToolcraftOrientationAxisProjection = {
   y: number;
 };
 
-export const DEFAULT_TOOLCRAFT_ORIENTATION_POSE: ToolcraftOrientationPose = {
-  position: [0, 0, 5],
-  up: [0, 1, 0],
-};
-
 export const TOOLCRAFT_ORIENTATION_AXES: readonly ToolcraftOrientationAxis[] = [
   "+x",
   "-x",
@@ -46,7 +45,6 @@ export const TOOLCRAFT_TURNTABLE_RADIANS_PER_PIXEL = Math.PI / 450;
 export const TOOLCRAFT_ORIENTATION_SMOOTH_VIEW_MS = 200;
 
 const worldUp: ToolcraftOrientationVector = [0, 1, 0];
-const minimumLengthSquared = 1e-12;
 
 const axisVectors: Record<
   ToolcraftOrientationAxis,
@@ -60,64 +58,6 @@ const axisVectors: Record<
   "-z": [0, 0, -1],
 };
 
-function clonePose(pose: ToolcraftOrientationPose): ToolcraftOrientationPose {
-  return {
-    position: [...pose.position],
-    up: [...pose.up],
-  };
-}
-
-function readFiniteTuple(value: unknown): [number, number, number] | null {
-  if (
-    !Array.isArray(value) ||
-    value.length !== 3 ||
-    !value.every((entry) => typeof entry === "number" && Number.isFinite(entry))
-  ) {
-    return null;
-  }
-
-  return [value[0], value[1], value[2]];
-}
-
-function isUsablePose(pose: ToolcraftOrientationPose): boolean {
-  const positionLength = getOrientationVectorLength(pose.position);
-  const upLength = getOrientationVectorLength(pose.up);
-  const crossLength = getOrientationVectorLength(
-    crossOrientationVectors(pose.up, pose.position),
-  );
-
-  return (
-    positionLength * positionLength > minimumLengthSquared &&
-    upLength * upLength > minimumLengthSquared &&
-    crossLength * crossLength > minimumLengthSquared
-  );
-}
-
-export function readToolcraftOrientationPose(
-  value: unknown,
-  fallback: ToolcraftOrientationPose = DEFAULT_TOOLCRAFT_ORIENTATION_POSE,
-): ToolcraftOrientationPose {
-  const safeFallback = isUsablePose(fallback)
-    ? fallback
-    : DEFAULT_TOOLCRAFT_ORIENTATION_POSE;
-
-  if (!value || typeof value !== "object") {
-    return clonePose(safeFallback);
-  }
-
-  const record = value as Record<string, unknown>;
-  const position = readFiniteTuple(record.position);
-  const up = readFiniteTuple(record.up);
-
-  if (!position || !up) {
-    return clonePose(safeFallback);
-  }
-
-  const pose = { position, up };
-
-  return isUsablePose(pose) ? clonePose(pose) : clonePose(safeFallback);
-}
-
 export function getToolcraftOrientationRadius(
   pose: ToolcraftOrientationPose,
 ): number {

package/templates/runtime/schema/artifact-export-actions.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "./define-toolcraft";
+import {
+  getToolcraftArtifactExportActions,
+  isToolcraftArtifactExportActionRole,
+} from "./artifact-export-actions";
+
+describe("artifact export actions", () => {
+  it("recognizes the closed runtime-owned role set", () => {
+    expect(isToolcraftArtifactExportActionRole("export-image")).toBe(true);
+    expect(isToolcraftArtifactExportActionRole("export-svg")).toBe(true);
+    expect(isToolcraftArtifactExportActionRole("export-video")).toBe(true);
+    expect(isToolcraftArtifactExportActionRole("download-output")).toBe(false);
+  });
+
+  it("collects typed export actions only from sticky panelActions", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                local: {
+                  actions: [{ role: "export-svg", value: "local.svg" }],
+                  target: "local.actions",
+                  type: "actions",
+                },
+                output: {
+                  actions: [{ role: "export-svg", value: "export.svg" }],
+                  target: "output.actions",
+                  type: "panelActions",
+                },
+              },
+              id: "actions",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(getToolcraftArtifactExportActions(schema).map(({ value }) => value))
+      .toEqual(["export.svg"]);
+  });
+});

package/templates/runtime/schema/artifact-export-actions.ts

@@ -0,0 +1,49 @@
+import type {
+  ResolvedToolcraftAppSchema,
+  ToolcraftActionRole,
+  ToolcraftActionSchema,
+} from "./types";
+
+export const TOOLCRAFT_ARTIFACT_EXPORT_ACTION_ROLES = [
+  "export-image",
+  "export-svg",
+  "export-video",
+] as const satisfies readonly ToolcraftActionRole[];
+
+export type ToolcraftArtifactExportActionRole =
+  (typeof TOOLCRAFT_ARTIFACT_EXPORT_ACTION_ROLES)[number];
+
+const artifactExportActionRoleSet = new Set<ToolcraftActionRole>(
+  TOOLCRAFT_ARTIFACT_EXPORT_ACTION_ROLES,
+);
+
+export function isToolcraftArtifactExportActionRole(
+  role: ToolcraftActionRole | undefined,
+): role is ToolcraftArtifactExportActionRole {
+  return role !== undefined && artifactExportActionRoleSet.has(role);
+}
+
+export function isToolcraftArtifactExportAction(
+  action: ToolcraftActionSchema | string,
+): action is ToolcraftActionSchema & {
+  role: ToolcraftArtifactExportActionRole;
+} {
+  return (
+    typeof action !== "string" &&
+    isToolcraftArtifactExportActionRole(action.role)
+  );
+}
+
+export function getToolcraftArtifactExportActions(
+  schema: ResolvedToolcraftAppSchema,
+): readonly (ToolcraftActionSchema & {
+  role: ToolcraftArtifactExportActionRole;
+})[] {
+  return (schema.panels.controls?.sections ?? []).flatMap((section) =>
+    Object.values(section.controls).flatMap((control) =>
+      control.type === "panelActions"
+        ? (control.actions ?? []).filter(isToolcraftArtifactExportAction)
+        : [],
+    ),
+  );
+}

package/templates/runtime/schema/types.ts

@@ -277,6 +277,7 @@ export type ToolcraftActionRole =
   | "copy-output"
   | "download-output"
   | "export-image"
+  | "export-svg"
   | "export-video";
 
 export type ToolcraftActionSchema = {

package/templates/runtime/state/canvas-background-state.ts

@@ -5,21 +5,6 @@ import {
 import type { ResolvedToolcraftAppSchema } from "../schema/types";
 import type { ToolcraftState } from "./types";
 
-function getToolcraftColorHex(value: unknown): string | undefined {
-  const candidate =
-    typeof value === "string"
-      ? value
-      : value !== null &&
-          typeof value === "object" &&
-          "hex" in value &&
-          typeof value.hex === "string"
-        ? value.hex
-        : undefined;
-  const normalized = candidate?.trim();
-
-  return normalized ? normalized : undefined;
-}
-
 export function hasToolcraftRuntimeSetupBackground(
   schema: ResolvedToolcraftAppSchema,
 ): boolean {
@@ -75,5 +60,5 @@ export function getToolcraftRuntimeBackgroundColor(
     ? state.values[background.color.target] ?? background.color.defaultValue
     : undefined;
 
-  return getToolcraftColorHex(value);
+  return typeof value === "string" ? value : undefined;
 }

package/templates/runtime/state/canvas-state.ts

@@ -86,32 +86,44 @@ function parseCanvasAspectRatioString(
   };
 }
 
-export function normalizeToolcraftCanvasAspectRatioValue(
+export function decodeToolcraftCanvasAspectRatioValue(
   value: unknown,
-  fallbackSize: ToolcraftState["canvas"]["size"],
-): ToolcraftCanvasAspectRatioValue {
+): ToolcraftCanvasAspectRatioValue | null {
   if (typeof value === "string") {
-    return parseCanvasAspectRatioString(value) ?? getToolcraftCanvasAspectRatioFromSize(fallbackSize);
+    return parseCanvasAspectRatioString(value);
+  }
+
+  if (!isRecord(value)) {
+    return null;
   }
 
-  if (isRecord(value)) {
-    const width = asToolcraftCanvasSizeDimension(value.width);
-    const height = asToolcraftCanvasSizeDimension(value.height);
-
-    if (width !== null && height !== null) {
-      const rawValue = typeof value.value === "string" ? value.value : `${width}:${height}`;
-      const mode = value.mode === "preset" ? "preset" : "custom";
-
-      return {
-        height,
-        mode,
-        value: mode === "preset" ? rawValue : `${width}:${height}`,
-        width,
-      };
-    }
+  const width = asToolcraftCanvasSizeDimension(value.width);
+  const height = asToolcraftCanvasSizeDimension(value.height);
+
+  if (width === null || height === null) {
+    return null;
   }
 
-  return getToolcraftCanvasAspectRatioFromSize(fallbackSize);
+  const rawValue =
+    typeof value.value === "string" ? value.value : `${width}:${height}`;
+  const mode = value.mode === "preset" ? "preset" : "custom";
+
+  return {
+    height,
+    mode,
+    value: mode === "preset" ? rawValue : `${width}:${height}`,
+    width,
+  };
+}
+
+export function normalizeToolcraftCanvasAspectRatioValue(
+  value: unknown,
+  fallbackSize: ToolcraftState["canvas"]["size"],
+): ToolcraftCanvasAspectRatioValue {
+  return (
+    decodeToolcraftCanvasAspectRatioValue(value) ??
+    getToolcraftCanvasAspectRatioFromSize(fallbackSize)
+  );
 }
 
 export function toolcraftCanvasAspectRatioValuesEqual(