@3driseai/3drise-viewer 0.1.26 → 0.1.28

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/ParastichyGrid.d.ts

@@ -0,0 +1,25 @@
+import type { ThreeElements } from '@react-three/fiber';
+import type { ObjectReadyProps } from '../types/objectReady';
+import type { ParastichyGridConfig } from '../types/gridConfigs';
+import type { AnimationOptions, MouseMoveDomain } from '@3driseai/3drise-core';
+export interface ParastichyGridProps extends ObjectReadyProps {
+    config?: ParastichyGridConfig;
+    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;
+}
+/** ParastichyGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export declare const defaultParastichyGridConfig: ParastichyGridConfig;
+/**
+ * The sunflower's crossed Fibonacci spiral families as a grid of their own: sectionSize spirals one way, sectionSize/φ the other, every crossing a seed, and the difference family cutting each cell into triangles. Light runs inward along the spirals.
+ *
+ * The grid always lies flat: any other orientation, and any movement of the
+ * whole, is the parent object's transform. Only what happens inside it animates.
+ */
+export declare function ParastichyGrid({ config, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: ParastichyGridProps): import("react").JSX.Element;
+export default ParastichyGrid;
+//# sourceMappingURL=ParastichyGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParastichyGrid.d.ts","sourceRoot":"","sources":["../../src/components/ParastichyGrid.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,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IACzD,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,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,iGAAiG;AACjG,eAAO,MAAM,2BAA2B,EAAE,oBA2BzC,CAAC;AAWF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAoC,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,mBAAmB,+BA4CjK;AAED,eAAe,cAAc,CAAC"}

package/dist/components/ParastichyGrid.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { useConfigDriver } from '../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../utils/configAnimations.js';
+import { applyGridConfig, GRID_STRUCTURAL } from '../utils/gridConfig.js';
+import { ParastichyGridMaterial, GRIDS_ANIMATABLE } from '@3driseai/3drise-core';
+// Side-effect import registers <parastichyGridMaterial> via extend().
+void ParastichyGridMaterial;
+/** ParastichyGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export const defaultParastichyGridConfig = {
+    cellSize: 1.2,
+    size: 50,
+    segments: undefined,
+    lineMode: 0,
+    cellMode: 0,
+    lineWidth: 1.1,
+    sectionSize: 21,
+    sectionWidth: 0.9,
+    animSpeed: 1,
+    animScale: 0.5,
+    animIntensity: 0.6,
+    fadeDistance: undefined,
+    fadeStrength: 0.5,
+    displace: 0,
+    divergence: 137.508,
+    third: 0.45,
+    sap: 0.9,
+    fill: 0.35,
+    lineColor: '#d4ac4e',
+    sectionColor: '#7fb8a8',
+    cellColor: '#0f3a33',
+    glowColor: '#fff0b8',
+    bgColor: '#03080a',
+    bgOpacity: 0,
+    reveal: 1,
+    revealDuration: 0,
+};
+/** This grid's own uniforms (u_<key>), pushed by applyGridConfig beside the shared surface knobs. */
+const VARIANT = ['divergence', 'third', 'sap', 'fill'];
+/** No computed uniforms: every knob maps straight to its u_<key>. */
+const DERIVE = {};
+/** Knobs that reshape the plane or pick a mode: they change on commit, never through the live path. */
+const STRUCTURAL = [...GRID_STRUCTURAL];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyGridConfig pushes. */
+const ANIMATABLE = new Set((GRIDS_ANIMATABLE.parastichyGrid ?? []).map((p) => p.value));
+/**
+ * The sunflower's crossed Fibonacci spiral families as a grid of their own: sectionSize spirals one way, sectionSize/φ the other, every crossing a seed, and the difference family cutting each cell into triangles. Light runs inward along the spirals.
+ *
+ * The grid always lies flat: any other orientation, and any movement of the
+ * whole, is the parent object's transform. Only what happens inside it animates.
+ */
+export function ParastichyGrid({ config = defaultParastichyGridConfig, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) {
+    const matRef = useRef(null);
+    const rootRef = useRef(null);
+    const meshRef = useRef(null);
+    useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
+    // 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(defaultParastichyGridConfig, config), [config]);
+    const { cellSize, size, segments, displace, reveal, revealDuration } = base;
+    const segs = segments ?? (displace > 0
+        ? Math.min(256, Math.max(64, Math.ceil(size / Math.max(cellSize, 1e-4)) * 2))
+        : 1);
+    useGridSurface(matRef, meshRef, { reveal, revealDuration });
+    // 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: [-Math.PI / 2, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("parastichyGridMaterial", { ref: setMaterial, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }, ParastichyGridMaterial.key)] }) }));
+}
+export default ParastichyGrid;

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/PhyllotaxisGrid.d.ts

@@ -0,0 +1,25 @@
+import type { ThreeElements } from '@react-three/fiber';
+import type { ObjectReadyProps } from '../types/objectReady';
+import type { PhyllotaxisGridConfig } from '../types/gridConfigs';
+import type { AnimationOptions, MouseMoveDomain } from '@3driseai/3drise-core';
+export interface PhyllotaxisGridProps extends ObjectReadyProps {
+    config?: PhyllotaxisGridConfig;
+    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;
+}
+/** PhyllotaxisGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export declare const defaultPhyllotaxisGridConfig: PhyllotaxisGridConfig;
+/**
+ * Vogel's sunflower: florets at the golden angle, each a lit dome coloured by age and carrying a mark aligned to the head's radius. Bloom rings travel from the rim to the centre and open the marks; the head itself never turns.
+ *
+ * The grid always lies flat: any other orientation, and any movement of the
+ * whole, is the parent object's transform. Only what happens inside it animates.
+ */
+export declare function PhyllotaxisGrid({ config, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: PhyllotaxisGridProps): import("react").JSX.Element;
+export default PhyllotaxisGrid;
+//# sourceMappingURL=PhyllotaxisGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhyllotaxisGrid.d.ts","sourceRoot":"","sources":["../../src/components/PhyllotaxisGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAQxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC1D,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,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,kGAAkG;AAClG,eAAO,MAAM,4BAA4B,EAAE,qBA6B1C,CAAC;AAWF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,MAAqC,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,oBAAoB,+BAsDpK;AAED,eAAe,eAAe,CAAC"}

package/dist/components/PhyllotaxisGrid.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
+import { useObjectReady } from '../hooks/useObjectReady.js';
+import { useGridSurface } from '../hooks/useGridSurface.js';
+import { useConfigDriver } from '../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../utils/configAnimations.js';
+import { applyGridConfig, GRID_STRUCTURAL } from '../utils/gridConfig.js';
+import { PhyllotaxisGridMaterial, GRIDS_ANIMATABLE } from '@3driseai/3drise-core';
+// Side-effect import registers <phyllotaxisGridMaterial> via extend().
+void PhyllotaxisGridMaterial;
+/** PhyllotaxisGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export const defaultPhyllotaxisGridConfig = {
+    cellSize: 1.6,
+    size: 50,
+    segments: undefined,
+    lineMode: 0,
+    cellMode: 0,
+    lineWidth: 0.6,
+    sectionSize: 2,
+    sectionWidth: 1.4,
+    animSpeed: 1,
+    animScale: 0.5,
+    animIntensity: 0.6,
+    fadeDistance: undefined,
+    fadeStrength: 0.6,
+    displace: 0,
+    divergence: 137.508,
+    bloomRate: 0.04,
+    relief: 0.8,
+    shape: 1,
+    shapeSize: 0.85,
+    shapeGlow: 0.9,
+    lineColor: '#a8661c',
+    sectionColor: '#ffcf70',
+    cellColor: '#3a1a08',
+    glowColor: '#e4ee8a',
+    bgColor: '#070402',
+    bgOpacity: 0,
+    reveal: 1,
+    revealDuration: 0,
+};
+/** This grid's own uniforms (u_<key>), pushed by applyGridConfig beside the shared surface knobs. */
+const VARIANT = ['divergence', 'bloomRate', 'relief', 'shape', 'shapeSize', 'shapeGlow'];
+/** No computed uniforms: every knob maps straight to its u_<key>. */
+const DERIVE = {};
+/** Knobs that reshape 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.phyllotaxisGrid ?? []).map((p) => p.value));
+/**
+ * Vogel's sunflower: florets at the golden angle, each a lit dome coloured by age and carrying a mark aligned to the head's radius. Bloom rings travel from the rim to the centre and open the marks; the head itself never turns.
+ *
+ * The grid always lies flat: any other orientation, and any movement of the
+ * whole, is the parent object's transform. Only what happens inside it animates.
+ */
+export function PhyllotaxisGrid({ config = defaultPhyllotaxisGridConfig, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) {
+    const matRef = useRef(null);
+    const rootRef = useRef(null);
+    const meshRef = useRef(null);
+    useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
+    // 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(defaultPhyllotaxisGridConfig, config), [config]);
+    const { cellSize, size, segments, displace, reveal, revealDuration } = base;
+    const segs = segments ?? (displace > 0
+        ? Math.min(256, Math.max(64, Math.ceil(size / Math.max(cellSize, 1e-4)) * 2))
+        : 1);
+    useGridSurface(matRef, meshRef, { reveal, revealDuration });
+    // 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 });
+    // Rate knobs are integrated here, never multiplied by time in the shader, so a
+    // keyframed or pointer-driven rate changes the speed without making the pattern
+    // jump. The knob is read from the material, i.e. the merged (driven) value.
+    useFrame((_, delta) => {
+        const u = matRef.current?.uniforms;
+        if (!u)
+            return;
+        const dt = Math.min(delta, 0.1) * u.u_animSpeed.value;
+        u.u_bloomPhase.value += dt * u.u_bloomRate.value;
+    });
+    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: [-Math.PI / 2, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("phyllotaxisGridMaterial", { ref: setMaterial, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }, PhyllotaxisGridMaterial.key)] }) }));
+}
+export default PhyllotaxisGrid;

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;