@fydemy/cms 1.0.4 → 1.0.6

package/dist/index.mjs

@@ -1002,33 +1002,8 @@ function AdminDashboard() {
       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) => {
+    const inputClasses = "flex h-9 w-full rounded-md border border-slate-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50";
     switch (field.type) {
       case "text":
         return /* @__PURE__ */ jsx(
@@ -1038,12 +1013,7 @@ function AdminDashboard() {
             type: "text",
             value: field.value,
             onChange: (e) => updateField(key, e.target.value),
-            style: {
-              width: "100%",
-              padding: "0.5rem",
-              border: "1px solid #ddd",
-              borderRadius: "4px"
-            }
+            className: inputClasses
           }
         );
       case "number":
@@ -1054,12 +1024,7 @@ function AdminDashboard() {
             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"
-            }
+            className: inputClasses
           }
         );
       case "date":
@@ -1070,12 +1035,7 @@ function AdminDashboard() {
             type: "date",
             value: field.value,
             onChange: (e) => updateField(key, e.target.value),
-            style: {
-              width: "100%",
-              padding: "0.5rem",
-              border: "1px solid #ddd",
-              borderRadius: "4px"
-            }
+            className: inputClasses
           }
         );
       case "markdown":
@@ -1085,19 +1045,12 @@ function AdminDashboard() {
             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"
-            },
+            className: "flex min-h-[300px] w-full rounded-md border border-slate-200 bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 font-mono",
             placeholder: key === "content" ? "Write your markdown content here..." : "Markdown text..."
           }
         );
       case "image":
-        return /* @__PURE__ */ jsxs("div", { children: [
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -1106,13 +1059,7 @@ function AdminDashboard() {
               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"
-              }
+              className: inputClasses
             }
           ),
           /* @__PURE__ */ jsx(
@@ -1122,7 +1069,7 @@ function AdminDashboard() {
               accept: "image/*",
               onChange: (e) => handleImageUpload(key, e),
               disabled: uploading,
-              style: { marginBottom: "0.5rem" }
+              className: "block w-full text-sm text-slate-500\n                file:mr-4 file:py-2 file:px-4\n                file:rounded-md file:border-0\n                file:text-sm file:font-semibold\n                file:bg-slate-50 file:text-slate-700\n                hover:file:bg-slate-100"
             }
           ),
           field.value && /* @__PURE__ */ jsx(
@@ -1130,13 +1077,7 @@ function AdminDashboard() {
             {
               src: field.value,
               alt: key,
-              style: {
-                maxWidth: "200px",
-                display: "block",
-                marginTop: "0.5rem",
-                borderRadius: "4px",
-                border: "1px solid #ddd"
-              }
+              className: "max-w-[200px] rounded-md border border-slate-200"
             }
           )
         ] });
@@ -1147,497 +1088,202 @@ function AdminDashboard() {
             id: key,
             type: "text",
             value: field.value,
-            onChange: (e) => updateField(key, e.target.value)
+            onChange: (e) => updateField(key, e.target.value),
+            className: inputClasses
           }
         );
     }
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "container",
-      style: { maxWidth: "1200px", margin: "0 auto", padding: "2rem" },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-slate-50/50 pb-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-slate-200 bg-white px-4 py-4 mb-6", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto max-w-7xl flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold tracking-tight", children: "\u{1F4DD} Admin Dashboard" }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleLogout2,
+          className: "inline-flex h-9 items-center justify-center rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950",
+          children: "Logout"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "container mx-auto max-w-7xl px-4 grid grid-cols-1 md:grid-cols-[300px_1fr] gap-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-slate-200 bg-white text-slate-950 shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold leading-none tracking-tight mb-4", children: "Files" }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-4 text-sm text-slate-500 flex items-center gap-1 overflow-hidden", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setCurrentPath(""),
+              className: "hover:text-slate-900 hover:underline shrink-0",
+              children: "content"
+            }
+          ),
+          currentPath && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-slate-300", children: "/" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium truncate text-slate-900", children: currentPath })
+          ] })
+        ] }),
+        currentPath && /* @__PURE__ */ jsx(
+          "button",
           {
-            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"
-                }
-              )
-            ]
+            onClick: goUp,
+            className: "mb-4 inline-flex h-8 w-full items-center justify-center rounded-md bg-slate-100 px-3 text-xs font-medium text-slate-900 hover:bg-slate-200/80",
+            children: "\u2B06\uFE0F Go Up"
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs("div", { className: "mb-6 space-y-2 border-b border-slate-100 pb-6", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "new-file.md",
+              value: newFileName,
+              onChange: (e) => setNewFileName(e.target.value),
+              className: "flex h-9 w-full rounded-md border border-slate-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: createFile,
+              disabled: loading || !newFileName,
+              className: "inline-flex h-9 w-full items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-slate-50 shadow hover:bg-slate-900/90 disabled:pointer-events-none disabled:opacity-50",
+              children: "+ New File"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("ul", { className: "space-y-1", children: [
+          entries.length === 0 && /* @__PURE__ */ jsx("li", { className: "text-sm text-slate-500 italic px-2", children: "Empty directory" }),
+          entries.map((entry) => /* @__PURE__ */ jsx("li", { children: entry.type === "directory" ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => navigateToDir(entry.path),
+              className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-slate-100 text-slate-700 hover:text-slate-900",
+              children: [
+                "\u{1F4C1} ",
+                entry.name
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: "group flex items-center justify-between rounded-md hover:bg-slate-100 px-2 py-1.5", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => loadFile(entry.path),
+                className: `flex-1 text-left text-sm truncate ${selectedFile === entry.path ? "font-semibold text-slate-900" : "text-slate-600 group-hover:text-slate-900"}`,
+                children: [
+                  "\u{1F4C4} ",
+                  entry.name
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => deleteFile(entry.path),
+                disabled: loading,
+                className: "opacity-0 group-hover:opacity-100 ml-2 text-slate-400 hover:text-red-500 transition-opacity",
+                title: "Delete file",
+                children: "\u2715"
+              }
+            )
+          ] }) }, entry.path))
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-slate-200 bg-white text-slate-950 shadow-sm min-h-[500px]", children: selectedFile ? /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 pb-6 border-b border-slate-100", children: [
+          /* @__PURE__ */ jsxs("h2", { className: "text-xl font-semibold tracking-tight break-all", children: [
+            "Edit: ",
+            selectedFile
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 shrink-0", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: duplicateFile,
+                disabled: loading,
+                className: "inline-flex h-9 items-center justify-center rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50",
+                children: "\u{1F4CB} Duplicate"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: saveFile,
+                disabled: loading,
+                className: "inline-flex h-9 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-slate-50 shadow hover:bg-slate-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50",
+                children: loading ? "Saving..." : "\u{1F4BE} Save Changes"
+              }
+            )
+          ] })
+        ] }),
+        message && /* @__PURE__ */ jsx(
           "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
-                      ))
-                    ] })
-                  ]
-                }
-              ),
+            className: `mb-6 rounded-md p-3 text-sm flex items-center gap-2 ${message.includes("\u2705") ? "bg-green-50 text-green-900 border border-green-200" : "bg-red-50 text-red-900 border border-red-200"}`,
+            children: message
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium leading-none text-slate-500 uppercase tracking-wider", children: "Frontmatter Fields" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: addField,
+                className: "inline-flex h-8 items-center justify-center rounded-md bg-slate-100 px-3 text-xs font-medium text-slate-900 hover:bg-slate-200",
+                children: "+ Add Field"
+              }
+            )
+          ] }),
+          Object.keys(fields).length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-12 text-slate-500 border-2 border-dashed border-slate-200 rounded-lg", children: "No fields found. Add one or load a file layout." }) : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            Object.entries(fields).filter(([key]) => key !== "content").map(([key, field]) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    htmlFor: key,
+                    className: "text-sm font-medium bg-slate-100 px-2 py-0.5 rounded text-slate-700",
+                    children: [
+                      key,
+                      " ",
+                      /* @__PURE__ */ jsxs("span", { className: "text-slate-400 font-normal text-xs ml-1", children: [
+                        "(",
+                        field.type,
+                        ")"
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => removeField(key),
+                    className: "text-xs text-red-500 hover:text-red-700 hover:underline",
+                    children: "Remove"
+                  }
+                )
+              ] }),
+              renderField(key, field)
+            ] }, key)),
+            fields["content"] && /* @__PURE__ */ jsxs("div", { className: "pt-6 mt-6 border-t border-slate-100", children: [
               /* @__PURE__ */ jsx(
-                "div",
+                "label",
                 {
-                  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" })
-                      ]
-                    }
-                  )
+                  htmlFor: "content",
+                  className: "block text-sm font-medium mb-3 text-slate-900",
+                  children: "Content (Markdown)"
                 }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
+              ),
+              renderField("content", fields["content"])
+            ] })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-[500px] text-slate-500", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-4xl mb-4", children: "\u{1F4C4}" }),
+        /* @__PURE__ */ jsx("p", { children: "Select a file to edit or create a new one." })
+      ] }) }) })
+    ] })
+  ] });
 }
 
 // src/ui/Login.tsx
@@ -1670,133 +1316,67 @@ function Login() {
       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",
+  return /* @__PURE__ */ jsx2("div", { className: "flex min-h-screen items-center justify-center bg-slate-50 p-4 font-sans text-slate-900", children: /* @__PURE__ */ jsxs2("div", { className: "w-full max-w-[350px] rounded-xl border border-slate-200 bg-white shadow-sm", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col space-y-1.5 p-6", children: [
+      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold leading-none tracking-tight", children: "Admin Login" }),
+      /* @__PURE__ */ jsx2("p", { className: "text-sm text-slate-500", children: "Enter your credentials to access the CMS" })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "p-6 pt-0", children: /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx2(
+          "label",
+          {
+            htmlFor: "username",
+            className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            children: "Username"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: "username",
+            type: "text",
+            value: username,
+            onChange: (e) => setUsername(e.target.value),
+            required: true,
+            autoFocus: true,
+            className: "flex h-9 w-full rounded-md border border-slate-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx2(
+          "label",
+          {
+            htmlFor: "password",
+            className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            children: "Password"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: "password",
+            type: "password",
+            value: password,
+            onChange: (e) => setPassword(e.target.value),
+            required: true,
+            className: "flex h-9 w-full rounded-md border border-slate-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50"
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx2("div", { className: "rounded-md bg-red-50 p-3 text-sm text-red-500 border border-red-200", children: error }),
+      /* @__PURE__ */ jsx2(
+        "button",
         {
-          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"
-                }
-              )
-            ] })
-          ]
+          type: "submit",
+          disabled: loading,
+          className: "inline-flex h-9 w-full items-center justify-center whitespace-nowrap rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-slate-50 shadow transition-colors hover:bg-slate-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50",
+          children: loading ? "Logging in..." : "Login"
         }
       )
-    }
-  );
+    ] }) })
+  ] }) });
 }
 
 // src/middleware/auth.ts
@@ -2080,20 +1660,48 @@ export const config = {
     );
     console.log("\u2705 Created middleware.ts");
   }
-  const envExamplePath = path3.join(process.cwd(), ".env.local.example");
-  await fs2.writeFile(
-    envExamplePath,
-    `CMS_ADMIN_USERNAME=admin
+  console.log("\n\u2699\uFE0F  Configuration");
+  const rl = await import("readline");
+  const askQuestion = (query) => {
+    const interface_ = rl.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+    return new Promise((resolve) => {
+      interface_.question(query, (ans) => {
+        interface_.close();
+        resolve(ans);
+      });
+    });
+  };
+  const storageChoice = await askQuestion(
+    "Select production storage provider:\n  1. GitHub (default)\n  2. S3 / Cloudflare R2 / Vercel Blob\nEnter choice [1]: "
+  );
+  const isS3 = storageChoice.trim() === "2";
+  let envContent = `CMS_ADMIN_USERNAME=admin
 CMS_ADMIN_PASSWORD=password
 CMS_SESSION_SECRET=ensure_this_is_at_least_32_chars_long_random_string
 
-# GitHub Storage (Production)
+`;
+  if (isS3) {
+    envContent += `# S3 / Cloudflare R2 / Vercel Blob Storage
+STORAGE_BUCKET=my-bucket
+STORAGE_ENDPOINT=https://<accountid>.r2.cloudflarestorage.com
+STORAGE_ACCESS_KEY_ID=
+STORAGE_SECRET_ACCESS_KEY=
+STORAGE_REGION=auto
+STORAGE_PUBLIC_URL=https://pub-<id>.r2.dev
+`;
+  } else {
+    envContent += `# GitHub Storage (Production)
+# Generate at https://github.com/settings/tokens (Needs 'repo' or 'contents:write' scope)
 GITHUB_TOKEN=
 GITHUB_REPO=owner/repo
 GITHUB_BRANCH=main
-`,
-    "utf-8"
-  );
+`;
+  }
+  const envExamplePath = path3.join(process.cwd(), ".env.local.example");
+  await fs2.writeFile(envExamplePath, envContent, "utf-8");
   console.log("");
   console.log("\u{1F389} CMS initialized successfully!");
   console.log(