@xenosystem/blocks 0.13.19 → 0.13.21

package/dist/data/index.js

@@ -194,8 +194,8 @@ function moveCell(from, delta, bounds) {
 }
 
 // src/data/table/numeric.ts
-function parseNumeric(text5) {
-  const trimmed = String(text5).trim();
+function parseNumeric(text6) {
+  const trimmed = String(text6).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" };
@@ -276,6 +276,18 @@ var TableController = class {
   }
   /* ── Subscription ──────────────────────────────────────────────────────── */
   /** Subscribe to state changes. Returns an unsubscribe function. */
+  /** The scroller's measured viewport — the view state windows rows AND columns from it (`table/Scroller` reports it). */
+  viewport = { width: 0, height: 0, scrollTop: 0, scrollLeft: 0 };
+  /** The scroller reports its viewport; the view state windows the grid from it. */
+  setViewport(viewport) {
+    const v = this.viewport;
+    if (v.width === viewport.width && v.height === viewport.height && v.scrollTop === viewport.scrollTop && v.scrollLeft === viewport.scrollLeft) return;
+    this.viewport = { ...viewport };
+    this.notify();
+  }
+  getViewport() {
+    return this.viewport;
+  }
   subscribe = (listener) => {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
@@ -549,11 +561,11 @@ var TableController = class {
     return true;
   }
   /** Update the in-flight draft. Emits `editPreview` only when `livePreview` is on. */
-  updateDraft(text5) {
+  updateDraft(text6) {
     if (!this.editing) return;
-    this.editing = { ...this.editing, draft: text5 };
+    this.editing = { ...this.editing, draft: text6 };
     if (this.livePreview) {
-      const parsed = this.parseDraft(this.editing.columnId, text5);
+      const parsed = this.parseDraft(this.editing.columnId, text6);
       if (parsed.ok) {
         this.host.emit("editPreview", this.buildEdit(this.editing, parsed.value));
       }
@@ -605,12 +617,12 @@ var TableController = class {
     };
   }
   /** Parse a draft according to the column's declared type. */
-  parseDraft(columnId, text5) {
+  parseDraft(columnId, text6) {
     const column = this.columnById(columnId);
-    const trimmed = text5.trim();
+    const trimmed = text6.trim();
     if (column?.type === "number" || column?.type === "integer" || column?.type === "duration") {
       if (trimmed === "") return { ok: true, value: null };
-      const parsed = parseNumeric(text5);
+      const parsed = parseNumeric(text6);
       if (!parsed.ok) return { ok: false, reason: parsed.reason };
       return { ok: true, value: normalizeNumeric(parsed.value, constraintsOfColumn(column)) };
     }
@@ -627,7 +639,7 @@ var TableController = class {
         value: trimmed === "" ? [] : trimmed.split(",").map((part) => part.trim()).filter(Boolean)
       };
     }
-    return { ok: true, value: trimmed === "" ? null : text5 };
+    return { ok: true, value: trimmed === "" ? null : text6 };
   }
   rowById(rowId) {
     return this.result?.rows.find((r) => r.id === rowId);
@@ -929,19 +941,33 @@ var tableManifest = {
 };
 
 // src/data/table/react/TablePanelView.tsx
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
 import {
   Badge,
+  Column,
   EmptyState,
   ErrorState,
+  GridCell,
+  GridHeader,
+  GridHeaderCell,
+  GridRow,
+  GridSpacer,
   IconButton,
+  Input,
   LoadingState,
+  PivotCell,
+  PivotRow,
+  PivotTable,
   ScrollArea,
   SegmentedControl,
   StatusBar,
+  Text,
   Toolbar,
-  ToolbarGroup
+  ToolbarGroup,
+  VirtualWindow
 } from "@xenosystem/components/chrome";
+
+// src/data/table/declaration.ts
 import { alignmentFor, formatValue as formatValue2 } from "@xenosystem/data-core";
 
 // src/data/table/virtualize.ts
@@ -968,448 +994,439 @@ function safe(n, fallback) {
   return typeof n === "number" && Number.isFinite(n) ? n : fallback;
 }
 
-// src/data/table/react/TablePanelView.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function TablePanelView({
-  controller,
-  showRowNumbers = false,
-  rowHeight = 24,
-  showFooter = true,
-  zebra = false
-}) {
-  const state = useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
-  const scrollRef = useRef(null);
-  const [viewport, setViewport] = useState({ width: 0, height: 0, scrollTop: 0, scrollLeft: 0 });
-  useEffect(() => {
-    const element = scrollRef.current;
-    if (!element || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(() => {
-      setViewport((v) => ({ ...v, width: element.clientWidth, height: element.clientHeight }));
-    });
-    observer.observe(element);
-    setViewport((v) => ({ ...v, width: element.clientWidth, height: element.clientHeight }));
-    return () => observer.disconnect();
-  }, []);
-  const onScroll = useCallback((event) => {
-    const el = event.currentTarget;
-    setViewport((v) => ({ ...v, scrollTop: el.scrollTop, scrollLeft: el.scrollLeft }));
-  }, []);
-  const columns = useMemo(() => controller.resolvedColumns(), [controller, state]);
-  const result = state.result;
-  if (!result || result.status === "idle") {
-    return /* @__PURE__ */ jsx(Frame, { controller, state, children: /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        title: "No data",
-        hint: "Wire a source into this table, or refresh to run the current query."
-      }
-    ) });
-  }
-  if (result.status === "error") {
-    return /* @__PURE__ */ jsx(Frame, { controller, state, children: /* @__PURE__ */ jsx(
-      ErrorState,
-      {
-        title: result.error?.code ? `Query failed (${result.error.code})` : "Query failed",
-        message: result.error?.message,
-        onRetry: result.error?.retryable === false ? void 0 : () => controller.refresh()
-      }
-    ) });
-  }
-  if (result.status === "loading" && result.rows.length === 0) {
-    return /* @__PURE__ */ jsx(Frame, { controller, state, children: /* @__PURE__ */ jsx(LoadingState, { label: "Running query\u2026" }) });
-  }
-  const body = state.viewMode === "pivot" ? /* @__PURE__ */ jsx(PivotBody, { controller, columns, groups: result.groups ?? [] }) : result.rows.length === 0 ? /* @__PURE__ */ jsx(
-    EmptyState,
-    {
-      title: "No rows",
-      hint: "Every row was filtered out. Clear a filter, or widen the time window."
-    }
-  ) : /* @__PURE__ */ jsx(
-    GridBody,
-    {
-      controller,
-      columns,
-      rowHeight,
-      zebra,
-      showRowNumbers,
-      viewport,
-      scrollRef,
-      onScroll
-    }
-  );
-  return /* @__PURE__ */ jsx(Frame, { controller, state, showFooter, children: body });
-}
-function Frame({
-  controller,
-  state,
-  children,
-  showFooter = true
-}) {
+// src/data/table/declaration.ts
+var GUTTER_WIDTH = 44;
+var MODES = [{ value: "grid", label: "Grid" }, { value: "pivot", label: "Pivot" }];
+function tableViewState(c, options = {}) {
+  const { rowHeight = 24, showFooter = true, zebra = false, showRowNumbers = false } = options;
+  const state = c.getState();
   const result = state.result;
   const page = result?.page;
+  const viewport = c.getViewport();
+  const idle = !result || result.status === "idle";
+  const failed = !idle && result.status === "error";
+  const loading = !idle && !failed && result.status === "loading" && result.rows.length === 0;
+  const active = !idle && !failed && !loading;
+  const pivot = active && state.viewMode === "pivot";
+  const groups = result?.groups ?? [];
+  const pivotEmpty = pivot && groups.length === 0;
+  const noRows = active && !pivot && result.rows.length === 0;
+  const grid = active && !pivot && result.rows.length > 0;
+  const columns = c.resolvedColumns();
+  const sorts = c.effectiveQuery().sorts ?? [];
+  const header = (col) => {
+    const sort = sorts.find((s) => s.columnId === col.column.id);
+    return {
+      key: col.column.id,
+      columnId: col.column.id,
+      name: col.column.name,
+      width: col.width,
+      frozen: col.frozen,
+      offset: col.offset,
+      sort: sort ? sort.direction : null,
+      sortAsc: sort?.direction === "asc",
+      sortDesc: sort?.direction === "desc",
+      sortable: col.column.sortable !== false,
+      title: col.column.description ?? col.column.name
+    };
+  };
+  const rowWindow = computeWindow({ scrollTop: viewport.scrollTop, viewportHeight: viewport.height || rowHeight * 20, rowHeight, rowCount: result?.rows.length ?? 0 });
+  const colWindow = computeColumnWindow(columns, viewport.scrollLeft, viewport.width || 800);
+  const frozen = columns.filter((col) => col.frozen);
+  const visible = columns.slice(colWindow.startIndex, colWindow.endIndex).filter((col) => !col.frozen);
+  const width = totalWidth(columns);
+  const editing = state.editing;
+  const cell = (rowId, values, col) => {
+    const isEditing = editing?.rowId === rowId && editing.columnId === col.column.id;
+    return {
+      key: col.column.id,
+      rowId,
+      columnId: col.column.id,
+      width: col.width,
+      align: alignmentFor(col.column),
+      frozen: col.frozen,
+      offset: col.offset,
+      editing: isEditing,
+      draft: isEditing ? editing.draft : "",
+      text: isEditing ? "" : formatValue2(values[col.column.id] ?? null, col.column)
+    };
+  };
+  const rows = grid ? result.rows.slice(rowWindow.startIndex, rowWindow.endIndex).map((row, i) => {
+    const rowIndex = rowWindow.startIndex + i;
+    return {
+      key: row.id,
+      id: row.id,
+      height: rowHeight,
+      width,
+      selected: state.selection.includes(row.id),
+      zebra: zebra && rowIndex % 2 === 1,
+      hasGutter: showRowNumbers,
+      ordinal: String((page?.offset ?? 0) + rowIndex + 1),
+      gutterWidth: GUTTER_WIDTH,
+      frozenCells: frozen.map((col) => cell(row.id, row.values, col)),
+      cells: visible.map((col) => cell(row.id, row.values, col))
+    };
+  }) : [];
+  const pivotRows = [];
+  if (pivot && !pivotEmpty) {
+    const walk = (group, depth) => {
+      pivotRows.push({
+        key: group.key.join("/"),
+        label: group.label || "\u2014",
+        depth,
+        total: false,
+        cells: columns.map((col) => {
+          const v = group.aggregates?.[col.column.id];
+          return { key: col.column.id, text: v === null || v === void 0 ? "" : formatValue2(v, col.column) };
+        })
+      });
+      for (const child of group.children ?? []) walk(child, depth + 1);
+    };
+    for (const group of groups) walk(group, 0);
+    const totals = result?.totals;
+    if (totals) pivotRows.push({ key: "__total", label: "Total", depth: 0, total: true, cells: columns.map((col) => ({ key: col.column.id, text: formatValue2(totals[col.column.id] ?? null, col.column) })) });
+  }
   const total = page?.total;
   const from = page ? page.offset + 1 : 0;
   const to = page ? page.offset + (result?.rows.length ?? 0) : 0;
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsx(
-      Toolbar,
+  return {
+    modes: MODES,
+    mode: state.viewMode === "pivot" ? "pivot" : "grid",
+    partial: result?.status === "partial",
+    loadingBadge: result?.status !== "partial" && state.pending,
+    prevDisabled: (page?.offset ?? 0) === 0,
+    nextDisabled: !page?.hasMore,
+    idle,
+    failed,
+    failedTitle: failed && result.error?.code ? `Query failed (${result.error.code})` : "Query failed",
+    failedMessage: failed ? result.error?.message : void 0,
+    retryable: failed && result.error?.retryable !== false,
+    failedNoRetry: failed && result.error?.retryable === false,
+    loading,
+    pivot,
+    pivotEmpty,
+    noRows,
+    grid,
+    width,
+    headerHeight: rowHeight,
+    frozenHeaders: grid ? frozen.map(header) : [],
+    headers: grid ? visible.map(header) : [],
+    spacerWidth: colWindow.offsetLeft,
+    totalHeight: rowWindow.totalHeight,
+    offsetTop: rowWindow.offsetTop,
+    rows,
+    pivotHeads: pivot && !pivotEmpty ? columns.map((col) => ({ key: col.column.id, name: col.column.name })) : [],
+    pivotRows,
+    footerShown: showFooter,
+    countLabel: total === void 0 ? `${to - from + 1} rows` : `${from}\u2013${to} of ${total}`,
+    selectedLabel: state.selection.length > 0 ? `${state.selection.length} selected` : void 0
+  };
+}
+function applyTableUi(c, intent) {
+  switch (intent.kind) {
+    case "mode":
+      c.setViewMode(intent.mode);
+      break;
+    case "prev":
+      c.stepPage(-1);
+      break;
+    case "next":
+      c.stepPage(1);
+      break;
+    case "refresh":
+      c.refresh();
+      break;
+    case "sort":
+      c.toggleSort(intent.columnId, !!intent.shiftKey);
+      break;
+    case "rowClick":
+      c.select([intent.id], !!intent.ctrlKey || !!intent.metaKey);
+      break;
+    case "rowDouble":
+      c.activateRow(intent.id);
+      break;
+    case "cellDouble":
+      if (!c.beginEdit(intent.rowId, intent.columnId)) c.activateRow(intent.rowId, intent.columnId);
+      break;
+    case "draft":
+      c.updateDraft(intent.value);
+      break;
+    case "editKey": {
+      if (intent.key === "Enter") c.commitEdit();
+      else if (intent.key === "Escape") c.cancelEdit();
+      break;
+    }
+    case "commitEdit":
+      c.commitEdit();
+      break;
+  }
+}
+var tableViewManifest = {
+  id: tableManifest.id,
+  version: "1.0.0",
+  title: "Table",
+  category: "data",
+  layout: { slot: "center" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The TableViewModel the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, mode?, columnId?, id?, rowId?, value?, key?, shiftKey?, ctrlKey?, metaKey? } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+var EMPTY = {
+  modes: MODES,
+  mode: "grid",
+  partial: false,
+  loadingBadge: false,
+  prevDisabled: true,
+  nextDisabled: true,
+  idle: true,
+  failed: false,
+  failedTitle: "",
+  retryable: false,
+  failedNoRetry: false,
+  loading: false,
+  pivot: false,
+  pivotEmpty: false,
+  noRows: false,
+  grid: false,
+  width: 0,
+  headerHeight: 24,
+  frozenHeaders: [],
+  headers: [],
+  spacerWidth: 0,
+  totalHeight: 0,
+  offsetTop: 0,
+  rows: [],
+  pivotHeads: [],
+  pivotRows: [],
+  footerShown: true,
+  countLabel: "0 rows"
+};
+var BEHAVIOURS = {
+  "data/tablePanelView": (inputs) => inputs.view ?? EMPTY
+};
+var text = (b) => ({ component: "text", props: { text: b } });
+var ui = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var HEADER_CELL = (list) => ({
+  component: "chrome/GridHeaderCell",
+  each: { input: list, key: "key" },
+  props: {
+    width: { item: "width" },
+    frozen: { item: "frozen" },
+    offset: { item: "offset" },
+    sort: { item: "sort" },
+    sortable: { item: "sortable" },
+    title: { item: "title" },
+    sortIcon: { node: { component: "fragment", children: [{ component: "icons/SortAsc", when: { item: "sortAsc" } }, { component: "icons/SortDesc", when: { item: "sortDesc" } }] } }
+  },
+  children: [text({ item: "name" })],
+  on: { onClick: ui("sort", { columnId: { item: "columnId" }, shiftKey: { arg: "shiftKey" } }) }
+});
+var CELL = (list) => ({
+  component: "chrome/GridCell",
+  each: { item: list, key: "key" },
+  props: { width: { item: "width" }, align: { item: "align" }, frozen: { item: "frozen" }, offset: { item: "offset" }, editing: { item: "editing" } },
+  children: [
+    { component: "chrome/Input", when: { item: "editing" }, props: { autoFocus: { value: true }, value: { item: "draft" }, label: { value: "Cell value" } }, on: { onChange: ui("draft", { value: { arg: "" } }), onBlur: ui("commitEdit"), onKeyDown: ui("editKey", { key: { arg: "key" } }) } },
+    { component: "text", when: { not: { item: "editing" } }, props: { text: { item: "text" } } }
+  ],
+  on: { onDoubleClick: ui("cellDouble", { rowId: { item: "rowId" }, columnId: { item: "columnId" } }) }
+});
+var TABLE_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: tableViewManifest,
+  behaviour: "data/tablePanelView",
+  composition: {
+    component: "chrome/Column",
+    children: [
       {
-        left: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            SegmentedControl,
-            {
-              size: "sm",
-              label: "View mode",
-              options: [
-                { value: "grid", label: "Grid" },
-                { value: "pivot", label: "Pivot" }
-              ],
-              value: state.viewMode === "pivot" ? "pivot" : "grid",
-              onChange: (mode) => controller.setViewMode(mode)
-            }
-          ),
-          result?.status === "partial" ? /* @__PURE__ */ jsx(Badge, { tone: "warning", children: "Partial" }) : state.pending ? /* @__PURE__ */ jsx(Badge, { children: "Loading" }) : null
-        ] }),
-        right: /* @__PURE__ */ jsxs(ToolbarGroup, { end: true, children: [
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              icon: /* @__PURE__ */ jsx(ChevronGlyph, { direction: "left" }),
-              label: "Previous page",
-              disabled: (page?.offset ?? 0) === 0,
-              onClick: () => controller.stepPage(-1)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              icon: /* @__PURE__ */ jsx(ChevronGlyph, { direction: "right" }),
-              label: "Next page",
-              disabled: !page?.hasMore,
-              onClick: () => controller.stepPage(1)
+        component: "chrome/Toolbar",
+        props: {
+          left: {
+            node: {
+              component: "fragment",
+              children: [
+                { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "View mode" }, options: { input: "view.modes" }, value: { input: "view.mode" } }, on: { onChange: ui("mode", { mode: { arg: "" } }) } },
+                { component: "chrome/Badge", when: { input: "view.partial" }, props: { tone: { value: "warning" } }, children: [text({ value: "Partial" })] },
+                { component: "chrome/Badge", when: { input: "view.loadingBadge" }, children: [text({ value: "Loading" })] }
+              ]
             }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              icon: /* @__PURE__ */ jsx(RefreshGlyph, {}),
-              label: "Refresh",
-              onClick: () => controller.refresh()
+          },
+          right: {
+            node: {
+              component: "chrome/ToolbarGroup",
+              props: { end: { value: true } },
+              children: [
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Chevron", props: { direction: { value: "left" } } } }, label: { value: "Previous page" }, disabled: { input: "view.prevDisabled" } }, on: { onClick: ui("prev") } },
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Chevron", props: { direction: { value: "right" } } } }, label: { value: "Next page" }, disabled: { input: "view.nextDisabled" } }, on: { onClick: ui("next") } },
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Refresh" } }, label: { value: "Refresh" } }, on: { onClick: ui("refresh") } }
+              ]
             }
-          )
-        ] })
-      }
-    ),
-    children,
-    showFooter ? /* @__PURE__ */ jsx(
-      StatusBar,
+          }
+        }
+      },
+      { component: "chrome/EmptyState", when: { input: "view.idle" }, props: { title: { value: "No data" }, hint: { value: "Wire a source into this table, or refresh to run the current query." } } },
+      { component: "chrome/ErrorState", when: { input: "view.retryable" }, props: { title: { input: "view.failedTitle" }, message: { input: "view.failedMessage" } }, on: { onRetry: ui("refresh") } },
+      // a failure the host marked non-retryable offers no retry — the handler is absent, not disabled
+      { component: "chrome/ErrorState", when: { input: "view.failedNoRetry" }, props: { title: { input: "view.failedTitle" }, message: { input: "view.failedMessage" } } },
+      { component: "chrome/LoadingState", when: { input: "view.loading" }, props: { label: { value: "Running query\u2026" } } },
+      { component: "chrome/EmptyState", when: { input: "view.pivotEmpty" }, props: { title: { value: "No cross-tab" }, hint: { value: "Set a pivot spec \u2014 rows, columns and at least one measure \u2014 to build a cross-tab." } } },
+      { component: "chrome/EmptyState", when: { input: "view.noRows" }, props: { title: { value: "No rows" }, hint: { value: "Every row was filtered out. Clear a filter, or widen the time window." } } },
       {
-        left: total === void 0 ? `${to - from + 1} rows` : `${from}\u2013${to} of ${total}`,
-        right: state.selection.length > 0 ? `${state.selection.length} selected` : void 0
-      }
-    ) : null
-  ] });
-}
-function GridBody({
-  controller,
-  columns,
-  rowHeight,
-  zebra,
-  showRowNumbers,
-  viewport,
-  scrollRef,
-  onScroll
-}) {
-  const state = controller.getState();
-  const result = state.result;
-  if (!result) return null;
-  const rowWindow = computeWindow({
-    scrollTop: viewport.scrollTop,
-    viewportHeight: viewport.height || rowHeight * 20,
-    rowHeight,
-    rowCount: result.rows.length
-  });
-  const colWindow = computeColumnWindow(columns, viewport.scrollLeft, viewport.width || 800);
-  const frozen = columns.filter((c) => c.frozen);
-  const visible = columns.slice(colWindow.startIndex, colWindow.endIndex);
-  const width = totalWidth(columns);
-  const sorts = controller.effectiveQuery().sorts ?? [];
-  return /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: scrollRef,
-      onScroll,
-      style: { position: "relative", height: "100%", overflow: "auto" },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+        component: "chrome/ScrollArea",
+        when: { input: "view.pivot" },
+        children: [
           {
-            style: {
-              position: "sticky",
-              top: 0,
-              zIndex: 2,
-              display: "flex",
-              width,
-              height: rowHeight,
-              background: "var(--xeno-panel-header)"
-            },
+            component: "chrome/PivotTable",
+            when: { not: { input: "view.pivotEmpty" } },
             children: [
-              frozen.map((c) => /* @__PURE__ */ jsx(HeaderCell, { resolved: c, controller, sorts, sticky: true }, c.column.id)),
-              /* @__PURE__ */ jsx("div", { style: { width: colWindow.offsetLeft, flex: "0 0 auto" } }),
-              visible.filter((c) => !c.frozen).map((c) => /* @__PURE__ */ jsx(HeaderCell, { resolved: c, controller, sorts }, c.column.id))
+              { component: "chrome/PivotRow", props: { head: { value: true } }, children: [{ component: "chrome/PivotCell", props: { head: { value: true } }, children: [text({ value: "\xA0" })] }, { component: "chrome/PivotCell", each: { input: "view.pivotHeads", key: "key" }, children: [text({ item: "name" })] }] },
+              {
+                component: "chrome/PivotRow",
+                each: { input: "view.pivotRows", key: "key" },
+                props: { total: { item: "total" } },
+                children: [
+                  { component: "chrome/PivotCell", props: { head: { value: true }, depth: { item: "depth" } }, children: [text({ item: "label" })] },
+                  { component: "chrome/PivotCell", each: { item: "cells", key: "key" }, props: { numeric: { value: true } }, children: [text({ item: "text" })] }
+                ]
+              }
             ]
           }
-        ),
-        /* @__PURE__ */ jsx("div", { style: { height: rowWindow.totalHeight, width, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { transform: `translateY(${rowWindow.offsetTop}px)` }, children: result.rows.slice(rowWindow.startIndex, rowWindow.endIndex).map((row, i) => {
-          const rowIndex = rowWindow.startIndex + i;
-          const selected = state.selection.includes(row.id);
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "row",
-              "aria-selected": selected,
-              onClick: (e) => controller.select([row.id], e.ctrlKey || e.metaKey),
-              onDoubleClick: () => controller.activateRow(row.id),
-              style: {
-                display: "flex",
-                height: rowHeight,
-                width,
-                background: selected ? "var(--xeno-border)" : zebra && rowIndex % 2 === 1 ? "var(--xeno-border-subtle)" : "transparent"
-              },
-              children: [
-                showRowNumbers ? /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    role: "gridcell",
-                    "aria-hidden": true,
-                    style: {
-                      width: 44,
-                      flex: "0 0 44px",
-                      textAlign: "right",
-                      paddingRight: 6,
-                      opacity: 0.35,
-                      fontVariantNumeric: "tabular-nums",
-                      userSelect: "none",
-                      alignSelf: "center"
-                    },
-                    children: (result.page?.offset ?? 0) + rowIndex + 1
-                  }
-                ) : null,
-                frozen.map((c) => /* @__PURE__ */ jsx(Cell, { controller, row, resolved: c, sticky: true }, c.column.id)),
-                /* @__PURE__ */ jsx("div", { style: { width: colWindow.offsetLeft, flex: "0 0 auto" } }),
-                visible.filter((c) => !c.frozen).map((c) => /* @__PURE__ */ jsx(Cell, { controller, row, resolved: c }, c.column.id))
-              ]
-            },
-            row.id
-          );
-        }) }) })
-      ]
-    }
-  ) });
-}
-function HeaderCell({
-  resolved,
-  controller,
-  sorts,
-  sticky
-}) {
-  const sort = sorts.find((s) => s.columnId === resolved.column.id);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "columnheader",
-      "aria-sort": sort ? sort.direction === "asc" ? "ascending" : "descending" : "none",
-      onClick: (e) => controller.toggleSort(resolved.column.id, e.shiftKey),
-      title: resolved.column.description ?? resolved.column.name,
-      style: {
-        width: resolved.width,
-        flex: "0 0 auto",
-        display: "flex",
-        alignItems: "center",
-        gap: 4,
-        padding: "0 6px",
-        boxSizing: "border-box",
-        fontSize: 9,
-        fontWeight: 600,
-        letterSpacing: "0.06em",
-        textTransform: "uppercase",
-        color: "var(--xeno-muted)",
-        cursor: resolved.column.sortable === false ? "default" : "pointer",
-        position: sticky ? "sticky" : void 0,
-        left: sticky ? resolved.offset : void 0,
-        zIndex: sticky ? 1 : void 0,
-        background: sticky ? "var(--xeno-panel-header)" : void 0,
-        borderRight: "1px solid var(--xeno-border)",
-        userSelect: "none"
+        ]
       },
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
+      {
+        component: "table/Scroller",
+        when: { input: "view.grid" },
+        children: [
+          { component: "chrome/GridHeader", props: { width: { input: "view.width" }, height: { input: "view.headerHeight" } }, children: [HEADER_CELL("view.frozenHeaders"), { component: "chrome/GridSpacer", props: { width: { input: "view.spacerWidth" } } }, HEADER_CELL("view.headers")] },
           {
-            style: { flex: "1 1 auto", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-            children: resolved.column.name
+            component: "chrome/VirtualWindow",
+            props: { totalHeight: { input: "view.totalHeight" }, offsetTop: { input: "view.offsetTop" } },
+            children: [
+              {
+                component: "chrome/GridRow",
+                each: { input: "view.rows", key: "key" },
+                props: { height: { item: "height" }, width: { item: "width" }, selected: { item: "selected" }, zebra: { item: "zebra" } },
+                on: { onClick: ui("rowClick", { id: { item: "id" }, ctrlKey: { arg: "ctrlKey" }, metaKey: { arg: "metaKey" } }), onDoubleClick: ui("rowDouble", { id: { item: "id" } }) },
+                children: [
+                  { component: "chrome/GridCell", when: { item: "hasGutter" }, props: { width: { item: "gutterWidth" }, gutter: { value: true } }, children: [text({ item: "ordinal" })] },
+                  CELL("frozenCells"),
+                  { component: "chrome/GridSpacer", props: { width: { input: "view.spacerWidth" } } },
+                  CELL("cells")
+                ]
+              }
+            ]
           }
-        ),
-        sort ? sort.direction === "asc" ? /* @__PURE__ */ jsx(SortAscGlyph, {}) : /* @__PURE__ */ jsx(SortDescGlyph, {}) : null
-      ]
-    }
-  );
-}
-function Cell({
-  controller,
-  row,
-  resolved,
-  sticky
-}) {
-  const state = controller.getState();
-  const column = resolved.column;
-  const editing = state.editing?.rowId === row.id && state.editing.columnId === column.id ? state.editing : null;
-  const style = {
-    width: resolved.width,
-    flex: "0 0 auto",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: alignmentFor(column) === "right" ? "flex-end" : alignmentFor(column) === "center" ? "center" : "flex-start",
-    padding: "0 6px",
-    boxSizing: "border-box",
-    fontSize: 11,
-    color: "var(--xeno-text)",
-    fontVariantNumeric: alignmentFor(column) === "right" ? "tabular-nums" : void 0,
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-    position: sticky ? "sticky" : void 0,
-    left: sticky ? resolved.offset : void 0,
-    zIndex: sticky ? 1 : void 0,
-    background: sticky ? "var(--xeno-canvas)" : void 0,
-    borderRight: "1px solid var(--xeno-border)"
-  };
-  if (editing) {
-    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
-      "input",
+        ]
+      },
       {
-        autoFocus: true,
-        value: editing.draft,
-        onChange: (e) => controller.updateDraft(e.target.value),
-        onBlur: () => controller.commitEdit(),
-        onFocus: (e) => e.currentTarget.select(),
-        onKeyDown: (e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            controller.commitEdit();
-          } else if (e.key === "Escape") {
-            e.preventDefault();
-            controller.cancelEdit();
-          }
-        },
-        style: {
-          width: "100%",
-          height: "100%",
-          border: "none",
-          outline: "none",
-          background: "var(--xeno-canvas)",
-          color: "inherit",
-          font: "inherit",
-          textAlign: alignmentFor(column) === "right" ? "right" : "left",
-          padding: 0
+        component: "chrome/StatusBar",
+        when: { input: "view.footerShown" },
+        props: {
+          left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text({ input: "view.countLabel" })] } },
+          right: { node: { component: "chrome/Text", when: { input: "view.selectedLabel" }, props: { role: { value: "meta" } }, children: [text({ input: "view.selectedLabel" })] } }
         }
       }
-    ) });
+    ]
   }
-  return /* @__PURE__ */ jsx(
-    "div",
+};
+
+// src/data/table/react/TablePanelView.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function TablePanelView({ controller, ...options }) {
+  useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
+  const view = tableViewState(controller, options);
+  const ui6 = (intent) => applyTableUi(controller, intent);
+  const header = (h) => /* @__PURE__ */ jsx(
+    GridHeaderCell,
     {
-      role: "gridcell",
-      style,
-      onDoubleClick: (e) => {
-        e.stopPropagation();
-        if (!controller.beginEdit(row.id, column.id)) controller.activateRow(row.id, column.id);
-      },
-      children: formatValue2(row.values[column.id] ?? null, column)
-    }
+      width: h.width,
+      frozen: h.frozen,
+      offset: h.offset,
+      sort: h.sort,
+      sortable: h.sortable,
+      title: h.title,
+      sortIcon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        h.sortAsc ? /* @__PURE__ */ jsx(SortAscGlyph, {}) : null,
+        h.sortDesc ? /* @__PURE__ */ jsx(SortDescGlyph, {}) : null
+      ] }),
+      onClick: (e) => ui6({ kind: "sort", columnId: h.columnId, shiftKey: e.shiftKey }),
+      children: h.name
+    },
+    h.key
   );
-}
-function PivotBody({
-  controller,
-  columns,
-  groups
-}) {
-  const state = controller.getState();
-  const totals = state.result?.totals;
-  if (groups.length === 0) {
-    return /* @__PURE__ */ jsx(
-      EmptyState,
+  const cell = (c) => /* @__PURE__ */ jsxs(GridCell, { width: c.width, align: c.align, frozen: c.frozen, offset: c.offset, editing: c.editing, onDoubleClick: () => ui6({ kind: "cellDouble", rowId: c.rowId, columnId: c.columnId }), children: [
+    c.editing ? /* @__PURE__ */ jsx(Input, { autoFocus: true, value: c.draft, label: "Cell value", onChange: (value) => ui6({ kind: "draft", value }), onBlur: () => ui6({ kind: "commitEdit" }), onKeyDown: (e) => ui6({ kind: "editKey", key: e.key }) }) : null,
+    !c.editing ? c.text : null
+  ] }, c.key);
+  return /* @__PURE__ */ jsxs(Column, { children: [
+    /* @__PURE__ */ jsx(
+      Toolbar,
       {
-        title: "No cross-tab",
-        hint: "Set a pivot spec \u2014 rows, columns and at least one measure \u2014 to build a cross-tab."
+        left: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SegmentedControl, { size: "sm", label: "View mode", options: view.modes, value: view.mode, onChange: (mode) => ui6({ kind: "mode", mode }) }),
+          view.partial ? /* @__PURE__ */ jsx(Badge, { tone: "warning", children: "Partial" }) : null,
+          view.loadingBadge ? /* @__PURE__ */ jsx(Badge, { children: "Loading" }) : null
+        ] }),
+        right: /* @__PURE__ */ jsxs(ToolbarGroup, { end: true, children: [
+          /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(ChevronGlyph, { direction: "left" }), label: "Previous page", disabled: view.prevDisabled, onClick: () => ui6({ kind: "prev" }) }),
+          /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(ChevronGlyph, { direction: "right" }), label: "Next page", disabled: view.nextDisabled, onClick: () => ui6({ kind: "next" }) }),
+          /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(RefreshGlyph, {}), label: "Refresh", onClick: () => ui6({ kind: "refresh" }) })
+        ] })
       }
-    );
-  }
-  return /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsxs("div", { style: { display: "table", width: "100%", fontSize: 11 }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "table-row", position: "sticky", top: 0 }, children: [
-      /* @__PURE__ */ jsx(PivotHeadCell, { children: "\xA0" }),
-      columns.map((c) => /* @__PURE__ */ jsx(PivotHeadCell, { children: c.column.name }, c.column.id))
-    ] }),
-    groups.map((group) => /* @__PURE__ */ jsx(PivotRow, { group, columns, depth: 0 }, group.key.join("/"))),
-    totals ? /* @__PURE__ */ jsxs("div", { style: { display: "table-row", fontWeight: 600 }, children: [
-      /* @__PURE__ */ jsx(PivotCell, { head: true, children: "Total" }),
-      columns.map((c) => /* @__PURE__ */ jsx(PivotCell, { numeric: true, children: formatValue2(totals[c.column.id] ?? null, c.column) }, c.column.id))
-    ] }) : null
-  ] }) });
-}
-function PivotRow({
-  group,
-  columns,
-  depth
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "table-row" }, children: [
-      /* @__PURE__ */ jsx(PivotCell, { head: true, indent: depth, children: group.label || "\u2014" }),
-      columns.map((c) => /* @__PURE__ */ jsx(PivotCell, { numeric: true, children: group.aggregates?.[c.column.id] === null || group.aggregates?.[c.column.id] === void 0 ? "" : formatValue2(group.aggregates[c.column.id] ?? null, c.column) }, c.column.id))
-    ] }),
-    group.children?.map((child) => /* @__PURE__ */ jsx(PivotRow, { group: child, columns, depth: depth + 1 }, child.key.join("/")))
+    ),
+    view.idle ? /* @__PURE__ */ jsx(EmptyState, { title: "No data", hint: "Wire a source into this table, or refresh to run the current query." }) : null,
+    view.retryable ? /* @__PURE__ */ jsx(ErrorState, { title: view.failedTitle, message: view.failedMessage, onRetry: () => ui6({ kind: "refresh" }) }) : null,
+    view.failedNoRetry ? /* @__PURE__ */ jsx(ErrorState, { title: view.failedTitle, message: view.failedMessage }) : null,
+    view.loading ? /* @__PURE__ */ jsx(LoadingState, { label: "Running query\u2026" }) : null,
+    view.pivotEmpty ? /* @__PURE__ */ jsx(EmptyState, { title: "No cross-tab", hint: "Set a pivot spec \u2014 rows, columns and at least one measure \u2014 to build a cross-tab." }) : null,
+    view.noRows ? /* @__PURE__ */ jsx(EmptyState, { title: "No rows", hint: "Every row was filtered out. Clear a filter, or widen the time window." }) : null,
+    view.pivot ? /* @__PURE__ */ jsx(ScrollArea, { children: !view.pivotEmpty ? /* @__PURE__ */ jsxs(PivotTable, { children: [
+      /* @__PURE__ */ jsxs(PivotRow, { head: true, children: [
+        /* @__PURE__ */ jsx(PivotCell, { head: true, children: "\xA0" }),
+        view.pivotHeads.map((h) => /* @__PURE__ */ jsx(PivotCell, { children: h.name }, h.key))
+      ] }),
+      view.pivotRows.map((r) => /* @__PURE__ */ jsxs(PivotRow, { total: r.total, children: [
+        /* @__PURE__ */ jsx(PivotCell, { head: true, depth: r.depth, children: r.label }),
+        r.cells.map((c) => /* @__PURE__ */ jsx(PivotCell, { numeric: true, children: c.text }, c.key))
+      ] }, r.key))
+    ] }) : null }) : null,
+    view.grid ? /* @__PURE__ */ jsxs(TableScroller, { controller, children: [
+      /* @__PURE__ */ jsxs(GridHeader, { width: view.width, height: view.headerHeight, children: [
+        view.frozenHeaders.map(header),
+        /* @__PURE__ */ jsx(GridSpacer, { width: view.spacerWidth }),
+        view.headers.map(header)
+      ] }),
+      /* @__PURE__ */ jsx(VirtualWindow, { totalHeight: view.totalHeight, offsetTop: view.offsetTop, children: view.rows.map((r) => /* @__PURE__ */ jsxs(GridRow, { height: r.height, width: r.width, selected: r.selected, zebra: r.zebra, onClick: (e) => ui6({ kind: "rowClick", id: r.id, ctrlKey: e.ctrlKey, metaKey: e.metaKey }), onDoubleClick: () => ui6({ kind: "rowDouble", id: r.id }), children: [
+        r.hasGutter ? /* @__PURE__ */ jsx(GridCell, { width: r.gutterWidth, gutter: true, children: r.ordinal }) : null,
+        r.frozenCells.map(cell),
+        /* @__PURE__ */ jsx(GridSpacer, { width: view.spacerWidth }),
+        r.cells.map(cell)
+      ] }, r.key)) })
+    ] }) : null,
+    view.footerShown ? /* @__PURE__ */ jsx(StatusBar, { left: /* @__PURE__ */ jsx(Text, { role: "number", children: view.countLabel }), right: view.selectedLabel ? /* @__PURE__ */ jsx(Text, { role: "meta", children: view.selectedLabel }) : null }) : null
   ] });
 }
-function PivotHeadCell({ children }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "table-cell",
-        padding: "2px 6px",
-        fontSize: 9,
-        fontWeight: 600,
-        letterSpacing: "0.06em",
-        textTransform: "uppercase",
-        color: "var(--xeno-muted)",
-        background: "var(--xeno-panel-header)",
-        textAlign: "right"
-      },
-      children
-    }
-  );
-}
-function PivotCell({
-  children,
-  head,
-  numeric,
-  indent = 0
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "table-cell",
-        padding: "2px 6px",
-        paddingLeft: head ? 6 + indent * 12 : 6,
-        textAlign: numeric ? "right" : "left",
-        fontVariantNumeric: numeric ? "tabular-nums" : void 0,
-        color: head ? "var(--xeno-text)" : "var(--xeno-text)",
-        borderTop: "1px solid var(--xeno-border)"
-      },
-      children
-    }
-  );
+function TableScroller({ controller, children }) {
+  const scrollRef = useRef(null);
+  const report = useCallback((el) => controller.setViewport({ width: el.clientWidth, height: el.clientHeight, scrollTop: el.scrollTop, scrollLeft: el.scrollLeft }), [controller]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    report(el);
+    const RO = globalThis.ResizeObserver;
+    if (!RO) return;
+    const ro = new RO(() => report(el));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [report]);
+  const onScroll = useCallback((e) => report(e.currentTarget), [report]);
+  return /* @__PURE__ */ jsx(ScrollArea, { ref: scrollRef, onScroll, children });
+}
+var TABLE_RUNTIME_UNITS = ["table/Scroller"];
+function tableRuntimeComponents(controller) {
+  return {
+    "table/Scroller": ({ children }) => /* @__PURE__ */ jsx(TableScroller, { controller, children })
+  };
 }
 
 // src/data/table/panel.ts
@@ -2201,7 +2218,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, 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";
+import { Badge as Badge2, Column as Column2, 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;
@@ -2302,13 +2319,13 @@ var chartViewManifest = {
   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 EMPTY2 = { 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 BEHAVIOURS2 = {
+  "data/chartPanelView": (inputs) => inputs.view ?? EMPTY2
 };
 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 text2 = (b) => ({ component: "text", props: { text: b } });
+var ui2 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
 var CHART_DECLARATION = {
   format: "xeno.block@1",
   manifest: chartViewManifest,
@@ -2319,15 +2336,15 @@ var CHART_DECLARATION = {
       {
         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: "" } }) } } },
+          left: { node: { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Chart type" }, options: { input: "view.types" }, value: { input: "view.type" } }, on: { onChange: ui2("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/Badge", when: { input: "view.partial" }, props: { tone: { value: "warning" }, title: { value: "Some measures have not synced yet." } }, children: [text2({ value: "partial" })] },
+                { component: "chrome/Badge", when: { input: "view.aggregating" }, props: { tone: { value: "warning" }, title: { input: "view.aggregatingHint" } }, children: [text2({ value: "aggregating" })] },
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Download" } }, label: { value: "Export chart" } }, on: { onClick: ui2("export") } }
               ]
             }
           }
@@ -2374,16 +2391,16 @@ function chartRuntimeComponents(controller, options) {
 function ChartPanelView({ controller, options, emptyHint }) {
   useSyncExternalStore2(controller.subscribe, controller.getState, controller.getState);
   const view = chartViewState(controller, { emptyHint });
-  const ui5 = (intent) => applyChartUi(controller, intent);
-  return /* @__PURE__ */ jsxs2(Column, { children: [
+  const ui6 = (intent) => applyChartUi(controller, intent);
+  return /* @__PURE__ */ jsxs2(Column2, { children: [
     /* @__PURE__ */ jsx2(
       Toolbar2,
       {
-        left: /* @__PURE__ */ jsx2(SegmentedControl2, { size: "sm", label: "Chart type", options: view.types, value: view.type, onChange: (type) => ui5({ kind: "type", type }) }),
+        left: /* @__PURE__ */ jsx2(SegmentedControl2, { size: "sm", label: "Chart type", options: view.types, value: view.type, onChange: (type) => ui6({ 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: () => ui5({ kind: "export" }) })
+          /* @__PURE__ */ jsx2(IconButton2, { icon: /* @__PURE__ */ jsx2(DownloadGlyph, {}), label: "Export chart", onClick: () => ui6({ kind: "export" }) })
         ] })
       }
     ),
@@ -2937,7 +2954,7 @@ var metricsManifest = {
 import { useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
   Badge as Badge3,
-  Column as Column2,
+  Column as Column3,
   Delta,
   EmptyState as EmptyState3,
   ErrorState as ErrorState3,
@@ -2947,7 +2964,7 @@ import {
   Stack,
   StatTile,
   StatusBar as StatusBar3,
-  Text,
+  Text as Text2,
   TileGrid,
   Toolbar as Toolbar3
 } from "@xenosystem/components/chrome";
@@ -3019,13 +3036,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 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 EMPTY3 = { 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 BEHAVIOURS3 = {
+  "data/metricsPanelView": (inputs) => inputs.view ?? EMPTY3
 };
 var METRICS_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 METRICS_DECLARATION = {
   format: "xeno.block@1",
   manifest: metricsViewManifest,
@@ -3037,8 +3054,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: 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" })] } }
+          left: { node: { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Range" }, options: { input: "view.ranges" }, value: { input: "view.rangeId" } }, on: { onChange: ui3("range", { rangeId: { arg: "" } }) } } },
+          right: { node: { component: "chrome/Badge", when: { input: "view.partial" }, props: { tone: { value: "warning" }, title: { input: "view.partialHint" } }, children: [text3({ value: "partial" })] } }
         }
       },
       { component: "chrome/ErrorState", when: { input: "view.errored" }, props: { title: { value: "Could not load metrics" }, message: { input: "view.errorMessage" } } },
@@ -3058,20 +3075,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: [text2({ item: "level" })] } },
+                  icon: { node: { component: "chrome/Badge", when: { item: "hasLevel" }, props: { tone: { item: "tone" } }, children: [text3({ 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: [text2({ input: "view.partialHint" })] },
+                        { component: "chrome/Text", when: { item: "partial" }, props: { role: { value: "meta" } }, children: [text3({ input: "view.partialHint" })] },
                         { component: "chrome/Sparkline", when: { item: "hasSpark" }, props: { data: { item: "spark" }, label: { item: "sparkLabel" } } }
                       ]
                     }
                   }
                 },
-                on: { onActivate: ui2("activate", { metricId: { item: "id" } }) }
+                on: { onActivate: ui3("activate", { metricId: { item: "id" } }) }
               }
             ]
           }
@@ -3087,12 +3104,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 ui5 = (intent) => applyMetricsUi(controller, intent);
-  return /* @__PURE__ */ jsxs3(Column2, { children: [
+  const ui6 = (intent) => applyMetricsUi(controller, intent);
+  return /* @__PURE__ */ jsxs3(Column3, { children: [
     view.hasRanges ? /* @__PURE__ */ jsx3(
       Toolbar3,
       {
-        left: /* @__PURE__ */ jsx3(SegmentedControl3, { size: "sm", label: "Range", options: view.ranges, value: view.rangeId, onChange: (rangeId) => ui5({ kind: "range", rangeId }) }),
+        left: /* @__PURE__ */ jsx3(SegmentedControl3, { size: "sm", label: "Range", options: view.ranges, value: view.rangeId, onChange: (rangeId) => ui6({ kind: "range", rangeId }) }),
         right: view.partial ? /* @__PURE__ */ jsx3(Badge3, { tone: "warning", title: view.partialHint, children: "partial" }) : null
       }
     ) : null,
@@ -3107,10 +3124,10 @@ function MetricsPanelView({ controller, ...options }) {
         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.partial ? /* @__PURE__ */ jsx3(Text2, { role: "meta", children: view.partialHint }) : null,
           tile.hasSpark ? /* @__PURE__ */ jsx3(Sparkline, { data: tile.spark, label: tile.sparkLabel }) : null
         ] }),
-        onActivate: () => ui5({ kind: "activate", metricId: tile.id })
+        onActivate: () => ui6({ kind: "activate", metricId: tile.id })
       },
       tile.id
     )) }) }) : null,
@@ -3312,7 +3329,7 @@ function emptyFilterGroup() {
 function offerableFilterOps(column, sourceOps = []) {
   const common = ["eq", "ne", "isEmpty", "isNotEmpty", "in", "notIn"];
   const ordered = ["gt", "gte", "lt", "lte", "between"];
-  const text5 = ["contains", "notContains", "startsWith", "endsWith"];
+  const text6 = ["contains", "notContains", "startsWith", "endsWith"];
   const temporal = ["relative"];
   let ops = [...common];
   switch (column?.type) {
@@ -3330,10 +3347,10 @@ function offerableFilterOps(column, sourceOps = []) {
     case "url":
     case "select":
     case "multiselect":
-      ops = [...ops, ...text5];
+      ops = [...ops, ...text6];
       break;
     default:
-      ops = [...ops, ...text5, ...ordered];
+      ops = [...ops, ...text6, ...ordered];
   }
   if (sourceOps.length === 0) return ops;
   return ops.filter((op) => sourceOps.includes(op));
@@ -3964,7 +3981,7 @@ var fieldsManifest = {
 import { useSyncExternalStore as useSyncExternalStore4 } from "react";
 import {
   Badge as Badge4,
-  Column as Column3,
+  Column as Column4,
   EmptyState as EmptyState4,
   IconButton as IconButton3,
   Note,
@@ -4099,13 +4116,13 @@ var fieldsViewManifest = {
   outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, \u2026 } \u2014 applied by the runtime to the controller." }],
   commands: []
 };
-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 EMPTY4 = { 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 BEHAVIOURS4 = {
+  "data/fieldsPanelView": (inputs) => inputs.view ?? EMPTY4
 };
 var FIELDS_RUNTIME_UNITS = [];
-var text3 = (b) => ({ component: "text", props: { text: b } });
-var ui3 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var text4 = (b) => ({ component: "text", props: { text: b } });
+var ui4 = (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 },
@@ -4126,14 +4143,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: [text3({ value: "sampled schema" })] } },
+              left: { node: { component: "chrome/Badge", when: { input: "view.sampled" }, props: { tone: { value: "warning" }, title: { input: "view.sampleWarning" } }, children: [text4({ value: "sampled schema" })] } },
               right: {
                 node: {
                   component: "chrome/ToolbarGroup",
                   props: { end: { value: true } },
                   children: [
-                    { 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" })] }
+                    { component: "chrome/TextButton", on: { onClick: ui4("autoAssign") }, children: [text4({ value: "Auto-assign" })] },
+                    { component: "chrome/TextButton", when: { input: "view.manualApply" }, props: { strong: { value: true }, disabled: { input: "view.applyDisabled" } }, on: { onClick: ui4("apply") }, children: [text4({ value: "Apply" })] }
                   ]
                 }
               }
@@ -4153,8 +4170,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: [text3({ item: "stat" })] } } },
-                        on: { onClick: ui3("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: [text4({ item: "stat" })] } } },
+                        on: { onClick: ui4("focus", { columnId: { item: "id" } }) }
                       }
                     ]
                   }
@@ -4163,9 +4180,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: [text3({ item: "count" })] } } },
+                props: { title: { item: "label" }, flush: { value: true }, badge: { node: { component: "chrome/Badge", when: { item: "hasEntries" }, children: [text4({ item: "count" })] } } },
                 children: [
-                  { component: "chrome/Note", when: { item: "empty" }, children: [text3({ item: "hint" })] },
+                  { component: "chrome/Note", when: { item: "empty" }, children: [text4({ item: "hint" })] },
                   {
                     component: "chrome/RowList",
                     when: { item: "hasEntries" },
@@ -4180,13 +4197,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: 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" })] }
+                                { component: "chrome/Select", when: { item: "aggregated" }, props: { size: { value: "sm" }, label: { value: "Aggregate" }, options: { item: "aggregates" }, value: { item: "fn" } }, on: { onChange: ui4("aggregate", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" }, fn: { arg: "" } }) } },
+                                { component: "chrome/TextButton", when: { item: "sortable" }, on: { onClick: ui4("direction", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" } }) }, children: [text4({ item: "direction" })] },
+                                { component: "chrome/Badge", when: { item: "granularity" }, children: [text4({ item: "granularity" })] }
                               ]
                             }
                           },
-                          trailing: { node: removeButton({ item: "removeLabel" }, ui3("remove", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" } })) }
+                          trailing: { node: removeButton({ item: "removeLabel" }, ui4("remove", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" } })) }
                         }
                       }
                     ]
@@ -4198,11 +4215,11 @@ var FIELDS_DECLARATION = {
                 props: {
                   title: { value: "Filters" },
                   flush: { value: true },
-                  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") } } }
+                  badge: { node: { component: "chrome/Badge", when: { input: "view.hasFilters" }, children: [text4({ 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: ui4("addFilter") } } }
                 },
                 children: [
-                  { component: "chrome/Note", when: { input: "view.noFilters" }, children: [text3({ value: "No filters. Everything passes." })] },
+                  { component: "chrome/Note", when: { input: "view.noFilters" }, children: [text4({ value: "No filters. Everything passes." })] },
                   {
                     component: "chrome/RowList",
                     when: { input: "view.hasFilters" },
@@ -4212,8 +4229,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: ui3("filterOp", { index: { item: "index" }, op: { arg: "" } }) } } },
-                          trailing: { node: removeButton({ item: "removeLabel" }, ui3("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: ui4("filterOp", { index: { item: "index" }, op: { arg: "" } }) } } },
+                          trailing: { node: removeButton({ item: "removeLabel" }, ui4("removeFilter", { index: { item: "index" } })) }
                         }
                       }
                     ]
@@ -4222,8 +4239,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: ui3("combinator", { combinator: { arg: "" } }) } } },
-                      right: { node: { component: "chrome/TextButton", on: { onClick: ui3("addGroup") }, children: [text3({ value: "+ group" })] } }
+                      left: { node: { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Combinator" }, options: { value: COMBINATORS }, value: { input: "view.combinator" } }, on: { onChange: ui4("combinator", { combinator: { arg: "" } }) } } },
+                      right: { node: { component: "chrome/TextButton", on: { onClick: ui4("addGroup") }, children: [text4({ value: "+ group" })] } }
                     }
                   }
                 ]
@@ -4245,18 +4262,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 ui5 = (intent) => applyFieldsUi(controller, intent);
+  const ui6 = (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(Column3, { children: [
+  return /* @__PURE__ */ jsxs4(Column4, { 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: () => ui5({ kind: "autoAssign" }), children: "Auto-assign" }),
-          view.manualApply ? /* @__PURE__ */ jsx4(TextButton, { strong: true, disabled: view.applyDisabled, onClick: () => ui5({ kind: "apply" }), children: "Apply" }) : null
+          /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui6({ kind: "autoAssign" }), children: "Auto-assign" }),
+          view.manualApply ? /* @__PURE__ */ jsx4(TextButton, { strong: true, disabled: view.applyDisabled, onClick: () => ui6({ kind: "apply" }), children: "Apply" }) : null
         ] })
       }
     ),
@@ -4268,7 +4285,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: () => ui5({ kind: "focus", columnId: column.id })
+          onClick: () => ui6({ kind: "focus", columnId: column.id })
         },
         column.id
       )) }) }),
@@ -4280,11 +4297,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) => ui5({ kind: "aggregate", shelfId: entry.shelfId, columnId: entry.columnId, fn }) }) : null,
-              entry.sortable ? /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui5({ 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) => ui6({ kind: "aggregate", shelfId: entry.shelfId, columnId: entry.columnId, fn }) }) : null,
+              entry.sortable ? /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui6({ 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: () => ui5({ kind: "remove", shelfId: entry.shelfId, columnId: entry.columnId }) })
+            trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: entry.removeLabel, onClick: () => ui6({ kind: "remove", shelfId: entry.shelfId, columnId: entry.columnId }) })
           },
           entry.columnId
         )) }) : null
@@ -4295,15 +4312,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: () => ui5({ kind: "addFilter" }) }),
+          actions: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(PlusGlyph, { size: 11 }), label: "Add filter", onClick: () => ui6({ 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) => ui5({ kind: "filterOp", index: filter.index, op }) }) : null,
-                trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: filter.removeLabel, onClick: () => ui5({ kind: "removeFilter", index: filter.index }) })
+                meta: filter.leaf ? /* @__PURE__ */ jsx4(Select, { size: "sm", label: "Operator", options: filter.ops, value: filter.op, onChange: (op) => ui6({ kind: "filterOp", index: filter.index, op }) }) : null,
+                trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: filter.removeLabel, onClick: () => ui6({ kind: "removeFilter", index: filter.index }) })
               },
               filter.key
             )) }) : null,
@@ -4311,8 +4328,8 @@ function FieldsPanelView({ controller, showStats, manualApply }) {
               Toolbar4,
               {
                 divided: false,
-                left: /* @__PURE__ */ jsx4(SegmentedControl4, { size: "sm", label: "Combinator", options: COMBINATORS2, value: view.combinator, onChange: (combinator) => ui5({ kind: "combinator", combinator }) }),
-                right: /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui5({ kind: "addGroup" }), children: "+ group" })
+                left: /* @__PURE__ */ jsx4(SegmentedControl4, { size: "sm", label: "Combinator", options: COMBINATORS2, value: view.combinator, onChange: (combinator) => ui6({ kind: "combinator", combinator }) }),
+                right: /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui6({ kind: "addGroup" }), children: "+ group" })
               }
             )
           ]
@@ -5463,10 +5480,10 @@ function parseJsonPath(path) {
   }
   return steps;
 }
-function findBracketEnd(text5, start) {
+function findBracketEnd(text6, start) {
   let quote = null;
-  for (let i = start + 1; i < text5.length; i += 1) {
-    const char = text5[i];
+  for (let i = start + 1; i < text6.length; i += 1) {
+    const char = text6[i];
     if (quote) {
       if (char === "\\") i += 1;
       else if (char === quote) quote = null;
@@ -5890,9 +5907,9 @@ function firstGraphqlError(errors) {
 }
 
 // src/data/connectors/executors/csv.ts
-function sniffDelimiter(text5) {
+function sniffDelimiter(text6) {
   const candidates = [",", ";", "	", "|"];
-  const line = firstLogicalLine(text5);
+  const line = firstLogicalLine(text6);
   let best = ",";
   let bestCount = 0;
   for (const candidate of candidates) {
@@ -5914,21 +5931,21 @@ function sniffDelimiter(text5) {
   }
   return best;
 }
-function firstLogicalLine(text5) {
+function firstLogicalLine(text6) {
   let inQuotes = false;
-  for (let i = 0; i < text5.length; i += 1) {
-    const char = text5[i];
+  for (let i = 0; i < text6.length; i += 1) {
+    const char = text6[i];
     if (char === '"') {
-      if (inQuotes && text5[i + 1] === '"') i += 1;
+      if (inQuotes && text6[i + 1] === '"') i += 1;
       else inQuotes = !inQuotes;
     } else if ((char === "\n" || char === "\r") && !inQuotes) {
-      return text5.slice(0, i);
+      return text6.slice(0, i);
     }
   }
-  return text5;
+  return text6;
 }
-function parseCsv(text5, options = {}) {
-  const source = text5.charCodeAt(0) === 65279 ? text5.slice(1) : text5;
+function parseCsv(text6, options = {}) {
+  const source = text6.charCodeAt(0) === 65279 ? text6.slice(1) : text6;
   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;
@@ -5963,17 +5980,17 @@ function dedupe(names) {
     return count === 0 ? name : `${name}_${count + 1}`;
   });
 }
-function scanRecords(text5, delimiter, quote) {
+function scanRecords(text6, delimiter, quote) {
   const records = [];
   let fields = [];
   let field = "";
   let inQuotes = false;
   let i = 0;
-  while (i < text5.length) {
-    const char = text5[i];
+  while (i < text6.length) {
+    const char = text6[i];
     if (inQuotes) {
       if (char === quote) {
-        if (text5[i + 1] === quote) {
+        if (text6[i + 1] === quote) {
           field += quote;
           i += 2;
           continue;
@@ -5991,7 +6008,7 @@ function scanRecords(text5, delimiter, quote) {
       i += 1;
       continue;
     }
-    if (text5.startsWith(delimiter, i)) {
+    if (text6.startsWith(delimiter, i)) {
       fields.push(field);
       field = "";
       i += delimiter.length;
@@ -6002,7 +6019,7 @@ function scanRecords(text5, delimiter, quote) {
       records.push(fields);
       fields = [];
       field = "";
-      i += char === "\r" && text5[i + 1] === "\n" ? 2 : 1;
+      i += char === "\r" && text6[i + 1] === "\n" ? 2 : 1;
       continue;
     }
     field += char;
@@ -6572,12 +6589,12 @@ import { useSyncExternalStore as useSyncExternalStore5 } from "react";
 import {
   Badge as Badge5,
   Code,
-  Column as Column4,
+  Column as Column5,
   EmptyState as EmptyState5,
   Field,
   FieldGroup,
   IconButton as IconButton4,
-  Input,
+  Input as Input2,
   Link,
   Note as Note2,
   Row as Row2,
@@ -6585,7 +6602,7 @@ import {
   ScrollArea as ScrollArea4,
   Select as Select2,
   StatusBar as StatusBar5,
-  Text as Text2,
+  Text as Text3,
   TextButton as TextButton2,
   Toggle,
   Toolbar as Toolbar5,
@@ -6738,13 +6755,13 @@ var connectorsViewManifest = {
   outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, \u2026 } \u2014 applied by the runtime to the controller." }],
   commands: []
 };
-var EMPTY4 = { listing: true, sources: [], empty: true, emptyHint: "Paste CSV or JSON to start with an inline source \u2014 no setup needed.", listed: false, countLabel: "0 sources", form: false, formTitle: "", formBroken: false, formReady: false, fields: [], submitDisabled: true };
-var BEHAVIOURS4 = {
-  "data/connectorsPanelView": (inputs) => inputs.view ?? EMPTY4
+var EMPTY5 = { listing: true, sources: [], empty: true, emptyHint: "Paste CSV or JSON to start with an inline source \u2014 no setup needed.", listed: false, countLabel: "0 sources", form: false, formTitle: "", formBroken: false, formReady: false, fields: [], submitDisabled: true };
+var BEHAVIOURS5 = {
+  "data/connectorsPanelView": (inputs) => inputs.view ?? EMPTY5
 };
 var CONNECTORS_RUNTIME_UNITS = [];
-var text4 = (b) => ({ component: "text", props: { text: b } });
-var ui4 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var text5 = (b) => ({ component: "text", props: { text: b } });
+var ui5 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
 var CONNECTORS_DECLARATION = {
   format: "xeno.block@1",
   manifest: connectorsViewManifest,
@@ -6756,7 +6773,7 @@ var CONNECTORS_DECLARATION = {
         component: "chrome/Column",
         when: { input: "view.listing" },
         children: [
-          { component: "chrome/Toolbar", props: { right: { node: { component: "chrome/ToolbarGroup", props: { end: { value: true } }, children: [{ component: "chrome/IconButton", props: { icon: { node: { component: "icons/Refresh" } }, label: { value: "Refresh all" } }, on: { onClick: ui4("refreshAll") } }] } } } },
+          { component: "chrome/Toolbar", props: { right: { node: { component: "chrome/ToolbarGroup", props: { end: { value: true } }, children: [{ component: "chrome/IconButton", props: { icon: { node: { component: "icons/Refresh" } }, label: { value: "Refresh all" } }, on: { onClick: ui5("refreshAll") } }] } } } },
           { component: "chrome/EmptyState", when: { input: "view.empty" }, props: { title: { value: "No sources" }, hint: { input: "view.emptyHint" } } },
           {
             component: "chrome/ScrollArea",
@@ -6769,8 +6786,8 @@ var CONNECTORS_DECLARATION = {
                   {
                     component: "chrome/Row",
                     each: { input: "view.sources", key: "id" },
-                    props: { icon: { node: { component: "icons/Plug" } }, label: { item: "name" }, meta: { item: "kind" }, selected: { item: "selected" }, disabled: { item: "disabled" }, title: { item: "title" }, trailing: { node: { component: "chrome/Badge", props: { tone: { item: "tone" } }, children: [text4({ item: "health" })] } } },
-                    on: { onClick: ui4("select", { id: { item: "id" } }) }
+                    props: { icon: { node: { component: "icons/Plug" } }, label: { item: "name" }, meta: { item: "kind" }, selected: { item: "selected" }, disabled: { item: "disabled" }, title: { item: "title" }, trailing: { node: { component: "chrome/Badge", props: { tone: { item: "tone" } }, children: [text5({ item: "health" })] } } },
+                    on: { onClick: ui5("select", { id: { item: "id" } }) }
                   }
                 ]
               }
@@ -6783,25 +6800,25 @@ var CONNECTORS_DECLARATION = {
         component: "chrome/Column",
         when: { input: "view.form" },
         children: [
-          { component: "chrome/Toolbar", props: { left: { node: { component: "chrome/Text", props: { role: { value: "title" } }, children: [text4({ input: "view.formTitle" })] } } } },
+          { component: "chrome/Toolbar", props: { left: { node: { component: "chrome/Text", props: { role: { value: "title" } }, children: [text5({ input: "view.formTitle" })] } } } },
           { component: "chrome/EmptyState", when: { input: "view.formBroken" }, props: { title: { value: "This connection cannot be set up" }, hint: { input: "view.formProblem" } } },
           {
             component: "chrome/Toolbar",
             when: { input: "view.formBroken" },
-            props: { divided: { value: false }, right: { node: { component: "chrome/ToolbarGroup", props: { end: { value: true } }, children: [{ component: "chrome/TextButton", on: { onClick: ui4("cancel") }, children: [text4({ value: "Close" })] }] } } }
+            props: { divided: { value: false }, right: { node: { component: "chrome/ToolbarGroup", props: { end: { value: true } }, children: [{ component: "chrome/TextButton", on: { onClick: ui5("cancel") }, children: [text5({ value: "Close" })] }] } } }
           },
           {
             component: "chrome/ScrollArea",
             when: { input: "view.formReady" },
             children: [
-              { component: "chrome/Note", when: { input: "view.formMessage" }, children: [text4({ input: "view.formMessage" })] },
+              { component: "chrome/Note", when: { input: "view.formMessage" }, children: [text5({ input: "view.formMessage" })] },
               {
                 component: "fragment",
                 when: { input: "view.redirectUri" },
                 children: [
-                  { component: "chrome/Note", children: [text4({ value: "Add this exact redirect URI to the provider:" })] },
+                  { component: "chrome/Note", children: [text5({ value: "Add this exact redirect URI to the provider:" })] },
                   // VERBATIM. Rendering the real string is what prevents a redirect-URI mismatch.
-                  { component: "chrome/Code", props: { variant: { value: "flush" } }, children: [text4({ input: "view.redirectUri" })] }
+                  { component: "chrome/Code", props: { variant: { value: "flush" } }, children: [text5({ input: "view.redirectUri" })] }
                 ]
               },
               {
@@ -6812,14 +6829,14 @@ var CONNECTORS_DECLARATION = {
                     each: { input: "view.fields", key: "key" },
                     props: { label: { item: "label" }, hint: { item: "hint" } },
                     children: [
-                      { component: "chrome/Input", when: { item: "isText" }, props: { type: { item: "inputType" }, value: { item: "text" }, placeholder: { item: "placeholder" }, autoComplete: { value: "off" }, label: { item: "label" } }, on: { onChange: ui4("field", { key: { item: "key" }, value: { arg: "" } }) } },
-                      { component: "chrome/Select", when: { item: "isSelect" }, props: { options: { item: "options" }, value: { item: "text" }, placeholder: { value: "" }, label: { item: "label" } }, on: { onChange: ui4("field", { key: { item: "key" }, value: { arg: "" } }) } },
-                      { component: "chrome/Toggle", when: { item: "isBoolean" }, props: { checked: { item: "checked" }, label: { item: "label" } }, on: { onChange: ui4("field", { key: { item: "key" }, value: { arg: "" } }) } }
+                      { component: "chrome/Input", when: { item: "isText" }, props: { type: { item: "inputType" }, value: { item: "text" }, placeholder: { item: "placeholder" }, autoComplete: { value: "off" }, label: { item: "label" } }, on: { onChange: ui5("field", { key: { item: "key" }, value: { arg: "" } }) } },
+                      { component: "chrome/Select", when: { item: "isSelect" }, props: { options: { item: "options" }, value: { item: "text" }, placeholder: { value: "" }, label: { item: "label" } }, on: { onChange: ui5("field", { key: { item: "key" }, value: { arg: "" } }) } },
+                      { component: "chrome/Toggle", when: { item: "isBoolean" }, props: { checked: { item: "checked" }, label: { item: "label" } }, on: { onChange: ui5("field", { key: { item: "key" }, value: { arg: "" } }) } }
                     ]
                   }
                 ]
               },
-              { component: "chrome/Note", when: { input: "view.docsUrl" }, children: [{ component: "chrome/Link", props: { href: { input: "view.docsUrl" } }, children: [text4({ value: "Where do I get this?" })] }] }
+              { component: "chrome/Note", when: { input: "view.docsUrl" }, children: [{ component: "chrome/Link", props: { href: { input: "view.docsUrl" } }, children: [text5({ value: "Where do I get this?" })] }] }
             ]
           },
           {
@@ -6832,8 +6849,8 @@ var CONNECTORS_DECLARATION = {
                   component: "chrome/ToolbarGroup",
                   props: { end: { value: true } },
                   children: [
-                    { component: "chrome/TextButton", on: { onClick: ui4("cancel") }, children: [text4({ value: "Cancel" })] },
-                    { component: "chrome/TextButton", props: { strong: { value: true }, disabled: { input: "view.submitDisabled" } }, on: { onClick: ui4("submit") }, children: [text4({ value: "Connect" })] }
+                    { component: "chrome/TextButton", on: { onClick: ui5("cancel") }, children: [text5({ value: "Cancel" })] },
+                    { component: "chrome/TextButton", props: { strong: { value: true }, disabled: { input: "view.submitDisabled" } }, on: { onClick: ui5("submit") }, children: [text5({ value: "Connect" })] }
                   ]
                 }
               }
@@ -6852,10 +6869,10 @@ var RefreshGlyph2 = ICONS["icons/Refresh"];
 function ConnectorsPanelView({ controller, emptyHint }) {
   useSyncExternalStore5(controller.subscribe, controller.getState, controller.getState);
   const view = connectorsViewState(controller, { emptyHint });
-  const ui5 = (intent) => applyConnectorsUi(controller, intent);
+  const ui6 = (intent) => applyConnectorsUi(controller, intent);
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    view.listing ? /* @__PURE__ */ jsxs5(Column4, { children: [
-      /* @__PURE__ */ jsx5(Toolbar5, { right: /* @__PURE__ */ jsx5(ToolbarGroup4, { end: true, children: /* @__PURE__ */ jsx5(IconButton4, { icon: /* @__PURE__ */ jsx5(RefreshGlyph2, {}), label: "Refresh all", onClick: () => ui5({ kind: "refreshAll" }) }) }) }),
+    view.listing ? /* @__PURE__ */ jsxs5(Column5, { children: [
+      /* @__PURE__ */ jsx5(Toolbar5, { right: /* @__PURE__ */ jsx5(ToolbarGroup4, { end: true, children: /* @__PURE__ */ jsx5(IconButton4, { icon: /* @__PURE__ */ jsx5(RefreshGlyph2, {}), label: "Refresh all", onClick: () => ui6({ kind: "refreshAll" }) }) }) }),
       view.empty ? /* @__PURE__ */ jsx5(EmptyState5, { title: "No sources", hint: view.emptyHint }) : null,
       view.listed ? /* @__PURE__ */ jsx5(ScrollArea4, { children: /* @__PURE__ */ jsx5(RowList2, { role: "listbox", "aria-label": "Data sources", children: view.sources.map((source) => /* @__PURE__ */ jsx5(
         Row2,
@@ -6867,16 +6884,16 @@ function ConnectorsPanelView({ controller, emptyHint }) {
           disabled: source.disabled,
           title: source.title,
           trailing: /* @__PURE__ */ jsx5(Badge5, { tone: source.tone, children: source.health }),
-          onClick: () => ui5({ kind: "select", id: source.id })
+          onClick: () => ui6({ kind: "select", id: source.id })
         },
         source.id
       )) }) }) : null,
       /* @__PURE__ */ jsx5(StatusBar5, { left: view.countLabel, right: view.busyLabel })
     ] }) : null,
-    view.form ? /* @__PURE__ */ jsxs5(Column4, { children: [
-      /* @__PURE__ */ jsx5(Toolbar5, { left: /* @__PURE__ */ jsx5(Text2, { role: "title", children: view.formTitle }) }),
+    view.form ? /* @__PURE__ */ jsxs5(Column5, { children: [
+      /* @__PURE__ */ jsx5(Toolbar5, { left: /* @__PURE__ */ jsx5(Text3, { role: "title", children: view.formTitle }) }),
       view.formBroken ? /* @__PURE__ */ jsx5(EmptyState5, { title: "This connection cannot be set up", hint: view.formProblem }) : null,
-      view.formBroken ? /* @__PURE__ */ jsx5(Toolbar5, { divided: false, right: /* @__PURE__ */ jsx5(ToolbarGroup4, { end: true, children: /* @__PURE__ */ jsx5(TextButton2, { onClick: () => ui5({ kind: "cancel" }), children: "Close" }) }) }) : null,
+      view.formBroken ? /* @__PURE__ */ jsx5(Toolbar5, { divided: false, right: /* @__PURE__ */ jsx5(ToolbarGroup4, { end: true, children: /* @__PURE__ */ jsx5(TextButton2, { onClick: () => ui6({ kind: "cancel" }), children: "Close" }) }) }) : null,
       view.formReady ? /* @__PURE__ */ jsxs5(ScrollArea4, { children: [
         view.formMessage ? /* @__PURE__ */ jsx5(Note2, { children: view.formMessage }) : null,
         view.redirectUri ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
@@ -6884,9 +6901,9 @@ function ConnectorsPanelView({ controller, emptyHint }) {
           /* @__PURE__ */ jsx5(Code, { variant: "flush", children: view.redirectUri })
         ] }) : null,
         /* @__PURE__ */ jsx5(FieldGroup, { children: view.fields.map((field) => /* @__PURE__ */ jsxs5(Field, { label: field.label, hint: field.hint, children: [
-          field.isText ? /* @__PURE__ */ jsx5(Input, { type: field.inputType, value: field.text, placeholder: field.placeholder, autoComplete: "off", label: field.label, onChange: (value) => ui5({ kind: "field", key: field.key, value }) }) : null,
-          field.isSelect ? /* @__PURE__ */ jsx5(Select2, { options: field.options, value: field.text, placeholder: "", label: field.label, onChange: (value) => ui5({ kind: "field", key: field.key, value }) }) : null,
-          field.isBoolean ? /* @__PURE__ */ jsx5(Toggle, { checked: field.checked, label: field.label, onChange: (value) => ui5({ kind: "field", key: field.key, value }) }) : null
+          field.isText ? /* @__PURE__ */ jsx5(Input2, { type: field.inputType, value: field.text, placeholder: field.placeholder, autoComplete: "off", label: field.label, onChange: (value) => ui6({ kind: "field", key: field.key, value }) }) : null,
+          field.isSelect ? /* @__PURE__ */ jsx5(Select2, { options: field.options, value: field.text, placeholder: "", label: field.label, onChange: (value) => ui6({ kind: "field", key: field.key, value }) }) : null,
+          field.isBoolean ? /* @__PURE__ */ jsx5(Toggle, { checked: field.checked, label: field.label, onChange: (value) => ui6({ kind: "field", key: field.key, value }) }) : null
         ] }, field.key)) }),
         view.docsUrl ? /* @__PURE__ */ jsx5(Note2, { children: /* @__PURE__ */ jsx5(Link, { href: view.docsUrl, children: "Where do I get this?" }) }) : null
       ] }) : null,
@@ -6895,8 +6912,8 @@ function ConnectorsPanelView({ controller, emptyHint }) {
         {
           divided: false,
           right: /* @__PURE__ */ jsxs5(ToolbarGroup4, { end: true, children: [
-            /* @__PURE__ */ jsx5(TextButton2, { onClick: () => ui5({ kind: "cancel" }), children: "Cancel" }),
-            /* @__PURE__ */ jsx5(TextButton2, { strong: true, disabled: view.submitDisabled, onClick: () => ui5({ kind: "submit" }), children: "Connect" })
+            /* @__PURE__ */ jsx5(TextButton2, { onClick: () => ui6({ kind: "cancel" }), children: "Cancel" }),
+            /* @__PURE__ */ jsx5(TextButton2, { strong: true, disabled: view.submitDisabled, onClick: () => ui6({ kind: "submit" }), children: "Connect" })
           ] })
         }
       ) : null
@@ -7218,14 +7235,14 @@ export {
   AGENT_HIDDEN_COMMANDS,
   ALL_AGGREGATES,
   ALL_CHART_TYPES,
-  BEHAVIOURS as CHART_BEHAVIOURS,
+  BEHAVIOURS2 as CHART_BEHAVIOURS,
   CHART_DECLARATION,
   CHART_EMPTY_FILL,
   CHART_PALETTE_STEPS,
   CHART_PANEL_ID,
   CHART_RUNTIME_UNITS,
   CHART_TYPE_LABELS,
-  BEHAVIOURS4 as CONNECTORS_BEHAVIOURS,
+  BEHAVIOURS5 as CONNECTORS_BEHAVIOURS,
   CONNECTORS_DECLARATION,
   CONNECTORS_PANEL_ID,
   CONNECTORS_RUNTIME_UNITS,
@@ -7241,14 +7258,14 @@ export {
   DEFAULT_RANGES,
   EMPTY_LAYOUT,
   EXPIRY_SKEW_MS,
-  BEHAVIOURS3 as FIELDS_BEHAVIOURS,
+  BEHAVIOURS4 as FIELDS_BEHAVIOURS,
   FIELDS_DECLARATION,
   FIELDS_PANEL_ID,
   FIELDS_RUNTIME_UNITS,
   FieldsController,
   FieldsPanelView,
   IMPLEMENTED_VIEW_MODES,
-  BEHAVIOURS2 as METRICS_BEHAVIOURS,
+  BEHAVIOURS3 as METRICS_BEHAVIOURS,
   METRICS_DECLARATION,
   METRICS_PANEL_ID,
   METRICS_RUNTIME_UNITS,
@@ -7259,14 +7276,19 @@ export {
   MetricsPanelView,
   SECRET_HEADER_NAMES,
   SHELF_PRESETS,
+  BEHAVIOURS as TABLE_BEHAVIOURS,
+  TABLE_DECLARATION,
   TABLE_PANEL_ID,
+  TABLE_RUNTIME_UNITS,
   TableController,
   TablePanelView,
+  TableScroller,
   applyChartUi,
   applyConnectorsUi,
   applyFieldsUi,
   applyMetricsUi,
   applyPrecision,
+  applyTableUi,
   base64Url,
   breachSideOf,
   browserFetch,
@@ -7372,6 +7394,9 @@ export {
   suggestedShelfFor,
   tableManifest,
   tablePanel,
+  tableRuntimeComponents,
+  tableViewManifest,
+  tableViewState,
   toChartJsConfig,
   toExecuteError,
   totalWidth,