@pixel-point/toolcraft 0.0.16 → 0.0.18

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

@@ -0,0 +1,68 @@
+import type {
+  ToolcraftArtifactExportRequest,
+} from "../../../export/artifact-export-request";
+import type { ToolcraftExportFrame } from "../../../export/export-frame";
+import {
+  exportToolcraftImageArtifact,
+} from "../../../export/image-artifact-export";
+import type {
+  ToolcraftProductExportRenderer,
+} from "../../../export/product-export-renderer";
+import {
+  exportToolcraftVideoArtifact,
+} from "../../../export/video-artifact-export";
+import type { ToolcraftRendererPipelineClient } from "../../../rendering";
+import type {
+  ToolcraftProductSceneBoundsProvider,
+  ToolcraftRuntimeSceneVisibility,
+} from "../../../scene";
+import type { ToolcraftActionSchema } from "../../../schema/types";
+import type { ToolcraftState } from "../../../state/types";
+
+export type ToolcraftControlsSceneExport = Readonly<{
+  boundsProvider?: ToolcraftProductSceneBoundsProvider;
+  exportRenderer?: ToolcraftProductExportRenderer;
+  productSceneRequired: boolean;
+  visibility: ToolcraftRuntimeSceneVisibility;
+}>;
+
+export type ToolcraftExportActionRequest = Readonly<{
+  action: ToolcraftActionSchema;
+  renderRuntimeScene: (
+    canvas: HTMLCanvasElement,
+    frame: ToolcraftExportFrame,
+    state: ToolcraftState,
+  ) => Promise<unknown>;
+  rendererPipeline: ToolcraftRendererPipelineClient | null;
+  reportProgress: (progress: number) => void;
+  sceneExport: ToolcraftControlsSceneExport;
+  state: ToolcraftState;
+}>;
+
+function createSharedArtifactRequest(
+  request: ToolcraftExportActionRequest,
+): ToolcraftArtifactExportRequest {
+  return {
+    boundsProvider: request.sceneExport.boundsProvider,
+    exportRenderer: request.sceneExport.exportRenderer,
+    productSceneRequired: request.sceneExport.productSceneRequired,
+    renderRuntimeScene: request.renderRuntimeScene,
+    rendererPipeline: request.rendererPipeline,
+    reportProgress: request.reportProgress,
+    state: request.state,
+    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-video":
+      return exportToolcraftVideoArtifact(createSharedArtifactRequest(request));
+    default:
+      return null;
+  }
+}

package/templates/runtime/react/controls-panel/conditions/control-conditions.ts

@@ -3,67 +3,21 @@ import {
   isToolcraftTimelinePanelExtendedTarget,
   isToolcraftTimelinePanelVisibleTarget,
 } from "../../../schema/runtime-targets";
+import {
+  doesToolcraftApplicabilityMatch,
+  doesToolcraftPredicateMatchValue,
+  getToolcraftApplicabilityTargets,
+} from "../../../schema/control-applicability";
 import type {
   ToolcraftControlConditionSchema,
-  ToolcraftControlSchema,
-  ToolcraftControlSectionSchema,
+  ResolvedToolcraftControlSchema,
+  ResolvedToolcraftControlSectionSchema,
 } from "../../../schema/types";
 import type { ToolcraftState } from "../../../state/types";
 import { readToolcraftCanvasRuntimeTarget } from "../../../state/canvas-frame";
 
-function valuesEqual(first: unknown, second: unknown): boolean {
-  if (Object.is(first, second)) {
-    return true;
-  }
-
-  if (
-    (typeof first !== "object" || first === null) &&
-    (typeof second !== "object" || second === null)
-  ) {
-    return false;
-  }
-
-  try {
-    return JSON.stringify(first) === JSON.stringify(second);
-  } catch {
-    return false;
-  }
-}
-
-function valuesInclude(value: unknown, options: readonly unknown[]): boolean {
-  return options.some((option) => valuesEqual(value, option));
-}
-
-function readComparableNumber(value: unknown): number | null {
-  if (typeof value === "number" && Number.isFinite(value)) {
-    return value;
-  }
-
-  if (typeof value === "string") {
-    const numberValue = Number(value.trim());
-
-    return Number.isFinite(numberValue) ? numberValue : null;
-  }
-
-  return null;
-}
-
-function compareConditionNumbers(
-  value: unknown,
-  expected: number | undefined,
-  comparator: (value: number, expected: number) => boolean,
-): boolean | null {
-  if (typeof expected !== "number" || !Number.isFinite(expected)) {
-    return null;
-  }
-
-  const numberValue = readComparableNumber(value);
-
-  return numberValue === null ? false : comparator(numberValue, expected);
-}
-
 function getControlDefaultValueByTarget(
-  sections: readonly ToolcraftControlSectionSchema[],
+  sections: readonly ResolvedToolcraftControlSectionSchema[],
   target: string,
 ): unknown {
   for (const section of sections) {
@@ -119,22 +73,28 @@ export function getToolcraftConditionTargets(
 }
 
 export function getToolcraftControlConditionTargets(
-  control: ToolcraftControlSchema,
+  control: ResolvedToolcraftControlSchema,
 ): string[] {
-  return getToolcraftConditionTargets(
-    control.visibleWhen,
-    control.disabledWhen,
-  );
+  return [
+    ...new Set([
+      ...getToolcraftApplicabilityTargets(
+        control.applicability,
+      ),
+      ...getToolcraftConditionTargets(control.disabledWhen),
+    ]),
+  ];
 }
 
 export function getToolcraftControlVisibilityTargets(
-  control: ToolcraftControlSchema,
+  control: ResolvedToolcraftControlSchema,
 ): string[] {
-  return getToolcraftConditionTargets(control.visibleWhen);
+  return getToolcraftApplicabilityTargets(
+    control.applicability,
+  );
 }
 
 export function getToolcraftSectionVisibilityTargets(
-  section: ToolcraftControlSectionSchema,
+  section: ResolvedToolcraftControlSectionSchema,
 ): string[] {
   return getToolcraftConditionTargets(section.visibleWhen);
 }
@@ -143,63 +103,15 @@ export function toolcraftConditionMatches(
   state: ToolcraftState,
   condition: ToolcraftControlConditionSchema,
 ): boolean {
-  const value = getToolcraftTargetValue(state, condition.target);
-  const matches: boolean[] = [];
-
-  if ("equals" in condition) {
-    matches.push(valuesEqual(value, condition.equals));
-  }
-
-  if ("notEquals" in condition) {
-    matches.push(!valuesEqual(value, condition.notEquals));
-  }
-
-  if (Array.isArray(condition.oneOf)) {
-    matches.push(valuesInclude(value, condition.oneOf));
-  }
-
-  if (Array.isArray(condition.notOneOf)) {
-    matches.push(!valuesInclude(value, condition.notOneOf));
-  }
-
-  const greaterThan = compareConditionNumbers(
-    value,
-    condition.greaterThan,
-    (numberValue, expected) => numberValue > expected,
-  );
-  const greaterThanOrEqual = compareConditionNumbers(
-    value,
-    condition.greaterThanOrEqual,
-    (numberValue, expected) => numberValue >= expected,
+  return doesToolcraftPredicateMatchValue(
+    condition,
+    getToolcraftTargetValue(state, condition.target),
   );
-  const lessThan = compareConditionNumbers(
-    value,
-    condition.lessThan,
-    (numberValue, expected) => numberValue < expected,
-  );
-  const lessThanOrEqual = compareConditionNumbers(
-    value,
-    condition.lessThanOrEqual,
-    (numberValue, expected) => numberValue <= expected,
-  );
-
-  for (const match of [
-    greaterThan,
-    greaterThanOrEqual,
-    lessThan,
-    lessThanOrEqual,
-  ]) {
-    if (match !== null) {
-      matches.push(match);
-    }
-  }
-
-  return matches.length > 0 && matches.every(Boolean);
 }
 
 export function isToolcraftSectionVisible(
   state: ToolcraftState,
-  section: ToolcraftControlSectionSchema,
+  section: ResolvedToolcraftControlSectionSchema,
 ): boolean {
   return section.visibleWhen
     ? toolcraftConditionMatches(state, section.visibleWhen)
@@ -208,16 +120,17 @@ export function isToolcraftSectionVisible(
 
 export function isToolcraftControlVisible(
   state: ToolcraftState,
-  control: ToolcraftControlSchema,
+  control: ResolvedToolcraftControlSchema,
 ): boolean {
-  return control.visibleWhen
-    ? toolcraftConditionMatches(state, control.visibleWhen)
-    : true;
+  return doesToolcraftApplicabilityMatch(
+    control.applicability,
+    (target) => getToolcraftTargetValue(state, target),
+  );
 }
 
 export function isToolcraftControlDisabled(
   state: ToolcraftState,
-  control: ToolcraftControlSchema,
+  control: ResolvedToolcraftControlSchema,
 ): boolean {
   if (control.disabled) {
     return true;

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

@@ -29,7 +29,7 @@ import { LiveCustomControl } from "../live-custom-control";
 import type { ActionControlRunAction } from "../renderers/controls-panel-action-renderer";
 import { renderActionControl } from "../renderers/controls-panel-action-renderer";
 import { renderBasicControl } from "../renderers/controls-panel-basic-renderers";
-import { renderCollectionActionsControl } from "../renderers/controls-panel-collection-renderer";
+import { renderCollectionControl } from "../renderers/controls-panel-collection-renderer";
 import {
   renderCompoundColorGroup,
   renderCompoundControl,
@@ -419,7 +419,7 @@ export const ControlsPanelControlGroup = React.memo(
         node = null;
         break;
       case "collection":
-        node = renderCollectionActionsControl({
+        node = renderCollectionControl({
           control,
           name,
           setControlValue,
@@ -448,7 +448,10 @@ export const ControlsPanelControlGroup = React.memo(
           id,
           layerSelectionEnabled: !mediaPreviewEnabled,
           mediaAssets: mediaPreviewEnabled ? (selection.mediaAssets ?? []) : [],
+          name,
+          setControlValue,
           sourceAssetCoordinator,
+          value,
         });
         break;
       case "settings":

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

@@ -3,7 +3,8 @@
 import * as React from "react";
 
 import type {
-  ToolcraftControlSectionSchema,
+  ResolvedToolcraftControlSectionSchema,
+  ResolvedToolcraftControlSchema,
   ToolcraftControlSchema,
 } from "../../../schema/types";
 import {
@@ -12,7 +13,7 @@ import {
 } from "../../../schema/runtime-targets";
 import { getToolcraftControlRendererKind } from "../renderers/controls-panel-renderer-registry";
 
-export type ControlEntry = [string, ToolcraftControlSchema];
+export type ControlEntry = [string, ResolvedToolcraftControlSchema];
 
 export type ControlRenderGroup =
   | { entries: readonly ControlEntry[]; kind: "colorGroup" }
@@ -41,6 +42,7 @@ const hiddenDiscreteMarkerCount = 2;
 const sectionedCompoundControlTypes = new Set([
   "channelMixer",
   "collectionActions",
+  "sourceCollection",
   "fontPicker",
   "gradient",
   "palette",
@@ -87,7 +89,7 @@ export function getControlName(
 
 export function getControlsRecord(
   entries: readonly ControlEntry[],
-): Record<string, ToolcraftControlSchema> {
+): Record<string, ResolvedToolcraftControlSchema> {
   return Object.fromEntries(entries);
 }
 
@@ -151,7 +153,7 @@ export function getControlRenderGroupIds(
 }
 
 export function countControlsByType(
-  sections: readonly ToolcraftControlSectionSchema[],
+  sections: readonly ResolvedToolcraftControlSectionSchema[],
   type: string,
 ): number {
   return sections.reduce(
@@ -186,8 +188,8 @@ export function isColorOnlySection(entries: readonly ControlEntry[]): boolean {
 }
 
 export function getRenderedControlsSectionTitle(
-  section: ToolcraftControlSectionSchema,
-): ToolcraftControlSectionSchema["title"] {
+  section: ResolvedToolcraftControlSectionSchema,
+): ResolvedToolcraftControlSectionSchema["title"] {
   return isStickyFooterActionSection(section) ? undefined : section.title;
 }
 
@@ -196,7 +198,7 @@ export function isRuntimeSetupSection({
   section,
 }: {
   entries: readonly ControlEntry[];
-  section: ToolcraftControlSectionSchema;
+  section: ResolvedToolcraftControlSectionSchema;
 }): boolean {
   return (
     section.title === "Setup" &&
@@ -205,7 +207,7 @@ export function isRuntimeSetupSection({
 }
 
 function isStickyFooterActionSection(
-  section: ToolcraftControlSectionSchema,
+  section: ResolvedToolcraftControlSectionSchema,
 ): boolean {
   return (
     section.actionGroup !== undefined &&

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

@@ -10,7 +10,7 @@ import {
   TooltipTrigger,
 } from "@repo/ui";
 
-import type { ToolcraftControlSectionSchema } from "../../../schema/types";
+import type { ResolvedToolcraftControlSectionSchema } from "../../../schema/types";
 import type { ToolcraftStoreDependency } from "../../../state/toolcraft-external-store-dependencies";
 import type {
   ToolcraftCommand,
@@ -56,7 +56,7 @@ export type ControlsPanelSectionGroupsArgs = {
   headerKeyframeTarget: string | null;
   keyframesSupported: boolean;
   runAction: ActionControlRunAction;
-  section: ToolcraftControlSectionSchema;
+  section: ResolvedToolcraftControlSectionSchema;
   setControlValue: ControlsPanelSetControlValue;
   vectorPadShape: "compact" | "square";
 };
@@ -66,7 +66,7 @@ export type ControlsPanelSectionProps = Omit<
   "headerKeyframeTarget"
 > & {
   "data-toolcraft-panel-section": "";
-  actionGroup: ToolcraftControlSectionSchema["actionGroup"];
+  actionGroup: ResolvedToolcraftControlSectionSchema["actionGroup"];
   collapsed: boolean;
   onCollapsedChange: (sectionCollapseKey: string, collapsed: boolean) => void;
   sectionCollapseKey: string;

package/templates/runtime/react/controls-panel/renderers/controls-panel-collection-item-fields.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ControlsPanelCollectionItemFields } from "./controls-panel-collection-item-fields";
+
+describe("ControlsPanelCollectionItemFields", () => {
+  it("commits one complete record while preserving sibling and unknown keys", () => {
+    const onChange = vi.fn();
+
+    render(
+      <ControlsPanelCollectionItemFields
+        controls={{
+          strength: {
+            defaultValue: 0.5,
+            label: "Strength",
+            max: 1,
+            min: 0,
+            step: 0.1,
+            type: "slider",
+          },
+          invert: {
+            defaultValue: false,
+            label: "Invert",
+            type: "switch",
+          },
+          tint: {
+            defaultValue: { hex: "#FFFFFF", opacity: 100 },
+            label: "Tint",
+            type: "colorOpacity",
+          },
+        }}
+        id="surface.layers:0"
+        onChange={onChange}
+        target="surface.layers"
+        value={{
+          invert: true,
+          rendererToken: "keep",
+          strength: 0.4,
+          tint: { hex: "#EEDDCC", opacity: 80 },
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Edit Strength value" }));
+    const editor = screen.getByRole("textbox", { name: "Strength value" });
+    editor.textContent = "0.7";
+    fireEvent.keyDown(editor, { key: "Enter" });
+
+    expect(onChange).toHaveBeenCalledWith(
+      {
+        invert: true,
+        rendererToken: "keep",
+        strength: 0.7,
+        tint: { hex: "#EEDDCC", opacity: 80 },
+      },
+      "Strength",
+      undefined,
+    );
+    expect(screen.getByText("Invert")).toBeTruthy();
+    expect(screen.getByText("Tint")).toBeTruthy();
+    expect(screen.queryByText(/Item 1/u)).toBeNull();
+  });
+});

package/templates/runtime/react/controls-panel/renderers/controls-panel-collection-item-fields.tsx

@@ -0,0 +1,138 @@
+import * as React from "react";
+import type { ControlChangeMeta } from "@repo/ui";
+
+import type {
+  ToolcraftCollectionItemControlSchema,
+  ToolcraftCollectionItemControlsSchema,
+  ToolcraftControlSchema,
+} from "../../../schema/types";
+import { renderBasicControl } from "./controls-panel-basic-renderers";
+import { renderCompoundControl } from "./controls-panel-compound-renderers";
+
+type ItemFieldChange = (nextValue: unknown, meta?: ControlChangeMeta) => void;
+
+function renderWithoutKeyframeAction({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactNode {
+  return children;
+}
+
+function getFieldName(
+  id: string,
+  control: ToolcraftCollectionItemControlSchema,
+): string {
+  if (typeof control.label === "string") {
+    return control.label;
+  }
+
+  return id
+    .replace(/([a-z0-9])([A-Z])/gu, "$1 $2")
+    .replace(/[-_.]+/gu, " ")
+    .replace(/^./u, (character) => character.toUpperCase());
+}
+
+function asItemRecord(value: unknown): Record<string, unknown> {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    return {};
+  }
+
+  return Object.fromEntries(Object.entries(value));
+}
+
+export function ControlsPanelCollectionItemField({
+  colorLabelMode,
+  control,
+  id,
+  name,
+  onChange,
+  target,
+  value,
+}: {
+  colorLabelMode: "authored" | "hidden";
+  control: ToolcraftCollectionItemControlSchema;
+  id: string;
+  name: string;
+  onChange: ItemFieldChange;
+  target: string;
+  value: unknown;
+}): React.JSX.Element {
+  const fieldSchema: ToolcraftControlSchema = { ...control, target };
+  const shouldShowColorFieldLabel = () =>
+    colorLabelMode === "authored" && control.label !== false;
+  const rendered =
+    renderBasicControl({
+      commit: onChange,
+      control: fieldSchema,
+      id,
+      name,
+      usesHeaderKeyframeAction: false,
+      value,
+      vectorPadShape: "compact",
+      withKeyframeLabelAction: renderWithoutKeyframeAction,
+    }) ??
+    renderCompoundControl({
+      commit: onChange,
+      commitWithLabel: () => onChange,
+      control: fieldSchema,
+      id,
+      name,
+      sectionHasOnlyColorFields: false,
+      shouldShowColorFieldLabel,
+      usesHeaderKeyframeAction: false,
+      value,
+      withKeyframeLabelAction: renderWithoutKeyframeAction,
+    });
+
+  if (rendered == null) {
+    throw new Error(
+      `Unsupported Toolcraft collection item field: ${control.type}`,
+    );
+  }
+
+  return <>{rendered}</>;
+}
+
+export function ControlsPanelCollectionItemFields({
+  controls,
+  id,
+  onChange,
+  target,
+  value,
+}: {
+  controls: ToolcraftCollectionItemControlsSchema;
+  id: string;
+  onChange: (
+    nextValue: Readonly<Record<string, unknown>>,
+    fieldName: string,
+    meta?: ControlChangeMeta,
+  ) => void;
+  target: string;
+  value: unknown;
+}): React.JSX.Element {
+  const record = asItemRecord(value);
+
+  return (
+    <div className="min-w-0 space-y-4" data-slot="collection-item-fields">
+      {Object.entries(controls).map(([fieldId, field]) => {
+        const fieldName = getFieldName(fieldId, field);
+
+        return (
+          <ControlsPanelCollectionItemField
+            colorLabelMode="authored"
+            control={field}
+            id={`${id}:${fieldId}`}
+            key={fieldId}
+            name={fieldName}
+            onChange={(nextValue, meta) =>
+              onChange({ ...record, [fieldId]: nextValue }, fieldName, meta)
+            }
+            target={target}
+            value={record[fieldId] ?? field.defaultValue}
+          />
+        );
+      })}
+    </div>
+  );
+}