@vizij/render 0.0.7 → 0.1.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentProps, ReactNode, RefObject } from 'react';
+import { CSSProperties, ComponentProps, ReactNode, RefObject, MouseEvent } from 'react';
 import { Canvas, ThreeEvent } from '@react-three/fiber';
 import * as zustand from 'zustand';
 import * as THREE from 'three';
@@ -8,11 +8,12 @@ import { Mesh, Group as Group$1, BufferGeometry, ShapeGeometry, AnimationClip, O
 import { RawValue, AnimatableValue, RawVector2 } from '@vizij/utils';
 
 interface VizijProps {
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     className?: string;
     rootId: string;
     namespace?: string;
     showSafeArea?: boolean;
+    showSelectionGlow?: boolean;
     onPointerMissed?: ComponentProps<typeof Canvas>["onPointerMissed"];
 }
 /**
@@ -30,7 +31,7 @@ interface VizijProps {
  *
  * @returns The rendered ReactNode.
  */
-declare function Vizij({ style, className, rootId, namespace, showSafeArea, onPointerMissed, }: VizijProps): ReactNode;
+declare function Vizij({ style, className, rootId, namespace, showSafeArea, showSelectionGlow, onPointerMissed, }: VizijProps): ReactNode;
 interface InnerVizijProps {
     rootId: string;
     namespace: string;
@@ -40,8 +41,9 @@ interface InnerVizijProps {
         resolution: number;
     };
     showSafeArea?: boolean;
+    showSelectionGlow?: boolean;
 }
-declare function InnerVizij({ rootId, namespace, container, showSafeArea, }: InnerVizijProps): react_jsx_runtime.JSX.Element;
+declare function InnerVizij({ rootId, namespace, container, showSafeArea, showSelectionGlow, }: InnerVizijProps): react_jsx_runtime.JSX.Element;
 
 /**
  * A wrapping type to reference an attribute that is animatable.
@@ -298,6 +300,7 @@ interface VizijPoseDefinition {
     id: VizijPoseId;
     name?: string;
     description?: string;
+    group?: string | null;
     values: Record<string, number | undefined>;
 }
 interface VizijPoseRigConfig {
@@ -420,6 +423,11 @@ interface VizijData {
 }
 interface VizijActions {
     setValue: (id: string, namespace: string, value: RawValue | ((current: RawValue | undefined) => RawValue | undefined)) => void;
+    setValues: (writes: Array<{
+        id: string;
+        namespace: string;
+        value: RawValue;
+    }>) => void;
     setWorldElementName: (id: string, value: string) => void;
     setVizij: (scene: World, animatables: Record<string, AnimatableValue>) => void;
     setSlot: (parentId: string, parentNamespace: string, childId: string, childNamespace: string) => void;
@@ -471,6 +479,11 @@ declare const VizijSlice: (set: VizijStoreSetter, get: VizijStoreGetter) => {
     getExportableBodies: (filterIds?: string[]) => THREE.Group<THREE.Object3DEventMap>[];
     setGeometry: (id: string, geometry: THREE.BufferGeometry) => void;
     setValue: (id: string, namespace: string, value: RawValue | ((current: RawValue | undefined) => RawValue | undefined)) => void;
+    setValues: (writes?: Array<{
+        id: string;
+        namespace: string;
+        value: RawValue;
+    }>) => void;
     setWorldElementName: (id: string, value: string) => void;
     setParent: (id: string, parent: string) => void;
     setChild: (id: string, child: string) => void;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentProps, ReactNode, RefObject } from 'react';
+import { CSSProperties, ComponentProps, ReactNode, RefObject, MouseEvent } from 'react';
 import { Canvas, ThreeEvent } from '@react-three/fiber';
 import * as zustand from 'zustand';
 import * as THREE from 'three';
@@ -8,11 +8,12 @@ import { Mesh, Group as Group$1, BufferGeometry, ShapeGeometry, AnimationClip, O
 import { RawValue, AnimatableValue, RawVector2 } from '@vizij/utils';
 
 interface VizijProps {
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     className?: string;
     rootId: string;
     namespace?: string;
     showSafeArea?: boolean;
+    showSelectionGlow?: boolean;
     onPointerMissed?: ComponentProps<typeof Canvas>["onPointerMissed"];
 }
 /**
@@ -30,7 +31,7 @@ interface VizijProps {
  *
  * @returns The rendered ReactNode.
  */
-declare function Vizij({ style, className, rootId, namespace, showSafeArea, onPointerMissed, }: VizijProps): ReactNode;
+declare function Vizij({ style, className, rootId, namespace, showSafeArea, showSelectionGlow, onPointerMissed, }: VizijProps): ReactNode;
 interface InnerVizijProps {
     rootId: string;
     namespace: string;
@@ -40,8 +41,9 @@ interface InnerVizijProps {
         resolution: number;
     };
     showSafeArea?: boolean;
+    showSelectionGlow?: boolean;
 }
-declare function InnerVizij({ rootId, namespace, container, showSafeArea, }: InnerVizijProps): react_jsx_runtime.JSX.Element;
+declare function InnerVizij({ rootId, namespace, container, showSafeArea, showSelectionGlow, }: InnerVizijProps): react_jsx_runtime.JSX.Element;
 
 /**
  * A wrapping type to reference an attribute that is animatable.
@@ -298,6 +300,7 @@ interface VizijPoseDefinition {
     id: VizijPoseId;
     name?: string;
     description?: string;
+    group?: string | null;
     values: Record<string, number | undefined>;
 }
 interface VizijPoseRigConfig {
@@ -420,6 +423,11 @@ interface VizijData {
 }
 interface VizijActions {
     setValue: (id: string, namespace: string, value: RawValue | ((current: RawValue | undefined) => RawValue | undefined)) => void;
+    setValues: (writes: Array<{
+        id: string;
+        namespace: string;
+        value: RawValue;
+    }>) => void;
     setWorldElementName: (id: string, value: string) => void;
     setVizij: (scene: World, animatables: Record<string, AnimatableValue>) => void;
     setSlot: (parentId: string, parentNamespace: string, childId: string, childNamespace: string) => void;
@@ -471,6 +479,11 @@ declare const VizijSlice: (set: VizijStoreSetter, get: VizijStoreGetter) => {
     getExportableBodies: (filterIds?: string[]) => THREE.Group<THREE.Object3DEventMap>[];
     setGeometry: (id: string, geometry: THREE.BufferGeometry) => void;
     setValue: (id: string, namespace: string, value: RawValue | ((current: RawValue | undefined) => RawValue | undefined)) => void;
+    setValues: (writes?: Array<{
+        id: string;
+        namespace: string;
+        value: RawValue;
+    }>) => void;
     setWorldElementName: (id: string, value: string) => void;
     setParent: (id: string, parent: string) => void;
     setChild: (id: string, child: string) => void;

package/dist/index.js

@@ -55,12 +55,12 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/vizij.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_error_boundary = require("react-error-boundary");
-var import_three = require("three");
-var import_fiber = require("@react-three/fiber");
+var import_three2 = require("three");
+var import_fiber2 = require("@react-three/fiber");
 var import_drei3 = require("@react-three/drei");
-var import_shallow7 = require("zustand/react/shallow");
+var import_shallow8 = require("zustand/react/shallow");
 
 // src/renderables/renderable.tsx
 var import_react8 = require("react");
@@ -174,7 +174,7 @@ function InnerRenderedGroup({
   namespace,
   chain
 }) {
-  const ref = (0, import_react4.useRef)();
+  const ref = (0, import_react4.useRef)(null);
   const group = useVizijStore((0, import_shallow2.useShallow)((state) => state.world[id]));
   const refIsNull = !group.refs[namespace]?.current;
   const animatables = useVizijStore((0, import_shallow2.useShallow)((state) => state.animatables));
@@ -295,9 +295,11 @@ function InnerRenderedEllipse({
   namespace,
   chain
 }) {
-  const ellipseRef = (0, import_react5.useRef)();
-  const materialRef = (0, import_react5.useRef)();
-  const lineRef = (0, import_react5.useRef)();
+  const ellipseRef = (0, import_react5.useRef)(null);
+  const materialRef = (0, import_react5.useRef)(
+    null
+  );
+  const lineRef = (0, import_react5.useRef)(null);
   const strokeOffsetRef = (0, import_react5.useRef)(0);
   const strokeWidthRef = (0, import_react5.useRef)(0);
   const onElementClick = useVizijStore(
@@ -580,9 +582,11 @@ function InnerRenderedRectangle({
   namespace,
   chain
 }) {
-  const rectangleRef = (0, import_react6.useRef)();
-  const materialRef = (0, import_react6.useRef)();
-  const lineRef = (0, import_react6.useRef)();
+  const rectangleRef = (0, import_react6.useRef)(null);
+  const materialRef = (0, import_react6.useRef)(
+    null
+  );
+  const lineRef = (0, import_react6.useRef)(null);
   const strokeOffsetRef = (0, import_react6.useRef)(0);
   const strokeWidthRef = (0, import_react6.useRef)(0);
   const onElementClick = useVizijStore(
@@ -867,8 +871,8 @@ function InnerRenderedShape({
   namespace,
   chain
 }) {
-  const refGroup = (0, import_react7.useRef)();
-  const ref = (0, import_react7.useRef)();
+  const refGroup = (0, import_react7.useRef)(null);
+  const ref = (0, import_react7.useRef)(null);
   const shape = useVizijStore((0, import_shallow5.useShallow)((state) => state.world[id]));
   const refs = useVizijStore(
     (0, import_shallow5.useShallow)((state) => state.world[id].refs)
@@ -909,7 +913,7 @@ function InnerRenderedShape({
     }),
     [shape, animatableValues, selectionData]
   );
-  const material = (0, import_react7.useRef)();
+  const material = (0, import_react7.useRef)(null);
   const morphTargetSettings = (0, import_react7.useMemo)(() => {
     if (shape.morphTargets) {
       const dictionary = shape.morphTargets.reduce(
@@ -1555,6 +1559,19 @@ var VizijSlice = (set, get) => ({
       })
     );
   },
+  setValues: (writes = []) => {
+    if (writes.length === 0) {
+      return;
+    }
+    set(
+      (0, import_immer.produce)((state) => {
+        writes.forEach(({ id, namespace, value }) => {
+          const lookupId = (0, import_utils6.getLookup)(namespace, id);
+          state.values.set(lookupId, value);
+        });
+      })
+    );
+  },
   setWorldElementName: (id, value) => {
     set(
       (0, import_immer.produce)((state) => {
@@ -1749,59 +1766,163 @@ var createVizijStore = (initial) => (0, import_zustand2.create)()(
   }))
 );
 
-// src/vizij.tsx
+// src/effects/selection-glow-effect.tsx
+var import_react10 = require("react");
+var import_fiber = require("@react-three/fiber");
+var import_shallow7 = require("zustand/react/shallow");
+var import_three = require("three");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-import_three.Object3D.DEFAULT_UP.set(0, 0, 1);
+function SelectionGlowEffect({
+  enabled = false,
+  color = "#ff1010ff",
+  opacity = 0.9,
+  thresholdAngle = 2
+}) {
+  const selections = useVizijStore(
+    (0, import_shallow7.useShallow)(
+      (state) => enabled ? state.elementSelection ?? [] : []
+    )
+  );
+  if (!enabled || selections.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Fragment, { children: selections.map((selection) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    SelectionOutline,
+    {
+      selection,
+      color: selection.color ?? color,
+      opacity,
+      thresholdAngle
+    },
+    `${selection.namespace}:${selection.id}`
+  )) });
+}
+function SelectionOutline({
+  selection,
+  color,
+  opacity,
+  thresholdAngle
+}) {
+  const target = useVizijStore(
+    (0, import_shallow7.useShallow)((state) => {
+      const entry = state.world[selection.id];
+      const ref = entry?.refs?.[selection.namespace];
+      const geometry = entry?.geometry ?? null;
+      return { ref, geometry };
+    })
+  );
+  const sourceRef = target.ref;
+  const edgesGeometry = (0, import_react10.useMemo)(() => {
+    if (!target.geometry) return null;
+    const edges = new import_three.EdgesGeometry(target.geometry, thresholdAngle);
+    return edges;
+  }, [target.geometry, thresholdAngle]);
+  (0, import_react10.useEffect)(() => () => edgesGeometry?.dispose(), [edgesGeometry]);
+  const material = (0, import_react10.useMemo)(() => {
+    const mat = new import_three.LineBasicMaterial({
+      color: new import_three.Color(color),
+      transparent: true,
+      opacity,
+      blending: import_three.AdditiveBlending,
+      depthTest: false,
+      depthWrite: false,
+      toneMapped: false
+    });
+    return mat;
+  }, [color, opacity]);
+  (0, import_react10.useEffect)(() => () => material.dispose(), [material]);
+  const lineRef = (0, import_react10.useRef)(null);
+  (0, import_fiber.useFrame)(() => {
+    const source = sourceRef?.current;
+    const line = lineRef.current;
+    if (!source || !line) return;
+    copyWorldTransform(source, line);
+    line.visible = source.visible;
+  });
+  if (!sourceRef || !edgesGeometry) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "lineSegments",
+    {
+      ref: lineRef,
+      geometry: edgesGeometry,
+      material,
+      frustumCulled: false,
+      renderOrder: 1e3
+    }
+  );
+}
+var tempMatrix = new import_three.Matrix4();
+var tempPosition = new import_three.Vector3();
+var tempQuaternion = new import_three.Quaternion();
+var tempScale = new import_three.Vector3();
+function copyWorldTransform(source, target) {
+  source.updateWorldMatrix(true, false);
+  tempMatrix.copy(source.matrixWorld);
+  tempMatrix.decompose(tempPosition, tempQuaternion, tempScale);
+  target.position.copy(tempPosition);
+  target.quaternion.copy(tempQuaternion);
+  target.scale.copy(tempScale);
+  target.updateMatrix();
+}
+
+// src/vizij.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+import_three2.Object3D.DEFAULT_UP.set(0, 0, 1);
 function Vizij({
   style,
   className,
   rootId,
   namespace = "default",
   showSafeArea = false,
+  showSelectionGlow = false,
   onPointerMissed
 }) {
-  const ctx = (0, import_react10.useContext)(VizijContext);
+  const ctx = (0, import_react11.useContext)(VizijContext);
   if (ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_fiber.Canvas,
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_fiber2.Canvas,
       {
         shadows: false,
         style,
         className,
         onPointerMissed,
         gl: {
-          outputColorSpace: import_three.SRGBColorSpace,
-          toneMapping: import_three.NoToneMapping,
+          outputColorSpace: import_three2.SRGBColorSpace,
+          toneMapping: import_three2.NoToneMapping,
           antialias: true
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           MemoizedInnerVizij,
           {
             rootId,
             namespace,
-            showSafeArea
+            showSafeArea,
+            showSelectionGlow
           }
         )
       }
     );
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_fiber.Canvas,
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_fiber2.Canvas,
       {
         style,
         className,
         onPointerMissed,
         gl: {
-          outputColorSpace: import_three.SRGBColorSpace,
-          toneMapping: import_three.NoToneMapping,
+          outputColorSpace: import_three2.SRGBColorSpace,
+          toneMapping: import_three2.NoToneMapping,
           antialias: true
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           MemoizedInnerVizij,
           {
             rootId,
             namespace,
-            showSafeArea
+            showSafeArea,
+            showSelectionGlow
           }
         )
       }
@@ -1812,15 +1933,16 @@ function InnerVizij({
   rootId,
   namespace = "default",
   container,
-  showSafeArea
+  showSafeArea,
+  showSelectionGlow
 }) {
   const sceneParentSizing = container ? {
     width: container.width * container.resolution,
     height: container.height * container.resolution
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ambientLight", { intensity: Math.PI / 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ambientLight", { intensity: Math.PI / 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_drei3.OrthographicCamera,
       {
         makeDefault: true,
@@ -1829,7 +1951,7 @@ function InnerVizij({
         far: 101
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       World,
       {
         rootId,
@@ -1837,27 +1959,28 @@ function InnerVizij({
         parentSizing: sceneParentSizing
       }
     ) }),
-    showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SafeAreaRenderer, { rootId })
+    showSelectionGlow && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectionGlowEffect, { enabled: true }),
+    showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SafeAreaRenderer, { rootId })
   ] });
 }
-var MemoizedInnerVizij = (0, import_react10.memo)(InnerVizij);
+var MemoizedInnerVizij = (0, import_react11.memo)(InnerVizij);
 function InnerWorld({
   rootId,
   namespace = "default",
   parentSizing
 }) {
   const [present, rootBounds] = useVizijStore(
-    (0, import_shallow7.useShallow)((state) => {
+    (0, import_shallow8.useShallow)((state) => {
       const group = state.world[rootId];
       const bounds = group?.rootBounds ?? defaultRootBounds;
       return [group !== void 0, bounds];
     })
   );
-  const { camera, size } = (0, import_fiber.useThree)((state) => ({
+  const { camera, size } = (0, import_fiber2.useThree)((state) => ({
     camera: state.camera,
     size: state.size
   }));
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const width = rootBounds.size.x;
     const height = rootBounds.size.y;
     if (camera && parentSizing === void 0 && camera.isOrthographicCamera) {
@@ -1885,9 +2008,9 @@ function InnerWorld({
       camera.updateProjectionMatrix();
     }
   }, [rootBounds, camera, parentSizing, size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_error_boundary.ErrorBoundary, { fallback: null, children: [
-    present && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Renderable, { id: rootId, namespace, chain: [] }),
-    !present && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_error_boundary.ErrorBoundary, { fallback: null, children: [
+    present && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Renderable, { id: rootId, namespace, chain: [] }),
+    !present && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_drei3.Text,
       {
         position: [0, 0, 0],
@@ -1900,7 +2023,7 @@ function InnerWorld({
     )
   ] });
 }
-var World = (0, import_react10.memo)(InnerWorld);
+var World = (0, import_react11.memo)(InnerWorld);
 function SafeAreaRenderer({ rootId }) {
   const rootBounds = useVizijStore((state) => {
     const group = state.world[rootId];
@@ -1910,7 +2033,7 @@ function SafeAreaRenderer({ rootId }) {
   const right = rootBounds.center.x + rootBounds.size.x / 2;
   const top = rootBounds.center.y + rootBounds.size.y / 2;
   const bottom = rootBounds.center.y - rootBounds.size.y / 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_drei3.Line,
     {
       points: [
@@ -1941,11 +2064,11 @@ var ShapeMaterial = /* @__PURE__ */ ((ShapeMaterial2) => {
 })(ShapeMaterial || {});
 
 // src/hooks/use-vizij-store-subscription.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useVizijStoreSubscription(selector, listener) {
-  const store = (0, import_react11.useContext)(VizijContext);
+  const store = (0, import_react12.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const initialValue = selector(store.getState());
     listener(initialValue);
     return store.subscribe(selector, listener);
@@ -1953,17 +2076,17 @@ function useVizijStoreSubscription(selector, listener) {
 }
 
 // src/hooks/use-vizij-store-setter.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useVizijStoreSetter() {
-  const store = (0, import_react12.useContext)(VizijContext);
+  const store = (0, import_react13.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.setState;
 }
 
 // src/hooks/use-vizij-store-getter.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useVizijStoreGetter() {
-  const store = (0, import_react13.useContext)(VizijContext);
+  const store = (0, import_react14.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.getState;
 }
@@ -1973,7 +2096,7 @@ var THREE5 = __toESM(require("three"));
 var import_three_stdlib = require("three-stdlib");
 
 // src/functions/gltf-loading/traverse-three.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var THREE4 = __toESM(require("three"));
 
 // src/functions/gltf-loading/map-features.ts
@@ -1999,19 +2122,19 @@ function mapFeatures(features) {
 }
 
 // src/functions/gltf-loading/import-scene.ts
-var import_three4 = require("three");
+var import_three5 = require("three");
 
 // src/functions/gltf-loading/import-group.ts
-var import_three3 = require("three");
+var import_three4 = require("three");
 
 // src/functions/util.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 function namespaceArrayToRefs(namespaces) {
-  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: (0, import_react14.createRef)() }), {});
+  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }), {});
 }
 
 // src/functions/gltf-loading/import-mesh.ts
-var import_three2 = require("three");
+var import_three3 = require("three");
 
 // src/functions/gltf-loading/import-geometry.ts
 function sanitizeMorphKey(name, fallbackIndex, used) {
@@ -2051,7 +2174,7 @@ function importGeometry(geometry, mesh) {
           type: "number",
           default: mesh.morphTargetInfluences?.[index] ?? 0,
           constraints: {
-            min: 0,
+            min: -1,
             max: 1
           },
           pub: {
@@ -2067,7 +2190,7 @@ function importGeometry(geometry, mesh) {
 }
 
 // src/functions/gltf-loading/import-mesh.ts
-import_three2.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three3.Object3D.DEFAULT_UP.set(0, 0, 1);
 function importMesh(mesh, namespaces, colorLookup) {
   let world = {};
   let animatables = {};
@@ -2226,7 +2349,7 @@ function getShapeMaterial(mesh, useEmissive) {
 }
 
 // src/functions/gltf-loading/import-group.ts
-import_three3.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three4.Object3D.DEFAULT_UP.set(0, 0, 1);
 function importGroup(group, namespaces, colorLookup, rootBounds) {
   let world = {};
   let animatables = {};
@@ -2314,7 +2437,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
 }
 
 // src/functions/gltf-loading/import-scene.ts
-import_three4.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three5.Object3D.DEFAULT_UP.set(0, 0, 1);
 function importScene(scene, namespaces, rootBounds) {
   let world = {};
   let animatables = {};
@@ -2356,7 +2479,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
                 {}
               )
             };
@@ -2371,7 +2494,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
               ...data,
               geometry: child.geometry,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
                 {}
               )
             };
@@ -2385,7 +2508,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
                 {}
               )
             };
@@ -2399,7 +2522,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
                 {}
               )
             };
@@ -2585,9 +2708,10 @@ function deriveRootBounds(group) {
 }
 
 // src/functions/vizij-bundle.ts
+var import_utils7 = require("@vizij/utils");
 var BUNDLE_KEYS = ["VIZIJ_bundle"];
 function cloneBundle(value) {
-  return JSON.parse(JSON.stringify(value));
+  return (0, import_utils7.cloneDeepSafe)(value);
 }
 function readExtensionValue(extensionContainer) {
   for (const key of BUNDLE_KEYS) {
@@ -2685,6 +2809,7 @@ function applyVizijBundle(object, bundle) {
 }
 
 // src/functions/gltf-loading/extract-animations.ts
+var import_utils8 = require("@vizij/utils");
 var CHANNEL_PATH_TO_TRACK_PROPERTY = {
   translation: "position",
   rotation: "quaternion",
@@ -2700,7 +2825,7 @@ function clonePlainObject(value) {
   if (!value) {
     return void 0;
   }
-  return JSON.parse(JSON.stringify(value));
+  return (0, import_utils8.cloneDeepSafe)(value);
 }
 function inferValueSize(valueType) {
   switch (valueType) {

package/dist/index.mjs

@@ -1,19 +1,10 @@
 // src/vizij.tsx
-import {
-  Suspense,
-  memo as memo6,
-  useContext as useContext3,
-  useEffect as useEffect6
-} from "react";
+import { Suspense, memo as memo6, useContext as useContext3, useEffect as useEffect7 } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import {
-  Object3D as Object3D4,
-  SRGBColorSpace,
-  NoToneMapping
-} from "three";
+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";
+import { useShallow as useShallow7 } from "zustand/react/shallow";
 
 // src/renderables/renderable.tsx
 import { memo as memo5, useMemo as useMemo5 } from "react";
@@ -35,13 +26,7 @@ function useVizijStore(selector) {
 }
 
 // src/renderables/group.tsx
-import {
-  memo,
-  useCallback,
-  useEffect as useEffect2,
-  useRef,
-  useMemo
-} from "react";
+import { memo, useCallback, useEffect as useEffect2, useRef, useMemo } from "react";
 import * as THREE from "three";
 import { useShallow } from "zustand/react/shallow";
 import {
@@ -138,7 +123,7 @@ function InnerRenderedGroup({
   namespace,
   chain
 }) {
-  const ref = useRef();
+  const ref = useRef(null);
   const group = useVizijStore(useShallow((state) => state.world[id]));
   const refIsNull = !group.refs[namespace]?.current;
   const animatables = useVizijStore(useShallow((state) => state.animatables));
@@ -249,13 +234,7 @@ function InnerRenderedGroup({
 var RenderedGroup = memo(InnerRenderedGroup);
 
 // src/renderables/ellipse.tsx
-import {
-  memo as memo2,
-  useCallback as useCallback2,
-  useEffect as useEffect3,
-  useRef as useRef2,
-  useMemo as useMemo2
-} from "react";
+import { memo as memo2, useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useMemo as useMemo2 } from "react";
 import { useShallow as useShallow2 } from "zustand/react/shallow";
 import {
   instanceOfRawNumber as instanceOfRawNumber2,
@@ -272,9 +251,11 @@ function InnerRenderedEllipse({
   namespace,
   chain
 }) {
-  const ellipseRef = useRef2();
-  const materialRef = useRef2();
-  const lineRef = useRef2();
+  const ellipseRef = useRef2(null);
+  const materialRef = useRef2(
+    null
+  );
+  const lineRef = useRef2(null);
   const strokeOffsetRef = useRef2(0);
   const strokeWidthRef = useRef2(0);
   const onElementClick = useVizijStore(
@@ -547,13 +528,7 @@ var showLine = (ellipse) => {
 };
 
 // src/renderables/rectangle.tsx
-import {
-  memo as memo3,
-  useCallback as useCallback3,
-  useEffect as useEffect4,
-  useRef as useRef3,
-  useMemo as useMemo3
-} from "react";
+import { memo as memo3, useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useMemo as useMemo3 } from "react";
 import { useShallow as useShallow3 } from "zustand/react/shallow";
 import {
   instanceOfRawNumber as instanceOfRawNumber3,
@@ -570,9 +545,11 @@ function InnerRenderedRectangle({
   namespace,
   chain
 }) {
-  const rectangleRef = useRef3();
-  const materialRef = useRef3();
-  const lineRef = useRef3();
+  const rectangleRef = useRef3(null);
+  const materialRef = useRef3(
+    null
+  );
+  const lineRef = useRef3(null);
   const strokeOffsetRef = useRef3(0);
   const strokeWidthRef = useRef3(0);
   const onElementClick = useVizijStore(
@@ -846,13 +823,7 @@ var showLine2 = (rectangle) => {
 };
 
 // src/renderables/shape.tsx
-import {
-  memo as memo4,
-  useCallback as useCallback4,
-  useRef as useRef4,
-  useMemo as useMemo4,
-  useEffect as useEffect5
-} from "react";
+import { memo as memo4, useCallback as useCallback4, useRef as useRef4, useMemo as useMemo4, useEffect as useEffect5 } from "react";
 import * as THREE2 from "three";
 import { useShallow as useShallow4 } from "zustand/react/shallow";
 import {
@@ -869,8 +840,8 @@ function InnerRenderedShape({
   namespace,
   chain
 }) {
-  const refGroup = useRef4();
-  const ref = useRef4();
+  const refGroup = useRef4(null);
+  const ref = useRef4(null);
   const shape = useVizijStore(useShallow4((state) => state.world[id]));
   const refs = useVizijStore(
     useShallow4((state) => state.world[id].refs)
@@ -911,7 +882,7 @@ function InnerRenderedShape({
     }),
     [shape, animatableValues, selectionData]
   );
-  const material = useRef4();
+  const material = useRef4(null);
   const morphTargetSettings = useMemo4(() => {
     if (shape.morphTargets) {
       const dictionary = shape.morphTargets.reduce(
@@ -1557,6 +1528,19 @@ var VizijSlice = (set, get) => ({
       })
     );
   },
+  setValues: (writes = []) => {
+    if (writes.length === 0) {
+      return;
+    }
+    set(
+      produce((state) => {
+        writes.forEach(({ id, namespace, value }) => {
+          const lookupId = getLookup2(namespace, id);
+          state.values.set(lookupId, value);
+        });
+      })
+    );
+  },
   setWorldElementName: (id, value) => {
     set(
       produce((state) => {
@@ -1751,8 +1735,117 @@ var createVizijStore = (initial) => create()(
   }))
 );
 
+// src/effects/selection-glow-effect.tsx
+import { Fragment as Fragment4, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef5 } from "react";
+import { useFrame } from "@react-three/fiber";
+import { useShallow as useShallow6 } from "zustand/react/shallow";
+import {
+  AdditiveBlending,
+  Color,
+  EdgesGeometry,
+  LineBasicMaterial,
+  Matrix4,
+  Quaternion,
+  Vector3
+} from "three";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function SelectionGlowEffect({
+  enabled = false,
+  color = "#ff1010ff",
+  opacity = 0.9,
+  thresholdAngle = 2
+}) {
+  const selections = useVizijStore(
+    useShallow6(
+      (state) => enabled ? state.elementSelection ?? [] : []
+    )
+  );
+  if (!enabled || selections.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(Fragment4, { children: selections.map((selection) => /* @__PURE__ */ jsx6(
+    SelectionOutline,
+    {
+      selection,
+      color: selection.color ?? color,
+      opacity,
+      thresholdAngle
+    },
+    `${selection.namespace}:${selection.id}`
+  )) });
+}
+function SelectionOutline({
+  selection,
+  color,
+  opacity,
+  thresholdAngle
+}) {
+  const target = useVizijStore(
+    useShallow6((state) => {
+      const entry = state.world[selection.id];
+      const ref = entry?.refs?.[selection.namespace];
+      const geometry = entry?.geometry ?? null;
+      return { ref, geometry };
+    })
+  );
+  const sourceRef = target.ref;
+  const edgesGeometry = useMemo6(() => {
+    if (!target.geometry) return null;
+    const edges = new EdgesGeometry(target.geometry, thresholdAngle);
+    return edges;
+  }, [target.geometry, thresholdAngle]);
+  useEffect6(() => () => edgesGeometry?.dispose(), [edgesGeometry]);
+  const material = useMemo6(() => {
+    const mat = new LineBasicMaterial({
+      color: new Color(color),
+      transparent: true,
+      opacity,
+      blending: AdditiveBlending,
+      depthTest: false,
+      depthWrite: false,
+      toneMapped: false
+    });
+    return mat;
+  }, [color, opacity]);
+  useEffect6(() => () => material.dispose(), [material]);
+  const lineRef = useRef5(null);
+  useFrame(() => {
+    const source = sourceRef?.current;
+    const line = lineRef.current;
+    if (!source || !line) return;
+    copyWorldTransform(source, line);
+    line.visible = source.visible;
+  });
+  if (!sourceRef || !edgesGeometry) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(
+    "lineSegments",
+    {
+      ref: lineRef,
+      geometry: edgesGeometry,
+      material,
+      frustumCulled: false,
+      renderOrder: 1e3
+    }
+  );
+}
+var tempMatrix = new Matrix4();
+var tempPosition = new Vector3();
+var tempQuaternion = new Quaternion();
+var tempScale = new Vector3();
+function copyWorldTransform(source, target) {
+  source.updateWorldMatrix(true, false);
+  tempMatrix.copy(source.matrixWorld);
+  tempMatrix.decompose(tempPosition, tempQuaternion, tempScale);
+  target.position.copy(tempPosition);
+  target.quaternion.copy(tempQuaternion);
+  target.scale.copy(tempScale);
+  target.updateMatrix();
+}
+
 // src/vizij.tsx
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 Object3D4.DEFAULT_UP.set(0, 0, 1);
 function Vizij({
   style,
@@ -1760,11 +1853,12 @@ function Vizij({
   rootId,
   namespace = "default",
   showSafeArea = false,
+  showSelectionGlow = false,
   onPointerMissed
 }) {
   const ctx = useContext3(VizijContext);
   if (ctx) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       Canvas,
       {
         shadows: false,
@@ -1776,18 +1870,19 @@ function Vizij({
           toneMapping: NoToneMapping,
           antialias: true
         },
-        children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx7(
           MemoizedInnerVizij,
           {
             rootId,
             namespace,
-            showSafeArea
+            showSafeArea,
+            showSelectionGlow
           }
         )
       }
     );
   } else {
-    return /* @__PURE__ */ jsx6(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ jsx7(
       Canvas,
       {
         style,
@@ -1798,12 +1893,13 @@ function Vizij({
           toneMapping: NoToneMapping,
           antialias: true
         },
-        children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx7(
           MemoizedInnerVizij,
           {
             rootId,
             namespace,
-            showSafeArea
+            showSafeArea,
+            showSelectionGlow
           }
         )
       }
@@ -1814,15 +1910,16 @@ function InnerVizij({
   rootId,
   namespace = "default",
   container,
-  showSafeArea
+  showSafeArea,
+  showSelectionGlow
 }) {
   const sceneParentSizing = container ? {
     width: container.width * container.resolution,
     height: container.height * container.resolution
   } : void 0;
-  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx6("ambientLight", { intensity: Math.PI / 2 }),
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
+    /* @__PURE__ */ jsx7("ambientLight", { intensity: Math.PI / 2 }),
+    /* @__PURE__ */ jsx7(
       OrthographicCamera,
       {
         makeDefault: true,
@@ -1831,7 +1928,7 @@ function InnerVizij({
         far: 101
       }
     ),
-    /* @__PURE__ */ jsx6(Suspense, { fallback: null, children: /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(Suspense, { fallback: null, children: /* @__PURE__ */ jsx7(
       World,
       {
         rootId,
@@ -1839,7 +1936,8 @@ function InnerVizij({
         parentSizing: sceneParentSizing
       }
     ) }),
-    showSafeArea && /* @__PURE__ */ jsx6(SafeAreaRenderer, { rootId })
+    showSelectionGlow && /* @__PURE__ */ jsx7(SelectionGlowEffect, { enabled: true }),
+    showSafeArea && /* @__PURE__ */ jsx7(SafeAreaRenderer, { rootId })
   ] });
 }
 var MemoizedInnerVizij = memo6(InnerVizij);
@@ -1849,7 +1947,7 @@ function InnerWorld({
   parentSizing
 }) {
   const [present, rootBounds] = useVizijStore(
-    useShallow6((state) => {
+    useShallow7((state) => {
       const group = state.world[rootId];
       const bounds = group?.rootBounds ?? defaultRootBounds;
       return [group !== void 0, bounds];
@@ -1859,7 +1957,7 @@ function InnerWorld({
     camera: state.camera,
     size: state.size
   }));
-  useEffect6(() => {
+  useEffect7(() => {
     const width = rootBounds.size.x;
     const height = rootBounds.size.y;
     if (camera && parentSizing === void 0 && camera.isOrthographicCamera) {
@@ -1888,8 +1986,8 @@ function InnerWorld({
     }
   }, [rootBounds, camera, parentSizing, size]);
   return /* @__PURE__ */ jsxs4(ErrorBoundary, { fallback: null, children: [
-    present && /* @__PURE__ */ jsx6(Renderable, { id: rootId, namespace, chain: [] }),
-    !present && /* @__PURE__ */ jsx6(
+    present && /* @__PURE__ */ jsx7(Renderable, { id: rootId, namespace, chain: [] }),
+    !present && /* @__PURE__ */ jsx7(
       Text,
       {
         position: [0, 0, 0],
@@ -1912,7 +2010,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__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     Line3,
     {
       points: [
@@ -1943,11 +2041,11 @@ var ShapeMaterial = /* @__PURE__ */ ((ShapeMaterial2) => {
 })(ShapeMaterial || {});
 
 // src/hooks/use-vizij-store-subscription.ts
-import { useContext as useContext4, useEffect as useEffect7 } from "react";
+import { useContext as useContext4, useEffect as useEffect8 } from "react";
 function useVizijStoreSubscription(selector, listener) {
   const store = useContext4(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
-  useEffect7(() => {
+  useEffect8(() => {
     const initialValue = selector(store.getState());
     listener(initialValue);
     return store.subscribe(selector, listener);
@@ -2013,9 +2111,7 @@ function namespaceArrayToRefs(namespaces) {
 }
 
 // src/functions/gltf-loading/import-mesh.ts
-import {
-  Object3D as Object3D5
-} from "three";
+import { Object3D as Object3D5 } from "three";
 
 // src/functions/gltf-loading/import-geometry.ts
 function sanitizeMorphKey(name, fallbackIndex, used) {
@@ -2055,7 +2151,7 @@ function importGeometry(geometry, mesh) {
           type: "number",
           default: mesh.morphTargetInfluences?.[index] ?? 0,
           constraints: {
-            min: 0,
+            min: -1,
             max: 1
           },
           pub: {
@@ -2589,9 +2685,10 @@ function deriveRootBounds(group) {
 }
 
 // src/functions/vizij-bundle.ts
+import { cloneDeepSafe } from "@vizij/utils";
 var BUNDLE_KEYS = ["VIZIJ_bundle"];
 function cloneBundle(value) {
-  return JSON.parse(JSON.stringify(value));
+  return cloneDeepSafe(value);
 }
 function readExtensionValue(extensionContainer) {
   for (const key of BUNDLE_KEYS) {
@@ -2689,6 +2786,7 @@ function applyVizijBundle(object, bundle) {
 }
 
 // src/functions/gltf-loading/extract-animations.ts
+import { cloneDeepSafe as cloneDeepSafe2 } from "@vizij/utils";
 var CHANNEL_PATH_TO_TRACK_PROPERTY = {
   translation: "position",
   rotation: "quaternion",
@@ -2704,7 +2802,7 @@ function clonePlainObject(value) {
   if (!value) {
     return void 0;
   }
-  return JSON.parse(JSON.stringify(value));
+  return cloneDeepSafe2(value);
 }
 function inferValueSize(valueType) {
   switch (valueType) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizij/render",
   "description": "Higher-level visualization and interaction components for robot and ai faces.",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@vizij/utils": "0.0.3",
+    "@vizij/utils": "0.1.0",
     "clsx": "^2.1.1",
     "deep-equal": "^2.2.3",
     "immer": "^10.0.3",
@@ -33,8 +33,8 @@
     "three-stdlib": "^2.35.13"
   },
   "peerDependencies": {
-    "@react-three/drei": "^9.115.0",
-    "@react-three/fiber": "^8.17.10",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
     "react": ">=18",
     "react-dom": ">=18",
     "tailwindcss": "^4.1.3",
@@ -42,15 +42,15 @@
     "zustand": "^5.0.2"
   },
   "devDependencies": {
-    "@react-three/drei": "^9.115.0",
-    "@react-three/fiber": "^8.17.10",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
     "@types/deep-equal": "^1.0.4",
     "@types/lodash": "^4.17.4",
-    "@types/react": "^18.3.1",
+    "@types/react": "^19.2.7",
     "@types/three": "^0.170.0",
     "@size-limit/file": "^11.2.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "size-limit": "^11.1.7",
     "three": "^0.170.0",
     "zustand": "^5.0.2",