@kortix/ui 0.0.0-stage → 0.14.3

package/dist/components/ui/dot-matrix/dotm-circular-3.js

@@ -0,0 +1,54 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask, rowMajorIndex } from '../../../lib/dotmatrix-core.js';
+const STEP_COUNT = 24;
+const BASE_OPACITY = 0.08;
+const RING_BASE_OPACITY = 0.2;
+const CORE_OPACITY = 0.16;
+const COMET_TAIL = [1, 0.78, 0.56, 0.36, 0.22];
+const SECONDARY_COMET_SCALE = 0.72;
+const CIRCULAR_RING_PATH = [
+    rowMajorIndex(0, 1),
+    rowMajorIndex(0, 2),
+    rowMajorIndex(0, 3),
+    rowMajorIndex(1, 4),
+    rowMajorIndex(2, 4),
+    rowMajorIndex(3, 4),
+    rowMajorIndex(4, 3),
+    rowMajorIndex(4, 2),
+    rowMajorIndex(4, 1),
+    rowMajorIndex(3, 0),
+    rowMajorIndex(2, 0),
+    rowMajorIndex(1, 0),
+];
+const LOOP_LEN = CIRCULAR_RING_PATH.length;
+function makeResolver(headStep, reducedMotion) {
+    return ({ index, row, col, phase }) => {
+        if (!isWithinCircularMask(row, col)) {
+            return { className: 'dmx-inactive' };
+        }
+        const pathOrder = CIRCULAR_RING_PATH.indexOf(index);
+        const isCore = row === 2 && col === 2;
+        if (pathOrder === -1) {
+            return { style: { opacity: isCore ? CORE_OPACITY : BASE_OPACITY } };
+        }
+        if (reducedMotion || phase === 'idle') {
+            return { style: { opacity: RING_BASE_OPACITY + (pathOrder / (LOOP_LEN - 1)) * 0.56 } };
+        }
+        const leadA = Math.floor((headStep / STEP_COUNT) * LOOP_LEN) % LOOP_LEN;
+        const leadB = (leadA + Math.floor(LOOP_LEN / 2)) % LOOP_LEN;
+        let opacity = BASE_OPACITY;
+        for (let i = 0; i < COMET_TAIL.length; i += 1) {
+            const weight = COMET_TAIL[i] ?? 0;
+            const tailA = (leadA - i + LOOP_LEN) % LOOP_LEN;
+            const tailB = (leadB - i + LOOP_LEN) % LOOP_LEN;
+            if (pathOrder === tailA) {
+                opacity = Math.max(opacity, weight);
+            }
+            if (pathOrder === tailB) {
+                opacity = Math.max(opacity, weight * SECONDARY_COMET_SCALE);
+            }
+        }
+        return { style: { opacity: Math.min(1, opacity) } };
+    };
+}
+export const DotmCircular3 = createDotm5x5Component('DotmCircular3', makeResolver, { speed: 1.6, lockedPattern: 'full', cycleMsBase: 1650, steps: STEP_COUNT, idleStep: 6 });

package/dist/components/ui/dot-matrix/dotm-circular-4.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmCircular4: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-circular-4.js

@@ -0,0 +1,35 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.08;
+const SWEEP_OPACITY = 0.96;
+const NEAR_SWEEP_OPACITY = 0.36;
+const RING_OPACITY = 0.22;
+function makeResolver(phase, reducedMotion) {
+    return ({ row, col, phase: p }) => {
+        if (!isWithinCircularMask(row, col)) {
+            return { className: 'dmx-inactive' };
+        }
+        const centerRow = row - 2;
+        const centerCol = col - 2;
+        const radius = Math.hypot(centerRow, centerCol);
+        const theta = (reducedMotion || p === 'idle' ? 0 : phase) * Math.PI * 2;
+        const sweepX = Math.cos(theta);
+        const sweepY = Math.sin(theta);
+        const projection = centerCol * sweepX + centerRow * sweepY;
+        const perpendicular = Math.abs(centerCol * sweepY - centerRow * sweepX);
+        if (radius < 0.5) {
+            return { style: { opacity: 0.62 } };
+        }
+        if (projection > 0.3 && perpendicular < 0.55) {
+            return { style: { opacity: SWEEP_OPACITY } };
+        }
+        if (projection > 0 && perpendicular < 1.15) {
+            return { style: { opacity: NEAR_SWEEP_OPACITY } };
+        }
+        if (radius > 1.6 && radius < 2.3) {
+            return { style: { opacity: RING_OPACITY } };
+        }
+        return { style: { opacity: BASE_OPACITY } };
+    };
+}
+export const DotmCircular4 = createDotm5x5Component('DotmCircular4', makeResolver, { speed: 1.55, lockedPattern: 'full', cycleMsBase: 1800 });

package/dist/components/ui/dot-matrix/dotm-circular-5.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmCircular5: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-circular-5.js

@@ -0,0 +1,30 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.08;
+const BLADE_OPACITY = 0.94;
+const HALO_OPACITY = 0.34;
+function makeResolver(phase, reducedMotion) {
+    return ({ row, col, phase: p }) => {
+        if (!isWithinCircularMask(row, col)) {
+            return { className: 'dmx-inactive' };
+        }
+        const x = col - 2;
+        const y = row - 2;
+        const radius = Math.hypot(x, y);
+        const angle = Math.atan2(y, x);
+        const theta = (reducedMotion || p === 'idle' ? 0 : phase) * Math.PI * 2;
+        const pinwheel = Math.cos(angle * 4 - theta * 2.2);
+        const radialGate = Math.sin(radius * 2.1 - theta * 1.25);
+        if (radius < 0.6) {
+            return { style: { opacity: 0.66 } };
+        }
+        if (pinwheel > 0.48 && radialGate > -0.25) {
+            return { style: { opacity: BLADE_OPACITY } };
+        }
+        if (pinwheel > 0.1) {
+            return { style: { opacity: HALO_OPACITY } };
+        }
+        return { style: { opacity: BASE_OPACITY } };
+    };
+}
+export const DotmCircular5 = createDotm5x5Component('DotmCircular5', makeResolver, { speed: 1.7, lockedPattern: 'full', cycleMsBase: 1650 });

package/dist/components/ui/dot-matrix/dotm-circular-6.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmCircular6: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-circular-6.js

@@ -0,0 +1,37 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.08;
+const ORBIT_OPACITY = 0.96;
+const NEAR_ORBIT_OPACITY = 0.34;
+function makeResolver(phase, reducedMotion) {
+    return ({ row, col, phase: p }) => {
+        if (!isWithinCircularMask(row, col)) {
+            return { className: 'dmx-inactive' };
+        }
+        const x = col - 2;
+        const y = row - 2;
+        const t = reducedMotion || p === 'idle' ? 0 : phase * Math.PI * 2;
+        const angle = Math.atan2(y, x);
+        const ring = Math.sqrt(x * x + y * y);
+        const angularPhase = ((angle - t * 0.95 + Math.PI * 4) % (Math.PI * 2)) / ((Math.PI * 2) / 3);
+        const sectorPos = angularPhase - Math.floor(angularPhase);
+        const sectorPulse = Math.max(0, 1 - Math.abs(sectorPos - 0.5) * 2);
+        const ringPhase = 0.5 + 0.5 * Math.cos(ring * 3.2 + t * 1.7);
+        const score = 0.74 * sectorPulse + 0.26 * ringPhase;
+        let opacity = BASE_OPACITY;
+        if (score > 0.84) {
+            opacity = ORBIT_OPACITY;
+        }
+        else if (score > 0.63) {
+            opacity = 0.62;
+        }
+        else if (score > 0.44) {
+            opacity = NEAR_ORBIT_OPACITY;
+        }
+        if (x === 0 && y === 0) {
+            return { style: { opacity: Math.max(opacity, NEAR_ORBIT_OPACITY) } };
+        }
+        return { style: { opacity } };
+    };
+}
+export const DotmCircular6 = createDotm5x5Component('DotmCircular6', makeResolver, { speed: 1.6, lockedPattern: 'full', cycleMsBase: 1700 });

package/dist/components/ui/dot-matrix/dotm-circular-7.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmCircular7: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-circular-7.js

@@ -0,0 +1,25 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.08;
+const GATE_OPACITY = 0.92;
+function makeResolver(phase, reducedMotion) {
+    return ({ row, col, phase: p }) => {
+        if (!isWithinCircularMask(row, col)) {
+            return { className: 'dmx-inactive' };
+        }
+        const x = col - 2;
+        const y = row - 2;
+        const t = reducedMotion || p === 'idle' ? 0 : phase * Math.PI * 2;
+        const ring = Math.sqrt(x * x + y * y);
+        const angle = Math.atan2(y, x);
+        const petalWave = 0.5 + 0.5 * Math.cos(5 * angle - t * 1.7);
+        const ringWave = 0.5 + 0.5 * Math.cos(ring * 3.3 - t * 1.2);
+        const chordWave = 0.5 + 0.5 * Math.cos((x + y) * 1.6 + t * 1.35);
+        // Sharpen contrast so lit cells form clear, visible groups.
+        const petalGate = Math.pow(petalWave, 2.2);
+        const blend = 0.68 * petalGate + 0.22 * ringWave + 0.1 * chordWave;
+        const opacity = BASE_OPACITY + (GATE_OPACITY - BASE_OPACITY) * blend;
+        return { style: { opacity } };
+    };
+}
+export const DotmCircular7 = createDotm5x5Component('DotmCircular7', makeResolver, { speed: 1.8, lockedPattern: 'full', cycleMsBase: 1600 });

package/dist/components/ui/dot-matrix/dotm-circular-8.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmCircular8: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-circular-8.js

@@ -0,0 +1,26 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.08;
+const PULSE_CORE = 0.95;
+const PULSE_RING = 0.44;
+function makeResolver(phase, reducedMotion) {
+    return ({ row, col, phase: p }) => {
+        if (!isWithinCircularMask(row, col)) {
+            return { className: 'dmx-inactive' };
+        }
+        const x = col - 2;
+        const y = row - 2;
+        const radius = Math.hypot(x, y);
+        const beat = reducedMotion || p === 'idle' ? 0 : Math.sin(phase * Math.PI * 2);
+        const spike = reducedMotion || p === 'idle' ? 0 : Math.sin(phase * Math.PI * 4);
+        const pulse = Math.max(0, beat) + Math.max(0, spike) * 0.55;
+        if (radius < 0.55) {
+            return { style: { opacity: Math.min(1, 0.35 + pulse * PULSE_CORE) } };
+        }
+        if (radius < 1.65) {
+            return { style: { opacity: 0.16 + pulse * PULSE_RING } };
+        }
+        return { style: { opacity: BASE_OPACITY + pulse * 0.08 } };
+    };
+}
+export const DotmCircular8 = createDotm5x5Component('DotmCircular8', makeResolver, { speed: 1.95, lockedPattern: 'full', cycleMsBase: 1400 });

package/dist/components/ui/dot-matrix/dotm-circular-9.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmCircular9: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-circular-9.js

@@ -0,0 +1,41 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } from '../../../lib/dotmatrix-core.js';
+const STEP_COUNT = 36;
+const BASE_OPACITY = 0.07;
+const MID_OPACITY = 0.28;
+const STAR_OPACITY = 0.96;
+function makeResolver(step, reducedMotion) {
+    return ({ row, col, phase }) => {
+        if (!isWithinCircularMask(row, col)) {
+            return { className: 'dmx-inactive' };
+        }
+        const x = col - 2;
+        const y = row - 2;
+        const ring = Math.sqrt(x * x + y * y);
+        const angle = Math.atan2(y, x);
+        const cardinalCenters = [0, Math.PI / 2, Math.PI, -Math.PI / 2];
+        const beaconIndex = Math.floor((step / STEP_COUNT) * cardinalCenters.length) % cardinalCenters.length;
+        const activeCenter = cardinalCenters[beaconIndex];
+        const oppositeCenter = cardinalCenters[(beaconIndex + 2) % cardinalCenters.length];
+        const distanceToActive = Math.acos(Math.cos(angle - activeCenter));
+        const distanceToOpposite = Math.acos(Math.cos(angle - oppositeCenter));
+        const activeBeam = Math.max(0, 1 - distanceToActive / 0.5);
+        const oppositeBeam = Math.max(0, 1 - distanceToOpposite / 0.65);
+        const ringTier = Math.round(ring);
+        let opacity = BASE_OPACITY;
+        if (activeBeam > 0.8 && ringTier >= 2) {
+            opacity = STAR_OPACITY;
+        }
+        else if (activeBeam > 0.45 && ringTier >= 1) {
+            opacity = 0.62;
+        }
+        else if (oppositeBeam > 0.5 && ringTier >= 1) {
+            opacity = MID_OPACITY;
+        }
+        if (x === 0 && y === 0) {
+            return { style: { opacity: Math.max(opacity, 0.24) } };
+        }
+        return { style: { opacity } };
+    };
+}
+export const DotmCircular9 = createDotm5x5Component('DotmCircular9', makeResolver, { speed: 5.55, lockedPattern: 'full', cycleMsBase: 1900, steps: STEP_COUNT });

package/dist/components/ui/dot-matrix/dotm-square-1.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmSquare1: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-square-1.js

@@ -0,0 +1,27 @@
+'use client';
+import { createDotm5x5Component, trBlPathNormFromIndex } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, index, row, col, reducedMotion, phase, }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const path = trBlPathNormFromIndex(index);
+    const slice = row + (4 - col);
+    const parity = slice % 2;
+    const style = {
+        '--dmx-path': path,
+        '--dmx-diagonal-parity': parity,
+    };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: parity === 0 ? 0.88 : 0.14,
+            },
+        };
+    }
+    return { className: 'dmx-diagonal-alt-sweep', style };
+};
+function makeResolver() {
+    return animationResolver;
+}
+export const DotmSquare1 = createDotm5x5Component('DotmSquare1', makeResolver, { speed: 1.1 });

package/dist/components/ui/dot-matrix/dotm-square-10.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmSquare10: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-square-10.js

@@ -0,0 +1,27 @@
+'use client';
+import { createDotm5x5Component, MATRIX_SIZE } from '../../../lib/dotmatrix-core.js';
+const ROWS = MATRIX_SIZE;
+const BASE_OPACITY = 0.08;
+const PEAK_OPACITY = 1;
+const DECAY = 0.72;
+const COL_WARP = 0.07;
+function makeResolver(cycle, reducedMotion) {
+    return ({ isActive, row, col, phase }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        if (reducedMotion || phase === 'idle') {
+            const falloff = (ROWS - 1 - row) / Math.max(1, ROWS - 1);
+            return { style: { opacity: BASE_OPACITY + falloff * 0.38 } };
+        }
+        const colGain = 1 + COL_WARP * Math.sin(col * 1.72 + cycle * 0.61);
+        if (row > cycle) {
+            return { style: { opacity: BASE_OPACITY } };
+        }
+        const age = cycle - row;
+        const trail = Math.exp(-age * DECAY);
+        const opacity = BASE_OPACITY + (PEAK_OPACITY - BASE_OPACITY) * trail * colGain;
+        return { style: { opacity: Math.min(PEAK_OPACITY, opacity) } };
+    };
+}
+export const DotmSquare10 = createDotm5x5Component('DotmSquare10', makeResolver, { speed: 2.5, cycleMsBase: 1500, steps: ROWS });

package/dist/components/ui/dot-matrix/dotm-square-11.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmSquare11: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-square-11.js

@@ -0,0 +1,25 @@
+'use client';
+import { createDotm5x5Component } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, manhattanDistance, reducedMotion, phase, }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const ring = Math.max(0, Math.min(4, manhattanDistance));
+    const style = {
+        '--dmx-ripple-ring': ring,
+        '--dmx-ripple-parity': ring % 2,
+    };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: 0.2 + (1 - ring / 4) * 0.72,
+            },
+        };
+    }
+    return { className: 'dmx-ripple-echo', style };
+};
+function makeResolver() {
+    return animationResolver;
+}
+export const DotmSquare11 = createDotm5x5Component('DotmSquare11', makeResolver, { speed: 1.25 });

package/dist/components/ui/dot-matrix/dotm-square-12.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmSquare12: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-square-12.js

@@ -0,0 +1,28 @@
+'use client';
+import { createDotm5x5Component } from '../../../lib/dotmatrix-core.js';
+// User-defined origin is cell (2,2) in a 1-based 5x5 grid => (row=1,col=1) in zero-based coords.
+const ORIGIN_ROW = 1;
+const ORIGIN_COL = 1;
+const MAX_MANHATTAN = 6;
+const animationResolver = ({ isActive, row, col, reducedMotion, phase }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const ring = Math.max(0, Math.min(MAX_MANHATTAN, Math.abs(row - ORIGIN_ROW) + Math.abs(col - ORIGIN_COL)));
+    const style = {
+        '--dmx-center-ripple-ring': ring,
+    };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: 0.2 + (1 - ring / MAX_MANHATTAN) * 0.75,
+            },
+        };
+    }
+    return { className: 'dmx-center-origin-ripple', style };
+};
+function makeResolver() {
+    return animationResolver;
+}
+export const DotmSquare12 = createDotm5x5Component('DotmSquare12', makeResolver, { speed: 1.35 });

package/dist/components/ui/dot-matrix/dotm-square-13.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmSquare13: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-square-13.js

@@ -0,0 +1,45 @@
+'use client';
+import { createDotm5x5Component, rowMajorIndex } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.08;
+const ON_OPACITY = 0.56;
+const PEAK_OPACITY = 1;
+const FRAME_MASKS = [
+    // N
+    '..x..' + '..x..' + '..o..' + '.....' + '.....',
+    // NE
+    '....x' + '...x.' + '..o..' + '.....' + '.....',
+    // E
+    '.....' + '.....' + '..oxx' + '.....' + '.....',
+    // SE
+    '.....' + '.....' + '..o..' + '...x.' + '....x',
+    // S
+    '.....' + '.....' + '..o..' + '..x..' + '..x..',
+    // SW
+    '.....' + '.....' + '..o..' + '.x...' + 'x....',
+    // W
+    '.....' + '.....' + 'xxo..' + '.....' + '.....',
+    // NW
+    'x....' + '.x...' + '..o..' + '.....' + '.....',
+];
+const FRAME_SEQUENCE = [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7];
+function maskCell(mask, row, col) {
+    return mask[rowMajorIndex(row, col)] ?? '.';
+}
+function makeResolver(cycle, reducedMotion) {
+    const frameIndex = FRAME_SEQUENCE[cycle] ?? 0;
+    const mask = FRAME_MASKS[frameIndex] ?? FRAME_MASKS[0];
+    return ({ isActive, row, col }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        const cell = maskCell(mask, row, col);
+        if (cell === 'x') {
+            return { style: { opacity: PEAK_OPACITY } };
+        }
+        if (cell === 'o') {
+            return { style: { opacity: ON_OPACITY } };
+        }
+        return { style: { opacity: BASE_OPACITY } };
+    };
+}
+export const DotmSquare13 = createDotm5x5Component('DotmSquare13', makeResolver, { speed: 1.85, cycleMsBase: 1550, steps: FRAME_SEQUENCE.length });

package/dist/components/ui/dot-matrix/dotm-square-14.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmSquare14: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-square-14.js

@@ -0,0 +1,38 @@
+'use client';
+import { createDotm5x5Component, rowMajorIndex } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.08;
+const MID_OPACITY = 0.52;
+const PEAK_OPACITY = 1;
+const SMOOTH_TRANSITION = 'opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)';
+const FRAME_MASKS = [
+    // Diagonal star
+    'x...x' + '.x.x.' + '..o..' + '.x.x.' + 'x...x',
+    // Diamond bloom
+    '..x..' + '.oxo.' + 'xooox' + '.oxo.' + '..x..',
+    // Petal ring
+    '.x.x.' + 'x.o.x' + '..o..' + 'x.o.x' + '.x.x.',
+    // Crossed lattice
+    'x.x.x' + '.o.o.' + 'x.o.x' + '.o.o.' + 'x.x.x',
+];
+const FRAME_SEQUENCE = [0, 1, 2, 3, 2, 1];
+function maskCell(mask, row, col) {
+    return mask[rowMajorIndex(row, col)] ?? '.';
+}
+function makeResolver(cycle, reducedMotion) {
+    const frameIndex = FRAME_SEQUENCE[cycle] ?? 0;
+    const mask = FRAME_MASKS[frameIndex] ?? FRAME_MASKS[0];
+    return ({ isActive, row, col }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        const cell = maskCell(mask, row, col);
+        if (cell === 'x') {
+            return { style: { opacity: PEAK_OPACITY, transition: SMOOTH_TRANSITION } };
+        }
+        if (cell === 'o') {
+            return { style: { opacity: MID_OPACITY, transition: SMOOTH_TRANSITION } };
+        }
+        return { style: { opacity: BASE_OPACITY, transition: SMOOTH_TRANSITION } };
+    };
+}
+export const DotmSquare14 = createDotm5x5Component('DotmSquare14', makeResolver, { speed: 1.25, size: 14, dotSize: 2, cycleMsBase: 1700, steps: FRAME_SEQUENCE.length });

package/dist/components/ui/dot-matrix/dotm-square-15.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmSquare15: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-square-15.js

@@ -0,0 +1,31 @@
+'use client';
+import { createDotm5x5Component } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.08;
+const STRAND_OPACITY = 1;
+const BRIDGE_OPACITY = 0.58;
+const NEAR_STRAND_OPACITY = 0.24;
+/** Integer full sin periods per matrix cycle so phase 0 ≡ phase 1 (no wrap glitch). */
+const STRAND_LOOPS = 2;
+function makeResolver(cycle, reducedMotion) {
+    return ({ isActive, row, col, phase }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        const u = reducedMotion || phase === 'idle' ? 0 : cycle;
+        const rowPhase = u * STRAND_LOOPS * 2 * Math.PI + row * 1.24;
+        const left = Math.round(1 + Math.sin(rowPhase));
+        const right = 4 - left;
+        const bridgeOn = Math.cos(rowPhase * 2) > 0.82;
+        if (col === left || col === right) {
+            return { style: { opacity: STRAND_OPACITY } };
+        }
+        if (bridgeOn && col > left && col < right) {
+            return { style: { opacity: BRIDGE_OPACITY } };
+        }
+        if (Math.abs(col - left) === 1 || Math.abs(col - right) === 1) {
+            return { style: { opacity: NEAR_STRAND_OPACITY } };
+        }
+        return { style: { opacity: BASE_OPACITY } };
+    };
+}
+export const DotmSquare15 = createDotm5x5Component('DotmSquare15', makeResolver, { speed: 1.25, cycleMsBase: 1600 });

package/dist/components/ui/dot-matrix/dotm-square-16.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmSquare16: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-square-16.js

@@ -0,0 +1,33 @@
+'use client';
+import { createDotm5x5Component } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.08;
+const STRAND_OPACITY = 1;
+const BRIDGE_OPACITY = 0.58;
+const NEAR_STRAND_OPACITY = 0.24;
+const STEP_COUNT = 20;
+const HELIX_LOOP_RADIANS = (Math.PI * 2) / (STEP_COUNT - 1);
+function makeResolver(cycle, reducedMotion) {
+    return ({ isActive, row, col, phase }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        const t = reducedMotion || phase === 'idle' ? 0 : cycle * STEP_COUNT;
+        // Make first and last discrete frames identical to avoid loop jank.
+        const rowPhase = t * HELIX_LOOP_RADIANS + row * 1.24;
+        // Tighter center-band helix (3-column footprint).
+        const left = Math.round(1.5 + 0.5 * Math.sin(rowPhase));
+        const right = 4 - left;
+        const bridgeOn = Math.cos(rowPhase * 2) > 0.82;
+        if (col === left || col === right) {
+            return { style: { opacity: STRAND_OPACITY } };
+        }
+        if (bridgeOn && col > left && col < right) {
+            return { style: { opacity: BRIDGE_OPACITY } };
+        }
+        if (Math.abs(col - left) === 1 || Math.abs(col - right) === 1) {
+            return { style: { opacity: NEAR_STRAND_OPACITY } };
+        }
+        return { style: { opacity: BASE_OPACITY } };
+    };
+}
+export const DotmSquare16 = createDotm5x5Component('DotmSquare16', makeResolver, { speed: 2.5, cycleMsBase: 1400 });

package/dist/components/ui/dot-matrix/dotm-square-17.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmSquare17: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/ui/dot-matrix/dotm-square-17.js

@@ -0,0 +1,27 @@
+'use client';
+import { createDotm5x5Component } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.08;
+const STRAND_OPACITY = 1;
+const NEAR_STRAND_OPACITY = 0.24;
+const STEP_COUNT = 20;
+const HELIX_LOOP_RADIANS = (Math.PI * 2) / (STEP_COUNT - 1);
+function makeResolver(cycle, reducedMotion) {
+    return ({ isActive, row, col, phase }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        const t = reducedMotion || phase === 'idle' ? 0 : cycle * STEP_COUNT;
+        // Make first and last discrete frames identical to avoid loop jank.
+        const rowPhase = t * HELIX_LOOP_RADIANS + row * 1.24;
+        // One helix strand only, sweeping across full 5-column width.
+        const strandCol = Math.round(2 + 2 * Math.sin(rowPhase));
+        if (col === strandCol) {
+            return { style: { opacity: STRAND_OPACITY } };
+        }
+        if (Math.abs(col - strandCol) === 1) {
+            return { style: { opacity: NEAR_STRAND_OPACITY } };
+        }
+        return { style: { opacity: BASE_OPACITY } };
+    };
+}
+export const DotmSquare17 = createDotm5x5Component('DotmSquare17', makeResolver, { speed: 2.5, cycleMsBase: 1600 });

package/dist/components/ui/dot-matrix/dotm-square-18.d.ts

@@ -0,0 +1,4 @@
+export declare const DotmSquare18: {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: import("../../../lib/dotmatrix-core.js").DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};