@tangle-network/sandbox-ui 0.84.0 → 0.85.0

package/dist/connectors.d.ts

@@ -0,0 +1,80 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/** One invokable action a connector exposes (the platform's hub tool shape, decoupled from any client). */
+interface ConnectorAction {
+    path: string;
+    title?: string;
+    description?: string;
+    inputSchema?: unknown;
+    outputSchema?: unknown;
+    risk?: "read" | "write" | "destructive" | "unknown";
+}
+/** One row in the connector catalog browse list. */
+interface ConnectorCatalogEntry {
+    providerId: string;
+    title: string;
+    category?: string | null;
+    categoryLabel?: string | null;
+    authKind?: string | null;
+    authKindLabel?: string | null;
+    actionCount?: number | null;
+    triggerCount?: number | null;
+    connected?: boolean;
+}
+
+interface ConnectorActionListProps {
+    actions: ConnectorAction[];
+    /** Connector display title; a leading "<title>: " prefix is stripped from action titles. */
+    providerTitle: string;
+    /** Renders the "Build with assistant" button when provided; called with the action. */
+    onBuildWithAssistant?: (action: ConnectorAction) => void;
+    /** True when the action list may be truncated at the fetch limit — the count renders "N+". */
+    maybeTruncated?: boolean;
+    className?: string;
+}
+/**
+ * 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.
+ */
+declare function ConnectorActionList({ actions, providerTitle, onBuildWithAssistant, maybeTruncated, className, }: ConnectorActionListProps): react_jsx_runtime.JSX.Element;
+
+interface ConnectorCatalogListProps {
+    entries: ConnectorCatalogEntry[];
+    /** Resolve the href for a connector's detail surface (rendered on each row's <a>). */
+    getConnectorHref: (providerId: string) => string;
+    /** SPA navigation: when provided, row clicks preventDefault and call this instead of following the href. */
+    onOpenConnector?: (providerId: string) => void;
+    /** Host-owned brand icon per provider (e.g. platform's HubProviderIcon); fallback is a neutral chip. */
+    renderIcon?: (providerId: string) => ReactNode;
+    /** "Request an integration" affordance, receives the current search text; button hidden when absent. */
+    onRequestIntegration?: (prefill: string) => void;
+    className?: string;
+}
+/**
+ * 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.
+ */
+declare function ConnectorCatalogList({ entries, getConnectorHref, onOpenConnector, renderIcon, onRequestIntegration, className, }: ConnectorCatalogListProps): react_jsx_runtime.JSX.Element;
+
+interface SchemaTableProps {
+    schema: unknown;
+    /** Toggle/table caption, e.g. "Input" or "Output". */
+    label: string;
+}
+declare function SchemaTable({ schema, label }: SchemaTableProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Mechanical `integration.invoke` step-YAML stub for a hub action, derived
+ * entirely from the action's JSON input schema: the step shape the workflow
+ * language expects, with the action's required fields (or every top-level
+ * field when the schema declares none required) stubbed by type. A copy-paste
+ * seed for hand-authoring a workflow — not a validated document.
+ */
+/** The `- integration.invoke:` step block for an action, ready to paste into a
+ *  workflow's `do:` list. */
+declare function integrationStepYaml(path: string, inputSchema: unknown): string;
+
+export { type ConnectorAction, ConnectorActionList, type ConnectorActionListProps, type ConnectorCatalogEntry, ConnectorCatalogList, type ConnectorCatalogListProps, SchemaTable, type SchemaTableProps, integrationStepYaml };

package/dist/connectors.js

@@ -0,0 +1,682 @@
+import {
+  cn
+} from "./chunk-EI44GEQ5.js";
+import "./chunk-U67V476Y.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
+function asSchemaObject(value) {
+  return typeof value === "object" && value !== null ? value : null;
+}
+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 '""';
+  }
+}
+var YAML_RESERVED_SCALAR = /^(?:true|false|null|yes|no|on|off|~)$/i;
+function isBareYamlScalar(value) {
+  return /^[A-Za-z0-9_.-]+$/.test(value) && /[A-Za-z]/.test(value) && !YAML_RESERVED_SCALAR.test(value);
+}
+function yamlKey(key) {
+  return /^[A-Za-z_][A-Za-z0-9_-]*$/.test(key) && !YAML_RESERVED_SCALAR.test(key) ? key : JSON.stringify(key);
+}
+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]
+  ]);
+}
+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")}
+`;
+}
+
+// src/connectors/schema-table.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MAX_DEPTH = 3;
+function asNode(value) {
+  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";
+}
+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);
+    }
+  }
+}
+function schemaRows(schema) {
+  const node = asNode(schema);
+  if (!node || !asNode(node.properties)) return null;
+  const rows = [];
+  collectRows(node, 0, "", rows);
+  return rows;
+}
+function safeJsonStringify(value) {
+  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
+      )) })
+    ] }) })
+  ] });
+}
+
+// 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" }
+};
+function RiskBadge({ risk }) {
+  const badge = RISK_BADGES[risk ?? "unknown"] ?? RISK_BADGES.unknown;
+  return /* @__PURE__ */ jsx2(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
+  ] });
+}
+function actionDisplayTitle(action, providerTitle) {
+  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"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+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
+        )) })
+      ]
+    }
+  );
+}
+
+// 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 { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+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));
+}
+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 ");
+}
+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" }) });
+}
+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 border-border bg-card px-3 py-2 text-foreground text-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      children: [
+        /* @__PURE__ */ jsx3("option", { value: "", children: allLabel }),
+        options.map((option) => /* @__PURE__ */ jsx3("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-primary 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)) })
+      ]
+    }
+  );
+}
+export {
+  ConnectorActionList,
+  ConnectorCatalogList,
+  SchemaTable,
+  integrationStepYaml
+};

package/dist/globals.css

@@ -1289,6 +1289,9 @@
   .min-w-\[12rem\] {
     min-width: 12rem;
   }
+  .min-w-\[15rem\] {
+    min-width: 15rem;
+  }
   .min-w-\[20px\] {
     min-width: 20px;
   }
@@ -2475,6 +2478,12 @@
   .bg-surface-container-high {
     background-color: var(--color-surface-container-high);
   }
+  .bg-surface-container-high\/40 {
+    background-color: var(--color-surface-container-high);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-container-high) 40%, transparent);
+    }
+  }
   .bg-surface-container-high\/60 {
     background-color: var(--color-surface-container-high);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2826,6 +2835,9 @@
   .pl-9 {
     padding-left: calc(var(--spacing) * 9);
   }
+  .pl-11 {
+    padding-left: calc(var(--spacing) * 11);
+  }
   .text-center {
     text-align: center;
   }
@@ -2841,6 +2853,9 @@
   .align-text-bottom {
     vertical-align: text-bottom;
   }
+  .align-top {
+    vertical-align: top;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -3821,6 +3836,12 @@
       border-width: 0px;
     }
   }
+  .last\:border-b-0 {
+    &:last-child {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+  }
   .focus-within\:border-\[var\(--border-accent-hover\)\] {
     &:focus-within {
       border-color: var(--border-accent-hover);

package/dist/index.js

@@ -214,10 +214,6 @@ import {
   parseInsufficientBalance,
   useSidebar
 } from "./chunk-H237JF3H.js";
-import "./chunk-VIREDUBF.js";
-import {
-  usePtySession
-} from "./chunk-77WVVJA4.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -226,6 +222,10 @@ import {
   UsageChart,
   formatPrice
 } from "./chunk-OMUIPJQZ.js";
+import "./chunk-VIREDUBF.js";
+import {
+  usePtySession
+} from "./chunk-77WVVJA4.js";
 import {
   Avatar,
   AvatarFallback,

package/dist/styles.css

@@ -1289,6 +1289,9 @@
   .min-w-\[12rem\] {
     min-width: 12rem;
   }
+  .min-w-\[15rem\] {
+    min-width: 15rem;
+  }
   .min-w-\[20px\] {
     min-width: 20px;
   }
@@ -2475,6 +2478,12 @@
   .bg-surface-container-high {
     background-color: var(--color-surface-container-high);
   }
+  .bg-surface-container-high\/40 {
+    background-color: var(--color-surface-container-high);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-container-high) 40%, transparent);
+    }
+  }
   .bg-surface-container-high\/60 {
     background-color: var(--color-surface-container-high);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2826,6 +2835,9 @@
   .pl-9 {
     padding-left: calc(var(--spacing) * 9);
   }
+  .pl-11 {
+    padding-left: calc(var(--spacing) * 11);
+  }
   .text-center {
     text-align: center;
   }
@@ -2841,6 +2853,9 @@
   .align-text-bottom {
     vertical-align: text-bottom;
   }
+  .align-top {
+    vertical-align: top;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -3821,6 +3836,12 @@
       border-width: 0px;
     }
   }
+  .last\:border-b-0 {
+    &:last-child {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+  }
   .focus-within\:border-\[var\(--border-accent-hover\)\] {
     &:focus-within {
       border-color: var(--border-accent-hover);

package/dist/workbench.js

@@ -15,9 +15,9 @@ import {
 } from "./chunk-HCOZO53G.js";
 import "./chunk-3J6FG3FJ.js";
 import "./chunk-H237JF3H.js";
+import "./chunk-OMUIPJQZ.js";
 import "./chunk-VIREDUBF.js";
 import "./chunk-77WVVJA4.js";
-import "./chunk-OMUIPJQZ.js";
 import "./chunk-4ZZUMXPX.js";
 import "./chunk-2T6KBMLN.js";
 import "./chunk-R4AR3TKR.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.84.0",
+  "version": "0.85.0",
   "description": "Unified UI component library for Tangle Sandbox \u2014 primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -74,6 +74,10 @@
       "import": "./dist/integrations.js",
       "types": "./dist/integrations.d.ts"
     },
+    "./connectors": {
+      "import": "./dist/connectors.js",
+      "types": "./dist/connectors.d.ts"
+    },
     "./pages": {
       "import": "./dist/pages.js",
       "types": "./dist/pages.d.ts"