@hyperframes/studio 0.8.95 → 0.8.97

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

package/src/hooks/useDomSelection.test.ts

@@ -29,9 +29,13 @@ function renderHarness(
   cleanup: () => void;
   timeline: TimelineSpies;
 } {
+  // Reads back what was last published, as the timeline store does.
+  let publishedSet: ReadonlySet<string> = new Set();
   const timeline: TimelineSpies = {
     setSelectedTimelineElementId: vi.fn(),
-    setTimelineSelectionSet: vi.fn(),
+    setTimelineSelectionSet: vi.fn((ids: Set<string>) => {
+      publishedSet = ids;
+    }),
   };
   const host = document.createElement("div");
   document.body.append(host);
@@ -47,7 +51,7 @@ function renderHarness(
       captionEditMode: false,
       previewIframeRef: { current: null },
       timelineElements: options.timelineElements ?? [],
-      getTimelineSelectionSet: () => new Set(),
+      getTimelineSelectionSet: () => publishedSet,
       setSelectedTimelineElementId: timeline.setSelectedTimelineElementId,
       setTimelineSelectionSet: timeline.setTimelineSelectionSet,
       setRightCollapsed: vi.fn(),
@@ -107,6 +111,17 @@ function timelineElement(domId: string): TimelineElement {
   } as TimelineElement;
 }
 
+function renderCardAndChip() {
+  const card = makeSelection("Card", Object.assign(document.createElement("div"), { id: "card" }));
+  const chip = makeSelection("Chip", Object.assign(document.createElement("div"), { id: "chip" }));
+  document.body.append(card.element, chip.element);
+  const harness = renderHarness(
+    { activeCompPath: "index.html", projectId: "project-1", refreshKey: 0 },
+    { timelineElements: [timelineElement("card"), timelineElement("chip")] },
+  );
+  return { harness, card, chip };
+}
+
 /**
  * A marquee builds the group correctly and then used to lose it: it announced only
  * the primary to the timeline, the timeline is the source of truth for what is
@@ -116,24 +131,9 @@ function timelineElement(domId: string): TimelineElement {
  */
 describe("useDomSelection marquee", () => {
   it("announces every marquee'd element to the timeline, anchored on the primary", () => {
-    const first = document.createElement("div");
-    first.id = "card";
-    const second = document.createElement("div");
-    second.id = "chip";
-    document.body.append(first, second);
-    const harness = renderHarness(
-      { activeCompPath: "index.html", projectId: "project-1", refreshKey: 0 },
-      { timelineElements: [timelineElement("card"), timelineElement("chip")] },
-    );
+    const { harness, card, chip } = renderCardAndChip();
 
-    act(() =>
-      harness
-        .current()
-        .applyMarqueeSelection(
-          [makeSelection("Card", first), makeSelection("Chip", second)],
-          false,
-        ),
-    );
+    act(() => harness.current().applyMarqueeSelection([card, chip], false));
 
     expect(harness.current().domEditGroupSelections).toHaveLength(2);
     expect(harness.timeline.setTimelineSelectionSet).toHaveBeenCalledWith(
@@ -181,20 +181,10 @@ describe("useDomSelection marquee", () => {
  */
 describe("useDomSelection additive", () => {
   it("announces both members when a second element joins the selection", () => {
-    const first = document.createElement("div");
-    first.id = "card";
-    const second = document.createElement("div");
-    second.id = "chip";
-    document.body.append(first, second);
-    const harness = renderHarness(
-      { activeCompPath: "index.html", projectId: "project-1", refreshKey: 0 },
-      { timelineElements: [timelineElement("card"), timelineElement("chip")] },
-    );
+    const { harness, card, chip } = renderCardAndChip();
 
-    act(() => harness.current().applyDomSelection(makeSelection("Card", first)));
-    act(() =>
-      harness.current().applyDomSelection(makeSelection("Chip", second), { additive: true }),
-    );
+    act(() => harness.current().applyDomSelection(card));
+    act(() => harness.current().applyDomSelection(chip, { additive: true }));
 
     expect(harness.current().domEditGroupSelections).toHaveLength(2);
     expect(harness.timeline.setTimelineSelectionSet).toHaveBeenLastCalledWith(
@@ -205,6 +195,40 @@ describe("useDomSelection additive", () => {
     });
     harness.cleanup();
   });
+
+  // The timeline syncs its set back onto the canvas, so a set left at two re-adds the member.
+  it.each([
+    ["shift+click removes a member", "toggle"],
+    ["a marquee catches one member of a live group", "marquee"],
+  ] as const)("publishes the smaller set when %s", (_, shrink) => {
+    const { harness, card, chip } = renderCardAndChip();
+
+    act(() => harness.current().applyMarqueeSelection([card, chip], false));
+    act(() =>
+      shrink === "toggle"
+        ? harness.current().applyDomSelection(chip, { additive: true })
+        : harness.current().applyMarqueeSelection([card], false),
+    );
+
+    expect(harness.current().domEditGroupSelections).toHaveLength(1);
+    expect(harness.timeline.setTimelineSelectionSet).toHaveBeenLastCalledWith(new Set(["card"]));
+    expect(harness.timeline.setSelectedTimelineElementId).toHaveBeenLastCalledWith("card", {
+      preserveSet: true,
+    });
+    harness.cleanup();
+  });
+
+  it("keeps the live set when a single member is re-announced", () => {
+    const { harness, card, chip } = renderCardAndChip();
+
+    act(() => harness.current().applyMarqueeSelection([card, chip], false));
+    act(() => harness.current().applyDomSelection(chip));
+
+    expect(harness.timeline.setTimelineSelectionSet).toHaveBeenLastCalledWith(
+      new Set(["card", "chip"]),
+    );
+    harness.cleanup();
+  });
 });
 
 describe("useDomSelection", () => {

package/src/hooks/useDomSelection.ts

@@ -83,7 +83,7 @@ export function useDomSelection({
   // ── Callbacks ──
 
   const announceTimelineSelection = useCallback(
-    (group: DomEditSelection[], primary: DomEditSelection | null) =>
+    (group: DomEditSelection[], primary: DomEditSelection | null, replaceSet?: boolean) =>
       announceSelectionToTimeline(
         {
           timelineElements,
@@ -93,6 +93,7 @@ export function useDomSelection({
         },
         group,
         primary,
+        replaceSet,
       ),
     [
       getTimelineSelectionSet,
@@ -179,7 +180,7 @@ export function useDomSelection({
             setRightPanelTab("design");
           }
         }
-        announceTimelineSelection(nextGroup, nextSelection);
+        announceTimelineSelection(nextGroup, nextSelection, isAdditiveSelection);
         return;
       }
 
@@ -510,7 +511,7 @@ export function useDomSelection({
       domEditGroupSelectionsRef.current = nextGroup;
       setDomEditSelection(nextSelection);
       setDomEditGroupSelections(nextGroup);
-      announceTimelineSelection(nextGroup, nextSelection);
+      announceTimelineSelection(nextGroup, nextSelection, true);
     },
     [applyDomSelection, announceTimelineSelection],
   );

package/src/player/components/BeatStrip.tsx

@@ -12,6 +12,7 @@ import {
   resolveTimelineAutoScrollLoopAction,
 } from "./timelineEditing";
 import { getTimelineElementIndexes } from "../lib/timelineElementIndexes";
+import { useTimelineReadOnlyPress } from "./timelineReadOnly";
 
 export const BEAT_BAND_H = 14; // dark band height at top of track
 const BEAT_HIT_W = 24; // grab width per beat (px) — ≥24px pointer target
@@ -88,7 +89,7 @@ function claimBeatDrag(pointerId?: number): BeatDragActor | null {
   return actor;
 }
 
-function cancelBeatDrag(): void {
+export function cancelBeatDrag(): void {
   claimBeatDrag();
 }
 
@@ -377,6 +378,7 @@ export const BeatStrip = memo(function BeatStrip({
   );
   const sessionEpoch = usePlayerStore((state) => state.timelineSessionEpoch);
   const projectId = usePlayerStore((state) => state.timelineProjectId);
+  const readOnlyPress = useTimelineReadOnlyPress();
 
   if (!beatTimes || beatsTooDense(beatTimes, pps)) return null;
   const activeBeatIndex = activeActor
@@ -420,7 +422,7 @@ export const BeatStrip = memo(function BeatStrip({
               top: 0,
               width: BEAT_HIT_W,
               height: BEAT_BAND_H,
-              cursor: "ew-resize",
+              cursor: readOnlyPress ? "default" : "ew-resize",
               pointerEvents: "auto",
               touchAction: "none",
             }}
@@ -429,13 +431,14 @@ export const BeatStrip = memo(function BeatStrip({
               // selection (which otherwise "selects" the whole panel mid-drag).
               e.preventDefault();
               e.stopPropagation();
+              if (readOnlyPress) return readOnlyPress();
               // ⌥ starts no drag: the delete lands on release below, so a
               // slipped ⌥-drag abandons instead of destroying the beat.
               if (e.altKey) return;
               beginBeatDrag(e, t, pps);
             }}
             onClick={(e) => {
-              if (!e.altKey) return;
+              if (!e.altKey || readOnlyPress) return;
               // ⌥-click deletes. Deliberately NOT double-click: a stuttered drag
               // attempt reads as a double-click and would destroy the beat.
               e.stopPropagation();