@xenosystem/blocks 0.13.8 → 0.13.10

package/dist/data/index.js

@@ -8,8 +8,7 @@ import {
 } from "../chunk-DJJGZ6U4.js";
 import {
   ICONS
-} from "../chunk-BNALWAAQ.js";
-import "../chunk-GTN5EDY3.js";
+} from "../chunk-W4PTX2Y4.js";
 import {
   ChevronGlyph,
   DownloadGlyph,
@@ -199,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" };
@@ -554,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));
       }
@@ -610,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)) };
     }
@@ -632,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);
@@ -2913,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
@@ -3241,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) {
@@ -3259,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));
@@ -3893,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,
@@ -4028,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 },
@@ -4055,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" })] }
                   ]
                 }
               }
@@ -4082,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" } }) }
                       }
                     ]
                   }
@@ -4092,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" },
@@ -4109,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" } })) }
                         }
                       }
                     ]
@@ -4127,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" },
@@ -4141,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" } })) }
                         }
                       }
                     ]
@@ -4151,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" })] } }
                     }
                   }
                 ]
@@ -4174,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
         ] })
       }
     ),
@@ -4197,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
       )) }) }),
@@ -4209,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
@@ -4224,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,
@@ -4240,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" })
               }
             )
           ]
@@ -5377,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;
@@ -5804,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) {
@@ -5828,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;
@@ -5877,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;
@@ -5905,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;
@@ -5916,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;
@@ -7067,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,
@@ -7086,6 +7135,7 @@ export {
   TableController,
   TablePanelView,
   applyFieldsUi,
+  applyMetricsUi,
   applyPrecision,
   base64Url,
   breachSideOf,
@@ -7151,6 +7201,8 @@ export {
   mergeRefreshResponse,
   metricsManifest,
   metricsPanel,
+  metricsViewManifest,
+  metricsViewState,
   moveCell,
   moveColumn,
   needsRefresh,