@vizij/render 0.0.3 → 0.0.4

package/dist/index.js

@@ -30,7 +30,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  Controller: () => Controller,
   EmptyModelError: () => EmptyModelError,
   InnerVizij: () => InnerVizij,
   ShapeMaterial: () => ShapeMaterial,
@@ -55,12 +54,17 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/controllers/controller.tsx
-var import_react3 = require("react");
-var import_shallow = require("zustand/react/shallow");
-var import_clsx = require("clsx");
-var import_utils = require("@vizij/utils");
-var import_ui = require("@semio/ui");
+// src/vizij.tsx
+var import_react10 = require("react");
+var import_react_error_boundary = require("react-error-boundary");
+var import_three = require("three");
+var import_fiber = require("@react-three/fiber");
+var import_drei3 = require("@react-three/drei");
+var import_shallow7 = require("zustand/react/shallow");
+
+// src/renderables/renderable.tsx
+var import_react8 = require("react");
+var import_shallow6 = require("zustand/react/shallow");
 
 // src/hooks/use-vizij-store.ts
 var import_react2 = require("react");
@@ -77,217 +81,20 @@ function useVizijStore(selector) {
   return (0, import_zustand.useStore)(store, selector);
 }
 
-// src/controllers/controller.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function InnerController({
-  animatableId,
-  namespace,
-  subfield,
-  className
-}) {
-  const setValue = useVizijStore((0, import_shallow.useShallow)((state) => state.setValue));
-  const animatable = useVizijStore(
-    (0, import_shallow.useShallow)((state) => state.animatables[animatableId])
-  );
-  const lookupId = (0, import_utils.getLookup)(namespace ?? "default", animatableId);
-  const rawValue = useVizijStore(
-    (0, import_shallow.useShallow)((state) => state.values.get(lookupId))
-  );
-  if (animatable.type === "number") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.clsx)("flex flex-col w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ui.SliderNumberField,
-      {
-        size: import_ui.Size.Sm,
-        value: rawValue ?? animatable.default,
-        onChange: (v) => {
-          setValue(animatableId, namespace ?? "default", v);
-        },
-        min: animatable.constraints.min,
-        max: animatable.constraints.max
-      }
-    ) });
-  } else if (animatable.type === "vector3" && !subfield) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.clsx)("flex flex-col gap-2", className), children: ["x", "y", "z"].map((axis) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        InnerController,
-        {
-          animatableId,
-          namespace,
-          subfield: axis
-        },
-        axis
-      );
-    }) });
-  } else if (animatable.type === "vector2" && !subfield) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.clsx)("flex flex-col gap-2", className), children: ["x", "y"].map((axis) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        InnerController,
-        {
-          animatableId,
-          namespace,
-          subfield: axis
-        },
-        axis
-      );
-    }) });
-  } else if (animatable.type === "euler" && !subfield) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.clsx)("flex flex-col gap-2", className), children: ["x", "y", "z"].map((axis) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        InnerController,
-        {
-          animatableId,
-          namespace,
-          subfield: axis
-        },
-        axis
-      );
-    }) });
-  } else if (animatable.type === "rgb" && !subfield) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.clsx)("flex flex-col gap-2", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ui.ColorPickerPopover,
-      {
-        value: rawValue ? convertRGBRange(rawValue, "255") : convertRGBRange(animatable.default, "255"),
-        onChange: (v) => {
-          setValue(
-            animatableId,
-            namespace ?? "default",
-            convertRGBRange(v, "1")
-          );
-        }
-      }
-    ) });
-  } else if (animatable.type === "vector3" && subfield && ["x", "y", "z"].includes(subfield)) {
-    const axis = subfield;
-    const currentVec = rawValue ?? animatable.default;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ui.SliderNumberField,
-      {
-        label: axis,
-        size: import_ui.Size.Sm,
-        value: currentVec[axis],
-        onChange: (v) => {
-          setValue(animatableId, namespace ?? "default", {
-            ...currentVec,
-            [axis]: v
-          });
-        },
-        min: animatable.constraints.min?.[vectorIndexLookup[axis]] ?? void 0,
-        max: animatable.constraints.max?.[vectorIndexLookup[axis]] ?? void 0
-      }
-    );
-  } else if (animatable.type === "vector2" && subfield && ["x", "y"].includes(subfield)) {
-    const axis = subfield;
-    const currentVec = rawValue ?? animatable.default;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ui.SliderNumberField,
-      {
-        label: axis,
-        size: import_ui.Size.Sm,
-        value: currentVec[axis],
-        onChange: (v) => {
-          setValue(animatableId, namespace ?? "default", {
-            ...currentVec,
-            [axis]: v
-          });
-        },
-        min: animatable.constraints.min?.[vectorIndexLookup[axis]] ?? void 0,
-        max: animatable.constraints.max?.[vectorIndexLookup[axis]] ?? void 0
-      }
-    );
-  } else if (animatable.type === "euler" && subfield && ["x", "y", "z"].includes(subfield)) {
-    const axis = subfield;
-    const currentVec = rawValue ?? animatable.default;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ui.SliderNumberField,
-      {
-        label: axis,
-        size: import_ui.Size.Sm,
-        value: currentVec[axis],
-        onChange: (v) => {
-          setValue(animatableId, namespace ?? "default", {
-            ...currentVec,
-            [axis]: v
-          });
-        },
-        min: animatable.constraints.min?.[vectorIndexLookup[axis]] ?? void 0,
-        max: animatable.constraints.max?.[vectorIndexLookup[axis]] ?? void 0
-      }
-    );
-  } else if (animatable.type === "rgb" && subfield && ["r", "g", "b"].includes(subfield)) {
-    const axis = subfield;
-    const currentVec = rawValue ?? animatable.default;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ui.SliderNumberField,
-      {
-        label: axis,
-        size: import_ui.Size.Sm,
-        value: currentVec[axis],
-        strictText: true,
-        strictSlider: true,
-        onChange: (v) => {
-          setValue(animatableId, namespace ?? "default", {
-            ...currentVec,
-            [axis]: v
-          });
-        },
-        min: animatable.constraints.min?.[vectorIndexLookup[axis]] ?? void 0,
-        max: animatable.constraints.max?.[vectorIndexLookup[axis]] ?? void 0
-      }
-    );
-  }
-}
-var Controller = (0, import_react3.memo)(InnerController);
-var vectorIndexLookup = {
-  x: 0,
-  y: 1,
-  z: 2,
-  r: 0,
-  g: 1,
-  b: 2
-};
-var convertRGBRange = (color, to) => {
-  if (to === "255") {
-    return {
-      r: color.r * 255,
-      g: color.g * 255,
-      b: color.b * 255
-    };
-  } else if (to === "1") {
-    return {
-      r: color.r / 255,
-      g: color.g / 255,
-      b: color.b / 255
-    };
-  }
-  return color;
-};
-
-// src/vizij.tsx
-var import_react11 = require("react");
-var import_react_error_boundary = require("react-error-boundary");
-var import_three = require("three");
-var import_fiber = require("@react-three/fiber");
-var import_drei3 = require("@react-three/drei");
-var import_shallow8 = require("zustand/react/shallow");
-
-// src/renderables/renderable.tsx
-var import_react9 = require("react");
-var import_shallow7 = require("zustand/react/shallow");
-
 // src/renderables/group.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var THREE = __toESM(require("three"));
-var import_shallow3 = require("zustand/react/shallow");
-var import_utils3 = require("@vizij/utils");
+var import_shallow2 = require("zustand/react/shallow");
+var import_utils2 = require("@vizij/utils");
 
 // src/hooks/use-features.ts
-var import_react4 = require("react");
-var import_shallow2 = require("zustand/shallow");
-var import_utils2 = require("@vizij/utils");
+var import_react3 = require("react");
+var import_shallow = require("zustand/shallow");
+var import_utils = require("@vizij/utils");
 function useFeatures(namespace, features, callbacks, debugInfo) {
-  const store = (0, import_react4.useContext)(VizijContext);
+  const store = (0, import_react3.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const unsubsribes = [];
     Object.keys(callbacks).forEach((key) => {
       if (!(key in features)) {
@@ -313,11 +120,11 @@ function useFeatures(namespace, features, callbacks, debugInfo) {
           }
         };
         const defaultValue = animatableValueInfo.default;
-        const lookupKey = (0, import_utils2.getLookup)(namespace, animatableValueInfo.id);
+        const lookupKey = (0, import_utils.getLookup)(namespace, animatableValueInfo.id);
         const unsubscribe = store.subscribe(
           (state) => state.values.get(lookupKey) ?? defaultValue,
           cb,
-          { equalityFn: import_shallow2.shallow, fireImmediately: true }
+          { equalityFn: import_shallow.shallow, fireImmediately: true }
         );
         unsubsribes.push(unsubscribe);
       }
@@ -360,21 +167,21 @@ function createStoredRenderable(data, animatableValues) {
 }
 
 // src/renderables/group.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
 function InnerRenderedGroup({
   id,
   namespace,
   chain
 }) {
-  const ref = (0, import_react5.useRef)();
-  const group = useVizijStore((0, import_shallow3.useShallow)((state) => state.world[id]));
+  const ref = (0, import_react4.useRef)();
+  const group = useVizijStore((0, import_shallow2.useShallow)((state) => state.world[id]));
   const refIsNull = !group.refs[namespace]?.current;
-  const animatables = useVizijStore((0, import_shallow3.useShallow)((state) => state.animatables));
+  const animatables = useVizijStore((0, import_shallow2.useShallow)((state) => state.animatables));
   const setHoveredElement = useVizijStore(
-    (0, import_shallow3.useShallow)((state) => state.setHoveredElement)
+    (0, import_shallow2.useShallow)((state) => state.setHoveredElement)
   );
-  const animatableValues = (0, import_react5.useMemo)(() => {
+  const animatableValues = (0, import_react4.useMemo)(() => {
     const av = {};
     Object.values(group.features).forEach((feat) => {
       if (feat.animated) {
@@ -391,33 +198,33 @@ function InnerRenderedGroup({
   };
   useFeatures(namespace, group.features, {
     translation: (pos) => {
-      if (ref.current?.position && (0, import_utils3.instanceOfRawVector3)(pos)) {
+      if (ref.current?.position && (0, import_utils2.instanceOfRawVector3)(pos)) {
         ref.current.position.set(
           pos.x,
           pos.y,
           pos.z
         );
-      } else if (ref.current?.position && (0, import_utils3.instanceOfRawVector2)(pos)) {
+      } else if (ref.current?.position && (0, import_utils2.instanceOfRawVector2)(pos)) {
         const currentZ = ref.current.position.z;
         ref.current.position.set(pos.x, pos.y, currentZ);
       }
     },
     rotation: (rot) => {
-      if (ref.current?.rotation && (0, import_utils3.instanceOfRawEuler)(rot)) {
+      if (ref.current?.rotation && (0, import_utils2.instanceOfRawEuler)(rot)) {
         ref.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (ref.current?.rotation && (0, import_utils3.instanceOfRawNumber)(rot)) {
+      } else if (ref.current?.rotation && (0, import_utils2.instanceOfRawNumber)(rot)) {
         ref.current.rotation.set(0, 0, 0);
         ref.current.rotateZ(rot);
       }
     },
     scale: (scale) => {
-      if (ref.current?.scale && (0, import_utils3.instanceOfRawVector3)(scale)) {
+      if (ref.current?.scale && (0, import_utils2.instanceOfRawVector3)(scale)) {
         if (scale.x === null || scale.y === null || scale.z === null) {
           ref.current.scale.set(0.1, 0.1, 0.1);
           return;
         }
         ref.current.scale.set(scale.x, scale.y, scale.z);
-      } else if (ref.current && (0, import_utils3.instanceOfRawNumber)(scale)) {
+      } else if (ref.current && (0, import_utils2.instanceOfRawNumber)(scale)) {
         ref.current.scale.set(scale, scale, scale);
       } else if (ref.current) {
         ref.current.scale.set(1, 1, 1);
@@ -425,19 +232,19 @@ function InnerRenderedGroup({
     }
   });
   const setReference = useVizijStore(
-    (0, import_shallow3.useShallow)((state) => state.setReference)
+    (0, import_shallow2.useShallow)((state) => state.setReference)
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (ref.current && refIsNull) {
       setReference(group.id, namespace, ref);
     }
   }, [group.id, namespace, ref, setReference, refIsNull]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (ref.current) {
       ref.current.name = group.name;
     }
   }, [group.name]);
-  const handlePointerOver = (0, import_react5.useCallback)(
+  const handlePointerOver = (0, import_react4.useCallback)(
     (event) => {
       if (event.eventObject !== event.object) {
         return;
@@ -446,7 +253,7 @@ function InnerRenderedGroup({
     },
     [id, namespace, setHoveredElement]
   );
-  const handlePointerOut = (0, import_react5.useCallback)(
+  const handlePointerOut = (0, import_react4.useCallback)(
     (event) => {
       if (event.eventObject !== event.object) {
         return;
@@ -455,7 +262,7 @@ function InnerRenderedGroup({
     },
     [setHoveredElement]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "group",
     {
       ref,
@@ -463,7 +270,7 @@ function InnerRenderedGroup({
       userData,
       onPointerOver: handlePointerOver,
       onPointerOut: handlePointerOut,
-      children: group.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: group.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         Renderable,
         {
           id: child,
@@ -475,36 +282,36 @@ function InnerRenderedGroup({
     }
   );
 }
-var RenderedGroup = (0, import_react5.memo)(InnerRenderedGroup);
+var RenderedGroup = (0, import_react4.memo)(InnerRenderedGroup);
 
 // src/renderables/ellipse.tsx
-var import_react6 = require("react");
-var import_shallow4 = require("zustand/react/shallow");
-var import_utils4 = require("@vizij/utils");
+var import_react5 = require("react");
+var import_shallow3 = require("zustand/react/shallow");
+var import_utils3 = require("@vizij/utils");
 var import_drei = require("@react-three/drei");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function InnerRenderedEllipse({
   id,
   namespace,
   chain
 }) {
-  const ellipseRef = (0, import_react6.useRef)();
-  const materialRef = (0, import_react6.useRef)();
-  const lineRef = (0, import_react6.useRef)();
-  const strokeOffsetRef = (0, import_react6.useRef)(0);
-  const strokeWidthRef = (0, import_react6.useRef)(0);
+  const ellipseRef = (0, import_react5.useRef)();
+  const materialRef = (0, import_react5.useRef)();
+  const lineRef = (0, import_react5.useRef)();
+  const strokeOffsetRef = (0, import_react5.useRef)(0);
+  const strokeWidthRef = (0, import_react5.useRef)(0);
   const onElementClick = useVizijStore(
-    (0, import_shallow4.useShallow)((state) => state.onElementClick)
+    (0, import_shallow3.useShallow)((state) => state.onElementClick)
   );
   const setHoveredElement = useVizijStore(
-    (0, import_shallow4.useShallow)((state) => state.setHoveredElement)
+    (0, import_shallow3.useShallow)((state) => state.setHoveredElement)
   );
   const ellipse = useVizijStore(
-    (0, import_shallow4.useShallow)((state) => state.world[id])
+    (0, import_shallow3.useShallow)((state) => state.world[id])
   );
   const refIsNull = !ellipse.refs[namespace]?.current;
-  const animatables = useVizijStore((0, import_shallow4.useShallow)((state) => state.animatables));
-  const animatableValues = (0, import_react6.useMemo)(() => {
+  const animatables = useVizijStore((0, import_shallow3.useShallow)((state) => state.animatables));
+  const animatableValues = (0, import_react5.useMemo)(() => {
     const av = {};
     Object.values(ellipse.features).forEach((feat) => {
       if (feat.animated) {
@@ -514,11 +321,11 @@ function InnerRenderedEllipse({
     });
     return av;
   }, [ellipse.features, animatables]);
-  const selectionData = (0, import_react6.useMemo)(
+  const selectionData = (0, import_react5.useMemo)(
     () => ({ id, namespace, type: "ellipse" }),
     [id, namespace]
   );
-  const userData = (0, import_react6.useMemo)(
+  const userData = (0, import_react5.useMemo)(
     () => ({
       gltfExtensions: {
         RobotData: createStoredRenderable(ellipse, animatableValues)
@@ -529,13 +336,13 @@ function InnerRenderedEllipse({
   );
   useFeatures(namespace, ellipse.features, {
     translation: (pos) => {
-      if (ellipseRef.current?.position && (0, import_utils4.instanceOfRawVector3)(pos)) {
+      if (ellipseRef.current?.position && (0, import_utils3.instanceOfRawVector3)(pos)) {
         ellipseRef.current.position.set(
           pos.x,
           pos.y,
           pos.z
         );
-      } else if (ellipseRef.current?.position && (0, import_utils4.instanceOfRawVector2)(pos)) {
+      } else if (ellipseRef.current?.position && (0, import_utils3.instanceOfRawVector2)(pos)) {
         const currentZ = ellipseRef.current.position.z;
         ellipseRef.current.position.set(
           pos.x,
@@ -543,13 +350,13 @@ function InnerRenderedEllipse({
           currentZ
         );
       }
-      if (lineRef.current?.position && (0, import_utils4.instanceOfRawVector3)(pos)) {
+      if (lineRef.current?.position && (0, import_utils3.instanceOfRawVector3)(pos)) {
         lineRef.current.position.set(
           pos.x,
           pos.y,
           pos.z
         );
-      } else if (lineRef.current?.position && (0, import_utils4.instanceOfRawVector2)(pos)) {
+      } else if (lineRef.current?.position && (0, import_utils3.instanceOfRawVector2)(pos)) {
         const currentZ = lineRef.current.position.z;
         lineRef.current.position.set(
           pos.x,
@@ -559,21 +366,21 @@ function InnerRenderedEllipse({
       }
     },
     rotation: (rot) => {
-      if (ellipseRef.current?.rotation && (0, import_utils4.instanceOfRawEuler)(rot)) {
+      if (ellipseRef.current?.rotation && (0, import_utils3.instanceOfRawEuler)(rot)) {
         ellipseRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (ellipseRef.current?.rotation && (0, import_utils4.instanceOfRawNumber)(rot)) {
+      } else if (ellipseRef.current?.rotation && (0, import_utils3.instanceOfRawNumber)(rot)) {
         ellipseRef.current.rotation.set(0, 0, 0);
         ellipseRef.current.rotateZ(rot);
       }
-      if (lineRef.current?.rotation && (0, import_utils4.instanceOfRawEuler)(rot)) {
+      if (lineRef.current?.rotation && (0, import_utils3.instanceOfRawEuler)(rot)) {
         lineRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (lineRef.current?.rotation && (0, import_utils4.instanceOfRawNumber)(rot)) {
+      } else if (lineRef.current?.rotation && (0, import_utils3.instanceOfRawNumber)(rot)) {
         lineRef.current.rotation.set(0, 0, 0);
         lineRef.current.rotateZ(rot);
       }
     },
     fillOpacity: (op) => {
-      if (materialRef.current?.opacity !== void 0 && (0, import_utils4.instanceOfRawNumber)(op)) {
+      if (materialRef.current?.opacity !== void 0 && (0, import_utils3.instanceOfRawNumber)(op)) {
         materialRef.current.opacity = op;
         if (op < 1) {
           materialRef.current.transparent = true;
@@ -585,23 +392,23 @@ function InnerRenderedEllipse({
     },
     fillColor: (color) => {
       if (materialRef.current?.color) {
-        if ((0, import_utils4.instanceOfRawRGB)(color)) {
+        if ((0, import_utils3.instanceOfRawRGB)(color)) {
           materialRef.current.color.setRGB(color.r, color.g, color.b);
           materialRef.current.needsUpdate = true;
-        } else if ((0, import_utils4.instanceOfRawVector3)(color)) {
+        } else if ((0, import_utils3.instanceOfRawVector3)(color)) {
           materialRef.current.color.setRGB(color.x, color.y, color.z);
           materialRef.current.needsUpdate = true;
-        } else if ((0, import_utils4.instanceOfRawHSL)(color)) {
+        } else if ((0, import_utils3.instanceOfRawHSL)(color)) {
           materialRef.current.color.setHSL(color.h, color.s, color.l);
           materialRef.current.needsUpdate = true;
         }
       }
     },
     height: (height) => {
-      if (ellipseRef.current && (0, import_utils4.instanceOfRawNumber)(height)) {
+      if (ellipseRef.current && (0, import_utils3.instanceOfRawNumber)(height)) {
         ellipseRef.current.scale.set(ellipseRef.current.scale.x, height, 1);
       }
-      if (ellipseRef.current && lineRef.current && (0, import_utils4.instanceOfRawNumber)(height)) {
+      if (ellipseRef.current && lineRef.current && (0, import_utils3.instanceOfRawNumber)(height)) {
         const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
         lineRef.current.scale.set(
           ellipseRef.current.scale.x + offset,
@@ -611,10 +418,10 @@ function InnerRenderedEllipse({
       }
     },
     width: (width) => {
-      if (ellipseRef.current && (0, import_utils4.instanceOfRawNumber)(width)) {
+      if (ellipseRef.current && (0, import_utils3.instanceOfRawNumber)(width)) {
         ellipseRef.current.scale.set(width, ellipseRef.current.scale.y, 1);
       }
-      if (ellipseRef.current && lineRef.current && (0, import_utils4.instanceOfRawNumber)(width)) {
+      if (ellipseRef.current && lineRef.current && (0, import_utils3.instanceOfRawNumber)(width)) {
         const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
         lineRef.current.scale.set(
           width + offset,
@@ -624,7 +431,7 @@ function InnerRenderedEllipse({
       }
     },
     strokeOpacity: (strokeOpacity) => {
-      if (lineRef.current?.material && (0, import_utils4.instanceOfRawNumber)(strokeOpacity)) {
+      if (lineRef.current?.material && (0, import_utils3.instanceOfRawNumber)(strokeOpacity)) {
         lineRef.current.material.opacity = strokeOpacity;
         if (strokeOpacity < 1) {
           lineRef.current.material.transparent = true;
@@ -636,21 +443,21 @@ function InnerRenderedEllipse({
     },
     strokeColor: (strokeColor) => {
       if (lineRef.current?.material.color) {
-        if ((0, import_utils4.instanceOfRawRGB)(strokeColor)) {
+        if ((0, import_utils3.instanceOfRawRGB)(strokeColor)) {
           lineRef.current.material.color.setRGB(
             strokeColor.r,
             strokeColor.g,
             strokeColor.b
           );
           lineRef.current.material.needsUpdate = true;
-        } else if ((0, import_utils4.instanceOfRawVector3)(strokeColor)) {
+        } else if ((0, import_utils3.instanceOfRawVector3)(strokeColor)) {
           lineRef.current.material.color.setRGB(
             strokeColor.x,
             strokeColor.y,
             strokeColor.z
           );
           lineRef.current.material.needsUpdate = true;
-        } else if ((0, import_utils4.instanceOfRawHSL)(strokeColor)) {
+        } else if ((0, import_utils3.instanceOfRawHSL)(strokeColor)) {
           lineRef.current.material.color.setHSL(
             strokeColor.h,
             strokeColor.s,
@@ -662,7 +469,7 @@ function InnerRenderedEllipse({
     },
     strokeWidth: (strokeWidth) => {
       if (lineRef.current?.material && ellipseRef.current) {
-        if ((0, import_utils4.instanceOfRawNumber)(strokeWidth)) {
+        if ((0, import_utils3.instanceOfRawNumber)(strokeWidth)) {
           strokeWidthRef.current = strokeWidth;
           const offset = strokeWidth * strokeOffsetRef.current / 2 + strokeOffsetRef.current * -1;
           lineRef.current.scale.set(
@@ -677,7 +484,7 @@ function InnerRenderedEllipse({
     },
     strokeOffset: (strokeOffset) => {
       if (lineRef.current?.material && ellipseRef.current) {
-        if ((0, import_utils4.instanceOfRawNumber)(strokeOffset)) {
+        if ((0, import_utils3.instanceOfRawNumber)(strokeOffset)) {
           strokeOffsetRef.current = strokeOffset;
           const offset = strokeOffset * strokeWidthRef.current / 2 + strokeOffset * -1;
           lineRef.current.scale.set(
@@ -690,9 +497,9 @@ function InnerRenderedEllipse({
     }
   });
   const setReference = useVizijStore(
-    (0, import_shallow4.useShallow)((state) => state.setReference)
+    (0, import_shallow3.useShallow)((state) => state.setReference)
   );
-  const points = (0, import_react6.useMemo)(() => {
+  const points = (0, import_react5.useMemo)(() => {
     const n = 600;
     const p = [];
     const angleStep = 2 * Math.PI / n;
@@ -704,26 +511,26 @@ function InnerRenderedEllipse({
     }
     return p;
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (ellipseRef.current && refIsNull)
       setReference(ellipse.id, namespace, ellipseRef);
   }, [ellipse.id, namespace, ellipseRef, setReference, refIsNull]);
-  const handlePointerOver = (0, import_react6.useCallback)(
+  const handlePointerOver = (0, import_react5.useCallback)(
     (event) => {
       event.stopPropagation();
       setHoveredElement({ id, namespace, type: "ellipse" });
     },
     [id, namespace, setHoveredElement]
   );
-  const handlePointerOut = (0, import_react6.useCallback)(
+  const handlePointerOut = (0, import_react5.useCallback)(
     (event) => {
       event.stopPropagation();
       setHoveredElement(null);
     },
     [setHoveredElement]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_drei.Circle,
       {
         ref: ellipseRef,
@@ -734,10 +541,10 @@ function InnerRenderedEllipse({
         onClick: (e) => {
           onElementClick({ id, type: "ellipse", namespace }, [...chain, id], e);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("meshStandardMaterial", { attach: "material", ref: materialRef })
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshStandardMaterial", { attach: "material", ref: materialRef })
       }
     ),
-    showLine(ellipse) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    showLine(ellipse) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_drei.Line,
       {
         ref: lineRef,
@@ -748,7 +555,7 @@ function InnerRenderedEllipse({
     )
   ] });
 }
-var RenderedEllipse = (0, import_react6.memo)(InnerRenderedEllipse);
+var RenderedEllipse = (0, import_react5.memo)(InnerRenderedEllipse);
 var showLine = (ellipse) => {
   if ("strokeOpacity" in ellipse.features) {
     return true;
@@ -763,33 +570,33 @@ var showLine = (ellipse) => {
 };
 
 // src/renderables/rectangle.tsx
-var import_react7 = require("react");
-var import_shallow5 = require("zustand/react/shallow");
-var import_utils5 = require("@vizij/utils");
+var import_react6 = require("react");
+var import_shallow4 = require("zustand/react/shallow");
+var import_utils4 = require("@vizij/utils");
 var import_drei2 = require("@react-three/drei");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function InnerRenderedRectangle({
   id,
   namespace,
   chain
 }) {
-  const rectangleRef = (0, import_react7.useRef)();
-  const materialRef = (0, import_react7.useRef)();
-  const lineRef = (0, import_react7.useRef)();
-  const strokeOffsetRef = (0, import_react7.useRef)(0);
-  const strokeWidthRef = (0, import_react7.useRef)(0);
+  const rectangleRef = (0, import_react6.useRef)();
+  const materialRef = (0, import_react6.useRef)();
+  const lineRef = (0, import_react6.useRef)();
+  const strokeOffsetRef = (0, import_react6.useRef)(0);
+  const strokeWidthRef = (0, import_react6.useRef)(0);
   const onElementClick = useVizijStore(
-    (0, import_shallow5.useShallow)((state) => state.onElementClick)
+    (0, import_shallow4.useShallow)((state) => state.onElementClick)
   );
   const setHoveredElement = useVizijStore(
-    (0, import_shallow5.useShallow)((state) => state.setHoveredElement)
+    (0, import_shallow4.useShallow)((state) => state.setHoveredElement)
   );
   const rectangle = useVizijStore(
-    (0, import_shallow5.useShallow)((state) => state.world[id])
+    (0, import_shallow4.useShallow)((state) => state.world[id])
   );
   const refIsNull = !rectangle.refs[namespace]?.current;
-  const animatables = useVizijStore((0, import_shallow5.useShallow)((state) => state.animatables));
-  const animatableValues = (0, import_react7.useMemo)(() => {
+  const animatables = useVizijStore((0, import_shallow4.useShallow)((state) => state.animatables));
+  const animatableValues = (0, import_react6.useMemo)(() => {
     const av = {};
     Object.values(rectangle.features).forEach((feat) => {
       if (feat.animated) {
@@ -799,11 +606,11 @@ function InnerRenderedRectangle({
     });
     return av;
   }, [rectangle.features, animatables]);
-  const selectionData = (0, import_react7.useMemo)(
+  const selectionData = (0, import_react6.useMemo)(
     () => ({ id, namespace, type: "rectangle" }),
     [id, namespace]
   );
-  const userData = (0, import_react7.useMemo)(
+  const userData = (0, import_react6.useMemo)(
     () => ({
       gltfExtensions: {
         RobotData: createStoredRenderable(rectangle, animatableValues)
@@ -814,13 +621,13 @@ function InnerRenderedRectangle({
   );
   useFeatures(namespace, rectangle.features, {
     translation: (pos) => {
-      if (rectangleRef.current?.position && (0, import_utils5.instanceOfRawVector3)(pos)) {
+      if (rectangleRef.current?.position && (0, import_utils4.instanceOfRawVector3)(pos)) {
         rectangleRef.current.position.set(
           pos.x,
           pos.y,
           pos.z
         );
-      } else if (rectangleRef.current?.position && (0, import_utils5.instanceOfRawVector2)(pos)) {
+      } else if (rectangleRef.current?.position && (0, import_utils4.instanceOfRawVector2)(pos)) {
         const currentZ = rectangleRef.current.position.z;
         rectangleRef.current.position.set(
           pos.x,
@@ -828,13 +635,13 @@ function InnerRenderedRectangle({
           currentZ
         );
       }
-      if (lineRef.current?.position && (0, import_utils5.instanceOfRawVector3)(pos)) {
+      if (lineRef.current?.position && (0, import_utils4.instanceOfRawVector3)(pos)) {
         lineRef.current.position.set(
           pos.x,
           pos.y,
           pos.z
         );
-      } else if (lineRef.current?.position && (0, import_utils5.instanceOfRawVector2)(pos)) {
+      } else if (lineRef.current?.position && (0, import_utils4.instanceOfRawVector2)(pos)) {
         const currentZ = lineRef.current.position.z;
         lineRef.current.position.set(
           pos.x,
@@ -844,21 +651,21 @@ function InnerRenderedRectangle({
       }
     },
     rotation: (rot) => {
-      if (rectangleRef.current?.rotation && (0, import_utils5.instanceOfRawEuler)(rot)) {
+      if (rectangleRef.current?.rotation && (0, import_utils4.instanceOfRawEuler)(rot)) {
         rectangleRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (rectangleRef.current?.rotation && (0, import_utils5.instanceOfRawNumber)(rot)) {
+      } else if (rectangleRef.current?.rotation && (0, import_utils4.instanceOfRawNumber)(rot)) {
         rectangleRef.current.rotation.set(0, 0, 0);
         rectangleRef.current.rotateZ(rot);
       }
-      if (lineRef.current?.rotation && (0, import_utils5.instanceOfRawEuler)(rot)) {
+      if (lineRef.current?.rotation && (0, import_utils4.instanceOfRawEuler)(rot)) {
         lineRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
-      } else if (lineRef.current?.rotation && (0, import_utils5.instanceOfRawNumber)(rot)) {
+      } else if (lineRef.current?.rotation && (0, import_utils4.instanceOfRawNumber)(rot)) {
         lineRef.current.rotation.set(0, 0, 0);
         lineRef.current.rotateZ(rot);
       }
     },
     fillOpacity: (op) => {
-      if (materialRef.current?.opacity !== void 0 && (0, import_utils5.instanceOfRawNumber)(op)) {
+      if (materialRef.current?.opacity !== void 0 && (0, import_utils4.instanceOfRawNumber)(op)) {
         materialRef.current.opacity = op;
         if (op < 1) {
           materialRef.current.transparent = true;
@@ -870,23 +677,23 @@ function InnerRenderedRectangle({
     },
     fillColor: (color) => {
       if (materialRef.current?.color) {
-        if ((0, import_utils5.instanceOfRawRGB)(color)) {
+        if ((0, import_utils4.instanceOfRawRGB)(color)) {
           materialRef.current.color.setRGB(color.r, color.g, color.b);
           materialRef.current.needsUpdate = true;
-        } else if ((0, import_utils5.instanceOfRawVector3)(color)) {
+        } else if ((0, import_utils4.instanceOfRawVector3)(color)) {
           materialRef.current.color.setRGB(color.x, color.y, color.z);
           materialRef.current.needsUpdate = true;
-        } else if ((0, import_utils5.instanceOfRawHSL)(color)) {
+        } else if ((0, import_utils4.instanceOfRawHSL)(color)) {
           materialRef.current.color.setHSL(color.h, color.s, color.l);
           materialRef.current.needsUpdate = true;
         }
       }
     },
     height: (height) => {
-      if (rectangleRef.current && (0, import_utils5.instanceOfRawNumber)(height)) {
+      if (rectangleRef.current && (0, import_utils4.instanceOfRawNumber)(height)) {
         rectangleRef.current.scale.set(rectangleRef.current.scale.x, height, 1);
       }
-      if (rectangleRef.current && lineRef.current && (0, import_utils5.instanceOfRawNumber)(height)) {
+      if (rectangleRef.current && lineRef.current && (0, import_utils4.instanceOfRawNumber)(height)) {
         const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
         lineRef.current.scale.set(
           rectangleRef.current.scale.x + offset,
@@ -896,10 +703,10 @@ function InnerRenderedRectangle({
       }
     },
     width: (width) => {
-      if (rectangleRef.current && (0, import_utils5.instanceOfRawNumber)(width)) {
+      if (rectangleRef.current && (0, import_utils4.instanceOfRawNumber)(width)) {
         rectangleRef.current.scale.set(width, rectangleRef.current.scale.y, 1);
       }
-      if (rectangleRef.current && lineRef.current && (0, import_utils5.instanceOfRawNumber)(width)) {
+      if (rectangleRef.current && lineRef.current && (0, import_utils4.instanceOfRawNumber)(width)) {
         const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
         lineRef.current.scale.set(
           width + offset,
@@ -909,7 +716,7 @@ function InnerRenderedRectangle({
       }
     },
     strokeOpacity: (strokeOpacity) => {
-      if (lineRef.current?.material && (0, import_utils5.instanceOfRawNumber)(strokeOpacity)) {
+      if (lineRef.current?.material && (0, import_utils4.instanceOfRawNumber)(strokeOpacity)) {
         lineRef.current.material.opacity = strokeOpacity;
         if (strokeOpacity < 1) {
           lineRef.current.material.transparent = true;
@@ -921,21 +728,21 @@ function InnerRenderedRectangle({
     },
     strokeColor: (strokeColor) => {
       if (lineRef.current?.material.color) {
-        if ((0, import_utils5.instanceOfRawRGB)(strokeColor)) {
+        if ((0, import_utils4.instanceOfRawRGB)(strokeColor)) {
           lineRef.current.material.color.setRGB(
             strokeColor.r,
             strokeColor.g,
             strokeColor.b
           );
           lineRef.current.material.needsUpdate = true;
-        } else if ((0, import_utils5.instanceOfRawVector3)(strokeColor)) {
+        } else if ((0, import_utils4.instanceOfRawVector3)(strokeColor)) {
           lineRef.current.material.color.setRGB(
             strokeColor.x,
             strokeColor.y,
             strokeColor.z
           );
           lineRef.current.material.needsUpdate = true;
-        } else if ((0, import_utils5.instanceOfRawHSL)(strokeColor)) {
+        } else if ((0, import_utils4.instanceOfRawHSL)(strokeColor)) {
           lineRef.current.material.color.setHSL(
             strokeColor.h,
             strokeColor.s,
@@ -947,7 +754,7 @@ function InnerRenderedRectangle({
     },
     strokeWidth: (strokeWidth) => {
       if (lineRef.current?.material && rectangleRef.current) {
-        if ((0, import_utils5.instanceOfRawNumber)(strokeWidth)) {
+        if ((0, import_utils4.instanceOfRawNumber)(strokeWidth)) {
           strokeWidthRef.current = strokeWidth;
           const offset = strokeWidth * strokeOffsetRef.current / 2 + strokeOffsetRef.current * -1;
           lineRef.current.scale.set(
@@ -962,7 +769,7 @@ function InnerRenderedRectangle({
     },
     strokeOffset: (strokeOffset) => {
       if (lineRef.current?.material && rectangleRef.current) {
-        if ((0, import_utils5.instanceOfRawNumber)(strokeOffset)) {
+        if ((0, import_utils4.instanceOfRawNumber)(strokeOffset)) {
           strokeOffsetRef.current = strokeOffset;
           const offset = strokeOffset * strokeWidthRef.current / 2 + strokeOffset * -1;
           lineRef.current.scale.set(
@@ -975,9 +782,9 @@ function InnerRenderedRectangle({
     }
   });
   const setReference = useVizijStore(
-    (0, import_shallow5.useShallow)((state) => state.setReference)
+    (0, import_shallow4.useShallow)((state) => state.setReference)
   );
-  const points = (0, import_react7.useMemo)(() => {
+  const points = (0, import_react6.useMemo)(() => {
     return [
       [-0.5, 0.5, 0],
       [0.5, 0.5, 0],
@@ -986,26 +793,26 @@ function InnerRenderedRectangle({
       [-0.5, 0.5, 0]
     ];
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (rectangleRef.current && refIsNull)
       setReference(rectangle.id, namespace, rectangleRef);
   }, [rectangle.id, namespace, rectangleRef, setReference, refIsNull]);
-  const handlePointerOver = (0, import_react7.useCallback)(
+  const handlePointerOver = (0, import_react6.useCallback)(
     (event) => {
       event.stopPropagation();
       setHoveredElement({ id, namespace, type: "rectangle" });
     },
     [id, namespace, setHoveredElement]
   );
-  const handlePointerOut = (0, import_react7.useCallback)(
+  const handlePointerOut = (0, import_react6.useCallback)(
     (event) => {
       event.stopPropagation();
       setHoveredElement(null);
     },
     [setHoveredElement]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_drei2.Plane,
       {
         ref: rectangleRef,
@@ -1020,10 +827,10 @@ function InnerRenderedRectangle({
             e
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("meshStandardMaterial", { attach: "material", ref: materialRef })
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("meshStandardMaterial", { attach: "material", ref: materialRef })
       }
     ),
-    showLine2(rectangle) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    showLine2(rectangle) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_drei2.Line,
       {
         ref: lineRef,
@@ -1034,7 +841,7 @@ function InnerRenderedRectangle({
     )
   ] });
 }
-var RenderedRectangle = (0, import_react7.memo)(InnerRenderedRectangle);
+var RenderedRectangle = (0, import_react6.memo)(InnerRenderedRectangle);
 var showLine2 = (rectangle) => {
   if ("strokeOpacity" in rectangle.features) {
     return true;
@@ -1049,26 +856,26 @@ var showLine2 = (rectangle) => {
 };
 
 // src/renderables/shape.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var THREE2 = __toESM(require("three"));
-var import_shallow6 = require("zustand/react/shallow");
-var import_utils6 = require("@vizij/utils");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_shallow5 = require("zustand/react/shallow");
+var import_utils5 = require("@vizij/utils");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 THREE2.Object3D.DEFAULT_UP.set(0, 0, 1);
 function InnerRenderedShape({
   id,
   namespace,
   chain
 }) {
-  const refGroup = (0, import_react8.useRef)();
-  const ref = (0, import_react8.useRef)();
-  const shape = useVizijStore((0, import_shallow6.useShallow)((state) => state.world[id]));
+  const refGroup = (0, import_react7.useRef)();
+  const ref = (0, import_react7.useRef)();
+  const shape = useVizijStore((0, import_shallow5.useShallow)((state) => state.world[id]));
   const refs = useVizijStore(
-    (0, import_shallow6.useShallow)((state) => state.world[id].refs)
+    (0, import_shallow5.useShallow)((state) => state.world[id].refs)
   );
   const refIsNull = !refs[namespace]?.current;
-  const animatables = useVizijStore((0, import_shallow6.useShallow)((state) => state.animatables));
-  const animatableValues = (0, import_react8.useMemo)(() => {
+  const animatables = useVizijStore((0, import_shallow5.useShallow)((state) => state.animatables));
+  const animatableValues = (0, import_react7.useMemo)(() => {
     const av = {};
     Object.values(shape.features).forEach((feat) => {
       if (feat.animated) {
@@ -1078,22 +885,22 @@ function InnerRenderedShape({
     });
     return av;
   }, [shape.features, animatables]);
-  const materialName = (0, import_react8.useMemo)(
+  const materialName = (0, import_react7.useMemo)(
     () => deriveMaterialName(shape, animatableValues),
     [shape, animatableValues]
   );
-  const geometry = (0, import_react8.useMemo)(() => {
+  const geometry = (0, import_react7.useMemo)(() => {
     const cloned = shape.geometry.clone();
     if (shape.name) {
       cloned.name = shape.name;
     }
     return cloned;
   }, [shape.geometry, shape.name]);
-  const selectionData = (0, import_react8.useMemo)(
+  const selectionData = (0, import_react7.useMemo)(
     () => ({ id, namespace, type: "shape" }),
     [id, namespace]
   );
-  const userData = (0, import_react8.useMemo)(
+  const userData = (0, import_react7.useMemo)(
     () => ({
       gltfExtensions: {
         RobotData: createStoredRenderable(shape, animatableValues)
@@ -1102,8 +909,8 @@ function InnerRenderedShape({
     }),
     [shape, animatableValues, selectionData]
   );
-  const material = (0, import_react8.useRef)();
-  const morphTargetSettings = (0, import_react8.useMemo)(() => {
+  const material = (0, import_react7.useRef)();
+  const morphTargetSettings = (0, import_react7.useMemo)(() => {
     if (shape.morphTargets) {
       const dictionary = shape.morphTargets.reduce(
         (acc, target, i) => ({ ...acc, [target]: i }),
@@ -1113,7 +920,7 @@ function InnerRenderedShape({
       const morphFeatureHandlers = {};
       shape.morphTargets.forEach((target, i) => {
         morphFeatureHandlers[target] = (value) => {
-          if (ref.current?.morphTargetInfluences && (0, import_utils6.instanceOfRawNumber)(value)) {
+          if (ref.current?.morphTargetInfluences && (0, import_utils5.instanceOfRawNumber)(value)) {
             ref.current.morphTargetInfluences[i] = value;
           }
         };
@@ -1128,14 +935,14 @@ function InnerRenderedShape({
     shape.features,
     {
       translation: (pos) => {
-        if (ref.current?.position && (0, import_utils6.instanceOfRawVector3)(pos)) {
+        if (ref.current?.position && (0, import_utils5.instanceOfRawVector3)(pos)) {
           ref.current.position.set(
             pos.x,
             pos.y,
             pos.z
           );
         }
-        if (refGroup.current?.position && (0, import_utils6.instanceOfRawVector3)(pos)) {
+        if (refGroup.current?.position && (0, import_utils5.instanceOfRawVector3)(pos)) {
           refGroup.current.position.set(
             pos.x,
             pos.y,
@@ -1144,24 +951,24 @@ function InnerRenderedShape({
         }
       },
       rotation: (rot) => {
-        if (ref.current?.rotation && (0, import_utils6.instanceOfRawEuler)(rot)) {
+        if (ref.current?.rotation && (0, import_utils5.instanceOfRawEuler)(rot)) {
           ref.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
         }
-        if (refGroup.current?.rotation && (0, import_utils6.instanceOfRawEuler)(rot)) {
+        if (refGroup.current?.rotation && (0, import_utils5.instanceOfRawEuler)(rot)) {
           refGroup.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
         }
       },
       scale: (scale) => {
-        if (ref.current?.scale && (0, import_utils6.instanceOfRawVector3)(scale)) {
+        if (ref.current?.scale && (0, import_utils5.instanceOfRawVector3)(scale)) {
           ref.current.scale.set(scale.x, scale.y, scale.z);
-        } else if (ref.current && (0, import_utils6.instanceOfRawNumber)(scale)) {
+        } else if (ref.current && (0, import_utils5.instanceOfRawNumber)(scale)) {
           ref.current.scale.set(scale, scale, scale);
         } else if (ref.current) {
           ref.current.scale.set(1, 1, 1);
         }
       },
       opacity: (op) => {
-        if (material.current?.opacity !== void 0 && (0, import_utils6.instanceOfRawNumber)(op)) {
+        if (material.current?.opacity !== void 0 && (0, import_utils5.instanceOfRawNumber)(op)) {
           material.current.opacity = op;
           if (op < 1) {
             material.current.transparent = true;
@@ -1172,21 +979,21 @@ function InnerRenderedShape({
         }
       },
       color: (color) => {
-        if ((material.current || void 0)?.color && (0, import_utils6.instanceOfRawRGB)(color)) {
+        if ((material.current || void 0)?.color && (0, import_utils5.instanceOfRawRGB)(color)) {
           material.current.color.setRGB(
             color.r,
             color.g,
             color.b
           );
           material.current.needsUpdate = true;
-        } else if ((material.current || void 0)?.color && (0, import_utils6.instanceOfRawVector3)(color)) {
+        } else if ((material.current || void 0)?.color && (0, import_utils5.instanceOfRawVector3)(color)) {
           material.current.color.setRGB(
             color.x,
             color.y,
             color.z
           );
           material.current.needsUpdate = true;
-        } else if (material.current && (0, import_utils6.instanceOfRawHSL)(color)) {
+        } else if (material.current && (0, import_utils5.instanceOfRawHSL)(color)) {
           material.current.color.setHSL(
             color.h,
             color.s,
@@ -1198,22 +1005,22 @@ function InnerRenderedShape({
     },
     shape
   );
-  const setReference = useVizijStore((0, import_shallow6.useShallow)((state) => state.setReference));
+  const setReference = useVizijStore((0, import_shallow5.useShallow)((state) => state.setReference));
   const onElementClick = useVizijStore(
-    (0, import_shallow6.useShallow)((state) => state.onElementClick)
+    (0, import_shallow5.useShallow)((state) => state.onElementClick)
   );
   const setHoveredElement = useVizijStore(
-    (0, import_shallow6.useShallow)((state) => state.setHoveredElement)
+    (0, import_shallow5.useShallow)((state) => state.setHoveredElement)
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (ref.current && refIsNull) setReference(shape.id, namespace, ref);
   }, [shape.id, namespace, ref, setReference, refIsNull]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (ref.current) {
       ref.current.name = shape.name;
     }
   }, [shape.name]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!material.current) {
       return;
     }
@@ -1223,21 +1030,21 @@ function InnerRenderedShape({
       material.current.name = shape.name;
     }
   }, [materialName, shape.name]);
-  const handlePointerOver = (0, import_react8.useCallback)(
+  const handlePointerOver = (0, import_react7.useCallback)(
     (event) => {
       event.stopPropagation();
       setHoveredElement({ id, namespace, type: "shape" });
     },
     [id, namespace, setHoveredElement]
   );
-  const handlePointerOut = (0, import_react8.useCallback)(
+  const handlePointerOut = (0, import_react7.useCallback)(
     (event) => {
       event.stopPropagation();
       setHoveredElement(null);
     },
     [setHoveredElement]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "mesh",
     {
       ref,
@@ -1255,7 +1062,7 @@ function InnerRenderedShape({
         onElementClick({ id, type: "shape", namespace }, [...chain, id], e);
       },
       children: [
-        shape.material === "basic" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        shape.material === "basic" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "meshBasicMaterial",
           {
             attach: "material",
@@ -1263,7 +1070,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "lambert" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        shape.material === "lambert" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "meshLambertMaterial",
           {
             attach: "material",
@@ -1271,7 +1078,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "phong" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        shape.material === "phong" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "meshPhongMaterial",
           {
             attach: "material",
@@ -1279,7 +1086,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "standard" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        shape.material === "standard" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "meshStandardMaterial",
           {
             attach: "material",
@@ -1287,7 +1094,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "normal" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        shape.material === "normal" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "meshNormalMaterial",
           {
             attach: "material",
@@ -1295,7 +1102,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.children?.map((child) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        shape.children?.map((child) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Renderable,
           {
             id: child,
@@ -1308,7 +1115,7 @@ function InnerRenderedShape({
     }
   );
 }
-var RenderedShape = (0, import_react8.memo)(InnerRenderedShape);
+var RenderedShape = (0, import_react7.memo)(InnerRenderedShape);
 var MATERIAL_FEATURE_KEYS = [
   "color",
   "opacity",
@@ -1356,15 +1163,15 @@ function extractMaterialName(name) {
 }
 
 // src/renderables/renderable.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function InnerRenderable({
   id,
   namespace,
   chain
 }) {
-  const type = useVizijStore((0, import_shallow7.useShallow)((state) => state.world[id].type));
-  const refs = useVizijStore((0, import_shallow7.useShallow)((state) => state.world[id].refs));
-  const resolvedNamespaces = (0, import_react9.useMemo)(() => {
+  const type = useVizijStore((0, import_shallow6.useShallow)((state) => state.world[id].type));
+  const refs = useVizijStore((0, import_shallow6.useShallow)((state) => state.world[id].refs));
+  const resolvedNamespaces = (0, import_react8.useMemo)(() => {
     let namespaces = [namespace];
     if (namespace in refs) {
       namespaces = [namespace];
@@ -1376,10 +1183,10 @@ function InnerRenderable({
   if (resolvedNamespaces.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: resolvedNamespaces.map((ns) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: resolvedNamespaces.map((ns) => {
     switch (type) {
       case "group":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           RenderedGroup,
           {
             id,
@@ -1389,7 +1196,7 @@ function InnerRenderable({
           `${ns}.${id}`
         );
       case "ellipse":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           RenderedEllipse,
           {
             id,
@@ -1399,7 +1206,7 @@ function InnerRenderable({
           `${ns}.${id}`
         );
       case "rectangle":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           RenderedRectangle,
           {
             id,
@@ -1409,7 +1216,7 @@ function InnerRenderable({
           `${ns}.${id}`
         );
       case "shape":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           RenderedShape,
           {
             id,
@@ -1423,17 +1230,17 @@ function InnerRenderable({
     }
   }) });
 }
-var Renderable = (0, import_react9.memo)(InnerRenderable);
+var Renderable = (0, import_react8.memo)(InnerRenderable);
 
 // src/store.ts
 var import_zustand2 = require("zustand");
 var import_middleware = require("zustand/middleware");
 var import_immer = require("immer");
 var THREE3 = __toESM(require("three"));
-var import_utils7 = require("@vizij/utils");
+var import_utils6 = require("@vizij/utils");
 
 // src/actions/create-new-element.ts
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_lodash3 = require("lodash");
 
 // src/functions/create-world-element.ts
@@ -1463,7 +1270,7 @@ function createNewElement(state, type, root = false) {
     });
     if (Object.entries(state.world).length === 0) {
       const name = `New-Root`;
-      const refs = { default: (0, import_react10.createRef)() };
+      const refs = { default: (0, import_react9.createRef)() };
       const newElement = createDefaultGroup({
         name,
         root: true,
@@ -1481,7 +1288,7 @@ function createNewElement(state, type, root = false) {
       const name = `New-Body`;
       const refs = (0, import_lodash3.mapValues)(
         worldRootEntry.refs,
-        () => (0, import_react10.createRef)()
+        () => (0, import_react9.createRef)()
       );
       const newChild = createDefaultGroup({ name, root, refs });
       worldRootEntry.children.push(newChild.id);
@@ -1726,7 +1533,7 @@ var VizijSlice = (set, get) => ({
   setValue: (id, namespace, value) => {
     set(
       (0, import_immer.produce)((state) => {
-        const lookupId = (0, import_utils7.getLookup)(namespace, id);
+        const lookupId = (0, import_utils6.getLookup)(namespace, id);
         if (typeof value === "function") {
           const current = state.values.get(lookupId);
           if (current !== void 0) {
@@ -1873,8 +1680,8 @@ var VizijSlice = (set, get) => ({
   setSlot: (parentId, parentNamespace, childId, childNamespace) => {
     set(
       (0, import_immer.produce)((state) => {
-        const parentLookupId = (0, import_utils7.getLookup)(parentNamespace, parentId);
-        const childLookupId = (0, import_utils7.getLookup)(childNamespace, childId);
+        const parentLookupId = (0, import_utils6.getLookup)(parentNamespace, parentId);
+        const childLookupId = (0, import_utils6.getLookup)(childNamespace, childId);
         state.slotConfig[parentLookupId] = childLookupId;
       })
     );
@@ -1893,7 +1700,7 @@ var VizijSlice = (set, get) => ({
   clearSlot: (parentId, parentNamespace) => {
     set(
       (0, import_immer.produce)((state) => {
-        const parentLookupId = (0, import_utils7.getLookup)(parentNamespace, parentId);
+        const parentLookupId = (0, import_utils6.getLookup)(parentNamespace, parentId);
         delete state.slotConfig[parentLookupId];
       })
     );
@@ -1943,7 +1750,7 @@ var createVizijStore = (initial) => (0, import_zustand2.create)()(
 );
 
 // src/vizij.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 import_three.Object3D.DEFAULT_UP.set(0, 0, 1);
 function Vizij({
   style,
@@ -1953,16 +1760,16 @@ function Vizij({
   showSafeArea = false,
   onPointerMissed
 }) {
-  const ctx = (0, import_react11.useContext)(VizijContext);
+  const ctx = (0, import_react10.useContext)(VizijContext);
   if (ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_fiber.Canvas,
       {
         shadows: false,
         style,
         className,
         onPointerMissed,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           MemoizedInnerVizij,
           {
             rootId,
@@ -1973,13 +1780,13 @@ function Vizij({
       }
     );
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_fiber.Canvas,
       {
         style,
         className,
         onPointerMissed,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           MemoizedInnerVizij,
           {
             rootId,
@@ -2001,9 +1808,9 @@ function InnerVizij({
     width: container.width * container.resolution,
     height: container.height * container.resolution
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ambientLight", { intensity: Math.PI / 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ambientLight", { intensity: Math.PI / 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_drei3.OrthographicCamera,
       {
         makeDefault: true,
@@ -2012,7 +1819,7 @@ function InnerVizij({
         far: 101
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       World,
       {
         rootId,
@@ -2020,17 +1827,17 @@ function InnerVizij({
         parentSizing: sceneParentSizing
       }
     ) }),
-    showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SafeAreaRenderer, { rootId })
+    showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SafeAreaRenderer, { rootId })
   ] });
 }
-var MemoizedInnerVizij = (0, import_react11.memo)(InnerVizij);
+var MemoizedInnerVizij = (0, import_react10.memo)(InnerVizij);
 function InnerWorld({
   rootId,
   namespace = "default",
   parentSizing
 }) {
   const [present, rootBounds] = useVizijStore(
-    (0, import_shallow8.useShallow)((state) => {
+    (0, import_shallow7.useShallow)((state) => {
       const group = state.world[rootId];
       const bounds = group?.rootBounds ?? defaultRootBounds;
       return [group !== void 0, bounds];
@@ -2040,7 +1847,7 @@ function InnerWorld({
     camera: state.camera,
     size: state.size
   }));
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const width = rootBounds.size.x;
     const height = rootBounds.size.y;
     if (camera && parentSizing === void 0 && camera.isOrthographicCamera) {
@@ -2068,9 +1875,9 @@ function InnerWorld({
       camera.updateProjectionMatrix();
     }
   }, [rootBounds, camera, parentSizing, size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_error_boundary.ErrorBoundary, { fallback: null, children: [
-    present && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Renderable, { id: rootId, namespace, chain: [] }),
-    !present && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_error_boundary.ErrorBoundary, { fallback: null, children: [
+    present && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Renderable, { id: rootId, namespace, chain: [] }),
+    !present && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_drei3.Text,
       {
         position: [0, 0, 0],
@@ -2083,7 +1890,7 @@ function InnerWorld({
     )
   ] });
 }
-var World = (0, import_react11.memo)(InnerWorld);
+var World = (0, import_react10.memo)(InnerWorld);
 function SafeAreaRenderer({ rootId }) {
   const rootBounds = useVizijStore((state) => {
     const group = state.world[rootId];
@@ -2093,7 +1900,7 @@ function SafeAreaRenderer({ rootId }) {
   const right = rootBounds.center.x + rootBounds.size.x / 2;
   const top = rootBounds.center.y + rootBounds.size.y / 2;
   const bottom = rootBounds.center.y - rootBounds.size.y / 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_drei3.Line,
     {
       points: [
@@ -2124,11 +1931,11 @@ var ShapeMaterial = /* @__PURE__ */ ((ShapeMaterial2) => {
 })(ShapeMaterial || {});
 
 // src/hooks/use-vizij-store-subscription.ts
-var import_react12 = require("react");
+var import_react11 = require("react");
 function useVizijStoreSubscription(selector, listener) {
-  const store = (0, import_react12.useContext)(VizijContext);
+  const store = (0, import_react11.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const initialValue = selector(store.getState());
     listener(initialValue);
     return store.subscribe(selector, listener);
@@ -2136,17 +1943,17 @@ function useVizijStoreSubscription(selector, listener) {
 }
 
 // src/hooks/use-vizij-store-setter.ts
-var import_react13 = require("react");
+var import_react12 = require("react");
 function useVizijStoreSetter() {
-  const store = (0, import_react13.useContext)(VizijContext);
+  const store = (0, import_react12.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.setState;
 }
 
 // src/hooks/use-vizij-store-getter.ts
-var import_react14 = require("react");
+var import_react13 = require("react");
 function useVizijStoreGetter() {
-  const store = (0, import_react14.useContext)(VizijContext);
+  const store = (0, import_react13.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.getState;
 }
@@ -2156,7 +1963,7 @@ var THREE5 = __toESM(require("three"));
 var import_three_stdlib = require("three-stdlib");
 
 // src/functions/gltf-loading/traverse-three.ts
-var import_react16 = require("react");
+var import_react15 = require("react");
 var THREE4 = __toESM(require("three"));
 
 // src/functions/gltf-loading/map-features.ts
@@ -2188,9 +1995,9 @@ var import_three4 = require("three");
 var import_three3 = require("three");
 
 // src/functions/util.ts
-var import_react15 = require("react");
+var import_react14 = require("react");
 function namespaceArrayToRefs(namespaces) {
-  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }), {});
+  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: (0, import_react14.createRef)() }), {});
 }
 
 // src/functions/gltf-loading/import-mesh.ts
@@ -2539,7 +2346,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
                 {}
               )
             };
@@ -2554,7 +2361,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
               ...data,
               geometry: child.geometry,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
                 {}
               )
             };
@@ -2568,7 +2375,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
                 {}
               )
             };
@@ -2582,7 +2389,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
                 {}
               )
             };
@@ -3098,7 +2905,6 @@ function exportScene(data, fileNameOrOptions = "scene.glb") {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Controller,
   EmptyModelError,
   InnerVizij,
   ShapeMaterial,