{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "all",
  "type": "registry:ui",
  "title": "All Dot Matrix Loaders",
  "description": "Installs every Dot Matrix loader and shared runtime files in one command.",
  "dependencies": [],
  "registryDependencies": [],
  "meta": {
    "animation": "css-only + optional motion"
  },
  "files": [
    {
      "path": "components/ui/dotm-square-1.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { trBlPathNormFromIndex } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare1Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, index, row, col, reducedMotion, phase }) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const path = trBlPathNormFromIndex(index);\n  const slice = row + (4 - col);\n  const parity = slice % 2;\n  const style = {\n    \"--dmx-path\": path,\n    \"--dmx-diagonal-parity\": parity\n  } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: parity === 0 ? 0.88 : 0.14\n      }\n    };\n  }\n\n  return { className: \"dmx-diagonal-alt-sweep\", style };\n};\n\nexport function DotmSquare1({\n  speed = 1.1,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare1Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={animationResolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotmatrix-core.tsx",
      "type": "registry:lib",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport \"@/components/dotmatrix-loader.css\";\nimport type { ReactNode } from \"react\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { useDotMatrixPhases, usePrefersReducedMotion, useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\n\nexport type MatrixPattern = \"diamond\" | \"full\" | \"outline\" | \"rose\" | \"cross\" | \"rings\";\nexport type DotShape = \"circle\" | \"square\" | \"diamond\" | \"hearts\";\nexport type DotMatrixPhase = \"idle\" | \"collapse\" | \"hoverRipple\" | \"loadingRipple\";\nexport type DotMatrixColorPreset =\n  | \"solid-theme\"\n  | \"solid-mint\"\n  | \"grad-sunset\"\n  | \"grad-ocean\"\n  | \"grad-neon\"\n  | \"grad-aurora\"\n  | \"grad-fire\"\n  | \"grad-prism\";\n\nconst DOT_MATRIX_COLOR_PRESETS: Record<\n  DotMatrixColorPreset,\n  {\n    fill: string;\n    glow: string;\n  }\n> = {\n  \"solid-theme\": {\n    fill: \"var(--color-dot-on)\",\n    glow: \"var(--color-dot-on)\"\n  },\n  \"solid-mint\": {\n    fill: \"#34d399\",\n    glow: \"#34d399\"\n  },\n  \"grad-sunset\": {\n    fill: \"linear-gradient(135deg, #ff5f6d 0%, #ffc371 52%, #ffe29a 100%)\",\n    glow: \"#ff8b73\"\n  },\n  \"grad-ocean\": {\n    fill: \"linear-gradient(140deg, #00c6ff 0%, #0072ff 48%, #4facfe 100%)\",\n    glow: \"#2f8fff\"\n  },\n  \"grad-neon\": {\n    fill: \"linear-gradient(145deg, #b4ff39 0%, #39ffb6 46%, #00d4ff 100%)\",\n    glow: \"#59ffc8\"\n  },\n  \"grad-aurora\": {\n    fill: \"linear-gradient(145deg, #ff3cac 0%, #784ba0 45%, #2b86c5 100%)\",\n    glow: \"#9c64bf\"\n  },\n  \"grad-fire\": {\n    fill: \"linear-gradient(145deg, #ff512f 0%, #dd2476 45%, #ffb347 100%)\",\n    glow: \"#f96a5f\"\n  },\n  \"grad-prism\": {\n    fill: \"linear-gradient(145deg, #12c2e9 0%, #c471ed 45%, #f64f59 100%)\",\n    glow: \"#9e7de8\"\n  }\n};\n\nexport function resolveDmxColorTokens(color: string, colorPreset?: DotMatrixColorPreset): {\n  resolvedColor: string;\n  dotFill: string;\n} {\n  if (!colorPreset) {\n    return { resolvedColor: color, dotFill: color };\n  }\n\n  const preset = DOT_MATRIX_COLOR_PRESETS[colorPreset];\n  if (!preset) {\n    return { resolvedColor: color, dotFill: color };\n  }\n\n  return { resolvedColor: preset.glow, dotFill: preset.fill };\n}\n\nexport interface DotMatrixCommonProps {\n  size?: number;\n  dotSize?: number;\n  color?: string;\n  colorPreset?: DotMatrixColorPreset;\n  speed?: number;\n  ariaLabel?: string;\n  className?: string;\n  pattern?: MatrixPattern;\n  muted?: boolean;\n  /**\n   * Adds a glow on dots from opacity 0.6 (weakest) through 1 (strongest), after remapping.\n   */\n  bloom?: boolean;\n  /** Uniform glow on every active dot (0…1); slightly wider falloff than selective `bloom`. */\n  halo?: number;\n  animated?: boolean;\n  hoverAnimated?: boolean;\n  dotClassName?: string;\n  dotShape?: DotShape;\n  opacityBase?: number;\n  opacityMid?: number;\n  opacityPeak?: number;\n  cellPadding?: number;\n  boxSize?: number;\n  minSize?: number;\n}\n\nexport interface DotAnimationContext {\n  index: number;\n  row: number;\n  col: number;\n  distanceFromCenter: number;\n  angleFromCenter: number;\n  radiusNormalized: number;\n  manhattanDistance: number;\n  phase: DotMatrixPhase;\n  isActive: boolean;\n  reducedMotion: boolean;\n}\n\nexport interface DotAnimationState {\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport type DotAnimationResolver = (ctx: DotAnimationContext) => DotAnimationState;\n\nexport function cx(...values: Array<string | undefined | null | false>): string {\n  return values.filter(Boolean).join(\" \");\n}\n\nexport const MATRIX_SIZE = 5;\nconst CENTER = Math.floor(MATRIX_SIZE / 2);\nconst RANGE = Array.from({ length: MATRIX_SIZE }, (_, index) => index);\nconst MAX_RADIUS = Math.hypot(CENTER, CENTER);\n\nexport const FULL_INDEXES = RANGE.flatMap((row) => RANGE.map((col) => rowMajorIndex(row, col)));\n\nexport const DIAMOND_INDEXES = FULL_INDEXES.filter((index) => {\n  const { row, col } = indexToCoord(index);\n  return Math.abs(row - CENTER) + Math.abs(col - CENTER) <= 2;\n});\n\nexport const OUTLINE_INDEXES = FULL_INDEXES.filter((index) => {\n  const { row, col } = indexToCoord(index);\n  return row === 0 || row === MATRIX_SIZE - 1 || col === 0 || col === MATRIX_SIZE - 1;\n});\n\nexport const CROSS_INDEXES = FULL_INDEXES.filter((index) => {\n  const { row, col } = indexToCoord(index);\n  return row === CENTER || col === CENTER;\n});\n\nexport const RINGS_INDEXES = FULL_INDEXES.filter((index) => {\n  const { row, col } = indexToCoord(index);\n  const radius = Math.hypot(row - CENTER, col - CENTER);\n  return Math.round(radius) === 1 || Math.round(radius) === 2;\n});\n\nexport const ROSE_INDEXES = FULL_INDEXES.filter((index) => {\n  const { row, col } = indexToCoord(index);\n  const dx = col - CENTER;\n  const dy = row - CENTER;\n  const angle = Math.atan2(dy, dx);\n  const radius = Math.hypot(dx, dy);\n  const rose = Math.abs(Math.sin(3 * angle));\n  return rose > 0.6 && radius >= 1;\n});\n\nconst PATTERN_INDEXES: Record<MatrixPattern, number[]> = {\n  diamond: DIAMOND_INDEXES,\n  full: FULL_INDEXES,\n  outline: OUTLINE_INDEXES,\n  rose: ROSE_INDEXES,\n  cross: CROSS_INDEXES,\n  rings: RINGS_INDEXES\n};\n\nexport function getPatternIndexes(pattern: MatrixPattern = \"diamond\"): number[] {\n  return PATTERN_INDEXES[pattern];\n}\n\nexport function rowMajorIndex(row: number, col: number): number {\n  return row * MATRIX_SIZE + col;\n}\n\nexport function indexToCoord(index: number): { row: number; col: number } {\n  return {\n    row: Math.floor(index / MATRIX_SIZE),\n    col: index % MATRIX_SIZE\n  };\n}\n\nexport function distanceFromCenter(index: number): number {\n  const { row, col } = indexToCoord(index);\n  return Math.hypot(row - CENTER, col - CENTER);\n}\n\nexport function rowDistance(index: number): number {\n  const { row } = indexToCoord(index);\n  return Math.abs(row - CENTER);\n}\n\nexport function polarAngle(index: number): number {\n  const { row, col } = indexToCoord(index);\n  return Math.atan2(row - CENTER, col - CENTER);\n}\n\nexport function normalizedRadius(index: number): number {\n  const { row, col } = indexToCoord(index);\n  return Math.hypot(row - CENTER, col - CENTER) / MAX_RADIUS;\n}\n\nexport function manhattanDistance(index: number): number {\n  const { row, col } = indexToCoord(index);\n  return Math.abs(row - CENTER) + Math.abs(col - CENTER);\n}\n\nexport function harmonicPhase(row: number, col: number, a: number, b: number): number {\n  return Math.sin((row + 1) * a + (col + 1) * b);\n}\n\nexport function lissajousOffset(\n  row: number,\n  col: number,\n  amplitude = 2.25\n): { x: number; y: number; phase: number } {\n  const x = Math.sin((row + 1) * 1.15 + (col + 1) * 2.2) * amplitude;\n  const y = Math.cos((row + 1) * 2.45 + (col + 1) * 0.95) * amplitude;\n  const phase = Math.abs(Math.sin((row + 1) * 0.7 + (col + 1) * 1.1));\n  return { x, y, phase };\n}\n\nexport function spiralOffset(\n  angle: number,\n  radiusNormalizedValue: number,\n  amplitude = 2.8\n): { x: number; y: number; phase: number } {\n  const spin = angle + radiusNormalizedValue * Math.PI * 2.1;\n  const radius = radiusNormalizedValue * amplitude;\n  const x = Math.cos(spin) * radius;\n  const y = Math.sin(spin) * radius;\n  const phase = Math.abs(Math.sin(spin * 0.5));\n  return { x, y, phase };\n}\n\nexport function isPrime(value: number): boolean {\n  if (value <= 1) {\n    return false;\n  }\n  if (value === 2) {\n    return true;\n  }\n  if (value % 2 === 0) {\n    return false;\n  }\n\n  const limit = Math.floor(Math.sqrt(value));\n  for (let divisor = 3; divisor <= limit; divisor += 2) {\n    if (value % divisor === 0) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nconst N = MATRIX_SIZE;\nconst C = Math.floor(MATRIX_SIZE / 2);\nconst CELLS = N * N;\nconst MAX_TRBL = (N - 1) * 2;\n\nexport function trBlPathNormFromIndex(index: number): number {\n  const { row, col } = indexToCoord(index);\n  return (row + (N - 1 - col)) / MAX_TRBL;\n}\n\nfunction buildSnakeOrderToIndexMap(): number[] {\n  const pathOrder = new Array<number>(CELLS);\n  const key = (row: number, col: number) => rowMajorIndex(row, col);\n  let t = 0;\n  for (let row = 0; row < N; row += 1) {\n    if (row % 2 === 0) {\n      for (let col = 0; col < N; col += 1) {\n        pathOrder[key(row, col)] = t;\n        t += 1;\n      }\n    } else {\n      for (let col = N - 1; col >= 0; col -= 1) {\n        pathOrder[key(row, col)] = t;\n        t += 1;\n      }\n    }\n  }\n  return pathOrder;\n}\n\nconst SNAKE_ORDER: readonly number[] = buildSnakeOrderToIndexMap();\n\nexport function snakePathNormFromIndex(index: number): number {\n  return SNAKE_ORDER[index]! / (CELLS - 1);\n}\n\nexport function snakePathOrderValue(index: number): number {\n  return SNAKE_ORDER[index]!;\n}\n\nfunction buildSpiralInwardOrderToIndexMap(): number[] {\n  const order = new Array<number>(CELLS);\n  let top = 0;\n  let bottom = N - 1;\n  let left = 0;\n  let right = N - 1;\n  let t = 0;\n\n  while (top <= bottom && left <= right) {\n    for (let col = left; col <= right; col += 1) {\n      order[rowMajorIndex(top, col)] = t;\n      t += 1;\n    }\n\n    for (let row = top + 1; row <= bottom; row += 1) {\n      order[rowMajorIndex(row, right)] = t;\n      t += 1;\n    }\n\n    if (top < bottom) {\n      for (let col = right - 1; col >= left; col -= 1) {\n        order[rowMajorIndex(bottom, col)] = t;\n        t += 1;\n      }\n    }\n\n    if (left < right) {\n      for (let row = bottom - 1; row > top; row -= 1) {\n        order[rowMajorIndex(row, left)] = t;\n        t += 1;\n      }\n    }\n\n    top += 1;\n    bottom -= 1;\n    left += 1;\n    right -= 1;\n  }\n\n  return order;\n}\n\nconst SPIRAL_INWARD_ORDER: readonly number[] = buildSpiralInwardOrderToIndexMap();\n\nexport function spiralInwardNormFromIndex(index: number): number {\n  return SPIRAL_INWARD_ORDER[index]! / (CELLS - 1);\n}\n\nexport function spiralInwardOrderValue(index: number): number {\n  return SPIRAL_INWARD_ORDER[index]!;\n}\n\nfunction buildOuterRingClockwiseOrderToIndexMap(): number[] {\n  const order = new Array<number>(CELLS).fill(-1);\n  const coords: Array<[number, number]> = [\n    [0, 0],\n    [0, 1],\n    [0, 2],\n    [0, 3],\n    [0, 4],\n    [1, 4],\n    [2, 4],\n    [3, 4],\n    [4, 4],\n    [4, 3],\n    [4, 2],\n    [4, 1],\n    [4, 0],\n    [3, 0],\n    [2, 0],\n    [1, 0]\n  ];\n\n  for (let t = 0; t < coords.length; t += 1) {\n    const [row, col] = coords[t]!;\n    order[rowMajorIndex(row, col)] = t;\n  }\n\n  return order;\n}\n\nfunction buildMiddleRingAntiClockwiseOrderToIndexMap(): number[] {\n  const order = new Array<number>(CELLS).fill(-1);\n  const coords: Array<[number, number]> = [\n    [1, 1],\n    [2, 1],\n    [3, 1],\n    [3, 2],\n    [3, 3],\n    [2, 3],\n    [1, 3],\n    [1, 2]\n  ];\n\n  for (let t = 0; t < coords.length; t += 1) {\n    const [row, col] = coords[t]!;\n    order[rowMajorIndex(row, col)] = t;\n  }\n\n  return order;\n}\n\nconst OUTER_RING_CLOCKWISE_ORDER: readonly number[] = buildOuterRingClockwiseOrderToIndexMap();\nconst MIDDLE_RING_ANTI_CLOCKWISE_ORDER: readonly number[] = buildMiddleRingAntiClockwiseOrderToIndexMap();\n\nexport function outerRingClockwiseOrderValue(index: number): number {\n  return OUTER_RING_CLOCKWISE_ORDER[index]!;\n}\n\nexport function outerRingClockwiseNormFromIndex(index: number): number {\n  const order = outerRingClockwiseOrderValue(index);\n  return order >= 0 ? order / 15 : 0;\n}\n\nexport function middleRingAntiClockwiseOrderValue(index: number): number {\n  return MIDDLE_RING_ANTI_CLOCKWISE_ORDER[index]!;\n}\n\nexport function middleRingAntiClockwiseNormFromIndex(index: number): number {\n  const order = middleRingAntiClockwiseOrderValue(index);\n  return order >= 0 ? order / 7 : 0;\n}\n\nfunction buildDiagonalSnakeOrderToIndexMap(): number[] {\n  const order = new Array<number>(CELLS);\n  let t = 0;\n\n  for (let diagonal = 0; diagonal <= (N - 1) * 2; diagonal += 1) {\n    const rowStart = Math.max(0, diagonal - (N - 1));\n    const rowEnd = Math.min(N - 1, diagonal);\n\n    if (diagonal % 2 === 0) {\n      for (let row = rowEnd; row >= rowStart; row -= 1) {\n        const col = diagonal - row;\n        order[rowMajorIndex(row, col)] = t;\n        t += 1;\n      }\n    } else {\n      for (let row = rowStart; row <= rowEnd; row += 1) {\n        const col = diagonal - row;\n        order[rowMajorIndex(row, col)] = t;\n        t += 1;\n      }\n    }\n  }\n\n  return order;\n}\n\nconst DIAGONAL_SNAKE_ORDER: readonly number[] = buildDiagonalSnakeOrderToIndexMap();\n\nexport function diagonalSnakeOrderValue(index: number): number {\n  return DIAGONAL_SNAKE_ORDER[index]!;\n}\n\nexport function diagonalSnakeNormFromIndex(index: number): number {\n  return DIAGONAL_SNAKE_ORDER[index]! / (CELLS - 1);\n}\n\nfunction buildRowWaveSnakeOrderToIndexMap(): number[] {\n  const order = new Array<number>(CELLS);\n  const route: Array<{ col: number; dir: \"up\" | \"down\" }> = [\n    { col: 0, dir: \"up\" },\n    { col: 2, dir: \"down\" },\n    { col: 1, dir: \"up\" },\n    { col: 3, dir: \"down\" },\n    { col: 2, dir: \"up\" },\n    { col: 4, dir: \"down\" }\n  ];\n\n  let t = 0;\n  for (const step of route) {\n    if (step.dir === \"up\") {\n      for (let row = N - 1; row >= 0; row -= 1) {\n        order[rowMajorIndex(row, step.col)] = t;\n        t += 1;\n      }\n    } else {\n      for (let row = 0; row < N; row += 1) {\n        order[rowMajorIndex(row, step.col)] = t;\n        t += 1;\n      }\n    }\n  }\n\n  return order;\n}\n\nconst ROW_WAVE_SNAKE_ORDER: readonly number[] = buildRowWaveSnakeOrderToIndexMap();\nconst ROW_WAVE_SNAKE_MAX_ORDER = Math.max(...ROW_WAVE_SNAKE_ORDER);\n\nexport function rowWaveOrderValue(index: number): number {\n  return ROW_WAVE_SNAKE_ORDER[index]!;\n}\n\nexport function rowWaveNormFromIndex(index: number): number {\n  return ROW_WAVE_SNAKE_MAX_ORDER > 0 ? rowWaveOrderValue(index) / ROW_WAVE_SNAKE_MAX_ORDER : 0;\n}\n\nexport function colWaveNormFromIndex(index: number): number {\n  const { col } = indexToCoord(index);\n  return N > 1 ? col / (N - 1) : 0;\n}\n\nexport function concentricRingNormFromIndex(index: number): number {\n  const { row, col } = indexToCoord(index);\n  return Math.max(Math.abs(row - C), Math.abs(col - C)) / C;\n}\n\nconst CORNER_COORDS = new Set([\"0,0\", \"0,4\", \"4,0\", \"4,4\"]);\n\nexport function isWithinCircularMask(row: number, col: number): boolean {\n  return !CORNER_COORDS.has(`${row},${col}`);\n}\n\nexport function stylePx(n: number): string {\n  return `${n}px`;\n}\n\nexport function styleOpacity(opacity: number): number {\n  return Math.round(opacity * 1e6) / 1e6;\n}\n\nconst SOURCE_BASE_OPACITY = 0.08;\nconst SOURCE_MID_OPACITY = 0.34;\nconst SOURCE_PEAK_OPACITY = 0.94;\n\nfunction lerpDmx(start: number, end: number, progress: number): number {\n  return start + (end - start) * progress;\n}\n\nfunction normalizeProgressDmx(value: number, start: number, end: number): number {\n  const span = end - start;\n  if (Math.abs(span) < Number.EPSILON) {\n    return 0;\n  }\n  return Math.min(1, Math.max(0, (value - start) / span));\n}\n\nfunction coerceOpacityDmx(value: number | undefined): number | undefined {\n  if (value == null || !Number.isFinite(value)) {\n    return undefined;\n  }\n  return Math.min(1, Math.max(0, value));\n}\n\nexport function remapOpacityToTriplet(\n  opacity: number,\n  opacityBase: number | undefined,\n  opacityMid: number | undefined,\n  opacityPeak: number | undefined\n): number {\n  if (!Number.isFinite(opacity)) {\n    return opacity;\n  }\n\n  const hasOverrides = opacityBase !== undefined || opacityMid !== undefined || opacityPeak !== undefined;\n  const safeOpacity = Math.min(1, Math.max(0, opacity));\n  if (!hasOverrides) {\n    return safeOpacity;\n  }\n\n  const targetBase = coerceOpacityDmx(opacityBase) ?? SOURCE_BASE_OPACITY;\n  const targetMid = coerceOpacityDmx(opacityMid) ?? SOURCE_MID_OPACITY;\n  const targetPeak = coerceOpacityDmx(opacityPeak) ?? SOURCE_PEAK_OPACITY;\n\n  if (safeOpacity <= SOURCE_BASE_OPACITY) {\n    const progress = normalizeProgressDmx(safeOpacity, 0, SOURCE_BASE_OPACITY);\n    return Math.min(1, Math.max(0, lerpDmx(0, targetBase, progress)));\n  }\n\n  if (safeOpacity <= SOURCE_MID_OPACITY) {\n    const progress = normalizeProgressDmx(safeOpacity, SOURCE_BASE_OPACITY, SOURCE_MID_OPACITY);\n    return Math.min(1, Math.max(0, lerpDmx(targetBase, targetMid, progress)));\n  }\n\n  if (safeOpacity <= SOURCE_PEAK_OPACITY) {\n    const progress = normalizeProgressDmx(safeOpacity, SOURCE_MID_OPACITY, SOURCE_PEAK_OPACITY);\n    return Math.min(1, Math.max(0, lerpDmx(targetMid, targetPeak, progress)));\n  }\n\n  const progress = normalizeProgressDmx(safeOpacity, SOURCE_PEAK_OPACITY, 1);\n  return Math.min(1, Math.max(0, lerpDmx(targetPeak, 1, progress)));\n}\n\n/** Remapped opacity where bloom begins (weakest glow); scales linearly to full bloom at 1. */\nexport const DMX_BLOOM_OPACITY_MIN = 0.6;\n\nexport function opacityToBloomLevel(remappedOpacity: number): number {\n  return Math.max(0, Math.min(1, (remappedOpacity - DMX_BLOOM_OPACITY_MIN) / (1 - DMX_BLOOM_OPACITY_MIN)));\n}\n\nexport function remappedOpacityQualifiesForBloom(remappedOpacity: number): boolean {\n  return remappedOpacity >= DMX_BLOOM_OPACITY_MIN;\n}\n\nfunction clampHalo(value: number | undefined): number {\n  if (value == null || !Number.isFinite(value)) {\n    return 0;\n  }\n  return Math.min(1, Math.max(0, value));\n}\n\nexport function dmxBloomRootActive(bloom: boolean, halo: number | undefined): boolean {\n  return bloom || clampHalo(halo) > 0;\n}\n\n/** Root class when `halo` > 0 — CSS widens drop-shadow falloff for a softer, more diffuse glow. */\nexport function dmxBloomHaloSpreadClass(halo: number | undefined): \"dmx-bloom-halo\" | false {\n  return clampHalo(halo) > 0 ? \"dmx-bloom-halo\" : false;\n}\n\n/**\n * Bloom level and dot class for one cell. `curveOpacity` is the loader’s logical opacity **before**\n * `remapOpacityToTriplet` (same as `bloom` uses today).\n */\nexport function dmxDotBloomParts(\n  isActive: boolean,\n  curveOpacity: number,\n  bloom: boolean,\n  halo: number | undefined,\n  ob: number | undefined,\n  om: number | undefined,\n  op: number | undefined\n): { level: number; bloomDot: boolean } {\n  const haloN = clampHalo(halo);\n  if (!isActive) {\n    return { level: 0, bloomDot: false };\n  }\n  const remapped = remapOpacityToTriplet(curveOpacity, ob, om, op);\n  const fromBloom = bloom ? opacityToBloomLevel(remapped) : 0;\n  return {\n    level: fromBloom,\n    bloomDot: haloN > 0 || (bloom && remappedOpacityQualifiesForBloom(remapped))\n  };\n}\n\nfunction getMatrix5Layout(\n  size: number,\n  dotSize: number,\n  cellPadding?: number\n): { gap: number; matrixSpan: number } {\n  const n = MATRIX_SIZE;\n  if (cellPadding != null) {\n    const g = Math.max(0, cellPadding);\n    const matrixSpan = dotSize * n + g * (n - 1);\n    return { gap: g, matrixSpan };\n  }\n  const g = Math.max(1, Math.floor((size - dotSize * n) / (n - 1)));\n  return { gap: g, matrixSpan: size };\n}\n\nfunction resolveDmxBoxOuterDim(\n  options: { boxSize?: number; minSize?: number } | null | undefined\n): { outerDim: number; useWrapper: boolean } {\n  const b = options?.boxSize;\n  const hasBox = b != null && b > 0 && Number.isFinite(b);\n  if (!hasBox) {\n    return { outerDim: 0, useWrapper: false };\n  }\n  const m = options?.minSize;\n  if (m != null && m > 0 && Number.isFinite(m)) {\n    return { outerDim: Math.max(b, m), useWrapper: true };\n  }\n  return { outerDim: b, useWrapper: true };\n}\n\nfunction clamp01Dmx(n: number | undefined) {\n  if (n == null) {\n    return;\n  }\n  if (!Number.isFinite(n)) {\n    return;\n  }\n  return Math.min(1, Math.max(0, n));\n}\n\ninterface DotMatrixBaseProps extends DotMatrixCommonProps {\n  phase: DotMatrixPhase;\n  reducedMotion?: boolean;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  animationResolver?: DotAnimationResolver;\n}\n\nexport function DotMatrixBase({\n  size = 24,\n  dotSize = 3,\n  color = \"currentColor\",\n  colorPreset,\n  speed = 1,\n  ariaLabel = \"Loading\",\n  className,\n  pattern = \"diamond\",\n  dotShape = \"circle\",\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  phase,\n  reducedMotion = false,\n  onMouseEnter,\n  onMouseLeave,\n  animationResolver,\n  opacityBase,\n  opacityMid,\n  opacityPeak,\n  cellPadding,\n  boxSize,\n  minSize\n}: DotMatrixBaseProps) {\n  const patternIndexes = new Set(getPatternIndexes(pattern));\n  const safeSpeed = speed > 0 ? speed : 1;\n  const speedScale = 1 / safeSpeed;\n  const { gap, matrixSpan } = getMatrix5Layout(size, dotSize, cellPadding);\n  const { outerDim, useWrapper } = resolveDmxBoxOuterDim({ boxSize, minSize });\n  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;\n  const center = Math.floor(MATRIX_SIZE / 2);\n  const ob = clamp01Dmx(opacityBase);\n  const om = clamp01Dmx(opacityMid);\n  const op = clamp01Dmx(opacityPeak);\n  const unit = dotSize + gap;\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n\n  const dmxVarStyle = {\n    width: matrixSpan,\n    height: matrixSpan,\n    \"--dmx-speed\": speedScale,\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n    [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor,\n    ...(ob !== undefined && { [\"--dmx-opacity-base\" as const]: ob }),\n    ...(om !== undefined && { [\"--dmx-opacity-mid\" as const]: om }),\n    ...(op !== undefined && { [\"--dmx-opacity-peak\" as const]: op }),\n    ...(useWrapper\n      ? {\n        transform: `scale(${scale})`,\n        transformOrigin: \"center center\" as const\n      }\n      : { minWidth: minSize, minHeight: minSize })\n  } as unknown as CSSProperties;\n\n  const dots = Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n    const { row, col } = indexToCoord(index);\n    const isActive = patternIndexes.has(index);\n    const distance = distanceFromCenter(index);\n    const angle = polarAngle(index);\n    const radiusNormalizedValue = normalizedRadius(index);\n    const manhattan = manhattanDistance(index);\n    const deltaX = (col - center) * unit;\n    const deltaY = (row - center) * unit;\n\n    const animationState = animationResolver\n      ? animationResolver({\n        index,\n        row,\n        col,\n        distanceFromCenter: distance,\n        angleFromCenter: angle,\n        radiusNormalized: radiusNormalizedValue,\n        manhattanDistance: manhattan,\n        phase,\n        isActive,\n        reducedMotion\n      })\n      : {};\n\n    const resolvedAnimationStyle = animationState.style ? { ...animationState.style } : undefined;\n    let isBloomDot = false;\n    let stylePatch: CSSProperties | undefined = resolvedAnimationStyle;\n\n    if (isActive) {\n      const rawOpacity = stylePatch?.opacity;\n      if (stylePatch != null && typeof rawOpacity === \"number\") {\n        const remappedOpacity = remapOpacityToTriplet(rawOpacity, ob, om, op);\n        stylePatch = { ...stylePatch, opacity: remappedOpacity };\n        const parts = dmxDotBloomParts(true, rawOpacity, bloom, halo, ob, om, op);\n        (stylePatch as CSSProperties & { \"--dmx-bloom-level\"?: number })[\"--dmx-bloom-level\"] = parts.level;\n        isBloomDot = parts.bloomDot;\n      } else {\n        const parts = dmxDotBloomParts(true, 0, bloom, halo, ob, om, op);\n        if (parts.level > 0) {\n          stylePatch = {\n            ...(stylePatch ?? {}),\n            [\"--dmx-bloom-level\" as const]: parts.level\n          } as CSSProperties & { \"--dmx-bloom-level\"?: number };\n        }\n        isBloomDot = parts.bloomDot;\n      }\n    }\n\n    const dotStyle = {\n      width: dotSize,\n      height: dotSize,\n      \"--dmx-distance\": distance,\n      \"--dmx-row\": row,\n      \"--dmx-col\": col,\n      \"--dmx-x\": `${deltaX}px`,\n      \"--dmx-y\": `${deltaY}px`,\n      \"--dmx-angle\": angle,\n      \"--dmx-radius\": radiusNormalizedValue,\n      \"--dmx-manhattan\": manhattan,\n      ...stylePatch,\n      ...(!isActive\n        ? {\n          opacity: 0,\n          visibility: \"hidden\" as const,\n          pointerEvents: \"none\" as const,\n          animation: \"none\"\n        }\n        : {})\n    } as CSSProperties;\n\n    return (\n      <span\n        key={index}\n        aria-hidden=\"true\"\n        className={cx(\n          \"dmx-dot\",\n          !isActive && \"dmx-inactive\",\n          isBloomDot && \"dmx-bloom-dot\",\n          dotClassName,\n          animationState.className\n        )}\n        style={dotStyle}\n      />\n    );\n  });\n\n  const matrix = (\n    <div\n      className={cx(\n        \"dmx-root\",\n        `dmx-dot-shape-${dotShape}`,\n        muted && \"dmx-muted\",\n        dmxBloomRootActive(bloom, halo) && \"dmx-bloom\",\n        dmxBloomHaloSpreadClass(halo),\n        !useWrapper && className\n      )}\n      style={dmxVarStyle}\n    >\n      <div className=\"dmx-grid\" style={{ gap }}>{dots}</div>\n    </div>\n  );\n\n  if (useWrapper) {\n    return (\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={ariaLabel}\n        className={className}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: outerDim,\n          height: outerDim,\n          minWidth: minSize,\n          minHeight: minSize,\n          overflow: \"hidden\"\n        }}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {matrix}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\n        \"dmx-root\",\n        `dmx-dot-shape-${dotShape}`,\n        muted && \"dmx-muted\",\n        dmxBloomRootActive(bloom, halo) && \"dmx-bloom\",\n        dmxBloomHaloSpreadClass(halo),\n        className\n      )}\n      style={dmxVarStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div className=\"dmx-grid\" style={{ gap }}>{dots}</div>\n    </div>\n  );\n}\n\nexport const MATRIX_SIZE_3 = 3;\n\nconst CENTER_3 = Math.floor(MATRIX_SIZE_3 / 2);\nconst RANGE_3 = Array.from({ length: MATRIX_SIZE_3 }, (_, index) => index);\nconst MAX_RADIUS_3 = Math.hypot(CENTER_3, CENTER_3);\n\nexport const FULL_INDEXES_3 = RANGE_3.flatMap((row) =>\n  RANGE_3.map((col) => rowMajorIndex3(row, col))\n);\n\nexport const OUTLINE_INDEXES_3 = FULL_INDEXES_3.filter((index) => {\n  const { row, col } = indexToCoord3(index);\n  return row === 0 || row === MATRIX_SIZE_3 - 1 || col === 0 || col === MATRIX_SIZE_3 - 1;\n});\n\nexport const DIAMOND_INDEXES_3 = FULL_INDEXES_3.filter((index) => {\n  const { row, col } = indexToCoord3(index);\n  return Math.abs(row - CENTER_3) + Math.abs(col - CENTER_3) <= 1;\n});\n\nexport const CROSS_INDEXES_3 = FULL_INDEXES_3.filter((index) => {\n  const { row, col } = indexToCoord3(index);\n  return row === CENTER_3 || col === CENTER_3;\n});\n\nexport const RINGS_INDEXES_3 = FULL_INDEXES_3.filter((index) => {\n  const { row, col } = indexToCoord3(index);\n  return Math.round(Math.hypot(row - CENTER_3, col - CENTER_3)) === 1;\n});\n\nexport const ROSE_INDEXES_3 = FULL_INDEXES_3.filter((index) => {\n  const { row, col } = indexToCoord3(index);\n  const dx = col - CENTER_3;\n  const dy = row - CENTER_3;\n  const angle = Math.atan2(dy, dx);\n  const radius = Math.hypot(dx, dy);\n  const rose = Math.abs(Math.sin(3 * angle));\n  return rose > 0.55 && radius >= 0.75;\n});\n\nconst PATTERN_INDEXES_3: Record<MatrixPattern, number[]> = {\n  diamond: DIAMOND_INDEXES_3,\n  full: FULL_INDEXES_3,\n  outline: OUTLINE_INDEXES_3,\n  rose: ROSE_INDEXES_3,\n  cross: CROSS_INDEXES_3,\n  rings: RINGS_INDEXES_3\n};\n\nexport function getPattern3Indexes(pattern: MatrixPattern = \"full\"): number[] {\n  return PATTERN_INDEXES_3[pattern];\n}\n\nexport function rowMajorIndex3(row: number, col: number): number {\n  return row * MATRIX_SIZE_3 + col;\n}\n\nexport function indexToCoord3(index: number): { row: number; col: number } {\n  return {\n    row: Math.floor(index / MATRIX_SIZE_3),\n    col: index % MATRIX_SIZE_3\n  };\n}\n\nexport function distanceFromCenter3(index: number): number {\n  const { row, col } = indexToCoord3(index);\n  return Math.hypot(row - CENTER_3, col - CENTER_3);\n}\n\nexport function manhattanDistance3(index: number): number {\n  const { row, col } = indexToCoord3(index);\n  return Math.abs(row - CENTER_3) + Math.abs(col - CENTER_3);\n}\n\nconst MAX_DIAGONAL_3 = (MATRIX_SIZE_3 - 1) * 2;\n\nexport type DiagonalWave3Direction = \"tr-bl\" | \"tl-br\" | \"br-tl\" | \"bl-tr\";\n\nexport function trBlPath3NormFromIndex(index: number): number {\n  const { row, col } = indexToCoord3(index);\n  return (row + (MATRIX_SIZE_3 - 1 - col)) / MAX_DIAGONAL_3;\n}\n\nexport function tlBrPath3NormFromIndex(index: number): number {\n  const { row, col } = indexToCoord3(index);\n  return (row + col) / MAX_DIAGONAL_3;\n}\n\nexport function brTlPath3NormFromIndex(index: number): number {\n  const { row, col } = indexToCoord3(index);\n  return (MAX_DIAGONAL_3 - row - col) / MAX_DIAGONAL_3;\n}\n\nexport function blTrPath3NormFromIndex(index: number): number {\n  const { row, col } = indexToCoord3(index);\n  return (MAX_DIAGONAL_3 - row - (MATRIX_SIZE_3 - 1 - col)) / MAX_DIAGONAL_3;\n}\n\nconst DIAGONAL_PATH_3: Record<DiagonalWave3Direction, (index: number) => number> = {\n  \"tr-bl\": trBlPath3NormFromIndex,\n  \"tl-br\": tlBrPath3NormFromIndex,\n  \"br-tl\": brTlPath3NormFromIndex,\n  \"bl-tr\": blTrPath3NormFromIndex\n};\n\nexport function diagonalWave3PathNormFromIndex(\n  index: number,\n  direction: DiagonalWave3Direction\n): number {\n  return DIAGONAL_PATH_3[direction](index);\n}\n\nexport function diagonalWave3BandIndex(\n  row: number,\n  col: number,\n  direction: DiagonalWave3Direction\n): number {\n  if (direction === \"tr-bl\" || direction === \"bl-tr\") {\n    return row + (MATRIX_SIZE_3 - 1 - col);\n  }\n  return row + col;\n}\n\nfunction buildSpiralInwardOrderToIndexMap3(): number[] {\n  const N = MATRIX_SIZE_3;\n  const CELLS = N * N;\n  const order = new Array<number>(CELLS);\n  let top = 0;\n  let bottom = N - 1;\n  let left = 0;\n  let right = N - 1;\n  let t = 0;\n\n  while (top <= bottom && left <= right) {\n    for (let col = left; col <= right; col += 1) {\n      order[rowMajorIndex3(top, col)] = t;\n      t += 1;\n    }\n\n    for (let row = top + 1; row <= bottom; row += 1) {\n      order[rowMajorIndex3(row, right)] = t;\n      t += 1;\n    }\n\n    if (top < bottom) {\n      for (let col = right - 1; col >= left; col -= 1) {\n        order[rowMajorIndex3(bottom, col)] = t;\n        t += 1;\n      }\n    }\n\n    if (left < right) {\n      for (let row = bottom - 1; row > top; row -= 1) {\n        order[rowMajorIndex3(row, left)] = t;\n        t += 1;\n      }\n    }\n\n    top += 1;\n    bottom -= 1;\n    left += 1;\n    right -= 1;\n  }\n\n  return order;\n}\n\nconst SPIRAL_INWARD_ORDER_3: readonly number[] = buildSpiralInwardOrderToIndexMap3();\n\nexport function spiralInward3NormFromIndex(index: number): number {\n  return SPIRAL_INWARD_ORDER_3[index]! / (MATRIX_SIZE_3 * MATRIX_SIZE_3 - 1);\n}\n\nexport function spiralInward3OrderValue(index: number): number {\n  return SPIRAL_INWARD_ORDER_3[index]!;\n}\n\nfunction buildOuterRingClockwiseOrder3(): number[] {\n  const order = new Array<number>(MATRIX_SIZE_3 * MATRIX_SIZE_3).fill(-1);\n  const path: ReadonlyArray<readonly [number, number]> = [\n    [0, 0],\n    [0, 1],\n    [0, 2],\n    [1, 2],\n    [2, 2],\n    [2, 1],\n    [2, 0],\n    [1, 0]\n  ];\n\n  path.forEach(([row, col], step) => {\n    order[rowMajorIndex3(row, col)] = step;\n  });\n\n  return order;\n}\n\nconst OUTER_RING_CLOCKWISE_ORDER_3: readonly number[] = buildOuterRingClockwiseOrder3();\n\nexport function outerRingClockwise3OrderValue(index: number): number {\n  return OUTER_RING_CLOCKWISE_ORDER_3[index]!;\n}\n\nexport function outerRingClockwise3NormFromIndex(index: number): number {\n  const order = OUTER_RING_CLOCKWISE_ORDER_3[index]!;\n  if (order < 0) {\n    return 0;\n  }\n  return order / 7;\n}\n\nexport function isCenterCell3(row: number, col: number): boolean {\n  const center = Math.floor(MATRIX_SIZE_3 / 2);\n  return row === center && col === center;\n}\n\nexport function rowWave3NormFromRow(row: number): number {\n  return row / (MATRIX_SIZE_3 - 1);\n}\n\nexport function colWave3NormFromCol(col: number): number {\n  return col / (MATRIX_SIZE_3 - 1);\n}\n\nexport function colWave3NormFromColReverse(col: number): number {\n  return (MATRIX_SIZE_3 - 1 - col) / (MATRIX_SIZE_3 - 1);\n}\n\nexport function wave3PathOpacityFromNorm(\n  norm: number,\n  base = 0.06,\n  mid = 0.38,\n  peak = 0.88\n): number {\n  const t = Math.min(1, Math.max(0, norm));\n  if (t <= 0.5) {\n    return base + (t / 0.5) * (mid - base);\n  }\n  return mid + ((t - 0.5) / 0.5) * (peak - mid);\n}\n\nfunction getMatrix3Layout(\n  size: number,\n  dotSize: number,\n  cellPadding?: number\n): { gap: number; matrixSpan: number } {\n  const n = MATRIX_SIZE_3;\n  if (cellPadding != null) {\n    const g = Math.max(0, cellPadding);\n    const matrixSpan = dotSize * n + g * (n - 1);\n    return { gap: g, matrixSpan };\n  }\n  const g = Math.max(0, Math.floor((size - dotSize * n) / (n - 1)));\n  return { gap: g, matrixSpan: size };\n}\n\ninterface DotMatrix3BaseProps extends DotMatrixCommonProps {\n  phase: DotMatrixPhase;\n  reducedMotion?: boolean;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  animationResolver?: DotAnimationResolver;\n}\n\nexport function DotMatrix3Base({\n  size = 24,\n  dotSize = 3,\n  color = \"currentColor\",\n  colorPreset,\n  speed = 1,\n  ariaLabel = \"Loading\",\n  className,\n  pattern = \"full\",\n  dotShape = \"circle\",\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  phase,\n  reducedMotion = false,\n  onMouseEnter,\n  onMouseLeave,\n  animationResolver,\n  opacityBase = 0.06,\n  opacityMid,\n  opacityPeak,\n  cellPadding = 1,\n  boxSize,\n  minSize\n}: DotMatrix3BaseProps) {\n  const patternIndexes = new Set(getPattern3Indexes(pattern));\n  const safeSpeed = speed > 0 ? speed : 1;\n  const speedScale = 1 / safeSpeed;\n  const { gap, matrixSpan } = getMatrix3Layout(size, dotSize, cellPadding);\n  const { outerDim, useWrapper } = resolveDmxBoxOuterDim({ boxSize, minSize });\n  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;\n  const center = CENTER_3;\n  const ob = clamp01Dmx(opacityBase);\n  const om = clamp01Dmx(opacityMid);\n  const op = clamp01Dmx(opacityPeak);\n  const unit = dotSize + gap;\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n\n  const dmxVarStyle = {\n    width: matrixSpan,\n    height: matrixSpan,\n    \"--dmx-speed\": speedScale,\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n    [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor,\n    ...(ob !== undefined && { [\"--dmx-opacity-base\" as const]: ob }),\n    ...(om !== undefined && { [\"--dmx-opacity-mid\" as const]: om }),\n    ...(op !== undefined && { [\"--dmx-opacity-peak\" as const]: op }),\n    ...(useWrapper\n      ? {\n        transform: `scale(${scale})`,\n        transformOrigin: \"center center\" as const\n      }\n      : { minWidth: minSize, minHeight: minSize })\n  } as unknown as CSSProperties;\n\n  const gridStyle = {\n    gap,\n    gridTemplateColumns: `repeat(${MATRIX_SIZE_3}, minmax(0, 1fr))`,\n    gridTemplateRows: `repeat(${MATRIX_SIZE_3}, minmax(0, 1fr))`\n  };\n\n  const dots = Array.from({ length: MATRIX_SIZE_3 * MATRIX_SIZE_3 }).map((_, index) => {\n    const { row, col } = indexToCoord3(index);\n    const isActive = patternIndexes.has(index);\n    const distance = distanceFromCenter3(index);\n    const angle = Math.atan2(row - center, col - center);\n    const radiusNormalizedValue = Math.hypot(row - center, col - center) / MAX_RADIUS_3;\n    const manhattan = manhattanDistance3(index);\n    const deltaX = (col - center) * unit;\n    const deltaY = (row - center) * unit;\n\n    const animationState = animationResolver\n      ? animationResolver({\n        index,\n        row,\n        col,\n        distanceFromCenter: distance,\n        angleFromCenter: angle,\n        radiusNormalized: radiusNormalizedValue,\n        manhattanDistance: manhattan,\n        phase,\n        isActive,\n        reducedMotion\n      })\n      : {};\n\n    const resolvedAnimationStyle = animationState.style ? { ...animationState.style } : undefined;\n    let isBloomDot = false;\n    let stylePatch: CSSProperties | undefined = resolvedAnimationStyle;\n\n    if (isActive) {\n      const rawOpacity = stylePatch?.opacity;\n      if (stylePatch != null && typeof rawOpacity === \"number\") {\n        const remappedOpacity = remapOpacityToTriplet(rawOpacity, ob, om, op);\n        stylePatch = { ...stylePatch, opacity: remappedOpacity };\n        const parts = dmxDotBloomParts(true, rawOpacity, bloom, halo, ob, om, op);\n        (stylePatch as CSSProperties & { \"--dmx-bloom-level\"?: number })[\"--dmx-bloom-level\"] = parts.level;\n        isBloomDot = parts.bloomDot;\n      } else {\n        const parts = dmxDotBloomParts(true, 0, bloom, halo, ob, om, op);\n        if (parts.level > 0) {\n          stylePatch = {\n            ...(stylePatch ?? {}),\n            [\"--dmx-bloom-level\" as const]: parts.level\n          } as CSSProperties & { \"--dmx-bloom-level\"?: number };\n        }\n        isBloomDot = parts.bloomDot;\n      }\n    }\n\n    const dotStyle = {\n      width: dotSize,\n      height: dotSize,\n      \"--dmx-distance\": distance,\n      \"--dmx-row\": row,\n      \"--dmx-col\": col,\n      \"--dmx-x\": `${deltaX}px`,\n      \"--dmx-y\": `${deltaY}px`,\n      \"--dmx-angle\": angle,\n      \"--dmx-radius\": radiusNormalizedValue,\n      \"--dmx-manhattan\": manhattan,\n      ...stylePatch,\n      ...(!isActive\n        ? {\n          opacity: 0,\n          visibility: \"hidden\" as const,\n          pointerEvents: \"none\" as const,\n          animation: \"none\"\n        }\n        : {})\n    } as CSSProperties;\n\n    return (\n      <span\n        key={index}\n        aria-hidden=\"true\"\n        className={cx(\n          \"dmx-dot\",\n          !isActive && \"dmx-inactive\",\n          isBloomDot && \"dmx-bloom-dot\",\n          dotClassName,\n          animationState.className\n        )}\n        style={dotStyle}\n      />\n    );\n  });\n\n  const matrix = (\n    <div\n      className={cx(\n        \"dmx-root\",\n        \"dmx-matrix-3\",\n        `dmx-dot-shape-${dotShape}`,\n        muted && \"dmx-muted\",\n        dmxBloomRootActive(bloom, halo) && \"dmx-bloom\",\n        dmxBloomHaloSpreadClass(halo),\n        !useWrapper && className\n      )}\n      style={dmxVarStyle}\n    >\n      <div className=\"dmx-grid\" style={gridStyle}>{dots}</div>\n    </div>\n  );\n\n  if (useWrapper) {\n    return (\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={ariaLabel}\n        className={className}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: outerDim,\n          height: outerDim,\n          minWidth: minSize,\n          minHeight: minSize,\n          overflow: \"hidden\"\n        }}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {matrix}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\n        \"dmx-root\",\n        \"dmx-matrix-3\",\n        `dmx-dot-shape-${dotShape}`,\n        muted && \"dmx-muted\",\n        dmxBloomRootActive(bloom, halo) && \"dmx-bloom\",\n        dmxBloomHaloSpreadClass(halo),\n        className\n      )}\n      style={dmxVarStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div className=\"dmx-grid\" style={gridStyle}>{dots}</div>\n    </div>\n  );\n}\n\ntype NormFn = (ctx: Pick<DotAnimationContext, \"row\" | \"col\" | \"index\">) => number;\n\nexport function createPathWaveResolver(getPathNorm: NormFn): DotAnimationResolver {\n  return ({ isActive, row, col, index, reducedMotion, phase }) => {\n    if (!isActive) {\n      return { className: \"dmx-inactive\" };\n    }\n\n    const path = getPathNorm({ row, col, index });\n    const style = { \"--dmx-path\": path } as CSSProperties;\n\n    if (reducedMotion || phase === \"idle\") {\n      return {\n        style: {\n          ...style,\n          opacity: 0.12 + path * 0.72\n        }\n      };\n    }\n\n    return { className: \"dmx-path\", style };\n  };\n}\n\ntype PathWaveComponentProps = DotMatrixCommonProps;\n\nexport function createPathWaveComponent(displayName: string, getPathNorm: NormFn) {\n  const resolve = createPathWaveResolver(getPathNorm);\n\n  function PathWaveComponent({\n    pattern = \"full\",\n    animated = true,\n    hoverAnimated = false,\n    speed = 1,\n    ...rest\n  }: PathWaveComponentProps) {\n    const reducedMotion = usePrefersReducedMotion();\n    const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n      animated: Boolean(animated && !reducedMotion),\n      hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n      speed\n    });\n    return (\n      <DotMatrixBase\n        {...rest}\n        speed={speed}\n        pattern={pattern}\n        animated={animated}\n        phase={matrixPhase}\n        reducedMotion={reducedMotion}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        animationResolver={resolve}\n      />\n    );\n  }\n\n  PathWaveComponent.displayName = displayName;\n  return PathWaveComponent;\n}\n\nexport function createDiagonalWave3Resolver(direction: DiagonalWave3Direction): DotAnimationResolver {\n  return ({ isActive, index, reducedMotion, phase }) => {\n    if (!isActive) {\n      return { className: \"dmx-inactive\" };\n    }\n\n    const path = diagonalWave3PathNormFromIndex(index, direction);\n    const style = { \"--dmx-path\": path } as CSSProperties;\n\n    if (reducedMotion || phase === \"idle\") {\n      return {\n        style: {\n          ...style,\n          opacity: path * 0.88\n        }\n      };\n    }\n\n    return { className: \"dmx-path-3\", style };\n  };\n}\n\ntype DiagonalWave3ComponentProps = DotMatrixCommonProps;\n\nexport function createDiagonalWave3Component(\n  displayName: string,\n  direction: DiagonalWave3Direction\n) {\n  const resolve = createDiagonalWave3Resolver(direction);\n\n  function DiagonalWave3Component({\n    pattern = \"full\",\n    animated = true,\n    hoverAnimated = false,\n    speed = 1.15,\n    ...rest\n  }: DiagonalWave3ComponentProps) {\n    const reducedMotion = usePrefersReducedMotion();\n    const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n      animated: Boolean(animated && !reducedMotion),\n      hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n      speed\n    });\n\n    return (\n      <DotMatrix3Base\n        {...rest}\n        speed={speed}\n        pattern={pattern}\n        animated={animated}\n        phase={matrixPhase}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        reducedMotion={reducedMotion}\n        animationResolver={resolve}\n      />\n    );\n  }\n\n  DiagonalWave3Component.displayName = displayName;\n  return DiagonalWave3Component;\n}\n\ntype Dotm3x3ComponentProps = DotMatrixCommonProps;\n\nexport function createDotm3x3Component(\n  displayName: string,\n  animationResolver: DotAnimationResolver,\n  defaultSpeed = 1.15\n) {\n  function Dotm3x3Component({\n    pattern = \"full\",\n    dotShape = \"circle\",\n    animated = true,\n    hoverAnimated = false,\n    speed = defaultSpeed,\n    ...rest\n  }: Dotm3x3ComponentProps) {\n    const reducedMotion = usePrefersReducedMotion();\n    const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n      animated: Boolean(animated && !reducedMotion),\n      hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n      speed\n    });\n\n    return (\n      <DotMatrix3Base\n        {...rest}\n        speed={speed}\n        pattern={pattern}\n        dotShape={dotShape}\n        animated={animated}\n        phase={matrixPhase}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        reducedMotion={reducedMotion}\n        animationResolver={animationResolver}\n      />\n    );\n  }\n\n  Dotm3x3Component.displayName = displayName;\n  return Dotm3x3Component;\n}\n\nconst GLYPH_SPIN_BASE_OPACITY = 0.09;\nconst GLYPH_SPIN_PEAK_OPACITY = 0.88;\nconst GLYPH_SPIN_STEP_MS = 180;\nconst GLYPH_SPIN_ROTATION_STEPS = 4;\nconst GLYPH_SPIN_CYCLE_MS_BASE = GLYPH_SPIN_STEP_MS * GLYPH_SPIN_ROTATION_STEPS;\n\nfunction glyphSpinSmoothstep(value: number): number {\n  const t = Math.min(1, Math.max(0, value));\n  return t * t * (3 - 2 * t);\n}\n\nexport function rotate3x3(pattern: readonly number[], turns: number): readonly number[] {\n  const t = ((turns % GLYPH_SPIN_ROTATION_STEPS) + GLYPH_SPIN_ROTATION_STEPS) % GLYPH_SPIN_ROTATION_STEPS;\n  if (t === 0) {\n    return pattern;\n  }\n\n  let out = [...pattern];\n  for (let k = 0; k < t; k += 1) {\n    const next = new Array<number>(9).fill(0);\n    for (let i = 0; i < 9; i += 1) {\n      const r = Math.floor(i / 3);\n      const c = i % 3;\n      const nr = c;\n      const nc = 2 - r;\n      next[nr * 3 + nc] = out[i]!;\n    }\n    out = next;\n  }\n  return out;\n}\n\nfunction glyphSpinOpacity(current: readonly number[], next: readonly number[], index: number, t: number): number {\n  const weight = (current[index] ?? 0) * (1 - t) + (next[index] ?? 0) * t;\n  return GLYPH_SPIN_BASE_OPACITY + weight * (GLYPH_SPIN_PEAK_OPACITY - GLYPH_SPIN_BASE_OPACITY);\n}\n\ntype GlyphSpin3ComponentProps = DotMatrixCommonProps;\n\nexport function createGlyphSpin3Component(\n  displayName: string,\n  glyph: readonly number[],\n  defaultSpeed = 1\n) {\n  function GlyphSpin3Component({\n    speed = defaultSpeed,\n    pattern = \"full\",\n    dotShape = \"circle\",\n    animated = true,\n    hoverAnimated = false,\n    ...rest\n  }: GlyphSpin3ComponentProps) {\n    const reducedMotion = usePrefersReducedMotion();\n    const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n      animated: Boolean(animated && !reducedMotion),\n      hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n      speed\n    });\n    const cyclePhase = useCyclePhase({\n      active: !reducedMotion && matrixPhase !== \"idle\",\n      cycleMsBase: GLYPH_SPIN_CYCLE_MS_BASE,\n      speed\n    });\n\n    const animationResolver = useMemo<DotAnimationResolver>(() => {\n      const scaledPhase = cyclePhase * GLYPH_SPIN_ROTATION_STEPS;\n      const turns = Math.floor(scaledPhase) % GLYPH_SPIN_ROTATION_STEPS;\n      const segmentT = glyphSpinSmoothstep(scaledPhase - Math.floor(scaledPhase));\n      const current = rotate3x3(glyph, turns);\n      const next = rotate3x3(glyph, turns + 1);\n\n      return ({ isActive, index, reducedMotion: rm, phase }) => {\n        if (!isActive) {\n          return { className: \"dmx-inactive\" };\n        }\n\n        if (rm || phase === \"idle\") {\n          return { style: { opacity: glyphSpinOpacity(glyph, glyph, index, 0) } };\n        }\n\n        return { style: { opacity: glyphSpinOpacity(current, next, index, segmentT) } };\n      };\n    }, [cyclePhase]);\n\n    return (\n      <DotMatrix3Base\n        {...rest}\n        speed={speed}\n        pattern={pattern}\n        dotShape={dotShape}\n        animated={animated}\n        phase={matrixPhase}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        reducedMotion={reducedMotion}\n        animationResolver={animationResolver}\n      />\n    );\n  }\n\n  GlyphSpin3Component.displayName = displayName;\n  return GlyphSpin3Component;\n}\n\n"
    },
    {
      "path": "components/ui/dotmatrix-hooks.ts",
      "type": "registry:lib",
      "content": "\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport type { DotMatrixPhase } from \"@/components/ui/dotmatrix-core\";\n\nexport function usePrefersReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\n    const update = () => {\n      setPrefersReducedMotion(query.matches);\n    };\n\n    update();\n    query.addEventListener(\"change\", update);\n\n    return () => {\n      query.removeEventListener(\"change\", update);\n    };\n  }, []);\n\n  return prefersReducedMotion;\n}\n\nexport interface UseCyclePhaseOptions {\n  active: boolean;\n  cycleMsBase: number;\n  speed?: number;\n}\n\nexport function useCyclePhase({ active, cycleMsBase, speed = 1 }: UseCyclePhaseOptions): number {\n  const [phase, setPhase] = useState(0);\n\n  useEffect(() => {\n    if (!active) {\n      setPhase(0);\n      return;\n    }\n\n    const safeSpeed = speed > 0 ? speed : 1;\n    const raw = cycleMsBase / safeSpeed;\n    const cycleMs = raw > 0 && Number.isFinite(raw) ? raw : 1000;\n    const start = performance.now();\n    let rafId = 0;\n\n    const tick = (now: number) => {\n      const elapsed = ((now - start) % cycleMs + cycleMs) % cycleMs;\n      setPhase(elapsed / cycleMs);\n      rafId = requestAnimationFrame(tick);\n    };\n\n    rafId = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(rafId);\n  }, [active, cycleMsBase, speed]);\n\n  return phase;\n}\n\ninterface UseSteppedCycleOptions {\n  active: boolean;\n  cycleMsBase: number;\n  steps: number;\n  speed?: number;\n  idleStep?: number;\n}\n\ntype FrameListener = (now: number) => void;\n\nconst listeners = new Set<FrameListener>();\nlet rafId: number | null = null;\n\nfunction emit(now: number) {\n  listeners.forEach((listener) => {\n    listener(now);\n  });\n}\n\nfunction tick(now: number) {\n  emit(now);\n  if (listeners.size > 0) {\n    rafId = window.requestAnimationFrame(tick);\n  } else {\n    rafId = null;\n  }\n}\n\nfunction subscribeFrame(listener: FrameListener) {\n  listeners.add(listener);\n  if (rafId === null) {\n    rafId = window.requestAnimationFrame(tick);\n  }\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0 && rafId !== null) {\n      window.cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n  };\n}\n\nexport function useSteppedCycle({\n  active,\n  cycleMsBase,\n  steps,\n  speed = 1,\n  idleStep = 0\n}: UseSteppedCycleOptions): number {\n  const safeSteps = Math.max(1, Math.floor(steps));\n  const safeSpeed = speed > 0 ? speed : 1;\n  const rawCycleMs = cycleMsBase / safeSpeed;\n  const rawStepMs = rawCycleMs / safeSteps;\n  const stepMs = rawStepMs > 0 && Number.isFinite(rawStepMs) ? rawStepMs : 1;\n  const cycleMs = stepMs * safeSteps;\n\n  const [step, setStep] = useState(() => (active ? 0 : idleStep));\n  const startMsRef = useRef<number>(0);\n  const activeRef = useRef(false);\n  const currentStepRef = useRef(idleStep);\n\n  useEffect(() => {\n    if (!active) {\n      activeRef.current = false;\n      currentStepRef.current = idleStep;\n      setStep(idleStep);\n      return;\n    }\n\n    const updateStep = (now: number) => {\n      if (!activeRef.current) {\n        startMsRef.current = now;\n        activeRef.current = true;\n      }\n\n      const elapsed = Math.max(0, now - startMsRef.current);\n      const nextStep = Math.floor((elapsed % cycleMs) / stepMs) % safeSteps;\n      if (nextStep !== currentStepRef.current) {\n        currentStepRef.current = nextStep;\n        setStep(nextStep);\n      }\n    };\n\n    updateStep(performance.now());\n    return subscribeFrame(updateStep);\n  }, [active, cycleMs, idleStep, safeSteps, stepMs]);\n\n  return active ? step : idleStep;\n}\n\ninterface UseDotMatrixPhasesOptions {\n  animated?: boolean;\n  hoverAnimated?: boolean;\n  speed?: number;\n}\n\ninterface DotMatrixPhasesResult {\n  phase: DotMatrixPhase;\n  onMouseEnter: () => void;\n  onMouseLeave: () => void;\n}\n\nexport function useDotMatrixPhases({\n  animated = false,\n  hoverAnimated = false,\n  speed = 1\n}: UseDotMatrixPhasesOptions): DotMatrixPhasesResult {\n  const safeSpeed = speed > 0 ? speed : 1;\n  const autoRun = Boolean(animated && !hoverAnimated);\n  const [hoverPhase, setHoverPhase] = useState<DotMatrixPhase>(\"idle\");\n  const timeouts = useRef<number[]>([]);\n  const hoverGen = useRef(0);\n\n  const clearTimers = useCallback(() => {\n    for (let i = 0; i < timeouts.current.length; i += 1) {\n      window.clearTimeout(timeouts.current[i]!);\n    }\n    timeouts.current = [];\n  }, []);\n\n  useEffect(() => {\n    hoverGen.current += 1;\n    clearTimers();\n    return clearTimers;\n  }, [autoRun, hoverAnimated, clearTimers]);\n\n  const onMouseEnter = useCallback(() => {\n    if (!hoverAnimated || autoRun) {\n      return;\n    }\n    clearTimers();\n    const gen = ++hoverGen.current;\n    setHoverPhase(\"collapse\");\n    const collapseMs = Math.max(1, Math.round(300 / safeSpeed));\n    const id = window.setTimeout(() => {\n      if (hoverGen.current !== gen) {\n        return;\n      }\n      setHoverPhase(\"hoverRipple\");\n    }, collapseMs);\n    timeouts.current.push(id);\n  }, [hoverAnimated, autoRun, safeSpeed, clearTimers]);\n\n  const onMouseLeave = useCallback(() => {\n    if (!hoverAnimated || autoRun) {\n      return;\n    }\n    hoverGen.current += 1;\n    clearTimers();\n    setHoverPhase(\"idle\");\n  }, [hoverAnimated, autoRun, clearTimers]);\n\n  const phase: DotMatrixPhase = autoRun ? \"loadingRipple\" : hoverAnimated ? hoverPhase : \"idle\";\n\n  return useMemo(\n    () => ({\n      phase,\n      onMouseEnter,\n      onMouseLeave\n    }),\n    [phase, onMouseEnter, onMouseLeave]\n  );\n}\n"
    },
    {
      "path": "components/dotmatrix-loader.css",
      "type": "registry:style",
      "content": ".dmx-root {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  /* One base loop at speed=1; --dmx-speed from JS scales inversely with the speed prop */\n  --dmx-cycle: 1500ms;\n  /* Rest / mid / bright — override via opacityBase, opacityMid, opacityPeak on the component */\n  --dmx-opacity-base: 0.16;\n  --dmx-opacity-mid: 0.32;\n  --dmx-opacity-peak: 1;\n  --dmx-halo-level: 0;\n}\n\n.dmx-grid {\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  grid-template-rows: repeat(5, minmax(0, 1fr));\n}\n\n.dmx-dot {\n  border-radius: 999px;\n  clip-path: none;\n  display: block;\n  background: var(--dmx-dot-fill, currentColor);\n  /* Matches prior 0.24 with default base/mid */\n  opacity: calc(0.5 * (var(--dmx-opacity-base) + var(--dmx-opacity-mid)));\n  --dmx-bloom-level: 0;\n  transform-origin: center;\n  transform: none;\n  will-change: opacity;\n}\n\n.dmx-root.dmx-dot-shape-circle .dmx-dot {\n  border-radius: 999px;\n  clip-path: none;\n  -webkit-mask: none;\n  mask: none;\n}\n\n.dmx-root.dmx-dot-shape-square .dmx-dot {\n  border-radius: 0;\n  clip-path: none;\n  -webkit-mask: none;\n  mask: none;\n}\n\n.dmx-root.dmx-dot-shape-diamond .dmx-dot {\n  border-radius: 0;\n  clip-path: none;\n  -webkit-mask: none;\n  mask: none;\n  transform: rotate(45deg) scale(0.7071067812);\n}\n\n.dmx-root.dmx-dot-shape-hearts .dmx-dot {\n  position: relative;\n  border-radius: 0;\n  clip-path: none;\n  transform: none;\n  background: none;\n  -webkit-mask: none;\n  mask: none;\n}\n\n.dmx-root.dmx-dot-shape-hearts .dmx-dot::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--dmx-dot-fill, currentColor);\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='black' d='m8.593.827c-1.008.012-1.953.464-2.593,1.227-.641-.762-1.586-1.214-2.598-1.227C1.519.839-.007,2.378,0,4.257,0,8.362,4.201,10.875,5.488,11.547h0c.16.084.336.125.511.125s.352-.042.511-.125c1.287-.672,5.489-3.184,5.489-7.289.007-1.88-1.519-3.42-3.407-3.431Z'/%3E%3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='black' d='m8.593.827c-1.008.012-1.953.464-2.593,1.227-.641-.762-1.586-1.214-2.598-1.227C1.519.839-.007,2.378,0,4.257,0,8.362,4.201,10.875,5.488,11.547h0c.16.084.336.125.511.125s.352-.042.511-.125c1.287-.672,5.489-3.184,5.489-7.289.007-1.88-1.519-3.42-3.407-3.431Z'/%3E%3C/svg%3E\");\n  -webkit-mask-position: center;\n  mask-position: center;\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n}\n\n.dmx-bloom .dmx-dot {\n  filter:\n    drop-shadow(\n      0 0\n      calc(\n        var(--dmx-dot-size, 3px) * 0.75 *\n          max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0))\n      )\n      currentColor\n    )\n    drop-shadow(\n      0 0\n      calc(\n        var(--dmx-dot-size, 3px) * 1.35 *\n          max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0))\n      )\n      currentColor\n    );\n  will-change: opacity, filter;\n}\n\n/* Halo: modestly wider falloff than selective bloom (same --dmx-bloom-level on each dot). */\n.dmx-root.dmx-bloom-halo.dmx-bloom .dmx-dot {\n  filter:\n    drop-shadow(\n      0 0\n      calc(\n        var(--dmx-dot-size, 3px) * 0.92 *\n          max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0))\n      )\n      currentColor\n    )\n    drop-shadow(\n      0 0\n      calc(\n        var(--dmx-dot-size, 3px) * 1.62 *\n          max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0))\n      )\n      currentColor\n    )\n    drop-shadow(\n      0 0\n      calc(\n        var(--dmx-dot-size, 3px) * 2.55 *\n          max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0))\n      )\n      currentColor\n    );\n  will-change: opacity, filter;\n}\n\n/* Bloom strength comes from inline --dmx-bloom-level (see opacityToBloomLevel). */\n\n.dmx-muted .dmx-dot {\n  opacity: calc(0.44 * var(--dmx-opacity-mid));\n  --dmx-bloom-level: 0;\n}\n\n/* Inactive off-cells (Base also sets inline opacity/animation:none so keyframes cannot win). */\n.dmx-dot.dmx-inactive {\n  opacity: 0 !important;\n  --dmx-bloom-level: 0;\n  animation: none !important;\n  visibility: hidden;\n  pointer-events: none;\n  will-change: auto;\n  filter: none;\n}\n\n.dmx-ripple {\n  animation: dmx-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1)\n    infinite;\n  animation-delay: calc(var(--dmx-ripple-ring, 0) * 0.2333 * var(--dmx-cycle) * var(--dmx-speed, 1));\n  will-change: opacity;\n}\n\n.dmx-ripple-echo {\n  animation: dmx-ripple-echo calc(var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite;\n  animation-delay: calc(\n    (var(--dmx-ripple-ring, 0) * 0.14 + var(--dmx-ripple-parity, 0) * 0.03) *\n      var(--dmx-cycle) *\n      var(--dmx-speed, 1)\n  );\n  will-change: opacity;\n}\n\n.dmx-center-origin-ripple {\n  animation: dmx-center-origin-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite;\n  animation-delay: calc(\n    var(--dmx-center-ripple-ring, 0) * 0.16 * var(--dmx-cycle) * var(--dmx-speed, 1)\n  );\n  will-change: opacity;\n}\n\n.dmx-collapse {\n  animation: dmx-collapse calc(var(--dmx-cycle) * 0.2 * var(--dmx-speed, 1)) ease-in forwards;\n  animation-delay: calc(\n    (4 - var(--dmx-manhattan, 0)) * 0.032 * var(--dmx-cycle) * var(--dmx-speed, 1)\n  );\n}\n\n.dmx-hover-ripple {\n  animation: dmx-hover-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite;\n  animation-delay: calc(var(--dmx-distance, 0) * 0.127 * var(--dmx-cycle) * var(--dmx-speed, 1));\n}\n\n.dmx-path {\n  animation: dmx-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1)\n    infinite;\n  animation-delay: calc(var(--dmx-path, 0) * 0.2333 * var(--dmx-cycle) * var(--dmx-speed, 1));\n  will-change: opacity;\n}\n\n.dmx-root.dmx-matrix-3 {\n  --dmx-cycle: 1500ms;\n}\n\n.dmx-path-3 {\n  animation: dmx-ripple-3 calc(0.68 * var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1)\n    infinite;\n  animation-delay: calc(var(--dmx-path, 0) * 0.19 * var(--dmx-cycle) * var(--dmx-speed, 1));\n  will-change: opacity;\n}\n\n.dmx-diagonal-alt-sweep {\n  animation: dmx-diagonal-alt-sweep calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;\n  animation-delay: calc(\n    (var(--dmx-path, 0) * 0.2 + var(--dmx-diagonal-parity, 0) * 0.5) *\n      var(--dmx-cycle) *\n      var(--dmx-speed, 1)\n  );\n  will-change: opacity;\n}\n\n.dmx-spiral-snake {\n  animation: dmx-spiral-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;\n  animation-delay: calc(var(--dmx-spiral-order, 0) * 0.04 * var(--dmx-cycle) * var(--dmx-speed, 1));\n  will-change: opacity;\n}\n\n.dmx-spiral-snake-3 {\n  animation: dmx-spiral-snake calc(0.78 * var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;\n  animation-delay: calc(var(--dmx-spiral-order, 0) * 0.038 * var(--dmx-cycle) * var(--dmx-speed, 1));\n  will-change: opacity;\n}\n\n.dmx-center-ripple-3 {\n  animation: dmx-center-origin-ripple calc(0.82 * var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite;\n  animation-delay: calc(\n    var(--dmx-center-ripple-ring, 0) * 0.11 * var(--dmx-cycle) * var(--dmx-speed, 1)\n  );\n  will-change: opacity;\n}\n\n.dmx-snake-path-3 {\n  animation: dmx-ripple-3 calc(1.04 * var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1)\n    infinite;\n  animation-delay: calc(var(--dmx-snake-order, 0) * 0.085 * var(--dmx-cycle) * var(--dmx-speed, 1));\n  will-change: opacity;\n}\n\n.dmx-frame-chase-3 {\n  animation: dmx-ripple-3 calc(0.98 * var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1)\n    infinite;\n  animation-delay: calc(var(--dmx-frame-order, 0) * 0.09 * var(--dmx-cycle) * var(--dmx-speed, 1));\n  will-change: opacity;\n}\n\n.dmx-core-pulse-3 {\n  animation: dmx-ripple-3 calc(0.46 * var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1)\n    infinite;\n  will-change: opacity;\n}\n\n.dmx-distance-ripple-3 {\n  animation: dmx-ripple-3 calc(1.3 * var(--dmx-cycle) * var(--dmx-speed, 1)) ease-out infinite;\n  animation-delay: calc(var(--dmx-distance, 0) * 0.13 * var(--dmx-cycle) * var(--dmx-speed, 1));\n  will-change: opacity;\n}\n\n.dmx-ripple-echo-3 {\n  animation: dmx-ripple-echo calc(1.06 * var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite;\n  animation-delay: calc(\n    (var(--dmx-ripple-ring, 0) * 0.1 + var(--dmx-ripple-parity, 0) * 0.02) *\n      var(--dmx-cycle) *\n      var(--dmx-speed, 1)\n  );\n  will-change: opacity;\n}\n\n.dmx-diagonal-snake {\n  animation: dmx-diagonal-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;\n  animation-delay: calc(\n    var(--dmx-diagonal-snake-order, 0) * 0.04 * var(--dmx-cycle) * var(--dmx-speed, 1)\n  );\n  will-change: opacity;\n}\n\n.dmx-outer-snake {\n  animation: dmx-ring-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;\n  animation-delay: calc(var(--dmx-outer-order, 0) * 0.0625 * var(--dmx-cycle) * var(--dmx-speed, 1));\n  will-change: opacity;\n}\n\n.dmx-middle-snake {\n  animation: dmx-ring-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;\n  animation-delay: calc(var(--dmx-middle-order, 0) * 0.125 * var(--dmx-cycle) * var(--dmx-speed, 1));\n  will-change: opacity;\n}\n\n@keyframes dmx-ripple {\n  0%,\n  100% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  50% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n}\n\n@keyframes dmx-ripple-3 {\n  0%,\n  100% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  3% {\n    opacity: calc(0.62 * var(--dmx-opacity-mid) + 0.38 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  6% {\n    opacity: calc(0.35 * var(--dmx-opacity-peak) + 0.65 * var(--dmx-opacity-mid));\n    --dmx-bloom-level: 0.35;\n  }\n\n  10% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  14% {\n    opacity: calc(0.35 * var(--dmx-opacity-peak) + 0.65 * var(--dmx-opacity-mid));\n    --dmx-bloom-level: 0.35;\n  }\n\n  17% {\n    opacity: calc(0.62 * var(--dmx-opacity-mid) + 0.38 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  20% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-ripple-echo {\n  0%,\n  100% {\n    opacity: calc(0.625 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  28% {\n    opacity: calc(0.98 * var(--dmx-opacity-peak));\n    --dmx-bloom-level: 0.9;\n  }\n\n  56% {\n    opacity: var(--dmx-opacity-mid);\n    --dmx-bloom-level: 0;\n  }\n\n  78% {\n    opacity: calc(0.68 * var(--dmx-opacity-peak) + 0.32 * var(--dmx-opacity-mid));\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-center-origin-ripple {\n  0%,\n  100% {\n    opacity: calc(0.625 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  34% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  60% {\n    opacity: calc(0.5 * (var(--dmx-opacity-base) + var(--dmx-opacity-mid)));\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-collapse {\n  0% {\n    opacity: calc(0.95 * var(--dmx-opacity-peak) + 0.05 * var(--dmx-opacity-mid));\n    --dmx-bloom-level: 0.75;\n  }\n\n  100% {\n    opacity: calc(0.375 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-hover-ripple {\n  0% {\n    opacity: calc(0.5 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  45% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  100% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-diagonal-alt-sweep {\n  0%,\n  100% {\n    opacity: calc(0.5 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  14% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  30% {\n    opacity: calc(0.75 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-spiral-snake {\n  0%,\n  100% {\n    opacity: calc(0.5 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  8% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  16% {\n    opacity: calc(0.5 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid) + 0.1 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  24% {\n    opacity: calc(0.25 * var(--dmx-opacity-peak) + 0.45 * var(--dmx-opacity-mid) + 0.3 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  32% {\n    opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  40% {\n    opacity: calc(0.75 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-diagonal-snake {\n  0%,\n  100% {\n    opacity: calc(0.5 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  8% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  16% {\n    opacity: calc(0.5 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid) + 0.1 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  24% {\n    opacity: calc(0.25 * var(--dmx-opacity-peak) + 0.45 * var(--dmx-opacity-mid) + 0.3 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  32% {\n    opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  40% {\n    opacity: calc(0.75 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-ring-snake {\n  0%,\n  100% {\n    opacity: calc(0.5 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  10% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  20% {\n    opacity: calc(0.45 * var(--dmx-opacity-peak) + 0.45 * var(--dmx-opacity-mid) + 0.1 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  30% {\n    opacity: calc(0.2 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid) + 0.4 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  40% {\n    opacity: calc(0.875 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n}\n\n.dmx-square9-bit {\n  animation-duration: calc(5200ms * var(--dmx-speed, 1));\n  animation-timing-function: steps(52, end);\n  animation-iteration-count: infinite;\n  will-change: opacity;\n}\n\n.dmx-square9-d1 {\n  animation-name: dmx-square9-d1;\n}\n\n.dmx-square9-d2 {\n  animation-name: dmx-square9-d2;\n}\n\n.dmx-square9-d3 {\n  animation-name: dmx-square9-d3;\n}\n\n.dmx-square9-d4 {\n  animation-name: dmx-square9-d4;\n}\n\n.dmx-square9-d5 {\n  animation-name: dmx-square9-d5;\n}\n\n.dmx-square9-d6 {\n  animation-name: dmx-square9-d6;\n}\n\n@keyframes dmx-square9-d1 {\n  0%,\n  3.846154% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  3.846154%,\n  30.769231% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  30.769231%,\n  46.153846% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  46.153846%,\n  50% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  50%,\n  53.846154% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  53.846154%,\n  57.692308% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  57.692308%,\n  65.384615% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  65.384615%,\n  71.153846% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  71.153846%,\n  80.769231% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  80.769231%,\n  84.615385% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  84.615385%,\n  88.461538% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  88.461538%,\n  92.307692% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  92.307692%,\n  100% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-square9-d2 {\n  0%,\n  5.769231% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  5.769231%,\n  25% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  25%,\n  30.769231% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  30.769231%,\n  36.538462% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  36.538462%,\n  50% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  50%,\n  53.846154% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  53.846154%,\n  57.692308% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  57.692308%,\n  61.538462% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  61.538462%,\n  65.384615% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  65.384615%,\n  76.923077% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  76.923077%,\n  80.769231% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  80.769231%,\n  84.615385% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  84.615385%,\n  88.461538% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  88.461538%,\n  92.307692% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  92.307692%,\n  100% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-square9-d3 {\n  0%,\n  7.692308% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  7.692308%,\n  25% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  25%,\n  36.538462% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  36.538462%,\n  42.307692% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  42.307692%,\n  46.153846% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  46.153846%,\n  50% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  50%,\n  53.846154% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  53.846154%,\n  57.692308% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  57.692308%,\n  71.153846% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  71.153846%,\n  76.923077% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  76.923077%,\n  80.769231% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  80.769231%,\n  84.615385% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  84.615385%,\n  88.461538% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  88.461538%,\n  92.307692% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  92.307692%,\n  100% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-square9-d4 {\n  0%,\n  13.461538% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  13.461538%,\n  30.769231% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  30.769231%,\n  50% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  50%,\n  53.846154% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  53.846154%,\n  57.692308% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  57.692308%,\n  61.538462% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  61.538462%,\n  65.384615% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  65.384615%,\n  71.153846% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  71.153846%,\n  84.615385% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  84.615385%,\n  88.461538% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  88.461538%,\n  92.307692% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  92.307692%,\n  96.153846% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  96.153846%,\n  100% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-square9-d5 {\n  0%,\n  15.384615% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  15.384615%,\n  25% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  25%,\n  30.769231% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  30.769231%,\n  36.538462% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  36.538462%,\n  46.153846% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  46.153846%,\n  50% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  50%,\n  53.846154% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  53.846154%,\n  57.692308% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  57.692308%,\n  65.384615% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  65.384615%,\n  76.923077% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  76.923077%,\n  84.615385% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  84.615385%,\n  88.461538% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  88.461538%,\n  92.307692% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  92.307692%,\n  96.153846% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  96.153846%,\n  100% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n}\n\n@keyframes dmx-square9-d6 {\n  0%,\n  17.307692% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  17.307692%,\n  25% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  25%,\n  36.538462% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  36.538462%,\n  42.307692% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  42.307692%,\n  50% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  50%,\n  53.846154% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  53.846154%,\n  57.692308% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  57.692308%,\n  61.538462% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  61.538462%,\n  71.153846% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  71.153846%,\n  76.923077% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  76.923077%,\n  84.615385% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  84.615385%,\n  88.461538% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  88.461538%,\n  92.307692% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n\n  92.307692%,\n  96.153846% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  96.153846%,\n  100% {\n    opacity: var(--dmx-opacity-base);\n    --dmx-bloom-level: 0;\n  }\n}\n\n.dmx-square6-col-snake {\n  animation: dmx-square6-col-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) steps(5, end) infinite;\n  animation-delay: calc(var(--dmx-col-pos, 0) * 0.2 * var(--dmx-cycle) * var(--dmx-speed, 1));\n  will-change: opacity;\n}\n\n@keyframes dmx-square6-col-snake {\n  0%,\n  20% {\n    opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.25 * var(--dmx-opacity-mid) + 0.15 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  20%,\n  40% {\n    opacity: calc(0.3 * var(--dmx-opacity-peak) + 0.5 * var(--dmx-opacity-mid) + 0.2 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  40%,\n  60% {\n    opacity: calc(0.6 * var(--dmx-opacity-mid) + 0.4 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  60%,\n  80% {\n    opacity: calc(0.2 * var(--dmx-opacity-mid) + 0.8 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  80%,\n  100% {\n    opacity: calc(0.625 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n}\n\n.dmx-circular2-ring {\n  animation: dmx-circular2-ring calc(var(--dmx-cycle) * var(--dmx-speed, 1)) steps(12, end) infinite;\n  animation-delay: calc(var(--dmx-ring-order, 0) * 0.0833333333 * var(--dmx-cycle) * var(--dmx-speed, 1));\n  will-change: opacity;\n}\n\n@keyframes dmx-circular2-ring {\n  0%,\n  8.333333% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  8.333333%,\n  16.666667% {\n    opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid));\n    --dmx-bloom-level: 0;\n  }\n\n  16.666667%,\n  25% {\n    opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  25%,\n  33.333333% {\n    opacity: calc(0.3 * var(--dmx-opacity-mid) + 0.7 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  33.333333%,\n  41.666667% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  41.666667%,\n  50% {\n    opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid));\n    --dmx-bloom-level: 0;\n  }\n\n  50%,\n  58.333333% {\n    opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  58.333333%,\n  66.666667% {\n    opacity: calc(0.3 * var(--dmx-opacity-mid) + 0.7 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  66.666667%,\n  75% {\n    opacity: var(--dmx-opacity-peak);\n    --dmx-bloom-level: 1;\n  }\n\n  75%,\n  83.333333% {\n    opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid));\n    --dmx-bloom-level: 0;\n  }\n\n  83.333333%,\n  91.666667% {\n    opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n\n  91.666667%,\n  100% {\n    opacity: calc(0.3 * var(--dmx-opacity-mid) + 0.7 * var(--dmx-opacity-base));\n    --dmx-bloom-level: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dmx-dot,\n  .dmx-ripple,\n  .dmx-ripple-echo,\n  .dmx-center-origin-ripple,\n  .dmx-collapse,\n  .dmx-hover-ripple,\n  .dmx-path,\n  .dmx-path-3,\n  .dmx-diagonal-alt-sweep,\n  .dmx-spiral-snake,\n  .dmx-spiral-snake-3,\n  .dmx-center-ripple-3,\n  .dmx-snake-path-3,\n  .dmx-frame-chase-3,\n  .dmx-core-pulse-3,\n  .dmx-distance-ripple-3,\n  .dmx-ripple-echo-3,\n  .dmx-diagonal-snake,\n  .dmx-outer-snake,\n  .dmx-middle-snake,\n  .dmx-square9-bit,\n  .dmx-square6-col-snake,\n  .dmx-circular2-ring {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n"
    },
    {
      "path": "components/ui/dotm-square-2.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { rowMajorIndex } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare2Props = DotMatrixCommonProps;\n\nconst SNAKE_TAIL = [1, 0.82, 0.68, 0.54, 0.42, 0.31, 0.22, 0.14] as const;\nconst BASE_OPACITY = 0.08;\n\nfunction buildRowCyclePath(): number[] {\n  const path: number[] = [];\n  const push = (row: number, col: number) => path.push(rowMajorIndex(row, col));\n\n  // 1st col: bottom -> top\n  for (let row = 4; row >= 0; row -= 1) push(row, 0);\n  // top to 3rd col\n  push(0, 1);\n  push(0, 2);\n  // 3rd col: top -> bottom\n  for (let row = 1; row <= 4; row += 1) push(row, 2);\n  // bottom left to 2nd col\n  push(4, 1);\n  // 2nd col: bottom -> top\n  for (let row = 3; row >= 0; row -= 1) push(row, 1);\n  // top right to 4th col\n  push(0, 2);\n  push(0, 3);\n  // 4th col: top -> bottom\n  for (let row = 1; row <= 4; row += 1) push(row, 3);\n  // bottom left to 3rd col\n  push(4, 2);\n  // 3rd col: bottom -> top\n  for (let row = 3; row >= 0; row -= 1) push(row, 2);\n  // top right to 5th col\n  push(0, 3);\n  push(0, 4);\n  // 5th col: top -> bottom\n  for (let row = 1; row <= 4; row += 1) push(row, 4);\n\n  return path;\n}\n\nexport function DotmSquare2({\n  speed = 1.15,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare2Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const route = useMemo(() => buildRowCyclePath(), []);\n  const routeLen = route.length;\n  const head = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\" && routeLen > 0,\n    cycleMsBase: 1500,\n    steps: routeLen,\n    speed,\n  });\n\n  const visitsByIndex = useMemo(() => {\n    const visits = new Map<number, number[]>();\n    for (let step = 0; step < routeLen; step += 1) {\n      const index = route[step]!;\n      const list = visits.get(index) ?? [];\n      list.push(step);\n      visits.set(index, list);\n    }\n    return visits;\n  }, [route, routeLen]);\n\n  const animationResolver = useMemo<DotAnimationResolver>(() => {\n    return ({ isActive, index }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      if (routeLen <= 0) {\n        return { style: { opacity: BASE_OPACITY } };\n      }\n\n      const visits = visitsByIndex.get(index) ?? [];\n      let opacity = BASE_OPACITY;\n      for (const stepIndex of visits) {\n        const distance = (head - stepIndex + routeLen) % routeLen;\n        if (distance >= 0 && distance < SNAKE_TAIL.length) {\n          opacity = Math.max(opacity, SNAKE_TAIL[distance]!);\n        }\n      }\n\n      return { style: { opacity } };\n    };\n  }, [head, routeLen, visitsByIndex]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={animationResolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-3.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { spiralInwardNormFromIndex, spiralInwardOrderValue } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare3Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, index, reducedMotion, phase }) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const order = spiralInwardOrderValue(index);\n  const pathNorm = spiralInwardNormFromIndex(index);\n  const style = { \"--dmx-spiral-order\": order } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: 0.16 + pathNorm * 0.78\n      }\n    };\n  }\n\n  return { className: \"dmx-spiral-snake\", style };\n};\n\nexport function DotmSquare3({\n  speed = 1.35,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare3Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={animationResolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-4.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport {\n  middleRingAntiClockwiseNormFromIndex,\n  middleRingAntiClockwiseOrderValue,\n  outerRingClockwiseNormFromIndex,\n  outerRingClockwiseOrderValue\n} from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare4Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, index, row, col, reducedMotion, phase }) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const isCenter = row === 2 && col === 2;\n  if (isCenter) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const outerOrder = outerRingClockwiseOrderValue(index);\n  if (outerOrder >= 0) {\n    const outerNorm = outerRingClockwiseNormFromIndex(index);\n    const style = { \"--dmx-outer-order\": outerOrder } as CSSProperties;\n    if (reducedMotion || phase === \"idle\") {\n      return {\n        style: {\n          ...style,\n          opacity: 0.2 + outerNorm * 0.72\n        }\n      };\n    }\n    return { className: \"dmx-outer-snake\", style };\n  }\n\n  const middleOrder = middleRingAntiClockwiseOrderValue(index);\n  const middleNorm = middleRingAntiClockwiseNormFromIndex(index);\n  const style = { \"--dmx-middle-order\": middleOrder } as CSSProperties;\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: 0.2 + middleNorm * 0.72\n      }\n    };\n  }\n\n  return { className: \"dmx-middle-snake\", style };\n};\n\nexport function DotmSquare4({\n  speed = 1.35,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare4Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={animationResolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-5.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { diagonalSnakeNormFromIndex, diagonalSnakeOrderValue } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare5Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, index, reducedMotion, phase }) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const order = diagonalSnakeOrderValue(index);\n  const pathNorm = diagonalSnakeNormFromIndex(index);\n  const style = { \"--dmx-diagonal-snake-order\": order } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: 0.16 + pathNorm * 0.78\n      }\n    };\n  }\n\n  return { className: \"dmx-diagonal-snake\", style };\n};\n\nexport function DotmSquare5({\n  speed = 1.35,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare5Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={animationResolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-6.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo, type CSSProperties } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare6Props = DotMatrixCommonProps;\n\nconst COLUMN_HEIGHT = 5;\n\nexport function DotmSquare6({\n  speed = 2.2,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare6Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n\n  const animationResolver = useMemo<DotAnimationResolver>(() => {\n    return ({ isActive, row, col, phase }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const goesUp = col % 2 === 0;\n      const position = goesUp ? COLUMN_HEIGHT - 1 - row : row;\n\n      if (reducedMotion || phase === \"idle\") {\n        return { style: { opacity: 0.22 + (position / (COLUMN_HEIGHT - 1)) * 0.66 } };\n      }\n\n      return {\n        className: \"dmx-square6-col-snake\",\n        style: { \"--dmx-col-pos\": position } as CSSProperties\n      };\n    };\n  }, [reducedMotion]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={animationResolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-7.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { rowMajorIndex } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare7Props = DotMatrixCommonProps;\n\ntype FrameCell = \".\" | \"o\" | \"x\" | \"c\";\n\nconst BASE_OPACITY = 0.08;\nconst SETTLED_OPACITY = 0.42;\nconst ACTIVE_OPACITY = 1;\nconst CLEAR_OPACITY = 0.88;\nconst IDLE_STEP = 10;\n\nconst FRAME_MASKS: readonly string[] = [\n  \".....\" + \".....\" + \".....\" + \".....\" + \"ooooo\",\n  \".....\" + \".....\" + \".....\" + \"ooooo\" + \"ooooo\",\n  \".....\" + \".....\" + \"ooooo\" + \"ooooo\" + \"ooooo\",\n  \".....\" + \"ooooo\" + \"ooooo\" + \"ooooo\" + \"ooooo\",\n  \"ooooo\" + \"ooooo\" + \"ooooo\" + \"ooooo\" + \"ooooo\",\n  \"ccccc\" + \"ccccc\" + \"ccccc\" + \"ccccc\" + \"ccccc\",\n  \".....\" + \".....\" + \".....\" + \".....\" + \".....\",\n  \"ccccc\" + \"ccccc\" + \"ccccc\" + \"ccccc\" + \"ccccc\",\n  \".....\" + \".....\" + \".....\" + \".....\" + \".....\",\n  \".....\" + \".....\" + \".....\" + \".....\" + \".....\"\n];\n\nconst FRAME_SEQUENCE: readonly number[] = [0, 1, 2, 3, 4, 4, 5, 6, 7, 8, 9];\n\nfunction maskCell(mask: string, row: number, col: number): FrameCell {\n  return (mask[rowMajorIndex(row, col)] as FrameCell | undefined) ?? \".\";\n}\n\nexport function DotmSquare7({\n  speed = 1.35,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare7Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const sequenceLength = FRAME_SEQUENCE.length;\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\" && sequenceLength > 0,\n    cycleMsBase: 1900,\n    steps: sequenceLength,\n    speed,\n    idleStep: Math.min(IDLE_STEP, sequenceLength - 1)\n  });\n\n  const frame = FRAME_SEQUENCE[step] ?? FRAME_SEQUENCE[0] ?? 0;\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ isActive, row, col }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const cell = maskCell(FRAME_MASKS[frame]!, row, col);\n      if (cell === \"x\") {\n        return { style: { opacity: ACTIVE_OPACITY } };\n      }\n      if (cell === \"o\") {\n        return { style: { opacity: SETTLED_OPACITY } };\n      }\n      if (cell === \"c\") {\n        return { style: { opacity: CLEAR_OPACITY } };\n      }\n      return { style: { opacity: BASE_OPACITY } };\n    };\n  }, [frame]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-8.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { MATRIX_SIZE } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare8Props = DotMatrixCommonProps;\n\nconst ROWS = MATRIX_SIZE;\nconst COLS = MATRIX_SIZE;\n\n/** 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`). */\nconst FILL_LAST = ROWS + COLS - 1;\n\nconst BLINK_STEPS = 4;\nconst BLINK_OPACITIES = [0.38, 1, 0.38, 1] as const;\n\nconst DRAIN_LAST = FILL_LAST;\n\n/** fillTick 0..FILL_LAST → drainTick 0..DRAIN_LAST → + blink in between */\nconst SEQUENCE_LEN = FILL_LAST + 1 + BLINK_STEPS + DRAIN_LAST + 1;\n\nconst BASE_OPACITY = 0.08;\nconst SETTLED_OPACITY = 0.52;\nconst CAP_OPACITY = 1;\n\nfunction fillHeight(col: number, fillTick: number): number {\n  return Math.max(0, Math.min(ROWS, fillTick - col));\n}\n\nfunction drainHeight(col: number, drainTick: number): number {\n  return Math.max(0, Math.min(ROWS, ROWS - Math.max(0, drainTick - col)));\n}\n\nexport function DotmSquare8({\n  speed = 1.4,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare8Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\" && SEQUENCE_LEN > 0,\n    cycleMsBase: 2000,\n    steps: SEQUENCE_LEN,\n    speed,\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ isActive, row, col, phase }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      if (reducedMotion || phase === \"idle\") {\n        return { style: { opacity: BASE_OPACITY } };\n      }\n\n      let height = 0;\n      let blinkOpacity: number | null = null;\n\n      if (step <= FILL_LAST) {\n        height = fillHeight(col, step);\n      } else if (step < FILL_LAST + 1 + BLINK_STEPS) {\n        height = ROWS;\n        blinkOpacity = BLINK_OPACITIES[step - (FILL_LAST + 1)] ?? 1;\n      } else {\n        const drainTick = step - (FILL_LAST + 1 + BLINK_STEPS);\n        height = drainHeight(col, drainTick);\n      }\n\n      const bottomRow = ROWS - 1;\n      const topLitRow = ROWS - height;\n      const isLit = height > 0 && row >= topLitRow && row <= bottomRow;\n      if (!isLit) {\n        return { style: { opacity: BASE_OPACITY } };\n      }\n\n      if (blinkOpacity !== null) {\n        return { style: { opacity: blinkOpacity } };\n      }\n\n      const isCap = row === topLitRow && height > 0 && height < ROWS;\n      return {\n        style: { opacity: isCap ? CAP_OPACITY : SETTLED_OPACITY }\n      };\n    };\n  }, [reducedMotion, step]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-9.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare9Props = DotMatrixCommonProps;\n\n/**\n * Dots 1–6 in Unicode / ISO braille numbering (matches U+2800 + mask):\n *   1·4\n *   2·5\n *   3·6\n */\nconst D1 = 0x01;\nconst D2 = 0x02;\nconst D3 = 0x04;\nconst D4 = 0x08;\nconst D5 = 0x10;\nconst D6 = 0x20;\n\n/** Left column “odd” / right column “even” — classic 2×3 checkerboard. */\nconst CHECK_A = D1 | D3 | D5;\n\nconst BASE_OPACITY = 0.08;\nconst MID_OPACITY = 0.26;\nconst GAP_OPACITY = 0.12;\n\nconst CELL_ROW_START = 1;\nconst LEFT_COL = 0;\nconst RIGHT_CELL_COL = 3;\n\nfunction brailleBitForCell(row: number, col: number, cellColStart: number): number | null {\n  if (row < CELL_ROW_START || row > CELL_ROW_START + 2) {\n    return null;\n  }\n  const dr = row - CELL_ROW_START;\n  if (col === cellColStart) {\n    return D1 << dr;\n  }\n  if (col === cellColStart + 1) {\n    return D4 << dr;\n  }\n  return null;\n}\n\nfunction resolveBraille(row: number, col: number): { bit: number } | null {\n  const left = brailleBitForCell(row, col, LEFT_COL);\n  if (left !== null) {\n    return { bit: left };\n  }\n  const right = brailleBitForCell(row, col, RIGHT_CELL_COL);\n  if (right !== null) {\n    return { bit: right };\n  }\n  return null;\n}\n\nexport function DotmSquare9({\n  speed = 1.5,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare9Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ isActive, row, col, phase }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const braille = resolveBraille(row, col);\n\n      if (reducedMotion || phase === \"idle\") {\n        if (braille) {\n          const mask = CHECK_A;\n          const on = (mask & braille.bit) !== 0;\n          return { style: { opacity: on ? MID_OPACITY : BASE_OPACITY } };\n        }\n        if (row >= CELL_ROW_START && row <= CELL_ROW_START + 2 && col === 2) {\n          return { style: { opacity: GAP_OPACITY } };\n        }\n        return { style: { opacity: BASE_OPACITY } };\n      }\n\n      if (row >= CELL_ROW_START && row <= CELL_ROW_START + 2 && col === 2) {\n        return { style: { opacity: GAP_OPACITY } };\n      }\n\n      if (!braille) {\n        return { style: { opacity: BASE_OPACITY } };\n      }\n\n      let bitClass = \"dmx-square9-d1\";\n      if (braille.bit === D2) {\n        bitClass = \"dmx-square9-d2\";\n      } else if (braille.bit === D3) {\n        bitClass = \"dmx-square9-d3\";\n      } else if (braille.bit === D4) {\n        bitClass = \"dmx-square9-d4\";\n      } else if (braille.bit === D5) {\n        bitClass = \"dmx-square9-d5\";\n      } else if (braille.bit === D6) {\n        bitClass = \"dmx-square9-d6\";\n      }\n\n      return { className: `dmx-square9-bit ${bitClass}` };\n    };\n  }, [reducedMotion]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-10.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { MATRIX_SIZE } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare10Props = DotMatrixCommonProps;\n\nconst ROWS = MATRIX_SIZE;\n\nconst BASE_OPACITY = 0.08;\nconst PEAK_OPACITY = 1;\nconst DECAY = 0.72;\nconst COL_WARP = 0.07;\n\nexport function DotmSquare10({\n  speed = 2.5,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare10Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const scanRow = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1500,\n    steps: ROWS,\n    speed,\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ isActive, row, col, phase }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      if (reducedMotion || phase === \"idle\") {\n        const falloff = (ROWS - 1 - row) / Math.max(1, ROWS - 1);\n        return { style: { opacity: BASE_OPACITY + falloff * 0.38 } };\n      }\n\n      const colGain = 1 + COL_WARP * Math.sin(col * 1.72 + scanRow * 0.61);\n\n      if (row > scanRow) {\n        return { style: { opacity: BASE_OPACITY } };\n      }\n\n      const age = scanRow - row;\n      const trail = Math.exp(-age * DECAY);\n      const opacity = BASE_OPACITY + (PEAK_OPACITY - BASE_OPACITY) * trail * colGain;\n\n      return { style: { opacity: Math.min(PEAK_OPACITY, opacity) } };\n    };\n  }, [reducedMotion, scanRow]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-11.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare11Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, manhattanDistance, reducedMotion, phase }) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const ring = Math.max(0, Math.min(4, manhattanDistance));\n  const style = {\n    \"--dmx-ripple-ring\": ring,\n    \"--dmx-ripple-parity\": ring % 2\n  } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: 0.2 + (1 - ring / 4) * 0.72\n      }\n    };\n  }\n\n  return { className: \"dmx-ripple-echo\", style };\n};\n\nexport function DotmSquare11({\n  speed = 1.25,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare11Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={animationResolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-12.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare12Props = DotMatrixCommonProps;\n\n// User-defined origin is cell (2,2) in a 1-based 5x5 grid => (row=1,col=1) in zero-based coords.\nconst ORIGIN_ROW = 1;\nconst ORIGIN_COL = 1;\nconst MAX_MANHATTAN = 6;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, row, col, reducedMotion, phase }) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const ring = Math.max(\n    0,\n    Math.min(MAX_MANHATTAN, Math.abs(row - ORIGIN_ROW) + Math.abs(col - ORIGIN_COL))\n  );\n  const style = {\n    \"--dmx-center-ripple-ring\": ring\n  } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: 0.2 + (1 - ring / MAX_MANHATTAN) * 0.75\n      }\n    };\n  }\n\n  return { className: \"dmx-center-origin-ripple\", style };\n};\n\nexport function DotmSquare12({\n  speed = 1.35,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare12Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={animationResolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-13.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { rowMajorIndex } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare13Props = DotMatrixCommonProps;\n\ntype FrameCell = \".\" | \"o\" | \"x\";\n\nconst BASE_OPACITY = 0.08;\nconst ON_OPACITY = 0.56;\nconst PEAK_OPACITY = 1;\n\nconst FRAME_MASKS: readonly string[] = [\n  // N\n  \"..x..\" + \"..x..\" + \"..o..\" + \".....\" + \".....\",\n  // NE\n  \"....x\" + \"...x.\" + \"..o..\" + \".....\" + \".....\",\n  // E\n  \".....\" + \".....\" + \"..oxx\" + \".....\" + \".....\",\n  // SE\n  \".....\" + \".....\" + \"..o..\" + \"...x.\" + \"....x\",\n  // S\n  \".....\" + \".....\" + \"..o..\" + \"..x..\" + \"..x..\",\n  // SW\n  \".....\" + \".....\" + \"..o..\" + \".x...\" + \"x....\",\n  // W\n  \".....\" + \".....\" + \"xxo..\" + \".....\" + \".....\",\n  // NW\n  \"x....\" + \".x...\" + \"..o..\" + \".....\" + \".....\"\n];\n\nconst FRAME_SEQUENCE: readonly number[] = [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7];\n\nfunction maskCell(mask: string, row: number, col: number): FrameCell {\n  return (mask[rowMajorIndex(row, col)] as FrameCell | undefined) ?? \".\";\n}\n\nexport function DotmSquare13({\n  speed = 1.85,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare13Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const sequenceLength = FRAME_SEQUENCE.length;\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\" && sequenceLength > 0,\n    cycleMsBase: 1550,\n    steps: sequenceLength,\n    speed,\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    const frameIndex = FRAME_SEQUENCE[step] ?? 0;\n    const mask = FRAME_MASKS[frameIndex] ?? FRAME_MASKS[0]!;\n\n    return ({ isActive, row, col }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const cell = maskCell(mask, row, col);\n      if (cell === \"x\") {\n        return { style: { opacity: PEAK_OPACITY } };\n      }\n      if (cell === \"o\") {\n        return { style: { opacity: ON_OPACITY } };\n      }\n      return { style: { opacity: BASE_OPACITY } };\n    };\n  }, [step]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-14.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { rowMajorIndex } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare14Props = DotMatrixCommonProps;\n\ntype FrameCell = \".\" | \"o\" | \"x\";\n\nconst BASE_OPACITY = 0.08;\nconst MID_OPACITY = 0.52;\nconst PEAK_OPACITY = 1;\nconst SMOOTH_TRANSITION = \"opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)\";\n\nconst FRAME_MASKS: readonly string[] = [\n  // Diagonal star\n  \"x...x\" + \".x.x.\" + \"..o..\" + \".x.x.\" + \"x...x\",\n  // Diamond bloom\n  \"..x..\" + \".oxo.\" + \"xooox\" + \".oxo.\" + \"..x..\",\n  // Petal ring\n  \".x.x.\" + \"x.o.x\" + \"..o..\" + \"x.o.x\" + \".x.x.\",\n  // Crossed lattice\n  \"x.x.x\" + \".o.o.\" + \"x.o.x\" + \".o.o.\" + \"x.x.x\"\n];\n\nconst FRAME_SEQUENCE: readonly number[] = [0, 1, 2, 3, 2, 1];\n\nfunction maskCell(mask: string, row: number, col: number): FrameCell {\n  return (mask[rowMajorIndex(row, col)] as FrameCell | undefined) ?? \".\";\n}\n\nexport function DotmSquare14({\n  speed = 1.25,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare14Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const sequenceLength = FRAME_SEQUENCE.length;\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\" && sequenceLength > 0,\n    cycleMsBase: 1700,\n    steps: sequenceLength,\n    speed,\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    const frameIndex = FRAME_SEQUENCE[step] ?? 0;\n    const mask = FRAME_MASKS[frameIndex] ?? FRAME_MASKS[0]!;\n\n    return ({ isActive, row, col }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const cell = maskCell(mask, row, col);\n      if (cell === \"x\") {\n        return { style: { opacity: PEAK_OPACITY, transition: SMOOTH_TRANSITION } };\n      }\n      if (cell === \"o\") {\n        return { style: { opacity: MID_OPACITY, transition: SMOOTH_TRANSITION } };\n      }\n      return { style: { opacity: BASE_OPACITY, transition: SMOOTH_TRANSITION } };\n    };\n  }, [step]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-15.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare15Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.08;\nconst STRAND_OPACITY = 1;\nconst BRIDGE_OPACITY = 0.58;\nconst NEAR_STRAND_OPACITY = 0.24;\n/** Integer full sin periods per matrix cycle so phase 0 ≡ phase 1 (no wrap glitch). */\nconst STRAND_LOOPS = 2;\n\nexport function DotmSquare15({\n  speed = 1.25,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare15Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const animPhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1600,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ isActive, row, col, phase }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const u = reducedMotion || phase === \"idle\" ? 0 : animPhase;\n      const rowPhase = u * STRAND_LOOPS * 2 * Math.PI + row * 1.24;\n      const left = Math.round(1 + Math.sin(rowPhase));\n      const right = 4 - left;\n      const bridgeOn = Math.cos(rowPhase * 2) > 0.82;\n\n      if (col === left || col === right) {\n        return { style: { opacity: STRAND_OPACITY } };\n      }\n\n      if (bridgeOn && col > left && col < right) {\n        return { style: { opacity: BRIDGE_OPACITY } };\n      }\n\n      if (Math.abs(col - left) === 1 || Math.abs(col - right) === 1) {\n        return { style: { opacity: NEAR_STRAND_OPACITY } };\n      }\n\n      return { style: { opacity: BASE_OPACITY } };\n    };\n  }, [reducedMotion, animPhase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-16.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare16Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.08;\nconst STRAND_OPACITY = 1;\nconst BRIDGE_OPACITY = 0.58;\nconst NEAR_STRAND_OPACITY = 0.24;\nconst STEP_COUNT = 20;\nconst HELIX_LOOP_RADIANS = (Math.PI * 2) / (STEP_COUNT - 1);\n\nexport function DotmSquare16({\n  speed = 2.5,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare16Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const animPhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1400,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ isActive, row, col, phase }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const t = reducedMotion || phase === \"idle\" ? 0 : animPhase * STEP_COUNT;\n      // Make first and last discrete frames identical to avoid loop jank.\n      const rowPhase = t * HELIX_LOOP_RADIANS + row * 1.24;\n      // Tighter center-band helix (3-column footprint).\n      const left = Math.round(1.5 + 0.5 * Math.sin(rowPhase));\n      const right = 4 - left;\n      const bridgeOn = Math.cos(rowPhase * 2) > 0.82;\n\n      if (col === left || col === right) {\n        return { style: { opacity: STRAND_OPACITY } };\n      }\n\n      if (bridgeOn && col > left && col < right) {\n        return { style: { opacity: BRIDGE_OPACITY } };\n      }\n\n      if (Math.abs(col - left) === 1 || Math.abs(col - right) === 1) {\n        return { style: { opacity: NEAR_STRAND_OPACITY } };\n      }\n\n      return { style: { opacity: BASE_OPACITY } };\n    };\n  }, [reducedMotion, animPhase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-17.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare17Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.08;\nconst STRAND_OPACITY = 1;\nconst NEAR_STRAND_OPACITY = 0.24;\nconst STEP_COUNT = 20;\nconst HELIX_LOOP_RADIANS = (Math.PI * 2) / (STEP_COUNT - 1);\n\nexport function DotmSquare17({\n  speed = 2.5,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare17Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const animPhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1600,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ isActive, row, col, phase }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const t = reducedMotion || phase === \"idle\" ? 0 : animPhase * STEP_COUNT;\n      // Make first and last discrete frames identical to avoid loop jank.\n      const rowPhase = t * HELIX_LOOP_RADIANS + row * 1.24;\n      // One helix strand only, sweeping across full 5-column width.\n      const strandCol = Math.round(2 + 2 * Math.sin(rowPhase));\n\n      if (col === strandCol) {\n        return { style: { opacity: STRAND_OPACITY } };\n      }\n\n      if (Math.abs(col - strandCol) === 1) {\n        return { style: { opacity: NEAR_STRAND_OPACITY } };\n      }\n\n      return { style: { opacity: BASE_OPACITY } };\n    };\n  }, [reducedMotion, animPhase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-18.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare18Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.08;\nconst LIT_OPACITY = 0.94;\nconst CAP_OPACITY = 1;\nconst STEP_COUNT = 24;\nconst MAX_LEVEL = 5;\n\nfunction clampLevel(value: number): number {\n  return Math.max(1, Math.min(MAX_LEVEL, Math.round(value)));\n}\n\nexport function DotmSquare18({\n  speed = 1.35,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare18Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const animPhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1750,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ isActive, row, col, phase }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const t = reducedMotion || phase === \"idle\" ? 0 : animPhase * STEP_COUNT;\n      const colPhase = t * 0.52 + col * 1.15;\n      const level = clampLevel(1 + ((Math.sin(colPhase) + 1) / 2) * (MAX_LEVEL - 1));\n      const topLitRow = MAX_LEVEL - level;\n\n      if (row > topLitRow) {\n        return { style: { opacity: LIT_OPACITY } };\n      }\n      if (row === topLitRow) {\n        return { style: { opacity: CAP_OPACITY } };\n      }\n      return { style: { opacity: BASE_OPACITY } };\n    };\n  }, [reducedMotion, animPhase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-19.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare19Props = DotMatrixCommonProps;\n\nconst STEP_COUNT = 48;\nconst BASE_OPACITY = 0.08;\nconst SECONDARY_TRAIL_OPACITY = 0.32;\nconst PRIMARY_TRAIL_OPACITY = 0.62;\nconst PEAK_OPACITY = 1;\nconst CURVE_OPACITY = 0.2;\n\ninterface Point {\n  x: number;\n  y: number;\n}\n\nconst CURVE_SAMPLES: readonly Point[] = Array.from({ length: 96 }, (_, index) => {\n  const t = (index / 96) * Math.PI * 2;\n  return {\n    x: Math.sin(t),\n    y: 0.58 * Math.sin(2 * t)\n  };\n});\n\nfunction gridPoint(row: number, col: number): Point {\n  return {\n    x: (col - 2) / 2,\n    y: (2 - row) / 2\n  };\n}\n\nfunction loopPoint(step: number): Point {\n  const t = ((step % STEP_COUNT) / STEP_COUNT) * Math.PI * 2;\n  return {\n    x: Math.sin(t),\n    y: 0.58 * Math.sin(2 * t)\n  };\n}\n\nfunction squaredDistance(a: Point, b: Point): number {\n  const dx = a.x - b.x;\n  const dy = a.y - b.y;\n  return dx * dx + dy * dy;\n}\n\nfunction minCurveDistanceSq(point: Point): number {\n  let min = Number.POSITIVE_INFINITY;\n  for (const sample of CURVE_SAMPLES) {\n    min = Math.min(min, squaredDistance(point, sample));\n  }\n  return min;\n}\n\nfunction headInfluence(dot: Point, head: Point): number {\n  const distSq = squaredDistance(dot, head);\n  return Math.exp(-distSq / 0.19);\n}\n\nexport function DotmSquare19({\n  speed = 1.45,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare19Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1700,\n    steps: STEP_COUNT,\n    speed,\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ isActive, row, col, phase }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const dot = gridPoint(row, col);\n\n      if (reducedMotion || phase === \"idle\") {\n        const curveGlow = Math.exp(-minCurveDistanceSq(dot) / 0.2);\n        const centerBoost = Math.exp(-(dot.x * dot.x + dot.y * dot.y) / 0.06);\n        return {\n          style: {\n            opacity: Math.min(PEAK_OPACITY, BASE_OPACITY + curveGlow * CURVE_OPACITY + centerBoost * 0.18)\n          }\n        };\n      }\n\n      const headA = loopPoint(step);\n      const headB = loopPoint(step + STEP_COUNT / 2);\n      const trailA = loopPoint(step - 4);\n      const trailB = loopPoint(step + STEP_COUNT / 2 - 4);\n\n      const lead = Math.max(headInfluence(dot, headA), headInfluence(dot, headB));\n      const trail = Math.max(headInfluence(dot, trailA), headInfluence(dot, trailB));\n      const centerPulse = Math.exp(-(dot.x * dot.x + dot.y * dot.y) / 0.05) * (0.45 + 0.55 * lead);\n\n      const opacity =\n        BASE_OPACITY +\n        SECONDARY_TRAIL_OPACITY * trail +\n        PRIMARY_TRAIL_OPACITY * lead +\n        0.16 * centerPulse;\n\n      return { style: { opacity: Math.min(PEAK_OPACITY, opacity) } };\n    };\n  }, [reducedMotion, step]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-square-20.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { rowMajorIndex } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmSquare20Props = DotMatrixCommonProps;\n\n/** Clockwise perimeter: one closed loop you can trace with your eye. */\nconst PERIMETER_PATH: readonly number[] = [\n  rowMajorIndex(0, 0),\n  rowMajorIndex(0, 1),\n  rowMajorIndex(0, 2),\n  rowMajorIndex(0, 3),\n  rowMajorIndex(0, 4),\n  rowMajorIndex(1, 4),\n  rowMajorIndex(2, 4),\n  rowMajorIndex(3, 4),\n  rowMajorIndex(4, 4),\n  rowMajorIndex(4, 3),\n  rowMajorIndex(4, 2),\n  rowMajorIndex(4, 1),\n  rowMajorIndex(4, 0),\n  rowMajorIndex(3, 0),\n  rowMajorIndex(2, 0),\n  rowMajorIndex(1, 0)\n];\n\nconst LOOP_LEN = PERIMETER_PATH.length;\n\nconst TAIL_BRIGHT = [1, 0.82, 0.64, 0.46, 0.3, 0.18] as const;\nconst BACK_TAIL_BRIGHT = [0.38, 0.3, 0.22, 0.14] as const;\nconst BASE_OPACITY = 0.08;\nconst TWIST_INNER_OPACITY = 0.52;\nconst SEAM_PULSE_OPACITY = 0.55;\nconst IDLE_RING_OPACITY = 0.48;\n\n/** Corner steps on the loop → one cell “inside” the strip at the fold (half-twist cue). */\nconst TWIST_INNER_BY_HEAD_STEP: ReadonlyMap<number, number> = new Map([\n  [0, rowMajorIndex(1, 1)],\n  [4, rowMajorIndex(1, 3)],\n  [8, rowMajorIndex(3, 3)],\n  [12, rowMajorIndex(3, 1)]\n]);\n\nfunction pathStepForCellIndex(cellIndex: number): number {\n  const step = PERIMETER_PATH.indexOf(cellIndex);\n  return step;\n}\n\nfunction opacityFromTail(distance: number, tail: readonly number[]): number {\n  if (distance < 0 || distance >= tail.length) {\n    return 0;\n  }\n  return tail[distance]!;\n}\n\nexport function DotmSquare20({\n  speed = 1.45,\n  pattern = \"full\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmSquare20Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const headStep = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1600,\n    steps: LOOP_LEN,\n    speed,\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ isActive, index, phase }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const onLoop = pathStepForCellIndex(index);\n      const backHead = (headStep + Math.floor(LOOP_LEN / 2)) % LOOP_LEN;\n\n      if (reducedMotion || phase === \"idle\") {\n        if (onLoop >= 0) {\n          return { style: { opacity: IDLE_RING_OPACITY } };\n        }\n        if (index === rowMajorIndex(2, 2)) {\n          return { style: { opacity: 0.22 } };\n        }\n        return { style: { opacity: BASE_OPACITY } };\n      }\n\n      let opacity = BASE_OPACITY;\n\n      if (onLoop >= 0) {\n        const forward = (headStep - onLoop + LOOP_LEN) % LOOP_LEN;\n        const alongBack = (backHead - onLoop + LOOP_LEN) % LOOP_LEN;\n        opacity = Math.max(\n          opacity,\n          opacityFromTail(forward, TAIL_BRIGHT),\n          opacityFromTail(alongBack, BACK_TAIL_BRIGHT)\n        );\n      }\n\n      const twistInner = TWIST_INNER_BY_HEAD_STEP.get(headStep);\n      if (twistInner === index) {\n        opacity = Math.max(opacity, TWIST_INNER_OPACITY);\n      }\n\n      const seam = rowMajorIndex(2, 2);\n      if (index === seam && headStep % 4 === 0) {\n        opacity = Math.max(opacity, SEAM_PULSE_OPACITY);\n      }\n\n      return { style: { opacity: Math.min(1, opacity) } };\n    };\n  }, [headStep, reducedMotion]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern={pattern}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-1.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular1Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.08;\nconst STRAND_OPACITY = 1;\nconst NEAR_STRAND_OPACITY = 0.24;\nconst STEP_COUNT = 20;\nconst HELIX_LOOP_RADIANS = (Math.PI * 2) / (STEP_COUNT - 1);\n\nexport function DotmCircular1({\n  speed = 2.5,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular1Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const animPhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1700,\n    speed\n  });\n\n  const animationResolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const t = reducedMotion || phase === \"idle\" ? 0 : animPhase * STEP_COUNT;\n      const diagonalAxis = row + col;\n      const phaseOffset = t * HELIX_LOOP_RADIANS + diagonalAxis * 0.82;\n      const strandPerpendicular = Math.round(2 * Math.sin(phaseOffset));\n      const cellPerpendicular = col - row;\n      const distanceFromStrand = Math.abs(cellPerpendicular - strandPerpendicular);\n\n      if (distanceFromStrand === 0) {\n        return { style: { opacity: STRAND_OPACITY } };\n      }\n\n      if (distanceFromStrand === 1) {\n        return { style: { opacity: NEAR_STRAND_OPACITY } };\n      }\n\n      return { style: { opacity: BASE_OPACITY } };\n    };\n  }, [reducedMotion, animPhase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={animationResolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-2.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { rowMajorIndex } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular2Props = DotMatrixCommonProps;\n\nconst RING_PATH: readonly number[] = [\n  rowMajorIndex(0, 1),\n  rowMajorIndex(0, 2),\n  rowMajorIndex(0, 3),\n  rowMajorIndex(1, 4),\n  rowMajorIndex(2, 4),\n  rowMajorIndex(3, 4),\n  rowMajorIndex(4, 3),\n  rowMajorIndex(4, 2),\n  rowMajorIndex(4, 1),\n  rowMajorIndex(3, 0),\n  rowMajorIndex(2, 0),\n  rowMajorIndex(1, 0)\n];\n\nconst LOOP_LEN = RING_PATH.length;\nconst BASE_OPACITY = 0.08;\n\nexport function DotmCircular2({\n  speed = 1.8,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular2Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const resolver: DotAnimationResolver = ({ index, row, col, phase }) => {\n    if (!isWithinCircularMask(row, col)) {\n      return { className: \"dmx-inactive\" };\n    }\n\n    const onRing = RING_PATH.indexOf(index);\n    if (onRing === -1) {\n      return { style: { opacity: row === 2 && col === 2 ? 0.18 : BASE_OPACITY } };\n    }\n\n    if (reducedMotion || phase === \"idle\") {\n      return { style: { opacity: 0.28 + (onRing / (LOOP_LEN - 1)) * 0.58 } };\n    }\n\n    return {\n      className: \"dmx-circular2-ring\",\n      style: { \"--dmx-ring-order\": onRing } as CSSProperties\n    };\n  };\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-3.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { rowMajorIndex } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular3Props = DotMatrixCommonProps;\n\nconst STEP_COUNT = 24;\nconst BASE_OPACITY = 0.08;\nconst RING_BASE_OPACITY = 0.2;\nconst CORE_OPACITY = 0.16;\nconst COMET_TAIL = [1, 0.78, 0.56, 0.36, 0.22] as const;\nconst SECONDARY_COMET_SCALE = 0.72;\n\nconst CIRCULAR_RING_PATH: readonly number[] = [\n  rowMajorIndex(0, 1),\n  rowMajorIndex(0, 2),\n  rowMajorIndex(0, 3),\n  rowMajorIndex(1, 4),\n  rowMajorIndex(2, 4),\n  rowMajorIndex(3, 4),\n  rowMajorIndex(4, 3),\n  rowMajorIndex(4, 2),\n  rowMajorIndex(4, 1),\n  rowMajorIndex(3, 0),\n  rowMajorIndex(2, 0),\n  rowMajorIndex(1, 0)\n];\nconst LOOP_LEN = CIRCULAR_RING_PATH.length;\n\nexport function DotmCircular3({\n  speed = 1.6,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular3Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const headStep = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1650,\n    steps: STEP_COUNT,\n    speed,\n    idleStep: 6\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ index, row, col, phase }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const pathOrder = CIRCULAR_RING_PATH.indexOf(index);\n      const isCore = row === 2 && col === 2;\n      if (pathOrder === -1) {\n        return { style: { opacity: isCore ? CORE_OPACITY : BASE_OPACITY } };\n      }\n\n      if (reducedMotion || phase === \"idle\") {\n        return { style: { opacity: RING_BASE_OPACITY + (pathOrder / (LOOP_LEN - 1)) * 0.56 } };\n      }\n\n      const leadA = Math.floor((headStep / STEP_COUNT) * LOOP_LEN) % LOOP_LEN;\n      const leadB = (leadA + Math.floor(LOOP_LEN / 2)) % LOOP_LEN;\n      let opacity = BASE_OPACITY;\n\n      for (let i = 0; i < COMET_TAIL.length; i += 1) {\n        const weight = COMET_TAIL[i] ?? 0;\n        const tailA = (leadA - i + LOOP_LEN) % LOOP_LEN;\n        const tailB = (leadB - i + LOOP_LEN) % LOOP_LEN;\n        if (pathOrder === tailA) {\n          opacity = Math.max(opacity, weight);\n        }\n        if (pathOrder === tailB) {\n          opacity = Math.max(opacity, weight * SECONDARY_COMET_SCALE);\n        }\n      }\n\n      return { style: { opacity: Math.min(1, opacity) } };\n    };\n  }, [headStep, reducedMotion]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-4.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular4Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.08;\nconst SWEEP_OPACITY = 0.96;\nconst NEAR_SWEEP_OPACITY = 0.36;\nconst RING_OPACITY = 0.22;\n\nexport function DotmCircular4({\n  speed = 1.55,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular4Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const phase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1800,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase: p }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const centerRow = row - 2;\n      const centerCol = col - 2;\n      const radius = Math.hypot(centerRow, centerCol);\n      const theta = (reducedMotion || p === \"idle\" ? 0 : phase) * Math.PI * 2;\n      const sweepX = Math.cos(theta);\n      const sweepY = Math.sin(theta);\n      const projection = centerCol * sweepX + centerRow * sweepY;\n      const perpendicular = Math.abs(centerCol * sweepY - centerRow * sweepX);\n\n      if (radius < 0.5) {\n        return { style: { opacity: 0.62 } };\n      }\n\n      if (projection > 0.3 && perpendicular < 0.55) {\n        return { style: { opacity: SWEEP_OPACITY } };\n      }\n\n      if (projection > 0 && perpendicular < 1.15) {\n        return { style: { opacity: NEAR_SWEEP_OPACITY } };\n      }\n\n      if (radius > 1.6 && radius < 2.3) {\n        return { style: { opacity: RING_OPACITY } };\n      }\n\n      return { style: { opacity: BASE_OPACITY } };\n    };\n  }, [reducedMotion, phase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-5.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular5Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.08;\nconst BLADE_OPACITY = 0.94;\nconst HALO_OPACITY = 0.34;\n\nexport function DotmCircular5({\n  speed = 1.7,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular5Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const phase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1650,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase: p }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const x = col - 2;\n      const y = row - 2;\n      const radius = Math.hypot(x, y);\n      const angle = Math.atan2(y, x);\n      const theta = (reducedMotion || p === \"idle\" ? 0 : phase) * Math.PI * 2;\n      const pinwheel = Math.cos(angle * 4 - theta * 2.2);\n      const radialGate = Math.sin(radius * 2.1 - theta * 1.25);\n\n      if (radius < 0.6) {\n        return { style: { opacity: 0.66 } };\n      }\n\n      if (pinwheel > 0.48 && radialGate > -0.25) {\n        return { style: { opacity: BLADE_OPACITY } };\n      }\n\n      if (pinwheel > 0.1) {\n        return { style: { opacity: HALO_OPACITY } };\n      }\n\n      return { style: { opacity: BASE_OPACITY } };\n    };\n  }, [reducedMotion, phase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-6.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular6Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.08;\nconst ORBIT_OPACITY = 0.96;\nconst NEAR_ORBIT_OPACITY = 0.34;\n\nexport function DotmCircular6({\n  speed = 1.6,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular6Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const phase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1700,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase: p }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const x = col - 2;\n      const y = row - 2;\n      const t = reducedMotion || p === \"idle\" ? 0 : (phase) * Math.PI * 2;\n      const angle = Math.atan2(y, x);\n      const ring = Math.sqrt(x * x + y * y);\n\n      const angularPhase = ((angle - t * 0.95 + Math.PI * 4) % (Math.PI * 2)) / ((Math.PI * 2) / 3);\n      const sectorPos = angularPhase - Math.floor(angularPhase);\n      const sectorPulse = Math.max(0, 1 - Math.abs(sectorPos - 0.5) * 2);\n      const ringPhase = 0.5 + 0.5 * Math.cos(ring * 3.2 + t * 1.7);\n      const score = 0.74 * sectorPulse + 0.26 * ringPhase;\n\n      let opacity = BASE_OPACITY;\n      if (score > 0.84) {\n        opacity = ORBIT_OPACITY;\n      } else if (score > 0.63) {\n        opacity = 0.62;\n      } else if (score > 0.44) {\n        opacity = NEAR_ORBIT_OPACITY;\n      }\n\n      if (x === 0 && y === 0) {\n        return { style: { opacity: Math.max(opacity, NEAR_ORBIT_OPACITY) } };\n      }\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, phase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-7.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular7Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.08;\nconst GATE_OPACITY = 0.92;\n\nexport function DotmCircular7({\n  speed = 1.8,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular7Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const phase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1600,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase: p }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const x = col - 2;\n      const y = row - 2;\n      const t = reducedMotion || p === \"idle\" ? 0 : (phase) * Math.PI * 2;\n      const ring = Math.sqrt(x * x + y * y);\n      const angle = Math.atan2(y, x);\n\n      const petalWave = 0.5 + 0.5 * Math.cos(5 * angle - t * 1.7);\n      const ringWave = 0.5 + 0.5 * Math.cos(ring * 3.3 - t * 1.2);\n      const chordWave = 0.5 + 0.5 * Math.cos((x + y) * 1.6 + t * 1.35);\n\n      // Sharpen contrast so lit cells form clear, visible groups.\n      const petalGate = Math.pow(petalWave, 2.2);\n      const blend = 0.68 * petalGate + 0.22 * ringWave + 0.1 * chordWave;\n      const opacity = BASE_OPACITY + (GATE_OPACITY - BASE_OPACITY) * blend;\n\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, phase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-8.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular8Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.08;\nconst PULSE_CORE = 0.95;\nconst PULSE_RING = 0.44;\n\nexport function DotmCircular8({\n  speed = 1.95,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular8Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const phase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1400,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase: p }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const x = col - 2;\n      const y = row - 2;\n      const radius = Math.hypot(x, y);\n      const beat = reducedMotion || p === \"idle\" ? 0 : Math.sin((phase) * Math.PI * 2);\n      const spike = reducedMotion || p === \"idle\" ? 0 : Math.sin((phase) * Math.PI * 4);\n      const pulse = Math.max(0, beat) + Math.max(0, spike) * 0.55;\n\n      if (radius < 0.55) {\n        return { style: { opacity: Math.min(1, 0.35 + pulse * PULSE_CORE) } };\n      }\n      if (radius < 1.65) {\n        return { style: { opacity: 0.16 + pulse * PULSE_RING } };\n      }\n      return { style: { opacity: BASE_OPACITY + pulse * 0.08 } };\n    };\n  }, [reducedMotion, phase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-9.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular9Props = DotMatrixCommonProps;\n\nconst STEP_COUNT = 36;\nconst BASE_OPACITY = 0.07;\nconst MID_OPACITY = 0.28;\nconst STAR_OPACITY = 0.96;\n\nexport function DotmCircular9({\n  speed = 5.55,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular9Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1900,\n    steps: STEP_COUNT,\n    speed,\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const x = col - 2;\n      const y = row - 2;\n      const ring = Math.sqrt(x * x + y * y);\n      const angle = Math.atan2(y, x);\n      const t = reducedMotion || phase === \"idle\" ? 0 : (step / STEP_COUNT) * Math.PI * 2;\n      const cardinalCenters = [0, Math.PI / 2, Math.PI, -Math.PI / 2];\n      const beaconIndex = Math.floor((step / STEP_COUNT) * cardinalCenters.length) % cardinalCenters.length;\n      const activeCenter = cardinalCenters[beaconIndex]!;\n      const oppositeCenter = cardinalCenters[(beaconIndex + 2) % cardinalCenters.length]!;\n\n      const distanceToActive = Math.acos(Math.cos(angle - activeCenter));\n      const distanceToOpposite = Math.acos(Math.cos(angle - oppositeCenter));\n      const activeBeam = Math.max(0, 1 - distanceToActive / 0.5);\n      const oppositeBeam = Math.max(0, 1 - distanceToOpposite / 0.65);\n      const ringTier = Math.round(ring);\n\n      let opacity = BASE_OPACITY;\n      if (activeBeam > 0.8 && ringTier >= 2) {\n        opacity = STAR_OPACITY;\n      } else if (activeBeam > 0.45 && ringTier >= 1) {\n        opacity = 0.62;\n      } else if (oppositeBeam > 0.5 && ringTier >= 1) {\n        opacity = MID_OPACITY;\n      }\n\n      if (x === 0 && y === 0) {\n        return { style: { opacity: Math.max(opacity, 0.24) } };\n      }\n\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, step]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-10.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular10Props = DotMatrixCommonProps;\n\nconst STEP_COUNT = 30;\nconst BASE_OPACITY = 0.06;\nconst LOW_OPACITY = 0.2;\nconst MID_OPACITY = 0.48;\nconst HIGH_OPACITY = 0.94;\n\nfunction moduloDistance(a: number, b: number, mod: number): number {\n  const raw = Math.abs(a - b);\n  return Math.min(raw, mod - raw);\n}\n\nexport function DotmCircular10({\n  speed = 1.75,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular10Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const animPhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1600,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const x = col - 2;\n      const y = row - 2;\n      const ring = Math.round(Math.sqrt(x * x + y * y));\n      const tick = reducedMotion || phase === \"idle\" ? 0 : Math.floor((animPhase) * 10);\n      const cellCode = (row * 3 + col * 5 + ring * 2) % 10;\n      const d = moduloDistance(cellCode, tick, 10);\n      const parityGate = (row + col + tick) % 2 === 0;\n\n      let opacity = BASE_OPACITY;\n      if (d === 0) {\n        opacity = HIGH_OPACITY;\n      } else if (d === 1) {\n        opacity = MID_OPACITY;\n      } else if (d === 2 || parityGate) {\n        opacity = LOW_OPACITY;\n      }\n\n      if (x === 0 && y === 0) {\n        return { style: { opacity: Math.max(opacity, MID_OPACITY) } };\n      }\n\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, animPhase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-11.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular11Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.07;\nconst MID_OPACITY = 0.3;\nconst HIGH_OPACITY = 0.95;\n\nexport function DotmCircular11({\n  speed = 1.65,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular11Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const phase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1850,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase: p }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const x = col - 2;\n      const y = row - 2;\n      const ring = Math.sqrt(x * x + y * y);\n      const t = reducedMotion || p === \"idle\" ? 0 : (phase) * Math.PI * 2;\n      const angle = Math.atan2(y, x);\n      const moonCenterX = Math.cos(t) * 0.7;\n      const moonCenterY = Math.sin(t) * 0.7;\n      const body = Math.hypot(x - moonCenterX, y - moonCenterY);\n      const cutCenterX = moonCenterX + Math.cos(t) * 0.82;\n      const cutCenterY = moonCenterY + Math.sin(t) * 0.82;\n      const cut = Math.hypot(x - cutCenterX, y - cutCenterY);\n      const rim = Math.max(0, 1 - Math.abs(body - 1.55) / 0.35);\n      const halo = Math.max(0, 1 - Math.acos(Math.cos(angle - t)) / 0.9);\n\n      let opacity = BASE_OPACITY;\n      if (body < 1.55 && cut > 1.05) {\n        opacity = HIGH_OPACITY;\n      } else if (rim > 0.5) {\n        opacity = MID_OPACITY + rim * 0.22;\n      } else if (halo > 0.68 && ring > 1.2) {\n        opacity = MID_OPACITY;\n      }\n\n      return { style: { opacity: Math.min(HIGH_OPACITY, opacity) } };\n    };\n  }, [reducedMotion, phase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-12.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular12Props = DotMatrixCommonProps;\n\nconst STEP_COUNT = 36;\nconst BASE_OPACITY = 0.06;\nconst MID_OPACITY = 0.3;\nconst ARC_OPACITY = 0.96;\n\nexport function DotmCircular12({\n  speed = 1.7,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular12Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1700,\n    steps: STEP_COUNT,\n    speed,\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const x = col - 2;\n      const y = row - 2;\n      const ring = Math.sqrt(x * x + y * y);\n      const angle = Math.atan2(y, x);\n      const t = reducedMotion || phase === \"idle\" ? 0 : (step / STEP_COUNT) * Math.PI * 2;\n      const stepBand = Math.floor((step / STEP_COUNT) * 8) % 8;\n      const targetAngle = stepBand * (Math.PI / 4);\n      const angleDelta = Math.acos(Math.cos(angle - targetAngle));\n      const beam = Math.max(0, 1 - angleDelta / 0.42);\n      const oppositeBeam = Math.max(0, 1 - Math.acos(Math.cos(angle - (targetAngle + Math.PI))) / 0.62);\n      const spokePulse = Math.max(0, 1 - Math.abs(Math.abs(x) - Math.abs(y)) / 0.35);\n      const ringTier = ring < 1 ? 0 : ring < 2 ? 1 : 2;\n\n      let opacity = BASE_OPACITY;\n      if (beam > 0.78 && ringTier >= 1) {\n        opacity = ARC_OPACITY;\n      } else if (beam > 0.48) {\n        opacity = 0.62;\n      } else if (oppositeBeam > 0.52 && ringTier === 2) {\n        opacity = MID_OPACITY;\n      } else if (spokePulse > 0.9 && ringTier > 0) {\n        opacity = MID_OPACITY;\n      }\n\n      if (x === 0 && y === 0) {\n        return { style: { opacity: Math.max(opacity, 0.26) } };\n      }\n\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, step]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-13.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular13Props = DotMatrixCommonProps;\n\nconst STEP_COUNT = 28;\nconst BASE_OPACITY = 0.07;\nconst STRAND_OPACITY = 0.95;\nconst NEAR_STRAND_OPACITY = 0.5;\nconst BRIDGE_OPACITY = 0.3;\n\nexport function DotmCircular13({\n  speed = 1.55,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular13Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1750,\n    steps: STEP_COUNT,\n    speed,\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const x = col - 2;\n      const y = row - 2;\n      const t = reducedMotion || phase === \"idle\" ? 0 : (step / STEP_COUNT) * Math.PI * 2;\n\n      const strandOffset = Math.sin(y * 1.35 + t * 1.3) * 1.15;\n      const leftStrand = -strandOffset;\n      const rightStrand = strandOffset;\n      const leftDistance = Math.abs(x - leftStrand);\n      const rightDistance = Math.abs(x - rightStrand);\n      const strandDistance = Math.min(leftDistance, rightDistance);\n      const bridgeOn = Math.cos(y * 2 + t * 2.1) > 0.55;\n      const isBetweenStrands = x > Math.min(leftStrand, rightStrand) && x < Math.max(leftStrand, rightStrand);\n\n      let opacity = BASE_OPACITY;\n      if (strandDistance < 0.34) {\n        opacity = STRAND_OPACITY;\n      } else if (strandDistance < 0.8) {\n        opacity = NEAR_STRAND_OPACITY;\n      } else if (bridgeOn && isBetweenStrands) {\n        opacity = BRIDGE_OPACITY;\n      }\n\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, step]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-14.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular14Props = DotMatrixCommonProps;\n\nconst STEP_COUNT = 30;\nconst BASE_OPACITY = 0.07;\nconst RUNG_OPACITY = 0.95;\nconst SIDE_OPACITY = 0.56;\nconst GHOST_OPACITY = 0.28;\n\nexport function DotmCircular14({\n  speed = 1.75,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular14Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const animPhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1650,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const x = col - 2;\n      const y = row - 2;\n      const phaseStep = reducedMotion || phase === \"idle\" ? 0 : Math.floor((animPhase) * 10);\n      const activeRow = (phaseStep + 5) % 5;\n      const rowDistance = Math.abs(row - activeRow);\n      const swing = Math.sin((phaseStep / 10) * Math.PI * 2 + y * 0.9);\n      const leftAnchor = Math.round(1 + swing);\n      const rightAnchor = 4 - leftAnchor;\n\n      let opacity = BASE_OPACITY;\n      if (row === activeRow && col >= leftAnchor && col <= rightAnchor) {\n        opacity = RUNG_OPACITY;\n      } else if ((col === leftAnchor || col === rightAnchor) && rowDistance <= 1) {\n        opacity = SIDE_OPACITY;\n      } else if ((col === leftAnchor || col === rightAnchor) && rowDistance === 2) {\n        opacity = GHOST_OPACITY;\n      }\n\n      if (x === 0 && y === 0 && rowDistance <= 1) {\n        return { style: { opacity: Math.max(opacity, SIDE_OPACITY) } };\n      }\n\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, animPhase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-15.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular15Props = DotMatrixCommonProps;\n\nconst STEP_COUNT = 24;\nconst BASE_OPACITY = 0.07;\nconst MID_OPACITY = 0.34;\nconst HIGH_OPACITY = 0.95;\n\nconst BRAILLE_PHASES: ReadonlyArray<ReadonlySet<string>> = [\n  new Set([\"1,1\", \"2,1\", \"3,1\", \"1,3\", \"2,3\", \"3,3\"]), // rails\n  new Set([\"1,1\", \"2,1\", \"3,1\", \"2,2\", \"1,3\", \"2,3\", \"3,3\"]), // center bridge\n  new Set([\"1,1\", \"1,2\", \"1,3\", \"2,1\", \"2,3\", \"3,1\", \"3,2\", \"3,3\"]), // top+bottom bars\n  new Set([\"1,1\", \"3,1\", \"2,2\", \"1,3\", \"3,3\"]), // X-cross\n  new Set([\"2,1\", \"1,2\", \"3,2\", \"2,3\"]), // plus motif\n  new Set([\"1,1\", \"2,1\", \"2,2\", \"2,3\", \"3,3\"]) // diagonal sweep\n];\n\nexport function DotmCircular15({\n  speed = 1.65,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular15Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const animPhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1680,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const x = col - 2;\n      const y = row - 2;\n      const ring = Math.sqrt(x * x + y * y);\n      const count = BRAILLE_PHASES.length;\n      const phaseIndex =\n        reducedMotion || phase === \"idle\"\n          ? 0\n          : (() => {\n              const t = Number.isFinite(animPhase) ? animPhase : 0;\n              const raw = Math.floor(t * count);\n              return ((raw % count) + count) % count;\n            })();\n      const activePattern = BRAILLE_PHASES[phaseIndex]!;\n      const key = `${row},${col}`;\n      const inPattern = activePattern.has(key);\n\n      const previousIndex = (phaseIndex + BRAILLE_PHASES.length - 1) % BRAILLE_PHASES.length;\n      const inPrevPattern = BRAILLE_PHASES[previousIndex]!.has(key);\n\n      let opacity = BASE_OPACITY;\n      if (inPattern) {\n        opacity = HIGH_OPACITY;\n      } else if (inPrevPattern) {\n        opacity = MID_OPACITY;\n      } else if (ring < 1.1) {\n        opacity = 0.2;\n      }\n\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, animPhase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-16.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular16Props = DotMatrixCommonProps;\n\nconst STEP_COUNT = 25;\nconst BASE_OPACITY = 0.07;\nconst MID_OPACITY = 0.32;\nconst HIGH_OPACITY = 0.95;\n\nexport function DotmCircular16({\n  speed = 1.1,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular16Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const animPhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1700,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      // Discrete steps: animPhase is continuous in [0, 1); fractional `t` breaks row === checks.\n      const t =\n        reducedMotion || phase === \"idle\" ? 0 : Math.floor(animPhase * STEP_COUNT) % STEP_COUNT;\n      const activeRow = t % 5;\n      const activeBrailleCol = Math.floor((t / 5) * 2) % 2; // left or right cell rail\n      const railCol = activeBrailleCol === 0 ? 1 : 3;\n      const nearCol = activeBrailleCol === 0 ? 2 : 2;\n      const rowDistance = Math.abs(row - activeRow);\n\n      let opacity = BASE_OPACITY;\n      if (col === railCol && rowDistance === 0) {\n        opacity = HIGH_OPACITY;\n      } else if (col === railCol && rowDistance === 1) {\n        opacity = MID_OPACITY;\n      } else if (col === nearCol && rowDistance === 0) {\n        opacity = 0.52;\n      } else if ((col === 1 || col === 3) && rowDistance === 2) {\n        opacity = 0.24;\n      }\n\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, animPhase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-17.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular17Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.07;\nconst MID_OPACITY = 0.34;\nconst HIGH_OPACITY = 0.95;\n/** Discrete checker frames per loop (must stay integer for `(row + col + t) % 2`). */\nconst CHECKER_STEPS = 4;\n\nexport function DotmCircular17({\n  speed = 1.55,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular17Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const animPhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1500,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase: dmxPhase }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const holdStill = reducedMotion || dmxPhase === \"idle\";\n      const t = holdStill\n        ? 0\n        : Math.floor(animPhase * CHECKER_STEPS) % CHECKER_STEPS;\n      const parity = (row + col + t) % 2;\n      const brailleBias = col === 1 || col === 3;\n      const centerBias = row === 2 || col === 2;\n\n      let opacity = BASE_OPACITY;\n      if (parity === 0 && brailleBias) {\n        opacity = HIGH_OPACITY;\n      } else if (parity === 0 || centerBias) {\n        opacity = MID_OPACITY;\n      } else if (brailleBias) {\n        opacity = 0.24;\n      }\n\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, animPhase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-18.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular18Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.07;\nconst MID_OPACITY = 0.33;\nconst HIGH_OPACITY = 0.95;\n\nexport function DotmCircular18({\n  speed = 1.75,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular18Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const animPhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1550,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const t = reducedMotion || phase === \"idle\" ? 0 : Math.floor((animPhase) * 6);\n      const pulseRow = t % 3; // 0..2\n      const topRow = pulseRow;\n      const bottomRow = 4 - pulseRow;\n      const pairCols = [1, 3];\n\n      let opacity = BASE_OPACITY;\n      if ((row === topRow || row === bottomRow) && pairCols.includes(col)) {\n        opacity = HIGH_OPACITY;\n      } else if ((row === topRow || row === bottomRow) && col === 2) {\n        opacity = 0.58;\n      } else if ((row === 2 || col === 2) && pairCols.includes(col) === false) {\n        opacity = MID_OPACITY;\n      } else if (pairCols.includes(col)) {\n        opacity = 0.22;\n      }\n\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, animPhase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-19.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular19Props = DotMatrixCommonProps;\n\nconst STEP_COUNT = 24;\nconst BASE_OPACITY = 0.07;\nconst MID_OPACITY = 0.34;\nconst HIGH_OPACITY = 0.95;\n\nconst ORBIT_POINTS: ReadonlyArray<readonly [number, number]> = [\n  [1, 1],\n  [1, 2],\n  [1, 3],\n  [2, 3],\n  [3, 3],\n  [3, 2],\n  [3, 1],\n  [2, 1]\n];\n\nexport function DotmCircular19({\n  speed = 1.6,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular19Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const phase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1280,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase: p }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const t =\n        reducedMotion || p === \"idle\"\n          ? 0\n          : Math.floor((phase) * ORBIT_POINTS.length) % ORBIT_POINTS.length;\n      const [headRow, headCol] = ORBIT_POINTS[t]!;\n      const [tailRow, tailCol] = ORBIT_POINTS[(t + ORBIT_POINTS.length - 1) % ORBIT_POINTS.length]!;\n\n      let opacity = BASE_OPACITY;\n      if (row === headRow && col === headCol) {\n        opacity = HIGH_OPACITY;\n      } else if (row === tailRow && col === tailCol) {\n        opacity = 0.62;\n      } else if ((col === 1 || col === 3) && (row === 1 || row === 2 || row === 3)) {\n        opacity = MID_OPACITY;\n      } else if (row === 2 && col === 2) {\n        opacity = 0.2;\n      }\n\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, phase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-circular-20.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrixBase } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isWithinCircularMask } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmCircular20Props = DotMatrixCommonProps;\n\nconst STEP_COUNT = 30;\nconst BASE_OPACITY = 0.07;\nconst MID_OPACITY = 0.34;\nconst HIGH_OPACITY = 0.95;\n\nconst GLYPHS: ReadonlyArray<ReadonlySet<string>> = [\n  new Set([\"1,1\", \"2,1\", \"3,1\", \"1,3\", \"2,3\", \"3,3\"]),\n  new Set([\"1,1\", \"2,1\", \"3,1\", \"2,2\", \"1,3\", \"3,3\"]),\n  new Set([\"1,1\", \"1,2\", \"1,3\", \"3,1\", \"3,2\", \"3,3\"]),\n  new Set([\"1,1\", \"2,1\", \"3,1\", \"1,3\", \"2,2\", \"3,3\"]),\n  new Set([\"1,1\", \"2,2\", \"3,3\", \"1,3\", \"3,1\"]),\n  new Set([\"2,1\", \"1,2\", \"2,2\", \"3,2\", \"2,3\"])\n];\n\nexport function DotmCircular20({\n  speed = 1.5,\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: DotmCircular20Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const animPhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1500,\n    speed\n  });\n\n  const resolver = useMemo<DotAnimationResolver>(() => {\n    return ({ row, col, phase }) => {\n      if (!isWithinCircularMask(row, col)) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const t =\n        reducedMotion || phase === \"idle\"\n          ? 0\n          : Math.floor((animPhase) * GLYPHS.length) % GLYPHS.length;\n      const active = GLYPHS[t]!;\n      const previous = GLYPHS[(t + GLYPHS.length - 1) % GLYPHS.length]!;\n      const key = `${row},${col}`;\n\n      let opacity = BASE_OPACITY;\n      if (active.has(key)) {\n        opacity = HIGH_OPACITY;\n      } else if (previous.has(key)) {\n        opacity = MID_OPACITY;\n      } else if (row === 2 && col === 2) {\n        opacity = 0.2;\n      }\n\n      return { style: { opacity } };\n    };\n  }, [reducedMotion, animPhase]);\n\n  return (\n    <DotMatrixBase\n      {...rest}\n      size={rest.size ?? 36}\n      dotSize={rest.dotSize ?? 5}\n      speed={speed}\n      pattern=\"full\"\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={resolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-1.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle1Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\nconst STEP_COUNT = 30;\nconst BASE_OPACITY = 0.08;\nconst CENTER_OPACITY = 0.24;\nconst TAIL_LEVELS = [0.96, 0.72, 0.52, 0.34, 0.2] as const;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nconst CENTER_ROW = 3;\nconst CENTER_COL = 3;\nconst PERIMETER_PATH: ReadonlyArray<readonly [number, number]> = [\n  [1, 3],\n  [2, 2],\n  [3, 1],\n  [4, 0],\n  [4, 2],\n  [4, 4],\n  [4, 6],\n  [3, 5],\n  [2, 4]\n];\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  // Staggered 1-2-3-4 triangle (base has exactly 4 cells), matching reference silhouette.\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nexport function DotmTriangle1({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 5,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle1Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1650,\n    steps: STEP_COUNT,\n    speed,\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", dmxBloomHaloSpreadClass(halo), className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          let opacity = 0;\n          if (isActive) {\n            const frame = reducedMotion || matrixPhase === \"idle\" ? 0 : step;\n            opacity = BASE_OPACITY;\n\n            if (row === CENTER_ROW && col === CENTER_COL) {\n              opacity = CENTER_OPACITY;\n            }\n\n            const head = Math.floor((frame / STEP_COUNT) * PERIMETER_PATH.length) % PERIMETER_PATH.length;\n            for (let trail = 0; trail < TAIL_LEVELS.length; trail += 1) {\n              const idx = (head - trail + PERIMETER_PATH.length) % PERIMETER_PATH.length;\n              const [pathRow, pathCol] = PERIMETER_PATH[idx]!;\n              if (row === pathRow && col === pathCol) {\n                opacity = Math.max(opacity, TAIL_LEVELS[trail]!);\n                break;\n              }\n            }\n          }\n\n          const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-2.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle2Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\nconst STEP_COUNT = 36;\nconst BASE_OPACITY = 0.08;\nconst MID_OPACITY = 0.34;\nconst HIGH_OPACITY = 0.94;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nexport function DotmTriangle2({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.5,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle2Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1550,\n    steps: STEP_COUNT,\n    speed,\n  });\n\n  const frame = reducedMotion || matrixPhase === \"idle\" ? 0 : step;\n  const progress = frame / STEP_COUNT;\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", dmxBloomHaloSpreadClass(halo), className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          let opacity = 0;\n          if (isActive) {\n            const rowPhase = (4 - row) * 0.13;\n            const pulse = 0.5 - 0.5 * Math.cos((progress + rowPhase) * Math.PI * 2);\n            const crest = pulse * pulse;\n            const altitudeWeight = 0.58 + (4 - row) * 0.16;\n            const centerWeight = col === 3 ? 0.16 : 0;\n\n            opacity =\n              BASE_OPACITY +\n              pulse * (MID_OPACITY - BASE_OPACITY) +\n              crest * (altitudeWeight + centerWeight) * (HIGH_OPACITY - MID_OPACITY);\n\n            opacity = Math.min(HIGH_OPACITY, opacity);\n          }\n\n          const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-3.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle3Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\nconst STEP_COUNT = 36;\nconst BASE_OPACITY = 0.03;\nconst MID_OPACITY = 0.07;\nconst HIGH_OPACITY = 0.94;\nconst FAR_OPACITY = 0.15;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nexport function DotmTriangle3({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.45,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle3Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1650,\n    steps: STEP_COUNT,\n    speed,\n  });\n\n  const frame = reducedMotion || matrixPhase === \"idle\" ? 0 : step;\n  const theta = (frame / STEP_COUNT) * Math.PI * 2;\n  const sweepX = Math.cos(theta);\n  const sweepY = Math.sin(theta);\n  const ambientPulse = 0.5 - 0.5 * Math.cos(theta);\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", dmxBloomHaloSpreadClass(halo), className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          let opacity = 0;\n          if (isActive) {\n            const centerRow = row - 3;\n            const centerCol = col - 3;\n            const radius = Math.hypot(centerRow, centerCol);\n            const projection = centerCol * sweepX + centerRow * sweepY;\n            const perpendicular = Math.abs(centerCol * sweepY - centerRow * sweepX);\n            const ahead = Math.max(0, projection);\n            const beamCore = Math.max(0, 1 - perpendicular / 0.45);\n            const beamHalo = Math.max(0, 1 - perpendicular / 1.15);\n            const rangeFade = Math.max(0.25, 1 - radius / 3.6);\n            const trail = beamHalo * Math.max(0, 1 - ahead / 3.6);\n\n            opacity = BASE_OPACITY + ambientPulse * (MID_OPACITY - BASE_OPACITY) * rangeFade;\n\n            // Crisp radar beam with a soft trailing glow behind it.\n            opacity = Math.max(opacity, MID_OPACITY + beamCore * (HIGH_OPACITY - MID_OPACITY));\n            opacity = Math.max(opacity, FAR_OPACITY + trail * (MID_OPACITY - FAR_OPACITY));\n\n            if (row === 3 && col === 3) {\n              opacity = Math.max(opacity, 0.56);\n            }\n\n            opacity = Math.min(HIGH_OPACITY, opacity);\n          }\n\n          const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-4.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle4Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\nconst STEP_COUNT = 28;\nconst BASE_OPACITY = 0.0;\nconst MID_OPACITY = 0.0;\nconst HIGH_OPACITY = 0.96;\nconst TRAIL_LEVELS = [HIGH_OPACITY, 0.52, 0.3] as const;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nconst PERIMETER_PATH: ReadonlyArray<readonly [number, number]> = [\n  [1, 3],\n  [2, 2],\n  [3, 1],\n  [4, 0],\n  [4, 2],\n  [4, 4],\n  [4, 6],\n  [3, 5],\n  [2, 4]\n];\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nexport function DotmTriangle4({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.5,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle4Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1450,\n    steps: STEP_COUNT,\n    speed,\n  });\n\n  const frame = reducedMotion || matrixPhase === \"idle\" ? 0 : step;\n  const segmentLength = Math.max(1, Math.floor(STEP_COUNT / 3));\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", dmxBloomHaloSpreadClass(halo), className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          let opacity = 0;\n          if (isActive) {\n            opacity = row === 3 && col === 3 ? MID_OPACITY : BASE_OPACITY;\n\n            for (let headOffset = 0; headOffset < 3; headOffset += 1) {\n              const spokeFrame = (frame + headOffset * segmentLength) % STEP_COUNT;\n              const head = Math.floor((spokeFrame / STEP_COUNT) * PERIMETER_PATH.length);\n\n              for (let trail = 0; trail < TRAIL_LEVELS.length; trail += 1) {\n                const idx = (head - trail + PERIMETER_PATH.length) % PERIMETER_PATH.length;\n                const [pathRow, pathCol] = PERIMETER_PATH[idx]!;\n                if (row === pathRow && col === pathCol) {\n                  opacity = Math.max(opacity, TRAIL_LEVELS[trail]!);\n                  break;\n                }\n              }\n            }\n          }\n\n          const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-5.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle5Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\nconst STEP_COUNT = 42;\nconst BASE_OPACITY = 0.06;\nconst MID_OPACITY = 0.3;\nconst HIGH_OPACITY = 0.92;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nexport function DotmTriangle5({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.8,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle5Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1700,\n    steps: STEP_COUNT,\n    speed,\n  });\n\n  const frame = reducedMotion || matrixPhase === \"idle\" ? 0 : step;\n  const progress = frame / STEP_COUNT;\n  const pingPong = 0.5 - 0.5 * Math.cos(progress * Math.PI * 2);\n  const scanRow = 1 + pingPong * 3;\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", dmxBloomHaloSpreadClass(halo), className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          let opacity = 0;\n          if (isActive) {\n            const distance = Math.abs(row - scanRow);\n            const beam = Math.max(0, 1 - distance / 2.2);\n            const easedBeam = beam * beam;\n            opacity = BASE_OPACITY + easedBeam * (HIGH_OPACITY - BASE_OPACITY);\n\n            if (distance > 1.3) {\n              opacity = Math.max(opacity, MID_OPACITY - Math.min(0.18, (distance - 1.3) * 0.12));\n            }\n\n            // Keep the center consistently readable while rows scan.\n            if (row === 3 && col === 3) {\n              opacity = Math.max(opacity, 0.42);\n            }\n          }\n\n          const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-6.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle6Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\n\n/** Unicode / ISO braille dot numbering (same as `DotmSquare9`). */\nconst D1 = 0x01;\nconst D2 = 0x02;\nconst D3 = 0x04;\nconst D4 = 0x08;\nconst D5 = 0x10;\nconst D6 = 0x20;\n\nconst LOW_OPACITY = 0.07;\nconst MID_OPACITY = 0.36;\nconst HIGH_OPACITY = 0.96;\n\n/** Half-width of the traveling ramp (larger = softer, more “gradient” overlap). */\nconst WAVE_HALF = 0.82;\n\n/** Phase splits (must sum to 1): smooth intro wave, blink, fade reset. */\nconst INTRO_PHASE = 0.52;\nconst BLINK_PHASE = 0.36;\nconst RESET_PHASE = 0.12;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\n/** Six fills (D1..D6 order) from a single traveling wave front. */\nfunction waveFills(introT: number): number[] {\n  const waveCenter = -WAVE_HALF + introT * (5 + 2 * WAVE_HALF);\n  return [0, 1, 2, 3, 4, 5].map((i) =>\n    smoothstep01(i - WAVE_HALF, i + WAVE_HALF, waveCenter)\n  );\n}\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\n/** Map triangle cell → braille bit (ISO 2×3), or null for accent cells. */\nfunction brailleBitForTriangle(row: number, col: number): number | null {\n  if (row === 2 && col === 2) {\n    return D1;\n  }\n  if (row === 3 && col === 1) {\n    return D2;\n  }\n  if (row === 4 && col === 0) {\n    return D3;\n  }\n  if (row === 2 && col === 4) {\n    return D4;\n  }\n  if (row === 3 && col === 5) {\n    return D5;\n  }\n  if (row === 4 && col === 6) {\n    return D6;\n  }\n  return null;\n}\n\nconst BIT_TO_FILL_INDEX: Record<number, number> = {\n  [D1]: 0,\n  [D2]: 1,\n  [D3]: 2,\n  [D4]: 3,\n  [D5]: 4,\n  [D6]: 5\n};\n\nfunction meanFills(indices: readonly number[], fills: readonly number[]): number {\n  let s = 0;\n  for (const i of indices) {\n    s += fills[i] ?? 0;\n  }\n  return s / indices.length;\n}\n\nfunction opacityForCell(\n  row: number,\n  col: number,\n  fills: readonly number[],\n  blinkMul: number,\n  resetMul: number\n): number {\n  const lift = (base: number) =>\n    LOW_OPACITY + (base - LOW_OPACITY) * blinkMul * resetMul;\n\n  const bit = brailleBitForTriangle(row, col);\n  if (bit !== null) {\n    const idx = BIT_TO_FILL_INDEX[bit] ?? 0;\n    const raw = LOW_OPACITY + (HIGH_OPACITY - LOW_OPACITY) * (fills[idx] ?? 0);\n    return lift(raw);\n  }\n\n  if (row === 1 && col === 3) {\n    const m = meanFills([0, 3], fills);\n    const raw = LOW_OPACITY + (HIGH_OPACITY - LOW_OPACITY) * m * 0.92 + (MID_OPACITY - LOW_OPACITY) * (1 - m) * 0.35;\n    return lift(Math.min(HIGH_OPACITY, raw));\n  }\n\n  if (row === 3 && col === 3) {\n    const m = meanFills([0, 1, 2, 3, 4, 5], fills);\n    const raw =\n      LOW_OPACITY +\n      (HIGH_OPACITY - LOW_OPACITY) * m * 0.88 +\n      (MID_OPACITY - LOW_OPACITY) * (1 - m) * 0.4;\n    return lift(Math.min(HIGH_OPACITY, raw));\n  }\n\n  if (row === 4 && col === 2) {\n    const m = meanFills([1, 2], fills);\n    const raw = LOW_OPACITY + (MID_OPACITY + 0.28 - LOW_OPACITY) * m;\n    return lift(raw);\n  }\n  if (row === 4 && col === 4) {\n    const m = meanFills([4, 5], fills);\n    const raw = LOW_OPACITY + (MID_OPACITY + 0.28 - LOW_OPACITY) * m;\n    return lift(raw);\n  }\n\n  return LOW_OPACITY;\n}\n\nfunction cycleParams(phase: number): {\n  fills: number[];\n  blinkMul: number;\n  resetMul: number;\n} {\n  if (phase < INTRO_PHASE) {\n    const introT = phase / INTRO_PHASE;\n    return { fills: waveFills(introT), blinkMul: 1, resetMul: 1 };\n  }\n\n  if (phase < INTRO_PHASE + BLINK_PHASE) {\n    const bt = (phase - INTRO_PHASE) / BLINK_PHASE;\n    const on = Math.floor(bt * 4) % 2 === 0;\n    return { fills: [1, 1, 1, 1, 1, 1], blinkMul: on ? 1 : 0.08, resetMul: 1 };\n  }\n\n  const rt = (phase - INTRO_PHASE - BLINK_PHASE) / RESET_PHASE;\n  const resetMul = 1 - smoothstep01(0, 1, rt);\n  return { fills: [1, 1, 1, 1, 1, 1], blinkMul: 1, resetMul };\n}\n\nexport function DotmTriangle6({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 2.2,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle6Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 3000,\n    speed\n  });\n\n  const { fills, blinkMul, resetMul } = reducedMotion || matrixPhase === \"idle\"\n    ? {\n      fills: [0.55, 0.55, 0.55, 0.55, 0.55, 0.55] as number[],\n      blinkMul: 1,\n      resetMul: 1\n    }\n    : cycleParams(cyclePhase);\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const opacity = isActive ? opacityForCell(row, col, fills, blinkMul, resetMul) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-7.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle7Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\n\nconst BASE_OPACITY = 0.06;\nconst MID_OPACITY = 0.38;\nconst HIGH_OPACITY = 0.96;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\n/** Sliding diagonal bands: same `row + col` share a phase so stripes read as continuous diagonals. */\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const diag = row + col;\n  const t = phase * Math.PI * 2;\n  const u = diag * 0.55 - t * 1.35;\n  const primary = 0.5 + 0.5 * Math.cos(u);\n  const harmonic = 0.5 + 0.5 * Math.cos(u * 2 + 0.4);\n  const crest = primary * primary * 0.92 + Math.max(0, harmonic - 0.35) * 0.28;\n  let opacity = BASE_OPACITY + crest * (HIGH_OPACITY - BASE_OPACITY);\n\n  if (row === 3 && col === 3) {\n    opacity = Math.max(opacity, MID_OPACITY + (crest - 0.25) * 0.35);\n  }\n\n  return Math.min(HIGH_OPACITY, opacity);\n}\n\nexport function DotmTriangle7({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.65,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle7Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 2200,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.22 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-8.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle8Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\n\nconst BASE_OPACITY = 0.05;\nconst MID_OPACITY = 0.42;\nconst HIGH_OPACITY = 0.96;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nconst LEFT_WING = new Set([\"2,2\", \"3,1\", \"4,0\", \"4,2\"]);\nconst RIGHT_WING = new Set([\"2,4\", \"3,5\", \"4,4\", \"4,6\"]);\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\ntype Sector = \"left\" | \"right\" | \"spine\" | \"none\";\n\nfunction sectorForCell(row: number, col: number): Sector {\n  const key = `${row},${col}`;\n  if (row === 1 && col === 3) {\n    return \"spine\";\n  }\n  if (row === 3 && col === 3) {\n    return \"spine\";\n  }\n  if (LEFT_WING.has(key)) {\n    return \"left\";\n  }\n  if (RIGHT_WING.has(key)) {\n    return \"right\";\n  }\n  return \"none\";\n}\n\n/**\n * Alternating emphasis on the two lower wings (split by the apex column), with the apex and\n * heart dot brightest when energy crosses the middle (both sides briefly equal).\n */\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const p = 0.5 - 0.5 * Math.cos(phase * Math.PI * 2);\n  const leftLift = p * p;\n  const rightLift = (1 - p) * (1 - p);\n  const crossover = Math.max(0, 1 - 4 * (p - 0.5) * (p - 0.5));\n\n  const sector = sectorForCell(row, col);\n  if (sector === \"none\") {\n    return 0;\n  }\n\n  if (sector === \"spine\") {\n    if (row === 1 && col === 3) {\n      const apex = MID_OPACITY + crossover * (HIGH_OPACITY - MID_OPACITY) * 0.95;\n      return Math.min(HIGH_OPACITY, apex);\n    }\n    const hub = BASE_OPACITY + crossover * 0.55 * (HIGH_OPACITY - BASE_OPACITY) + leftLift * 0.08 + rightLift * 0.08;\n    return Math.min(HIGH_OPACITY, hub);\n  }\n\n  if (sector === \"left\") {\n    const wing = BASE_OPACITY + leftLift * (HIGH_OPACITY - BASE_OPACITY);\n    return Math.min(HIGH_OPACITY, wing);\n  }\n\n  const wing = BASE_OPACITY + rightLift * (HIGH_OPACITY - BASE_OPACITY);\n  return Math.min(HIGH_OPACITY, wing);\n}\n\nexport function DotmTriangle8({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.55,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle8Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 1500,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.25 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-9.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle9Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\n\nconst BASE_OPACITY = 0.14;\nconst HIGH_OPACITY = 0.96;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nconst DELTAS_8: ReadonlyArray<readonly [number, number]> = [\n  [-1, -1],\n  [-1, 0],\n  [-1, 1],\n  [0, -1],\n  [0, 1],\n  [1, -1],\n  [1, 0],\n  [1, 1]\n];\n\nfunction buildBfsRingFromCenter(): Map<string, number> {\n  const dist = new Map<string, number>();\n  const start = \"3,3\";\n  if (!TRIANGLE_CELLS.has(start)) {\n    return dist;\n  }\n\n  const queue: [number, number][] = [[3, 3]];\n  dist.set(start, 0);\n  let head = 0;\n\n  while (head < queue.length) {\n    const [r, c] = queue[head]!;\n    head += 1;\n    const d = dist.get(`${r},${c}`)!;\n\n    for (const [dr, dc] of DELTAS_8) {\n      const nr = r + dr;\n      const nc = c + dc;\n      const key = `${nr},${nc}`;\n      if (TRIANGLE_CELLS.has(key) && !dist.has(key)) {\n        dist.set(key, d + 1);\n        queue.push([nr, nc]);\n      }\n    }\n  }\n\n  return dist;\n}\n\nconst BFS_RING = buildBfsRingFromCenter();\nconst MAX_RING = Math.max(0, ...BFS_RING.values());\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\n/**\n * Concentric tiers from the heart (8-connected). One soft bright band travels outward/inward;\n * smoothstep softens the cosine so ring-to-ring steps do not read as harsh pops between discrete phase steps.\n */\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const ring = BFS_RING.get(`${row},${col}`) ?? 0;\n  const span = Math.max(1, MAX_RING);\n  const t = phase * Math.PI * 2;\n  const u = (ring / span) * Math.PI * 2 - t;\n  const wave = 0.5 + 0.5 * Math.cos(u);\n  const crest = smoothstep01(0.35, 1, wave);\n  const opacity = BASE_OPACITY + crest * (HIGH_OPACITY - BASE_OPACITY);\n  return Math.min(HIGH_OPACITY, opacity);\n}\n\nexport function DotmTriangle9({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.5,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle9Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 1800,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.18 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-10.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle10Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\nconst STEP_COUNT = 36;\nconst BASE_OPACITY = 0.07;\nconst TAIL_LEVELS = [0.94, 0.68, 0.42, 0.24] as const;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\n/** Bottom-to-top within each column, columns 0→6 — only triangle cells appear in the path. */\nconst COLUMN_RAKE_PATH: ReadonlyArray<readonly [number, number]> = [\n  [4, 0],\n  [3, 1],\n  [4, 2],\n  [2, 2],\n  [3, 3],\n  [1, 3],\n  [4, 4],\n  [2, 4],\n  [4, 6],\n  [3, 5]\n];\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nexport function DotmTriangle10({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.8,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle10Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1750,\n    steps: STEP_COUNT,\n    speed,\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  const pathLen = COLUMN_RAKE_PATH.length;\n  const frame = reducedMotion || matrixPhase === \"idle\" ? 0 : step;\n  const head = Math.floor((frame / STEP_COUNT) * pathLen) % pathLen;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", dmxBloomHaloSpreadClass(halo), className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          let opacity = 0;\n          if (isActive) {\n            opacity = BASE_OPACITY;\n\n            for (let trail = 0; trail < TAIL_LEVELS.length; trail += 1) {\n              const idx = (head - trail + pathLen) % pathLen;\n              const [pathRow, pathCol] = COLUMN_RAKE_PATH[idx]!;\n              if (row === pathRow && col === pathCol) {\n                opacity = Math.max(opacity, TAIL_LEVELS[trail]!);\n                break;\n              }\n            }\n          }\n\n          const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-11.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle11Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\n\nconst BASE_OPACITY = 0.13;\nconst MID_OPACITY = 0.36;\nconst HIGH_OPACITY = 0.96;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nconst APEX_ROW = 1;\nconst APEX_COL = 3;\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nfunction manhattanFromApex(row: number, col: number): number {\n  return Math.abs(row - APEX_ROW) + Math.abs(col - APEX_COL);\n}\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\n/**\n * Bright bands move down the triangle by tier: phase keys on Manhattan distance from the apex,\n * not the heart cell — reads as stacked horizontal “shelves” lighting in sequence.\n */\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const tier = manhattanFromApex(row, col);\n  const maxTier = 6;\n  const t = phase * Math.PI * 2;\n  const u = (tier / maxTier) * Math.PI * 2 - t;\n  const wave = 0.5 + 0.5 * Math.cos(u);\n  const crest = smoothstep01(0.28, 0.98, wave);\n  let opacity = BASE_OPACITY + crest * (HIGH_OPACITY - BASE_OPACITY);\n\n  if (row === 3 && col === 3) {\n    opacity = Math.max(opacity, MID_OPACITY + crest * 0.35);\n  }\n\n  return Math.min(HIGH_OPACITY, opacity);\n}\n\nexport function DotmTriangle11({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.75,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle11Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 1400,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.18 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-12.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle12Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\n\nconst BASE_OPACITY = 0.06;\nconst MID_OPACITY = 0.34;\nconst HIGH_OPACITY = 0.96;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\n/**\n * Anti-diagonal harmonics on `row - col`: bands glide along NE–SW lines through the mask,\n * opposite oblique motion to loaders keyed on `row + col`.\n */\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const skew = row - col;\n  const t = phase * Math.PI * 2;\n  const u = skew * 0.62 - t * 1.45;\n  const primary = 0.5 + 0.5 * Math.cos(u);\n  const harmonic = 0.5 + 0.5 * Math.cos(u * 2 - 0.55);\n  const pSoft = smoothstep01(0.12, 0.95, primary);\n  const hSoft = smoothstep01(0.38, 0.92, harmonic);\n  const crest = pSoft * pSoft * 0.88 + Math.max(0, hSoft - 0.42) * 0.32;\n  let opacity = BASE_OPACITY + crest * (HIGH_OPACITY - BASE_OPACITY);\n\n  if (row === 3 && col === 3) {\n    opacity = Math.max(opacity, MID_OPACITY + (crest - 0.22) * 0.4);\n  }\n\n  return Math.min(HIGH_OPACITY, opacity);\n}\n\nexport function DotmTriangle12({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.5,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle12Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 2300,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.2 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-13.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle13Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\nconst BASE_OPACITY = 0.13;\nconst HIGH_OPACITY = 0.95;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\n/** Row serpent: base row left→right, row 3 right→left, mid rows alternate — reads as a zigzag zip. */\nconst SERPENT_PATH: ReadonlyArray<readonly [number, number]> = [\n  [4, 0],\n  [4, 2],\n  [4, 4],\n  [4, 6],\n  [3, 5],\n  [3, 3],\n  [3, 1],\n  [2, 2],\n  [2, 4],\n  [1, 3]\n];\n\nconst PATH_LEN = SERPENT_PATH.length;\n/** Soft tail length in path units (Braille-style ramp, not discrete steps). */\nconst TRAIL_SPAN = 4.25;\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nfunction pathIndex(row: number, col: number): number | null {\n  for (let i = 0; i < PATH_LEN; i += 1) {\n    const [pr, pc] = SERPENT_PATH[i]!;\n    if (pr === row && pc === col) {\n      return i;\n    }\n  }\n  return null;\n}\n\nfunction modF(n: number, m: number): number {\n  return ((n % m) + m) % m;\n}\n\nfunction behindAlongPath(s: number, i: number, L: number): number {\n  return modF(s - i, L);\n}\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const idx = pathIndex(row, col);\n  if (idx === null) {\n    return 0;\n  }\n\n  const s = phase * PATH_LEN;\n  const d = behindAlongPath(s, idx, PATH_LEN);\n  const g = 1 - smoothstep01(0, TRAIL_SPAN, d);\n  return BASE_OPACITY + g * (HIGH_OPACITY - BASE_OPACITY);\n}\n\nexport function DotmTriangle13({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.65,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle13Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 1400,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.14 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-14.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle14Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\n\nconst BASE_OPACITY = 0.07;\nconst MID_OPACITY = 0.32;\nconst HIGH_OPACITY = 0.96;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\n/**\n * A soft vertical “pillar” of brightness sweeps column 0→6; only masked dots respond,\n * so the triangle appears to light one vertical slice at a time (not a cell path).\n */\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const beamCenter = phase * 7.2 - 0.35;\n  const dist = Math.abs(col - beamCenter);\n  const core = 1 - smoothstep01(0, 0.62, dist);\n  const halo = 1 - smoothstep01(0.35, 1.42, dist);\n  const eased = core * 0.92 + halo * 0.22;\n  let opacity = BASE_OPACITY + eased * (HIGH_OPACITY - BASE_OPACITY);\n\n  if (row === 3 && col === 3) {\n    opacity = Math.max(opacity, MID_OPACITY + eased * 0.28);\n  }\n\n  return Math.min(HIGH_OPACITY, opacity);\n}\n\nexport function DotmTriangle14({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.45,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle14Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 1500,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.12 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-15.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle15Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\n\nconst BASE_OPACITY = 0.08;\nconst MID_OPACITY = 0.38;\nconst HIGH_OPACITY = 0.96;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\n/** Apex and the two base corners — the three natural vertices of the silhouette. */\nconst HUBS: ReadonlyArray<readonly [number, number]> = [\n  [1, 3],\n  [4, 0],\n  [4, 6]\n];\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nfunction manhattan(aRow: number, aCol: number, bRow: number, bCol: number): number {\n  return Math.abs(aRow - bRow) + Math.abs(aCol - bCol);\n}\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction falloffFromHub(row: number, col: number, hub: readonly [number, number]): number {\n  const d = manhattan(row, col, hub[0], hub[1]);\n  return 1 - smoothstep01(0, 5.4, d);\n}\n\n/**\n * Energy orbits the three triangle vertices (apex → left base → right base) on a continuous phase,\n * with soft Manhattan falloff — no lattice mod groups.\n */\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const t = phase * Math.PI * 2;\n  const sharp = 4;\n  const u0 = Math.max(0, Math.cos(t)) ** sharp;\n  const u1 = Math.max(0, Math.cos(t - (Math.PI * 2) / 3)) ** sharp;\n  const u2 = Math.max(0, Math.cos(t - (Math.PI * 4) / 3)) ** sharp;\n  const sum = u0 + u1 + u2 + 1e-4;\n\n  const glowA = falloffFromHub(row, col, HUBS[0]!);\n  const glowB = falloffFromHub(row, col, HUBS[1]!);\n  const glowC = falloffFromHub(row, col, HUBS[2]!);\n  const glow = (glowA * u0 + glowB * u1 + glowC * u2) / sum;\n\n  let opacity = BASE_OPACITY + glow * (HIGH_OPACITY - BASE_OPACITY);\n\n  if (row === 3 && col === 3) {\n    opacity = Math.max(opacity, MID_OPACITY + glow * 0.32);\n  }\n\n  return Math.min(HIGH_OPACITY, opacity);\n}\n\nexport function DotmTriangle15({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.8,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle15Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 1100,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.15 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-16.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle16Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\n\nconst BASE_OPACITY = 0.1;\nconst MID_OPACITY = 0.36;\nconst HIGH_OPACITY = 0.96;\n/**\n * Inverted-V coordinate: same row is lower on the left/right flanks than in the center column,\n * so a moving front forms a V rising toward the apex (not a flat row band like Row Sweep).\n */\nconst WING = 0.52;\nconst FRONT_SIGMA = 0.88;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\n/**\n * Brightness peaks along a V-shaped isopleth: `row - wing * |col - 3|`.\n * The \"front\" oscillates in that space, so the highlight rides up the two lower legs\n * and meets at the top — convective lift, not a horizontal scanline.\n */\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const t = phase * Math.PI * 2;\n  const v = row - WING * Math.abs(col - 3);\n  const front = 1.85 + 1.4 * Math.sin(t);\n  const d = Math.abs(v - front);\n  const glowRaw = Math.exp(-(d * d) / (FRONT_SIGMA * FRONT_SIGMA));\n  const glow = smoothstep01(0.04, 0.98, glowRaw);\n  let opacity = BASE_OPACITY + glow * (HIGH_OPACITY - BASE_OPACITY);\n\n  if (row === 3 && col === 3) {\n    opacity = Math.max(opacity, MID_OPACITY * 0.58 + glow * (HIGH_OPACITY - MID_OPACITY) * 0.48);\n  }\n\n  return Math.min(HIGH_OPACITY, opacity);\n}\n\nexport function DotmTriangle16({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.55,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle16Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 2400,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.12 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-17.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle17Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\nconst BASE_OPACITY = 0.06;\nconst HIGH_OPACITY = 0.95;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\n/**\n * Visits every triangle cell once per lap: up the left rim to the apex, down the right rim,\n * then cuts through (4,4) → center → (4,2) — reads as a crossing “∞” on the silhouette.\n */\nconst INFINITY_PATH: ReadonlyArray<readonly [number, number]> = [\n  [4, 0],\n  [3, 1],\n  [2, 2],\n  [1, 3],\n  [2, 4],\n  [3, 5],\n  [4, 6],\n  [4, 4],\n  [3, 3],\n  [4, 2]\n];\n\nconst PATH_LEN = INFINITY_PATH.length;\nconst TRAIL_SPAN = 4.35;\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nfunction pathIndex(row: number, col: number): number | null {\n  for (let i = 0; i < PATH_LEN; i += 1) {\n    const [pr, pc] = INFINITY_PATH[i]!;\n    if (pr === row && pc === col) {\n      return i;\n    }\n  }\n  return null;\n}\n\nfunction modF(n: number, m: number): number {\n  return ((n % m) + m) % m;\n}\n\nfunction behindAlongPath(s: number, i: number, L: number): number {\n  return modF(s - i, L);\n}\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const idx = pathIndex(row, col);\n  if (idx === null) {\n    return 0;\n  }\n\n  const s = phase * PATH_LEN;\n  const d = behindAlongPath(s, idx, PATH_LEN);\n  const g = 1 - smoothstep01(0, TRAIL_SPAN, d);\n  return BASE_OPACITY + g * (HIGH_OPACITY - BASE_OPACITY);\n}\n\nexport function DotmTriangle17({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.8,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle17Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 1500,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.12 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-18.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle18Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\n\nconst CORE_DIM = 0.1;\nconst SHELL_LOW = 0.22;\nconst SHELL_HIGH = 0.96;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\n/**\n * Heart cell stays dim while the outer shell breathes in sync — inverted emphasis vs center-led\n * corona loaders.\n */\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  if (row === 3 && col === 3) {\n    return CORE_DIM;\n  }\n\n  const breathe = 0.5 + 0.5 * Math.sin(phase * Math.PI * 2);\n  const crest = smoothstep01(0.2, 0.94, breathe);\n  return SHELL_LOW + crest * (SHELL_HIGH - SHELL_LOW);\n}\n\nexport function DotmTriangle18({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.6,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle18Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 1600,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.2 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-19.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle19Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\n\nconst BASE_OPACITY = 0.08;\nconst MID_OPACITY = 0.38;\nconst HIGH_OPACITY = 0.96;\n\nconst CENTER_ROW = 3;\nconst CENTER_COL = 3;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\n/** Wider wedge core (radians) for smoother rotation like Braille ramps. */\nconst BEAM_SIGMA = 0.58;\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nfunction angleDiff(a: number, b: number): number {\n  let d = a - b;\n  while (d > Math.PI) {\n    d -= Math.PI * 2;\n  }\n  while (d < -Math.PI) {\n    d += Math.PI * 2;\n  }\n  return d;\n}\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\n/**\n * A soft **rotating wedge** from the heart cell: brightness peaks where polar angle matches the\n * spinning phase — reads as a searchlight pivot, not a cosine product field.\n */\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  if (row === CENTER_ROW && col === CENTER_COL) {\n    const hub = 0.5 + 0.5 * Math.sin(phase * Math.PI * 2);\n    const hubSoft = smoothstep01(0.12, 0.9, hub);\n    return MID_OPACITY + hubSoft * 0.22;\n  }\n\n  const t = phase * Math.PI * 2;\n  const ang = Math.atan2(row - CENTER_ROW, col - CENTER_COL);\n  const d = angleDiff(ang, t);\n  const beamRaw = Math.exp(-(d * d) / (BEAM_SIGMA * BEAM_SIGMA));\n  const beam = smoothstep01(0.05, 0.98, beamRaw);\n  const rim = 0.5 + 0.5 * Math.cos(ang * 2 - t * 1.15);\n  const accent = smoothstep01(0.45, 0.92, rim) * 0.18;\n  return Math.min(HIGH_OPACITY, BASE_OPACITY + (beam + accent) * (HIGH_OPACITY - BASE_OPACITY));\n}\n\nexport function DotmTriangle19({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.5,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle19Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 1400,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.12 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-triangle-20.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmTriangle20Props = DotMatrixCommonProps;\n\nconst MATRIX_SIZE = 7;\nconst BASE_OPACITY = 0.08;\nconst HIGH_OPACITY = 0.94;\nconst CENTER_DIM = 0.2;\n\nconst TRIANGLE_CELLS = new Set([\n  \"1,3\",\n  \"2,2\",\n  \"2,4\",\n  \"3,1\",\n  \"3,3\",\n  \"3,5\",\n  \"4,0\",\n  \"4,2\",\n  \"4,4\",\n  \"4,6\"\n]);\n\n/** Same perimeter ring as DotmTriangle1 — center is not on this loop. */\nconst PERIMETER_PATH: ReadonlyArray<readonly [number, number]> = [\n  [1, 3],\n  [2, 2],\n  [3, 1],\n  [4, 0],\n  [4, 2],\n  [4, 4],\n  [4, 6],\n  [3, 5],\n  [2, 4]\n];\n\nconst PATH_LEN = PERIMETER_PATH.length;\nconst TRAIL_SPAN = 3.35;\nconst HALF = PATH_LEN / 2;\n\nfunction isWithinTriangleMask(row: number, col: number): boolean {\n  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {\n    return false;\n  }\n\n  return TRIANGLE_CELLS.has(`${row},${col}`);\n}\n\nfunction pathIndex(row: number, col: number): number | null {\n  for (let i = 0; i < PATH_LEN; i += 1) {\n    const [pr, pc] = PERIMETER_PATH[i]!;\n    if (pr === row && pc === col) {\n      return i;\n    }\n  }\n  return null;\n}\n\nfunction modF(n: number, m: number): number {\n  return ((n % m) + m) % m;\n}\n\nfunction behindAlongPath(s: number, i: number, L: number): number {\n  return modF(s - i, L);\n}\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction glowAlongPath(s: number, idx: number | null, L: number): number {\n  if (idx === null) {\n    return BASE_OPACITY;\n  }\n  const d = behindAlongPath(s, idx, L);\n  const g = 1 - smoothstep01(0, TRAIL_SPAN, d);\n  return BASE_OPACITY + g * (HIGH_OPACITY - BASE_OPACITY);\n}\n\n/**\n * Two heads chase the perimeter **half a lap apart**, each with its own soft tail — center stays dim.\n */\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  if (row === 3 && col === 3) {\n    return CENTER_DIM;\n  }\n\n  const idx = pathIndex(row, col);\n  const s1 = phase * PATH_LEN;\n  const s2 = modF(s1 + HALF, PATH_LEN);\n  const a = glowAlongPath(s1, idx, PATH_LEN);\n  const b = glowAlongPath(s2, idx, PATH_LEN);\n  return Math.min(HIGH_OPACITY, Math.max(a, b));\n}\n\nexport function DotmTriangle20({\n  size = 30,\n  dotSize = 6.5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.7,\n  animated = true,\n  hoverAnimated = false,\n  cellPadding,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmTriangle20Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cycleActive = !reducedMotion && matrixPhase !== \"idle\";\n  const cyclePhase = useCyclePhase({\n    active: cycleActive,\n    cycleMsBase: 1800,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));\n  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const rootStyle = {\n    width: stylePx(cellPadding == null ? size : matrixSize),\n    height: stylePx(cellPadding == null ? size : matrixSize),\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor\n  } as CSSProperties;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", className)}\n      style={rootStyle}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div\n        className=\"dmx-grid\"\n        style={{\n          gap,\n          gridTemplateColumns: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`,\n          gridTemplateRows: `repeat(${MATRIX_SIZE}, minmax(0, 1fr))`\n        }}\n      >\n        {Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {\n          const row = Math.floor(index / MATRIX_SIZE);\n          const col = index % MATRIX_SIZE;\n          const isActive = isWithinTriangleMask(row, col);\n\n          const phase = reducedMotion || matrixPhase === \"idle\" ? 0.1 : cyclePhase;\n          const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                    const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak);\n\n          return (\n            <span\n              key={index}\n              aria-hidden=\"true\"\n              className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n              style={{\n                width: stylePx(dotSize),\n                height: stylePx(dotSize),\n                opacity: styleOpacity(remapOpacityToTriplet(opacity, opacityBase, opacityMid, opacityPeak)),\n                [\"--dmx-bloom-level\" as const]: dmxBloom.level\n              } as CSSProperties}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-hex-1.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { getPatternIndexes } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmHex1Props = DotMatrixCommonProps;\n\nconst ROW_COUNTS = [3, 4, 5, 4, 3] as const;\nconst BASE_OPACITY = 0.1;\nconst MID_OPACITY = 0.2;\nconst HIGH_OPACITY = 0.96;\nconst CENTER_OPACITY = 0.1;\nconst TRAIL_SPAN = 5;\nconst HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;\n\nfunction hexPatternIndex(row: number, rowCount: number, col: number): number {\n  return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;\n}\n\nconst PERIMETER_PATH = [\n  \"0,0\",\n  \"0,1\",\n  \"0,2\",\n  \"1,3\",\n  \"2,4\",\n  \"3,3\",\n  \"4,2\",\n  \"4,1\",\n  \"4,0\",\n  \"3,0\",\n  \"2,0\",\n  \"1,0\"\n] as const;\n\nconst PATH_LEN = PERIMETER_PATH.length;\nconst HALF_PATH = PATH_LEN / 2;\n\nfunction clamp01(n: number | undefined) {\n  if (n == null || !Number.isFinite(n)) {\n    return;\n  }\n  return Math.min(1, Math.max(0, n));\n}\n\nfunction modF(n: number, m: number): number {\n  return ((n % m) + m) % m;\n}\n\nfunction smoothstep01(edge0: number, edge1: number, x: number): number {\n  if (edge1 <= edge0) {\n    return x >= edge1 ? 1 : 0;\n  }\n  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction glowAlongPath(head: number, pathIndex: number | null): number {\n  if (pathIndex === null) {\n    return BASE_OPACITY;\n  }\n\n  const distance = modF(head - pathIndex, PATH_LEN);\n  const glow = 1 - smoothstep01(0, TRAIL_SPAN, distance);\n  return BASE_OPACITY + glow * (HIGH_OPACITY - BASE_OPACITY);\n}\n\nfunction opacityForCell(id: string, phase: number): number {\n  if (id === \"2,2\") {\n    return CENTER_OPACITY;\n  }\n\n  const pathIndex = PERIMETER_PATH.indexOf(id as (typeof PERIMETER_PATH)[number]);\n  const normalizedPathIndex = pathIndex === -1 ? null : pathIndex;\n  const headA = phase * PATH_LEN;\n  const headB = modF(headA + HALF_PATH, PATH_LEN);\n  const perimeterGlow = Math.max(\n    glowAlongPath(headA, normalizedPathIndex),\n    glowAlongPath(headB, normalizedPathIndex) * 0.74\n  );\n\n  if (normalizedPathIndex !== null) {\n    return Math.min(HIGH_OPACITY, perimeterGlow);\n  }\n\n  const [, col] = id.split(\",\").map(Number);\n  const centerFalloff = col === 2 ? MID_OPACITY : 0.18;\n  return Math.max(BASE_OPACITY, centerFalloff);\n}\n\nexport function DotmHex1({\n  size = 34,\n  dotSize = 5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.6,\n  animated = true,\n  hoverAnimated = false,\n  pattern = \"full\",\n  cellPadding,\n  boxSize,\n  minSize,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmHex1Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cyclePhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1500,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1)));\n  const colPitch = dotSize + gap;\n  const rowGap = Math.max(1, colPitch * HEX_ROW_PITCH_RATIO - dotSize);\n  const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1);\n  const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1);\n  const matrixSpan = Math.max(matrixWidth, matrixHeight);\n  const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0);\n  const useWrapper = boxSize != null || minSize != null;\n  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;\n  const ob = clamp01(opacityBase);\n  const om = clamp01(opacityMid);\n  const op = clamp01(opacityPeak);\n  const phase = reducedMotion || matrixPhase === \"idle\" ? 0.08 : cyclePhase;\n  const activePatternIndexes = getPatternIndexes(pattern);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const matrixStyle = {\n    width: stylePx(matrixWidth),\n    height: stylePx(matrixHeight),\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor,\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    ...(ob !== undefined && { [\"--dmx-opacity-base\" as const]: ob }),\n    ...(om !== undefined && { [\"--dmx-opacity-mid\" as const]: om }),\n    ...(op !== undefined && { [\"--dmx-opacity-peak\" as const]: op }),\n    ...(useWrapper\n      ? {\n          transform: `scale(${scale})`,\n          transformOrigin: \"center center\" as const\n        }\n      : { minWidth: minSize, minHeight: minSize })\n  } as unknown as CSSProperties;\n\n  const matrix = (\n    <div\n      role={useWrapper ? undefined : \"status\"}\n      aria-live={useWrapper ? undefined : \"polite\"}\n      aria-label={useWrapper ? undefined : ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", !useWrapper && className)}\n      style={matrixStyle}\n      onMouseEnter={useWrapper ? undefined : onMouseEnter}\n      onMouseLeave={useWrapper ? undefined : onMouseLeave}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: stylePx(rowGap),\n          width: \"100%\",\n          height: \"100%\"\n        }}\n      >\n        {ROW_COUNTS.map((count, row) => (\n          <div\n            key={row}\n            style={{\n              display: \"flex\",\n              justifyContent: \"center\",\n              gap: stylePx(gap)\n            }}\n          >\n            {Array.from({ length: count }).map((_, col) => {\n              const id = `${row},${col}`;\n              const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col));\n              const opacity = isActive ? opacityForCell(id, phase) : 0;\n\n                        const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op);\n\n          return (\n                <span\n                  key={id}\n                  aria-hidden=\"true\"\n                  className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n                  style={{\n                    width: stylePx(dotSize),\n                    height: stylePx(dotSize),\n                    opacity: styleOpacity(remapOpacityToTriplet(opacity, ob, om, op)),\n                    [\"--dmx-bloom-level\" as const]: dmxBloom.level\n                  } as CSSProperties}\n                />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n\n  if (useWrapper) {\n    return (\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={ariaLabel}\n        className={className}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: stylePx(outerDim),\n          height: stylePx(outerDim),\n          minWidth: minSize == null ? undefined : stylePx(minSize),\n          minHeight: minSize == null ? undefined : stylePx(minSize),\n          overflow: \"hidden\"\n        }}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {matrix}\n      </div>\n    );\n  }\n\n  return matrix;\n}\n"
    },
    {
      "path": "components/ui/dotm-hex-2.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { getPatternIndexes } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmHex2Props = DotMatrixCommonProps;\n\nconst ROW_COUNTS = [3, 4, 5, 4, 3] as const;\nconst BASE_OPACITY = 0.08;\nconst MID_OPACITY = 0.44;\nconst HIGH_OPACITY = 0.98;\nconst HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;\n\nfunction hexPatternIndex(row: number, rowCount: number, col: number): number {\n  return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;\n}\nconst SPOKE_WIDTH = 0.34;\n\nfunction clamp01(n: number | undefined) {\n  if (n == null || !Number.isFinite(n)) {\n    return;\n  }\n  return Math.min(1, Math.max(0, n));\n}\n\nfunction angularDistance(a: number, b: number): number {\n  const diff = Math.abs(Math.atan2(Math.sin(a - b), Math.cos(a - b)));\n  return Math.min(diff, Math.PI * 2 - diff);\n}\n\nfunction pointForCell(row: number, col: number): { angle: number; radius: number } {\n  const count = ROW_COUNTS[row] ?? 1;\n  const x = col - (count - 1) / 2;\n  const y = (row - 2) * HEX_ROW_PITCH_RATIO;\n  const radius = Math.sqrt(x * x + y * y);\n  return { angle: Math.atan2(y, x), radius };\n}\n\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const { angle, radius } = pointForCell(row, col);\n  if (radius < 0.01) {\n    return MID_OPACITY + Math.sin(phase * Math.PI * 2) * 0.18;\n  }\n\n  const rotation = phase * Math.PI * 2;\n  const spokeA = angularDistance(angle, rotation);\n  const spokeB = angularDistance(angle, rotation + (Math.PI * 2) / 3);\n  const spokeC = angularDistance(angle, rotation + (Math.PI * 4) / 3);\n  const nearestSpoke = Math.min(spokeA, spokeB, spokeC);\n  const spokeGlow = Math.max(0, 1 - nearestSpoke / SPOKE_WIDTH);\n  const outerPulse = 0.5 + 0.5 * Math.sin(phase * Math.PI * 2 - radius * 2.2);\n  const shellLift = radius > 1.7 ? outerPulse * 0.24 : 0;\n\n  return Math.min(HIGH_OPACITY, BASE_OPACITY + spokeGlow * 0.78 + shellLift);\n}\n\nexport function DotmHex2({\n  size = 34,\n  dotSize = 5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.7,\n  animated = true,\n  hoverAnimated = false,\n  pattern = \"full\",\n  cellPadding,\n  boxSize,\n  minSize,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmHex2Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cyclePhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1500,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1)));\n  const colPitch = dotSize + gap;\n  const rowGap = Math.max(1, colPitch * HEX_ROW_PITCH_RATIO - dotSize);\n  const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1);\n  const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1);\n  const matrixSpan = Math.max(matrixWidth, matrixHeight);\n  const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0);\n  const useWrapper = boxSize != null || minSize != null;\n  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;\n  const ob = clamp01(opacityBase);\n  const om = clamp01(opacityMid);\n  const op = clamp01(opacityPeak);\n  const phase = reducedMotion || matrixPhase === \"idle\" ? 0.06 : cyclePhase;\n  const activePatternIndexes = getPatternIndexes(pattern);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const matrixStyle = {\n    width: stylePx(matrixWidth),\n    height: stylePx(matrixHeight),\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor,\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    ...(ob !== undefined && { [\"--dmx-opacity-base\" as const]: ob }),\n    ...(om !== undefined && { [\"--dmx-opacity-mid\" as const]: om }),\n    ...(op !== undefined && { [\"--dmx-opacity-peak\" as const]: op }),\n    ...(useWrapper\n      ? {\n          transform: `scale(${scale})`,\n          transformOrigin: \"center center\" as const\n        }\n      : { minWidth: minSize, minHeight: minSize })\n  } as unknown as CSSProperties;\n\n  const matrix = (\n    <div\n      role={useWrapper ? undefined : \"status\"}\n      aria-live={useWrapper ? undefined : \"polite\"}\n      aria-label={useWrapper ? undefined : ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", !useWrapper && className)}\n      style={matrixStyle}\n      onMouseEnter={useWrapper ? undefined : onMouseEnter}\n      onMouseLeave={useWrapper ? undefined : onMouseLeave}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: stylePx(rowGap),\n          width: \"100%\",\n          height: \"100%\"\n        }}\n      >\n        {ROW_COUNTS.map((count, row) => (\n          <div\n            key={row}\n            style={{\n              display: \"flex\",\n              justifyContent: \"center\",\n              gap: stylePx(gap)\n            }}\n          >\n            {Array.from({ length: count }).map((_, col) => {\n              const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col));\n              const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                        const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op);\n\n          return (\n                <span\n                  key={`${row},${col}`}\n                  aria-hidden=\"true\"\n                  className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n                  style={{\n                    width: stylePx(dotSize),\n                    height: stylePx(dotSize),\n                    opacity: styleOpacity(remapOpacityToTriplet(opacity, ob, om, op)),\n                    [\"--dmx-bloom-level\" as const]: dmxBloom.level\n                  } as CSSProperties}\n                />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n\n  if (useWrapper) {\n    return (\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={ariaLabel}\n        className={className}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: stylePx(outerDim),\n          height: stylePx(outerDim),\n          minWidth: minSize == null ? undefined : stylePx(minSize),\n          minHeight: minSize == null ? undefined : stylePx(minSize),\n          overflow: \"hidden\"\n        }}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {matrix}\n      </div>\n    );\n  }\n\n  return matrix;\n}\n"
    },
    {
      "path": "components/ui/dotm-hex-3.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { getPatternIndexes } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmHex3Props = DotMatrixCommonProps;\n\nconst ROW_COUNTS = [3, 4, 5, 4, 3] as const;\nconst BASE_OPACITY = 0.08;\nconst HIGH_OPACITY = 0.96;\nconst HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;\n\nfunction hexPatternIndex(row: number, rowCount: number, col: number): number {\n  return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;\n}\nconst BAND_WIDTH = 0.55;\n\nfunction clamp01(n: number | undefined) {\n  if (n == null || !Number.isFinite(n)) {\n    return;\n  }\n  return Math.min(1, Math.max(0, n));\n}\n\nfunction pointForCell(row: number, col: number): { x: number; y: number } {\n  const count = ROW_COUNTS[row] ?? 1;\n  return {\n    x: col - (count - 1) / 2,\n    y: (row - 2) * HEX_ROW_PITCH_RATIO\n  };\n}\n\nfunction triangularWave(n: number): number {\n  const wrapped = ((n % 1) + 1) % 1;\n  return 1 - Math.abs(wrapped * 2 - 1);\n}\n\nfunction bandGlow(distance: number): number {\n  return Math.max(0, 1 - Math.abs(distance) / BAND_WIDTH);\n}\n\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const { x, y } = pointForCell(row, col);\n  const sweep = triangularWave(phase) * 3.9 - 1.95;\n  const diagA = x * 0.86 + y * 0.5;\n  const diagB = x * -0.86 + y * 0.5;\n  const gateA = bandGlow(diagA - sweep);\n  const gateB = bandGlow(diagB + sweep);\n  const centerDistance = Math.sqrt(x * x + y * y);\n  const centerFlash = Math.max(0, 1 - Math.abs(sweep) / 0.68) * Math.max(0, 1 - centerDistance / 1.9);\n  const wake = 0.16 * Math.max(0, 1 - Math.abs(y - sweep * 0.22) / 1.2);\n\n  return Math.min(HIGH_OPACITY, BASE_OPACITY + gateA * 0.7 + gateB * 0.7 + centerFlash * 0.42 + wake);\n}\n\nexport function DotmHex3({\n  size = 34,\n  dotSize = 5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.45,\n  animated = true,\n  hoverAnimated = false,\n  pattern = \"full\",\n  cellPadding,\n  boxSize,\n  minSize,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmHex3Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cyclePhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1850,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1)));\n  const colPitch = dotSize + gap;\n  const rowGap = Math.max(1, colPitch * HEX_ROW_PITCH_RATIO - dotSize);\n  const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1);\n  const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1);\n  const matrixSpan = Math.max(matrixWidth, matrixHeight);\n  const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0);\n  const useWrapper = boxSize != null || minSize != null;\n  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;\n  const ob = clamp01(opacityBase);\n  const om = clamp01(opacityMid);\n  const op = clamp01(opacityPeak);\n  const phase = reducedMotion || matrixPhase === \"idle\" ? 0.12 : cyclePhase;\n  const activePatternIndexes = getPatternIndexes(pattern);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const matrixStyle = {\n    width: stylePx(matrixWidth),\n    height: stylePx(matrixHeight),\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor,\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    ...(ob !== undefined && { [\"--dmx-opacity-base\" as const]: ob }),\n    ...(om !== undefined && { [\"--dmx-opacity-mid\" as const]: om }),\n    ...(op !== undefined && { [\"--dmx-opacity-peak\" as const]: op }),\n    ...(useWrapper\n      ? {\n          transform: `scale(${scale})`,\n          transformOrigin: \"center center\" as const\n        }\n      : { minWidth: minSize, minHeight: minSize })\n  } as unknown as CSSProperties;\n\n  const matrix = (\n    <div\n      role={useWrapper ? undefined : \"status\"}\n      aria-live={useWrapper ? undefined : \"polite\"}\n      aria-label={useWrapper ? undefined : ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", !useWrapper && className)}\n      style={matrixStyle}\n      onMouseEnter={useWrapper ? undefined : onMouseEnter}\n      onMouseLeave={useWrapper ? undefined : onMouseLeave}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: stylePx(rowGap),\n          width: \"100%\",\n          height: \"100%\"\n        }}\n      >\n        {ROW_COUNTS.map((count, row) => (\n          <div\n            key={row}\n            style={{\n              display: \"flex\",\n              justifyContent: \"center\",\n              gap: stylePx(gap)\n            }}\n          >\n            {Array.from({ length: count }).map((_, col) => {\n              const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col));\n              const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                        const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op);\n\n          return (\n                <span\n                  key={`${row},${col}`}\n                  aria-hidden=\"true\"\n                  className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n                  style={{\n                    width: stylePx(dotSize),\n                    height: stylePx(dotSize),\n                    opacity: styleOpacity(remapOpacityToTriplet(opacity, ob, om, op)),\n                    [\"--dmx-bloom-level\" as const]: dmxBloom.level\n                  } as CSSProperties}\n                />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n\n  if (useWrapper) {\n    return (\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={ariaLabel}\n        className={className}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: stylePx(outerDim),\n          height: stylePx(outerDim),\n          minWidth: minSize == null ? undefined : stylePx(minSize),\n          minHeight: minSize == null ? undefined : stylePx(minSize),\n          overflow: \"hidden\"\n        }}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {matrix}\n      </div>\n    );\n  }\n\n  return matrix;\n}\n"
    },
    {
      "path": "components/ui/dotm-hex-4.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { getPatternIndexes } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmHex4Props = DotMatrixCommonProps;\n\nconst ROW_COUNTS = [3, 4, 5, 4, 3] as const;\nconst BASE_OPACITY = 0.08;\nconst MID_OPACITY = 0.36;\nconst HIGH_OPACITY = 0.98;\nconst HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;\n\nfunction hexPatternIndex(row: number, rowCount: number, col: number): number {\n  return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;\n}\nconst TRAIL_SPAN = 2.2;\n\nconst VERTEX_PATH = [\n  \"0,2\",\n  \"1,3\",\n  \"2,4\",\n  \"3,3\",\n  \"4,2\",\n  \"3,0\",\n  \"2,0\",\n  \"1,0\",\n  \"0,0\"\n] as const;\n\nconst ECHO_BY_VERTEX: Readonly<Record<(typeof VERTEX_PATH)[number], readonly string[]>> = {\n  \"0,2\": [\"0,1\", \"1,2\"],\n  \"1,3\": [\"1,2\", \"2,3\"],\n  \"2,4\": [\"2,3\", \"2,2\"],\n  \"3,3\": [\"3,2\", \"2,3\"],\n  \"4,2\": [\"4,1\", \"3,2\"],\n  \"3,0\": [\"3,1\", \"2,1\"],\n  \"2,0\": [\"2,1\", \"2,2\"],\n  \"1,0\": [\"1,1\", \"2,1\"],\n  \"0,0\": [\"0,1\", \"1,1\"]\n};\n\nconst PATH_LEN = VERTEX_PATH.length;\n\nfunction clamp01(n: number | undefined) {\n  if (n == null || !Number.isFinite(n)) {\n    return;\n  }\n  return Math.min(1, Math.max(0, n));\n}\n\nfunction pointForCell(row: number, col: number): { x: number; y: number } {\n  const count = ROW_COUNTS[row] ?? 1;\n  return {\n    x: col - (count - 1) / 2,\n    y: (row - 2) * HEX_ROW_PITCH_RATIO\n  };\n}\n\nfunction modF(n: number, m: number): number {\n  return ((n % m) + m) % m;\n}\n\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const id = `${row},${col}`;\n  const head = phase * PATH_LEN;\n  const vertexIndex = VERTEX_PATH.indexOf(id as (typeof VERTEX_PATH)[number]);\n  let opacity = BASE_OPACITY;\n\n  if (vertexIndex >= 0) {\n    const distance = modF(head - vertexIndex, PATH_LEN);\n    const glow = Math.max(0, 1 - distance / TRAIL_SPAN);\n    opacity = Math.max(opacity, BASE_OPACITY + glow * (HIGH_OPACITY - BASE_OPACITY));\n  }\n\n  for (let i = 0; i < PATH_LEN; i += 1) {\n    const vertex = VERTEX_PATH[i]!;\n    if (!ECHO_BY_VERTEX[vertex].includes(id)) {\n      continue;\n    }\n\n    const distance = modF(head - i, PATH_LEN);\n    const echo = Math.max(0, 1 - Math.abs(distance - 0.55) / 1.45);\n    opacity = Math.max(opacity, BASE_OPACITY + echo * 0.52);\n  }\n\n  if (id === \"2,2\") {\n    const centerBeat = 0.5 + 0.5 * Math.sin(phase * Math.PI * PATH_LEN);\n    opacity = Math.max(opacity, MID_OPACITY + centerBeat * 0.22);\n  }\n\n  const { x, y } = pointForCell(row, col);\n  const softFill = Math.max(0, 1 - Math.sqrt(x * x + y * y) / 2.35) * 0.1;\n  return Math.min(HIGH_OPACITY, opacity + softFill);\n}\n\nexport function DotmHex4({\n  size = 34,\n  dotSize = 5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.5,\n  animated = true,\n  hoverAnimated = false,\n  pattern = \"full\",\n  cellPadding,\n  boxSize,\n  minSize,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmHex4Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cyclePhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1650,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1)));\n  const colPitch = dotSize + gap;\n  const rowGap = Math.max(1, colPitch * HEX_ROW_PITCH_RATIO - dotSize);\n  const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1);\n  const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1);\n  const matrixSpan = Math.max(matrixWidth, matrixHeight);\n  const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0);\n  const useWrapper = boxSize != null || minSize != null;\n  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;\n  const ob = clamp01(opacityBase);\n  const om = clamp01(opacityMid);\n  const op = clamp01(opacityPeak);\n  const phase = reducedMotion || matrixPhase === \"idle\" ? 0.12 : cyclePhase;\n  const activePatternIndexes = getPatternIndexes(pattern);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const matrixStyle = {\n    width: stylePx(matrixWidth),\n    height: stylePx(matrixHeight),\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor,\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    ...(ob !== undefined && { [\"--dmx-opacity-base\" as const]: ob }),\n    ...(om !== undefined && { [\"--dmx-opacity-mid\" as const]: om }),\n    ...(op !== undefined && { [\"--dmx-opacity-peak\" as const]: op }),\n    ...(useWrapper\n      ? {\n          transform: `scale(${scale})`,\n          transformOrigin: \"center center\" as const\n        }\n      : { minWidth: minSize, minHeight: minSize })\n  } as unknown as CSSProperties;\n\n  const matrix = (\n    <div\n      role={useWrapper ? undefined : \"status\"}\n      aria-live={useWrapper ? undefined : \"polite\"}\n      aria-label={useWrapper ? undefined : ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", !useWrapper && className)}\n      style={matrixStyle}\n      onMouseEnter={useWrapper ? undefined : onMouseEnter}\n      onMouseLeave={useWrapper ? undefined : onMouseLeave}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: stylePx(rowGap),\n          width: \"100%\",\n          height: \"100%\"\n        }}\n      >\n        {ROW_COUNTS.map((count, row) => (\n          <div key={row} style={{ display: \"flex\", justifyContent: \"center\", gap: stylePx(gap) }}>\n            {Array.from({ length: count }).map((_, col) => {\n              const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col));\n              const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                        const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op);\n\n          return (\n                <span\n                  key={`${row},${col}`}\n                  aria-hidden=\"true\"\n                  className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n                  style={{\n                    width: stylePx(dotSize),\n                    height: stylePx(dotSize),\n                    opacity: styleOpacity(remapOpacityToTriplet(opacity, ob, om, op)),\n                    [\"--dmx-bloom-level\" as const]: dmxBloom.level\n                  } as CSSProperties}\n                />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n\n  if (useWrapper) {\n    return (\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={ariaLabel}\n        className={className}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: stylePx(outerDim),\n          height: stylePx(outerDim),\n          minWidth: minSize == null ? undefined : stylePx(minSize),\n          minHeight: minSize == null ? undefined : stylePx(minSize),\n          overflow: \"hidden\"\n        }}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {matrix}\n      </div>\n    );\n  }\n\n  return matrix;\n}\n"
    },
    {
      "path": "components/ui/dotm-hex-5.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { getPatternIndexes } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmHex5Props = DotMatrixCommonProps;\n\nconst ROW_COUNTS = [3, 4, 5, 4, 3] as const;\nconst BASE_OPACITY = 0.08;\nconst HIGH_OPACITY = 0.96;\nconst HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;\n\nfunction hexPatternIndex(row: number, rowCount: number, col: number): number {\n  return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;\n}\n\nfunction clamp01(n: number | undefined) {\n  if (n == null || !Number.isFinite(n)) {\n    return;\n  }\n  return Math.min(1, Math.max(0, n));\n}\n\nfunction pointForCell(row: number, col: number): { angle: number; radius: number } {\n  const count = ROW_COUNTS[row] ?? 1;\n  const x = col - (count - 1) / 2;\n  const y = (row - 2) * HEX_ROW_PITCH_RATIO;\n  return {\n    angle: Math.atan2(y, x),\n    radius: Math.sqrt(x * x + y * y)\n  };\n}\n\nfunction wavePeak(value: number): number {\n  const wrapped = ((value % 1) + 1) % 1;\n  return Math.max(0, 1 - Math.abs(wrapped * 2 - 1) / 0.55);\n}\n\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const { angle, radius } = pointForCell(row, col);\n  const spiral = phase + radius * 0.18 + angle / (Math.PI * 2);\n  const counterSpiral = phase * 0.72 - radius * 0.16 - angle / (Math.PI * 2);\n  const a = wavePeak(spiral);\n  const b = wavePeak(counterSpiral) * 0.55;\n  const core = radius < 0.1 ? 0.54 + Math.sin(phase * Math.PI * 4) * 0.26 : 0;\n\n  return Math.min(HIGH_OPACITY, BASE_OPACITY + a * 0.7 + b * 0.42 + core);\n}\n\nexport function DotmHex5({\n  size = 34,\n  dotSize = 5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.75,\n  animated = true,\n  hoverAnimated = false,\n  pattern = \"full\",\n  cellPadding,\n  boxSize,\n  minSize,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmHex5Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cyclePhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1450,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1)));\n  const colPitch = dotSize + gap;\n  const rowGap = Math.max(1, colPitch * HEX_ROW_PITCH_RATIO - dotSize);\n  const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1);\n  const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1);\n  const matrixSpan = Math.max(matrixWidth, matrixHeight);\n  const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0);\n  const useWrapper = boxSize != null || minSize != null;\n  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;\n  const ob = clamp01(opacityBase);\n  const om = clamp01(opacityMid);\n  const op = clamp01(opacityPeak);\n  const phase = reducedMotion || matrixPhase === \"idle\" ? 0.18 : cyclePhase;\n  const activePatternIndexes = getPatternIndexes(pattern);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const matrixStyle = {\n    width: stylePx(matrixWidth),\n    height: stylePx(matrixHeight),\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor,\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    ...(ob !== undefined && { [\"--dmx-opacity-base\" as const]: ob }),\n    ...(om !== undefined && { [\"--dmx-opacity-mid\" as const]: om }),\n    ...(op !== undefined && { [\"--dmx-opacity-peak\" as const]: op }),\n    ...(useWrapper\n      ? {\n          transform: `scale(${scale})`,\n          transformOrigin: \"center center\" as const\n        }\n      : { minWidth: minSize, minHeight: minSize })\n  } as unknown as CSSProperties;\n\n  const matrix = (\n    <div\n      role={useWrapper ? undefined : \"status\"}\n      aria-live={useWrapper ? undefined : \"polite\"}\n      aria-label={useWrapper ? undefined : ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", !useWrapper && className)}\n      style={matrixStyle}\n      onMouseEnter={useWrapper ? undefined : onMouseEnter}\n      onMouseLeave={useWrapper ? undefined : onMouseLeave}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: stylePx(rowGap),\n          width: \"100%\",\n          height: \"100%\"\n        }}\n      >\n        {ROW_COUNTS.map((count, row) => (\n          <div key={row} style={{ display: \"flex\", justifyContent: \"center\", gap: stylePx(gap) }}>\n            {Array.from({ length: count }).map((_, col) => {\n              const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col));\n              const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n\n                        const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op);\n\n          return (\n                <span\n                  key={`${row},${col}`}\n                  aria-hidden=\"true\"\n                  className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n                  style={{\n                    width: stylePx(dotSize),\n                    height: stylePx(dotSize),\n                    opacity: styleOpacity(remapOpacityToTriplet(opacity, ob, om, op)),\n                    [\"--dmx-bloom-level\" as const]: dmxBloom.level\n                  } as CSSProperties}\n                />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n\n  if (useWrapper) {\n    return (\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={ariaLabel}\n        className={className}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: stylePx(outerDim),\n          height: stylePx(outerDim),\n          minWidth: minSize == null ? undefined : stylePx(minSize),\n          minHeight: minSize == null ? undefined : stylePx(minSize),\n          overflow: \"hidden\"\n        }}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {matrix}\n      </div>\n    );\n  }\n\n  return matrix;\n}\n"
    },
    {
      "path": "components/ui/dotm-hex-6.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { getPatternIndexes } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmHex6Props = DotMatrixCommonProps;\n\nconst ROW_COUNTS = [3, 4, 5, 4, 3] as const;\nconst BASE_OPACITY = 0.1;\nconst HIGH_OPACITY = 0.98;\nconst HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;\n\nfunction hexPatternIndex(row: number, rowCount: number, col: number): number {\n  return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;\n}\nconst BAND_COUNT = 4;\n\nfunction clamp01(n: number | undefined) {\n  if (n == null || !Number.isFinite(n)) {\n    return;\n  }\n  return Math.min(1, Math.max(0, n));\n}\n\nfunction wrappedDistance(a: number, b: number): number {\n  const diff = Math.abs(a - b) % BAND_COUNT;\n  return Math.min(diff, BAND_COUNT - diff);\n}\n\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const count = ROW_COUNTS[row] ?? 1;\n  const x = col - (count - 1) / 2;\n  const y = row - 2;\n  const downwardChevron = y + Math.abs(x) * 0.92 + 1.55;\n  const upwardChevron = -y + Math.abs(x) * 0.92 + 1.55;\n  const head = phase * BAND_COUNT;\n  const primary = Math.max(0, 1 - wrappedDistance(downwardChevron, head) / 0.78);\n  const secondary = Math.max(0, 1 - wrappedDistance(upwardChevron, head + BAND_COUNT / 2) / 0.92);\n  const centerLift = row === 2 && col === 2 ? 0.18 : 0;\n\n  return Math.min(HIGH_OPACITY, BASE_OPACITY + primary * 0.78 + secondary * 0.38 + centerLift);\n}\n\nexport function DotmHex6({\n  size = 34,\n  dotSize = 5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.55,\n  animated = true,\n  hoverAnimated = false,\n  pattern = \"full\",\n  cellPadding,\n  boxSize,\n  minSize,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmHex6Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cyclePhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1260,\n    speed\n  });\n  const phase = reducedMotion || matrixPhase === \"idle\" ? 0.12 : cyclePhase;\n  const activePatternIndexes = getPatternIndexes(pattern);\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1)));\n  const rowGap = Math.max(1, (dotSize + gap) * HEX_ROW_PITCH_RATIO - dotSize);\n  const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1);\n  const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1);\n  const matrixSpan = Math.max(matrixWidth, matrixHeight);\n  const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0);\n  const useWrapper = boxSize != null || minSize != null;\n  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;\n  const ob = clamp01(opacityBase);\n  const om = clamp01(opacityMid);\n  const op = clamp01(opacityPeak);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const matrixStyle = {\n    width: stylePx(matrixWidth),\n    height: stylePx(matrixHeight),\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor,\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    ...(ob !== undefined && { [\"--dmx-opacity-base\" as const]: ob }),\n    ...(om !== undefined && { [\"--dmx-opacity-mid\" as const]: om }),\n    ...(op !== undefined && { [\"--dmx-opacity-peak\" as const]: op }),\n    ...(useWrapper\n      ? { transform: `scale(${scale})`, transformOrigin: \"center center\" as const }\n      : { minWidth: minSize, minHeight: minSize })\n  } as unknown as CSSProperties;\n\n  const matrix = (\n    <div\n      role={useWrapper ? undefined : \"status\"}\n      aria-live={useWrapper ? undefined : \"polite\"}\n      aria-label={useWrapper ? undefined : ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", !useWrapper && className)}\n      style={matrixStyle}\n      onMouseEnter={useWrapper ? undefined : onMouseEnter}\n      onMouseLeave={useWrapper ? undefined : onMouseLeave}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: stylePx(rowGap),\n          width: \"100%\",\n          height: \"100%\"\n        }}\n      >\n        {ROW_COUNTS.map((count, row) => (\n          <div key={row} style={{ display: \"flex\", justifyContent: \"center\", gap: stylePx(gap) }}>\n            {Array.from({ length: count }).map((_, col) => {\n              const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col));\n              const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n                        const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op);\n\n          return (\n                <span\n                  key={`${row},${col}`}\n                  aria-hidden=\"true\"\n                  className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n                  style={{\n                    width: stylePx(dotSize),\n                    height: stylePx(dotSize),\n                    opacity: styleOpacity(remapOpacityToTriplet(opacity, ob, om, op)),\n                    [\"--dmx-bloom-level\" as const]: dmxBloom.level\n                  } as CSSProperties}\n                />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n\n  if (useWrapper) {\n    return (\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={ariaLabel}\n        className={className}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: stylePx(outerDim),\n          height: stylePx(outerDim),\n          minWidth: minSize == null ? undefined : stylePx(minSize),\n          minHeight: minSize == null ? undefined : stylePx(minSize),\n          overflow: \"hidden\"\n        }}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {matrix}\n      </div>\n    );\n  }\n\n  return matrix;\n}\n"
    },
    {
      "path": "components/ui/dotm-hex-7.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { getPatternIndexes } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmHex7Props = DotMatrixCommonProps;\n\nconst ROW_COUNTS = [3, 4, 5, 4, 3] as const;\nconst BASE_OPACITY = 0.2;\nconst MID_OPACITY = 0.32;\nconst HIGH_OPACITY = 0.98;\nconst HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;\n\nfunction hexPatternIndex(row: number, rowCount: number, col: number): number {\n  return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;\n}\n\nconst FRAMES: readonly Readonly<Record<string, \"x\" | \"o\">>[] = [\n  {\n    \"0,0\": \"x\",\n    \"0,1\": \"x\",\n    \"0,2\": \"x\",\n    \"1,1\": \"o\",\n    \"1,2\": \"o\",\n    \"2,2\": \"x\",\n    \"3,1\": \"o\",\n    \"3,2\": \"o\",\n    \"4,0\": \"x\",\n    \"4,1\": \"x\",\n    \"4,2\": \"x\"\n  },\n  {\n    \"0,1\": \"o\",\n    \"1,0\": \"x\",\n    \"1,1\": \"x\",\n    \"1,2\": \"x\",\n    \"1,3\": \"x\",\n    \"2,2\": \"o\",\n    \"3,0\": \"x\",\n    \"3,1\": \"x\",\n    \"3,2\": \"x\",\n    \"3,3\": \"x\",\n    \"4,1\": \"o\"\n  },\n  {\n    \"0,1\": \"x\",\n    \"1,1\": \"x\",\n    \"1,2\": \"x\",\n    \"2,0\": \"o\",\n    \"2,1\": \"x\",\n    \"2,2\": \"x\",\n    \"2,3\": \"x\",\n    \"2,4\": \"o\",\n    \"3,1\": \"x\",\n    \"3,2\": \"x\",\n    \"4,1\": \"x\"\n  },\n  {\n    \"0,0\": \"o\",\n    \"0,2\": \"o\",\n    \"1,0\": \"x\",\n    \"1,3\": \"x\",\n    \"2,1\": \"x\",\n    \"2,2\": \"o\",\n    \"2,3\": \"x\",\n    \"3,0\": \"x\",\n    \"3,3\": \"x\",\n    \"4,0\": \"o\",\n    \"4,2\": \"o\"\n  }\n];\n\nfunction clamp01(n: number | undefined) {\n  if (n == null || !Number.isFinite(n)) {\n    return;\n  }\n  return Math.min(1, Math.max(0, n));\n}\n\nexport function DotmHex7({\n  size = 34,\n  dotSize = 5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.9,\n  animated = true,\n  hoverAnimated = false,\n  pattern = \"full\",\n  cellPadding,\n  boxSize,\n  minSize,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmHex7Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1520,\n    steps: FRAMES.length,\n    speed\n  });\n  const frame = FRAMES[reducedMotion || matrixPhase === \"idle\" ? 0 : step] ?? FRAMES[0]!;\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1)));\n  const rowGap = Math.max(1, (dotSize + gap) * HEX_ROW_PITCH_RATIO - dotSize);\n  const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1);\n  const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1);\n  const matrixSpan = Math.max(matrixWidth, matrixHeight);\n  const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0);\n  const useWrapper = boxSize != null || minSize != null;\n  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;\n  const ob = clamp01(opacityBase);\n  const om = clamp01(opacityMid);\n  const op = clamp01(opacityPeak);\n  const activePatternIndexes = getPatternIndexes(pattern);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const matrixStyle = {\n    width: stylePx(matrixWidth),\n    height: stylePx(matrixHeight),\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor,\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    ...(ob !== undefined && { [\"--dmx-opacity-base\" as const]: ob }),\n    ...(om !== undefined && { [\"--dmx-opacity-mid\" as const]: om }),\n    ...(op !== undefined && { [\"--dmx-opacity-peak\" as const]: op }),\n    ...(useWrapper\n      ? { transform: `scale(${scale})`, transformOrigin: \"center center\" as const }\n      : { minWidth: minSize, minHeight: minSize })\n  } as unknown as CSSProperties;\n\n  const matrix = (\n    <div\n      role={useWrapper ? undefined : \"status\"}\n      aria-live={useWrapper ? undefined : \"polite\"}\n      aria-label={useWrapper ? undefined : ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", !useWrapper && className)}\n      style={matrixStyle}\n      onMouseEnter={useWrapper ? undefined : onMouseEnter}\n      onMouseLeave={useWrapper ? undefined : onMouseLeave}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: stylePx(rowGap),\n          width: \"100%\",\n          height: \"100%\"\n        }}\n      >\n        {ROW_COUNTS.map((count, row) => (\n          <div key={row} style={{ display: \"flex\", justifyContent: \"center\", gap: stylePx(gap) }}>\n            {Array.from({ length: count }).map((_, col) => {\n              const tone = frame[`${row},${col}`];\n              const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col));\n              const opacity = isActive ? tone === \"x\" ? HIGH_OPACITY : tone === \"o\" ? MID_OPACITY : BASE_OPACITY : 0;\n                        const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op);\n\n          return (\n                <span\n                  key={`${row},${col}`}\n                  aria-hidden=\"true\"\n                  className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)}\n                  style={{\n                    width: stylePx(dotSize),\n                    height: stylePx(dotSize),\n                    opacity: styleOpacity(remapOpacityToTriplet(opacity, ob, om, op)),\n                    [\"--dmx-bloom-level\" as const]: dmxBloom.level,\n                    transition: \"opacity 170ms ease-out\"\n                  } as CSSProperties}\n                />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n\n  if (useWrapper) {\n    return (\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={ariaLabel}\n        className={className}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: stylePx(outerDim),\n          height: stylePx(outerDim),\n          minWidth: minSize == null ? undefined : stylePx(minSize),\n          minHeight: minSize == null ? undefined : stylePx(minSize),\n          overflow: \"hidden\"\n        }}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {matrix}\n      </div>\n    );\n  }\n\n  return matrix;\n}\n"
    },
    {
      "path": "components/ui/dotm-hex-8.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { getPatternIndexes } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmHex8Props = DotMatrixCommonProps;\n\nconst ROW_COUNTS = [3, 4, 5, 4, 3] as const;\nconst BASE_OPACITY = 0.2;\nconst MID_OPACITY = 0.46;\nconst HIGH_OPACITY = 0.98;\nconst HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;\n\nfunction hexPatternIndex(row: number, rowCount: number, col: number): number {\n  return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;\n}\nconst FRAMES: readonly Readonly<Record<string, \"x\" | \"o\">>[] = [\n  { \"0,1\": \"x\", \"1,1\": \"o\", \"1,2\": \"o\", \"2,0\": \"x\", \"2,2\": \"x\", \"2,4\": \"x\", \"3,1\": \"o\", \"3,2\": \"o\", \"4,1\": \"x\" },\n  { \"0,0\": \"x\", \"0,2\": \"x\", \"1,0\": \"o\", \"1,3\": \"o\", \"2,1\": \"x\", \"2,2\": \"o\", \"2,3\": \"x\", \"3,0\": \"o\", \"3,3\": \"o\", \"4,0\": \"x\", \"4,2\": \"x\" },\n  { \"0,1\": \"o\", \"1,0\": \"x\", \"1,3\": \"x\", \"2,0\": \"o\", \"2,2\": \"x\", \"2,4\": \"o\", \"3,0\": \"x\", \"3,3\": \"x\", \"4,1\": \"o\" },\n  { \"0,0\": \"o\", \"0,2\": \"o\", \"1,1\": \"x\", \"1,2\": \"x\", \"2,1\": \"o\", \"2,3\": \"o\", \"3,1\": \"x\", \"3,2\": \"x\", \"4,0\": \"o\", \"4,2\": \"o\" }\n];\n\nfunction clamp01(n: number | undefined) {\n  if (n == null || !Number.isFinite(n)) return;\n  return Math.min(1, Math.max(0, n));\n}\n\nexport function DotmHex8({\n  size = 34,\n  dotSize = 5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.35,\n  animated = true,\n  hoverAnimated = false,\n  pattern = \"full\",\n  cellPadding,\n  boxSize,\n  minSize,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmHex8Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed });\n  const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== \"idle\", cycleMsBase: 1400, steps: FRAMES.length, speed });\n  const frame = FRAMES[reducedMotion || matrixPhase === \"idle\" ? 0 : step] ?? FRAMES[0]!;\n  const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1)));\n  const colPitch = dotSize + gap;\n  const rowGap = Math.max(1, colPitch * HEX_ROW_PITCH_RATIO - dotSize);\n  const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1);\n  const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1);\n  const matrixSpan = Math.max(matrixWidth, matrixHeight);\n  const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0);\n  const useWrapper = boxSize != null || minSize != null;\n  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;\n  const ob = clamp01(opacityBase);\n  const om = clamp01(opacityMid);\n  const op = clamp01(opacityPeak);\n  const activePatternIndexes = getPatternIndexes(pattern);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const matrixStyle = { width: stylePx(matrixWidth), height: stylePx(matrixHeight), [\"--dmx-dot-fill\" as const]: dotFill, color: resolvedColor, [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo, ...(ob !== undefined && { [\"--dmx-opacity-base\" as const]: ob }), ...(om !== undefined && { [\"--dmx-opacity-mid\" as const]: om }), ...(op !== undefined && { [\"--dmx-opacity-peak\" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: \"center center\" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties;\n\n  const matrix = (\n    <div role={useWrapper ? undefined : \"status\"} aria-live={useWrapper ? undefined : \"polite\"} aria-label={useWrapper ? undefined : ariaLabel} className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", dmxBloomHaloSpreadClass(halo), !useWrapper && className)} style={matrixStyle} onMouseEnter={useWrapper ? undefined : onMouseEnter} onMouseLeave={useWrapper ? undefined : onMouseLeave}>\n      <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", justifyContent: \"center\", gap: stylePx(rowGap), width: \"100%\", height: \"100%\" }}>\n        {ROW_COUNTS.map((count, row) => (\n          <div key={row} style={{ display: \"flex\", justifyContent: \"center\", gap: stylePx(gap) }}>\n            {Array.from({ length: count }).map((_, col) => {\n              const tone = frame[`${row},${col}`];\n              const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col));\n              const opacity = isActive ? tone === \"x\" ? HIGH_OPACITY : tone === \"o\" ? MID_OPACITY : BASE_OPACITY : 0;\n              const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op);\n              return <span key={`${row},${col}`} aria-hidden=\"true\" className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)} style={{ width: stylePx(dotSize), height: stylePx(dotSize), opacity: styleOpacity(remapOpacityToTriplet(opacity, ob, om, op)),\n                    [\"--dmx-bloom-level\" as const]: dmxBloom.level, transition: \"opacity 160ms ease-out\" } as CSSProperties} />;\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n\n  if (useWrapper) {\n    return <div role=\"status\" aria-live=\"polite\" aria-label={ariaLabel} className={className} style={{ display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", width: stylePx(outerDim), height: stylePx(outerDim), minWidth: minSize == null ? undefined : stylePx(minSize), minHeight: minSize == null ? undefined : stylePx(minSize), overflow: \"hidden\" }} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>{matrix}</div>;\n  }\n\n  return matrix;\n}\n"
    },
    {
      "path": "components/ui/dotm-hex-9.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { getPatternIndexes } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmHex9Props = DotMatrixCommonProps;\n\nconst ROW_COUNTS = [3, 4, 5, 4, 3] as const;\nconst BASE_OPACITY = 0.15;\nconst HIGH_OPACITY = 0.98;\nconst HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;\n\nfunction hexPatternIndex(row: number, rowCount: number, col: number): number {\n  return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;\n}\nconst PETAL_WIDTH = 0.42;\n\nfunction clamp01(n: number | undefined) {\n  if (n == null || !Number.isFinite(n)) {\n    return;\n  }\n  return Math.min(1, Math.max(0, n));\n}\n\nfunction pointForCell(row: number, col: number): { angle: number; radius: number } {\n  const count = ROW_COUNTS[row] ?? 1;\n  const x = col - (count - 1) / 2;\n  const y = (row - 2) * HEX_ROW_PITCH_RATIO;\n  return {\n    angle: Math.atan2(y, x),\n    radius: Math.sqrt(x * x + y * y)\n  };\n}\n\nfunction angularDistance(a: number, b: number): number {\n  return Math.abs(Math.atan2(Math.sin(a - b), Math.cos(a - b)));\n}\n\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const { angle, radius } = pointForCell(row, col);\n  if (radius < 0.1) {\n    return 0.42 + Math.sin(phase * Math.PI * 2) * 0.2;\n  }\n\n  const rotation = phase * Math.PI * 2;\n  const petalA = Math.max(0, 1 - angularDistance(angle, rotation) / PETAL_WIDTH);\n  const petalB = Math.max(0, 1 - angularDistance(angle, rotation + Math.PI) / PETAL_WIDTH);\n  const crossA = Math.max(0, 1 - angularDistance(angle, rotation + Math.PI / 2) / 0.52) * 0.46;\n  const crossB = Math.max(0, 1 - angularDistance(angle, rotation + Math.PI * 1.5) / 0.52) * 0.46;\n  const ring = (0.5 + 0.5 * Math.sin(phase * Math.PI * 2 - radius * 2.7)) * (radius > 1.3 ? 0.22 : 0.1);\n  const petalPeak = Math.max(petalA, petalB);\n\n  if (petalPeak > 0.92) {\n    return HIGH_OPACITY;\n  }\n\n  return Math.min(HIGH_OPACITY, BASE_OPACITY + petalPeak * 0.82 + crossA + crossB + ring);\n}\n\nexport function DotmHex9({\n  size = 34,\n  dotSize = 5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.8,\n  animated = true,\n  hoverAnimated = false,\n  pattern = \"full\",\n  cellPadding,\n  boxSize,\n  minSize,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmHex9Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cyclePhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1650,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1)));\n  const rowGap = Math.max(1, (dotSize + gap) * HEX_ROW_PITCH_RATIO - dotSize);\n  const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1);\n  const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1);\n  const matrixSpan = Math.max(matrixWidth, matrixHeight);\n  const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0);\n  const useWrapper = boxSize != null || minSize != null;\n  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;\n  const ob = clamp01(opacityBase);\n  const om = clamp01(opacityMid);\n  const op = clamp01(opacityPeak);\n  const phase = reducedMotion || matrixPhase === \"idle\" ? 0.1 : cyclePhase;\n  const activePatternIndexes = getPatternIndexes(pattern);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const matrixStyle = {\n    width: stylePx(matrixWidth),\n    height: stylePx(matrixHeight),\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor,\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    ...(ob !== undefined && { [\"--dmx-opacity-base\" as const]: ob }),\n    ...(om !== undefined && { [\"--dmx-opacity-mid\" as const]: om }),\n    ...(op !== undefined && { [\"--dmx-opacity-peak\" as const]: op }),\n    ...(useWrapper\n      ? { transform: `scale(${scale})`, transformOrigin: \"center center\" as const }\n      : { minWidth: minSize, minHeight: minSize })\n  } as unknown as CSSProperties;\n\n  const matrix = (\n    <div\n      role={useWrapper ? undefined : \"status\"}\n      aria-live={useWrapper ? undefined : \"polite\"}\n      aria-label={useWrapper ? undefined : ariaLabel}\n      className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", dmxBloomHaloSpreadClass(halo), !useWrapper && className)}\n      style={matrixStyle}\n      onMouseEnter={useWrapper ? undefined : onMouseEnter}\n      onMouseLeave={useWrapper ? undefined : onMouseLeave}\n    >\n      <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", justifyContent: \"center\", gap: stylePx(rowGap), width: \"100%\", height: \"100%\" }}>\n        {ROW_COUNTS.map((count, row) => (\n          <div key={row} style={{ display: \"flex\", justifyContent: \"center\", gap: stylePx(gap) }}>\n            {Array.from({ length: count }).map((_, col) => {\n              const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col));\n              const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n              const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op);\n              return <span key={`${row},${col}`} aria-hidden=\"true\" className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)} style={{ width: stylePx(dotSize), height: stylePx(dotSize), opacity: styleOpacity(remapOpacityToTriplet(opacity, ob, om, op)),\n                    [\"--dmx-bloom-level\" as const]: dmxBloom.level } as CSSProperties} />;\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n\n  if (useWrapper) {\n    return <div role=\"status\" aria-live=\"polite\" aria-label={ariaLabel} className={className} style={{ display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", width: stylePx(outerDim), height: stylePx(outerDim), minWidth: minSize == null ? undefined : stylePx(minSize), minHeight: minSize == null ? undefined : stylePx(minSize), overflow: \"hidden\" }} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>{matrix}</div>;\n  }\n\n  return matrix;\n}\n"
    },
    {
      "path": "components/ui/dotm-hex-10.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cx } from \"@/components/ui/dotmatrix-core\";\nimport { resolveDmxColorTokens } from \"@/components/ui/dotmatrix-core\";\nimport { styleOpacity, stylePx } from \"@/components/ui/dotmatrix-core\";\nimport { remapOpacityToTriplet } from \"@/components/ui/dotmatrix-core\";\nimport { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from \"@/components/ui/dotmatrix-core\";\nimport { getPatternIndexes } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type DotmHex10Props = DotMatrixCommonProps;\n\nconst ROW_COUNTS = [3, 4, 5, 4, 3] as const;\nconst BASE_OPACITY = 0.09;\nconst HIGH_OPACITY = 0.98;\nconst HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;\n\nfunction hexPatternIndex(row: number, rowCount: number, col: number): number {\n  return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;\n}\n\nfunction clamp01(n: number | undefined) {\n  if (n == null || !Number.isFinite(n)) {\n    return;\n  }\n  return Math.min(1, Math.max(0, n));\n}\n\nfunction pointForCell(row: number, col: number): { x: number; y: number; angle: number; radius: number } {\n  const count = ROW_COUNTS[row] ?? 1;\n  const x = col - (count - 1) / 2;\n  const y = (row - 2) * HEX_ROW_PITCH_RATIO;\n  return {\n    x,\n    y,\n    angle: Math.atan2(y, x),\n    radius: Math.sqrt(x * x + y * y)\n  };\n}\n\nfunction ripple(value: number, width: number): number {\n  const wrapped = ((value % 1) + 1) % 1;\n  const distance = Math.min(wrapped, 1 - wrapped);\n  return Math.max(0, 1 - distance / width);\n}\n\nfunction opacityForCell(row: number, col: number, phase: number): number {\n  const { x, y, radius } = pointForCell(row, col);\n  const lensCenter = Math.sin(phase * Math.PI * 2) * 1.15;\n  const lensDistance = Math.abs(lensCenter - x * 0.88 - y * 0.16);\n  const liquidLens = Math.max(0, 1 - lensDistance / 0.78);\n\n  const wakeFront = ripple(phase + x * 0.12 - y * 0.045 + radius * 0.07, 0.16);\n  const wakeBack = ripple(phase + 0.34 + x * 0.09 + y * 0.035 + radius * 0.05, 0.2) * 0.34;\n  const verticalCompression =\n    Math.max(0, 1 - Math.abs(Math.cos(phase * Math.PI * 2) * 1.18 - y * 1.25) / 1.1) * 0.18;\n  const shellSheen =\n    (0.5 + 0.5 * Math.sin(phase * Math.PI * 2 - radius * 1.9)) * (radius > 1.35 ? 0.16 : 0.06);\n  const core = radius < 0.1 ? 0.34 + Math.sin(phase * Math.PI * 2) * 0.1 : 0;\n\n  return Math.min(\n    HIGH_OPACITY,\n    BASE_OPACITY + liquidLens * 0.72 + wakeFront * 0.38 + wakeBack + verticalCompression + shellSheen + core\n  );\n}\n\nexport function DotmHex10({\n  size = 34,\n  dotSize = 5,\n  color = \"currentColor\",\n  colorPreset,\n  ariaLabel = \"Loading\",\n  className,\n  muted = false,\n  bloom = false,\n  halo = 0,\n  dotClassName,\n  dotShape = \"circle\",\n  speed = 1.55,\n  animated = true,\n  hoverAnimated = false,\n  pattern = \"full\",\n  cellPadding,\n  boxSize,\n  minSize,\n  opacityBase,\n  opacityMid,\n  opacityPeak\n}: DotmHex10Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cyclePhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1850,\n    speed\n  });\n\n  const gap =\n    cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1)));\n  const rowGap = Math.max(1, (dotSize + gap) * HEX_ROW_PITCH_RATIO - dotSize);\n  const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1);\n  const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1);\n  const matrixSpan = Math.max(matrixWidth, matrixHeight);\n  const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0);\n  const useWrapper = boxSize != null || minSize != null;\n  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;\n  const ob = clamp01(opacityBase);\n  const om = clamp01(opacityMid);\n  const op = clamp01(opacityPeak);\n  const phase = reducedMotion || matrixPhase === \"idle\" ? 0.14 : cyclePhase;\n  const activePatternIndexes = getPatternIndexes(pattern);\n  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);\n  const matrixStyle = {\n    width: stylePx(matrixWidth),\n    height: stylePx(matrixHeight),\n    [\"--dmx-dot-fill\" as const]: dotFill,\n    color: resolvedColor,\n    [\"--dmx-dot-size\" as const]: `${dotSize}px`,\n      [\"--dmx-halo-level\" as const]: halo,\n    ...(ob !== undefined && { [\"--dmx-opacity-base\" as const]: ob }),\n    ...(om !== undefined && { [\"--dmx-opacity-mid\" as const]: om }),\n    ...(op !== undefined && { [\"--dmx-opacity-peak\" as const]: op }),\n    ...(useWrapper\n      ? { transform: `scale(${scale})`, transformOrigin: \"center center\" as const }\n      : { minWidth: minSize, minHeight: minSize })\n  } as unknown as CSSProperties;\n\n  const matrix = (\n    <div role={useWrapper ? undefined : \"status\"} aria-live={useWrapper ? undefined : \"polite\"} aria-label={useWrapper ? undefined : ariaLabel} className={cx(\"dmx-root\", `dmx-dot-shape-${dotShape}`, muted && \"dmx-muted\", dmxBloomRootActive(bloom, halo) && \"dmx-bloom\", dmxBloomHaloSpreadClass(halo), !useWrapper && className)} style={matrixStyle} onMouseEnter={useWrapper ? undefined : onMouseEnter} onMouseLeave={useWrapper ? undefined : onMouseLeave}>\n      <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", justifyContent: \"center\", gap: stylePx(rowGap), width: \"100%\", height: \"100%\" }}>\n        {ROW_COUNTS.map((count, row) => (\n          <div key={row} style={{ display: \"flex\", justifyContent: \"center\", gap: stylePx(gap) }}>\n            {Array.from({ length: count }).map((_, col) => {\n              const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col));\n              const opacity = isActive ? opacityForCell(row, col, phase) : 0;\n              const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op);\n              return <span key={`${row},${col}`} aria-hidden=\"true\" className={cx(\"dmx-dot\", !isActive && \"dmx-inactive\", dmxBloom.bloomDot && \"dmx-bloom-dot\", dotClassName)} style={{ width: stylePx(dotSize), height: stylePx(dotSize), opacity: styleOpacity(remapOpacityToTriplet(opacity, ob, om, op)),\n                    [\"--dmx-bloom-level\" as const]: dmxBloom.level } as CSSProperties} />;\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n\n  if (useWrapper) {\n    return <div role=\"status\" aria-live=\"polite\" aria-label={ariaLabel} className={className} style={{ display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", width: stylePx(outerDim), height: stylePx(outerDim), minWidth: minSize == null ? undefined : stylePx(minSize), minHeight: minSize == null ? undefined : stylePx(minSize), overflow: \"hidden\" }} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>{matrix}</div>;\n  }\n\n  return matrix;\n}\n"
    },
    {
      "path": "components/ui/dotm-3x3-1.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { DotMatrix3Base } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { spiralInward3NormFromIndex, spiralInward3OrderValue, wave3PathOpacityFromNorm } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_1Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, index, reducedMotion, phase }) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const order = spiralInward3OrderValue(index);\n  const pathNorm = spiralInward3NormFromIndex(index);\n  const style = { \"--dmx-spiral-order\": order } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: wave3PathOpacityFromNorm(pathNorm)\n      }\n    };\n  }\n\n  return { className: \"dmx-spiral-snake-3\", style };\n};\n\nexport function Dotm3x3_1({\n  speed = 1.15,\n  pattern = \"full\",\n  dotShape = \"circle\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: Dotm3x3_1Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n\n  return (\n    <DotMatrix3Base\n      {...rest}\n      size={rest.size ?? 24}\n      dotSize={rest.dotSize ?? 6}\n      speed={speed}\n      pattern={pattern}\n      dotShape={dotShape}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={animationResolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-3x3-2.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { createDiagonalWave3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_2Props = DotMatrixCommonProps;\n\nexport const Dotm3x3_2 = createDiagonalWave3Component(\"Dotm3x3_2\", \"tr-bl\");\n"
    },
    {
      "path": "components/ui/dotm-3x3-3.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { createDiagonalWave3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_3Props = DotMatrixCommonProps;\n\nexport const Dotm3x3_3 = createDiagonalWave3Component(\"Dotm3x3_3\", \"tl-br\");\n"
    },
    {
      "path": "components/ui/dotm-3x3-4.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { createDiagonalWave3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_4Props = DotMatrixCommonProps;\n\nexport const Dotm3x3_4 = createDiagonalWave3Component(\"Dotm3x3_4\", \"br-tl\");\n"
    },
    {
      "path": "components/ui/dotm-3x3-5.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { createDiagonalWave3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_5Props = DotMatrixCommonProps;\n\nexport const Dotm3x3_5 = createDiagonalWave3Component(\"Dotm3x3_5\", \"bl-tr\");\n"
    },
    {
      "path": "components/ui/dotm-3x3-6.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_6Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({\n  isActive,\n  manhattanDistance,\n  reducedMotion,\n  phase\n}) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const ring = Math.max(0, Math.min(2, manhattanDistance));\n  const style = { \"--dmx-center-ripple-ring\": ring } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: 0.06 + (1 - ring / 2) * 0.82\n      }\n    };\n  }\n\n  return { className: \"dmx-center-ripple-3\", style };\n};\n\nexport const Dotm3x3_6 = createDotm3x3Component(\"Dotm3x3_6\", animationResolver, 1.75);\n"
    },
    {
      "path": "components/ui/dotm-3x3-7.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport { colWave3NormFromCol, wave3PathOpacityFromNorm } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_7Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, col, reducedMotion, phase }) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const path = colWave3NormFromCol(col);\n  const style = { \"--dmx-path\": path } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: wave3PathOpacityFromNorm(path)\n      }\n    };\n  }\n\n  return { className: \"dmx-path-3\", style };\n};\n\nexport const Dotm3x3_7 = createDotm3x3Component(\"Dotm3x3_7\", animationResolver, 1.75);\n"
    },
    {
      "path": "components/ui/dotm-3x3-8.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport { rowWave3NormFromRow, wave3PathOpacityFromNorm } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_8Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, row, reducedMotion, phase }) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const path = rowWave3NormFromRow(row);\n  const style = { \"--dmx-path\": path } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: wave3PathOpacityFromNorm(path)\n      }\n    };\n  }\n\n  return { className: \"dmx-path-3\", style };\n};\n\nexport const Dotm3x3_8 = createDotm3x3Component(\"Dotm3x3_8\", animationResolver, 1.75);\n"
    },
    {
      "path": "components/ui/dotm-3x3-9.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport { snakePath3NormFromIndex, snakePath3OrderValue, wave3PathOpacityFromNorm } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_9Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, index, reducedMotion, phase }) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const order = snakePath3OrderValue(index);\n  const path = snakePath3NormFromIndex(index);\n  const style = {\n    \"--dmx-snake-order\": order,\n    \"--dmx-path\": path\n  } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: wave3PathOpacityFromNorm(path)\n      }\n    };\n  }\n\n  return { className: \"dmx-snake-path-3\", style };\n};\n\nexport const Dotm3x3_9 = createDotm3x3Component(\"Dotm3x3_9\", animationResolver, 1.75);\n"
    },
    {
      "path": "components/ui/dotm-3x3-10.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport {\n  isCenterCell3,\n  outerRingClockwise3NormFromIndex,\n  outerRingClockwise3OrderValue,\n  wave3PathOpacityFromNorm\n} from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_10Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({\n  isActive,\n  index,\n  row,\n  col,\n  reducedMotion,\n  phase\n}) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  if (isCenterCell3(row, col)) {\n    if (reducedMotion || phase === \"idle\") {\n      return { style: { opacity: 0.2 } };\n    }\n    return { className: \"dmx-core-pulse-3\" };\n  }\n\n  const order = outerRingClockwise3OrderValue(index);\n  const path = outerRingClockwise3NormFromIndex(index);\n  const style = {\n    \"--dmx-frame-order\": order,\n    \"--dmx-path\": path\n  } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: wave3PathOpacityFromNorm(path)\n      }\n    };\n  }\n\n  return { className: \"dmx-frame-chase-3\", style };\n};\n\nexport const Dotm3x3_10 = createDotm3x3Component(\"Dotm3x3_10\", animationResolver, 1.75);\n"
    },
    {
      "path": "components/ui/dotm-3x3-11.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrix3Base } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { rowMajorIndex3 } from \"@/components/ui/dotmatrix-core\";\nimport { useCyclePhase } from \"@/components/ui/dotmatrix-hooks\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_11Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.06;\nconst PEAK_OPACITY = 0.88;\nconst CYCLE_MS_BASE = 2700;\nconst HOLD_RATIO = 0.52;\nconst MORPH_RATIO = 0.34;\nconst SMOOTH_TRANSITION = \"opacity 120ms linear\";\n\nfunction smoothstep(value: number): number {\n  const t = Math.min(1, Math.max(0, value));\n  return t * t * (3 - 2 * t);\n}\n\nfunction patternWeight(pattern: ReadonlySet<number>, index: number): number {\n  return pattern.has(index) ? 1 : 0;\n}\n\n/** Distinct 3×3 motifs that morph in sequence — corners, cross, full, center, ring, X, rails. */\nconst GLYPH_PATTERNS: readonly ReadonlySet<number>[] = [\n  new Set([rowMajorIndex3(0, 0), rowMajorIndex3(0, 2), rowMajorIndex3(2, 0), rowMajorIndex3(2, 2)]),\n  new Set([\n    rowMajorIndex3(0, 1),\n    rowMajorIndex3(1, 0),\n    rowMajorIndex3(1, 1),\n    rowMajorIndex3(1, 2),\n    rowMajorIndex3(2, 1)\n  ]),\n  new Set(Array.from({ length: 9 }, (_, index) => index)),\n  new Set([rowMajorIndex3(1, 1)]),\n  new Set([\n    rowMajorIndex3(0, 0),\n    rowMajorIndex3(0, 1),\n    rowMajorIndex3(0, 2),\n    rowMajorIndex3(1, 0),\n    rowMajorIndex3(1, 2),\n    rowMajorIndex3(2, 0),\n    rowMajorIndex3(2, 1),\n    rowMajorIndex3(2, 2)\n  ]),\n  new Set([\n    rowMajorIndex3(0, 0),\n    rowMajorIndex3(0, 2),\n    rowMajorIndex3(1, 1),\n    rowMajorIndex3(2, 0),\n    rowMajorIndex3(2, 2)\n  ]),\n  new Set([\n    rowMajorIndex3(0, 1),\n    rowMajorIndex3(1, 0),\n    rowMajorIndex3(1, 2),\n    rowMajorIndex3(2, 1)\n  ])\n];\n\nfunction glyphMorphProgress(segmentPhase: number, stagger: number): number {\n  const morphStart = HOLD_RATIO;\n  const morphEnd = HOLD_RATIO + MORPH_RATIO;\n  if (segmentPhase < morphStart + stagger * MORPH_RATIO) {\n    return 0;\n  }\n  if (segmentPhase >= morphEnd) {\n    return 1;\n  }\n\n  const localSpan = morphEnd - morphStart;\n  const localPhase = (segmentPhase - morphStart - stagger * MORPH_RATIO) / (localSpan * (1 - stagger * 0.85));\n  return smoothstep(localPhase);\n}\n\nexport function Dotm3x3_11({\n  speed = 1.25,\n  pattern = \"full\",\n  dotShape = \"circle\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: Dotm3x3_11Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const cyclePhase = useCyclePhase({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: CYCLE_MS_BASE,\n    speed\n  });\n\n  const animationResolver = useMemo<DotAnimationResolver>(() => {\n    const patternCount = GLYPH_PATTERNS.length;\n    const scaledPhase = cyclePhase * patternCount;\n    const patternIndex = Math.floor(scaledPhase) % patternCount;\n    const nextPatternIndex = (patternIndex + 1) % patternCount;\n    const segmentPhase = scaledPhase - Math.floor(scaledPhase);\n    const currentPattern = GLYPH_PATTERNS[patternIndex]!;\n    const nextPattern = GLYPH_PATTERNS[nextPatternIndex]!;\n\n    return ({ isActive, index, row, col, reducedMotion: rm, phase }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      const stagger = (row + col) / 4;\n      const morphT = glyphMorphProgress(segmentPhase, stagger);\n      let weight = patternWeight(currentPattern, index) * (1 - morphT)\n        + patternWeight(nextPattern, index) * morphT;\n\n      if (segmentPhase < HOLD_RATIO && weight > 0.01) {\n        const breathe = 0.78 + 0.22 * Math.sin((segmentPhase / HOLD_RATIO) * Math.PI);\n        weight *= breathe;\n      }\n\n      const opacity = BASE_OPACITY + weight * (PEAK_OPACITY - BASE_OPACITY);\n\n      if (rm || phase === \"idle\") {\n        return { style: { opacity } };\n      }\n\n      return { style: { opacity, transition: SMOOTH_TRANSITION } };\n    };\n  }, [cyclePhase]);\n\n  return (\n    <DotMatrix3Base\n      {...rest}\n      size={rest.size ?? 24}\n      dotSize={rest.dotSize ?? 6}\n      speed={speed}\n      pattern={pattern}\n      dotShape={dotShape}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={animationResolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-3x3-12.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_12Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({\n  isActive,\n  distanceFromCenter,\n  reducedMotion,\n  phase\n}) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const ring = Math.max(0, Math.min(2, Math.round(distanceFromCenter)));\n  const style = { \"--dmx-distance\": distanceFromCenter } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: 0.06 + (1 - ring / 2) * 0.82\n      }\n    };\n  }\n\n  return { className: \"dmx-distance-ripple-3\", style };\n};\n\nexport const Dotm3x3_12 = createDotm3x3Component(\"Dotm3x3_12\", animationResolver, 1.75);\n"
    },
    {
      "path": "components/ui/dotm-3x3-13.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport { colWave3NormFromColReverse, wave3PathOpacityFromNorm } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_13Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, col, reducedMotion, phase }) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const path = colWave3NormFromColReverse(col);\n  const style = { \"--dmx-path\": path } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: wave3PathOpacityFromNorm(path)\n      }\n    };\n  }\n\n  return { className: \"dmx-path-3\", style };\n};\n\nexport const Dotm3x3_13 = createDotm3x3Component(\"Dotm3x3_13\", animationResolver, 1.75);\n"
    },
    {
      "path": "components/ui/dotm-3x3-14.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { DotMatrix3Base } from \"@/components/ui/dotmatrix-core\";\nimport { useDotMatrixPhases } from \"@/components/ui/dotmatrix-hooks\";\nimport { isCenterCell3, outerRingClockwise3OrderValue } from \"@/components/ui/dotmatrix-core\";\nimport { usePrefersReducedMotion } from \"@/components/ui/dotmatrix-hooks\";\nimport { useSteppedCycle } from \"@/components/ui/dotmatrix-hooks\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_14Props = DotMatrixCommonProps;\n\nconst BASE_OPACITY = 0.06;\nconst TAIL_LEVELS = [0.92, 0.52, 0.24] as const;\nconst PERIMETER = 8;\n\nexport function Dotm3x3_14({\n  speed = 1.6,\n  pattern = \"full\",\n  dotShape = \"circle\",\n  animated = true,\n  hoverAnimated = false,\n  ...rest\n}: Dotm3x3_14Props) {\n  const reducedMotion = usePrefersReducedMotion();\n  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({\n    animated: Boolean(animated && !reducedMotion),\n    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),\n    speed\n  });\n  const step = useSteppedCycle({\n    active: !reducedMotion && matrixPhase !== \"idle\",\n    cycleMsBase: 1150,\n    steps: PERIMETER,\n    speed\n  });\n\n  const animationResolver = useMemo<DotAnimationResolver>(() => {\n    const head = step % PERIMETER;\n\n    return ({ isActive, index, row, col, reducedMotion: rm, phase }) => {\n      if (!isActive) {\n        return { className: \"dmx-inactive\" };\n      }\n\n      if (isCenterCell3(row, col)) {\n        const opacity = rm || phase === \"idle\" ? 0.18 : 0.1 + (head % 2) * 0.08;\n        return { style: { opacity } };\n      }\n\n      const order = outerRingClockwise3OrderValue(index);\n      if (order < 0) {\n        return { style: { opacity: BASE_OPACITY } };\n      }\n\n      const trail = (head - order + PERIMETER) % PERIMETER;\n      let opacity = BASE_OPACITY;\n      for (let i = 0; i < TAIL_LEVELS.length; i += 1) {\n        if (trail === i) {\n          opacity = BASE_OPACITY + TAIL_LEVELS[i]! * 0.82;\n          break;\n        }\n      }\n\n      if (rm || phase === \"idle\") {\n        return { style: { opacity } };\n      }\n\n      return { style: { opacity } };\n    };\n  }, [step]);\n\n  return (\n    <DotMatrix3Base\n      {...rest}\n      size={rest.size ?? 24}\n      dotSize={rest.dotSize ?? 6}\n      speed={speed}\n      pattern={pattern}\n      dotShape={dotShape}\n      animated={animated}\n      phase={matrixPhase}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      reducedMotion={reducedMotion}\n      animationResolver={animationResolver}\n    />\n  );\n}\n"
    },
    {
      "path": "components/ui/dotm-3x3-15.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_15Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({\n  isActive,\n  manhattanDistance,\n  reducedMotion,\n  phase\n}) => {\n  if (!isActive) {\n    return { className: \"dmx-inactive\" };\n  }\n\n  const ring = Math.max(0, Math.min(2, manhattanDistance));\n  const style = {\n    \"--dmx-ripple-ring\": ring,\n    \"--dmx-ripple-parity\": ring % 2\n  } as CSSProperties;\n\n  if (reducedMotion || phase === \"idle\") {\n    return {\n      style: {\n        ...style,\n        opacity: 0.06 + (1 - ring / 2) * 0.82\n      }\n    };\n  }\n\n  return { className: \"dmx-ripple-echo-3\", style };\n};\n\nexport const Dotm3x3_15 = createDotm3x3Component(\"Dotm3x3_15\", animationResolver, 1.75);\n"
    },
    {
      "path": "components/ui/dotm-3x3-16.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { createGlyphSpin3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_16Props = DotMatrixCommonProps;\n\n/** Smiley — eyes and mouth in row-major 0/1 form. */\nconst SMILEY_GLYPH = [1, 0, 1, 0, 0, 0, 0, 1, 0] as const;\n\nexport const Dotm3x3_16 = createGlyphSpin3Component(\"Dotm3x3_16\", SMILEY_GLYPH);\n"
    },
    {
      "path": "components/ui/dotm-3x3-18.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { createGlyphSpin3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_18Props = DotMatrixCommonProps;\n\n/** Checkmark — row-major 0/1 form. */\nconst CHECK_GLYPH = [0, 0, 1, 0, 1, 0, 1, 0, 0] as const;\n\nexport const Dotm3x3_18 = createGlyphSpin3Component(\"Dotm3x3_18\", CHECK_GLYPH);\n"
    },
    {
      "path": "components/ui/dotm-3x3-19.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { createGlyphSpin3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_19Props = DotMatrixCommonProps;\n\n/** Right arrow — row-major 0/1 form. */\nconst ARROW_GLYPH = [0, 1, 0, 0, 1, 1, 0, 1, 0] as const;\n\nexport const Dotm3x3_19 = createGlyphSpin3Component(\"Dotm3x3_19\", ARROW_GLYPH);\n"
    },
    {
      "path": "components/ui/dotm-3x3-20.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { createGlyphSpin3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_20Props = DotMatrixCommonProps;\n\n/** L-shaped corner — row-major 0/1 form. */\nconst CORNER_GLYPH = [1, 1, 0, 1, 0, 0, 1, 0, 0] as const;\n\nexport const Dotm3x3_20 = createGlyphSpin3Component(\"Dotm3x3_20\", CORNER_GLYPH);\n"
    },
    {
      "path": "components/ui/dotm-3x3-21.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { createGlyphSpin3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_21Props = DotMatrixCommonProps;\n\n/** Play triangle — row-major 0/1 form. */\nconst PLAY_GLYPH = [1, 0, 0, 1, 1, 0, 1, 0, 0] as const;\n\nexport const Dotm3x3_21 = createGlyphSpin3Component(\"Dotm3x3_21\", PLAY_GLYPH);\n"
    }
  ]
}