@kortix/ui 0.0.0-stage → 0.14.3

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

@@ -0,0 +1,19 @@
+'use client';
+import { colWave3NormFromColReverse, createDotm3x3Component, wave3PathOpacityFromNorm, } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, col, reducedMotion, phase }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const path = colWave3NormFromColReverse(col);
+    const style = { '--dmx-path': path };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: wave3PathOpacityFromNorm(path),
+            },
+        };
+    }
+    return { className: 'dmx-path-3', style };
+};
+export const Dotm3x3_13 = createDotm3x3Component('Dotm3x3_13', animationResolver, 1.75);

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

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

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

@@ -0,0 +1,22 @@
+'use client';
+import { createDotm3x3Component } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, manhattanDistance, reducedMotion, phase, }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const ring = Math.max(0, Math.min(2, manhattanDistance));
+    const style = {
+        '--dmx-ripple-ring': ring,
+        '--dmx-ripple-parity': ring % 2,
+    };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: 0.06 + (1 - ring / 2) * 0.82,
+            },
+        };
+    }
+    return { className: 'dmx-ripple-echo-3', style };
+};
+export const Dotm3x3_15 = createDotm3x3Component('Dotm3x3_15', animationResolver, 1.75);

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

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

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

@@ -0,0 +1,5 @@
+'use client';
+import { createGlyphSpin3Component } from '../../../lib/dotmatrix-core.js';
+/** Smiley — eyes and mouth in row-major 0/1 form. */
+const SMILEY_GLYPH = [1, 0, 1, 0, 0, 0, 0, 1, 0];
+export const Dotm3x3_16 = createGlyphSpin3Component('Dotm3x3_16', SMILEY_GLYPH);

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

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

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

@@ -0,0 +1,5 @@
+'use client';
+import { createGlyphSpin3Component } from '../../../lib/dotmatrix-core.js';
+/** Checkmark — row-major 0/1 form. */
+const CHECK_GLYPH = [0, 0, 1, 0, 1, 0, 1, 0, 0];
+export const Dotm3x3_18 = createGlyphSpin3Component('Dotm3x3_18', CHECK_GLYPH);

package/dist/components/ui/dot-matrix/dotm-3x3-19.d.ts

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

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

@@ -0,0 +1,5 @@
+'use client';
+import { createGlyphSpin3Component } from '../../../lib/dotmatrix-core.js';
+/** Right arrow — row-major 0/1 form. */
+const ARROW_GLYPH = [0, 1, 0, 0, 1, 1, 0, 1, 0];
+export const Dotm3x3_19 = createGlyphSpin3Component('Dotm3x3_19', ARROW_GLYPH);

package/dist/components/ui/dot-matrix/dotm-3x3-2.d.ts

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

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

@@ -0,0 +1,3 @@
+'use client';
+import { createDiagonalWave3Component } from '../../../lib/dotmatrix-core.js';
+export const Dotm3x3_2 = createDiagonalWave3Component('Dotm3x3_2', 'tr-bl');

package/dist/components/ui/dot-matrix/dotm-3x3-20.d.ts

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

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

@@ -0,0 +1,5 @@
+'use client';
+import { createGlyphSpin3Component } from '../../../lib/dotmatrix-core.js';
+/** L-shaped corner — row-major 0/1 form. */
+const CORNER_GLYPH = [1, 1, 0, 1, 0, 0, 1, 0, 0];
+export const Dotm3x3_20 = createGlyphSpin3Component('Dotm3x3_20', CORNER_GLYPH);

package/dist/components/ui/dot-matrix/dotm-3x3-21.d.ts

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

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

@@ -0,0 +1,5 @@
+'use client';
+import { createGlyphSpin3Component } from '../../../lib/dotmatrix-core.js';
+/** Play triangle — row-major 0/1 form. */
+const PLAY_GLYPH = [1, 0, 0, 1, 1, 0, 1, 0, 0];
+export const Dotm3x3_21 = createGlyphSpin3Component('Dotm3x3_21', PLAY_GLYPH);

package/dist/components/ui/dot-matrix/dotm-3x3-3.d.ts

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

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

@@ -0,0 +1,3 @@
+'use client';
+import { createDiagonalWave3Component } from '../../../lib/dotmatrix-core.js';
+export const Dotm3x3_3 = createDiagonalWave3Component('Dotm3x3_3', 'tl-br');

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

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

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

@@ -0,0 +1,3 @@
+'use client';
+import { createDiagonalWave3Component } from '../../../lib/dotmatrix-core.js';
+export const Dotm3x3_4 = createDiagonalWave3Component('Dotm3x3_4', 'br-tl');

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

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

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

@@ -0,0 +1,3 @@
+'use client';
+import { createDiagonalWave3Component } from '../../../lib/dotmatrix-core.js';
+export const Dotm3x3_5 = createDiagonalWave3Component('Dotm3x3_5', 'bl-tr');

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

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

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

@@ -0,0 +1,19 @@
+'use client';
+import { createDotm3x3Component } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, manhattanDistance, reducedMotion, phase, }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const ring = Math.max(0, Math.min(2, manhattanDistance));
+    const style = { '--dmx-center-ripple-ring': ring };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: 0.06 + (1 - ring / 2) * 0.82,
+            },
+        };
+    }
+    return { className: 'dmx-center-ripple-3', style };
+};
+export const Dotm3x3_6 = createDotm3x3Component('Dotm3x3_6', animationResolver, 1.75);

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

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

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

@@ -0,0 +1,19 @@
+'use client';
+import { colWave3NormFromCol, createDotm3x3Component, wave3PathOpacityFromNorm, } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, col, reducedMotion, phase }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const path = colWave3NormFromCol(col);
+    const style = { '--dmx-path': path };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: wave3PathOpacityFromNorm(path),
+            },
+        };
+    }
+    return { className: 'dmx-path-3', style };
+};
+export const Dotm3x3_7 = createDotm3x3Component('Dotm3x3_7', animationResolver, 1.75);

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

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

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

@@ -0,0 +1,19 @@
+'use client';
+import { createDotm3x3Component, rowWave3NormFromRow, wave3PathOpacityFromNorm, } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, row, reducedMotion, phase }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const path = rowWave3NormFromRow(row);
+    const style = { '--dmx-path': path };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: wave3PathOpacityFromNorm(path),
+            },
+        };
+    }
+    return { className: 'dmx-path-3', style };
+};
+export const Dotm3x3_8 = createDotm3x3Component('Dotm3x3_8', animationResolver, 1.75);

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

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

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

@@ -0,0 +1,23 @@
+'use client';
+import { createDotm3x3Component, snakePath3NormFromIndex, snakePath3OrderValue, wave3PathOpacityFromNorm, } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, index, reducedMotion, phase }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const order = snakePath3OrderValue(index);
+    const path = snakePath3NormFromIndex(index);
+    const style = {
+        '--dmx-snake-order': order,
+        '--dmx-path': path,
+    };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: wave3PathOpacityFromNorm(path),
+            },
+        };
+    }
+    return { className: 'dmx-snake-path-3', style };
+};
+export const Dotm3x3_9 = createDotm3x3Component('Dotm3x3_9', animationResolver, 1.75);

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

@@ -0,0 +1,4 @@
+export declare const DotmCircular1: {
+    ({ 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-1.js

@@ -0,0 +1,28 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } 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(animPhase, reducedMotion) {
+    return ({ row, col, phase }) => {
+        if (!isWithinCircularMask(row, col)) {
+            return { className: 'dmx-inactive' };
+        }
+        const t = reducedMotion || phase === 'idle' ? 0 : animPhase * STEP_COUNT;
+        const diagonalAxis = row + col;
+        const phaseOffset = t * HELIX_LOOP_RADIANS + diagonalAxis * 0.82;
+        const strandPerpendicular = Math.round(2 * Math.sin(phaseOffset));
+        const cellPerpendicular = col - row;
+        const distanceFromStrand = Math.abs(cellPerpendicular - strandPerpendicular);
+        if (distanceFromStrand === 0) {
+            return { style: { opacity: STRAND_OPACITY } };
+        }
+        if (distanceFromStrand === 1) {
+            return { style: { opacity: NEAR_STRAND_OPACITY } };
+        }
+        return { style: { opacity: BASE_OPACITY } };
+    };
+}
+export const DotmCircular1 = createDotm5x5Component('DotmCircular1', makeResolver, { speed: 2.5, lockedPattern: 'full', cycleMsBase: 1700 });

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

@@ -0,0 +1,4 @@
+export declare const DotmCircular10: {
+    ({ 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-10.js

@@ -0,0 +1,40 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } from '../../../lib/dotmatrix-core.js';
+const STEP_COUNT = 30;
+const BASE_OPACITY = 0.06;
+const LOW_OPACITY = 0.2;
+const MID_OPACITY = 0.48;
+const HIGH_OPACITY = 0.94;
+function moduloDistance(a, b, mod) {
+    const raw = Math.abs(a - b);
+    return Math.min(raw, mod - raw);
+}
+function makeResolver(animPhase, reducedMotion) {
+    return ({ row, col, phase }) => {
+        if (!isWithinCircularMask(row, col)) {
+            return { className: 'dmx-inactive' };
+        }
+        const x = col - 2;
+        const y = row - 2;
+        const ring = Math.round(Math.sqrt(x * x + y * y));
+        const tick = reducedMotion || phase === 'idle' ? 0 : Math.floor(animPhase * 10);
+        const cellCode = (row * 3 + col * 5 + ring * 2) % 10;
+        const d = moduloDistance(cellCode, tick, 10);
+        const parityGate = (row + col + tick) % 2 === 0;
+        let opacity = BASE_OPACITY;
+        if (d === 0) {
+            opacity = HIGH_OPACITY;
+        }
+        else if (d === 1) {
+            opacity = MID_OPACITY;
+        }
+        else if (d === 2 || parityGate) {
+            opacity = LOW_OPACITY;
+        }
+        if (x === 0 && y === 0) {
+            return { style: { opacity: Math.max(opacity, MID_OPACITY) } };
+        }
+        return { style: { opacity } };
+    };
+}
+export const DotmCircular10 = createDotm5x5Component('DotmCircular10', makeResolver, { speed: 1.75, lockedPattern: 'full', cycleMsBase: 1600 });

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

@@ -0,0 +1,4 @@
+export declare const DotmCircular11: {
+    ({ 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-11.js

@@ -0,0 +1,37 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.07;
+const MID_OPACITY = 0.3;
+const HIGH_OPACITY = 0.95;
+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 ring = Math.sqrt(x * x + y * y);
+        const t = reducedMotion || p === 'idle' ? 0 : phase * Math.PI * 2;
+        const angle = Math.atan2(y, x);
+        const moonCenterX = Math.cos(t) * 0.7;
+        const moonCenterY = Math.sin(t) * 0.7;
+        const body = Math.hypot(x - moonCenterX, y - moonCenterY);
+        const cutCenterX = moonCenterX + Math.cos(t) * 0.82;
+        const cutCenterY = moonCenterY + Math.sin(t) * 0.82;
+        const cut = Math.hypot(x - cutCenterX, y - cutCenterY);
+        const rim = Math.max(0, 1 - Math.abs(body - 1.55) / 0.35);
+        const halo = Math.max(0, 1 - Math.acos(Math.cos(angle - t)) / 0.9);
+        let opacity = BASE_OPACITY;
+        if (body < 1.55 && cut > 1.05) {
+            opacity = HIGH_OPACITY;
+        }
+        else if (rim > 0.5) {
+            opacity = MID_OPACITY + rim * 0.22;
+        }
+        else if (halo > 0.68 && ring > 1.2) {
+            opacity = MID_OPACITY;
+        }
+        return { style: { opacity: Math.min(HIGH_OPACITY, opacity) } };
+    };
+}
+export const DotmCircular11 = createDotm5x5Component('DotmCircular11', makeResolver, { speed: 1.65, lockedPattern: 'full', cycleMsBase: 1850 });

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

@@ -0,0 +1,4 @@
+export declare const DotmCircular12: {
+    ({ 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-12.js

@@ -0,0 +1,42 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } from '../../../lib/dotmatrix-core.js';
+const STEP_COUNT = 36;
+const BASE_OPACITY = 0.06;
+const MID_OPACITY = 0.3;
+const ARC_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 stepBand = Math.floor((step / STEP_COUNT) * 8) % 8;
+        const targetAngle = stepBand * (Math.PI / 4);
+        const angleDelta = Math.acos(Math.cos(angle - targetAngle));
+        const beam = Math.max(0, 1 - angleDelta / 0.42);
+        const oppositeBeam = Math.max(0, 1 - Math.acos(Math.cos(angle - (targetAngle + Math.PI))) / 0.62);
+        const spokePulse = Math.max(0, 1 - Math.abs(Math.abs(x) - Math.abs(y)) / 0.35);
+        const ringTier = ring < 1 ? 0 : ring < 2 ? 1 : 2;
+        let opacity = BASE_OPACITY;
+        if (beam > 0.78 && ringTier >= 1) {
+            opacity = ARC_OPACITY;
+        }
+        else if (beam > 0.48) {
+            opacity = 0.62;
+        }
+        else if (oppositeBeam > 0.52 && ringTier === 2) {
+            opacity = MID_OPACITY;
+        }
+        else if (spokePulse > 0.9 && ringTier > 0) {
+            opacity = MID_OPACITY;
+        }
+        if (x === 0 && y === 0) {
+            return { style: { opacity: Math.max(opacity, 0.26) } };
+        }
+        return { style: { opacity } };
+    };
+}
+export const DotmCircular12 = createDotm5x5Component('DotmCircular12', makeResolver, { speed: 1.7, lockedPattern: 'full', cycleMsBase: 1700, steps: STEP_COUNT });

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

@@ -0,0 +1,4 @@
+export declare const DotmCircular14: {
+    ({ 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-14.js

@@ -0,0 +1,37 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } from '../../../lib/dotmatrix-core.js';
+const STEP_COUNT = 30;
+const BASE_OPACITY = 0.07;
+const RUNG_OPACITY = 0.95;
+const SIDE_OPACITY = 0.56;
+const GHOST_OPACITY = 0.28;
+function makeResolver(animPhase, reducedMotion) {
+    return ({ row, col, phase }) => {
+        if (!isWithinCircularMask(row, col)) {
+            return { className: 'dmx-inactive' };
+        }
+        const x = col - 2;
+        const y = row - 2;
+        const phaseStep = reducedMotion || phase === 'idle' ? 0 : Math.floor(animPhase * 10);
+        const activeRow = (phaseStep + 5) % 5;
+        const rowDistance = Math.abs(row - activeRow);
+        const swing = Math.sin((phaseStep / 10) * Math.PI * 2 + y * 0.9);
+        const leftAnchor = Math.round(1 + swing);
+        const rightAnchor = 4 - leftAnchor;
+        let opacity = BASE_OPACITY;
+        if (row === activeRow && col >= leftAnchor && col <= rightAnchor) {
+            opacity = RUNG_OPACITY;
+        }
+        else if ((col === leftAnchor || col === rightAnchor) && rowDistance <= 1) {
+            opacity = SIDE_OPACITY;
+        }
+        else if ((col === leftAnchor || col === rightAnchor) && rowDistance === 2) {
+            opacity = GHOST_OPACITY;
+        }
+        if (x === 0 && y === 0 && rowDistance <= 1) {
+            return { style: { opacity: Math.max(opacity, SIDE_OPACITY) } };
+        }
+        return { style: { opacity } };
+    };
+}
+export const DotmCircular14 = createDotm5x5Component('DotmCircular14', makeResolver, { speed: 1.75, lockedPattern: 'full', cycleMsBase: 1650 });

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

@@ -0,0 +1,4 @@
+export declare const DotmCircular15: {
+    ({ 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-15.js

@@ -0,0 +1,49 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } from '../../../lib/dotmatrix-core.js';
+const STEP_COUNT = 24;
+const BASE_OPACITY = 0.07;
+const MID_OPACITY = 0.34;
+const HIGH_OPACITY = 0.95;
+const BRAILLE_PHASES = [
+    new Set(['1,1', '2,1', '3,1', '1,3', '2,3', '3,3']), // rails
+    new Set(['1,1', '2,1', '3,1', '2,2', '1,3', '2,3', '3,3']), // center bridge
+    new Set(['1,1', '1,2', '1,3', '2,1', '2,3', '3,1', '3,2', '3,3']), // top+bottom bars
+    new Set(['1,1', '3,1', '2,2', '1,3', '3,3']), // X-cross
+    new Set(['2,1', '1,2', '3,2', '2,3']), // plus motif
+    new Set(['1,1', '2,1', '2,2', '2,3', '3,3']), // diagonal sweep
+];
+function makeResolver(animPhase, 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 count = BRAILLE_PHASES.length;
+        const phaseIndex = reducedMotion || phase === 'idle'
+            ? 0
+            : (() => {
+                const t = Number.isFinite(animPhase) ? animPhase : 0;
+                const raw = Math.floor(t * count);
+                return ((raw % count) + count) % count;
+            })();
+        const activePattern = BRAILLE_PHASES[phaseIndex];
+        const key = `${row},${col}`;
+        const inPattern = activePattern.has(key);
+        const previousIndex = (phaseIndex + BRAILLE_PHASES.length - 1) % BRAILLE_PHASES.length;
+        const inPrevPattern = BRAILLE_PHASES[previousIndex].has(key);
+        let opacity = BASE_OPACITY;
+        if (inPattern) {
+            opacity = HIGH_OPACITY;
+        }
+        else if (inPrevPattern) {
+            opacity = MID_OPACITY;
+        }
+        else if (ring < 1.1) {
+            opacity = 0.2;
+        }
+        return { style: { opacity } };
+    };
+}
+export const DotmCircular15 = createDotm5x5Component('DotmCircular15', makeResolver, { speed: 1.65, lockedPattern: 'full', cycleMsBase: 1680 });

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

@@ -0,0 +1,4 @@
+export declare const DotmCircular17: {
+    ({ 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-17.js

@@ -0,0 +1,31 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.07;
+const MID_OPACITY = 0.34;
+const HIGH_OPACITY = 0.95;
+/** Discrete checker frames per loop (must stay integer for `(row + col + t) % 2`). */
+const CHECKER_STEPS = 4;
+function makeResolver(animPhase, reducedMotion) {
+    return ({ row, col, phase: dmxPhase }) => {
+        if (!isWithinCircularMask(row, col)) {
+            return { className: 'dmx-inactive' };
+        }
+        const holdStill = reducedMotion || dmxPhase === 'idle';
+        const t = holdStill ? 0 : Math.floor(animPhase * CHECKER_STEPS) % CHECKER_STEPS;
+        const parity = (row + col + t) % 2;
+        const brailleBias = col === 1 || col === 3;
+        const centerBias = row === 2 || col === 2;
+        let opacity = BASE_OPACITY;
+        if (parity === 0 && brailleBias) {
+            opacity = HIGH_OPACITY;
+        }
+        else if (parity === 0 || centerBias) {
+            opacity = MID_OPACITY;
+        }
+        else if (brailleBias) {
+            opacity = 0.24;
+        }
+        return { style: { opacity } };
+    };
+}
+export const DotmCircular17 = createDotm5x5Component('DotmCircular17', makeResolver, { speed: 1.55, lockedPattern: 'full', cycleMsBase: 1500 });

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

@@ -0,0 +1,4 @@
+export declare const DotmCircular2: {
+    ({ 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-2.js

@@ -0,0 +1,37 @@
+'use client';
+import { createDotm5x5Component, isWithinCircularMask, rowMajorIndex } from '../../../lib/dotmatrix-core.js';
+const 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 = RING_PATH.length;
+const BASE_OPACITY = 0.08;
+function makeResolver(_cycle, reducedMotion) {
+    return ({ index, row, col, phase }) => {
+        if (!isWithinCircularMask(row, col)) {
+            return { className: 'dmx-inactive' };
+        }
+        const onRing = RING_PATH.indexOf(index);
+        if (onRing === -1) {
+            return { style: { opacity: row === 2 && col === 2 ? 0.18 : BASE_OPACITY } };
+        }
+        if (reducedMotion || phase === 'idle') {
+            return { style: { opacity: 0.28 + (onRing / (LOOP_LEN - 1)) * 0.58 } };
+        }
+        return {
+            className: 'dmx-circular2-ring',
+            style: { '--dmx-ring-order': onRing },
+        };
+    };
+}
+export const DotmCircular2 = createDotm5x5Component('DotmCircular2', makeResolver, { speed: 1.8, lockedPattern: 'full' });

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

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