@pyric/ui 0.1.0-alpha.7

package/dist/storage/previews.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+import type { FullMetadata } from 'pyric/storage';
+/** What a preview's `render` receives. `blob`/`blobUrl` are only
+ *  populated for previews that declared `needsBlob`. */
+export interface StoragePreviewContext {
+    metadata: FullMetadata;
+    blob: Blob | undefined;
+    blobUrl: string | undefined;
+}
+/**
+ * One entry in the content-type preview registry — the storage
+ * counterpart of the Firestore field-editor registry, keyed by a
+ * `match` predicate instead of a type name because content types are
+ * open-ended. First match wins; consumer previews run BEFORE the
+ * built-ins, so overriding `image/*` is just shipping your own
+ * matcher.
+ */
+export interface StoragePreview {
+    /** Diagnostic id — also stamped on the preview container as
+     *  `data-pyric-preview="<id>"`. */
+    id: string;
+    match: (metadata: FullMetadata) => boolean;
+    /** Ask the inspector to `loadBlob()` before rendering. Default
+     *  `false` (metadata-only previews render immediately). */
+    needsBlob?: boolean;
+    /**
+     * Skip the preview (and the blob download) for objects larger than
+     * this — the inspector renders its `data-pyric-preview-too-large`
+     * fallback instead. `undefined` = no cap.
+     */
+    maxBytes?: number;
+    render: (ctx: StoragePreviewContext) => ReactNode;
+}
+/** 256KB — the section 3 default cap for the text-family preview. */
+export declare const TEXT_PREVIEW_MAX_BYTES: number;
+/** `image/*` → blob-URL `<img>`. */
+export declare const imagePreview: StoragePreview;
+/** `text/*` + `application/json` → text panel, 256KB cap (bigger
+ *  objects fall through to the too-large fallback). JSON is
+ *  pretty-printed when parseable. */
+export declare const textPreview: StoragePreview;
+/** The section 3 defaults: image, text/json; everything else is
+ *  metadata-only (the inspector's `data-pyric-preview-none` state). */
+export declare const defaultStoragePreviews: ReadonlyArray<StoragePreview>;
+/**
+ * Pick the preview for `metadata`: consumer previews first (override
+ * channel), then the built-ins, first `match` wins. `undefined`
+ * means metadata-only.
+ */
+export declare function selectStoragePreview(metadata: FullMetadata, consumerPreviews: ReadonlyArray<StoragePreview> | undefined): StoragePreview | undefined;
+//# sourceMappingURL=previews.d.ts.map

package/dist/storage/previews.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"previews.d.ts","sourceRoot":"","sources":["../../src/storage/previews.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD;wDACwD;AACxD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,YAAY,CAAC;IACvB,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;IACvB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,cAAc;IAC7B;uCACmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,OAAO,CAAC;IAC3C;+DAC2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,GAAG,EAAE,qBAAqB,KAAK,SAAS,CAAC;CACnD;AAED,qEAAqE;AACrE,eAAO,MAAM,sBAAsB,QAAa,CAAC;AAOjD,oCAAoC;AACpC,eAAO,MAAM,YAAY,EAAE,cAQ1B,CAAC;AA0BF;;qCAEqC;AACrC,eAAO,MAAM,WAAW,EAAE,cAezB,CAAC;AAEF;uEACuE;AACvE,eAAO,MAAM,sBAAsB,EAAE,aAAa,CAAC,cAAc,CAGhE,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,YAAY,EACtB,gBAAgB,EAAE,aAAa,CAAC,cAAc,CAAC,GAAG,SAAS,GAC1D,cAAc,GAAG,SAAS,CAK5B"}

package/dist/storage/previews.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+/** 256KB — the section 3 default cap for the text-family preview. */
+export const TEXT_PREVIEW_MAX_BYTES = 256 * 1024;
+function contentTypeOf(metadata) {
+    // `text/plain;charset=utf-8` → `text/plain`.
+    return (metadata.contentType ?? '').split(';')[0].trim().toLowerCase();
+}
+/** `image/*` → blob-URL `<img>`. */
+export const imagePreview = {
+    id: 'image',
+    match: (md) => contentTypeOf(md).startsWith('image/'),
+    needsBlob: true,
+    render: ({ metadata, blobUrl }) => blobUrl ? (_jsx("img", { "data-pyric-preview-image": true, src: blobUrl, alt: metadata.name })) : null,
+};
+function TextPreviewBody({ blob, isJson }) {
+    const [text, setText] = useState(undefined);
+    useEffect(() => {
+        let cancelled = false;
+        blob.text().then((raw) => {
+            if (cancelled)
+                return;
+            if (isJson) {
+                try {
+                    setText(JSON.stringify(JSON.parse(raw), null, 2));
+                    return;
+                }
+                catch {
+                    // Unparseable JSON falls through to the raw text.
+                }
+            }
+            setText(raw);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [blob, isJson]);
+    if (text === undefined)
+        return null;
+    return _jsx("pre", { "data-pyric-preview-text": true, children: text });
+}
+/** `text/*` + `application/json` → text panel, 256KB cap (bigger
+ *  objects fall through to the too-large fallback). JSON is
+ *  pretty-printed when parseable. */
+export const textPreview = {
+    id: 'text',
+    match: (md) => {
+        const ct = contentTypeOf(md);
+        return ct.startsWith('text/') || ct === 'application/json';
+    },
+    needsBlob: true,
+    maxBytes: TEXT_PREVIEW_MAX_BYTES,
+    render: ({ metadata, blob }) => blob ? (_jsx(TextPreviewBody, { blob: blob, isJson: contentTypeOf(metadata) === 'application/json' })) : null,
+};
+/** The section 3 defaults: image, text/json; everything else is
+ *  metadata-only (the inspector's `data-pyric-preview-none` state). */
+export const defaultStoragePreviews = [
+    imagePreview,
+    textPreview,
+];
+/**
+ * Pick the preview for `metadata`: consumer previews first (override
+ * channel), then the built-ins, first `match` wins. `undefined`
+ * means metadata-only.
+ */
+export function selectStoragePreview(metadata, consumerPreviews) {
+    for (const preview of [...(consumerPreviews ?? []), ...defaultStoragePreviews]) {
+        if (preview.match(metadata))
+            return preview;
+    }
+    return undefined;
+}
+//# sourceMappingURL=previews.js.map

package/dist/storage/previews.js.map

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

package/dist/storage/storageApi.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+/**
+ * The modular Storage fns the browse/inspect hooks call, as an INJECTABLE
+ * bundle (same pattern as `@pyric/ui`'s FirestoreApi / AuthApi).
+ *
+ * Default = in-process `pyric/storage`, so existing consumers are unchanged.
+ * Pyric Studio served mode injects the SharedWorker client bundle so the Storage
+ * surface browses the live worker object store. These ops are already async, so
+ * no sync/async wrinkle (unlike auth `listUsers`); the worker handles/refs are
+ * runtime-compatible at the surface the hooks use (`.fullPath` / `.name`).
+ *
+ * `uploadBytes` rides the same seam so `useObjectUpload` follows the injected
+ * backend: in-process writes are uncapped; the worker client's `uploadBytes`
+ * (base64 `storage.putBytes` over the MessagePort) enforces an 8 MiB payload
+ * cap on both ends — an over-cap upload fails that file's task with the typed
+ * `storage/...` too-large error and the rest of the batch proceeds.
+ *
+ * NOTE the rules gate (`useStorageRulesGate`) is NOT here: it reads in-process
+ * rules internals and no-ops on a handle without them (worker handles), which is
+ * the correct degrade (the worker enforces read rules on `listAll` server-side).
+ */
+export type StorageApi = Pick<typeof import('pyric/storage'), 'ref' | 'listAll' | 'getMetadata' | 'getBlob' | 'uploadBytes'>;
+/** Read the active Storage API bundle (defaults to in-process `pyric/storage`). */
+export declare function useStorageApi(): StorageApi;
+/** Provide a Storage API bundle to the subtree (Studio's worker client). */
+export declare function StorageApiProvider({ value, children, }: {
+    value: StorageApi;
+    children: ReactNode;
+}): import("react").FunctionComponentElement<import("react").ProviderProps<StorageApi>>;
+//# sourceMappingURL=storageApi.d.ts.map

package/dist/storage/storageApi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storageApi.d.ts","sourceRoot":"","sources":["../../src/storage/storageApi.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,cAAc,eAAe,CAAC,EAC9B,KAAK,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,aAAa,CAC9D,CAAC;AAMF,mFAAmF;AACnF,wBAAgB,aAAa,IAAI,UAAU,CAE1C;AAED,4EAA4E;AAC5E,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,uFAEA"}

package/dist/storage/storageApi.js

@@ -0,0 +1,13 @@
+import { createContext, createElement, useContext } from 'react';
+import { ref, listAll, getMetadata, getBlob, uploadBytes } from 'pyric/storage';
+const inProcessStorageApi = { ref, listAll, getMetadata, getBlob, uploadBytes };
+const StorageApiContext = createContext(inProcessStorageApi);
+/** Read the active Storage API bundle (defaults to in-process `pyric/storage`). */
+export function useStorageApi() {
+    return useContext(StorageApiContext);
+}
+/** Provide a Storage API bundle to the subtree (Studio's worker client). */
+export function StorageApiProvider({ value, children, }) {
+    return createElement(StorageApiContext.Provider, { value }, children);
+}
+//# sourceMappingURL=storageApi.js.map

package/dist/storage/storageApi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storageApi.js","sourceRoot":"","sources":["../../src/storage/storageApi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AACjF,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AA2BhF,MAAM,mBAAmB,GAAe,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC;AAE5F,MAAM,iBAAiB,GAAG,aAAa,CAAa,mBAAmB,CAAC,CAAC;AAEzE,mFAAmF;AACnF,MAAM,UAAU,aAAa;IAC3B,OAAO,UAAU,CAAC,iBAAiB,CAAC,CAAC;AACvC,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GAIT;IACC,OAAO,aAAa,CAAC,iBAAiB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC;AACxE,CAAC"}

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

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import type { RuleHeatmapEntry } from '../hooks/useRuleHeatmap.js';
+export interface RuleHeatmapProps {
+    /** Per-rule rollup from `useRuleHeatmap`. */
+    entries: RuleHeatmapEntry[];
+    /** Marks one rule row as the active selection. */
+    selectedRuleIndex?: number;
+    /**
+     * Fired when a rule row is clicked — wire this to the log filter
+     * for the cross-view "click a rule, see its traffic" interaction.
+     */
+    onSelectRule?: (ruleIndex: number) => void;
+    emptyState?: ReactNode;
+    className?: string;
+}
+/**
+ * Headless rule heatmap — one row per rule, busiest first. Each row
+ * exposes two styling channels:
+ *
+ * - `data-pyric-rule-heat` — a discrete bucket (`none`/`low`/
+ *   `medium`/`high`) by deny ratio, for threshold-based coloring.
+ * - `--pyric-deny-ratio` — the raw 0–1 ratio as a CSS custom
+ *   property, for a proportional bar / gradient.
+ *
+ * Counts render as separate elements (`data-pyric-rule-total`,
+ * `-allows`, `-denies`) so the consumer can show numbers, bars, or
+ * both.
+ *
+ * Styling hooks: `[data-pyric-ui="rule-heatmap"]`,
+ * `[data-pyric-rule-row]` (with `data-pyric-rule-index`,
+ * `data-pyric-rule-heat`, `data-pyric-selected`).
+ */
+export declare function RuleHeatmap({ entries, selectedRuleIndex, onSelectRule, emptyState, className, }: RuleHeatmapProps): import("react").JSX.Element;
+//# sourceMappingURL=RuleHeatmap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuleHeatmap.d.ts","sourceRoot":"","sources":["../../../src/traffic/components/RuleHeatmap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,MAAM,WAAW,gBAAgB;IAC/B,6CAA6C;IAC7C,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,kDAAkD;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,iBAAiB,EACjB,YAAY,EACZ,UAAU,EACV,SAAS,GACV,EAAE,gBAAgB,+BAgDlB"}

package/dist/traffic/components/RuleHeatmap.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Buckets the deny ratio into discrete heat levels for CSS. */
+function heatBucket(denyRatio) {
+    if (denyRatio === 0)
+        return 'none';
+    if (denyRatio <= 0.33)
+        return 'low';
+    if (denyRatio <= 0.66)
+        return 'medium';
+    return 'high';
+}
+/**
+ * Headless rule heatmap — one row per rule, busiest first. Each row
+ * exposes two styling channels:
+ *
+ * - `data-pyric-rule-heat` — a discrete bucket (`none`/`low`/
+ *   `medium`/`high`) by deny ratio, for threshold-based coloring.
+ * - `--pyric-deny-ratio` — the raw 0–1 ratio as a CSS custom
+ *   property, for a proportional bar / gradient.
+ *
+ * Counts render as separate elements (`data-pyric-rule-total`,
+ * `-allows`, `-denies`) so the consumer can show numbers, bars, or
+ * both.
+ *
+ * Styling hooks: `[data-pyric-ui="rule-heatmap"]`,
+ * `[data-pyric-rule-row]` (with `data-pyric-rule-index`,
+ * `data-pyric-rule-heat`, `data-pyric-selected`).
+ */
+export function RuleHeatmap({ entries, selectedRuleIndex, onSelectRule, emptyState, className, }) {
+    if (entries.length === 0) {
+        return (_jsx("div", { className: className, "data-pyric-ui": "rule-heatmap", "data-pyric-empty": "", children: emptyState }));
+    }
+    return (_jsx("div", { className: className, "data-pyric-ui": "rule-heatmap", children: _jsx("ul", { "data-pyric-rule-heatmap-items": "", children: entries.map((entry) => {
+                const selected = entry.ruleIndex === selectedRuleIndex;
+                return (_jsx("li", { "data-pyric-rule-entry": "", children: _jsxs("button", { type: "button", onClick: () => onSelectRule?.(entry.ruleIndex), "data-pyric-rule-row": "", "data-pyric-rule-index": entry.ruleIndex, "data-pyric-rule-heat": heatBucket(entry.denyRatio), "data-pyric-selected": selected ? '' : undefined, style: {
+                            '--pyric-deny-ratio': entry.denyRatio,
+                        }, children: [_jsxs("span", { "data-pyric-rule-label": "", children: ["#", entry.ruleIndex] }), _jsx("span", { "data-pyric-rule-operations": "", children: entry.operations.join(', ') }), _jsx("span", { "data-pyric-rule-total": "", children: entry.total }), _jsx("span", { "data-pyric-rule-allows": "", children: entry.allows }), _jsx("span", { "data-pyric-rule-denies": "", children: entry.denies }), _jsx("span", { "data-pyric-rule-bar": "", "aria-hidden": "true" })] }) }, entry.ruleIndex));
+            }) }) }));
+}
+//# sourceMappingURL=RuleHeatmap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuleHeatmap.js","sourceRoot":"","sources":["../../../src/traffic/components/RuleHeatmap.tsx"],"names":[],"mappings":";AAiBA,gEAAgE;AAChE,SAAS,UAAU,CAAC,SAAiB;IACnC,IAAI,SAAS,KAAK,CAAC;QAAE,OAAO,MAAM,CAAC;IACnC,IAAI,SAAS,IAAI,IAAI;QAAE,OAAO,KAAK,CAAC;IACpC,IAAI,SAAS,IAAI,IAAI;QAAE,OAAO,QAAQ,CAAC;IACvC,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,EACP,iBAAiB,EACjB,YAAY,EACZ,UAAU,EACV,SAAS,GACQ;IACjB,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,CACL,cACE,SAAS,EAAE,SAAS,mBACN,cAAc,sBACX,EAAE,YAElB,UAAU,GACP,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,mBAAgB,cAAc,YACrD,8CAAkC,EAAE,YACjC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACrB,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,KAAK,iBAAiB,CAAC;gBACvD,OAAO,CACL,sCAAgD,EAAE,YAChD,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,yBAC1B,EAAE,2BACC,KAAK,CAAC,SAAS,0BAChB,UAAU,CAAC,KAAK,CAAC,SAAS,CAAC,yBAC5B,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC9C,KAAK,EACH;4BACE,oBAAoB,EAAE,KAAK,CAAC,SAAS;yBACf,aAG1B,yCAA4B,EAAE,kBAAG,KAAK,CAAC,SAAS,IAAQ,EACxD,6CAAiC,EAAE,YAChC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GACvB,EACP,wCAA4B,EAAE,YAAE,KAAK,CAAC,KAAK,GAAQ,EACnD,yCAA6B,EAAE,YAAE,KAAK,CAAC,MAAM,GAAQ,EACrD,yCAA6B,EAAE,YAAE,KAAK,CAAC,MAAM,GAAQ,EACrD,sCAA0B,EAAE,iBAAa,MAAM,GAAG,IAC3C,IAtBF,KAAK,CAAC,SAAS,CAuBnB,CACN,CAAC;YACJ,CAAC,CAAC,GACC,GACD,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import type { TrafficEvent } from '../types.js';
+export interface TrafficDetailProps {
+    event: TrafficEvent;
+    /** Fired by the back affordance. When absent, no back button. */
+    onBack?: () => void;
+    /**
+     * Render-prop slot below the header — the playground drops its
+     * denial overlay (classification + LLM analysis) here. The library
+     * doesn't own that analysis.
+     */
+    renderClassification?: (event: TrafficEvent) => ReactNode;
+    /** Override the timestamp rendering. Default is `HH:MM:SS`. */
+    formatTime?: (at: number) => string;
+    className?: string;
+}
+/**
+ * Headless drill-in panel for a single traffic event. Renders the
+ * header (result + origin + timestamp + method/path + matched rule),
+ * a consumer classification slot, then JSON sections for auth,
+ * request payload, and resource before/after via `<JsonView>`, plus
+ * the reasons list, `triggeredBy`, and `groupId`.
+ *
+ * `evalMs` appears here as a minor header field only — it is not a
+ * log column (local simulator; latency is de-featured per
+ * the design rationale).
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-detail"]`,
+ * `[data-pyric-traffic-section]` (with `data-pyric-section-label`),
+ * `[data-pyric-traffic-reason]` (with `data-pyric-reason-verdict`).
+ */
+export declare function TrafficDetail({ event, onBack, renderClassification, formatTime, className, }: TrafficDetailProps): import("react").JSX.Element;
+//# sourceMappingURL=TrafficDetail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficDetail.d.ts","sourceRoot":"","sources":["../../../src/traffic/components/TrafficDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,YAAY,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;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;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,oBAAoB,EACpB,UAA8B,EAC9B,SAAS,GACV,EAAE,kBAAkB,+BAsGpB"}

package/dist/traffic/components/TrafficDetail.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from '../../primitives/Badge.js';
+import { JsonView } from '../../primitives/JsonView.js';
+import { defaultFormatTime, reasonVerdict } from './format.js';
+function Section({ label, children, }) {
+    return (_jsxs("section", { "data-pyric-traffic-section": "", "data-pyric-section-label": label, children: [_jsx("h3", { "data-pyric-section-heading": "", children: label }), children] }));
+}
+/**
+ * Headless drill-in panel for a single traffic event. Renders the
+ * header (result + origin + timestamp + method/path + matched rule),
+ * a consumer classification slot, then JSON sections for auth,
+ * request payload, and resource before/after via `<JsonView>`, plus
+ * the reasons list, `triggeredBy`, and `groupId`.
+ *
+ * `evalMs` appears here as a minor header field only — it is not a
+ * log column (local simulator; latency is de-featured per
+ * the design rationale).
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-detail"]`,
+ * `[data-pyric-traffic-section]` (with `data-pyric-section-label`),
+ * `[data-pyric-traffic-reason]` (with `data-pyric-reason-verdict`).
+ */
+export function TrafficDetail({ event, onBack, renderClassification, formatTime = defaultFormatTime, className, }) {
+    const requestData = event.request?.resourceData ?? event.request?.data;
+    const durationMs = event.evalMs ?? event.durationMs ?? 0;
+    return (_jsxs("div", { className: className, "data-pyric-ui": "traffic-detail", children: [_jsxs("header", { "data-pyric-traffic-detail-header": "", children: [onBack ? (_jsx("button", { type: "button", onClick: onBack, "data-pyric-traffic-back": "", "aria-label": "Back to traffic log", children: "Back" })) : null, _jsxs("div", { "data-pyric-traffic-detail-meta": "", children: [_jsx(Badge, { kind: event.result, children: event.result }), _jsx("span", { "data-pyric-traffic-origin": "", children: event.origin }), event.service ? _jsx("span", { "data-pyric-traffic-service": "", children: event.service }) : null, _jsx("span", { "data-pyric-traffic-time": "", children: formatTime(event.at) }), _jsxs("span", { "data-pyric-traffic-eval-ms": "", children: [durationMs.toFixed(1), "ms"] })] }), _jsxs("p", { "data-pyric-traffic-detail-title": "", children: [_jsx("span", { "data-pyric-traffic-method": "", children: event.method }), _jsx("span", { "data-pyric-traffic-path": "", children: event.path })] }), event.matchedRule ? (_jsxs("p", { "data-pyric-traffic-matched-rule": "", children: ["matched rule #", event.matchedRule.ruleIndex, " \u00B7", ' ', event.matchedRule.operations.join(', ')] })) : null] }), renderClassification ? renderClassification(event) : null, _jsx(Section, { label: "AUTH", children: _jsx(JsonView, { value: event.auth }) }), requestData !== undefined ? (_jsx(Section, { label: "REQUEST \u00B7 resource.data", children: _jsx(JsonView, { value: requestData }) })) : null, event.resourceBefore !== undefined ? (_jsx(Section, { label: "RESOURCE BEFORE", children: _jsx(JsonView, { value: event.resourceBefore.exists ? event.resourceBefore.data : null }) })) : null, event.resourceAfter !== undefined ? (_jsx(Section, { label: "RESOURCE AFTER", children: _jsx(JsonView, { value: event.resourceAfter.exists ? event.resourceAfter.data : null }) })) : null, event.reasons.length > 0 ? (_jsx(Section, { label: "REASONS", children: _jsx("ul", { "data-pyric-traffic-reasons": "", children: event.reasons.map((reason, i) => (_jsx("li", { "data-pyric-traffic-reason": "", "data-pyric-reason-verdict": reasonVerdict(reason), children: reason }, i))) }) })) : null, event.triggeredBy ? (_jsx(Section, { label: "TRIGGERED BY", children: _jsxs("p", { "data-pyric-traffic-triggered-by": "", children: [_jsx("span", { "data-pyric-traffic-method": "", children: event.triggeredBy.method }), _jsx("span", { "data-pyric-traffic-path": "", children: event.triggeredBy.path })] }) })) : null, event.groupId ? (_jsx(Section, { label: "GROUP", children: _jsx("p", { "data-pyric-traffic-group": "", children: event.groupId }) })) : null] }));
+}
+//# sourceMappingURL=TrafficDetail.js.map

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

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

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

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import type { TrafficEvent } from '../types.js';
+import type { TrafficGroup } from '../hooks/useTrafficGroups.js';
+export interface TrafficGroupRowProps {
+    group: TrafficGroup;
+    /** Whether the group starts expanded. Default false — grouping
+     *  exists to collapse volume, so collapsed is the useful default. */
+    defaultExpanded?: boolean;
+    onSelect?: (event: TrafficEvent) => void;
+    selectedId?: string;
+    /** Passed through to each member `<TrafficRow>`. */
+    renderClassification?: (event: TrafficEvent) => ReactNode;
+    /** Passed through to each member `<TrafficRow>`. */
+    formatTime?: (at: number) => string;
+    className?: string;
+}
+/**
+ * A collapsible group row — one header summarizing a batch,
+ * transaction, or listener-run, expanding to the member rows. The
+ * header carries `data-pyric-group-kind` and a `data-pyric-group-*`
+ * count/deny rollup; expansion state is `data-pyric-expanded`.
+ *
+ * Styling hooks: `[data-pyric-traffic-group]`,
+ * `[data-pyric-traffic-group-header]` (with `data-pyric-group-kind`),
+ * `[data-pyric-traffic-group-members]`.
+ */
+export declare function TrafficGroupRow({ group, defaultExpanded, onSelect, selectedId, renderClassification, formatTime, className, }: TrafficGroupRowProps): import("react").JSX.Element;
+//# sourceMappingURL=TrafficGroupRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficGroupRow.d.ts","sourceRoot":"","sources":["../../../src/traffic/components/TrafficGroupRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGjE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,YAAY,CAAC;IACpB;yEACqE;IACrE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,SAAS,CAAC;IAC1D,oDAAoD;IACpD,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,eAAuB,EACvB,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,UAAU,EACV,SAAS,GACV,EAAE,oBAAoB,+BA4CtB"}

package/dist/traffic/components/TrafficGroupRow.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { TrafficRow } from './TrafficRow.js';
+/**
+ * A collapsible group row — one header summarizing a batch,
+ * transaction, or listener-run, expanding to the member rows. The
+ * header carries `data-pyric-group-kind` and a `data-pyric-group-*`
+ * count/deny rollup; expansion state is `data-pyric-expanded`.
+ *
+ * Styling hooks: `[data-pyric-traffic-group]`,
+ * `[data-pyric-traffic-group-header]` (with `data-pyric-group-kind`),
+ * `[data-pyric-traffic-group-members]`.
+ */
+export function TrafficGroupRow({ group, defaultExpanded = false, onSelect, selectedId, renderClassification, formatTime, className, }) {
+    const [expanded, setExpanded] = useState(defaultExpanded);
+    return (_jsxs("div", { className: className, "data-pyric-traffic-group": "", "data-pyric-group-kind": group.kind, "data-pyric-expanded": expanded ? '' : undefined, children: [_jsxs("button", { type: "button", onClick: () => setExpanded((e) => !e), "data-pyric-traffic-group-header": "", "data-pyric-group-kind": group.kind, "aria-expanded": expanded, children: [_jsx("span", { "data-pyric-group-kind-label": "", children: group.kind }), _jsx("span", { "data-pyric-group-count": "", children: group.count }), group.denies > 0 ? (_jsx("span", { "data-pyric-group-denies": "", children: group.denies })) : null] }), expanded ? (_jsx("ul", { "data-pyric-traffic-group-members": "", children: group.events.map((event) => (_jsx("li", { "data-pyric-traffic-entry": "", "data-pyric-traffic-id": event.id, children: _jsx(TrafficRow, { event: event, selected: event.id === selectedId, onSelect: onSelect, renderClassification: renderClassification, formatTime: formatTime }) }, event.id))) })) : null] }));
+}
+//# sourceMappingURL=TrafficGroupRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficGroupRow.js","sourceRoot":"","sources":["../../../src/traffic/components/TrafficGroupRow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,KAAK,EACL,eAAe,GAAG,KAAK,EACvB,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,UAAU,EACV,SAAS,GACY;IACrB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;IAE1D,OAAO,CACL,eACE,SAAS,EAAE,SAAS,8BACK,EAAE,2BACJ,KAAK,CAAC,IAAI,yBACZ,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,aAE9C,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,qCACL,EAAE,2BACX,KAAK,CAAC,IAAI,mBAClB,QAAQ,aAEvB,8CAAkC,EAAE,YAAE,KAAK,CAAC,IAAI,GAAQ,EACxD,yCAA6B,EAAE,YAAE,KAAK,CAAC,KAAK,GAAQ,EACnD,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAClB,0CAA8B,EAAE,YAAE,KAAK,CAAC,MAAM,GAAQ,CACvD,CAAC,CAAC,CAAC,IAAI,IACD,EACR,QAAQ,CAAC,CAAC,CAAC,CACV,iDAAqC,EAAE,YACpC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC3B,yCAE2B,EAAE,2BACJ,KAAK,CAAC,EAAE,YAE/B,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,CAAC,EAAE,KAAK,UAAU,EACjC,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,oBAAoB,EAC1C,UAAU,EAAE,UAAU,GACtB,IAVG,KAAK,CAAC,EAAE,CAWV,CACN,CAAC,GACC,CACN,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,34 @@
+import type { MetricPoint, MetricSeries } from '../hooks/useTrafficMetrics.js';
+export interface TrafficLineChartProps {
+    points: readonly MetricPoint[];
+    series: readonly MetricSeries[];
+    /** Series keys currently drawn. Omit to draw every series. Pair with
+     *  {@link TrafficMetricCards}' `visible`/`onToggle` so the legend cards
+     *  and the chart's lines toggle in lockstep. */
+    visible?: ReadonlySet<string>;
+    formatValue?: (n: number) => string;
+    formatTime?: (t: number) => string;
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+/** 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 declare function TrafficLineChart({ points, series, visible, formatValue, formatTime, emptyState, className, }: TrafficLineChartProps): import("react").JSX.Element;
+//# sourceMappingURL=TrafficLineChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrafficLineChart.d.ts","sourceRoot":"","sources":["../../../src/traffic/components/TrafficLineChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE/E,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;IAC/B,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;IAChC;;oDAEgD;IAChD,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,MAAM,EACN,OAAO,EACP,WAAgC,EAChC,UAA8B,EAC9B,UAAU,EACV,SAAS,GACV,EAAE,qBAAqB,+BAqFvB"}

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, 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));
+    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);
+                        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":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAgBjC,MAAM,kBAAkB,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACpD,MAAM,iBAAiB,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;AAE1E;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,MAAM,EACN,MAAM,EACN,OAAO,EACP,WAAW,GAAG,kBAAkB,EAChC,UAAU,GAAG,iBAAiB,EAC9B,UAAU,EACV,SAAS,GACa;IACtB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE5D,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,mBAAgB,oBAAoB,sBAAkB,EAAE,YAC9E,UAAU,GACP,CACP,CAAC;IACJ,CAAC;IAED,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3E,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,KAAK,MAAM,CAAC,IAAI,aAAa;QAAE,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM;YAAE,IAAI,CAAC,GAAG,QAAQ;gBAAE,QAAQ,GAAG,CAAC,CAAC;IACxF,MAAM,KAAK,GAAG,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE5C,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC;IACxB,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;IAChE,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;IAEnD,MAAM,YAAY,GAAG,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE9D,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,mBAAgB,oBAAoB,YAC3D,uCAA0B,EAAE,aAC1B,cAAK,OAAO,EAAC,aAAa,EAAC,mBAAmB,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,gBAAY,mBAAmB,YAC5F,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;wBAChB,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;wBACtC,MAAM,SAAS,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;wBACjD,IAAI,CAAC,SAAS;4BAAE,OAAO,IAAI,CAAC;wBAC5B,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;wBACxF,OAAO,CACL,wCAEwB,EAAE,2BACD,CAAC,CAAC,GAAG,6BACH,WAAW,EACpC,CAAC,EAAE,CAAC,EACJ,IAAI,EAAC,MAAM,EACX,YAAY,EAAC,oBAAoB,IAN5B,CAAC,CAAC,GAAG,CAOV,CACH,CAAC;oBACJ,CAAC,CAAC,GACE,EAEN,uCAA2B,EAAE,YAC1B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,iBAEE,IAAI,EAAC,QAAQ,0BACQ,EAAE,4BACC,CAAC,EACzB,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EAC5B,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EACjE,MAAM,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,gBAC/C,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,IAR/D,KAAK,CAAC,KAAK,CAShB,CACH,CAAC,GACE,EAEL,YAAY,IAAI,CACf,2CAC2B,EAAE,EAC3B,KAAK,EAAE,EAAE,iBAAiB,EAAE,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC,EAAyB,aAE5E,0CAA6B,EAAE,aAC5B,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,cAAK,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,IAC5D,EACL,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACxB,yCAEyB,EAAE,2BACF,CAAC,CAAC,GAAG,6BACH,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAE1C,2CAA+B,EAAE,YAAE,CAAC,CAAC,KAAK,GAAQ,EAClD,2CAA+B,EAAE,YAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,GAAQ,KAN/E,CAAC,CAAC,GAAG,CAON,CACP,CAAC,IACE,CACP,IACG,GACF,CACP,CAAC;AACJ,CAAC"}

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