@pyric/ui 0.1.0-alpha.10

package/dist/traffic/components/TrafficLineChart.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+const defaultFormatValue = (n) => String(n);
+const defaultFormatTime = (t) => new Date(t).toLocaleTimeString();
+/** Hand-rolled SVG line chart, no charting dependency — plain lines over
+ *  a 0..100 viewBox so CSS drives the actual size (intrinsic layout, no
+ *  fixed pixel chart). Each series draws only when `visible` includes
+ *  its key (or `visible` is omitted). The y-scale is the max value
+ *  across the currently VISIBLE series only, so toggling a tall series
+ *  off rescales the rest up — matching the Console reference.
+ *
+ * Interaction: hovering (or focusing, via the invisible per-bucket hit
+ * targets) shows a tooltip with the bucket's time range and each visible
+ * series' value at that bucket — `[data-pyric-chart-tooltip]`, positioned
+ * via `--pyric-hover-x`.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-line-chart"]`,
+ * `[data-pyric-chart-svg]`, `[data-pyric-chart-line]` (with
+ * `data-pyric-series-key`, `data-pyric-series-index` — the same index a
+ * `TrafficMetricCards` card carries, so line + card colors line up),
+ * `[data-pyric-chart-hit]` (with `data-pyric-point-index`),
+ * `[data-pyric-chart-tooltip]`, `[data-pyric-tooltip-row]`.
+ */
+export function TrafficLineChart({ points, series, visible, omitZeroSeries = false, formatValue = defaultFormatValue, formatTime = defaultFormatTime, emptyState, className, }) {
+    const [hovered, setHovered] = useState(null);
+    if (points.length === 0) {
+        return (_jsx("div", { className: className, "data-pyric-ui": "traffic-line-chart", "data-pyric-empty": "", children: emptyState }));
+    }
+    const visibleSeries = series.filter((s) => (!visible || visible.has(s.key)) && (!omitZeroSeries || s.total > 0));
+    let maxValue = 0;
+    for (const s of visibleSeries)
+        for (const v of s.values)
+            if (v > maxValue)
+                maxValue = v;
+    const scale = maxValue === 0 ? 1 : maxValue;
+    const n = points.length;
+    const xAt = (i) => (n === 1 ? 50 : (i / (n - 1)) * 100);
+    const yAt = (v) => 100 - (v / scale) * 100;
+    const hoveredPoint = hovered != null ? points[hovered] : null;
+    return (_jsx("div", { className: className, "data-pyric-ui": "traffic-line-chart", children: _jsxs("div", { "data-pyric-chart-svg": "", children: [_jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", role: "img", "aria-label": "metrics over time", children: series.map((s) => {
+                        const seriesIndex = series.indexOf(s);
+                        const isVisible = (!visible || visible.has(s.key)) && (!omitZeroSeries || s.total > 0);
+                        if (!isVisible)
+                            return null;
+                        const d = s.values.map((v, i) => `${i === 0 ? 'M' : 'L'}${xAt(i)},${yAt(v)}`).join(' ');
+                        return (_jsx("path", { "data-pyric-chart-line": "", "data-pyric-series-key": s.key, "data-pyric-series-index": seriesIndex, d: d, fill: "none", vectorEffect: "non-scaling-stroke" }, s.key));
+                    }) }), _jsx("div", { "data-pyric-chart-hits": "", children: points.map((point, i) => (_jsx("button", { type: "button", "data-pyric-chart-hit": "", "data-pyric-point-index": i, onMouseEnter: () => setHovered(i), onFocus: () => setHovered(i), onMouseLeave: () => setHovered((cur) => (cur === i ? null : cur)), onBlur: () => setHovered((cur) => (cur === i ? null : cur)), "aria-label": `${formatTime(point.start)} to ${formatTime(point.end)}` }, point.index))) }), hoveredPoint && (_jsxs("div", { "data-pyric-chart-tooltip": "", style: { '--pyric-hover-x': xAt(hoveredPoint.index) }, children: [_jsxs("div", { "data-pyric-tooltip-time": "", children: [formatTime(hoveredPoint.start), " \u2013 ", formatTime(hoveredPoint.end)] }), visibleSeries.map((s) => (_jsxs("div", { "data-pyric-tooltip-row": "", "data-pyric-series-key": s.key, "data-pyric-series-index": series.indexOf(s), children: [_jsx("span", { "data-pyric-tooltip-label": "", children: s.label }), _jsx("span", { "data-pyric-tooltip-value": "", children: formatValue(s.values[hoveredPoint.index]) })] }, s.key)))] }))] }) }));
+}
+//# sourceMappingURL=TrafficLineChart.js.map

package/dist/traffic/components/TrafficLineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficLineChart.js","sourceRoot":"","sources":["../../../src/traffic/components/TrafficLineChart.tsx"],"names":[],"mappings":"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"}

package/dist/traffic/components/TrafficLog.d.ts

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+import type { TrafficEvent } from '../types.js';
+import type { TrafficLogItem } from '../hooks/useTrafficGroups.js';
+export interface TrafficLogProps {
+    /** Events to render, in display order. The hook layer decides the
+     *  order — `<TrafficLog>` renders the array as given. */
+    events: TrafficEvent[];
+    /**
+     * Grouped items from `useTrafficGroups`. When provided, the log
+     * renders singles + collapsible group rows and does NOT
+     * virtualize — grouping is itself the volume reducer (a 250-event
+     * listener storm becomes one group row). `events` is ignored.
+     */
+    items?: TrafficLogItem[];
+    /** The selected event's id, marked with `data-pyric-selected`. */
+    selectedId?: string;
+    onSelect?: (event: TrafficEvent) => void;
+    /** Passed through to each `<TrafficRow>`. */
+    renderClassification?: (event: TrafficEvent) => ReactNode;
+    /** Passed through to each `<TrafficRow>`. */
+    formatTime?: (at: number) => string;
+    /**
+     * Full escape hatch — render a row yourself instead of the default
+     * `<TrafficRow>`. Receives the event and its selected state.
+     * Applies to the flat (`events`) path only.
+     */
+    renderRow?: (event: TrafficEvent, selected: boolean) => ReactNode;
+    emptyState?: ReactNode;
+    className?: string;
+    /**
+     * Above this row count, the list virtualizes via `<VirtualList>`.
+     * Default 100 — a `load-test`-shaped session can emit 100k+ events,
+     * so virtualization is load-bearing, not polish.
+     */
+    virtualizeThreshold?: number;
+    /** Estimated row height when virtualizing. Default 28. */
+    rowHeight?: number | ((index: number) => number);
+    /** Pixel height the virtualized scroll container fills. Default
+     *  `'60vh'`. */
+    virtualizedHeight?: number | string;
+}
+/**
+ * Headless traffic log — a Chrome DevTools Network-panel-style event
+ * stream. Below `virtualizeThreshold` it renders a plain `<ul>`;
+ * above it, TanStack-Virtual via `<VirtualList>`.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-log"]`,
+ * `[data-pyric-traffic-entry]` (the list item wrapper), plus the
+ * `<TrafficRow>` hooks.
+ */
+export declare function TrafficLog({ events, items, selectedId, onSelect, renderClassification, formatTime, renderRow, emptyState, className, virtualizeThreshold, rowHeight, virtualizedHeight, }: TrafficLogProps): import("react").JSX.Element;
+//# sourceMappingURL=TrafficLog.d.ts.map

package/dist/traffic/components/TrafficLog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficLog.d.ts","sourceRoot":"","sources":["../../../src/traffic/components/TrafficLog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAInE,MAAM,WAAW,eAAe;IAC9B;6DACyD;IACzD,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,6CAA6C;IAC7C,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,SAAS,CAAC;IAC1D,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,KAAK,SAAS,CAAC;IAClE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACjD;oBACgB;IAChB,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrC;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,UAAU,EACV,QAAQ,EACR,oBAAoB,EACpB,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,mBAAyB,EACzB,SAAc,EACd,iBAA0B,GAC3B,EAAE,eAAe,+BA0GjB"}

package/dist/traffic/components/TrafficLog.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VirtualList } from '../../primitives/VirtualList.js';
+import { TrafficRow } from './TrafficRow.js';
+import { TrafficGroupRow } from './TrafficGroupRow.js';
+/**
+ * Headless traffic log — a Chrome DevTools Network-panel-style event
+ * stream. Below `virtualizeThreshold` it renders a plain `<ul>`;
+ * above it, TanStack-Virtual via `<VirtualList>`.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-log"]`,
+ * `[data-pyric-traffic-entry]` (the list item wrapper), plus the
+ * `<TrafficRow>` hooks.
+ */
+export function TrafficLog({ events, items, selectedId, onSelect, renderClassification, formatTime, renderRow, emptyState, className, virtualizeThreshold = 100, rowHeight = 28, virtualizedHeight = '60vh', }) {
+    // Grouped mode — singles + collapsible group rows, no virtualization.
+    if (items !== undefined) {
+        if (items.length === 0) {
+            return (_jsx("div", { className: className, "data-pyric-ui": "traffic-log", "data-pyric-empty": "", children: emptyState }));
+        }
+        return (_jsx("div", { className: className, "data-pyric-ui": "traffic-log", "data-pyric-grouped": "", children: _jsx("ul", { "data-pyric-traffic-log-items": "", children: items.map((item) => item.type === 'group' ? (_jsx("li", { "data-pyric-traffic-group-entry": "", children: _jsx(TrafficGroupRow, { group: item, onSelect: onSelect, selectedId: selectedId, renderClassification: renderClassification, formatTime: formatTime }) }, item.key)) : (_jsx("li", { "data-pyric-traffic-entry": "", "data-pyric-traffic-id": item.event.id, children: _jsx(TrafficRow, { event: item.event, selected: item.event.id === selectedId, onSelect: onSelect, renderClassification: renderClassification, formatTime: formatTime }) }, item.event.id))) }) }));
+    }
+    if (events.length === 0) {
+        return (_jsx("div", { className: className, "data-pyric-ui": "traffic-log", "data-pyric-empty": "", children: emptyState }));
+    }
+    const row = (event) => {
+        const selected = event.id === selectedId;
+        if (renderRow)
+            return renderRow(event, selected);
+        return (_jsx(TrafficRow, { event: event, selected: selected, onSelect: onSelect, renderClassification: renderClassification, formatTime: formatTime }));
+    };
+    const virtualized = events.length > virtualizeThreshold;
+    return (_jsx("div", { className: className, "data-pyric-ui": "traffic-log", "data-pyric-virtualized": virtualized ? '' : undefined, children: virtualized ? (_jsx(VirtualList, { items: events, estimateSize: rowHeight, height: virtualizedHeight, getItemKey: (event) => event.id, renderItem: (event) => (_jsx("div", { "data-pyric-traffic-entry": "", "data-pyric-traffic-id": event.id, children: row(event) })) })) : (_jsx("ul", { "data-pyric-traffic-log-items": "", children: events.map((event) => (_jsx("li", { "data-pyric-traffic-entry": "", "data-pyric-traffic-id": event.id, children: row(event) }, event.id))) })) }));
+}
+//# sourceMappingURL=TrafficLog.js.map

package/dist/traffic/components/TrafficLog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficLog.js","sourceRoot":"","sources":["../../../src/traffic/components/TrafficLog.tsx"],"names":[],"mappings":"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"}

package/dist/traffic/components/TrafficMetricCards.d.ts

@@ -0,0 +1,26 @@
+import type { MetricSeries } from '../hooks/useTrafficMetrics.js';
+export interface TrafficMetricCardsProps {
+    series: readonly MetricSeries[];
+    /** When supplied (with `onToggle`), each card gets a checkbox and
+     *  doubles as the chart's legend — Console reference semantics
+     *  ("toggle series visibility"). Omit for a read-only totals strip. */
+    visible?: ReadonlySet<string>;
+    onToggle?: (key: string) => void;
+    formatValue?: (n: number) => string;
+    className?: string;
+}
+/**
+ * The period-total strip: one card per series, each showing the series'
+ * total for the current window. Doubles as BOTH the chart's legend row
+ * (pass `visible` + `onToggle` to get the checkbox-toggle semantics) AND
+ * the standalone fallback presentation when a chart isn't warranted —
+ * this component never depends on {@link TrafficLineChart}.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-metric-cards"]`,
+ * `[data-pyric-metric-card]` (with `data-pyric-metric-key`,
+ * `data-pyric-series-index` — the color channel a chart's lines also
+ * key off of, so a card and its line always match), `[data-pyric-metric-hidden]`
+ * when toggled off.
+ */
+export declare function TrafficMetricCards({ series, visible, onToggle, formatValue, className, }: TrafficMetricCardsProps): import("react").JSX.Element;
+//# sourceMappingURL=TrafficMetricCards.d.ts.map

package/dist/traffic/components/TrafficMetricCards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficMetricCards.d.ts","sourceRoot":"","sources":["../../../src/traffic/components/TrafficMetricCards.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAElE,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;IAChC;;2EAEuE;IACvE,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,OAAO,EACP,QAAQ,EACR,WAAgC,EAChC,SAAS,GACV,EAAE,uBAAuB,+BA0CzB"}

package/dist/traffic/components/TrafficMetricCards.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultFormatValue = (n) => String(n);
+/**
+ * The period-total strip: one card per series, each showing the series'
+ * total for the current window. Doubles as BOTH the chart's legend row
+ * (pass `visible` + `onToggle` to get the checkbox-toggle semantics) AND
+ * the standalone fallback presentation when a chart isn't warranted —
+ * this component never depends on {@link TrafficLineChart}.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-metric-cards"]`,
+ * `[data-pyric-metric-card]` (with `data-pyric-metric-key`,
+ * `data-pyric-series-index` — the color channel a chart's lines also
+ * key off of, so a card and its line always match), `[data-pyric-metric-hidden]`
+ * when toggled off.
+ */
+export function TrafficMetricCards({ series, visible, onToggle, formatValue = defaultFormatValue, className, }) {
+    const toggleable = visible !== undefined && onToggle !== undefined;
+    return (_jsx("div", { className: className, "data-pyric-ui": "traffic-metric-cards", role: toggleable ? 'group' : undefined, children: series.map((s, index) => {
+            const isVisible = visible ? visible.has(s.key) : true;
+            const card = (_jsxs(_Fragment, { children: [_jsx("span", { "data-pyric-metric-swatch": "", "aria-hidden": "true" }), _jsx("span", { "data-pyric-metric-label": "", children: s.label }), _jsx("span", { "data-pyric-metric-value": "", children: formatValue(s.total) })] }));
+            return toggleable ? (_jsxs("label", { "data-pyric-metric-card": "", "data-pyric-metric-key": s.key, "data-pyric-series-index": index, "data-pyric-metric-hidden": isVisible ? undefined : '', children: [_jsx("input", { type: "checkbox", checked: isVisible, onChange: () => onToggle(s.key), "data-pyric-metric-checkbox": "" }), card] }, s.key)) : (_jsx("span", { "data-pyric-metric-card": "", "data-pyric-metric-key": s.key, "data-pyric-series-index": index, children: card }, s.key));
+        }) }));
+}
+//# sourceMappingURL=TrafficMetricCards.js.map

package/dist/traffic/components/TrafficMetricCards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficMetricCards.js","sourceRoot":"","sources":["../../../src/traffic/components/TrafficMetricCards.tsx"],"names":[],"mappings":";AAaA,MAAM,kBAAkB,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAEpD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,MAAM,EACN,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GACe;IACxB,MAAM,UAAU,GAAG,OAAO,KAAK,SAAS,IAAI,QAAQ,KAAK,SAAS,CAAC;IACnE,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,mBAAgB,sBAAsB,EAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YACnG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YACvB,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YACtD,MAAM,IAAI,GAAG,CACX,8BACE,2CAA+B,EAAE,iBAAa,MAAM,GAAG,EACvD,0CAA8B,EAAE,YAAE,CAAC,CAAC,KAAK,GAAQ,EACjD,0CAA8B,EAAE,YAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,GAAQ,IAC7D,CACJ,CAAC;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,2CAEyB,EAAE,2BACF,CAAC,CAAC,GAAG,6BACH,KAAK,8BACJ,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,aAEpD,gBACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAS,CAAC,CAAC,CAAC,GAAG,CAAC,gCACL,EAAE,GAC7B,EACD,IAAI,KAZA,CAAC,CAAC,GAAG,CAaJ,CACT,CAAC,CAAC,CAAC,CACF,yCAEyB,EAAE,2BACF,CAAC,CAAC,GAAG,6BACH,KAAK,YAE7B,IAAI,IALA,CAAC,CAAC,GAAG,CAML,CACR,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/traffic/components/TrafficRow.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { TrafficEvent } from '../types.js';
+export interface TrafficRowProps {
+    event: TrafficEvent;
+    /** Marks the row as the active selection (`data-pyric-selected`). */
+    selected?: boolean;
+    onSelect?: (event: TrafficEvent) => void;
+    /**
+     * Render-prop slot for a consumer-specific classification badge —
+     * e.g. the playground's `expected`/`ambiguous`/`unexpected`
+     * verdict, which is app-source analysis the library doesn't own.
+     * Returns `null` to render nothing.
+     */
+    renderClassification?: (event: TrafficEvent) => ReactNode;
+    /** Override the timestamp rendering. Default is `HH:MM:SS`. */
+    formatTime?: (at: number) => string;
+    className?: string;
+}
+/**
+ * One headless traffic row — timestamp, method badge, path, and an
+ * optional consumer classification slot. The raw result is exposed as
+ * `data-pyric-result` on the row (for tinting/filtering); rendering a
+ * verdict/outcome label is the consumer's job via
+ * `renderClassification` — the row itself draws no result chip, so a
+ * consumer verdict never collides with a built-in one. Latency is
+ * intentionally absent: this is a local simulator, so `evalMs` lives
+ * in `<TrafficDetail>` only.
+ *
+ * Styling hooks:
+ * - `[data-pyric-traffic-row]` — the row button, with
+ *   `data-pyric-result`, `data-pyric-origin`, `data-pyric-method`
+ * - `[data-pyric-traffic-row][data-pyric-selected]` — active row
+ * - `[data-pyric-traffic-time]` / `[data-pyric-traffic-path]`
+ * - `[data-pyric-traffic-service]` — the service label (firestore / rtdb /
+ *   storage / auth), rendered even when unknown (empty) so fixed-width
+ *   styling keeps the columns aligned
+ * - method renders as `<Badge>` (`data-pyric-badge-kind`)
+ */
+export declare function TrafficRow({ event, selected, onSelect, renderClassification, formatTime, className, }: TrafficRowProps): import("react").JSX.Element;
+//# sourceMappingURL=TrafficRow.d.ts.map

package/dist/traffic/components/TrafficRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficRow.d.ts","sourceRoot":"","sources":["../../../src/traffic/components/TrafficRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,YAAY,CAAC;IACpB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,SAAS,CAAC;IAC1D,+DAA+D;IAC/D,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,oBAAoB,EACpB,UAA8B,EAC9B,SAAS,GACV,EAAE,eAAe,+BAmBjB"}

package/dist/traffic/components/TrafficRow.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from '../../primitives/Badge.js';
+import { defaultFormatTime } from './format.js';
+/**
+ * One headless traffic row — timestamp, method badge, path, and an
+ * optional consumer classification slot. The raw result is exposed as
+ * `data-pyric-result` on the row (for tinting/filtering); rendering a
+ * verdict/outcome label is the consumer's job via
+ * `renderClassification` — the row itself draws no result chip, so a
+ * consumer verdict never collides with a built-in one. Latency is
+ * intentionally absent: this is a local simulator, so `evalMs` lives
+ * in `<TrafficDetail>` only.
+ *
+ * Styling hooks:
+ * - `[data-pyric-traffic-row]` — the row button, with
+ *   `data-pyric-result`, `data-pyric-origin`, `data-pyric-method`
+ * - `[data-pyric-traffic-row][data-pyric-selected]` — active row
+ * - `[data-pyric-traffic-time]` / `[data-pyric-traffic-path]`
+ * - `[data-pyric-traffic-service]` — the service label (firestore / rtdb /
+ *   storage / auth), rendered even when unknown (empty) so fixed-width
+ *   styling keeps the columns aligned
+ * - method renders as `<Badge>` (`data-pyric-badge-kind`)
+ */
+export function TrafficRow({ event, selected, onSelect, renderClassification, formatTime = defaultFormatTime, className, }) {
+    return (_jsxs("button", { type: "button", onClick: () => onSelect?.(event), className: className, "data-pyric-traffic-row": "", "data-pyric-result": event.result, "data-pyric-origin": event.origin, "data-pyric-method": event.method, "data-pyric-selected": selected ? '' : undefined, children: [_jsx("span", { "data-pyric-traffic-time": "", children: formatTime(event.at) }), _jsx("span", { "data-pyric-traffic-service": event.service ?? '', children: event.service ?? '' }), _jsx(Badge, { kind: event.method, children: event.method }), _jsx("span", { "data-pyric-traffic-path": "", children: event.path || '/' }), renderClassification ? renderClassification(event) : null] }));
+}
+//# sourceMappingURL=TrafficRow.js.map

package/dist/traffic/components/TrafficRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficRow.js","sourceRoot":"","sources":["../../../src/traffic/components/TrafficRow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAmBhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,oBAAoB,EACpB,UAAU,GAAG,iBAAiB,EAC9B,SAAS,GACO;IAChB,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAChC,SAAS,EAAE,SAAS,4BACG,EAAE,uBACN,KAAK,CAAC,MAAM,uBACZ,KAAK,CAAC,MAAM,uBACZ,KAAK,CAAC,MAAM,yBACV,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,aAE9C,0CAA8B,EAAE,YAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,GAAQ,EAC9D,6CAAkC,KAAK,CAAC,OAAO,IAAI,EAAE,YAAG,KAAK,CAAC,OAAO,IAAI,EAAE,GAAQ,EACnF,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,CAAC,MAAM,YAAG,KAAK,CAAC,MAAM,GAAS,EACjD,0CAA8B,EAAE,YAAE,KAAK,CAAC,IAAI,IAAI,GAAG,GAAQ,EAC1D,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,IACnD,CACV,CAAC;AACJ,CAAC"}

package/dist/traffic/components/TrafficStats.d.ts

@@ -0,0 +1,18 @@
+import type { TrafficStatsSummary } from '../hooks/useTrafficStats.js';
+export interface TrafficStatsProps {
+    stats: TrafficStatsSummary;
+    className?: string;
+}
+/**
+ * Headless aggregation panel. Renders the totals, the deny rate, and
+ * count breakdowns by method / origin / path. The deny rate is
+ * exposed both as text and as a `--pyric-deny-rate` CSS custom
+ * property on the root for a proportional meter.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-stats"]`,
+ * `[data-pyric-stat]` (with `data-pyric-stat-key`),
+ * `[data-pyric-stat-group]` (with `data-pyric-stat-group-label`),
+ * `[data-pyric-stat-bucket]`.
+ */
+export declare function TrafficStats({ stats, className }: TrafficStatsProps): import("react").JSX.Element;
+//# sourceMappingURL=TrafficStats.d.ts.map

package/dist/traffic/components/TrafficStats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficStats.d.ts","sourceRoot":"","sources":["../../../src/traffic/components/TrafficStats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAEvE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwBD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAgCnE"}

package/dist/traffic/components/TrafficStats.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function BucketList({ label, buckets, }) {
+    return (_jsxs("div", { "data-pyric-stat-group": "", "data-pyric-stat-group-label": label, children: [_jsx("h4", { "data-pyric-stat-group-heading": "", children: label }), _jsx("ul", { "data-pyric-stat-buckets": "", children: buckets.map((b) => (_jsxs("li", { "data-pyric-stat-bucket": "", "data-pyric-stat-key": b.key, children: [_jsx("span", { "data-pyric-stat-bucket-label": "", children: b.key }), _jsx("span", { "data-pyric-stat-bucket-count": "", children: b.count })] }, b.key))) })] }));
+}
+/**
+ * Headless aggregation panel. Renders the totals, the deny rate, and
+ * count breakdowns by method / origin / path. The deny rate is
+ * exposed both as text and as a `--pyric-deny-rate` CSS custom
+ * property on the root for a proportional meter.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-stats"]`,
+ * `[data-pyric-stat]` (with `data-pyric-stat-key`),
+ * `[data-pyric-stat-group]` (with `data-pyric-stat-group-label`),
+ * `[data-pyric-stat-bucket]`.
+ */
+export function TrafficStats({ stats, className }) {
+    return (_jsxs("div", { className: className, "data-pyric-ui": "traffic-stats", style: { '--pyric-deny-rate': stats.denyRate }, children: [_jsxs("div", { "data-pyric-stat-totals": "", children: [_jsxs("span", { "data-pyric-stat": "", "data-pyric-stat-key": "total", children: [_jsx("span", { "data-pyric-stat-label": "", children: "total" }), _jsx("span", { "data-pyric-stat-value": "", children: stats.total })] }), _jsxs("span", { "data-pyric-stat": "", "data-pyric-stat-key": "allows", children: [_jsx("span", { "data-pyric-stat-label": "", children: "allowed" }), _jsx("span", { "data-pyric-stat-value": "", children: stats.allows })] }), _jsxs("span", { "data-pyric-stat": "", "data-pyric-stat-key": "denies", children: [_jsx("span", { "data-pyric-stat-label": "", children: "denied" }), _jsx("span", { "data-pyric-stat-value": "", children: stats.denies })] }), _jsxs("span", { "data-pyric-stat": "", "data-pyric-stat-key": "deny-rate", children: [_jsx("span", { "data-pyric-stat-label": "", children: "deny rate" }), _jsxs("span", { "data-pyric-stat-value": "", children: [(stats.denyRate * 100).toFixed(0), "%"] })] })] }), _jsx(BucketList, { label: "method", buckets: stats.byMethod }), _jsx(BucketList, { label: "origin", buckets: stats.byOrigin }), _jsx(BucketList, { label: "path", buckets: stats.byPath })] }));
+}
+//# sourceMappingURL=TrafficStats.js.map

package/dist/traffic/components/TrafficStats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficStats.js","sourceRoot":"","sources":["../../../src/traffic/components/TrafficStats.tsx"],"names":[],"mappings":";AAOA,SAAS,UAAU,CAAC,EAClB,KAAK,EACL,OAAO,GAIR;IACC,OAAO,CACL,wCAA2B,EAAE,iCAA8B,KAAK,aAC9D,8CAAkC,EAAE,YAAE,KAAK,GAAM,EACjD,wCAA4B,EAAE,YAC3B,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,wCAAuC,EAAE,yBAAsB,CAAC,CAAC,GAAG,aAClE,+CAAmC,EAAE,YAAE,CAAC,CAAC,GAAG,GAAQ,EACpD,+CAAmC,EAAE,YAAE,CAAC,CAAC,KAAK,GAAQ,KAF/C,CAAC,CAAC,GAAG,CAGT,CACN,CAAC,GACC,IACD,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAqB;IAClE,OAAO,CACL,eACE,SAAS,EAAE,SAAS,mBACN,eAAe,EAC7B,KAAK,EAAE,EAAE,mBAAmB,EAAE,KAAK,CAAC,QAAQ,EAAyB,aAErE,yCAA4B,EAAE,aAC5B,mCAAsB,EAAE,yBAAqB,OAAO,aAClD,wCAA4B,EAAE,sBAAa,EAC3C,wCAA4B,EAAE,YAAE,KAAK,CAAC,KAAK,GAAQ,IAC9C,EACP,mCAAsB,EAAE,yBAAqB,QAAQ,aACnD,wCAA4B,EAAE,wBAAe,EAC7C,wCAA4B,EAAE,YAAE,KAAK,CAAC,MAAM,GAAQ,IAC/C,EACP,mCAAsB,EAAE,yBAAqB,QAAQ,aACnD,wCAA4B,EAAE,uBAAc,EAC5C,wCAA4B,EAAE,YAAE,KAAK,CAAC,MAAM,GAAQ,IAC/C,EACP,mCAAsB,EAAE,yBAAqB,WAAW,aACtD,wCAA4B,EAAE,0BAAiB,EAC/C,yCAA4B,EAAE,aAC3B,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAC7B,IACF,IACH,EACN,KAAC,UAAU,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,KAAK,CAAC,QAAQ,GAAI,EACtD,KAAC,UAAU,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,KAAK,CAAC,QAAQ,GAAI,EACtD,KAAC,UAAU,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,CAAC,MAAM,GAAI,IAC9C,CACP,CAAC;AACJ,CAAC"}

package/dist/traffic/components/TrafficTimeline.d.ts

@@ -0,0 +1,88 @@
+import { type ReactNode } from 'react';
+import type { TimeWindow, TrafficBucket, UseTrafficBucketsResult } from '../hooks/useTrafficBuckets.js';
+import type { TrafficEvent } from '../types.js';
+export interface TrafficTimelineProps {
+    /**
+     * Raw traffic events to bucket. Ignored when `buckets` is supplied
+     * (the consumer pre-bucketed). Exactly one of `events` / `buckets`
+     * should drive the histogram.
+     */
+    events?: TrafficEvent[];
+    /**
+     * Pre-bucketed counts — the escape hatch when the caller already
+     * ran {@link useTrafficBuckets} (or `bucketTraffic`) upstream, e.g.
+     * to share one bucketing pass across the timeline + a stats header.
+     * Takes precedence over `events`.
+     */
+    buckets?: UseTrafficBucketsResult;
+    /** The time range the histogram spans. */
+    window: TimeWindow;
+    /** Number of bars. Default 30. Only used on the `events` path. */
+    bucketCount?: number;
+    /**
+     * A brushed sub-range (`[start, end)`) drawn as an overlay over the
+     * bars. Position is derived from where it falls inside `window`, so
+     * a partly-out-of-window brush clamps to the chart edges.
+     */
+    brush?: TimeWindow;
+    /**
+     * Fired when a bar inside the brush region is clicked-through — the
+     * component itself is presentation-agnostic about drag, so the
+     * primary brush gesture is owned by the consumer. As a built-in
+     * affordance, clicking a bucket calls this with a one-bucket-wide
+     * window so a bare consumer still gets a working selection.
+     */
+    onBrush?: (window: TimeWindow) => void;
+    /**
+     * Direct annotation shown while a bucket is hovered or keyboard-focused.
+     * The timeline owns preview state and positioning; the consumer owns the
+     * words and number formatting.
+     */
+    renderBucketSummary?: (bucket: TrafficBucket) => ReactNode;
+    /**
+     * Where the live edge marker sits, in epoch-ms. Defaults to
+     * `window.end` (the right edge = "now"). Omit / pass `null` to hide
+     * the marker entirely (e.g. a frozen, non-live window).
+     */
+    liveAt?: number | null;
+    /**
+     * Header slot — title, deny summary, live label. Rendered above the
+     * bars inside `[data-pyric-timeline-header]`. The mock puts
+     * "142 requests · 16 denied · live" here.
+     */
+    header?: ReactNode;
+    /**
+     * Axis slot — tick labels below the bars inside
+     * `[data-pyric-timeline-axis]`. The mock puts "14m ago · 7m · now"
+     * here. Receives the resolved window so labels can be derived.
+     */
+    axis?: ReactNode | ((window: TimeWindow) => ReactNode);
+    emptyState?: ReactNode;
+    className?: string;
+}
+/**
+ * Headless volume-over-time histogram — the time axis for the traffic
+ * lens. Buckets events into N bars; each bar stacks denies (dark, at
+ * the base) under the allow remainder, matching the Studio mock.
+ *
+ * Per-bucket styling channels (on `[data-pyric-bucket]`):
+ * - `data-pyric-bucket-count` / `-denies` — raw integers.
+ * - `--pyric-bucket-h` — full bar height, 0..1 of the tallest bucket.
+ * - `--pyric-bucket-deny-h` — deny sub-stack height, same scale.
+ * The deny segment (`[data-pyric-bucket-deny]`) and allow segment
+ * (`[data-pyric-bucket-allow]`) are separate children so the consumer
+ * colors them independently.
+ *
+ * A `[data-pyric-brush]` overlay marks a sub-range via
+ * `--pyric-brush-left` / `--pyric-brush-right` (0..1 fractions). The
+ * `[data-pyric-live]` edge marker sits at `--pyric-live-x`.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-timeline"]`,
+ * `[data-pyric-timeline-header]`, `[data-pyric-timeline-bars]`,
+ * `[data-pyric-bucket]` (with `data-pyric-bucket-index`,
+ * `data-pyric-has-denies`, `data-pyric-bucket-selected`),
+ * `[data-pyric-bucket-summary]`, `[data-pyric-brush]`, `[data-pyric-live]`,
+ * `[data-pyric-timeline-axis]`.
+ */
+export declare function TrafficTimeline({ events, buckets: prebucketed, window, bucketCount, brush, onBrush, renderBucketSummary, liveAt, header, axis, emptyState, className, }: TrafficTimelineProps): import("react").JSX.Element;
+//# sourceMappingURL=TrafficTimeline.d.ts.map

package/dist/traffic/components/TrafficTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficTimeline.d.ts","sourceRoot":"","sources":["../../../src/traffic/components/TrafficTimeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EACV,UAAU,EACV,aAAa,EACb,uBAAuB,EACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,0CAA0C;IAC1C,MAAM,EAAE,UAAU,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,SAAS,CAAC;IAC3D;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC;IACvD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,WAAgB,EAChB,KAAK,EACL,OAAO,EACP,mBAAmB,EACnB,MAAM,EACN,MAAM,EACN,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,oBAAoB,+BAiHtB"}

package/dist/traffic/components/TrafficTimeline.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { useTrafficBuckets } from '../hooks/useTrafficBuckets.js';
+/** Clamp a 0..1 fraction. */
+function clamp01(n) {
+    if (n < 0)
+        return 0;
+    if (n > 1)
+        return 1;
+    return n;
+}
+/** Fraction (0..1) of `t` across `[window.start, window.end)`. */
+function fraction(t, window) {
+    const span = window.end - window.start;
+    if (span <= 0)
+        return 0;
+    return clamp01((t - window.start) / span);
+}
+/**
+ * Headless volume-over-time histogram — the time axis for the traffic
+ * lens. Buckets events into N bars; each bar stacks denies (dark, at
+ * the base) under the allow remainder, matching the Studio mock.
+ *
+ * Per-bucket styling channels (on `[data-pyric-bucket]`):
+ * - `data-pyric-bucket-count` / `-denies` — raw integers.
+ * - `--pyric-bucket-h` — full bar height, 0..1 of the tallest bucket.
+ * - `--pyric-bucket-deny-h` — deny sub-stack height, same scale.
+ * The deny segment (`[data-pyric-bucket-deny]`) and allow segment
+ * (`[data-pyric-bucket-allow]`) are separate children so the consumer
+ * colors them independently.
+ *
+ * A `[data-pyric-brush]` overlay marks a sub-range via
+ * `--pyric-brush-left` / `--pyric-brush-right` (0..1 fractions). The
+ * `[data-pyric-live]` edge marker sits at `--pyric-live-x`.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-timeline"]`,
+ * `[data-pyric-timeline-header]`, `[data-pyric-timeline-bars]`,
+ * `[data-pyric-bucket]` (with `data-pyric-bucket-index`,
+ * `data-pyric-has-denies`, `data-pyric-bucket-selected`),
+ * `[data-pyric-bucket-summary]`, `[data-pyric-brush]`, `[data-pyric-live]`,
+ * `[data-pyric-timeline-axis]`.
+ */
+export function TrafficTimeline({ events, buckets: prebucketed, window, bucketCount = 30, brush, onBrush, renderBucketSummary, liveAt, header, axis, emptyState, className, }) {
+    const summaryId = useId();
+    const [hoveredBucket, setHoveredBucket] = useState(null);
+    const [focusedBucket, setFocusedBucket] = useState(null);
+    // Hook is always called (rules of hooks); its result is discarded
+    // when the caller pre-bucketed.
+    const computed = useTrafficBuckets({
+        events: events ?? [],
+        window,
+        bucketCount,
+    });
+    const result = prebucketed ?? computed;
+    const { buckets, total } = result;
+    const activeBucketIndex = hoveredBucket ?? focusedBucket;
+    const activeBucket = activeBucketIndex === null ? null : (buckets.find((bucket) => bucket.index === activeBucketIndex) ?? null);
+    const activeBucketSelected = activeBucket !== null && brush?.start === activeBucket.start && brush.end === activeBucket.end;
+    if (buckets.length === 0) {
+        return (_jsx("div", { className: className, "data-pyric-ui": "traffic-timeline", "data-pyric-empty": "", children: emptyState }));
+    }
+    const isEmpty = total === 0;
+    const livePoint = liveAt === undefined ? window.end : liveAt;
+    const liveX = livePoint == null ? null : fraction(livePoint, window);
+    const resolvedAxis = typeof axis === 'function' ? axis(window) : axis;
+    return (_jsxs("div", { className: className, "data-pyric-ui": "traffic-timeline", "data-pyric-empty": isEmpty ? '' : undefined, children: [header !== undefined && (_jsx("div", { "data-pyric-timeline-header": "", children: header })), _jsxs("div", { "data-pyric-timeline-chart": "", children: [_jsx("div", { "data-pyric-timeline-bars": "", role: onBrush ? 'group' : 'img', "aria-label": "request volume over time", children: buckets.map((bucket) => (_jsx(Bar, { bucket: bucket, window: window, onBrush: onBrush, onHover: renderBucketSummary ? setHoveredBucket : undefined, onFocus: renderBucketSummary ? setFocusedBucket : undefined, summaryId: renderBucketSummary && !activeBucketSelected && activeBucket?.index === bucket.index
+                                ? summaryId
+                                : undefined, selected: brush?.start === bucket.start && brush.end === bucket.end }, bucket.index))) }), activeBucket && renderBucketSummary && !activeBucketSelected ? (_jsx("div", { id: summaryId, role: "tooltip", "data-pyric-bucket-summary": "", style: {
+                            '--pyric-bucket-summary-x': (activeBucket.index + 0.5) / Math.max(buckets.length, 1),
+                        }, children: renderBucketSummary(activeBucket) })) : null, brush && (_jsx("div", { "data-pyric-brush": "", "aria-hidden": "true", style: {
+                            '--pyric-brush-left': fraction(brush.start, window),
+                            '--pyric-brush-right': 1 - fraction(brush.end, window),
+                        } })), liveX != null && (_jsx("div", { "data-pyric-live": "", "aria-hidden": "true", style: { '--pyric-live-x': liveX } }))] }), resolvedAxis !== undefined && resolvedAxis !== null && (_jsx("div", { "data-pyric-timeline-axis": "", children: resolvedAxis }))] }));
+}
+function Bar({ bucket, window, onBrush, onHover, onFocus, summaryId, selected, }) {
+    const interactive = onBrush !== undefined;
+    const requestLabel = `${bucket.count} ${bucket.count === 1 ? 'request' : 'requests'}`;
+    const denyLabel = `${bucket.denies} denied`;
+    return (_jsxs("button", { type: "button", "data-pyric-bucket": "", "data-pyric-bucket-index": bucket.index, "data-pyric-bucket-count": bucket.count, "data-pyric-bucket-denies": bucket.denies, "data-pyric-has-denies": bucket.denies > 0 ? '' : undefined, "data-pyric-bucket-selected": selected ? '' : undefined, disabled: !interactive, "aria-label": `${requestLabel}, ${denyLabel}`, "aria-describedby": summaryId, "aria-pressed": interactive ? selected : undefined, onPointerEnter: onHover ? () => onHover(bucket.index) : undefined, onPointerLeave: onHover ? () => onHover(null) : undefined, onFocus: onFocus ? () => onFocus(bucket.index) : undefined, onBlur: onFocus ? () => onFocus(null) : undefined, onClick: interactive
+            ? () => onBrush?.({ start: bucket.start, end: bucket.end })
+            : undefined, style: {
+            '--pyric-bucket-h': bucket.heightRatio,
+            '--pyric-bucket-deny-h': bucket.denyHeightRatio,
+        }, children: [_jsx("span", { "data-pyric-bucket-allow": "", "aria-hidden": "true" }), _jsx("span", { "data-pyric-bucket-deny": "", "aria-hidden": "true" })] }));
+}
+//# sourceMappingURL=TrafficTimeline.js.map

package/dist/traffic/components/TrafficTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficTimeline.js","sourceRoot":"","sources":["../../../src/traffic/components/TrafficTimeline.tsx"],"names":[],"mappings":"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"}

package/dist/traffic/components/format.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Default `HH:MM:SS` timestamp formatter. Components accept a
+ * `formatTime` prop to override — this is just the fallback so the
+ * library has no hard locale dependency.
+ */
+export declare function defaultFormatTime(at: number): string;
+/**
+ * Classifies a simulator debug line as a deny / allow / neutral
+ * verdict so consumers can tint reason rows via
+ * `[data-pyric-reason-verdict="…"]`.
+ */
+export declare function reasonVerdict(reason: string): 'deny' | 'allow' | 'neutral';
+//# sourceMappingURL=format.d.ts.map

package/dist/traffic/components/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../src/traffic/components/format.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAIpD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAK1E"}

package/dist/traffic/components/format.js

@@ -0,0 +1,24 @@
+/**
+ * Default `HH:MM:SS` timestamp formatter. Components accept a
+ * `formatTime` prop to override — this is just the fallback so the
+ * library has no hard locale dependency.
+ */
+export function defaultFormatTime(at) {
+    const d = new Date(at);
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+/**
+ * Classifies a simulator debug line as a deny / allow / neutral
+ * verdict so consumers can tint reason rows via
+ * `[data-pyric-reason-verdict="…"]`.
+ */
+export function reasonVerdict(reason) {
+    const lower = reason.toLowerCase();
+    if (lower.includes('deny'))
+        return 'deny';
+    if (lower.includes('allow'))
+        return 'allow';
+    return 'neutral';
+}
+//# sourceMappingURL=format.js.map

package/dist/traffic/components/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","sourceRoot":"","sources":["../../../src/traffic/components/format.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAU;IAC1C,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC;IACvB,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACtD,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;AAC9E,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAC,MAAc;IAC1C,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;IACnC,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;QAAE,OAAO,MAAM,CAAC;IAC1C,IAAI,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC;QAAE,OAAO,OAAO,CAAC;IAC5C,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/traffic/components/index.d.ts

@@ -0,0 +1,11 @@
+export { TrafficRow, type TrafficRowProps } from './TrafficRow.js';
+export { TrafficLog, type TrafficLogProps } from './TrafficLog.js';
+export { TrafficGroupRow, type TrafficGroupRowProps, } from './TrafficGroupRow.js';
+export { TrafficDetail, type TrafficDetailProps } from './TrafficDetail.js';
+export { RuleHeatmap, type RuleHeatmapProps } from './RuleHeatmap.js';
+export { TrafficStats, type TrafficStatsProps } from './TrafficStats.js';
+export { TrafficTimeline, type TrafficTimelineProps, } from './TrafficTimeline.js';
+export { defaultFormatTime, reasonVerdict } from './format.js';
+export { TrafficMetricCards, type TrafficMetricCardsProps, } from './TrafficMetricCards.js';
+export { TrafficLineChart, type TrafficLineChartProps, } from './TrafficLineChart.js';
+//# sourceMappingURL=index.d.ts.map