@mounaji_npm/forum 0.1.0

package/src/components/ReplyThread.jsx

@@ -0,0 +1,244 @@
+/**
+ * ReplyThread — @mounaji_npm/forum
+ *
+ * Exports:
+ *   ReplyCard     — single reply with vote + accepted badge
+ *   ReplyThread   — ordered list of ReplyCards + ReplyComposer
+ *   ReplyComposer — textarea + submit button for writing a reply
+ */
+
+import { useState } from 'react';
+import { VoteButton, AuthorMeta, Avatar } from './shared.jsx';
+
+// ─── ReplyCard ────────────────────────────────────────────────────────────────
+
+/**
+ * Props:
+ *   reply        — Reply object { id, body, author, votes, userVote, createdAt, isAccepted }
+ *   onVote       — (replyId, vote) => void
+ *   onAccept     — (replyId) => void   (marks as accepted answer)
+ *   canAccept    — boolean             (only post author can accept)
+ *   isDark       — boolean
+ */
+export function ReplyCard({ reply, onVote, onAccept, canAccept = false, isDark = true }) {
+  const card    = isDark ? 'var(--mn-color-card-dark, #0B0F23)'     : 'var(--mn-color-card-light, #FAFAF8)';
+  const border  = isDark ? 'rgba(255,255,255,0.07)'                  : 'rgba(0,0,0,0.08)';
+  const textPri = isDark ? 'var(--mn-text-primary-dark, #F0F4FF)'   : 'var(--mn-text-primary-light, #1A1A2E)';
+  const textSec = isDark ? 'var(--mn-text-secondary-dark, #94A3B8)' : 'var(--mn-text-secondary-light, #64748B)';
+
+  const acceptedBorder = reply.isAccepted ? 'rgba(16,185,129,0.35)' : border;
+  const acceptedBg     = reply.isAccepted
+    ? (isDark ? 'rgba(16,185,129,0.05)' : 'rgba(16,185,129,0.04)')
+    : card;
+
+  return (
+    <div style={{ display: 'flex', borderRadius: 'var(--mn-radius-lg, 0.75rem)', backgroundColor: acceptedBg, border: `1px solid ${acceptedBorder}`, overflow: 'hidden' }}>
+      {/* Vote column */}
+      <div style={{ padding: '16px 14px', borderRight: `1px solid ${border}`, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, flexShrink: 0 }}>
+        <VoteButton
+          count={reply.votes}
+          userVote={reply.userVote ?? 0}
+          onChange={v => onVote?.(reply.id, v)}
+          vertical
+          isDark={isDark}
+          size="sm"
+        />
+        {/* Accept button */}
+        {(reply.isAccepted || canAccept) && (
+          <button
+            onClick={() => onAccept?.(reply.id)}
+            title={reply.isAccepted ? 'Accepted answer' : 'Mark as accepted'}
+            style={{
+              marginTop: 6, width: 28, height: 28, borderRadius: 6, border: 'none', cursor: canAccept ? 'pointer' : 'default',
+              backgroundColor: reply.isAccepted ? 'rgba(16,185,129,0.15)' : 'transparent',
+              color: reply.isAccepted ? '#10B981' : textSec,
+              display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14,
+              transition: 'background 100ms',
+            }}
+            onMouseEnter={e => { if (canAccept && !reply.isAccepted) e.currentTarget.style.backgroundColor = 'rgba(16,185,129,0.1)'; }}
+            onMouseLeave={e => { if (!reply.isAccepted) e.currentTarget.style.backgroundColor = 'transparent'; }}
+          >
+            ✓
+          </button>
+        )}
+      </div>
+
+      {/* Content */}
+      <div style={{ flex: 1, padding: '16px 18px', minWidth: 0 }}>
+        {reply.isAccepted && (
+          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: '0.75rem', fontWeight: 600, color: '#10B981', marginBottom: 10 }}>
+            <span>✓</span> Accepted Answer
+          </div>
+        )}
+
+        <div style={{ fontSize: '0.9375rem', color: textPri, lineHeight: 1.65, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+          {reply.body}
+        </div>
+
+        <div style={{ marginTop: 12 }}>
+          <AuthorMeta author={reply.author} date={reply.createdAt} prefix="replied" isDark={isDark} size="sm" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── ReplyThread ──────────────────────────────────────────────────────────────
+
+/**
+ * Props:
+ *   replies       — Reply[]
+ *   onVote        — (replyId, vote) => void
+ *   onAccept      — (replyId) => void
+ *   canAccept     — boolean
+ *   currentUser   — { id, name, avatar? } | null
+ *   onSubmit      — (body: string) => void | Promise<void>
+ *   isLocked      — boolean
+ *   isDark        — boolean
+ */
+export function ReplyThread({ replies = [], onVote, onAccept, canAccept = false, currentUser, onSubmit, isLocked = false, isDark = true }) {
+  const textPri = isDark ? '#F0F4FF' : '#1A1A2E';
+  const textSec = isDark ? '#94A3B8' : '#64748B';
+  const border  = isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.08)';
+
+  // Pin accepted answer to top, then sort by votes
+  const sorted = [...replies].sort((a, b) => {
+    if (a.isAccepted && !b.isAccepted) return -1;
+    if (!a.isAccepted && b.isAccepted) return 1;
+    return b.votes - a.votes;
+  });
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+      {/* Header */}
+      {replies.length > 0 && (
+        <div style={{ paddingBottom: 12, borderBottom: `1px solid ${border}` }}>
+          <h2 style={{ margin: 0, fontSize: '1rem', fontWeight: 600, color: textPri }}>
+            {replies.length} {replies.length === 1 ? 'Reply' : 'Replies'}
+          </h2>
+        </div>
+      )}
+
+      {/* Reply cards */}
+      {sorted.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {sorted.map(reply => (
+            <ReplyCard
+              key={reply.id}
+              reply={reply}
+              onVote={onVote}
+              onAccept={onAccept}
+              canAccept={canAccept}
+              isDark={isDark}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Composer or locked notice */}
+      {isLocked ? (
+        <div style={{ textAlign: 'center', padding: '20px', color: textSec, fontSize: '0.875rem', backgroundColor: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.03)', borderRadius: 'var(--mn-radius-md, 0.5rem)', border: `1px solid ${border}` }}>
+          🔒 This thread is locked — no new replies allowed.
+        </div>
+      ) : (
+        <ReplyComposer
+          currentUser={currentUser}
+          onSubmit={onSubmit}
+          isDark={isDark}
+          placeholder={replies.length === 0 ? 'Be the first to reply…' : 'Write a reply…'}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── ReplyComposer ────────────────────────────────────────────────────────────
+
+/**
+ * Props:
+ *   currentUser — { name, avatar? } | null
+ *   onSubmit    — (body: string) => void | Promise<void>
+ *   placeholder — string
+ *   isDark      — boolean
+ */
+export function ReplyComposer({ currentUser, onSubmit, placeholder = 'Write a reply…', isDark = true }) {
+  const [body, setBody]       = useState('');
+  const [submitting, setSub]  = useState(false);
+  const [error, setError]     = useState('');
+
+  const card    = isDark ? 'var(--mn-color-card-dark, #0B0F23)'     : 'var(--mn-color-card-light, #FAFAF8)';
+  const border  = isDark ? 'rgba(255,255,255,0.07)'                  : 'rgba(0,0,0,0.08)';
+  const textPri = isDark ? '#F0F4FF' : '#1A1A2E';
+  const textSec = isDark ? '#94A3B8' : '#64748B';
+  const inputBg = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)';
+
+  async function handleSubmit() {
+    const trimmed = body.trim();
+    if (!trimmed) { setError('Reply cannot be empty.'); return; }
+    setError('');
+    setSub(true);
+    try {
+      await onSubmit?.(trimmed);
+      setBody('');
+    } finally {
+      setSub(false);
+    }
+  }
+
+  return (
+    <div style={{ borderRadius: 'var(--mn-radius-lg, 0.75rem)', backgroundColor: card, border: `1px solid ${border}`, padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 12 }}>
+      {/* Composer header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <Avatar name={currentUser?.name ?? '?'} size={26} src={currentUser?.avatar} />
+        <span style={{ fontSize: '0.8125rem', fontWeight: 600, color: textPri }}>
+          {currentUser ? currentUser.name : 'Reply as Guest'}
+        </span>
+      </div>
+
+      {/* Textarea */}
+      <textarea
+        value={body}
+        onChange={e => { setBody(e.target.value); if (error) setError(''); }}
+        placeholder={placeholder}
+        rows={4}
+        style={{
+          width: '100%', boxSizing: 'border-box',
+          padding: '10px 12px', borderRadius: 'var(--mn-radius-md, 0.5rem)',
+          backgroundColor: inputBg, border: `1px solid ${error ? 'rgba(239,68,68,0.4)' : border}`,
+          color: textPri, fontSize: '0.9375rem', lineHeight: 1.6, resize: 'vertical',
+          fontFamily: 'var(--mn-font-family, system-ui, sans-serif)', outline: 'none',
+          transition: 'border-color 120ms',
+        }}
+        onFocus={e => { e.target.style.borderColor = 'var(--mn-color-primary, #3B82F6)'; }}
+        onBlur={e => { e.target.style.borderColor = error ? 'rgba(239,68,68,0.4)' : border; }}
+      />
+
+      {error && <p style={{ margin: 0, fontSize: '0.8125rem', color: '#F87171' }}>{error}</p>}
+
+      {/* Footer */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <span style={{ fontSize: '0.75rem', color: textSec }}>{body.length} / 8000</span>
+        <button
+          onClick={handleSubmit}
+          disabled={submitting || !body.trim()}
+          style={{
+            padding: '7px 18px', borderRadius: 'var(--mn-radius-md, 0.5rem)', border: 'none',
+            cursor: submitting || !body.trim() ? 'not-allowed' : 'pointer',
+            backgroundColor: submitting || !body.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,
+          }}
+        >
+          {submitting && <Spinner />}
+          {submitting ? 'Posting…' : 'Post Reply'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function Spinner() {
+  return <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' }}>
+    <style>{`@keyframes mn-spin { to { transform: rotate(360deg); } }`}</style>
+  </span>;
+}

package/src/components/shared.jsx

@@ -0,0 +1,171 @@
+/**
+ * shared.jsx — @mounaji_npm/forum
+ * Small reusable primitives: VoteButton, AuthorMeta, TagChip, CategoryBadge
+ */
+
+import { useState } from 'react';
+
+// ─── VoteButton ────────────────────────────────────────────────────────────────
+
+/**
+ * Props:
+ *   count    — number
+ *   userVote — 1 | 0 | -1
+ *   onChange(newVote: 1 | 0 | -1)
+ *   vertical — boolean (default: false — horizontal layout)
+ *   isDark   — boolean
+ */
+export function VoteButton({ count = 0, userVote = 0, onChange, vertical = false, isDark = true, size = 'md' }) {
+  const [optimistic, setOptimistic] = useState(null);
+
+  const vote   = optimistic ?? userVote;
+  const total  = optimistic !== null ? count + (optimistic - userVote) : count;
+  const upCol  = vote === 1  ? '#10B981' : (isDark ? '#64748B' : '#94A3B8');
+  const downCol = vote === -1 ? '#EF4444' : (isDark ? '#64748B' : '#94A3B8');
+  const numCol  = vote === 1  ? '#10B981' : vote === -1 ? '#EF4444' : (isDark ? '#F0F4FF' : '#1A1A2E');
+  const btnSz   = size === 'sm' ? 22 : 28;
+  const iconSz  = size === 'sm' ? 11 : 13;
+
+  function cast(v) {
+    const next = vote === v ? 0 : v;
+    setOptimistic(next);
+    onChange?.(next);
+  }
+
+  const wrapStyle = vertical
+    ? { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }
+    : { display: 'flex', alignItems: 'center', gap: 4 };
+
+  return (
+    <div style={wrapStyle}>
+      <VBtn size={btnSz} icon={size === 'sm' ? '▲' : '▲'} color={upCol} iconSz={iconSz} onClick={() => cast(1)} title="Upvote" />
+      <span style={{ fontSize: size === 'sm' ? '0.75rem' : '0.875rem', fontWeight: 700, color: numCol, minWidth: 20, textAlign: 'center' }}>
+        {total}
+      </span>
+      {vertical && <VBtn size={btnSz} icon="▼" color={downCol} iconSz={iconSz} onClick={() => cast(-1)} title="Downvote" />}
+    </div>
+  );
+}
+
+function VBtn({ size, icon, color, iconSz, onClick, title }) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      style={{
+        width: size, height: size, borderRadius: 4, border: 'none', cursor: 'pointer',
+        backgroundColor: 'transparent', color, fontSize: iconSz,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        transition: 'background 100ms, color 100ms', padding: 0, fontFamily: 'inherit',
+      }}
+      onMouseEnter={e => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.07)'; }}
+      onMouseLeave={e => { e.currentTarget.style.backgroundColor = 'transparent'; }}
+    >
+      {icon}
+    </button>
+  );
+}
+
+// ─── AuthorMeta ────────────────────────────────────────────────────────────────
+
+/**
+ * Props:
+ *   author  — { name, avatar? }
+ *   date    — string | Date
+ *   prefix  — string (default: '')
+ *   isDark  — boolean
+ *   size    — 'sm' | 'md'
+ */
+export function AuthorMeta({ author, date, prefix = '', isDark = true, size = 'md' }) {
+  const textSec = isDark ? '#94A3B8' : '#64748B';
+  const textPri = isDark ? '#F0F4FF' : '#1A1A2E';
+  const avatarSz = size === 'sm' ? 18 : 22;
+  const fontSize = size === 'sm' ? '0.75rem' : '0.8125rem';
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+      <Avatar name={author?.name ?? '?'} size={avatarSz} src={author?.avatar} />
+      <span style={{ fontSize, color: textPri, fontWeight: 500 }}>{author?.name ?? 'unknown'}</span>
+      {(prefix || date) && (
+        <span style={{ fontSize, color: textSec }}>
+          {prefix && <>{prefix} </>}{date ? formatRelative(date) : ''}
+        </span>
+      )}
+    </div>
+  );
+}
+
+// ─── TagChip ─────────────────────────────────────────────────────────────────
+
+export function TagChip({ label, onClick, isDark = true }) {
+  const bg     = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';
+  const border = isDark ? 'rgba(255,255,255,0.1)'  : 'rgba(0,0,0,0.1)';
+  const color  = isDark ? '#94A3B8' : '#64748B';
+  return (
+    <span
+      onClick={onClick}
+      style={{
+        fontSize: '0.7rem', padding: '2px 8px', borderRadius: 9999,
+        backgroundColor: bg, color, border: `1px solid ${border}`,
+        cursor: onClick ? 'pointer' : 'default', fontFamily: 'inherit',
+        transition: 'background 100ms',
+      }}
+    >
+      #{label}
+    </span>
+  );
+}
+
+// ─── CategoryBadge ────────────────────────────────────────────────────────────
+
+const CAT_COLORS = {
+  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)' },
+};
+
+export function CategoryBadge({ category }) {
+  const c = CAT_COLORS[category?.id] ?? CAT_COLORS.default;
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: '0.7rem', fontWeight: 500, padding: '2px 8px', borderRadius: 9999, backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}>
+      {category?.icon && <span>{category.icon}</span>}
+      {category?.label}
+    </span>
+  );
+}
+
+// ─── Avatar ───────────────────────────────────────────────────────────────────
+
+export function Avatar({ name, size = 24, src }) {
+  const initials = (name ?? '?').slice(0, 1).toUpperCase();
+  const hue = [...(name ?? '')].reduce((h, c) => (h * 31 + c.charCodeAt(0)) % 360, 0);
+  const bg  = `hsl(${hue}, 55%, 35%)`;
+
+  if (src) {
+    return <img src={src} alt={name} style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover' }} />;
+  }
+  return (
+    <div style={{ width: size, height: size, borderRadius: '50%', backgroundColor: bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.45, fontWeight: 700, color: '#fff', flexShrink: 0, userSelect: 'none' }}>
+      {initials}
+    </div>
+  );
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+export function formatRelative(date) {
+  const d    = typeof date === 'string' ? new Date(date) : date;
+  const diff = (Date.now() - d.getTime()) / 1000;
+  if (diff < 60)    return 'just now';
+  if (diff < 3600)  return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
+  return d.toLocaleDateString();
+}
+
+export function plural(n, word) {
+  return `${n} ${word}${n === 1 ? '' : 's'}`;
+}

package/src/demo.js

@@ -0,0 +1,125 @@
+/**
+ * Demo data for @mounaji_npm/forum
+ * Import to populate forum components during prototyping.
+ */
+
+export const DEMO_CATEGORIES = [
+  { id: 'all',           label: 'All Posts',      icon: '◉', count: 124 },
+  { id: 'announcements', label: 'Announcements',  icon: '📣', count: 8,  pinned: true },
+  { 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 },
+];
+
+export const DEMO_POSTS = [
+  {
+    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() - 1000 * 60 * 60 * 3).toISOString(),
+    isPinned: true,
+    isSolved: false,
+  },
+  {
+    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() - 1000 * 60 * 60 * 6).toISOString(),
+    isSolved: true,
+  },
+  {
+    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() - 1000 * 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() - 1000 * 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() - 1000 * 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() - 1000 * 60 * 60 * 36).toISOString(),
+  },
+];
+
+export const DEMO_REPLIES = [
+  {
+    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() - 1000 * 60 * 60 * 5).toISOString(),
+    isAccepted: true,
+  },
+  {
+    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() - 1000 * 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() - 1000 * 60 * 60 * 3).toISOString(),
+  },
+];

package/src/index.js

@@ -0,0 +1,48 @@
+/**
+ * @mounaji_npm/forum — Public API
+ *
+ * Full pages (drop-in routes):
+ *   ForumPage       — post listing with category sidebar + search
+ *   PostPage        — post detail with reply thread
+ *   CreatePostPage  — new post form
+ *
+ * Standalone components (compose your own layout):
+ *   PostCard, PostDetail, ReplyCard, ReplyThread,
+ *   CategoryNav, VoteButton, AuthorMeta, TagChip
+ */
+
+// ── Full pages ────────────────────────────────────────────────────────────────
+export { ForumPage }         from './ForumPage.jsx';
+export { PostPage }          from './PostPage.jsx';
+export { CreatePostPage }    from './CreatePostPage.jsx';
+
+// ── Standalone components ─────────────────────────────────────────────────────
+export {
+  PostCard,
+  PostList,
+  EmptyPostList,
+} from './components/PostCard.jsx';
+
+export {
+  PostDetail,
+} from './components/PostDetail.jsx';
+
+export {
+  ReplyCard,
+  ReplyThread,
+  ReplyComposer,
+} from './components/ReplyThread.jsx';
+
+export {
+  CategoryNav,
+} from './components/CategoryNav.jsx';
+
+export {
+  VoteButton,
+  AuthorMeta,
+  TagChip,
+  CategoryBadge,
+} from './components/shared.jsx';
+
+// ── Demo data (for prototyping) ───────────────────────────────────────────────
+export { DEMO_POSTS, DEMO_CATEGORIES, DEMO_REPLIES } from './demo.js';