/** * Type surface for the DotMatrix primitive. * * DotMatrix is a pattern-driven rows×cols grid inspired by the * 3-pixel-grid concept (MetaHeavies). A `pattern` generates per-cell * delays; the engine runs a continuous cycle (fade-in staggered → * hold → fade-out staggered → hold-off → repeat) so the matrix reads * as a living indicator. * * `status` is a *lifecycle event* — not a variant. It captures the * cycle where it is: * - `running` → cycle plays (default) * - `idle` → cycle paused, all cells off * - `success` → cycle stopped, all cells forced on * - `failed` → cycle frozen; ON cells → destructive, OFF cells * stay as cancelled-muted * - `cancelled`→ cycle frozen; ON cells fade to muted * * Colour + bloom + accent overlays are orthogonal. * * @module @mks2508/mks-ui/react/primitives/DotMatrix */ import type { SlotOverrides } from '../../../core/types'; import type { DotMatrixPattern } from './patterns'; export type { DotMatrixPattern } from './patterns'; /** Lifecycle status. Applied as a CSS data-attr on the root. */ export type DotMatrixStatus = 'idle' | 'running' | 'success' | 'failed' | 'cancelled'; /** * Colour palette. `foreground` / `primary` / `destructive` / `warning` * map to theme tokens (mks-ui RULE 0). The others are opinionated * neon/industrial hues ported from 3-pixel-grid in OKLCH for contrast * stability across themes. */ export type DotMatrixColor = 'foreground' | 'primary' | 'destructive' | 'warning' | 'cyan' | 'magenta' | 'yellow' | 'green' | 'orange' | 'blue' | 'red' | 'purple' | 'teal' | 'pink' | 'lime' | 'white'; /** Where accent highlights live. */ export type DotMatrixAccentRow = 'top' | 'bottom' | 'both'; /** Slots consumers can override with className overrides. */ export type DotMatrixSlot = 'root' | 'cell'; /** Visual variant. `glow` adds a soft box-shadow on ON cells. */ export type DotMatrixVariant = 'solid' | 'glow'; /** * @deprecated Superseded by the progressive-fill model. Kept as an empty * alias so older call sites compile; the prop is no longer read. */ export type DotMatrixSweepStyle = 'stepped' | 'wave' | 'trail' | 'pulse'; export interface IDotMatrixProps { /** Rows. Default: 6. */ rows?: number; /** Cols. Default: 18. */ cols?: number; /** Pattern name that determines per-cell delay distribution. */ pattern?: DotMatrixPattern; /** Milliseconds per cell during the fill sweep. Default: 120. */ patternStep?: number; /** * Steps the grid stays fully lit after the fill completes, before * the reset. Larger values give a longer "fully loaded" pause. * Default: 6. */ holdSteps?: number; /** * Empty steps between the reset and the next fill (silence period). * Default: 4. */ restSteps?: number; /** * How sharp the transition is when a cell's threshold is crossed. * Higher = crisper snap. 50 is nearly-stepped with a tiny * anti-aliased edge; 5-10 gives a warm fade-in that overlaps across * neighbouring cells. Default: 50. */ edgeSharpness?: number; /** @deprecated Replaced by the progressive-fill model. No longer read. */ sweepStyle?: DotMatrixSweepStyle; /** @deprecated Replaced by the progressive-fill model. No longer read. */ patternHold?: number; /** * External progress in 0..1. When provided, freezes the internal * fill animation and drives `--dm-phase` directly from this value * — cells light up exactly up to the threshold. Useful for real * progress indicators (file transfers, loading bars) where the * matrix should reflect a known percentage rather than cycling. */ progress?: number; /** Lifecycle status. Default: `running`. */ status?: DotMatrixStatus; /** Palette colour. Default: `foreground`. */ color?: DotMatrixColor; /** * Enable the bloom SVG filter. `true` uses the default intensity (4), * a number sets the blur radius. */ bloom?: boolean | number; /** Visual variant. Default: `solid`. */ variant?: DotMatrixVariant; /** Number of accent cells highlighted (e.g. "3 new commits"). Default: 0. */ accentCount?: number; /** Where accent cells sit. Default: `top`. */ accentRow?: DotMatrixAccentRow; /** Explicit accent positions — overrides `accentCount` / `accentRow`. */ accentPositions?: ReadonlyArray; /** Per-slot className overrides. */ slots?: SlotOverrides; /** Extra className for the root grid container. */ className?: string; /** aria-label for the decorative grid. */ 'aria-label'?: string; } //# sourceMappingURL=DotMatrix.types.d.ts.map