@vizij/runtime-react 0.0.4 → 0.0.7

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

@@ -12,6 +12,27 @@ pnpm add @vizij/runtime-react @vizij/render @vizij/orchestrator-react react reac
 
 Those three Vizij packages must stay in lock-step; always upgrade them together.
 
+> **Bundler configuration:** The runtime depends on `@vizij/orchestrator-wasm`, `@vizij/node-graph-wasm`, and `@vizij/animation-wasm`, all of which emit `.wasm` assets. Enable async WebAssembly and treat `.wasm` files as emitted resources in your bundler. For Next.js:
+>
+> ```js
+> // next.config.js
+> module.exports = {
+>   webpack: (config) => {
+>     config.experiments = {
+>       ...(config.experiments ?? {}),
+>       asyncWebAssembly: true,
+>     };
+>     config.module.rules.push({
+>       test: /\.wasm$/,
+>       type: "asset/resource",
+>     });
+>     return config;
+>   },
+> };
+> ```
+
+When overriding the default wasm location, pass string URLs to the underlying `init()` helpers so Webpack doesn’t wrap them in `RelativeURL`.
+
 ## Getting Started
 
 ```tsx

package/dist/index.js

@@ -291,6 +291,122 @@ function convertBundleAnimations(entries) {
     clip: entry.clip
   }));
 }
+function resolveChannelId(track) {
+  if (typeof track.componentId !== "string" || track.componentId.length === 0) {
+    return null;
+  }
+  if (typeof track.component === "string" && track.component.length > 0) {
+    return `${track.componentId}:${track.component}`;
+  }
+  const rawIndex = track.componentIndex != null ? Number(track.componentIndex) : void 0;
+  const valueSize = track.valueSize != null ? Number(track.valueSize) : void 0;
+  if (Number.isInteger(rawIndex) && Number.isFinite(rawIndex) && rawIndex >= 0 && Number.isFinite(valueSize) && valueSize > 1) {
+    return `${track.componentId}:${rawIndex}`;
+  }
+  return track.componentId;
+}
+function convertExtractedAnimations(clips) {
+  if (!Array.isArray(clips) || clips.length === 0) {
+    return [];
+  }
+  const assets = [];
+  clips.forEach((clip) => {
+    const clipTracks = Array.isArray(clip.tracks) ? clip.tracks : [];
+    if (clipTracks.length === 0) {
+      return;
+    }
+    const convertedTracks = [];
+    clipTracks.forEach((track) => {
+      const channelId = resolveChannelId(track);
+      if (!channelId) {
+        return;
+      }
+      const rawTimes = Array.isArray(track.times) ? track.times : [];
+      const rawValues = Array.isArray(track.values) ? track.values : [];
+      if (rawTimes.length === 0 || rawValues.length === 0) {
+        return;
+      }
+      const times = [];
+      for (const entry of rawTimes) {
+        const time = Number(entry);
+        if (!Number.isFinite(time)) {
+          return;
+        }
+        times.push(time);
+      }
+      const values = [];
+      for (const entry of rawValues) {
+        const value = Number(entry);
+        if (!Number.isFinite(value)) {
+          return;
+        }
+        values.push(value);
+      }
+      const parsedValueSize = track.valueSize != null ? Number(track.valueSize) : NaN;
+      const valueSize = Number.isFinite(parsedValueSize) && parsedValueSize > 0 ? parsedValueSize : 1;
+      if (values.length !== times.length * valueSize) {
+        return;
+      }
+      const rawIndex = track.componentIndex != null ? Number(track.componentIndex) : 0;
+      const componentIndex = Number.isInteger(rawIndex) && rawIndex >= 0 ? Math.min(rawIndex, valueSize - 1) : 0;
+      const keyframes = [];
+      times.forEach((time, index) => {
+        const base = index * valueSize + componentIndex;
+        const value = values[base];
+        if (!Number.isFinite(value)) {
+          return;
+        }
+        keyframes.push({ time, value });
+      });
+      if (keyframes.length === 0) {
+        return;
+      }
+      convertedTracks.push({
+        channel: channelId,
+        keyframes
+      });
+    });
+    if (convertedTracks.length === 0) {
+      return;
+    }
+    const durationFromTracks = convertedTracks.reduce((maxTime, track) => {
+      const keyframes = Array.isArray(track.keyframes) ? track.keyframes : [];
+      if (keyframes.length === 0) {
+        return maxTime;
+      }
+      const lastKeyframe = keyframes[keyframes.length - 1];
+      const time = Number(lastKeyframe?.time ?? 0);
+      if (!Number.isFinite(time)) {
+        return maxTime;
+      }
+      return time > maxTime ? time : maxTime;
+    }, 0);
+    const duration = typeof clip.duration === "number" && Number.isFinite(clip.duration) ? clip.duration : durationFromTracks;
+    const clipId = typeof clip.id === "string" && clip.id.length > 0 ? clip.id : typeof clip.name === "string" && clip.name.length > 0 ? clip.name : `gltf-animation-${assets.length}`;
+    const metadata = clip.metadata && typeof clip.metadata === "object" && !Array.isArray(clip.metadata) ? clip.metadata : void 0;
+    assets.push({
+      id: clipId,
+      clip: {
+        id: clipId,
+        name: typeof clip.name === "string" ? clip.name : clipId,
+        duration,
+        tracks: convertedTracks,
+        metadata
+      }
+    });
+  });
+  return assets;
+}
+function pickExtractedAnimations(asset) {
+  if (!asset || typeof asset !== "object") {
+    return void 0;
+  }
+  const animations = asset.animations;
+  if (!Array.isArray(animations)) {
+    return void 0;
+  }
+  return animations;
+}
 function mergeAnimationLists(explicit, fromBundle) {
   if (!explicit?.length && fromBundle.length === 0) {
     return void 0;
@@ -314,7 +430,7 @@ function mergeAnimationLists(explicit, fromBundle) {
   }
   return changed ? merged : explicit;
 }
-function mergeAssetBundle(base, extracted) {
+function mergeAssetBundle(base, extracted, extractedAnimations) {
   const resolvedBundle = base.bundle ?? extracted ?? null;
   const rigFromBundle = convertBundleGraph(
     pickBundleGraph(resolvedBundle, ["rig"])
@@ -354,10 +470,17 @@ function mergeAssetBundle(base, extracted) {
   const animationsFromBundle = convertBundleAnimations(
     resolvedBundle?.animations
   );
-  const resolvedAnimations = mergeAnimationLists(
+  let resolvedAnimations = mergeAnimationLists(
     base.animations,
     animationsFromBundle
   );
+  const animationsFromAsset = extractedAnimations && extractedAnimations.length > 0 ? extractedAnimations : [];
+  if (animationsFromAsset.length > 0) {
+    resolvedAnimations = mergeAnimationLists(
+      resolvedAnimations,
+      animationsFromAsset
+    );
+  }
   const merged = {
     ...base
   };
@@ -430,6 +553,7 @@ function VizijRuntimeProviderInner({
     }
     return null;
   });
+  const [extractedAnimations, setExtractedAnimations] = (0, import_react2.useState)([]);
   (0, import_react2.useEffect)(() => {
     if (initialAssetBundle.bundle) {
       setExtractedBundle(initialAssetBundle.bundle);
@@ -442,8 +566,12 @@ function VizijRuntimeProviderInner({
     }
   }, [initialAssetBundle]);
   const assetBundle = (0, import_react2.useMemo)(
-    () => mergeAssetBundle(initialAssetBundle, extractedBundle),
-    [initialAssetBundle, extractedBundle]
+    () => mergeAssetBundle(
+      initialAssetBundle,
+      extractedBundle,
+      extractedAnimations
+    ),
+    [initialAssetBundle, extractedBundle, extractedAnimations]
   );
   const {
     ready,
@@ -549,6 +677,8 @@ function VizijRuntimeProviderInner({
       faceId
     }));
   }, [namespace, faceId, reportStatus]);
+  const glbAsset = initialAssetBundle.glb;
+  const baseBundle = initialAssetBundle.bundle ?? null;
   (0, import_react2.useEffect)(() => {
     let cancelled = false;
     resetErrors();
@@ -560,40 +690,46 @@ function VizijRuntimeProviderInner({
       outputPaths: [],
       controllers: { graphs: [], anims: [] }
     }));
+    setExtractedAnimations([]);
     const loadAssets = async () => {
       try {
         let world;
         let animatables;
-        let bundle = assetBundle.bundle ?? null;
-        if (assetBundle.glb.kind === "url") {
+        let bundle = baseBundle;
+        let gltfAnimations;
+        if (glbAsset.kind === "url") {
           const loaded = await (0, import_render.loadGLTFWithBundle)(
-            assetBundle.glb.src,
+            glbAsset.src,
             [namespace],
-            assetBundle.glb.aggressiveImport ?? false,
-            assetBundle.glb.rootBounds
+            glbAsset.aggressiveImport ?? false,
+            glbAsset.rootBounds
           );
           world = loaded.world;
           animatables = loaded.animatables;
           bundle = loaded.bundle ?? bundle;
-        } else if (assetBundle.glb.kind === "blob") {
+          gltfAnimations = pickExtractedAnimations(loaded);
+        } else if (glbAsset.kind === "blob") {
           const loaded = await (0, import_render.loadGLTFFromBlobWithBundle)(
-            assetBundle.glb.blob,
+            glbAsset.blob,
             [namespace],
-            assetBundle.glb.aggressiveImport ?? false,
-            assetBundle.glb.rootBounds
+            glbAsset.aggressiveImport ?? false,
+            glbAsset.rootBounds
           );
           world = loaded.world;
           animatables = loaded.animatables;
           bundle = loaded.bundle ?? bundle;
+          gltfAnimations = pickExtractedAnimations(loaded);
         } else {
-          world = assetBundle.glb.world;
-          animatables = assetBundle.glb.animatables;
-          bundle = assetBundle.glb.bundle ?? bundle;
+          world = glbAsset.world;
+          animatables = glbAsset.animatables;
+          bundle = glbAsset.bundle ?? bundle;
+          gltfAnimations = void 0;
         }
         if (cancelled) {
           return;
         }
         setExtractedBundle(bundle ?? null);
+        setExtractedAnimations(convertExtractedAnimations(gltfAnimations));
         const rootId = findRootId(world);
         store.getState().addWorldElements(world, animatables, true);
         reportStatus((prev) => ({
@@ -624,14 +760,16 @@ function VizijRuntimeProviderInner({
       cancelled = true;
     };
   }, [
-    assetBundle,
+    glbAsset,
+    baseBundle,
     namespace,
     faceId,
     store,
     pushError,
     reportStatus,
     resetErrors,
-    setExtractedBundle
+    setExtractedBundle,
+    setExtractedAnimations
   ]);
   (0, import_react2.useEffect)(() => {
     if (!ready && autoCreate) {

package/dist/index.mjs

@@ -284,6 +284,122 @@ function convertBundleAnimations(entries) {
     clip: entry.clip
   }));
 }
+function resolveChannelId(track) {
+  if (typeof track.componentId !== "string" || track.componentId.length === 0) {
+    return null;
+  }
+  if (typeof track.component === "string" && track.component.length > 0) {
+    return `${track.componentId}:${track.component}`;
+  }
+  const rawIndex = track.componentIndex != null ? Number(track.componentIndex) : void 0;
+  const valueSize = track.valueSize != null ? Number(track.valueSize) : void 0;
+  if (Number.isInteger(rawIndex) && Number.isFinite(rawIndex) && rawIndex >= 0 && Number.isFinite(valueSize) && valueSize > 1) {
+    return `${track.componentId}:${rawIndex}`;
+  }
+  return track.componentId;
+}
+function convertExtractedAnimations(clips) {
+  if (!Array.isArray(clips) || clips.length === 0) {
+    return [];
+  }
+  const assets = [];
+  clips.forEach((clip) => {
+    const clipTracks = Array.isArray(clip.tracks) ? clip.tracks : [];
+    if (clipTracks.length === 0) {
+      return;
+    }
+    const convertedTracks = [];
+    clipTracks.forEach((track) => {
+      const channelId = resolveChannelId(track);
+      if (!channelId) {
+        return;
+      }
+      const rawTimes = Array.isArray(track.times) ? track.times : [];
+      const rawValues = Array.isArray(track.values) ? track.values : [];
+      if (rawTimes.length === 0 || rawValues.length === 0) {
+        return;
+      }
+      const times = [];
+      for (const entry of rawTimes) {
+        const time = Number(entry);
+        if (!Number.isFinite(time)) {
+          return;
+        }
+        times.push(time);
+      }
+      const values = [];
+      for (const entry of rawValues) {
+        const value = Number(entry);
+        if (!Number.isFinite(value)) {
+          return;
+        }
+        values.push(value);
+      }
+      const parsedValueSize = track.valueSize != null ? Number(track.valueSize) : NaN;
+      const valueSize = Number.isFinite(parsedValueSize) && parsedValueSize > 0 ? parsedValueSize : 1;
+      if (values.length !== times.length * valueSize) {
+        return;
+      }
+      const rawIndex = track.componentIndex != null ? Number(track.componentIndex) : 0;
+      const componentIndex = Number.isInteger(rawIndex) && rawIndex >= 0 ? Math.min(rawIndex, valueSize - 1) : 0;
+      const keyframes = [];
+      times.forEach((time, index) => {
+        const base = index * valueSize + componentIndex;
+        const value = values[base];
+        if (!Number.isFinite(value)) {
+          return;
+        }
+        keyframes.push({ time, value });
+      });
+      if (keyframes.length === 0) {
+        return;
+      }
+      convertedTracks.push({
+        channel: channelId,
+        keyframes
+      });
+    });
+    if (convertedTracks.length === 0) {
+      return;
+    }
+    const durationFromTracks = convertedTracks.reduce((maxTime, track) => {
+      const keyframes = Array.isArray(track.keyframes) ? track.keyframes : [];
+      if (keyframes.length === 0) {
+        return maxTime;
+      }
+      const lastKeyframe = keyframes[keyframes.length - 1];
+      const time = Number(lastKeyframe?.time ?? 0);
+      if (!Number.isFinite(time)) {
+        return maxTime;
+      }
+      return time > maxTime ? time : maxTime;
+    }, 0);
+    const duration = typeof clip.duration === "number" && Number.isFinite(clip.duration) ? clip.duration : durationFromTracks;
+    const clipId = typeof clip.id === "string" && clip.id.length > 0 ? clip.id : typeof clip.name === "string" && clip.name.length > 0 ? clip.name : `gltf-animation-${assets.length}`;
+    const metadata = clip.metadata && typeof clip.metadata === "object" && !Array.isArray(clip.metadata) ? clip.metadata : void 0;
+    assets.push({
+      id: clipId,
+      clip: {
+        id: clipId,
+        name: typeof clip.name === "string" ? clip.name : clipId,
+        duration,
+        tracks: convertedTracks,
+        metadata
+      }
+    });
+  });
+  return assets;
+}
+function pickExtractedAnimations(asset) {
+  if (!asset || typeof asset !== "object") {
+    return void 0;
+  }
+  const animations = asset.animations;
+  if (!Array.isArray(animations)) {
+    return void 0;
+  }
+  return animations;
+}
 function mergeAnimationLists(explicit, fromBundle) {
   if (!explicit?.length && fromBundle.length === 0) {
     return void 0;
@@ -307,7 +423,7 @@ function mergeAnimationLists(explicit, fromBundle) {
   }
   return changed ? merged : explicit;
 }
-function mergeAssetBundle(base, extracted) {
+function mergeAssetBundle(base, extracted, extractedAnimations) {
   const resolvedBundle = base.bundle ?? extracted ?? null;
   const rigFromBundle = convertBundleGraph(
     pickBundleGraph(resolvedBundle, ["rig"])
@@ -347,10 +463,17 @@ function mergeAssetBundle(base, extracted) {
   const animationsFromBundle = convertBundleAnimations(
     resolvedBundle?.animations
   );
-  const resolvedAnimations = mergeAnimationLists(
+  let resolvedAnimations = mergeAnimationLists(
     base.animations,
     animationsFromBundle
   );
+  const animationsFromAsset = extractedAnimations && extractedAnimations.length > 0 ? extractedAnimations : [];
+  if (animationsFromAsset.length > 0) {
+    resolvedAnimations = mergeAnimationLists(
+      resolvedAnimations,
+      animationsFromAsset
+    );
+  }
   const merged = {
     ...base
   };
@@ -423,6 +546,7 @@ function VizijRuntimeProviderInner({
     }
     return null;
   });
+  const [extractedAnimations, setExtractedAnimations] = useState([]);
   useEffect(() => {
     if (initialAssetBundle.bundle) {
       setExtractedBundle(initialAssetBundle.bundle);
@@ -435,8 +559,12 @@ function VizijRuntimeProviderInner({
     }
   }, [initialAssetBundle]);
   const assetBundle = useMemo(
-    () => mergeAssetBundle(initialAssetBundle, extractedBundle),
-    [initialAssetBundle, extractedBundle]
+    () => mergeAssetBundle(
+      initialAssetBundle,
+      extractedBundle,
+      extractedAnimations
+    ),
+    [initialAssetBundle, extractedBundle, extractedAnimations]
   );
   const {
     ready,
@@ -542,6 +670,8 @@ function VizijRuntimeProviderInner({
       faceId
     }));
   }, [namespace, faceId, reportStatus]);
+  const glbAsset = initialAssetBundle.glb;
+  const baseBundle = initialAssetBundle.bundle ?? null;
   useEffect(() => {
     let cancelled = false;
     resetErrors();
@@ -553,40 +683,46 @@ function VizijRuntimeProviderInner({
       outputPaths: [],
       controllers: { graphs: [], anims: [] }
     }));
+    setExtractedAnimations([]);
     const loadAssets = async () => {
       try {
         let world;
         let animatables;
-        let bundle = assetBundle.bundle ?? null;
-        if (assetBundle.glb.kind === "url") {
+        let bundle = baseBundle;
+        let gltfAnimations;
+        if (glbAsset.kind === "url") {
           const loaded = await loadGLTFWithBundle(
-            assetBundle.glb.src,
+            glbAsset.src,
             [namespace],
-            assetBundle.glb.aggressiveImport ?? false,
-            assetBundle.glb.rootBounds
+            glbAsset.aggressiveImport ?? false,
+            glbAsset.rootBounds
           );
           world = loaded.world;
           animatables = loaded.animatables;
           bundle = loaded.bundle ?? bundle;
-        } else if (assetBundle.glb.kind === "blob") {
+          gltfAnimations = pickExtractedAnimations(loaded);
+        } else if (glbAsset.kind === "blob") {
           const loaded = await loadGLTFFromBlobWithBundle(
-            assetBundle.glb.blob,
+            glbAsset.blob,
             [namespace],
-            assetBundle.glb.aggressiveImport ?? false,
-            assetBundle.glb.rootBounds
+            glbAsset.aggressiveImport ?? false,
+            glbAsset.rootBounds
           );
           world = loaded.world;
           animatables = loaded.animatables;
           bundle = loaded.bundle ?? bundle;
+          gltfAnimations = pickExtractedAnimations(loaded);
         } else {
-          world = assetBundle.glb.world;
-          animatables = assetBundle.glb.animatables;
-          bundle = assetBundle.glb.bundle ?? bundle;
+          world = glbAsset.world;
+          animatables = glbAsset.animatables;
+          bundle = glbAsset.bundle ?? bundle;
+          gltfAnimations = void 0;
         }
         if (cancelled) {
           return;
         }
         setExtractedBundle(bundle ?? null);
+        setExtractedAnimations(convertExtractedAnimations(gltfAnimations));
         const rootId = findRootId(world);
         store.getState().addWorldElements(world, animatables, true);
         reportStatus((prev) => ({
@@ -617,14 +753,16 @@ function VizijRuntimeProviderInner({
       cancelled = true;
     };
   }, [
-    assetBundle,
+    glbAsset,
+    baseBundle,
     namespace,
     faceId,
     store,
     pushError,
     reportStatus,
     resetErrors,
-    setExtractedBundle
+    setExtractedBundle,
+    setExtractedAnimations
   ]);
   useEffect(() => {
     if (!ready && autoCreate) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizij/runtime-react",
   "description": "Runtime provider that bridges Vizij renderer assets with orchestrator controllers for React apps.",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -23,25 +23,11 @@
     "dist",
     "README.md"
   ],
-  "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts src/index.ts --external react,react-dom",
-    "dev": "tsup src/index.ts --format esm,cjs --watch --dts src/index.ts --external react,react-dom",
-    "typecheck": "tsc --noEmit",
-    "lint": "pnpm --filter \"$npm_package_name\" exec eslint --ext .js,.jsx,.ts,.tsx -- .",
-    "lint:fix": "pnpm --filter \"$npm_package_name\" exec eslint --ext .js,.jsx,.ts,.tsx --fix -- .",
-    "prettier:check": "prettier --check .",
-    "prettier:write": "prettier --write .",
-    "test": "vitest --run --passWithNoTests",
-    "clean": "rm -rf dist .turbo coverage tsconfig.tsbuildinfo",
-    "reset": "rm -rf node_modules",
-    "reset:hard": "pnpm run reset && rm -f pnpm-lock.yaml package-lock.json yarn.lock",
-    "prepack": "pnpm run build && pnpm run test && pnpm run typecheck && pnpm run lint"
-  },
   "dependencies": {
-    "@vizij/orchestrator-react": "^0.0.2",
-    "@vizij/render": "^0.0.4",
+    "@vizij/value-json": "^0.1.0",
     "@vizij/utils": "^0.0.2",
-    "@vizij/value-json": "^0.1.0"
+    "@vizij/orchestrator-react": "^0.0.2",
+    "@vizij/render": "^0.0.4"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -57,5 +43,18 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts src/index.ts --external react,react-dom",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts src/index.ts --external react,react-dom",
+    "typecheck": "tsc --noEmit",
+    "lint": "pnpm --filter \"$npm_package_name\" exec eslint --ext .js,.jsx,.ts,.tsx -- .",
+    "lint:fix": "pnpm --filter \"$npm_package_name\" exec eslint --ext .js,.jsx,.ts,.tsx --fix -- .",
+    "prettier:check": "prettier --check .",
+    "prettier:write": "prettier --write .",
+    "test": "vitest --run --passWithNoTests",
+    "clean": "rm -rf dist .turbo coverage tsconfig.tsbuildinfo",
+    "reset": "rm -rf node_modules",
+    "reset:hard": "pnpm run reset && rm -f pnpm-lock.yaml package-lock.json yarn.lock"
   }
-}
+}