@gorgo/medusa-integration 0.1.4 → 0.1.5

package/.medusa/server/src/admin/index.js

@@ -291,372 +291,85 @@ const IntegrationsBreadcrumb = () => {
 const handle$2 = {
   breadcrumb: () => /* @__PURE__ */ jsxRuntime.jsx(IntegrationsBreadcrumb, {})
 };
-function isSafeHref(raw) {
-  try {
-    return new URL(raw).protocol === "https:";
-  } catch {
-    return false;
+const Dash = () => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: "-" });
+const IntegrationFieldValue = ({
+  field,
+  value,
+  secretConfigured = false
+}) => {
+  var _a;
+  const { t } = reactI18next.useTranslation();
+  if (field.secret || field.control === "secret") {
+    return secretConfigured ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "••••••••" }) : /* @__PURE__ */ jsxRuntime.jsx(Dash, {});
   }
-}
-const INLINE_RE = /`([^`\n]+)`|\[([^\]\n]*)\]\(([^)\s]+)\)|\*\*([^*\n]+)\*\*|\*([^*\n]+)\*|_([^_\n]+)_/;
-const MAX_DEPTH = 3;
-function parseInline(src, depth = 0) {
-  if (!src) return [];
-  if (depth >= MAX_DEPTH) return [{ type: "text", value: src }];
-  const out = [];
-  const re = new RegExp(INLINE_RE, "g");
-  let last = 0;
-  let m;
-  while ((m = re.exec(src)) !== null) {
-    const [full, code, linkText, linkHref, strong, star, underscore] = m;
-    if (m.index > last) out.push({ type: "text", value: src.slice(last, m.index) });
-    last = m.index + full.length;
-    if (code !== void 0) {
-      out.push({ type: "code", value: code });
-    } else if (linkHref !== void 0) {
-      const isImage = m.index > 0 && src[m.index - 1] === "!";
-      if (!isImage && isSafeHref(linkHref)) {
-        out.push({ type: "link", href: linkHref, children: parseInline(linkText, depth + 1) });
-      } else {
-        out.push({ type: "text", value: full });
-      }
-    } else if (strong !== void 0) {
-      out.push({ type: "strong", children: parseInline(strong, depth + 1) });
-    } else {
-      out.push({ type: "em", children: parseInline(star ?? underscore, depth + 1) });
-    }
+  if (field.control === "switch") {
+    if (value == null) return /* @__PURE__ */ jsxRuntime.jsx(Dash, {});
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", color: value ? "green" : "grey", children: value ? t("integration.status.enabled") : t("integration.status.disabled") });
   }
-  if (last < src.length) out.push({ type: "text", value: src.slice(last) });
-  return out;
-}
-const MD_MAX_CHARS = 8e3;
-const MD_MAX_BLOCKS = 200;
-const FENCE_RE = /^```(.*)$/;
-const HEADING_RE = /^(#{1,3})\s+(.*)$/;
-const HR_RE = /^-{3,}\s*$/;
-const UL_RE = /^[-*]\s+(.*)$/;
-const OL_RE = /^\d+\.\s+(.*)$/;
-function fenceLabel(info) {
-  const first = info.trim().split(/\s+/)[0] ?? "";
-  return first.replace(/[^a-zA-Z0-9._/-]/g, "").slice(0, 40) || null;
-}
-function parseMarkdown(src) {
-  if (typeof src !== "string" || !src) return [];
-  if (src.length > MD_MAX_CHARS) return [{ type: "truncated" }];
-  const lines = src.replace(/\r\n?/g, "\n").split("\n");
-  const blocks = [];
-  let para = [];
-  const flushPara = () => {
-    if (!para.length) return;
-    blocks.push({ type: "paragraph", children: parseInline(para.join(" ")) });
-    para = [];
-  };
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    const fence = FENCE_RE.exec(line);
-    if (fence) {
-      flushPara();
-      const body = [];
-      i++;
-      while (i < lines.length && !FENCE_RE.test(lines[i])) body.push(lines[i++]);
-      blocks.push({ type: "codeBlock", label: fenceLabel(fence[1]), value: body.join("\n") });
-      continue;
-    }
-    if (!line.trim()) {
-      flushPara();
-      continue;
-    }
-    if (HR_RE.test(line)) {
-      flushPara();
-      blocks.push({ type: "hr" });
-      continue;
-    }
-    const heading = HEADING_RE.exec(line);
-    if (heading) {
-      flushPara();
-      blocks.push({
-        type: "heading",
-        level: heading[1].length + 1,
-        children: parseInline(heading[2])
-      });
-      continue;
-    }
-    const ul = UL_RE.exec(line);
-    const ol = ul ? null : OL_RE.exec(line);
-    if (ul || ol) {
-      flushPara();
-      const ordered = !!ol;
-      const itemRe = ordered ? OL_RE : UL_RE;
-      const items = [];
-      while (i < lines.length) {
-        const item = itemRe.exec(lines[i]);
-        if (!item) break;
-        items.push(parseInline(item[1]));
-        i++;
-      }
-      i--;
-      blocks.push({ type: "list", ordered, items });
-      continue;
+  if (field.control === "json") {
+    if (Array.isArray(value)) {
+      return value.length ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: t("integration.form.items", { count: value.length }) }) : /* @__PURE__ */ jsxRuntime.jsx(Dash, {});
     }
-    para.push(line);
+    if (value == null) return /* @__PURE__ */ jsxRuntime.jsx(Dash, {});
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: t("integration.status.configured") });
   }
-  flushPara();
-  const weight = blocks.reduce((n, b) => n + (b.type === "list" ? b.items.length : 1), 0);
-  return weight > MD_MAX_BLOCKS ? [{ type: "truncated" }] : blocks;
-}
-const Inline = ({ nodes }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: nodes.map((node, i) => {
-  switch (node.type) {
-    case "text":
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { children: node.value }, i);
-    case "code":
-      return /* @__PURE__ */ jsxRuntime.jsx("code", { className: "txt-compact-small bg-ui-bg-component rounded px-1 py-0.5", children: node.value }, i);
-    case "strong":
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "txt-compact-small-plus", children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { nodes: node.children }) }, i);
-    case "em":
-      return /* @__PURE__ */ jsxRuntime.jsx("em", { children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { nodes: node.children }) }, i);
-    case "link":
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          href: node.href,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "text-ui-fg-interactive hover:underline",
-          children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { nodes: node.children })
-        },
-        i
-      );
+  if (value == null || value === "") return /* @__PURE__ */ jsxRuntime.jsx(Dash, {});
+  if (field.control === "select") {
+    const labelKey = (_a = field.optionLabels) == null ? void 0 : _a[String(value)];
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", color: "grey", children: labelKey ? t(labelKey) : String(value) });
   }
-}) });
-const Block = ({ block, truncatedLabel }) => {
-  switch (block.type) {
-    case "heading":
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: block.level === 2 ? "h2" : "h3", children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { nodes: block.children }) });
-    case "paragraph":
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { nodes: block.children }) });
-    case "list": {
-      const List = block.ordered ? "ol" : "ul";
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        List,
-        {
-          className: `text-ui-fg-subtle txt-small flex flex-col gap-y-1 pl-5 ${block.ordered ? "list-decimal" : "list-disc"}`,
-          children: block.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { nodes: item }) }, i))
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: String(value) });
+};
+var isCheckBoxInput = (element) => element.type === "checkbox";
+var isDateObject = (value) => value instanceof Date;
+var isNullOrUndefined = (value) => value == null;
+const isObjectType = (value) => typeof value === "object";
+var isObject = (value) => !isNullOrUndefined(value) && !Array.isArray(value) && isObjectType(value) && !isDateObject(value);
+var getEventValue = (event) => isObject(event) && event.target ? isCheckBoxInput(event.target) ? event.target.checked : event.target.value : event;
+var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
+var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
+var isPlainObject = (tempObject) => {
+  const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+  return isObject(prototypeCopy) && prototypeCopy.hasOwnProperty("isPrototypeOf");
+};
+var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
+function cloneObject(data) {
+  let copy;
+  const isArray = Array.isArray(data);
+  if (data instanceof Date) {
+    copy = new Date(data);
+  } else if (data instanceof Set) {
+    copy = new Set(data);
+  } else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) && (isArray || isObject(data))) {
+    copy = isArray ? [] : {};
+    if (!isArray && !isPlainObject(data)) {
+      copy = data;
+    } else {
+      for (const key in data) {
+        if (data.hasOwnProperty(key)) {
+          copy[key] = cloneObject(data[key]);
         }
-      );
+      }
     }
-    case "codeBlock":
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle flex flex-col gap-y-2 rounded-md px-3 pb-1 pt-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
-          block.label ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", weight: "plus", className: "text-ui-fg-subtle", children: block.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Copy, { content: block.value })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "txt-compact-small text-ui-fg-subtle overflow-x-auto whitespace-pre pb-2", children: block.value })
-      ] });
-    case "hr":
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-ui-border-base border-t" });
-    case "truncated":
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-muted", children: truncatedLabel });
+  } else {
+    return data;
+  }
+  return copy;
+}
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+var isUndefined = (val) => val === void 0;
+var get = (object, path, defaultValue) => {
+  if (!path || !isObject(object)) {
+    return defaultValue;
   }
+  const result = compact(path.split(/[,[\].]+?/)).reduce((result2, key) => isNullOrUndefined(result2) ? result2 : result2[key], object);
+  return isUndefined(result) || result === object ? isUndefined(object[path]) ? defaultValue : object[path] : result;
 };
-const Markdown = ({
-  source,
-  truncatedLabel
-}) => {
-  const blocks = React.useMemo(() => parseMarkdown(source), [source]);
-  if (!blocks.length) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-4", children: blocks.map((block, i) => /* @__PURE__ */ jsxRuntime.jsx(Block, { block, truncatedLabel }, i)) });
-};
-const PUBLISH_URL = "https://docs.gorgojs.com/medusa-modules/integration";
-const API_URL = "https://gorgojs.com";
-const iconSrc = (icon) => icon.startsWith("data:") ? icon : API_URL + icon;
-const InstallModal = ({
-  item,
-  onOpenChange
-}) => {
-  var _a, _b, _c;
-  const { t, i18n } = reactI18next.useTranslation();
-  const lang = i18n.language.split("-")[0] === "ru" ? "ru" : "en";
-  const source = ((_a = item == null ? void 0 : item.docsSnippet) == null ? void 0 : _a[lang]) || ((_b = item == null ? void 0 : item.docsSnippet) == null ? void 0 : _b.en) || ((_c = item == null ? void 0 : item.docsSnippet) == null ? void 0 : _c.ru) || "";
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer, { open: !!item, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Content, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
-      item && /* @__PURE__ */ jsxRuntime.jsx(IntegrationIcon, { src: iconSrc(item.icon), alt: item.label, size: "small" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: item == null ? void 0 : item.label })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", children: source.trim() ? /* @__PURE__ */ jsxRuntime.jsx(Markdown, { source, truncatedLabel: t("integration.browse.install_truncated") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.browse.install_empty") }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Footer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: t("integration.actions.cancel") }) }),
-      (item == null ? void 0 : item.docsUrl) && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "primary", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: item.docsUrl, target: "_blank", rel: "noopener noreferrer", children: [
-        t("integration.browse.install_docs"),
-        /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpRightOnBox, {})
-      ] }) })
-    ] })
-  ] }) });
-};
-const BrowsePage = () => {
-  const { t } = reactI18next.useTranslation();
-  const navigate = reactRouterDom.useNavigate();
-  const [activeTab, setActiveTab] = React.useState("all");
-  const [search, setSearch] = React.useState("");
-  const [installItem, setInstallItem] = React.useState(null);
-  const { data, isLoading } = reactQuery.useQuery({
-    queryKey: ["integration-catalog"],
-    queryFn: () => sdk.client.fetch("/admin/integrations/catalog")
-  });
-  const items = (data == null ? void 0 : data.integrations) ?? [];
-  const categories = React.useMemo(() => [...new Set(items.map((i) => i.category))], [items]);
-  const q = search.trim().toLowerCase();
-  const filtered = items.filter((i) => {
-    if (activeTab !== "all" && i.category !== activeTab) return false;
-    if (q && ![i.label, i.shortDescription, i.npm].some((s) => s.toLowerCase().includes(q))) return false;
-    return true;
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between px-6 py-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: t("integration.browse.title") }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.browse.subtitle") })
-        ] }),
-        false
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-6 py-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs, { value: activeTab, onValueChange: setActiveTab, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.List, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: "all", children: t("integration.list.tabs.all") }),
-          categories.map((c) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: c, children: t(`integration.categories.${c}`) }, c))
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-64", children: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Input,
-          {
-            placeholder: t("integration.browse.searchPlaceholder"),
-            value: search,
-            onChange: (e) => setSearch(e.target.value)
-          }
-        ) })
-      ] })
-    ] }),
-    isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Spinner, { className: "text-ui-fg-subtle animate-spin" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.list.emptyFiltered") }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", children: filtered.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shadow-borders-base bg-ui-bg-base flex flex-col rounded-lg", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-y-3 p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(IntegrationIcon, { src: iconSrc(item.icon), alt: item.label }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.label }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", leading: "compact", className: "text-ui-fg-subtle", children: t("integration.browse.by", { author: item.authorLocalized }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color: item.installed ? "green" : "grey", children: item.installed ? t("integration.browse.installed") : t("integration.browse.notInstalled") })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle line-clamp-2", children: item.shortDescription })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-t px-4 py-3", children: [
-        item.installed && item.provider_id ? /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            size: "small",
-            variant: "primary",
-            onClick: () => navigate(`/settings/integrations/${item.provider_id}`),
-            children: t("integration.browse.settings")
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { size: "small", variant: "secondary", onClick: () => setInstallItem(item), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
-          t("integration.browse.add")
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: t(`integration.categories.${item.category}`) })
-      ] })
-    ] }, item.integrationId)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: PUBLISH_URL, target: "_blank", rel: "noreferrer", className: "text-ui-fg-base txt-small", children: [
-      t("integration.browse.learnMore"),
-      " →"
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(InstallModal, { item: installItem, onOpenChange: (open) => !open && setInstallItem(null) })
-  ] });
-};
-const BrowseBreadcrumb = () => {
-  const { t } = reactI18next.useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: t("integration.browse.title") });
-};
-const handle$1 = {
-  breadcrumb: () => /* @__PURE__ */ jsxRuntime.jsx(BrowseBreadcrumb, {})
-};
-const Dash = () => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: "-" });
-const IntegrationFieldValue = ({
-  field,
-  value,
-  secretConfigured = false
-}) => {
-  var _a;
-  const { t } = reactI18next.useTranslation();
-  if (field.secret || field.control === "secret") {
-    return secretConfigured ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "••••••••" }) : /* @__PURE__ */ jsxRuntime.jsx(Dash, {});
-  }
-  if (field.control === "switch") {
-    if (value == null) return /* @__PURE__ */ jsxRuntime.jsx(Dash, {});
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", color: value ? "green" : "grey", children: value ? t("integration.status.enabled") : t("integration.status.disabled") });
-  }
-  if (field.control === "json") {
-    if (Array.isArray(value)) {
-      return value.length ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: t("integration.form.items", { count: value.length }) }) : /* @__PURE__ */ jsxRuntime.jsx(Dash, {});
-    }
-    if (value == null) return /* @__PURE__ */ jsxRuntime.jsx(Dash, {});
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: t("integration.status.configured") });
-  }
-  if (value == null || value === "") return /* @__PURE__ */ jsxRuntime.jsx(Dash, {});
-  if (field.control === "select") {
-    const labelKey = (_a = field.optionLabels) == null ? void 0 : _a[String(value)];
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", color: "grey", children: labelKey ? t(labelKey) : String(value) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: String(value) });
-};
-var isCheckBoxInput = (element) => element.type === "checkbox";
-var isDateObject = (value) => value instanceof Date;
-var isNullOrUndefined = (value) => value == null;
-const isObjectType = (value) => typeof value === "object";
-var isObject = (value) => !isNullOrUndefined(value) && !Array.isArray(value) && isObjectType(value) && !isDateObject(value);
-var getEventValue = (event) => isObject(event) && event.target ? isCheckBoxInput(event.target) ? event.target.checked : event.target.value : event;
-var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
-var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
-var isPlainObject = (tempObject) => {
-  const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
-  return isObject(prototypeCopy) && prototypeCopy.hasOwnProperty("isPrototypeOf");
-};
-var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
-function cloneObject(data) {
-  let copy;
-  const isArray = Array.isArray(data);
-  if (data instanceof Date) {
-    copy = new Date(data);
-  } else if (data instanceof Set) {
-    copy = new Set(data);
-  } else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) && (isArray || isObject(data))) {
-    copy = isArray ? [] : {};
-    if (!isArray && !isPlainObject(data)) {
-      copy = data;
-    } else {
-      for (const key in data) {
-        if (data.hasOwnProperty(key)) {
-          copy[key] = cloneObject(data[key]);
-        }
-      }
-    }
-  } else {
-    return data;
-  }
-  return copy;
-}
-var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
-var isUndefined = (val) => val === void 0;
-var get = (object, path, defaultValue) => {
-  if (!path || !isObject(object)) {
-    return defaultValue;
-  }
-  const result = compact(path.split(/[,[\].]+?/)).reduce((result2, key) => isNullOrUndefined(result2) ? result2 : result2[key], object);
-  return isUndefined(result) || result === object ? isUndefined(object[path]) ? defaultValue : object[path] : result;
-};
-var isBoolean = (value) => typeof value === "boolean";
-const EVENTS = {
-  BLUR: "blur",
-  FOCUS_OUT: "focusout",
-  CHANGE: "change"
+var isBoolean = (value) => typeof value === "boolean";
+const EVENTS = {
+  BLUR: "blur",
+  FOCUS_OUT: "focusout",
+  CHANGE: "change"
 };
 const VALIDATION_MODE = {
   onBlur: "onBlur",
@@ -2234,358 +1947,655 @@ const IntegrationField = ({
           ] });
         }
       }
-    ),
-    field.hint && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", className: "text-ui-fg-subtle", children: t(field.hint) })
-  ] });
-};
-function renderControl(field, f, secretConfigured, t) {
-  const placeholder = field.placeholder ? t(field.placeholder) : void 0;
-  const disabled = field.readonly === true;
-  switch (field.control) {
-    case "switch":
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Switch, { checked: !!f.value, onCheckedChange: f.onChange, disabled });
-    case "select":
-      return /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { value: f.value ?? "", onValueChange: f.onChange, disabled, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, { placeholder }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: (field.options ?? []).map((o) => {
-          var _a;
-          const labelKey = (_a = field.optionLabels) == null ? void 0 : _a[o];
-          return /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: o, children: labelKey ? t(labelKey) : o }, o);
-        }) })
-      ] });
-    case "number":
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Input,
-        {
-          type: "number",
-          placeholder,
-          value: f.value ?? "",
-          disabled,
-          onChange: (e) => f.onChange(e.target.value === "" ? null : e.target.valueAsNumber)
-        }
-      );
-    case "url":
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Input,
-        {
-          type: "url",
-          placeholder,
-          value: f.value ?? "",
-          disabled,
-          onChange: f.onChange
-        }
-      );
-    case "secret":
+    ),
+    field.hint && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", className: "text-ui-fg-subtle", children: t(field.hint) })
+  ] });
+};
+function renderControl(field, f, secretConfigured, t) {
+  const placeholder = field.placeholder ? t(field.placeholder) : void 0;
+  const disabled = field.readonly === true;
+  switch (field.control) {
+    case "switch":
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Switch, { checked: !!f.value, onCheckedChange: f.onChange, disabled });
+    case "select": {
+      const declared = field.options ?? [];
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Select,
+        {
+          value: f.value == null ? "" : String(f.value),
+          onValueChange: (next) => f.onChange(declared.find((o) => String(o) === next) ?? next),
+          disabled,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, { placeholder }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: declared.map((o) => {
+              var _a;
+              const labelKey = (_a = field.optionLabels) == null ? void 0 : _a[String(o)];
+              return /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: String(o), children: labelKey ? t(labelKey) : String(o) }, String(o));
+            }) })
+          ]
+        }
+      );
+    }
+    case "number":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Input,
+        {
+          type: "number",
+          placeholder,
+          value: f.value ?? "",
+          disabled,
+          onChange: (e) => f.onChange(e.target.value === "" ? null : e.target.valueAsNumber)
+        }
+      );
+    case "url":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Input,
+        {
+          type: "url",
+          placeholder,
+          value: f.value ?? "",
+          disabled,
+          onChange: f.onChange
+        }
+      );
+    case "secret":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Input,
+        {
+          type: "password",
+          placeholder: secretConfigured ? t("integration.form.keepSecret") : placeholder ?? "",
+          value: f.value ?? "",
+          disabled,
+          onChange: f.onChange,
+          className: !f.value ? "[&~div]:hidden" : void 0
+        }
+      );
+    case "json":
+      return /* @__PURE__ */ jsxRuntime.jsx(JsonField, { field, f });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Input,
+        {
+          placeholder,
+          value: f.value ?? "",
+          disabled,
+          onChange: f.onChange
+        }
+      );
+  }
+}
+function isFieldVisible(field, values) {
+  const rule = field.visibleWhen;
+  if (!rule) return true;
+  return values[rule.field] === rule.equals;
+}
+function sectionDefaults(section, values) {
+  const out = {};
+  for (const f of section.fields) {
+    if (f.secret || f.control === "secret") out[f.name] = "";
+    else if (f.control === "switch") out[f.name] = (values == null ? void 0 : values[f.name]) ?? f.default ?? false;
+    else if (f.control === "json") out[f.name] = (values == null ? void 0 : values[f.name]) ?? f.default;
+    else out[f.name] = (values == null ? void 0 : values[f.name]) ?? f.default ?? "";
+  }
+  return out;
+}
+const EditSectionDrawer = ({
+  open,
+  onOpenChange,
+  providerId,
+  section,
+  values,
+  configuredSecrets = []
+}) => {
+  const { t } = reactI18next.useTranslation();
+  const qc = reactQuery.useQueryClient();
+  const configured = new Set(configuredSecrets);
+  const [defaults] = React.useState(() => sectionDefaults(section, values));
+  const form = useForm({ values: defaults });
+  const current = form.watch();
+  const visibilityValues = { ...values, ...current };
+  const save = reactQuery.useMutation({
+    mutationFn: (sectionValues) => sdk.client.fetch(`/admin/integrations/${providerId}`, {
+      method: "POST",
+      // Only this section's values + its id — the server validates just this section and
+      // merges over the rest of the stored config (keeping blank/untouched secrets).
+      body: { section_id: section.id, values: sectionValues }
+    }),
+    onSuccess: () => {
+      ui.toast.success(t("integration.toast.saved"));
+      qc.invalidateQueries({ queryKey: ["integration", providerId] });
+      qc.invalidateQueries({ queryKey: ["integration-overview"] });
+      onOpenChange(false);
+    },
+    onError: (e) => ui.toast.error((e == null ? void 0 : e.message) ?? t("integration.toast.saveFailed"))
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Title, { children: t(section.title) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", children: section.fields.filter((f) => isFieldVisible(f, visibilityValues)).map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+      IntegrationField,
+      {
+        field: f,
+        control: form.control,
+        secretConfigured: configured.has(f.name)
+      },
+      f.name
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Footer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", disabled: save.isPending, children: t("integration.actions.cancel") }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          size: "small",
+          isLoading: save.isPending,
+          onClick: form.handleSubmit((v) => save.mutate(v)),
+          children: t("integration.actions.save")
+        }
+      )
+    ] })
+  ] }) });
+};
+const Row = ({ label, children }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 px-6 py-4", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: label }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-x-2", children })
+] });
+const EditPage = () => {
+  const { t } = reactI18next.useTranslation();
+  const { provider_id } = reactRouterDom.useParams();
+  const qc = reactQuery.useQueryClient();
+  const navigate = reactRouterDom.useNavigate();
+  const prompt = ui.usePrompt();
+  const [editingSection, setEditingSection] = React.useState(null);
+  const { data, isLoading } = reactQuery.useQuery({
+    queryKey: ["integration", provider_id],
+    queryFn: () => sdk.client.fetch(`/admin/integrations/${provider_id}`)
+  });
+  const descriptor = data == null ? void 0 : data.descriptor;
+  const record = data == null ? void 0 : data.integration;
+  const isConfigured = !!record;
+  const isComplete = (data == null ? void 0 : data.is_complete) ?? false;
+  const invalidate = () => {
+    qc.invalidateQueries({ queryKey: ["integration", provider_id] });
+    qc.invalidateQueries({ queryKey: ["integration-overview"] });
+  };
+  const test = reactQuery.useMutation({
+    mutationFn: () => sdk.client.fetch(
+      `/admin/integrations/${provider_id}/test-connection`,
+      { method: "POST" }
+    ),
+    onSuccess: (r) => {
+      r.status === "passed" ? ui.toast.success(t("integration.toast.connectionOk")) : ui.toast.warning(r.message ?? r.status);
+      invalidate();
+    },
+    onError: (e) => ui.toast.error((e == null ? void 0 : e.message) ?? t("integration.toast.testFailed"))
+  });
+  const toggleEnabled = reactQuery.useMutation({
+    mutationFn: (next) => sdk.client.fetch(`/admin/integrations/${provider_id}/enable`, {
+      method: "POST",
+      body: { is_enabled: next }
+    }),
+    onSuccess: (_d, next) => {
+      ui.toast.success(next ? t("integration.toast.enabled") : t("integration.toast.disabled"));
+      invalidate();
+    },
+    onError: (e) => ui.toast.error((e == null ? void 0 : e.message) ?? t("integration.toast.updateFailed"))
+  });
+  const remove = reactQuery.useMutation({
+    mutationFn: () => sdk.client.fetch(`/admin/integrations/${provider_id}`, { method: "DELETE" }),
+    onSuccess: () => {
+      ui.toast.success(t("integration.toast.deleted"));
+      invalidate();
+      navigate("/settings/integrations");
+    },
+    onError: (e) => ui.toast.error((e == null ? void 0 : e.message) ?? t("integration.toast.deleteFailed"))
+  });
+  const onDelete = async () => {
+    const confirmed = await prompt({
+      title: t("integration.delete.title"),
+      description: t("integration.delete.description", {
+        name: descriptor ? t(descriptor.displayName) : ""
+      }),
+      confirmText: t("integration.actions.delete"),
+      cancelText: t("integration.actions.cancel")
+    });
+    if (confirmed) remove.mutate();
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Spinner, { className: "text-ui-fg-subtle animate-spin" }) });
+  }
+  if (!descriptor) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.unknown", { id: provider_id }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: "/settings/integrations", className: "text-ui-fg-base", children: t("integration.back") })
+    ] });
+  }
+  const version = (data == null ? void 0 : data.version) ?? null;
+  const author = (data == null ? void 0 : data.author) ?? null;
+  const authorUrl = (data == null ? void 0 : data.author_url) ?? null;
+  const lifecycle = !isConfigured ? { color: "grey", label: t("integration.status.notConfigured") } : !isComplete ? { color: "orange", label: t("integration.status.incomplete") } : record.is_enabled ? { color: "green", label: t("integration.status.enabled") } : { color: "grey", label: t("integration.status.disabled") };
+  const connection = descriptor.hasTestConnection ? (record == null ? void 0 : record.last_test_status) === "passed" ? { color: "green", label: t("integration.status.connected") } : (record == null ? void 0 : record.last_test_status) === "failed" ? { color: "red", label: t("integration.status.connectionFailed") } : null : null;
+  const editing = descriptor.sections.find((s) => s.id === editingSection) ?? null;
+  const configuredSecrets = new Set((record == null ? void 0 : record.configured_secrets) ?? []);
+  const sectionData = {
+    providerId: provider_id,
+    identifier: descriptor.identifier,
+    values: (record == null ? void 0 : record.values) ?? {},
+    isComplete
+  };
+  const renderSection = (section) => /* @__PURE__ */ jsxRuntime.jsx(components.LayoutComposer.Entry, { id: section.id, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: t(section.title) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", variant: "transparent", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisHorizontal, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Item, { className: "gap-x-2", onClick: () => setEditingSection(section.id), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, { className: "text-ui-fg-subtle" }),
+          t("integration.actions.edit")
+        ] }) })
+      ] })
+    ] }),
+    section.fields.filter((f) => isFieldVisible(f, (record == null ? void 0 : record.values) ?? {})).map((f) => {
+      var _a;
+      return /* @__PURE__ */ jsxRuntime.jsx(Row, { label: t(f.label), children: /* @__PURE__ */ jsxRuntime.jsx(
+        IntegrationFieldValue,
+        {
+          field: f,
+          value: ((_a = record == null ? void 0 : record.values) == null ? void 0 : _a[f.name]) ?? f.default,
+          secretConfigured: configuredSecrets.has(f.name)
+        }
+      ) }, f.name);
+    })
+  ] }, section.id) });
+  const mainSections = descriptor.sections.filter((s) => s.column !== "side");
+  const sideSections = descriptor.sections.filter((s) => s.column === "side");
+  const main = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components.LayoutComposer.Entry, { id: "main", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-3 px-6 py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IntegrationIcon, { src: descriptor.icon, alt: t(descriptor.displayName) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: t(descriptor.displayName) }),
+                provider_id && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", color: "grey", children: toModuleProviderId(provider_id, descriptor.category) })
+              ] }),
+              version && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", leading: "compact", className: "text-ui-fg-subtle", children: [
+                t("integration.meta.version", { version }),
+                author && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  " • ",
+                  t("integration.meta.authorPrefix"),
+                  " ",
+                  authorUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: authorUrl,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      className: "text-ui-fg-interactive",
+                      children: author
+                    }
+                  ) : author
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color: lifecycle.color, children: lifecycle.label }),
+            connection && /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color: connection.color, children: connection.label }),
+            isConfigured && /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", variant: "transparent", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisHorizontal, {}) }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
+                descriptor.hasTestConnection && record.is_enabled && isComplete && /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Item, { disabled: test.isPending, onClick: () => test.mutate(), children: t("integration.actions.test") }),
+                isConfigured && /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.DropdownMenu.Item,
+                  {
+                    disabled: toggleEnabled.isPending,
+                    onClick: () => toggleEnabled.mutate(!record.is_enabled),
+                    children: record.is_enabled ? t("integration.actions.disable") : t("integration.actions.enable")
+                  }
+                ),
+                isConfigured && /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
+                isConfigured && /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Item, { className: "gap-x-2", onClick: onDelete, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
+                  t("integration.actions.delete")
+                ] })
+              ] })
+            ] })
+          ] })
+        ] }),
+        descriptor.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: t(descriptor.description) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: t("integration.labels.category"), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", color: "grey", children: t(`integration.categories.${descriptor.category}`) }) })
+    ] }) }),
+    mainSections.map(renderSection),
+    editing && /* @__PURE__ */ jsxRuntime.jsx(
+      EditSectionDrawer,
+      {
+        open: true,
+        onOpenChange: (open) => !open && setEditingSection(null),
+        providerId: provider_id,
+        section: editing,
+        values: (record == null ? void 0 : record.values) ?? {},
+        configuredSecrets: (record == null ? void 0 : record.configured_secrets) ?? []
+      },
+      editing.id
+    )
+  ] });
+  const side = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: sideSections.map(renderSection) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.LayoutComposer,
+    {
+      widgetsZonePrefix: `gorgo.integration.${descriptor.identifier}`,
+      preferredLayoutId: descriptor.preferredLayoutId,
+      sections: { main, side },
+      data: sectionData,
+      hasOutlet: false
+    }
+  );
+};
+const IntegrationBreadcrumb = ({ params }) => {
+  const { t } = reactI18next.useTranslation();
+  const providerId = params.provider_id;
+  const { data } = reactQuery.useQuery({
+    queryKey: ["integration", providerId],
+    queryFn: () => sdk.client.fetch(`/admin/integrations/${providerId}`),
+    enabled: !!providerId
+  });
+  const descriptor = data == null ? void 0 : data.descriptor;
+  if (!descriptor) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  const name = t(descriptor.displayName);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    name + " ",
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", color: "grey", children: providerId })
+  ] });
+};
+const handle$1 = {
+  breadcrumb: ({ params }) => /* @__PURE__ */ jsxRuntime.jsx(IntegrationBreadcrumb, { params })
+};
+function isSafeHref(raw) {
+  try {
+    return new URL(raw).protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+const INLINE_RE = /`([^`\n]+)`|\[([^\]\n]*)\]\(([^)\s]+)\)|\*\*([^*\n]+)\*\*|\*([^*\n]+)\*|_([^_\n]+)_/;
+const MAX_DEPTH = 3;
+function parseInline(src, depth = 0) {
+  if (!src) return [];
+  if (depth >= MAX_DEPTH) return [{ type: "text", value: src }];
+  const out = [];
+  const re = new RegExp(INLINE_RE, "g");
+  let last = 0;
+  let m;
+  while ((m = re.exec(src)) !== null) {
+    const [full, code, linkText, linkHref, strong, star, underscore] = m;
+    if (m.index > last) out.push({ type: "text", value: src.slice(last, m.index) });
+    last = m.index + full.length;
+    if (code !== void 0) {
+      out.push({ type: "code", value: code });
+    } else if (linkHref !== void 0) {
+      const isImage = m.index > 0 && src[m.index - 1] === "!";
+      if (!isImage && isSafeHref(linkHref)) {
+        out.push({ type: "link", href: linkHref, children: parseInline(linkText, depth + 1) });
+      } else {
+        out.push({ type: "text", value: full });
+      }
+    } else if (strong !== void 0) {
+      out.push({ type: "strong", children: parseInline(strong, depth + 1) });
+    } else {
+      out.push({ type: "em", children: parseInline(star ?? underscore, depth + 1) });
+    }
+  }
+  if (last < src.length) out.push({ type: "text", value: src.slice(last) });
+  return out;
+}
+const MD_MAX_CHARS = 8e3;
+const MD_MAX_BLOCKS = 200;
+const FENCE_RE = /^```(.*)$/;
+const HEADING_RE = /^(#{1,3})\s+(.*)$/;
+const HR_RE = /^-{3,}\s*$/;
+const UL_RE = /^[-*]\s+(.*)$/;
+const OL_RE = /^\d+\.\s+(.*)$/;
+function fenceLabel(info) {
+  const first = info.trim().split(/\s+/)[0] ?? "";
+  return first.replace(/[^a-zA-Z0-9._/-]/g, "").slice(0, 40) || null;
+}
+function parseMarkdown(src) {
+  if (typeof src !== "string" || !src) return [];
+  if (src.length > MD_MAX_CHARS) return [{ type: "truncated" }];
+  const lines = src.replace(/\r\n?/g, "\n").split("\n");
+  const blocks = [];
+  let para = [];
+  const flushPara = () => {
+    if (!para.length) return;
+    blocks.push({ type: "paragraph", children: parseInline(para.join(" ")) });
+    para = [];
+  };
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const fence = FENCE_RE.exec(line);
+    if (fence) {
+      flushPara();
+      const body = [];
+      i++;
+      while (i < lines.length && !FENCE_RE.test(lines[i])) body.push(lines[i++]);
+      blocks.push({ type: "codeBlock", label: fenceLabel(fence[1]), value: body.join("\n") });
+      continue;
+    }
+    if (!line.trim()) {
+      flushPara();
+      continue;
+    }
+    if (HR_RE.test(line)) {
+      flushPara();
+      blocks.push({ type: "hr" });
+      continue;
+    }
+    const heading = HEADING_RE.exec(line);
+    if (heading) {
+      flushPara();
+      blocks.push({
+        type: "heading",
+        level: heading[1].length + 1,
+        children: parseInline(heading[2])
+      });
+      continue;
+    }
+    const ul = UL_RE.exec(line);
+    const ol = ul ? null : OL_RE.exec(line);
+    if (ul || ol) {
+      flushPara();
+      const ordered = !!ol;
+      const itemRe = ordered ? OL_RE : UL_RE;
+      const items = [];
+      while (i < lines.length) {
+        const item = itemRe.exec(lines[i]);
+        if (!item) break;
+        items.push(parseInline(item[1]));
+        i++;
+      }
+      i--;
+      blocks.push({ type: "list", ordered, items });
+      continue;
+    }
+    para.push(line);
+  }
+  flushPara();
+  const weight = blocks.reduce((n, b) => n + (b.type === "list" ? b.items.length : 1), 0);
+  return weight > MD_MAX_BLOCKS ? [{ type: "truncated" }] : blocks;
+}
+const Inline = ({ nodes }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: nodes.map((node, i) => {
+  switch (node.type) {
+    case "text":
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { children: node.value }, i);
+    case "code":
+      return /* @__PURE__ */ jsxRuntime.jsx("code", { className: "txt-compact-small bg-ui-bg-component rounded px-1 py-0.5", children: node.value }, i);
+    case "strong":
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "txt-compact-small-plus", children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { nodes: node.children }) }, i);
+    case "em":
+      return /* @__PURE__ */ jsxRuntime.jsx("em", { children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { nodes: node.children }) }, i);
+    case "link":
       return /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Input,
+        "a",
         {
-          type: "password",
-          placeholder: secretConfigured ? t("integration.form.keepSecret") : placeholder ?? "",
-          value: f.value ?? "",
-          disabled,
-          onChange: f.onChange,
-          className: !f.value ? "[&~div]:hidden" : void 0
-        }
+          href: node.href,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-ui-fg-interactive hover:underline",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { nodes: node.children })
+        },
+        i
       );
-    case "json":
-      return /* @__PURE__ */ jsxRuntime.jsx(JsonField, { field, f });
-    default:
+  }
+}) });
+const Block = ({ block, truncatedLabel }) => {
+  switch (block.type) {
+    case "heading":
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: block.level === 2 ? "h2" : "h3", children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { nodes: block.children }) });
+    case "paragraph":
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { nodes: block.children }) });
+    case "list": {
+      const List = block.ordered ? "ol" : "ul";
       return /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Input,
+        List,
         {
-          placeholder,
-          value: f.value ?? "",
-          disabled,
-          onChange: f.onChange
+          className: `text-ui-fg-subtle txt-small flex flex-col gap-y-1 pl-5 ${block.ordered ? "list-decimal" : "list-disc"}`,
+          children: block.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { nodes: item }) }, i))
         }
       );
+    }
+    case "codeBlock":
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle flex flex-col gap-y-2 rounded-md px-3 pb-1 pt-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
+          block.label ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", weight: "plus", className: "text-ui-fg-subtle", children: block.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Copy, { content: block.value })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "txt-compact-small text-ui-fg-subtle overflow-x-auto whitespace-pre pb-2", children: block.value })
+      ] });
+    case "hr":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-ui-border-base border-t" });
+    case "truncated":
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-muted", children: truncatedLabel });
   }
-}
-function isFieldVisible(field, values) {
-  const rule = field.visibleWhen;
-  if (!rule) return true;
-  return values[rule.field] === rule.equals;
-}
-function sectionDefaults(section, values) {
-  const out = {};
-  for (const f of section.fields) {
-    if (f.secret || f.control === "secret") out[f.name] = "";
-    else if (f.control === "switch") out[f.name] = (values == null ? void 0 : values[f.name]) ?? f.default ?? false;
-    else if (f.control === "json") out[f.name] = (values == null ? void 0 : values[f.name]) ?? f.default;
-    else out[f.name] = (values == null ? void 0 : values[f.name]) ?? f.default ?? "";
-  }
-  return out;
-}
-const EditSectionDrawer = ({
-  open,
-  onOpenChange,
-  providerId,
-  section,
-  values,
-  configuredSecrets = []
+};
+const Markdown = ({
+  source,
+  truncatedLabel
 }) => {
-  const { t } = reactI18next.useTranslation();
-  const qc = reactQuery.useQueryClient();
-  const configured = new Set(configuredSecrets);
-  const [defaults] = React.useState(() => sectionDefaults(section, values));
-  const form = useForm({ values: defaults });
-  const current = form.watch();
-  const visibilityValues = { ...values, ...current };
-  const save = reactQuery.useMutation({
-    mutationFn: (sectionValues) => sdk.client.fetch(`/admin/integrations/${providerId}`, {
-      method: "POST",
-      // Only this section's values + its id — the server validates just this section and
-      // merges over the rest of the stored config (keeping blank/untouched secrets).
-      body: { section_id: section.id, values: sectionValues }
-    }),
-    onSuccess: () => {
-      ui.toast.success(t("integration.toast.saved"));
-      qc.invalidateQueries({ queryKey: ["integration", providerId] });
-      qc.invalidateQueries({ queryKey: ["integration-overview"] });
-      onOpenChange(false);
-    },
-    onError: (e) => ui.toast.error((e == null ? void 0 : e.message) ?? t("integration.toast.saveFailed"))
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Content, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Title, { children: t(section.title) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", children: section.fields.filter((f) => isFieldVisible(f, visibilityValues)).map((f) => /* @__PURE__ */ jsxRuntime.jsx(
-      IntegrationField,
-      {
-        field: f,
-        control: form.control,
-        secretConfigured: configured.has(f.name)
-      },
-      f.name
-    )) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Footer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", disabled: save.isPending, children: t("integration.actions.cancel") }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
-        {
-          size: "small",
-          isLoading: save.isPending,
-          onClick: form.handleSubmit((v) => save.mutate(v)),
-          children: t("integration.actions.save")
-        }
-      )
-    ] })
-  ] }) });
+  const blocks = React.useMemo(() => parseMarkdown(source), [source]);
+  if (!blocks.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-4", children: blocks.map((block, i) => /* @__PURE__ */ jsxRuntime.jsx(Block, { block, truncatedLabel }, i)) });
 };
-const Row = ({ label, children }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 px-6 py-4", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: label }),
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-x-2", children })
-] });
-const EditPage = () => {
-  const { t } = reactI18next.useTranslation();
-  const { provider_id } = reactRouterDom.useParams();
-  const qc = reactQuery.useQueryClient();
-  const navigate = reactRouterDom.useNavigate();
-  const prompt = ui.usePrompt();
-  const [editingSection, setEditingSection] = React.useState(null);
-  const { data, isLoading } = reactQuery.useQuery({
-    queryKey: ["integration", provider_id],
-    queryFn: () => sdk.client.fetch(`/admin/integrations/${provider_id}`)
-  });
-  const descriptor = data == null ? void 0 : data.descriptor;
-  const record = data == null ? void 0 : data.integration;
-  const isConfigured = !!record;
-  const isComplete = (data == null ? void 0 : data.is_complete) ?? false;
-  const invalidate = () => {
-    qc.invalidateQueries({ queryKey: ["integration", provider_id] });
-    qc.invalidateQueries({ queryKey: ["integration-overview"] });
-  };
-  const test = reactQuery.useMutation({
-    mutationFn: () => sdk.client.fetch(
-      `/admin/integrations/${provider_id}/test-connection`,
-      { method: "POST" }
-    ),
-    onSuccess: (r) => {
-      r.status === "passed" ? ui.toast.success(t("integration.toast.connectionOk")) : ui.toast.warning(r.message ?? r.status);
-      invalidate();
-    },
-    onError: (e) => ui.toast.error((e == null ? void 0 : e.message) ?? t("integration.toast.testFailed"))
-  });
-  const toggleEnabled = reactQuery.useMutation({
-    mutationFn: (next) => sdk.client.fetch(`/admin/integrations/${provider_id}/enable`, {
-      method: "POST",
-      body: { is_enabled: next }
-    }),
-    onSuccess: (_d, next) => {
-      ui.toast.success(next ? t("integration.toast.enabled") : t("integration.toast.disabled"));
-      invalidate();
-    },
-    onError: (e) => ui.toast.error((e == null ? void 0 : e.message) ?? t("integration.toast.updateFailed"))
+const PUBLISH_URL = "https://docs.gorgojs.com/medusa-modules/integration";
+const API_URL = "https://gorgojs.com";
+const iconSrc = (icon) => icon.startsWith("data:") ? icon : API_URL + icon;
+const InstallModal = ({
+  item,
+  onOpenChange
+}) => {
+  var _a, _b, _c;
+  const { t, i18n } = reactI18next.useTranslation();
+  const lang = i18n.language.split("-")[0] === "ru" ? "ru" : "en";
+  const source = ((_a = item == null ? void 0 : item.docsSnippet) == null ? void 0 : _a[lang]) || ((_b = item == null ? void 0 : item.docsSnippet) == null ? void 0 : _b.en) || ((_c = item == null ? void 0 : item.docsSnippet) == null ? void 0 : _c.ru) || "";
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer, { open: !!item, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+      item && /* @__PURE__ */ jsxRuntime.jsx(IntegrationIcon, { src: iconSrc(item.icon), alt: item.label, size: "small" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: item == null ? void 0 : item.label })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", children: source.trim() ? /* @__PURE__ */ jsxRuntime.jsx(Markdown, { source, truncatedLabel: t("integration.browse.install_truncated") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.browse.install_empty") }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Footer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: t("integration.actions.cancel") }) }),
+      (item == null ? void 0 : item.docsUrl) && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "primary", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: item.docsUrl, target: "_blank", rel: "noopener noreferrer", children: [
+        t("integration.browse.install_docs"),
+        /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpRightOnBox, {})
+      ] }) })
+    ] })
+  ] }) });
+};
+const BrowsePage = () => {
+  const { t } = reactI18next.useTranslation();
+  const navigate = reactRouterDom.useNavigate();
+  const [activeTab, setActiveTab] = React.useState("all");
+  const [search, setSearch] = React.useState("");
+  const [installItem, setInstallItem] = React.useState(null);
+  const { data, isLoading } = reactQuery.useQuery({
+    queryKey: ["integration-catalog"],
+    queryFn: () => sdk.client.fetch("/admin/integrations/catalog")
   });
-  const remove = reactQuery.useMutation({
-    mutationFn: () => sdk.client.fetch(`/admin/integrations/${provider_id}`, { method: "DELETE" }),
-    onSuccess: () => {
-      ui.toast.success(t("integration.toast.deleted"));
-      invalidate();
-      navigate("/settings/integrations");
-    },
-    onError: (e) => ui.toast.error((e == null ? void 0 : e.message) ?? t("integration.toast.deleteFailed"))
+  const items = (data == null ? void 0 : data.integrations) ?? [];
+  const categories = React.useMemo(() => [...new Set(items.map((i) => i.category))], [items]);
+  const q = search.trim().toLowerCase();
+  const filtered = items.filter((i) => {
+    if (activeTab !== "all" && i.category !== activeTab) return false;
+    if (q && ![i.label, i.shortDescription, i.npm].some((s) => s.toLowerCase().includes(q))) return false;
+    return true;
   });
-  const onDelete = async () => {
-    const confirmed = await prompt({
-      title: t("integration.delete.title"),
-      description: t("integration.delete.description", {
-        name: descriptor ? t(descriptor.displayName) : ""
-      }),
-      confirmText: t("integration.actions.delete"),
-      cancelText: t("integration.actions.cancel")
-    });
-    if (confirmed) remove.mutate();
-  };
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Spinner, { className: "text-ui-fg-subtle animate-spin" }) });
-  }
-  if (!descriptor) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.unknown", { id: provider_id }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: "/settings/integrations", className: "text-ui-fg-base", children: t("integration.back") })
-    ] });
-  }
-  const version = (data == null ? void 0 : data.version) ?? null;
-  const author = (data == null ? void 0 : data.author) ?? null;
-  const authorUrl = (data == null ? void 0 : data.author_url) ?? null;
-  const lifecycle = !isConfigured ? { color: "grey", label: t("integration.status.notConfigured") } : !isComplete ? { color: "orange", label: t("integration.status.incomplete") } : record.is_enabled ? { color: "green", label: t("integration.status.enabled") } : { color: "grey", label: t("integration.status.disabled") };
-  const connection = descriptor.hasTestConnection ? (record == null ? void 0 : record.last_test_status) === "passed" ? { color: "green", label: t("integration.status.connected") } : (record == null ? void 0 : record.last_test_status) === "failed" ? { color: "red", label: t("integration.status.connectionFailed") } : null : null;
-  const editing = descriptor.sections.find((s) => s.id === editingSection) ?? null;
-  const configuredSecrets = new Set((record == null ? void 0 : record.configured_secrets) ?? []);
-  const sectionData = {
-    providerId: provider_id,
-    identifier: descriptor.identifier,
-    values: (record == null ? void 0 : record.values) ?? {},
-    isComplete
-  };
-  const renderSection = (section) => /* @__PURE__ */ jsxRuntime.jsx(components.LayoutComposer.Entry, { id: section.id, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: t(section.title) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", variant: "transparent", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisHorizontal, {}) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Item, { className: "gap-x-2", onClick: () => setEditingSection(section.id), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, { className: "text-ui-fg-subtle" }),
-          t("integration.actions.edit")
-        ] }) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between px-6 py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: t("integration.browse.title") }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.browse.subtitle") })
+        ] }),
+        false
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-6 py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs, { value: activeTab, onValueChange: setActiveTab, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.List, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: "all", children: t("integration.list.tabs.all") }),
+          categories.map((c) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tabs.Trigger, { value: c, children: t(`integration.categories.${c}`) }, c))
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-64", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            placeholder: t("integration.browse.searchPlaceholder"),
+            value: search,
+            onChange: (e) => setSearch(e.target.value)
+          }
+        ) })
       ] })
     ] }),
-    section.fields.filter((f) => isFieldVisible(f, (record == null ? void 0 : record.values) ?? {})).map((f) => {
-      var _a;
-      return /* @__PURE__ */ jsxRuntime.jsx(Row, { label: t(f.label), children: /* @__PURE__ */ jsxRuntime.jsx(
-        IntegrationFieldValue,
-        {
-          field: f,
-          value: ((_a = record == null ? void 0 : record.values) == null ? void 0 : _a[f.name]) ?? f.default,
-          secretConfigured: configuredSecrets.has(f.name)
-        }
-      ) }, f.name);
-    })
-  ] }, section.id) });
-  const mainSections = descriptor.sections.filter((s) => s.column !== "side");
-  const sideSections = descriptor.sections.filter((s) => s.column === "side");
-  const main = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(components.LayoutComposer.Entry, { id: "main", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-3 px-6 py-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Spinner, { className: "text-ui-fg-subtle animate-spin" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.list.emptyFiltered") }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", children: filtered.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shadow-borders-base bg-ui-bg-base flex flex-col rounded-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-y-3 p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(IntegrationIcon, { src: descriptor.icon, alt: t(descriptor.displayName) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: t(descriptor.displayName) }),
-                provider_id && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", color: "grey", children: toModuleProviderId(provider_id, descriptor.category) })
-              ] }),
-              version && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", leading: "compact", className: "text-ui-fg-subtle", children: [
-                t("integration.meta.version", { version }),
-                author && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  " • ",
-                  t("integration.meta.authorPrefix"),
-                  " ",
-                  authorUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "a",
-                    {
-                      href: authorUrl,
-                      target: "_blank",
-                      rel: "noreferrer",
-                      className: "text-ui-fg-interactive",
-                      children: author
-                    }
-                  ) : author
-                ] })
-              ] })
+            /* @__PURE__ */ jsxRuntime.jsx(IntegrationIcon, { src: iconSrc(item.icon), alt: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", leading: "compact", className: "text-ui-fg-subtle", children: t("integration.browse.by", { author: item.authorLocalized }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color: lifecycle.color, children: lifecycle.label }),
-            connection && /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color: connection.color, children: connection.label }),
-            isConfigured && /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", variant: "transparent", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisHorizontal, {}) }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
-                descriptor.hasTestConnection && record.is_enabled && isComplete && /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Item, { disabled: test.isPending, onClick: () => test.mutate(), children: t("integration.actions.test") }),
-                isConfigured && /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.DropdownMenu.Item,
-                  {
-                    disabled: toggleEnabled.isPending,
-                    onClick: () => toggleEnabled.mutate(!record.is_enabled),
-                    children: record.is_enabled ? t("integration.actions.disable") : t("integration.actions.enable")
-                  }
-                ),
-                isConfigured && /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
-                isConfigured && /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Item, { className: "gap-x-2", onClick: onDelete, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
-                  t("integration.actions.delete")
-                ] })
-              ] })
-            ] })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color: item.installed ? "green" : "grey", children: item.installed ? t("integration.browse.installed") : t("integration.browse.notInstalled") })
         ] }),
-        descriptor.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: t(descriptor.description) })
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle line-clamp-2", children: item.shortDescription })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: t("integration.labels.category"), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", color: "grey", children: t(`integration.categories.${descriptor.category}`) }) })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-t px-4 py-3", children: [
+        item.installed && item.provider_id ? /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            size: "small",
+            variant: "primary",
+            onClick: () => navigate(`/settings/integrations/${item.provider_id}`),
+            children: t("integration.browse.settings")
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { size: "small", variant: "secondary", onClick: () => setInstallItem(item), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
+          t("integration.browse.add")
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: t(`integration.categories.${item.category}`) })
+      ] })
+    ] }, item.integrationId)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: PUBLISH_URL, target: "_blank", rel: "noreferrer", className: "text-ui-fg-base txt-small", children: [
+      t("integration.browse.learnMore"),
+      " →"
     ] }) }),
-    mainSections.map(renderSection),
-    editing && /* @__PURE__ */ jsxRuntime.jsx(
-      EditSectionDrawer,
-      {
-        open: true,
-        onOpenChange: (open) => !open && setEditingSection(null),
-        providerId: provider_id,
-        section: editing,
-        values: (record == null ? void 0 : record.values) ?? {},
-        configuredSecrets: (record == null ? void 0 : record.configured_secrets) ?? []
-      },
-      editing.id
-    )
+    /* @__PURE__ */ jsxRuntime.jsx(InstallModal, { item: installItem, onOpenChange: (open) => !open && setInstallItem(null) })
   ] });
-  const side = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: sideSections.map(renderSection) });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    components.LayoutComposer,
-    {
-      widgetsZonePrefix: `gorgo.integration.${descriptor.identifier}`,
-      preferredLayoutId: descriptor.preferredLayoutId,
-      sections: { main, side },
-      data: sectionData,
-      hasOutlet: false
-    }
-  );
 };
-const IntegrationBreadcrumb = ({ params }) => {
+const BrowseBreadcrumb = () => {
   const { t } = reactI18next.useTranslation();
-  const providerId = params.provider_id;
-  const { data } = reactQuery.useQuery({
-    queryKey: ["integration", providerId],
-    queryFn: () => sdk.client.fetch(`/admin/integrations/${providerId}`),
-    enabled: !!providerId
-  });
-  const descriptor = data == null ? void 0 : data.descriptor;
-  if (!descriptor) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  const name = t(descriptor.displayName);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    name + " ",
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", color: "grey", children: providerId })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: t("integration.browse.title") });
 };
 const handle = {
-  breadcrumb: ({ params }) => /* @__PURE__ */ jsxRuntime.jsx(IntegrationBreadcrumb, { params })
+  breadcrumb: () => /* @__PURE__ */ jsxRuntime.jsx(BrowseBreadcrumb, {})
 };
 const integration$1 = {
   list: {
@@ -2808,13 +2818,13 @@ const routeModule = {
       handle: { label: config.label, translationNs: config.translationNs, ...handle$2 }
     },
     {
-      Component: BrowsePage,
-      path: "/settings/integrations/browse",
+      Component: EditPage,
+      path: "/settings/integrations/:provider_id",
       handle: handle$1
     },
     {
-      Component: EditPage,
-      path: "/settings/integrations/:provider_id",
+      Component: BrowsePage,
+      path: "/settings/integrations/browse",
       handle
     }
   ]