@xenosystem/blocks 0.13.10 → 0.13.12

package/dist/data/index.js

@@ -6,17 +6,14 @@ import {
   quoteLiteral,
   renderFilterGroup
 } from "../chunk-DJJGZ6U4.js";
-import {
-  ICONS
-} from "../chunk-W4PTX2Y4.js";
 import {
   ChevronGlyph,
-  DownloadGlyph,
+  ICONS,
   PlugGlyph,
   RefreshGlyph,
   SortAscGlyph,
   SortDescGlyph
-} from "../chunk-K7YLLV2W.js";
+} from "../chunk-5BVZMAD2.js";
 import "../chunk-2KG3PWR4.js";
 
 // src/data/table/panel.ts
@@ -198,8 +195,8 @@ function moveCell(from, delta, bounds) {
 }
 
 // src/data/table/numeric.ts
-function parseNumeric(text3) {
-  const trimmed = String(text3).trim();
+function parseNumeric(text4) {
+  const trimmed = String(text4).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 +550,11 @@ var TableController = class {
     return true;
   }
   /** Update the in-flight draft. Emits `editPreview` only when `livePreview` is on. */
-  updateDraft(text3) {
+  updateDraft(text4) {
     if (!this.editing) return;
-    this.editing = { ...this.editing, draft: text3 };
+    this.editing = { ...this.editing, draft: text4 };
     if (this.livePreview) {
-      const parsed = this.parseDraft(this.editing.columnId, text3);
+      const parsed = this.parseDraft(this.editing.columnId, text4);
       if (parsed.ok) {
         this.host.emit("editPreview", this.buildEdit(this.editing, parsed.value));
       }
@@ -609,12 +606,12 @@ var TableController = class {
     };
   }
   /** Parse a draft according to the column's declared type. */
-  parseDraft(columnId, text3) {
+  parseDraft(columnId, text4) {
     const column = this.columnById(columnId);
-    const trimmed = text3.trim();
+    const trimmed = text4.trim();
     if (column?.type === "number" || column?.type === "integer" || column?.type === "duration") {
       if (trimmed === "") return { ok: true, value: null };
-      const parsed = parseNumeric(text3);
+      const parsed = parseNumeric(text4);
       if (!parsed.ok) return { ok: false, reason: parsed.reason };
       return { ok: true, value: normalizeNumeric(parsed.value, constraintsOfColumn(column)) };
     }
@@ -631,7 +628,7 @@ var TableController = class {
         value: trimmed === "" ? [] : trimmed.split(",").map((part) => part.trim()).filter(Boolean)
       };
     }
-    return { ok: true, value: trimmed === "" ? null : text3 };
+    return { ok: true, value: trimmed === "" ? null : text4 };
   }
   rowById(rowId) {
     return this.result?.rows.find((r) => r.id === rowId);
@@ -2205,16 +2202,7 @@ var chartManifest = {
 
 // src/data/chart/react/ChartPanelView.tsx
 import { useEffect as useEffect2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2 } from "react";
-import {
-  Badge as Badge2,
-  EmptyState as EmptyState2,
-  ErrorState as ErrorState2,
-  IconButton as IconButton2,
-  SegmentedControl as SegmentedControl2,
-  StatusBar as StatusBar2,
-  Toolbar as Toolbar2,
-  ToolbarGroup as ToolbarGroup2
-} from "@xenosystem/components/chrome";
+import { Badge as Badge2, Column, EmptyState as EmptyState2, ErrorState as ErrorState2, IconButton as IconButton2, PlotSurface, SegmentedControl as SegmentedControl2, StatusBar as StatusBar2, Toolbar as Toolbar2, ToolbarGroup as ToolbarGroup2 } from "@xenosystem/components/chrome";
 
 // src/data/chart/renderer.ts
 var renderer = null;
@@ -2268,19 +2256,102 @@ function shade(index) {
   return MONO_PALETTE[index % MONO_PALETTE.length];
 }
 
+// src/data/chart/declaration.ts
+var CHART_TYPE_LABELS = { bar: "Bar", horizontalBar: "H-Bar", line: "Line", area: "Area", scatter: "Scatter", pie: "Pie", doughnut: "Ring" };
+var DEFAULT_CHART_OPTIONS = { showLegend: true, showGrid: true, showTooltip: true, stacked: false, smoothing: 0 };
+function chartViewState(c, options = {}) {
+  const s = c.getState();
+  const errored = !!s.errorMessage;
+  const empty = !errored && s.empty;
+  const unplottable = !errored && !empty && !!s.encodingProblem;
+  const noRenderer = !errored && !empty && !unplottable && !getChartRenderer();
+  return {
+    types: s.allowedTypes.map((t) => ({ value: t, label: CHART_TYPE_LABELS[t] ?? t })),
+    type: s.encoding.type,
+    partial: s.partial,
+    aggregating: !!s.data?.tooDense,
+    aggregatingHint: s.data?.tooDense ? `${s.data.tooDense.points} points exceeds the ${s.data.tooDense.limit} plot limit \u2014 an aggregated query was requested.` : void 0,
+    errorMessage: s.errorMessage ?? void 0,
+    errored,
+    empty,
+    emptyHint: options.emptyHint ?? "Wire a result into this chart to plot it.",
+    unplottable,
+    encodingProblem: s.encodingProblem ?? void 0,
+    noRenderer,
+    plot: !errored && !empty && !unplottable && !noRenderer,
+    countLabel: s.data ? `${s.data.series.length} series \xB7 ${s.data.labels.length} points` : void 0,
+    highlightLabel: s.highlightedRowIds.length > 0 ? `${s.highlightedRowIds.length} highlighted` : void 0
+  };
+}
+function applyChartUi(c, intent) {
+  switch (intent.kind) {
+    case "type":
+      c.setType(intent.type);
+      break;
+    case "export":
+      c.requestExport("png");
+      break;
+  }
+}
+var chartViewManifest = {
+  id: chartManifest.id,
+  version: "1.0.0",
+  title: "Chart",
+  category: "data",
+  layout: { slot: "center" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The ChartViewModel the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind: type | export, \u2026 } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+var EMPTY = { types: [], type: "bar", partial: false, aggregating: false, errored: false, empty: true, emptyHint: "Wire a result into this chart to plot it.", unplottable: false, noRenderer: false, plot: false };
+var BEHAVIOURS = {
+  "data/chartPanelView": (inputs) => inputs.view ?? EMPTY
+};
+var CHART_RUNTIME_UNITS = ["chart/Plot"];
+var text = (b) => ({ component: "text", props: { text: b } });
+var ui = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var CHART_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: chartViewManifest,
+  behaviour: "data/chartPanelView",
+  composition: {
+    component: "chrome/Column",
+    children: [
+      {
+        component: "chrome/Toolbar",
+        props: {
+          left: { node: { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Chart type" }, options: { input: "view.types" }, value: { input: "view.type" } }, on: { onChange: ui("type", { type: { arg: "" } }) } } },
+          right: {
+            node: {
+              component: "chrome/ToolbarGroup",
+              props: { end: { value: true } },
+              children: [
+                { component: "chrome/Badge", when: { input: "view.partial" }, props: { tone: { value: "warning" }, title: { value: "Some measures have not synced yet." } }, children: [text({ value: "partial" })] },
+                { component: "chrome/Badge", when: { input: "view.aggregating" }, props: { tone: { value: "warning" }, title: { input: "view.aggregatingHint" } }, children: [text({ value: "aggregating" })] },
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Download" } }, label: { value: "Export chart" } }, on: { onClick: ui("export") } }
+              ]
+            }
+          }
+        }
+      },
+      { component: "chrome/ErrorState", when: { input: "view.errored" }, props: { title: { value: "Could not load data" }, message: { input: "view.errorMessage" } } },
+      { component: "chrome/EmptyState", when: { input: "view.empty" }, props: { title: { value: "No data" }, hint: { input: "view.emptyHint" } } },
+      { component: "chrome/EmptyState", when: { input: "view.unplottable" }, props: { title: { value: "Nothing to plot" }, hint: { input: "view.encodingProblem" } } },
+      { component: "chrome/EmptyState", when: { input: "view.noRenderer" }, props: { title: { value: "No renderer installed" }, hint: { value: "Call setChartRenderer() with a Chart.js (or other) renderer \u2014 the panel ships the model, the host ships the marks." } } },
+      { component: "chart/Plot", when: { input: "view.plot" } },
+      { component: "chrome/StatusBar", props: { left: { input: "view.countLabel" }, right: { input: "view.highlightLabel" } } }
+    ]
+  }
+};
+
 // src/data/chart/react/ChartPanelView.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var DEFAULT_OPTIONS = {
-  showLegend: true,
-  showGrid: true,
-  showTooltip: true,
-  stacked: false,
-  smoothing: 0
-};
-function ChartPanelView({ controller, options, emptyHint }) {
+var DownloadGlyph = ICONS["icons/Download"];
+function ChartPlot({ controller, options }) {
   const state = useSyncExternalStore2(controller.subscribe, controller.getState, controller.getState);
   const plotRef = useRef2(null);
-  const resolved = { ...DEFAULT_OPTIONS, ...options };
+  const resolved = { ...DEFAULT_CHART_OPTIONS, ...options };
+  const resolvedKey = JSON.stringify(resolved);
   useEffect2(() => {
     const element = plotRef.current;
     const renderer2 = getChartRenderer();
@@ -2293,83 +2364,38 @@ function ChartPanelView({ controller, options, emptyHint }) {
       highlightedRowIds: state.highlightedRowIds,
       onMarkActivate: (label, seriesId) => controller.activateMark(label, seriesId)
     });
-  }, [state.data, state.highlightedRowIds, controller, JSON.stringify(resolved)]);
-  const toolbar = /* @__PURE__ */ jsx2(
-    Toolbar2,
-    {
-      left: /* @__PURE__ */ jsx2(
-        SegmentedControl2,
-        {
-          size: "sm",
-          label: "Chart type",
-          options: state.allowedTypes.map((t) => ({ value: t, label: LABELS[t] ?? t })),
-          value: state.encoding.type,
-          onChange: (t) => controller.setType(t)
-        }
-      ),
-      right: /* @__PURE__ */ jsxs2(ToolbarGroup2, { end: true, children: [
-        state.partial ? /* @__PURE__ */ jsx2(Badge2, { tone: "warning", title: "Some measures have not synced yet.", children: "partial" }) : null,
-        state.data?.tooDense ? /* @__PURE__ */ jsx2(
-          Badge2,
-          {
-            tone: "warning",
-            title: `${state.data.tooDense.points} points exceeds the ${state.data.tooDense.limit} plot limit \u2014 an aggregated query was requested.`,
-            children: "aggregating"
-          }
-        ) : null,
-        /* @__PURE__ */ jsx2(
-          IconButton2,
-          {
-            icon: /* @__PURE__ */ jsx2(DownloadGlyph, {}),
-            label: "Export chart",
-            onClick: () => controller.requestExport("png")
-          }
-        )
-      ] })
-    }
-  );
-  const body = (() => {
-    if (state.errorMessage) {
-      return /* @__PURE__ */ jsx2(ErrorState2, { title: "Could not load data", message: state.errorMessage });
-    }
-    if (state.empty) {
-      return /* @__PURE__ */ jsx2(EmptyState2, { title: "No data", hint: emptyHint ?? "Wire a result into this chart to plot it." });
-    }
-    if (state.encodingProblem) {
-      return /* @__PURE__ */ jsx2(EmptyState2, { title: "Nothing to plot", hint: state.encodingProblem });
-    }
-    if (!getChartRenderer()) {
-      return /* @__PURE__ */ jsx2(
-        EmptyState2,
-        {
-          title: "No renderer installed",
-          hint: "Call setChartRenderer() with a Chart.js (or other) renderer \u2014 the panel ships the model, the host ships the marks."
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx2("div", { ref: plotRef, style: { flex: "1 1 0", minHeight: 0, position: "relative" } });
-  })();
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-    toolbar,
-    body,
+  }, [state.data, state.highlightedRowIds, controller, resolvedKey]);
+  return /* @__PURE__ */ jsx2(PlotSurface, { ref: plotRef, label: "Chart" });
+}
+function chartRuntimeComponents(controller, options) {
+  return {
+    "chart/Plot": () => /* @__PURE__ */ jsx2(ChartPlot, { controller, options })
+  };
+}
+function ChartPanelView({ controller, options, emptyHint }) {
+  useSyncExternalStore2(controller.subscribe, controller.getState, controller.getState);
+  const view = chartViewState(controller, { emptyHint });
+  const ui4 = (intent) => applyChartUi(controller, intent);
+  return /* @__PURE__ */ jsxs2(Column, { children: [
     /* @__PURE__ */ jsx2(
-      StatusBar2,
+      Toolbar2,
       {
-        left: state.data ? `${state.data.series.length} series \xB7 ${state.data.labels.length} points` : void 0,
-        right: state.highlightedRowIds.length > 0 ? `${state.highlightedRowIds.length} highlighted` : void 0
+        left: /* @__PURE__ */ jsx2(SegmentedControl2, { size: "sm", label: "Chart type", options: view.types, value: view.type, onChange: (type) => ui4({ kind: "type", type }) }),
+        right: /* @__PURE__ */ jsxs2(ToolbarGroup2, { end: true, children: [
+          view.partial ? /* @__PURE__ */ jsx2(Badge2, { tone: "warning", title: "Some measures have not synced yet.", children: "partial" }) : null,
+          view.aggregating ? /* @__PURE__ */ jsx2(Badge2, { tone: "warning", title: view.aggregatingHint, children: "aggregating" }) : null,
+          /* @__PURE__ */ jsx2(IconButton2, { icon: /* @__PURE__ */ jsx2(DownloadGlyph, {}), label: "Export chart", onClick: () => ui4({ kind: "export" }) })
+        ] })
       }
-    )
+    ),
+    view.errored ? /* @__PURE__ */ jsx2(ErrorState2, { title: "Could not load data", message: view.errorMessage }) : null,
+    view.empty ? /* @__PURE__ */ jsx2(EmptyState2, { title: "No data", hint: view.emptyHint }) : null,
+    view.unplottable ? /* @__PURE__ */ jsx2(EmptyState2, { title: "Nothing to plot", hint: view.encodingProblem }) : null,
+    view.noRenderer ? /* @__PURE__ */ jsx2(EmptyState2, { title: "No renderer installed", hint: "Call setChartRenderer() with a Chart.js (or other) renderer \u2014 the panel ships the model, the host ships the marks." }) : null,
+    view.plot ? /* @__PURE__ */ jsx2(ChartPlot, { controller, options }) : null,
+    /* @__PURE__ */ jsx2(StatusBar2, { left: view.countLabel, right: view.highlightLabel })
   ] });
 }
-var LABELS = {
-  bar: "Bar",
-  horizontalBar: "H-Bar",
-  line: "Line",
-  area: "Area",
-  scatter: "Scatter",
-  pie: "Pie",
-  doughnut: "Ring"
-};
 
 // src/data/chart/panel.ts
 function createChartPanel(options = {}) {
@@ -2912,7 +2938,7 @@ var metricsManifest = {
 import { useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
   Badge as Badge3,
-  Column,
+  Column as Column2,
   Delta,
   EmptyState as EmptyState3,
   ErrorState as ErrorState3,
@@ -2994,13 +3020,13 @@ var metricsViewManifest = {
   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 EMPTY2 = { 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 BEHAVIOURS2 = {
+  "data/metricsPanelView": (inputs) => inputs.view ?? EMPTY2
 };
 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 text2 = (b) => ({ component: "text", props: { text: b } });
+var ui2 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
 var METRICS_DECLARATION = {
   format: "xeno.block@1",
   manifest: metricsViewManifest,
@@ -3012,8 +3038,8 @@ var METRICS_DECLARATION = {
         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" })] } }
+          left: { node: { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Range" }, options: { input: "view.ranges" }, value: { input: "view.rangeId" } }, on: { onChange: ui2("range", { rangeId: { arg: "" } }) } } },
+          right: { node: { component: "chrome/Badge", when: { input: "view.partial" }, props: { tone: { value: "warning" }, title: { input: "view.partialHint" } }, children: [text2({ value: "partial" })] } }
         }
       },
       { component: "chrome/ErrorState", when: { input: "view.errored" }, props: { title: { value: "Could not load metrics" }, message: { input: "view.errorMessage" } } },
@@ -3033,20 +3059,20 @@ var METRICS_DECLARATION = {
                   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" })] } },
+                  icon: { node: { component: "chrome/Badge", when: { item: "hasLevel" }, props: { tone: { item: "tone" } }, children: [text2({ 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/Text", when: { item: "partial" }, props: { role: { value: "meta" } }, children: [text2({ input: "view.partialHint" })] },
                         { component: "chrome/Sparkline", when: { item: "hasSpark" }, props: { data: { item: "spark" }, label: { item: "sparkLabel" } } }
                       ]
                     }
                   }
                 },
-                on: { onActivate: ui("activate", { metricId: { item: "id" } }) }
+                on: { onActivate: ui2("activate", { metricId: { item: "id" } }) }
               }
             ]
           }
@@ -3062,12 +3088,12 @@ 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: [
+  const ui4 = (intent) => applyMetricsUi(controller, intent);
+  return /* @__PURE__ */ jsxs3(Column2, { 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 }) }),
+        left: /* @__PURE__ */ jsx3(SegmentedControl3, { size: "sm", label: "Range", options: view.ranges, value: view.rangeId, onChange: (rangeId) => ui4({ kind: "range", rangeId }) }),
         right: view.partial ? /* @__PURE__ */ jsx3(Badge3, { tone: "warning", title: view.partialHint, children: "partial" }) : null
       }
     ) : null,
@@ -3085,7 +3111,7 @@ function MetricsPanelView({ controller, ...options }) {
           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 })
+        onActivate: () => ui4({ kind: "activate", metricId: tile.id })
       },
       tile.id
     )) }) }) : null,
@@ -3287,7 +3313,7 @@ function emptyFilterGroup() {
 function offerableFilterOps(column, sourceOps = []) {
   const common = ["eq", "ne", "isEmpty", "isNotEmpty", "in", "notIn"];
   const ordered = ["gt", "gte", "lt", "lte", "between"];
-  const text3 = ["contains", "notContains", "startsWith", "endsWith"];
+  const text4 = ["contains", "notContains", "startsWith", "endsWith"];
   const temporal = ["relative"];
   let ops = [...common];
   switch (column?.type) {
@@ -3305,10 +3331,10 @@ function offerableFilterOps(column, sourceOps = []) {
     case "url":
     case "select":
     case "multiselect":
-      ops = [...ops, ...text3];
+      ops = [...ops, ...text4];
       break;
     default:
-      ops = [...ops, ...text3, ...ordered];
+      ops = [...ops, ...text4, ...ordered];
   }
   if (sourceOps.length === 0) return ops;
   return ops.filter((op) => sourceOps.includes(op));
@@ -3939,7 +3965,7 @@ var fieldsManifest = {
 import { useSyncExternalStore as useSyncExternalStore4 } from "react";
 import {
   Badge as Badge4,
-  Column as Column2,
+  Column as Column3,
   EmptyState as EmptyState4,
   IconButton as IconButton3,
   Note,
@@ -4074,13 +4100,13 @@ var fieldsViewManifest = {
   outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, \u2026 } \u2014 applied by the runtime to the controller." }],
   commands: []
 };
-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 EMPTY3 = { 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 BEHAVIOURS3 = {
+  "data/fieldsPanelView": (inputs) => inputs.view ?? EMPTY3
 };
 var FIELDS_RUNTIME_UNITS = [];
-var text2 = (b) => ({ component: "text", props: { text: b } });
-var ui2 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var text3 = (b) => ({ component: "text", props: { text: b } });
+var ui3 = (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 },
@@ -4101,14 +4127,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: [text2({ value: "sampled schema" })] } },
+              left: { node: { component: "chrome/Badge", when: { input: "view.sampled" }, props: { tone: { value: "warning" }, title: { input: "view.sampleWarning" } }, children: [text3({ value: "sampled schema" })] } },
               right: {
                 node: {
                   component: "chrome/ToolbarGroup",
                   props: { end: { value: true } },
                   children: [
-                    { 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" })] }
+                    { component: "chrome/TextButton", on: { onClick: ui3("autoAssign") }, children: [text3({ value: "Auto-assign" })] },
+                    { component: "chrome/TextButton", when: { input: "view.manualApply" }, props: { strong: { value: true }, disabled: { input: "view.applyDisabled" } }, on: { onClick: ui3("apply") }, children: [text3({ value: "Apply" })] }
                   ]
                 }
               }
@@ -4128,8 +4154,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: [text2({ item: "stat" })] } } },
-                        on: { onClick: ui2("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: [text3({ item: "stat" })] } } },
+                        on: { onClick: ui3("focus", { columnId: { item: "id" } }) }
                       }
                     ]
                   }
@@ -4138,9 +4164,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: [text2({ item: "count" })] } } },
+                props: { title: { item: "label" }, flush: { value: true }, badge: { node: { component: "chrome/Badge", when: { item: "hasEntries" }, children: [text3({ item: "count" })] } } },
                 children: [
-                  { component: "chrome/Note", when: { item: "empty" }, children: [text2({ item: "hint" })] },
+                  { component: "chrome/Note", when: { item: "empty" }, children: [text3({ item: "hint" })] },
                   {
                     component: "chrome/RowList",
                     when: { item: "hasEntries" },
@@ -4155,13 +4181,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: 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" })] }
+                                { component: "chrome/Select", when: { item: "aggregated" }, props: { size: { value: "sm" }, label: { value: "Aggregate" }, options: { item: "aggregates" }, value: { item: "fn" } }, on: { onChange: ui3("aggregate", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" }, fn: { arg: "" } }) } },
+                                { component: "chrome/TextButton", when: { item: "sortable" }, on: { onClick: ui3("direction", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" } }) }, children: [text3({ item: "direction" })] },
+                                { component: "chrome/Badge", when: { item: "granularity" }, children: [text3({ item: "granularity" })] }
                               ]
                             }
                           },
-                          trailing: { node: removeButton({ item: "removeLabel" }, ui2("remove", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" } })) }
+                          trailing: { node: removeButton({ item: "removeLabel" }, ui3("remove", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" } })) }
                         }
                       }
                     ]
@@ -4173,11 +4199,11 @@ var FIELDS_DECLARATION = {
                 props: {
                   title: { value: "Filters" },
                   flush: { value: true },
-                  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") } } }
+                  badge: { node: { component: "chrome/Badge", when: { input: "view.hasFilters" }, children: [text3({ 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: ui3("addFilter") } } }
                 },
                 children: [
-                  { component: "chrome/Note", when: { input: "view.noFilters" }, children: [text2({ value: "No filters. Everything passes." })] },
+                  { component: "chrome/Note", when: { input: "view.noFilters" }, children: [text3({ value: "No filters. Everything passes." })] },
                   {
                     component: "chrome/RowList",
                     when: { input: "view.hasFilters" },
@@ -4187,8 +4213,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: ui2("filterOp", { index: { item: "index" }, op: { arg: "" } }) } } },
-                          trailing: { node: removeButton({ item: "removeLabel" }, ui2("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: ui3("filterOp", { index: { item: "index" }, op: { arg: "" } }) } } },
+                          trailing: { node: removeButton({ item: "removeLabel" }, ui3("removeFilter", { index: { item: "index" } })) }
                         }
                       }
                     ]
@@ -4197,8 +4223,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: ui2("combinator", { combinator: { arg: "" } }) } } },
-                      right: { node: { component: "chrome/TextButton", on: { onClick: ui2("addGroup") }, children: [text2({ value: "+ group" })] } }
+                      left: { node: { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Combinator" }, options: { value: COMBINATORS }, value: { input: "view.combinator" } }, on: { onChange: ui3("combinator", { combinator: { arg: "" } }) } } },
+                      right: { node: { component: "chrome/TextButton", on: { onClick: ui3("addGroup") }, children: [text3({ value: "+ group" })] } }
                     }
                   }
                 ]
@@ -4220,18 +4246,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 ui3 = (intent) => applyFieldsUi(controller, intent);
+  const ui4 = (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(Column2, { children: [
+  return /* @__PURE__ */ jsxs4(Column3, { 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: () => ui3({ kind: "autoAssign" }), children: "Auto-assign" }),
-          view.manualApply ? /* @__PURE__ */ jsx4(TextButton, { strong: true, disabled: view.applyDisabled, onClick: () => ui3({ kind: "apply" }), children: "Apply" }) : null
+          /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui4({ kind: "autoAssign" }), children: "Auto-assign" }),
+          view.manualApply ? /* @__PURE__ */ jsx4(TextButton, { strong: true, disabled: view.applyDisabled, onClick: () => ui4({ kind: "apply" }), children: "Apply" }) : null
         ] })
       }
     ),
@@ -4243,7 +4269,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: () => ui3({ kind: "focus", columnId: column.id })
+          onClick: () => ui4({ kind: "focus", columnId: column.id })
         },
         column.id
       )) }) }),
@@ -4255,11 +4281,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) => 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.aggregated ? /* @__PURE__ */ jsx4(Select, { size: "sm", label: "Aggregate", options: entry.aggregates, value: entry.fn, onChange: (fn) => ui4({ kind: "aggregate", shelfId: entry.shelfId, columnId: entry.columnId, fn }) }) : null,
+              entry.sortable ? /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui4({ 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: () => ui3({ kind: "remove", shelfId: entry.shelfId, columnId: entry.columnId }) })
+            trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: entry.removeLabel, onClick: () => ui4({ kind: "remove", shelfId: entry.shelfId, columnId: entry.columnId }) })
           },
           entry.columnId
         )) }) : null
@@ -4270,15 +4296,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: () => ui3({ kind: "addFilter" }) }),
+          actions: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(PlusGlyph, { size: 11 }), label: "Add filter", onClick: () => ui4({ 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) => 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 }) })
+                meta: filter.leaf ? /* @__PURE__ */ jsx4(Select, { size: "sm", label: "Operator", options: filter.ops, value: filter.op, onChange: (op) => ui4({ kind: "filterOp", index: filter.index, op }) }) : null,
+                trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: filter.removeLabel, onClick: () => ui4({ kind: "removeFilter", index: filter.index }) })
               },
               filter.key
             )) }) : null,
@@ -4286,8 +4312,8 @@ function FieldsPanelView({ controller, showStats, manualApply }) {
               Toolbar4,
               {
                 divided: false,
-                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" })
+                left: /* @__PURE__ */ jsx4(SegmentedControl4, { size: "sm", label: "Combinator", options: COMBINATORS2, value: view.combinator, onChange: (combinator) => ui4({ kind: "combinator", combinator }) }),
+                right: /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui4({ kind: "addGroup" }), children: "+ group" })
               }
             )
           ]
@@ -5423,10 +5449,10 @@ function parseJsonPath(path) {
   }
   return steps;
 }
-function findBracketEnd(text3, start) {
+function findBracketEnd(text4, start) {
   let quote = null;
-  for (let i = start + 1; i < text3.length; i += 1) {
-    const char = text3[i];
+  for (let i = start + 1; i < text4.length; i += 1) {
+    const char = text4[i];
     if (quote) {
       if (char === "\\") i += 1;
       else if (char === quote) quote = null;
@@ -5850,9 +5876,9 @@ function firstGraphqlError(errors) {
 }
 
 // src/data/connectors/executors/csv.ts
-function sniffDelimiter(text3) {
+function sniffDelimiter(text4) {
   const candidates = [",", ";", "	", "|"];
-  const line = firstLogicalLine(text3);
+  const line = firstLogicalLine(text4);
   let best = ",";
   let bestCount = 0;
   for (const candidate of candidates) {
@@ -5874,21 +5900,21 @@ function sniffDelimiter(text3) {
   }
   return best;
 }
-function firstLogicalLine(text3) {
+function firstLogicalLine(text4) {
   let inQuotes = false;
-  for (let i = 0; i < text3.length; i += 1) {
-    const char = text3[i];
+  for (let i = 0; i < text4.length; i += 1) {
+    const char = text4[i];
     if (char === '"') {
-      if (inQuotes && text3[i + 1] === '"') i += 1;
+      if (inQuotes && text4[i + 1] === '"') i += 1;
       else inQuotes = !inQuotes;
     } else if ((char === "\n" || char === "\r") && !inQuotes) {
-      return text3.slice(0, i);
+      return text4.slice(0, i);
     }
   }
-  return text3;
+  return text4;
 }
-function parseCsv(text3, options = {}) {
-  const source = text3.charCodeAt(0) === 65279 ? text3.slice(1) : text3;
+function parseCsv(text4, options = {}) {
+  const source = text4.charCodeAt(0) === 65279 ? text4.slice(1) : text4;
   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;
@@ -5923,17 +5949,17 @@ function dedupe(names) {
     return count === 0 ? name : `${name}_${count + 1}`;
   });
 }
-function scanRecords(text3, delimiter, quote) {
+function scanRecords(text4, delimiter, quote) {
   const records = [];
   let fields = [];
   let field = "";
   let inQuotes = false;
   let i = 0;
-  while (i < text3.length) {
-    const char = text3[i];
+  while (i < text4.length) {
+    const char = text4[i];
     if (inQuotes) {
       if (char === quote) {
-        if (text3[i + 1] === quote) {
+        if (text4[i + 1] === quote) {
           field += quote;
           i += 2;
           continue;
@@ -5951,7 +5977,7 @@ function scanRecords(text3, delimiter, quote) {
       i += 1;
       continue;
     }
-    if (text3.startsWith(delimiter, i)) {
+    if (text4.startsWith(delimiter, i)) {
       fields.push(field);
       field = "";
       i += delimiter.length;
@@ -5962,7 +5988,7 @@ function scanRecords(text3, delimiter, quote) {
       records.push(fields);
       fields = [];
       field = "";
-      i += char === "\r" && text3[i + 1] === "\n" ? 2 : 1;
+      i += char === "\r" && text4[i + 1] === "\n" ? 2 : 1;
       continue;
     }
     field += char;
@@ -7099,28 +7125,34 @@ export {
   AGENT_HIDDEN_COMMANDS,
   ALL_AGGREGATES,
   ALL_CHART_TYPES,
+  BEHAVIOURS as CHART_BEHAVIOURS,
+  CHART_DECLARATION,
   CHART_EMPTY_FILL,
   CHART_PALETTE_STEPS,
   CHART_PANEL_ID,
+  CHART_RUNTIME_UNITS,
+  CHART_TYPE_LABELS,
   CONNECTORS_PANEL_ID,
   ChartController,
   ChartPanelView,
+  ChartPlot,
   ConnectorTransportError,
   ConnectorsController,
   ConnectorsPanelView,
+  DEFAULT_CHART_OPTIONS,
   DEFAULT_COLUMN_WIDTH,
   DEFAULT_PAGE_SIZE,
   DEFAULT_RANGES,
   EMPTY_LAYOUT,
   EXPIRY_SKEW_MS,
-  BEHAVIOURS2 as FIELDS_BEHAVIOURS,
+  BEHAVIOURS3 as FIELDS_BEHAVIOURS,
   FIELDS_DECLARATION,
   FIELDS_PANEL_ID,
   FIELDS_RUNTIME_UNITS,
   FieldsController,
   FieldsPanelView,
   IMPLEMENTED_VIEW_MODES,
-  BEHAVIOURS as METRICS_BEHAVIOURS,
+  BEHAVIOURS2 as METRICS_BEHAVIOURS,
   METRICS_DECLARATION,
   METRICS_PANEL_ID,
   METRICS_RUNTIME_UNITS,
@@ -7134,6 +7166,7 @@ export {
   TABLE_PANEL_ID,
   TableController,
   TablePanelView,
+  applyChartUi,
   applyFieldsUi,
   applyMetricsUi,
   applyPrecision,
@@ -7145,6 +7178,9 @@ export {
   buildSelect,
   chartManifest,
   chartPanel,
+  chartRuntimeComponents,
+  chartViewManifest,
+  chartViewState,
   clamp,
   classifyBrowserFetchFailure,
   classifyHttpStatus,