@veltrixsecops/app-sdk 3.2.0 → 3.5.0

package/dist/byol/index.cjs

@@ -0,0 +1,3802 @@
+"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 __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+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/client/inventory.ts
+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());
+}
+async function removeInventoryItem(id) {
+  const res = await authFetch(`${INVENTORY_API}/${encodeURIComponent(id)}`, {
+    method: "DELETE"
+  });
+  if (!res.ok && res.status !== 204) throw await inventoryError(res);
+}
+var INVENTORY_API;
+var init_inventory = __esm({
+  "src/client/inventory.ts"() {
+    "use strict";
+    init_client();
+    INVENTORY_API = "/api/components";
+  }
+});
+
+// src/client/connectivity.ts
+async function providerError(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 listConnectivityProviders() {
+  const res = await authFetch(CONNECTIVITY_PROVIDERS_API);
+  if (!res.ok) throw await providerError(res);
+  const body = await res.json();
+  const providers = Array.isArray(body) ? body : Array.isArray(body?.data) ? body.data : [];
+  return providers.map((provider) => ({
+    id: String(provider.id),
+    name: provider.name ?? "",
+    providerType: provider.providerType ?? void 0,
+    status: provider.status ?? void 0
+  }));
+}
+var CONNECTIVITY_PROVIDERS_API;
+var init_connectivity = __esm({
+  "src/client/connectivity.ts"() {
+    "use strict";
+    init_client();
+    CONNECTIVITY_PROVIDERS_API = "/api/connectivity-providers";
+  }
+});
+
+// src/client/environments.ts
+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 : []
+  }));
+}
+var ENVIRONMENTS_API;
+var init_environments = __esm({
+  "src/client/environments.ts"() {
+    "use strict";
+    init_client();
+    ENVIRONMENTS_API = "/api/environments";
+  }
+});
+
+// src/client/credentials.ts
+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();
+}
+async function runOperation(appId, operationId, opts = {}) {
+  const res = await authFetch(
+    `/api/apps/${encodeURIComponent(appId)}/operations/${encodeURIComponent(operationId)}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ credentialId: opts.credentialId, params: opts.params ?? {} })
+    }
+  );
+  if (!res.ok) {
+    const err = await credentialError(res);
+    return { ok: false, message: err.message };
+  }
+  return await res.json();
+}
+var CREDENTIALS_API;
+var init_credentials = __esm({
+  "src/client/credentials.ts"() {
+    "use strict";
+    init_client();
+    CREDENTIALS_API = "/api/credentials";
+  }
+});
+
+// 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();
+}
+async function getOnboardingStatus(appId, credentialId, opts = {}) {
+  const qs = opts.verify ? "?verify=1" : "";
+  const res = await authFetch(
+    `/api/apps/${encodeURIComponent(appId)}/connections/${encodeURIComponent(credentialId)}/onboard/status${qs}`
+  );
+  if (!res.ok) throw await onboardingError(res);
+  return await res.json();
+}
+async function revokeOnboarding(appId, credentialId) {
+  const res = await authFetch(
+    `/api/apps/${encodeURIComponent(appId)}/connections/${encodeURIComponent(credentialId)}/onboard/revoke`,
+    { method: "POST" }
+  );
+  if (!res.ok) throw await onboardingError(res);
+  return await res.json();
+}
+var init_onboarding = __esm({
+  "src/client/onboarding.ts"() {
+    "use strict";
+    init_client();
+  }
+});
+
+// src/client/index.ts
+var client_exports = {};
+__export(client_exports, {
+  HOST_RUNTIME_GLOBAL: () => HOST_RUNTIME_GLOBAL,
+  addInventoryItem: () => addInventoryItem,
+  authFetch: () => authFetch,
+  createCredential: () => createCredential,
+  fetchAppOnboarding: () => fetchAppOnboarding,
+  getHostRuntime: () => getHostRuntime,
+  getOnboardingStatus: () => getOnboardingStatus,
+  listConnectivityProviders: () => listConnectivityProviders,
+  listCredentials: () => listCredentials,
+  listEnvironments: () => listEnvironments,
+  listInventory: () => listInventory,
+  removeCredential: () => removeCredential,
+  removeInventoryItem: () => removeInventoryItem,
+  requireHostRuntime: () => requireHostRuntime,
+  resolveTool: () => resolveTool,
+  revokeOnboarding: () => revokeOnboarding,
+  runOperation: () => runOperation,
+  startOnboarding: () => startOnboarding,
+  testConnection: () => testConnection,
+  updateCredential: () => updateCredential,
+  updateInventoryItem: () => updateInventoryItem
+});
+function getHostRuntime() {
+  const runtime = globalThis[HOST_RUNTIME_GLOBAL];
+  return runtime ?? null;
+}
+function requireHostRuntime() {
+  const runtime = getHostRuntime();
+  if (!runtime) {
+    throw new Error(
+      `Veltrix host runtime not found \u2014 app client bundles only run inside the Veltrix platform (missing globalThis.${HOST_RUNTIME_GLOBAL})`
+    );
+  }
+  return runtime;
+}
+function authFetch(input, init) {
+  const runtime = getHostRuntime();
+  if (runtime) return runtime.authFetch(input, init);
+  return fetch(input, init);
+}
+var HOST_RUNTIME_GLOBAL;
+var init_client = __esm({
+  "src/client/index.ts"() {
+    "use strict";
+    init_inventory();
+    init_connectivity();
+    init_environments();
+    init_credentials();
+    init_onboarding();
+    HOST_RUNTIME_GLOBAL = "__VELTRIX_APP_RUNTIME__";
+  }
+});
+
+// src/byol/index.tsx
+var byol_exports = {};
+__export(byol_exports, {
+  BYOL_TAG_KEYS: () => BYOL_TAG_KEYS,
+  ByolInfrastructureDetail: () => ByolInfrastructureDetail,
+  ByolInfrastructureManager: () => ByolInfrastructureManager,
+  ByolPlanModal: () => ByolPlanModal,
+  CONTROL_PLANE_LAYOUT_OPTIONS: () => CONTROL_PLANE_LAYOUT_OPTIONS,
+  DEPLOYMENT_STEPS: () => DEPLOYMENT_STEPS,
+  DestroyPlanModal: () => DestroyPlanModal,
+  MANAGED_BY: () => MANAGED_BY,
+  MIN_HEAVY_FORWARDERS: () => MIN_HEAVY_FORWARDERS,
+  PLACEMENT_GRANULARITY_OPTIONS: () => PLACEMENT_GRANULARITY_OPTIONS,
+  SINGLE_SITE_PLACEMENT: () => SINGLE_SITE_PLACEMENT,
+  TIER_LABELS: () => TIER_LABELS,
+  TIER_ORDER: () => TIER_ORDER,
+  allocateNodesBySite: () => allocateNodesBySite,
+  buildByolPlan: () => buildByolPlan,
+  buildByolResourcePlan: () => buildByolResourcePlan,
+  buildByolTags: () => buildByolTags,
+  default: () => ByolInfrastructureManager_default,
+  diffPlan: () => diffPlan,
+  effectivePlacement: () => effectivePlacement,
+  isNotStarted: () => isNotStarted,
+  isRunning: () => isRunning,
+  planHasChanges: () => planHasChanges,
+  resourceStatusLabel: () => resourceStatusLabel,
+  resourceStatusVariant: () => resourceStatusVariant,
+  statusLabel: () => statusLabel,
+  statusVariant: () => statusVariant,
+  stepStatusVariant: () => stepStatusVariant,
+  validatePlacement: () => validatePlacement
+});
+module.exports = __toCommonJS(byol_exports);
+
+// src/byol/ByolInfrastructureManager.tsx
+var import_react4 = require("react");
+init_client();
+
+// src/ui/index.tsx
+var React = __toESM(require("react"), 1);
+init_client();
+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/byol/types.ts
+var SINGLE_SITE_PLACEMENT = { mode: "single" };
+var MIN_HEAVY_FORWARDERS = 1;
+var SELF_HOSTED = "self-hosted";
+var SELF_HOSTED_LABEL = "Self-Hosted";
+var DEFAULT_DEPLOYMENT_TYPES = [
+  { value: "single", label: "Single instance" },
+  { value: "distributed", label: "Distributed" }
+];
+var NETWORK_MODE_OPTIONS = [
+  { value: "dedicated", label: "Dedicated \u2014 your cloud (BYOC)" },
+  { value: "existing", label: "Existing network \u2014 your cloud (BYOC)" },
+  { value: "shared", label: "Veltrix-hosted (shared)" }
+];
+var DNS_MODE_OPTIONS = [
+  { value: "managed", label: "Managed" },
+  { value: "delegated", label: "Delegated" },
+  { value: "private-only", label: "Private only" }
+];
+var BYOC_NETWORK_MODES = /* @__PURE__ */ new Set(["dedicated", "existing"]);
+var CONTROL_PLANE_LAYOUT_OPTIONS = [
+  { value: "dedicated", label: "Dedicated", description: "5 servers \u2014 one management role each (highest isolation)." },
+  { value: "consolidated", label: "Consolidated", description: "~3 servers \u2014 cluster manager and SH deployer isolated, rest combined." },
+  { value: "single", label: "Single node", description: "1 server running every management role (lowest cost, non-HA)." }
+];
+var PLACEMENT_GRANULARITY_OPTIONS = [
+  { value: "az", label: "Availability zones (same region)" },
+  { value: "region", label: "Regions (multi-region)" }
+];
+function editFormState(row) {
+  const providerId = row.cloudProviderId ? row.cloudProviderId : row.hosting_type === SELF_HOSTED_LABEL ? SELF_HOSTED : "";
+  return {
+    name: row.name ?? "",
+    deploymentType: row.deploymentType ?? "single",
+    environmentType: row.environmentType ?? "",
+    providerId,
+    region: row.region ?? "",
+    indexerCount: String(row.indexerCount ?? 1),
+    searchHeadCount: String(row.searchHeadCount ?? 1),
+    networkMode: row.networkMode ?? "shared",
+    dnsMode: row.dnsMode ?? "managed",
+    cloudAccountConnectionId: row.cloudAccountConnectionId ?? "",
+    controlPlaneLayout: row.controlPlaneLayout ?? "dedicated",
+    heavyForwarderCount: String(row.heavyForwarderCount ?? 1),
+    instanceType: row.instanceType ?? "",
+    indexerPlacement: row.indexerPlacement ?? { mode: "single" },
+    searchHeadPlacement: row.searchHeadPlacement ?? { mode: "single" },
+    versionId: row.versionId ?? ""
+  };
+}
+var BLANK_FORM = {
+  name: "",
+  deploymentType: "single",
+  environmentType: "",
+  providerId: "",
+  region: "",
+  indexerCount: "1",
+  searchHeadCount: "1",
+  // New cloud infra defaults to 'dedicated' — OpenTofu creates its own VPC and the
+  // deployment depends on nothing pre-existing. 'shared' attaches to a Veltrix-managed
+  // base network that must be provisioned by a separate platform tofu stack; until that
+  // stack exists, defaulting to 'shared' produces "no matching VPC" at apply time.
+  networkMode: "dedicated",
+  dnsMode: "managed",
+  cloudAccountConnectionId: "",
+  controlPlaneLayout: "dedicated",
+  heavyForwarderCount: "1",
+  instanceType: "",
+  indexerPlacement: { mode: "single" },
+  searchHeadPlacement: { mode: "single" },
+  versionId: ""
+};
+var INSTANCE_TYPE_EXAMPLES = {
+  aws: "t2.medium",
+  azure: "Standard_B2s",
+  gcp: "e2-medium",
+  hetzner: "cx22"
+};
+
+// src/byol/status.ts
+var VARIANTS = {
+  not_started: "default",
+  provisioning: "info",
+  running: "success",
+  active: "success",
+  degraded: "warning",
+  stopped: "warning",
+  failed: "danger",
+  error: "danger",
+  destroying: "info"
+};
+var LABELS = {
+  not_started: "Not Started",
+  provisioning: "Provisioning",
+  running: "Running",
+  active: "Running",
+  degraded: "Degraded",
+  stopped: "Stopped",
+  failed: "Failed",
+  error: "Failed",
+  destroying: "Destroying"
+};
+function statusVariant(status) {
+  return status && VARIANTS[status] || "default";
+}
+function statusLabel(status) {
+  if (!status) return "Unknown";
+  return LABELS[status] || status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function isRunning(status) {
+  return status === "running" || status === "active";
+}
+function isNotStarted(status) {
+  return !status || status === "not_started";
+}
+var RESOURCE_VARIANTS = {
+  ready: "success",
+  provisioning: "info",
+  attention: "warning",
+  failed: "danger",
+  not_started: "default"
+};
+var RESOURCE_LABELS = {
+  ready: "Ready",
+  provisioning: "Provisioning",
+  attention: "Attention",
+  failed: "Failed",
+  not_started: "Not started"
+};
+function resourceStatusVariant(status) {
+  return status && RESOURCE_VARIANTS[status] || "default";
+}
+function resourceStatusLabel(status) {
+  if (!status) return "Not started";
+  return RESOURCE_LABELS[status] || status.replace(/_/g, " ");
+}
+var STEP_VARIANTS = {
+  done: "success",
+  running: "info",
+  failed: "danger",
+  pending: "default"
+};
+function stepStatusVariant(status) {
+  return status && STEP_VARIANTS[status] || "default";
+}
+
+// src/byol/detail/shared.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var rgbToken = (name, fallback) => `rgb(var(${name}, ${fallback}))`;
+var tokens = {
+  border: rgbToken("--color-border", "229 231 235"),
+  borderStrong: rgbToken("--color-border-strong", "209 213 219"),
+  surface: rgbToken("--color-surface-raised", "255 255 255"),
+  // cards / panels / active nav
+  surface2: rgbToken("--color-surface", "249 250 251"),
+  // page surface — sidebar / insets
+  text: rgbToken("--color-content-primary", "17 24 39"),
+  muted: rgbToken("--color-content-secondary", "75 85 99"),
+  faint: rgbToken("--color-content-tertiary", "156 163 175"),
+  primary: "var(--veltrix-app-primary, #FF6600)",
+  danger: rgbToken("--color-danger", "220 38 38"),
+  success: rgbToken("--color-success", "22 163 74"),
+  info: rgbToken("--color-info", "14 116 144"),
+  warning: rgbToken("--color-warning", "161 98 7")
+};
+var StatusPill = ({ status }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { variant: statusVariant(status), children: statusLabel(status) });
+var ResourcePill = ({ status }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { variant: resourceStatusVariant(status), size: "sm", children: resourceStatusLabel(status) });
+var Meta = ({ label, children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 11, textTransform: "uppercase", letterSpacing: ".05em", color: tokens.faint }, children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 600, color: tokens.text, marginTop: 2 }, children })
+] });
+function barColor(status) {
+  switch (status) {
+    case "ready":
+      return tokens.success;
+    case "provisioning":
+      return tokens.info;
+    case "attention":
+      return tokens.warning;
+    case "failed":
+      return tokens.danger;
+    default:
+      return tokens.borderStrong;
+  }
+}
+var ProgressMeter = ({ resources }) => {
+  const total = resources.length;
+  const ready = resources.filter((r) => r.status === "ready").length;
+  const counts = /* @__PURE__ */ new Map();
+  for (const r of resources) counts.set(r.status, (counts.get(r.status) ?? 0) + 1);
+  const order = ["ready", "provisioning", "attention", "failed", "not_started"];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { width: 300, maxWidth: "48vw" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", fontSize: 12, color: tokens.muted, marginBottom: 6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Deployment progress" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontVariantNumeric: "tabular-nums" }, children: total === 0 ? "Not deployed" : `${ready} / ${total} resources ready` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { height: 8, borderRadius: 999, background: tokens.surface2, overflow: "hidden", display: "flex" }, children: total === 0 ? null : order.map((s2) => {
+      const n = counts.get(s2) ?? 0;
+      if (!n) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: `${n / total * 100}%`, background: barColor(s2), height: "100%" } }, s2);
+    }) })
+  ] });
+};
+var Panel = ({
+  title,
+  actions,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { border: `1px solid ${tokens.border}`, borderRadius: 12, background: tokens.surface, overflow: "hidden" }, children: [
+  (title || actions) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "12px 16px",
+        borderBottom: `1px solid ${tokens.border}`
+      },
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { margin: 0, fontSize: 14, fontWeight: 600, color: tokens.text }, children: title }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {}),
+        actions
+      ]
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: 16 }, children })
+] });
+
+// src/byol/api.ts
+init_client();
+async function errorText(res) {
+  return res.json().then((b) => b?.error || `HTTP ${res.status}`).catch(() => `HTTP ${res.status}`);
+}
+function formatDate(value) {
+  if (!value) return "\u2014";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "\u2014" : date.toLocaleDateString();
+}
+function formatDateTime(value) {
+  if (!value) return "\u2014";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "\u2014" : date.toLocaleString();
+}
+async function json(res) {
+  if (!res.ok) throw new Error(await errorText(res));
+  return res.json();
+}
+function getInfra(apiBase, id) {
+  return authFetch(`${apiBase}/${id}`).then((r) => json(r));
+}
+function getResources(apiBase, id) {
+  return authFetch(`${apiBase}/${id}/resources`).then((r) => json(r));
+}
+function getDeployments(apiBase, id) {
+  return authFetch(`${apiBase}/${id}/deployments`).then((r) => json(r));
+}
+function getPlan(apiBase, id) {
+  return authFetch(`${apiBase}/${id}/plan`).then((r) => json(r));
+}
+function deployInfra(apiBase, id) {
+  return authFetch(`${apiBase}/${id}/deploy`, { method: "POST" }).then(
+    (r) => json(r)
+  );
+}
+function destroyInfra(apiBase, id) {
+  return authFetch(`${apiBase}/${id}/destroy`, { method: "POST" }).then(
+    (r) => json(r)
+  );
+}
+function lifecycleInfra(apiBase, id, action) {
+  return authFetch(`${apiBase}/${id}/${action}`, { method: "POST" }).then((r) => json(r));
+}
+
+// src/byol/ByolInfrastructureDetail.tsx
+var import_react3 = require("react");
+
+// src/byol/placement.ts
+function allocateNodesBySite(totalNodes, sites) {
+  const n = Math.max(0, Math.floor(totalNodes));
+  const list = sites ?? [];
+  if (list.length === 0) return [];
+  const base = list.map(() => 0);
+  let assigned = 0;
+  for (let i = 0; i < list.length && assigned < n; i++) {
+    base[i] = 1;
+    assigned++;
+  }
+  const remaining = n - assigned;
+  if (remaining > 0) {
+    const totalPercent = list.reduce((sum, s2) => sum + Math.max(0, s2.percent), 0) || 1;
+    const ideal = list.map((s2) => Math.max(0, s2.percent) / totalPercent * remaining);
+    const floors = ideal.map((v) => Math.floor(v));
+    let leftover = remaining - floors.reduce((a, b) => a + b, 0);
+    const order = list.map((_, i) => ({ i, frac: ideal[i] - floors[i] })).sort((a, b) => b.frac - a.frac || a.i - b.i);
+    for (let k = 0; k < order.length && leftover > 0; k++) {
+      floors[order[k].i]++;
+      leftover--;
+    }
+    for (let i = 0; i < list.length; i++) base[i] += floors[i];
+  }
+  return list.map((s2, i) => ({ site: s2.site, count: base[i], percent: s2.percent }));
+}
+function validatePlacement(placement, totalNodes) {
+  if (!placement || placement.mode === "single") return null;
+  const sites = placement.sites ?? [];
+  if (sites.length < 2) return "Multi-site placement needs at least two sites.";
+  const seen = /* @__PURE__ */ new Set();
+  for (const s2 of sites) {
+    if (!s2.site || !s2.site.trim()) return "Every site must be selected.";
+    if (seen.has(s2.site)) return `Site "${s2.site}" is listed more than once.`;
+    seen.add(s2.site);
+    if (!(s2.percent > 0)) return `Site "${s2.site}" must have a percent greater than zero.`;
+  }
+  const sumPercent = sites.reduce((sum, s2) => sum + s2.percent, 0);
+  if (Math.round(sumPercent) !== 100) return `Site percentages must total 100 (currently ${Math.round(sumPercent)}).`;
+  if (sites.length > Math.floor(totalNodes)) {
+    return `Too many sites (${sites.length}) for ${totalNodes} node${totalNodes === 1 ? "" : "s"} \u2014 each site needs at least one node.`;
+  }
+  return null;
+}
+function effectivePlacement(placement, eligible) {
+  if (!eligible || !placement || placement.mode !== "multi-site") return { mode: "single" };
+  if (!placement.sites || placement.sites.length < 2) return { mode: "single" };
+  return placement;
+}
+
+// src/byol/topology.ts
+var CONTROL_PLANE_ROLE_META = {
+  "license-manager": { kind: "license-manager", name: "License Manager", role: "Serves BYOL license pool" },
+  "cluster-manager": { kind: "cluster-manager", name: "Cluster Manager", role: "Indexer cluster coordinator" },
+  "sh-deployer": { kind: "sh-deployer", name: "SH Deployer", role: "Search head cluster deployer" },
+  "deployment-server": { kind: "deployment-server", name: "Deployment Server", role: "Forwarder app distribution" },
+  "monitoring-console": { kind: "monitoring-console", name: "Monitoring Console", role: "Fleet health & DMC" }
+};
+function controlPlaneGroups(layout) {
+  switch (layout) {
+    case "single":
+      return [["license-manager", "cluster-manager", "sh-deployer", "deployment-server", "monitoring-console"]];
+    case "consolidated":
+      return [["cluster-manager"], ["sh-deployer"], ["license-manager", "deployment-server", "monitoring-console"]];
+    case "dedicated":
+    default:
+      return [["license-manager"], ["cluster-manager"], ["sh-deployer"], ["deployment-server"], ["monitoring-console"]];
+  }
+}
+function buildControlPlane(layout, region) {
+  return controlPlaneGroups(layout).map((roles) => {
+    if (roles.length === 1) {
+      const meta = CONTROL_PLANE_ROLE_META[roles[0]];
+      return { planKey: `control-plane/${roles[0]}`, tier: "control-plane", kind: meta.kind, name: meta.name, role: meta.role, region, roles: [roles[0]] };
+    }
+    const label = roles.map((r) => CONTROL_PLANE_ROLE_META[r].name).join(" \xB7 ");
+    return {
+      planKey: "control-plane/management",
+      tier: "control-plane",
+      kind: "management-node",
+      name: roles.length >= 5 ? "Management node (all roles)" : "Management node",
+      role: label,
+      region,
+      roles: [...roles]
+    };
+  });
+}
+function assignNodeSites(count, placement, primaryRegion, legacyRegions) {
+  const eff = effectivePlacement(placement ?? void 0, true);
+  if (eff.mode === "multi-site" && eff.sites && eff.sites.length >= 2) {
+    const granularity = eff.granularity ?? "az";
+    const out2 = [];
+    for (const alloc of allocateNodesBySite(count, eff.sites)) {
+      for (let k = 0; k < alloc.count; k++) {
+        out2.push(granularity === "az" ? { region: primaryRegion, zone: alloc.site } : { region: alloc.site, zone: null });
+      }
+    }
+    return out2;
+  }
+  const out = [];
+  for (let i = 0; i < count; i++) out.push({ region: pickRegion(legacyRegions, i, primaryRegion), zone: null });
+  return out;
+}
+var TIER_LABELS = {
+  foundation: "Foundation",
+  "control-plane": "Control plane",
+  data: "Data tier \u2014 indexer cluster",
+  search: "Search tier \u2014 search head cluster",
+  ingest: "Ingest & access"
+};
+var TIER_ORDER = ["foundation", "control-plane", "data", "search", "ingest"];
+var DISTRIBUTED = "distributed";
+function pickRegion(regions, index, fallback) {
+  if (regions && regions.length > 0) return regions[index % regions.length];
+  return fallback;
+}
+function buildByolResourcePlan(input) {
+  const distributed = (input.deploymentType ?? "single") === DISTRIBUTED;
+  const primaryRegion = input.region ?? null;
+  const isCloud = input.isCloud ?? false;
+  const items = [];
+  items.push({ planKey: "foundation/network", tier: "foundation", kind: "network", name: "Network", role: "VPC \xB7 subnets \xB7 security groups", region: primaryRegion });
+  if (distributed && isCloud) {
+    items.push({ planKey: "foundation/load-balancer", tier: "foundation", kind: "load-balancer", name: "Load balancer", role: "Search + HEC ingress", region: primaryRegion });
+    items.push({ planKey: "foundation/dns", tier: "foundation", kind: "dns", name: "DNS", role: "Public + private records", region: "global" });
+  }
+  items.push({ planKey: "foundation/tls", tier: "foundation", kind: "tls", name: "TLS certificates", role: "Web + inter-node (S2S)", region: null });
+  items.push({ planKey: "foundation/storage", tier: "foundation", kind: "storage", name: "Storage", role: distributed ? "SmartStore + hot/warm volumes" : "Index volumes", region: primaryRegion });
+  items.push({ planKey: "foundation/secrets", tier: "foundation", kind: "secrets", name: "Secrets", role: "Admin password \xB7 pass4SymmKey", region: null });
+  items.push({ planKey: "foundation/license-file", tier: "foundation", kind: "license-file", name: "BYOL license file", role: "Uploaded & validated", region: null });
+  if (!distributed) {
+    items.push({ planKey: "data/standalone", tier: "data", kind: "standalone", name: "Splunk instance", role: "All-in-one (indexer + search head + web)", region: primaryRegion });
+    items.push({ planKey: "ingest/hec", tier: "ingest", kind: "hec", name: "HTTP Event Collector", role: "Token endpoint", region: primaryRegion });
+    return items.map((it, i) => stampOrder(it, i));
+  }
+  items.push(...buildControlPlane(input.controlPlaneLayout ?? "dedicated", primaryRegion));
+  const indexerCount = Math.max(1, input.indexerCount ?? 1);
+  const indexerSites = assignNodeSites(indexerCount, input.indexerPlacement, primaryRegion, input.indexerRegions);
+  for (let i = 0; i < indexerCount; i++) {
+    items.push({
+      planKey: `data/indexer-${i + 1}`,
+      tier: "data",
+      kind: "indexer",
+      name: `Indexer peer ${i + 1}`,
+      role: "Cluster peer node",
+      region: indexerSites[i].region,
+      zone: indexerSites[i].zone
+    });
+  }
+  const searchHeadCount = Math.max(1, input.searchHeadCount ?? 1);
+  const searchHeadSites = assignNodeSites(searchHeadCount, input.searchHeadPlacement, primaryRegion, input.searchHeadRegions);
+  for (let i = 0; i < searchHeadCount; i++) {
+    items.push({
+      planKey: `search/search-head-${i + 1}`,
+      tier: "search",
+      kind: "search-head",
+      name: `Search head ${i + 1}`,
+      role: i === 0 ? "SHC captain candidate" : "SHC member",
+      region: searchHeadSites[i].region,
+      zone: searchHeadSites[i].zone
+    });
+  }
+  items.push({ planKey: "ingest/hec", tier: "ingest", kind: "hec", name: "HTTP Event Collector", role: "Token endpoint via LB", region: primaryRegion });
+  const heavyForwarderCount = Math.max(1, input.heavyForwarderCount ?? 1);
+  for (let i = 0; i < heavyForwarderCount; i++) {
+    items.push({
+      planKey: `ingest/heavy-forwarder-${i + 1}`,
+      tier: "ingest",
+      kind: "heavy-forwarder",
+      name: `Heavy Forwarder ${i + 1}`,
+      role: "Ingest routing / props",
+      region: primaryRegion
+    });
+  }
+  return items.map((it, i) => stampOrder(it, i));
+}
+function stampOrder(item, index) {
+  return { ...item, sortOrder: index };
+}
+var DEPLOYMENT_STEPS = [
+  { key: "plan", title: "Plan created", detail: "Resources planned from topology; desired state recorded." },
+  { key: "foundation", title: "Provision foundation", detail: "Network, load balancer, DNS, TLS, storage and secrets." },
+  { key: "license", title: "License Manager online \xB7 license applied", detail: "BYOL license validated and pool published." },
+  { key: "cluster", title: "Cluster Manager online", detail: "Indexer cluster policy (RF/SF) published." },
+  { key: "indexers", title: "Indexer peers joining cluster", detail: "Indexer peers boot and register with the cluster manager." },
+  { key: "search-heads", title: "Search head cluster forming", detail: "Deployer pushes the SHC bundle; captain election." },
+  { key: "services", title: "Deployment server & monitoring console", detail: "Ancillary control-plane services come online." },
+  { key: "post-config", title: "Post-deploy configuration", detail: "Apply indexes, HEC tokens and Splunk apps." },
+  { key: "health", title: "End-to-end health check", detail: "Verify search, ingest and replication end to end." }
+];
+
+// src/byol/detail/OverviewTab.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var OverviewTab = ({ infra, resources }) => {
+  const distributed = infra.deploymentType === "distributed";
+  const regionCount = new Set(
+    resources.map((r) => r.region).filter((r) => Boolean(r) && r !== "global")
+  ).size;
+  const readyCount = resources.filter((r) => r.status === "ready").length;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatsCard, { label: "Indexer peers", value: infra.indexerCount ?? "\u2014" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatsCard, { label: "Search heads", value: infra.searchHeadCount ?? "\u2014" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatsCard, { label: "Regions", value: regionCount || (infra.region ? 1 : "\u2014") }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        StatsCard,
+        {
+          label: resources.length ? "Resources ready" : "Resources planned",
+          value: resources.length ? `${readyCount} / ${resources.length}` : "\u2014"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Panel, { title: "What gets deployed", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { style: { margin: 0, fontSize: 13, lineHeight: 1.6, color: tokens.muted }, children: [
+      distributed ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        "A distributed BYOL environment provisions a full Splunk topology: a foundation tier (network, load balancing, DNS, TLS, storage/SmartStore, secrets and your license file), a control plane (license manager, cluster manager, deployment server, monitoring console and search-head deployer), an",
+        " ",
+        infra.indexerCount,
+        "-peer indexer cluster, a ",
+        infra.searchHeadCount,
+        "-member search-head cluster, and the ingest path (HEC + heavy forwarders)."
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: "A single-instance BYOL environment provisions the foundation (network, TLS, storage, secrets and your license file) plus one all-in-one Splunk node (indexer + search head + web) and an HTTP Event Collector endpoint." }),
+      " ",
+      "See the ",
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Resources" }),
+      " tab for the live plan and ",
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Activity" }),
+      " for the run log."
+    ] }) })
+  ] });
+};
+
+// src/byol/detail/ResourcesTab.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var STRIPE = {
+  ready: tokens.success,
+  provisioning: tokens.info,
+  attention: tokens.warning,
+  failed: tokens.danger,
+  not_started: tokens.borderStrong
+};
+var LEGEND = [
+  { status: "ready", label: "Ready" },
+  { status: "provisioning", label: "Provisioning" },
+  { status: "attention", label: "Attention" },
+  { status: "failed", label: "Failed" },
+  { status: "not_started", label: "Not started" }
+];
+var ResourceCard = ({ resource }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  "div",
+  {
+    style: {
+      position: "relative",
+      border: `1px solid ${tokens.border}`,
+      borderRadius: 8,
+      background: tokens.surface,
+      padding: "12px 13px",
+      display: "flex",
+      flexDirection: "column",
+      gap: 8,
+      overflow: "hidden"
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { position: "absolute", left: 0, top: 0, bottom: 0, width: 3, background: STRIPE[resource.status] ?? STRIPE.not_started } }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontWeight: 600, fontSize: 13, color: tokens.text }, children: resource.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ResourcePill, { status: resource.status })
+      ] }),
+      resource.role ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 11, color: tokens.faint }, children: resource.role }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, fontSize: 11, color: tokens.muted }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: resource.zone ? `${resource.region ?? ""} \xB7 ${resource.zone}` : resource.region || "\u2014" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontFamily: "var(--font-mono, ui-monospace, monospace)", color: tokens.faint }, children: resource.externalRef || "\u2014" })
+      ] })
+    ]
+  }
+);
+var ResourcesTab = ({ resources, derived }) => {
+  if (resources.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      EmptyState,
+      {
+        title: "No resources planned",
+        description: "This infrastructure has no derivable topology yet. Check the deployment type and node counts in Settings."
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 18 }, children: [
+    derived ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        style: {
+          fontSize: 13,
+          color: tokens.muted,
+          background: tokens.surface2,
+          border: `1px solid ${tokens.border}`,
+          borderRadius: 8,
+          padding: "10px 14px"
+        },
+        children: [
+          "This is the plan derived from the topology \u2014 the resources that ",
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: "will" }),
+          " be provisioned. Deploy the environment to begin creating them."
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 14, fontSize: 12, color: tokens.muted }, children: LEGEND.map((l) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { width: 8, height: 8, borderRadius: "50%", background: STRIPE[l.status] } }),
+      l.label
+    ] }, l.status)) }),
+    TIER_ORDER.map((tier) => {
+      const inTier = resources.filter((r) => r.tier === tier);
+      if (inTier.length === 0) return null;
+      const ready = inTier.filter((r) => r.status === "ready").length;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 9 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "h3",
+            {
+              style: {
+                margin: 0,
+                fontSize: 12,
+                letterSpacing: ".08em",
+                textTransform: "uppercase",
+                color: tokens.primary
+              },
+              children: TIER_LABELS[tier]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { fontSize: 12, color: tokens.faint, fontVariantNumeric: "tabular-nums" }, children: [
+            inTier.length,
+            " ",
+            inTier.length === 1 ? "resource" : "resources",
+            !derived ? ` \xB7 ${ready} ready` : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(232px, 1fr))", gap: 10 }, children: inTier.map((r) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ResourceCard, { resource: r }, r.planKey)) })
+      ] }, tier);
+    })
+  ] });
+};
+
+// src/byol/detail/ActivityTab.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var NODE_COLOR = {
+  done: tokens.success,
+  running: tokens.info,
+  failed: tokens.danger,
+  pending: tokens.borderStrong
+};
+var StepNode = ({ step, last }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", paddingBottom: last ? 0 : 20 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "span",
+    {
+      style: {
+        position: "absolute",
+        left: -24,
+        top: 2,
+        width: 16,
+        height: 16,
+        borderRadius: "50%",
+        background: NODE_COLOR[step.status] ?? NODE_COLOR.pending,
+        border: `3px solid ${tokens.surface}`,
+        boxShadow: `0 0 0 1px ${tokens.border}`
+      }
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontWeight: 600, fontSize: 14, color: tokens.text }, children: step.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Badge, { variant: stepStatusVariant(step.status), size: "sm", children: step.status }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: 12, color: tokens.faint }, children: step.completedAt ? formatDateTime(step.completedAt) : step.startedAt ? formatDateTime(step.startedAt) : "" })
+  ] }),
+  step.detail ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: 13, color: tokens.muted, marginTop: 3 }, children: step.detail }) : null,
+  step.logs ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "pre",
+    {
+      style: {
+        marginTop: 8,
+        background: tokens.surface2,
+        border: `1px solid ${tokens.border}`,
+        borderRadius: 8,
+        padding: "9px 12px",
+        fontFamily: "var(--font-mono, ui-monospace, monospace)",
+        fontSize: 11.5,
+        color: tokens.muted,
+        whiteSpace: "pre-wrap",
+        overflowX: "auto"
+      },
+      children: step.logs
+    }
+  ) : null
+] });
+var RunTimeline = ({ run }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 14, flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h3", { style: { margin: 0, fontSize: 14, fontWeight: 600, color: tokens.text, textTransform: "capitalize" }, children: [
+      run.action,
+      " run"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Badge, { variant: run.status === "succeeded" ? "success" : run.status === "failed" ? "danger" : "info", size: "sm", children: run.status }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { fontSize: 12, color: tokens.faint }, children: [
+      "started ",
+      formatDateTime(run.startedAt)
+    ] })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", paddingLeft: 26 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { position: "absolute", left: 8, top: 4, bottom: 4, width: 2, background: tokens.border } }),
+    run.steps.map((s2, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StepNode, { step: s2, last: i === run.steps.length - 1 }, s2.id || s2.key))
+  ] })
+] });
+var ActivityTab = ({ deployments }) => {
+  if (deployments.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      EmptyState,
+      {
+        title: "No deployment activity yet",
+        description: "When you deploy this environment, each provisioning step will stream here."
+      }
+    );
+  }
+  const [latest, ...previous] = deployments;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 28 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RunTimeline, { run: latest }),
+    previous.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h4", { style: { margin: "0 0 10px", fontSize: 12, letterSpacing: ".06em", textTransform: "uppercase", color: tokens.faint }, children: "Earlier runs" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: previous.map((run) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 10,
+            padding: "10px 14px",
+            border: `1px solid ${tokens.border}`,
+            borderRadius: 8,
+            background: tokens.surface,
+            fontSize: 13
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { textTransform: "capitalize", color: tokens.text }, children: run.action }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: tokens.faint }, children: formatDateTime(run.startedAt) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Badge, { variant: run.status === "succeeded" ? "success" : run.status === "failed" ? "danger" : "info", size: "sm", children: run.status })
+          ]
+        },
+        run.id
+      )) })
+    ] }) : null
+  ] });
+};
+
+// src/byol/detail/AccessTab.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var mono = "var(--font-mono, ui-monospace, monospace)";
+function asHost(ref) {
+  if (!ref) return null;
+  const v = ref.trim();
+  if (/^https?:\/\//i.test(v)) {
+    try {
+      return new URL(v).host;
+    } catch {
+      return null;
+    }
+  }
+  const HOSTNAME = /^(?=.{1,253}$)([a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i;
+  return HOSTNAME.test(v) ? v : null;
+}
+var Row = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  "div",
+  {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "180px 1fr",
+      gap: 16,
+      alignItems: "center",
+      padding: "11px 0",
+      borderBottom: `1px solid ${tokens.border}`,
+      fontSize: 13
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: tokens.muted }, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontFamily: mono, fontSize: 12.5, color: tokens.text, overflowWrap: "anywhere" }, children: value })
+    ]
+  }
+);
+var AccessTab = ({ infra, resources }) => {
+  if (!isRunning(infra.status)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      EmptyState,
+      {
+        title: "Endpoints appear once the environment is running",
+        description: "Deploy the environment; when the search tier is up, its Splunk Web, management and HEC endpoints show here."
+      }
+    );
+  }
+  const refOf = (planKey) => resources.find((r) => r.planKey === planKey)?.externalRef ?? null;
+  const dnsHost = asHost(refOf("foundation/dns"));
+  const albHost = asHost(refOf("ingest/hec"));
+  const webHost = dnsHost ?? albHost;
+  const hecHost = albHost ?? dnsHost;
+  const indexerTargets = resources.filter((r) => r.kind === "indexer").map((r) => asHost(r.externalRef)).filter((h) => Boolean(h)).map((h) => `${h}:9997`);
+  const endpoints = [];
+  if (webHost) {
+    endpoints.push({ label: "Splunk Web (search)", value: `https://${webHost}` });
+    endpoints.push({ label: "Management API", value: `https://${webHost}:8089` });
+  }
+  if (hecHost) {
+    endpoints.push({ label: "HTTP Event Collector", value: `https://${hecHost}:8088/services/collector` });
+  }
+  if (endpoints.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Panel, { title: "Endpoints", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { style: { margin: 0, fontSize: 13, lineHeight: 1.6, color: tokens.muted }, children: [
+      "The environment is running, but the provisioner has not reported a reachable endpoint yet. Splunk Web, the management API and the HTTP Event Collector URL appear here as soon as the load balancer and DNS name are published. Check the ",
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Resources" }),
+      " tab for each component\u2019s external reference."
+    ] }) });
+  }
+  const tcpoutGroup = infra.name.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "") || "veltrix_splunk";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Panel, { title: "Endpoints", children: endpoints.map((e) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { label: e.label, value: e.value }, e.label)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Panel, { title: "Point a forwarder at this environment", children: indexerTargets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { style: { margin: "0 0 12px", fontSize: 13, color: tokens.muted }, children: [
+        "Add this to a universal forwarder\u2019s ",
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontFamily: mono }, children: "outputs.conf" }),
+        ":"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "pre",
+        {
+          style: {
+            margin: 0,
+            background: tokens.surface2,
+            border: `1px solid ${tokens.border}`,
+            borderRadius: 8,
+            padding: "13px 15px",
+            fontFamily: mono,
+            fontSize: 12,
+            color: tokens.text,
+            overflowX: "auto"
+          },
+          children: `[tcpout]
+defaultGroup = ${tcpoutGroup}
+
+[tcpout:${tcpoutGroup}]
+server = ${indexerTargets.join(", ")}
+sslVerifyServerCert = true`
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { margin: 0, fontSize: 13, color: tokens.muted }, children: "Forwarder targets appear here once the indexer peers report their addresses." }) })
+  ] });
+};
+
+// src/byol/detail/ConfigurationTab.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ConfigurationTab = ({ links, configBase }) => {
+  if (!links || links.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      EmptyState,
+      {
+        title: "No configuration surfaces linked",
+        description: "This app has not surfaced any configuration links for its BYOL environments."
+      }
+    );
+  }
+  const resolve = (link) => {
+    if (configBase && link.configTypeId) return `${configBase}/${link.configTypeId}`;
+    return link.href;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: { margin: 0, fontSize: 13, color: tokens.muted }, children: "Once the environment is running, configure it as code. These open the app\u2019s configuration surfaces." }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 12 }, children: links.map((link) => {
+      const url = resolve(link);
+      const inner = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("h4", { style: { margin: "0 0 4px", fontSize: 13, display: "flex", justifyContent: "space-between", color: tokens.text }, children: [
+          link.title,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: tokens.faint }, "aria-hidden": true, children: "\u2197" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: { margin: 0, fontSize: 12, color: tokens.muted }, children: link.description })
+      ] });
+      const cardStyle = {
+        border: `1px solid ${tokens.border}`,
+        borderRadius: 8,
+        padding: 14,
+        background: tokens.surface,
+        textDecoration: "none",
+        color: "inherit",
+        display: "block",
+        cursor: url ? "pointer" : "default",
+        opacity: url ? 1 : 0.7
+      };
+      return url ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: url, style: cardStyle, children: inner }, link.key) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: cardStyle, title: "This link is unavailable here", children: inner }, link.key);
+    }) })
+  ] });
+};
+
+// src/byol/detail/SettingsTab.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Row2 = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  "div",
+  {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "200px 1fr",
+      gap: 16,
+      padding: "11px 0",
+      borderBottom: `1px solid ${tokens.border}`,
+      fontSize: 13
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: tokens.muted }, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: tokens.text, fontWeight: 600 }, children: value })
+    ]
+  }
+);
+var SettingsTab = ({ infra, busy, onEdit, onDestroy, onDelete }) => {
+  const provider = infra.hosting_type || (infra.cloudProviderId ? "Cloud" : SELF_HOSTED_LABEL);
+  const neverDeployed = isNotStarted(infra.status);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      Panel,
+      {
+        title: "Topology",
+        actions: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { variant: "ghost", size: "sm", onClick: onEdit, disabled: busy, children: "Edit" }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Row2, { label: "Name", value: infra.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Row2, { label: "Deployment type", value: infra.deploymentType ?? "\u2014" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Row2, { label: "Indexers / Search heads", value: `${infra.indexerCount ?? "\u2014"} / ${infra.searchHeadCount ?? "\u2014"}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Row2, { label: "Provider", value: provider }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Row2, { label: "Region", value: infra.region || "\u2014" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Row2, { label: "Environment", value: infra.environmentType || "\u2014" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { border: `1px solid ${tokens.danger}`, borderRadius: 12, padding: "16px 18px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { margin: "0 0 4px", fontSize: 14, color: tokens.danger }, children: "Danger zone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: { margin: "0 0 12px", fontSize: 13, color: tokens.muted }, children: neverDeployed ? "This environment has not been deployed. Deleting removes the record and its plan." : "Destroy tears down every resource in the plan \u2014 instances, storage, network. This cannot be undone." }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+        !neverDeployed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { variant: "ghost", size: "sm", onClick: onDestroy, disabled: busy, children: "Destroy infrastructure" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { variant: "danger", size: "sm", onClick: onDelete, disabled: busy, children: "Delete record" })
+      ] })
+    ] })
+  ] });
+};
+
+// src/byol/detail/ByolPlanModal.tsx
+var import_react = __toESM(require("react"), 1);
+
+// src/byol/diffPlan.ts
+var nz = (v) => v == null ? null : v;
+function differs(current, desired) {
+  return current.tier !== desired.tier || current.kind !== desired.kind || current.name !== desired.name || nz(current.role) !== nz(desired.role) || nz(current.region) !== nz(desired.region);
+}
+function needsReplan(status) {
+  return status === "failed" || status === "attention";
+}
+function diffPlan(current, desired) {
+  const currentByKey = new Map(current.map((c) => [c.planKey, c]));
+  const desiredKeys = new Set(desired.map((d) => d.planKey));
+  const add = [];
+  const change = [];
+  const noop = [];
+  for (const item of desired) {
+    const existing = currentByKey.get(item.planKey);
+    if (!existing) add.push(item);
+    else if (differs(existing, item) || needsReplan(existing.status)) change.push(item);
+    else noop.push(item);
+  }
+  const destroy = current.filter((c) => !desiredKeys.has(c.planKey));
+  return { add, change, destroy, noop };
+}
+function tierRank(tier) {
+  const idx = TIER_ORDER.indexOf(tier);
+  return idx === -1 ? TIER_ORDER.length : idx;
+}
+function buildByolPlan(current, desired) {
+  const diff = diffPlan(current, desired);
+  const summary = {
+    add: diff.add.length,
+    change: diff.change.length,
+    destroy: diff.destroy.length,
+    noop: diff.noop.length
+  };
+  const action = /* @__PURE__ */ new Map();
+  for (const d of diff.add) action.set(d.planKey, "add");
+  for (const d of diff.change) action.set(d.planKey, "change");
+  for (const d of diff.noop) action.set(d.planKey, "noop");
+  const lines = [];
+  desired.forEach((d, i) => {
+    lines.push({
+      tier: d.tier,
+      rank: d.sortOrder ?? i,
+      planKey: d.planKey,
+      action: action.get(d.planKey) ?? "noop",
+      name: d.name,
+      role: nz(d.role),
+      region: nz(d.region),
+      kind: d.kind
+    });
+  });
+  const tail = desired.length;
+  diff.destroy.forEach((c, i) => {
+    lines.push({
+      tier: c.tier,
+      rank: tail + i,
+      planKey: c.planKey,
+      action: "destroy",
+      name: c.name,
+      role: nz(c.role),
+      region: nz(c.region),
+      kind: c.kind
+    });
+  });
+  lines.sort((a, b) => tierRank(a.tier) - tierRank(b.tier) || a.rank - b.rank);
+  const groups = [];
+  const byTier = /* @__PURE__ */ new Map();
+  for (const line of lines) {
+    let group = byTier.get(line.tier);
+    if (!group) {
+      group = { tier: line.tier, items: [] };
+      byTier.set(line.tier, group);
+      groups.push(group);
+    }
+    group.items.push({
+      planKey: line.planKey,
+      action: line.action,
+      name: line.name,
+      role: line.role,
+      region: line.region,
+      kind: line.kind
+    });
+  }
+  return { summary, groups };
+}
+function planHasChanges(summary) {
+  return summary.add + summary.change + summary.destroy > 0;
+}
+
+// src/byol/detail/planLines.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ACTION_META = {
+  add: { glyph: "+", color: tokens.success, label: "add" },
+  change: { glyph: "~", color: tokens.warning, label: "change" },
+  destroy: { glyph: "\u2212", color: tokens.danger, label: "destroy" },
+  noop: { glyph: "\xB7", color: tokens.faint, label: "no change" }
+};
+var tierLabel = (tier) => TIER_LABELS[tier] ?? tier.replace(/-/g, " ");
+var PlanLine = ({ item }) => {
+  const meta = ACTION_META[item.action];
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      style: {
+        position: "relative",
+        border: `1px solid ${tokens.border}`,
+        borderRadius: 8,
+        background: tokens.surface,
+        padding: "10px 12px 10px 14px",
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { position: "absolute", left: 0, top: 0, bottom: 0, width: 3, background: meta.color } }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            title: meta.label,
+            style: {
+              flex: "none",
+              width: 20,
+              height: 20,
+              borderRadius: 5,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontWeight: 700,
+              fontSize: 14,
+              lineHeight: 1,
+              color: meta.color,
+              background: tokens.surface2
+            },
+            children: meta.glyph
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontWeight: 600, fontSize: 13, color: tokens.text, textDecoration: item.action === "destroy" ? "line-through" : "none" }, children: item.name }),
+          item.role ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: 11, color: tokens.faint }, children: item.role }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: 11, color: tokens.muted, flex: "none" }, children: item.region || "\u2014" })
+      ]
+    }
+  );
+};
+var PlanGroup = ({ tier, items }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "h3",
+    {
+      style: {
+        margin: "0 0 8px",
+        fontSize: 12,
+        letterSpacing: ".08em",
+        textTransform: "uppercase",
+        color: tokens.primary
+      },
+      children: tierLabel(tier)
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlanLine, { item }, item.planKey)) })
+] });
+
+// src/byol/detail/ByolPlanModal.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var InfoPanel = ({ title, children }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { border: `1px solid ${tokens.border}`, borderRadius: 8, background: tokens.surface2, overflow: "hidden" }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      style: {
+        padding: "8px 12px",
+        borderBottom: `1px solid ${tokens.border}`,
+        fontSize: 11,
+        letterSpacing: ".08em",
+        textTransform: "uppercase",
+        color: tokens.primary,
+        fontWeight: 700
+      },
+      children: title
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: "10px 12px" }, children })
+] });
+var NetworkPanel = ({ plan }) => {
+  if (!plan.network) {
+    if (!plan.networkUnavailable) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InfoPanel, { title: "Network", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { fontSize: 13, color: tokens.muted }, children: "Subnet allocation preview is temporarily unavailable \u2014 the CIDR is reserved when you apply." }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InfoPanel, { title: "Network", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { fontSize: 13, color: tokens.text }, children: [
+    "Subnet",
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { style: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", color: tokens.primary }, children: plan.network.subnetCidr }),
+    " ",
+    "will be allocated in",
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { style: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", color: tokens.text }, children: plan.network.networkRef }),
+    "."
+  ] }) });
+};
+var TagsPanel = ({ plan }) => {
+  const entries = plan.tags ? Object.entries(plan.tags) : [];
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InfoPanel, { title: "Tags applied to every resource", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "grid", gridTemplateColumns: "auto 1fr", gap: "4px 12px", fontSize: 12 }, children: entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "span",
+      {
+        style: {
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+          color: tokens.muted,
+          whiteSpace: "nowrap"
+        },
+        children: key
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: tokens.text, wordBreak: "break-all" }, children: value })
+  ] }, key)) }) });
+};
+var SummaryChips = ({ plan }) => {
+  const { add, change, destroy } = plan.summary;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Badge, { variant: "success", size: "sm", children: [
+      "+",
+      add,
+      " to add"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Badge, { variant: "warning", size: "sm", children: [
+      "~",
+      change,
+      " to change"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Badge, { variant: "danger", size: "sm", children: [
+      "\u2212",
+      destroy,
+      " to destroy"
+    ] }),
+    plan.summary.noop > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { fontSize: 12, color: tokens.faint }, children: [
+      plan.summary.noop,
+      " unchanged"
+    ] }) : null
+  ] });
+};
+var PlanBody = ({ plan, loading, error, allowApplyWithoutChanges }) => {
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "24px 0", color: tokens.muted, fontSize: 13 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, { size: "sm" }),
+      " Computing plan\u2026"
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: "12px 0", color: tokens.danger, fontSize: 13 }, children: error });
+  }
+  if (!plan) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SummaryChips, { plan }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NetworkPanel, { plan }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TagsPanel, { plan }),
+    !planHasChanges(plan.summary) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        style: {
+          fontSize: 13,
+          color: tokens.muted,
+          background: tokens.surface2,
+          border: `1px solid ${tokens.border}`,
+          borderRadius: 8,
+          padding: "10px 14px"
+        },
+        children: allowApplyWithoutChanges ? "No plan changes \u2014 the previous run did not complete. Apply to re-run the deployment with the same plan." : "No changes. Infrastructure is up to date."
+      }
+    ) : plan.groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PlanGroup, { tier: group.tier, items: group.items }, group.tier))
+  ] });
+};
+var ByolPlanModal = ({
+  isOpen,
+  onClose,
+  plan,
+  loading,
+  error,
+  applying,
+  onApply,
+  infraName,
+  allowApplyWithoutChanges
+}) => {
+  const noChanges = !plan || !planHasChanges(plan.summary);
+  const applyDisabled = loading || applying || noChanges && !allowApplyWithoutChanges;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      size: "lg",
+      title: "Review deployment plan",
+      subtitle: infraName ? `Changes that will be applied to ${infraName}.` : "Changes that will be applied to this environment.",
+      disableBackdropClose: applying,
+      footer: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClose, disabled: applying, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { variant: "primary", size: "sm", onClick: onApply, isLoading: applying, disabled: applyDisabled, children: "Apply" })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PlanBody, { plan, loading, error, allowApplyWithoutChanges })
+    }
+  );
+};
+
+// src/byol/detail/DestroyPlanModal.tsx
+var import_react2 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DestroyPlanModal = ({
+  isOpen,
+  onClose,
+  resources,
+  loading,
+  error,
+  destroying,
+  onConfirm,
+  infraName
+}) => {
+  const plan = (0, import_react2.useMemo)(() => resources ? buildByolPlan(resources, []) : null, [resources]);
+  const destroyCount = plan?.summary.destroy ?? 0;
+  const confirmDisabled = loading || destroying;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      size: "lg",
+      title: "Destroy infrastructure",
+      subtitle: infraName ? `Every resource for "${infraName}" will be torn down.` : "Every resource for this environment will be torn down.",
+      disableBackdropClose: destroying,
+      footer: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClose, disabled: destroying, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { variant: "danger", size: "sm", onClick: onConfirm, isLoading: destroying, disabled: confirmDisabled, children: "Destroy" })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Alert, { variant: "danger", title: "This cannot be undone", children: "Destroying removes every instance, storage volume, and network resource provisioned for this environment." }),
+        error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 13, color: tokens.danger }, children: error }) : null,
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "8px 0", color: tokens.muted, fontSize: 13 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, { size: "sm" }),
+          " Loading current resources\u2026"
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Badge, { variant: "danger", size: "sm", children: [
+            "\u2212",
+            destroyCount,
+            " to destroy"
+          ] }),
+          plan && plan.groups.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: plan.groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlanGroup, { tier: group.tier, items: group.items }, group.tier)) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: 13,
+                color: tokens.muted,
+                background: tokens.surface2,
+                border: `1px solid ${tokens.border}`,
+                borderRadius: 8,
+                padding: "10px 14px"
+              },
+              children: "No resource inventory is available for this environment \u2014 it will still be destroyed."
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+
+// src/byol/detail/icons.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Svg = ({ size = 16, style, children }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    focusable: false,
+    style: { display: "block", flex: "none", ...style },
+    children
+  }
+);
+var OverviewIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "3", y: "3", width: "7", height: "9", rx: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "14", y: "3", width: "7", height: "5", rx: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "14", y: "12", width: "7", height: "9", rx: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "3", y: "16", width: "7", height: "5", rx: "1" })
+] });
+var ResourcesIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "6", y1: "6", x2: "6.01", y2: "6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "6", y1: "18", x2: "6.01", y2: "18" })
+] });
+var ActivityIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Svg, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2" }) });
+var AccessIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "7.5", cy: "15.5", r: "5.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m21 2-9.6 9.6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m15.5 7.5 3 3L22 7l-3-3" })
+] });
+var ConfigurationIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "21", y1: "4", x2: "14", y2: "4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "10", y1: "4", x2: "3", y2: "4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "21", y1: "12", x2: "12", y2: "12" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "8", y1: "12", x2: "3", y2: "12" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "21", y1: "20", x2: "16", y2: "20" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "12", y1: "20", x2: "3", y2: "20" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "14", y1: "2", x2: "14", y2: "6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "8", y1: "10", x2: "8", y2: "14" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "16", y1: "18", x2: "16", y2: "22" })
+] });
+var SettingsIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+] });
+
+// src/byol/ByolInfrastructureDetail.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var PROVISIONING_POLL_MS = 4e3;
+var SECTIONS = [
+  { key: "overview", label: "Overview", Icon: OverviewIcon },
+  { key: "resources", label: "Resources", Icon: ResourcesIcon },
+  { key: "activity", label: "Activity", Icon: ActivityIcon },
+  { key: "access", label: "Access", Icon: AccessIcon },
+  { key: "config", label: "Configuration", Icon: ConfigurationIcon },
+  { key: "settings", label: "Settings", Icon: SettingsIcon }
+];
+function derivePlan(infra) {
+  const plan = buildByolResourcePlan({
+    deploymentType: infra.deploymentType,
+    indexerCount: infra.indexerCount,
+    searchHeadCount: infra.searchHeadCount,
+    hostingType: infra.hosting_type,
+    isCloud: Boolean(infra.cloudProviderId),
+    region: infra.region ?? null,
+    indexerRegions: (infra.indexerRegions ?? []).map((r) => r.region),
+    searchHeadRegions: (infra.searchHeadRegions ?? []).map((r) => r.region)
+  });
+  return plan.map((p) => ({
+    id: p.planKey,
+    infrastructureId: infra.id,
+    tier: p.tier,
+    kind: p.kind,
+    name: p.name,
+    role: p.role,
+    region: p.region,
+    status: "not_started",
+    externalRef: null,
+    message: null,
+    planKey: p.planKey,
+    sortOrder: p.sortOrder
+  }));
+}
+function readSectionFromUrl() {
+  if (typeof window === "undefined") return null;
+  const s2 = new URLSearchParams(window.location.search).get("section");
+  return SECTIONS.some((x) => x.key === s2) ? s2 : null;
+}
+var ByolInfrastructureDetail = ({
+  apiBase,
+  initialInfra,
+  configBase,
+  configLinks,
+  onBack,
+  onEdit,
+  onDeleted,
+  onChanged,
+  reloadSignal = 0
+}) => {
+  const [infra, setInfra] = (0, import_react3.useState)(initialInfra);
+  const [resources, setResources] = (0, import_react3.useState)([]);
+  const [deployments, setDeployments] = (0, import_react3.useState)([]);
+  const [section, setSection] = (0, import_react3.useState)(readSectionFromUrl() ?? "overview");
+  const [collapsed, setCollapsed] = (0, import_react3.useState)(false);
+  const [loading, setLoading] = (0, import_react3.useState)(true);
+  const [busy, setBusy] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const [planOpen, setPlanOpen] = (0, import_react3.useState)(false);
+  const [plan, setPlan] = (0, import_react3.useState)(null);
+  const [planLoading, setPlanLoading] = (0, import_react3.useState)(false);
+  const [planError, setPlanError] = (0, import_react3.useState)(null);
+  const [applying, setApplying] = (0, import_react3.useState)(false);
+  const [destroyOpen, setDestroyOpen] = (0, import_react3.useState)(false);
+  const [destroyResources, setDestroyResources] = (0, import_react3.useState)(null);
+  const [destroyLoading, setDestroyLoading] = (0, import_react3.useState)(false);
+  const [destroyError, setDestroyError] = (0, import_react3.useState)(null);
+  const [destroying, setDestroying] = (0, import_react3.useState)(false);
+  const { confirm } = useConfirmDialog();
+  const id = initialInfra.id;
+  const initialRef = (0, import_react3.useRef)(initialInfra);
+  initialRef.current = initialInfra;
+  const load = (0, import_react3.useCallback)(async () => {
+    setError(null);
+    try {
+      const [freshInfra, res, deps] = await Promise.all([
+        getInfra(apiBase, id).catch(() => initialRef.current),
+        getResources(apiBase, id).catch(() => []),
+        getDeployments(apiBase, id).catch(() => [])
+      ]);
+      setInfra(freshInfra);
+      setResources(res);
+      setDeployments(deps);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBase, id]);
+  (0, import_react3.useEffect)(() => {
+    void load();
+  }, [load, reloadSignal]);
+  (0, import_react3.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    params.set("infra", id);
+    params.set("section", section);
+    window.history.replaceState(null, "", `${window.location.pathname}?${params.toString()}`);
+  }, [id, section]);
+  const refresh = (0, import_react3.useCallback)(async () => {
+    await load();
+    onChanged();
+  }, [load, onChanged]);
+  const transient = infra.status === "provisioning" || infra.status === "destroying";
+  (0, import_react3.useEffect)(() => {
+    if (!transient) return;
+    let active = true;
+    const timer = setInterval(() => {
+      if (active) void refresh();
+    }, PROVISIONING_POLL_MS);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, [transient, refresh]);
+  const runAction = (0, import_react3.useCallback)(
+    async (fn) => {
+      setBusy(true);
+      setError(null);
+      try {
+        await fn();
+        await refresh();
+      } catch (e) {
+        setError(e.message);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [refresh]
+  );
+  const openPlan = (0, import_react3.useCallback)(() => {
+    setPlanOpen(true);
+    setPlan(null);
+    setPlanError(null);
+    setPlanLoading(true);
+    getPlan(apiBase, id).then((p) => setPlan(p)).catch((e) => setPlanError(e.message)).finally(() => setPlanLoading(false));
+  }, [apiBase, id]);
+  const closePlan = (0, import_react3.useCallback)(() => {
+    if (applying) return;
+    setPlanOpen(false);
+  }, [applying]);
+  const onApply = (0, import_react3.useCallback)(async () => {
+    setApplying(true);
+    setPlanError(null);
+    try {
+      await deployInfra(apiBase, id);
+      setPlanOpen(false);
+      setSection("activity");
+      await refresh();
+    } catch (e) {
+      setPlanError(e.message);
+    } finally {
+      setApplying(false);
+    }
+  }, [apiBase, id, refresh]);
+  const openDestroy = (0, import_react3.useCallback)(() => {
+    setDestroyOpen(true);
+    setDestroyError(null);
+    setDestroyResources(null);
+    setDestroyLoading(true);
+    getResources(apiBase, id).then((res) => setDestroyResources(res)).catch(() => setDestroyResources(resources)).finally(() => setDestroyLoading(false));
+  }, [apiBase, id, resources]);
+  const closeDestroy = (0, import_react3.useCallback)(() => {
+    if (destroying) return;
+    setDestroyOpen(false);
+  }, [destroying]);
+  const confirmDestroy = (0, import_react3.useCallback)(async () => {
+    setDestroying(true);
+    setDestroyError(null);
+    try {
+      await destroyInfra(apiBase, id);
+      setDestroyOpen(false);
+      setSection("activity");
+      await refresh();
+    } catch (e) {
+      setDestroyError(e.message);
+    } finally {
+      setDestroying(false);
+    }
+  }, [apiBase, id, refresh]);
+  const onLifecycle = (action) => runAction(() => lifecycleInfra(apiBase, id, action));
+  const onDelete = async () => {
+    const ok = await confirm({
+      title: "Delete infrastructure record",
+      message: `Delete "${infra.name}"? This cannot be undone.`,
+      confirmText: "Delete",
+      cancelText: "Cancel",
+      variant: "danger"
+    });
+    if (!ok) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await Promise.resolve().then(() => (init_client(), client_exports)).then(({ authFetch: authFetch2 }) => authFetch2(`${apiBase}/${id}`, { method: "DELETE" }));
+      if (!res.ok && res.status !== 204) throw new Error(await errorText(res));
+      onDeleted();
+    } catch (e) {
+      setError(e.message);
+      setBusy(false);
+    }
+  };
+  const status = infra.status;
+  const notStarted = isNotStarted(status);
+  const failed = status === "failed" || status === "error";
+  const provisioning = status === "provisioning" || status === "destroying";
+  const running = isRunning(status);
+  const deprovisioned = status === "deprovisioned" || status === "decommissioned";
+  const latestRunAction = deployments[0]?.action;
+  const failedDestroy = failed && latestRunAction === "destroy";
+  const derived = resources.length === 0;
+  const displayResources = (0, import_react3.useMemo)(
+    () => derived ? derivePlan(infra) : resources,
+    [derived, infra, resources]
+  );
+  const provider = infra.hosting_type || (infra.cloudProviderId ? "Cloud" : SELF_HOSTED_LABEL);
+  const primaryAction = (() => {
+    if (notStarted) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "primary", size: "sm", onClick: openPlan, disabled: busy, children: "Deploy environment" });
+    if (deprovisioned) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "primary", size: "sm", onClick: openPlan, disabled: busy, children: "Re-provision" });
+    if (failedDestroy) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "danger", size: "sm", onClick: openDestroy, disabled: busy, children: "Retry Destroy" });
+    if (failed) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "primary", size: "sm", onClick: openPlan, disabled: busy, children: "Retry deployment" });
+    if (provisioning) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "primary", size: "sm", onClick: () => setSection("activity"), children: "View progress" });
+    return null;
+  })();
+  const content = (() => {
+    switch (section) {
+      case "overview":
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OverviewTab, { infra, resources: displayResources });
+      case "resources":
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ResourcesTab, { resources: displayResources, derived });
+      case "activity":
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ActivityTab, { deployments });
+      case "access":
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AccessTab, { infra, resources });
+      case "config":
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ConfigurationTab, { links: configLinks ?? [], configBase });
+      case "settings":
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          SettingsTab,
+          {
+            infra,
+            busy,
+            onEdit: () => onEdit(infra),
+            onDestroy: openDestroy,
+            onDelete
+          }
+        );
+    }
+  })();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "button",
+      {
+        onClick: onBack,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 7,
+          color: tokens.muted,
+          fontSize: 13,
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: 0,
+          marginBottom: 12
+        },
+        children: "\u2039 Back to infrastructure"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { border: `1px solid ${tokens.border}`, borderRadius: 12, background: tokens.surface, overflow: "hidden" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "18px 24px", alignItems: "flex-start", justifyContent: "space-between", padding: 20 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { minWidth: 260, flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { style: { margin: 0, fontSize: 21, letterSpacing: "-.01em", color: tokens.text }, children: infra.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StatusPill, { status }),
+            loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, { size: "sm" }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "12px 20px", marginTop: 12 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Meta, { label: "Environment", children: infra.environmentType || "\u2014" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Meta, { label: "Deployment", children: infra.deploymentType ?? "\u2014" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Meta, { label: "Provider", children: provider }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Meta, { label: "Region", children: infra.region || "\u2014" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Meta, { label: "Updated", children: formatDate(infra.updatedAt) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ProgressMeter, { resources: displayResources }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 10 }, children: [
+          primaryAction,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }, children: [
+            running ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onLifecycle("stop"), disabled: busy, children: "Stop" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onLifecycle("restart"), disabled: busy, children: "Restart" })
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onEdit(infra), disabled: busy, children: "Edit topology" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => void refresh(), disabled: busy, children: "Refresh" })
+          ] })
+        ] })
+      ] }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { padding: "0 20px 12px", color: tokens.danger, fontSize: 13 }, children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", borderTop: `1px solid ${tokens.border}`, alignItems: "stretch" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "aside",
+          {
+            style: {
+              flex: `0 0 ${collapsed ? 56 : 220}px`,
+              width: collapsed ? 56 : 220,
+              borderRight: `1px solid ${tokens.border}`,
+              background: tokens.surface2,
+              padding: "14px 12px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 2,
+              transition: "flex-basis .12s, width .12s"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: collapsed ? "center" : "space-between", padding: "2px 6px 10px" }, children: [
+                collapsed ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", color: tokens.faint, fontWeight: 700 }, children: "This infrastructure" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "button",
+                  {
+                    onClick: () => setCollapsed((c) => !c),
+                    title: collapsed ? "Expand" : "Collapse",
+                    "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                    style: {
+                      border: `1px solid ${tokens.border}`,
+                      background: tokens.surface,
+                      color: tokens.muted,
+                      borderRadius: 6,
+                      width: 24,
+                      height: 24,
+                      cursor: "pointer",
+                      lineHeight: 1
+                    },
+                    children: collapsed ? "\xBB" : "\xAB"
+                  }
+                )
+              ] }),
+              SECTIONS.map((s2) => {
+                const active = s2.key === section;
+                const { Icon } = s2;
+                return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  "button",
+                  {
+                    onClick: () => setSection(s2.key),
+                    title: s2.label,
+                    style: {
+                      position: "relative",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: collapsed ? "center" : "flex-start",
+                      gap: 11,
+                      padding: collapsed ? "9px 0" : "9px 10px",
+                      borderRadius: 8,
+                      border: "none",
+                      background: active ? tokens.surface : "transparent",
+                      color: active ? tokens.primary : tokens.muted,
+                      fontWeight: 600,
+                      fontSize: 13,
+                      cursor: "pointer",
+                      textAlign: "left",
+                      width: "100%"
+                    },
+                    children: [
+                      active ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { position: "absolute", left: 0, top: 8, bottom: 8, width: 3, borderRadius: "0 3px 3px 0", background: tokens.primary } }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { width: 18, display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: 16 }) }),
+                      collapsed ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { flex: 1 }, children: s2.label }),
+                      !collapsed && s2.key === "resources" && displayResources.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: 11, fontWeight: 600, color: tokens.faint }, children: displayResources.length }) : null,
+                      !collapsed && s2.key === "activity" && provisioning ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { width: 7, height: 7, borderRadius: "50%", background: tokens.info } }) : null
+                    ]
+                  },
+                  s2.key
+                );
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { flex: 1, minWidth: 0, padding: "22px 24px" }, children: content })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      ByolPlanModal,
+      {
+        isOpen: planOpen,
+        onClose: closePlan,
+        plan,
+        loading: planLoading,
+        error: planError,
+        applying,
+        onApply,
+        infraName: infra.name,
+        allowApplyWithoutChanges: infra.status === "failed" || infra.status === "error" || infra.status === "not_started"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      DestroyPlanModal,
+      {
+        isOpen: destroyOpen,
+        onClose: closeDestroy,
+        resources: destroyResources,
+        loading: destroyLoading,
+        error: destroyError,
+        destroying,
+        onConfirm: confirmDestroy,
+        infraName: infra.name
+      }
+    )
+  ] });
+};
+
+// src/byol/ClusterPlacementField.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var MODE_OPTIONS = [
+  { value: "single", label: "Single site \u2014 all nodes in the main region" },
+  { value: "multi-site", label: "Multi-site \u2014 spread nodes by percent" }
+];
+var AWS_AZ_LETTERS = ["a", "b", "c", "d", "e", "f"];
+var GCP_AZ_LETTERS = ["a", "b", "c", "d", "f"];
+var AZURE_ZONES = ["1", "2", "3"];
+function azOptionsFor(providerCode, region) {
+  const code = (providerCode || "aws").toLowerCase();
+  const base = region || "region";
+  if (code === "azure") return AZURE_ZONES.map((z) => ({ value: z, label: `Zone ${z}` }));
+  if (code === "gcp") return GCP_AZ_LETTERS.map((l) => ({ value: `${base}-${l}`, label: `${base}-${l}` }));
+  return AWS_AZ_LETTERS.map((l) => ({ value: `${base}${l}`, label: `${base}${l}` }));
+}
+function evenPercents(count) {
+  if (count <= 0) return [];
+  const base = Math.floor(100 / count);
+  const remainder = 100 - base * count;
+  return Array.from({ length: count }, (_, i) => base + (i < remainder ? 1 : 0));
+}
+function defaultSites(granularity, primaryRegion, providerCode, regionOptions) {
+  const [p0, p1] = evenPercents(2);
+  if (granularity === "az") {
+    const az = azOptionsFor(providerCode, primaryRegion);
+    return [
+      { site: az[0]?.value ?? `${primaryRegion}a`, percent: p0 },
+      { site: az[1]?.value ?? `${primaryRegion}b`, percent: p1 }
+    ];
+  }
+  const regions = regionOptions.map((o) => o.value).filter(Boolean);
+  const first = primaryRegion || regions[0] || "";
+  const second = regions.find((r) => r !== first) ?? "";
+  return [
+    { site: first, percent: p0 },
+    { site: second, percent: p1 }
+  ];
+}
+var ClusterPlacementField = ({
+  label,
+  placement,
+  nodeCount,
+  primaryRegion,
+  providerCode,
+  regionOptions,
+  onChange
+}) => {
+  const multi = placement.mode === "multi-site";
+  const granularity = placement.granularity ?? "az";
+  const sites = placement.sites ?? [];
+  const siteOptions = granularity === "az" ? azOptionsFor(providerCode, primaryRegion) : regionOptions;
+  const emit = (next) => onChange({ mode: "multi-site", granularity, sites: next });
+  const setMode = (mode) => {
+    if (mode !== "multi-site") return onChange({ mode: "single" });
+    onChange({
+      mode: "multi-site",
+      granularity,
+      sites: sites.length >= 2 ? sites : defaultSites(granularity, primaryRegion, providerCode, regionOptions)
+    });
+  };
+  const setGranularity = (value) => {
+    const g = value;
+    onChange({ mode: "multi-site", granularity: g, sites: defaultSites(g, primaryRegion, providerCode, regionOptions) });
+  };
+  const updateSite = (i, patch) => emit(sites.map((s2, idx) => idx === i ? { ...s2, ...patch } : s2));
+  const addSite = () => {
+    const used = new Set(sites.map((s2) => s2.site));
+    const nextSite = siteOptions.map((o) => o.value).find((v) => !used.has(v)) ?? "";
+    emit([...sites, { site: nextSite, percent: 0 }]);
+  };
+  const removeSite = (i) => emit(sites.filter((_, idx) => idx !== i));
+  const distributeEvenly = () => {
+    const percents = evenPercents(sites.length);
+    emit(sites.map((s2, i) => ({ ...s2, percent: percents[i] })));
+  };
+  const allocation = multi ? allocateNodesBySite(nodeCount, sites) : [];
+  const validationError = multi ? validatePlacement(placement, nodeCount) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select, { label, value: placement.mode, onChange: setMode, options: MODE_OPTIONS }),
+    multi ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 10,
+          padding: 12,
+          border: `1px solid ${tokens.border}`,
+          borderRadius: 8,
+          background: tokens.surface2
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Select,
+            {
+              label: "Spread across",
+              value: granularity,
+              onChange: setGranularity,
+              options: [...PLACEMENT_GRANULARITY_OPTIONS]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: sites.map((site, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 92px auto auto", gap: 8, alignItems: "end" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              Select,
+              {
+                label: i === 0 ? granularity === "az" ? "Zone" : "Region" : void 0,
+                value: site.site,
+                onChange: (value) => updateSite(i, { site: value }),
+                options: siteOptions,
+                placeholder: "Select\u2026"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              Input,
+              {
+                label: i === 0 ? "Share %" : void 0,
+                type: "number",
+                min: 0,
+                max: 100,
+                value: String(site.percent),
+                onChange: (e) => updateSite(i, { percent: Number(e.target.value) || 0 }),
+                fullWidth: true
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { style: { fontSize: 12, color: tokens.muted, paddingBottom: 10, whiteSpace: "nowrap" }, children: [
+              "\u2192 ",
+              allocation[i]?.count ?? 0,
+              " node",
+              (allocation[i]?.count ?? 0) === 1 ? "" : "s"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: () => removeSite(i),
+                disabled: sites.length <= 2,
+                "aria-label": `Remove site ${i + 1}`,
+                style: { marginBottom: 4 },
+                children: "\u2715"
+              }
+            )
+          ] }, i)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "secondary", size: "sm", onClick: addSite, disabled: sites.length >= siteOptions.length, children: "Add site" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "ghost", size: "sm", onClick: distributeEvenly, children: "Distribute evenly" })
+          ] }),
+          validationError ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { margin: 0, fontSize: 12, color: tokens.danger }, children: validationError }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { style: { margin: 0, fontSize: 12, color: tokens.muted }, children: [
+            sites.length,
+            " sites \xB7 ",
+            allocation.reduce((n, a) => n + a.count, 0),
+            " of ",
+            nodeCount,
+            " nodes placed."
+          ] })
+        ]
+      }
+    ) : null
+  ] });
+};
+
+// src/byol/ByolInfrastructureManager.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ByolInfrastructureManager = ({
+  apiBase,
+  title = "BYOL Infrastructure",
+  deploymentTypes = DEFAULT_DEPLOYMENT_TYPES,
+  configBase,
+  configLinks,
+  versionOptions = [],
+  defaultVersionId
+}) => {
+  const [infrastructure, setInfrastructure] = (0, import_react4.useState)([]);
+  const [tags, setTags] = (0, import_react4.useState)([]);
+  const [cloudProviders, setCloudProviders] = (0, import_react4.useState)([]);
+  const [regions, setRegions] = (0, import_react4.useState)([]);
+  const [cloudAccounts, setCloudAccounts] = (0, import_react4.useState)([]);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(true);
+  const [selectedId, setSelectedId] = (0, import_react4.useState)(() => {
+    if (typeof window === "undefined") return null;
+    return new URLSearchParams(window.location.search).get("infra");
+  });
+  const [reloadSignal, setReloadSignal] = (0, import_react4.useState)(0);
+  const [search, setSearch] = (0, import_react4.useState)("");
+  const [environmentFilter, setEnvironmentFilter] = (0, import_react4.useState)(null);
+  const [deploymentFilter, setDeploymentFilter] = (0, import_react4.useState)(null);
+  const [statusFilter, setStatusFilter] = (0, import_react4.useState)(null);
+  const [sortField, setSortField] = (0, import_react4.useState)("name");
+  const [sortDir, setSortDir] = (0, import_react4.useState)("asc");
+  const [page, setPage] = (0, import_react4.useState)(1);
+  const [pageSize, setPageSize] = (0, import_react4.useState)(10);
+  const [dialogOpen, setDialogOpen] = (0, import_react4.useState)(false);
+  const [editing, setEditing] = (0, import_react4.useState)(null);
+  const [form, setForm] = (0, import_react4.useState)(BLANK_FORM);
+  const [submitting, setSubmitting] = (0, import_react4.useState)(false);
+  const [formError, setFormError] = (0, import_react4.useState)(null);
+  const load = (0, import_react4.useCallback)(() => {
+    setIsLoading(true);
+    setError(null);
+    return authFetch(apiBase).then((res) => res.ok ? res.json() : Promise.reject(new Error(`HTTP ${res.status}`))).then((data) => setInfrastructure(Array.isArray(data) ? data : [])).catch((e) => setError(e.message)).finally(() => setIsLoading(false));
+  }, [apiBase]);
+  (0, import_react4.useEffect)(() => {
+    void load();
+  }, [load]);
+  (0, import_react4.useEffect)(() => {
+    authFetch("/api/tags").then((res) => res.ok ? res.json() : []).then((data) => setTags(Array.isArray(data) ? data : [])).catch(() => setTags([]));
+    authFetch("/api/cloud-providers").then((res) => res.ok ? res.json() : []).then(
+      (data) => setCloudProviders(Array.isArray(data) ? data.filter((c) => c.isActive !== false) : [])
+    ).catch(() => setCloudProviders([]));
+    authFetch("/api/cloud-accounts").then((res) => res.ok ? res.json() : []).then((data) => setCloudAccounts(Array.isArray(data) ? data : [])).catch(() => setCloudAccounts([]));
+  }, []);
+  const isCloud = form.providerId !== "" && form.providerId !== SELF_HOSTED;
+  const showRegion = isCloud && form.deploymentType === "distributed";
+  const isByoc = BYOC_NETWORK_MODES.has(form.networkMode);
+  const showCloudAccount = isCloud;
+  const cloudAccountRequired = isByoc && isCloud;
+  (0, import_react4.useEffect)(() => {
+    if (!isCloud) {
+      setRegions([]);
+      return;
+    }
+    let cancelled = false;
+    authFetch(`/api/cloud-providers/${form.providerId}/regions`).then((res) => res.ok ? res.json() : []).then((data) => {
+      if (!cancelled) setRegions(Array.isArray(data) ? data.filter((r) => r.isActive !== false) : []);
+    }).catch(() => {
+      if (!cancelled) setRegions([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isCloud, form.providerId]);
+  const openCreate = () => {
+    setEditing(null);
+    setForm({ ...BLANK_FORM, versionId: defaultVersionId ?? "" });
+    setFormError(null);
+    setDialogOpen(true);
+  };
+  const openEdit = (row) => {
+    setEditing(row);
+    setForm(editFormState(row));
+    setFormError(null);
+    setDialogOpen(true);
+  };
+  const closeDialog = (0, import_react4.useCallback)(() => {
+    if (submitting) return;
+    setDialogOpen(false);
+  }, [submitting]);
+  const setField = (key, value) => setForm((prev) => ({ ...prev, [key]: value }));
+  const handleProviderChange = (value) => setForm((prev) => ({ ...prev, providerId: value, cloudAccountConnectionId: "" }));
+  const handleSubmit = async () => {
+    if (!form.name.trim()) {
+      setFormError("Name is required");
+      return;
+    }
+    const indexerCount = Number(form.indexerCount);
+    const searchHeadCount = Number(form.searchHeadCount);
+    if (form.deploymentType === "distributed") {
+      if (indexerCount < 3) {
+        setFormError("Distributed deployments require at least 3 indexers");
+        return;
+      }
+      if (searchHeadCount < 2) {
+        setFormError("Distributed deployments require at least 2 search heads");
+        return;
+      }
+      if (showRegion) {
+        const indexerErr = validatePlacement(form.indexerPlacement, indexerCount);
+        if (indexerErr) {
+          setFormError(`Indexer placement: ${indexerErr}`);
+          return;
+        }
+        const searchErr = validatePlacement(form.searchHeadPlacement, searchHeadCount);
+        if (searchErr) {
+          setFormError(`Search head placement: ${searchErr}`);
+          return;
+        }
+      }
+    }
+    if (cloudAccountRequired && !form.cloudAccountConnectionId) {
+      setFormError("Select a verified cloud account for a BYOC deployment target");
+      return;
+    }
+    const selfHosted = form.providerId === SELF_HOSTED;
+    const selectedCloud = cloudProviders.find((c) => c.id === form.providerId);
+    const distributed = form.deploymentType === "distributed";
+    const normalizePlacement = (p) => distributed && showRegion && p?.mode === "multi-site" ? p : { mode: "single" };
+    setSubmitting(true);
+    setFormError(null);
+    const payload = {
+      name: form.name.trim(),
+      deploymentType: form.deploymentType,
+      environmentType: form.environmentType,
+      hosting_type: selfHosted ? SELF_HOSTED_LABEL : selectedCloud?.name ?? "",
+      cloudProviderId: selfHosted ? void 0 : form.providerId || void 0,
+      region: showRegion ? form.region : "",
+      indexerCount,
+      searchHeadCount,
+      networkMode: form.networkMode,
+      dnsMode: form.dnsMode,
+      cloudAccountConnectionId: showCloudAccount ? form.cloudAccountConnectionId : void 0,
+      // Topology authoring — only meaningful for distributed deployments.
+      controlPlaneLayout: distributed ? form.controlPlaneLayout : "dedicated",
+      heavyForwarderCount: distributed ? Math.max(1, Number(form.heavyForwarderCount) || 1) : 1,
+      // Compute size override; empty → the cloud default (t2.medium-class). Only
+      // meaningful for a cloud deployment.
+      instanceType: !selfHosted ? form.instanceType.trim() || void 0 : void 0,
+      indexerPlacement: normalizePlacement(form.indexerPlacement),
+      searchHeadPlacement: normalizePlacement(form.searchHeadPlacement),
+      versionId: form.versionId || void 0
+    };
+    try {
+      const res = await authFetch(editing ? `${apiBase}/${editing.id}` : apiBase, {
+        method: editing ? "PUT" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      if (!res.ok) throw new Error(await errorText(res));
+      setDialogOpen(false);
+      await load();
+      if (editing) setReloadSignal((n) => n + 1);
+    } catch (e) {
+      setFormError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const openDetail = (id) => {
+    setSelectedId(id);
+    if (typeof window !== "undefined" && id === null) {
+      const params = new URLSearchParams(window.location.search);
+      params.delete("infra");
+      params.delete("section");
+      const qs = params.toString();
+      window.history.replaceState(null, "", qs ? `${window.location.pathname}?${qs}` : window.location.pathname);
+    }
+  };
+  const columns = [
+    { key: "name", header: "Name", render: (row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: row.name }) },
+    { key: "deploymentType", header: "Deployment", render: (row) => row.deploymentType ?? "\u2014" },
+    { key: "environmentType", header: "Environment", render: (row) => row.environmentType ?? "\u2014" },
+    { key: "hosting_type", header: "Provider", render: (row) => row.hosting_type ?? "\u2014" },
+    { key: "region", header: "Region", render: (row) => row.region || "\u2014" },
+    { key: "indexerCount", header: "Indexers", align: "right", render: (row) => row.indexerCount ?? "\u2014" },
+    { key: "searchHeadCount", header: "Search heads", align: "right", render: (row) => row.searchHeadCount ?? "\u2014" },
+    { key: "status", header: "Status", render: (row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StatusPill, { status: row.status }) },
+    { key: "updatedAt", header: "Updated", render: (row) => formatDate(row.updatedAt) },
+    { key: "chevron", header: "", align: "right", width: "32px", render: () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": true, style: { color: tokens.faint }, children: "\u203A" }) }
+  ];
+  const environmentOptions = (0, import_react4.useMemo)(() => tags.map((t) => ({ value: t.name, label: t.name })), [tags]);
+  const providerOptions = (0, import_react4.useMemo)(
+    () => [
+      { value: SELF_HOSTED, label: SELF_HOSTED_LABEL },
+      ...cloudProviders.map((c) => ({ value: c.id, label: c.name }))
+    ],
+    [cloudProviders]
+  );
+  const regionOptions = (0, import_react4.useMemo)(
+    () => regions.map((r) => ({ value: r.code, label: `${r.name} (${r.code})` })),
+    [regions]
+  );
+  const selectedProvider = (0, import_react4.useMemo)(
+    () => cloudProviders.find((c) => c.id === form.providerId),
+    [cloudProviders, form.providerId]
+  );
+  const verifiedCloudAccounts = (0, import_react4.useMemo)(
+    () => cloudAccounts.filter(
+      (a) => a.status === "VERIFIED" && (!selectedProvider?.code || a.provider === selectedProvider.code)
+    ),
+    [cloudAccounts, selectedProvider]
+  );
+  const cloudAccountOptions = (0, import_react4.useMemo)(
+    () => verifiedCloudAccounts.map((a) => ({
+      value: a.id,
+      label: `${a.name} (${a.provider}${a.scope === "platform" ? " \xB7 Veltrix-managed" : ""})`
+    })),
+    [verifiedCloudAccounts]
+  );
+  const statusFilterOptions = (0, import_react4.useMemo)(() => {
+    const seen = /* @__PURE__ */ new Set();
+    infrastructure.forEach((i) => seen.add(i.status ?? "unknown"));
+    return Array.from(seen, (value) => ({ value, label: value }));
+  }, [infrastructure]);
+  const sortOptions = [
+    { value: "name", label: "Name" },
+    { value: "indexerCount", label: "Indexers" },
+    { value: "searchHeadCount", label: "Search heads" },
+    { value: "status", label: "Status" },
+    { value: "updatedAt", label: "Updated" }
+  ];
+  const filters = [
+    { key: "environment", label: "Environment", options: environmentOptions, value: environmentFilter, onChange: setEnvironmentFilter, alwaysVisible: true },
+    { key: "deployment", label: "Deployment", options: deploymentTypes, value: deploymentFilter, onChange: setDeploymentFilter },
+    { key: "status", label: "Status", options: statusFilterOptions, value: statusFilter, onChange: setStatusFilter }
+  ];
+  const filteredSorted = (0, import_react4.useMemo)(() => {
+    const term = search.trim().toLowerCase();
+    const rows = infrastructure.filter((row) => {
+      if (term) {
+        const haystack = `${row.name ?? ""} ${row.hosting_type ?? ""} ${row.region ?? ""}`.toLowerCase();
+        if (!haystack.includes(term)) return false;
+      }
+      if (environmentFilter && row.environmentType !== environmentFilter) return false;
+      if (deploymentFilter && row.deploymentType !== deploymentFilter) return false;
+      if (statusFilter && (row.status ?? "unknown") !== statusFilter) return false;
+      return true;
+    });
+    const dir = sortDir === "asc" ? 1 : -1;
+    return [...rows].sort((a, b) => {
+      switch (sortField) {
+        case "indexerCount":
+          return ((a.indexerCount ?? 0) - (b.indexerCount ?? 0)) * dir;
+        case "searchHeadCount":
+          return ((a.searchHeadCount ?? 0) - (b.searchHeadCount ?? 0)) * dir;
+        case "status":
+          return (a.status ?? "").localeCompare(b.status ?? "") * dir;
+        case "updatedAt":
+          return (new Date(a.updatedAt ?? 0).getTime() - new Date(b.updatedAt ?? 0).getTime()) * dir;
+        case "name":
+        default:
+          return (a.name ?? "").localeCompare(b.name ?? "") * dir;
+      }
+    });
+  }, [infrastructure, search, environmentFilter, deploymentFilter, statusFilter, sortField, sortDir]);
+  const pageRows = (0, import_react4.useMemo)(
+    () => filteredSorted.slice((page - 1) * pageSize, page * pageSize),
+    [filteredSorted, page, pageSize]
+  );
+  (0, import_react4.useEffect)(() => {
+    setPage(1);
+  }, [search, environmentFilter, deploymentFilter, statusFilter, sortField, sortDir]);
+  const selected = selectedId ? infrastructure.find((i) => i.id === selectedId) ?? null : null;
+  if (selectedId && selected) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        ByolInfrastructureDetail,
+        {
+          apiBase,
+          initialInfra: selected,
+          configBase,
+          configLinks,
+          reloadSignal,
+          onBack: () => openDetail(null),
+          onEdit: openEdit,
+          onDeleted: () => {
+            openDetail(null);
+            void load();
+          },
+          onChanged: () => void load()
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        FormDialog,
+        {
+          isOpen: dialogOpen,
+          onClose: closeDialog,
+          title: editing ? `Edit "${editing.name}"` : "New BYOL infrastructure",
+          description: "Define the deployment topology for a Bring-Your-Own-License Splunk environment.",
+          onSubmit: handleSubmit,
+          submitText: editing ? "Save changes" : "Create infrastructure",
+          isSubmitting: submitting,
+          submitDisabled: !form.name.trim() || cloudAccountRequired && !form.cloudAccountConnectionId,
+          error: formError,
+          size: "md",
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            FormBody,
+            {
+              form,
+              setField,
+              onProviderChange: handleProviderChange,
+              deploymentTypes,
+              environmentOptions,
+              providerOptions,
+              regionOptions,
+              showRegion,
+              showCloudAccount,
+              cloudAccountRequired,
+              cloudAccountOptions,
+              selectedProviderName: selectedProvider?.name,
+              providerCode: selectedProvider?.code,
+              versionOptions
+            }
+          )
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Card, { variant: "bordered", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      CardHeader,
+      {
+        actions: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "secondary", size: "sm", onClick: () => void load(), isLoading, children: "Refresh" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "primary", size: "sm", onClick: openCreate, children: "New infrastructure" })
+        ] }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { style: { margin: 0, fontSize: 16, fontWeight: 600 }, children: title })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CardBody, { children: [
+      error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { style: { color: tokens.danger }, children: [
+        "Failed to load BYOL infrastructure: ",
+        error
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          FilterBar,
+          {
+            search: { value: search, onChange: setSearch, placeholder: "Search infrastructure\u2026" },
+            filters
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          SortSelect,
+          {
+            options: sortOptions,
+            value: sortField,
+            direction: sortDir,
+            onChange: (field, dir) => {
+              setSortField(field);
+              setSortDir(dir);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        DataTable,
+        {
+          columns,
+          data: pageRows,
+          rowKey: (row) => row.id,
+          isLoading,
+          onRowClick: (row) => openDetail(row.id),
+          emptyState: {
+            title: "No BYOL infrastructure yet",
+            description: "Create a BYOL deployment to manage its topology, resources and lifecycle here."
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Pagination,
+        {
+          page,
+          pageSize,
+          totalItems: filteredSorted.length,
+          onPageChange: setPage,
+          onPageSizeChange: setPageSize,
+          pageSizeOptions: [10, 25, 50]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      FormDialog,
+      {
+        isOpen: dialogOpen,
+        onClose: closeDialog,
+        title: editing ? `Edit "${editing.name}"` : "New BYOL infrastructure",
+        description: "Define the deployment topology for a Bring-Your-Own-License Splunk environment.",
+        onSubmit: handleSubmit,
+        submitText: editing ? "Save changes" : "Create infrastructure",
+        isSubmitting: submitting,
+        submitDisabled: !form.name.trim() || cloudAccountRequired && !form.cloudAccountConnectionId,
+        error: formError,
+        size: "md",
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          FormBody,
+          {
+            form,
+            setField,
+            onProviderChange: handleProviderChange,
+            deploymentTypes,
+            environmentOptions,
+            providerOptions,
+            regionOptions,
+            showRegion,
+            showCloudAccount,
+            cloudAccountRequired,
+            cloudAccountOptions,
+            selectedProviderName: selectedProvider?.name,
+            versionOptions
+          }
+        )
+      }
+    )
+  ] });
+};
+var FormSection = ({
+  title,
+  description,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: { margin: 0, fontSize: 13, fontWeight: 600, color: tokens.text }, children: title }),
+  description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: { margin: "2px 0 0", fontSize: 12, color: tokens.muted }, children: description }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { marginTop: 10, display: "flex", flexDirection: "column", gap: 12 }, children })
+] });
+var FormBody = ({
+  form,
+  setField,
+  onProviderChange,
+  deploymentTypes,
+  environmentOptions,
+  providerOptions,
+  regionOptions,
+  showRegion,
+  showCloudAccount,
+  cloudAccountRequired,
+  cloudAccountOptions,
+  selectedProviderName,
+  providerCode,
+  versionOptions
+}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Input, { label: "Name", value: form.name, onChange: (e) => setField("name", e.target.value), placeholder: "e.g. Production cluster", fullWidth: true, autoFocus: true }),
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Select, { label: "Deployment type", value: form.deploymentType, onChange: (value) => setField("deploymentType", value), options: deploymentTypes }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Select, { label: "Environment", value: form.environmentType, onChange: (value) => setField("environmentType", value), options: environmentOptions })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "grid", gridTemplateColumns: showRegion ? "1fr 1fr" : "1fr", gap: 12 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Select, { label: "Provider", value: form.providerId, onChange: onProviderChange, options: providerOptions }),
+    showRegion ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Select, { label: "Region", value: form.region, onChange: (value) => setField("region", value), options: regionOptions }) : null
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(FormSection, { title: "Deployment target", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Select,
+        {
+          label: "Network",
+          value: form.networkMode,
+          onChange: (value) => setField("networkMode", value),
+          options: NETWORK_MODE_OPTIONS
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Select, { label: "DNS", value: form.dnsMode, onChange: (value) => setField("dnsMode", value), options: DNS_MODE_OPTIONS })
+    ] }),
+    showCloudAccount ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Select,
+        {
+          label: cloudAccountRequired ? "Cloud account *" : "Cloud account",
+          value: form.cloudAccountConnectionId,
+          onChange: (value) => setField("cloudAccountConnectionId", value),
+          options: cloudAccountOptions,
+          placeholder: cloudAccountOptions.length ? "Select a verified cloud account\u2026" : cloudAccountRequired ? "No verified cloud accounts" : "None \u2014 use the default provisioning identity",
+          disabled: cloudAccountOptions.length === 0,
+          helperText: cloudAccountRequired ? "Required for a dedicated or existing-network (BYOC) deployment." : "Optional \u2014 the Veltrix-managed account this hosted deployment provisions through."
+        }
+      ),
+      cloudAccountRequired && cloudAccountOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Alert, { variant: "warning", title: "No verified cloud account available", children: selectedProviderName ? `No verified ${selectedProviderName} cloud account found. Register and verify a cloud account first in Settings \u2192 Cloud Accounts.` : "Register and verify a cloud account first in Settings \u2192 Cloud Accounts." }) : null
+    ] }) : null
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    FormSection,
+    {
+      title: "Topology",
+      description: form.deploymentType === "distributed" ? "Distributed deployments need at least 3 indexers and 2 search heads." : "Number of indexer and search-head nodes to provision.",
+      children: [
+        versionOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          Select,
+          {
+            label: "Splunk version",
+            value: form.versionId,
+            onChange: (value) => setField("versionId", value),
+            options: versionOptions,
+            placeholder: "Use the app's default version",
+            helperText: "The Splunk release installed on every node. Leave unset to use the app's default installer."
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Input, { label: "Indexers", type: "number", min: 1, value: form.indexerCount, onChange: (e) => setField("indexerCount", e.target.value), fullWidth: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Input, { label: "Search heads", type: "number", min: 1, value: form.searchHeadCount, onChange: (e) => setField("searchHeadCount", e.target.value), fullWidth: true })
+        ] }),
+        form.providerId && form.providerId !== SELF_HOSTED ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          Input,
+          {
+            label: "Compute size (instance type)",
+            value: form.instanceType,
+            onChange: (e) => setField("instanceType", e.target.value),
+            placeholder: INSTANCE_TYPE_EXAMPLES.aws,
+            fullWidth: true,
+            helperText: `Leave blank for the cloud default (~2 vCPU / 4 GB). Examples: AWS ${INSTANCE_TYPE_EXAMPLES.aws}, Azure ${INSTANCE_TYPE_EXAMPLES.azure}, GCP ${INSTANCE_TYPE_EXAMPLES.gcp}, Hetzner ${INSTANCE_TYPE_EXAMPLES.hetzner}. Applies to every node; you can change it here later.`
+          }
+        ) : null,
+        showRegion ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            ClusterPlacementField,
+            {
+              label: "Indexer cluster placement",
+              placement: form.indexerPlacement,
+              nodeCount: Math.max(1, Number(form.indexerCount) || 1),
+              primaryRegion: form.region,
+              providerCode,
+              regionOptions,
+              onChange: (p) => setField("indexerPlacement", p)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            ClusterPlacementField,
+            {
+              label: "Search head cluster placement",
+              placement: form.searchHeadPlacement,
+              nodeCount: Math.max(1, Number(form.searchHeadCount) || 1),
+              primaryRegion: form.region,
+              providerCode,
+              regionOptions,
+              onChange: (p) => setField("searchHeadPlacement", p)
+            }
+          )
+        ] }) : null
+      ]
+    }
+  ),
+  form.deploymentType === "distributed" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      FormSection,
+      {
+        title: "Control plane",
+        description: "How many instances the five management roles run on \u2014 fewer instances cut cost, more give isolation and HA.",
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          Select,
+          {
+            label: "Consolidation",
+            value: form.controlPlaneLayout,
+            onChange: (value) => setField("controlPlaneLayout", value),
+            options: CONTROL_PLANE_LAYOUT_OPTIONS.map((o) => ({ value: o.value, label: `${o.label} \u2014 ${o.description}` }))
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      FormSection,
+      {
+        title: "Ingest",
+        description: "Heavy forwarders for ingest routing. One is provisioned by default; add more for higher throughput.",
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          Input,
+          {
+            label: "Heavy forwarders",
+            type: "number",
+            min: 1,
+            value: form.heavyForwarderCount,
+            onChange: (e) => setField("heavyForwarderCount", e.target.value),
+            fullWidth: true
+          }
+        )
+      }
+    )
+  ] }) : null
+] });
+var ByolInfrastructureManager_default = ByolInfrastructureManager;
+
+// src/byol/tags.ts
+var BYOL_TAG_KEYS = [
+  "Veltrix:Customer",
+  "Veltrix:Environment",
+  "Veltrix:EnvName",
+  "Veltrix:EnvType",
+  "Veltrix:App",
+  "Veltrix:ManagedBy",
+  "CostCenter",
+  "Owner"
+];
+var MANAGED_BY = "Veltrix";
+function s(value) {
+  return String(value ?? "").trim();
+}
+function buildByolTags(input) {
+  const customerId = s(input.customerId);
+  const customerLabel = s(input.customerShortName) || customerId;
+  const costCenter = s(input.costCenter) || customerLabel;
+  const owner = s(input.owner) || customerLabel;
+  return {
+    "Veltrix:Customer": customerLabel,
+    "Veltrix:Environment": s(input.infrastructureId),
+    "Veltrix:EnvName": s(input.name),
+    "Veltrix:EnvType": s(input.environmentType),
+    "Veltrix:App": s(input.appId),
+    "Veltrix:ManagedBy": MANAGED_BY,
+    CostCenter: costCenter,
+    Owner: owner
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BYOL_TAG_KEYS,
+  ByolInfrastructureDetail,
+  ByolInfrastructureManager,
+  ByolPlanModal,
+  CONTROL_PLANE_LAYOUT_OPTIONS,
+  DEPLOYMENT_STEPS,
+  DestroyPlanModal,
+  MANAGED_BY,
+  MIN_HEAVY_FORWARDERS,
+  PLACEMENT_GRANULARITY_OPTIONS,
+  SINGLE_SITE_PLACEMENT,
+  TIER_LABELS,
+  TIER_ORDER,
+  allocateNodesBySite,
+  buildByolPlan,
+  buildByolResourcePlan,
+  buildByolTags,
+  diffPlan,
+  effectivePlacement,
+  isNotStarted,
+  isRunning,
+  planHasChanges,
+  resourceStatusLabel,
+  resourceStatusVariant,
+  statusLabel,
+  statusVariant,
+  stepStatusVariant,
+  validatePlacement
+});
+//# sourceMappingURL=index.cjs.map