@pixel-point/toolcraft 0.0.4 → 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,
@@ -42,6 +43,7 @@ import {
   type ColorOpacityValue,
   type CurveInterpolation,
   type FontPickerValue,
+  type FileDropPreview,
   type GradientStop,
   type GradientType,
   type ImagePickerItem,
@@ -135,6 +137,7 @@ const canvasAspectRatioOptions = [
 
 const sectionedCompoundControlTypes = new Set([
   "channelMixer",
+  "collectionActions",
   "fontPicker",
   "gradient",
   "palette",
@@ -439,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":
@@ -493,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") };
   }
@@ -501,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"),
@@ -511,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" ||
@@ -1691,12 +1782,94 @@ export function ControlsPanel({
     );
   }
 
-  function getControlHelpText(
-    control: ToolcraftControlSchema,
-  ): string | null {
+  function normalizeControlHelpContext(value: string): string {
+    return value
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, " ")
+      .trim();
+  }
+
+  function isColorSectionTitle(sectionTitle: string | undefined): boolean {
+    return /\b(colou?rs?|palette|palettes)\b/i.test(sectionTitle ?? "");
+  }
+
+  function isSequentialColorLabel(label: string): boolean {
+    return /^colou?r\s+\d+$/i.test(label.trim());
+  }
+
+  function isSimplePaletteDistributionLabel(label: string): boolean {
+    return /^(spread|mix|distribution)$/i.test(label.trim());
+  }
+
+  function isGenericControlHelpDescription(description: string): boolean {
+    return /^(adjusts?|changes?|chooses?|controls?|defines?|selects?|sets?|updates?)\b/i.test(
+      description.trim(),
+    );
+  }
+
+  function shouldSuppressObviousControlHelp({
+    control,
+    description,
+    label,
+    sectionTitle,
+  }: {
+    control: ToolcraftControlSchema;
+    description: string;
+    label: string;
+    sectionTitle: string | undefined;
+  }): boolean {
+    const isColorControl = control.type === "color" || control.type === "colorOpacity";
+
+    if (isColorSectionTitle(sectionTitle)) {
+      if (isColorControl && isSequentialColorLabel(label)) {
+        return true;
+      }
+
+      if (
+        isSimplePaletteDistributionLabel(label) &&
+        isGenericControlHelpDescription(description)
+      ) {
+        return true;
+      }
+    }
+
+    const normalizedDescription = normalizeControlHelpContext(description);
+    const normalizedLabel = normalizeControlHelpContext(label);
+
+    return (
+      Boolean(normalizedLabel) &&
+      isGenericControlHelpDescription(description) &&
+      normalizedDescription === normalizedLabel
+    );
+  }
+
+  function getControlHelpText({
+    control,
+    label,
+    sectionTitle,
+  }: {
+    control: ToolcraftControlSchema;
+    label: string;
+    sectionTitle: string | undefined;
+  }): string | null {
     const description = control.description?.trim();
 
-    return description || null;
+    if (!description) {
+      return null;
+    }
+
+    if (
+      shouldSuppressObviousControlHelp({
+        control,
+        description,
+        label,
+        sectionTitle,
+      })
+    ) {
+      return null;
+    }
+
+    return description;
   }
 
   function withControlLabelHelp({
@@ -1704,13 +1877,15 @@ export function ControlsPanel({
     control,
     label,
     providerKey,
+    sectionTitle,
   }: {
     children: React.ReactNode;
     control: ToolcraftControlSchema;
     label: string;
     providerKey: string;
+    sectionTitle: string | undefined;
   }): React.ReactNode {
-    const help = getControlHelpText(control);
+    const help = getControlHelpText({ control, label, sectionTitle });
 
     if (!help) {
       return children;
@@ -1759,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,
@@ -1832,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),
@@ -1878,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,
@@ -1885,11 +2347,7 @@ export function ControlsPanel({
 
         return (
           <PanelSection
-            action={
-              headerKeyframeEntry
-                ? getSectionHeaderKeyframeAction(headerKeyframeEntry)
-                : undefined
-            }
+            action={sectionHeaderAction}
             actionGroup={section.actionGroup}
             allowCompoundDividers={entries.length > 1}
             collapsed={isSectionCollapsed}
@@ -2105,6 +2563,9 @@ export function ControlsPanel({
                 });
               }
 
+              case "collectionActions":
+                return renderCollectionActionsControl({ control, name, value });
+
               case "curves": {
                 const curvesName = control.label === false ? "Curves" : name;
 
@@ -2129,13 +2590,38 @@ export function ControlsPanel({
               }
 
               case "fileDrop": {
-                const previewMediaAsset = state.schema.panels.layers
-                  ? undefined
-                  : state.mediaAssets[0];
+                const previewMediaAssets = state.schema.panels.layers ? [] : state.mediaAssets;
+                const previewMediaAsset = previewMediaAssets[0];
+                const previews = previewMediaAssets.map((asset): FileDropPreview => ({
+                  alt: asset.fileName,
+                  id: asset.id,
+                  size: asset.size,
+                  src: asset.dataUrl,
+                }));
+                const importFile = (file: File, replaceExisting: boolean): void => {
+                  void readImportedImageFile(file, state.canvas.size).then((importedImage) => {
+                    if (!importedImage) {
+                      return;
+                    }
+
+                    dispatchCommand({
+                      asset: {
+                        dataUrl: importedImage.dataUrl,
+                        fileName: file.name,
+                        mimeType: file.type || "image/*",
+                        position: { x: 0, y: 0 },
+                        size: importedImage.size,
+                      },
+                      replaceExisting,
+                      type: "media.import",
+                    });
+                  });
+                };
 
                 return (
                   <FileDrop
                     accept={control.accept ?? "PNG, JPEG, GIF, SVG, WebP"}
+                    multiple={control.multiple}
                     key={id}
                     onClear={
                       previewMediaAsset
@@ -2147,33 +2633,31 @@ export function ControlsPanel({
                           }
                         : undefined
                     }
-                    onFileSelect={(file) => {
-                      void readImportedImageFile(file, state.canvas.size).then((importedImage) => {
-                        if (!importedImage) {
-                          return;
-                        }
-
-                        dispatchCommand({
-                          asset: {
-                            dataUrl: importedImage.dataUrl,
-                            fileName: file.name,
-                            mimeType: file.type || "image/*",
-                            position: { x: 0, y: 0 },
-                            size: importedImage.size,
-                          },
-                          type: "media.import",
-                        });
+                    onFilesSelect={(files) => {
+                      files.forEach((file) => importFile(file, false));
+                    }}
+                    onFileSelect={(file) => importFile(file, true)}
+                    onPreviewRemove={(item) => {
+                      if (!item.id) {
+                        return;
+                      }
+
+                      dispatchCommand({
+                        mediaId: item.id,
+                        type: "media.delete",
                       });
                     }}
                     preview={
                       previewMediaAsset
                         ? {
+                            id: previewMediaAsset.id,
                             alt: previewMediaAsset.fileName,
                             size: previewMediaAsset.size,
                             src: previewMediaAsset.dataUrl,
                           }
                         : undefined
                     }
+                    previews={previews}
                   />
                 );
               }
@@ -2514,6 +2998,7 @@ export function ControlsPanel({
                       control,
                       label: name,
                       providerKey: id,
+                      sectionTitle: section.title,
                     }),
                     control,
                   }),

package/templates/runtime/react/settings-transfer.test.ts

@@ -131,10 +131,10 @@ describe("settings transfer", () => {
     expect(state.values["generation.prompt"]).toBe("Imported prompt");
     expect(state.values["unknown.target"]).toBeUndefined();
     expect(state.values["canvas.aspectRatio"]).toEqual({
-      height: 900,
+      height: 9,
       mode: "custom",
-      value: "1600:900",
-      width: 1600,
+      value: "16:9",
+      width: 16,
     });
     expect(state.canvas.size).toEqual({ height: 900, unit: "px", width: 1600 });
     expect(state.timeline).toMatchObject({