Core Spokes

1"use client";
2 
3import type { CSSProperties } from "react";
4import { useSteppedCycle } from "@/components/ui/cellforge-hooks";
5 
6import { cx } from "@/components/ui/cellforge-core";
7import { resolveDmxColorTokens } from "@/components/ui/cellforge-core";
8import { useCellForgePhases } from "@/components/ui/cellforge-hooks";
9import { styleOpacity, stylePx } from "@/components/ui/cellforge-core";
10import { remapOpacityToTriplet } from "@/components/ui/cellforge-core";
11import { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/cellforge-core";
12import { usePrefersReducedMotion } from "@/components/ui/cellforge-hooks";
13import type { CellForgeCommonProps } from "@/components/ui/cellforge-core";
14 
15export type CellAngle1Props = CellForgeCommonProps;
16 
17const MATRIX_SIZE = 7;
18const STEP_COUNT = 30;
19const BASE_OPACITY = 0.08;
20const CENTER_OPACITY = 0.24;
21const TAIL_LEVELS = [0.96, 0.72, 0.52, 0.34, 0.2] as const;
22 
23const TRIANGLE_CELLS = new Set([
24  "1,3",
25  "2,2",
26  "2,4",
27  "3,1",
28  "3,3",
29  "3,5",
30  "4,0",
31  "4,2",
32  "4,4",
33  "4,6"
34]);
35 
36const CENTER_ROW = 3;
37const CENTER_COL = 3;
38const PERIMETER_PATH: ReadonlyArray<readonly [number, number]> = [
39  [1, 3],
40  [2, 2],
41  [3, 1],
42  [4, 0],
43  [4, 2],
44  [4, 4],
45  [4, 6],
46  [3, 5],
47  [2, 4]
48];
49 
50function isWithinTriangleMask(row: number, col: number): boolean {
51  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {
52    return false;
53  }
54 
55  // Staggered 1-2-3-4 triangle (base has exactly 4 cells), matching reference silhouette.
56  return TRIANGLE_CELLS.has(`${row},${col}`);
57}
58 
59export function CellAngle1({
60  size = 30,
61  dotSize = 6.5,
62  color = "currentColor",
63  colorPreset,
64  ariaLabel = "Loading",
65  className,
66  muted = false,
67  bloom = false,
68  halo = 0,
69  dotClassName,
70  dotShape = "circle",
71  speed = 5,
72  animated = true,
73  hoverAnimated = false,
74  cellPadding,
75  opacityBase,
76  opacityMid,
77  opacityPeak
78}: CellAngle1Props) {
79  const reducedMotion = usePrefersReducedMotion();
80  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useCellForgePhases({
81    animated: Boolean(animated && !reducedMotion),
82    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
83    speed
84  });
85  const step = useSteppedCycle({
86    active: !reducedMotion && matrixPhase !== "idle",
87    cycleMsBase: 1650,
88    steps: STEP_COUNT,
89    speed,
90  });
91 
92  const gap =
93    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));
94// … truncated