Live Data Command Hero

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import {
7  useReducedMotion,
8  useControllableState,
9  statusVars,
10  type StatusTone,
11} from "@/lib/motiq";
12 
13import { KpiNumberMorph } from "@/components/motiq/kpi-number-morph";
14import {
15  DataRefreshState,
16  type RefreshState,
17} from "@/components/motiq/data-refresh-state";
18import {
19  StreamingDataRows,
20  type Column,
21  type StreamingTableState,
22} from "@/components/motiq/streaming-data-rows";
23import {
24  FilterResultTransition,
25  type ActiveFilter,
26  type FilterResultState,
27} from "@/components/motiq/filter-result-transition";
28 
29/**
30 * LiveDataCommandHero — an editable hero block for operational-data products.
31 * Instead of a static KPI screenshot, a wide copy band sits above a full-width
32 * *live surface*: three morphing KPIs, the current refresh state, a small live
33 * subset of signals, and one active filter — all driven by a single phase the
34 * app owns. On wide screens the watched signals and the live feed tile into two
35 * columns so the hero holds a calm height. The point is continuity and changing
36 * state over time, at reduced complexity: it is a hero framing, not a full
37 * analytics dashboard.
38 *
39 * IMPORTANT — DEMO ONLY. Every signal, region, metric, and timestamp below is
40 * fictional and provider-neutral; nothing here talks to a real backend. Rewire
41 * `dataset` and `phase` to your own telemetry.
42 *
43 * Determinism: no `Date.now()` / `Math.random()` / `new Date()` at module scope,
44 * during render, or in initializers. Every snapshot derives from a fixed baseline
45 * via a pure wobble; timestamps come from fixed epoch constants; the only motion
46 * over time is a client-only "live" tick that pauses offscreen and under reduced
47 * motion. Server and first client render are identical. Clean-room original.
48 */
49 
50/* -------------------------------------------------------------------------- */
51/* Public types                                                                */
52/* -------------------------------------------------------------------------- */
53 
54/** The lifecycle the host application drives; the block maps it onto the surface. */
55export type DataHeroPhase =
56  | "initial"
57  | "live"
58  | "filtering"
59  | "refreshing"
60  | "partial-update"
61  | "stale"
62  | "error"
63  | "recovery";
64 
65export type SignalStatus = "healthy" | "degraded" | "critical";
66 
67export interface HeroSignal {
68  /** Stable identity — the key to smooth insert / update / resort. */
69  id: string;
70// … truncated