@unseenco/theatre-core 0.4.2 → 0.5.0

package/dist/index.js

@@ -241,32 +241,88 @@ var require_propose = __commonJS({
 // core/src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  PAGE_MODE_SEQUENCE_LENGTH: () => PAGE_MODE_SEQUENCE_LENGTH,
+  PAGE_MODE_SUB_UNITS_PER_UNIT: () => PAGE_MODE_SUB_UNITS_PER_UNIT,
+  attachGsapSequenceBridge: () => attachGsapSequenceBridge,
+  attachSheetScrollDriver: () => attachSheetScrollDriver,
+  attachTheatrePageScroll: () => attachTheatrePageScroll,
+  configureTheatrePageScroll: () => configureTheatrePageScroll,
+  createDefaultPageScrollDriver: () => createDefaultPageScrollDriver,
+  createElementHorizontalScrollDriver: () => createElementHorizontalScrollDriver,
+  createElementScrollDriver: () => createElementScrollDriver,
+  createNativeDocumentHorizontalScrollDriver: () => createNativeDocumentHorizontalScrollDriver,
+  createNativeDocumentScrollDriver: () => createNativeDocumentScrollDriver,
   createRafDriver: () => createRafDriver,
+  defaultPageScrollContext: () => defaultPageScrollContext,
+  getActivePageScrollContext: () => getActivePageScrollContext,
   getProject: () => getProject,
+  getSheetScrollDriver: () => getSheetScrollDriver,
+  getTheatreCoreRafDriver: () => getTheatreCoreRafDriver,
+  getTheatrePageScrollConfig: () => getTheatrePageScrollConfig,
+  getTheatrePageScrollContext: () => getTheatrePageScrollContext,
+  isNativeDocumentScroller: () => isNativeDocumentScroller,
+  isPageScrollTrigger: () => isPageScrollTrigger,
   isRemoteEditorWindow: () => isRemoteEditorWindow,
+  isVerticalPageScrollTrigger: () => isVerticalPageScrollTrigger,
   notify: () => notify,
   onChange: () => onChange,
+  pageScrollProgressFromSequence: () => pageScrollProgressFromSequence,
+  pageScrollScrollersMatch: () => pageScrollScrollersMatch,
   privateAPI: () => privateAPI,
+  resolvePageScrollAxis: () => resolvePageScrollAxis,
+  resolvePageScrollScroller: () => resolvePageScrollScroller,
+  setActivePageScrollContext: () => setActivePageScrollContext,
   setCoreRafDriver: () => setCoreRafDriver,
+  setPageScrollProgress: () => setPageScrollProgress,
   setPrivateAPI: () => setPrivateAPI,
+  syncNativeDocumentScrollToSequencePosition: () => syncNativeDocumentScrollToSequencePosition,
+  syncPageScrollToSequencePosition: () => syncPageScrollToSequencePosition,
   types: () => propTypes_exports,
-  val: () => val10
+  val: () => val12
 });
 module.exports = __toCommonJS(index_exports);
 
 // core/src/coreExports.ts
 var coreExports_exports = {};
 __export(coreExports_exports, {
+  PAGE_MODE_SEQUENCE_LENGTH: () => PAGE_MODE_SEQUENCE_LENGTH,
+  PAGE_MODE_SUB_UNITS_PER_UNIT: () => PAGE_MODE_SUB_UNITS_PER_UNIT,
+  attachGsapSequenceBridge: () => attachGsapSequenceBridge,
+  attachSheetScrollDriver: () => attachSheetScrollDriver,
+  attachTheatrePageScroll: () => attachTheatrePageScroll,
+  configureTheatrePageScroll: () => configureTheatrePageScroll,
+  createDefaultPageScrollDriver: () => createDefaultPageScrollDriver,
+  createElementHorizontalScrollDriver: () => createElementHorizontalScrollDriver,
+  createElementScrollDriver: () => createElementScrollDriver,
+  createNativeDocumentHorizontalScrollDriver: () => createNativeDocumentHorizontalScrollDriver,
+  createNativeDocumentScrollDriver: () => createNativeDocumentScrollDriver,
   createRafDriver: () => createRafDriver,
+  defaultPageScrollContext: () => defaultPageScrollContext,
+  getActivePageScrollContext: () => getActivePageScrollContext,
   getProject: () => getProject,
+  getSheetScrollDriver: () => getSheetScrollDriver,
+  getTheatreCoreRafDriver: () => getTheatreCoreRafDriver,
+  getTheatrePageScrollConfig: () => getTheatrePageScrollConfig,
+  getTheatrePageScrollContext: () => getTheatrePageScrollContext,
+  isNativeDocumentScroller: () => isNativeDocumentScroller,
+  isPageScrollTrigger: () => isPageScrollTrigger,
   isRemoteEditorWindow: () => isRemoteEditorWindow,
+  isVerticalPageScrollTrigger: () => isVerticalPageScrollTrigger,
   notify: () => notify,
   onChange: () => onChange,
+  pageScrollProgressFromSequence: () => pageScrollProgressFromSequence,
+  pageScrollScrollersMatch: () => pageScrollScrollersMatch,
   privateAPI: () => privateAPI,
+  resolvePageScrollAxis: () => resolvePageScrollAxis,
+  resolvePageScrollScroller: () => resolvePageScrollScroller,
+  setActivePageScrollContext: () => setActivePageScrollContext,
   setCoreRafDriver: () => setCoreRafDriver,
+  setPageScrollProgress: () => setPageScrollProgress,
   setPrivateAPI: () => setPrivateAPI,
+  syncNativeDocumentScrollToSequencePosition: () => syncNativeDocumentScrollToSequencePosition,
+  syncPageScrollToSequencePosition: () => syncPageScrollToSequencePosition,
   types: () => propTypes_exports,
-  val: () => val10
+  val: () => val12
 });
 
 // core/src/projects/projectsSingleton.ts
@@ -291,6 +347,82 @@ var ProjectsSingleton = class {
 var singleton = new ProjectsSingleton();
 var projectsSingleton_default = singleton;
 
+// core/src/rafDrivers.ts
+var import_theatre_dataverse2 = require("@unseenco/theatre-dataverse");
+var lastDriverId = 0;
+function createRafDriver(conf) {
+  const tick = (time) => {
+    ticker.tick(time);
+  };
+  const ticker = new import_theatre_dataverse2.Ticker({
+    onActive() {
+      conf?.start?.();
+    },
+    onDormant() {
+      conf?.stop?.();
+    }
+  });
+  const driverPublicApi = {
+    tick,
+    id: lastDriverId++,
+    name: conf?.name ?? "CustomRafDriver-".concat(lastDriverId),
+    type: "Theatre_RafDriver_PublicAPI"
+  };
+  const driverPrivateApi = {
+    type: "Theatre_RafDriver_PrivateAPI",
+    publicApi: driverPublicApi,
+    ticker,
+    start: conf?.start,
+    stop: conf?.stop
+  };
+  setPrivateAPI(driverPublicApi, driverPrivateApi);
+  return driverPublicApi;
+}
+
+// core/src/coreTicker.ts
+function createBasicRafDriver() {
+  let rafId = null;
+  const start = () => {
+    if (typeof window !== "undefined") {
+      const onAnimationFrame = (t2) => {
+        driver.tick(t2);
+        rafId = window.requestAnimationFrame(onAnimationFrame);
+      };
+      rafId = window.requestAnimationFrame(onAnimationFrame);
+    } else {
+      driver.tick(0);
+      setTimeout(() => driver.tick(1), 0);
+    }
+  };
+  const stop = () => {
+    if (typeof window !== "undefined") {
+      if (rafId !== null) {
+        window.cancelAnimationFrame(rafId);
+      }
+    } else {
+    }
+  };
+  const driver = createRafDriver({ name: "DefaultCoreRafDriver", start, stop });
+  return driver;
+}
+var coreRafDriver;
+function getCoreRafDriver() {
+  if (!coreRafDriver) {
+    setCoreRafDriver(createBasicRafDriver());
+  }
+  return coreRafDriver;
+}
+function getCoreTicker() {
+  return getCoreRafDriver().ticker;
+}
+function setCoreRafDriver(driver) {
+  if (coreRafDriver) {
+    throw new Error("`setCoreRafDriver()` is already called.");
+  }
+  const driverPrivateApi = privateAPI(driver);
+  coreRafDriver = driverPrivateApi;
+}
+
 // core/src/privateAPIs.ts
 var publicAPIToPrivateAPIMap = /* @__PURE__ */ new WeakMap();
 function privateAPI(pub) {
@@ -299,6 +431,23 @@ function privateAPI(pub) {
 function setPrivateAPI(pub, priv) {
   publicAPIToPrivateAPIMap.set(pub, priv);
 }
+function getTheatreCoreRafDriver() {
+  return getCoreRafDriver().publicApi;
+}
+
+// core/src/sheets/applySheetRuntimeOptions.ts
+function applySheetRuntimeOptions(sheet, opts) {
+  if (!opts) return;
+  if (opts.sequenceMode !== void 0) {
+    sheet.setSequenceMode(opts.sequenceMode);
+  }
+  if (opts.scrollDriver !== void 0) {
+    sheet.setPageScrollDriver(opts.scrollDriver);
+  }
+  if (opts.gsap === true) {
+    sheet.enableGsapSequenceBridge();
+  }
+}
 
 // shared/src/utils/index.ts
 var emptyArray = [];
@@ -865,7 +1014,7 @@ var SimpleCache = class {
 };
 
 // core/src/sheetObjects/SheetObjectTemplate.ts
-var import_theatre_dataverse7 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse8 = require("@unseenco/theatre-dataverse");
 
 // ../node_modules/lodash-es/_defineProperty.js
 var defineProperty = (function() {
@@ -977,23 +1126,23 @@ function generateDefaultsForCompound(config) {
 }
 
 // core/src/sequences/interpolationTripleAtPosition.ts
-var import_theatre_dataverse2 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse3 = require("@unseenco/theatre-dataverse");
 var import_UnitBezier = __toESM(require_UnitBezier());
 function interpolationTripleAtPosition(ctx, trackP, timeD) {
-  return (0, import_theatre_dataverse2.prism)(() => {
-    const track = (0, import_theatre_dataverse2.val)(trackP);
-    const driverD = import_theatre_dataverse2.prism.memo(
+  return (0, import_theatre_dataverse3.prism)(() => {
+    const track = (0, import_theatre_dataverse3.val)(trackP);
+    const driverD = import_theatre_dataverse3.prism.memo(
       "driver",
       () => {
         if (!track) {
-          return (0, import_theatre_dataverse2.prism)(() => void 0);
+          return (0, import_theatre_dataverse3.prism)(() => void 0);
         } else if (track.type === "BasicKeyframedTrack") {
           return _forKeyframedTrack(ctx, track, timeD);
         } else if (track.type === "GsapClipTrack") {
-          return (0, import_theatre_dataverse2.prism)(() => void 0);
+          return (0, import_theatre_dataverse3.prism)(() => void 0);
         } else {
           ctx.logger.error("Track type not yet supported.");
-          return (0, import_theatre_dataverse2.prism)(() => void 0);
+          return (0, import_theatre_dataverse3.prism)(() => void 0);
         }
       },
       [track]
@@ -1002,8 +1151,8 @@ function interpolationTripleAtPosition(ctx, trackP, timeD) {
   });
 }
 function _forKeyframedTrack(ctx, track, timeD) {
-  return (0, import_theatre_dataverse2.prism)(() => {
-    let stateRef = import_theatre_dataverse2.prism.ref("state", { started: false });
+  return (0, import_theatre_dataverse3.prism)(() => {
+    let stateRef = import_theatre_dataverse3.prism.ref("state", { started: false });
     let state = stateRef.current;
     const time = timeD.getValue();
     if (!state.started || time < state.validFrom || state.validTo <= time) {
@@ -1012,7 +1161,7 @@ function _forKeyframedTrack(ctx, track, timeD) {
     return state.der.getValue();
   });
 }
-var undefinedConstD = (0, import_theatre_dataverse2.prism)(() => void 0);
+var undefinedConstD = (0, import_theatre_dataverse3.prism)(() => void 0);
 function updateState(ctx, progressionD, track) {
   const progression = progressionD.getValue();
   if (track.keyframes.length === 0) {
@@ -1077,7 +1226,7 @@ var states = {
       started: true,
       validFrom: -Infinity,
       validTo: kf.position,
-      der: (0, import_theatre_dataverse2.prism)(() => ({ left: kf.value, progression: 0 }))
+      der: (0, import_theatre_dataverse3.prism)(() => ({ left: kf.value, progression: 0 }))
     };
   },
   lastKeyframe(kf) {
@@ -1085,7 +1234,7 @@ var states = {
       started: true,
       validFrom: kf.position,
       validTo: Infinity,
-      der: (0, import_theatre_dataverse2.prism)(() => ({ left: kf.value, progression: 0 }))
+      der: (0, import_theatre_dataverse3.prism)(() => ({ left: kf.value, progression: 0 }))
     };
   },
   between(left, right, progressionD) {
@@ -1094,7 +1243,7 @@ var states = {
         started: true,
         validFrom: left.position,
         validTo: right.position,
-        der: (0, import_theatre_dataverse2.prism)(() => ({ left: left.value, progression: 0 }))
+        der: (0, import_theatre_dataverse3.prism)(() => ({ left: left.value, progression: 0 }))
       };
     }
     const globalProgressionToLocalProgression = (globalProgression) => {
@@ -1107,7 +1256,7 @@ var states = {
         right.handles[0],
         right.handles[1]
       );
-      const bezierDer = (0, import_theatre_dataverse2.prism)(() => {
+      const bezierDer = (0, import_theatre_dataverse3.prism)(() => {
         const progression = globalProgressionToLocalProgression(
           progressionD.getValue()
         );
@@ -1125,7 +1274,7 @@ var states = {
         der: bezierDer
       };
     }
-    const holdDer = (0, import_theatre_dataverse2.prism)(() => {
+    const holdDer = (0, import_theatre_dataverse3.prism)(() => {
       const progression = globalProgressionToLocalProgression(
         progressionD.getValue()
       );
@@ -1182,18 +1331,18 @@ function pointerDeep(base, toAppend) {
 }
 
 // shared/src/utils/valToAtom.ts
-var import_theatre_dataverse3 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse4 = require("@unseenco/theatre-dataverse");
 var valToAtom = (key, vals) => {
-  const a2 = import_theatre_dataverse3.prism.memo(key, () => new import_theatre_dataverse3.Atom(vals), []);
+  const a2 = import_theatre_dataverse4.prism.memo(key, () => new import_theatre_dataverse4.Atom(vals), []);
   a2.set(vals);
   return a2;
 };
 
 // core/src/sheetObjects/SheetObject.ts
-var import_theatre_dataverse6 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse7 = require("@unseenco/theatre-dataverse");
 
 // core/src/sheetObjects/TheatreSheetObject.ts
-var import_theatre_dataverse4 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse5 = require("@unseenco/theatre-dataverse");
 
 // core/src/propTypes/index.ts
 var propTypes_exports = {};
@@ -3234,11 +3383,11 @@ function sanitizeCompoundProps(props) {
         );
       }
     }
-    const val11 = props[key];
-    if (isLonghandPropType(val11)) {
-      sanitizedProps[key] = val11;
+    const val13 = props[key];
+    if (isLonghandPropType(val13)) {
+      sanitizedProps[key] = val13;
     } else {
-      sanitizedProps[key] = toLonghandProp(val11);
+      sanitizedProps[key] = toLonghandProp(val13);
     }
   }
   return sanitizedProps;
@@ -3336,15 +3485,15 @@ var file = (defaultValue, opts = {}) => {
     deserializeAndSanitize: _ensureFile
   };
 };
-var _ensureFile = (val11) => {
-  if (!val11) return void 0;
+var _ensureFile = (val13) => {
+  if (!val13) return void 0;
   let valid = true;
-  if (typeof val11.id !== "string" && ![null, void 0].includes(val11.id)) {
+  if (typeof val13.id !== "string" && ![null, void 0].includes(val13.id)) {
     valid = false;
   }
-  if (val11.type !== "file") valid = false;
+  if (val13.type !== "file") valid = false;
   if (!valid) return void 0;
-  return val11;
+  return val13;
 };
 var image = (defaultValue, opts = {}) => {
   if (process.env.NODE_ENV !== "production") {
@@ -3368,15 +3517,15 @@ var image = (defaultValue, opts = {}) => {
     deserializeAndSanitize: _ensureImage
   };
 };
-var _ensureImage = (val11) => {
-  if (!val11) return void 0;
+var _ensureImage = (val13) => {
+  if (!val13) return void 0;
   let valid = true;
-  if (typeof val11.id !== "string" && ![null, void 0].includes(val11.id)) {
+  if (typeof val13.id !== "string" && ![null, void 0].includes(val13.id)) {
     valid = false;
   }
-  if (val11.type !== "image") valid = false;
+  if (val13.type !== "image") valid = false;
   if (!valid) return void 0;
-  return val11;
+  return val13;
 };
 var number = (defaultValue, opts = {}) => {
   if (process.env.NODE_ENV !== "production") {
@@ -3499,11 +3648,11 @@ var rgba = (defaultValue = { r: 0, g: 0, b: 0, a: 1 }, opts = {}) => {
     deserializeAndSanitize: _sanitizeRgba
   };
 };
-var _sanitizeRgba = (val11) => {
-  if (!val11) return void 0;
+var _sanitizeRgba = (val13) => {
+  if (!val13) return void 0;
   let valid = true;
   for (const c2 of ["r", "g", "b", "a"]) {
-    if (!Object.prototype.hasOwnProperty.call(val11, c2) || typeof val11[c2] !== "number") {
+    if (!Object.prototype.hasOwnProperty.call(val13, c2) || typeof val13[c2] !== "number") {
       valid = false;
     }
   }
@@ -3512,7 +3661,7 @@ var _sanitizeRgba = (val11) => {
   for (const c2 of ["r", "g", "b", "a"]) {
     ;
     sanitized[c2] = Math.min(
-      Math.max(val11[c2], 0),
+      Math.max(val13[c2], 0),
       1
     );
   }
@@ -3551,8 +3700,8 @@ var boolean = (defaultValue, opts = {}) => {
     deserializeAndSanitize: _ensureBoolean
   };
 };
-var _ensureBoolean = (val11) => {
-  return typeof val11 === "boolean" ? val11 : void 0;
+var _ensureBoolean = (val13) => {
+  return typeof val13 === "boolean" ? val13 : void 0;
 };
 function leftInterpolate(left) {
   return left;
@@ -3710,8 +3859,8 @@ var TheatreSheetObject = class {
   _valuesPrism() {
     return this._cache.get("_valuesPrism", () => {
       const sheetObject = privateAPI(this);
-      const d2 = (0, import_theatre_dataverse4.prism)(() => {
-        return (0, import_theatre_dataverse4.val)(sheetObject.getValues().getValue());
+      const d2 = (0, import_theatre_dataverse5.prism)(() => {
+        return (0, import_theatre_dataverse5.val)(sheetObject.getValues().getValue());
       });
       return d2;
     });
@@ -3719,10 +3868,10 @@ var TheatreSheetObject = class {
   _valuesWithVariantPrism() {
     return this._cache.get("_valuesWithVariantPrism", () => {
       const sheetObject = privateAPI(this);
-      return (0, import_theatre_dataverse4.prism)(() => {
+      return (0, import_theatre_dataverse5.prism)(() => {
         return {
-          values: (0, import_theatre_dataverse4.val)(sheetObject.getValues().getValue()),
-          variant: (0, import_theatre_dataverse4.val)(sheetObject.sheet.effectiveActiveSequenceVariantD)
+          values: (0, import_theatre_dataverse5.val)(sheetObject.getValues().getValue()),
+          variant: (0, import_theatre_dataverse5.val)(sheetObject.sheet.effectiveActiveSequenceVariantD)
         };
       });
     });
@@ -3759,8 +3908,8 @@ var TheatreSheetObject = class {
     }
     return der.getValue();
   }
-  set initialValue(val11) {
-    privateAPI(this).setInitialValue(val11);
+  set initialValue(val13) {
+    privateAPI(this).setInitialValue(val13);
   }
   showPropsOf(objects) {
     const host = privateAPI(this);
@@ -4155,7 +4304,7 @@ function setDeepImmutable(obj, path, replace) {
 }
 
 // core/src/sequences/sequenceVariants.ts
-var import_theatre_dataverse5 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse6 = require("@unseenco/theatre-dataverse");
 
 // shared/src/utils/sheetProps.ts
 var SHEET_PROPS_OBJECT_KEY = "__theatre_sheet_props__";
@@ -4223,17 +4372,17 @@ function getSequenceStateFromSheet(sheetState, variantId) {
   return void 0;
 }
 function valTrackIdByPropPathForObject(sheetStatePointer, variantId, objectKey) {
-  (0, import_theatre_dataverse5.val)(sheetStatePointer.sequencesById);
-  const sequenceFromMap = (0, import_theatre_dataverse5.val)(sheetStatePointer.sequencesById[variantId]);
+  (0, import_theatre_dataverse6.val)(sheetStatePointer.sequencesById);
+  const sequenceFromMap = (0, import_theatre_dataverse6.val)(sheetStatePointer.sequencesById[variantId]);
   if (sequenceFromMap !== void 0) {
-    (0, import_theatre_dataverse5.val)(sheetStatePointer.sequencesById[variantId].tracksByObject);
-    return (0, import_theatre_dataverse5.val)(
+    (0, import_theatre_dataverse6.val)(sheetStatePointer.sequencesById[variantId].tracksByObject);
+    return (0, import_theatre_dataverse6.val)(
       sheetStatePointer.sequencesById[variantId].tracksByObject[objectKey]?.trackIdByPropPath
     );
   }
   if (variantId === DEFAULT_SEQUENCE_VARIANT) {
-    (0, import_theatre_dataverse5.val)(sheetStatePointer.sequence?.tracksByObject);
-    return (0, import_theatre_dataverse5.val)(
+    (0, import_theatre_dataverse6.val)(sheetStatePointer.sequence?.tracksByObject);
+    return (0, import_theatre_dataverse6.val)(
       sheetStatePointer.sequence?.tracksByObject[objectKey]?.trackIdByPropPath
     );
   }
@@ -4241,11 +4390,11 @@ function valTrackIdByPropPathForObject(sheetStatePointer, variantId, objectKey)
 }
 function valUnsequencedPropPathsForObject(sheetStatePointer, variantId, objectKey) {
   if (variantId === DEFAULT_SEQUENCE_VARIANT) return void 0;
-  (0, import_theatre_dataverse5.val)(sheetStatePointer.sequencesById);
-  const sequenceFromMap = (0, import_theatre_dataverse5.val)(sheetStatePointer.sequencesById[variantId]);
+  (0, import_theatre_dataverse6.val)(sheetStatePointer.sequencesById);
+  const sequenceFromMap = (0, import_theatre_dataverse6.val)(sheetStatePointer.sequencesById[variantId]);
   if (sequenceFromMap !== void 0) {
-    (0, import_theatre_dataverse5.val)(sheetStatePointer.sequencesById[variantId].tracksByObject);
-    return (0, import_theatre_dataverse5.val)(
+    (0, import_theatre_dataverse6.val)(sheetStatePointer.sequencesById[variantId].tracksByObject);
+    return (0, import_theatre_dataverse6.val)(
       sheetStatePointer.sequencesById[variantId].tracksByObject[objectKey]?.unsequencedPropPaths
     );
   }
@@ -4273,7 +4422,7 @@ function validateSequenceVariantIdOrThrow(value, fnName) {
   return idTrimmed;
 }
 function pointerToSequenceTrackData(sheetStatePointer, variantId, objectKey, trackId) {
-  const sheetState = (0, import_theatre_dataverse5.val)(sheetStatePointer);
+  const sheetState = (0, import_theatre_dataverse6.val)(sheetStatePointer);
   if (sheetState?.sequencesById?.[variantId]) {
     return sheetStatePointer.sequencesById[variantId].tracksByObject[objectKey].trackData[trackId];
   }
@@ -4316,19 +4465,19 @@ var SheetObject = class {
     __publicField(this, "$$isPointerToPrismProvider", true);
     __publicField(this, "address");
     __publicField(this, "publicApi");
-    __publicField(this, "_initialValue", new import_theatre_dataverse6.Atom({}));
+    __publicField(this, "_initialValue", new import_theatre_dataverse7.Atom({}));
     /**
      * Highest-priority override layer, written to by `RemoteSync` when a value
      * update arrives from a remote editor window (see `internal/RemoteSync.ts`).
      * Empty (`{}`) unless a remote editor is actually connected, so it's a
      * no-op merge for every app that never uses the remote-sync feature.
      */
-    __publicField(this, "_remoteOverride", new import_theatre_dataverse6.Atom({}));
+    __publicField(this, "_remoteOverride", new import_theatre_dataverse7.Atom({}));
     /**
      * Session-only overrides for props with `persist: false`. Not written to
      * persisted project state and cleared on refresh.
      */
-    __publicField(this, "_sessionOverrides", new import_theatre_dataverse6.Atom({}));
+    __publicField(this, "_sessionOverrides", new import_theatre_dataverse7.Atom({}));
     __publicField(this, "_cache", new SimpleCache());
     __publicField(this, "_logger");
     __publicField(this, "_internalUtilCtx");
@@ -4350,10 +4499,10 @@ var SheetObject = class {
   getValues() {
     return this._cache.get(
       "getValues()",
-      () => (0, import_theatre_dataverse6.prism)(() => {
-        const defaults = (0, import_theatre_dataverse6.val)(this.template.getDefaultValues());
-        const initial = (0, import_theatre_dataverse6.val)(this._initialValue.pointer);
-        const withInitialCache = import_theatre_dataverse6.prism.memo(
+      () => (0, import_theatre_dataverse7.prism)(() => {
+        const defaults = (0, import_theatre_dataverse7.val)(this.template.getDefaultValues());
+        const initial = (0, import_theatre_dataverse7.val)(this._initialValue.pointer);
+        const withInitialCache = import_theatre_dataverse7.prism.memo(
           "withInitialCache",
           () => /* @__PURE__ */ new WeakMap(),
           []
@@ -4363,8 +4512,8 @@ var SheetObject = class {
           initial,
           withInitialCache
         );
-        const ahistoricStatics = (0, import_theatre_dataverse6.val)(this.template.getAhistoricStaticValues());
-        const withAhistoricStaticsCache = import_theatre_dataverse6.prism.memo(
+        const ahistoricStatics = (0, import_theatre_dataverse7.val)(this.template.getAhistoricStaticValues());
+        const withAhistoricStaticsCache = import_theatre_dataverse7.prism.memo(
           "withAhistoricStatics",
           () => /* @__PURE__ */ new WeakMap(),
           []
@@ -4374,10 +4523,10 @@ var SheetObject = class {
           ahistoricStatics,
           withAhistoricStaticsCache
         );
-        const activeVariant = (0, import_theatre_dataverse6.val)(this.sheet.effectiveActiveSequenceVariantD);
+        const activeVariant = (0, import_theatre_dataverse7.val)(this.sheet.effectiveActiveSequenceVariantD);
         const staticVariant = isSheetPropsObjectKey(this.address.objectKey) ? DEFAULT_SEQUENCE_VARIANT : activeVariant;
-        const statics = (0, import_theatre_dataverse6.val)(this.template.getStaticValues(staticVariant));
-        const withStaticsCache = import_theatre_dataverse6.prism.memo(
+        const statics = (0, import_theatre_dataverse7.val)(this.template.getStaticValues(staticVariant));
+        const withStaticsCache = import_theatre_dataverse7.prism.memo(
           "withStatics",
           () => /* @__PURE__ */ new WeakMap(),
           []
@@ -4390,22 +4539,22 @@ var SheetObject = class {
         let final = withStatics;
         let sequenced;
         {
-          const pointerToSequencedValuesD = import_theatre_dataverse6.prism.memo(
+          const pointerToSequencedValuesD = import_theatre_dataverse7.prism.memo(
             "seq",
             () => this.getSequencedValues(),
             []
           );
-          const withSeqsCache = import_theatre_dataverse6.prism.memo(
+          const withSeqsCache = import_theatre_dataverse7.prism.memo(
             "withSeqsCache",
             () => /* @__PURE__ */ new WeakMap(),
             []
           );
-          sequenced = (0, import_theatre_dataverse6.val)((0, import_theatre_dataverse6.val)(pointerToSequencedValuesD));
+          sequenced = (0, import_theatre_dataverse7.val)((0, import_theatre_dataverse7.val)(pointerToSequencedValuesD));
           const withSeqs = deepMergeWithCache(final, sequenced, withSeqsCache);
           final = withSeqs;
         }
-        const sessionOverrides = (0, import_theatre_dataverse6.val)(this._sessionOverrides.pointer);
-        const withSessionOverridesCache = import_theatre_dataverse6.prism.memo(
+        const sessionOverrides = (0, import_theatre_dataverse7.val)(this._sessionOverrides.pointer);
+        const withSessionOverridesCache = import_theatre_dataverse7.prism.memo(
           "withSessionOverridesCache",
           () => /* @__PURE__ */ new WeakMap(),
           []
@@ -4415,8 +4564,8 @@ var SheetObject = class {
           sessionOverrides,
           withSessionOverridesCache
         );
-        const remoteOverride = (0, import_theatre_dataverse6.val)(this._remoteOverride.pointer);
-        const withRemoteOverrideCache = import_theatre_dataverse6.prism.memo(
+        const remoteOverride = (0, import_theatre_dataverse7.val)(this._remoteOverride.pointer);
+        const withRemoteOverrideCache = import_theatre_dataverse7.prism.memo(
           "withRemoteOverrideCache",
           () => /* @__PURE__ */ new WeakMap(),
           []
@@ -4432,35 +4581,35 @@ var SheetObject = class {
     );
   }
   getValueByPointer(pointer3) {
-    const allValuesP = (0, import_theatre_dataverse6.val)(this.getValues());
-    const { path } = (0, import_theatre_dataverse6.getPointerParts)(pointer3);
-    return (0, import_theatre_dataverse6.val)(
+    const allValuesP = (0, import_theatre_dataverse7.val)(this.getValues());
+    const { path } = (0, import_theatre_dataverse7.getPointerParts)(pointer3);
+    return (0, import_theatre_dataverse7.val)(
       pointerDeep(allValuesP, path)
     );
   }
   pointerToPrism(pointer3) {
-    const { path } = (0, import_theatre_dataverse6.getPointerParts)(pointer3);
-    return (0, import_theatre_dataverse6.prism)(() => {
-      const allValuesP = (0, import_theatre_dataverse6.val)(this.getValues());
-      return (0, import_theatre_dataverse6.val)(pointerDeep(allValuesP, path));
+    const { path } = (0, import_theatre_dataverse7.getPointerParts)(pointer3);
+    return (0, import_theatre_dataverse7.prism)(() => {
+      const allValuesP = (0, import_theatre_dataverse7.val)(this.getValues());
+      return (0, import_theatre_dataverse7.val)(pointerDeep(allValuesP, path));
     });
   }
   /**
    * Returns values of props that are sequenced.
    */
   getSequencedValues() {
-    return (0, import_theatre_dataverse6.prism)(() => {
-      const activeVariant = (0, import_theatre_dataverse6.val)(this.sheet.effectiveActiveSequenceVariantD);
+    return (0, import_theatre_dataverse7.prism)(() => {
+      const activeVariant = (0, import_theatre_dataverse7.val)(this.sheet.effectiveActiveSequenceVariantD);
       const sequenceVariant = isSheetPropsObjectKey(this.address.objectKey) ? DEFAULT_SEQUENCE_VARIANT : activeVariant;
-      const tracksToProcessD = import_theatre_dataverse6.prism.memo(
+      const tracksToProcessD = import_theatre_dataverse7.prism.memo(
         "tracksToProcess",
         () => this.template.getArrayOfValidSequenceTracks(sequenceVariant),
         [sequenceVariant]
       );
-      const tracksToProcess = (0, import_theatre_dataverse6.val)(tracksToProcessD);
-      const valsAtom = new import_theatre_dataverse6.Atom({});
-      const config = (0, import_theatre_dataverse6.val)(this.template.configPointer);
-      import_theatre_dataverse6.prism.effect(
+      const tracksToProcess = (0, import_theatre_dataverse7.val)(tracksToProcessD);
+      const valsAtom = new import_theatre_dataverse7.Atom({});
+      const config = (0, import_theatre_dataverse7.val)(this.template.configPointer);
+      import_theatre_dataverse7.prism.effect(
         "processTracks",
         () => {
           const untaps = [];
@@ -4510,7 +4659,7 @@ var SheetObject = class {
     });
   }
   _trackIdToPrism(trackId, trackVariant) {
-    const activeVariant = (0, import_theatre_dataverse6.val)(this.sheet.effectiveActiveSequenceVariantD);
+    const activeVariant = (0, import_theatre_dataverse7.val)(this.sheet.effectiveActiveSequenceVariantD);
     const trackP = pointerToSequenceTrackData(
       this.template.project.pointers.historic.sheetsById[this.address.sheetId],
       trackVariant,
@@ -4523,14 +4672,14 @@ var SheetObject = class {
   get propsP() {
     return this._cache.get(
       "propsP",
-      () => (0, import_theatre_dataverse6.pointer)({ root: this, path: [] })
+      () => (0, import_theatre_dataverse7.pointer)({ root: this, path: [] })
     );
   }
   validateValue(pointer3, value) {
   }
-  setInitialValue(val11) {
-    this.validateValue(this.propsP, val11);
-    this._initialValue.set(val11);
+  setInitialValue(val13) {
+    this.validateValue(this.propsP, val13);
+    this._initialValue.set(val13);
   }
   setSessionOverride(path, value) {
     const propConfig = getPropConfigByPath(this.template.staticConfig, path);
@@ -4550,8 +4699,8 @@ var SheetObject = class {
    * Internal: called by `RemoteSync` when a value update for this object
    * arrives from a remote editor window. Not exposed on the public API.
    */
-  setRemoteOverride(val11) {
-    this._remoteOverride.set(val11);
+  setRemoteOverride(val13) {
+    this._remoteOverride.set(val13);
   }
   /**
    * Internal: used by `RemoteSync` to subscribe to this object's fully
@@ -4560,7 +4709,7 @@ var SheetObject = class {
    */
   onFinalValueChange(fn2) {
     return onChange(
-      (0, import_theatre_dataverse6.prism)(() => (0, import_theatre_dataverse6.val)(this.getValues().getValue())),
+      (0, import_theatre_dataverse7.prism)(() => (0, import_theatre_dataverse7.val)(this.getValues().getValue())),
       fn2
     );
   }
@@ -5131,9 +5280,9 @@ var SheetObjectTemplate = class {
       config,
       sheetTemplate.project
     );
-    this._config = new import_theatre_dataverse7.Atom(configWithPrecisionDefaults);
-    this._temp_actions_atom = new import_theatre_dataverse7.Atom(_temp_actions);
-    this.showPropsOf_atom = new import_theatre_dataverse7.Atom([]);
+    this._config = new import_theatre_dataverse8.Atom(configWithPrecisionDefaults);
+    this._temp_actions_atom = new import_theatre_dataverse8.Atom(_temp_actions);
+    this.showPropsOf_atom = new import_theatre_dataverse8.Atom([]);
     this._transientPropPaths = normalizeTransientPropPaths(
       transient,
       config,
@@ -5190,7 +5339,7 @@ var SheetObjectTemplate = class {
     return this.showPropsOf_atom.pointer;
   }
   _stripNonPersistingPropsFromAhistoricState() {
-    const config = (0, import_theatre_dataverse7.val)(this.configPointer);
+    const config = (0, import_theatre_dataverse8.val)(this.configPointer);
     this.project._stripNonPersistingPropsFromAhistoric(
       this.address.sheetId,
       this.address.objectKey,
@@ -5319,8 +5468,8 @@ var SheetObjectTemplate = class {
   getDefaultValues() {
     return this._cache.get(
       "getDefaultValues()",
-      () => (0, import_theatre_dataverse7.prism)(() => {
-        const config = (0, import_theatre_dataverse7.val)(this.configPointer);
+      () => (0, import_theatre_dataverse8.prism)(() => {
+        const config = (0, import_theatre_dataverse8.val)(this.configPointer);
         return getPropDefaultsOfSheetObject(config);
       })
     );
@@ -5332,14 +5481,14 @@ var SheetObjectTemplate = class {
   getStaticValues(sequenceVariant = DEFAULT_SEQUENCE_VARIANT) {
     return this._cache.get(
       "getStaticValues:".concat(sequenceVariant),
-      () => (0, import_theatre_dataverse7.prism)(() => {
-        const sheetState = (0, import_theatre_dataverse7.val)(this.pointerToSheetState);
+      () => (0, import_theatre_dataverse8.prism)(() => {
+        const sheetState = (0, import_theatre_dataverse8.val)(this.pointerToSheetState);
         const json = getEffectiveStaticOverrideForObject(
           sheetState,
           sequenceVariant,
           this.address.objectKey
         ) ?? {};
-        const config = (0, import_theatre_dataverse7.val)(this.configPointer);
+        const config = (0, import_theatre_dataverse8.val)(this.configPointer);
         const deserialized = config.deserializeAndSanitize(json) || {};
         const withoutNonPersisting = stripNonPersistingPropValuesFromMap(
           deserialized,
@@ -5362,9 +5511,9 @@ var SheetObjectTemplate = class {
   getAhistoricStaticValues() {
     return this._cache.get(
       "getAhistoricStaticValues",
-      () => (0, import_theatre_dataverse7.prism)(() => {
-        const json = (0, import_theatre_dataverse7.val)(this.pointerToAhistoricStaticOverrides) ?? {};
-        const config = (0, import_theatre_dataverse7.val)(this.configPointer);
+      () => (0, import_theatre_dataverse8.prism)(() => {
+        const json = (0, import_theatre_dataverse8.val)(this.pointerToAhistoricStaticOverrides) ?? {};
+        const config = (0, import_theatre_dataverse8.val)(this.configPointer);
         const deserialized = config.deserializeAndSanitize(json) || {};
         return stripNonPersistingPropValuesFromMap(deserialized, config);
       })
@@ -5379,13 +5528,13 @@ var SheetObjectTemplate = class {
   getArrayOfValidSequenceTracks(sequenceVariant) {
     return this._cache.get(
       "getArrayOfValidSequenceTracks:".concat(sequenceVariant),
-      () => (0, import_theatre_dataverse7.prism)(
+      () => (0, import_theatre_dataverse8.prism)(
         () => {
           const effectiveSequenceVariant = isSheetPropsObjectKey(
             this.address.objectKey
           ) ? DEFAULT_SEQUENCE_VARIANT : sequenceVariant;
           const pointerToSheetState = this.project.pointers.historic.sheetsById[this.address.sheetId];
-          (0, import_theatre_dataverse7.val)(pointerToSheetState.variantObjectOverrides);
+          (0, import_theatre_dataverse8.val)(pointerToSheetState.variantObjectOverrides);
           const defaultTrackIdByPropPath = valTrackIdByPropPathForObject(
             pointerToSheetState,
             DEFAULT_SEQUENCE_VARIANT,
@@ -5411,7 +5560,7 @@ var SheetObjectTemplate = class {
             return emptyArray;
           }
           const arrayOfIds = [];
-          const objectConfig = (0, import_theatre_dataverse7.val)(this.configPointer);
+          const objectConfig = (0, import_theatre_dataverse8.val)(this.configPointer);
           for (const [pathToPropInString, effectiveTrack] of Object.entries(
             mergedTrackMap
           )) {
@@ -5461,8 +5610,8 @@ var SheetObjectTemplate = class {
   getMapOfValidSequenceTracks_forStudio(sequenceVariant) {
     return this._cache.get(
       "getMapOfValidSequenceTracks_forStudio:".concat(sequenceVariant),
-      () => (0, import_theatre_dataverse7.prism)(() => {
-        const arr = (0, import_theatre_dataverse7.val)(this.getArrayOfValidSequenceTracks(sequenceVariant));
+      () => (0, import_theatre_dataverse8.prism)(() => {
+        const arr = (0, import_theatre_dataverse8.val)(this.getArrayOfValidSequenceTracks(sequenceVariant));
         let map = {};
         for (const { pathToProp, trackId } of arr) {
           set_default(map, pathToProp, trackId);
@@ -5482,9 +5631,9 @@ var SheetObjectTemplate = class {
   getStaticButNotSequencedOverrides(sequenceVariant) {
     return this._cache.get(
       "getStaticButNotSequencedOverrides:".concat(sequenceVariant),
-      () => (0, import_theatre_dataverse7.prism)(() => {
-        const staticOverrides = (0, import_theatre_dataverse7.val)(this.getStaticValues(sequenceVariant));
-        const arrayOfValidSequenceTracks = (0, import_theatre_dataverse7.val)(
+      () => (0, import_theatre_dataverse8.prism)(() => {
+        const staticOverrides = (0, import_theatre_dataverse8.val)(this.getStaticValues(sequenceVariant));
+        const arrayOfValidSequenceTracks = (0, import_theatre_dataverse8.val)(
           this.getArrayOfValidSequenceTracks(sequenceVariant)
         );
         const staticButNotSequencedOverrides = cloneDeep_default(staticOverrides);
@@ -5510,7 +5659,7 @@ var SheetObjectTemplate = class {
     );
   }
   getDefaultsAtPointer(pointer3) {
-    const { path } = (0, import_theatre_dataverse7.getPointerParts)(pointer3);
+    const { path } = (0, import_theatre_dataverse8.getPointerParts)(pointer3);
     const defaults = this.getDefaultValues().getValue();
     const defaultsAtPath = getDeep(defaults, path);
     return defaultsAtPath;
@@ -5531,7 +5680,7 @@ function parsePathToProp(pathToPropInString) {
 }
 
 // core/src/sheets/SheetTemplate.ts
-var import_theatre_dataverse16 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse19 = require("@unseenco/theatre-dataverse");
 
 // shared/src/utils/didYouMean.ts
 var import_propose = __toESM(require_propose());
@@ -5547,10 +5696,10 @@ function didYouMean(str, dictionary, prepend = "Did you mean ", append = "?") {
 }
 
 // core/src/sequences/Sequence.ts
-var import_theatre_dataverse11 = require("@unseenco/theatre-dataverse");
 var import_theatre_dataverse12 = require("@unseenco/theatre-dataverse");
 var import_theatre_dataverse13 = require("@unseenco/theatre-dataverse");
 var import_theatre_dataverse14 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse15 = require("@unseenco/theatre-dataverse");
 
 // shared/src/utils/defer.ts
 function defer() {
@@ -5581,11 +5730,11 @@ var noop = () => {
 var noop_default = noop;
 
 // core/src/sequences/playbackControllers/DefaultPlaybackController.ts
-var import_theatre_dataverse8 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse9 = require("@unseenco/theatre-dataverse");
 var DefaultPlaybackController = class {
   constructor() {
     __publicField(this, "_stopPlayCallback", noop_default);
-    __publicField(this, "_state", new import_theatre_dataverse8.Atom({
+    __publicField(this, "_state", new import_theatre_dataverse9.Atom({
       position: 0,
       playing: false
     }));
@@ -5751,7 +5900,7 @@ var DefaultPlaybackController = class {
 };
 
 // core/src/sequences/playbackControllers/AudioPlaybackController.ts
-var import_theatre_dataverse9 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse10 = require("@unseenco/theatre-dataverse");
 
 // shared/src/globalVariableNames.ts
 var studioBundle = "__TheatreJS_StudioBundle";
@@ -5809,7 +5958,7 @@ var AudioPlaybackController = class {
     this._audioContext = _audioContext;
     this._nodeDestination = _nodeDestination;
     __publicField(this, "_mainGain");
-    __publicField(this, "_state", new import_theatre_dataverse9.Atom({
+    __publicField(this, "_state", new import_theatre_dataverse10.Atom({
       position: 0,
       playing: false
     }));
@@ -5929,11 +6078,11 @@ var AudioPlaybackController = class {
         "The sequence will still play, but only 1000 times. The `iterationCount: ".concat(iterationCount, "` provided to `sequence.play()`\nis too high for a sequence with audio.\n\nTo fix this, either set `iterationCount` to a lower value, or remove the audio from the sequence."),
         [
           {
-            url: "https://www.theatrejs.com/docs/latest/manual/audio",
+            url: "https://unseen-theatre.netlify.app/docs/guide/manual/audio",
             title: "Using Audio"
           },
           {
-            url: "https://www.theatrejs.com/docs/latest/api/core#sequence.attachaudio",
+            url: "https://unseen-theatre.netlify.app/docs/api/theatre-core#sequence.attachaudio",
             title: "Audio API"
           }
         ]
@@ -5986,82 +6135,6 @@ var AudioPlaybackController = class {
   }
 };
 
-// core/src/rafDrivers.ts
-var import_theatre_dataverse10 = require("@unseenco/theatre-dataverse");
-var lastDriverId = 0;
-function createRafDriver(conf) {
-  const tick = (time) => {
-    ticker.tick(time);
-  };
-  const ticker = new import_theatre_dataverse10.Ticker({
-    onActive() {
-      conf?.start?.();
-    },
-    onDormant() {
-      conf?.stop?.();
-    }
-  });
-  const driverPublicApi = {
-    tick,
-    id: lastDriverId++,
-    name: conf?.name ?? "CustomRafDriver-".concat(lastDriverId),
-    type: "Theatre_RafDriver_PublicAPI"
-  };
-  const driverPrivateApi = {
-    type: "Theatre_RafDriver_PrivateAPI",
-    publicApi: driverPublicApi,
-    ticker,
-    start: conf?.start,
-    stop: conf?.stop
-  };
-  setPrivateAPI(driverPublicApi, driverPrivateApi);
-  return driverPublicApi;
-}
-
-// core/src/coreTicker.ts
-function createBasicRafDriver() {
-  let rafId = null;
-  const start = () => {
-    if (typeof window !== "undefined") {
-      const onAnimationFrame = (t2) => {
-        driver.tick(t2);
-        rafId = window.requestAnimationFrame(onAnimationFrame);
-      };
-      rafId = window.requestAnimationFrame(onAnimationFrame);
-    } else {
-      driver.tick(0);
-      setTimeout(() => driver.tick(1), 0);
-    }
-  };
-  const stop = () => {
-    if (typeof window !== "undefined") {
-      if (rafId !== null) {
-        window.cancelAnimationFrame(rafId);
-      }
-    } else {
-    }
-  };
-  const driver = createRafDriver({ name: "DefaultCoreRafDriver", start, stop });
-  return driver;
-}
-var coreRafDriver;
-function getCoreRafDriver() {
-  if (!coreRafDriver) {
-    setCoreRafDriver(createBasicRafDriver());
-  }
-  return coreRafDriver;
-}
-function getCoreTicker() {
-  return getCoreRafDriver().ticker;
-}
-function setCoreRafDriver(driver) {
-  if (coreRafDriver) {
-    throw new Error("`setCoreRafDriver()` is already called.");
-  }
-  const driverPrivateApi = privateAPI(driver);
-  coreRafDriver = driverPrivateApi;
-}
-
 // core/src/sequences/TheatreSequence.ts
 var TheatreSequence = class {
   get type() {
@@ -6085,7 +6158,7 @@ var TheatreSequence = class {
           "You seem to have called `sequence.play()` before the project has finished loading.\n\nThis would **not** a problem in production when using `@unseenco/theatre-core`, since Theatre.js loads instantly in core mode. However, when using `@unseenco/theatre-studio`, it takes a few milliseconds for it to load your project's state, before which your sequences cannot start playing.\n\nTo fix this, simply defer calling `sequence.play()` until after the project is loaded, like this:\n\n```\nproject.ready.then(() => {\n  sequence.play()\n})\n```",
           [
             {
-              url: "https://www.theatrejs.com/docs/0.5/api/core#project.ready",
+              url: "https://unseen-theatre.netlify.app/docs/api/theatre-core#project.ready",
               title: "Project.ready"
             }
           ]
@@ -6111,14 +6184,27 @@ var TheatreSequence = class {
   __experimental_getGsapClips() {
     return privateAPI(this).getGsapClips();
   }
+  __experimental_getGsapScrollTriggers() {
+    return privateAPI(this).getGsapScrollTriggers();
+  }
   async attachAudio(args) {
+    const priv = privateAPI(this);
+    if (priv._sheet.getSequenceMode() === "page") {
+      notify.warning(
+        "Audio is not supported in page mode",
+        "Sequence audio expects time in seconds. Use time mode for attachAudio(), or scrub scroll-driven animation without audio."
+      );
+      return Promise.reject(
+        new Error("sequence.attachAudio() is not supported in page mode")
+      );
+    }
     const { audioContext, destinationNode, decodedBuffer, gainNode } = await resolveAudioBuffer(args);
     const playbackController = new AudioPlaybackController(
       decodedBuffer,
       audioContext,
       gainNode
     );
-    privateAPI(this).replacePlaybackController(playbackController);
+    priv.replacePlaybackController(playbackController);
     return { audioContext, destinationNode, decodedBuffer, gainNode };
   }
   get pointer() {
@@ -6216,6 +6302,31 @@ async function resolveAudioBuffer(args) {
   };
 }
 
+// shared/src/gsap/gsapStudioRegistryRevision.ts
+var import_theatre_dataverse11 = require("@unseenco/theatre-dataverse");
+var revisionAtom = new import_theatre_dataverse11.Atom(0);
+var gsapStudioRegistryRevisionPointer = revisionAtom.pointer;
+
+// shared/src/gsap/scrollTriggerRegistry.ts
+var DEFAULT_SHEET_INSTANCE_ID = "default";
+var REGISTRY_KEY = "__unseenco_theatre_gsap_scrollTriggerRegistry__";
+function sheetAddressKey(address) {
+  const sheetInstanceId = address.sheetInstanceId ?? DEFAULT_SHEET_INSTANCE_ID;
+  return "".concat(address.projectId, "|").concat(address.sheetId, "|").concat(sheetInstanceId);
+}
+function getStore() {
+  const g2 = globalThis;
+  if (!g2[REGISTRY_KEY]) {
+    g2[REGISTRY_KEY] = { bySheetAddress: /* @__PURE__ */ new Map() };
+  }
+  return g2[REGISTRY_KEY];
+}
+function listScrollTriggerEntriesForSheet(sheetKey) {
+  const map = getStore().bySheetAddress.get(sheetKey);
+  if (!map) return [];
+  return [...map.values()].sort((a2, b2) => a2.layout.start - b2.layout.start);
+}
+
 // shared/src/sequence/trackData.ts
 function isBasicKeyframedTrack(track) {
   return track.type === "BasicKeyframedTrack";
@@ -6223,6 +6334,19 @@ function isBasicKeyframedTrack(track) {
 function isGsapClipTrack(track) {
   return track.type === "GsapClipTrack";
 }
+function gsapClipEndTime(clip) {
+  return clip.start + clip.duration;
+}
+function gsapClipSyncProgress(sequencePosition, clip) {
+  if (clip.duration <= 0) return 0;
+  if (sequencePosition < clip.start) return 0;
+  const clipEnd = gsapClipEndTime(clip);
+  if (sequencePosition >= clipEnd - 1e-5) return 1;
+  const raw = (sequencePosition - clip.start) / clip.duration;
+  if (raw <= 0) return 0;
+  if (raw >= 1) return 1;
+  return raw;
+}
 
 // core/src/sequences/Sequence.ts
 var possibleDirections = [
@@ -6245,7 +6369,7 @@ var Sequence = class {
     __publicField(this, "_positionD");
     __publicField(this, "_positionFormatterD");
     __publicField(this, "_playableRangeD");
-    __publicField(this, "pointer", (0, import_theatre_dataverse13.pointer)({ root: this, path: [] }));
+    __publicField(this, "pointer", (0, import_theatre_dataverse14.pointer)({ root: this, path: [] }));
     __publicField(this, "$$isPointerToPrismProvider", true);
     __publicField(this, "_logger");
     __publicField(this, "closestGridPosition", (posInUnitSpace) => {
@@ -6258,32 +6382,35 @@ var Sequence = class {
     this._logger = _project._logger.named("Sheet", _sheet.address.sheetId).named("Instance", _sheet.address.sheetInstanceId).named("Variant", _sequenceVariant);
     this.address = { ...this._sheet.address, sequenceName: _sequenceVariant };
     this.publicApi = new TheatreSequence(this);
-    this._playbackControllerBox = new import_theatre_dataverse12.Atom(
+    this._playbackControllerBox = new import_theatre_dataverse13.Atom(
       playbackController ?? new DefaultPlaybackController()
     );
-    this._prismOfStatePointer = (0, import_theatre_dataverse14.prism)(
+    this._prismOfStatePointer = (0, import_theatre_dataverse15.prism)(
       () => this._playbackControllerBox.prism.getValue().statePointer
     );
-    this._positionD = (0, import_theatre_dataverse14.prism)(() => {
+    this._positionD = (0, import_theatre_dataverse15.prism)(() => {
       const statePointer = this._prismOfStatePointer.getValue();
-      return (0, import_theatre_dataverse14.val)(statePointer.position);
+      return (0, import_theatre_dataverse15.val)(statePointer.position);
     });
-    this._positionFormatterD = (0, import_theatre_dataverse14.prism)(() => {
-      const subUnitsPerUnit = (0, import_theatre_dataverse14.val)(this._subUnitsPerUnitD);
+    this._positionFormatterD = (0, import_theatre_dataverse15.prism)(() => {
+      const subUnitsPerUnit = (0, import_theatre_dataverse15.val)(this._subUnitsPerUnitD);
+      if (this._sheet.getSequenceMode() === "page") {
+        return new PercentBasedPositionFormatter(subUnitsPerUnit);
+      }
       return new TimeBasedPositionFormatter(subUnitsPerUnit);
     });
   }
   pointerToPrism(pointer3) {
-    const { path } = (0, import_theatre_dataverse11.getPointerParts)(pointer3);
+    const { path } = (0, import_theatre_dataverse12.getPointerParts)(pointer3);
     if (path.length === 0) {
-      return (0, import_theatre_dataverse14.prism)(() => ({
-        length: (0, import_theatre_dataverse14.val)(this.pointer.length),
-        playing: (0, import_theatre_dataverse14.val)(this.pointer.playing),
-        position: (0, import_theatre_dataverse14.val)(this.pointer.position)
+      return (0, import_theatre_dataverse15.prism)(() => ({
+        length: (0, import_theatre_dataverse15.val)(this.pointer.length),
+        playing: (0, import_theatre_dataverse15.val)(this.pointer.playing),
+        position: (0, import_theatre_dataverse15.val)(this.pointer.position)
       }));
     }
     if (path.length > 1) {
-      return (0, import_theatre_dataverse14.prism)(() => void 0);
+      return (0, import_theatre_dataverse15.prism)(() => void 0);
     }
     const [prop] = path;
     if (prop === "length") {
@@ -6291,11 +6418,11 @@ var Sequence = class {
     } else if (prop === "position") {
       return this._positionD;
     } else if (prop === "playing") {
-      return (0, import_theatre_dataverse14.prism)(() => {
-        return (0, import_theatre_dataverse14.val)(this._prismOfStatePointer.getValue().playing);
+      return (0, import_theatre_dataverse15.prism)(() => {
+        return (0, import_theatre_dataverse15.val)(this._prismOfStatePointer.getValue().playing);
       });
     } else {
-      return (0, import_theatre_dataverse14.prism)(() => void 0);
+      return (0, import_theatre_dataverse15.prism)(() => void 0);
     }
   }
   /**
@@ -6304,13 +6431,13 @@ var Sequence = class {
    * Theoretically, this method can be called from inside a prism so it can be reactive.
    */
   getKeyframesOfSimpleProp(prop) {
-    const { path, root: root2 } = (0, import_theatre_dataverse11.getPointerParts)(prop);
+    const { path, root: root2 } = (0, import_theatre_dataverse12.getPointerParts)(prop);
     if (!isSheetObject(root2)) {
       throw new InvalidArgumentError(
         "Argument prop must be a pointer to a SheetObject property"
       );
     }
-    const sheetState = (0, import_theatre_dataverse14.val)(
+    const sheetState = (0, import_theatre_dataverse15.val)(
       this._project.pointers.historic.sheetsById[this._sheet.address.sheetId]
     );
     const trackP = getSequenceStateFromSheet(sheetState, this._sequenceVariant)?.tracksByObject[root2.address.objectKey];
@@ -6333,7 +6460,7 @@ var Sequence = class {
    * @internal Used by the public sequence API.
    */
   getGsapClipsForObject(objectKey) {
-    const sheetState = (0, import_theatre_dataverse14.val)(
+    const sheetState = (0, import_theatre_dataverse15.val)(
       this._project.pointers.historic.sheetsById[this._sheet.address.sheetId]
     );
     const tracksOfObject = getSequenceStateFromSheet(
@@ -6350,7 +6477,7 @@ var Sequence = class {
     return result.sort((a2, b2) => a2.clip.start - b2.clip.start);
   }
   getGsapClips() {
-    const sheetState = (0, import_theatre_dataverse14.val)(
+    const sheetState = (0, import_theatre_dataverse15.val)(
       this._project.pointers.historic.sheetsById[this._sheet.address.sheetId]
     );
     const sequenceState = getSequenceStateFromSheet(
@@ -6375,6 +6502,21 @@ var Sequence = class {
     }
     return result.sort((a2, b2) => a2.clip.start - b2.clip.start);
   }
+  getGsapScrollTriggers() {
+    if (this._sheet.getSequenceMode() !== "page") {
+      return [];
+    }
+    const key = sheetAddressKey(this._sheet.address);
+    return listScrollTriggerEntriesForSheet(key).filter((entry) => entry.sheetObject != null).map((entry) => ({
+      objectKey: entry.sheetObject.address.objectKey,
+      scrollTriggerId: entry.id,
+      label: entry.label,
+      layout: entry.layout,
+      kind: entry.kind,
+      animationSpanSeconds: entry.animationSpanSeconds,
+      timelineChildren: entry.timelineChildren
+    }));
+  }
   get positionFormatter() {
     return this._positionFormatterD.getValue();
   }
@@ -6423,11 +6565,11 @@ var Sequence = class {
     return this._lengthD.getValue();
   }
   get playing() {
-    return (0, import_theatre_dataverse14.val)(this._playbackControllerBox.get().statePointer.playing);
+    return (0, import_theatre_dataverse15.val)(this._playbackControllerBox.get().statePointer.playing);
   }
   _makeRangeFromSequenceTemplate() {
-    return (0, import_theatre_dataverse14.prism)(() => {
-      return [0, (0, import_theatre_dataverse14.val)(this._lengthD)];
+    return (0, import_theatre_dataverse15.prism)(() => {
+      return [0, (0, import_theatre_dataverse15.val)(this._lengthD)];
     });
   }
   /**
@@ -6445,6 +6587,13 @@ var Sequence = class {
     return this._playbackControllerBox.get().playDynamicRange(rangeD, ticker);
   }
   async play(conf, ticker) {
+    if (this._sheet.getSequenceMode() === "page") {
+      notify.warning(
+        "Playback is disabled in page mode",
+        "The sequence is driven by page scroll. Scrub the playhead or scroll the page instead of calling sequence.play()."
+      );
+      return false;
+    }
     const sequenceDuration = this.length;
     const range = conf && conf.range ? conf.range : [0, sequenceDuration];
     if (process.env.NODE_ENV !== "production") {
@@ -6477,11 +6626,11 @@ var Sequence = class {
           ), "s) is longer than the duration of the sequence (").concat(sequenceDuration, "s).\n\nTo fix this, either set `conf.range[1]` to be less the duration of the sequence, or adjust the sequence duration in the UI."),
           [
             {
-              url: "https://www.theatrejs.com/docs/latest/manual/sequences",
+              url: "https://unseen-theatre.netlify.app/docs/guide/manual/sequences",
               title: "Sequences"
             },
             {
-              url: "https://www.theatrejs.com/docs/latest/manual/sequences",
+              url: "https://unseen-theatre.netlify.app/docs/guide/manual/sequences",
               title: "Playback API"
             }
           ]
@@ -6635,6 +6784,33 @@ var TimeBasedPositionFormatter = class {
     return posInUnitSpace.toFixed(2) + "s";
   }
 };
+var PercentBasedPositionFormatter = class {
+  constructor(_subUnitsPerUnit) {
+    this._subUnitsPerUnit = _subUnitsPerUnit;
+  }
+  formatSubUnitForGrid(posInUnitSpace) {
+    const subUnitSize = 1 / this._subUnitsPerUnit;
+    const withinUnit = posInUnitSpace % 1;
+    const tenths = Math.round(withinUnit / subUnitSize);
+    return tenths + "t";
+  }
+  formatFullUnitForGrid(posInUnitSpace) {
+    return Math.round(posInUnitSpace) + "%";
+  }
+  formatForPlayhead(posInUnitSpace) {
+    const whole = Math.floor(posInUnitSpace);
+    const subUnitSize = 1 / this._subUnitsPerUnit;
+    const withinUnit = posInUnitSpace - whole;
+    const tenths = Math.round(withinUnit / subUnitSize);
+    if (tenths <= 0) {
+      return whole + "%";
+    }
+    return whole + "." + tenths + "%";
+  }
+  formatBasic(posInUnitSpace) {
+    return posInUnitSpace.toFixed(1) + "%";
+  }
+};
 var second = 1;
 var minute = second * 60;
 var hour = minute * 60;
@@ -6669,11 +6845,11 @@ function validateAndSanitiseSlashedPathOrThrow(unsanitisedPath, fnName) {
       "The path in `".concat(fnName, '("').concat(unsanitisedPath, '")` was sanitized to `"').concat(sanitisedPath, '"`.\n\n') + "Please replace the path with the sanitized one, otherwise it will likely break in the future.",
       [
         {
-          url: "https://www.theatrejs.com/docs/latest/manual/objects#creating-sheet-objects",
+          url: "https://unseen-theatre.netlify.app/docs/guide/manual/objects#creating-objects",
           title: "Sheet Objects"
         },
         {
-          url: "https://www.theatrejs.com/docs/latest/api/core#sheet.object",
+          url: "https://unseen-theatre.netlify.app/docs/api/theatre-core#sheet.object",
           title: "API"
         }
       ]
@@ -6888,6 +7064,15 @@ var TheatreSheet = class {
   getActiveSequenceVariant() {
     return privateAPI(this).getActiveSequenceVariant();
   }
+  getSequenceMode() {
+    return privateAPI(this).getSequenceMode();
+  }
+  setSequenceMode(mode) {
+    privateAPI(this).setSequenceMode(mode);
+  }
+  setPageScrollDriver(driver) {
+    privateAPI(this).setPageScrollDriver(driver);
+  }
   get project() {
     return privateAPI(this).project.publicApi;
   }
@@ -6945,14 +7130,373 @@ var TheatreSheet = class {
 };
 
 // core/src/sheets/Sheet.ts
-var import_theatre_dataverse15 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse18 = require("@unseenco/theatre-dataverse");
+
+// core/src/sheets/sheetSequenceMode.ts
+var PAGE_MODE_SEQUENCE_LENGTH = 100;
+var PAGE_MODE_SUB_UNITS_PER_UNIT = 10;
+
+// shared/src/gsap/applyTimelineChildTiming.ts
+function applyTimelineChildTimingToGsap(rootAnimation, timelineChildren, childById, onRebuild) {
+  if (!timelineChildren.length) return true;
+  let ok = applyTimelineChildTimingToGsapInner(
+    rootAnimation,
+    timelineChildren,
+    childById
+  );
+  if (!ok && onRebuild) {
+    const rebuilt = onRebuild();
+    if (rebuilt) {
+      ok = applyTimelineChildTimingToGsapInner(
+        rebuilt,
+        timelineChildren,
+        childById
+      );
+    }
+  }
+  return ok;
+}
+function applyTimelineChildTimingToGsapInner(rootAnimation, timelineChildren, childById) {
+  if (!childById || timelineChildren.length === 0) return true;
+  let ok = true;
+  for (const childState of timelineChildren) {
+    const tween = childById.get(childState.childId);
+    if (!tween) continue;
+    try {
+      const t2 = tween;
+      if (typeof t2.startTime === "function") {
+        t2.startTime(childState.localStart);
+      }
+      if (typeof t2.duration === "function") {
+        t2.duration(childState.localDuration);
+      }
+    } catch {
+      ok = false;
+    }
+  }
+  return ok;
+}
+
+// shared/src/gsap/syncGsapClipProgress.ts
+function getGsapAnimationTargetKey(animation, fallbackAnimationId) {
+  const tween = animation;
+  const targets = tween.targets?.();
+  if (targets && targets.length > 0) {
+    return targets[0];
+  }
+  return fallbackAnimationId;
+}
+function syncRegisteredGsapAnimationsForClips(sequencePosition, clips) {
+  const enriched = [];
+  for (const clip of clips) {
+    const entry = getAnimationEntryBySheetAddressKey(
+      clip.sheetObjectAddressKey,
+      clip.gsapAnimationId
+    );
+    if (!entry?.animation) continue;
+    enriched.push({
+      ...clip,
+      entry,
+      targetKey: getGsapAnimationTargetKey(
+        entry.animation,
+        clip.gsapAnimationId
+      )
+    });
+  }
+  const byTarget = /* @__PURE__ */ new Map();
+  for (const item of enriched) {
+    const list = byTarget.get(item.targetKey) ?? [];
+    list.push(item);
+    byTarget.set(item.targetKey, list);
+  }
+  for (const group of byTarget.values()) {
+    const sorted = [...group].sort((a2, b2) => a2.start - b2.start);
+    for (const clip of sorted) {
+      const progress = gsapClipSyncProgress(sequencePosition, clip);
+      const entry = clip.entry;
+      const animation = entry.animation;
+      if (entry.kind === "timeline" && clip.timelineChildren && clip.timelineChildren.length > 0) {
+        applyTimelineChildTimingToGsap(
+          entry.animation,
+          clip.timelineChildren,
+          entry.timelineChildById,
+          entry.onRebuildTimeline
+        );
+        const span = clip.timelineSpan ?? readGsapTweenTimelineDuration(entry.animation);
+        const t2 = progress * Math.max(span, 0.01);
+        if (typeof animation.time === "function") {
+          animation.time(t2, true);
+        } else {
+          animation.progress?.(progress, true);
+        }
+      } else {
+        animation.progress?.(progress, true);
+      }
+    }
+  }
+}
+function readGsapTweenTimelineDuration(animation) {
+  const tween = animation;
+  const total = tween.totalDuration?.();
+  if (typeof total === "number" && total > 0) return total;
+  const d2 = tween.duration();
+  return d2 > 0 ? d2 : 1;
+}
+
+// shared/src/gsap/gsapAnimationRegistry.ts
+var DEFAULT_SHEET_INSTANCE_ID2 = "default";
+var REGISTRY_KEY2 = "__unseenco_theatre_gsap_animationRegistry__";
+function sheetObjectAddressKeyFromParts(address) {
+  const sheetInstanceId = address.sheetInstanceId ?? DEFAULT_SHEET_INSTANCE_ID2;
+  return "".concat(address.projectId, "|").concat(address.sheetId, "|").concat(sheetInstanceId, "|").concat(address.objectKey);
+}
+function getStore2() {
+  const g2 = globalThis;
+  if (!g2[REGISTRY_KEY2]) {
+    g2[REGISTRY_KEY2] = {
+      bySheetAddress: /* @__PURE__ */ new Map()
+    };
+  }
+  return g2[REGISTRY_KEY2];
+}
+function getAnimationEntryBySheetAddressKey(sheetObjectAddressKey, animationId) {
+  return getStore2().bySheetAddress.get(sheetObjectAddressKey)?.get(animationId);
+}
+
+// shared/src/gsap/subscribeGsapClipSyncAtPlayhead.ts
+var import_theatre_dataverse16 = require("@unseenco/theatre-dataverse");
+
+// shared/src/gsap/syncGsapClipsAtSequencePosition.ts
+function syncGsapClipsAtSequencePosition(position, clips) {
+  syncRegisteredGsapAnimationsForClips(
+    position,
+    clips
+  );
+}
+
+// shared/src/gsap/subscribeGsapClipSyncAtPlayhead.ts
+function subscribeGsapClipSyncAtPlayhead(source) {
+  const positionPointer = source.pointer.position;
+  const positionPrism = (0, import_theatre_dataverse16.pointerToPrism)(positionPointer);
+  const clipsPrism = (0, import_theatre_dataverse16.prism)(() => source.getGsapClipTimings());
+  const syncNow = () => {
+    const clips = clipsPrism.getValue();
+    if (clips.length === 0) return;
+    syncGsapClipsAtSequencePosition((0, import_theatre_dataverse16.val)(positionPointer), clips);
+  };
+  const untapPosition = positionPrism.onStale(syncNow);
+  const untapClips = clipsPrism.onStale(syncNow);
+  syncNow();
+  return () => {
+    untapPosition();
+    untapClips();
+  };
+}
+
+// core/src/gsap/attachGsapSequenceBridge.ts
+function attachGsapSequenceBridge(sheet) {
+  const sequence = sheet.sequence;
+  const sheetAddress = privateAPI(sheet).address;
+  return subscribeGsapClipSyncAtPlayhead({
+    pointer: sequence.pointer,
+    getGsapClipTimings: () => sequence.__experimental_getGsapClips().map(({ objectKey, clip }) => ({
+      sheetObjectAddressKey: sheetObjectAddressKeyFromParts({
+        projectId: sheetAddress.projectId,
+        sheetId: sheetAddress.sheetId,
+        sheetInstanceId: sheetAddress.sheetInstanceId,
+        objectKey
+      }),
+      gsapAnimationId: clip.gsapAnimationId,
+      start: clip.start,
+      duration: clip.duration,
+      timelineChildren: clip.timelineChildren,
+      timelineSpan: clip.timelineSpan
+    }))
+  });
+}
+
+// core/src/sheets/attachSheetScrollDriver.ts
+var import_theatre_dataverse17 = require("@unseenco/theatre-dataverse");
+var sheetScrollDrivers = /* @__PURE__ */ new WeakMap();
+var pageScrollDrivenSequencePositionListeners = /* @__PURE__ */ new Set();
+function onPageScrollDrivenSequencePosition(listener) {
+  pageScrollDrivenSequencePositionListeners.add(listener);
+  return () => {
+    pageScrollDrivenSequencePositionListeners.delete(listener);
+  };
+}
+function notifyPageScrollDrivenSequencePosition(sheet, position) {
+  for (const listener of pageScrollDrivenSequencePositionListeners) {
+    listener(sheet, position);
+  }
+}
+function getSheetScrollDriver(sheet) {
+  return sheetScrollDrivers.get(sheet);
+}
+function rememberSheetScrollDriver(sheet, driver) {
+  sheetScrollDrivers.set(sheet, driver);
+}
+function progressFromScrollPosition(position, max) {
+  if (max <= 0) return 0;
+  if (position <= 0) return 0;
+  if (position >= max - 1) return 1;
+  return position / max;
+}
+function getNativeDocumentScrollingElement() {
+  return document.scrollingElement ?? document.documentElement;
+}
+function addNativeDocumentScrollListener(handler) {
+  document.addEventListener("scroll", handler, { passive: true, capture: true });
+  return () => document.removeEventListener("scroll", handler, { capture: true });
+}
+function createScrollDriverFromElement(getMaxScroll, getScrollPos, setScrollPos, addScrollListener) {
+  let suppressScrollEvents = false;
+  let suppressGeneration = 0;
+  const getProgress = () => {
+    const max = getMaxScroll();
+    return progressFromScrollPosition(getScrollPos(), max);
+  };
+  const setProgress = (progress) => {
+    const max = getMaxScroll();
+    const clamped = Math.max(0, Math.min(1, progress));
+    const gen = ++suppressGeneration;
+    suppressScrollEvents = true;
+    setScrollPos(clamped * max);
+    const release = () => {
+      if (gen === suppressGeneration) {
+        suppressScrollEvents = false;
+      }
+    };
+    requestAnimationFrame(() => requestAnimationFrame(release));
+  };
+  return {
+    getProgress,
+    setProgress,
+    subscribe(onProgressChange) {
+      let rafId = 0;
+      const flush = () => {
+        rafId = 0;
+        if (suppressScrollEvents) return;
+        onProgressChange(getProgress());
+      };
+      const scheduleFlush = () => {
+        if (rafId !== 0) return;
+        rafId = requestAnimationFrame(flush);
+      };
+      const handler = () => scheduleFlush();
+      const removeScroll = addScrollListener(handler);
+      const onResize = () => scheduleFlush();
+      window.addEventListener("resize", onResize);
+      return () => {
+        removeScroll();
+        window.removeEventListener("resize", onResize);
+        if (rafId !== 0) cancelAnimationFrame(rafId);
+      };
+    }
+  };
+}
+function createNativeDocumentScrollDriver() {
+  const getMaxScroll = () => {
+    const el = document.documentElement;
+    return Math.max(0, el.scrollHeight - window.innerHeight);
+  };
+  return createScrollDriverFromElement(
+    getMaxScroll,
+    () => window.scrollY,
+    (y2) => window.scrollTo({ top: y2, behavior: "instant" }),
+    addNativeDocumentScrollListener
+  );
+}
+function createNativeDocumentHorizontalScrollDriver() {
+  const getMaxScroll = () => {
+    const el = getNativeDocumentScrollingElement();
+    return Math.max(0, el.scrollWidth - el.clientWidth);
+  };
+  const getScrollLeft = () => {
+    const el = getNativeDocumentScrollingElement();
+    return el.scrollLeft;
+  };
+  return createScrollDriverFromElement(
+    getMaxScroll,
+    getScrollLeft,
+    (x2) => {
+      getNativeDocumentScrollingElement().scrollLeft = x2;
+    },
+    addNativeDocumentScrollListener
+  );
+}
+function createElementScrollDriver(element) {
+  const getMaxScroll = () => Math.max(0, element.scrollHeight - element.clientHeight);
+  return createScrollDriverFromElement(
+    getMaxScroll,
+    () => element.scrollTop,
+    (y2) => {
+      element.scrollTop = y2;
+    },
+    (handler) => {
+      element.addEventListener("scroll", handler, { passive: true });
+      return () => element.removeEventListener("scroll", handler);
+    }
+  );
+}
+function createElementHorizontalScrollDriver(element) {
+  const getMaxScroll = () => Math.max(0, element.scrollWidth - element.clientWidth);
+  return createScrollDriverFromElement(
+    getMaxScroll,
+    () => element.scrollLeft,
+    (x2) => {
+      element.scrollLeft = x2;
+    },
+    (handler) => {
+      element.addEventListener("scroll", handler, { passive: true });
+      return () => element.removeEventListener("scroll", handler);
+    }
+  );
+}
+function attachSheetScrollDriver(sheet, driver = createNativeDocumentScrollDriver()) {
+  rememberSheetScrollDriver(sheet, driver);
+  const sequence = sheet.sequence;
+  const syncPositionFromScroll = (progress) => {
+    const length = (0, import_theatre_dataverse17.val)(sequence.pointer.length);
+    if (length <= 0) return;
+    sequence.position = progress * length;
+  };
+  const untapScroll = driver.subscribe((progress) => {
+    syncPositionFromScroll(progress);
+    notifyPageScrollDrivenSequencePosition(sheet, sequence.position);
+  });
+  syncPositionFromScroll(driver.getProgress());
+  return () => {
+    untapScroll();
+  };
+}
+function pageScrollProgressFromSequence(sheet) {
+  const length = (0, import_theatre_dataverse17.val)(sheet.sequence.pointer.length);
+  if (length <= 0) return 0;
+  return sheet.sequence.position / length;
+}
+function setPageScrollProgress(sheet, progress) {
+  const length = (0, import_theatre_dataverse17.val)(sheet.sequence.pointer.length);
+  if (length <= 0) return;
+  const clamped = Math.max(0, Math.min(1, progress));
+  sheet.sequence.position = clamped * length;
+}
+function syncPageScrollToSequencePosition(sheet, driver = getSheetScrollDriver(sheet) ?? createNativeDocumentScrollDriver()) {
+  const progress = pageScrollProgressFromSequence(sheet);
+  driver.setProgress(progress);
+}
+function syncNativeDocumentScrollToSequencePosition(sheet) {
+  syncPageScrollToSequencePosition(sheet, createNativeDocumentScrollDriver());
+}
+
+// core/src/sheets/Sheet.ts
 var Sheet = class {
   constructor(template, instanceId) {
     this.template = template;
     this.instanceId = instanceId;
-    __publicField(this, "_objects", new import_theatre_dataverse15.Atom({}));
+    __publicField(this, "_objects", new import_theatre_dataverse18.Atom({}));
     __publicField(this, "_sequences", {});
-    __publicField(this, "_activeSequenceVariant", new import_theatre_dataverse15.Atom(
+    __publicField(this, "_activeSequenceVariant", new import_theatre_dataverse18.Atom(
       DEFAULT_SEQUENCE_VARIANT
     ));
     /**
@@ -6960,7 +7504,12 @@ var Sheet = class {
      * value resolution (preview). User code can still update `_activeSequenceVariant`
      * via `setActiveSequenceVariant()` without affecting the Studio preview.
      */
-    __publicField(this, "_studioPreviewVariantOverride", new import_theatre_dataverse15.Atom(void 0));
+    __publicField(this, "_studioPreviewVariantOverride", new import_theatre_dataverse18.Atom(void 0));
+    __publicField(this, "_sequenceMode", new import_theatre_dataverse18.Atom("time"));
+    __publicField(this, "sequenceModeP", this._sequenceMode.pointer);
+    __publicField(this, "_pageScrollDisposer");
+    __publicField(this, "_customPageScrollDriver");
+    __publicField(this, "_gsapBridgeDisposer");
     __publicField(this, "activeSequenceVariantP", this._activeSequenceVariant.pointer);
     __publicField(this, "effectiveActiveSequenceVariantD");
     __publicField(this, "address");
@@ -6977,12 +7526,12 @@ var Sheet = class {
       sheetInstanceId: this.instanceId
     };
     this.publicApi = new TheatreSheet(this);
-    this.effectiveActiveSequenceVariantD = (0, import_theatre_dataverse15.prism)(() => {
-      const studioOverride = (0, import_theatre_dataverse15.val)(this._studioPreviewVariantOverride.pointer);
+    this.effectiveActiveSequenceVariantD = (0, import_theatre_dataverse18.prism)(() => {
+      const studioOverride = (0, import_theatre_dataverse18.val)(this._studioPreviewVariantOverride.pointer);
       if (studioOverride !== void 0) {
         return studioOverride;
       }
-      return (0, import_theatre_dataverse15.val)(this._activeSequenceVariant.pointer);
+      return (0, import_theatre_dataverse18.val)(this._activeSequenceVariant.pointer);
     });
   }
   /**
@@ -7033,6 +7582,7 @@ var Sheet = class {
    * this sheet instance from the project. Persisted state is kept.
    */
   unload() {
+    this.disposeRuntimeIntegrations();
     for (const sequence of Object.values(this._sequences)) {
       sequence.pause();
     }
@@ -7044,10 +7594,13 @@ var Sheet = class {
     this.project._unloadSheetInstance(this);
   }
   getSequence(variant) {
-    const variantId = variant ?? (0, import_theatre_dataverse15.val)(this._activeSequenceVariant.pointer);
+    const variantId = variant ?? (0, import_theatre_dataverse18.val)(this._activeSequenceVariant.pointer);
     if (!this._sequences[variantId]) {
-      const lengthD = (0, import_theatre_dataverse15.prism)(() => {
-        const sheetState = (0, import_theatre_dataverse15.val)(
+      const lengthD = (0, import_theatre_dataverse18.prism)(() => {
+        if ((0, import_theatre_dataverse18.val)(this._sequenceMode.pointer) === "page") {
+          return PAGE_MODE_SEQUENCE_LENGTH;
+        }
+        const sheetState = (0, import_theatre_dataverse18.val)(
           this.project.pointers.historic.sheetsById[this.address.sheetId]
         );
         const unsanitized = getSequenceStateFromSheet(
@@ -7056,8 +7609,11 @@ var Sheet = class {
         )?.length;
         return sanitizeSequenceLength(unsanitized);
       });
-      const subUnitsPerUnitD = (0, import_theatre_dataverse15.prism)(() => {
-        const sheetState = (0, import_theatre_dataverse15.val)(
+      const subUnitsPerUnitD = (0, import_theatre_dataverse18.prism)(() => {
+        if ((0, import_theatre_dataverse18.val)(this._sequenceMode.pointer) === "page") {
+          return PAGE_MODE_SUB_UNITS_PER_UNIT;
+        }
+        const sheetState = (0, import_theatre_dataverse18.val)(
           this.project.pointers.historic.sheetsById[this.address.sheetId]
         );
         const unsanitized = getSequenceStateFromSheet(
@@ -7109,6 +7665,44 @@ var Sheet = class {
     }
     this._studioPreviewVariantOverride.set(variantId);
   }
+  getSequenceMode() {
+    return this._sequenceMode.get();
+  }
+  setSequenceMode(mode) {
+    if (this._sequenceMode.get() === mode) return;
+    this._sequenceMode.set(mode);
+    this.syncPageScrollDriver();
+    if (this._gsapBridgeDisposer) {
+      this._gsapBridgeDisposer();
+      this._gsapBridgeDisposer = attachGsapSequenceBridge(this.publicApi);
+    }
+  }
+  enableGsapSequenceBridge() {
+    if (this._gsapBridgeDisposer) return;
+    this._gsapBridgeDisposer = attachGsapSequenceBridge(this.publicApi);
+    this.syncPageScrollDriver();
+  }
+  disposeRuntimeIntegrations() {
+    this._pageScrollDisposer?.();
+    this._pageScrollDisposer = void 0;
+    this._gsapBridgeDisposer?.();
+    this._gsapBridgeDisposer = void 0;
+  }
+  syncPageScrollDriver() {
+    this._pageScrollDisposer?.();
+    this._pageScrollDisposer = void 0;
+    if (this.getSequenceMode() === "page") {
+      const driver = this._customPageScrollDriver ?? createNativeDocumentScrollDriver();
+      this._pageScrollDisposer = attachSheetScrollDriver(this.publicApi, driver);
+    }
+  }
+  setPageScrollDriver(driver) {
+    this._customPageScrollDriver = driver;
+    this.syncPageScrollDriver();
+  }
+  getPageScrollDriver() {
+    return this._customPageScrollDriver;
+  }
 };
 var sanitizeSequenceLength = (len) => typeof len === "number" && isFinite(len) && len > 0 ? len : 10;
 var sanitizeSequenceSubUnitsPerUnit = (subs) => typeof subs === "number" && isInteger_default(subs) && subs >= 1 && subs <= 1e3 ? subs : 30;
@@ -7119,13 +7713,13 @@ var SheetTemplate = class {
     this.project = project;
     __publicField(this, "type", "Theatre_SheetTemplate");
     __publicField(this, "address");
-    __publicField(this, "_instances", new import_theatre_dataverse16.Atom({}));
+    __publicField(this, "_instances", new import_theatre_dataverse19.Atom({}));
     __publicField(this, "instancesP", this._instances.pointer);
-    __publicField(this, "_objectTemplates", new import_theatre_dataverse16.Atom({}));
+    __publicField(this, "_objectTemplates", new import_theatre_dataverse19.Atom({}));
     __publicField(this, "objectTemplatesP", this._objectTemplates.pointer);
     __publicField(this, "_pendingOutlineNamespaces", {});
     __publicField(this, "_sequenceVariants", [DEFAULT_SEQUENCE_VARIANT]);
-    __publicField(this, "_visibleInOutline", new import_theatre_dataverse16.Atom(true));
+    __publicField(this, "_visibleInOutline", new import_theatre_dataverse19.Atom(true));
     __publicField(this, "visibleInOutlineP", this._visibleInOutline.pointer);
     this.address = { ...project.address, sheetId };
   }
@@ -7207,8 +7801,8 @@ var SheetTemplate = class {
 };
 
 // core/src/projects/Project.ts
-var import_theatre_dataverse19 = require("@unseenco/theatre-dataverse");
-var import_theatre_dataverse20 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse22 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse23 = require("@unseenco/theatre-dataverse");
 
 // shared/src/utils/delay.ts
 var delay = (dur) => new Promise((resolve) => setTimeout(resolve, dur));
@@ -7646,8 +8240,165 @@ async function initialiseProjectState(studio, project, onDiskState) {
   });
 }
 
+// shared/src/sheets/pageScrollContext.ts
+var defaultPageScrollContext = {
+  scroller: null,
+  axis: "vertical"
+};
+var activePageScrollContext = defaultPageScrollContext;
+function setActivePageScrollContext(context) {
+  activePageScrollContext = {
+    scroller: context.scroller,
+    axis: context.axis ?? "vertical"
+  };
+}
+function getActivePageScrollContext() {
+  return activePageScrollContext;
+}
+function resolvePageScrollAxis(context = defaultPageScrollContext) {
+  return context.axis ?? "vertical";
+}
+function resolvePageScrollScroller(st, defaultsScroller) {
+  const surface = st;
+  const fromSt = surface.scroller ?? surface.vars?.scroller;
+  if (fromSt != null) {
+    return fromSt;
+  }
+  if (defaultsScroller !== void 0) {
+    return defaultsScroller;
+  }
+  return null;
+}
+function isWindowLike(value) {
+  return typeof Window !== "undefined" && (value === window || value instanceof Window);
+}
+function isNativeDocumentScroller(scroller) {
+  if (scroller == null) return true;
+  if (isWindowLike(scroller)) return true;
+  if (typeof document === "undefined") return false;
+  return scroller === document.documentElement || scroller === document.body;
+}
+function pageScrollScrollersMatch(a2, b2) {
+  if (a2 === b2) return true;
+  if (isNativeDocumentScroller(a2) && isNativeDocumentScroller(b2)) return true;
+  return false;
+}
+function isScrollTriggerHorizontal(st) {
+  const surface = st;
+  return surface.horizontal === true || surface.vars?.horizontal === true;
+}
+function isPageScrollTrigger(st, context = defaultPageScrollContext) {
+  const axis = resolvePageScrollAxis(context);
+  const stHorizontal = isScrollTriggerHorizontal(st);
+  if (stHorizontal !== (axis === "horizontal")) {
+    return false;
+  }
+  const stScroller = resolvePageScrollScroller(st, context.scroller);
+  return pageScrollScrollersMatch(stScroller, context.scroller);
+}
+function isVerticalPageScrollTrigger(st, context = defaultPageScrollContext) {
+  return isPageScrollTrigger(st, {
+    scroller: context.scroller,
+    axis: "vertical"
+  });
+}
+
+// shared/src/gsap/scrollTriggerLayout.ts
+function getNativeDocumentMaxScroll(axis = "vertical") {
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    return 0;
+  }
+  const el = document.documentElement;
+  if (axis === "horizontal") {
+    const scrolling = document.scrollingElement ?? el;
+    return Math.max(0, scrolling.scrollWidth - scrolling.clientWidth);
+  }
+  return Math.max(0, el.scrollHeight - window.innerHeight);
+}
+function getMaxScrollForScroller(scroller, axis = "vertical") {
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    return 0;
+  }
+  if (isNativeDocumentScroller(scroller)) {
+    return getNativeDocumentMaxScroll(axis);
+  }
+  const el = scroller;
+  if (axis === "horizontal") {
+    return Math.max(0, el.scrollWidth - el.clientWidth);
+  }
+  return Math.max(0, el.scrollHeight - el.clientHeight);
+}
+function getMaxScrollForPageScrollContext(scroller, axis = "vertical") {
+  return getMaxScrollForScroller(scroller, axis);
+}
+
+// shared/src/gsap/domElementHighlightTarget.ts
+function resolveDomElementHighlightTarget(target) {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  if (target.type === "id") {
+    return document.getElementById(target.id);
+  }
+  try {
+    const match = document.querySelector(target.selector);
+    return match instanceof Element ? match : null;
+  } catch {
+    return null;
+  }
+}
+
+// shared/src/sheets/remoteDomElementHighlight.ts
+var listeners = /* @__PURE__ */ new Set();
+function setRemoteDomElementHighlight(element) {
+  for (const listener of listeners) {
+    listener(element);
+  }
+}
+
+// shared/src/sheets/remotePageScrollMetrics.ts
+var remoteMetrics;
+var listeners2 = /* @__PURE__ */ new Set();
+function setRemotePageScrollMetrics(metrics) {
+  const prev = remoteMetrics;
+  remoteMetrics = metrics;
+  if (prev?.maxScroll !== metrics?.maxScroll || prev?.axis !== metrics?.axis) {
+    for (const listener of listeners2) {
+      listener();
+    }
+  }
+}
+
 // core/src/internal/RemoteSync.ts
-var import_theatre_dataverse17 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse20 = require("@unseenco/theatre-dataverse");
+
+// core/src/internal/createDebouncedCallback.ts
+function createDebouncedCallback(fn2, delayMs) {
+  let timeoutId;
+  const clearPending = () => {
+    if (timeoutId !== void 0) {
+      clearTimeout(timeoutId);
+      timeoutId = void 0;
+    }
+  };
+  return {
+    schedule() {
+      clearPending();
+      timeoutId = setTimeout(() => {
+        timeoutId = void 0;
+        fn2();
+      }, delayMs);
+    },
+    flush() {
+      if (timeoutId === void 0) return;
+      clearPending();
+      fn2();
+    },
+    cancel() {
+      clearPending();
+    }
+  };
+}
 
 // core/src/internal/remoteEditor.ts
 function isRemoteEditorWindow() {
@@ -7655,6 +8406,10 @@ function isRemoteEditorWindow() {
 }
 
 // core/src/internal/RemoteSync.ts
+var REMOTE_HISTORIC_SYNC_DEBOUNCE_MS = 100;
+function shouldSyncPageScrollWhenApplyingTimelineUpdate(isEditor, sequenceMode) {
+  return !isEditor && sequenceMode === "page";
+}
 var RemoteSync = class {
   constructor(project) {
     this.project = project;
@@ -7665,34 +8420,37 @@ var RemoteSync = class {
     __publicField(this, "objectUnsubs", /* @__PURE__ */ new Map());
     __publicField(this, "studio");
     __publicField(this, "activeSheet");
+    __publicField(this, "historicSyncDebounce");
+    __publicField(this, "lastBroadcastHistoricFingerprint");
+    __publicField(this, "historicSyncUnsubs", []);
+    __publicField(this, "remoteEditorActive", false);
+    __publicField(this, "suppressTimelineBroadcast", false);
+    __publicField(this, "listenerTimelineUnsub");
+    __publicField(this, "listenerMetricsUnsubs", []);
+    __publicField(this, "broadcastPageScrollMetrics");
     if (typeof BroadcastChannel === "undefined") return;
     this.channel = new BroadcastChannel(
       "theatre-remote:".concat(project.address.projectId)
     );
+    this.channel.onmessage = (event) => {
+      this._handleIncoming(event.data);
+    };
     if (!this.isEditor) {
-      this.channel.onmessage = (event) => {
-        this._handleIncoming(event.data);
-      };
+      this.listenerTimelineUnsub = onPageScrollDrivenSequencePosition(
+        (sheet, position) => {
+          this._broadcastTimelineFromListener(sheet, position);
+        }
+      );
     } else {
       const channel = this.channel;
       window.addEventListener("pagehide", () => {
-        const data = {};
-        if (this.studio) {
-          const projectId = this.project.address.projectId;
-          const historic = (0, import_theatre_dataverse17.val)(
-            this.studio.atomP.historic.coreByProject[projectId]
-          );
-          const ahistoric = (0, import_theatre_dataverse17.val)(
-            this.studio.atomP.ahistoric.coreByProject[projectId]
-          );
-          if (historic) {
-            data.historic = JSON.parse(JSON.stringify(historic));
-            if (ahistoric) {
-              data.ahistoric = JSON.parse(JSON.stringify(ahistoric));
-            }
-          }
+        this.historicSyncDebounce?.flush();
+        const data = this._readHistoricSnapshotFromStudio();
+        if (data && this.lastBroadcastHistoricFingerprint === fingerprintHistoricSnapshot(data)) {
+          channel.postMessage({ event: "disconnect", data: {} });
+          return;
         }
-        channel.postMessage({ event: "disconnect", data });
+        channel.postMessage({ event: "disconnect", data: data ?? {} });
       });
     }
   }
@@ -7743,8 +8501,13 @@ var RemoteSync = class {
   }
   attachStudio(studio) {
     this.studio = studio;
-    if (!this.isEditor || !this.channel) return;
+    if (!this.channel) return;
+    if (!this.isEditor) {
+      this._attachListenerPageScrollMetricsBroadcast();
+      return;
+    }
     const channel = this.channel;
+    channel.postMessage({ event: "editorHello", data: {} });
     const projectId = this.project.address.projectId;
     studio.publicApi.onSelectionChange((selection) => {
       for (const item of selection) {
@@ -7769,7 +8532,7 @@ var RemoteSync = class {
     let lastPosition;
     const ticker = getCoreTicker();
     const pollTimelinePosition = () => {
-      if (this.activeSheet) {
+      if (this.activeSheet && !this.suppressTimelineBroadcast) {
         const position = this.activeSheet.publicApi.sequence.position;
         if (position !== lastPosition) {
           lastPosition = position;
@@ -7783,9 +8546,117 @@ var RemoteSync = class {
       ticker.onNextTick(pollTimelinePosition);
     };
     ticker.onNextTick(pollTimelinePosition);
+    this.historicSyncDebounce = createDebouncedCallback(() => {
+      this._broadcastHistoricSnapshot();
+    }, REMOTE_HISTORIC_SYNC_DEBOUNCE_MS);
+    const scheduleHistoricSync = () => {
+      this.historicSyncDebounce?.schedule();
+    };
+    void studio.initialized.then(() => {
+      this.historicSyncUnsubs.push(
+        (0, import_theatre_dataverse20.pointerToPrism)(studio.atomP.historic.coreByProject[projectId]).onChange(
+          studio.ticker,
+          scheduleHistoricSync,
+          true
+        ),
+        (0, import_theatre_dataverse20.pointerToPrism)(
+          studio.atomP.ahistoric.coreByProject[projectId]
+        ).onChange(studio.ticker, scheduleHistoricSync, true)
+      );
+    });
+  }
+  _readHistoricSnapshotFromStudio() {
+    if (!this.studio) return void 0;
+    const projectId = this.project.address.projectId;
+    const historic = (0, import_theatre_dataverse20.val)(
+      this.studio.atomP.historic.coreByProject[projectId]
+    );
+    if (!historic) return void 0;
+    const data = {
+      historic: JSON.parse(JSON.stringify(historic))
+    };
+    const ahistoric = (0, import_theatre_dataverse20.val)(
+      this.studio.atomP.ahistoric.coreByProject[projectId]
+    );
+    if (ahistoric) {
+      data.ahistoric = JSON.parse(JSON.stringify(ahistoric));
+    }
+    return data;
+  }
+  _broadcastHistoricSnapshot(options) {
+    if (!this.channel) return;
+    const data = this._readHistoricSnapshotFromStudio();
+    if (!data) return;
+    const fingerprint = fingerprintHistoricSnapshot(data);
+    if (!options?.force && fingerprint === this.lastBroadcastHistoricFingerprint) {
+      return;
+    }
+    this.lastBroadcastHistoricFingerprint = fingerprint;
+    const message = { event: "updateHistoric", data };
+    this.channel.postMessage(message);
+  }
+  _applyHistoricSnapshot(historic, ahistoric) {
+    if (!this.studio) return;
+    const projectId = this.project.address.projectId;
+    this.studio.transaction(({ drafts }) => {
+      drafts.historic.coreByProject[projectId] = historic;
+      if (ahistoric) {
+        drafts.ahistoric.coreByProject[projectId] = ahistoric;
+      }
+      drafts.ephemeral.coreByProject[projectId].loadingState = {
+        type: "loaded"
+      };
+    });
+  }
+  _broadcastTimelineFromListener(sheet, position) {
+    if (this.isEditor || !this.channel || !this.remoteEditorActive || this.suppressTimelineBroadcast) {
+      return;
+    }
+    const registered = this.sheets.get(sheet.address.sheetId);
+    if (!registered || registered.getSequenceMode() !== "page") return;
+    const message = {
+      event: "updateTimeline",
+      data: { sheet: sheet.address.sheetId, position }
+    };
+    this.channel.postMessage(message);
+  }
+  _postPageScrollMetrics() {
+    if (!this.remoteEditorActive || !this.channel) return;
+    const ctx = getActivePageScrollContext();
+    const axis = resolvePageScrollAxis(ctx);
+    const maxScroll = getMaxScrollForPageScrollContext(ctx.scroller, axis);
+    const message = {
+      event: "pageScrollMetrics",
+      data: { maxScroll, axis }
+    };
+    this.channel.postMessage(message);
+  }
+  _attachListenerPageScrollMetricsBroadcast() {
+    if (this.isEditor || !this.channel) return;
+    const broadcast = () => this._postPageScrollMetrics();
+    this.broadcastPageScrollMetrics = broadcast;
+    const onScroll = () => broadcast();
+    document.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    const onResize = () => broadcast();
+    window.addEventListener("resize", onResize);
+    const ScrollTrigger = globalThis.ScrollTrigger;
+    ScrollTrigger?.addEventListener?.("refresh", broadcast);
+    broadcast();
+    this.listenerMetricsUnsubs.push(() => {
+      document.removeEventListener("scroll", onScroll, { capture: true });
+      window.removeEventListener("resize", onResize);
+      ScrollTrigger?.removeEventListener?.("refresh", broadcast);
+    });
   }
   _handleIncoming(msg) {
     switch (msg.event) {
+      case "editorHello": {
+        if (this.isEditor) break;
+        this.remoteEditorActive = true;
+        this.broadcastPageScrollMetrics?.();
+        this._broadcastHistoricSnapshot({ force: true });
+        break;
+      }
       case "setSheet": {
         const sheet = this.sheets.get(msg.data.sheet);
         if (sheet && this.studio) {
@@ -7810,32 +8681,67 @@ var RemoteSync = class {
         const sheet = this.sheets.get(msg.data.sheet);
         if (sheet) {
           this.activeSheet = sheet;
+          this.suppressTimelineBroadcast = true;
           sheet.publicApi.sequence.position = msg.data.position;
+          if (shouldSyncPageScrollWhenApplyingTimelineUpdate(
+            this.isEditor,
+            sheet.getSequenceMode()
+          )) {
+            syncPageScrollToSequencePosition(sheet.publicApi);
+          }
+          requestAnimationFrame(() => {
+            this.suppressTimelineBroadcast = false;
+          });
+        }
+        break;
+      }
+      case "pageScrollMetrics": {
+        if (!this.isEditor) break;
+        const { maxScroll, axis } = msg.data;
+        setRemotePageScrollMetrics({ maxScroll, axis });
+        break;
+      }
+      case "highlightDomTarget": {
+        if (this.isEditor || !this.remoteEditorActive) break;
+        const target = msg.data.target;
+        const element = resolveDomElementHighlightTarget(target);
+        setRemoteDomElementHighlight(element);
+        break;
+      }
+      case "clearDomHighlight": {
+        if (this.isEditor || !this.remoteEditorActive) break;
+        setRemoteDomElementHighlight(null);
+        break;
+      }
+      case "updateHistoric": {
+        const { historic, ahistoric } = msg.data;
+        if (historic) {
+          this._applyHistoricSnapshot(historic, ahistoric);
         }
         break;
       }
       case "disconnect": {
         const { historic, ahistoric } = msg.data;
-        if (historic && this.studio) {
-          const projectId = this.project.address.projectId;
-          this.studio.transaction(({ drafts }) => {
-            drafts.historic.coreByProject[projectId] = historic;
-            if (ahistoric) {
-              drafts.ahistoric.coreByProject[projectId] = ahistoric;
-            }
-            drafts.ephemeral.coreByProject[projectId].loadingState = {
-              type: "loaded"
-            };
-          });
+        if (historic) {
+          this._applyHistoricSnapshot(historic, ahistoric);
         }
         for (const obj of this.objects.values()) {
           obj.setRemoteOverride({});
         }
+        if (!this.isEditor) {
+          this.remoteEditorActive = false;
+          setRemoteDomElementHighlight(null);
+        } else {
+          setRemotePageScrollMetrics(void 0);
+        }
         break;
       }
     }
   }
 };
+function fingerprintHistoricSnapshot(data) {
+  return JSON.stringify(data);
+}
 
 // core/src/_coreLogger.ts
 function noop2() {
@@ -7862,7 +8768,7 @@ function _coreLogger(config) {
 }
 
 // shared/src/utils/assets.ts
-var import_theatre_dataverse18 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse21 = require("@unseenco/theatre-dataverse");
 
 // shared/src/utils/forEachDeep.ts
 function forEachPropDeep(m, fn2, startingPath = []) {
@@ -7932,7 +8838,7 @@ var Project = class {
     __publicField(this, "_studioReadyDeferred");
     __publicField(this, "_assetStorageReadyDeferred");
     __publicField(this, "_readyPromise");
-    __publicField(this, "_sheetTemplates", new import_theatre_dataverse20.Atom({}));
+    __publicField(this, "_sheetTemplates", new import_theatre_dataverse23.Atom({}));
     __publicField(this, "sheetTemplatesP", this._sheetTemplates.pointer);
     __publicField(this, "_studio");
     __publicField(this, "_onDiskStateAtom");
@@ -7945,7 +8851,7 @@ var Project = class {
     this._logger.traceDev("creating project");
     this.address = { projectId: id };
     this._remoteSync = new RemoteSync(this);
-    const onDiskStateAtom = new import_theatre_dataverse20.Atom({
+    const onDiskStateAtom = new import_theatre_dataverse23.Atom({
       ahistoric: {
         ahistoricStuff: ""
       },
@@ -7971,9 +8877,9 @@ var Project = class {
       }
     };
     this._pointerProxies = {
-      historic: new import_theatre_dataverse19.PointerProxy(onDiskStateAtom.pointer.historic),
-      ahistoric: new import_theatre_dataverse19.PointerProxy(onDiskStateAtom.pointer.ahistoric),
-      ephemeral: new import_theatre_dataverse19.PointerProxy(onDiskStateAtom.pointer.ephemeral)
+      historic: new import_theatre_dataverse22.PointerProxy(onDiskStateAtom.pointer.historic),
+      ahistoric: new import_theatre_dataverse22.PointerProxy(onDiskStateAtom.pointer.ahistoric),
+      ephemeral: new import_theatre_dataverse22.PointerProxy(onDiskStateAtom.pointer.ephemeral)
     };
     this.pointers = {
       historic: this._pointerProxies.historic.pointer,
@@ -8000,14 +8906,14 @@ var Project = class {
       if (typeof window === "undefined") {
         if (process.env.NODE_ENV === "production") {
           console.error(
-            'Argument config.state in Theatre.getProject("'.concat(id, '", config) is empty. ') + "You can safely ignore this message if you're developing a Next.js/Remix project in development mode. But if you are shipping to your end-users, then you need to set config.state, otherwise your project's state will be empty and nothing will animate. Learn more at https://www.theatrejs.com/docs/latest/manual/projects#state"
+            'Argument config.state in Theatre.getProject("'.concat(id, '", config) is empty. ') + "You can safely ignore this message if you're developing a Next.js/Remix project in development mode. But if you are shipping to your end-users, then you need to set config.state, otherwise your project's state will be empty and nothing will animate. Learn more at https://unseen-theatre.netlify.app/docs/guide/manual/projects#state"
           );
         }
       } else {
         setTimeout(() => {
           if (!this._studio) {
             throw new Error(
-              'Argument config.state in Theatre.getProject("'.concat(id, '", config) is empty. This is fine ') + "while you are using @unseenco/theatre-core along with @unseenco/theatre-studio. But since @unseenco/theatre-studio " + 'is not loaded, the state of project "'.concat(id, '" will be empty.\n\n') + "To fix this, you need to add @unseenco/theatre-studio into the bundle and export the project's state. Learn how to do that at https://www.theatrejs.com/docs/latest/manual/projects#state\n"
+              'Argument config.state in Theatre.getProject("'.concat(id, '", config) is empty. This is fine ') + "while you are using @unseenco/theatre-core along with @unseenco/theatre-studio. But since @unseenco/theatre-studio " + 'is not loaded, the state of project "'.concat(id, '" will be empty.\n\n') + "To fix this, you need to add @unseenco/theatre-studio into the bundle and export the project's state. Learn how to do that at https://unseen-theatre.netlify.app/docs/guide/manual/projects#state\n"
             );
           }
         }, 1e3);
@@ -8071,6 +8977,7 @@ var Project = class {
       template.setVisibleInOutline(opts.visible);
     }
     const sheet = template.getInstance(instanceId);
+    applySheetRuntimeOptions(sheet, opts);
     this._remoteSync.registerSheet(sheet);
     return sheet;
   }
@@ -8351,13 +9258,13 @@ var Project = class {
 };
 
 // shared/src/utils/sanitizers.ts
-var _validateSym = (val11, thingy, range) => {
-  if (typeof val11 !== "string") {
-    return "".concat(thingy, " must be a string. ").concat(userReadableTypeOfValue_default(val11), " given.");
-  } else if (val11.trim().length !== val11.length) {
-    return "".concat(thingy, " must not have leading or trailing spaces. '").concat(val11, "' given.");
-  } else if (val11.length < range[0] || val11.length > range[1]) {
-    return "".concat(thingy, " must have between ").concat(range[0], " and ").concat(range[1], " characters. '").concat(val11, "' given.");
+var _validateSym = (val13, thingy, range) => {
+  if (typeof val13 !== "string") {
+    return "".concat(thingy, " must be a string. ").concat(userReadableTypeOfValue_default(val13), " given.");
+  } else if (val13.trim().length !== val13.length) {
+    return "".concat(thingy, " must not have leading or trailing spaces. '").concat(val13, "' given.");
+  } else if (val13.length < range[0] || val13.length > range[1]) {
+    return "".concat(thingy, " must have between ").concat(range[0], " and ").concat(range[1], " characters. '").concat(val13, "' given.");
   }
 };
 var validateName = (name, thingy, shouldThrow = false) => {
@@ -8473,8 +9380,62 @@ var TheatreProject = class {
 
 // core/src/coreExports.ts
 var import_fast_deep_equal3 = __toESM(require_fast_deep_equal());
-var import_theatre_dataverse21 = require("@unseenco/theatre-dataverse");
-var import_theatre_dataverse22 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse24 = require("@unseenco/theatre-dataverse");
+var import_theatre_dataverse25 = require("@unseenco/theatre-dataverse");
+
+// core/src/sheets/theatrePageScroll.ts
+var pageScrollConfig = {};
+function buildPageScrollContextFromConfig() {
+  return {
+    scroller: pageScrollConfig.scroller ?? defaultPageScrollContext.scroller,
+    axis: pageScrollConfig.axis ?? defaultPageScrollContext.axis
+  };
+}
+function configureTheatrePageScroll(config) {
+  const prev = pageScrollConfig;
+  pageScrollConfig = {
+    scroller: config.scroller ?? prev.scroller,
+    axis: config.axis ?? prev.axis
+  };
+  if (config.scroller !== void 0 || config.axis !== void 0) {
+    setActivePageScrollContext(buildPageScrollContextFromConfig());
+  }
+  return {
+    reset() {
+      pageScrollConfig = prev;
+      setActivePageScrollContext(
+        prev.scroller !== void 0 || prev.axis !== void 0 ? {
+          scroller: prev.scroller ?? defaultPageScrollContext.scroller,
+          axis: prev.axis ?? defaultPageScrollContext.axis
+        } : defaultPageScrollContext
+      );
+    }
+  };
+}
+function getTheatrePageScrollConfig() {
+  return pageScrollConfig;
+}
+function getTheatrePageScrollContext() {
+  const ctx = buildPageScrollContextFromConfig();
+  setActivePageScrollContext(ctx);
+  return ctx;
+}
+function createDefaultPageScrollDriver(scroller = getTheatrePageScrollContext().scroller, axis = resolvePageScrollAxis(getTheatrePageScrollContext())) {
+  if (typeof document !== "undefined" && scroller != null && !isNativeDocumentScroller(scroller) && scroller instanceof HTMLElement) {
+    return axis === "horizontal" ? createElementHorizontalScrollDriver(scroller) : createElementScrollDriver(scroller);
+  }
+  return axis === "horizontal" ? createNativeDocumentHorizontalScrollDriver() : createNativeDocumentScrollDriver();
+}
+function attachTheatrePageScroll(sheet, options = {}) {
+  const ctx = getTheatrePageScrollContext();
+  const driver = options.driver ?? createDefaultPageScrollDriver(ctx.scroller, resolvePageScrollAxis(ctx));
+  sheet.setPageScrollDriver(driver);
+  return () => {
+    sheet.setPageScrollDriver(void 0);
+  };
+}
+
+// core/src/coreExports.ts
 function getProject(id, config = {}) {
   const existingProject = projectsSingleton_default.get(id);
   if (existingProject) {
@@ -8515,7 +9476,7 @@ var shallowValidateOnDiskState = (projectId, s2) => {
     throw new InvalidArgumentError(
       "Error validating conf.state in Theatre.getProject(".concat(JSON.stringify(
         projectId
-      ), ", conf). The state seems to be formatted in a way that is unreadable to Theatre.js. Read more at https://www.theatrejs.com/docs/latest/manual/projects#state")
+      ), ", conf). The state seems to be formatted in a way that is unreadable to Theatre.js. Read more at https://unseen-theatre.netlify.app/docs/guide/manual/projects#state")
     );
   }
 };
@@ -8554,10 +9515,10 @@ var validateProjectIdOrThrow = (value) => {
 };
 function onChange(pointer3, callback, rafDriver) {
   const ticker = rafDriver ? privateAPI(rafDriver).ticker : getCoreTicker();
-  if ((0, import_theatre_dataverse21.isPointer)(pointer3)) {
-    const pr = (0, import_theatre_dataverse22.pointerToPrism)(pointer3);
+  if ((0, import_theatre_dataverse24.isPointer)(pointer3)) {
+    const pr = (0, import_theatre_dataverse25.pointerToPrism)(pointer3);
     return pr.onChange(ticker, callback, true);
-  } else if ((0, import_theatre_dataverse22.isPrism)(pointer3)) {
+  } else if ((0, import_theatre_dataverse25.isPrism)(pointer3)) {
     return pointer3.onChange(ticker, callback, true);
   } else {
     throw new Error(
@@ -8565,9 +9526,9 @@ function onChange(pointer3, callback, rafDriver) {
     );
   }
 }
-function val10(pointer3) {
-  if ((0, import_theatre_dataverse21.isPointer)(pointer3)) {
-    return (0, import_theatre_dataverse22.pointerToPrism)(pointer3).getValue();
+function val12(pointer3) {
+  if ((0, import_theatre_dataverse24.isPointer)(pointer3)) {
+    return (0, import_theatre_dataverse25.pointerToPrism)(pointer3).getValue();
   } else {
     throw new Error("Called val(p) where p is not a pointer.");
   }
@@ -8582,7 +9543,7 @@ var CoreBundle = class {
     return "Theatre_CoreBundle";
   }
   get version() {
-    return "0.4.2";
+    return "0.5.0";
   }
   getBitsForStudio(studio, callback) {
     if (this._studio) {