@hyperframes/studio 0.8.107 → 0.8.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.107",
+  "version": "0.8.108",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/parsers": "0.8.107",
-    "@hyperframes/core": "0.8.107",
-    "@hyperframes/sdk": "0.8.107",
-    "@hyperframes/shader-transitions": "0.8.107",
-    "@hyperframes/studio-server": "0.8.107",
-    "@hyperframes/player": "0.8.107"
+    "@hyperframes/core": "0.8.108",
+    "@hyperframes/parsers": "0.8.108",
+    "@hyperframes/player": "0.8.108",
+    "@hyperframes/sdk": "0.8.108",
+    "@hyperframes/studio-server": "0.8.108",
+    "@hyperframes/shader-transitions": "0.8.108"
   },
   "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.107"
+    "@hyperframes/producer": "0.8.108"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -552,6 +552,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
                   handleTimelineElementSplit={timelineEditing.handleTimelineElementSplit}
                   handleRazorSplit={timelineEditing.handleRazorSplit}
                   handleRazorSplitAll={timelineEditing.handleRazorSplitAll}
+                  handleFreezeFrame={timelineEditing.handleFreezeFrame}
                   onCopyClip={handleCopy}
                   onPasteClip={handlePaste}
                   onDuplicateClip={handleDuplicate}

package/src/components/EditorShell.tsx

@@ -103,6 +103,7 @@ export function EditorShell({
   handleTimelineElementSplit,
   handleRazorSplit,
   handleRazorSplitAll,
+  handleFreezeFrame,
   onCopyClip,
   onPasteClip,
   onDuplicateClip,
@@ -163,6 +164,7 @@ export function EditorShell({
     handleTimelineElementSplit,
     handleRazorSplit,
     handleRazorSplitAll,
+    handleFreezeFrame,
   });
 
   return (

package/src/components/editor/CropPresetBar.tsx

@@ -0,0 +1,69 @@
+import { useEffect } from "react";
+import type { ClipPathInsetSides } from "./clipPathHelpers";
+import { CROP_ASPECT_PRESETS, centredCropInsets } from "./cropPresets";
+
+interface CropPresetBarProps {
+  left: number;
+  top: number;
+  elementWidth: number;
+  elementHeight: number;
+  /** Centred insets for a ratio, or `null` to remove the crop. */
+  onApply: (insets: ClipPathInsetSides | null) => void;
+  onDone: () => void;
+}
+
+const CHIP =
+  "rounded-sm border border-white/20 px-1.5 py-0.5 text-[10px] text-white/85 hover:bg-white/10";
+
+/** Free · aspect presets · Reset · Done, floating above the element being cropped. */
+export function CropPresetBar({
+  left,
+  top,
+  elementWidth,
+  elementHeight,
+  onApply,
+  onDone,
+}: CropPresetBarProps) {
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onDone();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [onDone]);
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Crop presets"
+      data-dom-edit-crop-bar="true"
+      className="pointer-events-auto absolute z-20 flex gap-1 rounded-md border border-white/15 bg-neutral-900/95 p-1 shadow-lg"
+      style={{ left, top: Math.max(4, top - 34), transform: "translateX(-50%)" }}
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <button type="button" className={CHIP} title="Drag the edges freely">
+        Free
+      </button>
+      {CROP_ASPECT_PRESETS.map((preset) => (
+        <button
+          key={preset.label}
+          type="button"
+          className={CHIP}
+          onClick={() => onApply(centredCropInsets(elementWidth, elementHeight, preset.ratio))}
+        >
+          {preset.label}
+        </button>
+      ))}
+      <button type="button" className={CHIP} onClick={() => onApply(null)}>
+        Reset
+      </button>
+      <button
+        type="button"
+        className="rounded-sm border border-studio-accent bg-studio-accent px-1.5 py-0.5 text-[10px] font-semibold text-black"
+        onClick={onDone}
+      >
+        Done
+      </button>
+    </div>
+  );
+}

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

@@ -6,6 +6,7 @@ import type { DomEditSelection } from "./domEditing";
 import type { OverlayRect } from "./domEditOverlayGeometry";
 import { DomEditCropHandles } from "./DomEditCropHandles";
 import { isElementCropLifted } from "./domEditOverlayCrop";
+import { useCropPresetBarStore } from "./cropPresetStore";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -272,3 +273,46 @@ describe("DomEditCropHandles leaves the corner resize dots free", () => {
     expect(handles().map((h) => h.label)).toEqual(["Crop top", "Crop bottom"]);
   });
 });
+
+describe("DomEditCropHandles preset bar", () => {
+  const click = (label: string) => {
+    const button = Array.from(document.querySelectorAll<HTMLButtonElement>("button")).find(
+      (b) => b.textContent === label,
+    );
+    act(() => button?.click());
+  };
+
+  afterEach(() => useCropPresetBarStore.getState().close());
+
+  it("shows only for the clip the menu opened it for", () => {
+    const a = makeEl("a", "");
+    useCropPresetBarStore.getState().open({ id: "other" });
+    render(a);
+    expect(document.querySelector("[data-dom-edit-crop-bar]")).toBeNull();
+  });
+
+  it("commits a centred 1:1 crop, then Reset removes the clip-path", async () => {
+    const a = makeEl("a", "");
+    const commits: string[] = [];
+    useCropPresetBarStore.getState().open({ id: "a" });
+    const { root } = render(a, (_property, value) => {
+      commits.push(value);
+    });
+    click("1:1");
+    await act(async () => {});
+    expect(commits[0]).toBe("inset(0px 50px 0px 50px)");
+    click("Reset");
+    await act(async () => {});
+    expect(commits[1]).toBe("");
+    act(() => root.unmount());
+    expect(a.style.getPropertyValue("clip-path")).toBe("");
+  });
+
+  it("Done closes the bar", () => {
+    const a = makeEl("a", "");
+    useCropPresetBarStore.getState().open({ id: "a" });
+    render(a);
+    click("Done");
+    expect(useCropPresetBarStore.getState().openFor).toBeNull();
+  });
+});

package/src/components/editor/DomEditCropHandles.tsx

@@ -15,6 +15,8 @@ import {
 } from "./domEditOverlayCrop";
 import { buildInsetClipPathSides, type ClipPathInsetSides } from "./clipPathHelpers";
 import { readCropFollowingResize } from "./cropResize";
+import { isCropBarTarget, useCropPresetBarStore } from "./cropPresetStore";
+import { CropPresetBar } from "./CropPresetBar";
 
 interface CropGestureState {
   edge: CropEdge | "move";
@@ -119,6 +121,9 @@ export function DomEditCropHandles({
     return { element, croppable: parsed !== null, insets: { top, right, bottom, left } };
   };
   const [state, setState] = useState(() => cropStateFor(selection.element));
+  const presetBarTarget = useCropPresetBarStore((s) => s.openFor);
+  const closePresetBar = useCropPresetBarStore((s) => s.close);
+  const showPresetBar = isCropBarTarget(selection.element, presetBarTarget);
 
   // Re-sync when the selection targets a different element (reselect, or an
   // undo/redo that re-keys the node).
@@ -223,10 +228,21 @@ export function DomEditCropHandles({
     // the lift keeps it hidden while selected. A drag that ends where it started saves nothing.
     const value = buildInsetClipPathSides(gesture.insets, gesture.radius);
     if (value === buildInsetClipPathSides(gesture.startInsets, gesture.radius)) return;
+    commitClipPath(value);
+  };
+
+  const commitClipPath = (value: string) => {
     const commit = onStyleCommit?.("clip-path", value);
     void Promise.resolve(commit).catch(() => undefined);
   };
 
+  const applyPresetInsets = (insets: ClipPathInsetSides | null) => {
+    const next = insets ?? { top: 0, right: 0, bottom: 0, left: 0 };
+    setState((prev) => ({ ...prev, insets: next }));
+    const radius = readCropFollowingResize(selection.element)?.radius ?? 0;
+    commitClipPath(insets === null ? "" : buildInsetClipPathSides(next, radius));
+  };
+
   const cancelCropGesture = (event: ReactPointerEvent<HTMLElement>) => {
     const gesture = endCropGesture(event);
     if (!gesture) return;
@@ -239,119 +255,131 @@ export function DomEditCropHandles({
   if (!state.croppable) return null;
 
   return (
-    <div
-      data-dom-edit-crop-frame="true"
-      className="pointer-events-none absolute"
-      style={{
-        left: frame.left,
-        top: frame.top,
-        width: frame.width,
-        height: frame.height,
-        transform: frame.angleDeg !== 0 ? `rotate(${frame.angleDeg}deg)` : undefined,
-      }}
-    >
-      {/* Dim the cropped-away area whenever the element is cropped and selected,
-          so the hidden content is visible (ghosted) without dragging. Clipped to
-          the element's own (rotated) box. */}
-      {hasCrop && (
-        <div className="pointer-events-none absolute inset-0 overflow-hidden">
-          <div
-            className="absolute"
-            style={{
-              left: cropRect.left,
-              top: cropRect.top,
-              width: cropRect.width,
-              height: cropRect.height,
-              boxShadow: "0 0 0 100000px rgba(8, 8, 12, 0.6)",
-            }}
-          />
-        </div>
+    <>
+      {showPresetBar && onStyleCommit && (
+        <CropPresetBar
+          left={frame.left + frame.width / 2}
+          top={frame.top}
+          elementWidth={width}
+          elementHeight={height}
+          onApply={applyPresetInsets}
+          onDone={closePresetBar}
+        />
       )}
-      {/* Dashed clip outline on the crop boundary, with a rule-of-thirds grid
-          shown while dragging. */}
       <div
-        aria-hidden="true"
-        className="pointer-events-none absolute border border-dashed border-studio-accent"
+        data-dom-edit-crop-frame="true"
+        className="pointer-events-none absolute"
         style={{
-          left: cropRect.left,
-          top: cropRect.top,
-          width: cropRect.width,
-          height: cropRect.height,
+          left: frame.left,
+          top: frame.top,
+          width: frame.width,
+          height: frame.height,
+          transform: frame.angleDeg !== 0 ? `rotate(${frame.angleDeg}deg)` : undefined,
         }}
       >
-        {dragging && (
-          <>
-            <div className="absolute inset-y-0 left-1/3 w-px bg-studio-accent/40" />
-            <div className="absolute inset-y-0 left-2/3 w-px bg-studio-accent/40" />
-            <div className="absolute inset-x-0 top-1/3 h-px bg-studio-accent/40" />
-            <div className="absolute inset-x-0 top-2/3 h-px bg-studio-accent/40" />
-          </>
+        {/* Dim the cropped-away area whenever the element is cropped and selected,
+            so the hidden content is visible (ghosted) without dragging. Clipped to
+            the element's own (rotated) box. */}
+        {hasCrop && (
+          <div className="pointer-events-none absolute inset-0 overflow-hidden">
+            <div
+              className="absolute"
+              style={{
+                left: cropRect.left,
+                top: cropRect.top,
+                width: cropRect.width,
+                height: cropRect.height,
+                boxShadow: "0 0 0 100000px rgba(8, 8, 12, 0.6)",
+              }}
+            />
+          </div>
         )}
-      </div>
-      {/* Reposition handle — a center circle shown only once cropped. Drag it to
-          pan the crop window (which part of the element shows) without resizing
-          the crop. It's a small, discrete target, so a body drag still MOVES. */}
-      {hasCrop && repositionSize > 0 && (
-        <button
-          type="button"
-          aria-label="Reposition crop"
-          title="Reposition crop"
-          data-dom-edit-crop-handle="true"
-          className="pointer-events-auto absolute rounded-full border-2 border-studio-accent bg-studio-accent/30 shadow-[0_0_0_1px_rgba(0,0,0,0.4)]"
+        {/* Dashed clip outline on the crop boundary, with a rule-of-thirds grid
+            shown while dragging. */}
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute border border-dashed border-studio-accent"
           style={{
-            left: cropRect.left + (cropRect.width - repositionSize) / 2,
-            top: cropRect.top + (cropRect.height - repositionSize) / 2,
-            width: repositionSize,
-            height: repositionSize,
-            cursor: "move",
-            touchAction: "none",
+            left: cropRect.left,
+            top: cropRect.top,
+            width: cropRect.width,
+            height: cropRect.height,
           }}
-          onPointerDown={(event) => startCropGesture("move", event)}
-          onPointerMove={updateCropGesture}
-          onPointerUp={finishCropGesture}
-          onPointerCancel={cancelCropGesture}
-        />
-      )}
-      {/* Edge handles — drag a side to crop it. Positioned just OUTSIDE the crop
-          edge (via edgeHandleLayout) so they never overlap the element body:
-          dragging the body always MOVES, only a handle crops. The pill is
-          hover-revealed (or shown while dragging / once a crop exists) so the
-          resting selection chrome stays uncluttered; the hit strip is always
-          live, and the title names the affordance. */}
-      {EDGES.map((edge) => {
-        const layout = edgeHandleLayout(edge, cropRect);
-        if (!layout) return null;
-        const revealed = dragging || hasCrop || hotEdge === edge;
-        return (
+        >
+          {dragging && (
+            <>
+              <div className="absolute inset-y-0 left-1/3 w-px bg-studio-accent/40" />
+              <div className="absolute inset-y-0 left-2/3 w-px bg-studio-accent/40" />
+              <div className="absolute inset-x-0 top-1/3 h-px bg-studio-accent/40" />
+              <div className="absolute inset-x-0 top-2/3 h-px bg-studio-accent/40" />
+            </>
+          )}
+        </div>
+        {/* Reposition handle — a center circle shown only once cropped. Drag it to
+            pan the crop window (which part of the element shows) without resizing
+            the crop. It's a small, discrete target, so a body drag still MOVES. */}
+        {hasCrop && repositionSize > 0 && (
           <button
-            key={edge}
             type="button"
-            aria-label={`Crop ${edge}`}
-            title="Crop"
+            aria-label="Reposition crop"
+            title="Reposition crop"
             data-dom-edit-crop-handle="true"
-            className="pointer-events-auto absolute flex items-center justify-center border-0 bg-transparent p-0"
+            className="pointer-events-auto absolute rounded-full border-2 border-studio-accent bg-studio-accent/30 shadow-[0_0_0_1px_rgba(0,0,0,0.4)]"
             style={{
-              ...layout.hit,
-              cursor: layout.cursor,
+              left: cropRect.left + (cropRect.width - repositionSize) / 2,
+              top: cropRect.top + (cropRect.height - repositionSize) / 2,
+              width: repositionSize,
+              height: repositionSize,
+              cursor: "move",
               touchAction: "none",
             }}
-            onPointerEnter={() => setHotEdge(edge)}
-            onPointerLeave={() => setHotEdge((prev) => (prev === edge ? null : prev))}
-            onPointerDown={(event) => startCropGesture(edge, event)}
+            onPointerDown={(event) => startCropGesture("move", event)}
             onPointerMove={updateCropGesture}
             onPointerUp={finishCropGesture}
             onPointerCancel={cancelCropGesture}
-          >
-            <span
-              className="pointer-events-none rounded-full bg-studio-accent/90 shadow-[0_0_0_1px_rgba(0,0,0,0.4)] transition-opacity duration-100"
+          />
+        )}
+        {/* Edge handles — drag a side to crop it. Positioned just OUTSIDE the crop
+            edge (via edgeHandleLayout) so they never overlap the element body:
+            dragging the body always MOVES, only a handle crops. The pill is
+            hover-revealed (or shown while dragging / once a crop exists) so the
+            resting selection chrome stays uncluttered; the hit strip is always
+            live, and the title names the affordance. */}
+        {EDGES.map((edge) => {
+          const layout = edgeHandleLayout(edge, cropRect);
+          if (!layout) return null;
+          const revealed = dragging || hasCrop || hotEdge === edge;
+          return (
+            <button
+              key={edge}
+              type="button"
+              aria-label={`Crop ${edge}`}
+              title="Crop"
+              data-dom-edit-crop-handle="true"
+              className="pointer-events-auto absolute flex items-center justify-center border-0 bg-transparent p-0"
               style={{
-                ...layout.pill,
-                opacity: revealed ? 1 : 0,
+                ...layout.hit,
+                cursor: layout.cursor,
+                touchAction: "none",
               }}
-            />
-          </button>
-        );
-      })}
-    </div>
+              onPointerEnter={() => setHotEdge(edge)}
+              onPointerLeave={() => setHotEdge((prev) => (prev === edge ? null : prev))}
+              onPointerDown={(event) => startCropGesture(edge, event)}
+              onPointerMove={updateCropGesture}
+              onPointerUp={finishCropGesture}
+              onPointerCancel={cancelCropGesture}
+            >
+              <span
+                className="pointer-events-none rounded-full bg-studio-accent/90 shadow-[0_0_0_1px_rgba(0,0,0,0.4)] transition-opacity duration-100"
+                style={{
+                  ...layout.pill,
+                  opacity: revealed ? 1 : 0,
+                }}
+              />
+            </button>
+          );
+        })}
+      </div>
+    </>
   );
 }

package/src/components/editor/carveOutput.ts

@@ -0,0 +1,54 @@
+import {
+  HF_AUDIO_FX_ATTR,
+  serializeAudioFxChain,
+  type HfAudioFxChain,
+} from "@hyperframes/core/audio-fx";
+import { type HfAutomation } from "@hyperframes/core/audio-automation";
+import { isCarveVoiceElement } from "./useFxCarveGrouping.js";
+import { automationAttrValue, HF_AUDIO_AUTOMATION_ATTR } from "./propertyPanelAutomation";
+import type { CarveClip } from "./useFxCarveNodes.js";
+import { readClipClock } from "./clipAudioClock.js";
+
+/** Lanes belonging to nodes the carve generated, which a re-run replaces. */
+export function withoutCarveLanes(automation: HfAutomation, chain: HfAudioFxChain): HfAutomation {
+  const prefixes = chain.nodes.filter((n) => n.fromCarve && n.id).map((n) => `fx.${n.id}.`);
+  if (prefixes.length === 0) return automation;
+  return {
+    version: automation.version,
+    lanes: automation.lanes.filter((lane) => !prefixes.some((p) => lane.target.startsWith(p))),
+  };
+}
+
+/** Every named voice still present with a src; a deleted source is skipped, not fatal. */
+export function resolveCarveVoices(doc: Document, sources: readonly string[]): CarveClip[] {
+  const voices: CarveClip[] = [];
+  for (const id of sources) {
+    const el = doc.getElementById(id);
+    // By tag name: iframe-realm elements fail `instanceof HTMLAudioElement`.
+    if (!isCarveVoiceElement(el)) continue;
+    const src = el.getAttribute("src");
+    if (!src) continue;
+    const clock = readClipClock((name) => el.getAttribute(name));
+    voices.push({ src, start: el.getAttribute("data-start"), clock });
+  }
+  return voices;
+}
+
+/** Remove the filters and lanes a carve generated once it no longer names a voice. */
+export async function dropCarveOutput(
+  chain: HfAudioFxChain,
+  automation: HfAutomation,
+  onSetAttributeQuiet: (attr: string, value: string | null) => void | Promise<void>,
+): Promise<void> {
+  const carriedOver = withoutCarveLanes(automation, chain);
+  if (carriedOver.lanes.length !== automation.lanes.length) {
+    await onSetAttributeQuiet(HF_AUDIO_AUTOMATION_ATTR, automationAttrValue(carriedOver) || null);
+  }
+  const kept = chain.nodes.filter((n) => !n.fromCarve);
+  if (kept.length !== chain.nodes.length) {
+    await onSetAttributeQuiet(
+      HF_AUDIO_FX_ATTR,
+      kept.length ? serializeAudioFxChain({ version: 1, nodes: kept }) : null,
+    );
+  }
+}

package/src/components/editor/cropPresetStore.ts

@@ -0,0 +1,33 @@
+import { create } from "zustand";
+
+export interface CropPresetBarTarget {
+  hfId?: string;
+  id?: string;
+}
+
+interface CropPresetBarState {
+  openFor: CropPresetBarTarget | null;
+  open: (target: CropPresetBarTarget) => void;
+  close: () => void;
+}
+
+/** Which clip the crop preset bar is open for; the canvas shows it while that element is selected. */
+export const useCropPresetBarStore = create<CropPresetBarState>((set) => ({
+  openFor: null,
+  open: (target) => set({ openFor: target }),
+  close: () => set({ openFor: null }),
+}));
+
+export function isCropBarTarget(element: Element, target: CropPresetBarTarget | null): boolean {
+  if (!target) return false;
+  const hfId = element.getAttribute("data-hf-id");
+  if (target.hfId && hfId) return target.hfId === hfId;
+  return Boolean(target.id) && element.id === target.id;
+}
+
+/** The crop lift is a stylesheet rule, so the inline clip-path is still the committed one. */
+export function committedClipPath(element: Element): string | null {
+  const style = element.getAttribute("style") ?? "";
+  const match = /(?:^|;)\s*clip-path\s*:\s*([^;]+)/i.exec(style);
+  return match?.[1]?.trim() ?? null;
+}

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

@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { CROP_ASPECT_PRESETS, centredCropInsets } from "./cropPresets";
+
+describe("centredCropInsets", () => {
+  it("trims the sides of a wide frame to 9:16, centred", () => {
+    const insets = centredCropInsets(1920, 1080, 9 / 16);
+    expect(insets.top).toBe(0);
+    expect(insets.bottom).toBe(0);
+    expect(insets.left).toBeCloseTo((1920 - 607.5) / 2, 6);
+    expect(insets.right).toBeCloseTo(insets.left, 6);
+  });
+
+  it("trims top and bottom of a tall frame to 16:9", () => {
+    const insets = centredCropInsets(1080, 1920, 16 / 9);
+    expect(insets.left).toBe(0);
+    expect(insets.right).toBe(0);
+    expect(insets.top).toBeCloseTo((1920 - 607.5) / 2, 6);
+    expect(insets.bottom).toBeCloseTo(insets.top, 6);
+  });
+
+  it("leaves the visible box in the requested ratio", () => {
+    for (const [w, h] of [
+      [1920, 1080],
+      [1080, 1920],
+      [800, 800],
+    ]) {
+      for (const { ratio } of CROP_ASPECT_PRESETS) {
+        const i = centredCropInsets(w, h, ratio);
+        expect((w - i.left - i.right) / (h - i.top - i.bottom)).toBeCloseTo(ratio, 6);
+      }
+    }
+  });
+
+  it("is no crop when the frame already has the ratio", () => {
+    expect(centredCropInsets(1600, 900, 16 / 9)).toEqual({ top: 0, right: 0, bottom: 0, left: 0 });
+  });
+
+  it("offers the four spec ratios", () => {
+    expect(CROP_ASPECT_PRESETS.map((p) => p.label)).toEqual(["16:9", "9:16", "1:1", "4:5"]);
+  });
+});

package/src/components/editor/cropPresets.ts

@@ -0,0 +1,24 @@
+import type { ClipPathInsetSides } from "./clipPathHelpers";
+
+export const CROP_ASPECT_PRESETS = [
+  { label: "16:9", ratio: 16 / 9 },
+  { label: "9:16", ratio: 9 / 16 },
+  { label: "1:1", ratio: 1 },
+  { label: "4:5", ratio: 4 / 5 },
+] as const;
+
+/** Insets (element CSS px) that leave the largest centred box of `ratio` (width / height). */
+export function centredCropInsets(
+  width: number,
+  height: number,
+  ratio: number,
+): ClipPathInsetSides {
+  const none = { top: 0, right: 0, bottom: 0, left: 0 };
+  if (width <= 0 || height <= 0 || ratio <= 0) return none;
+  if (width / height > ratio) {
+    const side = (width - height * ratio) / 2;
+    return side > 1e-9 ? { ...none, left: side, right: side } : none;
+  }
+  const band = (height - width / ratio) / 2;
+  return band > 1e-9 ? { ...none, top: band, bottom: band } : none;
+}

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

@@ -7,6 +7,7 @@ import {
   buildTextFieldChildLocator,
   readHfId,
   liveLayerElement,
+  domEditSelectionToFacts,
 } from "./domEditingLayers";
 import type { DomEditTextField } from "./domEditingTypes";
 
@@ -332,3 +333,23 @@ describe("liveLayerElement", () => {
     ).toBe("strip");
   });
 });
+
+describe("domEditSelectionToFacts hasAudio", () => {
+  async function factsFor(html: string) {
+    document.body.innerHTML = html;
+    const node = document.body.firstElementChild;
+    if (!(node instanceof HTMLElement)) throw new Error("expected element");
+    const selection = await resolveDomEditSelection(node, opts);
+    document.body.innerHTML = "";
+    if (!selection) throw new Error("expected selection");
+    return domEditSelectionToFacts(selection);
+  }
+
+  it("is true for an unmuted video, false for muted or data-has-audio=false", async () => {
+    expect((await factsFor(`<video id="v1"></video>`)).hasAudio).toBe(true);
+    expect((await factsFor(`<video id="v2" data-has-audio="true"></video>`)).hasAudio).toBe(true);
+    expect((await factsFor(`<video id="v3" muted></video>`)).hasAudio).toBe(false);
+    expect((await factsFor(`<video id="v4" data-has-audio="false"></video>`)).hasAudio).toBe(false);
+    expect((await factsFor(`<div id="d1"></div>`)).hasAudio).toBe(false);
+  });
+});

package/src/components/editor/domEditingLayers.ts

@@ -1,4 +1,5 @@
 import { probeSourceElement } from "./probeSourceElement";
+import { isAudibleVideoNode } from "../../player/lib/timelineElementHelpers";
 import type { PatchOperation } from "../../utils/sourcePatcher";
 import {
   resolveEditingAffordances,
@@ -248,6 +249,7 @@ export function domEditSelectionToFacts(
     hasEditableText: selection.textFields.length > 0,
     hasTimingStart: selection.dataAttributes.start != null,
     animationCount,
+    hasAudio: isAudibleVideoNode(selection.element),
   };
 }