magic-editor-x 1.0.0

package/dist/_chunks/LiveCollaborationPanel-ryjcDAA7.mjs

@@ -0,0 +1,220 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { u as useIntl, a as Flex, g as getTranslation } from "./getTranslation-C4uWR0DB.mjs";
+import styled, { css, keyframes } from "styled-components";
+const pulse = keyframes`
+  0%, 100% { 
+    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
+    transform: scale(1);
+  }
+  50% { 
+    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1);
+    transform: scale(1.1);
+  }
+`;
+const StatusCard = styled.div`
+  background: ${(props) => props.theme.colors.neutral0};
+  border: 1px solid ${({ $status, theme }) => $status === "connected" ? "rgba(34, 197, 94, 0.3)" : $status === "denied" ? "rgba(239, 68, 68, 0.3)" : theme.colors.neutral200};
+  border-radius: 10px;
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+const StatusDot = styled.div`
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: ${({ $status }) => $status === "connected" ? "#22c55e" : $status === "connecting" || $status === "requesting" ? "#f59e0b" : $status === "denied" ? "#ef4444" : "#94a3b8"};
+  
+  ${({ $status }) => $status === "connected" && css`
+    animation: ${pulse} 2s ease-in-out infinite;
+  `}
+`;
+const StatusText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+const StatusLabel = styled.span`
+  font-size: 14px;
+  font-weight: 600;
+  color: ${({ $status, theme }) => $status === "connected" ? theme.colors.success600 : $status === "connecting" || $status === "requesting" ? theme.colors.warning600 : $status === "denied" ? theme.colors.danger600 : theme.colors.neutral600};
+`;
+const StatusSubtext = styled.span`
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.neutral500};
+`;
+const SectionTitle = styled.div`
+  font-size: 11px;
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral600};
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+`;
+const PeerItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  background: ${(props) => props.theme.colors.neutral0};
+  border-radius: 10px;
+  border: 1px solid ${(props) => props.theme.colors.neutral150};
+  transition: all 0.2s ease;
+  
+  &:hover {
+    border-color: ${(props) => props.theme.colors.primary200};
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
+    transform: translateY(-1px);
+  }
+`;
+const PEER_COLORS = [
+  "linear-gradient(135deg, #7C3AED 0%, #a855f7 100%)",
+  "linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%)",
+  "linear-gradient(135deg, #10b981 0%, #34d399 100%)",
+  "linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)",
+  "linear-gradient(135deg, #ef4444 0%, #f87171 100%)",
+  "linear-gradient(135deg, #ec4899 0%, #f472b6 100%)"
+];
+const PeerAvatar = styled.div`
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: ${({ $color }) => $color || PEER_COLORS[0]};
+  color: white;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+const PeerInfo = styled.div`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+const PeerName = styled.span`
+  font-size: 13px;
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral800};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const PeerEmail = styled.span`
+  font-size: 11px;
+  color: ${(props) => props.theme.colors.neutral500};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const OnlineBadge = styled.span`
+  font-size: 10px;
+  font-weight: 600;
+  color: #166534;
+  background: #dcfce7;
+  padding: 4px 8px;
+  border-radius: 12px;
+  flex-shrink: 0;
+`;
+const EmptyState = styled.div`
+  text-align: center;
+  padding: 16px;
+  background: ${(props) => props.theme.colors.neutral100};
+  border-radius: 10px;
+  border: 1px dashed ${(props) => props.theme.colors.neutral300};
+`;
+const EmptyText = styled.span`
+  font-size: 13px;
+  color: ${(props) => props.theme.colors.neutral500};
+`;
+const getPeerInitials = (user = {}) => {
+  const first = (user.firstname?.[0] || user.email?.[0] || "?").toUpperCase();
+  const last = (user.lastname?.[0] || "").toUpperCase();
+  return `${first}${last}`.trim();
+};
+const getPeerName = (user = {}, t) => {
+  if (user.firstname) {
+    return `${user.firstname} ${user.lastname || ""}`.trim();
+  }
+  return user.email || t("collab.unknown", "Unknown");
+};
+const LiveCollaborationPanel = ({ documentId, model, document }) => {
+  const { formatMessage } = useIntl();
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
+  const [collabState, setCollabState] = useState({
+    status: "disabled",
+    peers: [],
+    error: null
+  });
+  useEffect(() => {
+    const handleCollabUpdate = (event) => {
+      if (event.detail) {
+        setCollabState(event.detail);
+      }
+    };
+    window.addEventListener("magic-editor-collab-update", handleCollabUpdate);
+    if (window.__MAGIC_EDITOR_COLLAB_STATE__) {
+      setCollabState(window.__MAGIC_EDITOR_COLLAB_STATE__);
+    }
+    return () => {
+      window.removeEventListener("magic-editor-collab-update", handleCollabUpdate);
+    };
+  }, []);
+  const { status, peers, error } = collabState;
+  const statusLabel = useMemo(() => {
+    switch (status) {
+      case "connected":
+        return t("collab.live", "Live");
+      case "connecting":
+        return t("collab.connecting", "Connecting...");
+      case "requesting":
+        return t("collab.checkingPermission", "Checking permission");
+      case "denied":
+        return t("collab.noPermission", "No permission");
+      case "disconnected":
+        return t("collab.disconnected", "Disconnected");
+      case "disabled":
+        return t("collab.disabled", "Disabled");
+      default:
+        return t("collab.ready", "Ready");
+    }
+  }, [status, t]);
+  if (status === "disabled" || status === "idle") {
+    return null;
+  }
+  const isConnected = status === "connected";
+  return {
+    title: t("collab.title", "Live Collaboration"),
+    content: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, alignItems: "stretch", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs(StatusCard, { $status: status, children: [
+        /* @__PURE__ */ jsx(StatusDot, { $status: status }),
+        /* @__PURE__ */ jsxs(StatusText, { children: [
+          /* @__PURE__ */ jsx(StatusLabel, { $status: status, children: statusLabel }),
+          /* @__PURE__ */ jsx(StatusSubtext, { children: isConnected ? t("collab.realtimeActive", "Realtime sync active") : error || t("collab.connectionEstablishing", "Connection is being established...") })
+        ] })
+      ] }),
+      isConnected && peers.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(SectionTitle, { children: t("collab.activePeers", "Active Collaborators ({count})", { count: peers.length }) }),
+        /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, alignItems: "stretch", children: peers.map((peer, idx) => /* @__PURE__ */ jsxs(PeerItem, { children: [
+          /* @__PURE__ */ jsx(PeerAvatar, { $color: PEER_COLORS[idx % PEER_COLORS.length], children: getPeerInitials(peer) }),
+          /* @__PURE__ */ jsxs(PeerInfo, { children: [
+            /* @__PURE__ */ jsx(PeerName, { children: getPeerName(peer, t) }),
+            peer.email && peer.firstname && /* @__PURE__ */ jsx(PeerEmail, { children: peer.email })
+          ] }),
+          /* @__PURE__ */ jsx(OnlineBadge, { children: t("collab.online", "Online") })
+        ] }, peer.id)) })
+      ] }),
+      isConnected && peers.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: /* @__PURE__ */ jsx(EmptyText, { children: t("collab.workingAlone", "You are working alone") }) })
+    ] })
+  };
+};
+export {
+  LiveCollaborationPanel as default
+};

package/dist/_chunks/Settings-Bk9bxJTy.js

@@ -0,0 +1,440 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const getTranslation = require("./getTranslation-D35vbDap.js");
+const admin = require("@strapi/strapi/admin");
+const outline = require("@heroicons/react/24/outline");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const theme = {
+  borderRadius: { lg: "12px" }
+};
+const fadeIn = styled.keyframes`
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+const shimmer = styled.keyframes`
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+`;
+const Container = styled__default.default(getTranslation.Box)`
+  ${styled.css`animation: ${fadeIn} 0.5s;`}
+  max-width: 1400px;
+  margin: 0 auto;
+`;
+const StickySaveBar = styled__default.default(getTranslation.Box)`
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: ${(props) => props.theme.colors.neutral0};
+  border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+`;
+const LicenseKeyBanner = styled__default.default(getTranslation.Box)`
+  background: linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%);
+  border-radius: ${theme.borderRadius.lg};
+  padding: 28px 32px;
+  color: white;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25);
+  margin-bottom: 24px;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+      45deg,
+      transparent,
+      rgba(255, 255, 255, 0.08),
+      transparent
+    );
+    ${styled.css`animation: ${shimmer} 3s infinite;`}
+    pointer-events: none;
+    z-index: 0;
+  }
+  
+  & > * {
+    position: relative;
+    z-index: 1;
+  }
+`;
+const LoaderContainer = styled__default.default(getTranslation.Flex)`
+  min-height: 400px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 16px;
+`;
+const Settings = () => {
+  const { formatMessage } = getTranslation.useIntl();
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation.getTranslation(id), defaultMessage }, values);
+  const { get } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  const [loading, setLoading] = React.useState(true);
+  const [licenseData, setLicenseData] = React.useState(null);
+  const [limits, setLimits] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const fetchLicenseStatus = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [statusRes, limitsRes] = await Promise.all([
+        get("/magic-editor-x/license/status"),
+        get("/magic-editor-x/license/limits")
+      ]);
+      setLicenseData(statusRes.data);
+      setLimits(limitsRes.data);
+    } catch (err) {
+      console.error("[Magic Editor X] Error fetching license:", err);
+      setError("Failed to load license information");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleCopyLicenseKey = async () => {
+    try {
+      await navigator.clipboard.writeText(licenseData?.data?.licenseKey || "");
+      toggleNotification({
+        type: "success",
+        message: t("license.copied", "License key copied to clipboard!")
+      });
+    } catch (err) {
+      toggleNotification({
+        type: "danger",
+        message: t("license.copyFailed", "Failed to copy license key")
+      });
+    }
+  };
+  const handleDownloadLicenseKey = () => {
+    try {
+      const data2 = licenseData?.data || {};
+      const licenseKey = data2.licenseKey || "";
+      const email = data2.email || "N/A";
+      const firstName = data2.firstName || "";
+      const lastName = data2.lastName || "";
+      const fullName = `${firstName} ${lastName}`.trim() || "N/A";
+      const tier2 = licenseData?.tier || "free";
+      const content = `Magic Editor X - License Key
+===================================
+
+License Key: ${licenseKey}
+
+License Holder Information:
+----------------------------------
+Name:        ${fullName}
+Email:       ${email}
+
+License Status:
+----------------------------------
+Status:      ${data2.isActive ? "ACTIVE" : "INACTIVE"}
+Tier:        ${tier2.toUpperCase()}
+Expires:     ${data2.expiresAt ? new Date(data2.expiresAt).toLocaleDateString() : "Never"}
+
+Features:
+----------------------------------
+Premium:     ${data2.features?.premium ? "Enabled" : "Disabled"}
+Advanced:    ${data2.features?.advanced ? "Enabled" : "Disabled"}
+Enterprise:  ${data2.features?.enterprise ? "Enabled" : "Disabled"}
+
+===================================
+Generated:   ${(/* @__PURE__ */ new Date()).toLocaleString()}
+`;
+      const blob = new Blob([content], { type: "text/plain" });
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `magic-editor-x-license-${licenseKey.substring(0, 8)}.txt`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+      toggleNotification({
+        type: "success",
+        message: t("license.downloaded", "License key downloaded successfully!")
+      });
+    } catch (err) {
+      toggleNotification({
+        type: "danger",
+        message: t("license.downloadFailed", "Failed to download license key")
+      });
+    }
+  };
+  React.useEffect(() => {
+    fetchLicenseStatus();
+  }, []);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(LoaderContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Loader, { children: t("license.loading", "Loading license information...") }) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Box, { padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Alert, { variant: "danger", title: "Error", closeLabel: "Close", children: error }) }) });
+  }
+  const isValid = licenseData?.valid;
+  const isDemo = licenseData?.demo;
+  const tier = licenseData?.tier || "free";
+  const data = licenseData?.data || {};
+  const collaborators = limits?.limits?.collaborators || { current: 0, max: 2, unlimited: false };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StickySaveBar, { paddingTop: 5, paddingBottom: 5, paddingLeft: 6, paddingRight: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "alpha", fontWeight: "bold", children: t("license.title", "License Management") }),
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "epsilon", textColor: "neutral600", children: t("license.subtitle", "View your Magic Editor X plugin license") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        getTranslation.Button,
+        {
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowPathIcon, { style: { width: 20, height: 20 } }),
+          onClick: fetchLicenseStatus,
+          size: "L",
+          style: {
+            background: "linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%)",
+            color: "white",
+            fontWeight: "600",
+            border: "none"
+          },
+          children: t("license.refresh", "Refresh Status")
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { paddingTop: 6, paddingLeft: 6, paddingRight: 6, paddingBottom: 10, children: [
+      isDemo ? /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Alert, { variant: "warning", title: t("license.alert.free", "FREE Mode"), closeLabel: "Close", children: t("license.alert.free.message", "You're using the FREE version with 2 collaborators. Upgrade for more features.") }) : isValid ? /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Alert, { variant: "success", title: t("license.alert.active", "License Active"), closeLabel: "Close", children: t("license.alert.active.message", "Your license is active and all features are unlocked.") }) : /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Alert, { variant: "danger", title: t("license.alert.issue", "License Issue"), closeLabel: "Close", children: t("license.alert.issue.message", "There's an issue with your license. Please check your license status.") }),
+      data.licenseKey && /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Box, { marginTop: 6, children: /* @__PURE__ */ jsxRuntime.jsx(LicenseKeyBanner, { children: /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "pi", style: { color: "rgba(255,255,255,0.8)", marginBottom: "12px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px", display: "block" }, children: t("license.key", "License Key") }),
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { style: { color: "white", fontFamily: "monospace", fontSize: "28px", fontWeight: "bold", wordBreak: "break-all", marginBottom: "16px" }, children: data.licenseKey }),
+          /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              getTranslation.Button,
+              {
+                onClick: handleCopyLicenseKey,
+                startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentDuplicateIcon, { style: { width: 16, height: 16 } }),
+                size: "S",
+                variant: "secondary",
+                style: {
+                  backgroundColor: "rgba(255,255,255,0.2)",
+                  color: "white",
+                  border: "1px solid rgba(255,255,255,0.3)",
+                  fontWeight: "600"
+                },
+                children: t("license.copyKey", "Copy Key")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              getTranslation.Button,
+              {
+                onClick: handleDownloadLicenseKey,
+                startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowDownTrayIcon, { style: { width: 16, height: 16 } }),
+                size: "S",
+                variant: "secondary",
+                style: {
+                  backgroundColor: "rgba(255,255,255,0.2)",
+                  color: "white",
+                  border: "1px solid rgba(255,255,255,0.3)",
+                  fontWeight: "600"
+                },
+                children: t("license.downloadTxt", "Download as TXT")
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { direction: "column", gap: 2, alignItems: "flex-end", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            getTranslation.Badge,
+            {
+              backgroundColor: data.isActive ? "success100" : "danger100",
+              textColor: data.isActive ? "success700" : "danger700",
+              style: { fontSize: "11px", fontWeight: "700", padding: "6px 12px" },
+              children: data.isActive ? "ACTIVE" : "INACTIVE"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            getTranslation.Badge,
+            {
+              style: {
+                fontSize: "11px",
+                fontWeight: "700",
+                padding: "6px 12px",
+                background: tier === "free" ? "#6B7280" : "#7C3AED",
+                color: "white"
+              },
+              children: tier.toUpperCase()
+            }
+          )
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Box, { marginTop: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Accordion.Root, { defaultValue: "account", collapsible: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Accordion.Item, { value: "account", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.UserIcon, { style: { width: 16, height: 16 } }), children: t("license.section.account", "Account Information") }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Box, { padding: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { gap: 8, wrap: "wrap", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { style: { flex: "1", minWidth: "200px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", style: { marginBottom: "8px", display: "block" }, children: t("license.email", "Email Address") }),
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "omega", fontWeight: "semiBold", children: data.email || t("license.notProvided", "Not provided") })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { style: { flex: "1", minWidth: "200px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", style: { marginBottom: "8px", display: "block" }, children: t("license.holder", "License Holder") }),
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "omega", fontWeight: "semiBold", children: data.firstName && data.lastName ? `${data.firstName} ${data.lastName}` : t("license.notSpecified", "Not specified") })
+            ] })
+          ] }) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Accordion.Item, { value: "collaborators", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.UsersIcon, { style: { width: 16, height: 16 } }), children: t("license.section.collaborators", "Collaborator Limits") }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { padding: 6, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { gap: 8, wrap: "wrap", alignItems: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { style: { flex: "1", minWidth: "200px" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", style: { marginBottom: "8px", display: "block" }, children: t("license.currentUsage", "Current Usage") }),
+                /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { variant: "omega", fontWeight: "semiBold", style: { fontSize: "24px" }, children: [
+                  collaborators.current,
+                  " / ",
+                  collaborators.unlimited ? t("license.unlimited", "Unlimited") : collaborators.max
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { style: { flex: "1", minWidth: "200px" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", style: { marginBottom: "8px", display: "block" }, children: t("license.status", "Status") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  getTranslation.Badge,
+                  {
+                    backgroundColor: collaborators.canAdd ? "success100" : "danger100",
+                    textColor: collaborators.canAdd ? "success700" : "danger700",
+                    style: { fontSize: "12px", fontWeight: "600", padding: "6px 12px" },
+                    children: collaborators.canAdd ? t("license.canAddMore", "Can add more") : t("license.limitReached", "Limit reached")
+                  }
+                )
+              ] })
+            ] }),
+            !collaborators.canAdd && !collaborators.unlimited && /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Box, { marginTop: 4, padding: 4, background: "warning100", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "omega", textColor: "warning700", children: t("license.upgradeMessage", "Upgrade your plan to add more collaborators. Visit https://store.magicdx.dev/") }) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Accordion.Item, { value: "details", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.ShieldCheckIcon, { style: { width: 16, height: 16 } }), children: t("license.section.details", "License Details") }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Box, { padding: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { gap: 8, wrap: "wrap", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { style: { flex: "1", minWidth: "180px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", style: { marginBottom: "8px", display: "block" }, children: data.isExpired ? t("license.expiredOn", "Expired On") : t("license.expiresOn", "Expires On") }),
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "omega", fontWeight: "semiBold", children: data.expiresAt ? new Date(data.expiresAt).toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "long",
+                day: "numeric"
+              }) : t("license.never", "Never") })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { style: { flex: "1", minWidth: "180px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", style: { marginBottom: "8px", display: "block" }, children: t("license.deviceName", "Device Name") }),
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "omega", fontWeight: "semiBold", children: data.deviceName || t("license.unknown", "Unknown") })
+            ] })
+          ] }) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Accordion.Item, { value: "features", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 16, height: 16 } }), children: t("license.section.features", "Features & Capabilities") }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { padding: 6, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { gap: 3, style: { marginBottom: "32px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                getTranslation.Badge,
+                {
+                  backgroundColor: tier === "free" ? "success100" : "neutral100",
+                  textColor: tier === "free" ? "success700" : "neutral600",
+                  style: {
+                    fontSize: "13px",
+                    fontWeight: "700",
+                    padding: "8px 16px",
+                    border: tier === "free" ? "2px solid #dcfce7" : "2px solid #e5e7eb"
+                  },
+                  children: [
+                    tier === "free" ? "[ACTIVE]" : "",
+                    " FREE"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                getTranslation.Badge,
+                {
+                  backgroundColor: tier === "premium" ? "primary100" : "neutral100",
+                  textColor: tier === "premium" ? "primary700" : "neutral600",
+                  style: {
+                    fontSize: "13px",
+                    fontWeight: "700",
+                    padding: "8px 16px",
+                    border: tier === "premium" ? "2px solid #ede9fe" : "2px solid #e5e7eb"
+                  },
+                  children: [
+                    tier === "premium" ? "[ACTIVE]" : "",
+                    " PREMIUM"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                getTranslation.Badge,
+                {
+                  backgroundColor: tier === "advanced" || tier === "enterprise" ? "secondary100" : "neutral100",
+                  textColor: tier === "advanced" || tier === "enterprise" ? "secondary700" : "neutral600",
+                  style: {
+                    fontSize: "13px",
+                    fontWeight: "700",
+                    padding: "8px 16px",
+                    border: tier === "advanced" || tier === "enterprise" ? "2px solid #ddd6fe" : "2px solid #e5e7eb"
+                  },
+                  children: [
+                    tier === "advanced" || tier === "enterprise" ? "[ACTIVE]" : "",
+                    " ADVANCED"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { padding: 5, background: "neutral100", hasRadius: true, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "delta", fontWeight: "bold", style: { marginBottom: "16px", display: "block" }, children: t("license.yourPlanIncludes", "Your Plan Includes:") }),
+              /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { direction: "column", gap: 2, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { variant: "omega", style: { fontSize: "14px" }, children: [
+                  "[OK] ",
+                  t("license.feature.fullAccess", "Full Editor Access (all tools)")
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { variant: "omega", style: { fontSize: "14px" }, children: [
+                  "[OK] ",
+                  t("license.feature.realtimeCollab", "Real-Time Collaboration")
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { variant: "omega", style: { fontSize: "14px" }, children: [
+                  "[OK] ",
+                  collaborators.unlimited ? t("license.feature.collaboratorsUnlimited", "Unlimited Collaborators") : t("license.feature.collaborators", "{count} Collaborator(s)", { count: collaborators.max })
+                ] }),
+                (tier === "premium" || tier === "advanced" || tier === "enterprise") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { variant: "omega", style: { fontSize: "14px" }, children: [
+                    "[OK] ",
+                    t("license.feature.aiAssistant", "AI Assistant (Usage-based)")
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { variant: "omega", style: { fontSize: "14px" }, children: [
+                    "[OK] ",
+                    t("license.feature.versionHistory", "Version History")
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { variant: "omega", style: { fontSize: "14px" }, children: [
+                    "[OK] ",
+                    t("license.feature.prioritySupport", "Priority Support")
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Accordion.Item, { value: "status", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.ChartBarIcon, { style: { width: 16, height: 16 } }), children: t("license.section.status", "System Status") }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Box, { padding: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { gap: 8, wrap: "wrap", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { style: { flex: "1", minWidth: "150px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", style: { marginBottom: "8px", display: "block" }, children: t("license.licenseStatus", "License Status") }),
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "omega", fontWeight: "semiBold", children: data.isActive ? t("license.active", "Active") : t("license.inactive", "Inactive") })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { style: { flex: "1", minWidth: "150px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", style: { marginBottom: "8px", display: "block" }, children: t("license.connection", "Connection") }),
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "omega", fontWeight: "semiBold", children: data.isOnline ? t("license.online", "Online") : t("license.offline", "Offline") })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { style: { flex: "1", minWidth: "150px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", style: { marginBottom: "8px", display: "block" }, children: t("license.lastSync", "Last Sync") }),
+              /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "omega", fontWeight: "semiBold", children: data.lastPingAt ? new Date(data.lastPingAt).toLocaleTimeString() : t("license.never", "Never") })
+            ] })
+          ] }) }) })
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+exports.default = Settings;