@motionscript/react 0.0.0-stage → 0.1.0-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# @motionscript/react
+
+## 0.1.0-alpha.0
+
+Initial release.

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,4 +1,105 @@
-# Temporary Holding Version
+# @motionscript/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
-If no other versions are published within 30 days, this package and version will be deleted.
+React bindings for [Motion Script](https://motionscript.dev): drop a scene into
+your app and play it back on a `<canvas>` backed by Skia/CanvasKit.
+
+```tsx
+import { useEffect, useState } from 'react';
+import { createBrowserEngine } from '@motionscript/browser';
+import { MotionStage, useMotionPlayer, usePlayhead, type Engine } from '@motionscript/react';
+import doc from './scenes/my-scene.json';
+
+export function App() {
+  const [engine, setEngine] = useState<Engine | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    createBrowserEngine().then(next => (cancelled ? next.dispose() : setEngine(next)));
+    return () => { cancelled = true; };
+  }, []);
+
+  const player = useMotionPlayer({ engine, document: doc, loop: true });
+  const frame = usePlayhead(player);
+
+  return (
+    <>
+      <MotionStage player={player} />
+      <button onClick={player.toggle}>{player.isPlaying ? 'Pause' : 'Play'}</button>
+      <input
+        type="range"
+        min={0}
+        max={player.totalFrames - 1}
+        value={frame}
+        onChange={e => player.seek(Number(e.target.value))}
+      />
+    </>
+  );
+}
+```
+
+## What's in here
+
+- **`useMotionPlayer`**: opens a session on an engine and gives you the
+  transport for it — `play`/`pause`/`seek`/`speed`/`mute`/`loop`, the duration,
+  build errors, and the editor surface (`getTreeState`, `pickNode`,
+  `setNodeOverride`, `getTrackSpans`, …). A new `document` is reconciled onto the
+  running session and the player keeps its place — the playhead stays put
+  (clamped if the timeline got shorter) and playback carries on. The session
+  patches only what the edit touched: a track whose clip is unchanged keeps its
+  tree, and a changed one is updated in place where it can be, so treat
+  documents as immutable and build the next one rather than mutating the last.
+  No DOM: it owns the timeline, not a canvas.
+- **`MotionStage`**: a canvas bound to a player's session. It owns how the frame
+  is rasterized — `renderScale`, `surfaceSize`, `view`, `clipToFrame`,
+  `frameBackground` — and nothing about what is in it or when.
+- **`usePlayhead`**: subscribes a component to the playhead. The frame moves at
+  clock rate, so keeping it out of the player's own state is what stops a host
+  re-rendering sixty-plus times a second — but only if you call it **as low in
+  the tree as it will go**. A component that subscribes re-renders on every
+  tick, and drags its children with it, so put it in the scrubber and the time
+  readout rather than in whatever renders the stage.
+
+### You own the engine
+
+There is no provider. Build an engine yourself and pass it in — which is also
+why nothing in this package imports a platform, so it works with
+`@motionscript/browser`'s engine, a headless one, or a test double.
+
+**Create it once and share it.** It holds CanvasKit and the exporter, so a
+second engine is a second wasm module and a second GL stack. `engine` is
+nullable precisely because building one is async: the player no-ops until it
+arrives, which keeps the hook out of a conditional.
+
+### One player per timeline, one stage per player
+
+Two `useMotionPlayer` calls give you two fully independent players — separate
+playheads, clocks, audio devices and transports — sharing only the engine:
+
+```tsx
+const before = useMotionPlayer({ engine, document: docA });
+const after  = useMotionPlayer({ engine, document: docB });
+```
+
+A session drives **one** surface, so each player takes one `MotionStage`; a
+second would take the surface from the first.
+
+This package builds on [`@motionscript/core`](../core) (the scene graph and
+animation runtime). A browser host will also want
+[`@motionscript/browser`](../browser) for `createBrowserEngine`.
+
+## Usage
+
+```bash
+npm install @motionscript/react
+```
+
+See the [docs](https://motionscript.dev/docs) for the full feature set and API
+reference.
+
+## Development
+
+From the monorepo root:
+
+```bash
+pnpm --filter @motionscript/react build
+pnpm --filter @motionscript/react dev
+```

package/dist/browser/index.js

@@ -0,0 +1,2 @@
+import{useCallback as z,useEffect as R,useMemo as ee,useRef as d,useState as u,useSyncExternalStore as te}from"react";import{isProjectDocument as re}from"@motionscript/core";import{jsx as G}from"react/jsx-runtime";function ne(){let n=0,r=new Set;return{subscribe(t){return r.add(t),()=>{r.delete(t)}},getSnapshot:()=>n,set(t){if(t!==n){n=t;for(let p of r)p()}}}}function fe(n){let{playhead:r}=n;return te(r.subscribe,r.getSnapshot,r.getSnapshot)}var oe={width:1920,height:1080},ce=60,se={discoveredTracks:0,totalTracks:0,complete:!1},_=[];function ae(n){return{discoveredTracks:n.tracks.filter(r=>r.discovered).length,totalTracks:n.tracks.length,complete:n.complete}}function ue(n,r){return n.discoveredTracks===r.discoveredTracks&&n.totalTracks===r.totalTracks&&n.complete===r.complete}function le(n,r){return n.length===r.length&&n.every((t,p)=>{let k=r[p];return t.trackId===k.trackId&&t.message===k.message&&t.nodeId===k.nodeId&&t.prop===k.prop&&t.stack===k.stack})}function J(n){let r=n.length===0?_:n.slice();return t=>le(t,r)?t:r}function me(n){let{engine:r,document:t,onFramePainted:p}=n,k=t&&re(t)?t:void 0,T=k?.viewport??n.viewport??r?.viewport??oe,v=k?.fps??n.fps??r?.fps??ce,[P,E]=u(T);(P.width!==T.width||P.height!==T.height)&&E(T);let f=t!==void 0,[y,S]=u(null),[l]=u(ne),[i,h]=u(!1),[x,N]=u(n.speed??1),[w,b]=u(n.muted??!1),[M,B]=u(n.loop??!1),[D,a]=u(!0),[m,C]=u(0),[O,A]=u(_),[K,Q]=u(se),$=Math.max(1,Math.round(m*v)),c=d(null),j=d(null),W=d(t),H=d(p),L=d(0),Y=d(M),F=d(v);R(()=>{H.current=p,Y.current=M,F.current=v});let[U,X]=u(t);t!==U&&(X(t),t===void 0&&(h(!1),C(0),O.length>0&&A(_)));let I=z(s=>{C(s.totalDuration),A(J(s.buildErrors));let e=ae(s.precomp);Q(o=>ue(o,e)?o:e)},[]),[V]=u(()=>s=>{let e=c.current;if(!e)return;let o=Math.max(0,Math.round(e.totalDuration*F.current)-1),g=Math.min(Math.max(0,Math.round(s)),o);l.set(g);let Z=++L.current;a(!0),e.seek(g).then(()=>{Z===L.current&&a(!1)})});R(()=>{if(!r||!t)return;let s=r.open({document:t,viewport:P,fps:v,onPrecompProgress:()=>I(s.controller)}),e=s.controller;return e.onRenderError=o=>A(J(o)),e.onFramePainted=o=>H.current?.(o),e.onTime(o=>{let g=Math.trunc(o*F.current);l.set(g),!(g<Math.round(e.totalDuration*F.current)-1)&&(Y.current?e.seekWhilePlaying(0):h(!1))}),c.current=e,j.current=s,W.current=t,S(s),I(e),a(!0),()=>{c.current=null,j.current=null,S(null),s.dispose()}},[r,f,P.width,P.height,v,I]),R(()=>{if(W.current===t)return;W.current=t;let s=j.current;if(!s||!t)return;let e=s.controller;s.replace(t),I(e);let o=Math.max(0,Math.round(e.totalDuration*F.current)-1);l.set(Math.min(l.getSnapshot(),o));let g=++L.current;a(!0),e.whenReplaced().then(()=>{g===L.current&&a(!1)})},[t,I,l]),R(()=>{let s=c.current;s&&(i?s.play(x):s.pause())},[y,i,x]),R(()=>{c.current?.setMuted(w)},[y,w]),R(()=>{V(l.getSnapshot())},[y,l,V]);let[q]=u(()=>{let s=e=>{h(!1),V(e)};return{playhead:l,play:()=>h(!0),pause:()=>h(!1),toggle:()=>h(e=>{let o=c.current;if(!e&&o){let g=Math.round(o.totalDuration*F.current)-1;l.getSnapshot()>=g&&o.seek(0)}return!e}),seek:s,step:e=>s(l.getSnapshot()+e),seekWhilePlaying:e=>c.current?.seekWhilePlaying(e),setSpeed:e=>N(e),setMuted:e=>b(e),setLoop:e=>B(e),screenshot:async()=>c.current?.screenshot()??void 0,repaint:()=>c.current?.repaint(),getTreeState:()=>c.current?.getTreeState()??null,getNodeProps:e=>c.current?.getNodeState(e)??null,getTrackSpans:()=>c.current?.spans??[],whenReplaced:async()=>{await c.current?.whenReplaced()},getNodeBox:e=>c.current?.getNodeBox(e)??null,getNodePropsAt:e=>c.current?.getNodePropsAt(e)??null,getNodeBoxes:()=>c.current?.getNodeBoxes()??[],projectNode3D:(e,o,g)=>c.current?.projectNode3D(e,o,g)??null,parentPlanePoint:(e,o)=>c.current?.parentPlanePoint(e,o)??null,getTextLayout:e=>c.current?.getTextLayout(e)??null,pickNode:(e,o)=>c.current?.pickNode(e,o)??null,setNodeOverride:(e,o)=>c.current?.setNodeOverride(e,o),clearNodeOverrides:e=>c.current?.clearNodeOverrides(e)}});return ee(()=>({...q,session:y,viewport:P,fps:v,isPlaying:i,speed:x,muted:w,loop:M,loading:D,duration:m,totalFrames:$,errors:O,precomp:K}),[q,y,P,v,i,x,w,M,D,m,$,O,K])}var ie=Object.freeze({zoom:1,x:0,y:0});function ge({player:n,renderScale:r=1,surfaceSize:t,view:p,clipToFrame:k,frameBackground:T,className:v,style:P}){let E=d(null),{session:f,viewport:y}=n,S=Math.max(1,Math.round((t?.width??y.width)*r)),l=Math.max(1,Math.round((t?.height??y.height)*r)),i=t&&p?p:ie,h=t&&p?y:null,x=t&&p?k??!0:!0,N=t&&p?T??"black":"black",w=d(i),b=d(h),M=d(x),B=d(N),D=d(null);return R(()=>{w.current=i,b.current=h,M.current=x,B.current=N,D.current=f?f.surface:null}),R(()=>{let a=E.current,m=D.current;!f||!a||!m||(m.pixelRatio=r,m.view=w.current,m.frame=b.current,m.clipToFrame=M.current,m.frameBackground=B.current,m.mount(a),f.controller.repaint())},[f,r,S,l]),R(()=>{let a=D.current;!f||!a||(a.view={zoom:i.zoom,x:i.x,y:i.y},a.frame=h,a.clipToFrame=x,a.frameBackground=N,f.controller.repaint())},[f,i.zoom,i.x,i.y,h?.width,h?.height,x,N]),G("div",{className:v,style:{position:"relative",width:"100%",height:"100%",...P},children:G("canvas",{ref:E,width:S,height:l,style:{display:f?"block":"none",...t?{position:"absolute",left:"50%",top:"50%",width:`${t.width}px`,height:`${t.height}px`,transform:"translate(-50%, -50%)"}:{width:"100%",height:"100%"}}})})}export{ge as MotionStage,me as useMotionPlayer,fe as usePlayhead};
+//# sourceMappingURL=index.js.map

package/dist/browser/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/playhead.ts", "../../src/ui/use-motion-player.ts", "../../src/ui/stage.tsx"],
+  "sourcesContent": ["import { useSyncExternalStore } from \"react\";\n\n/**\n * The playhead, held outside React.\n *\n * A frame number written at clock rate through `useState` re-renders whoever\n * owns the player, and on a high-refresh display that is faster than the\n * project's own frame rate. Nothing in a render depends on it: the controller\n * paints straight onto the canvas and React is not involved. So the number\n * lives here, and only the components that actually display it subscribe.\n */\nexport interface PlayheadStore {\n    subscribe(onChange: () => void): () => void;\n    getSnapshot(): number;\n    /** @internal — written by the player that owns this store. */\n    set(frame: number): void;\n}\n\nexport function createPlayheadStore(): PlayheadStore {\n    let frame = 0;\n    const listeners = new Set<() => void>();\n    return {\n        subscribe(onChange) {\n            listeners.add(onChange);\n            return () => {\n                listeners.delete(onChange);\n            };\n        },\n        getSnapshot: () => frame,\n        set(next) {\n            if (next === frame) return;\n            frame = next;\n            for (const notify of listeners) notify();\n        },\n    };\n}\n\n/**\n * Subscribe *this* component to the playhead.\n *\n * Typed structurally rather than against `Player` so the store and the hook\n * that reads it don't import each other.\n */\nexport function usePlayhead(player: { playhead: PlayheadStore }): number {\n    const { playhead } = player;\n    return useSyncExternalStore(playhead.subscribe, playhead.getSnapshot, playhead.getSnapshot);\n}\n", "import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { isProjectDocument } from \"@motionscript/core\";\n\nimport type {\n    BuildError,\n    Engine,\n    NodeBox,\n    Node3DFrame,\n    NodeOverride,\n    NodeState,\n    NodeTextLayout,\n    PlaybackController,\n    AssetTimelineResult,\n    ProjectDocument,\n    SceneDocument,\n    Session,\n    Size2D,\n    TrackSpan,\n    TreeState,\n    Vector2,\n    Vector3,\n} from \"@motionscript/core\";\n\nimport { createPlayheadStore, type PlayheadStore } from \"./playhead\";\n\n/** Used only when neither the document nor the engine says otherwise. */\nconst FALLBACK_VIEWPORT: Size2D = { width: 1920, height: 1080 };\nconst FALLBACK_FPS = 60;\n\n/**\n * How far background discovery has got. Only the tracks on frame 0 are\n * discovered before the player mounts; the rest stream in behind it (see\n * `AssetTimeline.runAsync`). The timeline's length never waits on it — every track\n * declares its own.\n */\nexport interface PrecompProgress {\n    /** Tracks discovered so far. */\n    discoveredTracks: number;\n    /** Tracks in the project. */\n    totalTracks: number;\n    /** True once every track has been discovered. */\n    complete: boolean;\n}\n\nconst INITIAL_PRECOMP: PrecompProgress = { discoveredTracks: 0, totalTracks: 0, complete: false };\nconst NO_ERRORS: BuildError[] = [];\n\nfunction precompProgressOf(result: AssetTimelineResult): PrecompProgress {\n    return {\n        discoveredTracks: result.tracks.filter(track => track.discovered).length,\n        totalTracks: result.tracks.length,\n        complete: result.complete,\n    };\n}\n\nfunction samePrecomp(a: PrecompProgress, b: PrecompProgress): boolean {\n    return a.discoveredTracks === b.discoveredTracks && a.totalTracks === b.totalTracks && a.complete === b.complete;\n}\n\nfunction sameErrors(a: readonly BuildError[], b: readonly BuildError[]): boolean {\n    return a.length === b.length && a.every((error, i) => {\n        const other = b[i];\n        return error.trackId === other.trackId && error.message === other.message\n            && error.nodeId === other.nodeId && error.prop === other.prop && error.stack === other.stack;\n    });\n}\n\n/** A state updater that keeps the held errors when the report says the same thing. */\nfunction errorsFrom(reported: readonly BuildError[]): (held: BuildError[]) => BuildError[] {\n    const next = reported.length === 0 ? NO_ERRORS : reported.slice();\n    return held => (sameErrors(held, next) ? held : next);\n}\n\nexport interface MotionPlayerOptions {\n    /**\n     * The engine this player opens its session on.\n     *\n     * Nullable on purpose: building one is asynchronous\n     * (`await createBrowserEngine(...)`), so a host holds it in state and it is\n     * `null` for the first render or two. The player no-ops until it arrives,\n     * which is what keeps the hook out of a conditional.\n     *\n     * **Create it once, and share it.** It holds CanvasKit and the exporter, so\n     * a fresh one per render rebuilds the WebGL surface behind every player on\n     * it. Identity-compared: a different engine is a different CanvasKit, and so\n     * a full rebuild.\n     */\n    engine: Engine | null | undefined;\n    /**\n     * What to play. Nothing opens until there is one.\n     *\n     * A **project** document is the whole answer: it carries its own viewport,\n     * fps, theme and tracks. A **scene** document (still or composition) is one\n     * clip and carries none of that, so `viewport` and `fps` must come from here\n     * or from the engine.\n     *\n     * Content-diffed, with identity as the fast path: a new document is reconciled\n     * onto the running session, each track's built tree patched in place and\n     * rebuilt only when its change cannot be patched. Treat documents as\n     * immutable — an edit made in place to one the player already holds is not\n     * seen.\n     *\n     * A new document keeps the player's place: the playhead stays where it was\n     * (clamped when the timeline got shorter), and playback carries on if it was\n     * running. Seek or pause yourself when a swap means \"start over\".\n     */\n    document?: ProjectDocument | SceneDocument;\n    /** Overrides the engine's, for a source that carries none. */\n    viewport?: Size2D;\n    /** Overrides the engine's, for a source that carries none. */\n    fps?: number;\n    /** Initial playback rate. Change it later with {@link Player.setSpeed}. */\n    speed?: number;\n    /** Initial mute state. Change it later with {@link Player.setMuted}. */\n    muted?: boolean;\n    /** Initial loop state. Change it later with {@link Player.setLoop}. */\n    loop?: boolean;\n    /**\n     * Called **synchronously**, on the same task as the draw, each time a frame\n     * has been painted — whether by the clock, a seek, or a document swap.\n     *\n     * Not the playhead, which reports where the *clock* is. A seek is\n     * asynchronous, so between the two there is a window in which the number has\n     * moved and the canvas has not. Reach for this to keep an overlay — a\n     * selection box, a caret, a handle — in step with the pixels, and keep the\n     * listener cheap: it runs on the render loop, before the browser has had a\n     * chance to composite.\n     *\n     * Read through a ref, so changing it costs nothing.\n     */\n    onFramePainted?: (frame: number) => void;\n}\n\n/**\n * One document, its transport, and the session driving it. No DOM.\n *\n * Hand it to a {@link MotionStage} to put pixels on screen. Two calls to\n * {@link useMotionPlayer} produce two of these with nothing shared but the\n * engine — separate playheads, clocks, audio devices and transports.\n */\nexport interface Player {\n    /** The live session, or `null` before the engine and a document arrive. */\n    readonly session: Session | null;\n    /** The playhead, read with `usePlayhead(player)`. Stable for the hook's life. */\n    readonly playhead: PlayheadStore;\n    /** Resolved from the document, else the engine, else 1920×1080. */\n    readonly viewport: Size2D;\n    /** Resolved from the document, else the engine, else 60. */\n    readonly fps: number;\n\n    readonly isPlaying: boolean;\n    readonly speed: number;\n    readonly muted: boolean;\n    readonly loop: boolean;\n    /** True while a seek or a document swap is in flight. */\n    readonly loading: boolean;\n    /** The project's length, known from the document before any track is discovered. */\n    readonly duration: number;\n    /** {@link duration} in frames, floored at 1. */\n    readonly totalFrames: number;\n    readonly errors: BuildError[];\n    readonly precomp: PrecompProgress;\n\n    play(): void;\n    pause(): void;\n    toggle(): void;\n    /** Seek while paused. Clamped to the timeline. */\n    seek(frame: number): void;\n    /** Seek relative to where the playhead is now. */\n    step(delta: number): void;\n    /** Seek without interrupting playback. */\n    seekWhilePlaying(frame: number): void;\n    setSpeed(speed: number): void;\n    setMuted(muted: boolean): void;\n    setLoop(loop: boolean): void;\n\n    screenshot(): Promise<string | undefined>;\n    /** Re-layout and repaint the current frame — no re-evaluation. */\n    repaint(): void;\n\n    getTreeState(): TreeState | null;\n    getNodeProps(nodeId: string): NodeState | null;\n    /** Where each track sits on the timeline, in document order. */\n    getTrackSpans(): readonly TrackSpan[];\n    /**\n     * Resolves once the paint a document swap scheduled has landed. The swap\n     * does not paint before its assets have loaded, so await this before\n     * screenshotting or reading the tree.\n     */\n    whenReplaced(): Promise<void>;\n\n    // ---- Direct manipulation ----------------------------------------------\n    // Points are in viewport space — origin at the viewport centre, y-up, in\n    // this player's `viewport` pixels.\n\n    getNodeBox(path: string): NodeBox | null;\n    getNodePropsAt(path: string): NodeState[\"properties\"] | null;\n    getNodeBoxes(): NodeBox[];\n    projectNode3D(\n        path: string,\n        parentPoints: readonly Vector3[],\n        localPoints: readonly Vector3[],\n    ): Node3DFrame | null;\n    /**\n     * Where `point` lands on the plane the node at `path` is positioned in, in\n     * that plane's own y-up frame. Two answers differ by the `x`/`y` change that\n     * moves the node between them — which a screen delta no longer is once the\n     * node sits in a 2.5D space.\n     */\n    parentPlanePoint(path: string, point: Vector2): Vector2 | null;\n    getTextLayout(path: string): NodeTextLayout | null;\n    /** `tolerance` is grab-slop in scene units. */\n    pickNode(point: Vector2, tolerance?: number): NodeBox | null;\n    /** Layer transient props over a node without rebuilding its track. */\n    setNodeOverride(path: string, props: NodeOverride): void;\n    clearNodeOverrides(path?: string): void;\n}\n\n/**\n * Opens a session on `engine` and gives you the transport for it.\n *\n * ```tsx\n * const player = useMotionPlayer({ engine, document: doc, loop: true });\n * <MotionStage player={player} />\n * ```\n */\nexport function useMotionPlayer(options: MotionPlayerOptions): Player {\n    const { engine, document, onFramePainted } = options;\n\n    // Read straight off the document where it says so, else the caller's, else\n    // the engine's. All plain JSON, so this resolves during render, before any\n    // session exists — which is what lets a stage size its canvas on the first\n    // pass rather than after a mount.\n    const projectDoc = document && isProjectDocument(document) ? document : undefined;\n    const resolvedViewport = projectDoc?.viewport ?? options.viewport ?? engine?.viewport ?? FALLBACK_VIEWPORT;\n    const fps = projectDoc?.fps ?? options.fps ?? engine?.fps ?? FALLBACK_FPS;\n\n    // Held by size: a host that rebuilds its document per edit rebuilds this\n    // object with it, and a new one would hand every consumer a new `Player`.\n    const [viewport, setViewport] = useState(resolvedViewport);\n    if (viewport.width !== resolvedViewport.width || viewport.height !== resolvedViewport.height) {\n        setViewport(resolvedViewport);\n    }\n    const hasDocument = document !== undefined;\n\n    const [session, setSession] = useState<Session | null>(null);\n    /** Created once; stable for the hook's life, so `usePlayhead` never resubscribes. */\n    const [playhead] = useState(createPlayheadStore);\n\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [speed, setSpeedState] = useState(options.speed ?? 1);\n    const [muted, setMutedState] = useState(options.muted ?? false);\n    const [loop, setLoopState] = useState(options.loop ?? false);\n    const [loading, setLoading] = useState(true);\n    const [duration, setDuration] = useState(0);\n    const [errors, setErrors] = useState<BuildError[]>(NO_ERRORS);\n    const [precomp, setPrecomp] = useState<PrecompProgress>(INITIAL_PRECOMP);\n\n    const totalFrames = Math.max(1, Math.round(duration * fps));\n\n    // Stable across renders so the action callbacks below never need rebuilding.\n    const controllerRef = useRef<PlaybackController | null>(null);\n    const sessionRef = useRef<Session | null>(null);\n    const documentRef = useRef(document);\n    const onFramePaintedRef = useRef(onFramePainted);\n    /** Monotonic seek id; only the latest may clear the loading flag. */\n    const seekTokenRef = useRef(0);\n    /** Read by the tick handler, which is installed once and must see the latest. */\n    const loopRef = useRef(loop);\n    const fpsRef = useRef(fps);\n\n    useEffect(() => {\n        onFramePaintedRef.current = onFramePainted;\n        loopRef.current = loop;\n        fpsRef.current = fps;\n    });\n\n    // An edit keeps the transport and its errors — the reconcile effect below\n    // re-reads both off the session, so an error the edit did not fix never\n    // blinks out for a commit. Only losing the document stops it, during render\n    // so nothing draws against a timeline that is gone.\n    const [prevDocument, setPrevDocument] = useState(document);\n    if (document !== prevDocument) {\n        setPrevDocument(document);\n        if (document === undefined) {\n            setIsPlaying(false);\n            setDuration(0);\n            if (errors.length > 0) setErrors(NO_ERRORS);\n        }\n    }\n\n    /**\n     * Pull what the controller now knows: timeline length, errors, progress.\n     * Runs on every swap, so it keeps whatever did not change — a fresh array or\n     * object here is a new `Player` for every consumer on every edit.\n     */\n    const sync = useCallback((pc: PlaybackController) => {\n        setDuration(pc.totalDuration);\n        setErrors(errorsFrom(pc.buildErrors));\n        const progress = precompProgressOf(pc.precomp);\n        setPrecomp(held => (samePrecomp(held, progress) ? held : progress));\n    }, []);\n\n    /**\n     * Move the playhead and repaint, with the loading flag the UI paces off.\n     *\n     * Created once so every caller — the transport, the reconcile effect and\n     * the first paint after a session opens — shares one seek discipline.\n     */\n    const [seekTo] = useState(() => (frame: number) => {\n        const pc = controllerRef.current;\n        if (!pc) return;\n        const last = Math.max(0, Math.round(pc.totalDuration * fpsRef.current) - 1);\n        const clamped = Math.min(Math.max(0, Math.round(frame)), last);\n        playhead.set(clamped);\n        // Only the newest seek may report \"settled\". A superseded seek still\n        // resolves — its generation guard bailed inside the controller — but it\n        // never painted, so clearing the loading flag from it would tell the UI\n        // a frame is ready while the newest is still in flight. Consumers pace\n        // scrubbing off that edge.\n        const token = ++seekTokenRef.current;\n        setLoading(true);\n        void pc.seek(clamped).then(() => {\n            if (token === seekTokenRef.current) setLoading(false);\n        });\n    });\n\n    useEffect(() => {\n        if (!engine || !document) return;\n\n        // `target` is omitted: the session opens unmounted, and a `MotionStage`\n        // binds a canvas to it afterwards. That is what lets this hook own the\n        // session without owning any DOM.\n        const opened = engine.open({\n            document,\n            viewport,\n            fps,\n            // A track landing can surface a build error it threw.\n            onPrecompProgress: () => sync(opened.controller),\n        });\n\n        const pc = opened.controller;\n        pc.onRenderError = errs => setErrors(errorsFrom(errs));\n        pc.onFramePainted = frame => onFramePaintedRef.current?.(frame);\n\n        pc.onTime((t: number) => {\n            const frame = Math.trunc(t * fpsRef.current);\n            playhead.set(frame);\n\n            // A document swap can change the timeline's length, so ask the\n            // controller rather than trusting a duration captured when this\n            // listener was installed.\n            const last = Math.round(pc.totalDuration * fpsRef.current) - 1;\n            if (frame < last) return;\n            if (loopRef.current) pc.seekWhilePlaying(0);\n            else setIsPlaying(false);\n        });\n\n        controllerRef.current = pc;\n        sessionRef.current = opened;\n        documentRef.current = document;\n        setSession(opened);\n        sync(pc);\n        setLoading(true);\n\n        return () => {\n            controllerRef.current = null;\n            sessionRef.current = null;\n            setSession(null);\n            // Disposes the controller and the render context together — the\n            // session owns both.\n            opened.dispose();\n        };\n        // `document` is deliberately absent — only whether there is one: a new\n        // document is reconciled onto the live session by the effect below\n        // rather than rebuilt into a new one. What remains genuinely does need a\n        // rebuild — a different engine is a different CanvasKit, and a live\n        // surface cannot change its size or rate (`Session.replace` refuses both).\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [engine, hasDocument, viewport.width, viewport.height, fps, sync]);\n\n    // Reconcile a changed document onto the session already running. Skipped on\n    // the pass that opens it, which was opened with this very document —\n    // replacing it there would rediscover a timeline just discovered.\n    useEffect(() => {\n        if (documentRef.current === document) return;\n        documentRef.current = document;\n        const live = sessionRef.current;\n        if (!live || !document) return;\n        const pc = live.controller;\n        live.replace(document);\n        sync(pc);\n        // No seek: `replace` already paints the current frame once its assets\n        // load, clamped to the new length, and a running clock keeps ticking.\n        const last = Math.max(0, Math.round(pc.totalDuration * fpsRef.current) - 1);\n        playhead.set(Math.min(playhead.getSnapshot(), last));\n        const token = ++seekTokenRef.current;\n        setLoading(true);\n        void pc.whenReplaced().then(() => {\n            if (token === seekTokenRef.current) setLoading(false);\n        });\n    }, [document, sync, playhead]);\n\n    useEffect(() => {\n        const pc = controllerRef.current;\n        if (!pc) return;\n        if (isPlaying) pc.play(speed);\n        else pc.pause();\n    }, [session, isPlaying, speed]);\n\n    useEffect(() => {\n        controllerRef.current?.setMuted(muted);\n    }, [session, muted]);\n\n    // The one seek that isn't user-driven: park the new session on the frame\n    // the playhead already holds, so a rebuild keeps its place.\n    useEffect(() => {\n        seekTo(playhead.getSnapshot());\n    }, [session, playhead, seekTo]);\n\n    // Built once and stable for the hook's life: every one reads the controller\n    // through a ref, so a re-render never invalidates a handler a child holds —\n    // which is what lets a transport subscribe its listeners a single time.\n    const [actions] = useState<Omit<Player, keyof PlayerState>>(() => {\n        // Scrubbing is a pause: a seek that left the clock running would be\n        // overwritten by the next tick.\n        const seek = (frame: number) => {\n            setIsPlaying(false);\n            seekTo(frame);\n        };\n\n        return {\n            playhead,\n            play: () => setIsPlaying(true),\n            pause: () => setIsPlaying(false),\n            toggle: () =>\n                setIsPlaying(playing => {\n                    // Restarting from the end is what a play button means there.\n                    const pc = controllerRef.current;\n                    if (!playing && pc) {\n                        const last = Math.round(pc.totalDuration * fpsRef.current) - 1;\n                        if (playhead.getSnapshot() >= last) void pc.seek(0);\n                    }\n                    return !playing;\n                }),\n            seek,\n            step: (delta: number) => seek(playhead.getSnapshot() + delta),\n            seekWhilePlaying: (frame: number) => controllerRef.current?.seekWhilePlaying(frame),\n            setSpeed: (next: number) => setSpeedState(next),\n            setMuted: (next: boolean) => setMutedState(next),\n            setLoop: (next: boolean) => setLoopState(next),\n\n            screenshot: async () => controllerRef.current?.screenshot() ?? undefined,\n            repaint: () => controllerRef.current?.repaint(),\n\n            getTreeState: () => controllerRef.current?.getTreeState() ?? null,\n            getNodeProps: (nodeId: string) => controllerRef.current?.getNodeState(nodeId) ?? null,\n            getTrackSpans: () => controllerRef.current?.spans ?? [],\n            whenReplaced: async () => {\n                await controllerRef.current?.whenReplaced();\n            },\n\n            getNodeBox: (path: string) => controllerRef.current?.getNodeBox(path) ?? null,\n            getNodePropsAt: (path: string) => controllerRef.current?.getNodePropsAt(path) ?? null,\n            getNodeBoxes: () => controllerRef.current?.getNodeBoxes() ?? [],\n            projectNode3D: (path, parentPoints, localPoints) =>\n                controllerRef.current?.projectNode3D(path, parentPoints, localPoints) ?? null,\n            parentPlanePoint: (path: string, point: Vector2) =>\n                controllerRef.current?.parentPlanePoint(path, point) ?? null,\n            getTextLayout: (path: string) => controllerRef.current?.getTextLayout(path) ?? null,\n            pickNode: (point: Vector2, tolerance?: number) =>\n                controllerRef.current?.pickNode(point, tolerance) ?? null,\n            setNodeOverride: (path: string, props: NodeOverride) =>\n                controllerRef.current?.setNodeOverride(path, props),\n            clearNodeOverrides: (path?: string) => controllerRef.current?.clearNodeOverrides(path),\n        };\n    });\n\n    return useMemo(\n        () => ({\n            ...actions,\n            session,\n            viewport,\n            fps,\n            isPlaying,\n            speed,\n            muted,\n            loop,\n            loading,\n            duration,\n            totalFrames,\n            errors,\n            precomp,\n        }),\n        [\n            actions,\n            session,\n            viewport,\n            fps,\n            isPlaying,\n            speed,\n            muted,\n            loop,\n            loading,\n            duration,\n            totalFrames,\n            errors,\n            precomp,\n        ],\n    );\n}\n\n/** The fields the memo above supplies; everything else on `Player` is an action. */\ntype PlayerState = Pick<\n    Player,\n    | \"session\"\n    | \"viewport\"\n    | \"fps\"\n    | \"isPlaying\"\n    | \"speed\"\n    | \"muted\"\n    | \"loop\"\n    | \"loading\"\n    | \"duration\"\n    | \"totalFrames\"\n    | \"errors\"\n    | \"precomp\"\n>;\n", "import { useEffect, useRef, type CSSProperties } from \"react\";\n\nimport type { EngineRenderContext, Size2D } from \"@motionscript/core\";\n\nimport type { Player } from \"./use-motion-player\";\n\n/**\n * The session's surface, with `mount` narrowed to a canvas.\n *\n * `core` compiles without the DOM lib, so `RenderSurface.mount` takes `unknown`\n * there. This is the narrowing that seam always assumed: it happens here, in\n * the one layer that genuinely has `HTMLCanvasElement`.\n */\ntype StageRenderContext = Omit<EngineRenderContext, \"mount\"> & {\n    mount(canvas: HTMLCanvasElement): void;\n};\n\n/**\n * What every stage that doesn't ask for a view gets: the whole frame, 1:1.\n *\n * A shared frozen object rather than a literal, so the view effect's dependency\n * on its fields is stable across renders for the overwhelming majority of\n * stages, which never pass `view` at all.\n */\nconst IDENTITY_VIEW = Object.freeze({ zoom: 1, x: 0, y: 0 });\n\nexport interface MotionStageProps {\n    /** The player whose session this stage draws. */\n    player: Player;\n    /**\n     * Device pixels to rasterize per viewport unit. Defaults to `1`.\n     *\n     * **Not a zoom and not a crop.** The viewport stays the scene's logical\n     * coordinate space; this only changes how many real pixels that space is\n     * drawn into, and CSS scales the canvas back up to fill its box.\n     *\n     * The lever exists because a preview is usually displayed far smaller than\n     * the project's output size: a 1920×1080 project in a 700px-wide panel\n     * rasterizes roughly seven times the pixels anyone can see. `0.5` there is a\n     * quarter of the fill, the shader work and the effect offscreens.\n     *\n     * Two things to know before animating it:\n     *\n     * - **Every change re-creates the Skia surface**, which drops the storage\n     *   adapter's texture-backed images (decoded video frames, 3D composites;\n     *   still images survive) and asks for a fresh GL context. Quantize to a few\n     *   steps and let it settle — never drive it from a resize observer.\n     * - **Prefer scales that keep both dimensions whole.** `pixelRatio` is one\n     *   uniform number, so a scale that rounds differently on each axis shifts\n     *   the frame's centre by up to half a device pixel.\n     *\n     * A snapshot from `player.screenshot()` comes back at the surface's size, so\n     * it is scaled too — render at `1` if you need full resolution out of it.\n     */\n    renderScale?: number;\n    /**\n     * The canvas's own size in CSS pixels, when it is **not** the frame.\n     *\n     * Omitted — the default — the canvas is the frame: sized `viewport ×\n     * renderScale` and stretched over its box by CSS, which is what every\n     * export, thumbnail and plain player wants.\n     *\n     * Supplied, together with {@link view}, the canvas becomes a *window* onto\n     * the frame: it takes the size of the area it is shown in, `renderScale`\n     * stops meaning \"fraction of the project's resolution\" and starts meaning\n     * device pixels per CSS pixel, and only what is on screen is rasterized.\n     * That is what lets an editor zoom in without going soft or paying for the\n     * whole frame at the zoomed resolution.\n     *\n     * It re-creates the surface exactly as `renderScale` does, and wants the\n     * same treatment: quantize it and let it settle.\n     */\n    surfaceSize?: Size2D;\n    /**\n     * A pan and zoom applied to the render itself. Requires {@link surfaceSize}.\n     *\n     * `zoom` multiplies scene units; `x`/`y` offset the frame's centre in CSS\n     * pixels, positive `y` downwards — the same sign convention as a CSS\n     * translate, so a preview can hand over the pan it was already computing.\n     *\n     * Changing it costs a repaint and nothing else: no surface, no textures, no\n     * precomp. That is the point of it living here rather than in a CSS\n     * transform, which cannot add resolution it was not rasterized with.\n     */\n    view?: { zoom: number; x: number; y: number };\n    /**\n     * Whether the frame's edge bounds what draws, rather than only where its own\n     * backdrop goes. Requires {@link surfaceSize} and {@link view}. Defaults to\n     * `true`.\n     *\n     * Off lets a node parked past the frame's edge rasterize into the rest of\n     * the surface instead of being discarded — for a host that wants to show,\n     * faded, what a node placed there while animating in or out.\n     */\n    clipToFrame?: boolean;\n    /**\n     * What the frame's backdrop is painted with. Defaults to `\"black\"`.\n     *\n     * `\"transparent\"` leaves the frame unpainted where nothing was drawn, so\n     * whatever the host renders behind the canvas shows through — a\n     * checkerboard, for an editor that has to distinguish \"no scene covers this\"\n     * from \"a scene covers it in black\". Requires {@link surfaceSize} and\n     * {@link view}, the same way {@link clipToFrame} does.\n     */\n    frameBackground?: \"black\" | \"transparent\";\n    className?: string;\n    style?: CSSProperties;\n}\n\n/**\n * A canvas bound to a {@link Player}'s session.\n *\n * The stage owns how the frame is rasterized — resolution, view, clipping — and\n * nothing about what is in it or when. A session drives **one** surface, so one\n * stage per player: a second would take the surface from the first.\n */\nexport function MotionStage({\n    player,\n    renderScale = 1,\n    surfaceSize,\n    view,\n    clipToFrame,\n    frameBackground,\n    className,\n    style,\n}: MotionStageProps) {\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const { session, viewport } = player;\n\n    /**\n     * The canvas's backing store, in device pixels. `viewport × renderScale` in\n     * the default case, where the canvas *is* the frame; with `surfaceSize` it\n     * is the viewing area instead.\n     *\n     * Floored at 1 so a degenerate scale can't ask CanvasKit for a zero-sized\n     * surface, which fails the surface creation outright.\n     */\n    const bufferWidth = Math.max(1, Math.round((surfaceSize?.width ?? viewport.width) * renderScale));\n    const bufferHeight = Math.max(1, Math.round((surfaceSize?.height ?? viewport.height) * renderScale));\n\n    /**\n     * The view transform to draw with, and the frame to clip and anchor against.\n     * Only meaningful together, so they resolve in one place: no `surfaceSize`\n     * means the canvas is the frame, and both revert to identity.\n     */\n    const activeView = surfaceSize && view ? view : IDENTITY_VIEW;\n    const activeFrame = surfaceSize && view ? viewport : null;\n    const activeClipToFrame = surfaceSize && view ? (clipToFrame ?? true) : true;\n    const activeFrameBackground = surfaceSize && view ? (frameBackground ?? \"black\") : \"black\";\n\n    const viewRef = useRef(activeView);\n    const frameRectRef = useRef(activeFrame);\n    const clipToFrameRef = useRef(activeClipToFrame);\n    const frameBackgroundRef = useRef(activeFrameBackground);\n    /**\n     * The live render context.\n     *\n     * Held here rather than reached through `player.session` at each use because\n     * it is mutable external state — a Skia context whose knobs are written, not\n     * a value derived from a prop — and writing through the prop is what the\n     * immutability lint is there to catch everywhere it *isn't* one of these.\n     */\n    const ctxRef = useRef<StageRenderContext | null>(null);\n    useEffect(() => {\n        viewRef.current = activeView;\n        frameRectRef.current = activeFrame;\n        clipToFrameRef.current = activeClipToFrame;\n        frameBackgroundRef.current = activeFrameBackground;\n        ctxRef.current = session ? (session.surface as StageRenderContext) : null;\n    });\n\n    /**\n     * Bind the surface, and rebuild it when the backing store changes.\n     *\n     * The order matters and is why this is an effect rather than a callback:\n     * React has already written the canvas's new `width`/`height` by the time\n     * effects run, and CanvasKit reads exactly those when it builds the surface\n     * (`MakeOnScreenGLSurface(ctx, canvas.width, canvas.height)`). Mounting\n     * before the resize would produce a surface of the previous size.\n     *\n     * `repaint()` afterwards because a new surface starts blank and the clock is\n     * not necessarily running to fill it — a paused editor would otherwise show\n     * black until something else moved.\n     */\n    useEffect(() => {\n        const canvas = canvasRef.current;\n        const ctx = ctxRef.current;\n        if (!session || !canvas || !ctx) return;\n        ctx.pixelRatio = renderScale;\n        ctx.view = viewRef.current;\n        ctx.frame = frameRectRef.current;\n        ctx.clipToFrame = clipToFrameRef.current;\n        ctx.frameBackground = frameBackgroundRef.current;\n        // `mount` detaches the old surface first, which also drops the storage\n        // adapter's texture-backed images — they belong to the surface that made\n        // them. Video frames and 3D composites are re-uploaded on demand;\n        // decoded still images are raster-backed and survive.\n        ctx.mount(canvas);\n        session.controller.repaint();\n    }, [session, renderScale, bufferWidth, bufferHeight]);\n\n    /**\n     * Apply {@link MotionStageProps.view} — a repaint and nothing more.\n     *\n     * Depends on the fields rather than the object so a caller passing a fresh\n     * `{zoom, x, y}` each render — which is every caller, since it comes from a\n     * gesture — doesn't repaint on renders where the view didn't move.\n     */\n    useEffect(() => {\n        const ctx = ctxRef.current;\n        if (!session || !ctx) return;\n        ctx.view = { zoom: activeView.zoom, x: activeView.x, y: activeView.y };\n        ctx.frame = activeFrame;\n        ctx.clipToFrame = activeClipToFrame;\n        ctx.frameBackground = activeFrameBackground;\n        session.controller.repaint();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        session,\n        activeView.zoom,\n        activeView.x,\n        activeView.y,\n        activeFrame?.width,\n        activeFrame?.height,\n        activeClipToFrame,\n        activeFrameBackground,\n    ]);\n\n    return (\n        <div className={className} style={{ position: \"relative\", width: \"100%\", height: \"100%\", ...style }}>\n            <canvas\n                ref={canvasRef}\n                // The backing store, in device pixels. CSS below stretches it\n                // back over the whole box either way, so this is purely how much\n                // gets rasterized.\n                width={bufferWidth}\n                height={bufferHeight}\n                style={{\n                    display: session ? \"block\" : \"none\",\n                    ...(surfaceSize\n                        ? {\n                              // `surfaceSize` is the canvas's CSS size, so it is\n                              // honoured literally rather than stretched to the\n                              // box: it is quantized by its caller, which means\n                              // it is usually a little larger than the box and\n                              // rarely the same shape. Stretched, that\n                              // difference would land as a non-uniform scale — a\n                              // picture squashed on one axis, a far worse\n                              // artefact than the softness this arrangement\n                              // exists to remove.\n                              //\n                              // Centred, so the surface's midpoint is the box's\n                              // midpoint: `executePass` puts the scene origin at\n                              // the centre of the surface, so this is what makes\n                              // the frame land where the caller's layout says it\n                              // is. The spare pixels hang off all four edges and\n                              // are clipped by whatever is holding this.\n                              position: \"absolute\",\n                              left: \"50%\",\n                              top: \"50%\",\n                              width: `${surfaceSize.width}px`,\n                              height: `${surfaceSize.height}px`,\n                              transform: \"translate(-50%, -50%)\",\n                          }\n                        : { width: \"100%\", height: \"100%\" }),\n                }}\n            />\n        </div>\n    );\n}\n"],
+  "mappings": "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",
+  "names": ["createPlayheadStore", "frame", "listeners", "onChange", "next", "notify", "usePlayhead", "player", "playhead", "useSyncExternalStore", "FALLBACK_VIEWPORT", "FALLBACK_FPS", "INITIAL_PRECOMP", "NO_ERRORS", "precompProgressOf", "result", "track", "samePrecomp", "a", "b", "sameErrors", "error", "i", "other", "errorsFrom", "reported", "held", "useMotionPlayer", "options", "engine", "document", "onFramePainted", "projectDoc", "isProjectDocument", "resolvedViewport", "fps", "viewport", "setViewport", "useState", "hasDocument", "session", "setSession", "isPlaying", "setIsPlaying", "speed", "setSpeedState", "muted", "setMutedState", "loop", "setLoopState", "loading", "setLoading", "duration", "setDuration", "errors", "setErrors", "precomp", "setPrecomp", "totalFrames", "controllerRef", "useRef", "sessionRef", "documentRef", "onFramePaintedRef", "seekTokenRef", "loopRef", "fpsRef", "useEffect", "prevDocument", "setPrevDocument", "sync", "useCallback", "pc", "progress", "seekTo", "last", "clamped", "token", "opened", "errs", "t", "live", "actions", "seek", "playing", "delta", "nodeId", "path", "parentPoints", "localPoints", "point", "tolerance", "props", "useMemo", "IDENTITY_VIEW", "MotionStage", "renderScale", "surfaceSize", "view", "clipToFrame", "frameBackground", "className", "style", "canvasRef", "bufferWidth", "bufferHeight", "activeView", "activeFrame", "activeClipToFrame", "activeFrameBackground", "viewRef", "frameRectRef", "clipToFrameRef", "frameBackgroundRef", "ctxRef", "canvas", "ctx", "jsx"]
+}

package/dist/browser/manifest.json

@@ -0,0 +1,13 @@
+{
+  "name": "@motionscript/react",
+  "version": "0.1.0-alpha.0",
+  "exports": {
+    ".": "dist/browser/index.js"
+  },
+  "peers": [
+    "@motionscript/core",
+    "react",
+    "react-dom"
+  ],
+  "assets": {}
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { useMotionPlayer } from './ui/use-motion-player';
+export type { MotionPlayerOptions, Player, PrecompProgress } from './ui/use-motion-player';
+export { MotionStage } from './ui/stage';
+export type { MotionStageProps } from './ui/stage';
+export { usePlayhead } from './ui/playhead';
+export type { PlayheadStore } from './ui/playhead';
+export type { BuildError, Engine, Session } from '@motionscript/core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC"}