@mounaji_npm/forum 0.1.0

package/dist/mounajiforum.es.js

@@ -0,0 +1,1090 @@
+"use client";
+import { jsxs as a, jsx as r, Fragment as X } from "react/jsx-runtime";
+import { useState as A, useMemo as Z } from "react";
+function D({ categories: e = [], active: o = "all", onChange: t, isDark: n = !0, title: i = "Categories", style: d }) {
+  const l = n ? "var(--mn-color-card-dark, #0B0F23)" : "var(--mn-color-card-light, #FAFAF8)", p = n ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)", u = n ? "var(--mn-text-primary-dark, #F0F4FF)" : "var(--mn-text-primary-light, #1A1A2E)", b = n ? "var(--mn-text-secondary-dark, #94A3B8)" : "var(--mn-text-secondary-light, #64748B)";
+  return /* @__PURE__ */ a("div", { style: {
+    borderRadius: "var(--mn-radius-lg, 0.75rem)",
+    backgroundColor: l,
+    border: `1px solid ${p}`,
+    overflow: "hidden",
+    ...d
+  }, children: [
+    i && /* @__PURE__ */ r("div", { style: { padding: "12px 16px", borderBottom: `1px solid ${p}` }, children: /* @__PURE__ */ r("p", { style: { margin: 0, fontSize: "0.75rem", fontWeight: 600, color: b, textTransform: "uppercase", letterSpacing: "0.07em" }, children: i }) }),
+    /* @__PURE__ */ r("div", { style: { padding: "8px 0" }, children: e.map((f) => {
+      const s = o === f.id;
+      return /* @__PURE__ */ a(
+        "button",
+        {
+          onClick: () => t == null ? void 0 : t(f.id),
+          style: {
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "7px 16px",
+            border: "none",
+            cursor: "pointer",
+            fontFamily: "inherit",
+            backgroundColor: s ? n ? "rgba(59,130,246,0.1)" : "rgba(59,130,246,0.07)" : "transparent",
+            borderLeft: `3px solid ${s ? "var(--mn-color-primary, #3B82F6)" : "transparent"}`,
+            transition: "all 100ms",
+            gap: 8
+          },
+          onMouseEnter: (m) => {
+            s || (m.currentTarget.style.backgroundColor = n ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.03)");
+          },
+          onMouseLeave: (m) => {
+            s || (m.currentTarget.style.backgroundColor = "transparent");
+          },
+          children: [
+            /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [
+              f.icon && /* @__PURE__ */ r("span", { style: { fontSize: 14, flexShrink: 0 }, children: f.icon }),
+              /* @__PURE__ */ r("span", { style: {
+                fontSize: "0.875rem",
+                fontWeight: s ? 600 : 400,
+                color: s ? "var(--mn-color-primary, #3B82F6)" : u,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              }, children: f.label })
+            ] }),
+            f.count != null && /* @__PURE__ */ r("span", { style: {
+              fontSize: "0.7rem",
+              fontWeight: 500,
+              padding: "1px 7px",
+              borderRadius: 9999,
+              backgroundColor: s ? "rgba(59,130,246,0.15)" : n ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)",
+              color: s ? "var(--mn-color-primary, #3B82F6)" : b,
+              flexShrink: 0
+            }, children: f.count })
+          ]
+        },
+        f.id
+      );
+    }) })
+  ] });
+}
+function q({ count: e = 0, userVote: o = 0, onChange: t, vertical: n = !1, isDark: i = !0, size: d = "md" }) {
+  const [l, p] = A(null), u = l ?? o, b = l !== null ? e + (l - o) : e, f = u === 1 ? "#10B981" : i ? "#64748B" : "#94A3B8", s = u === -1 ? "#EF4444" : i ? "#64748B" : "#94A3B8", m = u === 1 ? "#10B981" : u === -1 ? "#EF4444" : i ? "#F0F4FF" : "#1A1A2E", F = d === "sm" ? 22 : 28, h = d === "sm" ? 11 : 13;
+  function S(B) {
+    const w = u === B ? 0 : B;
+    p(w), t == null || t(w);
+  }
+  return /* @__PURE__ */ a("div", { style: n ? { display: "flex", flexDirection: "column", alignItems: "center", gap: 2 } : { display: "flex", alignItems: "center", gap: 4 }, children: [
+    /* @__PURE__ */ r(V, { size: F, icon: "▲", color: f, iconSz: h, onClick: () => S(1), title: "Upvote" }),
+    /* @__PURE__ */ r("span", { style: { fontSize: d === "sm" ? "0.75rem" : "0.875rem", fontWeight: 700, color: m, minWidth: 20, textAlign: "center" }, children: b }),
+    n && /* @__PURE__ */ r(V, { size: F, icon: "▼", color: s, iconSz: h, onClick: () => S(-1), title: "Downvote" })
+  ] });
+}
+function V({ size: e, icon: o, color: t, iconSz: n, onClick: i, title: d }) {
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      onClick: i,
+      title: d,
+      style: {
+        width: e,
+        height: e,
+        borderRadius: 4,
+        border: "none",
+        cursor: "pointer",
+        backgroundColor: "transparent",
+        color: t,
+        fontSize: n,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "background 100ms, color 100ms",
+        padding: 0,
+        fontFamily: "inherit"
+      },
+      onMouseEnter: (l) => {
+        l.currentTarget.style.backgroundColor = "rgba(255,255,255,0.07)";
+      },
+      onMouseLeave: (l) => {
+        l.currentTarget.style.backgroundColor = "transparent";
+      },
+      children: o
+    }
+  );
+}
+function j({ author: e, date: o, prefix: t = "", isDark: n = !0, size: i = "md" }) {
+  const d = n ? "#94A3B8" : "#64748B", l = n ? "#F0F4FF" : "#1A1A2E", p = i === "sm" ? 18 : 22, u = i === "sm" ? "0.75rem" : "0.8125rem";
+  return /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ r(_, { name: (e == null ? void 0 : e.name) ?? "?", size: p, src: e == null ? void 0 : e.avatar }),
+    /* @__PURE__ */ r("span", { style: { fontSize: u, color: l, fontWeight: 500 }, children: (e == null ? void 0 : e.name) ?? "unknown" }),
+    (t || o) && /* @__PURE__ */ a("span", { style: { fontSize: u, color: d }, children: [
+      t && /* @__PURE__ */ a(X, { children: [
+        t,
+        " "
+      ] }),
+      o ? U(o) : ""
+    ] })
+  ] });
+}
+function Q({ label: e, onClick: o, isDark: t = !0 }) {
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      onClick: o,
+      style: {
+        fontSize: "0.7rem",
+        padding: "2px 8px",
+        borderRadius: 9999,
+        backgroundColor: t ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)",
+        color: t ? "#94A3B8" : "#64748B",
+        border: `1px solid ${t ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"}`,
+        cursor: o ? "pointer" : "default",
+        fontFamily: "inherit",
+        transition: "background 100ms"
+      },
+      children: [
+        "#",
+        e
+      ]
+    }
+  );
+}
+const G = {
+  announcements: { bg: "rgba(239,68,68,0.12)", text: "#F87171", border: "rgba(239,68,68,0.25)" },
+  general: { bg: "rgba(59,130,246,0.12)", text: "#60A5FA", border: "rgba(59,130,246,0.25)" },
+  questions: { bg: "rgba(245,158,11,0.12)", text: "#FCD34D", border: "rgba(245,158,11,0.25)" },
+  ideas: { bg: "rgba(139,92,246,0.12)", text: "#A78BFA", border: "rgba(139,92,246,0.25)" },
+  bugs: { bg: "rgba(239,68,68,0.12)", text: "#FCA5A5", border: "rgba(239,68,68,0.2)" },
+  default: { bg: "rgba(255,255,255,0.06)", text: "#94A3B8", border: "rgba(255,255,255,0.1)" }
+};
+function Y({ category: e }) {
+  const o = G[e == null ? void 0 : e.id] ?? G.default;
+  return /* @__PURE__ */ a("span", { style: { display: "inline-flex", alignItems: "center", gap: 4, fontSize: "0.7rem", fontWeight: 500, padding: "2px 8px", borderRadius: 9999, backgroundColor: o.bg, color: o.text, border: `1px solid ${o.border}` }, children: [
+    (e == null ? void 0 : e.icon) && /* @__PURE__ */ r("span", { children: e.icon }),
+    e == null ? void 0 : e.label
+  ] });
+}
+function _({ name: e, size: o = 24, src: t }) {
+  const n = (e ?? "?").slice(0, 1).toUpperCase(), d = `hsl(${[...e ?? ""].reduce((l, p) => (l * 31 + p.charCodeAt(0)) % 360, 0)}, 55%, 35%)`;
+  return t ? /* @__PURE__ */ r("img", { src: t, alt: e, style: { width: o, height: o, borderRadius: "50%", objectFit: "cover" } }) : /* @__PURE__ */ r("div", { style: { width: o, height: o, borderRadius: "50%", backgroundColor: d, display: "flex", alignItems: "center", justifyContent: "center", fontSize: o * 0.45, fontWeight: 700, color: "#fff", flexShrink: 0, userSelect: "none" }, children: n });
+}
+function U(e) {
+  const o = typeof e == "string" ? new Date(e) : e, t = (Date.now() - o.getTime()) / 1e3;
+  return t < 60 ? "just now" : t < 3600 ? `${Math.floor(t / 60)}m ago` : t < 86400 ? `${Math.floor(t / 3600)}h ago` : t < 604800 ? `${Math.floor(t / 86400)}d ago` : o.toLocaleDateString();
+}
+function ee({ post: e, onClick: o, onVote: t, isDark: n = !0, compact: i = !1, style: d }) {
+  var f;
+  const l = n ? "var(--mn-color-card-dark, #0B0F23)" : "var(--mn-color-card-light, #FAFAF8)", p = n ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)", u = n ? "var(--mn-text-primary-dark, #F0F4FF)" : "var(--mn-text-primary-light, #1A1A2E)", b = n ? "var(--mn-text-secondary-dark, #94A3B8)" : "var(--mn-text-secondary-light, #64748B)";
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      onClick: o,
+      style: {
+        display: "flex",
+        gap: 14,
+        padding: i ? "12px 16px" : "16px 18px",
+        borderRadius: "var(--mn-radius-lg, 0.75rem)",
+        backgroundColor: l,
+        border: `1px solid ${p}`,
+        cursor: o ? "pointer" : "default",
+        transition: "border-color 120ms, background 120ms",
+        ...d
+      },
+      onMouseEnter: (s) => {
+        o && (s.currentTarget.style.borderColor = n ? "rgba(255,255,255,0.14)" : "rgba(0,0,0,0.16)");
+      },
+      onMouseLeave: (s) => {
+        s.currentTarget.style.borderColor = p;
+      },
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            onClick: (s) => s.stopPropagation(),
+            style: { flexShrink: 0, paddingTop: 2 },
+            children: /* @__PURE__ */ r(
+              q,
+              {
+                count: e.votes,
+                userVote: e.userVote ?? 0,
+                onChange: (s) => t == null ? void 0 : t(e.id, s),
+                vertical: !0,
+                isDark: n,
+                size: "sm"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ a("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ a("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }, children: [
+            e.isPinned && /* @__PURE__ */ r("span", { style: { fontSize: "0.7rem", fontWeight: 600, padding: "2px 7px", borderRadius: 9999, backgroundColor: "rgba(245,158,11,0.12)", color: "#FCD34D", border: "1px solid rgba(245,158,11,0.25)" }, children: "📌 Pinned" }),
+            e.isSolved && /* @__PURE__ */ r("span", { style: { fontSize: "0.7rem", fontWeight: 600, padding: "2px 7px", borderRadius: 9999, backgroundColor: "rgba(16,185,129,0.12)", color: "#34D399", border: "1px solid rgba(16,185,129,0.25)" }, children: "✓ Solved" }),
+            /* @__PURE__ */ r(Y, { category: e.category })
+          ] }),
+          /* @__PURE__ */ r("h3", { style: { margin: 0, fontSize: i ? "0.9375rem" : "1rem", fontWeight: 600, color: u, lineHeight: 1.4 }, children: e.title }),
+          !i && e.body && /* @__PURE__ */ r("p", { style: { margin: 0, fontSize: "0.8125rem", color: b, lineHeight: 1.55, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }, children: e.body }),
+          ((f = e.tags) == null ? void 0 : f.length) > 0 && /* @__PURE__ */ r("div", { style: { display: "flex", gap: 5, flexWrap: "wrap" }, children: e.tags.map((s) => /* @__PURE__ */ r(Q, { label: s, isDark: n }, s)) }),
+          /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", marginTop: 2 }, children: [
+            /* @__PURE__ */ r(j, { author: e.author, date: e.createdAt, isDark: n, size: "sm" }),
+            /* @__PURE__ */ r(N, { icon: "💬", value: e.replyCount, label: "replies", isDark: n }),
+            /* @__PURE__ */ r(N, { icon: "👁", value: e.viewCount, label: "views", isDark: n })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function N({ icon: e, value: o, label: t, isDark: n }) {
+  return /* @__PURE__ */ a("span", { style: { display: "flex", alignItems: "center", gap: 4, fontSize: "0.75rem", color: n ? "#64748B" : "#94A3B8" }, children: [
+    /* @__PURE__ */ r("span", { style: { fontSize: 12 }, children: e }),
+    o,
+    " ",
+    t
+  ] });
+}
+function re({ posts: e = [], onPostClick: o, onVote: t, isLoading: n = !1, isDark: i = !0 }) {
+  return n ? /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: Array.from({ length: 4 }).map((d, l) => /* @__PURE__ */ r(ne, { isDark: i }, l)) }) : e.length === 0 ? /* @__PURE__ */ r(te, { isDark: i }) : /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: e.map((d) => /* @__PURE__ */ r(
+    ee,
+    {
+      post: d,
+      onClick: () => o == null ? void 0 : o(d.id),
+      onVote: t,
+      isDark: i
+    },
+    d.id
+  )) });
+}
+function te({ isDark: e = !0, message: o = "No posts yet", cta: t, onCta: n }) {
+  return /* @__PURE__ */ a("div", { style: { textAlign: "center", padding: "64px 24px", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
+    /* @__PURE__ */ r("p", { style: { fontSize: 40, margin: 0 }, children: "💬" }),
+    /* @__PURE__ */ r("p", { style: { margin: 0, fontSize: "1rem", fontWeight: 600, color: e ? "#F0F4FF" : "#1A1A2E" }, children: o }),
+    /* @__PURE__ */ r("p", { style: { margin: 0, fontSize: "0.875rem", color: e ? "#94A3B8" : "#64748B" }, children: "Be the first to start a discussion." }),
+    t && /* @__PURE__ */ r(
+      "button",
+      {
+        onClick: n,
+        style: { marginTop: 8, padding: "8px 20px", borderRadius: "var(--mn-radius-md, 0.5rem)", border: "none", cursor: "pointer", backgroundColor: "var(--mn-color-primary, #3B82F6)", color: "#fff", fontSize: "0.875rem", fontWeight: 600, fontFamily: "inherit" },
+        children: t
+      }
+    )
+  ] });
+}
+function ne({ isDark: e }) {
+  const o = e ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)", t = e ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)", n = (i, d = 12) => ({ width: i, height: d, borderRadius: 6, backgroundColor: o, animation: "mn-pulse 1.4s ease infinite" });
+  return /* @__PURE__ */ a("div", { style: { display: "flex", gap: 14, padding: "16px 18px", borderRadius: "var(--mn-radius-lg, 0.75rem)", backgroundColor: e ? "var(--mn-color-card-dark, #0B0F23)" : "var(--mn-color-card-light, #FAFAF8)", border: `1px solid ${t}` }, children: [
+    /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 6, paddingTop: 2, flexShrink: 0 }, children: [
+      /* @__PURE__ */ r("div", { style: n(22, 10) }),
+      /* @__PURE__ */ r("div", { style: n(22, 10) })
+    ] }),
+    /* @__PURE__ */ a("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 9 }, children: [
+      /* @__PURE__ */ r("div", { style: n("60%", 8) }),
+      /* @__PURE__ */ r("div", { style: n("85%", 14) }),
+      /* @__PURE__ */ r("div", { style: n("50%", 8) }),
+      /* @__PURE__ */ r("div", { style: n("40%", 8) })
+    ] }),
+    /* @__PURE__ */ r("style", { children: "@keyframes mn-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }" })
+  ] });
+}
+const K = [
+  { id: "all", label: "All Posts", icon: "◉", count: 124 },
+  { id: "announcements", label: "Announcements", icon: "📣", count: 8, pinned: !0 },
+  { id: "general", label: "General", icon: "💬", count: 32 },
+  { id: "questions", label: "Questions", icon: "❓", count: 45 },
+  { id: "ideas", label: "Ideas", icon: "💡", count: 27 },
+  { id: "bugs", label: "Bug Reports", icon: "🐛", count: 12 }
+], J = [
+  {
+    id: "1",
+    title: "Introducing the new dark mode token system",
+    body: "We have completely overhauled the design token system to support seamless dark/light mode switching. The new system uses CSS custom properties under a `data-mn-theme` attribute, which means zero-JavaScript theme switching in most cases.",
+    author: { id: "u1", name: "alex_m", avatar: null },
+    category: { id: "announcements", label: "Announcements", icon: "📣" },
+    tags: ["design-system", "tokens", "dark-mode"],
+    votes: 87,
+    userVote: 0,
+    replyCount: 14,
+    viewCount: 420,
+    createdAt: new Date(Date.now() - 1e3 * 60 * 60 * 3).toISOString(),
+    isPinned: !0,
+    isSolved: !1
+  },
+  {
+    id: "2",
+    title: "How do I add custom categories to my forum?",
+    body: "I am setting up a community forum and want to add my own categories beyond the defaults. Is there a config option for this, or do I need to pass a custom categories array?",
+    author: { id: "u2", name: "sara_dev", avatar: null },
+    category: { id: "questions", label: "Questions", icon: "❓" },
+    tags: ["configuration", "categories"],
+    votes: 12,
+    userVote: 0,
+    replyCount: 5,
+    viewCount: 98,
+    createdAt: new Date(Date.now() - 1e3 * 60 * 60 * 6).toISOString(),
+    isSolved: !0
+  },
+  {
+    id: "3",
+    title: "Feature request: markdown support in replies",
+    body: "It would be great to have rich text / markdown support in the reply composer. Being able to add code blocks, links, and bold/italic text would make the forum much more useful for technical discussions.",
+    author: { id: "u3", name: "techwriter_k", avatar: null },
+    category: { id: "ideas", label: "Ideas", icon: "💡" },
+    tags: ["markdown", "editor", "replies"],
+    votes: 34,
+    userVote: 1,
+    replyCount: 9,
+    viewCount: 203,
+    createdAt: new Date(Date.now() - 1e3 * 60 * 60 * 12).toISOString()
+  },
+  {
+    id: "4",
+    title: "Vote count not updating in real-time",
+    body: "After clicking the upvote button, the vote count updates locally but does not sync back from the server on page refresh. Seems like the onVote callback is firing but the optimistic update is not being persisted.",
+    author: { id: "u4", name: "james_d", avatar: null },
+    category: { id: "bugs", label: "Bug Reports", icon: "🐛" },
+    tags: ["voting", "bug", "real-time"],
+    votes: 7,
+    userVote: 0,
+    replyCount: 3,
+    viewCount: 61,
+    createdAt: new Date(Date.now() - 1e3 * 60 * 60 * 18).toISOString()
+  },
+  {
+    id: "5",
+    title: "Best practices for organizing forum categories",
+    body: "We are launching a developer community and are unsure how to structure our categories. Should we go broad (3-5 categories) or granular (10+ sub-categories)? Looking for advice from people who have run communities before.",
+    author: { id: "u5", name: "community_lead", avatar: null },
+    category: { id: "general", label: "General", icon: "💬" },
+    tags: ["community", "organization", "best-practices"],
+    votes: 22,
+    userVote: 0,
+    replyCount: 17,
+    viewCount: 312,
+    createdAt: new Date(Date.now() - 1e3 * 60 * 60 * 24).toISOString()
+  },
+  {
+    id: "6",
+    title: "Building a searchable FAQ from pinned posts",
+    body: "One pattern I have found useful is using pinned posts as a structured FAQ. You can tag them with `faq` and surface them in a dedicated section. Here is how I set it up with the forum module.",
+    author: { id: "u1", name: "alex_m", avatar: null },
+    category: { id: "general", label: "General", icon: "💬" },
+    tags: ["faq", "pinned", "pattern"],
+    votes: 41,
+    userVote: 0,
+    replyCount: 6,
+    viewCount: 188,
+    createdAt: new Date(Date.now() - 1e3 * 60 * 60 * 36).toISOString()
+  }
+], oe = [
+  {
+    id: "r1",
+    body: "You can pass a `categories` prop directly to `<ForumPage>`. The shape is `{ id, label, icon, count }`. If you want a global default, set it in your `mn-config.js` under the `forum` key.",
+    author: { id: "u1", name: "alex_m", avatar: null },
+    votes: 15,
+    userVote: 1,
+    createdAt: new Date(Date.now() - 1e3 * 60 * 60 * 5).toISOString(),
+    isAccepted: !0
+  },
+  {
+    id: "r2",
+    body: "Also worth noting — you can use the `CategoryNav` component standalone if you want to place it somewhere other than the default sidebar.",
+    author: { id: "u3", name: "techwriter_k", avatar: null },
+    votes: 8,
+    userVote: 0,
+    createdAt: new Date(Date.now() - 1e3 * 60 * 60 * 4).toISOString()
+  },
+  {
+    id: "r3",
+    body: "Great question — I had the same issue when I first set up the forum. The docs example in the README shows the full config including custom categories.",
+    author: { id: "u5", name: "community_lead", avatar: null },
+    votes: 3,
+    userVote: 0,
+    createdAt: new Date(Date.now() - 1e3 * 60 * 60 * 3).toISOString()
+  }
+], ie = [
+  { id: "newest", label: "Newest" },
+  { id: "top", label: "Top Voted" },
+  { id: "unanswered", label: "Unanswered" }
+];
+function fe({
+  categories: e = K,
+  posts: o = J,
+  activeCategory: t = "all",
+  searchQuery: n = "",
+  sortBy: i = "newest",
+  onCategoryChange: d,
+  onSearch: l,
+  onSortChange: p,
+  onPostClick: u,
+  onNewPost: b,
+  onVote: f,
+  isLoading: s = !1,
+  isDark: m = !0,
+  header: F,
+  title: h = "Forum",
+  subtitle: S = "Discussions, questions, and ideas from the community.",
+  style: x
+}) {
+  const [B, w] = A(n), [k, $] = A(i), [C, W] = A(t), I = m ? "var(--mn-text-primary-dark, #F0F4FF)" : "var(--mn-text-primary-light, #1A1A2E)", R = m ? "var(--mn-text-secondary-dark, #94A3B8)" : "var(--mn-text-secondary-light, #64748B)", T = m ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)", L = m ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.04)";
+  function O(g) {
+    w(g), l == null || l(g);
+  }
+  function P(g) {
+    $(g), p == null || p(g);
+  }
+  function c(g) {
+    W(g), d == null || d(g);
+  }
+  const y = Z(() => {
+    let g = o;
+    if (C !== "all" && (g = g.filter((v) => {
+      var z;
+      return ((z = v.category) == null ? void 0 : z.id) === C;
+    })), B.trim()) {
+      const v = B.toLowerCase();
+      g = g.filter((z) => {
+        var H;
+        return z.title.toLowerCase().includes(v) || ((H = z.body) == null ? void 0 : H.toLowerCase().includes(v));
+      });
+    }
+    return k === "top" && (g = [...g].sort((v, z) => z.votes - v.votes)), k === "newest" && (g = [...g].sort((v, z) => new Date(z.createdAt) - new Date(v.createdAt))), k === "unanswered" && (g = g.filter((v) => !v.isSolved && (v.replyCount ?? 0) === 0)), [...g].sort((v, z) => (z.isPinned ? 1 : 0) - (v.isPinned ? 1 : 0));
+  }, [o, C, B, k]);
+  return /* @__PURE__ */ a("div", { style: {
+    padding: "var(--mn-spacing-xl, 32px)",
+    display: "flex",
+    flexDirection: "column",
+    gap: 24,
+    fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+    ...x
+  }, children: [
+    F ?? /* @__PURE__ */ a("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 12 }, children: [
+      /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ r("h1", { style: { margin: 0, fontSize: "var(--mn-font-size-2xl, 1.5rem)", fontWeight: 700, color: I }, children: h }),
+        S && /* @__PURE__ */ r("p", { style: { margin: "4px 0 0", fontSize: "0.875rem", color: R }, children: S })
+      ] }),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          onClick: b,
+          style: { padding: "8px 18px", borderRadius: "var(--mn-radius-md, 0.5rem)", border: "none", cursor: "pointer", backgroundColor: "var(--mn-color-primary, #3B82F6)", color: "#fff", fontSize: "0.875rem", fontWeight: 600, fontFamily: "inherit", display: "flex", alignItems: "center", gap: 6 },
+          children: "+ New Post"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { style: { display: "flex", gap: 20, alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ r("div", { style: { width: 200, flexShrink: 0, position: "sticky", top: 80 }, children: /* @__PURE__ */ r(
+        D,
+        {
+          categories: e,
+          active: C,
+          onChange: c,
+          isDark: m
+        }
+      ) }),
+      /* @__PURE__ */ a("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 14 }, children: [
+        /* @__PURE__ */ a("div", { style: { display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }, children: [
+          /* @__PURE__ */ a("div", { style: { position: "relative", flex: "1 1 200px" }, children: [
+            /* @__PURE__ */ r("span", { style: { position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", color: R, pointerEvents: "none", fontSize: 14 }, children: "🔍" }),
+            /* @__PURE__ */ r(
+              "input",
+              {
+                value: B,
+                onChange: (g) => O(g.target.value),
+                placeholder: "Search posts…",
+                style: { width: "100%", boxSizing: "border-box", padding: "8px 10px 8px 32px", borderRadius: "var(--mn-radius-md, 0.5rem)", backgroundColor: L, border: `1px solid ${T}`, color: I, fontSize: "0.875rem", fontFamily: "inherit", outline: "none" },
+                onFocus: (g) => {
+                  g.target.style.borderColor = "var(--mn-color-primary, #3B82F6)";
+                },
+                onBlur: (g) => {
+                  g.target.style.borderColor = T;
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { display: "flex", gap: 2, backgroundColor: m ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)", padding: 3, borderRadius: "var(--mn-radius-md, 0.5rem)" }, children: ie.map((g) => {
+            const v = k === g.id;
+            return /* @__PURE__ */ r(
+              "button",
+              {
+                onClick: () => P(g.id),
+                style: {
+                  padding: "4px 12px",
+                  borderRadius: 6,
+                  border: "none",
+                  cursor: "pointer",
+                  backgroundColor: v ? m ? "rgba(255,255,255,0.09)" : "#fff" : "transparent",
+                  color: v ? I : R,
+                  fontSize: "0.8125rem",
+                  fontWeight: v ? 600 : 400,
+                  fontFamily: "inherit",
+                  transition: "all 100ms"
+                },
+                children: g.label
+              },
+              g.id
+            );
+          }) })
+        ] }),
+        !s && /* @__PURE__ */ a("p", { style: { margin: 0, fontSize: "0.8125rem", color: R }, children: [
+          y.length,
+          " ",
+          y.length === 1 ? "post" : "posts",
+          B ? ` matching "${B}"` : ""
+        ] }),
+        /* @__PURE__ */ r(
+          re,
+          {
+            posts: y,
+            onPostClick: u,
+            onVote: f,
+            isLoading: s,
+            isDark: m
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ae({ post: e, onVote: o, isDark: t = !0 }) {
+  var p;
+  const n = t ? "var(--mn-color-card-dark, #0B0F23)" : "var(--mn-color-card-light, #FAFAF8)", i = t ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)", d = t ? "var(--mn-text-primary-dark, #F0F4FF)" : "var(--mn-text-primary-light, #1A1A2E)", l = t ? "var(--mn-text-secondary-dark, #94A3B8)" : "var(--mn-text-secondary-light, #64748B)";
+  return /* @__PURE__ */ a("div", { style: { borderRadius: "var(--mn-radius-lg, 0.75rem)", backgroundColor: n, border: `1px solid ${i}`, overflow: "hidden" }, children: [
+    /* @__PURE__ */ a("div", { style: { padding: "20px 24px", borderBottom: `1px solid ${i}` }, children: [
+      /* @__PURE__ */ a("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 12 }, children: [
+        e.isPinned && /* @__PURE__ */ r(M, { color: "warning", children: "📌 Pinned" }),
+        e.isSolved && /* @__PURE__ */ r(M, { color: "success", children: "✓ Solved" }),
+        e.isLocked && /* @__PURE__ */ r(M, { color: "muted", children: "🔒 Locked" }),
+        /* @__PURE__ */ r(Y, { category: e.category })
+      ] }),
+      /* @__PURE__ */ r("h1", { style: { margin: "0 0 14px", fontSize: "var(--mn-font-size-xl, 1.25rem)", fontWeight: 700, color: d, lineHeight: 1.4 }, children: e.title }),
+      /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ r(j, { author: e.author, date: e.createdAt, prefix: "posted", isDark: t }),
+        /* @__PURE__ */ a("span", { style: { fontSize: "0.8125rem", color: l }, children: [
+          "👁 ",
+          e.viewCount ?? 0,
+          " views"
+        ] }),
+        /* @__PURE__ */ a("span", { style: { fontSize: "0.8125rem", color: l }, children: [
+          "💬 ",
+          e.replyCount ?? 0,
+          " replies"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ a("div", { style: { display: "flex", gap: 0 }, children: [
+      /* @__PURE__ */ r("div", { style: { padding: "20px 16px", borderRight: `1px solid ${i}`, display: "flex", flexDirection: "column", alignItems: "center", gap: 4, flexShrink: 0 }, children: /* @__PURE__ */ r(
+        q,
+        {
+          count: e.votes,
+          userVote: e.userVote ?? 0,
+          onChange: (u) => o == null ? void 0 : o(e.id, u),
+          vertical: !0,
+          isDark: t
+        }
+      ) }),
+      /* @__PURE__ */ a("div", { style: { flex: 1, padding: "20px 24px" }, children: [
+        /* @__PURE__ */ r("div", { style: { fontSize: "0.9375rem", color: d, lineHeight: 1.7, whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: e.body }),
+        ((p = e.tags) == null ? void 0 : p.length) > 0 && /* @__PURE__ */ r("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", marginTop: 18 }, children: e.tags.map((u) => /* @__PURE__ */ r(Q, { label: u, isDark: t }, u)) })
+      ] })
+    ] })
+  ] });
+}
+function M({ color: e, children: o }) {
+  const t = {
+    warning: { bg: "rgba(245,158,11,0.12)", text: "#FCD34D", border: "rgba(245,158,11,0.25)" },
+    success: { bg: "rgba(16,185,129,0.12)", text: "#34D399", border: "rgba(16,185,129,0.25)" },
+    muted: { bg: "rgba(107,114,128,0.12)", text: "#9CA3AF", border: "rgba(107,114,128,0.2)" }
+  }, n = t[e] ?? t.muted;
+  return /* @__PURE__ */ r("span", { style: { fontSize: "0.7rem", fontWeight: 600, padding: "2px 8px", borderRadius: 9999, backgroundColor: n.bg, color: n.text, border: `1px solid ${n.border}` }, children: o });
+}
+function le({ reply: e, onVote: o, onAccept: t, canAccept: n = !1, isDark: i = !0 }) {
+  const d = i ? "var(--mn-color-card-dark, #0B0F23)" : "var(--mn-color-card-light, #FAFAF8)", l = i ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)", p = i ? "var(--mn-text-primary-dark, #F0F4FF)" : "var(--mn-text-primary-light, #1A1A2E)", u = i ? "var(--mn-text-secondary-dark, #94A3B8)" : "var(--mn-text-secondary-light, #64748B)", b = e.isAccepted ? "rgba(16,185,129,0.35)" : l, f = e.isAccepted ? i ? "rgba(16,185,129,0.05)" : "rgba(16,185,129,0.04)" : d;
+  return /* @__PURE__ */ a("div", { style: { display: "flex", borderRadius: "var(--mn-radius-lg, 0.75rem)", backgroundColor: f, border: `1px solid ${b}`, overflow: "hidden" }, children: [
+    /* @__PURE__ */ a("div", { style: { padding: "16px 14px", borderRight: `1px solid ${l}`, display: "flex", flexDirection: "column", alignItems: "center", gap: 4, flexShrink: 0 }, children: [
+      /* @__PURE__ */ r(
+        q,
+        {
+          count: e.votes,
+          userVote: e.userVote ?? 0,
+          onChange: (s) => o == null ? void 0 : o(e.id, s),
+          vertical: !0,
+          isDark: i,
+          size: "sm"
+        }
+      ),
+      (e.isAccepted || n) && /* @__PURE__ */ r(
+        "button",
+        {
+          onClick: () => t == null ? void 0 : t(e.id),
+          title: e.isAccepted ? "Accepted answer" : "Mark as accepted",
+          style: {
+            marginTop: 6,
+            width: 28,
+            height: 28,
+            borderRadius: 6,
+            border: "none",
+            cursor: n ? "pointer" : "default",
+            backgroundColor: e.isAccepted ? "rgba(16,185,129,0.15)" : "transparent",
+            color: e.isAccepted ? "#10B981" : u,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 14,
+            transition: "background 100ms"
+          },
+          onMouseEnter: (s) => {
+            n && !e.isAccepted && (s.currentTarget.style.backgroundColor = "rgba(16,185,129,0.1)");
+          },
+          onMouseLeave: (s) => {
+            e.isAccepted || (s.currentTarget.style.backgroundColor = "transparent");
+          },
+          children: "✓"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { style: { flex: 1, padding: "16px 18px", minWidth: 0 }, children: [
+      e.isAccepted && /* @__PURE__ */ a("div", { style: { display: "inline-flex", alignItems: "center", gap: 5, fontSize: "0.75rem", fontWeight: 600, color: "#10B981", marginBottom: 10 }, children: [
+        /* @__PURE__ */ r("span", { children: "✓" }),
+        " Accepted Answer"
+      ] }),
+      /* @__PURE__ */ r("div", { style: { fontSize: "0.9375rem", color: p, lineHeight: 1.65, whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: e.body }),
+      /* @__PURE__ */ r("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ r(j, { author: e.author, date: e.createdAt, prefix: "replied", isDark: i, size: "sm" }) })
+    ] })
+  ] });
+}
+function de({ replies: e = [], onVote: o, onAccept: t, canAccept: n = !1, currentUser: i, onSubmit: d, isLocked: l = !1, isDark: p = !0 }) {
+  const u = p ? "#F0F4FF" : "#1A1A2E", b = p ? "#94A3B8" : "#64748B", f = p ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)", s = [...e].sort((m, F) => m.isAccepted && !F.isAccepted ? -1 : !m.isAccepted && F.isAccepted ? 1 : F.votes - m.votes);
+  return /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: 20 }, children: [
+    e.length > 0 && /* @__PURE__ */ r("div", { style: { paddingBottom: 12, borderBottom: `1px solid ${f}` }, children: /* @__PURE__ */ a("h2", { style: { margin: 0, fontSize: "1rem", fontWeight: 600, color: u }, children: [
+      e.length,
+      " ",
+      e.length === 1 ? "Reply" : "Replies"
+    ] }) }),
+    s.length > 0 && /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: s.map((m) => /* @__PURE__ */ r(
+      le,
+      {
+        reply: m,
+        onVote: o,
+        onAccept: t,
+        canAccept: n,
+        isDark: p
+      },
+      m.id
+    )) }),
+    l ? /* @__PURE__ */ r("div", { style: { textAlign: "center", padding: "20px", color: b, fontSize: "0.875rem", backgroundColor: p ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)", borderRadius: "var(--mn-radius-md, 0.5rem)", border: `1px solid ${f}` }, children: "🔒 This thread is locked — no new replies allowed." }) : /* @__PURE__ */ r(
+      se,
+      {
+        currentUser: i,
+        onSubmit: d,
+        isDark: p,
+        placeholder: e.length === 0 ? "Be the first to reply…" : "Write a reply…"
+      }
+    )
+  ] });
+}
+function se({ currentUser: e, onSubmit: o, placeholder: t = "Write a reply…", isDark: n = !0 }) {
+  const [i, d] = A(""), [l, p] = A(!1), [u, b] = A(""), f = n ? "var(--mn-color-card-dark, #0B0F23)" : "var(--mn-color-card-light, #FAFAF8)", s = n ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)", m = n ? "#F0F4FF" : "#1A1A2E", F = n ? "#94A3B8" : "#64748B", h = n ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.03)";
+  async function S() {
+    const x = i.trim();
+    if (!x) {
+      b("Reply cannot be empty.");
+      return;
+    }
+    b(""), p(!0);
+    try {
+      await (o == null ? void 0 : o(x)), d("");
+    } finally {
+      p(!1);
+    }
+  }
+  return /* @__PURE__ */ a("div", { style: { borderRadius: "var(--mn-radius-lg, 0.75rem)", backgroundColor: f, border: `1px solid ${s}`, padding: "16px 18px", display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+      /* @__PURE__ */ r(_, { name: (e == null ? void 0 : e.name) ?? "?", size: 26, src: e == null ? void 0 : e.avatar }),
+      /* @__PURE__ */ r("span", { style: { fontSize: "0.8125rem", fontWeight: 600, color: m }, children: e ? e.name : "Reply as Guest" })
+    ] }),
+    /* @__PURE__ */ r(
+      "textarea",
+      {
+        value: i,
+        onChange: (x) => {
+          d(x.target.value), u && b("");
+        },
+        placeholder: t,
+        rows: 4,
+        style: {
+          width: "100%",
+          boxSizing: "border-box",
+          padding: "10px 12px",
+          borderRadius: "var(--mn-radius-md, 0.5rem)",
+          backgroundColor: h,
+          border: `1px solid ${u ? "rgba(239,68,68,0.4)" : s}`,
+          color: m,
+          fontSize: "0.9375rem",
+          lineHeight: 1.6,
+          resize: "vertical",
+          fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+          outline: "none",
+          transition: "border-color 120ms"
+        },
+        onFocus: (x) => {
+          x.target.style.borderColor = "var(--mn-color-primary, #3B82F6)";
+        },
+        onBlur: (x) => {
+          x.target.style.borderColor = u ? "rgba(239,68,68,0.4)" : s;
+        }
+      }
+    ),
+    u && /* @__PURE__ */ r("p", { style: { margin: 0, fontSize: "0.8125rem", color: "#F87171" }, children: u }),
+    /* @__PURE__ */ a("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ a("span", { style: { fontSize: "0.75rem", color: F }, children: [
+        i.length,
+        " / 8000"
+      ] }),
+      /* @__PURE__ */ a(
+        "button",
+        {
+          onClick: S,
+          disabled: l || !i.trim(),
+          style: {
+            padding: "7px 18px",
+            borderRadius: "var(--mn-radius-md, 0.5rem)",
+            border: "none",
+            cursor: l || !i.trim() ? "not-allowed" : "pointer",
+            backgroundColor: l || !i.trim() ? "rgba(59,130,246,0.4)" : "var(--mn-color-primary, #3B82F6)",
+            color: "#fff",
+            fontSize: "0.875rem",
+            fontWeight: 600,
+            fontFamily: "inherit",
+            transition: "background 120ms",
+            display: "flex",
+            alignItems: "center",
+            gap: 7
+          },
+          children: [
+            l && /* @__PURE__ */ r(ce, {}),
+            l ? "Posting…" : "Post Reply"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function ce() {
+  return /* @__PURE__ */ r("span", { style: { display: "inline-block", width: 12, height: 12, border: "2px solid rgba(255,255,255,0.3)", borderTopColor: "#fff", borderRadius: "50%", animation: "mn-spin 0.6s linear infinite" }, children: /* @__PURE__ */ r("style", { children: "@keyframes mn-spin { to { transform: rotate(360deg); } }" }) });
+}
+function be({
+  post: e = J[0],
+  replies: o = oe,
+  currentUser: t = null,
+  onBack: n,
+  onVotePost: i,
+  onVoteReply: d,
+  onAccept: l,
+  onSubmitReply: p,
+  isLoading: u = !1,
+  isDark: b = !0,
+  style: f
+}) {
+  var h;
+  const s = b ? "var(--mn-text-primary-dark, #F0F4FF)" : "var(--mn-text-primary-light, #1A1A2E)", m = b ? "var(--mn-text-secondary-dark, #94A3B8)" : "var(--mn-text-secondary-light, #64748B)", F = t && ((h = e == null ? void 0 : e.author) == null ? void 0 : h.id) === (t == null ? void 0 : t.id);
+  return u ? /* @__PURE__ */ r("div", { style: { padding: "var(--mn-spacing-xl, 32px)", fontFamily: "var(--mn-font-family, system-ui, sans-serif)", ...f }, children: /* @__PURE__ */ r(ge, { isDark: b }) }) : e ? /* @__PURE__ */ a("div", { style: {
+    padding: "var(--mn-spacing-xl, 32px)",
+    display: "flex",
+    flexDirection: "column",
+    gap: 20,
+    maxWidth: 860,
+    fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+    ...f
+  }, children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        onClick: n,
+        style: {
+          alignSelf: "flex-start",
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "6px 12px",
+          borderRadius: "var(--mn-radius-md, 0.5rem)",
+          border: "none",
+          cursor: "pointer",
+          backgroundColor: b ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)",
+          color: m,
+          fontSize: "0.875rem",
+          fontFamily: "inherit",
+          transition: "background 100ms"
+        },
+        onMouseEnter: (S) => {
+          S.currentTarget.style.backgroundColor = b ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
+        },
+        onMouseLeave: (S) => {
+          S.currentTarget.style.backgroundColor = b ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)";
+        },
+        children: "← Back to Forum"
+      }
+    ),
+    /* @__PURE__ */ r(
+      ae,
+      {
+        post: e,
+        onVote: i,
+        isDark: b
+      }
+    ),
+    /* @__PURE__ */ r(
+      de,
+      {
+        replies: o,
+        onVote: d,
+        onAccept: l,
+        canAccept: F,
+        currentUser: t,
+        onSubmit: p,
+        isLocked: e.isLocked,
+        isDark: b
+      }
+    )
+  ] }) : /* @__PURE__ */ a("div", { style: { padding: "var(--mn-spacing-xl, 32px)", textAlign: "center", color: m, fontFamily: "var(--mn-font-family, system-ui, sans-serif)", ...f }, children: [
+    /* @__PURE__ */ r("p", { style: { fontSize: 32, margin: "0 0 12px" }, children: "🔍" }),
+    /* @__PURE__ */ r("p", { style: { margin: 0, fontWeight: 600, color: s }, children: "Post not found" })
+  ] });
+}
+function ge({ isDark: e }) {
+  const o = e ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)", t = e ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)", n = e ? "var(--mn-color-card-dark, #0B0F23)" : "var(--mn-color-card-light, #FAFAF8)", i = (d, l = 12) => ({ width: d, height: l, borderRadius: 6, backgroundColor: o, animation: "mn-pulse 1.4s ease infinite" });
+  return /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    /* @__PURE__ */ r("div", { style: i(80) }),
+    /* @__PURE__ */ a("div", { style: { borderRadius: "var(--mn-radius-lg, 0.75rem)", backgroundColor: n, border: `1px solid ${t}`, padding: "20px 24px", display: "flex", flexDirection: "column", gap: 14 }, children: [
+      /* @__PURE__ */ r("div", { style: i("30%", 8) }),
+      /* @__PURE__ */ r("div", { style: i("70%", 20) }),
+      /* @__PURE__ */ r("div", { style: i("45%", 10) }),
+      /* @__PURE__ */ r("div", { style: { height: 80, borderRadius: 6, backgroundColor: o } })
+    ] }),
+    /* @__PURE__ */ r("style", { children: "@keyframes mn-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }" })
+  ] });
+}
+function ye({
+  categories: e = K.filter((l) => l.id !== "all"),
+  onSubmit: o,
+  onCancel: t,
+  currentUser: n = null,
+  isDark: i = !0,
+  style: d
+}) {
+  const [l, p] = A(""), [u, b] = A(""), [f, s] = A(""), [m, F] = A(""), [h, S] = A([]), [x, B] = A(!1), [w, k] = A({}), $ = i ? "var(--mn-color-card-dark, #0B0F23)" : "var(--mn-color-card-light, #FAFAF8)", C = i ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)", W = i ? "var(--mn-text-primary-dark, #F0F4FF)" : "var(--mn-text-primary-light, #1A1A2E)", I = i ? "var(--mn-text-secondary-dark, #94A3B8)" : "var(--mn-text-secondary-light, #64748B)", R = i ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.03)";
+  function T() {
+    const c = {};
+    return l.trim() || (c.title = "Title is required."), l.length > 200 && (c.title = "Title must be under 200 characters."), u.trim() || (c.body = "Body is required."), f || (c.category = "Please choose a category."), c;
+  }
+  async function L(c) {
+    c.preventDefault();
+    const y = T();
+    if (Object.keys(y).length) {
+      k(y);
+      return;
+    }
+    k({}), B(!0);
+    try {
+      await (o == null ? void 0 : o({ title: l.trim(), body: u.trim(), categoryId: f, tags: h }));
+    } finally {
+      B(!1);
+    }
+  }
+  function O(c) {
+    if ((c.key === "Enter" || c.key === ",") && m.trim()) {
+      c.preventDefault();
+      const y = m.trim().toLowerCase().replace(/[^a-z0-9-]/g, "-");
+      !h.includes(y) && h.length < 5 && S((g) => [...g, y]), F("");
+    }
+    c.key === "Backspace" && !m && h.length && S((y) => y.slice(0, -1));
+  }
+  const P = (c) => ({
+    width: "100%",
+    boxSizing: "border-box",
+    padding: "10px 12px",
+    borderRadius: "var(--mn-radius-md, 0.5rem)",
+    backgroundColor: R,
+    border: `1px solid ${c ? "rgba(239,68,68,0.4)" : C}`,
+    color: W,
+    fontSize: "0.9375rem",
+    fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+    outline: "none",
+    transition: "border-color 120ms"
+  });
+  return /* @__PURE__ */ a("div", { style: {
+    padding: "var(--mn-spacing-xl, 32px)",
+    display: "flex",
+    flexDirection: "column",
+    gap: 20,
+    maxWidth: 780,
+    fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+    ...d
+  }, children: [
+    /* @__PURE__ */ a("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }, children: [
+      /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ r("h1", { style: { margin: 0, fontSize: "var(--mn-font-size-xl, 1.25rem)", fontWeight: 700, color: W }, children: "New Post" }),
+        /* @__PURE__ */ r("p", { style: { margin: "4px 0 0", fontSize: "0.875rem", color: I }, children: "Share a question, idea, or discussion with the community." })
+      ] }),
+      t && /* @__PURE__ */ r(
+        "button",
+        {
+          onClick: t,
+          style: { padding: "6px 14px", borderRadius: "var(--mn-radius-md, 0.5rem)", border: `1px solid ${C}`, cursor: "pointer", backgroundColor: "transparent", color: I, fontSize: "0.875rem", fontFamily: "inherit" },
+          children: "Cancel"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(
+      "form",
+      {
+        onSubmit: L,
+        style: { borderRadius: "var(--mn-radius-lg, 0.75rem)", backgroundColor: $, border: `1px solid ${C}`, padding: "24px", display: "flex", flexDirection: "column", gap: 20 },
+        children: [
+          n && /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "8px 12px", borderRadius: "var(--mn-radius-md, 0.5rem)", backgroundColor: i ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.03)", border: `1px solid ${C}` }, children: [
+            /* @__PURE__ */ r(_, { name: n.name, size: 24, src: n.avatar }),
+            /* @__PURE__ */ a("span", { style: { fontSize: "0.875rem", color: W }, children: [
+              "Posting as ",
+              /* @__PURE__ */ r("strong", { children: n.name })
+            ] })
+          ] }),
+          /* @__PURE__ */ a(E, { label: "Title", error: w.title, required: !0, children: [
+            /* @__PURE__ */ r(
+              "input",
+              {
+                value: l,
+                onChange: (c) => {
+                  p(c.target.value), w.title && k((y) => ({ ...y, title: "" }));
+                },
+                placeholder: "What is your question or topic?",
+                style: P(w.title),
+                onFocus: (c) => {
+                  c.target.style.borderColor = "var(--mn-color-primary, #3B82F6)";
+                },
+                onBlur: (c) => {
+                  c.target.style.borderColor = w.title ? "rgba(239,68,68,0.4)" : C;
+                }
+              }
+            ),
+            /* @__PURE__ */ r("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 4 }, children: /* @__PURE__ */ a("span", { style: { fontSize: "0.75rem", color: l.length > 180 ? "#F87171" : I }, children: [
+              l.length,
+              "/200"
+            ] }) })
+          ] }),
+          /* @__PURE__ */ r(E, { label: "Category", error: w.category, required: !0, children: /* @__PURE__ */ r("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: e.map((c) => {
+            const y = f === c.id;
+            return /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  s(c.id), w.category && k((g) => ({ ...g, category: "" }));
+                },
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
+                  padding: "7px 14px",
+                  borderRadius: "var(--mn-radius-md, 0.5rem)",
+                  border: `1px solid ${y ? "var(--mn-color-primary, #3B82F6)" : C}`,
+                  cursor: "pointer",
+                  fontFamily: "inherit",
+                  fontSize: "0.875rem",
+                  backgroundColor: y ? "rgba(59,130,246,0.1)" : R,
+                  color: y ? "var(--mn-color-primary, #3B82F6)" : W,
+                  transition: "all 100ms",
+                  fontWeight: y ? 600 : 400
+                },
+                children: [
+                  c.icon && /* @__PURE__ */ r("span", { children: c.icon }),
+                  c.label
+                ]
+              },
+              c.id
+            );
+          }) }) }),
+          /* @__PURE__ */ r(E, { label: "Body", error: w.body, required: !0, children: /* @__PURE__ */ r(
+            "textarea",
+            {
+              value: u,
+              onChange: (c) => {
+                b(c.target.value), w.body && k((y) => ({ ...y, body: "" }));
+              },
+              placeholder: "Describe your question or topic in detail. The more context you provide, the better the community can help.",
+              rows: 8,
+              style: { ...P(w.body), resize: "vertical", lineHeight: 1.65 },
+              onFocus: (c) => {
+                c.target.style.borderColor = "var(--mn-color-primary, #3B82F6)";
+              },
+              onBlur: (c) => {
+                c.target.style.borderColor = w.body ? "rgba(239,68,68,0.4)" : C;
+              }
+            }
+          ) }),
+          /* @__PURE__ */ r(E, { label: "Tags", hint: "Up to 5 tags. Press Enter or comma to add.", children: /* @__PURE__ */ a("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", padding: "8px 10px", borderRadius: "var(--mn-radius-md, 0.5rem)", backgroundColor: R, border: `1px solid ${C}`, minHeight: 42, alignItems: "center" }, children: [
+            h.map((c) => /* @__PURE__ */ a("span", { style: { display: "flex", alignItems: "center", gap: 4, fontSize: "0.75rem", padding: "2px 8px", borderRadius: 9999, backgroundColor: i ? "rgba(59,130,246,0.1)" : "rgba(59,130,246,0.07)", color: "#60A5FA", border: "1px solid rgba(59,130,246,0.2)" }, children: [
+              "#",
+              c,
+              /* @__PURE__ */ r("button", { type: "button", onClick: () => S((y) => y.filter((g) => g !== c)), style: { background: "none", border: "none", cursor: "pointer", color: "inherit", padding: 0, fontSize: 12, lineHeight: 1, display: "flex", alignItems: "center" }, children: "×" })
+            ] }, c)),
+            h.length < 5 && /* @__PURE__ */ r(
+              "input",
+              {
+                value: m,
+                onChange: (c) => F(c.target.value),
+                onKeyDown: O,
+                placeholder: h.length === 0 ? "e.g. bug, question, feature" : "",
+                style: { border: "none", outline: "none", backgroundColor: "transparent", color: W, fontSize: "0.875rem", fontFamily: "inherit", flex: 1, minWidth: 120 }
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ a("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10, paddingTop: 4, borderTop: `1px solid ${C}`, marginTop: 4 }, children: [
+            t && /* @__PURE__ */ r("button", { type: "button", onClick: t, style: { padding: "9px 20px", borderRadius: "var(--mn-radius-md, 0.5rem)", border: `1px solid ${C}`, cursor: "pointer", backgroundColor: "transparent", color: I, fontSize: "0.875rem", fontFamily: "inherit" }, children: "Cancel" }),
+            /* @__PURE__ */ a(
+              "button",
+              {
+                type: "submit",
+                disabled: x,
+                style: { padding: "9px 24px", borderRadius: "var(--mn-radius-md, 0.5rem)", border: "none", cursor: x ? "wait" : "pointer", backgroundColor: x ? "rgba(59,130,246,0.5)" : "var(--mn-color-primary, #3B82F6)", color: "#fff", fontSize: "0.875rem", fontWeight: 600, fontFamily: "inherit", display: "flex", alignItems: "center", gap: 8 },
+                children: [
+                  x && /* @__PURE__ */ r(ue, {}),
+                  x ? "Publishing…" : "Publish Post"
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function E({ label: e, children: o, error: t, hint: n, required: i }) {
+  return /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: 7 }, children: [
+    /* @__PURE__ */ a("label", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--mn-text-primary-dark, #F0F4FF)", display: "flex", gap: 4 }, children: [
+      e,
+      i && /* @__PURE__ */ r("span", { style: { color: "#F87171" }, children: "*" })
+    ] }),
+    o,
+    n && !t && /* @__PURE__ */ r("p", { style: { margin: 0, fontSize: "0.75rem", color: "var(--mn-text-secondary-dark, #94A3B8)" }, children: n }),
+    t && /* @__PURE__ */ r("p", { style: { margin: 0, fontSize: "0.8125rem", color: "#F87171" }, children: t })
+  ] });
+}
+function ue() {
+  return /* @__PURE__ */ r("span", { style: { display: "inline-block", width: 12, height: 12, border: "2px solid rgba(255,255,255,0.3)", borderTopColor: "#fff", borderRadius: "50%", animation: "mn-spin 0.6s linear infinite" }, children: /* @__PURE__ */ r("style", { children: "@keyframes mn-spin { to { transform: rotate(360deg); } }" }) });
+}
+export {
+  j as AuthorMeta,
+  Y as CategoryBadge,
+  D as CategoryNav,
+  ye as CreatePostPage,
+  K as DEMO_CATEGORIES,
+  J as DEMO_POSTS,
+  oe as DEMO_REPLIES,
+  te as EmptyPostList,
+  fe as ForumPage,
+  ee as PostCard,
+  ae as PostDetail,
+  re as PostList,
+  be as PostPage,
+  le as ReplyCard,
+  se as ReplyComposer,
+  de as ReplyThread,
+  Q as TagChip,
+  q as VoteButton
+};
+//# sourceMappingURL=mounajiforum.es.js.map