@3driseai/3drise-viewer 0.1.16 → 0.1.17

package/README.md

@@ -6,7 +6,7 @@ You build in the **3dRise studio** — create objects, apply materials, set up a
 interactions — then render the result in React with one component. Nothing about the scene is configured
 in code: geometry, materials, lighting, animations and interactions all come from what you published.
 
-There are two components, depending on how much you want to embed:
+There are many components, these are the main ones:
 
 | Component          | Embeds                                                                  |
 | ------------------ | ----------------------------------------------------------------------- |
@@ -15,6 +15,8 @@ There are two components, depending on how much you want to embed:
 
 ---
 
+A ready to go react project with some examples: https://github.com/nadavtal/3drise-react
+
 ## Installation
 
 ```bash
@@ -131,7 +133,7 @@ export function Hero({ objectId }: { objectId: string }) {
       <ambientLight intensity={0.5} />
       <directionalLight position={[5, 10, 5]} intensity={1.5} />
 
-      <ObjectNodeApi objectId={objectId} cameraSettings={cameraSettings} />
+      <ObjectNodeApi objectId={objectId} />
 
       <OrbitControls />
     </Canvas>
@@ -152,7 +154,6 @@ their own materials and animations.
 | Prop                | Type                                                                                    | Description                                                              |
 | ------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
 | `objectId`          | `string` **(required)**                                                                 | Id of the published scene object to load.                                |
-| `cameraSettings`    | `CameraState` **(required)**                                                            | The camera the object should assume. Currently only `fov` is read, and only by particle objects — but the full object is required. |
 | `handleObjectClick` | `(object: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void` | The object was clicked. Note the name differs from `ProjectLoader`'s `onObjectClick`. |
 | `onObjectReady`     | `(object, ref: Object3D) => void`                                                       | The object reports its `Object3D` here — see below.                      |
 | `onObjectDispose`   | `(object, ref: Object3D) => void`                                                       | The matching teardown event.                                             |

package/dist/components/ChladniGrid.d.ts

@@ -0,0 +1,15 @@
+import type { ThreeElements } from '@react-three/fiber';
+import type { ObjectReadyProps } from '../types/objectReady';
+import type { ChladniGridConfig } from '../types/gridConfigs';
+export interface ChladniGridProps extends ObjectReadyProps {
+    config?: ChladniGridConfig;
+    groupProps?: ThreeElements['group'];
+}
+/** ChladniGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export declare const defaultChladniGridConfig: ChladniGridConfig;
+/**
+ * Chladni plates: the nodal lines of a standing wave on a square plate, with sand settling on them, drifting slowly between two neighbouring resonances.
+ */
+export declare function ChladniGrid({ config, groupProps, onObjectReady, onObjectDispose }: ChladniGridProps): import("react").JSX.Element;
+export default ChladniGrid;
+//# sourceMappingURL=ChladniGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChladniGrid.d.ts","sourceRoot":"","sources":["../../src/components/ChladniGrid.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,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACtD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,8FAA8F;AAC9F,eAAO,MAAM,wBAAwB,EAAE,iBA6BtC,CAAC;AAEF;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAiC,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,gBAAgB,+BAiE9H;AAED,eAAe,WAAW,CAAC"}

package/dist/components/ChladniGrid.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { useObjectReady } from '../hooks/useObjectReady.js';
+import { useGridSurface } from '../hooks/useGridSurface.js';
+import { ChladniGridMaterial } from '@3driseai/3drise-core';
+// Side-effect import registers <chladniGridMaterial> via extend().
+void ChladniGridMaterial;
+/** ChladniGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export const defaultChladniGridConfig = {
+    cellSize: 8,
+    size: 50,
+    flat: true,
+    segments: undefined,
+    lineMode: 0,
+    cellMode: 2,
+    lineWidth: 1.2,
+    sectionSize: 1,
+    sectionWidth: 0.8,
+    animSpeed: 1,
+    animScale: 0.5,
+    animIntensity: 0.6,
+    fadeDistance: undefined,
+    fadeStrength: 0.6,
+    displace: 0,
+    modeN: 3,
+    modeM: 5,
+    morph: 0.4,
+    grain: 0.8,
+    lineColor: '#d9c7a3',
+    sectionColor: '#4d5d6e',
+    cellColor: '#16222e',
+    glowColor: '#ffe2a8',
+    bgColor: '#06080b',
+    bgOpacity: 0,
+    followMouse: false,
+    reveal: 1,
+    revealDuration: 0,
+};
+/**
+ * Chladni plates: the nodal lines of a standing wave on a square plate, with sand settling on them, drifting slowly between two neighbouring resonances.
+ */
+export function ChladniGrid({ config = defaultChladniGridConfig, groupProps, 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, modeN, modeM, morph, grain, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // the displacement is the standing wave itself, so the mesh has to resolve every mode
+    const segs = segments ?? (displace > 0 ? Math.min(512, Math.max(96, Math.ceil(size / Math.max(cellSize, 1e-4)) * 48)) : 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("chladniGridMaterial", { 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_modeN: modeN, u_modeM: modeM, u_morph: morph, u_grain: grain, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, ChladniGridMaterial.key)] }) }));
+}
+export default ChladniGrid;

package/dist/components/CustomPrimitive.d.ts

@@ -5,6 +5,8 @@ import React from "react";
 import { type ThreeEvent } from "@react-three/fiber";
 interface CustomPrimitiveProps extends ObjectReadyProps {
     createdObject: CreatedObjectSettings;
+    /** Layout slot (meshSettings.layout). A model needs its own clone per slot. */
+    slot?: number;
     handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
 }
 declare const CustomPrimitive: React.FC<CustomPrimitiveProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"CustomPrimitive.d.ts","sourceRoot":"","sources":["../../src/components/CustomPrimitive.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,UAAU,oBAAqB,SAAQ,gBAAgB;IACnD,aAAa,EAAE,qBAAqB,CAAC;IACrC,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACpH;AAGD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoElD,CAAC;AAEH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CustomPrimitive.d.ts","sourceRoot":"","sources":["../../src/components/CustomPrimitive.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,UAAU,oBAAqB,SAAQ,gBAAgB;IACnD,aAAa,EAAE,qBAAqB,CAAC;IACrC,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACpH;AAGD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoElD,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/dist/components/CustomPrimitive.js

@@ -7,7 +7,7 @@ import ModelPrimitive from "./ModelPrimitive.js";
 import { useWaterReflections } from "../hooks/useWaterReflections.js";
 import { GeometryMesh } from "./GeometryShape.js";
 import { useObjectReady } from "../hooks/useObjectReady.js";
-const CustomPrimitive = memo(({ createdObject, onObjectReady, onObjectDispose, handleObjectClick, }) => {
+const CustomPrimitive = memo(({ createdObject, slot = 0, onObjectReady, onObjectDispose, handleObjectClick, }) => {
     const meshRef = useRef(null);
     // CustomPrimitive accepted onObjectReady but never fired it; this is the fix.
     useObjectReady(meshRef, createdObject, onObjectReady, onObjectDispose);
@@ -74,7 +74,7 @@ const CustomPrimitive = memo(({ createdObject, onObjectReady, onObjectDispose, h
     // ModelPrimitive owns its own ref and reports readiness: the meshRef above stays null
     // for a model, so the useObjectReady call at the top of this component is a no-op here
     // and cannot double-report alongside it.
-    return _jsx(ModelBoundary, { label: `${createdObject.name} (${createdObject.id})`, children: _jsx(ModelPrimitive, { createdObject: createdObject, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose, children: useDreiMaterials && createdObject.meshSettings.visible && (_jsx(MaterialLibrary, { materialSettings: createdObject.materialSettings })) }) });
+    return _jsx(ModelBoundary, { label: `${createdObject.name} (${createdObject.id})${slot ? ` slot ${slot}` : ''}`, children: _jsx(ModelPrimitive, { createdObject: createdObject, slot: slot, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose, children: useDreiMaterials && createdObject.meshSettings.visible && (_jsx(MaterialLibrary, { materialSettings: createdObject.materialSettings })) }) });
 });
 CustomPrimitive.displayName = 'CustomPrimitive';
 export default CustomPrimitive;

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

@@ -1 +1 @@
-{"version":3,"file":"EffectsGenerator.d.ts","sourceRoot":"","sources":["../../src/components/EffectsGenerator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAyBtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC3D,QAAQ,EAAE,wBAAwB,CAAC;IACnC,MAAM,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B;AAGD,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0CrD,CAAC;AACF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"EffectsGenerator.d.ts","sourceRoot":"","sources":["../../src/components/EffectsGenerator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAqCtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC3D,QAAQ,EAAE,wBAAwB,CAAC;IACnC,MAAM,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B;AAGD,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsDrD,CAAC;AACF,eAAe,gBAAgB,CAAC"}

package/dist/components/EffectsGenerator.js

@@ -25,6 +25,18 @@ import Bubbles from './Bubbles.js';
 import Glyphs from './Glyphs.js';
 import Fire from './effects/Fire.js';
 import SmokeRibbon from './effects/SmokeRibbon.js';
+import FieldLinesEffect from './effects/FieldLinesEffect.js';
+import StrangeAttractorEffect from './effects/StrangeAttractorEffect.js';
+import HarmonicShellEffect from './effects/HarmonicShellEffect.js';
+import GalaxyEffect from './effects/GalaxyEffect.js';
+import FireflySwarmEffect from './effects/FireflySwarmEffect.js';
+import MurmurationEffect from './effects/MurmurationEffect.js';
+import PlanetaryRingsEffect from './effects/PlanetaryRingsEffect.js';
+import WaterCausticsEffect from './effects/WaterCausticsEffect.js';
+import IceHaloEffect from './effects/IceHaloEffect.js';
+import FallingLeavesEffect from './effects/FallingLeavesEffect.js';
+import LichtenbergEffect from './effects/LichtenbergEffect.js';
+import DandelionSeedsEffect from './effects/DandelionSeedsEffect.js';
 const EffectsGenerator = ({ settings, object, onObjectReady, onObjectDispose }) => {
     const { config } = settings;
     const boundingRadius = useMemo(() => {
@@ -41,7 +53,7 @@ const EffectsGenerator = ({ settings, object, onObjectReady, onObjectDispose })
     const ready = { onObjectReady, onObjectDispose };
     switch (config.type) {
         case 'molecules': return _jsx(MoleculesEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
-        case 'shockwave': return _jsx(ShockwaveEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
+        case 'shockwave': return _jsx(ShockwaveEffect, { boundingRadius: boundingRadius, config: config, animations: animations, hasHost: !!object, ...ready });
         case 'aura': return _jsx(AuraEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
         case 'dataStream': return _jsx(DataStreamEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
         case 'constellation': return _jsx(ConstellationEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
@@ -56,7 +68,7 @@ const EffectsGenerator = ({ settings, object, onObjectReady, onObjectDispose })
         case 'blackHole': return _jsx(BlackHoleEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
         case 'iceCrystals': return _jsx(IceCrystalsEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
         case 'smokePlume': return _jsx(SmokePlumeEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
-        case 'volumetricFog': return _jsx(VolumetricFogEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
+        case 'volumetricFog': return _jsx(VolumetricFogEffect, { boundingRadius: boundingRadius, config: config, animations: animations, hasHost: !!object, ...ready });
         case 'smokeRing': return _jsx(SmokeRingEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
         case 'fire': return _jsx(Fire, { hostRef: object, config: config, animations: animations, ...ready });
         case 'flares': return _jsx(Flares, { hostRef: object, config: config, animations: animations, ...ready });
@@ -64,6 +76,18 @@ const EffectsGenerator = ({ settings, object, onObjectReady, onObjectDispose })
         case 'bubbles': return _jsx(Bubbles, { boundingRadius: boundingRadius, config: config });
         case 'glyphs': return _jsx(Glyphs, { boundingRadius: boundingRadius, config: config });
         case 'smokeRibbon': return _jsx(SmokeRibbon, { config: config, boundingRadius: boundingRadius, ...ready });
+        case 'fieldLines': return _jsx(FieldLinesEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
+        case 'strangeAttractor': return _jsx(StrangeAttractorEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
+        case 'harmonicShell': return _jsx(HarmonicShellEffect, { boundingRadius: boundingRadius, config: config, animations: animations, ...ready });
+        case 'galaxy': return _jsx(GalaxyEffect, { boundingRadius: boundingRadius, config: config, animations: animations, hasHost: !!object, ...ready });
+        case 'fireflySwarm': return _jsx(FireflySwarmEffect, { boundingRadius: boundingRadius, config: config, animations: animations, hasHost: !!object, ...ready });
+        case 'murmuration': return _jsx(MurmurationEffect, { boundingRadius: boundingRadius, config: config, animations: animations, hasHost: !!object, ...ready });
+        case 'planetaryRings': return _jsx(PlanetaryRingsEffect, { boundingRadius: boundingRadius, config: config, animations: animations, hasHost: !!object, ...ready });
+        case 'waterCaustics': return _jsx(WaterCausticsEffect, { boundingRadius: boundingRadius, config: config, animations: animations, hasHost: !!object, ...ready });
+        case 'iceHalo': return _jsx(IceHaloEffect, { boundingRadius: boundingRadius, config: config, animations: animations, hasHost: !!object, ...ready });
+        case 'fallingLeaves': return _jsx(FallingLeavesEffect, { boundingRadius: boundingRadius, config: config, animations: animations, hasHost: !!object, ...ready });
+        case 'lichtenberg': return _jsx(LichtenbergEffect, { boundingRadius: boundingRadius, config: config, animations: animations, hasHost: !!object, ...ready });
+        case 'dandelionSeeds': return _jsx(DandelionSeedsEffect, { boundingRadius: boundingRadius, config: config, animations: animations, hasHost: !!object, ...ready });
         default: return null;
     }
 };

package/dist/components/FlowNetGrid.d.ts

@@ -0,0 +1,15 @@
+import type { ThreeElements } from '@react-three/fiber';
+import type { ObjectReadyProps } from '../types/objectReady';
+import type { FlowNetGridConfig } from '../types/gridConfigs';
+export interface FlowNetGridProps extends ObjectReadyProps {
+    config?: FlowNetGridConfig;
+    groupProps?: ThreeElements['group'];
+}
+/** FlowNetGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export declare const defaultFlowNetGridConfig: FlowNetGridConfig;
+/**
+ * Potential flow past a cylinder with circulation, drawn as a flow net: streamlines and equipotentials that cross at right angles everywhere and bend around the obstacle.
+ */
+export declare function FlowNetGrid({ config, groupProps, onObjectReady, onObjectDispose }: FlowNetGridProps): import("react").JSX.Element;
+export default FlowNetGrid;
+//# sourceMappingURL=FlowNetGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowNetGrid.d.ts","sourceRoot":"","sources":["../../src/components/FlowNetGrid.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,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACtD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,8FAA8F;AAC9F,eAAO,MAAM,wBAAwB,EAAE,iBA4BtC,CAAC;AAEF;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAiC,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,gBAAgB,+BAgE9H;AAED,eAAe,WAAW,CAAC"}

package/dist/components/FlowNetGrid.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { useObjectReady } from '../hooks/useObjectReady.js';
+import { useGridSurface } from '../hooks/useGridSurface.js';
+import { FlowNetGridMaterial } from '@3driseai/3drise-core';
+// Side-effect import registers <flowNetGridMaterial> via extend().
+void FlowNetGridMaterial;
+/** FlowNetGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export const defaultFlowNetGridConfig = {
+    cellSize: 1.5,
+    size: 50,
+    flat: true,
+    segments: undefined,
+    lineMode: 2,
+    cellMode: 1,
+    lineWidth: 1,
+    sectionSize: 5,
+    sectionWidth: 1.6,
+    animSpeed: 1,
+    animScale: 0.6,
+    animIntensity: 0.8,
+    fadeDistance: undefined,
+    fadeStrength: 0.7,
+    displace: 0,
+    obstacleRadius: 3,
+    circulation: 2,
+    flowAngle: 0,
+    lineColor: '#3f8fbf',
+    sectionColor: '#9fe3ff',
+    cellColor: '#0c3148',
+    glowColor: '#5fd0ff',
+    bgColor: '#02070b',
+    bgOpacity: 0,
+    followMouse: false,
+    reveal: 1,
+    revealDuration: 0,
+};
+/**
+ * Potential flow past a cylinder with circulation, drawn as a flow net: streamlines and equipotentials that cross at right angles everywhere and bend around the obstacle.
+ */
+export function FlowNetGrid({ config = defaultFlowNetGridConfig, groupProps, 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, obstacleRadius, circulation, flowAngle, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // a gentle wave only needs a moderate mesh
+    const segs = segments ?? (displace > 0 ? Math.min(512, Math.max(96, 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("flowNetGridMaterial", { 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_obstacleRadius: obstacleRadius, u_circulation: Math.round(circulation), u_flowAngle: flowAngle, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, FlowNetGridMaterial.key)] }) }));
+}
+export default FlowNetGrid;

package/dist/components/GirihGrid.d.ts

@@ -0,0 +1,15 @@
+import type { ThreeElements } from '@react-three/fiber';
+import type { ObjectReadyProps } from '../types/objectReady';
+import type { GirihGridConfig } from '../types/gridConfigs';
+export interface GirihGridProps extends ObjectReadyProps {
+    config?: GirihGridConfig;
+    groupProps?: ThreeElements['group'];
+}
+/** GirihGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export declare const defaultGirihGridConfig: GirihGridConfig;
+/**
+ * An Islamic star pattern drawn by Hankin polygons-in-contact. One ray per dihedral sector, from the edge midpoint to the sector bisector, generates the whole interlaced star-and-rosette strapwork over an octagon-square, hexagonal or trihexagonal tiling.
+ */
+export declare function GirihGrid({ config, groupProps, onObjectReady, onObjectDispose }: GirihGridProps): import("react").JSX.Element;
+export default GirihGrid;
+//# sourceMappingURL=GirihGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GirihGrid.d.ts","sourceRoot":"","sources":["../../src/components/GirihGrid.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,4FAA4F;AAC5F,eAAO,MAAM,sBAAsB,EAAE,eA6BpC,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAA+B,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,cAAc,+BAiExH;AAED,eAAe,SAAS,CAAC"}

package/dist/components/GirihGrid.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { useObjectReady } from '../hooks/useObjectReady.js';
+import { useGridSurface } from '../hooks/useGridSurface.js';
+import { GirihGridMaterial } from '@3driseai/3drise-core';
+// Side-effect import registers <girihGridMaterial> via extend().
+void GirihGridMaterial;
+/** GirihGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export const defaultGirihGridConfig = {
+    cellSize: 4,
+    size: 50,
+    flat: true,
+    segments: undefined,
+    lineMode: 2,
+    cellMode: 2,
+    lineWidth: 1.2,
+    sectionSize: 3,
+    sectionWidth: 0.8,
+    animSpeed: 1,
+    animScale: 0.5,
+    animIntensity: 0.25,
+    fadeDistance: undefined,
+    fadeStrength: 0.65,
+    displace: 0,
+    tiling: 0,
+    contactAngle: 67.5,
+    strapWidth: 0.07,
+    angleDrift: 5,
+    lineColor: '#f2c469',
+    sectionColor: '#3f6fc4',
+    cellColor: '#12616f',
+    glowColor: '#38c4c8',
+    bgColor: '#05070a',
+    bgOpacity: 0,
+    followMouse: false,
+    reveal: 1,
+    revealDuration: 0,
+};
+/**
+ * An Islamic star pattern drawn by Hankin polygons-in-contact. One ray per dihedral sector, from the edge midpoint to the sector bisector, generates the whole interlaced star-and-rosette strapwork over an octagon-square, hexagonal or trihexagonal tiling.
+ */
+export function GirihGrid({ config = defaultGirihGridConfig, groupProps, 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, tiling, contactAngle, strapWidth, angleDrift, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // the relief follows the star outlines, which are a fraction of a cell wide
+    const segs = segments ?? (displace > 0 ? Math.min(512, Math.max(128, Math.ceil(size / Math.max(cellSize, 1e-4)) * 24)) : 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("girihGridMaterial", { 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_tiling: Math.round(tiling), u_contactAngle: contactAngle, u_strapWidth: strapWidth, u_angleDrift: angleDrift, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, GirihGridMaterial.key)] }) }));
+}
+export default GirihGrid;

package/dist/components/GravWaveGrid.d.ts

@@ -0,0 +1,15 @@
+import type { ThreeElements } from '@react-three/fiber';
+import type { ObjectReadyProps } from '../types/objectReady';
+import type { GravWaveGridConfig } from '../types/gridConfigs';
+export interface GravWaveGridProps extends ObjectReadyProps {
+    config?: GravWaveGridConfig;
+    groupProps?: ThreeElements['group'];
+}
+/** GravWaveGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export declare const defaultGravWaveGridConfig: GravWaveGridConfig;
+/**
+ * A spacetime lattice around a binary black-hole inspiral. The Newtonian wells pinch the lines, and quadrupole waves, evaluated at the retarded time, spiral outward and chirp toward the merger before the remnant rings down.
+ */
+export declare function GravWaveGrid({ config, groupProps, onObjectReady, onObjectDispose }: GravWaveGridProps): import("react").JSX.Element;
+export default GravWaveGrid;
+//# sourceMappingURL=GravWaveGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GravWaveGrid.d.ts","sourceRoot":"","sources":["../../src/components/GravWaveGrid.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,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG/D,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACvD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,+FAA+F;AAC/F,eAAO,MAAM,yBAAyB,EAAE,kBA6BvC,CAAC;AAEF;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAkC,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,iBAAiB,+BAiEjI;AAED,eAAe,YAAY,CAAC"}

package/dist/components/GravWaveGrid.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { useObjectReady } from '../hooks/useObjectReady.js';
+import { useGridSurface } from '../hooks/useGridSurface.js';
+import { GravWaveGridMaterial } from '@3driseai/3drise-core';
+// Side-effect import registers <gravWaveGridMaterial> via extend().
+void GravWaveGridMaterial;
+/** GravWaveGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export const defaultGravWaveGridConfig = {
+    cellSize: 1,
+    size: 50,
+    flat: true,
+    segments: undefined,
+    lineMode: 0,
+    cellMode: 0,
+    lineWidth: 1,
+    sectionSize: 5,
+    sectionWidth: 1.4,
+    animSpeed: 1,
+    animScale: 0.5,
+    animIntensity: 0.7,
+    fadeDistance: undefined,
+    fadeStrength: 0.7,
+    displace: 0,
+    strain: 1,
+    chirpTime: 14,
+    waveSpeed: 6.5,
+    massRatio: 0.6,
+    lineColor: '#3d6fc9',
+    sectionColor: '#9cc2ff',
+    cellColor: '#1b3a7a',
+    glowColor: '#8fd8ff',
+    bgColor: '#03050b',
+    bgOpacity: 0,
+    followMouse: false,
+    reveal: 1,
+    revealDuration: 0,
+};
+/**
+ * A spacetime lattice around a binary black-hole inspiral. The Newtonian wells pinch the lines, and quadrupole waves, evaluated at the retarded time, spiral outward and chirp toward the merger before the remnant rings down.
+ */
+export function GravWaveGrid({ config = defaultGravWaveGridConfig, groupProps, 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, strain, chirpTime, waveSpeed, massRatio, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // the wells are about a cell wide and the waves reach two-cell wavelengths near merger
+    const segs = segments ?? (displace > 0 ? Math.min(512, Math.max(128, Math.ceil(size / Math.max(cellSize, 1e-4)) * 8)) : 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("gravWaveGridMaterial", { 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_strain: strain, u_chirpTime: chirpTime, u_waveSpeed: waveSpeed, u_massRatio: massRatio, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, GravWaveGridMaterial.key)] }) }));
+}
+export default GravWaveGrid;

package/dist/components/GridsGenerator.d.ts

@@ -1,9 +1,9 @@
 import type { ObjectReadyProps } from '../types/objectReady';
-import type { CircuitGridConfig, ContourGridConfig, FractalGridConfig, HexGridConfig, MoireGridConfig, QuasiGridConfig, RadarGridConfig, VoronoiGridConfig } from '../types/gridConfigs';
+import type { ChladniGridConfig, CircuitGridConfig, ContourGridConfig, FlowNetGridConfig, FractalGridConfig, HexGridConfig, HyperbolicGridConfig, MoireGridConfig, QuasiGridConfig, RadarGridConfig, VoronoiGridConfig, GravWaveGridConfig, GirihGridConfig, WallpaperGridConfig, ReactionDiffusionGridConfig } from '../types/gridConfigs';
 import React from "react";
 import type { GridConfig, MyGridConfig } from "@3driseai/3drise-core";
 /** Every grid config this generator knows how to render. */
-export type GridGeneratorConfig = GridConfig | MyGridConfig | HexGridConfig | CircuitGridConfig | VoronoiGridConfig | RadarGridConfig | MoireGridConfig | FractalGridConfig | ContourGridConfig | QuasiGridConfig;
+export type GridGeneratorConfig = GridConfig | MyGridConfig | HexGridConfig | CircuitGridConfig | VoronoiGridConfig | RadarGridConfig | MoireGridConfig | FractalGridConfig | ContourGridConfig | QuasiGridConfig | FlowNetGridConfig | ChladniGridConfig | HyperbolicGridConfig | GravWaveGridConfig | GirihGridConfig | WallpaperGridConfig | ReactionDiffusionGridConfig;
 type GridGeneratorProps = ObjectReadyProps & {
     config: GridGeneratorConfig & {
         type: string;

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

@@ -1 +1 @@
-{"version":3,"file":"GridsGenerator.d.ts","sourceRoot":"","sources":["../../src/components/GridsGenerator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EACR,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACpB,MAAM,sBAAsB,CAAC;AAW9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEtE,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GACzB,UAAU,GACV,YAAY,GACZ,aAAa,GACb,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,CAAC;AAEtB,KAAK,kBAAkB,GAAG,gBAAgB,GAAG;IACzC,MAAM,EAAE,mBAAmB,GAAG;QAC1B,IAAI,EAAE,MAAM,CAAC;KAChB,CAAC;CACL,CAAC;AAGF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+B/C,CAAC;AACF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"GridsGenerator.d.ts","sourceRoot":"","sources":["../../src/components/GridsGenerator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EACR,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,2BAA2B,EAC9B,MAAM,sBAAsB,CAAC;AAkB9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEtE,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GACzB,UAAU,GACV,YAAY,GACZ,aAAa,GACb,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,oBAAoB,GACpB,kBAAkB,GAClB,eAAe,GACf,mBAAmB,GACnB,2BAA2B,CAAC;AAElC,KAAK,kBAAkB,GAAG,gBAAgB,GAAG;IACzC,MAAM,EAAE,mBAAmB,GAAG;QAC1B,IAAI,EAAE,MAAM,CAAC;KAChB,CAAC;CACL,CAAC;AAGF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6C/C,CAAC;AACF,eAAe,aAAa,CAAC"}

package/dist/components/GridsGenerator.js

@@ -9,8 +9,15 @@ import FractalGrid from "./FractalGrid.js";
 import HexGrid from "./HexGrid.js";
 import MoireGrid from "./MoireGrid.js";
 import QuasiGrid from "./QuasiGrid.js";
+import FlowNetGrid from "./FlowNetGrid.js";
+import ChladniGrid from "./ChladniGrid.js";
+import HyperbolicGrid from "./HyperbolicGrid.js";
 import RadarGrid from "./RadarGrid.js";
 import VoronoiGrid from "./VoronoiGrid.js";
+import GravWaveGrid from "./GravWaveGrid.js";
+import GirihGrid from "./GirihGrid.js";
+import WallpaperGrid from "./WallpaperGrid.js";
+import ReactionDiffusionGrid from "./ReactionDiffusionGrid.js";
 const GridGenerator = ({ config, onObjectReady, onObjectDispose }) => {
     // The other branches render components that report themselves; the
     // native <gridHelper> is a plain three object, so this component holds its
@@ -39,6 +46,20 @@ const GridGenerator = ({ config, onObjectReady, onObjectDispose }) => {
             return _jsx(ContourGrid, { config: config, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose });
         case "quasiGrid":
             return _jsx(QuasiGrid, { config: config, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose });
+        case "flowNetGrid":
+            return _jsx(FlowNetGrid, { config: config, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose });
+        case "chladniGrid":
+            return _jsx(ChladniGrid, { config: config, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose });
+        case "hyperbolicGrid":
+            return _jsx(HyperbolicGrid, { config: config, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose });
+        case "gravWaveGrid":
+            return _jsx(GravWaveGrid, { config: config, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose });
+        case "girihGrid":
+            return _jsx(GirihGrid, { config: config, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose });
+        case "wallpaperGrid":
+            return _jsx(WallpaperGrid, { config: config, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose });
+        case "reactionDiffusionGrid":
+            return _jsx(ReactionDiffusionGrid, { config: config, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose });
         default:
             return _jsx("gridHelper", { ...config, ref: nativeGridRef });
     }

package/dist/components/HyperbolicGrid.d.ts

@@ -0,0 +1,15 @@
+import type { ThreeElements } from '@react-three/fiber';
+import type { ObjectReadyProps } from '../types/objectReady';
+import type { HyperbolicGridConfig } from '../types/gridConfigs';
+export interface HyperbolicGridProps extends ObjectReadyProps {
+    config?: HyperbolicGridConfig;
+    groupProps?: ThreeElements['group'];
+}
+/** HyperbolicGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export declare const defaultHyperbolicGridConfig: HyperbolicGridConfig;
+/**
+ * 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 declare function HyperbolicGrid({ config, groupProps, onObjectReady, onObjectDispose }: HyperbolicGridProps): import("react").JSX.Element;
+export default HyperbolicGrid;
+//# sourceMappingURL=HyperbolicGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HyperbolicGrid.d.ts","sourceRoot":"","sources":["../../src/components/HyperbolicGrid.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,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGjE,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IACzD,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,iGAAiG;AACjG,eAAO,MAAM,2BAA2B,EAAE,oBA4BzC,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAoC,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,mBAAmB,+BAgEvI;AAED,eAAe,cAAc,CAAC"}

package/dist/components/HyperbolicGrid.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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';
+// Side-effect import registers <hyperbolicGridMaterial> via extend().
+void HyperbolicGridMaterial;
+/** HyperbolicGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export const defaultHyperbolicGridConfig = {
+    cellSize: 22,
+    size: 50,
+    flat: true,
+    segments: undefined,
+    lineMode: 1,
+    cellMode: 2,
+    lineWidth: 1.4,
+    sectionSize: 3,
+    sectionWidth: 1,
+    animSpeed: 1,
+    animScale: 1.2,
+    animIntensity: 0.7,
+    fadeDistance: undefined,
+    fadeStrength: 0.2,
+    displace: 0,
+    sides: 7,
+    valence: 3,
+    drift: 0.5,
+    lineColor: '#c9a4ff',
+    sectionColor: '#ffd9f2',
+    cellColor: '#2a1446',
+    glowColor: '#b07cff',
+    bgColor: '#07030c',
+    bgOpacity: 0,
+    followMouse: false,
+    reveal: 1,
+    revealDuration: 0,
+};
+/**
+ * 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 }) {
+    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 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)] }) }));
+}
+export default HyperbolicGrid;