@vizij/render 0.0.3 → 0.0.5

package/dist/index.js

@@ -30,7 +30,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  Controller: () => Controller,
   EmptyModelError: () => EmptyModelError,
   InnerVizij: () => InnerVizij,
   ShapeMaterial: () => ShapeMaterial,
@@ -55,12 +54,17 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/controllers/controller.tsx
-var import_react3 = require("react");
-var import_shallow = require("zustand/react/shallow");
-var import_clsx = require("clsx");
-var import_utils = require("@vizij/utils");
-var import_ui = require("@semio/ui");
+// src/vizij.tsx
+var import_react10 = require("react");
+var import_react_error_boundary = require("react-error-boundary");
+var import_three = require("three");
+var import_fiber = require("@react-three/fiber");
+var import_drei3 = require("@react-three/drei");
+var import_shallow7 = require("zustand/react/shallow");
+
+// src/renderables/renderable.tsx
+var import_react8 = require("react");
+var import_shallow6 = require("zustand/react/shallow");
 
 // src/hooks/use-vizij-store.ts
 var import_react2 = require("react");
@@ -77,217 +81,20 @@ function useVizijStore(selector) {
   return (0, import_zustand.useStore)(store, selector);
 }
 
-// src/controllers/controller.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function InnerController({
-  animatableId,
-  namespace,
-  subfield,
-  className
-}) {
-  const setValue = useVizijStore((0, import_shallow.useShallow)((state) => state.setValue));
-  const animatable = useVizijStore(
-    (0, import_shallow.useShallow)((state) => state.animatables[animatableId])
-  );
-  const lookupId = (0, import_utils.getLookup)(namespace ?? "default", animatableId);
-  const rawValue = useVizijStore(
-    (0, import_shallow.useShallow)((state) => state.values.get(lookupId))
-  );
-  if (animatable.type === "number") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.clsx)("flex flex-col w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ui.SliderNumberField,
-      {
-        size: import_ui.Size.Sm,
-        value: rawValue ?? animatable.default,
-        onChange: (v) => {
-          setValue(animatableId, namespace ?? "default", v);
-        },
-        min: animatable.constraints.min,
-        max: animatable.constraints.max
-      }
-    ) });
-  } else if (animatable.type === "vector3" && !subfield) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.clsx)("flex flex-col gap-2", className), children: ["x", "y", "z"].map((axis) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        InnerController,
-        {
-          animatableId,
-          namespace,
-          subfield: axis
-        },
-        axis
-      );
-    }) });
-  } else if (animatable.type === "vector2" && !subfield) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.clsx)("flex flex-col gap-2", className), children: ["x", "y"].map((axis) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        InnerController,
-        {
-          animatableId,
-          namespace,
-          subfield: axis
-        },
-        axis
-      );
-    }) });
-  } else if (animatable.type === "euler" && !subfield) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.clsx)("flex flex-col gap-2", className), children: ["x", "y", "z"].map((axis) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        InnerController,
-        {
-          animatableId,
-          namespace,
-          subfield: axis
-        },
-        axis
-      );
-    }) });
-  } else if (animatable.type === "rgb" && !subfield) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.clsx)("flex flex-col gap-2", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ui.ColorPickerPopover,
-      {
-        value: rawValue ? convertRGBRange(rawValue, "255") : convertRGBRange(animatable.default, "255"),
-        onChange: (v) => {
-          setValue(
-            animatableId,
-            namespace ?? "default",
-            convertRGBRange(v, "1")
-          );
-        }
-      }
-    ) });
-  } else if (animatable.type === "vector3" && subfield && ["x", "y", "z"].includes(subfield)) {
-    const axis = subfield;
-    const currentVec = rawValue ?? animatable.default;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ui.SliderNumberField,
-      {
-        label: axis,
-        size: import_ui.Size.Sm,
-        value: currentVec[axis],
-        onChange: (v) => {
-          setValue(animatableId, namespace ?? "default", {
-            ...currentVec,
-            [axis]: v
-          });
-        },
-        min: animatable.constraints.min?.[vectorIndexLookup[axis]] ?? void 0,
-        max: animatable.constraints.max?.[vectorIndexLookup[axis]] ?? void 0
-      }
-    );
-  } else if (animatable.type === "vector2" && subfield && ["x", "y"].includes(subfield)) {
-    const axis = subfield;
-    const currentVec = rawValue ?? animatable.default;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ui.SliderNumberField,
-      {
-        label: axis,
-        size: import_ui.Size.Sm,
-        value: currentVec[axis],
-        onChange: (v) => {
-          setValue(animatableId, namespace ?? "default", {
-            ...currentVec,
-            [axis]: v
-          });
-        },
-        min: animatable.constraints.min?.[vectorIndexLookup[axis]] ?? void 0,
-        max: animatable.constraints.max?.[vectorIndexLookup[axis]] ?? void 0
-      }
-    );
-  } else if (animatable.type === "euler" && subfield && ["x", "y", "z"].includes(subfield)) {
-    const axis = subfield;
-    const currentVec = rawValue ?? animatable.default;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ui.SliderNumberField,
-      {
-        label: axis,
-        size: import_ui.Size.Sm,
-        value: currentVec[axis],
-        onChange: (v) => {
-          setValue(animatableId, namespace ?? "default", {
-            ...currentVec,
-            [axis]: v
-          });
-        },
-        min: animatable.constraints.min?.[vectorIndexLookup[axis]] ?? void 0,
-        max: animatable.constraints.max?.[vectorIndexLookup[axis]] ?? void 0
-      }
-    );
-  } else if (animatable.type === "rgb" && subfield && ["r", "g", "b"].includes(subfield)) {
-    const axis = subfield;
-    const currentVec = rawValue ?? animatable.default;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ui.SliderNumberField,
-      {
-        label: axis,
-        size: import_ui.Size.Sm,
-        value: currentVec[axis],
-        strictText: true,
-        strictSlider: true,
-        onChange: (v) => {
-          setValue(animatableId, namespace ?? "default", {
-            ...currentVec,
-            [axis]: v
-          });
-        },
-        min: animatable.constraints.min?.[vectorIndexLookup[axis]] ?? void 0,
-        max: animatable.constraints.max?.[vectorIndexLookup[axis]] ?? void 0
-      }
-    );
-  }
-}
-var Controller = (0, import_react3.memo)(InnerController);
-var vectorIndexLookup = {
-  x: 0,
-  y: 1,
-  z: 2,
-  r: 0,
-  g: 1,
-  b: 2
-};
-var convertRGBRange = (color, to) => {
-  if (to === "255") {
-    return {
-      r: color.r * 255,
-      g: color.g * 255,
-      b: color.b * 255
-    };
-  } else if (to === "1") {
-    return {
-      r: color.r / 255,
-      g: color.g / 255,
-      b: color.b / 255
-    };
-  }
-  return color;
-};
-
-// src/vizij.tsx
-var import_react11 = require("react");
-var import_react_error_boundary = require("react-error-boundary");
-var import_three = require("three");
-var import_fiber = require("@react-three/fiber");
-var import_drei3 = require("@react-three/drei");
-var import_shallow8 = require("zustand/react/shallow");
-
-// src/renderables/renderable.tsx
-var import_react9 = require("react");
-var import_shallow7 = require("zustand/react/shallow");
-
 // src/renderables/group.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var THREE = __toESM(require("three"));
-var import_shallow3 = require("zustand/react/shallow");
-var import_utils3 = require("@vizij/utils");
+var import_shallow2 = require("zustand/react/shallow");
+var import_utils2 = require("@vizij/utils");
 
 // src/hooks/use-features.ts
-var import_react4 = require("react");
-var import_shallow2 = require("zustand/shallow");
-var import_utils2 = require("@vizij/utils");
+var import_react3 = require("react");
+var import_shallow = require("zustand/shallow");
+var import_utils = require("@vizij/utils");
 function useFeatures(namespace, features, callbacks, debugInfo) {
-  const store = (0, import_react4.useContext)(VizijContext);
+  const store = (0, import_react3.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const unsubsribes = [];
     Object.keys(callbacks).forEach((key) => {
       if (!(key in features)) {
@@ -313,11 +120,11 @@ function useFeatures(namespace, features, callbacks, debugInfo) {
           }
         };
         const defaultValue = animatableValueInfo.default;
-        const lookupKey = (0, import_utils2.getLookup)(namespace, animatableValueInfo.id);
+        const lookupKey = (0, import_utils.getLookup)(namespace, animatableValueInfo.id);
         const unsubscribe = store.subscribe(
           (state) => state.values.get(lookupKey) ?? defaultValue,
           cb,
-          { equalityFn: import_shallow2.shallow, fireImmediately: true }
+          { equalityFn: import_shallow.shallow, fireImmediately: true }
         );
         unsubsribes.push(unsubscribe);
       }
@@ -360,21 +167,21 @@ function createStoredRenderable(data, animatableValues) {
 }
 
 // src/renderables/group.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
 function InnerRenderedGroup({
   id,
   namespace,
   chain
 }) {
-  const ref = (0, import_react5.useRef)();
-  const group = useVizijStore((0, import_shallow3.useShallow)((state) => state.world[id]));
+  const ref = (0, import_react4.useRef)();
+  const group = useVizijStore((0, import_shallow2.useShallow)((state) => state.world[id]));
   const refIsNull = !group.refs[namespace]?.current;
-  const animatables = useVizijStore((0, import_shallow3.useShallow)((state) => state.animatables));
+  const animatables = useVizijStore((0, import_shallow2.useShallow)((state) => state.animatables));
   const setHoveredElement = useVizijStore(
-    (0, import_shallow3.useShallow)((state) => state.setHoveredElement)
+    (0, import_shallow2.useShallow)((state) => state.setHoveredElement)
   );
-  const animatableValues = (0, import_react5.useMemo)(() => {
+  const animatableValues = (0, import_react4.useMemo)(() => {
     const av = {};
     Object.values(group.features).forEach((feat) => {
       if (feat.animated) {
@@ -391,33 +198,33 @@ function InnerRenderedGroup({
   };
   useFeatures(namespace, group.features, {
     translation: (pos) => {
-      if (ref.current?.position && (0, import_utils3.instanceOfRawVector3)(pos)) {
+      if (ref.current?.position && (0, import_utils2.instanceOfRawVector3)(pos)) {
         ref.current.position.set(
           pos.x,
           pos.y,
           pos.z
         );
-      } else if (ref.current?.position && (0, import_utils3.instanceOfRawVector2)(pos)) {
+      } else if (ref.current?.position && (0, import_utils2.instanceOfRawVector2)(pos)) {
         const currentZ = ref.current.position.z;
         ref.current.position.set(pos.x, pos.y, currentZ);
       }
     },
     rotation: (rot) => {
-      if (ref.current?.rotation && (0, import_utils3.instanceOfRawEuler)(rot)) {
+      if (ref.current?.rotation && (0, import_utils2.instanceOfRawEuler)(rot)) {
         ref.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (ref.current?.rotation && (0, import_utils3.instanceOfRawNumber)(rot)) {
+      } else if (ref.current?.rotation && (0, import_utils2.instanceOfRawNumber)(rot)) {
         ref.current.rotation.set(0, 0, 0);
         ref.current.rotateZ(rot);
       }
     },
     scale: (scale) => {
-      if (ref.current?.scale && (0, import_utils3.instanceOfRawVector3)(scale)) {
+      if (ref.current?.scale && (0, import_utils2.instanceOfRawVector3)(scale)) {
         if (scale.x === null || scale.y === null || scale.z === null) {
           ref.current.scale.set(0.1, 0.1, 0.1);
           return;
         }
         ref.current.scale.set(scale.x, scale.y, scale.z);
-      } else if (ref.current && (0, import_utils3.instanceOfRawNumber)(scale)) {
+      } else if (ref.current && (0, import_utils2.instanceOfRawNumber)(scale)) {
         ref.current.scale.set(scale, scale, scale);
       } else if (ref.current) {
         ref.current.scale.set(1, 1, 1);
@@ -425,19 +232,19 @@ function InnerRenderedGroup({
     }
   });
   const setReference = useVizijStore(
-    (0, import_shallow3.useShallow)((state) => state.setReference)
+    (0, import_shallow2.useShallow)((state) => state.setReference)
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (ref.current && refIsNull) {
       setReference(group.id, namespace, ref);
     }
   }, [group.id, namespace, ref, setReference, refIsNull]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (ref.current) {
       ref.current.name = group.name;
     }
   }, [group.name]);
-  const handlePointerOver = (0, import_react5.useCallback)(
+  const handlePointerOver = (0, import_react4.useCallback)(
     (event) => {
       if (event.eventObject !== event.object) {
         return;
@@ -446,7 +253,7 @@ function InnerRenderedGroup({
     },
     [id, namespace, setHoveredElement]
   );
-  const handlePointerOut = (0, import_react5.useCallback)(
+  const handlePointerOut = (0, import_react4.useCallback)(
     (event) => {
       if (event.eventObject !== event.object) {
         return;
@@ -455,7 +262,7 @@ function InnerRenderedGroup({
     },
     [setHoveredElement]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "group",
     {
       ref,
@@ -463,7 +270,7 @@ function InnerRenderedGroup({
       userData,
       onPointerOver: handlePointerOver,
       onPointerOut: handlePointerOut,
-      children: group.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: group.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         Renderable,
         {
           id: child,
@@ -475,36 +282,36 @@ function InnerRenderedGroup({
     }
   );
 }
-var RenderedGroup = (0, import_react5.memo)(InnerRenderedGroup);
+var RenderedGroup = (0, import_react4.memo)(InnerRenderedGroup);
 
 // src/renderables/ellipse.tsx
-var import_react6 = require("react");
-var import_shallow4 = require("zustand/react/shallow");
-var import_utils4 = require("@vizij/utils");
+var import_react5 = require("react");
+var import_shallow3 = require("zustand/react/shallow");
+var import_utils3 = require("@vizij/utils");
 var import_drei = require("@react-three/drei");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function InnerRenderedEllipse({
   id,
   namespace,
   chain
 }) {
-  const ellipseRef = (0, import_react6.useRef)();
-  const materialRef = (0, import_react6.useRef)();
-  const lineRef = (0, import_react6.useRef)();
-  const strokeOffsetRef = (0, import_react6.useRef)(0);
-  const strokeWidthRef = (0, import_react6.useRef)(0);
+  const ellipseRef = (0, import_react5.useRef)();
+  const materialRef = (0, import_react5.useRef)();
+  const lineRef = (0, import_react5.useRef)();
+  const strokeOffsetRef = (0, import_react5.useRef)(0);
+  const strokeWidthRef = (0, import_react5.useRef)(0);
   const onElementClick = useVizijStore(
-    (0, import_shallow4.useShallow)((state) => state.onElementClick)
+    (0, import_shallow3.useShallow)((state) => state.onElementClick)
   );
   const setHoveredElement = useVizijStore(
-    (0, import_shallow4.useShallow)((state) => state.setHoveredElement)
+    (0, import_shallow3.useShallow)((state) => state.setHoveredElement)
   );
   const ellipse = useVizijStore(
-    (0, import_shallow4.useShallow)((state) => state.world[id])
+    (0, import_shallow3.useShallow)((state) => state.world[id])
   );
   const refIsNull = !ellipse.refs[namespace]?.current;
-  const animatables = useVizijStore((0, import_shallow4.useShallow)((state) => state.animatables));
-  const animatableValues = (0, import_react6.useMemo)(() => {
+  const animatables = useVizijStore((0, import_shallow3.useShallow)((state) => state.animatables));
+  const animatableValues = (0, import_react5.useMemo)(() => {
     const av = {};
     Object.values(ellipse.features).forEach((feat) => {
       if (feat.animated) {
@@ -514,11 +321,11 @@ function InnerRenderedEllipse({
     });
     return av;
   }, [ellipse.features, animatables]);
-  const selectionData = (0, import_react6.useMemo)(
+  const selectionData = (0, import_react5.useMemo)(
     () => ({ id, namespace, type: "ellipse" }),
     [id, namespace]
   );
-  const userData = (0, import_react6.useMemo)(
+  const userData = (0, import_react5.useMemo)(
     () => ({
       gltfExtensions: {
         RobotData: createStoredRenderable(ellipse, animatableValues)
@@ -529,13 +336,13 @@ function InnerRenderedEllipse({
   );
   useFeatures(namespace, ellipse.features, {
     translation: (pos) => {
-      if (ellipseRef.current?.position && (0, import_utils4.instanceOfRawVector3)(pos)) {
+      if (ellipseRef.current?.position && (0, import_utils3.instanceOfRawVector3)(pos)) {
         ellipseRef.current.position.set(
           pos.x,
           pos.y,
           pos.z
         );
-      } else if (ellipseRef.current?.position && (0, import_utils4.instanceOfRawVector2)(pos)) {
+      } else if (ellipseRef.current?.position && (0, import_utils3.instanceOfRawVector2)(pos)) {
         const currentZ = ellipseRef.current.position.z;
         ellipseRef.current.position.set(
           pos.x,
@@ -543,13 +350,13 @@ function InnerRenderedEllipse({
           currentZ
         );
       }
-      if (lineRef.current?.position && (0, import_utils4.instanceOfRawVector3)(pos)) {
+      if (lineRef.current?.position && (0, import_utils3.instanceOfRawVector3)(pos)) {
         lineRef.current.position.set(
           pos.x,
           pos.y,
           pos.z
         );
-      } else if (lineRef.current?.position && (0, import_utils4.instanceOfRawVector2)(pos)) {
+      } else if (lineRef.current?.position && (0, import_utils3.instanceOfRawVector2)(pos)) {
         const currentZ = lineRef.current.position.z;
         lineRef.current.position.set(
           pos.x,
@@ -559,21 +366,21 @@ function InnerRenderedEllipse({
       }
     },
     rotation: (rot) => {
-      if (ellipseRef.current?.rotation && (0, import_utils4.instanceOfRawEuler)(rot)) {
+      if (ellipseRef.current?.rotation && (0, import_utils3.instanceOfRawEuler)(rot)) {
         ellipseRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (ellipseRef.current?.rotation && (0, import_utils4.instanceOfRawNumber)(rot)) {
+      } else if (ellipseRef.current?.rotation && (0, import_utils3.instanceOfRawNumber)(rot)) {
         ellipseRef.current.rotation.set(0, 0, 0);
         ellipseRef.current.rotateZ(rot);
       }
-      if (lineRef.current?.rotation && (0, import_utils4.instanceOfRawEuler)(rot)) {
+      if (lineRef.current?.rotation && (0, import_utils3.instanceOfRawEuler)(rot)) {
         lineRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (lineRef.current?.rotation && (0, import_utils4.instanceOfRawNumber)(rot)) {
+      } else if (lineRef.current?.rotation && (0, import_utils3.instanceOfRawNumber)(rot)) {
         lineRef.current.rotation.set(0, 0, 0);
         lineRef.current.rotateZ(rot);
       }
     },
     fillOpacity: (op) => {
-      if (materialRef.current?.opacity !== void 0 && (0, import_utils4.instanceOfRawNumber)(op)) {
+      if (materialRef.current?.opacity !== void 0 && (0, import_utils3.instanceOfRawNumber)(op)) {
         materialRef.current.opacity = op;
         if (op < 1) {
           materialRef.current.transparent = true;
@@ -585,23 +392,23 @@ function InnerRenderedEllipse({
     },
     fillColor: (color) => {
       if (materialRef.current?.color) {
-        if ((0, import_utils4.instanceOfRawRGB)(color)) {
+        if ((0, import_utils3.instanceOfRawRGB)(color)) {
           materialRef.current.color.setRGB(color.r, color.g, color.b);
           materialRef.current.needsUpdate = true;
-        } else if ((0, import_utils4.instanceOfRawVector3)(color)) {
+        } else if ((0, import_utils3.instanceOfRawVector3)(color)) {
           materialRef.current.color.setRGB(color.x, color.y, color.z);
           materialRef.current.needsUpdate = true;
-        } else if ((0, import_utils4.instanceOfRawHSL)(color)) {
+        } else if ((0, import_utils3.instanceOfRawHSL)(color)) {
           materialRef.current.color.setHSL(color.h, color.s, color.l);
           materialRef.current.needsUpdate = true;
         }
       }
     },
     height: (height) => {
-      if (ellipseRef.current && (0, import_utils4.instanceOfRawNumber)(height)) {
+      if (ellipseRef.current && (0, import_utils3.instanceOfRawNumber)(height)) {
         ellipseRef.current.scale.set(ellipseRef.current.scale.x, height, 1);
       }
-      if (ellipseRef.current && lineRef.current && (0, import_utils4.instanceOfRawNumber)(height)) {
+      if (ellipseRef.current && lineRef.current && (0, import_utils3.instanceOfRawNumber)(height)) {
         const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
         lineRef.current.scale.set(
           ellipseRef.current.scale.x + offset,
@@ -611,10 +418,10 @@ function InnerRenderedEllipse({
       }
     },
     width: (width) => {
-      if (ellipseRef.current && (0, import_utils4.instanceOfRawNumber)(width)) {
+      if (ellipseRef.current && (0, import_utils3.instanceOfRawNumber)(width)) {
         ellipseRef.current.scale.set(width, ellipseRef.current.scale.y, 1);
       }
-      if (ellipseRef.current && lineRef.current && (0, import_utils4.instanceOfRawNumber)(width)) {
+      if (ellipseRef.current && lineRef.current && (0, import_utils3.instanceOfRawNumber)(width)) {
         const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
         lineRef.current.scale.set(
           width + offset,
@@ -624,7 +431,7 @@ function InnerRenderedEllipse({
       }
     },
     strokeOpacity: (strokeOpacity) => {
-      if (lineRef.current?.material && (0, import_utils4.instanceOfRawNumber)(strokeOpacity)) {
+      if (lineRef.current?.material && (0, import_utils3.instanceOfRawNumber)(strokeOpacity)) {
         lineRef.current.material.opacity = strokeOpacity;
         if (strokeOpacity < 1) {
           lineRef.current.material.transparent = true;
@@ -636,21 +443,21 @@ function InnerRenderedEllipse({
     },
     strokeColor: (strokeColor) => {
       if (lineRef.current?.material.color) {
-        if ((0, import_utils4.instanceOfRawRGB)(strokeColor)) {
+        if ((0, import_utils3.instanceOfRawRGB)(strokeColor)) {
           lineRef.current.material.color.setRGB(
             strokeColor.r,
             strokeColor.g,
             strokeColor.b
           );
           lineRef.current.material.needsUpdate = true;
-        } else if ((0, import_utils4.instanceOfRawVector3)(strokeColor)) {
+        } else if ((0, import_utils3.instanceOfRawVector3)(strokeColor)) {
           lineRef.current.material.color.setRGB(
             strokeColor.x,
             strokeColor.y,
             strokeColor.z
           );
           lineRef.current.material.needsUpdate = true;
-        } else if ((0, import_utils4.instanceOfRawHSL)(strokeColor)) {
+        } else if ((0, import_utils3.instanceOfRawHSL)(strokeColor)) {
           lineRef.current.material.color.setHSL(
             strokeColor.h,
             strokeColor.s,
@@ -662,7 +469,7 @@ function InnerRenderedEllipse({
     },
     strokeWidth: (strokeWidth) => {
       if (lineRef.current?.material && ellipseRef.current) {
-        if ((0, import_utils4.instanceOfRawNumber)(strokeWidth)) {
+        if ((0, import_utils3.instanceOfRawNumber)(strokeWidth)) {
           strokeWidthRef.current = strokeWidth;
           const offset = strokeWidth * strokeOffsetRef.current / 2 + strokeOffsetRef.current * -1;
           lineRef.current.scale.set(
@@ -677,7 +484,7 @@ function InnerRenderedEllipse({
     },
     strokeOffset: (strokeOffset) => {
       if (lineRef.current?.material && ellipseRef.current) {
-        if ((0, import_utils4.instanceOfRawNumber)(strokeOffset)) {
+        if ((0, import_utils3.instanceOfRawNumber)(strokeOffset)) {
           strokeOffsetRef.current = strokeOffset;
           const offset = strokeOffset * strokeWidthRef.current / 2 + strokeOffset * -1;
           lineRef.current.scale.set(
@@ -690,9 +497,9 @@ function InnerRenderedEllipse({
     }
   });
   const setReference = useVizijStore(
-    (0, import_shallow4.useShallow)((state) => state.setReference)
+    (0, import_shallow3.useShallow)((state) => state.setReference)
   );
-  const points = (0, import_react6.useMemo)(() => {
+  const points = (0, import_react5.useMemo)(() => {
     const n = 600;
     const p = [];
     const angleStep = 2 * Math.PI / n;
@@ -704,26 +511,26 @@ function InnerRenderedEllipse({
     }
     return p;
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (ellipseRef.current && refIsNull)
       setReference(ellipse.id, namespace, ellipseRef);
   }, [ellipse.id, namespace, ellipseRef, setReference, refIsNull]);
-  const handlePointerOver = (0, import_react6.useCallback)(
+  const handlePointerOver = (0, import_react5.useCallback)(
     (event) => {
       event.stopPropagation();
       setHoveredElement({ id, namespace, type: "ellipse" });
     },
     [id, namespace, setHoveredElement]
   );
-  const handlePointerOut = (0, import_react6.useCallback)(
+  const handlePointerOut = (0, import_react5.useCallback)(
     (event) => {
       event.stopPropagation();
       setHoveredElement(null);
     },
     [setHoveredElement]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_drei.Circle,
       {
         ref: ellipseRef,
@@ -734,10 +541,10 @@ function InnerRenderedEllipse({
         onClick: (e) => {
           onElementClick({ id, type: "ellipse", namespace }, [...chain, id], e);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("meshStandardMaterial", { attach: "material", ref: materialRef })
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshStandardMaterial", { attach: "material", ref: materialRef })
       }
     ),
-    showLine(ellipse) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    showLine(ellipse) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_drei.Line,
       {
         ref: lineRef,
@@ -748,7 +555,7 @@ function InnerRenderedEllipse({
     )
   ] });
 }
-var RenderedEllipse = (0, import_react6.memo)(InnerRenderedEllipse);
+var RenderedEllipse = (0, import_react5.memo)(InnerRenderedEllipse);
 var showLine = (ellipse) => {
   if ("strokeOpacity" in ellipse.features) {
     return true;
@@ -763,33 +570,33 @@ var showLine = (ellipse) => {
 };
 
 // src/renderables/rectangle.tsx
-var import_react7 = require("react");
-var import_shallow5 = require("zustand/react/shallow");
-var import_utils5 = require("@vizij/utils");
+var import_react6 = require("react");
+var import_shallow4 = require("zustand/react/shallow");
+var import_utils4 = require("@vizij/utils");
 var import_drei2 = require("@react-three/drei");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function InnerRenderedRectangle({
   id,
   namespace,
   chain
 }) {
-  const rectangleRef = (0, import_react7.useRef)();
-  const materialRef = (0, import_react7.useRef)();
-  const lineRef = (0, import_react7.useRef)();
-  const strokeOffsetRef = (0, import_react7.useRef)(0);
-  const strokeWidthRef = (0, import_react7.useRef)(0);
+  const rectangleRef = (0, import_react6.useRef)();
+  const materialRef = (0, import_react6.useRef)();
+  const lineRef = (0, import_react6.useRef)();
+  const strokeOffsetRef = (0, import_react6.useRef)(0);
+  const strokeWidthRef = (0, import_react6.useRef)(0);
   const onElementClick = useVizijStore(
-    (0, import_shallow5.useShallow)((state) => state.onElementClick)
+    (0, import_shallow4.useShallow)((state) => state.onElementClick)
   );
   const setHoveredElement = useVizijStore(
-    (0, import_shallow5.useShallow)((state) => state.setHoveredElement)
+    (0, import_shallow4.useShallow)((state) => state.setHoveredElement)
   );
   const rectangle = useVizijStore(
-    (0, import_shallow5.useShallow)((state) => state.world[id])
+    (0, import_shallow4.useShallow)((state) => state.world[id])
   );
   const refIsNull = !rectangle.refs[namespace]?.current;
-  const animatables = useVizijStore((0, import_shallow5.useShallow)((state) => state.animatables));
-  const animatableValues = (0, import_react7.useMemo)(() => {
+  const animatables = useVizijStore((0, import_shallow4.useShallow)((state) => state.animatables));
+  const animatableValues = (0, import_react6.useMemo)(() => {
     const av = {};
     Object.values(rectangle.features).forEach((feat) => {
       if (feat.animated) {
@@ -799,11 +606,11 @@ function InnerRenderedRectangle({
     });
     return av;
   }, [rectangle.features, animatables]);
-  const selectionData = (0, import_react7.useMemo)(
+  const selectionData = (0, import_react6.useMemo)(
     () => ({ id, namespace, type: "rectangle" }),
     [id, namespace]
   );
-  const userData = (0, import_react7.useMemo)(
+  const userData = (0, import_react6.useMemo)(
     () => ({
       gltfExtensions: {
         RobotData: createStoredRenderable(rectangle, animatableValues)
@@ -814,13 +621,13 @@ function InnerRenderedRectangle({
   );
   useFeatures(namespace, rectangle.features, {
     translation: (pos) => {
-      if (rectangleRef.current?.position && (0, import_utils5.instanceOfRawVector3)(pos)) {
+      if (rectangleRef.current?.position && (0, import_utils4.instanceOfRawVector3)(pos)) {
         rectangleRef.current.position.set(
           pos.x,
           pos.y,
           pos.z
         );
-      } else if (rectangleRef.current?.position && (0, import_utils5.instanceOfRawVector2)(pos)) {
+      } else if (rectangleRef.current?.position && (0, import_utils4.instanceOfRawVector2)(pos)) {
         const currentZ = rectangleRef.current.position.z;
         rectangleRef.current.position.set(
           pos.x,
@@ -828,13 +635,13 @@ function InnerRenderedRectangle({
           currentZ
         );
       }
-      if (lineRef.current?.position && (0, import_utils5.instanceOfRawVector3)(pos)) {
+      if (lineRef.current?.position && (0, import_utils4.instanceOfRawVector3)(pos)) {
         lineRef.current.position.set(
           pos.x,
           pos.y,
           pos.z
         );
-      } else if (lineRef.current?.position && (0, import_utils5.instanceOfRawVector2)(pos)) {
+      } else if (lineRef.current?.position && (0, import_utils4.instanceOfRawVector2)(pos)) {
         const currentZ = lineRef.current.position.z;
         lineRef.current.position.set(
           pos.x,
@@ -844,21 +651,21 @@ function InnerRenderedRectangle({
       }
     },
     rotation: (rot) => {
-      if (rectangleRef.current?.rotation && (0, import_utils5.instanceOfRawEuler)(rot)) {
+      if (rectangleRef.current?.rotation && (0, import_utils4.instanceOfRawEuler)(rot)) {
         rectangleRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (rectangleRef.current?.rotation && (0, import_utils5.instanceOfRawNumber)(rot)) {
+      } else if (rectangleRef.current?.rotation && (0, import_utils4.instanceOfRawNumber)(rot)) {
         rectangleRef.current.rotation.set(0, 0, 0);
         rectangleRef.current.rotateZ(rot);
       }
-      if (lineRef.current?.rotation && (0, import_utils5.instanceOfRawEuler)(rot)) {
+      if (lineRef.current?.rotation && (0, import_utils4.instanceOfRawEuler)(rot)) {
         lineRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (lineRef.current?.rotation && (0, import_utils5.instanceOfRawNumber)(rot)) {
+      } else if (lineRef.current?.rotation && (0, import_utils4.instanceOfRawNumber)(rot)) {
         lineRef.current.rotation.set(0, 0, 0);
         lineRef.current.rotateZ(rot);
       }
     },
     fillOpacity: (op) => {
-      if (materialRef.current?.opacity !== void 0 && (0, import_utils5.instanceOfRawNumber)(op)) {
+      if (materialRef.current?.opacity !== void 0 && (0, import_utils4.instanceOfRawNumber)(op)) {
         materialRef.current.opacity = op;
         if (op < 1) {
           materialRef.current.transparent = true;
@@ -870,23 +677,23 @@ function InnerRenderedRectangle({
     },
     fillColor: (color) => {
       if (materialRef.current?.color) {
-        if ((0, import_utils5.instanceOfRawRGB)(color)) {
+        if ((0, import_utils4.instanceOfRawRGB)(color)) {
           materialRef.current.color.setRGB(color.r, color.g, color.b);
           materialRef.current.needsUpdate = true;
-        } else if ((0, import_utils5.instanceOfRawVector3)(color)) {
+        } else if ((0, import_utils4.instanceOfRawVector3)(color)) {
           materialRef.current.color.setRGB(color.x, color.y, color.z);
           materialRef.current.needsUpdate = true;
-        } else if ((0, import_utils5.instanceOfRawHSL)(color)) {
+        } else if ((0, import_utils4.instanceOfRawHSL)(color)) {
           materialRef.current.color.setHSL(color.h, color.s, color.l);
           materialRef.current.needsUpdate = true;
         }
       }
     },
     height: (height) => {
-      if (rectangleRef.current && (0, import_utils5.instanceOfRawNumber)(height)) {
+      if (rectangleRef.current && (0, import_utils4.instanceOfRawNumber)(height)) {
         rectangleRef.current.scale.set(rectangleRef.current.scale.x, height, 1);
       }
-      if (rectangleRef.current && lineRef.current && (0, import_utils5.instanceOfRawNumber)(height)) {
+      if (rectangleRef.current && lineRef.current && (0, import_utils4.instanceOfRawNumber)(height)) {
         const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
         lineRef.current.scale.set(
           rectangleRef.current.scale.x + offset,
@@ -896,10 +703,10 @@ function InnerRenderedRectangle({
       }
     },
     width: (width) => {
-      if (rectangleRef.current && (0, import_utils5.instanceOfRawNumber)(width)) {
+      if (rectangleRef.current && (0, import_utils4.instanceOfRawNumber)(width)) {
         rectangleRef.current.scale.set(width, rectangleRef.current.scale.y, 1);
       }
-      if (rectangleRef.current && lineRef.current && (0, import_utils5.instanceOfRawNumber)(width)) {
+      if (rectangleRef.current && lineRef.current && (0, import_utils4.instanceOfRawNumber)(width)) {
         const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
         lineRef.current.scale.set(
           width + offset,
@@ -909,7 +716,7 @@ function InnerRenderedRectangle({
       }
     },
     strokeOpacity: (strokeOpacity) => {
-      if (lineRef.current?.material && (0, import_utils5.instanceOfRawNumber)(strokeOpacity)) {
+      if (lineRef.current?.material && (0, import_utils4.instanceOfRawNumber)(strokeOpacity)) {
         lineRef.current.material.opacity = strokeOpacity;
         if (strokeOpacity < 1) {
           lineRef.current.material.transparent = true;
@@ -921,21 +728,21 @@ function InnerRenderedRectangle({
     },
     strokeColor: (strokeColor) => {
       if (lineRef.current?.material.color) {
-        if ((0, import_utils5.instanceOfRawRGB)(strokeColor)) {
+        if ((0, import_utils4.instanceOfRawRGB)(strokeColor)) {
           lineRef.current.material.color.setRGB(
             strokeColor.r,
             strokeColor.g,
             strokeColor.b
           );
           lineRef.current.material.needsUpdate = true;
-        } else if ((0, import_utils5.instanceOfRawVector3)(strokeColor)) {
+        } else if ((0, import_utils4.instanceOfRawVector3)(strokeColor)) {
           lineRef.current.material.color.setRGB(
             strokeColor.x,
             strokeColor.y,
             strokeColor.z
           );
           lineRef.current.material.needsUpdate = true;
-        } else if ((0, import_utils5.instanceOfRawHSL)(strokeColor)) {
+        } else if ((0, import_utils4.instanceOfRawHSL)(strokeColor)) {
           lineRef.current.material.color.setHSL(
             strokeColor.h,
             strokeColor.s,
@@ -947,7 +754,7 @@ function InnerRenderedRectangle({
     },
     strokeWidth: (strokeWidth) => {
       if (lineRef.current?.material && rectangleRef.current) {
-        if ((0, import_utils5.instanceOfRawNumber)(strokeWidth)) {
+        if ((0, import_utils4.instanceOfRawNumber)(strokeWidth)) {
           strokeWidthRef.current = strokeWidth;
           const offset = strokeWidth * strokeOffsetRef.current / 2 + strokeOffsetRef.current * -1;
           lineRef.current.scale.set(
@@ -962,7 +769,7 @@ function InnerRenderedRectangle({
     },
     strokeOffset: (strokeOffset) => {
       if (lineRef.current?.material && rectangleRef.current) {
-        if ((0, import_utils5.instanceOfRawNumber)(strokeOffset)) {
+        if ((0, import_utils4.instanceOfRawNumber)(strokeOffset)) {
           strokeOffsetRef.current = strokeOffset;
           const offset = strokeOffset * strokeWidthRef.current / 2 + strokeOffset * -1;
           lineRef.current.scale.set(
@@ -975,9 +782,9 @@ function InnerRenderedRectangle({
     }
   });
   const setReference = useVizijStore(
-    (0, import_shallow5.useShallow)((state) => state.setReference)
+    (0, import_shallow4.useShallow)((state) => state.setReference)
   );
-  const points = (0, import_react7.useMemo)(() => {
+  const points = (0, import_react6.useMemo)(() => {
     return [
       [-0.5, 0.5, 0],
       [0.5, 0.5, 0],
@@ -986,26 +793,26 @@ function InnerRenderedRectangle({
       [-0.5, 0.5, 0]
     ];
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (rectangleRef.current && refIsNull)
       setReference(rectangle.id, namespace, rectangleRef);
   }, [rectangle.id, namespace, rectangleRef, setReference, refIsNull]);
-  const handlePointerOver = (0, import_react7.useCallback)(
+  const handlePointerOver = (0, import_react6.useCallback)(
     (event) => {
       event.stopPropagation();
       setHoveredElement({ id, namespace, type: "rectangle" });
     },
     [id, namespace, setHoveredElement]
   );
-  const handlePointerOut = (0, import_react7.useCallback)(
+  const handlePointerOut = (0, import_react6.useCallback)(
     (event) => {
       event.stopPropagation();
       setHoveredElement(null);
     },
     [setHoveredElement]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_drei2.Plane,
       {
         ref: rectangleRef,
@@ -1020,10 +827,10 @@ function InnerRenderedRectangle({
             e
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("meshStandardMaterial", { attach: "material", ref: materialRef })
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("meshStandardMaterial", { attach: "material", ref: materialRef })
       }
     ),
-    showLine2(rectangle) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    showLine2(rectangle) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_drei2.Line,
       {
         ref: lineRef,
@@ -1034,7 +841,7 @@ function InnerRenderedRectangle({
     )
   ] });
 }
-var RenderedRectangle = (0, import_react7.memo)(InnerRenderedRectangle);
+var RenderedRectangle = (0, import_react6.memo)(InnerRenderedRectangle);
 var showLine2 = (rectangle) => {
   if ("strokeOpacity" in rectangle.features) {
     return true;
@@ -1049,26 +856,26 @@ var showLine2 = (rectangle) => {
 };
 
 // src/renderables/shape.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var THREE2 = __toESM(require("three"));
-var import_shallow6 = require("zustand/react/shallow");
-var import_utils6 = require("@vizij/utils");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_shallow5 = require("zustand/react/shallow");
+var import_utils5 = require("@vizij/utils");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 THREE2.Object3D.DEFAULT_UP.set(0, 0, 1);
 function InnerRenderedShape({
   id,
   namespace,
   chain
 }) {
-  const refGroup = (0, import_react8.useRef)();
-  const ref = (0, import_react8.useRef)();
-  const shape = useVizijStore((0, import_shallow6.useShallow)((state) => state.world[id]));
+  const refGroup = (0, import_react7.useRef)();
+  const ref = (0, import_react7.useRef)();
+  const shape = useVizijStore((0, import_shallow5.useShallow)((state) => state.world[id]));
   const refs = useVizijStore(
-    (0, import_shallow6.useShallow)((state) => state.world[id].refs)
+    (0, import_shallow5.useShallow)((state) => state.world[id].refs)
   );
   const refIsNull = !refs[namespace]?.current;
-  const animatables = useVizijStore((0, import_shallow6.useShallow)((state) => state.animatables));
-  const animatableValues = (0, import_react8.useMemo)(() => {
+  const animatables = useVizijStore((0, import_shallow5.useShallow)((state) => state.animatables));
+  const animatableValues = (0, import_react7.useMemo)(() => {
     const av = {};
     Object.values(shape.features).forEach((feat) => {
       if (feat.animated) {
@@ -1078,22 +885,22 @@ function InnerRenderedShape({
     });
     return av;
   }, [shape.features, animatables]);
-  const materialName = (0, import_react8.useMemo)(
+  const materialName = (0, import_react7.useMemo)(
     () => deriveMaterialName(shape, animatableValues),
     [shape, animatableValues]
   );
-  const geometry = (0, import_react8.useMemo)(() => {
+  const geometry = (0, import_react7.useMemo)(() => {
     const cloned = shape.geometry.clone();
     if (shape.name) {
       cloned.name = shape.name;
     }
     return cloned;
   }, [shape.geometry, shape.name]);
-  const selectionData = (0, import_react8.useMemo)(
+  const selectionData = (0, import_react7.useMemo)(
     () => ({ id, namespace, type: "shape" }),
     [id, namespace]
   );
-  const userData = (0, import_react8.useMemo)(
+  const userData = (0, import_react7.useMemo)(
     () => ({
       gltfExtensions: {
         RobotData: createStoredRenderable(shape, animatableValues)
@@ -1102,8 +909,8 @@ function InnerRenderedShape({
     }),
     [shape, animatableValues, selectionData]
   );
-  const material = (0, import_react8.useRef)();
-  const morphTargetSettings = (0, import_react8.useMemo)(() => {
+  const material = (0, import_react7.useRef)();
+  const morphTargetSettings = (0, import_react7.useMemo)(() => {
     if (shape.morphTargets) {
       const dictionary = shape.morphTargets.reduce(
         (acc, target, i) => ({ ...acc, [target]: i }),
@@ -1113,7 +920,7 @@ function InnerRenderedShape({
       const morphFeatureHandlers = {};
       shape.morphTargets.forEach((target, i) => {
         morphFeatureHandlers[target] = (value) => {
-          if (ref.current?.morphTargetInfluences && (0, import_utils6.instanceOfRawNumber)(value)) {
+          if (ref.current?.morphTargetInfluences && (0, import_utils5.instanceOfRawNumber)(value)) {
             ref.current.morphTargetInfluences[i] = value;
           }
         };
@@ -1128,14 +935,14 @@ function InnerRenderedShape({
     shape.features,
     {
       translation: (pos) => {
-        if (ref.current?.position && (0, import_utils6.instanceOfRawVector3)(pos)) {
+        if (ref.current?.position && (0, import_utils5.instanceOfRawVector3)(pos)) {
           ref.current.position.set(
             pos.x,
             pos.y,
             pos.z
           );
         }
-        if (refGroup.current?.position && (0, import_utils6.instanceOfRawVector3)(pos)) {
+        if (refGroup.current?.position && (0, import_utils5.instanceOfRawVector3)(pos)) {
           refGroup.current.position.set(
             pos.x,
             pos.y,
@@ -1144,24 +951,24 @@ function InnerRenderedShape({
         }
       },
       rotation: (rot) => {
-        if (ref.current?.rotation && (0, import_utils6.instanceOfRawEuler)(rot)) {
+        if (ref.current?.rotation && (0, import_utils5.instanceOfRawEuler)(rot)) {
           ref.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
         }
-        if (refGroup.current?.rotation && (0, import_utils6.instanceOfRawEuler)(rot)) {
+        if (refGroup.current?.rotation && (0, import_utils5.instanceOfRawEuler)(rot)) {
           refGroup.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
         }
       },
       scale: (scale) => {
-        if (ref.current?.scale && (0, import_utils6.instanceOfRawVector3)(scale)) {
+        if (ref.current?.scale && (0, import_utils5.instanceOfRawVector3)(scale)) {
           ref.current.scale.set(scale.x, scale.y, scale.z);
-        } else if (ref.current && (0, import_utils6.instanceOfRawNumber)(scale)) {
+        } else if (ref.current && (0, import_utils5.instanceOfRawNumber)(scale)) {
           ref.current.scale.set(scale, scale, scale);
         } else if (ref.current) {
           ref.current.scale.set(1, 1, 1);
         }
       },
       opacity: (op) => {
-        if (material.current?.opacity !== void 0 && (0, import_utils6.instanceOfRawNumber)(op)) {
+        if (material.current?.opacity !== void 0 && (0, import_utils5.instanceOfRawNumber)(op)) {
           material.current.opacity = op;
           if (op < 1) {
             material.current.transparent = true;
@@ -1172,21 +979,21 @@ function InnerRenderedShape({
         }
       },
       color: (color) => {
-        if ((material.current || void 0)?.color && (0, import_utils6.instanceOfRawRGB)(color)) {
+        if ((material.current || void 0)?.color && (0, import_utils5.instanceOfRawRGB)(color)) {
           material.current.color.setRGB(
             color.r,
             color.g,
             color.b
           );
           material.current.needsUpdate = true;
-        } else if ((material.current || void 0)?.color && (0, import_utils6.instanceOfRawVector3)(color)) {
+        } else if ((material.current || void 0)?.color && (0, import_utils5.instanceOfRawVector3)(color)) {
           material.current.color.setRGB(
             color.x,
             color.y,
             color.z
           );
           material.current.needsUpdate = true;
-        } else if (material.current && (0, import_utils6.instanceOfRawHSL)(color)) {
+        } else if (material.current && (0, import_utils5.instanceOfRawHSL)(color)) {
           material.current.color.setHSL(
             color.h,
             color.s,
@@ -1198,22 +1005,22 @@ function InnerRenderedShape({
     },
     shape
   );
-  const setReference = useVizijStore((0, import_shallow6.useShallow)((state) => state.setReference));
+  const setReference = useVizijStore((0, import_shallow5.useShallow)((state) => state.setReference));
   const onElementClick = useVizijStore(
-    (0, import_shallow6.useShallow)((state) => state.onElementClick)
+    (0, import_shallow5.useShallow)((state) => state.onElementClick)
   );
   const setHoveredElement = useVizijStore(
-    (0, import_shallow6.useShallow)((state) => state.setHoveredElement)
+    (0, import_shallow5.useShallow)((state) => state.setHoveredElement)
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (ref.current && refIsNull) setReference(shape.id, namespace, ref);
   }, [shape.id, namespace, ref, setReference, refIsNull]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (ref.current) {
       ref.current.name = shape.name;
     }
   }, [shape.name]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!material.current) {
       return;
     }
@@ -1223,21 +1030,21 @@ function InnerRenderedShape({
       material.current.name = shape.name;
     }
   }, [materialName, shape.name]);
-  const handlePointerOver = (0, import_react8.useCallback)(
+  const handlePointerOver = (0, import_react7.useCallback)(
     (event) => {
       event.stopPropagation();
       setHoveredElement({ id, namespace, type: "shape" });
     },
     [id, namespace, setHoveredElement]
   );
-  const handlePointerOut = (0, import_react8.useCallback)(
+  const handlePointerOut = (0, import_react7.useCallback)(
     (event) => {
       event.stopPropagation();
       setHoveredElement(null);
     },
     [setHoveredElement]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "mesh",
     {
       ref,
@@ -1255,7 +1062,7 @@ function InnerRenderedShape({
         onElementClick({ id, type: "shape", namespace }, [...chain, id], e);
       },
       children: [
-        shape.material === "basic" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        shape.material === "basic" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "meshBasicMaterial",
           {
             attach: "material",
@@ -1263,7 +1070,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "lambert" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        shape.material === "lambert" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "meshLambertMaterial",
           {
             attach: "material",
@@ -1271,7 +1078,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "phong" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        shape.material === "phong" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "meshPhongMaterial",
           {
             attach: "material",
@@ -1279,7 +1086,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "standard" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        shape.material === "standard" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "meshStandardMaterial",
           {
             attach: "material",
@@ -1287,7 +1094,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "normal" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        shape.material === "normal" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "meshNormalMaterial",
           {
             attach: "material",
@@ -1295,7 +1102,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.children?.map((child) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        shape.children?.map((child) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Renderable,
           {
             id: child,
@@ -1308,7 +1115,7 @@ function InnerRenderedShape({
     }
   );
 }
-var RenderedShape = (0, import_react8.memo)(InnerRenderedShape);
+var RenderedShape = (0, import_react7.memo)(InnerRenderedShape);
 var MATERIAL_FEATURE_KEYS = [
   "color",
   "opacity",
@@ -1356,15 +1163,15 @@ function extractMaterialName(name) {
 }
 
 // src/renderables/renderable.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function InnerRenderable({
   id,
   namespace,
   chain
 }) {
-  const type = useVizijStore((0, import_shallow7.useShallow)((state) => state.world[id].type));
-  const refs = useVizijStore((0, import_shallow7.useShallow)((state) => state.world[id].refs));
-  const resolvedNamespaces = (0, import_react9.useMemo)(() => {
+  const type = useVizijStore((0, import_shallow6.useShallow)((state) => state.world[id].type));
+  const refs = useVizijStore((0, import_shallow6.useShallow)((state) => state.world[id].refs));
+  const resolvedNamespaces = (0, import_react8.useMemo)(() => {
     let namespaces = [namespace];
     if (namespace in refs) {
       namespaces = [namespace];
@@ -1376,10 +1183,10 @@ function InnerRenderable({
   if (resolvedNamespaces.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: resolvedNamespaces.map((ns) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: resolvedNamespaces.map((ns) => {
     switch (type) {
       case "group":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           RenderedGroup,
           {
             id,
@@ -1389,7 +1196,7 @@ function InnerRenderable({
           `${ns}.${id}`
         );
       case "ellipse":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           RenderedEllipse,
           {
             id,
@@ -1399,7 +1206,7 @@ function InnerRenderable({
           `${ns}.${id}`
         );
       case "rectangle":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           RenderedRectangle,
           {
             id,
@@ -1409,7 +1216,7 @@ function InnerRenderable({
           `${ns}.${id}`
         );
       case "shape":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           RenderedShape,
           {
             id,
@@ -1423,17 +1230,17 @@ function InnerRenderable({
     }
   }) });
 }
-var Renderable = (0, import_react9.memo)(InnerRenderable);
+var Renderable = (0, import_react8.memo)(InnerRenderable);
 
 // src/store.ts
 var import_zustand2 = require("zustand");
 var import_middleware = require("zustand/middleware");
 var import_immer = require("immer");
 var THREE3 = __toESM(require("three"));
-var import_utils7 = require("@vizij/utils");
+var import_utils6 = require("@vizij/utils");
 
 // src/actions/create-new-element.ts
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_lodash3 = require("lodash");
 
 // src/functions/create-world-element.ts
@@ -1463,7 +1270,7 @@ function createNewElement(state, type, root = false) {
     });
     if (Object.entries(state.world).length === 0) {
       const name = `New-Root`;
-      const refs = { default: (0, import_react10.createRef)() };
+      const refs = { default: (0, import_react9.createRef)() };
       const newElement = createDefaultGroup({
         name,
         root: true,
@@ -1481,7 +1288,7 @@ function createNewElement(state, type, root = false) {
       const name = `New-Body`;
       const refs = (0, import_lodash3.mapValues)(
         worldRootEntry.refs,
-        () => (0, import_react10.createRef)()
+        () => (0, import_react9.createRef)()
       );
       const newChild = createDefaultGroup({ name, root, refs });
       worldRootEntry.children.push(newChild.id);
@@ -1726,7 +1533,7 @@ var VizijSlice = (set, get) => ({
   setValue: (id, namespace, value) => {
     set(
       (0, import_immer.produce)((state) => {
-        const lookupId = (0, import_utils7.getLookup)(namespace, id);
+        const lookupId = (0, import_utils6.getLookup)(namespace, id);
         if (typeof value === "function") {
           const current = state.values.get(lookupId);
           if (current !== void 0) {
@@ -1873,8 +1680,8 @@ var VizijSlice = (set, get) => ({
   setSlot: (parentId, parentNamespace, childId, childNamespace) => {
     set(
       (0, import_immer.produce)((state) => {
-        const parentLookupId = (0, import_utils7.getLookup)(parentNamespace, parentId);
-        const childLookupId = (0, import_utils7.getLookup)(childNamespace, childId);
+        const parentLookupId = (0, import_utils6.getLookup)(parentNamespace, parentId);
+        const childLookupId = (0, import_utils6.getLookup)(childNamespace, childId);
         state.slotConfig[parentLookupId] = childLookupId;
       })
     );
@@ -1893,7 +1700,7 @@ var VizijSlice = (set, get) => ({
   clearSlot: (parentId, parentNamespace) => {
     set(
       (0, import_immer.produce)((state) => {
-        const parentLookupId = (0, import_utils7.getLookup)(parentNamespace, parentId);
+        const parentLookupId = (0, import_utils6.getLookup)(parentNamespace, parentId);
         delete state.slotConfig[parentLookupId];
       })
     );
@@ -1943,7 +1750,7 @@ var createVizijStore = (initial) => (0, import_zustand2.create)()(
 );
 
 // src/vizij.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 import_three.Object3D.DEFAULT_UP.set(0, 0, 1);
 function Vizij({
   style,
@@ -1953,16 +1760,21 @@ function Vizij({
   showSafeArea = false,
   onPointerMissed
 }) {
-  const ctx = (0, import_react11.useContext)(VizijContext);
+  const ctx = (0, import_react10.useContext)(VizijContext);
   if (ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_fiber.Canvas,
       {
         shadows: false,
         style,
         className,
         onPointerMissed,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        gl: {
+          outputColorSpace: import_three.SRGBColorSpace,
+          toneMapping: import_three.NoToneMapping,
+          antialias: true
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           MemoizedInnerVizij,
           {
             rootId,
@@ -1973,13 +1785,18 @@ function Vizij({
       }
     );
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_fiber.Canvas,
       {
         style,
         className,
         onPointerMissed,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        gl: {
+          outputColorSpace: import_three.SRGBColorSpace,
+          toneMapping: import_three.NoToneMapping,
+          antialias: true
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           MemoizedInnerVizij,
           {
             rootId,
@@ -2001,9 +1818,9 @@ function InnerVizij({
     width: container.width * container.resolution,
     height: container.height * container.resolution
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ambientLight", { intensity: Math.PI / 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ambientLight", { intensity: Math.PI / 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_drei3.OrthographicCamera,
       {
         makeDefault: true,
@@ -2012,7 +1829,7 @@ function InnerVizij({
         far: 101
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       World,
       {
         rootId,
@@ -2020,17 +1837,17 @@ function InnerVizij({
         parentSizing: sceneParentSizing
       }
     ) }),
-    showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SafeAreaRenderer, { rootId })
+    showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SafeAreaRenderer, { rootId })
   ] });
 }
-var MemoizedInnerVizij = (0, import_react11.memo)(InnerVizij);
+var MemoizedInnerVizij = (0, import_react10.memo)(InnerVizij);
 function InnerWorld({
   rootId,
   namespace = "default",
   parentSizing
 }) {
   const [present, rootBounds] = useVizijStore(
-    (0, import_shallow8.useShallow)((state) => {
+    (0, import_shallow7.useShallow)((state) => {
       const group = state.world[rootId];
       const bounds = group?.rootBounds ?? defaultRootBounds;
       return [group !== void 0, bounds];
@@ -2040,7 +1857,7 @@ function InnerWorld({
     camera: state.camera,
     size: state.size
   }));
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const width = rootBounds.size.x;
     const height = rootBounds.size.y;
     if (camera && parentSizing === void 0 && camera.isOrthographicCamera) {
@@ -2068,9 +1885,9 @@ function InnerWorld({
       camera.updateProjectionMatrix();
     }
   }, [rootBounds, camera, parentSizing, size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_error_boundary.ErrorBoundary, { fallback: null, children: [
-    present && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Renderable, { id: rootId, namespace, chain: [] }),
-    !present && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_error_boundary.ErrorBoundary, { fallback: null, children: [
+    present && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Renderable, { id: rootId, namespace, chain: [] }),
+    !present && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_drei3.Text,
       {
         position: [0, 0, 0],
@@ -2083,7 +1900,7 @@ function InnerWorld({
     )
   ] });
 }
-var World = (0, import_react11.memo)(InnerWorld);
+var World = (0, import_react10.memo)(InnerWorld);
 function SafeAreaRenderer({ rootId }) {
   const rootBounds = useVizijStore((state) => {
     const group = state.world[rootId];
@@ -2093,7 +1910,7 @@ function SafeAreaRenderer({ rootId }) {
   const right = rootBounds.center.x + rootBounds.size.x / 2;
   const top = rootBounds.center.y + rootBounds.size.y / 2;
   const bottom = rootBounds.center.y - rootBounds.size.y / 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_drei3.Line,
     {
       points: [
@@ -2124,11 +1941,11 @@ var ShapeMaterial = /* @__PURE__ */ ((ShapeMaterial2) => {
 })(ShapeMaterial || {});
 
 // src/hooks/use-vizij-store-subscription.ts
-var import_react12 = require("react");
+var import_react11 = require("react");
 function useVizijStoreSubscription(selector, listener) {
-  const store = (0, import_react12.useContext)(VizijContext);
+  const store = (0, import_react11.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const initialValue = selector(store.getState());
     listener(initialValue);
     return store.subscribe(selector, listener);
@@ -2136,17 +1953,17 @@ function useVizijStoreSubscription(selector, listener) {
 }
 
 // src/hooks/use-vizij-store-setter.ts
-var import_react13 = require("react");
+var import_react12 = require("react");
 function useVizijStoreSetter() {
-  const store = (0, import_react13.useContext)(VizijContext);
+  const store = (0, import_react12.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.setState;
 }
 
 // src/hooks/use-vizij-store-getter.ts
-var import_react14 = require("react");
+var import_react13 = require("react");
 function useVizijStoreGetter() {
-  const store = (0, import_react14.useContext)(VizijContext);
+  const store = (0, import_react13.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.getState;
 }
@@ -2156,7 +1973,7 @@ var THREE5 = __toESM(require("three"));
 var import_three_stdlib = require("three-stdlib");
 
 // src/functions/gltf-loading/traverse-three.ts
-var import_react16 = require("react");
+var import_react15 = require("react");
 var THREE4 = __toESM(require("three"));
 
 // src/functions/gltf-loading/map-features.ts
@@ -2188,9 +2005,9 @@ var import_three4 = require("three");
 var import_three3 = require("three");
 
 // src/functions/util.ts
-var import_react15 = require("react");
+var import_react14 = require("react");
 function namespaceArrayToRefs(namespaces) {
-  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }), {});
+  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: (0, import_react14.createRef)() }), {});
 }
 
 // src/functions/gltf-loading/import-mesh.ts
@@ -2539,7 +2356,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
                 {}
               )
             };
@@ -2554,7 +2371,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
               ...data,
               geometry: child.geometry,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
                 {}
               )
             };
@@ -2568,7 +2385,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
                 {}
               )
             };
@@ -2582,7 +2399,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
                 {}
               )
             };
@@ -2867,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 {
@@ -2885,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"];
@@ -2900,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);
     }
@@ -2919,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);
@@ -2936,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,
@@ -2944,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();
@@ -2956,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) {
@@ -2988,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) {
@@ -3098,7 +3289,6 @@ function exportScene(data, fileNameOrOptions = "scene.glb") {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Controller,
   EmptyModelError,
   InnerVizij,
   ShapeMaterial,