@xenosystem/blocks 0.13.7 → 0.13.9

package/dist/data/index.js

@@ -6,15 +6,16 @@ import {
   quoteLiteral,
   renderFilterGroup
 } from "../chunk-DJJGZ6U4.js";
+import {
+  ICONS
+} from "../chunk-W4PTX2Y4.js";
 import {
   ChevronGlyph,
   DownloadGlyph,
   PlugGlyph,
-  PlusGlyph,
   RefreshGlyph,
   SortAscGlyph,
-  SortDescGlyph,
-  XGlyph
+  SortDescGlyph
 } from "../chunk-K7YLLV2W.js";
 import "../chunk-2KG3PWR4.js";
 
@@ -197,8 +198,8 @@ function moveCell(from, delta, bounds) {
 }
 
 // src/data/table/numeric.ts
-function parseNumeric(text) {
-  const trimmed = String(text).trim();
+function parseNumeric(text2) {
+  const trimmed = String(text2).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" };
@@ -552,11 +553,11 @@ var TableController = class {
     return true;
   }
   /** Update the in-flight draft. Emits `editPreview` only when `livePreview` is on. */
-  updateDraft(text) {
+  updateDraft(text2) {
     if (!this.editing) return;
-    this.editing = { ...this.editing, draft: text };
+    this.editing = { ...this.editing, draft: text2 };
     if (this.livePreview) {
-      const parsed = this.parseDraft(this.editing.columnId, text);
+      const parsed = this.parseDraft(this.editing.columnId, text2);
       if (parsed.ok) {
         this.host.emit("editPreview", this.buildEdit(this.editing, parsed.value));
       }
@@ -608,12 +609,12 @@ var TableController = class {
     };
   }
   /** Parse a draft according to the column's declared type. */
-  parseDraft(columnId, text) {
+  parseDraft(columnId, text2) {
     const column = this.columnById(columnId);
-    const trimmed = text.trim();
+    const trimmed = text2.trim();
     if (column?.type === "number" || column?.type === "integer" || column?.type === "duration") {
       if (trimmed === "") return { ok: true, value: null };
-      const parsed = parseNumeric(text);
+      const parsed = parseNumeric(text2);
       if (!parsed.ok) return { ok: false, reason: parsed.reason };
       return { ok: true, value: normalizeNumeric(parsed.value, constraintsOfColumn(column)) };
     }
@@ -630,7 +631,7 @@ var TableController = class {
         value: trimmed === "" ? [] : trimmed.split(",").map((part) => part.trim()).filter(Boolean)
       };
     }
-    return { ok: true, value: trimmed === "" ? null : text };
+    return { ok: true, value: trimmed === "" ? null : text2 };
   }
   rowById(rowId) {
     return this.result?.rows.find((r) => r.id === rowId);
@@ -3239,7 +3240,7 @@ function emptyFilterGroup() {
 function offerableFilterOps(column, sourceOps = []) {
   const common = ["eq", "ne", "isEmpty", "isNotEmpty", "in", "notIn"];
   const ordered = ["gt", "gte", "lt", "lte", "between"];
-  const text = ["contains", "notContains", "startsWith", "endsWith"];
+  const text2 = ["contains", "notContains", "startsWith", "endsWith"];
   const temporal = ["relative"];
   let ops = [...common];
   switch (column?.type) {
@@ -3257,10 +3258,10 @@ function offerableFilterOps(column, sourceOps = []) {
     case "url":
     case "select":
     case "multiselect":
-      ops = [...ops, ...text];
+      ops = [...ops, ...text2];
       break;
     default:
-      ops = [...ops, ...text, ...ordered];
+      ops = [...ops, ...text2, ...ordered];
   }
   if (sourceOps.length === 0) return ops;
   return ops.filter((op) => sourceOps.includes(op));
@@ -3891,233 +3892,363 @@ var fieldsManifest = {
 import { useSyncExternalStore as useSyncExternalStore4 } from "react";
 import {
   Badge as Badge4,
+  Column,
   EmptyState as EmptyState4,
   IconButton as IconButton3,
+  Note,
   Row,
   RowList,
   ScrollArea as ScrollArea3,
   Section,
   SegmentedControl as SegmentedControl4,
+  Select,
   StatusBar as StatusBar4,
   TextButton,
   Toolbar as Toolbar4,
   ToolbarGroup as ToolbarGroup3
 } from "@xenosystem/components/chrome";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function FieldsPanelView({
-  controller,
-  showStats = true,
-  manualApply = false
-}) {
-  const state = useSyncExternalStore4(controller.subscribe, controller.getState, controller.getState);
-  if (state.columns.length === 0) {
-    return /* @__PURE__ */ jsx4(
-      EmptyState4,
+
+// src/data/fields/declaration.ts
+var COMBINATORS = [{ value: "and", label: "All" }, { value: "or", label: "Any" }];
+function fieldsViewState(c, options = {}) {
+  const s = c.getState();
+  const showStats = options.showStats ?? true;
+  const manualApply = options.manualApply ?? false;
+  const columnOf = (id) => s.columns.find((col) => col.id === id);
+  const shelves = s.shelves.filter((shelf) => shelf.id !== "filters").map((shelf) => {
+    const entries = s.entries[shelf.id] ?? [];
+    return {
+      id: shelf.id,
+      label: shelf.label,
+      count: entries.length,
+      hasEntries: entries.length > 0,
+      empty: entries.length === 0,
+      hint: shelf.hint ?? `Drop a ${shelf.accepts.join(" or ")} here.`,
+      entries: entries.map((entry) => {
+        const column = columnOf(entry.columnId);
+        return {
+          shelfId: shelf.id,
+          columnId: entry.columnId,
+          label: entry.label ?? column?.name ?? entry.columnId,
+          suggested: entry.suggested === true,
+          aggregated: shelf.aggregated === true,
+          fn: entry.fn ?? "count",
+          aggregates: shelf.aggregated ? offerableAggregates(column, s.allowedAggregates).map((fn) => ({ value: fn, label: fn })) : [],
+          sortable: !shelf.aggregated && shelf.id === "sorts",
+          direction: entry.direction === "desc" ? "desc" : "asc",
+          granularity: !shelf.aggregated && shelf.id !== "sorts" ? entry.granularity : void 0,
+          removeLabel: `Remove ${column?.name ?? entry.columnId}`
+        };
+      })
+    };
+  });
+  const filters = s.filters.filters.map((member, index) => {
+    if (!isLeafFilter(member)) {
+      return { key: `g${index}`, index, leaf: false, label: `(${member.combinator.toUpperCase()} group \u2014 ${member.filters.length})`, op: "", ops: [], removeLabel: "Remove group" };
+    }
+    const column = columnOf(member.columnId);
+    return {
+      key: `f${index}`,
+      index,
+      leaf: true,
+      label: column?.name ?? member.columnId,
+      op: member.op,
+      ops: offerableFilterOps(column, s.allowedFilterOps).map((op) => ({ value: op, label: op })),
+      removeLabel: "Remove filter"
+    };
+  });
+  return {
+    hasColumns: s.columns.length > 0,
+    noColumns: s.columns.length === 0,
+    sampleWarning: s.sampleWarning ?? void 0,
+    sampled: !!s.sampleWarning,
+    manualApply,
+    applyDisabled: !s.dirty,
+    columns: s.columns.map((column) => {
+      const stat = showStats ? s.stats[column.id] : void 0;
+      return { id: column.id, name: column.name, role: column.role ?? "dimension", focused: s.focusedColumnId === column.id, stat: stat ? String(stat.distinct ?? 0) : void 0, statTitle: stat ? `${stat.nulls ?? 0} empty` : void 0 };
+    }),
+    shelves,
+    filters,
+    filterCount: s.filters.filters.length,
+    hasFilters: s.filters.filters.length > 0,
+    noFilters: s.filters.filters.length === 0,
+    combinator: s.filters.combinator,
+    countLabel: `${s.columns.length} field${s.columns.length === 1 ? "" : "s"}`,
+    dirtyLabel: s.dirty ? "unapplied" : void 0
+  };
+}
+function applyFieldsUi(c, intent) {
+  switch (intent.kind) {
+    case "autoAssign":
+      c.autoAssign();
+      break;
+    case "apply":
+      c.apply(true);
+      break;
+    case "focus":
+      c.focusColumn(intent.columnId);
+      break;
+    case "remove":
+      c.removeFromShelf(intent.shelfId, intent.columnId);
+      break;
+    case "aggregate":
+      c.setAggregate(intent.shelfId, intent.columnId, intent.fn);
+      break;
+    case "direction":
+      c.toggleDirection(intent.shelfId, intent.columnId);
+      break;
+    case "addFilter": {
+      const column = c.getState().columns[0];
+      if (column) c.addFilter([], { columnId: column.id, op: "eq", value: null });
+      break;
+    }
+    case "addGroup":
+      c.addFilterGroup([]);
+      break;
+    case "filterOp":
+      c.updateFilter([], intent.index, { op: intent.op });
+      break;
+    case "removeFilter":
+      c.removeFilter([], intent.index);
+      break;
+    case "combinator":
+      c.setCombinator([], intent.combinator);
+      break;
+  }
+}
+var fieldsViewManifest = {
+  id: fieldsManifest.id,
+  version: "1.0.0",
+  title: "Fields",
+  category: "data",
+  layout: { slot: "side" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The FieldsViewModel the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, \u2026 } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+var EMPTY = { hasColumns: false, noColumns: true, sampled: false, manualApply: false, applyDisabled: true, columns: [], shelves: [], filters: [], filterCount: 0, hasFilters: false, noFilters: true, combinator: "and", countLabel: "0 fields" };
+var BEHAVIOURS = {
+  "data/fieldsPanelView": (inputs) => inputs.view ?? EMPTY
+};
+var FIELDS_RUNTIME_UNITS = [];
+var text = (b) => ({ component: "text", props: { text: b } });
+var ui = (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 },
+  on: { onClick: on }
+});
+var FIELDS_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: fieldsViewManifest,
+  behaviour: "data/fieldsPanelView",
+  composition: {
+    component: "fragment",
+    children: [
+      { component: "chrome/EmptyState", when: { input: "view.noColumns" }, props: { title: { value: "No fields" }, hint: { value: "Connect a source \u2014 its columns appear here, ready to drop onto a shelf." } } },
       {
-        title: "No fields",
-        hint: "Connect a source \u2014 its columns appear here, ready to drop onto a shelf."
+        component: "chrome/Column",
+        when: { input: "view.hasColumns" },
+        children: [
+          {
+            component: "chrome/Toolbar",
+            props: {
+              left: { node: { component: "chrome/Badge", when: { input: "view.sampled" }, props: { tone: { value: "warning" }, title: { input: "view.sampleWarning" } }, children: [text({ value: "sampled schema" })] } },
+              right: {
+                node: {
+                  component: "chrome/ToolbarGroup",
+                  props: { end: { value: true } },
+                  children: [
+                    { component: "chrome/TextButton", on: { onClick: ui("autoAssign") }, children: [text({ value: "Auto-assign" })] },
+                    { component: "chrome/TextButton", when: { input: "view.manualApply" }, props: { strong: { value: true }, disabled: { input: "view.applyDisabled" } }, on: { onClick: ui("apply") }, children: [text({ value: "Apply" })] }
+                  ]
+                }
+              }
+            }
+          },
+          {
+            component: "chrome/ScrollArea",
+            children: [
+              {
+                component: "chrome/Section",
+                props: { title: { value: "Fields" }, flush: { value: true } },
+                children: [
+                  {
+                    component: "chrome/RowList",
+                    props: { role: { value: "listbox" }, "aria-label": { value: "Fields" } },
+                    children: [
+                      {
+                        component: "chrome/Row",
+                        each: { input: "view.columns", key: "id" },
+                        props: { label: { item: "name" }, meta: { item: "role" }, selected: { item: "focused" }, trailing: { node: { component: "chrome/Badge", when: { item: "stat" }, props: { title: { item: "statTitle" } }, children: [text({ item: "stat" })] } } },
+                        on: { onClick: ui("focus", { columnId: { item: "id" } }) }
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                component: "chrome/Section",
+                each: { input: "view.shelves", key: "id" },
+                props: { title: { item: "label" }, flush: { value: true }, badge: { node: { component: "chrome/Badge", when: { item: "hasEntries" }, children: [text({ item: "count" })] } } },
+                children: [
+                  { component: "chrome/Note", when: { item: "empty" }, children: [text({ item: "hint" })] },
+                  {
+                    component: "chrome/RowList",
+                    when: { item: "hasEntries" },
+                    children: [
+                      {
+                        component: "chrome/Row",
+                        each: { item: "entries", key: "columnId" },
+                        props: {
+                          label: { item: "label" },
+                          dimmed: { item: "suggested" },
+                          meta: {
+                            node: {
+                              component: "fragment",
+                              children: [
+                                { component: "chrome/Select", when: { item: "aggregated" }, props: { size: { value: "sm" }, label: { value: "Aggregate" }, options: { item: "aggregates" }, value: { item: "fn" } }, on: { onChange: ui("aggregate", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" }, fn: { arg: "" } }) } },
+                                { component: "chrome/TextButton", when: { item: "sortable" }, on: { onClick: ui("direction", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" } }) }, children: [text({ item: "direction" })] },
+                                { component: "chrome/Badge", when: { item: "granularity" }, children: [text({ item: "granularity" })] }
+                              ]
+                            }
+                          },
+                          trailing: { node: removeButton({ item: "removeLabel" }, ui("remove", { shelfId: { item: "shelfId" }, columnId: { item: "columnId" } })) }
+                        }
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                component: "chrome/Section",
+                props: {
+                  title: { value: "Filters" },
+                  flush: { value: true },
+                  badge: { node: { component: "chrome/Badge", when: { input: "view.hasFilters" }, children: [text({ input: "view.filterCount" })] } },
+                  actions: { node: { component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "icons/Plus", props: { size: { value: 11 } } } }, label: { value: "Add filter" } }, on: { onClick: ui("addFilter") } } }
+                },
+                children: [
+                  { component: "chrome/Note", when: { input: "view.noFilters" }, children: [text({ value: "No filters. Everything passes." })] },
+                  {
+                    component: "chrome/RowList",
+                    when: { input: "view.hasFilters" },
+                    children: [
+                      {
+                        component: "chrome/Row",
+                        each: { input: "view.filters", key: "key" },
+                        props: {
+                          label: { item: "label" },
+                          meta: { node: { component: "chrome/Select", when: { item: "leaf" }, props: { size: { value: "sm" }, label: { value: "Operator" }, options: { item: "ops" }, value: { item: "op" } }, on: { onChange: ui("filterOp", { index: { item: "index" }, op: { arg: "" } }) } } },
+                          trailing: { node: removeButton({ item: "removeLabel" }, ui("removeFilter", { index: { item: "index" } })) }
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    component: "chrome/Toolbar",
+                    props: {
+                      divided: { value: false },
+                      left: { node: { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Combinator" }, options: { value: COMBINATORS }, value: { input: "view.combinator" } }, on: { onChange: ui("combinator", { combinator: { arg: "" } }) } } },
+                      right: { node: { component: "chrome/TextButton", on: { onClick: ui("addGroup") }, children: [text({ value: "+ group" })] } }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          { component: "chrome/StatusBar", props: { left: { input: "view.countLabel" }, right: { input: "view.dirtyLabel" } } }
+        ]
       }
-    );
+    ]
   }
-  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+};
+
+// src/data/fields/react/FieldsPanelView.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var CloseGlyph = ICONS["icons/Close"];
+var PlusGlyph = ICONS["icons/Plus"];
+var COMBINATORS2 = [{ value: "and", label: "All" }, { value: "or", label: "Any" }];
+function FieldsPanelView({ controller, showStats, manualApply }) {
+  useSyncExternalStore4(controller.subscribe, controller.getState, controller.getState);
+  const view = fieldsViewState(controller, { showStats, manualApply });
+  const ui2 = (intent) => applyFieldsUi(controller, intent);
+  if (view.noColumns) {
+    return /* @__PURE__ */ jsx4(EmptyState4, { title: "No fields", hint: "Connect a source \u2014 its columns appear here, ready to drop onto a shelf." });
+  }
+  return /* @__PURE__ */ jsxs4(Column, { children: [
     /* @__PURE__ */ jsx4(
       Toolbar4,
       {
-        left: state.sampleWarning ? (
-          // An inferred shape is a GUESS; building a query on a guessed column is how a
-          // dashboard breaks next Tuesday.
-          // Badge has no title prop, so the tooltip lives on a wrapper.
-          /* @__PURE__ */ jsx4("span", { title: state.sampleWarning, children: /* @__PURE__ */ jsx4(Badge4, { tone: "warning", children: "sampled schema" }) })
-        ) : void 0,
+        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: () => controller.autoAssign(), children: "Auto-assign" }),
-          manualApply ? /* @__PURE__ */ jsx4(TextButton, { strong: true, disabled: !state.dirty, onClick: () => controller.apply(true), children: "Apply" }) : null
+          /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui2({ kind: "autoAssign" }), children: "Auto-assign" }),
+          view.manualApply ? /* @__PURE__ */ jsx4(TextButton, { strong: true, disabled: view.applyDisabled, onClick: () => ui2({ kind: "apply" }), children: "Apply" }) : null
         ] })
       }
     ),
     /* @__PURE__ */ jsxs4(ScrollArea3, { children: [
-      /* @__PURE__ */ jsx4(Section, { title: "Fields", flush: true, children: /* @__PURE__ */ jsx4(RowList, { children: state.columns.map((column) => /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx4(Section, { title: "Fields", flush: true, children: /* @__PURE__ */ jsx4(RowList, { role: "listbox", "aria-label": "Fields", children: view.columns.map((column) => /* @__PURE__ */ jsx4(
         Row,
         {
           label: column.name,
-          meta: column.role ?? "dimension",
-          selected: state.focusedColumnId === column.id,
-          onClick: () => controller.focusColumn(column.id),
-          trailing: showStats && state.stats[column.id] ? /* @__PURE__ */ jsx4("span", { title: `${state.stats[column.id]?.nulls ?? 0} empty`, children: /* @__PURE__ */ jsx4(Badge4, { children: String(state.stats[column.id]?.distinct ?? 0) }) }) : null
+          meta: column.role,
+          selected: column.focused,
+          trailing: column.stat ? /* @__PURE__ */ jsx4(Badge4, { title: column.statTitle, children: column.stat }) : null,
+          onClick: () => ui2({ kind: "focus", columnId: column.id })
         },
         column.id
       )) }) }),
-      state.shelves.filter((shelf) => shelf.id !== "filters").map((shelf) => {
-        const entries = state.entries[shelf.id] ?? [];
-        return /* @__PURE__ */ jsx4(
-          Section,
+      view.shelves.map((shelf) => /* @__PURE__ */ jsxs4(Section, { title: shelf.label, flush: true, badge: shelf.hasEntries ? /* @__PURE__ */ jsx4(Badge4, { children: shelf.count }) : null, children: [
+        shelf.empty ? /* @__PURE__ */ jsx4(Note, { children: shelf.hint }) : null,
+        shelf.hasEntries ? /* @__PURE__ */ jsx4(RowList, { children: shelf.entries.map((entry) => /* @__PURE__ */ jsx4(
+          Row,
           {
-            title: shelf.label,
-            badge: entries.length > 0 ? /* @__PURE__ */ jsx4(Badge4, { children: String(entries.length) }) : void 0,
-            flush: true,
-            children: entries.length === 0 ? /* @__PURE__ */ jsx4("div", { style: { padding: "4px 8px", fontSize: 10, opacity: 0.5 }, children: shelf.hint ?? `Drop a ${shelf.accepts.join(" or ")} here.` }) : /* @__PURE__ */ jsx4(RowList, { children: entries.map((entry) => {
-              const column = state.columns.find((c) => c.id === entry.columnId);
-              return /* @__PURE__ */ jsx4(
-                Row,
-                {
-                  label: entry.label ?? column?.name ?? entry.columnId,
-                  style: entry.suggested ? { opacity: 0.6 } : void 0,
-                  meta: shelf.aggregated ? /* @__PURE__ */ jsx4(
-                    AggregateSelect,
-                    {
-                      controller,
-                      shelfId: shelf.id,
-                      column,
-                      value: entry.fn ?? "count",
-                      allowed: state.allowedAggregates
-                    }
-                  ) : shelf.id === "sorts" ? /* @__PURE__ */ jsx4(
-                    TextButton,
-                    {
-                      onClick: () => controller.toggleDirection(shelf.id, entry.columnId),
-                      children: entry.direction === "desc" ? "desc" : "asc"
-                    }
-                  ) : entry.granularity ? /* @__PURE__ */ jsx4(Badge4, { children: entry.granularity }) : null,
-                  trailing: /* @__PURE__ */ jsx4(
-                    IconButton3,
-                    {
-                      size: "sm",
-                      icon: /* @__PURE__ */ jsx4(XGlyph, {}),
-                      label: `Remove ${column?.name ?? entry.columnId}`,
-                      onClick: () => controller.removeFromShelf(shelf.id, entry.columnId)
-                    }
-                  )
-                },
-                entry.columnId
-              );
-            }) })
+            label: entry.label,
+            dimmed: entry.suggested,
+            meta: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+              entry.aggregated ? /* @__PURE__ */ jsx4(Select, { size: "sm", label: "Aggregate", options: entry.aggregates, value: entry.fn, onChange: (fn) => ui2({ kind: "aggregate", shelfId: entry.shelfId, columnId: entry.columnId, fn }) }) : null,
+              entry.sortable ? /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui2({ kind: "direction", shelfId: entry.shelfId, columnId: entry.columnId }), children: entry.direction }) : null,
+              entry.granularity ? /* @__PURE__ */ jsx4(Badge4, { children: entry.granularity }) : null
+            ] }),
+            trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: entry.removeLabel, onClick: () => ui2({ kind: "remove", shelfId: entry.shelfId, columnId: entry.columnId }) })
           },
-          shelf.id
-        );
-      }),
-      /* @__PURE__ */ jsx4(FilterBuilder, { controller })
-    ] }),
-    /* @__PURE__ */ jsx4(
-      StatusBar4,
-      {
-        left: `${state.columns.length} field${state.columns.length === 1 ? "" : "s"}`,
-        right: state.dirty ? "unapplied" : void 0
-      }
-    )
-  ] });
-}
-function AggregateSelect({
-  controller,
-  shelfId,
-  column,
-  value,
-  allowed
-}) {
-  const options = offerableAggregates(column, allowed);
-  return /* @__PURE__ */ jsx4(
-    "select",
-    {
-      value,
-      onClick: (e) => e.stopPropagation(),
-      onChange: (e) => controller.setAggregate(shelfId, column?.id ?? "", e.target.value),
-      style: { font: "inherit", fontSize: 9, background: "transparent", color: "inherit", border: "none" },
-      children: options.map((fn) => /* @__PURE__ */ jsx4("option", { value: fn, children: fn }, fn))
-    }
-  );
-}
-function FilterBuilder({ controller }) {
-  const state = useSyncExternalStore4(controller.subscribe, controller.getState, controller.getState);
-  return /* @__PURE__ */ jsxs4(
-    Section,
-    {
-      title: "Filters",
-      badge: state.filters.filters.length > 0 ? /* @__PURE__ */ jsx4(Badge4, { children: String(state.filters.filters.length) }) : void 0,
-      actions: /* @__PURE__ */ jsx4(
-        IconButton3,
+          entry.columnId
+        )) }) : null
+      ] }, shelf.id)),
+      /* @__PURE__ */ jsxs4(
+        Section,
         {
-          size: "sm",
-          icon: /* @__PURE__ */ jsx4(PlusGlyph, {}),
-          label: "Add filter",
-          onClick: () => {
-            const column = state.columns[0];
-            if (column) controller.addFilter([], { columnId: column.id, op: "eq", value: null });
-          }
-        }
-      ),
-      flush: true,
-      children: [
-        state.filters.filters.length === 0 ? /* @__PURE__ */ jsx4("div", { style: { padding: "4px 8px", fontSize: 10, opacity: 0.5 }, children: "No filters. Everything passes." }) : /* @__PURE__ */ jsx4(RowList, { children: state.filters.filters.map((member, index) => {
-          if (!isLeafFilter(member)) {
-            return /* @__PURE__ */ jsx4(
+          title: "Filters",
+          flush: true,
+          badge: view.hasFilters ? /* @__PURE__ */ jsx4(Badge4, { children: view.filterCount }) : null,
+          actions: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(PlusGlyph, { size: 11 }), label: "Add filter", onClick: () => ui2({ kind: "addFilter" }) }),
+          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: `(${member.combinator.toUpperCase()} group \u2014 ${member.filters.length})`,
-                trailing: /* @__PURE__ */ jsx4(
-                  IconButton3,
-                  {
-                    size: "sm",
-                    icon: /* @__PURE__ */ jsx4(XGlyph, {}),
-                    label: "Remove group",
-                    onClick: () => controller.removeFilter([], index)
-                  }
-                )
+                label: filter.label,
+                meta: filter.leaf ? /* @__PURE__ */ jsx4(Select, { size: "sm", label: "Operator", options: filter.ops, value: filter.op, onChange: (op) => ui2({ kind: "filterOp", index: filter.index, op }) }) : null,
+                trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: filter.removeLabel, onClick: () => ui2({ kind: "removeFilter", index: filter.index }) })
               },
-              `g${index}`
-            );
-          }
-          const column = state.columns.find((c) => c.id === member.columnId);
-          return /* @__PURE__ */ jsx4(
-            Row,
-            {
-              label: column?.name ?? member.columnId,
-              meta: /* @__PURE__ */ jsx4(
-                "select",
-                {
-                  value: member.op,
-                  onClick: (e) => e.stopPropagation(),
-                  onChange: (e) => controller.updateFilter([], index, { op: e.target.value }),
-                  style: {
-                    font: "inherit",
-                    fontSize: 9,
-                    background: "transparent",
-                    color: "inherit",
-                    border: "none"
-                  },
-                  children: offerableFilterOps(column, state.allowedFilterOps).map((op) => /* @__PURE__ */ jsx4("option", { value: op, children: op }, op))
-                }
-              ),
-              trailing: /* @__PURE__ */ jsx4(
-                IconButton3,
-                {
-                  size: "sm",
-                  icon: /* @__PURE__ */ jsx4(XGlyph, {}),
-                  label: "Remove filter",
-                  onClick: () => controller.removeFilter([], index)
-                }
-              )
-            },
-            `f${index}`
-          );
-        }) }),
-        /* @__PURE__ */ jsxs4("div", { style: { padding: "2px 8px", display: "flex", gap: 8 }, children: [
-          /* @__PURE__ */ jsx4(
-            SegmentedControl4,
-            {
-              size: "sm",
-              label: "Combinator",
-              options: [
-                { value: "and", label: "All" },
-                { value: "or", label: "Any" }
-              ],
-              value: state.filters.combinator,
-              onChange: (c) => controller.setCombinator([], c)
-            }
-          ),
-          /* @__PURE__ */ jsx4(TextButton, { onClick: () => controller.addFilterGroup([]), children: "+ group" })
-        ] })
-      ]
-    }
-  );
+              filter.key
+            )) }) : null,
+            /* @__PURE__ */ jsx4(
+              Toolbar4,
+              {
+                divided: false,
+                left: /* @__PURE__ */ jsx4(SegmentedControl4, { size: "sm", label: "Combinator", options: COMBINATORS2, value: view.combinator, onChange: (combinator) => ui2({ kind: "combinator", combinator }) }),
+                right: /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui2({ kind: "addGroup" }), children: "+ group" })
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4(StatusBar4, { left: view.countLabel, right: view.dirtyLabel })
+  ] });
 }
 
 // src/data/fields/panel.ts
@@ -5245,10 +5376,10 @@ function parseJsonPath(path) {
   }
   return steps;
 }
-function findBracketEnd(text, start) {
+function findBracketEnd(text2, start) {
   let quote = null;
-  for (let i = start + 1; i < text.length; i += 1) {
-    const char = text[i];
+  for (let i = start + 1; i < text2.length; i += 1) {
+    const char = text2[i];
     if (quote) {
       if (char === "\\") i += 1;
       else if (char === quote) quote = null;
@@ -5672,9 +5803,9 @@ function firstGraphqlError(errors) {
 }
 
 // src/data/connectors/executors/csv.ts
-function sniffDelimiter(text) {
+function sniffDelimiter(text2) {
   const candidates = [",", ";", "	", "|"];
-  const line = firstLogicalLine(text);
+  const line = firstLogicalLine(text2);
   let best = ",";
   let bestCount = 0;
   for (const candidate of candidates) {
@@ -5696,21 +5827,21 @@ function sniffDelimiter(text) {
   }
   return best;
 }
-function firstLogicalLine(text) {
+function firstLogicalLine(text2) {
   let inQuotes = false;
-  for (let i = 0; i < text.length; i += 1) {
-    const char = text[i];
+  for (let i = 0; i < text2.length; i += 1) {
+    const char = text2[i];
     if (char === '"') {
-      if (inQuotes && text[i + 1] === '"') i += 1;
+      if (inQuotes && text2[i + 1] === '"') i += 1;
       else inQuotes = !inQuotes;
     } else if ((char === "\n" || char === "\r") && !inQuotes) {
-      return text.slice(0, i);
+      return text2.slice(0, i);
     }
   }
-  return text;
+  return text2;
 }
-function parseCsv(text, options = {}) {
-  const source = text.charCodeAt(0) === 65279 ? text.slice(1) : text;
+function parseCsv(text2, options = {}) {
+  const source = text2.charCodeAt(0) === 65279 ? text2.slice(1) : text2;
   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;
@@ -5745,17 +5876,17 @@ function dedupe(names) {
     return count === 0 ? name : `${name}_${count + 1}`;
   });
 }
-function scanRecords(text, delimiter, quote) {
+function scanRecords(text2, delimiter, quote) {
   const records = [];
   let fields = [];
   let field = "";
   let inQuotes = false;
   let i = 0;
-  while (i < text.length) {
-    const char = text[i];
+  while (i < text2.length) {
+    const char = text2[i];
     if (inQuotes) {
       if (char === quote) {
-        if (text[i + 1] === quote) {
+        if (text2[i + 1] === quote) {
           field += quote;
           i += 2;
           continue;
@@ -5773,7 +5904,7 @@ function scanRecords(text, delimiter, quote) {
       i += 1;
       continue;
     }
-    if (text.startsWith(delimiter, i)) {
+    if (text2.startsWith(delimiter, i)) {
       fields.push(field);
       field = "";
       i += delimiter.length;
@@ -5784,7 +5915,7 @@ function scanRecords(text, delimiter, quote) {
       records.push(fields);
       fields = [];
       field = "";
-      i += char === "\r" && text[i + 1] === "\n" ? 2 : 1;
+      i += char === "\r" && text2[i + 1] === "\n" ? 2 : 1;
       continue;
     }
     field += char;
@@ -6935,7 +7066,10 @@ export {
   DEFAULT_RANGES,
   EMPTY_LAYOUT,
   EXPIRY_SKEW_MS,
+  BEHAVIOURS as FIELDS_BEHAVIOURS,
+  FIELDS_DECLARATION,
   FIELDS_PANEL_ID,
+  FIELDS_RUNTIME_UNITS,
   FieldsController,
   FieldsPanelView,
   IMPLEMENTED_VIEW_MODES,
@@ -6950,6 +7084,7 @@ export {
   TABLE_PANEL_ID,
   TableController,
   TablePanelView,
+  applyFieldsUi,
   applyPrecision,
   base64Url,
   breachSideOf,
@@ -7001,6 +7136,8 @@ export {
   facilitiesOf,
   fieldsManifest,
   fieldsPanel,
+  fieldsViewManifest,
+  fieldsViewState,
   firstGraphqlError,
   frozenWidth,
   getChartRenderer,