@hyperframes/studio 0.8.49 → 0.8.50

package/src/player/lib/timelineDOM.test.ts

@@ -3,7 +3,6 @@ import { describe, expect, it } from "vitest";
 import {
   createTimelineElementFromManifestClip,
   parseTimelineFromDOM,
-  createImplicitTimelineLayersFromDOM,
   mergeTimelineElementsPreservingDowngrades,
 } from "./timelineDOM";
 import { isTimelineIgnoredElement } from "./timelineElementHelpers";
@@ -302,19 +301,6 @@ describe("createTimelineElementFromManifestClip — source-scoped selector ident
 // implicit-layer fallback happily gave it a track. Draggable and trimmable, and
 // writing timing onto a bus means nothing.
 describe("<hf-audio-group> is not a timeline layer", () => {
-  it("gets no implicit row of its own", () => {
-    const doc = makeDoc(`
-      <div data-composition-id="root">
-        <audio id="voice-1" data-start="0" data-duration="6" data-audio-group="voiceover"></audio>
-        <hf-audio-group id="voiceover" data-label="Voiceover"></hf-audio-group>
-      </div>
-    `);
-
-    const implicit = createImplicitTimelineLayersFromDOM(doc, 12, []);
-
-    expect(implicit.map((el) => el.domId)).not.toContain("voiceover");
-  });
-
   it("is excluded by the shared ignore predicate", () => {
     const doc = makeDoc(`<hf-audio-group id="vo"></hf-audio-group><div id="panel"></div>`);
     expect(isTimelineIgnoredElement(doc.getElementById("vo") as Element)).toBe(true);
@@ -322,72 +308,6 @@ describe("<hf-audio-group> is not a timeline layer", () => {
   });
 });
 
-describe("createImplicitTimelineLayersFromDOM — hfId from data-hf-id", () => {
-  it("uses the runtime root paint scope for implicit siblings of manifest clips", () => {
-    const doc = makeDoc(`
-      <div data-composition-id="root">
-        <div id="timed" data-start="0" data-duration="5"></div>
-        <div id="implicit"></div>
-      </div>
-    `);
-    const timedHost = doc.getElementById("timed");
-    const timed = createTimelineElementFromManifestClip({
-      clip: {
-        id: "timed",
-        label: "Timed",
-        start: 0,
-        duration: 5,
-        track: 0,
-        stackingContextId: "css:root",
-        kind: "element",
-        tagName: "div",
-        compositionId: null,
-        parentCompositionId: null,
-        compositionSrc: null,
-        assetUrl: null,
-      },
-      fallbackIndex: 0,
-      doc,
-      hostEl: timedHost,
-    });
-    const implicit = createImplicitTimelineLayersFromDOM(doc, 5, [timed])[0];
-
-    expect(implicit?.stackingContextId).toBe("css:root");
-    expect(implicit?.stackingContextId).toBe(timed.stackingContextId);
-  });
-
-  it("harvests hfId from an implicit layer child that has data-hf-id", () => {
-    const doc = makeDoc(`
-      <div data-composition-id="root">
-        <div id="layer" class="clip" data-hf-id="hf-xyz789"></div>
-      </div>
-    `);
-
-    const layers = createImplicitTimelineLayersFromDOM(doc, 10);
-    const layer = layers.find((el) => el.domId === "layer");
-
-    expect(layer).toBeDefined();
-    expect(layer?.hfId).toBe("hf-xyz789");
-  });
-
-  it("ignores runtime-owned color grading canvases as implicit layers", () => {
-    const doc = makeDoc(`
-      <div data-composition-id="root" data-duration="5">
-        <img id="photo" class="clip" data-start="0" data-duration="5" />
-        <canvas
-          class="__hf_color_grading_canvas__"
-          data-hf-color-grading-canvas="true"
-          data-hyperframes-ignore
-        ></canvas>
-      </div>
-    `);
-
-    const layers = createImplicitTimelineLayersFromDOM(doc, 5);
-
-    expect(layers).toEqual([]);
-  });
-});
-
 describe("mergeTimelineElementsPreservingDowngrades — genuine removal vs transient downgrade", () => {
   it("drops a removed TOP-LEVEL element (undo of a split) instead of ghosting it", () => {
     const current = [el("a"), el("a-split")]; // post-split store: original + clone

package/src/player/lib/timelineDOM.ts

@@ -17,8 +17,6 @@ import {
   resolveMediaElement,
   applyMediaMetadataFromElement,
   getTimelineElementDisplayLabel,
-  getImplicitTimelineLayerLabel,
-  isImplicitTimelineLayerCandidate,
   getTimelineElementSelector,
   getTimelineElementSourceFile,
   getTimelineElementSelectorIndex,
@@ -203,63 +201,6 @@ export function createTimelineElementFromManifestClip(params: {
   return entry;
 }
 
-export function createImplicitTimelineLayersFromDOM(
-  doc: Document,
-  rootDuration: number,
-  existingElements: readonly TimelineElement[] = [],
-): TimelineElement[] {
-  if (!Number.isFinite(rootDuration) || rootDuration <= 0) return [];
-  const rootComp = doc.querySelector("[data-composition-id]");
-  if (!rootComp) return [];
-
-  const existingKeys = new Set(existingElements.map(getTimelineElementIdentity));
-  const maxTrack = existingElements.reduce(
-    (max, element) => Math.max(max, Number.isFinite(element.track) ? element.track : 0),
-    -1,
-  );
-  const layers: TimelineElement[] = [];
-
-  for (const child of Array.from(rootComp.children)) {
-    if (!isImplicitTimelineLayerCandidate(rootComp, child)) continue;
-
-    const selector = getTimelineElementSelector(child);
-    if (!selector) continue;
-    const selectorIndex = getTimelineElementSelectorIndex(doc, child, selector);
-    const sourceFile = getTimelineElementSourceFile(child);
-    const label = getImplicitTimelineLayerLabel(child);
-    const identity = buildTimelineElementIdentity({
-      preferredId: child.id || null,
-      label,
-      fallbackIndex: existingElements.length + layers.length,
-      domId: child.id || undefined,
-      selector,
-      selectorIndex,
-      sourceFile,
-    });
-    if (existingKeys.has(identity.key) || existingKeys.has(identity.id)) continue;
-
-    layers.push({
-      domId: child.id || undefined,
-      hfId: child.getAttribute("data-hf-id") || undefined,
-      zIndex: readTimelineElementZIndex(child),
-      duration: rootDuration,
-      id: identity.id,
-      key: identity.key,
-      label,
-      selector,
-      selectorIndex,
-      sourceFile,
-      stackingContextId: resolveCssStackingContextId(child),
-      start: 0,
-      tag: child.tagName.toLowerCase(),
-      timingSource: "implicit",
-      track: maxTrack + 1 + layers.length,
-    });
-  }
-
-  return layers;
-}
-
 /**
  * Parse [data-start] elements from a Document into TimelineElement[].
  * Shared helper — used by onIframeLoad fallback, handleMessage, and enrichMissingCompositions.
@@ -330,7 +271,6 @@ export function parseTimelineFromDOM(doc: Document, rootDuration: number): Timel
       selectorIndex,
       sourceFile,
       stackingContextId: resolveCssStackingContextId(el),
-      timingSource: "authored",
       zIndex: readTimelineElementZIndex(el),
     };
 
@@ -399,7 +339,7 @@ export function parseTimelineFromDOM(doc: Document, rootDuration: number): Timel
     els.push(entry);
   });
 
-  return [...els, ...createImplicitTimelineLayersFromDOM(doc, rootDuration, els)];
+  return els;
 }
 
 // ---------------------------------------------------------------------------

package/src/player/lib/timelineElementHelpers.ts

@@ -2,7 +2,7 @@
  * Low-level helpers for building and identifying TimelineElement objects.
  *
  * Covers: duration reading, media-element metadata extraction, selector/key/
- * identity builders, DOM node lookup, and implicit layer detection. These are
+ * identity builders, and DOM node lookup. These are
  * intentionally dependency-free (no store, no hooks) so they can be used in
  * both the React hook and test environments.
  */
@@ -82,13 +82,7 @@ function normalizePlaybackRate(raw: number): number {
 }
 
 export function isTimelineIgnoredElement(el: Element): boolean {
-  // An `<hf-audio-group>` is a mixer bus, not a clip: it carries the group's
-  // label, fader, mute and FX chain, has no timing of its own, and is drawn as
-  // a GROUP ROW by the group derivation. Left in, the implicit-layer fallback
-  // also gave it an ordinary full-duration track — so a grouped composition
-  // showed "Voiceover • 0.0s – 12.0s" as a phantom clip directly above the real
-  // group header. Harmless-looking, but that row is draggable and trimmable,
-  // and writing timing onto the bus is meaningless.
+  // An `<hf-audio-group>` is a mixer bus with no timing of its own, drawn as a group row, never a clip.
   if (el.tagName.toLowerCase() === HF_AUDIO_GROUP_TAG) return true;
   return Boolean(
     el.closest(
@@ -223,37 +217,6 @@ export function getTimelineElementDisplayLabel(input: {
   return tag ? `${tag} clip` : "Timeline clip";
 }
 
-const IMPLICIT_TIMELINE_LAYER_SKIP_TAGS = new Set([
-  "base",
-  "link",
-  "meta",
-  "noscript",
-  "script",
-  "style",
-  "template",
-]);
-
-function humanizeTimelineIdentifier(value: string): string {
-  return value
-    .trim()
-    .replace(/[_-]+/g, " ")
-    .replace(/\s+/g, " ")
-    .replace(/\b\w/g, (match) => match.toUpperCase());
-}
-
-export function getImplicitTimelineLayerLabel(el: HTMLElement): string {
-  const explicitLabel =
-    el.getAttribute("data-timeline-label") ??
-    el.getAttribute("data-label") ??
-    el.getAttribute("aria-label");
-  if (explicitLabel?.trim()) return explicitLabel.trim();
-  if (el.id.trim()) return humanizeTimelineIdentifier(el.id);
-  const classes = el.className.split(/\s+/).filter(Boolean);
-  const className = classes.find((value) => value !== "clip") ?? classes[0];
-  if (className) return humanizeTimelineIdentifier(className);
-  return getTimelineElementDisplayLabel({ tag: el.tagName });
-}
-
 // ---------------------------------------------------------------------------
 // Selector / identity / key builders
 // ---------------------------------------------------------------------------
@@ -475,17 +438,3 @@ export function createTimelineDomNodeResolver(doc: Document) {
     return node;
   };
 }
-
-// ---------------------------------------------------------------------------
-// Implicit layer detection
-// ---------------------------------------------------------------------------
-
-export function isImplicitTimelineLayerCandidate(root: Element, el: Element): el is HTMLElement {
-  if (!isHtmlElement(el)) return false;
-  if (isTimelineIgnoredElement(el)) return false;
-  if (el.parentElement !== root) return false;
-  const tagName = el.tagName.toLowerCase();
-  if (IMPLICIT_TIMELINE_LAYER_SKIP_TAGS.has(tagName)) return false;
-  if (el.hasAttribute("data-start") || el.hasAttribute("data-track-index")) return false;
-  return Boolean(getTimelineElementSelector(el));
-}

package/src/player/store/playerStore.ts

@@ -200,6 +200,8 @@ interface PlayerState extends PlayerStoreSlices {
   clipManifest: ClipManifestClip[] | null;
   setClipManifest: (clips: ClipManifestClip[] | null) => void;
   clipParentMap: Map<string, string>;
+  topLevelIds: ReadonlySet<string> | null;
+  setTopLevelIds: (ids: ReadonlySet<string> | null) => void;
   setClipParentMap: (map: Map<string, string>) => void;
   /**
    * Sub-composition DOM descendants (groups + their children) that have no
@@ -288,6 +290,7 @@ export function createTimelineResetState() {
     beatPersist: null,
     clipManifest: null,
     clipParentMap: new Map<string, string>(),
+    topLevelIds: null,
     domClipChildren: [],
     subCompositionHostState: new Map<string, SubCompositionHostState>(),
   };
@@ -434,6 +437,8 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   setClipManifest: (clips) => set({ clipManifest: clips }),
   clipParentMap: new Map(),
   setClipParentMap: (map) => set({ clipParentMap: map }),
+  topLevelIds: null,
+  setTopLevelIds: (ids) => set({ topLevelIds: ids }),
   domClipChildren: [],
   setDomClipChildren: (children) => set({ domClipChildren: children }),
   subCompositionHostState: new Map(),

package/src/player/store/timelineElement.ts

@@ -59,8 +59,6 @@ export interface TimelineElement {
   automation?: string;
   /** Path from data-composition-src — identifies sub-composition elements */
   compositionSrc?: string;
-  /** Whether this row came from authored clip timing or Studio's full-duration layer fallback. */
-  timingSource?: "authored" | "implicit";
   /** Set by data-timeline-locked on the host element — disables move and trim in Studio. */
   timelineLocked?: boolean;
   /** Set by data-hidden on the host element — hides the clip in preview and render. */
@@ -79,7 +77,7 @@ export interface TimelineElement {
   audioGroupFxChain?: string;
   audioGroupAutomation?: string;
   /**
-   * Set by useExpandedTimelineElements on an inline-expanded sub-composition
+   * Set by useTimelineRowElements on an inline-expanded sub-composition
    * child: the absolute master-timeline start of the sub-comp host the child
    * lives in. Presence marks the element as expanded; edits subtract it to get
    * the child's local (sourceFile-relative) time. Works at any nesting depth.

package/src/shims/canvasBrowserStub.js

@@ -0,0 +1,50 @@
+/**
+ * Browser stub for the Node-only `canvas` package.
+ *
+ * linkedom's `HTMLCanvasElement` constructor calls `createCanvas(300, 150)`
+ * (300x150 being the HTML canvas default size). linkedom guards that import in
+ * a try/catch: the try requires the native `canvas` package, and the catch
+ * falls back to linkedom's own bundled canvas shim.
+ *
+ * That guard only works with a *runtime* require. Vite resolves the specifier
+ * statically, so the bundled form is a plain assignment that cannot throw, the
+ * catch never runs, and `createCanvas` lands `undefined`. Parsing any `<canvas>`
+ * tag then throws inside `openComposition`, Studio loses its SDK session for the
+ * whole composition, and every edit silently falls back to the server path — the
+ * resolver shadow does not run either, so it was invisible until
+ * `studio:sdk_session_unavailable` shipped in v0.8.47.
+ *
+ * Production telemetry over the 72h after the flip: 1065 of 1544 session-open
+ * failures were this crash, across a large share of 197 users. Canvas is common
+ * in compositions (Three.js, shaders, particle effects, charts).
+ *
+ * Aliasing `canvas` to this file makes the browser build resolve to a
+ * measurement-only canvas, which is all linkedom's static parse needs — nothing
+ * in the SDK rasterizes through it. It mirrors linkedom's own
+ * `commonjs/canvas-shim.cjs`, reimplemented here because linkedom's `exports`
+ * map does not expose that file.
+ */
+
+class BrowserCanvasStub {
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+  }
+  /** linkedom only ever needs the element to exist; nothing draws through it. */
+  getContext() {
+    return null;
+  }
+  toDataURL() {
+    return "";
+  }
+}
+
+export function createCanvas(width, height) {
+  return new BrowserCanvasStub(width, height);
+}
+
+// linkedom consumes this as a DEFAULT import — `import Canvas from
+// '../../commonjs/canvas.cjs'` then `const {createCanvas} = Canvas` — so the
+// default export is the load-bearing one; the named export above is interop
+// belt-and-braces.
+export default { createCanvas };

package/src/utils/clipboardPayload.test.ts

@@ -33,10 +33,41 @@ describe("deduplicateIds", () => {
 });
 
 describe("serializeClipboardPayload / deserializeClipboardPayload", () => {
-  it("round-trips a timeline clip payload", () => {
+  it("round-trips a single-clip timeline payload", () => {
     const payload: ClipboardPayload = {
       kind: "timeline-clip",
-      html: '<img id="photo" src="a.png" data-start="1" data-duration="3" />',
+      clips: [
+        {
+          html: '<img id="photo" src="a.png" data-start="1" data-duration="3" />',
+          start: 1,
+          duration: 3,
+          track: 0,
+        },
+      ],
+      sourceFile: "index.html",
+    };
+    const json = serializeClipboardPayload(payload);
+    const parsed = deserializeClipboardPayload(json);
+    expect(parsed).toEqual(payload);
+  });
+
+  it("round-trips a group timeline-clip payload", () => {
+    const payload: ClipboardPayload = {
+      kind: "timeline-clip",
+      clips: [
+        {
+          html: '<img id="a" data-start="1" data-duration="0.5" />',
+          start: 1,
+          duration: 0.5,
+          track: 0,
+        },
+        {
+          html: '<img id="b" data-start="2" data-duration="0.5" />',
+          start: 2,
+          duration: 0.5,
+          track: 1,
+        },
+      ],
       sourceFile: "index.html",
     };
     const json = serializeClipboardPayload(payload);
@@ -59,4 +90,13 @@ describe("serializeClipboardPayload / deserializeClipboardPayload", () => {
     expect(deserializeClipboardPayload("not json")).toBeNull();
     expect(deserializeClipboardPayload('{"kind":"unknown"}')).toBeNull();
   });
+
+  it("returns null for a timeline-clip payload with no clips", () => {
+    const json = serializeClipboardPayload({
+      kind: "timeline-clip",
+      clips: [],
+      sourceFile: "index.html",
+    });
+    expect(deserializeClipboardPayload(json)).toBeNull();
+  });
 });

package/src/utils/clipboardPayload.ts

@@ -2,35 +2,35 @@ import { COMPOSITION_ROOT_OPEN_TAG_RE } from "./compositionPatterns";
 
 const CLIPBOARD_MARKER = "hyperframes-clipboard:v1";
 
-export interface ClipboardPayload {
-  kind: "timeline-clip" | "dom-element";
+/** One clip's copied markup plus the original placement needed to preserve
+ *  relative offsets and tracks across a group paste. */
+export interface TimelineClipboardClip {
   html: string;
-  sourceFile: string;
-  originSelector?: string;
-  originSelectorIndex?: number;
+  start: number;
+  duration: number;
+  track: number;
 }
 
-interface SerializedPayload {
-  _marker: string;
-  kind: "timeline-clip" | "dom-element";
-  html: string;
-  sourceFile: string;
-  originSelector?: string;
-  originSelectorIndex?: number;
-}
+export type ClipboardPayload =
+  | { kind: "timeline-clip"; clips: TimelineClipboardClip[]; sourceFile: string }
+  | {
+      kind: "dom-element";
+      html: string;
+      sourceFile: string;
+      originSelector?: string;
+      originSelectorIndex?: number;
+    };
+
+type SerializedPayload = { _marker: string } & ClipboardPayload;
 
 export function serializeClipboardPayload(payload: ClipboardPayload): string {
-  const data: SerializedPayload = {
-    _marker: CLIPBOARD_MARKER,
-    kind: payload.kind,
-    html: payload.html,
-    sourceFile: payload.sourceFile,
-    originSelector: payload.originSelector,
-    originSelectorIndex: payload.originSelectorIndex,
-  };
+  const data: SerializedPayload = { _marker: CLIPBOARD_MARKER, ...payload };
   return JSON.stringify(data);
 }
 
+// Each branch validates one wire shape at the trust boundary; splitting further
+// would fragment one parse into partial validators with no independent reuse.
+// fallow-ignore-next-line complexity
 export function deserializeClipboardPayload(json: string): ClipboardPayload | null {
   let parsed: unknown;
   try {
@@ -41,16 +41,35 @@ export function deserializeClipboardPayload(json: string): ClipboardPayload | nu
   if (!parsed || typeof parsed !== "object") return null;
   const obj = parsed as Record<string, unknown>;
   if (obj._marker !== CLIPBOARD_MARKER) return null;
-  if (obj.kind !== "timeline-clip" && obj.kind !== "dom-element") return null;
-  if (typeof obj.html !== "string" || typeof obj.sourceFile !== "string") return null;
-  return {
-    kind: obj.kind,
-    html: obj.html,
-    sourceFile: obj.sourceFile,
-    originSelector: typeof obj.originSelector === "string" ? obj.originSelector : undefined,
-    originSelectorIndex:
-      typeof obj.originSelectorIndex === "number" ? obj.originSelectorIndex : undefined,
-  };
+  if (typeof obj.sourceFile !== "string") return null;
+  if (obj.kind === "timeline-clip") {
+    if (!Array.isArray(obj.clips)) return null;
+    const clips = obj.clips.filter((c): c is TimelineClipboardClip => {
+      const clip = c as Partial<TimelineClipboardClip> | null;
+      return (
+        !!clip &&
+        typeof clip === "object" &&
+        typeof clip.html === "string" &&
+        typeof clip.start === "number" &&
+        typeof clip.duration === "number" &&
+        typeof clip.track === "number"
+      );
+    });
+    if (clips.length === 0) return null;
+    return { kind: "timeline-clip", clips, sourceFile: obj.sourceFile };
+  }
+  if (obj.kind === "dom-element") {
+    if (typeof obj.html !== "string") return null;
+    return {
+      kind: "dom-element",
+      html: obj.html,
+      sourceFile: obj.sourceFile,
+      originSelector: typeof obj.originSelector === "string" ? obj.originSelector : undefined,
+      originSelectorIndex:
+        typeof obj.originSelectorIndex === "number" ? obj.originSelectorIndex : undefined,
+    };
+  }
+  return null;
 }
 
 /**
@@ -59,6 +78,7 @@ export function deserializeClipboardPayload(json: string): ClipboardPayload | nu
  * the composition root if the selector doesn't match — so paste never silently
  * drops the content.
  */
+// fallow-ignore-next-line complexity
 export function insertAsSibling(
   source: string,
   newHtml: string,
@@ -110,6 +130,7 @@ export function insertAsSibling(
   return source + newHtml;
 }
 
+// fallow-ignore-next-line complexity
 function findClosingTagPosition(html: string, openTagStart: number): number {
   // Find the end of the opening tag
   const openTagEnd = html.indexOf(">", openTagStart);
@@ -156,9 +177,13 @@ function findClosingTagPosition(html: string, openTagStart: number): number {
   return -1;
 }
 
+/** An `id="..."` attribute, not `data-id="..."` or similar — only matches
+ *  when preceded by whitespace, the way every generated attribute is. */
+export const ID_ATTR_RE = /(?<=\s)id="([^"]+)"/;
+
 export function deduplicateIds(html: string, existingIds: string[]): string {
   const existingSet = new Set(existingIds);
-  return html.replace(/(?<=\s)id="([^"]+)"/g, (full, id: string) => {
+  return html.replace(new RegExp(ID_ATTR_RE.source, "g"), (full, id: string) => {
     if (!existingSet.has(id)) return full;
     let counter = 2;
     while (existingSet.has(`${id}-${counter}`)) counter++;

package/src/utils/previewSafeMargins.test.ts

@@ -0,0 +1,34 @@
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+import {
+  ACTION_SAFE_PERCENT,
+  SAFE_BOX_PERCENTS,
+  TITLE_SAFE_PERCENT,
+  safeBoxInsetPercent,
+} from "./previewSafeMargins";
+
+const SKILL_PATH = join(import.meta.dirname, "../../../../skills/hyperframes-studio/SKILL.md");
+
+describe("safe boxes", () => {
+  it("are the 90% and 80% boxes, inset 5% and 10% from every edge", () => {
+    expect(SAFE_BOX_PERCENTS).toEqual([90, 80]);
+    expect(SAFE_BOX_PERCENTS.map(safeBoxInsetPercent)).toEqual([5, 10]);
+  });
+});
+
+// Skipped until the hyperframes-studio skill exists on this branch.
+describe.runIf(existsSync(SKILL_PATH))("hyperframes-studio skill matches the constants", () => {
+  it("has a safe-margins line naming both percentages", () => {
+    const skill = readFileSync(SKILL_PATH, "utf8");
+    const line = skill
+      .split("\n")
+      .find(
+        (l) =>
+          /\bsafe margins?\b/i.test(l) &&
+          l.includes(`${ACTION_SAFE_PERCENT}%`) &&
+          l.includes(`${TITLE_SAFE_PERCENT}%`),
+      );
+    expect(line).toBeDefined();
+  });
+});

package/src/utils/previewSafeMargins.ts

@@ -0,0 +1,10 @@
+// Adobe Premiere default: action-safe and title-safe margins are 10% and 20% total (5% and 10% per edge).
+export const ACTION_SAFE_PERCENT = 90;
+export const TITLE_SAFE_PERCENT = 80;
+
+export const SAFE_BOX_PERCENTS = [ACTION_SAFE_PERCENT, TITLE_SAFE_PERCENT] as const;
+
+/** Inset from each frame edge, as a percent of the frame. */
+export function safeBoxInsetPercent(boxPercent: number): number {
+  return (100 - boxPercent) / 2;
+}

package/src/utils/razorSplitTransaction.test.ts

@@ -10,7 +10,6 @@ const element = (over: Partial<TimelineElement> = {}): TimelineElement => ({
   start: 0,
   duration: 4,
   track: 0,
-  timingSource: "authored",
   sourceFile: "index.html",
   ...over,
 });