@xenosystem/blocks 0.13.9 → 0.13.10

package/dist/data/index.d.ts

@@ -1401,18 +1401,59 @@ declare const METRICS_PANEL_ID = "xeno.core.metrics";
 declare const metricsManifest: PanelManifest;
 
 /**
- * The Metrics panel view — tiles, deltas, sparklines, threshold tone.
+ * The Metrics panel AS A DECLARATION — the twelfth declared block: KPI tiles over a data-core result.
  *
- * Composes `@xenosystem/components/chrome` (`StatTile`, `Badge`, `SegmentedControl`, `Sparkline`); the
- * host must ensure `@xenosystem/workbench/primitives.css` is present. Nothing here is a local re-cut —
- * the sparkline moved into the primitives so there is exactly one.
- *
- * @module
+ * Everything drawn is data: the range control and partial badge in the toolbar (only when ranges
+ * exist), the error and empty states, a `TileGrid` of `StatTile`s — each with its level badge, its
+ * display value (an em dash for a partial null, never a zero), a `Delta` toned by the metric's
+ * direction, the partial note, the `Sparkline` — and the status bar. A tile activates as a real
+ * button (`StatTile.onActivate`). No runtime-bound unit.
  */
 
-/** Props for {@link MetricsPanelView}. */
-interface MetricsPanelViewProps {
-    controller: MetricsController;
+interface MetricsViewTile {
+    id: string;
+    label: string;
+    title?: string;
+    value: string;
+    level: string;
+    hasLevel: boolean;
+    tone: 'error' | 'warning';
+    hasDelta: boolean;
+    delta: number;
+    deltaTone: 'good' | 'bad' | 'neutral';
+    partial: boolean;
+    hasSpark: boolean;
+    spark: number[];
+    sparkLabel: string;
+}
+interface MetricsViewModel {
+    hasRanges: boolean;
+    ranges: {
+        value: string;
+        label: string;
+    }[];
+    rangeId: string;
+    partial: boolean;
+    partialHint: string;
+    errorMessage?: string;
+    errored: boolean;
+    empty: boolean;
+    emptyHint: string;
+    ready: boolean;
+    layout: 'grid' | 'row' | 'list';
+    columns: number;
+    tiles: MetricsViewTile[];
+    countLabel: string;
+    partialLabel?: string;
+}
+type MetricsUiIntent = {
+    kind: 'range';
+    rangeId: string;
+} | {
+    kind: 'activate';
+    metricId: string;
+};
+interface MetricsViewOptions {
     layout?: 'grid' | 'row' | 'list';
     columns?: number;
     sparkline?: boolean;
@@ -1420,8 +1461,33 @@ interface MetricsPanelViewProps {
     emptyHint?: string;
     partialHint?: string;
 }
+/** Derive the view from the live controller — the runtime calls this on every draw. */
+declare function metricsViewState(c: MetricsController, options?: MetricsViewOptions): MetricsViewModel;
+declare function applyMetricsUi(c: MetricsController, intent: MetricsUiIntent): void;
+declare const metricsViewManifest: PanelManifest;
+declare const BEHAVIOURS$1: {
+    'data/metricsPanelView': (inputs: Record<string, unknown>) => MetricsViewModel;
+};
+declare const METRICS_RUNTIME_UNITS: readonly [];
+declare const METRICS_DECLARATION: BlockDeclaration;
+
+/**
+ * The Metrics panel view — the CODE VIEW of `METRICS_DECLARATION`, drawing the same
+ * `MetricsViewModel` byte-identical (the equivalence suite holds the two together). No runtime-bound
+ * unit; every intent goes through `applyMetricsUi`.
+ *
+ * Composes `@xenosystem/components/chrome`; the host must ensure `@xenosystem/workbench/primitives.css` is
+ * present.
+ *
+ * @module
+ */
+
+/** Props for {@link MetricsPanelView}. */
+interface MetricsPanelViewProps extends MetricsViewOptions {
+    controller: MetricsController;
+}
 /** The Metrics panel view. */
-declare function MetricsPanelView({ controller, layout, columns, sparkline, showDelta, emptyHint, partialHint, }: MetricsPanelViewProps): ReactNode;
+declare function MetricsPanelView({ controller, ...options }: MetricsPanelViewProps): ReactNode;
 
 /**
  * The `xeno.core.fields` contract — the query AUTHOR.
@@ -3381,4 +3447,4 @@ interface ConnectorsPanelViewProps {
 /** The Connectors panel view. */
 declare function ConnectorsPanelView({ controller, emptyHint, }: ConnectorsPanelViewProps): ReactNode;
 
-export { AGENT_HIDDEN_COMMANDS, ALL_AGGREGATES, ALL_CHART_TYPES, type BuildChartOptions, type BuildSelectOptions, type BuildSelectResult, CHART_EMPTY_FILL, CHART_PALETTE_STEPS, CHART_PANEL_ID, CONNECTORS_PANEL_ID, type CellAddress, ChartController, type ChartControllerOptions, type ChartHostBridge, type ChartPanelState, ChartPanelView, type ChartPanelViewProps, type ChartRenderContext, type ChartRenderInput, type ChartRenderOptions, type ChartRenderer, type ChartViewState, type ColumnLayout, type ColumnWindow, ConnectorExecuteInput, ConnectorExecuteOutput, ConnectorTransport, ConnectorsController, type ConnectorsControllerOptions, type ConnectorsHostBridge, ConnectorsPanelState, ConnectorsPanelView, type ConnectorsPanelViewProps, type ConnectorsRenderContext, ConnectorsViewState, type CreateChartPanelOptions, type CreateConnectorExecutorOptions, type CreateConnectorsPanelOptions, type CreateFieldsPanelOptions, type CreateMetricsPanelOptions, type CreateTablePanelOptions, type CredentialDraft, type CredentialErrors, DEFAULT_COLUMN_WIDTH, DEFAULT_PAGE_SIZE, DEFAULT_RANGES, type DeltaDirection, EMPTY_LAYOUT, EXPIRY_SKEW_MS, type ExecuteError, BEHAVIOURS as FIELDS_BEHAVIOURS, FIELDS_DECLARATION, FIELDS_PANEL_ID, FIELDS_RUNTIME_UNITS, FieldsController, type FieldsControllerOptions, type FieldsHostBridge, type FieldsPanelState, FieldsPanelView, type FieldsPanelViewProps, type FieldsRenderContext, type FieldsUiIntent, type FieldsViewColumn, type FieldsViewEntry, type FieldsViewFilter, type FieldsViewModel, type FieldsViewOptions, type FieldsViewShelf, type FieldsViewState, type HostSqlResolver, IMPLEMENTED_VIEW_MODES, type LoopbackRequest, type LoopbackVerdict, METRICS_PANEL_ID, MIN_COLUMN_WIDTH, MONO_FILL_PALETTE, MONO_PALETTE, MetricsController, type MetricsControllerOptions, type MetricsHostBridge, type MetricsPanelState, MetricsPanelView, type MetricsPanelViewProps, type MetricsRenderContext, type MetricsViewState, type NumericConstraints, type OAuthStateRecord, type OAuthStateStore, type OAuthStateStoreOptions, type ParseCsvOptions, type ParseResult, type ParsedCsv, type PkcePair, PushdownSplit, type RefreshCoordinator, type ResolvedColumn, SHELF_PRESETS, type StoredOAuthToken, SubstrateFacilities, TABLE_PANEL_ID, TableController, type TableControllerOptions, type TableHostBridge, type TablePanelState, TablePanelView, type TablePanelViewProps, type TableRenderContext, type TableViewMode, type TableViewState, type TokenEndpointResponse, type VirtualWindow, type XenoAlertLevel, type XenoCalculatedFieldRequest, type XenoCellEdit, type XenoChartData, type XenoChartDrillDown, type XenoChartEncoding, type XenoChartExportRequest, type XenoChartHighlight, type XenoChartSeries, type XenoChartType, XenoConnection, XenoConnectionStatus, XenoConnectorFetch, XenoConnectorFileReader, XenoConnectorQueryRequest, XenoCredentialField, XenoCredentialFormSpec, XenoCredentialResult, type XenoFieldStat, type XenoMetricAlert, type XenoMetricRange, type XenoMetricSpec, type XenoMetricThreshold, type XenoMetricValue, XenoResolverErrorCode, XenoRestPaging, type XenoRowActivate, type XenoShelfEntry, type XenoShelfSpec, XenoSqlEngine, applyFieldsUi, applyPrecision, base64Url, breachSideOf, buildChartData, buildRestUrl, buildSelect, chartManifest, chartPanel, clamp, classifyHttpStatus, coerceCsvValues, columnIndexAt, columnsOf, compileForHost, computeColumnWindow, computeWindow, connectorsManifest, connectorsPanel, constraintsOfColumn, createChartPanel, createConnectorExecutor, createConnectorsPanel, createFieldsPanel, createMetricsPanel, createOAuthStateStore, createPkcePair, createRefreshCoordinator, createTablePanel, credentialSpecProblem, defaultAggregateFor, defaultEncoding, deltaToneOf, emptyFilterGroup, entityOf, escapeLikePattern, executeCsvFile, executeDuckDb, executeGraphql, executeJsonFile, executeRest, executeSql, extractJsonPath, extractRows, fieldsManifest, fieldsPanel, fieldsViewManifest, fieldsViewState, firstGraphqlError, frozenWidth, getChartRenderer, isCategorical, isFieldVisible, isFilled, isLeafFilter, isLoopbackHost, isSafeTableName, mergeRefreshResponse, metricsManifest, metricsPanel, moveCell, moveColumn, needsRefresh, nextPageToken, normalizeLayout, normalizeNumeric, offerableAggregates, offerableFilterOps, parseCsv, parseJsonBody, parseJsonPath, parseLinkHeader, parseNumeric, pruneHiddenValues, queriesEqual, quoteIdent, quoteLiteral, redirectUriFor, renderFilterGroup, resolveChartColors, resolveColumns, rowsForMark, scrollLeftToReveal, scrollTopToReveal, setChartRenderer, setColumnVisible, setColumnWidth, setFrozenCount, sniffDelimiter, suggestedShelfFor, tableManifest, tablePanel, toChartJsConfig, toExecuteError, totalWidth, uniqueTableName, unsupportedMessage, validateCredentialDraft, validateEncoding, validateLoopbackRequest, visibleFields };
+export { AGENT_HIDDEN_COMMANDS, ALL_AGGREGATES, ALL_CHART_TYPES, type BuildChartOptions, type BuildSelectOptions, type BuildSelectResult, CHART_EMPTY_FILL, CHART_PALETTE_STEPS, CHART_PANEL_ID, CONNECTORS_PANEL_ID, type CellAddress, ChartController, type ChartControllerOptions, type ChartHostBridge, type ChartPanelState, ChartPanelView, type ChartPanelViewProps, type ChartRenderContext, type ChartRenderInput, type ChartRenderOptions, type ChartRenderer, type ChartViewState, type ColumnLayout, type ColumnWindow, ConnectorExecuteInput, ConnectorExecuteOutput, ConnectorTransport, ConnectorsController, type ConnectorsControllerOptions, type ConnectorsHostBridge, ConnectorsPanelState, ConnectorsPanelView, type ConnectorsPanelViewProps, type ConnectorsRenderContext, ConnectorsViewState, type CreateChartPanelOptions, type CreateConnectorExecutorOptions, type CreateConnectorsPanelOptions, type CreateFieldsPanelOptions, type CreateMetricsPanelOptions, type CreateTablePanelOptions, type CredentialDraft, type CredentialErrors, DEFAULT_COLUMN_WIDTH, DEFAULT_PAGE_SIZE, DEFAULT_RANGES, type DeltaDirection, EMPTY_LAYOUT, EXPIRY_SKEW_MS, type ExecuteError, BEHAVIOURS as FIELDS_BEHAVIOURS, FIELDS_DECLARATION, FIELDS_PANEL_ID, FIELDS_RUNTIME_UNITS, FieldsController, type FieldsControllerOptions, type FieldsHostBridge, type FieldsPanelState, FieldsPanelView, type FieldsPanelViewProps, type FieldsRenderContext, type FieldsUiIntent, type FieldsViewColumn, type FieldsViewEntry, type FieldsViewFilter, type FieldsViewModel, type FieldsViewOptions, type FieldsViewShelf, type FieldsViewState, type HostSqlResolver, IMPLEMENTED_VIEW_MODES, type LoopbackRequest, type LoopbackVerdict, BEHAVIOURS$1 as METRICS_BEHAVIOURS, METRICS_DECLARATION, METRICS_PANEL_ID, METRICS_RUNTIME_UNITS, MIN_COLUMN_WIDTH, MONO_FILL_PALETTE, MONO_PALETTE, MetricsController, type MetricsControllerOptions, type MetricsHostBridge, type MetricsPanelState, MetricsPanelView, type MetricsPanelViewProps, type MetricsRenderContext, type MetricsUiIntent, type MetricsViewModel, type MetricsViewOptions, type MetricsViewState, type MetricsViewTile, type NumericConstraints, type OAuthStateRecord, type OAuthStateStore, type OAuthStateStoreOptions, type ParseCsvOptions, type ParseResult, type ParsedCsv, type PkcePair, PushdownSplit, type RefreshCoordinator, type ResolvedColumn, SHELF_PRESETS, type StoredOAuthToken, SubstrateFacilities, TABLE_PANEL_ID, TableController, type TableControllerOptions, type TableHostBridge, type TablePanelState, TablePanelView, type TablePanelViewProps, type TableRenderContext, type TableViewMode, type TableViewState, type TokenEndpointResponse, type VirtualWindow, type XenoAlertLevel, type XenoCalculatedFieldRequest, type XenoCellEdit, type XenoChartData, type XenoChartDrillDown, type XenoChartEncoding, type XenoChartExportRequest, type XenoChartHighlight, type XenoChartSeries, type XenoChartType, XenoConnection, XenoConnectionStatus, XenoConnectorFetch, XenoConnectorFileReader, XenoConnectorQueryRequest, XenoCredentialField, XenoCredentialFormSpec, XenoCredentialResult, type XenoFieldStat, type XenoMetricAlert, type XenoMetricRange, type XenoMetricSpec, type XenoMetricThreshold, type XenoMetricValue, XenoResolverErrorCode, XenoRestPaging, type XenoRowActivate, type XenoShelfEntry, type XenoShelfSpec, XenoSqlEngine, applyFieldsUi, applyMetricsUi, applyPrecision, base64Url, breachSideOf, buildChartData, buildRestUrl, buildSelect, chartManifest, chartPanel, clamp, classifyHttpStatus, coerceCsvValues, columnIndexAt, columnsOf, compileForHost, computeColumnWindow, computeWindow, connectorsManifest, connectorsPanel, constraintsOfColumn, createChartPanel, createConnectorExecutor, createConnectorsPanel, createFieldsPanel, createMetricsPanel, createOAuthStateStore, createPkcePair, createRefreshCoordinator, createTablePanel, credentialSpecProblem, defaultAggregateFor, defaultEncoding, deltaToneOf, emptyFilterGroup, entityOf, escapeLikePattern, executeCsvFile, executeDuckDb, executeGraphql, executeJsonFile, executeRest, executeSql, extractJsonPath, extractRows, fieldsManifest, fieldsPanel, fieldsViewManifest, fieldsViewState, firstGraphqlError, frozenWidth, getChartRenderer, isCategorical, isFieldVisible, isFilled, isLeafFilter, isLoopbackHost, isSafeTableName, mergeRefreshResponse, metricsManifest, metricsPanel, metricsViewManifest, metricsViewState, moveCell, moveColumn, needsRefresh, nextPageToken, normalizeLayout, normalizeNumeric, offerableAggregates, offerableFilterOps, parseCsv, parseJsonBody, parseJsonPath, parseLinkHeader, parseNumeric, pruneHiddenValues, queriesEqual, quoteIdent, quoteLiteral, redirectUriFor, renderFilterGroup, resolveChartColors, resolveColumns, rowsForMark, scrollLeftToReveal, scrollTopToReveal, setChartRenderer, setColumnVisible, setColumnWidth, setFrozenCount, sniffDelimiter, suggestedShelfFor, tableManifest, tablePanel, toChartJsConfig, toExecuteError, totalWidth, uniqueTableName, unsupportedMessage, validateCredentialDraft, validateEncoding, validateLoopbackRequest, visibleFields };

package/dist/data/index.js

@@ -198,8 +198,8 @@ function moveCell(from, delta, bounds) {
 }
 
 // src/data/table/numeric.ts
-function parseNumeric(text2) {
-  const trimmed = String(text2).trim();
+function parseNumeric(text3) {
+  const trimmed = String(text3).trim();
   if (trimmed.length === 0) return { ok: false, reason: "empty" };
   const match = /^[+-]?(\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/.exec(trimmed);
   if (!match) return { ok: false, reason: "nan" };
@@ -553,11 +553,11 @@ var TableController = class {
     return true;
   }
   /** Update the in-flight draft. Emits `editPreview` only when `livePreview` is on. */
-  updateDraft(text2) {
+  updateDraft(text3) {
     if (!this.editing) return;
-    this.editing = { ...this.editing, draft: text2 };
+    this.editing = { ...this.editing, draft: text3 };
     if (this.livePreview) {
-      const parsed = this.parseDraft(this.editing.columnId, text2);
+      const parsed = this.parseDraft(this.editing.columnId, text3);
       if (parsed.ok) {
         this.host.emit("editPreview", this.buildEdit(this.editing, parsed.value));
       }
@@ -609,12 +609,12 @@ var TableController = class {
     };
   }
   /** Parse a draft according to the column's declared type. */
-  parseDraft(columnId, text2) {
+  parseDraft(columnId, text3) {
     const column = this.columnById(columnId);
-    const trimmed = text2.trim();
+    const trimmed = text3.trim();
     if (column?.type === "number" || column?.type === "integer" || column?.type === "duration") {
       if (trimmed === "") return { ok: true, value: null };
-      const parsed = parseNumeric(text2);
+      const parsed = parseNumeric(text3);
       if (!parsed.ok) return { ok: false, reason: parsed.reason };
       return { ok: true, value: normalizeNumeric(parsed.value, constraintsOfColumn(column)) };
     }
@@ -631,7 +631,7 @@ var TableController = class {
         value: trimmed === "" ? [] : trimmed.split(",").map((part) => part.trim()).filter(Boolean)
       };
     }
-    return { ok: true, value: trimmed === "" ? null : text2 };
+    return { ok: true, value: trimmed === "" ? null : text3 };
   }
   rowById(rowId) {
     return this.result?.rows.find((r) => r.id === rowId);
@@ -2912,138 +2912,185 @@ var metricsManifest = {
 import { useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
   Badge as Badge3,
+  Column,
+  Delta,
   EmptyState as EmptyState3,
   ErrorState as ErrorState3,
   ScrollArea as ScrollArea2,
   SegmentedControl as SegmentedControl3,
   Sparkline,
+  Stack,
   StatTile,
   StatusBar as StatusBar3,
+  Text,
+  TileGrid,
   Toolbar as Toolbar3
 } from "@xenosystem/components/chrome";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function MetricsPanelView({
-  controller,
-  layout = "grid",
-  columns = 4,
-  sparkline = true,
-  showDelta = true,
-  emptyHint,
-  partialHint = "Some measures have not finished syncing."
-}) {
-  const state = useSyncExternalStore3(controller.subscribe, controller.getState, controller.getState);
-  const toolbar = state.ranges.length > 0 ? /* @__PURE__ */ jsx3(
-    Toolbar3,
-    {
-      left: /* @__PURE__ */ jsx3(
-        SegmentedControl3,
-        {
-          size: "sm",
-          label: "Range",
-          options: state.ranges.map((r) => ({ value: r.id, label: r.label })),
-          value: state.rangeId ?? state.ranges[0]?.id ?? "",
-          onChange: (id) => controller.setRange(id)
-        }
-      ),
-      right: state.partial ? (
-        // The honest state: rows are real, measures are still landing.
-        /* @__PURE__ */ jsx3(Badge3, { tone: "warning", title: partialHint, children: "partial" })
-      ) : void 0
-    }
-  ) : null;
-  if (state.errorMessage) {
-    return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-      toolbar,
-      /* @__PURE__ */ jsx3(ErrorState3, { title: "Could not load metrics", message: state.errorMessage })
-    ] });
-  }
-  if (state.metrics.length === 0) {
-    return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-      toolbar,
-      /* @__PURE__ */ jsx3(
-        EmptyState3,
-        {
-          title: "No metrics",
-          hint: emptyHint ?? "Configure a metric, or wire a result into this panel."
-        }
-      )
-    ] });
+
+// src/data/metrics/declaration.ts
+function metricsViewState(c, options = {}) {
+  const s = c.getState();
+  const sparkline = options.sparkline ?? true;
+  const showDelta = options.showDelta ?? true;
+  const partialHint = options.partialHint ?? "Some measures have not finished syncing.";
+  const errored = !!s.errorMessage;
+  const empty = !errored && s.metrics.length === 0;
+  return {
+    hasRanges: s.ranges.length > 0,
+    ranges: s.ranges.map((r) => ({ value: r.id, label: r.label })),
+    rangeId: s.rangeId ?? s.ranges[0]?.id ?? "",
+    partial: s.partial,
+    partialHint,
+    errorMessage: s.errorMessage ?? void 0,
+    errored,
+    empty,
+    emptyHint: options.emptyHint ?? "Configure a metric, or wire a result into this panel.",
+    ready: !errored && !empty,
+    layout: options.layout ?? "grid",
+    columns: options.columns ?? 4,
+    tiles: s.metrics.map((metric) => {
+      const level = metric.level === "critical" ? "error" : metric.level === "warn" ? "warning" : void 0;
+      const hasDelta = showDelta && metric.delta !== void 0;
+      const hasSpark = sparkline && !!metric.spark && metric.spark.length > 1;
+      return {
+        id: metric.spec.id,
+        label: metric.spec.label,
+        title: metric.spec.description,
+        // A partial result shows an em dash, never a zero — a zero is a lie the user cannot detect.
+        value: metric.partial && metric.value === null ? "\u2014" : metric.display,
+        level: String(metric.level),
+        hasLevel: level !== void 0,
+        tone: level ?? "warning",
+        hasDelta,
+        delta: metric.delta ?? 0,
+        deltaTone: metric.deltaTone,
+        partial: metric.partial === true,
+        hasSpark,
+        spark: hasSpark ? metric.spark : [],
+        sparkLabel: `${metric.spec.label} trend`
+      };
+    }),
+    countLabel: `${s.metrics.length} metric${s.metrics.length === 1 ? "" : "s"}`,
+    partialLabel: s.partial ? partialHint : void 0
+  };
+}
+function applyMetricsUi(c, intent) {
+  switch (intent.kind) {
+    case "range":
+      c.setRange(intent.rangeId);
+      break;
+    case "activate":
+      c.activate(intent.metricId);
+      break;
   }
-  const gridStyle = layout === "grid" ? { display: "grid", gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`, gap: 6 } : layout === "row" ? { display: "flex", gap: 6, overflowX: "auto" } : { display: "flex", flexDirection: "column", gap: 6 };
-  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-    toolbar,
-    /* @__PURE__ */ jsx3(ScrollArea2, { children: /* @__PURE__ */ jsx3("div", { style: { ...gridStyle, padding: 6 }, children: state.metrics.map((metric) => /* @__PURE__ */ jsx3(
-      Tile,
-      {
-        metric,
-        sparkline,
-        showDelta,
-        partialHint,
-        onActivate: () => controller.activate(metric.spec.id)
-      },
-      metric.spec.id
-    )) }) }),
-    /* @__PURE__ */ jsx3(
-      StatusBar3,
-      {
-        left: `${state.metrics.length} metric${state.metrics.length === 1 ? "" : "s"}`,
-        right: state.partial ? partialHint : void 0
-      }
-    )
-  ] });
 }
-function Tile({
-  metric,
-  sparkline,
-  showDelta,
-  partialHint,
-  onActivate
-}) {
-  const tone = metric.level === "critical" ? "error" : metric.level === "warn" ? "warning" : void 0;
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      role: "button",
-      tabIndex: 0,
-      onClick: onActivate,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onActivate();
+var metricsViewManifest = {
+  id: metricsManifest.id,
+  version: "1.0.0",
+  title: "Metrics",
+  category: "data",
+  layout: { slot: "center" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The MetricsViewModel the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind: range | activate, \u2026 } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+var EMPTY = { hasRanges: false, ranges: [], rangeId: "", partial: false, partialHint: "", errored: false, empty: true, emptyHint: "Configure a metric, or wire a result into this panel.", ready: false, layout: "grid", columns: 4, tiles: [], countLabel: "0 metrics" };
+var BEHAVIOURS = {
+  "data/metricsPanelView": (inputs) => inputs.view ?? EMPTY
+};
+var METRICS_RUNTIME_UNITS = [];
+var text = (b) => ({ component: "text", props: { text: b } });
+var ui = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var METRICS_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: metricsViewManifest,
+  behaviour: "data/metricsPanelView",
+  composition: {
+    component: "chrome/Column",
+    children: [
+      {
+        component: "chrome/Toolbar",
+        when: { input: "view.hasRanges" },
+        props: {
+          left: { node: { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Range" }, options: { input: "view.ranges" }, value: { input: "view.rangeId" } }, on: { onChange: ui("range", { rangeId: { arg: "" } }) } } },
+          right: { node: { component: "chrome/Badge", when: { input: "view.partial" }, props: { tone: { value: "warning" }, title: { input: "view.partialHint" } }, children: [text({ value: "partial" })] } }
         }
       },
-      style: { cursor: "pointer", minWidth: 0 },
-      children: /* @__PURE__ */ jsx3(
-        StatTile,
-        {
-          title: metric.spec.description,
-          label: metric.spec.label,
-          value: metric.partial && metric.value === null ? "\u2014" : metric.display,
-          icon: tone ? /* @__PURE__ */ jsx3(Badge3, { tone, children: metric.level }) : void 0,
-          sub: /* @__PURE__ */ jsxs3("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-            showDelta && metric.delta !== void 0 ? /* @__PURE__ */ jsxs3(
-              "span",
+      { component: "chrome/ErrorState", when: { input: "view.errored" }, props: { title: { value: "Could not load metrics" }, message: { input: "view.errorMessage" } } },
+      { component: "chrome/EmptyState", when: { input: "view.empty" }, props: { title: { value: "No metrics" }, hint: { input: "view.emptyHint" } } },
+      {
+        component: "chrome/ScrollArea",
+        when: { input: "view.ready" },
+        children: [
+          {
+            component: "chrome/TileGrid",
+            props: { layout: { input: "view.layout" }, columns: { input: "view.columns" } },
+            children: [
               {
-                style: {
-                  // Tone comes from deltaDirection, NEVER from the sign: a rising error rate is
-                  // not good news.
-                  color: metric.deltaTone === "good" ? "var(--xeno-success)" : metric.deltaTone === "bad" ? "var(--xeno-danger)" : void 0
+                component: "chrome/StatTile",
+                each: { input: "view.tiles", key: "id" },
+                props: {
+                  title: { item: "title" },
+                  label: { item: "label" },
+                  value: { item: "value" },
+                  icon: { node: { component: "chrome/Badge", when: { item: "hasLevel" }, props: { tone: { item: "tone" } }, children: [text({ item: "level" })] } },
+                  sub: {
+                    node: {
+                      component: "chrome/Stack",
+                      props: { direction: { value: "row" }, pad: { value: "none" } },
+                      children: [
+                        { component: "chrome/Delta", when: { item: "hasDelta" }, props: { value: { item: "delta" }, tone: { item: "deltaTone" } } },
+                        { component: "chrome/Text", when: { item: "partial" }, props: { role: { value: "meta" } }, children: [text({ input: "view.partialHint" })] },
+                        { component: "chrome/Sparkline", when: { item: "hasSpark" }, props: { data: { item: "spark" }, label: { item: "sparkLabel" } } }
+                      ]
+                    }
+                  }
                 },
-                children: [
-                  metric.delta > 0 ? "\u25B2" : "\u25BC",
-                  " ",
-                  Math.abs(metric.delta * 100).toFixed(1),
-                  "%"
-                ]
+                on: { onActivate: ui("activate", { metricId: { item: "id" } }) }
               }
-            ) : null,
-            metric.partial ? /* @__PURE__ */ jsx3("span", { style: { opacity: 0.6 }, children: partialHint }) : null,
-            sparkline && metric.spark && metric.spark.length > 1 ? /* @__PURE__ */ jsx3(Sparkline, { data: metric.spark, label: `${metric.spec.label} trend` }) : null
-          ] })
-        }
-      )
-    }
-  );
+            ]
+          }
+        ]
+      },
+      { component: "chrome/StatusBar", when: { input: "view.ready" }, props: { left: { input: "view.countLabel" }, right: { input: "view.partialLabel" } } }
+    ]
+  }
+};
+
+// src/data/metrics/react/MetricsPanelView.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function MetricsPanelView({ controller, ...options }) {
+  useSyncExternalStore3(controller.subscribe, controller.getState, controller.getState);
+  const view = metricsViewState(controller, options);
+  const ui3 = (intent) => applyMetricsUi(controller, intent);
+  return /* @__PURE__ */ jsxs3(Column, { children: [
+    view.hasRanges ? /* @__PURE__ */ jsx3(
+      Toolbar3,
+      {
+        left: /* @__PURE__ */ jsx3(SegmentedControl3, { size: "sm", label: "Range", options: view.ranges, value: view.rangeId, onChange: (rangeId) => ui3({ kind: "range", rangeId }) }),
+        right: view.partial ? /* @__PURE__ */ jsx3(Badge3, { tone: "warning", title: view.partialHint, children: "partial" }) : null
+      }
+    ) : null,
+    view.errored ? /* @__PURE__ */ jsx3(ErrorState3, { title: "Could not load metrics", message: view.errorMessage }) : null,
+    view.empty ? /* @__PURE__ */ jsx3(EmptyState3, { title: "No metrics", hint: view.emptyHint }) : null,
+    view.ready ? /* @__PURE__ */ jsx3(ScrollArea2, { children: /* @__PURE__ */ jsx3(TileGrid, { layout: view.layout, columns: view.columns, children: view.tiles.map((tile) => /* @__PURE__ */ jsx3(
+      StatTile,
+      {
+        title: tile.title,
+        label: tile.label,
+        value: tile.value,
+        icon: tile.hasLevel ? /* @__PURE__ */ jsx3(Badge3, { tone: tile.tone, children: tile.level }) : null,
+        sub: /* @__PURE__ */ jsxs3(Stack, { direction: "row", pad: "none", children: [
+          tile.hasDelta ? /* @__PURE__ */ jsx3(Delta, { value: tile.delta, tone: tile.deltaTone }) : null,
+          tile.partial ? /* @__PURE__ */ jsx3(Text, { role: "meta", children: view.partialHint }) : null,
+          tile.hasSpark ? /* @__PURE__ */ jsx3(Sparkline, { data: tile.spark, label: tile.sparkLabel }) : null
+        ] }),
+        onActivate: () => ui3({ kind: "activate", metricId: tile.id })
+      },
+      tile.id
+    )) }) }) : null,
+    view.ready ? /* @__PURE__ */ jsx3(StatusBar3, { left: view.countLabel, right: view.partialLabel }) : null
+  ] });
 }
 
 // src/data/metrics/panel.ts
@@ -3240,7 +3287,7 @@ function emptyFilterGroup() {
 function offerableFilterOps(column, sourceOps = []) {
   const common = ["eq", "ne", "isEmpty", "isNotEmpty", "in", "notIn"];
   const ordered = ["gt", "gte", "lt", "lte", "between"];
-  const text2 = ["contains", "notContains", "startsWith", "endsWith"];
+  const text3 = ["contains", "notContains", "startsWith", "endsWith"];
   const temporal = ["relative"];
   let ops = [...common];
   switch (column?.type) {
@@ -3258,10 +3305,10 @@ function offerableFilterOps(column, sourceOps = []) {
     case "url":
     case "select":
     case "multiselect":
-      ops = [...ops, ...text2];
+      ops = [...ops, ...text3];
       break;
     default:
-      ops = [...ops, ...text2, ...ordered];
+      ops = [...ops, ...text3, ...ordered];
   }
   if (sourceOps.length === 0) return ops;
   return ops.filter((op) => sourceOps.includes(op));
@@ -3892,7 +3939,7 @@ var fieldsManifest = {
 import { useSyncExternalStore as useSyncExternalStore4 } from "react";
 import {
   Badge as Badge4,
-  Column,
+  Column as Column2,
   EmptyState as EmptyState4,
   IconButton as IconButton3,
   Note,
@@ -4027,13 +4074,13 @@ var fieldsViewManifest = {
   outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, \u2026 } \u2014 applied by the runtime to the controller." }],
   commands: []
 };
-var EMPTY = { hasColumns: false, noColumns: true, sampled: false, manualApply: false, applyDisabled: true, columns: [], shelves: [], filters: [], filterCount: 0, hasFilters: false, noFilters: true, combinator: "and", countLabel: "0 fields" };
-var BEHAVIOURS = {
-  "data/fieldsPanelView": (inputs) => inputs.view ?? EMPTY
+var EMPTY2 = { hasColumns: false, noColumns: true, sampled: false, manualApply: false, applyDisabled: true, columns: [], shelves: [], filters: [], filterCount: 0, hasFilters: false, noFilters: true, combinator: "and", countLabel: "0 fields" };
+var BEHAVIOURS2 = {
+  "data/fieldsPanelView": (inputs) => inputs.view ?? EMPTY2
 };
 var FIELDS_RUNTIME_UNITS = [];
-var text = (b) => ({ component: "text", props: { text: b } });
-var ui = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var text2 = (b) => ({ component: "text", props: { text: b } });
+var ui2 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
 var removeButton = (label, on) => ({
   component: "chrome/IconButton",
   props: { size: { value: "sm" }, icon: { node: { component: "icons/Close", props: { size: { value: 11 } } } }, label },
@@ -4054,14 +4101,14 @@ var FIELDS_DECLARATION = {
           {
             component: "chrome/Toolbar",
             props: {
-              left: { node: { component: "chrome/Badge", when: { input: "view.sampled" }, props: { tone: { value: "warning" }, title: { input: "view.sampleWarning" } }, children: [text({ value: "sampled schema" })] } },
+              left: { node: { component: "chrome/Badge", when: { input: "view.sampled" }, props: { tone: { value: "warning" }, title: { input: "view.sampleWarning" } }, children: [text2({ value: "sampled schema" })] } },
               right: {
                 node: {
                   component: "chrome/ToolbarGroup",
                   props: { end: { value: true } },
                   children: [
-                    { component: "chrome/TextButton", on: { onClick: ui("autoAssign") }, children: [text({ value: "Auto-assign" })] },
-                    { component: "chrome/TextButton", when: { input: "view.manualApply" }, props: { strong: { value: true }, disabled: { input: "view.applyDisabled" } }, on: { onClick: ui("apply") }, children: [text({ value: "Apply" })] }
+                    { component: "chrome/TextButton", on: { onClick: ui2("autoAssign") }, children: [text2({ value: "Auto-assign" })] },
+                    { component: "chrome/TextButton", when: { input: "view.manualApply" }, props: { strong: { value: true }, disabled: { input: "view.applyDisabled" } }, on: { onClick: ui2("apply") }, children: [text2({ value: "Apply" })] }
                   ]
                 }
               }
@@ -4081,8 +4128,8 @@ var FIELDS_DECLARATION = {
                       {
                         component: "chrome/Row",
                         each: { input: "view.columns", key: "id" },
-                        props: { label: { item: "name" }, meta: { item: "role" }, selected: { item: "focused" }, trailing: { node: { component: "chrome/Badge", when: { item: "stat" }, props: { title: { item: "statTitle" } }, children: [text({ item: "stat" })] } } },
-                        on: { onClick: ui("focus", { columnId: { item: "id" } }) }
+                        props: { label: { item: "name" }, meta: { item: "role" }, selected: { item: "focused" }, trailing: { node: { component: "chrome/Badge", when: { item: "stat" }, props: { title: { item: "statTitle" } }, children: [text2({ item: "stat" })] } } },
+                        on: { onClick: ui2("focus", { columnId: { item: "id" } }) }
                       }
                     ]
                   }
@@ -4091,9 +4138,9 @@ var FIELDS_DECLARATION = {
               {
                 component: "chrome/Section",
                 each: { input: "view.shelves", key: "id" },
-                props: { title: { item: "label" }, flush: { value: true }, badge: { node: { component: "chrome/Badge", when: { item: "hasEntries" }, children: [text({ item: "count" })] } } },
+                props: { title: { item: "label" }, flush: { value: true }, badge: { node: { component: "chrome/Badge", when: { item: "hasEntries" }, children: [text2({ item: "count" })] } } },
                 children: [
-                  { component: "chrome/Note", when: { item: "empty" }, children: [text({ item: "hint" })] },
+                  { component: "chrome/Note", when: { item: "empty" }, children: [text2({ item: "hint" })] },
                   {
                     component: "chrome/RowList",
                     when: { item: "hasEntries" },
@@ -4108,13 +4155,13 @@ var FIELDS_DECLARATION = {
                             node: {
                               component: "fragment",
                               children: [
-                                { component: "chrome/Select", when: { item: "aggregated" }, props: { size: { value: "sm" }, label: { value: "Aggregate" }, options: { item: "aggregates" }, value: { item: "fn" } }, on: { onChange: ui("aggregate", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" }, fn: { arg: "" } }) } },
-                                { component: "chrome/TextButton", when: { item: "sortable" }, on: { onClick: ui("direction", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" } }) }, children: [text({ item: "direction" })] },
-                                { component: "chrome/Badge", when: { item: "granularity" }, children: [text({ item: "granularity" })] }
+                                { component: "chrome/Select", when: { item: "aggregated" }, props: { size: { value: "sm" }, label: { value: "Aggregate" }, options: { item: "aggregates" }, value: { item: "fn" } }, on: { onChange: ui2("aggregate", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" }, fn: { arg: "" } }) } },
+                                { component: "chrome/TextButton", when: { item: "sortable" }, on: { onClick: ui2("direction", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" } }) }, children: [text2({ item: "direction" })] },
+                                { component: "chrome/Badge", when: { item: "granularity" }, children: [text2({ item: "granularity" })] }
                               ]
                             }
                           },
-                          trailing: { node: removeButton({ item: "removeLabel" }, ui("remove", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" } })) }
+                          trailing: { node: removeButton({ item: "removeLabel" }, ui2("remove", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" } })) }
                         }
                       }
                     ]
@@ -4126,11 +4173,11 @@ var FIELDS_DECLARATION = {
                 props: {
                   title: { value: "Filters" },
                   flush: { value: true },
-                  badge: { node: { component: "chrome/Badge", when: { input: "view.hasFilters" }, children: [text({ input: "view.filterCount" })] } },
-                  actions: { node: { component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "icons/Plus", props: { size: { value: 11 } } } }, label: { value: "Add filter" } }, on: { onClick: ui("addFilter") } } }
+                  badge: { node: { component: "chrome/Badge", when: { input: "view.hasFilters" }, children: [text2({ input: "view.filterCount" })] } },
+                  actions: { node: { component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "icons/Plus", props: { size: { value: 11 } } } }, label: { value: "Add filter" } }, on: { onClick: ui2("addFilter") } } }
                 },
                 children: [
-                  { component: "chrome/Note", when: { input: "view.noFilters" }, children: [text({ value: "No filters. Everything passes." })] },
+                  { component: "chrome/Note", when: { input: "view.noFilters" }, children: [text2({ value: "No filters. Everything passes." })] },
                   {
                     component: "chrome/RowList",
                     when: { input: "view.hasFilters" },
@@ -4140,8 +4187,8 @@ var FIELDS_DECLARATION = {
                         each: { input: "view.filters", key: "key" },
                         props: {
                           label: { item: "label" },
-                          meta: { node: { component: "chrome/Select", when: { item: "leaf" }, props: { size: { value: "sm" }, label: { value: "Operator" }, options: { item: "ops" }, value: { item: "op" } }, on: { onChange: ui("filterOp", { index: { item: "index" }, op: { arg: "" } }) } } },
-                          trailing: { node: removeButton({ item: "removeLabel" }, ui("removeFilter", { index: { item: "index" } })) }
+                          meta: { node: { component: "chrome/Select", when: { item: "leaf" }, props: { size: { value: "sm" }, label: { value: "Operator" }, options: { item: "ops" }, value: { item: "op" } }, on: { onChange: ui2("filterOp", { index: { item: "index" }, op: { arg: "" } }) } } },
+                          trailing: { node: removeButton({ item: "removeLabel" }, ui2("removeFilter", { index: { item: "index" } })) }
                         }
                       }
                     ]
@@ -4150,8 +4197,8 @@ var FIELDS_DECLARATION = {
                     component: "chrome/Toolbar",
                     props: {
                       divided: { value: false },
-                      left: { node: { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Combinator" }, options: { value: COMBINATORS }, value: { input: "view.combinator" } }, on: { onChange: ui("combinator", { combinator: { arg: "" } }) } } },
-                      right: { node: { component: "chrome/TextButton", on: { onClick: ui("addGroup") }, children: [text({ value: "+ group" })] } }
+                      left: { node: { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Combinator" }, options: { value: COMBINATORS }, value: { input: "view.combinator" } }, on: { onChange: ui2("combinator", { combinator: { arg: "" } }) } } },
+                      right: { node: { component: "chrome/TextButton", on: { onClick: ui2("addGroup") }, children: [text2({ value: "+ group" })] } }
                     }
                   }
                 ]
@@ -4173,18 +4220,18 @@ var COMBINATORS2 = [{ value: "and", label: "All" }, { value: "or", label: "Any"
 function FieldsPanelView({ controller, showStats, manualApply }) {
   useSyncExternalStore4(controller.subscribe, controller.getState, controller.getState);
   const view = fieldsViewState(controller, { showStats, manualApply });
-  const ui2 = (intent) => applyFieldsUi(controller, intent);
+  const ui3 = (intent) => applyFieldsUi(controller, intent);
   if (view.noColumns) {
     return /* @__PURE__ */ jsx4(EmptyState4, { title: "No fields", hint: "Connect a source \u2014 its columns appear here, ready to drop onto a shelf." });
   }
-  return /* @__PURE__ */ jsxs4(Column, { children: [
+  return /* @__PURE__ */ jsxs4(Column2, { children: [
     /* @__PURE__ */ jsx4(
       Toolbar4,
       {
         left: view.sampled ? /* @__PURE__ */ jsx4(Badge4, { tone: "warning", title: view.sampleWarning, children: "sampled schema" }) : null,
         right: /* @__PURE__ */ jsxs4(ToolbarGroup3, { end: true, children: [
-          /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui2({ kind: "autoAssign" }), children: "Auto-assign" }),
-          view.manualApply ? /* @__PURE__ */ jsx4(TextButton, { strong: true, disabled: view.applyDisabled, onClick: () => ui2({ kind: "apply" }), children: "Apply" }) : null
+          /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui3({ kind: "autoAssign" }), children: "Auto-assign" }),
+          view.manualApply ? /* @__PURE__ */ jsx4(TextButton, { strong: true, disabled: view.applyDisabled, onClick: () => ui3({ kind: "apply" }), children: "Apply" }) : null
         ] })
       }
     ),
@@ -4196,7 +4243,7 @@ function FieldsPanelView({ controller, showStats, manualApply }) {
           meta: column.role,
           selected: column.focused,
           trailing: column.stat ? /* @__PURE__ */ jsx4(Badge4, { title: column.statTitle, children: column.stat }) : null,
-          onClick: () => ui2({ kind: "focus", columnId: column.id })
+          onClick: () => ui3({ kind: "focus", columnId: column.id })
         },
         column.id
       )) }) }),
@@ -4208,11 +4255,11 @@ function FieldsPanelView({ controller, showStats, manualApply }) {
             label: entry.label,
             dimmed: entry.suggested,
             meta: /* @__PURE__ */ jsxs4(Fragment2, { children: [
-              entry.aggregated ? /* @__PURE__ */ jsx4(Select, { size: "sm", label: "Aggregate", options: entry.aggregates, value: entry.fn, onChange: (fn) => ui2({ kind: "aggregate", shelfId: entry.shelfId, columnId: entry.columnId, fn }) }) : null,
-              entry.sortable ? /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui2({ kind: "direction", shelfId: entry.shelfId, columnId: entry.columnId }), children: entry.direction }) : null,
+              entry.aggregated ? /* @__PURE__ */ jsx4(Select, { size: "sm", label: "Aggregate", options: entry.aggregates, value: entry.fn, onChange: (fn) => ui3({ kind: "aggregate", shelfId: entry.shelfId, columnId: entry.columnId, fn }) }) : null,
+              entry.sortable ? /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui3({ kind: "direction", shelfId: entry.shelfId, columnId: entry.columnId }), children: entry.direction }) : null,
               entry.granularity ? /* @__PURE__ */ jsx4(Badge4, { children: entry.granularity }) : null
             ] }),
-            trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: entry.removeLabel, onClick: () => ui2({ kind: "remove", shelfId: entry.shelfId, columnId: entry.columnId }) })
+            trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: entry.removeLabel, onClick: () => ui3({ kind: "remove", shelfId: entry.shelfId, columnId: entry.columnId }) })
           },
           entry.columnId
         )) }) : null
@@ -4223,15 +4270,15 @@ function FieldsPanelView({ controller, showStats, manualApply }) {
           title: "Filters",
           flush: true,
           badge: view.hasFilters ? /* @__PURE__ */ jsx4(Badge4, { children: view.filterCount }) : null,
-          actions: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(PlusGlyph, { size: 11 }), label: "Add filter", onClick: () => ui2({ kind: "addFilter" }) }),
+          actions: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(PlusGlyph, { size: 11 }), label: "Add filter", onClick: () => ui3({ kind: "addFilter" }) }),
           children: [
             view.noFilters ? /* @__PURE__ */ jsx4(Note, { children: "No filters. Everything passes." }) : null,
             view.hasFilters ? /* @__PURE__ */ jsx4(RowList, { children: view.filters.map((filter) => /* @__PURE__ */ jsx4(
               Row,
               {
                 label: filter.label,
-                meta: filter.leaf ? /* @__PURE__ */ jsx4(Select, { size: "sm", label: "Operator", options: filter.ops, value: filter.op, onChange: (op) => ui2({ kind: "filterOp", index: filter.index, op }) }) : null,
-                trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: filter.removeLabel, onClick: () => ui2({ kind: "removeFilter", index: filter.index }) })
+                meta: filter.leaf ? /* @__PURE__ */ jsx4(Select, { size: "sm", label: "Operator", options: filter.ops, value: filter.op, onChange: (op) => ui3({ kind: "filterOp", index: filter.index, op }) }) : null,
+                trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: filter.removeLabel, onClick: () => ui3({ kind: "removeFilter", index: filter.index }) })
               },
               filter.key
             )) }) : null,
@@ -4239,8 +4286,8 @@ function FieldsPanelView({ controller, showStats, manualApply }) {
               Toolbar4,
               {
                 divided: false,
-                left: /* @__PURE__ */ jsx4(SegmentedControl4, { size: "sm", label: "Combinator", options: COMBINATORS2, value: view.combinator, onChange: (combinator) => ui2({ kind: "combinator", combinator }) }),
-                right: /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui2({ kind: "addGroup" }), children: "+ group" })
+                left: /* @__PURE__ */ jsx4(SegmentedControl4, { size: "sm", label: "Combinator", options: COMBINATORS2, value: view.combinator, onChange: (combinator) => ui3({ kind: "combinator", combinator }) }),
+                right: /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui3({ kind: "addGroup" }), children: "+ group" })
               }
             )
           ]
@@ -5376,10 +5423,10 @@ function parseJsonPath(path) {
   }
   return steps;
 }
-function findBracketEnd(text2, start) {
+function findBracketEnd(text3, start) {
   let quote = null;
-  for (let i = start + 1; i < text2.length; i += 1) {
-    const char = text2[i];
+  for (let i = start + 1; i < text3.length; i += 1) {
+    const char = text3[i];
     if (quote) {
       if (char === "\\") i += 1;
       else if (char === quote) quote = null;
@@ -5803,9 +5850,9 @@ function firstGraphqlError(errors) {
 }
 
 // src/data/connectors/executors/csv.ts
-function sniffDelimiter(text2) {
+function sniffDelimiter(text3) {
   const candidates = [",", ";", "	", "|"];
-  const line = firstLogicalLine(text2);
+  const line = firstLogicalLine(text3);
   let best = ",";
   let bestCount = 0;
   for (const candidate of candidates) {
@@ -5827,21 +5874,21 @@ function sniffDelimiter(text2) {
   }
   return best;
 }
-function firstLogicalLine(text2) {
+function firstLogicalLine(text3) {
   let inQuotes = false;
-  for (let i = 0; i < text2.length; i += 1) {
-    const char = text2[i];
+  for (let i = 0; i < text3.length; i += 1) {
+    const char = text3[i];
     if (char === '"') {
-      if (inQuotes && text2[i + 1] === '"') i += 1;
+      if (inQuotes && text3[i + 1] === '"') i += 1;
       else inQuotes = !inQuotes;
     } else if ((char === "\n" || char === "\r") && !inQuotes) {
-      return text2.slice(0, i);
+      return text3.slice(0, i);
     }
   }
-  return text2;
+  return text3;
 }
-function parseCsv(text2, options = {}) {
-  const source = text2.charCodeAt(0) === 65279 ? text2.slice(1) : text2;
+function parseCsv(text3, options = {}) {
+  const source = text3.charCodeAt(0) === 65279 ? text3.slice(1) : text3;
   const delimiter = options.delimiter && options.delimiter.length > 0 ? options.delimiter : sniffDelimiter(source);
   const quote = options.quote && options.quote.length > 0 ? options.quote : '"';
   const hasHeader = options.hasHeader ?? true;
@@ -5876,17 +5923,17 @@ function dedupe(names) {
     return count === 0 ? name : `${name}_${count + 1}`;
   });
 }
-function scanRecords(text2, delimiter, quote) {
+function scanRecords(text3, delimiter, quote) {
   const records = [];
   let fields = [];
   let field = "";
   let inQuotes = false;
   let i = 0;
-  while (i < text2.length) {
-    const char = text2[i];
+  while (i < text3.length) {
+    const char = text3[i];
     if (inQuotes) {
       if (char === quote) {
-        if (text2[i + 1] === quote) {
+        if (text3[i + 1] === quote) {
           field += quote;
           i += 2;
           continue;
@@ -5904,7 +5951,7 @@ function scanRecords(text2, delimiter, quote) {
       i += 1;
       continue;
     }
-    if (text2.startsWith(delimiter, i)) {
+    if (text3.startsWith(delimiter, i)) {
       fields.push(field);
       field = "";
       i += delimiter.length;
@@ -5915,7 +5962,7 @@ function scanRecords(text2, delimiter, quote) {
       records.push(fields);
       fields = [];
       field = "";
-      i += char === "\r" && text2[i + 1] === "\n" ? 2 : 1;
+      i += char === "\r" && text3[i + 1] === "\n" ? 2 : 1;
       continue;
     }
     field += char;
@@ -7066,14 +7113,17 @@ export {
   DEFAULT_RANGES,
   EMPTY_LAYOUT,
   EXPIRY_SKEW_MS,
-  BEHAVIOURS as FIELDS_BEHAVIOURS,
+  BEHAVIOURS2 as FIELDS_BEHAVIOURS,
   FIELDS_DECLARATION,
   FIELDS_PANEL_ID,
   FIELDS_RUNTIME_UNITS,
   FieldsController,
   FieldsPanelView,
   IMPLEMENTED_VIEW_MODES,
+  BEHAVIOURS as METRICS_BEHAVIOURS,
+  METRICS_DECLARATION,
   METRICS_PANEL_ID,
+  METRICS_RUNTIME_UNITS,
   MIN_COLUMN_WIDTH,
   MONO_FILL_PALETTE,
   MONO_PALETTE,
@@ -7085,6 +7135,7 @@ export {
   TableController,
   TablePanelView,
   applyFieldsUi,
+  applyMetricsUi,
   applyPrecision,
   base64Url,
   breachSideOf,
@@ -7150,6 +7201,8 @@ export {
   mergeRefreshResponse,
   metricsManifest,
   metricsPanel,
+  metricsViewManifest,
+  metricsViewState,
   moveCell,
   moveColumn,
   needsRefresh,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.13.9",
+  "version": "0.13.10",
   "description": "XENO Blocks — rung 3 of the front ladder: components composed into a contract-bearing unit (manifest: ports, intents, commands, agent surface), rendered by @xenosystem/workbench. ONE package, one subpath per family (/auth, /edit, /data, /time, /ops, /trust, /agent), one named export per block — XENO PACKAGE NAMING - STANDARD.md.",
   "license": "UNLICENSED",
   "type": "module",
@@ -64,7 +64,7 @@
   "peerDependencies": {
     "@duckdb/duckdb-wasm": ">=1.28.0",
     "@xenosystem/block-sdk": ">=0.3.4 <1",
-    "@xenosystem/components": ">=0.20.0 <1",
+    "@xenosystem/components": ">=0.21.0 <1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements": ">=0.0.1",
     "@xenosystem/elements-react": ">=0.0.1",
@@ -81,7 +81,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@xenosystem/block-sdk": "^0.3.4",
-    "@xenosystem/components": "^0.20.0",
+    "@xenosystem/components": "^0.21.0",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements": "0.0.1",
     "@xenosystem/elements-react": "0.0.1",