@hyperframes/studio 0.8.96 → 0.8.98

package/dist/ui.d.ts

@@ -181,6 +181,8 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Ro
     side?: "top" | "bottom" | "left" | "right";
     align?: "start" | "center" | "end";
     sideOffset?: number;
+    /** Points the popup at its trigger. Off by default; the default gap from the trigger grows by the arrow's height. */
+    arrow?: boolean;
     /** Portal target. Pass the shadow root when the trigger lives in one. */
     container?: PortalContainer;
     /** Names the popup for assistive tech. */
@@ -193,7 +195,7 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Ro
     className?: string;
     "data-preview-state"?: PopupPreviewState;
 }
-declare function Popover({ trigger, children, side, align, sideOffset, container, className, initialFocus, "aria-label": ariaLabel, "data-preview-state": previewState, ...root }: PopoverProps): react_jsx_runtime.JSX.Element;
+declare function Popover({ trigger, children, side, align, arrow, sideOffset, container, className, initialFocus, "aria-label": ariaLabel, "data-preview-state": previewState, ...root }: PopoverProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Shared field look (also used by NumberField and Select). Each interactive state is written

package/dist/ui.js

@@ -30,7 +30,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-QZ6HNNFG.js";
+} from "./chunk-6GAO75IU.js";
 import "./chunk-PZ5AY32C.js";
 export {
   Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.96",
+  "version": "0.8.98",
   "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.96",
-    "@hyperframes/player": "0.8.96",
-    "@hyperframes/parsers": "0.8.96",
-    "@hyperframes/sdk": "0.8.96",
-    "@hyperframes/studio-server": "0.8.96",
-    "@hyperframes/shader-transitions": "0.8.96"
+    "@hyperframes/core": "0.8.98",
+    "@hyperframes/parsers": "0.8.98",
+    "@hyperframes/player": "0.8.98",
+    "@hyperframes/sdk": "0.8.98",
+    "@hyperframes/shader-transitions": "0.8.98",
+    "@hyperframes/studio-server": "0.8.98"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.96"
+    "@hyperframes/producer": "0.8.98"
   },
   "peerDependencies": {
     "react": "19",
@@ -93,6 +93,7 @@
     "build": "vite build && tsup",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
+    "test:edit-accuracy": "bun tests/e2e/edit-accuracy/run.mjs",
     "test:webmcp-edit-loop": "node tests/e2e/webmcp-edit-loop.mjs",
     "test:timeline-virtualization": "TIMELINE_ROW_VIRTUALIZATION=on TIMELINE_ELEMENT_COUNT=50000 node tests/e2e/timeline-virtualization.mjs",
     "test:watch": "vitest",

package/src/components/EditorShell.tsx

@@ -18,6 +18,7 @@ import type { GestureRecordingState } from "./editor/GestureRecordControl";
 import { useTimelineSelectionPreviewSync } from "../hooks/useTimelineSelectionPreviewSync";
 import { StudioAgentTools } from "../webmcp/StudioAgentTools";
 import type { TimelineDropPlacement } from "../player/components/timelineCallbacks";
+import type { TimelineProps } from "../player/components/TimelineTypes";
 import { Dock } from "./dock/Dock";
 
 type RenderClipContent = (
@@ -57,6 +58,7 @@ export interface EditorShellProps extends TimelineEditCallbackDeps {
   onPasteClip: () => Promise<void>;
   onDuplicateClip: () => Promise<boolean>;
   canPasteClip: () => boolean;
+  clipMenuItems?: TimelineProps["clipMenuItems"];
   setCompIdToSrc: (map: Map<string, string>) => void;
   setCompositionLoading: (loading: boolean) => void;
   shouldShowMotionPath: boolean;
@@ -105,6 +107,7 @@ export function EditorShell({
   onPasteClip,
   onDuplicateClip,
   canPasteClip,
+  clipMenuItems,
   setCompIdToSrc,
   setCompositionLoading,
   shouldShowMotionPath,
@@ -201,6 +204,7 @@ export function EditorShell({
               onPasteClip={onPasteClip}
               onDuplicateClip={onDuplicateClip}
               canPasteClip={canPasteClip}
+              clipMenuItems={clipMenuItems}
               previewOverlay={
                 <PreviewOverlays
                   shouldShowMotionPath={shouldShowMotionPath}
@@ -244,6 +248,7 @@ interface EditorShellBodyProps {
   onPasteClip: () => Promise<void>;
   onDuplicateClip: () => Promise<boolean>;
   canPasteClip: () => boolean;
+  clipMenuItems?: TimelineProps["clipMenuItems"];
 }
 
 function EditorShellBody({
@@ -264,6 +269,7 @@ function EditorShellBody({
   onPasteClip,
   onDuplicateClip,
   canPasteClip,
+  clipMenuItems,
 }: EditorShellBodyProps) {
   const { compositionStack, updateCompositionStack, containerRef } = useNLEContext();
 
@@ -316,6 +322,7 @@ function EditorShellBody({
             onPasteClip={onPasteClip}
             onDuplicateClip={onDuplicateClip}
             canPasteClip={canPasteClip}
+            clipMenuItems={clipMenuItems}
             onSelectTimelineElement={onSelectTimelineElement}
             timelineFooter={
               captionEditMode ? (

package/src/components/TimelineToolPicker.tsx

@@ -23,7 +23,7 @@ interface ToolRow {
 }
 
 /** One button for the active timeline tool; its menu switches tools or selects clips around the playhead. */
-export function TimelineToolPicker() {
+export function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
   const activeTool = usePlayerStore((s) => s.activeTool);
   const store = () => usePlayerStore.getState();
   const rows: ToolRow[] = [
@@ -41,21 +41,25 @@ export function TimelineToolPicker() {
       active: activeTool === "razor",
       run: () => store().setActiveTool("razor"),
     },
-    {
-      label: "Select leftward",
-      shortcut: "[",
-      icon: <ArrowLineLeft size={16} aria-hidden="true" />,
-      active: false,
-      run: () => store().selectLeftward(),
-    },
-    {
-      label: "Select rightward",
-      shortcut: "]",
-      icon: <ArrowLineRight size={16} aria-hidden="true" />,
-      active: false,
-      run: () => store().selectRightward(),
-    },
   ];
+  if (showSelectAroundPlayhead) {
+    rows.push(
+      {
+        label: "Select leftward",
+        shortcut: "[",
+        icon: <ArrowLineLeft size={16} aria-hidden="true" />,
+        active: false,
+        run: () => store().selectLeftward(),
+      },
+      {
+        label: "Select rightward",
+        shortcut: "]",
+        icon: <ArrowLineRight size={16} aria-hidden="true" />,
+        active: false,
+        run: () => store().selectRightward(),
+      },
+    );
+  }
   const current = rows.find((row) => row.active) ?? rows[0];
   return (
     <Menu

package/src/components/TimelineToolbar.test.tsx

@@ -8,6 +8,7 @@ import { usePlayerStore } from "../player/store/playerStore";
 import { makeSelection } from "../hooks/domSelectionTestHarness";
 import { useAudioMetersVisible } from "../utils/audioMeterVisibility";
 import { readStudioUiPreferences } from "../utils/studioUiPreferences";
+import { dispatchPlainKey, type HotkeyCallbacks } from "../hooks/appHotkeysDispatch";
 import { AudioMeterStrip } from "./nle/AudioMeterStrip";
 import { TimelineToolbar } from "./TimelineToolbar";
 
@@ -295,6 +296,67 @@ describe("TimelineToolbar history", () => {
   });
 });
 
+describe("TimelineToolbar tool menu", () => {
+  async function openMenuRows(props: Partial<React.ComponentProps<typeof TimelineToolbar>>) {
+    const { host, root } = renderToolbar(undefined, props);
+    const trigger = host.querySelector<HTMLButtonElement>('button[aria-label^="Timeline tool:"]')!;
+    await act(async () => {
+      trigger.click();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    const rows = [...document.querySelectorAll('[role="menuitem"] > span:first-child')].map(
+      (label) => label.textContent,
+    );
+    act(() => root.unmount());
+    return rows;
+  }
+
+  it("lists Select, Split, Select leftward and Select rightward by default", async () => {
+    expect(await openMenuRows({})).toEqual([
+      "Select",
+      "Split",
+      "Select leftward",
+      "Select rightward",
+    ]);
+  });
+
+  it("lists only Select and Split when the host hides select around the playhead", async () => {
+    expect(await openMenuRows({ showSelectAroundPlayhead: false })).toEqual(["Select", "Split"]);
+  });
+
+  it.each([true, false])("[ and ] select around the playhead with the rows shown: %s", (shown) => {
+    usePlayerStore.setState({
+      currentTime: 4,
+      elements: [0, 4, 7].map((start, track) => ({
+        id: `c${start}`,
+        key: `c${start}`,
+        tag: "div",
+        start,
+        duration: 2,
+        track,
+      })),
+    });
+    const { root } = renderToolbar(undefined, { showSelectAroundPlayhead: shown });
+    const press = (key: string) =>
+      act(() =>
+        dispatchPlainKey(new KeyboardEvent("keydown", { key }), key, {} as HotkeyCallbacks),
+      );
+    try {
+      press("[");
+      expect([...usePlayerStore.getState().selectedElementIds]).toEqual(["c0"]);
+      press("]");
+      expect([...usePlayerStore.getState().selectedElementIds].sort()).toEqual(["c4", "c7"]);
+    } finally {
+      act(() => root.unmount());
+      usePlayerStore.setState({
+        elements: [],
+        selectedElementId: null,
+        selectedElementIds: new Set(),
+      });
+    }
+  });
+});
+
 describe("TimelineToolbar add beat", () => {
   it("shows Add beat by default, as Studio does", () => {
     const { host, root } = renderToolbar();

package/src/components/TimelineToolbar.tsx

@@ -44,6 +44,7 @@ export interface TimelineToolbarProps {
   onSplitElement?: (element: TimelineElement, splitTime: number) => void;
   history?: TimelineHistoryButtonsProps;
   showHistory?: boolean;
+  showSelectAroundPlayhead?: boolean;
   showAddBeat?: boolean;
   /** Hides Add keyframe and auto-record, and turns off auto-record and the K shortcut with them. */
   showKeyframes?: boolean;
@@ -143,6 +144,7 @@ export function TimelineToolbar({
   onSplitElement,
   history,
   showHistory = true,
+  showSelectAroundPlayhead = true,
   showAddBeat = true,
   showKeyframes = true,
 }: TimelineToolbarProps) {
@@ -216,7 +218,7 @@ export function TimelineToolbar({
       <div className="flex items-center justify-between px-2 py-0.5">
         <div className="flex items-center gap-0.5">
           {showHistory && <TimelineHistoryButtons {...history} />}
-          <TimelineToolPicker />
+          <TimelineToolPicker showSelectAroundPlayhead={showSelectAroundPlayhead} />
           {/* Divider: tool-mode | editing-actions */}
           <div aria-hidden="true" className="mx-1 h-4 w-px bg-neutral-800" />
           <Tooltip label={timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)"}>

package/src/components/editor/DomEditOverlay.tsx

@@ -161,8 +161,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   const groupGestureRef = useRef<GroupGestureState | null>(null);
   const blockedMoveRef = useRef<BlockedMoveState | null>(null);
   const suppressNextBoxClickRef = useRef(false);
-  const suppressNextBoxMouseDownRef = useRef(false);
-  const suppressNextOverlayMouseDownRef = useRef(false);
   const snapGuidesRef = useRef<SnapGuidesState | null>(null);
   const rafPausedRef = useRef(false);
 
@@ -329,15 +327,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
 
   const handleOverlayMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
     if (!allowCanvasMovement) return;
-    if (suppressNextOverlayMouseDownRef.current) {
-      logSelect("mousedown-suppressed", { shift: event.shiftKey });
-      suppressNextOverlayMouseDownRef.current = false;
-      suppressNextBoxMouseDownRef.current = false;
-      suppressNextBoxClickRef.current = false;
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
     const target = event.target as HTMLElement | null;
     const onBox = Boolean(target?.closest('[data-dom-edit-selection-box="true"]'));
     logSelect("mousedown", { shift: event.shiftKey, onBox });
@@ -346,10 +335,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     // extend beyond the composition rect into the gray zone, and users need
     // to select/deselect them by clicking there.
     onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
-    if (event.shiftKey) {
-      suppressNextBoxMouseDownRef.current = true;
-      suppressNextBoxClickRef.current = true;
-    }
   };
 
   // fallow-ignore-next-line complexity
@@ -373,8 +358,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       if (!candidate) return;
       event.preventDefault();
       event.stopPropagation();
-      suppressNextOverlayMouseDownRef.current = true;
-      suppressNextBoxMouseDownRef.current = true;
       suppressNextBoxClickRef.current = true;
       onSelectionChangeRef.current(candidate, { additive: true });
       return;
@@ -419,7 +402,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
         // so those elements were always selectable once the band could begin.
         event.preventDefault();
         event.stopPropagation();
-        suppressNextOverlayMouseDownRef.current = true;
         marquee.begin(event);
         return;
       }
@@ -437,13 +419,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
   };
 
-  const suppressBoxMouseDown = (e: React.MouseEvent) => {
-    if (!suppressNextBoxMouseDownRef.current) return;
-    suppressNextBoxMouseDownRef.current = false;
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
   // Right-click state + handler: select the element under the pointer (if
   // needed), then open the menu; closes when the selection moves off-target.
   const { contextMenu, closeContextMenu, handleContextMenu } = useCanvasContextMenuState({
@@ -509,7 +484,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           allowBodyDrag={bodyDrag}
           groupCanMove={groupCanMove}
           gestures={gestures}
-          onBoxMouseDown={suppressBoxMouseDown}
           onBoxClick={handleBoxClick}
         />
       )}
@@ -528,7 +502,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           groupSelectionCount={groupSelections.length}
           gestures={gestures}
           onStyleCommit={onStyleCommitRef.current}
-          onBoxMouseDown={suppressBoxMouseDown}
           onBoxClick={handleBoxClick}
         />
       )}

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

@@ -56,7 +56,6 @@ describe("DomEditSelectionChrome crop composition", () => {
           groupSelectionCount={0}
           gestures={{ startGesture: vi.fn() } as never}
           onStyleCommit={vi.fn()}
-          onBoxMouseDown={vi.fn()}
           onBoxClick={vi.fn()}
         />,
       );
@@ -112,7 +111,6 @@ describe("DomEditSelectionChrome crop composition", () => {
           groupSelectionCount={0}
           gestures={{ startGesture: vi.fn() } as never}
           onStyleCommit={vi.fn()}
-          onBoxMouseDown={vi.fn()}
           onBoxClick={vi.fn()}
         />,
       );
@@ -173,7 +171,6 @@ describe("DomEditSelectionChrome while editing text", () => {
           groupSelectionCount={0}
           gestures={{ startGesture: vi.fn() } as never}
           onStyleCommit={vi.fn()}
-          onBoxMouseDown={vi.fn()}
           onBoxClick={vi.fn()}
           inlineText={{ editing, startFromPress: vi.fn() }}
         />,
@@ -258,7 +255,6 @@ describe("DomEditSelectionChrome with body drag off", () => {
           selectionKey="box"
           groupSelectionCount={0}
           gestures={gestures as never}
-          onBoxMouseDown={vi.fn()}
           onBoxClick={vi.fn()}
         />,
       );
@@ -313,7 +309,6 @@ describe("DomEditSelectionChrome with body drag off", () => {
           allowBodyDrag={false}
           groupCanMove
           gestures={gestures as never}
-          onBoxMouseDown={vi.fn()}
           onBoxClick={vi.fn()}
         />,
       );

package/src/components/editor/DomEditSelectionChrome.tsx

@@ -62,7 +62,6 @@ interface DomEditGroupChromeProps {
   allowBodyDrag: boolean;
   groupCanMove: boolean;
   gestures: GestureHandlers;
-  onBoxMouseDown: (e: React.MouseEvent) => void;
   onBoxClick: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
@@ -75,7 +74,6 @@ export function DomEditGroupChrome({
   allowBodyDrag,
   groupCanMove,
   gestures,
-  onBoxMouseDown,
   onBoxClick,
 }: DomEditGroupChromeProps) {
   const canManipulate = allowCanvasMovement && !usePreviewReadOnly();
@@ -108,7 +106,6 @@ export function DomEditGroupChrome({
           if (!canManipulate || !allowBodyDrag || (e.shiftKey && !groupCanMove)) return;
           gestures.startGroupDrag(e);
         }}
-        onMouseDown={onBoxMouseDown}
         onClick={onBoxClick}
       />
     </>
@@ -128,7 +125,6 @@ interface DomEditSelectionChromeProps {
   groupSelectionCount: number;
   gestures: GestureHandlers;
   onStyleCommit?: (property: string, value: string) => Promise<unknown> | void;
-  onBoxMouseDown: (e: React.MouseEvent) => void;
   onBoxClick: (event: React.MouseEvent<HTMLDivElement>) => void;
   /** The canvas' text-editing session: what opens one, and whether one is open. */
   inlineText?: {
@@ -157,7 +153,6 @@ export function DomEditSelectionChrome({
   groupSelectionCount,
   gestures,
   onStyleCommit,
-  onBoxMouseDown,
   onBoxClick,
   inlineText,
 }: DomEditSelectionChromeProps) {
@@ -225,7 +220,6 @@ export function DomEditSelectionChrome({
             }
             if (!e.shiftKey) gestures.startBlockedMove(e, selection);
           }}
-          onMouseDown={onBoxMouseDown}
           onClick={onBoxClick}
         >
           {cropOutlineInsetPx && (

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

@@ -0,0 +1,122 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, expect, it, vi } from "vitest";
+import { makeSelection } from "../../hooks/domSelectionTestHarness";
+import type { DomEditSelection } from "./domEditing";
+import "./domEditOverlayTestMocks";
+import { DomEditOverlay } from "./DomEditOverlay";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+HTMLElement.prototype.setPointerCapture ??= () => {};
+HTMLElement.prototype.releasePointerCapture ??= () => {};
+
+const pointTarget = vi.hoisted(() => ({ current: null as HTMLElement | null }));
+const rect = vi.hoisted(() => ({ current: null as Record<string, number> | null }));
+vi.mock("../../utils/studioPreviewHelpers", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../utils/studioPreviewHelpers")>()),
+  getPreviewTargetFromPointer: () => pointTarget.current,
+}));
+vi.mock("./useDomEditOverlayRects", () => ({
+  useDomEditOverlayRects: () => ({
+    overlayRect: rect.current,
+    overlayRectRef: rect,
+    setOverlayRect: () => undefined,
+    hoverRect: null,
+    groupOverlayItems: [],
+    groupOverlayItemsRef: { current: [] },
+    setGroupOverlayItems: () => undefined,
+    childRects: [],
+  }),
+}));
+
+let root: Root;
+const onCanvasMouseDown = vi.fn();
+const onSelectionChange = vi.fn();
+
+function mount() {
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  const element = document.createElement("h1");
+  document.body.append(element);
+  return { host, element, hover: makeSelection("Title", element) };
+}
+
+function render(
+  hoverSelection: DomEditSelection | null,
+  selection: DomEditSelection | null = null,
+) {
+  act(() =>
+    root.render(
+      <DomEditOverlay
+        iframeRef={{ current: document.createElement("iframe") }}
+        activeCompositionPath={null}
+        selection={selection}
+        hoverSelection={hoverSelection}
+        onCanvasMouseDown={onCanvasMouseDown}
+        onCanvasPointerMove={() => Promise.resolve(null)}
+        onCanvasPointerLeave={() => undefined}
+        onSelectionChange={onSelectionChange}
+        onBlockedMove={() => undefined}
+        onPathOffsetCommit={() => undefined}
+        onGroupPathOffsetCommit={() => undefined}
+        onBoxSizeCommit={() => undefined}
+        onRotationCommit={() => undefined}
+        onMarqueeSelect={() => undefined}
+      />,
+    ),
+  );
+}
+
+// Like Chrome: a default-prevented pointerdown sends no compatibility mousedown.
+function press(target: Element, shiftKey = false) {
+  const init = { bubbles: true, cancelable: true, button: 0, pointerId: 1, shiftKey };
+  const down = new PointerEvent("pointerdown", init);
+  act(() => void target.dispatchEvent(down));
+  if (!down.defaultPrevented)
+    act(() => void target.dispatchEvent(new MouseEvent("mousedown", init)));
+  act(() => void target.dispatchEvent(new PointerEvent("pointerup", init)));
+  act(() => void target.dispatchEvent(new MouseEvent("click", init)));
+}
+
+afterEach(() => {
+  act(() => root.unmount());
+  onCanvasMouseDown.mockClear();
+  onSelectionChange.mockClear();
+  pointTarget.current = null;
+  rect.current = null;
+  document.body.innerHTML = "";
+});
+
+it.each([
+  ["a press on empty canvas", false],
+  ["a shift+click add", true],
+])("after %s, the next click on an element selects it", (_, shiftFirst) => {
+  const { host, element, hover } = mount();
+  const overlay = () => host.firstElementChild!;
+
+  pointTarget.current = shiftFirst ? element : null;
+  render(shiftFirst ? hover : null);
+  press(overlay(), shiftFirst);
+  expect(onCanvasMouseDown).not.toHaveBeenCalled();
+
+  pointTarget.current = element;
+  render(hover);
+  press(overlay());
+  expect(onCanvasMouseDown).toHaveBeenCalledTimes(1);
+});
+
+it("a shift+click on a selected box that cannot move toggles it once", () => {
+  const { host, element, hover } = mount();
+  hover.capabilities.canApplyManualOffset = false;
+  rect.current = { left: 20, top: 30, width: 100, height: 40, editScaleX: 1, editScaleY: 1 };
+  pointTarget.current = element;
+  render(hover, hover);
+
+  press(host.querySelector('[data-dom-edit-selection-box="true"]')!, true);
+
+  expect(onSelectionChange).toHaveBeenCalledTimes(1);
+  expect(onCanvasMouseDown).not.toHaveBeenCalled();
+});

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

@@ -17,7 +17,7 @@ import {
   resolveDomEditCapabilities,
   resolveDomEditSelection,
 } from "./domEditing";
-import { normalizeTimelineCompositionSource } from "./domEditingDom";
+import { buildElementLabel, normalizeTimelineCompositionSource } from "./domEditingDom";
 
 function createDocument(markup: string): Document {
   const window = new Window();
@@ -925,6 +925,14 @@ describe("resolveDomEditSelection", () => {
     );
   });
 
+  it("names a repeated section by its authored id, not its runtime instance id", () => {
+    const document = createDocument(`
+      <div data-composition-id="benefit-fresh__hf2" data-hf-original-composition-id="benefit-fresh"></div>
+    `);
+
+    expect(buildElementLabel(document.querySelector("div") as HTMLElement)).toBe("Benefit Fresh");
+  });
+
   it("finds a composition host authored with a ./ path", () => {
     const document = createDocument(`
       <div data-composition-id="scene" data-composition-file="./compositions/scene.html"></div>

package/src/components/editor/domEditingDom.ts

@@ -312,7 +312,8 @@ function getPreferredClassSelector(el: HTMLElement): string | undefined {
 
 // fallow-ignore-next-line complexity
 export function buildElementLabel(el: HTMLElement): string {
-  const compositionId = el.getAttribute("data-composition-id");
+  const compositionId =
+    el.getAttribute("data-hf-original-composition-id") ?? el.getAttribute("data-composition-id");
   if (compositionId && compositionId !== "main") {
     return humanizeIdentifier(compositionId);
   }

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

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { expect, it } from "vitest";
+import { ensureImportedFontFace, injectPreviewImportedFont } from "../../utils/studioFontHelpers";
+import { importedFontFaceCss, type ImportedFontAsset } from "./fontAssets";
+
+const face = (file: string, extra: Partial<ImportedFontAsset> = {}): ImportedFontAsset => ({
+  family: "Poppins",
+  path: `assets/fonts/Poppins/${file}`,
+  url: `/preview/assets/fonts/Poppins/${file}`,
+  ...extra,
+});
+
+it("a face with no weight or style is written as before", () => {
+  expect(importedFontFaceCss(face("Poppins-Bold.ttf"))).toBe(
+    '@font-face { font-family: "Poppins"; src: url("/preview/assets/fonts/Poppins/Poppins-Bold.ttf"); font-display: swap; }',
+  );
+});
+
+it("a face says which weight and style it draws, a variable file its weight range", () => {
+  expect(
+    importedFontFaceCss(face("Poppins-BoldItalic.ttf", { weight: "700", style: "italic" })),
+  ).toBe(
+    '@font-face { font-family: "Poppins"; src: url("/preview/assets/fonts/Poppins/Poppins-BoldItalic.ttf"); font-weight: 700; font-style: italic; font-display: swap; }',
+  );
+  expect(
+    importedFontFaceCss(face("Roboto-Variable.ttf", { weight: "100 900", style: "normal" })),
+  ).toContain("font-weight: 100 900; font-style: normal;");
+  expect(importedFontFaceCss(face("x.ttf", { weight: "700; color: red" }))).not.toContain(
+    "font-weight",
+  );
+});
+
+it("two weights of one family are both kept in the file and both drawn in the preview", () => {
+  const bold = face("Poppins-Bold.ttf", { weight: "700", style: "normal" });
+  const regular = face("Poppins-Regular.ttf", { weight: "400", style: "normal" });
+  const html = "<html><head></head><body></body></html>";
+  const saved = ensureImportedFontFace(
+    ensureImportedFontFace(html, bold, "index.html"),
+    regular,
+    "index.html",
+  );
+  expect(saved).toContain("font-weight: 700;");
+  expect(saved).toContain("font-weight: 400;");
+  expect(ensureImportedFontFace(saved, bold, "index.html")).toBe(saved);
+  injectPreviewImportedFont(document, bold);
+  injectPreviewImportedFont(document, regular);
+  injectPreviewImportedFont(document, bold);
+  expect(document.head.querySelectorAll("style")).toHaveLength(2);
+});
+
+it("a weight the browser would drop is left out, and a family cannot close the style block", () => {
+  for (const weight of ["0", "5000", "bold", "700;}"])
+    expect(importedFontFaceCss(face("x.ttf", { weight }))).not.toContain("font-weight");
+  expect(importedFontFaceCss(face("x.ttf", { weight: "1000" }))).toContain("font-weight: 1000;");
+  expect(importedFontFaceCss({ ...face("x.ttf"), family: "</style><b>x" })).not.toContain(
+    "</style>",
+  );
+});
+
+it("a file name with a replacement pattern is saved as written, not expanded into the page", () => {
+  const html = "<html><head></head><body>rest</body></html>";
+  const odd = { family: "Cash", path: "assets/Cash$'Font.ttf", url: "/Cash$'Font.ttf" };
+  const saved = ensureImportedFontFace(html, odd, "index.html");
+  expect(saved).toContain("Cash$'Font.ttf");
+  expect(saved.match(/<body>/g)).toHaveLength(1);
+  const again = ensureImportedFontFace(saved, { ...odd, path: "assets/Cash$&.ttf" }, "index.html");
+  expect(again).toContain("Cash$&.ttf");
+  expect(again.match(/<body>/g)).toHaveLength(1);
+});