@hyperframes/studio 0.6.25 → 0.6.27

package/src/icons/SystemIcons.tsx

@@ -1,54 +1,18 @@
 import {
-  WarningCircle,
-  Warning,
-  ArrowLeft as PhArrowLeft,
   Check as PhCheck,
-  CheckCircle as PhCheckCircle,
-  Circle as PhCircle,
   Clock as PhClock,
-  Code as PhCode,
-  DownloadSimple,
-  Pencil as PhPencil,
-  ArrowSquareOut,
   Eye as PhEye,
-  EyeClosed,
-  File as PhFile,
-  FileCode as PhFileCode,
-  FileText as PhFileText,
   FilmStrip,
-  Heart as PhHeart,
-  Image as PhImage,
-  Info as PhInfo,
   Stack,
-  SpinnerGap,
-  ArrowsOut,
-  CornersOut,
-  ChatCircle,
   ChatCenteredText,
-  Cursor,
   ArrowsOutCardinal,
   MusicNote,
   Palette as PhPalette,
-  Paperclip as PhPaperclip,
-  Pause as PhPause,
-  Play as PhPlay,
   Plus as PhPlus,
-  MagnifyingGlass,
-  PaperPlaneRight,
-  SkipBack as PhSkipBack,
-  SkipForward as PhSkipForward,
   Square as PhSquare,
-  Trash,
   TextT,
-  UploadSimple,
-  User as PhUser,
-  UsersThree,
-  VideoCamera,
   X as PhX,
   Lightning,
-  MagnifyingGlassPlus,
-  MagnifyingGlassMinus,
-  Terminal as PhTerminal,
   CaretDown,
   CaretRight,
   ClipboardText,
@@ -69,60 +33,21 @@ const makeIcon = (Icon: PhosphorIcon) => {
 };
 
 // Lucide name → Phosphor equivalent
-export const AlertCircle = makeIcon(WarningCircle);
-export const AlertTriangle = makeIcon(Warning);
-export const ArrowLeft = makeIcon(PhArrowLeft);
 export const Check = makeIcon(PhCheck);
-export const CheckCircle = makeIcon(PhCheckCircle);
-/** CheckCircle2 in lucide is visually identical to CheckCircle */
-export const CheckCircle2 = makeIcon(PhCheckCircle);
-export const Circle = makeIcon(PhCircle);
 export const Clock = makeIcon(PhClock);
-export const Code = makeIcon(PhCode);
-export const Download = makeIcon(DownloadSimple);
-export const Edit2 = makeIcon(PhPencil);
-export const ExternalLink = makeIcon(ArrowSquareOut);
 export const Eye = makeIcon(PhEye);
-export const EyeOff = makeIcon(EyeClosed);
-export const File = makeIcon(PhFile);
-export const FileCode = makeIcon(PhFileCode);
-export const FileText = makeIcon(PhFileText);
 export const Film = makeIcon(FilmStrip);
-export const Heart = makeIcon(PhHeart);
-export const Image = makeIcon(PhImage);
-export const Info = makeIcon(PhInfo);
 export const Layers = makeIcon(Stack);
-export const Loader2 = makeIcon(SpinnerGap);
-export const Maximize = makeIcon(ArrowsOut);
-export const Maximize2 = makeIcon(CornersOut);
-export const MessageCircle = makeIcon(ChatCircle);
 export const MessageSquare = makeIcon(ChatCenteredText);
-export const MousePointer = makeIcon(Cursor);
 export const Move = makeIcon(ArrowsOutCardinal);
 export const Music = makeIcon(MusicNote);
 export const Palette = makeIcon(PhPalette);
-export const Paperclip = makeIcon(PhPaperclip);
-export const Pause = makeIcon(PhPause);
-export const Pencil = makeIcon(PhPencil);
-export const Play = makeIcon(PhPlay);
 export const Plus = makeIcon(PhPlus);
-export const Search = makeIcon(MagnifyingGlass);
-export const Send = makeIcon(PaperPlaneRight);
-export const SkipBack = makeIcon(PhSkipBack);
-export const SkipForward = makeIcon(PhSkipForward);
 export const Square = makeIcon(PhSquare);
-export const Trash2 = makeIcon(Trash);
 export const Type = makeIcon(TextT);
-export const Upload = makeIcon(UploadSimple);
-export const User = makeIcon(PhUser);
-export const Users = makeIcon(UsersThree);
-export const Video = makeIcon(VideoCamera);
 export const X = makeIcon(PhX);
 export const Zap = makeIcon(Lightning);
-export const ZoomIn = makeIcon(MagnifyingGlassPlus);
-export const ZoomOut = makeIcon(MagnifyingGlassMinus);
 // Extra icons used in this project (not in lucide's default mapping above)
-export const Terminal = makeIcon(PhTerminal);
 export const ChevronDown = makeIcon(CaretDown);
 export const ChevronRight = makeIcon(CaretRight);
 export const ClipboardList = makeIcon(ClipboardText);

package/src/player/components/timelineEditing.test.ts

@@ -4,7 +4,6 @@ import {
   buildPromptCopyText,
   buildTimelineElementAgentPrompt,
   buildTimelineAgentPrompt,
-  buildTrackZIndexMap,
   canOffsetTrimClipStart,
   getTimelineEditCapabilities,
   hasPatchableTimelineTarget,
@@ -159,29 +158,6 @@ describe("resolveTimelineMove", () => {
   });
 });
 
-describe("buildTrackZIndexMap", () => {
-  it("maps visually higher tracks onto higher z-index values", () => {
-    expect(buildTrackZIndexMap([-2, -1, 0, 3])).toEqual(
-      new Map([
-        [-2, 4],
-        [-1, 3],
-        [0, 2],
-        [3, 1],
-      ]),
-    );
-  });
-
-  it("deduplicates tracks before assigning z-index values", () => {
-    expect(buildTrackZIndexMap([-1, 0, -1, 3, 3])).toEqual(
-      new Map([
-        [-1, 3],
-        [0, 2],
-        [3, 1],
-      ]),
-    );
-  });
-});
-
 describe("canOffsetTrimClipStart", () => {
   it("allows front trim for clips that carry playback offset metadata", () => {
     expect(

package/src/player/components/timelineEditing.ts

@@ -114,12 +114,6 @@ export function resolveTimelineMove(
   };
 }
 
-export function buildTrackZIndexMap(tracks: number[]): Map<number, number> {
-  const uniqueTracks = Array.from(new Set(tracks)).sort((a, b) => a - b);
-  const maxZIndex = uniqueTracks.length;
-  return new Map(uniqueTracks.map((track, index) => [track, maxZIndex - index]));
-}
-
 export function resolveTimelineResize(
   input: TimelineResizeInput,
   edge: "start" | "end",

package/src/player/components/useTimelineRangeSelection.ts

@@ -144,19 +144,3 @@ export function useTimelineRangeSelection({
     handlePointerUp,
   };
 }
-
-/* ── Seek + scroll utilities (used in Timeline only) ──────────────── */
-export function seekTimeFromScrollX(
-  scrollEl: HTMLDivElement,
-  clientX: number,
-  effectiveDuration: number,
-  pps: number,
-  onSeek?: (time: number) => void,
-): void {
-  const rect = scrollEl.getBoundingClientRect();
-  const x = clientX - rect.left + scrollEl.scrollLeft - GUTTER;
-  if (x < 0) return;
-  const time = Math.max(0, Math.min(effectiveDuration, x / pps));
-  liveTime.notify(time);
-  onSeek?.(time);
-}

package/src/player/hooks/useTimelineSyncCallbacks.ts

@@ -18,7 +18,6 @@ import {
   findTimelineDomNodeForClip,
   createImplicitTimelineLayersFromDOM,
   buildStandaloneRootTimelineElement,
-  mergeTimelineElementsPreservingDowngrades,
   getTimelineElementSelector,
 } from "../lib/timelineDOM";
 import {
@@ -26,7 +25,6 @@ import {
   autoHealMissingCompositionIds,
   buildMissingCompositionElements,
 } from "../lib/timelineIframeHelpers";
-import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 
 interface UseTimelineSyncCallbacksParams {
   iframeRef: React.RefObject<HTMLIFrameElement | null>;
@@ -288,7 +286,3 @@ export function useTimelineSyncCallbacks({
     onIframeLoad,
   };
 }
-
-// Re-export the merge helper so the hook can use it via this module (avoids
-// adding another import line to the already-large useTimelinePlayer.ts).
-export { mergeTimelineElementsPreservingDowngrades, getTimelineElementIdentity };

package/src/utils/blockInstaller.ts

@@ -5,10 +5,7 @@ import {
   resolveTimelineAssetInitialGeometry,
 } from "./timelineAssetDrop";
 import { collectHtmlIds } from "./studioHelpers";
-import {
-  buildTrackZIndexMap,
-  formatTimelineAttributeNumber,
-} from "../player/components/timelineEditing";
+import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
 import { saveProjectFilesWithHistory } from "./studioFileHistory";
 import type { EditHistoryKind } from "./editHistory";
 
@@ -127,8 +124,7 @@ export async function addBlockToProject(
             ? Math.max(...relevantElements.map((te) => te.track)) + 1
             : 1);
 
-      const trackZIndices = buildTrackZIndexMap([...relevantElements.map((te) => te.track), track]);
-      const zIndex = trackZIndices.get(track) ?? 1;
+      const zIndex = Math.max(1, relevantElements.length + 1);
 
       const width = isBlock
         ? (block as { dimensions: { width: number } }).dimensions.width

package/src/utils/sourcePatcher.test.ts

@@ -35,6 +35,28 @@ describe("applyPatchByTarget", () => {
     );
   });
 
+  it("adds inline style to a self-closing void element without malforming it", () => {
+    const html = `<img id="gif-img" class="clip" data-start="1" src="earth.gif" alt="earth" />`;
+    const op: PatchOperation = { type: "inline-style", property: "z-index", value: "3" };
+
+    const result = applyPatch(html, "gif-img", op);
+    expect(result).toBe(
+      `<img id="gif-img" class="clip" data-start="1" src="earth.gif" alt="earth" style="z-index: 3" />`,
+    );
+    expect(result).not.toContain("/ style");
+  });
+
+  it("adds inline style to a self-closing void element matched by selector", () => {
+    const html = `<img class="clip hero" data-start="0" src="bg.png" alt="" />`;
+    const op: PatchOperation = { type: "inline-style", property: "opacity", value: "0.5" };
+
+    const result = applyPatchByTarget(html, { selector: ".hero" }, op);
+    expect(result).toBe(
+      `<img class="clip hero" data-start="0" src="bg.png" alt="" style="opacity: 0.5" />`,
+    );
+    expect(result).not.toContain("/ style");
+  });
+
   it("patches inline move styles by target", () => {
     const html = `<div id="card" style="position: absolute; left: 108px; top: 112px"></div>`;
 

package/src/utils/sourcePatcher.ts

@@ -203,9 +203,9 @@ function patchInlineStyleInTag(
   } else {
     // No existing style attribute
     if (value === null) return html; // nothing to remove
-    // Add one
-    const newTag =
-      tag.replace(/>$/, "") + ` style="${prop}: ${escapeStyleAttributeValue(value, '"')}"`;
+    const selfClosing = /\s*\/$/.test(tag);
+    const base = selfClosing ? tag.replace(/\s*\/$/, "") : tag;
+    const newTag = `${base} style="${prop}: ${escapeStyleAttributeValue(value, '"')}"${selfClosing ? " /" : ""}`;
     return html.replace(tag, newTag);
   }
 }

package/src/utils/studioHelpers.ts

@@ -23,13 +23,7 @@ export function getTimelineElementLabel(element: TimelineElement): string {
   return element.label || element.id || element.tag;
 }
 
-export function confirmElementDelete(label: string, kind: "timeline clip" | "element"): boolean {
-  return window.confirm(
-    `Delete ${kind} "${label}"?\n\nThis removes it from the project source. You can use Undo to restore it.`,
-  );
-}
-
-export function normalizeProjectAssetPath(value: string): string {
+function normalizeProjectAssetPath(value: string): string {
   const trimmed = value.trim();
   const maybeUrl = /^[a-z]+:\/\//i.test(trimmed) ? new URL(trimmed).pathname : trimmed;
   return decodeURIComponent(maybeUrl)
@@ -51,7 +45,7 @@ export function toRelativeProjectAssetPath(sourceFile: string, assetPath: string
   return [...fromParts.map(() => ".."), ...targetParts].join("/") || assetPath;
 }
 
-export function isAbsoluteFilePath(value: string): boolean {
+function isAbsoluteFilePath(value: string): boolean {
   return /^(?:\/|[A-Za-z]:[\\/]|\\\\)/.test(value);
 }
 
@@ -181,7 +175,7 @@ export function collectHtmlIds(source: string): string[] {
   return Array.from(source.matchAll(/\bid="([^"]+)"/g), (match) => match[1] ?? "");
 }
 
-export const DEFAULT_TIMELINE_ASSET_DURATION: Record<TimelineAssetKind, number> = {
+const DEFAULT_TIMELINE_ASSET_DURATION: Record<TimelineAssetKind, number> = {
   image: 3,
   video: 5,
   audio: 5,

package/src/utils/studioPreviewHelpers.ts

@@ -1,24 +1,18 @@
-import type { DomEditViewport, DomEditSelection } from "../components/editor/domEditing";
+import type { DomEditViewport } from "../components/editor/domEditing";
 import { resolveVisualDomEditSelectionTarget } from "../components/editor/domEditing";
 import {
   getDomLayerPatchTarget,
   isElementComputedVisible,
 } from "../components/editor/domEditingElement";
-import { usePlayerStore, liveTime } from "../player";
 import { getEventTargetElement } from "./studioHelpers";
 
-export interface PreviewLocalPointer {
+interface PreviewLocalPointer {
   x: number;
   y: number;
   viewport: DomEditViewport;
 }
 
-export interface PreviewPlayerCompat {
-  getTime: () => number;
-  renderSeek: (timeSeconds: number) => void;
-}
-
-export function resolvePreviewLocalPointer(
+function resolvePreviewLocalPointer(
   iframe: HTMLIFrameElement,
   doc: Document,
   win: Window,
@@ -42,24 +36,6 @@ export function resolvePreviewLocalPointer(
   };
 }
 
-export function getPreviewLocalPointer(
-  iframe: HTMLIFrameElement,
-  clientX: number,
-  clientY: number,
-): PreviewLocalPointer | null {
-  let doc: Document | null = null;
-  let win: Window | null = null;
-  try {
-    doc = iframe.contentDocument;
-    win = iframe.contentWindow;
-  } catch {
-    return null;
-  }
-  if (!doc || !win) return null;
-
-  return resolvePreviewLocalPointer(iframe, doc, win, clientX, clientY);
-}
-
 const POINTER_EVENTS_OVERRIDE_ID = "__hf_studio_pointer_events_override__";
 
 function forcePointerEventsAuto(doc: Document): HTMLStyleElement | null {
@@ -122,21 +98,6 @@ export function getPreviewTargetFromPointer(
   }
 }
 
-export function buildRasterClickSelectionContext(
-  selection: DomEditSelection,
-  localPointer: PreviewLocalPointer,
-): string {
-  return [
-    "The user clicked a large raster/background element in the Studio preview.",
-    `Preview click: x=${Math.round(localPointer.x)}px, y=${Math.round(localPointer.y)}px in a ${Math.round(
-      localPointer.viewport.width,
-    )}x${Math.round(localPointer.viewport.height)} composition.`,
-    `Selected target: <${selection.tagName}> ${selection.selector ?? selection.id ?? selection.label}.`,
-    "Visible copy or artwork at that point may be baked into the selected image/background rather than a selectable DOM text layer.",
-    "If the request mentions text seen at the click location, inspect or replace the image asset, or recreate that visible copy as editable DOM.",
-  ].join("\n");
-}
-
 function objectLike(value: unknown): object | null {
   return value && (typeof value === "object" || typeof value === "function") ? value : null;
 }
@@ -162,33 +123,6 @@ function readPlaybackTime(target: object | null, key: string): number | null {
   }
 }
 
-export function getPreviewPlayer(win: Window | null | undefined): PreviewPlayerCompat | null {
-  const player = objectLike(win ? Reflect.get(win, "__player") : null);
-  if (!player) return null;
-  const getTime = Reflect.get(player, "getTime");
-  const renderSeek = Reflect.get(player, "renderSeek");
-  if (typeof getTime !== "function" || typeof renderSeek !== "function") return null;
-  return {
-    getTime: () => {
-      const value = getTime.call(player);
-      return typeof value === "number" && Number.isFinite(value) ? value : 0;
-    },
-    renderSeek: (timeSeconds: number) => {
-      renderSeek.call(player, timeSeconds);
-    },
-  };
-}
-
-export function seekStudioPreview(iframe: HTMLIFrameElement | null, timeSeconds: number): boolean {
-  const player = getPreviewPlayer(iframe?.contentWindow);
-  if (!player) return false;
-  const nextTime = Math.max(0, timeSeconds);
-  player.renderSeek(nextTime);
-  usePlayerStore.getState().setCurrentTime(nextTime);
-  liveTime.notify(nextTime);
-  return true;
-}
-
 export function pauseStudioPreviewPlayback(iframe: HTMLIFrameElement | null): number | null {
   const win = iframe?.contentWindow;
   if (!win) return null;

package/src/utils/timelineDiscovery.ts

@@ -1,6 +1,4 @@
 export const TIMELINE_TOGGLE_SHORTCUT_LABEL = "Shift+T";
-const TIMELINE_EDITOR_HINT_STORAGE_KEY = "hf-studio-timeline-editor-hint-dismissed";
-
 type TimelineToggleHotkeyEvent = Pick<
   KeyboardEvent,
   "key" | "shiftKey" | "metaKey" | "ctrlKey" | "altKey" | "target"
@@ -41,17 +39,3 @@ export function shouldHandleTimelineToggleHotkey(event: TimelineToggleHotkeyEven
 export function getTimelineToggleTitle(timelineVisible: boolean): string {
   return `${timelineVisible ? "Hide" : "Show"} timeline editor (${TIMELINE_TOGGLE_SHORTCUT_LABEL})`;
 }
-
-export function getTimelineEditorHintDismissed(): boolean {
-  if (typeof window === "undefined") return false;
-  return window.localStorage.getItem(TIMELINE_EDITOR_HINT_STORAGE_KEY) === "1";
-}
-
-export function setTimelineEditorHintDismissed(dismissed: boolean): void {
-  if (typeof window === "undefined") return;
-  if (dismissed) {
-    window.localStorage.setItem(TIMELINE_EDITOR_HINT_STORAGE_KEY, "1");
-    return;
-  }
-  window.localStorage.removeItem(TIMELINE_EDITOR_HINT_STORAGE_KEY);
-}

package/src/utils/timelineZIndexInjection.test.ts

@@ -0,0 +1,155 @@
+import { describe, expect, it } from "vitest";
+import { applyPatchByTarget, applyPatch } from "./sourcePatcher";
+
+/**
+ * Reproduction tests for https://github.com/heygen-com/hyperframes/issues/958
+ *
+ * The bug: dragging a clip in the Studio timeline rewrites index.html with
+ * inline style="z-index: N" on EVERY clip, overriding the author's CSS z-index.
+ * Additionally, void elements (img, audio) get malformed self-closing tags.
+ */
+
+const ISSUE_HTML = `<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #000; }
+  #bg-video  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
+  #title     { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
+               font: 700 120px sans-serif; color: #fff; z-index: 20; }
+</style>
+
+<div id="root" data-composition-id="main" data-start="0" data-duration="10"
+     data-width="1920" data-height="1080">
+  <video id="bg-video" data-start="0" data-track-index="0" src="some-bg.mp4" muted playsinline></video>
+  <div   id="title" class="clip" data-start="0" data-duration="10" data-track-index="1">TITLE</div>
+</div>`;
+
+const VOID_ELEMENT_HTML = `<div id="root" data-composition-id="main" data-start="0" data-duration="14"
+     data-width="1920" data-height="1080">
+  <video id="bg-video" data-start="0" data-track-index="0" src="some-bg.mp4" muted playsinline></video>
+  <img id="gif-img" class="clip" data-start="1" data-duration="13" data-track-index="2" src="assets/earth.gif" alt="rotating earth gif" />
+  <div id="title" class="clip" data-start="0" data-duration="10" data-track-index="1">TITLE</div>
+</div>`;
+
+describe("issue #958 — timeline drag must not inject inline z-index", () => {
+  it("reproduces the old bug: z-index injection on all clips overrides CSS layering", () => {
+    // Simulate the OLD behavior: buildTrackZIndexMap + loop over all clips
+    function buildTrackZIndexMap(tracks: number[]): Map<number, number> {
+      const uniqueTracks = Array.from(new Set(tracks)).sort((a, b) => a - b);
+      const maxZIndex = uniqueTracks.length;
+      return new Map(uniqueTracks.map((track, index) => [track, maxZIndex - index]));
+    }
+
+    const elements = [
+      { id: "bg-video", track: 0 },
+      { id: "title", track: 1 },
+    ];
+    const trackZIndices = buildTrackZIndexMap(elements.map((e) => e.track));
+
+    // Apply the old z-index injection loop
+    let broken = ISSUE_HTML;
+    for (const el of elements) {
+      const nextZIndex = trackZIndices.get(el.track);
+      if (nextZIndex == null) continue;
+      broken = applyPatch(broken, el.id, {
+        type: "inline-style",
+        property: "z-index",
+        value: String(nextZIndex),
+      });
+    }
+
+    // Verify the bug: bg-video gets z-index: 2, title gets z-index: 1
+    // This INVERTS the intended layering (CSS had bg-video: 0, title: 20)
+    expect(broken).toContain('id="bg-video"');
+    expect(broken).toContain('style="z-index: 2"');
+    expect(broken).toContain('id="title"');
+    expect(broken).toContain('style="z-index: 1"');
+
+    // The title (z-index: 1) is now BEHIND the video (z-index: 2)
+    // — the opposite of the author's intent (CSS z-index: 20 vs 0)
+  });
+
+  it("verifies the fix: moving a clip only patches data-start and data-track-index", () => {
+    // Simulate the NEW behavior: only patch the moved clip's timing attributes
+    const movedElement = { id: "bg-video" };
+    const updates = { start: "2.5", track: "0" };
+
+    let fixed = applyPatchByTarget(
+      ISSUE_HTML,
+      { id: movedElement.id },
+      { type: "attribute", property: "start", value: updates.start },
+    );
+    fixed = applyPatchByTarget(
+      fixed,
+      { id: movedElement.id },
+      { type: "attribute", property: "track-index", value: updates.track },
+    );
+
+    // The moved clip's timing changed
+    expect(fixed).toContain('id="bg-video" data-start="2.5" data-track-index="0"');
+
+    // No inline z-index was injected on ANY element
+    expect(fixed).not.toContain('style="z-index');
+
+    // The title clip is completely untouched
+    expect(fixed).toContain(
+      '<div   id="title" class="clip" data-start="0" data-duration="10" data-track-index="1">TITLE</div>',
+    );
+
+    // CSS z-index declarations in <style> are preserved
+    expect(fixed).toContain("z-index: 0;");
+    expect(fixed).toContain("z-index: 20;");
+  });
+
+  it("verifies the fix: deleting a clip does not inject z-index on remaining clips", () => {
+    // After the element removal API call returns the content without bg-video,
+    // the old code would loop over remaining clips and inject z-index.
+    // The new code just uses the removal result as-is.
+    const afterRemoval = ISSUE_HTML.replace(/<video id="bg-video"[^>]*><\/video>\n  /, "");
+
+    // No z-index injection step — the result is used directly
+    expect(afterRemoval).not.toContain('style="z-index');
+    expect(afterRemoval).toContain(
+      '<div   id="title" class="clip" data-start="0" data-duration="10" data-track-index="1">TITLE</div>',
+    );
+  });
+});
+
+describe("issue #958 — void element inline style injection", () => {
+  it("reproduces the old bug: self-closing tags get malformed when style is injected", () => {
+    // The old code did: tag.replace(/>$/, "") + ` style="z-index: 7"`
+    // But `tag` from the regex capture never includes `>`, and for self-closing
+    // elements it ends with `/`. The replace was a no-op, producing:
+    //   <img ... / style="z-index: 7">
+    const img = `<img id="gif-img" class="clip" data-start="1" src="earth.gif" alt="earth" />`;
+    const result = applyPatch(img, "gif-img", {
+      type: "inline-style",
+      property: "z-index",
+      value: "7",
+    });
+
+    // With the fix, the style is inserted before the self-closing slash
+    expect(result).not.toContain("/ style");
+    expect(result).toContain('style="z-index: 7" />');
+  });
+
+  it("verifies inline style on void elements in a full composition", () => {
+    // Even though we no longer inject z-index during move/delete,
+    // the patchInlineStyleInTag fix is still important for other inline style
+    // patches (e.g., position, opacity) that the Studio applies to void elements.
+    const result = applyPatch(VOID_ELEMENT_HTML, "gif-img", {
+      type: "inline-style",
+      property: "opacity",
+      value: "0.8",
+    });
+
+    expect(result).toContain('style="opacity: 0.8" />');
+    expect(result).not.toContain("/ style");
+    // Other elements untouched
+    expect(result).toContain(
+      '<video id="bg-video" data-start="0" data-track-index="0" src="some-bg.mp4" muted playsinline></video>',
+    );
+    expect(result).toContain(
+      '<div id="title" class="clip" data-start="0" data-duration="10" data-track-index="1">TITLE</div>',
+    );
+  });
+});