magic-editor-x 1.0.0

package/dist/_chunks/index-BRVqbnOb.mjs

@@ -0,0 +1,4450 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { useState, useEffect, useCallback, useRef, useMemo, forwardRef } from "react";
+import { u as useIntl, F as Field, L as Loader, g as getTranslation } from "./getTranslation-C4uWR0DB.mjs";
+import styled, { createGlobalStyle, css } from "styled-components";
+import { SparklesIcon as SparklesIcon$1, Bars3BottomLeftIcon, ListBulletIcon, CheckCircleIcon, PhotoIcon, LinkIcon, CodeBracketIcon, TableCellsIcon, ChatBubbleBottomCenterTextIcon, ExclamationTriangleIcon, MinusIcon, DocumentDuplicateIcon, TrashIcon, ArrowsPointingInIcon, ArrowsPointingOutIcon, EyeIcon, PencilSquareIcon } from "@heroicons/react/24/outline";
+import EditorJS from "@editorjs/editorjs";
+import { M as MagicEditorAPI, t as toastManager, g as getTools, i as initUndoRedo, a as initDragDrop, A as AIToast, b as AIInlineToolbar } from "./tools-CjnQJ9w2.mjs";
+import { useStrapiApp, useFetchClient, useAuth } from "@strapi/strapi/admin";
+import { P as PLUGIN_ID } from "./index-B5MzUyo0.mjs";
+import { io } from "socket.io-client";
+import * as Y from "yjs";
+import { IndexeddbPersistence } from "y-indexeddb";
+import { useNavigate } from "react-router-dom";
+const getBackendUrl = () => {
+  return window.location.origin;
+};
+const prefixFileUrl = (url) => {
+  if (!url) return url;
+  if (url.startsWith("http://") || url.startsWith("https://")) {
+    return url;
+  }
+  return `${getBackendUrl()}${url}`;
+};
+const MediaLibComponent = ({
+  isOpen = false,
+  onChange = () => {
+  },
+  onToggle = () => {
+  },
+  allowedTypes = ["images", "files", "videos", "audios"],
+  multiple = true
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [retryCount, setRetryCount] = useState(0);
+  const components = useStrapiApp("MediaLibComponent", (state) => state.components);
+  const MediaLibraryDialog = components?.["media-library"];
+  useEffect(() => {
+    if (isOpen && !MediaLibraryDialog && retryCount < 5) {
+      const timer = setTimeout(() => {
+        setRetryCount((prev) => prev + 1);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+    setIsLoading(false);
+  }, [isOpen, MediaLibraryDialog, retryCount]);
+  useEffect(() => {
+    if (!isOpen) {
+      setRetryCount(0);
+      setIsLoading(true);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen) {
+      console.log("[Magic Editor X] MediaLib opened");
+      console.log("[Magic Editor X] Available components:", Object.keys(components || {}));
+      console.log("[Magic Editor X] MediaLibraryDialog:", MediaLibraryDialog ? "✅ Found" : "❌ Not found");
+      console.log("[Magic Editor X] Retry count:", retryCount);
+    }
+  }, [isOpen, components, MediaLibraryDialog, retryCount]);
+  const handleSelectAssets = useCallback((files) => {
+    console.log("[Magic Editor X] Selected assets:", files);
+    if (!files || files.length === 0) {
+      onToggle();
+      return;
+    }
+    const formattedFiles = files.map((file) => ({
+      alt: file.alternativeText || file.name || "",
+      url: prefixFileUrl(file.url),
+      width: file.width,
+      height: file.height,
+      size: file.size,
+      mime: file.mime,
+      formats: file.formats,
+      name: file.name,
+      caption: file.caption || "",
+      id: file.id,
+      documentId: file.documentId
+    }));
+    console.log("[Magic Editor X] Formatted files:", formattedFiles);
+    onChange(formattedFiles);
+  }, [onChange, onToggle]);
+  const handleClose = useCallback(() => {
+    console.log("[Magic Editor X] MediaLib closing");
+    onToggle();
+  }, [onToggle]);
+  if (!isOpen) {
+    return null;
+  }
+  if (isLoading && !MediaLibraryDialog && retryCount < 5) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.7)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 1e5
+          // Higher than fullscreen (9999)
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              backgroundColor: "white",
+              padding: "40px",
+              borderRadius: "16px",
+              textAlign: "center",
+              maxWidth: "400px",
+              boxShadow: "0 20px 40px rgba(0, 0, 0, 0.2)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: {
+                width: "48px",
+                height: "48px",
+                margin: "0 auto 20px",
+                border: "4px solid #e2e8f0",
+                borderTop: "4px solid #7C3AED",
+                borderRadius: "50%",
+                animation: "spin 1s linear infinite"
+              } }),
+              /* @__PURE__ */ jsx("style", { children: `
+            @keyframes spin {
+              0% { transform: rotate(0deg); }
+              100% { transform: rotate(360deg); }
+            }
+          ` }),
+              /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: "#64748b" }, children: "Media Library wird geladen..." })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (!MediaLibraryDialog) {
+    console.warn("[Magic Editor X] Media Library component not available after retries");
+    console.log("[Magic Editor X] Registered components:", Object.keys(components || {}));
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.7)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 1e5
+          // Higher than fullscreen (9999)
+        },
+        onClick: handleClose,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              backgroundColor: "white",
+              padding: "40px",
+              borderRadius: "16px",
+              textAlign: "center",
+              maxWidth: "400px",
+              boxShadow: "0 20px 40px rgba(0, 0, 0, 0.2)"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx("div", { style: {
+                width: "64px",
+                height: "64px",
+                margin: "0 auto 20px",
+                background: "linear-gradient(135deg, #fee2e2 0%, #fecaca 100%)",
+                borderRadius: "50%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              }, children: /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "#ef4444", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+              ] }) }),
+              /* @__PURE__ */ jsx("h3", { style: {
+                fontSize: "18px",
+                fontWeight: "600",
+                color: "#1e293b",
+                marginBottom: "12px"
+              }, children: "Media Library nicht verfügbar" }),
+              /* @__PURE__ */ jsx("p", { style: {
+                fontSize: "14px",
+                color: "#64748b",
+                marginBottom: "16px",
+                lineHeight: "1.5"
+              }, children: "Die Strapi Media Library konnte nicht geladen werden." }),
+              /* @__PURE__ */ jsxs("p", { style: {
+                fontSize: "12px",
+                color: "#94a3b8",
+                marginBottom: "24px",
+                background: "#f1f5f9",
+                padding: "8px 12px",
+                borderRadius: "6px",
+                fontFamily: "monospace"
+              }, children: [
+                "Verfügbare Komponenten: ",
+                Object.keys(components || {}).join(", ") || "Keine"
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleClose,
+                  style: {
+                    padding: "12px 24px",
+                    background: "linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%)",
+                    color: "white",
+                    border: "none",
+                    borderRadius: "8px",
+                    fontSize: "14px",
+                    fontWeight: "600",
+                    cursor: "pointer",
+                    transition: "all 0.2s ease"
+                  },
+                  onMouseOver: (e) => e.target.style.transform = "translateY(-1px)",
+                  onMouseOut: (e) => e.target.style.transform = "translateY(0)",
+                  children: "Schließen"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(MediaLibErrorBoundary, { onClose: handleClose, children: /* @__PURE__ */ jsx(
+    MediaLibraryDialog,
+    {
+      allowedTypes,
+      onClose: handleClose,
+      onSelectAssets: handleSelectAssets,
+      multiple
+    }
+  ) });
+};
+class MediaLibErrorBoundary extends React__default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[Magic Editor X] Media Library error:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(0, 0, 0, 0.7)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1e5
+          },
+          onClick: this.props.onClose,
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                backgroundColor: "white",
+                padding: "40px",
+                borderRadius: "16px",
+                textAlign: "center",
+                maxWidth: "450px",
+                boxShadow: "0 20px 40px rgba(0, 0, 0, 0.2)"
+              },
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsx("div", { style: {
+                  width: "64px",
+                  height: "64px",
+                  margin: "0 auto 20px",
+                  background: "linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)",
+                  borderRadius: "50%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                }, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "#d97706", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }),
+                /* @__PURE__ */ jsx("h3", { style: {
+                  fontSize: "18px",
+                  fontWeight: "600",
+                  color: "#1e293b",
+                  marginBottom: "12px"
+                }, children: "Keine Upload-Berechtigung" }),
+                /* @__PURE__ */ jsxs("p", { style: {
+                  fontSize: "14px",
+                  color: "#64748b",
+                  marginBottom: "20px",
+                  lineHeight: "1.6"
+                }, children: [
+                  "Du benötigst Upload-Berechtigungen um die Media Library zu nutzen.",
+                  /* @__PURE__ */ jsx("br", {}),
+                  /* @__PURE__ */ jsx("br", {}),
+                  /* @__PURE__ */ jsx("strong", { children: "Lösung:" }),
+                  " Bitte einen Super Admin, dir die Upload-Rechte unter ",
+                  /* @__PURE__ */ jsx("em", { children: "Settings → Administration panel → Roles" }),
+                  " zu geben."
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: this.props.onClose,
+                    style: {
+                      padding: "12px 24px",
+                      background: "linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%)",
+                      color: "white",
+                      border: "none",
+                      borderRadius: "8px",
+                      fontSize: "14px",
+                      fontWeight: "600",
+                      cursor: "pointer"
+                    },
+                    children: "Schließen"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      );
+    }
+    return this.props.children;
+  }
+}
+const getToggleFunc = ({ openStateSetter, indexStateSetter }) => {
+  return (idx) => {
+    if (idx !== void 0 && idx !== null) {
+      indexStateSetter(idx);
+    }
+    openStateSetter((prev) => !prev);
+  };
+};
+const changeFunc = ({ indexStateSetter, editor, data, index }) => {
+  if (!editor || !data || data.length === 0) {
+    indexStateSetter(-1);
+    return;
+  }
+  let insertedBlocksCount = 0;
+  data.forEach((entry) => {
+    if (!entry.mime || !entry.mime.includes("image")) {
+      console.warn("[Magic Editor X] Skipping non-image file:", entry.name);
+      return;
+    }
+    const newBlockType = "image";
+    const newBlockData = {
+      file: {
+        url: entry.url.replace(window.location.origin, ""),
+        mime: entry.mime,
+        height: entry.height,
+        width: entry.width,
+        size: entry.size,
+        alt: entry.alt || entry.name || "",
+        formats: entry.formats
+      },
+      caption: entry.caption || "",
+      withBorder: false,
+      withBackground: false,
+      stretched: false
+    };
+    try {
+      editor.blocks.insert(
+        newBlockType,
+        newBlockData,
+        {},
+        index + insertedBlocksCount,
+        true
+      );
+      insertedBlocksCount++;
+    } catch (error) {
+      console.error("[Magic Editor X] Error inserting image block:", error);
+    }
+  });
+  if (insertedBlocksCount > 0) {
+    try {
+      editor.blocks.delete(index + insertedBlocksCount);
+    } catch (error) {
+      console.warn("[Magic Editor X] Could not delete placeholder block:", error);
+    }
+  }
+  indexStateSetter(-1);
+};
+const pluginId = "magic-editor-x";
+const SOCKET_FALLBACK_PATH = "/magic-editor-x/realtime";
+const CURSOR_COLORS = [
+  { bg: "#EF4444", text: "#FFFFFF", name: "Red" },
+  // Red
+  { bg: "#3B82F6", text: "#FFFFFF", name: "Blue" },
+  // Blue
+  { bg: "#10B981", text: "#FFFFFF", name: "Green" },
+  // Green
+  { bg: "#F59E0B", text: "#000000", name: "Amber" },
+  // Amber
+  { bg: "#8B5CF6", text: "#FFFFFF", name: "Purple" },
+  // Purple
+  { bg: "#EC4899", text: "#FFFFFF", name: "Pink" },
+  // Pink
+  { bg: "#06B6D4", text: "#FFFFFF", name: "Cyan" },
+  // Cyan
+  { bg: "#F97316", text: "#FFFFFF", name: "Orange" }
+  // Orange
+];
+const getUserColor = (userId) => {
+  if (!userId) return CURSOR_COLORS[0];
+  const hash = String(userId).split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  return CURSOR_COLORS[hash % CURSOR_COLORS.length];
+};
+const useMagicCollaboration = ({
+  enabled,
+  roomId,
+  fieldName,
+  initialValue,
+  onRemoteUpdate
+  // Callback when remote update is received
+}) => {
+  const { get, post } = useFetchClient();
+  const authContext = useAuth("useMagicCollaboration", (state) => state);
+  const user = authContext?.user || null;
+  const [status, setStatus] = useState(enabled ? "idle" : "disabled");
+  const [error, setError] = useState(null);
+  const [peers, setPeers] = useState([]);
+  const [awareness, setAwareness] = useState({});
+  const [collabRole, setCollabRole] = useState(null);
+  const [canEdit, setCanEdit] = useState(null);
+  const socketRef = useRef(null);
+  const persistenceRef = useRef(null);
+  const bootstrappedRef = useRef(false);
+  const onRemoteUpdateRef = useRef(onRemoteUpdate);
+  useEffect(() => {
+    onRemoteUpdateRef.current = onRemoteUpdate;
+  }, [onRemoteUpdate]);
+  const { doc, blocksMap, metaMap } = useMemo(() => {
+    const yDoc = new Y.Doc();
+    return {
+      doc: yDoc,
+      blocksMap: yDoc.getMap("blocks"),
+      // Each block stored by ID
+      metaMap: yDoc.getMap("meta")
+      // Metadata (time, blockOrder, etc.)
+    };
+  }, [roomId]);
+  useEffect(() => {
+    return () => {
+      doc.destroy();
+    };
+  }, [doc]);
+  useEffect(() => {
+    bootstrappedRef.current = false;
+    setPeers([]);
+    setAwareness({});
+    if (socketRef.current) {
+      socketRef.current.disconnect();
+      socketRef.current = null;
+    }
+    return () => {
+      if (socketRef.current) {
+        socketRef.current.disconnect();
+        socketRef.current = null;
+      }
+    };
+  }, [roomId]);
+  useEffect(() => {
+    if (!enabled) return void 0;
+    const cleanupInterval = setInterval(() => {
+      const now = Date.now();
+      const staleThreshold = 3e4;
+      setAwareness((prev) => {
+        const next = { ...prev };
+        let changed = false;
+        Object.keys(next).forEach((key) => {
+          if (now - next[key].lastUpdate > staleThreshold) {
+            delete next[key];
+            changed = true;
+          }
+        });
+        return changed ? next : prev;
+      });
+    }, 1e4);
+    return () => clearInterval(cleanupInterval);
+  }, [enabled]);
+  useEffect(() => {
+    if (!enabled) {
+      setStatus("disabled");
+    } else if (status === "disabled") {
+      setStatus("idle");
+    }
+  }, [enabled, status]);
+  useEffect(() => {
+    if (!enabled || !roomId) {
+      return void 0;
+    }
+    bootstrappedRef.current = true;
+    console.log("[Magic Collab] [READY] Client ready, waiting for server sync...");
+    return void 0;
+  }, [enabled, roomId]);
+  useEffect(() => {
+    if (!enabled || !roomId || !doc) {
+      return void 0;
+    }
+    const persistenceKey = `magic-editor-x::${roomId}`;
+    try {
+      const persistence = new IndexeddbPersistence(persistenceKey, doc);
+      persistenceRef.current = persistence;
+      persistence.on("synced", () => {
+        console.log("[Magic Collab] [CACHE] IndexedDB synced for room:", roomId);
+        const blockOrder = metaMap.get("blockOrder");
+        fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "useMagicCollaboration:indexeddb:synced", message: "IndexedDB synced - loaded local state", data: { blocksMapSize: blocksMap.size, blocksMapKeys: Array.from(blocksMap.keys()), blockOrder, roomId, persistenceKey }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "H" }) }).catch(() => {
+        });
+      });
+      console.log("[Magic Collab] [CACHE] IndexedDB persistence initialized:", persistenceKey);
+    } catch (e) {
+      console.warn("[Magic Collab] IndexedDB persistence failed:", e.message);
+    }
+    return () => {
+      if (persistenceRef.current) {
+        try {
+          persistenceRef.current.destroy();
+          persistenceRef.current = null;
+          console.log("[Magic Collab] [CACHE] IndexedDB persistence destroyed");
+        } catch (e) {
+        }
+      }
+    };
+  }, [enabled, roomId, doc]);
+  const initialValueRef = useRef(initialValue);
+  useEffect(() => {
+    initialValueRef.current = initialValue;
+  }, [initialValue]);
+  useEffect(() => {
+    if (!enabled || !roomId || !user) {
+      return void 0;
+    }
+    if (socketRef.current?.connected) {
+      return void 0;
+    }
+    let cancelled = false;
+    setError(null);
+    setStatus("requesting");
+    const startSession = async () => {
+      try {
+        console.log("[Magic Collab] [SESSION] Requesting session for room:", roomId);
+        const { data } = await post(`/${pluginId}/collab/session`, {
+          roomId,
+          fieldName,
+          initialValue: initialValueRef.current || "",
+          meta: { roomId, fieldName }
+        });
+        console.log("[Magic Collab] [SUCCESS] Session response:", data);
+        if (cancelled) {
+          return;
+        }
+        if (!data || !data.token) {
+          throw new Error("Invalid session response: missing token");
+        }
+        const userRole = data.role || "viewer";
+        const userCanEdit = data.canEdit !== void 0 ? data.canEdit : ["editor", "owner"].includes(userRole);
+        setCollabRole(userRole);
+        setCanEdit(userCanEdit);
+        console.log("[Magic Collab] [ROLE] User role:", userRole, "| Can edit:", userCanEdit);
+        setStatus("connecting");
+        const wsUrl = data.wsUrl || window.location.origin;
+        const wsPath = data.wsPath || SOCKET_FALLBACK_PATH;
+        console.log("[Magic Collab] [SOCKET] Connecting to Socket.io:", { wsUrl, wsPath });
+        const socket = io(wsUrl, {
+          path: wsPath,
+          auth: { token: data.token },
+          transports: ["websocket", "polling"],
+          // Add polling as fallback
+          reconnection: true,
+          reconnectionDelay: 1e3,
+          reconnectionAttempts: 5
+        });
+        socketRef.current = socket;
+        socket.on("connect", () => {
+          setStatus("connected");
+          console.log("[Magic Collab] [SUCCESS] Connected to room:", roomId);
+        });
+        socket.on("disconnect", (reason) => {
+          setStatus("disconnected");
+          console.log("[Magic Collab] [WARNING] Disconnected:", reason);
+        });
+        socket.on("connect_error", (error2) => {
+          console.error("[Magic Collab] [ERROR] Connection error:", error2);
+          setStatus("error");
+          setError(`Connection failed: ${error2.message}`);
+        });
+        socket.on("collab:error", (payload) => {
+          console.error("[Magic Collab] [ERROR] Collaboration error:", payload);
+          setError(payload?.message || "Realtime collaboration error");
+        });
+        socket.on("collab:sync", (update) => {
+          if (update) {
+            console.log("[Magic Collab] [SYNC] Syncing initial state, update size:", update.length, "bytes");
+            try {
+              const blockOrderBefore = metaMap.get("blockOrder");
+              fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "useMagicCollaboration:collab:sync:before", message: "BEFORE applying server sync", data: { blocksMapSize: blocksMap.size, blocksMapKeys: Array.from(blocksMap.keys()), blockOrder: blockOrderBefore, roomId }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "F" }) }).catch(() => {
+              });
+              const beforeBlockCount = blocksMap.size;
+              console.log("[Magic Collab] [DATA] Y.Map BEFORE sync - block count:", beforeBlockCount);
+              Y.applyUpdate(doc, new Uint8Array(update), "remote");
+              const afterBlockCount = blocksMap.size;
+              console.log("[Magic Collab] [DATA] Y.Map AFTER sync - block count:", afterBlockCount);
+              const blockOrderAfter = metaMap.get("blockOrder");
+              fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "useMagicCollaboration:collab:sync:after", message: "AFTER applying server sync", data: { blocksMapSize: blocksMap.size, blocksMapKeys: Array.from(blocksMap.keys()), blockOrder: blockOrderAfter, roomId }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "F" }) }).catch(() => {
+              });
+              if (onRemoteUpdateRef.current) {
+                console.log("[Magic Collab] [CALLBACK] Calling onRemoteUpdate callback after sync");
+                setTimeout(() => {
+                  onRemoteUpdateRef.current();
+                }, 0);
+              }
+            } catch (err) {
+              console.error("[Magic Collab] Failed to apply initial sync:", err);
+            }
+          }
+        });
+        socket.on("collab:update", (update) => {
+          if (update) {
+            console.log("[Magic Collab] [UPDATE] Received remote update:", update.length, "bytes");
+            try {
+              fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "useMagicCollaboration:collab:update:before", message: "BEFORE applying remote update", data: { blocksMapSize: blocksMap.size, blocksMapKeys: Array.from(blocksMap.keys()), blockOrder: metaMap.get("blockOrder"), updateSize: update.length, roomId }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "G" }) }).catch(() => {
+              });
+              const beforeBlockCount = blocksMap.size;
+              console.log("[Magic Collab] [DATA] Y.Map BEFORE update - blocks:", beforeBlockCount);
+              Y.applyUpdate(doc, new Uint8Array(update), "remote");
+              const afterBlockCount = blocksMap.size;
+              console.log("[Magic Collab] [DATA] Y.Map AFTER update - blocks:", afterBlockCount);
+              fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "useMagicCollaboration:collab:update:after", message: "AFTER applying remote update", data: { blocksMapSize: blocksMap.size, blocksMapKeys: Array.from(blocksMap.keys()), blockOrder: metaMap.get("blockOrder"), roomId }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "G" }) }).catch(() => {
+              });
+              if (onRemoteUpdateRef.current) {
+                console.log("[Magic Collab] [CALLBACK] Calling onRemoteUpdate callback");
+                setTimeout(() => {
+                  onRemoteUpdateRef.current();
+                }, 0);
+              }
+            } catch (err) {
+              console.error("[Magic Collab] Failed to apply update:", err);
+            }
+          }
+        });
+        socket.on("collab:presence", ({ type, user: peerUser }) => {
+          if (!peerUser?.id) {
+            return;
+          }
+          console.log("[Magic Collab] [PEERS] Peer presence:", type, peerUser.email);
+          setPeers((current) => {
+            if (type === "leave") {
+              setAwareness((prev) => {
+                const next = { ...prev };
+                delete next[peerUser.id];
+                return next;
+              });
+              return current.filter((peer) => peer.id !== peerUser.id);
+            }
+            const exists = current.some((peer) => peer.id === peerUser.id);
+            if (exists) {
+              return current;
+            }
+            return [...current, peerUser];
+          });
+        });
+        socket.on("collab:awareness", ({ user: peerUser, payload }) => {
+          if (!peerUser?.id) {
+            return;
+          }
+          if (user && peerUser.id === user.id) {
+            return;
+          }
+          if (payload?.blockIndex === -1 || payload?.blockIndex === null) {
+            return;
+          }
+          setAwareness((prev) => ({
+            ...prev,
+            [peerUser.id]: {
+              user: peerUser,
+              cursor: payload?.cursor || null,
+              blockId: payload?.blockId || null,
+              blockIndex: payload?.blockIndex ?? null,
+              selection: payload?.selection || null,
+              color: getUserColor(peerUser.id),
+              lastUpdate: Date.now()
+            }
+          }));
+        });
+      } catch (err) {
+        if (!cancelled) {
+          console.error("[Magic Collab] [ERROR] Session error:", err);
+          const errorMessage = err?.response?.data?.error?.message || err?.message;
+          const errorStatus = err?.response?.status;
+          setStatus("denied");
+          if (errorStatus === 403 || errorMessage?.includes("Freigabe") || errorMessage?.includes("forbidden")) {
+            setError("[DENIED] Keine Freigabe: Kontaktiere einen Super Admin fuer Zugriff");
+          } else if (errorStatus === 401 || errorMessage?.includes("unauthorized")) {
+            setError("[AUTH] Authentifizierung fehlgeschlagen");
+          } else if (errorMessage?.includes("disabled")) {
+            setError("[DISABLED] Echtzeit-Bearbeitung ist deaktiviert");
+          } else if (errorStatus === 400) {
+            setError(`[ERROR] Ungueltige Anfrage: ${errorMessage}`);
+          } else {
+            setError(errorMessage || "[ERROR] Keine Berechtigung fuer Live Editing");
+          }
+        }
+      }
+    };
+    startSession();
+    return () => {
+      cancelled = true;
+      if (socketRef.current) {
+        console.log("[Magic Collab] [SOCKET] Disconnecting socket");
+        socketRef.current.disconnect();
+        socketRef.current = null;
+      }
+      setPeers([]);
+    };
+  }, [enabled, post, fieldName, roomId, user]);
+  useEffect(() => {
+    if (!enabled) {
+      console.log("[Magic Collab] [SKIP] Update handler not registered (disabled)");
+      return void 0;
+    }
+    console.log("[Magic Collab] [HANDLER] Registering update handler on doc");
+    const handler = (update, origin) => {
+      const updateSize = update?.length || 0;
+      if (updateSize > 10) {
+        console.log("[Magic Collab] [DOC] Doc update - origin:", origin, "size:", updateSize, "bytes");
+      }
+      if (origin === "remote" || origin === "bootstrap") {
+        return;
+      }
+      if (!socketRef.current?.connected) {
+        console.log("[Magic Collab] [WARNING] Socket not connected, update queued");
+        return;
+      }
+      const updateArray = Array.from(update);
+      socketRef.current.emit("collab:update", updateArray);
+      console.log("[Magic Collab] [SENT] Sent update:", updateArray.length, "bytes to server");
+    };
+    doc.on("update", handler);
+    return () => {
+      console.log("[Magic Collab] [CLEANUP] Removing update handler");
+      doc.off("update", handler);
+    };
+  }, [doc, enabled]);
+  const emitAwareness = useCallback((payload) => {
+    if (socketRef.current?.connected) {
+      socketRef.current.emit("collab:awareness", payload);
+    }
+  }, []);
+  const localUserColor = useMemo(() => {
+    return user ? getUserColor(user.id) : CURSOR_COLORS[0];
+  }, [user]);
+  return {
+    doc,
+    blocksMap,
+    // Y.Map for block-level sync (replaces Y.Text)
+    metaMap,
+    // Y.Map for metadata (includes blockOrder as JSON string)
+    status,
+    error,
+    peers,
+    awareness,
+    emitAwareness,
+    localUserColor,
+    getUserColor,
+    // Role-based access control
+    collabRole,
+    // 'viewer' | 'editor' | 'owner' | null
+    canEdit
+    // true if user can edit (editor/owner), false for viewer
+  };
+};
+const useLicense = () => {
+  const { get } = useFetchClient();
+  const [isPremium, setIsPremium] = useState(false);
+  const [isAdvanced, setIsAdvanced] = useState(false);
+  const [isEnterprise, setIsEnterprise] = useState(false);
+  const [tier, setTier] = useState("free");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [licenseData, setLicenseData] = useState(null);
+  const [limits, setLimits] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    const fetchLicense = async () => {
+      if (mounted) {
+        await checkLicense();
+      }
+    };
+    fetchLicense();
+    const interval = setInterval(() => {
+      if (mounted) {
+        checkLicense(true);
+      }
+    }, 60 * 60 * 1e3);
+    return () => {
+      mounted = false;
+      clearInterval(interval);
+    };
+  }, []);
+  const checkLicense = async (silent = false) => {
+    if (!silent) {
+      setLoading(true);
+    }
+    try {
+      const response = await get("/magic-editor-x/license/status");
+      const isValid = response.data?.valid || false;
+      const tierName = response.data?.tier || "free";
+      const hasPremiumFeature = response.data?.data?.features?.premium || tierName === "premium";
+      const hasAdvancedFeature = response.data?.data?.features?.advanced || tierName === "advanced";
+      const hasEnterpriseFeature = response.data?.data?.features?.enterprise || tierName === "enterprise";
+      setTier(tierName);
+      setIsPremium(isValid && (hasPremiumFeature || hasAdvancedFeature || hasEnterpriseFeature));
+      setIsAdvanced(isValid && (hasAdvancedFeature || hasEnterpriseFeature));
+      setIsEnterprise(isValid && hasEnterpriseFeature);
+      setLicenseData(response.data?.data || null);
+      setError(null);
+      await fetchLimits();
+    } catch (err) {
+      if (err.name === "AbortError") {
+        return;
+      }
+      if (!silent) {
+        console.error("[Magic Editor X] License check error:", err);
+      }
+      setTier("free");
+      setIsPremium(false);
+      setIsAdvanced(false);
+      setIsEnterprise(false);
+      setLicenseData(null);
+      setError(err);
+    } finally {
+      if (!silent) {
+        setLoading(false);
+      }
+    }
+  };
+  const fetchLimits = async () => {
+    try {
+      const response = await get("/magic-editor-x/license/limits");
+      setLimits(response.data?.limits || null);
+    } catch (err) {
+      console.error("[Magic Editor X] Error fetching limits:", err);
+    }
+  };
+  const hasFeature = (featureName) => {
+    if (!featureName) return false;
+    const freeFeatures = [
+      "editor",
+      "allTools",
+      "collaboration-basic"
+      // 2 collaborators
+    ];
+    if (freeFeatures.includes(featureName)) return true;
+    const premiumFeatures = [
+      "collaboration-extended",
+      // 10 collaborators
+      "ai-basic"
+    ];
+    if (premiumFeatures.includes(featureName) && isPremium) return true;
+    const advancedFeatures = [
+      "collaboration-unlimited",
+      "ai-full"
+    ];
+    if (advancedFeatures.includes(featureName) && isAdvanced) return true;
+    const enterpriseFeatures = [
+      "priority-support",
+      "custom-branding"
+    ];
+    if (enterpriseFeatures.includes(featureName) && isEnterprise) return true;
+    return false;
+  };
+  const canAddCollaborator = () => {
+    if (!limits?.collaborators) return true;
+    return limits.collaborators.canAdd;
+  };
+  const getCollaboratorInfo = () => {
+    if (!limits?.collaborators) {
+      return { current: 0, max: 2, unlimited: false, canAdd: true };
+    }
+    return limits.collaborators;
+  };
+  return {
+    tier,
+    isPremium,
+    isAdvanced,
+    isEnterprise,
+    loading,
+    error,
+    licenseData,
+    limits,
+    features: {
+      premium: isPremium,
+      advanced: isAdvanced,
+      enterprise: isEnterprise
+    },
+    hasFeature,
+    canAddCollaborator,
+    getCollaboratorInfo,
+    refetch: checkLicense
+  };
+};
+const useAIActions = ({ licenseKey, editorInstanceRef, isReady, onNoCredits }) => {
+  const apiClientRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (licenseKey && !apiClientRef.current) {
+      apiClientRef.current = new MagicEditorAPI(licenseKey);
+    }
+  }, [licenseKey]);
+  const replaceText = useCallback((range, newText) => {
+    if (!range) return false;
+    try {
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+      selection.addRange(range);
+      const success = document.execCommand("insertText", false, newText);
+      if (editorInstanceRef.current && isReady) {
+        const currentBlock = editorInstanceRef.current.blocks.getBlockByIndex(
+          editorInstanceRef.current.blocks.getCurrentBlockIndex()
+        );
+        currentBlock?.dispatchChange?.();
+      }
+      return success;
+    } catch (err) {
+      console.error("[AI Actions] Failed to replace text:", err);
+      return false;
+    }
+  }, [editorInstanceRef, isReady]);
+  const appendText = useCallback((range, additionalText) => {
+    if (!range) return false;
+    try {
+      const selection = window.getSelection();
+      const newRange = range.cloneRange();
+      newRange.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+      const success = document.execCommand("insertText", false, additionalText);
+      if (editorInstanceRef.current && isReady) {
+        const currentBlock = editorInstanceRef.current.blocks.getBlockByIndex(
+          editorInstanceRef.current.blocks.getCurrentBlockIndex()
+        );
+        currentBlock?.dispatchChange?.();
+      }
+      return success;
+    } catch (err) {
+      console.error("[AI Actions] Failed to append text:", err);
+      return false;
+    }
+  }, [editorInstanceRef, isReady]);
+  const handleAIAction = useCallback(async (action, options, { text, range }) => {
+    if (!apiClientRef.current || !text) return;
+    const originalText = text;
+    const langNames = { en: "Englisch", de: "Deutsch", fr: "Französisch", es: "Spanisch" };
+    try {
+      let result;
+      let type;
+      let apiOptions = {};
+      switch (action) {
+        case "fix":
+          type = "grammar";
+          break;
+        case "rewrite":
+          type = "rewrite";
+          apiOptions = { tone: options.tone };
+          break;
+        case "expand":
+          type = "expand";
+          break;
+        case "summarize":
+          type = "summarize";
+          break;
+        case "continue":
+          type = "continue";
+          break;
+        case "translate":
+          type = "translate";
+          apiOptions = { language: options.language };
+          break;
+        default:
+          console.warn("Unknown AI action:", action);
+          return false;
+      }
+      result = await apiClientRef.current.correct(text, type, apiOptions);
+      if (result.data.hasChanges && result.data.corrected) {
+        if (action === "continue") {
+          appendText(range, " " + result.data.corrected);
+        } else {
+          replaceText(range, result.data.corrected);
+        }
+        const messages = {
+          fix: `✓ ${result.data.changes?.length || 1} Korrekturen angewendet`,
+          rewrite: `✨ Text umgeschrieben (${options.tone || "standard"})`,
+          expand: "📈 Text erweitert",
+          summarize: "📉 Text zusammengefasst",
+          continue: "✍️ Text fortgesetzt",
+          translate: `🌍 Übersetzt zu ${langNames[options.language] || options.language}`
+        };
+        toastManager.success(messages[action], {
+          description: `${result.credits?.remaining ?? 0} Credits übrig`,
+          onUndo: () => replaceText(range, originalText),
+          duration: 5e3
+        });
+      } else {
+        toastManager.info("Text ist bereits korrekt");
+      }
+      return true;
+    } catch (err) {
+      console.error("[AI Actions] Action failed:", err);
+      switch (err.code) {
+        case "NO_CREDITS":
+          if (onNoCredits) {
+            onNoCredits(err.upgrade);
+          } else {
+            toastManager.warning("Keine Credits", {
+              description: err.message || "Bitte Credits kaufen",
+              duration: 5e3
+            });
+          }
+          break;
+        case "TYPE_NOT_ALLOWED":
+          toastManager.warning("Funktion nicht verfügbar", {
+            description: "Diese Funktion ist in deinem Tier nicht enthalten",
+            duration: 5e3
+          });
+          break;
+        case "LICENSE_NOT_FOUND":
+        case "LICENSE_INACTIVE":
+        case "WRONG_PLUGIN":
+          toastManager.error("Lizenz ungültig", {
+            description: err.message || "Bitte prüfe deine Lizenz",
+            duration: 5e3
+          });
+          break;
+        case "DAILY_LIMIT_EXCEEDED":
+        case "MONTHLY_LIMIT_EXCEEDED":
+          toastManager.warning("Limit erreicht", {
+            description: err.message,
+            duration: 5e3
+          });
+          break;
+        case "CORRECTION_FAILED":
+          toastManager.error("AI Fehler", {
+            description: "Die KI konnte die Anfrage nicht verarbeiten",
+            duration: 4e3
+          });
+          break;
+        default:
+          toastManager.error("Fehler", {
+            description: err.message || "Aktion fehlgeschlagen",
+            duration: 4e3
+          });
+      }
+      return false;
+    }
+  }, [replaceText, appendText, onNoCredits]);
+  return { handleAIAction };
+};
+const Overlay$1 = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999999;
+`;
+const PopupContainer = styled.div`
+  background: ${(props) => props.theme.colors.neutral0};
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  width: 100%;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+`;
+const Header$1 = styled.div`
+  background: linear-gradient(135deg, #7C3AED 0%, #a855f7 100%);
+  padding: 20px 24px;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const HeaderTitle = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 16px;
+  font-weight: 600;
+`;
+const CreditsBadge = styled.div`
+  background: rgba(255, 255, 255, 0.2);
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+`;
+const Content$1 = styled.div`
+  padding: 24px;
+  overflow-y: auto;
+  flex: 1;
+`;
+const TextPreview = styled.div`
+  background: ${(props) => props.theme.colors.neutral100};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 10px;
+  padding: 14px;
+  margin-bottom: 20px;
+  max-height: 100px;
+  overflow-y: auto;
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.neutral600};
+  line-height: 1.6;
+`;
+const TypeButtons = styled.div`
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+`;
+const TypeButton = styled.button`
+  flex: 1;
+  padding: 14px 16px;
+  border: 2px solid ${(props) => props.$active ? "#7C3AED" : props.theme.colors.neutral200};
+  border-radius: 10px;
+  background: ${(props) => props.$active ? "#f5f3ff" : props.theme.colors.neutral0};
+  color: ${(props) => props.$active ? "#7C3AED" : props.theme.colors.neutral700};
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  
+  &:hover:not(:disabled) {
+    border-color: #7C3AED;
+    background: #faf8ff;
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+const ResultArea = styled.div`
+  min-height: 80px;
+`;
+const LoadingSpinner = styled.div`
+  text-align: center;
+  padding: 40px;
+  
+  .spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid ${(props) => props.theme.colors.neutral200};
+    border-top-color: #7C3AED;
+    border-radius: 50%;
+    margin: 0 auto 16px;
+    animation: spin 0.8s linear infinite;
+  }
+  
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+`;
+const ResultBox = styled.div`
+  margin-bottom: 16px;
+`;
+const ResultLabel = styled.div`
+  font-size: 11px;
+  font-weight: 700;
+  color: ${(props) => props.theme.colors.neutral500};
+  text-transform: uppercase;
+  margin-bottom: 8px;
+  letter-spacing: 0.5px;
+`;
+const OriginalText = styled.div`
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 14px;
+  color: #991b1b;
+  text-decoration: line-through;
+  line-height: 1.6;
+`;
+const CorrectedText = styled.div`
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 14px;
+  color: #166534;
+  line-height: 1.6;
+`;
+const SuccessMessage = styled.div`
+  text-align: center;
+  padding: 30px;
+  color: #10b981;
+  
+  .icon {
+    font-size: 48px;
+    margin-bottom: 12px;
+  }
+  
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+  
+  .subtitle {
+    font-size: 13px;
+    color: ${(props) => props.theme.colors.neutral500};
+  }
+`;
+const ErrorMessage = styled.div`
+  text-align: center;
+  padding: 30px;
+  color: #dc2626;
+  
+  .icon {
+    font-size: 48px;
+    margin-bottom: 12px;
+  }
+  
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+  
+  .subtitle {
+    font-size: 13px;
+    color: ${(props) => props.theme.colors.neutral500};
+  }
+`;
+const Footer$1 = styled.div`
+  padding: 16px 24px;
+  border-top: 1px solid ${(props) => props.theme.colors.neutral200};
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  background: ${(props) => props.theme.colors.neutral100};
+`;
+const Button$1 = styled.button`
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+`;
+const CancelButton = styled(Button$1)`
+  background: ${(props) => props.theme.colors.neutral0};
+  border: 1px solid ${(props) => props.theme.colors.neutral300};
+  color: ${(props) => props.theme.colors.neutral700};
+  
+  &:hover {
+    background: ${(props) => props.theme.colors.neutral100};
+  }
+`;
+const ApplyButton = styled(Button$1)`
+  background: linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%);
+  border: none;
+  color: white;
+  
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+  }
+`;
+const PlaceholderText = styled.div`
+  text-align: center;
+  padding: 40px;
+  color: ${(props) => props.theme.colors.neutral400};
+  font-size: 14px;
+`;
+const SparklesIcon = () => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 3v4" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 5h4" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 17v4" }),
+  /* @__PURE__ */ jsx("path", { d: "M17 19h4" })
+] });
+const AIAssistantPopup = ({ selectedText, licenseKey, onClose, onApply }) => {
+  const [activeType, setActiveType] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+  const [credits, setCredits] = useState(0);
+  const [usage, setUsage] = useState(null);
+  const [apiClient, setApiClient] = useState(null);
+  useEffect(() => {
+    if (licenseKey) {
+      const client = new MagicEditorAPI(licenseKey);
+      setApiClient(client);
+      client.getUsage().then((res) => {
+        setUsage(res.data);
+        setCredits(res.data?.credits?.balance || 0);
+      }).catch((err) => {
+        console.error("[AI Popup] Failed to fetch usage:", err);
+      });
+    }
+  }, [licenseKey]);
+  const handleCorrection = useCallback(async (type) => {
+    if (!apiClient || !selectedText) return;
+    setActiveType(type);
+    setIsLoading(true);
+    setResult(null);
+    setError(null);
+    try {
+      const response = await apiClient.correct(selectedText, type);
+      setResult(response.data);
+      if (response.credits?.remaining !== void 0) {
+        setCredits(response.credits.remaining);
+      }
+      if (response.usage) {
+        setUsage((prev) => ({
+          ...prev,
+          daily: {
+            ...prev?.daily,
+            used: response.usage.used,
+            remaining: response.usage.remaining,
+            limit: response.usage.limit
+          }
+        }));
+      }
+    } catch (err) {
+      console.error("[AI Popup] Correction failed:", err);
+      setError(err.message || "Korrektur fehlgeschlagen");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiClient, selectedText]);
+  const handleApply = useCallback(() => {
+    if (result?.corrected) {
+      onApply(result.corrected);
+    }
+  }, [result, onApply]);
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(Overlay$1, { onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs(Header$1, { children: [
+      /* @__PURE__ */ jsxs(HeaderTitle, { children: [
+        /* @__PURE__ */ jsx(SparklesIcon, {}),
+        /* @__PURE__ */ jsx("span", { children: "KI-Assistent" })
+      ] }),
+      /* @__PURE__ */ jsxs(CreditsBadge, { children: [
+        usage?.tier === "free" && `Free • ${usage?.daily?.remaining ?? 0}/${usage?.daily?.limit ?? 3} heute`,
+        usage?.tier === "basic" && `Basic • ${usage?.daily?.remaining ?? 0}/${usage?.daily?.limit ?? 10} heute`,
+        usage?.tier === "pro" && `Pro • ${usage?.daily?.remaining ?? 0}/${usage?.daily?.limit ?? 50} heute`,
+        !usage?.tier && "Wird geladen..."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Content$1, { children: [
+      /* @__PURE__ */ jsx(TextPreview, { children: selectedText.length > 300 ? selectedText.substring(0, 300) + "..." : selectedText }),
+      /* @__PURE__ */ jsxs(TypeButtons, { children: [
+        /* @__PURE__ */ jsxs(
+          TypeButton,
+          {
+            type: "button",
+            $active: activeType === "grammar",
+            onClick: () => handleCorrection("grammar"),
+            disabled: isLoading || (usage?.daily?.remaining ?? 0) <= 0 && credits <= 0,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "✓" }),
+              /* @__PURE__ */ jsx("span", { children: "Grammatik" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          TypeButton,
+          {
+            type: "button",
+            $active: activeType === "style",
+            onClick: () => handleCorrection("style"),
+            disabled: isLoading || !usage?.allowedTypes?.includes("style") || (usage?.daily?.remaining ?? 0) <= 0 && credits <= 0,
+            title: !usage?.allowedTypes?.includes("style") ? "Basic oder höher erforderlich" : void 0,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: usage?.allowedTypes?.includes("style") ? "✨" : "🔒" }),
+              /* @__PURE__ */ jsx("span", { children: "Stil" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          TypeButton,
+          {
+            type: "button",
+            $active: activeType === "rewrite",
+            onClick: () => handleCorrection("rewrite"),
+            disabled: isLoading || !usage?.allowedTypes?.includes("rewrite") || (usage?.daily?.remaining ?? 0) <= 0 && credits <= 0,
+            title: !usage?.allowedTypes?.includes("rewrite") ? "Pro erforderlich" : void 0,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: usage?.allowedTypes?.includes("rewrite") ? "↻" : "🔒" }),
+              /* @__PURE__ */ jsx("span", { children: "Umschreiben" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(ResultArea, { children: [
+        isLoading && /* @__PURE__ */ jsxs(LoadingSpinner, { children: [
+          /* @__PURE__ */ jsx("div", { className: "spinner" }),
+          /* @__PURE__ */ jsx("div", { children: "Korrigiere..." })
+        ] }),
+        !isLoading && !result && !error && /* @__PURE__ */ jsx(PlaceholderText, { children: "Wähle einen Korrektur-Typ, um den Text zu verbessern" }),
+        !isLoading && result && !result.hasChanges && /* @__PURE__ */ jsxs(SuccessMessage, { children: [
+          /* @__PURE__ */ jsx("div", { className: "icon", children: "✓" }),
+          /* @__PURE__ */ jsx("div", { className: "title", children: "Keine Änderungen nötig" }),
+          /* @__PURE__ */ jsx("div", { className: "subtitle", children: "Der Text ist bereits korrekt" })
+        ] }),
+        !isLoading && result && result.hasChanges && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(ResultBox, { children: [
+            /* @__PURE__ */ jsx(ResultLabel, { children: "Original" }),
+            /* @__PURE__ */ jsx(OriginalText, { children: result.original })
+          ] }),
+          /* @__PURE__ */ jsxs(ResultBox, { children: [
+            /* @__PURE__ */ jsx(ResultLabel, { children: "Korrigiert" }),
+            /* @__PURE__ */ jsx(CorrectedText, { children: result.corrected })
+          ] })
+        ] }),
+        !isLoading && error && /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+          /* @__PURE__ */ jsx("div", { className: "icon", children: "✕" }),
+          /* @__PURE__ */ jsx("div", { className: "title", children: "Fehler" }),
+          /* @__PURE__ */ jsx("div", { className: "subtitle", children: error })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Footer$1, { children: [
+      /* @__PURE__ */ jsx(CancelButton, { type: "button", onClick: onClose, children: "Abbrechen" }),
+      /* @__PURE__ */ jsx(
+        ApplyButton,
+        {
+          type: "button",
+          onClick: handleApply,
+          disabled: !result?.hasChanges,
+          children: "Übernehmen"
+        }
+      )
+    ] })
+  ] }) });
+};
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100000;
+  animation: fadeIn 0.2s ease-out;
+  
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+`;
+const Modal = styled.div`
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  max-width: 600px;
+  width: 90%;
+  overflow: hidden;
+  animation: slideUp 0.3s ease-out;
+  
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+const Header = styled.div`
+  background: linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%);
+  padding: 24px;
+  text-align: center;
+  color: white;
+`;
+const Icon = styled.div`
+  width: 64px;
+  height: 64px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  font-size: 28px;
+`;
+const Title = styled.h2`
+  margin: 0 0 8px;
+  font-size: 22px;
+  font-weight: 700;
+`;
+const Subtitle = styled.p`
+  margin: 0;
+  font-size: 14px;
+  opacity: 0.9;
+`;
+const Content = styled.div`
+  padding: 24px;
+`;
+const PackagesGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
+  
+  @media (max-width: 540px) {
+    grid-template-columns: 1fr;
+  }
+`;
+const Package = styled.div`
+  background: ${(props) => props.$best ? "linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%)" : "#f8fafc"};
+  border: 2px solid ${(props) => props.$best ? "#7C3AED" : "#e2e8f0"};
+  border-radius: 12px;
+  padding: 20px;
+  text-align: center;
+  position: relative;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
+  }
+  
+  ${(props) => props.$best && `
+    transform: scale(1.05);
+    
+    &:hover {
+      transform: scale(1.05) translateY(-4px);
+    }
+  `}
+`;
+const BestBadge = styled.div`
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%);
+  color: white;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 4px 12px;
+  border-radius: 20px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+const Credits = styled.div`
+  font-size: 32px;
+  font-weight: 800;
+  color: #1e293b;
+  margin-bottom: 4px;
+`;
+const CreditsLabel = styled.div`
+  font-size: 12px;
+  color: #64748b;
+  margin-bottom: 12px;
+`;
+const Price = styled.div`
+  font-size: 24px;
+  font-weight: 700;
+  color: ${(props) => props.$best ? "#7C3AED" : "#334155"};
+  
+  span {
+    font-size: 14px;
+    font-weight: 400;
+    color: #64748b;
+  }
+`;
+const PerCredit = styled.div`
+  font-size: 11px;
+  color: #94a3b8;
+  margin-top: 4px;
+`;
+const Actions = styled.div`
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+`;
+const Button = styled.button`
+  padding: 12px 32px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  
+  ${(props) => props.$primary ? `
+    background: linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%);
+    border: none;
+    color: white;
+    
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
+    }
+  ` : `
+    background: white;
+    border: 1px solid #e2e8f0;
+    color: #64748b;
+    
+    &:hover {
+      background: #f8fafc;
+      border-color: #cbd5e1;
+    }
+  `}
+  
+  &:active {
+    transform: scale(0.98);
+  }
+`;
+const Footer = styled.div`
+  padding: 16px 24px;
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
+  text-align: center;
+  font-size: 12px;
+  color: #64748b;
+  
+  a {
+    color: #7C3AED;
+    text-decoration: none;
+    font-weight: 500;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
+const CreditsModal = ({
+  isOpen,
+  onClose,
+  upgradeInfo
+}) => {
+  const navigate = useNavigate();
+  if (!isOpen) return null;
+  const packages = upgradeInfo?.packages || [
+    { credits: 50, price: 4.99, currency: "EUR" },
+    { credits: 200, price: 14.99, currency: "EUR", bestValue: true },
+    { credits: 500, price: 29.99, currency: "EUR" }
+  ];
+  const handleUpgrade = () => {
+    onClose();
+    navigate("/settings/magic-editor-x/upgrade");
+  };
+  const formatPrice = (price, currency) => {
+    return new Intl.NumberFormat("de-DE", {
+      style: "currency",
+      currency: currency || "EUR"
+    }).format(price);
+  };
+  const getPerCredit = (price, credits) => {
+    return (price / credits).toFixed(3).replace(".", ",");
+  };
+  return /* @__PURE__ */ jsx(Overlay, { onClick: onClose, children: /* @__PURE__ */ jsxs(Modal, { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsx(Icon, { children: "✨" }),
+      /* @__PURE__ */ jsx(Title, { children: "Keine Credits verfügbar" }),
+      /* @__PURE__ */ jsx(Subtitle, { children: upgradeInfo?.message || "Kaufe Credits um Magic Editor AI zu nutzen" })
+    ] }),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx(PackagesGrid, { children: packages.map((pkg, index) => /* @__PURE__ */ jsxs(Package, { $best: pkg.bestValue, children: [
+        pkg.bestValue && /* @__PURE__ */ jsx(BestBadge, { children: "Best Value" }),
+        /* @__PURE__ */ jsx(Credits, { children: pkg.credits }),
+        /* @__PURE__ */ jsx(CreditsLabel, { children: "Credits" }),
+        /* @__PURE__ */ jsx(Price, { $best: pkg.bestValue, children: formatPrice(pkg.price, pkg.currency) }),
+        /* @__PURE__ */ jsxs(PerCredit, { children: [
+          getPerCredit(pkg.price, pkg.credits),
+          " € / Credit"
+        ] })
+      ] }, index)) }),
+      /* @__PURE__ */ jsxs(Actions, { children: [
+        /* @__PURE__ */ jsx(Button, { onClick: onClose, children: "Später" }),
+        /* @__PURE__ */ jsx(Button, { $primary: true, onClick: handleUpgrade, children: "Credits kaufen" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Footer, { children: [
+      "Credits werden nie ablaufen • ",
+      /* @__PURE__ */ jsx("a", { href: "#", onClick: handleUpgrade, children: "Alle Pakete ansehen" })
+    ] })
+  ] }) });
+};
+const FullscreenGlobalStyle = createGlobalStyle`
+  body.editor-fullscreen {
+    overflow: hidden !important;
+  }
+`;
+const EditorJSGlobalStyles = createGlobalStyle`
+  /* Popover rendered at document body */
+  body > .ce-popover,
+  body > .ce-popover--opened,
+  body > .ce-popover__container,
+  body > .ce-settings,
+  body > .ce-conversion-toolbar,
+  body > .ce-inline-toolbar {
+    z-index: 99999 !important;
+  }
+  
+  /* Ensure popovers are visible above Strapi modals */
+  .ce-popover,
+  .ce-popover--opened {
+    z-index: 99999 !important;
+  }
+  
+  /* ============================================
+     READONLY MODE - Block all editing interactions
+     ============================================ */
+  .editor-readonly {
+    /* Block all pointer events on editing elements */
+    .ce-block__content,
+    .ce-paragraph,
+    .cdx-block,
+    .ce-header,
+    [contenteditable] {
+      pointer-events: none !important;
+      cursor: not-allowed !important;
+      user-select: text !important; /* Allow text selection for copying */
+    }
+    
+    /* Hide editing UI elements */
+    .ce-toolbar,
+    .ce-toolbar__plus,
+    .ce-toolbar__actions,
+    .ce-settings,
+    .ce-block--selected::after,
+    .ce-inline-toolbar,
+    .ce-conversion-toolbar {
+      display: none !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+    
+    /* Visual indicator that editor is readonly */
+    .codex-editor {
+      opacity: 0.9;
+    }
+    
+    /* Disable contenteditable */
+    [contenteditable="true"] {
+      pointer-events: none !important;
+      -webkit-user-modify: read-only !important;
+    }
+  }
+  
+  /* ============================================
+     STRAPI MEDIA LIBRARY - Higher z-index for fullscreen
+     ============================================ */
+  [data-react-portal],
+  .ReactModalPortal,
+  [role="dialog"],
+  [data-strapi-modal="true"],
+  .upload-dialog,
+  [class*="Modal"],
+  [class*="modal"],
+  [class*="Dialog"],
+  [class*="dialog"] {
+    z-index: 100001 !important;
+  }
+  
+  /* Strapi overlay */
+  [data-strapi-modal-overlay="true"],
+  [class*="Overlay"] {
+    z-index: 100000 !important;
+  }
+  
+  .ce-popover__container {
+    z-index: 99999 !important;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
+  }
+  
+  /* Settings popover */
+  .ce-settings {
+    z-index: 99999 !important;
+  }
+  
+  /* Inline toolbar */
+  .ce-inline-toolbar {
+    z-index: 99998 !important;
+  }
+  
+  /* Conversion toolbar */
+  .ce-conversion-toolbar {
+    z-index: 99999 !important;
+  }
+  
+  /* Block tune popovers */
+  .ce-block-tunes,
+  .ce-block-tunes__buttons {
+    z-index: 99999 !important;
+  }
+`;
+const EditorContainer = styled.div`
+  position: ${(props) => props.$isFullscreen ? "fixed" : "relative"};
+  top: ${(props) => props.$isFullscreen ? "0" : "auto"};
+  left: ${(props) => props.$isFullscreen ? "0" : "auto"};
+  right: ${(props) => props.$isFullscreen ? "0" : "auto"};
+  bottom: ${(props) => props.$isFullscreen ? "0" : "auto"};
+  z-index: ${(props) => props.$isFullscreen ? "9999" : "1"};
+  background: ${(props) => props.$isFullscreen ? props.theme.colors.neutral100 : "transparent"};
+  display: flex;
+  flex-direction: column;
+  min-height: ${(props) => props.$isFullscreen ? "100vh" : `${props.$minHeight}px`};
+  height: ${(props) => props.$isFullscreen ? "100vh" : "auto"};
+  margin-top: ${(props) => props.$isFullscreen ? "0" : "4px"};
+  
+  ${(props) => props.$isFullscreen && css`
+    padding: 20px;
+    
+    @media (min-width: 1200px) {
+      padding: 40px 80px;
+    }
+  `}
+`;
+const EditorCard = styled.div`
+  background: ${(props) => props.theme.colors.neutral0};
+  border: 1px solid ${(props) => props.$hasError ? "#dc2626" : props.$isFocused ? "#7C3AED" : props.theme.colors.neutral200};
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  box-shadow: ${(props) => props.$isFocused ? "0 0 0 3px rgba(124, 58, 237, 0.1), 0 4px 16px rgba(0, 0, 0, 0.08)" : "0 1px 3px rgba(0, 0, 0, 0.04)"};
+  transition: all 0.2s ease;
+  resize: ${(props) => props.$isFullscreen ? "none" : "vertical"};
+  min-height: ${(props) => props.$minHeight}px;
+  overflow: visible; /* Allow dropdowns to escape container bounds */
+  
+  &:hover {
+    border-color: ${(props) => props.$hasError ? "#dc2626" : props.theme.colors.primary200};
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  }
+  
+  ${(props) => props.$disabled && css`
+    opacity: 0.6;
+    pointer-events: none;
+    background: ${(props2) => props2.theme.colors.neutral100};
+  `}
+`;
+const EditorHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: ${(props) => props.theme.colors.neutral100};
+  border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
+  flex-shrink: 0;
+  border-radius: 16px 16px 0 0;
+  gap: 8px;
+  flex-wrap: wrap;
+  
+  @media (max-width: 640px) {
+    padding: 10px 12px;
+    gap: 6px;
+  }
+`;
+const HeaderLeft = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+  
+  @media (max-width: 640px) {
+    gap: 8px;
+  }
+`;
+const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    color: #7C3AED;
+  }
+  
+  @media (max-width: 480px) {
+    gap: 4px;
+    
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+`;
+const LogoText = styled.span`
+  font-size: 13px;
+  font-weight: 600;
+  color: #6366f1;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  
+  @media (max-width: 768px) {
+    font-size: 11px;
+  }
+  
+  @media (max-width: 480px) {
+    display: none;
+  }
+`;
+const STATUS_TOKENS = {
+  idle: { bg: "#e2e8f0", color: "#475569", dot: "#94a3b8" },
+  requesting: { bg: "#fef3c7", color: "#92400e", dot: "#f59e0b" },
+  connecting: { bg: "#ede9fe", color: "#5b21b6", dot: "#7C3AED" },
+  connected: { bg: "#dcfce7", color: "#166534", dot: "#22c55e" },
+  disconnected: { bg: "#fee2e2", color: "#991b1b", dot: "#ef4444" },
+  denied: { bg: "#fee2e2", color: "#b91c1c", dot: "#dc2626" },
+  disabled: { bg: "#e2e8f0", color: "#475569", dot: "#94a3b8" }
+};
+const getStatusToken = (status) => STATUS_TOKENS[status] || STATUS_TOKENS.idle;
+const BlockCount = styled.span`
+  font-size: 11px;
+  font-weight: 600;
+  color: #7C3AED;
+  background: #ede9fe;
+  padding: 4px 10px;
+  border-radius: 20px;
+  white-space: nowrap;
+  
+  @media (max-width: 480px) {
+    font-size: 10px;
+    padding: 3px 8px;
+  }
+`;
+styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: ${({ $status }) => getStatusToken($status).bg};
+  color: ${({ $status }) => getStatusToken($status).color};
+  border: 1px solid rgba(148, 163, 184, 0.25);
+`;
+styled.span`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: ${({ $status }) => getStatusToken($status).dot};
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
+`;
+styled.div`
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+`;
+styled.span`
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: rgba(124, 58, 237, 0.08);
+  border: 1px solid rgba(124, 58, 237, 0.25);
+  color: #5b21b6;
+  font-size: 10px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: -6px;
+
+  &:first-child {
+    margin-left: 0;
+  }
+`;
+const CollabNotice = styled.div`
+  padding: 10px 16px;
+  font-size: 12px;
+  color: #b45309;
+  background: #fffbeb;
+  border-top: 1px solid #fde68a;
+`;
+const ViewerBanner = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 12px 20px;
+  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  color: white;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+  
+  span {
+    opacity: 0.9;
+    font-weight: 400;
+  }
+  
+  @media (max-width: 640px) {
+    padding: 10px 16px;
+    font-size: 13px;
+    gap: 8px;
+  }
+`;
+styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  background: ${(props) => props.$role === "viewer" ? "rgba(59, 130, 246, 0.15)" : props.$role === "owner" ? "rgba(245, 158, 11, 0.15)" : "rgba(16, 185, 129, 0.15)"};
+  color: ${(props) => props.$role === "viewer" ? "#1d4ed8" : props.$role === "owner" ? "#b45309" : "#047857"};
+  border: 1px solid ${(props) => props.$role === "viewer" ? "rgba(59, 130, 246, 0.3)" : props.$role === "owner" ? "rgba(245, 158, 11, 0.3)" : "rgba(16, 185, 129, 0.3)"};
+`;
+styled.div`
+  position: absolute;
+  top: 60px;
+  right: 16px;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+  
+  @media (max-width: 768px) {
+    top: 50px;
+    right: 12px;
+    gap: 6px;
+  }
+  
+  @media (max-width: 480px) {
+    top: auto;
+    bottom: 60px;
+    right: 8px;
+    gap: 4px;
+  }
+`;
+styled.div`
+  background: white;
+  border: 1px solid ${({ $status }) => $status === "connected" ? "rgba(34, 197, 94, 0.3)" : $status === "denied" ? "rgba(239, 68, 68, 0.3)" : "rgba(124, 58, 237, 0.2)"};
+  border-radius: 12px;
+  padding: 10px 14px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  backdrop-filter: blur(8px);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateX(-4px);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
+  }
+  
+  @media (max-width: 640px) {
+    padding: 8px 12px;
+    gap: 8px;
+    border-radius: 10px;
+  }
+  
+  @media (max-width: 480px) {
+    padding: 6px 10px;
+    gap: 6px;
+    border-radius: 8px;
+    
+    &:hover {
+      transform: none;
+    }
+  }
+`;
+styled.div`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: ${({ $status }) => getStatusToken($status).dot};
+  box-shadow: ${({ $status }) => $status === "connected" ? "0 0 0 3px rgba(34, 197, 94, 0.2)" : $status === "denied" ? "0 0 0 3px rgba(239, 68, 68, 0.2)" : "0 0 0 3px rgba(124, 58, 237, 0.15)"};
+  
+  ${({ $status }) => $status === "connected" && css`
+    animation: pulse 2s ease-in-out infinite;
+    
+    @keyframes pulse {
+      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);
+      }
+    }
+  `}
+  
+  @media (max-width: 480px) {
+    width: 8px;
+    height: 8px;
+  }
+`;
+styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+styled.span`
+  font-size: 12px;
+  font-weight: 600;
+  color: ${({ $status }) => getStatusToken($status).color};
+  
+  @media (max-width: 640px) {
+    font-size: 11px;
+  }
+  
+  @media (max-width: 480px) {
+    font-size: 10px;
+  }
+`;
+styled.span`
+  font-size: 10px;
+  color: #94a3b8;
+  
+  @media (max-width: 480px) {
+    display: none;
+  }
+`;
+styled.div`
+  background: white;
+  border: 1px solid rgba(124, 58, 237, 0.15);
+  border-radius: 12px;
+  padding: 8px 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateX(-4px);
+    border-color: rgba(124, 58, 237, 0.3);
+  }
+  
+  @media (max-width: 640px) {
+    padding: 6px 10px;
+    gap: 6px;
+    border-radius: 10px;
+  }
+  
+  @media (max-width: 480px) {
+    padding: 4px 8px;
+    border-radius: 8px;
+    
+    &:hover {
+      transform: none;
+    }
+  }
+`;
+styled.div`
+  display: flex;
+  align-items: center;
+`;
+styled.div`
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: ${({ $color }) => $color || "linear-gradient(135deg, #7C3AED 0%, #a855f7 100%)"};
+  border: 2px solid white;
+  color: white;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: -8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+  cursor: default;
+  position: relative;
+  
+  &:first-child {
+    margin-left: 0;
+  }
+  
+  &:hover {
+    transform: translateY(-2px) scale(1.1);
+    z-index: 10;
+  }
+  
+  @media (max-width: 640px) {
+    width: 24px;
+    height: 24px;
+    font-size: 9px;
+    margin-left: -6px;
+    
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    width: 22px;
+    height: 22px;
+    font-size: 8px;
+    border-width: 1.5px;
+    margin-left: -5px;
+    
+    &:first-child {
+      margin-left: 0;
+    }
+    
+    &:hover {
+      transform: none;
+    }
+    
+    /* Hide tooltip on mobile */
+    &::after {
+      display: none;
+    }
+  }
+  
+  &::after {
+    content: attr(data-name);
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: #1e293b;
+    color: white;
+    font-size: 10px;
+    font-weight: 500;
+    padding: 4px 8px;
+    border-radius: 6px;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.15s ease;
+    pointer-events: none;
+    z-index: 100;
+  }
+  
+  &:hover::after {
+    opacity: 1;
+    visibility: visible;
+  }
+`;
+styled.span`
+  font-size: 11px;
+  color: #64748b;
+  font-weight: 500;
+  white-space: nowrap;
+  
+  @media (max-width: 640px) {
+    font-size: 10px;
+  }
+  
+  @media (max-width: 480px) {
+    display: none;
+  }
+`;
+const Toolbar = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  
+  @media (max-width: 640px) {
+    gap: 2px;
+  }
+`;
+const ToolbarDivider = styled.div`
+  width: 1px;
+  height: 24px;
+  background: ${(props) => props.theme.colors.neutral200};
+  margin: 0 8px;
+  
+  @media (max-width: 768px) {
+    margin: 0 4px;
+    height: 20px;
+  }
+  
+  @media (max-width: 480px) {
+    display: none;
+  }
+`;
+const ToolButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: none;
+  background: ${(props) => props.$active ? "#7C3AED" : "transparent"};
+  color: ${(props) => props.$active ? "white" : props.theme.colors.neutral600};
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  position: relative;
+  flex-shrink: 0;
+  
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+  
+  &:hover {
+    background: ${(props) => props.$active ? "#6d28d9" : props.theme.colors.neutral150};
+    color: ${(props) => props.$active ? "white" : "#7C3AED"};
+    transform: translateY(-1px);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+  
+  &::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: #1e293b;
+    color: white;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 6px 10px;
+    border-radius: 6px;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.15s ease;
+    pointer-events: none;
+    z-index: 100;
+  }
+  
+  &:hover::after {
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  @media (max-width: 768px) {
+    width: 32px;
+    height: 32px;
+    
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+    
+    /* Hide tooltips on mobile - use touch */
+    &::after {
+      display: none;
+    }
+  }
+`;
+const QuickActions = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background: ${(props) => props.theme.colors.neutral0};
+  border-radius: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  flex-wrap: wrap;
+  
+  @media (max-width: 768px) {
+    padding: 3px;
+    gap: 1px;
+  }
+  
+  @media (max-width: 480px) {
+    padding: 2px;
+    border-radius: 8px;
+    
+    /* Hide less essential buttons on mobile */
+    & > button:nth-child(n+6) {
+      display: none;
+    }
+  }
+  
+  @media (max-width: 360px) {
+    /* Show only first 4 buttons on very small screens */
+    & > button:nth-child(n+5) {
+      display: none;
+    }
+  }
+`;
+const EditorContent = styled.div`
+  flex: 1;
+  overflow: visible; /* Allow toolbars/popovers to escape */
+  position: relative;
+  padding: 24px 24px 24px 16px; /* Less left padding since toolbar has its own space */
+  min-height: 200px;
+  
+  ${(props) => props.$isFullscreen && css`
+    padding: clamp(32px, 4vw, 60px);
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    align-self: stretch;
+  `}
+`;
+const EditorWrapper = styled.div`
+  min-height: ${(props) => props.$minHeight - 120}px;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 15px;
+  line-height: 1.7;
+  color: ${(props) => props.theme.colors.neutral800};
+  position: relative;
+  
+  /* ============================================
+     Z-INDEX FIXES FOR DROPDOWNS/POPOVERS
+     ============================================ */
+  
+  /* Main Editor.js container - ensure proper stacking context */
+  .codex-editor {
+    position: relative;
+    z-index: 1;
+  }
+  
+  /* Toolbar - needs to be above content */
+  .ce-toolbar {
+    z-index: 100 !important;
+    position: absolute;
+  }
+  
+  /* Toolbox (+ button dropdown) - keep position relative to toolbar */
+  .ce-toolbox {
+    z-index: 1000 !important;
+  }
+  
+  /* Popover/Dropdown menus - high z-index but keep natural positioning */
+  .ce-popover {
+    z-index: 10000 !important;
+  }
+  
+  .ce-popover--opened {
+    z-index: 10000 !important;
+  }
+  
+  .ce-popover__container {
+    z-index: 10000 !important;
+  }
+  
+  /* Block settings popover */
+  .ce-settings {
+    z-index: 10000 !important;
+  }
+  
+  /* Inline toolbar (bold, italic, etc.) */
+  .ce-inline-toolbar {
+    z-index: 9000 !important;
+  }
+  
+  /* Inline toolbar actions dropdown */
+  .ce-inline-toolbar__dropdown {
+    z-index: 9500 !important;
+  }
+  
+  /* Conversion toolbar */
+  .ce-conversion-toolbar {
+    z-index: 10000 !important;
+  }
+  
+  /* Search field in popovers */
+  .cdx-search-field,
+  .cdx-search-field__input {
+    z-index: 10001 !important;
+  }
+  
+  /* ============================================
+     TOOLBAR INSIDE EDITOR - Position Fix
+     ============================================ */
+  
+  /* Make the redactor (content area) have left padding for toolbar */
+  .codex-editor__redactor {
+    padding-bottom: 100px !important;
+    padding-left: 50px !important; /* Space for toolbar */
+    margin-left: 0 !important;
+  }
+  
+  /* Content blocks - full width within padded area */
+  .ce-block__content {
+    max-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+  
+  /* ============================================
+     BLOCK HOVER EFFECT - Visual feedback
+     ============================================ */
+  .ce-block {
+    position: relative;
+    border-radius: 8px;
+    transition: all 0.15s ease;
+    margin: 2px 0;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: -2px;
+      left: -8px;
+      right: -8px;
+      bottom: -2px;
+      border: 2px solid transparent;
+      border-radius: 8px;
+      pointer-events: none;
+      transition: all 0.15s ease;
+    }
+    
+    &:hover::before {
+      border-color: #e2e8f0;
+      background: rgba(241, 245, 249, 0.3);
+    }
+    
+    /* Selected block - stronger highlight */
+    &--selected::before {
+      border-color: #cbd5e1 !important;
+      background: rgba(203, 213, 225, 0.15) !important;
+    }
+    
+    /* Focused block */
+    &--focused::before {
+      border-color: #7C3AED !important;
+      background: rgba(124, 58, 237, 0.05) !important;
+    }
+  }
+  
+  /* Block content hover - subtle background */
+  .ce-block__content:hover {
+    background: rgba(248, 250, 252, 0.5);
+    border-radius: 6px;
+  }
+  
+  /* Toolbar positioning - inside the editor */
+  .ce-toolbar__content {
+    max-width: 100%;
+    margin-left: 0;
+  }
+  
+  .ce-toolbar {
+    left: 0 !important;
+  }
+  
+  .ce-toolbar__plus {
+    left: 0 !important;
+    position: relative !important;
+  }
+  
+  .ce-toolbar__actions {
+    right: 0 !important;
+    position: absolute !important;
+  }
+  
+  /* Settings button (⋮⋮) */
+  .ce-toolbar__settings-btn {
+    margin-left: 4px;
+  }
+  
+  /* ============================================
+     POPOVER/DROPDOWN STYLING
+     ============================================ */
+  
+  .ce-popover {
+    border-radius: 12px !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
+    border: 1px solid #e2e8f0 !important;
+    overflow: hidden;
+  }
+  
+  .ce-popover__container {
+    background: white !important;
+    border-radius: 12px !important;
+  }
+  
+  .ce-popover__items {
+    padding: 8px !important;
+  }
+  
+  .ce-popover-item {
+    border-radius: 8px !important;
+    padding: 8px 12px !important;
+    margin: 2px 0 !important;
+    transition: all 0.15s ease !important;
+    
+    &:hover {
+      background: #f1f5f9 !important;
+    }
+  }
+  
+  .ce-popover-item__icon {
+    color: #64748b !important;
+    width: 20px !important;
+    height: 20px !important;
+    margin-right: 10px !important;
+  }
+  
+  .ce-popover-item__title {
+    font-weight: 500 !important;
+    color: #334155 !important;
+  }
+  
+  .ce-popover-item--focused {
+    background: #ede9fe !important;
+    
+    .ce-popover-item__icon {
+      color: #7C3AED !important;
+    }
+    
+    .ce-popover-item__title {
+      color: #7C3AED !important;
+    }
+  }
+  
+  /* Search field in popover */
+  .cdx-search-field {
+    margin: 8px !important;
+    border-radius: 8px !important;
+    border: 1px solid #e2e8f0 !important;
+    background: #f8fafc !important;
+    
+    &:focus-within {
+      border-color: #7C3AED !important;
+      box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
+    }
+  }
+  
+  .cdx-search-field__input {
+    font-size: 14px !important;
+    color: #334155 !important;
+    
+    &::placeholder {
+      color: #94a3b8 !important;
+    }
+  }
+  
+  /* Separator in popover */
+  .ce-popover__item-separator {
+    margin: 8px !important;
+    background: #e2e8f0 !important;
+  }
+  
+  /* ============================================
+     INDENT TUNE FIX
+     ============================================ */
+  
+  /* Indent tune container */
+  .ce-popover-item[data-item-name="indentTune"],
+  .ce-popover-item[data-item-name="indent"] {
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+    padding: 4px 8px !important;
+  }
+  
+  /* Indent tune wrapper - force horizontal layout */
+  .indent-tune,
+  [class*="indent-tune"],
+  .ce-popover-item__custom-html {
+    display: flex !important;
+    align-items: center !important;
+    gap: 4px !important;
+  }
+  
+  /* Indent buttons */
+  .indent-tune__button,
+  .indent-tune button,
+  [class*="indent"] button {
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 6px !important;
+    background: white !important;
+    cursor: pointer !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    transition: all 0.15s ease !important;
+    pointer-events: auto !important;
+    position: relative !important;
+    z-index: 10 !important;
+    
+    &:hover {
+      background: #f1f5f9 !important;
+      border-color: #7C3AED !important;
+    }
+    
+    &:active {
+      background: #ede9fe !important;
+      transform: scale(0.95) !important;
+    }
+  }
+  
+  /* Indent button icons */
+  .indent-tune__button svg,
+  .indent-tune button svg,
+  [class*="indent"] button svg {
+    width: 16px !important;
+    height: 16px !important;
+    color: #64748b !important;
+  }
+  
+  /* Indent label */
+  .indent-tune__label,
+  .indent-tune span:not(:empty) {
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    color: #334155 !important;
+    margin: 0 4px !important;
+  }
+  
+  /* ============================================
+     ALIGNMENT TUNE FIX  
+     ============================================ */
+  
+  .ce-popover-item[data-item-name="alignmentTune"],
+  .ce-popover-item[data-item-name="alignment"] {
+    display: flex !important;
+    align-items: center !important;
+    gap: 4px !important;
+    padding: 4px 8px !important;
+  }
+  
+  .alignment-tune,
+  [class*="alignment-tune"],
+  [class*="text-alignment"] {
+    display: flex !important;
+    align-items: center !important;
+    gap: 2px !important;
+  }
+  
+  .alignment-tune button,
+  [class*="alignment"] button,
+  [class*="text-alignment"] button {
+    width: 28px !important;
+    height: 28px !important;
+    min-width: 28px !important;
+    border: 1px solid transparent !important;
+    border-radius: 4px !important;
+    background: transparent !important;
+    cursor: pointer !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    transition: all 0.15s ease !important;
+    pointer-events: auto !important;
+    
+    &:hover {
+      background: #f1f5f9 !important;
+    }
+    
+    &.active,
+    &[class*="active"] {
+      background: #ede9fe !important;
+      border-color: #7C3AED !important;
+    }
+  }
+  
+  .alignment-tune button svg,
+  [class*="alignment"] button svg {
+    width: 16px !important;
+    height: 16px !important;
+    color: #64748b !important;
+  }
+  
+  /* Remote user editing highlight - subtle background only, cursor shown separately */
+  .ce-block--remote-editing {
+    position: relative;
+    background: rgba(59, 130, 246, 0.04);
+    border-radius: 4px;
+    transition: background 0.2s ease;
+  }
+  
+  /* Typing indicator animation */
+  .typing-indicator .dot {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0.7;
+    animation: typingBounce 1.4s ease-in-out infinite;
+  }
+  
+  .typing-indicator .dot:nth-child(1) {
+    animation-delay: 0s;
+  }
+  
+  .typing-indicator .dot:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  
+  .typing-indicator .dot:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+  
+  @keyframes typingBounce {
+    0%, 60%, 100% {
+      transform: translateY(0);
+      opacity: 0.4;
+    }
+    30% {
+      transform: translateY(-3px);
+      opacity: 1;
+    }
+  }
+  
+  /* Remote cursor pulse animation */
+  .remote-cursor-indicator {
+    animation: cursorPulse 1.5s ease-in-out infinite;
+  }
+  
+  @keyframes cursorPulse {
+    0%, 100% {
+      opacity: 1;
+      box-shadow: 0 0 8px currentColor;
+    }
+    50% {
+      opacity: 0.7;
+      box-shadow: 0 0 12px currentColor;
+    }
+  }
+`;
+const EmptyState = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  pointer-events: none;
+`;
+const EmptyIcon = styled.div`
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 20px;
+  background: linear-gradient(135deg, #f0f4ff 0%, #e8ecff 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: float 4s ease-in-out infinite;
+  
+  svg {
+    width: 48px;
+    height: 48px;
+    color: #a5b4fc;
+  }
+  
+  @keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+  }
+  
+  @media (max-width: 480px) {
+    width: 72px;
+    height: 72px;
+    margin: 0 auto 16px;
+    
+    svg {
+      width: 32px;
+      height: 32px;
+    }
+  }
+`;
+const EmptyTitle = styled.h3`
+  font-size: 18px;
+  font-weight: 600;
+  color: #64748b;
+  margin: 0 0 8px 0;
+  
+  @media (max-width: 480px) {
+    font-size: 16px;
+  }
+`;
+const EmptySubtitle = styled.p`
+  font-size: 14px;
+  color: #94a3b8;
+  margin: 0 0 20px 0;
+  
+  @media (max-width: 480px) {
+    font-size: 12px;
+    margin: 0 0 16px 0;
+    padding: 0 16px;
+  }
+`;
+const KeyboardHints = styled.div`
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+  
+  @media (max-width: 640px) {
+    gap: 10px;
+  }
+  
+  @media (max-width: 480px) {
+    display: none; /* Hide keyboard hints on mobile - not useful for touch */
+  }
+`;
+const KeyHint = styled.span`
+  font-size: 12px;
+  color: #94a3b8;
+  
+  kbd {
+    display: inline-block;
+    padding: 2px 8px;
+    background: #f1f5f9;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 11px;
+    color: #475569;
+    margin-right: 4px;
+    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
+  }
+  
+  @media (max-width: 640px) {
+    font-size: 10px;
+    
+    kbd {
+      padding: 2px 6px;
+      font-size: 9px;
+    }
+  }
+`;
+const EditorFooter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: ${(props) => props.theme.colors.neutral100};
+  border-top: 1px solid ${(props) => props.theme.colors.neutral150};
+  flex-shrink: 0;
+  border-radius: 0 0 16px 16px;
+  gap: 8px;
+  flex-wrap: wrap;
+  
+  @media (max-width: 640px) {
+    padding: 8px 12px;
+  }
+  
+  @media (max-width: 480px) {
+    padding: 8px 10px;
+    gap: 6px;
+  }
+`;
+const FooterLeft = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  
+  @media (max-width: 640px) {
+    gap: 12px;
+  }
+  
+  @media (max-width: 480px) {
+    gap: 8px;
+  }
+`;
+const FooterStat = styled.span`
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.neutral500};
+  white-space: nowrap;
+  
+  strong {
+    color: ${(props) => props.theme.colors.neutral700};
+    font-weight: 600;
+  }
+  
+  @media (max-width: 640px) {
+    font-size: 11px;
+  }
+  
+  @media (max-width: 480px) {
+    font-size: 10px;
+  }
+`;
+const FooterRight = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  @media (max-width: 640px) {
+    gap: 6px;
+  }
+`;
+const FooterButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  background: ${(props) => props.$primary ? "linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%)" : props.theme.colors.neutral0};
+  border: 1px solid ${(props) => props.$primary ? "transparent" : props.theme.colors.neutral200};
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: ${(props) => props.$primary ? "white" : props.theme.colors.neutral600};
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+  
+  &:hover {
+    background: ${(props) => props.$primary ? "linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%)" : "#f8fafc"};
+    border-color: ${(props) => props.$primary ? "transparent" : "#7C3AED"};
+    color: ${(props) => props.$primary ? "white" : "#7C3AED"};
+    transform: translateY(-1px);
+    box-shadow: ${(props) => props.$primary ? "0 4px 12px rgba(124, 58, 237, 0.3)" : "none"};
+  }
+  
+  @media (max-width: 640px) {
+    padding: 5px 10px;
+    font-size: 11px;
+    gap: 4px;
+    
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    padding: 4px 8px;
+    font-size: 10px;
+    border-radius: 6px;
+    
+    /* Hide text on very small screens, show only icon */
+    & > span {
+      display: none;
+    }
+  }
+`;
+const LoadingOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  z-index: 10;
+`;
+const LoadingText = styled.span`
+  font-size: 13px;
+  color: #64748b;
+`;
+const ResizeHandle = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 16px;
+  cursor: ns-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  &::before {
+    content: '';
+    width: 40px;
+    height: 4px;
+    background: #e2e8f0;
+    border-radius: 2px;
+    transition: background 0.15s ease;
+  }
+  
+  &:hover::before {
+    background: #7C3AED;
+  }
+`;
+styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 100;
+  overflow: hidden;
+`;
+styled.div`
+  position: absolute;
+  pointer-events: none;
+  transition: all 0.15s ease-out;
+  z-index: 100;
+`;
+styled.div`
+  width: 2px;
+  height: 20px;
+  background: ${(props) => props.$color || "#3B82F6"};
+  border-radius: 1px;
+  box-shadow: 0 0 4px ${(props) => props.$color || "#3B82F6"}40;
+  animation: cursorBlink 1s ease-in-out infinite;
+  
+  @keyframes cursorBlink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+  }
+`;
+styled.div`
+  position: absolute;
+  top: -22px;
+  left: 0;
+  background: ${(props) => props.$bgColor || "#3B82F6"};
+  color: ${(props) => props.$textColor || "#FFFFFF"};
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 4px 4px 4px 0;
+  white-space: nowrap;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  transform-origin: bottom left;
+  animation: cursorLabelFadeIn 0.2s ease-out;
+  
+  @keyframes cursorLabelFadeIn {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+`;
+styled.div`
+  position: absolute;
+  background: ${(props) => props.$color || "#3B82F6"}20;
+  border: 1px solid ${(props) => props.$color || "#3B82F6"}40;
+  border-radius: 2px;
+  pointer-events: none;
+`;
+const ActiveEditorsBar = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
+  border-bottom: 1px solid #e2e8f0;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  
+  @media (max-width: 640px) {
+    padding: 6px 12px;
+    gap: 6px;
+  }
+  
+  @media (max-width: 480px) {
+    padding: 6px 10px;
+    gap: 4px;
+  }
+`;
+const ActiveEditorBadge = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background: white;
+  border: 1px solid ${(props) => props.$color || "#e2e8f0"};
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #374151;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  @media (max-width: 640px) {
+    padding: 3px 8px;
+    font-size: 10px;
+    gap: 4px;
+  }
+  
+  @media (max-width: 480px) {
+    /* Hide "Block X" info on mobile */
+    & > span:last-child {
+      display: none;
+    }
+  }
+`;
+const ActiveEditorDot = styled.span`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: ${(props) => props.$color || "#3B82F6"};
+  box-shadow: 0 0 0 2px ${(props) => props.$color || "#3B82F6"}30;
+  animation: pulse 2s ease-in-out infinite;
+  flex-shrink: 0;
+  
+  @keyframes pulse {
+    0%, 100% { box-shadow: 0 0 0 2px ${(props) => props.$color || "#3B82F6"}30; }
+    50% { box-shadow: 0 0 0 4px ${(props) => props.$color || "#3B82F6"}20; }
+  }
+  
+  @media (max-width: 480px) {
+    width: 6px;
+    height: 6px;
+  }
+`;
+const ActiveEditorsLabel = styled.span`
+  font-size: 11px;
+  color: #64748b;
+  font-weight: 500;
+  white-space: nowrap;
+  
+  @media (max-width: 640px) {
+    font-size: 10px;
+  }
+  
+  @media (max-width: 480px) {
+    display: none;
+  }
+`;
+const buildRoomId = (fieldName, documentId = null) => {
+  if (typeof window === "undefined") {
+    return `ssr|${fieldName}`;
+  }
+  const path = window.location.pathname;
+  const matches = path.match(/content-manager\/(collection-types|single-types)\/([^/]+)(?:\/([^/?]+))?/);
+  const contentType = matches?.[2] ? decodeURIComponent(matches[2]) : "unknown";
+  const urlDocumentId = matches?.[3] || null;
+  let docId = documentId || urlDocumentId;
+  if (!docId) {
+    docId = matches?.[1] === "single-types" ? "single" : "new";
+  }
+  const roomId = `${contentType}|${docId}|${fieldName}`;
+  console.log("[Magic Editor X] buildRoomId:", { contentType, documentId: docId, fieldName, roomId });
+  return roomId;
+};
+const getPeerName = (user = {}) => {
+  if (user.firstname || user.lastname) {
+    return `${user.firstname || ""} ${user.lastname || ""}`.trim();
+  }
+  return user.email?.split("@")[0] || "Anonymous";
+};
+const Editor = forwardRef(({
+  name,
+  value,
+  onChange,
+  attribute,
+  disabled,
+  error,
+  required,
+  hint,
+  label,
+  labelAction,
+  placeholder,
+  ...props
+}, ref) => {
+  const { formatMessage } = useIntl();
+  const t = (id, defaultMessage) => formatMessage({ id: getTranslation(id), defaultMessage });
+  const { licenseData } = useLicense();
+  const editorRef = useRef(null);
+  const editorInstanceRef = useRef(null);
+  const containerRef = useRef(null);
+  const isReadyRef = useRef(false);
+  const [isReady, setIsReady] = useState(false);
+  const [showCreditsModal, setShowCreditsModal] = useState(false);
+  const [creditsUpgradeInfo, setCreditsUpgradeInfo] = useState(null);
+  const { handleAIAction } = useAIActions({
+    licenseKey: licenseData?.licenseKey,
+    editorInstanceRef,
+    isReady,
+    onNoCredits: (upgradeInfo) => {
+      setCreditsUpgradeInfo(upgradeInfo);
+      setShowCreditsModal(true);
+    }
+  });
+  useEffect(() => {
+    if (licenseData?.licenseKey) {
+      window.__MAGIC_EDITOR_LICENSE_KEY__ = licenseData.licenseKey;
+    }
+    return () => {
+      delete window.__MAGIC_EDITOR_LICENSE_KEY__;
+    };
+  }, [licenseData?.licenseKey]);
+  const [blocksCount, setBlocksCount] = useState(0);
+  const [wordCount, setWordCount] = useState(0);
+  const [charCount, setCharCount] = useState(0);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [editorHeight, setEditorHeight] = useState(400);
+  const [mediaLibBlockIndex, setMediaLibBlockIndex] = useState(-1);
+  const [isMediaLibOpen, setIsMediaLibOpen] = useState(false);
+  const [showAIPopup, setShowAIPopup] = useState(false);
+  const [showAIToolbar, setShowAIToolbar] = useState(false);
+  const [aiToolbarPosition, setAIToolbarPosition] = useState({ top: 0, left: 0 });
+  const [aiSelectedText, setAISelectedText] = useState("");
+  const aiSelectionRangeRef = useRef(null);
+  const [aiLoading, setAILoading] = useState(false);
+  const serializedInitialValue = useMemo(() => {
+    if (!value) {
+      return "";
+    }
+    return typeof value === "string" ? value : JSON.stringify(value);
+  }, [value]);
+  const serializeForCompare = useCallback((payload) => {
+    if (!payload) return "";
+    try {
+      const dataObj = typeof payload === "string" ? JSON.parse(payload) : payload;
+      if (!dataObj || typeof dataObj !== "object") return "";
+      const clone = { ...dataObj };
+      if ("time" in clone) {
+        clone.time = 0;
+      }
+      return JSON.stringify(clone);
+    } catch (err) {
+      console.warn("[Magic Editor X] [COMPARE] Failed to normalize payload", err?.message);
+      return "";
+    }
+  }, []);
+  const collabRoomId = useMemo(() => buildRoomId(name), [name]);
+  const collabEnabled = (attribute?.options?.collaboration?.enabled ?? true) && !disabled;
+  const renderFromYDocRef = useRef(null);
+  const {
+    doc: yDoc,
+    blocksMap: yBlocksMap,
+    metaMap: yMetaMap,
+    status: collabStatus,
+    error: collabError,
+    peers: collabPeers,
+    awareness: collabAwareness,
+    emitAwareness,
+    collabRole,
+    canEdit: collabCanEdit
+  } = useMagicCollaboration({
+    enabled: collabEnabled,
+    roomId: collabRoomId,
+    fieldName: name,
+    initialValue: serializedInitialValue || "",
+    onRemoteUpdate: () => {
+      console.log("[Magic Editor X] [CALLBACK] onRemoteUpdate callback received");
+      if (renderFromYDocRef.current) {
+        renderFromYDocRef.current();
+      }
+    }
+  });
+  useMemo(() => {
+    switch (collabRole) {
+      case "viewer":
+        return { icon: "V", text: "Viewer", color: "#3b82f6" };
+      case "editor":
+        return { icon: "E", text: "Editor", color: "#10b981" };
+      case "owner":
+        return { icon: "O", text: "Owner", color: "#f59e0b" };
+      default:
+        return null;
+    }
+  }, [collabRole]);
+  useMemo(() => {
+    switch (collabStatus) {
+      case "connected":
+        if (collabRole === "viewer") {
+          return "Nur Lesen";
+        }
+        if (collabRole === "owner") {
+          return "Live Sync";
+        }
+        return "Live Sync";
+      case "connecting":
+        return "Verbinde...";
+      case "requesting":
+        return "Freigabe pruefen";
+      case "denied":
+        return "Freigabe gesperrt";
+      case "disconnected":
+        return "Neu verbinden";
+      case "disabled":
+        return "Sync aus";
+      default:
+        return "Bereit";
+    }
+  }, [collabStatus, collabRole]);
+  useMemo(() => collabPeers.slice(0, 3), [collabPeers]);
+  const activeEditors = useMemo(() => {
+    return Object.values(collabAwareness || {}).filter(
+      (entry) => entry?.user && Date.now() - entry.lastUpdate < 3e4
+    );
+  }, [collabAwareness]);
+  const lastCursorUpdateRef = useRef(0);
+  const lastEmittedPositionRef = useRef(null);
+  const getAbsoluteOffset = useCallback((container, node, offset) => {
+    if (!container || !node) return 0;
+    let absoluteOffset = 0;
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null, false);
+    let currentNode = walker.nextNode();
+    while (currentNode) {
+      if (currentNode === node) {
+        return absoluteOffset + offset;
+      }
+      absoluteOffset += currentNode.textContent?.length || 0;
+      currentNode = walker.nextNode();
+    }
+    return absoluteOffset + offset;
+  }, []);
+  const emitCursorPosition = useCallback(() => {
+    if (!collabEnabled || !emitAwareness || collabStatus !== "connected") {
+      return;
+    }
+    const now = Date.now();
+    if (now - lastCursorUpdateRef.current < 200) {
+      return;
+    }
+    if (!editorInstanceRef.current) {
+      return;
+    }
+    try {
+      const currentBlockIndex = editorInstanceRef.current.blocks.getCurrentBlockIndex();
+      if (currentBlockIndex < 0) {
+        return;
+      }
+      const currentBlock = editorInstanceRef.current.blocks.getBlockByIndex(currentBlockIndex);
+      const blockId = currentBlock?.id || null;
+      const selection = window.getSelection();
+      let selectionInfo = null;
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        const blocks = editorRef.current?.querySelectorAll(".ce-block");
+        const targetBlock = blocks?.[currentBlockIndex];
+        const contentContainer = targetBlock?.querySelector(
+          '.ce-paragraph, .ce-header, [contenteditable="true"], .cdx-block'
+        );
+        const absoluteStart = contentContainer ? getAbsoluteOffset(contentContainer, range.startContainer, range.startOffset) : range.startOffset;
+        const absoluteEnd = contentContainer ? getAbsoluteOffset(contentContainer, range.endContainer, range.endOffset) : range.endOffset;
+        selectionInfo = {
+          collapsed: selection.isCollapsed,
+          startOffset: absoluteStart,
+          endOffset: absoluteEnd
+        };
+      }
+      const newPosition = JSON.stringify({ blockIndex: currentBlockIndex, blockId, selection: selectionInfo });
+      if (newPosition === lastEmittedPositionRef.current) {
+        return;
+      }
+      lastCursorUpdateRef.current = now;
+      lastEmittedPositionRef.current = newPosition;
+      emitAwareness({
+        blockIndex: currentBlockIndex,
+        blockId,
+        selection: selectionInfo,
+        timestamp: now
+      });
+    } catch (err) {
+    }
+  }, [collabEnabled, emitAwareness, collabStatus, getAbsoluteOffset]);
+  useEffect(() => {
+    if (!collabEnabled || !editorRef.current) {
+      return void 0;
+    }
+    const editorElement = editorRef.current;
+    const handleInteraction = () => {
+      emitCursorPosition();
+    };
+    editorElement.addEventListener("click", handleInteraction);
+    editorElement.addEventListener("keyup", handleInteraction);
+    editorElement.addEventListener("keydown", handleInteraction);
+    editorElement.addEventListener("input", handleInteraction);
+    editorElement.addEventListener("mouseup", handleInteraction);
+    editorElement.addEventListener("selectionchange", handleInteraction);
+    let intervalId = null;
+    const handleFocus = () => {
+      intervalId = setInterval(emitCursorPosition, 1e3);
+    };
+    const handleBlur = () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+    };
+    editorElement.addEventListener("focusin", handleFocus);
+    editorElement.addEventListener("focusout", handleBlur);
+    return () => {
+      editorElement.removeEventListener("click", handleInteraction);
+      editorElement.removeEventListener("keyup", handleInteraction);
+      editorElement.removeEventListener("keydown", handleInteraction);
+      editorElement.removeEventListener("input", handleInteraction);
+      editorElement.removeEventListener("mouseup", handleInteraction);
+      editorElement.removeEventListener("selectionchange", handleInteraction);
+      editorElement.removeEventListener("focusin", handleFocus);
+      editorElement.removeEventListener("focusout", handleBlur);
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [collabEnabled, emitCursorPosition]);
+  const findTextPosition = useCallback((container, targetOffset) => {
+    if (!container || targetOffset === null || targetOffset === void 0) {
+      return null;
+    }
+    let currentOffset = 0;
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null, false);
+    let node = walker.nextNode();
+    while (node) {
+      const nodeLength = node.textContent?.length || 0;
+      if (currentOffset + nodeLength >= targetOffset) {
+        return {
+          node,
+          offset: targetOffset - currentOffset,
+          rect: (() => {
+            try {
+              const range = document.createRange();
+              range.setStart(node, Math.min(targetOffset - currentOffset, nodeLength));
+              range.setEnd(node, Math.min(targetOffset - currentOffset, nodeLength));
+              return range.getBoundingClientRect();
+            } catch {
+              return null;
+            }
+          })()
+        };
+      }
+      currentOffset += nodeLength;
+      node = walker.nextNode();
+    }
+    return null;
+  }, []);
+  useRef(null);
+  useEffect(() => {
+    if (!collabEnabled || !editorRef.current || !isReady) {
+      return void 0;
+    }
+    const editorElement = editorRef.current;
+    const previousHighlights = editorElement.querySelectorAll(".ce-block--remote-editing");
+    previousHighlights.forEach((el) => {
+      el.classList.remove("ce-block--remote-editing");
+      el.removeAttribute("data-remote-user");
+      el.style.removeProperty("--remote-color");
+    });
+    const previousCursors = editorElement.querySelectorAll(".remote-cursor-indicator");
+    previousCursors.forEach((el) => el.remove());
+    activeEditors.forEach((editor) => {
+      if (editor.blockIndex === null || editor.blockIndex === void 0) {
+        return;
+      }
+      const blocks = editorElement.querySelectorAll(".ce-block");
+      const targetBlock = blocks[editor.blockIndex];
+      if (!targetBlock) {
+        return;
+      }
+      targetBlock.classList.add("ce-block--remote-editing");
+      targetBlock.setAttribute("data-remote-user", getPeerName(editor.user));
+      targetBlock.style.setProperty("--remote-color", editor.color?.bg || "#3B82F6");
+      const contentElement = targetBlock.querySelector(
+        '.ce-paragraph, .ce-header, [contenteditable="true"], .cdx-block'
+      );
+      if (!contentElement) {
+        return;
+      }
+      let position = null;
+      if (editor.selection?.startOffset !== void 0 && editor.selection.startOffset >= 0) {
+        position = findTextPosition(contentElement, editor.selection.startOffset);
+      }
+      const editorRect = editorElement.getBoundingClientRect();
+      const contentRect = contentElement.getBoundingClientRect();
+      let cursorLeft, cursorTop;
+      if (position?.rect && position.rect.width !== void 0) {
+        cursorLeft = position.rect.left - editorRect.left;
+        cursorTop = position.rect.top - editorRect.top;
+      } else {
+        cursorLeft = contentRect.left - editorRect.left;
+        cursorTop = contentRect.top - editorRect.top;
+      }
+      if (isNaN(cursorLeft) || isNaN(cursorTop) || cursorLeft < 0) {
+        cursorLeft = contentRect.left - editorRect.left;
+        cursorTop = contentRect.top - editorRect.top;
+      }
+      const cursorIndicator = document.createElement("div");
+      cursorIndicator.className = "remote-cursor-indicator";
+      cursorIndicator.dataset.userId = editor.user.id;
+      cursorIndicator.style.cssText = `
+        position: absolute;
+        left: ${cursorLeft}px;
+        top: ${cursorTop}px;
+        width: 2px;
+        height: 18px;
+        background: ${editor.color?.bg || "#3B82F6"};
+        border-radius: 1px;
+        pointer-events: none;
+        z-index: 1000;
+        transition: left 0.05s linear, top 0.08s ease-out;
+        box-shadow: 0 0 8px ${editor.color?.bg || "#3B82F6"}60;
+      `;
+      const cursorLabel = document.createElement("div");
+      cursorLabel.className = "remote-cursor-label";
+      cursorLabel.style.cssText = `
+        position: absolute;
+        top: -20px;
+        left: 0;
+        background: ${editor.color?.bg || "#3B82F6"};
+        color: ${editor.color?.text || "#FFFFFF"};
+        font-size: 9px;
+        font-weight: 600;
+        padding: 3px 8px;
+        border-radius: 4px 4px 4px 0;
+        white-space: nowrap;
+        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      `;
+      const nameSpan = document.createElement("span");
+      nameSpan.textContent = getPeerName(editor.user);
+      cursorLabel.appendChild(nameSpan);
+      const typingDots = document.createElement("span");
+      typingDots.className = "typing-indicator";
+      typingDots.innerHTML = `
+        <span class="dot"></span>
+        <span class="dot"></span>
+        <span class="dot"></span>
+      `;
+      typingDots.style.cssText = `
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        margin-left: 2px;
+      `;
+      cursorLabel.appendChild(typingDots);
+      cursorIndicator.appendChild(cursorLabel);
+      requestAnimationFrame(() => {
+        editorElement.appendChild(cursorIndicator);
+      });
+    });
+    return () => {
+      const cursors = editorElement?.querySelectorAll(".remote-cursor-indicator");
+      cursors?.forEach((el) => el.remove());
+    };
+  }, [collabEnabled, activeEditors, isReady, findTextPosition]);
+  useEffect(() => {
+    const state = {
+      status: collabStatus,
+      peers: collabPeers,
+      error: collabError
+    };
+    window.__MAGIC_EDITOR_COLLAB_STATE__ = state;
+    window.dispatchEvent(new CustomEvent("magic-editor-collab-update", {
+      detail: state
+    }));
+    return () => {
+      window.__MAGIC_EDITOR_COLLAB_STATE__ = { status: "disabled", peers: [], error: null };
+      window.dispatchEvent(new CustomEvent("magic-editor-collab-update", {
+        detail: { status: "disabled", peers: [], error: null }
+      }));
+    };
+  }, [collabStatus, collabPeers, collabError]);
+  const isApplyingRemoteRef = useRef(false);
+  const pendingRenderRef = useRef(null);
+  const lastSerializedValueRef = useRef(serializeForCompare(serializedInitialValue || null));
+  useEffect(() => {
+    lastSerializedValueRef.current = serializeForCompare(serializedInitialValue || null);
+  }, [serializedInitialValue, serializeForCompare]);
+  const calculateStats = useCallback((data) => {
+    if (!data?.blocks) {
+      setWordCount(0);
+      setCharCount(0);
+      return;
+    }
+    let text = "";
+    data.blocks.forEach((block) => {
+      if (block.data?.text) text += block.data.text + " ";
+      if (block.data?.items) {
+        block.data.items.forEach((item) => {
+          if (typeof item === "string") text += item + " ";
+          else if (item.content) text += item.content + " ";
+        });
+      }
+    });
+    const plainText = text.replace(/<[^>]*>/g, "").trim();
+    setCharCount(plainText.length);
+    setWordCount(plainText.split(/\s+/).filter((w) => w.length > 0).length);
+  }, []);
+  const renderFromYDoc = useCallback(async () => {
+    fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:entry", message: "renderFromYDoc called", data: { collabEnabled, hasYBlocksMap: !!yBlocksMap, hasYDoc: !!yDoc, hasYMetaMap: !!yMetaMap }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "A" }) }).catch(() => {
+    });
+    if (!collabEnabled || !yBlocksMap || !yDoc) {
+      fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:guard1", message: "EARLY EXIT: missing collab deps", data: { collabEnabled, hasYBlocksMap: !!yBlocksMap, hasYDoc: !!yDoc }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "A" }) }).catch(() => {
+      });
+      return;
+    }
+    const editor = editorInstanceRef.current;
+    if (!editor || !isReadyRef.current) {
+      fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:guard2", message: "EARLY EXIT: editor not ready", data: { hasEditor: !!editor, isReady: isReadyRef.current }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "D" }) }).catch(() => {
+      });
+      pendingRenderRef.current = pendingRenderRef.current || true;
+      return;
+    }
+    if (isApplyingRemoteRef.current) {
+      fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:guard3", message: "EARLY EXIT: isApplyingRemote is true (race condition)", data: { isApplyingRemote: true }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "B" }) }).catch(() => {
+      });
+      return;
+    }
+    isApplyingRemoteRef.current = true;
+    try {
+      let yOrder = [];
+      const blockOrderJson = yMetaMap?.get("blockOrder");
+      if (blockOrderJson) {
+        try {
+          yOrder = JSON.parse(blockOrderJson);
+        } catch (e) {
+          console.warn("[Magic Editor X] Invalid blockOrder JSON, falling back to Map keys");
+          yOrder = Array.from(yBlocksMap.keys());
+        }
+      } else {
+        yOrder = Array.from(yBlocksMap.keys());
+      }
+      const yBlocks = [];
+      fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:yState", message: "Y.js state before parsing", data: { blockOrderFromMeta: !!blockOrderJson, yBlocksMapSize: yBlocksMap?.size, yOrder, yBlocksMapKeys: Array.from(yBlocksMap?.keys() || []) }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "C" }) }).catch(() => {
+      });
+      yOrder.forEach((id) => {
+        const json = yBlocksMap.get(id);
+        if (json) {
+          try {
+            const block = JSON.parse(json);
+            yBlocks.push(block);
+          } catch (e) {
+            console.warn("[Magic Editor X] Invalid block JSON:", id);
+          }
+        }
+      });
+      fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:parsed", message: "Parsed yBlocks from Y.Map", data: { yBlocksCount: yBlocks.length, yBlockIds: yBlocks.map((b) => b.id), yBlockTypes: yBlocks.map((b) => b.type) }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "A" }) }).catch(() => {
+      });
+      const parsed = { blocks: yBlocks };
+      const normalizedParsed = serializeForCompare(parsed);
+      const renderFull = async () => {
+        fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFull:start", message: "FULL RENDER triggered", data: { blocksToRender: yBlocks.length, blockIds: yBlocks.map((b) => b.id) }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "E" }) }).catch(() => {
+        });
+        await editor.render(parsed);
+        fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFull:done", message: "FULL RENDER completed", data: { newBlockCount: editor.blocks.getBlocksCount() }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "E" }) }).catch(() => {
+        });
+        lastSerializedValueRef.current = normalizedParsed;
+        setBlocksCount(yBlocks.length);
+        calculateStats(parsed);
+      };
+      const blockCount = editor.blocks.getBlocksCount();
+      const currentBlocks = [];
+      for (let i = 0; i < blockCount; i++) {
+        const block = editor.blocks.getBlockByIndex(i);
+        if (block) {
+          currentBlocks.push({ id: block.id, index: i });
+        }
+      }
+      fetch("http://127.0.0.1:7242/ingest/12c1170b-f275-4a73-9ee7-3006bf7f0881", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "EditorJS/index.jsx:renderFromYDoc:comparison", message: "Comparing editor vs Y.js state", data: { editorBlockCount: blockCount, yBlocksCount: yBlocks.length, editorBlockIds: currentBlocks.map((b) => b.id), yBlockIds: yBlocks.map((b) => b.id) }, timestamp: Date.now(), sessionId: "debug-session", hypothesisId: "E" }) }).catch(() => {
+      });
+      if (blockCount !== yBlocks.length) {
+        console.log("[Magic Editor X] [SYNC] Structural change detected (count mismatch). Falling back to full render.");
+        await renderFull();
+        return;
+      }
+      const targetIds = yBlocks.map((b) => b.id);
+      const orderMatches = targetIds.every((id, idx) => currentBlocks[idx]?.id === id);
+      const allIdsPresent = targetIds.every((id) => yBlocksMap.has(id));
+      if (!orderMatches || !allIdsPresent) {
+        console.log("[Magic Editor X] [SYNC] Order mismatch detected. Falling back to full render.");
+        await renderFull();
+        return;
+      }
+      const activeBlockIndex = editor.blocks.getCurrentBlockIndex();
+      for (let i = 0; i < yBlocks.length; i++) {
+        const targetBlock = yBlocks[i];
+        const currentBlock = editor.blocks.getBlockByIndex(i);
+        if (!currentBlock || currentBlock.id !== targetBlock.id) {
+          console.log("[Magic Editor X] [SYNC] Unexpected block mismatch during update, rerendering.");
+          await renderFull();
+          return;
+        }
+        if (activeBlockIndex === i) {
+          continue;
+        }
+        try {
+          editor.blocks.update(targetBlock.id, targetBlock.data);
+        } catch (e) {
+          console.warn("[Magic Editor X] [SYNC] Block update failed, rerendering:", targetBlock.id, e);
+          await renderFull();
+          return;
+        }
+      }
+      lastSerializedValueRef.current = normalizedParsed;
+      setBlocksCount(yBlocks.length);
+      calculateStats(parsed);
+    } catch (error2) {
+      console.error("[Magic Editor X] [SYNC] Error in smart sync:", error2);
+    } finally {
+      isApplyingRemoteRef.current = false;
+    }
+  }, [collabEnabled, yBlocksMap, yDoc, yMetaMap]);
+  useEffect(() => {
+    renderFromYDocRef.current = renderFromYDoc;
+  }, [renderFromYDoc]);
+  const pushLocalToCollab = useCallback((payload) => {
+    console.log("[Magic Editor X] [PUSH] pushLocalToCollab called, enabled:", collabEnabled, "yDoc:", !!yDoc, "yBlocksMap:", !!yBlocksMap);
+    if (!collabEnabled || !yDoc || !yBlocksMap) {
+      console.log("[Magic Editor X] [SKIP] Skipping push - not enabled or missing yDoc/yBlocksMap");
+      return;
+    }
+    try {
+      const data = JSON.parse(payload);
+      const blocks = data?.blocks || [];
+      const time = data?.time || Date.now();
+      console.log("[Magic Editor X] [DOC] Pushing", blocks.length, "blocks to Y.Map");
+      yDoc.transact(() => {
+        const uniqueBlocks = [];
+        const currentBlockIds = /* @__PURE__ */ new Set();
+        for (const block of blocks) {
+          if (!block?.id) {
+            console.warn("[Magic Editor X] [WARNING] Block without ID, skipping");
+            continue;
+          }
+          if (currentBlockIds.has(block.id)) {
+            console.warn("[Magic Editor X] [WARNING] Duplicate block ID detected, keeping first occurrence:", block.id);
+            continue;
+          }
+          currentBlockIds.add(block.id);
+          uniqueBlocks.push(block);
+        }
+        for (const block of uniqueBlocks) {
+          const blockJson = JSON.stringify(block);
+          const existing = yBlocksMap.get(block.id);
+          if (existing !== blockJson) {
+            yBlocksMap.set(block.id, blockJson);
+          }
+        }
+        if (yMetaMap) {
+          yMetaMap.set("time", time);
+          const newOrder = uniqueBlocks.map((b) => b.id);
+          yMetaMap.set("blockOrder", JSON.stringify(newOrder));
+          console.log("[Magic Editor X] [ORDER] Updated block order in Y.Map:", newOrder.length, "blocks");
+        }
+      }, "local");
+      console.log("[Magic Editor X] [SUCCESS] Successfully pushed", blocks.length, "blocks to Y.Map");
+    } catch (error2) {
+      console.error("[Magic Editor X] Failed to push local update", error2);
+    }
+  }, [collabEnabled, yDoc, yBlocksMap, yMetaMap]);
+  const pushLocalToCollabRef = useRef(pushLocalToCollab);
+  useEffect(() => {
+    pushLocalToCollabRef.current = pushLocalToCollab;
+  }, [pushLocalToCollab]);
+  const customPlaceholder = attribute?.options?.placeholder || placeholder || "Start writing your amazing content...";
+  attribute?.options?.minHeight || 400;
+  const mediaLibToggleFunc = useCallback(
+    getToggleFunc({
+      openStateSetter: setIsMediaLibOpen,
+      indexStateSetter: setMediaLibBlockIndex
+    }),
+    []
+  );
+  const handleMediaLibChange = useCallback(
+    (data) => {
+      changeFunc({
+        indexStateSetter: setMediaLibBlockIndex,
+        data,
+        index: mediaLibBlockIndex,
+        editor: editorInstanceRef.current
+      });
+      mediaLibToggleFunc();
+    },
+    [mediaLibBlockIndex, mediaLibToggleFunc]
+  );
+  const toggleFullscreen = useCallback(() => {
+    setIsFullscreen((prev) => {
+      if (!prev) {
+        document.body.classList.add("editor-fullscreen");
+      } else {
+        document.body.classList.remove("editor-fullscreen");
+      }
+      return !prev;
+    });
+  }, []);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && isFullscreen) {
+        toggleFullscreen();
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        toggleFullscreen();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isFullscreen, toggleFullscreen]);
+  const handleAIAssistant = useCallback(() => {
+    const selection = window.getSelection();
+    let text = selection?.toString().trim();
+    if (!text && editorInstanceRef.current && isReady) {
+      const currentBlockIndex = editorInstanceRef.current.blocks.getCurrentBlockIndex();
+      const currentBlock = editorInstanceRef.current.blocks.getBlockByIndex(currentBlockIndex);
+      if (currentBlock) {
+        const blockElement = currentBlock.holder?.querySelector("[contenteditable]") || currentBlock.holder?.querySelector(".ce-paragraph") || currentBlock.holder?.querySelector(".ce-header");
+        if (blockElement) {
+          text = blockElement.textContent?.trim() || "";
+          if (text) {
+            const range = document.createRange();
+            range.selectNodeContents(blockElement);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        }
+      }
+    }
+    if (!text) {
+      toastManager.warning("Bitte Text markieren");
+      return;
+    }
+    if (selection.rangeCount > 0) {
+      aiSelectionRangeRef.current = selection.getRangeAt(0).cloneRange();
+      const rect = selection.getRangeAt(0).getBoundingClientRect();
+      const toolbarWidth = 450;
+      let left = rect.left + rect.width / 2 - toolbarWidth / 2;
+      let top = rect.bottom + 10;
+      if (left < 10) left = 10;
+      if (left + toolbarWidth > window.innerWidth - 10) {
+        left = window.innerWidth - toolbarWidth - 10;
+      }
+      if (top + 60 > window.innerHeight) {
+        top = rect.top - 60;
+      }
+      setAIToolbarPosition({ left, top });
+    }
+    setAISelectedText(text);
+    setShowAIToolbar(true);
+  }, [isReady]);
+  const handleInsertBlock = useCallback((blockType) => {
+    if (!editorInstanceRef.current || !isReady) return;
+    if (blockType === "mediaLib") {
+      if (collabEnabled && collabCanEdit === false) {
+        console.log("[Magic Editor X] Viewer cannot open Media Library");
+        return;
+      }
+      setIsMediaLibOpen(true);
+      return;
+    }
+    if (collabEnabled && collabCanEdit === false) {
+      console.log("[Magic Editor X] Viewer cannot insert blocks");
+      return;
+    }
+    const editor = editorInstanceRef.current;
+    const lastIndex = editor.blocks.getBlocksCount();
+    editor.blocks.insert(blockType, {}, {}, lastIndex, true);
+    editor.caret.setToBlock(lastIndex);
+  }, [isReady, collabEnabled, collabCanEdit]);
+  const handleClear = useCallback(async () => {
+    if (!editorInstanceRef.current || !isReady) return;
+    if (window.confirm("Clear all content? This cannot be undone.")) {
+      await editorInstanceRef.current.clear();
+      const emptyPayload = JSON.stringify({ blocks: [] });
+      lastSerializedValueRef.current = emptyPayload;
+      pushLocalToCollab(emptyPayload);
+      onChange({ target: { name, value: null, type: "text" } });
+      setBlocksCount(0);
+      setWordCount(0);
+      setCharCount(0);
+    }
+  }, [isReady, name, onChange, pushLocalToCollab]);
+  const handleCopy = useCallback(async () => {
+    if (!editorInstanceRef.current || !isReady) return;
+    const data = await editorInstanceRef.current.save();
+    await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+  }, [isReady]);
+  useEffect(() => {
+    if (editorRef.current && !editorInstanceRef.current) {
+      const tools = getTools({ mediaLibToggleFunc, pluginId: PLUGIN_ID });
+      let initialData = void 0;
+      if (value) {
+        try {
+          initialData = typeof value === "string" ? JSON.parse(value) : value;
+          setBlocksCount(initialData?.blocks?.length || 0);
+          calculateStats(initialData);
+        } catch (e) {
+          console.warn("[Magic Editor X] Could not parse initial value:", e);
+        }
+      }
+      const isReadOnly = disabled || collabEnabled && collabCanEdit === false;
+      console.log("[Magic Editor X] [INIT] Initial readOnly:", isReadOnly, "| collabCanEdit:", collabCanEdit);
+      if (isReadOnly && collabEnabled && !disabled) {
+        console.log("[Magic Editor X] [VIEWER] Viewer mode - editor is read-only");
+        if (editorRef.current) {
+          editorRef.current.classList.add("editor-readonly");
+        }
+      }
+      const editor = new EditorJS({
+        holder: editorRef.current,
+        tools,
+        data: initialData,
+        readOnly: isReadOnly,
+        placeholder: customPlaceholder,
+        minHeight: 200,
+        autofocus: false,
+        onReady: async () => {
+          isReadyRef.current = true;
+          setIsReady(true);
+          console.log("[Magic Editor X] [READY] Editor onReady fired");
+          console.log("[Magic Editor X] [READY] Editor holder:", editorRef.current?.id);
+          try {
+            initUndoRedo(editor);
+            console.log("[Magic Editor X] [SUCCESS] Undo/Redo initialized");
+          } catch (e) {
+            console.warn("[Magic Editor X] Could not initialize Undo/Redo:", e);
+          }
+          try {
+            initDragDrop(editor);
+            console.log("[Magic Editor X] [SUCCESS] Drag & Drop initialized");
+          } catch (e) {
+            console.warn("[Magic Editor X] Could not initialize Drag & Drop:", e);
+          }
+          if (pendingRenderRef.current) {
+            try {
+              if (typeof pendingRenderRef.current === "object" && pendingRenderRef.current.blocks) {
+                console.log("[Magic Editor X] [PENDING] Rendering pending data with", pendingRenderRef.current?.blocks?.length, "blocks");
+                isApplyingRemoteRef.current = true;
+                try {
+                  await editor.render(pendingRenderRef.current);
+                  lastSerializedValueRef.current = serializeForCompare(pendingRenderRef.current);
+                  console.log("[Magic Editor X] [SUCCESS] Rendered pending blocks on ready");
+                } finally {
+                  isApplyingRemoteRef.current = false;
+                }
+              } else {
+                console.log("[Magic Editor X] [PENDING] Triggering queued sync after onReady");
+                await renderFromYDocRef.current?.();
+              }
+            } catch (err) {
+              console.error("[Magic Editor X] Error applying pending sync:", err);
+              isApplyingRemoteRef.current = false;
+            }
+            pendingRenderRef.current = null;
+          }
+        },
+        onChange: async (api) => {
+          try {
+            if (isApplyingRemoteRef.current) {
+              return;
+            }
+            const outputData = await api.saver.save();
+            const count = outputData.blocks?.length || 0;
+            const serialized = JSON.stringify(outputData);
+            const normalized = serializeForCompare(outputData);
+            if (normalized === lastSerializedValueRef.current) {
+              return;
+            }
+            setBlocksCount(count);
+            calculateStats(outputData);
+            const docPayload = count === 0 ? JSON.stringify({ blocks: [] }) : serialized;
+            pushLocalToCollabRef.current?.(docPayload);
+            lastSerializedValueRef.current = normalized;
+            if (count === 0) {
+              onChange({ target: { name, value: null, type: "text" } });
+            } else {
+              onChange({ target: { name, value: serialized, type: "text" } });
+            }
+          } catch (error2) {
+            console.error("[Magic Editor X] Error in onChange:", error2);
+          }
+        }
+      });
+      editorInstanceRef.current = editor;
+    }
+    return () => {
+      console.log("[Magic Editor X] [CLEANUP] Editor component unmounting, destroying editor");
+      isReadyRef.current = false;
+      setIsReady(false);
+      if (editorInstanceRef.current && editorInstanceRef.current.destroy) {
+        try {
+          editorInstanceRef.current.destroy();
+        } catch (e) {
+          console.warn("[Magic Editor X] Error destroying editor:", e);
+        }
+        editorInstanceRef.current = null;
+      }
+      document.body.classList.remove("editor-fullscreen");
+    };
+  }, []);
+  useEffect(() => {
+    const editor = editorInstanceRef.current;
+    if (!editor || !isReady) return;
+    const shouldBeReadOnly = disabled || collabEnabled && collabCanEdit === false;
+    console.log("[Magic Editor X] [READONLY] ReadOnly check:", {
+      disabled,
+      collabEnabled,
+      collabCanEdit,
+      collabRole,
+      shouldBeReadOnly
+    });
+    if (typeof editor.readOnly?.toggle === "function") {
+      const currentReadOnly = editor.readOnly?.isEnabled;
+      if (currentReadOnly !== shouldBeReadOnly) {
+        console.log("[Magic Editor X] [TOGGLE] Toggling readOnly:", shouldBeReadOnly, "| Role:", collabRole);
+        editor.readOnly.toggle(shouldBeReadOnly);
+        if (editorRef.current) {
+          if (shouldBeReadOnly) {
+            editorRef.current.classList.add("editor-readonly");
+          } else {
+            editorRef.current.classList.remove("editor-readonly");
+          }
+        }
+      }
+    }
+  }, [disabled, collabEnabled, collabCanEdit, collabRole, isReady]);
+  const quickActions = [
+    { icon: Bars3BottomLeftIcon, label: "Heading", block: "header" },
+    { icon: ListBulletIcon, label: "List", block: "list" },
+    { icon: CheckCircleIcon, label: "Checklist", block: "checklist" },
+    { icon: PhotoIcon, label: "Image", block: "image" },
+    { icon: LinkIcon, label: "Link", block: "linkTool" },
+    { icon: CodeBracketIcon, label: "Code", block: "code" },
+    { icon: TableCellsIcon, label: "Table", block: "table" },
+    { icon: ChatBubbleBottomCenterTextIcon, label: "Quote", block: "quote" },
+    { icon: ExclamationTriangleIcon, label: "Warning", block: "warning" },
+    { icon: MinusIcon, label: "Divider", block: "delimiter" }
+  ];
+  return /* @__PURE__ */ jsxs(Field.Root, { name, id: name, error, required, hint, children: [
+    /* @__PURE__ */ jsx(FullscreenGlobalStyle, {}),
+    /* @__PURE__ */ jsx(EditorJSGlobalStyles, {}),
+    /* @__PURE__ */ jsx(AIToast, {}),
+    label && !isFullscreen && /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+    /* @__PURE__ */ jsx(
+      EditorContainer,
+      {
+        ref: containerRef,
+        $isFullscreen: isFullscreen,
+        $minHeight: editorHeight,
+        children: /* @__PURE__ */ jsxs(
+          EditorCard,
+          {
+            $isFocused: isFocused,
+            $hasError: !!error,
+            $disabled: disabled,
+            $isFullscreen: isFullscreen,
+            $minHeight: editorHeight,
+            children: [
+              /* @__PURE__ */ jsxs(EditorHeader, { children: [
+                /* @__PURE__ */ jsxs(HeaderLeft, { children: [
+                  /* @__PURE__ */ jsxs(Logo, { children: [
+                    /* @__PURE__ */ jsx(SparklesIcon$1, {}),
+                    /* @__PURE__ */ jsx(LogoText, { children: "Magic Editor" })
+                  ] }),
+                  isReady && blocksCount > 0 && /* @__PURE__ */ jsxs(BlockCount, { children: [
+                    blocksCount,
+                    " ",
+                    blocksCount === 1 ? "Block" : "Blocks"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(Toolbar, { children: [
+                  /* @__PURE__ */ jsx(QuickActions, { children: quickActions.map(({ icon: Icon2, label: label2, block }) => /* @__PURE__ */ jsx(
+                    ToolButton,
+                    {
+                      type: "button",
+                      "data-tooltip": label2,
+                      onClick: () => handleInsertBlock(block),
+                      disabled: collabEnabled && collabCanEdit === false,
+                      style: collabEnabled && collabCanEdit === false ? { opacity: 0.4, cursor: "not-allowed" } : {},
+                      children: /* @__PURE__ */ jsx(Icon2, {})
+                    },
+                    block
+                  )) }),
+                  /* @__PURE__ */ jsx(ToolbarDivider, {}),
+                  /* @__PURE__ */ jsx(
+                    ToolButton,
+                    {
+                      type: "button",
+                      "data-tooltip": "KI-Assistent (Text markieren)",
+                      onClick: handleAIAssistant,
+                      disabled: collabEnabled && collabCanEdit === false,
+                      style: {
+                        background: "linear-gradient(135deg, #7C3AED 0%, #6d28d9 100%)",
+                        color: "white",
+                        ...collabEnabled && collabCanEdit === false ? { opacity: 0.4, cursor: "not-allowed" } : {}
+                      },
+                      children: /* @__PURE__ */ jsx(SparklesIcon$1, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ToolbarDivider, {}),
+                  /* @__PURE__ */ jsx(
+                    ToolButton,
+                    {
+                      type: "button",
+                      "data-tooltip": "Copy JSON",
+                      onClick: handleCopy,
+                      children: /* @__PURE__ */ jsx(DocumentDuplicateIcon, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ToolButton,
+                    {
+                      type: "button",
+                      "data-tooltip": "Clear All",
+                      onClick: handleClear,
+                      disabled: collabEnabled && collabCanEdit === false,
+                      style: collabEnabled && collabCanEdit === false ? { opacity: 0.4, cursor: "not-allowed" } : {},
+                      children: /* @__PURE__ */ jsx(TrashIcon, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ToolbarDivider, {}),
+                  /* @__PURE__ */ jsx(
+                    ToolButton,
+                    {
+                      type: "button",
+                      $active: isFullscreen,
+                      "data-tooltip": isFullscreen ? "Exit Fullscreen (Esc)" : "Fullscreen (⌘+Enter)",
+                      onClick: toggleFullscreen,
+                      children: isFullscreen ? /* @__PURE__ */ jsx(ArrowsPointingInIcon, {}) : /* @__PURE__ */ jsx(ArrowsPointingOutIcon, {})
+                    }
+                  )
+                ] })
+              ] }),
+              collabError && collabEnabled && /* @__PURE__ */ jsx(CollabNotice, { children: collabError }),
+              collabEnabled && collabStatus === "connected" && collabRole === "viewer" && /* @__PURE__ */ jsxs(ViewerBanner, { children: [
+                /* @__PURE__ */ jsx(EyeIcon, {}),
+                /* @__PURE__ */ jsx("strong", { children: "Nur-Lesen Modus" }),
+                /* @__PURE__ */ jsx("span", { children: "• Du kannst den Inhalt sehen, aber nicht bearbeiten" })
+              ] }),
+              collabEnabled && collabStatus === "connected" && activeEditors.length > 0 && /* @__PURE__ */ jsxs(ActiveEditorsBar, { children: [
+                /* @__PURE__ */ jsx(ActiveEditorsLabel, { children: "Aktive Bearbeiter:" }),
+                activeEditors.map((editor) => /* @__PURE__ */ jsxs(
+                  ActiveEditorBadge,
+                  {
+                    $color: editor.color?.bg,
+                    title: `${getPeerName(editor.user)} bearbeitet Block ${editor.blockIndex !== null ? editor.blockIndex + 1 : "?"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(ActiveEditorDot, { $color: editor.color?.bg }),
+                      /* @__PURE__ */ jsx("span", { children: getPeerName(editor.user) }),
+                      editor.blockIndex !== null && /* @__PURE__ */ jsxs("span", { style: { opacity: 0.6, fontSize: "10px" }, children: [
+                        "Block ",
+                        editor.blockIndex + 1
+                      ] })
+                    ]
+                  },
+                  editor.user.id
+                ))
+              ] }),
+              /* @__PURE__ */ jsxs(
+                EditorContent,
+                {
+                  $isFullscreen: isFullscreen,
+                  onFocus: () => setIsFocused(true),
+                  onBlur: () => setIsFocused(false),
+                  children: [
+                    !isReady && /* @__PURE__ */ jsxs(LoadingOverlay, { children: [
+                      /* @__PURE__ */ jsx(Loader, { small: true }),
+                      /* @__PURE__ */ jsx(LoadingText, { children: "Initializing editor..." })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      EditorWrapper,
+                      {
+                        ref: editorRef,
+                        id: `editor-${name}`,
+                        $minHeight: editorHeight
+                      }
+                    ),
+                    isReady && blocksCount === 0 && !collabEnabled && /* @__PURE__ */ jsxs(EmptyState, { children: [
+                      /* @__PURE__ */ jsx(EmptyIcon, { children: /* @__PURE__ */ jsx(PencilSquareIcon, {}) }),
+                      /* @__PURE__ */ jsx(EmptyTitle, { children: "Start Writing" }),
+                      /* @__PURE__ */ jsx(EmptySubtitle, { children: "Click anywhere or use the toolbar to add content" }),
+                      /* @__PURE__ */ jsxs(KeyboardHints, { children: [
+                        /* @__PURE__ */ jsxs(KeyHint, { children: [
+                          /* @__PURE__ */ jsx("kbd", { children: "/" }),
+                          " Commands"
+                        ] }),
+                        /* @__PURE__ */ jsxs(KeyHint, { children: [
+                          /* @__PURE__ */ jsx("kbd", { children: "⌘B" }),
+                          " Bold"
+                        ] }),
+                        /* @__PURE__ */ jsxs(KeyHint, { children: [
+                          /* @__PURE__ */ jsx("kbd", { children: "⌘I" }),
+                          " Italic"
+                        ] }),
+                        /* @__PURE__ */ jsxs(KeyHint, { children: [
+                          /* @__PURE__ */ jsx("kbd", { children: "Tab" }),
+                          " Add Block"
+                        ] })
+                      ] })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(EditorFooter, { children: [
+                /* @__PURE__ */ jsxs(FooterLeft, { children: [
+                  /* @__PURE__ */ jsxs(FooterStat, { children: [
+                    /* @__PURE__ */ jsx("strong", { children: wordCount }),
+                    " ",
+                    t("editor.words", "Wörter")
+                  ] }),
+                  /* @__PURE__ */ jsxs(FooterStat, { children: [
+                    /* @__PURE__ */ jsx("strong", { children: charCount }),
+                    " ",
+                    t("editor.characters", "Zeichen")
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(FooterRight, { children: [
+                  !(collabEnabled && collabCanEdit === false) && /* @__PURE__ */ jsxs(FooterButton, { type: "button", onClick: () => handleInsertBlock("mediaLib"), children: [
+                    /* @__PURE__ */ jsx(PhotoIcon, {}),
+                    t("editor.mediaLibrary", "Media Library")
+                  ] }),
+                  isFullscreen && /* @__PURE__ */ jsxs(FooterButton, { type: "button", $primary: true, onClick: toggleFullscreen, children: [
+                    /* @__PURE__ */ jsx(ArrowsPointingInIcon, {}),
+                    "Exit Fullscreen"
+                  ] })
+                ] })
+              ] }),
+              !isFullscreen && /* @__PURE__ */ jsx(ResizeHandle, {})
+            ]
+          }
+        )
+      }
+    ),
+    !isFullscreen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] }),
+    /* @__PURE__ */ jsx(
+      MediaLibComponent,
+      {
+        isOpen: isMediaLibOpen,
+        onChange: handleMediaLibChange,
+        onToggle: mediaLibToggleFunc
+      }
+    ),
+    showAIToolbar && /* @__PURE__ */ jsx(
+      AIInlineToolbar,
+      {
+        position: aiToolbarPosition,
+        onAction: async (action, options) => {
+          setAILoading(true);
+          const success = await handleAIAction(action, options, {
+            text: aiSelectedText,
+            range: aiSelectionRangeRef.current
+          });
+          setAILoading(false);
+          if (success) {
+            setShowAIToolbar(false);
+            aiSelectionRangeRef.current = null;
+          }
+        },
+        loading: aiLoading,
+        onClose: () => {
+          setShowAIToolbar(false);
+          aiSelectionRangeRef.current = null;
+        }
+      }
+    ),
+    showAIPopup && /* @__PURE__ */ jsx(
+      AIAssistantPopup,
+      {
+        selectedText: aiSelectedText,
+        licenseKey: licenseData?.licenseKey,
+        onClose: () => {
+          setShowAIPopup(false);
+          aiSelectionRangeRef.current = null;
+        },
+        onApply: (correctedText) => {
+          if (aiSelectionRangeRef.current) {
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(aiSelectionRangeRef.current);
+            document.execCommand("insertText", false, correctedText);
+            aiSelectionRangeRef.current = null;
+          }
+          setShowAIPopup(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CreditsModal,
+      {
+        isOpen: showCreditsModal,
+        onClose: () => {
+          setShowCreditsModal(false);
+          setCreditsUpgradeInfo(null);
+        },
+        upgradeInfo: creditsUpgradeInfo
+      }
+    )
+  ] });
+});
+Editor.displayName = "MagicEditorXInput";
+export {
+  Editor as default
+};