npm - @vizij/render - Versions diffs - 1.0.0 → 2.0.0 - Mend

@vizij/render 1.0.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.mjs CHANGED Viewed

@@ -1,1241 +1,547 @@
-// src/vizij.tsx
-import { Suspense, memo as memo6, useContext as useContext3, useEffect as useEffect7 } from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { Object3D as Object3D4, SRGBColorSpace } from "three";
-import { Canvas, useThree } from "@react-three/fiber";
-import { Line as Line3, OrthographicCamera, Text } from "@react-three/drei";
-import { useShallow as useShallow7 } from "zustand/react/shallow";
-// src/renderables/renderable.tsx
-import { memo as memo5 } from "react";
-import { useShallow as useShallow5 } from "zustand/react/shallow";
-// src/hooks/use-vizij-store.ts
-import { useContext } from "react";
-import { useStore } from "zustand";
-// src/context.ts
-import { createContext } from "react";
-var VizijContext = createContext(null);
-// src/hooks/use-vizij-store.ts
-function useVizijStore(selector) {
-  const store = useContext(VizijContext);
-  if (!store) throw new Error("Missing VizijProvider in the tree");
-  return useStore(store, selector);
-}
-// src/renderables/group.tsx
-import { memo, useCallback, useEffect as useEffect2, useRef, useMemo } from "react";
-import * as THREE from "three";
-import { useShallow } from "zustand/react/shallow";
+// src/page/canvas.tsx
+import { useEffect, useRef } from "react";
 import {
-  instanceOfRawEuler,
-  instanceOfRawNumber,
-  instanceOfRawVector2,
-  instanceOfRawVector3
-} from "@vizij/utils";
+  drainPicks,
+  init,
+  mount,
+  onInitProgress,
+  placeVizij,
+  ready,
+  safeArea
+} from "@vizij/runtime";
-// src/hooks/use-features.ts
-import { useEffect, useContext as useContext2 } from "react";
-import { shallow } from "zustand/shallow";
-import { getLookup } from "@vizij/utils";
-function useFeatures(namespace, features, callbacks, debugInfo) {
-  const store = useContext2(VizijContext);
-  if (!store) throw new Error("Missing VizijProvider in the tree");
-  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 = getLookup(namespace, animatableValueInfo.id);
-        const unsubscribe = store.subscribe(
-          (state) => state.values.get(lookupKey) ?? defaultValue,
-          cb,
-          { equalityFn: shallow, fireImmediately: true }
-        );
-        unsubsribes.push(unsubscribe);
-      }
-    });
-    return () => {
-      unsubsribes.forEach((unsubscribe) => unsubscribe());
-    };
-  }, [features, callbacks, store, debugInfo, namespace]);
+// 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);
+  };
+}
+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
 import { jsx } from "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 = useRef(null);
-  const group = useVizijStore(useShallow((state) => state.world[id]));
-  const refIsNull = useVizijStore(
-    (state) => !state.refs[id]?.[namespace]?.current
-  );
-  const animatables = useVizijStore(useShallow((state) => state.animatables));
-  const setHoveredElement = useVizijStore(
-    useShallow((state) => state.setHoveredElement)
-  );
-  const animatableValues = 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 && instanceOfRawVector3(pos)) {
-        ref.current.position.set(
-          pos.x,
-          pos.y,
-          pos.z
-        );
-      } else if (ref.current?.position && instanceOfRawVector2(pos)) {
-        const currentZ = ref.current.position.z;
-        ref.current.position.set(pos.x, pos.y, currentZ);
-      }
-    },
-    rotation: (rot) => {
-      if (ref.current?.rotation && instanceOfRawEuler(rot)) {
-        ref.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (ref.current?.rotation && instanceOfRawNumber(rot)) {
-        ref.current.rotation.set(0, 0, 0);
-        ref.current.rotateZ(rot);
-      }
-    },
-    scale: (scale) => {
-      if (ref.current?.scale && 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 && instanceOfRawNumber(scale)) {
-        ref.current.scale.set(scale, scale, scale);
-      } else if (ref.current) {
-        ref.current.scale.set(1, 1, 1);
-      }
-    }
-  });
-  const setReference = useVizijStore(
-    useShallow((state) => state.setReference)
-  );
-  useEffect2(() => {
-    if (ref.current && refIsNull) {
-      setReference(group.id, namespace, ref);
+  const host = useRef(null);
+  const firstOptions = useRef(options);
+  useEffect(() => {
+    const element = host.current;
+    const shown = pageCanvas();
+    element.appendChild(shown);
+    if (!mounting) {
+      mounting = mountOnce(shown, firstOptions.current);
+      mounting.then(settle.resolve, settle.reject);
     }
-  }, [group.id, namespace, ref, setReference, refIsNull]);
-  useEffect2(() => {
-    if (ref.current) {
-      ref.current.name = group.name;
+    hosts += 1;
+    if (hosts === 1) {
+      void mounting.then(start, () => void 0);
     }
-  }, [group.name]);
-  const handlePointerOver = 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 = useCallback(
-    (event) => {
-      if (event.eventObject !== event.object) {
-        return;
+      if (shown.parentElement === element) {
+        element.removeChild(shown);
       }
-      setHoveredElement(null);
-    },
-    [setHoveredElement]
-  );
+    };
+  }, []);
   return /* @__PURE__ */ jsx(
-    "group",
+    "div",
     {
-      ref,
-      uuid: `${namespace}.${group.id}`,
-      userData,
-      onPointerOver: handlePointerOver,
-      onPointerOut: handlePointerOut,
-      children: group.children.map((child) => /* @__PURE__ */ jsx(
-        Renderable,
-        {
-          id: child,
-          namespace,
-          chain: [...chain, id]
-        },
-        child
-      ))
+      ref: host,
+      className,
+      style: style ?? (className ? void 0 : DEFAULT_STYLE)
     }
   );
 }
-var RenderedGroup = memo(InnerRenderedGroup);
+async function mountOnce(shown, options) {
+  const unfollow = onInitProgress((progress) => {
+    setRuntimeStage(progress.stage === "ready" ? { stage: "mount" } : progress);
+  });
+  try {
+    await init();
+    await afterPaint();
+    await 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)
+    );
+  });
+}
+function asError(error) {
+  return error instanceof Error ? error : new Error(String(error));
+}
+function pageCanvas() {
+  if (!canvas) {
+    canvas = document.createElement("canvas");
+    canvas.style.display = "block";
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+  }
+  return canvas;
+}
+var view = { placeVizij, ready, safeArea, 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;
+  }
+}
+function addSlot(slot) {
+  slots.add(slot);
+  return () => {
+    slots.delete(slot);
+    if (live) {
+      placeVizij(slot.vizijId, { x: 0, y: 0, width: 0, height: 0 });
+    }
+  };
+}
-// src/renderables/ellipse.tsx
-import { memo as memo2, useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useMemo as useMemo2 } from "react";
-import { useShallow as useShallow2 } from "zustand/react/shallow";
+// src/page/vizij.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
 import {
-  instanceOfRawNumber as instanceOfRawNumber2,
-  instanceOfRawVector2 as instanceOfRawVector22,
-  instanceOfRawVector3 as instanceOfRawVector32,
-  instanceOfRawEuler as instanceOfRawEuler2,
-  instanceOfRawRGB,
-  instanceOfRawHSL
-} from "@vizij/utils";
-import { Circle, Line } from "@react-three/drei";
+  setSelection,
+  setView
+} from "@vizij/runtime";
+// src/page/loading.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-function InnerRenderedEllipse({
-  id,
-  namespace,
-  chain
-}) {
-  const ellipseRef = useRef2(null);
-  const materialRef = useRef2(
-    null
-  );
-  const lineRef = useRef2(null);
-  const strokeOffsetRef = useRef2(0);
-  const strokeWidthRef = useRef2(0);
-  const onElementClick = useVizijStore(
-    useShallow2((state) => state.onElementClick)
-  );
-  const setHoveredElement = useVizijStore(
-    useShallow2((state) => state.setHoveredElement)
-  );
-  const ellipse = useVizijStore(
-    useShallow2((state) => state.world[id])
-  );
-  const refIsNull = useVizijStore(
-    (state) => !state.refs[id]?.[namespace]?.current
-  );
-  const animatables = useVizijStore(useShallow2((state) => state.animatables));
-  const animatableValues = useMemo2(() => {
-    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 = useMemo2(
-    () => ({ id, namespace, type: "ellipse" }),
-    [id, namespace]
-  );
-  const userData = useMemo2(
-    () => ({
-      gltfExtensions: {
-        RobotData: createStoredRenderable(ellipse, animatableValues)
-      },
-      selection: selectionData
-    }),
-    [ellipse, animatableValues, selectionData]
-  );
-  useFeatures(namespace, ellipse.features, {
-    translation: (pos) => {
-      if (ellipseRef.current?.position && instanceOfRawVector32(pos)) {
-        ellipseRef.current.position.set(
-          pos.x,
-          pos.y,
-          pos.z
-        );
-      } else if (ellipseRef.current?.position && instanceOfRawVector22(pos)) {
-        const currentZ = ellipseRef.current.position.z;
-        ellipseRef.current.position.set(
-          pos.x,
-          pos.y,
-          currentZ
-        );
-      }
-      if (lineRef.current?.position && instanceOfRawVector32(pos)) {
-        lineRef.current.position.set(
-          pos.x,
-          pos.y,
-          pos.z
-        );
-      } else if (lineRef.current?.position && instanceOfRawVector22(pos)) {
-        const currentZ = lineRef.current.position.z;
-        lineRef.current.position.set(
-          pos.x,
-          pos.y,
-          currentZ
-        );
-      }
-    },
-    rotation: (rot) => {
-      if (ellipseRef.current?.rotation && instanceOfRawEuler2(rot)) {
-        ellipseRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (ellipseRef.current?.rotation && instanceOfRawNumber2(rot)) {
-        ellipseRef.current.rotation.set(0, 0, 0);
-        ellipseRef.current.rotateZ(rot);
-      }
-      if (lineRef.current?.rotation && instanceOfRawEuler2(rot)) {
-        lineRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (lineRef.current?.rotation && instanceOfRawNumber2(rot)) {
-        lineRef.current.rotation.set(0, 0, 0);
-        lineRef.current.rotateZ(rot);
-      }
-    },
-    fillOpacity: (op) => {
-      if (materialRef.current?.opacity !== void 0 && instanceOfRawNumber2(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 (instanceOfRawRGB(color)) {
-          materialRef.current.color.setRGB(color.r, color.g, color.b);
-          materialRef.current.needsUpdate = true;
-        } else if (instanceOfRawVector32(color)) {
-          materialRef.current.color.setRGB(color.x, color.y, color.z);
-          materialRef.current.needsUpdate = true;
-        } else if (instanceOfRawHSL(color)) {
-          materialRef.current.color.setHSL(color.h, color.s, color.l);
-          materialRef.current.needsUpdate = true;
-        }
-      }
-    },
-    height: (height) => {
-      if (ellipseRef.current && instanceOfRawNumber2(height)) {
-        ellipseRef.current.scale.set(ellipseRef.current.scale.x, height, 1);
-      }
-      if (ellipseRef.current && lineRef.current && instanceOfRawNumber2(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 && instanceOfRawNumber2(width)) {
-        ellipseRef.current.scale.set(width, ellipseRef.current.scale.y, 1);
-      }
-      if (ellipseRef.current && lineRef.current && instanceOfRawNumber2(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 && instanceOfRawNumber2(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 (instanceOfRawRGB(strokeColor)) {
-          lineRef.current.material.color.setRGB(
-            strokeColor.r,
-            strokeColor.g,
-            strokeColor.b
-          );
-          lineRef.current.material.needsUpdate = true;
-        } else if (instanceOfRawVector32(strokeColor)) {
-          lineRef.current.material.color.setRGB(
-            strokeColor.x,
-            strokeColor.y,
-            strokeColor.z
-          );
-          lineRef.current.material.needsUpdate = true;
-        } else if (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 (instanceOfRawNumber2(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;
+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__ */ jsxs("svg", { viewBox: "0 0 1024 1024", width: "64", height: "64", children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "447.6", cy: "486.6", r: "400.6", fill: "#50c4b6" }),
+    /* @__PURE__ */ jsxs("g", { fillOpacity: "0.894", children: [
+      /* @__PURE__ */ jsx2(
+        "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"
         }
-      }
-    },
-    strokeOffset: (strokeOffset) => {
-      if (lineRef.current?.material && ellipseRef.current) {
-        if (instanceOfRawNumber2(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
-          );
+      ),
+      /* @__PURE__ */ jsx2(
+        "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"
         }
-      }
-    }
-  });
-  const setReference = useVizijStore(
-    useShallow2((state) => state.setReference)
-  );
-  const points = useMemo2(() => {
-    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;
-  }, []);
-  useEffect3(() => {
-    if (ellipseRef.current && refIsNull)
-      setReference(ellipse.id, namespace, ellipseRef);
-  }, [ellipse.id, namespace, ellipseRef, setReference, refIsNull]);
-  const handlePointerOver = useCallback2(
-    (event) => {
-      event.stopPropagation();
-      setHoveredElement({ id, namespace, type: "ellipse" });
-    },
-    [id, namespace, setHoveredElement]
-  );
-  const handlePointerOut = useCallback2(
-    (event) => {
-      event.stopPropagation();
-      setHoveredElement(null);
-    },
-    [setHoveredElement]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(
-      Circle,
-      {
-        ref: ellipseRef,
-        userData,
-        args: [1, 100],
-        onPointerOver: handlePointerOver,
-        onPointerOut: handlePointerOut,
-        onClick: (e) => {
-          onElementClick({ id, type: "ellipse", namespace }, [...chain, id], e);
-        },
-        children: /* @__PURE__ */ jsx2("meshStandardMaterial", { attach: "material", ref: materialRef })
-      }
-    ),
-    showLine(ellipse) && /* @__PURE__ */ jsx2(
-      Line,
-      {
-        ref: lineRef,
-        points,
-        onPointerOver: handlePointerOver,
-        onPointerOut: handlePointerOut
-      }
-    )
+      )
+    ] })
   ] });
 }
-var RenderedEllipse = memo2(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
-import { memo as memo3, useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useMemo as useMemo3 } from "react";
-import { useShallow as useShallow3 } from "zustand/react/shallow";
-import {
-  instanceOfRawNumber as instanceOfRawNumber3,
-  instanceOfRawVector2 as instanceOfRawVector23,
-  instanceOfRawVector3 as instanceOfRawVector33,
-  instanceOfRawEuler as instanceOfRawEuler3,
-  instanceOfRawRGB as instanceOfRawRGB2,
-  instanceOfRawHSL as instanceOfRawHSL2
-} from "@vizij/utils";
-import { Plane, Line as Line2 } from "@react-three/drei";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function InnerRenderedRectangle({
-  id,
-  namespace,
-  chain
+function DefaultLoading({
+  loading,
+  image
 }) {
-  const rectangleRef = useRef3(null);
-  const materialRef = useRef3(
-    null
-  );
-  const lineRef = useRef3(null);
-  const strokeOffsetRef = useRef3(0);
-  const strokeWidthRef = useRef3(0);
-  const onElementClick = useVizijStore(
-    useShallow3((state) => state.onElementClick)
-  );
-  const setHoveredElement = useVizijStore(
-    useShallow3((state) => state.setHoveredElement)
-  );
-  const rectangle = useVizijStore(
-    useShallow3((state) => state.world[id])
-  );
-  const refIsNull = useVizijStore(
-    (state) => !state.refs[id]?.[namespace]?.current
-  );
-  const animatables = useVizijStore(useShallow3((state) => state.animatables));
-  const animatableValues = useMemo3(() => {
-    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 = useMemo3(
-    () => ({ id, namespace, type: "rectangle" }),
-    [id, namespace]
-  );
-  const userData = useMemo3(
-    () => ({
-      gltfExtensions: {
-        RobotData: createStoredRenderable(rectangle, animatableValues)
+  const { stage, label, fraction } = loading;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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"
       },
-      selection: selectionData
-    }),
-    [rectangle, animatableValues, selectionData]
-  );
-  useFeatures(namespace, rectangle.features, {
-    translation: (pos) => {
-      if (rectangleRef.current?.position && instanceOfRawVector33(pos)) {
-        rectangleRef.current.position.set(
-          pos.x,
-          pos.y,
-          pos.z
-        );
-      } else if (rectangleRef.current?.position && instanceOfRawVector23(pos)) {
-        const currentZ = rectangleRef.current.position.z;
-        rectangleRef.current.position.set(
-          pos.x,
-          pos.y,
-          currentZ
-        );
-      }
-      if (lineRef.current?.position && instanceOfRawVector33(pos)) {
-        lineRef.current.position.set(
-          pos.x,
-          pos.y,
-          pos.z
-        );
-      } else if (lineRef.current?.position && instanceOfRawVector23(pos)) {
-        const currentZ = lineRef.current.position.z;
-        lineRef.current.position.set(
-          pos.x,
-          pos.y,
-          currentZ
-        );
-      }
-    },
-    rotation: (rot) => {
-      if (rectangleRef.current?.rotation && instanceOfRawEuler3(rot)) {
-        rectangleRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (rectangleRef.current?.rotation && instanceOfRawNumber3(rot)) {
-        rectangleRef.current.rotation.set(0, 0, 0);
-        rectangleRef.current.rotateZ(rot);
-      }
-      if (lineRef.current?.rotation && instanceOfRawEuler3(rot)) {
-        lineRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (lineRef.current?.rotation && instanceOfRawNumber3(rot)) {
-        lineRef.current.rotation.set(0, 0, 0);
-        lineRef.current.rotateZ(rot);
-      }
-    },
-    fillOpacity: (op) => {
-      if (materialRef.current?.opacity !== void 0 && instanceOfRawNumber3(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 (instanceOfRawRGB2(color)) {
-          materialRef.current.color.setRGB(color.r, color.g, color.b);
-          materialRef.current.needsUpdate = true;
-        } else if (instanceOfRawVector33(color)) {
-          materialRef.current.color.setRGB(color.x, color.y, color.z);
-          materialRef.current.needsUpdate = true;
-        } else if (instanceOfRawHSL2(color)) {
-          materialRef.current.color.setHSL(color.h, color.s, color.l);
-          materialRef.current.needsUpdate = true;
-        }
-      }
-    },
-    height: (height) => {
-      if (rectangleRef.current && instanceOfRawNumber3(height)) {
-        rectangleRef.current.scale.set(rectangleRef.current.scale.x, height, 1);
-      }
-      if (rectangleRef.current && lineRef.current && instanceOfRawNumber3(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 && instanceOfRawNumber3(width)) {
-        rectangleRef.current.scale.set(width, rectangleRef.current.scale.y, 1);
-      }
-      if (rectangleRef.current && lineRef.current && instanceOfRawNumber3(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 && instanceOfRawNumber3(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 (instanceOfRawRGB2(strokeColor)) {
-          lineRef.current.material.color.setRGB(
-            strokeColor.r,
-            strokeColor.g,
-            strokeColor.b
-          );
-          lineRef.current.material.needsUpdate = true;
-        } else if (instanceOfRawVector33(strokeColor)) {
-          lineRef.current.material.color.setRGB(
-            strokeColor.x,
-            strokeColor.y,
-            strokeColor.z
-          );
-          lineRef.current.material.needsUpdate = true;
-        } else if (instanceOfRawHSL2(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 (instanceOfRawNumber3(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 (instanceOfRawNumber3(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
-          );
-        }
-      }
+      children: [
+        image !== null && /* @__PURE__ */ jsx2("div", { "aria-hidden": "true", children: image ?? /* @__PURE__ */ jsx2(DefaultLoadingImage, {}) }),
+        stage.stage === "failed" ? /* @__PURE__ */ jsx2("div", { role: "status", children: label }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ 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__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      background: "currentColor",
+                      opacity: 0.2
+                    }
+                  }
+                ),
+                fraction === null ? /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    "data-vizij-loading-indeterminate": "",
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      bottom: 0,
+                      left: 0,
+                      width: "40%",
+                      background: "currentColor"
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      bottom: 0,
+                      left: 0,
+                      width: `${fraction * 100}%`,
+                      background: "currentColor"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx2("div", { "aria-hidden": "true", style: { opacity: 0.8 }, children: label }),
+          fraction === null && /* @__PURE__ */ jsx2("style", { children: INDETERMINATE_CSS })
+        ] })
+      ]
     }
-  });
-  const setReference = useVizijStore(
-    useShallow3((state) => state.setReference)
   );
-  const points = useMemo3(() => {
-    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]
-    ];
-  }, []);
-  useEffect4(() => {
-    if (rectangleRef.current && refIsNull)
-      setReference(rectangle.id, namespace, rectangleRef);
-  }, [rectangle.id, namespace, rectangleRef, setReference, refIsNull]);
-  const handlePointerOver = useCallback3(
-    (event) => {
-      event.stopPropagation();
-      setHoveredElement({ id, namespace, type: "rectangle" });
-    },
-    [id, namespace, setHoveredElement]
-  );
-  const handlePointerOut = useCallback3(
-    (event) => {
-      event.stopPropagation();
-      setHoveredElement(null);
-    },
-    [setHoveredElement]
-  );
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(
-      Plane,
-      {
-        ref: rectangleRef,
-        userData,
-        args: [1, 1],
-        onPointerOver: handlePointerOver,
-        onPointerOut: handlePointerOut,
-        onClick: (e) => {
-          onElementClick(
-            { id, type: "rectangle", namespace },
-            [...chain, id],
-            e
-          );
-        },
-        children: /* @__PURE__ */ jsx3("meshStandardMaterial", { attach: "material", ref: materialRef })
-      }
-    ),
-    showLine2(rectangle) && /* @__PURE__ */ jsx3(
-      Line2,
-      {
-        ref: lineRef,
-        points,
-        onPointerOver: handlePointerOver,
-        onPointerOut: handlePointerOut
-      }
-    )
-  ] });
-}
-var RenderedRectangle = memo3(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
-import { memo as memo4, useCallback as useCallback4, useRef as useRef4, useMemo as useMemo4, useEffect as useEffect5 } from "react";
-import * as THREE2 from "three";
-import { useShallow as useShallow4 } from "zustand/react/shallow";
-import {
-  instanceOfRawEuler as instanceOfRawEuler4,
-  instanceOfRawHSL as instanceOfRawHSL3,
-  instanceOfRawNumber as instanceOfRawNumber4,
-  instanceOfRawRGB as instanceOfRawRGB3,
-  instanceOfRawVector3 as instanceOfRawVector34
-} from "@vizij/utils";
-// src/functions/material-name.ts
-var MATERIAL_FEATURE_KEYS = [
-  "color",
-  "opacity",
-  "roughness",
-  "metalness",
-  "shininess",
-  "emissive",
-  "emissiveIntensity",
-  "specular"
-];
-var MATERIAL_NAME_SUFFIXES = [
-  " color",
-  " colours",
-  " colour",
-  " opacity",
-  " roughness",
-  " metalness",
-  " shininess",
-  " emissive intensity",
-  " emissive",
-  " specular"
-];
-function deriveMaterialName(shape, values) {
-  for (const key of MATERIAL_FEATURE_KEYS) {
-    const feature = shape.features[key];
-    if (feature && feature.animated) {
-      const animatable = values[feature.value];
-      const candidate = extractMaterialName(animatable?.name);
-      if (candidate) {
-        return candidate;
-      }
-    }
-  }
-  return void 0;
-}
-function extractMaterialName(name) {
-  if (!name) {
-    return void 0;
-  }
-  const trimmed = name.trim();
-  if (!trimmed) {
-    return void 0;
-  }
-  const lowered = trimmed.toLowerCase();
-  for (const suffix of MATERIAL_NAME_SUFFIXES) {
-    if (lowered.endsWith(suffix)) {
-      return trimmed.slice(0, trimmed.length - suffix.length).trim();
-    }
-  }
-  return trimmed;
 }
-// src/renderables/shape.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-THREE2.Object3D.DEFAULT_UP.set(0, 0, 1);
-function InnerRenderedShape({
-  id,
-  namespace,
-  chain
+// src/page/vizij.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Vizij({
+  vizijId,
+  className,
+  style,
+  toneMapping,
+  fit,
+  zoom,
+  bounds,
+  showSafeArea = false,
+  selection,
+  onPick,
+  loadingImage,
+  loading
 }) {
-  const refGroup = useRef4(null);
-  const ref = useRef4(null);
-  const shape = useVizijStore(useShallow4((state) => state.world[id]));
-  const refIsNull = useVizijStore(
-    (state) => !state.refs[id]?.[namespace]?.current
-  );
-  const animatables = useVizijStore(useShallow4((state) => state.animatables));
-  const animatableValues = useMemo4(() => {
-    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 = useMemo4(
-    () => deriveMaterialName(shape, animatableValues),
-    [shape, animatableValues]
-  );
-  const geometry = useMemo4(() => {
-    const cloned = shape.geometry.clone();
-    if (shape.name) {
-      cloned.name = shape.name;
-    }
-    return cloned;
-  }, [shape.geometry, shape.name]);
-  const selectionData = useMemo4(
-    () => ({ id, namespace, type: "shape" }),
-    [id, namespace]
+  const element = useRef2(null);
+  const frame2 = useRef2(null);
+  const outline2 = useRef2(null);
+  const slot = useRef2(null);
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    if (slot.current) slot.current.onPick = onPick;
+  }, [onPick, vizijId]);
+  useEffect2(() => {
+    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 });
+  useEffect2(
+    () => onceMounted(() => setView(vizijId, JSON.parse(view2))),
+    [vizijId, view2]
   );
-  const userData = useMemo4(
-    () => ({
-      gltfExtensions: {
-        RobotData: createStoredRenderable(shape, animatableValues)
-      },
-      selection: selectionData
-    }),
-    [shape, animatableValues, selectionData]
+  const selected = selection === void 0 ? null : JSON.stringify(selection);
+  useEffect2(
+    () => selected === null ? void 0 : onceMounted(() => setSelection(vizijId, JSON.parse(selected))),
+    [vizijId, selected]
   );
-  const material = useRef4(null);
-  const morphTargetSettings = useMemo4(() => {
-    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 && instanceOfRawNumber4(value)) {
-            ref.current.morphTargetInfluences[i] = value;
-          }
-        };
-      });
-      return [dictionary, initialInfluences, morphFeatureHandlers];
-    } else {
-      return [void 0, void 0, {}];
-    }
-  }, [shape.morphTargets]);
-  useFeatures(
-    namespace,
-    shape.features,
+  const stage = useLoadingStage(vizijId);
+  const loadingView = stage === null || loading === null ? null : loading ? loading(describeLoading(stage)) : /* @__PURE__ */ jsx3(DefaultLoading, { loading: describeLoading(stage), image: loadingImage });
+  return /* @__PURE__ */ jsx3(
+    "div",
     {
-      translation: (pos) => {
-        if (ref.current?.position && instanceOfRawVector34(pos)) {
-          ref.current.position.set(
-            pos.x,
-            pos.y,
-            pos.z
-          );
-        }
-        if (refGroup.current?.position && instanceOfRawVector34(pos)) {
-          refGroup.current.position.set(
-            pos.x,
-            pos.y,
-            pos.z
-          );
-        }
-      },
-      rotation: (rot) => {
-        if (ref.current?.rotation && instanceOfRawEuler4(rot)) {
-          ref.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-        }
-        if (refGroup.current?.rotation && instanceOfRawEuler4(rot)) {
-          refGroup.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-        }
-      },
-      scale: (scale) => {
-        if (ref.current?.scale && instanceOfRawVector34(scale)) {
-          ref.current.scale.set(scale.x, scale.y, scale.z);
-        } else if (ref.current && instanceOfRawNumber4(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 && instanceOfRawNumber4(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 && instanceOfRawRGB3(color)) {
-          material.current.color.setRGB(
-            color.r,
-            color.g,
-            color.b
-          );
-          material.current.needsUpdate = true;
-        } else if ((material.current || void 0)?.color && instanceOfRawVector34(color)) {
-          material.current.color.setRGB(
-            color.x,
-            color.y,
-            color.z
-          );
-          material.current.needsUpdate = true;
-        } else if (material.current && instanceOfRawHSL3(color)) {
-          material.current.color.setHSL(
-            color.h,
-            color.s,
-            color.l
-          );
-        }
-      },
-      roughness: (value) => {
-        const standard = material.current;
-        if (standard?.roughness !== void 0 && instanceOfRawNumber4(value)) {
-          standard.roughness = value;
-          standard.needsUpdate = true;
-        }
-      },
-      metalness: (value) => {
-        const standard = material.current;
-        if (standard?.metalness !== void 0 && instanceOfRawNumber4(value)) {
-          standard.metalness = value;
-          standard.needsUpdate = true;
-        }
-      },
-      shininess: (value) => {
-        const phong = material.current;
-        if (phong?.shininess !== void 0 && instanceOfRawNumber4(value)) {
-          phong.shininess = value;
-          phong.needsUpdate = true;
-        }
-      },
-      emissive: (value) => {
-        const standard = material.current;
-        if (standard?.emissive && instanceOfRawRGB3(value)) {
-          standard.emissive.setRGB(value.r, value.g, value.b);
-          standard.needsUpdate = true;
-        }
-      },
-      emissiveIntensity: (value) => {
-        const standard = material.current;
-        if (standard?.emissiveIntensity !== void 0 && instanceOfRawNumber4(value)) {
-          standard.emissiveIntensity = value;
-          standard.needsUpdate = true;
-        }
-      },
-      specular: (value) => {
-        const phong = material.current;
-        if (phong?.specular && instanceOfRawRGB3(value)) {
-          phong.specular.setRGB(value.r, value.g, value.b);
-          phong.needsUpdate = true;
+      ref: element,
+      className,
+      style,
+      "data-vizij-id": vizijId,
+      children: (showSafeArea || loadingView !== null) && /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          ref: frame2,
+          style: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none"
+          },
+          children: [
+            loadingView !== null && /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "data-vizij-loading": "",
+                style: { position: "absolute", inset: 0 },
+                children: loadingView
+              }
+            ),
+            showSafeArea && /* @__PURE__ */ jsx3(
+              "div",
+              {
+                ref: outline2,
+                style: {
+                  position: "absolute",
+                  display: "none",
+                  boxSizing: "border-box",
+                  border: "2px solid red"
+                }
+              }
+            )
+          ]
         }
-      },
-      ...morphTargetSettings[2]
-    },
-    shape
-  );
-  const setReference = useVizijStore(useShallow4((state) => state.setReference));
-  const onElementClick = useVizijStore(
-    useShallow4((state) => state.onElementClick)
-  );
-  const setHoveredElement = useVizijStore(
-    useShallow4((state) => state.setHoveredElement)
-  );
-  useEffect5(() => {
-    if (ref.current && refIsNull) setReference(shape.id, namespace, ref);
-  }, [shape.id, namespace, ref, setReference, refIsNull]);
-  useEffect5(() => {
-    if (ref.current) {
-      ref.current.name = shape.name;
-    }
-  }, [shape.name]);
-  useEffect5(() => {
-    if (!material.current) {
-      return;
+      )
     }
-    if (materialName) {
-      material.current.name = materialName;
-    } else if (shape.name) {
-      material.current.name = shape.name;
-    }
-  }, [materialName, shape.name]);
-  const handlePointerOver = useCallback4(
-    (event) => {
-      event.stopPropagation();
-      setHoveredElement({ id, namespace, type: "shape" });
-    },
-    [id, namespace, setHoveredElement]
   );
-  const handlePointerOut = useCallback4(
-    (event) => {
-      event.stopPropagation();
-      setHoveredElement(null);
+}
+function useLoadingStage(vizijId) {
+  const [stage, setStage] = useState(() => loadingStage(vizijId));
+  useEffect2(() => watchLoading(vizijId, setStage), [vizijId]);
+  return stage;
+}
+function onceMounted(apply) {
+  let current = true;
+  canvasMounted().then(
+    () => {
+      if (current) apply();
     },
-    [setHoveredElement]
-  );
-  return /* @__PURE__ */ jsxs3(
-    "mesh",
-    {
-      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);
-      },
-      children: [
-        shape.material === "basic" && /* @__PURE__ */ jsx4(
-          "meshBasicMaterial",
-          {
-            attach: "material",
-            ref: material,
-            side: THREE2.DoubleSide
-          }
-        ),
-        shape.material === "lambert" && /* @__PURE__ */ jsx4(
-          "meshLambertMaterial",
-          {
-            attach: "material",
-            ref: material,
-            side: THREE2.DoubleSide
-          }
-        ),
-        shape.material === "phong" && /* @__PURE__ */ jsx4(
-          "meshPhongMaterial",
-          {
-            attach: "material",
-            ref: material,
-            side: THREE2.DoubleSide
-          }
-        ),
-        shape.material === "standard" && /* @__PURE__ */ jsx4(
-          "meshStandardMaterial",
-          {
-            attach: "material",
-            ref: material,
-            side: THREE2.DoubleSide
-          }
-        ),
-        shape.material === "normal" && /* @__PURE__ */ jsx4(
-          "meshNormalMaterial",
-          {
-            attach: "material",
-            ref: material,
-            side: THREE2.DoubleSide
-          }
-        ),
-        shape.children?.map((child) => /* @__PURE__ */ jsx4(
-          Renderable,
-          {
-            id: child,
-            namespace,
-            chain: [...chain, id]
-          },
-          child
-        ))
-      ]
-    }
+    () => void 0
   );
+  return () => {
+    current = false;
+  };
 }
-var RenderedShape = memo4(InnerRenderedShape);
-// src/renderables/renderable.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function InnerRenderable({
-  id,
-  namespace,
-  chain
-}) {
-  const type = useVizijStore(useShallow5((state) => state.world[id].type));
-  const key = `${namespace}.${id}`;
-  switch (type) {
-    case "group":
-      return /* @__PURE__ */ jsx5(RenderedGroup, { id, namespace, chain }, key);
-    case "ellipse":
-      return /* @__PURE__ */ jsx5(
-        RenderedEllipse,
-        {
-          id,
-          namespace,
-          chain
-        },
-        key
-      );
-    case "rectangle":
-      return /* @__PURE__ */ jsx5(
-        RenderedRectangle,
-        {
-          id,
-          namespace,
-          chain
-        },
-        key
-      );
-    case "shape":
-      return /* @__PURE__ */ jsx5(RenderedShape, { id, namespace, chain }, key);
-    default:
-      return null;
-  }
-}
-var Renderable = memo5(InnerRenderable);
 // src/store.ts
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { produce, enableMapSet } from "immer";
-import * as THREE3 from "three";
-import { getLookup as getLookup2 } from "@vizij/utils";
+import { getLookup } from "@vizij/utils";
 // src/functions/create-world-element.ts
 import { createBrowserSafeId } from "@vizij/utils";
@@ -1298,30 +604,6 @@ function removeFromTree(state, nodesToRemove) {
   });
 }
-// src/memoryInvestigation.ts
-function getGlobalMemoryInvestigation() {
-  return globalThis;
-}
-function updateRenderState(updater) {
-  const globalObj = getGlobalMemoryInvestigation();
-  if (!globalObj.__VIZIJ_MEMORY_INVESTIGATION__?.enabled) {
-    return;
-  }
-  if (!globalObj.__vizijMemoryDebugState) {
-    globalObj.__vizijMemoryDebugState = {};
-  }
-  if (!globalObj.__vizijMemoryDebugState.render) {
-    globalObj.__vizijMemoryDebugState.render = {};
-  }
-  updater(globalObj.__vizijMemoryDebugState.render);
-}
-function recordRenderCounter(key, delta = 1) {
-  updateRenderState((renderState) => {
-    const current = typeof renderState[key] === "number" ? Number(renderState[key]) : 0;
-    renderState[key] = current + delta;
-  });
-}
 // src/functions/create-animatable.ts
 import { createBrowserSafeId as createBrowserSafeId2 } from "@vizij/utils";
 function createAnimatable(value) {
@@ -1443,51 +725,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);
 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: [] });
   },
@@ -1498,66 +745,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(
-      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(
       produce((state) => {
@@ -1568,7 +755,7 @@ var VizijSlice = (set, get) => ({
   setValue: (id, namespace, value) => {
     set(
       produce((state) => {
-        const lookupId = getLookup2(namespace, id);
+        const lookupId = getLookup(namespace, id);
         if (typeof value === "function") {
           const current = state.values.get(lookupId);
           if (current !== void 0) {
@@ -1597,7 +784,7 @@ var VizijSlice = (set, get) => ({
     set(
       produce((state) => {
         writes.forEach(({ id, namespace, value }) => {
-          const lookupId = getLookup2(namespace, id);
+          const lookupId = getLookup(namespace, id);
           state.values.set(lookupId, value);
         });
       })
@@ -1725,36 +912,7 @@ var VizijSlice = (set, get) => ({
       })
     );
   },
-  setSlot: (parentId, parentNamespace, childId, childNamespace) => {
-    set(
-      produce((state) => {
-        const parentLookupId = getLookup2(parentNamespace, parentId);
-        const childLookupId = getLookup2(childNamespace, childId);
-        state.slotConfig[parentLookupId] = childLookupId;
-      })
-    );
-  },
-  setSlots: (slots, replace) => {
-    set(
-      produce((state) => {
-        if (replace) {
-          state.slotConfig = slots;
-        } else {
-          state.slotConfig = { ...state.slotConfig, ...slots };
-        }
-      })
-    );
-  },
-  clearSlot: (parentId, parentNamespace) => {
-    set(
-      produce((state) => {
-        const parentLookupId = getLookup2(parentNamespace, parentId);
-        delete state.slotConfig[parentLookupId];
-      })
-    );
-  },
   setVizij: (scene, animatables) => {
-    recordRenderCounter("rootReplacementCount");
     set({
       world: scene,
       animatables
@@ -1762,7 +920,6 @@ var VizijSlice = (set, get) => ({
   },
   addWorldElements(world, animatables, replace) {
     if (replace) {
-      recordRenderCounter("rootReplacementCount");
       set({ world, animatables });
     } else {
       set((state) => ({
@@ -1775,14 +932,6 @@ 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 = create()(
@@ -1808,12 +957,6 @@ var ShapeMaterial = /* @__PURE__ */ ((ShapeMaterial2) => {
 })(ShapeMaterial || {});
 // src/types/tone-mapping.ts
-import {
-  ACESFilmicToneMapping,
-  AgXToneMapping,
-  NeutralToneMapping,
-  NoToneMapping
-} from "three";
 var TONE_MAPPING_MODES = [
   "none",
   "agx",
@@ -1827,361 +970,32 @@ var TONE_MAPPING_LABELS = {
   neutral: "Neutral"
 };
 var DEFAULT_TONE_MAPPING_MODE = "none";
-var TONE_MAPPING_CONSTANTS = {
-  none: NoToneMapping,
-  agx: AgXToneMapping,
-  aces: ACESFilmicToneMapping,
-  neutral: NeutralToneMapping
-};
 function isToneMappingMode(value) {
-  return typeof value === "string" && Object.prototype.hasOwnProperty.call(TONE_MAPPING_CONSTANTS, value);
-}
-function resolveToneMapping(mode) {
-  if (isToneMappingMode(mode)) {
-    return TONE_MAPPING_CONSTANTS[mode];
-  }
-  return TONE_MAPPING_CONSTANTS[DEFAULT_TONE_MAPPING_MODE];
+  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
-import { Fragment as Fragment3, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef5 } from "react";
-import { useFrame } from "@react-three/fiber";
-import { useShallow as useShallow6 } from "zustand/react/shallow";
-import {
-  AdditiveBlending,
-  Color,
-  EdgesGeometry,
-  LineBasicMaterial,
-  Matrix4,
-  Quaternion,
-  Vector3
-} from "three";
-import { jsx as jsx6 } from "react/jsx-runtime";
-function SelectionGlowEffect({
-  enabled = false,
-  color = "#ff1010",
-  opacity = 0.9,
-  thresholdAngle = 2
-}) {
-  const selections = useVizijStore(
-    useShallow6(
-      (state) => enabled ? state.elementSelection ?? [] : []
-    )
-  );
-  if (!enabled || selections.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx6(Fragment3, { children: selections.map((selection) => /* @__PURE__ */ jsx6(
-    SelectionOutline,
-    {
-      selection,
-      color: selection.color ?? color,
-      opacity,
-      thresholdAngle
-    },
-    `${selection.namespace}:${selection.id}`
-  )) });
-}
-function SelectionOutline({
-  selection,
-  color,
-  opacity,
-  thresholdAngle
-}) {
-  const target = useVizijStore(
-    useShallow6((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 = useMemo5(() => {
-    if (!target.geometry) return null;
-    const edges = new EdgesGeometry(target.geometry, thresholdAngle);
-    return edges;
-  }, [target.geometry, thresholdAngle]);
-  useEffect6(() => () => edgesGeometry?.dispose(), [edgesGeometry]);
-  const material = useMemo5(() => {
-    const mat = new LineBasicMaterial({
-      color: new Color(color),
-      transparent: true,
-      opacity,
-      blending: AdditiveBlending,
-      depthTest: false,
-      depthWrite: false,
-      toneMapped: false
-    });
-    return mat;
-  }, [color, opacity]);
-  useEffect6(() => () => material.dispose(), [material]);
-  const lineRef = useRef5(null);
-  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__ */ jsx6(
-    "lineSegments",
-    {
-      ref: lineRef,
-      geometry: edgesGeometry,
-      material,
-      frustumCulled: false,
-      renderOrder: 1e3
-    }
-  );
-}
-var tempMatrix = new Matrix4();
-var tempPosition = new Vector3();
-var tempQuaternion = new Quaternion();
-var tempScale = new 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
+import { createContext } from "react";
+var VizijContext = createContext(null);
-// src/vizij.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-Object3D4.DEFAULT_UP.set(0, 0, 1);
-function Vizij({
-  style,
-  className,
-  rootId,
-  namespace = "default",
-  showSafeArea = false,
-  showSelectionGlow = false,
-  toneMapping = "none",
-  onPointerMissed
-}) {
-  const ctx = useContext3(VizijContext);
-  useEffect7(() => {
-    recordRenderCounter("canvasMountCount");
-    recordRenderCounter("mountedCanvasCount");
-    return () => {
-      recordRenderCounter("mountedCanvasCount", -1);
-    };
-  }, []);
-  if (ctx) {
-    return /* @__PURE__ */ jsx7(
-      Canvas,
-      {
-        shadows: false,
-        style,
-        className,
-        onPointerMissed,
-        gl: {
-          outputColorSpace: SRGBColorSpace,
-          antialias: true
-        },
-        children: /* @__PURE__ */ jsx7(
-          MemoizedInnerVizij,
-          {
-            rootId,
-            namespace,
-            showSafeArea,
-            showSelectionGlow,
-            toneMapping
-          }
-        )
-      }
-    );
-  } else {
-    return /* @__PURE__ */ jsx7(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ jsx7(
-      Canvas,
-      {
-        style,
-        className,
-        onPointerMissed,
-        gl: {
-          outputColorSpace: SRGBColorSpace,
-          antialias: true
-        },
-        children: /* @__PURE__ */ jsx7(
-          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__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx7("ambientLight", { intensity: Math.PI / 2 }),
-    /* @__PURE__ */ jsx7(ToneMappingController, { mode: toneMapping }),
-    /* @__PURE__ */ jsx7(
-      OrthographicCamera,
-      {
-        makeDefault: true,
-        position: [0, 0, 100],
-        near: 0.1,
-        far: 1e3
-      }
-    ),
-    /* @__PURE__ */ jsx7(Suspense, { fallback: null, children: /* @__PURE__ */ jsx7(
-      World,
-      {
-        rootId,
-        namespace,
-        parentSizing: sceneParentSizing
-      }
-    ) }),
-    showSelectionGlow && /* @__PURE__ */ jsx7(SelectionGlowEffect, { enabled: true }),
-    showSafeArea && /* @__PURE__ */ jsx7(SafeAreaRenderer, { rootId })
-  ] });
-}
-var MemoizedInnerVizij = memo6(InnerVizij);
-function ToneMappingController({ mode }) {
-  const gl = useThree((state) => state.gl);
-  const scene = useThree((state) => state.scene);
-  useEffect7(() => {
-    const resolved = resolveToneMapping(mode);
-    if (gl.toneMapping === resolved) {
-      return;
-    }
-    gl.toneMapping = resolved;
-    scene.traverse((object) => {
-      const material = object.material;
-      if (!material) {
-        return;
-      }
-      if (Array.isArray(material)) {
-        material.forEach((mat) => {
-          mat.needsUpdate = true;
-        });
-      } else {
-        material.needsUpdate = true;
-      }
-    });
-  }, [gl, scene, mode]);
-  return null;
-}
-function InnerWorld({
-  rootId,
-  namespace = "default",
-  parentSizing
-}) {
-  const [present, rootBounds] = useVizijStore(
-    useShallow7((state) => {
-      const group = state.world[rootId];
-      const bounds = group?.rootBounds ?? defaultRootBounds;
-      return [group !== void 0, bounds];
-    })
-  );
-  const { camera, size } = useThree((state) => ({
-    camera: state.camera,
-    size: state.size
-  }));
-  useEffect7(() => {
-    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__ */ jsxs4(ErrorBoundary, { fallback: null, children: [
-    present && /* @__PURE__ */ jsx7(Renderable, { id: rootId, namespace, chain: [] }),
-    !present && /* @__PURE__ */ jsx7(
-      Text,
-      {
-        position: [0, 0, 0],
-        color: "white",
-        anchorX: "center",
-        anchorY: "middle",
-        fontSize: 0.7,
-        children: "No Output"
-      }
-    )
-  ] });
-}
-var World = memo6(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__ */ jsx7(
-    Line3,
-    {
-      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
+import { useContext } from "react";
+import { useStore } from "zustand";
+function useVizijStore(selector) {
+  const store = useContext(VizijContext);
+  if (!store) throw new Error("Missing VizijProvider in the tree");
+  return useStore(store, selector);
 }
-var defaultRootBounds = {
-  center: { x: 0, y: 0 },
-  size: { x: 5, y: 4 }
-};
 // src/hooks/use-vizij-store-subscription.ts
-import { useContext as useContext4, useEffect as useEffect8 } from "react";
+import { useContext as useContext2, useEffect as useEffect3 } from "react";
 function useVizijStoreSubscription(selector, listener) {
-  const store = useContext4(VizijContext);
+  const store = useContext2(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
-  useEffect8(() => {
+  useEffect3(() => {
     const initialValue = selector(store.getState());
     listener(initialValue);
     return store.subscribe(selector, listener);
@@ -2189,27 +1003,51 @@ function useVizijStoreSubscription(selector, listener) {
 }
 // src/hooks/use-vizij-store-setter.ts
-import { useContext as useContext5 } from "react";
+import { useContext as useContext3 } from "react";
 function useVizijStoreSetter() {
-  const store = useContext5(VizijContext);
+  const store = useContext3(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.setState;
 }
 // src/hooks/use-vizij-store-getter.ts
-import { useContext as useContext6 } from "react";
+import { useContext as useContext4 } from "react";
 function useVizijStoreGetter() {
-  const store = useContext6(VizijContext);
+  const store = useContext4(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.getState;
 }
 // src/functions/load-gltf.ts
-import * as THREE5 from "three";
+import * as THREE2 from "three";
 import { GLTFLoader, DRACOLoader } from "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
-import * as THREE4 from "three";
+import * as THREE from "three";
 // src/functions/gltf-loading/map-features.ts
 function mapFeatures(features) {
@@ -2234,14 +1072,14 @@ function mapFeatures(features) {
 }
 // src/functions/gltf-loading/import-scene.ts
-import { Object3D as Object3D7 } from "three";
+import { Object3D as Object3D3 } from "three";
 // src/functions/gltf-loading/import-group.ts
-import { Object3D as Object3D6 } from "three";
+import { Object3D as Object3D2 } from "three";
 import { createBrowserSafeId as createBrowserSafeId5 } from "@vizij/utils";
 // src/functions/gltf-loading/import-mesh.ts
-import { Object3D as Object3D5 } from "three";
+import { Object3D } from "three";
 import { createBrowserSafeId as createBrowserSafeId4 } from "@vizij/utils";
 // src/functions/gltf-loading/import-geometry.ts
@@ -2312,7 +1150,7 @@ function importGeometry(geometry, mesh) {
 }
 // src/functions/gltf-loading/import-mesh.ts
-Object3D5.DEFAULT_UP.set(0, 0, 1);
+Object3D.DEFAULT_UP.set(0, 0, 1);
 function importMesh(mesh, colorLookup) {
   let world = {};
   let animatables = {};
@@ -2569,7 +1407,7 @@ function shouldImportAsGroupChild(child) {
 }
 // src/functions/gltf-loading/import-group.ts
-Object3D6.DEFAULT_UP.set(0, 0, 1);
+Object3D2.DEFAULT_UP.set(0, 0, 1);
 function importGroup(group, colorLookup, rootBounds) {
   let world = {};
   let animatables = {};
@@ -2674,7 +1512,7 @@ function shouldImportAsGroupChild2(child) {
 }
 // src/functions/gltf-loading/import-scene.ts
-Object3D7.DEFAULT_UP.set(0, 0, 1);
+Object3D3.DEFAULT_UP.set(0, 0, 1);
 function importScene(scene, rootBounds) {
   let world = {};
   let animatables = {};
@@ -2689,7 +1527,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 = {};
@@ -2784,7 +1622,7 @@ var MATERIAL_NAME_FEATURE_KEYS = [
   "emissiveIntensity",
   "specular"
 ];
-var MATERIAL_NAME_SUFFIXES2 = [
+var MATERIAL_NAME_SUFFIXES = [
   " color",
   " colours",
   " colour",
@@ -2858,7 +1696,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();
     }
@@ -2904,8 +1742,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;
   }
@@ -3432,7 +2296,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;
@@ -3448,14 +2312,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;
   }
@@ -3565,8 +2429,8 @@ async function loadGLTFFromBlobWithBundle(blob, aggressiveImport = false, rootBo
 // src/functions/export.ts
 import { GLTFExporter } from "three-stdlib";
-import * as THREE6 from "three";
-THREE6.Object3D.DEFAULT_UP.set(0, 0, 1);
+import * as THREE3 from "three";
+THREE3.Object3D.DEFAULT_UP.set(0, 0, 1);
 function normalizeExportError(error) {
   if (error instanceof Error) {
     return error;
@@ -3662,14 +2526,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;
   }
@@ -3753,9 +2617,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;
@@ -3784,16 +2648,100 @@ async function exportScene(root, options = {}) {
 }
 // src/functions/build-scene-graph.ts
-import * as THREE7 from "three";
+import * as THREE4 from "three";
 import {
-  instanceOfRawEuler as instanceOfRawEuler5,
-  instanceOfRawHSL as instanceOfRawHSL4,
-  instanceOfRawNumber as instanceOfRawNumber5,
-  instanceOfRawRGB as instanceOfRawRGB4,
-  instanceOfRawVector2 as instanceOfRawVector24,
-  instanceOfRawVector3 as instanceOfRawVector35
+  instanceOfRawEuler,
+  instanceOfRawHSL,
+  instanceOfRawNumber,
+  instanceOfRawRGB,
+  instanceOfRawVector2,
+  instanceOfRawVector3
 } from "@vizij/utils";
-THREE7.Object3D.DEFAULT_UP.set(0, 0, 1);
+// 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) {
@@ -3808,7 +2756,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));
@@ -3824,7 +2772,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, {
@@ -3837,10 +2785,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 (instanceOfRawNumber(value)) object.scale.x = value;
+        },
+        height: (value) => {
+          if (instanceOfRawNumber(value)) object.scale.y = value;
+        }
+      });
+      return object;
+    }
   }
 }
 function animatableOf(animatables, id) {
@@ -3865,28 +2827,28 @@ function applyFeatures(features, animatables, handlers) {
 function groupTransform(object) {
   return {
     translation: (value) => {
-      if (instanceOfRawVector35(value)) {
+      if (instanceOfRawVector3(value)) {
         object.position.set(value.x, value.y, value.z);
-      } else if (instanceOfRawVector24(value)) {
+      } else if (instanceOfRawVector2(value)) {
         object.position.set(value.x, value.y, object.position.z);
       }
     },
     rotation: (value) => {
-      if (instanceOfRawEuler5(value)) {
+      if (instanceOfRawEuler(value)) {
         object.rotation.set(value.x, value.y, value.z, "ZYX");
-      } else if (instanceOfRawNumber5(value)) {
+      } else if (instanceOfRawNumber(value)) {
         object.rotation.set(0, 0, 0);
         object.rotateZ(value);
       }
     },
     scale: (value) => {
-      if (instanceOfRawVector35(value)) {
+      if (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 (instanceOfRawNumber5(value)) {
+      } else if (instanceOfRawNumber(value)) {
         object.scale.set(value, value, value);
       } else {
         object.scale.set(1, 1, 1);
@@ -3897,19 +2859,19 @@ function groupTransform(object) {
 function shapeTransform(object) {
   return {
     translation: (value) => {
-      if (instanceOfRawVector35(value)) {
+      if (instanceOfRawVector3(value)) {
         object.position.set(value.x, value.y, value.z);
       }
     },
     rotation: (value) => {
-      if (instanceOfRawEuler5(value)) {
+      if (instanceOfRawEuler(value)) {
         object.rotation.set(value.x, value.y, value.z, "ZYX");
       }
     },
     scale: (value) => {
-      if (instanceOfRawVector35(value)) {
+      if (instanceOfRawVector3(value)) {
         object.scale.set(value.x, value.y, value.z);
-      } else if (instanceOfRawNumber5(value)) {
+      } else if (instanceOfRawNumber(value)) {
         object.scale.set(value, value, value);
       } else {
         object.scale.set(1, 1, 1);
@@ -3922,7 +2884,7 @@ function materialFactors(material) {
   const phong = material;
   return {
     opacity: (value) => {
-      if (instanceOfRawNumber5(value)) {
+      if (instanceOfRawNumber(value)) {
         material.opacity = value;
         material.transparent = value < 1;
       }
@@ -3931,41 +2893,41 @@ function materialFactors(material) {
       if (!standard.color) {
         return;
       }
-      if (instanceOfRawRGB4(value)) {
+      if (instanceOfRawRGB(value)) {
         standard.color.setRGB(value.r, value.g, value.b);
-      } else if (instanceOfRawVector35(value)) {
+      } else if (instanceOfRawVector3(value)) {
         standard.color.setRGB(value.x, value.y, value.z);
-      } else if (instanceOfRawHSL4(value)) {
+      } else if (instanceOfRawHSL(value)) {
         standard.color.setHSL(value.h, value.s, value.l);
       }
     },
     roughness: (value) => {
-      if (standard.roughness !== void 0 && instanceOfRawNumber5(value)) {
+      if (standard.roughness !== void 0 && instanceOfRawNumber(value)) {
         standard.roughness = value;
       }
     },
     metalness: (value) => {
-      if (standard.metalness !== void 0 && instanceOfRawNumber5(value)) {
+      if (standard.metalness !== void 0 && instanceOfRawNumber(value)) {
         standard.metalness = value;
       }
     },
     shininess: (value) => {
-      if (phong.shininess !== void 0 && instanceOfRawNumber5(value)) {
+      if (phong.shininess !== void 0 && instanceOfRawNumber(value)) {
         phong.shininess = value;
       }
     },
     emissive: (value) => {
-      if (standard.emissive && instanceOfRawRGB4(value)) {
+      if (standard.emissive && instanceOfRawRGB(value)) {
         standard.emissive.setRGB(value.r, value.g, value.b);
       }
     },
     emissiveIntensity: (value) => {
-      if (standard.emissiveIntensity !== void 0 && instanceOfRawNumber5(value)) {
+      if (standard.emissiveIntensity !== void 0 && instanceOfRawNumber(value)) {
         standard.emissiveIntensity = value;
       }
     },
     specular: (value) => {
-      if (phong.specular && instanceOfRawRGB4(value)) {
+      if (phong.specular && instanceOfRawRGB(value)) {
         phong.specular.setRGB(value.r, value.g, value.b);
       }
     }
@@ -3985,7 +2947,7 @@ function morphWeights(object, shape) {
     targets.map((target, index) => [
       target,
       (value) => {
-        if (instanceOfRawNumber5(value)) {
+        if (instanceOfRawNumber(value)) {
           influences[index] = value;
         }
       }
@@ -3993,18 +2955,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"];
@@ -4052,15 +3014,16 @@ function authoredDefault(animatable) {
 export {
   DEFAULT_TONE_MAPPING_MODE,
   EmptyModelError,
-  InnerVizij,
   ShapeMaterial,
   TONE_MAPPING_LABELS,
   TONE_MAPPING_MODES,
   Vizij,
+  VizijCanvas,
   VizijContext,
   VizijSlice,
   applyVizijBundle,
   buildSceneGraph,
+  canvasMounted,
   createVizijStore,
   deriveMorphFeatureKeys,
   deriveRootBounds,
@@ -4075,10 +3038,9 @@ export {
   parseGlbJsonChunk,
   patchGlbJson,
   patchVizijBundleMetadata,
-  resolveToneMapping,
   sanitizeMorphKey,
+  setVizijProgress,
   useDefaultVizijStore,
-  useFeatures,
   useVizijStore,
   useVizijStoreGetter,
   useVizijStoreSetter,