@tangle-network/sandbox-ui 0.113.7 → 0.115.0

package/dist/connectors.js

@@ -1,683 +1,635 @@
-import {
-  cn
-} from "./chunk-EI44GEQ5.js";
-import "./chunk-CZ7CSFO4.js";
-
-// src/connectors/action-list.tsx
-import { Badge, Button, Input } from "@tangle-network/ui/primitives";
-import { Check, ChevronDown, ChevronRight, Copy, Search } from "lucide-react";
-import { useEffect, useMemo, useRef, useState as useState2 } from "react";
-
-// src/connectors/integration-step-yaml.ts
+import { t as cn$1 } from "./utils-DzWbktWG.js";
+import { Badge, Button, EmptyState, Input } from "@tangle-network/ui/primitives";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { focusField } from "@tangle-network/ui/utils";
+import { Blocks, Check, ChevronDown, ChevronRight, Copy, Search } from "lucide-react";
+//#region src/connectors/integration-step-yaml.ts
 function asSchemaObject(value) {
-  return typeof value === "object" && value !== null ? value : null;
+	return typeof value === "object" && value !== null ? value : null;
 }
+/** YAML scalar placeholder for a property schema. A string enum stubs its
+*  first string member (a real accepted input beats an empty string, quoted so
+*  it stays a string); otherwise — non-string/undefined/object enum values, or
+*  no enum — the placeholder is the type's empty value. Non-string enum members
+*  are intentionally NOT inlined: `JSON.stringify` on them would emit a
+*  type-changing bare token (`true`, `{}`, or even `undefined` for a malformed
+*  member), which the type placeholder handles honestly instead. */
 function placeholderFor(propSchema) {
-  const schema = asSchemaObject(propSchema);
-  if (!schema) return '""';
-  if (Array.isArray(schema.enum)) {
-    const firstString = schema.enum.find(
-      (value) => typeof value === "string"
-    );
-    if (firstString !== void 0) return JSON.stringify(firstString);
-  }
-  const type = Array.isArray(schema.type) ? schema.type[0] : schema.type;
-  switch (type) {
-    case "number":
-    case "integer":
-      return "0";
-    case "boolean":
-      return "false";
-    case "array":
-      return "[]";
-    case "object":
-      return "{}";
-    default:
-      return '""';
-  }
+	const schema = asSchemaObject(propSchema);
+	if (!schema) return "\"\"";
+	if (Array.isArray(schema.enum)) {
+		const firstString = schema.enum.find((value) => typeof value === "string");
+		if (firstString !== void 0) return JSON.stringify(firstString);
+	}
+	switch (Array.isArray(schema.type) ? schema.type[0] : schema.type) {
+		case "number":
+		case "integer": return "0";
+		case "boolean": return "false";
+		case "array": return "[]";
+		case "object": return "{}";
+		default: return "\"\"";
+	}
 }
-var YAML_RESERVED_SCALAR = /^(?:true|false|null|yes|no|on|off|~)$/i;
+/** YAML 1.1 plain scalars a parser would coerce away from a string —
+*  booleans, null, and the empty value. Numbers are caught separately (they
+*  have no letter, so the "must contain a letter" rule below rejects them). */
+const YAML_RESERVED_SCALAR = /^(?:true|false|null|yes|no|on|off|~)$/i;
+/** True when `value` is safe to emit as a bare (unquoted) YAML scalar: a plain
+*  identifier-ish token that a YAML parser will load back as the same string.
+*  Requires at least one letter so pure-numeric tokens (`123`, `1.2`) quote,
+*  and rejects reserved words so `true`/`null`/`no` quote — both would
+*  otherwise load as a non-string type. */
 function isBareYamlScalar(value) {
-  return /^[A-Za-z0-9_.-]+$/.test(value) && /[A-Za-z]/.test(value) && !YAML_RESERVED_SCALAR.test(value);
+	return /^[A-Za-z0-9_.-]+$/.test(value) && /[A-Za-z]/.test(value) && !YAML_RESERVED_SCALAR.test(value);
 }
+/** Bare YAML key when safe, quoted otherwise. Keys use the stricter identifier
+*  rule (must start with a letter/underscore) rather than the scalar rule,
+*  since a dotted or digit-led key reads poorly unquoted — but a key that spells
+*  a reserved scalar word (`true`/`null`/`on`/…) must still be quoted, or a
+*  YAML 1.1 parser loads the KEY as a boolean/null instead of the string. */
 function yamlKey(key) {
-  return /^[A-Za-z_][A-Za-z0-9_-]*$/.test(key) && !YAML_RESERVED_SCALAR.test(key) ? key : JSON.stringify(key);
+	return /^[A-Za-z_][A-Za-z0-9_-]*$/.test(key) && !YAML_RESERVED_SCALAR.test(key) ? key : JSON.stringify(key);
 }
+/**
+* The input fields to stub: the schema's `required` list when it names any
+* (in declaration order), else every top-level property — a schema with no
+* required fields gives no signal to cut, and showing all is honest.
+*/
 function stubFields(inputSchema) {
-  const schema = asSchemaObject(inputSchema);
-  const properties = asSchemaObject(schema?.properties);
-  if (!properties) return [];
-  const names = Object.keys(properties);
-  const required = Array.isArray(schema?.required) ? schema.required.filter(
-    (name) => typeof name === "string" && names.includes(name)
-  ) : [];
-  const chosen = required.length > 0 ? required : names;
-  return chosen.map((name) => [
-    name,
-    properties[name]
-  ]);
+	const schema = asSchemaObject(inputSchema);
+	const properties = asSchemaObject(schema?.properties);
+	if (!properties) return [];
+	const names = Object.keys(properties);
+	const required = Array.isArray(schema?.required) ? schema.required.filter((name) => typeof name === "string" && names.includes(name)) : [];
+	return (required.length > 0 ? required : names).map((name) => [name, properties[name]]);
 }
+/** The `- integration.invoke:` step block for an action, ready to paste into a
+*  workflow's `do:` list. */
 function integrationStepYaml(path, inputSchema) {
-  const fields = stubFields(inputSchema);
-  const pathScalar = isBareYamlScalar(path) ? path : JSON.stringify(path);
-  const lines = [
-    "- integration.invoke:",
-    `    path: ${pathScalar}`,
-    ...fields.length === 0 ? ["    input: {}"] : [
-      "    input:",
-      ...fields.map(
-        ([name, propSchema]) => `      ${yamlKey(name)}: ${placeholderFor(propSchema)}`
-      )
-    ]
-  ];
-  return `${lines.join("\n")}
-`;
+	const fields = stubFields(inputSchema);
+	return `${[
+		"- integration.invoke:",
+		`    path: ${isBareYamlScalar(path) ? path : JSON.stringify(path)}`,
+		...fields.length === 0 ? ["    input: {}"] : ["    input:", ...fields.map(([name, propSchema]) => `      ${yamlKey(name)}: ${placeholderFor(propSchema)}`)]
+	].join("\n")}\n`;
 }
-
-// src/connectors/schema-table.tsx
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var MAX_DEPTH = 3;
+//#endregion
+//#region src/connectors/schema-table.tsx
+/** Nested rows beyond this depth collapse to their parent's `object` type —
+*  deeper shapes are readable in the raw-JSON view. */
+const MAX_DEPTH = 3;
 function asNode(value) {
-  return typeof value === "object" && value !== null ? value : null;
+	return typeof value === "object" && value !== null ? value : null;
 }
 function typeLabel(node) {
-  const type = Array.isArray(node.type) ? node.type.join(" | ") : node.type;
-  if (type === "array") {
-    const items = asNode(node.items);
-    const itemType = items ? Array.isArray(items.type) ? items.type.join(" | ") : items.type : void 0;
-    return typeof itemType === "string" ? `array<${itemType}>` : "array";
-  }
-  if (typeof type === "string") return type;
-  if (Array.isArray(node.enum)) return "enum";
-  return "any";
+	const type = Array.isArray(node.type) ? node.type.join(" | ") : node.type;
+	if (type === "array") {
+		const items = asNode(node.items);
+		const itemType = items ? Array.isArray(items.type) ? items.type.join(" | ") : items.type : void 0;
+		return typeof itemType === "string" ? `array<${itemType}>` : "array";
+	}
+	if (typeof type === "string") return type;
+	if (Array.isArray(node.enum)) return "enum";
+	return "any";
 }
 function collectRows(schema, depth, prefix, out) {
-  const properties = asNode(schema.properties);
-  if (!properties) return;
-  const required = new Set(
-    Array.isArray(schema.required) ? schema.required.filter((n) => typeof n === "string") : []
-  );
-  for (const [name, rawProp] of Object.entries(
-    properties
-  )) {
-    const prop = asNode(rawProp) ?? {};
-    const enumValues = Array.isArray(prop.enum) ? prop.enum.map((v) => JSON.stringify(v)).filter((v) => typeof v === "string") : null;
-    out.push({
-      name: prefix ? `${prefix}.${name}` : name,
-      depth,
-      type: typeLabel(prop),
-      required: required.has(name),
-      description: typeof prop.description === "string" ? prop.description : "",
-      enumValues
-    });
-    if (depth + 1 >= MAX_DEPTH) continue;
-    const child = typeLabel(prop) === "object" || asNode(prop.properties) ? prop : asNode(prop.items)?.properties ?? null ? asNode(prop.items) : null;
-    if (child) {
-      collectRows(child, depth + 1, prefix ? `${prefix}.${name}` : name, out);
-    }
-  }
+	const properties = asNode(schema.properties);
+	if (!properties) return;
+	const required = new Set(Array.isArray(schema.required) ? schema.required.filter((n) => typeof n === "string") : []);
+	for (const [name, rawProp] of Object.entries(properties)) {
+		const prop = asNode(rawProp) ?? {};
+		const enumValues = Array.isArray(prop.enum) ? prop.enum.map((v) => JSON.stringify(v)).filter((v) => typeof v === "string") : null;
+		out.push({
+			name: prefix ? `${prefix}.${name}` : name,
+			depth,
+			type: typeLabel(prop),
+			required: required.has(name),
+			description: typeof prop.description === "string" ? prop.description : "",
+			enumValues
+		});
+		if (depth + 1 >= MAX_DEPTH) continue;
+		const child = typeLabel(prop) === "object" || asNode(prop.properties) ? prop : asNode(prop.items)?.properties ?? null ? asNode(prop.items) : null;
+		if (child) collectRows(child, depth + 1, prefix ? `${prefix}.${name}` : name, out);
+	}
 }
 function schemaRows(schema) {
-  const node = asNode(schema);
-  if (!node || !asNode(node.properties)) return null;
-  const rows = [];
-  collectRows(node, 0, "", rows);
-  return rows;
+	const node = asNode(schema);
+	if (!node || !asNode(node.properties)) return null;
+	const rows = [];
+	collectRows(node, 0, "", rows);
+	return rows;
 }
+/** `JSON.stringify` that survives a value it cannot serialize. Schemas arrive
+*  over the wire as JSON (acyclic), but the prop is `unknown`, so a hand-built
+*  cyclic object must degrade to a readable note in the raw-JSON view rather
+*  than throw and take down the host. */
 function safeJsonStringify(value) {
-  try {
-    return JSON.stringify(value, null, 2) ?? "null";
-  } catch {
-    return "(schema cannot be shown as JSON)";
-  }
+	try {
+		return JSON.stringify(value, null, 2) ?? "null";
+	} catch {
+		return "(schema cannot be shown as JSON)";
+	}
 }
 function SchemaTable({ schema, label }) {
-  const [showRaw, setShowRaw] = useState(false);
-  const rows = schemaRows(schema);
-  const rawJson = safeJsonStringify(schema);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: label }),
-      rows !== null && rows.length > 0 && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => setShowRaw((v) => !v),
-          className: "text-primary text-xs transition-colors hover:underline",
-          children: showRaw ? "Field view" : "Raw JSON"
-        }
-      )
-    ] }),
-    rows === null || rows.length === 0 || showRaw ? rows !== null && rows.length === 0 && !showRaw ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "No fields." }) : /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded-lg bg-surface-container-high p-3 text-xs leading-relaxed", children: rawJson }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border border-border", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-border border-b bg-surface-container-high", children: [
-        /* @__PURE__ */ jsx("th", { className: "px-3 py-1.5 text-left font-medium text-muted-foreground text-xs", children: "Field" }),
-        /* @__PURE__ */ jsx("th", { className: "px-3 py-1.5 text-left font-medium text-muted-foreground text-xs", children: "Type" }),
-        /* @__PURE__ */ jsx("th", { className: "px-3 py-1.5 text-left font-medium text-muted-foreground text-xs", children: "Description" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs(
-        "tr",
-        {
-          className: "border-border border-b last:border-b-0",
-          children: [
-            /* @__PURE__ */ jsxs(
-              "td",
-              {
-                className: "whitespace-nowrap px-3 py-1.5 align-top font-mono text-foreground text-xs",
-                style: { paddingLeft: `${0.75 + row.depth * 1}rem` },
-                children: [
-                  row.name.split(".").at(-1),
-                  row.required && /* @__PURE__ */ jsxs("span", { className: "ml-0.5 text-destructive", title: "Required", children: [
-                    "*",
-                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "required" })
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("td", { className: "whitespace-nowrap px-3 py-1.5 align-top font-mono text-muted-foreground text-xs", children: row.type }),
-            /* @__PURE__ */ jsxs("td", { className: "px-3 py-1.5 align-top text-muted-foreground text-xs", children: [
-              row.description,
-              row.enumValues && /* @__PURE__ */ jsxs("span", { className: row.description ? "ml-1" : "", children: [
-                "One of: ",
-                row.enumValues.join(", ")
-              ] })
-            ] })
-          ]
-        },
-        row.name
-      )) })
-    ] }) })
-  ] });
+	const [showRaw, setShowRaw] = useState(false);
+	const rows = schemaRows(schema);
+	const rawJson = safeJsonStringify(schema);
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "mb-1.5 flex items-center justify-between",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "font-medium text-muted-foreground text-xs uppercase tracking-wide",
+			children: label
+		}), rows !== null && rows.length > 0 && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setShowRaw((v) => !v),
+			className: "text-primary text-xs transition-colors hover:underline",
+			children: showRaw ? "Field view" : "Raw JSON"
+		})]
+	}), rows === null || rows.length === 0 || showRaw ? rows !== null && rows.length === 0 && !showRaw ? /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground text-sm",
+		children: "No fields."
+	}) : /* @__PURE__ */ jsx("pre", {
+		className: "overflow-x-auto rounded-lg bg-surface-container-high p-3 text-xs leading-relaxed",
+		children: rawJson
+	}) : /* @__PURE__ */ jsx("div", {
+		className: "overflow-x-auto rounded-lg border border-border",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full text-sm",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+				className: "border-border border-b bg-surface-container-high",
+				children: [
+					/* @__PURE__ */ jsx("th", {
+						className: "px-3 py-1.5 text-left font-medium text-muted-foreground text-xs",
+						children: "Field"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "px-3 py-1.5 text-left font-medium text-muted-foreground text-xs",
+						children: "Type"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "px-3 py-1.5 text-left font-medium text-muted-foreground text-xs",
+						children: "Description"
+					})
+				]
+			}) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", {
+				className: "border-border border-b last:border-b-0",
+				children: [
+					/* @__PURE__ */ jsxs("td", {
+						className: "whitespace-nowrap px-3 py-1.5 align-top font-mono text-foreground text-xs",
+						style: { paddingLeft: `${.75 + row.depth * 1}rem` },
+						children: [row.name.split(".").at(-1), row.required && /* @__PURE__ */ jsxs("span", {
+							className: "ml-0.5 text-destructive",
+							title: "Required",
+							children: ["*", /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: "required"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "whitespace-nowrap px-3 py-1.5 align-top font-mono text-muted-foreground text-xs",
+						children: row.type
+					}),
+					/* @__PURE__ */ jsxs("td", {
+						className: "px-3 py-1.5 align-top text-muted-foreground text-xs",
+						children: [row.description, row.enumValues && /* @__PURE__ */ jsxs("span", {
+							className: row.description ? "ml-1" : "",
+							children: ["One of: ", row.enumValues.join(", ")]
+						})]
+					})
+				]
+			}, row.name)) })]
+		})
+	})] });
 }
-
-// src/connectors/action-list.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var RISK_BADGES = {
-  read: { label: "read", variant: "success" },
-  write: { label: "write", variant: "warning" },
-  destructive: { label: "destructive", variant: "destructive" },
-  unknown: { label: "unclassified", variant: "outline" }
+//#endregion
+//#region src/connectors/action-list.tsx
+const RISK_BADGES = {
+	read: {
+		label: "read",
+		variant: "success"
+	},
+	write: {
+		label: "write",
+		variant: "warning"
+	},
+	destructive: {
+		label: "destructive",
+		variant: "destructive"
+	},
+	unknown: {
+		label: "unclassified",
+		variant: "outline"
+	}
 };
 function RiskBadge({ risk }) {
-  const badge = RISK_BADGES[risk ?? "unknown"] ?? RISK_BADGES.unknown;
-  return /* @__PURE__ */ jsx2(Badge, { variant: badge.variant, children: badge.label });
+	const badge = RISK_BADGES[risk ?? "unknown"] ?? RISK_BADGES.unknown;
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: badge.variant,
+		children: badge.label
+	});
 }
-function CopyButton({
-  text,
-  label,
-  title
-}) {
-  const [state, setState] = useState2("idle");
-  const timerRef = useRef(null);
-  useEffect(
-    () => () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    },
-    []
-  );
-  const copy = async () => {
-    let next;
-    try {
-      await navigator.clipboard.writeText(text);
-      next = "copied";
-    } catch (err) {
-      console.warn("Clipboard write failed:", err);
-      next = "failed";
-    }
-    setState(next);
-    if (timerRef.current) clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(() => setState("idle"), 2e3);
-  };
-  return /* @__PURE__ */ jsxs2(Button, { type: "button", variant: "outline", size: "sm", onClick: copy, title, children: [
-    state === "copied" ? /* @__PURE__ */ jsx2(Check, { className: "h-3.5 w-3.5 text-[var(--surface-success-text)]" }) : /* @__PURE__ */ jsx2(Copy, { className: "h-3.5 w-3.5" }),
-    state === "copied" ? "Copied" : state === "failed" ? "Copy failed" : label
-  ] });
+/** Copy-to-clipboard button with a transient confirmation. `navigator.clipboard`
+*  is unavailable in insecure contexts (and can reject on a permission denial),
+*  so a failure surfaces a visible "Copy failed" state rather than reverting
+*  silently — the user learns the copy didn't happen and can select the text
+*  manually. */
+function CopyButton({ text, label, title }) {
+	const [state, setState] = useState("idle");
+	const timerRef = useRef(null);
+	useEffect(() => () => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+	}, []);
+	const copy = async () => {
+		let next;
+		try {
+			await navigator.clipboard.writeText(text);
+			next = "copied";
+		} catch (err) {
+			console.warn("Clipboard write failed:", err);
+			next = "failed";
+		}
+		setState(next);
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => setState("idle"), 2e3);
+	};
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		variant: "outline",
+		size: "sm",
+		onClick: copy,
+		title,
+		children: [state === "copied" ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-[var(--surface-success-text)]" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }), state === "copied" ? "Copied" : state === "failed" ? "Copy failed" : label]
+	});
 }
+/** Many catalog action titles repeat the provider ("GitHub: Issues Create");
+*  on the provider's own page that prefix is noise, so strip it. */
 function actionDisplayTitle(action, providerTitle) {
-  const title = action.title ?? action.path;
-  const prefix = `${providerTitle.toLowerCase()}: `;
-  return title.toLowerCase().startsWith(prefix) ? title.slice(prefix.length) : title;
+	const title = action.title ?? action.path;
+	const prefix = `${providerTitle.toLowerCase()}: `;
+	return title.toLowerCase().startsWith(prefix) ? title.slice(prefix.length) : title;
 }
-function ActionRow({
-  action,
-  title,
-  expanded,
-  onToggle,
-  onBuildWithAssistant
-}) {
-  return /* @__PURE__ */ jsxs2("li", { children: [
-    /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        type: "button",
-        onClick: onToggle,
-        "aria-expanded": expanded,
-        className: "flex w-full items-center justify-between gap-4 p-4 text-left transition-colors hover:bg-surface-container-high",
-        children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 items-center gap-3", children: [
-            expanded ? /* @__PURE__ */ jsx2(
-              ChevronDown,
-              {
-                "aria-hidden": "true",
-                className: "h-4 w-4 shrink-0 text-muted-foreground"
-              }
-            ) : /* @__PURE__ */ jsx2(
-              ChevronRight,
-              {
-                "aria-hidden": "true",
-                className: "h-4 w-4 shrink-0 text-muted-foreground"
-              }
-            ),
-            /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx2("p", { className: "font-medium text-foreground", children: title }),
-              !expanded && action.description && /* @__PURE__ */ jsx2("p", { className: "truncate text-muted-foreground text-sm", children: action.description })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx2(RiskBadge, { risk: action.risk })
-        ]
-      }
-    ),
-    expanded && /* @__PURE__ */ jsxs2("div", { className: "space-y-4 border-border border-t bg-surface-container-high/40 p-4 pl-11", children: [
-      action.description && /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground text-sm", children: action.description }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsx2("code", { className: "rounded bg-surface-container-high px-2 py-1 font-mono text-sm", children: action.path }),
-        /* @__PURE__ */ jsx2(CopyButton, { text: action.path, label: "Copy path" })
-      ] }),
-      /* @__PURE__ */ jsx2(SchemaTable, { schema: action.inputSchema, label: "Input" }),
-      action.outputSchema != null && /* @__PURE__ */ jsxs2("details", { children: [
-        /* @__PURE__ */ jsxs2("summary", { className: "cursor-pointer text-muted-foreground text-sm transition-colors hover:text-foreground", children: [
-          "Output shape (for",
-          " ",
-          /* @__PURE__ */ jsx2("code", { className: "rounded bg-surface-container-high px-1 py-0.5 font-mono text-xs", children: "${steps[N]\u2026}" }),
-          " ",
-          "expressions)"
-        ] }),
-        /* @__PURE__ */ jsx2("div", { className: "mt-2", children: /* @__PURE__ */ jsx2(SchemaTable, { schema: action.outputSchema, label: "Output" }) })
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsx2(
-          CopyButton,
-          {
-            text: integrationStepYaml(action.path, action.inputSchema),
-            label: "Copy step YAML",
-            title: "A ready-to-paste integration.invoke step for a workflow definition's do: list"
-          }
-        ),
-        onBuildWithAssistant && /* @__PURE__ */ jsx2(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            onClick: () => onBuildWithAssistant(action),
-            children: "Build with assistant"
-          }
-        )
-      ] })
-    ] })
-  ] });
+/** One expandable action row: title + risk collapsed; path, schemas, and the
+*  copy/build affordances expanded. */
+function ActionRow({ action, title, expanded, onToggle, onBuildWithAssistant }) {
+	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onToggle,
+		"aria-expanded": expanded,
+		className: "flex w-full items-center justify-between gap-4 p-4 text-left transition-colors hover:bg-surface-container-high",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-3",
+			children: [expanded ? /* @__PURE__ */ jsx(ChevronDown, {
+				"aria-hidden": "true",
+				className: "h-4 w-4 shrink-0 text-muted-foreground"
+			}) : /* @__PURE__ */ jsx(ChevronRight, {
+				"aria-hidden": "true",
+				className: "h-4 w-4 shrink-0 text-muted-foreground"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "font-medium text-foreground",
+					children: title
+				}), !expanded && action.description && /* @__PURE__ */ jsx("p", {
+					className: "truncate text-muted-foreground text-sm",
+					children: action.description
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(RiskBadge, { risk: action.risk })]
+	}), expanded && /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4 border-border border-t bg-surface-container-high/40 p-4 pl-11",
+		children: [
+			action.description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: action.description
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ jsx("code", {
+					className: "rounded bg-surface-container-high px-2 py-1 font-mono text-sm",
+					children: action.path
+				}), /* @__PURE__ */ jsx(CopyButton, {
+					text: action.path,
+					label: "Copy path"
+				})]
+			}),
+			/* @__PURE__ */ jsx(SchemaTable, {
+				schema: action.inputSchema,
+				label: "Input"
+			}),
+			action.outputSchema != null && /* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsxs("summary", {
+				className: "cursor-pointer text-muted-foreground text-sm transition-colors hover:text-foreground",
+				children: [
+					"Output shape (for",
+					" ",
+					/* @__PURE__ */ jsx("code", {
+						className: "rounded bg-surface-container-high px-1 py-0.5 font-mono text-xs",
+						children: "${steps[N]…}"
+					}),
+					" ",
+					"expressions)"
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "mt-2",
+				children: /* @__PURE__ */ jsx(SchemaTable, {
+					schema: action.outputSchema,
+					label: "Output"
+				})
+			})] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ jsx(CopyButton, {
+					text: integrationStepYaml(action.path, action.inputSchema),
+					label: "Copy step YAML",
+					title: "A ready-to-paste integration.invoke step for a workflow definition's do: list"
+				}), onBuildWithAssistant && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "sm",
+					onClick: () => onBuildWithAssistant(action),
+					children: "Build with assistant"
+				})]
+			})
+		]
+	})] });
 }
-function ConnectorActionList({
-  actions,
-  providerTitle,
-  onBuildWithAssistant,
-  maybeTruncated,
-  className
-}) {
-  const [filter, setFilter] = useState2("");
-  const [expandedPath, setExpandedPath] = useState2(null);
-  const decorated = useMemo(
-    () => actions.map((action) => ({
-      action,
-      title: actionDisplayTitle(action, providerTitle)
-    })).sort((a, b) => a.title.localeCompare(b.title)),
-    [actions, providerTitle]
-  );
-  const filtered = useMemo(() => {
-    const q = filter.trim().toLowerCase();
-    if (!q) return decorated;
-    return decorated.filter(
-      ({ action, title }) => title.toLowerCase().includes(q) || action.path.toLowerCase().includes(q) || (action.description ?? "").toLowerCase().includes(q)
-    );
-  }, [decorated, filter]);
-  if (actions.length === 0) {
-    return /* @__PURE__ */ jsx2(
-      "section",
-      {
-        className: cn("rounded-lg border border-border bg-card p-6", className),
-        children: /* @__PURE__ */ jsx2("p", { className: "text-center text-muted-foreground text-sm", children: "This connector doesn't expose any invokable actions yet." })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs2(
-    "section",
-    {
-      className: cn(
-        "overflow-hidden rounded-lg border border-border bg-card",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx2("div", { className: "border-border border-b p-4", children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-3", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "relative min-w-[12rem] flex-1", children: [
-            /* @__PURE__ */ jsx2(
-              Search,
-              {
-                "aria-hidden": "true",
-                className: "pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-muted-foreground"
-              }
-            ),
-            /* @__PURE__ */ jsx2(
-              Input,
-              {
-                type: "search",
-                value: filter,
-                onChange: (e) => setFilter(e.target.value),
-                placeholder: "Filter actions",
-                "aria-label": "Filter actions",
-                className: "pl-8"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs2(
-            "span",
-            {
-              role: "status",
-              "aria-live": "polite",
-              className: "text-muted-foreground text-sm",
-              children: [
-                filtered.length,
-                " of ",
-                actions.length,
-                maybeTruncated ? "+" : "",
-                " actions"
-              ]
-            }
-          )
-        ] }) }),
-        filtered.length === 0 ? /* @__PURE__ */ jsxs2("div", { className: "p-6 text-center", children: [
-          /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground text-sm", children: "No actions match your filter." }),
-          /* @__PURE__ */ jsx2(
-            Button,
-            {
-              type: "button",
-              variant: "outline",
-              size: "sm",
-              onClick: () => setFilter(""),
-              className: "mt-4",
-              children: "Clear filter"
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx2("ul", { className: "divide-y divide-border", children: filtered.map(({ action, title }) => /* @__PURE__ */ jsx2(
-          ActionRow,
-          {
-            action,
-            title,
-            expanded: expandedPath === action.path,
-            onToggle: () => setExpandedPath(
-              (current) => current === action.path ? null : action.path
-            ),
-            onBuildWithAssistant
-          },
-          action.path
-        )) })
-      ]
-    }
-  );
+/**
+* Searchable list of a connector's invokable actions. Each row expands to show
+* the action's path, input/output schemas, and copy/build affordances. Purely
+* presentational — the host supplies the actions and the assistant hook.
+*/
+function ConnectorActionList({ actions, providerTitle, onBuildWithAssistant, maybeTruncated, className }) {
+	const [filter, setFilter] = useState("");
+	const [expandedPath, setExpandedPath] = useState(null);
+	const decorated = useMemo(() => actions.map((action) => ({
+		action,
+		title: actionDisplayTitle(action, providerTitle)
+	})).sort((a, b) => a.title.localeCompare(b.title)), [actions, providerTitle]);
+	const filtered = useMemo(() => {
+		const q = filter.trim().toLowerCase();
+		if (!q) return decorated;
+		return decorated.filter(({ action, title }) => title.toLowerCase().includes(q) || action.path.toLowerCase().includes(q) || (action.description ?? "").toLowerCase().includes(q));
+	}, [decorated, filter]);
+	if (actions.length === 0) return /* @__PURE__ */ jsx("section", {
+		className: cn$1("rounded-lg border border-border bg-card p-6", className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-center text-muted-foreground text-sm",
+			children: "This connector doesn't expose any invokable actions yet."
+		})
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn$1("overflow-hidden rounded-lg border border-border bg-card", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "border-border border-b p-4",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative min-w-[12rem] flex-1",
+					children: [/* @__PURE__ */ jsx(Search, {
+						"aria-hidden": "true",
+						className: "pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+					}), /* @__PURE__ */ jsx(Input, {
+						type: "search",
+						value: filter,
+						onChange: (e) => setFilter(e.target.value),
+						placeholder: "Filter actions",
+						"aria-label": "Filter actions",
+						className: "pl-8"
+					})]
+				}), /* @__PURE__ */ jsxs("span", {
+					role: "status",
+					"aria-live": "polite",
+					className: "text-muted-foreground text-sm",
+					children: [
+						filtered.length,
+						" of ",
+						actions.length,
+						maybeTruncated ? "+" : "",
+						" actions"
+					]
+				})]
+			})
+		}), filtered.length === 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "p-6 text-center",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: "No actions match your filter."
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				onClick: () => setFilter(""),
+				className: "mt-4",
+				children: "Clear filter"
+			})]
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: "divide-y divide-border",
+			children: filtered.map(({ action, title }) => /* @__PURE__ */ jsx(ActionRow, {
+				action,
+				title,
+				expanded: expandedPath === action.path,
+				onToggle: () => setExpandedPath((current) => current === action.path ? null : action.path),
+				onBuildWithAssistant
+			}, action.path))
+		})]
+	});
 }
-
-// src/connectors/catalog-list.tsx
-import { Button as Button2, EmptyState, Input as Input2 } from "@tangle-network/ui/primitives";
-import { Blocks, ChevronRight as ChevronRight2, Search as Search2 } from "lucide-react";
-import { useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
-import { focusField } from "@tangle-network/ui/utils";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+//#endregion
+//#region src/connectors/catalog-list.tsx
 function optionsFor(entries, pick) {
-  const map = /* @__PURE__ */ new Map();
-  for (const entry of entries) {
-    const { value, label } = pick(entry);
-    if (value) map.set(value, label ?? value);
-  }
-  return [...map.entries()].map(([value, label]) => ({ value, label })).sort((a, b) => a.label.localeCompare(b.label));
+	const map = /* @__PURE__ */ new Map();
+	for (const entry of entries) {
+		const { value, label } = pick(entry);
+		if (value) map.set(value, label ?? value);
+	}
+	return [...map.entries()].map(([value, label]) => ({
+		value,
+		label
+	})).sort((a, b) => a.label.localeCompare(b.label));
 }
 function rowDetail(entry) {
-  const parts = [];
-  if (entry.category) parts.push(entry.categoryLabel ?? entry.category);
-  if (entry.authKind) parts.push(entry.authKindLabel ?? entry.authKind);
-  if (entry.actionCount != null) {
-    parts.push(
-      `${entry.actionCount} ${entry.actionCount === 1 ? "action" : "actions"}`
-    );
-  }
-  if (entry.triggerCount != null && entry.triggerCount > 0) {
-    parts.push(
-      `${entry.triggerCount} trigger ${entry.triggerCount === 1 ? "event" : "events"}`
-    );
-  }
-  return parts.join(" \xB7 ");
+	const parts = [];
+	if (entry.category) parts.push(entry.categoryLabel ?? entry.category);
+	if (entry.authKind) parts.push(entry.authKindLabel ?? entry.authKind);
+	if (entry.actionCount != null) parts.push(`${entry.actionCount} ${entry.actionCount === 1 ? "action" : "actions"}`);
+	if (entry.triggerCount != null && entry.triggerCount > 0) parts.push(`${entry.triggerCount} trigger ${entry.triggerCount === 1 ? "event" : "events"}`);
+	return parts.join(" · ");
 }
+/** Neutral leading chip used when the host supplies no brand icon. */
 function FallbackIcon() {
-  return /* @__PURE__ */ jsx3("div", { className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-surface-container-high", children: /* @__PURE__ */ jsx3(Blocks, { className: "size-5 text-muted-foreground" }) });
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-surface-container-high",
+		children: /* @__PURE__ */ jsx(Blocks, { className: "size-5 text-muted-foreground" })
+	});
 }
-function FilterSelect({
-  value,
-  onChange,
-  options,
-  allLabel,
-  ariaLabel
-}) {
-  return /* @__PURE__ */ jsxs3(
-    "select",
-    {
-      value,
-      onChange: (e) => onChange(e.target.value),
-      "aria-label": ariaLabel,
-      className: `rounded-lg border bg-card px-3 py-2 text-foreground text-sm ${focusField}`,
-      children: [
-        /* @__PURE__ */ jsx3("option", { value: "", children: allLabel }),
-        options.map((option) => /* @__PURE__ */ jsx3("option", { value: option.value, children: option.label }, option.value))
-      ]
-    }
-  );
+function FilterSelect({ value, onChange, options, allLabel, ariaLabel }) {
+	return /* @__PURE__ */ jsxs("select", {
+		value,
+		onChange: (e) => onChange(e.target.value),
+		"aria-label": ariaLabel,
+		className: `rounded-lg border bg-card px-3 py-2 text-foreground text-sm ${focusField}`,
+		children: [/* @__PURE__ */ jsx("option", {
+			value: "",
+			children: allLabel
+		}), options.map((option) => /* @__PURE__ */ jsx("option", {
+			value: option.value,
+			children: option.label
+		}, option.value))]
+	});
 }
-function ConnectorCatalogList({
-  entries,
-  getConnectorHref,
-  onOpenConnector,
-  renderIcon,
-  onRequestIntegration,
-  className
-}) {
-  const [search, setSearch] = useState3("");
-  const [categoryFilter, setCategoryFilter] = useState3("");
-  const [authFilter, setAuthFilter] = useState3("");
-  const categoryOptions = useMemo2(
-    () => optionsFor(entries, (e) => ({
-      value: e.category,
-      label: e.categoryLabel
-    })),
-    [entries]
-  );
-  const authOptions = useMemo2(
-    () => optionsFor(entries, (e) => ({
-      value: e.authKind,
-      label: e.authKindLabel
-    })),
-    [entries]
-  );
-  const filtered = useMemo2(() => {
-    const q = search.trim().toLowerCase();
-    return entries.filter((entry) => {
-      if (categoryFilter && entry.category !== categoryFilter) return false;
-      if (authFilter && entry.authKind !== authFilter) return false;
-      if (!q) return true;
-      return entry.title.toLowerCase().includes(q) || entry.providerId.toLowerCase().includes(q);
-    }).sort((a, b) => a.title.localeCompare(b.title));
-  }, [entries, search, categoryFilter, authFilter]);
-  const clearFilters = () => {
-    setSearch("");
-    setCategoryFilter("");
-    setAuthFilter("");
-  };
-  useEffect2(() => {
-    if (categoryFilter && !categoryOptions.some((o) => o.value === categoryFilter)) {
-      setCategoryFilter("");
-    }
-  }, [categoryOptions, categoryFilter]);
-  useEffect2(() => {
-    if (authFilter && !authOptions.some((o) => o.value === authFilter)) {
-      setAuthFilter("");
-    }
-  }, [authOptions, authFilter]);
-  return /* @__PURE__ */ jsxs3(
-    "section",
-    {
-      className: cn(
-        "overflow-hidden rounded-lg border border-border bg-card",
-        className
-      ),
-      children: [
-        entries.length > 0 && /* @__PURE__ */ jsx3("div", { className: "border-border border-b p-4", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-3", children: [
-          /* @__PURE__ */ jsxs3("div", { className: "relative min-w-[15rem] flex-1", children: [
-            /* @__PURE__ */ jsx3(
-              Search2,
-              {
-                "aria-hidden": "true",
-                className: "pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-muted-foreground"
-              }
-            ),
-            /* @__PURE__ */ jsx3(
-              Input2,
-              {
-                type: "search",
-                value: search,
-                onChange: (e) => setSearch(e.target.value),
-                placeholder: "Search connectors",
-                "aria-label": "Search connectors",
-                className: "pl-8"
-              }
-            )
-          ] }),
-          categoryOptions.length > 1 && /* @__PURE__ */ jsx3(
-            FilterSelect,
-            {
-              value: categoryFilter,
-              onChange: setCategoryFilter,
-              options: categoryOptions,
-              allLabel: "All categories",
-              ariaLabel: "Filter by category"
-            }
-          ),
-          authOptions.length > 1 && /* @__PURE__ */ jsx3(
-            FilterSelect,
-            {
-              value: authFilter,
-              onChange: setAuthFilter,
-              options: authOptions,
-              allLabel: "All auth",
-              ariaLabel: "Filter by auth type"
-            }
-          ),
-          /* @__PURE__ */ jsxs3(
-            "span",
-            {
-              role: "status",
-              "aria-live": "polite",
-              className: "text-muted-foreground text-sm",
-              children: [
-                filtered.length,
-                " of ",
-                entries.length,
-                " connectors"
-              ]
-            }
-          ),
-          onRequestIntegration && /* @__PURE__ */ jsx3(
-            "button",
-            {
-              type: "button",
-              onClick: () => onRequestIntegration(search.trim()),
-              className: "text-[var(--accent-text)] text-sm transition-colors hover:underline",
-              children: "Request an integration"
-            }
-          )
-        ] }) }),
-        entries.length === 0 ? /* @__PURE__ */ jsx3(
-          EmptyState,
-          {
-            title: "No connectors",
-            description: "No connectors are available yet."
-          }
-        ) : filtered.length === 0 ? /* @__PURE__ */ jsx3(
-          EmptyState,
-          {
-            title: "No matches",
-            description: "No connectors match your filters.",
-            action: /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
-              /* @__PURE__ */ jsx3(
-                Button2,
-                {
-                  type: "button",
-                  variant: "outline",
-                  size: "sm",
-                  onClick: clearFilters,
-                  children: "Clear filters"
-                }
-              ),
-              onRequestIntegration && /* @__PURE__ */ jsxs3(
-                Button2,
-                {
-                  type: "button",
-                  size: "sm",
-                  onClick: () => onRequestIntegration(search.trim()),
-                  children: [
-                    "Request ",
-                    search.trim() ? `"${search.trim()}"` : "an integration"
-                  ]
-                }
-              )
-            ] })
-          }
-        ) : /* @__PURE__ */ jsx3("ul", { className: "divide-y divide-border", children: filtered.map((entry) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsxs3(
-          "a",
-          {
-            href: getConnectorHref(entry.providerId),
-            onClick: (e) => {
-              if (onOpenConnector && e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey) {
-                e.preventDefault();
-                onOpenConnector(entry.providerId);
-              }
-            },
-            className: "flex items-center justify-between gap-4 p-4 transition-colors hover:bg-surface-container-high",
-            children: [
-              /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 items-center gap-3", children: [
-                renderIcon ? renderIcon(entry.providerId) : /* @__PURE__ */ jsx3(FallbackIcon, {}),
-                /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx3("p", { className: "font-medium text-foreground", children: entry.title }),
-                  /* @__PURE__ */ jsx3("p", { className: "truncate text-muted-foreground text-sm", children: rowDetail(entry) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-3", children: [
-                entry.connected && /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground text-sm", children: [
-                  /* @__PURE__ */ jsx3("span", { className: "size-2 rounded-full bg-[var(--surface-success-text)]" }),
-                  "Connected"
-                ] }),
-                /* @__PURE__ */ jsx3(
-                  ChevronRight2,
-                  {
-                    "aria-hidden": "true",
-                    className: "h-4 w-4 text-muted-foreground"
-                  }
-                )
-              ] })
-            ]
-          }
-        ) }, entry.providerId)) })
-      ]
-    }
-  );
+/**
+* Searchable/filterable browse list over every connector the host exposes.
+* Each row links into the connector's detail surface; connect/disconnect and
+* data fetching stay with the host — this list is for discovery.
+*/
+function ConnectorCatalogList({ entries, getConnectorHref, onOpenConnector, renderIcon, onRequestIntegration, className }) {
+	const [search, setSearch] = useState("");
+	const [categoryFilter, setCategoryFilter] = useState("");
+	const [authFilter, setAuthFilter] = useState("");
+	const categoryOptions = useMemo(() => optionsFor(entries, (e) => ({
+		value: e.category,
+		label: e.categoryLabel
+	})), [entries]);
+	const authOptions = useMemo(() => optionsFor(entries, (e) => ({
+		value: e.authKind,
+		label: e.authKindLabel
+	})), [entries]);
+	const filtered = useMemo(() => {
+		const q = search.trim().toLowerCase();
+		return entries.filter((entry) => {
+			if (categoryFilter && entry.category !== categoryFilter) return false;
+			if (authFilter && entry.authKind !== authFilter) return false;
+			if (!q) return true;
+			return entry.title.toLowerCase().includes(q) || entry.providerId.toLowerCase().includes(q);
+		}).sort((a, b) => a.title.localeCompare(b.title));
+	}, [
+		entries,
+		search,
+		categoryFilter,
+		authFilter
+	]);
+	const clearFilters = () => {
+		setSearch("");
+		setCategoryFilter("");
+		setAuthFilter("");
+	};
+	useEffect(() => {
+		if (categoryFilter && !categoryOptions.some((o) => o.value === categoryFilter)) setCategoryFilter("");
+	}, [categoryOptions, categoryFilter]);
+	useEffect(() => {
+		if (authFilter && !authOptions.some((o) => o.value === authFilter)) setAuthFilter("");
+	}, [authOptions, authFilter]);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn$1("overflow-hidden rounded-lg border border-border bg-card", className),
+		children: [entries.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "border-border border-b p-4",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "relative min-w-[15rem] flex-1",
+						children: [/* @__PURE__ */ jsx(Search, {
+							"aria-hidden": "true",
+							className: "pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+						}), /* @__PURE__ */ jsx(Input, {
+							type: "search",
+							value: search,
+							onChange: (e) => setSearch(e.target.value),
+							placeholder: "Search connectors",
+							"aria-label": "Search connectors",
+							className: "pl-8"
+						})]
+					}),
+					categoryOptions.length > 1 && /* @__PURE__ */ jsx(FilterSelect, {
+						value: categoryFilter,
+						onChange: setCategoryFilter,
+						options: categoryOptions,
+						allLabel: "All categories",
+						ariaLabel: "Filter by category"
+					}),
+					authOptions.length > 1 && /* @__PURE__ */ jsx(FilterSelect, {
+						value: authFilter,
+						onChange: setAuthFilter,
+						options: authOptions,
+						allLabel: "All auth",
+						ariaLabel: "Filter by auth type"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						role: "status",
+						"aria-live": "polite",
+						className: "text-muted-foreground text-sm",
+						children: [
+							filtered.length,
+							" of ",
+							entries.length,
+							" connectors"
+						]
+					}),
+					onRequestIntegration && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onRequestIntegration(search.trim()),
+						className: "text-[var(--accent-text)] text-sm transition-colors hover:underline",
+						children: "Request an integration"
+					})
+				]
+			})
+		}), entries.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+			title: "No connectors",
+			description: "No connectors are available yet."
+		}) : filtered.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+			title: "No matches",
+			description: "No connectors match your filters.",
+			action: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-center gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					onClick: clearFilters,
+					children: "Clear filters"
+				}), onRequestIntegration && /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					size: "sm",
+					onClick: () => onRequestIntegration(search.trim()),
+					children: ["Request ", search.trim() ? `"${search.trim()}"` : "an integration"]
+				})]
+			})
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: "divide-y divide-border",
+			children: filtered.map((entry) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+				href: getConnectorHref(entry.providerId),
+				onClick: (e) => {
+					if (onOpenConnector && e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey) {
+						e.preventDefault();
+						onOpenConnector(entry.providerId);
+					}
+				},
+				className: "flex items-center justify-between gap-4 p-4 transition-colors hover:bg-surface-container-high",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-3",
+					children: [renderIcon ? renderIcon(entry.providerId) : /* @__PURE__ */ jsx(FallbackIcon, {}), /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "font-medium text-foreground",
+							children: entry.title
+						}), /* @__PURE__ */ jsx("p", {
+							className: "truncate text-muted-foreground text-sm",
+							children: rowDetail(entry)
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-3",
+					children: [entry.connected && /* @__PURE__ */ jsxs("span", {
+						className: "inline-flex items-center gap-1.5 text-muted-foreground text-sm",
+						children: [/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-[var(--surface-success-text)]" }), "Connected"]
+					}), /* @__PURE__ */ jsx(ChevronRight, {
+						"aria-hidden": "true",
+						className: "h-4 w-4 text-muted-foreground"
+					})]
+				})]
+			}) }, entry.providerId))
+		})]
+	});
 }
-export {
-  ConnectorActionList,
-  ConnectorCatalogList,
-  SchemaTable,
-  integrationStepYaml
-};
+//#endregion
+export { ConnectorActionList, ConnectorCatalogList, SchemaTable, integrationStepYaml };