magic-editor-x 1.0.0

package/dist/_chunks/LicensePage-CWH-AFR-.mjs

@@ -0,0 +1,373 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useFetchClient, useNotification } from "@strapi/strapi/admin";
+import { u as useIntl, a as Flex, L as Loader, T as Typography, d as Badge, B as Box, g as getTranslation, c as Button } from "./getTranslation-C4uWR0DB.mjs";
+import styled from "styled-components";
+import { F as ForwardRef$2o, a as ForwardRef$26, b as ForwardRef$o, c as ForwardRef$1g, d as ForwardRef$y } from "./index-B5MzUyo0.mjs";
+const Container = styled(Box)`
+  padding: 32px;
+  max-width: 1400px;
+  margin: 0 auto;
+`;
+const Header = styled(Box)`
+  text-align: center;
+  margin-bottom: 48px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+const Title = styled(Typography)`
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  background: linear-gradient(135deg, #7C3AED, #6d28d9);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: block;
+`;
+const Subtitle = styled(Typography)`
+  font-size: 1.125rem;
+  color: ${(props) => props.theme.colors.neutral600};
+  line-height: 1.6;
+  display: block;
+`;
+const TierGrid = styled(Flex)`
+  gap: 32px;
+  margin: 0 auto 48px;
+  max-width: 1080px;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: stretch;
+`;
+const TierWrapper = styled(Box)`
+  flex: 1;
+  min-width: 280px;
+  max-width: 340px;
+  display: flex;
+`;
+const TierCard = styled(Box)`
+  background: ${(props) => props.theme.colors.neutral0};
+  border-radius: 16px;
+  padding: 32px;
+  border: 2px solid ${(props) => props.$featured ? "#7C3AED" : props.theme.colors.neutral200};
+  position: relative;
+  transition: all 0.3s ease;
+  box-shadow: ${(props) => props.$featured ? "0 20px 25px -5px rgba(124, 58, 237, 0.25), 0 8px 10px -6px rgba(124, 58, 237, 0.2)" : "0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05)"};
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
+  }
+`;
+const PopularBadge = styled(Badge)`
+  position: absolute;
+  top: -12px;
+  right: 24px;
+  background: linear-gradient(135deg, #7C3AED, #6d28d9);
+  color: white;
+  padding: 4px 16px;
+  font-size: 12px;
+  font-weight: 600;
+`;
+const TierIcon = styled(Box)`
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+  background: ${(props) => props.$color};
+  
+  svg {
+    width: 28px;
+    height: 28px;
+    color: white;
+  }
+`;
+const TierName = styled(Typography)`
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+`;
+const TierPrice = styled(Typography)`
+  font-size: 2rem;
+  font-weight: 800;
+  margin-bottom: 4px;
+`;
+const TierDescription = styled(Typography)`
+  color: ${(props) => props.theme.colors.neutral600};
+  margin-bottom: 24px;
+`;
+const FeatureList = styled(Box)`
+  margin-bottom: 24px;
+  flex: 1;
+`;
+const Feature = styled(Flex)`
+  gap: 12px;
+  margin-bottom: 12px;
+  align-items: flex-start;
+`;
+const FeatureIcon = styled(Box)`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 2px;
+  
+  ${(props) => props.$included ? `
+    background: #DCFCE7;
+    svg { color: #16A34A; }
+  ` : `
+    background: #FEE2E2;
+    svg { color: #DC2626; }
+  `}
+`;
+const UpgradeButton = styled(Button)`
+  width: 100%;
+  height: 48px;
+  font-weight: 600;
+  font-size: 15px;
+  background: ${(props) => props.$gradient};
+  border: none;
+  color: white;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+`;
+const CurrentPlanBadge = styled(Badge)`
+  width: 100%;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${(props) => props.theme.colors.neutral100};
+  color: ${(props) => props.theme.colors.neutral600};
+  font-weight: 600;
+  font-size: 15px;
+`;
+const UsageBox = styled(Box)`
+  background: ${(props) => props.theme.colors.neutral100};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 32px;
+`;
+const UsageBar = styled.div`
+  height: 8px;
+  background: ${(props) => props.theme.colors.neutral200};
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: 8px;
+`;
+const UsageProgress = styled.div`
+  height: 100%;
+  background: ${(props) => props.$percentage > 80 ? "#ef4444" : props.$percentage > 50 ? "#f59e0b" : "#10b981"};
+  width: ${(props) => Math.min(props.$percentage, 100)}%;
+  transition: width 0.3s ease;
+`;
+const LicensePage = () => {
+  const { formatMessage } = useIntl();
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
+  const { get } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const [currentTier, setCurrentTier] = useState("free");
+  const [limits, setLimits] = useState(null);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    fetchLicenseInfo();
+  }, []);
+  const fetchLicenseInfo = async () => {
+    try {
+      const response = await get("/magic-editor-x/license/limits");
+      const licenseData = response.data || {};
+      setCurrentTier(licenseData.tier || "free");
+      setLimits(licenseData.limits);
+      setLoading(false);
+    } catch (error) {
+      console.error("Failed to fetch license info:", error);
+      setLoading(false);
+    }
+  };
+  const getTierRank = (tierId) => {
+    const ranks = {
+      "free": 0,
+      "premium": 1,
+      "advanced": 2,
+      "enterprise": 3
+    };
+    return ranks[tierId] || 0;
+  };
+  const getButtonText = (tierId) => {
+    const currentRank = getTierRank(currentTier);
+    const targetRank = getTierRank(tierId);
+    if (currentRank === targetRank) {
+      return t("upgradePage.currentPlan", "Current Plan");
+    } else if (targetRank > currentRank) {
+      return t("upgradePage.upgradeNow", "Upgrade Now");
+    } else {
+      return t("upgradePage.downgrade", "Downgrade");
+    }
+  };
+  const tiers = [
+    {
+      id: "free",
+      name: "FREE",
+      price: "$0",
+      period: "forever",
+      description: "Perfect for small projects and testing",
+      icon: /* @__PURE__ */ jsx(ForwardRef$o, {}),
+      color: "linear-gradient(135deg, #6B7280, #4B5563)",
+      features: [
+        { name: "Full Editor Access", included: true },
+        { name: "All Editor Tools", included: true },
+        { name: "2 Collaborators", included: true },
+        { name: "Real-time Sync", included: true },
+        { name: "AI Grammar Check (3/day)", included: true },
+        { name: "AI Style + Rewrite", included: false },
+        { name: "Version History", included: false },
+        { name: "Priority Support", included: false }
+      ],
+      limits: {
+        collaborators: "2"
+      }
+    },
+    {
+      id: "premium",
+      name: "PREMIUM",
+      price: "$9.90",
+      period: "/month",
+      description: "Enhanced collaboration for teams",
+      icon: /* @__PURE__ */ jsx(ForwardRef$1g, {}),
+      color: "linear-gradient(135deg, #8B5CF6, #7C3AED)",
+      featured: true,
+      features: [
+        { name: "Full Editor Access", included: true },
+        { name: "All Editor Tools", included: true },
+        { name: "10 Collaborators", included: true },
+        { name: "Real-time Sync", included: true },
+        { name: "AI Grammar + Style (10/day)", included: true },
+        { name: "Version History", included: true },
+        { name: "Priority Support", included: true }
+      ],
+      limits: {
+        collaborators: "10"
+      }
+    },
+    {
+      id: "advanced",
+      name: "ADVANCED",
+      price: "$24.90",
+      period: "/month",
+      description: "Unlimited collaboration for enterprises",
+      icon: /* @__PURE__ */ jsx(ForwardRef$y, {}),
+      color: "linear-gradient(135deg, #7C3AED, #6d28d9)",
+      features: [
+        { name: "Full Editor Access", included: true },
+        { name: "All Editor Tools", included: true },
+        { name: "Unlimited Collaborators", included: true },
+        { name: "Real-time Sync", included: true },
+        { name: "AI All Types (Unlimited)", included: true },
+        { name: "Version History", included: true },
+        { name: "Priority Support", included: true }
+      ],
+      limits: {
+        collaborators: "Unlimited"
+      }
+    }
+  ];
+  const handleUpgrade = (tierId) => {
+    window.open("https://store.magicdx.dev/", "_blank");
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Loader, { children: t("license.loading", "Loading license information...") }) }) });
+  }
+  const collaboratorUsage = limits?.collaborators ? {
+    current: limits.collaborators.current || 0,
+    max: limits.collaborators.max,
+    unlimited: limits.collaborators.unlimited,
+    percentage: limits.collaborators.unlimited ? 0 : limits.collaborators.current / limits.collaborators.max * 100
+  } : { current: 0, max: 2, unlimited: false, percentage: 0 };
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsx(Title, { variant: "alpha", children: t("upgradePage.title", "Magic Editor X") }),
+      /* @__PURE__ */ jsx(Subtitle, { variant: "omega", children: t("upgradePage.subtitle", "Choose your plan for collaborative editing") })
+    ] }),
+    /* @__PURE__ */ jsxs(UsageBox, { children: [
+      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", children: t("upgradePage.currentUsage", "Current Usage") }),
+        /* @__PURE__ */ jsx(Badge, { style: { background: currentTier === "free" ? "#6B7280" : "#7C3AED", color: "white" }, children: currentTier.toUpperCase() })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { marginTop: 4, children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", children: t("upgradePage.collaborators", "Collaborators") }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "omega", fontWeight: "bold", children: [
+            collaboratorUsage.current,
+            " / ",
+            collaboratorUsage.unlimited ? t("license.unlimited", "Unlimited") : collaboratorUsage.max
+          ] })
+        ] }),
+        !collaboratorUsage.unlimited && /* @__PURE__ */ jsx(UsageBar, { children: /* @__PURE__ */ jsx(UsageProgress, { $percentage: collaboratorUsage.percentage }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TierGrid, { children: tiers.map((tier) => /* @__PURE__ */ jsx(TierWrapper, { children: /* @__PURE__ */ jsxs(TierCard, { $featured: tier.featured, children: [
+      tier.featured && /* @__PURE__ */ jsx(PopularBadge, { children: t("upgradePage.mostPopular", "MOST POPULAR") }),
+      /* @__PURE__ */ jsx(TierIcon, { $color: tier.color, children: tier.icon }),
+      /* @__PURE__ */ jsx(TierName, { variant: "beta", children: tier.name }),
+      /* @__PURE__ */ jsxs(Flex, { alignItems: "baseline", gap: 1, children: [
+        /* @__PURE__ */ jsx(TierPrice, { variant: "alpha", children: tier.price }),
+        /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
+      ] }),
+      /* @__PURE__ */ jsx(TierDescription, { variant: "omega", children: tier.description }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          background: "neutral100",
+          hasRadius: true,
+          padding: 3,
+          marginBottom: 5,
+          children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+            /* @__PURE__ */ jsx("strong", { children: "Collaborators:" }),
+            " ",
+            tier.limits.collaborators
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(FeatureList, { children: tier.features.map((feature, index) => /* @__PURE__ */ jsxs(Feature, { children: [
+        /* @__PURE__ */ jsx(FeatureIcon, { $included: feature.included, children: feature.included ? /* @__PURE__ */ jsx(ForwardRef$2o, { style: { width: 14, height: 14 } }) : /* @__PURE__ */ jsx(ForwardRef$26, { style: { width: 14, height: 14 } }) }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "omega",
+            textColor: feature.included ? "neutral800" : "neutral500",
+            style: {
+              fontSize: "14px",
+              textDecoration: feature.included ? "none" : "line-through"
+            },
+            children: feature.name
+          }
+        )
+      ] }, index)) }),
+      currentTier === tier.id ? /* @__PURE__ */ jsx(CurrentPlanBadge, { children: t("upgradePage.currentPlan", "Current Plan") }) : /* @__PURE__ */ jsx(
+        UpgradeButton,
+        {
+          $gradient: tier.color,
+          onClick: () => handleUpgrade(tier.id),
+          children: getButtonText(tier.id)
+        }
+      )
+    ] }) }, tier.id)) })
+  ] });
+};
+export {
+  LicensePage as default
+};

package/dist/_chunks/LiveCollaborationPanel-DbDHwr2C.js

@@ -0,0 +1,222 @@
+"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 styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const pulse = styled.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__default.default.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__default.default.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" && styled.css`
+    animation: ${pulse} 2s ease-in-out infinite;
+  `}
+`;
+const StatusText = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+const StatusLabel = styled__default.default.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__default.default.span`
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.neutral500};
+`;
+const SectionTitle = styled__default.default.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__default.default.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__default.default.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__default.default.div`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+const PeerName = styled__default.default.span`
+  font-size: 13px;
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral800};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const PeerEmail = styled__default.default.span`
+  font-size: 11px;
+  color: ${(props) => props.theme.colors.neutral500};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const OnlineBadge = styled__default.default.span`
+  font-size: 10px;
+  font-weight: 600;
+  color: #166534;
+  background: #dcfce7;
+  padding: 4px 8px;
+  border-radius: 12px;
+  flex-shrink: 0;
+`;
+const EmptyState = styled__default.default.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__default.default.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 } = getTranslation.useIntl();
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation.getTranslation(id), defaultMessage }, values);
+  const [collabState, setCollabState] = React.useState({
+    status: "disabled",
+    peers: [],
+    error: null
+  });
+  React.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 = React.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__ */ jsxRuntime.jsxs(getTranslation.Flex, { direction: "column", gap: 4, alignItems: "stretch", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(StatusCard, { $status: status, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { $status: status }),
+        /* @__PURE__ */ jsxRuntime.jsxs(StatusText, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatusLabel, { $status: status, children: statusLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(StatusSubtext, { children: isConnected ? t("collab.realtimeActive", "Realtime sync active") : error || t("collab.connectionEstablishing", "Connection is being established...") })
+        ] })
+      ] }),
+      isConnected && peers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: t("collab.activePeers", "Active Collaborators ({count})", { count: peers.length }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Flex, { direction: "column", gap: 2, alignItems: "stretch", children: peers.map((peer, idx) => /* @__PURE__ */ jsxRuntime.jsxs(PeerItem, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PeerAvatar, { $color: PEER_COLORS[idx % PEER_COLORS.length], children: getPeerInitials(peer) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PeerInfo, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PeerName, { children: getPeerName(peer, t) }),
+            peer.email && peer.firstname && /* @__PURE__ */ jsxRuntime.jsx(PeerEmail, { children: peer.email })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(OnlineBadge, { children: t("collab.online", "Online") })
+        ] }, peer.id)) })
+      ] }),
+      isConnected && peers.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: /* @__PURE__ */ jsxRuntime.jsx(EmptyText, { children: t("collab.workingAlone", "You are working alone") }) })
+    ] })
+  };
+};
+exports.default = LiveCollaborationPanel;