@vizij/render 0.1.1 → 1.0.0

package/dist/index.js

@@ -30,22 +30,33 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  DEFAULT_TONE_MAPPING_MODE: () => DEFAULT_TONE_MAPPING_MODE,
   EmptyModelError: () => EmptyModelError,
   InnerVizij: () => InnerVizij,
   ShapeMaterial: () => ShapeMaterial,
+  TONE_MAPPING_LABELS: () => TONE_MAPPING_LABELS,
+  TONE_MAPPING_MODES: () => TONE_MAPPING_MODES,
   Vizij: () => Vizij,
   VizijContext: () => VizijContext,
   VizijSlice: () => VizijSlice,
   applyVizijBundle: () => applyVizijBundle,
+  buildSceneGraph: () => buildSceneGraph,
   createVizijStore: () => createVizijStore,
+  deriveMorphFeatureKeys: () => deriveMorphFeatureKeys,
+  deriveRootBounds: () => deriveRootBounds,
   exportScene: () => exportScene,
   extractVizijBundle: () => extractVizijBundle,
+  isToneMappingMode: () => isToneMappingMode,
   loadGLTF: () => loadGLTF,
   loadGLTFFromBlob: () => loadGLTFFromBlob,
   loadGLTFFromBlobWithBundle: () => loadGLTFFromBlobWithBundle,
   loadGLTFWithBundle: () => loadGLTFWithBundle,
-  loadGltfFromBlob: () => loadGltfFromBlob,
+  normalizeToneMappingMode: () => normalizeToneMappingMode,
   parseGlbJsonChunk: () => parseGlbJsonChunk,
+  patchGlbJson: () => patchGlbJson,
+  patchVizijBundleMetadata: () => patchVizijBundleMetadata,
+  resolveToneMapping: () => resolveToneMapping,
+  sanitizeMorphKey: () => sanitizeMorphKey,
   useDefaultVizijStore: () => useDefaultVizijStore,
   useFeatures: () => useFeatures,
   useVizijStore: () => useVizijStore,
@@ -56,9 +67,9 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/vizij.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_react_error_boundary = require("react-error-boundary");
-var import_three2 = require("three");
+var import_three3 = require("three");
 var import_fiber2 = require("@react-three/fiber");
 var import_drei3 = require("@react-three/drei");
 var import_shallow8 = require("zustand/react/shallow");
@@ -136,35 +147,33 @@ function useFeatures(namespace, features, callbacks, debugInfo) {
   }, [features, callbacks, store, debugInfo, namespace]);
 }
 
-// src/functions/create-stored-data.ts
-var import_lodash2 = require("lodash");
-
 // src/functions/create-stored-features.ts
-var import_lodash = require("lodash");
 function createStoredFeatures(objectFeatures, animatableValues) {
-  return (0, import_lodash.mapValues)(objectFeatures, (feat) => {
-    if (feat.animated) {
-      const storedFeat = {
-        animated: true,
-        value: animatableValues[feat.value],
-        ...feat.label ? { label: feat.label } : {}
-      };
-      return storedFeat;
-    } else {
+  const stored = Object.entries(objectFeatures).map(
+    ([key, feat]) => {
+      if (feat.animated) {
+        const storedFeat = {
+          animated: true,
+          value: animatableValues[feat.value],
+          ...feat.label ? { label: feat.label } : {}
+        };
+        return [key, storedFeat];
+      }
       const staticFeature = feat;
-      return staticFeature.label ? { ...staticFeature } : staticFeature;
+      return [key, staticFeature.label ? { ...staticFeature } : staticFeature];
     }
-  });
+  );
+  return Object.fromEntries(stored);
 }
 
 // src/functions/create-stored-data.ts
 function createStoredRenderable(data, animatableValues) {
-  const d = (0, import_lodash2.omit)(data, "refs", "geometry");
+  const { geometry: _geometry, ...stored } = data;
   const storedFeatures = createStoredFeatures(
     data.features,
     animatableValues
   );
-  return { ...d, features: storedFeatures };
+  return { ...stored, features: storedFeatures };
 }
 
 // src/renderables/group.tsx
@@ -177,7 +186,9 @@ function InnerRenderedGroup({
 }) {
   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 refIsNull = useVizijStore(
+    (state) => !state.refs[id]?.[namespace]?.current
+  );
   const animatables = useVizijStore((0, import_shallow2.useShallow)((state) => state.animatables));
   const setHoveredElement = useVizijStore(
     (0, import_shallow2.useShallow)((state) => state.setHoveredElement)
@@ -312,7 +323,9 @@ function InnerRenderedEllipse({
   const ellipse = useVizijStore(
     (0, import_shallow3.useShallow)((state) => state.world[id])
   );
-  const refIsNull = !ellipse.refs[namespace]?.current;
+  const refIsNull = useVizijStore(
+    (state) => !state.refs[id]?.[namespace]?.current
+  );
   const animatables = useVizijStore((0, import_shallow3.useShallow)((state) => state.animatables));
   const animatableValues = (0, import_react5.useMemo)(() => {
     const av = {};
@@ -599,7 +612,9 @@ function InnerRenderedRectangle({
   const rectangle = useVizijStore(
     (0, import_shallow4.useShallow)((state) => state.world[id])
   );
-  const refIsNull = !rectangle.refs[namespace]?.current;
+  const refIsNull = useVizijStore(
+    (state) => !state.refs[id]?.[namespace]?.current
+  );
   const animatables = useVizijStore((0, import_shallow4.useShallow)((state) => state.animatables));
   const animatableValues = (0, import_react6.useMemo)(() => {
     const av = {};
@@ -865,6 +880,61 @@ var import_react7 = require("react");
 var THREE2 = __toESM(require("three"));
 var import_shallow5 = require("zustand/react/shallow");
 var import_utils5 = require("@vizij/utils");
+
+// src/functions/material-name.ts
+var MATERIAL_FEATURE_KEYS = [
+  "color",
+  "opacity",
+  "roughness",
+  "metalness",
+  "shininess",
+  "emissive",
+  "emissiveIntensity",
+  "specular"
+];
+var MATERIAL_NAME_SUFFIXES = [
+  " color",
+  " colours",
+  " colour",
+  " opacity",
+  " roughness",
+  " metalness",
+  " shininess",
+  " emissive intensity",
+  " emissive",
+  " specular"
+];
+function deriveMaterialName(shape, values) {
+  for (const key of MATERIAL_FEATURE_KEYS) {
+    const feature = shape.features[key];
+    if (feature && feature.animated) {
+      const animatable = values[feature.value];
+      const candidate = extractMaterialName(animatable?.name);
+      if (candidate) {
+        return candidate;
+      }
+    }
+  }
+  return void 0;
+}
+function extractMaterialName(name) {
+  if (!name) {
+    return void 0;
+  }
+  const trimmed = name.trim();
+  if (!trimmed) {
+    return void 0;
+  }
+  const lowered = trimmed.toLowerCase();
+  for (const suffix of MATERIAL_NAME_SUFFIXES) {
+    if (lowered.endsWith(suffix)) {
+      return trimmed.slice(0, trimmed.length - suffix.length).trim();
+    }
+  }
+  return trimmed;
+}
+
+// src/renderables/shape.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 THREE2.Object3D.DEFAULT_UP.set(0, 0, 1);
 function InnerRenderedShape({
@@ -875,10 +945,9 @@ function InnerRenderedShape({
   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)
+  const refIsNull = useVizijStore(
+    (state) => !state.refs[id]?.[namespace]?.current
   );
-  const refIsNull = !refs[namespace]?.current;
   const animatables = useVizijStore((0, import_shallow5.useShallow)((state) => state.animatables));
   const animatableValues = (0, import_react7.useMemo)(() => {
     const av = {};
@@ -1006,6 +1075,48 @@ function InnerRenderedShape({
           );
         }
       },
+      roughness: (value) => {
+        const standard = material.current;
+        if (standard?.roughness !== void 0 && (0, import_utils5.instanceOfRawNumber)(value)) {
+          standard.roughness = value;
+          standard.needsUpdate = true;
+        }
+      },
+      metalness: (value) => {
+        const standard = material.current;
+        if (standard?.metalness !== void 0 && (0, import_utils5.instanceOfRawNumber)(value)) {
+          standard.metalness = value;
+          standard.needsUpdate = true;
+        }
+      },
+      shininess: (value) => {
+        const phong = material.current;
+        if (phong?.shininess !== void 0 && (0, import_utils5.instanceOfRawNumber)(value)) {
+          phong.shininess = value;
+          phong.needsUpdate = true;
+        }
+      },
+      emissive: (value) => {
+        const standard = material.current;
+        if (standard?.emissive && (0, import_utils5.instanceOfRawRGB)(value)) {
+          standard.emissive.setRGB(value.r, value.g, value.b);
+          standard.needsUpdate = true;
+        }
+      },
+      emissiveIntensity: (value) => {
+        const standard = material.current;
+        if (standard?.emissiveIntensity !== void 0 && (0, import_utils5.instanceOfRawNumber)(value)) {
+          standard.emissiveIntensity = value;
+          standard.needsUpdate = true;
+        }
+      },
+      specular: (value) => {
+        const phong = material.current;
+        if (phong?.specular && (0, import_utils5.instanceOfRawRGB)(value)) {
+          phong.specular.setRGB(value.r, value.g, value.b);
+          phong.needsUpdate = true;
+        }
+      },
       ...morphTargetSettings[2]
     },
     shape
@@ -1121,51 +1232,6 @@ function InnerRenderedShape({
   );
 }
 var RenderedShape = (0, import_react7.memo)(InnerRenderedShape);
-var MATERIAL_FEATURE_KEYS = [
-  "color",
-  "opacity",
-  "roughness",
-  "metalness",
-  "shininess"
-];
-var MATERIAL_NAME_SUFFIXES = [
-  " color",
-  " colours",
-  " colour",
-  " opacity",
-  " roughness",
-  " metalness",
-  " shininess"
-];
-function deriveMaterialName(shape, values) {
-  for (const key of MATERIAL_FEATURE_KEYS) {
-    const feature = shape.features[key];
-    if (feature && feature.animated) {
-      const animatable = values[feature.value];
-      const candidate = extractMaterialName(animatable?.name);
-      if (candidate) {
-        return candidate;
-      }
-    }
-  }
-  return void 0;
-}
-function extractMaterialName(name) {
-  if (!name) {
-    return void 0;
-  }
-  const trimmed = name.trim();
-  if (!trimmed) {
-    return void 0;
-  }
-  const lowered = trimmed.toLowerCase();
-  for (const suffix of MATERIAL_NAME_SUFFIXES) {
-    if (lowered.endsWith(suffix)) {
-      return trimmed.slice(0, trimmed.length - suffix.length).trim();
-    }
-  }
-  return trimmed;
-}
 
 // src/renderables/renderable.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -1175,65 +1241,35 @@ function InnerRenderable({
   chain
 }) {
   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];
-    } else {
-      namespaces = Object.keys(refs);
-    }
-    return namespaces;
-  }, [namespace, refs]);
-  if (resolvedNamespaces.length === 0) {
-    return null;
+  const key = `${namespace}.${id}`;
+  switch (type) {
+    case "group":
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderedGroup, { id, namespace, chain }, key);
+    case "ellipse":
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        RenderedEllipse,
+        {
+          id,
+          namespace,
+          chain
+        },
+        key
+      );
+    case "rectangle":
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        RenderedRectangle,
+        {
+          id,
+          namespace,
+          chain
+        },
+        key
+      );
+    case "shape":
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderedShape, { id, namespace, chain }, key);
+    default:
+      return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: resolvedNamespaces.map((ns) => {
-    switch (type) {
-      case "group":
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          RenderedGroup,
-          {
-            id,
-            namespace: ns,
-            chain
-          },
-          `${ns}.${id}`
-        );
-      case "ellipse":
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          RenderedEllipse,
-          {
-            id,
-            namespace: ns,
-            chain
-          },
-          `${ns}.${id}`
-        );
-      case "rectangle":
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          RenderedRectangle,
-          {
-            id,
-            namespace: ns,
-            chain
-          },
-          `${ns}.${id}`
-        );
-      case "shape":
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          RenderedShape,
-          {
-            id,
-            namespace: ns,
-            chain
-          },
-          `${ns}.${id}`
-        );
-      default:
-        return null;
-    }
-  }) });
 }
 var Renderable = (0, import_react8.memo)(InnerRenderable);
 
@@ -1242,23 +1278,19 @@ var import_zustand2 = require("zustand");
 var import_middleware = require("zustand/middleware");
 var import_immer = require("immer");
 var THREE3 = __toESM(require("three"));
-var import_utils6 = require("@vizij/utils");
-
-// src/actions/create-new-element.ts
-var import_react9 = require("react");
-var import_lodash3 = require("lodash");
+var import_utils8 = require("@vizij/utils");
 
 // src/functions/create-world-element.ts
+var import_utils6 = require("@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 || (0, import_utils6.createBrowserSafeId)(),
     name: partialBody.name || "new-body",
     type: partialBody.type || "group",
     tags: partialBody.tags || [],
-    refs: partialBody.refs || {},
     features: { translation, rotation, scale },
     root: partialBody.root ?? false,
     children: partialBody.children || []
@@ -1275,11 +1307,9 @@ function createNewElement(state, type, root = false) {
     });
     if (Object.entries(state.world).length === 0) {
       const name = `New-Root`;
-      const refs = { default: (0, import_react9.createRef)() };
       const newElement = createDefaultGroup({
         name,
-        root: true,
-        refs
+        root: true
       });
       state.world[newElement.id] = newElement;
       state.elementSelection = [buildSelection(newElement.id)];
@@ -1291,11 +1321,7 @@ function createNewElement(state, type, root = false) {
         return;
       }
       const name = `New-Body`;
-      const refs = (0, import_lodash3.mapValues)(
-        worldRootEntry.refs,
-        () => (0, import_react9.createRef)()
-      );
-      const newChild = createDefaultGroup({ name, root, refs });
+      const newChild = createDefaultGroup({ name, root });
       worldRootEntry.children.push(newChild.id);
       state.world[newChild.id] = newChild;
       state.elementSelection = [buildSelection(newChild.id)];
@@ -1315,7 +1341,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
+var import_utils7 = require("@vizij/utils");
 function createAnimatable(value) {
   if (!value.type) {
     return null;
@@ -1325,7 +1376,7 @@ function createAnimatable(value) {
   }
   if (value.type === "euler") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: `${value.name} Rotation`,
       type: value.type,
       default: value.default ?? { x: 0, y: 0, z: 0 },
@@ -1342,7 +1393,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "vector3") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: `${value.name} Vector3`,
       type: value.type,
       default: value.default ?? { x: 0, y: 0, z: 0 },
@@ -1359,7 +1410,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "string") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? "Hello World",
@@ -1372,7 +1423,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "number") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? 0,
@@ -1385,7 +1436,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "boolean") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? false,
@@ -1398,7 +1449,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "rgb") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? { r: 0, g: 0, b: 0 },
@@ -1415,7 +1466,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "hsl") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? { h: 0, s: 0, l: 0 },
@@ -1470,6 +1521,7 @@ THREE3.Object3D.DEFAULT_UP.set(0, 0, 1);
 var VizijSlice = (set, get) => ({
   // worldRef: createRef<THREE.Group>(),
   world: {},
+  refs: {},
   animatables: {},
   values: /* @__PURE__ */ new Map(),
   renderHit: false,
@@ -1543,12 +1595,10 @@ var VizijSlice = (set, get) => ({
       worldData,
       filterIds
     );
+    const refs = get().refs;
     return candidateGroups.flatMap((entry) => {
-      const refs = Object.values(
-        entry.refs ?? {}
-      );
-      const resolved = refs.find((ref) => ref?.current)?.current ?? null;
-      return resolved ? [resolved] : [];
+      const mounted = Object.values(refs[entry.id] ?? {}).map((ref) => ref.current).find((object) => Boolean(object));
+      return mounted ? [mounted] : [];
     });
   },
   setGeometry: (id, geometry) => {
@@ -1561,7 +1611,7 @@ var VizijSlice = (set, get) => ({
   setValue: (id, namespace, value) => {
     set(
       (0, import_immer.produce)((state) => {
-        const lookupId = (0, import_utils6.getLookup)(namespace, id);
+        const lookupId = (0, import_utils8.getLookup)(namespace, id);
         if (typeof value === "function") {
           const current = state.values.get(lookupId);
           if (current !== void 0) {
@@ -1590,7 +1640,7 @@ var VizijSlice = (set, get) => ({
     set(
       (0, import_immer.produce)((state) => {
         writes.forEach(({ id, namespace, value }) => {
-          const lookupId = (0, import_utils6.getLookup)(namespace, id);
+          const lookupId = (0, import_utils8.getLookup)(namespace, id);
           state.values.set(lookupId, value);
         });
       })
@@ -1721,8 +1771,8 @@ var VizijSlice = (set, get) => ({
   setSlot: (parentId, parentNamespace, childId, childNamespace) => {
     set(
       (0, import_immer.produce)((state) => {
-        const parentLookupId = (0, import_utils6.getLookup)(parentNamespace, parentId);
-        const childLookupId = (0, import_utils6.getLookup)(childNamespace, childId);
+        const parentLookupId = (0, import_utils8.getLookup)(parentNamespace, parentId);
+        const childLookupId = (0, import_utils8.getLookup)(childNamespace, childId);
         state.slotConfig[parentLookupId] = childLookupId;
       })
     );
@@ -1741,12 +1791,13 @@ var VizijSlice = (set, get) => ({
   clearSlot: (parentId, parentNamespace) => {
     set(
       (0, import_immer.produce)((state) => {
-        const parentLookupId = (0, import_utils6.getLookup)(parentNamespace, parentId);
+        const parentLookupId = (0, import_utils8.getLookup)(parentNamespace, parentId);
         delete state.slotConfig[parentLookupId];
       })
     );
   },
   setVizij: (scene, animatables) => {
+    recordRenderCounter("rootReplacementCount");
     set({
       world: scene,
       animatables
@@ -1754,6 +1805,7 @@ var VizijSlice = (set, get) => ({
   },
   addWorldElements(world, animatables, replace) {
     if (replace) {
+      recordRenderCounter("rootReplacementCount");
       set({ world, animatables });
     } else {
       set((state) => ({
@@ -1768,14 +1820,12 @@ var VizijSlice = (set, get) => ({
     }));
   },
   setReference: (id, namespace, ref) => {
-    set(
-      (0, import_immer.produce)((state) => {
-        state.world[id].refs[namespace].current = ref.current;
-        if (ref.current?.children && state.world[id].refs[namespace].current) {
-          state.world[id].refs[namespace].current.children = ref.current.children;
-        }
-      })
-    );
+    set((state) => ({
+      refs: {
+        ...state.refs,
+        [id]: { ...state.refs[id], [namespace]: ref }
+      }
+    }));
   }
 });
 var useDefaultVizijStore = (0, import_zustand2.create)()(
@@ -1790,15 +1840,59 @@ var createVizijStore = (initial) => (0, import_zustand2.create)()(
   }))
 );
 
+// src/types/shape.ts
+var ShapeMaterial = /* @__PURE__ */ ((ShapeMaterial2) => {
+  ShapeMaterial2["Standard"] = "standard";
+  ShapeMaterial2["Phong"] = "phong";
+  ShapeMaterial2["Basic"] = "basic";
+  ShapeMaterial2["Lambert"] = "lambert";
+  ShapeMaterial2["Normal"] = "normal";
+  return ShapeMaterial2;
+})(ShapeMaterial || {});
+
+// src/types/tone-mapping.ts
+var import_three = require("three");
+var TONE_MAPPING_MODES = [
+  "none",
+  "agx",
+  "aces",
+  "neutral"
+];
+var TONE_MAPPING_LABELS = {
+  none: "None (web match)",
+  agx: "AgX (Blender)",
+  aces: "ACES Filmic",
+  neutral: "Neutral"
+};
+var DEFAULT_TONE_MAPPING_MODE = "none";
+var TONE_MAPPING_CONSTANTS = {
+  none: import_three.NoToneMapping,
+  agx: import_three.AgXToneMapping,
+  aces: import_three.ACESFilmicToneMapping,
+  neutral: import_three.NeutralToneMapping
+};
+function isToneMappingMode(value) {
+  return typeof value === "string" && Object.prototype.hasOwnProperty.call(TONE_MAPPING_CONSTANTS, value);
+}
+function resolveToneMapping(mode) {
+  if (isToneMappingMode(mode)) {
+    return TONE_MAPPING_CONSTANTS[mode];
+  }
+  return TONE_MAPPING_CONSTANTS[DEFAULT_TONE_MAPPING_MODE];
+}
+function normalizeToneMappingMode(value) {
+  return isToneMappingMode(value) ? value : DEFAULT_TONE_MAPPING_MODE;
+}
+
 // src/effects/selection-glow-effect.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_fiber = require("@react-three/fiber");
 var import_shallow7 = require("zustand/react/shallow");
-var import_three = require("three");
+var import_three2 = require("three");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function SelectionGlowEffect({
   enabled = false,
-  color = "#ff1010ff",
+  color = "#ff1010",
   opacity = 0.9,
   thresholdAngle = 2
 }) {
@@ -1810,7 +1904,7 @@ function SelectionGlowEffect({
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react9.Fragment, { children: selections.map((selection) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     SelectionOutline,
     {
       selection,
@@ -1830,32 +1924,32 @@ function SelectionOutline({
   const target = useVizijStore(
     (0, import_shallow7.useShallow)((state) => {
       const entry = state.world[selection.id];
-      const ref = entry?.refs?.[selection.namespace];
+      const ref = state.refs[selection.id]?.[selection.namespace];
       const geometry = entry?.geometry ?? null;
       return { ref, geometry };
     })
   );
   const sourceRef = target.ref;
-  const edgesGeometry = (0, import_react10.useMemo)(() => {
+  const edgesGeometry = (0, import_react9.useMemo)(() => {
     if (!target.geometry) return null;
-    const edges = new import_three.EdgesGeometry(target.geometry, thresholdAngle);
+    const edges = new import_three2.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),
+  (0, import_react9.useEffect)(() => () => edgesGeometry?.dispose(), [edgesGeometry]);
+  const material = (0, import_react9.useMemo)(() => {
+    const mat = new import_three2.LineBasicMaterial({
+      color: new import_three2.Color(color),
       transparent: true,
       opacity,
-      blending: import_three.AdditiveBlending,
+      blending: import_three2.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_react9.useEffect)(() => () => material.dispose(), [material]);
+  const lineRef = (0, import_react9.useRef)(null);
   (0, import_fiber.useFrame)(() => {
     const source = sourceRef?.current;
     const line = lineRef.current;
@@ -1877,10 +1971,10 @@ function SelectionOutline({
     }
   );
 }
-var tempMatrix = new import_three.Matrix4();
-var tempPosition = new import_three.Vector3();
-var tempQuaternion = new import_three.Quaternion();
-var tempScale = new import_three.Vector3();
+var tempMatrix = new import_three2.Matrix4();
+var tempPosition = new import_three2.Vector3();
+var tempQuaternion = new import_three2.Quaternion();
+var tempScale = new import_three2.Vector3();
 function copyWorldTransform(source, target) {
   source.updateWorldMatrix(true, false);
   tempMatrix.copy(source.matrixWorld);
@@ -1893,7 +1987,7 @@ function copyWorldTransform(source, target) {
 
 // src/vizij.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-import_three2.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three3.Object3D.DEFAULT_UP.set(0, 0, 1);
 function Vizij({
   style,
   className,
@@ -1901,9 +1995,17 @@ function Vizij({
   namespace = "default",
   showSafeArea = false,
   showSelectionGlow = false,
+  toneMapping = "none",
   onPointerMissed
 }) {
-  const ctx = (0, import_react11.useContext)(VizijContext);
+  const ctx = (0, import_react10.useContext)(VizijContext);
+  (0, import_react10.useEffect)(() => {
+    recordRenderCounter("canvasMountCount");
+    recordRenderCounter("mountedCanvasCount");
+    return () => {
+      recordRenderCounter("mountedCanvasCount", -1);
+    };
+  }, []);
   if (ctx) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_fiber2.Canvas,
@@ -1913,8 +2015,7 @@ function Vizij({
         className,
         onPointerMissed,
         gl: {
-          outputColorSpace: import_three2.SRGBColorSpace,
-          toneMapping: import_three2.NoToneMapping,
+          outputColorSpace: import_three3.SRGBColorSpace,
           antialias: true
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1923,7 +2024,8 @@ function Vizij({
             rootId,
             namespace,
             showSafeArea,
-            showSelectionGlow
+            showSelectionGlow,
+            toneMapping
           }
         )
       }
@@ -1936,8 +2038,7 @@ function Vizij({
         className,
         onPointerMissed,
         gl: {
-          outputColorSpace: import_three2.SRGBColorSpace,
-          toneMapping: import_three2.NoToneMapping,
+          outputColorSpace: import_three3.SRGBColorSpace,
           antialias: true
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1946,7 +2047,8 @@ function Vizij({
             rootId,
             namespace,
             showSafeArea,
-            showSelectionGlow
+            showSelectionGlow,
+            toneMapping
           }
         )
       }
@@ -1958,7 +2060,8 @@ function InnerVizij({
   namespace = "default",
   container,
   showSafeArea,
-  showSelectionGlow
+  showSelectionGlow,
+  toneMapping = "none"
 }) {
   const sceneParentSizing = container ? {
     width: container.width * container.resolution,
@@ -1966,16 +2069,17 @@ function InnerVizij({
   } : 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)(ToneMappingController, { mode: toneMapping }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_drei3.OrthographicCamera,
       {
         makeDefault: true,
         position: [0, 0, 100],
         near: 0.1,
-        far: 101
+        far: 1e3
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       World,
       {
         rootId,
@@ -1987,7 +2091,32 @@ function InnerVizij({
     showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SafeAreaRenderer, { rootId })
   ] });
 }
-var MemoizedInnerVizij = (0, import_react11.memo)(InnerVizij);
+var MemoizedInnerVizij = (0, import_react10.memo)(InnerVizij);
+function ToneMappingController({ mode }) {
+  const gl = (0, import_fiber2.useThree)((state) => state.gl);
+  const scene = (0, import_fiber2.useThree)((state) => state.scene);
+  (0, import_react10.useEffect)(() => {
+    const resolved = resolveToneMapping(mode);
+    if (gl.toneMapping === resolved) {
+      return;
+    }
+    gl.toneMapping = resolved;
+    scene.traverse((object) => {
+      const material = object.material;
+      if (!material) {
+        return;
+      }
+      if (Array.isArray(material)) {
+        material.forEach((mat) => {
+          mat.needsUpdate = true;
+        });
+      } else {
+        material.needsUpdate = true;
+      }
+    });
+  }, [gl, scene, mode]);
+  return null;
+}
 function InnerWorld({
   rootId,
   namespace = "default",
@@ -2004,7 +2133,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) {
@@ -2047,7 +2176,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];
@@ -2077,22 +2206,12 @@ var defaultRootBounds = {
   size: { x: 5, y: 4 }
 };
 
-// src/types/shape.ts
-var ShapeMaterial = /* @__PURE__ */ ((ShapeMaterial2) => {
-  ShapeMaterial2["Standard"] = "standard";
-  ShapeMaterial2["Phong"] = "phong";
-  ShapeMaterial2["Basic"] = "basic";
-  ShapeMaterial2["Lambert"] = "lambert";
-  ShapeMaterial2["Normal"] = "normal";
-  return 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);
@@ -2100,17 +2219,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;
 }
@@ -2120,7 +2239,6 @@ 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 THREE4 = __toESM(require("three"));
 
 // src/functions/gltf-loading/map-features.ts
@@ -2146,25 +2264,27 @@ function mapFeatures(features) {
 }
 
 // src/functions/gltf-loading/import-scene.ts
-var import_three5 = require("three");
+var import_three6 = require("three");
 
 // src/functions/gltf-loading/import-group.ts
-var import_three4 = require("three");
-
-// src/functions/util.ts
-var import_react15 = require("react");
-function namespaceArrayToRefs(namespaces) {
-  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }), {});
-}
+var import_three5 = require("three");
+var import_utils11 = require("@vizij/utils");
 
 // src/functions/gltf-loading/import-mesh.ts
-var import_three3 = require("three");
+var import_three4 = require("three");
+var import_utils10 = require("@vizij/utils");
 
 // src/functions/gltf-loading/import-geometry.ts
-function sanitizeMorphKey(name, fallbackIndex, used) {
+var import_utils9 = require("@vizij/utils");
+
+// src/functions/gltf-loading/morph-keys.ts
+function slugifyMorphName(name, fallbackIndex) {
   const baseName = name && name.trim().length > 0 ? name.trim() : `morph_${fallbackIndex + 1}`;
   const slug = baseName.toLowerCase().replace(/[^a-z0-9]+/gi, "_").replace(/^_+|_+$/g, "");
-  const safeBase = slug.length > 0 ? slug : `morph_${fallbackIndex + 1}`;
+  return slug.length > 0 ? slug : `morph_${fallbackIndex + 1}`;
+}
+function sanitizeMorphKey(name, fallbackIndex, used) {
+  const safeBase = slugifyMorphName(name, fallbackIndex);
   let candidate = safeBase;
   let counter = 1;
   while (used.has(candidate)) {
@@ -2173,6 +2293,12 @@ function sanitizeMorphKey(name, fallbackIndex, used) {
   used.add(candidate);
   return candidate;
 }
+function deriveMorphFeatureKeys(names) {
+  const used = /* @__PURE__ */ new Set();
+  return names.map((name, index) => sanitizeMorphKey(name, index, used));
+}
+
+// src/functions/gltf-loading/import-geometry.ts
 function importGeometry(geometry, mesh) {
   const features = {};
   const animatableValues = {};
@@ -2184,7 +2310,7 @@ function importGeometry(geometry, mesh) {
     const usedKeys = /* @__PURE__ */ new Set();
     Object.entries(mesh.morphTargetDictionary ?? {}).forEach(
       ([name, index]) => {
-        const morphId = crypto.randomUUID();
+        const morphId = (0, import_utils9.createBrowserSafeId)();
         const featureKey = sanitizeMorphKey(name, index, usedKeys);
         morphIds.push(featureKey);
         features[featureKey] = {
@@ -2214,13 +2340,13 @@ function importGeometry(geometry, mesh) {
 }
 
 // src/functions/gltf-loading/import-mesh.ts
-import_three3.Object3D.DEFAULT_UP.set(0, 0, 1);
-function importMesh(mesh, namespaces, colorLookup) {
+import_three4.Object3D.DEFAULT_UP.set(0, 0, 1);
+function importMesh(mesh, colorLookup) {
   let world = {};
   let animatables = {};
   let newColorLookup = {};
   const translationAnimatable = {
-    id: crypto.randomUUID(),
+    id: (0, import_utils10.createBrowserSafeId)(),
     name: `${mesh.name ?? "Mesh"} translation`,
     type: "vector3",
     default: { x: mesh.position.x, y: mesh.position.y, z: mesh.position.z },
@@ -2236,7 +2362,7 @@ function importMesh(mesh, namespaces, colorLookup) {
     [translationAnimatable.id]: translationAnimatable
   };
   const rotationAnimatable = {
-    id: crypto.randomUUID(),
+    id: (0, import_utils10.createBrowserSafeId)(),
     name: `${mesh.name ?? "Mesh"} rotation`,
     type: "euler",
     default: { x: mesh.rotation.x, y: mesh.rotation.y, z: mesh.rotation.z },
@@ -2249,7 +2375,7 @@ function importMesh(mesh, namespaces, colorLookup) {
   };
   animatables = { ...animatables, [rotationAnimatable.id]: rotationAnimatable };
   const scaleAnimatable = {
-    id: crypto.randomUUID(),
+    id: (0, import_utils10.createBrowserSafeId)(),
     name: `${mesh.name ?? "Mesh"} scale`,
     type: "vector3",
     default: { x: mesh.scale.x, y: mesh.scale.y, z: mesh.scale.z },
@@ -2260,56 +2386,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: (0, import_utils10.createBrowserSafeId)(),
+    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: (0, import_utils10.createBrowserSafeId)(),
+    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(
@@ -2320,7 +2510,7 @@ function importMesh(mesh, namespaces, colorLookup) {
   const children = [];
   mesh.children.forEach((child) => {
     if (child.isMesh) {
-      const [newWorldItems, newAnimatables, childId, newMeshColors] = importMesh(child, namespaces, {
+      const [newWorldItems, newAnimatables, childId, newMeshColors] = importMesh(child, {
         ...colorLookup,
         ...newColorLookup
       });
@@ -2329,7 +2519,7 @@ function importMesh(mesh, namespaces, colorLookup) {
       animatables = { ...animatables, ...newAnimatables };
       children.push(childId);
     } else if (shouldImportAsGroupChild(child)) {
-      const [newWorldItems, newAnimatables, childId, newMeshColors] = importGroup(child, namespaces, {
+      const [newWorldItems, newAnimatables, childId, newMeshColors] = importGroup(child, {
         ...colorLookup,
         ...newColorLookup
       });
@@ -2343,7 +2533,7 @@ function importMesh(mesh, namespaces, colorLookup) {
     id: mesh.uuid,
     name: mesh.name,
     geometry: mesh.geometry,
-    material: getShapeMaterial(mesh, useEmissive),
+    material: getShapeMaterial(mesh),
     type: "shape",
     tags: [],
     morphTargets,
@@ -2351,21 +2541,28 @@ 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,
-    refs: namespaceArrayToRefs(namespaces)
+    children: children.length > 0 ? children : void 0
   };
   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) {
@@ -2400,14 +2597,14 @@ function shouldImportAsGroupChild(child) {
 }
 
 // src/functions/gltf-loading/import-group.ts
-import_three4.Object3D.DEFAULT_UP.set(0, 0, 1);
-function importGroup(group, namespaces, colorLookup, rootBounds) {
+import_three5.Object3D.DEFAULT_UP.set(0, 0, 1);
+function importGroup(group, colorLookup, rootBounds) {
   let world = {};
   let animatables = {};
   let newColorLookup = {};
   const children = [];
   const translationAnimatable = {
-    id: crypto.randomUUID(),
+    id: (0, import_utils11.createBrowserSafeId)(),
     name: `${group.name ?? "Group"} translation`,
     type: "vector3",
     default: { x: group.position.x, y: group.position.y, z: group.position.z },
@@ -2423,7 +2620,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
     [translationAnimatable.id]: translationAnimatable
   };
   const rotationAnimatable = {
-    id: crypto.randomUUID(),
+    id: (0, import_utils11.createBrowserSafeId)(),
     name: `${group.name ?? "Group"} rotation`,
     type: "euler",
     default: { x: group.rotation.x, y: group.rotation.y, z: group.rotation.z },
@@ -2436,7 +2633,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
   };
   animatables = { ...animatables, [rotationAnimatable.id]: rotationAnimatable };
   const scaleAnimatable = {
-    id: crypto.randomUUID(),
+    id: (0, import_utils11.createBrowserSafeId)(),
     name: `${group.name ?? "Group"} scale`,
     type: "vector3",
     default: { x: group.scale.x, y: group.scale.y, z: group.scale.z },
@@ -2449,7 +2646,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
   animatables = { ...animatables, [scaleAnimatable.id]: scaleAnimatable };
   group.children.forEach((child) => {
     if (child.isMesh) {
-      const [newWorldItems, newAnimatables, childId, newMeshColors] = importMesh(child, namespaces, {
+      const [newWorldItems, newAnimatables, childId, newMeshColors] = importMesh(child, {
         ...colorLookup,
         ...newColorLookup
       });
@@ -2458,7 +2655,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
       animatables = { ...animatables, ...newAnimatables };
       children.push(childId);
     } else if (shouldImportAsGroupChild2(child)) {
-      const [newWorldItems, newAnimatables, childId, newMeshColors] = importGroup(child, namespaces, {
+      const [newWorldItems, newAnimatables, childId, newMeshColors] = importGroup(child, {
         ...colorLookup,
         ...newColorLookup
       });
@@ -2480,8 +2677,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
     },
     root: Boolean(rootBounds),
     rootBounds,
-    children,
-    refs: namespaceArrayToRefs(namespaces)
+    children
   };
   world = { ...world, [newGroup.id]: newGroup };
   return [world, animatables, newGroup.id, newColorLookup];
@@ -2506,13 +2702,12 @@ function shouldImportAsGroupChild2(child) {
 }
 
 // src/functions/gltf-loading/import-scene.ts
-import_three5.Object3D.DEFAULT_UP.set(0, 0, 1);
-function importScene(scene, namespaces, rootBounds) {
+import_three6.Object3D.DEFAULT_UP.set(0, 0, 1);
+function importScene(scene, rootBounds) {
   let world = {};
   let animatables = {};
   const [newWorldItems, newAnimatables] = importGroup(
     scene,
-    namespaces,
     {},
     rootBounds
   );
@@ -2523,7 +2718,7 @@ function importScene(scene, namespaces, rootBounds) {
 
 // src/functions/gltf-loading/traverse-three.ts
 THREE4.Object3D.DEFAULT_UP.set(0, 0, 1);
-function traverseThree(group, namespaces, aggressiveImport = false, rootBounds) {
+function traverseThree(group, aggressiveImport = false, rootBounds) {
   const worldData = {};
   const animatableData = {};
   let hasRobotData = false;
@@ -2546,11 +2741,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
         switch (data.type) {
           case "group":
             loadedData = {
-              ...data,
-              refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
-                {}
-              )
+              ...data
             };
             [mappedFeatures, animatableValues] = mapFeatures(data.features);
             isGroupFeatures(mappedFeatures);
@@ -2561,11 +2752,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
           case "shape":
             loadedData = {
               ...data,
-              geometry: child.geometry,
-              refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
-                {}
-              )
+              geometry: child.geometry
             };
             [mappedFeatures, animatableValues] = mapFeatures(data.features);
             isShapeFeatures(mappedFeatures);
@@ -2575,11 +2762,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             break;
           case "ellipse":
             loadedData = {
-              ...data,
-              refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
-                {}
-              )
+              ...data
             };
             [mappedFeatures, animatableValues] = mapFeatures(data.features);
             isEllipseFeatures(mappedFeatures);
@@ -2589,11 +2772,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             break;
           case "rectangle":
             loadedData = {
-              ...data,
-              refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
-                {}
-              )
+              ...data
             };
             [mappedFeatures, animatableValues] = mapFeatures(data.features);
             isRectangleFeatures(mappedFeatures);
@@ -2616,7 +2795,6 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
     }
     const [newWorldData, newAnimatableData] = importScene(
       group,
-      namespaces,
       derivedRootBounds
     );
     Object.assign(worldData, newWorldData);
@@ -2629,7 +2807,10 @@ var MATERIAL_NAME_FEATURE_KEYS = [
   "opacity",
   "roughness",
   "metalness",
-  "shininess"
+  "shininess",
+  "emissive",
+  "emissiveIntensity",
+  "specular"
 ];
 var MATERIAL_NAME_SUFFIXES2 = [
   " color",
@@ -2638,7 +2819,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) {
@@ -2777,10 +2961,10 @@ function deriveRootBounds(group) {
 }
 
 // src/functions/vizij-bundle.ts
-var import_utils7 = require("@vizij/utils");
+var import_utils12 = require("@vizij/utils");
 var BUNDLE_KEYS = ["VIZIJ_bundle"];
 function cloneBundle(value) {
-  return (0, import_utils7.cloneDeepSafe)(value);
+  return (0, import_utils12.cloneDeepSafe)(value);
 }
 function readExtensionValue(extensionContainer) {
   for (const key of BUNDLE_KEYS) {
@@ -2858,12 +3042,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 () => {
@@ -2880,12 +3081,16 @@ function applyVizijBundle(object, bundle) {
         delete object.userData;
       }
     }
+    for (const { node, extensions } of staleCarriers) {
+      node.userData.gltfExtensions = extensions;
+    }
+    staleCarriers.length = 0;
     applied = false;
   };
 }
 
 // src/functions/gltf-loading/extract-animations.ts
-var import_utils8 = require("@vizij/utils");
+var import_utils13 = require("@vizij/utils");
 var CHANNEL_PATH_TO_TRACK_PROPERTY = {
   translation: "position",
   rotation: "quaternion",
@@ -2901,7 +3106,7 @@ function clonePlainObject(value) {
   if (!value) {
     return void 0;
   }
-  return (0, import_utils8.cloneDeepSafe)(value);
+  return (0, import_utils13.cloneDeepSafe)(value);
 }
 function inferValueSize(valueType) {
   switch (valueType) {
@@ -3305,16 +3510,6 @@ async function resolveParserJson(parserJson, fallback) {
       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);
@@ -3330,81 +3525,21 @@ async function resolveParserJson(parserJson, fallback) {
   }
   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,
+async function loadGLTF(url, aggressiveImport = false, rootBounds) {
+  const asset = await loadGLTFWithBundle(url, aggressiveImport, rootBounds);
+  return [asset.world, asset.animatables, asset.animations];
+}
+async function loadGLTFFromBlob(blob, aggressiveImport = false, rootBounds) {
+  const asset = await loadGLTFFromBlobWithBundle(
+    blob,
     aggressiveImport,
-    rootBounds,
-    parserJson,
-    modelData.animations
+    rootBounds
   );
   return [asset.world, asset.animatables, asset.animations];
 }
-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 {
-      const asset = await loadGLTFWithBundle(
-        objectUrl,
-        actualizedNamespaces,
-        aggressiveImport,
-        rootBounds,
-        { blob }
-      );
-      return [asset.world, asset.animatables, asset.animations];
-    } 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,
-      "",
-      async (gltf) => {
-        try {
-          const parserJson = await resolveParserJson(
-            gltf?.parser?.json,
-            { arrayBuffer }
-          );
-          const asset = parseScene(
-            gltf.scene,
-            actualizedNamespaces,
-            aggressiveImport,
-            rootBounds,
-            parserJson,
-            gltf.animations
-          );
-          resolve([asset.world, asset.animatables, asset.animations]);
-        } 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, clips) {
+function parseScene(scene, aggressiveImport, rootBounds, parserJson, clips) {
   const [world, animatables] = traverseThree(
     scene,
-    namespaces,
     aggressiveImport,
     rootBounds
   );
@@ -3412,108 +3547,52 @@ function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson,
   const animations = extractVizijAnimations(parserJson, clips);
   return { world, animatables, bundle, animations, scene };
 }
-async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, rootBounds, parserJsonFallback) {
+function createTrackedGLTFLoader() {
+  recordRenderCounter("gltfLoadCount");
+  recordRenderCounter("dracoLoaderCreationCount");
   const modelLoader = new import_three_stdlib.GLTFLoader();
   modelLoader.setDRACOLoader(new import_three_stdlib.DRACOLoader());
+  return modelLoader;
+}
+async function loadGLTFWithBundle(url, aggressiveImport = false, rootBounds, parserJsonFallback) {
+  recordRenderCounter("gltfUrlLoadCount");
+  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,
     parserJson,
     modelData.animations
   );
 }
-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,
-        rootBounds,
-        { blob }
-      );
-    } 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,
-      "",
-      async (gltf) => {
-        try {
-          const parserJson = await resolveParserJson(
-            gltf?.parser?.json,
-            { arrayBuffer }
-          );
-          const asset = parseScene(
-            gltf.scene,
-            actualizedNamespaces,
-            aggressiveImport,
-            rootBounds,
-            parserJson,
-            gltf.animations
-          );
-          resolve(asset);
-        } catch (error) {
-          if (error instanceof Error) {
-            reject(error);
-          } else {
-            reject(new Error(String(error)));
-          }
-        }
-      },
-      (error) => {
-        reject(new Error(`Error loading GLTF: ${error.message}`));
-      }
-    );
+async function loadGLTFFromBlobWithBundle(blob, aggressiveImport = false, rootBounds) {
+  recordRenderCounter("gltfBlobLoadCount");
+  const arrayBuffer = await blob.arrayBuffer();
+  const loader = createTrackedGLTFLoader();
+  const gltf = await new Promise((resolve, reject) => {
+    loader.parse(arrayBuffer, "", resolve, (error) => {
+      reject(new Error(`Error loading GLTF: ${error.message}`));
+    });
   });
-}
-
-// src/functions/load-gltf-blob.ts
-var import_three_stdlib2 = require("three-stdlib");
-var loadGltfFromBlob = (blob, namespaces) => {
-  return new Promise((resolve, reject) => {
-    const loader = new import_three_stdlib2.GLTFLoader();
-    loader.setDRACOLoader(new import_three_stdlib2.DRACOLoader());
-    const reader = new FileReader();
-    reader.onload = () => {
-      const arrayBuffer = reader.result;
-      loader.parse(
-        arrayBuffer,
-        "",
-        // Base path for resolving external resources
-        (gltf) => {
-          const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
-          resolve(traverseThree(gltf.scene, actualizedNamespaces));
-        },
-        (error) => {
-          reject(new Error(`Error loading GLTF: ${error.message}`));
-        }
-      );
-    };
-    reader.onerror = () => {
-      reject(new Error("Failed to read Blob as ArrayBuffer."));
-    };
-    reader.readAsArrayBuffer(blob);
+  const parserJson = await resolveParserJson(gltf?.parser?.json, {
+    arrayBuffer
   });
-};
+  return parseScene(
+    gltf.scene,
+    aggressiveImport,
+    rootBounds,
+    parserJson,
+    gltf.animations
+  );
+}
 
 // src/functions/export.ts
-var import_three_stdlib3 = require("three-stdlib");
+var import_three_stdlib2 = require("three-stdlib");
 var THREE6 = __toESM(require("three"));
 THREE6.Object3D.DEFAULT_UP.set(0, 0, 1);
 function normalizeExportError(error) {
@@ -3525,17 +3604,6 @@ function normalizeExportError(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;
@@ -3617,7 +3685,7 @@ function normalizeExportedSceneJson(json, fallbackSceneName) {
   }
   return changed;
 }
-function sanitizeExportedGlb(buffer, fallbackSceneName) {
+function patchGlbJson(buffer, mutate) {
   if (buffer.byteLength < GLB_HEADER_BYTES2 + GLB_CHUNK_HEADER_BYTES2) {
     return buffer;
   }
@@ -3647,8 +3715,7 @@ function sanitizeExportedGlb(buffer, fallbackSceneName) {
   } catch {
     return buffer;
   }
-  const changed = normalizeExportedSceneJson(jsonPayload, fallbackSceneName);
-  if (!changed) {
+  if (!mutate(jsonPayload)) {
     return buffer;
   }
   const encodedJson = new TextEncoder().encode(JSON.stringify(jsonPayload));
@@ -3670,12 +3737,42 @@ function sanitizeExportedGlb(buffer, fallbackSceneName) {
   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";
-  const animationClips = Array.isArray(options.animations) ? options.animations.filter(Boolean) : [];
-  const shouldAttachBundle = Boolean(options.bundle);
-  const exporter = new import_three_stdlib3.GLTFExporter();
+function sanitizeExportedGlb(buffer, fallbackSceneName) {
+  return patchGlbJson(
+    buffer,
+    (json) => normalizeExportedSceneJson(json, fallbackSceneName)
+  );
+}
+function patchVizijBundleMetadata(glb, metadata) {
+  return patchGlbJson(glb, (json) => {
+    const carriers = [];
+    const rootExtensions = json.extensions;
+    if (rootExtensions && typeof rootExtensions === "object") {
+      carriers.push(rootExtensions);
+    }
+    const nodes = Array.isArray(json.nodes) ? json.nodes : [];
+    for (const node of nodes) {
+      const extensions = node?.extensions;
+      if (extensions && typeof extensions === "object") {
+        carriers.push(extensions);
+      }
+    }
+    let patched = false;
+    for (const extensions of carriers) {
+      const bundle = extensions.VIZIJ_bundle;
+      if (!bundle || typeof bundle !== "object") {
+        continue;
+      }
+      const record = bundle;
+      const existing = record.metadata && typeof record.metadata === "object" ? record.metadata : {};
+      record.metadata = { ...existing, ...metadata };
+      patched = true;
+    }
+    return patched;
+  });
+}
+async function exportScene(root, options = {}) {
+  const exporter = new import_three_stdlib2.GLTFExporter();
   exporter.register(() => ({
     writeMesh(mesh, meshDef) {
       const meshName = mesh.name?.trim() || mesh.geometry?.name?.trim() || void 0;
@@ -3684,82 +3781,324 @@ function exportScene(data, fileNameOrOptions = "scene.glb") {
       }
     }
   }));
-  const sourceRoot = data;
-  const exportRoot = sourceRoot instanceof THREE6.Scene ? sourceRoot : sourceRoot.clone(true);
+  const exportRoot = root instanceof THREE6.Scene ? root : root.clone(true);
   const exportTarget = exportRoot instanceof THREE6.Scene ? exportRoot : (() => {
     const scene = new THREE6.Scene();
-    scene.name = data.name?.trim() || "Scene";
+    scene.name = root.name?.trim() || "Scene";
     scene.add(exportRoot);
     return scene;
   })();
-  const detachBundle = shouldAttachBundle && options.bundle ? applyVizijBundle(exportRoot, options.bundle) : () => {
+  const detachBundle = options.bundle ? applyVizijBundle(exportRoot, options.bundle) : () => {
   };
-  const binary = options.binary ?? true;
-  const exporterOptions = {
-    trs: true,
-    onlyVisible: false,
-    binary,
-    includeCustomExtensions: true
-  };
-  if (animationClips.length > 0) {
-    exporterOptions.animations = animationClips;
-  }
+  const animations = (options.animations ?? []).filter(Boolean);
+  let gltf;
   try {
-    exporter.parse(
-      exportTarget,
-      (gltf) => {
-        detachBundle();
-        if (!(gltf instanceof ArrayBuffer)) {
-          const error = new Error("Failed to export scene.");
-          options.onError?.(error);
-          return;
-        }
-        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`;
-        triggerBlobDownload(
-          new Blob([sanitizedGltf], {
-            type: "application/octet-stream"
-          }),
-          downloadName
-        );
-        options.onComplete?.();
-      },
-      (error) => {
-        detachBundle();
-        options.onError?.(normalizeExportError(error));
-      },
-      exporterOptions
-    );
+    gltf = await exporter.parseAsync(exportTarget, {
+      trs: true,
+      onlyVisible: false,
+      binary: true,
+      includeCustomExtensions: true,
+      ...animations.length > 0 ? { animations } : {}
+    });
   } catch (error) {
+    throw normalizeExportError(error);
+  } finally {
     detachBundle();
-    const normalizedError = normalizeExportError(error);
-    options.onError?.(normalizedError);
-    throw normalizedError;
+  }
+  if (!(gltf instanceof ArrayBuffer)) {
+    throw new Error("Failed to export scene.");
+  }
+  return sanitizeExportedGlb(gltf, root.name?.trim() || void 0);
+}
+
+// src/functions/build-scene-graph.ts
+var THREE7 = __toESM(require("three"));
+var import_utils14 = require("@vizij/utils");
+THREE7.Object3D.DEFAULT_UP.set(0, 0, 1);
+function buildSceneGraph(world, animatables, rootId) {
+  const entry = world[rootId];
+  if (!entry) {
+    throw new Error(`The world has no element "${rootId}".`);
+  }
+  const used = {};
+  for (const feature of Object.values(entry.features)) {
+    if (feature.animated) {
+      used[feature.value] = animatableOf(animatables, feature.value);
+    }
+  }
+  const robotData = createStoredRenderable(entry, used);
+  switch (entry.type) {
+    case "group": {
+      const object = new THREE7.Group();
+      object.name = entry.name;
+      object.userData = { gltfExtensions: { RobotData: robotData } };
+      applyFeatures(entry.features, animatables, groupTransform(object));
+      for (const child of entry.children) {
+        object.add(buildSceneGraph(world, animatables, child));
+      }
+      return object;
+    }
+    case "shape": {
+      const geometry = entry.geometry.clone();
+      if (entry.name) {
+        geometry.name = entry.name;
+      }
+      const material = createMaterial(entry.material);
+      material.name = deriveMaterialName(entry, used) ?? entry.name ?? "";
+      const object = new THREE7.Mesh(geometry, material);
+      object.name = entry.name;
+      object.userData = { gltfExtensions: { RobotData: robotData } };
+      applyFeatures(entry.features, animatables, {
+        ...shapeTransform(object),
+        ...materialFactors(material),
+        ...morphWeights(object, entry)
+      });
+      for (const child of entry.children ?? []) {
+        object.add(buildSceneGraph(world, animatables, child));
+      }
+      return object;
+    }
+    default:
+      throw new Error(
+        `Element "${rootId}" is a ${entry.type}, which has no exported form.`
+      );
+  }
+}
+function animatableOf(animatables, id) {
+  const animatable = animatables[id];
+  if (!animatable) {
+    throw new Error(`No animatable "${id}".`);
+  }
+  return animatable;
+}
+function applyFeatures(features, animatables, handlers) {
+  for (const [key, handler] of Object.entries(handlers)) {
+    const feature = features[key];
+    if (!feature) {
+      continue;
+    }
+    const value = feature.animated ? authoredDefault(animatableOf(animatables, feature.value)) : feature.value;
+    if (value !== void 0) {
+      handler(value);
+    }
+  }
+}
+function groupTransform(object) {
+  return {
+    translation: (value) => {
+      if ((0, import_utils14.instanceOfRawVector3)(value)) {
+        object.position.set(value.x, value.y, value.z);
+      } else if ((0, import_utils14.instanceOfRawVector2)(value)) {
+        object.position.set(value.x, value.y, object.position.z);
+      }
+    },
+    rotation: (value) => {
+      if ((0, import_utils14.instanceOfRawEuler)(value)) {
+        object.rotation.set(value.x, value.y, value.z, "ZYX");
+      } else if ((0, import_utils14.instanceOfRawNumber)(value)) {
+        object.rotation.set(0, 0, 0);
+        object.rotateZ(value);
+      }
+    },
+    scale: (value) => {
+      if ((0, import_utils14.instanceOfRawVector3)(value)) {
+        if (value.x === null || value.y === null || value.z === null) {
+          object.scale.set(0.1, 0.1, 0.1);
+        } else {
+          object.scale.set(value.x, value.y, value.z);
+        }
+      } else if ((0, import_utils14.instanceOfRawNumber)(value)) {
+        object.scale.set(value, value, value);
+      } else {
+        object.scale.set(1, 1, 1);
+      }
+    }
+  };
+}
+function shapeTransform(object) {
+  return {
+    translation: (value) => {
+      if ((0, import_utils14.instanceOfRawVector3)(value)) {
+        object.position.set(value.x, value.y, value.z);
+      }
+    },
+    rotation: (value) => {
+      if ((0, import_utils14.instanceOfRawEuler)(value)) {
+        object.rotation.set(value.x, value.y, value.z, "ZYX");
+      }
+    },
+    scale: (value) => {
+      if ((0, import_utils14.instanceOfRawVector3)(value)) {
+        object.scale.set(value.x, value.y, value.z);
+      } else if ((0, import_utils14.instanceOfRawNumber)(value)) {
+        object.scale.set(value, value, value);
+      } else {
+        object.scale.set(1, 1, 1);
+      }
+    }
+  };
+}
+function materialFactors(material) {
+  const standard = material;
+  const phong = material;
+  return {
+    opacity: (value) => {
+      if ((0, import_utils14.instanceOfRawNumber)(value)) {
+        material.opacity = value;
+        material.transparent = value < 1;
+      }
+    },
+    color: (value) => {
+      if (!standard.color) {
+        return;
+      }
+      if ((0, import_utils14.instanceOfRawRGB)(value)) {
+        standard.color.setRGB(value.r, value.g, value.b);
+      } else if ((0, import_utils14.instanceOfRawVector3)(value)) {
+        standard.color.setRGB(value.x, value.y, value.z);
+      } else if ((0, import_utils14.instanceOfRawHSL)(value)) {
+        standard.color.setHSL(value.h, value.s, value.l);
+      }
+    },
+    roughness: (value) => {
+      if (standard.roughness !== void 0 && (0, import_utils14.instanceOfRawNumber)(value)) {
+        standard.roughness = value;
+      }
+    },
+    metalness: (value) => {
+      if (standard.metalness !== void 0 && (0, import_utils14.instanceOfRawNumber)(value)) {
+        standard.metalness = value;
+      }
+    },
+    shininess: (value) => {
+      if (phong.shininess !== void 0 && (0, import_utils14.instanceOfRawNumber)(value)) {
+        phong.shininess = value;
+      }
+    },
+    emissive: (value) => {
+      if (standard.emissive && (0, import_utils14.instanceOfRawRGB)(value)) {
+        standard.emissive.setRGB(value.r, value.g, value.b);
+      }
+    },
+    emissiveIntensity: (value) => {
+      if (standard.emissiveIntensity !== void 0 && (0, import_utils14.instanceOfRawNumber)(value)) {
+        standard.emissiveIntensity = value;
+      }
+    },
+    specular: (value) => {
+      if (phong.specular && (0, import_utils14.instanceOfRawRGB)(value)) {
+        phong.specular.setRGB(value.r, value.g, value.b);
+      }
+    }
+  };
+}
+function morphWeights(object, shape) {
+  const targets = shape.morphTargets ?? [];
+  if (targets.length === 0) {
+    return {};
+  }
+  const influences = targets.map(() => 0);
+  object.morphTargetDictionary = Object.fromEntries(
+    targets.map((target, index) => [target, index])
+  );
+  object.morphTargetInfluences = influences;
+  return Object.fromEntries(
+    targets.map((target, index) => [
+      target,
+      (value) => {
+        if ((0, import_utils14.instanceOfRawNumber)(value)) {
+          influences[index] = value;
+        }
+      }
+    ])
+  );
+}
+function createMaterial(kind) {
+  const parameters = { side: THREE7.DoubleSide };
+  switch (kind) {
+    case "basic" /* Basic */:
+      return new THREE7.MeshBasicMaterial(parameters);
+    case "lambert" /* Lambert */:
+      return new THREE7.MeshLambertMaterial(parameters);
+    case "phong" /* Phong */:
+      return new THREE7.MeshPhongMaterial(parameters);
+    case "normal" /* Normal */:
+      return new THREE7.MeshNormalMaterial(parameters);
+    case "standard" /* Standard */:
+      return new THREE7.MeshStandardMaterial(parameters);
+  }
+}
+var SCALAR_KEYS = ["f32", "f64", "i64", "i32", "u64", "u32", "float"];
+function scalarOf(value) {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (value && typeof value === "object") {
+    for (const key of SCALAR_KEYS) {
+      const scalar = value[key];
+      if (typeof scalar === "number") {
+        return scalar;
+      }
+    }
+  }
+  return void 0;
+}
+function authoredDefault(animatable) {
+  const value = animatable.default;
+  const scalar = scalarOf(value);
+  if (scalar !== void 0) {
+    return scalar;
+  }
+  const fields = value?.struct?.fields;
+  if (!Array.isArray(fields)) {
+    return value;
+  }
+  const n = fields.map(
+    (field) => scalarOf(field?.value) ?? 0
+  );
+  switch (animatable.type) {
+    case "vector3":
+    case "euler":
+      return { x: n[0], y: n[1], z: n[2] };
+    case "vector2":
+      return { x: n[0], y: n[1] };
+    case "rgb":
+      return { r: n[0], g: n[1], b: n[2] };
+    case "hsl":
+      return { h: n[0], s: n[1], l: n[2] };
+    default:
+      return void 0;
   }
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DEFAULT_TONE_MAPPING_MODE,
   EmptyModelError,
   InnerVizij,
   ShapeMaterial,
+  TONE_MAPPING_LABELS,
+  TONE_MAPPING_MODES,
   Vizij,
   VizijContext,
   VizijSlice,
   applyVizijBundle,
+  buildSceneGraph,
   createVizijStore,
+  deriveMorphFeatureKeys,
+  deriveRootBounds,
   exportScene,
   extractVizijBundle,
+  isToneMappingMode,
   loadGLTF,
   loadGLTFFromBlob,
   loadGLTFFromBlobWithBundle,
   loadGLTFWithBundle,
-  loadGltfFromBlob,
+  normalizeToneMappingMode,
   parseGlbJsonChunk,
+  patchGlbJson,
+  patchVizijBundleMetadata,
+  resolveToneMapping,
+  sanitizeMorphKey,
   useDefaultVizijStore,
   useFeatures,
   useVizijStore,