@hyperframes/studio 0.8.139 → 0.8.140

package/dist/player.js

@@ -1,6 +1,6 @@
 import {
   Player
-} from "./chunk-E422JDF5.js";
+} from "./chunk-H2DUOXTF.js";
 import "./chunk-LOVBLSMR.js";
 import "./chunk-TFLU2MGI.js";
 import "./chunk-PZ5AY32C.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.139",
+  "version": "0.8.140",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.139",
-    "@hyperframes/player": "0.8.139",
-    "@hyperframes/shader-transitions": "0.8.139",
-    "@hyperframes/studio-server": "0.8.139",
-    "@hyperframes/sdk": "0.8.139",
-    "@hyperframes/parsers": "0.8.139"
+    "@hyperframes/core": "0.8.140",
+    "@hyperframes/parsers": "0.8.140",
+    "@hyperframes/sdk": "0.8.140",
+    "@hyperframes/player": "0.8.140",
+    "@hyperframes/studio-server": "0.8.140",
+    "@hyperframes/shader-transitions": "0.8.140"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -82,7 +82,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.139"
+    "@hyperframes/producer": "0.8.140"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/TimelineToolbar.test.tsx

@@ -2,7 +2,7 @@
 
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore } from "../player/store/playerStore";
 import { makeSelection } from "../hooks/domSelectionTestHarness";
@@ -11,6 +11,7 @@ import { readStudioUiPreferences } from "../utils/studioUiPreferences";
 import { dispatchPlainKey, type HotkeyCallbacks } from "../hooks/appHotkeysDispatch";
 import { AudioMeterStrip } from "./nle/AudioMeterStrip";
 import { TimelineToolbar } from "./TimelineToolbar";
+import { registerTimelineZoomViewport } from "../player/components/timelineZoomInput";
 
 vi.mock("../contexts/StudioContext", () => ({
   useStudioShellContextOptional: () => ({
@@ -239,6 +240,81 @@ describe("TimelineToolbar snap key", () => {
 });
 
 describe("TimelineToolbar Fit", () => {
+  // A zoom lands on the next frame; these tests step frames instead of waiting for them.
+  beforeEach(() => {
+    vi.useFakeTimers({
+      toFake: [
+        "requestAnimationFrame",
+        "cancelAnimationFrame",
+        "setTimeout",
+        "clearTimeout",
+        "performance",
+      ],
+    });
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  /** A mounted timeline for the zoom to preview on: 1080px wide, 32px of headers. */
+  function mountTimelineViewport() {
+    const scroll = document.createElement("div");
+    Object.defineProperties(scroll, {
+      clientWidth: { value: 1080 },
+      // At Fit the content is as wide as the view.
+      scrollWidth: { value: 1080 },
+      scrollLeft: { value: 0, writable: true },
+    });
+    usePlayerStore.setState({
+      zoomMode: "fit",
+      manualZoomPercent: 100,
+      timelineFitPps: 10,
+      timelinePps: 10,
+    });
+    return registerTimelineZoomViewport({ scroll, contentOrigin: 32 });
+  }
+
+  it("moves the slider and its readout with a zoom while it is previewed", () => {
+    const unregister = mountTimelineViewport();
+    const { host, root } = renderToolbar();
+    const slider = host.querySelector<HTMLInputElement>('input[aria-label="Timeline zoom"]')!;
+    const before = slider.value;
+    act(() => {
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(
+        slider,
+        String(Number(before) + 5),
+      );
+      slider.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    act(() => vi.advanceTimersToNextFrame());
+    // Not laid out yet: the store still holds Fit, but the toolbar shows the zoom on screen.
+    expect(usePlayerStore.getState().zoomMode).toBe("fit");
+    expect(slider.value).not.toBe(before);
+    expect(host.querySelector('[aria-label="Timeline zoom level"]')?.textContent).not.toBe("Fit");
+    act(() => root.unmount());
+    act(() => unregister());
+  });
+
+  it("keeps Fit when it is picked while a zoom waits to be laid out", () => {
+    const unregister = mountTimelineViewport();
+    const { host, root } = renderToolbar();
+    act(() =>
+      host
+        .querySelector('button[aria-label="Zoom in"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true })),
+    );
+
+    act(() =>
+      host
+        .querySelector('button[aria-label="Fit timeline to width"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true })),
+    );
+    act(() => vi.advanceTimersByTime(1000));
+    expect(usePlayerStore.getState().zoomMode).toBe("fit");
+    act(() => root.unmount());
+    act(() => unregister());
+  });
+
   it("shows Fit as a named icon and says whether fit is on", () => {
     const { host, root } = renderToolbar();
     const fit = () => host.querySelector('button[aria-label="Fit timeline to width"]');
@@ -251,6 +327,7 @@ describe("TimelineToolbar Fit", () => {
         .querySelector('button[aria-label="Zoom in"]')
         ?.dispatchEvent(new MouseEvent("click", { bubbles: true })),
     );
+    act(() => vi.advanceTimersToNextFrame());
     expect(fit()?.getAttribute("aria-pressed")).toBe("false");
     act(() => root.unmount());
   });
@@ -263,6 +340,7 @@ describe("TimelineToolbar Fit", () => {
         .querySelector('button[aria-label="Zoom in"]')
         ?.dispatchEvent(new MouseEvent("click", { bubbles: true })),
     );
+    act(() => vi.advanceTimersToNextFrame());
     expect(usePlayerStore.getState().userZoomCount).toBe(before + 1);
     act(() => root.unmount());
   });

package/src/components/TimelineToolbar.tsx

@@ -14,12 +14,14 @@ import {
 import { computeElementPercentage, playsNear } from "../hooks/gsapShared";
 import { useKeyframeKeyboard } from "../hooks/useKeyframeKeyboard";
 import {
-  getNextTimelineZoomPercent,
-  getTimelineZoomPercent,
   timelineZoomPercentToSlider,
   timelineSliderToZoomPercent,
 } from "../player/components/timelineZoom";
 import { useTimelineZoom } from "../player/components/useTimelineZoom";
+import {
+  useShownTimelineZoomPercent,
+  zoomTimelineStep,
+} from "../player/components/timelineZoomInput";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { Tooltip } from "./ui";
 import { AudioMetersIcon } from "./icons/AudioMetersIcon";
@@ -170,17 +172,13 @@ export const TimelineToolbar = memo(function TimelineToolbar({
   // Subscribe so the add-beat button reacts to playhead movement and analysis load.
   const currentTime = usePlayerStore((s) => s.currentTime);
   const beatAnalysisReady = usePlayerStore((s) => s.beatAnalysis !== null);
-  // Subscribe (not getState) so the split button enables/disables the moment
-  // the selection changes, not only on the next playhead tick.
+  // Subscribed, so the split button follows the selection, not only playhead ticks.
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const elements = usePlayerStore((s) => s.elements);
   const timelineFitPps = usePlayerStore((s) => s.timelineFitPps);
-  const { zoomMode, manualZoomPercent, setZoomMode, setManualZoomPercent } = useTimelineZoom();
-  const displayedTimelineZoomPercent = getTimelineZoomPercent(
-    zoomMode,
-    manualZoomPercent,
-    timelineFitPps,
-  );
+  const { zoomMode, setZoomMode, setManualZoomPercent } = useTimelineZoom();
+  const displayedTimelineZoomPercent = useShownTimelineZoomPercent();
+  const showsFit = zoomMode === "fit" && displayedTimelineZoomPercent === 100;
   const {
     state: keyframeState,
     isMotionPath: keyframeIsMotionPath,
@@ -215,8 +213,6 @@ export const TimelineToolbar = memo(function TimelineToolbar({
   }, []);
 
   return (
-    // The "TIMELINE" label is dropped for CapCut-like density — the pane's
-    // position (tracks right below) makes it self-evident.
     <div className="border-b border-neutral-800/60">
       <div className="flex items-center justify-between px-2 py-0.5">
         <div className="flex items-center gap-0.5">
@@ -510,12 +506,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
             <button
               type="button"
               aria-label="Zoom out"
-              onClick={() => {
-                setZoomMode("manual");
-                setManualZoomPercent(
-                  getNextTimelineZoomPercent("out", zoomMode, manualZoomPercent, timelineFitPps),
-                );
-              }}
+              onClick={() => zoomTimelineStep("out")}
               className={flatIdle}
             >
               <MagnifyingGlassMinus size={16} aria-hidden="true" />
@@ -528,12 +519,11 @@ export const TimelineToolbar = memo(function TimelineToolbar({
             value={timelineZoomPercentToSlider(displayedTimelineZoomPercent, timelineFitPps)}
             title={`${displayedTimelineZoomPercent}%`}
             aria-label="Timeline zoom"
-            onChange={(e) => {
-              setZoomMode("manual");
+            onChange={(e) =>
               setManualZoomPercent(
                 timelineSliderToZoomPercent(Number(e.target.value), timelineFitPps),
-              );
-            }}
+              )
+            }
             // h-6 on the input is the 24x24 WCAG 2.2 (2.5.8) target: the visible
             // track stays 2px and the thumb 10px, only the pointer box grows.
             className="mx-1 h-6 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-text-0 [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
@@ -542,12 +532,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
             <button
               type="button"
               aria-label="Zoom in"
-              onClick={() => {
-                setZoomMode("manual");
-                setManualZoomPercent(
-                  getNextTimelineZoomPercent("in", zoomMode, manualZoomPercent, timelineFitPps),
-                );
-              }}
+              onClick={() => zoomTimelineStep("in")}
               className={flatIdle}
             >
               <MagnifyingGlassPlus size={16} aria-hidden="true" />
@@ -558,7 +543,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
             className="ml-1 w-[38px] text-right font-mono text-[11px] tabular-nums text-neutral-500 select-none"
             aria-label="Timeline zoom level"
           >
-            {zoomMode === "fit" ? "Fit" : `${displayedTimelineZoomPercent}%`}
+            {showsFit ? "Fit" : `${displayedTimelineZoomPercent}%`}
           </span>
         </div>
       </div>

package/src/components/editor/DomEditOverlay.tsx

@@ -61,7 +61,7 @@ export interface DomEditOverlayProps {
   hoverSelection: DomEditSelection | null;
   allowCanvasMovement?: boolean;
   allowBodyDrag?: boolean;
-  /** "host": no hover, marquee, box re-select, or body drag if allowBodyDrag is false; Enter still opens text. */
+  /** "host": no marquee, box re-select, or body drag if allowBodyDrag is false; Enter still opens text. */
   canvasInput?: "overlay" | "host";
   onTextEditingChange?: (editing: boolean) => void;
   /** A click on a single selection's box, in either mode; the event may be the pointerup. */
@@ -500,7 +500,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       onLostPointerCapture={gestures.onLostPointerCapture}
       onContextMenu={hostInput ? undefined : handleContextMenu}
     >
-      {!hostInput && hoverSelection && hoverRect && compRect.width > 0 && (
+      {hoverSelection && hoverRect && compRect.width > 0 && (
         <div
           aria-hidden="true"
           data-dom-edit-hover-box="true"

package/src/components/editor/PropertyPanel.tsx

@@ -565,6 +565,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
             styles={styles}
             assets={assets}
             onSetStyle={onSetStyle}
+            onSetHtmlAttribute={props.onSetHtmlAttribute}
             onImportAssets={onImportAssets}
             gsapBorderRadius={gsapBorderRadius}
           />

package/src/components/editor/PropertyPanelFlat.tsx

@@ -351,6 +351,7 @@ export function PropertyPanelFlat({
           styles={styles}
           assets={assets}
           onSetStyle={onSetStyle}
+          onSetHtmlAttribute={forwardedProps.onSetHtmlAttribute}
           onPreviewStyle={onPreviewStyle}
           onImportAssets={onImportAssets}
           gsapBorderRadius={gsapBorderRadius}

package/src/components/editor/manualEdits.ts

@@ -10,7 +10,7 @@ export {
 } from "./manualEditsTypes";
 
 export {
-  mergeFileChangeAffectedCompositions,
+  mergeFileChangePayloads,
   readFileChangeAffectedCompositions,
   readFileChangeAffectsPreview,
   readFileChangeField,

package/src/components/editor/manualEditsParsing.ts

@@ -44,9 +44,21 @@ export function readFileChangeAffectedCompositions(payload: unknown): readonly s
   return value.map(normalizeStudioFileChangePath);
 }
 
-export function mergeFileChangeAffectedCompositions(waiting: unknown, incoming: unknown): unknown {
+export function mergeFileChangePayloads(waiting: unknown, incoming: unknown): unknown {
   const before = readFileChangeAffectedCompositions(waiting);
   const after = readFileChangeAffectedCompositions(incoming);
   const merged = before && after ? [...new Set([...before, ...after])] : null;
-  return { ...asPayloadRecord(incoming), affectedCompositions: merged };
+  const next = asPayloadRecord(incoming);
+  const affectsPreview =
+    readFileChangeAffectsPreview(waiting) || readFileChangeAffectsPreview(incoming);
+  if (readStudioFileChangePath(waiting) === readStudioFileChangePath(incoming)) {
+    return { ...next, affectsPreview, affectedCompositions: merged };
+  }
+  // Changes to two files are owed: only a project-wide reload ("." path) covers both.
+  return {
+    path: ".",
+    projectId: next?.projectId,
+    affectsPreview,
+    affectedCompositions: merged,
+  };
 }

package/src/components/editor/previewReadOnly.overlay.test.tsx

@@ -311,7 +311,7 @@ describe("DomEditOverlay with canvasInput host", () => {
     expect(fixture(HOST).overlay.className).toContain("pointer-events-none");
   });
 
-  it("draws no hover box", () => {
+  it("draws the hover box for the selection the host hovers, and none without one", () => {
     layout.hover = RECT;
     const hovered = (props = {}) => {
       const { overlay } = fixture(props);
@@ -321,7 +321,8 @@ describe("DomEditOverlay with canvasInput host", () => {
     };
     const selection = makeSelection("Hover", textElement("hover"));
     expect(hovered({ hoverSelection: selection })).not.toBeNull();
-    expect(hovered({ ...HOST, hoverSelection: selection })).toBeNull();
+    expect(hovered({ ...HOST, hoverSelection: selection })).not.toBeNull();
+    expect(hovered({ ...HOST, hoverSelection: null })).toBeNull();
   });
 
   it("starts no marquee and makes no selection from a press on empty canvas", () => {

package/src/components/editor/propertyPanelFill.tsx

@@ -10,6 +10,7 @@ import {
 } from "./gradientValue";
 import { ReverseGradientIcon } from "../icons/ReverseGradientIcon";
 import { IMAGE_EXT } from "../../utils/mediaTypes";
+import type { DomEditSelection } from "./domEditing";
 import { FIELD, LABEL, RESPONSIVE_GRID } from "./propertyPanelHelpers";
 import {
   DetailField,
@@ -27,9 +28,13 @@ import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 function normalizeProjectPath(value: string): string {
   const trimmed = value.trim();
   const maybeUrl = /^[a-z]+:\/\//i.test(trimmed) ? new URL(trimmed).pathname : trimmed;
-  return decodeURIComponent(maybeUrl)
-    .replace(/\\/g, "/")
-    .replace(/^\.?\//, "");
+  let decodedPath = maybeUrl;
+  try {
+    decodedPath = decodeURIComponent(maybeUrl);
+  } catch (error) {
+    if (!(error instanceof URIError)) throw error;
+  }
+  return decodedPath.replace(/\\/g, "/").replace(/^\.?\//, "");
 }
 
 function toRelativeProjectAssetPath(sourceFile: string, assetPath: string): string {
@@ -75,7 +80,8 @@ function resolveSelectedAsset(
 
 export function ImageFillField({
   projectId,
-  sourceFile,
+  element,
+  onSetHtmlAttribute,
   value,
   assets,
   disabled,
@@ -83,7 +89,8 @@ export function ImageFillField({
   onImportAssets,
 }: {
   projectId: string;
-  sourceFile: string;
+  element: DomEditSelection;
+  onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
   value: string;
   assets: string[];
   disabled?: boolean;
@@ -91,15 +98,29 @@ export function ImageFillField({
   onImportAssets?: (files: FileList) => Promise<string[]>;
 }) {
   const track = useTrackDesignInput();
+  const sourceFile = element.sourceFile;
+  const isImage = element.tagName === "img";
+  const imageUrl = isImage ? (element.element.getAttribute("src") ?? "") : value;
+  const commitImage = (next: string, projectAsset = false) => {
+    if (isImage) {
+      if (next)
+        void onSetHtmlAttribute(
+          "src",
+          projectAsset ? toRelativeProjectAssetPath(sourceFile, next) : next,
+        );
+      return;
+    }
+    onCommit(next ? `url("${next}")` : "none");
+  };
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [uploading, setUploading] = useState(false);
   const [uploadError, setUploadError] = useState<string | null>(null);
   const imageAssets = useMemo(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
   const selectedAsset = useMemo(
-    () => resolveSelectedAsset(value, sourceFile, imageAssets),
-    [imageAssets, sourceFile, value],
+    () => resolveSelectedAsset(imageUrl, sourceFile, imageAssets),
+    [imageAssets, sourceFile, imageUrl],
   );
-  const externalUrlValue = selectedAsset ? "" : value;
+  const externalUrlValue = selectedAsset ? "" : imageUrl;
 
   const handleUpload = async (files: FileList | null) => {
     if (!files?.length || !onImportAssets) return;
@@ -110,7 +131,7 @@ export function ImageFillField({
       const nextImage = uploaded.find((a) => IMAGE_EXT.test(a));
       if (nextImage) {
         track("button", "Upload image");
-        onCommit(`url("${toProjectRootAssetPath(nextImage)}")`);
+        commitImage(toProjectRootAssetPath(nextImage), true);
       }
     } catch {
       setUploadError("Upload failed — check the file and try again.");
@@ -174,14 +195,16 @@ export function ImageFillField({
                   const next = e.target.value;
                   track("select", "Project asset");
                   if (!next) {
-                    onCommit("none");
+                    commitImage("");
                     return;
                   }
-                  onCommit(`url("${toProjectRootAssetPath(next)}")`);
+                  commitImage(toProjectRootAssetPath(next), true);
                 }}
                 className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600"
               >
-                <option value="">None</option>
+                <option value="" disabled={isImage}>
+                  None
+                </option>
                 {imageAssets.map((asset) => (
                   <option key={asset} value={asset}>
                     {asset}
@@ -201,7 +224,7 @@ export function ImageFillField({
         label="External URL"
         value={externalUrlValue}
         disabled={disabled}
-        onCommit={(next) => onCommit(next.trim() ? `url("${next.trim()}")` : "none")}
+        onCommit={(next) => commitImage(next.trim())}
       />
     </div>
   );

package/src/components/editor/propertyPanelFlatStyleSections.test.tsx

@@ -63,6 +63,7 @@ function renderSection(
         styles={mergedStyles}
         assets={[]}
         onSetStyle={onSetStyle}
+        onSetHtmlAttribute={vi.fn()}
         gsapBorderRadius={gsapBorderRadius}
       />,
     );
@@ -375,6 +376,7 @@ describe("FlatStyleSection — blur sliders", () => {
           styles={{ filter: "blur(4px)" }}
           assets={[]}
           onSetStyle={onSetStyle}
+          onSetHtmlAttribute={vi.fn()}
           gsapBorderRadius={null}
         />,
       );
@@ -483,6 +485,7 @@ describe("FlatStyleSection — Overflow and Mask", () => {
           styles={{}}
           assets={[]}
           onSetStyle={onSetStyle}
+          onSetHtmlAttribute={vi.fn()}
           gsapBorderRadius={null}
         />,
       );
@@ -593,6 +596,7 @@ describe("FlatStyleSection — Opacity", () => {
           styles={{}}
           assets={[]}
           onSetStyle={onSetStyle}
+          onSetHtmlAttribute={vi.fn()}
           gsapBorderRadius={null}
         />,
       );

package/src/components/editor/propertyPanelFlatStyleSections.tsx

@@ -43,6 +43,7 @@ function FlatFillFields({
   styles,
   assets,
   onSetStyle,
+  onSetHtmlAttribute,
   onPreviewStyle,
   onImportAssets,
 }: {
@@ -51,18 +52,19 @@ function FlatFillFields({
   styles: Record<string, string>;
   assets: string[];
   onSetStyle: (prop: string, value: string) => void | Promise<unknown>;
+  onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
   onPreviewStyle?: (prop: string, value: string) => void;
   onImportAssets?: (files: FileList) => Promise<string[]>;
 }) {
   const styleEditingDisabled = !element.capabilities.canEditStyles;
   const backgroundImage = styles["background-image"] ?? "none";
   const hasTextControls = isTextEditableSelection(element);
-  const fillMode =
-    backgroundImage && backgroundImage !== "none"
-      ? backgroundImage.includes("gradient")
-        ? "Gradient"
-        : "Image"
-      : "Solid";
+  let fillMode = "Solid";
+  if (element.tagName === "img") {
+    fillMode = "Image";
+  } else if (backgroundImage && backgroundImage !== "none") {
+    fillMode = backgroundImage.includes("gradient") ? "Gradient" : "Image";
+  }
   const [preferredFillMode, setPreferredFillMode] = useState(fillMode);
   const imageUrl = extractBackgroundImageUrl(backgroundImage);
 
@@ -124,7 +126,8 @@ function FlatFillFields({
       ) : (
         <ImageFillField
           projectId={projectId}
-          sourceFile={element.sourceFile}
+          element={element}
+          onSetHtmlAttribute={onSetHtmlAttribute}
           value={imageUrl}
           assets={assets}
           disabled={styleEditingDisabled}
@@ -456,6 +459,7 @@ export function FlatStyleSection({
   styles,
   assets,
   onSetStyle,
+  onSetHtmlAttribute,
   onPreviewStyle,
   onImportAssets,
   gsapBorderRadius,
@@ -465,6 +469,7 @@ export function FlatStyleSection({
   styles: Record<string, string>;
   assets: string[];
   onSetStyle: (prop: string, value: string) => void | Promise<unknown>;
+  onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
   onPreviewStyle?: (prop: string, value: string) => void;
   onImportAssets?: (files: FileList) => Promise<string[]>;
   gsapBorderRadius?: { tl: number; tr: number; br: number; bl: number } | null;
@@ -478,6 +483,7 @@ export function FlatStyleSection({
         styles={styles}
         assets={assets}
         onSetStyle={onSetStyle}
+        onSetHtmlAttribute={onSetHtmlAttribute}
         onPreviewStyle={onPreviewStyle}
         onImportAssets={onImportAssets}
       />