@vizij/render 1.0.1 → 3.0.0

package/dist/index.mjs

@@ -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);
-
-// 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";
-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";
-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;
-        }
-      }
-    },
-    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
-          );
-        }
-      }
-    }
+async function mountOnce(shown, options) {
+  const unfollow = onInitProgress((progress) => {
+    setRuntimeStage(progress.stage === "ready" ? { stage: "mount" } : progress);
   });
-  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
-}) {
-  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)
-      },
-      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
-          );
-        }
-      }
-    }
+  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)
+    );
   });
-  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 asError(error) {
+  return error instanceof Error ? error : new Error(String(error));
 }
-function extractMaterialName(name) {
-  if (!name) {
-    return void 0;
+function pageCanvas() {
+  if (!canvas) {
+    canvas = document.createElement("canvas");
+    canvas.style.display = "block";
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
   }
-  const trimmed = name.trim();
-  if (!trimmed) {
-    return void 0;
+  return canvas;
+}
+var view = { placeVizij, 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;
   }
-  const lowered = trimmed.toLowerCase();
-  for (const suffix of MATERIAL_NAME_SUFFIXES) {
-    if (lowered.endsWith(suffix)) {
-      return trimmed.slice(0, trimmed.length - suffix.length).trim();
+}
+function addSlot(slot) {
+  slots.add(slot);
+  return () => {
+    slots.delete(slot);
+    if (live) {
+      placeVizij(slot.vizijId, { x: 0, y: 0, width: 0, height: 0 });
     }
-  }
-  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
-}) {
-  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 userData = useMemo4(
-    () => ({
-      gltfExtensions: {
-        RobotData: createStoredRenderable(shape, animatableValues)
-      },
-      selection: selectionData
-    }),
-    [shape, animatableValues, selectionData]
-  );
-  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,
-    {
-      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;
+// src/page/vizij.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import {
+  setSelection,
+  setView
+} from "@vizij/runtime";
+
+// src/page/loading.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function describeLoading(stage) {
+  return {
+    stage,
+    label: loadingLabel(stage),
+    fraction: loadingFraction(stage)
+  };
+}
+function loadingLabel(stage) {
+  switch (stage.stage) {
+    case "download":
+      return withBytes("Downloading the runtime", stage.loaded, stage.total);
+    case "compile":
+      return "Compiling the runtime";
+    case "start":
+      return "Starting the runtime";
+    case "mount":
+      return "Starting the view";
+    case "fetch":
+      return withBytes("Loading the face", stage.loaded, stage.total);
+    case "load":
+      return "Loading the face";
+    case "draw":
+      return "Drawing the face";
+    case "failed":
+      return "Loading failed";
+  }
+}
+function loadingFraction(stage) {
+  if (stage.stage !== "download" && stage.stage !== "fetch") return null;
+  if (stage.total === null || stage.total <= 0) return null;
+  return Math.min(1, Math.max(0, stage.loaded / stage.total));
+}
+function withBytes(what, loaded, total) {
+  if (total === null) {
+    return loaded > 0 ? `${what}: ${megabytes(loaded)} MB` : what;
+  }
+  return `${what}: ${megabytes(loaded)} of ${megabytes(total)} MB`;
+}
+function megabytes(bytes) {
+  return (bytes / 1e6).toFixed(1);
+}
+var INDETERMINATE_CSS = `
+@keyframes vizij-loading-slide {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+[data-vizij-loading-indeterminate] {
+  animation: vizij-loading-slide 1.4s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-vizij-loading-indeterminate] { animation: none; }
+}
+`;
+function DefaultLoadingImage() {
+  return /* @__PURE__ */ 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"
         }
-      },
-      specular: (value) => {
-        const phong = material.current;
-        if (phong?.specular && instanceOfRawRGB3(value)) {
-          phong.specular.setRGB(value.r, value.g, value.b);
-          phong.needsUpdate = true;
+      ),
+      /* @__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"
         }
-      },
-      ...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);
-    },
-    [setHoveredElement]
-  );
-  return /* @__PURE__ */ jsxs3(
-    "mesh",
+      )
+    ] })
+  ] });
+}
+function DefaultLoading({
+  loading,
+  image
+}) {
+  const { stage, label, fraction } = loading;
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      ref,
-      userData,
-      castShadow: true,
-      receiveShadow: true,
-      up: [0, 0, 1],
-      geometry,
-      morphTargetDictionary: morphTargetSettings[0],
-      morphTargetInfluences: morphTargetSettings[1],
-      onPointerOver: handlePointerOver,
-      onPointerOut: handlePointerOut,
-      onClick: (e) => {
-        console.log("Clicked element", shape);
-        onElementClick({ id, type: "shape", namespace }, [...chain, id], e);
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 12,
+        font: "13px/1.4 system-ui, sans-serif",
+        textAlign: "center"
       },
       children: [
-        shape.material === "basic" && /* @__PURE__ */ 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
-        ))
+        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 })
+        ] })
       ]
     }
   );
 }
-var RenderedShape = memo4(InnerRenderedShape);
 
-// src/renderables/renderable.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function InnerRenderable({
-  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 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,
+  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 selected = selection === void 0 ? null : JSON.stringify(selection);
+  useEffect2(
+    () => selected === null ? void 0 : onceMounted(() => setSelection(vizijId, JSON.parse(selected))),
+    [vizijId, selected]
+  );
+  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",
+    {
+      ref: element,
+      className,
+      style,
+      "data-vizij-id": vizijId,
+      children: (showSafeArea || loadingView !== null) && /* @__PURE__ */ jsxs2(
+        "div",
         {
-          id,
-          namespace,
-          chain
-        },
-        key
-      );
-    case "shape":
-      return /* @__PURE__ */ jsx5(RenderedShape, { id, namespace, chain }, key);
-    default:
-      return null;
-  }
+          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"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+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();
+    },
+    () => void 0
+  );
+  return () => {
+    current = false;
+  };
 }
-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,21 +755,12 @@ 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) {
-            if (value(current !== void 0)) {
-              state.values.set(lookupId, value(current));
-            }
-          } else {
-            const animatableLookup = state.animatables[id];
-            const updatedValue = value(
-              animatableLookup !== void 0 ? animatableLookup.default : void 0
-            );
-            if (updatedValue !== void 0) {
-              state.values.set(lookupId, updatedValue);
-            }
+          const current = state.values.get(lookupId) ?? state.animatables[id]?.default;
+          const updatedValue = value(current);
+          if (updatedValue !== void 0) {
+            state.values.set(lookupId, updatedValue);
           }
         } else {
           state.values.set(lookupId, value);
@@ -1597,7 +775,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 +903,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 +911,6 @@ var VizijSlice = (set, get) => ({
   },
   addWorldElements(world, animatables, replace) {
     if (replace) {
-      recordRenderCounter("rootReplacementCount");
       set({ world, animatables });
     } else {
       set((state) => ({
@@ -1775,14 +923,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 +948,6 @@ var ShapeMaterial = /* @__PURE__ */ ((ShapeMaterial2) => {
 })(ShapeMaterial || {});
 
 // src/types/tone-mapping.ts
-import {
-  ACESFilmicToneMapping,
-  AgXToneMapping,
-  NeutralToneMapping,
-  NoToneMapping
-} from "three";
 var TONE_MAPPING_MODES = [
   "none",
   "agx",
@@ -1825,363 +959,34 @@ var TONE_MAPPING_LABELS = {
   agx: "AgX (Blender)",
   aces: "ACES Filmic",
   neutral: "Neutral"
-};
-var DEFAULT_TONE_MAPPING_MODE = "none";
-var TONE_MAPPING_CONSTANTS = {
-  none: NoToneMapping,
-  agx: AgXToneMapping,
-  aces: ACESFilmicToneMapping,
-  neutral: NeutralToneMapping
-};
-function isToneMappingMode(value) {
-  return typeof value === "string" && Object.prototype.hasOwnProperty.call(TONE_MAPPING_CONSTANTS, value);
-}
-function resolveToneMapping(mode) {
-  if (isToneMappingMode(mode)) {
-    return TONE_MAPPING_CONSTANTS[mode];
-  }
-  return TONE_MAPPING_CONSTANTS[DEFAULT_TONE_MAPPING_MODE];
-}
-function normalizeToneMappingMode(value) {
-  return isToneMappingMode(value) ? value : DEFAULT_TONE_MAPPING_MODE;
-}
-
-// src/effects/selection-glow-effect.tsx
-import { Fragment as 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/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 DEFAULT_TONE_MAPPING_MODE = "none";
+function isToneMappingMode(value) {
+  return typeof value === "string" && TONE_MAPPING_MODES.includes(value);
 }
-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
-    }
-  );
+function normalizeToneMappingMode(value) {
+  return isToneMappingMode(value) ? value : DEFAULT_TONE_MAPPING_MODE;
+}
+
+// src/context.ts
+import { createContext } from "react";
+var VizijContext = createContext(null);
+
+// 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 +994,59 @@ 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/empty-model-error.ts
+var EmptyModelError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "EmptyModelError";
+  }
+};
 
 // src/functions/gltf-loading/map-features.ts
 function mapFeatures(features) {
@@ -2234,14 +1071,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 +1149,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 +1406,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 +1511,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 +1526,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 = {};
@@ -2763,7 +1600,9 @@ function traverseThree(group, aggressiveImport = false, rootBounds) {
   } else {
     const derivedRootBounds = rootBounds ?? deriveRootBounds(group);
     if (!derivedRootBounds) {
-      throw new Error("Root bounds are expected if using an aggressive import");
+      throw new EmptyModelError(
+        "The GLB has no RobotData and no mesh, ellipse or rectangle to import"
+      );
     }
     const [newWorldData, newAnimatableData] = importScene(
       group,
@@ -2784,7 +1623,7 @@ var MATERIAL_NAME_FEATURE_KEYS = [
   "emissiveIntensity",
   "specular"
 ];
-var MATERIAL_NAME_SUFFIXES2 = [
+var MATERIAL_NAME_SUFFIXES = [
   " color",
   " colours",
   " colour",
@@ -2858,7 +1697,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();
     }
@@ -2868,44 +1707,69 @@ function stripMaterialSuffixes(name) {
 function isStoredAnimatedFeature(feature) {
   return Boolean(feature) && typeof feature === "object" && feature.animated === true && "value" in feature;
 }
-function isGroupFeatures(value) {
+var TRANSFORM = [
+  ["translation", ["x", "y", "z"]],
+  ["rotation", ["r", "p", "y"]]
+];
+var REQUIRED_FEATURES = {
+  group: TRANSFORM,
+  shape: TRANSFORM,
+  ellipse: [...TRANSFORM, ["width", []], ["height", []]],
+  rectangle: [...TRANSFORM, ["width", []], ["height", []]]
+};
+function assertRequiredFeatures(kind, value) {
   if (!value || typeof value !== "object") {
     throw new Error("Expected object");
   }
-  if (!["translation", "rotation"].every((key) => key in value)) {
-    throw new Error("Expected translation and rotation keys in features");
+  const missing = REQUIRED_FEATURES[kind].filter(
+    ([name, axes]) => !(name in value) && !axes.some((axis) => `${name}.${axis}` in value)
+  ).map(([name]) => name);
+  if (missing.length > 0) {
+    throw new Error(
+      `An element of type ${kind} lacks ${missing.join(", ")} in its features`
+    );
   }
 }
+function isGroupFeatures(value) {
+  assertRequiredFeatures("group", value);
+}
 function isShapeFeatures(value) {
-  if (!value || typeof value !== "object") {
-    throw new Error("Expected object");
-  }
-  if (!["translation", "rotation"].every((key) => key in value)) {
-    throw new Error("Expected translation and rotation keys in features");
-  }
+  assertRequiredFeatures("shape", value);
 }
 function isEllipseFeatures(value) {
-  if (!value || typeof value !== "object") {
-    throw new Error("Expected object");
-  }
-  if (!["translation", "rotation", "height", "width"].every((key) => key in value)) {
-    throw new Error(
-      "Expected translation, rotation, width, and height keys in features"
-    );
-  }
+  assertRequiredFeatures("ellipse", value);
 }
 function isRectangleFeatures(value) {
-  if (!value || typeof value !== "object") {
-    throw new Error("Expected object");
-  }
-  if (!["translation", "rotation", "height", "width"].every((key) => key in value)) {
-    throw new Error(
-      "Expected translation, rotation, width, and height keys in features"
-    );
-  }
+  assertRequiredFeatures("rectangle", 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,30 +2296,24 @@ 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;
 var GLB_CHUNK_HEADER_BYTES = 8;
 var GLB_JSON_CHUNK_TYPE = 1313821514;
-var EmptyModelError = class extends Error {
-  constructor(message) {
-    super(message);
-    this.name = "EmptyModelError";
-  }
-};
 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 +2423,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 +2520,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 +2611,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;
@@ -3783,17 +2641,171 @@ async function exportScene(root, options = {}) {
   return sanitizeExportedGlb(gltf, root.name?.trim() || void 0);
 }
 
+// src/functions/export-animation.ts
+import {
+  AnimationClip,
+  NumberKeyframeTrack,
+  QuaternionKeyframeTrack,
+  VectorKeyframeTrack
+} from "three";
+function findByName(root, name) {
+  let found = null;
+  root.traverse((child) => {
+    if (!found && child.name === name) {
+      found = child;
+    }
+  });
+  return found;
+}
+function parseMorphTargetName(trackName) {
+  const match = /\.morphTargetInfluences\[(.+)\]$/.exec(trackName);
+  return match ? match[1] : null;
+}
+function createExportAnimation(options) {
+  const { name, duration, tracks, root } = options;
+  const issues = [];
+  const built = [];
+  for (const spec of tracks) {
+    const node = findByName(root, spec.elementName);
+    if (!node) {
+      issues.push({
+        trackName: spec.name,
+        reason: "node-not-found",
+        detail: spec.elementName
+      });
+      continue;
+    }
+    if (spec.values.length !== spec.times.length * spec.stride) {
+      issues.push({
+        trackName: spec.name,
+        reason: "bad-stride",
+        detail: `${spec.values.length} values for ${spec.times.length} times at stride ${spec.stride}`
+      });
+      continue;
+    }
+    if (spec.property === "morphTargetInfluences") {
+      const morphName = parseMorphTargetName(spec.name);
+      const dictionary = node.morphTargetDictionary;
+      if (!morphName || !dictionary || !(morphName in dictionary)) {
+        issues.push({
+          trackName: spec.name,
+          reason: "morph-target-not-found",
+          detail: morphName ?? void 0
+        });
+        continue;
+      }
+      built.push(new NumberKeyframeTrack(spec.name, spec.times, spec.values));
+      continue;
+    }
+    if (spec.property === "quaternion") {
+      built.push(
+        new QuaternionKeyframeTrack(spec.name, spec.times, spec.values)
+      );
+      continue;
+    }
+    built.push(new VectorKeyframeTrack(spec.name, spec.times, spec.values));
+  }
+  if (built.length === 0) {
+    return { animation: null, issues };
+  }
+  return { animation: new AnimationClip(name, duration, built), issues };
+}
+
 // 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,10 +2820,13 @@ 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));
+      applyFeatures(entry.features, animatables, {
+        ...groupTransform(object),
+        ...perAxisTransform(object, { scale: true })
+      });
       for (const child of entry.children) {
         object.add(buildSceneGraph(world, animatables, child));
       }
@@ -3824,12 +2839,14 @@ 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, {
         ...shapeTransform(object),
+        ...perAxisTransform(object, { scale: true }),
         ...materialFactors(material),
+        ...perAxisMaterialFactors(material),
         ...morphWeights(object, entry)
       });
       for (const child of entry.children ?? []) {
@@ -3837,10 +2854,25 @@ 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,
+        ...perAxisTransform(object, { scale: false }),
+        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 +2897,29 @@ 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)) {
-        object.rotation.set(value.x, value.y, value.z, "ZYX");
-      } else if (instanceOfRawNumber5(value)) {
+      const euler = eulerOf(value);
+      if (euler) {
+        object.rotation.set(...euler, "ZYX");
+      } 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 +2930,20 @@ 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)) {
-        object.rotation.set(value.x, value.y, value.z, "ZYX");
+      const euler = eulerOf(value);
+      if (euler) {
+        object.rotation.set(...euler, "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);
@@ -3917,12 +2951,64 @@ function shapeTransform(object) {
     }
   };
 }
+function eulerOf(value) {
+  if (instanceOfRawEuler(value)) {
+    return [value.x, value.y, value.z];
+  }
+  const rpy = value;
+  if (rpy !== null && typeof rpy === "object" && typeof rpy.r === "number" && typeof rpy.p === "number" && typeof rpy.y === "number") {
+    return [rpy.r, rpy.p, rpy.y];
+  }
+  return void 0;
+}
+function perAxis(name, axes, set) {
+  return Object.fromEntries(
+    axes.map((axis, index) => [
+      `${name}.${axis}`,
+      (value) => {
+        if (instanceOfRawNumber(value)) {
+          set(index, value);
+        }
+      }
+    ])
+  );
+}
+function perAxisTransform(object, { scale }) {
+  return {
+    ...perAxis("translation", ["x", "y", "z"], (index, value) => {
+      object.position.setComponent(index, value);
+    }),
+    ...perAxis("rotation", ["r", "p", "y"], (index, value) => {
+      const euler = [object.rotation.x, object.rotation.y, object.rotation.z];
+      euler[index] = value;
+      object.rotation.set(euler[0], euler[1], euler[2], "ZYX");
+    }),
+    ...scale ? perAxis("scale", ["x", "y", "z"], (index, value) => {
+      object.scale.setComponent(index, value);
+    }) : {}
+  };
+}
+function perAxisMaterialFactors(material) {
+  const standard = material;
+  const phong = material;
+  const channels = ["r", "g", "b"];
+  const component = (color) => (index, value) => {
+    if (color) {
+      color[channels[index]] = value;
+    }
+  };
+  return {
+    ...perAxis("color", channels, component(standard.color)),
+    ...perAxis("emissive", channels, component(standard.emissive)),
+    ...perAxis("specular", channels, component(phong.specular))
+  };
+}
 function materialFactors(material) {
   const standard = material;
   const phong = material;
   return {
     opacity: (value) => {
-      if (instanceOfRawNumber5(value)) {
+      if (instanceOfRawNumber(value)) {
         material.opacity = value;
         material.transparent = value < 1;
       }
@@ -3931,41 +3017,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 +3071,7 @@ function morphWeights(object, shape) {
     targets.map((target, index) => [
       target,
       (value) => {
-        if (instanceOfRawNumber5(value)) {
+        if (instanceOfRawNumber(value)) {
           influences[index] = value;
         }
       }
@@ -3993,18 +3079,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 +3138,17 @@ function authoredDefault(animatable) {
 export {
   DEFAULT_TONE_MAPPING_MODE,
   EmptyModelError,
-  InnerVizij,
   ShapeMaterial,
   TONE_MAPPING_LABELS,
   TONE_MAPPING_MODES,
   Vizij,
+  VizijCanvas,
   VizijContext,
   VizijSlice,
   applyVizijBundle,
   buildSceneGraph,
+  canvasMounted,
+  createExportAnimation,
   createVizijStore,
   deriveMorphFeatureKeys,
   deriveRootBounds,
@@ -4075,10 +3163,9 @@ export {
   parseGlbJsonChunk,
   patchGlbJson,
   patchVizijBundleMetadata,
-  resolveToneMapping,
   sanitizeMorphKey,
+  setVizijProgress,
   useDefaultVizijStore,
-  useFeatures,
   useVizijStore,
   useVizijStoreGetter,
   useVizijStoreSetter,