@pixel-point/toolcraft 0.0.3 → 0.0.6

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/canvas-aspect-ratio-presets.ts

@@ -0,0 +1,50 @@
+import type { ToolcraftCanvasSize } from "./types";
+
+export type ToolcraftCanvasAspectRatioPresetValue =
+  | "1:1"
+  | "3:2"
+  | "16:9"
+  | "3:4"
+  | "9:16"
+  | "2:3"
+  | "4:3";
+
+export type ToolcraftCanvasAspectRatioPreset = {
+  height: number;
+  ratioHeight: number;
+  ratioWidth: number;
+  value: ToolcraftCanvasAspectRatioPresetValue;
+  width: number;
+};
+
+export const toolcraftCanvasAspectRatioPresets = [
+  { height: 1080, ratioHeight: 1, ratioWidth: 1, value: "1:1", width: 1080 },
+  { height: 1080, ratioHeight: 2, ratioWidth: 3, value: "3:2", width: 1620 },
+  { height: 1080, ratioHeight: 9, ratioWidth: 16, value: "16:9", width: 1920 },
+  { height: 1440, ratioHeight: 4, ratioWidth: 3, value: "3:4", width: 1080 },
+  { height: 1920, ratioHeight: 16, ratioWidth: 9, value: "9:16", width: 1080 },
+  { height: 1620, ratioHeight: 3, ratioWidth: 2, value: "2:3", width: 1080 },
+  { height: 1080, ratioHeight: 3, ratioWidth: 4, value: "4:3", width: 1440 },
+] as const satisfies readonly ToolcraftCanvasAspectRatioPreset[];
+
+export const toolcraftCanvasAspectRatioPresetValues = new Set<string>(
+  toolcraftCanvasAspectRatioPresets.map((preset) => preset.value),
+);
+
+export function getToolcraftCanvasAspectRatioPreset(
+  value: string,
+): ToolcraftCanvasAspectRatioPreset | null {
+  return (
+    toolcraftCanvasAspectRatioPresets.find((preset) => preset.value === value) ?? null
+  );
+}
+
+export function getToolcraftCanvasAspectRatioPresetBySize(
+  size: ToolcraftCanvasSize,
+): ToolcraftCanvasAspectRatioPreset | null {
+  return (
+    toolcraftCanvasAspectRatioPresets.find(
+      (preset) => preset.width === size.width && preset.height === size.height,
+    ) ?? null
+  );
+}

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

@@ -10,6 +10,7 @@ import {
   toolcraftRuntimeOwnedTargets,
   getToolcraftCanvasSizeTargetDimension,
   isToolcraftReservedTarget,
+  isToolcraftRuntimeOwnedTarget,
 } from "./runtime-targets";
 
 describe("defineToolcraft", () => {
@@ -46,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 });
@@ -111,6 +112,10 @@ describe("defineToolcraft", () => {
       mode: "auto",
     });
     expect(app.panels.controls?.sections[0]?.title).toBe("Setup");
+    expect(app.panels.controls?.sections[0]?.controls.canvasAspectRatio).toMatchObject({
+      target: "canvas.aspectRatio",
+      type: "aspectRatio",
+    });
     expect(app.panels.controls?.sections[0]?.controls.canvasWidth).toBeTruthy();
   });
 
@@ -231,7 +236,7 @@ describe("defineToolcraft", () => {
     });
   });
 
-  it("ignores runtime canvas size controls in settings transfer eligibility", () => {
+  it("ignores runtime canvas setup controls in settings transfer eligibility", () => {
     const app = defineToolcraft({
       canvas: { enabled: true, size: { height: 720, unit: "px", width: 1280 } },
       panels: {
@@ -248,6 +253,7 @@ describe("defineToolcraft", () => {
       settingsTransfer: false,
     });
 
+    expect(app.panels.controls?.sections[0]?.controls.canvasAspectRatio).toBeTruthy();
     expect(app.panels.controls?.sections[0]?.controls.canvasWidth).toBeTruthy();
     expect(app.panels.controls?.sections[0]?.controls.canvasHeight).toBeTruthy();
     expect(getToolcraftSettingsTransferEligibility({ panels: app.panels })).toEqual({
@@ -326,9 +332,20 @@ describe("defineToolcraft", () => {
     expect(runtimeSettingsSection?.title).toBe("Setup");
     expect(Object.keys(runtimeSettingsSection?.controls ?? {})).toEqual([
       "settingsTransfer",
+      "canvasAspectRatio",
       "canvasWidth",
       "canvasHeight",
     ]);
+    expect(runtimeSettingsSection?.controls.canvasAspectRatio).toMatchObject({
+      defaultValue: {
+        height: 9,
+        mode: "preset",
+        value: "16:9",
+        width: 16,
+      },
+      target: "canvas.aspectRatio",
+      type: "aspectRatio",
+    });
     expect(runtimeSettingsSection?.controls.canvasWidth).toBeTruthy();
     expect(runtimeSettingsSection?.controls.canvasHeight).toBeTruthy();
     expect(runtimeSettingsSection?.controls.settingsTransfer?.type).toBe(
@@ -594,10 +611,14 @@ 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",
@@ -606,6 +627,7 @@ describe("defineToolcraft", () => {
     expect(getToolcraftCanvasSizeTargetDimension("canvas.size.width")).toBe("width");
     expect(getToolcraftCanvasSizeTargetDimension("canvas.size.height")).toBe("height");
     expect(getToolcraftCanvasSizeTargetDimension("generation.prompt")).toBeNull();
+    expect(isToolcraftRuntimeOwnedTarget("canvas.aspectRatio")).toBe(true);
     expect(isToolcraftReservedTarget("selectedLayer.opacity")).toBe(true);
     expect(isToolcraftReservedTarget("generation.prompt")).toBe(false);
   });
@@ -674,6 +696,18 @@ describe("defineToolcraft", () => {
     expect(app.canvas.sizeSource).toBe("app");
     expect(app.canvas.sizing).toEqual({ mode: "editable-output" });
     expect(app.panels.controls?.sections[0]?.title).toBe("Setup");
+    expect(app.panels.controls?.sections[0]?.controls.canvasAspectRatio).toMatchObject({
+      defaultValue: {
+        height: 256,
+        mode: "custom",
+        value: "455:256",
+        width: 455,
+      },
+      label: "Aspect ratio",
+      performanceRole: "workload",
+      target: "canvas.aspectRatio",
+      type: "aspectRatio",
+    });
     expect(app.panels.controls?.sections[0]?.controls.canvasWidth).toMatchObject({
       defaultValue: 1365,
       performanceRole: "workload",
@@ -724,6 +758,18 @@ describe("defineToolcraft", () => {
     const [canvasSection, generationSection] = app.panels.controls?.sections ?? [];
 
     expect(canvasSection?.title).toBe("Setup");
+    expect(canvasSection?.controls.canvasAspectRatio).toMatchObject({
+      defaultValue: {
+        height: 5,
+        mode: "custom",
+        value: "8:5",
+        width: 8,
+      },
+      label: "Aspect ratio",
+      performanceRole: "workload",
+      target: "canvas.aspectRatio",
+      type: "aspectRatio",
+    });
     expect(canvasSection?.controls.canvasWidth).toMatchObject({
       defaultValue: 1440,
       label: "Canvas width",
@@ -748,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: {