@veltrixsecops/app-sdk 3.1.0 → 3.5.0

package/dist/connections/index.cjs

@@ -0,0 +1,1787 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/connections/index.tsx
+var connections_exports = {};
+__export(connections_exports, {
+  ConnectionsManager: () => ConnectionsManager,
+  default: () => connections_default
+});
+module.exports = __toCommonJS(connections_exports);
+var import_react = require("react");
+
+// src/client/inventory.ts
+var INVENTORY_API = "/api/components";
+async function inventoryError(res) {
+  const text = await res.text().catch(() => "");
+  if (text) {
+    try {
+      const body = JSON.parse(text);
+      const message = body?.error ?? body?.message;
+      if (message) return new Error(message);
+    } catch {
+    }
+    return new Error(text);
+  }
+  return new Error(`HTTP ${res.status}`);
+}
+function toInventoryItem(raw) {
+  return {
+    id: String(raw.id),
+    hostname: raw.hostname ?? "",
+    port: raw.port ?? void 0,
+    webPort: raw.webPort ?? null,
+    sshUser: raw.sshUser ?? null,
+    splunkHome: raw.splunkHome ?? null,
+    type: Array.isArray(raw.type) ? raw.type : void 0,
+    domains: Array.isArray(raw.domains) ? raw.domains : [],
+    ipRanges: Array.isArray(raw.ipRanges) ? raw.ipRanges : [],
+    tags: Array.isArray(raw.tags) ? raw.tags.map((tag) => ({ id: String(tag.id), name: String(tag.name) })) : [],
+    connectivityProviderId: raw.connectivityProviderId ?? null,
+    credentialId: raw.credentialId ?? null
+  };
+}
+async function resolveTool(name) {
+  const res = await authFetch(`/api/tools?search=${encodeURIComponent(name)}&limit=100`);
+  if (!res.ok) throw await inventoryError(res);
+  const body = await res.json();
+  const tools = Array.isArray(body) ? body : Array.isArray(body?.data) ? body.data : [];
+  return tools.find((tool) => tool.name === name) ?? null;
+}
+async function listInventory() {
+  const res = await authFetch(INVENTORY_API);
+  if (!res.ok) throw await inventoryError(res);
+  const data = await res.json();
+  return Array.isArray(data) ? data.map(toInventoryItem) : [];
+}
+async function addInventoryItem(input) {
+  const res = await authFetch(INVENTORY_API, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(input)
+  });
+  if (!res.ok) throw await inventoryError(res);
+  return toInventoryItem(await res.json());
+}
+async function updateInventoryItem(id, input) {
+  const res = await authFetch(`${INVENTORY_API}/${encodeURIComponent(id)}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(input)
+  });
+  if (!res.ok) throw await inventoryError(res);
+  return toInventoryItem(await res.json());
+}
+
+// src/client/environments.ts
+var ENVIRONMENTS_API = "/api/environments";
+async function environmentError(res) {
+  const text = await res.text().catch(() => "");
+  if (text) {
+    try {
+      const body = JSON.parse(text);
+      const message = body?.error ?? body?.message;
+      if (message) return new Error(message);
+    } catch {
+    }
+    return new Error(text);
+  }
+  return new Error(`HTTP ${res.status}`);
+}
+async function listEnvironments() {
+  const res = await authFetch(ENVIRONMENTS_API);
+  if (!res.ok) throw await environmentError(res);
+  const body = await res.json();
+  const rows = Array.isArray(body) ? body : Array.isArray(body?.data) ? body.data : [];
+  return rows.map((env) => ({
+    id: String(env.id),
+    name: env.name ?? "",
+    environmentTypes: Array.isArray(env.environmentTypes) ? env.environmentTypes : []
+  }));
+}
+
+// src/client/credentials.ts
+var CREDENTIALS_API = "/api/credentials";
+async function credentialError(res) {
+  const text = await res.text().catch(() => "");
+  if (text) {
+    try {
+      const body = JSON.parse(text);
+      const message = body?.error ?? body?.message;
+      if (message) return new Error(message);
+    } catch {
+    }
+    return new Error(text);
+  }
+  return new Error(`HTTP ${res.status}`);
+}
+function toCredentialSummary(raw) {
+  const hasSecret = Boolean(
+    raw.hasApiToken || raw.hasPassword || raw.apiToken && raw.apiToken.length > 0 || raw.password && raw.password.length > 0
+  );
+  return {
+    id: String(raw.id),
+    name: raw.name ?? "",
+    username: raw.username ?? "",
+    type: raw.type ?? null,
+    endpoint: raw.endpoint ?? null,
+    environmentType: raw.environmentType ?? null,
+    toolId: raw.toolId ?? "",
+    hasSecret,
+    tags: Array.isArray(raw.tags) ? raw.tags.map((t) => ({ id: String(t.id), name: String(t.name) })) : []
+  };
+}
+async function listCredentials(toolId) {
+  const res = await authFetch(`/api/tools/${encodeURIComponent(toolId)}/credentials`);
+  if (!res.ok) throw await credentialError(res);
+  const data = await res.json();
+  const rows = Array.isArray(data) ? data : Array.isArray(data?.data) ? data.data : [];
+  return rows.map(toCredentialSummary);
+}
+async function createCredential(input) {
+  const res = await authFetch(CREDENTIALS_API, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      name: input.name,
+      username: input.username,
+      password: input.password ?? "",
+      apiToken: input.apiToken,
+      type: input.type,
+      endpoint: input.endpoint,
+      environmentType: input.environmentType ?? null,
+      toolId: input.toolId,
+      tagIds: input.tagIds ?? []
+    })
+  });
+  if (!res.ok) throw await credentialError(res);
+  const body = await res.json();
+  return { id: String(body.id) };
+}
+async function updateCredential(id, input) {
+  const body = {};
+  if (input.name !== void 0) body.name = input.name;
+  if (input.username !== void 0) body.username = input.username;
+  if (input.password !== void 0) body.password = input.password;
+  if (input.apiToken !== void 0) body.apiToken = input.apiToken;
+  if (input.type !== void 0) body.type = input.type;
+  if (input.endpoint !== void 0) body.endpoint = input.endpoint;
+  if (input.environmentType !== void 0) body.environmentType = input.environmentType;
+  if (input.tagIds !== void 0) body.tagIds = input.tagIds;
+  const res = await authFetch(`${CREDENTIALS_API}/${encodeURIComponent(id)}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body)
+  });
+  if (!res.ok) throw await credentialError(res);
+  const result = await res.json().catch(() => ({}));
+  return { id: result.id ? String(result.id) : id };
+}
+async function removeCredential(id) {
+  const res = await authFetch(`${CREDENTIALS_API}/${encodeURIComponent(id)}`, {
+    method: "DELETE"
+  });
+  if (!res.ok && res.status !== 204) throw await credentialError(res);
+}
+async function testConnection(appId, credentialId, opts = {}) {
+  const endpoint = typeof opts.endpoint === "string" ? opts.endpoint.trim() : "";
+  const res = await authFetch(
+    `/api/apps/${encodeURIComponent(appId)}/connections/${encodeURIComponent(credentialId)}/test`,
+    endpoint ? { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ endpoint }) } : { method: "POST" }
+  );
+  if (!res.ok) {
+    const err = await credentialError(res);
+    return { ok: false, message: err.message };
+  }
+  return await res.json();
+}
+
+// src/client/onboarding.ts
+async function onboardingError(res) {
+  const text = await res.text().catch(() => "");
+  if (text) {
+    try {
+      const body = JSON.parse(text);
+      const message = body?.error ?? body?.message;
+      if (message) return new Error(message);
+    } catch {
+    }
+    return new Error(text);
+  }
+  return new Error(`HTTP ${res.status}`);
+}
+async function fetchAppOnboarding(appId) {
+  try {
+    const res = await authFetch("/api/apps/enabled", { method: "GET" });
+    if (!res.ok) return null;
+    const data = await res.json();
+    const list = Array.isArray(data) ? data : data?.data ?? [];
+    const app = list.find(
+      (a) => a.appId === appId || a.id === appId
+    );
+    return app?.connection?.onboarding ?? null;
+  } catch {
+    return null;
+  }
+}
+async function startOnboarding(appId, input) {
+  const res = await authFetch(
+    `/api/apps/${encodeURIComponent(appId)}/connections/onboard/start`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        environmentId: input.environmentId,
+        connectionName: input.connectionName,
+        settings: input.settings ?? {}
+      })
+    }
+  );
+  if (!res.ok) throw await onboardingError(res);
+  return await res.json();
+}
+
+// src/client/index.ts
+var HOST_RUNTIME_GLOBAL = "__VELTRIX_APP_RUNTIME__";
+function getHostRuntime() {
+  const runtime = globalThis[HOST_RUNTIME_GLOBAL];
+  return runtime ?? null;
+}
+function authFetch(input, init) {
+  const runtime = getHostRuntime();
+  if (runtime) return runtime.authFetch(input, init);
+  return fetch(input, init);
+}
+
+// src/ui/index.tsx
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function getHostUi(name) {
+  return getHostRuntime()?.ui?.[name];
+}
+var fallbackNote = { fontFamily: "inherit" };
+var Button = React.forwardRef((props, ref) => {
+  const HostButton = getHostUi("Button");
+  if (HostButton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostButton, { ref, ...props });
+  const {
+    variant: _variant,
+    size: _size,
+    isLoading,
+    loadingText,
+    fullWidth,
+    leftIcon,
+    rightIcon,
+    children,
+    disabled,
+    type,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      disabled: disabled || isLoading,
+      "aria-busy": isLoading || void 0,
+      style: {
+        ...fallbackNote,
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "6px 14px",
+        borderRadius: 6,
+        border: "1px solid currentColor",
+        background: "transparent",
+        cursor: disabled || isLoading ? "not-allowed" : "pointer",
+        width: fullWidth ? "100%" : void 0,
+        opacity: disabled || isLoading ? 0.6 : 1,
+        justifyContent: "center",
+        ...style
+      },
+      ...rest,
+      children: [
+        leftIcon,
+        isLoading ? loadingText ?? children : children,
+        rightIcon
+      ]
+    }
+  );
+});
+Button.displayName = "Button";
+var BADGE_FALLBACK_COLORS = {
+  default: "#6b7280",
+  primary: "#4f46e5",
+  secondary: "#6b7280",
+  success: "#16a34a",
+  danger: "#dc2626",
+  warning: "#d97706",
+  info: "#0284c7"
+};
+var Badge = ({ variant = "default", size = "md", rounded, dot, children, style, ...rest }) => {
+  const HostBadge = getHostUi("Badge");
+  if (HostBadge) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostBadge, { variant, size, rounded, dot, style, ...rest, children });
+  const color = BADGE_FALLBACK_COLORS[variant];
+  const fontSize = size === "sm" ? 11 : size === "lg" ? 14 : 12;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      style: {
+        ...fallbackNote,
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        padding: size === "sm" ? "1px 6px" : size === "lg" ? "3px 10px" : "2px 8px",
+        borderRadius: rounded ? 999 : 4,
+        border: `1px solid ${color}`,
+        color,
+        fontSize,
+        fontWeight: 500,
+        ...style
+      },
+      ...rest,
+      children: [
+        dot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { width: 6, height: 6, borderRadius: "50%", background: color } }),
+        children
+      ]
+    }
+  );
+};
+Badge.displayName = "Badge";
+var Card = ({ children, style, ...rest }) => {
+  const HostCard = getHostUi("Card");
+  if (HostCard) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostCard, { style, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...fallbackNote, border: "1px solid #d1d5db", borderRadius: 8, overflow: "hidden", ...style }, ...rest, children });
+};
+Card.displayName = "Card";
+var CardHeader = ({ actions, children, style, ...rest }) => {
+  const HostCardHeader = getHostUi("CardHeader");
+  if (HostCardHeader) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostCardHeader, { actions, style, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        ...fallbackNote,
+        padding: "12px 16px",
+        borderBottom: "1px solid #d1d5db",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, minWidth: 0 }, children }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: actions })
+      ]
+    }
+  );
+};
+CardHeader.displayName = "CardHeader";
+var CardBody = ({ children, style, ...rest }) => {
+  const HostCardBody = getHostUi("CardBody");
+  if (HostCardBody) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostCardBody, { style, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...fallbackNote, padding: "12px 16px", ...style }, ...rest, children });
+};
+CardBody.displayName = "CardBody";
+var CardFooter = ({ children, style, ...rest }) => {
+  const HostCardFooter = getHostUi("CardFooter");
+  if (HostCardFooter) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostCardFooter, { style, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...fallbackNote, padding: "12px 16px", borderTop: "1px solid #d1d5db", ...style }, ...rest, children });
+};
+CardFooter.displayName = "CardFooter";
+var Input = React.forwardRef((props, ref) => {
+  const HostInput = getHostUi("Input");
+  if (HostInput) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostInput, { ref, ...props });
+  const { label, error, helperText, leftIcon, rightIcon, fullWidth = true, id, style, ...rest } = props;
+  const inputId = id ?? (label ? `vx-input-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...fallbackNote, width: fullWidth ? "100%" : void 0 }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: inputId, style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4 }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+      leftIcon,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          ref,
+          id: inputId,
+          "aria-invalid": !!error || void 0,
+          style: { flex: 1, padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af", ...style },
+          ...rest
+        }
+      ),
+      rightIcon
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: helperText })
+  ] });
+});
+Input.displayName = "Input";
+var Textarea = React.forwardRef((props, ref) => {
+  const HostTextarea = getHostUi("Textarea");
+  if (HostTextarea) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostTextarea, { ref, ...props });
+  const { label, error, helperText, fullWidth = true, id, rows = 4, style, ...rest } = props;
+  const textareaId = id ?? (label ? `vx-textarea-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...fallbackNote, width: fullWidth ? "100%" : void 0 }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: textareaId, style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4 }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
+      {
+        ref,
+        id: textareaId,
+        rows,
+        "aria-invalid": !!error || void 0,
+        style: { width: "100%", padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af", ...style },
+        ...rest
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: helperText })
+  ] });
+});
+Textarea.displayName = "Textarea";
+var Checkbox = React.forwardRef((props, ref) => {
+  const HostCheckbox = getHostUi("Checkbox");
+  if (HostCheckbox) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostCheckbox, { ref, ...props });
+  const { label, error, helperText, id, disabled, ...rest } = props;
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fallbackNote, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref, id: inputId, type: "checkbox", disabled, "aria-invalid": !!error || void 0, ...rest }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: inputId, style: { fontSize: 13, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.6 : 1 }, children: label })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: helperText })
+  ] });
+});
+Checkbox.displayName = "Checkbox";
+var Select = (props) => {
+  const HostSelect = getHostUi("Select");
+  if (HostSelect) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSelect, { ...props });
+  const { options, value, onChange, placeholder = "Select\u2026", label, error, helperText, disabled, fullWidth = true, id, name, className } = props;
+  const selectId = id ?? (label ? `vx-select-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { ...fallbackNote, width: fullWidth ? "100%" : void 0 }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: selectId, style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4 }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "select",
+      {
+        id: selectId,
+        name,
+        "aria-label": props["aria-label"],
+        "aria-invalid": !!error || void 0,
+        disabled,
+        value: value ?? "",
+        onChange: (event) => onChange?.(event.target.value),
+        style: { width: "100%", padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" },
+        children: [
+          placeholder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", disabled: true, children: placeholder }),
+          options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: helperText })
+  ] });
+};
+Select.displayName = "Select";
+var SearchBox = (props) => {
+  const HostSearchBox = getHostUi("SearchBox");
+  if (HostSearchBox) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSearchBox, { ...props });
+  const { value, onChange, placeholder, disabled, className, "aria-label": ariaLabel } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      type: "search",
+      value,
+      onChange: (event) => onChange(event.target.value),
+      placeholder,
+      disabled,
+      "aria-label": ariaLabel ?? placeholder ?? "Search",
+      className,
+      style: { ...fallbackNote, width: "100%", padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" }
+    }
+  );
+};
+SearchBox.displayName = "SearchBox";
+var Pagination = (props) => {
+  const HostPagination = getHostUi("Pagination");
+  if (HostPagination) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostPagination, { ...props });
+  const { page, pageSize, totalItems, onPageChange, disabled, className } = props;
+  const pageCount = Math.max(1, Math.ceil(totalItems / pageSize));
+  const canGoPrev = !disabled && page > 1;
+  const canGoNext = !disabled && page < pageCount;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("nav", { "aria-label": "Pagination", className, style: { ...fallbackNote, display: "flex", alignItems: "center", gap: 12 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => onPageChange(page - 1), disabled: !canGoPrev, style: { padding: "4px 10px" }, children: "Prev" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+      "page ",
+      page,
+      " of ",
+      pageCount
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => onPageChange(page + 1), disabled: !canGoNext, style: { padding: "4px 10px" }, children: "Next" })
+  ] });
+};
+Pagination.displayName = "Pagination";
+var FilterBar = (props) => {
+  const HostFilterBar = getHostUi("FilterBar");
+  if (HostFilterBar) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostFilterBar, { ...props });
+  const { filters, search, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { ...fallbackNote, display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }, children: [
+    search && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "search",
+        "aria-label": search.placeholder ?? "Search",
+        placeholder: search.placeholder,
+        value: search.value,
+        onChange: (event) => search.onChange(event.target.value),
+        style: { padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" }
+      }
+    ),
+    filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { display: "flex", flexDirection: "column", fontSize: 12 }, children: [
+      filter.label,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "select",
+        {
+          "aria-label": filter.label,
+          value: filter.value ?? "",
+          onChange: (event) => filter.onChange(event.target.value === "" ? null : event.target.value),
+          style: { padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: filter.label }),
+            filter.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, children: option.label }, option.value))
+          ]
+        }
+      )
+    ] }, filter.key))
+  ] });
+};
+FilterBar.displayName = "FilterBar";
+var SortSelect = (props) => {
+  const HostSortSelect = getHostUi("SortSelect");
+  if (HostSortSelect) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSortSelect, { ...props });
+  const { options, value, direction, onChange, disabled, className } = props;
+  const directionLabel = direction === "asc" ? "Sort ascending" : "Sort descending";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { ...fallbackNote, display: "flex", alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "select",
+      {
+        "aria-label": "Sort by",
+        value,
+        disabled,
+        onChange: (event) => onChange(event.target.value, direction),
+        style: { padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" },
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => onChange(value, direction === "asc" ? "desc" : "asc"),
+        "aria-label": directionLabel,
+        style: { padding: "4px 10px" },
+        children: direction === "asc" ? "\u2191" : "\u2193"
+      }
+    )
+  ] });
+};
+SortSelect.displayName = "SortSelect";
+var FormField = (props) => {
+  const HostFormField = getHostUi("FormField");
+  if (HostFormField) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostFormField, { ...props });
+  const { label, htmlFor, error, hint, required, className, children } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: fallbackNote, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor, style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4 }, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { color: "#dc2626", marginLeft: 2 }, children: "*" })
+    ] }),
+    children,
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: hint })
+  ] });
+};
+FormField.displayName = "FormField";
+var Tabs = (props) => {
+  const HostTabs = getHostUi("Tabs");
+  if (HostTabs) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostTabs, { ...props });
+  const { tabs, defaultActiveIndex = 0, activeIndex, onTabChange, children, className } = props;
+  const [internalIndex, setInternalIndex] = React.useState(defaultActiveIndex);
+  const isControlled = activeIndex !== void 0;
+  const currentIndex = isControlled ? activeIndex : internalIndex;
+  const activeTab = tabs[currentIndex];
+  const selectTab = (index) => {
+    if (tabs[index]?.disabled) return;
+    if (!isControlled) setInternalIndex(index);
+    onTabChange?.(index);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: fallbackNote, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "tablist", style: { display: "flex", gap: 4, borderBottom: "1px solid #d1d5db" }, children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": index === currentIndex,
+        disabled: tab.disabled,
+        onClick: () => selectTab(index),
+        style: {
+          padding: "6px 12px",
+          border: "none",
+          borderBottom: index === currentIndex ? "2px solid currentColor" : "2px solid transparent",
+          background: "transparent",
+          cursor: tab.disabled ? "not-allowed" : "pointer",
+          fontWeight: index === currentIndex ? 600 : 400,
+          opacity: tab.disabled ? 0.5 : 1
+        },
+        children: tab.label
+      },
+      tab.key ?? index
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "tabpanel", style: { padding: 12 }, children: children || activeTab?.content })
+  ] });
+};
+Tabs.displayName = "Tabs";
+var EmptyState = (props) => {
+  const HostEmptyState = getHostUi("EmptyState");
+  if (HostEmptyState) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostEmptyState, { ...props });
+  const { icon, title, description, action, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { ...fallbackNote, textAlign: "center", padding: "32px 16px" }, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 12 }, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontWeight: 600, marginBottom: description ? 4 : 0 }, children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 13, color: "#6b7280", marginBottom: action ? 12 : 0 }, children: description }),
+    action
+  ] });
+};
+EmptyState.displayName = "EmptyState";
+var skeletonRadius = { text: 4, circular: "50%", rectangular: 8 };
+var Skeleton = (props) => {
+  const HostSkeleton = getHostUi("Skeleton");
+  if (HostSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSkeleton, { ...props });
+  const { variant = "text", width, height, style, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        background: "#e5e7eb",
+        borderRadius: skeletonRadius[variant],
+        width: width ?? (variant === "text" ? "100%" : void 0),
+        height: height ?? (variant === "text" ? 14 : void 0),
+        ...style
+      },
+      ...rest
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
+var SkeletonText = (props) => {
+  const HostSkeletonText = getHostUi("SkeletonText");
+  if (HostSkeletonText) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSkeletonText, { ...props });
+  const { lines = 3, width = "100%", lastLineWidth = "80%", className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: { display: "flex", flexDirection: "column", gap: 8 }, children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { variant: "text", width: index === lines - 1 ? lastLineWidth : width }, index)) });
+};
+SkeletonText.displayName = "SkeletonText";
+var SkeletonCard = (props) => {
+  const HostSkeletonCard = getHostUi("SkeletonCard");
+  if (HostSkeletonCard) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSkeletonCard, { ...props });
+  const { hasAvatar, hasActions, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 12 }, children: [
+      hasAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { variant: "circular", width: 40, height: 40 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { variant: "text", width: "60%" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonText, { lines: 2 }) })
+      ] })
+    ] }),
+    hasActions && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { variant: "rectangular", width: 72, height: 30 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { variant: "rectangular", width: 72, height: 30 })
+    ] })
+  ] });
+};
+SkeletonCard.displayName = "SkeletonCard";
+var Tooltip = (props) => {
+  const HostTooltip = getHostUi("Tooltip");
+  if (HostTooltip) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostTooltip, { ...props });
+  const { content, disabled, className, children } = props;
+  const titleText = typeof content === "string" ? content : void 0;
+  if (disabled || !titleText) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className, title: titleText, style: { display: "inline-flex" }, children });
+};
+Tooltip.displayName = "Tooltip";
+var spinnerDiameter = { sm: 16, md: 24, lg: 32 };
+var Spinner = (props) => {
+  const HostSpinner = getHostUi("Spinner");
+  if (HostSpinner) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSpinner, { ...props });
+  const { size = "md", className, label } = props;
+  const diameter = spinnerDiameter[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, role: "status", "aria-live": "polite", style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        "aria-hidden": "true",
+        style: {
+          width: diameter,
+          height: diameter,
+          borderRadius: "50%",
+          border: "2px solid currentColor",
+          borderTopColor: "transparent",
+          animation: "vx-sdk-spin 0.8s linear infinite"
+        }
+      }
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 8, fontSize: 12, color: "#6b7280" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: label || "Loading" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: "@keyframes vx-sdk-spin { to { transform: rotate(360deg) } }" })
+  ] });
+};
+Spinner.displayName = "Spinner";
+function FallbackDataTable(props) {
+  const { columns, data, rowKey, isLoading, emptyState, onRowClick, rowActions, className } = props;
+  const showEmpty = !isLoading && data.length === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: fallbackNote, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+      columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: { textAlign: column.align ?? "left", padding: "8px 10px", borderBottom: "1px solid #d1d5db" }, children: column.header }, column.key)),
+      rowActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: { padding: "8px 10px", borderBottom: "1px solid #d1d5db" } })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", { children: [
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: Math.max(columns.length + (rowActions ? 1 : 0), 1), style: { padding: "12px 10px" }, children: "Loading\u2026" }) }),
+      showEmpty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: Math.max(columns.length + (rowActions ? 1 : 0), 1), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyState, { title: emptyState?.title ?? "No data", description: emptyState?.description, icon: emptyState?.icon, action: emptyState?.action }) }) }),
+      !isLoading && !showEmpty && data.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "tr",
+        {
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          style: { cursor: onRowClick ? "pointer" : void 0, borderBottom: "1px solid #e5e7eb" },
+          children: [
+            columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { textAlign: column.align ?? "left", padding: "8px 10px" }, children: column.render ? column.render(row) : String(row[column.key] ?? "") }, column.key)),
+            rowActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { padding: "8px 10px" }, onClick: (event) => event.stopPropagation(), children: rowActions(row) })
+          ]
+        },
+        rowKey(row)
+      ))
+    ] })
+  ] }) });
+}
+function DataTable(props) {
+  const HostDataTable = getHostUi("DataTable");
+  if (HostDataTable) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostDataTable, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackDataTable, { ...props });
+}
+var DELTA_FALLBACK_COLOR = {
+  up: "#16a34a",
+  down: "#dc2626",
+  neutral: "#6b7280"
+};
+var StatsCard = (props) => {
+  const HostStatsCard = getHostUi("StatsCard");
+  if (HostStatsCard) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostStatsCard, { ...props });
+  const { label, value, icon, delta, isLoading, onClick, className } = props;
+  const isClickable = Boolean(onClick);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
+      onClick,
+      onKeyDown: isClickable ? (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onClick?.();
+        }
+      } : void 0,
+      className,
+      style: {
+        ...fallbackNote,
+        border: "1px solid #d1d5db",
+        borderRadius: 8,
+        padding: 16,
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: 12,
+        cursor: isClickable ? "pointer" : void 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 13, color: "#6b7280", margin: 0 }, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 28, fontWeight: 700, margin: "4px 0 0" }, children: isLoading ? "\u2026" : value }),
+          delta && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { fontSize: 13, color: DELTA_FALLBACK_COLOR[delta.direction], margin: "4px 0 0" }, children: [
+            delta.value,
+            " ",
+            delta.label
+          ] })
+        ] }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", children: icon })
+      ]
+    }
+  );
+};
+StatsCard.displayName = "StatsCard";
+var FORM_DIALOG_MAX_WIDTH = { sm: 420, md: 520, lg: 680 };
+var FormDialog = (props) => {
+  const HostFormDialog = getHostUi("FormDialog");
+  if (HostFormDialog) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostFormDialog, { ...props });
+  const {
+    isOpen,
+    onClose,
+    title,
+    description,
+    children,
+    onSubmit,
+    submitText = "Save",
+    cancelText = "Cancel",
+    isSubmitting = false,
+    error = null,
+    size = "md",
+    disableBackdropClose = false,
+    submitDisabled = false
+  } = props;
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && !isSubmitting) onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, isSubmitting, onClose]);
+  if (!isOpen) return null;
+  const requestClose = () => {
+    if (!isSubmitting) onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50 },
+      onClick: disableBackdropClose ? void 0 : requestClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": title,
+          style: { background: "white", color: "black", borderRadius: 8, width: "100%", maxWidth: FORM_DIALOG_MAX_WIDTH[size], maxHeight: "80vh", overflow: "auto", ...fallbackNote },
+          onClick: (event) => event.stopPropagation(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "form",
+            {
+              onSubmit: (event) => {
+                event.preventDefault();
+                void onSubmit();
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, borderBottom: "1px solid #d1d5db" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { margin: 0, fontSize: 16, fontWeight: 600 }, children: title }),
+                  description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "4px 0 0", fontSize: 13, color: "#6b7280" }, children: description })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, display: "flex", flexDirection: "column", gap: 12 }, children: [
+                  error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { margin: 0, fontSize: 13, color: "#dc2626" }, children: error }),
+                  children
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, borderTop: "1px solid #d1d5db", display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { type: "button", variant: "secondary", onClick: requestClose, disabled: isSubmitting, children: cancelText }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { type: "submit", variant: "primary", isLoading: isSubmitting, disabled: submitDisabled, children: submitText })
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+FormDialog.displayName = "FormDialog";
+var MODAL_MAX_WIDTH = { sm: 420, md: 520, lg: 680, xl: 896 };
+var Modal = (props) => {
+  const HostModal = getHostUi("Modal");
+  if (HostModal) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostModal, { ...props });
+  const {
+    isOpen,
+    onClose,
+    title,
+    subtitle,
+    children,
+    footer,
+    size = "md",
+    disableBackdropClose = false,
+    disableEscapeClose = false,
+    hideCloseButton = false,
+    closeLabel = "Close",
+    className
+  } = props;
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && !disableEscapeClose) onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, disableEscapeClose, onClose]);
+  if (!isOpen) return null;
+  const hasHeader = title != null || subtitle != null || !hideCloseButton;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50 },
+      onClick: disableBackdropClose ? void 0 : onClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          style: { background: "white", color: "black", borderRadius: 8, width: "100%", maxWidth: MODAL_MAX_WIDTH[size], maxHeight: "80vh", overflow: "auto", ...fallbackNote },
+          className,
+          onClick: (event) => event.stopPropagation(),
+          children: [
+            hasHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, borderBottom: "1px solid #d1d5db", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 0 }, children: [
+                title != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { margin: 0, fontSize: 16, fontWeight: 600 }, children: title }),
+                subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "4px 0 0", fontSize: 13, color: "#6b7280" }, children: subtitle })
+              ] }),
+              !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: onClose, "aria-label": closeLabel, style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, lineHeight: 1 }, children: "\xD7" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 16, display: "flex", flexDirection: "column", gap: 12 }, children }),
+            footer != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 16, borderTop: "1px solid #d1d5db", display: "flex", justifyContent: "flex-end", gap: 8 }, children: footer })
+          ]
+        }
+      )
+    }
+  );
+};
+Modal.displayName = "Modal";
+var ALERT_FALLBACK_COLORS = {
+  info: { bg: "#eff6ff", fg: "#1e40af", border: "#93c5fd" },
+  success: { bg: "#ecfdf5", fg: "#065f46", border: "#6ee7b7" },
+  warning: { bg: "#fffbeb", fg: "#92400e", border: "#fcd34d" },
+  danger: { bg: "#fef2f2", fg: "#991b1b", border: "#fca5a5" }
+};
+var Alert = (props) => {
+  const HostAlert = getHostUi("Alert");
+  if (HostAlert) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostAlert, { ...props });
+  const { variant = "info", title, children, icon, onDismiss, action, className } = props;
+  const c = ALERT_FALLBACK_COLORS[variant];
+  const role = variant === "danger" || variant === "warning" ? "alert" : "status";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role,
+      className,
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 10,
+        border: `1px solid ${c.border}`,
+        background: c.bg,
+        color: c.fg,
+        borderRadius: 8,
+        padding: "12px 16px",
+        ...fallbackNote
+      },
+      children: [
+        icon !== false && icon != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flexShrink: 0 }, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 0, flex: 1 }, children: [
+          title != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontSize: 14, fontWeight: 600 }, children: title }),
+          children != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 14, marginTop: title != null ? 2 : 0 }, children })
+        ] }),
+        action != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flexShrink: 0 }, children: action }),
+        onDismiss && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            "aria-label": "Dismiss",
+            style: { flexShrink: 0, background: "none", border: "none", cursor: "pointer", color: "inherit", opacity: 0.7 },
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+Alert.displayName = "Alert";
+var MultiSelect = (props) => {
+  const HostMultiSelect = getHostUi("MultiSelect");
+  if (HostMultiSelect) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostMultiSelect, { ...props });
+  const { options, value = [], onChange, label, disabled, fullWidth = true, name } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { ...fallbackNote, display: "block", width: fullWidth ? "100%" : void 0 }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "block", marginBottom: 4, fontSize: 14, fontWeight: 500 }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "select",
+      {
+        multiple: true,
+        name,
+        disabled,
+        value,
+        "aria-label": props["aria-label"],
+        onChange: (e) => onChange?.(Array.from(e.target.selectedOptions, (o) => o.value)),
+        style: { width: "100%", minHeight: 96, padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" },
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+      }
+    )
+  ] });
+};
+MultiSelect.displayName = "MultiSelect";
+var fallbackConfirmationContext = {
+  confirm: (options) => {
+    console.warn(
+      `[@veltrixsecops/app-sdk/ui] ConfirmationDialog is only available inside the Veltrix platform \u2014 "${options.title}" auto-resolved to "not confirmed" (fail closed).`
+    );
+    return Promise.resolve(false);
+  }
+};
+function useConfirmDialog() {
+  const hostUseConfirmDialog = getHostUi("useConfirmDialog");
+  if (hostUseConfirmDialog) return hostUseConfirmDialog();
+  return fallbackConfirmationContext;
+}
+
+// src/connections/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var BLANK_FORM = {
+  name: "",
+  environmentId: "",
+  environmentType: "",
+  authType: "password",
+  username: "",
+  secret: "",
+  endpoint: ""
+};
+var ENV_TYPE_LABELS = {
+  production: "Production",
+  "pre-production": "Pre-production",
+  staging: "Staging",
+  qa: "QA",
+  uat: "UAT",
+  development: "Development",
+  testing: "Testing",
+  sandbox: "Sandbox",
+  dr: "DR (Disaster Recovery)",
+  demo: "Demo",
+  other: "Other"
+};
+var envTypeLabel = (t) => ENV_TYPE_LABELS[t] ?? t;
+function toCredentialType(authType) {
+  return authType === "token" ? "TOKEN" : "PASSWORD";
+}
+function hostFromEndpoint(endpoint) {
+  const trimmed = (endpoint || "").trim();
+  if (!trimmed) return "";
+  const withScheme = /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+  try {
+    return new URL(withScheme).host;
+  } catch {
+    return trimmed.replace(/^https?:\/\//i, "").replace(/[/?#].*$/, "");
+  }
+}
+function portFromEndpoint(endpoint) {
+  const trimmed = (endpoint || "").trim();
+  const withScheme = /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+  try {
+    const url = new URL(withScheme);
+    if (url.port) return url.port;
+    return url.protocol === "http:" ? "80" : "443";
+  } catch {
+    return "443";
+  }
+}
+async function ensureConnectionComponent(params) {
+  const hostname = hostFromEndpoint(params.endpoint);
+  if (!hostname) {
+    throw new Error("An endpoint is required to register a deploy target for this connection.");
+  }
+  const items = await listInventory();
+  const existing = items.find(
+    (c) => (c.type ?? []).includes(params.componentType) && (params.environmentId ? (c.tags ?? []).some((t) => t.id === params.environmentId) : true)
+  );
+  const input = {
+    hostname,
+    port: portFromEndpoint(params.endpoint),
+    type: [params.componentType],
+    toolId: params.toolId,
+    credentialId: params.credentialId,
+    tagIds: params.environmentId ? [params.environmentId] : []
+  };
+  if (existing) await updateInventoryItem(existing.id, input);
+  else await addInventoryItem(input);
+}
+function fromCredentialType(type) {
+  return type === "TOKEN" ? "token" : "password";
+}
+var ConnectionsManager = ({
+  appName,
+  appId,
+  title = "Connections",
+  namePlaceholder = "e.g. Production API",
+  endpointPlaceholder = "e.g. https://api.example.com",
+  endpointHelper = "API base URL / endpoint this connection reaches.",
+  usernameLabel = "Username",
+  tokenLabel = "API token",
+  tokenUsernamePlaceholder = "service account (optional)",
+  passwordUsernamePlaceholder = "e.g. svc_veltrix",
+  usernameOptionalForToken = true,
+  onboarding,
+  componentType
+}) => {
+  const { confirm } = useConfirmDialog();
+  const authTypes = (0, import_react.useMemo)(
+    () => [
+      { value: "password", label: "Username & password" },
+      { value: "token", label: tokenLabel }
+    ],
+    [tokenLabel]
+  );
+  const [connections, setConnections] = (0, import_react.useState)([]);
+  const [environments, setEnvironments] = (0, import_react.useState)([]);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const [search, setSearch] = (0, import_react.useState)("");
+  const [environmentFilter, setEnvironmentFilter] = (0, import_react.useState)(null);
+  const [authTypeFilter, setAuthTypeFilter] = (0, import_react.useState)(null);
+  const [sortField, setSortField] = (0, import_react.useState)("name");
+  const [sortDir, setSortDir] = (0, import_react.useState)("asc");
+  const [page, setPage] = (0, import_react.useState)(1);
+  const [pageSize, setPageSize] = (0, import_react.useState)(10);
+  const [dialogOpen, setDialogOpen] = (0, import_react.useState)(false);
+  const [editing, setEditing] = (0, import_react.useState)(null);
+  const [form, setForm] = (0, import_react.useState)(BLANK_FORM);
+  const [submitting, setSubmitting] = (0, import_react.useState)(false);
+  const [formError, setFormError] = (0, import_react.useState)(null);
+  const [tests, setTests] = (0, import_react.useState)({});
+  const [onboardOpen, setOnboardOpen] = (0, import_react.useState)(false);
+  const [onboardName, setOnboardName] = (0, import_react.useState)("");
+  const [onboardEnvironmentId, setOnboardEnvironmentId] = (0, import_react.useState)("");
+  const [onboardSettings, setOnboardSettings] = (0, import_react.useState)({});
+  const [onboardSubmitting, setOnboardSubmitting] = (0, import_react.useState)(false);
+  const [onboardError, setOnboardError] = (0, import_react.useState)(null);
+  const [notice, setNotice] = (0, import_react.useState)(null);
+  const [fetchedOnboarding, setFetchedOnboarding] = (0, import_react.useState)(null);
+  const effectiveOnboarding = onboarding ?? fetchedOnboarding;
+  const load = (0, import_react.useCallback)(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const tool = await resolveTool(appName);
+      const [creds, envs] = await Promise.all([
+        tool ? listCredentials(tool.id) : Promise.resolve([]),
+        listEnvironments()
+      ]);
+      setConnections(creds);
+      setEnvironments(envs);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [appName]);
+  (0, import_react.useEffect)(() => {
+    void load();
+  }, [load]);
+  (0, import_react.useEffect)(() => {
+    if (onboarding) return;
+    let cancelled = false;
+    void fetchAppOnboarding(appId).then((d) => {
+      if (cancelled || !d) return;
+      setFetchedOnboarding({
+        provider: d.provider,
+        label: d.label,
+        brokered: d.brokered ?? false,
+        requiredSettings: d.requiredSettings ?? []
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [appId, onboarding]);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const outcome = params.get("onboarded");
+    if (!outcome) return;
+    if (outcome === "ok") {
+      setNotice(
+        params.get("pending") === "manual" ? "Connection created. One manual step remains \u2014 see the connection to finish setup." : "Connection created successfully."
+      );
+    } else {
+      setError(`Onboarding failed: ${params.get("reason") || "unknown error"}`);
+    }
+    params.delete("onboarded");
+    params.delete("pending");
+    params.delete("reason");
+    params.delete("connectionId");
+    const qs = params.toString();
+    window.history.replaceState({}, "", `${window.location.pathname}${qs ? `?${qs}` : ""}`);
+  }, []);
+  const openOnboard = () => {
+    setOnboardName("");
+    setOnboardEnvironmentId("");
+    setOnboardSettings({});
+    setOnboardError(null);
+    setOnboardOpen(true);
+  };
+  const handleStartOnboarding = async () => {
+    if (!effectiveOnboarding) return;
+    const name = onboardName.trim();
+    if (!name) {
+      setOnboardError("Name is required");
+      return;
+    }
+    if (!onboardEnvironmentId) {
+      setOnboardError("Environment is required");
+      return;
+    }
+    const missing = effectiveOnboarding.requiredSettings.filter((k) => !onboardSettings[k]?.trim());
+    if (missing.length > 0) {
+      setOnboardError(`Please provide: ${missing.join(", ")}`);
+      return;
+    }
+    setOnboardSubmitting(true);
+    setOnboardError(null);
+    try {
+      const { authorizeUrl } = await startOnboarding(appId, {
+        environmentId: onboardEnvironmentId,
+        connectionName: name,
+        settings: onboardSettings
+      });
+      if (typeof window !== "undefined") window.location.assign(authorizeUrl);
+    } catch (e) {
+      setOnboardError(e.message);
+      setOnboardSubmitting(false);
+    }
+  };
+  const openCreate = () => {
+    setEditing(null);
+    setForm(BLANK_FORM);
+    setFormError(null);
+    setDialogOpen(true);
+  };
+  const openEdit = (row) => {
+    setEditing(row);
+    setForm({
+      name: row.name ?? "",
+      environmentId: row.tags?.[0]?.id ?? "",
+      environmentType: row.environmentType ?? "",
+      authType: fromCredentialType(row.type),
+      username: row.username ?? "",
+      secret: "",
+      endpoint: row.endpoint ?? ""
+    });
+    setFormError(null);
+    setDialogOpen(true);
+  };
+  const closeDialog = (0, import_react.useCallback)(() => {
+    if (submitting) return;
+    setDialogOpen(false);
+  }, [submitting]);
+  const setField = (key, value) => setForm((prev) => ({ ...prev, [key]: value }));
+  const handleSubmit = async () => {
+    const name = form.name.trim();
+    if (!name) {
+      setFormError("Name is required");
+      return;
+    }
+    if (!form.environmentId) {
+      setFormError("Environment is required");
+      return;
+    }
+    setSubmitting(true);
+    setFormError(null);
+    const secret = form.secret.trim();
+    const username = form.username.trim();
+    const endpoint = form.endpoint.trim();
+    const tagIds = [form.environmentId];
+    try {
+      let credentialId;
+      let toolId;
+      if (editing) {
+        const update = {
+          name,
+          username,
+          type: toCredentialType(form.authType),
+          endpoint,
+          environmentType: form.environmentType || null,
+          tagIds
+        };
+        if (secret) {
+          if (form.authType === "token") update.apiToken = secret;
+          else update.password = secret;
+        }
+        await updateCredential(editing.id, update);
+        credentialId = editing.id;
+      } else {
+        const tool = await resolveTool(appName);
+        if (!tool) {
+          throw new Error(
+            `No "${appName}" tool found for your organization \u2014 make sure the app is installed before adding connections.`
+          );
+        }
+        toolId = tool.id;
+        const created = await createCredential({
+          name,
+          username,
+          password: form.authType === "password" ? secret : "",
+          apiToken: form.authType === "token" ? secret : void 0,
+          type: toCredentialType(form.authType),
+          endpoint,
+          environmentType: form.environmentType || null,
+          toolId: tool.id,
+          tagIds
+        });
+        credentialId = created.id;
+      }
+      if (componentType) {
+        try {
+          if (!toolId) toolId = (await resolveTool(appName))?.id;
+          await ensureConnectionComponent({
+            componentType,
+            toolId,
+            credentialId,
+            endpoint,
+            environmentId: form.environmentId
+          });
+        } catch (compErr) {
+          setNotice(
+            `Connection saved, but registering its deploy target failed: ${compErr.message} Re-save the connection to retry.`
+          );
+        }
+      }
+      setDialogOpen(false);
+      await load();
+    } catch (e) {
+      setFormError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const handleDelete = async (row) => {
+    const ok = await confirm({
+      title: "Remove connection",
+      message: `Remove the connection "${row.name}"? This cannot be undone.`,
+      confirmText: "Remove",
+      cancelText: "Cancel",
+      variant: "danger"
+    });
+    if (!ok) return;
+    try {
+      await removeCredential(row.id);
+      await load();
+    } catch (e) {
+      setError(e.message);
+    }
+  };
+  const handleTest = async (row) => {
+    setTests((t) => ({ ...t, [row.id]: { loading: true } }));
+    try {
+      const result = await testConnection(appId, row.id);
+      setTests((t) => ({ ...t, [row.id]: result }));
+    } catch (e) {
+      setTests((t) => ({ ...t, [row.id]: { ok: false, message: e.message } }));
+    }
+  };
+  const columns = [
+    { key: "name", header: "Name", render: (row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: row.name }) },
+    {
+      key: "environment",
+      header: "Environment",
+      render: (row) => row.tags && row.tags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { variant: "info", size: "sm", children: row.tags[0].name }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { variant: "warning", size: "sm", children: "none" })
+    },
+    { key: "username", header: usernameLabel, render: (row) => row.username || "\u2014" },
+    {
+      key: "auth",
+      header: "Auth",
+      render: (row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Badge, { variant: row.hasSecret ? "success" : "warning", size: "sm", children: [
+        row.type === "TOKEN" ? "token" : "password",
+        row.hasSecret ? "" : " \xB7 no secret"
+      ] })
+    },
+    { key: "endpoint", header: "Endpoint", render: (row) => row.endpoint || "\u2014" },
+    {
+      key: "actions",
+      header: "",
+      align: "right",
+      render: (row) => {
+        const t = tests[row.id];
+        const loading = !!t && "loading" in t;
+        const result = t && !("loading" in t) ? t : null;
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", alignItems: "center", flexWrap: "wrap" }, children: [
+          result ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "span",
+            {
+              style: { display: "inline-flex", alignItems: "center", gap: 6, maxWidth: 340 },
+              title: [result.message, ...result.details ?? []].filter(Boolean).join("\n"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { variant: result.ok ? "success" : "danger", size: "sm", children: result.ok ? "\u2713" : "\u2717" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: result.ok ? "var(--color-success, #16a34a)" : "var(--color-danger, #dc2626)",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: [
+                      result.message,
+                      result.latencyMs != null ? ` \xB7 ${result.latencyMs} ms` : ""
+                    ]
+                  }
+                )
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: "ghost", size: "sm", isLoading: loading, onClick: () => void handleTest(row), children: "Test" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => openEdit(row), children: "Edit" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => void handleDelete(row), children: "Remove" })
+        ] });
+      }
+    }
+  ];
+  const isToken = form.authType === "token";
+  const secretLabel = isToken ? tokenLabel : "Password";
+  const usernameFieldLabel = isToken && usernameOptionalForToken ? `${usernameLabel} (optional)` : usernameLabel;
+  const environmentOptions = [
+    { value: "", label: environments.length ? "\u2014 Select environment \u2014" : "\u2014 No environments \u2014" },
+    ...environments.map((e) => ({ value: e.id, label: e.name }))
+  ];
+  const selectedEnv = environments.find((e) => e.id === form.environmentId);
+  const selectedEnvTypes = selectedEnv?.environmentTypes ?? [];
+  const environmentTypeOptions = [
+    { value: "", label: "Any type" },
+    ...selectedEnvTypes.map((t) => ({ value: t, label: envTypeLabel(t) }))
+  ];
+  const environmentFilterOptions = environments.map((e) => ({ value: e.id, label: e.name }));
+  const sortOptions = [
+    { value: "name", label: "Name" },
+    { value: "environment", label: "Environment" },
+    { value: "username", label: usernameLabel }
+  ];
+  const filters = [
+    {
+      key: "environment",
+      label: "Environment",
+      options: environmentFilterOptions,
+      value: environmentFilter,
+      onChange: setEnvironmentFilter,
+      alwaysVisible: true
+    },
+    {
+      key: "authType",
+      label: "Auth method",
+      options: authTypes,
+      value: authTypeFilter,
+      onChange: setAuthTypeFilter
+    }
+  ];
+  const filteredSorted = (0, import_react.useMemo)(() => {
+    const term = search.trim().toLowerCase();
+    const rows = connections.filter((row) => {
+      if (term) {
+        const haystack = `${row.name ?? ""} ${row.username ?? ""} ${row.endpoint ?? ""}`.toLowerCase();
+        if (!haystack.includes(term)) return false;
+      }
+      if (environmentFilter && row.tags?.[0]?.id !== environmentFilter) return false;
+      if (authTypeFilter && fromCredentialType(row.type) !== authTypeFilter) return false;
+      return true;
+    });
+    const dir = sortDir === "asc" ? 1 : -1;
+    return [...rows].sort((a, b) => {
+      switch (sortField) {
+        case "environment":
+          return (a.tags?.[0]?.name ?? "").localeCompare(b.tags?.[0]?.name ?? "") * dir;
+        case "username":
+          return (a.username ?? "").localeCompare(b.username ?? "") * dir;
+        case "name":
+        default:
+          return (a.name ?? "").localeCompare(b.name ?? "") * dir;
+      }
+    });
+  }, [connections, search, environmentFilter, authTypeFilter, sortField, sortDir]);
+  const pageRows = (0, import_react.useMemo)(
+    () => filteredSorted.slice((page - 1) * pageSize, page * pageSize),
+    [filteredSorted, page, pageSize]
+  );
+  (0, import_react.useEffect)(() => {
+    setPage(1);
+  }, [search, environmentFilter, authTypeFilter, sortField, sortDir]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Card, { variant: "bordered", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      CardHeader,
+      {
+        actions: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: "secondary", size: "sm", onClick: () => void load(), isLoading, children: "Refresh" }),
+          effectiveOnboarding ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: "primary", size: "sm", onClick: openOnboard, children: effectiveOnboarding.label }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              disabled: true,
+              title: "OAuth integration isn't available for this app \u2014 connect with a username/password or API token.",
+              children: "Integrate via OAuth"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: effectiveOnboarding ? "secondary" : "primary", size: "sm", onClick: openCreate, children: "Add connection" })
+        ] }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { style: { margin: 0, fontSize: 16, fontWeight: 600 }, children: title })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(CardBody, { children: [
+      notice ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { role: "status", style: { marginBottom: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { variant: "success", size: "sm", children: notice }) }) : null,
+      error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { role: "alert", children: [
+        "Failed to load connections: ",
+        error
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 12,
+              alignItems: "center",
+              justifyContent: "space-between",
+              marginBottom: 12
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                FilterBar,
+                {
+                  search: { value: search, onChange: setSearch, placeholder: "Search connections\u2026" },
+                  filters,
+                  onClearAll: () => {
+                    setSearch("");
+                    setEnvironmentFilter(null);
+                    setAuthTypeFilter(null);
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                SortSelect,
+                {
+                  options: sortOptions,
+                  value: sortField,
+                  direction: sortDir,
+                  onChange: (field, direction) => {
+                    setSortField(field);
+                    setSortDir(direction);
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          DataTable,
+          {
+            columns,
+            data: pageRows,
+            rowKey: (row) => row.id,
+            isLoading,
+            emptyState: {
+              title: "No connections yet",
+              description: "Add the credentials this app authenticates with (username/password or a token) and the endpoint they reach."
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Pagination,
+          {
+            page,
+            pageSize,
+            totalItems: filteredSorted.length,
+            onPageChange: setPage,
+            onPageSizeChange: setPageSize,
+            pageSizeOptions: [10, 25, 50]
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      FormDialog,
+      {
+        isOpen: dialogOpen,
+        onClose: closeDialog,
+        title: editing ? `Edit connection "${editing.name}"` : "Add connection",
+        description: "Credentials this app authenticates with, plus the API endpoint they reach.",
+        onSubmit: handleSubmit,
+        submitText: editing ? "Save changes" : "Add connection",
+        isSubmitting: submitting,
+        submitDisabled: !form.name.trim() || !form.environmentId,
+        error: formError,
+        size: "md",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Input,
+            {
+              label: "Name",
+              value: form.name,
+              onChange: (e) => setField("name", e.target.value),
+              placeholder: namePlaceholder,
+              fullWidth: true,
+              autoFocus: true,
+              spellCheck: false,
+              autoComplete: "off"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Select,
+            {
+              label: "Environment",
+              options: environmentOptions,
+              value: form.environmentId,
+              onChange: (value) => setForm((prev) => ({ ...prev, environmentId: value, environmentType: "" })),
+              helperText: "The deployment scope this connection belongs to. Manage environments under Environments.",
+              fullWidth: true
+            }
+          ),
+          selectedEnvTypes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Select,
+            {
+              label: "Applies to type (optional)",
+              options: environmentTypeOptions,
+              value: form.environmentType,
+              onChange: (value) => setField("environmentType", value),
+              helperText: "Scope these credentials to a specific type within the environment. 'Any type' applies to all of its types.",
+              fullWidth: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Input,
+            {
+              label: "Endpoint (optional)",
+              value: form.endpoint,
+              onChange: (e) => setField("endpoint", e.target.value),
+              placeholder: endpointPlaceholder,
+              helperText: endpointHelper,
+              fullWidth: true,
+              spellCheck: false,
+              autoComplete: "off"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Select,
+            {
+              label: "Auth method",
+              options: authTypes,
+              value: form.authType,
+              onChange: (value) => setField("authType", value),
+              fullWidth: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Input,
+            {
+              label: usernameFieldLabel,
+              value: form.username,
+              onChange: (e) => setField("username", e.target.value),
+              placeholder: isToken ? tokenUsernamePlaceholder : passwordUsernamePlaceholder,
+              fullWidth: true,
+              spellCheck: false,
+              autoComplete: "off"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Input,
+            {
+              label: secretLabel,
+              type: "password",
+              value: form.secret,
+              onChange: (e) => setField("secret", e.target.value),
+              placeholder: editing ? "leave blank to keep current" : "",
+              helperText: "Write-only \u2014 stored securely and never shown again.",
+              fullWidth: true,
+              autoComplete: "new-password"
+            }
+          )
+        ] })
+      }
+    ),
+    effectiveOnboarding ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      FormDialog,
+      {
+        isOpen: onboardOpen,
+        onClose: () => {
+          if (!onboardSubmitting) setOnboardOpen(false);
+        },
+        title: effectiveOnboarding.label,
+        description: effectiveOnboarding.brokered ? "You'll approve this on your provider's sign-in page \u2014 no secret is entered or stored here." : "You'll authorize this on your provider's sign-in page.",
+        onSubmit: handleStartOnboarding,
+        submitText: "Continue to sign-in",
+        isSubmitting: onboardSubmitting,
+        submitDisabled: !onboardName.trim() || !onboardEnvironmentId,
+        error: onboardError,
+        size: "md",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Input,
+            {
+              label: "Name",
+              value: onboardName,
+              onChange: (e) => setOnboardName(e.target.value),
+              placeholder: namePlaceholder,
+              fullWidth: true,
+              autoFocus: true,
+              spellCheck: false,
+              autoComplete: "off"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Select,
+            {
+              label: "Environment",
+              options: environmentOptions,
+              value: onboardEnvironmentId,
+              onChange: (value) => setOnboardEnvironmentId(value),
+              helperText: "The deployment scope this connection belongs to.",
+              fullWidth: true
+            }
+          ),
+          effectiveOnboarding.requiredSettings.map((key) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Input,
+            {
+              label: key,
+              value: onboardSettings[key] ?? "",
+              onChange: (e) => setOnboardSettings((prev) => ({ ...prev, [key]: e.target.value })),
+              fullWidth: true,
+              spellCheck: false,
+              autoComplete: "off"
+            },
+            key
+          ))
+        ] })
+      }
+    ) : null
+  ] });
+};
+var connections_default = ConnectionsManager;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConnectionsManager
+});
+//# sourceMappingURL=index.cjs.map