@dudousxd/nestjs-telescope-ui 2.0.0 → 2.0.1

package/dist/react/components/extensions/panel-table.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Table, TableBody, TableCell, TableRow } from '../../ui/table.js';
+import { PanelColumnMenu } from './panel-column-menu.js';
+import { PanelTableHeader } from './panel-table-header.js';
+import { buildPanelColumns } from './table-columns.js';
+import { flexRender, panelTableFeatures, useTable, } from './table-features.js';
+/**
+ * How tall a scrolling (paged) table is allowed to get before its rows scroll
+ * under a pinned header. A page of 50 rows is otherwise a ~1,500px card that
+ * pushes every panel below it off the screen, and by the time you have scrolled
+ * to row 40 the column labels are long gone. A short page never reaches the cap,
+ * so it looks exactly as it did.
+ */
+const SCROLL_BODY_CLASS = 'max-h-[28rem]';
+function keyForRow(row, columns, index) {
+    // The row's own values, as before, with the index appended: two identical rows
+    // in one page are perfectly legal in provider output and used to collide into
+    // a duplicate React key.
+    return `${columns.map((column) => String(row[column.key] ?? '')).join('|')}#${index}`;
+}
+/**
+ * A `table` panel, rendered through a TanStack Table v9 instance.
+ *
+ * The instance is what earns its place: sorting cycles, filter values, and
+ * column visibility are all state machines this file would otherwise hand-roll.
+ * What it deliberately does NOT do is transform rows — `manualSorting` and
+ * `manualFiltering` are on and no row model is registered, so the rows render in
+ * exactly the order the provider returned them, and the sort/filter state is
+ * handed straight back up to the dashboard page to re-resolve that provider.
+ * See `table-features.ts` for why.
+ */
+export function PanelTable({ columns, rows, sort, onSortChange, filters, onFiltersChange, scrolls, }) {
+    const [columnVisibility, setColumnVisibility] = useState({});
+    const columnDefs = useMemo(() => buildPanelColumns(columns), [columns]);
+    // The dashboard's own state shapes, projected into TanStack's. Both directions
+    // are narrow on purpose: this table sorts by one column and filters with text,
+    // which is all the SPI puts on the wire, so a multi-column sort arriving from
+    // the library would have nowhere to go.
+    const sorting = sort ? [{ id: sort.key, desc: sort.dir === 'desc' }] : [];
+    const columnFilters = Object.entries(filters ?? {}).map(([id, value]) => ({
+        id,
+        value,
+    }));
+    const table = useTable({
+        features: panelTableFeatures,
+        columns: columnDefs,
+        data: rows,
+        state: { sorting, columnFilters, columnVisibility },
+        onColumnVisibilityChange: setColumnVisibility,
+        onSortingChange: (updater) => {
+            const next = typeof updater === 'function' ? updater(sorting) : updater;
+            const first = next[0];
+            // `enableSortingRemoval` is on by default, so the third click empties the
+            // array — that is "unsorted", not "sorted by nothing", and it has to reach
+            // the provider as an absent `sort` param or the table would be stuck.
+            onSortChange?.(first ? { key: first.id, dir: first.desc ? 'desc' : 'asc' } : undefined);
+        },
+        onColumnFiltersChange: (updater) => {
+            const next = typeof updater === 'function' ? updater(columnFilters) : updater;
+            const applied = {};
+            for (const filter of next) {
+                if (typeof filter.value === 'string' && filter.value !== '')
+                    applied[filter.id] = filter.value;
+            }
+            onFiltersChange?.(applied);
+        },
+        // Rows arrive already sorted, filtered and paginated by the provider.
+        manualSorting: true,
+        manualFiltering: true,
+        getRowId: (row, index) => keyForRow(row, columns, index),
+    });
+    const leafColumns = table.getAllLeafColumns();
+    // Asked of the columns, not of the rendered element: `<PanelColumnMenu/>` is an
+    // element whether or not it will return null, so testing the element for null
+    // would silently add a trailing column to every table.
+    const hasMenu = leafColumns.some((column) => column.getCanHide());
+    // The menu occupies its own trailing header cell when present, so the
+    // empty-state row has to span it too or the "No data" text sits short.
+    const bodyColumnCount = table.getVisibleLeafColumns().length + (hasMenu ? 1 : 0);
+    return (_jsxs(Table, { containerClassName: scrolls ? SCROLL_BODY_CLASS : '', children: [_jsx(PanelTableHeader, { table: table, sticky: scrolls === true, ...(hasMenu ? { menu: _jsx(PanelColumnMenu, { columns: leafColumns }) } : {}) }), _jsxs(TableBody, { children: [rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: bodyColumnCount, className: "py-6 text-center text-muted-foreground", children: "No data in this window." }) })) : null, table.getRowModel().rows.map((row) => (_jsxs(TableRow, { children: [row.getVisibleCells().map((cell) => (
+                            // Cells stay on one line: wrapping is what turned durable's "Workers"
+                            // panel into three-line rows. Anything wider than the card is reachable
+                            // by scrolling the table now, which is the cheaper trade of the two.
+                            _jsx(TableCell, { className: "whitespace-nowrap text-foreground", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))), hasMenu ? _jsx(TableCell, {}) : null] }, row.id)))] })] }));
+}
+//# sourceMappingURL=panel-table.js.map

package/dist/react/components/extensions/panel-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-table.js","sourceRoot":"","sources":["../../../../src/react/components/extensions/panel-table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAwB,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAKL,UAAU,EACV,kBAAkB,EAClB,QAAQ,GACT,MAAM,qBAAqB,CAAC;AAG7B;;;;;;GAMG;AACH,MAAM,iBAAiB,GAAG,eAAe,CAAC;AAE1C,SAAS,SAAS,CAAC,GAAa,EAAE,OAA0B,EAAE,KAAa;IACzE,+EAA+E;IAC/E,8EAA8E;IAC9E,yBAAyB;IACzB,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,EAAE,CAAC;AACxF,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,eAAe,EACf,OAAO,GAWR;IACC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,EAAE,CAAC,CAAC;IACpF,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAExE,+EAA+E;IAC/E,+EAA+E;IAC/E,8EAA8E;IAC9E,wCAAwC;IACxC,MAAM,OAAO,GAAiB,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACxF,MAAM,aAAa,GAAuB,MAAM,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC5F,EAAE;QACF,KAAK;KACN,CAAC,CAAC,CAAC;IAEJ,MAAM,KAAK,GAAG,QAAQ,CAAC;QACrB,QAAQ,EAAE,kBAAkB;QAC5B,OAAO,EAAE,UAAU;QACnB,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE;QACnD,wBAAwB,EAAE,mBAAmB;QAC7C,eAAe,EAAE,CAAC,OAAO,EAAE,EAAE;YAC3B,MAAM,IAAI,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;YACxE,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YACtB,0EAA0E;YAC1E,2EAA2E;YAC3E,sEAAsE;YACtE,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAC1F,CAAC;QACD,qBAAqB,EAAE,CAAC,OAAO,EAAE,EAAE;YACjC,MAAM,IAAI,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;YAC9E,MAAM,OAAO,GAAqB,EAAE,CAAC;YACrC,KAAK,MAAM,MAAM,IAAI,IAAI,EAAE,CAAC;gBAC1B,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,KAAK,EAAE;oBACzD,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC;YACtC,CAAC;YACD,eAAe,EAAE,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC;QACD,sEAAsE;QACtE,aAAa,EAAE,IAAI;QACnB,eAAe,EAAE,IAAI;QACrB,QAAQ,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC;KACzD,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9C,gFAAgF;IAChF,8EAA8E;IAC9E,uDAAuD;IACvD,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC;IAClE,sEAAsE;IACtE,uEAAuE;IACvE,MAAM,eAAe,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEjF,OAAO,CACL,MAAC,KAAK,IAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,aACzD,KAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,KAAK,IAAI,KACpB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAC,eAAe,IAAC,OAAO,EAAE,WAAW,GAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACxE,EACF,MAAC,SAAS,eACP,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,KAAC,QAAQ,cACP,KAAC,SAAS,IAAC,OAAO,EAAE,eAAe,EAAE,SAAS,EAAC,wCAAwC,wCAE3E,GACH,CACZ,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACrC,MAAC,QAAQ,eACN,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;4BACnC,sEAAsE;4BACtE,wEAAwE;4BACxE,qEAAqE;4BACrE,KAAC,SAAS,IAAe,SAAS,EAAC,mCAAmC,YACnE,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,IAD5C,IAAI,CAAC,EAAE,CAEX,CACb,CAAC,EACD,OAAO,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,IAAI,KATlB,GAAG,CAAC,EAAE,CAUV,CACZ,CAAC,IACQ,IACN,CACT,CAAC;AACJ,CAAC"}

package/dist/react/components/extensions/stat-card.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+export interface PanelThresholds {
+    warn: number;
+    bad: number;
+    direction: 'up-bad' | 'down-bad';
+}
+export declare function StatCard({ label, value, delta, deltaLabel, spark, thresholds, currentValue, accent, hint, }: {
+    label: string;
+    value: string | number;
+    delta?: number;
+    deltaLabel?: string;
+    spark?: number[];
+    thresholds?: PanelThresholds;
+    currentValue?: number;
+    accent?: string;
+    hint?: string;
+}): JSX.Element;
+//# sourceMappingURL=stat-card.d.ts.map

package/dist/react/components/extensions/stat-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/extensions/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,QAAQ,GAAG,UAAU,CAAC;CAClC;AAoCD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,UAAU,EACV,YAAY,EACZ,MAA0B,EAC1B,IAAI,GACL,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,GAAG,CAAC,OAAO,CA8Bd"}

package/dist/react/components/extensions/stat-card.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function health(value, t) {
+    if (value === undefined || !t)
+        return null;
+    const worseUp = t.direction === 'up-bad';
+    if (worseUp ? value >= t.bad : value <= t.bad)
+        return 'bad';
+    if (worseUp ? value >= t.warn : value <= t.warn)
+        return 'warn';
+    return 'ok';
+}
+const ACCENT = {
+    ok: 'var(--good)',
+    warn: 'var(--warn)',
+    bad: 'var(--bad)',
+};
+function Sparkline({ points }) {
+    if (points.length < 2)
+        return null;
+    const max = Math.max(...points);
+    const min = Math.min(...points);
+    const span = max - min || 1;
+    const d = points
+        .map((p, i) => {
+        const x = (i / (points.length - 1)) * 100;
+        const y = 20 - ((p - min) / span) * 18 - 1;
+        return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+        .join(' ');
+    return (_jsxs("svg", { className: "mt-2", width: "100%", height: "22", viewBox: "0 0 100 22", preserveAspectRatio: "none", children: [_jsx("title", { children: "Trend sparkline" }), _jsx("path", { d: d, fill: "none", stroke: "var(--muted)", strokeWidth: "1.5" })] }));
+}
+export function StatCard({ label, value, delta, deltaLabel, spark, thresholds, currentValue, accent = 'text-foreground', hint, }) {
+    const h = health(currentValue, thresholds);
+    // A positive delta is "good" unless higher is bad.
+    const deltaGood = delta === undefined || !thresholds
+        ? null
+        : thresholds.direction === 'up-bad'
+            ? delta < 0
+            : delta > 0;
+    const deltaColor = deltaGood === null ? '#a1a1aa' : deltaGood ? 'var(--good)' : 'var(--bad)';
+    const arrow = delta === undefined ? '' : delta > 0 ? '▲' : delta < 0 ? '▼' : '◆';
+    return (_jsxs("div", { "data-health": h ?? undefined, className: "rounded-lg border border-line bg-panel/40 px-4 py-3 overflow-hidden", children: [h && _jsx("div", { style: { height: 3, background: ACCENT[h], margin: '-12px -16px 9px' } }), _jsx("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: label }), _jsxs("p", { className: `mt-1 text-2xl font-semibold tabular-nums ${accent} flex items-baseline gap-2`, children: [value, delta !== undefined && (_jsxs("span", { className: "text-xs font-semibold", style: { color: deltaColor }, children: [arrow, " ", deltaLabel ?? Math.abs(delta)] }))] }), spark && _jsx(Sparkline, { points: spark }), hint && _jsx("p", { className: "mt-0.5 text-[10px] text-muted-foreground", children: hint })] }));
+}
+//# sourceMappingURL=stat-card.js.map

package/dist/react/components/extensions/stat-card.js.map

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

package/dist/react/components/extensions/table-columns.d.ts

@@ -0,0 +1,32 @@
+import type { Panel } from '../../../client/types.js';
+import type { PanelColumnDef, PanelRow } from './table-features.js';
+/** The `table` panel variant's column shape, pulled from the discriminated union
+ *  rather than re-declared, so it can never drift from `Panel`. */
+export type TableColumnSpec = Extract<Panel, {
+    kind: 'table';
+}>['columns'][number];
+/**
+ * Fills a `{key}` link template from a row.
+ *
+ * The template is author-controlled but the substituted values come from
+ * provider row data — never let a row turn the link into a `javascript:`/`data:`
+ * URL.
+ */
+export declare function fillTemplate(href: string, row: PanelRow): string;
+/**
+ * Translates a panel's declared columns into TanStack column definitions.
+ *
+ * `accessorFn` rather than `accessorKey`: a key is parsed as a *deep* path, so a
+ * provider returning a flat row keyed `'queue.name'` would resolve to
+ * `row.queue.name` and render blank. It also has to be present at all — both
+ * `getCanSort()` and `getCanFilter()` key off the accessor, not off a
+ * registered row model, which is what lets the header show sort and filter
+ * affordances for state that is resolved on the server.
+ *
+ * Each `enable*` is set explicitly from the spec because TanStack defaults all
+ * three to `true`: left off, every column of every existing dashboard would
+ * suddenly be sortable, filterable and hideable, promising behaviour no
+ * provider implements.
+ */
+export declare function buildPanelColumns(specs: TableColumnSpec[]): PanelColumnDef[];
+//# sourceMappingURL=table-columns.d.ts.map

package/dist/react/components/extensions/table-columns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-columns.d.ts","sourceRoot":"","sources":["../../../../src/react/components/extensions/table-columns.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpE;mEACmE;AACnE,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,GAAG,MAAM,CAIhE;AAoBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,EAAE,GAAG,cAAc,EAAE,CAY5E"}

package/dist/react/components/extensions/table-columns.js

@@ -0,0 +1,51 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Fills a `{key}` link template from a row.
+ *
+ * The template is author-controlled but the substituted values come from
+ * provider row data — never let a row turn the link into a `javascript:`/`data:`
+ * URL.
+ */
+export function fillTemplate(href, row) {
+    const filled = href.replace(/\{(\w+)\}/g, (_m, k) => String(row[k] ?? ''));
+    if (/^\s*(javascript|data|vbscript):/i.test(filled))
+        return '#';
+    return filled;
+}
+/** A cell's rendered content: the row's value for this column, as a deep link
+ *  when the column declares one. A fragment, not an element, so the markup
+ *  inside the `<td>` is exactly what it was before the table grew a table
+ *  instance around it. */
+function CellContent({ spec, row }) {
+    const text = String(row[spec.key] ?? '');
+    if (!spec.link)
+        return _jsx(_Fragment, { children: text });
+    return (_jsx("a", { className: "text-sky-400 hover:underline", href: fillTemplate(spec.link.href, row), ...(spec.link.external ? { target: '_blank', rel: 'noreferrer' } : {}), children: text }));
+}
+/**
+ * Translates a panel's declared columns into TanStack column definitions.
+ *
+ * `accessorFn` rather than `accessorKey`: a key is parsed as a *deep* path, so a
+ * provider returning a flat row keyed `'queue.name'` would resolve to
+ * `row.queue.name` and render blank. It also has to be present at all — both
+ * `getCanSort()` and `getCanFilter()` key off the accessor, not off a
+ * registered row model, which is what lets the header show sort and filter
+ * affordances for state that is resolved on the server.
+ *
+ * Each `enable*` is set explicitly from the spec because TanStack defaults all
+ * three to `true`: left off, every column of every existing dashboard would
+ * suddenly be sortable, filterable and hideable, promising behaviour no
+ * provider implements.
+ */
+export function buildPanelColumns(specs) {
+    return specs.map((spec) => ({
+        id: spec.key,
+        accessorFn: (row) => row[spec.key],
+        header: spec.label,
+        enableSorting: spec.sortable === true,
+        enableColumnFilter: spec.filterable === true,
+        enableHiding: spec.hideable === true,
+        cell: ({ row }) => (_jsx(CellContent, { spec: spec, row: row.original })),
+    }));
+}
+//# sourceMappingURL=table-columns.js.map

package/dist/react/components/extensions/table-columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-columns.js","sourceRoot":"","sources":["../../../../src/react/components/extensions/table-columns.tsx"],"names":[],"mappings":";AAQA;;;;;;GAMG;AACH,MAAM,UAAU,YAAY,CAAC,IAAY,EAAE,GAAa;IACtD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,CAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IACnF,IAAI,kCAAkC,CAAC,IAAI,CAAC,MAAM,CAAC;QAAE,OAAO,GAAG,CAAC;IAChE,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;0BAG0B;AAC1B,SAAS,WAAW,CAAC,EAAE,IAAI,EAAE,GAAG,EAA4C;IAC1E,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;IACzC,IAAI,CAAC,IAAI,CAAC,IAAI;QAAE,OAAO,4BAAG,IAAI,GAAI,CAAC;IACnC,OAAO,CACL,YACE,SAAS,EAAC,8BAA8B,EACxC,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,KACnC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YAEtE,IAAI,GACH,CACL,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAwB;IACxD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC1B,EAAE,EAAE,IAAI,CAAC,GAAG;QACZ,UAAU,EAAE,CAAC,GAAa,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;QAC5C,MAAM,EAAE,IAAI,CAAC,KAAK;QAClB,aAAa,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;QACrC,kBAAkB,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;QAC5C,YAAY,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;QACpC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAmC,EAAE,EAAE,CAAC,CAClD,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,GAAI,CAC/C;KACF,CAAC,CAAC,CAAC;AACN,CAAC"}

package/dist/react/components/extensions/table-features.d.ts

@@ -0,0 +1,47 @@
+import { type Cell, type Column, type ColumnDef, type ColumnFiltersState, type ColumnVisibilityState, type Header, type Row, type SortingState, type Table, flexRender, useTable } from '@tanstack/react-table';
+/**
+ * This package's entire binding to `@tanstack/react-table`.
+ *
+ * The rule the extension dashboard holds to: **no other module imports the
+ * library**. Everything a panel table needs — the hook, `flexRender`, and the
+ * pre-bound types — is re-exported from here, so the next major version is a
+ * change in one file rather than a sweep over every header, body and menu
+ * module. That matters more in v9 than it did in v8, because v9 makes almost
+ * every public type generic in the registered feature set: a bare
+ * `Column<TData>` no longer type-checks anywhere.
+ *
+ * v9 installs a feature's state slice and instance methods **only when that
+ * feature is registered below**. An unregistered feature does not fail loudly —
+ * the method is simply absent, which at the call site is indistinguishable from
+ * "this API was removed in v9". `table-features.spec.ts` asserts every method
+ * the dashboard actually calls, so deleting an entry here fails a test instead
+ * of blanking a panel.
+ */
+export declare const panelTableFeatures: {
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+};
+/**
+ * No client row models are registered above, and that is the point:
+ * `createSortedRowModel` / `createFilteredRowModel` / `createPaginatedRowModel`
+ * would re-do server-side work over the single page already in hand — sorting
+ * 50 rows out of 50,000 and presenting the result as "the top of the list".
+ */
+export type PanelTableFeatures = typeof panelTableFeatures;
+/**
+ * A dashboard table row. Provider rows are opaque JSON keyed by the panel's
+ * declared column keys, so unlike the app-level tables this one is not generic
+ * — which is why every alias below can be bound flat instead of staying generic
+ * in `TData`.
+ */
+export type PanelRow = Record<string, unknown>;
+export type PanelTableInstance = Table<PanelTableFeatures, PanelRow>;
+export type PanelColumn = Column<PanelTableFeatures, PanelRow, unknown>;
+export type PanelColumnDef = ColumnDef<PanelTableFeatures, PanelRow, unknown>;
+export type PanelHeader = Header<PanelTableFeatures, PanelRow, unknown>;
+export type PanelCell = Cell<PanelTableFeatures, PanelRow, unknown>;
+export type PanelTableRow = Row<PanelTableFeatures, PanelRow>;
+export { flexRender, useTable };
+export type { ColumnFiltersState, ColumnVisibilityState, SortingState };
+//# sourceMappingURL=table-features.d.ts.map

package/dist/react/components/extensions/table-features.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-features.d.ts","sourceRoot":"","sources":["../../../../src/react/components/extensions/table-features.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,MAAM,EACX,KAAK,SAAS,EACd,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,MAAM,EACX,KAAK,GAAG,EACR,KAAK,YAAY,EACjB,KAAK,KAAK,EAGV,UAAU,EAGV,QAAQ,EACT,MAAM,uBAAuB,CAAC;AAE/B;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,kBAAkB;;;;CAuB7B,CAAC;AAEH;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,OAAO,kBAAkB,CAAC;AAE3D;;;;;GAKG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AACrE,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,kBAAkB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACxE,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,kBAAkB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC9E,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,kBAAkB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACxE,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACpE,MAAM,MAAM,aAAa,GAAG,GAAG,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AAE9D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAChC,YAAY,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,YAAY,EAAE,CAAC"}

package/dist/react/components/extensions/table-features.js

@@ -0,0 +1,45 @@
+import { columnFilteringFeature, columnVisibilityFeature, flexRender, rowSortingFeature, tableFeatures, useTable, } from '@tanstack/react-table';
+/**
+ * This package's entire binding to `@tanstack/react-table`.
+ *
+ * The rule the extension dashboard holds to: **no other module imports the
+ * library**. Everything a panel table needs — the hook, `flexRender`, and the
+ * pre-bound types — is re-exported from here, so the next major version is a
+ * change in one file rather than a sweep over every header, body and menu
+ * module. That matters more in v9 than it did in v8, because v9 makes almost
+ * every public type generic in the registered feature set: a bare
+ * `Column<TData>` no longer type-checks anywhere.
+ *
+ * v9 installs a feature's state slice and instance methods **only when that
+ * feature is registered below**. An unregistered feature does not fail loudly —
+ * the method is simply absent, which at the call site is indistinguishable from
+ * "this API was removed in v9". `table-features.spec.ts` asserts every method
+ * the dashboard actually calls, so deleting an entry here fails a test instead
+ * of blanking a panel.
+ */
+export const panelTableFeatures = tableFeatures({
+    // column.getCanSort / getIsSorted / getToggleSortingHandler, state.sorting.
+    // Sorting itself is the provider's: `manualSorting` is on and the resolved
+    // state is handed back up to the dashboard page, which re-resolves the
+    // provider with it.
+    rowSortingFeature,
+    // column.getCanFilter / getFilterValue / setFilterValue, state.columnFilters.
+    // Server-side for the same reason.
+    columnFilteringFeature,
+    // column.getCanHide / getIsVisible / toggleVisibility, row.getVisibleCells.
+    // The one genuinely client-side feature here — hiding a column is a display
+    // choice, so it never reaches the provider.
+    columnVisibilityFeature,
+    // Deliberately NO `rowPaginationFeature`. A paged panel's pager is driven
+    // entirely by what the provider returned (`{ total, page, limit }`); nothing
+    // calls a TanStack pagination API, so registering the feature would add a
+    // `pagination` state slice that has to be kept in sync with the real one and
+    // could disagree with it.
+    //
+    // Deliberately NO `columnSizingFeature` either: it contributes `size: 150`
+    // through `getDefaultColumnDef()` to every column, which would pin every
+    // dashboard table to fixed 150px columns and leave no way to express "size
+    // this from the content" — the layout these tables actually want.
+});
+export { flexRender, useTable };
+//# sourceMappingURL=table-features.js.map

package/dist/react/components/extensions/table-features.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-features.js","sourceRoot":"","sources":["../../../../src/react/components/extensions/table-features.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,sBAAsB,EACtB,uBAAuB,EACvB,UAAU,EACV,iBAAiB,EACjB,aAAa,EACb,QAAQ,GACT,MAAM,uBAAuB,CAAC;AAE/B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC;IAC9C,4EAA4E;IAC5E,2EAA2E;IAC3E,uEAAuE;IACvE,oBAAoB;IACpB,iBAAiB;IACjB,8EAA8E;IAC9E,mCAAmC;IACnC,sBAAsB;IACtB,4EAA4E;IAC5E,4EAA4E;IAC5E,4CAA4C;IAC5C,uBAAuB;IACvB,0EAA0E;IAC1E,6EAA6E;IAC7E,0EAA0E;IAC1E,6EAA6E;IAC7E,0BAA0B;IAC1B,EAAE;IACF,2EAA2E;IAC3E,yEAAyE;IACzE,2EAA2E;IAC3E,kEAAkE;CACnE,CAAC,CAAC;AAyBH,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC"}

package/dist/react/components/extensions/table-query.d.ts

@@ -0,0 +1,53 @@
+/**
+ * The client half of the table SPI: turning a panel's live table state into the
+ * query its provider is re-resolved with.
+ *
+ * The param names below are the wire contract, and the server half of it lives
+ * in `@dudousxd/nestjs-telescope`'s `readTableQuery`. They are duplicated rather
+ * than imported: `src/client` and `src/react` deliberately carry no dependency
+ * on the core package (see the `Panel` doc in `../../../client/types.ts`), and a
+ * type-only mirror is what keeps a host from installing a NestJS server package
+ * to render a table. Change one, change the other.
+ */
+/** Query-param key naming the column the table is sorted by. */
+export declare const TABLE_SORT_PARAM = "sort";
+/** Query-param key carrying the sort direction. */
+export declare const TABLE_SORT_DIR_PARAM = "dir";
+/** Prefix that namespaces a per-column filter — `filter.status=failed`. */
+export declare const TABLE_FILTER_PREFIX = "filter.";
+/** Which column a table is sorted by, and which way. `undefined` means unsorted. */
+export interface TableSortState {
+    /** The panel `Column.key` of the sorted column. */
+    key: string;
+    dir: 'asc' | 'desc';
+}
+/** Committed per-column filter text, keyed by panel `Column.key`. */
+export type TableFilterState = Record<string, string>;
+/** Everything a table panel can add to its provider query beyond `data.query`. */
+export interface TableQueryState {
+    /** Present only for a `paged: true` panel. */
+    paging?: {
+        page: number;
+        limit: number;
+    };
+    sort?: TableSortState;
+    filters?: TableFilterState;
+}
+/**
+ * Merges a table's live state onto the panel's own static `data.query`.
+ *
+ * Returns `base` **by identity** when there is nothing to merge. That is not a
+ * micro-optimisation: the resolved query is part of the React Query cache key,
+ * so a table that has never been sorted or filtered has to produce the exact
+ * query it produced before this feature existed — otherwise every existing
+ * dashboard would quietly start on a fresh cache entry, and a plain table's
+ * request would no longer be deduplicated against an identical panel elsewhere
+ * on the page.
+ *
+ * Filters are namespaced with `filter.` for the same reason the server reads
+ * them that way: a panel scoped to `{ status: 'running' }` with a filterable
+ * `status` column is an ordinary combination, and unprefixed one would silently
+ * overwrite the other.
+ */
+export declare function buildTableQuery(base: Record<string, unknown> | undefined, state: TableQueryState): Record<string, unknown> | undefined;
+//# sourceMappingURL=table-query.d.ts.map

package/dist/react/components/extensions/table-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-query.d.ts","sourceRoot":"","sources":["../../../../src/react/components/extensions/table-query.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,SAAS,CAAC;AAEvC,mDAAmD;AACnD,eAAO,MAAM,oBAAoB,QAAQ,CAAC;AAE1C,2EAA2E;AAC3E,eAAO,MAAM,mBAAmB,YAAY,CAAC;AAE7C,oFAAoF;AACpF,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;CACrB;AAED,qEAAqE;AACrE,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEtD,kFAAkF;AAClF,MAAM,WAAW,eAAe;IAC9B,8CAA8C;IAC9C,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EACzC,KAAK,EAAE,eAAe,GACrB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAerC"}

package/dist/react/components/extensions/table-query.js

@@ -0,0 +1,51 @@
+/**
+ * The client half of the table SPI: turning a panel's live table state into the
+ * query its provider is re-resolved with.
+ *
+ * The param names below are the wire contract, and the server half of it lives
+ * in `@dudousxd/nestjs-telescope`'s `readTableQuery`. They are duplicated rather
+ * than imported: `src/client` and `src/react` deliberately carry no dependency
+ * on the core package (see the `Panel` doc in `../../../client/types.ts`), and a
+ * type-only mirror is what keeps a host from installing a NestJS server package
+ * to render a table. Change one, change the other.
+ */
+/** Query-param key naming the column the table is sorted by. */
+export const TABLE_SORT_PARAM = 'sort';
+/** Query-param key carrying the sort direction. */
+export const TABLE_SORT_DIR_PARAM = 'dir';
+/** Prefix that namespaces a per-column filter — `filter.status=failed`. */
+export const TABLE_FILTER_PREFIX = 'filter.';
+/**
+ * Merges a table's live state onto the panel's own static `data.query`.
+ *
+ * Returns `base` **by identity** when there is nothing to merge. That is not a
+ * micro-optimisation: the resolved query is part of the React Query cache key,
+ * so a table that has never been sorted or filtered has to produce the exact
+ * query it produced before this feature existed — otherwise every existing
+ * dashboard would quietly start on a fresh cache entry, and a plain table's
+ * request would no longer be deduplicated against an identical panel elsewhere
+ * on the page.
+ *
+ * Filters are namespaced with `filter.` for the same reason the server reads
+ * them that way: a panel scoped to `{ status: 'running' }` with a filterable
+ * `status` column is an ordinary combination, and unprefixed one would silently
+ * overwrite the other.
+ */
+export function buildTableQuery(base, state) {
+    const filters = Object.entries(state.filters ?? {}).filter(([, value]) => value !== '');
+    if (!state.paging && !state.sort && filters.length === 0)
+        return base;
+    const query = { ...base };
+    if (state.paging) {
+        query.page = state.paging.page;
+        query.limit = state.paging.limit;
+    }
+    if (state.sort) {
+        query[TABLE_SORT_PARAM] = state.sort.key;
+        query[TABLE_SORT_DIR_PARAM] = state.sort.dir;
+    }
+    for (const [key, value] of filters)
+        query[`${TABLE_FILTER_PREFIX}${key}`] = value;
+    return query;
+}
+//# sourceMappingURL=table-query.js.map

package/dist/react/components/extensions/table-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-query.js","sourceRoot":"","sources":["../../../../src/react/components/extensions/table-query.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,gEAAgE;AAChE,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC;AAEvC,mDAAmD;AACnD,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC;AAE1C,2EAA2E;AAC3E,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,CAAC;AAoB7C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,eAAe,CAC7B,IAAyC,EACzC,KAAsB;IAEtB,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC;IACxF,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEtE,MAAM,KAAK,GAA4B,EAAE,GAAG,IAAI,EAAE,CAAC;IACnD,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;QAC/B,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACnC,CAAC;IACD,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;QACf,KAAK,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;QACzC,KAAK,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/C,CAAC;IACD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,OAAO;QAAE,KAAK,CAAC,GAAG,mBAAmB,GAAG,GAAG,EAAE,CAAC,GAAG,KAAK,CAAC;IAClF,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/react/components/flamegraph-view.d.ts

@@ -0,0 +1,18 @@
+import { type JSX } from 'react';
+import type { FlameNode } from '../../client/index.js';
+/**
+ * A dependency-light flamegraph (icicle layout, root at top). Renders one
+ * absolutely-positioned `<div>` per visible frame — no canvas, no charting
+ * library — sized as a percentage of the container width so it's responsive and
+ * SSR-safe. Clicking a frame "zooms" to make it the new 100%-width root; click
+ * the root or the reset control to zoom back out.
+ *
+ * Why div-based: the frame trees are pre-aggregated and pruned server-side (and
+ * again here via `minWidthFraction`), so the visible cell count is small enough
+ * that the DOM is the simplest robust renderer. This keeps the UI bundle free of
+ * a heavy flamegraph dependency, as the task requires.
+ */
+export declare function Flamegraph({ tree }: {
+    tree: FlameNode;
+}): JSX.Element;
+//# sourceMappingURL=flamegraph-view.d.ts.map

package/dist/react/components/flamegraph-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flamegraph-view.d.ts","sourceRoot":"","sources":["../../../src/react/components/flamegraph-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,GAAG,EAAqB,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAKvD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CA4ErE"}

package/dist/react/components/flamegraph-view.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/ui/src/react/components/flamegraph-view.tsx
+import { useMemo, useState } from 'react';
+import { flameColor, flameDepth, flattenFlame, formatProfileMs } from './flamegraph.js';
+const ROW_HEIGHT = 18;
+/**
+ * A dependency-light flamegraph (icicle layout, root at top). Renders one
+ * absolutely-positioned `<div>` per visible frame — no canvas, no charting
+ * library — sized as a percentage of the container width so it's responsive and
+ * SSR-safe. Clicking a frame "zooms" to make it the new 100%-width root; click
+ * the root or the reset control to zoom back out.
+ *
+ * Why div-based: the frame trees are pre-aggregated and pruned server-side (and
+ * again here via `minWidthFraction`), so the visible cell count is small enough
+ * that the DOM is the simplest robust renderer. This keeps the UI bundle free of
+ * a heavy flamegraph dependency, as the task requires.
+ */
+export function Flamegraph({ tree }) {
+    // Zoom focus: the path key of the frame currently treated as the root.
+    const [focusKey, setFocusKey] = useState('0');
+    const cells = useMemo(() => flattenFlame(tree), [tree]);
+    const depth = flameDepth(cells);
+    // Resolve the focused subtree's x/width so we can rescale all cells to it.
+    const focus = cells.find((c) => c.key === focusKey) ?? cells[0];
+    const focusX = focus?.x ?? 0;
+    const focusWidth = focus?.width ?? 1;
+    const focusDepth = focus?.depth ?? 0;
+    if (tree.totalMs <= 0 || cells.length === 0) {
+        return (_jsx("div", { className: "flex h-24 items-center justify-center rounded-lg border border-line bg-panel/40 text-xs text-muted-foreground", children: "No samples \u2014 the capture was empty." }));
+    }
+    // Only render cells inside the focused subtree (its descendants), rescaled.
+    const visible = cells.filter((c) => c.key === focusKey || c.key.startsWith(`${focusKey}.`));
+    const rows = depth - focusDepth;
+    return (_jsxs("div", { children: [focusKey !== '0' && (_jsx("button", { type: "button", onClick: () => setFocusKey('0'), className: "mb-2 rounded border border-line px-2 py-0.5 text-[10px] text-foreground hover:bg-panel-2", children: "\u2190 Reset zoom" })), _jsx("div", { "data-testid": "flamegraph", className: "relative w-full overflow-hidden rounded-lg border border-line bg-background", style: { height: rows * ROW_HEIGHT + 2 }, children: visible.map((cell) => {
+                    const left = ((cell.x - focusX) / focusWidth) * 100;
+                    const width = (cell.width / focusWidth) * 100;
+                    const top = (cell.depth - focusDepth) * ROW_HEIGHT;
+                    const pct = ((cell.node.totalMs / tree.totalMs) * 100).toFixed(1);
+                    return (_jsx("button", { type: "button", onClick: () => setFocusKey(cell.key), title: `${cell.node.name}${cell.node.file ? ` — ${cell.node.file}` : ''}\ntotal ${formatProfileMs(cell.node.totalMs)} (${pct}%) · self ${formatProfileMs(cell.node.selfMs)}`, className: "absolute flex items-center overflow-hidden border border-line-soft/60 px-1 text-left text-[10px] leading-none text-black/80 hover:brightness-110", style: {
+                            left: `${left}%`,
+                            width: `${width}%`,
+                            top,
+                            height: ROW_HEIGHT - 1,
+                            background: cell.node.name === '(root)' ? 'var(--line)' : flameColor(cell.node.name),
+                        }, children: _jsx("span", { className: "truncate", style: cell.node.name === '(root)' ? { color: 'var(--text)' } : {}, children: cell.node.name }) }, cell.key));
+                }) })] }));
+}
+//# sourceMappingURL=flamegraph-view.js.map

package/dist/react/components/flamegraph-view.js.map

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

package/dist/react/components/flamegraph.d.ts

@@ -0,0 +1,34 @@
+import type { FlameNode } from '../../client/index.js';
+/**
+ * A flame cell positioned for rendering: a horizontal bar at depth `depth`,
+ * starting at `x` (fraction 0–1 of the root width) and spanning `width`
+ * (fraction). Produced by {@link flattenFlame}, which is a PURE function so the
+ * layout is unit-testable without a DOM.
+ */
+export interface FlameCell {
+    /** Stable key path (indices from the root), e.g. "0.1.0". */
+    key: string;
+    node: FlameNode;
+    depth: number;
+    /** Left edge as a fraction (0–1) of the root's total width. */
+    x: number;
+    /** Width as a fraction (0–1) of the root's total width. */
+    width: number;
+}
+/**
+ * Flattens a flame tree into positioned cells using the icicle layout (root at
+ * top, children below, each child's width proportional to its `totalMs` share of
+ * the parent). Children are laid out left-to-right widest-first so the hot path
+ * reads down the left edge — the convention Chrome DevTools / speedscope use.
+ *
+ * `minWidthFraction` prunes cells narrower than the given fraction of the root,
+ * so a 50k-node profile doesn't emit tens of thousands of sub-pixel divs.
+ */
+export declare function flattenFlame(root: FlameNode, minWidthFraction?: number): FlameCell[];
+/** Max depth (number of rows) in a flattened cell list. */
+export declare function flameDepth(cells: FlameCell[]): number;
+/** A stable color for a frame, hashed from its name so siblings differ but a
+ *  frame keeps its hue across renders. Warm palette (flamegraph convention). */
+export declare function flameColor(name: string): string;
+export declare function formatProfileMs(ms: number): string;
+//# sourceMappingURL=flamegraph.d.ts.map

package/dist/react/components/flamegraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flamegraph.d.ts","sourceRoot":"","sources":["../../../src/react/components/flamegraph.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,WAAW,SAAS;IACxB,6DAA6D;IAC7D,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,CAAC,EAAE,MAAM,CAAC;IACV,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,EAAE,gBAAgB,SAAQ,GAAG,SAAS,EAAE,CAoBnF;AAED,2DAA2D;AAC3D,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,MAAM,CAErD;AAED;gFACgF;AAChF,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQ/C;AAED,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAIlD"}