@vizij/render 0.0.7 → 0.1.1

package/dist/index.js

@@ -45,6 +45,7 @@ __export(index_exports, {
   loadGLTFFromBlobWithBundle: () => loadGLTFFromBlobWithBundle,
   loadGLTFWithBundle: () => loadGLTFWithBundle,
   loadGltfFromBlob: () => loadGltfFromBlob,
+  parseGlbJsonChunk: () => parseGlbJsonChunk,
   useDefaultVizijStore: () => useDefaultVizijStore,
   useFeatures: () => useFeatures,
   useVizijStore: () => useVizijStore,
@@ -55,12 +56,12 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/vizij.tsx
-var import_react10 = require("react");
+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_three2 = require("three");
+var import_fiber2 = require("@react-three/fiber");
 var import_drei3 = require("@react-three/drei");
-var import_shallow7 = require("zustand/react/shallow");
+var import_shallow8 = require("zustand/react/shallow");
 
 // src/renderables/renderable.tsx
 var import_react8 = require("react");
@@ -174,7 +175,7 @@ function InnerRenderedGroup({
   namespace,
   chain
 }) {
-  const ref = (0, import_react4.useRef)();
+  const ref = (0, import_react4.useRef)(null);
   const group = useVizijStore((0, import_shallow2.useShallow)((state) => state.world[id]));
   const refIsNull = !group.refs[namespace]?.current;
   const animatables = useVizijStore((0, import_shallow2.useShallow)((state) => state.animatables));
@@ -295,9 +296,11 @@ function InnerRenderedEllipse({
   namespace,
   chain
 }) {
-  const ellipseRef = (0, import_react5.useRef)();
-  const materialRef = (0, import_react5.useRef)();
-  const lineRef = (0, import_react5.useRef)();
+  const ellipseRef = (0, import_react5.useRef)(null);
+  const materialRef = (0, import_react5.useRef)(
+    null
+  );
+  const lineRef = (0, import_react5.useRef)(null);
   const strokeOffsetRef = (0, import_react5.useRef)(0);
   const strokeWidthRef = (0, import_react5.useRef)(0);
   const onElementClick = useVizijStore(
@@ -580,9 +583,11 @@ function InnerRenderedRectangle({
   namespace,
   chain
 }) {
-  const rectangleRef = (0, import_react6.useRef)();
-  const materialRef = (0, import_react6.useRef)();
-  const lineRef = (0, import_react6.useRef)();
+  const rectangleRef = (0, import_react6.useRef)(null);
+  const materialRef = (0, import_react6.useRef)(
+    null
+  );
+  const lineRef = (0, import_react6.useRef)(null);
   const strokeOffsetRef = (0, import_react6.useRef)(0);
   const strokeWidthRef = (0, import_react6.useRef)(0);
   const onElementClick = useVizijStore(
@@ -867,8 +872,8 @@ function InnerRenderedShape({
   namespace,
   chain
 }) {
-  const refGroup = (0, import_react7.useRef)();
-  const ref = (0, import_react7.useRef)();
+  const refGroup = (0, import_react7.useRef)(null);
+  const ref = (0, import_react7.useRef)(null);
   const shape = useVizijStore((0, import_shallow5.useShallow)((state) => state.world[id]));
   const refs = useVizijStore(
     (0, import_shallow5.useShallow)((state) => state.world[id].refs)
@@ -909,7 +914,7 @@ function InnerRenderedShape({
     }),
     [shape, animatableValues, selectionData]
   );
-  const material = (0, import_react7.useRef)();
+  const material = (0, import_react7.useRef)(null);
   const morphTargetSettings = (0, import_react7.useMemo)(() => {
     if (shape.morphTargets) {
       const dictionary = shape.morphTargets.reduce(
@@ -1430,6 +1435,35 @@ function createAnimatable(value) {
 }
 createAnimatable({ type: "euler", name: "Rotation" });
 
+// src/functions/exportable-bodies.ts
+function asGroupEntries(world) {
+  return Object.values(world).filter((entry) => entry.type === "group");
+}
+function selectExportableGroupEntries(world, filterIds) {
+  const groupEntries = asGroupEntries(world);
+  const filterSet = Array.isArray(filterIds) && filterIds.length > 0 ? new Set(filterIds) : null;
+  if (filterSet) {
+    return groupEntries.filter((entry) => filterSet.has(entry.id));
+  }
+  const rootBoundsGroups = groupEntries.filter(
+    (entry) => Boolean(entry.rootBounds)
+  );
+  if (rootBoundsGroups.length > 0) {
+    return rootBoundsGroups;
+  }
+  const explicitRootGroups = groupEntries.filter(
+    (entry) => entry.root === true
+  );
+  if (explicitRootGroups.length > 0) {
+    return explicitRootGroups;
+  }
+  const topLevelGroups = groupEntries.filter((entry) => !entry.parent);
+  if (topLevelGroups.length > 0) {
+    return topLevelGroups;
+  }
+  return groupEntries;
+}
+
 // src/store.ts
 THREE3.Object3D.DEFAULT_UP.set(0, 0, 1);
 (0, import_immer.enableMapSet)();
@@ -1505,23 +1539,17 @@ var VizijSlice = (set, get) => ({
   },
   getExportableBodies: (filterIds) => {
     const worldData = get().world;
-    if (!filterIds) {
-      const bodies = Object.values(worldData).filter((entry) => entry.type === "group" && entry.rootBounds).map((entry) => {
-        const firstNs = Object.keys(entry.refs)[0];
-        const refGroup = entry.refs[firstNs].current;
-        return refGroup;
-      });
-      return bodies;
-    } else {
-      const bodies = Object.values(worldData).filter(
-        (entry) => entry.type === "group" && entry.rootBounds && filterIds.includes(entry.id)
-      ).map((entry) => {
-        const firstNs = Object.keys(entry.refs)[0];
-        const refGroup = entry.refs[firstNs].current;
-        return refGroup;
-      });
-      return bodies;
-    }
+    const candidateGroups = selectExportableGroupEntries(
+      worldData,
+      filterIds
+    );
+    return candidateGroups.flatMap((entry) => {
+      const refs = Object.values(
+        entry.refs ?? {}
+      );
+      const resolved = refs.find((ref) => ref?.current)?.current ?? null;
+      return resolved ? [resolved] : [];
+    });
   },
   setGeometry: (id, geometry) => {
     set(
@@ -1555,6 +1583,19 @@ var VizijSlice = (set, get) => ({
       })
     );
   },
+  setValues: (writes = []) => {
+    if (writes.length === 0) {
+      return;
+    }
+    set(
+      (0, import_immer.produce)((state) => {
+        writes.forEach(({ id, namespace, value }) => {
+          const lookupId = (0, import_utils6.getLookup)(namespace, id);
+          state.values.set(lookupId, value);
+        });
+      })
+    );
+  },
   setWorldElementName: (id, value) => {
     set(
       (0, import_immer.produce)((state) => {
@@ -1749,59 +1790,163 @@ var createVizijStore = (initial) => (0, import_zustand2.create)()(
   }))
 );
 
-// src/vizij.tsx
+// src/effects/selection-glow-effect.tsx
+var import_react10 = require("react");
+var import_fiber = require("@react-three/fiber");
+var import_shallow7 = require("zustand/react/shallow");
+var import_three = require("three");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-import_three.Object3D.DEFAULT_UP.set(0, 0, 1);
+function SelectionGlowEffect({
+  enabled = false,
+  color = "#ff1010ff",
+  opacity = 0.9,
+  thresholdAngle = 2
+}) {
+  const selections = useVizijStore(
+    (0, import_shallow7.useShallow)(
+      (state) => enabled ? state.elementSelection ?? [] : []
+    )
+  );
+  if (!enabled || selections.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Fragment, { children: selections.map((selection) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    SelectionOutline,
+    {
+      selection,
+      color: selection.color ?? color,
+      opacity,
+      thresholdAngle
+    },
+    `${selection.namespace}:${selection.id}`
+  )) });
+}
+function SelectionOutline({
+  selection,
+  color,
+  opacity,
+  thresholdAngle
+}) {
+  const target = useVizijStore(
+    (0, import_shallow7.useShallow)((state) => {
+      const entry = state.world[selection.id];
+      const ref = entry?.refs?.[selection.namespace];
+      const geometry = entry?.geometry ?? null;
+      return { ref, geometry };
+    })
+  );
+  const sourceRef = target.ref;
+  const edgesGeometry = (0, import_react10.useMemo)(() => {
+    if (!target.geometry) return null;
+    const edges = new import_three.EdgesGeometry(target.geometry, thresholdAngle);
+    return edges;
+  }, [target.geometry, thresholdAngle]);
+  (0, import_react10.useEffect)(() => () => edgesGeometry?.dispose(), [edgesGeometry]);
+  const material = (0, import_react10.useMemo)(() => {
+    const mat = new import_three.LineBasicMaterial({
+      color: new import_three.Color(color),
+      transparent: true,
+      opacity,
+      blending: import_three.AdditiveBlending,
+      depthTest: false,
+      depthWrite: false,
+      toneMapped: false
+    });
+    return mat;
+  }, [color, opacity]);
+  (0, import_react10.useEffect)(() => () => material.dispose(), [material]);
+  const lineRef = (0, import_react10.useRef)(null);
+  (0, import_fiber.useFrame)(() => {
+    const source = sourceRef?.current;
+    const line = lineRef.current;
+    if (!source || !line) return;
+    copyWorldTransform(source, line);
+    line.visible = source.visible;
+  });
+  if (!sourceRef || !edgesGeometry) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "lineSegments",
+    {
+      ref: lineRef,
+      geometry: edgesGeometry,
+      material,
+      frustumCulled: false,
+      renderOrder: 1e3
+    }
+  );
+}
+var tempMatrix = new import_three.Matrix4();
+var tempPosition = new import_three.Vector3();
+var tempQuaternion = new import_three.Quaternion();
+var tempScale = new import_three.Vector3();
+function copyWorldTransform(source, target) {
+  source.updateWorldMatrix(true, false);
+  tempMatrix.copy(source.matrixWorld);
+  tempMatrix.decompose(tempPosition, tempQuaternion, tempScale);
+  target.position.copy(tempPosition);
+  target.quaternion.copy(tempQuaternion);
+  target.scale.copy(tempScale);
+  target.updateMatrix();
+}
+
+// src/vizij.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+import_three2.Object3D.DEFAULT_UP.set(0, 0, 1);
 function Vizij({
   style,
   className,
   rootId,
   namespace = "default",
   showSafeArea = false,
+  showSelectionGlow = false,
   onPointerMissed
 }) {
-  const ctx = (0, import_react10.useContext)(VizijContext);
+  const ctx = (0, import_react11.useContext)(VizijContext);
   if (ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_fiber.Canvas,
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_fiber2.Canvas,
       {
         shadows: false,
         style,
         className,
         onPointerMissed,
         gl: {
-          outputColorSpace: import_three.SRGBColorSpace,
-          toneMapping: import_three.NoToneMapping,
+          outputColorSpace: import_three2.SRGBColorSpace,
+          toneMapping: import_three2.NoToneMapping,
           antialias: true
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           MemoizedInnerVizij,
           {
             rootId,
             namespace,
-            showSafeArea
+            showSafeArea,
+            showSelectionGlow
           }
         )
       }
     );
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_fiber.Canvas,
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_fiber2.Canvas,
       {
         style,
         className,
         onPointerMissed,
         gl: {
-          outputColorSpace: import_three.SRGBColorSpace,
-          toneMapping: import_three.NoToneMapping,
+          outputColorSpace: import_three2.SRGBColorSpace,
+          toneMapping: import_three2.NoToneMapping,
           antialias: true
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           MemoizedInnerVizij,
           {
             rootId,
             namespace,
-            showSafeArea
+            showSafeArea,
+            showSelectionGlow
           }
         )
       }
@@ -1812,15 +1957,16 @@ function InnerVizij({
   rootId,
   namespace = "default",
   container,
-  showSafeArea
+  showSafeArea,
+  showSelectionGlow
 }) {
   const sceneParentSizing = container ? {
     width: container.width * container.resolution,
     height: container.height * container.resolution
   } : void 0;
-  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)(
+  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)(
       import_drei3.OrthographicCamera,
       {
         makeDefault: true,
@@ -1829,7 +1975,7 @@ function InnerVizij({
         far: 101
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       World,
       {
         rootId,
@@ -1837,27 +1983,28 @@ function InnerVizij({
         parentSizing: sceneParentSizing
       }
     ) }),
-    showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SafeAreaRenderer, { rootId })
+    showSelectionGlow && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectionGlowEffect, { enabled: true }),
+    showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SafeAreaRenderer, { rootId })
   ] });
 }
-var MemoizedInnerVizij = (0, import_react10.memo)(InnerVizij);
+var MemoizedInnerVizij = (0, import_react11.memo)(InnerVizij);
 function InnerWorld({
   rootId,
   namespace = "default",
   parentSizing
 }) {
   const [present, rootBounds] = useVizijStore(
-    (0, import_shallow7.useShallow)((state) => {
+    (0, import_shallow8.useShallow)((state) => {
       const group = state.world[rootId];
       const bounds = group?.rootBounds ?? defaultRootBounds;
       return [group !== void 0, bounds];
     })
   );
-  const { camera, size } = (0, import_fiber.useThree)((state) => ({
+  const { camera, size } = (0, import_fiber2.useThree)((state) => ({
     camera: state.camera,
     size: state.size
   }));
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const width = rootBounds.size.x;
     const height = rootBounds.size.y;
     if (camera && parentSizing === void 0 && camera.isOrthographicCamera) {
@@ -1885,9 +2032,9 @@ function InnerWorld({
       camera.updateProjectionMatrix();
     }
   }, [rootBounds, camera, parentSizing, size]);
-  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)(
+  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)(
       import_drei3.Text,
       {
         position: [0, 0, 0],
@@ -1900,7 +2047,7 @@ function InnerWorld({
     )
   ] });
 }
-var World = (0, import_react10.memo)(InnerWorld);
+var World = (0, import_react11.memo)(InnerWorld);
 function SafeAreaRenderer({ rootId }) {
   const rootBounds = useVizijStore((state) => {
     const group = state.world[rootId];
@@ -1910,7 +2057,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_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_drei3.Line,
     {
       points: [
@@ -1941,11 +2088,11 @@ var ShapeMaterial = /* @__PURE__ */ ((ShapeMaterial2) => {
 })(ShapeMaterial || {});
 
 // src/hooks/use-vizij-store-subscription.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useVizijStoreSubscription(selector, listener) {
-  const store = (0, import_react11.useContext)(VizijContext);
+  const store = (0, import_react12.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const initialValue = selector(store.getState());
     listener(initialValue);
     return store.subscribe(selector, listener);
@@ -1953,17 +2100,17 @@ function useVizijStoreSubscription(selector, listener) {
 }
 
 // src/hooks/use-vizij-store-setter.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useVizijStoreSetter() {
-  const store = (0, import_react12.useContext)(VizijContext);
+  const store = (0, import_react13.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.setState;
 }
 
 // src/hooks/use-vizij-store-getter.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useVizijStoreGetter() {
-  const store = (0, import_react13.useContext)(VizijContext);
+  const store = (0, import_react14.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.getState;
 }
@@ -1973,7 +2120,7 @@ var THREE5 = __toESM(require("three"));
 var import_three_stdlib = require("three-stdlib");
 
 // src/functions/gltf-loading/traverse-three.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var THREE4 = __toESM(require("three"));
 
 // src/functions/gltf-loading/map-features.ts
@@ -1999,19 +2146,19 @@ function mapFeatures(features) {
 }
 
 // src/functions/gltf-loading/import-scene.ts
-var import_three4 = require("three");
+var import_three5 = require("three");
 
 // src/functions/gltf-loading/import-group.ts
-var import_three3 = require("three");
+var import_three4 = require("three");
 
 // src/functions/util.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 function namespaceArrayToRefs(namespaces) {
-  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: (0, import_react14.createRef)() }), {});
+  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }), {});
 }
 
 // src/functions/gltf-loading/import-mesh.ts
-var import_three2 = require("three");
+var import_three3 = require("three");
 
 // src/functions/gltf-loading/import-geometry.ts
 function sanitizeMorphKey(name, fallbackIndex, used) {
@@ -2051,7 +2198,7 @@ function importGeometry(geometry, mesh) {
           type: "number",
           default: mesh.morphTargetInfluences?.[index] ?? 0,
           constraints: {
-            min: 0,
+            min: -1,
             max: 1
           },
           pub: {
@@ -2067,7 +2214,7 @@ function importGeometry(geometry, mesh) {
 }
 
 // src/functions/gltf-loading/import-mesh.ts
-import_three2.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three3.Object3D.DEFAULT_UP.set(0, 0, 1);
 function importMesh(mesh, namespaces, colorLookup) {
   let world = {};
   let animatables = {};
@@ -2181,6 +2328,15 @@ function importMesh(mesh, namespaces, colorLookup) {
       world = { ...world, ...newWorldItems };
       animatables = { ...animatables, ...newAnimatables };
       children.push(childId);
+    } else if (shouldImportAsGroupChild(child)) {
+      const [newWorldItems, newAnimatables, childId, newMeshColors] = importGroup(child, namespaces, {
+        ...colorLookup,
+        ...newColorLookup
+      });
+      newColorLookup = { ...newColorLookup, ...newMeshColors };
+      world = { ...world, ...newWorldItems };
+      animatables = { ...animatables, ...newAnimatables };
+      children.push(childId);
     }
   });
   const newShape = {
@@ -2224,9 +2380,27 @@ function getShapeMaterial(mesh, useEmissive) {
     return "standard" /* Standard */;
   }
 }
+function shouldImportAsGroupChild(child) {
+  if (!child.isObject3D) {
+    return false;
+  }
+  if (child.isMesh) {
+    return false;
+  }
+  if (child.isCamera) {
+    return false;
+  }
+  if (child.isLight) {
+    return false;
+  }
+  if (child.isBone) {
+    return false;
+  }
+  return true;
+}
 
 // src/functions/gltf-loading/import-group.ts
-import_three3.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three4.Object3D.DEFAULT_UP.set(0, 0, 1);
 function importGroup(group, namespaces, colorLookup, rootBounds) {
   let world = {};
   let animatables = {};
@@ -2283,7 +2457,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
       world = { ...world, ...newWorldItems };
       animatables = { ...animatables, ...newAnimatables };
       children.push(childId);
-    } else if (child.isGroup || child.isObject3D && child.children.length !== 0) {
+    } else if (shouldImportAsGroupChild2(child)) {
       const [newWorldItems, newAnimatables, childId, newMeshColors] = importGroup(child, namespaces, {
         ...colorLookup,
         ...newColorLookup
@@ -2312,9 +2486,27 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
   world = { ...world, [newGroup.id]: newGroup };
   return [world, animatables, newGroup.id, newColorLookup];
 }
+function shouldImportAsGroupChild2(child) {
+  if (!child.isObject3D) {
+    return false;
+  }
+  if (child.isMesh) {
+    return false;
+  }
+  if (child.isCamera) {
+    return false;
+  }
+  if (child.isLight) {
+    return false;
+  }
+  if (child.isBone) {
+    return false;
+  }
+  return true;
+}
 
 // src/functions/gltf-loading/import-scene.ts
-import_three4.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three5.Object3D.DEFAULT_UP.set(0, 0, 1);
 function importScene(scene, namespaces, rootBounds) {
   let world = {};
   let animatables = {};
@@ -2356,7 +2548,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
                 {}
               )
             };
@@ -2371,7 +2563,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
               ...data,
               geometry: child.geometry,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
                 {}
               )
             };
@@ -2385,7 +2577,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
                 {}
               )
             };
@@ -2399,7 +2591,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
                 {}
               )
             };
@@ -2585,9 +2777,10 @@ function deriveRootBounds(group) {
 }
 
 // src/functions/vizij-bundle.ts
+var import_utils7 = require("@vizij/utils");
 var BUNDLE_KEYS = ["VIZIJ_bundle"];
 function cloneBundle(value) {
-  return JSON.parse(JSON.stringify(value));
+  return (0, import_utils7.cloneDeepSafe)(value);
 }
 function readExtensionValue(extensionContainer) {
   for (const key of BUNDLE_KEYS) {
@@ -2621,6 +2814,13 @@ function searchParserJsonForBundle(parserJson) {
   if (!parserJson || typeof parserJson !== "object") {
     return null;
   }
+  const rootExtensions = parserJson && typeof parserJson === "object" ? parserJson.extensions : null;
+  if (rootExtensions && typeof rootExtensions === "object") {
+    const match = readExtensionValue(rootExtensions);
+    if (match) {
+      return cloneBundle(match.value);
+    }
+  }
   const nodes = Array.isArray(parserJson.nodes) ? parserJson.nodes : [];
   for (const node of nodes) {
     const extensions = node && typeof node === "object" ? node.extensions : null;
@@ -2685,6 +2885,7 @@ function applyVizijBundle(object, bundle) {
 }
 
 // src/functions/gltf-loading/extract-animations.ts
+var import_utils8 = require("@vizij/utils");
 var CHANNEL_PATH_TO_TRACK_PROPERTY = {
   translation: "position",
   rotation: "quaternion",
@@ -2700,7 +2901,7 @@ function clonePlainObject(value) {
   if (!value) {
     return void 0;
   }
-  return JSON.parse(JSON.stringify(value));
+  return (0, import_utils8.cloneDeepSafe)(value);
 }
 function inferValueSize(valueType) {
   switch (valueType) {
@@ -3055,23 +3256,94 @@ function extractVizijAnimations(parserJson, clips) {
 
 // src/functions/load-gltf.ts
 THREE5.Object3D.DEFAULT_UP.set(0, 0, 1);
+var GLB_MAGIC = 1179937895;
+var GLB_VERSION = 2;
+var GLB_HEADER_BYTES = 12;
+var GLB_CHUNK_HEADER_BYTES = 8;
+var GLB_JSON_CHUNK_TYPE = 1313821514;
 var EmptyModelError = class extends Error {
   constructor(message) {
     super(message);
     this.name = "EmptyModelError";
   }
 };
+function parseGlbJsonChunk(buffer) {
+  if (buffer.byteLength < GLB_HEADER_BYTES + GLB_CHUNK_HEADER_BYTES) {
+    return void 0;
+  }
+  const view = new DataView(buffer);
+  const magic = view.getUint32(0, true);
+  const version = view.getUint32(4, true);
+  if (magic !== GLB_MAGIC || version !== GLB_VERSION) {
+    return void 0;
+  }
+  const chunkLength = view.getUint32(GLB_HEADER_BYTES, true);
+  const chunkType = view.getUint32(GLB_HEADER_BYTES + 4, true);
+  if (chunkType !== GLB_JSON_CHUNK_TYPE) {
+    return void 0;
+  }
+  const chunkStart = GLB_HEADER_BYTES + GLB_CHUNK_HEADER_BYTES;
+  const chunkEnd = chunkStart + chunkLength;
+  if (chunkEnd > buffer.byteLength) {
+    return void 0;
+  }
+  try {
+    const chunkBytes = new Uint8Array(buffer, chunkStart, chunkLength);
+    const jsonText = new TextDecoder().decode(chunkBytes);
+    return JSON.parse(jsonText);
+  } catch {
+    return void 0;
+  }
+}
+async function resolveParserJson(parserJson, fallback) {
+  if (parserJson && typeof parserJson === "object") {
+    return parserJson;
+  }
+  if (fallback.arrayBuffer) {
+    const fromArrayBuffer = parseGlbJsonChunk(fallback.arrayBuffer);
+    if (fromArrayBuffer && typeof fromArrayBuffer === "object") {
+      return fromArrayBuffer;
+    }
+  }
+  if (fallback.blob) {
+    try {
+      const blobBuffer = typeof fallback.blob.arrayBuffer === "function" ? await fallback.blob.arrayBuffer() : await new Response(fallback.blob).arrayBuffer();
+      const fromBlob = parseGlbJsonChunk(blobBuffer);
+      if (fromBlob && typeof fromBlob === "object") {
+        return fromBlob;
+      }
+    } catch {
+    }
+  }
+  if (fallback.url && typeof fetch === "function") {
+    try {
+      const response = await fetch(fallback.url);
+      if (response.ok) {
+        const binary = await response.arrayBuffer();
+        const fromUrl = parseGlbJsonChunk(binary);
+        if (fromUrl && typeof fromUrl === "object") {
+          return fromUrl;
+        }
+      }
+    } catch {
+    }
+  }
+  return parserJson;
+}
 async function loadGLTF(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 parserJson = await resolveParserJson(modelData?.parser?.json, {
+    url
+  });
   const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
   const asset = parseScene(
     modelData.scene,
     actualizedNamespaces,
     aggressiveImport,
     rootBounds,
-    modelData?.parser?.json,
+    parserJson,
     modelData.animations
   );
   return [asset.world, asset.animatables, asset.animations];
@@ -3085,7 +3357,8 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
         objectUrl,
         actualizedNamespaces,
         aggressiveImport,
-        rootBounds
+        rootBounds,
+        { blob }
       );
       return [asset.world, asset.animatables, asset.animations];
     } finally {
@@ -3099,14 +3372,18 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
     loader.parse(
       arrayBuffer,
       "",
-      (gltf) => {
+      async (gltf) => {
         try {
+          const parserJson = await resolveParserJson(
+            gltf?.parser?.json,
+            { arrayBuffer }
+          );
           const asset = parseScene(
             gltf.scene,
             actualizedNamespaces,
             aggressiveImport,
             rootBounds,
-            gltf?.parser?.json,
+            parserJson,
             gltf.animations
           );
           resolve([asset.world, asset.animatables, asset.animations]);
@@ -3133,19 +3410,23 @@ function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson,
   );
   const bundle = extractVizijBundle(scene, parserJson);
   const animations = extractVizijAnimations(parserJson, clips);
-  return { world, animatables, bundle, animations };
+  return { world, animatables, bundle, animations, scene };
 }
-async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, rootBounds) {
+async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, rootBounds, parserJsonFallback) {
   const modelLoader = new import_three_stdlib.GLTFLoader();
   modelLoader.setDRACOLoader(new import_three_stdlib.DRACOLoader());
   const modelData = await modelLoader.loadAsync(url);
+  const parserJson = await resolveParserJson(modelData?.parser?.json, {
+    url,
+    ...parserJsonFallback
+  });
   const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
   return parseScene(
     modelData.scene,
     actualizedNamespaces,
     aggressiveImport,
     rootBounds,
-    modelData?.parser?.json,
+    parserJson,
     modelData.animations
   );
 }
@@ -3158,7 +3439,8 @@ async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = f
         objectUrl,
         actualizedNamespaces,
         aggressiveImport,
-        rootBounds
+        rootBounds,
+        { blob }
       );
     } finally {
       URL.revokeObjectURL(objectUrl);
@@ -3171,14 +3453,18 @@ async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = f
     loader.parse(
       arrayBuffer,
       "",
-      (gltf) => {
+      async (gltf) => {
         try {
+          const parserJson = await resolveParserJson(
+            gltf?.parser?.json,
+            { arrayBuffer }
+          );
           const asset = parseScene(
             gltf.scene,
             actualizedNamespaces,
             aggressiveImport,
             rootBounds,
-            gltf?.parser?.json,
+            parserJson,
             gltf.animations
           );
           resolve(asset);
@@ -3230,6 +3516,160 @@ 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 normalizeExportError(error) {
+  if (error instanceof Error) {
+    return error;
+  }
+  if (typeof error === "string") {
+    return new Error(error);
+  }
+  return new Error("Failed to export scene.");
+}
+function triggerBlobDownload(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.style.display = "none";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+var GLB_MAGIC2 = 1179937895;
+var GLB_VERSION2 = 2;
+var GLB_JSON_CHUNK_TYPE2 = 1313821514;
+var GLB_HEADER_BYTES2 = 12;
+var GLB_CHUNK_HEADER_BYTES2 = 8;
+var GLB_JSON_PADDING_BYTE = 32;
+function isNearlyEqual(a, b, epsilon = 1e-6) {
+  return Math.abs(a - b) <= epsilon;
+}
+function isIdentityTransformNode(node) {
+  const translation = node.translation;
+  if (Array.isArray(translation) && (translation.length !== 3 || !isNearlyEqual(Number(translation[0]), 0) || !isNearlyEqual(Number(translation[1]), 0) || !isNearlyEqual(Number(translation[2]), 0))) {
+    return false;
+  }
+  const rotation = node.rotation;
+  if (Array.isArray(rotation) && (rotation.length !== 4 || !isNearlyEqual(Number(rotation[0]), 0) || !isNearlyEqual(Number(rotation[1]), 0) || !isNearlyEqual(Number(rotation[2]), 0) || !isNearlyEqual(Number(rotation[3]), 1))) {
+    return false;
+  }
+  const scale = node.scale;
+  if (Array.isArray(scale) && (scale.length !== 3 || !isNearlyEqual(Number(scale[0]), 1) || !isNearlyEqual(Number(scale[1]), 1) || !isNearlyEqual(Number(scale[2]), 1))) {
+    return false;
+  }
+  return true;
+}
+function isPassThroughWrapperNode(node) {
+  if (!node || typeof node !== "object") {
+    return false;
+  }
+  if (!Array.isArray(node.children) || node.children.length === 0) {
+    return false;
+  }
+  const hasOnlyNumericChildren = node.children.every(
+    (index) => Number.isInteger(index)
+  );
+  if (!hasOnlyNumericChildren) {
+    return false;
+  }
+  if (node.mesh !== void 0 || node.camera !== void 0 || node.skin !== void 0) {
+    return false;
+  }
+  if (node.extensions && typeof node.extensions === "object" && Object.keys(node.extensions).length > 0) {
+    return false;
+  }
+  return isIdentityTransformNode(node);
+}
+function normalizeExportedSceneJson(json, fallbackSceneName) {
+  if (!json || typeof json !== "object") {
+    return false;
+  }
+  if (!Array.isArray(json.scenes) || !Array.isArray(json.nodes)) {
+    return false;
+  }
+  const sceneIndexRaw = json.scene;
+  const sceneIndex = typeof sceneIndexRaw === "number" && Number.isInteger(sceneIndexRaw) ? sceneIndexRaw : 0;
+  const sceneDef = json.scenes[sceneIndex];
+  if (!sceneDef || typeof sceneDef !== "object") {
+    return false;
+  }
+  let changed = false;
+  let wrapperNodeName;
+  if (Array.isArray(sceneDef.nodes) && sceneDef.nodes.length === 1) {
+    const wrapperIndex = sceneDef.nodes[0];
+    if (Number.isInteger(wrapperIndex)) {
+      const wrapperNode = json.nodes[wrapperIndex];
+      if (isPassThroughWrapperNode(wrapperNode)) {
+        sceneDef.nodes = [...wrapperNode.children];
+        wrapperNodeName = typeof wrapperNode.name === "string" ? wrapperNode.name : void 0;
+        changed = true;
+      }
+    }
+  }
+  const currentSceneName = typeof sceneDef.name === "string" ? sceneDef.name.trim() : "";
+  if (currentSceneName === "AuxScene") {
+    const nextSceneName = (wrapperNodeName?.trim() || fallbackSceneName?.trim() || "Scene").trim();
+    if (nextSceneName.length > 0 && nextSceneName !== currentSceneName) {
+      sceneDef.name = nextSceneName;
+      changed = true;
+    }
+  }
+  return changed;
+}
+function sanitizeExportedGlb(buffer, fallbackSceneName) {
+  if (buffer.byteLength < GLB_HEADER_BYTES2 + GLB_CHUNK_HEADER_BYTES2) {
+    return buffer;
+  }
+  const originalBytes = new Uint8Array(buffer);
+  const view = new DataView(buffer);
+  const magic = view.getUint32(0, true);
+  const version = view.getUint32(4, true);
+  if (magic !== GLB_MAGIC2 || version !== GLB_VERSION2) {
+    return buffer;
+  }
+  const jsonChunkLength = view.getUint32(GLB_HEADER_BYTES2, true);
+  const jsonChunkType = view.getUint32(GLB_HEADER_BYTES2 + 4, true);
+  if (jsonChunkType !== GLB_JSON_CHUNK_TYPE2) {
+    return buffer;
+  }
+  const jsonChunkStart = GLB_HEADER_BYTES2 + GLB_CHUNK_HEADER_BYTES2;
+  const jsonChunkEnd = jsonChunkStart + jsonChunkLength;
+  if (jsonChunkEnd > originalBytes.length) {
+    return buffer;
+  }
+  let jsonPayload;
+  try {
+    const jsonText = new TextDecoder().decode(
+      originalBytes.slice(jsonChunkStart, jsonChunkEnd)
+    );
+    jsonPayload = JSON.parse(jsonText);
+  } catch {
+    return buffer;
+  }
+  const changed = normalizeExportedSceneJson(jsonPayload, fallbackSceneName);
+  if (!changed) {
+    return buffer;
+  }
+  const encodedJson = new TextEncoder().encode(JSON.stringify(jsonPayload));
+  const paddedJsonLength = encodedJson.length + 3 & ~3;
+  const paddedJson = new Uint8Array(paddedJsonLength);
+  paddedJson.fill(GLB_JSON_PADDING_BYTE);
+  paddedJson.set(encodedJson);
+  const remainingChunks = originalBytes.slice(jsonChunkEnd);
+  const totalLength = GLB_HEADER_BYTES2 + GLB_CHUNK_HEADER_BYTES2 + paddedJsonLength + remainingChunks.length;
+  const sanitized = new ArrayBuffer(totalLength);
+  const sanitizedBytes = new Uint8Array(sanitized);
+  const sanitizedView = new DataView(sanitized);
+  sanitizedView.setUint32(0, GLB_MAGIC2, true);
+  sanitizedView.setUint32(4, GLB_VERSION2, true);
+  sanitizedView.setUint32(8, totalLength, true);
+  sanitizedView.setUint32(GLB_HEADER_BYTES2, paddedJsonLength, true);
+  sanitizedView.setUint32(GLB_HEADER_BYTES2 + 4, GLB_JSON_CHUNK_TYPE2, true);
+  sanitizedBytes.set(paddedJson, jsonChunkStart);
+  sanitizedBytes.set(remainingChunks, jsonChunkStart + paddedJsonLength);
+  return sanitized;
+}
 function exportScene(data, fileNameOrOptions = "scene.glb") {
   const options = typeof fileNameOrOptions === "string" ? { fileName: fileNameOrOptions } : fileNameOrOptions ?? {};
   const fileName = options.fileName ?? "scene.glb";
@@ -3244,7 +3684,15 @@ function exportScene(data, fileNameOrOptions = "scene.glb") {
       }
     }
   }));
-  const detachBundle = shouldAttachBundle && options.bundle ? applyVizijBundle(data, options.bundle) : () => {
+  const sourceRoot = data;
+  const exportRoot = sourceRoot instanceof THREE6.Scene ? sourceRoot : sourceRoot.clone(true);
+  const exportTarget = exportRoot instanceof THREE6.Scene ? exportRoot : (() => {
+    const scene = new THREE6.Scene();
+    scene.name = data.name?.trim() || "Scene";
+    scene.add(exportRoot);
+    return scene;
+  })();
+  const detachBundle = shouldAttachBundle && options.bundle ? applyVizijBundle(exportRoot, options.bundle) : () => {
   };
   const binary = options.binary ?? true;
   const exporterOptions = {
@@ -3258,33 +3706,40 @@ function exportScene(data, fileNameOrOptions = "scene.glb") {
   }
   try {
     exporter.parse(
-      data,
+      exportTarget,
       (gltf) => {
         detachBundle();
         if (!(gltf instanceof ArrayBuffer)) {
-          throw new Error("Failed to export scene!");
+          const error = new Error("Failed to export scene.");
+          options.onError?.(error);
+          return;
         }
-        const link = document.createElement("a");
-        link.href = URL.createObjectURL(
-          new Blob([gltf], {
-            type: "application/octet-stream"
-          })
+        const sanitizedGltf = sanitizeExportedGlb(
+          gltf,
+          data.name?.trim() || void 0
         );
         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);
+        triggerBlobDownload(
+          new Blob([sanitizedGltf], {
+            type: "application/octet-stream"
+          }),
+          downloadName
+        );
+        options.onComplete?.();
       },
-      () => {
+      (error) => {
         detachBundle();
+        options.onError?.(normalizeExportError(error));
       },
       exporterOptions
     );
   } catch (error) {
     detachBundle();
-    throw error;
+    const normalizedError = normalizeExportError(error);
+    options.onError?.(normalizedError);
+    throw normalizedError;
   }
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -3304,6 +3759,7 @@ function exportScene(data, fileNameOrOptions = "scene.glb") {
   loadGLTFFromBlobWithBundle,
   loadGLTFWithBundle,
   loadGltfFromBlob,
+  parseGlbJsonChunk,
   useDefaultVizijStore,
   useFeatures,
   useVizijStore,