@replicated/portal-components 0.0.2 → 0.0.4

package/dist/esm/instance-card.js

@@ -0,0 +1,197 @@
+"use client";
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+function getInstallType(instance, installOptions) {
+  const instanceHasNoInstallTypes = !instance.kotsInstallId && !instance.kurlInstallId && !instance.embeddedClusterId;
+  const isManuallyCreatedAirgapInstance = instance.isAirgap && instanceHasNoInstallTypes;
+  if (instance.embeddedClusterId) {
+    return "embedded cluster";
+  }
+  if (instanceHasNoInstallTypes && instance.k8sDistribution) {
+    return "helm";
+  }
+  if (isManuallyCreatedAirgapInstance && !instance.k8sDistribution) {
+    if (installOptions) {
+      const matchingInstallOption = installOptions.find(
+        (option) => option.instance_id === instance.id
+      );
+      if (matchingInstallOption) {
+        if (matchingInstallOption.install_type === "helm") {
+          return "helm";
+        }
+        if (matchingInstallOption.install_type === "linux") {
+          return "embedded cluster";
+        }
+      }
+    }
+    return "embedded cluster";
+  }
+  return null;
+}
+function calculateUpdatesForInstance(instance, channelReleases) {
+  if (!channelReleases || !Array.isArray(channelReleases)) {
+    return 0;
+  }
+  const instanceChannelSequence = instance.channelSequence ?? 0;
+  const matchingReleases = channelReleases.filter(
+    (release) => release.channelId === instance.channelId
+  );
+  return matchingReleases.filter(
+    (release) => release.channelSequence > instanceChannelSequence
+  ).length;
+}
+function getInstanceName(instance) {
+  const nameTag = instance.tags?.find((tag) => tag.key === "name");
+  return nameTag?.value || instance.id.slice(0, 7);
+}
+function formatDateTime(dateString) {
+  if (!dateString) return "N/A";
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-US", {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+}
+function UpdateBadge({ count }) {
+  if (count <= 0) return null;
+  return /* @__PURE__ */ jsx("span", { className: "ml-1.5 inline-flex h-5 w-5 items-center justify-center rounded-full bg-rose-500 text-xs font-medium text-white", children: count });
+}
+function StatusBadge({ status }) {
+  const colorMap = {
+    ready: "bg-green-50 text-green-600",
+    updating: "bg-green-50 text-green-600",
+    unknown: "bg-blue-50 text-blue-500",
+    missing: "bg-pink-50 text-pink-600",
+    unavailable: "bg-pink-50 text-pink-600",
+    degraded: "bg-yellow-50 text-yellow-600"
+  };
+  const colorClass = colorMap[status] || "bg-gray-50 text-gray-600";
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${colorClass}`, children: [
+    status,
+    /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+  ] });
+}
+function InstanceCard({
+  instance,
+  isActive,
+  channelReleases = [],
+  installOptions = [],
+  onUpdateClick,
+  primaryColor = "#6366f1"
+}) {
+  const [showInstanceId, setShowInstanceId] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const instanceName = getInstanceName(instance);
+  const installType = getInstallType(instance, installOptions);
+  const availableUpdates = calculateUpdatesForInstance(instance, channelReleases);
+  const displayText = showInstanceId ? instance.id.slice(0, 7) : instanceName || instance.id.slice(0, 7);
+  const getTooltipText = () => {
+    if (instanceName) {
+      return showInstanceId ? "Click to show instance name" : "Click to show instance ID";
+    }
+    return "Instance ID";
+  };
+  const getOverallStatus = () => {
+    if (!instance.resourceStates || instance.resourceStates.length === 0) {
+      return "unknown";
+    }
+    const stateCounts = instance.resourceStates.reduce((acc, resource) => {
+      acc[resource.state] = (acc[resource.state] || 0) + 1;
+      return acc;
+    }, {});
+    let maxCount = 0;
+    let maxStatus = "unknown";
+    for (const [status, count] of Object.entries(stateCounts)) {
+      if (count > maxCount) {
+        maxCount = count;
+        maxStatus = status;
+      }
+    }
+    return maxStatus;
+  };
+  const overallStatus = getOverallStatus();
+  const handleUpdateClick = () => {
+    if (onUpdateClick) {
+      onUpdateClick(instance.id);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-gray-200 bg-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr_auto] gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `mt-1.5 h-2 w-2 rounded-full ${isActive ? "bg-green-400" : "bg-gray-300"}`
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-min flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-sm font-medium text-gray-900 cursor-pointer hover:underline",
+              onClick: () => setShowInstanceId(!showInstanceId),
+              onMouseEnter: () => setShowTooltip(true),
+              onMouseLeave: () => setShowTooltip(false),
+              title: showInstanceId ? instance.id : instanceName || instance.id,
+              children: displayText
+            }
+          ),
+          showTooltip && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-800 rounded whitespace-nowrap z-10", children: [
+            getTooltipText(),
+            /* @__PURE__ */ jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-800" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-gray-600", children: [
+          "Version: ",
+          instance.versionLabel || "Unknown",
+          /* @__PURE__ */ jsx(UpdateBadge, { count: availableUpdates })
+        ] }),
+        instance.isAirgap && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-700", children: "air gap" }),
+        installType && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600", children: installType }),
+        instance.resourceStates && instance.resourceStates.length > 0 && /* @__PURE__ */ jsx(StatusBadge, { status: overallStatus })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: "First check-in:" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600", children: formatDateTime(instance.firstCheckin) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: "Last check-in:" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600", children: formatDateTime(instance.lastCheckin) })
+        ] })
+      ] }),
+      instance.tags && instance.tags.filter((tag) => tag.key !== "name").length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: instance.tags.filter((tag) => tag.key !== "name").map((tag) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-600",
+          children: tag.value
+        },
+        tag.key
+      )) })
+    ] }),
+    availableUpdates > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleUpdateClick,
+        className: "rounded px-4 py-1.5 text-sm font-medium text-white transition-opacity hover:opacity-90",
+        style: { backgroundColor: primaryColor },
+        children: "Update available"
+      }
+    ) })
+  ] }) });
+}
+InstanceCard.displayName = "InstanceCard";
+
+export { InstanceCard };
+//# sourceMappingURL=instance-card.js.map
+//# sourceMappingURL=instance-card.js.map

package/dist/esm/instance-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/actions/instances.ts","../../src/components/instance-card.tsx"],"names":[],"mappings":"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","file":"instance-card.js","sourcesContent":["/**\n * Instance-related server actions for the Update page.\n * \n * These actions handle fetching and managing instances including:\n * - Listing all instances (online and airgap)\n * - Fetching install options for instances\n * - Calculating update availability\n */\n\nimport { authenticatedFetch } from \"../utils/api-client\";\nimport { getApiOrigin, getCustomerIdFromToken } from \"./index\";\nimport type { PortalActionContext } from \"./index\";\nimport type { ChannelRelease, InstallOptions } from \"./install\";\nexport type { InstallOptions } from \"./install\";\n\n// =============================================================================\n// Types - Instance\n// =============================================================================\n\nexport type ResourceStatus = \"ready\" | \"updating\" | \"unknown\" | \"missing\" | \"unavailable\" | \"degraded\";\n\nexport interface ResourceState {\n  kind: string;\n  name: string;\n  namespace: string;\n  state: ResourceStatus;\n}\n\nexport interface InstanceTag {\n  key: string;\n  value: string;\n  origin?: string;\n}\n\nexport interface Instance {\n  id: string;\n  firstCheckin: string;\n  firstReadyAt?: string;\n  lastCheckin: string;\n  isAirgap: boolean;\n  appStatus?: string;\n  resourceStates?: ResourceState[];\n  versionLabel?: string;\n  channelId?: string;\n  channelSequence?: number;\n  serviceAccountId?: string;\n  embeddedClusterId?: string;\n  kotsInstallId?: string;\n  kurlInstallId?: string;\n  k8sVersion?: string;\n  k8sDistribution?: string;\n  tags?: InstanceTag[];\n}\n\nexport interface FetchInstancesInput {\n  token: string;\n}\n\nexport interface FetchInstancesResult {\n  instances: Instance[];\n  online: Instance[];\n  airgap: Instance[];\n}\n\n// =============================================================================\n// Types - Install Options by Instance\n// =============================================================================\n\nexport interface FetchInstallOptionsByInstanceIdsInput {\n  token: string;\n  instanceIds: string[];\n}\n\nexport interface FetchInstallOptionsByInstanceIdsResult {\n  installOptions: InstallOptions[];\n}\n\n// =============================================================================\n// Constants\n// =============================================================================\n\n/** 24 hours in milliseconds - threshold for active vs inactive instances */\nexport const ACTIVE_INSTANCE_THRESHOLD_MS = 24 * 60 * 60 * 1000;\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Determines if an instance is active based on last check-in time.\n * Active = last check-in within the last 24 hours.\n */\nexport function isInstanceActive(instance: Instance): boolean {\n  if (!instance.lastCheckin) {\n    return false;\n  }\n  const lastCheckinTime = new Date(instance.lastCheckin).getTime();\n  const threshold = Date.now() - ACTIVE_INSTANCE_THRESHOLD_MS;\n  return lastCheckinTime > threshold;\n}\n\n/**\n * Filters instances into active and inactive lists.\n */\nexport function filterActiveInactiveInstances(instances: Instance[]): {\n  activeInstances: Instance[];\n  inactiveInstances: Instance[];\n} {\n  const activeInstances = instances.filter(isInstanceActive);\n  const inactiveInstances = instances.filter((instance) => !isInstanceActive(instance));\n  return { activeInstances, inactiveInstances };\n}\n\n/**\n * Gets the install type for an instance based on instance data and install options.\n */\nexport function getInstallType(\n  instance: Instance,\n  installOptions?: InstallOptions[]\n): \"helm\" | \"embedded cluster\" | null {\n  const instanceHasNoInstallTypes =\n    !instance.kotsInstallId &&\n    !instance.kurlInstallId &&\n    !instance.embeddedClusterId;\n  const isManuallyCreatedAirgapInstance =\n    instance.isAirgap && instanceHasNoInstallTypes;\n\n  // Check for embedded cluster first - explicitly set\n  if (instance.embeddedClusterId) {\n    return \"embedded cluster\";\n  }\n\n  // Check for helm install with k8s info\n  if (instanceHasNoInstallTypes && instance.k8sDistribution) {\n    return \"helm\";\n  }\n\n  // Default fallback for ambiguous cases (manually created airgap without k8s info):\n  // Check install options first, then assume embedded cluster\n  if (isManuallyCreatedAirgapInstance && !instance.k8sDistribution) {\n    if (installOptions) {\n      const matchingInstallOption = installOptions.find(\n        (option) => option.instance_id === instance.id\n      );\n      if (matchingInstallOption) {\n        if (matchingInstallOption.install_type === \"helm\") {\n          return \"helm\";\n        }\n        if (matchingInstallOption.install_type === \"linux\") {\n          return \"embedded cluster\";\n        }\n      }\n    }\n    // Final fallback: assume embedded cluster\n    return \"embedded cluster\";\n  }\n\n  return null;\n}\n\n/**\n * Calculates the number of available updates for an instance.\n */\nexport function calculateUpdatesForInstance(\n  instance: Instance,\n  channelReleases: ChannelRelease[]\n): number {\n  if (!channelReleases || !Array.isArray(channelReleases)) {\n    return 0;\n  }\n\n  const instanceChannelSequence = instance.channelSequence ?? 0;\n\n  // Filter to matching channel and count releases with higher sequence\n  const matchingReleases = channelReleases.filter(\n    (release) => release.channelId === instance.channelId\n  );\n\n  return matchingReleases.filter(\n    (release) => release.channelSequence > instanceChannelSequence\n  ).length;\n}\n\n/**\n * Gets the instance name from tags or returns truncated ID.\n */\nexport function getInstanceName(instance: Instance): string {\n  const nameTag = instance.tags?.find((tag) => tag.key === \"name\");\n  return nameTag?.value || instance.id.slice(0, 7);\n}\n\n// =============================================================================\n// Actions\n// =============================================================================\n\n/**\n * Fetches all instances for the customer.\n * Returns instances split into online and airgap categories.\n */\nexport async function fetchInstances(\n  input: FetchInstancesInput,\n  context?: PortalActionContext\n): Promise<FetchInstancesResult> {\n  const { token } = input;\n\n  if (!token || typeof token !== \"string\") {\n    throw new Error(\"fetchInstances requires a session token\");\n  }\n\n  const customerId = getCustomerIdFromToken(token);\n  const origin = getApiOrigin();\n\n  const url = new URL(`${origin}/v3/instances`);\n  url.searchParams.set(\"customer_id\", customerId);\n\n  if (process.env.NODE_ENV !== \"production\") {\n    console.debug(\"[portal-components] fetching instances via %s\", url.toString());\n  }\n\n  const response = await authenticatedFetch(url.toString(), {\n    method: \"GET\",\n    token,\n    headers: {\n      accept: \"application/json\"\n    },\n    signal: context?.signal\n  });\n\n  if (!response.ok) {\n    const errorText = await response.text();\n    throw new Error(\n      `Instances request failed (${response.status} ${response.statusText}): ${errorText}`\n    );\n  }\n\n  const payload = await response.json();\n  const allInstances: Instance[] = payload.instances || [];\n\n  // Split into online and airgap\n  const online = allInstances.filter((instance) => !instance.isAirgap);\n  const airgap = allInstances.filter((instance) => instance.isAirgap);\n\n  return {\n    instances: allInstances,\n    online,\n    airgap\n  };\n}\n\n// =============================================================================\n// Types - Create Air Gap Instance\n// =============================================================================\n\nexport type AirgapInstanceStatus = \"unavailable\" | \"missing\";\n\nexport interface CreateAirgapInstanceInput {\n  token: string;\n  serviceAccountId: string;\n  instanceName?: string;\n  channelId: string;\n  channelSequence: number;\n  k8sVersion?: string;\n  k8sDistribution?: string;\n  appStatus?: AirgapInstanceStatus;\n}\n\nexport interface CreateAirgapInstanceResult {\n  instanceId: string;\n  licenseId: string;\n  createdAt: string;\n  lastActive: string;\n  appFirstReadyAt: string | null;\n  appStatus: string;\n  isAirgap: boolean;\n  channelId?: string;\n  channelSequence?: number;\n  k8sVersion?: string;\n  k8sDistribution?: string;\n}\n\n/**\n * Creates an air gap instance record manually.\n * This is used when customers want to track air gap instances that can't check in.\n */\nexport async function createAirgapInstance(\n  input: CreateAirgapInstanceInput,\n  context?: PortalActionContext\n): Promise<CreateAirgapInstanceResult> {\n  const {\n    token,\n    serviceAccountId,\n    instanceName,\n    channelId,\n    channelSequence,\n    k8sVersion,\n    k8sDistribution,\n    appStatus = \"missing\"\n  } = input;\n\n  if (!token || typeof token !== \"string\") {\n    throw new Error(\"createAirgapInstance requires a session token\");\n  }\n\n  if (!serviceAccountId?.trim()) {\n    throw new Error(\"Service account ID is required\");\n  }\n\n  if (!channelId?.trim()) {\n    throw new Error(\"Channel ID is required\");\n  }\n\n  const customerId = getCustomerIdFromToken(token);\n  const origin = getApiOrigin();\n\n  const url = new URL(`${origin}/v3/instance/airgap`);\n  url.searchParams.set(\"customer_id\", customerId);\n\n  const body: Record<string, unknown> = {\n    service_account_id: serviceAccountId.trim(),\n    channel_id: channelId.trim(),\n    channel_sequence: channelSequence,\n    app_status: appStatus\n  };\n\n  if (instanceName?.trim()) {\n    body.instance_name = instanceName.trim();\n  }\n  if (k8sVersion?.trim()) {\n    body.k8s_version = k8sVersion.trim();\n  }\n  if (k8sDistribution?.trim()) {\n    body.k8s_distribution = k8sDistribution.trim();\n  }\n\n  if (process.env.NODE_ENV !== \"production\") {\n    console.debug(\"[portal-components] creating airgap instance via %s\", url.toString());\n  }\n\n  const response = await authenticatedFetch(url.toString(), {\n    method: \"POST\",\n    token,\n    headers: {\n      \"content-type\": \"application/json\",\n      accept: \"application/json\"\n    },\n    body: JSON.stringify(body),\n    signal: context?.signal\n  });\n\n  if (!response.ok) {\n    const errorText = await response.text();\n    let errorMessage = \"Failed to create airgap instance\";\n    try {\n      const errorData = JSON.parse(errorText);\n      errorMessage = errorData.error || errorData.message || errorMessage;\n    } catch {\n      // Use default message\n    }\n    throw new Error(errorMessage);\n  }\n\n  const data = await response.json();\n  \n  return {\n    instanceId: data.instance_id,\n    licenseId: data.license_id,\n    createdAt: data.created_at,\n    lastActive: data.last_active,\n    appFirstReadyAt: data.app_first_ready_at,\n    appStatus: data.app_status,\n    isAirgap: data.is_airgap,\n    channelId: data.channel_id,\n    channelSequence: data.channel_sequence,\n    k8sVersion: data.k8s_version,\n    k8sDistribution: data.k8s_distribution\n  };\n}\n\n// =============================================================================\n// Types - Update Air Gap Instance\n// =============================================================================\n\nexport interface UpdateAirgapInstanceInput {\n  token: string;\n  instanceId: string;\n  serviceAccountId?: string;\n  channelId: string;\n  channelSequence: number;\n}\n\nexport interface UpdateAirgapInstanceResult {\n  success: boolean;\n}\n\n/**\n * Updates an air gap instance record (mark update complete).\n * This is called after completing an air gap update to update the instance version.\n */\nexport async function updateAirgapInstance(\n  input: UpdateAirgapInstanceInput,\n  context?: PortalActionContext\n): Promise<UpdateAirgapInstanceResult> {\n  const {\n    token,\n    instanceId,\n    serviceAccountId,\n    channelId,\n    channelSequence\n  } = input;\n\n  if (!token || typeof token !== \"string\") {\n    throw new Error(\"updateAirgapInstance requires a session token\");\n  }\n\n  if (!instanceId?.trim()) {\n    throw new Error(\"Instance ID is required\");\n  }\n\n  if (!channelId?.trim()) {\n    throw new Error(\"Channel ID is required\");\n  }\n\n  const customerId = getCustomerIdFromToken(token);\n  const origin = getApiOrigin();\n\n  const url = new URL(`${origin}/v3/instance/airgap/${instanceId.trim()}`);\n  url.searchParams.set(\"customer_id\", customerId);\n\n  const body: Record<string, unknown> = {\n    channel_id: channelId.trim(),\n    channel_sequence: channelSequence\n  };\n\n  if (serviceAccountId?.trim()) {\n    body.service_account_id = serviceAccountId.trim();\n  }\n\n  if (process.env.NODE_ENV !== \"production\") {\n    console.debug(\"[portal-components] updating airgap instance via %s\", url.toString());\n  }\n\n  const response = await authenticatedFetch(url.toString(), {\n    method: \"PATCH\",\n    token,\n    headers: {\n      \"content-type\": \"application/json\",\n      accept: \"application/json\"\n    },\n    body: JSON.stringify(body),\n    signal: context?.signal\n  });\n\n  if (!response.ok) {\n    const errorText = await response.text();\n    let errorMessage = \"Failed to update airgap instance\";\n    try {\n      const errorData = JSON.parse(errorText);\n      errorMessage = errorData.error || errorData.message || errorMessage;\n    } catch {\n      // Use default message\n    }\n    throw new Error(errorMessage);\n  }\n\n  return { success: true };\n}\n\n/**\n * Fetches install options for a batch of instance IDs.\n * Handles chunking automatically if more than 50 IDs are provided.\n */\nexport async function fetchInstallOptionsByInstanceIds(\n  input: FetchInstallOptionsByInstanceIdsInput,\n  context?: PortalActionContext\n): Promise<FetchInstallOptionsByInstanceIdsResult> {\n  const { token, instanceIds } = input;\n\n  if (!token || typeof token !== \"string\") {\n    throw new Error(\"fetchInstallOptionsByInstanceIds requires a session token\");\n  }\n\n  if (!instanceIds || instanceIds.length === 0) {\n    return { installOptions: [] };\n  }\n\n  const customerId = getCustomerIdFromToken(token);\n  const origin = getApiOrigin();\n\n  // Chunk instance IDs into groups of 50 (API limit)\n  const chunks: string[][] = [];\n  for (let i = 0; i < instanceIds.length; i += 50) {\n    chunks.push(instanceIds.slice(i, i + 50));\n  }\n\n  const allInstallOptions: InstallOptions[] = [];\n\n  for (const chunk of chunks) {\n    if (chunk.length === 0) continue;\n\n    // Build query string with multiple instance_id params\n    const queryParams = chunk\n      .map((id) => `instance_id=${encodeURIComponent(id)}`)\n      .join(\"&\");\n\n    const url = `${origin}/v3/customers/${customerId}/install-options?${queryParams}`;\n\n    if (process.env.NODE_ENV !== \"production\") {\n      console.debug(\"[portal-components] fetching install options via %s\", url);\n    }\n\n    const response = await authenticatedFetch(url, {\n      method: \"GET\",\n      token,\n      headers: {\n        accept: \"application/json\"\n      },\n      signal: context?.signal\n    });\n\n    if (response.status === 404) {\n      // No install options found for this chunk - continue\n      continue;\n    }\n\n    if (!response.ok) {\n      const errorText = await response.text();\n      throw new Error(\n        `Install options request failed (${response.status} ${response.statusText}): ${errorText}`\n      );\n    }\n\n    const payload = await response.json();\n    const options: InstallOptions[] = payload?.install_options || [];\n    allInstallOptions.push(...options);\n  }\n\n  return { installOptions: allInstallOptions };\n}\n\n","\"use client\";\n\nimport { useState } from \"react\";\nimport { type Instance, type InstallOptions, getInstallType, getInstanceName, calculateUpdatesForInstance } from \"../actions/instances\";\nimport type { ChannelRelease } from \"../actions/install\";\n\ninterface InstanceCardProps {\n  instance: Instance;\n  isActive: boolean;\n  channelReleases?: ChannelRelease[];\n  installOptions?: InstallOptions[];\n  onUpdateClick?: (instanceId: string) => void;\n  primaryColor?: string;\n}\n\n/**\n * Formats a date string to a human-readable format.\n */\nfunction formatDateTime(dateString?: string): string {\n  if (!dateString) return \"N/A\";\n  const date = new Date(dateString);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"numeric\",\n    day: \"numeric\",\n    year: \"numeric\",\n    hour: \"numeric\",\n    minute: \"2-digit\",\n    hour12: true\n  });\n}\n\n/**\n * Badge component for showing update count.\n */\nfunction UpdateBadge({ count }: { count: number }) {\n  if (count <= 0) return null;\n  return (\n    <span className=\"ml-1.5 inline-flex h-5 w-5 items-center justify-center rounded-full bg-rose-500 text-xs font-medium text-white\">\n      {count}\n    </span>\n  );\n}\n\n/**\n * Badge for resource status.\n */\nfunction StatusBadge({ status }: { status: string }) {\n  const colorMap: Record<string, string> = {\n    ready: \"bg-green-50 text-green-600\",\n    updating: \"bg-green-50 text-green-600\",\n    unknown: \"bg-blue-50 text-blue-500\",\n    missing: \"bg-pink-50 text-pink-600\",\n    unavailable: \"bg-pink-50 text-pink-600\",\n    degraded: \"bg-yellow-50 text-yellow-600\"\n  };\n\n  const colorClass = colorMap[status] || \"bg-gray-50 text-gray-600\";\n\n  return (\n    <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${colorClass}`}>\n      {status}\n      <svg className=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n      </svg>\n    </span>\n  );\n}\n\n/**\n * Instance card component for displaying an instance in the Update page.\n */\nexport function InstanceCard({\n  instance,\n  isActive,\n  channelReleases = [],\n  installOptions = [],\n  onUpdateClick,\n  primaryColor = \"#6366f1\"\n}: InstanceCardProps) {\n  const [showInstanceId, setShowInstanceId] = useState(false);\n  const [showTooltip, setShowTooltip] = useState(false);\n  \n  const instanceName = getInstanceName(instance);\n  const installType = getInstallType(instance, installOptions);\n  const availableUpdates = calculateUpdatesForInstance(instance, channelReleases);\n\n  // Get the display text for the instance name/ID\n  const displayText = showInstanceId \n    ? instance.id.slice(0, 7)\n    : instanceName || instance.id.slice(0, 7);\n\n  // Get the tooltip text\n  const getTooltipText = () => {\n    if (instanceName) {\n      return showInstanceId \n        ? \"Click to show instance name\" \n        : \"Click to show instance ID\";\n    }\n    return \"Instance ID\";\n  };\n\n  // Get overall resource status\n  const getOverallStatus = () => {\n    if (!instance.resourceStates || instance.resourceStates.length === 0) {\n      return \"unknown\";\n    }\n    // Count states\n    const stateCounts = instance.resourceStates.reduce((acc, resource) => {\n      acc[resource.state] = (acc[resource.state] || 0) + 1;\n      return acc;\n    }, {} as Record<string, number>);\n    \n    // Return most common state\n    let maxCount = 0;\n    let maxStatus = \"unknown\";\n    for (const [status, count] of Object.entries(stateCounts)) {\n      if (count > maxCount) {\n        maxCount = count;\n        maxStatus = status;\n      }\n    }\n    return maxStatus;\n  };\n\n  const overallStatus = getOverallStatus();\n\n  const handleUpdateClick = () => {\n    if (onUpdateClick) {\n      onUpdateClick(instance.id);\n    }\n  };\n\n  return (\n    <div className=\"rounded-lg border border-gray-200 bg-white p-4\">\n      <div className=\"grid grid-cols-[auto_1fr_auto] gap-3\">\n        {/* Status indicator dot */}\n        <div\n          className={`mt-1.5 h-2 w-2 rounded-full ${\n            isActive ? \"bg-green-400\" : \"bg-gray-300\"\n          }`}\n        />\n\n        {/* Instance details */}\n        <div className=\"flex flex-col gap-3\">\n          {/* Instance name, version, badges, status */}\n          <div className=\"flex h-min flex-wrap items-center gap-3\">\n            <div className=\"relative\">\n              <span \n                className=\"text-sm font-medium text-gray-900 cursor-pointer hover:underline\"\n                onClick={() => setShowInstanceId(!showInstanceId)}\n                onMouseEnter={() => setShowTooltip(true)}\n                onMouseLeave={() => setShowTooltip(false)}\n                title={showInstanceId ? instance.id : instanceName || instance.id}\n              >\n                {displayText}\n              </span>\n              {showTooltip && (\n                <div className=\"absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-800 rounded whitespace-nowrap z-10\">\n                  {getTooltipText()}\n                  <div className=\"absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-800\" />\n                </div>\n              )}\n            </div>\n            <span className=\"flex items-center gap-1 text-xs text-gray-600\">\n              Version: {instance.versionLabel || \"Unknown\"}\n              <UpdateBadge count={availableUpdates} />\n            </span>\n            {instance.isAirgap && (\n              <span className=\"rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-700\">\n                air gap\n              </span>\n            )}\n            {installType && (\n              <span className=\"rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600\">\n                {installType}\n              </span>\n            )}\n            {instance.resourceStates && instance.resourceStates.length > 0 && (\n              <StatusBadge status={overallStatus} />\n            )}\n          </div>\n\n          {/* Check-in times */}\n          <div className=\"flex flex-wrap gap-4\">\n            <div className=\"flex items-center gap-1\">\n              <span className=\"text-xs text-gray-500\">First check-in:</span>\n              <span className=\"text-xs text-gray-600\">\n                {formatDateTime(instance.firstCheckin)}\n              </span>\n            </div>\n            <div className=\"flex items-center gap-1\">\n              <span className=\"text-xs text-gray-500\">Last check-in:</span>\n              <span className=\"text-xs text-gray-600\">\n                {formatDateTime(instance.lastCheckin)}\n              </span>\n            </div>\n          </div>\n\n          {/* Tags (excluding name) */}\n          {instance.tags && instance.tags.filter(tag => tag.key !== \"name\").length > 0 && (\n            <div className=\"flex flex-wrap gap-2\">\n              {instance.tags\n                .filter(tag => tag.key !== \"name\")\n                .map((tag) => (\n                  <span\n                    key={tag.key}\n                    className=\"rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-600\"\n                  >\n                    {tag.value}\n                  </span>\n                ))}\n            </div>\n          )}\n        </div>\n\n        {/* Update button */}\n        {availableUpdates > 0 && (\n          <div className=\"flex items-center\">\n            <button\n              onClick={handleUpdateClick}\n              className=\"rounded px-4 py-1.5 text-sm font-medium text-white transition-opacity hover:opacity-90\"\n              style={{ backgroundColor: primaryColor }}\n            >\n              Update available\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nInstanceCard.displayName = \"InstanceCard\";\n\n"]}

package/dist/esm/join-team.js

@@ -0,0 +1,218 @@
+"use client";
+import { forwardRef, useState, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+var variantStyles = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary",
+  secondary: "bg-secondary/20 text-secondary-foreground hover:bg-secondary/30 focus-visible:ring-secondary",
+  ghost: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/60",
+  destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger"
+};
+var sizeStyles = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-12 px-6 text-base"
+};
+var inlineFlexBase = "inline-flex items-center justify-center gap-2 rounded-md font-medium tracking-tight transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-60";
+var Spinner = () => /* @__PURE__ */ jsx("span", { className: "inline-flex h-3.5 w-3.5 animate-spin items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "h-3 w-3 rounded-full border-2 border-transparent border-t-current" }) });
+var composeClassName = (...values) => values.filter(Boolean).join(" ");
+var Button = forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    type = "button",
+    isLoading = false,
+    leadingIcon,
+    trailingIcon,
+    disabled,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const computedLeading = isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : leadingIcon;
+    const computedDisabled = disabled ?? isLoading;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        className: composeClassName(
+          inlineFlexBase,
+          variantStyles[variant],
+          sizeStyles[size],
+          className
+        ),
+        "aria-busy": isLoading || void 0,
+        disabled: computedDisabled,
+        ...props,
+        children: [
+          computedLeading ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex", children: computedLeading }) : null,
+          /* @__PURE__ */ jsx("span", { className: "flex-1 whitespace-nowrap", children }),
+          trailingIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex", children: trailingIcon }) : null
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var JoinTeam = forwardRef(
+  ({
+    logo,
+    teamName = "Enterprise Portal",
+    initialCode = "",
+    isSubmitting = false,
+    error = null,
+    isExpired = false,
+    onAcceptInvite,
+    onRefreshInvite,
+    loginUrl = "/login",
+    className,
+    ...props
+  }, ref) => {
+    const [manualCode, setManualCode] = useState("");
+    const [localError, setLocalError] = useState(null);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [refreshSuccess, setRefreshSuccess] = useState(false);
+    const [useUrlCode, setUseUrlCode] = useState(true);
+    const hasUrlCode = Boolean(initialCode) && useUrlCode;
+    const effectiveCode = hasUrlCode ? initialCode : manualCode.trim();
+    useEffect(() => {
+      if (manualCode) {
+        setLocalError(null);
+      }
+    }, [manualCode]);
+    const handleSubmit = async (event) => {
+      event.preventDefault();
+      if (!effectiveCode) {
+        setLocalError("Please enter your invite code");
+        return;
+      }
+      if (!onAcceptInvite) {
+        return;
+      }
+      try {
+        setLocalError(null);
+        await onAcceptInvite(effectiveCode);
+      } catch (err) {
+        if (!hasUrlCode) {
+          const message = err instanceof Error ? err.message : "Invalid or expired code. Please check the code and try again.";
+          setLocalError(message);
+        }
+      }
+    };
+    const handleRefresh = async () => {
+      if (!onRefreshInvite || !effectiveCode) {
+        return;
+      }
+      try {
+        setIsRefreshing(true);
+        setRefreshSuccess(false);
+        await onRefreshInvite(effectiveCode);
+        setRefreshSuccess(true);
+        if (typeof window !== "undefined") {
+          window.history.replaceState(null, "", window.location.pathname + window.location.search);
+        }
+        setUseUrlCode(false);
+      } catch {
+      } finally {
+        setIsRefreshing(false);
+      }
+    };
+    const displayError = error || localError;
+    const showRefreshLink = hasUrlCode && (isExpired || displayError);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: [
+          "w-full max-w-xl rounded-3xl border-2 border-gray-900 bg-white p-12 shadow-xl",
+          "text-gray-900 transition-shadow",
+          className
+        ].filter(Boolean).join(" "),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-6 text-center", children: [
+            logo ?? /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-500 text-lg font-semibold leading-tight text-white", children: "EP" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("h1", { className: "text-3xl font-bold tracking-tight text-gray-900", children: [
+                "Join the ",
+                teamName,
+                " team"
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-gray-600", children: "Accept your invitation to get started" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "mt-10 space-y-4", children: [
+            !hasUrlCode && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  htmlFor: "invite-code",
+                  className: "block text-sm font-medium text-gray-700",
+                  children: "Paste your invite code"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: "invite-code",
+                  type: "text",
+                  placeholder: "Paste code from your email",
+                  value: manualCode,
+                  onChange: (e) => setManualCode(e.target.value),
+                  className: [
+                    "portal-input w-full px-5 py-4 text-base font-mono",
+                    displayError ? "border-red-500" : ""
+                  ].filter(Boolean).join(" "),
+                  autoFocus: true,
+                  disabled: isSubmitting
+                }
+              )
+            ] }),
+            displayError && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-red-600", children: displayError }),
+            refreshSuccess && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-green-600", children: "A new invitation has been sent to your email." }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                size: "lg",
+                className: "w-full justify-center rounded-xl bg-indigo-600 text-white hover:bg-indigo-700",
+                disabled: !effectiveCode || isSubmitting,
+                isLoading: isSubmitting,
+                children: "Accept invite"
+              }
+            ),
+            showRefreshLink && onRefreshInvite && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleRefresh,
+                disabled: isRefreshing,
+                className: "text-sm font-medium text-indigo-600 hover:text-indigo-700 hover:underline disabled:opacity-50",
+                children: isRefreshing ? "Sending..." : "Refresh invite"
+              }
+            ) }),
+            !hasUrlCode && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: loginUrl,
+                className: "text-sm font-medium text-indigo-600 hover:text-indigo-700 hover:underline",
+                children: "or login"
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+JoinTeam.displayName = "JoinTeam";
+
+export { JoinTeam };
+//# sourceMappingURL=join-team.js.map
+//# sourceMappingURL=join-team.js.map

package/dist/esm/join-team.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/button.tsx","../../src/components/join-team.tsx"],"names":["forwardRef","jsxs","jsx"],"mappings":";;;;;;;;AASA,IAAM,aAAA,GAA+C;AAAA,EACnD,OAAA,EACE,mFAAA;AAAA,EACF,SAAA,EACE,8FAAA;AAAA,EACF,KAAA,EACE,+EAAA;AAAA,EACF,WAAA,EACE;AACJ,CAAA;AAEA,IAAM,UAAA,GAAyC;AAAA,EAC7C,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,mBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,cAAA,GACJ,oOAAA;AAEF,IAAM,OAAA,GAAU,sBACd,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oEACd,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mEAAA,EAAoE,CAAA,EACtF,CAAA;AAcF,IAAM,gBAAA,GAAmB,IACpB,MAAA,KACQ,MAAA,CAAO,OAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AAMrC,IAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CACE;AAAA,IACE,OAAA,GAAU,SAAA;AAAA,IACV,IAAA,GAAO,IAAA;AAAA,IACP,IAAA,GAAO,QAAA;AAAA,IACP,SAAA,GAAY,KAAA;AAAA,IACZ,WAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAA,GAAkB,SAAA,mBAAY,GAAA,CAAC,OAAA,EAAA,EAAQ,CAAA,GAAK,WAAA;AAClD,IAAA,MAAM,mBAAmB,QAAA,IAAY,SAAA;AAErC,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA,EAAW,gBAAA;AAAA,UACT,cAAA;AAAA,UACA,cAAc,OAAO,CAAA;AAAA,UACrB,WAAW,IAAI,CAAA;AAAA,UACf;AAAA,SACF;AAAA,QACA,aAAW,SAAA,IAAa,MAAA;AAAA,QACxB,QAAA,EAAU,gBAAA;AAAA,QACT,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,eAAA,uBACE,MAAA,EAAA,EAAK,aAAA,EAAY,QAAO,SAAA,EAAU,aAAA,EAChC,2BACH,CAAA,GACE,IAAA;AAAA,0BACJ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAAA,EAA4B,QAAA,EAAS,CAAA;AAAA,UACpD,YAAA,uBACE,MAAA,EAAA,EAAK,aAAA,EAAY,QAAO,SAAA,EAAU,aAAA,EAChC,wBACH,CAAA,GACE;AAAA;AAAA;AAAA,KACN;AAAA,EAEJ;AACF,CAAA;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;AChEd,IAAM,QAAA,GAAWA,UAAAA;AAAA,EACtB,CACE;AAAA,IACE,IAAA;AAAA,IACA,QAAA,GAAW,mBAAA;AAAA,IACX,WAAA,GAAc,EAAA;AAAA,IACd,YAAA,GAAe,KAAA;AAAA,IACf,KAAA,GAAQ,IAAA;AAAA,IACR,SAAA,GAAY,KAAA;AAAA,IACZ,cAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA,GAAW,QAAA;AAAA,IACX,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,EAAE,CAAA;AAC/C,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAwB,IAAI,CAAA;AAChE,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,IAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,KAAK,CAAA;AAE1D,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,IAAI,CAAA;AAGjD,IAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,WAAW,CAAA,IAAK,UAAA;AAC3C,IAAA,MAAM,aAAA,GAAgB,UAAA,GAAa,WAAA,GAAc,UAAA,CAAW,IAAA,EAAK;AAGjE,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,UAAA,EAAY;AACd,QAAA,aAAA,CAAc,IAAI,CAAA;AAAA,MACpB;AAAA,IACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,IAAA,MAAM,YAAA,GAAe,OAAO,KAAA,KAAqB;AAC/C,MAAA,KAAA,CAAM,cAAA,EAAe;AAErB,MAAA,IAAI,CAAC,aAAA,EAAe;AAClB,QAAA,aAAA,CAAc,+BAA+B,CAAA;AAC7C,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,QAAA;AAAA,MACF;AAEA,MAAA,IAAI;AACF,QAAA,aAAA,CAAc,IAAI,CAAA;AAClB,QAAA,MAAM,eAAe,aAAa,CAAA;AAAA,MACpC,SAAS,GAAA,EAAK;AACZ,QAAA,IAAI,CAAC,UAAA,EAAY;AAEf,UAAA,MAAM,OAAA,GACJ,GAAA,YAAe,KAAA,GACX,GAAA,CAAI,OAAA,GACJ,+DAAA;AACN,UAAA,aAAA,CAAc,OAAO,CAAA;AAAA,QACvB;AAAA,MACF;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,gBAAgB,YAAY;AAChC,MAAA,IAAI,CAAC,eAAA,IAAmB,CAAC,aAAA,EAAe;AACtC,QAAA;AAAA,MACF;AAEA,MAAA,IAAI;AACF,QAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,QAAA,iBAAA,CAAkB,KAAK,CAAA;AACvB,QAAA,MAAM,gBAAgB,aAAa,CAAA;AACnC,QAAA,iBAAA,CAAkB,IAAI,CAAA;AAItB,QAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,UAAA,MAAA,CAAO,OAAA,CAAQ,aAAa,IAAA,EAAM,EAAA,EAAI,OAAO,QAAA,CAAS,QAAA,GAAW,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA;AAAA,QACzF;AACA,QAAA,aAAA,CAAc,KAAK,CAAA;AAAA,MACrB,CAAA,CAAA,MAAQ;AAAA,MAER,CAAA,SAAE;AACA,QAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,MACvB;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,eAAe,KAAA,IAAS,UAAA;AAC9B,IAAA,MAAM,eAAA,GAAkB,eAAe,SAAA,IAAa,YAAA,CAAA;AAEpD,IAAA,uBACEC,IAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW;AAAA,UACT,8EAAA;AAAA,UACA,iCAAA;AAAA,UACA;AAAA,SACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAAA,QACV,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAA,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8CAAA,EACZ,QAAA,EAAA;AAAA,YAAA,IAAA,oBACCC,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uJAAsJ,QAAA,EAAA,IAAA,EAErK,CAAA;AAAA,4BAEFD,KAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,8BAAAA,IAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,iDAAA,EAAkD,QAAA,EAAA;AAAA,gBAAA,WAAA;AAAA,gBACpD,QAAA;AAAA,gBAAS;AAAA,eAAA,EACrB,CAAA;AAAA,8BACAC,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,gCAA+B,QAAA,EAAA,uCAAA,EAE5C;AAAA,aAAA,EACF;AAAA,WAAA,EACF,CAAA;AAAA,0BAEAD,IAAAA,CAAC,MAAA,EAAA,EAAK,QAAA,EAAU,YAAA,EAAc,WAAU,iBAAA,EAErC,QAAA,EAAA;AAAA,YAAA,CAAC,UAAA,oBACAA,IAAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,8BAAAC,GAAAA;AAAA,gBAAC,OAAA;AAAA,gBAAA;AAAA,kBACC,OAAA,EAAQ,aAAA;AAAA,kBACR,SAAA,EAAU,yCAAA;AAAA,kBACX,QAAA,EAAA;AAAA;AAAA,eAED;AAAA,8BACAA,GAAAA;AAAA,gBAAC,OAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,aAAA;AAAA,kBACH,IAAA,EAAK,MAAA;AAAA,kBACL,WAAA,EAAY,4BAAA;AAAA,kBACZ,KAAA,EAAO,UAAA;AAAA,kBACP,UAAU,CAAC,CAAA,KAAM,aAAA,CAAc,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,kBAC7C,SAAA,EAAW;AAAA,oBACT,mDAAA;AAAA,oBACA,eAAe,gBAAA,GAAmB;AAAA,mBACpC,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAAA,kBACX,SAAA,EAAS,IAAA;AAAA,kBACT,QAAA,EAAU;AAAA;AAAA;AACZ,aAAA,EACF,CAAA;AAAA,YAID,gCACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oCAAoC,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,YAI/D,kCACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,sCAAqC,QAAA,EAAA,+CAAA,EAElD,CAAA;AAAA,4BAIFA,GAAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,IAAA,EAAK,IAAA;AAAA,gBACL,SAAA,EAAU,+EAAA;AAAA,gBACV,QAAA,EAAU,CAAC,aAAA,IAAiB,YAAA;AAAA,gBAC5B,SAAA,EAAW,YAAA;AAAA,gBACZ,QAAA,EAAA;AAAA;AAAA,aAED;AAAA,YAGC,mBAAmB,eAAA,oBAClBA,IAAC,KAAA,EAAA,EAAI,SAAA,EAAU,eACb,QAAA,kBAAAA,GAAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,aAAA;AAAA,gBACT,QAAA,EAAU,YAAA;AAAA,gBACV,SAAA,EAAU,+FAAA;AAAA,gBAET,yBAAe,YAAA,GAAe;AAAA;AAAA,aACjC,EACF,CAAA;AAAA,YAID,CAAC,UAAA,oBACAA,IAAC,KAAA,EAAA,EAAI,SAAA,EAAU,eACb,QAAA,kBAAAA,GAAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAM,QAAA;AAAA,gBACN,SAAA,EAAU,2EAAA;AAAA,gBACX,QAAA,EAAA;AAAA;AAAA,aAED,EACF;AAAA,WAAA,EAEJ;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"join-team.js","sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode\n} from \"react\";\n\nconst buttonVariants = [\"primary\", \"secondary\", \"ghost\", \"destructive\"] as const;\nconst buttonSizes = [\"sm\", \"md\", \"lg\"] as const;\n\nconst variantStyles: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary\",\n  secondary:\n    \"bg-secondary/20 text-secondary-foreground hover:bg-secondary/30 focus-visible:ring-secondary\",\n  ghost:\n    \"bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/60\",\n  destructive:\n    \"bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger\"\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n  sm: \"h-8 px-3 text-sm\",\n  md: \"h-10 px-4 text-sm\",\n  lg: \"h-12 px-6 text-base\"\n};\n\nconst inlineFlexBase =\n  \"inline-flex items-center justify-center gap-2 rounded-md font-medium tracking-tight transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-60\";\n\nconst Spinner = () => (\n  <span className=\"inline-flex h-3.5 w-3.5 animate-spin items-center justify-center\">\n    <span className=\"h-3 w-3 rounded-full border-2 border-transparent border-t-current\" />\n  </span>\n);\n\nexport type ButtonVariant = (typeof buttonVariants)[number];\nexport type ButtonSize = (typeof buttonSizes)[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  isLoading?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n}\n\nconst composeClassName = (\n  ...values: Array<string | undefined | false>\n): string => values.filter(Boolean).join(\" \");\n\n/**\n * Button is the primary interactive primitive for triggering portal actions.\n * It is theme aware via CSS variables generated from portal tokens.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = \"primary\",\n      size = \"md\",\n      type = \"button\",\n      isLoading = false,\n      leadingIcon,\n      trailingIcon,\n      disabled,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const computedLeading = isLoading ? <Spinner /> : leadingIcon;\n    const computedDisabled = disabled ?? isLoading;\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        className={composeClassName(\n          inlineFlexBase,\n          variantStyles[variant],\n          sizeStyles[size],\n          className\n        )}\n        aria-busy={isLoading || undefined}\n        disabled={computedDisabled}\n        {...props}\n      >\n        {computedLeading ? (\n          <span aria-hidden=\"true\" className=\"inline-flex\">\n            {computedLeading}\n          </span>\n        ) : null}\n        <span className=\"flex-1 whitespace-nowrap\">{children}</span>\n        {trailingIcon ? (\n          <span aria-hidden=\"true\" className=\"inline-flex\">\n            {trailingIcon}\n          </span>\n        ) : null}\n      </button>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n","'use client';\n\nimport {\n  forwardRef,\n  useEffect,\n  useState,\n  type ComponentPropsWithoutRef,\n  type FormEvent,\n  type ReactNode\n} from \"react\";\n\nimport { Button } from \"./button\";\n\nexport interface JoinTeamProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Logo element to display at the top */\n  logo?: ReactNode;\n  /** Team/product name to display in the heading */\n  teamName?: string;\n  /** Invite code from URL fragment (if available) */\n  initialCode?: string;\n  /** Whether an accept operation is in progress */\n  isSubmitting?: boolean;\n  /** Error message from a previous accept attempt */\n  error?: string | null;\n  /** Whether the invite has expired */\n  isExpired?: boolean;\n  /** Called when user clicks \"Accept invite\" */\n  onAcceptInvite?: (code: string) => Promise<void> | void;\n  /** Called when user clicks \"Refresh invite\" for expired invites */\n  onRefreshInvite?: (code: string) => Promise<void> | void;\n  /** URL to navigate to for login (when no code in URL) */\n  loginUrl?: string;\n}\n\n/**\n * JoinTeam renders a form for accepting team invitations.\n * Supports both URL-based codes (from email links) and manual code entry.\n */\nexport const JoinTeam = forwardRef<HTMLDivElement, JoinTeamProps>(\n  (\n    {\n      logo,\n      teamName = \"Enterprise Portal\",\n      initialCode = \"\",\n      isSubmitting = false,\n      error = null,\n      isExpired = false,\n      onAcceptInvite,\n      onRefreshInvite,\n      loginUrl = \"/login\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [manualCode, setManualCode] = useState(\"\");\n    const [localError, setLocalError] = useState<string | null>(null);\n    const [isRefreshing, setIsRefreshing] = useState(false);\n    const [refreshSuccess, setRefreshSuccess] = useState(false);\n    // Track whether to use URL code - can be cleared after refresh\n    const [useUrlCode, setUseUrlCode] = useState(true);\n\n    // Use code from URL if available and not cleared, otherwise use manual input\n    const hasUrlCode = Boolean(initialCode) && useUrlCode;\n    const effectiveCode = hasUrlCode ? initialCode : manualCode.trim();\n\n    // Clear local error when code changes\n    useEffect(() => {\n      if (manualCode) {\n        setLocalError(null);\n      }\n    }, [manualCode]);\n\n    const handleSubmit = async (event: FormEvent) => {\n      event.preventDefault();\n\n      if (!effectiveCode) {\n        setLocalError(\"Please enter your invite code\");\n        return;\n      }\n\n      if (!onAcceptInvite) {\n        return;\n      }\n\n      try {\n        setLocalError(null);\n        await onAcceptInvite(effectiveCode);\n      } catch (err) {\n        if (!hasUrlCode) {\n          // Only show local error for manual entry\n          const message =\n            err instanceof Error\n              ? err.message\n              : \"Invalid or expired code. Please check the code and try again.\";\n          setLocalError(message);\n        }\n      }\n    };\n\n    const handleRefresh = async () => {\n      if (!onRefreshInvite || !effectiveCode) {\n        return;\n      }\n\n      try {\n        setIsRefreshing(true);\n        setRefreshSuccess(false);\n        await onRefreshInvite(effectiveCode);\n        setRefreshSuccess(true);\n        \n        // After refresh, clear URL hash and switch to manual entry mode\n        // This matches Vandoor's behavior where href=\"#\" clears the hash\n        if (typeof window !== \"undefined\") {\n          window.history.replaceState(null, \"\", window.location.pathname + window.location.search);\n        }\n        setUseUrlCode(false);\n      } catch {\n        // Refresh errors are typically silent per the API design\n      } finally {\n        setIsRefreshing(false);\n      }\n    };\n\n    const displayError = error || localError;\n    const showRefreshLink = hasUrlCode && (isExpired || displayError);\n\n    return (\n      <div\n        ref={ref}\n        className={[\n          \"w-full max-w-xl rounded-3xl border-2 border-gray-900 bg-white p-12 shadow-xl\",\n          \"text-gray-900 transition-shadow\",\n          className\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        {...props}\n      >\n        <div className=\"flex flex-col items-center gap-6 text-center\">\n          {logo ?? (\n            <div className=\"flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-500 text-lg font-semibold leading-tight text-white\">\n              EP\n            </div>\n          )}\n          <div>\n            <h1 className=\"text-3xl font-bold tracking-tight text-gray-900\">\n              Join the {teamName} team\n            </h1>\n            <p className=\"mt-3 text-base text-gray-600\">\n              Accept your invitation to get started\n            </p>\n          </div>\n        </div>\n\n        <form onSubmit={handleSubmit} className=\"mt-10 space-y-4\">\n          {/* Show input field only when no code in URL */}\n          {!hasUrlCode && (\n            <>\n              <label\n                htmlFor=\"invite-code\"\n                className=\"block text-sm font-medium text-gray-700\"\n              >\n                Paste your invite code\n              </label>\n              <input\n                id=\"invite-code\"\n                type=\"text\"\n                placeholder=\"Paste code from your email\"\n                value={manualCode}\n                onChange={(e) => setManualCode(e.target.value)}\n                className={[\n                  \"portal-input w-full px-5 py-4 text-base font-mono\",\n                  displayError ? \"border-red-500\" : \"\"\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                autoFocus\n                disabled={isSubmitting}\n              />\n            </>\n          )}\n\n          {/* Error message */}\n          {displayError && (\n            <p className=\"text-sm font-medium text-red-600\">{displayError}</p>\n          )}\n\n          {/* Refresh success message */}\n          {refreshSuccess && (\n            <p className=\"text-sm font-medium text-green-600\">\n              A new invitation has been sent to your email.\n            </p>\n          )}\n\n          {/* Accept button */}\n          <Button\n            type=\"submit\"\n            size=\"lg\"\n            className=\"w-full justify-center rounded-xl bg-indigo-600 text-white hover:bg-indigo-700\"\n            disabled={!effectiveCode || isSubmitting}\n            isLoading={isSubmitting}\n          >\n            Accept invite\n          </Button>\n\n          {/* Refresh invite link (shown on error for URL-based codes) */}\n          {showRefreshLink && onRefreshInvite && (\n            <div className=\"text-center\">\n              <button\n                type=\"button\"\n                onClick={handleRefresh}\n                disabled={isRefreshing}\n                className=\"text-sm font-medium text-indigo-600 hover:text-indigo-700 hover:underline disabled:opacity-50\"\n              >\n                {isRefreshing ? \"Sending...\" : \"Refresh invite\"}\n              </button>\n            </div>\n          )}\n\n          {/* Login link (shown when no URL code) */}\n          {!hasUrlCode && (\n            <div className=\"text-center\">\n              <a\n                href={loginUrl}\n                className=\"text-sm font-medium text-indigo-600 hover:text-indigo-700 hover:underline\"\n              >\n                or login\n              </a>\n            </div>\n          )}\n        </form>\n      </div>\n    );\n  }\n);\n\nJoinTeam.displayName = \"JoinTeam\";\n\n"]}