@pixel-point/toolcraft 0.0.17 → 0.0.18

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>
+  );
+}

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

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { CollectionItemGroups, type ControlChangeMeta } from "@repo/ui";
+
+import type { ToolcraftControlSchema } from "../../../schema/types";
+import {
+  getCollectionItemName,
+  getCollectionItemType,
+} from "../values/controls-panel-values";
+import {
+  ControlsPanelCollectionItemField,
+  ControlsPanelCollectionItemFields,
+} from "./controls-panel-collection-item-fields";
+
+export type ControlsPanelCollectionItemsProps = {
+  control: ToolcraftControlSchema;
+  items: readonly unknown[];
+  onItemChange: (
+    index: number,
+    nextValue: unknown,
+    meta?: ControlChangeMeta,
+    fieldName?: string,
+  ) => void;
+  slotPrefix: "collection-actions" | "source-collection";
+};
+
+function renderCollectionItemControl({
+  control,
+  index,
+  item,
+  onItemChange,
+}: {
+  control: ToolcraftControlSchema;
+  index: number;
+  item: unknown;
+  onItemChange: ControlsPanelCollectionItemsProps["onItemChange"];
+}): React.ReactNode {
+  const itemName = getCollectionItemName(control, index);
+  const itemControl = control.itemControl ?? { type: "color" as const };
+
+  return (
+    <ControlsPanelCollectionItemField
+      colorLabelMode="hidden"
+      control={itemControl}
+      id={`${control.target}:${index}`}
+      name={itemName}
+      onChange={(nextValue, meta) => onItemChange(index, nextValue, meta)}
+      target={control.target}
+      value={item}
+    />
+  );
+}
+
+export function ControlsPanelCollectionItems({
+  control,
+  items,
+  onItemChange,
+  slotPrefix,
+}: ControlsPanelCollectionItemsProps): React.JSX.Element {
+  const itemControls = control.itemControls;
+
+  if (itemControls) {
+    return (
+      <CollectionItemGroups>
+        {items.map((item, index) => (
+          <ControlsPanelCollectionItemFields
+            controls={itemControls}
+            id={`${control.target}:${index}`}
+            key={index}
+            onChange={(nextValue, fieldName, meta) =>
+              onItemChange(index, nextValue, meta, fieldName)
+            }
+            target={control.target}
+            value={item}
+          />
+        ))}
+      </CollectionItemGroups>
+    );
+  }
+
+  const itemType = getCollectionItemType(control);
+  const isCompactColorGrid = itemType === "color";
+
+  return (
+    <div
+      className={
+        isCompactColorGrid
+          ? "grid min-w-0 grid-cols-2 gap-x-2 gap-y-4"
+          : "min-w-0 space-y-4"
+      }
+      data-slot={`${slotPrefix}-${isCompactColorGrid ? "items-grid" : "items"}`}
+    >
+      {items.map((item, index) => (
+        <React.Fragment key={index}>
+          {renderCollectionItemControl({
+            control,
+            index,
+            item,
+            onItemChange,
+          })}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}

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

@@ -1,34 +1,14 @@
 import * as React from "react";
-import {
-  Checkbox,
-  CollectionActions,
-  Color,
-  ColorOpacity,
-  FontPicker,
-  RangeInput,
-  Segmented,
-  Select,
-  Slider,
-  Switch,
-  TextInput,
-  type ControlChangeMeta,
-} from "@repo/ui";
+import { CollectionActions, type ControlChangeMeta } from "@repo/ui";
 
 import type { ToolcraftControlSchema } from "../../../schema/types";
+import { ControlsPanelCollectionItems } from "./controls-panel-collection-items";
 import {
-  asBoolean,
-  asColorOpacityValue,
-  asColorValue,
   asCollectionItems,
-  asFontPickerValue,
-  asNumber,
-  asRangeInputValue,
-  asString,
   getCollectionHardMaxItems,
   getCollectionItemBaseLabel,
   getCollectionItemDefaultValue,
   getCollectionItemName,
-  getCollectionItemType,
   getCollectionMinItems,
 } from "../values/controls-panel-values";
 
@@ -39,234 +19,57 @@ export type CollectionControlSetValue = (
   meta?: ControlChangeMeta,
 ) => void;
 
-export type CollectionActionsControlRenderArgs = {
+export type CollectionControlRenderArgs = {
   control: ToolcraftControlSchema;
   name: string;
   setControlValue: CollectionControlSetValue;
   value: unknown;
 };
 
-export function renderCollectionActionsControl({
+function updateCollectionItem({
+  control,
+  fieldName,
+  index,
+  items,
+  meta,
+  name,
+  nextValue,
+  setControlValue,
+}: {
+  control: ToolcraftControlSchema;
+  fieldName?: string;
+  index: number;
+  items: readonly unknown[];
+  meta?: ControlChangeMeta;
+  name: string;
+  nextValue: unknown;
+  setControlValue: CollectionControlSetValue;
+}): void {
+  const nextItems = items.map((item, itemIndex) =>
+    itemIndex === index ? nextValue : item,
+  );
+  const itemName = getCollectionItemName(control, index) || name;
+  const historyLabel = fieldName ? `${itemName} ${fieldName}` : itemName;
+
+  setControlValue(control.target, nextItems, historyLabel, meta);
+}
+
+function renderCollectionActionsControl({
   control,
   name,
   setControlValue,
   value,
-}: CollectionActionsControlRenderArgs): React.JSX.Element {
+}: CollectionControlRenderArgs): React.JSX.Element {
   const items = asCollectionItems(value, control.defaultValue);
   const minItems = getCollectionMinItems(control);
   const hardMaxItems = getCollectionHardMaxItems(control);
   const canAdd = hardMaxItems === null || items.length < hardMaxItems;
   const canRemove = items.length > minItems;
-  const itemType = getCollectionItemType(control);
 
   function setItems(nextItems: unknown[], label: string): void {
     setControlValue(control.target, nextItems, label);
   }
 
-  function addItem(): void {
-    if (!canAdd) {
-      return;
-    }
-
-    setItems([...items, getCollectionItemDefaultValue(control)], control.addLabel ?? "Add item");
-  }
-
-  function removeItem(): void {
-    if (!canRemove) {
-      return;
-    }
-
-    setItems(items.slice(0, -1), control.removeLabel ?? "Remove item");
-  }
-
-  function updateItem(index: number, nextValue: unknown, meta?: ControlChangeMeta): void {
-    const nextItems = items.map((item, itemIndex) =>
-      itemIndex === index ? nextValue : item,
-    );
-    const itemName = getCollectionItemName(control, index) || name;
-
-    setControlValue(control.target, nextItems, itemName, meta);
-  }
-
-  function renderColorItems(): React.ReactNode {
-    return (
-      <div
-        className="grid min-w-0 grid-cols-2 gap-x-2 gap-y-4"
-        data-slot="collection-actions-items-grid"
-      >
-        {items.map((item, index) => {
-          const itemName = getCollectionItemName(control, index);
-
-          return (
-            <Color
-              hex={asColorValue(item).hex}
-              key={itemName || index}
-              name={itemName}
-              onValueChange={(nextValue: { hex: string }, meta?: ControlChangeMeta) =>
-                updateItem(index, nextValue, meta)
-              }
-              showLabel={false}
-            />
-          );
-        })}
-      </div>
-    );
-  }
-
-  function renderColorOpacityItems(): React.ReactNode {
-    return items.map((item, index) => {
-      const colorOpacityValue = asColorOpacityValue(item);
-      const itemName = getCollectionItemName(control, index);
-
-      return (
-        <ColorOpacity
-          hex={colorOpacityValue.hex}
-          key={itemName || index}
-          name={itemName}
-          onValueChange={(nextValue, meta) => updateItem(index, nextValue, meta)}
-          opacity={colorOpacityValue.opacity}
-          showLabel={false}
-        />
-      );
-    });
-  }
-
-  function renderStackedItemControl(item: unknown, index: number): React.ReactNode {
-    const itemControl = control.itemControl;
-    const itemName = getCollectionItemName(control, index);
-    const key = `${itemName || "item"}-${index}`;
-    const update = (nextValue: unknown, meta?: ControlChangeMeta) => {
-      updateItem(index, nextValue, meta);
-    };
-
-    switch (itemType) {
-      case "checkbox":
-        return (
-          <Checkbox
-            checked={asBoolean(item)}
-            key={key}
-            name={itemName}
-            onCheckedChange={update}
-            showLabel={itemControl?.label !== false}
-          />
-        );
-      case "rangeInput": {
-        const rangeValue = asRangeInputValue(item);
-
-        return (
-          <RangeInput
-            defaultValue={asRangeInputValue(itemControl?.defaultValue)}
-            end={rangeValue.end}
-            key={key}
-            name={itemName}
-            onValueChange={update}
-            start={rangeValue.start}
-          />
-        );
-      }
-      case "segmented":
-        return (
-          <Segmented
-            key={key}
-            name={itemName}
-            onValueChange={update}
-            options={itemControl?.options ?? []}
-            value={asString(item, itemControl?.options?.[0]?.value ?? "")}
-            variant={itemControl?.variant === "dots" ? "dots" : "default"}
-          />
-        );
-      case "select":
-        return (
-          <Select
-            key={key}
-            name={itemName}
-            onValueChange={update}
-            options={itemControl?.options ?? []}
-            value={asString(item, itemControl?.options?.[0]?.value ?? "")}
-          />
-        );
-      case "slider":
-        return (
-          <Slider
-            baseValue={asNumber(
-              itemControl?.defaultValue,
-              itemControl?.min ?? 0,
-            )}
-            key={key}
-            markerCount={
-              typeof itemControl?.markerCount === "number"
-                ? itemControl.markerCount
-                : undefined
-            }
-            max={itemControl?.max ?? 100}
-            min={itemControl?.min ?? 0}
-            name={itemName}
-            onValueChange={update}
-            step={itemControl?.step ?? 1}
-            unit={itemControl?.unit}
-            value={asNumber(
-              item,
-              asNumber(itemControl?.defaultValue, itemControl?.min ?? 0),
-            )}
-            variant={itemControl?.variant === "discrete" ? "discrete" : "continuous"}
-          />
-        );
-      case "switch":
-        return (
-          <Switch
-            checked={asBoolean(item)}
-            key={key}
-            name={itemName}
-            onCheckedChange={update}
-            showLabel={itemControl?.label !== false}
-          />
-        );
-      case "fontPicker":
-        return (
-          <FontPicker
-            defaultValue={asFontPickerValue(itemControl?.defaultValue)}
-            key={key}
-            name={itemName || "Font"}
-            onValueChange={update}
-            value={asFontPickerValue(item)}
-          />
-        );
-      case "text":
-        return (
-          <TextInput
-            commitOnBlur={itemControl?.commitMode === "setting"}
-            defaultValue={asString(itemControl?.defaultValue, asString(item))}
-            key={key}
-            name={itemName}
-            onValueChange={update}
-            value={asString(item)}
-          />
-        );
-      default:
-        return (
-          <TextInput
-            defaultValue={asString(itemControl?.defaultValue, asString(item))}
-            key={key}
-            name={itemName}
-            onValueChange={update}
-            value={asString(item)}
-          />
-        );
-    }
-  }
-
-  function renderCollectionItems(): React.ReactNode {
-    if (itemType === "color") {
-      return renderColorItems();
-    }
-
-    if (itemType === "colorOpacity") {
-      return renderColorOpacityItems();
-    }
-
-    return items.map(renderStackedItemControl);
-  }
-
   return (
     <div className="min-w-0 space-y-3" data-slot="collection-actions-control">
       <CollectionActions
@@ -274,13 +77,89 @@ export function renderCollectionActionsControl({
         canAdd={canAdd}
         canRemove={canRemove}
         name={name}
-        onAdd={addItem}
-        onRemove={removeItem}
-        removeLabel={control.removeLabel ?? `Remove ${getCollectionItemBaseLabel(control)}`}
+        onAdd={() => {
+          if (canAdd) {
+            setItems(
+              [...items, getCollectionItemDefaultValue(control)],
+              control.addLabel ?? "Add item",
+            );
+          }
+        }}
+        onRemove={() => {
+          if (canRemove) {
+            setItems(
+              items.slice(0, -1),
+              control.removeLabel ?? "Remove item",
+            );
+          }
+        }}
+        removeLabel={
+          control.removeLabel ?? `Remove ${getCollectionItemBaseLabel(control)}`
+        }
+      />
+      <ControlsPanelCollectionItems
+        control={control}
+        items={items}
+        onItemChange={(index, nextValue, meta, fieldName) =>
+          updateCollectionItem({
+            control,
+            fieldName,
+            index,
+            items,
+            meta,
+            name,
+            nextValue,
+            setControlValue,
+          })
+        }
+        slotPrefix="collection-actions"
+      />
+    </div>
+  );
+}
+
+function renderSourceCollectionControl({
+  control,
+  name,
+  setControlValue,
+  value,
+}: CollectionControlRenderArgs): React.JSX.Element {
+  const items = asCollectionItems(value, control.defaultValue);
+
+  return (
+    <div className="min-w-0" data-slot="source-collection-control">
+      <ControlsPanelCollectionItems
+        control={control}
+        items={items}
+        onItemChange={(index, nextValue, meta, fieldName) =>
+          updateCollectionItem({
+            control,
+            fieldName,
+            index,
+            items,
+            meta,
+            name,
+            nextValue,
+            setControlValue,
+          })
+        }
+        slotPrefix="source-collection"
       />
-      <div className="min-w-0 space-y-4" data-slot="collection-actions-items">
-        {renderCollectionItems()}
-      </div>
     </div>
   );
 }
+
+export function renderCollectionControl(
+  args: CollectionControlRenderArgs,
+): React.JSX.Element {
+  switch (args.control.type) {
+    case "collectionActions":
+      return renderCollectionActionsControl(args);
+    case "sourceCollection":
+      return renderSourceCollectionControl(args);
+    default:
+      throw new Error(
+        `Unsupported Toolcraft collection control: ${args.control.type}`,
+      );
+  }
+}