@gorgo/medusa-integration 0.2.1 → 0.3.0-beta.2

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

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { defineRouteConfig } from "@medusajs/admin-sdk";
-import { PuzzleSolid, CogSixTooth, Trash, Spinner, EllipsisHorizontal, PencilSquare, Plus, ArrowUpRightOnBox } from "@medusajs/icons";
-import { clx, createDataTableColumnHelper, usePrompt, toast, Text, Badge, useDataTable, Container, Heading, Button, DataTable, Tabs, StatusBadge, Label, Input, Select, Switch, Textarea, Drawer, DropdownMenu, IconButton, Copy } from "@medusajs/ui";
+import { PuzzleSolid, CogSixTooth, Trash, Spinner, Plus, ArrowUpRightOnBox, EllipsisHorizontal, PencilSquare } from "@medusajs/icons";
+import { clx, createDataTableColumnHelper, usePrompt, toast, Text, Badge, useDataTable, Container, Heading, Button, DataTable, Tabs, StatusBadge, Copy, Input, Drawer, Label, Select, Switch, Textarea, DropdownMenu, IconButton } from "@medusajs/ui";
 import { useQueryClient, useQuery, keepPreviousData, useMutation } from "@tanstack/react-query";
 import React, { useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -287,113 +287,399 @@ const IntegrationsBreadcrumb = () => {
 const handle$2 = {
   breadcrumb: () => /* @__PURE__ */ jsx(IntegrationsBreadcrumb, {})
 };
-const Dash = () => /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: "-" });
-const IntegrationFieldValue = ({
-  field,
-  value,
-  secretConfigured = false
-}) => {
-  const { t } = useTranslation();
-  if (field.secret || field.control === "secret") {
-    return secretConfigured ? /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "••••••••" }) : /* @__PURE__ */ jsx(Dash, {});
-  }
-  if (field.control === "switch") {
-    if (value == null) return /* @__PURE__ */ jsx(Dash, {});
-    return /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: value ? "green" : "grey", children: value ? t("integration.status.enabled") : t("integration.status.disabled") });
+function isSafeHref(raw) {
+  try {
+    return new URL(raw).protocol === "https:";
+  } catch {
+    return false;
   }
-  if (field.control === "json") {
-    if (Array.isArray(value)) {
-      return value.length ? /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: t("integration.form.items", { count: value.length }) }) : /* @__PURE__ */ 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 (value == null) return /* @__PURE__ */ jsx(Dash, {});
-    return /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: t("integration.status.configured") });
-  }
-  if (value == null || value === "") return /* @__PURE__ */ jsx(Dash, {});
-  if (field.control === "select") {
-    const labelKey = field.optionLabels?.[String(value)];
-    return /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: labelKey ? t(labelKey) : String(value) });
-  }
-  return /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: String(value) });
-};
-var isCheckBoxInput = (element) => element.type === "checkbox";
-var isFileInput = (element) => element.type === "file";
-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 : isFileInput(event.target) ? event.target.files : event.target.value : event;
-var isNameInFieldArray = (names, name) => name.split(".").some((part, index, arr) => !isNaN(Number(part)) && names.has(arr.slice(0, index).join(".")));
-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) {
-  if (data instanceof Date) {
-    return new Date(data);
-  }
-  const isFileListInstance = typeof FileList !== "undefined" && data instanceof FileList;
-  if (isWeb && (data instanceof Blob || isFileListInstance)) {
-    return data;
-  }
-  const isArray = Array.isArray(data);
-  if (!isArray && !(isObject(data) && isPlainObject(data))) {
-    return data;
   }
-  const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
-  for (const key in data) {
-    if (Object.prototype.hasOwnProperty.call(data, key)) {
-      copy[key] = cloneObject(data[key]);
+  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);
   }
-  return copy;
+  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 EVENTS = {
-  BLUR: "blur",
-  FOCUS_OUT: "focusout",
-  CHANGE: "change",
-  SUBMIT: "submit",
-  TRIGGER: "trigger",
-  VALID: "valid"
-};
-const VALIDATION_MODE = {
-  onBlur: "onBlur",
-  onChange: "onChange",
-  onSubmit: "onSubmit",
-  onTouched: "onTouched",
-  all: "all"
-};
-const INPUT_VALIDATION_RULES = {
-  max: "max",
-  min: "min",
-  maxLength: "maxLength",
-  minLength: "minLength",
-  pattern: "pattern",
-  required: "required",
-  validate: "validate"
-};
-const ROOT_ERROR_TYPE = "root";
-const PROTOTYPE_KEYWORDS = ["__proto__", "constructor", "prototype"];
-const IS_KEY_RE = /^\w*$/;
-var isKey = (value) => IS_KEY_RE.test(value);
-var isUndefined = (val) => val === void 0;
-const FIELD_PATH_RE = /[.[\]'"]/;
-var stringToPath = (input) => input.split(FIELD_PATH_RE).filter(Boolean);
-var get = (object, path, defaultValue) => {
-  if (!path || !isObject(object)) {
-    return defaultValue;
+const Inline = ({ nodes }) => /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node, i) => {
+  switch (node.type) {
+    case "text":
+      return /* @__PURE__ */ jsx("span", { children: node.value }, i);
+    case "code":
+      return /* @__PURE__ */ jsx("code", { className: "txt-compact-small bg-ui-bg-component rounded px-1 py-0.5", children: node.value }, i);
+    case "strong":
+      return /* @__PURE__ */ jsx("span", { className: "txt-compact-small-plus", children: /* @__PURE__ */ jsx(Inline, { nodes: node.children }) }, i);
+    case "em":
+      return /* @__PURE__ */ jsx("em", { children: /* @__PURE__ */ jsx(Inline, { nodes: node.children }) }, i);
+    case "link":
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: node.href,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-ui-fg-interactive hover:underline",
+          children: /* @__PURE__ */ jsx(Inline, { nodes: node.children })
+        },
+        i
+      );
   }
-  const paths = isKey(path) ? [path] : stringToPath(path);
-  if (paths.some((key) => PROTOTYPE_KEYWORDS.includes(key))) {
-    return defaultValue;
+}) });
+const Block = ({ block, truncatedLabel }) => {
+  switch (block.type) {
+    case "heading":
+      return /* @__PURE__ */ jsx(Heading, { level: block.level === 2 ? "h2" : "h3", children: /* @__PURE__ */ jsx(Inline, { nodes: block.children }) });
+    case "paragraph":
+      return /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: /* @__PURE__ */ jsx(Inline, { nodes: block.children }) });
+    case "list": {
+      const List = block.ordered ? "ol" : "ul";
+      return /* @__PURE__ */ 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__ */ jsx("li", { children: /* @__PURE__ */ jsx(Inline, { nodes: item }) }, i))
+        }
+      );
+    }
+    case "codeBlock":
+      return /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle flex flex-col gap-y-2 rounded-md px-3 pb-1 pt-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
+          block.label ? /* @__PURE__ */ jsx(Text, { size: "xsmall", weight: "plus", className: "text-ui-fg-subtle", children: block.label }) : /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx(Copy, { content: block.value })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "txt-compact-small text-ui-fg-subtle overflow-x-auto whitespace-pre pb-2", children: block.value })
+      ] });
+    case "hr":
+      return /* @__PURE__ */ jsx("div", { className: "border-ui-border-base border-t" });
+    case "truncated":
+      return /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: truncatedLabel });
   }
-  const result = paths.reduce((result2, key) => {
-    return isNullOrUndefined(result2) ? void 0 : result2[key];
-  }, object);
-  return isUndefined(result) || result === object ? isUndefined(object[path]) ? defaultValue : object[path] : result;
 };
-var isBoolean = (value) => typeof value === "boolean";
-var isFunction = (value) => typeof value === "function";
+const Markdown = ({
+  source,
+  truncatedLabel
+}) => {
+  const blocks = useMemo(() => parseMarkdown(source), [source]);
+  if (!blocks.length) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-4", children: blocks.map((block, i) => /* @__PURE__ */ 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
+}) => {
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language.split("-")[0] === "ru" ? "ru" : "en";
+  const source = item?.docsSnippet?.[lang] || item?.docsSnippet?.en || item?.docsSnippet?.ru || "";
+  return /* @__PURE__ */ jsx(Drawer, { open: !!item, onOpenChange, children: /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+    /* @__PURE__ */ jsx(Drawer.Header, { children: /* @__PURE__ */ jsx(Drawer.Title, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      item && /* @__PURE__ */ jsx(IntegrationIcon, { src: iconSrc(item.icon), alt: item.label, size: "small" }),
+      /* @__PURE__ */ jsx("span", { children: item?.label })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Drawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", children: source.trim() ? /* @__PURE__ */ jsx(Markdown, { source, truncatedLabel: t("integration.browse.install_truncated") }) : /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.browse.install_empty") }) }),
+    /* @__PURE__ */ jsxs(Drawer.Footer, { children: [
+      /* @__PURE__ */ jsx(Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: t("integration.actions.cancel") }) }),
+      item?.docsUrl && /* @__PURE__ */ jsx(Button, { size: "small", variant: "primary", asChild: true, children: /* @__PURE__ */ jsxs("a", { href: item.docsUrl, target: "_blank", rel: "noopener noreferrer", children: [
+        t("integration.browse.install_docs"),
+        /* @__PURE__ */ jsx(ArrowUpRightOnBox, {})
+      ] }) })
+    ] })
+  ] }) });
+};
+const BrowsePage = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState("all");
+  const [search, setSearch] = useState("");
+  const [installItem, setInstallItem] = useState(null);
+  const { data, isLoading } = useQuery({
+    queryKey: ["integration-catalog"],
+    queryFn: () => sdk.client.fetch("/admin/integrations/catalog")
+  });
+  const items = data?.integrations ?? [];
+  const categories = 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__ */ jsxs("div", { className: "flex flex-col gap-y-3", children: [
+    /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between px-6 py-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("integration.browse.title") }),
+          /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.browse.subtitle") })
+        ] }),
+        false
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-6 py-4", children: [
+        /* @__PURE__ */ jsx(Tabs, { value: activeTab, onValueChange: setActiveTab, children: /* @__PURE__ */ jsxs(Tabs.List, { children: [
+          /* @__PURE__ */ jsx(Tabs.Trigger, { value: "all", children: t("integration.list.tabs.all") }),
+          categories.map((c) => /* @__PURE__ */ jsx(Tabs.Trigger, { value: c, children: t(`integration.categories.${c}`) }, c))
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "w-64", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: t("integration.browse.searchPlaceholder"),
+            value: search,
+            onChange: (e) => setSearch(e.target.value)
+          }
+        ) })
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, { className: "text-ui-fg-subtle animate-spin" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.list.emptyFiltered") }) }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", children: filtered.map((item) => /* @__PURE__ */ jsxs("div", { className: "shadow-borders-base bg-ui-bg-base flex flex-col rounded-lg", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-y-3 p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+            /* @__PURE__ */ jsx(IntegrationIcon, { src: iconSrc(item.icon), alt: item.label }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.label }),
+              /* @__PURE__ */ jsx(Text, { size: "xsmall", leading: "compact", className: "text-ui-fg-subtle", children: t("integration.browse.by", { author: item.authorLocalized }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(StatusBadge, { color: item.installed ? "green" : "grey", children: item.installed ? t("integration.browse.installed") : t("integration.browse.notInstalled") })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle line-clamp-2", children: item.shortDescription })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t px-4 py-3", children: [
+        item.installed && item.provider_id ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "primary",
+            onClick: () => navigate(`/settings/integrations/${item.provider_id}`),
+            children: t("integration.browse.settings")
+          }
+        ) : /* @__PURE__ */ jsxs(Button, { size: "small", variant: "secondary", onClick: () => setInstallItem(item), children: [
+          /* @__PURE__ */ jsx(Plus, {}),
+          t("integration.browse.add")
+        ] }),
+        /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t(`integration.categories.${item.category}`) })
+      ] })
+    ] }, item.integrationId)) }),
+    /* @__PURE__ */ jsx(Container, { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs("a", { href: PUBLISH_URL, target: "_blank", rel: "noreferrer", className: "text-ui-fg-base txt-small", children: [
+      t("integration.browse.learnMore"),
+      " →"
+    ] }) }),
+    /* @__PURE__ */ jsx(InstallModal, { item: installItem, onOpenChange: (open) => !open && setInstallItem(null) })
+  ] });
+};
+const BrowseBreadcrumb = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(Fragment, { children: t("integration.browse.title") });
+};
+const handle$1 = {
+  breadcrumb: () => /* @__PURE__ */ jsx(BrowseBreadcrumb, {})
+};
+const Dash = () => /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: "-" });
+const IntegrationFieldValue = ({
+  field,
+  value,
+  secretConfigured = false
+}) => {
+  const { t } = useTranslation();
+  if (field.secret || field.control === "secret") {
+    return secretConfigured ? /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "••••••••" }) : /* @__PURE__ */ jsx(Dash, {});
+  }
+  if (field.control === "switch") {
+    if (value == null) return /* @__PURE__ */ jsx(Dash, {});
+    return /* @__PURE__ */ jsx(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__ */ jsx(Text, { size: "small", leading: "compact", children: t("integration.form.items", { count: value.length }) }) : /* @__PURE__ */ jsx(Dash, {});
+    }
+    if (value == null) return /* @__PURE__ */ jsx(Dash, {});
+    return /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: t("integration.status.configured") });
+  }
+  if (value == null || value === "") return /* @__PURE__ */ jsx(Dash, {});
+  if (field.control === "select") {
+    const labelKey = field.optionLabels?.[String(value)];
+    return /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: labelKey ? t(labelKey) : String(value) });
+  }
+  return /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: String(value) });
+};
+var isCheckBoxInput = (element) => element.type === "checkbox";
+var isFileInput = (element) => element.type === "file";
+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 : isFileInput(event.target) ? event.target.files : event.target.value : event;
+var isNameInFieldArray = (names, name) => name.split(".").some((part, index, arr) => !isNaN(Number(part)) && names.has(arr.slice(0, index).join(".")));
+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) {
+  if (data instanceof Date) {
+    return new Date(data);
+  }
+  const isFileListInstance = typeof FileList !== "undefined" && data instanceof FileList;
+  if (isWeb && (data instanceof Blob || isFileListInstance)) {
+    return data;
+  }
+  const isArray = Array.isArray(data);
+  if (!isArray && !(isObject(data) && isPlainObject(data))) {
+    return data;
+  }
+  const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
+  for (const key in data) {
+    if (Object.prototype.hasOwnProperty.call(data, key)) {
+      copy[key] = cloneObject(data[key]);
+    }
+  }
+  return copy;
+}
+const EVENTS = {
+  BLUR: "blur",
+  FOCUS_OUT: "focusout",
+  CHANGE: "change",
+  SUBMIT: "submit",
+  TRIGGER: "trigger",
+  VALID: "valid"
+};
+const VALIDATION_MODE = {
+  onBlur: "onBlur",
+  onChange: "onChange",
+  onSubmit: "onSubmit",
+  onTouched: "onTouched",
+  all: "all"
+};
+const INPUT_VALIDATION_RULES = {
+  max: "max",
+  min: "min",
+  maxLength: "maxLength",
+  minLength: "minLength",
+  pattern: "pattern",
+  required: "required",
+  validate: "validate"
+};
+const ROOT_ERROR_TYPE = "root";
+const PROTOTYPE_KEYWORDS = ["__proto__", "constructor", "prototype"];
+const IS_KEY_RE = /^\w*$/;
+var isKey = (value) => IS_KEY_RE.test(value);
+var isUndefined = (val) => val === void 0;
+const FIELD_PATH_RE = /[.[\]'"]/;
+var stringToPath = (input) => input.split(FIELD_PATH_RE).filter(Boolean);
+var get = (object, path, defaultValue) => {
+  if (!path || !isObject(object)) {
+    return defaultValue;
+  }
+  const paths = isKey(path) ? [path] : stringToPath(path);
+  if (paths.some((key) => PROTOTYPE_KEYWORDS.includes(key))) {
+    return defaultValue;
+  }
+  const result = paths.reduce((result2, key) => {
+    return isNullOrUndefined(result2) ? void 0 : result2[key];
+  }, object);
+  return isUndefined(result) || result === object ? isUndefined(object[path]) ? defaultValue : object[path] : result;
+};
+var isBoolean = (value) => typeof value === "boolean";
+var isFunction = (value) => typeof value === "function";
 var set = (object, path, value) => {
   let index = -1;
   const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -2395,857 +2681,571 @@ function createFormControl(props = {}) {
         return _names;
       },
       set _names(value) {
-        _names = value;
-      },
-      get _formState() {
-        return _formState;
-      },
-      get _options() {
-        return _options;
-      },
-      set _options(value) {
-        _options = {
-          ..._options,
-          ...value
-        };
-        _validationModeBeforeSubmit = getValidationModes(_options.mode);
-        _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
-      }
-    },
-    subscribe,
-    trigger,
-    register,
-    handleSubmit,
-    watch,
-    setValue,
-    setValues,
-    getValues,
-    reset,
-    resetField,
-    resetDefaultValues,
-    clearErrors,
-    unregister,
-    setError,
-    setFocus,
-    getFieldState
-  };
-  return {
-    ...methods,
-    formControl: methods
-  };
-}
-function useForm(props = {}) {
-  const _formControl = React.useRef(void 0);
-  const _values = React.useRef(void 0);
-  const _formControlProp = React.useRef(props.formControl);
-  const [formState, updateFormState] = React.useState(() => ({
-    ...cloneObject(DEFAULT_FORM_STATE),
-    isLoading: isFunction(props.defaultValues),
-    errors: props.errors || {},
-    disabled: props.disabled || false,
-    defaultValues: isFunction(props.defaultValues) ? void 0 : props.defaultValues
-  }));
-  if (!_formControl.current || props.formControl && _formControlProp.current !== props.formControl) {
-    _formControlProp.current = props.formControl;
-    if (props.formControl) {
-      _formControl.current = {
-        ...props.formControl,
-        formState
-      };
-      if (props.defaultValues && !isFunction(props.defaultValues)) {
-        props.formControl.reset(props.defaultValues, props.resetOptions);
-      }
-    } else {
-      const { formControl, ...rest } = createFormControl(props);
-      _formControl.current = {
-        ...rest,
-        formState
-      };
-    }
-  }
-  const control = _formControl.current.control;
-  control._options = props;
-  useIsomorphicLayoutEffect(() => {
-    const sub = control._subscribe({
-      formState: control._proxyFormState,
-      callback: () => updateFormState({
-        ...control._formState,
-        defaultValues: control._defaultValues
-      }),
-      reRenderRoot: true
-    });
-    updateFormState((data) => ({
-      ...data,
-      isReady: true
-    }));
-    control._formState.isReady = true;
-    return sub;
-  }, [control]);
-  React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
-  React.useEffect(() => {
-    if (props.mode) {
-      control._options.mode = props.mode;
-    }
-    if (props.reValidateMode) {
-      control._options.reValidateMode = props.reValidateMode;
-    }
-  }, [control, props.mode, props.reValidateMode]);
-  React.useEffect(() => {
-    if (props.errors) {
-      control._setErrors(props.errors);
-      control._focusError();
-    }
-  }, [control, props.errors]);
-  React.useEffect(() => {
-    props.shouldUnregister && control._subjects.state.next({
-      values: control._getWatch()
-    });
-  }, [control, props.shouldUnregister]);
-  React.useEffect(() => {
-    if (control._proxyFormState.isDirty) {
-      const isDirty = control._getDirty();
-      if (isDirty !== formState.isDirty) {
-        control._subjects.state.next({
-          isDirty
-        });
-      }
-    }
-  }, [control, formState.isDirty]);
-  React.useEffect(() => {
-    var _a;
-    if (props.values && !deepEqual(props.values, _values.current)) {
-      control._reset(props.values, {
-        keepFieldsRef: true,
-        ...control._options.resetOptions
-      });
-      if (!((_a = control._options.resetOptions) === null || _a === void 0 ? void 0 : _a.keepIsValid)) {
-        control._setValid();
-      }
-      _values.current = props.values;
-      updateFormState((state) => ({ ...state }));
-    } else {
-      control._resetDefaultValues();
-    }
-  }, [control, props.values]);
-  React.useEffect(() => {
-    if (!control._state.mount) {
-      control._setValid();
-      control._state.mount = true;
-    }
-    if (control._state.watch) {
-      control._state.watch = false;
-      control._subjects.state.next({ ...control._formState });
-    }
-    control._removeUnmounted();
-  });
-  _formControl.current.formState = React.useMemo(() => getProxyFormState(formState, control), [control, formState]);
-  return _formControl.current;
-}
-const jsonToText = (v) => v == null || v === "" ? "" : JSON.stringify(v, null, 2);
-const JsonField = ({ field, f }) => {
-  const { t } = useTranslation();
-  const [raw, setRaw] = useState(() => jsonToText(f.value));
-  const [error, setError] = useState(null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        rows: 6,
-        className: "font-mono",
-        placeholder: field.placeholder ? t(field.placeholder) : "[]",
-        value: raw,
-        disabled: field.readonly === true,
-        onBlur: f.onBlur,
-        onChange: (e) => {
-          const text = e.target.value;
-          setRaw(text);
-          if (text.trim() === "") {
-            setError(null);
-            f.onChange(null);
-            return;
-          }
-          try {
-            f.onChange(JSON.parse(text));
-            setError(null);
-          } catch {
-            setError(t("integration.form.invalidJson"));
-          }
-        }
-      }
-    ),
-    error && /* @__PURE__ */ jsx(Text, { size: "xsmall", className: "text-ui-fg-error", children: error })
-  ] });
-};
-const IntegrationField = ({
-  field,
-  control,
-  secretConfigured = false
-}) => {
-  const { t } = useTranslation();
-  const enforceRequired = field.required && field.control !== "switch" && !(field.control === "secret" && secretConfigured);
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs(Label, { size: "small", weight: "plus", children: [
-      t(field.label),
-      field.required ? " *" : ""
-    ] }),
-    /* @__PURE__ */ jsx(
-      Controller,
-      {
-        name: field.name,
-        control,
-        rules: {
-          required: enforceRequired ? t("integration.form.required", { field: t(field.label) }) : false
-        },
-        render: ({ field: f, fieldState }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          renderControl(field, f, secretConfigured, t),
-          fieldState.error?.message && /* @__PURE__ */ jsx(Text, { size: "xsmall", className: "text-ui-fg-error", children: fieldState.error.message })
-        ] })
-      }
-    ),
-    field.hint && /* @__PURE__ */ jsx(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__ */ jsx(Switch, { checked: !!f.value, onCheckedChange: f.onChange, disabled });
-    case "select": {
-      const declared = field.options ?? [];
-      return /* @__PURE__ */ jsxs(
-        Select,
-        {
-          value: f.value == null ? "" : String(f.value),
-          onValueChange: (next) => f.onChange(declared.find((o) => String(o) === next) ?? next),
-          disabled,
-          children: [
-            /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder }) }),
-            /* @__PURE__ */ jsx(Select.Content, { children: declared.map((o) => {
-              const labelKey = field.optionLabels?.[String(o)];
-              return /* @__PURE__ */ jsx(Select.Item, { value: String(o), children: labelKey ? t(labelKey) : String(o) }, String(o));
-            }) })
-          ]
-        }
-      );
-    }
-    case "number":
-      return /* @__PURE__ */ jsx(
-        Input,
-        {
-          type: "number",
-          placeholder,
-          value: f.value ?? "",
-          disabled,
-          onChange: (e) => f.onChange(e.target.value === "" ? null : e.target.valueAsNumber)
-        }
-      );
-    case "url":
-      return /* @__PURE__ */ jsx(
-        Input,
-        {
-          type: "url",
-          placeholder,
-          value: f.value ?? "",
-          disabled,
-          onChange: f.onChange
-        }
-      );
-    case "secret":
-      return /* @__PURE__ */ jsx(
-        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__ */ jsx(JsonField, { field, f });
-    default:
-      return /* @__PURE__ */ jsx(
-        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?.[f.name] ?? f.default ?? false;
-    else if (f.control === "json") out[f.name] = values?.[f.name] ?? f.default;
-    else out[f.name] = values?.[f.name] ?? f.default ?? "";
-  }
-  return out;
-}
-const EditSectionDrawer = ({
-  open,
-  onOpenChange,
-  providerId,
-  section,
-  values,
-  configuredSecrets = []
-}) => {
-  const { t } = useTranslation();
-  const qc = useQueryClient();
-  const configured = new Set(configuredSecrets);
-  const [defaults] = useState(() => sectionDefaults(section, values));
-  const form = useForm({ values: defaults });
-  const current = form.watch();
-  const visibilityValues = { ...values, ...current };
-  const save = 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: () => {
-      toast.success(t("integration.toast.saved"));
-      qc.invalidateQueries({ queryKey: ["integration", providerId] });
-      qc.invalidateQueries({ queryKey: ["integration-overview"] });
-      onOpenChange(false);
-    },
-    onError: (e) => toast.error(e?.message ?? t("integration.toast.saveFailed"))
-  });
-  return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Drawer.Content, { children: [
-    /* @__PURE__ */ jsx(Drawer.Header, { children: /* @__PURE__ */ jsx(Drawer.Title, { children: t(section.title) }) }),
-    /* @__PURE__ */ jsx(Drawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", children: section.fields.filter((f) => isFieldVisible(f, visibilityValues)).map((f) => /* @__PURE__ */ jsx(
-      IntegrationField,
-      {
-        field: f,
-        control: form.control,
-        secretConfigured: configured.has(f.name)
-      },
-      f.name
-    )) }),
-    /* @__PURE__ */ jsxs(Drawer.Footer, { children: [
-      /* @__PURE__ */ jsx(Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", disabled: save.isPending, children: t("integration.actions.cancel") }) }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "small",
-          isLoading: save.isPending,
-          onClick: form.handleSubmit((v) => save.mutate(v)),
-          children: t("integration.actions.save")
-        }
-      )
-    ] })
-  ] }) });
-};
-const Row = ({ label, children }) => /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 px-6 py-4", children: [
-  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: label }),
-  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2", children })
-] });
-const EditPage = () => {
-  const { t } = useTranslation();
-  const { provider_id } = useParams();
-  const qc = useQueryClient();
-  const navigate = useNavigate();
-  const prompt = usePrompt();
-  const [editingSection, setEditingSection] = useState(null);
-  const { data, isLoading } = useQuery({
-    queryKey: ["integration", provider_id],
-    queryFn: () => sdk.client.fetch(`/admin/integrations/${provider_id}`)
-  });
-  const descriptor = data?.descriptor;
-  const record = data?.integration;
-  const isConfigured = !!record;
-  const isComplete = data?.is_complete ?? false;
-  const invalidate = () => {
-    qc.invalidateQueries({ queryKey: ["integration", provider_id] });
-    qc.invalidateQueries({ queryKey: ["integration-overview"] });
-  };
-  const test = useMutation({
-    mutationFn: () => sdk.client.fetch(
-      `/admin/integrations/${provider_id}/test-connection`,
-      { method: "POST" }
-    ),
-    onSuccess: (r) => {
-      r.status === "passed" ? toast.success(t("integration.toast.connectionOk")) : toast.warning(r.message ?? r.status);
-      invalidate();
-    },
-    onError: (e) => toast.error(e?.message ?? t("integration.toast.testFailed"))
-  });
-  const toggleEnabled = useMutation({
-    mutationFn: (next) => sdk.client.fetch(`/admin/integrations/${provider_id}/enable`, {
-      method: "POST",
-      body: { is_enabled: next }
-    }),
-    onSuccess: (_d, next) => {
-      toast.success(next ? t("integration.toast.enabled") : t("integration.toast.disabled"));
-      invalidate();
-    },
-    onError: (e) => toast.error(e?.message ?? t("integration.toast.updateFailed"))
-  });
-  const remove = useMutation({
-    mutationFn: () => sdk.client.fetch(`/admin/integrations/${provider_id}`, { method: "DELETE" }),
-    onSuccess: () => {
-      toast.success(t("integration.toast.deleted"));
-      invalidate();
-      navigate("/settings/integrations");
-    },
-    onError: (e) => toast.error(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__ */ jsx(Container, { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsx(Spinner, { className: "text-ui-fg-subtle animate-spin" }) });
-  }
-  if (!descriptor) {
-    throw new FetchError(
-      `Integration with provider_id: ${provider_id} was not found`,
-      "There is no page at this address",
-      404
-    );
-  }
-  const version = data?.version ?? null;
-  const author = data?.author ?? null;
-  const authorUrl = 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?.last_test_status === "passed" ? { color: "green", label: t("integration.status.connected") } : 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?.configured_secrets ?? []);
-  const sectionData = {
-    providerId: provider_id,
-    identifier: descriptor.identifier,
-    values: record?.values ?? {},
-    isComplete
-  };
-  const renderSection = (section) => /* @__PURE__ */ jsx(LayoutComposer.Entry, { id: section.id, children: /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx(Heading, { level: "h2", children: t(section.title) }),
-      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", variant: "transparent", children: /* @__PURE__ */ jsx(EllipsisHorizontal, {}) }) }),
-        /* @__PURE__ */ jsx(DropdownMenu.Content, { children: /* @__PURE__ */ jsxs(DropdownMenu.Item, { className: "gap-x-2", onClick: () => setEditingSection(section.id), children: [
-          /* @__PURE__ */ jsx(PencilSquare, { className: "text-ui-fg-subtle" }),
-          t("integration.actions.edit")
-        ] }) })
-      ] })
-    ] }),
-    section.fields.filter((f) => isFieldVisible(f, record?.values ?? {})).map((f) => /* @__PURE__ */ jsx(Row, { label: t(f.label), children: /* @__PURE__ */ jsx(
-      IntegrationFieldValue,
-      {
-        field: f,
-        value: record?.values?.[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__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(LayoutComposer.Entry, { id: "main", children: /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3 px-6 py-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
-            /* @__PURE__ */ jsx(IntegrationIcon, { src: descriptor.icon, alt: t(descriptor.displayName) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
-                /* @__PURE__ */ jsx(Heading, { children: t(descriptor.displayName) }),
-                provider_id && /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: toModuleProviderId(provider_id, descriptor.category) })
-              ] }),
-              version && /* @__PURE__ */ jsxs(Text, { size: "xsmall", leading: "compact", className: "text-ui-fg-subtle", children: [
-                t("integration.meta.version", { version }),
-                author && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  " • ",
-                  t("integration.meta.authorPrefix"),
-                  " ",
-                  authorUrl ? /* @__PURE__ */ jsx(
-                    "a",
-                    {
-                      href: authorUrl,
-                      target: "_blank",
-                      rel: "noreferrer",
-                      className: "text-ui-fg-interactive",
-                      children: author
-                    }
-                  ) : author
-                ] })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
-            /* @__PURE__ */ jsx(StatusBadge, { color: lifecycle.color, children: lifecycle.label }),
-            connection && /* @__PURE__ */ jsx(StatusBadge, { color: connection.color, children: connection.label }),
-            isConfigured && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-              /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", variant: "transparent", children: /* @__PURE__ */ jsx(EllipsisHorizontal, {}) }) }),
-              /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
-                descriptor.hasTestConnection && record.is_enabled && isComplete && /* @__PURE__ */ jsx(DropdownMenu.Item, { disabled: test.isPending, onClick: () => test.mutate(), children: t("integration.actions.test") }),
-                isConfigured && /* @__PURE__ */ jsx(
-                  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__ */ jsx(DropdownMenu.Separator, {}),
-                isConfigured && /* @__PURE__ */ jsxs(DropdownMenu.Item, { className: "gap-x-2", onClick: onDelete, children: [
-                  /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
-                  t("integration.actions.delete")
-                ] })
-              ] })
-            ] })
-          ] })
-        ] }),
-        descriptor.description && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t(descriptor.description) })
-      ] }),
-      /* @__PURE__ */ jsx(Row, { label: t("integration.labels.category"), children: /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: t(`integration.categories.${descriptor.category}`) }) })
-    ] }) }),
-    mainSections.map(renderSection),
-    editing && /* @__PURE__ */ jsx(
-      EditSectionDrawer,
-      {
-        open: true,
-        onOpenChange: (open) => !open && setEditingSection(null),
-        providerId: provider_id,
-        section: editing,
-        values: record?.values ?? {},
-        configuredSecrets: record?.configured_secrets ?? []
-      },
-      editing.id
-    )
-  ] });
-  const side = /* @__PURE__ */ jsx(Fragment, { children: sideSections.map(renderSection) });
-  return /* @__PURE__ */ jsx(
-    LayoutComposer,
-    {
-      widgetsZonePrefix: `gorgo.integration.${descriptor.identifier}`,
-      preferredLayoutId: descriptor.preferredLayoutId,
-      sections: { main, side },
-      data: sectionData,
-      hasOutlet: false
-    }
-  );
-};
-const IntegrationBreadcrumb = ({ params }) => {
-  const { t } = useTranslation();
-  const providerId = params.provider_id;
-  const { data } = useQuery({
-    queryKey: ["integration", providerId],
-    queryFn: () => sdk.client.fetch(`/admin/integrations/${providerId}`),
-    enabled: !!providerId
-  });
-  const descriptor = data?.descriptor;
-  if (!descriptor) return /* @__PURE__ */ jsx(Fragment, {});
-  const name = t(descriptor.displayName);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    name + " ",
-    /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: providerId })
-  ] });
-};
-const handle$1 = {
-  breadcrumb: ({ params }) => /* @__PURE__ */ jsx(IntegrationBreadcrumb, { params })
-};
-function isSafeHref(raw) {
-  try {
-    return new URL(raw).protocol === "https:";
-  } catch {
-    return false;
-  }
+        _names = value;
+      },
+      get _formState() {
+        return _formState;
+      },
+      get _options() {
+        return _options;
+      },
+      set _options(value) {
+        _options = {
+          ..._options,
+          ...value
+        };
+        _validationModeBeforeSubmit = getValidationModes(_options.mode);
+        _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
+      }
+    },
+    subscribe,
+    trigger,
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    setValues,
+    getValues,
+    reset,
+    resetField,
+    resetDefaultValues,
+    clearErrors,
+    unregister,
+    setError,
+    setFocus,
+    getFieldState
+  };
+  return {
+    ...methods,
+    formControl: methods
+  };
 }
-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 });
+function useForm(props = {}) {
+  const _formControl = React.useRef(void 0);
+  const _values = React.useRef(void 0);
+  const _formControlProp = React.useRef(props.formControl);
+  const [formState, updateFormState] = React.useState(() => ({
+    ...cloneObject(DEFAULT_FORM_STATE),
+    isLoading: isFunction(props.defaultValues),
+    errors: props.errors || {},
+    disabled: props.disabled || false,
+    defaultValues: isFunction(props.defaultValues) ? void 0 : props.defaultValues
+  }));
+  if (!_formControl.current || props.formControl && _formControlProp.current !== props.formControl) {
+    _formControlProp.current = props.formControl;
+    if (props.formControl) {
+      _formControl.current = {
+        ...props.formControl,
+        formState
+      };
+      if (props.defaultValues && !isFunction(props.defaultValues)) {
+        props.formControl.reset(props.defaultValues, props.resetOptions);
       }
-    } 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) });
+      const { formControl, ...rest } = createFormControl(props);
+      _formControl.current = {
+        ...rest,
+        formState
+      };
     }
   }
-  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;
+  const control = _formControl.current.control;
+  control._options = props;
+  useIsomorphicLayoutEffect(() => {
+    const sub = control._subscribe({
+      formState: control._proxyFormState,
+      callback: () => updateFormState({
+        ...control._formState,
+        defaultValues: control._defaultValues
+      }),
+      reRenderRoot: true
+    });
+    updateFormState((data) => ({
+      ...data,
+      isReady: true
+    }));
+    control._formState.isReady = true;
+    return sub;
+  }, [control]);
+  React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+  React.useEffect(() => {
+    if (props.mode) {
+      control._options.mode = props.mode;
     }
-    if (!line.trim()) {
-      flushPara();
-      continue;
+    if (props.reValidateMode) {
+      control._options.reValidateMode = props.reValidateMode;
     }
-    if (HR_RE.test(line)) {
-      flushPara();
-      blocks.push({ type: "hr" });
-      continue;
+  }, [control, props.mode, props.reValidateMode]);
+  React.useEffect(() => {
+    if (props.errors) {
+      control._setErrors(props.errors);
+      control._focusError();
     }
-    const heading = HEADING_RE.exec(line);
-    if (heading) {
-      flushPara();
-      blocks.push({
-        type: "heading",
-        level: heading[1].length + 1,
-        children: parseInline(heading[2])
+  }, [control, props.errors]);
+  React.useEffect(() => {
+    props.shouldUnregister && control._subjects.state.next({
+      values: control._getWatch()
+    });
+  }, [control, props.shouldUnregister]);
+  React.useEffect(() => {
+    if (control._proxyFormState.isDirty) {
+      const isDirty = control._getDirty();
+      if (isDirty !== formState.isDirty) {
+        control._subjects.state.next({
+          isDirty
+        });
+      }
+    }
+  }, [control, formState.isDirty]);
+  React.useEffect(() => {
+    var _a;
+    if (props.values && !deepEqual(props.values, _values.current)) {
+      control._reset(props.values, {
+        keepFieldsRef: true,
+        ...control._options.resetOptions
       });
-      continue;
+      if (!((_a = control._options.resetOptions) === null || _a === void 0 ? void 0 : _a.keepIsValid)) {
+        control._setValid();
+      }
+      _values.current = props.values;
+      updateFormState((state) => ({ ...state }));
+    } else {
+      control._resetDefaultValues();
     }
-    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++;
+  }, [control, props.values]);
+  React.useEffect(() => {
+    if (!control._state.mount) {
+      control._setValid();
+      control._state.mount = true;
+    }
+    if (control._state.watch) {
+      control._state.watch = false;
+      control._subjects.state.next({ ...control._formState });
+    }
+    control._removeUnmounted();
+  });
+  _formControl.current.formState = React.useMemo(() => getProxyFormState(formState, control), [control, formState]);
+  return _formControl.current;
+}
+const jsonToText = (v) => v == null || v === "" ? "" : JSON.stringify(v, null, 2);
+const JsonField = ({ field, f }) => {
+  const { t } = useTranslation();
+  const [raw, setRaw] = useState(() => jsonToText(f.value));
+  const [error, setError] = useState(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        rows: 6,
+        className: "font-mono",
+        placeholder: field.placeholder ? t(field.placeholder) : "[]",
+        value: raw,
+        disabled: field.readonly === true,
+        onBlur: f.onBlur,
+        onChange: (e) => {
+          const text = e.target.value;
+          setRaw(text);
+          if (text.trim() === "") {
+            setError(null);
+            f.onChange(null);
+            return;
+          }
+          try {
+            f.onChange(JSON.parse(text));
+            setError(null);
+          } catch {
+            setError(t("integration.form.invalidJson"));
+          }
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx(Text, { size: "xsmall", className: "text-ui-fg-error", children: error })
+  ] });
+};
+const IntegrationField = ({
+  field,
+  control,
+  secretConfigured = false
+}) => {
+  const { t } = useTranslation();
+  const enforceRequired = field.required && field.control !== "switch" && !(field.control === "secret" && secretConfigured);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs(Label, { size: "small", weight: "plus", children: [
+      t(field.label),
+      field.required ? " *" : ""
+    ] }),
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name: field.name,
+        control,
+        rules: {
+          required: enforceRequired ? t("integration.form.required", { field: t(field.label) }) : false
+        },
+        render: ({ field: f, fieldState }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderControl(field, f, secretConfigured, t),
+          fieldState.error?.message && /* @__PURE__ */ jsx(Text, { size: "xsmall", className: "text-ui-fg-error", children: fieldState.error.message })
+        ] })
       }
-      i--;
-      blocks.push({ type: "list", ordered, items });
-      continue;
+    ),
+    field.hint && /* @__PURE__ */ jsx(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__ */ jsx(Switch, { checked: !!f.value, onCheckedChange: f.onChange, disabled });
+    case "select": {
+      const declared = field.options ?? [];
+      return /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: f.value == null ? "" : String(f.value),
+          onValueChange: (next) => f.onChange(declared.find((o) => String(o) === next) ?? next),
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder }) }),
+            /* @__PURE__ */ jsx(Select.Content, { children: declared.map((o) => {
+              const labelKey = field.optionLabels?.[String(o)];
+              return /* @__PURE__ */ jsx(Select.Item, { value: String(o), children: labelKey ? t(labelKey) : String(o) }, String(o));
+            }) })
+          ]
+        }
+      );
     }
-    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__ */ jsx(Fragment, { children: nodes.map((node, i) => {
-  switch (node.type) {
-    case "text":
-      return /* @__PURE__ */ jsx("span", { children: node.value }, i);
-    case "code":
-      return /* @__PURE__ */ jsx("code", { className: "txt-compact-small bg-ui-bg-component rounded px-1 py-0.5", children: node.value }, i);
-    case "strong":
-      return /* @__PURE__ */ jsx("span", { className: "txt-compact-small-plus", children: /* @__PURE__ */ jsx(Inline, { nodes: node.children }) }, i);
-    case "em":
-      return /* @__PURE__ */ jsx("em", { children: /* @__PURE__ */ jsx(Inline, { nodes: node.children }) }, i);
-    case "link":
+    case "number":
       return /* @__PURE__ */ jsx(
-        "a",
+        Input,
         {
-          href: node.href,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "text-ui-fg-interactive hover:underline",
-          children: /* @__PURE__ */ jsx(Inline, { nodes: node.children })
-        },
-        i
+          type: "number",
+          placeholder,
+          value: f.value ?? "",
+          disabled,
+          onChange: (e) => f.onChange(e.target.value === "" ? null : e.target.valueAsNumber)
+        }
       );
-  }
-}) });
-const Block = ({ block, truncatedLabel }) => {
-  switch (block.type) {
-    case "heading":
-      return /* @__PURE__ */ jsx(Heading, { level: block.level === 2 ? "h2" : "h3", children: /* @__PURE__ */ jsx(Inline, { nodes: block.children }) });
-    case "paragraph":
-      return /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: /* @__PURE__ */ jsx(Inline, { nodes: block.children }) });
-    case "list": {
-      const List = block.ordered ? "ol" : "ul";
+    case "url":
       return /* @__PURE__ */ jsx(
-        List,
+        Input,
         {
-          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__ */ jsx("li", { children: /* @__PURE__ */ jsx(Inline, { nodes: item }) }, i))
+          type: "url",
+          placeholder,
+          value: f.value ?? "",
+          disabled,
+          onChange: f.onChange
+        }
+      );
+    case "secret":
+      return /* @__PURE__ */ jsx(
+        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__ */ jsx(JsonField, { field, f });
+    default:
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder,
+          value: f.value ?? "",
+          disabled,
+          onChange: f.onChange
         }
       );
-    }
-    case "codeBlock":
-      return /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle flex flex-col gap-y-2 rounded-md px-3 pb-1 pt-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
-          block.label ? /* @__PURE__ */ jsx(Text, { size: "xsmall", weight: "plus", className: "text-ui-fg-subtle", children: block.label }) : /* @__PURE__ */ jsx("span", {}),
-          /* @__PURE__ */ jsx(Copy, { content: block.value })
-        ] }),
-        /* @__PURE__ */ jsx("pre", { className: "txt-compact-small text-ui-fg-subtle overflow-x-auto whitespace-pre pb-2", children: block.value })
-      ] });
-    case "hr":
-      return /* @__PURE__ */ jsx("div", { className: "border-ui-border-base border-t" });
-    case "truncated":
-      return /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: truncatedLabel });
   }
-};
-const Markdown = ({
-  source,
-  truncatedLabel
-}) => {
-  const blocks = useMemo(() => parseMarkdown(source), [source]);
-  if (!blocks.length) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-4", children: blocks.map((block, i) => /* @__PURE__ */ 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
+}
+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?.[f.name] ?? f.default ?? false;
+    else if (f.control === "json") out[f.name] = values?.[f.name] ?? f.default;
+    else out[f.name] = values?.[f.name] ?? f.default ?? "";
+  }
+  return out;
+}
+const EditSectionDrawer = ({
+  open,
+  onOpenChange,
+  providerId,
+  section,
+  values,
+  configuredSecrets = []
 }) => {
-  const { t, i18n } = useTranslation();
-  const lang = i18n.language.split("-")[0] === "ru" ? "ru" : "en";
-  const source = item?.docsSnippet?.[lang] || item?.docsSnippet?.en || item?.docsSnippet?.ru || "";
-  return /* @__PURE__ */ jsx(Drawer, { open: !!item, onOpenChange, children: /* @__PURE__ */ jsxs(Drawer.Content, { children: [
-    /* @__PURE__ */ jsx(Drawer.Header, { children: /* @__PURE__ */ jsx(Drawer.Title, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
-      item && /* @__PURE__ */ jsx(IntegrationIcon, { src: iconSrc(item.icon), alt: item.label, size: "small" }),
-      /* @__PURE__ */ jsx("span", { children: item?.label })
-    ] }) }) }),
-    /* @__PURE__ */ jsx(Drawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", children: source.trim() ? /* @__PURE__ */ jsx(Markdown, { source, truncatedLabel: t("integration.browse.install_truncated") }) : /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.browse.install_empty") }) }),
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const configured = new Set(configuredSecrets);
+  const [defaults] = useState(() => sectionDefaults(section, values));
+  const form = useForm({ values: defaults });
+  const current = form.watch();
+  const visibilityValues = { ...values, ...current };
+  const save = 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: () => {
+      toast.success(t("integration.toast.saved"));
+      qc.invalidateQueries({ queryKey: ["integration", providerId] });
+      qc.invalidateQueries({ queryKey: ["integration-overview"] });
+      onOpenChange(false);
+    },
+    onError: (e) => toast.error(e?.message ?? t("integration.toast.saveFailed"))
+  });
+  return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+    /* @__PURE__ */ jsx(Drawer.Header, { children: /* @__PURE__ */ jsx(Drawer.Title, { children: t(section.title) }) }),
+    /* @__PURE__ */ jsx(Drawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", children: section.fields.filter((f) => isFieldVisible(f, visibilityValues)).map((f) => /* @__PURE__ */ jsx(
+      IntegrationField,
+      {
+        field: f,
+        control: form.control,
+        secretConfigured: configured.has(f.name)
+      },
+      f.name
+    )) }),
     /* @__PURE__ */ jsxs(Drawer.Footer, { children: [
-      /* @__PURE__ */ jsx(Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: t("integration.actions.cancel") }) }),
-      item?.docsUrl && /* @__PURE__ */ jsx(Button, { size: "small", variant: "primary", asChild: true, children: /* @__PURE__ */ jsxs("a", { href: item.docsUrl, target: "_blank", rel: "noopener noreferrer", children: [
-        t("integration.browse.install_docs"),
-        /* @__PURE__ */ jsx(ArrowUpRightOnBox, {})
-      ] }) })
+      /* @__PURE__ */ jsx(Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", disabled: save.isPending, children: t("integration.actions.cancel") }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          isLoading: save.isPending,
+          onClick: form.handleSubmit((v) => save.mutate(v)),
+          children: t("integration.actions.save")
+        }
+      )
     ] })
   ] }) });
 };
-const BrowsePage = () => {
+const Row = ({ label, children }) => /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 px-6 py-4", children: [
+  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: label }),
+  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2", children })
+] });
+const EditPage = () => {
   const { t } = useTranslation();
+  const { provider_id } = useParams();
+  const qc = useQueryClient();
   const navigate = useNavigate();
-  const [activeTab, setActiveTab] = useState("all");
-  const [search, setSearch] = useState("");
-  const [installItem, setInstallItem] = useState(null);
-  const { data, isLoading } = useQuery({
-    queryKey: ["integration-catalog"],
-    queryFn: () => sdk.client.fetch("/admin/integrations/catalog")
+  const prompt = usePrompt();
+  const [editingSection, setEditingSection] = useState(null);
+  const { data, isLoading } = useQuery({
+    queryKey: ["integration", provider_id],
+    queryFn: () => sdk.client.fetch(`/admin/integrations/${provider_id}`)
   });
-  const items = data?.integrations ?? [];
-  const categories = 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 descriptor = data?.descriptor;
+  const record = data?.integration;
+  const isConfigured = !!record;
+  const isComplete = data?.is_complete ?? false;
+  const invalidate = () => {
+    qc.invalidateQueries({ queryKey: ["integration", provider_id] });
+    qc.invalidateQueries({ queryKey: ["integration-overview"] });
+  };
+  const test = useMutation({
+    mutationFn: () => sdk.client.fetch(
+      `/admin/integrations/${provider_id}/test-connection`,
+      { method: "POST" }
+    ),
+    onSuccess: (r) => {
+      r.status === "passed" ? toast.success(t("integration.toast.connectionOk")) : toast.warning(r.message ?? r.status);
+      invalidate();
+    },
+    onError: (e) => toast.error(e?.message ?? t("integration.toast.testFailed"))
   });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3", children: [
-    /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between px-6 py-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("integration.browse.title") }),
-          /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.browse.subtitle") })
-        ] }),
-        false
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-6 py-4", children: [
-        /* @__PURE__ */ jsx(Tabs, { value: activeTab, onValueChange: setActiveTab, children: /* @__PURE__ */ jsxs(Tabs.List, { children: [
-          /* @__PURE__ */ jsx(Tabs.Trigger, { value: "all", children: t("integration.list.tabs.all") }),
-          categories.map((c) => /* @__PURE__ */ jsx(Tabs.Trigger, { value: c, children: t(`integration.categories.${c}`) }, c))
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "w-64", children: /* @__PURE__ */ jsx(
-          Input,
-          {
-            placeholder: t("integration.browse.searchPlaceholder"),
-            value: search,
-            onChange: (e) => setSearch(e.target.value)
-          }
-        ) })
+  const toggleEnabled = useMutation({
+    mutationFn: (next) => sdk.client.fetch(`/admin/integrations/${provider_id}/enable`, {
+      method: "POST",
+      body: { is_enabled: next }
+    }),
+    onSuccess: (_d, next) => {
+      toast.success(next ? t("integration.toast.enabled") : t("integration.toast.disabled"));
+      invalidate();
+    },
+    onError: (e) => toast.error(e?.message ?? t("integration.toast.updateFailed"))
+  });
+  const remove = useMutation({
+    mutationFn: () => sdk.client.fetch(`/admin/integrations/${provider_id}`, { method: "DELETE" }),
+    onSuccess: () => {
+      toast.success(t("integration.toast.deleted"));
+      invalidate();
+      navigate("/settings/integrations");
+    },
+    onError: (e) => toast.error(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__ */ jsx(Container, { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsx(Spinner, { className: "text-ui-fg-subtle animate-spin" }) });
+  }
+  if (!descriptor) {
+    throw new FetchError(
+      `Integration with provider_id: ${provider_id} was not found`,
+      "There is no page at this address",
+      404
+    );
+  }
+  const version = data?.version ?? null;
+  const author = data?.author ?? null;
+  const authorUrl = 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?.last_test_status === "passed" ? { color: "green", label: t("integration.status.connected") } : 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?.configured_secrets ?? []);
+  const sectionData = {
+    providerId: provider_id,
+    identifier: descriptor.identifier,
+    values: record?.values ?? {},
+    isComplete
+  };
+  const renderSection = (section) => /* @__PURE__ */ jsx(LayoutComposer.Entry, { id: section.id, children: /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h2", children: t(section.title) }),
+      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", variant: "transparent", children: /* @__PURE__ */ jsx(EllipsisHorizontal, {}) }) }),
+        /* @__PURE__ */ jsx(DropdownMenu.Content, { children: /* @__PURE__ */ jsxs(DropdownMenu.Item, { className: "gap-x-2", onClick: () => setEditingSection(section.id), children: [
+          /* @__PURE__ */ jsx(PencilSquare, { className: "text-ui-fg-subtle" }),
+          t("integration.actions.edit")
+        ] }) })
       ] })
     ] }),
-    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, { className: "text-ui-fg-subtle animate-spin" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.list.emptyFiltered") }) }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", children: filtered.map((item) => /* @__PURE__ */ jsxs("div", { className: "shadow-borders-base bg-ui-bg-base flex flex-col rounded-lg", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-y-3 p-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-2", children: [
+    section.fields.filter((f) => isFieldVisible(f, record?.values ?? {})).map((f) => /* @__PURE__ */ jsx(Row, { label: t(f.label), children: /* @__PURE__ */ jsx(
+      IntegrationFieldValue,
+      {
+        field: f,
+        value: record?.values?.[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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(LayoutComposer.Entry, { id: "main", children: /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3 px-6 py-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
-            /* @__PURE__ */ jsx(IntegrationIcon, { src: iconSrc(item.icon), alt: item.label }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.label }),
-              /* @__PURE__ */ jsx(Text, { size: "xsmall", leading: "compact", className: "text-ui-fg-subtle", children: t("integration.browse.by", { author: item.authorLocalized }) })
+            /* @__PURE__ */ jsx(IntegrationIcon, { src: descriptor.icon, alt: t(descriptor.displayName) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+                /* @__PURE__ */ jsx(Heading, { children: t(descriptor.displayName) }),
+                provider_id && /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: toModuleProviderId(provider_id, descriptor.category) })
+              ] }),
+              version && /* @__PURE__ */ jsxs(Text, { size: "xsmall", leading: "compact", className: "text-ui-fg-subtle", children: [
+                t("integration.meta.version", { version }),
+                author && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  " • ",
+                  t("integration.meta.authorPrefix"),
+                  " ",
+                  authorUrl ? /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: authorUrl,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      className: "text-ui-fg-interactive",
+                      children: author
+                    }
+                  ) : author
+                ] })
+              ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(StatusBadge, { color: item.installed ? "green" : "grey", children: item.installed ? t("integration.browse.installed") : t("integration.browse.notInstalled") })
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsx(StatusBadge, { color: lifecycle.color, children: lifecycle.label }),
+            connection && /* @__PURE__ */ jsx(StatusBadge, { color: connection.color, children: connection.label }),
+            isConfigured && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", variant: "transparent", children: /* @__PURE__ */ jsx(EllipsisHorizontal, {}) }) }),
+              /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
+                descriptor.hasTestConnection && record.is_enabled && isComplete && /* @__PURE__ */ jsx(DropdownMenu.Item, { disabled: test.isPending, onClick: () => test.mutate(), children: t("integration.actions.test") }),
+                isConfigured && /* @__PURE__ */ jsx(
+                  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__ */ jsx(DropdownMenu.Separator, {}),
+                isConfigured && /* @__PURE__ */ jsxs(DropdownMenu.Item, { className: "gap-x-2", onClick: onDelete, children: [
+                  /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
+                  t("integration.actions.delete")
+                ] })
+              ] })
+            ] })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle line-clamp-2", children: item.shortDescription })
+        descriptor.description && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t(descriptor.description) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t px-4 py-3", children: [
-        item.installed && item.provider_id ? /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            variant: "primary",
-            onClick: () => navigate(`/settings/integrations/${item.provider_id}`),
-            children: t("integration.browse.settings")
-          }
-        ) : /* @__PURE__ */ jsxs(Button, { size: "small", variant: "secondary", onClick: () => setInstallItem(item), children: [
-          /* @__PURE__ */ jsx(Plus, {}),
-          t("integration.browse.add")
-        ] }),
-        /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t(`integration.categories.${item.category}`) })
-      ] })
-    ] }, item.integrationId)) }),
-    /* @__PURE__ */ jsx(Container, { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs("a", { href: PUBLISH_URL, target: "_blank", rel: "noreferrer", className: "text-ui-fg-base txt-small", children: [
-      t("integration.browse.learnMore"),
-      " →"
+      /* @__PURE__ */ jsx(Row, { label: t("integration.labels.category"), children: /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: t(`integration.categories.${descriptor.category}`) }) })
     ] }) }),
-    /* @__PURE__ */ jsx(InstallModal, { item: installItem, onOpenChange: (open) => !open && setInstallItem(null) })
+    mainSections.map(renderSection),
+    editing && /* @__PURE__ */ jsx(
+      EditSectionDrawer,
+      {
+        open: true,
+        onOpenChange: (open) => !open && setEditingSection(null),
+        providerId: provider_id,
+        section: editing,
+        values: record?.values ?? {},
+        configuredSecrets: record?.configured_secrets ?? []
+      },
+      editing.id
+    )
   ] });
+  const side = /* @__PURE__ */ jsx(Fragment, { children: sideSections.map(renderSection) });
+  return /* @__PURE__ */ jsx(
+    LayoutComposer,
+    {
+      widgetsZonePrefix: `gorgo.integration.${descriptor.identifier}`,
+      preferredLayoutId: descriptor.preferredLayoutId,
+      sections: { main, side },
+      data: sectionData,
+      hasOutlet: false
+    }
+  );
 };
-const BrowseBreadcrumb = () => {
+const IntegrationBreadcrumb = ({ params }) => {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx(Fragment, { children: t("integration.browse.title") });
+  const providerId = params.provider_id;
+  const { data } = useQuery({
+    queryKey: ["integration", providerId],
+    queryFn: () => sdk.client.fetch(`/admin/integrations/${providerId}`),
+    enabled: !!providerId
+  });
+  const descriptor = data?.descriptor;
+  if (!descriptor) return /* @__PURE__ */ jsx(Fragment, {});
+  const name = t(descriptor.displayName);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    name + " ",
+    /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: providerId })
+  ] });
 };
 const handle = {
-  breadcrumb: () => /* @__PURE__ */ jsx(BrowseBreadcrumb, {})
+  breadcrumb: ({ params }) => /* @__PURE__ */ jsx(IntegrationBreadcrumb, { params })
 };
 const integration$w = { "list": { "title": "التكاملات", "subtitle": "إدارة إعدادات التكاملات", "browseIntegrations": "تصفح التكاملات", "learnMore": "تعرّف على كيفية إنشاء التكاملات", "searchPlaceholder": "البحث في التكاملات", "empty": "لا توجد تكاملات مسجلة. عرّف المزودين ضمن options.providers الخاصة بإضافة التكاملات في medusa-config.", "emptyFiltered": "لا توجد تكاملات مطابقة لعوامل التصفية.", "tested": "تم الاختبار", "testFailed": "فشل الاختبار", "tabs": { "all": "الكل" } }, "browse": { "title": "التصفح", "subtitle": "ابحث عن التكاملات المتاحة", "publish": "إضافة تكامل", "learnMore": "تعرّف على كيفية إنشاء ونشر تكاملك الخاص", "searchPlaceholder": "البحث في التكاملات", "by": "بواسطة {{author}}", "installed": "مثبَّت", "notInstalled": "غير مثبَّت", "add": "إضافة", "settings": "الإعدادات", "install_docs": "قراءة التوثيق", "install_empty": "تعليمات الإعداد لهذا التكامل غير متوفرة بعد.", "install_truncated": "هذه التعليمات أطول من أن تُعرض هنا — افتح التوثيق." }, "columns": { "integration": "التكامل", "description": "الوصف", "category": "الفئة", "status": "الحالة" }, "status": { "notConfigured": "غير مُهيّأ", "incomplete": "غير مكتمل", "enabled": "ممكّن", "disabled": "معطل", "configured": "مُهيّأ", "connected": "متصل", "connectionFailed": "فشل الاتصال" }, "meta": { "version": "v{{version}}", "authorPrefix": "بواسطة" }, "labels": { "category": "الفئة" }, "categories": { "payment": "الدفع", "notification": "الإشعارات", "fulfillment": "التنفيذ", "search": "البحث", "content": "المحتوى", "analytics": "التحليلات", "authentication": "المصادقة", "erp": "ERP", "crm": "CRM", "pim": "PIM", "marketplace": "الأسواق", "feed": "الخلاصات", "file_providers": "مزودو الملفات", "other": "أخرى" }, "actions": { "test": "اختبار الاتصال", "enable": "تمكين", "disable": "تعطيل", "delete": "حذف", "edit": "تحرير", "save": "حفظ", "cancel": "إلغاء" }, "delete": { "title": "حذف التهيئة", "description": "هل تريد إزالة التهيئة المحفوظة لـ {{name}}؟ لا يمكن التراجع عن هذا الإجراء." }, "form": { "required": "{{field}} مطلوب", "invalidJson": "JSON غير صالح", "keepSecret": "•••••• – اتركه فارغًا للإبقاء عليه", "items": "{{count}} عناصر" }, "toast": { "saved": "تم الحفظ", "saveFailed": "فشل الحفظ", "connectionOk": "الاتصال ناجح", "testFailed": "فشل الاختبار", "enabled": "تم التمكين", "disabled": "تم التعطيل", "deleted": "تم حذف التهيئة", "deleteFailed": "فشل الحذف", "updateFailed": "فشل التحديث" }, "unknown": 'تكامل غير معروف "{{id}}".', "back": "العودة إلى التكاملات" };
 const ar = {
@@ -3423,13 +3423,13 @@ const routeModule = {
       handle: { label: config.label, translationNs: config.translationNs, ...handle$2 }
     },
     {
-      Component: EditPage,
-      path: "/settings/integrations/:provider_id",
+      Component: BrowsePage,
+      path: "/settings/integrations/browse",
       handle: handle$1
     },
     {
-      Component: BrowsePage,
-      path: "/settings/integrations/browse",
+      Component: EditPage,
+      path: "/settings/integrations/:provider_id",
       handle
     }
   ]