hyperframes 0.8.143 → 0.8.145

package/dist/studio/{chunk-TFLU2MGI.js → chunk-6JY3MTIX.js}

@@ -1,3 +1,7 @@
+import {
+  __export
+} from "./chunk-PZ5AY32C.js";
+
 // src/utils/sourceScopedSelectorIndex.ts
 var activePass = null;
 function withSelectorIndexPass(doc, run) {
@@ -303,6 +307,12 @@ function roundTo3(val) {
 function roundToLayoutPx(val) {
   return Math.round(val);
 }
+function roundToLayoutSize(size) {
+  return {
+    width: roundToLayoutPx(Math.max(1, size.width)),
+    height: roundToLayoutPx(Math.max(1, size.height))
+  };
+}
 function roundToCenti(val) {
   return Math.round(val * 100) / 100;
 }
@@ -1026,6 +1036,94 @@ function buildProjectApiPath(projectId, suffix = "") {
   return `/api/projects/${encodeProjectId(projectId)}${normalizedSuffix}`;
 }
 
+// src/components/editor/manualEditingAvailability.ts
+var manualEditingAvailability_exports = {};
+__export(manualEditingAvailability_exports, {
+  STUDIO_API_SAME_ORIGIN_CREDENTIALS: () => STUDIO_API_SAME_ORIGIN_CREDENTIALS,
+  STUDIO_FLAT_INSPECTOR_ENABLED: () => STUDIO_FLAT_INSPECTOR_ENABLED,
+  STUDIO_SDK_CUTOVER_ENABLED: () => STUDIO_SDK_CUTOVER_ENABLED,
+  STUDIO_SDK_CUTOVER_FAMILIES: () => STUDIO_SDK_CUTOVER_FAMILIES,
+  STUDIO_SDK_RESOLVER_SHADOW_ENABLED: () => STUDIO_SDK_RESOLVER_SHADOW_ENABLED,
+  resolveStudioBooleanEnvFlag: () => resolveStudioBooleanEnvFlag
+});
+
+// src/utils/sdkCutoverPolicy.ts
+var STUDIO_SDK_OPERATION_FAMILIES = [
+  "dom",
+  "timing",
+  "gsap-animation",
+  "gsap-keyframe",
+  "lifecycle"
+];
+function resolveEnabledSdkFamilies(env2, masterEnabled) {
+  if (!masterEnabled) return /* @__PURE__ */ new Set();
+  const raw = env2["VITE_STUDIO_SDK_CUTOVER_FAMILIES"];
+  if (typeof raw !== "string" || raw.trim() === "") return new Set(STUDIO_SDK_OPERATION_FAMILIES);
+  const requested = raw.split(",").map((family) => family.trim()).filter(Boolean);
+  const known = new Set(STUDIO_SDK_OPERATION_FAMILIES);
+  const unknown = requested.filter((family) => !known.has(family));
+  if (unknown.length > 0) {
+    throw new Error(`Unknown Studio SDK cutover families: ${unknown.join(", ")}`);
+  }
+  return new Set(requested);
+}
+function isSdkFamilyEnabled(masterEnabled, configured, family) {
+  return masterEnabled && (configured?.has(family) ?? true);
+}
+
+// src/components/editor/manualEditingAvailability.ts
+var TRUTHY_ENV_VALUES = /* @__PURE__ */ new Set(["1", "true", "yes", "on", "enabled"]);
+var FALSY_ENV_VALUES = /* @__PURE__ */ new Set(["0", "false", "no", "off", "disabled"]);
+function resolveStudioBooleanEnvFlag(env2, names, fallback) {
+  for (const name of names) {
+    const value = env2[name];
+    if (typeof value === "boolean") return value;
+    if (typeof value !== "string") continue;
+    const normalized = value.trim().toLowerCase();
+    if (!normalized) continue;
+    if (TRUTHY_ENV_VALUES.has(normalized)) return true;
+    if (FALSY_ENV_VALUES.has(normalized)) return false;
+  }
+  return fallback;
+}
+var runtimeEnv = typeof window !== "undefined" ? window.__HF_STUDIO_ENV__ ?? {} : {};
+var env = { ...import.meta.env ?? {}, ...runtimeEnv };
+var STUDIO_SDK_CUTOVER_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_SDK_CUTOVER_ENABLED"],
+  true
+);
+var STUDIO_SDK_CUTOVER_FAMILIES = resolveEnabledSdkFamilies(
+  env,
+  STUDIO_SDK_CUTOVER_ENABLED
+);
+var STUDIO_SDK_RESOLVER_SHADOW_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_SDK_RESOLVER_SHADOW_ENABLED"],
+  true
+);
+var STUDIO_FLAT_INSPECTOR_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_FLAT_INSPECTOR", "VITE_STUDIO_FLAT_INSPECTOR_ENABLED"],
+  true
+);
+var STUDIO_API_SAME_ORIGIN_CREDENTIALS = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_API_SAME_ORIGIN_CREDENTIALS"],
+  false
+);
+
+// src/utils/studioApiFetch.ts
+var LOOPBACK_HOSTS = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "[::1]"]);
+function studioApiCredentials() {
+  if (STUDIO_API_SAME_ORIGIN_CREDENTIALS) return "same-origin";
+  const host = globalThis.location?.hostname;
+  return !host || LOOPBACK_HOSTS.has(host) ? "omit" : "same-origin";
+}
+function studioApiFetch(input, init) {
+  return globalThis.fetch(input, { ...init, credentials: studioApiCredentials() });
+}
+
 export {
   buildProjectHash,
   parseProjectHashRoute,
@@ -1033,6 +1131,7 @@ export {
   buildProjectApiPath,
   roundTo3,
   roundToLayoutPx,
+  roundToLayoutSize,
   roundToCenti,
   parseCssColor,
   resolvePickerColor,
@@ -1093,6 +1192,13 @@ export {
   deriveTimelineStoreKeyForDomId,
   previewElementFinder,
   findClipElementById,
-  createTimelineDomNodeResolver
+  createTimelineDomNodeResolver,
+  isSdkFamilyEnabled,
+  STUDIO_SDK_CUTOVER_ENABLED,
+  STUDIO_SDK_CUTOVER_FAMILIES,
+  STUDIO_SDK_RESOLVER_SHADOW_ENABLED,
+  STUDIO_FLAT_INSPECTOR_ENABLED,
+  manualEditingAvailability_exports,
+  studioApiFetch
 };
-//# sourceMappingURL=chunk-TFLU2MGI.js.map
+//# sourceMappingURL=chunk-6JY3MTIX.js.map

package/dist/studio/{chunk-H2DUOXTF.js → chunk-NZPJUZKT.js}

@@ -1,10 +1,11 @@
 import {
   HyperframesLoader
-} from "./chunk-LOVBLSMR.js";
+} from "./chunk-Y2OHHNM2.js";
 import {
   buildProjectApiPath,
-  splitTimelineElementKey
-} from "./chunk-TFLU2MGI.js";
+  splitTimelineElementKey,
+  studioApiFetch
+} from "./chunk-6JY3MTIX.js";
 
 // src/player/lib/time.ts
 var STUDIO_PREVIEW_FPS = 30;
@@ -959,6 +960,87 @@ function whenPreviewBooted(projectId) {
   });
 }
 
+// src/player/sceneSwap.ts
+var SCENES_SWAPPED = "hf-scenes-swapped";
+var SCENE_SWAP_MS = 5e3;
+var PREVIEW_DOCUMENT_LOADED = "hf-preview-document-loaded";
+function announcePreviewDocumentLoaded(iframe) {
+  iframe.dispatchEvent(new Event(PREVIEW_DOCUMENT_LOADED));
+}
+function onPreviewDocumentLoaded(iframe, onLoaded) {
+  iframe.addEventListener(PREVIEW_DOCUMENT_LOADED, onLoaded);
+  return () => iframe.removeEventListener(PREVIEW_DOCUMENT_LOADED, onLoaded);
+}
+function onPreviewContentReplaced(iframe, onReplaced) {
+  const stopLoaded = onPreviewDocumentLoaded(iframe, onReplaced);
+  iframe.addEventListener(SCENES_SWAPPED, onReplaced);
+  return () => {
+    stopLoaded();
+    iframe.removeEventListener(SCENES_SWAPPED, onReplaced);
+  };
+}
+var PREVIEW_PROMOTED = "hf-preview-promoted";
+function announcePreviewPromoted(promotion) {
+  promotion.live.ownerDocument.dispatchEvent(
+    new CustomEvent(PREVIEW_PROMOTED, { detail: promotion })
+  );
+}
+function onPreviewPromoted(doc, listener) {
+  const handle = (event) => listener(event.detail);
+  doc.addEventListener(PREVIEW_PROMOTED, handle);
+  return () => doc.removeEventListener(PREVIEW_PROMOTED, handle);
+}
+function markScenesStale(iframe, files) {
+  const doc = iframe?.contentDocument;
+  const meta = doc?.querySelector('meta[name="hf-scene-parts"]');
+  if (!doc || !meta) return;
+  let parts;
+  try {
+    parts = JSON.parse(meta.content);
+  } catch {
+    return;
+  }
+  for (const file of files) {
+    const hosts = doc.querySelectorAll(`[data-composition-file="${CSS.escape(file)}"]`);
+    if (hosts.length === 0 && file.endsWith(".html")) parts.shared = "";
+    for (const host of hosts) {
+      const scene = host.closest("[data-hf-scene]")?.getAttribute("data-hf-scene");
+      if (scene && scene in parts.scenes) parts.scenes[scene] = "";
+    }
+  }
+  meta.content = JSON.stringify(parts);
+}
+function sceneSwapFor(iframe) {
+  const win = iframe.contentWindow;
+  const swap = win?.__hfSwapScenes;
+  if (typeof swap !== "function") return null;
+  return async (url, isCurrent, cancel) => {
+    if (cancel?.aborted) throw cancel.reason;
+    const deadline = new AbortController();
+    const timer = setTimeout(
+      () => deadline.abort(new Error("the preview took too long to swap")),
+      SCENE_SWAP_MS
+    );
+    cancel?.addEventListener("abort", () => deadline.abort(cancel.reason), { once: true });
+    const swapping = (async () => {
+      const response = await studioApiFetch(url, { signal: deadline.signal });
+      if (!response.ok) throw new Error(`preview request failed with ${response.status}`);
+      const html = await response.text();
+      if (!isCurrent()) throw new Error("superseded by a newer reload");
+      await swap.call(win, html, deadline.signal);
+    })();
+    const expired = new Promise(
+      (_resolve, reject) => deadline.signal.addEventListener("abort", () => reject(deadline.signal.reason))
+    );
+    try {
+      await Promise.race([swapping, expired]);
+    } finally {
+      clearTimeout(timer);
+    }
+    iframe.dispatchEvent(new Event(SCENES_SWAPPED));
+  };
+}
+
 // src/player/components/Player.tsx
 import { forwardRef, useEffect as useEffect2, useRef, useState } from "react";
 import { isLottieAnimationLoaded } from "@hyperframes/core/runtime/lottie-readiness";
@@ -1052,6 +1134,7 @@ function hasUnloadedAssets(iframe, lastResult) {
     return lastResult;
   }
 }
+var runtimeBootedIn = (iframe) => iframe.contentWindow?.__playerReady === true;
 var Player = forwardRef(
   ({
     projectId,
@@ -1130,9 +1213,11 @@ var Player = forwardRef(
           const loading = getShaderTransitionLoading(event);
           if (loading !== null) setShaderTransitionLoading(loading);
         };
+        let loadedDocument = null;
         const handleReady = () => {
           setPreviewError(null);
           setCompositionLoading(false);
+          if (iframe.contentDocument && runtimeBootedIn(iframe)) handleLoad();
         };
         const handlePainted = () => {
           setPainted(true);
@@ -1145,6 +1230,9 @@ var Player = forwardRef(
           setCompositionLoading(false);
         };
         const handleLoad = () => {
+          const doc = iframe.contentDocument;
+          if (doc && doc === loadedDocument) return;
+          loadedDocument = doc;
           loadCountRef.current++;
           setLoaded(true);
           setPreviewError(null);
@@ -1159,6 +1247,7 @@ var Player = forwardRef(
             container.addEventListener("animationend", onEnd, { once: true });
           }
           onLoadRef.current();
+          announcePreviewDocumentLoaded(iframe);
           if (assetPollRef.current) clearInterval(assetPollRef.current);
           const isContentRefresh = loadCountRef.current > 1;
           let lastUnloaded = isContentRefresh ? false : hasUnloadedAssets(iframe, false);
@@ -1437,6 +1526,13 @@ export {
   usePlayerStore,
   isPreviewBooted,
   whenPreviewBooted,
+  announcePreviewDocumentLoaded,
+  onPreviewDocumentLoaded,
+  onPreviewContentReplaced,
+  announcePreviewPromoted,
+  onPreviewPromoted,
+  markScenesStale,
+  sceneSwapFor,
   Player
 };
-//# sourceMappingURL=chunk-H2DUOXTF.js.map
+//# sourceMappingURL=chunk-NZPJUZKT.js.map

package/dist/studio/{chunk-UYWON5AX.js → chunk-TP6D3U37.js}

@@ -17,99 +17,12 @@ import {
   normalizeTimelineCompositionSource,
   parsePx,
   querySelectorAllSafely,
+  studioApiFetch,
   withSelectorIndexPass
-} from "./chunk-TFLU2MGI.js";
-import {
-  __export
-} from "./chunk-PZ5AY32C.js";
-
-// src/components/editor/manualEditingAvailability.ts
-var manualEditingAvailability_exports = {};
-__export(manualEditingAvailability_exports, {
-  STUDIO_API_SAME_ORIGIN_CREDENTIALS: () => STUDIO_API_SAME_ORIGIN_CREDENTIALS,
-  STUDIO_FLAT_INSPECTOR_ENABLED: () => STUDIO_FLAT_INSPECTOR_ENABLED,
-  STUDIO_SDK_CUTOVER_ENABLED: () => STUDIO_SDK_CUTOVER_ENABLED,
-  STUDIO_SDK_CUTOVER_FAMILIES: () => STUDIO_SDK_CUTOVER_FAMILIES,
-  STUDIO_SDK_RESOLVER_SHADOW_ENABLED: () => STUDIO_SDK_RESOLVER_SHADOW_ENABLED,
-  resolveStudioBooleanEnvFlag: () => resolveStudioBooleanEnvFlag
-});
-
-// src/utils/sdkCutoverPolicy.ts
-var STUDIO_SDK_OPERATION_FAMILIES = [
-  "dom",
-  "timing",
-  "gsap-animation",
-  "gsap-keyframe",
-  "lifecycle"
-];
-function resolveEnabledSdkFamilies(env2, masterEnabled) {
-  if (!masterEnabled) return /* @__PURE__ */ new Set();
-  const raw = env2["VITE_STUDIO_SDK_CUTOVER_FAMILIES"];
-  if (typeof raw !== "string" || raw.trim() === "") return new Set(STUDIO_SDK_OPERATION_FAMILIES);
-  const requested = raw.split(",").map((family) => family.trim()).filter(Boolean);
-  const known = new Set(STUDIO_SDK_OPERATION_FAMILIES);
-  const unknown = requested.filter((family) => !known.has(family));
-  if (unknown.length > 0) {
-    throw new Error(`Unknown Studio SDK cutover families: ${unknown.join(", ")}`);
-  }
-  return new Set(requested);
-}
-function isSdkFamilyEnabled(masterEnabled, configured, family) {
-  return masterEnabled && (configured?.has(family) ?? true);
-}
+} from "./chunk-6JY3MTIX.js";
 
-// src/components/editor/manualEditingAvailability.ts
-var TRUTHY_ENV_VALUES = /* @__PURE__ */ new Set(["1", "true", "yes", "on", "enabled"]);
-var FALSY_ENV_VALUES = /* @__PURE__ */ new Set(["0", "false", "no", "off", "disabled"]);
-function resolveStudioBooleanEnvFlag(env2, names, fallback) {
-  for (const name of names) {
-    const value = env2[name];
-    if (typeof value === "boolean") return value;
-    if (typeof value !== "string") continue;
-    const normalized = value.trim().toLowerCase();
-    if (!normalized) continue;
-    if (TRUTHY_ENV_VALUES.has(normalized)) return true;
-    if (FALSY_ENV_VALUES.has(normalized)) return false;
-  }
-  return fallback;
-}
-var runtimeEnv = typeof window !== "undefined" ? window.__HF_STUDIO_ENV__ ?? {} : {};
-var env = { ...import.meta.env ?? {}, ...runtimeEnv };
-var STUDIO_SDK_CUTOVER_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_SDK_CUTOVER_ENABLED"],
-  true
-);
-var STUDIO_SDK_CUTOVER_FAMILIES = resolveEnabledSdkFamilies(
-  env,
-  STUDIO_SDK_CUTOVER_ENABLED
-);
-var STUDIO_SDK_RESOLVER_SHADOW_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_SDK_RESOLVER_SHADOW_ENABLED"],
-  true
-);
-var STUDIO_FLAT_INSPECTOR_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_ENABLE_FLAT_INSPECTOR", "VITE_STUDIO_FLAT_INSPECTOR_ENABLED"],
-  true
-);
-var STUDIO_API_SAME_ORIGIN_CREDENTIALS = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_API_SAME_ORIGIN_CREDENTIALS"],
-  false
-);
-
-// src/utils/studioApiFetch.ts
-var LOOPBACK_HOSTS = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "[::1]"]);
-function studioApiCredentials() {
-  if (STUDIO_API_SAME_ORIGIN_CREDENTIALS) return "same-origin";
-  const host = globalThis.location?.hostname;
-  return !host || LOOPBACK_HOSTS.has(host) ? "omit" : "same-origin";
-}
-function studioApiFetch(input, init) {
-  return globalThis.fetch(input, { ...init, credentials: studioApiCredentials() });
-}
+// src/components/editor/domEditingLayers.ts
+import { PREVIEW_ONLY_ATTRS } from "@hyperframes/core/studio-preview-mark";
 
 // src/components/editor/probeSourceElement.ts
 function knownSourceAnswer(previous, element, sourceFile, target) {
@@ -548,6 +461,7 @@ function getTextFieldLabel(_tagName, index, total, source) {
   if (source === "self" || total === 1) return "Content";
   return `Text ${index + 1}`;
 }
+var NOT_COPIED_ATTRS = /* @__PURE__ */ new Set(["style", ...PREVIEW_ONLY_ATTRS]);
 function buildTextField(el, index, total, source, sourceChildIndex) {
   const tagName = el.tagName.toLowerCase();
   const key = el.getAttribute("data-hf-text-key") ?? `${source}:${index}:${tagName}`;
@@ -556,7 +470,7 @@ function buildTextField(el, index, total, source, sourceChildIndex) {
     label: getTextFieldLabel(tagName, index, total, source),
     value: el.textContent ?? "",
     tagName,
-    attributes: Array.from(el.attributes).filter((attribute) => attribute.name !== "style").map((attribute) => ({
+    attributes: Array.from(el.attributes).filter((attribute) => !NOT_COPIED_ATTRS.has(attribute.name)).map((attribute) => ({
       name: attribute.name,
       value: attribute.value
     })),
@@ -898,13 +812,6 @@ function buildDomEditPatchTarget(selection) {
 }
 
 export {
-  isSdkFamilyEnabled,
-  STUDIO_SDK_CUTOVER_ENABLED,
-  STUDIO_SDK_CUTOVER_FAMILIES,
-  STUDIO_SDK_RESOLVER_SHADOW_ENABLED,
-  STUDIO_FLAT_INSPECTOR_ENABLED,
-  manualEditingAvailability_exports,
-  studioApiFetch,
   isElementComputedVisible,
   getDomLayerPatchTarget,
   resolveAllVisualDomEditTargets,
@@ -935,4 +842,4 @@ export {
   readHfId,
   buildDomEditPatchTarget
 };
-//# sourceMappingURL=chunk-UYWON5AX.js.map
+//# sourceMappingURL=chunk-TP6D3U37.js.map

package/dist/studio/{chunk-LOVBLSMR.js → chunk-Y2OHHNM2.js}

@@ -271,7 +271,17 @@ function HyperframesLoader({
 // src/components/ui/Menu.tsx
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { useRef } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var CONTENTS = { display: "contents" };
+function useInlinePortal(container) {
+  const host = useRef(null);
+  if (container !== null) return { host: null, portal: { container } };
+  return {
+    host: /* @__PURE__ */ jsx6("span", { ref: host, style: CONTENTS }),
+    portal: { container: host, style: CONTENTS }
+  };
+}
 var SIDE_OFFSET = 6;
 var VIEWPORT_MARGIN = 8;
 function floatingMotion(openDuration) {
@@ -315,9 +325,11 @@ function Menu({
   "data-preview-state": previewState,
   ...root
 }) {
+  const inline = useInlinePortal(container);
   return /* @__PURE__ */ jsxs4(BaseMenu.Root, { ...root, children: [
     /* @__PURE__ */ jsx6(BaseMenu.Trigger, { render: trigger }),
-    /* @__PURE__ */ jsx6(BaseMenu.Portal, { container, children: /* @__PURE__ */ jsx6(
+    inline.host,
+    /* @__PURE__ */ jsx6(BaseMenu.Portal, { ...inline.portal, children: /* @__PURE__ */ jsx6(
       BaseMenu.Positioner,
       {
         side,
@@ -347,9 +359,11 @@ function ContextMenu({
   "data-preview-state": previewState,
   ...root
 }) {
+  const inline = useInlinePortal(container);
   return /* @__PURE__ */ jsxs4(BaseContextMenu.Root, { ...root, children: [
     /* @__PURE__ */ jsx6(BaseContextMenu.Trigger, { render: trigger }),
-    /* @__PURE__ */ jsx6(BaseContextMenu.Portal, { container, children: /* @__PURE__ */ jsx6(BaseContextMenu.Positioner, { collisionPadding: VIEWPORT_MARGIN, className: POPUP_LAYER, children: /* @__PURE__ */ jsx6(
+    inline.host,
+    /* @__PURE__ */ jsx6(BaseContextMenu.Portal, { ...inline.portal, children: /* @__PURE__ */ jsx6(BaseContextMenu.Positioner, { collisionPadding: VIEWPORT_MARGIN, className: POPUP_LAYER, children: /* @__PURE__ */ jsx6(
       BaseContextMenu.Popup,
       {
         "aria-label": ariaLabel,
@@ -401,7 +415,7 @@ function MenuSeparator({ className, ...props }) {
 
 // src/components/ui/Tooltip.tsx
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-import { cloneElement, useId as useId2, useRef, useState } from "react";
+import { cloneElement, useId as useId2, useRef as useRef2, useState } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var SIDE_OFFSET2 = 6;
 var VIEWPORT_MARGIN2 = 8;
@@ -413,7 +427,7 @@ function Tooltip({
   disabled = false
 }) {
   const [open, setOpen] = useState(false);
-  const boxRef = useRef(null);
+  const boxRef = useRef2(null);
   const tooltipId = useId2();
   return /* @__PURE__ */ jsxs5(BaseTooltip.Root, { open, onOpenChange: setOpen, disabled, children: [
     /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay, render: /* @__PURE__ */ jsx7("span", { ref: boxRef, className: "contents" }), children: cloneElement(children, {
@@ -470,9 +484,11 @@ function Popover({
   "data-preview-state": previewState,
   ...root
 }) {
+  const inline = useInlinePortal(container);
   return /* @__PURE__ */ jsxs6(BasePopover.Root, { ...root, children: [
     /* @__PURE__ */ jsx8(BasePopover.Trigger, { render: trigger }),
-    /* @__PURE__ */ jsx8(BasePopover.Portal, { container, children: /* @__PURE__ */ jsx8(
+    inline.host,
+    /* @__PURE__ */ jsx8(BasePopover.Portal, { ...inline.portal, children: /* @__PURE__ */ jsx8(
       BasePopover.Positioner,
       {
         side,
@@ -501,7 +517,7 @@ function Popover({
 
 // src/components/ui/Input.tsx
 import { Input as BaseInput } from "@base-ui/react/input";
-import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect, useRef as useRef3, useState as useState2 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var fieldBase = cn(
   "flex min-w-0 items-center gap-1.5 h-ctl px-2 rounded-md",
@@ -532,9 +548,9 @@ function Input({
   ...props
 }) {
   const [draft, setDraft] = useState2(value);
-  const valueRef = useRef2(value);
+  const valueRef = useRef3(value);
   valueRef.current = value;
-  const dirtyRef = useRef2(false);
+  const dirtyRef = useRef3(false);
   useEffect(() => {
     if (!dirtyRef.current) setDraft(value);
   }, [value]);
@@ -585,7 +601,7 @@ function Input({
 
 // src/components/ui/NumberField.tsx
 import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
-import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect2, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function NumberField({
   label,
@@ -602,9 +618,9 @@ function NumberField({
 }) {
   const [draft, setDraft] = useState3(value);
   const [invalid, setInvalid] = useState3(false);
-  const inputRef = useRef3(null);
-  const committedRef = useRef3(value);
-  const valueRef = useRef3(value);
+  const inputRef = useRef4(null);
+  const committedRef = useRef4(value);
+  const valueRef = useRef4(value);
   valueRef.current = value;
   useEffect2(() => {
     committedRef.current = value;
@@ -756,7 +772,7 @@ function Select({
 
 // src/components/ui/Slider.tsx
 import { Slider as BaseSlider } from "@base-ui/react/slider";
-import { useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect3, useRef as useRef5, useState as useState4 } from "react";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var first = (next) => Array.isArray(next) ? next[0] : next;
 function Slider({
@@ -773,11 +789,11 @@ function Slider({
   "data-preview-state": previewState
 }) {
   const [draft, setDraft] = useState4(value);
-  const draggingRef = useRef4(false);
-  const abortedRef = useRef4(false);
-  const dragStartRef = useRef4(value);
-  const committedRef = useRef4(value);
-  const valueRef = useRef4(value);
+  const draggingRef = useRef5(false);
+  const abortedRef = useRef5(false);
+  const dragStartRef = useRef5(value);
+  const committedRef = useRef5(value);
+  const valueRef = useRef5(value);
   valueRef.current = value;
   useEffect3(() => {
     if (draggingRef.current) return;
@@ -951,4 +967,4 @@ export {
   Slider,
   Toggle
 };
-//# sourceMappingURL=chunk-LOVBLSMR.js.map
+//# sourceMappingURL=chunk-Y2OHHNM2.js.map

package/dist/studio/{domEditingLayers-KBTPQKGA.js → domEditingLayers-PTP2ICGM.js}

@@ -19,8 +19,8 @@ import {
   resolveDomEditCapabilities,
   resolveDomEditSelection,
   serializeDomEditTextFields
-} from "./chunk-UYWON5AX.js";
-import "./chunk-TFLU2MGI.js";
+} from "./chunk-TP6D3U37.js";
+import "./chunk-6JY3MTIX.js";
 import "./chunk-PZ5AY32C.js";
 export {
   buildDefaultDomEditTextField,
@@ -44,4 +44,4 @@ export {
   resolveDomEditSelection,
   serializeDomEditTextFields
 };
-//# sourceMappingURL=domEditingLayers-KBTPQKGA.js.map
+//# sourceMappingURL=domEditingLayers-PTP2ICGM.js.map

package/dist/studio/index.d.ts

@@ -2692,6 +2692,7 @@ interface StartRenderOptions {
     format?: "mp4" | "webm" | "mov";
     /** `"auto"` (default) renders at the composition's authored dimensions. */
     resolution?: ResolutionPreset | "auto";
+    gpu?: boolean;
     /**
      * Render a specific composition file. Omit it to render the composition the
      * user currently has open — only the sidebar's per-composition Render button
@@ -2728,7 +2729,7 @@ interface CompositionDimensions {
     width: number;
     height: number;
 }
-type StartRenderHandler = (format: "mp4" | "webm" | "mov", quality: "draft" | "standard" | "high", resolution: ResolutionPreset | "auto", fps: 24 | 30 | 60) => void | Promise<void>;
+type StartRenderHandler = (format: "mp4" | "webm" | "mov", quality: "draft" | "standard" | "high", resolution: ResolutionPreset | "auto", fps: 24 | 30 | 60, gpu?: boolean) => void | Promise<void>;
 interface RenderQueueProps {
     jobs: RenderJob[];
     projectId: string;
@@ -2764,9 +2765,10 @@ interface PersistedRenderSettings {
     format: "mp4" | "webm" | "mov";
     quality: "draft" | "standard" | "high";
     fps: 24 | 30 | 60;
+    gpu: boolean;
 }
 declare function getPersistedRenderSettings(): PersistedRenderSettings;
-declare function persistRenderSettings(format: PersistedRenderSettings["format"], quality: PersistedRenderSettings["quality"], fps: PersistedRenderSettings["fps"]): void;
+declare function persistRenderSettings(format: PersistedRenderSettings["format"], quality: PersistedRenderSettings["quality"], fps: PersistedRenderSettings["fps"], gpu?: boolean): void;
 
 interface PickedElement {
     id: string | null;
@@ -3590,6 +3592,7 @@ declare function useDomEditSession({ projectId, activeCompPath, compIdToSrc, cap
 /** The one source for which preview is on screen: the host's iframe, then each reload promoted in its place. */
 declare function useLivePreviewIframe(host: HTMLIFrameElement | null): HTMLIFrameElement | null;
 
+declare function announcePreviewDocumentLoaded(iframe: HTMLIFrameElement): void;
 type PreviewPromotion = {
     retired: HTMLIFrameElement | null;
     live: HTMLIFrameElement;
@@ -3842,8 +3845,8 @@ interface StudioPlaybackValue {
     refreshPreviewDocumentVersion: () => void;
 }
 
-/** Studio state the panel reads; passed by hosts outside Studio's providers. Keep previewIframeRef stable,
- * and bump refreshKey when the preview document is rebuilt without an iframe load. */
+/** Studio state the panel reads; passed by hosts outside Studio's providers. Keep previewIframeRef stable;
+ * a host with its own player calls announcePreviewDocumentLoaded on each new page, or bumps refreshKey. */
 type LayersPanelHost = Pick<StudioShellValue, "previewIframeRef" | "activeCompPath" | "showToast"> & Pick<StudioPlaybackValue, "timelineElements" | "isPlaying"> & Partial<Pick<StudioPlaybackValue, "refreshKey" | "compositionLoading">>;
 declare const LayersPanel: react.NamedExoticComponent<{
     host?: LayersPanelHost;
@@ -4312,4 +4315,4 @@ declare function buildStudioTools(depsRef: {
     readonly current: StudioAgentToolsDeps;
 }): ModelContextTool[];
 
-export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, AudioMeterStrip, type AudioMeterStripProps, AudioWaveform, type AudioWaveformProps, type BlockedTimelineEditIntent, type CanEditTimelineElement, ColorField, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ConnectedDomEditOverlay, type ConnectedDomEditOverlayProps, DEFAULT_SHORTCUT_SECTIONS, Dock, type DockController, type DomEditCapabilities, type DomEditCommitDeclineReason, type DomEditCommitOutcome, type DomEditGroupPathOffsetCommit, DomEditOverlay, type DomEditOverlayProps, DomEditProvider, type DomEditSelection, type DomEditZOrder, type DomGeometryCommits, type EditHistoryHandle, EditorShell, type EditorShellProps, type ExternalFileChangeBlockedState, type ExternalFileChangeCoordinatorHandle, ExternalFileConflictBanner, type FadeEdge, type FadeHandleBox, type FadeHandleClipBox, type FfmpegStatus, FileTree, GradientField, GridOverlay, ImageThumbnail, type ImageThumbnailProps, LayersPanel, type LayersPanelHost, type LinkShortcutCallbacks, type MarqueeGestures, type MarqueeGesturesDeps, MarqueeOverlay, type MarqueeOverlayProps, type Rect$1 as MarqueeRect, type ModelContextTool, NLEPreview, type PanelId, type PatchOperation, type PersistedRenderSettings, type PickedElement, PlayerControls, type PlayerHandle, type PlayerHandleElement, type PlayerHandleListener, type PlayerHandleTimeListener, type DomEditCompositionRect as PreviewCompositionRect, PreviewGuides, PreviewOverlayProvider, type PreviewOverlayProviderProps, type PreviewPromotion, PreviewReadOnlyProvider, type PreviewSnapPreferences, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, SNAP_THRESHOLD_PX, type ShortcutHint, type ShortcutSection, ShortcutsButton, type ShortcutsButtonProps, type SnapContext, type SnapEdge, type SnapGuide, SnapGuideOverlay, type SnapGuideOverlayProps, type SnapGuidesState, type Rect as SnapRect, type SnapResult, type SnapTarget, SnapToolbar, SourceEditor, type SpacingGuide, type StartRenderOptions, type StudioAgentToolsDeps, StudioApp, StudioFileConflictError, type StudioLookSnapshot, type StudioPendingEditsDrainResult, TRACK_H, type ThumbnailPriority, type ThumbnailStill, Timeline, TimelineClipMenu, type TimelineClipMenuItem, type TimelineClipRenderContext, type TimelineEditCallbacks, type TimelineEditOutcome, type TimelineEditPermission, TimelineEditPopover, TimelineEditProvider, type TimelineElement, TimelineEmptyStatePart, TimelineFrame, TimelineGapMenu, TimelineHistoryButtons, type TimelineHistoryButtonsProps, TimelineKeyframeMenu, TimelineLanes, TimelineOverlays, TimelinePane, type TimelinePaneProps, TimelinePlayhead, TimelineProvider, TimelineRazorGuide, TimelineRuler, TimelineShortcutHint, type TimelineTheme, type TimelineTimeRange$1 as TimelineTimeRange, TimelineToolbar, type TimelineToolbarProps, type TimelineTrackPadding, type TimelineZIndexReorderCommit, type ToolResult, type UseClipboardOptions, type UseDomEditSessionParams, type UseDomGeometryCommitOptions, type UseDomStyleCommitOptions, type UseEditHistoryActionsOptions, type UsePersistentEditHistoryOptions, type UsePreviewPersistenceParams, type UseProjectFileWriterOptions, type UseRenderClipContentOptions, type UseThumbnailStillOptions, type UseTimelineEditingOptions, VideoThumbnail, type ZOrderAction, applyPatch, buildCompositionSnapTarget, buildGridSnapEdges, buildPickerAgentContextPreview, buildPickerAgentPrompt, buildStudioTools, cancelNewestStudioWaitingPress, collectSnapContext, collectStudioLookScene, currentTimelineRange, dispatchLinkShortcut, displayTrackOrder, extractSnapTargets, fadeHandleBoxes, findElementBlock, flushStudioPendingEdits, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, openAudioGainDialog, parseStyleString, persistRenderSettings, resolveDomEditSelection, resolveEquidistanceGuides, resolveGuideLineRect, resolveIframe, resolveSnapAdjustment, resolveSourceFile, revertNewestStudioPendingEdit, snapEngagedForTravel, useAudioGainDialogStore, useAudioMetersVisible, useClipboard, useCompositionStack, useDockLayoutStore, useDomEditSelectionContext, useDomEditSession, useDomEditZOrder, useDomGeometryCommit, useDomStyleCommit, useEditHistoryActions, useElementPicker, useLivePreviewIframe, useMarqueeGestures, usePersistentEditHistory, usePlayerHandle, usePlayerStore, usePreviewCompositionRect, usePreviewGuidesStore, usePreviewIframeStore, usePreviewOverlayContext, usePreviewPersistence, useProjectFileWriter, useRenderClipContent, useRenderQueue, useThumbnailStill, useTimelineContext, useTimelineEditing, useTimelinePlayer, zoomTimelineToRange };
+export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, AudioMeterStrip, type AudioMeterStripProps, AudioWaveform, type AudioWaveformProps, type BlockedTimelineEditIntent, type CanEditTimelineElement, ColorField, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ConnectedDomEditOverlay, type ConnectedDomEditOverlayProps, DEFAULT_SHORTCUT_SECTIONS, Dock, type DockController, type DomEditCapabilities, type DomEditCommitDeclineReason, type DomEditCommitOutcome, type DomEditGroupPathOffsetCommit, DomEditOverlay, type DomEditOverlayProps, DomEditProvider, type DomEditSelection, type DomEditZOrder, type DomGeometryCommits, type EditHistoryHandle, EditorShell, type EditorShellProps, type ExternalFileChangeBlockedState, type ExternalFileChangeCoordinatorHandle, ExternalFileConflictBanner, type FadeEdge, type FadeHandleBox, type FadeHandleClipBox, type FfmpegStatus, FileTree, GradientField, GridOverlay, ImageThumbnail, type ImageThumbnailProps, LayersPanel, type LayersPanelHost, type LinkShortcutCallbacks, type MarqueeGestures, type MarqueeGesturesDeps, MarqueeOverlay, type MarqueeOverlayProps, type Rect$1 as MarqueeRect, type ModelContextTool, NLEPreview, type PanelId, type PatchOperation, type PersistedRenderSettings, type PickedElement, PlayerControls, type PlayerHandle, type PlayerHandleElement, type PlayerHandleListener, type PlayerHandleTimeListener, type DomEditCompositionRect as PreviewCompositionRect, PreviewGuides, PreviewOverlayProvider, type PreviewOverlayProviderProps, type PreviewPromotion, PreviewReadOnlyProvider, type PreviewSnapPreferences, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, SNAP_THRESHOLD_PX, type ShortcutHint, type ShortcutSection, ShortcutsButton, type ShortcutsButtonProps, type SnapContext, type SnapEdge, type SnapGuide, SnapGuideOverlay, type SnapGuideOverlayProps, type SnapGuidesState, type Rect as SnapRect, type SnapResult, type SnapTarget, SnapToolbar, SourceEditor, type SpacingGuide, type StartRenderOptions, type StudioAgentToolsDeps, StudioApp, StudioFileConflictError, type StudioLookSnapshot, type StudioPendingEditsDrainResult, TRACK_H, type ThumbnailPriority, type ThumbnailStill, Timeline, TimelineClipMenu, type TimelineClipMenuItem, type TimelineClipRenderContext, type TimelineEditCallbacks, type TimelineEditOutcome, type TimelineEditPermission, TimelineEditPopover, TimelineEditProvider, type TimelineElement, TimelineEmptyStatePart, TimelineFrame, TimelineGapMenu, TimelineHistoryButtons, type TimelineHistoryButtonsProps, TimelineKeyframeMenu, TimelineLanes, TimelineOverlays, TimelinePane, type TimelinePaneProps, TimelinePlayhead, TimelineProvider, TimelineRazorGuide, TimelineRuler, TimelineShortcutHint, type TimelineTheme, type TimelineTimeRange$1 as TimelineTimeRange, TimelineToolbar, type TimelineToolbarProps, type TimelineTrackPadding, type TimelineZIndexReorderCommit, type ToolResult, type UseClipboardOptions, type UseDomEditSessionParams, type UseDomGeometryCommitOptions, type UseDomStyleCommitOptions, type UseEditHistoryActionsOptions, type UsePersistentEditHistoryOptions, type UsePreviewPersistenceParams, type UseProjectFileWriterOptions, type UseRenderClipContentOptions, type UseThumbnailStillOptions, type UseTimelineEditingOptions, VideoThumbnail, type ZOrderAction, announcePreviewDocumentLoaded, applyPatch, buildCompositionSnapTarget, buildGridSnapEdges, buildPickerAgentContextPreview, buildPickerAgentPrompt, buildStudioTools, cancelNewestStudioWaitingPress, collectSnapContext, collectStudioLookScene, currentTimelineRange, dispatchLinkShortcut, displayTrackOrder, extractSnapTargets, fadeHandleBoxes, findElementBlock, flushStudioPendingEdits, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, openAudioGainDialog, parseStyleString, persistRenderSettings, resolveDomEditSelection, resolveEquidistanceGuides, resolveGuideLineRect, resolveIframe, resolveSnapAdjustment, resolveSourceFile, revertNewestStudioPendingEdit, snapEngagedForTravel, useAudioGainDialogStore, useAudioMetersVisible, useClipboard, useCompositionStack, useDockLayoutStore, useDomEditSelectionContext, useDomEditSession, useDomEditZOrder, useDomGeometryCommit, useDomStyleCommit, useEditHistoryActions, useElementPicker, useLivePreviewIframe, useMarqueeGestures, usePersistentEditHistory, usePlayerHandle, usePlayerStore, usePreviewCompositionRect, usePreviewGuidesStore, usePreviewIframeStore, usePreviewOverlayContext, usePreviewPersistence, useProjectFileWriter, useRenderClipContent, useRenderQueue, useThumbnailStill, useTimelineContext, useTimelineEditing, useTimelinePlayer, zoomTimelineToRange };

package/dist/studio/index.html

@@ -14,7 +14,7 @@
         document.documentElement.dataset.theme = "paper";
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-J7jpL4pj.js"></script>
+    <script type="module" crossorigin src="/assets/index-D8W0a0Z9.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CVd4O6eH.css">
   </head>
   <body>