6f:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 84:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:"#f0f4f9" 54:["$","div","color-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#dce4ef"}]]}] 55:["$","div","color-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#c5d1e1"}]]}] 56:["$","div","color-code-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f0f4f9"}]]}] 57:["$","div","color-code-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#2a3444"}]]}] 58:["$","div","color-error",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-error",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d92d4a"}]]}] 59:["$","div","color-error-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-error-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5a:["$","div","color-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#101828"}]]}] 5b:["$","div","color-fg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-fg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#344054"}]]}] 5c:["$","div","color-focus",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-focus",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#315fea"}]]}] 5d:["$","div","color-info",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#087dbd"}]]}] 5e:["$","div","color-info-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5f:["$","div","color-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#667085"}]]}] 60:["$","div","color-neutral",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-neutral",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#475467"}]]}] 61:["$","div","color-neutral-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-neutral-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 62:["$","div","color-secondary-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-secondary-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#009fb3"}]]}] 63:["$","div","color-signature",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-signature",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e9564a"}]]}] 64:["$","div","color-success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#128a55"}]]}] 65:["$","div","color-success-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 66:["$","div","color-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 67:["$","div","color-surface-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-surface-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f8fafd"}]]}] 68:["$","div","color-warning",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#b86e00"}]]}] 69:["$","div","color-warning-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 6a:["$","$L6f",null,{"orientation":"horizontal"}] 6b:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4f7cff"}]]}],["$","div","color-accent-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080c14"}]]}],["$","div","color-accent-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#6f91ff"}]]}],["$","div","color-accent-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#7f9fff"}]]}],["$","div","color-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080c14"}]]}],["$","div","color-bg-elevated",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg-elevated",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-bg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#263449"}]]}],["$","div","color-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#354863"}]]}],["$","div","color-code-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-code-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"$L70"}]]}],"$L71","$L72","$L73","$L74","$L75","$L76","$L77","$L78","$L79","$L7a","$L7b","$L7c","$L7d","$L7e","$L7f","$L80","$L81","$L82"]}],"$L83"]}]}]]}] 6c:null 6d:null 85:T6f5a,"use client"; import * as React from "react"; import { motion, AnimatePresence, LayoutGroup } from "motion/react"; import { cn } from "@/lib/utils"; import { useReducedMotion, useAnimatedNumber, formatNumber, getStatusMeta, statusVars, type StatusTone, } from "@/lib/motiq"; /* -------------------------------------------------------------------------- */ /* Types */ /* -------------------------------------------------------------------------- */ export type SortDir = "asc" | "desc"; export interface SortState { /** `Column.key` currently sorted by. */ key: string; dir: SortDir; } export type CellAlign = "start" | "center" | "end"; export interface Column { /** Stable identifier, also used for sort state and change tracking. */ key: string; /** Header content (string or node). Used verbatim in the sort button label. */ header: React.ReactNode; /** Text alignment for header + cells. */ align?: CellAlign; /** Enables the sortable header button + `aria-sort`. */ sortable?: boolean; /** Extra class on each ``. */ className?: string; /** Extra class on the ``. */ headerClassName?: string; /** Fixed column width (e.g. `120` or `"12ch"`). */ width?: number | string; /** Full cell renderer. When omitted, the raw `value` is shown. */ render?: (row: T) => React.ReactNode; /** * Raw primitive used for change detection, the numeric morph, and default * display. Return a number for numeric columns, a string otherwise. */ value?: (row: T) => string | number | null | undefined; /** Sort key override; defaults to `value`. */ sortAccessor?: (row: T) => string | number; /** Morph the number between updates and show a ▲/▼ change direction. */ numeric?: boolean; /** Format a numeric value (used when `numeric` and no `render`). */ format?: (n: number) => string; } export interface RowAction { /** Reported to `onRowAction`. */ id: string; /** Accessible label (also the visible text when no `icon`). */ label: string; icon?: React.ReactNode; /** Direct handler; `onRowAction(id, row)` also fires. */ onSelect?: (row: T) => void; disabled?: (row: T) => boolean; tone?: StatusTone; } export type StreamingTableState = "idle" | "loading" | "error"; export interface StreamingDataRowsProps { /** Rows to display (controlled by the host application). */ rows: T[]; columns: Column[]; /** Stable identity per row — the key to smooth insert / update / resort. */ getRowId: (row: T) => string; /** Controlled sort. Omit for uncontrolled (see `defaultSort`). */ sort?: SortState | null; defaultSort?: SortState | null; onSortChange?: (sort: SortState | null) => void; /** Freezes change emphasis + numeric morphs (data may still change). */ paused?: boolean; /** How long the changed-cell emphasis lasts, in ms. */ highlightDuration?: number; /** Per-row action buttons (keyboard-accessible). */ rowActions?: (row: T) => RowAction[]; onRowAction?: (actionId: string, row: T) => void; /** Emit rate-limited screen-reader summaries of inserts/updates/removals. */ announceUpdates?: boolean; /** Lifecycle owned by the host. `idle` + empty `rows` shows the empty state. */ state?: StreamingTableState; /** Retry affordance shown in the error state. */ onRetry?: () => void; /** Stacked card renderer used when the component's own box is narrow. */ renderMobileRow?: (row: T, ctx: { actions: React.ReactNode }) => React.ReactNode; /** Width (px) of *this component's box* below which the stacked layout is used. */ mobileBreakpoint?: number; /** Visually-hidden `` describing the table. */ caption?: string; emptyContent?: React.ReactNode; errorContent?: React.ReactNode; /** Skeleton row count in the loading state. */ loadingRows?: number; className?: string; } /* -------------------------------------------------------------------------- */ /* Small utilities */ /* -------------------------------------------------------------------------- */ const ALIGN: Record = { start: "text-left", center: "text-center", end: "text-right", }; /** * Is this component's own box narrower than `maxWidth`? * * Deliberately measures the element, not the viewport: a 4-column table placed in * a 300px column on a 1440px screen must still fall back to stacked cards, and a * viewport media query gets that exactly backwards. Defaults to `false` so the * server and first client render agree; the observer corrects it after mount. */ function useNarrowContainer(ref: React.RefObject, maxWidth: number): boolean { const [narrow, setNarrow] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el || typeof ResizeObserver === "undefined") return; const measure = (width: number) => setNarrow(width > 0 && width < maxWidth); measure(el.getBoundingClientRect().width); const ro = new ResizeObserver((entries) => { for (const entry of entries) measure(entry.contentRect.width); }); ro.observe(el); return () => ro.disconnect(); }, [ref, maxWidth]); return narrow; } function nextSort(current: SortState | null | undefined, key: string): SortState | null { // Cycle: none → asc → desc → none (per column). if (!current || current.key !== key) return { key, dir: "asc" }; if (current.dir === "asc") return { key, dir: "desc" }; return null; } /* -------------------------------------------------------------------------- */ /* Sub-components */ /* -------------------------------------------------------------------------- */ /** Morphs a number between values; snaps under reduced/paused. */ function MorphNumber({ value, format, disabled, }: { value: number; format?: (n: number) => string; disabled: boolean; }) { const display = useAnimatedNumber(value, { disabled }); const rounded = Number.isInteger(value) && !format ? Math.round(display) : display; return <>{format ? format(rounded) : formatNumber(rounded, { maximumFractionDigits: 2 })}; } /** Transient, non-flashing emphasis: a single tone-tinted fade + a ▲/▼ glyph. */ function ChangePulse({ pulseKey, dir, duration, tone, }: { pulseKey: number; dir: number; duration: number; tone: StatusTone; }) { const vars = statusVars(tone); return ( <> {/* Background wash — monotonic fade-out, so it never blinks. */} {/* Direction glyph — carries "changed" without relying on color. */} {dir !== 0 ? ( {dir > 0 ? "▲" : "▼"} ) : null} ); } /** Status pill — tone conveyed by a shape glyph + label, never color alone. */ export function StatusPill({ status }: { status: string }) { const meta = getStatusMeta(status); const vars = statusVars(meta.tone); return ( {meta.label} ); } /** A distinct shape per tone so status is legible in forced-colors / greyscale. */ function ToneGlyph({ tone }: { tone: StatusTone }) { const common = { width: 11, height: 11, viewBox: "0 0 12 12", "aria-hidden": true, className: "shrink-0" } as const; switch (tone) { case "success": return ( ); case "error": return ( ); case "warning": return ( ); case "active": return ( ); case "info": return ( ); default: return ; } } function ActionButtons({ row, actions, onRowAction, }: { row: T; actions: RowAction[]; onRowAction?: (id: string, row: T) => void; }) { return ( {actions.map((action) => { const disabled = action.disabled?.(row) ?? false; const vars = action.tone ? statusVars(action.tone) : null; return ( ); })} ); } /* -------------------------------------------------------------------------- */ /* Main component */ /* -------------------------------------------------------------------------- */ /** * StreamingDataRows — an accessible live table for operational dashboards. * * The host application owns the data; this component only presents it, animating * the *changes*: row insertion, removal, reposition after sort, per-cell change * emphasis, numeric morphs, and status transitions. It is deliberately not a * data-grid — no virtualization, filtering, or paging — so it stays small and is * meant for live *subsets* (see the docs for large-dataset guidance). * * Accessibility: a real semantic `` with ` ); }); /* ---- desktop table ---------------------------------------------------- */ // When no `renderMobileRow` is supplied the table is the only presentation at // every width, so its horizontal scroller has to be a labelled, keyboard // reachable region. With a stacked fallback the table never scrolls on narrow // viewports, so it stays out of the tab order. const scrollerIsRegion = !renderMobileRow; const table = (

`; sortable * headers are ` ) : null} ); } /* ---- shared header cells ---------------------------------------------- */ const headerCells = columns.map((col) => { const sortedHere = activeSort?.key === col.key ? activeSort.dir : null; const ariaSort = sortedHere === "asc" ? "ascending" : sortedHere === "desc" ? "descending" : "none"; return (	{col.sortable ? ( ) : ( col.header )}

{caption ? : null} {headerCells} {hasActions ? ( ) : null} {state === "loading" ? ( Array.from({ length: loadingRows }).map((_, i) => ( {Array.from({ length: columnCount }).map((__, j) => ( ))} )) ) : sortedRows.length === 0 ? ( ) : ( // popLayout: a row dropped by the cap is pulled out of layout flow as // it fades, so the table never briefly grows then shrinks (no flash). {sortedRows.map((row) => { const id = getRowId(row); return ( {columns.map((col) => { const pulse = pulses[`${id}:${col.key}`]; const content = col.render ? col.render(row) : col.numeric && typeof col.value?.(row) === "number" ? : (col.value?.(row) ?? null); return ( ); })} {hasActions ? ( ) : null} ); })} )}

{caption}
Actions

{emptyContent ?? "No rows yet. Waiting for live data…"}
{content} {pulse && !suppress ? ( 0 ? "success" : pulse.dir < 0 ? "warning" : "info"} /> ) : null}

); /* ---- mobile stacked layout ------------------------------------------- */ // The narrow-viewport equivalent of the table: one labelled card per row. // It carries the same accessible name (`caption`) and the same busy state as // the table it replaces, so nothing is lost by reflowing instead of scrolling. const mobile = renderMobileRow ? (

{sortedRows.map((row) => { const id = getRowId(row); return ( {renderMobileRow(row, { actions: hasActions ? : null, })} ); })}

{emptyContent ?? "No rows yet."}

) : null; return (

{/* Rate-limited, polite update summary for screen readers. */}

{announcement}

{isMobile ? mobile : table}

); } const shellClass = "overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-sm)]"; function SortGlyph({ dir }: { dir: SortDir | null }) { // The active direction is a filled caret; inactive is a dim double-caret. The // authoritative state is `aria-sort` on the ; this is a visual aid. return ( ); } export default StreamingDataRows; 6e:["$","$L84",null,{"files":[{"path":"registry/data/streaming-data-rows.tsx","content":"$85","type":"registry:component","target":"components/motiq/streaming-data-rows.tsx"}],"className":"h-[70svh] min-h-80"}]