@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

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

@@ -0,0 +1,29 @@
+'use client';
+import { createDotm5x5Component } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.08;
+const LIT_OPACITY = 0.94;
+const CAP_OPACITY = 1;
+const STEP_COUNT = 24;
+const MAX_LEVEL = 5;
+function clampLevel(value) {
+    return Math.max(1, Math.min(MAX_LEVEL, Math.round(value)));
+}
+function makeResolver(cycle, reducedMotion) {
+    return ({ isActive, row, col, phase }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        const t = reducedMotion || phase === 'idle' ? 0 : cycle * STEP_COUNT;
+        const colPhase = t * 0.52 + col * 1.15;
+        const level = clampLevel(1 + ((Math.sin(colPhase) + 1) / 2) * (MAX_LEVEL - 1));
+        const topLitRow = MAX_LEVEL - level;
+        if (row > topLitRow) {
+            return { style: { opacity: LIT_OPACITY } };
+        }
+        if (row === topLitRow) {
+            return { style: { opacity: CAP_OPACITY } };
+        }
+        return { style: { opacity: BASE_OPACITY } };
+    };
+}
+export const DotmSquare18 = createDotm5x5Component('DotmSquare18', makeResolver, { speed: 1.35, cycleMsBase: 1750 });

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

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

@@ -0,0 +1,74 @@
+'use client';
+import { createDotm5x5Component } from '../../../lib/dotmatrix-core.js';
+const STEP_COUNT = 48;
+const BASE_OPACITY = 0.08;
+const SECONDARY_TRAIL_OPACITY = 0.32;
+const PRIMARY_TRAIL_OPACITY = 0.62;
+const PEAK_OPACITY = 1;
+const CURVE_OPACITY = 0.2;
+const CURVE_SAMPLES = Array.from({ length: 96 }, (_, index) => {
+    const t = (index / 96) * Math.PI * 2;
+    return {
+        x: Math.sin(t),
+        y: 0.58 * Math.sin(2 * t),
+    };
+});
+function gridPoint(row, col) {
+    return {
+        x: (col - 2) / 2,
+        y: (2 - row) / 2,
+    };
+}
+function loopPoint(step) {
+    const t = ((step % STEP_COUNT) / STEP_COUNT) * Math.PI * 2;
+    return {
+        x: Math.sin(t),
+        y: 0.58 * Math.sin(2 * t),
+    };
+}
+function squaredDistance(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+    return dx * dx + dy * dy;
+}
+function minCurveDistanceSq(point) {
+    let min = Number.POSITIVE_INFINITY;
+    for (const sample of CURVE_SAMPLES) {
+        min = Math.min(min, squaredDistance(point, sample));
+    }
+    return min;
+}
+function headInfluence(dot, head) {
+    const distSq = squaredDistance(dot, head);
+    return Math.exp(-distSq / 0.19);
+}
+function makeResolver(cycle, reducedMotion) {
+    return ({ isActive, row, col, phase }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        const dot = gridPoint(row, col);
+        if (reducedMotion || phase === 'idle') {
+            const curveGlow = Math.exp(-minCurveDistanceSq(dot) / 0.2);
+            const centerBoost = Math.exp(-(dot.x * dot.x + dot.y * dot.y) / 0.06);
+            return {
+                style: {
+                    opacity: Math.min(PEAK_OPACITY, BASE_OPACITY + curveGlow * CURVE_OPACITY + centerBoost * 0.18),
+                },
+            };
+        }
+        const headA = loopPoint(cycle);
+        const headB = loopPoint(cycle + STEP_COUNT / 2);
+        const trailA = loopPoint(cycle - 4);
+        const trailB = loopPoint(cycle + STEP_COUNT / 2 - 4);
+        const lead = Math.max(headInfluence(dot, headA), headInfluence(dot, headB));
+        const trail = Math.max(headInfluence(dot, trailA), headInfluence(dot, trailB));
+        const centerPulse = Math.exp(-(dot.x * dot.x + dot.y * dot.y) / 0.05) * (0.45 + 0.55 * lead);
+        const opacity = BASE_OPACITY +
+            SECONDARY_TRAIL_OPACITY * trail +
+            PRIMARY_TRAIL_OPACITY * lead +
+            0.16 * centerPulse;
+        return { style: { opacity: Math.min(PEAK_OPACITY, opacity) } };
+    };
+}
+export const DotmSquare19 = createDotm5x5Component('DotmSquare19', makeResolver, { speed: 1.45, cycleMsBase: 1700, steps: STEP_COUNT });

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

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

@@ -0,0 +1,72 @@
+'use client';
+import { createDotm5x5Component, rowMajorIndex } from '../../../lib/dotmatrix-core.js';
+const SNAKE_TAIL = [1, 0.82, 0.68, 0.54, 0.42, 0.31, 0.22, 0.14];
+const BASE_OPACITY = 0.08;
+function buildRowCyclePath() {
+    const path = [];
+    const push = (row, col) => path.push(rowMajorIndex(row, col));
+    // 1st col: bottom -> top
+    for (let row = 4; row >= 0; row -= 1)
+        push(row, 0);
+    // top to 3rd col
+    push(0, 1);
+    push(0, 2);
+    // 3rd col: top -> bottom
+    for (let row = 1; row <= 4; row += 1)
+        push(row, 2);
+    // bottom left to 2nd col
+    push(4, 1);
+    // 2nd col: bottom -> top
+    for (let row = 3; row >= 0; row -= 1)
+        push(row, 1);
+    // top right to 4th col
+    push(0, 2);
+    push(0, 3);
+    // 4th col: top -> bottom
+    for (let row = 1; row <= 4; row += 1)
+        push(row, 3);
+    // bottom left to 3rd col
+    push(4, 2);
+    // 3rd col: bottom -> top
+    for (let row = 3; row >= 0; row -= 1)
+        push(row, 2);
+    // top right to 5th col
+    push(0, 3);
+    push(0, 4);
+    // 5th col: top -> bottom
+    for (let row = 1; row <= 4; row += 1)
+        push(row, 4);
+    return path;
+}
+const route = buildRowCyclePath();
+const routeLen = route.length;
+const visitsByIndex = (() => {
+    const visits = new Map();
+    for (let step = 0; step < routeLen; step += 1) {
+        const index = route[step];
+        const list = visits.get(index) ?? [];
+        list.push(step);
+        visits.set(index, list);
+    }
+    return visits;
+})();
+function makeResolver(cycle) {
+    return ({ isActive, index }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        if (routeLen <= 0) {
+            return { style: { opacity: BASE_OPACITY } };
+        }
+        const visits = visitsByIndex.get(index) ?? [];
+        let opacity = BASE_OPACITY;
+        for (const stepIndex of visits) {
+            const distance = (cycle - stepIndex + routeLen) % routeLen;
+            if (distance >= 0 && distance < SNAKE_TAIL.length) {
+                opacity = Math.max(opacity, SNAKE_TAIL[distance]);
+            }
+        }
+        return { style: { opacity } };
+    };
+}
+export const DotmSquare2 = createDotm5x5Component('DotmSquare2', makeResolver, { speed: 1.15, cycleMsBase: 1500, steps: routeLen });

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

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

@@ -0,0 +1,79 @@
+'use client';
+import { createDotm5x5Component, rowMajorIndex } from '../../../lib/dotmatrix-core.js';
+/** Clockwise perimeter: one closed loop you can trace with your eye. */
+const PERIMETER_PATH = [
+    rowMajorIndex(0, 0),
+    rowMajorIndex(0, 1),
+    rowMajorIndex(0, 2),
+    rowMajorIndex(0, 3),
+    rowMajorIndex(0, 4),
+    rowMajorIndex(1, 4),
+    rowMajorIndex(2, 4),
+    rowMajorIndex(3, 4),
+    rowMajorIndex(4, 4),
+    rowMajorIndex(4, 3),
+    rowMajorIndex(4, 2),
+    rowMajorIndex(4, 1),
+    rowMajorIndex(4, 0),
+    rowMajorIndex(3, 0),
+    rowMajorIndex(2, 0),
+    rowMajorIndex(1, 0),
+];
+const LOOP_LEN = PERIMETER_PATH.length;
+const TAIL_BRIGHT = [1, 0.82, 0.64, 0.46, 0.3, 0.18];
+const BACK_TAIL_BRIGHT = [0.38, 0.3, 0.22, 0.14];
+const BASE_OPACITY = 0.08;
+const TWIST_INNER_OPACITY = 0.52;
+const SEAM_PULSE_OPACITY = 0.55;
+const IDLE_RING_OPACITY = 0.48;
+/** Corner steps on the loop → one cell “inside” the strip at the fold (half-twist cue). */
+const TWIST_INNER_BY_HEAD_STEP = new Map([
+    [0, rowMajorIndex(1, 1)],
+    [4, rowMajorIndex(1, 3)],
+    [8, rowMajorIndex(3, 3)],
+    [12, rowMajorIndex(3, 1)],
+]);
+function pathStepForCellIndex(cellIndex) {
+    const step = PERIMETER_PATH.indexOf(cellIndex);
+    return step;
+}
+function opacityFromTail(distance, tail) {
+    if (distance < 0 || distance >= tail.length) {
+        return 0;
+    }
+    return tail[distance];
+}
+function makeResolver(cycle, reducedMotion) {
+    return ({ isActive, index, phase }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        const onLoop = pathStepForCellIndex(index);
+        const backHead = (cycle + Math.floor(LOOP_LEN / 2)) % LOOP_LEN;
+        if (reducedMotion || phase === 'idle') {
+            if (onLoop >= 0) {
+                return { style: { opacity: IDLE_RING_OPACITY } };
+            }
+            if (index === rowMajorIndex(2, 2)) {
+                return { style: { opacity: 0.22 } };
+            }
+            return { style: { opacity: BASE_OPACITY } };
+        }
+        let opacity = BASE_OPACITY;
+        if (onLoop >= 0) {
+            const forward = (cycle - onLoop + LOOP_LEN) % LOOP_LEN;
+            const alongBack = (backHead - onLoop + LOOP_LEN) % LOOP_LEN;
+            opacity = Math.max(opacity, opacityFromTail(forward, TAIL_BRIGHT), opacityFromTail(alongBack, BACK_TAIL_BRIGHT));
+        }
+        const twistInner = TWIST_INNER_BY_HEAD_STEP.get(cycle);
+        if (twistInner === index) {
+            opacity = Math.max(opacity, TWIST_INNER_OPACITY);
+        }
+        const seam = rowMajorIndex(2, 2);
+        if (index === seam && cycle % 4 === 0) {
+            opacity = Math.max(opacity, SEAM_PULSE_OPACITY);
+        }
+        return { style: { opacity: Math.min(1, opacity) } };
+    };
+}
+export const DotmSquare20 = createDotm5x5Component('DotmSquare20', makeResolver, { speed: 1.45, cycleMsBase: 1600, steps: LOOP_LEN });

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

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

@@ -0,0 +1,23 @@
+'use client';
+import { createDotm5x5Component, spiralInwardNormFromIndex, spiralInwardOrderValue, } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, index, reducedMotion, phase }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const order = spiralInwardOrderValue(index);
+    const pathNorm = spiralInwardNormFromIndex(index);
+    const style = { '--dmx-spiral-order': order };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: 0.16 + pathNorm * 0.78,
+            },
+        };
+    }
+    return { className: 'dmx-spiral-snake', style };
+};
+function makeResolver() {
+    return animationResolver;
+}
+export const DotmSquare3 = createDotm5x5Component('DotmSquare3', makeResolver, { speed: 1.35 });

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

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

@@ -0,0 +1,41 @@
+'use client';
+import { createDotm5x5Component, middleRingAntiClockwiseNormFromIndex, middleRingAntiClockwiseOrderValue, outerRingClockwiseNormFromIndex, outerRingClockwiseOrderValue, } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, index, row, col, reducedMotion, phase, }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const isCenter = row === 2 && col === 2;
+    if (isCenter) {
+        return { className: 'dmx-inactive' };
+    }
+    const outerOrder = outerRingClockwiseOrderValue(index);
+    if (outerOrder >= 0) {
+        const outerNorm = outerRingClockwiseNormFromIndex(index);
+        const style = { '--dmx-outer-order': outerOrder };
+        if (reducedMotion || phase === 'idle') {
+            return {
+                style: {
+                    ...style,
+                    opacity: 0.2 + outerNorm * 0.72,
+                },
+            };
+        }
+        return { className: 'dmx-outer-snake', style };
+    }
+    const middleOrder = middleRingAntiClockwiseOrderValue(index);
+    const middleNorm = middleRingAntiClockwiseNormFromIndex(index);
+    const style = { '--dmx-middle-order': middleOrder };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: 0.2 + middleNorm * 0.72,
+            },
+        };
+    }
+    return { className: 'dmx-middle-snake', style };
+};
+function makeResolver() {
+    return animationResolver;
+}
+export const DotmSquare4 = createDotm5x5Component('DotmSquare4', makeResolver, { speed: 1.35 });

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

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

@@ -0,0 +1,23 @@
+'use client';
+import { diagonalSnakeNormFromIndex, diagonalSnakeOrderValue, createDotm5x5Component, } from '../../../lib/dotmatrix-core.js';
+const animationResolver = ({ isActive, index, reducedMotion, phase }) => {
+    if (!isActive) {
+        return { className: 'dmx-inactive' };
+    }
+    const order = diagonalSnakeOrderValue(index);
+    const pathNorm = diagonalSnakeNormFromIndex(index);
+    const style = { '--dmx-diagonal-snake-order': order };
+    if (reducedMotion || phase === 'idle') {
+        return {
+            style: {
+                ...style,
+                opacity: 0.16 + pathNorm * 0.78,
+            },
+        };
+    }
+    return { className: 'dmx-diagonal-snake', style };
+};
+function makeResolver() {
+    return animationResolver;
+}
+export const DotmSquare5 = createDotm5x5Component('DotmSquare5', makeResolver, { speed: 1.35 });

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

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

@@ -0,0 +1,20 @@
+'use client';
+import { createDotm5x5Component } from '../../../lib/dotmatrix-core.js';
+const COLUMN_HEIGHT = 5;
+function makeResolver(_cycle, reducedMotion) {
+    return ({ isActive, row, col, phase }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        const goesUp = col % 2 === 0;
+        const position = goesUp ? COLUMN_HEIGHT - 1 - row : row;
+        if (reducedMotion || phase === 'idle') {
+            return { style: { opacity: 0.22 + (position / (COLUMN_HEIGHT - 1)) * 0.66 } };
+        }
+        return {
+            className: 'dmx-square6-col-snake',
+            style: { '--dmx-col-pos': position },
+        };
+    };
+}
+export const DotmSquare6 = createDotm5x5Component('DotmSquare6', makeResolver, { speed: 2.2 });

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

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

@@ -0,0 +1,43 @@
+'use client';
+import { createDotm5x5Component, rowMajorIndex } from '../../../lib/dotmatrix-core.js';
+const BASE_OPACITY = 0.08;
+const SETTLED_OPACITY = 0.42;
+const ACTIVE_OPACITY = 1;
+const CLEAR_OPACITY = 0.88;
+const IDLE_STEP = 10;
+const FRAME_MASKS = [
+    '.....' + '.....' + '.....' + '.....' + 'ooooo',
+    '.....' + '.....' + '.....' + 'ooooo' + 'ooooo',
+    '.....' + '.....' + 'ooooo' + 'ooooo' + 'ooooo',
+    '.....' + 'ooooo' + 'ooooo' + 'ooooo' + 'ooooo',
+    'ooooo' + 'ooooo' + 'ooooo' + 'ooooo' + 'ooooo',
+    'ccccc' + 'ccccc' + 'ccccc' + 'ccccc' + 'ccccc',
+    '.....' + '.....' + '.....' + '.....' + '.....',
+    'ccccc' + 'ccccc' + 'ccccc' + 'ccccc' + 'ccccc',
+    '.....' + '.....' + '.....' + '.....' + '.....',
+    '.....' + '.....' + '.....' + '.....' + '.....',
+];
+const FRAME_SEQUENCE = [0, 1, 2, 3, 4, 4, 5, 6, 7, 8, 9];
+function maskCell(mask, row, col) {
+    return mask[rowMajorIndex(row, col)] ?? '.';
+}
+function makeResolver(cycle, reducedMotion) {
+    const frame = FRAME_SEQUENCE[cycle] ?? FRAME_SEQUENCE[0] ?? 0;
+    return ({ isActive, row, col }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        const cell = maskCell(FRAME_MASKS[frame], row, col);
+        if (cell === 'x') {
+            return { style: { opacity: ACTIVE_OPACITY } };
+        }
+        if (cell === 'o') {
+            return { style: { opacity: SETTLED_OPACITY } };
+        }
+        if (cell === 'c') {
+            return { style: { opacity: CLEAR_OPACITY } };
+        }
+        return { style: { opacity: BASE_OPACITY } };
+    };
+}
+export const DotmSquare7 = createDotm5x5Component('DotmSquare7', makeResolver, { speed: 1.35, cycleMsBase: 1900, steps: FRAME_SEQUENCE.length, idleStep: Math.min(IDLE_STEP, FRAME_SEQUENCE.length - 1) });

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

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

@@ -0,0 +1,57 @@
+'use client';
+import { createDotm5x5Component, MATRIX_SIZE } from '../../../lib/dotmatrix-core.js';
+const ROWS = MATRIX_SIZE;
+const COLS = MATRIX_SIZE;
+/** Steps 0..FILL_LAST: column `c` gains one row from the bottom each tick, delayed by `c` (col 0 full at `ROWS`, last col at `ROWS + COLS - 1`). */
+const FILL_LAST = ROWS + COLS - 1;
+const BLINK_STEPS = 4;
+const BLINK_OPACITIES = [0.38, 1, 0.38, 1];
+const DRAIN_LAST = FILL_LAST;
+/** fillTick 0..FILL_LAST → drainTick 0..DRAIN_LAST → + blink in between */
+const SEQUENCE_LEN = FILL_LAST + 1 + BLINK_STEPS + DRAIN_LAST + 1;
+const BASE_OPACITY = 0.08;
+const SETTLED_OPACITY = 0.52;
+const CAP_OPACITY = 1;
+function fillHeight(col, fillTick) {
+    return Math.max(0, Math.min(ROWS, fillTick - col));
+}
+function drainHeight(col, drainTick) {
+    return Math.max(0, Math.min(ROWS, ROWS - Math.max(0, drainTick - col)));
+}
+function makeResolver(cycle, reducedMotion) {
+    return ({ isActive, row, col, phase }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        if (reducedMotion || phase === 'idle') {
+            return { style: { opacity: BASE_OPACITY } };
+        }
+        let height = 0;
+        let blinkOpacity = null;
+        if (cycle <= FILL_LAST) {
+            height = fillHeight(col, cycle);
+        }
+        else if (cycle < FILL_LAST + 1 + BLINK_STEPS) {
+            height = ROWS;
+            blinkOpacity = BLINK_OPACITIES[cycle - (FILL_LAST + 1)] ?? 1;
+        }
+        else {
+            const drainTick = cycle - (FILL_LAST + 1 + BLINK_STEPS);
+            height = drainHeight(col, drainTick);
+        }
+        const bottomRow = ROWS - 1;
+        const topLitRow = ROWS - height;
+        const isLit = height > 0 && row >= topLitRow && row <= bottomRow;
+        if (!isLit) {
+            return { style: { opacity: BASE_OPACITY } };
+        }
+        if (blinkOpacity !== null) {
+            return { style: { opacity: blinkOpacity } };
+        }
+        const isCap = row === topLitRow && height > 0 && height < ROWS;
+        return {
+            style: { opacity: isCap ? CAP_OPACITY : SETTLED_OPACITY },
+        };
+    };
+}
+export const DotmSquare8 = createDotm5x5Component('DotmSquare8', makeResolver, { speed: 1.4, cycleMsBase: 2000, steps: SEQUENCE_LEN });

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

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

@@ -0,0 +1,89 @@
+'use client';
+import { createDotm5x5Component } from '../../../lib/dotmatrix-core.js';
+/**
+ * Dots 1–6 in Unicode / ISO braille numbering (matches U+2800 + mask):
+ *   1·4
+ *   2·5
+ *   3·6
+ */
+const D1 = 0x01;
+const D2 = 0x02;
+const D3 = 0x04;
+const D4 = 0x08;
+const D5 = 0x10;
+const D6 = 0x20;
+/** Left column “odd” / right column “even” — classic 2×3 checkerboard. */
+const CHECK_A = D1 | D3 | D5;
+const BASE_OPACITY = 0.08;
+const MID_OPACITY = 0.26;
+const GAP_OPACITY = 0.12;
+const CELL_ROW_START = 1;
+const LEFT_COL = 0;
+const RIGHT_CELL_COL = 3;
+function brailleBitForCell(row, col, cellColStart) {
+    if (row < CELL_ROW_START || row > CELL_ROW_START + 2) {
+        return null;
+    }
+    const dr = row - CELL_ROW_START;
+    if (col === cellColStart) {
+        return D1 << dr;
+    }
+    if (col === cellColStart + 1) {
+        return D4 << dr;
+    }
+    return null;
+}
+function resolveBraille(row, col) {
+    const left = brailleBitForCell(row, col, LEFT_COL);
+    if (left !== null) {
+        return { bit: left };
+    }
+    const right = brailleBitForCell(row, col, RIGHT_CELL_COL);
+    if (right !== null) {
+        return { bit: right };
+    }
+    return null;
+}
+function makeResolver(_cycle, reducedMotion) {
+    return ({ isActive, row, col, phase }) => {
+        if (!isActive) {
+            return { className: 'dmx-inactive' };
+        }
+        const braille = resolveBraille(row, col);
+        if (reducedMotion || phase === 'idle') {
+            if (braille) {
+                const mask = CHECK_A;
+                const on = (mask & braille.bit) !== 0;
+                return { style: { opacity: on ? MID_OPACITY : BASE_OPACITY } };
+            }
+            if (row >= CELL_ROW_START && row <= CELL_ROW_START + 2 && col === 2) {
+                return { style: { opacity: GAP_OPACITY } };
+            }
+            return { style: { opacity: BASE_OPACITY } };
+        }
+        if (row >= CELL_ROW_START && row <= CELL_ROW_START + 2 && col === 2) {
+            return { style: { opacity: GAP_OPACITY } };
+        }
+        if (!braille) {
+            return { style: { opacity: BASE_OPACITY } };
+        }
+        let bitClass = 'dmx-square9-d1';
+        if (braille.bit === D2) {
+            bitClass = 'dmx-square9-d2';
+        }
+        else if (braille.bit === D3) {
+            bitClass = 'dmx-square9-d3';
+        }
+        else if (braille.bit === D4) {
+            bitClass = 'dmx-square9-d4';
+        }
+        else if (braille.bit === D5) {
+            bitClass = 'dmx-square9-d5';
+        }
+        else if (braille.bit === D6) {
+            bitClass = 'dmx-square9-d6';
+        }
+        return { className: `dmx-square9-bit ${bitClass}` };
+    };
+}
+export const DotmSquare9 = createDotm5x5Component('DotmSquare9', makeResolver, { speed: 1.5 });

package/dist/components/ui/dot-matrix/session-dot-matrix.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The session-keyed dot-matrix picker.
+ *
+ * Every session gets its own busy-indicator animation: the session_id is
+ * hashed (FNV-1a) onto one of the variants below, so the choice is RANDOM
+ * ACROSS SESSIONS but STABLE WITHIN one — the same session shows the same
+ * matrix on every render, reload, and device, with no stored state and no
+ * `Math.random()`. A new session rolls a new glyph simply by having a new id.
+ *
+ * `DOT_MATRIX_CATALOG` is the curated set of variants: the 3x3, circular,
+ * and square families only — hex and triangle are intentionally out (they
+ * read poorly at the 14px busy-indicator size) and must not be added back.
+ * `/debug/dot-matrix` renders the full catalog; the live session pool is
+ * the catalog filtered to `SESSION_DOT_MATRIX_FAMILIES`. Order changes
+ * reshuffle which session gets which glyph (harmless — the mapping is
+ * cosmetic), but keep new entries APPENDED inside their family so existing
+ * sessions keep their glyph.
+ *
+ * `SessionDotMatrix` with no `sessionId` renders `DotmSquare14` — the
+ * pre-existing default — so session-less surfaces (the home demo, the debug
+ * harness) keep today's visual.
+ */
+import type { ComponentType } from 'react';
+import type { DotMatrixCommonProps } from '../../../lib/dotmatrix-core.js';
+export type DotMatrixFamily = '3x3' | 'circular' | 'square';
+export type DotMatrixCatalogEntry = {
+    name: string;
+    family: DotMatrixFamily;
+    Component: ComponentType<DotMatrixCommonProps>;
+};
+export declare const DOT_MATRIX_CATALOG: readonly DotMatrixCatalogEntry[];
+export declare const SESSION_DOT_MATRIX_FAMILIES: ReadonlySet<DotMatrixFamily>;
+export declare const SESSION_DOT_MATRIX_POOL: readonly DotMatrixCatalogEntry[];
+export declare const SESSION_DOT_MATRIX_VARIANTS: readonly ComponentType<DotMatrixCommonProps>[];
+/**
+ * FNV-1a over the session id, reduced onto the registry. Deterministic and
+ * dependency-free; `Math.imul` keeps the multiply in 32-bit space and
+ * `>>> 0` makes the result unsigned before the modulo.
+ */
+export declare function sessionDotMatrixIndex(sessionId: string): number;
+export type SessionDotMatrixProps = DotMatrixCommonProps & {
+    /** Picks the variant. Absent → `DotmSquare14`, the pre-existing default. */
+    sessionId?: string;
+};
+export declare function fiveByFiveDotSizeFor(size: number): number;
+export declare function SessionDotMatrix({ sessionId, ...props }: SessionDotMatrixProps): import("react").JSX.Element;