@bycrux/editor 0.11.2 → 1.0.1

package/src/video/preview/audio-context.ts

@@ -0,0 +1,111 @@
+/**
+ * The page's ONE Web Audio context, and the gesture-anchored resume that keeps
+ * it running.
+ *
+ * SP4 T4 **moved** this out of `useVideoPlayback.ts` — it is not a copy. Both
+ * playback paths need the identical context and the identical resume rule:
+ *
+ *   - the legacy `<video>` player wires every slot and every audio lane
+ *     through `MediaElementSource → GainNode → ctx.destination`, so a
+ *     suspended context silently kills audio *and* video frame production;
+ *   - the WebCodecs engine (`engine/audio-clock.ts`) drives its MASTER CLOCK
+ *     off an `AudioWorklet` on the same context, so a suspended context stalls
+ *     the clock and therefore stalls *painting* — the same failure with a
+ *     wider blast radius.
+ *
+ * Two copies of this logic would be a textbook divergence-registry hazard
+ * (two implementations of one rule, drifting silently), which is why the
+ * extraction is a hard requirement of the engine work rather than a tidy-up.
+ *
+ * Nothing here closes the context: it is window-scoped on purpose (see
+ * `getSharedAudioContext`).
+ */
+
+/** Typed extension for the shared AudioContext cached on window. */
+export interface MontajWindow {
+  __montajSharedCtx?: AudioContext
+}
+
+/**
+ * CRITICAL: ALL video slots AND ALL audio tracks AND the engine's master clock
+ * share the SAME AudioContext. Fresh AudioContexts start suspended and require
+ * a user gesture to resume. Creating separate contexts (one per slot, or a
+ * separate one for audio tracks) means those born inside a useEffect have no
+ * user-gesture activation — they stay suspended → silent. Worse, video frame
+ * production is gated on the wired AudioContext clock running, so a suspended
+ * context with a wired <video> produces "video plays but no frames render"
+ * after a hard refresh.
+ *
+ * Stash the single shared context on `window` so it survives strict-mode
+ * remounts and is reused across audio tracks, video slots, engine sessions,
+ * and re-mounts.
+ */
+export function getSharedAudioContext(): AudioContext {
+  const w = window as Window & MontajWindow
+  // If the cached context is closed (shouldn't happen, but defensive), recreate.
+  if (!w.__montajSharedCtx || w.__montajSharedCtx.state === 'closed') {
+    w.__montajSharedCtx = new AudioContext()
+  }
+  return w.__montajSharedCtx
+}
+
+/**
+ * Read the shared context WITHOUT creating one. Callers that need to sample a
+ * live property off the context (latency, state) but must not force its
+ * creation — because creation off the gesture stack is precisely the failure
+ * mode `getSharedAudioContext` exists to make explicit — use this instead.
+ * Returns undefined until something on the gesture stack has minted the ctx.
+ */
+export function peekSharedAudioContext(): AudioContext | undefined {
+  return (window as Window & MontajWindow).__montajSharedCtx
+}
+
+/**
+ * MUST be called from inside a user-gesture handler (keydown, click, etc.).
+ * Browsers credit a `resume()` call as gesture-driven only when it happens
+ * synchronously inside a gesture-rooted call stack. Calling resume() from
+ * a useEffect or a setTimeout silently fails — the context stays suspended.
+ *
+ * Symptom of a suspended context with a wired <video>: video appears to
+ * play (paused=false, currentTime advances internally per the DOM clock)
+ * but no frames render and no audio plays — the entire pipeline is gated
+ * on the AudioContext clock running. This bites specifically after a page
+ * refresh, because SPA navigation carries gesture activation across pages
+ * but a hard reload does not.
+ *
+ * The engine path has the same requirement for a different reason: its master
+ * clock counts frames an `AudioWorklet` has actually rendered, and a suspended
+ * context renders none — the clock (and the canvas painting that follows it)
+ * freezes until something resumes it from a gesture.
+ *
+ * Deliberately does NOT create the context: this is only ever called from a
+ * gesture that is *also* about to use an already-created context, and creating
+ * one here would hide the "nobody has wired audio yet" case.
+ */
+export function resumeAudioContextFromGesture() {
+  const w = window as Window & MontajWindow
+  const ctx: AudioContext | undefined = w.__montajSharedCtx
+  if (ctx && ctx.state === 'suspended') {
+    // Fire-and-forget; resume() returns a Promise but the gesture-credit
+    // happens at the synchronous call site, not when the promise resolves.
+    ctx.resume().catch(() => {})
+  }
+}
+
+/**
+ * Seconds between the moment a sample is handed to the output device and the
+ * moment it becomes audible: the sum of `outputLatency` (the device queue) and
+ * `baseLatency` (the graph's own processing lead). The engine's master clock
+ * counts *frames consumed* by `process()` — a frame the clock has counted is
+ * still `latencySeconds()` away from the ear, and the `<video>` fallback's
+ * `currentTime` has the same gap on the same graph, so the value bridged to
+ * the painter is `now() - latencySeconds(ctx)` on both paths.
+ *
+ * Read live on every emit (device switches can change it), clamp ≥ 0, and
+ * tolerate missing fields on non-Chromium contexts / test stubs.
+ */
+export function latencySeconds(ctx: Pick<AudioContext, 'outputLatency' | 'baseLatency'>): number {
+  const out = Number.isFinite(ctx.outputLatency) ? ctx.outputLatency : 0
+  const base = Number.isFinite(ctx.baseLatency) ? ctx.baseLatency : 0
+  return Math.max(0, out + base)
+}

package/src/video/preview/captionDragState.ts

@@ -1,5 +1,7 @@
 /**
- * Pure drag maths for caption-segment positioning in the preview.
+ * Pure drag maths — and the one DOM measurement they depend on — for
+ * caption-segment positioning in the preview. Everything here is React-free so
+ * it can be unit-tested without mounting CaptionPreview.
  *
  * Why this is NOT `useDragOverlay` generalised
  * --------------------------------------------
@@ -199,3 +201,91 @@ export function captionDragPatch(
     ? { offsetX: geom.offsetX, offsetY: geom.offsetY }
     : { scale: geom.scale }
 }
+
+// ── Measuring where a caption actually paints ───────────────────────────────
+
+/** A rectangle in client (screen) coordinates. */
+export interface CaptionContentRect {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+/**
+ * The element a measurement should be scoped to: the subtree a caption
+ * template marked with `data-caption-id="<segmentId>"`, or `root` itself when
+ * no id was asked for or no marker was found.
+ *
+ * Matched by walking `[data-caption-id]` and comparing the attribute rather
+ * than building a `[data-caption-id="…"]` selector, so a segment id containing
+ * a quote or backslash (project.json is hand-editable) can't throw a selector
+ * SyntaxError. The subtree is a handful of nodes, so the walk is free.
+ */
+function scopeForSegment(root: HTMLElement, segmentId?: string): HTMLElement {
+  if (!segmentId) return root
+  for (const el of root.querySelectorAll<HTMLElement>('[data-caption-id]')) {
+    if (el.getAttribute('data-caption-id') === segmentId) return el
+  }
+  return root
+}
+
+/**
+ * Union of the client rects of every painted text run (and replaced element)
+ * under `root` — or, when `segmentId` is given, under just that segment's
+ * marked subtree.
+ *
+ * Deliberately NOT `root.getBoundingClientRect()`: the template's own outermost
+ * element is a frame-sized `position: fixed; inset: 0` box (captionOuterStyle),
+ * so its rect — and the rect of any wrapper we put around it — is the entire
+ * preview, which would put the selection box around the whole frame. Walking to
+ * the text nodes is the only markup-agnostic way to find where the caption
+ * actually paints, and it costs nothing on a subtree this small.
+ *
+ * WHY `segmentId`: the templates draw EVERY caption active at an instant now
+ * that captions have lanes, so an unscoped walk would union two unrelated
+ * captions into one selection box spanning both. Naming the target segment
+ * narrows the walk to that caption alone.
+ *
+ * FALLBACK, deliberately: a template with no `data-caption-id` anywhere — one
+ * written before the attribute existed, or supplied by a host — measures the
+ * whole root, i.e. exactly the pre-lane behaviour. A missing marker degrades to
+ * the old selection box, never to no selection box.
+ *
+ * Returns null when nothing is painted (e.g. `pop` renders no word between two
+ * word windows), which is the signal to hide the selection box entirely.
+ */
+export function measureCaptionContentRect(
+  root: HTMLElement,
+  segmentId?: string,
+): CaptionContentRect | null {
+  const scope = scopeForSegment(root, segmentId)
+  const doc = scope.ownerDocument
+  const walker = doc.createTreeWalker(scope, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT)
+  const range = doc.createRange()
+  let left = Infinity, top = Infinity, right = -Infinity, bottom = -Infinity
+
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    let rect: DOMRect | null = null
+    if (node.nodeType === Node.TEXT_NODE) {
+      if (!node.nodeValue?.trim()) continue
+      range.selectNodeContents(node)
+      rect = range.getBoundingClientRect()
+    } else {
+      // Replaced elements paint without text nodes. Everything else is a
+      // container whose box is either the frame-sized outer wrapper or a
+      // full-width anchor box — including them would defeat the point.
+      const tag = (node as Element).tagName?.toUpperCase()
+      if (tag !== 'IMG' && tag !== 'SVG' && tag !== 'VIDEO' && tag !== 'CANVAS') continue
+      rect = (node as Element).getBoundingClientRect()
+    }
+    if (!rect || (!rect.width && !rect.height)) continue
+    left   = Math.min(left,   rect.left)
+    top    = Math.min(top,    rect.top)
+    right  = Math.max(right,  rect.right)
+    bottom = Math.max(bottom, rect.bottom)
+  }
+
+  if (!Number.isFinite(left)) return null
+  return { left, top, width: right - left, height: bottom - top }
+}

package/src/video/preview/proxySupport.ts

@@ -0,0 +1,86 @@
+/**
+ * SP3 fix B2 — proxy playback capability gate + per-session failure suppression.
+ *
+ * Editing proxies are H.264+Opus in MP4. Not every browser decodes that
+ * (Opus-in-MP4 support is not universal — a browser can decode H.264 and
+ * Opus separately yet still fail on the muxed combination), and a
+ * `<video>` element given an undecodable src fails SILENTLY — a black preview
+ * with no event the user can act on. Two defenses, both editor-side so
+ * timeline-core stays pure (no environment probing in the resolver):
+ *
+ *   1. Capability gate: probed once per session. Unsupported ⇒ `gateProxy()`
+ *      strips `proxySrc` from the item BEFORE src selection, so the tier
+ *      chain falls through to normalizedSrc/src exactly as if no proxy
+ *      existed.
+ *   2. Failure suppression: when a proxy that passed the probe still fails to
+ *      decode (corrupt file, dangling pointer after an out-of-band delete),
+ *      the error handler marks that proxySrc failed for the rest of the
+ *      session and the player reloads the clip without its proxy tier.
+ *
+ * jsdom note: the vitest environment stubs `canPlayType` to report support
+ * (see src/test-setup.ts) so the existing proxy-selection tests keep meaning;
+ * the unsupported path is tested via `__setProxySupportForTests`.
+ */
+
+// avc1.640028 = High profile @ level 4.0 — libx264's actual default output
+// (High profile; 720p above 30fps needs level 4.0), not Main@3.1. Pinning
+// -profile:v main on the encoder to match a cheaper string would cost
+// bitrate for no benefit, so the declared codec follows the encoder instead.
+const PROXY_MIME = 'video/mp4; codecs="avc1.640028, opus"'
+
+let supportedCache: boolean | null = null
+
+export function proxyPlaybackSupported(): boolean {
+  if (supportedCache !== null) return supportedCache
+  if (typeof document === 'undefined') {
+    supportedCache = false
+    return supportedCache
+  }
+  let ok = false
+  try {
+    const ms = (globalThis as { MediaSource?: { isTypeSupported?: (t: string) => boolean } }).MediaSource
+    if (ms?.isTypeSupported?.(PROXY_MIME)) {
+      ok = true
+    } else {
+      ok = document.createElement('video').canPlayType(PROXY_MIME) !== ''
+    }
+  } catch {
+    ok = false
+  }
+  supportedCache = ok
+  return supportedCache
+}
+
+/** Test hook: force (true/false) or reset (null) the cached probe result. */
+export function __setProxySupportForTests(value: boolean | null): void {
+  supportedCache = value
+}
+
+const failedProxies = new Set<string>()
+
+/** Record a proxy file that failed to decode this session. */
+export function markProxyFailed(proxySrc: string): void {
+  failedProxies.add(proxySrc)
+}
+
+/** True when this item's proxy is present, supported, and not failed. */
+export function isProxyUsable(proxySrc: string | undefined): boolean {
+  return !!proxySrc && proxyPlaybackSupported() && !failedProxies.has(proxySrc)
+}
+
+/** Test hook: clear the per-session failure set. */
+export function __clearFailedProxiesForTests(): void {
+  failedProxies.clear()
+}
+
+/**
+ * Return the item as-is when its proxy is usable, otherwise a shallow copy
+ * with `proxySrc` removed — the input object is never mutated (it is shared
+ * project state).
+ */
+export function gateProxy<T extends { proxySrc?: string }>(item: T): T {
+  if (!item.proxySrc || isProxyUsable(item.proxySrc)) return item
+  const gated = { ...item }
+  delete (gated as { proxySrc?: string }).proxySrc
+  return gated
+}

package/src/video/preview/transformStyle.ts

@@ -10,9 +10,15 @@
 // the container's own (frame) size, and scale() around center.
 
 import type { CSSProperties } from 'react'
+import { geometryFor, toCssBoxPct } from '@bycrux/timeline-core'
 
 export interface VideoTransform {
+  /** The legacy UNIFORM knob, and still the fallback for both axes. */
   scale?: number
+  /** Multiplier on WIDTH. Absent ⇒ falls back to `scale` (then 1). */
+  scaleX?: number
+  /** Multiplier on HEIGHT. Absent ⇒ falls back to `scale` (then 1). */
+  scaleY?: number
   offsetX?: number // percent of frame width
   offsetY?: number // percent of frame height
 }
@@ -20,25 +26,29 @@ export interface VideoTransform {
 // CSS transform for a frame-sized container wrapping the <video>. translate() %
 // is relative to the container (= frame), matching the renderer's frame-percent
 // offset; scale() is around center, matching the renderer's centered box.
+//
+// The two-argument `scale(sx, sy)` is a strict superset of the old one-argument
+// form: a legacy item carrying only `scale` resolves both axes to that same
+// number, so it renders the identical box it always did.
 export function videoTransformContainerStyle(t: VideoTransform): CSSProperties {
-  const s = t.scale ?? 1
+  const sx = t.scaleX ?? t.scale ?? 1
+  const sy = t.scaleY ?? t.scale ?? 1
   const ox = t.offsetX ?? 0
   const oy = t.offsetY ?? 0
-  if (s === 1 && ox === 0 && oy === 0) return {}
-  return { transform: `translate(${ox}%, ${oy}%) scale(${s})`, transformOrigin: 'center center' }
+  // Identity on BOTH axes and no offset — emit nothing rather than an inert
+  // CSS transform (which would otherwise create a containing block and a
+  // compositing layer for every unmodified clip).
+  if (sx === 1 && sy === 1 && ox === 0 && oy === 0) return {}
+  return { transform: `translate(${ox}%, ${oy}%) scale(${sx}, ${sy})`, transformOrigin: 'center center' }
 }
 
 // The transform box as a frame-relative % rect (left/top/width/height in %).
 // This is the canvas-aspect box the cropped video is contained within; the crop
 // handles for the on-canvas transform are drawn on it.
+//
+// Per-axis scale needs no handling here: `geometryFor` resolves scaleX/scaleY
+// (falling back to `scale`) and `toCssBoxPct` takes width/left from the X scale
+// and height/top from the Y scale, so this inherits the split unchanged.
 export function videoTransformBoxPct(t: VideoTransform): { left: number; top: number; width: number; height: number } {
-  const s = t.scale ?? 1
-  const ox = t.offsetX ?? 0
-  const oy = t.offsetY ?? 0
-  return {
-    width: s * 100,
-    height: s * 100,
-    left: ((1 - s) / 2) * 100 + ox,
-    top: ((1 - s) / 2) * 100 + oy,
-  }
+  return toCssBoxPct(geometryFor(t, 'video'))
 }

package/src/video/preview/useDragOverlay.ts

@@ -2,7 +2,14 @@ import { useEffect, useRef, useState } from 'react'
 import type { VisualItem } from '../../schema'
 
 export type Corner = 'nw' | 'ne' | 'sw' | 'se'
-export type DragType = 'move' | `resize-${Corner}` | 'rotate'
+/**
+ * Single-axis resize handles. A corner drag scales BOTH axes together (the
+ * legacy uniform gesture); an edge drag scales exactly one — `e`/`w` the X
+ * axis, `n`/`s` the Y axis. The handles themselves are drawn by a later slice;
+ * the hook understands the gesture already so the two can land independently.
+ */
+export type Edge = 'n' | 's' | 'e' | 'w'
+export type DragType = 'move' | `resize-${Corner}` | `resize-${Edge}` | 'rotate'
 
 // Shared shape for `onOverlayChange` across the preview layer: drag/resize/rotate
 // gestures (useDragOverlay) only ever populate the geometric subset; content-editing
@@ -11,7 +18,12 @@ export type DragType = 'move' | `resize-${Corner}` | 'rotate'
 export interface OverlayChanges {
   offsetX?: number
   offsetY?: number
+  /** The legacy UNIFORM scale. Still written by every corner drag. */
   scale?: number
+  /** Per-axis width multiplier. Absent ⇒ the item keeps falling back to `scale`. */
+  scaleX?: number
+  /** Per-axis height multiplier. Absent ⇒ the item keeps falling back to `scale`. */
+  scaleY?: number
   rotation?: number
   fit?: 'cover' | 'contain' | 'fill'
   sourceCrop?: VisualItem['sourceCrop']
@@ -35,7 +47,20 @@ interface DragState {
   initY: number
   initOffsetX: number
   initOffsetY: number
+  /** The RESOLVED uniform scale at gesture start. */
   initScale: number
+  /**
+   * The RESOLVED per-axis scales at gesture start. Both equal `initScale` on a
+   * uniform item, so omitting them (they default to `initScale`) is always the
+   * legacy behavior.
+   */
+  initScaleX?: number
+  initScaleY?: number
+  /**
+   * Whether the ITEM ITSELF carries `scaleX`/`scaleY`, as opposed to inheriting
+   * both from the legacy uniform `scale`. Decides the commit shape — see `onUp`.
+   */
+  initHasPerAxis?: boolean
   initRotation: number
   // rotate-specific: center of element in page coords and initial angle
   cx?: number
@@ -50,7 +75,10 @@ export function useDragOverlay(
   const [dragState, setDragState] = useState<DragState | null>(null)
 
   const [liveOffset,   setLiveOffset]   = useState<{ id: string; x: number; y: number } | null>(null)
-  const [liveScale,    setLiveScale]    = useState<{ id: string; scale: number } | null>(null)
+  // `scale` is the uniform value (only a CORNER drag moves it); `scaleX`/`scaleY`
+  // are what the preview actually renders, so an edge drag can move one axis
+  // without the other. On a uniform item all three stay equal.
+  const [liveScale,    setLiveScale]    = useState<{ id: string; scale: number; scaleX: number; scaleY: number } | null>(null)
   const [liveRotation, setLiveRotation] = useState<{ id: string; rotation: number } | null>(null)
   const liveOffsetRef   = useRef<typeof liveOffset>(null)
   const liveScaleRef    = useRef<typeof liveScale>(null)
@@ -80,13 +108,18 @@ export function useDragOverlay(
         const rawX = dragState.initOffsetX + dx
         const rawY = dragState.initOffsetY + dy
 
-        // Edge snap positions depend on scale.
-        // Element is inset-0 (fills container) then scaled from center.
-        // Left edge hits screen left / right edge hits screen right when offsetX = ±(0.5 - s/2)*100.
-        // For scale=1 this is 0 (same as center snap), so edge snap only activates for scaled-down items.
-        const s = dragState.initScale
-        const edgeX = (0.5 - s / 2) * 100   // offset where element edge meets screen edge
-        const edgeY = (0.5 - s / 2) * 100
+        // Edge snap positions depend on scale, PER AXIS.
+        // Element is inset-0 (fills container) then scaled from center, so its half-width is
+        // sx/2 of the frame and its half-height sy/2.
+        // Left edge hits screen left / right edge hits screen right when offsetX = ±(0.5 - sx/2)*100;
+        // top/bottom likewise at ±(0.5 - sy/2)*100.
+        // For a scale of 1 that is 0 (same as center snap), so edge snap only activates for an axis
+        // that is scaled DOWN — and with a non-uniform item the axes decide independently, e.g. a
+        // full-width-but-squat item gets top/bottom edge snap and no left/right snap at all.
+        const sx = dragState.initScaleX ?? dragState.initScale
+        const sy = dragState.initScaleY ?? dragState.initScale
+        const edgeX = (0.5 - sx / 2) * 100   // offset where the element's left/right edge meets the frame's
+        const edgeY = (0.5 - sy / 2) * 100   // offset where the element's top/bottom edge meets the frame's
         const hasEdgeX = edgeX > SNAP_THRESHOLD  // skip if too close to center snap
         const hasEdgeY = edgeY > SNAP_THRESHOLD
 
@@ -140,13 +173,37 @@ export function useDragOverlay(
         setLiveRotation(next)
         liveRotationRef.current = next
       } else {
-        // Resize from corner
-        const corner = dragState.type.slice(7) as Corner  // 'resize-se' → 'se'
-        const sx = corner.includes('e') ? 1 : -1
-        const sy = corner.includes('s') ? 1 : -1
-        const delta = (dx * sx + dy * sy) / 100
-        const newScale = Math.max(0.1, dragState.initScale * (1 + delta))
-        const next = { id: dragState.id, scale: newScale }
+        // Resize from a corner ('resize-se' → 'se') or an edge ('resize-e' → 'e').
+        const handle = dragState.type.slice(7) as Corner | Edge
+        // dirX/dirY are DIRECTION SIGNS (+1/-1), never scales: dragging the east
+        // side rightwards grows the item, dragging the west side rightwards
+        // shrinks it. Deliberately NOT named sx/sy — those mean per-axis SCALE
+        // everywhere else in this hook, and conflating the two silently inverts
+        // the drag direction.
+        const dirX = handle.includes('e') ? 1 : -1
+        const dirY = handle.includes('s') ? 1 : -1
+
+        const baseX = dragState.initScaleX ?? dragState.initScale
+        const baseY = dragState.initScaleY ?? dragState.initScale
+        const isCorner = handle.length === 2
+
+        let nextScaleX = baseX
+        let nextScaleY = baseY
+        let nextScale  = dragState.initScale
+        if (isCorner) {
+          // Both axes by the SAME delta — identical to the pre-per-axis formula,
+          // so a uniform item's corner drag feels exactly as it always did.
+          const delta = (dx * dirX + dy * dirY) / 100
+          nextScaleX = Math.max(0.1, baseX * (1 + delta))
+          nextScaleY = Math.max(0.1, baseY * (1 + delta))
+          nextScale  = Math.max(0.1, dragState.initScale * (1 + delta))
+        } else if (handle === 'e' || handle === 'w') {
+          nextScaleX = Math.max(0.1, baseX * (1 + (dx * dirX) / 100))
+        } else {
+          nextScaleY = Math.max(0.1, baseY * (1 + (dy * dirY) / 100))
+        }
+
+        const next = { id: dragState.id, scale: nextScale, scaleX: nextScaleX, scaleY: nextScaleY }
         setLiveScale(next)
         liveScaleRef.current = next
       }
@@ -156,9 +213,26 @@ export function useDragOverlay(
       const lo = liveOffsetRef.current
       const ls = liveScaleRef.current
       const lr = liveRotationRef.current
-      const changes: { offsetX?: number; offsetY?: number; scale?: number; rotation?: number } = {}
+      const changes: OverlayChanges = {}
       if (lo) { changes.offsetX = lo.x; changes.offsetY = lo.y }
-      if (ls) { changes.scale = ls.scale }
+      if (ls) {
+        changes.scale = ls.scale
+        // Commit shape is deliberately asymmetric, to keep legacy projects legacy:
+        // a CORNER drag of an item that has never carried scaleX/scaleY is the old
+        // uniform gesture and writes ONLY `scale`. Writing per-axis fields there
+        // would migrate every existing item to per-axis storage the first time
+        // anyone nudged it — a silent schema change for zero user benefit, since
+        // both axes would just hold the same number.
+        // An EDGE drag is per-axis by definition, and an item that ALREADY carries
+        // scaleX/scaleY is already per-axis (and would be corrupted by a
+        // scale-only commit, because `scaleX ?? scale` means the stale scaleX
+        // would keep winning). Both of those write both axes.
+        const handle = dragState!.type.startsWith('resize-') ? dragState!.type.slice(7) : ''
+        if (dragState!.initHasPerAxis || handle.length === 1) {
+          changes.scaleX = ls.scaleX
+          changes.scaleY = ls.scaleY
+        }
+      }
       if (lr) { changes.rotation = lr.rotation }
       if (Object.keys(changes).length) onOverlayChange?.(dragState!.id, changes)
       setDragState(null)