@3driseai/3drise-viewer 0.1.26 → 0.1.27

package/dist/components/HyperbolicGrid.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { useObjectReady } from '../hooks/useObjectReady.js';
 import { useGridSurface } from '../hooks/useGridSurface.js';
-import { HyperbolicGridMaterial } from '@3driseai/3drise-core';
+import { useConfigDriver } from '../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../utils/configAnimations.js';
+import { applyGridConfig, GRID_STRUCTURAL } from '../utils/gridConfig.js';
+import { HyperbolicGridMaterial, GRIDS_ANIMATABLE } from '@3driseai/3drise-core';
 // Side-effect import registers <hyperbolicGridMaterial> via extend().
 void HyperbolicGridMaterial;
 /** HyperbolicGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
@@ -39,23 +42,38 @@ export const defaultHyperbolicGridConfig = {
 /**
  * An Escher-style {p,q} tiling of the Poincare disk. A slow Mobius translation glides the tiling through itself, and the tiles shrink without end toward the rim.
  */
-export function HyperbolicGrid({ config = defaultHyperbolicGridConfig, groupProps, onObjectReady, onObjectDispose }) {
+/** This grid's own uniforms (u_<key>), pushed by applyGridConfig beside the shared surface knobs. */
+const VARIANT = ['sides', 'valence', 'drift'];
+/** No computed uniforms: every knob maps straight to its u_<key>. */
+const DERIVE = {};
+/** Knobs that rebuild the plane or pick a mode: they change on commit, never through the live path. */
+const STRUCTURAL = [...GRID_STRUCTURAL, 'sides', 'valence'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyGridConfig pushes. */
+const ANIMATABLE = new Set((GRIDS_ANIMATABLE.hyperbolicGrid ?? []).map((p) => p.value));
+export function HyperbolicGrid({ config = defaultHyperbolicGridConfig, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) {
     const matRef = useRef(null);
     const rootRef = useRef(null);
     const meshRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    const { cellSize, size, segments, flat, lineMode, cellMode, lineWidth, sectionSize, sectionWidth, animSpeed, animScale, animIntensity, fadeDistance, fadeStrength, displace, sides, valence, drift, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // The committed config over this grid's defaults: every knob has a value to render
+    // and for a keyframe or pointer binding to start from.
+    const base = useMemo(() => withConfigDefaults(defaultHyperbolicGridConfig, config), [config]);
+    const { cellSize, size, segments, flat, displace, followMouse, reveal, revealDuration } = base;
     // the ripple is fine-grained relative to the disk
     const segs = segments ?? (displace > 0 ? Math.min(512, Math.max(96, Math.ceil(size / Math.max(cellSize, 1e-4)) * 64)) : 1);
-    const fade = fadeDistance ?? size * 0.5;
-    const colors = useMemo(() => ({
-        line: new THREE.Color(lineColor),
-        section: new THREE.Color(sectionColor),
-        cell: new THREE.Color(cellColor),
-        glow: new THREE.Color(glowColor),
-        bg: new THREE.Color(bgColor),
-    }), [lineColor, sectionColor, cellColor, glowColor, bgColor]);
     useGridSurface(matRef, meshRef, { followMouse, reveal, revealDuration });
-    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("hyperbolicGridMaterial", { ref: matRef, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, u_cellSize: cellSize, u_lineWidth: lineWidth, u_sectionSize: sectionSize, u_sectionWidth: sectionWidth, u_lineMode: lineMode, u_cellMode: cellMode, u_animSpeed: animSpeed, u_animScale: animScale, u_animIntensity: animIntensity, u_fadeDistance: fade, u_fadeStrength: fadeStrength, u_displace: displace, u_sides: sides, u_valence: valence, u_drift: drift, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, HyperbolicGridMaterial.key)] }) }));
+    // One push point for every uniform the config owns: the committed config when the
+    // material mounts or the config commits, the merged one while anything overrides it.
+    const baseRef = useRef(base);
+    baseRef.current = base;
+    const setMaterial = useCallback((m) => {
+        matRef.current = m;
+        if (m)
+            applyGridConfig(m, baseRef.current, VARIANT, DERIVE);
+    }, []);
+    useLayoutEffect(() => { applyGridConfig(matRef.current, base, VARIANT, DERIVE); }, [base]);
+    const push = useCallback((merged) => applyGridConfig(matRef.current, merged, VARIANT, DERIVE), []);
+    useConfigDriver({ rootRef, id, family: 'grids', base, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("hyperbolicGridMaterial", { ref: setMaterial, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }, HyperbolicGridMaterial.key)] }) }));
 }
 export default HyperbolicGrid;

package/dist/components/LandscapeBuilder.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ObjectReadyProps } from '../types/objectReady';
-import type { LandscapeSettings } from '../types/landscapeConfigs';
+import type { LandscapeSettings } from '@3driseai/3drise-core';
 export interface LandscapeBuilderProps extends ObjectReadyProps {
     /** Accepts a partial or older-shaped blob. A blob with no `heightMap`
      *  normalises to nothing — a landscape without one is not a landscape, and

package/dist/components/LandscapeBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LandscapeBuilder.d.ts","sourceRoot":"","sources":["../../src/components/LandscapeBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAIlE,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC3D;;8EAE0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAA;CAC/C;AAED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqBrD,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"LandscapeBuilder.d.ts","sourceRoot":"","sources":["../../src/components/LandscapeBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAI9D,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC3D;;8EAE0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAA;CAC/C;AAED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqBrD,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/components/LandscapeBuilder.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { normalizeLandscape, normalizeLandscapeQuality } from '../types/landscapeConfigs.js';
+import { normalizeLandscape, normalizeLandscapeQuality } from '@3driseai/3drise-core';
 import LandscapeMesh from './landscape/LandscapeMesh.js';
 /**
  * The world ground.

package/dist/components/LandscapeObject.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ObjectReadyProps } from '../types/objectReady';
-import type { LandscapeSettings } from '../types/landscapeConfigs';
+import type { LandscapeSettings } from '@3driseai/3drise-core';
 export interface LandscapeObjectProps extends ObjectReadyProps {
     settings: Partial<LandscapeSettings> & {
         id?: string;

package/dist/components/LandscapeObject.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LandscapeObject.d.ts","sourceRoot":"","sources":["../../src/components/LandscapeObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAIlE,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC1D,QAAQ,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACzD;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqBnD,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"LandscapeObject.d.ts","sourceRoot":"","sources":["../../src/components/LandscapeObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAI9D,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC1D,QAAQ,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACzD;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqBnD,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/components/LandscapeObject.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { normalizeLandscape, normalizeLandscapeQuality } from '../types/landscapeConfigs.js';
+import { normalizeLandscape, normalizeLandscapeQuality } from '@3driseai/3drise-core';
 import LandscapeMesh from './landscape/LandscapeMesh.js';
 /**
  * A placed landscape — a floating island, a diorama, a game tile, a table-top

package/dist/components/MoireGrid.d.ts

@@ -1,23 +1,19 @@
 import type { ThreeElements } from '@react-three/fiber';
 import type { ObjectReadyProps } from '../types/objectReady';
 import type { MoireGridConfig } from '../types/gridConfigs';
+import type { AnimationOptions, MouseMoveDomain } from '@3driseai/3drise-core';
 export interface MoireGridProps extends ObjectReadyProps {
     config?: MoireGridConfig;
     groupProps?: ThreeElements['group'];
+    /** Scene object id: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this grid's config knobs (animations.grid.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this grid's config knobs (mouseMove.grid). */
+    mouseMove?: MouseMoveDomain;
 }
 /** MoireGridConfig — the single source of truth for a moire grid instance. */
 export declare const defaultMoireGridConfig: MoireGridConfig;
-/**
- * Two overlaid lattices, counter-rotating.
- *
- * Nothing draws the moire pattern — it emerges from where the two line sets
- * nearly coincide, which is why it moves the way real interference does. Small
- * `layerAngle` and `layerScale` values near 1 give the long, slow beats; larger
- * ones break up into fine cross-hatch. `spin` 0 freezes it at `layerAngle`.
- *
- * `shape` picks what the two layers are made of. Rings have no orientation, so
- * for that shape the layers are offset from each other rather than rotated.
- */
-export declare function MoireGrid({ config, groupProps, onObjectReady, onObjectDispose }: MoireGridProps): import("react").JSX.Element;
+export declare function MoireGrid({ config, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: MoireGridProps): import("react").JSX.Element;
 export default MoireGrid;
 //# sourceMappingURL=MoireGrid.d.ts.map

package/dist/components/MoireGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoireGrid.d.ts","sourceRoot":"","sources":["../../src/components/MoireGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACpD,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAWD,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,EAAE,eA6BpC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAA+B,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,cAAc,+BAkExH;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"MoireGrid.d.ts","sourceRoot":"","sources":["../../src/components/MoireGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACpD,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACpC,4DAA4D;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0EAA0E;IAC1E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,qEAAqE;IACrE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAWD,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,EAAE,eA6BpC,CAAC;AAsBF,wBAAgB,SAAS,CAAC,EAAE,MAA+B,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,cAAc,+BA6ClJ;AAED,eAAe,SAAS,CAAC"}

package/dist/components/MoireGrid.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { useObjectReady } from '../hooks/useObjectReady.js';
 import { useGridSurface } from '../hooks/useGridSurface.js';
-import { MoireGridMaterial } from '@3driseai/3drise-core';
+import { useConfigDriver } from '../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../utils/configAnimations.js';
+import { applyGridConfig, GRID_STRUCTURAL } from '../utils/gridConfig.js';
+import { MoireGridMaterial, GRIDS_ANIMATABLE } from '@3driseai/3drise-core';
 // Side-effect import registers <moireGridMaterial> via extend().
 void MoireGridMaterial;
 const SHAPE_INDEX = {
@@ -53,24 +56,39 @@ export const defaultMoireGridConfig = {
  * `shape` picks what the two layers are made of. Rings have no orientation, so
  * for that shape the layers are offset from each other rather than rotated.
  */
-export function MoireGrid({ config = defaultMoireGridConfig, groupProps, onObjectReady, onObjectDispose }) {
+/** This grid's own uniforms (u_<key>), pushed by applyGridConfig beside the shared surface knobs. */
+const VARIANT = ['layerAngle', 'layerScale', 'spin'];
+/** Computed uniforms (clamps, enum indices, booleans as 0/1). */
+const DERIVE = { shape: (c) => SHAPE_INDEX[c.shape] ?? 0 };
+/** Knobs that rebuild the plane or pick a mode: they change on commit, never through the live path. */
+const STRUCTURAL = [...GRID_STRUCTURAL, 'shape'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyGridConfig pushes. */
+const ANIMATABLE = new Set((GRIDS_ANIMATABLE.moireGrid ?? []).map((p) => p.value));
+export function MoireGrid({ config = defaultMoireGridConfig, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) {
     const matRef = useRef(null);
     const rootRef = useRef(null);
     const meshRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    const { cellSize, size, segments, flat, lineMode, cellMode, lineWidth, sectionSize, sectionWidth, animSpeed, animScale, animIntensity, fadeDistance, fadeStrength, displace, shape, layerAngle, layerScale, spin, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // The committed config over this grid's defaults: every knob has a value to render
+    // and for a keyframe or pointer binding to start from.
+    const base = useMemo(() => withConfigDefaults(defaultMoireGridConfig, config), [config]);
+    const { cellSize, size, segments, flat, displace, followMouse, reveal, revealDuration } = base;
     const segs = segments ?? (displace > 0
         ? Math.min(256, Math.max(64, Math.ceil(size / Math.max(cellSize, 1e-4)) * 2))
         : 1);
-    const fade = fadeDistance ?? size * 0.5;
-    const colors = useMemo(() => ({
-        line: new THREE.Color(lineColor),
-        section: new THREE.Color(sectionColor),
-        cell: new THREE.Color(cellColor),
-        glow: new THREE.Color(glowColor),
-        bg: new THREE.Color(bgColor),
-    }), [lineColor, sectionColor, cellColor, glowColor, bgColor]);
     useGridSurface(matRef, meshRef, { followMouse, reveal, revealDuration });
-    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("moireGridMaterial", { ref: matRef, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, u_cellSize: cellSize, u_lineWidth: lineWidth, u_sectionSize: sectionSize, u_sectionWidth: sectionWidth, u_lineMode: lineMode, u_cellMode: cellMode, u_animSpeed: animSpeed, u_animScale: animScale, u_animIntensity: animIntensity, u_fadeDistance: fade, u_fadeStrength: fadeStrength, u_displace: displace, u_shape: SHAPE_INDEX[shape] ?? 0, u_layerAngle: layerAngle, u_layerScale: layerScale, u_spin: spin, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, MoireGridMaterial.key)] }) }));
+    // One push point for every uniform the config owns: the committed config when the
+    // material mounts or the config commits, the merged one while anything overrides it.
+    const baseRef = useRef(base);
+    baseRef.current = base;
+    const setMaterial = useCallback((m) => {
+        matRef.current = m;
+        if (m)
+            applyGridConfig(m, baseRef.current, VARIANT, DERIVE);
+    }, []);
+    useLayoutEffect(() => { applyGridConfig(matRef.current, base, VARIANT, DERIVE); }, [base]);
+    const push = useCallback((merged) => applyGridConfig(matRef.current, merged, VARIANT, DERIVE), []);
+    useConfigDriver({ rootRef, id, family: 'grids', base, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("moireGridMaterial", { ref: setMaterial, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }, MoireGridMaterial.key)] }) }));
 }
 export default MoireGrid;

package/dist/components/ObjectNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectNode.d.ts","sourceRoot":"","sources":["../../src/components/ObjectNode.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAe,qBAAqB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAChG,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAiBrD,KAAK,eAAe,GAAG,gBAAgB,GAAG;IACtC,IAAI,EAAE,cAAc,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAC7G,CAAC;AAkBF,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyIzC,CAAC;AACF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ObjectNode.d.ts","sourceRoot":"","sources":["../../src/components/ObjectNode.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAe,qBAAqB,EAA2C,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACzI,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAiBrD,KAAK,eAAe,GAAG,gBAAgB,GAAG;IACtC,IAAI,EAAE,cAAc,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAC7G,CAAC;AAkBF,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+IzC,CAAC;AACF,eAAe,UAAU,CAAC"}

package/dist/components/ObjectNode.js

@@ -111,7 +111,7 @@ const ObjectNode = ({ node, onObjectReady, onObjectDispose, handleObjectClick })
         path: (obj, onObjectReady) => (_jsx(PathRenderer, { pathSettings: obj.config, ...relabel(obj) }, obj.id)),
         grid: (obj, onObjectReady) => (
         // <GridHelper {...(obj.config as GridConfig)} side={2} />
-        _jsx(GridGenerator, { config: obj.config, ...relabel(obj) })),
+        _jsx(GridGenerator, { config: obj.config, id: obj.id, keyframes: obj.animations?.grid?.animations, mouseMove: obj.mouseMove?.grid, ...relabel(obj) })),
         // A placed body of water — the object host. The world ocean is mounted by
         // the environment instead, so this branch only ever sees a pool, a pond or
         // a canal; OceanBuilder decides which from config.host either way.
@@ -122,7 +122,7 @@ const ObjectNode = ({ node, onObjectReady, onObjectDispose, handleObjectClick })
         landscape: (obj, onObjectReady) => (_jsx(LandscapeObject, { settings: obj, ...relabel(obj) }, obj.id)),
         effect: (obj, _onObjectReady, slot = 0) => (_jsx(EffectsGenerator, { settings: {
                 config: obj.config,
-            }, ...(slot === 0 ? relabel(obj) : NO_READY) }, obj.id)),
+            }, id: slot === 0 ? obj.id : undefined, keyframes: obj.animations?.effect?.animations, mouseMove: obj.mouseMove?.effect, ...(slot === 0 ? relabel(obj) : NO_READY) }, obj.id)),
         gallery: (obj, onObjectReady) => (_jsx(GalleryLayout, { createdObject: obj, handleObjectClick: handleObjectClick, ...relabel(obj) })),
         light: (obj, _onObjectReady, slot = 0) => (_jsx(LightObject, { createdObject: slot === 0 ? obj : withoutShadow(obj), ...(slot === 0 ? relabel(obj) : NO_READY) })),
         environment: (obj, onObjectReady) => (_jsx(EnvironmentObject, { createdObject: obj, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose })),

package/dist/components/ObjectsRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectsRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ObjectsRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACvH,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAM9E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,UAAU,oBAAqB,SAAQ,gBAAgB;IACnD,cAAc,EAAE,WAAW,CAAC;IAC5B,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,cAAc,EAAE,qBAAqB,EAAE,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1G,mEAAmE;IACnE,SAAS,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;CACtC;AAGD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4DlD,CAAC;AAEH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ObjectsRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ObjectsRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACvH,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAO9E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,UAAU,oBAAqB,SAAQ,gBAAgB;IACnD,cAAc,EAAE,WAAW,CAAC;IAC5B,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,cAAc,EAAE,qBAAqB,EAAE,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1G,mEAAmE;IACnE,SAAS,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;CACtC;AAGD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuFlD,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/dist/components/ObjectsRenderer.js

@@ -3,7 +3,8 @@ import { memo, useRef, useCallback, useMemo, useEffect } from 'react';
 import { buildObjectTree } from '@3driseai/3drise-core';
 import ObjectNode from './ObjectNode.js';
 import useInteraction from '../hooks/useInteraction.js';
-import { ObjectHoverContext, setInteractionRunner } from '../interactions/runner.js';
+import { ObjectHoverContext, setEffectPrewarmer, setEffectPreviewer, setInteractionRunner } from '../interactions/runner.js';
+import { prewarmEffect, previewEffect, previewEffects } from '../operations/runtime.js';
 import { findById } from '../utils/sceneQuery.js';
 import { useObjectReady } from '../hooks/useObjectReady.js';
 const ObjectsRenderer = memo(({ cameraSettings, createdObjects, generalObjectSettings, onObjectsReady, onObjectReady, onObjectDispose, handleObjectClick, sequences = [], clips = [], actionSequences = [], }) => {
@@ -46,14 +47,47 @@ const ObjectsRenderer = memo(({ cameraSettings, createdObjects, generalObjectSet
     // "Try it" in the studio: run an interaction as if its trigger fired.
     const objectsRef = useRef(createdObjects);
     objectsRef.current = createdObjects;
-    useEffect(() => setInteractionRunner((objectId, interaction) => {
+    useEffect(() => setInteractionRunner((objectId, interaction, opts) => {
         const ref = findById(objectId);
         const createdObject = objectsRef.current?.find(o => o.id === objectId);
         if (!ref || !createdObject)
             return false;
-        executeInteraction({ interaction, ref, createdObject });
+        if (opts?.preview) {
+            // effects play and come back; animations and actions run as usual
+            executeInteraction({ interaction: { ...interaction, effects: [] }, ref, createdObject });
+            void previewEffects(interaction.effects ?? [], ref);
+        }
+        else {
+            executeInteraction({ interaction, ref, createdObject });
+        }
         return true;
     }), [executeInteraction]);
+    useEffect(() => setEffectPreviewer((objectId, effect) => {
+        const ref = findById(objectId);
+        return ref ? previewEffect(effect, ref) : Promise.resolve(false);
+    }), []);
+    useEffect(() => setEffectPrewarmer((objectId, effect) => {
+        const ref = findById(objectId);
+        return ref ? prewarmEffect(effect, ref) : Promise.resolve();
+    }), []);
+    // Compile, in the background, the shaders of every effect this scene's interactions
+    // and actions use, so a visitor's first click never stalls. Each (effect, object) once.
+    useEffect(() => {
+        const t = setTimeout(() => {
+            for (const o of objectsRef.current ?? []) {
+                const ref = findById(o.id);
+                if (!ref)
+                    continue;
+                for (const ix of (o.actions ?? []))
+                    for (const e of ix?.effects ?? [])
+                        void prewarmEffect(e, ref);
+            }
+            for (const a of actionSequences ?? [])
+                for (const e of a.effects ?? [])
+                    void prewarmEffect(e, null);
+        }, 1500);
+        return () => clearTimeout(t);
+    }, [createdObjects, actionSequences]);
     const handleObjectClickHandler = (createdObject, ref, event) => {
         const clickInteractions = filterInteractionsByEvent(createdObject.actions, "click");
         clickInteractions.forEach((interaction) => {

package/dist/components/OceanBuilder.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SkySettings, TimeSettings } from '@3driseai/3drise-core';
 import type { ObjectReadyProps } from '../types/objectReady';
-import type { OceanWaterSettings } from '../types/oceanConfigs';
+import type { OceanWaterSettings } from '@3driseai/3drise-core';
 export interface OceanBuilderProps extends ObjectReadyProps {
     /** Accepts a partial or older-shaped blob — including core's retired
      *  `OceanSettings`, the flat plane with a water material picked out of the

package/dist/components/OceanBuilder.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { normalizeOcean, normalizeOceanQuality } from '../types/oceanConfigs.js';
+import { normalizeOcean, normalizeOceanQuality } from '@3driseai/3drise-core';
 import Sea from './water/Sea.js';
 import Lake from './water/Lake.js';
 import Storm from './water/Storm.js';

package/dist/components/ParticlesGenerator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ParticlesGenerator.d.ts","sourceRoot":"","sources":["../../src/components/ParticlesGenerator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAU7D,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC7D,QAAQ,EAAE,2BAA2B,CAAC;IACtC,uFAAuF;IACvF,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,0FAA0F;AAC1F,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAgBzD,CAAC;AACF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ParticlesGenerator.d.ts","sourceRoot":"","sources":["../../src/components/ParticlesGenerator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAa7D,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC7D,QAAQ,EAAE,2BAA2B,CAAC;IACtC,uFAAuF;IACvF,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,0FAA0F;AAC1F,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmBzD,CAAC;AACF,eAAe,kBAAkB,CAAC"}

package/dist/components/ParticlesGenerator.js

@@ -7,6 +7,9 @@ import GrinderSparksParticles from './particles/GrinderSparksParticles.js';
 import ChladniSandParticles from './particles/ChladniSandParticles.js';
 import FaradayPowderParticles from './particles/FaradayPowderParticles.js';
 import NeonRainParticles from './particles/NeonRainParticles.js';
+import MagneticBottleParticles from './particles/MagneticBottleParticles.js';
+import ShapeBurstParticles from './particles/ShapeBurstParticles.js';
+import ShapeFlowParticles from './particles/ShapeFlowParticles.js';
 /** Standalone generative particle objects (type 'particles'), switched on config.type. */
 const ParticlesGenerator = ({ settings, mouseMove, onObjectReady, onObjectDispose }) => {
     const { config, animations } = settings;
@@ -23,6 +26,9 @@ const ParticlesGenerator = ({ settings, mouseMove, onObjectReady, onObjectDispos
         case 'chladniSand': return _jsx(ChladniSandParticles, { id: settings.id, size: size, config: config, animations: animations, ...ready });
         case 'faradayPowder': return _jsx(FaradayPowderParticles, { id: settings.id, size: size, config: config, animations: animations, ...ready });
         case 'neonRain': return _jsx(NeonRainParticles, { id: settings.id, size: size, config: config, animations: animations, ...ready });
+        case 'magneticBottle': return _jsx(MagneticBottleParticles, { id: settings.id, size: size, config: config, animations: animations, ...ready });
+        case 'shapeBurst': return _jsx(ShapeBurstParticles, { id: settings.id, size: size, config: config, animations: animations, ...ready });
+        case 'shapeFlow': return _jsx(ShapeFlowParticles, { id: settings.id, size: size, config: config, animations: animations, ...ready });
         default: return null;
     }
 };

package/dist/components/QuasiGrid.d.ts

@@ -1,22 +1,19 @@
 import type { ThreeElements } from '@react-three/fiber';
 import type { ObjectReadyProps } from '../types/objectReady';
 import type { QuasiGridConfig } from '../types/gridConfigs';
+import type { AnimationOptions, MouseMoveDomain } from '@3driseai/3drise-core';
 export interface QuasiGridProps extends ObjectReadyProps {
     config?: QuasiGridConfig;
     groupProps?: ThreeElements['group'];
+    /** Scene object id: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this grid's config knobs (animations.grid.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this grid's config knobs (mouseMove.grid). */
+    mouseMove?: MouseMoveDomain;
 }
 /** QuasiGridConfig — the single source of truth for a quasicrystal grid instance. */
 export declare const defaultQuasiGridConfig: QuasiGridConfig;
-/**
- * An aperiodic quasicrystal lattice, built as a de Bruijn multigrid: `symmetry`
- * families of evenly spaced parallel lines spread over a half turn.
- *
- * Where the angles do not divide the half turn evenly the intersections never
- * repeat, so unlike every other grid in this package the pattern is genuinely
- * non-periodic — pan as far as you like and it never comes back around. 5 is
- * Penrose. 4 and 6 do divide evenly and so come out periodic, which makes them
- * a useful sanity check rather than a bug.
- */
-export declare function QuasiGrid({ config, groupProps, onObjectReady, onObjectDispose }: QuasiGridProps): import("react").JSX.Element;
+export declare function QuasiGrid({ config, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: QuasiGridProps): import("react").JSX.Element;
 export default QuasiGrid;
 //# sourceMappingURL=QuasiGrid.d.ts.map

package/dist/components/QuasiGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuasiGrid.d.ts","sourceRoot":"","sources":["../../src/components/QuasiGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACpD,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,qFAAqF;AACrF,eAAO,MAAM,sBAAsB,EAAE,eA2BpC,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAA+B,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,cAAc,+BAgExH;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"QuasiGrid.d.ts","sourceRoot":"","sources":["../../src/components/QuasiGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACpD,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACpC,4DAA4D;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0EAA0E;IAC1E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,qEAAqE;IACrE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAKD,qFAAqF;AACrF,eAAO,MAAM,sBAAsB,EAAE,eA2BpC,CAAC;AAqBF,wBAAgB,SAAS,CAAC,EAAE,MAA+B,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,cAAc,+BA6ClJ;AAED,eAAe,SAAS,CAAC"}

package/dist/components/QuasiGrid.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { useObjectReady } from '../hooks/useObjectReady.js';
 import { useGridSurface } from '../hooks/useGridSurface.js';
-import { QuasiGridMaterial } from '@3driseai/3drise-core';
+import { useConfigDriver } from '../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../utils/configAnimations.js';
+import { applyGridConfig, GRID_STRUCTURAL } from '../utils/gridConfig.js';
+import { QuasiGridMaterial, GRIDS_ANIMATABLE } from '@3driseai/3drise-core';
 // Side-effect import registers <quasiGridMaterial> via extend().
 void QuasiGridMaterial;
 /** QuasiGridConfig — the single source of truth for a quasicrystal grid instance. */
@@ -45,24 +48,39 @@ export const defaultQuasiGridConfig = {
  * Penrose. 4 and 6 do divide evenly and so come out periodic, which makes them
  * a useful sanity check rather than a bug.
  */
-export function QuasiGrid({ config = defaultQuasiGridConfig, groupProps, onObjectReady, onObjectDispose }) {
+/** This grid's own uniforms (u_<key>), pushed by applyGridConfig beside the shared surface knobs. */
+const VARIANT = ['phase'];
+/** Computed uniforms (clamps, enum indices, booleans as 0/1). */
+const DERIVE = { symmetry: (c) => Math.max(3, Math.min(9, c.symmetry)) };
+/** Knobs that rebuild the plane or pick a mode: they change on commit, never through the live path. */
+const STRUCTURAL = [...GRID_STRUCTURAL, 'symmetry'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyGridConfig pushes. */
+const ANIMATABLE = new Set((GRIDS_ANIMATABLE.quasiGrid ?? []).map((p) => p.value));
+export function QuasiGrid({ config = defaultQuasiGridConfig, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) {
     const matRef = useRef(null);
     const rootRef = useRef(null);
     const meshRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    const { cellSize, size, segments, flat, lineMode, cellMode, lineWidth, sectionSize, sectionWidth, animSpeed, animScale, animIntensity, fadeDistance, fadeStrength, displace, symmetry, phase, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // The committed config over this grid's defaults: every knob has a value to render
+    // and for a keyframe or pointer binding to start from.
+    const base = useMemo(() => withConfigDefaults(defaultQuasiGridConfig, config), [config]);
+    const { cellSize, size, segments, flat, displace, followMouse, reveal, revealDuration } = base;
     const segs = segments ?? (displace > 0
         ? Math.min(256, Math.max(64, Math.ceil(size / Math.max(cellSize, 1e-4)) * 2))
         : 1);
-    const fade = fadeDistance ?? size * 0.5;
-    const colors = useMemo(() => ({
-        line: new THREE.Color(lineColor),
-        section: new THREE.Color(sectionColor),
-        cell: new THREE.Color(cellColor),
-        glow: new THREE.Color(glowColor),
-        bg: new THREE.Color(bgColor),
-    }), [lineColor, sectionColor, cellColor, glowColor, bgColor]);
     useGridSurface(matRef, meshRef, { followMouse, reveal, revealDuration });
-    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("quasiGridMaterial", { ref: matRef, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, u_cellSize: cellSize, u_lineWidth: lineWidth, u_sectionSize: sectionSize, u_sectionWidth: sectionWidth, u_lineMode: lineMode, u_cellMode: cellMode, u_animSpeed: animSpeed, u_animScale: animScale, u_animIntensity: animIntensity, u_fadeDistance: fade, u_fadeStrength: fadeStrength, u_displace: displace, u_symmetry: Math.max(3, Math.min(9, symmetry)), u_phase: phase, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, QuasiGridMaterial.key)] }) }));
+    // One push point for every uniform the config owns: the committed config when the
+    // material mounts or the config commits, the merged one while anything overrides it.
+    const baseRef = useRef(base);
+    baseRef.current = base;
+    const setMaterial = useCallback((m) => {
+        matRef.current = m;
+        if (m)
+            applyGridConfig(m, baseRef.current, VARIANT, DERIVE);
+    }, []);
+    useLayoutEffect(() => { applyGridConfig(matRef.current, base, VARIANT, DERIVE); }, [base]);
+    const push = useCallback((merged) => applyGridConfig(matRef.current, merged, VARIANT, DERIVE), []);
+    useConfigDriver({ rootRef, id, family: 'grids', base, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("quasiGridMaterial", { ref: setMaterial, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }, QuasiGridMaterial.key)] }) }));
 }
 export default QuasiGrid;

package/dist/components/RadarGrid.d.ts

@@ -1,24 +1,19 @@
 import type { ThreeElements } from '@react-three/fiber';
 import type { ObjectReadyProps } from '../types/objectReady';
 import type { RadarGridConfig } from '../types/gridConfigs';
+import type { AnimationOptions, MouseMoveDomain } from '@3driseai/3drise-core';
 export interface RadarGridProps extends ObjectReadyProps {
     config?: RadarGridConfig;
     groupProps?: ThreeElements['group'];
+    /** Scene object id: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this grid's config knobs (animations.grid.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this grid's config knobs (mouseMove.grid). */
+    mouseMove?: MouseMoveDomain;
 }
 /** RadarGridConfig — the single source of truth for a radar grid instance. */
 export declare const defaultRadarGridConfig: RadarGridConfig;
-/**
- * A polar HUD — concentric rings and radial spokes instead of an X/Y lattice,
- * masked to a disc of `fadeDistance` rather than filling its square plane.
- *
- * A sweep arm rotates with a decaying trail, contacts light as it crosses them
- * and fade until it comes back around, and `lineMode` 1 sends ping rings out
- * from the focus point. Set `sweepWidth` to 0 for a static instrument face,
- * `spokes` to 0 for rings only.
- *
- * Note that `fadeDistance` is the disc radius here, so keep `size` at least
- * twice it or the disc gets clipped by its own plane.
- */
-export declare function RadarGrid({ config, groupProps, onObjectReady, onObjectDispose }: RadarGridProps): import("react").JSX.Element;
+export declare function RadarGrid({ config, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: RadarGridProps): import("react").JSX.Element;
 export default RadarGrid;
 //# sourceMappingURL=RadarGrid.d.ts.map

package/dist/components/RadarGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadarGrid.d.ts","sourceRoot":"","sources":["../../src/components/RadarGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACpD,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,EAAE,eA4BpC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAA+B,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,cAAc,+BAiExH;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"RadarGrid.d.ts","sourceRoot":"","sources":["../../src/components/RadarGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACpD,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACpC,4DAA4D;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0EAA0E;IAC1E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,qEAAqE;IACrE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAKD,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,EAAE,eA4BpC,CAAC;AAuBF,wBAAgB,SAAS,CAAC,EAAE,MAA+B,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,cAAc,+BA6ClJ;AAED,eAAe,SAAS,CAAC"}

package/dist/components/RadarGrid.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { useObjectReady } from '../hooks/useObjectReady.js';
 import { useGridSurface } from '../hooks/useGridSurface.js';
-import { RadarGridMaterial } from '@3driseai/3drise-core';
+import { useConfigDriver } from '../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../utils/configAnimations.js';
+import { applyGridConfig, GRID_STRUCTURAL } from '../utils/gridConfig.js';
+import { RadarGridMaterial, GRIDS_ANIMATABLE } from '@3driseai/3drise-core';
 // Side-effect import registers <radarGridMaterial> via extend().
 void RadarGridMaterial;
 /** RadarGridConfig — the single source of truth for a radar grid instance. */
@@ -48,24 +51,39 @@ export const defaultRadarGridConfig = {
  * Note that `fadeDistance` is the disc radius here, so keep `size` at least
  * twice it or the disc gets clipped by its own plane.
  */
-export function RadarGrid({ config = defaultRadarGridConfig, groupProps, onObjectReady, onObjectDispose }) {
+/** This grid's own uniforms (u_<key>), pushed by applyGridConfig beside the shared surface knobs. */
+const VARIANT = ['spokes', 'sweepWidth', 'blipDensity'];
+/** No computed uniforms: every knob maps straight to its u_<key>. */
+const DERIVE = {};
+/** Knobs that rebuild the plane or pick a mode: they change on commit, never through the live path. */
+const STRUCTURAL = [...GRID_STRUCTURAL, 'spokes'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyGridConfig pushes. */
+const ANIMATABLE = new Set((GRIDS_ANIMATABLE.radarGrid ?? []).map((p) => p.value));
+export function RadarGrid({ config = defaultRadarGridConfig, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) {
     const matRef = useRef(null);
     const rootRef = useRef(null);
     const meshRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    const { cellSize, size, segments, flat, lineMode, cellMode, lineWidth, sectionSize, sectionWidth, animSpeed, animScale, animIntensity, fadeDistance, fadeStrength, displace, spokes, sweepWidth, blipDensity, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // The committed config over this grid's defaults: every knob has a value to render
+    // and for a keyframe or pointer binding to start from.
+    const base = useMemo(() => withConfigDefaults(defaultRadarGridConfig, config), [config]);
+    const { cellSize, size, segments, flat, displace, followMouse, reveal, revealDuration } = base;
     const segs = segments ?? (displace > 0
         ? Math.min(256, Math.max(64, Math.ceil(size / Math.max(cellSize, 1e-4)) * 4))
         : 1);
-    const fade = fadeDistance ?? size * 0.5;
-    const colors = useMemo(() => ({
-        line: new THREE.Color(lineColor),
-        section: new THREE.Color(sectionColor),
-        cell: new THREE.Color(cellColor),
-        glow: new THREE.Color(glowColor),
-        bg: new THREE.Color(bgColor),
-    }), [lineColor, sectionColor, cellColor, glowColor, bgColor]);
     useGridSurface(matRef, meshRef, { followMouse, reveal, revealDuration });
-    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("radarGridMaterial", { ref: matRef, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, u_cellSize: cellSize, u_lineWidth: lineWidth, u_sectionSize: sectionSize, u_sectionWidth: sectionWidth, u_lineMode: lineMode, u_cellMode: cellMode, u_animSpeed: animSpeed, u_animScale: animScale, u_animIntensity: animIntensity, u_fadeDistance: fade, u_fadeStrength: fadeStrength, u_displace: displace, u_spokes: spokes, u_sweepWidth: sweepWidth, u_blipDensity: blipDensity, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, RadarGridMaterial.key)] }) }));
+    // One push point for every uniform the config owns: the committed config when the
+    // material mounts or the config commits, the merged one while anything overrides it.
+    const baseRef = useRef(base);
+    baseRef.current = base;
+    const setMaterial = useCallback((m) => {
+        matRef.current = m;
+        if (m)
+            applyGridConfig(m, baseRef.current, VARIANT, DERIVE);
+    }, []);
+    useLayoutEffect(() => { applyGridConfig(matRef.current, base, VARIANT, DERIVE); }, [base]);
+    const push = useCallback((merged) => applyGridConfig(matRef.current, merged, VARIANT, DERIVE), []);
+    useConfigDriver({ rootRef, id, family: 'grids', base, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("radarGridMaterial", { ref: setMaterial, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }, RadarGridMaterial.key)] }) }));
 }
 export default RadarGrid;