@vizij/render 0.0.3 → 0.0.5

package/dist/index.mjs

@@ -1,11 +1,23 @@
-// 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,
+  SRGBColorSpace,
+  NoToneMapping
+} 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 +34,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 +54,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 +84,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 +131,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 +139,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 +196,7 @@ function InnerRenderedGroup({
     }
   });
   const setReference = useVizijStore(
-    useShallow2((state) => state.setReference)
+    useShallow((state) => state.setReference)
   );
   useEffect2(() => {
     if (ref.current && refIsNull) {
@@ -416,7 +226,7 @@ function InnerRenderedGroup({
     },
     [setHoveredElement]
   );
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "group",
     {
       ref,
@@ -424,7 +234,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 +246,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 +266,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 +278,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 +474,7 @@ function InnerRenderedEllipse({
     }
   });
   const setReference = useVizijStore(
-    useShallow3((state) => state.setReference)
+    useShallow2((state) => state.setReference)
   );
   const points = useMemo2(() => {
     const n = 600;
@@ -697,7 +507,7 @@ function InnerRenderedEllipse({
     [setHoveredElement]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(
       Circle,
       {
         ref: ellipseRef,
@@ -708,10 +518,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 +532,7 @@ function InnerRenderedEllipse({
     )
   ] });
 }
-var RenderedEllipse = memo3(InnerRenderedEllipse);
+var RenderedEllipse = memo2(InnerRenderedEllipse);
 var showLine = (ellipse) => {
   if ("strokeOpacity" in ellipse.features) {
     return true;
@@ -738,13 +548,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 +564,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 +576,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 +772,7 @@ function InnerRenderedRectangle({
     }
   });
   const setReference = useVizijStore(
-    useShallow4((state) => state.setReference)
+    useShallow3((state) => state.setReference)
   );
   const points = useMemo3(() => {
     return [
@@ -992,7 +802,7 @@ function InnerRenderedRectangle({
     [setHoveredElement]
   );
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx3(
       Plane,
       {
         ref: rectangleRef,
@@ -1007,10 +817,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 +831,7 @@ function InnerRenderedRectangle({
     )
   ] });
 }
-var RenderedRectangle = memo4(InnerRenderedRectangle);
+var RenderedRectangle = memo3(InnerRenderedRectangle);
 var showLine2 = (rectangle) => {
   if ("strokeOpacity" in rectangle.features) {
     return true;
@@ -1037,14 +847,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 +862,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 +871,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 +1007,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 +1064,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 +1072,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "lambert" && /* @__PURE__ */ jsx5(
+        shape.material === "lambert" && /* @__PURE__ */ jsx4(
           "meshLambertMaterial",
           {
             attach: "material",
@@ -1270,7 +1080,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "phong" && /* @__PURE__ */ jsx5(
+        shape.material === "phong" && /* @__PURE__ */ jsx4(
           "meshPhongMaterial",
           {
             attach: "material",
@@ -1278,7 +1088,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "standard" && /* @__PURE__ */ jsx5(
+        shape.material === "standard" && /* @__PURE__ */ jsx4(
           "meshStandardMaterial",
           {
             attach: "material",
@@ -1286,7 +1096,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.material === "normal" && /* @__PURE__ */ jsx5(
+        shape.material === "normal" && /* @__PURE__ */ jsx4(
           "meshNormalMaterial",
           {
             attach: "material",
@@ -1294,7 +1104,7 @@ function InnerRenderedShape({
             side: THREE2.DoubleSide
           }
         ),
-        shape.children?.map((child) => /* @__PURE__ */ jsx5(
+        shape.children?.map((child) => /* @__PURE__ */ jsx4(
           Renderable,
           {
             id: child,
@@ -1307,7 +1117,7 @@ function InnerRenderedShape({
     }
   );
 }
-var RenderedShape = memo5(InnerRenderedShape);
+var RenderedShape = memo4(InnerRenderedShape);
 var MATERIAL_FEATURE_KEYS = [
   "color",
   "opacity",
@@ -1355,14 +1165,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 +1185,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 +1198,7 @@ function InnerRenderable({
           `${ns}.${id}`
         );
       case "ellipse":
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx5(
           RenderedEllipse,
           {
             id,
@@ -1398,7 +1208,7 @@ function InnerRenderable({
           `${ns}.${id}`
         );
       case "rectangle":
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx5(
           RenderedRectangle,
           {
             id,
@@ -1408,7 +1218,7 @@ function InnerRenderable({
           `${ns}.${id}`
         );
       case "shape":
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx5(
           RenderedShape,
           {
             id,
@@ -1422,14 +1232,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 +1535,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 +1682,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 +1702,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 +1752,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 +1764,19 @@ function Vizij({
 }) {
   const ctx = useContext3(VizijContext);
   if (ctx) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       Canvas,
       {
         shadows: false,
         style,
         className,
         onPointerMissed,
-        children: /* @__PURE__ */ jsx7(
+        gl: {
+          outputColorSpace: SRGBColorSpace,
+          toneMapping: NoToneMapping,
+          antialias: true
+        },
+        children: /* @__PURE__ */ jsx6(
           MemoizedInnerVizij,
           {
             rootId,
@@ -1972,13 +1787,18 @@ 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(
+        gl: {
+          outputColorSpace: SRGBColorSpace,
+          toneMapping: NoToneMapping,
+          antialias: true
+        },
+        children: /* @__PURE__ */ jsx6(
           MemoizedInnerVizij,
           {
             rootId,
@@ -2001,8 +1821,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 +1831,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 +1839,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 +1888,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 +1902,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 +1912,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: [
@@ -2868,6 +2688,375 @@ function applyVizijBundle(object, bundle) {
   };
 }
 
+// src/functions/gltf-loading/extract-animations.ts
+var CHANNEL_PATH_TO_TRACK_PROPERTY = {
+  translation: "position",
+  rotation: "quaternion",
+  scale: "scale",
+  weights: "morphTargetInfluences"
+};
+function isPlainObject(value) {
+  return Boolean(
+    value && typeof value === "object" && !Array.isArray(value) && Object.prototype.toString.call(value) === "[object Object]"
+  );
+}
+function clonePlainObject(value) {
+  if (!value) {
+    return void 0;
+  }
+  return JSON.parse(JSON.stringify(value));
+}
+function inferValueSize(valueType) {
+  switch (valueType) {
+    case "boolean":
+    case "number":
+    case "string":
+      return 1;
+    case "vector2":
+      return 2;
+    case "vector3":
+    case "euler":
+    case "rgb":
+    case "hsl":
+      return 3;
+    case "vector4":
+    case "quaternion":
+      return 4;
+    default:
+      return 1;
+  }
+}
+function componentNameToIndex(component) {
+  if (!component || typeof component !== "string") {
+    return void 0;
+  }
+  const normalized = component.trim().toLowerCase();
+  if (normalized.length === 0) {
+    return void 0;
+  }
+  const componentOrder = {
+    x: 0,
+    y: 1,
+    z: 2,
+    w: 3,
+    r: 0,
+    g: 1,
+    b: 2,
+    a: 3,
+    u: 0,
+    v: 1
+  };
+  return componentOrder[normalized];
+}
+function readComponentInfo(target) {
+  if (!target || typeof target !== "object") {
+    return {};
+  }
+  const sources = [];
+  const record = target;
+  const extensions = record.extensions;
+  if (extensions && typeof extensions === "object") {
+    const vizijChannel = extensions.VizijChannel;
+    if (isPlainObject(vizijChannel)) {
+      sources.push(vizijChannel);
+    }
+    const robotChannel = extensions.RobotChannel;
+    if (isPlainObject(robotChannel)) {
+      sources.push(robotChannel);
+    }
+  }
+  const extras = record.extras;
+  if (isPlainObject(extras)) {
+    sources.push(extras);
+  }
+  let component;
+  let componentIndex;
+  for (const source of sources) {
+    if (!isPlainObject(source)) {
+      continue;
+    }
+    if (typeof source.component === "string" && !component) {
+      component = source.component;
+    }
+    if (typeof source.axis === "string" && !component) {
+      component = source.axis;
+    }
+    if (typeof source.channel === "string" && !component) {
+      component = source.channel;
+    }
+    if (Object.prototype.hasOwnProperty.call(source, "componentIndex") && componentIndex == null) {
+      const value = source.componentIndex;
+      if (typeof value === "number") {
+        componentIndex = value;
+      }
+    }
+    if (Object.prototype.hasOwnProperty.call(source, "axisIndex") && componentIndex == null) {
+      const value = source.axisIndex;
+      if (typeof value === "number") {
+        componentIndex = value;
+      }
+    }
+  }
+  if (componentIndex == null) {
+    componentIndex = componentNameToIndex(component);
+  }
+  return { component, componentIndex };
+}
+function resolveRobotNodeIndex(parserJson) {
+  const indexMap = /* @__PURE__ */ new Map();
+  if (!parserJson || typeof parserJson !== "object") {
+    return indexMap;
+  }
+  const json = parserJson;
+  const nodes = Array.isArray(json.nodes) ? json.nodes : [];
+  nodes.forEach((node, nodeIndex) => {
+    if (!node || typeof node !== "object") {
+      return;
+    }
+    const extensions = node.extensions;
+    if (!extensions || typeof extensions !== "object") {
+      return;
+    }
+    const robotData = extensions.RobotData;
+    if (!robotData || typeof robotData !== "object") {
+      return;
+    }
+    const renderableId = typeof robotData.id === "string" ? robotData.id : void 0;
+    if (!renderableId) {
+      return;
+    }
+    const nodeName = typeof node.name === "string" && node.name.length > 0 ? node.name : void 0;
+    const features = {};
+    const robotFeatures = robotData.features;
+    if (robotFeatures && typeof robotFeatures === "object") {
+      Object.entries(robotFeatures).forEach(
+        ([featureKey, featureValue]) => {
+          if (!featureValue || typeof featureValue !== "object" || !featureValue.animated) {
+            return;
+          }
+          const value = featureValue.value;
+          const componentId = value && typeof value === "object" && typeof value.id === "string" ? value.id : void 0;
+          if (!componentId) {
+            return;
+          }
+          const valueType = value && typeof value === "object" && typeof value.type === "string" ? value.type : void 0;
+          features[featureKey] = {
+            feature: featureKey,
+            componentId,
+            valueType
+          };
+        }
+      );
+    }
+    indexMap.set(nodeIndex, {
+      renderableId,
+      nodeName,
+      features
+    });
+  });
+  return indexMap;
+}
+function mapChannelPathToProperty(path) {
+  if (typeof path !== "string") {
+    return void 0;
+  }
+  return CHANNEL_PATH_TO_TRACK_PROPERTY[path] ?? path;
+}
+function resolveFeatureKey(channelTarget) {
+  if (!channelTarget || typeof channelTarget !== "object") {
+    return void 0;
+  }
+  const target = channelTarget;
+  const extensions = target.extensions;
+  if (extensions && typeof extensions === "object") {
+    const vizij = extensions.VizijChannel;
+    if (isPlainObject(vizij)) {
+      const feature = vizij.feature;
+      if (typeof feature === "string") {
+        return feature;
+      }
+    }
+    const robot = extensions.RobotChannel;
+    if (isPlainObject(robot)) {
+      const feature = robot.feature;
+      if (typeof feature === "string") {
+        return feature;
+      }
+    }
+  }
+  const extras = target.extras;
+  if (isPlainObject(extras)) {
+    const feature = extras.feature;
+    if (typeof feature === "string") {
+      return feature;
+    }
+    const channel = extras.channel;
+    if (typeof channel === "string") {
+      return channel;
+    }
+  }
+  const path = target.path;
+  return typeof path === "string" ? path : void 0;
+}
+function resolveTrackForChannel(clip, channelIndex, expectedProperty, nodeName) {
+  if (!clip) {
+    return void 0;
+  }
+  const orderedTrack = clip.tracks[channelIndex];
+  if (orderedTrack) {
+    return orderedTrack;
+  }
+  if (!expectedProperty) {
+    return void 0;
+  }
+  const property = expectedProperty;
+  const matches = (track) => {
+    const name = track?.name ?? "";
+    if (!name) {
+      return false;
+    }
+    if (nodeName && name === `${nodeName}.${property}`) {
+      return true;
+    }
+    if (nodeName && name.startsWith(`${nodeName}.`) && name.endsWith(property)) {
+      return true;
+    }
+    if (!nodeName && name.endsWith(property)) {
+      return true;
+    }
+    return false;
+  };
+  return clip.tracks.find(matches);
+}
+function toNumberArray(arrayLike) {
+  if (!arrayLike) {
+    return [];
+  }
+  return Array.from(arrayLike, (value) => Number(value));
+}
+function resolveClipDuration(clip, tracks) {
+  if (clip && Number.isFinite(clip.duration) && clip.duration >= 0) {
+    return clip.duration;
+  }
+  let maxTime = 0;
+  tracks.forEach((track) => {
+    if (!track.times.length) {
+      return;
+    }
+    const lastTime = track.times[track.times.length - 1] ?? 0;
+    if (lastTime > maxTime) {
+      maxTime = lastTime;
+    }
+  });
+  return maxTime;
+}
+function resolveClipId(animation, clip, index) {
+  if (typeof animation.name === "string" && animation.name.length > 0) {
+    return animation.name;
+  }
+  if (clip?.name && clip.name.length > 0) {
+    return clip.name;
+  }
+  return `gltf-animation-${index}`;
+}
+function extractVizijAnimations(parserJson, clips) {
+  const animations = [];
+  if (!parserJson || typeof parserJson !== "object") {
+    return animations;
+  }
+  const robotNodeIndex = resolveRobotNodeIndex(parserJson);
+  if (robotNodeIndex.size === 0) {
+    return animations;
+  }
+  const json = parserJson;
+  const gltfAnimations = Array.isArray(json.animations) ? json.animations : [];
+  if (gltfAnimations.length === 0) {
+    return animations;
+  }
+  gltfAnimations.forEach((animation, animationIndex) => {
+    if (!animation || typeof animation !== "object") {
+      return;
+    }
+    const animationRecord = animation;
+    const channels = Array.isArray(animationRecord.channels) ? animationRecord.channels : [];
+    if (channels.length === 0) {
+      return;
+    }
+    const samplers = Array.isArray(animationRecord.samplers) ? animationRecord.samplers : [];
+    const clip = Array.isArray(clips) ? clips[animationIndex] : void 0;
+    const trackData = [];
+    channels.forEach((channel, channelIndex) => {
+      if (!channel || typeof channel !== "object") {
+        return;
+      }
+      const channelRecord = channel;
+      const target = channelRecord.target;
+      const nodeIndex = target && typeof target === "object" && typeof target.node === "number" ? target.node : void 0;
+      if (nodeIndex == null || !robotNodeIndex.has(nodeIndex)) {
+        return;
+      }
+      const robotNode = robotNodeIndex.get(nodeIndex);
+      const featureKey = resolveFeatureKey(target);
+      if (!featureKey) {
+        return;
+      }
+      const featureInfo = robotNode.features[featureKey];
+      if (!featureInfo) {
+        return;
+      }
+      const propertyName = mapChannelPathToProperty(
+        target && typeof target === "object" ? target.path : void 0
+      );
+      const track = resolveTrackForChannel(
+        clip,
+        channelIndex,
+        propertyName,
+        robotNode.nodeName
+      );
+      if (!track) {
+        return;
+      }
+      const samplerIndex = typeof channelRecord.sampler === "number" ? channelRecord.sampler : -1;
+      const sampler = samplerIndex >= 0 && samplerIndex < samplers.length ? samplers[samplerIndex] : void 0;
+      const interpolation = sampler && typeof sampler.interpolation === "string" ? sampler.interpolation : void 0;
+      let valueSize = typeof track.getValueSize === "function" ? track.getValueSize() : inferValueSize(featureInfo.valueType);
+      if (!Number.isFinite(valueSize) || valueSize <= 0) {
+        valueSize = inferValueSize(featureInfo.valueType);
+      }
+      const { component, componentIndex } = readComponentInfo(target);
+      trackData.push({
+        componentId: featureInfo.componentId,
+        feature: featureInfo.feature,
+        renderableId: robotNode.renderableId,
+        nodeIndex,
+        nodeName: robotNode.nodeName,
+        path: target && typeof target === "object" && typeof target.path === "string" ? target.path : void 0,
+        component,
+        componentIndex,
+        valueType: featureInfo.valueType,
+        valueSize,
+        interpolation,
+        times: toNumberArray(track.times),
+        values: toNumberArray(track.values)
+      });
+    });
+    if (trackData.length === 0) {
+      return;
+    }
+    animations.push({
+      id: resolveClipId(animationRecord, clip, animationIndex),
+      name: typeof animationRecord.name === "string" && animationRecord.name.length > 0 ? animationRecord.name : clip?.name,
+      duration: resolveClipDuration(clip, trackData),
+      index: animationIndex,
+      metadata: clonePlainObject(
+        animationRecord.extras
+      ),
+      tracks: trackData
+    });
+  });
+  return animations;
+}
+
 // src/functions/load-gltf.ts
 THREE5.Object3D.DEFAULT_UP.set(0, 0, 1);
 var EmptyModelError = class extends Error {
@@ -2886,9 +3075,10 @@ async function loadGLTF(url, namespaces, aggressiveImport = false, rootBounds) {
     actualizedNamespaces,
     aggressiveImport,
     rootBounds,
-    modelData?.parser?.json
+    modelData?.parser?.json,
+    modelData.animations
   );
-  return [asset.world, asset.animatables];
+  return [asset.world, asset.animatables, asset.animations];
 }
 async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, rootBounds) {
   const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
@@ -2901,7 +3091,7 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
         aggressiveImport,
         rootBounds
       );
-      return [asset.world, asset.animatables];
+      return [asset.world, asset.animatables, asset.animations];
     } finally {
       URL.revokeObjectURL(objectUrl);
     }
@@ -2920,9 +3110,10 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
             actualizedNamespaces,
             aggressiveImport,
             rootBounds,
-            gltf?.parser?.json
+            gltf?.parser?.json,
+            gltf.animations
           );
-          resolve([asset.world, asset.animatables]);
+          resolve([asset.world, asset.animatables, asset.animations]);
         } catch (error) {
           if (error instanceof Error) {
             reject(error);
@@ -2937,7 +3128,7 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
     );
   });
 }
-function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson) {
+function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson, clips) {
   const [world, animatables] = traverseThree(
     scene,
     namespaces,
@@ -2945,7 +3136,8 @@ function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson)
     rootBounds
   );
   const bundle = extractVizijBundle(scene, parserJson);
-  return { world, animatables, bundle };
+  const animations = extractVizijAnimations(parserJson, clips);
+  return { world, animatables, bundle, animations };
 }
 async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, rootBounds) {
   const modelLoader = new GLTFLoader();
@@ -2957,7 +3149,8 @@ async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, roo
     actualizedNamespaces,
     aggressiveImport,
     rootBounds,
-    modelData?.parser?.json
+    modelData?.parser?.json,
+    modelData.animations
   );
 }
 async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = false, rootBounds) {
@@ -2989,7 +3182,8 @@ async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = f
             actualizedNamespaces,
             aggressiveImport,
             rootBounds,
-            gltf?.parser?.json
+            gltf?.parser?.json,
+            gltf.animations
           );
           resolve(asset);
         } catch (error) {
@@ -3098,7 +3292,6 @@ function exportScene(data, fileNameOrOptions = "scene.glb") {
   }
 }
 export {
-  Controller,
   EmptyModelError,
   InnerVizij,
   ShapeMaterial,