@vizij/render 0.0.4 → 0.0.6

package/README.md

@@ -23,7 +23,7 @@ This package exposes the `Vizij` canvas component along with hooks, stores, and
 
 - `Vizij` renders a fully managed `@react-three/fiber` canvas with sensible defaults for orthographic cameras and safe-area overlays.
 - A Zustand-powered store (`useVizijStore`) tracks renderables, controllers, and transient state. Hooks let you read or mutate slices without re-rendering entire scenes.
-- Utilities (`loadGLTF`, `loadGLTFBlob`, export helpers) streamline loading rigged GLTF assets and exporting scene snapshots.
+- Utilities (`loadGLTF`, `loadGLTFBlob`, export helpers) streamline loading rigged GLTF assets and exporting scene snapshots. The tuple helpers now return `[world, animatables, animations]`, where `animations` contains parsed clip metadata for any channels embedded in the GLB.
 - Controllers wrap common behaviours (e.g., pointer interaction, safe-area visualisation) so you can compose features quickly.
 
 ---
@@ -108,7 +108,8 @@ Vizij scenes persist authoring metadata inside GLBs so third-party tools see bak
 - Every renderable still carries a `RobotData` extension in `userData` describing features and animatable bindings.
 - The exporter now writes a root-level `extensions.VIZIJ_bundle` block following the schema in [`src/types/vizij-bundle.ts`](./src/types/vizij-bundle.ts). It contains rig graphs, pose configs, stored Vizij clips, and provenance hashes.
 - Use `exportScene(group, { bundle, animations })` to embed both the Vizij bundle and optional baked `THREE.AnimationClip` instances. The helper attaches the bundle only for the export call and restores the original object.
-- When loading assets, prefer `loadGLTFWithBundle` / `loadGLTFFromBlobWithBundle` to retrieve `{ world, animatables, bundle }`. The legacy tuple helpers remain available if you do not need bundle metadata.
+- When loading assets, prefer `loadGLTFWithBundle` / `loadGLTFFromBlobWithBundle` to retrieve `{ world, animatables, bundle, animations }`. The legacy tuple helpers return `[world, animatables, animations]` if you only need the renderer state.
+- The new `animations` field exposes `VizijAnimationClipData[]`, which maps each glTF animation channel back to Vizij animatable ids (`RobotData.features.*.value.id`). Each track provides component-aware `times`/`values` arrays so runtimes can register clips without re-parsing the GLB.
 - `extractVizijBundle(scene)` and `applyVizijBundle(scene, bundle)` (under `src/functions/vizij-bundle.ts`) let advanced tooling inspect or mutate bundles without triggering a fresh export.
 
 With this structure, authoring tools can round-trip orchestrator assets while shipping native glTF animations for viewers that do not understand Vizij.

package/dist/index.d.mts

@@ -362,6 +362,49 @@ interface VizijBundleExtension {
     metadata?: Record<string, unknown>;
 }
 
+interface VizijAnimationTrackData {
+    /** Vizij animatable id extracted from RobotData.features.*.value.id */
+    componentId: string;
+    /** Feature key (e.g. translation, chin, etc.) */
+    feature: string;
+    /** Vizij renderable id that owns the feature. */
+    renderableId: string;
+    /** glTF node index referenced by the channel. */
+    nodeIndex: number;
+    /** Optional glTF node name for debugging. */
+    nodeName?: string;
+    /** Original glTF channel path (translation, rotation, etc.). */
+    path?: string;
+    /** Optional feature component label (e.g. x, y, z) if provided by the glTF channel. */
+    component?: string;
+    /** Index within the output accessor for multi-component values. */
+    componentIndex?: number;
+    /** Numeric type reported by the Vizij animatable (number, vector3, etc.). */
+    valueType?: string;
+    /** Number of numeric entries per keyframe within `values`. */
+    valueSize: number;
+    /** Interpolation declared on the glTF sampler. */
+    interpolation?: string;
+    /** Keyframe times extracted from the GLTF animation sampler. */
+    times: number[];
+    /** Keyframe values (flattened, length === times.length * valueSize). */
+    values: number[];
+}
+interface VizijAnimationClipData {
+    /** Stable identifier derived from glTF animation name or index. */
+    id: string;
+    /** Human readable name (mirrors glTF animation name when available). */
+    name?: string;
+    /** Duration in seconds resolved from the THREE.AnimationClip. */
+    duration: number;
+    /** Raw glTF animation index in the asset. */
+    index: number;
+    /** Optional metadata copied from glTF animation extras. */
+    metadata?: Record<string, unknown>;
+    /** Extracted per-channel track data for Vizij animatables. */
+    tracks: VizijAnimationTrackData[];
+}
+
 interface VizijData {
     world: World;
     animatables: Record<string, AnimatableValue>;
@@ -517,15 +560,16 @@ declare class EmptyModelError extends Error {
 declare function loadGLTF(url: string, namespaces: string[], aggressiveImport?: boolean, rootBounds?: {
     center: RawVector2;
     size: RawVector2;
-}): Promise<[World, Record<string, AnimatableValue>]>;
+}): Promise<[World, Record<string, AnimatableValue>, VizijAnimationClipData[]]>;
 declare function loadGLTFFromBlob(blob: Blob, namespaces: string[], aggressiveImport?: boolean, rootBounds?: {
     center: RawVector2;
     size: RawVector2;
-}): Promise<[World, Record<string, AnimatableValue>]>;
+}): Promise<[World, Record<string, AnimatableValue>, VizijAnimationClipData[]]>;
 type LoadedVizijAsset = {
     world: World;
     animatables: Record<string, AnimatableValue>;
     bundle: VizijBundleExtension | null;
+    animations: VizijAnimationClipData[];
 };
 declare function loadGLTFWithBundle(url: string, namespaces: string[], aggressiveImport?: boolean, rootBounds?: {
     center: RawVector2;
@@ -555,4 +599,4 @@ declare function exportScene(data: Group$1, fileNameOrOptions?: string | ExportS
 declare function extractVizijBundle(object: Object3D, parserJson?: unknown): VizijBundleExtension | null;
 declare function applyVizijBundle(object: Object3D, bundle: VizijBundleExtension | null): () => void;
 
-export { type AnimatedFeature, type Ellipse, type EllipseFeature, EmptyModelError, type ExportSceneOptions, type Feature, type Group, type GroupFeature, InnerVizij, type InnerVizijProps, type LoadedVizijAsset, type Rectangle, type RectangleFeature, type RenderableBase, type RenderableFeature, type Selection, type Shape, type ShapeFeature, ShapeMaterial, type StaticFeature, type Stored, type StoredAnimatedFeature, type StoredEllipse, type StoredFeatures, type StoredGroup, type StoredRectangle, type StoredRenderable, type StoredShape, Vizij, type VizijActions, type VizijAnimationId, type VizijBundleAnimationClip, type VizijBundleAnimationEntry, type VizijBundleAnimationKeyframe, type VizijBundleAnimationTrack, type VizijBundleExtension, type VizijBundleGraphEntry, type VizijBundleGraphKind, type VizijBundleGraphMetadata, type VizijBundlePoseSection, type VizijBundleVersion, VizijContext, type VizijData, type VizijGraphId, type VizijPoseDefinition, type VizijPoseId, type VizijPoseRigConfig, type VizijProps, VizijSlice, type VizijStore, type VizijStoreGetter, type VizijStoreSetter, type World, applyVizijBundle, createVizijStore, exportScene, extractVizijBundle, loadGLTF, loadGLTFFromBlob, loadGLTFFromBlobWithBundle, loadGLTFWithBundle, loadGltfFromBlob, useDefaultVizijStore, useFeatures, useVizijStore, useVizijStoreGetter, useVizijStoreSetter, useVizijStoreSubscription };
+export { type AnimatedFeature, type Ellipse, type EllipseFeature, EmptyModelError, type ExportSceneOptions, type Feature, type Group, type GroupFeature, InnerVizij, type InnerVizijProps, type LoadedVizijAsset, type Rectangle, type RectangleFeature, type RenderableBase, type RenderableFeature, type Selection, type Shape, type ShapeFeature, ShapeMaterial, type StaticFeature, type Stored, type StoredAnimatedFeature, type StoredEllipse, type StoredFeatures, type StoredGroup, type StoredRectangle, type StoredRenderable, type StoredShape, Vizij, type VizijActions, type VizijAnimationClipData, type VizijAnimationId, type VizijAnimationTrackData, type VizijBundleAnimationClip, type VizijBundleAnimationEntry, type VizijBundleAnimationKeyframe, type VizijBundleAnimationTrack, type VizijBundleExtension, type VizijBundleGraphEntry, type VizijBundleGraphKind, type VizijBundleGraphMetadata, type VizijBundlePoseSection, type VizijBundleVersion, VizijContext, type VizijData, type VizijGraphId, type VizijPoseDefinition, type VizijPoseId, type VizijPoseRigConfig, type VizijProps, VizijSlice, type VizijStore, type VizijStoreGetter, type VizijStoreSetter, type World, applyVizijBundle, createVizijStore, exportScene, extractVizijBundle, loadGLTF, loadGLTFFromBlob, loadGLTFFromBlobWithBundle, loadGLTFWithBundle, loadGltfFromBlob, useDefaultVizijStore, useFeatures, useVizijStore, useVizijStoreGetter, useVizijStoreSetter, useVizijStoreSubscription };

package/dist/index.d.ts

@@ -362,6 +362,49 @@ interface VizijBundleExtension {
     metadata?: Record<string, unknown>;
 }
 
+interface VizijAnimationTrackData {
+    /** Vizij animatable id extracted from RobotData.features.*.value.id */
+    componentId: string;
+    /** Feature key (e.g. translation, chin, etc.) */
+    feature: string;
+    /** Vizij renderable id that owns the feature. */
+    renderableId: string;
+    /** glTF node index referenced by the channel. */
+    nodeIndex: number;
+    /** Optional glTF node name for debugging. */
+    nodeName?: string;
+    /** Original glTF channel path (translation, rotation, etc.). */
+    path?: string;
+    /** Optional feature component label (e.g. x, y, z) if provided by the glTF channel. */
+    component?: string;
+    /** Index within the output accessor for multi-component values. */
+    componentIndex?: number;
+    /** Numeric type reported by the Vizij animatable (number, vector3, etc.). */
+    valueType?: string;
+    /** Number of numeric entries per keyframe within `values`. */
+    valueSize: number;
+    /** Interpolation declared on the glTF sampler. */
+    interpolation?: string;
+    /** Keyframe times extracted from the GLTF animation sampler. */
+    times: number[];
+    /** Keyframe values (flattened, length === times.length * valueSize). */
+    values: number[];
+}
+interface VizijAnimationClipData {
+    /** Stable identifier derived from glTF animation name or index. */
+    id: string;
+    /** Human readable name (mirrors glTF animation name when available). */
+    name?: string;
+    /** Duration in seconds resolved from the THREE.AnimationClip. */
+    duration: number;
+    /** Raw glTF animation index in the asset. */
+    index: number;
+    /** Optional metadata copied from glTF animation extras. */
+    metadata?: Record<string, unknown>;
+    /** Extracted per-channel track data for Vizij animatables. */
+    tracks: VizijAnimationTrackData[];
+}
+
 interface VizijData {
     world: World;
     animatables: Record<string, AnimatableValue>;
@@ -517,15 +560,16 @@ declare class EmptyModelError extends Error {
 declare function loadGLTF(url: string, namespaces: string[], aggressiveImport?: boolean, rootBounds?: {
     center: RawVector2;
     size: RawVector2;
-}): Promise<[World, Record<string, AnimatableValue>]>;
+}): Promise<[World, Record<string, AnimatableValue>, VizijAnimationClipData[]]>;
 declare function loadGLTFFromBlob(blob: Blob, namespaces: string[], aggressiveImport?: boolean, rootBounds?: {
     center: RawVector2;
     size: RawVector2;
-}): Promise<[World, Record<string, AnimatableValue>]>;
+}): Promise<[World, Record<string, AnimatableValue>, VizijAnimationClipData[]]>;
 type LoadedVizijAsset = {
     world: World;
     animatables: Record<string, AnimatableValue>;
     bundle: VizijBundleExtension | null;
+    animations: VizijAnimationClipData[];
 };
 declare function loadGLTFWithBundle(url: string, namespaces: string[], aggressiveImport?: boolean, rootBounds?: {
     center: RawVector2;
@@ -555,4 +599,4 @@ declare function exportScene(data: Group$1, fileNameOrOptions?: string | ExportS
 declare function extractVizijBundle(object: Object3D, parserJson?: unknown): VizijBundleExtension | null;
 declare function applyVizijBundle(object: Object3D, bundle: VizijBundleExtension | null): () => void;
 
-export { type AnimatedFeature, type Ellipse, type EllipseFeature, EmptyModelError, type ExportSceneOptions, type Feature, type Group, type GroupFeature, InnerVizij, type InnerVizijProps, type LoadedVizijAsset, type Rectangle, type RectangleFeature, type RenderableBase, type RenderableFeature, type Selection, type Shape, type ShapeFeature, ShapeMaterial, type StaticFeature, type Stored, type StoredAnimatedFeature, type StoredEllipse, type StoredFeatures, type StoredGroup, type StoredRectangle, type StoredRenderable, type StoredShape, Vizij, type VizijActions, type VizijAnimationId, type VizijBundleAnimationClip, type VizijBundleAnimationEntry, type VizijBundleAnimationKeyframe, type VizijBundleAnimationTrack, type VizijBundleExtension, type VizijBundleGraphEntry, type VizijBundleGraphKind, type VizijBundleGraphMetadata, type VizijBundlePoseSection, type VizijBundleVersion, VizijContext, type VizijData, type VizijGraphId, type VizijPoseDefinition, type VizijPoseId, type VizijPoseRigConfig, type VizijProps, VizijSlice, type VizijStore, type VizijStoreGetter, type VizijStoreSetter, type World, applyVizijBundle, createVizijStore, exportScene, extractVizijBundle, loadGLTF, loadGLTFFromBlob, loadGLTFFromBlobWithBundle, loadGLTFWithBundle, loadGltfFromBlob, useDefaultVizijStore, useFeatures, useVizijStore, useVizijStoreGetter, useVizijStoreSetter, useVizijStoreSubscription };
+export { type AnimatedFeature, type Ellipse, type EllipseFeature, EmptyModelError, type ExportSceneOptions, type Feature, type Group, type GroupFeature, InnerVizij, type InnerVizijProps, type LoadedVizijAsset, type Rectangle, type RectangleFeature, type RenderableBase, type RenderableFeature, type Selection, type Shape, type ShapeFeature, ShapeMaterial, type StaticFeature, type Stored, type StoredAnimatedFeature, type StoredEllipse, type StoredFeatures, type StoredGroup, type StoredRectangle, type StoredRenderable, type StoredShape, Vizij, type VizijActions, type VizijAnimationClipData, type VizijAnimationId, type VizijAnimationTrackData, type VizijBundleAnimationClip, type VizijBundleAnimationEntry, type VizijBundleAnimationKeyframe, type VizijBundleAnimationTrack, type VizijBundleExtension, type VizijBundleGraphEntry, type VizijBundleGraphKind, type VizijBundleGraphMetadata, type VizijBundlePoseSection, type VizijBundleVersion, VizijContext, type VizijData, type VizijGraphId, type VizijPoseDefinition, type VizijPoseId, type VizijPoseRigConfig, type VizijProps, VizijSlice, type VizijStore, type VizijStoreGetter, type VizijStoreSetter, type World, applyVizijBundle, createVizijStore, exportScene, extractVizijBundle, loadGLTF, loadGLTFFromBlob, loadGLTFFromBlobWithBundle, loadGLTFWithBundle, loadGltfFromBlob, useDefaultVizijStore, useFeatures, useVizijStore, useVizijStoreGetter, useVizijStoreSetter, useVizijStoreSubscription };

package/dist/index.js

@@ -1769,6 +1769,11 @@ function Vizij({
         style,
         className,
         onPointerMissed,
+        gl: {
+          outputColorSpace: import_three.SRGBColorSpace,
+          toneMapping: import_three.NoToneMapping,
+          antialias: true
+        },
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           MemoizedInnerVizij,
           {
@@ -1786,6 +1791,11 @@ function Vizij({
         style,
         className,
         onPointerMissed,
+        gl: {
+          outputColorSpace: import_three.SRGBColorSpace,
+          toneMapping: import_three.NoToneMapping,
+          antialias: true
+        },
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           MemoizedInnerVizij,
           {
@@ -2674,6 +2684,375 @@ function applyVizijBundle(object, bundle) {
   };
 }
 
+// src/functions/gltf-loading/extract-animations.ts
+var CHANNEL_PATH_TO_TRACK_PROPERTY = {
+  translation: "position",
+  rotation: "quaternion",
+  scale: "scale",
+  weights: "morphTargetInfluences"
+};
+function isPlainObject(value) {
+  return Boolean(
+    value && typeof value === "object" && !Array.isArray(value) && Object.prototype.toString.call(value) === "[object Object]"
+  );
+}
+function clonePlainObject(value) {
+  if (!value) {
+    return void 0;
+  }
+  return JSON.parse(JSON.stringify(value));
+}
+function inferValueSize(valueType) {
+  switch (valueType) {
+    case "boolean":
+    case "number":
+    case "string":
+      return 1;
+    case "vector2":
+      return 2;
+    case "vector3":
+    case "euler":
+    case "rgb":
+    case "hsl":
+      return 3;
+    case "vector4":
+    case "quaternion":
+      return 4;
+    default:
+      return 1;
+  }
+}
+function componentNameToIndex(component) {
+  if (!component || typeof component !== "string") {
+    return void 0;
+  }
+  const normalized = component.trim().toLowerCase();
+  if (normalized.length === 0) {
+    return void 0;
+  }
+  const componentOrder = {
+    x: 0,
+    y: 1,
+    z: 2,
+    w: 3,
+    r: 0,
+    g: 1,
+    b: 2,
+    a: 3,
+    u: 0,
+    v: 1
+  };
+  return componentOrder[normalized];
+}
+function readComponentInfo(target) {
+  if (!target || typeof target !== "object") {
+    return {};
+  }
+  const sources = [];
+  const record = target;
+  const extensions = record.extensions;
+  if (extensions && typeof extensions === "object") {
+    const vizijChannel = extensions.VizijChannel;
+    if (isPlainObject(vizijChannel)) {
+      sources.push(vizijChannel);
+    }
+    const robotChannel = extensions.RobotChannel;
+    if (isPlainObject(robotChannel)) {
+      sources.push(robotChannel);
+    }
+  }
+  const extras = record.extras;
+  if (isPlainObject(extras)) {
+    sources.push(extras);
+  }
+  let component;
+  let componentIndex;
+  for (const source of sources) {
+    if (!isPlainObject(source)) {
+      continue;
+    }
+    if (typeof source.component === "string" && !component) {
+      component = source.component;
+    }
+    if (typeof source.axis === "string" && !component) {
+      component = source.axis;
+    }
+    if (typeof source.channel === "string" && !component) {
+      component = source.channel;
+    }
+    if (Object.prototype.hasOwnProperty.call(source, "componentIndex") && componentIndex == null) {
+      const value = source.componentIndex;
+      if (typeof value === "number") {
+        componentIndex = value;
+      }
+    }
+    if (Object.prototype.hasOwnProperty.call(source, "axisIndex") && componentIndex == null) {
+      const value = source.axisIndex;
+      if (typeof value === "number") {
+        componentIndex = value;
+      }
+    }
+  }
+  if (componentIndex == null) {
+    componentIndex = componentNameToIndex(component);
+  }
+  return { component, componentIndex };
+}
+function resolveRobotNodeIndex(parserJson) {
+  const indexMap = /* @__PURE__ */ new Map();
+  if (!parserJson || typeof parserJson !== "object") {
+    return indexMap;
+  }
+  const json = parserJson;
+  const nodes = Array.isArray(json.nodes) ? json.nodes : [];
+  nodes.forEach((node, nodeIndex) => {
+    if (!node || typeof node !== "object") {
+      return;
+    }
+    const extensions = node.extensions;
+    if (!extensions || typeof extensions !== "object") {
+      return;
+    }
+    const robotData = extensions.RobotData;
+    if (!robotData || typeof robotData !== "object") {
+      return;
+    }
+    const renderableId = typeof robotData.id === "string" ? robotData.id : void 0;
+    if (!renderableId) {
+      return;
+    }
+    const nodeName = typeof node.name === "string" && node.name.length > 0 ? node.name : void 0;
+    const features = {};
+    const robotFeatures = robotData.features;
+    if (robotFeatures && typeof robotFeatures === "object") {
+      Object.entries(robotFeatures).forEach(
+        ([featureKey, featureValue]) => {
+          if (!featureValue || typeof featureValue !== "object" || !featureValue.animated) {
+            return;
+          }
+          const value = featureValue.value;
+          const componentId = value && typeof value === "object" && typeof value.id === "string" ? value.id : void 0;
+          if (!componentId) {
+            return;
+          }
+          const valueType = value && typeof value === "object" && typeof value.type === "string" ? value.type : void 0;
+          features[featureKey] = {
+            feature: featureKey,
+            componentId,
+            valueType
+          };
+        }
+      );
+    }
+    indexMap.set(nodeIndex, {
+      renderableId,
+      nodeName,
+      features
+    });
+  });
+  return indexMap;
+}
+function mapChannelPathToProperty(path) {
+  if (typeof path !== "string") {
+    return void 0;
+  }
+  return CHANNEL_PATH_TO_TRACK_PROPERTY[path] ?? path;
+}
+function resolveFeatureKey(channelTarget) {
+  if (!channelTarget || typeof channelTarget !== "object") {
+    return void 0;
+  }
+  const target = channelTarget;
+  const extensions = target.extensions;
+  if (extensions && typeof extensions === "object") {
+    const vizij = extensions.VizijChannel;
+    if (isPlainObject(vizij)) {
+      const feature = vizij.feature;
+      if (typeof feature === "string") {
+        return feature;
+      }
+    }
+    const robot = extensions.RobotChannel;
+    if (isPlainObject(robot)) {
+      const feature = robot.feature;
+      if (typeof feature === "string") {
+        return feature;
+      }
+    }
+  }
+  const extras = target.extras;
+  if (isPlainObject(extras)) {
+    const feature = extras.feature;
+    if (typeof feature === "string") {
+      return feature;
+    }
+    const channel = extras.channel;
+    if (typeof channel === "string") {
+      return channel;
+    }
+  }
+  const path = target.path;
+  return typeof path === "string" ? path : void 0;
+}
+function resolveTrackForChannel(clip, channelIndex, expectedProperty, nodeName) {
+  if (!clip) {
+    return void 0;
+  }
+  const orderedTrack = clip.tracks[channelIndex];
+  if (orderedTrack) {
+    return orderedTrack;
+  }
+  if (!expectedProperty) {
+    return void 0;
+  }
+  const property = expectedProperty;
+  const matches = (track) => {
+    const name = track?.name ?? "";
+    if (!name) {
+      return false;
+    }
+    if (nodeName && name === `${nodeName}.${property}`) {
+      return true;
+    }
+    if (nodeName && name.startsWith(`${nodeName}.`) && name.endsWith(property)) {
+      return true;
+    }
+    if (!nodeName && name.endsWith(property)) {
+      return true;
+    }
+    return false;
+  };
+  return clip.tracks.find(matches);
+}
+function toNumberArray(arrayLike) {
+  if (!arrayLike) {
+    return [];
+  }
+  return Array.from(arrayLike, (value) => Number(value));
+}
+function resolveClipDuration(clip, tracks) {
+  if (clip && Number.isFinite(clip.duration) && clip.duration >= 0) {
+    return clip.duration;
+  }
+  let maxTime = 0;
+  tracks.forEach((track) => {
+    if (!track.times.length) {
+      return;
+    }
+    const lastTime = track.times[track.times.length - 1] ?? 0;
+    if (lastTime > maxTime) {
+      maxTime = lastTime;
+    }
+  });
+  return maxTime;
+}
+function resolveClipId(animation, clip, index) {
+  if (typeof animation.name === "string" && animation.name.length > 0) {
+    return animation.name;
+  }
+  if (clip?.name && clip.name.length > 0) {
+    return clip.name;
+  }
+  return `gltf-animation-${index}`;
+}
+function extractVizijAnimations(parserJson, clips) {
+  const animations = [];
+  if (!parserJson || typeof parserJson !== "object") {
+    return animations;
+  }
+  const robotNodeIndex = resolveRobotNodeIndex(parserJson);
+  if (robotNodeIndex.size === 0) {
+    return animations;
+  }
+  const json = parserJson;
+  const gltfAnimations = Array.isArray(json.animations) ? json.animations : [];
+  if (gltfAnimations.length === 0) {
+    return animations;
+  }
+  gltfAnimations.forEach((animation, animationIndex) => {
+    if (!animation || typeof animation !== "object") {
+      return;
+    }
+    const animationRecord = animation;
+    const channels = Array.isArray(animationRecord.channels) ? animationRecord.channels : [];
+    if (channels.length === 0) {
+      return;
+    }
+    const samplers = Array.isArray(animationRecord.samplers) ? animationRecord.samplers : [];
+    const clip = Array.isArray(clips) ? clips[animationIndex] : void 0;
+    const trackData = [];
+    channels.forEach((channel, channelIndex) => {
+      if (!channel || typeof channel !== "object") {
+        return;
+      }
+      const channelRecord = channel;
+      const target = channelRecord.target;
+      const nodeIndex = target && typeof target === "object" && typeof target.node === "number" ? target.node : void 0;
+      if (nodeIndex == null || !robotNodeIndex.has(nodeIndex)) {
+        return;
+      }
+      const robotNode = robotNodeIndex.get(nodeIndex);
+      const featureKey = resolveFeatureKey(target);
+      if (!featureKey) {
+        return;
+      }
+      const featureInfo = robotNode.features[featureKey];
+      if (!featureInfo) {
+        return;
+      }
+      const propertyName = mapChannelPathToProperty(
+        target && typeof target === "object" ? target.path : void 0
+      );
+      const track = resolveTrackForChannel(
+        clip,
+        channelIndex,
+        propertyName,
+        robotNode.nodeName
+      );
+      if (!track) {
+        return;
+      }
+      const samplerIndex = typeof channelRecord.sampler === "number" ? channelRecord.sampler : -1;
+      const sampler = samplerIndex >= 0 && samplerIndex < samplers.length ? samplers[samplerIndex] : void 0;
+      const interpolation = sampler && typeof sampler.interpolation === "string" ? sampler.interpolation : void 0;
+      let valueSize = typeof track.getValueSize === "function" ? track.getValueSize() : inferValueSize(featureInfo.valueType);
+      if (!Number.isFinite(valueSize) || valueSize <= 0) {
+        valueSize = inferValueSize(featureInfo.valueType);
+      }
+      const { component, componentIndex } = readComponentInfo(target);
+      trackData.push({
+        componentId: featureInfo.componentId,
+        feature: featureInfo.feature,
+        renderableId: robotNode.renderableId,
+        nodeIndex,
+        nodeName: robotNode.nodeName,
+        path: target && typeof target === "object" && typeof target.path === "string" ? target.path : void 0,
+        component,
+        componentIndex,
+        valueType: featureInfo.valueType,
+        valueSize,
+        interpolation,
+        times: toNumberArray(track.times),
+        values: toNumberArray(track.values)
+      });
+    });
+    if (trackData.length === 0) {
+      return;
+    }
+    animations.push({
+      id: resolveClipId(animationRecord, clip, animationIndex),
+      name: typeof animationRecord.name === "string" && animationRecord.name.length > 0 ? animationRecord.name : clip?.name,
+      duration: resolveClipDuration(clip, trackData),
+      index: animationIndex,
+      metadata: clonePlainObject(
+        animationRecord.extras
+      ),
+      tracks: trackData
+    });
+  });
+  return animations;
+}
+
 // src/functions/load-gltf.ts
 THREE5.Object3D.DEFAULT_UP.set(0, 0, 1);
 var EmptyModelError = class extends Error {
@@ -2692,9 +3071,10 @@ async function loadGLTF(url, namespaces, aggressiveImport = false, rootBounds) {
     actualizedNamespaces,
     aggressiveImport,
     rootBounds,
-    modelData?.parser?.json
+    modelData?.parser?.json,
+    modelData.animations
   );
-  return [asset.world, asset.animatables];
+  return [asset.world, asset.animatables, asset.animations];
 }
 async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, rootBounds) {
   const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
@@ -2707,7 +3087,7 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
         aggressiveImport,
         rootBounds
       );
-      return [asset.world, asset.animatables];
+      return [asset.world, asset.animatables, asset.animations];
     } finally {
       URL.revokeObjectURL(objectUrl);
     }
@@ -2726,9 +3106,10 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
             actualizedNamespaces,
             aggressiveImport,
             rootBounds,
-            gltf?.parser?.json
+            gltf?.parser?.json,
+            gltf.animations
           );
-          resolve([asset.world, asset.animatables]);
+          resolve([asset.world, asset.animatables, asset.animations]);
         } catch (error) {
           if (error instanceof Error) {
             reject(error);
@@ -2743,7 +3124,7 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
     );
   });
 }
-function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson) {
+function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson, clips) {
   const [world, animatables] = traverseThree(
     scene,
     namespaces,
@@ -2751,7 +3132,8 @@ function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson)
     rootBounds
   );
   const bundle = extractVizijBundle(scene, parserJson);
-  return { world, animatables, bundle };
+  const animations = extractVizijAnimations(parserJson, clips);
+  return { world, animatables, bundle, animations };
 }
 async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, rootBounds) {
   const modelLoader = new import_three_stdlib.GLTFLoader();
@@ -2763,7 +3145,8 @@ async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, roo
     actualizedNamespaces,
     aggressiveImport,
     rootBounds,
-    modelData?.parser?.json
+    modelData?.parser?.json,
+    modelData.animations
   );
 }
 async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = false, rootBounds) {
@@ -2795,7 +3178,8 @@ async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = f
             actualizedNamespaces,
             aggressiveImport,
             rootBounds,
-            gltf?.parser?.json
+            gltf?.parser?.json,
+            gltf.animations
           );
           resolve(asset);
         } catch (error) {

package/dist/index.mjs

@@ -6,7 +6,11 @@ import {
   useEffect as useEffect6
 } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { Object3D as Object3D4 } from "three";
+import {
+  Object3D as Object3D4,
+  SRGBColorSpace,
+  NoToneMapping
+} from "three";
 import { Canvas, useThree } from "@react-three/fiber";
 import { Line as Line3, OrthographicCamera, Text } from "@react-three/drei";
 import { useShallow as useShallow6 } from "zustand/react/shallow";
@@ -1767,6 +1771,11 @@ function Vizij({
         style,
         className,
         onPointerMissed,
+        gl: {
+          outputColorSpace: SRGBColorSpace,
+          toneMapping: NoToneMapping,
+          antialias: true
+        },
         children: /* @__PURE__ */ jsx6(
           MemoizedInnerVizij,
           {
@@ -1784,6 +1793,11 @@ function Vizij({
         style,
         className,
         onPointerMissed,
+        gl: {
+          outputColorSpace: SRGBColorSpace,
+          toneMapping: NoToneMapping,
+          antialias: true
+        },
         children: /* @__PURE__ */ jsx6(
           MemoizedInnerVizij,
           {
@@ -2674,6 +2688,375 @@ function applyVizijBundle(object, bundle) {
   };
 }
 
+// src/functions/gltf-loading/extract-animations.ts
+var CHANNEL_PATH_TO_TRACK_PROPERTY = {
+  translation: "position",
+  rotation: "quaternion",
+  scale: "scale",
+  weights: "morphTargetInfluences"
+};
+function isPlainObject(value) {
+  return Boolean(
+    value && typeof value === "object" && !Array.isArray(value) && Object.prototype.toString.call(value) === "[object Object]"
+  );
+}
+function clonePlainObject(value) {
+  if (!value) {
+    return void 0;
+  }
+  return JSON.parse(JSON.stringify(value));
+}
+function inferValueSize(valueType) {
+  switch (valueType) {
+    case "boolean":
+    case "number":
+    case "string":
+      return 1;
+    case "vector2":
+      return 2;
+    case "vector3":
+    case "euler":
+    case "rgb":
+    case "hsl":
+      return 3;
+    case "vector4":
+    case "quaternion":
+      return 4;
+    default:
+      return 1;
+  }
+}
+function componentNameToIndex(component) {
+  if (!component || typeof component !== "string") {
+    return void 0;
+  }
+  const normalized = component.trim().toLowerCase();
+  if (normalized.length === 0) {
+    return void 0;
+  }
+  const componentOrder = {
+    x: 0,
+    y: 1,
+    z: 2,
+    w: 3,
+    r: 0,
+    g: 1,
+    b: 2,
+    a: 3,
+    u: 0,
+    v: 1
+  };
+  return componentOrder[normalized];
+}
+function readComponentInfo(target) {
+  if (!target || typeof target !== "object") {
+    return {};
+  }
+  const sources = [];
+  const record = target;
+  const extensions = record.extensions;
+  if (extensions && typeof extensions === "object") {
+    const vizijChannel = extensions.VizijChannel;
+    if (isPlainObject(vizijChannel)) {
+      sources.push(vizijChannel);
+    }
+    const robotChannel = extensions.RobotChannel;
+    if (isPlainObject(robotChannel)) {
+      sources.push(robotChannel);
+    }
+  }
+  const extras = record.extras;
+  if (isPlainObject(extras)) {
+    sources.push(extras);
+  }
+  let component;
+  let componentIndex;
+  for (const source of sources) {
+    if (!isPlainObject(source)) {
+      continue;
+    }
+    if (typeof source.component === "string" && !component) {
+      component = source.component;
+    }
+    if (typeof source.axis === "string" && !component) {
+      component = source.axis;
+    }
+    if (typeof source.channel === "string" && !component) {
+      component = source.channel;
+    }
+    if (Object.prototype.hasOwnProperty.call(source, "componentIndex") && componentIndex == null) {
+      const value = source.componentIndex;
+      if (typeof value === "number") {
+        componentIndex = value;
+      }
+    }
+    if (Object.prototype.hasOwnProperty.call(source, "axisIndex") && componentIndex == null) {
+      const value = source.axisIndex;
+      if (typeof value === "number") {
+        componentIndex = value;
+      }
+    }
+  }
+  if (componentIndex == null) {
+    componentIndex = componentNameToIndex(component);
+  }
+  return { component, componentIndex };
+}
+function resolveRobotNodeIndex(parserJson) {
+  const indexMap = /* @__PURE__ */ new Map();
+  if (!parserJson || typeof parserJson !== "object") {
+    return indexMap;
+  }
+  const json = parserJson;
+  const nodes = Array.isArray(json.nodes) ? json.nodes : [];
+  nodes.forEach((node, nodeIndex) => {
+    if (!node || typeof node !== "object") {
+      return;
+    }
+    const extensions = node.extensions;
+    if (!extensions || typeof extensions !== "object") {
+      return;
+    }
+    const robotData = extensions.RobotData;
+    if (!robotData || typeof robotData !== "object") {
+      return;
+    }
+    const renderableId = typeof robotData.id === "string" ? robotData.id : void 0;
+    if (!renderableId) {
+      return;
+    }
+    const nodeName = typeof node.name === "string" && node.name.length > 0 ? node.name : void 0;
+    const features = {};
+    const robotFeatures = robotData.features;
+    if (robotFeatures && typeof robotFeatures === "object") {
+      Object.entries(robotFeatures).forEach(
+        ([featureKey, featureValue]) => {
+          if (!featureValue || typeof featureValue !== "object" || !featureValue.animated) {
+            return;
+          }
+          const value = featureValue.value;
+          const componentId = value && typeof value === "object" && typeof value.id === "string" ? value.id : void 0;
+          if (!componentId) {
+            return;
+          }
+          const valueType = value && typeof value === "object" && typeof value.type === "string" ? value.type : void 0;
+          features[featureKey] = {
+            feature: featureKey,
+            componentId,
+            valueType
+          };
+        }
+      );
+    }
+    indexMap.set(nodeIndex, {
+      renderableId,
+      nodeName,
+      features
+    });
+  });
+  return indexMap;
+}
+function mapChannelPathToProperty(path) {
+  if (typeof path !== "string") {
+    return void 0;
+  }
+  return CHANNEL_PATH_TO_TRACK_PROPERTY[path] ?? path;
+}
+function resolveFeatureKey(channelTarget) {
+  if (!channelTarget || typeof channelTarget !== "object") {
+    return void 0;
+  }
+  const target = channelTarget;
+  const extensions = target.extensions;
+  if (extensions && typeof extensions === "object") {
+    const vizij = extensions.VizijChannel;
+    if (isPlainObject(vizij)) {
+      const feature = vizij.feature;
+      if (typeof feature === "string") {
+        return feature;
+      }
+    }
+    const robot = extensions.RobotChannel;
+    if (isPlainObject(robot)) {
+      const feature = robot.feature;
+      if (typeof feature === "string") {
+        return feature;
+      }
+    }
+  }
+  const extras = target.extras;
+  if (isPlainObject(extras)) {
+    const feature = extras.feature;
+    if (typeof feature === "string") {
+      return feature;
+    }
+    const channel = extras.channel;
+    if (typeof channel === "string") {
+      return channel;
+    }
+  }
+  const path = target.path;
+  return typeof path === "string" ? path : void 0;
+}
+function resolveTrackForChannel(clip, channelIndex, expectedProperty, nodeName) {
+  if (!clip) {
+    return void 0;
+  }
+  const orderedTrack = clip.tracks[channelIndex];
+  if (orderedTrack) {
+    return orderedTrack;
+  }
+  if (!expectedProperty) {
+    return void 0;
+  }
+  const property = expectedProperty;
+  const matches = (track) => {
+    const name = track?.name ?? "";
+    if (!name) {
+      return false;
+    }
+    if (nodeName && name === `${nodeName}.${property}`) {
+      return true;
+    }
+    if (nodeName && name.startsWith(`${nodeName}.`) && name.endsWith(property)) {
+      return true;
+    }
+    if (!nodeName && name.endsWith(property)) {
+      return true;
+    }
+    return false;
+  };
+  return clip.tracks.find(matches);
+}
+function toNumberArray(arrayLike) {
+  if (!arrayLike) {
+    return [];
+  }
+  return Array.from(arrayLike, (value) => Number(value));
+}
+function resolveClipDuration(clip, tracks) {
+  if (clip && Number.isFinite(clip.duration) && clip.duration >= 0) {
+    return clip.duration;
+  }
+  let maxTime = 0;
+  tracks.forEach((track) => {
+    if (!track.times.length) {
+      return;
+    }
+    const lastTime = track.times[track.times.length - 1] ?? 0;
+    if (lastTime > maxTime) {
+      maxTime = lastTime;
+    }
+  });
+  return maxTime;
+}
+function resolveClipId(animation, clip, index) {
+  if (typeof animation.name === "string" && animation.name.length > 0) {
+    return animation.name;
+  }
+  if (clip?.name && clip.name.length > 0) {
+    return clip.name;
+  }
+  return `gltf-animation-${index}`;
+}
+function extractVizijAnimations(parserJson, clips) {
+  const animations = [];
+  if (!parserJson || typeof parserJson !== "object") {
+    return animations;
+  }
+  const robotNodeIndex = resolveRobotNodeIndex(parserJson);
+  if (robotNodeIndex.size === 0) {
+    return animations;
+  }
+  const json = parserJson;
+  const gltfAnimations = Array.isArray(json.animations) ? json.animations : [];
+  if (gltfAnimations.length === 0) {
+    return animations;
+  }
+  gltfAnimations.forEach((animation, animationIndex) => {
+    if (!animation || typeof animation !== "object") {
+      return;
+    }
+    const animationRecord = animation;
+    const channels = Array.isArray(animationRecord.channels) ? animationRecord.channels : [];
+    if (channels.length === 0) {
+      return;
+    }
+    const samplers = Array.isArray(animationRecord.samplers) ? animationRecord.samplers : [];
+    const clip = Array.isArray(clips) ? clips[animationIndex] : void 0;
+    const trackData = [];
+    channels.forEach((channel, channelIndex) => {
+      if (!channel || typeof channel !== "object") {
+        return;
+      }
+      const channelRecord = channel;
+      const target = channelRecord.target;
+      const nodeIndex = target && typeof target === "object" && typeof target.node === "number" ? target.node : void 0;
+      if (nodeIndex == null || !robotNodeIndex.has(nodeIndex)) {
+        return;
+      }
+      const robotNode = robotNodeIndex.get(nodeIndex);
+      const featureKey = resolveFeatureKey(target);
+      if (!featureKey) {
+        return;
+      }
+      const featureInfo = robotNode.features[featureKey];
+      if (!featureInfo) {
+        return;
+      }
+      const propertyName = mapChannelPathToProperty(
+        target && typeof target === "object" ? target.path : void 0
+      );
+      const track = resolveTrackForChannel(
+        clip,
+        channelIndex,
+        propertyName,
+        robotNode.nodeName
+      );
+      if (!track) {
+        return;
+      }
+      const samplerIndex = typeof channelRecord.sampler === "number" ? channelRecord.sampler : -1;
+      const sampler = samplerIndex >= 0 && samplerIndex < samplers.length ? samplers[samplerIndex] : void 0;
+      const interpolation = sampler && typeof sampler.interpolation === "string" ? sampler.interpolation : void 0;
+      let valueSize = typeof track.getValueSize === "function" ? track.getValueSize() : inferValueSize(featureInfo.valueType);
+      if (!Number.isFinite(valueSize) || valueSize <= 0) {
+        valueSize = inferValueSize(featureInfo.valueType);
+      }
+      const { component, componentIndex } = readComponentInfo(target);
+      trackData.push({
+        componentId: featureInfo.componentId,
+        feature: featureInfo.feature,
+        renderableId: robotNode.renderableId,
+        nodeIndex,
+        nodeName: robotNode.nodeName,
+        path: target && typeof target === "object" && typeof target.path === "string" ? target.path : void 0,
+        component,
+        componentIndex,
+        valueType: featureInfo.valueType,
+        valueSize,
+        interpolation,
+        times: toNumberArray(track.times),
+        values: toNumberArray(track.values)
+      });
+    });
+    if (trackData.length === 0) {
+      return;
+    }
+    animations.push({
+      id: resolveClipId(animationRecord, clip, animationIndex),
+      name: typeof animationRecord.name === "string" && animationRecord.name.length > 0 ? animationRecord.name : clip?.name,
+      duration: resolveClipDuration(clip, trackData),
+      index: animationIndex,
+      metadata: clonePlainObject(
+        animationRecord.extras
+      ),
+      tracks: trackData
+    });
+  });
+  return animations;
+}
+
 // src/functions/load-gltf.ts
 THREE5.Object3D.DEFAULT_UP.set(0, 0, 1);
 var EmptyModelError = class extends Error {
@@ -2692,9 +3075,10 @@ async function loadGLTF(url, namespaces, aggressiveImport = false, rootBounds) {
     actualizedNamespaces,
     aggressiveImport,
     rootBounds,
-    modelData?.parser?.json
+    modelData?.parser?.json,
+    modelData.animations
   );
-  return [asset.world, asset.animatables];
+  return [asset.world, asset.animatables, asset.animations];
 }
 async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, rootBounds) {
   const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
@@ -2707,7 +3091,7 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
         aggressiveImport,
         rootBounds
       );
-      return [asset.world, asset.animatables];
+      return [asset.world, asset.animatables, asset.animations];
     } finally {
       URL.revokeObjectURL(objectUrl);
     }
@@ -2726,9 +3110,10 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
             actualizedNamespaces,
             aggressiveImport,
             rootBounds,
-            gltf?.parser?.json
+            gltf?.parser?.json,
+            gltf.animations
           );
-          resolve([asset.world, asset.animatables]);
+          resolve([asset.world, asset.animatables, asset.animations]);
         } catch (error) {
           if (error instanceof Error) {
             reject(error);
@@ -2743,7 +3128,7 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
     );
   });
 }
-function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson) {
+function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson, clips) {
   const [world, animatables] = traverseThree(
     scene,
     namespaces,
@@ -2751,7 +3136,8 @@ function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson)
     rootBounds
   );
   const bundle = extractVizijBundle(scene, parserJson);
-  return { world, animatables, bundle };
+  const animations = extractVizijAnimations(parserJson, clips);
+  return { world, animatables, bundle, animations };
 }
 async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, rootBounds) {
   const modelLoader = new GLTFLoader();
@@ -2763,7 +3149,8 @@ async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, roo
     actualizedNamespaces,
     aggressiveImport,
     rootBounds,
-    modelData?.parser?.json
+    modelData?.parser?.json,
+    modelData.animations
   );
 }
 async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = false, rootBounds) {
@@ -2795,7 +3182,8 @@ async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = f
             actualizedNamespaces,
             aggressiveImport,
             rootBounds,
-            gltf?.parser?.json
+            gltf?.parser?.json,
+            gltf.animations
           );
           resolve(asset);
         } catch (error) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizij/render",
   "description": "Higher-level visualization and interaction components for robot and ai faces.",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",