@vizij/render 0.0.6 → 0.1.0

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.6",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -23,23 +23,8 @@
     "dist",
     "README.md"
   ],
-  "scripts": {
-    "build": "tsup src/index.tsx --format esm,cjs --dts src/index.tsx --external react,react-dom,three,@react-three/fiber,@react-three/drei,zustand",
-    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts src/index.tsx --external react,react-dom,three,@react-three/fiber,@react-three/drei,zustand",
-    "typecheck": "tsc --noEmit",
-    "lint": "pnpm --filter \"$npm_package_name\" exec eslint --ext .js,.jsx,.ts,.tsx -- .",
-    "lint:fix": "pnpm --filter \"$npm_package_name\" exec eslint --ext .js,.jsx,.ts,.tsx --fix -- .",
-    "prettier:check": "prettier --check .",
-    "prettier:write": "prettier --write .",
-    "test": "node --loader ./tests/node-ts-loader.mjs --test tests/*.node-test.mjs",
-    "clean": "rm -rf dist .turbo coverage tsconfig.tsbuildinfo",
-    "reset": "rm -rf node_modules",
-    "reset:hard": "pnpm run reset && rm -f pnpm-lock.yaml package-lock.json yarn.lock",
-    "size": "size-limit",
-    "prepack": "pnpm run build && pnpm run test && pnpm run typecheck && pnpm run lint && pnpm run size"
-  },
   "dependencies": {
-    "@vizij/utils": "^0.0.2",
+    "@vizij/utils": "0.1.0",
     "clsx": "^2.1.1",
     "deep-equal": "^2.2.3",
     "immer": "^10.0.3",
@@ -48,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",
@@ -57,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",
@@ -82,5 +67,19 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts src/index.tsx --external react,react-dom,three,@react-three/fiber,@react-three/drei,zustand",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts src/index.tsx --external react,react-dom,three,@react-three/fiber,@react-three/drei,zustand",
+    "typecheck": "tsc --noEmit",
+    "lint": "pnpm --filter \"$npm_package_name\" exec eslint --ext .js,.jsx,.ts,.tsx -- .",
+    "lint:fix": "pnpm --filter \"$npm_package_name\" exec eslint --ext .js,.jsx,.ts,.tsx --fix -- .",
+    "prettier:check": "prettier --check .",
+    "prettier:write": "prettier --write .",
+    "test": "node --loader ./tests/node-ts-loader.mjs --test tests/*.node-test.mjs",
+    "clean": "rm -rf dist .turbo coverage tsconfig.tsbuildinfo",
+    "reset": "rm -rf node_modules",
+    "reset:hard": "pnpm run reset && rm -f pnpm-lock.yaml package-lock.json yarn.lock",
+    "size": "size-limit"
   }
-}
+}