@vizij/render 0.0.1

package/dist/index.mjs

@@ -0,0 +1,2727 @@
+// src/controllers/controller.tsx
+import { memo } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { clsx } from "clsx";
+import {
+  getLookup
+} from "@vizij/utils";
+import { ColorPickerPopover, SliderNumberField, Size } from "@semio/ui";
+
+// src/hooks/use-vizij-store.ts
+import { useContext } from "react";
+import { useStore } from "zustand";
+
+// src/context.ts
+import { createContext } from "react";
+var VizijContext = createContext(null);
+
+// src/hooks/use-vizij-store.ts
+function useVizijStore(selector) {
+  const store = useContext(VizijContext);
+  if (!store) throw new Error("Missing VizijProvider in the tree");
+  return useStore(store, selector);
+}
+
+// src/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,
+  useCallback,
+  useEffect as useEffect2,
+  useRef,
+  useMemo
+} from "react";
+import * as THREE from "three";
+import { useShallow as useShallow2 } from "zustand/react/shallow";
+import {
+  instanceOfRawEuler,
+  instanceOfRawNumber,
+  instanceOfRawVector2,
+  instanceOfRawVector3
+} from "@vizij/utils";
+
+// src/hooks/use-features.ts
+import { useEffect, useContext as useContext2 } from "react";
+import { shallow } from "zustand/shallow";
+import { getLookup as getLookup2 } from "@vizij/utils";
+function useFeatures(namespace, features, callbacks, debugInfo) {
+  const store = useContext2(VizijContext);
+  if (!store) throw new Error("Missing VizijProvider in the tree");
+  useEffect(() => {
+    const unsubsribes = [];
+    Object.keys(callbacks).forEach((key) => {
+      if (!(key in features)) {
+        return;
+      }
+      const featureInfo = features[key];
+      if (!featureInfo.animated) {
+        callbacks[key](featureInfo.value);
+      } else {
+        const animatableValueInfo = store.getState().animatables[featureInfo.value];
+        if (!animatableValueInfo) {
+          console.error(
+            `Feature with id ${key} is animated but the animated value with id ${featureInfo.value} is not found`,
+            debugInfo
+          );
+          return;
+        }
+        const cb = (value) => {
+          if (value === void 0) {
+            callbacks[key](animatableValueInfo.default);
+          } else {
+            callbacks[key](value);
+          }
+        };
+        const defaultValue = animatableValueInfo.default;
+        const lookupKey = getLookup2(namespace, animatableValueInfo.id);
+        const unsubscribe = store.subscribe(
+          (state) => state.values.get(lookupKey) ?? defaultValue,
+          cb,
+          { equalityFn: shallow, fireImmediately: true }
+        );
+        unsubsribes.push(unsubscribe);
+      }
+    });
+    return () => {
+      unsubsribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [features, callbacks, store, debugInfo, namespace]);
+}
+
+// src/functions/create-stored-data.ts
+import { omit } from "lodash";
+
+// src/functions/create-stored-features.ts
+import { mapValues } from "lodash";
+function createStoredFeatures(objectFeatures, animatableValues) {
+  return mapValues(objectFeatures, (feat) => {
+    if (feat.animated) {
+      const storedFeat = {
+        animated: true,
+        value: animatableValues[feat.value],
+        ...feat.label ? { label: feat.label } : {}
+      };
+      return storedFeat;
+    } else {
+      const staticFeature = feat;
+      return staticFeature.label ? { ...staticFeature } : staticFeature;
+    }
+  });
+}
+
+// src/functions/create-stored-data.ts
+function createStoredRenderable(data, animatableValues) {
+  const d = omit(data, "refs", "geometry");
+  const storedFeatures = createStoredFeatures(
+    data.features,
+    animatableValues
+  );
+  return { ...d, features: storedFeatures };
+}
+
+// src/renderables/group.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
+function InnerRenderedGroup({
+  id,
+  namespace,
+  chain
+}) {
+  const ref = useRef();
+  const group = useVizijStore(useShallow2((state) => state.world[id]));
+  const refIsNull = !group.refs[namespace]?.current;
+  const animatables = useVizijStore(useShallow2((state) => state.animatables));
+  const setHoveredElement = useVizijStore(
+    useShallow2((state) => state.setHoveredElement)
+  );
+  const animatableValues = useMemo(() => {
+    const av = {};
+    Object.values(group.features).forEach((feat) => {
+      if (feat.animated) {
+        const animatable = animatables[feat.value];
+        av[animatable.id] = animatable;
+      }
+    });
+    return av;
+  }, [group.features, animatables]);
+  const userData = {
+    gltfExtensions: {
+      RobotData: createStoredRenderable(group, animatableValues)
+    }
+  };
+  useFeatures(namespace, group.features, {
+    translation: (pos) => {
+      if (ref.current?.position && instanceOfRawVector3(pos)) {
+        ref.current.position.set(
+          pos.x,
+          pos.y,
+          pos.z
+        );
+      } else if (ref.current?.position && instanceOfRawVector2(pos)) {
+        const currentZ = ref.current.position.z;
+        ref.current.position.set(pos.x, pos.y, currentZ);
+      }
+    },
+    rotation: (rot) => {
+      if (ref.current?.rotation && instanceOfRawEuler(rot)) {
+        ref.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
+      } else if (ref.current?.rotation && instanceOfRawNumber(rot)) {
+        ref.current.rotation.set(0, 0, 0);
+        ref.current.rotateZ(rot);
+      }
+    },
+    scale: (scale) => {
+      if (ref.current?.scale && instanceOfRawVector3(scale)) {
+        if (scale.x === null || scale.y === null || scale.z === null) {
+          ref.current.scale.set(0.1, 0.1, 0.1);
+          return;
+        }
+        ref.current.scale.set(scale.x, scale.y, scale.z);
+      } else if (ref.current && instanceOfRawNumber(scale)) {
+        ref.current.scale.set(scale, scale, scale);
+      } else if (ref.current) {
+        ref.current.scale.set(1, 1, 1);
+      }
+    }
+  });
+  const setReference = useVizijStore(
+    useShallow2((state) => state.setReference)
+  );
+  useEffect2(() => {
+    if (ref.current && refIsNull) {
+      setReference(group.id, namespace, ref);
+    }
+  }, [group.id, namespace, ref, setReference, refIsNull]);
+  const handlePointerOver = useCallback(
+    (event) => {
+      if (event.eventObject !== event.object) {
+        return;
+      }
+      setHoveredElement({ id, namespace, type: "group" });
+    },
+    [id, namespace, setHoveredElement]
+  );
+  const handlePointerOut = useCallback(
+    (event) => {
+      if (event.eventObject !== event.object) {
+        return;
+      }
+      setHoveredElement(null);
+    },
+    [setHoveredElement]
+  );
+  return /* @__PURE__ */ jsx2(
+    "group",
+    {
+      ref,
+      uuid: `${namespace}.${group.id}`,
+      userData,
+      onPointerOver: handlePointerOver,
+      onPointerOut: handlePointerOut,
+      children: group.children.map((child) => /* @__PURE__ */ jsx2(
+        Renderable,
+        {
+          id: child,
+          namespace,
+          chain: [...chain, id]
+        },
+        child
+      ))
+    }
+  );
+}
+var RenderedGroup = memo2(InnerRenderedGroup);
+
+// src/renderables/ellipse.tsx
+import {
+  memo as memo3,
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useRef as useRef2,
+  useMemo as useMemo2
+} from "react";
+import { useShallow as useShallow3 } from "zustand/react/shallow";
+import {
+  instanceOfRawNumber as instanceOfRawNumber2,
+  instanceOfRawVector2 as instanceOfRawVector22,
+  instanceOfRawVector3 as instanceOfRawVector32,
+  instanceOfRawEuler as instanceOfRawEuler2,
+  instanceOfRawRGB,
+  instanceOfRawHSL
+} from "@vizij/utils";
+import { Circle, Line } from "@react-three/drei";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+function InnerRenderedEllipse({
+  id,
+  namespace,
+  chain
+}) {
+  const ellipseRef = useRef2();
+  const materialRef = useRef2();
+  const lineRef = useRef2();
+  const strokeOffsetRef = useRef2(0);
+  const strokeWidthRef = useRef2(0);
+  const onElementClick = useVizijStore(
+    useShallow3((state) => state.onElementClick)
+  );
+  const setHoveredElement = useVizijStore(
+    useShallow3((state) => state.setHoveredElement)
+  );
+  const ellipse = useVizijStore(
+    useShallow3((state) => state.world[id])
+  );
+  const refIsNull = !ellipse.refs[namespace]?.current;
+  const animatables = useVizijStore(useShallow3((state) => state.animatables));
+  const animatableValues = useMemo2(() => {
+    const av = {};
+    Object.values(ellipse.features).forEach((feat) => {
+      if (feat.animated) {
+        const animatable = animatables[feat.value];
+        av[animatable.id] = animatable;
+      }
+    });
+    return av;
+  }, [ellipse.features, animatables]);
+  const selectionData = useMemo2(
+    () => ({ id, namespace, type: "ellipse" }),
+    [id, namespace]
+  );
+  const userData = useMemo2(
+    () => ({
+      gltfExtensions: {
+        RobotData: createStoredRenderable(ellipse, animatableValues)
+      },
+      selection: selectionData
+    }),
+    [ellipse, animatableValues, selectionData]
+  );
+  useFeatures(namespace, ellipse.features, {
+    translation: (pos) => {
+      if (ellipseRef.current?.position && instanceOfRawVector32(pos)) {
+        ellipseRef.current.position.set(
+          pos.x,
+          pos.y,
+          pos.z
+        );
+      } else if (ellipseRef.current?.position && instanceOfRawVector22(pos)) {
+        const currentZ = ellipseRef.current.position.z;
+        ellipseRef.current.position.set(
+          pos.x,
+          pos.y,
+          currentZ
+        );
+      }
+      if (lineRef.current?.position && instanceOfRawVector32(pos)) {
+        lineRef.current.position.set(
+          pos.x,
+          pos.y,
+          pos.z
+        );
+      } else if (lineRef.current?.position && instanceOfRawVector22(pos)) {
+        const currentZ = lineRef.current.position.z;
+        lineRef.current.position.set(
+          pos.x,
+          pos.y,
+          currentZ
+        );
+      }
+    },
+    rotation: (rot) => {
+      if (ellipseRef.current?.rotation && instanceOfRawEuler2(rot)) {
+        ellipseRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
+      } else if (ellipseRef.current?.rotation && instanceOfRawNumber2(rot)) {
+        ellipseRef.current.rotation.set(0, 0, 0);
+        ellipseRef.current.rotateZ(rot);
+      }
+      if (lineRef.current?.rotation && instanceOfRawEuler2(rot)) {
+        lineRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
+      } else if (lineRef.current?.rotation && instanceOfRawNumber2(rot)) {
+        lineRef.current.rotation.set(0, 0, 0);
+        lineRef.current.rotateZ(rot);
+      }
+    },
+    fillOpacity: (op) => {
+      if (materialRef.current?.opacity !== void 0 && instanceOfRawNumber2(op)) {
+        materialRef.current.opacity = op;
+        if (op < 1) {
+          materialRef.current.transparent = true;
+        } else {
+          materialRef.current.transparent = false;
+        }
+        materialRef.current.needsUpdate = true;
+      }
+    },
+    fillColor: (color) => {
+      if (materialRef.current?.color) {
+        if (instanceOfRawRGB(color)) {
+          materialRef.current.color.setRGB(color.r, color.g, color.b);
+          materialRef.current.needsUpdate = true;
+        } else if (instanceOfRawHSL(color)) {
+          materialRef.current.color.setHSL(color.h, color.s, color.l);
+          materialRef.current.needsUpdate = true;
+        }
+      }
+    },
+    height: (height) => {
+      if (ellipseRef.current && instanceOfRawNumber2(height)) {
+        ellipseRef.current.scale.set(ellipseRef.current.scale.x, height, 1);
+      }
+      if (ellipseRef.current && lineRef.current && instanceOfRawNumber2(height)) {
+        const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
+        lineRef.current.scale.set(
+          ellipseRef.current.scale.x + offset,
+          height + offset,
+          1
+        );
+      }
+    },
+    width: (width) => {
+      if (ellipseRef.current && instanceOfRawNumber2(width)) {
+        ellipseRef.current.scale.set(width, ellipseRef.current.scale.y, 1);
+      }
+      if (ellipseRef.current && lineRef.current && instanceOfRawNumber2(width)) {
+        const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
+        lineRef.current.scale.set(
+          width + offset,
+          ellipseRef.current.scale.y + offset,
+          1
+        );
+      }
+    },
+    strokeOpacity: (strokeOpacity) => {
+      if (lineRef.current?.material && instanceOfRawNumber2(strokeOpacity)) {
+        lineRef.current.material.opacity = strokeOpacity;
+        if (strokeOpacity < 1) {
+          lineRef.current.material.transparent = true;
+        } else {
+          lineRef.current.material.transparent = false;
+        }
+        lineRef.current.material.needsUpdate = true;
+      }
+    },
+    strokeColor: (strokeColor) => {
+      if (lineRef.current?.material.color) {
+        if (instanceOfRawRGB(strokeColor)) {
+          lineRef.current.material.color.setRGB(
+            strokeColor.r,
+            strokeColor.g,
+            strokeColor.b
+          );
+          lineRef.current.material.needsUpdate = true;
+        } else if (instanceOfRawHSL(strokeColor)) {
+          lineRef.current.material.color.setHSL(
+            strokeColor.h,
+            strokeColor.s,
+            strokeColor.l
+          );
+          lineRef.current.material.needsUpdate = true;
+        }
+      }
+    },
+    strokeWidth: (strokeWidth) => {
+      if (lineRef.current?.material && ellipseRef.current) {
+        if (instanceOfRawNumber2(strokeWidth)) {
+          strokeWidthRef.current = strokeWidth;
+          const offset = strokeWidth * strokeOffsetRef.current / 2 + strokeOffsetRef.current * -1;
+          lineRef.current.scale.set(
+            ellipseRef.current.scale.x + offset,
+            ellipseRef.current.scale.y + offset,
+            1
+          );
+          lineRef.current.material.linewidth = strokeWidth;
+          lineRef.current.material.needsUpdate = true;
+        }
+      }
+    },
+    strokeOffset: (strokeOffset) => {
+      if (lineRef.current?.material && ellipseRef.current) {
+        if (instanceOfRawNumber2(strokeOffset)) {
+          strokeOffsetRef.current = strokeOffset;
+          const offset = strokeOffset * strokeWidthRef.current / 2 + strokeOffset * -1;
+          lineRef.current.scale.set(
+            ellipseRef.current.scale.x + offset,
+            ellipseRef.current.scale.y + offset,
+            1
+          );
+        }
+      }
+    }
+  });
+  const setReference = useVizijStore(
+    useShallow3((state) => state.setReference)
+  );
+  const points = useMemo2(() => {
+    const n = 600;
+    const p = [];
+    const angleStep = 2 * Math.PI / n;
+    for (let i = 0; i < n; i++) {
+      const angle = i * angleStep;
+      const x = Math.cos(angle);
+      const y = Math.sin(angle);
+      p.push([x, y, 0]);
+    }
+    return p;
+  }, []);
+  useEffect3(() => {
+    if (ellipseRef.current && refIsNull)
+      setReference(ellipse.id, namespace, ellipseRef);
+  }, [ellipse.id, namespace, ellipseRef, setReference, refIsNull]);
+  const handlePointerOver = useCallback2(
+    (event) => {
+      event.stopPropagation();
+      setHoveredElement({ id, namespace, type: "ellipse" });
+    },
+    [id, namespace, setHoveredElement]
+  );
+  const handlePointerOut = useCallback2(
+    (event) => {
+      event.stopPropagation();
+      setHoveredElement(null);
+    },
+    [setHoveredElement]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      Circle,
+      {
+        ref: ellipseRef,
+        userData,
+        args: [1, 100],
+        onPointerOver: handlePointerOver,
+        onPointerOut: handlePointerOut,
+        onClick: (e) => {
+          onElementClick({ id, type: "ellipse", namespace }, [...chain, id], e);
+        },
+        children: /* @__PURE__ */ jsx3("meshStandardMaterial", { attach: "material", ref: materialRef })
+      }
+    ),
+    showLine(ellipse) && /* @__PURE__ */ jsx3(
+      Line,
+      {
+        ref: lineRef,
+        points,
+        onPointerOver: handlePointerOver,
+        onPointerOut: handlePointerOut
+      }
+    )
+  ] });
+}
+var RenderedEllipse = memo3(InnerRenderedEllipse);
+var showLine = (ellipse) => {
+  if ("strokeOpacity" in ellipse.features) {
+    return true;
+  } else if ("strokeColor" in ellipse.features) {
+    return true;
+  } else if ("strokeWidth" in ellipse.features) {
+    return true;
+  } else if ("strokeOffset" in ellipse.features) {
+    return true;
+  }
+  return false;
+};
+
+// src/renderables/rectangle.tsx
+import {
+  memo as memo4,
+  useCallback as useCallback3,
+  useEffect as useEffect4,
+  useRef as useRef3,
+  useMemo as useMemo3
+} from "react";
+import { useShallow as useShallow4 } from "zustand/react/shallow";
+import {
+  instanceOfRawNumber as instanceOfRawNumber3,
+  instanceOfRawVector2 as instanceOfRawVector23,
+  instanceOfRawVector3 as instanceOfRawVector33,
+  instanceOfRawEuler as instanceOfRawEuler3,
+  instanceOfRawRGB as instanceOfRawRGB2,
+  instanceOfRawHSL as instanceOfRawHSL2
+} from "@vizij/utils";
+import { Plane, Line as Line2 } from "@react-three/drei";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function InnerRenderedRectangle({
+  id,
+  namespace,
+  chain
+}) {
+  const rectangleRef = useRef3();
+  const materialRef = useRef3();
+  const lineRef = useRef3();
+  const strokeOffsetRef = useRef3(0);
+  const strokeWidthRef = useRef3(0);
+  const onElementClick = useVizijStore(
+    useShallow4((state) => state.onElementClick)
+  );
+  const setHoveredElement = useVizijStore(
+    useShallow4((state) => state.setHoveredElement)
+  );
+  const rectangle = useVizijStore(
+    useShallow4((state) => state.world[id])
+  );
+  const refIsNull = !rectangle.refs[namespace]?.current;
+  const animatables = useVizijStore(useShallow4((state) => state.animatables));
+  const animatableValues = useMemo3(() => {
+    const av = {};
+    Object.values(rectangle.features).forEach((feat) => {
+      if (feat.animated) {
+        const animatable = animatables[feat.value];
+        av[animatable.id] = animatable;
+      }
+    });
+    return av;
+  }, [rectangle.features, animatables]);
+  const selectionData = useMemo3(
+    () => ({ id, namespace, type: "rectangle" }),
+    [id, namespace]
+  );
+  const userData = useMemo3(
+    () => ({
+      gltfExtensions: {
+        RobotData: createStoredRenderable(rectangle, animatableValues)
+      },
+      selection: selectionData
+    }),
+    [rectangle, animatableValues, selectionData]
+  );
+  useFeatures(namespace, rectangle.features, {
+    translation: (pos) => {
+      if (rectangleRef.current?.position && instanceOfRawVector33(pos)) {
+        rectangleRef.current.position.set(
+          pos.x,
+          pos.y,
+          pos.z
+        );
+      } else if (rectangleRef.current?.position && instanceOfRawVector23(pos)) {
+        const currentZ = rectangleRef.current.position.z;
+        rectangleRef.current.position.set(
+          pos.x,
+          pos.y,
+          currentZ
+        );
+      }
+      if (lineRef.current?.position && instanceOfRawVector33(pos)) {
+        lineRef.current.position.set(
+          pos.x,
+          pos.y,
+          pos.z
+        );
+      } else if (lineRef.current?.position && instanceOfRawVector23(pos)) {
+        const currentZ = lineRef.current.position.z;
+        lineRef.current.position.set(
+          pos.x,
+          pos.y,
+          currentZ
+        );
+      }
+    },
+    rotation: (rot) => {
+      if (rectangleRef.current?.rotation && instanceOfRawEuler3(rot)) {
+        rectangleRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
+      } else if (rectangleRef.current?.rotation && instanceOfRawNumber3(rot)) {
+        rectangleRef.current.rotation.set(0, 0, 0);
+        rectangleRef.current.rotateZ(rot);
+      }
+      if (lineRef.current?.rotation && instanceOfRawEuler3(rot)) {
+        lineRef.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
+      } else if (lineRef.current?.rotation && instanceOfRawNumber3(rot)) {
+        lineRef.current.rotation.set(0, 0, 0);
+        lineRef.current.rotateZ(rot);
+      }
+    },
+    fillOpacity: (op) => {
+      if (materialRef.current?.opacity !== void 0 && instanceOfRawNumber3(op)) {
+        materialRef.current.opacity = op;
+        if (op < 1) {
+          materialRef.current.transparent = true;
+        } else {
+          materialRef.current.transparent = false;
+        }
+        materialRef.current.needsUpdate = true;
+      }
+    },
+    fillColor: (color) => {
+      if (materialRef.current?.color) {
+        if (instanceOfRawRGB2(color)) {
+          materialRef.current.color.setRGB(color.r, color.g, color.b);
+          materialRef.current.needsUpdate = true;
+        } else if (instanceOfRawHSL2(color)) {
+          materialRef.current.color.setHSL(color.h, color.s, color.l);
+          materialRef.current.needsUpdate = true;
+        }
+      }
+    },
+    height: (height) => {
+      if (rectangleRef.current && instanceOfRawNumber3(height)) {
+        rectangleRef.current.scale.set(rectangleRef.current.scale.x, height, 1);
+      }
+      if (rectangleRef.current && lineRef.current && instanceOfRawNumber3(height)) {
+        const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
+        lineRef.current.scale.set(
+          rectangleRef.current.scale.x + offset,
+          height + offset,
+          1
+        );
+      }
+    },
+    width: (width) => {
+      if (rectangleRef.current && instanceOfRawNumber3(width)) {
+        rectangleRef.current.scale.set(width, rectangleRef.current.scale.y, 1);
+      }
+      if (rectangleRef.current && lineRef.current && instanceOfRawNumber3(width)) {
+        const offset = strokeOffsetRef.current * strokeWidthRef.current / 2 + strokeOffsetRef.current * -1;
+        lineRef.current.scale.set(
+          width + offset,
+          rectangleRef.current.scale.y + offset,
+          1
+        );
+      }
+    },
+    strokeOpacity: (strokeOpacity) => {
+      if (lineRef.current?.material && instanceOfRawNumber3(strokeOpacity)) {
+        lineRef.current.material.opacity = strokeOpacity;
+        if (strokeOpacity < 1) {
+          lineRef.current.material.transparent = true;
+        } else {
+          lineRef.current.material.transparent = false;
+        }
+        lineRef.current.material.needsUpdate = true;
+      }
+    },
+    strokeColor: (strokeColor) => {
+      if (lineRef.current?.material.color) {
+        if (instanceOfRawRGB2(strokeColor)) {
+          lineRef.current.material.color.setRGB(
+            strokeColor.r,
+            strokeColor.g,
+            strokeColor.b
+          );
+          lineRef.current.material.needsUpdate = true;
+        } else if (instanceOfRawHSL2(strokeColor)) {
+          lineRef.current.material.color.setHSL(
+            strokeColor.h,
+            strokeColor.s,
+            strokeColor.l
+          );
+          lineRef.current.material.needsUpdate = true;
+        }
+      }
+    },
+    strokeWidth: (strokeWidth) => {
+      if (lineRef.current?.material && rectangleRef.current) {
+        if (instanceOfRawNumber3(strokeWidth)) {
+          strokeWidthRef.current = strokeWidth;
+          const offset = strokeWidth * strokeOffsetRef.current / 2 + strokeOffsetRef.current * -1;
+          lineRef.current.scale.set(
+            rectangleRef.current.scale.x + offset,
+            rectangleRef.current.scale.y + offset,
+            1
+          );
+          lineRef.current.material.linewidth = strokeWidth;
+          lineRef.current.material.needsUpdate = true;
+        }
+      }
+    },
+    strokeOffset: (strokeOffset) => {
+      if (lineRef.current?.material && rectangleRef.current) {
+        if (instanceOfRawNumber3(strokeOffset)) {
+          strokeOffsetRef.current = strokeOffset;
+          const offset = strokeOffset * strokeWidthRef.current / 2 + strokeOffset * -1;
+          lineRef.current.scale.set(
+            rectangleRef.current.scale.x + offset,
+            rectangleRef.current.scale.y + offset,
+            1
+          );
+        }
+      }
+    }
+  });
+  const setReference = useVizijStore(
+    useShallow4((state) => state.setReference)
+  );
+  const points = useMemo3(() => {
+    return [
+      [-0.5, 0.5, 0],
+      [0.5, 0.5, 0],
+      [0.5, -0.5, 0],
+      [-0.5, -0.5, 0],
+      [-0.5, 0.5, 0]
+    ];
+  }, []);
+  useEffect4(() => {
+    if (rectangleRef.current && refIsNull)
+      setReference(rectangle.id, namespace, rectangleRef);
+  }, [rectangle.id, namespace, rectangleRef, setReference, refIsNull]);
+  const handlePointerOver = useCallback3(
+    (event) => {
+      event.stopPropagation();
+      setHoveredElement({ id, namespace, type: "rectangle" });
+    },
+    [id, namespace, setHoveredElement]
+  );
+  const handlePointerOut = useCallback3(
+    (event) => {
+      event.stopPropagation();
+      setHoveredElement(null);
+    },
+    [setHoveredElement]
+  );
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(
+      Plane,
+      {
+        ref: rectangleRef,
+        userData,
+        args: [1, 1],
+        onPointerOver: handlePointerOver,
+        onPointerOut: handlePointerOut,
+        onClick: (e) => {
+          onElementClick(
+            { id, type: "rectangle", namespace },
+            [...chain, id],
+            e
+          );
+        },
+        children: /* @__PURE__ */ jsx4("meshStandardMaterial", { attach: "material", ref: materialRef })
+      }
+    ),
+    showLine2(rectangle) && /* @__PURE__ */ jsx4(
+      Line2,
+      {
+        ref: lineRef,
+        points,
+        onPointerOver: handlePointerOver,
+        onPointerOut: handlePointerOut
+      }
+    )
+  ] });
+}
+var RenderedRectangle = memo4(InnerRenderedRectangle);
+var showLine2 = (rectangle) => {
+  if ("strokeOpacity" in rectangle.features) {
+    return true;
+  } else if ("strokeColor" in rectangle.features) {
+    return true;
+  } else if ("strokeWidth" in rectangle.features) {
+    return true;
+  } else if ("strokeOffset" in rectangle.features) {
+    return true;
+  }
+  return false;
+};
+
+// src/renderables/shape.tsx
+import {
+  memo as memo5,
+  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 {
+  instanceOfRawEuler as instanceOfRawEuler4,
+  instanceOfRawHSL as instanceOfRawHSL3,
+  instanceOfRawNumber as instanceOfRawNumber4,
+  instanceOfRawRGB as instanceOfRawRGB3,
+  instanceOfRawVector3 as instanceOfRawVector34
+} from "@vizij/utils";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+THREE2.Object3D.DEFAULT_UP.set(0, 0, 1);
+function InnerRenderedShape({
+  id,
+  namespace,
+  chain
+}) {
+  const refGroup = useRef4();
+  const ref = useRef4();
+  const shape = useVizijStore(useShallow5((state) => state.world[id]));
+  const refs = useVizijStore(
+    useShallow5((state) => state.world[id].refs)
+  );
+  const refIsNull = !refs[namespace]?.current;
+  const animatables = useVizijStore(useShallow5((state) => state.animatables));
+  const animatableValues = useMemo4(() => {
+    const av = {};
+    Object.values(shape.features).forEach((feat) => {
+      if (feat.animated) {
+        const animatable = animatables[feat.value];
+        av[animatable.id] = animatable;
+      }
+    });
+    return av;
+  }, [shape.features, animatables]);
+  const geometry = useMemo4(() => shape.geometry.clone(), [shape.geometry]);
+  const selectionData = useMemo4(
+    () => ({ id, namespace, type: "shape" }),
+    [id, namespace]
+  );
+  const userData = useMemo4(
+    () => ({
+      gltfExtensions: {
+        RobotData: createStoredRenderable(shape, animatableValues)
+      },
+      selection: selectionData
+    }),
+    [shape, animatableValues, selectionData]
+  );
+  const material = useRef4();
+  const morphTargetSettings = useMemo4(() => {
+    if (shape.morphTargets) {
+      const dictionary = shape.morphTargets.reduce(
+        (acc, target, i) => ({ ...acc, [target]: i }),
+        {}
+      );
+      const initialInfluences = shape.morphTargets.map(() => 0);
+      const morphFeatureHandlers = {};
+      shape.morphTargets.forEach((target, i) => {
+        morphFeatureHandlers[target] = (value) => {
+          if (ref.current?.morphTargetInfluences && instanceOfRawNumber4(value)) {
+            ref.current.morphTargetInfluences[i] = value;
+          }
+        };
+      });
+      return [dictionary, initialInfluences, morphFeatureHandlers];
+    } else {
+      return [void 0, void 0, {}];
+    }
+  }, [shape.morphTargets]);
+  useFeatures(
+    namespace,
+    shape.features,
+    {
+      translation: (pos) => {
+        if (ref.current?.position && instanceOfRawVector34(pos)) {
+          ref.current.position.set(
+            pos.x,
+            pos.y,
+            pos.z
+          );
+        }
+        if (refGroup.current?.position && instanceOfRawVector34(pos)) {
+          refGroup.current.position.set(
+            pos.x,
+            pos.y,
+            pos.z
+          );
+        }
+      },
+      rotation: (rot) => {
+        if (ref.current?.rotation && instanceOfRawEuler4(rot)) {
+          ref.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
+        }
+        if (refGroup.current?.rotation && instanceOfRawEuler4(rot)) {
+          refGroup.current.rotation.set(rot.x, rot.y, rot.z, "ZYX");
+        }
+      },
+      scale: (scale) => {
+        if (ref.current?.scale && instanceOfRawVector34(scale)) {
+          ref.current.scale.set(scale.x, scale.y, scale.z);
+        } else if (ref.current && instanceOfRawNumber4(scale)) {
+          ref.current.scale.set(scale, scale, scale);
+        } else if (ref.current) {
+          ref.current.scale.set(1, 1, 1);
+        }
+      },
+      opacity: (op) => {
+        if (material.current?.opacity !== void 0 && instanceOfRawNumber4(op)) {
+          material.current.opacity = op;
+          if (op < 1) {
+            material.current.transparent = true;
+          } else {
+            material.current.transparent = false;
+          }
+          material.current.needsUpdate = true;
+        }
+      },
+      color: (color) => {
+        if ((material.current || void 0)?.color && instanceOfRawRGB3(color)) {
+          material.current.color.setRGB(
+            color.r,
+            color.g,
+            color.b
+          );
+          if ((material.current || void 0)?.color) {
+            material.current.needsUpdate = true;
+          }
+        } else if (material.current && instanceOfRawHSL3(color)) {
+          material.current.color.setHSL(
+            color.h,
+            color.s,
+            color.l
+          );
+        }
+      },
+      ...morphTargetSettings[2]
+    },
+    shape
+  );
+  const setReference = useVizijStore(useShallow5((state) => state.setReference));
+  const onElementClick = useVizijStore(
+    useShallow5((state) => state.onElementClick)
+  );
+  const setHoveredElement = useVizijStore(
+    useShallow5((state) => state.setHoveredElement)
+  );
+  useEffect5(() => {
+    if (ref.current && refIsNull) setReference(shape.id, namespace, ref);
+  }, [shape.id, namespace, ref, setReference, refIsNull]);
+  const handlePointerOver = useCallback4(
+    (event) => {
+      event.stopPropagation();
+      setHoveredElement({ id, namespace, type: "shape" });
+    },
+    [id, namespace, setHoveredElement]
+  );
+  const handlePointerOut = useCallback4(
+    (event) => {
+      event.stopPropagation();
+      setHoveredElement(null);
+    },
+    [setHoveredElement]
+  );
+  return /* @__PURE__ */ jsxs3(
+    "mesh",
+    {
+      ref,
+      userData,
+      castShadow: true,
+      receiveShadow: true,
+      up: [0, 0, 1],
+      geometry,
+      morphTargetDictionary: morphTargetSettings[0],
+      morphTargetInfluences: morphTargetSettings[1],
+      onPointerOver: handlePointerOver,
+      onPointerOut: handlePointerOut,
+      onClick: (e) => {
+        console.log("Clicked element", shape);
+        onElementClick({ id, type: "shape", namespace }, [...chain, id], e);
+      },
+      children: [
+        shape.material === "basic" && /* @__PURE__ */ jsx5(
+          "meshBasicMaterial",
+          {
+            attach: "material",
+            ref: material,
+            side: THREE2.DoubleSide
+          }
+        ),
+        shape.material === "lambert" && /* @__PURE__ */ jsx5(
+          "meshLambertMaterial",
+          {
+            attach: "material",
+            ref: material,
+            side: THREE2.DoubleSide
+          }
+        ),
+        shape.material === "phong" && /* @__PURE__ */ jsx5(
+          "meshPhongMaterial",
+          {
+            attach: "material",
+            ref: material,
+            side: THREE2.DoubleSide
+          }
+        ),
+        shape.material === "standard" && /* @__PURE__ */ jsx5(
+          "meshStandardMaterial",
+          {
+            attach: "material",
+            ref: material,
+            side: THREE2.DoubleSide
+          }
+        ),
+        shape.material === "normal" && /* @__PURE__ */ jsx5(
+          "meshNormalMaterial",
+          {
+            attach: "material",
+            ref: material,
+            side: THREE2.DoubleSide
+          }
+        ),
+        shape.children?.map((child) => /* @__PURE__ */ jsx5(
+          Renderable,
+          {
+            id: child,
+            namespace,
+            chain: [...chain, id]
+          },
+          child
+        ))
+      ]
+    }
+  );
+}
+var RenderedShape = memo5(InnerRenderedShape);
+
+// src/renderables/renderable.tsx
+import { Fragment as Fragment3, jsx as jsx6 } 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 resolvedNamespaces = useMemo5(() => {
+    let namespaces = [namespace];
+    if (namespace in refs) {
+      namespaces = [namespace];
+    } else {
+      namespaces = Object.keys(refs);
+    }
+    return namespaces;
+  }, [namespace, refs]);
+  if (resolvedNamespaces.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(Fragment3, { children: resolvedNamespaces.map((ns) => {
+    switch (type) {
+      case "group":
+        return /* @__PURE__ */ jsx6(
+          RenderedGroup,
+          {
+            id,
+            namespace: ns,
+            chain
+          },
+          `${ns}.${id}`
+        );
+      case "ellipse":
+        return /* @__PURE__ */ jsx6(
+          RenderedEllipse,
+          {
+            id,
+            namespace: ns,
+            chain
+          },
+          `${ns}.${id}`
+        );
+      case "rectangle":
+        return /* @__PURE__ */ jsx6(
+          RenderedRectangle,
+          {
+            id,
+            namespace: ns,
+            chain
+          },
+          `${ns}.${id}`
+        );
+      case "shape":
+        return /* @__PURE__ */ jsx6(
+          RenderedShape,
+          {
+            id,
+            namespace: ns,
+            chain
+          },
+          `${ns}.${id}`
+        );
+      default:
+        return null;
+    }
+  }) });
+}
+var Renderable = memo6(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";
+
+// src/actions/create-new-element.ts
+import { createRef } from "react";
+import { mapValues as mapValues2 } from "lodash";
+
+// src/functions/create-world-element.ts
+function createDefaultGroup(partialBody) {
+  const translation = partialBody.features?.translation || { animated: false, value: { x: 0, y: 0 } };
+  const rotation = partialBody.features?.rotation || { animated: false, value: { x: 0, y: 0, z: 0 } };
+  const scale = partialBody.features?.scale || { animated: false, value: { x: 1, y: 1, z: 1 } };
+  return {
+    id: partialBody.id || crypto.randomUUID(),
+    name: partialBody.name || "new-body",
+    type: partialBody.type || "group",
+    tags: partialBody.tags || [],
+    refs: partialBody.refs || {},
+    features: { translation, rotation, scale },
+    root: partialBody.root ?? false,
+    children: partialBody.children || []
+  };
+}
+
+// src/actions/create-new-element.ts
+function createNewElement(state, type, root = false) {
+  if (type === "group") {
+    const buildSelection = (id) => ({
+      id,
+      namespace: "world",
+      type: "group"
+    });
+    if (Object.entries(state.world).length === 0) {
+      const name = `New-Root`;
+      const refs = { default: createRef() };
+      const newElement = createDefaultGroup({
+        name,
+        root: true,
+        refs
+      });
+      state.world[newElement.id] = newElement;
+      state.elementSelection = [buildSelection(newElement.id)];
+    } else {
+      const worldRootEntry = Object.values(state.world).find(
+        (entry) => entry.type === "group" && entry.root
+      );
+      if (!worldRootEntry) {
+        return;
+      }
+      const name = `New-Body`;
+      const refs = mapValues2(
+        worldRootEntry.refs,
+        () => createRef()
+      );
+      const newChild = createDefaultGroup({ name, root, refs });
+      worldRootEntry.children.push(newChild.id);
+      state.world[newChild.id] = newChild;
+      state.elementSelection = [buildSelection(newChild.id)];
+    }
+  }
+}
+
+// src/actions/remove-children.ts
+function removeFromTree(state, nodesToRemove) {
+  Object.entries(state.world).forEach(([, element]) => {
+    if (element.type === "group") {
+      element.children = element.children.filter(
+        (c) => !nodesToRemove.includes(c)
+      );
+      state.world[element.id] = element;
+    }
+  });
+}
+
+// src/functions/create-animatable.ts
+function createAnimatable(value) {
+  if (!value.type) {
+    return null;
+  }
+  if (!value.name) {
+    value.name = "New Animatable";
+  }
+  if (value.type === "euler") {
+    const newAnimatable = {
+      id: value.id ?? crypto.randomUUID(),
+      name: `${value.name} Rotation`,
+      type: value.type,
+      default: value.default ?? { x: 0, y: 0, z: 0 },
+      constraints: value.constraints ?? {
+        min: [0, 0, 0],
+        max: [1, 1, 1],
+        velocity: 1
+      },
+      pub: value.pub ?? {
+        output: `${value.name}-rotation`,
+        public: true
+      }
+    };
+    return newAnimatable;
+  } else if (value.type === "vector3") {
+    const newAnimatable = {
+      id: value.id ?? crypto.randomUUID(),
+      name: `${value.name} Vector3`,
+      type: value.type,
+      default: value.default ?? { x: 0, y: 0, z: 0 },
+      constraints: value.constraints ?? {
+        min: [0, 0, 0],
+        max: [1, 1, 1],
+        velocity: 1
+      },
+      pub: value.pub ?? {
+        output: `${value.name}-translation`,
+        public: true
+      }
+    };
+    return newAnimatable;
+  } else if (value.type === "string") {
+    const newAnimatable = {
+      id: value.id ?? crypto.randomUUID(),
+      name: value.name,
+      type: value.type,
+      default: value.default ?? "Hello World",
+      constraints: value.constraints ?? { length: 25 },
+      pub: value.pub ?? {
+        output: `${value.name}-string`,
+        public: true
+      }
+    };
+    return newAnimatable;
+  } else if (value.type === "number") {
+    const newAnimatable = {
+      id: value.id ?? crypto.randomUUID(),
+      name: value.name,
+      type: value.type,
+      default: value.default ?? 0,
+      constraints: value.constraints ?? { min: 0, max: 255, velocity: 1 },
+      pub: value.pub ?? {
+        output: `${value.name}-number`,
+        public: true
+      }
+    };
+    return newAnimatable;
+  } else if (value.type === "boolean") {
+    const newAnimatable = {
+      id: value.id ?? crypto.randomUUID(),
+      name: value.name,
+      type: value.type,
+      default: value.default ?? false,
+      constraints: value.constraints ?? { frequency: 1 },
+      pub: value.pub ?? {
+        output: `${value.name}-boolean`,
+        public: true
+      }
+    };
+    return newAnimatable;
+  } else if (value.type === "rgb") {
+    const newAnimatable = {
+      id: value.id ?? crypto.randomUUID(),
+      name: value.name,
+      type: value.type,
+      default: value.default ?? { r: 0, g: 0, b: 0 },
+      constraints: value.constraints ?? {
+        min: [0, 0, 0],
+        max: [1, 1, 1],
+        velocity: 10
+      },
+      pub: value.pub ?? {
+        output: `${value.name}-color`,
+        public: true
+      }
+    };
+    return newAnimatable;
+  } else if (value.type === "hsl") {
+    const newAnimatable = {
+      id: value.id ?? crypto.randomUUID(),
+      name: value.name,
+      type: value.type,
+      default: value.default ?? { h: 0, s: 0, l: 0 },
+      constraints: value.constraints ?? {
+        min: [0, 0, 0],
+        max: [360, 100, 100],
+        velocity: 10
+      },
+      pub: value.pub ?? {
+        output: `${value.name}-color`,
+        public: true
+      }
+    };
+    return newAnimatable;
+  }
+  return null;
+}
+createAnimatable({ type: "euler", name: "Rotation" });
+
+// src/store.ts
+THREE3.Object3D.DEFAULT_UP.set(0, 0, 1);
+enableMapSet();
+var VizijSlice = (set, get) => ({
+  // worldRef: createRef<THREE.Group>(),
+  world: {},
+  animatables: {},
+  values: /* @__PURE__ */ new Map(),
+  renderHit: false,
+  preferences: {
+    damping: false
+  },
+  elementSelection: [],
+  hoveredElement: null,
+  slotConfig: {},
+  clearSelection: () => {
+    set({ elementSelection: [] });
+  },
+  updateElementSelection: (selection, _chain) => {
+    set(
+      produce((state) => {
+        state.elementSelection = [selection];
+      })
+    );
+  },
+  setHoveredElement: (selection) => {
+    set({ hoveredElement: selection });
+  },
+  onElementClick: (selection, _chain, event) => {
+    event.stopPropagation();
+    const makeKey = (sel) => `${sel.namespace}__${sel.type}__${sel.id}`;
+    const stack = [];
+    const seen = /* @__PURE__ */ new Set();
+    const push = (sel) => {
+      if (!sel) return;
+      if (!sel.id || !sel.namespace || !sel.type) return;
+      const key = makeKey(sel);
+      if (seen.has(key)) return;
+      seen.add(key);
+      stack.push(sel);
+    };
+    const intersections = event.intersections ?? [];
+    intersections.forEach((hit) => {
+      const hitSelection = hit.object?.userData?.selection;
+      push(hitSelection);
+    });
+    if (stack.length === 0) {
+      push(selection);
+    }
+    const stackKeys = new Set(stack.map(makeKey));
+    const primary = stack[0];
+    const primaryKey = makeKey(primary);
+    set(
+      produce((state) => {
+        if (event.metaKey) {
+          const existing = state.elementSelection ?? [];
+          const alreadySelected = existing.some(
+            (item) => makeKey(item) === primaryKey
+          );
+          const existingWithoutStack = existing.filter(
+            (item) => !stackKeys.has(makeKey(item))
+          );
+          if (alreadySelected) {
+            state.elementSelection = existingWithoutStack;
+          } else {
+            state.elementSelection = [...stack, ...existingWithoutStack];
+          }
+        } else {
+          state.elementSelection = stack;
+        }
+      })
+    );
+  },
+  getExportableBodies: (filterIds) => {
+    const worldData = get().world;
+    if (!filterIds) {
+      const bodies = Object.values(worldData).filter((entry) => entry.type === "group" && entry.rootBounds).map((entry) => {
+        const firstNs = Object.keys(entry.refs)[0];
+        const refGroup = entry.refs[firstNs].current;
+        return refGroup;
+      });
+      return bodies;
+    } else {
+      const bodies = Object.values(worldData).filter(
+        (entry) => entry.type === "group" && entry.rootBounds && filterIds.includes(entry.id)
+      ).map((entry) => {
+        const firstNs = Object.keys(entry.refs)[0];
+        const refGroup = entry.refs[firstNs].current;
+        return refGroup;
+      });
+      return bodies;
+    }
+  },
+  setGeometry: (id, geometry) => {
+    set(
+      produce((state) => {
+        state.world[id].geometry = geometry;
+      })
+    );
+  },
+  setValue: (id, namespace, value) => {
+    set(
+      produce((state) => {
+        const lookupId = getLookup3(namespace, id);
+        if (typeof value === "function") {
+          const current = state.values.get(lookupId);
+          if (current !== void 0) {
+            if (value(current !== void 0)) {
+              state.values.set(lookupId, value(current));
+            }
+          } else {
+            const animatableLookup = state.animatables[id];
+            const updatedValue = value(
+              animatableLookup !== void 0 ? animatableLookup.default : void 0
+            );
+            if (updatedValue !== void 0) {
+              state.values.set(lookupId, updatedValue);
+            }
+          }
+        } else {
+          state.values.set(lookupId, value);
+        }
+      })
+    );
+  },
+  setWorldElementName: (id, value) => {
+    set(
+      produce((state) => {
+        state.world[id].name = value;
+      })
+    );
+  },
+  setParent: (id, parent) => {
+    set(
+      produce((state) => {
+        state.world[id].parent = parent;
+      })
+    );
+  },
+  setChild: (id, child) => {
+    set(
+      produce((state) => {
+        removeFromTree(state, [child]);
+        state.world[id].child = child;
+      })
+    );
+  },
+  setChildren: (id, children) => {
+    set(
+      produce((state) => {
+        removeFromTree(state, children);
+        state.world[id].children = children;
+      })
+    );
+  },
+  createGroup: (root) => {
+    set(
+      produce((state) => {
+        createNewElement(state, "group", root);
+      })
+    );
+  },
+  setOrigin: (id, origin) => {
+    const { translation, rotation } = origin;
+    set(
+      produce((state) => {
+        if (!state.world[id].origin) {
+        } else {
+          if (rotation) state.world[id].origin.rotation = rotation;
+          if (translation) state.world[id].origin.translation = translation;
+        }
+      })
+    );
+  },
+  setAxis: (id, axis) => {
+    set(
+      produce((state) => {
+        state.world[id].axis = axis;
+      })
+    );
+  },
+  setTags: (id, tags) => {
+    set(
+      produce((state) => {
+        state.world[id].tags = tags;
+      })
+    );
+  },
+  setMaterial: (id, material) => {
+    set(
+      produce((state) => {
+        state.world[id].material = material;
+      })
+    );
+  },
+  setStaticFeature: (id, feature, value) => {
+    set(
+      produce((state) => {
+        if (!state.world[id].features) {
+        }
+        const entry = state.world[id];
+        switch (entry.type) {
+          case "group":
+            entry.features[feature].value = value;
+            state.world[id] = entry;
+            break;
+          default:
+            break;
+        }
+      })
+    );
+  },
+  createAnimatable: (elementId, featureName, value) => {
+    set(
+      produce((state) => {
+        console.log("Creating animatable", elementId, featureName, value);
+        const animatable = createAnimatable(value);
+        if (!animatable) {
+          return;
+        }
+        console.log("Created animatable", animatable);
+        state.world[elementId].features[featureName] = {
+          animated: true,
+          value: animatable.id
+        };
+        state.animatables[animatable.id] = animatable;
+      })
+    );
+  },
+  createStatic: (elementId, featureName, value) => {
+    set(
+      produce((state) => {
+        state.world[elementId].features[featureName] = {
+          animated: false,
+          value
+        };
+      })
+    );
+  },
+  setAnimatableValue: (id, value) => {
+    set(
+      produce((state) => {
+        console.log("Setting animatable value", id, value);
+        state.animatables[id] = value;
+      })
+    );
+  },
+  setSlot: (parentId, parentNamespace, childId, childNamespace) => {
+    set(
+      produce((state) => {
+        const parentLookupId = getLookup3(parentNamespace, parentId);
+        const childLookupId = getLookup3(childNamespace, childId);
+        state.slotConfig[parentLookupId] = childLookupId;
+      })
+    );
+  },
+  setSlots: (slots, replace) => {
+    set(
+      produce((state) => {
+        if (replace) {
+          state.slotConfig = slots;
+        } else {
+          state.slotConfig = { ...state.slotConfig, ...slots };
+        }
+      })
+    );
+  },
+  clearSlot: (parentId, parentNamespace) => {
+    set(
+      produce((state) => {
+        const parentLookupId = getLookup3(parentNamespace, parentId);
+        delete state.slotConfig[parentLookupId];
+      })
+    );
+  },
+  setVizij: (scene, animatables) => {
+    set({
+      world: scene,
+      animatables
+    });
+  },
+  addWorldElements(world, animatables, replace) {
+    if (replace) {
+      set({ world, animatables });
+    } else {
+      set((state) => ({
+        world: { ...state.world, ...world },
+        animatables: { ...state.animatables, ...animatables }
+      }));
+    }
+  },
+  setPreferences: (preferences) => {
+    set((state) => ({
+      preferences: { ...state.preferences, ...preferences }
+    }));
+  },
+  setReference: (id, namespace, ref) => {
+    set(
+      produce((state) => {
+        state.world[id].refs[namespace].current = ref.current;
+        if (ref.current?.children && state.world[id].refs[namespace].current) {
+          state.world[id].refs[namespace].current.children = ref.current.children;
+        }
+      })
+    );
+  }
+});
+var useDefaultVizijStore = create()(
+  subscribeWithSelector((set, get) => ({
+    ...VizijSlice(set, get)
+  }))
+);
+var createVizijStore = (initial) => create()(
+  subscribeWithSelector((set, get) => ({
+    ...VizijSlice(set, get),
+    ...initial ?? {}
+  }))
+);
+
+// src/vizij.tsx
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+Object3D4.DEFAULT_UP.set(0, 0, 1);
+function Vizij({
+  style,
+  className,
+  rootId,
+  namespace = "default",
+  showSafeArea = false,
+  onPointerMissed
+}) {
+  const ctx = useContext3(VizijContext);
+  if (ctx) {
+    return /* @__PURE__ */ jsx7(
+      Canvas,
+      {
+        shadows: false,
+        style,
+        className,
+        onPointerMissed,
+        children: /* @__PURE__ */ jsx7(
+          MemoizedInnerVizij,
+          {
+            rootId,
+            namespace,
+            showSafeArea
+          }
+        )
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx7(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ jsx7(
+      Canvas,
+      {
+        style,
+        className,
+        onPointerMissed,
+        children: /* @__PURE__ */ jsx7(
+          MemoizedInnerVizij,
+          {
+            rootId,
+            namespace,
+            showSafeArea
+          }
+        )
+      }
+    ) });
+  }
+}
+function InnerVizij({
+  rootId,
+  namespace = "default",
+  container,
+  showSafeArea
+}) {
+  const sceneParentSizing = container ? {
+    width: container.width * container.resolution,
+    height: container.height * container.resolution
+  } : void 0;
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsx7("ambientLight", { intensity: Math.PI / 2 }),
+    /* @__PURE__ */ jsx7(
+      OrthographicCamera,
+      {
+        makeDefault: true,
+        position: [0, 0, 100],
+        near: 0.1,
+        far: 101
+      }
+    ),
+    /* @__PURE__ */ jsx7(Suspense, { fallback: null, children: /* @__PURE__ */ jsx7(
+      World,
+      {
+        rootId,
+        namespace,
+        parentSizing: sceneParentSizing
+      }
+    ) }),
+    showSafeArea && /* @__PURE__ */ jsx7(SafeAreaRenderer, { rootId })
+  ] });
+}
+var MemoizedInnerVizij = memo7(InnerVizij);
+function InnerWorld({
+  rootId,
+  namespace = "default",
+  parentSizing
+}) {
+  const [present, rootBounds] = useVizijStore(
+    useShallow7((state) => {
+      const group = state.world[rootId];
+      const bounds = group?.rootBounds ?? defaultRootBounds;
+      return [group !== void 0, bounds];
+    })
+  );
+  const { camera, size } = useThree((state) => ({
+    camera: state.camera,
+    size: state.size
+  }));
+  useEffect6(() => {
+    const width = rootBounds.size.x;
+    const height = rootBounds.size.y;
+    if (camera && parentSizing === void 0 && camera.isOrthographicCamera) {
+      const zoom = Math.min(size.width / width, size.height / height);
+      const center = rootBounds.center;
+      if (camera.zoom !== zoom) {
+        camera.zoom = zoom;
+        camera.updateProjectionMatrix();
+      }
+      if (camera.position.x !== center.x || camera.position.y !== center.y) {
+        camera.position.x = center.x;
+        camera.position.y = center.y;
+        camera.updateProjectionMatrix();
+      }
+    } else if (camera && parentSizing !== void 0 && camera.isOrthographicCamera) {
+      const zoom = Math.min(
+        parentSizing.width / width,
+        parentSizing.height / height
+      );
+      const center = rootBounds.center;
+      camera.left = -0.5 * parentSizing.width / zoom + center.x;
+      camera.right = 0.5 * parentSizing.width / zoom + center.x;
+      camera.top = 0.5 * parentSizing.height / zoom + center.y;
+      camera.bottom = -0.5 * parentSizing.height / zoom + center.y;
+      camera.updateProjectionMatrix();
+    }
+  }, [rootBounds, camera, parentSizing, size]);
+  return /* @__PURE__ */ jsxs4(ErrorBoundary, { fallback: null, children: [
+    present && /* @__PURE__ */ jsx7(Renderable, { id: rootId, namespace, chain: [] }),
+    !present && /* @__PURE__ */ jsx7(
+      Text,
+      {
+        position: [0, 0, 0],
+        color: "white",
+        anchorX: "center",
+        anchorY: "middle",
+        fontSize: 0.7,
+        children: "No Output"
+      }
+    )
+  ] });
+}
+var World = memo7(InnerWorld);
+function SafeAreaRenderer({ rootId }) {
+  const rootBounds = useVizijStore((state) => {
+    const group = state.world[rootId];
+    return group?.rootBounds ?? defaultRootBounds;
+  });
+  const left = rootBounds.center.x - rootBounds.size.x / 2;
+  const right = rootBounds.center.x + rootBounds.size.x / 2;
+  const top = rootBounds.center.y + rootBounds.size.y / 2;
+  const bottom = rootBounds.center.y - rootBounds.size.y / 2;
+  return /* @__PURE__ */ jsx7(
+    Line3,
+    {
+      points: [
+        [left, top, 99],
+        [right, top, 99],
+        [right, bottom, 99],
+        [left, bottom, 99],
+        [left, top, 99]
+      ],
+      color: "red",
+      lineWidth: 2
+    }
+  );
+}
+var defaultRootBounds = {
+  center: { x: 0, y: 0 },
+  size: { x: 5, y: 4 }
+};
+
+// src/types/shape.ts
+var ShapeMaterial = /* @__PURE__ */ ((ShapeMaterial2) => {
+  ShapeMaterial2["Standard"] = "standard";
+  ShapeMaterial2["Phong"] = "phong";
+  ShapeMaterial2["Basic"] = "basic";
+  ShapeMaterial2["Lambert"] = "lambert";
+  ShapeMaterial2["Normal"] = "normal";
+  return ShapeMaterial2;
+})(ShapeMaterial || {});
+
+// src/hooks/use-vizij-store-subscription.ts
+import { useContext as useContext4, useEffect as useEffect7 } from "react";
+function useVizijStoreSubscription(selector, listener) {
+  const store = useContext4(VizijContext);
+  if (!store) throw new Error("Missing VizijProvider in the tree");
+  useEffect7(() => {
+    const initialValue = selector(store.getState());
+    listener(initialValue);
+    return store.subscribe(selector, listener);
+  }, [store, selector, listener]);
+}
+
+// src/hooks/use-vizij-store-setter.ts
+import { useContext as useContext5 } from "react";
+function useVizijStoreSetter() {
+  const store = useContext5(VizijContext);
+  if (!store) throw new Error("Missing VizijProvider in the tree");
+  return store.setState;
+}
+
+// src/hooks/use-vizij-store-getter.ts
+import { useContext as useContext6 } from "react";
+function useVizijStoreGetter() {
+  const store = useContext6(VizijContext);
+  if (!store) throw new Error("Missing VizijProvider in the tree");
+  return store.getState;
+}
+
+// src/functions/load-gltf.ts
+import * as THREE5 from "three";
+import { GLTFLoader, DRACOLoader } from "three-stdlib";
+
+// src/functions/gltf-loading/traverse-three.ts
+import { createRef as createRef3 } from "react";
+import * as THREE4 from "three";
+
+// src/functions/gltf-loading/map-features.ts
+function mapFeatures(features) {
+  const animatableValues = {};
+  const mappedFeatures = {};
+  Object.keys(features).forEach((f) => {
+    const feature = features[f];
+    if (feature.animated) {
+      const animatedValue = feature.value;
+      mappedFeatures[f] = {
+        animated: true,
+        value: animatedValue.id,
+        ...feature.label ? { label: feature.label } : {}
+      };
+      animatableValues[animatedValue.id] = animatedValue;
+    } else {
+      const { animated, value, label } = feature;
+      mappedFeatures[f] = label ? { animated, value, label } : { animated, value };
+    }
+  });
+  return [mappedFeatures, animatableValues];
+}
+
+// src/functions/gltf-loading/import-scene.ts
+import { Object3D as Object3D7 } from "three";
+
+// src/functions/gltf-loading/import-group.ts
+import { Object3D as Object3D6 } from "three";
+
+// src/functions/util.ts
+import { createRef as createRef2 } from "react";
+function namespaceArrayToRefs(namespaces) {
+  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: createRef2() }), {});
+}
+
+// src/functions/gltf-loading/import-mesh.ts
+import {
+  Object3D as Object3D5
+} from "three";
+
+// src/functions/gltf-loading/import-geometry.ts
+function sanitizeMorphKey(name, fallbackIndex, used) {
+  const baseName = name && name.trim().length > 0 ? name.trim() : `morph_${fallbackIndex + 1}`;
+  const slug = baseName.toLowerCase().replace(/[^a-z0-9]+/gi, "_").replace(/^_+|_+$/g, "");
+  const safeBase = slug.length > 0 ? slug : `morph_${fallbackIndex + 1}`;
+  let candidate = safeBase;
+  let counter = 1;
+  while (used.has(candidate)) {
+    candidate = `${safeBase}_${counter++}`;
+  }
+  used.add(candidate);
+  return candidate;
+}
+function importGeometry(geometry, mesh) {
+  const features = {};
+  const animatableValues = {};
+  const morphIds = [];
+  const morphTargets = mesh.morphTargetDictionary;
+  if (!morphTargets) {
+    return [features, animatableValues, void 0];
+  } else {
+    const usedKeys = /* @__PURE__ */ new Set();
+    Object.entries(mesh.morphTargetDictionary ?? {}).forEach(
+      ([name, index]) => {
+        const morphId = crypto.randomUUID();
+        const featureKey = sanitizeMorphKey(name, index, usedKeys);
+        morphIds.push(featureKey);
+        features[featureKey] = {
+          animated: true,
+          value: morphId
+        };
+        const displayName = name && name.trim().length > 0 ? name.trim() : featureKey;
+        const animatableMorphValue = {
+          id: morphId,
+          name: `${mesh.name ?? "Shape"} ${displayName}`,
+          type: "number",
+          default: mesh.morphTargetInfluences?.[index] ?? 0,
+          constraints: {
+            min: 0,
+            max: 1
+          },
+          pub: {
+            public: true,
+            output: displayName
+          }
+        };
+        animatableValues[morphId] = animatableMorphValue;
+      }
+    );
+    return [features, animatableValues, morphIds];
+  }
+}
+
+// src/functions/gltf-loading/import-mesh.ts
+Object3D5.DEFAULT_UP.set(0, 0, 1);
+function importMesh(mesh, namespaces, colorLookup) {
+  let world = {};
+  let animatables = {};
+  let newColorLookup = {};
+  const translationAnimatable = {
+    id: crypto.randomUUID(),
+    name: `${mesh.name ?? "Mesh"} translation`,
+    type: "vector3",
+    default: { x: mesh.position.x, y: mesh.position.y, z: mesh.position.z },
+    constraints: {},
+    pub: {
+      public: true,
+      output: `${mesh.name ?? "Mesh"} translation`,
+      units: "m"
+    }
+  };
+  animatables = {
+    ...animatables,
+    [translationAnimatable.id]: translationAnimatable
+  };
+  const rotationAnimatable = {
+    id: crypto.randomUUID(),
+    name: `${mesh.name ?? "Mesh"} rotation`,
+    type: "euler",
+    default: { x: mesh.rotation.x, y: mesh.rotation.y, z: mesh.rotation.z },
+    constraints: {},
+    pub: {
+      public: true,
+      output: `${mesh.name ?? "Mesh"} rotation`,
+      units: "rad"
+    }
+  };
+  animatables = { ...animatables, [rotationAnimatable.id]: rotationAnimatable };
+  const scaleAnimatable = {
+    id: crypto.randomUUID(),
+    name: `${mesh.name ?? "Mesh"} scale`,
+    type: "vector3",
+    default: { x: mesh.scale.x, y: mesh.scale.y, z: mesh.scale.z },
+    constraints: {},
+    pub: {
+      public: true,
+      output: `${mesh.name ?? "Mesh"} scale`
+    }
+  };
+  animatables = { ...animatables, [scaleAnimatable.id]: scaleAnimatable };
+  const color = mesh.material.color;
+  let useEmissive = false;
+  if (color.r === 0 && color.g === 0 && color.b === 0 && mesh.material.emissive) {
+    color.copy(mesh.material.emissive);
+    useEmissive = true;
+  }
+  const colorName = mesh.material.name;
+  const colorAnimatable = {
+    id: crypto.randomUUID(),
+    name: mesh.material.name ?? `${mesh.name ?? "Mesh"} color`,
+    type: "rgb",
+    default: { r: color.r, g: color.g, b: color.b },
+    constraints: {
+      min: [0, 0, 0],
+      max: [1, 1, 1]
+    },
+    pub: {
+      public: true,
+      output: mesh.material.name ? `${mesh.material.name} color` : `${mesh.name ?? "Mesh"} color`
+    }
+  };
+  const opacityAnimatable = {
+    id: crypto.randomUUID(),
+    name: mesh.material.name ? `${mesh.material.name} opacity` : `${mesh.name ?? "Mesh"} opacity`,
+    type: "number",
+    default: mesh.material.opacity,
+    constraints: {
+      min: 0,
+      max: 1
+    },
+    pub: {
+      public: true,
+      output: mesh.material.name ? `${mesh.material.name} opacity` : `${mesh.name ?? "Mesh"} opacity`
+    }
+  };
+  let colorId = colorAnimatable.id;
+  let opacityId = opacityAnimatable.id;
+  if (colorName && colorLookup[colorName]) {
+    colorId = colorLookup[colorName][0];
+    opacityId = colorLookup[colorName][1];
+    useEmissive = colorLookup[colorName][2];
+  } else {
+    animatables = { ...animatables, [colorAnimatable.id]: colorAnimatable };
+    animatables = { ...animatables, [opacityAnimatable.id]: opacityAnimatable };
+    if (colorName) {
+      newColorLookup[colorName] = [
+        colorAnimatable.id,
+        opacityAnimatable.id,
+        useEmissive
+      ];
+    }
+  }
+  const [geometryFeatures, geometryAnimatables, morphTargets] = importGeometry(
+    mesh.geometry,
+    mesh
+  );
+  animatables = { ...animatables, ...geometryAnimatables };
+  const children = [];
+  mesh.children.forEach((child) => {
+    if (child.isMesh) {
+      const [newWorldItems, newAnimatables, childId, newMeshColors] = importMesh(child, namespaces, {
+        ...colorLookup,
+        ...newColorLookup
+      });
+      newColorLookup = { ...newColorLookup, ...newMeshColors };
+      world = { ...world, ...newWorldItems };
+      animatables = { ...animatables, ...newAnimatables };
+      children.push(childId);
+    }
+  });
+  const newShape = {
+    id: mesh.uuid,
+    name: mesh.name,
+    geometry: mesh.geometry,
+    material: getShapeMaterial(mesh, useEmissive),
+    type: "shape",
+    tags: [],
+    morphTargets,
+    features: {
+      translation: { animated: true, value: translationAnimatable.id },
+      rotation: { animated: true, value: rotationAnimatable.id },
+      scale: { animated: true, value: scaleAnimatable.id },
+      color: { animated: true, value: colorId },
+      opacity: { animated: true, value: opacityId },
+      ...geometryFeatures
+    },
+    children: children.length > 0 ? children : void 0,
+    refs: namespaceArrayToRefs(namespaces)
+  };
+  world = { ...world, [newShape.id]: newShape };
+  return [world, animatables, newShape.id, newColorLookup];
+}
+function getShapeMaterial(mesh, useEmissive) {
+  const material = mesh.material;
+  if (useEmissive) {
+    return "basic" /* Basic */;
+  }
+  if (material.isMeshStandardMaterial) {
+    return "standard" /* Standard */;
+  } else if (material.isMeshPhongMaterial) {
+    return "phong" /* Phong */;
+  } else if (material.isMeshBasicMaterial) {
+    return "basic" /* Basic */;
+  } else if (material.isMeshNormalMaterial) {
+    return "normal" /* Normal */;
+  } else if (material.isMeshLambertMaterial) {
+    return "lambert" /* Lambert */;
+  } else {
+    return "standard" /* Standard */;
+  }
+}
+
+// src/functions/gltf-loading/import-group.ts
+Object3D6.DEFAULT_UP.set(0, 0, 1);
+function importGroup(group, namespaces, colorLookup, rootBounds) {
+  let world = {};
+  let animatables = {};
+  let newColorLookup = {};
+  const children = [];
+  const translationAnimatable = {
+    id: crypto.randomUUID(),
+    name: `${group.name ?? "Group"} translation`,
+    type: "vector3",
+    default: { x: group.position.x, y: group.position.y, z: group.position.z },
+    constraints: {},
+    pub: {
+      public: true,
+      output: `${group.name ?? "Group"} translation`,
+      units: "m"
+    }
+  };
+  animatables = {
+    ...animatables,
+    [translationAnimatable.id]: translationAnimatable
+  };
+  const rotationAnimatable = {
+    id: crypto.randomUUID(),
+    name: `${group.name ?? "Group"} rotation`,
+    type: "euler",
+    default: { x: group.rotation.x, y: group.rotation.y, z: group.rotation.z },
+    constraints: {},
+    pub: {
+      public: true,
+      output: `${group.name ?? "Group"} rotation`,
+      units: "rad"
+    }
+  };
+  animatables = { ...animatables, [rotationAnimatable.id]: rotationAnimatable };
+  const scaleAnimatable = {
+    id: crypto.randomUUID(),
+    name: `${group.name ?? "Group"} scale`,
+    type: "vector3",
+    default: { x: group.scale.x, y: group.scale.y, z: group.scale.z },
+    constraints: {},
+    pub: {
+      public: true,
+      output: `${group.name ?? "Group"} scale`
+    }
+  };
+  animatables = { ...animatables, [scaleAnimatable.id]: scaleAnimatable };
+  group.children.forEach((child) => {
+    if (child.isMesh) {
+      const [newWorldItems, newAnimatables, childId, newMeshColors] = importMesh(child, namespaces, {
+        ...colorLookup,
+        ...newColorLookup
+      });
+      newColorLookup = { ...newColorLookup, ...newMeshColors };
+      world = { ...world, ...newWorldItems };
+      animatables = { ...animatables, ...newAnimatables };
+      children.push(childId);
+    } else if (child.isGroup || child.isObject3D && child.children.length !== 0) {
+      const [newWorldItems, newAnimatables, childId, newMeshColors] = importGroup(child, namespaces, {
+        ...colorLookup,
+        ...newColorLookup
+      });
+      newColorLookup = { ...newColorLookup, ...newMeshColors };
+      world = { ...world, ...newWorldItems };
+      animatables = { ...animatables, ...newAnimatables };
+      children.push(childId);
+    }
+  });
+  const newGroup = {
+    id: group.uuid,
+    name: group.name,
+    type: "group",
+    tags: [],
+    features: {
+      translation: { animated: true, value: translationAnimatable.id },
+      rotation: { animated: true, value: rotationAnimatable.id },
+      scale: { animated: true, value: scaleAnimatable.id }
+    },
+    root: Boolean(rootBounds),
+    rootBounds,
+    children,
+    refs: namespaceArrayToRefs(namespaces)
+  };
+  world = { ...world, [newGroup.id]: newGroup };
+  return [world, animatables, newGroup.id, newColorLookup];
+}
+
+// src/functions/gltf-loading/import-scene.ts
+Object3D7.DEFAULT_UP.set(0, 0, 1);
+function importScene(scene, namespaces, rootBounds) {
+  let world = {};
+  let animatables = {};
+  const [newWorldItems, newAnimatables] = importGroup(
+    scene,
+    namespaces,
+    {},
+    rootBounds
+  );
+  world = { ...world, ...newWorldItems };
+  animatables = { ...animatables, ...newAnimatables };
+  return [world, animatables];
+}
+
+// src/functions/gltf-loading/traverse-three.ts
+THREE4.Object3D.DEFAULT_UP.set(0, 0, 1);
+function traverseThree(group, namespaces, aggressiveImport = false, rootBounds) {
+  const worldData = {};
+  const animatableData = {};
+  let hasRobotData = false;
+  group.traverse((child) => {
+    if (child.userData?.gltfExtensions?.RobotData) {
+      hasRobotData = true;
+    }
+  });
+  const useRobotData = !aggressiveImport || hasRobotData;
+  if (useRobotData) {
+    group.traverse((child) => {
+      if (child.userData?.gltfExtensions?.RobotData) {
+        const data = child.userData.gltfExtensions.RobotData;
+        let loadedData;
+        let mappedFeatures;
+        let animatableValues;
+        switch (data.type) {
+          case "group":
+            loadedData = {
+              ...data,
+              refs: namespaces.reduce(
+                (acc, ns) => ({ ...acc, [ns]: createRef3() }),
+                {}
+              )
+            };
+            [mappedFeatures, animatableValues] = mapFeatures(data.features);
+            isGroupFeatures(mappedFeatures);
+            loadedData.features = mappedFeatures;
+            Object.assign(animatableData, animatableValues);
+            worldData[loadedData.id] = loadedData;
+            break;
+          case "shape":
+            loadedData = {
+              ...data,
+              geometry: child.geometry,
+              refs: namespaces.reduce(
+                (acc, ns) => ({ ...acc, [ns]: createRef3() }),
+                {}
+              )
+            };
+            [mappedFeatures, animatableValues] = mapFeatures(data.features);
+            isShapeFeatures(mappedFeatures);
+            loadedData.features = mappedFeatures;
+            Object.assign(animatableData, animatableValues);
+            worldData[loadedData.id] = loadedData;
+            break;
+          case "ellipse":
+            loadedData = {
+              ...data,
+              refs: namespaces.reduce(
+                (acc, ns) => ({ ...acc, [ns]: createRef3() }),
+                {}
+              )
+            };
+            [mappedFeatures, animatableValues] = mapFeatures(data.features);
+            isEllipseFeatures(mappedFeatures);
+            loadedData.features = mappedFeatures;
+            Object.assign(animatableData, animatableValues);
+            worldData[loadedData.id] = loadedData;
+            break;
+          case "rectangle":
+            loadedData = {
+              ...data,
+              refs: namespaces.reduce(
+                (acc, ns) => ({ ...acc, [ns]: createRef3() }),
+                {}
+              )
+            };
+            [mappedFeatures, animatableValues] = mapFeatures(data.features);
+            isRectangleFeatures(mappedFeatures);
+            loadedData.features = mappedFeatures;
+            Object.assign(animatableData, animatableValues);
+            worldData[loadedData.id] = loadedData;
+            break;
+          default:
+            throw new Error(`Unhandled type`);
+        }
+      }
+    });
+  } else {
+    const derivedRootBounds = rootBounds ?? deriveRootBounds(group);
+    if (!derivedRootBounds) {
+      throw new Error("Root bounds are expected if using an aggressive import");
+    }
+    const [newWorldData, newAnimatableData] = importScene(
+      group,
+      namespaces,
+      derivedRootBounds
+    );
+    Object.assign(worldData, newWorldData);
+    Object.assign(animatableData, newAnimatableData);
+  }
+  return [worldData, animatableData];
+}
+function isGroupFeatures(value) {
+  if (!value || typeof value !== "object") {
+    throw new Error("Expected object");
+  }
+  if (!["translation", "rotation"].every((key) => key in value)) {
+    throw new Error("Expected translation and rotation keys in features");
+  }
+}
+function isShapeFeatures(value) {
+  if (!value || typeof value !== "object") {
+    throw new Error("Expected object");
+  }
+  if (!["translation", "rotation"].every((key) => key in value)) {
+    throw new Error("Expected translation and rotation keys in features");
+  }
+}
+function isEllipseFeatures(value) {
+  if (!value || typeof value !== "object") {
+    throw new Error("Expected object");
+  }
+  if (!["translation", "rotation", "height", "width"].every((key) => key in value)) {
+    throw new Error(
+      "Expected translation, rotation, width, and height keys in features"
+    );
+  }
+}
+function isRectangleFeatures(value) {
+  if (!value || typeof value !== "object") {
+    throw new Error("Expected object");
+  }
+  if (!["translation", "rotation", "height", "width"].every((key) => key in value)) {
+    throw new Error(
+      "Expected translation, rotation, width, and height keys in features"
+    );
+  }
+}
+function deriveRootBounds(group) {
+  const boundingBox = new THREE4.Box3().setFromObject(group);
+  if (boundingBox.isEmpty()) {
+    return null;
+  }
+  const { min, max } = boundingBox;
+  if (!Number.isFinite(min.x) || !Number.isFinite(min.y) || !Number.isFinite(max.x) || !Number.isFinite(max.y)) {
+    return null;
+  }
+  const width = max.x - min.x;
+  const height = max.y - min.y;
+  if (!Number.isFinite(width) || !Number.isFinite(height)) {
+    return null;
+  }
+  const safeWidth = Math.max(Math.abs(width), 1e-3);
+  const safeHeight = Math.max(Math.abs(height), 1e-3);
+  return {
+    center: {
+      x: (min.x + max.x) / 2,
+      y: (min.y + max.y) / 2
+    },
+    size: {
+      x: safeWidth,
+      y: safeHeight
+    }
+  };
+}
+
+// src/functions/load-gltf.ts
+THREE5.Object3D.DEFAULT_UP.set(0, 0, 1);
+var EmptyModelError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "EmptyModelError";
+  }
+};
+async function loadGLTF(url, namespaces, aggressiveImport = false, rootBounds) {
+  const modelLoader = new GLTFLoader();
+  modelLoader.setDRACOLoader(new DRACOLoader());
+  const modelData = await modelLoader.loadAsync(url);
+  const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
+  return traverseThree(
+    modelData.scene,
+    actualizedNamespaces,
+    aggressiveImport,
+    rootBounds
+  );
+}
+async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, rootBounds) {
+  const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
+  if (typeof URL !== "undefined" && typeof URL.createObjectURL === "function") {
+    const objectUrl = URL.createObjectURL(blob);
+    try {
+      return await loadGLTF(
+        objectUrl,
+        actualizedNamespaces,
+        aggressiveImport,
+        rootBounds
+      );
+    } finally {
+      URL.revokeObjectURL(objectUrl);
+    }
+  }
+  const arrayBuffer = typeof blob.arrayBuffer === "function" ? await blob.arrayBuffer() : await new Response(blob).arrayBuffer();
+  return new Promise((resolve, reject) => {
+    const loader = new GLTFLoader();
+    loader.setDRACOLoader(new DRACOLoader());
+    loader.parse(
+      arrayBuffer,
+      "",
+      (gltf) => {
+        try {
+          resolve(
+            traverseThree(
+              gltf.scene,
+              actualizedNamespaces,
+              aggressiveImport,
+              rootBounds
+            )
+          );
+        } catch (error) {
+          if (error instanceof Error) {
+            reject(error);
+          } else {
+            reject(new Error(String(error)));
+          }
+        }
+      },
+      (error) => {
+        reject(new Error(`Error loading GLTF: ${error.message}`));
+      }
+    );
+  });
+}
+
+// src/functions/load-gltf-blob.ts
+import { DRACOLoader as DRACOLoader2, GLTFLoader as GLTFLoader2 } from "three-stdlib";
+var loadGltfFromBlob = (blob, namespaces) => {
+  return new Promise((resolve, reject) => {
+    const loader = new GLTFLoader2();
+    loader.setDRACOLoader(new DRACOLoader2());
+    const reader = new FileReader();
+    reader.onload = () => {
+      const arrayBuffer = reader.result;
+      loader.parse(
+        arrayBuffer,
+        "",
+        // Base path for resolving external resources
+        (gltf) => {
+          const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
+          resolve(traverseThree(gltf.scene, actualizedNamespaces));
+        },
+        (error) => {
+          reject(new Error(`Error loading GLTF: ${error.message}`));
+        }
+      );
+    };
+    reader.onerror = () => {
+      reject(new Error("Failed to read Blob as ArrayBuffer."));
+    };
+    reader.readAsArrayBuffer(blob);
+  });
+};
+
+// src/functions/export.ts
+import { GLTFExporter } from "three-stdlib";
+import * as THREE6 from "three";
+THREE6.Object3D.DEFAULT_UP.set(0, 0, 1);
+function exportScene(data, fileName = "scene.glb") {
+  const exporter = new GLTFExporter();
+  exporter.parse(
+    data,
+    (gltf) => {
+      if (!(gltf instanceof ArrayBuffer)) {
+        throw new Error("Failed to export scene!");
+      }
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(
+        new Blob([gltf], {
+          type: "application/octet-stream"
+        })
+      );
+      const trimmed = fileName.trim();
+      const safeFileName = trimmed.length > 0 ? trimmed : "scene.glb";
+      const downloadName = safeFileName.toLowerCase().endsWith(".glb") ? safeFileName : `${safeFileName}.glb`;
+      link.download = downloadName;
+      link.click();
+      URL.revokeObjectURL(link.href);
+    },
+    () => {
+    },
+    {
+      trs: true,
+      onlyVisible: false,
+      binary: true,
+      includeCustomExtensions: true
+    }
+  );
+}
+export {
+  Controller,
+  EmptyModelError,
+  InnerVizij,
+  ShapeMaterial,
+  Vizij,
+  VizijContext,
+  VizijSlice,
+  createVizijStore,
+  exportScene,
+  loadGLTF,
+  loadGLTFFromBlob,
+  loadGltfFromBlob,
+  useDefaultVizijStore,
+  useFeatures,
+  useVizijStore,
+  useVizijStoreGetter,
+  useVizijStoreSetter,
+  useVizijStoreSubscription
+};