@vizij/runtime-react 0.0.1

package/dist/index.mjs

@@ -0,0 +1,1054 @@
+// src/VizijRuntimeProvider.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { VizijContext, createVizijStore } from "@vizij/render";
+import {
+  OrchestratorProvider,
+  useOrchestrator,
+  useOrchFrame
+} from "@vizij/orchestrator-react";
+import { valueAsNumber as valueAsNumber2 } from "@vizij/value-json";
+
+// src/context.ts
+import { createContext } from "react";
+var VizijRuntimeContext = createContext(null);
+
+// src/utils/graph.ts
+function getNodes(spec) {
+  if (!spec || typeof spec !== "object") {
+    return [];
+  }
+  const maybeNodes = spec.nodes;
+  if (!Array.isArray(maybeNodes)) {
+    return [];
+  }
+  return maybeNodes;
+}
+function collectOutputPaths(spec) {
+  const nodes = getNodes(spec);
+  const outputs = /* @__PURE__ */ new Set();
+  nodes.forEach((node) => {
+    if (typeof node !== "object" || !node) {
+      return;
+    }
+    if (String(node.type ?? "").toLowerCase() !== "output") {
+      return;
+    }
+    const path = node.params?.path;
+    if (typeof path === "string" && path.trim()) {
+      outputs.add(path.trim());
+    }
+  });
+  return Array.from(outputs);
+}
+function collectInputPaths(spec) {
+  const nodes = getNodes(spec);
+  const inputs = /* @__PURE__ */ new Set();
+  nodes.forEach((node) => {
+    if (String(node.type ?? "").toLowerCase() !== "input") {
+      return;
+    }
+    const path = node.params?.path;
+    if (typeof path === "string" && path.trim()) {
+      inputs.add(path.trim());
+    }
+  });
+  return Array.from(inputs);
+}
+function collectInputPathMap(spec) {
+  const map = {};
+  const nodes = getNodes(spec);
+  nodes.forEach((node) => {
+    if (String(node.type ?? "").toLowerCase() !== "input") {
+      return;
+    }
+    const path = node.params?.path;
+    if (typeof path !== "string" || !path.trim()) {
+      return;
+    }
+    const id = String(node.id ?? "");
+    const key = id.startsWith("input_") ? id.slice("input_".length) : id || path.trim();
+    map[key] = path.trim();
+  });
+  return map;
+}
+
+// src/utils/valueConversion.ts
+import {
+  isNormalizedValue,
+  valueAsBool,
+  valueAsColorRgba,
+  valueAsNumber,
+  valueAsText,
+  valueAsTransform,
+  valueAsVector
+} from "@vizij/value-json";
+function numericArrayToRaw(arr) {
+  const normalised = arr.map((entry) => Number(entry ?? 0));
+  switch (normalised.length) {
+    case 2:
+      return {
+        x: normalised[0],
+        y: normalised[1],
+        r: normalised[0],
+        g: normalised[1]
+      };
+    case 3:
+      return {
+        x: normalised[0],
+        y: normalised[1],
+        z: normalised[2],
+        r: normalised[0],
+        g: normalised[1],
+        b: normalised[2]
+      };
+    case 4:
+      return {
+        x: normalised[0],
+        y: normalised[1],
+        z: normalised[2],
+        w: normalised[3],
+        r: normalised[0],
+        g: normalised[1],
+        b: normalised[2],
+        a: normalised[3]
+      };
+    default:
+      return normalised;
+  }
+}
+function valueJSONToRaw(value) {
+  if (value == null) {
+    return void 0;
+  }
+  if (typeof value === "number" || typeof value === "string" || typeof value === "boolean") {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value.map((entry) => valueJSONToRaw(entry));
+  }
+  if (typeof value === "object" && !("type" in value)) {
+    const entries = Object.entries(value).map(([key, entry]) => [
+      key,
+      valueJSONToRaw(entry)
+    ]);
+    return Object.fromEntries(entries);
+  }
+  if (!isNormalizedValue(value)) {
+    return void 0;
+  }
+  switch (value.type) {
+    case "float": {
+      const num = valueAsNumber(value);
+      return typeof num === "number" ? num : void 0;
+    }
+    case "bool": {
+      const boolVal = valueAsBool(value);
+      return typeof boolVal === "boolean" ? boolVal : void 0;
+    }
+    case "text": {
+      const text = valueAsText(value);
+      return typeof text === "string" ? text : void 0;
+    }
+    case "vec2":
+    case "vec3":
+    case "vec4":
+    case "quat":
+    case "vector": {
+      const vec = valueAsVector(value);
+      return vec ? numericArrayToRaw(vec) : void 0;
+    }
+    case "colorrgba": {
+      const color = valueAsColorRgba(value);
+      if (!color) {
+        return void 0;
+      }
+      const [r = 0, g = 0, b = 0, a = 1] = color;
+      return { r, g, b, a };
+    }
+    case "transform": {
+      const transform = valueAsTransform(value);
+      if (!transform) {
+        return void 0;
+      }
+      return {
+        translation: numericArrayToRaw(transform.translation),
+        rotation: numericArrayToRaw(transform.rotation),
+        scale: numericArrayToRaw(transform.scale)
+      };
+    }
+    case "record": {
+      const entries = Object.entries(value.data ?? {}).map(([key, entry]) => [
+        key,
+        valueJSONToRaw(entry)
+      ]);
+      return Object.fromEntries(entries);
+    }
+    case "enum": {
+      const [tag, inner] = value.data;
+      return {
+        tag,
+        value: valueJSONToRaw(inner)
+      };
+    }
+    default:
+      return void 0;
+  }
+}
+
+// src/VizijRuntimeProvider.tsx
+import { loadGLTF, loadGLTFFromBlob } from "@vizij/render";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_MERGE = {
+  outputs: "add",
+  intermediate: "add"
+};
+var DEFAULT_DURATION = 0.35;
+var EASINGS = {
+  linear: (t) => t,
+  easeIn: (t) => t * t,
+  easeOut: (t) => 1 - (1 - t) * (1 - t),
+  easeInOut: (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2
+};
+function resolveEasing(easing) {
+  if (typeof easing === "function") {
+    return easing;
+  }
+  if (typeof easing === "string" && easing in EASINGS) {
+    return EASINGS[easing];
+  }
+  return EASINGS.linear;
+}
+function findRootId(world) {
+  for (const entry of Object.values(world)) {
+    if (entry && typeof entry === "object" && entry.type === "group" && entry.rootBounds && entry.id) {
+      return entry.id;
+    }
+  }
+  return null;
+}
+function normalisePath(path) {
+  if (!path) {
+    return path;
+  }
+  return path.startsWith("debug/") ? path.slice("debug/".length) : path;
+}
+function VizijRuntimeProvider({
+  assetBundle,
+  children,
+  namespace: namespaceProp,
+  faceId: faceIdProp,
+  autoCreate = true,
+  createOptions,
+  autostart = false,
+  mergeStrategy,
+  onRegisterControllers,
+  onStatusChange
+}) {
+  const storeRef = useRef();
+  if (!storeRef.current) {
+    storeRef.current = createVizijStore();
+  }
+  return /* @__PURE__ */ jsx(VizijContext.Provider, { value: storeRef.current, children: /* @__PURE__ */ jsx(
+    OrchestratorProvider,
+    {
+      autoCreate,
+      createOptions,
+      autostart,
+      children: /* @__PURE__ */ jsx(
+        VizijRuntimeProviderInner,
+        {
+          assetBundle,
+          namespace: namespaceProp,
+          faceId: faceIdProp,
+          autoCreate,
+          mergeStrategy,
+          onRegisterControllers,
+          onStatusChange,
+          store: storeRef.current,
+          children
+        }
+      )
+    }
+  ) });
+}
+function VizijRuntimeProviderInner({
+  assetBundle,
+  namespace: namespaceProp,
+  faceId: faceIdProp,
+  mergeStrategy,
+  onRegisterControllers,
+  onStatusChange,
+  store,
+  children,
+  autoCreate
+}) {
+  const {
+    ready,
+    createOrchestrator,
+    registerGraph,
+    registerMergedGraph,
+    registerAnimation,
+    removeGraph,
+    removeAnimation,
+    listControllers,
+    setInput,
+    getPathSnapshot,
+    step: stepRuntime
+  } = useOrchestrator();
+  const frame = useOrchFrame();
+  const namespace = namespaceProp ?? assetBundle.namespace ?? "default";
+  const faceId = faceIdProp ?? assetBundle.faceId ?? assetBundle.pose?.config?.faceId ?? assetBundle.pose?.config?.faceId ?? void 0;
+  const [status, setStatus] = useState({
+    loading: true,
+    ready: false,
+    error: null,
+    errors: [],
+    namespace,
+    faceId,
+    rootId: null,
+    outputPaths: [],
+    controllers: { graphs: [], anims: [] }
+  });
+  const errorsRef = useRef([]);
+  const outputPathsRef = useRef(/* @__PURE__ */ new Set());
+  const rigInputMapRef = useRef({});
+  const registeredGraphsRef = useRef([]);
+  const registeredAnimationsRef = useRef([]);
+  const mergedGraphRef = useRef(null);
+  const animationTweensRef = useRef(/* @__PURE__ */ new Map());
+  const clipPlaybackRef = useRef(/* @__PURE__ */ new Map());
+  const rafHandleRef = useRef(null);
+  const lastFrameTimeRef = useRef(null);
+  const reportStatus = useCallback(
+    (updater) => {
+      setStatus((prev) => {
+        const next = updater(prev);
+        onStatusChange?.(next);
+        return next;
+      });
+    },
+    [onStatusChange]
+  );
+  const pushError = useCallback(
+    (error) => {
+      errorsRef.current = [...errorsRef.current, error];
+      reportStatus((prev) => ({
+        ...prev,
+        error,
+        errors: errorsRef.current
+      }));
+      console.warn("[vizij-runtime]", error.message, error.cause);
+    },
+    [reportStatus]
+  );
+  const resetErrors = useCallback(() => {
+    errorsRef.current = [];
+    reportStatus((prev) => ({
+      ...prev,
+      error: null,
+      errors: []
+    }));
+  }, [reportStatus]);
+  const clearControllers = useCallback(() => {
+    const existing = listControllers();
+    existing.graphs.forEach((id) => {
+      try {
+        removeGraph(id);
+      } catch (err) {
+        pushError({
+          message: `Failed to remove graph ${id}`,
+          cause: err,
+          phase: "registration",
+          timestamp: performance.now()
+        });
+      }
+    });
+    existing.anims.forEach((id) => {
+      try {
+        removeAnimation(id);
+      } catch (err) {
+        pushError({
+          message: `Failed to remove animation ${id}`,
+          cause: err,
+          phase: "registration",
+          timestamp: performance.now()
+        });
+      }
+    });
+    registeredGraphsRef.current = [];
+    registeredAnimationsRef.current = [];
+    mergedGraphRef.current = null;
+  }, [listControllers, removeAnimation, removeGraph, pushError]);
+  useEffect(() => {
+    reportStatus((prev) => ({
+      ...prev,
+      namespace,
+      faceId
+    }));
+  }, [namespace, faceId, reportStatus]);
+  useEffect(() => {
+    let cancelled = false;
+    resetErrors();
+    reportStatus((prev) => ({
+      ...prev,
+      loading: true,
+      rootId: null,
+      ready: false,
+      outputPaths: [],
+      controllers: { graphs: [], anims: [] }
+    }));
+    const loadAssets = async () => {
+      try {
+        let world;
+        let animatables;
+        if (assetBundle.glb.kind === "url") {
+          [world, animatables] = await loadGLTF(
+            assetBundle.glb.src,
+            [namespace],
+            assetBundle.glb.aggressiveImport ?? false,
+            assetBundle.glb.rootBounds
+          );
+        } else if (assetBundle.glb.kind === "blob") {
+          [world, animatables] = await loadGLTFFromBlob(
+            assetBundle.glb.blob,
+            [namespace],
+            assetBundle.glb.aggressiveImport ?? false,
+            assetBundle.glb.rootBounds
+          );
+        } else {
+          world = assetBundle.glb.world;
+          animatables = assetBundle.glb.animatables;
+        }
+        if (cancelled) {
+          return;
+        }
+        const rootId = findRootId(world);
+        store.getState().addWorldElements(world, animatables, true);
+        reportStatus((prev) => ({
+          ...prev,
+          loading: false,
+          rootId,
+          namespace,
+          faceId
+        }));
+      } catch (err) {
+        if (cancelled) {
+          return;
+        }
+        pushError({
+          message: "Failed to load Vizij assets",
+          cause: err,
+          phase: "assets",
+          timestamp: performance.now()
+        });
+        reportStatus((prev) => ({
+          ...prev,
+          loading: false
+        }));
+      }
+    };
+    loadAssets();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    assetBundle,
+    namespace,
+    faceId,
+    store,
+    pushError,
+    reportStatus,
+    resetErrors
+  ]);
+  useEffect(() => {
+    if (!ready && autoCreate) {
+      createOrchestrator().catch((err) => {
+        pushError({
+          message: "Failed to create orchestrator runtime",
+          cause: err,
+          phase: "orchestrator",
+          timestamp: performance.now()
+        });
+      });
+    }
+  }, [ready, autoCreate, createOrchestrator, pushError]);
+  const registerControllers = useCallback(async () => {
+    const normalize = (spec) => spec;
+    const rigSpec = normalize(assetBundle.rig.spec);
+    const rigOutputs = collectOutputPaths(rigSpec);
+    const rigInputs = collectInputPaths(rigSpec);
+    rigInputMapRef.current = collectInputPathMap(rigSpec);
+    outputPathsRef.current = new Set(rigOutputs);
+    const rigConfig = {
+      id: assetBundle.rig.id,
+      spec: rigSpec,
+      subs: assetBundle.rig.subscriptions ?? {
+        inputs: rigInputs,
+        outputs: rigOutputs
+      }
+    };
+    const graphConfigs = [rigConfig];
+    if (assetBundle.pose?.graph) {
+      const poseSpec = normalize(assetBundle.pose.graph.spec);
+      const poseOutputs = collectOutputPaths(poseSpec);
+      const poseInputs = collectInputPaths(poseSpec);
+      graphConfigs.push({
+        id: assetBundle.pose.graph.id,
+        spec: poseSpec,
+        subs: assetBundle.pose.graph.subscriptions ?? {
+          inputs: poseInputs,
+          outputs: poseOutputs
+        }
+      });
+    }
+    clearControllers();
+    const graphIds = [];
+    try {
+      if (graphConfigs.length > 1) {
+        const mergedId = registerMergedGraph({
+          graphs: graphConfigs,
+          strategy: mergeStrategy ?? DEFAULT_MERGE
+        });
+        mergedGraphRef.current = mergedId;
+        graphIds.push(mergedId);
+      } else {
+        graphConfigs.forEach((cfg) => {
+          const id = registerGraph(cfg);
+          graphIds.push(id);
+        });
+      }
+    } catch (err) {
+      pushError({
+        message: "Failed to register rig graphs",
+        cause: err,
+        phase: "registration",
+        timestamp: performance.now()
+      });
+    }
+    registeredGraphsRef.current = graphIds;
+    const animationIds = [];
+    for (const anim of assetBundle.animations ?? []) {
+      try {
+        const config = {
+          id: anim.id,
+          setup: {
+            animation: anim.clip,
+            ...anim.setup ?? {}
+          }
+        };
+        const id = registerAnimation(config);
+        animationIds.push(id);
+      } catch (err) {
+        pushError({
+          message: `Failed to register animation ${anim.id}`,
+          cause: err,
+          phase: "animation",
+          timestamp: performance.now()
+        });
+      }
+    }
+    registeredAnimationsRef.current = animationIds;
+    if (assetBundle.initialInputs) {
+      Object.entries(assetBundle.initialInputs).forEach(([path, value]) => {
+        try {
+          setInput(path, value);
+        } catch (err) {
+          pushError({
+            message: `Failed to stage initial input ${path}`,
+            cause: err,
+            phase: "registration",
+            timestamp: performance.now()
+          });
+        }
+      });
+    }
+    const controllers = listControllers();
+    reportStatus((prev) => ({
+      ...prev,
+      ready: true,
+      controllers,
+      outputPaths: Array.from(outputPathsRef.current)
+    }));
+    onRegisterControllers?.(controllers);
+  }, [
+    assetBundle,
+    clearControllers,
+    listControllers,
+    mergeStrategy,
+    onRegisterControllers,
+    pushError,
+    registerAnimation,
+    registerGraph,
+    registerMergedGraph,
+    reportStatus,
+    setInput
+  ]);
+  useEffect(() => {
+    if (!ready || status.loading) {
+      return;
+    }
+    registerControllers().catch((err) => {
+      pushError({
+        message: "Failed to register controllers",
+        cause: err,
+        phase: "registration",
+        timestamp: performance.now()
+      });
+    });
+  }, [ready, status.loading, registerControllers, pushError]);
+  useEffect(() => {
+    if (!frame) {
+      return;
+    }
+    const writes = frame.merged_writes ?? [];
+    if (!writes.length) {
+      return;
+    }
+    const setWorldValue = store.getState().setValue;
+    const namespaceValue = status.namespace;
+    writes.forEach((write) => {
+      const path = normalisePath(write.path);
+      if (!outputPathsRef.current.has(path)) {
+        return;
+      }
+      const raw = valueJSONToRaw(write.value);
+      if (raw === void 0) {
+        return;
+      }
+      setWorldValue(path, namespaceValue, raw);
+    });
+  }, [frame, status.namespace, store]);
+  const stagePoseNeutral = useCallback(
+    (force = false) => {
+      const neutral = assetBundle.pose?.config?.neutralInputs ?? {};
+      const rigMap = rigInputMapRef.current;
+      const staged = /* @__PURE__ */ new Set();
+      Object.entries(neutral).forEach(([id, value]) => {
+        const path = rigMap[id];
+        if (!path) {
+          return;
+        }
+        const include = assetBundle.pose?.stageNeutralFilter;
+        if (include && !include(id, path)) {
+          return;
+        }
+        setInput(path, { float: Number.isFinite(value) ? value : 0 });
+        staged.add(path);
+      });
+      if (force) {
+        Object.entries(rigMap).forEach(([id, path]) => {
+          if (staged.has(path)) {
+            return;
+          }
+          const include = assetBundle.pose?.stageNeutralFilter;
+          if (include && !include(id, path)) {
+            return;
+          }
+          setInput(path, { float: 0 });
+        });
+      }
+    },
+    [assetBundle.pose?.config?.neutralInputs, setInput]
+  );
+  const setRendererValue = useCallback(
+    (id, ns, value) => {
+      store.getState().setValue(id, ns, value);
+    },
+    [store]
+  );
+  const cancelAnimation = useCallback((path) => {
+    if (animationTweensRef.current.has(path)) {
+      const entry = animationTweensRef.current.get(path);
+      animationTweensRef.current.delete(path);
+      entry?.resolve();
+    }
+  }, []);
+  const scheduleLoop = useCallback(() => {
+    if (rafHandleRef.current !== null) {
+      return;
+    }
+    const tick = (timestamp) => {
+      if (lastFrameTimeRef.current == null) {
+        lastFrameTimeRef.current = timestamp;
+      }
+      const dt = Math.max(0, (timestamp - lastFrameTimeRef.current) / 1e3);
+      lastFrameTimeRef.current = timestamp;
+      advanceAnimationTweens(dt);
+      advanceClipPlayback(dt);
+      if (animationTweensRef.current.size > 0 || clipPlaybackRef.current.size > 0) {
+        rafHandleRef.current = requestAnimationFrame(tick);
+      } else {
+        rafHandleRef.current = null;
+        lastFrameTimeRef.current = null;
+      }
+    };
+    rafHandleRef.current = requestAnimationFrame(tick);
+  }, []);
+  const advanceAnimationTweens = useCallback(
+    (dt) => {
+      if (animationTweensRef.current.size === 0) {
+        return;
+      }
+      const map = animationTweensRef.current;
+      const toDelete = [];
+      map.forEach((state, key) => {
+        state.elapsed += dt;
+        const progress = state.duration === 0 ? 1 : Math.min(state.elapsed / state.duration, 1);
+        const eased = state.easing(progress);
+        const value = state.from + (state.to - state.from) * eased;
+        setInput(state.path, { float: value });
+        if (progress >= 1) {
+          toDelete.push(key);
+          state.resolve();
+        }
+      });
+      toDelete.forEach((key) => map.delete(key));
+    },
+    [setInput]
+  );
+  const sampleTrack = useCallback(
+    (track, time) => {
+      const keyframes = Array.isArray(track.keyframes) ? track.keyframes : [];
+      if (!keyframes.length) {
+        return 0;
+      }
+      const first = keyframes[0];
+      if (!first) {
+        return 0;
+      }
+      if (time <= Number(first.time ?? 0)) {
+        return Number(first.value ?? 0);
+      }
+      for (let i = 0; i < keyframes.length - 1; i += 1) {
+        const current = keyframes[i] ?? {};
+        const next = keyframes[i + 1] ?? {};
+        const start = Number(current.time ?? 0);
+        const end = Number(next.time ?? start);
+        if (time >= start && time <= end) {
+          const range = end - start || 1;
+          const factor = (time - start) / range;
+          const currentValue = Number(current.value ?? 0);
+          const nextValue = Number(next.value ?? currentValue);
+          return currentValue + (nextValue - currentValue) * factor;
+        }
+      }
+      const last = keyframes[keyframes.length - 1];
+      return Number(last?.value ?? 0);
+    },
+    []
+  );
+  const advanceClipPlayback = useCallback(
+    (dt) => {
+      if (clipPlaybackRef.current.size === 0) {
+        return;
+      }
+      const map = clipPlaybackRef.current;
+      const toDelete = [];
+      map.forEach((state, key) => {
+        state.time += dt * state.speed;
+        const clip = assetBundle.animations?.find(
+          (anim) => anim.id === state.id
+        );
+        if (!clip) {
+          toDelete.push(key);
+          state.resolve();
+          return;
+        }
+        const clipData = clip.clip;
+        const duration = Number(clipData?.duration ?? state.duration);
+        state.duration = Number.isFinite(duration) && duration > 0 ? duration : state.duration;
+        if (state.time >= state.duration) {
+          toDelete.push(key);
+          state.time = state.duration;
+        }
+        const tracks = Array.isArray(clipData?.tracks) ? clipData.tracks : [];
+        tracks.forEach((track) => {
+          const value = sampleTrack(track, state.time) * state.weight;
+          const path = `animation/${clip.id}/${track.channel}`;
+          setInput(path, { float: value });
+        });
+        if (toDelete.includes(key)) {
+          state.resolve();
+        }
+      });
+      toDelete.forEach((key) => {
+        clipPlaybackRef.current.delete(key);
+        const clip = assetBundle.animations?.find((anim) => anim.id === key);
+        if (clip) {
+          const clipData = clip.clip;
+          const tracks = Array.isArray(clipData?.tracks) ? clipData.tracks : [];
+          tracks.forEach((track) => {
+            const path = `animation/${clip.id}/${track.channel}`;
+            setInput(path, { float: 0 });
+          });
+        }
+      });
+    },
+    [assetBundle.animations, sampleTrack, setInput]
+  );
+  const animateValue = useCallback(
+    (path, target, options) => {
+      const easing = resolveEasing(options?.easing);
+      const duration = Math.max(0, options?.duration ?? DEFAULT_DURATION);
+      cancelAnimation(path);
+      const current = getPathSnapshot(path);
+      const fromValue = valueAsNumber2(current);
+      const toValue = valueAsNumber2(target);
+      if (fromValue == null || toValue == null || duration === 0) {
+        setInput(path, target);
+        return Promise.resolve();
+      }
+      return new Promise((resolve) => {
+        animationTweensRef.current.set(path, {
+          path,
+          from: fromValue,
+          to: toValue,
+          duration,
+          elapsed: 0,
+          easing,
+          resolve
+        });
+        scheduleLoop();
+      });
+    },
+    [cancelAnimation, getPathSnapshot, scheduleLoop, setInput]
+  );
+  const playAnimation = useCallback(
+    (id, options) => {
+      const clip = assetBundle.animations?.find((anim) => anim.id === id);
+      if (!clip) {
+        return Promise.reject(
+          new Error(`Animation ${id} is not part of the current asset bundle.`)
+        );
+      }
+      if (clipPlaybackRef.current.has(id)) {
+        clipPlaybackRef.current.delete(id);
+      }
+      return new Promise((resolve) => {
+        const speed = options?.speed ?? 1;
+        const weight = options?.weight ?? clip.weight ?? 1;
+        const clipData = clip.clip;
+        clipPlaybackRef.current.set(id, {
+          id,
+          time: options?.reset ? 0 : 0,
+          duration: Number(clipData?.duration ?? 0),
+          speed: Number.isFinite(speed) && speed > 0 ? speed : 1,
+          weight,
+          resolve
+        });
+        scheduleLoop();
+      });
+    },
+    [assetBundle.animations, scheduleLoop]
+  );
+  const stopAnimation = useCallback(
+    (id) => {
+      const clip = assetBundle.animations?.find((anim) => anim.id === id);
+      const state = clipPlaybackRef.current.get(id);
+      if (state) {
+        clipPlaybackRef.current.delete(id);
+        state.resolve();
+      }
+      if (clip) {
+        const clipData = clip.clip;
+        const tracks = Array.isArray(clipData?.tracks) ? clipData.tracks : [];
+        tracks.forEach((track) => {
+          const path = `animation/${clip.id}/${track.channel}`;
+          setInput(path, { float: 0 });
+        });
+      }
+    },
+    [assetBundle.animations, setInput]
+  );
+  const registerInputDriver = useCallback(
+    (id, factory) => {
+      const driver = factory({
+        setInput,
+        setRendererValue,
+        namespace,
+        faceId
+      });
+      const wrapped = {
+        start: () => {
+          try {
+            driver.start();
+          } catch (err) {
+            pushError({
+              message: `Input driver ${id} failed to start`,
+              cause: err,
+              phase: "driver",
+              timestamp: performance.now()
+            });
+          }
+        },
+        stop: () => {
+          try {
+            driver.stop();
+          } catch (err) {
+            pushError({
+              message: `Input driver ${id} failed to stop`,
+              cause: err,
+              phase: "driver",
+              timestamp: performance.now()
+            });
+          }
+        },
+        dispose: () => {
+          try {
+            driver.dispose();
+          } catch (err) {
+            pushError({
+              message: `Input driver ${id} failed to dispose`,
+              cause: err,
+              phase: "driver",
+              timestamp: performance.now()
+            });
+          }
+        }
+      };
+      return wrapped;
+    },
+    [faceId, namespace, pushError, setInput, setRendererValue]
+  );
+  const advanceAnimations = useCallback(
+    (dt) => {
+      advanceAnimationTweens(dt);
+      advanceClipPlayback(dt);
+    },
+    [advanceAnimationTweens, advanceClipPlayback]
+  );
+  const step = useCallback(
+    (dt) => {
+      advanceAnimations(dt);
+      stepRuntime(dt);
+    },
+    [advanceAnimations, stepRuntime]
+  );
+  useEffect(() => {
+    return () => {
+      if (rafHandleRef.current !== null) {
+        cancelAnimationFrame(rafHandleRef.current);
+        rafHandleRef.current = null;
+      }
+      lastFrameTimeRef.current = null;
+      animationTweensRef.current.clear();
+      clipPlaybackRef.current.clear();
+    };
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      ...status,
+      assetBundle,
+      setInput,
+      setValue: setRendererValue,
+      stagePoseNeutral,
+      animateValue,
+      cancelAnimation,
+      registerInputDriver,
+      playAnimation,
+      stopAnimation,
+      step,
+      advanceAnimations
+    }),
+    [
+      status,
+      assetBundle,
+      setInput,
+      setRendererValue,
+      stagePoseNeutral,
+      animateValue,
+      cancelAnimation,
+      registerInputDriver,
+      playAnimation,
+      stopAnimation,
+      step,
+      advanceAnimations
+    ]
+  );
+  return /* @__PURE__ */ jsx(VizijRuntimeContext.Provider, { value: contextValue, children });
+}
+
+// src/VizijRuntimeFace.tsx
+import { memo } from "react";
+import { Vizij } from "@vizij/render";
+
+// src/hooks/useVizijRuntime.ts
+import { useContext } from "react";
+function useVizijRuntime() {
+  const ctx = useContext(VizijRuntimeContext);
+  if (!ctx) {
+    throw new Error(
+      "useVizijRuntime must be used within a VizijRuntimeProvider."
+    );
+  }
+  return ctx;
+}
+
+// src/VizijRuntimeFace.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function VizijRuntimeFaceInner({
+  namespaceOverride,
+  ...props
+}) {
+  const { rootId, namespace } = useVizijRuntime();
+  if (!rootId) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(
+    Vizij,
+    {
+      ...props,
+      rootId,
+      namespace: namespaceOverride ?? namespace
+    }
+  );
+}
+var VizijRuntimeFace = memo(VizijRuntimeFaceInner);
+
+// src/hooks/useVizijOutputs.ts
+import {
+  useVizijStore
+} from "@vizij/render";
+import { getLookup } from "@vizij/utils";
+function useVizijOutputs(paths) {
+  const { namespace } = useVizijRuntime();
+  return useVizijStore((state) => {
+    const result = {};
+    paths.forEach((path) => {
+      const lookup = getLookup(namespace, path);
+      result[path] = state.values.get(lookup);
+    });
+    return result;
+  });
+}
+
+// src/hooks/useRigInput.ts
+import { useCallback as useCallback2 } from "react";
+import { useVizijStore as useVizijStore2 } from "@vizij/render";
+import { getLookup as getLookup2 } from "@vizij/utils";
+function useRigInput(path) {
+  const { namespace, setInput } = useVizijRuntime();
+  const value = useVizijStore2(
+    (state) => state.values.get(getLookup2(namespace, path))
+  );
+  const setter = useCallback2(
+    (next, shape) => {
+      setInput(path, next, shape);
+    },
+    [path, setInput]
+  );
+  return [value, setter];
+}
+export {
+  VizijRuntimeFace,
+  VizijRuntimeProvider,
+  useRigInput,
+  useVizijOutputs,
+  useVizijRuntime
+};