@vizij/render 0.1.1 → 1.0.0

package/dist/index.mjs

@@ -1,13 +1,13 @@
 // src/vizij.tsx
 import { Suspense, memo as memo6, useContext as useContext3, useEffect as useEffect7 } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { Object3D as Object3D4, SRGBColorSpace, NoToneMapping } from "three";
+import { Object3D as Object3D4, SRGBColorSpace } from "three";
 import { Canvas, useThree } from "@react-three/fiber";
 import { Line as Line3, OrthographicCamera, Text } from "@react-three/drei";
 import { useShallow as useShallow7 } from "zustand/react/shallow";
 
 // src/renderables/renderable.tsx
-import { memo as memo5, useMemo as useMemo5 } from "react";
+import { memo as memo5 } from "react";
 import { useShallow as useShallow5 } from "zustand/react/shallow";
 
 // src/hooks/use-vizij-store.ts
@@ -84,35 +84,33 @@ function useFeatures(namespace, features, callbacks, debugInfo) {
   }, [features, callbacks, store, debugInfo, namespace]);
 }
 
-// src/functions/create-stored-data.ts
-import { omit } from "lodash";
-
 // src/functions/create-stored-features.ts
-import { mapValues } from "lodash";
 function createStoredFeatures(objectFeatures, animatableValues) {
-  return 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 = 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
@@ -125,7 +123,9 @@ function InnerRenderedGroup({
 }) {
   const ref = useRef(null);
   const group = useVizijStore(useShallow((state) => state.world[id]));
-  const refIsNull = !group.refs[namespace]?.current;
+  const refIsNull = useVizijStore(
+    (state) => !state.refs[id]?.[namespace]?.current
+  );
   const animatables = useVizijStore(useShallow((state) => state.animatables));
   const setHoveredElement = useVizijStore(
     useShallow((state) => state.setHoveredElement)
@@ -267,7 +267,9 @@ function InnerRenderedEllipse({
   const ellipse = useVizijStore(
     useShallow2((state) => state.world[id])
   );
-  const refIsNull = !ellipse.refs[namespace]?.current;
+  const refIsNull = useVizijStore(
+    (state) => !state.refs[id]?.[namespace]?.current
+  );
   const animatables = useVizijStore(useShallow2((state) => state.animatables));
   const animatableValues = useMemo2(() => {
     const av = {};
@@ -561,7 +563,9 @@ function InnerRenderedRectangle({
   const rectangle = useVizijStore(
     useShallow3((state) => state.world[id])
   );
-  const refIsNull = !rectangle.refs[namespace]?.current;
+  const refIsNull = useVizijStore(
+    (state) => !state.refs[id]?.[namespace]?.current
+  );
   const animatables = useVizijStore(useShallow3((state) => state.animatables));
   const animatableValues = useMemo3(() => {
     const av = {};
@@ -833,6 +837,61 @@ import {
   instanceOfRawRGB as instanceOfRawRGB3,
   instanceOfRawVector3 as instanceOfRawVector34
 } from "@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
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 THREE2.Object3D.DEFAULT_UP.set(0, 0, 1);
 function InnerRenderedShape({
@@ -843,10 +902,9 @@ function InnerRenderedShape({
   const refGroup = useRef4(null);
   const ref = useRef4(null);
   const shape = useVizijStore(useShallow4((state) => state.world[id]));
-  const refs = useVizijStore(
-    useShallow4((state) => state.world[id].refs)
+  const refIsNull = useVizijStore(
+    (state) => !state.refs[id]?.[namespace]?.current
   );
-  const refIsNull = !refs[namespace]?.current;
   const animatables = useVizijStore(useShallow4((state) => state.animatables));
   const animatableValues = useMemo4(() => {
     const av = {};
@@ -974,6 +1032,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
@@ -1089,119 +1189,44 @@ function InnerRenderedShape({
   );
 }
 var RenderedShape = memo4(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
-import { Fragment as Fragment3, jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function InnerRenderable({
   id,
   namespace,
   chain
 }) {
   const type = useVizijStore(useShallow5((state) => state.world[id].type));
-  const refs = useVizijStore(useShallow5((state) => state.world[id].refs));
-  const resolvedNamespaces = useMemo5(() => {
-    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__ */ jsx5(RenderedGroup, { id, namespace, chain }, key);
+    case "ellipse":
+      return /* @__PURE__ */ jsx5(
+        RenderedEllipse,
+        {
+          id,
+          namespace,
+          chain
+        },
+        key
+      );
+    case "rectangle":
+      return /* @__PURE__ */ jsx5(
+        RenderedRectangle,
+        {
+          id,
+          namespace,
+          chain
+        },
+        key
+      );
+    case "shape":
+      return /* @__PURE__ */ jsx5(RenderedShape, { id, namespace, chain }, key);
+    default:
+      return null;
   }
-  return /* @__PURE__ */ jsx5(Fragment3, { children: resolvedNamespaces.map((ns) => {
-    switch (type) {
-      case "group":
-        return /* @__PURE__ */ jsx5(
-          RenderedGroup,
-          {
-            id,
-            namespace: ns,
-            chain
-          },
-          `${ns}.${id}`
-        );
-      case "ellipse":
-        return /* @__PURE__ */ jsx5(
-          RenderedEllipse,
-          {
-            id,
-            namespace: ns,
-            chain
-          },
-          `${ns}.${id}`
-        );
-      case "rectangle":
-        return /* @__PURE__ */ jsx5(
-          RenderedRectangle,
-          {
-            id,
-            namespace: ns,
-            chain
-          },
-          `${ns}.${id}`
-        );
-      case "shape":
-        return /* @__PURE__ */ jsx5(
-          RenderedShape,
-          {
-            id,
-            namespace: ns,
-            chain
-          },
-          `${ns}.${id}`
-        );
-      default:
-        return null;
-    }
-  }) });
 }
 var Renderable = memo5(InnerRenderable);
 
@@ -1212,21 +1237,17 @@ import { produce, enableMapSet } from "immer";
 import * as THREE3 from "three";
 import { getLookup as getLookup2 } from "@vizij/utils";
 
-// src/actions/create-new-element.ts
-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 || [],
-    refs: partialBody.refs || {},
     features: { translation, rotation, scale },
     root: partialBody.root ?? false,
     children: partialBody.children || []
@@ -1243,11 +1264,9 @@ function createNewElement(state, type, root = false) {
     });
     if (Object.entries(state.world).length === 0) {
       const name = `New-Root`;
-      const refs = { default: createRef() };
       const newElement = createDefaultGroup({
         name,
-        root: true,
-        refs
+        root: true
       });
       state.world[newElement.id] = newElement;
       state.elementSelection = [buildSelection(newElement.id)];
@@ -1259,11 +1278,7 @@ function createNewElement(state, type, root = false) {
         return;
       }
       const name = `New-Body`;
-      const refs = mapValues2(
-        worldRootEntry.refs,
-        () => 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)];
@@ -1283,7 +1298,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 +1333,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 +1350,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 +1367,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 +1380,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 +1393,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 +1406,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 +1423,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 },
@@ -1438,6 +1478,7 @@ enableMapSet();
 var VizijSlice = (set, get) => ({
   // worldRef: createRef<THREE.Group>(),
   world: {},
+  refs: {},
   animatables: {},
   values: /* @__PURE__ */ new Map(),
   renderHit: false,
@@ -1511,12 +1552,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) => {
@@ -1715,6 +1754,7 @@ var VizijSlice = (set, get) => ({
     );
   },
   setVizij: (scene, animatables) => {
+    recordRenderCounter("rootReplacementCount");
     set({
       world: scene,
       animatables
@@ -1722,6 +1762,7 @@ var VizijSlice = (set, get) => ({
   },
   addWorldElements(world, animatables, replace) {
     if (replace) {
+      recordRenderCounter("rootReplacementCount");
       set({ world, animatables });
     } else {
       set((state) => ({
@@ -1736,14 +1777,12 @@ var VizijSlice = (set, get) => ({
     }));
   },
   setReference: (id, namespace, ref) => {
-    set(
-      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 = create()(
@@ -1758,8 +1797,57 @@ var createVizijStore = (initial) => 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
+import {
+  ACESFilmicToneMapping,
+  AgXToneMapping,
+  NeutralToneMapping,
+  NoToneMapping
+} from "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: NoToneMapping,
+  agx: AgXToneMapping,
+  aces: ACESFilmicToneMapping,
+  neutral: 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
-import { Fragment as Fragment4, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef5 } from "react";
+import { Fragment as Fragment3, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef5 } from "react";
 import { useFrame } from "@react-three/fiber";
 import { useShallow as useShallow6 } from "zustand/react/shallow";
 import {
@@ -1774,7 +1862,7 @@ import {
 import { jsx as jsx6 } from "react/jsx-runtime";
 function SelectionGlowEffect({
   enabled = false,
-  color = "#ff1010ff",
+  color = "#ff1010",
   opacity = 0.9,
   thresholdAngle = 2
 }) {
@@ -1786,7 +1874,7 @@ function SelectionGlowEffect({
   if (!enabled || selections.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx6(Fragment4, { children: selections.map((selection) => /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx6(Fragment3, { children: selections.map((selection) => /* @__PURE__ */ jsx6(
     SelectionOutline,
     {
       selection,
@@ -1806,19 +1894,19 @@ function SelectionOutline({
   const target = useVizijStore(
     useShallow6((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 = useMemo6(() => {
+  const edgesGeometry = useMemo5(() => {
     if (!target.geometry) return null;
     const edges = new EdgesGeometry(target.geometry, thresholdAngle);
     return edges;
   }, [target.geometry, thresholdAngle]);
   useEffect6(() => () => edgesGeometry?.dispose(), [edgesGeometry]);
-  const material = useMemo6(() => {
+  const material = useMemo5(() => {
     const mat = new LineBasicMaterial({
       color: new Color(color),
       transparent: true,
@@ -1868,7 +1956,7 @@ function copyWorldTransform(source, target) {
 }
 
 // src/vizij.tsx
-import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 Object3D4.DEFAULT_UP.set(0, 0, 1);
 function Vizij({
   style,
@@ -1877,9 +1965,17 @@ function Vizij({
   namespace = "default",
   showSafeArea = false,
   showSelectionGlow = false,
+  toneMapping = "none",
   onPointerMissed
 }) {
   const ctx = useContext3(VizijContext);
+  useEffect7(() => {
+    recordRenderCounter("canvasMountCount");
+    recordRenderCounter("mountedCanvasCount");
+    return () => {
+      recordRenderCounter("mountedCanvasCount", -1);
+    };
+  }, []);
   if (ctx) {
     return /* @__PURE__ */ jsx7(
       Canvas,
@@ -1890,7 +1986,6 @@ function Vizij({
         onPointerMissed,
         gl: {
           outputColorSpace: SRGBColorSpace,
-          toneMapping: NoToneMapping,
           antialias: true
         },
         children: /* @__PURE__ */ jsx7(
@@ -1899,7 +1994,8 @@ function Vizij({
             rootId,
             namespace,
             showSafeArea,
-            showSelectionGlow
+            showSelectionGlow,
+            toneMapping
           }
         )
       }
@@ -1913,7 +2009,6 @@ function Vizij({
         onPointerMissed,
         gl: {
           outputColorSpace: SRGBColorSpace,
-          toneMapping: NoToneMapping,
           antialias: true
         },
         children: /* @__PURE__ */ jsx7(
@@ -1922,7 +2017,8 @@ function Vizij({
             rootId,
             namespace,
             showSafeArea,
-            showSelectionGlow
+            showSelectionGlow,
+            toneMapping
           }
         )
       }
@@ -1934,21 +2030,23 @@ function InnerVizij({
   namespace = "default",
   container,
   showSafeArea,
-  showSelectionGlow
+  showSelectionGlow,
+  toneMapping = "none"
 }) {
   const sceneParentSizing = container ? {
     width: container.width * container.resolution,
     height: container.height * container.resolution
   } : void 0;
-  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
     /* @__PURE__ */ jsx7("ambientLight", { intensity: Math.PI / 2 }),
+    /* @__PURE__ */ jsx7(ToneMappingController, { mode: toneMapping }),
     /* @__PURE__ */ jsx7(
       OrthographicCamera,
       {
         makeDefault: true,
         position: [0, 0, 100],
         near: 0.1,
-        far: 101
+        far: 1e3
       }
     ),
     /* @__PURE__ */ jsx7(Suspense, { fallback: null, children: /* @__PURE__ */ jsx7(
@@ -1964,6 +2062,31 @@ function InnerVizij({
   ] });
 }
 var MemoizedInnerVizij = memo6(InnerVizij);
+function ToneMappingController({ mode }) {
+  const gl = useThree((state) => state.gl);
+  const scene = useThree((state) => state.scene);
+  useEffect7(() => {
+    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",
@@ -2053,16 +2176,6 @@ 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
 import { useContext as useContext4, useEffect as useEffect8 } from "react";
 function useVizijStoreSubscription(selector, listener) {
@@ -2096,7 +2209,6 @@ import * as THREE5 from "three";
 import { GLTFLoader, DRACOLoader } from "three-stdlib";
 
 // src/functions/gltf-loading/traverse-three.ts
-import { createRef as createRef3 } from "react";
 import * as THREE4 from "three";
 
 // src/functions/gltf-loading/map-features.ts
@@ -2126,21 +2238,25 @@ import { Object3D as Object3D7 } from "three";
 
 // src/functions/gltf-loading/import-group.ts
 import { Object3D as Object3D6 } from "three";
-
-// src/functions/util.ts
-import { createRef as createRef2 } from "react";
-function namespaceArrayToRefs(namespaces) {
-  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: createRef2() }), {});
-}
+import { createBrowserSafeId as createBrowserSafeId5 } from "@vizij/utils";
 
 // 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
-function sanitizeMorphKey(name, fallbackIndex, used) {
+import {
+  createBrowserSafeId as createBrowserSafeId3
+} from "@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)) {
@@ -2149,6 +2265,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 = {};
@@ -2160,7 +2282,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] = {
@@ -2191,12 +2313,12 @@ function importGeometry(geometry, mesh) {
 
 // src/functions/gltf-loading/import-mesh.ts
 Object3D5.DEFAULT_UP.set(0, 0, 1);
-function importMesh(mesh, namespaces, colorLookup) {
+function importMesh(mesh, colorLookup) {
   let world = {};
   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 },
@@ -2212,7 +2334,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 },
@@ -2225,7 +2347,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 },
@@ -2236,56 +2358,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(
@@ -2296,7 +2482,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
       });
@@ -2305,7 +2491,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
       });
@@ -2319,7 +2505,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,
@@ -2327,21 +2513,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) {
@@ -2377,13 +2570,13 @@ function shouldImportAsGroupChild(child) {
 
 // src/functions/gltf-loading/import-group.ts
 Object3D6.DEFAULT_UP.set(0, 0, 1);
-function importGroup(group, namespaces, colorLookup, rootBounds) {
+function importGroup(group, colorLookup, rootBounds) {
   let world = {};
   let animatables = {};
   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 },
@@ -2399,7 +2592,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 },
@@ -2412,7 +2605,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 },
@@ -2425,7 +2618,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
       });
@@ -2434,7 +2627,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
       });
@@ -2456,8 +2649,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];
@@ -2483,12 +2675,11 @@ function shouldImportAsGroupChild2(child) {
 
 // src/functions/gltf-loading/import-scene.ts
 Object3D7.DEFAULT_UP.set(0, 0, 1);
-function importScene(scene, namespaces, rootBounds) {
+function importScene(scene, rootBounds) {
   let world = {};
   let animatables = {};
   const [newWorldItems, newAnimatables] = importGroup(
     scene,
-    namespaces,
     {},
     rootBounds
   );
@@ -2499,7 +2690,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;
@@ -2522,11 +2713,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
         switch (data.type) {
           case "group":
             loadedData = {
-              ...data,
-              refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: createRef3() }),
-                {}
-              )
+              ...data
             };
             [mappedFeatures, animatableValues] = mapFeatures(data.features);
             isGroupFeatures(mappedFeatures);
@@ -2537,11 +2724,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
           case "shape":
             loadedData = {
               ...data,
-              geometry: child.geometry,
-              refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: createRef3() }),
-                {}
-              )
+              geometry: child.geometry
             };
             [mappedFeatures, animatableValues] = mapFeatures(data.features);
             isShapeFeatures(mappedFeatures);
@@ -2551,11 +2734,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             break;
           case "ellipse":
             loadedData = {
-              ...data,
-              refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: createRef3() }),
-                {}
-              )
+              ...data
             };
             [mappedFeatures, animatableValues] = mapFeatures(data.features);
             isEllipseFeatures(mappedFeatures);
@@ -2565,11 +2744,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             break;
           case "rectangle":
             loadedData = {
-              ...data,
-              refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: createRef3() }),
-                {}
-              )
+              ...data
             };
             [mappedFeatures, animatableValues] = mapFeatures(data.features);
             isRectangleFeatures(mappedFeatures);
@@ -2592,7 +2767,6 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
     }
     const [newWorldData, newAnimatableData] = importScene(
       group,
-      namespaces,
       derivedRootBounds
     );
     Object.assign(worldData, newWorldData);
@@ -2605,7 +2779,10 @@ var MATERIAL_NAME_FEATURE_KEYS = [
   "opacity",
   "roughness",
   "metalness",
-  "shininess"
+  "shininess",
+  "emissive",
+  "emissiveIntensity",
+  "specular"
 ];
 var MATERIAL_NAME_SUFFIXES2 = [
   " color",
@@ -2614,7 +2791,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) {
@@ -2834,12 +3014,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 () => {
@@ -2856,6 +3053,10 @@ function applyVizijBundle(object, bundle) {
         delete object.userData;
       }
     }
+    for (const { node, extensions } of staleCarriers) {
+      node.userData.gltfExtensions = extensions;
+    }
+    staleCarriers.length = 0;
     applied = false;
   };
 }
@@ -3281,16 +3482,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);
@@ -3306,81 +3497,21 @@ async function resolveParserJson(parserJson, fallback) {
   }
   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 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 GLTFLoader();
-    loader.setDRACOLoader(new 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
   );
@@ -3388,105 +3519,49 @@ 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 GLTFLoader();
   modelLoader.setDRACOLoader(new 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 GLTFLoader();
-    loader.setDRACOLoader(new 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
-import { DRACOLoader as DRACOLoader2, GLTFLoader as GLTFLoader2 } from "three-stdlib";
-var loadGltfFromBlob = (blob, namespaces) => {
-  return new Promise((resolve, reject) => {
-    const loader = new GLTFLoader2();
-    loader.setDRACOLoader(new DRACOLoader2());
-    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
 import { GLTFExporter } from "three-stdlib";
@@ -3501,17 +3576,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;
@@ -3593,7 +3657,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;
   }
@@ -3623,8 +3687,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));
@@ -3646,11 +3709,41 @@ 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);
+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 GLTFExporter();
   exporter.register(() => ({
     writeMesh(mesh, meshDef) {
@@ -3660,81 +3753,330 @@ 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
+import * as THREE7 from "three";
+import {
+  instanceOfRawEuler as instanceOfRawEuler5,
+  instanceOfRawHSL as instanceOfRawHSL4,
+  instanceOfRawNumber as instanceOfRawNumber5,
+  instanceOfRawRGB as instanceOfRawRGB4,
+  instanceOfRawVector2 as instanceOfRawVector24,
+  instanceOfRawVector3 as instanceOfRawVector35
+} from "@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 (instanceOfRawVector35(value)) {
+        object.position.set(value.x, value.y, value.z);
+      } else if (instanceOfRawVector24(value)) {
+        object.position.set(value.x, value.y, object.position.z);
+      }
+    },
+    rotation: (value) => {
+      if (instanceOfRawEuler5(value)) {
+        object.rotation.set(value.x, value.y, value.z, "ZYX");
+      } else if (instanceOfRawNumber5(value)) {
+        object.rotation.set(0, 0, 0);
+        object.rotateZ(value);
+      }
+    },
+    scale: (value) => {
+      if (instanceOfRawVector35(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 (instanceOfRawNumber5(value)) {
+        object.scale.set(value, value, value);
+      } else {
+        object.scale.set(1, 1, 1);
+      }
+    }
+  };
+}
+function shapeTransform(object) {
+  return {
+    translation: (value) => {
+      if (instanceOfRawVector35(value)) {
+        object.position.set(value.x, value.y, value.z);
+      }
+    },
+    rotation: (value) => {
+      if (instanceOfRawEuler5(value)) {
+        object.rotation.set(value.x, value.y, value.z, "ZYX");
+      }
+    },
+    scale: (value) => {
+      if (instanceOfRawVector35(value)) {
+        object.scale.set(value.x, value.y, value.z);
+      } else if (instanceOfRawNumber5(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 (instanceOfRawNumber5(value)) {
+        material.opacity = value;
+        material.transparent = value < 1;
+      }
+    },
+    color: (value) => {
+      if (!standard.color) {
+        return;
+      }
+      if (instanceOfRawRGB4(value)) {
+        standard.color.setRGB(value.r, value.g, value.b);
+      } else if (instanceOfRawVector35(value)) {
+        standard.color.setRGB(value.x, value.y, value.z);
+      } else if (instanceOfRawHSL4(value)) {
+        standard.color.setHSL(value.h, value.s, value.l);
+      }
+    },
+    roughness: (value) => {
+      if (standard.roughness !== void 0 && instanceOfRawNumber5(value)) {
+        standard.roughness = value;
+      }
+    },
+    metalness: (value) => {
+      if (standard.metalness !== void 0 && instanceOfRawNumber5(value)) {
+        standard.metalness = value;
+      }
+    },
+    shininess: (value) => {
+      if (phong.shininess !== void 0 && instanceOfRawNumber5(value)) {
+        phong.shininess = value;
+      }
+    },
+    emissive: (value) => {
+      if (standard.emissive && instanceOfRawRGB4(value)) {
+        standard.emissive.setRGB(value.r, value.g, value.b);
+      }
+    },
+    emissiveIntensity: (value) => {
+      if (standard.emissiveIntensity !== void 0 && instanceOfRawNumber5(value)) {
+        standard.emissiveIntensity = value;
+      }
+    },
+    specular: (value) => {
+      if (phong.specular && instanceOfRawRGB4(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 (instanceOfRawNumber5(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;
   }
 }
 export {
+  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,