@pixel-point/toolcraft 0.0.6 → 0.0.7

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

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { DiamondIcon } from "@phosphor-icons/react";
+import { ArrowCounterClockwiseIcon, DiamondIcon } from "@phosphor-icons/react";
 import {
   Actions,
   AnchorGrid,
@@ -9,6 +9,7 @@ import {
   ChannelMixer,
   Checkbox,
   CodeTextarea,
+  CollectionActions,
   Color,
   ColorOpacity,
   ControlInlineGroup,
@@ -136,6 +137,7 @@ const canvasAspectRatioOptions = [
 
 const sectionedCompoundControlTypes = new Set([
   "channelMixer",
+  "collectionActions",
   "fontPicker",
   "gradient",
   "palette",
@@ -440,6 +442,8 @@ function formatControlValueLabel(
 
       return `${colorOpacityValue.hex} ${colorOpacityValue.opacity}%`;
     }
+    case "collectionActions":
+      return `${asCollectionItems(value, control.defaultValue).length} items`;
     case "fontPicker":
       return asFontPickerValue(value).fontId;
     case "gradient":
@@ -494,6 +498,10 @@ function formatControlValueLabel(
 }
 
 function asColorValue(value: unknown): { hex: string } {
+  if (typeof value === "string") {
+    return { hex: value };
+  }
+
   if (isRecord(value)) {
     return { hex: asString(value.hex, "#C1FF00") };
   }
@@ -502,6 +510,10 @@ function asColorValue(value: unknown): { hex: string } {
 }
 
 function asColorOpacityValue(value: unknown): ColorOpacityValue {
+  if (typeof value === "string") {
+    return { hex: value, opacity: 100 };
+  }
+
   if (isRecord(value)) {
     return {
       hex: asString(value.hex, "#C1FF00"),
@@ -512,6 +524,84 @@ function asColorOpacityValue(value: unknown): ColorOpacityValue {
   return { hex: "#C1FF00", opacity: 100 };
 }
 
+function asCollectionItems(value: unknown, fallback: unknown): unknown[] {
+  if (Array.isArray(value)) {
+    return [...value];
+  }
+
+  return Array.isArray(fallback) ? [...fallback] : [];
+}
+
+function getCollectionMinItems(control: ToolcraftControlSchema): number {
+  return Math.max(0, Math.floor(asNumber(control.minItems, 0)));
+}
+
+function getCollectionHardMaxItems(control: ToolcraftControlSchema): number | null {
+  if (typeof control.hardMaxItems !== "number" || !Number.isFinite(control.hardMaxItems)) {
+    return null;
+  }
+
+  return Math.max(0, Math.floor(control.hardMaxItems));
+}
+
+function getCollectionItemType(control: ToolcraftControlSchema): string {
+  return control.itemControl?.type ?? "color";
+}
+
+function getCollectionItemBaseLabel(control: ToolcraftControlSchema): string {
+  if (control.itemLabel) {
+    return control.itemLabel;
+  }
+
+  const label = control.itemControl?.label;
+
+  return typeof label === "string" ? label : "Item";
+}
+
+function getCollectionItemName(
+  control: ToolcraftControlSchema,
+  index: number,
+): string {
+  const label = control.itemControl?.label;
+
+  if (label === false) {
+    return "";
+  }
+
+  return `${getCollectionItemBaseLabel(control)} ${index + 1}`;
+}
+
+function getCollectionItemDefaultValue(control: ToolcraftControlSchema): unknown {
+  if ("itemDefaultValue" in control) {
+    return control.itemDefaultValue;
+  }
+
+  if (typeof control.itemControl?.defaultValue !== "undefined") {
+    return control.itemControl.defaultValue;
+  }
+
+  switch (getCollectionItemType(control)) {
+    case "color":
+      return { hex: "#C1FF00" };
+    case "colorOpacity":
+      return { hex: "#C1FF00", opacity: 100 };
+    case "checkbox":
+    case "switch":
+      return false;
+    case "rangeInput":
+      return { end: "100%", start: "0%" };
+    case "select":
+    case "segmented":
+      return control.itemControl?.options?.[0]?.value ?? "";
+    case "slider":
+      return control.itemControl?.min ?? 0;
+    case "text":
+      return "";
+    default:
+      return "";
+  }
+}
+
 function asGradientType(value: unknown): GradientType {
   return value === "linear" ||
     value === "radial" ||
@@ -1844,6 +1934,42 @@ export function ControlsPanel({
     return getKeyframeLabelAction(control, name, getControlValue(control));
   }
 
+  function getSectionResetAction({
+    sectionTitle,
+    targets,
+  }: {
+    sectionTitle: string;
+    targets: readonly string[];
+  }): React.ReactNode {
+    const label = `Reset ${sectionTitle} section`;
+
+    return (
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              aria-label={label}
+              data-control-section-reset-button=""
+              onClick={() => {
+                dispatchCommand({
+                  label,
+                  targets: Array.from(new Set(targets)),
+                  type: "controls.resetTargets",
+                });
+              }}
+              size="icon-sm"
+              type="button"
+              variant="ghost"
+            />
+          }
+        >
+          <ArrowCounterClockwiseIcon />
+        </TooltipTrigger>
+        <TooltipContent side="top">{label}</TooltipContent>
+      </Tooltip>
+    );
+  }
+
   function renderColorGroup(
     entries: readonly ControlEntry[],
     headerKeyframeTarget: string | null,
@@ -1917,6 +2043,240 @@ export function ControlsPanel({
     );
   }
 
+  function renderCollectionActionsControl({
+    control,
+    name,
+    value,
+  }: {
+    control: ToolcraftControlSchema;
+    name: string;
+    value: unknown;
+  }): 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 "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
+          addLabel={control.addLabel ?? `Add ${getCollectionItemBaseLabel(control)}`}
+          canAdd={canAdd}
+          canRemove={canRemove}
+          name={name}
+          onAdd={addItem}
+          onRemove={removeItem}
+          removeLabel={
+            control.removeLabel ?? `Remove ${getCollectionItemBaseLabel(control)}`
+          }
+        />
+        <div className="min-w-0 space-y-4" data-slot="collection-actions-items">
+          {renderCollectionItems()}
+        </div>
+      </div>
+    );
+  }
+
   const visibleSections = resolvedControlsPanel.sections
     .map((section) => ({
       entries: getVisibleSectionEntries(section),
@@ -1963,6 +2323,23 @@ export function ControlsPanel({
           isSectionCollapsible && collapsedSectionByKey[sectionCollapseKey] === true;
         const headerKeyframeEntry = getSectionHeaderKeyframeEntry(entries, section.title);
         const headerKeyframeTarget = headerKeyframeEntry?.[1].target ?? null;
+        const headerKeyframeAction = headerKeyframeEntry
+          ? getSectionHeaderKeyframeAction(headerKeyframeEntry)
+          : null;
+        const sectionResetAction = isSectionCollapsible
+          ? getSectionResetAction({
+              sectionTitle:
+                typeof renderedSectionTitle === "string" ? renderedSectionTitle : "section",
+              targets: entries.map(([, control]) => control.target),
+            })
+          : null;
+        const sectionHeaderAction =
+          headerKeyframeAction || sectionResetAction ? (
+            <>
+              {headerKeyframeAction}
+              {sectionResetAction}
+            </>
+          ) : undefined;
         const inlineLayoutGroupByControlId = getInlineLayoutGroupByControlId({
           controlsById: visibleControls,
           layoutGroups: section.layoutGroups,
@@ -1970,11 +2347,7 @@ export function ControlsPanel({
 
         return (
           <PanelSection
-            action={
-              headerKeyframeEntry
-                ? getSectionHeaderKeyframeAction(headerKeyframeEntry)
-                : undefined
-            }
+            action={sectionHeaderAction}
             actionGroup={section.actionGroup}
             allowCompoundDividers={entries.length > 1}
             collapsed={isSectionCollapsed}
@@ -2190,6 +2563,9 @@ export function ControlsPanel({
                 });
               }
 
+              case "collectionActions":
+                return renderCollectionActionsControl({ control, name, value });
+
               case "curves": {
                 const curvesName = control.label === false ? "Curves" : name;
 

package/templates/runtime/schema/define-toolcraft.test.ts

@@ -535,6 +535,7 @@ describe("defineToolcraft", () => {
     expect(app.assembly.commands).toEqual(
       expect.arrayContaining([
         "controls.reset",
+        "controls.resetTargets",
         "history.undo",
         "media.delete",
         "media.import",

package/templates/runtime/schema/define-toolcraft.ts

@@ -60,6 +60,7 @@ const runtimeSetupSectionTitle = "Setup";
 const settingsTransferHeavyControlTypes = new Set([
   "channelMixer",
   "code",
+  "collectionActions",
   "colorOpacity",
   "curves",
   "fileDrop",
@@ -338,7 +339,12 @@ function createToolcraftAssembly({
   const controlsPanel = panels.controls
     ? createPanelAssemblyContract({
         capabilities: ["controls.panel", "controls.defaults"],
-        commands: ["controls.apply", "controls.reset", "controls.setValue"],
+        commands: [
+          "controls.apply",
+          "controls.reset",
+          "controls.resetTargets",
+          "controls.setValue",
+        ],
         contract: TOOLCRAFT_COMPONENT_CONTRACTS.controlsPanel,
         enabled: true,
       })

package/templates/runtime/schema/types.ts

@@ -95,6 +95,7 @@ export type ToolcraftAssemblyCommand =
   | "canvas.zoomReset"
   | "controls.apply"
   | "controls.reset"
+  | "controls.resetTargets"
   | "controls.setValue"
   | "history.redo"
   | "history.undo"
@@ -292,6 +293,20 @@ export type ToolcraftColorOpacityValueSchema = {
   opacity?: number;
 };
 
+export type ToolcraftCollectionItemControlSchema = {
+  commitMode?: "content" | "setting";
+  defaultValue?: unknown;
+  label?: boolean | string;
+  markerCount?: number;
+  max?: number;
+  min?: number;
+  options?: readonly { label: string; value: string }[];
+  step?: number;
+  type: string;
+  unit?: string;
+  variant?: string;
+};
+
 export type ToolcraftFontPickerValueSchema = {
   color?: string;
   fontId: string;
@@ -308,23 +323,31 @@ export type ToolcraftCurveInterpolation = "monotone" | "smooth";
 export type ToolcraftControlSchema = {
   accept?: string;
   actions?: readonly (ToolcraftActionSchema | string)[];
+  addLabel?: string;
   commitMode?: "content" | "setting";
   defaultValue?: unknown;
   description?: string;
   disabled?: boolean;
   disabledWhen?: ToolcraftControlDisabledConditionSchema;
+  hardMaxItems?: number;
   interpolation?: ToolcraftCurveInterpolation;
   items?: readonly ToolcraftImagePickerItemSchema[];
+  itemControl?: ToolcraftCollectionItemControlSchema;
+  itemDefaultValue?: unknown;
+  itemLabel?: string;
   keyframeable?: boolean;
   label?: boolean | string;
   markerCount?: number;
   max?: number;
   min?: number;
+  minItems?: number;
   multiple?: boolean;
   orderRole?: ToolcraftControlOrderRole;
   performanceReason?: string;
   performanceRole?: ToolcraftControlPerformanceRole;
   options?: readonly { label: string; value: string }[];
+  recommendedMaxItems?: number;
+  removeLabel?: string;
   step?: number;
   target: string;
   type: string;

package/templates/runtime/state/reducer.test.ts

@@ -45,6 +45,59 @@ describe("toolcraftReducer", () => {
     expect(state.history.undo.at(-1)?.label).toBe("Reset controls");
   });
 
+  it("resets selected control targets to defaults and records one history patch", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                contrast: {
+                  defaultValue: 22,
+                  target: "style.contrast",
+                  type: "slider",
+                },
+                opacity: {
+                  defaultValue: 75,
+                  target: "selectedLayer.opacity",
+                  type: "slider",
+                },
+              },
+              title: "Tone",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const changedOpacity = toolcraftReducer(createToolcraftState(app), {
+      target: "selectedLayer.opacity",
+      type: "controls.setValue",
+      value: 12,
+    });
+    const changedBoth = toolcraftReducer(changedOpacity, {
+      target: "style.contrast",
+      type: "controls.setValue",
+      value: 9,
+    });
+
+    const state = toolcraftReducer(changedBoth, {
+      label: "Reset Tone section",
+      targets: ["selectedLayer.opacity"],
+      type: "controls.resetTargets",
+    });
+
+    expect(state.values["selectedLayer.opacity"]).toBe(75);
+    expect(state.values["style.contrast"]).toBe(9);
+    expect(state.history.undo).toHaveLength(3);
+    expect(state.history.undo.at(-1)).toMatchObject({
+      after: { "selectedLayer.opacity": 75 },
+      before: { "selectedLayer.opacity": 12 },
+      label: "Reset Tone section",
+    });
+  });
+
   it("updates canvas size and records history", () => {
     const size = { width: 1200, height: 900, unit: "px" } as const;
 

package/templates/runtime/state/reducer.ts

@@ -212,6 +212,17 @@ function getResetCanvasSize(
   };
 }
 
+function canvasSizesEqual(
+  first: ToolcraftState["canvas"]["size"],
+  second: ToolcraftState["canvas"]["size"],
+): boolean {
+  return (
+    first.height === second.height &&
+    first.unit === second.unit &&
+    first.width === second.width
+  );
+}
+
 function clampTimelineDuration(value: number): number {
   if (!Number.isFinite(value)) {
     return minTimelineDurationSeconds;
@@ -712,6 +723,42 @@ export function toolcraftReducer(
       );
     }
 
+    case "controls.resetTargets": {
+      const targetSet = new Set(command.targets);
+      const before: Record<string, unknown> = {};
+      const after: Record<string, unknown> = {};
+
+      for (const target of targetSet) {
+        if (!(target in state.defaults) || Object.is(state.values[target], state.defaults[target])) {
+          continue;
+        }
+
+        before[target] = state.values[target];
+        after[target] = state.defaults[target];
+      }
+
+      const resetCanvasSize = getResetCanvasSize(state);
+      const shouldResetCanvasSize =
+        resetCanvasSize !== null &&
+        (targetSet.has(canvasSizeWidthTarget) || targetSet.has(canvasSizeHeightTarget)) &&
+        !canvasSizesEqual(state.canvas.size, resetCanvasSize);
+
+      if (shouldResetCanvasSize) {
+        before["canvas.size"] = state.canvas.size;
+        after["canvas.size"] = resetCanvasSize;
+      }
+
+      if (Object.keys(after).length === 0) {
+        return state;
+      }
+
+      return commitStatePatch(state, {
+        after,
+        before,
+        label: command.label ?? "Reset section",
+      });
+    }
+
     case "layers.add": {
       const layer = createLayer(state, command.layer);
       const insertIndex = clampInsertIndex(state.layers.length, command.insertIndex);

package/templates/runtime/state/types.ts

@@ -11,6 +11,7 @@ export type ToolcraftCommand =
     }
   | { type: "controls.apply" }
   | { type: "controls.reset" }
+  | { label?: string; targets: string[]; type: "controls.resetTargets" }
   | { insertIndex?: number; layer?: ToolcraftLayerDraft; type: "layers.add" }
   | { layerId: string; type: "layers.delete" }
   | { layerIds: string[]; parentGroupId: string | null; type: "layers.moveToGroup" }
@@ -82,6 +83,7 @@ export const toolcraftRuntimeCommandTypes = [
   "controls.setValue",
   "controls.apply",
   "controls.reset",
+  "controls.resetTargets",
   "layers.add",
   "layers.delete",
   "layers.moveToGroup",