@vizij/render 1.0.1 → 2.0.0

package/dist/index.js

@@ -32,15 +32,16 @@ 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,
+  VizijCanvas: () => VizijCanvas,
   VizijContext: () => VizijContext,
   VizijSlice: () => VizijSlice,
   applyVizijBundle: () => applyVizijBundle,
   buildSceneGraph: () => buildSceneGraph,
+  canvasMounted: () => canvasMounted,
   createVizijStore: () => createVizijStore,
   deriveMorphFeatureKeys: () => deriveMorphFeatureKeys,
   deriveRootBounds: () => deriveRootBounds,
@@ -55,10 +56,9 @@ __export(index_exports, {
   parseGlbJsonChunk: () => parseGlbJsonChunk,
   patchGlbJson: () => patchGlbJson,
   patchVizijBundleMetadata: () => patchVizijBundleMetadata,
-  resolveToneMapping: () => resolveToneMapping,
   sanitizeMorphKey: () => sanitizeMorphKey,
+  setVizijProgress: () => setVizijProgress,
   useDefaultVizijStore: () => useDefaultVizijStore,
-  useFeatures: () => useFeatures,
   useVizijStore: () => useVizijStore,
   useVizijStoreGetter: () => useVizijStoreGetter,
   useVizijStoreSetter: () => useVizijStoreSetter,
@@ -66,1228 +66,548 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/vizij.tsx
-var import_react10 = require("react");
-var import_react_error_boundary = require("react-error-boundary");
-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");
-
-// src/renderables/renderable.tsx
-var import_react8 = require("react");
-var import_shallow6 = require("zustand/react/shallow");
-
-// src/hooks/use-vizij-store.ts
-var import_react2 = require("react");
-var import_zustand = require("zustand");
-
-// src/context.ts
+// src/page/canvas.tsx
 var import_react = require("react");
-var VizijContext = (0, import_react.createContext)(null);
+var import_runtime = require("@vizij/runtime");
 
-// src/hooks/use-vizij-store.ts
-function useVizijStore(selector) {
-  const store = (0, import_react2.useContext)(VizijContext);
-  if (!store) throw new Error("Missing VizijProvider in the tree");
-  return (0, import_zustand.useStore)(store, selector);
+// src/page/progress.ts
+var runtime = {
+  stage: "download",
+  loaded: 0,
+  total: null
+};
+var faces = /* @__PURE__ */ new Map();
+var watchers = /* @__PURE__ */ new Set();
+function setVizijProgress(vizijId, progress) {
+  if (progress === null) {
+    faces.delete(vizijId);
+  } else {
+    const face = faces.get(vizijId);
+    if (face) face.progress = progress;
+    else faces.set(vizijId, { progress, drawn: false });
+  }
+  notify();
+}
+function setRuntimeStage(stage) {
+  runtime = stage;
+  notify();
+}
+function markDrawn(vizijId) {
+  const face = faces.get(vizijId);
+  if (face?.drawn) return;
+  if (face) face.drawn = true;
+  else faces.set(vizijId, { progress: null, drawn: true });
+  notify();
+}
+function loadingStage(vizijId) {
+  const face = faces.get(vizijId);
+  if (face?.drawn) return null;
+  if (runtime?.stage === "failed") return runtime;
+  if (face?.progress?.stage === "failed") return face.progress;
+  if (runtime !== null) return runtime;
+  return face?.progress ?? { stage: "load" };
+}
+function watchLoading(vizijId, listener) {
+  const watcher = { vizijId, listener, last: loadingStage(vizijId) };
+  watchers.add(watcher);
+  listener(watcher.last);
+  return () => {
+    watchers.delete(watcher);
+  };
 }
-
-// src/renderables/group.tsx
-var import_react4 = require("react");
-var THREE = __toESM(require("three"));
-var import_shallow2 = require("zustand/react/shallow");
-var import_utils2 = require("@vizij/utils");
-
-// src/hooks/use-features.ts
-var import_react3 = require("react");
-var import_shallow = require("zustand/shallow");
-var import_utils = require("@vizij/utils");
-function useFeatures(namespace, features, callbacks, debugInfo) {
-  const store = (0, import_react3.useContext)(VizijContext);
-  if (!store) throw new Error("Missing VizijProvider in the tree");
-  (0, import_react3.useEffect)(() => {
-    const unsubsribes = [];
-    Object.keys(callbacks).forEach((key) => {
-      if (!(key in features)) {
-        return;
-      }
-      const featureInfo = features[key];
-      if (!featureInfo.animated) {
-        callbacks[key](featureInfo.value);
-      } else {
-        const animatableValueInfo = store.getState().animatables[featureInfo.value];
-        if (!animatableValueInfo) {
-          console.error(
-            `Feature with id ${key} is animated but the animated value with id ${featureInfo.value} is not found`,
-            debugInfo
-          );
-          return;
-        }
-        const cb = (value) => {
-          if (value === void 0) {
-            callbacks[key](animatableValueInfo.default);
-          } else {
-            callbacks[key](value);
-          }
-        };
-        const defaultValue = animatableValueInfo.default;
-        const lookupKey = (0, import_utils.getLookup)(namespace, animatableValueInfo.id);
-        const unsubscribe = store.subscribe(
-          (state) => state.values.get(lookupKey) ?? defaultValue,
-          cb,
-          { equalityFn: import_shallow.shallow, fireImmediately: true }
-        );
-        unsubsribes.push(unsubscribe);
-      }
-    });
-    return () => {
-      unsubsribes.forEach((unsubscribe) => unsubscribe());
-    };
-  }, [features, callbacks, store, debugInfo, namespace]);
+function notify() {
+  for (const watcher of [...watchers]) {
+    const next = loadingStage(watcher.vizijId);
+    if (sameStage(next, watcher.last)) continue;
+    watcher.last = next;
+    watcher.listener(next);
+  }
+}
+function sameStage(a, b) {
+  if (a === null || b === null) return a === b;
+  if (a.stage !== b.stage) return false;
+  if ("loaded" in a && "loaded" in b) {
+    return a.loaded === b.loaded && a.total === b.total;
+  }
+  if ("error" in a && "error" in b) return a.error === b.error;
+  return true;
 }
 
-// src/functions/create-stored-features.ts
-function createStoredFeatures(objectFeatures, animatableValues) {
-  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 [key, staticFeature.label ? { ...staticFeature } : staticFeature];
+// src/page/frame.ts
+function frame(slots2, canvas2, view2) {
+  const origin = canvas2.getBoundingClientRect();
+  const byId = /* @__PURE__ */ new Map();
+  for (const slot of slots2) {
+    byId.set(slot.vizijId, slot);
+    const rect = relative(slot.element.getBoundingClientRect(), origin);
+    if (!sameRect(rect, slot.placed)) {
+      view2.placeVizij(slot.vizijId, rect);
+      slot.placed = rect;
     }
-  );
-  return Object.fromEntries(stored);
+    const ready2 = view2.ready(slot.vizijId);
+    if (ready2) markDrawn(slot.vizijId);
+    if (slot.element.getAttribute("data-vizij-ready") !== String(ready2)) {
+      slot.element.setAttribute("data-vizij-ready", String(ready2));
+    }
+    if (slot.safeArea) {
+      outline(slot.safeArea, view2.safeArea(slot.vizijId), origin);
+    }
+  }
+  for (const pick of view2.drainPicks()) {
+    byId.get(pick.vizijId)?.onPick?.(pick);
+  }
 }
-
-// src/functions/create-stored-data.ts
-function createStoredRenderable(data, animatableValues) {
-  const { geometry: _geometry, ...stored } = data;
-  const storedFeatures = createStoredFeatures(
-    data.features,
-    animatableValues
-  );
-  return { ...stored, features: storedFeatures };
+function relative(rect, origin) {
+  return {
+    x: rect.x - origin.x,
+    y: rect.y - origin.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function sameRect(a, b) {
+  return b !== null && a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+function outline({ outline: outline2, frame: frame2 }, area, canvas2) {
+  if (!area) {
+    outline2.style.display = "none";
+    return;
+  }
+  const at = relative(frame2.getBoundingClientRect(), canvas2);
+  outline2.style.display = "block";
+  outline2.style.left = `${area.x - at.x}px`;
+  outline2.style.top = `${area.y - at.y}px`;
+  outline2.style.width = `${area.width}px`;
+  outline2.style.height = `${area.height}px`;
 }
 
-// src/renderables/group.tsx
+// src/page/canvas.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
-function InnerRenderedGroup({
-  id,
-  namespace,
-  chain
+var canvas = null;
+var mounting = null;
+var live = false;
+var settle;
+var mounted = new Promise((resolve, reject) => {
+  settle = { resolve, reject };
+});
+var PAINT_WAIT_MS = 100;
+var slots = /* @__PURE__ */ new Set();
+var hosts = 0;
+var loop = null;
+function canvasMounted() {
+  return mounted;
+}
+var DEFAULT_STYLE = {
+  position: "fixed",
+  inset: 0,
+  pointerEvents: "none"
+};
+function VizijCanvas({
+  options,
+  className,
+  style
 }) {
-  const ref = (0, import_react4.useRef)(null);
-  const group = useVizijStore((0, import_shallow2.useShallow)((state) => state.world[id]));
-  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)
-  );
-  const animatableValues = (0, import_react4.useMemo)(() => {
-    const av = {};
-    Object.values(group.features).forEach((feat) => {
-      if (feat.animated) {
-        const animatable = animatables[feat.value];
-        av[animatable.id] = animatable;
-      }
-    });
-    return av;
-  }, [group.features, animatables]);
-  const userData = {
-    gltfExtensions: {
-      RobotData: createStoredRenderable(group, animatableValues)
-    }
-  };
-  useFeatures(namespace, group.features, {
-    translation: (pos) => {
-      if (ref.current?.position && (0, import_utils2.instanceOfRawVector3)(pos)) {
-        ref.current.position.set(
-          pos.x,
-          pos.y,
-          pos.z
-        );
-      } else if (ref.current?.position && (0, import_utils2.instanceOfRawVector2)(pos)) {
-        const currentZ = ref.current.position.z;
-        ref.current.position.set(pos.x, pos.y, currentZ);
-      }
-    },
-    rotation: (rot) => {
-      if (ref.current?.rotation && (0, import_utils2.instanceOfRawEuler)(rot)) {
-        ref.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (ref.current?.rotation && (0, import_utils2.instanceOfRawNumber)(rot)) {
-        ref.current.rotation.set(0, 0, 0);
-        ref.current.rotateZ(rot);
-      }
-    },
-    scale: (scale) => {
-      if (ref.current?.scale && (0, import_utils2.instanceOfRawVector3)(scale)) {
-        if (scale.x === null || scale.y === null || scale.z === null) {
-          ref.current.scale.set(0.1, 0.1, 0.1);
-          return;
-        }
-        ref.current.scale.set(scale.x, scale.y, scale.z);
-      } else if (ref.current && (0, import_utils2.instanceOfRawNumber)(scale)) {
-        ref.current.scale.set(scale, scale, scale);
-      } else if (ref.current) {
-        ref.current.scale.set(1, 1, 1);
-      }
-    }
-  });
-  const setReference = useVizijStore(
-    (0, import_shallow2.useShallow)((state) => state.setReference)
-  );
-  (0, import_react4.useEffect)(() => {
-    if (ref.current && refIsNull) {
-      setReference(group.id, namespace, ref);
-    }
-  }, [group.id, namespace, ref, setReference, refIsNull]);
-  (0, import_react4.useEffect)(() => {
-    if (ref.current) {
-      ref.current.name = group.name;
+  const host = (0, import_react.useRef)(null);
+  const firstOptions = (0, import_react.useRef)(options);
+  (0, import_react.useEffect)(() => {
+    const element = host.current;
+    const shown = pageCanvas();
+    element.appendChild(shown);
+    if (!mounting) {
+      mounting = mountOnce(shown, firstOptions.current);
+      mounting.then(settle.resolve, settle.reject);
+    }
+    hosts += 1;
+    if (hosts === 1) {
+      void mounting.then(start, () => void 0);
     }
-  }, [group.name]);
-  const handlePointerOver = (0, import_react4.useCallback)(
-    (event) => {
-      if (event.eventObject !== event.object) {
-        return;
+    return () => {
+      hosts -= 1;
+      if (hosts === 0) {
+        stop();
       }
-      setHoveredElement({ id, namespace, type: "group" });
-    },
-    [id, namespace, setHoveredElement]
-  );
-  const handlePointerOut = (0, import_react4.useCallback)(
-    (event) => {
-      if (event.eventObject !== event.object) {
-        return;
+      if (shown.parentElement === element) {
+        element.removeChild(shown);
       }
-      setHoveredElement(null);
-    },
-    [setHoveredElement]
-  );
+    };
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "group",
+    "div",
     {
-      ref,
-      uuid: `${namespace}.${group.id}`,
-      userData,
-      onPointerOver: handlePointerOver,
-      onPointerOut: handlePointerOut,
-      children: group.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        Renderable,
-        {
-          id: child,
-          namespace,
-          chain: [...chain, id]
-        },
-        child
-      ))
+      ref: host,
+      className,
+      style: style ?? (className ? void 0 : DEFAULT_STYLE)
     }
   );
 }
-var RenderedGroup = (0, import_react4.memo)(InnerRenderedGroup);
-
-// src/renderables/ellipse.tsx
-var import_react5 = require("react");
-var import_shallow3 = require("zustand/react/shallow");
-var import_utils3 = require("@vizij/utils");
-var import_drei = require("@react-three/drei");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function InnerRenderedEllipse({
-  id,
-  namespace,
-  chain
-}) {
-  const ellipseRef = (0, import_react5.useRef)(null);
-  const materialRef = (0, import_react5.useRef)(
-    null
-  );
-  const lineRef = (0, import_react5.useRef)(null);
-  const strokeOffsetRef = (0, import_react5.useRef)(0);
-  const strokeWidthRef = (0, import_react5.useRef)(0);
-  const onElementClick = useVizijStore(
-    (0, import_shallow3.useShallow)((state) => state.onElementClick)
-  );
-  const setHoveredElement = useVizijStore(
-    (0, import_shallow3.useShallow)((state) => state.setHoveredElement)
-  );
-  const ellipse = useVizijStore(
-    (0, import_shallow3.useShallow)((state) => state.world[id])
-  );
-  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 = {};
-    Object.values(ellipse.features).forEach((feat) => {
-      if (feat.animated) {
-        const animatable = animatables[feat.value];
-        av[animatable.id] = animatable;
-      }
-    });
-    return av;
-  }, [ellipse.features, animatables]);
-  const selectionData = (0, import_react5.useMemo)(
-    () => ({ id, namespace, type: "ellipse" }),
-    [id, namespace]
-  );
-  const userData = (0, import_react5.useMemo)(
-    () => ({
-      gltfExtensions: {
-        RobotData: createStoredRenderable(ellipse, animatableValues)
-      },
-      selection: selectionData
-    }),
-    [ellipse, animatableValues, selectionData]
-  );
-  useFeatures(namespace, ellipse.features, {
-    translation: (pos) => {
-      if (ellipseRef.current?.position && (0, import_utils3.instanceOfRawVector3)(pos)) {
-        ellipseRef.current.position.set(
-          pos.x,
-          pos.y,
-          pos.z
-        );
-      } else if (ellipseRef.current?.position && (0, import_utils3.instanceOfRawVector2)(pos)) {
-        const currentZ = ellipseRef.current.position.z;
-        ellipseRef.current.position.set(
-          pos.x,
-          pos.y,
-          currentZ
-        );
-      }
-      if (lineRef.current?.position && (0, import_utils3.instanceOfRawVector3)(pos)) {
-        lineRef.current.position.set(
-          pos.x,
-          pos.y,
-          pos.z
-        );
-      } else if (lineRef.current?.position && (0, import_utils3.instanceOfRawVector2)(pos)) {
-        const currentZ = lineRef.current.position.z;
-        lineRef.current.position.set(
-          pos.x,
-          pos.y,
-          currentZ
-        );
-      }
-    },
-    rotation: (rot) => {
-      if (ellipseRef.current?.rotation && (0, import_utils3.instanceOfRawEuler)(rot)) {
-        ellipseRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (ellipseRef.current?.rotation && (0, import_utils3.instanceOfRawNumber)(rot)) {
-        ellipseRef.current.rotation.set(0, 0, 0);
-        ellipseRef.current.rotateZ(rot);
-      }
-      if (lineRef.current?.rotation && (0, import_utils3.instanceOfRawEuler)(rot)) {
-        lineRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (lineRef.current?.rotation && (0, import_utils3.instanceOfRawNumber)(rot)) {
-        lineRef.current.rotation.set(0, 0, 0);
-        lineRef.current.rotateZ(rot);
-      }
-    },
-    fillOpacity: (op) => {
-      if (materialRef.current?.opacity !== void 0 && (0, import_utils3.instanceOfRawNumber)(op)) {
-        materialRef.current.opacity = op;
-        if (op < 1) {
-          materialRef.current.transparent = true;
-        } else {
-          materialRef.current.transparent = false;
-        }
-        materialRef.current.needsUpdate = true;
-      }
-    },
-    fillColor: (color) => {
-      if (materialRef.current?.color) {
-        if ((0, import_utils3.instanceOfRawRGB)(color)) {
-          materialRef.current.color.setRGB(color.r, color.g, color.b);
-          materialRef.current.needsUpdate = true;
-        } else if ((0, import_utils3.instanceOfRawVector3)(color)) {
-          materialRef.current.color.setRGB(color.x, color.y, color.z);
-          materialRef.current.needsUpdate = true;
-        } else if ((0, import_utils3.instanceOfRawHSL)(color)) {
-          materialRef.current.color.setHSL(color.h, color.s, color.l);
-          materialRef.current.needsUpdate = true;
-        }
-      }
-    },
-    height: (height) => {
-      if (ellipseRef.current && (0, import_utils3.instanceOfRawNumber)(height)) {
-        ellipseRef.current.scale.set(ellipseRef.current.scale.x, height, 1);
-      }
-      if (ellipseRef.current && lineRef.current && (0, import_utils3.instanceOfRawNumber)(height)) {
-        const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
-        lineRef.current.scale.set(
-          ellipseRef.current.scale.x + offset,
-          height + offset,
-          1
-        );
-      }
-    },
-    width: (width) => {
-      if (ellipseRef.current && (0, import_utils3.instanceOfRawNumber)(width)) {
-        ellipseRef.current.scale.set(width, ellipseRef.current.scale.y, 1);
-      }
-      if (ellipseRef.current && lineRef.current && (0, import_utils3.instanceOfRawNumber)(width)) {
-        const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
-        lineRef.current.scale.set(
-          width + offset,
-          ellipseRef.current.scale.y + offset,
-          1
-        );
-      }
-    },
-    strokeOpacity: (strokeOpacity) => {
-      if (lineRef.current?.material && (0, import_utils3.instanceOfRawNumber)(strokeOpacity)) {
-        lineRef.current.material.opacity = strokeOpacity;
-        if (strokeOpacity < 1) {
-          lineRef.current.material.transparent = true;
-        } else {
-          lineRef.current.material.transparent = false;
-        }
-        lineRef.current.material.needsUpdate = true;
-      }
-    },
-    strokeColor: (strokeColor) => {
-      if (lineRef.current?.material.color) {
-        if ((0, import_utils3.instanceOfRawRGB)(strokeColor)) {
-          lineRef.current.material.color.setRGB(
-            strokeColor.r,
-            strokeColor.g,
-            strokeColor.b
-          );
-          lineRef.current.material.needsUpdate = true;
-        } else if ((0, import_utils3.instanceOfRawVector3)(strokeColor)) {
-          lineRef.current.material.color.setRGB(
-            strokeColor.x,
-            strokeColor.y,
-            strokeColor.z
-          );
-          lineRef.current.material.needsUpdate = true;
-        } else if ((0, import_utils3.instanceOfRawHSL)(strokeColor)) {
-          lineRef.current.material.color.setHSL(
-            strokeColor.h,
-            strokeColor.s,
-            strokeColor.l
-          );
-          lineRef.current.material.needsUpdate = true;
-        }
-      }
-    },
-    strokeWidth: (strokeWidth) => {
-      if (lineRef.current?.material && ellipseRef.current) {
-        if ((0, import_utils3.instanceOfRawNumber)(strokeWidth)) {
-          strokeWidthRef.current = strokeWidth;
-          const offset = strokeWidth * strokeOffsetRef.current / 2 + strokeOffsetRef.current * -1;
-          lineRef.current.scale.set(
-            ellipseRef.current.scale.x + offset,
-            ellipseRef.current.scale.y + offset,
-            1
-          );
-          lineRef.current.material.linewidth = strokeWidth;
-          lineRef.current.material.needsUpdate = true;
-        }
-      }
-    },
-    strokeOffset: (strokeOffset) => {
-      if (lineRef.current?.material && ellipseRef.current) {
-        if ((0, import_utils3.instanceOfRawNumber)(strokeOffset)) {
-          strokeOffsetRef.current = strokeOffset;
-          const offset = strokeOffset * strokeWidthRef.current / 2 + strokeOffset * -1;
-          lineRef.current.scale.set(
-            ellipseRef.current.scale.x + offset,
-            ellipseRef.current.scale.y + offset,
-            1
-          );
-        }
-      }
-    }
+async function mountOnce(shown, options) {
+  const unfollow = (0, import_runtime.onInitProgress)((progress) => {
+    setRuntimeStage(progress.stage === "ready" ? { stage: "mount" } : progress);
   });
-  const setReference = useVizijStore(
-    (0, import_shallow3.useShallow)((state) => state.setReference)
-  );
-  const points = (0, import_react5.useMemo)(() => {
-    const n = 600;
-    const p = [];
-    const angleStep = 2 * Math.PI / n;
-    for (let i = 0; i < n; i++) {
-      const angle = i * angleStep;
-      const x = Math.cos(angle);
-      const y = Math.sin(angle);
-      p.push([x, y, 0]);
-    }
-    return p;
-  }, []);
-  (0, import_react5.useEffect)(() => {
-    if (ellipseRef.current && refIsNull)
-      setReference(ellipse.id, namespace, ellipseRef);
-  }, [ellipse.id, namespace, ellipseRef, setReference, refIsNull]);
-  const handlePointerOver = (0, import_react5.useCallback)(
-    (event) => {
-      event.stopPropagation();
-      setHoveredElement({ id, namespace, type: "ellipse" });
-    },
-    [id, namespace, setHoveredElement]
-  );
-  const handlePointerOut = (0, import_react5.useCallback)(
-    (event) => {
-      event.stopPropagation();
-      setHoveredElement(null);
-    },
-    [setHoveredElement]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_drei.Circle,
-      {
-        ref: ellipseRef,
-        userData,
-        args: [1, 100],
-        onPointerOver: handlePointerOver,
-        onPointerOut: handlePointerOut,
-        onClick: (e) => {
-          onElementClick({ id, type: "ellipse", namespace }, [...chain, id], e);
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshStandardMaterial", { attach: "material", ref: materialRef })
-      }
-    ),
-    showLine(ellipse) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_drei.Line,
-      {
-        ref: lineRef,
-        points,
-        onPointerOver: handlePointerOver,
-        onPointerOut: handlePointerOut
-      }
-    )
-  ] });
-}
-var RenderedEllipse = (0, import_react5.memo)(InnerRenderedEllipse);
-var showLine = (ellipse) => {
-  if ("strokeOpacity" in ellipse.features) {
-    return true;
-  } else if ("strokeColor" in ellipse.features) {
-    return true;
-  } else if ("strokeWidth" in ellipse.features) {
-    return true;
-  } else if ("strokeOffset" in ellipse.features) {
-    return true;
-  }
-  return false;
-};
-
-// src/renderables/rectangle.tsx
-var import_react6 = require("react");
-var import_shallow4 = require("zustand/react/shallow");
-var import_utils4 = require("@vizij/utils");
-var import_drei2 = require("@react-three/drei");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function InnerRenderedRectangle({
-  id,
-  namespace,
-  chain
-}) {
-  const rectangleRef = (0, import_react6.useRef)(null);
-  const materialRef = (0, import_react6.useRef)(
-    null
-  );
-  const lineRef = (0, import_react6.useRef)(null);
-  const strokeOffsetRef = (0, import_react6.useRef)(0);
-  const strokeWidthRef = (0, import_react6.useRef)(0);
-  const onElementClick = useVizijStore(
-    (0, import_shallow4.useShallow)((state) => state.onElementClick)
-  );
-  const setHoveredElement = useVizijStore(
-    (0, import_shallow4.useShallow)((state) => state.setHoveredElement)
-  );
-  const rectangle = useVizijStore(
-    (0, import_shallow4.useShallow)((state) => state.world[id])
-  );
-  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 = {};
-    Object.values(rectangle.features).forEach((feat) => {
-      if (feat.animated) {
-        const animatable = animatables[feat.value];
-        av[animatable.id] = animatable;
-      }
-    });
-    return av;
-  }, [rectangle.features, animatables]);
-  const selectionData = (0, import_react6.useMemo)(
-    () => ({ id, namespace, type: "rectangle" }),
-    [id, namespace]
-  );
-  const userData = (0, import_react6.useMemo)(
-    () => ({
-      gltfExtensions: {
-        RobotData: createStoredRenderable(rectangle, animatableValues)
-      },
-      selection: selectionData
-    }),
-    [rectangle, animatableValues, selectionData]
-  );
-  useFeatures(namespace, rectangle.features, {
-    translation: (pos) => {
-      if (rectangleRef.current?.position && (0, import_utils4.instanceOfRawVector3)(pos)) {
-        rectangleRef.current.position.set(
-          pos.x,
-          pos.y,
-          pos.z
-        );
-      } else if (rectangleRef.current?.position && (0, import_utils4.instanceOfRawVector2)(pos)) {
-        const currentZ = rectangleRef.current.position.z;
-        rectangleRef.current.position.set(
-          pos.x,
-          pos.y,
-          currentZ
-        );
-      }
-      if (lineRef.current?.position && (0, import_utils4.instanceOfRawVector3)(pos)) {
-        lineRef.current.position.set(
-          pos.x,
-          pos.y,
-          pos.z
-        );
-      } else if (lineRef.current?.position && (0, import_utils4.instanceOfRawVector2)(pos)) {
-        const currentZ = lineRef.current.position.z;
-        lineRef.current.position.set(
-          pos.x,
-          pos.y,
-          currentZ
-        );
-      }
-    },
-    rotation: (rot) => {
-      if (rectangleRef.current?.rotation && (0, import_utils4.instanceOfRawEuler)(rot)) {
-        rectangleRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (rectangleRef.current?.rotation && (0, import_utils4.instanceOfRawNumber)(rot)) {
-        rectangleRef.current.rotation.set(0, 0, 0);
-        rectangleRef.current.rotateZ(rot);
-      }
-      if (lineRef.current?.rotation && (0, import_utils4.instanceOfRawEuler)(rot)) {
-        lineRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (lineRef.current?.rotation && (0, import_utils4.instanceOfRawNumber)(rot)) {
-        lineRef.current.rotation.set(0, 0, 0);
-        lineRef.current.rotateZ(rot);
-      }
-    },
-    fillOpacity: (op) => {
-      if (materialRef.current?.opacity !== void 0 && (0, import_utils4.instanceOfRawNumber)(op)) {
-        materialRef.current.opacity = op;
-        if (op < 1) {
-          materialRef.current.transparent = true;
-        } else {
-          materialRef.current.transparent = false;
-        }
-        materialRef.current.needsUpdate = true;
-      }
-    },
-    fillColor: (color) => {
-      if (materialRef.current?.color) {
-        if ((0, import_utils4.instanceOfRawRGB)(color)) {
-          materialRef.current.color.setRGB(color.r, color.g, color.b);
-          materialRef.current.needsUpdate = true;
-        } else if ((0, import_utils4.instanceOfRawVector3)(color)) {
-          materialRef.current.color.setRGB(color.x, color.y, color.z);
-          materialRef.current.needsUpdate = true;
-        } else if ((0, import_utils4.instanceOfRawHSL)(color)) {
-          materialRef.current.color.setHSL(color.h, color.s, color.l);
-          materialRef.current.needsUpdate = true;
-        }
-      }
-    },
-    height: (height) => {
-      if (rectangleRef.current && (0, import_utils4.instanceOfRawNumber)(height)) {
-        rectangleRef.current.scale.set(rectangleRef.current.scale.x, height, 1);
-      }
-      if (rectangleRef.current && lineRef.current && (0, import_utils4.instanceOfRawNumber)(height)) {
-        const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
-        lineRef.current.scale.set(
-          rectangleRef.current.scale.x + offset,
-          height + offset,
-          1
-        );
-      }
-    },
-    width: (width) => {
-      if (rectangleRef.current && (0, import_utils4.instanceOfRawNumber)(width)) {
-        rectangleRef.current.scale.set(width, rectangleRef.current.scale.y, 1);
-      }
-      if (rectangleRef.current && lineRef.current && (0, import_utils4.instanceOfRawNumber)(width)) {
-        const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
-        lineRef.current.scale.set(
-          width + offset,
-          rectangleRef.current.scale.y + offset,
-          1
-        );
-      }
-    },
-    strokeOpacity: (strokeOpacity) => {
-      if (lineRef.current?.material && (0, import_utils4.instanceOfRawNumber)(strokeOpacity)) {
-        lineRef.current.material.opacity = strokeOpacity;
-        if (strokeOpacity < 1) {
-          lineRef.current.material.transparent = true;
-        } else {
-          lineRef.current.material.transparent = false;
-        }
-        lineRef.current.material.needsUpdate = true;
-      }
-    },
-    strokeColor: (strokeColor) => {
-      if (lineRef.current?.material.color) {
-        if ((0, import_utils4.instanceOfRawRGB)(strokeColor)) {
-          lineRef.current.material.color.setRGB(
-            strokeColor.r,
-            strokeColor.g,
-            strokeColor.b
-          );
-          lineRef.current.material.needsUpdate = true;
-        } else if ((0, import_utils4.instanceOfRawVector3)(strokeColor)) {
-          lineRef.current.material.color.setRGB(
-            strokeColor.x,
-            strokeColor.y,
-            strokeColor.z
-          );
-          lineRef.current.material.needsUpdate = true;
-        } else if ((0, import_utils4.instanceOfRawHSL)(strokeColor)) {
-          lineRef.current.material.color.setHSL(
-            strokeColor.h,
-            strokeColor.s,
-            strokeColor.l
-          );
-          lineRef.current.material.needsUpdate = true;
-        }
-      }
-    },
-    strokeWidth: (strokeWidth) => {
-      if (lineRef.current?.material && rectangleRef.current) {
-        if ((0, import_utils4.instanceOfRawNumber)(strokeWidth)) {
-          strokeWidthRef.current = strokeWidth;
-          const offset = strokeWidth * strokeOffsetRef.current / 2 + strokeOffsetRef.current * -1;
-          lineRef.current.scale.set(
-            rectangleRef.current.scale.x + offset,
-            rectangleRef.current.scale.y + offset,
-            1
-          );
-          lineRef.current.material.linewidth = strokeWidth;
-          lineRef.current.material.needsUpdate = true;
-        }
-      }
-    },
-    strokeOffset: (strokeOffset) => {
-      if (lineRef.current?.material && rectangleRef.current) {
-        if ((0, import_utils4.instanceOfRawNumber)(strokeOffset)) {
-          strokeOffsetRef.current = strokeOffset;
-          const offset = strokeOffset * strokeWidthRef.current / 2 + strokeOffset * -1;
-          lineRef.current.scale.set(
-            rectangleRef.current.scale.x + offset,
-            rectangleRef.current.scale.y + offset,
-            1
-          );
-        }
-      }
-    }
+  try {
+    await (0, import_runtime.init)();
+    await afterPaint();
+    await (0, import_runtime.mount)(shown, options);
+  } catch (error) {
+    setRuntimeStage({ stage: "failed", error: asError(error) });
+    throw error;
+  } finally {
+    unfollow();
+  }
+  live = true;
+  setRuntimeStage(null);
+  await afterPaint();
+  return shown;
+}
+function afterPaint() {
+  return new Promise((resolve) => {
+    const timer = setTimeout(resolve, PAINT_WAIT_MS);
+    requestAnimationFrame(
+      () => setTimeout(() => {
+        clearTimeout(timer);
+        resolve();
+      }, 0)
+    );
   });
-  const setReference = useVizijStore(
-    (0, import_shallow4.useShallow)((state) => state.setReference)
-  );
-  const points = (0, import_react6.useMemo)(() => {
-    return [
-      [-0.5, 0.5, 0],
-      [0.5, 0.5, 0],
-      [0.5, -0.5, 0],
-      [-0.5, -0.5, 0],
-      [-0.5, 0.5, 0]
-    ];
-  }, []);
-  (0, import_react6.useEffect)(() => {
-    if (rectangleRef.current && refIsNull)
-      setReference(rectangle.id, namespace, rectangleRef);
-  }, [rectangle.id, namespace, rectangleRef, setReference, refIsNull]);
-  const handlePointerOver = (0, import_react6.useCallback)(
-    (event) => {
-      event.stopPropagation();
-      setHoveredElement({ id, namespace, type: "rectangle" });
-    },
-    [id, namespace, setHoveredElement]
-  );
-  const handlePointerOut = (0, import_react6.useCallback)(
-    (event) => {
-      event.stopPropagation();
-      setHoveredElement(null);
-    },
-    [setHoveredElement]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_drei2.Plane,
-      {
-        ref: rectangleRef,
-        userData,
-        args: [1, 1],
-        onPointerOver: handlePointerOver,
-        onPointerOut: handlePointerOut,
-        onClick: (e) => {
-          onElementClick(
-            { id, type: "rectangle", namespace },
-            [...chain, id],
-            e
-          );
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("meshStandardMaterial", { attach: "material", ref: materialRef })
-      }
-    ),
-    showLine2(rectangle) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_drei2.Line,
-      {
-        ref: lineRef,
-        points,
-        onPointerOver: handlePointerOver,
-        onPointerOut: handlePointerOut
-      }
-    )
-  ] });
 }
-var RenderedRectangle = (0, import_react6.memo)(InnerRenderedRectangle);
-var showLine2 = (rectangle) => {
-  if ("strokeOpacity" in rectangle.features) {
-    return true;
-  } else if ("strokeColor" in rectangle.features) {
-    return true;
-  } else if ("strokeWidth" in rectangle.features) {
-    return true;
-  } else if ("strokeOffset" in rectangle.features) {
-    return true;
-  }
-  return false;
-};
-
-// src/renderables/shape.tsx
-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 asError(error) {
+  return error instanceof Error ? error : new Error(String(error));
 }
-function extractMaterialName(name) {
-  if (!name) {
-    return void 0;
+function pageCanvas() {
+  if (!canvas) {
+    canvas = document.createElement("canvas");
+    canvas.style.display = "block";
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
   }
-  const trimmed = name.trim();
-  if (!trimmed) {
-    return void 0;
+  return canvas;
+}
+var view = { placeVizij: import_runtime.placeVizij, ready: import_runtime.ready, safeArea: import_runtime.safeArea, drainPicks: import_runtime.drainPicks };
+function start() {
+  if (loop !== null || hosts === 0) return;
+  const tick = () => {
+    frame(slots, canvas, view);
+    loop = requestAnimationFrame(tick);
+  };
+  loop = requestAnimationFrame(tick);
+}
+function stop() {
+  if (loop !== null) {
+    cancelAnimationFrame(loop);
+    loop = null;
   }
-  const lowered = trimmed.toLowerCase();
-  for (const suffix of MATERIAL_NAME_SUFFIXES) {
-    if (lowered.endsWith(suffix)) {
-      return trimmed.slice(0, trimmed.length - suffix.length).trim();
+}
+function addSlot(slot) {
+  slots.add(slot);
+  return () => {
+    slots.delete(slot);
+    if (live) {
+      (0, import_runtime.placeVizij)(slot.vizijId, { x: 0, y: 0, width: 0, height: 0 });
     }
-  }
-  return trimmed;
+  };
 }
 
-// src/renderables/shape.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-THREE2.Object3D.DEFAULT_UP.set(0, 0, 1);
-function InnerRenderedShape({
-  id,
-  namespace,
-  chain
-}) {
-  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 refIsNull = useVizijStore(
-    (state) => !state.refs[id]?.[namespace]?.current
-  );
-  const animatables = useVizijStore((0, import_shallow5.useShallow)((state) => state.animatables));
-  const animatableValues = (0, import_react7.useMemo)(() => {
-    const av = {};
-    Object.values(shape.features).forEach((feat) => {
-      if (feat.animated) {
-        const animatable = animatables[feat.value];
-        av[animatable.id] = animatable;
-      }
-    });
-    return av;
-  }, [shape.features, animatables]);
-  const materialName = (0, import_react7.useMemo)(
-    () => deriveMaterialName(shape, animatableValues),
-    [shape, animatableValues]
-  );
-  const geometry = (0, import_react7.useMemo)(() => {
-    const cloned = shape.geometry.clone();
-    if (shape.name) {
-      cloned.name = shape.name;
-    }
-    return cloned;
-  }, [shape.geometry, shape.name]);
-  const selectionData = (0, import_react7.useMemo)(
-    () => ({ id, namespace, type: "shape" }),
-    [id, namespace]
-  );
-  const userData = (0, import_react7.useMemo)(
-    () => ({
-      gltfExtensions: {
-        RobotData: createStoredRenderable(shape, animatableValues)
-      },
-      selection: selectionData
-    }),
-    [shape, animatableValues, selectionData]
-  );
-  const material = (0, import_react7.useRef)(null);
-  const morphTargetSettings = (0, import_react7.useMemo)(() => {
-    if (shape.morphTargets) {
-      const dictionary = shape.morphTargets.reduce(
-        (acc, target, i) => ({ ...acc, [target]: i }),
-        {}
-      );
-      const initialInfluences = shape.morphTargets.map(() => 0);
-      const morphFeatureHandlers = {};
-      shape.morphTargets.forEach((target, i) => {
-        morphFeatureHandlers[target] = (value) => {
-          if (ref.current?.morphTargetInfluences && (0, import_utils5.instanceOfRawNumber)(value)) {
-            ref.current.morphTargetInfluences[i] = value;
-          }
-        };
-      });
-      return [dictionary, initialInfluences, morphFeatureHandlers];
-    } else {
-      return [void 0, void 0, {}];
-    }
-  }, [shape.morphTargets]);
-  useFeatures(
-    namespace,
-    shape.features,
-    {
-      translation: (pos) => {
-        if (ref.current?.position && (0, import_utils5.instanceOfRawVector3)(pos)) {
-          ref.current.position.set(
-            pos.x,
-            pos.y,
-            pos.z
-          );
-        }
-        if (refGroup.current?.position && (0, import_utils5.instanceOfRawVector3)(pos)) {
-          refGroup.current.position.set(
-            pos.x,
-            pos.y,
-            pos.z
-          );
-        }
-      },
-      rotation: (rot) => {
-        if (ref.current?.rotation && (0, import_utils5.instanceOfRawEuler)(rot)) {
-          ref.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-        }
-        if (refGroup.current?.rotation && (0, import_utils5.instanceOfRawEuler)(rot)) {
-          refGroup.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-        }
-      },
-      scale: (scale) => {
-        if (ref.current?.scale && (0, import_utils5.instanceOfRawVector3)(scale)) {
-          ref.current.scale.set(scale.x, scale.y, scale.z);
-        } else if (ref.current && (0, import_utils5.instanceOfRawNumber)(scale)) {
-          ref.current.scale.set(scale, scale, scale);
-        } else if (ref.current) {
-          ref.current.scale.set(1, 1, 1);
-        }
-      },
-      opacity: (op) => {
-        if (material.current?.opacity !== void 0 && (0, import_utils5.instanceOfRawNumber)(op)) {
-          material.current.opacity = op;
-          if (op < 1) {
-            material.current.transparent = true;
-          } else {
-            material.current.transparent = false;
-          }
-          material.current.needsUpdate = true;
-        }
-      },
-      color: (color) => {
-        if ((material.current || void 0)?.color && (0, import_utils5.instanceOfRawRGB)(color)) {
-          material.current.color.setRGB(
-            color.r,
-            color.g,
-            color.b
-          );
-          material.current.needsUpdate = true;
-        } else if ((material.current || void 0)?.color && (0, import_utils5.instanceOfRawVector3)(color)) {
-          material.current.color.setRGB(
-            color.x,
-            color.y,
-            color.z
-          );
-          material.current.needsUpdate = true;
-        } else if (material.current && (0, import_utils5.instanceOfRawHSL)(color)) {
-          material.current.color.setHSL(
-            color.h,
-            color.s,
-            color.l
-          );
-        }
-      },
-      roughness: (value) => {
-        const standard = material.current;
-        if (standard?.roughness !== void 0 && (0, import_utils5.instanceOfRawNumber)(value)) {
-          standard.roughness = value;
-          standard.needsUpdate = true;
-        }
-      },
-      metalness: (value) => {
-        const standard = material.current;
-        if (standard?.metalness !== void 0 && (0, import_utils5.instanceOfRawNumber)(value)) {
-          standard.metalness = value;
-          standard.needsUpdate = true;
-        }
-      },
-      shininess: (value) => {
-        const phong = material.current;
-        if (phong?.shininess !== void 0 && (0, import_utils5.instanceOfRawNumber)(value)) {
-          phong.shininess = value;
-          phong.needsUpdate = true;
-        }
-      },
-      emissive: (value) => {
-        const standard = material.current;
-        if (standard?.emissive && (0, import_utils5.instanceOfRawRGB)(value)) {
-          standard.emissive.setRGB(value.r, value.g, value.b);
-          standard.needsUpdate = true;
-        }
-      },
-      emissiveIntensity: (value) => {
-        const standard = material.current;
-        if (standard?.emissiveIntensity !== void 0 && (0, import_utils5.instanceOfRawNumber)(value)) {
-          standard.emissiveIntensity = value;
-          standard.needsUpdate = true;
+// src/page/vizij.tsx
+var import_react2 = require("react");
+var import_runtime2 = require("@vizij/runtime");
+
+// src/page/loading.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function describeLoading(stage) {
+  return {
+    stage,
+    label: loadingLabel(stage),
+    fraction: loadingFraction(stage)
+  };
+}
+function loadingLabel(stage) {
+  switch (stage.stage) {
+    case "download":
+      return withBytes("Downloading the runtime", stage.loaded, stage.total);
+    case "compile":
+      return "Compiling the runtime";
+    case "start":
+      return "Starting the runtime";
+    case "mount":
+      return "Starting the view";
+    case "fetch":
+      return withBytes("Loading the face", stage.loaded, stage.total);
+    case "load":
+      return "Loading the face";
+    case "draw":
+      return "Drawing the face";
+    case "failed":
+      return "Loading failed";
+  }
+}
+function loadingFraction(stage) {
+  if (stage.stage !== "download" && stage.stage !== "fetch") return null;
+  if (stage.total === null || stage.total <= 0) return null;
+  return Math.min(1, Math.max(0, stage.loaded / stage.total));
+}
+function withBytes(what, loaded, total) {
+  if (total === null) {
+    return loaded > 0 ? `${what}: ${megabytes(loaded)} MB` : what;
+  }
+  return `${what}: ${megabytes(loaded)} of ${megabytes(total)} MB`;
+}
+function megabytes(bytes) {
+  return (bytes / 1e6).toFixed(1);
+}
+var INDETERMINATE_CSS = `
+@keyframes vizij-loading-slide {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+[data-vizij-loading-indeterminate] {
+  animation: vizij-loading-slide 1.4s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-vizij-loading-indeterminate] { animation: none; }
+}
+`;
+function DefaultLoadingImage() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 1024 1024", width: "64", height: "64", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "447.6", cy: "486.6", r: "400.6", fill: "#50c4b6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { fillOpacity: "0.894", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#f56b29",
+          d: "M471.3 495.5L846.5 488A14.8 14.8 0 0 1 861.5 503.8L835.3 869.7A60.5 60.5 0 0 1 767.6 925.4L469.8 888.9A14.8 14.8 0 0 1 456.8 874.2L456.8 510.3A14.8 14.8 0 0 1 471.3 495.5Z"
         }
-      },
-      specular: (value) => {
-        const phong = material.current;
-        if (phong?.specular && (0, import_utils5.instanceOfRawRGB)(value)) {
-          phong.specular.setRGB(value.r, value.g, value.b);
-          phong.needsUpdate = true;
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#ff9e00",
+          d: "M824.3 339L983.4 619.9A14.8 14.8 0 0 1 970.7 642L790 644.2A14.8 14.8 0 0 1 775 628.3L796.7 345.1A14.8 14.8 0 0 1 824.3 339Z"
         }
-      },
-      ...morphTargetSettings[2]
-    },
-    shape
-  );
-  const setReference = useVizijStore((0, import_shallow5.useShallow)((state) => state.setReference));
-  const onElementClick = useVizijStore(
-    (0, import_shallow5.useShallow)((state) => state.onElementClick)
-  );
-  const setHoveredElement = useVizijStore(
-    (0, import_shallow5.useShallow)((state) => state.setHoveredElement)
-  );
-  (0, import_react7.useEffect)(() => {
-    if (ref.current && refIsNull) setReference(shape.id, namespace, ref);
-  }, [shape.id, namespace, ref, setReference, refIsNull]);
-  (0, import_react7.useEffect)(() => {
-    if (ref.current) {
-      ref.current.name = shape.name;
-    }
-  }, [shape.name]);
-  (0, import_react7.useEffect)(() => {
-    if (!material.current) {
-      return;
-    }
-    if (materialName) {
-      material.current.name = materialName;
-    } else if (shape.name) {
-      material.current.name = shape.name;
-    }
-  }, [materialName, shape.name]);
-  const handlePointerOver = (0, import_react7.useCallback)(
-    (event) => {
-      event.stopPropagation();
-      setHoveredElement({ id, namespace, type: "shape" });
-    },
-    [id, namespace, setHoveredElement]
-  );
-  const handlePointerOut = (0, import_react7.useCallback)(
-    (event) => {
-      event.stopPropagation();
-      setHoveredElement(null);
-    },
-    [setHoveredElement]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "mesh",
+      )
+    ] })
+  ] });
+}
+function DefaultLoading({
+  loading,
+  image
+}) {
+  const { stage, label, fraction } = loading;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
     {
-      ref,
-      userData,
-      castShadow: true,
-      receiveShadow: true,
-      up: [0, 0, 1],
-      geometry,
-      morphTargetDictionary: morphTargetSettings[0],
-      morphTargetInfluences: morphTargetSettings[1],
-      onPointerOver: handlePointerOver,
-      onPointerOut: handlePointerOut,
-      onClick: (e) => {
-        console.log("Clicked element", shape);
-        onElementClick({ id, type: "shape", namespace }, [...chain, id], e);
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 12,
+        font: "13px/1.4 system-ui, sans-serif",
+        textAlign: "center"
       },
       children: [
-        shape.material === "basic" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "meshBasicMaterial",
-          {
-            attach: "material",
-            ref: material,
-            side: THREE2.DoubleSide
-          }
-        ),
-        shape.material === "lambert" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "meshLambertMaterial",
-          {
-            attach: "material",
-            ref: material,
-            side: THREE2.DoubleSide
-          }
-        ),
-        shape.material === "phong" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "meshPhongMaterial",
-          {
-            attach: "material",
-            ref: material,
-            side: THREE2.DoubleSide
-          }
-        ),
-        shape.material === "standard" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "meshStandardMaterial",
-          {
-            attach: "material",
-            ref: material,
-            side: THREE2.DoubleSide
-          }
-        ),
-        shape.material === "normal" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "meshNormalMaterial",
-          {
-            attach: "material",
-            ref: material,
-            side: THREE2.DoubleSide
-          }
-        ),
-        shape.children?.map((child) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          Renderable,
-          {
-            id: child,
-            namespace,
-            chain: [...chain, id]
-          },
-          child
-        ))
+        image !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "aria-hidden": "true", children: image ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultLoadingImage, {}) }),
+        stage.stage === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { role: "status", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              role: "progressbar",
+              "aria-label": "Loading the face",
+              "aria-valuetext": label,
+              ...fraction === null ? {} : {
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": Math.round(fraction * 100)
+              },
+              style: {
+                position: "relative",
+                width: 160,
+                maxWidth: "60%",
+                height: 4,
+                borderRadius: 2,
+                overflow: "hidden"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      background: "currentColor",
+                      opacity: 0.2
+                    }
+                  }
+                ),
+                fraction === null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "div",
+                  {
+                    "data-vizij-loading-indeterminate": "",
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      bottom: 0,
+                      left: 0,
+                      width: "40%",
+                      background: "currentColor"
+                    }
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      bottom: 0,
+                      left: 0,
+                      width: `${fraction * 100}%`,
+                      background: "currentColor"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "aria-hidden": "true", style: { opacity: 0.8 }, children: label }),
+          fraction === null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: INDETERMINATE_CSS })
+        ] })
       ]
     }
   );
 }
-var RenderedShape = (0, import_react7.memo)(InnerRenderedShape);
 
-// src/renderables/renderable.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function InnerRenderable({
-  id,
-  namespace,
-  chain
+// src/page/vizij.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Vizij({
+  vizijId,
+  className,
+  style,
+  toneMapping,
+  fit,
+  zoom,
+  bounds,
+  showSafeArea = false,
+  selection,
+  onPick,
+  loadingImage,
+  loading
 }) {
-  const type = useVizijStore((0, import_shallow6.useShallow)((state) => state.world[id].type));
-  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,
+  const element = (0, import_react2.useRef)(null);
+  const frame2 = (0, import_react2.useRef)(null);
+  const outline2 = (0, import_react2.useRef)(null);
+  const slot = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const registered = {
+      vizijId,
+      element: element.current,
+      safeArea: null,
+      onPick: void 0,
+      placed: null
+    };
+    registered.element.setAttribute("data-vizij-ready", "false");
+    slot.current = registered;
+    const remove = addSlot(registered);
+    return () => {
+      slot.current = null;
+      remove();
+    };
+  }, [vizijId]);
+  (0, import_react2.useEffect)(() => {
+    if (slot.current) slot.current.onPick = onPick;
+  }, [onPick, vizijId]);
+  (0, import_react2.useEffect)(() => {
+    if (!slot.current) return;
+    slot.current.safeArea = showSafeArea && outline2.current && frame2.current ? { outline: outline2.current, frame: frame2.current } : null;
+  }, [showSafeArea, vizijId]);
+  const view2 = JSON.stringify({ toneMapping, fit, zoom, bounds });
+  (0, import_react2.useEffect)(
+    () => onceMounted(() => (0, import_runtime2.setView)(vizijId, JSON.parse(view2))),
+    [vizijId, view2]
+  );
+  const selected = selection === void 0 ? null : JSON.stringify(selection);
+  (0, import_react2.useEffect)(
+    () => selected === null ? void 0 : onceMounted(() => (0, import_runtime2.setSelection)(vizijId, JSON.parse(selected))),
+    [vizijId, selected]
+  );
+  const stage = useLoadingStage(vizijId);
+  const loadingView = stage === null || loading === null ? null : loading ? loading(describeLoading(stage)) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultLoading, { loading: describeLoading(stage), image: loadingImage });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref: element,
+      className,
+      style,
+      "data-vizij-id": vizijId,
+      children: (showSafeArea || loadingView !== null) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
         {
-          id,
-          namespace,
-          chain
-        },
-        key
-      );
-    case "shape":
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderedShape, { id, namespace, chain }, key);
-    default:
-      return null;
-  }
+          ref: frame2,
+          style: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none"
+          },
+          children: [
+            loadingView !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                "data-vizij-loading": "",
+                style: { position: "absolute", inset: 0 },
+                children: loadingView
+              }
+            ),
+            showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                ref: outline2,
+                style: {
+                  position: "absolute",
+                  display: "none",
+                  boxSizing: "border-box",
+                  border: "2px solid red"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function useLoadingStage(vizijId) {
+  const [stage, setStage] = (0, import_react2.useState)(() => loadingStage(vizijId));
+  (0, import_react2.useEffect)(() => watchLoading(vizijId, setStage), [vizijId]);
+  return stage;
+}
+function onceMounted(apply) {
+  let current = true;
+  canvasMounted().then(
+    () => {
+      if (current) apply();
+    },
+    () => void 0
+  );
+  return () => {
+    current = false;
+  };
 }
-var Renderable = (0, import_react8.memo)(InnerRenderable);
 
 // src/store.ts
-var import_zustand2 = require("zustand");
+var import_zustand = require("zustand");
 var import_middleware = require("zustand/middleware");
 var import_immer = require("immer");
-var THREE3 = __toESM(require("three"));
-var import_utils8 = require("@vizij/utils");
+var import_utils3 = require("@vizij/utils");
 
 // src/functions/create-world-element.ts
-var import_utils6 = require("@vizij/utils");
+var import_utils = require("@vizij/utils");
 function createDefaultGroup(partialBody) {
   const translation = partialBody.features?.translation || { animated: false, value: { x: 0, y: 0 } };
   const rotation = partialBody.features?.rotation || { animated: false, value: { x: 0, y: 0, z: 0 } };
   const scale = partialBody.features?.scale || { animated: false, value: { x: 1, y: 1, z: 1 } };
   return {
-    id: partialBody.id || (0, import_utils6.createBrowserSafeId)(),
+    id: partialBody.id || (0, import_utils.createBrowserSafeId)(),
     name: partialBody.name || "new-body",
     type: partialBody.type || "group",
     tags: partialBody.tags || [],
@@ -1341,32 +661,8 @@ function removeFromTree(state, nodesToRemove) {
   });
 }
 
-// src/memoryInvestigation.ts
-function getGlobalMemoryInvestigation() {
-  return globalThis;
-}
-function updateRenderState(updater) {
-  const globalObj = getGlobalMemoryInvestigation();
-  if (!globalObj.__VIZIJ_MEMORY_INVESTIGATION__?.enabled) {
-    return;
-  }
-  if (!globalObj.__vizijMemoryDebugState) {
-    globalObj.__vizijMemoryDebugState = {};
-  }
-  if (!globalObj.__vizijMemoryDebugState.render) {
-    globalObj.__vizijMemoryDebugState.render = {};
-  }
-  updater(globalObj.__vizijMemoryDebugState.render);
-}
-function recordRenderCounter(key, delta = 1) {
-  updateRenderState((renderState) => {
-    const current = typeof renderState[key] === "number" ? Number(renderState[key]) : 0;
-    renderState[key] = current + delta;
-  });
-}
-
 // src/functions/create-animatable.ts
-var import_utils7 = require("@vizij/utils");
+var import_utils2 = require("@vizij/utils");
 function createAnimatable(value) {
   if (!value.type) {
     return null;
@@ -1376,7 +672,7 @@ function createAnimatable(value) {
   }
   if (value.type === "euler") {
     const newAnimatable = {
-      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
+      id: value.id ?? (0, import_utils2.createBrowserSafeId)(),
       name: `${value.name} Rotation`,
       type: value.type,
       default: value.default ?? { x: 0, y: 0, z: 0 },
@@ -1393,7 +689,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "vector3") {
     const newAnimatable = {
-      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
+      id: value.id ?? (0, import_utils2.createBrowserSafeId)(),
       name: `${value.name} Vector3`,
       type: value.type,
       default: value.default ?? { x: 0, y: 0, z: 0 },
@@ -1410,7 +706,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "string") {
     const newAnimatable = {
-      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
+      id: value.id ?? (0, import_utils2.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? "Hello World",
@@ -1423,7 +719,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "number") {
     const newAnimatable = {
-      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
+      id: value.id ?? (0, import_utils2.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? 0,
@@ -1436,7 +732,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "boolean") {
     const newAnimatable = {
-      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
+      id: value.id ?? (0, import_utils2.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? false,
@@ -1449,7 +745,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "rgb") {
     const newAnimatable = {
-      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
+      id: value.id ?? (0, import_utils2.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? { r: 0, g: 0, b: 0 },
@@ -1466,7 +762,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "hsl") {
     const newAnimatable = {
-      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
+      id: value.id ?? (0, import_utils2.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? { h: 0, s: 0, l: 0 },
@@ -1486,51 +782,16 @@ function createAnimatable(value) {
 }
 createAnimatable({ type: "euler", name: "Rotation" });
 
-// src/functions/exportable-bodies.ts
-function asGroupEntries(world) {
-  return Object.values(world).filter((entry) => entry.type === "group");
-}
-function selectExportableGroupEntries(world, filterIds) {
-  const groupEntries = asGroupEntries(world);
-  const filterSet = Array.isArray(filterIds) && filterIds.length > 0 ? new Set(filterIds) : null;
-  if (filterSet) {
-    return groupEntries.filter((entry) => filterSet.has(entry.id));
-  }
-  const rootBoundsGroups = groupEntries.filter(
-    (entry) => Boolean(entry.rootBounds)
-  );
-  if (rootBoundsGroups.length > 0) {
-    return rootBoundsGroups;
-  }
-  const explicitRootGroups = groupEntries.filter(
-    (entry) => entry.root === true
-  );
-  if (explicitRootGroups.length > 0) {
-    return explicitRootGroups;
-  }
-  const topLevelGroups = groupEntries.filter((entry) => !entry.parent);
-  if (topLevelGroups.length > 0) {
-    return topLevelGroups;
-  }
-  return groupEntries;
-}
-
 // src/store.ts
-THREE3.Object3D.DEFAULT_UP.set(0, 0, 1);
 (0, import_immer.enableMapSet)();
-var VizijSlice = (set, get) => ({
-  // worldRef: createRef<THREE.Group>(),
+var VizijSlice = (set, _get) => ({
   world: {},
-  refs: {},
   animatables: {},
   values: /* @__PURE__ */ new Map(),
-  renderHit: false,
   preferences: {
     damping: false
   },
   elementSelection: [],
-  hoveredElement: null,
-  slotConfig: {},
   clearSelection: () => {
     set({ elementSelection: [] });
   },
@@ -1541,66 +802,6 @@ var VizijSlice = (set, get) => ({
       })
     );
   },
-  setHoveredElement: (selection) => {
-    set({ hoveredElement: selection });
-  },
-  onElementClick: (selection, _chain, event) => {
-    event.stopPropagation();
-    const makeKey = (sel) => `${sel.namespace}__${sel.type}__${sel.id}`;
-    const stack = [];
-    const seen = /* @__PURE__ */ new Set();
-    const push = (sel) => {
-      if (!sel) return;
-      if (!sel.id || !sel.namespace || !sel.type) return;
-      const key = makeKey(sel);
-      if (seen.has(key)) return;
-      seen.add(key);
-      stack.push(sel);
-    };
-    const intersections = event.intersections ?? [];
-    intersections.forEach((hit) => {
-      const hitSelection = hit.object?.userData?.selection;
-      push(hitSelection);
-    });
-    if (stack.length === 0) {
-      push(selection);
-    }
-    const stackKeys = new Set(stack.map(makeKey));
-    const primary = stack[0];
-    const primaryKey = makeKey(primary);
-    set(
-      (0, import_immer.produce)((state) => {
-        if (event.metaKey) {
-          const existing = state.elementSelection ?? [];
-          const alreadySelected = existing.some(
-            (item) => makeKey(item) === primaryKey
-          );
-          const existingWithoutStack = existing.filter(
-            (item) => !stackKeys.has(makeKey(item))
-          );
-          if (alreadySelected) {
-            state.elementSelection = existingWithoutStack;
-          } else {
-            state.elementSelection = [...stack, ...existingWithoutStack];
-          }
-        } else {
-          state.elementSelection = stack;
-        }
-      })
-    );
-  },
-  getExportableBodies: (filterIds) => {
-    const worldData = get().world;
-    const candidateGroups = selectExportableGroupEntries(
-      worldData,
-      filterIds
-    );
-    const refs = get().refs;
-    return candidateGroups.flatMap((entry) => {
-      const mounted = Object.values(refs[entry.id] ?? {}).map((ref) => ref.current).find((object) => Boolean(object));
-      return mounted ? [mounted] : [];
-    });
-  },
   setGeometry: (id, geometry) => {
     set(
       (0, import_immer.produce)((state) => {
@@ -1611,7 +812,7 @@ var VizijSlice = (set, get) => ({
   setValue: (id, namespace, value) => {
     set(
       (0, import_immer.produce)((state) => {
-        const lookupId = (0, import_utils8.getLookup)(namespace, id);
+        const lookupId = (0, import_utils3.getLookup)(namespace, id);
         if (typeof value === "function") {
           const current = state.values.get(lookupId);
           if (current !== void 0) {
@@ -1640,7 +841,7 @@ var VizijSlice = (set, get) => ({
     set(
       (0, import_immer.produce)((state) => {
         writes.forEach(({ id, namespace, value }) => {
-          const lookupId = (0, import_utils8.getLookup)(namespace, id);
+          const lookupId = (0, import_utils3.getLookup)(namespace, id);
           state.values.set(lookupId, value);
         });
       })
@@ -1745,59 +946,30 @@ var VizijSlice = (set, get) => ({
         state.world[elementId].features[featureName] = {
           animated: true,
           value: animatable.id
-        };
-        state.animatables[animatable.id] = animatable;
-      })
-    );
-  },
-  createStatic: (elementId, featureName, value) => {
-    set(
-      (0, import_immer.produce)((state) => {
-        state.world[elementId].features[featureName] = {
-          animated: false,
-          value
-        };
-      })
-    );
-  },
-  setAnimatableValue: (id, value) => {
-    set(
-      (0, import_immer.produce)((state) => {
-        console.log("Setting animatable value", id, value);
-        state.animatables[id] = value;
-      })
-    );
-  },
-  setSlot: (parentId, parentNamespace, childId, childNamespace) => {
-    set(
-      (0, import_immer.produce)((state) => {
-        const parentLookupId = (0, import_utils8.getLookup)(parentNamespace, parentId);
-        const childLookupId = (0, import_utils8.getLookup)(childNamespace, childId);
-        state.slotConfig[parentLookupId] = childLookupId;
+        };
+        state.animatables[animatable.id] = animatable;
       })
     );
   },
-  setSlots: (slots, replace) => {
+  createStatic: (elementId, featureName, value) => {
     set(
       (0, import_immer.produce)((state) => {
-        if (replace) {
-          state.slotConfig = slots;
-        } else {
-          state.slotConfig = { ...state.slotConfig, ...slots };
-        }
+        state.world[elementId].features[featureName] = {
+          animated: false,
+          value
+        };
       })
     );
   },
-  clearSlot: (parentId, parentNamespace) => {
+  setAnimatableValue: (id, value) => {
     set(
       (0, import_immer.produce)((state) => {
-        const parentLookupId = (0, import_utils8.getLookup)(parentNamespace, parentId);
-        delete state.slotConfig[parentLookupId];
+        console.log("Setting animatable value", id, value);
+        state.animatables[id] = value;
       })
     );
   },
   setVizij: (scene, animatables) => {
-    recordRenderCounter("rootReplacementCount");
     set({
       world: scene,
       animatables
@@ -1805,7 +977,6 @@ var VizijSlice = (set, get) => ({
   },
   addWorldElements(world, animatables, replace) {
     if (replace) {
-      recordRenderCounter("rootReplacementCount");
       set({ world, animatables });
     } else {
       set((state) => ({
@@ -1818,22 +989,14 @@ var VizijSlice = (set, get) => ({
     set((state) => ({
       preferences: { ...state.preferences, ...preferences }
     }));
-  },
-  setReference: (id, namespace, ref) => {
-    set((state) => ({
-      refs: {
-        ...state.refs,
-        [id]: { ...state.refs[id], [namespace]: ref }
-      }
-    }));
   }
 });
-var useDefaultVizijStore = (0, import_zustand2.create)()(
+var useDefaultVizijStore = (0, import_zustand.create)()(
   (0, import_middleware.subscribeWithSelector)((set, get) => ({
     ...VizijSlice(set, get)
   }))
 );
-var createVizijStore = (initial) => (0, import_zustand2.create)()(
+var createVizijStore = (initial) => (0, import_zustand.create)()(
   (0, import_middleware.subscribeWithSelector)((set, get) => ({
     ...VizijSlice(set, get),
     ...initial ?? {}
@@ -1851,7 +1014,6 @@ var ShapeMaterial = /* @__PURE__ */ ((ShapeMaterial2) => {
 })(ShapeMaterial || {});
 
 // src/types/tone-mapping.ts
-var import_three = require("three");
 var TONE_MAPPING_MODES = [
   "none",
   "agx",
@@ -1865,353 +1027,32 @@ var TONE_MAPPING_LABELS = {
   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];
+  return typeof value === "string" && TONE_MAPPING_MODES.includes(value);
 }
 function normalizeToneMappingMode(value) {
   return isToneMappingMode(value) ? value : DEFAULT_TONE_MAPPING_MODE;
 }
 
-// src/effects/selection-glow-effect.tsx
-var import_react9 = require("react");
-var import_fiber = require("@react-three/fiber");
-var import_shallow7 = require("zustand/react/shallow");
-var import_three2 = require("three");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function SelectionGlowEffect({
-  enabled = false,
-  color = "#ff1010",
-  opacity = 0.9,
-  thresholdAngle = 2
-}) {
-  const selections = useVizijStore(
-    (0, import_shallow7.useShallow)(
-      (state) => enabled ? state.elementSelection ?? [] : []
-    )
-  );
-  if (!enabled || selections.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react9.Fragment, { children: selections.map((selection) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    SelectionOutline,
-    {
-      selection,
-      color: selection.color ?? color,
-      opacity,
-      thresholdAngle
-    },
-    `${selection.namespace}:${selection.id}`
-  )) });
-}
-function SelectionOutline({
-  selection,
-  color,
-  opacity,
-  thresholdAngle
-}) {
-  const target = useVizijStore(
-    (0, import_shallow7.useShallow)((state) => {
-      const entry = state.world[selection.id];
-      const ref = state.refs[selection.id]?.[selection.namespace];
-      const geometry = entry?.geometry ?? null;
-      return { ref, geometry };
-    })
-  );
-  const sourceRef = target.ref;
-  const edgesGeometry = (0, import_react9.useMemo)(() => {
-    if (!target.geometry) return null;
-    const edges = new import_three2.EdgesGeometry(target.geometry, thresholdAngle);
-    return edges;
-  }, [target.geometry, thresholdAngle]);
-  (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_three2.AdditiveBlending,
-      depthTest: false,
-      depthWrite: false,
-      toneMapped: false
-    });
-    return mat;
-  }, [color, opacity]);
-  (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;
-    if (!source || !line) return;
-    copyWorldTransform(source, line);
-    line.visible = source.visible;
-  });
-  if (!sourceRef || !edgesGeometry) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "lineSegments",
-    {
-      ref: lineRef,
-      geometry: edgesGeometry,
-      material,
-      frustumCulled: false,
-      renderOrder: 1e3
-    }
-  );
-}
-var tempMatrix = new import_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);
-  tempMatrix.decompose(tempPosition, tempQuaternion, tempScale);
-  target.position.copy(tempPosition);
-  target.quaternion.copy(tempQuaternion);
-  target.scale.copy(tempScale);
-  target.updateMatrix();
-}
+// src/context.ts
+var import_react3 = require("react");
+var VizijContext = (0, import_react3.createContext)(null);
 
-// src/vizij.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-import_three3.Object3D.DEFAULT_UP.set(0, 0, 1);
-function Vizij({
-  style,
-  className,
-  rootId,
-  namespace = "default",
-  showSafeArea = false,
-  showSelectionGlow = false,
-  toneMapping = "none",
-  onPointerMissed
-}) {
-  const ctx = (0, import_react10.useContext)(VizijContext);
-  (0, import_react10.useEffect)(() => {
-    recordRenderCounter("canvasMountCount");
-    recordRenderCounter("mountedCanvasCount");
-    return () => {
-      recordRenderCounter("mountedCanvasCount", -1);
-    };
-  }, []);
-  if (ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_fiber2.Canvas,
-      {
-        shadows: false,
-        style,
-        className,
-        onPointerMissed,
-        gl: {
-          outputColorSpace: import_three3.SRGBColorSpace,
-          antialias: true
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          MemoizedInnerVizij,
-          {
-            rootId,
-            namespace,
-            showSafeArea,
-            showSelectionGlow,
-            toneMapping
-          }
-        )
-      }
-    );
-  } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_fiber2.Canvas,
-      {
-        style,
-        className,
-        onPointerMissed,
-        gl: {
-          outputColorSpace: import_three3.SRGBColorSpace,
-          antialias: true
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          MemoizedInnerVizij,
-          {
-            rootId,
-            namespace,
-            showSafeArea,
-            showSelectionGlow,
-            toneMapping
-          }
-        )
-      }
-    ) });
-  }
-}
-function InnerVizij({
-  rootId,
-  namespace = "default",
-  container,
-  showSafeArea,
-  showSelectionGlow,
-  toneMapping = "none"
-}) {
-  const sceneParentSizing = container ? {
-    width: container.width * container.resolution,
-    height: container.height * container.resolution
-  } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ambientLight", { intensity: Math.PI / 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToneMappingController, { mode: toneMapping }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_drei3.OrthographicCamera,
-      {
-        makeDefault: true,
-        position: [0, 0, 100],
-        near: 0.1,
-        far: 1e3
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      World,
-      {
-        rootId,
-        namespace,
-        parentSizing: sceneParentSizing
-      }
-    ) }),
-    showSelectionGlow && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectionGlowEffect, { enabled: true }),
-    showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SafeAreaRenderer, { rootId })
-  ] });
-}
-var MemoizedInnerVizij = (0, import_react10.memo)(InnerVizij);
-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",
-  parentSizing
-}) {
-  const [present, rootBounds] = useVizijStore(
-    (0, import_shallow8.useShallow)((state) => {
-      const group = state.world[rootId];
-      const bounds = group?.rootBounds ?? defaultRootBounds;
-      return [group !== void 0, bounds];
-    })
-  );
-  const { camera, size } = (0, import_fiber2.useThree)((state) => ({
-    camera: state.camera,
-    size: state.size
-  }));
-  (0, import_react10.useEffect)(() => {
-    const width = rootBounds.size.x;
-    const height = rootBounds.size.y;
-    if (camera && parentSizing === void 0 && camera.isOrthographicCamera) {
-      const zoom = Math.min(size.width / width, size.height / height);
-      const center = rootBounds.center;
-      if (camera.zoom !== zoom) {
-        camera.zoom = zoom;
-        camera.updateProjectionMatrix();
-      }
-      if (camera.position.x !== center.x || camera.position.y !== center.y) {
-        camera.position.x = center.x;
-        camera.position.y = center.y;
-        camera.updateProjectionMatrix();
-      }
-    } else if (camera && parentSizing !== void 0 && camera.isOrthographicCamera) {
-      const zoom = Math.min(
-        parentSizing.width / width,
-        parentSizing.height / height
-      );
-      const center = rootBounds.center;
-      camera.left = -0.5 * parentSizing.width / zoom + center.x;
-      camera.right = 0.5 * parentSizing.width / zoom + center.x;
-      camera.top = 0.5 * parentSizing.height / zoom + center.y;
-      camera.bottom = -0.5 * parentSizing.height / zoom + center.y;
-      camera.updateProjectionMatrix();
-    }
-  }, [rootBounds, camera, parentSizing, size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_error_boundary.ErrorBoundary, { fallback: null, children: [
-    present && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Renderable, { id: rootId, namespace, chain: [] }),
-    !present && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_drei3.Text,
-      {
-        position: [0, 0, 0],
-        color: "white",
-        anchorX: "center",
-        anchorY: "middle",
-        fontSize: 0.7,
-        children: "No Output"
-      }
-    )
-  ] });
-}
-var World = (0, import_react10.memo)(InnerWorld);
-function SafeAreaRenderer({ rootId }) {
-  const rootBounds = useVizijStore((state) => {
-    const group = state.world[rootId];
-    return group?.rootBounds ?? defaultRootBounds;
-  });
-  const left = rootBounds.center.x - rootBounds.size.x / 2;
-  const right = rootBounds.center.x + rootBounds.size.x / 2;
-  const top = rootBounds.center.y + rootBounds.size.y / 2;
-  const bottom = rootBounds.center.y - rootBounds.size.y / 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_drei3.Line,
-    {
-      points: [
-        [left, top, 99],
-        [right, top, 99],
-        [right, bottom, 99],
-        [left, bottom, 99],
-        [left, top, 99]
-      ],
-      color: "red",
-      lineWidth: 2
-    }
-  );
+// src/hooks/use-vizij-store.ts
+var import_react4 = require("react");
+var import_zustand2 = require("zustand");
+function useVizijStore(selector) {
+  const store = (0, import_react4.useContext)(VizijContext);
+  if (!store) throw new Error("Missing VizijProvider in the tree");
+  return (0, import_zustand2.useStore)(store, selector);
 }
-var defaultRootBounds = {
-  center: { x: 0, y: 0 },
-  size: { x: 5, y: 4 }
-};
 
 // src/hooks/use-vizij-store-subscription.ts
-var import_react11 = require("react");
+var import_react5 = require("react");
 function useVizijStoreSubscription(selector, listener) {
-  const store = (0, import_react11.useContext)(VizijContext);
+  const store = (0, import_react5.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
-  (0, import_react11.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const initialValue = selector(store.getState());
     listener(initialValue);
     return store.subscribe(selector, listener);
@@ -2219,27 +1060,51 @@ function useVizijStoreSubscription(selector, listener) {
 }
 
 // src/hooks/use-vizij-store-setter.ts
-var import_react12 = require("react");
+var import_react6 = require("react");
 function useVizijStoreSetter() {
-  const store = (0, import_react12.useContext)(VizijContext);
+  const store = (0, import_react6.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.setState;
 }
 
 // src/hooks/use-vizij-store-getter.ts
-var import_react13 = require("react");
+var import_react7 = require("react");
 function useVizijStoreGetter() {
-  const store = (0, import_react13.useContext)(VizijContext);
+  const store = (0, import_react7.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.getState;
 }
 
 // src/functions/load-gltf.ts
-var THREE5 = __toESM(require("three"));
+var THREE2 = __toESM(require("three"));
 var import_three_stdlib = require("three-stdlib");
 
+// 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/gltf-loading/traverse-three.ts
-var THREE4 = __toESM(require("three"));
+var THREE = __toESM(require("three"));
 
 // src/functions/gltf-loading/map-features.ts
 function mapFeatures(features) {
@@ -2264,18 +1129,18 @@ function mapFeatures(features) {
 }
 
 // src/functions/gltf-loading/import-scene.ts
-var import_three6 = require("three");
+var import_three3 = require("three");
 
 // src/functions/gltf-loading/import-group.ts
-var import_three5 = require("three");
-var import_utils11 = require("@vizij/utils");
+var import_three2 = require("three");
+var import_utils6 = require("@vizij/utils");
 
 // src/functions/gltf-loading/import-mesh.ts
-var import_three4 = require("three");
-var import_utils10 = require("@vizij/utils");
+var import_three = require("three");
+var import_utils5 = require("@vizij/utils");
 
 // src/functions/gltf-loading/import-geometry.ts
-var import_utils9 = require("@vizij/utils");
+var import_utils4 = require("@vizij/utils");
 
 // src/functions/gltf-loading/morph-keys.ts
 function slugifyMorphName(name, fallbackIndex) {
@@ -2310,7 +1175,7 @@ function importGeometry(geometry, mesh) {
     const usedKeys = /* @__PURE__ */ new Set();
     Object.entries(mesh.morphTargetDictionary ?? {}).forEach(
       ([name, index]) => {
-        const morphId = (0, import_utils9.createBrowserSafeId)();
+        const morphId = (0, import_utils4.createBrowserSafeId)();
         const featureKey = sanitizeMorphKey(name, index, usedKeys);
         morphIds.push(featureKey);
         features[featureKey] = {
@@ -2340,13 +1205,13 @@ function importGeometry(geometry, mesh) {
 }
 
 // src/functions/gltf-loading/import-mesh.ts
-import_three4.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three.Object3D.DEFAULT_UP.set(0, 0, 1);
 function importMesh(mesh, colorLookup) {
   let world = {};
   let animatables = {};
   let newColorLookup = {};
   const translationAnimatable = {
-    id: (0, import_utils10.createBrowserSafeId)(),
+    id: (0, import_utils5.createBrowserSafeId)(),
     name: `${mesh.name ?? "Mesh"} translation`,
     type: "vector3",
     default: { x: mesh.position.x, y: mesh.position.y, z: mesh.position.z },
@@ -2362,7 +1227,7 @@ function importMesh(mesh, colorLookup) {
     [translationAnimatable.id]: translationAnimatable
   };
   const rotationAnimatable = {
-    id: (0, import_utils10.createBrowserSafeId)(),
+    id: (0, import_utils5.createBrowserSafeId)(),
     name: `${mesh.name ?? "Mesh"} rotation`,
     type: "euler",
     default: { x: mesh.rotation.x, y: mesh.rotation.y, z: mesh.rotation.z },
@@ -2375,7 +1240,7 @@ function importMesh(mesh, colorLookup) {
   };
   animatables = { ...animatables, [rotationAnimatable.id]: rotationAnimatable };
   const scaleAnimatable = {
-    id: (0, import_utils10.createBrowserSafeId)(),
+    id: (0, import_utils5.createBrowserSafeId)(),
     name: `${mesh.name ?? "Mesh"} scale`,
     type: "vector3",
     default: { x: mesh.scale.x, y: mesh.scale.y, z: mesh.scale.z },
@@ -2391,7 +1256,7 @@ function importMesh(mesh, colorLookup) {
   const colorName = material.name;
   const label = (suffix) => colorName ? `${colorName} ${suffix}` : `${mesh.name ?? "Mesh"} ${suffix}`;
   const makeNumberAnimatable = (suffix, value, constraints) => ({
-    id: (0, import_utils10.createBrowserSafeId)(),
+    id: (0, import_utils5.createBrowserSafeId)(),
     name: label(suffix),
     type: "number",
     default: value,
@@ -2402,7 +1267,7 @@ function importMesh(mesh, colorLookup) {
     }
   });
   const makeColorAnimatable = (suffix, value) => ({
-    id: (0, import_utils10.createBrowserSafeId)(),
+    id: (0, import_utils5.createBrowserSafeId)(),
     name: label(suffix),
     type: "rgb",
     default: { r: value.r, g: value.g, b: value.b },
@@ -2597,14 +1462,14 @@ function shouldImportAsGroupChild(child) {
 }
 
 // src/functions/gltf-loading/import-group.ts
-import_three5.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three2.Object3D.DEFAULT_UP.set(0, 0, 1);
 function importGroup(group, colorLookup, rootBounds) {
   let world = {};
   let animatables = {};
   let newColorLookup = {};
   const children = [];
   const translationAnimatable = {
-    id: (0, import_utils11.createBrowserSafeId)(),
+    id: (0, import_utils6.createBrowserSafeId)(),
     name: `${group.name ?? "Group"} translation`,
     type: "vector3",
     default: { x: group.position.x, y: group.position.y, z: group.position.z },
@@ -2620,7 +1485,7 @@ function importGroup(group, colorLookup, rootBounds) {
     [translationAnimatable.id]: translationAnimatable
   };
   const rotationAnimatable = {
-    id: (0, import_utils11.createBrowserSafeId)(),
+    id: (0, import_utils6.createBrowserSafeId)(),
     name: `${group.name ?? "Group"} rotation`,
     type: "euler",
     default: { x: group.rotation.x, y: group.rotation.y, z: group.rotation.z },
@@ -2633,7 +1498,7 @@ function importGroup(group, colorLookup, rootBounds) {
   };
   animatables = { ...animatables, [rotationAnimatable.id]: rotationAnimatable };
   const scaleAnimatable = {
-    id: (0, import_utils11.createBrowserSafeId)(),
+    id: (0, import_utils6.createBrowserSafeId)(),
     name: `${group.name ?? "Group"} scale`,
     type: "vector3",
     default: { x: group.scale.x, y: group.scale.y, z: group.scale.z },
@@ -2702,7 +1567,7 @@ function shouldImportAsGroupChild2(child) {
 }
 
 // src/functions/gltf-loading/import-scene.ts
-import_three6.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three3.Object3D.DEFAULT_UP.set(0, 0, 1);
 function importScene(scene, rootBounds) {
   let world = {};
   let animatables = {};
@@ -2717,7 +1582,7 @@ function importScene(scene, rootBounds) {
 }
 
 // src/functions/gltf-loading/traverse-three.ts
-THREE4.Object3D.DEFAULT_UP.set(0, 0, 1);
+THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
 function traverseThree(group, aggressiveImport = false, rootBounds) {
   const worldData = {};
   const animatableData = {};
@@ -2812,7 +1677,7 @@ var MATERIAL_NAME_FEATURE_KEYS = [
   "emissiveIntensity",
   "specular"
 ];
-var MATERIAL_NAME_SUFFIXES2 = [
+var MATERIAL_NAME_SUFFIXES = [
   " color",
   " colours",
   " colour",
@@ -2886,7 +1751,7 @@ function extractMaterialNameFromFeature(feature) {
 function stripMaterialSuffixes(name) {
   const trimmed = name.trim();
   const lowered = trimmed.toLowerCase();
-  for (const suffix of MATERIAL_NAME_SUFFIXES2) {
+  for (const suffix of MATERIAL_NAME_SUFFIXES) {
     if (lowered.endsWith(suffix)) {
       return trimmed.slice(0, trimmed.length - suffix.length).trim();
     }
@@ -2932,8 +1797,34 @@ function isRectangleFeatures(value) {
     );
   }
 }
+var PRIMITIVE_HALF_EXTENT = {
+  ellipse: 1,
+  rectangle: 0.5
+};
+function expandByPrimitives(box, root) {
+  const center = new THREE.Vector3();
+  const half = new THREE.Vector3();
+  root.traverse((object) => {
+    if (object.isMesh) {
+      return;
+    }
+    const type = object.userData?.gltfExtensions?.RobotData?.type;
+    const extent = typeof type === "string" ? PRIMITIVE_HALF_EXTENT[type] : void 0;
+    if (extent === void 0) {
+      return;
+    }
+    const e = object.matrixWorld.elements;
+    const along = type === "ellipse" ? (a, b) => Math.hypot(a, b) : (a, b) => Math.abs(a) + Math.abs(b);
+    half.set(along(e[0], e[4]), along(e[1], e[5]), along(e[2], e[6]));
+    half.multiplyScalar(extent);
+    center.setFromMatrixPosition(object.matrixWorld);
+    box.expandByPoint(center.clone().sub(half));
+    box.expandByPoint(center.clone().add(half));
+  });
+}
 function deriveRootBounds(group) {
-  const boundingBox = new THREE4.Box3().setFromObject(group);
+  const boundingBox = new THREE.Box3().setFromObject(group);
+  expandByPrimitives(boundingBox, group);
   if (boundingBox.isEmpty()) {
     return null;
   }
@@ -2961,10 +1852,10 @@ function deriveRootBounds(group) {
 }
 
 // src/functions/vizij-bundle.ts
-var import_utils12 = require("@vizij/utils");
+var import_utils7 = require("@vizij/utils");
 var BUNDLE_KEYS = ["VIZIJ_bundle"];
 function cloneBundle(value) {
-  return (0, import_utils12.cloneDeepSafe)(value);
+  return (0, import_utils7.cloneDeepSafe)(value);
 }
 function readExtensionValue(extensionContainer) {
   for (const key of BUNDLE_KEYS) {
@@ -3090,7 +1981,7 @@ function applyVizijBundle(object, bundle) {
 }
 
 // src/functions/gltf-loading/extract-animations.ts
-var import_utils13 = require("@vizij/utils");
+var import_utils8 = require("@vizij/utils");
 var CHANNEL_PATH_TO_TRACK_PROPERTY = {
   translation: "position",
   rotation: "quaternion",
@@ -3106,7 +1997,7 @@ function clonePlainObject(value) {
   if (!value) {
     return void 0;
   }
-  return (0, import_utils13.cloneDeepSafe)(value);
+  return (0, import_utils8.cloneDeepSafe)(value);
 }
 function inferValueSize(valueType) {
   switch (valueType) {
@@ -3460,7 +2351,7 @@ function extractVizijAnimations(parserJson, clips) {
 }
 
 // src/functions/load-gltf.ts
-THREE5.Object3D.DEFAULT_UP.set(0, 0, 1);
+THREE2.Object3D.DEFAULT_UP.set(0, 0, 1);
 var GLB_MAGIC = 1179937895;
 var GLB_VERSION = 2;
 var GLB_HEADER_BYTES = 12;
@@ -3476,14 +2367,14 @@ function parseGlbJsonChunk(buffer) {
   if (buffer.byteLength < GLB_HEADER_BYTES + GLB_CHUNK_HEADER_BYTES) {
     return void 0;
   }
-  const view = new DataView(buffer);
-  const magic = view.getUint32(0, true);
-  const version = view.getUint32(4, true);
+  const view2 = new DataView(buffer);
+  const magic = view2.getUint32(0, true);
+  const version = view2.getUint32(4, true);
   if (magic !== GLB_MAGIC || version !== GLB_VERSION) {
     return void 0;
   }
-  const chunkLength = view.getUint32(GLB_HEADER_BYTES, true);
-  const chunkType = view.getUint32(GLB_HEADER_BYTES + 4, true);
+  const chunkLength = view2.getUint32(GLB_HEADER_BYTES, true);
+  const chunkType = view2.getUint32(GLB_HEADER_BYTES + 4, true);
   if (chunkType !== GLB_JSON_CHUNK_TYPE) {
     return void 0;
   }
@@ -3593,8 +2484,8 @@ async function loadGLTFFromBlobWithBundle(blob, aggressiveImport = false, rootBo
 
 // src/functions/export.ts
 var import_three_stdlib2 = require("three-stdlib");
-var THREE6 = __toESM(require("three"));
-THREE6.Object3D.DEFAULT_UP.set(0, 0, 1);
+var THREE3 = __toESM(require("three"));
+THREE3.Object3D.DEFAULT_UP.set(0, 0, 1);
 function normalizeExportError(error) {
   if (error instanceof Error) {
     return error;
@@ -3690,14 +2581,14 @@ function patchGlbJson(buffer, mutate) {
     return buffer;
   }
   const originalBytes = new Uint8Array(buffer);
-  const view = new DataView(buffer);
-  const magic = view.getUint32(0, true);
-  const version = view.getUint32(4, true);
+  const view2 = new DataView(buffer);
+  const magic = view2.getUint32(0, true);
+  const version = view2.getUint32(4, true);
   if (magic !== GLB_MAGIC2 || version !== GLB_VERSION2) {
     return buffer;
   }
-  const jsonChunkLength = view.getUint32(GLB_HEADER_BYTES2, true);
-  const jsonChunkType = view.getUint32(GLB_HEADER_BYTES2 + 4, true);
+  const jsonChunkLength = view2.getUint32(GLB_HEADER_BYTES2, true);
+  const jsonChunkType = view2.getUint32(GLB_HEADER_BYTES2 + 4, true);
   if (jsonChunkType !== GLB_JSON_CHUNK_TYPE2) {
     return buffer;
   }
@@ -3781,9 +2672,9 @@ async function exportScene(root, options = {}) {
       }
     }
   }));
-  const exportRoot = root instanceof THREE6.Scene ? root : root.clone(true);
-  const exportTarget = exportRoot instanceof THREE6.Scene ? exportRoot : (() => {
-    const scene = new THREE6.Scene();
+  const exportRoot = root instanceof THREE3.Scene ? root : root.clone(true);
+  const exportTarget = exportRoot instanceof THREE3.Scene ? exportRoot : (() => {
+    const scene = new THREE3.Scene();
     scene.name = root.name?.trim() || "Scene";
     scene.add(exportRoot);
     return scene;
@@ -3812,9 +2703,93 @@ async function exportScene(root, options = {}) {
 }
 
 // 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);
+var THREE4 = __toESM(require("three"));
+var import_utils9 = require("@vizij/utils");
+
+// src/functions/create-stored-features.ts
+function createStoredFeatures(objectFeatures, animatableValues) {
+  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 [key, staticFeature.label ? { ...staticFeature } : staticFeature];
+    }
+  );
+  return Object.fromEntries(stored);
+}
+
+// src/functions/create-stored-data.ts
+function createStoredRenderable(data, animatableValues) {
+  const { geometry: _geometry, ...stored } = data;
+  const storedFeatures = createStoredFeatures(
+    data.features,
+    animatableValues
+  );
+  return { ...stored, features: storedFeatures };
+}
+
+// src/functions/material-name.ts
+var MATERIAL_FEATURE_KEYS = [
+  "color",
+  "opacity",
+  "roughness",
+  "metalness",
+  "shininess",
+  "emissive",
+  "emissiveIntensity",
+  "specular"
+];
+var MATERIAL_NAME_SUFFIXES2 = [
+  " 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_SUFFIXES2) {
+    if (lowered.endsWith(suffix)) {
+      return trimmed.slice(0, trimmed.length - suffix.length).trim();
+    }
+  }
+  return trimmed;
+}
+
+// src/functions/build-scene-graph.ts
+THREE4.Object3D.DEFAULT_UP.set(0, 0, 1);
 function buildSceneGraph(world, animatables, rootId) {
   const entry = world[rootId];
   if (!entry) {
@@ -3829,7 +2804,7 @@ function buildSceneGraph(world, animatables, rootId) {
   const robotData = createStoredRenderable(entry, used);
   switch (entry.type) {
     case "group": {
-      const object = new THREE7.Group();
+      const object = new THREE4.Group();
       object.name = entry.name;
       object.userData = { gltfExtensions: { RobotData: robotData } };
       applyFeatures(entry.features, animatables, groupTransform(object));
@@ -3845,7 +2820,7 @@ function buildSceneGraph(world, animatables, rootId) {
       }
       const material = createMaterial(entry.material);
       material.name = deriveMaterialName(entry, used) ?? entry.name ?? "";
-      const object = new THREE7.Mesh(geometry, material);
+      const object = new THREE4.Mesh(geometry, material);
       object.name = entry.name;
       object.userData = { gltfExtensions: { RobotData: robotData } };
       applyFeatures(entry.features, animatables, {
@@ -3858,10 +2833,24 @@ function buildSceneGraph(world, animatables, rootId) {
       }
       return object;
     }
-    default:
-      throw new Error(
-        `Element "${rootId}" is a ${entry.type}, which has no exported form.`
-      );
+    case "ellipse":
+    case "rectangle": {
+      const object = new THREE4.Group();
+      object.name = entry.name;
+      object.userData = { gltfExtensions: { RobotData: robotData } };
+      const { translation, rotation } = groupTransform(object);
+      applyFeatures(entry.features, animatables, {
+        translation,
+        rotation,
+        width: (value) => {
+          if ((0, import_utils9.instanceOfRawNumber)(value)) object.scale.x = value;
+        },
+        height: (value) => {
+          if ((0, import_utils9.instanceOfRawNumber)(value)) object.scale.y = value;
+        }
+      });
+      return object;
+    }
   }
 }
 function animatableOf(animatables, id) {
@@ -3886,28 +2875,28 @@ function applyFeatures(features, animatables, handlers) {
 function groupTransform(object) {
   return {
     translation: (value) => {
-      if ((0, import_utils14.instanceOfRawVector3)(value)) {
+      if ((0, import_utils9.instanceOfRawVector3)(value)) {
         object.position.set(value.x, value.y, value.z);
-      } else if ((0, import_utils14.instanceOfRawVector2)(value)) {
+      } else if ((0, import_utils9.instanceOfRawVector2)(value)) {
         object.position.set(value.x, value.y, object.position.z);
       }
     },
     rotation: (value) => {
-      if ((0, import_utils14.instanceOfRawEuler)(value)) {
+      if ((0, import_utils9.instanceOfRawEuler)(value)) {
         object.rotation.set(value.x, value.y, value.z, "ZYX");
-      } else if ((0, import_utils14.instanceOfRawNumber)(value)) {
+      } else if ((0, import_utils9.instanceOfRawNumber)(value)) {
         object.rotation.set(0, 0, 0);
         object.rotateZ(value);
       }
     },
     scale: (value) => {
-      if ((0, import_utils14.instanceOfRawVector3)(value)) {
+      if ((0, import_utils9.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)) {
+      } else if ((0, import_utils9.instanceOfRawNumber)(value)) {
         object.scale.set(value, value, value);
       } else {
         object.scale.set(1, 1, 1);
@@ -3918,19 +2907,19 @@ function groupTransform(object) {
 function shapeTransform(object) {
   return {
     translation: (value) => {
-      if ((0, import_utils14.instanceOfRawVector3)(value)) {
+      if ((0, import_utils9.instanceOfRawVector3)(value)) {
         object.position.set(value.x, value.y, value.z);
       }
     },
     rotation: (value) => {
-      if ((0, import_utils14.instanceOfRawEuler)(value)) {
+      if ((0, import_utils9.instanceOfRawEuler)(value)) {
         object.rotation.set(value.x, value.y, value.z, "ZYX");
       }
     },
     scale: (value) => {
-      if ((0, import_utils14.instanceOfRawVector3)(value)) {
+      if ((0, import_utils9.instanceOfRawVector3)(value)) {
         object.scale.set(value.x, value.y, value.z);
-      } else if ((0, import_utils14.instanceOfRawNumber)(value)) {
+      } else if ((0, import_utils9.instanceOfRawNumber)(value)) {
         object.scale.set(value, value, value);
       } else {
         object.scale.set(1, 1, 1);
@@ -3943,7 +2932,7 @@ function materialFactors(material) {
   const phong = material;
   return {
     opacity: (value) => {
-      if ((0, import_utils14.instanceOfRawNumber)(value)) {
+      if ((0, import_utils9.instanceOfRawNumber)(value)) {
         material.opacity = value;
         material.transparent = value < 1;
       }
@@ -3952,41 +2941,41 @@ function materialFactors(material) {
       if (!standard.color) {
         return;
       }
-      if ((0, import_utils14.instanceOfRawRGB)(value)) {
+      if ((0, import_utils9.instanceOfRawRGB)(value)) {
         standard.color.setRGB(value.r, value.g, value.b);
-      } else if ((0, import_utils14.instanceOfRawVector3)(value)) {
+      } else if ((0, import_utils9.instanceOfRawVector3)(value)) {
         standard.color.setRGB(value.x, value.y, value.z);
-      } else if ((0, import_utils14.instanceOfRawHSL)(value)) {
+      } else if ((0, import_utils9.instanceOfRawHSL)(value)) {
         standard.color.setHSL(value.h, value.s, value.l);
       }
     },
     roughness: (value) => {
-      if (standard.roughness !== void 0 && (0, import_utils14.instanceOfRawNumber)(value)) {
+      if (standard.roughness !== void 0 && (0, import_utils9.instanceOfRawNumber)(value)) {
         standard.roughness = value;
       }
     },
     metalness: (value) => {
-      if (standard.metalness !== void 0 && (0, import_utils14.instanceOfRawNumber)(value)) {
+      if (standard.metalness !== void 0 && (0, import_utils9.instanceOfRawNumber)(value)) {
         standard.metalness = value;
       }
     },
     shininess: (value) => {
-      if (phong.shininess !== void 0 && (0, import_utils14.instanceOfRawNumber)(value)) {
+      if (phong.shininess !== void 0 && (0, import_utils9.instanceOfRawNumber)(value)) {
         phong.shininess = value;
       }
     },
     emissive: (value) => {
-      if (standard.emissive && (0, import_utils14.instanceOfRawRGB)(value)) {
+      if (standard.emissive && (0, import_utils9.instanceOfRawRGB)(value)) {
         standard.emissive.setRGB(value.r, value.g, value.b);
       }
     },
     emissiveIntensity: (value) => {
-      if (standard.emissiveIntensity !== void 0 && (0, import_utils14.instanceOfRawNumber)(value)) {
+      if (standard.emissiveIntensity !== void 0 && (0, import_utils9.instanceOfRawNumber)(value)) {
         standard.emissiveIntensity = value;
       }
     },
     specular: (value) => {
-      if (phong.specular && (0, import_utils14.instanceOfRawRGB)(value)) {
+      if (phong.specular && (0, import_utils9.instanceOfRawRGB)(value)) {
         phong.specular.setRGB(value.r, value.g, value.b);
       }
     }
@@ -4006,7 +2995,7 @@ function morphWeights(object, shape) {
     targets.map((target, index) => [
       target,
       (value) => {
-        if ((0, import_utils14.instanceOfRawNumber)(value)) {
+        if ((0, import_utils9.instanceOfRawNumber)(value)) {
           influences[index] = value;
         }
       }
@@ -4014,18 +3003,18 @@ function morphWeights(object, shape) {
   );
 }
 function createMaterial(kind) {
-  const parameters = { side: THREE7.DoubleSide };
+  const parameters = { side: THREE4.DoubleSide };
   switch (kind) {
     case "basic" /* Basic */:
-      return new THREE7.MeshBasicMaterial(parameters);
+      return new THREE4.MeshBasicMaterial(parameters);
     case "lambert" /* Lambert */:
-      return new THREE7.MeshLambertMaterial(parameters);
+      return new THREE4.MeshLambertMaterial(parameters);
     case "phong" /* Phong */:
-      return new THREE7.MeshPhongMaterial(parameters);
+      return new THREE4.MeshPhongMaterial(parameters);
     case "normal" /* Normal */:
-      return new THREE7.MeshNormalMaterial(parameters);
+      return new THREE4.MeshNormalMaterial(parameters);
     case "standard" /* Standard */:
-      return new THREE7.MeshStandardMaterial(parameters);
+      return new THREE4.MeshStandardMaterial(parameters);
   }
 }
 var SCALAR_KEYS = ["f32", "f64", "i64", "i32", "u64", "u32", "float"];
@@ -4074,15 +3063,16 @@ function authoredDefault(animatable) {
 0 && (module.exports = {
   DEFAULT_TONE_MAPPING_MODE,
   EmptyModelError,
-  InnerVizij,
   ShapeMaterial,
   TONE_MAPPING_LABELS,
   TONE_MAPPING_MODES,
   Vizij,
+  VizijCanvas,
   VizijContext,
   VizijSlice,
   applyVizijBundle,
   buildSceneGraph,
+  canvasMounted,
   createVizijStore,
   deriveMorphFeatureKeys,
   deriveRootBounds,
@@ -4097,10 +3087,9 @@ function authoredDefault(animatable) {
   parseGlbJsonChunk,
   patchGlbJson,
   patchVizijBundleMetadata,
-  resolveToneMapping,
   sanitizeMorphKey,
+  setVizijProgress,
   useDefaultVizijStore,
-  useFeatures,
   useVizijStore,
   useVizijStoreGetter,
   useVizijStoreSetter,