+ {#if showQuickFilter}
+
+ {/if}
+
+
+
+{#if confirmRequest}
+ (confirmRequest = null)}
+ >
+
+
+{/if}
+
+{#if detailDrawer}
+
+
+ {confirmRequest.action.confirm?.title
+ ?? `${confirmRequest.action.label} · ${rowLabel(confirmRequest.row, surface.rowKey)}`}
+
+
+
+
+
+
+
+ {#if spec.title || valueKeys.length > 1 || spec.unit}
+
+
+
diff --git a/packages/admin-svelte/src/RowDetailDrawer.svelte b/packages/admin-svelte/src/RowDetailDrawer.svelte
new file mode 100644
index 00000000..2c94ebea
--- /dev/null
+++ b/packages/admin-svelte/src/RowDetailDrawer.svelte
@@ -0,0 +1,133 @@
+
+
+
+ {#if spec.title}{spec.title}{/if}
+ {#if valueKeys.length > 1}
+
+ {#each valueKeys as key, index (key)}
+ {key}
+ {/each}
+
+ {/if}
+ {#if spec.unit}{spec.unit}{/if}
+
+ {/if}
+
+ {#if isEmpty}
+ {i18n.noData}
+ {:else}
+
+
+ {#if !isGraph && plot && hover !== null}
+ {@const active = plot.categories[hover]}
+ {#if active}
+
+ {active.label}
+ {#each active.bars as bar (bar.key)}
+
+
+ {bar.key}: {formatInteger(bar.value)}
+
+ {/each}
+
+ {/if}
+ {/if}
+ {/if}
+${escapeHtml(params.displayName)}
`
+ + `${escapeHtml(help.description)}
`
+ + (help.formula ? `${escapeHtml(help.formula)}
` : '')
+ + `${escapeHtml(params.learnMore ?? DEFAULT_I18N.learnMore)}`;
+ popover.addEventListener('mouseenter', () => {
+ if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }
+ });
+ popover.addEventListener('mouseleave', () => this.scheduleClose());
+ const rect = anchor.getBoundingClientRect();
+ popover.style.left = `${Math.max(8, Math.min(rect.left - 8, window.innerWidth - 360))}px`;
+ popover.style.top = `${rect.bottom + 8}px`;
+ document.body.append(popover);
+ this.popover = popover;
+ }
+
+ private scheduleClose(): void {
+ if (this.closeTimer) clearTimeout(this.closeTimer);
+ this.closeTimer = setTimeout(() => this.close(), 160);
+ }
+
+ private close(): void {
+ this.popover?.remove();
+ this.popover = null;
+ this.closeTimer = null;
+ }
+
+ getGui(): HTMLElement { return this.gui; }
+ refresh(): boolean { return false; }
+ destroy(): void {
+ if (this.closeTimer) clearTimeout(this.closeTimer);
+ this.close();
+ }
+}
+
+/** the renderer classes, exported so a consumer can reuse one in its own colDef. */
+export const ADMIN_CELL_RENDERERS = Object.freeze({
+ 'status-dot': StatusDotCell,
+ tag: TagCell,
+ bar: BarCell,
+ ramp: RampCell,
+ actions: ActionsCell,
+ header: MetricHeader,
+});
+
+// ── contract -> AG Grid column definitions ───────────────────────────────────
+
+export interface BuildColumnDefsOptions {
+ readonly wiki?: AdminGridWiki;
+ readonly i18n?: ResolvedAdminSvelteI18n;
+ /** invoked when a row-action button is pressed; the Svelte layer confirms it. */
+ readonly requestConfirm?: (request: ConfirmRequest) => void;
+}
+
+/** default width of the `status-dot` name column when the contract omits one. */
+const NAME_COLUMN_WIDTH = 230;
+const NAME_COLUMN_MIN_WIDTH = 150;
+
+function toColDef(
+ column: AdminMetricColumn,
+ headerOverride: string | undefined,
+ options: BuildColumnDefsOptions,
+): ColDef