@hyperframes/studio 0.8.102 → 0.8.103

package/dist/assets/{index-BM35fjFf.js → index-DuCZ3pQw.js}

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-C2utDZt-.js";/*!
+import{n as Qi}from"./index-BPJRf2X9.js";/*!
  * Copyright (c) 2026-present, Vanilagy and contributors
  *
  * This Source Code Form is subject to the terms of the Mozilla Public

package/dist/{chunk-MTAVNAGW.js → chunk-46XP7J3B.js}

@@ -2,7 +2,7 @@ import {
   buildProjectApiPath,
   getSourceScopedSelectorIndex,
   withSelectorIndexPass
-} from "./chunk-S65AQH6M.js";
+} from "./chunk-DI4LCJHL.js";
 
 // src/components/editor/probeSourceElement.ts
 async function probeSourceElement(projectId, sourceFile, target) {
@@ -1061,4 +1061,4 @@ export {
   readHfId,
   buildDomEditPatchTarget
 };
-//# sourceMappingURL=chunk-MTAVNAGW.js.map
+//# sourceMappingURL=chunk-46XP7J3B.js.map

package/dist/{chunk-S65AQH6M.js → chunk-DI4LCJHL.js}

@@ -40,8 +40,9 @@ function getSourceScopedSelectorIndex(doc, el, selector, sourceFile, resolveSour
 
 // src/utils/projectRouting.ts
 var PROJECT_HASH_PREFIX = "#project/";
+var WINDOWS_DRIVE_PREFIX = /^[a-z]:/i;
 function isValidProjectId(value) {
-  return value.length > 0 && value !== "." && value !== ".." && !value.includes(":") && !value.includes("/") && !value.includes("\\") && !Array.from(value).some((char) => char.charCodeAt(0) < 32);
+  return value.length > 0 && value !== "." && value !== ".." && !WINDOWS_DRIVE_PREFIX.test(value) && !value.includes("/") && !value.includes("\\") && !Array.from(value).some((char) => char.charCodeAt(0) < 32);
 }
 function decodeHashProjectId(value) {
   try {
@@ -98,4 +99,4 @@ export {
   withSelectorIndexPass,
   getSourceScopedSelectorIndex
 };
-//# sourceMappingURL=chunk-S65AQH6M.js.map
+//# sourceMappingURL=chunk-DI4LCJHL.js.map

package/dist/chunk-DI4LCJHL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/sourceScopedSelectorIndex.ts","../src/utils/projectRouting.ts"],"sourcesContent":["/**\n * Occurrence index for a selector within its source document.\n *\n * The preview flattens multiple composition files into one DOM, so a raw\n * `querySelectorAll` index is not a stable source-file identity. Callers supply\n * their existing source resolver; this helper alone owns occurrence scoping.\n */\n\n/** Every element matching one selector, mapped to the source file it belongs to\n *  and its occurrence index within that file. One document query fills it. */\ntype SelectorOccurrences = Map<Element, { scope: string; index: number }>;\n\ninterface SelectorIndexPass {\n  doc: Document;\n  bySelector: Map<string, SelectorOccurrences>;\n}\n\nlet activePass: SelectorIndexPass | null = null;\n\n/**\n * Share one occurrence index per selector across every\n * `getSourceScopedSelectorIndex` call made synchronously inside `run`.\n *\n * Unshared, each call runs its own whole-document `querySelectorAll(selector)`\n * and resolves the source file of every match. A rebuild that walks n elements\n * sharing a selector therefore does n whole-document queries and n² resolver\n * calls — a composition of repeated cards or tiles is exactly that shape. One\n * index per selector makes the same pass linear.\n *\n * Correctness rests on the pass being ONE synchronous walk of a document that\n * does not change under it: nothing invalidates the index, so `run` must not\n * mutate `doc`, and every call inside it must resolve source files the same way\n * (the resolver may be a fresh closure per call, as long as it answers the\n * same). Outside a pass the index is per-call, exactly as before.\n */\nexport function withSelectorIndexPass<T>(doc: Document, run: () => T): T {\n  const previous = activePass;\n  activePass = { doc, bySelector: new Map() };\n  try {\n    return run();\n  } finally {\n    activePass = previous;\n  }\n}\n\nfunction buildOccurrences(\n  doc: Document,\n  selector: string,\n  resolveSourceFile: (candidate: Element) => string | undefined,\n): SelectorOccurrences {\n  const occurrences: SelectorOccurrences = new Map();\n  const counts = new Map<string, number>();\n  for (const candidate of doc.querySelectorAll(selector)) {\n    const scope = resolveSourceFile(candidate) ?? \"index.html\";\n    const index = counts.get(scope) ?? 0;\n    counts.set(scope, index + 1);\n    occurrences.set(candidate, { scope, index });\n  }\n  return occurrences;\n}\n\nexport function getSourceScopedSelectorIndex(\n  doc: Document,\n  el: Element,\n  selector: string | undefined,\n  sourceFile: string | undefined,\n  resolveSourceFile: (candidate: Element) => string | undefined,\n): number | undefined {\n  if (!selector || selector.startsWith(\"#\") || selector.startsWith(\"[data-composition-id=\")) {\n    return undefined;\n  }\n\n  try {\n    const pass = activePass?.doc === doc ? activePass : null;\n    let occurrences = pass?.bySelector.get(selector);\n    if (!occurrences) {\n      occurrences = buildOccurrences(doc, selector, resolveSourceFile);\n      pass?.bySelector.set(selector, occurrences);\n    }\n    // An element outside the requested scope is not in that scope's occurrence\n    // run at all, which is the `indexOf` miss the filtered form returned before.\n    const hit = occurrences.get(el);\n    return hit && hit.scope === (sourceFile ?? \"index.html\") ? hit.index : undefined;\n  } catch {\n    return undefined;\n  }\n}\n","const PROJECT_HASH_PREFIX = \"#project/\";\n\nexport interface ProjectHashRoute {\n  projectId: string;\n  params: URLSearchParams;\n}\n\nconst WINDOWS_DRIVE_PREFIX = /^[a-z]:/i;\n\n/** Project names are single path segments, including when received from a hash or server. */\nexport function isValidProjectId(value: string): boolean {\n  return (\n    value.length > 0 &&\n    value !== \".\" &&\n    value !== \"..\" &&\n    !WINDOWS_DRIVE_PREFIX.test(value) &&\n    !value.includes(\"/\") &&\n    !value.includes(\"\\\\\") &&\n    !Array.from(value).some((char) => char.charCodeAt(0) < 32)\n  );\n}\n\nfunction decodeHashProjectId(value: string): string {\n  try {\n    return decodeURIComponent(value);\n  } catch {\n    return value;\n  }\n}\n\nfunction normalizeHashParams(\n  params?: URLSearchParams | Record<string, string | null | undefined>,\n): URLSearchParams {\n  if (!params) return new URLSearchParams();\n  if (params instanceof URLSearchParams) return params;\n\n  const next = new URLSearchParams();\n  for (const [key, value] of Object.entries(params)) {\n    if (!key || value == null || value === \"\") continue;\n    next.set(key, value);\n  }\n  return next;\n}\n\nexport function encodeProjectId(projectId: string): string {\n  if (!isValidProjectId(projectId)) throw new Error(\"Invalid project ID\");\n  return encodeURIComponent(projectId);\n}\n\nexport function buildProjectHash(\n  projectId: string,\n  params?: URLSearchParams | Record<string, string | null | undefined>,\n): string {\n  const search = normalizeHashParams(params).toString();\n  return `${PROJECT_HASH_PREFIX}${encodeProjectId(projectId)}${search ? `?${search}` : \"\"}`;\n}\n\nexport function parseProjectHashRoute(hash: string): ProjectHashRoute | null {\n  if (!hash.startsWith(PROJECT_HASH_PREFIX)) return null;\n\n  const route = hash.slice(PROJECT_HASH_PREFIX.length);\n  const queryIndex = route.indexOf(\"?\");\n  const encodedProjectId = queryIndex >= 0 ? route.slice(0, queryIndex) : route;\n  if (!encodedProjectId || encodedProjectId.includes(\"/\")) return null;\n\n  const projectId = decodeHashProjectId(encodedProjectId);\n  if (!isValidProjectId(projectId)) return null;\n\n  const rawParams = queryIndex >= 0 ? route.slice(queryIndex + 1) : \"\";\n  return {\n    projectId,\n    params: new URLSearchParams(rawParams),\n  };\n}\n\nexport function parseProjectIdFromHash(hash: string): string | null {\n  return parseProjectHashRoute(hash)?.projectId ?? null;\n}\n\nexport function buildProjectApiPath(projectId: string, suffix = \"\"): string {\n  const normalizedSuffix = suffix && !suffix.startsWith(\"/\") ? `/${suffix}` : suffix;\n  return `/api/projects/${encodeProjectId(projectId)}${normalizedSuffix}`;\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-7X4XRP3L.js → chunk-HIGHVWYD.js}

@@ -4,7 +4,7 @@ import {
 import {
   buildProjectApiPath,
   getSourceScopedSelectorIndex
-} from "./chunk-S65AQH6M.js";
+} from "./chunk-DI4LCJHL.js";
 
 // src/player/lib/time.ts
 var STUDIO_PREVIEW_FPS = 30;
@@ -1890,4 +1890,4 @@ export {
   whenPreviewBooted,
   Player
 };
-//# sourceMappingURL=chunk-7X4XRP3L.js.map
+//# sourceMappingURL=chunk-HIGHVWYD.js.map

package/dist/{domEditingLayers-NU6Z5QWA.js → domEditingLayers-AQBDFNUC.js}

@@ -20,8 +20,8 @@ import {
   resolveDomEditCapabilities,
   resolveDomEditSelection,
   serializeDomEditTextFields
-} from "./chunk-MTAVNAGW.js";
-import "./chunk-S65AQH6M.js";
+} from "./chunk-46XP7J3B.js";
+import "./chunk-DI4LCJHL.js";
 import "./chunk-PZ5AY32C.js";
 export {
   buildDefaultDomEditTextField,
@@ -46,4 +46,4 @@ export {
   resolveDomEditSelection,
   serializeDomEditTextFields
 };
-//# sourceMappingURL=domEditingLayers-NU6Z5QWA.js.map
+//# sourceMappingURL=domEditingLayers-AQBDFNUC.js.map

package/dist/index.d.ts

@@ -3089,7 +3089,7 @@ declare function useDomEditSession({ projectId, activeCompPath, compIdToSrc, cap
     getGsapAnimationsForSelection: (selection: DomEditSelection) => _hyperframes_parsers.GsapAnimation[] | Promise<_hyperframes_parsers.GsapAnimation[]>;
     handleAskAgent: () => void;
     handleAgentModalSubmit: (userInstruction: string) => Promise<void>;
-    handleBlockedDomMove: (selection: DomEditSelection) => void;
+    handleBlockedDomMove: (selection: DomEditSelection, reason?: string) => void;
     handleDomManualDragStart: () => void;
     handleDomEditElementDelete: (selection: DomEditSelection, options?: {
         expandGroup?: boolean;
@@ -3450,7 +3450,7 @@ interface DomEditOverlayProps {
         revealPanel?: boolean;
         additive?: boolean;
     }) => void;
-    onBlockedMove: (selection: DomEditSelection) => void;
+    onBlockedMove: (selection: DomEditSelection, reason?: string) => void;
     onManualDragStart?: () => void;
     onPathOffsetCommit: (selection: DomEditSelection, next: {
         x: number;

package/dist/index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-C2utDZt-.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-xB5O0hPw.css">
+    <script type="module" crossorigin src="/assets/index-BPJRf2X9.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CQN3M56N.css">
   </head>
   <body>
     <div data-hf-id="hf-aph5" id="root"></div>

package/dist/index.js

@@ -67,7 +67,7 @@ import {
   whenPreviewBooted,
   wrapTimeline,
   writeStudioUiPreferences
-} from "./chunk-7X4XRP3L.js";
+} from "./chunk-HIGHVWYD.js";
 import {
   Button,
   ContextMenu,
@@ -133,13 +133,13 @@ import {
   resolveDomEditSelection,
   serializeDomEditTextFields,
   setCompositionSourceMap
-} from "./chunk-MTAVNAGW.js";
+} from "./chunk-46XP7J3B.js";
 import {
   buildProjectApiPath,
   buildProjectHash,
   parseProjectHashRoute,
   parseProjectIdFromHash
-} from "./chunk-S65AQH6M.js";
+} from "./chunk-DI4LCJHL.js";
 import {
   __export
 } from "./chunk-PZ5AY32C.js";
@@ -13768,11 +13768,7 @@ import { Fragment as Fragment17, useId as useId4, useMemo as useMemo30 } from "r
 import { memo as memo10 } from "react";
 
 // src/player/components/TimelineClipFades.tsx
-import {
-  useEffect as useEffect21,
-  useRef as useRef28,
-  useState as useState16
-} from "react";
+import { useEffect as useEffect21, useRef as useRef28, useState as useState16 } from "react";
 import {
   HF_AUDIO_FADE_IN_ATTR,
   HF_AUDIO_FADE_OUT_ATTR,
@@ -13781,7 +13777,9 @@ import {
 } from "@hyperframes/core/audio-fade";
 import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var HANDLE_SIZE = 10;
-var HANDLE_HIT = 16;
+var HANDLE_HIT = 24;
+var HANDLE_Z_ABOVE_CLIP_CONTENT = 30;
+var SUPPRESS_CLIP_NATIVE_TITLE = "";
 var DRAG_THRESHOLD_PX = 2;
 function TimelineClipFades({ el, pps, widthPx, showHandles }) {
   const { onSetElementAttributeLive, onSetElementAttributeQuiet, onRevertElementAttributeLive } = useTimelineEditContextOptional();
@@ -13868,29 +13866,36 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
       g.edge === "in" ? "Fade in" : "Fade out"
     );
   };
-  const onHandleKeyDown = (e) => {
-    const g = gesture.current;
-    if (e.key !== "Escape" || !g) return;
-    e.preventDefault();
-    gesture.current = null;
-    setDragging(null);
-    revertGesture(g);
-  };
+  useEffect21(() => {
+    if (dragging === null) return;
+    const cancelOnWindowEscape = (e) => {
+      const g = gesture.current;
+      if (e.key !== "Escape" || !g) return;
+      e.preventDefault();
+      e.stopPropagation();
+      gesture.current = null;
+      setDragging(null);
+      revertGesture(g);
+    };
+    window.addEventListener("keydown", cancelOnWindowEscape, { capture: true });
+    return () => window.removeEventListener("keydown", cancelOnWindowEscape, { capture: true });
+  });
   const showIn = fades.fadeIn > 0;
   const showOut = fades.fadeOut > 0;
   const handlesVisible = showHandles || dragging !== null;
   if (!showIn && !showOut && !handlesVisible) return null;
-  const handleStyle = (leftPx) => ({
+  const hitWidth = Math.min(HANDLE_HIT, widthPx / 2);
+  const handleStyle = (edge) => ({
     position: "absolute",
     top: -(HANDLE_HIT - HANDLE_SIZE) / 2 + 1,
-    left: leftPx - HANDLE_HIT / 2,
-    width: HANDLE_HIT,
+    left: edge === "in" ? 0 : widthPx - hitWidth,
+    width: hitWidth,
     height: HANDLE_HIT,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     cursor: "ew-resize",
-    zIndex: 6,
+    zIndex: HANDLE_Z_ABOVE_CLIP_CONTENT,
     opacity: handlesVisible ? 1 : 0,
     pointerEvents: handlesVisible && canEdit ? "auto" : "none",
     touchAction: "none",
@@ -13909,7 +13914,8 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
           height: "100%",
           pointerEvents: "none",
           zIndex: 5,
-          overflow: "visible"
+          overflow: "hidden",
+          borderRadius: "inherit"
         },
         viewBox: `0 0 ${Math.max(widthPx, 1)} 100`,
         preserveAspectRatio: "none",
@@ -13972,13 +13978,12 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
           direction: "in",
           value: fades.fadeIn,
           max: Math.max(0, el.duration - fades.fadeOut),
-          style: handleStyle(inPx),
+          style: handleStyle("in"),
           dragging: dragging === "in",
           onPointerDown: onHandlePointerDown("in"),
           onPointerMove: onHandlePointerMove,
           onPointerUp: (e) => finish(e, false),
-          onPointerCancel: (e) => finish(e, true),
-          onKeyDown: onHandleKeyDown
+          onPointerCancel: (e) => finish(e, true)
         }
       ),
       /* @__PURE__ */ jsx29(
@@ -13987,13 +13992,12 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
           direction: "out",
           value: fades.fadeOut,
           max: Math.max(0, el.duration - fades.fadeIn),
-          style: handleStyle(widthPx - outPx),
+          style: handleStyle("out"),
           dragging: dragging === "out",
           onPointerDown: onHandlePointerDown("out"),
           onPointerMove: onHandlePointerMove,
           onPointerUp: (e) => finish(e, false),
-          onPointerCancel: (e) => finish(e, true),
-          onKeyDown: onHandleKeyDown
+          onPointerCancel: (e) => finish(e, true)
         }
       )
     ] })
@@ -14008,11 +14012,10 @@ function FadeHandle({
   onPointerDown,
   onPointerMove,
   onPointerUp,
-  onPointerCancel,
-  onKeyDown
+  onPointerCancel
 }) {
   const label = direction === "in" ? "Fade in" : "Fade out";
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx29(Tooltip, { label: `${label} ${formatFadeSeconds(value)} s`, children: /* @__PURE__ */ jsx29(
     "div",
     {
       role: "slider",
@@ -14023,18 +14026,17 @@ function FadeHandle({
       "aria-valuenow": value,
       "aria-valuetext": `${formatFadeSeconds(value)}s`,
       "data-testid": `clip-fade-handle-${direction}`,
-      title: `${label}: ${formatFadeSeconds(value)}s \u2014 drag to change`,
+      title: SUPPRESS_CLIP_NATIVE_TITLE,
       style,
       onPointerDown,
       onPointerMove,
       onPointerUp,
       onPointerCancel,
-      onKeyDown,
       onClick: (e) => e.stopPropagation(),
       onDoubleClick: (e) => e.stopPropagation(),
       children: /* @__PURE__ */ jsx29(FadeDot, { active: dragging })
     }
-  );
+  ) });
 }
 function FadeDot({ active }) {
   return /* @__PURE__ */ jsx29(
@@ -14043,10 +14045,12 @@ function FadeDot({ active }) {
       "aria-hidden": "true",
       style: {
         display: "block",
+        flexShrink: 0,
+        pointerEvents: "none",
         width: HANDLE_SIZE,
         height: HANDLE_SIZE,
         borderRadius: "50%",
-        background: active ? "var(--timeline-fade-dot-active)" : "var(--clip-handle)",
+        background: "var(--timeline-fade-dot)",
         boxShadow: "0 0 0 1.5px var(--timeline-fade-dot-ring)",
         transform: active ? "scale(1.15)" : void 0,
         transition: "transform 80ms ease-out"
@@ -27804,10 +27808,11 @@ function usePreviewReadOnly() {
 function usePreviewReadOnlyReason() {
   return useContext8(PreviewReadOnlyContext).reason;
 }
-function useManualEditDisabledFlags(capabilities) {
+function useManualEditDisabledFlags(capabilities, offset = { x: 0, y: 0 }) {
   const { readOnly } = useContext8(PreviewReadOnlyContext);
+  const unreadable = !Number.isFinite(offset.x) || !Number.isFinite(offset.y);
   return {
-    manualOffsetEditingDisabled: !capabilities?.canApplyManualOffset || readOnly,
+    manualOffsetEditingDisabled: !capabilities?.canApplyManualOffset || readOnly || unreadable,
     manualSizeEditingDisabled: !capabilities?.canApplyManualSize || readOnly,
     manualRotationEditingDisabled: !capabilities?.canApplyManualRotation || readOnly
   };
@@ -31301,7 +31306,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-NU6Z5QWA.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-AQBDFNUC.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -32677,49 +32682,75 @@ function scanAllRuntimeKeyframes(iframe, clipById) {
 }
 
 // src/components/editor/plainTranslate.ts
-var TERM = /^(-?\d*\.?\d+(?:e[-+]?\d+)?)(px|%)$/i;
-var SIGN = { "+": 1, "-": -1 };
-function termPx(term, side) {
-  const match = TERM.exec(term ?? "");
-  return match ? Number(match[1]) * (match[2] === "%" ? side / 100 : 1) : null;
-}
-function resolveLength(value, side) {
-  const parts = (/^calc\((.*)\)$/.exec(value)?.[1] ?? value).split(" ");
-  if (parts.length % 2 === 0) return null;
-  let total = termPx(parts[0], side);
-  for (let i = 1; i < parts.length && total !== null; i += 2) {
-    const term = termPx(parts[i + 1], side);
-    const sign = SIGN[parts[i] ?? ""];
-    total = term === null || !sign ? null : total + sign * term;
-  }
-  return total;
-}
-function borderBox(cs, size, a, b) {
+var TOKEN = /\s*(?:(\d*\.?\d+(?:e[-+]?\d+)?)(px|%)?|([a-z]+)\(|([-+*/(),]))/giy;
+var FUNCTIONS = {
+  "(": ([a = Number.NaN]) => a,
+  "calc(": ([a = Number.NaN]) => a,
+  "min(": (args) => Math.min(...args),
+  "max(": (args) => Math.max(...args),
+  "clamp(": ([lo = Number.NaN, v = Number.NaN, hi = Number.NaN]) => Math.max(lo, Math.min(v, hi))
+};
+function tokenize(value, side) {
+  const tokens = [];
+  const end = value.trimEnd().length;
+  TOKEN.lastIndex = 0;
+  for (let m = TOKEN.exec(value); m; m = TOKEN.lastIndex < end ? TOKEN.exec(value) : null) {
+    if (m[1]) tokens.push(Number(m[1]) * (m[2] === "%" ? side / 100 : 1));
+    else tokens.push(m[3] ? `${m[3].toLowerCase()}(` : m[4] ?? "");
+  }
+  return TOKEN.lastIndex < end ? [] : tokens;
+}
+function evaluateLength(value, side) {
+  const tokens = tokenize(value, side);
+  let i = 0;
+  const next = () => tokens[i++];
+  const take = (...ops) => ops.includes(tokens[i]) && next();
+  function sum() {
+    let total2 = product();
+    for (let op = take("+", "-"); op; op = take("+", "-"))
+      total2 += (op === "+" ? 1 : -1) * product();
+    return total2;
+  }
+  function product() {
+    let total2 = unary();
+    for (let op = take("*", "/"); op; op = take("*", "/"))
+      total2 = op === "*" ? total2 * unary() : total2 / unary();
+    return total2;
+  }
+  function unary() {
+    return take("-") ? -unary() : atom();
+  }
+  function atom() {
+    const token = next();
+    if (typeof token === "number") return token;
+    const fn = FUNCTIONS[token ?? ""];
+    if (!fn) return Number.NaN;
+    const args = [sum()];
+    while (take(",")) args.push(sum());
+    return take(")") ? fn(args) : Number.NaN;
+  }
+  const total = tokens.length ? sum() : Number.NaN;
+  return i === tokens.length ? total : Number.NaN;
+}
+var CONTENT_BOXES = /* @__PURE__ */ new Set(["content-box", "fill-box"]);
+function referenceBox(cs, size, a, b) {
   const n = (prop) => Number.parseFloat(cs.getPropertyValue(prop)) || 0;
   const pad = n(`padding-${a}`) + n(`padding-${b}`) + n(`border-${a}-width`) + n(`border-${b}-width`);
-  return n(size) + (cs.boxSizing === "border-box" ? 0 : pad);
-}
-function resolveInTransform(el, x, y) {
-  const style = el.style;
-  const saved2 = [style.getPropertyValue("transform"), style.getPropertyPriority("transform")];
-  style.setProperty("transform", `translate(${x}, ${y})`, "important");
-  try {
-    const resolved2 = el.ownerDocument.defaultView?.getComputedStyle(el).transform ?? "";
-    const matrix = new DOMMatrixReadOnly(resolved2.startsWith("matrix") ? resolved2 : void 0);
-    return { x: matrix.m41, y: matrix.m42 };
-  } finally {
-    style.setProperty("transform", saved2[0] ?? "", saved2[1] ?? "");
-  }
+  const content = n(size) - (cs.boxSizing === "border-box" ? pad : 0);
+  return CONTENT_BOXES.has(cs.getPropertyValue("transform-box")) ? content : content + pad;
 }
 function readTranslatePx(el) {
   const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
-  const value = el.style.getPropertyValue("translate") || cs?.translate || "none";
+  const value = cs?.translate || el.style.getPropertyValue("translate") || "none";
   if (value === "none") return { x: 0, y: 0 };
   const [x = "0px", y = "0px"] = splitTopLevelWhitespace(value);
-  const px = cs && resolveLength(x, borderBox(cs, "width", "left", "right"));
-  const py = cs && resolveLength(y, borderBox(cs, "height", "top", "bottom"));
-  return px != null && py != null ? { x: px, y: py } : resolveInTransform(el, x, y);
+  const side = (size, a, b) => cs ? referenceBox(cs, size, a, b) : 0;
+  return {
+    x: evaluateLength(x, side("width", "left", "right")),
+    y: evaluateLength(y, side("height", "top", "bottom"))
+  };
 }
+var UNREADABLE_TRANSLATE = "Studio can't read this layer's translate. Move it in the Code tab.";
 function formatTranslatePx(p) {
   return `${roundTo3(p.x)}px ${roundTo3(p.y)}px`;
 }
@@ -32907,6 +32938,8 @@ function resolveManualOffsetForPointerDelta(input) {
 function createManualOffsetDragMember(input) {
   const plainTranslate = !!input.gesture && !gsapWritesPosition(input.element);
   const initialOffset = plainTranslate ? readTranslatePx(input.element) : readAppliedStudioPathOffset(input.element);
+  if (!finitePoint(initialOffset))
+    return { ok: false, reason: UNREADABLE_TRANSLATE, selection: input.selection };
   const win = input.element.ownerDocument.defaultView;
   const gsapX = !plainTranslate && win?.gsap?.getProperty?.(input.element, "x") || 0;
   const gsapY = !plainTranslate && win?.gsap?.getProperty?.(input.element, "y") || 0;
@@ -33707,7 +33740,7 @@ function startGroupDrag(e, opts) {
       restoreManualOffsetDragMembers(members);
       e.preventDefault();
       e.stopPropagation();
-      opts.onBlockedMoveRef.current(result.selection);
+      opts.onBlockedMoveRef.current(result.selection, result.reason);
       return false;
     }
     members.push(result.member);
@@ -33799,7 +33832,7 @@ function startGesture(kind, e, opts, options) {
       gesture: "drag"
     });
     if (!result.ok) {
-      opts.onBlockedMoveRef.current(result.selection);
+      opts.onBlockedMoveRef.current(result.selection, result.reason);
       return false;
     }
     pathOffsetMember = result.member;
@@ -34538,7 +34571,7 @@ function useDomEditNudge(params) {
     restoreManualOffsetDragMembers(session.members);
     endManualOffsetDragMembers(session.members);
   }, [params.allowCanvasMovement]);
-  const beginSession = () => {
+  const beginSession = (event) => {
     const p = paramsRef.current;
     const groupItems = p.groupOverlayItemsRef.current;
     const isGroup = groupItems.length > 1;
@@ -34549,7 +34582,8 @@ function useDomEditNudge(params) {
       const result = createManualOffsetDragMember({ ...target, gesture: "nudge" });
       if (!result.ok) {
         restoreManualOffsetDragMembers(members);
-        return null;
+        if (!event.repeat) p.onBlockedMoveRef.current(result.selection, result.reason);
+        return "refused";
       }
       members.push(result.member);
     }
@@ -34562,7 +34596,8 @@ function useDomEditNudge(params) {
     if (shouldIgnoreNudgeKey(p, event)) return;
     const delta = resolveCanvasNudgeDelta(event);
     if (!delta) return;
-    const session = sessionRef.current ?? beginSession();
+    const session = sessionRef.current ?? beginSession(event);
+    if (session === "refused") return void event.preventDefault();
     if (!session) return;
     sessionRef.current = session;
     event.preventDefault();
@@ -36827,6 +36862,7 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
     gestureRef,
     groupGestureRef,
     blockedMoveRef,
+    onBlockedMoveRef,
     onManualDragStartRef,
     onPathOffsetCommitRef,
     onGroupPathOffsetCommitRef
@@ -47988,6 +48024,8 @@ function createTransformCommitHandlers({
     ))
       return;
     const current = readMoveOffset(element.element);
+    if (!Number.isFinite(current.x) || !Number.isFinite(current.y))
+      return void showToast?.(UNREADABLE_TRANSLATE);
     await Promise.resolve(
       onSetManualOffset(element, {
         x: axis === "x" ? parsed : current.x,
@@ -49603,13 +49641,13 @@ function useColorGradingController({
   useEffect69(() => {
     setMediaMetadata(null);
     if (!selectedAssetPath) return;
-    const cacheKey = `${projectId}:${selectedAssetPath}`;
+    const cacheKey = mediaMetadataUrl(projectId, selectedAssetPath);
     if (MEDIA_METADATA_CACHE.has(cacheKey)) {
       setMediaMetadata(MEDIA_METADATA_CACHE.get(cacheKey) ?? null);
       return;
     }
     const controller = new AbortController();
-    fetch(mediaMetadataUrl(projectId, selectedAssetPath), { signal: controller.signal }).then(async (response) => {
+    fetch(cacheKey, { signal: controller.signal }).then(async (response) => {
       if (!response.ok) return { ok: false };
       const data = await response.json();
       return { ok: true, metadata: data?.metadata ?? null };
@@ -65060,7 +65098,8 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
     scale: 1,
     transformPerspective: 0
   };
-  const { manualOffsetEditingDisabled, manualSizeEditingDisabled, manualRotationEditingDisabled } = useManualEditDisabledFlags(element?.capabilities);
+  const manualOffset = element ? readMoveOffset(element.element) : { x: 0, y: 0 };
+  const { manualOffsetEditingDisabled, manualSizeEditingDisabled, manualRotationEditingDisabled } = useManualEditDisabledFlags(element?.capabilities, manualOffset);
   if (!element) {
     return /* @__PURE__ */ jsx175(
       PropertyPanelEmptyState,
@@ -65077,7 +65116,6 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
   const sourceLabel = element.id ? `#${element.id}` : element.selector ?? "";
   const sections = resolveEditingSections(domEditSelectionToFacts(element, gsapAnimations.length));
   const showEditableSections = element.capabilities.canEditStyles && sections.style;
-  const manualOffset = readMoveOffset(element.element);
   const manualSize = readStudioBoxSize(element.element);
   const resolvedWidth = manualSize.width > 0 ? manualSize.width : parsePxMetricValue(styles.width ?? "") ?? element.boundingBox.width;
   const resolvedHeight = manualSize.height > 0 ? manualSize.height : parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height;
@@ -73027,9 +73065,9 @@ function usePreviewInteraction({
     updateDomEditHoverSelection(null);
   }, [updateDomEditHoverSelection]);
   const handleBlockedDomMove = useCallback120(
-    (selection) => {
+    (selection, reason) => {
       showToast(
-        selection.capabilities.reasonIfDisabled ?? "This element can't be adjusted directly from the preview.",
+        reason ?? selection.capabilities.reasonIfDisabled ?? "This element can't be adjusted directly from the preview.",
         "info"
       );
     },