@hyperframes/studio 0.8.50 → 0.8.52

package/src/components/editor/EaseParamFields.tsx

@@ -93,7 +93,7 @@ export function EaseBezierField({
             }
           }}
           onBlur={(event) => commit(event.currentTarget.value)}
-          className={`w-full rounded border bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none ${
+          className={`w-full rounded border bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden ${
             error
               ? "border-red-500/70 focus:border-red-400"
               : "border-white/10 focus:border-panel-accent/50"
@@ -183,7 +183,7 @@ export function SpringBounceField({
           const bounce = parseSpringBounce(`spring(${value})`);
           if (bounce !== null) onCommit(`spring(${round2(bounce)})`);
         }}
-        className="w-16 rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+        className="w-16 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
       />
     </div>
   );
@@ -207,7 +207,7 @@ export function WiggleField({
           min={1}
           step={1}
           onCommit={(value) => commitWiggle(onCommit, value, config.type, amplitude)}
-          className="w-14 rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+          className="w-14 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         />
       </div>
       <div className="flex items-center gap-1">
@@ -220,7 +220,7 @@ export function WiggleField({
               commitWiggle(onCommit, config.wiggles, event.currentTarget.value, amplitude);
             }
           }}
-          className="rounded border border-white/10 bg-black/20 px-1.5 py-1 text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+          className="rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         >
           {WIGGLE_TYPES.map((type) => (
             <option key={type} value={type}>
@@ -238,7 +238,7 @@ export function WiggleField({
           max={1}
           step={0.01}
           onCommit={(value) => commitWiggle(onCommit, config.wiggles, config.type, value)}
-          className="w-16 rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+          className="w-16 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         />
       </div>
     </div>

package/src/components/editor/FileTree.tsx

@@ -235,14 +235,14 @@ export const FileTree = memo(function FileTree({
     <div className="flex flex-col h-full min-h-0">
       {/* FILES header with action buttons */}
       {hasFileOps && (
-        <div className="flex items-center justify-between px-2.5 py-1.5 border-b border-neutral-800/50 flex-shrink-0">
+        <div className="flex items-center justify-between px-2.5 py-1.5 border-b border-neutral-800/50 shrink-0">
           <span className="text-[10px] font-semibold tracking-wider text-neutral-600 uppercase">
             Files
           </span>
           <div className="flex items-center gap-0.5">
             <button
               onClick={() => handleNewFile("")}
-              className="p-1.5 rounded hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 active:scale-[0.97] transition-colors"
+              className="p-1.5 rounded-sm hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 active:scale-[0.97] transition-colors"
               title="New File"
               aria-label="New File"
             >
@@ -250,7 +250,7 @@ export const FileTree = memo(function FileTree({
             </button>
             <button
               onClick={() => handleNewFolder("")}
-              className="p-1.5 rounded hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 active:scale-[0.97] transition-colors"
+              className="p-1.5 rounded-sm hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 active:scale-[0.97] transition-colors"
               title="New Folder"
               aria-label="New Folder"
             >
@@ -263,7 +263,7 @@ export const FileTree = memo(function FileTree({
       <div
         className={`flex-1 overflow-y-auto py-1 transition-colors ${
           dragOverFolder === ""
-            ? "bg-[#3CE6AC]/5 outline outline-1 outline-[#3CE6AC]/30 -outline-offset-1"
+            ? "bg-[#3CE6AC]/5 outline-solid outline-1 outline-[#3CE6AC]/30 -outline-offset-1"
             : ""
         }`}
         onContextMenu={handleRootContextMenu}

package/src/components/editor/FileTreeIcons.tsx

@@ -23,7 +23,7 @@ const W = "duotone" as const;
 
 export function FileIcon({ path }: { path: string }) {
   const ext = path.split(".").pop()?.toLowerCase() ?? "";
-  const c = "flex-shrink-0";
+  const c = "shrink-0";
   if (ext === "html") return <FileHtml size={SZ} weight={W} color="#E44D26" className={c} />;
   if (ext === "css") return <FileCss size={SZ} weight={W} color="#264DE4" className={c} />;
   if (ext === "js" || ext === "mjs" || ext === "cjs")

package/src/components/editor/FileTreeNodes.tsx

@@ -107,7 +107,7 @@ export function ContextMenu({
         <>
           <button
             role="menuitem"
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-hidden cursor-pointer text-left"
             onClick={() => {
               onNewFile(state.targetPath);
               onClose();
@@ -118,7 +118,7 @@ export function ContextMenu({
           </button>
           <button
             role="menuitem"
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-hidden cursor-pointer text-left"
             onClick={() => {
               onNewFolder(state.targetPath);
               onClose();
@@ -134,7 +134,7 @@ export function ContextMenu({
         <>
           <button
             role="menuitem"
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-hidden cursor-pointer text-left"
             onClick={() => {
               onNewFile(parentPath);
               onClose();
@@ -148,7 +148,7 @@ export function ContextMenu({
       )}
       <button
         role="menuitem"
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-hidden cursor-pointer text-left"
         onClick={() => {
           onRename(state.targetPath);
           onClose();
@@ -160,7 +160,7 @@ export function ContextMenu({
       {!state.targetIsFolder && (
         <button
           role="menuitem"
-          className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
+          className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-hidden cursor-pointer text-left"
           onClick={() => {
             onDuplicate(state.targetPath);
             onClose();
@@ -173,7 +173,7 @@ export function ContextMenu({
       <div className="border-t border-neutral-700 my-1" />
       <button
         role="menuitem"
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-900/30 focus-visible:bg-red-900/30 active:bg-red-900/50 outline-none cursor-pointer text-left"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-900/30 focus-visible:bg-red-900/30 active:bg-red-900/50 outline-hidden cursor-pointer text-left"
         onClick={() => {
           onDelete(state.targetPath);
           onClose();
@@ -263,7 +263,7 @@ export function InlineInput({
       style={{ paddingLeft: `${8 + depth * 12 + (isFolder ? 0 : 14)}px` }}
     >
       {isFolder ? (
-        <FolderSimple size={SZ_ICON} weight="duotone" color="#6B7280" className="flex-shrink-0" />
+        <FolderSimple size={SZ_ICON} weight="duotone" color="#6B7280" className="shrink-0" />
       ) : (
         <FileIcon path={value} />
       )}
@@ -278,7 +278,7 @@ export function InlineInput({
           onKeyDown={handleKeyDown}
           onBlur={handleBlur}
           aria-invalid={error ? true : undefined}
-          className={`w-full min-w-0 bg-neutral-800 text-neutral-200 text-xs px-1.5 py-0.5 rounded border outline-none ${
+          className={`w-full min-w-0 bg-neutral-800 text-neutral-200 text-xs px-1.5 py-0.5 rounded border outline-hidden ${
             error ? "border-red-500/70" : "border-neutral-600 focus:border-[#3CE6AC]"
           }`}
           spellCheck={false}
@@ -344,13 +344,13 @@ export function DeleteConfirm({
       <div className="flex gap-1.5">
         <button
           onClick={onCancel}
-          className="flex-1 px-2 py-1 rounded bg-neutral-700 text-neutral-300 hover:bg-neutral-600 transition-colors"
+          className="flex-1 px-2 py-1 rounded-sm bg-neutral-700 text-neutral-300 hover:bg-neutral-600 transition-colors"
         >
           Cancel
         </button>
         <button
           onClick={onConfirm}
-          className="flex-1 px-2 py-1 rounded bg-red-900/60 text-red-300 hover:bg-red-800/60 transition-colors"
+          className="flex-1 px-2 py-1 rounded-sm bg-red-900/60 text-red-300 hover:bg-red-800/60 transition-colors"
         >
           Delete
         </button>
@@ -419,7 +419,7 @@ export const TreeFile = memo(function TreeFile({
       <span className="truncate flex-1">{node.name}</span>
       {lintInfo && lintInfo.count > 0 && (
         <span
-          className="flex-shrink-0 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400 text-center mr-1"
+          className="shrink-0 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400 text-center mr-1"
           title={lintInfo.messages.join("\n")}
         >
           {lintInfo.count}
@@ -505,11 +505,11 @@ export const TreeFolder = memo(function TreeFolder({
         }}
         onDragLeave={onDragLeave}
         className={`w-full flex items-center gap-1.5 px-2.5 py-1 min-h-7 text-left text-xs text-neutral-400 hover:bg-neutral-800/30 hover:text-neutral-300 transition-colors ${
-          isDragOver ? "bg-[#3CE6AC]/10 outline outline-1 outline-[#3CE6AC]/40" : ""
+          isDragOver ? "bg-[#3CE6AC]/10 outline-solid outline-1 outline-[#3CE6AC]/40" : ""
         }`}
         style={{ paddingLeft: `${8 + depth * 12}px` }}
       >
-        <Chevron size={10} className="flex-shrink-0 text-neutral-600" />
+        <Chevron size={10} className="shrink-0 text-neutral-600" />
         <span className="truncate font-medium">{node.name}</span>
       </button>
       {isOpen && (

package/src/components/editor/InlineTextToolbar.tsx

@@ -77,7 +77,7 @@ export function InlineTextToolbar({
       data-inline-text-toolbar="true"
       role="toolbar"
       aria-label="Text formatting"
-      className="pointer-events-auto fixed z-[200] flex items-center gap-1 rounded-lg border border-white/10 bg-[#15171c] p-1 shadow-[0_8px_24px_rgba(0,0,0,0.55)]"
+      className="pointer-events-auto fixed z-200 flex items-center gap-1 rounded-lg border border-white/10 bg-[#15171c] p-1 shadow-[0_8px_24px_rgba(0,0,0,0.55)]"
       style={{
         left: placement.left,
         top: placement.top,

package/src/components/editor/InspectorHeaderActions.tsx

@@ -37,7 +37,7 @@ export function InspectorHeaderActions({
             track("toggle", "Element visibility");
             void onToggleHidden(selectedElementId, !selectedElementHidden);
           }}
-          className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+          className="flex h-6 w-6 items-center justify-center rounded-sm text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
         >
           {selectedElementHidden ? (
             <EyeSlash size={13} weight="bold" aria-hidden="true" />
@@ -54,7 +54,7 @@ export function InspectorHeaderActions({
             onUngroup();
           }}
           title="Ungroup (⌘⇧G)"
-          className="flex h-6 items-center rounded px-2 text-[11px] font-medium text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-neutral-200"
+          className="flex h-6 items-center rounded-sm px-2 text-[11px] font-medium text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-neutral-200"
         >
           Ungroup
         </button>
@@ -91,7 +91,7 @@ export function InspectorHeaderActions({
           track("button", "Clear selection");
           onClear();
         }}
-        className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+        className="flex h-6 w-6 items-center justify-center rounded-sm text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
       >
         <X size={13} />
       </button>

package/src/components/editor/KeyframeDiamond.tsx

@@ -29,7 +29,7 @@ export const KeyframeDiamond = memo(function KeyframeDiamond({
         e.stopPropagation();
         onClick();
       }}
-      className="relative flex-shrink-0 p-0.5 transition-opacity hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']"
+      className="relative shrink-0 p-0.5 transition-opacity hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']"
       style={{ color, opacity }}
       title={title}
       aria-label={title}

package/src/components/editor/KeyframeEaseList.tsx

@@ -74,7 +74,7 @@ export function KeyframeEaseList({
               const next = e.target.value;
               if (next) onApplyAll(next);
             }}
-            className="ml-auto cursor-pointer rounded bg-neutral-800 px-1.5 py-0.5 text-[9px] text-neutral-300 outline-none hover:bg-neutral-700 focus:ring-1 focus:ring-panel-accent/40"
+            className="ml-auto cursor-pointer rounded-sm bg-neutral-800 px-1.5 py-0.5 text-[9px] text-neutral-300 outline-hidden hover:bg-neutral-700 focus:ring-1 focus:ring-panel-accent/40"
           >
             <option value="" disabled>
               Set all…

package/src/components/editor/LayersPanel.test.ts

@@ -1,12 +1,55 @@
 // @vitest-environment happy-dom
 
+import { createElement, act } from "react";
+import { createRoot, type Root } from "react-dom/client";
 import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
 import { Window } from "happy-dom";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
 import type { DomEditLayerItem } from "./domEditingTypes";
-import { createRafThrottle, sortLayersByZIndex } from "./LayersPanel";
+import { createRafThrottle, LayersPanel, sortLayersByZIndex } from "./LayersPanel";
 import { isLayerDraggable } from "./useLayerDrag";
 import { liveTime } from "../../player";
 
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const mocks = vi.hoisted(() => ({
+  previewIframeRef: { current: null } as { current: unknown },
+  collect: vi.fn(),
+  setActiveGroupElement: vi.fn(),
+  showToast: vi.fn(),
+}));
+
+vi.mock("../../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({
+    previewIframeRef: mocks.previewIframeRef,
+    activeCompPath: "index.html",
+    showToast: mocks.showToast,
+  }),
+  useStudioPlaybackContext: () => ({
+    refreshKey: 0,
+    compositionLoading: true,
+    timelineElements: [],
+    isPlaying: false,
+  }),
+}));
+vi.mock("../../contexts/DomEditContext", () => ({
+  useDomEditContext: () => ({
+    domEditSelection: null,
+    activeGroupElement: null,
+    applyDomSelection: vi.fn(),
+    updateDomEditHoverSelection: vi.fn(),
+    handleDomZIndexReorderCommit: vi.fn(),
+    setActiveGroupElement: mocks.setActiveGroupElement,
+  }),
+}));
+vi.mock("../nle/useCanvasZOrderTimelineMirror", () => ({
+  useLayerReorderTimelineMirror: () => vi.fn(),
+}));
+vi.mock("./domEditing", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./domEditing")>()),
+  collectDomEditLayerItems: mocks.collect,
+}));
+
 function makeLayer(
   overrides: Partial<DomEditLayerItem> & { zIndex?: string; locked?: boolean },
 ): DomEditLayerItem {
@@ -197,3 +240,56 @@ describe("liveTime subscribe / unsubscribe (LayersPanel scrub contract)", () =>
     unsubscribe();
   });
 });
+
+describe("LayersPanel preview promotion", () => {
+  let root: Root;
+  let host: HTMLDivElement;
+
+  function makeIframe(compId: string): HTMLIFrameElement {
+    const iframe = document.createElement("iframe");
+    const doc = new Window().document;
+    doc.body.innerHTML = `<div data-composition-id="${compId}"></div>`;
+    Object.defineProperty(iframe, "contentDocument", { value: doc });
+    return iframe;
+  }
+
+  const collectedRootIds = () =>
+    mocks.collect.mock.calls.map((call) => (call[0] as HTMLElement).dataset.compositionId);
+
+  beforeEach(() => {
+    mocks.collect.mockReset().mockReturnValue([]);
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    host.remove();
+    usePreviewIframeStore.setState({ iframe: null });
+  });
+
+  it("recollects layers from the promoted document's load, not the replaced one", () => {
+    const a = makeIframe("a");
+    const b = makeIframe("b");
+    mocks.previewIframeRef.current = a;
+    usePreviewIframeStore.setState({ iframe: a });
+    act(() => root.render(createElement(LayersPanel)));
+
+    act(() => {
+      mocks.previewIframeRef.current = b;
+      usePreviewIframeStore.getState().setIframe(b);
+    });
+    mocks.collect.mockClear();
+
+    act(() => {
+      a.dispatchEvent(new Event("load"));
+    });
+    expect(mocks.collect).not.toHaveBeenCalled();
+
+    act(() => {
+      b.dispatchEvent(new Event("load"));
+    });
+    expect(collectedRootIds()).toEqual(["b"]);
+  });
+});

package/src/components/editor/LayersPanel.tsx

@@ -1,3 +1,4 @@
+import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
 import { memo, useState, useCallback, useEffect, useRef } from "react";
 import {
   collectDomEditLayerItems,
@@ -122,6 +123,7 @@ export const LayersPanel = memo(function LayersPanel() {
 
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
 
+  const livePreviewIframe = useLivePreviewIframe();
   const collectLayers = useCallback(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
@@ -152,7 +154,7 @@ export const LayersPanel = memo(function LayersPanel() {
 
   useEffect(() => {
     collectLayers();
-  }, [collectLayers, refreshKey, zEditVersion]);
+  }, [collectLayers, refreshKey, zEditVersion, livePreviewIframe]);
 
   useEffect(() => {
     const iframe = previewIframeRef.current;
@@ -163,7 +165,7 @@ export const LayersPanel = memo(function LayersPanel() {
     };
     iframe.addEventListener("load", handleLoad);
     return () => iframe.removeEventListener("load", handleLoad);
-  }, [previewIframeRef, collectLayers]);
+  }, [previewIframeRef, livePreviewIframe, collectLayers]);
 
   useEffect(() => {
     if (!compositionLoading) {
@@ -485,7 +487,7 @@ export const LayersPanel = memo(function LayersPanel() {
                   onClick={(e) => toggleCollapse(layer.key, e)}
                   aria-expanded={!isCollapsed}
                   aria-label={isCollapsed ? "Expand children" : "Collapse children"}
-                  className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center rounded text-neutral-500 hover:text-neutral-300 before:absolute before:-inset-1.5 before:content-['']"
+                  className="relative flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-neutral-500 hover:text-neutral-300 before:absolute before:-inset-1.5 before:content-['']"
                 >
                   <svg
                     width="8"
@@ -498,10 +500,10 @@ export const LayersPanel = memo(function LayersPanel() {
                   </svg>
                 </button>
               ) : (
-                <span className="w-4 flex-shrink-0" />
+                <span className="w-4 shrink-0" />
               )}
               <span
-                className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${
+                className={`flex h-5 w-5 shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${
                   selected
                     ? "bg-panel-accent/18 text-panel-accent"
                     : isCompHost

package/src/components/editor/MarqueeOverlay.tsx

@@ -19,7 +19,7 @@ export function MarqueeOverlay({ candidateRects, marqueeRect }: MarqueeOverlayPr
         <div
           key={i}
           aria-hidden="true"
-          className="pointer-events-none absolute rounded-sm border border-studio-accent bg-studio-accent/5"
+          className="pointer-events-none absolute rounded-xs border border-studio-accent bg-studio-accent/5"
           style={{ left: r.left, top: r.top, width: r.width, height: r.height }}
         />
       ))}

package/src/components/editor/OffCanvasIndicators.tsx

@@ -167,7 +167,7 @@ export function ChildRectOutlines({
       {rects.map((rect, index) => (
         <div
           key={index}
-          className="pointer-events-none absolute border border-dashed border-white/20 rounded-sm"
+          className="pointer-events-none absolute border border-dashed border-white/20 rounded-xs"
           style={{
             left: rect.left,
             top: rect.top,

package/src/components/editor/PreviewGuides.tsx

@@ -8,7 +8,7 @@ interface PreviewGuidesProps {
 }
 
 const TICKS = Array.from({ length: 11 }, (_, i) => i * 10);
-const INK = "rgba(255,255,255,0.7)";
+const INK = "color-mix(in srgb, white 70%, transparent)";
 
 /** Ruler and safe-margin boxes drawn over the preview pane, never inside the composition. */
 export const PreviewGuides = memo(function PreviewGuides({ iframeRef }: PreviewGuidesProps) {

package/src/components/editor/PromotableControl.tsx

@@ -83,7 +83,7 @@ export function PromotableControl({
         <span
           // Sits above the row (not on top of top-0) so it clears a value that
           // renders flush to the row's right edge, e.g. flat Font/Color rows.
-          className="pointer-events-none absolute -top-2 right-1.5 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-studio-accent"
+          className="pointer-events-none absolute -top-2 right-1.5 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded-sm bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-studio-accent"
           title={`Bound to variable "${promote.boundId}"`}
         >
           ◆ {promote.boundId}
@@ -97,7 +97,7 @@ export function PromotableControl({
             e.stopPropagation();
             promote.promote();
           }}
-          className="absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded bg-neutral-800/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-studio-accent hover:opacity-100"
+          className="absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded-sm bg-neutral-800/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-studio-accent hover:opacity-100"
         >
           ◇ var
         </button>

package/src/components/editor/PropertyPanelEmptyState.tsx

@@ -18,7 +18,7 @@ function FlatEmptyState() {
         </svg>
       </span>
       <div className="text-[13px] font-semibold text-panel-text-0">Nothing selected</div>
-      <div className="max-w-[250px] text-[11px] leading-[1.5] text-panel-text-3">
+      <div className="max-w-[250px] text-[11px] leading-normal text-panel-text-3">
         Click any element on the canvas to edit it, or drag to select several.
       </div>
       <div className="mt-2 flex w-full flex-col gap-1.5">
@@ -27,7 +27,7 @@ function FlatEmptyState() {
             <span className="text-panel-danger">●</span>
             Record a gesture
           </span>
-          <span className="rounded border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
+          <span className="rounded-sm border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
             R
           </span>
         </span>
@@ -36,7 +36,7 @@ function FlatEmptyState() {
             <span className="text-panel-accent">✦</span>
             Describe a change to the agent
           </span>
-          <span className="rounded border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
+          <span className="rounded-sm border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
             ⌘K
           </span>
         </span>
@@ -74,7 +74,7 @@ function FlatMultiSelectState({
   return (
     <div className="flex flex-col gap-3 px-4 py-3">
       <div className="flex items-center gap-3 rounded-xl border border-panel-border bg-panel-surface p-3">
-        <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-panel-accent/10 text-panel-accent">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-panel-accent/10 text-panel-accent">
           <Layers size={16} />
         </span>
         <div className="min-w-0 flex-1">
@@ -90,7 +90,7 @@ function FlatMultiSelectState({
           data-flat-multiselect-clear="true"
           aria-label="Clear selection"
           onClick={onClearSelection}
-          className="flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center text-panel-text-3"
+          className="flex h-[26px] w-[26px] shrink-0 items-center justify-center text-panel-text-3"
         >
           <svg
             width="13"
@@ -113,14 +113,14 @@ function FlatMultiSelectState({
               className="flex items-center gap-2 rounded-lg border border-panel-border bg-panel-bg px-2.5 py-[7px]"
             >
               <span
-                className={`flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded text-[9px] font-bold ${className}`}
+                className={`flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-sm text-[9px] font-bold ${className}`}
               >
                 {glyph}
               </span>
               <span className="min-w-0 flex-1 truncate text-[11px] text-panel-text-1">
                 {element.label}
               </span>
-              <span className="flex-shrink-0 font-mono text-[9px] text-panel-text-4">
+              <span className="shrink-0 font-mono text-[9px] text-panel-text-4">
                 {element.id ? `#${element.id}` : element.selector}
               </span>
             </span>

package/src/components/editor/PropertyPanelFlatHeader.tsx

@@ -41,13 +41,13 @@ export function PropertyPanelFlatHeader({
       <Icon
         size={15}
         data-flat-header-icon="true"
-        className={`flex-shrink-0 ${ICON_COLOR_BY_KIND[elementKind]}`}
+        className={`shrink-0 ${ICON_COLOR_BY_KIND[elementKind]}`}
       />
       <div className="flex min-w-0 flex-1 items-baseline gap-2">
         <span className="truncate text-[13px] font-semibold text-panel-text-0">{name}</span>
         <span className="truncate font-mono text-[10px] text-panel-text-4">{meta}</span>
       </div>
-      <div className="flex flex-shrink-0 items-center gap-2.5 text-panel-text-3">
+      <div className="flex shrink-0 items-center gap-2.5 text-panel-text-3">
         {showUngroup && (
           <button
             type="button"

package/src/components/editor/SnapToolbar.tsx

@@ -179,7 +179,7 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
         </button>
         <button
           type="button"
-          className="absolute -right-0.5 -bottom-0.5 rounded p-0.5 text-white/50 hover:text-white/90 bg-black/50"
+          className="absolute -right-0.5 -bottom-0.5 rounded-sm p-0.5 text-white/50 hover:text-white/90 bg-black/50"
           onClick={() => setGridPopoverOpen((v) => !v)}
           title="Grid options"
           aria-label="Grid options"
@@ -209,7 +209,7 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
                     updatePrefs({ gridSpacing: val });
                   }
                 }}
-                className="w-16 rounded bg-neutral-900 border border-neutral-600 px-1.5 py-0.5 text-xs text-white text-right tabular-nums outline-none focus:border-studio-accent"
+                className="w-16 rounded-sm bg-neutral-900 border border-neutral-600 px-1.5 py-0.5 text-xs text-white text-right tabular-nums outline-hidden focus:border-studio-accent"
               />
             </label>
             <label className="flex items-center gap-2 text-xs text-white/80 cursor-pointer">

package/src/components/editor/TimelineFxPopover.tsx

@@ -139,7 +139,7 @@ export function TimelineFxPopover({
       ref={rootRef}
       role="dialog"
       aria-label="Effects"
-      className="z-[200] flex flex-col overflow-hidden rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl"
+      className="z-200 flex flex-col overflow-hidden rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl"
       style={clampedStyle(anchorRect)}
       onKeyDown={onKeyDown}
       onPointerDown={(event) => event.stopPropagation()}

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

@@ -4,6 +4,7 @@ import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { studioEditLifecycle, type StudioWriteResult } from "../../webmcp/writeCoordinator";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
 import { TopologyLens } from "./TopologyLens";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -291,4 +292,31 @@ describe("TopologyLens", () => {
     expect(vi.getTimerCount()).toBe(0);
     expect(studioEditLifecycle.getSnapshot()).toEqual({ phase: "idle" });
   });
+
+  it("dismisses on the promoted iframe's load, not the replaced one", () => {
+    const a = document.createElement("iframe");
+    const b = document.createElement("iframe");
+    document.body.append(a, b);
+    const ref = { current: a as HTMLIFrameElement | null };
+    usePreviewIframeStore.setState({ iframe: a });
+    window.matchMedia = matchMedia(false);
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+    act(() => {
+      root?.render(<TopologyLens iframeRef={ref} activeCompositionPath="index.html" />);
+    });
+    begin();
+
+    act(() => {
+      ref.current = b;
+      usePreviewIframeStore.getState().setIframe(b);
+    });
+    act(() => a.dispatchEvent(new Event("load")));
+    expect(host.querySelector('[data-topology-lens="hidden"]')).toBeNull();
+
+    act(() => b.dispatchEvent(new Event("load")));
+    expect(host.querySelector('[data-topology-lens="hidden"]')).not.toBeNull();
+    usePreviewIframeStore.setState({ iframe: null });
+  });
 });