@fydemy/cms 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -745,6 +745,1060 @@ async function handleUpload(request) {
   }
 }
 
+// src/ui/AdminDashboard.tsx
+import { useState, useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AdminDashboard() {
+  const [entries, setEntries] = useState([]);
+  const [currentPath, setCurrentPath] = useState("");
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [fields, setFields] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState("");
+  const [newFileName, setNewFileName] = useState("");
+  const [uploading, setUploading] = useState(false);
+  useEffect(() => {
+    loadDirectory(currentPath);
+  }, [currentPath]);
+  const loadDirectory = async (path4) => {
+    try {
+      const url = path4 ? `/api/cms/list/${path4}` : "/api/cms/list";
+      const response = await fetch(url);
+      const data = await response.json();
+      setEntries(data.entries || []);
+    } catch (error) {
+      console.error("Failed to load directory:", error);
+    }
+  };
+  const loadFile = async (filePath) => {
+    try {
+      const response = await fetch(`/api/cms/content/${filePath}`);
+      const data = await response.json();
+      setSelectedFile(filePath);
+      const loadedFields = {};
+      if (data.content !== void 0) {
+        loadedFields["content"] = { type: "markdown", value: data.content };
+      }
+      Object.entries(data.data || {}).forEach(([key, value]) => {
+        loadedFields[key] = {
+          type: detectFieldType(value),
+          value
+        };
+      });
+      setFields(loadedFields);
+    } catch (error) {
+      setMessage("Failed to load file");
+    }
+  };
+  const detectFieldType = (value) => {
+    if (typeof value === "number") return "number";
+    if (typeof value === "string") {
+      if (value.match(/^\d{4}-\d{2}-\d{2}/)) return "date";
+      if (value.startsWith("/uploads/") || value.startsWith("http"))
+        return "image";
+      if (value.length > 100) return "markdown";
+    }
+    return "text";
+  };
+  const saveFile = async () => {
+    if (!selectedFile) return;
+    setLoading(true);
+    setMessage("");
+    try {
+      const frontmatter = {};
+      let content = "";
+      Object.entries(fields).forEach(([key, field]) => {
+        if (key === "content") {
+          content = field.value;
+        } else {
+          frontmatter[key] = field.value;
+        }
+      });
+      const response = await fetch(`/api/cms/content/${selectedFile}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ data: frontmatter, content })
+      });
+      if (response.ok) {
+        setMessage("\u2705 File saved successfully!");
+        setTimeout(() => setMessage(""), 3e3);
+      } else {
+        const errorData = await response.json().catch(() => ({}));
+        setMessage(
+          `\u274C Failed to save file: ${errorData.error || response.statusText}`
+        );
+      }
+    } catch (error) {
+      setMessage(
+        `\u274C Error saving file: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+  const createFile = async () => {
+    if (!newFileName) return;
+    const fileName = newFileName.endsWith(".md") ? newFileName : `${newFileName}.md`;
+    const fullPath = currentPath ? `${currentPath}/${fileName}` : fileName;
+    setLoading(true);
+    setMessage("");
+    try {
+      const response = await fetch(`/api/cms/content/${fullPath}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          data: {},
+          content: ""
+        })
+      });
+      if (response.ok) {
+        setMessage("\u2705 File created!");
+        setNewFileName("");
+        loadDirectory(currentPath);
+        loadFile(fullPath);
+      } else {
+        setMessage("\u274C Failed to create file");
+      }
+    } catch (error) {
+      setMessage("\u274C Error creating file");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const duplicateFile = async () => {
+    if (!selectedFile) return;
+    const newName = prompt("Enter new filename (without .md extension):");
+    if (!newName) return;
+    const duplicateName = currentPath ? `${currentPath}/${newName}.md` : `${newName}.md`;
+    setLoading(true);
+    setMessage("");
+    try {
+      const frontmatter = {};
+      let content = "";
+      Object.entries(fields).forEach(([key, field]) => {
+        if (key === "content") {
+          content = field.value;
+        } else {
+          frontmatter[key] = field.value;
+        }
+      });
+      const response = await fetch(`/api/cms/content/${duplicateName}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ data: frontmatter, content })
+      });
+      if (response.ok) {
+        setMessage("\u2705 File duplicated!");
+        loadDirectory(currentPath);
+        loadFile(duplicateName);
+      } else {
+        const errorData = await response.json().catch(() => ({}));
+        setMessage(
+          `\u274C Failed to duplicate file: ${errorData.error || "Unknown error"}`
+        );
+      }
+    } catch (error) {
+      setMessage("\u274C Error duplicating file");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const deleteFile = async (filePath) => {
+    if (!confirm(`Delete ${filePath}?`)) return;
+    setLoading(true);
+    setMessage("");
+    try {
+      const response = await fetch(`/api/cms/content/${filePath}`, {
+        method: "DELETE"
+      });
+      if (response.ok) {
+        setMessage("\u2705 File deleted!");
+        if (selectedFile === filePath) {
+          setSelectedFile(null);
+          setFields({});
+        }
+        loadDirectory(currentPath);
+      } else {
+        setMessage("\u274C Failed to delete file");
+      }
+    } catch (error) {
+      setMessage("\u274C Error deleting file");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const navigateToDir = (dirPath) => {
+    setCurrentPath(dirPath);
+    setSelectedFile(null);
+  };
+  const goUp = () => {
+    const parts = currentPath.split("/");
+    parts.pop();
+    setCurrentPath(parts.join("/"));
+    setSelectedFile(null);
+  };
+  const handleLogout2 = async () => {
+    await fetch("/api/cms/logout", { method: "POST" });
+    window.location.href = "/admin/login";
+  };
+  const updateField = (key, value) => {
+    setFields((prev) => ({
+      ...prev,
+      [key]: { ...prev[key], value }
+    }));
+  };
+  const addField = () => {
+    const fieldName = prompt("Enter field name:");
+    if (!fieldName || fields[fieldName]) return;
+    const fieldType = prompt(
+      "Enter field type (text/date/number/markdown/image):",
+      "text"
+    );
+    const validTypes = [
+      "text",
+      "date",
+      "number",
+      "markdown",
+      "image"
+    ];
+    if (!validTypes.includes(fieldType)) {
+      alert("Invalid field type! Use: text, date, number, markdown, or image");
+      return;
+    }
+    const defaultValue = fieldType === "number" ? 0 : fieldType === "date" ? (/* @__PURE__ */ new Date()).toISOString().split("T")[0] : "";
+    setFields((prev) => ({
+      ...prev,
+      [fieldName]: { type: fieldType, value: defaultValue }
+    }));
+  };
+  const removeField = (key) => {
+    const newFields = { ...fields };
+    delete newFields[key];
+    setFields(newFields);
+  };
+  const handleImageUpload = async (key, event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    setUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      const response = await fetch("/api/cms/upload", {
+        method: "POST",
+        body: formData
+      });
+      const data = await response.json();
+      if (response.ok) {
+        updateField(key, data.url);
+        setMessage(`\u2705 Image uploaded!`);
+        setTimeout(() => setMessage(""), 3e3);
+      } else {
+        setMessage("\u274C Failed to upload image");
+      }
+    } catch (error) {
+      setMessage("\u274C Error uploading image");
+    } finally {
+      setUploading(false);
+      event.target.value = "";
+    }
+  };
+  const handleFileUpload = async (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    setUploading(true);
+    setMessage("");
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      const response = await fetch("/api/cms/upload", {
+        method: "POST",
+        body: formData
+      });
+      const data = await response.json();
+      if (response.ok) {
+        setMessage(`\u2705 File uploaded! Path: ${data.url}`);
+        setTimeout(() => setMessage(""), 5e3);
+      } else {
+        setMessage("\u274C Failed to upload file");
+      }
+    } catch (error) {
+      setMessage("\u274C Error uploading file");
+    } finally {
+      setUploading(false);
+      event.target.value = "";
+    }
+  };
+  const renderField = (key, field) => {
+    switch (field.type) {
+      case "text":
+        return /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: key,
+            type: "text",
+            value: field.value,
+            onChange: (e) => updateField(key, e.target.value),
+            style: {
+              width: "100%",
+              padding: "0.5rem",
+              border: "1px solid #ddd",
+              borderRadius: "4px"
+            }
+          }
+        );
+      case "number":
+        return /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: key,
+            type: "number",
+            value: field.value,
+            onChange: (e) => updateField(key, parseFloat(e.target.value) || 0),
+            style: {
+              width: "100%",
+              padding: "0.5rem",
+              border: "1px solid #ddd",
+              borderRadius: "4px"
+            }
+          }
+        );
+      case "date":
+        return /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: key,
+            type: "date",
+            value: field.value,
+            onChange: (e) => updateField(key, e.target.value),
+            style: {
+              width: "100%",
+              padding: "0.5rem",
+              border: "1px solid #ddd",
+              borderRadius: "4px"
+            }
+          }
+        );
+      case "markdown":
+        return /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id: key,
+            value: field.value,
+            onChange: (e) => updateField(key, e.target.value),
+            style: {
+              width: "100%",
+              minHeight: key === "content" ? "400px" : "150px",
+              fontFamily: "monospace",
+              padding: "0.5rem",
+              border: "1px solid #ddd",
+              borderRadius: "4px"
+            },
+            placeholder: key === "content" ? "Write your markdown content here..." : "Markdown text..."
+          }
+        );
+      case "image":
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: key,
+              type: "text",
+              value: field.value,
+              onChange: (e) => updateField(key, e.target.value),
+              placeholder: "/uploads/image.jpg or https://...",
+              style: {
+                width: "100%",
+                padding: "0.5rem",
+                marginBottom: "0.5rem",
+                border: "1px solid #ddd",
+                borderRadius: "4px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "file",
+              accept: "image/*",
+              onChange: (e) => handleImageUpload(key, e),
+              disabled: uploading,
+              style: { marginBottom: "0.5rem" }
+            }
+          ),
+          field.value && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: field.value,
+              alt: key,
+              style: {
+                maxWidth: "200px",
+                display: "block",
+                marginTop: "0.5rem",
+                borderRadius: "4px",
+                border: "1px solid #ddd"
+              }
+            }
+          )
+        ] });
+      default:
+        return /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: key,
+            type: "text",
+            value: field.value,
+            onChange: (e) => updateField(key, e.target.value)
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "container",
+      style: { maxWidth: "1200px", margin: "0 auto", padding: "2rem" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: "2rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx("h1", { children: "\u{1F4DD} Admin Dashboard" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleLogout2,
+                  style: {
+                    padding: "0.5rem 1rem",
+                    background: "#f5f5f5",
+                    border: "1px solid #ddd",
+                    borderRadius: "4px",
+                    cursor: "pointer"
+                  },
+                  children: "Logout"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "minmax(250px, 300px) 1fr",
+              gap: "2rem"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    background: "white",
+                    padding: "1.5rem",
+                    borderRadius: "8px",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("h2", { style: { marginTop: 0, marginBottom: "1rem" }, children: "Files" }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          marginBottom: "1rem",
+                          fontSize: "0.875rem",
+                          color: "#666"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              onClick: () => setCurrentPath(""),
+                              style: {
+                                cursor: "pointer",
+                                color: "#0070f3",
+                                textDecoration: "underline"
+                              },
+                              children: "content"
+                            }
+                          ),
+                          currentPath && /* @__PURE__ */ jsxs(Fragment, { children: [
+                            " / ",
+                            /* @__PURE__ */ jsx("span", { style: { fontWeight: "bold" }, children: currentPath })
+                          ] })
+                        ]
+                      }
+                    ),
+                    currentPath && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: goUp,
+                        style: {
+                          width: "100%",
+                          marginBottom: "1rem",
+                          padding: "0.5rem",
+                          background: "#f5f5f5",
+                          border: "1px solid #ddd",
+                          borderRadius: "4px",
+                          cursor: "pointer"
+                        },
+                        children: "\u2B06\uFE0F Go Up"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          marginBottom: "1.5rem",
+                          paddingBottom: "1.5rem",
+                          borderBottom: "1px solid #eee"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              type: "text",
+                              placeholder: "new-file.md",
+                              value: newFileName,
+                              onChange: (e) => setNewFileName(e.target.value),
+                              style: {
+                                width: "100%",
+                                padding: "0.5rem",
+                                marginBottom: "0.5rem",
+                                border: "1px solid #ddd",
+                                borderRadius: "4px"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              onClick: createFile,
+                              disabled: loading || !newFileName,
+                              style: {
+                                width: "100%",
+                                padding: "0.5rem",
+                                background: "#0070f3",
+                                color: "white",
+                                border: "none",
+                                borderRadius: "4px",
+                                cursor: "pointer",
+                                opacity: loading ? 0.7 : 1
+                              },
+                              children: "+ New File"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: [
+                      entries.length === 0 && /* @__PURE__ */ jsx("li", { style: { color: "#999", fontStyle: "italic" }, children: "Empty directory" }),
+                      entries.map((entry) => /* @__PURE__ */ jsx(
+                        "li",
+                        {
+                          style: {
+                            marginBottom: "0.5rem",
+                            display: "flex",
+                            flexDirection: "column"
+                          },
+                          children: entry.type === "directory" ? /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              onClick: () => navigateToDir(entry.path),
+                              style: {
+                                background: "none",
+                                border: "none",
+                                color: "#0070f3",
+                                cursor: "pointer",
+                                textAlign: "left",
+                                fontSize: "1rem",
+                                padding: "0.25rem 0",
+                                fontWeight: "bold"
+                              },
+                              children: [
+                                "\u{1F4C1} ",
+                                entry.name
+                              ]
+                            }
+                          ) : /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                justifyContent: "space-between",
+                                alignItems: "center"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsxs(
+                                  "button",
+                                  {
+                                    onClick: () => loadFile(entry.path),
+                                    style: {
+                                      background: "none",
+                                      border: "none",
+                                      color: selectedFile === entry.path ? "#000" : "#444",
+                                      cursor: "pointer",
+                                      textAlign: "left",
+                                      padding: "0.25rem 0",
+                                      fontWeight: selectedFile === entry.path ? "bold" : "normal",
+                                      textDecoration: selectedFile === entry.path ? "underline" : "none",
+                                      flex: 1
+                                    },
+                                    children: [
+                                      "\u{1F4C4} ",
+                                      entry.name
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    onClick: () => deleteFile(entry.path),
+                                    disabled: loading,
+                                    style: {
+                                      background: "none",
+                                      border: "none",
+                                      color: "#d32f2f",
+                                      cursor: "pointer",
+                                      fontSize: "0.8rem",
+                                      opacity: 0.7
+                                    },
+                                    children: "\u2715"
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        },
+                        entry.path
+                      ))
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    background: "white",
+                    padding: "2rem",
+                    borderRadius: "8px",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
+                  },
+                  children: selectedFile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center",
+                          marginBottom: "2rem",
+                          paddingBottom: "1rem",
+                          borderBottom: "1px solid #eee"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs("h2", { style: { margin: 0 }, children: [
+                            "Edit: ",
+                            selectedFile
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: duplicateFile,
+                                disabled: loading,
+                                style: {
+                                  padding: "0.5rem 1rem",
+                                  background: "#f5f5f5",
+                                  border: "1px solid #ddd",
+                                  borderRadius: "4px",
+                                  cursor: "pointer"
+                                },
+                                children: "\u{1F4CB} Duplicate"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: saveFile,
+                                disabled: loading,
+                                style: {
+                                  padding: "0.5rem 1rem",
+                                  background: "#0070f3",
+                                  color: "white",
+                                  border: "none",
+                                  borderRadius: "4px",
+                                  cursor: "pointer",
+                                  opacity: loading ? 0.7 : 1
+                                },
+                                children: loading ? "Saving..." : "\u{1F4BE} Save Changes"
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    ),
+                    message && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          marginBottom: "1.5rem",
+                          padding: "0.75rem",
+                          background: message.includes("\u2705") ? "#e6ffe6" : "#ffe6e6",
+                          borderRadius: "4px",
+                          border: message.includes("\u2705") ? "1px solid #a5d6a7" : "1px solid #ef9a9a"
+                        },
+                        children: message
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "2rem" }, children: [
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            marginBottom: "1rem"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx("h3", { style: { fontSize: "1.1rem", margin: 0 }, children: "Fields" }),
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: addField,
+                                style: {
+                                  fontSize: "0.875rem",
+                                  padding: "0.4rem 0.8rem",
+                                  background: "#e1f5fe",
+                                  color: "#0288d1",
+                                  border: "none",
+                                  borderRadius: "4px",
+                                  cursor: "pointer"
+                                },
+                                children: "+ Add Field"
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      Object.keys(fields).length === 0 ? /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            padding: "2rem",
+                            textAlign: "center",
+                            background: "#f9f9f9",
+                            borderRadius: "4px",
+                            border: "1px dashed #ccc"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "p",
+                              {
+                                style: { color: "#666", fontStyle: "italic", margin: 0 },
+                                children: 'No fields yet. Click "+ Add Field" to start.'
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "small",
+                              {
+                                style: {
+                                  color: "#999",
+                                  marginTop: "0.5rem",
+                                  display: "block"
+                                },
+                                children: "Add 'content' field for the main body"
+                              }
+                            )
+                          ]
+                        }
+                      ) : Object.entries(fields).map(([key, field]) => /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            marginBottom: "1.5rem",
+                            background: "#fff",
+                            border: "1px solid #eee",
+                            padding: "1rem",
+                            borderRadius: "6px"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  justifyContent: "space-between",
+                                  alignItems: "center",
+                                  marginBottom: "0.5rem"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsxs("label", { htmlFor: key, style: { fontWeight: 500 }, children: [
+                                    key,
+                                    /* @__PURE__ */ jsx(
+                                      "span",
+                                      {
+                                        style: {
+                                          marginLeft: "0.5rem",
+                                          fontSize: "0.75rem",
+                                          color: "#999",
+                                          background: "#f0f0f0",
+                                          padding: "0.1rem 0.4rem",
+                                          borderRadius: "4px"
+                                        },
+                                        children: field.type
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ jsx(
+                                    "button",
+                                    {
+                                      onClick: () => removeField(key),
+                                      style: {
+                                        background: "none",
+                                        border: "none",
+                                        color: "#e57373",
+                                        cursor: "pointer",
+                                        fontSize: "0.875rem"
+                                      },
+                                      children: "\u2715 Remove"
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
+                            renderField(key, field)
+                          ]
+                        },
+                        key
+                      ))
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          marginTop: "3rem",
+                          paddingTop: "1rem",
+                          borderTop: "1px solid #eee"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "h3",
+                            {
+                              style: {
+                                fontSize: "1rem",
+                                marginBottom: "0.5rem",
+                                color: "#666"
+                              },
+                              children: "Quick File Upload"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                type: "file",
+                                onChange: handleFileUpload,
+                                disabled: uploading,
+                                style: { flex: 1 }
+                              }
+                            ),
+                            uploading && /* @__PURE__ */ jsx("span", { style: { color: "#666" }, children: "Uploading..." })
+                          ] })
+                        ]
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        textAlign: "center",
+                        padding: "5rem 2rem",
+                        color: "#999"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("div", { style: { fontSize: "3rem", marginBottom: "1rem" }, children: "\u{1F448}" }),
+                        /* @__PURE__ */ jsx("p", { style: { fontSize: "1.1rem" }, children: "Select a file from the sidebar to edit" }),
+                        /* @__PURE__ */ jsx("p", { children: "or create a new file to get started" })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/ui/Login.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Login() {
+  const [username, setUsername] = useState2("");
+  const [password, setPassword] = useState2("");
+  const [error, setError] = useState2("");
+  const [loading, setLoading] = useState2(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      const response = await fetch("/api/cms/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password })
+      });
+      const data = await response.json();
+      if (response.ok) {
+        window.location.href = "/admin";
+      } else {
+        setError(data.error || "Login failed");
+      }
+    } catch (err) {
+      setError("An error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: "100vh",
+        background: "#f5f5f5",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+      },
+      children: /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: {
+            width: "100%",
+            maxWidth: "400px",
+            padding: "2rem",
+            background: "white",
+            borderRadius: "8px",
+            boxShadow: "0 4px 6px rgba(0,0,0,0.1)"
+          },
+          children: [
+            /* @__PURE__ */ jsx2("h1", { style: { marginBottom: "0.5rem", textAlign: "center" }, children: "Admin Login" }),
+            /* @__PURE__ */ jsx2("p", { style: { color: "#666", marginBottom: "2rem", textAlign: "center" }, children: "Enter your credentials to access the CMS" }),
+            /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, children: [
+              /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1rem" }, children: [
+                /* @__PURE__ */ jsx2(
+                  "label",
+                  {
+                    htmlFor: "username",
+                    style: {
+                      display: "block",
+                      marginBottom: "0.5rem",
+                      fontWeight: 500
+                    },
+                    children: "Username"
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    id: "username",
+                    type: "text",
+                    value: username,
+                    onChange: (e) => setUsername(e.target.value),
+                    required: true,
+                    autoFocus: true,
+                    style: {
+                      width: "100%",
+                      padding: "0.75rem",
+                      border: "1px solid #ddd",
+                      borderRadius: "4px"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
+                /* @__PURE__ */ jsx2(
+                  "label",
+                  {
+                    htmlFor: "password",
+                    style: {
+                      display: "block",
+                      marginBottom: "0.5rem",
+                      fontWeight: 500
+                    },
+                    children: "Password"
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    id: "password",
+                    type: "password",
+                    value: password,
+                    onChange: (e) => setPassword(e.target.value),
+                    required: true,
+                    style: {
+                      width: "100%",
+                      padding: "0.75rem",
+                      border: "1px solid #ddd",
+                      borderRadius: "4px"
+                    }
+                  }
+                )
+              ] }),
+              error && /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    marginBottom: "1rem",
+                    padding: "0.75rem",
+                    background: "#ffe6e6",
+                    color: "#d32f2f",
+                    borderRadius: "4px",
+                    fontSize: "0.875rem"
+                  },
+                  children: error
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "submit",
+                  disabled: loading,
+                  style: {
+                    width: "100%",
+                    padding: "0.75rem",
+                    background: "#0070f3",
+                    color: "white",
+                    border: "none",
+                    borderRadius: "4px",
+                    fontSize: "1rem",
+                    fontWeight: 500,
+                    cursor: "pointer",
+                    opacity: loading ? 0.7 : 1
+                  },
+                  children: loading ? "Logging in..." : "Login"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/middleware/auth.ts
 import { NextResponse as NextResponse3 } from "next/server";
 function createAuthMiddleware(options = {}) {
@@ -778,6 +1832,16 @@ import path3 from "path";
 async function initCMS(config = {}) {
   const contentDir = config.contentDir || "public/content";
   const fullPath = path3.join(process.cwd(), contentDir);
+  const appDir = path3.join(process.cwd(), "app");
+  try {
+    await fs2.access(appDir);
+  } catch {
+    console.error(
+      '\u274C Error: "app" directory not found. This init script requires Next.js App Router.'
+    );
+    return;
+  }
+  console.log("\u{1F680} Initializing @fydemy/cms...");
   await fs2.mkdir(fullPath, { recursive: true });
   const exampleContent = `---
 title: Example Post
@@ -799,24 +1863,144 @@ This is an example markdown file. You can edit or delete it from the admin dashb
 `;
   const examplePath = path3.join(fullPath, "example.md");
   await fs2.writeFile(examplePath, exampleContent, "utf-8");
-  console.log("\u2705 CMS initialized successfully!");
-  console.log(`\u{1F4C1} Content directory: ${contentDir}`);
-  console.log(`\u{1F4DD} Example file created: ${contentDir}/example.md`);
+  console.log("\u2705 Created content directory and example file");
+  const adminDir = path3.join(appDir, "admin");
+  const loginDir = path3.join(adminDir, "login");
+  await fs2.mkdir(loginDir, { recursive: true });
+  await fs2.writeFile(
+    path3.join(adminDir, "page.tsx"),
+    `import { AdminDashboard } from '@fydemy/cms';
+
+export default AdminDashboard;
+`,
+    "utf-8"
+  );
+  await fs2.writeFile(
+    path3.join(loginDir, "page.tsx"),
+    `import { Login } from '@fydemy/cms';
+
+export default Login;
+`,
+    "utf-8"
+  );
+  console.log("\u2705 Created Admin UI pages");
+  const apiCmsDir = path3.join(appDir, "api", "cms");
+  await fs2.mkdir(path3.join(apiCmsDir, "login"), { recursive: true });
+  await fs2.writeFile(
+    path3.join(apiCmsDir, "login", "route.ts"),
+    `import { handleLogin } from '@fydemy/cms';
+export { handleLogin as POST };
+`,
+    "utf-8"
+  );
+  await fs2.mkdir(path3.join(apiCmsDir, "logout"), { recursive: true });
+  await fs2.writeFile(
+    path3.join(apiCmsDir, "logout", "route.ts"),
+    `import { handleLogout } from '@fydemy/cms';
+export { handleLogout as POST };
+`,
+    "utf-8"
+  );
+  await fs2.mkdir(path3.join(apiCmsDir, "upload"), { recursive: true });
+  await fs2.writeFile(
+    path3.join(apiCmsDir, "upload", "route.ts"),
+    `import { handleUpload } from '@fydemy/cms';
+export { handleUpload as POST };
+`,
+    "utf-8"
+  );
+  await fs2.mkdir(path3.join(apiCmsDir, "list", "[[...path]]"), {
+    recursive: true
+  });
+  await fs2.writeFile(
+    path3.join(apiCmsDir, "list", "[[...path]]", "route.ts"),
+    `import { createListApiHandlers } from '@fydemy/cms';
+
+const handlers = createListApiHandlers();
+export const GET = handlers.GET;
+`,
+    "utf-8"
+  );
+  await fs2.mkdir(path3.join(apiCmsDir, "content", "[...path]"), {
+    recursive: true
+  });
+  await fs2.writeFile(
+    path3.join(apiCmsDir, "content", "[...path]", "route.ts"),
+    `import { createContentApiHandlers } from '@fydemy/cms';
+
+const handlers = createContentApiHandlers();
+export const GET = handlers.GET;
+export const POST = handlers.POST;
+export const DELETE = handlers.DELETE;
+`,
+    "utf-8"
+  );
+  console.log("\u2705 Created API routes");
+  const middlewarePath = path3.join(process.cwd(), "middleware.ts");
+  try {
+    await fs2.access(middlewarePath);
+    console.log(
+      "\u26A0\uFE0F  middleware.ts already exists. Please manually add the CMS auth middleware:"
+    );
+    console.log(`
+import { createAuthMiddleware } from '@fydemy/cms';
+// ... existing imports
+
+export function middleware(request: NextRequest) {
+  // Add this:
+  const authResponse = createAuthMiddleware()(request);
+  if (authResponse) return authResponse;
+  
+  // ... existing middleware logic
+}
+`);
+  } catch {
+    await fs2.writeFile(
+      middlewarePath,
+      `import { createAuthMiddleware } from '@fydemy/cms';
+import { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  return createAuthMiddleware()(request);
+}
+
+export const config = {
+  matcher: ['/admin/:path*'],
+};
+`,
+      "utf-8"
+    );
+    console.log("\u2705 Created middleware.ts");
+  }
+  const envExamplePath = path3.join(process.cwd(), ".env.local.example");
+  await fs2.writeFile(
+    envExamplePath,
+    `CMS_ADMIN_USERNAME=admin
+CMS_ADMIN_PASSWORD=password
+CMS_SESSION_SECRET=ensure_this_is_at_least_32_chars_long_random_string
+
+# GitHub Storage (Production)
+GITHUB_TOKEN=
+GITHUB_REPO=owner/repo
+GITHUB_BRANCH=main
+`,
+    "utf-8"
+  );
   console.log("");
-  console.log("Next steps:");
-  console.log("1. Set up environment variables in .env.local:");
-  console.log("   - CMS_ADMIN_USERNAME");
-  console.log("   - CMS_ADMIN_PASSWORD");
-  console.log("   - CMS_SESSION_SECRET (min 32 characters)");
-  console.log("2. For production: GITHUB_TOKEN, GITHUB_REPO, GITHUB_BRANCH");
-  console.log("3. Import and use the CMS utilities in your Next.js app");
+  console.log("\u{1F389} CMS initialized successfully!");
+  console.log(
+    "1. Copy .env.local.example to .env.local and set your credentials"
+  );
+  console.log("2. Run your dev server and visit /admin");
 }
 
 // src/index.ts
 init_rate_limit();
 export {
+  AdminDashboard,
   GitHubStorage,
   LocalStorage,
+  Login,
   MAX_FILE_SIZE,
   MAX_PASSWORD_LENGTH,
   MAX_USERNAME_LENGTH,