magic-editor-x 1.0.0

package/dist/_chunks/App-B1FgOsWa.mjs

@@ -0,0 +1,2143 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { useNavigate, Routes, Route } from "react-router-dom";
+import { useFetchClient, useNotification, Page } from "@strapi/strapi/admin";
+import styled, { css, keyframes } from "styled-components";
+import { HashtagIcon, DocumentTextIcon, ListBulletIcon, CheckIcon, ChatBubbleBottomCenterTextIcon, CodeBracketIcon, PhotoIcon, TableCellsIcon, LinkIcon, ExclamationTriangleIcon, PaperClipIcon, BellAlertIcon, SparklesIcon, BeakerIcon, PlayCircleIcon, ArrowPathIcon, EyeIcon, DocumentDuplicateIcon, ChevronRightIcon, CubeTransparentIcon, Cog6ToothIcon, UserGroupIcon, BookOpenIcon, CommandLineIcon, UserPlusIcon, TrashIcon, CheckCircleIcon, XMarkIcon, KeyIcon } from "@heroicons/react/24/outline";
+import EditorJS from "@editorjs/editorjs";
+import { u as useIntl, g as getTranslation, L as Loader, B as Box, T as Typography, a as Flex, b as TextInput, c as Button$2 } from "./getTranslation-C4uWR0DB.mjs";
+import { g as getTools } from "./tools-CjnQJ9w2.mjs";
+import { P as PLUGIN_ID } from "./index-B5MzUyo0.mjs";
+import LicensePage from "./LicensePage-CWH-AFR-.mjs";
+const fadeInUp = keyframes`
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+const pulse = keyframes`
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.05); }
+`;
+keyframes`
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+`;
+const spin = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+const PageWrapper = styled.div`
+  min-height: 100vh;
+  background: ${(props) => props.theme.colors.neutral100};
+`;
+const Container$1 = styled.div`
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 32px;
+`;
+const Header$1 = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
+`;
+const HeaderLeft = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+const Logo = styled.div`
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #7C3AED 0%, #6366f1 100%);
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
+  
+  svg {
+    width: 26px;
+    height: 26px;
+    color: white;
+  }
+`;
+const HeaderTitle = styled.div`
+  h1 {
+    font-size: 24px;
+    font-weight: 700;
+    color: ${(props) => props.theme.colors.neutral800};
+    margin: 0 0 4px 0;
+  }
+  
+  p {
+    font-size: 14px;
+    color: ${(props) => props.theme.colors.neutral600};
+    margin: 0;
+  }
+`;
+const HeaderRight = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+const StatusBadge = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: ${(props) => props.$active ? "rgba(34, 197, 94, 0.1)" : "rgba(100, 116, 139, 0.1)"};
+  border: 1px solid ${(props) => props.$active ? "rgba(34, 197, 94, 0.2)" : "rgba(100, 116, 139, 0.2)"};
+  border-radius: 100px;
+  font-size: 13px;
+  font-weight: 500;
+  color: ${(props) => props.$active ? "#22c55e" : "#64748b"};
+  
+  &::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    background: ${(props) => props.$active ? "#22c55e" : "#64748b"};
+    border-radius: 50%;
+    animation: ${(props) => props.$active ? pulse : "none"} 2s ease-in-out infinite;
+  }
+`;
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 380px;
+  gap: 24px;
+  
+  @media (max-width: 1100px) {
+    grid-template-columns: 1fr;
+  }
+`;
+const MainArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+const Sidebar = styled.aside`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+const Card$1 = styled.div`
+  background: ${(props) => props.theme.colors.neutral0};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 16px;
+  overflow: hidden;
+  animation: ${fadeInUp} 0.5s ease ${(props) => props.$delay || 0}s both;
+`;
+const CardHeader$1 = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
+  background: ${(props) => props.theme.colors.neutral100};
+`;
+const CardTitle$1 = styled.h2`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral800};
+  margin: 0;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    color: #7C3AED;
+  }
+`;
+const CardContent = styled.div`
+  padding: ${(props) => props.$noPadding ? "0" : "24px"};
+`;
+const CardActions = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+const IconButton = styled.button`
+  width: 36px;
+  height: 36px;
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 10px;
+  background: ${(props) => props.theme.colors.neutral0};
+  color: ${(props) => props.theme.colors.neutral600};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+  
+  &:hover {
+    background: ${(props) => props.theme.colors.neutral100};
+    border-color: #7C3AED;
+    color: #7C3AED;
+  }
+  
+  ${(props) => props.$spinning && css`
+    svg {
+      animation: ${spin} 1s linear infinite;
+    }
+  `}
+`;
+const Button$1 = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: ${(props) => props.$primary ? "linear-gradient(135deg, #7C3AED 0%, #6366f1 100%)" : props.theme.colors.neutral0};
+  border: 1px solid ${(props) => props.$primary ? "transparent" : props.theme.colors.neutral200};
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  color: ${(props) => props.$primary ? "white" : props.theme.colors.neutral800};
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: ${(props) => props.$primary ? "0 8px 24px rgba(124, 58, 237, 0.3)" : "0 4px 12px rgba(0, 0, 0, 0.1)"};
+  }
+  
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+  }
+`;
+const PlaygroundWrapper = styled.div`
+  min-height: 400px;
+  border: 2px dashed ${(props) => props.theme.colors.neutral300};
+  border-radius: 12px;
+  margin: 16px;
+  position: relative;
+  transition: all 0.2s ease;
+  
+  &:focus-within {
+    border-color: #7C3AED;
+    border-style: solid;
+  }
+`;
+const PlaygroundEditor = styled.div`
+  padding: 24px;
+  min-height: 350px;
+  
+  .codex-editor__redactor {
+    padding-bottom: 60px !important;
+  }
+`;
+const PlaygroundEmpty = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: ${(props) => props.theme.colors.neutral500};
+  pointer-events: none;
+  
+  svg {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 12px;
+    opacity: 0.5;
+  }
+  
+  p {
+    font-size: 15px;
+    margin: 0;
+  }
+`;
+const OutputPreview = styled.div`
+  background: #1e293b;
+  border-radius: 12px;
+  margin: 16px;
+  overflow: hidden;
+`;
+const OutputHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: #0f172a;
+  border-bottom: 1px solid #334155;
+`;
+const OutputTitle = styled.span`
+  font-size: 12px;
+  font-weight: 600;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+const OutputContent = styled.pre`
+  padding: 16px;
+  margin: 0;
+  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
+  font-size: 12px;
+  color: #e2e8f0;
+  overflow-x: auto;
+  max-height: 300px;
+  
+  .key { color: #7dd3fc; }
+  .string { color: #86efac; }
+  .number { color: #fcd34d; }
+  .boolean { color: #f472b6; }
+  .null { color: #94a3b8; }
+`;
+const ToolGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  padding: 16px;
+  
+  @media (max-width: 480px) {
+    grid-template-columns: 1fr;
+  }
+`;
+const ToolItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  background: ${(props) => props.$active ? "rgba(124, 58, 237, 0.08)" : props.theme.colors.neutral100};
+  border: 1px solid ${(props) => props.$active ? "rgba(124, 58, 237, 0.2)" : "transparent"};
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  
+  &:hover {
+    background: rgba(124, 58, 237, 0.05);
+  }
+`;
+const ToolIcon = styled.div`
+  width: 32px;
+  height: 32px;
+  background: ${(props) => props.$color || "linear-gradient(135deg, #7C3AED 0%, #6366f1 100%)"};
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  svg {
+    width: 16px;
+    height: 16px;
+    color: white;
+  }
+`;
+const ToolInfo = styled.div`
+  flex: 1;
+  min-width: 0;
+  
+  h4 {
+    font-size: 13px;
+    font-weight: 600;
+    color: ${(props) => props.theme.colors.neutral800};
+    margin: 0 0 2px 0;
+  }
+  
+  p {
+    font-size: 11px;
+    color: ${(props) => props.theme.colors.neutral600};
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+const ShortcutList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 16px;
+`;
+const ShortcutItem = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: ${(props) => props.theme.colors.neutral100};
+  border-radius: 8px;
+`;
+const ShortcutLabel = styled.span`
+  font-size: 13px;
+  color: ${(props) => props.theme.colors.neutral800};
+`;
+const ShortcutKeys = styled.div`
+  display: flex;
+  gap: 4px;
+`;
+const Kbd = styled.kbd`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 8px;
+  background: ${(props) => props.theme.colors.neutral0};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 6px;
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral600};
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+`;
+const StatsGrid = styled.div`
+  display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  padding: 16px;
+`;
+const StatCard = styled.div`
+  padding: 16px;
+  background: linear-gradient(135deg, ${(props) => props.$bg || "rgba(124, 58, 237, 0.05)"} 0%, transparent 100%);
+  border-radius: 12px;
+  text-align: center;
+`;
+const StatNumber = styled.div`
+  font-size: 28px;
+  font-weight: 800;
+  color: ${(props) => props.$color || "#7C3AED"};
+  margin-bottom: 4px;
+`;
+const StatLabel = styled.div`
+  font-size: 12px;
+  color: #64748b;
+  font-weight: 500;
+`;
+const TabsContainer = styled.div`
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  background: ${(props) => props.theme.colors.neutral150};
+  border-radius: 10px;
+`;
+const Tab = styled.button`
+  flex: 1;
+  padding: 8px 16px;
+  background: ${(props) => props.$active ? props.theme.colors.neutral0 : "transparent"};
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: ${(props) => props.$active ? props.theme.colors.neutral800 : props.theme.colors.neutral600};
+  cursor: pointer;
+  transition: all 0.15s ease;
+  box-shadow: ${(props) => props.$active ? "0 1px 3px rgba(0, 0, 0, 0.1)" : "none"};
+    
+    &:hover {
+    color: ${(props) => props.theme.colors.neutral800};
+  }
+`;
+const QuickLinksGrid = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+`;
+const QuickLinkItem = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  background: ${(props) => props.$active ? "rgba(124, 58, 237, 0.08)" : props.theme.colors.neutral100};
+  border: 1px solid ${(props) => props.$active ? "rgba(124, 58, 237, 0.2)" : "transparent"};
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: left;
+  width: 100%;
+  
+  &:hover {
+    background: rgba(124, 58, 237, 0.08);
+    border-color: rgba(124, 58, 237, 0.2);
+    transform: translateX(4px);
+  }
+`;
+const QuickLinkIcon = styled.div`
+  width: 40px;
+  height: 40px;
+  background: ${(props) => props.$color || "linear-gradient(135deg, #7C3AED 0%, #6366f1 100%)"};
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    color: white;
+  }
+`;
+const QuickLinkInfo = styled.div`
+  flex: 1;
+  min-width: 0;
+  
+  h4 {
+    font-size: 14px;
+    font-weight: 600;
+    color: ${(props) => props.theme.colors.neutral800};
+    margin: 0 0 2px 0;
+  }
+  
+  p {
+    font-size: 12px;
+    color: ${(props) => props.theme.colors.neutral600};
+    margin: 0;
+  }
+`;
+const QuickLinkArrow = styled.div`
+  color: ${(props) => props.theme.colors.neutral500};
+  
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+const HomePage = () => {
+  const navigate = useNavigate();
+  const { formatMessage } = useIntl();
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
+  const [activeTab, setActiveTab] = useState("playground");
+  const [editorData, setEditorData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasContent, setHasContent] = useState(false);
+  const editorRef = useRef(null);
+  const editorInstanceRef = useRef(null);
+  const toolsData = [
+    { name: t("tools.header", "Header"), desc: t("tools.header.desc", "H1-H6 Headings"), icon: HashtagIcon, color: "linear-gradient(135deg, #7C3AED, #6366f1)" },
+    { name: t("tools.paragraph", "Paragraph"), desc: t("tools.paragraph.desc", "Text paragraphs"), icon: DocumentTextIcon, color: "linear-gradient(135deg, #334155, #475569)" },
+    { name: t("tools.list", "List"), desc: t("tools.list.desc", "Nested lists"), icon: ListBulletIcon, color: "linear-gradient(135deg, #14b8a6, #2dd4bf)" },
+    { name: t("tools.checklist", "Checklist"), desc: t("tools.checklist.desc", "Interactive checkboxes"), icon: CheckIcon, color: "linear-gradient(135deg, #22c55e, #4ade80)" },
+    { name: t("tools.quote", "Quote"), desc: t("tools.quote.desc", "Quotes with author"), icon: ChatBubbleBottomCenterTextIcon, color: "linear-gradient(135deg, #f59e0b, #fbbf24)" },
+    { name: t("tools.code", "Code"), desc: t("tools.code.desc", "Code blocks"), icon: CodeBracketIcon, color: "linear-gradient(135deg, #06b6d4, #22d3ee)" },
+    { name: t("tools.image", "Image"), desc: t("tools.image.desc", "Upload images"), icon: PhotoIcon, color: "linear-gradient(135deg, #ec4899, #f472b6)" },
+    { name: t("tools.table", "Table"), desc: t("tools.table.desc", "Create tables"), icon: TableCellsIcon, color: "linear-gradient(135deg, #8b5cf6, #a78bfa)" },
+    { name: t("tools.link", "Link"), desc: t("tools.link.desc", "Link preview"), icon: LinkIcon, color: "linear-gradient(135deg, #3b82f6, #60a5fa)" },
+    { name: t("tools.warning", "Warning"), desc: t("tools.warning.desc", "Warning notices"), icon: ExclamationTriangleIcon, color: "linear-gradient(135deg, #ef4444, #f87171)" },
+    { name: t("tools.attaches", "Attaches"), desc: t("tools.attaches.desc", "File attachments"), icon: PaperClipIcon, color: "linear-gradient(135deg, #64748b, #94a3b8)" },
+    { name: t("tools.alert", "Alert"), desc: t("tools.alert.desc", "Colored alerts"), icon: BellAlertIcon, color: "linear-gradient(135deg, #f97316, #fb923c)" }
+  ];
+  const shortcuts = [
+    { keys: ["⌘", "B"], label: t("shortcuts.bold", "Bold") },
+    { keys: ["⌘", "I"], label: t("shortcuts.italic", "Italic") },
+    { keys: ["⌘", "U"], label: t("shortcuts.underline", "Underline") },
+    { keys: ["⌘", "⇧", "H"], label: t("shortcuts.heading", "Heading") },
+    { keys: ["⌘", "⇧", "L"], label: t("shortcuts.list", "List") },
+    { keys: ["⌘", "⇧", "M"], label: t("shortcuts.highlight", "Highlight") },
+    { keys: ["Tab"], label: t("shortcuts.blockMenu", "Block Menu") },
+    { keys: ["⌘", "Z"], label: t("shortcuts.undo", "Undo") }
+  ];
+  useEffect(() => {
+    if (activeTab === "playground" && editorRef.current && !editorInstanceRef.current) {
+      const tools = getTools({
+        mediaLibToggleFunc: () => {
+        },
+        pluginId: PLUGIN_ID
+      });
+      const playgroundTools = { ...tools };
+      delete playgroundTools.image;
+      delete playgroundTools.attaches;
+      delete playgroundTools.linkTool;
+      delete playgroundTools.personality;
+      delete playgroundTools.mediaLib;
+      editorInstanceRef.current = new EditorJS({
+        holder: editorRef.current,
+        tools: playgroundTools,
+        placeholder: t("homepage.playground.placeholder", "Type / for block menu or start writing..."),
+        onChange: async () => {
+          try {
+            const data = await editorInstanceRef.current.save();
+            setEditorData(data);
+            setHasContent(data.blocks && data.blocks.length > 0);
+          } catch (e) {
+            console.warn("Could not save:", e);
+          }
+        }
+      });
+    }
+    return () => {
+      if (editorInstanceRef.current && editorInstanceRef.current.destroy) {
+        editorInstanceRef.current.destroy();
+        editorInstanceRef.current = null;
+      }
+    };
+  }, [activeTab]);
+  const clearPlayground = async () => {
+    if (editorInstanceRef.current) {
+      await editorInstanceRef.current.clear();
+      setEditorData(null);
+      setHasContent(false);
+    }
+  };
+  const copyJSON = () => {
+    if (editorData) {
+      navigator.clipboard.writeText(JSON.stringify(editorData, null, 2));
+    }
+  };
+  const formatJSON = (obj) => {
+    if (!obj) return "";
+    const json = JSON.stringify(obj, null, 2);
+    return json.replace(/"([^"]+)":/g, '<span class="key">"$1"</span>:').replace(/: "([^"]*)"/g, ': <span class="string">"$1"</span>').replace(/: (\d+)/g, ': <span class="number">$1</span>').replace(/: (true|false)/g, ': <span class="boolean">$1</span>').replace(/: null/g, ': <span class="null">null</span>');
+  };
+  return /* @__PURE__ */ jsx(PageWrapper, { children: /* @__PURE__ */ jsxs(Container$1, { children: [
+    /* @__PURE__ */ jsxs(Header$1, { children: [
+      /* @__PURE__ */ jsxs(HeaderLeft, { children: [
+        /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(SparklesIcon, {}) }),
+        /* @__PURE__ */ jsxs(HeaderTitle, { children: [
+          /* @__PURE__ */ jsx("h1", { children: t("homepage.title", "Magic Editor X") }),
+          /* @__PURE__ */ jsx("p", { children: t("homepage.subtitle", "Block Editor Dashboard for Strapi v5") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(HeaderRight, { children: /* @__PURE__ */ jsx(StatusBadge, { $active: true, children: t("homepage.status.ready", "Realtime Ready") }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Grid, { children: [
+      /* @__PURE__ */ jsxs(MainArea, { children: [
+        /* @__PURE__ */ jsxs(Card$1, { $delay: 0.1, children: [
+          /* @__PURE__ */ jsxs(CardHeader$1, { children: [
+            /* @__PURE__ */ jsxs(CardTitle$1, { children: [
+              /* @__PURE__ */ jsx(BeakerIcon, {}),
+              t("homepage.playground", "Editor Playground")
+            ] }),
+            /* @__PURE__ */ jsx(CardActions, { children: /* @__PURE__ */ jsxs(TabsContainer, { children: [
+              /* @__PURE__ */ jsx(Tab, { $active: activeTab === "playground", onClick: () => setActiveTab("playground"), children: t("homepage.tabs.editor", "Editor") }),
+              /* @__PURE__ */ jsx(Tab, { $active: activeTab === "output", onClick: () => setActiveTab("output"), children: t("homepage.tabs.output", "JSON Output") })
+            ] }) })
+          ] }),
+          activeTab === "playground" ? /* @__PURE__ */ jsxs(CardContent, { $noPadding: true, children: [
+            /* @__PURE__ */ jsxs(PlaygroundWrapper, { children: [
+              /* @__PURE__ */ jsx(PlaygroundEditor, { ref: editorRef }),
+              !hasContent && /* @__PURE__ */ jsxs(PlaygroundEmpty, { children: [
+                /* @__PURE__ */ jsx(PlayCircleIcon, {}),
+                /* @__PURE__ */ jsx("p", { children: t("homepage.playground.empty", "Type here to try the editor") })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { padding: "0 16px 16px", display: "flex", gap: "8px" }, children: [
+              /* @__PURE__ */ jsxs(Button$1, { onClick: clearPlayground, children: [
+                /* @__PURE__ */ jsx(ArrowPathIcon, {}),
+                t("homepage.button.clear", "Clear")
+              ] }),
+              hasContent && /* @__PURE__ */ jsxs(Button$1, { $primary: true, onClick: () => setActiveTab("output"), children: [
+                /* @__PURE__ */ jsx(EyeIcon, {}),
+                t("homepage.button.showJson", "Show JSON")
+              ] })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(CardContent, { $noPadding: true, children: [
+            /* @__PURE__ */ jsxs(OutputPreview, { children: [
+              /* @__PURE__ */ jsxs(OutputHeader, { children: [
+                /* @__PURE__ */ jsx(OutputTitle, { children: t("homepage.output.title", "Editor.js JSON Output") }),
+                /* @__PURE__ */ jsx(IconButton, { onClick: copyJSON, title: t("homepage.button.copyJson", "Copy JSON"), children: /* @__PURE__ */ jsx(DocumentDuplicateIcon, {}) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                OutputContent,
+                {
+                  dangerouslySetInnerHTML: {
+                    __html: editorData ? formatJSON(editorData) : `<span class="null">${t("homepage.output.empty", "// No content - create blocks in the editor")}</span>`
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: { padding: "0 16px 16px" }, children: /* @__PURE__ */ jsxs(Button$1, { onClick: () => setActiveTab("playground"), children: [
+              /* @__PURE__ */ jsx(ChevronRightIcon, { style: { transform: "rotate(180deg)" } }),
+              t("homepage.button.backToEditor", "Back to Editor")
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Card$1, { $delay: 0.2, children: [
+          /* @__PURE__ */ jsx(CardHeader$1, { children: /* @__PURE__ */ jsxs(CardTitle$1, { children: [
+            /* @__PURE__ */ jsx(CubeTransparentIcon, {}),
+            t("homepage.features.title", "Editor Features")
+          ] }) }),
+          /* @__PURE__ */ jsx(CardContent, { $noPadding: true, children: /* @__PURE__ */ jsxs(StatsGrid, { children: [
+            /* @__PURE__ */ jsxs(StatCard, { $bg: "rgba(124, 58, 237, 0.08)", children: [
+              /* @__PURE__ */ jsx(StatNumber, { $color: "#7C3AED", children: "21+" }),
+              /* @__PURE__ */ jsx(StatLabel, { children: t("homepage.stats.blockTools", "Block Tools") })
+            ] }),
+            /* @__PURE__ */ jsxs(StatCard, { $bg: "rgba(236, 72, 153, 0.08)", children: [
+              /* @__PURE__ */ jsx(StatNumber, { $color: "#ec4899", children: "6" }),
+              /* @__PURE__ */ jsx(StatLabel, { children: t("homepage.stats.inlineTools", "Inline Tools") })
+            ] }),
+            /* @__PURE__ */ jsxs(StatCard, { $bg: "rgba(34, 197, 94, 0.08)", children: [
+              /* @__PURE__ */ jsx(StatNumber, { $color: "#22c55e", children: "✓" }),
+              /* @__PURE__ */ jsx(StatLabel, { children: t("homepage.stats.realtimeCollab", "Realtime Collab") })
+            ] }),
+            /* @__PURE__ */ jsxs(StatCard, { $bg: "rgba(59, 130, 246, 0.08)", children: [
+              /* @__PURE__ */ jsx(StatNumber, { $color: "#3b82f6", children: "v5" }),
+              /* @__PURE__ */ jsx(StatLabel, { children: t("homepage.stats.strapiReady", "Strapi Ready") })
+            ] })
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Sidebar, { children: [
+        /* @__PURE__ */ jsxs(Card$1, { $delay: 0.25, children: [
+          /* @__PURE__ */ jsx(CardHeader$1, { children: /* @__PURE__ */ jsxs(CardTitle$1, { children: [
+            /* @__PURE__ */ jsx(Cog6ToothIcon, {}),
+            t("homepage.quickLinks.title", "Quick Access")
+          ] }) }),
+          /* @__PURE__ */ jsx(CardContent, { $noPadding: true, children: /* @__PURE__ */ jsxs(QuickLinksGrid, { children: [
+            /* @__PURE__ */ jsxs(QuickLinkItem, { onClick: () => navigate("collaboration"), children: [
+              /* @__PURE__ */ jsx(QuickLinkIcon, { $color: "linear-gradient(135deg, #7C3AED 0%, #6366f1 100%)", children: /* @__PURE__ */ jsx(UserGroupIcon, {}) }),
+              /* @__PURE__ */ jsxs(QuickLinkInfo, { children: [
+                /* @__PURE__ */ jsx("h4", { children: t("homepage.quickLinks.collaboration", "Collaboration") }),
+                /* @__PURE__ */ jsx("p", { children: t("homepage.quickLinks.collaboration.desc", "Manage users & permissions") })
+              ] }),
+              /* @__PURE__ */ jsx(QuickLinkArrow, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+            ] }),
+            /* @__PURE__ */ jsxs(QuickLinkItem, { onClick: () => window.open("https://editorjs.io/base-concepts/", "_blank"), children: [
+              /* @__PURE__ */ jsx(QuickLinkIcon, { $color: "linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%)", children: /* @__PURE__ */ jsx(BookOpenIcon, {}) }),
+              /* @__PURE__ */ jsxs(QuickLinkInfo, { children: [
+                /* @__PURE__ */ jsx("h4", { children: t("homepage.quickLinks.docs", "Editor.js Docs") }),
+                /* @__PURE__ */ jsx("p", { children: t("homepage.quickLinks.docs.desc", "Official documentation") })
+              ] }),
+              /* @__PURE__ */ jsx(QuickLinkArrow, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Card$1, { $delay: 0.3, children: [
+          /* @__PURE__ */ jsx(CardHeader$1, { children: /* @__PURE__ */ jsxs(CardTitle$1, { children: [
+            /* @__PURE__ */ jsx(BookOpenIcon, {}),
+            t("homepage.tools.title", "Available Tools")
+          ] }) }),
+          /* @__PURE__ */ jsx(CardContent, { $noPadding: true, children: /* @__PURE__ */ jsx(ToolGrid, { children: toolsData.map((tool, i) => /* @__PURE__ */ jsxs(ToolItem, { children: [
+            /* @__PURE__ */ jsx(ToolIcon, { $color: tool.color, children: /* @__PURE__ */ jsx(tool.icon, {}) }),
+            /* @__PURE__ */ jsxs(ToolInfo, { children: [
+              /* @__PURE__ */ jsx("h4", { children: tool.name }),
+              /* @__PURE__ */ jsx("p", { children: tool.desc })
+            ] })
+          ] }, i)) }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Card$1, { $delay: 0.4, children: [
+          /* @__PURE__ */ jsx(CardHeader$1, { children: /* @__PURE__ */ jsxs(CardTitle$1, { children: [
+            /* @__PURE__ */ jsx(CommandLineIcon, {}),
+            t("homepage.shortcuts.title", "Keyboard Shortcuts")
+          ] }) }),
+          /* @__PURE__ */ jsx(CardContent, { $noPadding: true, children: /* @__PURE__ */ jsx(ShortcutList, { children: shortcuts.map((shortcut, i) => /* @__PURE__ */ jsxs(ShortcutItem, { children: [
+            /* @__PURE__ */ jsx(ShortcutLabel, { children: shortcut.label }),
+            /* @__PURE__ */ jsx(ShortcutKeys, { children: shortcut.keys.map((key, j) => /* @__PURE__ */ jsx(Kbd, { children: key }, j)) })
+          ] }, i)) }) })
+        ] })
+      ] })
+    ] })
+  ] }) });
+};
+const Container = styled.div`
+  padding: clamp(16px, 4vw, 40px);
+  max-width: 1400px;
+  margin: 0 auto;
+  min-height: 100vh;
+  box-sizing: border-box;
+`;
+const Header = styled.div`
+  margin-bottom: clamp(20px, 4vw, 32px);
+`;
+const Title = styled.h1`
+  font-size: clamp(22px, 4vw, 32px);
+  font-weight: 700;
+  color: ${(props) => props.theme.colors.neutral800};
+  margin: 0 0 8px 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+
+  svg {
+    width: clamp(24px, 4vw, 32px);
+    height: clamp(24px, 4vw, 32px);
+    color: #7C3AED;
+    flex-shrink: 0;
+  }
+`;
+const Subtitle = styled.p`
+  font-size: clamp(13px, 2vw, 15px);
+  color: ${(props) => props.theme.colors.neutral600};
+  margin: 0;
+`;
+const Card = styled.div`
+  background: ${(props) => props.theme.colors.neutral0};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: clamp(12px, 2vw, 16px);
+  padding: clamp(16px, 3vw, 24px);
+  margin-bottom: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  overflow-x: auto;
+`;
+const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  gap: 12px;
+  flex-wrap: wrap;
+
+  @media (max-width: 480px) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+`;
+const CardTitle = styled.h2`
+  font-size: clamp(16px, 2.5vw, 18px);
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral800};
+  margin: 0;
+`;
+const Button = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: clamp(8px, 1.5vw, 10px) clamp(14px, 2vw, 20px);
+  background: ${(props) => props.$danger ? "#ef4444" : props.$secondary ? props.theme.colors.neutral0 : "linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%)"};
+  border: 1px solid ${(props) => props.$danger ? "#ef4444" : props.$secondary ? props.theme.colors.neutral200 : "transparent"};
+  border-radius: 10px;
+  color: ${(props) => props.$secondary ? props.theme.colors.neutral600 : "white"};
+  font-size: clamp(13px, 2vw, 14px);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  svg {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px ${(props) => props.$danger ? "rgba(239, 68, 68, 0.3)" : props.$secondary ? "rgba(0,0,0,0.1)" : "rgba(124, 58, 237, 0.3)"};
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  @media (max-width: 480px) {
+    width: 100%;
+  }
+`;
+const PermissionsList = styled.div`
+  display: none;
+
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+`;
+const PermissionCard = styled.div`
+  background: ${(props) => props.theme.colors.neutral100};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 12px;
+  padding: 16px;
+`;
+const PermissionCardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+`;
+const PermissionCardBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+const PermissionRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+`;
+const PermissionLabel = styled.span`
+  font-size: 12px;
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral600};
+  text-transform: uppercase;
+`;
+const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 600px;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+const Th = styled.th`
+  text-align: left;
+  padding: 12px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral600};
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 2px solid ${(props) => props.theme.colors.neutral150};
+  white-space: nowrap;
+`;
+const Td = styled.td`
+  padding: 16px;
+  border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.neutral800};
+`;
+const UserInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+const Avatar = styled.div`
+  width: clamp(36px, 5vw, 40px);
+  height: clamp(36px, 5vw, 40px);
+  border-radius: 50%;
+  background: linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 600;
+  font-size: clamp(12px, 2vw, 14px);
+  flex-shrink: 0;
+`;
+const UserDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+`;
+const UserName = styled.div`
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral800};
+  font-size: clamp(13px, 2vw, 14px);
+`;
+const UserEmail = styled.div`
+  font-size: clamp(11px, 1.5vw, 13px);
+  color: ${(props) => props.theme.colors.neutral600};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+
+  @media (max-width: 480px) {
+    max-width: 150px;
+  }
+`;
+styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  background: ${(props) => props.$role === "owner" ? "#7C3AED" : props.$role === "editor" ? "#10B981" : "#64748b"};
+  color: white;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+`;
+const Select = styled.select`
+  padding: clamp(6px, 1vw, 8px) clamp(10px, 1.5vw, 12px);
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 8px;
+  font-size: clamp(12px, 2vw, 14px);
+  color: ${(props) => props.theme.colors.neutral800};
+  background: ${(props) => props.theme.colors.neutral0};
+  cursor: pointer;
+  max-width: 100%;
+
+  &:focus {
+    outline: none;
+    border-color: #7C3AED;
+  }
+`;
+const EmptyState = styled.div`
+  text-align: center;
+  padding: clamp(40px, 6vw, 60px) 20px;
+  color: ${(props) => props.theme.colors.neutral500};
+
+  h3 {
+    font-size: clamp(16px, 2.5vw, 18px);
+    margin: 0 0 8px;
+    color: ${(props) => props.theme.colors.neutral600};
+  }
+
+  p {
+    font-size: clamp(13px, 2vw, 14px);
+    margin: 0;
+  }
+`;
+const EmptyIcon = styled.div`
+  width: clamp(60px, 10vw, 80px);
+  height: clamp(60px, 10vw, 80px);
+  margin: 0 auto 20px;
+  background: ${(props) => props.theme.colors.neutral100};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: clamp(30px, 5vw, 40px);
+    height: clamp(30px, 5vw, 40px);
+    color: ${(props) => props.theme.colors.neutral400};
+  }
+`;
+const Modal = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.75);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  padding: 16px;
+  animation: fadeIn 0.2s ease;
+  overflow-y: auto;
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @media (max-width: 600px) {
+    align-items: flex-start;
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+`;
+const ModalContent$1 = styled.div`
+  background: ${(props) => props.theme.colors.neutral0};
+  border-radius: clamp(16px, 3vw, 24px);
+  padding: 0;
+  max-width: 580px;
+  width: 100%;
+  max-height: calc(100vh - 40px);
+  overflow-y: auto;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  animation: slideUp 0.3s ease;
+
+  @keyframes slideUp {
+    from { 
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to { 
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (max-width: 600px) {
+    max-height: none;
+    border-radius: 16px;
+  }
+`;
+const ModalHeader = styled.div`
+  background: linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%);
+  padding: clamp(20px, 4vw, 32px);
+  color: white;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -10%;
+    width: 200px;
+    height: 200px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    filter: blur(40px);
+  }
+`;
+const ModalBody = styled.div`
+  padding: clamp(20px, 4vw, 32px);
+`;
+const ModalTitle = styled.h3`
+  font-size: clamp(18px, 3vw, 24px);
+  font-weight: 700;
+  margin: 0 0 8px 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  position: relative;
+
+  svg {
+    width: clamp(22px, 3vw, 28px);
+    height: clamp(22px, 3vw, 28px);
+    flex-shrink: 0;
+  }
+`;
+const ModalSubtitle = styled.p`
+  font-size: clamp(13px, 2vw, 15px);
+  margin: 0;
+  opacity: 0.95;
+  position: relative;
+`;
+const FormGroup = styled.div`
+  margin-bottom: clamp(16px, 3vw, 24px);
+`;
+const Label = styled.label`
+  display: block;
+  font-size: clamp(13px, 2vw, 14px);
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral800};
+  margin-bottom: 10px;
+`;
+const SelectWrapper = styled.div`
+  position: relative;
+`;
+const StyledSelect = styled.select`
+  width: 100%;
+  padding: clamp(12px, 2vw, 14px) clamp(14px, 2vw, 16px);
+  border: 2px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 12px;
+  font-size: clamp(14px, 2vw, 15px);
+  color: ${(props) => props.theme.colors.neutral800};
+  background: ${(props) => props.theme.colors.neutral0};
+  cursor: pointer;
+  transition: all 0.2s ease;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 20px;
+  padding-right: 40px;
+
+  &:hover {
+    border-color: #a78bfa;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #7C3AED;
+    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
+  }
+
+  option {
+    padding: 12px;
+  }
+`;
+styled.input`
+  width: 100%;
+  padding: clamp(12px, 2vw, 14px) clamp(14px, 2vw, 16px);
+  border: 2px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 12px;
+  font-size: clamp(14px, 2vw, 15px);
+  color: ${(props) => props.theme.colors.neutral800};
+  background: ${(props) => props.theme.colors.neutral0};
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+
+  &:hover {
+    border-color: #a78bfa;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #7C3AED;
+    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
+  }
+
+  &::placeholder {
+    color: ${(props) => props.theme.colors.neutral500};
+  }
+`;
+const RoleOption = styled.div`
+  display: flex;
+  align-items: center;
+  gap: clamp(10px, 2vw, 12px);
+  padding: clamp(12px, 2vw, 16px);
+  border: 2px solid ${(props) => props.$selected ? "#7C3AED" : props.theme.colors.neutral200};
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: ${(props) => props.$selected ? "rgba(124, 58, 237, 0.05)" : props.theme.colors.neutral0};
+
+  &:hover {
+    border-color: #7C3AED;
+    background: rgba(124, 58, 237, 0.03);
+  }
+
+  &:active {
+    transform: scale(0.99);
+  }
+`;
+const RoleIcon = styled.div`
+  font-size: clamp(18px, 3vw, 24px);
+  width: clamp(40px, 6vw, 48px);
+  height: clamp(40px, 6vw, 48px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${(props) => props.$role === "owner" ? "linear-gradient(135deg, #FFD700 0%, #FFA500 100%)" : props.$role === "editor" ? "linear-gradient(135deg, #10B981 0%, #059669 100%)" : "linear-gradient(135deg, #64748b 0%, #475569 100%)"};
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+`;
+const RoleInfo = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+const RoleName = styled.div`
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral800};
+  font-size: clamp(14px, 2vw, 16px);
+  margin-bottom: 4px;
+`;
+const RoleDescription = styled.div`
+  font-size: clamp(11px, 1.5vw, 13px);
+  color: ${(props) => props.theme.colors.neutral600};
+  line-height: 1.4;
+`;
+const RoleGrid = styled.div`
+  display: grid;
+  gap: 12px;
+  margin-bottom: clamp(16px, 3vw, 24px);
+`;
+const ModalActions = styled.div`
+  display: flex;
+  gap: 12px;
+  margin-top: clamp(16px, 3vw, 24px);
+  flex-wrap: wrap;
+
+  @media (max-width: 400px) {
+    flex-direction: column;
+    
+    button {
+      width: 100%;
+    }
+  }
+`;
+const LoadingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(40px, 6vw, 60px);
+`;
+const HelpText = styled.small`
+  display: block;
+  margin-top: 8px;
+  font-size: clamp(11px, 1.5vw, 12px);
+  color: ${(props) => props.$warning ? "#f59e0b" : props.theme.colors.neutral600};
+  line-height: 1.4;
+`;
+styled.span`
+  display: inline-block;
+  background: ${(props) => props.theme.colors.neutral100};
+  color: #7C3AED;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: clamp(11px, 1.5vw, 13px);
+  font-weight: 500;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @media (max-width: 480px) {
+    max-width: 120px;
+  }
+`;
+const CollaborationSettings = () => {
+  const { formatMessage } = useIntl();
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
+  const { get, post, put, del } = useFetchClient();
+  const [loading, setLoading] = useState(true);
+  const [permissions, setPermissions] = useState([]);
+  const [users, setUsers] = useState([]);
+  const [contentTypes, setContentTypes] = useState([]);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [selectedUser, setSelectedUser] = useState("");
+  const [selectedRole, setSelectedRole] = useState("editor");
+  const [contentType, setContentType] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [limits, setLimits] = useState({ current: 0, max: 2, unlimited: false, canAdd: true });
+  useEffect(() => {
+    loadData();
+    loadLimits();
+  }, []);
+  const loadLimits = async () => {
+    try {
+      const response = await get("/magic-editor-x/license/limits");
+      if (response.data?.limits?.collaborators) {
+        setLimits(response.data.limits.collaborators);
+      }
+    } catch (error) {
+      console.error("[Collab Settings] Error loading limits:", error);
+    }
+  };
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const [permsRes, usersRes, typesRes] = await Promise.all([
+        get("/magic-editor-x/collaboration/permissions"),
+        get("/magic-editor-x/collaboration/users"),
+        get("/content-type-builder/content-types")
+      ]);
+      setPermissions(permsRes.data?.data || permsRes.data || []);
+      setUsers(usersRes.data?.data || usersRes.data || []);
+      const allTypes = typesRes.data?.data || typesRes.data || [];
+      console.log("[Collab] All content types from API:", allTypes);
+      const filteredTypes = allTypes.filter((type) => {
+        const uid = type.uid || "";
+        if (!uid.startsWith("api::")) {
+          return false;
+        }
+        const schema = type.schema || type;
+        const attributes = schema.attributes || type.attributes || {};
+        const hasMagicEditorField = Object.entries(attributes).some(([fieldName, attr]) => {
+          const customFieldValue = attr.customField || "";
+          const isMagicEditor = customFieldValue.includes("magic-editor-x");
+          if (isMagicEditor) {
+            console.log(`[Collab] ✅ Found Magic Editor field: ${uid}.${fieldName}`, attr);
+          }
+          return isMagicEditor;
+        });
+        return hasMagicEditorField;
+      }).map((type) => {
+        const schema = type.schema || type;
+        const attributes = schema.attributes || type.attributes || {};
+        return {
+          uid: type.uid,
+          displayName: schema.info?.displayName || schema.info?.singularName || type.uid,
+          singularName: schema.info?.singularName,
+          pluralName: schema.info?.pluralName,
+          kind: schema.kind || type.kind,
+          // Find the magic editor field names
+          magicEditorFields: Object.entries(attributes).filter(
+            ([_, attr]) => (attr.customField || "").includes("magic-editor-x")
+          ).map(([name]) => name)
+        };
+      }).sort((a, b) => a.displayName.localeCompare(b.displayName));
+      setContentTypes(filteredTypes);
+      console.log("[Collab] Content types with Magic Editor X:", filteredTypes);
+      console.log("[Collab] Loaded users:", usersRes.data);
+      console.log("[Collab] Loaded permissions:", permsRes.data);
+      console.log("[Collab] Loaded content types:", filteredTypes);
+    } catch (error) {
+      console.error("[Collab Settings] Load error:", error);
+      alert(t("collaboration.errorLoading", "Error loading: {error}", { error: error.message || "Unknown error" }));
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleAddPermission = async () => {
+    if (!selectedUser || !selectedRole) return;
+    setSaving(true);
+    try {
+      await post("/magic-editor-x/collaboration/permissions", {
+        userId: selectedUser,
+        role: selectedRole,
+        contentType: contentType || "*",
+        entryId: null,
+        fieldName: null
+      });
+      await loadData();
+      await loadLimits();
+      setShowAddModal(false);
+      setSelectedUser("");
+      setSelectedRole("editor");
+      setContentType("");
+    } catch (error) {
+      console.error("[Collab Settings] Add error:", error);
+      if (error.response?.data?.upgradeRequired) {
+        alert(t("collaboration.limitReachedAlert", "Collaborator limit reached.\n\nUpgrade at https://store.magicdx.dev/ for more collaborators."));
+      } else {
+        alert(t("collaboration.errorAdding", "Error adding permission"));
+      }
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleOpenAddModal = () => {
+    if (!limits.canAdd && !limits.unlimited) {
+      alert(t("collaboration.limitReachedAlert", "Collaborator limit reached ({current}/{max}).\n\nUpgrade at https://store.magicdx.dev/ for more collaborators.", { current: limits.current, max: limits.max }));
+      return;
+    }
+    setShowAddModal(true);
+  };
+  const handleUpdateRole = async (permissionId, newRole) => {
+    try {
+      await put(`/magic-editor-x/collaboration/permissions/${permissionId}`, {
+        role: newRole
+      });
+      await loadData();
+    } catch (error) {
+      console.error("[Collab Settings] Update error:", error);
+      alert(t("collaboration.errorUpdating", "Error updating role"));
+    }
+  };
+  const handleUpdateContentType = async (permissionId, newContentType) => {
+    try {
+      await put(`/magic-editor-x/collaboration/permissions/${permissionId}`, {
+        contentType: newContentType === "*" ? null : newContentType
+      });
+      await loadData();
+    } catch (error) {
+      console.error("[Collab Settings] Update content type error:", error);
+      alert(t("collaboration.errorUpdating", "Error updating role"));
+    }
+  };
+  const handleDeletePermission = async (permissionId) => {
+    if (!confirm(t("collaboration.confirmDelete", "Really remove permission?"))) return;
+    try {
+      await del(`/magic-editor-x/collaboration/permissions/${permissionId}`);
+      await loadData();
+      await loadLimits();
+    } catch (error) {
+      console.error("[Collab Settings] Delete error:", error);
+      alert(t("collaboration.errorDeleting", "Error deleting permission"));
+    }
+  };
+  const getUserInitials = (user) => {
+    if (!user) return "?";
+    const first = (user.firstname?.[0] || user.email?.[0] || "?").toUpperCase();
+    const last = (user.lastname?.[0] || "").toUpperCase();
+    return `${first}${last}`.trim();
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsxs(Title, { children: [
+        /* @__PURE__ */ jsx(UserGroupIcon, {}),
+        t("collaboration.title", "Collaboration")
+      ] }),
+      /* @__PURE__ */ jsx(Subtitle, { children: t("collaboration.subtitle", "Manage permissions for real-time editing") })
+    ] }),
+    !limits.unlimited && /* @__PURE__ */ jsx(Card, { style: { marginBottom: "16px", background: limits.canAdd ? "#f0fdf4" : "#fef2f2", borderColor: limits.canAdd ? "#bbf7d0" : "#fecaca" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "12px" }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: "4px" }, children: t("collaboration.limitInfo", "Collaborators: {current} / {max}", { current: limits.current, max: limits.max }) }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "13px", color: "#6b7280" }, children: limits.canAdd ? t("collaboration.limitCanAdd", "You can add {remaining} more collaborator(s).", { remaining: limits.max - limits.current }) : t("collaboration.limitReached", "Limit reached. Upgrade for more collaborators.") })
+      ] }),
+      !limits.canAdd && /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => window.open("https://store.magicdx.dev/", "_blank"),
+          style: { background: "linear-gradient(135deg, #7C3AED, #6d28d9)", color: "white" },
+          children: t("collaboration.upgrade", "Upgrade")
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: t("collaboration.authorizedUsers", "Authorized Users ({count})", { count: permissions.length }) }),
+        /* @__PURE__ */ jsxs(Button, { onClick: handleOpenAddModal, disabled: !limits.canAdd && !limits.unlimited, children: [
+          /* @__PURE__ */ jsx(UserPlusIcon, {}),
+          t("collaboration.addUser", "Add User")
+        ] })
+      ] }),
+      permissions.length === 0 ? /* @__PURE__ */ jsxs(EmptyState, { children: [
+        /* @__PURE__ */ jsx(EmptyIcon, { children: /* @__PURE__ */ jsx(UserGroupIcon, {}) }),
+        /* @__PURE__ */ jsx("h3", { children: t("collaboration.noPermissions", "No Permissions") }),
+        /* @__PURE__ */ jsx("p", { children: t("collaboration.noPermissions.description", "Add users to enable collaboration") })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx(Th, { children: t("collaboration.user", "User") }),
+            /* @__PURE__ */ jsx(Th, { children: t("collaboration.role", "Role") }),
+            /* @__PURE__ */ jsx(Th, { children: t("collaboration.contentType", "Content Type") }),
+            /* @__PURE__ */ jsx(Th, { children: t("collaboration.actions", "Actions") })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: permissions.map((perm) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(UserInfo, { children: [
+              /* @__PURE__ */ jsx(Avatar, { children: getUserInitials(perm.user) }),
+              /* @__PURE__ */ jsxs(UserDetails, { children: [
+                /* @__PURE__ */ jsxs(UserName, { children: [
+                  perm.user?.firstname,
+                  " ",
+                  perm.user?.lastname
+                ] }),
+                /* @__PURE__ */ jsx(UserEmail, { children: perm.user?.email })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: perm.role,
+                onChange: (e) => handleUpdateRole(perm.documentId, e.target.value),
+                children: [
+                  /* @__PURE__ */ jsxs("option", { value: "viewer", children: [
+                    "👁️ ",
+                    t("role.viewer", "Viewer")
+                  ] }),
+                  /* @__PURE__ */ jsxs("option", { value: "editor", children: [
+                    "✏️ ",
+                    t("role.editor", "Editor")
+                  ] }),
+                  /* @__PURE__ */ jsxs("option", { value: "owner", children: [
+                    "👑 ",
+                    t("role.owner", "Owner")
+                  ] })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: perm.contentType || "*",
+                onChange: (e) => handleUpdateContentType(perm.documentId, e.target.value),
+                style: { minWidth: "160px" },
+                children: [
+                  /* @__PURE__ */ jsxs("option", { value: "*", children: [
+                    "🌐 ",
+                    t("collaboration.allContentTypes", "All Content Types with Magic Editor")
+                  ] }),
+                  contentTypes.map((type) => /* @__PURE__ */ jsxs("option", { value: type.uid, children: [
+                    type.kind === "singleType" ? "📄" : "📚",
+                    " ",
+                    type.displayName
+                  ] }, type.uid))
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                $danger: true,
+                onClick: () => handleDeletePermission(perm.documentId),
+                style: { padding: "8px 12px" },
+                children: /* @__PURE__ */ jsx(TrashIcon, {})
+              }
+            ) })
+          ] }, perm.documentId)) })
+        ] }),
+        /* @__PURE__ */ jsx(PermissionsList, { children: permissions.map((perm) => /* @__PURE__ */ jsxs(PermissionCard, { children: [
+          /* @__PURE__ */ jsxs(PermissionCardHeader, { children: [
+            /* @__PURE__ */ jsxs(UserInfo, { children: [
+              /* @__PURE__ */ jsx(Avatar, { children: getUserInitials(perm.user) }),
+              /* @__PURE__ */ jsxs(UserDetails, { children: [
+                /* @__PURE__ */ jsxs(UserName, { children: [
+                  perm.user?.firstname,
+                  " ",
+                  perm.user?.lastname
+                ] }),
+                /* @__PURE__ */ jsx(UserEmail, { children: perm.user?.email })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                $danger: true,
+                onClick: () => handleDeletePermission(perm.documentId),
+                style: { padding: "8px 12px" },
+                children: /* @__PURE__ */ jsx(TrashIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(PermissionCardBody, { children: [
+            /* @__PURE__ */ jsxs(PermissionRow, { children: [
+              /* @__PURE__ */ jsx(PermissionLabel, { children: t("collaboration.role", "Role") }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: perm.role,
+                  onChange: (e) => handleUpdateRole(perm.documentId, e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsxs("option", { value: "viewer", children: [
+                      "👁️ ",
+                      t("role.viewer", "Viewer")
+                    ] }),
+                    /* @__PURE__ */ jsxs("option", { value: "editor", children: [
+                      "✏️ ",
+                      t("role.editor", "Editor")
+                    ] }),
+                    /* @__PURE__ */ jsxs("option", { value: "owner", children: [
+                      "👑 ",
+                      t("role.owner", "Owner")
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(PermissionRow, { children: [
+              /* @__PURE__ */ jsx(PermissionLabel, { children: t("collaboration.contentType", "Content Type") }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: perm.contentType || "*",
+                  onChange: (e) => handleUpdateContentType(perm.documentId, e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsxs("option", { value: "*", children: [
+                      "🌐 ",
+                      t("collaboration.allContentTypes", "All Content Types with Magic Editor")
+                    ] }),
+                    contentTypes.map((type) => /* @__PURE__ */ jsxs("option", { value: type.uid, children: [
+                      type.kind === "singleType" ? "📄" : "📚",
+                      " ",
+                      type.displayName
+                    ] }, type.uid))
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] }, perm.documentId)) })
+      ] })
+    ] }),
+    showAddModal && /* @__PURE__ */ jsx(Modal, { onClick: () => setShowAddModal(false), children: /* @__PURE__ */ jsxs(ModalContent$1, { onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxs(ModalHeader, { children: [
+        /* @__PURE__ */ jsxs(ModalTitle, { children: [
+          /* @__PURE__ */ jsx(UserPlusIcon, {}),
+          t("collaboration.inviteUser", "Invite User")
+        ] }),
+        /* @__PURE__ */ jsx(ModalSubtitle, { children: t("collaboration.inviteUser.subtitle", "Grant access to real-time editing") })
+      ] }),
+      /* @__PURE__ */ jsxs(ModalBody, { children: [
+        /* @__PURE__ */ jsxs(FormGroup, { children: [
+          /* @__PURE__ */ jsx(Label, { children: t("collaboration.selectUser", "Select User") }),
+          /* @__PURE__ */ jsx(SelectWrapper, { children: /* @__PURE__ */ jsxs(
+            StyledSelect,
+            {
+              value: selectedUser,
+              onChange: (e) => setSelectedUser(e.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: t("collaboration.selectUser.placeholder", "Choose a user...") }),
+                users.map((user) => /* @__PURE__ */ jsxs("option", { value: user.id, children: [
+                  user.firstname,
+                  " ",
+                  user.lastname,
+                  " • ",
+                  user.email
+                ] }, user.id))
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(FormGroup, { children: [
+          /* @__PURE__ */ jsx(Label, { children: t("collaboration.rolePermissions", "Role & Permissions") }),
+          /* @__PURE__ */ jsxs(RoleGrid, { children: [
+            /* @__PURE__ */ jsxs(
+              RoleOption,
+              {
+                $selected: selectedRole === "viewer",
+                onClick: () => setSelectedRole("viewer"),
+                children: [
+                  /* @__PURE__ */ jsx(RoleIcon, { $role: "viewer", children: "👁️" }),
+                  /* @__PURE__ */ jsxs(RoleInfo, { children: [
+                    /* @__PURE__ */ jsx(RoleName, { children: t("role.viewer", "Viewer") }),
+                    /* @__PURE__ */ jsx(RoleDescription, { children: t("role.viewer.description", "Can view changes but not edit") })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              RoleOption,
+              {
+                $selected: selectedRole === "editor",
+                onClick: () => setSelectedRole("editor"),
+                children: [
+                  /* @__PURE__ */ jsx(RoleIcon, { $role: "editor", children: "✏️" }),
+                  /* @__PURE__ */ jsxs(RoleInfo, { children: [
+                    /* @__PURE__ */ jsx(RoleName, { children: t("role.editor", "Editor") }),
+                    /* @__PURE__ */ jsx(RoleDescription, { children: t("role.editor.description", "Can edit content and collaborate with others") })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              RoleOption,
+              {
+                $selected: selectedRole === "owner",
+                onClick: () => setSelectedRole("owner"),
+                children: [
+                  /* @__PURE__ */ jsx(RoleIcon, { $role: "owner", children: "👑" }),
+                  /* @__PURE__ */ jsxs(RoleInfo, { children: [
+                    /* @__PURE__ */ jsx(RoleName, { children: t("role.owner", "Owner") }),
+                    /* @__PURE__ */ jsx(RoleDescription, { children: t("role.owner.description", "Full access including managing permissions") })
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(FormGroup, { children: [
+          /* @__PURE__ */ jsx(Label, { children: t("collaboration.contentTypeOptional", "Content Type (optional)") }),
+          /* @__PURE__ */ jsx(SelectWrapper, { children: /* @__PURE__ */ jsxs(
+            StyledSelect,
+            {
+              value: contentType,
+              onChange: (e) => setContentType(e.target.value),
+              children: [
+                /* @__PURE__ */ jsxs("option", { value: "", children: [
+                  "🌐 ",
+                  t("collaboration.allContentTypes", "All Content Types with Magic Editor")
+                ] }),
+                contentTypes.map((type) => /* @__PURE__ */ jsxs("option", { value: type.uid, children: [
+                  type.kind === "singleType" ? "📄" : "📚",
+                  " ",
+                  type.displayName,
+                  type.magicEditorFields?.length > 0 && ` (${type.magicEditorFields.join(", ")})`
+                ] }, type.uid))
+              ]
+            }
+          ) }),
+          contentTypes.length === 0 ? /* @__PURE__ */ jsx(HelpText, { $warning: true, children: t("collaboration.contentTypeWarning", "⚠️ No content type currently uses the Magic Editor X field. Add the custom field to a content type.") }) : /* @__PURE__ */ jsx(HelpText, { children: t("collaboration.contentTypeHelp", "Shows only content types with Magic Editor X field • Empty = access to all") })
+        ] }),
+        /* @__PURE__ */ jsxs(ModalActions, { children: [
+          /* @__PURE__ */ jsx(Button, { $secondary: true, onClick: () => setShowAddModal(false), children: t("collaboration.cancel", "Cancel") }),
+          /* @__PURE__ */ jsxs(Button, { onClick: handleAddPermission, disabled: !selectedUser || saving, children: [
+            /* @__PURE__ */ jsx(CheckCircleIcon, {}),
+            saving ? t("collaboration.saving", "Saving...") : t("collaboration.invite", "Invite")
+          ] })
+        ] })
+      ] })
+    ] }) })
+  ] });
+};
+const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+const slideUp = keyframes`
+  from { 
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to { 
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(4, 28, 47, 0.85);
+  backdrop-filter: blur(8px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${fadeIn} 0.3s ease-out;
+  padding: 20px;
+`;
+const ModalContent = styled(Box)`
+  background: white;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 580px;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+  animation: ${slideUp} 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+`;
+const GradientHeader = styled(Box)`
+  background: linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%);
+  padding: 32px 40px;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+  }
+`;
+const IconWrapper = styled.div`
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  backdrop-filter: blur(10px);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+
+  svg {
+    width: 36px;
+    height: 36px;
+    color: white;
+  }
+`;
+const CloseButton = styled.button`
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  z-index: 10;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    color: white;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+const ToggleButton = styled.button`
+  background: none;
+  border: none;
+  color: #7C3AED;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 8px 0;
+  text-decoration: underline;
+  transition: color 0.2s;
+  
+  &:hover {
+    color: #6d28d9;
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+const InfoBox = styled(Box)`
+  background: #f0fdf4;
+  border: 2px solid #bbf7d0;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+`;
+const LicenseGuard = ({ children }) => {
+  const { formatMessage } = useIntl();
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
+  const { get, post } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const navigate = useNavigate();
+  const [isChecking, setIsChecking] = useState(true);
+  const [needsLicense, setNeedsLicense] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [useExistingKey, setUseExistingKey] = useState(false);
+  const [existingLicenseKey, setExistingLicenseKey] = useState("");
+  const [existingEmail, setExistingEmail] = useState("");
+  const [adminUser, setAdminUser] = useState(null);
+  useEffect(() => {
+    checkLicenseStatus();
+    fetchAdminUser();
+  }, []);
+  const fetchAdminUser = async () => {
+    try {
+      const response = await get("/admin/users/me");
+      const userData = response.data?.data || response.data;
+      if (userData) {
+        setAdminUser(userData);
+      }
+    } catch (error) {
+      console.debug("[Magic Editor X] Could not fetch admin user");
+    }
+  };
+  const checkLicenseStatus = async () => {
+    setIsChecking(true);
+    try {
+      const response = await get("/magic-editor-x/license/status");
+      if (response.data.valid || response.data.demo === false) {
+        setNeedsLicense(false);
+      } else {
+        setNeedsLicense(true);
+      }
+    } catch (error) {
+      console.error("[Magic Editor X] License check error:", error);
+      setNeedsLicense(false);
+    } finally {
+      setIsChecking(false);
+    }
+  };
+  const handleAutoCreateLicense = async (e) => {
+    e.preventDefault();
+    setIsCreating(true);
+    try {
+      const response = await post("/magic-editor-x/license/auto-create", {});
+      if (response.data && response.data.success) {
+        toggleNotification({
+          type: "success",
+          message: t("licenseGuard.success.created", "License created! Reloading...")
+        });
+        setNeedsLicense(false);
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      } else {
+        throw new Error("Failed to auto-create license");
+      }
+    } catch (error) {
+      console.error("[Magic Editor X] Error:", error);
+      toggleNotification({
+        type: "danger",
+        message: t("licenseGuard.error.create", "Failed to create license. Try manual entry.")
+      });
+      setIsCreating(false);
+      setUseExistingKey(true);
+    }
+  };
+  const handleValidateExistingKey = async (e) => {
+    e.preventDefault();
+    if (!existingLicenseKey.trim() || !existingEmail.trim()) {
+      toggleNotification({
+        type: "warning",
+        message: t("licenseGuard.error.required", "Please enter both license key and email address")
+      });
+      return;
+    }
+    setIsCreating(true);
+    try {
+      const response = await post("/magic-editor-x/license/store-key", {
+        licenseKey: existingLicenseKey.trim(),
+        email: existingEmail.trim()
+      });
+      if (response.data && response.data.success) {
+        toggleNotification({
+          type: "success",
+          message: t("licenseGuard.success.activated", "License activated! Reloading...")
+        });
+        setNeedsLicense(false);
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      } else {
+        throw new Error("Invalid license");
+      }
+    } catch (error) {
+      toggleNotification({
+        type: "danger",
+        message: t("licenseGuard.error.invalid", "Invalid license key or email address")
+      });
+      setIsCreating(false);
+    }
+  };
+  const handleSkip = () => {
+    setNeedsLicense(false);
+  };
+  const handleClose = () => {
+    navigate("/content-manager");
+  };
+  if (isChecking) {
+    return /* @__PURE__ */ jsx(Box, { padding: 8, style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(Loader, { children: t("license.checking", "Checking license...") }) });
+  }
+  if (needsLicense) {
+    return /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsxs(ModalContent, { children: [
+      /* @__PURE__ */ jsxs(GradientHeader, { children: [
+        /* @__PURE__ */ jsx(CloseButton, { onClick: handleClose, type: "button", children: /* @__PURE__ */ jsx(XMarkIcon, {}) }),
+        /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(KeyIcon, {}) }),
+        /* @__PURE__ */ jsxs(Box, { style: { textAlign: "center", position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "alpha",
+              style: {
+                color: "white",
+                fontSize: "24px",
+                fontWeight: "700",
+                marginBottom: "12px",
+                display: "block"
+              },
+              children: t("licenseGuard.title", "Activate Magic Editor X")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "epsilon",
+              style: {
+                color: "rgba(255, 255, 255, 0.9)",
+                fontSize: "14px",
+                display: "block"
+              },
+              children: useExistingKey ? t("licenseGuard.subtitle.existing", "Enter your existing license key") : t("licenseGuard.subtitle.new", "Create a FREE license to start using the editor")
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("form", { onSubmit: useExistingKey ? handleValidateExistingKey : handleAutoCreateLicense, children: /* @__PURE__ */ jsx(Box, { padding: 6, paddingLeft: 8, paddingRight: 8, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx(InfoBox, { children: /* @__PURE__ */ jsxs(Typography, { variant: "omega", style: { fontSize: "13px", lineHeight: "1.6" }, children: [
+          "[FREE] ",
+          t("licenseGuard.info", "The editor is completely FREE to use! Creating a license helps us track usage and provide better support. You get 2 collaborators included.")
+        ] }) }),
+        /* @__PURE__ */ jsx(Box, { style: { textAlign: "center", width: "100%" }, children: /* @__PURE__ */ jsx(
+          ToggleButton,
+          {
+            type: "button",
+            onClick: () => setUseExistingKey(!useExistingKey),
+            disabled: isCreating,
+            children: useExistingKey ? t("licenseGuard.toggleNew", "Create new license") : t("licenseGuard.toggleExisting", "Have a license key?")
+          }
+        ) }),
+        useExistingKey ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Box, { style: { width: "100%" }, children: [
+            /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "pi",
+                fontWeight: "bold",
+                style: { marginBottom: "8px", display: "block" },
+                children: [
+                  t("licenseGuard.email", "Email Address"),
+                  " *"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                placeholder: t("licenseGuard.email.placeholder", "admin@example.com"),
+                type: "email",
+                value: existingEmail,
+                onChange: (e) => setExistingEmail(e.target.value),
+                required: true,
+                disabled: isCreating
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { style: { width: "100%" }, children: [
+            /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "pi",
+                fontWeight: "bold",
+                style: { marginBottom: "8px", display: "block" },
+                children: [
+                  t("licenseGuard.licenseKey", "License Key"),
+                  " *"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                placeholder: t("licenseGuard.licenseKey.placeholder", "MAGIC-EDITOR-XXXX-XXXX-XXXX"),
+                value: existingLicenseKey,
+                onChange: (e) => setExistingLicenseKey(e.target.value),
+                required: true,
+                disabled: isCreating
+              }
+            )
+          ] })
+        ] }) : adminUser ? /* @__PURE__ */ jsxs(
+          Box,
+          {
+            background: "success100",
+            padding: 5,
+            style: {
+              borderRadius: "8px",
+              border: "2px solid #DCFCE7",
+              textAlign: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: "12px", display: "block" }, children: t("licenseGuard.readyToActivate", "Ready to activate with your account:") }),
+              /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { marginBottom: "4px", display: "block" }, children: [
+                adminUser.firstname || "Admin",
+                " ",
+                adminUser.lastname || "User"
+              ] }),
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: adminUser.email || "Loading..." })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral100", hasRadius: true, style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx(Loader, { small: true }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", marginTop: 2, children: t("licenseGuard.loadingUser", "Loading admin user data...") })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 3, justifyContent: "center", style: { marginTop: "16px" }, children: [
+          /* @__PURE__ */ jsx(
+            Button$2,
+            {
+              variant: "tertiary",
+              onClick: handleSkip,
+              disabled: isCreating,
+              children: t("licenseGuard.skip", "Skip for now")
+            }
+          ),
+          useExistingKey ? /* @__PURE__ */ jsx(
+            Button$2,
+            {
+              type: "submit",
+              size: "L",
+              startIcon: /* @__PURE__ */ jsx(CheckIcon, { style: { width: 20, height: 20 } }),
+              loading: isCreating,
+              disabled: isCreating || !existingLicenseKey.trim() || !existingEmail.trim(),
+              style: {
+                background: "linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%)",
+                color: "white",
+                fontWeight: "600",
+                border: "none"
+              },
+              children: t("licenseGuard.validate", "Validate License")
+            }
+          ) : /* @__PURE__ */ jsx(
+            Button$2,
+            {
+              type: "submit",
+              size: "L",
+              startIcon: /* @__PURE__ */ jsx(CheckIcon, { style: { width: 20, height: 20 } }),
+              loading: isCreating,
+              disabled: isCreating || !adminUser,
+              style: {
+                background: "linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%)",
+                color: "white",
+                fontWeight: "600",
+                border: "none"
+              },
+              children: t("licenseGuard.activate", "Activate FREE License")
+            }
+          )
+        ] })
+      ] }) }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+const App = () => {
+  return /* @__PURE__ */ jsx(LicenseGuard, { children: /* @__PURE__ */ jsxs(Routes, { children: [
+    /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(HomePage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "collaboration", element: /* @__PURE__ */ jsx(CollaborationSettings, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "license", element: /* @__PURE__ */ jsx(LicensePage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
+  ] }) });
+};
+export {
+  App,
+  App as default
+};