@pixel-point/toolcraft 0.0.3 → 0.0.6

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

@@ -42,6 +42,7 @@ import {
   type ColorOpacityValue,
   type CurveInterpolation,
   type FontPickerValue,
+  type FileDropPreview,
   type GradientStop,
   type GradientType,
   type ImagePickerItem,
@@ -57,6 +58,10 @@ import type {
   ToolcraftControlSchema,
   ResolvedToolcraftAppSchema,
 } from "../schema/types";
+import {
+  getToolcraftCanvasAspectRatioPreset,
+  toolcraftCanvasAspectRatioPresets,
+} from "../schema/canvas-aspect-ratio-presets";
 import { getToolcraftControlKeyframeCapability } from "../schema/keyframe-capability";
 import { getToolcraftCanvasSizeTargetDimension } from "../schema/runtime-targets";
 import type {
@@ -112,9 +117,22 @@ type FooterActionProgressEntry = {
   id: number;
   progress: number | null;
 };
+type CanvasAspectRatioValue = {
+  height: number;
+  mode: "custom" | "preset";
+  value: string;
+  width: number;
+};
 
 const hiddenDiscreteMarkerCount = 2;
 const controlsPanelSectionCollapseStorageVersion = 1;
+const canvasAspectRatioOptions = [
+  ...toolcraftCanvasAspectRatioPresets.map((preset) => ({
+    label: preset.value,
+    value: preset.value,
+  })),
+  { label: "Custom...", value: "custom" },
+] as const;
 
 const sectionedCompoundControlTypes = new Set([
   "channelMixer",
@@ -257,6 +275,86 @@ function asString(value: unknown, fallback = ""): string {
   return typeof value === "number" && Number.isFinite(value) ? String(value) : fallback;
 }
 
+function parseCanvasAspectRatioOption(value: string): CanvasAspectRatioValue | null {
+  const preset = getToolcraftCanvasAspectRatioPreset(value);
+
+  if (preset) {
+    return {
+      height: preset.ratioHeight,
+      mode: "preset",
+      value: preset.value,
+      width: preset.ratioWidth,
+    };
+  }
+
+  const match = /^\s*(\d+(?:\.\d+)?)\s*:\s*(\d+(?:\.\d+)?)\s*$/u.exec(value);
+
+  if (!match) {
+    return null;
+  }
+
+  const width = Number.parseFloat(match[1] ?? "");
+  const height = Number.parseFloat(match[2] ?? "");
+
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+    return null;
+  }
+
+  return {
+    height: Math.round(height),
+    mode: "custom",
+    value: `${Math.round(width)}:${Math.round(height)}`,
+    width: Math.round(width),
+  };
+}
+
+function asCanvasAspectRatioValue(
+  value: unknown,
+  fallback: unknown,
+): CanvasAspectRatioValue {
+  if (isRecord(value)) {
+    const width = asNumber(value.width, NaN);
+    const height = asNumber(value.height, NaN);
+    const mode = value.mode === "preset" ? "preset" : "custom";
+
+    if (Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0) {
+      return {
+        height: Math.round(height),
+        mode,
+        value:
+          typeof value.value === "string"
+            ? value.value
+            : `${Math.round(width)}:${Math.round(height)}`,
+        width: Math.round(width),
+      };
+    }
+  }
+
+  if (typeof value === "string") {
+    const parsed = parseCanvasAspectRatioOption(value);
+
+    if (parsed) {
+      return parsed;
+    }
+  }
+
+  if (fallback !== value) {
+    return asCanvasAspectRatioValue(fallback, {
+      height: 1,
+      mode: "preset",
+      value: "1:1",
+      width: 1,
+    });
+  }
+
+  return {
+    height: 1,
+    mode: "preset",
+    value: "1:1",
+    width: 1,
+  };
+}
+
 function asBoolean(value: unknown, fallback = false): boolean {
   return typeof value === "boolean" ? value : fallback;
 }
@@ -330,6 +428,8 @@ function formatControlValueLabel(
   }
 
   switch (control.type) {
+    case "aspectRatio":
+      return asCanvasAspectRatioValue(value, control.defaultValue).value;
     case "checkbox":
     case "switch":
       return asBoolean(value) ? "On" : "Off";
@@ -505,6 +605,111 @@ function asFontPickerValue(value: unknown): FontPickerValue {
   };
 }
 
+function CanvasAspectRatioControl({
+  defaultValue,
+  name,
+  onValueChange,
+  value,
+}: {
+  defaultValue: unknown;
+  name: string;
+  onValueChange?: (
+    value: CanvasAspectRatioValue,
+    meta?: ControlChangeMeta,
+  ) => void;
+  value: unknown;
+}): React.JSX.Element {
+  const ratio = asCanvasAspectRatioValue(value, defaultValue);
+  const selectedValue = ratio.mode === "custom" ? "custom" : ratio.value;
+
+  function commitRatio(
+    nextRatio: CanvasAspectRatioValue,
+    meta?: ControlChangeMeta,
+  ): void {
+    onValueChange?.(nextRatio, meta);
+  }
+
+  function updatePreset(nextValue: string): void {
+    if (nextValue === "custom") {
+      commitRatio({
+        height: ratio.height,
+        mode: "custom",
+        value: `${ratio.width}:${ratio.height}`,
+        width: ratio.width,
+      });
+      return;
+    }
+
+    const nextRatio = parseCanvasAspectRatioOption(nextValue);
+
+    if (nextRatio) {
+      commitRatio(nextRatio);
+    }
+  }
+
+  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">
+      <Select
+        layout="stacked"
+        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>
+  );
+}
+
 function asActionSchemas(
   actions: readonly (ToolcraftActionSchema | string)[] | undefined,
 ): readonly ToolcraftActionSchema[] {
@@ -690,6 +895,7 @@ function isRuntimeSetupSection(section: ToolcraftControlSectionSchema): boolean
   return Object.values(section.controls).some(
     (control) =>
       control.type === "settingsTransfer" ||
+      control.target === "canvas.aspectRatio" ||
       control.target === "canvas.size.width" ||
       control.target === "canvas.size.height",
   );
@@ -1486,12 +1692,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({
@@ -1499,13 +1787,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;
@@ -1765,6 +2055,17 @@ export function ControlsPanel({
                 );
               }
 
+              case "aspectRatio":
+                return (
+                  <CanvasAspectRatioControl
+                    defaultValue={control.defaultValue}
+                    key={id}
+                    name={name}
+                    onValueChange={commit}
+                    value={value}
+                  />
+                );
+
               case "anchorGrid":
                 return withKeyframeLabelAction({
                   children: (
@@ -1913,13 +2214,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
@@ -1931,33 +2257,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}
                   />
                 );
               }
@@ -2298,6 +2622,7 @@ export function ControlsPanel({
                       control,
                       label: name,
                       providerKey: id,
+                      sectionTitle: section.title,
                     }),
                     control,
                   }),

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

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

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

@@ -123,9 +123,33 @@ export function parseToolcraftSettingsPayload(
 }
 
 function applyCanvasSize(
-  dispatch: ToolcraftDispatch,
+  { dispatch, state }: ImportContext,
   size: ToolcraftSettingsTransferPayload["canvas"]["size"],
+  options: { deriveAspectRatio: boolean },
 ): void {
+  const importableTargets = getKnownValueTargets(state.schema);
+
+  if (
+    options.deriveAspectRatio &&
+    importableTargets.has("canvas.aspectRatio") &&
+    isFinitePositiveNumber(size.width) &&
+    isFinitePositiveNumber(size.height)
+  ) {
+    dispatch({
+      history: "merge",
+      historyGroup: settingsTransferImportHistoryGroup,
+      label: "Import settings",
+      target: "canvas.aspectRatio",
+      type: "controls.setValue",
+      value: {
+        height: size.height,
+        mode: "custom",
+        value: `${size.width}:${size.height}`,
+        width: size.width,
+      },
+    });
+  }
+
   if (isFinitePositiveNumber(size.width)) {
     dispatch({
       history: "merge",
@@ -211,7 +235,9 @@ export function applyToolcraftSettingsPayload(
     });
   }
 
-  applyCanvasSize(context.dispatch, payload.canvas.size);
+  applyCanvasSize(context, payload.canvas.size, {
+    deriveAspectRatio: !Object.hasOwn(payload.values, "canvas.aspectRatio"),
+  });
   applyTimeline(context, payload.timeline);
 }
 

package/templates/runtime/react/timeline-panel.test.tsx

@@ -114,6 +114,75 @@ describe("TimelinePanel", () => {
     expect(screen.getByTestId("timeline-looping").textContent).toBe("false");
   });
 
+  it("keeps timeline playhead handles easy to grab without changing visual size", () => {
+    const { container } = renderTimelinePanel();
+
+    const compactHandle = container.querySelector<HTMLElement>(
+      '[data-slot="timeline-playback-handle"]',
+    );
+
+    expect(compactHandle?.className).toContain("size-2");
+    expect(compactHandle?.className).toContain("before:inset-[-4px]");
+
+    fireEvent.click(screen.getByRole("button", { name: "Expand timeline panel" }));
+
+    const expandedHitArea = container.querySelector<HTMLElement>(
+      '[data-slot="timeline-expanded-playhead-hit-area"]',
+    );
+    const expandedHandle = container.querySelector<HTMLElement>(
+      '[data-slot="timeline-expanded-playhead-handle"]',
+    );
+
+    expect(expandedHandle?.className).toContain("size-[9px]");
+    expect(expandedHitArea?.getAttribute("style")).toContain("width: 15px;");
+  });
+
+  it("edits timeline duration from the highlighted duration value in collapsed and expanded states", () => {
+    const { container } = renderTimelinePanel();
+
+    const durationDisplay = container.querySelector<HTMLElement>(
+      '[data-slot="timeline-duration-display"]',
+    );
+
+    expect(durationDisplay?.className).toContain("!cursor-text");
+    expect(durationDisplay?.className).toContain("group-hover/timeline-panel-header:bg");
+    expect(durationDisplay?.className).toContain("var(--foreground)_8%");
+    expect(durationDisplay?.className).toContain("px-1");
+    expect(container.querySelector('[data-slot="timeline-duration-edit-trigger"]')).toBeNull();
+    expect(screen.queryByRole("textbox", { name: "timeline duration" })).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "Edit timeline duration" }));
+
+    const editor = screen.getByRole("textbox", { name: "timeline duration" });
+
+    expect(editor.className).toContain("var(--foreground)_8%");
+    expect(editor.className).toContain("px-1");
+    expect(editor.className).toContain("!cursor-text");
+    expect(screen.queryByRole("button", { name: "Edit timeline duration" })).toBeNull();
+
+    editor.textContent = "12s";
+    fireEvent.keyDown(editor, { key: "Enter" });
+
+    expect(screen.getByText("12s")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Expand timeline panel" }));
+
+    const expandedDurationDisplay = container.querySelector<HTMLElement>(
+      '[data-slot="timeline-duration-display"]',
+    );
+
+    expect(expandedDurationDisplay?.className).toContain("!cursor-text");
+    expect(expandedDurationDisplay?.className).toContain("group-hover/timeline-panel-header:bg");
+    expect(expandedDurationDisplay?.className).toContain("var(--foreground)_8%");
+
+    fireEvent.click(screen.getByRole("button", { name: "Edit timeline duration" }));
+
+    const expandedEditor = screen.getByRole("textbox", { name: "timeline duration" });
+
+    expect(expandedEditor.className).toContain("var(--foreground)_8%");
+    expect(expandedEditor.className).toContain("!cursor-text");
+  });
+
   it("replays from the beginning when play is pressed at the non-looping end", () => {
     renderTimelinePanel(
       {},