@vizij/render 0.0.3 → 0.0.4

package/dist/index.mjs

@@ -1,11 +1,19 @@
-// src/controllers/controller.tsx
-import { memo } from "react";
-import { useShallow } from "zustand/react/shallow";
-import { clsx } from "clsx";
+// src/vizij.tsx
 import {
-  getLookup
-} from "@vizij/utils";
-import { ColorPickerPopover, SliderNumberField, Size } from "@semio/ui";
+  Suspense,
+  memo as memo6,
+  useContext as useContext3,
+  useEffect as useEffect6
+} from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { Object3D as Object3D4 } from "three";
+import { Canvas, useThree } from "@react-three/fiber";
+import { Line as Line3, OrthographicCamera, Text } from "@react-three/drei";
+import { useShallow as useShallow6 } from "zustand/react/shallow";
+
+// src/renderables/renderable.tsx
+import { memo as memo5, useMemo as useMemo5 } from "react";
+import { useShallow as useShallow5 } from "zustand/react/shallow";
 
 // src/hooks/use-vizij-store.ts
 import { useContext } from "react";
@@ -22,218 +30,16 @@ function useVizijStore(selector) {
   return useStore(store, selector);
 }
 
-// src/controllers/controller.tsx
-import { jsx } from "react/jsx-runtime";
-function InnerController({
-  animatableId,
-  namespace,
-  subfield,
-  className
-}) {
-  const setValue = useVizijStore(useShallow((state) => state.setValue));
-  const animatable = useVizijStore(
-    useShallow((state) => state.animatables[animatableId])
-  );
-  const lookupId = getLookup(namespace ?? "default", animatableId);
-  const rawValue = useVizijStore(
-    useShallow((state) => state.values.get(lookupId))
-  );
-  if (animatable.type === "number") {
-    return /* @__PURE__ */ jsx("div", { className: clsx("flex flex-col w-full", className), children: /* @__PURE__ */ jsx(
-      SliderNumberField,
-      {
-        size: 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__ */ jsx("div", { className: clsx("flex flex-col gap-2", className), children: ["x", "y", "z"].map((axis) => {
-      return /* @__PURE__ */ jsx(
-        InnerController,
-        {
-          animatableId,
-          namespace,
-          subfield: axis
-        },
-        axis
-      );
-    }) });
-  } else if (animatable.type === "vector2" && !subfield) {
-    return /* @__PURE__ */ jsx("div", { className: clsx("flex flex-col gap-2", className), children: ["x", "y"].map((axis) => {
-      return /* @__PURE__ */ jsx(
-        InnerController,
-        {
-          animatableId,
-          namespace,
-          subfield: axis
-        },
-        axis
-      );
-    }) });
-  } else if (animatable.type === "euler" && !subfield) {
-    return /* @__PURE__ */ jsx("div", { className: clsx("flex flex-col gap-2", className), children: ["x", "y", "z"].map((axis) => {
-      return /* @__PURE__ */ jsx(
-        InnerController,
-        {
-          animatableId,
-          namespace,
-          subfield: axis
-        },
-        axis
-      );
-    }) });
-  } else if (animatable.type === "rgb" && !subfield) {
-    return /* @__PURE__ */ jsx("div", { className: clsx("flex flex-col gap-2", className), children: /* @__PURE__ */ jsx(
-      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__ */ jsx(
-      SliderNumberField,
-      {
-        label: axis,
-        size: 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__ */ jsx(
-      SliderNumberField,
-      {
-        label: axis,
-        size: 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__ */ jsx(
-      SliderNumberField,
-      {
-        label: axis,
-        size: 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__ */ jsx(
-      SliderNumberField,
-      {
-        label: axis,
-        size: 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 = 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
-import {
-  Suspense,
-  memo as memo7,
-  useContext as useContext3,
-  useEffect as useEffect6
-} from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { Object3D as Object3D4 } 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 memo6, useMemo as useMemo5 } from "react";
-import { useShallow as useShallow6 } from "zustand/react/shallow";
-
 // src/renderables/group.tsx
 import {
-  memo as memo2,
+  memo,
   useCallback,
   useEffect as useEffect2,
   useRef,
   useMemo
 } from "react";
 import * as THREE from "three";
-import { useShallow as useShallow2 } from "zustand/react/shallow";
+import { useShallow } from "zustand/react/shallow";
 import {
   instanceOfRawEuler,
   instanceOfRawNumber,
@@ -244,7 +50,7 @@ import {
 // src/hooks/use-features.ts
 import { useEffect, useContext as useContext2 } from "react";
 import { shallow } from "zustand/shallow";
-import { getLookup as getLookup2 } from "@vizij/utils";
+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");
@@ -274,7 +80,7 @@ function useFeatures(namespace, features, callbacks, debugInfo) {
           }
         };
         const defaultValue = animatableValueInfo.default;
-        const lookupKey = getLookup2(namespace, animatableValueInfo.id);
+        const lookupKey = getLookup(namespace, animatableValueInfo.id);
         const unsubscribe = store.subscribe(
           (state) => state.values.get(lookupKey) ?? defaultValue,
           cb,
@@ -321,7 +127,7 @@ function createStoredRenderable(data, animatableValues) {
 }
 
 // src/renderables/group.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
 function InnerRenderedGroup({
   id,
@@ -329,11 +135,11 @@ function InnerRenderedGroup({
   chain
 }) {
   const ref = useRef();
-  const group = useVizijStore(useShallow2((state) => state.world[id]));
+  const group = useVizijStore(useShallow((state) => state.world[id]));
   const refIsNull = !group.refs[namespace]?.current;
-  const animatables = useVizijStore(useShallow2((state) => state.animatables));
+  const animatables = useVizijStore(useShallow((state) => state.animatables));
   const setHoveredElement = useVizijStore(
-    useShallow2((state) => state.setHoveredElement)
+    useShallow((state) => state.setHoveredElement)
   );
   const animatableValues = useMemo(() => {
     const av = {};
@@ -386,7 +192,7 @@ function InnerRenderedGroup({
     }
   });
   const setReference = useVizijStore(
-    useShallow2((state) => state.setReference)
+    useShallow((state) => state.setReference)
   );
   useEffect2(() => {
     if (ref.current && refIsNull) {
@@ -416,7 +222,7 @@ function InnerRenderedGroup({
     },
     [setHoveredElement]
   );
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "group",
     {
       ref,
@@ -424,7 +230,7 @@ function InnerRenderedGroup({
       userData,
       onPointerOver: handlePointerOver,
       onPointerOut: handlePointerOut,
-      children: group.children.map((child) => /* @__PURE__ */ jsx2(
+      children: group.children.map((child) => /* @__PURE__ */ jsx(
         Renderable,
         {
           id: child,
@@ -436,17 +242,17 @@ function InnerRenderedGroup({
     }
   );
 }
-var RenderedGroup = memo2(InnerRenderedGroup);
+var RenderedGroup = memo(InnerRenderedGroup);
 
 // src/renderables/ellipse.tsx
 import {
-  memo as memo3,
+  memo as memo2,
   useCallback as useCallback2,
   useEffect as useEffect3,
   useRef as useRef2,
   useMemo as useMemo2
 } from "react";
-import { useShallow as useShallow3 } from "zustand/react/shallow";
+import { useShallow as useShallow2 } from "zustand/react/shallow";
 import {
   instanceOfRawNumber as instanceOfRawNumber2,
   instanceOfRawVector2 as instanceOfRawVector22,
@@ -456,7 +262,7 @@ import {
   instanceOfRawHSL
 } from "@vizij/utils";
 import { Circle, Line } from "@react-three/drei";
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function InnerRenderedEllipse({
   id,
   namespace,
@@ -468,16 +274,16 @@ function InnerRenderedEllipse({
   const strokeOffsetRef = useRef2(0);
   const strokeWidthRef = useRef2(0);
   const onElementClick = useVizijStore(
-    useShallow3((state) => state.onElementClick)
+    useShallow2((state) => state.onElementClick)
   );
   const setHoveredElement = useVizijStore(
-    useShallow3((state) => state.setHoveredElement)
+    useShallow2((state) => state.setHoveredElement)
   );
   const ellipse = useVizijStore(
-    useShallow3((state) => state.world[id])
+    useShallow2((state) => state.world[id])
   );
   const refIsNull = !ellipse.refs[namespace]?.current;
-  const animatables = useVizijStore(useShallow3((state) => state.animatables));
+  const animatables = useVizijStore(useShallow2((state) => state.animatables));
   const animatableValues = useMemo2(() => {
     const av = {};
     Object.values(ellipse.features).forEach((feat) => {
@@ -664,7 +470,7 @@ function InnerRenderedEllipse({
     }
   });
   const setReference = useVizijStore(
-    useShallow3((state) => state.setReference)
+    useShallow2((state) => state.setReference)
   );
   const points = useMemo2(() => {
     const n = 600;
@@ -697,7 +503,7 @@ function InnerRenderedEllipse({
     [setHoveredElement]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(
       Circle,
       {
         ref: ellipseRef,
@@ -708,10 +514,10 @@ function InnerRenderedEllipse({
         onClick: (e) => {
           onElementClick({ id, type: "ellipse", namespace }, [...chain, id], e);
         },
-        children: /* @__PURE__ */ jsx3("meshStandardMaterial", { attach: "material", ref: materialRef })
+        children: /* @__PURE__ */ jsx2("meshStandardMaterial", { attach: "material", ref: materialRef })
       }
     ),
-    showLine(ellipse) && /* @__PURE__ */ jsx3(
+    showLine(ellipse) && /* @__PURE__ */ jsx2(
       Line,
       {
         ref: lineRef,
@@ -722,7 +528,7 @@ function InnerRenderedEllipse({
     )
   ] });
 }
-var RenderedEllipse = memo3(InnerRenderedEllipse);
+var RenderedEllipse = memo2(InnerRenderedEllipse);
 var showLine = (ellipse) => {
   if ("strokeOpacity" in ellipse.features) {
     return true;
@@ -738,13 +544,13 @@ var showLine = (ellipse) => {
 
 // src/renderables/rectangle.tsx
 import {
-  memo as memo4,
+  memo as memo3,
   useCallback as useCallback3,
   useEffect as useEffect4,
   useRef as useRef3,
   useMemo as useMemo3
 } from "react";
-import { useShallow as useShallow4 } from "zustand/react/shallow";
+import { useShallow as useShallow3 } from "zustand/react/shallow";
 import {
   instanceOfRawNumber as instanceOfRawNumber3,
   instanceOfRawVector2 as instanceOfRawVector23,
@@ -754,7 +560,7 @@ import {
   instanceOfRawHSL as instanceOfRawHSL2
 } from "@vizij/utils";
 import { Plane, Line as Line2 } from "@react-three/drei";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function InnerRenderedRectangle({
   id,
   namespace,
@@ -766,16 +572,16 @@ function InnerRenderedRectangle({
   const strokeOffsetRef = useRef3(0);
   const strokeWidthRef = useRef3(0);
   const onElementClick = useVizijStore(
-    useShallow4((state) => state.onElementClick)
+    useShallow3((state) => state.onElementClick)
   );
   const setHoveredElement = useVizijStore(
-    useShallow4((state) => state.setHoveredElement)
+    useShallow3((state) => state.setHoveredElement)
   );
   const rectangle = useVizijStore(
-    useShallow4((state) => state.world[id])
+    useShallow3((state) => state.world[id])
   );
   const refIsNull = !rectangle.refs[namespace]?.current;
-  const animatables = useVizijStore(useShallow4((state) => state.animatables));
+  const animatables = useVizijStore(useShallow3((state) => state.animatables));
   const animatableValues = useMemo3(() => {
     const av = {};
     Object.values(rectangle.features).forEach((feat) => {
@@ -962,7 +768,7 @@ function InnerRenderedRectangle({
     }
   });
   const setReference = useVizijStore(
-    useShallow4((state) => state.setReference)
+    useShallow3((state) => state.setReference)
   );
   const points = useMemo3(() => {
     return [
@@ -992,7 +798,7 @@ function InnerRenderedRectangle({
     [setHoveredElement]
   );
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx3(
       Plane,
       {
         ref: rectangleRef,
@@ -1007,10 +813,10 @@ function InnerRenderedRectangle({
             e
           );
         },
-        children: /* @__PURE__ */ jsx4("meshStandardMaterial", { attach: "material", ref: materialRef })
+        children: /* @__PURE__ */ jsx3("meshStandardMaterial", { attach: "material", ref: materialRef })
       }
     ),
-    showLine2(rectangle) && /* @__PURE__ */ jsx4(
+    showLine2(rectangle) && /* @__PURE__ */ jsx3(
       Line2,
       {
         ref: lineRef,
@@ -1021,7 +827,7 @@ function InnerRenderedRectangle({
     )
   ] });
 }
-var RenderedRectangle = memo4(InnerRenderedRectangle);
+var RenderedRectangle = memo3(InnerRenderedRectangle);
 var showLine2 = (rectangle) => {
   if ("strokeOpacity" in rectangle.features) {
     return true;
@@ -1037,14 +843,14 @@ var showLine2 = (rectangle) => {
 
 // src/renderables/shape.tsx
 import {
-  memo as memo5,
+  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 useShallow5 } from "zustand/react/shallow";
+import { useShallow as useShallow4 } from "zustand/react/shallow";
 import {
   instanceOfRawEuler as instanceOfRawEuler4,
   instanceOfRawHSL as instanceOfRawHSL3,
@@ -1052,7 +858,7 @@ import {
   instanceOfRawRGB as instanceOfRawRGB3,
   instanceOfRawVector3 as instanceOfRawVector34
 } from "@vizij/utils";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 THREE2.Object3D.DEFAULT_UP.set(0, 0, 1);
 function InnerRenderedShape({
   id,
@@ -1061,12 +867,12 @@ function InnerRenderedShape({
 }) {
   const refGroup = useRef4();
   const ref = useRef4();
-  const shape = useVizijStore(useShallow5((state) => state.world[id]));
+  const shape = useVizijStore(useShallow4((state) => state.world[id]));
   const refs = useVizijStore(
-    useShallow5((state) => state.world[id].refs)
+    useShallow4((state) => state.world[id].refs)
   );
   const refIsNull = !refs[namespace]?.current;
-  const animatables = useVizijStore(useShallow5((state) => state.animatables));
+  const animatables = useVizijStore(useShallow4((state) => state.animatables));
   const animatableValues = useMemo4(() => {
     const av = {};
     Object.values(shape.features).forEach((feat) => {
@@ -1197,12 +1003,12 @@ function InnerRenderedShape({
     },
     shape
   );
-  const setReference = useVizijStore(useShallow5((state) => state.setReference));
+  const setReference = useVizijStore(useShallow4((state) => state.setReference));
   const onElementClick = useVizijStore(
-    useShallow5((state) => state.onElementClick)
+    useShallow4((state) => state.onElementClick)
   );
   const setHoveredElement = useVizijStore(
-    useShallow5((state) => state.setHoveredElement)
+    useShallow4((state) => state.setHoveredElement)
   );
   useEffect5(() => {
     if (ref.current && refIsNull) setReference(shape.id, namespace, ref);
@@ -1254,7 +1060,7 @@ function InnerRenderedShape({
         onElementClick({ id, type: "shape", namespace }, [...chain, id], e);
       },
       children: [
-        shape.material === "basic" && /* @__PURE__ */ jsx5(
+        shape.material === "basic" && /* @__PURE__ */ jsx4(
           "meshBasicMaterial",
           {
             attach: "material",
@@ -1262,7 +1068,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "lambert" && /* @__PURE__ */ jsx5(
+        shape.material === "lambert" && /* @__PURE__ */ jsx4(
           "meshLambertMaterial",
           {
             attach: "material",
@@ -1270,7 +1076,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "phong" && /* @__PURE__ */ jsx5(
+        shape.material === "phong" && /* @__PURE__ */ jsx4(
           "meshPhongMaterial",
           {
             attach: "material",
@@ -1278,7 +1084,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "standard" && /* @__PURE__ */ jsx5(
+        shape.material === "standard" && /* @__PURE__ */ jsx4(
           "meshStandardMaterial",
           {
             attach: "material",
@@ -1286,7 +1092,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "normal" && /* @__PURE__ */ jsx5(
+        shape.material === "normal" && /* @__PURE__ */ jsx4(
           "meshNormalMaterial",
           {
             attach: "material",
@@ -1294,7 +1100,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.children?.map((child) => /* @__PURE__ */ jsx5(
+        shape.children?.map((child) => /* @__PURE__ */ jsx4(
           Renderable,
           {
             id: child,
@@ -1307,7 +1113,7 @@ function InnerRenderedShape({
     }
   );
 }
-var RenderedShape = memo5(InnerRenderedShape);
+var RenderedShape = memo4(InnerRenderedShape);
 var MATERIAL_FEATURE_KEYS = [
   "color",
   "opacity",
@@ -1355,14 +1161,14 @@ function extractMaterialName(name) {
 }
 
 // src/renderables/renderable.tsx
-import { Fragment as Fragment3, jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5 } from "react/jsx-runtime";
 function InnerRenderable({
   id,
   namespace,
   chain
 }) {
-  const type = useVizijStore(useShallow6((state) => state.world[id].type));
-  const refs = useVizijStore(useShallow6((state) => state.world[id].refs));
+  const type = useVizijStore(useShallow5((state) => state.world[id].type));
+  const refs = useVizijStore(useShallow5((state) => state.world[id].refs));
   const resolvedNamespaces = useMemo5(() => {
     let namespaces = [namespace];
     if (namespace in refs) {
@@ -1375,10 +1181,10 @@ function InnerRenderable({
   if (resolvedNamespaces.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx6(Fragment3, { children: resolvedNamespaces.map((ns) => {
+  return /* @__PURE__ */ jsx5(Fragment3, { children: resolvedNamespaces.map((ns) => {
     switch (type) {
       case "group":
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx5(
           RenderedGroup,
           {
             id,
@@ -1388,7 +1194,7 @@ function InnerRenderable({
           `${ns}.${id}`
         );
       case "ellipse":
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx5(
           RenderedEllipse,
           {
             id,
@@ -1398,7 +1204,7 @@ function InnerRenderable({
           `${ns}.${id}`
         );
       case "rectangle":
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx5(
           RenderedRectangle,
           {
             id,
@@ -1408,7 +1214,7 @@ function InnerRenderable({
           `${ns}.${id}`
         );
       case "shape":
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx5(
           RenderedShape,
           {
             id,
@@ -1422,14 +1228,14 @@ function InnerRenderable({
     }
   }) });
 }
-var Renderable = memo6(InnerRenderable);
+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 getLookup3 } from "@vizij/utils";
+import { getLookup as getLookup2 } from "@vizij/utils";
 
 // src/actions/create-new-element.ts
 import { createRef } from "react";
@@ -1725,7 +1531,7 @@ var VizijSlice = (set, get) => ({
   setValue: (id, namespace, value) => {
     set(
       produce((state) => {
-        const lookupId = getLookup3(namespace, id);
+        const lookupId = getLookup2(namespace, id);
         if (typeof value === "function") {
           const current = state.values.get(lookupId);
           if (current !== void 0) {
@@ -1872,8 +1678,8 @@ var VizijSlice = (set, get) => ({
   setSlot: (parentId, parentNamespace, childId, childNamespace) => {
     set(
       produce((state) => {
-        const parentLookupId = getLookup3(parentNamespace, parentId);
-        const childLookupId = getLookup3(childNamespace, childId);
+        const parentLookupId = getLookup2(parentNamespace, parentId);
+        const childLookupId = getLookup2(childNamespace, childId);
         state.slotConfig[parentLookupId] = childLookupId;
       })
     );
@@ -1892,7 +1698,7 @@ var VizijSlice = (set, get) => ({
   clearSlot: (parentId, parentNamespace) => {
     set(
       produce((state) => {
-        const parentLookupId = getLookup3(parentNamespace, parentId);
+        const parentLookupId = getLookup2(parentNamespace, parentId);
         delete state.slotConfig[parentLookupId];
       })
     );
@@ -1942,7 +1748,7 @@ var createVizijStore = (initial) => create()(
 );
 
 // src/vizij.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 Object3D4.DEFAULT_UP.set(0, 0, 1);
 function Vizij({
   style,
@@ -1954,14 +1760,14 @@ function Vizij({
 }) {
   const ctx = useContext3(VizijContext);
   if (ctx) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       Canvas,
       {
         shadows: false,
         style,
         className,
         onPointerMissed,
-        children: /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsx6(
           MemoizedInnerVizij,
           {
             rootId,
@@ -1972,13 +1778,13 @@ function Vizij({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx7(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ jsx6(
       Canvas,
       {
         style,
         className,
         onPointerMissed,
-        children: /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsx6(
           MemoizedInnerVizij,
           {
             rootId,
@@ -2001,8 +1807,8 @@ function InnerVizij({
     height: container.height * container.resolution
   } : void 0;
   return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx7("ambientLight", { intensity: Math.PI / 2 }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx6("ambientLight", { intensity: Math.PI / 2 }),
+    /* @__PURE__ */ jsx6(
       OrthographicCamera,
       {
         makeDefault: true,
@@ -2011,7 +1817,7 @@ function InnerVizij({
         far: 101
       }
     ),
-    /* @__PURE__ */ jsx7(Suspense, { fallback: null, children: /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx6(Suspense, { fallback: null, children: /* @__PURE__ */ jsx6(
       World,
       {
         rootId,
@@ -2019,17 +1825,17 @@ function InnerVizij({
         parentSizing: sceneParentSizing
       }
     ) }),
-    showSafeArea && /* @__PURE__ */ jsx7(SafeAreaRenderer, { rootId })
+    showSafeArea && /* @__PURE__ */ jsx6(SafeAreaRenderer, { rootId })
   ] });
 }
-var MemoizedInnerVizij = memo7(InnerVizij);
+var MemoizedInnerVizij = memo6(InnerVizij);
 function InnerWorld({
   rootId,
   namespace = "default",
   parentSizing
 }) {
   const [present, rootBounds] = useVizijStore(
-    useShallow7((state) => {
+    useShallow6((state) => {
       const group = state.world[rootId];
       const bounds = group?.rootBounds ?? defaultRootBounds;
       return [group !== void 0, bounds];
@@ -2068,8 +1874,8 @@ function InnerWorld({
     }
   }, [rootBounds, camera, parentSizing, size]);
   return /* @__PURE__ */ jsxs4(ErrorBoundary, { fallback: null, children: [
-    present && /* @__PURE__ */ jsx7(Renderable, { id: rootId, namespace, chain: [] }),
-    !present && /* @__PURE__ */ jsx7(
+    present && /* @__PURE__ */ jsx6(Renderable, { id: rootId, namespace, chain: [] }),
+    !present && /* @__PURE__ */ jsx6(
       Text,
       {
         position: [0, 0, 0],
@@ -2082,7 +1888,7 @@ function InnerWorld({
     )
   ] });
 }
-var World = memo7(InnerWorld);
+var World = memo6(InnerWorld);
 function SafeAreaRenderer({ rootId }) {
   const rootBounds = useVizijStore((state) => {
     const group = state.world[rootId];
@@ -2092,7 +1898,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__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Line3,
     {
       points: [
@@ -3098,7 +2904,6 @@ function exportScene(data, fileNameOrOptions = "scene.glb") {
   }
 }
 export {
-  Controller,
   EmptyModelError,
   InnerVizij,
   ShapeMaterial,