@pixel-point/toolcraft 0.0.17 → 0.0.18

package/templates/runtime/react/controls-panel/__tests__/controls-panel.control-visibility.test.tsx

@@ -136,7 +136,7 @@ describe("ControlsPanel conditional control visibility", () => {
     ).toHaveLength(0);
   });
 
-  it("renders only controls that match the current visibleWhen mode", async () => {
+  it("renders only applicable controls and preserves hidden values", async () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -145,6 +145,7 @@ describe("ControlsPanel conditional control visibility", () => {
             {
               controls: {
                 identityMode: {
+                  applicability: { mode: "always" },
                   defaultValue: "text",
                   label: "Identity",
                   options: [
@@ -155,24 +156,30 @@ describe("ControlsPanel conditional control visibility", () => {
                   type: "segmented",
                 },
                 partnerName: {
+                  applicability: {
+                    all: [
+                      { equals: "text", target: "coBrand.identityMode" },
+                      { equals: true, target: "coBrand.partnerEnabled" },
+                    ],
+                    mode: "conditional",
+                  },
                   defaultValue: "tRPC",
                   label: "Partner",
                   target: "coBrand.partnerName",
                   type: "text",
-                  visibleWhen: {
-                    equals: "text",
-                    target: "coBrand.identityMode",
-                  },
                 },
                 partnerLogo: {
+                  applicability: {
+                    all: [
+                      { equals: "logo", target: "coBrand.identityMode" },
+                      { equals: true, target: "coBrand.partnerEnabled" },
+                    ],
+                    mode: "conditional",
+                  },
                   defaultValue: "logo.svg",
                   label: "Partner logo",
                   target: "coBrand.partnerLogo",
                   type: "text",
-                  visibleWhen: {
-                    equals: "logo",
-                    target: "coBrand.identityMode",
-                  },
                 },
               },
               title: "Partner Lockup",
@@ -183,7 +190,9 @@ describe("ControlsPanel conditional control visibility", () => {
       },
     });
 
-    renderControlsPanelWithSchema(schema);
+    renderControlsPanelWithSchema(schema, {}, {
+      values: { "coBrand.partnerEnabled": true },
+    });
 
     const partnerInput = screen.getByDisplayValue("tRPC");
 
@@ -208,7 +217,7 @@ describe("ControlsPanel conditional control visibility", () => {
     });
   });
 
-  it("renders count-dependent controls through numeric visibleWhen conditions", () => {
+  it("renders count-dependent controls through numeric applicability", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -217,6 +226,7 @@ describe("ControlsPanel conditional control visibility", () => {
             {
               controls: {
                 shadeCount: {
+                  applicability: { mode: "always" },
                   defaultValue: 2,
                   label: "Shades",
                   max: 5,
@@ -227,30 +237,41 @@ describe("ControlsPanel conditional control visibility", () => {
                   variant: "discrete",
                 },
                 shade1: {
+                  applicability: { mode: "always" },
                   defaultValue: { hex: "#FFFFFF" },
                   label: "Shade 1",
                   target: "shapes.color1",
                   type: "color",
                 },
                 shade2: {
+                  applicability: {
+                    all: [
+                      {
+                        greaterThanOrEqual: 2,
+                        target: "shapes.shadeCount",
+                      },
+                    ],
+                    mode: "conditional",
+                  },
                   defaultValue: { hex: "#DDDDDD" },
                   label: "Shade 2",
                   target: "shapes.color2",
                   type: "color",
-                  visibleWhen: {
-                    greaterThanOrEqual: 2,
-                    target: "shapes.shadeCount",
-                  },
                 },
                 shade3: {
+                  applicability: {
+                    all: [
+                      {
+                        greaterThanOrEqual: 3,
+                        target: "shapes.shadeCount",
+                      },
+                    ],
+                    mode: "conditional",
+                  },
                   defaultValue: { hex: "#BBBBBB" },
                   label: "Shade 3",
                   target: "shapes.color3",
                   type: "color",
-                  visibleWhen: {
-                    greaterThanOrEqual: 3,
-                    target: "shapes.shadeCount",
-                  },
                 },
               },
               title: "Shapes",

package/templates/runtime/react/controls-panel/__tests__/controls-panel.scene-export-actions.test.tsx

@@ -1,4 +1,4 @@
-import { ToolcraftSceneExportError } from "../../../export";
+import { ToolcraftSceneExportError } from "../../../export/export-frame";
 import { defaultToolcraftRuntimeSceneVisibility } from "../../../scene";
 import type { ToolcraftActionSchema } from "../../../schema/types";
 import {

package/templates/runtime/react/controls-panel/__tests__/controls-panel.source-collection.test.tsx

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanelWithSchema,
+  screen,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel source collection", () => {
+  it("renders source-sized built-in color controls without cardinality actions", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                sections: {
+                  defaultValue: [{ hex: "#DFFF1A" }, { hex: "#8CFF3A" }],
+                  itemControl: {
+                    label: "Section",
+                    type: "color",
+                  },
+                  label: "Sections",
+                  target: "fills.sections",
+                  type: "sourceCollection",
+                },
+              },
+              title: "Fill Sections",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(screen.queryByRole("button", { name: /Add/u })).toBeNull();
+    expect(screen.queryByRole("button", { name: /Remove/u })).toBeNull();
+    expect(screen.getByRole("button", { name: "Pick Section 1" })).toBeTruthy();
+    expect(screen.getByRole("textbox", { name: "Section 2 hex" })).toBeTruthy();
+    expect(
+      container.querySelector('[data-slot="source-collection-items-grid"]')
+        ?.children,
+    ).toHaveLength(2);
+
+    const secondColor = screen.getByRole("textbox", { name: "Section 2 hex" });
+
+    fireEvent.change(secondColor, { target: { value: "#123456" } });
+    fireEvent.blur(secondColor);
+
+    const values = JSON.parse(
+      screen.getByTestId("values-json").textContent ?? "{}",
+    );
+
+    expect(values["fills.sections"]).toEqual([
+      { hex: "#DFFF1A" },
+      { hex: "#123456" },
+    ]);
+  });
+});

package/templates/runtime/react/controls-panel/__tests__/controls-panel.source-color-bank.test.tsx

@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanelWithSchema,
+  screen,
+} from "../testing/controls-panel-test-utils";
+
+const sourceColors = Array.from({ length: 19 }, (_, index) => ({
+  hex: index === 18 ? "#654321" : "#DFFF1A",
+}));
+
+describe("ControlsPanel source color bank", () => {
+  it("keeps a source-sized badge palette on built-in color controls", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                sections: {
+                  defaultValue: sourceColors,
+                  itemControl: {
+                    label: "Section",
+                    type: "color",
+                  },
+                  label: "Sections",
+                  target: "fills.sections",
+                  type: "sourceCollection",
+                },
+              },
+              title: "Fill Sections",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(
+      screen.getAllByRole("button", { name: /^Pick Section \d+$/u }),
+    ).toHaveLength(19);
+    expect(screen.getByRole("button", { name: "Pick Section 19" })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Pick Section 20" })).toBeNull();
+    expect(screen.queryByRole("button", { name: /Add/u })).toBeNull();
+    expect(screen.queryByRole("button", { name: /Remove/u })).toBeNull();
+    expect(
+      container.querySelector('[data-slot="source-collection-items-grid"]')
+        ?.children,
+    ).toHaveLength(19);
+
+    const lastColor = screen.getByRole("textbox", { name: "Section 19 hex" });
+    fireEvent.change(lastColor, { target: { value: "#123456" } });
+    fireEvent.blur(lastColor);
+
+    const values = JSON.parse(
+      screen.getByTestId("values-json").textContent ?? "{}",
+    );
+    expect(values["fills.sections"]).toEqual([
+      ...sourceColors.slice(0, 18),
+      { hex: "#123456" },
+    ]);
+  });
+});

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

@@ -2,10 +2,8 @@
 
 import * as React from "react";
 
-import {
-  ToolcraftArtifactExportError,
-  ToolcraftSceneExportError,
-} from "../../../export";
+import { ToolcraftArtifactExportError } from "../../../export/export-error";
+import { ToolcraftSceneExportError } from "../../../export/export-frame";
 import type { ToolcraftRendererPipelineClient } from "../../../rendering";
 import { defaultToolcraftRuntimeSceneVisibility } from "../../../scene";
 import type {

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

@@ -1,10 +1,16 @@
+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,
-  type ToolcraftArtifactExportRequest,
-  type ToolcraftExportFrame,
-  type ToolcraftProductExportRenderer,
-} from "../../../export";
+} from "../../../export/video-artifact-export";
 import type { ToolcraftRendererPipelineClient } from "../../../rendering";
 import type {
   ToolcraftProductSceneBoundsProvider,

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;