@vizij/render 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -974,6 +974,48 @@ function InnerRenderedShape({
           );
         }
       },
+      roughness: (value) => {
+        const standard = material.current;
+        if (standard?.roughness !== void 0 && instanceOfRawNumber4(value)) {
+          standard.roughness = value;
+          standard.needsUpdate = true;
+        }
+      },
+      metalness: (value) => {
+        const standard = material.current;
+        if (standard?.metalness !== void 0 && instanceOfRawNumber4(value)) {
+          standard.metalness = value;
+          standard.needsUpdate = true;
+        }
+      },
+      shininess: (value) => {
+        const phong = material.current;
+        if (phong?.shininess !== void 0 && instanceOfRawNumber4(value)) {
+          phong.shininess = value;
+          phong.needsUpdate = true;
+        }
+      },
+      emissive: (value) => {
+        const standard = material.current;
+        if (standard?.emissive && instanceOfRawRGB3(value)) {
+          standard.emissive.setRGB(value.r, value.g, value.b);
+          standard.needsUpdate = true;
+        }
+      },
+      emissiveIntensity: (value) => {
+        const standard = material.current;
+        if (standard?.emissiveIntensity !== void 0 && instanceOfRawNumber4(value)) {
+          standard.emissiveIntensity = value;
+          standard.needsUpdate = true;
+        }
+      },
+      specular: (value) => {
+        const phong = material.current;
+        if (phong?.specular && instanceOfRawRGB3(value)) {
+          phong.specular.setRGB(value.r, value.g, value.b);
+          phong.needsUpdate = true;
+        }
+      },
       ...morphTargetSettings[2]
     },
     shape
@@ -1094,7 +1136,10 @@ var MATERIAL_FEATURE_KEYS = [
   "opacity",
   "roughness",
   "metalness",
-  "shininess"
+  "shininess",
+  "emissive",
+  "emissiveIntensity",
+  "specular"
 ];
 var MATERIAL_NAME_SUFFIXES = [
   " color",
@@ -1103,7 +1148,10 @@ var MATERIAL_NAME_SUFFIXES = [
   " opacity",
   " roughness",
   " metalness",
-  " shininess"
+  " shininess",
+  " emissive intensity",
+  " emissive",
+  " specular"
 ];
 function deriveMaterialName(shape, values) {
   for (const key of MATERIAL_FEATURE_KEYS) {
@@ -1217,12 +1265,13 @@ import { createRef } from "react";
 import { mapValues as mapValues2 } from "lodash";
 
 // src/functions/create-world-element.ts
+import { createBrowserSafeId } from "@vizij/utils";
 function createDefaultGroup(partialBody) {
   const translation = partialBody.features?.translation || { animated: false, value: { x: 0, y: 0 } };
   const rotation = partialBody.features?.rotation || { animated: false, value: { x: 0, y: 0, z: 0 } };
   const scale = partialBody.features?.scale || { animated: false, value: { x: 1, y: 1, z: 1 } };
   return {
-    id: partialBody.id || crypto.randomUUID(),
+    id: partialBody.id || createBrowserSafeId(),
     name: partialBody.name || "new-body",
     type: partialBody.type || "group",
     tags: partialBody.tags || [],
@@ -1283,7 +1332,32 @@ function removeFromTree(state, nodesToRemove) {
   });
 }
 
+// src/memoryInvestigation.ts
+function getGlobalMemoryInvestigation() {
+  return globalThis;
+}
+function updateRenderState(updater) {
+  const globalObj = getGlobalMemoryInvestigation();
+  if (!globalObj.__VIZIJ_MEMORY_INVESTIGATION__?.enabled) {
+    return;
+  }
+  if (!globalObj.__vizijMemoryDebugState) {
+    globalObj.__vizijMemoryDebugState = {};
+  }
+  if (!globalObj.__vizijMemoryDebugState.render) {
+    globalObj.__vizijMemoryDebugState.render = {};
+  }
+  updater(globalObj.__vizijMemoryDebugState.render);
+}
+function recordRenderCounter(key, delta = 1) {
+  updateRenderState((renderState) => {
+    const current = typeof renderState[key] === "number" ? Number(renderState[key]) : 0;
+    renderState[key] = current + delta;
+  });
+}
+
 // src/functions/create-animatable.ts
+import { createBrowserSafeId as createBrowserSafeId2 } from "@vizij/utils";
 function createAnimatable(value) {
   if (!value.type) {
     return null;
@@ -1293,7 +1367,7 @@ function createAnimatable(value) {
   }
   if (value.type === "euler") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: `${value.name} Rotation`,
       type: value.type,
       default: value.default ?? { x: 0, y: 0, z: 0 },
@@ -1310,7 +1384,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "vector3") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: `${value.name} Vector3`,
       type: value.type,
       default: value.default ?? { x: 0, y: 0, z: 0 },
@@ -1327,7 +1401,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "string") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: value.name,
       type: value.type,
       default: value.default ?? "Hello World",
@@ -1340,7 +1414,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "number") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: value.name,
       type: value.type,
       default: value.default ?? 0,
@@ -1353,7 +1427,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "boolean") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: value.name,
       type: value.type,
       default: value.default ?? false,
@@ -1366,7 +1440,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "rgb") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: value.name,
       type: value.type,
       default: value.default ?? { r: 0, g: 0, b: 0 },
@@ -1383,7 +1457,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "hsl") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: value.name,
       type: value.type,
       default: value.default ?? { h: 0, s: 0, l: 0 },
@@ -1403,6 +1477,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);
 enableMapSet();
@@ -1478,23 +1581,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(
@@ -1692,6 +1789,7 @@ var VizijSlice = (set, get) => ({
     );
   },
   setVizij: (scene, animatables) => {
+    recordRenderCounter("rootReplacementCount");
     set({
       world: scene,
       animatables
@@ -1699,6 +1797,7 @@ var VizijSlice = (set, get) => ({
   },
   addWorldElements(world, animatables, replace) {
     if (replace) {
+      recordRenderCounter("rootReplacementCount");
       set({ world, animatables });
     } else {
       set((state) => ({
@@ -1751,7 +1850,7 @@ import {
 import { jsx as jsx6 } from "react/jsx-runtime";
 function SelectionGlowEffect({
   enabled = false,
-  color = "#ff1010ff",
+  color = "#ff1010",
   opacity = 0.9,
   thresholdAngle = 2
 }) {
@@ -1857,6 +1956,13 @@ function Vizij({
   onPointerMissed
 }) {
   const ctx = useContext3(VizijContext);
+  useEffect7(() => {
+    recordRenderCounter("canvasMountCount");
+    recordRenderCounter("mountedCanvasCount");
+    return () => {
+      recordRenderCounter("mountedCanvasCount", -1);
+    };
+  }, []);
   if (ctx) {
     return /* @__PURE__ */ jsx7(
       Canvas,
@@ -1925,7 +2031,7 @@ function InnerVizij({
         makeDefault: true,
         position: [0, 0, 100],
         near: 0.1,
-        far: 101
+        far: 1e3
       }
     ),
     /* @__PURE__ */ jsx7(Suspense, { fallback: null, children: /* @__PURE__ */ jsx7(
@@ -2103,6 +2209,7 @@ import { Object3D as Object3D7 } from "three";
 
 // src/functions/gltf-loading/import-group.ts
 import { Object3D as Object3D6 } from "three";
+import { createBrowserSafeId as createBrowserSafeId5 } from "@vizij/utils";
 
 // src/functions/util.ts
 import { createRef as createRef2 } from "react";
@@ -2112,8 +2219,12 @@ function namespaceArrayToRefs(namespaces) {
 
 // src/functions/gltf-loading/import-mesh.ts
 import { Object3D as Object3D5 } from "three";
+import { createBrowserSafeId as createBrowserSafeId4 } from "@vizij/utils";
 
 // src/functions/gltf-loading/import-geometry.ts
+import {
+  createBrowserSafeId as createBrowserSafeId3
+} from "@vizij/utils";
 function sanitizeMorphKey(name, fallbackIndex, used) {
   const baseName = name && name.trim().length > 0 ? name.trim() : `morph_${fallbackIndex + 1}`;
   const slug = baseName.toLowerCase().replace(/[^a-z0-9]+/gi, "_").replace(/^_+|_+$/g, "");
@@ -2137,7 +2248,7 @@ function importGeometry(geometry, mesh) {
     const usedKeys = /* @__PURE__ */ new Set();
     Object.entries(mesh.morphTargetDictionary ?? {}).forEach(
       ([name, index]) => {
-        const morphId = crypto.randomUUID();
+        const morphId = createBrowserSafeId3();
         const featureKey = sanitizeMorphKey(name, index, usedKeys);
         morphIds.push(featureKey);
         features[featureKey] = {
@@ -2173,7 +2284,7 @@ function importMesh(mesh, namespaces, colorLookup) {
   let animatables = {};
   let newColorLookup = {};
   const translationAnimatable = {
-    id: crypto.randomUUID(),
+    id: createBrowserSafeId4(),
     name: `${mesh.name ?? "Mesh"} translation`,
     type: "vector3",
     default: { x: mesh.position.x, y: mesh.position.y, z: mesh.position.z },
@@ -2189,7 +2300,7 @@ function importMesh(mesh, namespaces, colorLookup) {
     [translationAnimatable.id]: translationAnimatable
   };
   const rotationAnimatable = {
-    id: crypto.randomUUID(),
+    id: createBrowserSafeId4(),
     name: `${mesh.name ?? "Mesh"} rotation`,
     type: "euler",
     default: { x: mesh.rotation.x, y: mesh.rotation.y, z: mesh.rotation.z },
@@ -2202,7 +2313,7 @@ function importMesh(mesh, namespaces, colorLookup) {
   };
   animatables = { ...animatables, [rotationAnimatable.id]: rotationAnimatable };
   const scaleAnimatable = {
-    id: crypto.randomUUID(),
+    id: createBrowserSafeId4(),
     name: `${mesh.name ?? "Mesh"} scale`,
     type: "vector3",
     default: { x: mesh.scale.x, y: mesh.scale.y, z: mesh.scale.z },
@@ -2213,56 +2324,120 @@ function importMesh(mesh, namespaces, colorLookup) {
     }
   };
   animatables = { ...animatables, [scaleAnimatable.id]: scaleAnimatable };
-  const color = mesh.material.color;
-  let useEmissive = false;
-  if (color.r === 0 && color.g === 0 && color.b === 0 && mesh.material.emissive) {
-    color.copy(mesh.material.emissive);
-    useEmissive = true;
-  }
-  const colorName = mesh.material.name;
-  const colorAnimatable = {
-    id: crypto.randomUUID(),
-    name: mesh.material.name ?? `${mesh.name ?? "Mesh"} color`,
-    type: "rgb",
-    default: { r: color.r, g: color.g, b: color.b },
-    constraints: {
-      min: [0, 0, 0],
-      max: [1, 1, 1]
-    },
+  const material = mesh.material;
+  const color = material.color;
+  const colorName = material.name;
+  const label = (suffix) => colorName ? `${colorName} ${suffix}` : `${mesh.name ?? "Mesh"} ${suffix}`;
+  const makeNumberAnimatable = (suffix, value, constraints) => ({
+    id: createBrowserSafeId4(),
+    name: label(suffix),
+    type: "number",
+    default: value,
+    constraints,
     pub: {
       public: true,
-      output: mesh.material.name ? `${mesh.material.name} color` : `${mesh.name ?? "Mesh"} color`
+      output: label(suffix)
     }
-  };
-  const opacityAnimatable = {
-    id: crypto.randomUUID(),
-    name: mesh.material.name ? `${mesh.material.name} opacity` : `${mesh.name ?? "Mesh"} opacity`,
-    type: "number",
-    default: mesh.material.opacity,
+  });
+  const makeColorAnimatable = (suffix, value) => ({
+    id: createBrowserSafeId4(),
+    name: label(suffix),
+    type: "rgb",
+    default: { r: value.r, g: value.g, b: value.b },
     constraints: {
-      min: 0,
-      max: 1
+      min: [0, 0, 0],
+      max: [1, 1, 1]
     },
     pub: {
       public: true,
-      output: mesh.material.name ? `${mesh.material.name} opacity` : `${mesh.name ?? "Mesh"} opacity`
+      output: label(suffix)
     }
+  });
+  const colorAnimatable = {
+    ...makeColorAnimatable("color", color),
+    name: material.name ?? `${mesh.name ?? "Mesh"} color`
   };
-  let colorId = colorAnimatable.id;
-  let opacityId = opacityAnimatable.id;
+  const opacityAnimatable = makeNumberAnimatable("opacity", material.opacity, {
+    min: 0,
+    max: 1
+  });
+  const materialAnimatables = [
+    colorAnimatable,
+    opacityAnimatable
+  ];
+  let roughnessAnimatable;
+  let metalnessAnimatable;
+  let emissiveAnimatable;
+  let emissiveIntensityAnimatable;
+  let shininessAnimatable;
+  let specularAnimatable;
+  if (material.isMeshStandardMaterial) {
+    roughnessAnimatable = makeNumberAnimatable(
+      "roughness",
+      material.roughness,
+      {
+        min: 0,
+        max: 1
+      }
+    );
+    metalnessAnimatable = makeNumberAnimatable(
+      "metalness",
+      material.metalness,
+      {
+        min: 0,
+        max: 1
+      }
+    );
+    emissiveAnimatable = makeColorAnimatable("emissive", material.emissive);
+    emissiveIntensityAnimatable = makeNumberAnimatable(
+      "emissive intensity",
+      material.emissiveIntensity,
+      { min: 0 }
+    );
+    materialAnimatables.push(
+      roughnessAnimatable,
+      metalnessAnimatable,
+      emissiveAnimatable,
+      emissiveIntensityAnimatable
+    );
+  } else if (mesh.material.isMeshPhongMaterial) {
+    const phong = mesh.material;
+    shininessAnimatable = makeNumberAnimatable("shininess", phong.shininess, {
+      min: 0
+    });
+    emissiveAnimatable = makeColorAnimatable("emissive", phong.emissive);
+    emissiveIntensityAnimatable = makeNumberAnimatable(
+      "emissive intensity",
+      phong.emissiveIntensity,
+      { min: 0 }
+    );
+    specularAnimatable = makeColorAnimatable("specular", phong.specular);
+    materialAnimatables.push(
+      shininessAnimatable,
+      emissiveAnimatable,
+      emissiveIntensityAnimatable,
+      specularAnimatable
+    );
+  }
+  let materialIds;
   if (colorName && colorLookup[colorName]) {
-    colorId = colorLookup[colorName][0];
-    opacityId = colorLookup[colorName][1];
-    useEmissive = colorLookup[colorName][2];
+    materialIds = colorLookup[colorName];
   } else {
-    animatables = { ...animatables, [colorAnimatable.id]: colorAnimatable };
-    animatables = { ...animatables, [opacityAnimatable.id]: opacityAnimatable };
+    materialIds = {
+      color: colorAnimatable.id,
+      opacity: opacityAnimatable.id,
+      roughness: roughnessAnimatable?.id,
+      metalness: metalnessAnimatable?.id,
+      emissive: emissiveAnimatable?.id,
+      emissiveIntensity: emissiveIntensityAnimatable?.id,
+      shininess: shininessAnimatable?.id,
+      specular: specularAnimatable?.id
+    };
+    materialAnimatables.forEach((animatable) => {
+      animatables = { ...animatables, [animatable.id]: animatable };
+    });
     if (colorName) {
-      newColorLookup[colorName] = [
-        colorAnimatable.id,
-        opacityAnimatable.id,
-        useEmissive
-      ];
+      newColorLookup[colorName] = materialIds;
     }
   }
   const [geometryFeatures, geometryAnimatables, morphTargets] = importGeometry(
@@ -2281,13 +2456,22 @@ 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 = {
     id: mesh.uuid,
     name: mesh.name,
     geometry: mesh.geometry,
-    material: getShapeMaterial(mesh, useEmissive),
+    material: getShapeMaterial(mesh),
     type: "shape",
     tags: [],
     morphTargets,
@@ -2295,8 +2479,19 @@ function importMesh(mesh, namespaces, colorLookup) {
       translation: { animated: true, value: translationAnimatable.id },
       rotation: { animated: true, value: rotationAnimatable.id },
       scale: { animated: true, value: scaleAnimatable.id },
-      color: { animated: true, value: colorId },
-      opacity: { animated: true, value: opacityId },
+      color: { animated: true, value: materialIds.color },
+      opacity: { animated: true, value: materialIds.opacity },
+      ...materialIds.roughness ? { roughness: { animated: true, value: materialIds.roughness } } : {},
+      ...materialIds.metalness ? { metalness: { animated: true, value: materialIds.metalness } } : {},
+      ...materialIds.emissive ? { emissive: { animated: true, value: materialIds.emissive } } : {},
+      ...materialIds.emissiveIntensity ? {
+        emissiveIntensity: {
+          animated: true,
+          value: materialIds.emissiveIntensity
+        }
+      } : {},
+      ...materialIds.shininess ? { shininess: { animated: true, value: materialIds.shininess } } : {},
+      ...materialIds.specular ? { specular: { animated: true, value: materialIds.specular } } : {},
       ...geometryFeatures
     },
     children: children.length > 0 ? children : void 0,
@@ -2305,11 +2500,8 @@ function importMesh(mesh, namespaces, colorLookup) {
   world = { ...world, [newShape.id]: newShape };
   return [world, animatables, newShape.id, newColorLookup];
 }
-function getShapeMaterial(mesh, useEmissive) {
+function getShapeMaterial(mesh) {
   const material = mesh.material;
-  if (useEmissive) {
-    return "basic" /* Basic */;
-  }
   if (material.isMeshStandardMaterial) {
     return "standard" /* Standard */;
   } else if (material.isMeshPhongMaterial) {
@@ -2324,6 +2516,24 @@ 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
 Object3D6.DEFAULT_UP.set(0, 0, 1);
@@ -2333,7 +2543,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
   let newColorLookup = {};
   const children = [];
   const translationAnimatable = {
-    id: crypto.randomUUID(),
+    id: createBrowserSafeId5(),
     name: `${group.name ?? "Group"} translation`,
     type: "vector3",
     default: { x: group.position.x, y: group.position.y, z: group.position.z },
@@ -2349,7 +2559,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
     [translationAnimatable.id]: translationAnimatable
   };
   const rotationAnimatable = {
-    id: crypto.randomUUID(),
+    id: createBrowserSafeId5(),
     name: `${group.name ?? "Group"} rotation`,
     type: "euler",
     default: { x: group.rotation.x, y: group.rotation.y, z: group.rotation.z },
@@ -2362,7 +2572,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
   };
   animatables = { ...animatables, [rotationAnimatable.id]: rotationAnimatable };
   const scaleAnimatable = {
-    id: crypto.randomUUID(),
+    id: createBrowserSafeId5(),
     name: `${group.name ?? "Group"} scale`,
     type: "vector3",
     default: { x: group.scale.x, y: group.scale.y, z: group.scale.z },
@@ -2383,7 +2593,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
@@ -2412,6 +2622,24 @@ 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
 Object3D7.DEFAULT_UP.set(0, 0, 1);
@@ -2537,7 +2765,10 @@ var MATERIAL_NAME_FEATURE_KEYS = [
   "opacity",
   "roughness",
   "metalness",
-  "shininess"
+  "shininess",
+  "emissive",
+  "emissiveIntensity",
+  "specular"
 ];
 var MATERIAL_NAME_SUFFIXES2 = [
   " color",
@@ -2546,7 +2777,10 @@ var MATERIAL_NAME_SUFFIXES2 = [
   " opacity",
   " roughness",
   " metalness",
-  " shininess"
+  " shininess",
+  " emissive intensity",
+  " emissive",
+  " specular"
 ];
 function applyStoredRenderableNames(object, data) {
   if (typeof data.name === "string" && data.name.length > 0) {
@@ -2722,6 +2956,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;
@@ -2759,12 +3000,29 @@ function applyVizijBundle(object, bundle) {
   const userData = object.userData && typeof object.userData === "object" ? object.userData : {};
   const originalExtensions = userData.gltfExtensions;
   let applied = false;
+  const staleCarriers = [];
   if (bundle) {
     userData.gltfExtensions = {
       ...originalExtensions ?? {},
       VIZIJ_bundle: bundle
     };
     object.userData = userData;
+    object.traverse((node) => {
+      if (node === object) {
+        return;
+      }
+      const extensions = node.userData?.gltfExtensions;
+      if (!extensions || !(BUNDLE_KEYS[0] in extensions)) {
+        return;
+      }
+      staleCarriers.push({ node, extensions });
+      const { [BUNDLE_KEYS[0]]: _stale, ...rest } = extensions;
+      if (Object.keys(rest).length > 0) {
+        node.userData.gltfExtensions = rest;
+      } else {
+        delete node.userData.gltfExtensions;
+      }
+    });
     applied = true;
   }
   return () => {
@@ -2781,6 +3039,10 @@ function applyVizijBundle(object, bundle) {
         delete object.userData;
       }
     }
+    for (const { node, extensions } of staleCarriers) {
+      node.userData.gltfExtensions = extensions;
+    }
+    staleCarriers.length = 0;
     applied = false;
   };
 }
@@ -3157,24 +3419,87 @@ 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 GLTFLoader();
-  modelLoader.setDRACOLoader(new DRACOLoader());
-  const modelData = await modelLoader.loadAsync(url);
-  const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
-  const asset = parseScene(
-    modelData.scene,
-    actualizedNamespaces,
+  const asset = await loadGLTFWithBundleInternal(
+    url,
+    namespaces,
     aggressiveImport,
     rootBounds,
-    modelData?.parser?.json,
-    modelData.animations
+    "url"
   );
   return [asset.world, asset.animatables, asset.animations];
 }
@@ -3183,11 +3508,13 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
   if (typeof URL !== "undefined" && typeof URL.createObjectURL === "function") {
     const objectUrl = URL.createObjectURL(blob);
     try {
-      const asset = await loadGLTFWithBundle(
+      const asset = await loadGLTFWithBundleInternal(
         objectUrl,
         actualizedNamespaces,
         aggressiveImport,
-        rootBounds
+        rootBounds,
+        "blob",
+        { blob }
       );
       return [asset.world, asset.animatables, asset.animations];
     } finally {
@@ -3196,19 +3523,22 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
   }
   const arrayBuffer = typeof blob.arrayBuffer === "function" ? await blob.arrayBuffer() : await new Response(blob).arrayBuffer();
   return new Promise((resolve, reject) => {
-    const loader = new GLTFLoader();
-    loader.setDRACOLoader(new DRACOLoader());
+    const loader = createTrackedGLTFLoader();
     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]);
@@ -3235,32 +3565,59 @@ 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) {
+function createTrackedGLTFLoader() {
+  recordRenderCounter("gltfLoadCount");
+  recordRenderCounter("dracoLoaderCreationCount");
   const modelLoader = new GLTFLoader();
   modelLoader.setDRACOLoader(new DRACOLoader());
+  return modelLoader;
+}
+async function loadGLTFWithBundleInternal(url, namespaces, aggressiveImport = false, rootBounds, sourceKind = "url", parserJsonFallback) {
+  if (sourceKind === "url") {
+    recordRenderCounter("gltfUrlLoadCount");
+  } else {
+    recordRenderCounter("gltfBlobLoadCount");
+  }
+  const modelLoader = createTrackedGLTFLoader();
   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
   );
 }
+async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, rootBounds, parserJsonFallback) {
+  return loadGLTFWithBundleInternal(
+    url,
+    namespaces,
+    aggressiveImport,
+    rootBounds,
+    "url",
+    parserJsonFallback
+  );
+}
 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(
+      return await loadGLTFWithBundleInternal(
         objectUrl,
         actualizedNamespaces,
         aggressiveImport,
-        rootBounds
+        rootBounds,
+        "blob",
+        { blob }
       );
     } finally {
       URL.revokeObjectURL(objectUrl);
@@ -3268,19 +3625,22 @@ async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = f
   }
   const arrayBuffer = typeof blob.arrayBuffer === "function" ? await blob.arrayBuffer() : await new Response(blob).arrayBuffer();
   return new Promise((resolve, reject) => {
-    const loader = new GLTFLoader();
-    loader.setDRACOLoader(new DRACOLoader());
+    const loader = createTrackedGLTFLoader();
     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);
@@ -3302,6 +3662,9 @@ async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = f
 // src/functions/load-gltf-blob.ts
 import { DRACOLoader as DRACOLoader2, GLTFLoader as GLTFLoader2 } from "three-stdlib";
 var loadGltfFromBlob = (blob, namespaces) => {
+  recordRenderCounter("gltfLoadCount");
+  recordRenderCounter("gltfBlobLoadCount");
+  recordRenderCounter("dracoLoaderCreationCount");
   return new Promise((resolve, reject) => {
     const loader = new GLTFLoader2();
     loader.setDRACOLoader(new DRACOLoader2());
@@ -3332,6 +3695,160 @@ var loadGltfFromBlob = (blob, namespaces) => {
 import { GLTFExporter } from "three-stdlib";
 import * as THREE6 from "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";
@@ -3346,7 +3863,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 = {
@@ -3360,33 +3885,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;
   }
 }
 export {
@@ -3405,6 +3937,7 @@ export {
   loadGLTFFromBlobWithBundle,
   loadGLTFWithBundle,
   loadGltfFromBlob,
+  parseGlbJsonChunk,
   useDefaultVizijStore,
   useFeatures,
   useVizijStore,