@backbay/glia 0.2.0-alpha.1

package/dist/primitives/three/ParticleField/ParticleField.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Instance, Instances } from "@react-three/drei";
+import { useFrame } from "@react-three/fiber";
+import { useRef } from "react";
+const Particle = ({ factor, speed, xFactor, yFactor, zFactor }) => {
+    const ref = useRef(null);
+    useFrame((state) => {
+        const t = factor + state.clock.elapsedTime * (speed / 2);
+        if (ref.current) {
+            ref.current.rotation.z = t * xFactor;
+            ref.current.rotation.y = t * yFactor;
+            ref.current.position.x =
+                Math.cos(t) +
+                    Math.sin(t * 1) / 10 +
+                    xFactor +
+                    Math.cos((t / 10) * factor) +
+                    (Math.sin(t * 1) * factor) / 10;
+            ref.current.position.y =
+                Math.sin(t) +
+                    Math.cos(t * 2) / 10 +
+                    yFactor +
+                    Math.sin((t / 10) * factor) +
+                    (Math.cos(t * 2) * factor) / 10;
+            ref.current.position.z =
+                Math.sin(t) +
+                    Math.cos(t * 2) / 10 +
+                    zFactor +
+                    Math.cos((t / 10) * factor) +
+                    (Math.sin(t * 3) * factor) / 10;
+        }
+    });
+    return _jsx(Instance, { ref: ref });
+};
+export const ParticleField = ({ count = 100, range = 20, color = "#00f0ff", }) => {
+    // Generate random data for instances
+    const particles = new Array(count).fill(0).map(() => ({
+        factor: 0.5 + Math.random(),
+        speed: 0.01 + Math.random() / 200,
+        xFactor: -10 + Math.random() * 20,
+        yFactor: -10 + Math.random() * 20,
+        zFactor: -10 + Math.random() * 20,
+    }));
+    return (_jsxs(Instances, { range: range, limit: count, children: [_jsx("dodecahedronGeometry", { args: [0.05, 0] }), _jsx("meshStandardMaterial", { color: color, roughness: 0, metalness: 0.5, emissive: color, emissiveIntensity: 0.5 }), particles.map((data, i) => (_jsx(Particle, { ...data }, i)))] }));
+};

package/dist/primitives/three/ParticleField/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ParticleField";
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/three/ParticleField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/ParticleField/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/primitives/three/ParticleField/index.js

@@ -0,0 +1 @@
+export * from "./ParticleField";

package/dist/primitives/three/PermissionMatrix/PermissionMatrix.d.ts

@@ -0,0 +1,14 @@
+import { PermissionMatrixProps } from "./types";
+/**
+ * PermissionMatrix - 3D visualization of permission groups and access levels
+ *
+ * Displays permissions in a 3D grid where:
+ * - X-axis: Resources (columns)
+ * - Z-axis: Permission groups (rows)
+ * - Y-axis: Granted state (tall = granted, flat = denied)
+ */
+export declare function PermissionMatrix({ groups, selected, position, cellSize, spacing, onPermissionClick, showLabels, animated, }: PermissionMatrixProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PermissionMatrix {
+    var displayName: string;
+}
+//# sourceMappingURL=PermissionMatrix.d.ts.map

package/dist/primitives/three/PermissionMatrix/PermissionMatrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionMatrix.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/PermissionMatrix/PermissionMatrix.tsx"],"names":[],"mappings":"AAOA,OAAO,EAGL,qBAAqB,EAEtB,MAAM,SAAS,CAAC;AAgMjB;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,QAAoB,EACpB,QAAc,EACd,OAAa,EACb,iBAAiB,EACjB,UAAkB,EAClB,QAAe,GAChB,EAAE,qBAAqB,2CA4JvB;yBArKe,gBAAgB"}

package/dist/primitives/three/PermissionMatrix/PermissionMatrix.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useFrame } from "@react-three/fiber";
+import { Html, RoundedBox } from "@react-three/drei";
+import * as THREE from "three";
+import { ACTION_COLORS, } from "./types";
+/**
+ * PermissionCell - Individual permission cell in the matrix
+ */
+function PermissionCell({ permission, group, position, cellSize, isSelected, onPermissionClick, showLabels, animated = true, }) {
+    const meshRef = React.useRef(null);
+    const [hovered, setHovered] = React.useState(false);
+    const color = ACTION_COLORS[permission.action];
+    const baseHeight = permission.granted ? cellSize * 1.5 : cellSize * 0.3;
+    // Animation state
+    const scaleRef = React.useRef({ x: 1, y: 1, z: 1 });
+    const pulsePhaseRef = React.useRef(Math.random() * Math.PI * 2);
+    useFrame((state) => {
+        if (!meshRef.current)
+            return;
+        const t = state.clock.elapsedTime;
+        // Pulse animation for granted permissions
+        if (animated && permission.granted) {
+            const pulse = Math.sin(t * 2 + pulsePhaseRef.current) * 0.08 + 1;
+            scaleRef.current.y = pulse;
+        }
+        else {
+            scaleRef.current.y = 1;
+        }
+        // Hover/selection scale with smooth lerp
+        const targetScaleXZ = hovered || isSelected ? 1.15 : 1;
+        scaleRef.current.x = THREE.MathUtils.lerp(scaleRef.current.x, targetScaleXZ, 0.12);
+        scaleRef.current.z = THREE.MathUtils.lerp(scaleRef.current.z, targetScaleXZ, 0.12);
+        // Apply scales
+        meshRef.current.scale.set(scaleRef.current.x, scaleRef.current.y, scaleRef.current.z);
+    });
+    return (_jsxs("group", { position: position, children: [_jsx(RoundedBox, { ref: meshRef, args: [cellSize * 0.85, baseHeight, cellSize * 0.85], radius: 0.03, smoothness: 4, position: [0, baseHeight / 2, 0], onClick: (e) => {
+                    e.stopPropagation();
+                    onPermissionClick?.(permission, group);
+                }, onPointerOver: (e) => {
+                    e.stopPropagation();
+                    setHovered(true);
+                    document.body.style.cursor = "pointer";
+                }, onPointerOut: () => {
+                    setHovered(false);
+                    document.body.style.cursor = "auto";
+                }, children: _jsx("meshStandardMaterial", { color: permission.granted ? color : "#1a1a1a", transparent: true, opacity: permission.granted ? 0.92 : 0.45, emissive: permission.granted ? color : "#000000", emissiveIntensity: permission.granted ? (hovered ? 0.5 : 0.25) : 0, roughness: 0.4, metalness: 0.3 }) }), permission.inherited && (_jsxs("mesh", { position: [0, baseHeight + 0.15, 0], children: [_jsx("sphereGeometry", { args: [0.06, 12, 12] }), _jsx("meshStandardMaterial", { color: "#00aaff", emissive: "#00aaff", emissiveIntensity: 0.6, transparent: true, opacity: 0.85 })] })), isSelected && (_jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [0, 0.02, 0], children: [_jsx("ringGeometry", { args: [cellSize * 0.48, cellSize * 0.55, 24] }), _jsx("meshBasicMaterial", { color: "#ffffff", transparent: true, opacity: 0.7 })] })), hovered && !isSelected && (_jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [0, 0.01, 0], children: [_jsx("ringGeometry", { args: [cellSize * 0.45, cellSize * 0.52, 24] }), _jsx("meshBasicMaterial", { color: color, transparent: true, opacity: 0.4 })] })), (hovered || showLabels) && (_jsx(Html, { position: [0, baseHeight + 0.4, 0], center: true, distanceFactor: 8, children: _jsxs("div", { className: "bg-black/95 text-xs font-mono px-3 py-2 rounded-md border whitespace-nowrap shadow-lg backdrop-blur-sm", style: {
+                        borderColor: color,
+                        boxShadow: `0 0 12px ${color}40`,
+                    }, children: [_jsx("div", { style: { color }, className: "font-bold text-[11px] mb-1", children: permission.action.toUpperCase() }), _jsx("div", { className: "text-white/90 text-[10px] mb-1", children: permission.resource }), _jsx("div", { className: `text-[10px] font-semibold ${permission.granted ? "text-emerald-400" : "text-red-400"}`, children: permission.granted ? "GRANTED" : "DENIED" }), permission.inherited && (_jsxs("div", { className: "text-blue-400 text-[9px] mt-1 flex items-center gap-1", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-blue-400" }), "inherited"] })), permission.reason && (_jsx("div", { className: "text-white/50 text-[9px] mt-1 max-w-32 truncate", children: permission.reason }))] }) }))] }));
+}
+/**
+ * GroupDivider - Visual separator between permission groups
+ */
+function GroupDivider({ position, width, color = "#333", }) {
+    return (_jsxs("mesh", { position: position, rotation: [-Math.PI / 2, 0, 0], children: [_jsx("planeGeometry", { args: [width, 0.02] }), _jsx("meshBasicMaterial", { color: color, transparent: true, opacity: 0.6 })] }));
+}
+/**
+ * PermissionMatrix - 3D visualization of permission groups and access levels
+ *
+ * Displays permissions in a 3D grid where:
+ * - X-axis: Resources (columns)
+ * - Z-axis: Permission groups (rows)
+ * - Y-axis: Granted state (tall = granted, flat = denied)
+ */
+export function PermissionMatrix({ groups, selected, position = [0, 0, 0], cellSize = 0.5, spacing = 0.1, onPermissionClick, showLabels = false, animated = true, }) {
+    const totalSpacing = cellSize + spacing;
+    const groupSpacing = totalSpacing * 1.8;
+    // Extract unique resources across all groups for column layout
+    const allResources = React.useMemo(() => {
+        const resources = new Set();
+        groups.forEach((g) => g.permissions.forEach((p) => resources.add(p.resource)));
+        return Array.from(resources);
+    }, [groups]);
+    const gridWidth = allResources.length * totalSpacing;
+    const gridDepth = groups.length * groupSpacing;
+    return (_jsxs("group", { position: position, children: [_jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [gridWidth / 2 - totalSpacing / 2, -0.01, gridDepth / 2 - groupSpacing / 2], children: [_jsx("planeGeometry", { args: [gridWidth + totalSpacing, gridDepth + totalSpacing] }), _jsx("meshStandardMaterial", { color: "#0a0a0a", transparent: true, opacity: 0.8, roughness: 0.9 })] }), _jsx("gridHelper", { args: [
+                    Math.max(gridWidth, gridDepth) + totalSpacing,
+                    Math.max(allResources.length, groups.length) + 2,
+                    "#1a1a1a",
+                    "#111111",
+                ], position: [
+                    gridWidth / 2 - totalSpacing / 2,
+                    0,
+                    gridDepth / 2 - groupSpacing / 2,
+                ] }), groups.map((group, groupIndex) => (_jsx(Html, { position: [-totalSpacing * 1.5, 0.4, groupIndex * groupSpacing], center: true, distanceFactor: 10, children: _jsx("div", { className: "bg-black/90 text-white text-[11px] font-mono px-3 py-1.5 rounded border border-white/20 whitespace-nowrap shadow-lg", children: group.name }) }, `label-${group.id}`))), allResources.map((resource, i) => (_jsx(Html, { position: [i * totalSpacing, 0.3, -totalSpacing], center: true, distanceFactor: 10, children: _jsx("div", { className: "bg-black/70 text-white/70 text-[9px] font-mono px-2 py-1 rounded whitespace-nowrap", style: { transform: "rotate(-35deg)", transformOrigin: "center" }, children: resource }) }, `resource-${resource}`))), groups.map((group, groupIndex) => (_jsxs(React.Fragment, { children: [_jsx("group", { position: [0, 0, groupIndex * groupSpacing], children: group.permissions.map((permission) => {
+                            const resourceIndex = allResources.indexOf(permission.resource);
+                            return (_jsx(PermissionCell, { permission: permission, group: group, position: [resourceIndex * totalSpacing, 0, 0], cellSize: cellSize, isSelected: selected === permission.id, onPermissionClick: onPermissionClick, showLabels: showLabels, animated: animated }, permission.id));
+                        }) }), groupIndex < groups.length - 1 && (_jsx(GroupDivider, { position: [
+                            gridWidth / 2 - totalSpacing / 2,
+                            0.005,
+                            groupIndex * groupSpacing + groupSpacing / 2,
+                        ], width: gridWidth + totalSpacing * 0.5, color: "#2a2a2a" }))] }, group.id))), _jsx(Html, { position: [gridWidth / 2 - totalSpacing / 2, 2.5, -totalSpacing * 1.5], center: true, distanceFactor: 12, children: _jsx("div", { className: "bg-black/90 text-[10px] font-mono p-3 rounded-lg border border-white/10 flex gap-4 shadow-xl backdrop-blur-sm", children: Object.entries(ACTION_COLORS).map(([action, actionColor]) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-2.5 h-2.5 rounded", style: {
+                                    backgroundColor: actionColor,
+                                    boxShadow: `0 0 6px ${actionColor}60`,
+                                } }), _jsx("span", { className: "text-white/70", children: action })] }, action))) }) }), _jsx(Html, { position: [gridWidth / 2 - totalSpacing / 2, 2, -totalSpacing * 1.5], center: true, distanceFactor: 12, children: _jsxs("div", { className: "bg-black/80 text-[9px] font-mono p-2 rounded border border-white/5 flex gap-4", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-4 h-3 rounded-sm bg-gradient-to-t from-emerald-600 to-emerald-400" }), _jsx("span", { className: "text-white/50", children: "granted" })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-4 h-1.5 rounded-sm bg-neutral-700" }), _jsx("span", { className: "text-white/50", children: "denied" })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-blue-400 shadow-[0_0_4px_#00aaff]" }), _jsx("span", { className: "text-white/50", children: "inherited" })] })] }) })] }));
+}
+PermissionMatrix.displayName = "PermissionMatrix";

package/dist/primitives/three/PermissionMatrix/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * PermissionMatrix Module Exports
+ *
+ * 3D permission matrix visualization for displaying access levels
+ * and permissions in a visual grid format.
+ */
+export { PermissionMatrix } from "./PermissionMatrix";
+export type { Permission, PermissionAction, PermissionGroup, PermissionMatrixProps, } from "./types";
+export { ACTION_COLORS } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/three/PermissionMatrix/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/PermissionMatrix/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,UAAU,EACV,gBAAgB,EAChB,eAAe,EACf,qBAAqB,GACtB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/primitives/three/PermissionMatrix/index.js

@@ -0,0 +1,8 @@
+/**
+ * PermissionMatrix Module Exports
+ *
+ * 3D permission matrix visualization for displaying access levels
+ * and permissions in a visual grid format.
+ */
+export { PermissionMatrix } from "./PermissionMatrix";
+export { ACTION_COLORS } from "./types";

package/dist/primitives/three/PermissionMatrix/types.d.ts

@@ -0,0 +1,44 @@
+/**
+ * PermissionMatrix Types
+ *
+ * Type definitions for the 3D permission matrix visualization component.
+ */
+export type PermissionAction = "read" | "write" | "execute" | "delete" | "admin";
+export interface Permission {
+    id: string;
+    /** Resource name */
+    resource: string;
+    /** Action type */
+    action: PermissionAction;
+    /** Is granted */
+    granted: boolean;
+    /** Is inherited from role */
+    inherited?: boolean;
+    /** Override reason if denied */
+    reason?: string;
+}
+export interface PermissionGroup {
+    id: string;
+    name: string;
+    permissions: Permission[];
+}
+export interface PermissionMatrixProps {
+    /** Groups of permissions to display */
+    groups: PermissionGroup[];
+    /** Currently selected permission */
+    selected?: string;
+    /** Position */
+    position?: [number, number, number];
+    /** Cell size */
+    cellSize?: number;
+    /** Spacing between cells */
+    spacing?: number;
+    /** Click handler */
+    onPermissionClick?: (permission: Permission, group: PermissionGroup) => void;
+    /** Show labels */
+    showLabels?: boolean;
+    /** Enable animations */
+    animated?: boolean;
+}
+export declare const ACTION_COLORS: Record<PermissionAction, string>;
+//# sourceMappingURL=types.d.ts.map

package/dist/primitives/three/PermissionMatrix/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/PermissionMatrix/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEjF,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,MAAM,EAAE,gBAAgB,CAAC;IACzB,iBAAiB;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACpC,uCAAuC;IACvC,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7E,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAM1D,CAAC"}

package/dist/primitives/three/PermissionMatrix/types.js

@@ -0,0 +1,12 @@
+/**
+ * PermissionMatrix Types
+ *
+ * Type definitions for the 3D permission matrix visualization component.
+ */
+export const ACTION_COLORS = {
+    read: "#00aaff",
+    write: "#00ff88",
+    execute: "#ffaa00",
+    delete: "#ff4444",
+    admin: "#aa00ff",
+};

package/dist/primitives/three/QuantumField/ConstellationField.d.ts

@@ -0,0 +1,9 @@
+import type { FieldBus } from "./FieldBus";
+import type { FieldConfig } from "./types";
+interface ConstellationFieldProps {
+    bus: FieldBus;
+    config: FieldConfig;
+}
+export declare function ConstellationField({ bus, config }: ConstellationFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConstellationField.d.ts.map

package/dist/primitives/three/QuantumField/ConstellationField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConstellationField.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/QuantumField/ConstellationField.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAU3C,OAAO,KAAK,EAAE,WAAW,EAAqB,MAAM,SAAS,CAAC;AAO9D,UAAU,uBAAuB;IAC/B,GAAG,EAAE,QAAQ,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,uBAAuB,2CA2M1E"}

package/dist/primitives/three/QuantumField/ConstellationField.js

@@ -0,0 +1,185 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Constellation Field - Style A Implementation
+ *
+ * A faint, quasi-sacred lattice with iridescent interference, harmonic burst rings,
+ * and constellation-like points that brighten near interactions.
+ */
+import { useFrame, useThree } from "@react-three/fiber";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+import { clientToNdc } from "./domMapping";
+import { createConstellationMaterial, createConstellationPointsGeometry, createConstellationPointsMaterial, createConstellationUniforms, } from "./styles/styleA";
+import { TrailRTT } from "./TrailRTT";
+// Reusable raycast objects
+const _raycaster = new THREE.Raycaster();
+const _ndcVec = new THREE.Vector2();
+const _intersections = [];
+export function ConstellationField({ bus, config }) {
+    const { camera, size, gl } = useThree();
+    const meshRef = useRef(null);
+    const pointsRef = useRef(null);
+    const trailRttRef = useRef(null);
+    const uniformsRef = useRef(null);
+    // Local refs for state (avoid re-renders)
+    const stateRef = useRef(bus.getSnapshot());
+    // Subscribe to bus updates
+    useEffect(() => {
+        const unsub = bus.subscribe((state) => {
+            stateRef.current = state;
+        });
+        return unsub;
+    }, [bus]);
+    // UV computation via raycast
+    const computeUv = useCallback((clientX, clientY) => {
+        if (!meshRef.current)
+            return null;
+        const canvas = gl.domElement;
+        const rect = canvas.getBoundingClientRect();
+        const ndc = clientToNdc(clientX - rect.left, clientY - rect.top, {
+            width: rect.width,
+            height: rect.height,
+        });
+        _ndcVec.set(ndc.x, ndc.y);
+        _raycaster.setFromCamera(_ndcVec, camera);
+        _intersections.length = 0;
+        meshRef.current.raycast(_raycaster, _intersections);
+        if (_intersections.length > 0 && _intersections[0].uv) {
+            return {
+                x: _intersections[0].uv.x,
+                y: _intersections[0].uv.y,
+            };
+        }
+        return null;
+    }, [camera, gl.domElement]);
+    // Calculate plane size based on camera
+    const planeSize = useMemo(() => {
+        if (camera instanceof THREE.PerspectiveCamera) {
+            const distance = camera.position.z;
+            const vFov = (camera.fov * Math.PI) / 180;
+            const height = 2 * Math.tan(vFov / 2) * distance;
+            const width = height * (size.width / size.height);
+            return { width: width * 1.2, height: height * 1.2 };
+        }
+        return { width: 20, height: 15 };
+    }, [camera, size]);
+    // Create uniforms (shared between plane and points)
+    const uniforms = useMemo(() => {
+        const u = createConstellationUniforms();
+        u.uResolution.value.set(size.width, size.height);
+        u.uProbeRadius.value = config.probeRadius;
+        uniformsRef.current = u;
+        return u;
+    }, [size.width, size.height, config.probeRadius]);
+    // Create plane material
+    const planeMaterial = useMemo(() => {
+        return createConstellationMaterial(uniforms);
+    }, [uniforms]);
+    // Create points geometry and material
+    const pointsGeometry = useMemo(() => {
+        return createConstellationPointsGeometry(config.pointsCount, planeSize.width, planeSize.height);
+    }, [config.pointsCount, planeSize.width, planeSize.height]);
+    const pointsMaterial = useMemo(() => {
+        return createConstellationPointsMaterial(uniforms);
+    }, [uniforms]);
+    // Initialize trail RTT
+    useEffect(() => {
+        if (config.enableTrails) {
+            trailRttRef.current = new TrailRTT(config.rttResolution, config.rttResolution);
+            trailRttRef.current.init(gl);
+            uniforms.uTrailEnabled.value = 1;
+        }
+        else {
+            uniforms.uTrailEnabled.value = 0;
+        }
+        return () => {
+            if (trailRttRef.current) {
+                trailRttRef.current.dispose();
+                trailRttRef.current = null;
+            }
+        };
+    }, [config.enableTrails, config.rttResolution, gl, uniforms]);
+    // Animation frame
+    useFrame((state, delta) => {
+        if (!meshRef.current)
+            return;
+        const currentTs = Date.now();
+        const currentState = stateRef.current;
+        // Process pending events with raycast UV computation
+        bus.processPendingWithUv(computeUv);
+        // Tick the bus
+        bus.tick(delta * 1000, currentTs);
+        // Update time
+        uniforms.uTime.value = state.clock.elapsedTime;
+        // Update hover uniform
+        const hover = currentState.hover;
+        if (hover.active) {
+            uniforms.uHover.value.set(hover.uv.x, hover.uv.y, hover.intent === "etch" ? 1 : 0, 1);
+            // Update trail RTT if etch mode
+            if (config.enableTrails && trailRttRef.current && hover.intent === "etch") {
+                trailRttRef.current.update({
+                    decay: config.etchDecay,
+                    injectPos: hover.uv,
+                    injectStrength: 0.8,
+                    injectRadius: 0.015,
+                });
+                uniforms.uTrailTex.value = trailRttRef.current.getTexture();
+            }
+            else if (config.enableTrails && trailRttRef.current) {
+                // Just decay existing trails
+                trailRttRef.current.update({
+                    decay: config.etchDecay,
+                    injectPos: null,
+                    injectStrength: 0,
+                });
+                uniforms.uTrailTex.value = trailRttRef.current.getTexture();
+            }
+        }
+        else {
+            uniforms.uHover.value.w = 0;
+            // Decay trails when not hovering
+            if (config.enableTrails && trailRttRef.current) {
+                trailRttRef.current.update({
+                    decay: config.etchDecay,
+                    injectPos: null,
+                    injectStrength: 0,
+                });
+                uniforms.uTrailTex.value = trailRttRef.current.getTexture();
+            }
+        }
+        // Update impulses
+        const impulses = currentState.impulses;
+        uniforms.uImpulseCount.value = impulses.length;
+        for (let i = 0; i < 24; i++) {
+            if (i < impulses.length) {
+                const imp = impulses[i];
+                const age = Math.min(1, (currentTs - imp.startTs) / config.impulseDecayMs);
+                uniforms.uImpulses.value[i].set(imp.uv.x, imp.uv.y, imp.radius, imp.amplitude);
+                uniforms.uImpulsesAge.value[i] = age;
+            }
+            else {
+                uniforms.uImpulsesAge.value[i] = 1;
+            }
+        }
+        // Update anchors
+        const anchors = Array.from(currentState.anchors.values());
+        uniforms.uAnchorCount.value = anchors.length;
+        for (let i = 0; i < 8; i++) {
+            if (i < anchors.length) {
+                const anchor = anchors[i];
+                const phase = (currentTs - anchor.createdTs) * 0.001;
+                uniforms.uAnchors.value[i].set(anchor.uv.x, anchor.uv.y, anchor.strength, phase);
+            }
+        }
+    });
+    // Dispose on unmount
+    useEffect(() => {
+        return () => {
+            planeMaterial.dispose();
+            pointsMaterial.dispose();
+            pointsGeometry.dispose();
+        };
+    }, [planeMaterial, pointsMaterial, pointsGeometry]);
+    return (_jsxs("group", { children: [_jsx("mesh", { ref: meshRef, position: [0, 0, 0], material: planeMaterial, children: _jsx("planeGeometry", { args: [planeSize.width, planeSize.height] }) }), _jsx("points", { ref: pointsRef, geometry: pointsGeometry, material: pointsMaterial })] }));
+}

package/dist/primitives/three/QuantumField/FieldBus.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Quantum Field Canvas - Signal Bus
+ *
+ * A lightweight external store for DOM → Field event communication.
+ * Uses the useSyncExternalStore pattern for React 18+ integration.
+ */
+import type { FieldConfig, FieldEvent, FieldRuntimeState } from "./types";
+export type FieldBusListener = (state: FieldRuntimeState) => void;
+export interface FieldBus {
+    /** Emit a field event */
+    emit: (event: FieldEvent) => void;
+    /** Subscribe to state changes */
+    subscribe: (listener: FieldBusListener) => () => void;
+    /** Get current snapshot (for useSyncExternalStore) */
+    getSnapshot: () => FieldRuntimeState;
+    /** Get server snapshot (for SSR) */
+    getServerSnapshot: () => FieldRuntimeState;
+    /** Update configuration */
+    setConfig: (config: Partial<FieldConfig>) => void;
+    /** Get current configuration */
+    getConfig: () => FieldConfig;
+    /** Advance frame (called from useFrame) */
+    tick: (deltaMs: number, currentTs: number) => void;
+    /** Clear all state */
+    clear: () => void;
+    /** Process pending events with computed UVs (called from FieldLayer) */
+    processPendingWithUv: (computeUv: (clientX: number, clientY: number) => {
+        x: number;
+        y: number;
+    } | null) => void;
+}
+export declare function createFieldBus(initialConfig?: Partial<FieldConfig>): FieldBus;
+export declare function getGlobalFieldBus(): FieldBus;
+//# sourceMappingURL=FieldBus.d.ts.map

package/dist/primitives/three/QuantumField/FieldBus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldBus.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/QuantumField/FieldBus.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,iBAAiB,EAA2B,MAAM,SAAS,CAAC;AAOnG,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;AAElE,MAAM,WAAW,QAAQ;IACvB,yBAAyB;IACzB,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,iCAAiC;IACjC,SAAS,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;IACtD,sDAAsD;IACtD,WAAW,EAAE,MAAM,iBAAiB,CAAC;IACrC,oCAAoC;IACpC,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;IAC3C,2BAA2B;IAC3B,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,gCAAgC;IAChC,SAAS,EAAE,MAAM,WAAW,CAAC;IAC7B,2CAA2C;IAC3C,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,sBAAsB;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,wEAAwE;IACxE,oBAAoB,EAAE,CACpB,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAC7E,IAAI,CAAC;CACX;AA2BD,wBAAgB,cAAc,CAAC,aAAa,GAAE,OAAO,CAAC,WAAW,CAAM,GAAG,QAAQ,CA+QjF;AAQD,wBAAgB,iBAAiB,IAAI,QAAQ,CAK5C"}