@pixel-point/toolcraft 0.0.16 → 0.0.18

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

package/templates/runtime/react/controls-panel/renderers/controls-panel-file-drop-item-controls.test.tsx

@@ -0,0 +1,95 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ControlsPanelFileDropItemControls } from "./controls-panel-file-drop-item-controls";
+
+describe("controls-panel FileDrop item controls", () => {
+  it("renders one file's built-in settings and commits a mediaId-keyed record", () => {
+    const setControlValue = vi.fn();
+
+    render(
+      <ControlsPanelFileDropItemControls
+        control={{
+          assetKind: "file",
+          defaultValue: [],
+          itemControls: {
+            depth: {
+              defaultValue: 0.2,
+              label: "Strength",
+              max: 1,
+              min: 0,
+              step: 0.1,
+              type: "slider",
+            },
+            invert: {
+              defaultValue: false,
+              label: "Invert",
+              type: "switch",
+            },
+            levels: {
+              defaultValue: [0, 1],
+              label: "Levels",
+              max: 1,
+              min: 0,
+              step: 0.01,
+              type: "rangeSlider",
+            },
+          },
+          multiple: true,
+          target: "media.bumpMaps",
+          type: "fileDrop",
+          variant: "collection-actions",
+        }}
+        index={1}
+        mediaId="bump-two"
+        name="Bump maps"
+        setControlValue={setControlValue}
+        value={[
+          {
+            depth: 0.4,
+            invert: true,
+            levels: [0.1, 0.8],
+            mediaId: "bump-one",
+          },
+          {
+            depth: 0.6,
+            invert: false,
+            levels: [0.2, 0.9],
+            mediaId: "bump-two",
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText("Strength")).toBeTruthy();
+    expect(screen.getByText("Invert")).toBeTruthy();
+    expect(screen.getByText("Levels")).toBeTruthy();
+
+    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(setControlValue).toHaveBeenCalledWith(
+      "media.bumpMaps",
+      [
+        {
+          depth: 0.4,
+          invert: true,
+          levels: [0.1, 0.8],
+          mediaId: "bump-one",
+        },
+        {
+          depth: 0.7,
+          invert: false,
+          levels: [0.2, 0.9],
+          mediaId: "bump-two",
+        },
+      ],
+      "Bump maps 2 Strength",
+      undefined,
+    );
+  });
+});

package/templates/runtime/react/controls-panel/renderers/controls-panel-file-drop-item-controls.tsx

@@ -0,0 +1,82 @@
+import type { ControlChangeMeta } from "@repo/ui";
+
+import type { ToolcraftControlSchema } from "../../../schema/types";
+import { ControlsPanelCollectionItemFields } from "./controls-panel-collection-item-fields";
+
+type FileDropItemValue = Readonly<Record<string, unknown>> & {
+  mediaId: string;
+};
+
+export type ControlsPanelFileDropItemControlsProps = {
+  control: ToolcraftControlSchema;
+  index: number;
+  mediaId: string;
+  name: string;
+  setControlValue: (
+    target: string,
+    value: unknown,
+    label?: string,
+    meta?: ControlChangeMeta,
+  ) => void;
+  value: unknown;
+};
+
+function asFileDropItemValues(value: unknown): readonly FileDropItemValue[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  return value.filter(
+    (item): item is FileDropItemValue =>
+      typeof item === "object" &&
+      item !== null &&
+      typeof (item as { mediaId?: unknown }).mediaId === "string",
+  );
+}
+
+export function ControlsPanelFileDropItemControls({
+  control,
+  index,
+  mediaId,
+  name,
+  setControlValue,
+  value,
+}: ControlsPanelFileDropItemControlsProps): React.JSX.Element | null {
+  const itemControls = control.itemControls;
+
+  if (!itemControls || Object.keys(itemControls).length === 0) {
+    return null;
+  }
+
+  const itemValues = asFileDropItemValues(value);
+  const storedItemValue = itemValues.find((item) => item.mediaId === mediaId);
+
+  return (
+    <ControlsPanelCollectionItemFields
+      controls={itemControls}
+      id={`${control.target}:${mediaId}`}
+      onChange={(nextValue, fieldName, meta) => {
+        const nextItemValue: FileDropItemValue = { ...nextValue, mediaId };
+        const existingIndex = itemValues.findIndex(
+          (item) => item.mediaId === mediaId,
+        );
+        const nextItems = [...itemValues];
+
+        if (existingIndex >= 0) {
+          nextItems[existingIndex] = nextItemValue;
+        } else {
+          nextItems.push(nextItemValue);
+        }
+
+        setControlValue(
+          control.target,
+          nextItems,
+          `${name} ${index + 1} ${fieldName}`,
+          meta,
+        );
+      }}
+      target={control.target}
+      value={storedItemValue}
+    />
+  );
+}