@pixel-point/toolcraft 0.0.4 → 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,
@@ -1691,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({
@@ -1704,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;
@@ -2129,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
@@ -2147,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}
                   />
                 );
               }
@@ -2514,6 +2622,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({

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(
       {},

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

@@ -11,7 +11,6 @@ import {
 } from 'react';
 import {
   Button,
-  EditableSliderValueLabel,
   PanelSurface,
   Popover,
   PopoverContent,
@@ -74,7 +73,7 @@ const timelineRulerRightInsetPx = timelineTrackColumnBorderWidthPx / 2;
 const timelineRowActionColumnWidthPx = 36;
 const timelineExpandedTrackEndOffsetPx =
   timelineTrackEndInsetPx + timelineRowActionColumnWidthPx + timelineTrackColumnBorderWidthPx;
-const timelinePlayheadSafeZonePx = 3;
+const timelinePlayheadSafeZonePx = 7;
 const timelinePlayheadHitAreaWidthPx =
   timelineTrackColumnBorderWidthPx + timelinePlayheadSafeZonePx * 2;
 const maxTimelineDurationSeconds = 60;
@@ -1667,7 +1666,7 @@ function TimelinePlaybackStrip({
       <span
         aria-hidden="true"
         className={cn(
-          'absolute bottom-px size-2 -translate-x-1/2 translate-y-1/2 rounded-full bg-[color:var(--link)] opacity-0 shadow-[0_2px_2px_color-mix(in_oklab,var(--background)_70%,transparent)] transition-[opacity,transform] duration-[120ms] ease-out group-hover/timeline-panel-surface:opacity-100 group-hover/timeline-strip:opacity-100 group-focus-visible/timeline-strip:opacity-100',
+          'absolute bottom-px size-2 -translate-x-1/2 translate-y-1/2 rounded-full bg-[color:var(--link)] opacity-0 shadow-[0_2px_2px_color-mix(in_oklab,var(--background)_70%,transparent)] transition-[opacity,transform] duration-[120ms] ease-out before:absolute before:inset-[-4px] before:content-[""] group-hover/timeline-panel-surface:opacity-100 group-hover/timeline-strip:opacity-100 group-focus-visible/timeline-strip:opacity-100',
           isScrubbing && 'scale-110 opacity-100',
         )}
         data-slot="timeline-playback-handle"
@@ -2498,6 +2497,99 @@ function useTimelineScrubber({
   };
 }
 
+function selectTimelineEditableText(node: HTMLElement): void {
+  const selection = window.getSelection();
+
+  if (!selection) {
+    return;
+  }
+
+  const range = document.createRange();
+  range.selectNodeContents(node);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+function TimelineDurationValue({
+  durationSeconds,
+  onCommit,
+}: {
+  durationSeconds: number;
+  onCommit: (value: string) => void;
+}): React.JSX.Element {
+  const [isEditing, setIsEditing] = useState(false);
+  const editorRef = useRef<HTMLSpanElement>(null);
+  const valueLabel = formatDurationValueLabel(durationSeconds);
+
+  useEffect(() => {
+    if (!isEditing) {
+      return;
+    }
+
+    const editor = editorRef.current;
+
+    if (!editor) {
+      return;
+    }
+
+    editor.textContent = valueLabel;
+    editor.focus();
+    selectTimelineEditableText(editor);
+  }, [isEditing, valueLabel]);
+
+  function commitDraft(): void {
+    onCommit(editorRef.current?.textContent ?? valueLabel);
+    setIsEditing(false);
+  }
+
+  if (isEditing) {
+    return (
+      <span
+        aria-label="timeline duration"
+        className="block h-5 min-w-[3ch] !cursor-text overflow-hidden whitespace-nowrap rounded bg-[color:color-mix(in_oklab,var(--foreground)_8%,transparent)] px-1 font-sans text-xs leading-5 text-[color:var(--foreground)] outline-none tabular-nums"
+        contentEditable
+        data-slot="timeline-duration-editor"
+        key="duration-editor"
+        onBlur={commitDraft}
+        onFocus={(event) => selectTimelineEditableText(event.currentTarget)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            commitDraft();
+          }
+
+          if (event.key === 'Escape') {
+            event.preventDefault();
+            setIsEditing(false);
+          }
+        }}
+        onPointerDown={(event) => event.stopPropagation()}
+        ref={editorRef}
+        role="textbox"
+        suppressContentEditableWarning
+        tabIndex={0}
+      />
+    );
+  }
+
+  return (
+    <button
+      aria-label="Edit timeline duration"
+      className="block h-5 min-w-[3ch] shrink-0 !cursor-text overflow-hidden rounded px-1 font-sans text-xs leading-5 text-[color:var(--muted-foreground)] tabular-nums transition-colors duration-150 ease-out group-hover/timeline-panel-header:bg-[color:color-mix(in_oklab,var(--foreground)_8%,transparent)] focus-visible:bg-[color:color-mix(in_oklab,var(--foreground)_8%,transparent)] focus-visible:outline-none"
+      data-slot="timeline-duration-display"
+      key="duration-display"
+      onClick={(event) => {
+        event.stopPropagation();
+        setIsEditing(true);
+      }}
+      onPointerDown={(event) => event.stopPropagation()}
+      type="button"
+    >
+      {valueLabel}
+    </button>
+  );
+}
+
 function TimelinePanelHeader({
   canExpand,
   currentTimeSeconds,
@@ -2538,7 +2630,7 @@ function TimelinePanelHeader({
   return (
     <div
       className={cn(
-        'relative flex min-w-0 shrink-0 items-center gap-1',
+        'group/timeline-panel-header relative flex min-w-0 shrink-0 items-center gap-1',
         isExpanded
           ? 'h-9 border-b border-[color:color-mix(in_oklab,var(--border)_8%,transparent)] p-1'
           : 'h-full',
@@ -2566,13 +2658,9 @@ function TimelinePanelHeader({
       <TimelinePanelDivider />
       <div className="ml-2 inline-flex shrink-0 items-center gap-1 text-xs leading-5 text-[color:color-mix(in_oklab,var(--foreground)_90%,transparent)]">
         <span>{isExpanded ? 'Duration:' : 'Dur:'}</span>
-        <EditableSliderValueLabel
-          ariaLabel="timeline duration"
-          layout="content"
-          maxValueLabel={`${maxTimelineDurationSeconds}s`}
+        <TimelineDurationValue
+          durationSeconds={durationSeconds}
           onCommit={onDurationCommit}
-          textAlign="left"
-          valueLabel={formatDurationValueLabel(durationSeconds)}
         />
       </div>
       <span

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

@@ -92,25 +92,25 @@ describe("ToolbarPanel", () => {
   it("dispatches zoom commands", () => {
     renderToolbar();
 
-    expect(screen.getByText("70%")).toBeTruthy();
+    expect(screen.getByText("100%")).toBeTruthy();
 
     fireEvent.click(screen.getByRole("button", { name: "Zoom out" }));
-    expect(screen.getByText("60%")).toBeTruthy();
+    expect(screen.getByText("90%")).toBeTruthy();
 
     fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
     fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
-    expect(screen.getByText("80%")).toBeTruthy();
+    expect(screen.getByText("110%")).toBeTruthy();
   });
 
   it("resets zoom from the zoom label double click", () => {
     renderToolbar();
 
     fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
-    expect(screen.getByText("80%")).toBeTruthy();
+    expect(screen.getByText("110%")).toBeTruthy();
 
-    fireEvent.doubleClick(screen.getByText("80%"));
+    fireEvent.doubleClick(screen.getByText("110%"));
 
-    expect(screen.getByText("70%")).toBeTruthy();
+    expect(screen.getByText("100%")).toBeTruthy();
   });
 
   it("centers the canvas through the radar command", () => {

package/templates/runtime/react/toolcraft-app.integration.test.tsx

@@ -268,7 +268,7 @@ describe("assembled Toolcraft template runtime", () => {
     expect(screen.getByText("Layers")).toBeTruthy();
     expect(screen.getByText("Dur:")).toBeTruthy();
     expect(screen.queryByText("Duration:")).toBeNull();
-    expect(toolbar?.textContent).toContain("70%");
+    expect(toolbar?.textContent).toContain("100%");
     expect(screen.getByRole("button", { name: "Undo" })).toBeDisabled();
     expect(screen.getByRole("button", { name: "Redo" })).toBeDisabled();
     expect(themeScope?.dataset.toolcraftTheme).toBe("dark");
@@ -305,7 +305,7 @@ describe("assembled Toolcraft template runtime", () => {
     ).toBe("320px");
 
     fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
-    expect(screen.getByText("80%")).toBeTruthy();
+    expect(screen.getByText("110%")).toBeTruthy();
 
     const wheelEvent = new WheelEvent("wheel", {
       bubbles: true,

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

@@ -47,7 +47,7 @@ describe("defineToolcraft", () => {
     });
 
     expect(app.canvas.draggable).toBe(true);
-    expect(app.canvas.size).toEqual({ height: 1024, unit: "px", width: 1024 });
+    expect(app.canvas.size).toEqual({ height: 1080, unit: "px", width: 1920 });
     expect(app.canvas.sizeSource).toBe("runtime-default");
     expect(app.canvas.sizing).toEqual({ mode: "intrinsic-media" });
     expect(app.toolbar).toEqual({ history: true, radar: true, theme: true, zoom: true });
@@ -612,11 +612,13 @@ describe("defineToolcraft", () => {
   it("publishes reserved targets for AI assembly boundaries", () => {
     expect(toolcraftRuntimeOwnedTargets).toEqual([
       "canvas.aspectRatio",
+      "canvas.renderScale",
       "canvas.size.width",
       "canvas.size.height",
     ]);
     expect(toolcraftReservedTargets).toEqual([
       "canvas.aspectRatio",
+      "canvas.renderScale",
       "canvas.size.width",
       "canvas.size.height",
       "selectedLayer.opacity",
@@ -792,6 +794,80 @@ describe("defineToolcraft", () => {
     expect(generationSection?.title).toBe("Generation");
   });
 
+  it("appends raster render scale to the technical setup controls when enabled", () => {
+    const app = defineToolcraft({
+      canvas: {
+        enabled: true,
+        renderScale: true,
+        size: { height: 900, unit: "px", width: 1440 },
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+      },
+    });
+
+    const setupSection = app.panels.controls?.sections[0];
+
+    expect(app.canvas.renderScale).toEqual({
+      defaultValue: 2,
+      enabled: true,
+      max: 2,
+      min: 1,
+      step: 0.25,
+    });
+    expect(app.assembly.capabilities).toContain("canvas.renderScale");
+    expect(Object.keys(setupSection?.controls ?? {})).toEqual([
+      "canvasAspectRatio",
+      "canvasWidth",
+      "canvasHeight",
+      "canvasRenderScale",
+    ]);
+    expect(setupSection?.controls.canvasRenderScale).toMatchObject({
+      defaultValue: 2,
+      label: "Resolution scale",
+      markerCount: 5,
+      max: 2,
+      min: 1,
+      step: 0.25,
+      target: "canvas.renderScale",
+      type: "slider",
+      unit: "x",
+      variant: "discrete",
+    });
+  });
+
+  it("can prepend render scale without editable output sizing", () => {
+    const app = defineToolcraft({
+      canvas: {
+        enabled: true,
+        renderScale: { defaultValue: 1.5 },
+        size: { height: 900, unit: "px", width: 1440 },
+        sizing: { mode: "fixed-output" },
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(app.panels.controls?.sections[0]).toMatchObject({
+      controls: {
+        canvasRenderScale: {
+          defaultValue: 1.5,
+          target: "canvas.renderScale",
+          type: "slider",
+        },
+      },
+      title: "Setup",
+    });
+  });
+
   it("does not prepend canvas size controls for intrinsic media or explicitly fixed output", () => {
     const intrinsicApp = defineToolcraft({
       canvas: {