@dalgoridim/headless-cms 0.1.0

package/dist/client/index.cjs

@@ -0,0 +1,1018 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client/index.ts
+var client_exports = {};
+__export(client_exports, {
+  CmsAuthContext: () => CmsAuthContext,
+  CmsAuthProvider: () => CmsAuthProvider,
+  ContentEditSpan: () => ContentEditSpan,
+  EditableImage: () => EditableImage,
+  MarkdownEditor: () => MarkdownEditor,
+  PageProvider: () => PageProvider,
+  ProjectContentEditor: () => ProjectContentEditor,
+  cn: () => cn,
+  useCmsAuth: () => useCmsAuth,
+  usePageContext: () => usePageContext
+});
+module.exports = __toCommonJS(client_exports);
+
+// src/client/PageProvider.tsx
+var import_react = require("react");
+var import_sonner = require("sonner");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultNotifier = {
+  success: (m) => import_sonner.toast.success(m),
+  error: (m) => import_sonner.toast.error(m)
+};
+var PageContext = (0, import_react.createContext)(void 0);
+var dirtyKey = (collection, sectionKey) => `${collection}:${sectionKey}`;
+var PageProvider = ({
+  children,
+  initialSections = {},
+  apiBasePath = "/api/admin",
+  storage,
+  notify = defaultNotifier
+}) => {
+  const [saving, setSaving] = (0, import_react.useState)(false);
+  const [sections, setSections] = (0, import_react.useState)(initialSections);
+  const [pendingImages, setPendingImages] = (0, import_react.useState)([]);
+  const [dirtySections, setDirtySections] = (0, import_react.useState)(/* @__PURE__ */ new Set());
+  const hasUnsavedChanges = dirtySections.size > 0;
+  const resolveImageUrl = (0, import_react.useCallback)(
+    async (img) => {
+      if (img.isExternal) return img.localUrl;
+      if (!storage) {
+        throw new Error(
+          "PageProvider received a file upload but no `storage` adapter was provided."
+        );
+      }
+      const { url } = await storage.upload(img.file);
+      return url;
+    },
+    [storage]
+  );
+  const setSection = (0, import_react.useCallback)(
+    (collection, key, section) => {
+      setSections((prev) => __spreadProps(__spreadValues({}, prev), {
+        [collection]: __spreadProps(__spreadValues({}, prev[collection]), { [key]: section })
+      }));
+    },
+    []
+  );
+  const editField = (0, import_react.useCallback)(
+    (collection, sectionKey, fieldKey, value) => {
+      setSections((prev) => {
+        var _a;
+        const currentSection = (_a = prev[collection]) == null ? void 0 : _a[sectionKey];
+        if (!currentSection) {
+          console.error(`Section not found: ${collection}/${sectionKey}`);
+          return prev;
+        }
+        const keys = fieldKey.split(".");
+        const updated = __spreadValues({}, currentSection);
+        if (keys.length === 1) {
+          updated[fieldKey] = value;
+        } else {
+          let current = updated;
+          for (let i = 0; i < keys.length - 1; i++) {
+            if (!current[keys[i]]) current[keys[i]] = {};
+            current[keys[i]] = __spreadValues({}, current[keys[i]]);
+            current = current[keys[i]];
+          }
+          current[keys[keys.length - 1]] = value;
+        }
+        return __spreadProps(__spreadValues({}, prev), {
+          [collection]: __spreadProps(__spreadValues({}, prev[collection]), { [sectionKey]: updated })
+        });
+      });
+      setDirtySections((prev) => {
+        const next = new Set(prev);
+        next.add(dirtyKey(collection, sectionKey));
+        return next;
+      });
+    },
+    []
+  );
+  const setPendingImage = (0, import_react.useCallback)((image) => {
+    setPendingImages((prev) => [
+      ...prev.filter(
+        (img) => !(img.collection === image.collection && img.sectionKey === image.sectionKey && img.fieldKey === image.fieldKey)
+      ),
+      image
+    ]);
+    setDirtySections((prev) => {
+      const next = new Set(prev);
+      next.add(dirtyKey(image.collection, image.sectionKey));
+      return next;
+    });
+  }, []);
+  const persist = (0, import_react.useCallback)(
+    async (section) => {
+      const response = await fetch(
+        `${apiBasePath}/${section.collection}/${section.id}`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(section)
+        }
+      );
+      if (!response.ok) throw new Error("Failed to save section");
+    },
+    [apiBasePath]
+  );
+  const saveSection = (0, import_react.useCallback)(
+    async (collection, sectionKey) => {
+      var _a;
+      if (saving) return;
+      setSaving(true);
+      try {
+        const section = (_a = sections[collection]) == null ? void 0 : _a[sectionKey];
+        if (!(section == null ? void 0 : section.id) || !(section == null ? void 0 : section.collection)) {
+          console.error(`Invalid section: ${collection}/${sectionKey}`);
+          setSaving(false);
+          return;
+        }
+        const images = pendingImages.filter(
+          (img) => img.collection === collection && img.sectionKey === sectionKey
+        );
+        let updatedSection = __spreadValues({}, section);
+        for (const img of images) {
+          const url = await resolveImageUrl(img);
+          const keys = img.fieldKey.split(".");
+          if (keys.length === 1) {
+            updatedSection = __spreadProps(__spreadValues({}, updatedSection), { [img.fieldKey]: url });
+          } else {
+            let current = updatedSection;
+            for (let i = 0; i < keys.length - 1; i++) {
+              if (!current[keys[i]]) current[keys[i]] = {};
+              current = current[keys[i]];
+            }
+            current[keys[keys.length - 1]] = url;
+          }
+        }
+        await persist(updatedSection);
+        setSections((prev) => __spreadProps(__spreadValues({}, prev), {
+          [collection]: __spreadProps(__spreadValues({}, prev[collection]), { [sectionKey]: updatedSection })
+        }));
+        setPendingImages(
+          (prev) => prev.filter(
+            (img) => !(img.collection === collection && img.sectionKey === sectionKey)
+          )
+        );
+        setDirtySections((prev) => {
+          const next = new Set(prev);
+          next.delete(dirtyKey(collection, sectionKey));
+          return next;
+        });
+        notify.success("Changes saved successfully!");
+      } catch (error) {
+        console.error("Save failed:", error);
+        notify.error("Failed to save changes");
+      } finally {
+        setSaving(false);
+      }
+    },
+    [sections, pendingImages, saving, resolveImageUrl, persist, notify]
+  );
+  const saveAll = (0, import_react.useCallback)(async () => {
+    var _a;
+    if (saving || dirtySections.size === 0) return;
+    setSaving(true);
+    try {
+      const updatedSections = __spreadValues({}, sections);
+      for (const img of pendingImages) {
+        const url = await resolveImageUrl(img);
+        if (!updatedSections[img.collection])
+          updatedSections[img.collection] = {};
+        if (!updatedSections[img.collection][img.sectionKey]) {
+          updatedSections[img.collection][img.sectionKey] = {
+            id: img.docId,
+            collection: img.collection
+          };
+        }
+        const keys = img.fieldKey.split(".");
+        let current = updatedSections[img.collection][img.sectionKey];
+        if (keys.length === 1) {
+          updatedSections[img.collection][img.sectionKey] = __spreadProps(__spreadValues({}, current), {
+            [img.fieldKey]: url
+          });
+        } else {
+          for (let i = 0; i < keys.length - 1; i++) {
+            if (!current[keys[i]]) current[keys[i]] = {};
+            current = current[keys[i]];
+          }
+          current[keys[keys.length - 1]] = url;
+        }
+      }
+      for (const entry of dirtySections) {
+        const [collection, key] = entry.split(":");
+        const section = (_a = updatedSections[collection]) == null ? void 0 : _a[key];
+        if (!(section == null ? void 0 : section.id) || !(section == null ? void 0 : section.collection)) {
+          console.error(`Invalid section for save: ${entry}`);
+          continue;
+        }
+        await persist(section);
+      }
+      setSections(updatedSections);
+      setPendingImages([]);
+      setDirtySections(/* @__PURE__ */ new Set());
+      notify.success("All changes saved successfully!");
+    } catch (error) {
+      console.error("Save all failed:", error);
+      notify.error("Failed to save changes");
+    } finally {
+      setSaving(false);
+    }
+  }, [sections, pendingImages, dirtySections, saving, resolveImageUrl, persist, notify]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    PageContext.Provider,
+    {
+      value: {
+        sections,
+        hasUnsavedChanges,
+        pendingImages,
+        saving,
+        setSection,
+        editField,
+        setPendingImage,
+        saveSection,
+        saveAll
+      },
+      children
+    }
+  );
+};
+var usePageContext = () => {
+  const context = (0, import_react.useContext)(PageContext);
+  if (!context)
+    throw new Error("usePageContext must be used within a PageProvider");
+  return context;
+};
+
+// src/client/auth.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CmsAuthContext = (0, import_react2.createContext)(void 0);
+function useCmsAuth() {
+  const ctx = (0, import_react2.useContext)(CmsAuthContext);
+  if (!ctx) {
+    throw new Error(
+      "useCmsAuth must be used within a CmsAuthProvider (or a built-in auth provider such as FirebaseAuthProvider)."
+    );
+  }
+  return ctx;
+}
+function CmsAuthProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CmsAuthContext.Provider, { value, children });
+}
+
+// src/client/ContentEditSpan.tsx
+var import_react3 = require("react");
+
+// src/client/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/client/ContentEditSpan.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PATTERNS = [
+  { regex: /^\*\*(.+?)\*\*/, mark: "bold" },
+  { regex: /^\*(.+?)\*/, mark: "italic" },
+  { regex: /^~~br~~/, mark: "break" },
+  { regex: /^~~(.+?)~~/, mark: "strike" },
+  { regex: /^\^\^(.+?)\^\^/, mark: "primary" },
+  { regex: /^__(.+?)__/, mark: "underline" },
+  {
+    regex: /^\[(.+?)\]\((https?:\/\/[^\s)]+)\)/,
+    mark: "link",
+    isLink: true
+  }
+];
+function parseSpecialString(input) {
+  const out = [];
+  let text = input;
+  while (text.length) {
+    let matched = false;
+    for (const p of PATTERNS) {
+      const m = p.regex.exec(text);
+      if (!m) continue;
+      matched = true;
+      if (p.mark === "break") {
+        out.push({ text: "\n", break: true });
+      } else if ("isLink" in p) {
+        out.push({ text: m[1], link: m[2] });
+      } else {
+        const inner = parseSpecialString(m[1]);
+        inner.forEach(
+          (n) => n[p.mark] = true
+        );
+        out.push(...inner);
+      }
+      text = text.slice(m[0].length);
+      break;
+    }
+    if (!matched) {
+      out.push({ text: text[0] });
+      text = text.slice(1);
+    }
+  }
+  return out;
+}
+function RenderStatic({
+  raw,
+  as: Component = "span",
+  className
+}) {
+  const nodes = parseSpecialString(raw);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: nodes.map((l, i) => {
+    if (l.break) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("br", {}, i);
+    let el = l.text;
+    if (l.bold) el = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: el });
+    if (l.italic) el = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("em", { children: el });
+    if (l.strike) el = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s", { children: el });
+    if (l.primary || l.underline) {
+      el = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          style: {
+            color: l.primary ? "var(--color-primary)" : void 0,
+            textDecoration: l.underline ? "underline" : void 0
+          },
+          children: el
+        }
+      );
+    }
+    if (l.link) {
+      el = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "a",
+        {
+          href: l.link,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline hover:underline",
+          children: el
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: el }, i);
+  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { className, children: content });
+}
+function getNestedValue(obj, path) {
+  const keys = path.split(".");
+  let current = obj;
+  for (const key of keys) {
+    if (current == null || current[key] === void 0)
+      return void 0;
+    current = current[key];
+  }
+  return current;
+}
+function ContentEditSpan({
+  collection = "portfolio",
+  sectionKey,
+  fieldKey,
+  className,
+  children,
+  as = "span"
+}) {
+  var _a, _b;
+  const { sections, editField } = usePageContext();
+  const { isEditing } = useCmsAuth();
+  const section = (_a = sections[collection]) == null ? void 0 : _a[sectionKey];
+  const raw = (_b = getNestedValue(section, fieldKey)) != null ? _b : typeof children === "string" ? children : "";
+  if (!isEditing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderStatic, { raw, as, className });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    EditableContentSpan,
+    {
+      collection,
+      sectionKey,
+      fieldKey,
+      className,
+      raw,
+      editField,
+      as
+    }
+  );
+}
+function EditableContentSpan({
+  collection = "portfolio",
+  sectionKey,
+  fieldKey,
+  className,
+  raw,
+  editField,
+  as: Component = "span"
+}) {
+  const { isEditing } = useCmsAuth();
+  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
+  const [editValue, setEditValue] = (0, import_react3.useState)(raw);
+  const contentRef = (0, import_react3.useRef)(null);
+  const rawRef = (0, import_react3.useRef)(raw);
+  (0, import_react3.useEffect)(() => {
+    if (!isFocused && rawRef.current !== raw) {
+      rawRef.current = raw;
+    }
+  }, [raw, isFocused]);
+  (0, import_react3.useEffect)(() => {
+    if (!isFocused && rawRef.current !== editValue) {
+      setEditValue(rawRef.current);
+    }
+  }, [isFocused, editValue]);
+  const handleInput = (0, import_react3.useCallback)(() => {
+    if (contentRef.current) {
+      setEditValue(contentRef.current.textContent || "");
+    }
+  }, []);
+  const handleBlur = (0, import_react3.useCallback)(() => {
+    setIsFocused(false);
+    if (editValue !== raw) {
+      editField(collection, sectionKey, fieldKey, editValue);
+    }
+  }, [editValue, raw, collection, sectionKey, fieldKey, editField]);
+  const handleFocus = (0, import_react3.useCallback)(() => {
+    setIsFocused(true);
+    if (contentRef.current) {
+      contentRef.current.textContent = editValue;
+      setTimeout(() => {
+        if (contentRef.current) {
+          const range = document.createRange();
+          const sel = window.getSelection();
+          range.selectNodeContents(contentRef.current);
+          range.collapse(false);
+          sel == null ? void 0 : sel.removeAllRanges();
+          sel == null ? void 0 : sel.addRange(range);
+        }
+      }, 0);
+    }
+  }, [editValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Component,
+    {
+      ref: contentRef,
+      className: cn(
+        className,
+        "outline-none transition-all duration-200",
+        "whitespace-pre-wrap break-words overflow-wrap-anywhere",
+        isFocused && "ring-2 ring-primary/50 ring-offset-2 ring-offset-neutral-900 rounded-sm px-2",
+        !isFocused && isEditing && "hover:ring-1 hover:ring-primary/30 hover:ring-offset-1 hover:ring-offset-neutral-900 hover:rounded-sm hover:px-2 cursor-text"
+      ),
+      contentEditable: isEditing,
+      suppressContentEditableWarning: true,
+      onInput: handleInput,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      children: !isFocused && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderStatic, { raw: editValue, as: "span" })
+    },
+    isFocused ? "editing" : "static"
+  );
+}
+
+// src/client/EditableImage.tsx
+var import_react4 = require("react");
+var import_react_dom = require("react-dom");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function EditableImage({
+  sectionKey,
+  fieldKey,
+  src,
+  collection,
+  docId,
+  className
+}) {
+  const { isEditing } = useCmsAuth();
+  const { editField, setPendingImage, pendingImages, saving } = usePageContext();
+  const [preview, setPreview] = (0, import_react4.useState)(src);
+  const [hasError, setHasError] = (0, import_react4.useState)(false);
+  const [showUrlModal, setShowUrlModal] = (0, import_react4.useState)(false);
+  const [urlInput, setUrlInput] = (0, import_react4.useState)("");
+  const [urlPreview, setUrlPreview] = (0, import_react4.useState)("");
+  const inputRef = (0, import_react4.useRef)(null);
+  const pendingImage = pendingImages.find(
+    (img) => img.sectionKey === sectionKey && img.fieldKey === fieldKey
+  );
+  const imgSrc = (pendingImage == null ? void 0 : pendingImage.localUrl) || preview;
+  const handleFileChange = (e) => {
+    var _a;
+    if (saving) return;
+    const file = (_a = e.target.files) == null ? void 0 : _a[0];
+    if (!file) return;
+    const localUrl = URL.createObjectURL(file);
+    setPreview(localUrl);
+    setHasError(false);
+    editField(collection, sectionKey, fieldKey, localUrl);
+    setPendingImage({
+      file,
+      localUrl,
+      sectionKey,
+      fieldKey,
+      collection,
+      docId,
+      isExternal: false
+    });
+  };
+  const handleUrlConfirm = () => {
+    if (!urlPreview) return;
+    setPreview(urlPreview);
+    setHasError(false);
+    editField(collection, sectionKey, fieldKey, urlPreview);
+    setPendingImage({
+      file: null,
+      localUrl: urlPreview,
+      sectionKey,
+      fieldKey,
+      collection,
+      docId,
+      isExternal: true
+    });
+    setShowUrlModal(false);
+    setUrlInput("");
+    setUrlPreview("");
+  };
+  const handleUrlChange = (value) => {
+    setUrlInput(value);
+    try {
+      const url = new URL(value);
+      if (url.protocol === "http:" || url.protocol === "https:") {
+        setUrlPreview(value);
+      } else {
+        setUrlPreview("");
+      }
+    } catch (e) {
+      setUrlPreview("");
+    }
+  };
+  const imageNode = hasError || !imgSrc ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center justify-center w-full h-full p-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-32 h-32 mx-auto rounded-2xl bg-neutral-800/50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "svg",
+      {
+        className: "w-16 h-16 text-neutral-600",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 1.5,
+            d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-neutral-500 text-lg", children: "No image available" })
+  ] }) }) : (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "img",
+      {
+        src: imgSrc,
+        alt: "",
+        className: "w-full h-full object-cover",
+        onError: () => setHasError(true)
+      }
+    )
+  );
+  if (!isEditing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, children: imageNode });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("relative group", className), children: [
+      imageNode,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity", children: saving ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-8 h-8 border-4 border-white border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-12", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_lucide_react.CameraIcon,
+          {
+            className: "w-12 h-12 text-white cursor-pointer hover:text-primary",
+            onClick: (e) => {
+              var _a;
+              e.stopPropagation();
+              (_a = inputRef.current) == null ? void 0 : _a.click();
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_lucide_react.Link2Icon,
+          {
+            className: "w-12 h-12 text-white cursor-pointer hover:text-primary",
+            onClick: (e) => {
+              e.stopPropagation();
+              setShowUrlModal(true);
+            }
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          accept: "image/*",
+          disabled: saving,
+          onChange: handleFileChange,
+          className: "absolute inset-0 opacity-0 pointer-events-none"
+        }
+      )
+    ] }),
+    showUrlModal && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fixed inset-0 bg-black/70 flex items-center justify-center z-9999 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "bg-neutral-900 rounded-xl p-6 max-w-sm w-full space-y-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "text-lg font-bold", children: "Add Image URL" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            type: "text",
+            value: urlInput,
+            onChange: (e) => handleUrlChange(e.target.value),
+            placeholder: "https://example.com/image.png",
+            className: "w-full px-3 py-2 rounded bg-neutral-800 border border-neutral-700"
+          }
+        ),
+        urlPreview ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "img",
+            {
+              src: urlPreview,
+              alt: "",
+              className: "w-full h-40 object-contain rounded",
+              onError: () => setHasError(true)
+            }
+          )
+        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-40 flex items-center justify-center text-neutral-500", children: "Invalid URL" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "button",
+            {
+              onClick: () => setShowUrlModal(false),
+              className: "px-3 py-1 bg-neutral-700 rounded text-sm",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.XIcon, { className: "w-4 h-4 inline" }),
+                " Cancel"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "button",
+            {
+              onClick: handleUrlConfirm,
+              disabled: !urlPreview,
+              className: "px-3 py-1 bg-primary rounded text-sm disabled:opacity-50",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.CheckIcon, { className: "w-4 h-4 inline" }),
+                " Confirm"
+              ]
+            }
+          )
+        ] })
+      ] }) }),
+      document.body
+    )
+  ] });
+}
+
+// src/client/MarkdownEditor.tsx
+var import_react5 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_react_markdown = __toESM(require("react-markdown"), 1);
+var import_remark_gfm = __toESM(require("remark-gfm"), 1);
+var import_lucide_react2 = require("lucide-react");
+var import_sonner2 = require("sonner");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function MarkdownEditor({
+  initialValue,
+  onSave,
+  trigger,
+  title = "Edit Content"
+}) {
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const [content, setContent] = (0, import_react5.useState)(initialValue);
+  const [isPreview, setIsPreview] = (0, import_react5.useState)(false);
+  const handleOpen = () => {
+    setContent(initialValue);
+    setOpen(true);
+  };
+  const handleSave = () => {
+    onSave(content);
+    setOpen(false);
+  };
+  const handleCancel = () => {
+    setContent(initialValue);
+    setOpen(false);
+  };
+  const insertMarkdown = (before, after = "", placeholder = "text") => {
+    const textarea = document.querySelector(
+      "textarea[data-markdown-editor]"
+    );
+    if (!textarea) return;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const selectedText = content.substring(start, end) || placeholder;
+    const newText = content.substring(0, start) + before + selectedText + after + content.substring(end);
+    setContent(newText);
+    setTimeout(() => {
+      textarea.focus();
+      const newCursorPos = start + before.length + selectedText.length;
+      textarea.setSelectionRange(newCursorPos, newCursorPos);
+    }, 0);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    trigger ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { onClick: handleOpen, children: trigger }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: handleOpen,
+        className: "inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-neutral-700 hover:bg-neutral-800 transition-colors",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.EditIcon, { className: "w-4 h-4" }),
+          "Edit Content"
+        ]
+      }
+    ),
+    open && (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fixed inset-0 z-[10001] flex items-center justify-center bg-black/70 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "md:max-w-6xl w-full h-[90vh] flex flex-col bg-neutral-950 border border-neutral-800 rounded-xl overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-6 pt-6 pb-4 border-b border-neutral-800", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h2", { className: "text-2xl font-bold flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-2 bg-primary/10 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.TypeIcon, { className: "w-5 h-5 text-primary" }) }),
+            title
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setIsPreview(!isPreview),
+              className: cn(
+                "flex items-center gap-2 px-4 py-2 rounded-lg transition-all font-medium",
+                isPreview ? "bg-primary text-white" : "bg-neutral-800 hover:bg-neutral-700 text-neutral-300"
+              ),
+              children: isPreview ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.EditIcon, { className: "w-4 h-4" }),
+                "Edit"
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.EyeIcon, { className: "w-4 h-4" }),
+                "Preview"
+              ] })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 overflow-hidden flex flex-col", children: [
+          !isPreview && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1 px-4 py-3 border-b border-neutral-800 bg-neutral-900/50 overflow-x-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ToolbarButton,
+              {
+                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Heading1Icon, { className: "w-4 h-4" }),
+                label: "Heading 1",
+                onClick: () => insertMarkdown("# ", "", "Heading")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ToolbarButton,
+              {
+                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Heading2Icon, { className: "w-4 h-4" }),
+                label: "Heading 2",
+                onClick: () => insertMarkdown("## ", "", "Heading")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-px h-6 bg-neutral-700 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ToolbarButton,
+              {
+                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.BoldIcon, { className: "w-4 h-4" }),
+                label: "Bold",
+                onClick: () => insertMarkdown("**", "**", "bold text")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ToolbarButton,
+              {
+                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.ItalicIcon, { className: "w-4 h-4" }),
+                label: "Italic",
+                onClick: () => insertMarkdown("*", "*", "italic text")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-px h-6 bg-neutral-700 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ToolbarButton,
+              {
+                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.LinkIcon, { className: "w-4 h-4" }),
+                label: "Link",
+                onClick: () => insertMarkdown("[", "](url)", "link text")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ToolbarButton,
+              {
+                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.ImageIcon, { className: "w-4 h-4" }),
+                label: "Image",
+                onClick: () => insertMarkdown("![", "](url)", "alt text")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-px h-6 bg-neutral-700 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ToolbarButton,
+              {
+                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.ListIcon, { className: "w-4 h-4" }),
+                label: "List",
+                onClick: () => insertMarkdown("- ", "", "list item")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ToolbarButton,
+              {
+                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.CodeIcon, { className: "w-4 h-4" }),
+                label: "Code",
+                onClick: () => insertMarkdown("```\n", "\n```", "code")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1 overflow-auto p-6", children: isPreview ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "prose prose-invert prose-lg max-w-none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], children: content }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "h-full flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "textarea",
+              {
+                "data-markdown-editor": true,
+                value: content,
+                onChange: (e) => setContent(e.target.value),
+                className: "h-full w-full resize-none rounded-md font-mono text-sm bg-neutral-900/50 border border-neutral-800 p-3 outline-none focus:border-primary",
+                placeholder: "# Project Title\n\n## Overview\nWrite your description here..."
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mt-4 p-4 bg-neutral-900/50 border border-neutral-800 rounded-lg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h4", { className: "text-sm font-semibold mb-3 text-neutral-300 flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.CodeIcon, { className: "w-4 h-4 text-primary" }),
+                "Markdown Guide"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-3 text-xs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuideItem, { code: "# Heading 1", desc: "Main heading" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuideItem, { code: "## Heading 2", desc: "Sub heading" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuideItem, { code: "**bold**", desc: "Bold text" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuideItem, { code: "*italic*", desc: "Italic text" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuideItem, { code: "[link](url)", desc: "Hyperlink" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuideItem, { code: "- list item", desc: "Bullet list" })
+              ] })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-6 py-4 border-t border-neutral-800 bg-neutral-900/30", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-sm text-neutral-500", children: [
+            content.length,
+            " characters"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: handleCancel,
+                className: "inline-flex items-center gap-2 px-4 py-2 text-sm rounded-md border border-neutral-700 hover:bg-neutral-800 transition-colors",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.XIcon, { className: "w-4 h-4" }),
+                  "Cancel"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: handleSave,
+                className: "inline-flex items-center gap-2 px-4 py-2 text-sm rounded-md bg-primary text-white hover:opacity-90 transition-opacity",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.SaveIcon, { className: "w-4 h-4" }),
+                  "Save Content"
+                ]
+              }
+            )
+          ] })
+        ] }) })
+      ] }) }),
+      document.body
+    )
+  ] });
+}
+function ToolbarButton({
+  icon,
+  label,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title: label,
+      className: "p-2 rounded-lg hover:bg-neutral-800 text-neutral-400 hover:text-white transition-colors",
+      children: icon
+    }
+  );
+}
+function GuideItem({ code, desc }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { className: "text-primary bg-primary/10 px-2 py-1 rounded text-xs font-mono", children: code }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-neutral-500", children: desc })
+  ] });
+}
+function ProjectContentEditor({
+  content,
+  onSave
+}) {
+  const [saving, setSaving] = (0, import_react5.useState)(false);
+  const handleSave = async (newContent) => {
+    setSaving(true);
+    try {
+      await onSave(newContent);
+      import_sonner2.toast.success("Content saved successfully!");
+    } catch (error) {
+      console.error("Failed to save content:", error);
+      import_sonner2.toast.error("Failed to save content");
+    } finally {
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    MarkdownEditor,
+    {
+      initialValue: content,
+      onSave: handleSave,
+      title: "Edit Project Content",
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "button",
+        {
+          className: "px-4 py-2 bg-neutral-800 rounded-lg hover:bg-neutral-700 transition-colors flex items-center gap-2 border border-neutral-700 hover:border-primary/50",
+          disabled: saving,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.EditIcon, { className: "w-4 h-4" }),
+            saving ? "Saving..." : "Edit Full Content"
+          ]
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CmsAuthContext,
+  CmsAuthProvider,
+  ContentEditSpan,
+  EditableImage,
+  MarkdownEditor,
+  PageProvider,
+  ProjectContentEditor,
+  cn,
+  useCmsAuth,
+  usePageContext
+});
+//# sourceMappingURL=index.cjs.map