nextblogkit 0.7.1 → 0.7.2

package/README.md

@@ -815,6 +815,7 @@ Type `/` in the editor to open the command menu:
 | Blockquote | Quote block |
 | Code Block | Syntax-highlighted code |
 | Image | Upload an image |
+| Media Library | Choose from uploaded images (when `onBrowseMedia` is provided) |
 | Table | Insert a 3x3 table |
 | Divider | Horizontal rule |
 | Callout | Info/warning/tip/danger box |

package/dist/admin/index.cjs

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
-var react = require('react');
+var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@tiptap/react');
+var react = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
 var Placeholder = require('@tiptap/extension-placeholder');
 var Link = require('@tiptap/extension-link');
@@ -23,6 +23,7 @@ var CodeBlockLowlight = require('@tiptap/extension-code-block');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var React4__default = /*#__PURE__*/_interopDefault(React4);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 var Placeholder__default = /*#__PURE__*/_interopDefault(Placeholder);
 var Link__default = /*#__PURE__*/_interopDefault(Link);
@@ -79,22 +80,22 @@ async function apiRequest(path, options = {}) {
   return data;
 }
 function useAdminApi() {
-  const get = react.useCallback(async (path) => {
+  const get = React4.useCallback(async (path) => {
     return apiRequest(path);
   }, []);
-  const post = react.useCallback(async (path, body) => {
+  const post = React4.useCallback(async (path, body) => {
     return apiRequest(path, {
       method: "POST",
       body: body instanceof FormData ? body : JSON.stringify(body)
     });
   }, []);
-  const put = react.useCallback(async (path, body) => {
+  const put = React4.useCallback(async (path, body) => {
     return apiRequest(path, {
       method: "PUT",
       body: JSON.stringify(body)
     });
   }, []);
-  const del = react.useCallback(async (path) => {
+  const del = React4.useCallback(async (path) => {
     return apiRequest(path, { method: "DELETE" });
   }, []);
   return { get, post, put, del };
@@ -110,11 +111,11 @@ function buildNavItems(adminPath) {
   ];
 }
 function AdminLayout({ children, apiKey, apiPath, adminPath = "/admin/blog", basePath = "/blog" }) {
-  const [isAuthenticated, setIsAuthenticated] = react.useState(false);
-  const [inputKey, setInputKey] = react.useState("");
-  const [sidebarOpen, setSidebarOpen] = react.useState(true);
-  const [currentPath, setCurrentPath] = react.useState("");
-  react.useEffect(() => {
+  const [isAuthenticated, setIsAuthenticated] = React4.useState(false);
+  const [inputKey, setInputKey] = React4.useState("");
+  const [sidebarOpen, setSidebarOpen] = React4.useState(true);
+  const [currentPath, setCurrentPath] = React4.useState("");
+  React4.useEffect(() => {
     if (apiPath) {
       setApiBase(apiPath);
     }
@@ -122,7 +123,7 @@ function AdminLayout({ children, apiKey, apiPath, adminPath = "/admin/blog", bas
       setBasePath(basePath);
     }
   }, [apiPath, basePath]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (typeof window !== "undefined") {
       setCurrentPath(window.location.pathname);
       const stored = sessionStorage.getItem("nbk_api_key");
@@ -203,17 +204,17 @@ function AdminLayout({ children, apiKey, apiPath, adminPath = "/admin/blog", bas
 }
 function Dashboard() {
   const api = useAdminApi();
-  const [stats, setStats] = react.useState({
+  const [stats, setStats] = React4.useState({
     totalPosts: 0,
     publishedPosts: 0,
     draftPosts: 0,
     totalMedia: 0,
     totalCategories: 0
   });
-  const [recentDrafts, setRecentDrafts] = react.useState([]);
-  const [recentPublished, setRecentPublished] = react.useState([]);
-  const [loading, setLoading] = react.useState(true);
-  react.useEffect(() => {
+  const [recentDrafts, setRecentDrafts] = React4.useState([]);
+  const [recentPublished, setRecentPublished] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(true);
+  React4.useEffect(() => {
     async function loadDashboard() {
       try {
         const [allPosts, published, drafts, media, categories] = await Promise.all([
@@ -291,15 +292,15 @@ function Dashboard() {
 }
 function PostList() {
   const api = useAdminApi();
-  const [posts, setPosts] = react.useState([]);
-  const [total, setTotal] = react.useState(0);
-  const [page, setPage] = react.useState(1);
-  const [statusFilter, setStatusFilter] = react.useState("");
-  const [searchQuery, setSearchQuery] = react.useState("");
-  const [loading, setLoading] = react.useState(true);
-  const [selected, setSelected] = react.useState(/* @__PURE__ */ new Set());
+  const [posts, setPosts] = React4.useState([]);
+  const [total, setTotal] = React4.useState(0);
+  const [page, setPage] = React4.useState(1);
+  const [statusFilter, setStatusFilter] = React4.useState("");
+  const [searchQuery, setSearchQuery] = React4.useState("");
+  const [loading, setLoading] = React4.useState(true);
+  const [selected, setSelected] = React4.useState(/* @__PURE__ */ new Set());
   const limit = 20;
-  const loadPosts = react.useCallback(async () => {
+  const loadPosts = React4.useCallback(async () => {
     setLoading(true);
     try {
       let path = `/posts?page=${page}&limit=${limit}`;
@@ -314,7 +315,7 @@ function PostList() {
       setLoading(false);
     }
   }, [page, statusFilter, searchQuery]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     loadPosts();
   }, [loadPosts]);
   const handleDelete = async (id) => {
@@ -990,29 +991,49 @@ function BlogEditor({
   onChange,
   onSave,
   uploadImage,
+  onBrowseMedia,
   placeholder = 'Start writing your post... Type "/" for commands',
   autosaveInterval = 3e4,
   className = ""
 }) {
-  const [slashState, setSlashState] = react.useState({
+  const [slashState, setSlashState] = React4.useState({
     isOpen: false,
     query: "",
     position: null,
     selectedIndex: 0,
     items: []
   });
-  const [wordCount, setWordCount] = react.useState(0);
-  const [isSaving, setIsSaving] = react.useState(false);
-  const autosaveTimerRef = react.useRef(null);
-  const lastSavedRef = react.useRef("");
-  const defaultUpload = react.useCallback(async (file) => {
+  const [wordCount, setWordCount] = React4.useState(0);
+  const [isSaving, setIsSaving] = React4.useState(false);
+  const autosaveTimerRef = React4.useRef(null);
+  const lastSavedRef = React4.useRef("");
+  const defaultUpload = React4.useCallback(async (file) => {
     if (!uploadImage) {
       console.warn("[NextBlogKit] No uploadImage handler provided. Using blob URL \u2014 image will not persist across page reloads. Configure Cloudflare R2 for persistent image storage.");
       return { url: URL.createObjectURL(file), alt: file.name };
     }
     return uploadImage(file);
   }, [uploadImage]);
-  const editor = react$1.useEditor({
+  const slashCommands = React4__default.default.useMemo(() => {
+    if (!onBrowseMedia) return defaultSlashCommands;
+    const imageIndex = defaultSlashCommands.findIndex((c) => c.title === "Image");
+    const mediaItem = {
+      title: "Media Library",
+      description: "Choose from uploaded images",
+      icon: "\u{1F4C1}",
+      command: (editor2) => {
+        onBrowseMedia().then((result) => {
+          if (result) {
+            editor2.chain().focus().setImage({ src: result.url, alt: result.alt || "" }).run();
+          }
+        });
+      }
+    };
+    const cmds = [...defaultSlashCommands];
+    cmds.splice(imageIndex + 1, 0, mediaItem);
+    return cmds;
+  }, [onBrowseMedia]);
+  const editor = react.useEditor({
     extensions: [
       StarterKit__default.default.configure({
         codeBlock: false,
@@ -1038,6 +1059,7 @@ function BlogEditor({
       FAQAnswer,
       TableOfContents,
       SlashCommand.configure({
+        commands: slashCommands,
         onStateChange: setSlashState
       })
     ],
@@ -1054,7 +1076,7 @@ function BlogEditor({
       }
     }
   });
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (!onSave || !autosaveInterval || !editor) return;
     autosaveTimerRef.current = setInterval(() => {
       const json = JSON.stringify(editor.getJSON());
@@ -1242,10 +1264,24 @@ function BlogEditor({
             title: "Upload Image",
             children: "\u{1F4F7}"
           }
+        ),
+        onBrowseMedia && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: async () => {
+              const result = await onBrowseMedia();
+              if (result && editor) {
+                editor.chain().focus().setImage({ src: result.url, alt: result.alt || "" }).run();
+              }
+            },
+            className: "nbk-toolbar-btn",
+            title: "Choose from Media Library",
+            children: "\u{1F5BC}"
+          }
         )
       ] })
     ] }),
-    editor && /* @__PURE__ */ jsxRuntime.jsx(react$1.BubbleMenu, { editor, tippyOptions: { duration: 100 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nbk-bubble-menu", children: [
+    editor && /* @__PURE__ */ jsxRuntime.jsx(react.BubbleMenu, { editor, tippyOptions: { duration: 100 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nbk-bubble-menu", children: [
       /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => editor.chain().focus().toggleBold().run(), className: editor.isActive("bold") ? "active" : "", children: "B" }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => editor.chain().focus().toggleItalic().run(), className: editor.isActive("italic") ? "active" : "", children: "I" }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => editor.chain().focus().toggleCode().run(), className: editor.isActive("code") ? "active" : "", children: "</>" }),
@@ -1261,7 +1297,7 @@ function BlogEditor({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.EditorContent, { editor }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor }),
     slashState.isOpen && slashState.position && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -1575,25 +1611,30 @@ function SEOPanel({ seo, onChange, title, slug, excerpt, basePath = "/blog" }) {
 }
 function PostEditor({ postId }) {
   const api = useAdminApi();
-  const [title, setTitle] = react.useState("");
-  const [slug, setSlug] = react.useState("");
-  const [content, setContent] = react.useState({ type: "doc", content: [{ type: "paragraph" }] });
-  const [excerpt, setExcerpt] = react.useState("");
-  const [status, setStatus] = react.useState("draft");
-  const [categories, setCategories] = react.useState([]);
-  const [tags, setTags] = react.useState("");
-  const [coverImageUrl, setCoverImageUrl] = react.useState("");
-  const [seo, setSeo] = react.useState({});
-  const [authorName, setAuthorName] = react.useState("");
-  const [scheduledAt, setScheduledAt] = react.useState("");
-  const [allCategories, setAllCategories] = react.useState([]);
-  const [saving, setSaving] = react.useState(false);
-  const [lastSaved, setLastSaved] = react.useState("");
-  const [error, setError] = react.useState("");
-  const [seoExpanded, setSeoExpanded] = react.useState(false);
-  const [loading, setLoading] = react.useState(!!postId);
-  const [sidebarOpen, setSidebarOpen] = react.useState(true);
-  react.useEffect(() => {
+  const [title, setTitle] = React4.useState("");
+  const [slug, setSlug] = React4.useState("");
+  const [content, setContent] = React4.useState({ type: "doc", content: [{ type: "paragraph" }] });
+  const [excerpt, setExcerpt] = React4.useState("");
+  const [status, setStatus] = React4.useState("draft");
+  const [categories, setCategories] = React4.useState([]);
+  const [tags, setTags] = React4.useState("");
+  const [coverImageUrl, setCoverImageUrl] = React4.useState("");
+  const [seo, setSeo] = React4.useState({});
+  const [authorName, setAuthorName] = React4.useState("");
+  const [scheduledAt, setScheduledAt] = React4.useState("");
+  const [allCategories, setAllCategories] = React4.useState([]);
+  const [saving, setSaving] = React4.useState(false);
+  const [lastSaved, setLastSaved] = React4.useState("");
+  const [error, setError] = React4.useState("");
+  const [seoExpanded, setSeoExpanded] = React4.useState(false);
+  const [loading, setLoading] = React4.useState(!!postId);
+  const [sidebarOpen, setSidebarOpen] = React4.useState(true);
+  const [showMediaPicker, setShowMediaPicker] = React4.useState(false);
+  const [mediaItems, setMediaItems] = React4.useState([]);
+  const [mediaLoading, setMediaLoading] = React4.useState(false);
+  const [mediaPickerTarget, setMediaPickerTarget] = React4.useState("cover");
+  const [mediaPickerResolve, setMediaPickerResolve] = React4.useState(null);
+  React4.useEffect(() => {
     api.get("/categories").then((res) => {
       setAllCategories(res.data || []);
     }).catch(() => {
@@ -1666,7 +1707,7 @@ function PostEditor({ postId }) {
       setSaving(false);
     }
   };
-  const handleAutosave = react.useCallback(
+  const handleAutosave = React4.useCallback(
     (editorContent) => {
       if (!postId) return;
       const contentArray = editorContent.content || [];
@@ -1697,6 +1738,42 @@ function PostEditor({ postId }) {
       throw err;
     }
   };
+  const openMediaPicker = async (target) => {
+    setMediaPickerTarget(target);
+    setShowMediaPicker(true);
+    setMediaLoading(true);
+    try {
+      const res = await api.get("/media?limit=50");
+      setMediaItems(res.data || []);
+    } catch {
+      setMediaItems([]);
+    } finally {
+      setMediaLoading(false);
+    }
+  };
+  const selectMedia = (item) => {
+    if (mediaPickerTarget === "cover") {
+      setCoverImageUrl(item.url);
+    }
+    if (mediaPickerTarget === "editor" && mediaPickerResolve) {
+      mediaPickerResolve(item);
+      setMediaPickerResolve(null);
+    }
+    setShowMediaPicker(false);
+  };
+  const closeMediaPicker = () => {
+    setShowMediaPicker(false);
+    if (mediaPickerResolve) {
+      mediaPickerResolve(null);
+      setMediaPickerResolve(null);
+    }
+  };
+  const handleBrowseMedia = () => {
+    return new Promise((resolve) => {
+      setMediaPickerResolve(() => resolve);
+      openMediaPicker("editor");
+    });
+  };
   if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nbk-post-editor", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nbk-editor-header", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "nbk-page-title", children: "Loading..." }) }),
@@ -1759,7 +1836,8 @@ function PostEditor({ postId }) {
             content,
             onChange: setContent,
             onSave: postId ? handleAutosave : void 0,
-            uploadImage
+            uploadImage,
+            onBrowseMedia: handleBrowseMedia
           }
         )
       ] }),
@@ -1848,29 +1926,39 @@ function PostEditor({ postId }) {
               placeholder: "Image URL"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: async () => {
-                const input = document.createElement("input");
-                input.type = "file";
-                input.accept = "image/*";
-                input.onchange = async () => {
-                  const file = input.files?.[0];
-                  if (!file) return;
-                  try {
-                    const result = await uploadImage(file);
-                    setCoverImageUrl(result.url);
-                  } catch (err) {
-                    console.error("Cover upload failed:", err);
-                  }
-                };
-                input.click();
-              },
-              className: "nbk-btn nbk-btn-sm nbk-btn-secondary",
-              children: "Upload Cover Image"
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: async () => {
+                  const input = document.createElement("input");
+                  input.type = "file";
+                  input.accept = "image/*";
+                  input.onchange = async () => {
+                    const file = input.files?.[0];
+                    if (!file) return;
+                    try {
+                      const result = await uploadImage(file);
+                      setCoverImageUrl(result.url);
+                    } catch (err) {
+                      console.error("Cover upload failed:", err);
+                    }
+                  };
+                  input.click();
+                },
+                className: "nbk-btn nbk-btn-sm nbk-btn-secondary",
+                children: "Upload New"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => openMediaPicker("cover"),
+                className: "nbk-btn nbk-btn-sm nbk-btn-secondary",
+                children: "Choose from Library"
+              }
+            )
+          ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nbk-sidebar-section", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "nbk-sidebar-heading", children: "Author" }),
@@ -1923,20 +2011,117 @@ function PostEditor({ postId }) {
           )
         ] })
       ] })
-    ] })
+    ] }),
+    showMediaPicker && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.5)",
+          zIndex: 9999,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        onClick: closeMediaPicker,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              background: "var(--nbk-bg, #fff)",
+              borderRadius: "var(--nbk-radius, 0.5rem)",
+              width: "90%",
+              maxWidth: "800px",
+              maxHeight: "80vh",
+              overflow: "hidden",
+              display: "flex",
+              flexDirection: "column"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: "1rem 1.25rem",
+                borderBottom: "1px solid var(--nbk-border, #e5e7eb)"
+              }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600 }, children: "Choose from Media Library" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: closeMediaPicker,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      fontSize: "1.5rem",
+                      cursor: "pointer",
+                      color: "var(--nbk-text-muted)",
+                      lineHeight: 1
+                    },
+                    children: "\xD7"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1rem 1.25rem", overflowY: "auto", flex: 1 }, children: mediaLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "2rem", color: "var(--nbk-text-muted)" }, children: "Loading media..." }) : mediaItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "2rem", color: "var(--nbk-text-muted)" }, children: "No media files found. Upload images via the Media Library first." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
+                gap: "0.75rem"
+              }, children: mediaItems.filter((m) => m.url).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => selectMedia({ url: item.url, alt: item.alt || item.originalName }),
+                  style: {
+                    background: "none",
+                    border: "2px solid var(--nbk-border, #e5e7eb)",
+                    borderRadius: "var(--nbk-radius, 0.5rem)",
+                    padding: "0.25rem",
+                    cursor: "pointer",
+                    overflow: "hidden",
+                    aspectRatio: "1",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  onMouseEnter: (e) => e.currentTarget.style.borderColor = "var(--nbk-primary, #2563eb)",
+                  onMouseLeave: (e) => e.currentTarget.style.borderColor = "var(--nbk-border, #e5e7eb)",
+                  title: item.originalName,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: item.url,
+                      alt: item.alt || item.originalName,
+                      style: {
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                        borderRadius: "calc(var(--nbk-radius, 0.5rem) - 4px)"
+                      },
+                      loading: "lazy"
+                    }
+                  )
+                },
+                item._id
+              )) }) })
+            ]
+          }
+        )
+      }
+    )
   ] });
 }
 function MediaLibrary() {
   const api = useAdminApi();
-  const [media, setMedia] = react.useState([]);
-  const [total, setTotal] = react.useState(0);
-  const [page, setPage] = react.useState(1);
-  const [loading, setLoading] = react.useState(true);
-  const [uploading, setUploading] = react.useState(false);
-  const [selected, setSelected] = react.useState(null);
-  const [dragOver, setDragOver] = react.useState(false);
+  const [media, setMedia] = React4.useState([]);
+  const [total, setTotal] = React4.useState(0);
+  const [page, setPage] = React4.useState(1);
+  const [loading, setLoading] = React4.useState(true);
+  const [uploading, setUploading] = React4.useState(false);
+  const [selected, setSelected] = React4.useState(null);
+  const [dragOver, setDragOver] = React4.useState(false);
   const limit = 24;
-  const loadMedia = react.useCallback(async () => {
+  const loadMedia = React4.useCallback(async () => {
     setLoading(true);
     try {
       const res = await api.get(`/media?page=${page}&limit=${limit}`);
@@ -1948,7 +2133,7 @@ function MediaLibrary() {
       setLoading(false);
     }
   }, [page]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     loadMedia();
   }, [loadMedia]);
   const handleUpload = async (files) => {
@@ -2105,14 +2290,14 @@ function MediaLibrary() {
 }
 function CategoryManager() {
   const api = useAdminApi();
-  const [categories, setCategories] = react.useState([]);
-  const [loading, setLoading] = react.useState(true);
-  const [editingId, setEditingId] = react.useState(null);
-  const [name, setName] = react.useState("");
-  const [slug, setSlug] = react.useState("");
-  const [description, setDescription] = react.useState("");
-  const [error, setError] = react.useState("");
-  const loadCategories = react.useCallback(async () => {
+  const [categories, setCategories] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(true);
+  const [editingId, setEditingId] = React4.useState(null);
+  const [name, setName] = React4.useState("");
+  const [slug, setSlug] = React4.useState("");
+  const [description, setDescription] = React4.useState("");
+  const [error, setError] = React4.useState("");
+  const loadCategories = React4.useCallback(async () => {
     try {
       const res = await api.get("/categories");
       setCategories(res.data || []);
@@ -2122,7 +2307,7 @@ function CategoryManager() {
       setLoading(false);
     }
   }, []);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     loadCategories();
   }, [loadCategories]);
   const resetForm = () => {
@@ -2279,16 +2464,16 @@ function CategoryManager() {
 }
 function ApiTokensSection() {
   const api = useAdminApi();
-  const [tokens, setTokens] = react.useState([]);
-  const [loading, setLoading] = react.useState(true);
-  const [tokenName, setTokenName] = react.useState("");
-  const [generating, setGenerating] = react.useState(false);
-  const [newToken, setNewToken] = react.useState("");
-  const [copied, setCopied] = react.useState(false);
-  const [error, setError] = react.useState("");
-  const [showDialog, setShowDialog] = react.useState(false);
-  const [revoking, setRevoking] = react.useState(null);
-  const fetchTokens = react.useCallback(async () => {
+  const [tokens, setTokens] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(true);
+  const [tokenName, setTokenName] = React4.useState("");
+  const [generating, setGenerating] = React4.useState(false);
+  const [newToken, setNewToken] = React4.useState("");
+  const [copied, setCopied] = React4.useState(false);
+  const [error, setError] = React4.useState("");
+  const [showDialog, setShowDialog] = React4.useState(false);
+  const [revoking, setRevoking] = React4.useState(null);
+  const fetchTokens = React4.useCallback(async () => {
     try {
       const res = await api.get("/tokens");
       setTokens(res.data || []);
@@ -2298,7 +2483,7 @@ function ApiTokensSection() {
       setLoading(false);
     }
   }, []);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     fetchTokens();
   }, [fetchTokens]);
   const handleGenerate = async () => {
@@ -2463,9 +2648,9 @@ function ApiTokensSection() {
   ] });
 }
 function ApiReferenceSection() {
-  const [open, setOpen] = react.useState(false);
-  const [copiedCurl, setCopiedCurl] = react.useState(false);
-  const [copiedJson, setCopiedJson] = react.useState(false);
+  const [open, setOpen] = React4.useState(false);
+  const [copiedCurl, setCopiedCurl] = React4.useState(false);
+  const [copiedJson, setCopiedJson] = React4.useState(false);
   const sampleJson = `{
   "title": "My Blog Post",
   "content": [{ "type": "paragraph", "content": [{ "type": "text", "text": "Hello world!" }] }],
@@ -2606,12 +2791,12 @@ function ApiReferenceSection() {
 }
 function SettingsPage() {
   const api = useAdminApi();
-  const [settings, setSettings] = react.useState({});
-  const [loading, setLoading] = react.useState(true);
-  const [saving, setSaving] = react.useState(false);
-  const [saved, setSaved] = react.useState(false);
-  const [error, setError] = react.useState("");
-  react.useEffect(() => {
+  const [settings, setSettings] = React4.useState({});
+  const [loading, setLoading] = React4.useState(true);
+  const [saving, setSaving] = React4.useState(false);
+  const [saved, setSaved] = React4.useState(false);
+  const [error, setError] = React4.useState("");
+  React4.useEffect(() => {
     api.get("/settings").then((res) => setSettings(res.data || {})).catch((err) => setError(err.message)).finally(() => setLoading(false));
   }, []);
   const handleSave = async () => {