@xenosystem/blocks 0.13.12 → 0.13.14

package/dist/data/index.js

@@ -9,11 +9,10 @@ import {
 import {
   ChevronGlyph,
   ICONS,
-  PlugGlyph,
   RefreshGlyph,
   SortAscGlyph,
   SortDescGlyph
-} from "../chunk-5BVZMAD2.js";
+} from "../chunk-PI5WOATA.js";
 import "../chunk-2KG3PWR4.js";
 
 // src/data/table/panel.ts
@@ -195,8 +194,8 @@ function moveCell(from, delta, bounds) {
 }
 
 // src/data/table/numeric.ts
-function parseNumeric(text4) {
-  const trimmed = String(text4).trim();
+function parseNumeric(text5) {
+  const trimmed = String(text5).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" };
@@ -550,11 +549,11 @@ var TableController = class {
     return true;
   }
   /** Update the in-flight draft. Emits `editPreview` only when `livePreview` is on. */
-  updateDraft(text4) {
+  updateDraft(text5) {
     if (!this.editing) return;
-    this.editing = { ...this.editing, draft: text4 };
+    this.editing = { ...this.editing, draft: text5 };
     if (this.livePreview) {
-      const parsed = this.parseDraft(this.editing.columnId, text4);
+      const parsed = this.parseDraft(this.editing.columnId, text5);
       if (parsed.ok) {
         this.host.emit("editPreview", this.buildEdit(this.editing, parsed.value));
       }
@@ -606,12 +605,12 @@ var TableController = class {
     };
   }
   /** Parse a draft according to the column's declared type. */
-  parseDraft(columnId, text4) {
+  parseDraft(columnId, text5) {
     const column = this.columnById(columnId);
-    const trimmed = text4.trim();
+    const trimmed = text5.trim();
     if (column?.type === "number" || column?.type === "integer" || column?.type === "duration") {
       if (trimmed === "") return { ok: true, value: null };
-      const parsed = parseNumeric(text4);
+      const parsed = parseNumeric(text5);
       if (!parsed.ok) return { ok: false, reason: parsed.reason };
       return { ok: true, value: normalizeNumeric(parsed.value, constraintsOfColumn(column)) };
     }
@@ -628,7 +627,7 @@ var TableController = class {
         value: trimmed === "" ? [] : trimmed.split(",").map((part) => part.trim()).filter(Boolean)
       };
     }
-    return { ok: true, value: trimmed === "" ? null : text4 };
+    return { ok: true, value: trimmed === "" ? null : text5 };
   }
   rowById(rowId) {
     return this.result?.rows.find((r) => r.id === rowId);
@@ -2375,16 +2374,16 @@ function chartRuntimeComponents(controller, options) {
 function ChartPanelView({ controller, options, emptyHint }) {
   useSyncExternalStore2(controller.subscribe, controller.getState, controller.getState);
   const view = chartViewState(controller, { emptyHint });
-  const ui4 = (intent) => applyChartUi(controller, intent);
+  const ui5 = (intent) => applyChartUi(controller, intent);
   return /* @__PURE__ */ jsxs2(Column, { children: [
     /* @__PURE__ */ jsx2(
       Toolbar2,
       {
-        left: /* @__PURE__ */ jsx2(SegmentedControl2, { size: "sm", label: "Chart type", options: view.types, value: view.type, onChange: (type) => ui4({ kind: "type", type }) }),
+        left: /* @__PURE__ */ jsx2(SegmentedControl2, { size: "sm", label: "Chart type", options: view.types, value: view.type, onChange: (type) => ui5({ kind: "type", type }) }),
         right: /* @__PURE__ */ jsxs2(ToolbarGroup2, { end: true, children: [
           view.partial ? /* @__PURE__ */ jsx2(Badge2, { tone: "warning", title: "Some measures have not synced yet.", children: "partial" }) : null,
           view.aggregating ? /* @__PURE__ */ jsx2(Badge2, { tone: "warning", title: view.aggregatingHint, children: "aggregating" }) : null,
-          /* @__PURE__ */ jsx2(IconButton2, { icon: /* @__PURE__ */ jsx2(DownloadGlyph, {}), label: "Export chart", onClick: () => ui4({ kind: "export" }) })
+          /* @__PURE__ */ jsx2(IconButton2, { icon: /* @__PURE__ */ jsx2(DownloadGlyph, {}), label: "Export chart", onClick: () => ui5({ kind: "export" }) })
         ] })
       }
     ),
@@ -3088,12 +3087,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 ui4 = (intent) => applyMetricsUi(controller, intent);
+  const ui5 = (intent) => applyMetricsUi(controller, intent);
   return /* @__PURE__ */ jsxs3(Column2, { children: [
     view.hasRanges ? /* @__PURE__ */ jsx3(
       Toolbar3,
       {
-        left: /* @__PURE__ */ jsx3(SegmentedControl3, { size: "sm", label: "Range", options: view.ranges, value: view.rangeId, onChange: (rangeId) => ui4({ kind: "range", rangeId }) }),
+        left: /* @__PURE__ */ jsx3(SegmentedControl3, { size: "sm", label: "Range", options: view.ranges, value: view.rangeId, onChange: (rangeId) => ui5({ kind: "range", rangeId }) }),
         right: view.partial ? /* @__PURE__ */ jsx3(Badge3, { tone: "warning", title: view.partialHint, children: "partial" }) : null
       }
     ) : null,
@@ -3111,7 +3110,7 @@ function MetricsPanelView({ controller, ...options }) {
           tile.partial ? /* @__PURE__ */ jsx3(Text, { role: "meta", children: view.partialHint }) : null,
           tile.hasSpark ? /* @__PURE__ */ jsx3(Sparkline, { data: tile.spark, label: tile.sparkLabel }) : null
         ] }),
-        onActivate: () => ui4({ kind: "activate", metricId: tile.id })
+        onActivate: () => ui5({ kind: "activate", metricId: tile.id })
       },
       tile.id
     )) }) }) : null,
@@ -3313,7 +3312,7 @@ function emptyFilterGroup() {
 function offerableFilterOps(column, sourceOps = []) {
   const common = ["eq", "ne", "isEmpty", "isNotEmpty", "in", "notIn"];
   const ordered = ["gt", "gte", "lt", "lte", "between"];
-  const text4 = ["contains", "notContains", "startsWith", "endsWith"];
+  const text5 = ["contains", "notContains", "startsWith", "endsWith"];
   const temporal = ["relative"];
   let ops = [...common];
   switch (column?.type) {
@@ -3331,10 +3330,10 @@ function offerableFilterOps(column, sourceOps = []) {
     case "url":
     case "select":
     case "multiselect":
-      ops = [...ops, ...text4];
+      ops = [...ops, ...text5];
       break;
     default:
-      ops = [...ops, ...text4, ...ordered];
+      ops = [...ops, ...text5, ...ordered];
   }
   if (sourceOps.length === 0) return ops;
   return ops.filter((op) => sourceOps.includes(op));
@@ -4246,7 +4245,7 @@ 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 ui4 = (intent) => applyFieldsUi(controller, intent);
+  const ui5 = (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." });
   }
@@ -4256,8 +4255,8 @@ function FieldsPanelView({ controller, showStats, manualApply }) {
       {
         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: () => ui4({ kind: "autoAssign" }), children: "Auto-assign" }),
-          view.manualApply ? /* @__PURE__ */ jsx4(TextButton, { strong: true, disabled: view.applyDisabled, onClick: () => ui4({ kind: "apply" }), children: "Apply" }) : null
+          /* @__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
         ] })
       }
     ),
@@ -4269,7 +4268,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: () => ui4({ kind: "focus", columnId: column.id })
+          onClick: () => ui5({ kind: "focus", columnId: column.id })
         },
         column.id
       )) }) }),
@@ -4281,11 +4280,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) => ui4({ kind: "aggregate", shelfId: entry.shelfId, columnId: entry.columnId, fn }) }) : null,
-              entry.sortable ? /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui4({ kind: "direction", shelfId: entry.shelfId, columnId: entry.columnId }), children: entry.direction }) : null,
+              entry.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.granularity ? /* @__PURE__ */ jsx4(Badge4, { children: entry.granularity }) : null
             ] }),
-            trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: entry.removeLabel, onClick: () => ui4({ kind: "remove", shelfId: entry.shelfId, columnId: entry.columnId }) })
+            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 }) })
           },
           entry.columnId
         )) }) : null
@@ -4296,15 +4295,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: () => ui4({ kind: "addFilter" }) }),
+          actions: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(PlusGlyph, { size: 11 }), label: "Add filter", onClick: () => ui5({ 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) => ui4({ kind: "filterOp", index: filter.index, op }) }) : null,
-                trailing: /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(CloseGlyph, { size: 11 }), label: filter.removeLabel, onClick: () => ui4({ kind: "removeFilter", index: filter.index }) })
+                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 }) })
               },
               filter.key
             )) }) : null,
@@ -4312,8 +4311,8 @@ function FieldsPanelView({ controller, showStats, manualApply }) {
               Toolbar4,
               {
                 divided: false,
-                left: /* @__PURE__ */ jsx4(SegmentedControl4, { size: "sm", label: "Combinator", options: COMBINATORS2, value: view.combinator, onChange: (combinator) => ui4({ kind: "combinator", combinator }) }),
-                right: /* @__PURE__ */ jsx4(TextButton, { onClick: () => ui4({ kind: "addGroup" }), children: "+ group" })
+                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" })
               }
             )
           ]
@@ -4604,6 +4603,8 @@ var ConnectorsController = class {
   lastQueries = /* @__PURE__ */ new Map();
   selectedId = null;
   form = null;
+  /** The form's draft values. In the controller, not React state, so the declaration can bind them — and cleared with the form. */
+  draft = {};
   /** Newest outstanding request per `(connectionId, requestorPanelId)`. */
   outstanding = /* @__PURE__ */ new Map();
   /** In-flight executions, keyed by cache key — the single-flight map. */
@@ -4778,6 +4779,17 @@ var ConnectorsController = class {
   /** The host asks for a credential. The panel renders the descriptor; it knows no platform names. */
   requireCredential(spec) {
     this.form = spec;
+    this.draft = {};
+    this.notify();
+  }
+  /** The draft as typed so far. Never emitted except through {@link submitCredential}. */
+  getCredentialDraft() {
+    return this.draft;
+  }
+  /** One field of the draft changed. */
+  setCredentialDraft(key, value) {
+    if (!this.form) return;
+    this.draft = { ...this.draft, [key]: value };
     this.notify();
   }
   /**
@@ -4797,6 +4809,7 @@ var ConnectorsController = class {
     };
     this.host.emit("credentialSubmit", submission);
     this.form = null;
+    this.draft = {};
     this.notify();
     return true;
   }
@@ -4804,6 +4817,7 @@ var ConnectorsController = class {
   cancelCredential() {
     if (!this.form) return;
     this.form = null;
+    this.draft = {};
     this.notify();
   }
   /**
@@ -5449,10 +5463,10 @@ function parseJsonPath(path) {
   }
   return steps;
 }
-function findBracketEnd(text4, start) {
+function findBracketEnd(text5, start) {
   let quote = null;
-  for (let i = start + 1; i < text4.length; i += 1) {
-    const char = text4[i];
+  for (let i = start + 1; i < text5.length; i += 1) {
+    const char = text5[i];
     if (quote) {
       if (char === "\\") i += 1;
       else if (char === quote) quote = null;
@@ -5876,9 +5890,9 @@ function firstGraphqlError(errors) {
 }
 
 // src/data/connectors/executors/csv.ts
-function sniffDelimiter(text4) {
+function sniffDelimiter(text5) {
   const candidates = [",", ";", "	", "|"];
-  const line = firstLogicalLine(text4);
+  const line = firstLogicalLine(text5);
   let best = ",";
   let bestCount = 0;
   for (const candidate of candidates) {
@@ -5900,21 +5914,21 @@ function sniffDelimiter(text4) {
   }
   return best;
 }
-function firstLogicalLine(text4) {
+function firstLogicalLine(text5) {
   let inQuotes = false;
-  for (let i = 0; i < text4.length; i += 1) {
-    const char = text4[i];
+  for (let i = 0; i < text5.length; i += 1) {
+    const char = text5[i];
     if (char === '"') {
-      if (inQuotes && text4[i + 1] === '"') i += 1;
+      if (inQuotes && text5[i + 1] === '"') i += 1;
       else inQuotes = !inQuotes;
     } else if ((char === "\n" || char === "\r") && !inQuotes) {
-      return text4.slice(0, i);
+      return text5.slice(0, i);
     }
   }
-  return text4;
+  return text5;
 }
-function parseCsv(text4, options = {}) {
-  const source = text4.charCodeAt(0) === 65279 ? text4.slice(1) : text4;
+function parseCsv(text5, options = {}) {
+  const source = text5.charCodeAt(0) === 65279 ? text5.slice(1) : text5;
   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;
@@ -5949,17 +5963,17 @@ function dedupe(names) {
     return count === 0 ? name : `${name}_${count + 1}`;
   });
 }
-function scanRecords(text4, delimiter, quote) {
+function scanRecords(text5, delimiter, quote) {
   const records = [];
   let fields = [];
   let field = "";
   let inQuotes = false;
   let i = 0;
-  while (i < text4.length) {
-    const char = text4[i];
+  while (i < text5.length) {
+    const char = text5[i];
     if (inQuotes) {
       if (char === quote) {
-        if (text4[i + 1] === quote) {
+        if (text5[i + 1] === quote) {
           field += quote;
           i += 2;
           continue;
@@ -5977,7 +5991,7 @@ function scanRecords(text4, delimiter, quote) {
       i += 1;
       continue;
     }
-    if (text4.startsWith(delimiter, i)) {
+    if (text5.startsWith(delimiter, i)) {
       fields.push(field);
       field = "";
       i += delimiter.length;
@@ -5988,7 +6002,7 @@ function scanRecords(text4, delimiter, quote) {
       records.push(fields);
       fields = [];
       field = "";
-      i += char === "\r" && text4[i + 1] === "\n" ? 2 : 1;
+      i += char === "\r" && text5[i + 1] === "\n" ? 2 : 1;
       continue;
     }
     field += char;
@@ -6554,18 +6568,26 @@ var connectorsManifest = {
 };
 
 // src/data/connectors/react/ConnectorsPanelView.tsx
-import { useState as useState2, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { useSyncExternalStore as useSyncExternalStore5 } from "react";
 import {
   Badge as Badge5,
+  Code,
+  Column as Column4,
   EmptyState as EmptyState5,
   Field,
   FieldGroup,
   IconButton as IconButton4,
+  Input,
+  Link,
+  Note as Note2,
   Row as Row2,
   RowList as RowList2,
   ScrollArea as ScrollArea4,
+  Select as Select2,
   StatusBar as StatusBar5,
+  Text as Text2,
   TextButton as TextButton2,
+  Toggle,
   Toolbar as Toolbar5,
   ToolbarGroup as ToolbarGroup4
 } from "@xenosystem/components/chrome";
@@ -6631,183 +6653,254 @@ function credentialSpecProblem(spec) {
   return null;
 }
 
-// src/data/connectors/react/ConnectorsPanelView.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var TONE = {
-  unknown: "neutral",
-  ok: "success",
-  degraded: "warning",
-  unconfigured: "info",
-  unsupported: "warning",
-  error: "error",
-  expired: "warning"
-};
-function ConnectorsPanelView({
-  controller,
-  emptyHint
-}) {
-  const state = useSyncExternalStore5(controller.subscribe, controller.getState, controller.getState);
-  if (state.form) {
-    return /* @__PURE__ */ jsx5(CredentialForm, { controller });
+// src/data/connectors/declaration.ts
+var TONE = { unknown: "neutral", ok: "success", degraded: "warning", unconfigured: "info", unsupported: "warning", error: "error", expired: "warning" };
+function connectorsViewState(c, options = {}) {
+  const s = c.getState();
+  const form = s.form;
+  const draft = c.getCredentialDraft();
+  const problem = form ? credentialSpecProblem(form) : null;
+  const shown = form && !problem ? visibleFields(form, draft) : [];
+  const errors = form && !problem ? validateCredentialDraft(form, draft) : {};
+  return {
+    listing: !form,
+    sources: form ? [] : s.connections.map(({ connection, status }) => ({
+      id: connection.id,
+      name: connection.name,
+      kind: connection.kind,
+      selected: connection.id === s.selectedId,
+      disabled: status.health === "unsupported",
+      title: status.message,
+      health: status.health,
+      tone: TONE[status.health] ?? "neutral"
+    })),
+    empty: !form && s.connections.length === 0,
+    emptyHint: options.emptyHint ?? "Paste CSV or JSON to start with an inline source \u2014 no setup needed.",
+    listed: !form && s.connections.length > 0,
+    countLabel: `${s.connections.length} source${s.connections.length === 1 ? "" : "s"}`,
+    busyLabel: s.busy.length > 0 ? "querying\u2026" : void 0,
+    form: !!form,
+    formTitle: form?.title ?? "",
+    formBroken: !!form && !!problem,
+    formProblem: problem ?? void 0,
+    formReady: !!form && !problem,
+    formMessage: form?.message,
+    redirectUri: form?.redirectUri,
+    fields: shown.map((field) => {
+      const kind = field.type === "textarea" ? "textarea" : field.type;
+      return {
+        key: field.key,
+        label: field.label,
+        hint: errors[field.key] ?? field.description,
+        kind,
+        isText: kind === "text" || kind === "password" || kind === "number" || kind === "textarea",
+        isSelect: kind === "select",
+        isBoolean: kind === "boolean",
+        inputType: kind === "password" ? "password" : kind === "number" ? "number" : "text",
+        text: String(draft[field.key] ?? ""),
+        checked: draft[field.key] === true,
+        placeholder: field.placeholder,
+        options: field.options ?? []
+      };
+    }),
+    docsUrl: form?.docsUrl,
+    submitDisabled: Object.keys(errors).length > 0
+  };
+}
+function applyConnectorsUi(c, intent) {
+  switch (intent.kind) {
+    case "refreshAll":
+      void c.refreshAll();
+      break;
+    case "select":
+      c.select(intent.id);
+      break;
+    case "field":
+      c.setCredentialDraft(intent.key, intent.value);
+      break;
+    case "cancel":
+      c.cancelCredential();
+      break;
+    case "submit": {
+      const form = c.getState().form;
+      if (form) c.submitCredential(pruneHiddenValues(form, c.getCredentialDraft()));
+      break;
+    }
   }
-  return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsx5(
-      Toolbar5,
+}
+var connectorsViewManifest = {
+  id: connectorsManifest.id,
+  version: "1.0.0",
+  title: "Connectors",
+  category: "data",
+  layout: { slot: "side" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The ConnectorsViewModel 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 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 CONNECTORS_RUNTIME_UNITS = [];
+var text4 = (b) => ({ component: "text", props: { text: b } });
+var ui4 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var CONNECTORS_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: connectorsViewManifest,
+  behaviour: "data/connectorsPanelView",
+  composition: {
+    component: "fragment",
+    children: [
       {
-        right: /* @__PURE__ */ jsx5(ToolbarGroup4, { end: true, children: /* @__PURE__ */ jsx5(
-          IconButton4,
+        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/EmptyState", when: { input: "view.empty" }, props: { title: { value: "No sources" }, hint: { input: "view.emptyHint" } } },
           {
-            icon: /* @__PURE__ */ jsx5(RefreshGlyph, {}),
-            label: "Refresh all",
-            onClick: () => void controller.refreshAll()
-          }
-        ) })
-      }
-    ),
-    state.connections.length === 0 ? /* @__PURE__ */ jsx5(
-      EmptyState5,
+            component: "chrome/ScrollArea",
+            when: { input: "view.listed" },
+            children: [
+              {
+                component: "chrome/RowList",
+                props: { role: { value: "listbox" }, "aria-label": { value: "Data sources" } },
+                children: [
+                  {
+                    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" } }) }
+                  }
+                ]
+              }
+            ]
+          },
+          { component: "chrome/StatusBar", props: { left: { input: "view.countLabel" }, right: { input: "view.busyLabel" } } }
+        ]
+      },
       {
-        title: "No sources",
-        hint: emptyHint ?? "Paste CSV or JSON to start with an inline source \u2014 no setup needed."
+        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/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" })] }] } } }
+          },
+          {
+            component: "chrome/ScrollArea",
+            when: { input: "view.formReady" },
+            children: [
+              { component: "chrome/Note", when: { input: "view.formMessage" }, children: [text4({ input: "view.formMessage" })] },
+              {
+                component: "fragment",
+                when: { input: "view.redirectUri" },
+                children: [
+                  { component: "chrome/Note", children: [text4({ 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/FieldGroup",
+                children: [
+                  {
+                    component: "chrome/Field",
+                    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/Note", when: { input: "view.docsUrl" }, children: [{ component: "chrome/Link", props: { href: { input: "view.docsUrl" } }, children: [text4({ value: "Where do I get this?" })] }] }
+            ]
+          },
+          {
+            component: "chrome/Toolbar",
+            when: { input: "view.formReady" },
+            props: {
+              divided: { value: false },
+              right: {
+                node: {
+                  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" })] }
+                  ]
+                }
+              }
+            }
+          }
+        ]
       }
-    ) : /* @__PURE__ */ jsx5(ScrollArea4, { children: /* @__PURE__ */ jsx5(RowList2, { role: "listbox", "aria-label": "Data sources", children: state.connections.map(({ connection, status }) => {
-      const disabled = status.health === "unsupported";
-      return /* @__PURE__ */ jsx5(
+    ]
+  }
+};
+
+// src/data/connectors/react/ConnectorsPanelView.tsx
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var PlugGlyph = ICONS["icons/Plug"];
+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);
+  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.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,
         {
           icon: /* @__PURE__ */ jsx5(PlugGlyph, {}),
-          label: connection.name,
-          meta: connection.kind,
-          selected: connection.id === state.selectedId,
-          disabled,
-          title: status.message,
-          onClick: () => controller.select(connection.id),
-          trailing: /* @__PURE__ */ jsx5(Badge5, { tone: TONE[status.health], children: status.health })
+          label: source.name,
+          meta: source.kind,
+          selected: source.selected,
+          disabled: source.disabled,
+          title: source.title,
+          trailing: /* @__PURE__ */ jsx5(Badge5, { tone: source.tone, children: source.health }),
+          onClick: () => ui5({ kind: "select", id: source.id })
         },
-        connection.id
-      );
-    }) }) }),
-    /* @__PURE__ */ jsx5(
-      StatusBar5,
-      {
-        left: `${state.connections.length} source${state.connections.length === 1 ? "" : "s"}`,
-        right: state.busy.length > 0 ? "querying\u2026" : void 0
-      }
-    )
-  ] });
-}
-function CredentialForm({ controller }) {
-  const state = useSyncExternalStore5(controller.subscribe, controller.getState, controller.getState);
-  const [values, setValues] = useState2({});
-  const form = state.form;
-  if (!form) return null;
-  const problem = credentialSpecProblem(form);
-  if (problem) {
-    return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-      /* @__PURE__ */ jsx5(Toolbar5, { left: /* @__PURE__ */ jsx5("span", { style: { fontSize: 11 }, children: form.title }) }),
-      /* @__PURE__ */ jsx5(EmptyState5, { title: "This connection cannot be set up", hint: problem }),
-      /* @__PURE__ */ jsx5(
+        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.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.formReady ? /* @__PURE__ */ jsxs5(ScrollArea4, { children: [
+        view.formMessage ? /* @__PURE__ */ jsx5(Note2, { children: view.formMessage }) : null,
+        view.redirectUri ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+          /* @__PURE__ */ jsx5(Note2, { children: "Add this exact redirect URI to the provider:" }),
+          /* @__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.key)) }),
+        view.docsUrl ? /* @__PURE__ */ jsx5(Note2, { children: /* @__PURE__ */ jsx5(Link, { href: view.docsUrl, children: "Where do I get this?" }) }) : null
+      ] }) : null,
+      view.formReady ? /* @__PURE__ */ jsx5(
         Toolbar5,
         {
           divided: false,
-          right: /* @__PURE__ */ jsx5(ToolbarGroup4, { end: true, children: /* @__PURE__ */ jsx5(TextButton2, { onClick: () => controller.cancelCredential(), children: "Close" }) })
-        }
-      )
-    ] });
-  }
-  const shown = visibleFields(form, values);
-  const errors = validateCredentialDraft(form, values);
-  const invalid = Object.keys(errors).length > 0;
-  return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsx5(Toolbar5, { left: /* @__PURE__ */ jsx5("span", { style: { fontSize: 11 }, children: form.title }) }),
-    /* @__PURE__ */ jsxs5(ScrollArea4, { children: [
-      form.message ? /* @__PURE__ */ jsx5("div", { style: { padding: 8, fontSize: 11, opacity: 0.8 }, children: form.message }) : null,
-      form.redirectUri ? /* @__PURE__ */ jsxs5("div", { style: { padding: 8, fontSize: 11 }, children: [
-        /* @__PURE__ */ jsx5("div", { style: { opacity: 0.7, marginBottom: 4 }, children: "Add this exact redirect URI to the provider:" }),
-        /* @__PURE__ */ jsx5(
-          "code",
-          {
-            style: {
-              display: "block",
-              padding: "4px 6px",
-              background: "var(--xeno-canvas)",
-              borderRadius: 2,
-              userSelect: "all",
-              wordBreak: "break-all"
-            },
-            children: form.redirectUri
-          }
-        )
-      ] }) : null,
-      /* @__PURE__ */ jsx5(FieldGroup, { children: shown.map((field) => /* @__PURE__ */ jsx5(Field, { label: field.label, hint: errors[field.key] ?? field.description, children: field.type === "boolean" ? /* @__PURE__ */ jsx5(
-        "input",
-        {
-          type: "checkbox",
-          checked: values[field.key] === true,
-          onChange: (e) => setValues((v) => ({ ...v, [field.key]: e.target.checked }))
-        }
-      ) : field.type === "select" ? /* @__PURE__ */ jsxs5(
-        "select",
-        {
-          value: String(values[field.key] ?? ""),
-          onChange: (e) => setValues((v) => ({ ...v, [field.key]: e.target.value })),
-          children: [
-            /* @__PURE__ */ jsx5("option", { value: "" }),
-            field.options?.map((o) => /* @__PURE__ */ jsx5("option", { value: o.value, children: o.label }, o.value))
-          ]
+          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(
-        "input",
-        {
-          type: field.type === "password" ? "password" : "text",
-          value: String(values[field.key] ?? ""),
-          placeholder: field.placeholder,
-          autoComplete: "off",
-          onChange: (e) => setValues((v) => ({ ...v, [field.key]: e.target.value })),
-          style: {
-            width: "100%",
-            background: "var(--xeno-canvas)",
-            border: "1px solid var(--xeno-border)",
-            borderRadius: 2,
-            color: "inherit",
-            font: "inherit",
-            padding: "0 6px",
-            height: 20
-          }
-        }
-      ) }, field.key)) }),
-      form.docsUrl ? /* @__PURE__ */ jsx5("div", { style: { padding: 8 }, children: /* @__PURE__ */ jsx5("a", { href: form.docsUrl, target: "_blank", rel: "noreferrer", style: { fontSize: 10 }, children: "Where do I get this?" }) }) : null
-    ] }),
-    /* @__PURE__ */ jsx5(
-      Toolbar5,
-      {
-        divided: false,
-        right: /* @__PURE__ */ jsxs5(ToolbarGroup4, { end: true, children: [
-          /* @__PURE__ */ jsx5(
-            TextButton2,
-            {
-              onClick: () => {
-                setValues({});
-                controller.cancelCredential();
-              },
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsx5(
-            TextButton2,
-            {
-              strong: true,
-              disabled: invalid,
-              onClick: () => {
-                controller.submitCredential(pruneHiddenValues(form, values));
-                setValues({});
-              },
-              children: "Connect"
-            }
-          )
-        ] })
-      }
-    )
+      ) : null
+    ] }) : null
   ] });
 }
 
@@ -7132,7 +7225,10 @@ export {
   CHART_PANEL_ID,
   CHART_RUNTIME_UNITS,
   CHART_TYPE_LABELS,
+  BEHAVIOURS4 as CONNECTORS_BEHAVIOURS,
+  CONNECTORS_DECLARATION,
   CONNECTORS_PANEL_ID,
+  CONNECTORS_RUNTIME_UNITS,
   ChartController,
   ChartPanelView,
   ChartPlot,
@@ -7167,6 +7263,7 @@ export {
   TableController,
   TablePanelView,
   applyChartUi,
+  applyConnectorsUi,
   applyFieldsUi,
   applyMetricsUi,
   applyPrecision,
@@ -7192,6 +7289,8 @@ export {
   computeWindow,
   connectorsManifest,
   connectorsPanel,
+  connectorsViewManifest,
+  connectorsViewState,
   constraintsOfColumn,
   createChartPanel,
   createConnectorExecutor,