@pixel-point/toolcraft 0.0.9 → 0.0.12

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

@@ -65,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,
@@ -785,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}
@@ -850,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;
@@ -986,26 +1007,19 @@ function isColorOnlySection(entries: readonly ControlEntry[]): boolean {
 function getRenderedControlsSectionTitle(
   section: ToolcraftControlSectionSchema,
 ): ToolcraftControlSectionSchema["title"] {
-  return shouldHideRuntimeControlsSectionTitle(section) ? undefined : section.title;
-}
-
-function shouldHideRuntimeControlsSectionTitle(
-  section: ToolcraftControlSectionSchema,
-): boolean {
-  return isRuntimeSetupSection(section) || isStickyFooterActionSection(section);
+  return isStickyFooterActionSection(section) ? undefined : section.title;
 }
 
-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))
   );
 }
 
@@ -1614,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);
@@ -1634,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));
@@ -2371,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);
@@ -2677,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 => {
@@ -2786,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
                         ? {
@@ -2793,6 +2838,7 @@ export function ControlsPanel({
                             alt: previewMediaAsset.fileName,
                             size: previewMediaAsset.size,
                             src: previewMediaAsset.dataUrl,
+                            transform: previewMediaAsset.transform,
                           }
                         : undefined
                     }
@@ -2867,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"])
@@ -2888,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),
@@ -2979,7 +3025,6 @@ export function ControlsPanel({
                 return (
                   <Select
                     key={id}
-                    layout={isInInlineLayoutGroup ? "stacked" : undefined}
                     name={name}
                     onValueChange={commit}
                     options={control.options ?? []}

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" }),
     );

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

@@ -1,4 +1,5 @@
 import {
+  act,
   cleanup,
   fireEvent,
   render,
@@ -6,7 +7,7 @@ import {
   waitFor,
 } from "@testing-library/react";
 import * as React from "react";
-import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
 
 import { defineToolcraft } from "../schema/define-toolcraft";
 import type { ToolcraftCustomControlRendererProps } from "./control-renderers";
@@ -27,9 +28,17 @@ beforeAll(() => {
     }),
     writable: true,
   });
+  window.requestAnimationFrame ??= ((callback: FrameRequestCallback) =>
+    window.setTimeout(
+      () => callback(performance.now()),
+      16,
+    )) as typeof window.requestAnimationFrame;
+  window.cancelAnimationFrame ??= ((handle: number) =>
+    window.clearTimeout(handle)) as typeof window.cancelAnimationFrame;
 });
 
 afterEach(() => {
+  vi.useRealTimers();
   cleanup();
   document.documentElement.classList.remove("dark");
   document.documentElement.style.colorScheme = "";
@@ -113,6 +122,16 @@ function CustomValueProbe(): React.JSX.Element {
   );
 }
 
+function TimelineTimeProbe(): React.JSX.Element {
+  const { state } = useToolcraft();
+
+  return (
+    <span data-testid="timeline-time">
+      {state.timeline.currentTimeSeconds.toFixed(3)}
+    </span>
+  );
+}
+
 describe("ToolcraftApp", () => {
   it("renders enabled runtime surfaces from the app schema", () => {
     const { container } = render(<ToolcraftApp schema={createSchema()} />);
@@ -122,7 +141,11 @@ describe("ToolcraftApp", () => {
     ).toBeTruthy();
     expect(screen.getByText("Controls")).toBeTruthy();
     expect(screen.getByText("Layers")).toBeTruthy();
-    expect(screen.getByText("Dur:")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Pause playback" })).toBeTruthy();
+    expect(
+      container.querySelector('[data-toolcraft-timeline-panel-variant="compact"]'),
+    ).toBeTruthy();
+    expect(screen.queryByText("Dur:")).toBeNull();
     expect(screen.queryByText("Duration:")).toBeNull();
     expect(screen.getByRole("button", { name: "Undo" })).toBeTruthy();
     expect(screen.getByRole("button", { name: "Redo" })).toBeTruthy();
@@ -145,6 +168,92 @@ describe("ToolcraftApp", () => {
     expect(container.querySelector('[data-panel-type="toolbar"]')).toBeTruthy();
   });
 
+  it("switches the timeline panel between compact and extended through the runtime setup toggle", () => {
+    const { container } = render(<ToolcraftApp schema={createSchema()} />);
+
+    expect(container.querySelector('[data-panel-type="timeline"]')).toBeTruthy();
+    expect(
+      container.querySelector('[data-toolcraft-timeline-panel-variant="compact"]'),
+    ).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Pause playback" })).toBeTruthy();
+    expect(screen.queryByText("Dur:")).toBeNull();
+
+    const timelineField = screen.getByText("Timeline").closest('[role="group"]');
+    const timelineSwitch = timelineField?.querySelector<HTMLElement>('[role="switch"]');
+
+    expect(timelineSwitch?.getAttribute("aria-checked")).toBe("false");
+
+    fireEvent.click(timelineSwitch as HTMLElement);
+
+    expect(container.querySelector('[data-panel-type="timeline"]')).toBeTruthy();
+    expect(
+      container.querySelector('[data-toolcraft-timeline-panel-variant="extended"]'),
+    ).toBeTruthy();
+    expect(container.querySelector('[data-toolcraft-timeline-panel-hidden="true"]')).toBeNull();
+    expect(screen.getByText("Dur:")).toBeTruthy();
+    expect(screen.getByText(/\d+(?:\.\d+)? \/ 8s/)).toBeTruthy();
+    expect(timelineSwitch?.getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("keeps timeline playback running while the panel is hidden", () => {
+    vi.useFakeTimers();
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 180, unit: "px", width: 320 },
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+        timeline: { mode: "playback" },
+      },
+      persistence: {
+        include: ["panels", "timeline"],
+        key: "toolcraft:timeline-hidden-test:state:v1",
+        storage: "localStorage",
+        version: 1,
+      },
+    });
+
+    window.localStorage.setItem(
+      "toolcraft:timeline-hidden-test:state:v1",
+      JSON.stringify({
+        state: {
+          panels: {
+            timeline: { hidden: true },
+          },
+          timeline: {
+            currentTimeSeconds: 0,
+            durationSeconds: 8,
+            expanded: false,
+            isLooping: true,
+            isPlaying: true,
+          },
+        },
+        version: 1,
+      }),
+    );
+
+    const { container } = render(
+      <ToolcraftApp canvasContent={<TimelineTimeProbe />} schema={schema} />,
+    );
+
+    expect(
+      container.querySelector('[data-toolcraft-timeline-panel-hidden="true"]'),
+    ).toBeTruthy();
+    expect(screen.getByTestId("timeline-time").textContent).toBe("0.000");
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(Number(screen.getByTestId("timeline-time").textContent)).toBeGreaterThan(0);
+
+    vi.useRealTimers();
+  });
+
   it("does not render disabled optional panels or toolbar features", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
@@ -272,7 +381,7 @@ describe("ToolcraftApp", () => {
                 footer: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export image",
                       value: "export",
                       variant: "default",