@vizij/render 0.0.2 → 0.0.4

package/dist/index.js

@@ -30,17 +30,20 @@ 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,
   Vizij: () => Vizij,
   VizijContext: () => VizijContext,
   VizijSlice: () => VizijSlice,
+  applyVizijBundle: () => applyVizijBundle,
   createVizijStore: () => createVizijStore,
   exportScene: () => exportScene,
+  extractVizijBundle: () => extractVizijBundle,
   loadGLTF: () => loadGLTF,
   loadGLTFFromBlob: () => loadGLTFFromBlob,
+  loadGLTFFromBlobWithBundle: () => loadGLTFFromBlobWithBundle,
+  loadGLTFWithBundle: () => loadGLTFWithBundle,
   loadGltfFromBlob: () => loadGltfFromBlob,
   useDefaultVizijStore: () => useDefaultVizijStore,
   useFeatures: () => useFeatures,
@@ -51,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");
@@ -73,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)) {
@@ -309,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);
       }
@@ -356,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) {
@@ -387,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);
@@ -421,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;
@@ -442,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;
@@ -451,7 +262,7 @@ function InnerRenderedGroup({
     },
     [setHoveredElement]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "group",
     {
       ref,
@@ -459,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,
@@ -471,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) {
@@ -510,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)
@@ -525,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,
@@ -539,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,
@@ -555,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;
@@ -581,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,
@@ -607,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,
@@ -620,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;
@@ -632,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,
@@ -658,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(
@@ -673,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(
@@ -686,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;
@@ -700,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,
@@ -730,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,
@@ -744,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;
@@ -759,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) {
@@ -795,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)
@@ -810,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,
@@ -824,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,
@@ -840,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;
@@ -866,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,
@@ -892,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,
@@ -905,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;
@@ -917,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,
@@ -943,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(
@@ -958,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(
@@ -971,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],
@@ -982,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,
@@ -1016,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,
@@ -1030,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;
@@ -1045,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) {
@@ -1074,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)
@@ -1098,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 }),
@@ -1109,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;
           }
         };
@@ -1124,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,
@@ -1140,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;
@@ -1168,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,
@@ -1194,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;
     }
@@ -1219,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,
@@ -1251,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",
@@ -1259,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",
@@ -1267,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",
@@ -1275,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",
@@ -1283,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",
@@ -1291,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,
@@ -1304,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",
@@ -1352,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];
@@ -1372,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,
@@ -1385,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,
@@ -1395,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,
@@ -1405,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,
@@ -1419,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
@@ -1459,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,
@@ -1477,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);
@@ -1722,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) {
@@ -1869,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;
       })
     );
@@ -1889,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];
       })
     );
@@ -1939,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,
@@ -1949,16 +1760,16 @@ 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)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           MemoizedInnerVizij,
           {
             rootId,
@@ -1969,13 +1780,13 @@ 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)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           MemoizedInnerVizij,
           {
             rootId,
@@ -1997,9 +1808,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,
@@ -2008,7 +1819,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,
@@ -2016,17 +1827,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];
@@ -2036,7 +1847,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) {
@@ -2064,9 +1875,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],
@@ -2079,7 +1890,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];
@@ -2089,7 +1900,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: [
@@ -2120,11 +1931,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);
@@ -2132,17 +1943,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;
 }
@@ -2152,7 +1963,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
@@ -2184,9 +1995,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
@@ -2521,7 +2332,9 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
   });
   const useRobotData = !aggressiveImport || hasRobotData;
   if (useRobotData) {
-    group.traverse((child) => {
+    const stack = [group];
+    while (stack.length > 0) {
+      const child = stack.pop();
       if (child.userData?.gltfExtensions?.RobotData) {
         const data = child.userData.gltfExtensions.RobotData;
         applyStoredRenderableNames(child, data);
@@ -2533,7 +2346,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)() }),
                 {}
               )
             };
@@ -2548,7 +2361,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)() }),
                 {}
               )
             };
@@ -2562,7 +2375,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)() }),
                 {}
               )
             };
@@ -2576,7 +2389,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)() }),
                 {}
               )
             };
@@ -2590,7 +2403,10 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             throw new Error(`Unhandled type`);
         }
       }
-    });
+      if (child.children) {
+        stack.push(...child.children);
+      }
+    }
   } else {
     const derivedRootBounds = rootBounds ?? deriveRootBounds(group);
     if (!derivedRootBounds) {
@@ -2758,6 +2574,106 @@ function deriveRootBounds(group) {
   };
 }
 
+// src/functions/vizij-bundle.ts
+var BUNDLE_KEYS = ["VIZIJ_bundle"];
+function cloneBundle(value) {
+  return JSON.parse(JSON.stringify(value));
+}
+function readExtensionValue(extensionContainer) {
+  for (const key of BUNDLE_KEYS) {
+    if (extensionContainer && Object.prototype.hasOwnProperty.call(extensionContainer, key)) {
+      const value = extensionContainer[key];
+      if (value && typeof value === "object") {
+        return { key, value };
+      }
+    }
+  }
+  return null;
+}
+function searchObjectForBundle(object) {
+  const stack = [object];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    const extensions = current?.userData?.gltfExtensions ?? current?.userData?.extensions ?? null;
+    if (extensions && typeof extensions === "object") {
+      const match = readExtensionValue(extensions);
+      if (match) {
+        return cloneBundle(match.value);
+      }
+    }
+    if (current.children && current.children.length > 0) {
+      stack.push(...current.children);
+    }
+  }
+  return null;
+}
+function searchParserJsonForBundle(parserJson) {
+  if (!parserJson || typeof parserJson !== "object") {
+    return null;
+  }
+  const nodes = Array.isArray(parserJson.nodes) ? parserJson.nodes : [];
+  for (const node of nodes) {
+    const extensions = node && typeof node === "object" ? node.extensions : null;
+    if (extensions && typeof extensions === "object") {
+      const match = readExtensionValue(extensions);
+      if (match) {
+        return cloneBundle(match.value);
+      }
+    }
+  }
+  const scenes = Array.isArray(parserJson.scenes) ? parserJson.scenes : [];
+  for (const scene of scenes) {
+    const extensions = scene && typeof scene === "object" ? scene.extensions : null;
+    if (extensions && typeof extensions === "object") {
+      const match = readExtensionValue(extensions);
+      if (match) {
+        return cloneBundle(match.value);
+      }
+    }
+  }
+  return null;
+}
+function extractVizijBundle(object, parserJson) {
+  const fromObject = searchObjectForBundle(object);
+  if (fromObject) {
+    return fromObject;
+  }
+  const fromParser = searchParserJsonForBundle(parserJson);
+  if (fromParser) {
+    return fromParser;
+  }
+  return null;
+}
+function applyVizijBundle(object, bundle) {
+  const userData = object.userData && typeof object.userData === "object" ? object.userData : {};
+  const originalExtensions = userData.gltfExtensions;
+  let applied = false;
+  if (bundle) {
+    userData.gltfExtensions = {
+      ...originalExtensions ?? {},
+      VIZIJ_bundle: bundle
+    };
+    object.userData = userData;
+    applied = true;
+  }
+  return () => {
+    if (!applied) {
+      return;
+    }
+    if (originalExtensions) {
+      userData.gltfExtensions = originalExtensions;
+    } else {
+      if (userData.gltfExtensions) {
+        delete userData.gltfExtensions;
+      }
+      if (Object.keys(userData).length === 0) {
+        delete object.userData;
+      }
+    }
+    applied = false;
+  };
+}
+
 // src/functions/load-gltf.ts
 THREE5.Object3D.DEFAULT_UP.set(0, 0, 1);
 var EmptyModelError = class extends Error {
@@ -2771,19 +2687,91 @@ async function loadGLTF(url, namespaces, aggressiveImport = false, rootBounds) {
   modelLoader.setDRACOLoader(new import_three_stdlib.DRACOLoader());
   const modelData = await modelLoader.loadAsync(url);
   const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
-  return traverseThree(
+  const asset = parseScene(
     modelData.scene,
     actualizedNamespaces,
     aggressiveImport,
-    rootBounds
+    rootBounds,
+    modelData?.parser?.json
   );
+  return [asset.world, asset.animatables];
 }
 async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, rootBounds) {
   const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
   if (typeof URL !== "undefined" && typeof URL.createObjectURL === "function") {
     const objectUrl = URL.createObjectURL(blob);
     try {
-      return await loadGLTF(
+      const asset = await loadGLTFWithBundle(
+        objectUrl,
+        actualizedNamespaces,
+        aggressiveImport,
+        rootBounds
+      );
+      return [asset.world, asset.animatables];
+    } finally {
+      URL.revokeObjectURL(objectUrl);
+    }
+  }
+  const arrayBuffer = typeof blob.arrayBuffer === "function" ? await blob.arrayBuffer() : await new Response(blob).arrayBuffer();
+  return new Promise((resolve, reject) => {
+    const loader = new import_three_stdlib.GLTFLoader();
+    loader.setDRACOLoader(new import_three_stdlib.DRACOLoader());
+    loader.parse(
+      arrayBuffer,
+      "",
+      (gltf) => {
+        try {
+          const asset = parseScene(
+            gltf.scene,
+            actualizedNamespaces,
+            aggressiveImport,
+            rootBounds,
+            gltf?.parser?.json
+          );
+          resolve([asset.world, asset.animatables]);
+        } catch (error) {
+          if (error instanceof Error) {
+            reject(error);
+          } else {
+            reject(new Error(String(error)));
+          }
+        }
+      },
+      (error) => {
+        reject(new Error(`Error loading GLTF: ${error.message}`));
+      }
+    );
+  });
+}
+function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson) {
+  const [world, animatables] = traverseThree(
+    scene,
+    namespaces,
+    aggressiveImport,
+    rootBounds
+  );
+  const bundle = extractVizijBundle(scene, parserJson);
+  return { world, animatables, bundle };
+}
+async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, rootBounds) {
+  const modelLoader = new import_three_stdlib.GLTFLoader();
+  modelLoader.setDRACOLoader(new import_three_stdlib.DRACOLoader());
+  const modelData = await modelLoader.loadAsync(url);
+  const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
+  return parseScene(
+    modelData.scene,
+    actualizedNamespaces,
+    aggressiveImport,
+    rootBounds,
+    modelData?.parser?.json
+  );
+}
+async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = false, rootBounds) {
+  const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
+  if (typeof URL !== "undefined" && typeof URL.createObjectURL === "function") {
+    const objectUrl = URL.createObjectURL(blob);
+    try {
+      return await loadGLTFWithBundle(
         objectUrl,
         actualizedNamespaces,
         aggressiveImport,
@@ -2802,14 +2790,14 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
       "",
       (gltf) => {
         try {
-          resolve(
-            traverseThree(
-              gltf.scene,
-              actualizedNamespaces,
-              aggressiveImport,
-              rootBounds
-            )
+          const asset = parseScene(
+            gltf.scene,
+            actualizedNamespaces,
+            aggressiveImport,
+            rootBounds,
+            gltf?.parser?.json
           );
+          resolve(asset);
         } catch (error) {
           if (error instanceof Error) {
             reject(error);
@@ -2858,7 +2846,11 @@ var loadGltfFromBlob = (blob, namespaces) => {
 var import_three_stdlib3 = require("three-stdlib");
 var THREE6 = __toESM(require("three"));
 THREE6.Object3D.DEFAULT_UP.set(0, 0, 1);
-function exportScene(data, fileName = "scene.glb") {
+function exportScene(data, fileNameOrOptions = "scene.glb") {
+  const options = typeof fileNameOrOptions === "string" ? { fileName: fileNameOrOptions } : fileNameOrOptions ?? {};
+  const fileName = options.fileName ?? "scene.glb";
+  const animationClips = Array.isArray(options.animations) ? options.animations.filter(Boolean) : [];
+  const shouldAttachBundle = Boolean(options.bundle);
   const exporter = new import_three_stdlib3.GLTFExporter();
   exporter.register(() => ({
     writeMesh(mesh, meshDef) {
@@ -2868,48 +2860,65 @@ function exportScene(data, fileName = "scene.glb") {
       }
     }
   }));
-  exporter.parse(
-    data,
-    (gltf) => {
-      if (!(gltf instanceof ArrayBuffer)) {
-        throw new Error("Failed to export scene!");
-      }
-      const link = document.createElement("a");
-      link.href = URL.createObjectURL(
-        new Blob([gltf], {
-          type: "application/octet-stream"
-        })
-      );
-      const trimmed = fileName.trim();
-      const safeFileName = trimmed.length > 0 ? trimmed : "scene.glb";
-      const downloadName = safeFileName.toLowerCase().endsWith(".glb") ? safeFileName : `${safeFileName}.glb`;
-      link.download = downloadName;
-      link.click();
-      URL.revokeObjectURL(link.href);
-    },
-    () => {
-    },
-    {
-      trs: true,
-      onlyVisible: false,
-      binary: true,
-      includeCustomExtensions: true
-    }
-  );
+  const detachBundle = shouldAttachBundle && options.bundle ? applyVizijBundle(data, options.bundle) : () => {
+  };
+  const binary = options.binary ?? true;
+  const exporterOptions = {
+    trs: true,
+    onlyVisible: false,
+    binary,
+    includeCustomExtensions: true
+  };
+  if (animationClips.length > 0) {
+    exporterOptions.animations = animationClips;
+  }
+  try {
+    exporter.parse(
+      data,
+      (gltf) => {
+        detachBundle();
+        if (!(gltf instanceof ArrayBuffer)) {
+          throw new Error("Failed to export scene!");
+        }
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(
+          new Blob([gltf], {
+            type: "application/octet-stream"
+          })
+        );
+        const trimmed = fileName.trim();
+        const safeFileName = trimmed.length > 0 ? trimmed : "scene.glb";
+        const downloadName = safeFileName.toLowerCase().endsWith(".glb") ? safeFileName : `${safeFileName}.glb`;
+        link.download = downloadName;
+        link.click();
+        URL.revokeObjectURL(link.href);
+      },
+      () => {
+        detachBundle();
+      },
+      exporterOptions
+    );
+  } catch (error) {
+    detachBundle();
+    throw error;
+  }
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Controller,
   EmptyModelError,
   InnerVizij,
   ShapeMaterial,
   Vizij,
   VizijContext,
   VizijSlice,
+  applyVizijBundle,
   createVizijStore,
   exportScene,
+  extractVizijBundle,
   loadGLTF,
   loadGLTFFromBlob,
+  loadGLTFFromBlobWithBundle,
+  loadGLTFWithBundle,
   loadGltfFromBlob,
   useDefaultVizijStore,
   useFeatures,