@3driseai/3drise-viewer 0.1.16 → 0.1.17

package/dist/components/LayoutInstances.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { Object3D } from 'three';
+import type { ThreeEvent } from '@react-three/fiber';
+import type { CreatedObjectSettings, ObjectLayoutSettings } from '@3driseai/3drise-core';
+export interface LayoutInstancesProps {
+    createdObject: CreatedObjectSettings;
+    layout: ObjectLayoutSettings;
+    render: (slot: number) => ReactNode;
+    handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
+}
+declare const LayoutInstances: import("react").MemoExoticComponent<({ createdObject, layout, render, handleObjectClick }: LayoutInstancesProps) => import("react").JSX.Element>;
+export default LayoutInstances;
+//# sourceMappingURL=LayoutInstances.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutInstances.d.ts","sourceRoot":"","sources":["../../src/components/LayoutInstances.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,OAAO,KAAK,EAAE,qBAAqB,EAAc,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAErG,MAAM,WAAW,oBAAoB;IACjC,aAAa,EAAE,qBAAqB,CAAC;IACrC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACpH;AAmCD,QAAA,MAAM,eAAe,6FAA+D,oBAAoB,iCAmBtG,CAAC;AAGH,eAAe,eAAe,CAAC"}

package/dist/components/LayoutInstances.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// =============================================================================
+// LayoutInstances — repeat one scene object across a gallery layout
+// =============================================================================
+//
+// ObjectNode hands this the object's own renderer; each slot is a plain group at the
+// transform LayoutCreator computed for it, and the renderer output goes inside.
+//
+// Rules (see the project doc claude/object-layout-plan.md):
+// - Only slot 0 reports readiness. The render callback receives the slot index and
+//   ObjectNode passes no ready callbacks for the others, so one object still reports
+//   once and ObjectsRenderer's aggregate count stays right.
+// - Slot groups never set userData.id, so findById(id) keeps returning the
+//   CreatedObject group that owns the transform.
+// - Clicks are per slot: zoom / glow / vanish target the copy that was clicked, the
+//   same way gallery frames behave.
+// - Motion stays on the CreatedObject group, so the whole layout animates as one.
+import { memo, useMemo, useRef } from 'react';
+import { generateLayoutSlots } from '@3driseai/3drise-core';
+const LayoutSlotGroup = ({ slot, index, createdObject, handleObjectClick, children }) => {
+    const ref = useRef(null);
+    const onClick = handleObjectClick
+        ? (e) => {
+            if (!ref.current)
+                return;
+            e.stopPropagation();
+            handleObjectClick(createdObject, ref.current, e);
+        }
+        : undefined;
+    return (_jsx("group", { ref: ref, name: `layout-slot-${index}`, position: slot.position, rotation: slot.rotation ?? [0, 0, 0], scale: slot.scale ?? [1, 1, 1], userData: { layoutSlot: index }, onClick: onClick, children: children }));
+};
+const LayoutInstances = memo(({ createdObject, layout, render, handleObjectClick }) => {
+    // ObjectNode normalises the block on every render, so key on its contents.
+    const layoutKey = JSON.stringify(layout);
+    const slots = useMemo(() => generateLayoutSlots(layout.count, layout), [layoutKey]);
+    return (_jsx(_Fragment, { children: slots.map((slot, index) => (_jsx(LayoutSlotGroup, { slot: slot, index: index, createdObject: createdObject, handleObjectClick: handleObjectClick, children: render(index) }, index))) }));
+});
+LayoutInstances.displayName = 'LayoutInstances';
+export default LayoutInstances;

package/dist/components/ModelPrimitive.d.ts

@@ -4,6 +4,8 @@ import type { CreatedObjectSettings } from '@3driseai/3drise-core';
 import type { ObjectReadyProps } from '../types/objectReady';
 interface ModelPrimitiveProps extends ObjectReadyProps {
     createdObject: CreatedObjectSettings;
+    /** Layout slot. Slot 0 is the object itself; the rest are unregistered clones. */
+    slot?: number;
     children?: ReactNode;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ModelPrimitive.d.ts","sourceRoot":"","sources":["../../src/components/ModelPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAGnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,UAAU,mBAAoB,SAAQ,gBAAgB;IAClD,aAAa,EAAE,qBAAqB,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8BhD,CAAC;AAIH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ModelPrimitive.d.ts","sourceRoot":"","sources":["../../src/components/ModelPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAGnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,UAAU,mBAAoB,SAAQ,gBAAgB;IAClD,aAAa,EAAE,qBAAqB,CAAC;IACrC,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8BhD,CAAC;AAIH,eAAe,cAAc,CAAC"}

package/dist/components/ModelPrimitive.js

@@ -29,9 +29,9 @@ import { useObjectReadyReporter } from '../hooks/useObjectReady.js';
  * master and every other instance of the same URL; letting R3F free them on unmount breaks
  * all of them.
  */
-const ModelPrimitive = memo(({ createdObject, onObjectReady, onObjectDispose, children }) => {
+const ModelPrimitive = memo(({ createdObject, slot = 0, onObjectReady, onObjectDispose, children }) => {
     const attachedRef = useRef(null);
-    const object = useModelObject(createdObject);
+    const object = useModelObject(createdObject, slot);
     const { report, reportDisposed } = useObjectReadyReporter(createdObject, onObjectReady, onObjectDispose);
     const setObjectRef = useCallback((instance) => {
         if (instance) {
@@ -46,7 +46,7 @@ const ModelPrimitive = memo(({ createdObject, onObjectReady, onObjectDispose, ch
     }, [report, reportDisposed]);
     if (!object)
         return null;
-    return (_jsx("primitive", { ref: setObjectRef, name: createdObject.name, object: object, dispose: null, children: children }, createdObject.id));
+    return (_jsx("primitive", { ref: setObjectRef, name: createdObject.name, object: object, dispose: null, children: children }, `${createdObject.id}:${slot}`));
 });
 ModelPrimitive.displayName = 'ModelPrimitive';
 export default ModelPrimitive;

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

@@ -1 +1 @@
-{"version":3,"file":"ObjectNode.d.ts","sourceRoot":"","sources":["../../src/components/ObjectNode.tsx"],"names":[],"mappings":"AAgBA,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;AAErD,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;AAgBF,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqHzC,CAAC;AACF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ObjectNode.d.ts","sourceRoot":"","sources":["../../src/components/ObjectNode.tsx"],"names":[],"mappings":"AAiBA,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;AAgBF,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiIzC,CAAC;AACF,eAAe,UAAU,CAAC"}

package/dist/components/ObjectNode.js

@@ -15,7 +15,23 @@ import Galaxy from "./Galaxy.js";
 import GridGenerator from "./GridsGenerator.js";
 import OceanBuilder from "./OceanBuilder.js";
 import LandscapeObject from "./LandscapeObject.js";
+import LayoutInstances from "./LayoutInstances.js";
 import { SELF_MANAGED_MATERIAL } from "../constants.js";
+import { LAYOUT_CAPABLE_TYPES, getObjectLayoutSupport, normalizeObjectLayout } from "@3driseai/3drise-core";
+// Slots after the first render with no ready callbacks: one object reports once.
+const NO_READY = {};
+// A point light's shadow is six extra renders; only slot 0 keeps it. Cached per settings
+// object so the copies do not re-run their shadow effect on every render.
+const noShadowCache = new WeakMap();
+const withoutShadow = (obj) => {
+    let copy = noShadowCache.get(obj);
+    if (!copy) {
+        const config = (obj.config ?? {});
+        copy = { ...obj, config: { ...config, shadow: { ...config.shadow, enabled: false } } };
+        noShadowCache.set(obj, copy);
+    }
+    return copy;
+};
 // const EffectsLayer: React.FC<{ effects: CreatedObjectSettings['effects'] }> = ({ effects }) =>
 //     effects?.length ? (
 //         <>
@@ -40,7 +56,9 @@ const ObjectNode = ({ node, onObjectReady, onObjectDispose, handleObjectClick })
     // Specialized renderers for each object type
     const renderers = useMemo(() => ({
         group: () => null,
-        mesh: (obj, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose, handleObjectClick: handleObjectClick }, obj.id)),
+        // mesh / model / effect / light take a layout slot as the third argument
+        // (see LayoutInstances); slot 0 is also the no-layout case.
+        mesh: (obj, _onObjectReady, slot = 0) => (_jsx(CustomPrimitive, { createdObject: obj, ...(slot === 0 ? { onObjectReady, onObjectDispose } : NO_READY), handleObjectClick: handleObjectClick }, obj.id)),
         // water: (obj: CreatedObjectSettings, cameraSettings: CameraState, onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void) => (
         //     <Ocean
         //         settings={obj}
@@ -56,7 +74,7 @@ const ObjectNode = ({ node, onObjectReady, onObjectDispose, handleObjectClick })
         //         settings={obj}
         //     />
         // ),
-        model: (obj, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose, handleObjectClick: handleObjectClick }, obj.id)),
+        model: (obj, _onObjectReady, slot = 0) => (_jsx(CustomPrimitive, { createdObject: obj, slot: slot, ...(slot === 0 ? { onObjectReady, onObjectDispose } : NO_READY), handleObjectClick: handleObjectClick }, obj.id)),
         // custom_primitive: (obj: CreatedObjectSettings, cameraSettings: CameraState, onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void) => (
         //     <CustomPrimitive
         //         key={obj.id}
@@ -87,11 +105,11 @@ const ObjectNode = ({ node, onObjectReady, onObjectDispose, handleObjectClick })
         // LandscapeConnector instead; this one is a diorama, a floating island or
         // a game tile, and gets its transform from the CreatedObject wrapper.
         landscape: (obj, onObjectReady) => (_jsx(LandscapeObject, { settings: obj, ...relabel(obj) }, obj.id)),
-        effect: (obj) => (_jsx(EffectsGenerator, { settings: {
+        effect: (obj, _onObjectReady, slot = 0) => (_jsx(EffectsGenerator, { settings: {
                 config: obj.config,
-            }, ...relabel(obj) }, obj.id)),
+            }, ...(slot === 0 ? relabel(obj) : NO_READY) }, obj.id)),
         gallery: (obj, onObjectReady) => (_jsx(GalleryLayout, { createdObject: obj, handleObjectClick: handleObjectClick, ...relabel(obj) })),
-        light: (obj, onObjectReady) => (_jsx(LightObject, { createdObject: obj, ...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 })),
         space: (obj, onObjectReady) => (_jsx(Galaxy, { createdObject: obj, onObjectReady: onObjectReady, onObjectDispose: onObjectDispose })),
         // rain: (obj: CreatedObjectSettings, cameraSettings: CameraState, onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void) => (
@@ -115,10 +133,20 @@ const ObjectNode = ({ node, onObjectReady, onObjectDispose, handleObjectClick })
         //     />
         // ),
     }), [handleObjectClick, onObjectReady, onObjectDispose, relabel]);
-    const renderObject = useCallback((obj, handleObjectClick) => {
+    const renderObject = useCallback((obj, _handleObjectClick) => {
         const renderer = renderers[obj.type];
-        return renderer?.(obj, onObjectReady) ?? null;
-    }, [onObjectReady, renderers]);
+        if (!renderer)
+            return null;
+        // meshSettings.layout: repeat the renderer output across a gallery layout.
+        // Absent on every object saved before layouts existed, which renders as before.
+        const layout = LAYOUT_CAPABLE_TYPES.has(obj.type) ? normalizeObjectLayout(obj.meshSettings?.layout) : null;
+        const support = layout?.enabled ? getObjectLayoutSupport(obj) : null;
+        if (layout && support?.allowed) {
+            const capped = layout.count > support.maxCount ? { ...layout, count: support.maxCount } : layout;
+            return (_jsx(LayoutInstances, { createdObject: obj, layout: capped, handleObjectClick: handleObjectClick, render: (slot) => renderer(obj, onObjectReady, slot) }));
+        }
+        return renderer(obj, onObjectReady) ?? null;
+    }, [onObjectReady, renderers, handleObjectClick]);
     if (!createdObject) {
         return null;
     }

package/dist/components/ReactionDiffusionGrid.d.ts

@@ -0,0 +1,15 @@
+import type { ThreeElements } from '@react-three/fiber';
+import type { ObjectReadyProps } from '../types/objectReady';
+import type { ReactionDiffusionGridConfig } from '../types/gridConfigs';
+export interface ReactionDiffusionGridProps extends ObjectReadyProps {
+    config?: ReactionDiffusionGridConfig;
+    groupProps?: ThreeElements['group'];
+}
+/** ReactionDiffusionGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export declare const defaultReactionDiffusionGridConfig: ReactionDiffusionGridConfig;
+/**
+ * A Gray-Scott reaction-diffusion field simulated on the GPU and sampled by the plane: coral, labyrinths and dividing spots grow, merge and keep evolving, wrapped seamlessly as a torus.
+ */
+export declare function ReactionDiffusionGrid({ config, groupProps, onObjectReady, onObjectDispose }: ReactionDiffusionGridProps): import("react").JSX.Element;
+export default ReactionDiffusionGrid;
+//# sourceMappingURL=ReactionDiffusionGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionDiffusionGrid.d.ts","sourceRoot":"","sources":["../../src/components/ReactionDiffusionGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AAGxE,MAAM,WAAW,0BAA2B,SAAQ,gBAAgB;IAChE,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,wGAAwG;AACxG,eAAO,MAAM,kCAAkC,EAAE,2BA6BhD,CAAC;AAuTF;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,MAA2C,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,0BAA0B,+BAgF5J;AAED,eAAe,qBAAqB,CAAC"}

package/dist/components/ReactionDiffusionGrid.js

@@ -0,0 +1,376 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, 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 { ReactionDiffusionGridMaterial } from '@3driseai/3drise-core';
+// Side-effect import registers <reactionDiffusionGridMaterial> via extend().
+void ReactionDiffusionGridMaterial;
+/** ReactionDiffusionGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export const defaultReactionDiffusionGridConfig = {
+    cellSize: 3,
+    size: 50,
+    flat: true,
+    segments: undefined,
+    lineMode: 0,
+    cellMode: 0,
+    lineWidth: 1.1,
+    sectionSize: 5,
+    sectionWidth: 1.2,
+    animSpeed: 1,
+    animScale: 0.5,
+    animIntensity: 0.6,
+    fadeDistance: undefined,
+    fadeStrength: 0.7,
+    displace: 0,
+    feed: 0.037,
+    kill: 0.06,
+    variation: 0.55,
+    tileCells: 7,
+    lineColor: '#7ff0d4',
+    sectionColor: '#f0a26a',
+    cellColor: '#0d4b52',
+    glowColor: '#2fd9c8',
+    bgColor: '#03080a',
+    bgOpacity: 0,
+    followMouse: false,
+    reveal: 1,
+    revealDuration: 0,
+};
+const gridFragHeader = /* glsl */ `
+  precision highp float;
+
+  uniform float u_time;
+  uniform float u_cellSize;
+  uniform float u_lineWidth;
+  uniform float u_sectionSize;
+  uniform float u_sectionWidth;
+  uniform vec3  u_lineColor;
+  uniform vec3  u_sectionColor;
+  uniform vec3  u_cellColor;
+  uniform vec3  u_glowColor;
+  uniform vec3  u_bgColor;
+  uniform float u_bgOpacity;
+  uniform float u_lineMode;
+  uniform float u_cellMode;
+  uniform float u_animSpeed;
+  uniform float u_animScale;
+  uniform float u_animIntensity;
+  uniform float u_fadeDistance;
+  uniform float u_fadeStrength;
+  uniform vec2  u_focus;
+  uniform float u_reveal;
+
+  varying vec2 vGridPos;
+
+  float lineAt(float c, float width, float fp){
+    float d = abs(fract(c - 0.5) - 0.5);
+    return 1.0 - clamp(d / max(fp * max(width, 0.05), 1e-6), 0.0, 1.0);
+  }
+`;
+const gridCommon = /* glsl */ `
+  const float PI  = 3.14159265359;
+  const float TAU = 6.28318530718;
+
+  float hash21(vec2 p){
+    p = fract(p * vec2(123.34, 456.21));
+    p += dot(p, p + 45.32);
+    return fract(p.x * p.y);
+  }
+`;
+const gridTail = /* glsl */ `
+    // ---- line animation --------------------------------------------------
+    float lineAnim = 1.0;
+    if (u_lineMode > 0.5){
+      if (u_lineMode < 1.5){
+        lineAnim = 0.5 + 0.5 * sin(cellDist * u_animScale - t);
+      } else if (u_lineMode < 2.5){
+        lineAnim = 0.5 + 0.5 * sin(flowCoord * u_animScale - t);
+      } else if (u_lineMode < 3.5){
+        float s = fract(scanCoord * 0.05 * u_animScale - t * 0.15);
+        lineAnim = 0.25 + smoothstep(0.0, 0.15, s) * (1.0 - smoothstep(0.15, 0.35, s));
+      } else {
+        lineAnim = 0.5 + 0.5 * sin(t);
+      }
+    }
+    lineAnim = mix(1.0, lineAnim, u_animIntensity);
+
+    // ---- cell fill -------------------------------------------------------
+    float cell = 0.0;
+    if (u_cellMode > 0.5){
+      if (u_cellMode < 1.5){
+        cell = 0.5 + 0.5 * sin(flowCoord * 0.5 * u_animScale - t);
+      } else if (u_cellMode < 2.5){
+        cell = 0.5 + 0.5 * sin(t * (0.6 + cellH) + cellH * TAU);
+      } else if (u_cellMode < 3.5){
+        cell = smoothstep(0.6, 1.0, sin(cellDist * u_animScale - t));
+      } else {
+        cell = step(0.5, cellH) * (0.5 + 0.5 * sin(t));
+      }
+    }
+    cell *= u_animIntensity * edgeKeep;
+
+    float tone = step(0.55, cellH);
+
+    vec3 col = u_bgColor * u_bgOpacity;
+    float a  = u_bgOpacity;
+
+    col += mix(u_cellColor, u_cellColor * 2.2, tone) * cell;
+    a = max(a, cell * 0.9);
+    float linesI = lines * lineAnim;
+    col += u_lineColor * linesI;            a = max(a, linesI);
+    float accentI = accent * lineAnim;
+    col += u_sectionColor * accentI;        a = max(a, accentI);
+    col += u_glowColor * (linesI * 0.2 + cell * 0.35) * u_animIntensity;
+
+    col = col * regionMask + extraCol;
+    a   = max(a * regionMask, extraA);
+
+    float fade = 1.0 - smoothstep(1.0 - u_fadeStrength, 1.0, fadeR);
+    col *= fade;
+    a   *= fade;
+
+    // ---- reveal ----------------------------------------------------------
+    // The build boundary sweeps outward from the focus point with a bright
+    // leading edge, so the grid reads as assembling itself.
+    if (u_reveal < 0.999){
+      float rd = length(vGridPos - u_focus) / max(u_fadeDistance, 1e-4);
+      float edge = u_reveal * 1.1;
+      float mask = 1.0 - smoothstep(edge - 0.05, edge, rd);
+      float front = mask * smoothstep(edge - 0.22, edge - 0.05, rd);
+      col = col * mask + u_glowColor * front * (a * 1.8 + 0.08);
+      a   = max(a * mask, front * 0.10);
+    }
+
+    if (a < 0.002) discard;
+    gl_FragColor = vec4(col, a);
+  }
+`;
+const gridVertexHead = /* glsl */ `
+  uniform float u_time;
+  uniform float u_cellSize;
+  uniform float u_displace;
+  uniform float u_animSpeed;
+  uniform float u_animScale;
+
+  varying vec2 vGridPos;
+`;
+// ---------------------------------------------------------------------------
+// Gray-Scott reaction-diffusion. Two chemicals diffuse at different rates and
+// react as u + 2v -> 3v: the autocatalyst v eats u, u is fed in at rate F and
+// v is removed at rate F + k. Because v diffuses at half the rate of u, an even
+// mixture is unstable (Turing instability) and the field breaks into fronts
+// that grow, split and heal. F and k pick the morphology: coral and labyrinths
+// near (0.037, 0.060), dividing spots near (0.030, 0.057), stable dots higher.
+// The simulation runs on a 256^2 float texture with periodic boundaries, so it
+// tiles seamlessly, and the plane just samples it.
+// ---------------------------------------------------------------------------
+const SIM_SIZE = 256;
+const fsVert = /* glsl */ `
+  varying vec2 vUv;
+  void main(){
+    vUv = uv;
+    gl_Position = vec4(position.xy, 0.0, 1.0);
+  }
+`;
+const simFrag = /* glsl */ `
+  precision highp float;
+  uniform sampler2D u_state;
+  uniform vec2  u_texel;
+  uniform float u_feed;
+  uniform float u_kill;
+  uniform float u_variation;
+  uniform float u_age;
+  varying vec2 vUv;
+
+  void main(){
+    vec2 e = u_texel;
+    vec4 c = texture2D(u_state, vUv);
+    // 9-point laplacian (0.2 orthogonal, 0.05 diagonal), wrapped by the texture
+    vec2 lap =
+        (texture2D(u_state, vUv + vec2( e.x, 0.0)).rg
+       +  texture2D(u_state, vUv + vec2(-e.x, 0.0)).rg
+       +  texture2D(u_state, vUv + vec2( 0.0, e.y)).rg
+       +  texture2D(u_state, vUv + vec2( 0.0,-e.y)).rg) * 0.2
+      + (texture2D(u_state, vUv + vec2( e.x, e.y)).rg
+       +  texture2D(u_state, vUv + vec2(-e.x, e.y)).rg
+       +  texture2D(u_state, vUv + vec2( e.x,-e.y)).rg
+       +  texture2D(u_state, vUv + vec2(-e.x,-e.y)).rg) * 0.05
+      - c.rg;
+
+    // F and k drift smoothly across the tile; both modulations are periodic in
+    // uv, so the torus still matches itself at the seam.
+    float sx = sin(6.2831853 * vUv.x);
+    float sy = sin(6.2831853 * vUv.y);
+    float cx = cos(6.2831853 * vUv.x);
+    float cy = cos(6.2831853 * vUv.y);
+    float F = u_feed + u_variation * 0.009 * (sx * cy) + 0.0006 * sin(u_age * 0.031);
+    float K = u_kill + u_variation * 0.004 * (cx * sy) + 0.0003 * cos(u_age * 0.023);
+
+    float uv2 = c.r * c.g * c.g;
+    float nu = c.r + (1.0 * lap.x - uv2 + F * (1.0 - c.r));
+    float nv = c.g + (0.5 * lap.y + uv2 - (F + K) * c.g);
+    gl_FragColor = vec4(clamp(nu, 0.0, 1.0), clamp(nv, 0.0, 1.0), 0.0, 1.0);
+  }
+`;
+const seedFrag = /* glsl */ `
+  precision highp float;
+  uniform float u_spots;
+  varying vec2 vUv;
+
+  float hash21s(vec2 p){
+    p = fract(p * vec2(123.34, 456.21));
+    p += dot(p, p + 45.32);
+    return fract(p.x * p.y);
+  }
+
+  void main(){
+    // a scatter of seeded blobs; everything else is pure substrate
+    vec2 g = vUv * 9.0;
+    vec2 id = floor(g);
+    vec2 f = fract(g) - 0.5;
+    float h = hash21s(id + 3.7);
+    vec2 off = (vec2(hash21s(id + 1.3), hash21s(id + 7.1)) - 0.5) * 0.5;
+    float d = length(f - off);
+    float blob = step(h, u_spots) * (1.0 - smoothstep(0.10, 0.22, d));
+    gl_FragColor = vec4(1.0 - 0.5 * blob, 0.25 * blob, 0.0, 1.0);
+  }
+`;
+function createExtraUniforms() {
+    return {
+        u_field: { value: null },
+        u_tileCells: { value: 7 },
+    };
+}
+/** The simulation: two half-float targets ping-ponged through the Gray-Scott step. */
+function createRuntime(u, renderer, c) {
+    const targetOptions = {
+        type: THREE.HalfFloatType,
+        format: THREE.RGBAFormat,
+        minFilter: THREE.LinearFilter,
+        magFilter: THREE.LinearFilter,
+        wrapS: THREE.RepeatWrapping,
+        wrapT: THREE.RepeatWrapping,
+        depthBuffer: false,
+        stencilBuffer: false,
+        generateMipmaps: false,
+    };
+    const simMaterial = new THREE.ShaderMaterial({
+        vertexShader: fsVert,
+        fragmentShader: simFrag,
+        uniforms: {
+            u_state: { value: null },
+            u_texel: { value: new THREE.Vector2(1 / SIM_SIZE, 1 / SIM_SIZE) },
+            u_feed: { value: 0.037 },
+            u_kill: { value: 0.06 },
+            u_variation: { value: 0.55 },
+            u_age: { value: 0 },
+        },
+        depthTest: false,
+        depthWrite: false,
+    });
+    const seedMaterial = new THREE.ShaderMaterial({
+        vertexShader: fsVert,
+        fragmentShader: seedFrag,
+        uniforms: { u_spots: { value: 0.3 } },
+        depthTest: false,
+        depthWrite: false,
+    });
+    const quadGeometry = new THREE.PlaneGeometry(2, 2);
+    const quad = new THREE.Mesh(quadGeometry, simMaterial);
+    quad.frustumCulled = false;
+    const scene = new THREE.Scene();
+    scene.add(quad);
+    return {
+        read: new THREE.WebGLRenderTarget(SIM_SIZE, SIM_SIZE, targetOptions),
+        write: new THREE.WebGLRenderTarget(SIM_SIZE, SIM_SIZE, targetOptions),
+        scene: scene,
+        camera: new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1),
+        quad: quad,
+        quadGeometry: quadGeometry,
+        simMaterial: simMaterial,
+        seedMaterial: seedMaterial,
+        seeded: false,
+        age: 0,
+        carry: 0,
+    };
+}
+function updateRuntime(rt, u, c, dt, renderer) {
+    const previousTarget = renderer.getRenderTarget();
+    if (!rt.seeded) {
+        rt.quad.material = rt.seedMaterial;
+        renderer.setRenderTarget(rt.read);
+        renderer.render(rt.scene, rt.camera);
+        rt.quad.material = rt.simMaterial;
+        rt.seeded = true;
+    }
+    const sim = rt.simMaterial.uniforms;
+    sim.u_feed.value = u.u_feed.value;
+    sim.u_kill.value = u.u_kill.value;
+    sim.u_variation.value = u.u_variation.value;
+    // fixed step count per second so the pattern grows at the same rate on any machine
+    rt.carry += Math.min(dt, 0.1) * 240 * Math.max(u.u_animSpeed.value, 0);
+    let steps = Math.floor(rt.carry);
+    rt.carry -= steps;
+    if (steps > 16)
+        steps = 16;
+    for (let i = 0; i < steps; i++) {
+        rt.age += 1;
+        sim.u_age.value = rt.age;
+        sim.u_state.value = rt.read.texture;
+        renderer.setRenderTarget(rt.write);
+        renderer.render(rt.scene, rt.camera);
+        const swap = rt.read;
+        rt.read = rt.write;
+        rt.write = swap;
+    }
+    renderer.setRenderTarget(previousTarget);
+    u.u_field.value = rt.read.texture;
+}
+function disposeRuntime(rt) {
+    rt.read.dispose();
+    rt.write.dispose();
+    rt.quadGeometry.dispose();
+    rt.simMaterial.dispose();
+    rt.seedMaterial.dispose();
+}
+/**
+ * A Gray-Scott reaction-diffusion field simulated on the GPU and sampled by the plane: coral, labyrinths and dividing spots grow, merge and keep evolving, wrapped seamlessly as a torus.
+ */
+export function ReactionDiffusionGrid({ config = defaultReactionDiffusionGridConfig, 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, feed, kill, variation, tileCells, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // the relief follows the pattern itself, which is a few texels wide
+    const segs = segments ?? (displace > 0 ? Math.min(512, Math.max(128, Math.ceil(size / Math.max(cellSize, 1e-4)) * 12)) : 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 });
+    // the simulation behind this grid: created on mount, stepped every frame
+    const runtimeRef = useRef(null);
+    useFrame((state, delta) => {
+        const mat = matRef.current;
+        if (!mat)
+            return;
+        if (!runtimeRef.current)
+            runtimeRef.current = createRuntime(mat.uniforms, state.gl, config);
+        updateRuntime(runtimeRef.current, mat.uniforms, config, Math.min(delta, 0.1), state.gl);
+    });
+    useEffect(() => () => {
+        if (runtimeRef.current) {
+            disposeRuntime(runtimeRef.current);
+            runtimeRef.current = null;
+        }
+    }, []);
+    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("reactionDiffusionGridMaterial", { 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_feed: feed, u_kill: kill, u_variation: variation, u_tileCells: tileCells, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, ReactionDiffusionGridMaterial.key)] }) }));
+}
+export default ReactionDiffusionGrid;

package/dist/components/WallpaperGrid.d.ts

@@ -0,0 +1,15 @@
+import type { ThreeElements } from '@react-three/fiber';
+import type { ObjectReadyProps } from '../types/objectReady';
+import type { WallpaperGridConfig } from '../types/gridConfigs';
+export interface WallpaperGridProps extends ObjectReadyProps {
+    config?: WallpaperGridConfig;
+    groupProps?: ThreeElements['group'];
+}
+/** WallpaperGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export declare const defaultWallpaperGridConfig: WallpaperGridConfig;
+/**
+ * Wallpaper-group kaleidoscope: a drifting lattice-periodic Fourier motif summed over the coset representatives of one of the 17 plane crystallographic groups. The runtime builds the group tables and crossfades from group to group.
+ */
+export declare function WallpaperGrid({ config, groupProps, onObjectReady, onObjectDispose }: WallpaperGridProps): import("react").JSX.Element;
+export default WallpaperGrid;
+//# sourceMappingURL=WallpaperGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WallpaperGrid.d.ts","sourceRoot":"","sources":["../../src/components/WallpaperGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IACxD,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,gGAAgG;AAChG,eAAO,MAAM,0BAA0B,EAAE,mBA6BxC,CAAC;AAocF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAmC,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,kBAAkB,+BAgFpI;AAED,eAAe,aAAa,CAAC"}