@vizij/render 0.1.2 → 1.0.1

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 = {};
@@ -1163,57 +1232,6 @@ function InnerRenderedShape({
   );
 }
 var RenderedShape = (0, import_react7.memo)(InnerRenderedShape);
-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/renderable.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -1223,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);
 
@@ -1292,10 +1280,6 @@ var import_immer = require("immer");
 var THREE3 = __toESM(require("three"));
 var import_utils8 = require("@vizij/utils");
 
-// src/actions/create-new-element.ts
-var import_react9 = require("react");
-var import_lodash3 = require("lodash");
-
 // src/functions/create-world-element.ts
 var import_utils6 = require("@vizij/utils");
 function createDefaultGroup(partialBody) {
@@ -1307,7 +1291,6 @@ function createDefaultGroup(partialBody) {
     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 || []
@@ -1324,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)];
@@ -1340,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)];
@@ -1544,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,
@@ -1617,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) => {
@@ -1844,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)()(
@@ -1866,11 +1840,55 @@ 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,
@@ -1886,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,
@@ -1906,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;
@@ -1953,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);
@@ -1969,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,
@@ -1977,10 +1995,11 @@ function Vizij({
   namespace = "default",
   showSafeArea = false,
   showSelectionGlow = false,
+  toneMapping = "none",
   onPointerMissed
 }) {
-  const ctx = (0, import_react11.useContext)(VizijContext);
-  (0, import_react11.useEffect)(() => {
+  const ctx = (0, import_react10.useContext)(VizijContext);
+  (0, import_react10.useEffect)(() => {
     recordRenderCounter("canvasMountCount");
     recordRenderCounter("mountedCanvasCount");
     return () => {
@@ -1996,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)(
@@ -2006,7 +2024,8 @@ function Vizij({
             rootId,
             namespace,
             showSafeArea,
-            showSelectionGlow
+            showSelectionGlow,
+            toneMapping
           }
         )
       }
@@ -2019,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)(
@@ -2029,7 +2047,8 @@ function Vizij({
             rootId,
             namespace,
             showSafeArea,
-            showSelectionGlow
+            showSelectionGlow,
+            toneMapping
           }
         )
       }
@@ -2041,7 +2060,8 @@ function InnerVizij({
   namespace = "default",
   container,
   showSafeArea,
-  showSelectionGlow
+  showSelectionGlow,
+  toneMapping = "none"
 }) {
   const sceneParentSizing = container ? {
     width: container.width * container.resolution,
@@ -2049,6 +2069,7 @@ 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,
       {
@@ -2058,7 +2079,7 @@ function InnerVizij({
         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,
@@ -2070,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",
@@ -2087,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) {
@@ -2130,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];
@@ -2160,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);
@@ -2183,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;
 }
@@ -2203,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
@@ -2229,28 +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");
+var import_three5 = require("three");
 var import_utils11 = require("@vizij/utils");
 
-// src/functions/util.ts
-var import_react15 = require("react");
-function namespaceArrayToRefs(namespaces) {
-  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }), {});
-}
-
 // 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
 var import_utils9 = require("@vizij/utils");
-function sanitizeMorphKey(name, fallbackIndex, used) {
+
+// 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)) {
@@ -2259,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 = {};
@@ -2300,8 +2340,8 @@ 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 = {};
@@ -2470,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
       });
@@ -2479,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
       });
@@ -2516,8 +2556,7 @@ function importMesh(mesh, namespaces, colorLookup) {
       ...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];
@@ -2558,8 +2597,8 @@ 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 = {};
@@ -2607,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
       });
@@ -2616,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
       });
@@ -2638,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];
@@ -2664,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
   );
@@ -2681,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;
@@ -2704,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);
@@ -2719,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);
@@ -2733,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);
@@ -2747,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);
@@ -2774,7 +2795,6 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
     }
     const [newWorldData, newAnimatableData] = importScene(
       group,
-      namespaces,
       derivedRootBounds
     );
     Object.assign(worldData, newWorldData);
@@ -3490,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);
@@ -3515,73 +3525,21 @@ async function resolveParserJson(parserJson, fallback) {
   }
   return parserJson;
 }
-async function loadGLTF(url, namespaces, aggressiveImport = false, rootBounds) {
-  const asset = await loadGLTFWithBundleInternal(
-    url,
-    namespaces,
+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,
-    "url"
+    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 loadGLTFWithBundleInternal(
-        objectUrl,
-        actualizedNamespaces,
-        aggressiveImport,
-        rootBounds,
-        "blob",
-        { 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 = createTrackedGLTFLoader();
-    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
   );
@@ -3596,125 +3554,45 @@ function createTrackedGLTFLoader() {
   modelLoader.setDRACOLoader(new import_three_stdlib.DRACOLoader());
   return modelLoader;
 }
-async function loadGLTFWithBundleInternal(url, namespaces, aggressiveImport = false, rootBounds, sourceKind = "url", parserJsonFallback) {
-  if (sourceKind === "url") {
-    recordRenderCounter("gltfUrlLoadCount");
-  } else {
-    recordRenderCounter("gltfBlobLoadCount");
-  }
+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 loadGLTFWithBundle(url, namespaces, aggressiveImport = false, rootBounds, parserJsonFallback) {
-  return loadGLTFWithBundleInternal(
-    url,
-    namespaces,
+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}`));
+    });
+  });
+  const parserJson = await resolveParserJson(gltf?.parser?.json, {
+    arrayBuffer
+  });
+  return parseScene(
+    gltf.scene,
     aggressiveImport,
     rootBounds,
-    "url",
-    parserJsonFallback
+    parserJson,
+    gltf.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 loadGLTFWithBundleInternal(
-        objectUrl,
-        actualizedNamespaces,
-        aggressiveImport,
-        rootBounds,
-        "blob",
-        { 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 = createTrackedGLTFLoader();
-    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}`));
-      }
-    );
-  });
-}
-
-// src/functions/load-gltf-blob.ts
-var import_three_stdlib2 = require("three-stdlib");
-var loadGltfFromBlob = (blob, namespaces) => {
-  recordRenderCounter("gltfLoadCount");
-  recordRenderCounter("gltfBlobLoadCount");
-  recordRenderCounter("dracoLoaderCreationCount");
-  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);
-  });
-};
 
 // 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) {
@@ -3726,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;
@@ -3818,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;
   }
@@ -3848,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));
@@ -3871,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;
@@ -3885,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 binary = options.binary ?? true;
-  const exporterOptions = {
-    trs: true,
-    onlyVisible: false,
-    binary,
-    includeCustomExtensions: true
+  const detachBundle = options.bundle ? applyVizijBundle(exportRoot, options.bundle) : () => {
   };
-  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,