@hyperframes/studio 0.8.96 → 0.8.97

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.97",
   "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.97",
+    "@hyperframes/parsers": "0.8.97",
+    "@hyperframes/player": "0.8.97",
+    "@hyperframes/shader-transitions": "0.8.97",
+    "@hyperframes/sdk": "0.8.97",
+    "@hyperframes/studio-server": "0.8.97"
   },
   "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.97"
   },
   "peerDependencies": {
     "react": "19",

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/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);
+});

package/src/components/editor/fontAssets.ts

@@ -2,6 +2,8 @@ export interface ImportedFontAsset {
   family: string;
   path: string;
   url: string;
+  weight?: string;
+  style?: "normal" | "italic";
 }
 
 const FONT_EXT_RE = /\.(eot|otf|ttc|ttf|woff2?)$/i;
@@ -9,7 +11,7 @@ const FONT_STYLE_SUFFIX_RE =
   /\s+(thin|extralight|extra light|light|regular|roman|medium|semibold|semi bold|bold|extrabold|extra bold|black|italic|oblique|variable)$/i;
 
 function cssString(value: string): string {
-  return JSON.stringify(value);
+  return JSON.stringify(value).replace(/</g, "\\3c ");
 }
 
 export function fontFamilyFromAssetPath(path: string): string {
@@ -28,5 +30,12 @@ export function fontFamilyFromAssetPath(path: string): string {
 }
 
 export function importedFontFaceCss(asset: ImportedFontAsset, url: string = asset.url): string {
-  return `@font-face { font-family: ${cssString(asset.family)}; src: url(${cssString(url)}); font-display: swap; }`;
+  const weight =
+    asset.weight && /^(?:[1-9]\d{0,2}|1000)(?: (?:[1-9]\d{0,2}|1000))?$/.test(asset.weight)
+      ? ` font-weight: ${asset.weight};`
+      : "";
+  const style = asset.style
+    ? ` font-style: ${asset.style === "italic" ? "italic" : "normal"};`
+    : "";
+  return `@font-face { font-family: ${cssString(asset.family)}; src: url(${cssString(url)});${weight}${style} font-display: swap; }`;
 }

package/src/components/ui/Menu.test.tsx

@@ -298,6 +298,27 @@ describe("Popover", () => {
     expect(document.activeElement).toBe(input);
     expect(document.querySelector('[role="menu"]')).toBeNull();
   });
+
+  it("points at its trigger only when asked", async () => {
+    const renderOpen = (arrow: boolean) => {
+      render(
+        <Popover trigger={<button data-testid="trigger">Speed</button>} arrow={arrow} defaultOpen>
+          <span>1x</span>
+        </Popover>,
+      );
+    };
+    renderOpen(false);
+    await settle();
+    expect(one("[role=dialog]", "popup").querySelector("svg")).toBeNull();
+    act(() => mounted?.root.unmount());
+    mounted?.host.remove();
+    mounted = null;
+
+    renderOpen(true);
+    await settle();
+    const arrow = one("[role=dialog] svg", "arrow").parentElement!;
+    expect(arrow.getAttribute("data-side")).toBe("bottom");
+  });
 });
 
 describe("hotkey classification", () => {

package/src/components/ui/Popover.tsx

@@ -14,6 +14,15 @@ type PortalContainer = ComponentPropsWithoutRef<typeof BasePopover.Portal>["cont
 const SIDE_OFFSET = 6;
 const VIEWPORT_MARGIN = 8;
 
+/** The arrow's 14x8 box overlaps the popup's border by 1px, so its fill hides the border where it meets the popup. */
+const ARROW_PX = 7;
+const ARROW_CORNER_CLEARANCE = 10;
+const arrowPlace = cn(
+  "data-[side=bottom]:-top-[7px] data-[side=top]:-bottom-[7px] data-[side=top]:rotate-180",
+  "data-[side=left]:-right-[10px] data-[side=left]:rotate-90",
+  "data-[side=right]:-left-[10px] data-[side=right]:-rotate-90",
+);
+
 interface PopoverProps extends Omit<ComponentPropsWithoutRef<typeof BasePopover.Root>, "children"> {
   /** A single element. It becomes the trigger; no wrapper is added around it. */
   trigger: ReactElement;
@@ -22,6 +31,8 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<typeof BasePopover.
   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. */
@@ -40,7 +51,8 @@ export function Popover({
   children,
   side = "bottom",
   align = "center",
-  sideOffset = SIDE_OFFSET,
+  arrow = false,
+  sideOffset = arrow ? SIDE_OFFSET + ARROW_PX : SIDE_OFFSET,
   container,
   className,
   initialFocus,
@@ -57,6 +69,7 @@ export function Popover({
           align={align}
           sideOffset={sideOffset}
           collisionPadding={VIEWPORT_MARGIN}
+          arrowPadding={ARROW_CORNER_CLEARANCE}
           className="z-200"
         >
           <BasePopover.Popup
@@ -65,6 +78,13 @@ export function Popover({
             data-preview-state={previewState}
             className={cn(popupSurface, "p-3 text-step-11 text-text-1 shadow-popover", className)}
           >
+            {arrow && (
+              <BasePopover.Arrow className={arrowPlace}>
+                <svg width="14" height="8" viewBox="0 0 14 8" aria-hidden="true" className="block">
+                  <path d="M0 8 L7 1 L14 8" className="fill-surface stroke-border-input" />
+                </svg>
+              </BasePopover.Arrow>
+            )}
             {children}
           </BasePopover.Popup>
         </BasePopover.Positioner>

package/src/hooks/domSelectionTimelineMirror.ts

@@ -28,6 +28,7 @@ export function announceTimelineSelection(
   deps: TimelineMirrorDeps,
   group: DomEditSelection[],
   primary: DomEditSelection | null,
+  replaceSet = false,
 ): void {
   const {
     timelineElements,
@@ -72,10 +73,10 @@ export function announceTimelineSelection(
     }
     return;
   }
-  // A late async primary that already belongs to the live set must preserve the
-  // group. A fresh single click does not belong to it, so publish the singleton
-  // first; otherwise `preserveSet` clears the set and sync wipes the canvas.
-  if (group.length > 1 || !getTimelineSelectionSet().has(timelineAnchor)) {
+  // A late async primary inside the live set keeps the group. A click outside it, or a
+  // group the caller states in full (`replaceSet`: shift toggle, marquee, timeline sync), is published
+  // first; otherwise `preserveSet` clears or keeps a stale set and sync undoes the canvas.
+  if (replaceSet || group.length > 1 || !getTimelineSelectionSet().has(timelineAnchor)) {
     setTimelineSelectionSet(publishedMembers);
   }
   setSelectedTimelineElementId(timelineAnchor, { preserveSet: true });

package/src/hooks/domStyleCommit.fonts.test.ts

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+import { expect, it } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import type { ImportedFontAsset } from "../components/editor/fontAssets";
+import { commitDomStyles, type DomStyleCommitContext } from "./domStyleCommit";
+
+const selection = (id: string): DomEditSelection =>
+  ({
+    id,
+    selector: `#${id}`,
+    label: id,
+    tagName: "p",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    textFields: [],
+    inlineStyles: {},
+    computedStyles: {},
+    dataAttributes: {},
+    capabilities: { canSelect: true, canEditStyles: true },
+  }) as unknown as DomEditSelection;
+
+const poppins = (file: string, weight: string): ImportedFontAsset => ({
+  family: "Poppins",
+  path: `assets/fonts/Poppins/${file}`,
+  url: `/preview/assets/fonts/Poppins/${file}`,
+  weight,
+  style: "normal",
+});
+
+it("each font a host hands over is saved as its own face, with the weight and style it draws", async () => {
+  let html = '<html><head></head><body><h1 id="title"></h1><p id="subtitle"></p></body></html>';
+  let listed: ImportedFontAsset | null = null;
+  const context: DomStyleCommitContext = {
+    activeCompPath: "index.html",
+    previewIframeRef: { current: null },
+    showToast: () => undefined,
+    versions: new Map(),
+    resolveImportedFontAsset: () => listed,
+    persistDomEditOperations: (async (
+      _selection: DomEditSelection,
+      _operations: unknown,
+      options?: { prepareContent?: (html: string, sourceFile: string) => string },
+    ) => {
+      html = options?.prepareContent?.(html, "index.html") ?? html;
+    }) as unknown as DomStyleCommitContext["persistDomEditOperations"],
+  };
+  listed = poppins("Poppins-SemiBold.ttf", "600");
+  await commitDomStyles(context, selection("title"), { "font-family": "Poppins" });
+  listed = poppins("Poppins-Regular.ttf", "400");
+  await commitDomStyles(context, selection("subtitle"), { "font-family": "Poppins" });
+  const faces = html.match(/@font-face[^}]*}/g) ?? [];
+  expect(faces).toHaveLength(2);
+  expect(faces[0]).toContain('Poppins-SemiBold.ttf"); font-weight: 600; font-style: normal;');
+  expect(faces[1]).toContain('Poppins-Regular.ttf"); font-weight: 400; font-style: normal;');
+});

package/src/hooks/useAppHotkeys.test.ts

@@ -65,13 +65,14 @@ describe("dispatchPlainKey — select leftward / rightward", () => {
     { ...bgmElement, id: "early", key: "early", start: 0, track: 0 },
     { ...bgmElement, id: "at", key: "at", start: 4, track: 1 },
     { ...bgmElement, id: "late", key: "late", start: 7, track: 2 },
+    { ...bgmElement, id: "gone", key: "gone", start: 0, duration: 2, track: 3 },
   ];
   beforeEach(() => usePlayerStore.setState({ elements: clips, currentTime: 4 }));
 
-  it("[ selects every clip starting before the playhead, on every track", () => {
+  it("[ selects every clip that started before the playhead, crossing clips included", () => {
     const event = press("[");
     dispatchPlainKey(event, "[", callbacks());
-    expect([...usePlayerStore.getState().selectedElementIds]).toEqual(["early"]);
+    expect([...usePlayerStore.getState().selectedElementIds].sort()).toEqual(["early", "gone"]);
     expect(usePlayerStore.getState().selectedElementId).toBe("early");
     expect(event.defaultPrevented).toBe(true);
   });
@@ -84,6 +85,7 @@ describe("dispatchPlainKey — select leftward / rightward", () => {
       expect([...usePlayerStore.getState().selectedElementIds].sort()).toEqual([
         "at",
         "early",
+        "gone",
         "late",
       ]);
     } finally {
@@ -98,11 +100,11 @@ describe("dispatchPlainKey — select leftward / rightward", () => {
     expect(usePlayerStore.getState().activeKeyframePct).toBeNull();
   });
 
-  it("] selects every clip starting at or after the playhead, on every track", () => {
+  it("] selects every clip still running at or after the playhead, crossing clips included", () => {
     dispatchPlainKey(press("]"), "]", callbacks());
     const { selectedElementIds, selectedElementId } = usePlayerStore.getState();
-    expect([...selectedElementIds].sort()).toEqual(["at", "late"]);
-    expect(selectedElementId).toBe("at");
+    expect([...selectedElementIds].sort()).toEqual(["at", "early", "late"]);
+    expect(selectedElementId).toBe("early");
   });
 
   it("selects nothing when no clip is on that side", () => {

package/src/hooks/useClipboard.ts

@@ -11,6 +11,7 @@ import {
   deduplicateIds,
   insertAsSibling,
 } from "../utils/clipboardPayload";
+import { carryLook, renamedIds } from "../utils/clipboardLook";
 import { collectHtmlIds } from "../utils/studioHelpers";
 import { insertTimelineAssetIntoSource } from "../utils/timelineAssetDrop";
 import { extendRootDurationInSource } from "../utils/rootDuration";
@@ -165,15 +166,16 @@ export function pasteElementHtml(
   return insertAsSibling(content, deduped, payload.originSelector, payload.originSelectorIndex);
 }
 
-/** Shared insertion path for paste and duplicate, anchored at the playhead or
- *  the selection's end respectively. Returns the final ids so the caller can
- *  select what it just placed, and the furthest end any clip lands at so the
- *  caller can grow the root composition's duration to cover it. */
+/** Shared insertion path for paste and duplicate, anchored at the playhead or the selection's end. Returns the
+ *  final ids so the caller can select what it placed, and the furthest end any clip lands at so it can grow the
+ *  root duration to cover it. `fromThisFile`: the clips came from `content`, so a renamed copy takes its
+ *  original's look. */
 export function pasteTimelineClips(
   content: string,
   clips: readonly TimelineClipboardClip[],
   anchorTime: number,
   liveElements: readonly TimelineElement[],
+  fromThisFile = false,
 ): { content: string; ids: string[]; requiredEnd: number } {
   const groupMinStart = Math.min(...clips.map((c) => c.start));
   let existingIds = collectHtmlIds(content);
@@ -209,6 +211,11 @@ export function pasteTimelineClips(
       .replace(/data-track-index="[^"]*"/, `data-track-index="${newTrack}"`);
     const withPatched = patchedRootTag + deduped.slice(rootTagEnd + 1);
     result = insertTimelineAssetIntoSource(result, withPatched);
+    if (fromThisFile) {
+      const authored = Number(rootTag.match(/data-start="([^"]*)"/)?.[1]);
+      const authoredStart = Number.isFinite(authored) ? authored : clip.start;
+      result = carryLook(result, renamedIds(reminted, deduped), newStart - authoredStart);
+    }
 
     const id = patchedRootTag.match(ID_ATTR_RE)?.[1];
     if (id) ids.push(id);
@@ -294,7 +301,12 @@ export function useClipboard({
     const sourceFile = targets.elements[0]?.sourceFile || activeCompPath || "index.html";
     return readClips(targets).then((clips) => {
       showToast(clips.length > 1 ? `Copied ${clips.length} clips` : "Copied clip", "info");
-      return { kind: "timeline-clip", clips, sourceFile };
+      return {
+        kind: "timeline-clip",
+        clips,
+        sourceFile,
+        projectId: projectIdRef.current ?? undefined,
+      };
     });
   }, [activeCompPath, findSelectedClips, readClips, showToast]);
 
@@ -364,7 +376,13 @@ export function useClipboard({
       const paste = (originalContent: string) => {
         if (payload.kind !== "timeline-clip") return pasteElementHtml(originalContent, payload);
         const { currentTime, elements } = usePlayerStore.getState();
-        const pasted = pasteTimelineClips(originalContent, payload.clips, currentTime, elements);
+        const pasted = pasteTimelineClips(
+          originalContent,
+          payload.clips,
+          currentTime,
+          elements,
+          payload.sourceFile === targetPath && payload.projectId === pid,
+        );
         pastedIds = pasted.ids;
         // A clip pasted past the current composition end would exist in the
         // file but never appear on the timeline or in playback/export (the
@@ -433,7 +451,7 @@ export function useClipboard({
           .getState()
           .elements.filter((el) => pathOf(el) === targetPath)
           .map((el) => ({ ...el, start: toAuthoredStart(el, el.start) }));
-        const pasted = pasteTimelineClips(originalContent, clips, anchorTime, liveElements);
+        const pasted = pasteTimelineClips(originalContent, clips, anchorTime, liveElements, true);
         ids = pasted.ids;
         return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
       };