Event Propagation Matrix

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import {
7  useReducedMotion,
8  useVisibilityPause,
9  resolveComposition,
10  compositionScrimStyle,
11  contentFalloff,
12  labelHiddenAt,
13  type ContentPlacement,
14} from "@/lib/motiq";
15 
16/* -------------------------------------------------------------------------- */
17/* Types                                                                      */
18/* -------------------------------------------------------------------------- */
19 
20/** A cell address in the matrix: `row` = region/stream, `col` = time/lane. */
21export interface MatrixCell {
22  row: number;
23  col: number;
24}
25 
26export type EventSeverity = "info" | "warning" | "critical" | number;
27 
28/** Which way an event propagates through the grid from its origin cell. */
29export type PropagationDirection = "forward" | "out" | "down";
30 
31export interface EventData {
32  /** Stable id (used for deterministic fallback placement). */
33  id: string;
34  /** Origin cell. If omitted, derived deterministically from `id` + seed. */
35  origin?: MatrixCell;
36  /** Alternative origin as a region row index — placed at a stable column. */
37  originId?: number;
38  /** Free-form category label — biases hue toward the secondary accent. */
39  category?: string;
40  /** Severity — drives reach + color (never color alone; see glyph/weight). */
41  severity?: EventSeverity;
42  /** Propagation shape along the matrix. Default "out". */
43  direction?: PropagationDirection;
44  /** Region rows (row indices) this event also reaches. */
45  affectedRegions?: number[];
46  /** Acknowledged events dim and carry a check glyph. */
47  acknowledged?: boolean;
48  /** Failed propagation halts early and is marked with a × glyph. */
49  failed?: boolean;
50  /** Old/settled events render quietly in the history band (no propagation). */
51  history?: boolean;
52}
53 
54export interface MatrixRect {
55  /** 0–1 left edge of the readable safe area. */
56  x: number;
57  /** 0–1 top edge of the readable safe area. */
58  y: number;
59  /** 0–1 width of the readable safe area. */
60  w: number;
61  /** 0–1 height of the readable safe area. */
62  h: number;
63}
64 
65export interface EventPropagationMatrixProps
66  extends React.HTMLAttributes<HTMLDivElement> {
67  /** Application-defined events. Omit to render a deterministic default set. */
68  events?: EventData[];
69  /** Matrix rows (regions/streams). */
70  rows?: number;
71  /** Matrix columns (time/lanes). */
72  cols?: number;
73  /**
74// … truncated