@pixel-point/toolcraft 0.0.8 → 0.0.11

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

@@ -47,6 +47,7 @@ import {
   type GradientStop,
   type GradientType,
   type ImagePickerItem,
+  type VectorPadCoordinateMode,
   type VectorPadVariant,
 } from "@repo/ui";
 
@@ -64,7 +65,12 @@ import {
   toolcraftCanvasAspectRatioPresets,
 } from "../schema/canvas-aspect-ratio-presets";
 import { getToolcraftControlKeyframeCapability } from "../schema/keyframe-capability";
-import { getToolcraftCanvasSizeTargetDimension } from "../schema/runtime-targets";
+import {
+  getToolcraftCanvasSizeTargetDimension,
+  isToolcraftRuntimeOwnedTarget,
+  isToolcraftTimelinePanelExtendedTarget,
+  isToolcraftTimelinePanelVisibleTarget,
+} from "../schema/runtime-targets";
 import type {
   ToolcraftCommand,
   ToolcraftPanelState,
@@ -421,6 +427,17 @@ function asVectorPadVariant(value: string | undefined): VectorPadVariant {
   return "default";
 }
 
+function asVectorPadCoordinateMode(
+  value: string | undefined,
+  padVariant: VectorPadVariant,
+): VectorPadCoordinateMode {
+  if (value === "cartesian" || value === "screen") {
+    return value;
+  }
+
+  return padVariant === "default" ? "screen" : "cartesian";
+}
+
 function asCurveInterpolation(value: string | undefined): CurveInterpolation | undefined {
   return value === "monotone" || value === "smooth" ? value : undefined;
 }
@@ -773,7 +790,6 @@ function CanvasAspectRatioControl({
   return (
     <div className="min-w-0 space-y-2" data-slot="canvas-aspect-ratio-control">
       <Select
-        layout="stacked"
         name={name}
         onValueChange={updatePreset}
         options={canvasAspectRatioOptions}
@@ -838,6 +854,23 @@ function getActionLabel(action: ToolcraftActionSchema): string {
   return action.label ?? action.value;
 }
 
+function isExportPanelAction(action: ToolcraftActionSchema): boolean {
+  const label = getActionLabel(action);
+  const value = action.value;
+
+  return (
+    /\bexport\b/i.test(label) ||
+    /(?:^|[._:-])export(?:[._:-]|$)/i.test(value) ||
+    /^export(?:[._:-]|$)/i.test(value)
+  );
+}
+
+function getPanelActionIcon(
+  action: ToolcraftActionSchema,
+): PanelActionObjectOption["icon"] {
+  return isExportPanelAction(action) ? "upload-simple" : action.icon;
+}
+
 function getControlName(id: string, label: boolean | string | undefined): string {
   if (typeof label === "string") {
     return label;
@@ -974,26 +1007,19 @@ function isColorOnlySection(entries: readonly ControlEntry[]): boolean {
 function getRenderedControlsSectionTitle(
   section: ToolcraftControlSectionSchema,
 ): ToolcraftControlSectionSchema["title"] {
-  return shouldHideRuntimeControlsSectionTitle(section) ? undefined : section.title;
+  return isStickyFooterActionSection(section) ? undefined : section.title;
 }
 
-function shouldHideRuntimeControlsSectionTitle(
-  section: ToolcraftControlSectionSchema,
-): boolean {
-  return isRuntimeSetupSection(section) || isStickyFooterActionSection(section);
-}
-
-function isRuntimeSetupSection(section: ToolcraftControlSectionSchema): boolean {
-  if (section.title !== "Setup") {
-    return false;
-  }
-
-  return Object.values(section.controls).some(
-    (control) =>
-      control.type === "settingsTransfer" ||
-      control.target === "canvas.aspectRatio" ||
-      control.target === "canvas.size.width" ||
-      control.target === "canvas.size.height",
+function isRuntimeSetupSection({
+  entries,
+  section,
+}: {
+  entries: readonly ControlEntry[];
+  section: ToolcraftControlSectionSchema;
+}): boolean {
+  return (
+    section.title === "Setup" &&
+    entries.some(([, control]) => isToolcraftRuntimeOwnedTarget(control.target))
   );
 }
 
@@ -1154,6 +1180,15 @@ function hasSliderControl(
   );
 }
 
+function hasSegmentedControl(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  return layoutGroup.controls.some(
+    (controlId) => controlsById[controlId]?.type === "segmented",
+  );
+}
+
 function hasSectionedCompoundControl(
   controlsById: Record<string, ToolcraftControlSchema>,
   layoutGroup: ToolcraftControlLayoutGroupSchema,
@@ -1214,6 +1249,22 @@ function isToggleParameterLayoutGroup(
   return booleanControlCount === 1 && parameterControlCount === 1;
 }
 
+function shouldHideToggleParameterControlLabel({
+  control,
+  controlsById,
+  layoutGroup,
+}: {
+  control: ToolcraftControlSchema;
+  controlsById: Record<string, ToolcraftControlSchema>;
+  layoutGroup: ToolcraftControlLayoutGroupSchema | undefined;
+}): boolean {
+  return Boolean(
+    layoutGroup &&
+      isToggleParameterLayoutGroup(controlsById, layoutGroup) &&
+      !isBooleanControl(control),
+  );
+}
+
 function getControlTargetEntityKey(control: ToolcraftControlSchema): string | null {
   const parts = control.target.split(".");
 
@@ -1409,6 +1460,7 @@ function getInlineLayoutGroupByControlId({
     if (
       hasColorOpacityControl(controlsById, layoutGroup) ||
       hasSliderControl(controlsById, layoutGroup) ||
+      hasSegmentedControl(controlsById, layoutGroup) ||
       hasSectionedCompoundControl(controlsById, layoutGroup) ||
       hasUnsafeInlineSwitchLabels(controlsById, layoutGroup)
     ) {
@@ -1576,6 +1628,14 @@ export function ControlsPanel({
   function getControlValue(control: ToolcraftControlSchema): unknown {
     const canvasSizeDimension = getToolcraftCanvasSizeTargetDimension(control.target);
 
+    if (isToolcraftTimelinePanelExtendedTarget(control.target)) {
+      return state.panels.timeline.extended === true;
+    }
+
+    if (isToolcraftTimelinePanelVisibleTarget(control.target)) {
+      return state.panels.timeline.hidden !== true;
+    }
+
     return canvasSizeDimension
       ? state.canvas.size[canvasSizeDimension]
       : (state.values[control.target] ?? control.defaultValue);
@@ -1596,6 +1656,14 @@ export function ControlsPanel({
   function getTargetValue(target: string): unknown {
     const canvasSizeDimension = getToolcraftCanvasSizeTargetDimension(target);
 
+    if (isToolcraftTimelinePanelExtendedTarget(target)) {
+      return state.panels.timeline.extended === true;
+    }
+
+    if (isToolcraftTimelinePanelVisibleTarget(target)) {
+      return state.panels.timeline.hidden !== true;
+    }
+
     return canvasSizeDimension
       ? state.canvas.size[canvasSizeDimension]
       : (state.values[target] ?? getControlDefaultValueByTarget(target));
@@ -1893,6 +1961,10 @@ export function ControlsPanel({
     providerKey: string;
     sectionTitle: string | undefined;
   }): React.ReactNode {
+    if (control.label === false) {
+      return children;
+    }
+
     const help = getControlHelpText({ control, label, sectionTitle });
 
     if (!help) {
@@ -2329,14 +2401,17 @@ export function ControlsPanel({
       {visibleSections.map(({ entries, section }, sectionIndex) => {
         const visibleControls = getControlsRecord(entries);
         const sectionHasOnlyColorFields = isColorOnlySection(entries);
-        const renderedSectionTitle = getRenderedControlsSectionTitle(section);
-        const sectionSpacing = isRuntimeSetupSection(section) ? "technical" : "default";
+        const isRuntimeSetup = isRuntimeSetupSection({ entries, section });
+        const renderedSectionTitle = isRuntimeSetup
+          ? undefined
+          : getRenderedControlsSectionTitle(section);
+        const sectionSpacing = "default";
         const sectionCollapseKey = getControlsPanelSectionCollapseKey({
           entries,
           section,
           sectionIndex,
         });
-        const isSectionCollapsible = renderedSectionTitle !== undefined;
+        const isSectionCollapsible = !isRuntimeSetup && renderedSectionTitle !== undefined;
         const isSectionCollapsed =
           isSectionCollapsible && collapsedSectionByKey[sectionCollapseKey] === true;
         const headerKeyframeEntry = getSectionHeaderKeyframeEntry(entries, section.title);
@@ -2404,13 +2479,23 @@ export function ControlsPanel({
                 }
 
                 const [id, rawControl] = group.entry;
-                const isInInlineLayoutGroup = inlineLayoutGroupByControlId.has(id);
+                const inlineLayoutGroup = inlineLayoutGroupByControlId.get(id);
+                const isInInlineLayoutGroup = Boolean(inlineLayoutGroup);
                 const disabled = isControlDisabled(rawControl);
-                const control =
+                const resolvedControl =
                   disabled === Boolean(rawControl.disabled)
                     ? rawControl
                     : { ...rawControl, disabled };
-                const name = getControlName(id, control.label);
+                const shouldHideLabel = shouldHideToggleParameterControlLabel({
+                  control: resolvedControl,
+                  controlsById: visibleControls,
+                  layoutGroup: inlineLayoutGroup,
+                });
+                const control =
+                  shouldHideLabel && resolvedControl.label !== false
+                    ? { ...resolvedControl, label: false }
+                    : resolvedControl;
+                const name = getControlName(id, resolvedControl.label);
                 const value = getControlValue(control);
                 const usesHeaderKeyframeAction = control.target === headerKeyframeTarget;
                 const commitWithLabel =
@@ -2522,6 +2607,7 @@ export function ControlsPanel({
                       key={id}
                       name={name}
                       onValueChange={commit}
+                      showLabel={control.label !== false}
                       value={asString(value)}
                     />
                   ),
@@ -2624,6 +2710,7 @@ export function ControlsPanel({
                   id: asset.id,
                   size: asset.size,
                   src: asset.dataUrl,
+                  transform: asset.transform,
                 }));
                 const previewMediaIds = previewMediaAssets.map((asset) => asset.id);
                 const importFile = (file: File, replaceExisting: boolean): void => {
@@ -2733,6 +2820,17 @@ export function ControlsPanel({
                         type: "media.reorder",
                       });
                     }}
+                    onPreviewTransform={(item, operation) => {
+                      if (!item.id) {
+                        return;
+                      }
+
+                      dispatchCommand({
+                        mediaId: item.id,
+                        operation,
+                        type: "media.transform",
+                      });
+                    }}
                     preview={
                       previewMediaAsset
                         ? {
@@ -2740,6 +2838,7 @@ export function ControlsPanel({
                             alt: previewMediaAsset.fileName,
                             size: previewMediaAsset.size,
                             src: previewMediaAsset.dataUrl,
+                            transform: previewMediaAsset.transform,
                           }
                         : undefined
                     }
@@ -2814,7 +2913,7 @@ export function ControlsPanel({
                           : undefined
                       }
                       key={id}
-                      onCommit={(nextValue) => commit(nextValue)}
+                      onValueChange={commit}
                       value={
                         isRecord(value)
                           ? (value as React.ComponentProps<typeof Palette>["value"])
@@ -2835,7 +2934,7 @@ export function ControlsPanel({
                 return (
                   <PanelActions
                     actions={actions.map((action) => ({
-                      icon: action.icon,
+                      icon: getPanelActionIcon(action),
                       name: getActionLabel(action),
                       value: action.value,
                       variant: getPanelActionButtonVariant(action.variant),
@@ -2863,6 +2962,7 @@ export function ControlsPanel({
                       key={id}
                       name={name}
                       onValueChange={commit}
+                      showLabel={control.label !== false}
                       start={rangeValue.start}
                     />
                   ),
@@ -2925,10 +3025,10 @@ export function ControlsPanel({
                 return (
                   <Select
                     key={id}
-                    layout={isInInlineLayoutGroup ? "stacked" : undefined}
                     name={name}
                     onValueChange={commit}
                     options={control.options ?? []}
+                    showLabel={control.label !== false}
                     value={asString(value, control.options?.[0]?.value ?? "")}
                   />
                 );
@@ -3008,6 +3108,7 @@ export function ControlsPanel({
                       key={id}
                       name={name}
                       onValueChange={commit}
+                      showLabel={control.label !== false}
                       value={asString(value)}
                     />
                   ),
@@ -3020,6 +3121,7 @@ export function ControlsPanel({
 
               case "vector": {
                 const vectorValue = asVectorValue(value);
+                const padVariant = asVectorPadVariant(control.variant);
 
                 return withKeyframeLabelAction({
                   children: (
@@ -3028,8 +3130,12 @@ export function ControlsPanel({
                       key={id}
                       name={name}
                       onValueChange={commit}
+                      padCoordinateMode={asVectorPadCoordinateMode(
+                        control.coordinateMode,
+                        padVariant,
+                      )}
                       padShape={vectorPadShape}
-                      padVariant={asVectorPadVariant(control.variant)}
+                      padVariant={padVariant}
                       x={vectorValue.x}
                       xLabel={control.xLabel}
                       y={vectorValue.y}

package/templates/runtime/react/runtime-public-api.test.tsx

@@ -48,7 +48,7 @@ describe("Toolcraft template runtime public API", () => {
     >().toEqualTypeOf<ControlsPanelKeys>();
     expectTypeOf<
       keyof React.ComponentProps<typeof TimelinePanel>
-    >().toEqualTypeOf<RuntimePanelKeys | "defaultExpanded">();
+    >().toEqualTypeOf<RuntimePanelKeys | "defaultExpanded" | "variant">();
     expectTypeOf<
       keyof React.ComponentProps<typeof ToolbarPanel>
     >().toEqualTypeOf<RuntimePanelKeys>();

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

@@ -64,6 +64,8 @@ describe("settings transfer", () => {
     const state = createToolcraftState(schema, {
       values: {
         "generation.prompt": "Exported prompt",
+        "panels.timeline.extended": true,
+        "panels.timeline.visible": false,
         "style.opacity": 24,
       },
     });
@@ -82,6 +84,8 @@ describe("settings transfer", () => {
       },
       version: 1,
     });
+    expect(payload.values).not.toHaveProperty("panels.timeline.extended");
+    expect(payload.values).not.toHaveProperty("panels.timeline.visible");
     expect(parseToolcraftSettingsPayload(schema, payload)).toEqual(payload);
     expect(
       parseToolcraftSettingsPayload(

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

@@ -1,4 +1,5 @@
 import type { ResolvedToolcraftAppSchema } from "../schema/types";
+import { isToolcraftTimelinePanelRuntimeTarget } from "../schema/runtime-targets";
 import type {
   ToolcraftCommand,
   ToolcraftState,
@@ -50,7 +51,11 @@ function getKnownValueTargets(schema: ResolvedToolcraftAppSchema): Set<string> {
 
   for (const section of schema.panels.controls?.sections ?? []) {
     for (const control of Object.values(section.controls)) {
-      if (control.type !== "panelActions" && control.type !== "settingsTransfer") {
+      if (
+        control.type !== "panelActions" &&
+        control.type !== "settingsTransfer" &&
+        !isToolcraftTimelinePanelRuntimeTarget(control.target)
+      ) {
         targets.add(control.target);
       }
     }

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

@@ -97,6 +97,20 @@ describe("TimelinePanel", () => {
     expect(screen.queryByText("Add your first keyframe from the properties panel.")).toBeNull();
   });
 
+  it("renders compact presentation as playback-only transport", () => {
+    renderTimelinePanel({ variant: "compact" });
+
+    expect(screen.getByRole("button", { name: "Pause playback" })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Disable loop" })).toBeNull();
+    expect(screen.queryByText("Dur:")).toBeNull();
+    expect(screen.queryByText("Duration:")).toBeNull();
+    expect(screen.queryByRole("slider", { name: "Playback position" })).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "Pause playback" }));
+
+    expect(screen.getByTestId("timeline-playing").textContent).toBe("false");
+  });
+
   it("renders timeline state and dispatches playback commands", () => {
     renderTimelinePanel();
 

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

@@ -31,6 +31,7 @@ import type {
   ToolcraftTimelineKeyframeEasing,
   ToolcraftTimelineKeyframeGroup,
 } from '../state/types';
+import { getToolcraftTimelineLoopTime } from '../state/timeline-loop';
 import { isTimelineReadyForPlayback } from '../state/timeline-readiness';
 import { PanelContainer } from './panel-host';
 import type { PanelPlacement, PanelStateChange } from './panel-host-types';
@@ -43,6 +44,7 @@ type TimelinePanelProps = {
   onPanelStateChange?: PanelStateChange;
   panelPlacement?: PanelPlacement;
   panelState?: ToolcraftPanelState;
+  variant?: 'compact' | 'extended';
 };
 
 function cn(...classNames: Array<string | false | null | undefined>): string {
@@ -50,6 +52,7 @@ function cn(...classNames: Array<string | false | null | undefined>): string {
 }
 
 const timelinePanelCollapsedSize = { height: 36 } as const;
+const timelinePanelCompactWidthPx = 36;
 const timelinePanelCollapsedWidthPx = 256;
 const timelinePanelExpandedWidthPx = 688;
 const timelinePanelMinResponsiveWidthPx = 320;
@@ -2336,12 +2339,15 @@ function useTimelineClock({
       setCurrentTimeSeconds((currentValue) => {
         const nextValue = currentValue + elapsedSeconds;
 
-        if (nextValue <= durationSeconds) {
+        if (nextValue < durationSeconds) {
           return nextValue;
         }
 
         if (isLooping) {
-          return nextValue % durationSeconds;
+          return getToolcraftTimelineLoopTime({
+            currentTimeSeconds: nextValue,
+            durationSeconds,
+          });
         }
 
         setIsPlaying(false);
@@ -2608,6 +2614,7 @@ function TimelinePanelHeader({
   onToggleLoop,
   onTogglePlayback,
   stripRef,
+  variant,
 }: {
   canExpand: boolean;
   currentTimeSeconds: number;
@@ -2626,7 +2633,31 @@ function TimelinePanelHeader({
   onToggleLoop: () => void;
   onTogglePlayback: () => void;
   stripRef: React.RefObject<HTMLDivElement | null>;
+  variant: 'compact' | 'extended';
 }): React.JSX.Element {
+  if (variant === 'compact') {
+    return (
+      <div
+        className="relative flex h-full min-w-0 shrink-0 items-center justify-center"
+        data-slot="timeline-panel-header"
+        data-timeline-panel-variant="compact"
+      >
+        <div
+          className="relative z-10 inline-flex shrink-0 items-center"
+          data-slot="timeline-transport-controls"
+        >
+          <TimelineIconButton
+            disabled={!playbackReady}
+            label={isPlaying ? 'Pause playback' : 'Play playback'}
+            onClick={onTogglePlayback}
+          >
+            {isPlaying ? <Pause /> : <Play />}
+          </TimelineIconButton>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       className={cn(
@@ -2705,6 +2736,7 @@ export function TimelinePanel({
   onPanelStateChange,
   panelPlacement,
   panelState,
+  variant = 'extended',
 }: TimelinePanelProps): React.JSX.Element | null {
   const { dispatch, state } = useToolcraft();
 
@@ -2727,7 +2759,8 @@ export function TimelinePanel({
   const [defaultExpandedPending, setDefaultExpandedPending] = useState(defaultExpanded);
   const [isHoverPaused, setIsHoverPaused] = useState(false);
   const displayedIsPlaying = playbackReady && isPlaying;
-  const isExpanded = keyframesEnabled && (expanded || defaultExpandedPending);
+  const isCompact = variant === 'compact';
+  const isExpanded = !isCompact && keyframesEnabled && (expanded || defaultExpandedPending);
   const expandedPanelSize = getTimelinePanelExpandedSize(keyframeGroups);
   const previousIsExpandedRef = useRef(isExpanded);
   const timelineRef = useRef(state.timeline);
@@ -2911,7 +2944,9 @@ export function TimelinePanel({
   const { panelRef: timelineSurfaceRef, responsiveLayout } = useTimelinePanelResponsiveLayout(
     isExpanded && !shouldConstrainToContainer,
   );
-  const unconstrainedTimelinePanelWidth = isExpanded
+  const unconstrainedTimelinePanelWidth = isCompact
+    ? timelinePanelCompactWidthPx
+    : isExpanded
     ? expandedPanelSize.width
     : timelinePanelCollapsedWidthPx;
   const timelinePanelWidth =
@@ -2947,6 +2982,7 @@ export function TimelinePanel({
       data-playback-ready={playbackReady ? 'true' : 'false'}
       data-scrubbing={scrubber.isScrubbing ? 'true' : 'false'}
       data-slot="timeline-panel"
+      data-timeline-panel-variant={variant}
       initial={false}
       ref={timelineSurfaceRef}
       style={timelinePanelLayoutStyle}
@@ -2956,7 +2992,7 @@ export function TimelinePanel({
         className={cn(
           'group/timeline-panel-surface relative flex h-full w-full flex-col rounded-t-lg rounded-b-lg',
           isExpanded ? 'overflow-hidden' : 'overflow-visible p-1',
-          !isExpanded && !keyframesEnabled && 'pr-3',
+          !isCompact && !isExpanded && !keyframesEnabled && 'pr-3',
         )}
         data-panel-id="timeline"
         onPointerEnter={() => setIsHoverPaused(true)}
@@ -2970,13 +3006,13 @@ export function TimelinePanel({
           setIsHoverPaused(false);
         }}
       >
-        {isExpanded ? null : (
+        {!isCompact && !isExpanded ? (
           <TimelinePanelMask
             currentTimeSeconds={currentTimeSeconds}
             durationSeconds={durationSeconds}
             isHandleVisible={isHoverPaused || scrubber.isScrubbing}
           />
-        )}
+        ) : null}
         <TimelinePanelHeader
           canExpand={keyframesEnabled}
           currentTimeSeconds={currentTimeSeconds}
@@ -3001,6 +3037,7 @@ export function TimelinePanel({
             dispatch({ type: 'timeline.togglePlayback' });
           }}
           stripRef={scrubber.stripRef}
+          variant={variant}
         />
         {isExpanded && keyframesEnabled ? (
           <TimelineExpandedContent

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

@@ -188,6 +188,10 @@ describe("assembled Toolcraft template runtime", () => {
     renderAssembledEditor();
 
     expect(screen.getByText("Layers")).toBeTruthy();
+    const timelineField = screen.getByText("Timeline").closest('[role="group"]');
+    const timelineSwitch = timelineField?.querySelector<HTMLElement>('[role="switch"]');
+
+    fireEvent.click(timelineSwitch as HTMLElement);
     fireEvent.click(
       screen.getByRole("button", { name: "Expand timeline panel" }),
     );
@@ -266,7 +270,8 @@ describe("assembled Toolcraft template runtime", () => {
     ).toBe("320px");
     expect(screen.getByText("Master Controls")).toBeTruthy();
     expect(screen.getByText("Layers")).toBeTruthy();
-    expect(screen.getByText("Dur:")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Pause playback" })).toBeTruthy();
+    expect(screen.queryByText("Dur:")).toBeNull();
     expect(screen.queryByText("Duration:")).toBeNull();
     expect(toolbar?.textContent).toContain("100%");
     expect(screen.getByRole("button", { name: "Undo" })).toBeDisabled();
@@ -339,6 +344,9 @@ describe("assembled Toolcraft template runtime", () => {
     });
     expect(screen.getByRole("button", { name: "Undo" })).not.toBeDisabled();
 
+    const timelineField = screen.getByText("Timeline").closest('[role="group"]');
+    const timelineSwitch = timelineField?.querySelector<HTMLElement>('[role="switch"]');
+    fireEvent.click(timelineSwitch as HTMLElement);
     fireEvent.click(
       screen.getByRole("button", { name: "Expand timeline panel" }),
     );