@pixel-point/toolcraft 0.0.17 → 0.0.19

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,12 +89,13 @@ export function getControlName(
 
 export function getControlsRecord(
   entries: readonly ControlEntry[],
-): Record<string, ToolcraftControlSchema> {
+): Record<string, ResolvedToolcraftControlSchema> {
   return Object.fromEntries(entries);
 }
 
 export function getControlRenderGroups(
   entries: readonly ControlEntry[],
+  sectionHasOnlyColorFields: boolean,
 ): ControlRenderGroup[] {
   const groups: ControlRenderGroup[] = [];
   let index = 0;
@@ -105,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;
@@ -113,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) {
@@ -142,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[] {
@@ -151,7 +182,7 @@ export function getControlRenderGroupIds(
 }
 
 export function countControlsByType(
-  sections: readonly ToolcraftControlSectionSchema[],
+  sections: readonly ResolvedToolcraftControlSectionSchema[],
   type: string,
 ): number {
   return sections.reduce(
@@ -186,8 +217,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 +227,7 @@ export function isRuntimeSetupSection({
   section,
 }: {
   entries: readonly ControlEntry[];
-  section: ToolcraftControlSectionSchema;
+  section: ResolvedToolcraftControlSectionSchema;
 }): boolean {
   return (
     section.title === "Setup" &&
@@ -205,7 +236,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;
@@ -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/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>
+  );
+}