@mounaji_npm/saas-template 0.1.0

package/src/modules/manifests.js

@@ -0,0 +1,263 @@
+/**
+ * @mounaji/saas-template — Pre-built Module Manifests
+ *
+ * These mirror the NAV_SECTIONS from mounaji-platform's sidebar.js.
+ * Import the ones you need and pass them to <AppShell modules={[...]} />.
+ *
+ * Icons are string emojis by default (no external icon lib required).
+ * Override the `icon` field with any React element or lucide-react icon.
+ *
+ * Each manifest follows the shape:
+ * {
+ *   id:       string       — unique key
+ *   label:    string       — sidebar label
+ *   icon:     string|node  — emoji string or React node
+ *   path:     string       — route href
+ *   section:  string|null  — sidebar group (null = top, no header)
+ *   order:    number       — position in section
+ *   children: Manifest[]   — sub-nav (optional)
+ *   badge:    string|null  — badge label
+ *   disabled: boolean
+ *   hidden:   boolean
+ *   external: boolean
+ * }
+ */
+
+// ── Top section (no group label) ─────────────────────────────────────────────
+
+export const HOME_MODULE = {
+  id: 'home',
+  label: 'Home',
+  icon: '⌂',
+  path: '/',
+  section: null,
+  order: 0,
+};
+
+export const DASHBOARD_MODULE = {
+  id: 'dashboard',
+  label: 'Dashboard',
+  icon: '▦',
+  path: '/dashboard',
+  section: null,
+  order: 1,
+  children: [
+    { id: 'dashboard-overview', label: 'Overview', icon: '▦',  path: '/dashboard',          order: 0 },
+    { id: 'dashboard-team',     label: 'Team',     icon: '👥', path: '/dashboard/team',     order: 1 },
+    { id: 'dashboard-billing',  label: 'Billing',  icon: '💳', path: '/dashboard/billing',  order: 2 },
+    { id: 'dashboard-usage',    label: 'Usage',    icon: '📈', path: '/dashboard/usage',    order: 3 },
+  ],
+};
+
+export const CHAT_MODULE = {
+  id: 'chat',
+  label: 'Chat',
+  icon: '💬',
+  path: '/chat',
+  section: null,
+  order: 3,
+};
+
+export const DISCOVER_MODULE = {
+  id: 'discover',
+  label: 'Discover',
+  icon: '🧭',
+  path: '/discover',
+  section: null,
+  order: 2,
+  badge: 'Soon',
+  disabled: true,
+};
+
+// ── Workspace ─────────────────────────────────────────────────────────────────
+
+export const ASSISTANTS_MODULE = {
+  id: 'assistants',
+  label: 'Assistants',
+  icon: '🤖',
+  path: '/assistants',
+  section: 'Workspace',
+  order: 1,
+};
+
+export const KNOWLEDGE_BASE_MODULE = {
+  id: 'knowledge-base',
+  label: 'Knowledge Base',
+  icon: '🧠',
+  path: '/knowledge-base',
+  section: 'Workspace',
+  order: 2,
+};
+
+export const AGENT_WORKSPACE_MODULE = {
+  id: 'agent-workspace',
+  label: 'Agent Workspace',
+  icon: '⊞',
+  path: '/workspace',
+  section: 'Workspace',
+  order: 3,
+};
+
+export const INVENTORY_MODULE = {
+  id: 'inventory',
+  label: 'Inventory',
+  icon: '📦',
+  path: '/inventory',
+  section: 'Workspace',
+  order: 4,
+};
+
+// ── Channels ──────────────────────────────────────────────────────────────────
+
+export const PLATFORMS_MODULE = {
+  id: 'platforms',
+  label: 'Platforms',
+  icon: '⚡',
+  path: '/platforms',
+  section: 'Channels',
+  order: 1,
+  children: [
+    { id: 'platforms-all',       label: 'All Platforms', icon: '⚡', path: '/platforms',           order: 0 },
+    { id: 'platforms-analytics', label: 'Analytics',     icon: '📊', path: '/platforms/analytics', order: 1 },
+  ],
+};
+
+export const WORKFLOWS_MODULE = {
+  id: 'workflows',
+  label: 'Workflows',
+  icon: '⎇',
+  path: '/workflows',
+  section: 'Channels',
+  order: 2,
+};
+
+export const TASKS_MODULE = {
+  id: 'tasks',
+  label: 'Tasks',
+  icon: '☑',
+  path: '/tasks',
+  section: 'Channels',
+  order: 3,
+};
+
+export const CONNECTIONS_MODULE = {
+  id: 'connections',
+  label: 'Connections',
+  icon: '⛓',
+  path: '/connections',
+  section: 'Channels',
+  order: 4,
+};
+
+// ── Communication ─────────────────────────────────────────────────────────────
+
+export const EMAIL_MODULE = {
+  id: 'email',
+  label: 'Email',
+  icon: '✉',
+  path: '/email',
+  section: 'Communication',
+  order: 1,
+};
+
+export const CONTACTS_MODULE = {
+  id: 'contacts',
+  label: 'Contacts',
+  icon: '👤',
+  path: '/contacts',
+  section: 'Communication',
+  order: 2,
+};
+
+// ── Account ───────────────────────────────────────────────────────────────────
+
+export const PRICING_MODULE = {
+  id: 'pricing',
+  label: 'Pricing',
+  icon: '💲',
+  path: '/pricing',
+  section: 'Account',
+  order: 1,
+};
+
+export const API_KEYS_MODULE = {
+  id: 'api-keys',
+  label: 'API Keys',
+  icon: '🔑',
+  path: '/dashboard/api-keys',
+  section: 'Account',
+  order: 2,
+};
+
+// ── Bottom nav (Settings / Help) ──────────────────────────────────────────────
+
+export const SETTINGS_MODULE = {
+  id: 'settings',
+  label: 'Settings',
+  icon: '⚙',
+  path: '/settings',
+  order: 1,
+  children: [
+    { id: 'settings-design', label: 'Design Tokens', icon: '🎨', path: '/settings/design', order: 0 },
+    { id: 'settings-models', label: 'AI Models',     icon: '🤖', path: '/settings/models', order: 1 },
+  ],
+};
+
+export const HELP_MODULE = {
+  id: 'help',
+  label: 'Help',
+  icon: '?',
+  path: '/help',
+  order: 2,
+};
+
+// ── Preset bundles ────────────────────────────────────────────────────────────
+
+/** The full platform nav — mirrors mounaji-platform exactly */
+export const ALL_MODULES = [
+  HOME_MODULE,
+  DASHBOARD_MODULE,
+  DISCOVER_MODULE,
+  CHAT_MODULE,
+  ASSISTANTS_MODULE,
+  KNOWLEDGE_BASE_MODULE,
+  AGENT_WORKSPACE_MODULE,
+  INVENTORY_MODULE,
+  PLATFORMS_MODULE,
+  WORKFLOWS_MODULE,
+  TASKS_MODULE,
+  CONNECTIONS_MODULE,
+  EMAIL_MODULE,
+  CONTACTS_MODULE,
+  PRICING_MODULE,
+  API_KEYS_MODULE,
+];
+
+/** Minimal starter — just the core 4 modules */
+export const CORE_MODULES = [
+  HOME_MODULE,
+  DASHBOARD_MODULE,
+  CHAT_MODULE,
+  ASSISTANTS_MODULE,
+  KNOWLEDGE_BASE_MODULE,
+];
+
+/** AI-focused bundle */
+export const AI_BUNDLE = [
+  HOME_MODULE,
+  DASHBOARD_MODULE,
+  CHAT_MODULE,
+  ASSISTANTS_MODULE,
+  KNOWLEDGE_BASE_MODULE,
+  WORKFLOWS_MODULE,
+];
+
+/** Operations / team bundle */
+export const OPS_BUNDLE = [
+  HOME_MODULE,
+  DASHBOARD_MODULE,
+  TASKS_MODULE,
+  INVENTORY_MODULE,
+  CONTACTS_MODULE,
+  EMAIL_MODULE,
+];

package/src/modules/pages/DashboardPage.jsx

@@ -0,0 +1,140 @@
+/**
+ * DashboardPage — @mounaji/saas-template
+ *
+ * Pre-built dashboard page shell. Uses @mounaji/dashboard components.
+ * Compose with your own data by passing metric/activity props.
+ *
+ * Props:
+ *   metrics    — MetricCard[] props array (see @mounaji/dashboard)
+ *   activity   — ActivityFeed items array
+ *   usageBars  — UsageBar props array
+ *   header     — React node (override page header)
+ *   tokens     — Partial<DEFAULT_TOKENS>
+ */
+
+import { DASHBOARD_MODULE } from '../manifests.js';
+import { TOKEN_CSS_MAP } from '@mounaji_npm/tokens';
+
+function buildInlineTokens(tokens) {
+  if (!tokens) return {};
+  const s = {};
+  Object.entries(tokens).forEach(([k, v]) => { const c = TOKEN_CSS_MAP[k]; if (c) s[c] = v; });
+  return s;
+}
+
+export { DASHBOARD_MODULE as manifest };
+
+const DEFAULT_METRICS = [
+  { label: 'Total Messages',    value: '—', icon: '💬', variant: 'primary' },
+  { label: 'Active Assistants', value: '—', icon: '🤖', variant: 'success' },
+  { label: 'Knowledge Docs',    value: '—', icon: '🧠', variant: 'accent'  },
+  { label: 'API Calls (30d)',   value: '—', icon: '⚡', variant: 'warning' },
+];
+
+export function DashboardPage({ metrics = DEFAULT_METRICS, activity = [], usageBars = [], header, tokens, style }) {
+  return (
+    <div style={{
+      padding: 'var(--mn-spacing-xl, 32px)',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'var(--mn-spacing-xl, 32px)',
+      fontFamily: 'var(--mn-font-family, inherit)',
+      ...buildInlineTokens(tokens),
+      ...style,
+    }}>
+      {/* Header */}
+      {header ?? (
+        <div>
+          <h1 style={{ margin: 0, fontSize: 'var(--mn-font-size-2xl, 1.5rem)', fontWeight: 700, color: 'var(--mn-text-primary-dark, #F0F4FF)' }}>
+            Dashboard
+          </h1>
+          <p style={{ margin: '4px 0 0', fontSize: 'var(--mn-font-size-sm, 0.875rem)', color: 'var(--mn-text-secondary-dark, #94A3B8)' }}>
+            Overview of your workspace activity
+          </p>
+        </div>
+      )}
+
+      {/* Metrics grid */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 16 }}>
+        {metrics.map((m, i) => (
+          <MetricCardShell key={m.label ?? i} {...m} />
+        ))}
+      </div>
+
+      {/* Usage + Activity row */}
+      <div style={{ display: 'grid', gridTemplateColumns: usageBars.length ? '1fr 1fr' : '1fr', gap: 24 }}>
+        {activity.length > 0 && (
+          <SectionCard title="Recent Activity">
+            {activity.map((item, i) => (
+              <ActivityItem key={i} item={item} />
+            ))}
+          </SectionCard>
+        )}
+        {usageBars.length > 0 && (
+          <SectionCard title="Plan Usage">
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+              {usageBars.map((bar, i) => (
+                <UsageBarShell key={i} {...bar} />
+              ))}
+            </div>
+          </SectionCard>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Minimal inline implementations so DashboardPage has no hard dep on @mounaji/dashboard
+function MetricCardShell({ label, value, icon, variant = 'primary' }) {
+  const colors = { primary: '#3B82F6', success: '#10B981', warning: '#F59E0B', danger: '#EF4444', accent: '#8B5CF6' };
+  const c = colors[variant] ?? colors.primary;
+  return (
+    <div style={{ padding: 20, borderRadius: 'var(--mn-radius-lg, 0.75rem)', backgroundColor: 'var(--mn-color-card-dark, #0B0F23)', border: '1px solid var(--mn-border-dark, rgba(255,255,255,0.07))' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+        <span style={{ fontSize: '0.8125rem', color: 'var(--mn-text-secondary-dark, #94A3B8)' }}>{label}</span>
+        <div style={{ width: 32, height: 32, borderRadius: 'var(--mn-radius-md, 0.5rem)', backgroundColor: `${c}18`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>{icon}</div>
+      </div>
+      <p style={{ margin: '12px 0 0', fontSize: '1.5rem', fontWeight: 700, color: 'var(--mn-text-primary-dark, #F0F4FF)' }}>{value}</p>
+    </div>
+  );
+}
+
+function SectionCard({ title, children }) {
+  return (
+    <div style={{ borderRadius: 'var(--mn-radius-lg, 0.75rem)', backgroundColor: 'var(--mn-color-card-dark, #0B0F23)', border: '1px solid var(--mn-border-dark, rgba(255,255,255,0.07))', overflow: 'hidden' }}>
+      <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--mn-border-dark, rgba(255,255,255,0.07))' }}>
+        <h2 style={{ margin: 0, fontSize: '0.875rem', fontWeight: 600, color: 'var(--mn-text-primary-dark, #F0F4FF)' }}>{title}</h2>
+      </div>
+      <div style={{ padding: '0 20px' }}>{children}</div>
+    </div>
+  );
+}
+
+function ActivityItem({ item }) {
+  return (
+    <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: '12px 0', borderBottom: '1px solid var(--mn-border-dark, rgba(255,255,255,0.05))' }}>
+      {item.icon && <span style={{ fontSize: 16, marginTop: 1 }}>{item.icon}</span>}
+      <div style={{ flex: 1 }}>
+        <p style={{ margin: 0, fontSize: '0.8125rem', color: 'var(--mn-text-primary-dark, #F0F4FF)', fontWeight: 500 }}>{item.title}</p>
+        {item.description && <p style={{ margin: '2px 0 0', fontSize: '0.75rem', color: 'var(--mn-text-secondary-dark, #94A3B8)' }}>{item.description}</p>}
+      </div>
+      {item.ts && <span style={{ fontSize: 11, color: 'var(--mn-text-muted-dark, #64748B)', flexShrink: 0 }}>{item.ts}</span>}
+    </div>
+  );
+}
+
+function UsageBarShell({ label, used, total, unit = '' }) {
+  const pct = total > 0 ? Math.round((used / total) * 100) : 0;
+  const color = pct >= 90 ? '#EF4444' : pct >= 70 ? '#F59E0B' : '#3B82F6';
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+        <span style={{ fontSize: '0.8125rem', color: 'var(--mn-text-secondary-dark, #94A3B8)' }}>{label}</span>
+        <span style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--mn-text-primary-dark, #F0F4FF)' }}>{used.toLocaleString()}{unit} / {total === Infinity ? '∞' : total.toLocaleString()}{unit}</span>
+      </div>
+      <div style={{ height: 6, borderRadius: 9999, backgroundColor: 'rgba(255,255,255,0.08)', overflow: 'hidden' }}>
+        <div style={{ height: '100%', width: `${pct}%`, backgroundColor: color, borderRadius: 'inherit', transition: 'width 300ms' }} />
+      </div>
+    </div>
+  );
+}

package/src/modules/pages/SettingsPage.jsx

@@ -0,0 +1,205 @@
+/**
+ * SettingsPage — @mounaji/saas-template
+ *
+ * Pre-built settings page with tab navigation.
+ * The "Design" tab renders the full TokenEditor from @mounaji/admin-controls.
+ *
+ * Props:
+ *   tabs       — Tab[] — additional tabs beyond built-ins
+ *                        [{ id, label, content: ReactNode }]
+ *   defaultTab — string (default: 'design')
+ *   tokens     — Partial<DEFAULT_TOKENS>
+ */
+
+import { useState } from 'react';
+import { useTokens, TOKEN_GROUPS, DEFAULT_TOKENS, tokensToCSS } from '@mounaji_npm/tokens';
+import { SETTINGS_MODULE } from '../manifests.js';
+
+export { SETTINGS_MODULE as manifest };
+
+export function SettingsPage({ tabs: extraTabs = [], defaultTab = 'design', tokens, style }) {
+  const { tokens: currentTokens, updateToken, updateTokens, resetTokens, saveTokens, isDirty } = useTokens();
+
+  const builtinTabs = [
+    { id: 'design',   label: '🎨 Design Tokens',  content: <DesignTab tokens={currentTokens} onChange={updateToken} onReset={resetTokens} onSave={saveTokens} isDirty={isDirty} /> },
+    { id: 'account',  label: '👤 Account',          content: <PlaceholderTab label="Account settings" /> },
+    { id: 'billing',  label: '💳 Billing',           content: <PlaceholderTab label="Billing settings" /> },
+    { id: 'api-keys', label: '🔑 API Keys',          content: <PlaceholderTab label="API key management" /> },
+  ];
+
+  const allTabs = [...builtinTabs, ...extraTabs];
+  const [active, setActive] = useState(defaultTab);
+  const activeContent = allTabs.find(t => t.id === active)?.content;
+
+  return (
+    <div style={{
+      padding: 'var(--mn-spacing-xl, 32px)',
+      display: 'flex', flexDirection: 'column', gap: 24,
+      fontFamily: 'var(--mn-font-family, inherit)',
+      ...style,
+    }}>
+      <div>
+        <h1 style={{ margin: 0, fontSize: 'var(--mn-font-size-2xl, 1.5rem)', fontWeight: 700, color: 'var(--mn-text-primary-dark, #F0F4FF)' }}>Settings</h1>
+        <p style={{ margin: '4px 0 0', fontSize: '0.875rem', color: 'var(--mn-text-secondary-dark, #94A3B8)' }}>Configure your workspace and platform appearance</p>
+      </div>
+
+      {/* Tab bar */}
+      <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--mn-border-dark, rgba(255,255,255,0.07))', paddingBottom: 0 }}>
+        {allTabs.map(tab => (
+          <button
+            key={tab.id}
+            onClick={() => setActive(tab.id)}
+            style={{
+              padding: '8px 16px',
+              background: 'none', border: 'none',
+              borderBottom: active === tab.id ? '2px solid var(--mn-color-primary, #3B82F6)' : '2px solid transparent',
+              color: active === tab.id ? 'var(--mn-text-primary-dark, #F0F4FF)' : 'var(--mn-text-secondary-dark, #94A3B8)',
+              fontSize: '0.875rem', fontWeight: 500,
+              cursor: 'pointer',
+              marginBottom: -1,
+              fontFamily: 'inherit',
+              transition: 'color 150ms, border-color 150ms',
+            }}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Active tab content */}
+      <div>{activeContent}</div>
+    </div>
+  );
+}
+
+function DesignTab({ tokens, onChange, onReset, onSave, isDirty }) {
+  const [copied, setCopied] = useState('');
+
+  function copy(text, key) {
+    navigator.clipboard?.writeText(text).then(() => {
+      setCopied(key);
+      setTimeout(() => setCopied(''), 2000);
+    });
+  }
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 320px', gap: 24, alignItems: 'start' }}>
+      {/* Left — editor */}
+      <div>
+        {/* Actions */}
+        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
+          {isDirty && <ActionBtn onClick={onReset} variant="ghost">Reset</ActionBtn>}
+          <ActionBtn onClick={onSave} disabled={!isDirty} variant="primary">{isDirty ? 'Save Changes' : 'Saved'}</ActionBtn>
+          <ActionBtn onClick={() => copy(tokensToCSS(tokens), 'css')} variant="outline">{copied === 'css' ? '✓ Copied' : 'Copy CSS'}</ActionBtn>
+          <ActionBtn onClick={() => copy(JSON.stringify(tokens, null, 2), 'json')} variant="outline">{copied === 'json' ? '✓ Copied' : 'Copy JSON'}</ActionBtn>
+        </div>
+
+        {/* Token groups */}
+        {TOKEN_GROUPS.map(group => (
+          <TokenGroupSection key={group.id} group={group} tokens={tokens} onChange={onChange} />
+        ))}
+      </div>
+
+      {/* Right — live preview */}
+      <div style={{ position: 'sticky', top: 70 }}>
+        <TokenPreview tokens={tokens} />
+      </div>
+    </div>
+  );
+}
+
+function TokenGroupSection({ group, tokens }) {
+  const [open, setOpen] = useState(true);
+  const { updateToken } = useTokens();
+
+  return (
+    <div style={{ marginBottom: 12, borderRadius: 'var(--mn-radius-lg, 0.75rem)', border: '1px solid var(--mn-border-dark, rgba(255,255,255,0.07))', overflow: 'hidden' }}>
+      <button
+        onClick={() => setOpen(o => !o)}
+        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', padding: '12px 16px', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--mn-text-primary-dark, #F0F4FF)', fontFamily: 'inherit' }}
+      >
+        <span style={{ fontWeight: 600, fontSize: '0.8125rem' }}>{group.label}</span>
+        <span style={{ fontSize: 10, color: 'var(--mn-text-muted-dark, #64748B)' }}>{open ? '▲' : '▼'}</span>
+      </button>
+
+      {open && group.tokens.map(meta => {
+        const value = tokens[meta.key] ?? DEFAULT_TOKENS[meta.key];
+        const isDefault = value === DEFAULT_TOKENS[meta.key];
+        return (
+          <div key={meta.key} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '8px 16px', borderTop: '1px solid var(--mn-border-dark, rgba(255,255,255,0.05))' }}>
+            <div>
+              <p style={{ margin: 0, fontSize: '0.8125rem', fontWeight: 500, color: 'var(--mn-text-primary-dark, #F0F4FF)' }}>{meta.label}</p>
+              <code style={{ fontSize: 11, color: 'var(--mn-text-muted-dark, #64748B)' }}>{meta.key}</code>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              {!isDefault && (
+                <button onClick={() => updateToken(meta.key, DEFAULT_TOKENS[meta.key])} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--mn-text-muted-dark, #64748B)', fontSize: 14 }}>↺</button>
+              )}
+              {meta.type === 'color' ? (
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  <input type="color" value={value.startsWith?.('#') ? value : '#000000'} onChange={e => updateToken(meta.key, e.target.value)} style={{ width: 28, height: 28, border: 'none', borderRadius: 4, cursor: 'pointer', padding: 0 }} />
+                  <input type="text" value={value} onChange={e => updateToken(meta.key, e.target.value)} style={{ width: 88, padding: '3px 8px', borderRadius: 6, border: '1px solid var(--mn-border-dark, rgba(255,255,255,0.1))', backgroundColor: 'rgba(255,255,255,0.05)', color: 'var(--mn-text-primary-dark, #F0F4FF)', fontSize: 12, outline: 'none', fontFamily: 'monospace' }} />
+                </div>
+              ) : (
+                <input type="text" value={value} onChange={e => updateToken(meta.key, e.target.value)} style={{ width: 120, padding: '3px 8px', borderRadius: 6, border: '1px solid var(--mn-border-dark, rgba(255,255,255,0.1))', backgroundColor: 'rgba(255,255,255,0.05)', color: 'var(--mn-text-primary-dark, #F0F4FF)', fontSize: 12, outline: 'none' }} />
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function TokenPreview({ tokens }) {
+  return (
+    <div style={{ borderRadius: 'var(--mn-radius-lg, 0.75rem)', border: '1px solid var(--mn-border-dark, rgba(255,255,255,0.07))', overflow: 'hidden' }}>
+      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--mn-border-dark, rgba(255,255,255,0.07))' }}>
+        <p style={{ margin: 0, fontSize: '0.8125rem', fontWeight: 600, color: 'var(--mn-text-primary-dark, #F0F4FF)' }}>Live Preview</p>
+      </div>
+      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
+        {/* Color swatches */}
+        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+          {['colorPrimary','colorAccent','colorAccentAlt','colorSuccess','colorWarning','colorDanger'].map(k => (
+            <div key={k} title={k} style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: tokens[k] ?? DEFAULT_TOKENS[k] }} />
+          ))}
+        </div>
+        {/* Sample button */}
+        <button style={{ padding: '8px 16px', borderRadius: 'var(--mn-radius-md, 0.5rem)', backgroundColor: 'var(--mn-color-primary, #3B82F6)', color: '#fff', border: 'none', fontFamily: 'var(--mn-font-family, inherit)', fontSize: '0.875rem', fontWeight: 500, cursor: 'default' }}>Primary Button</button>
+        <button style={{ padding: '8px 16px', borderRadius: 'var(--mn-radius-md, 0.5rem)', backgroundColor: 'transparent', color: 'var(--mn-color-primary, #3B82F6)', border: '1px solid var(--mn-color-primary, #3B82F6)', fontFamily: 'var(--mn-font-family, inherit)', fontSize: '0.875rem', fontWeight: 500, cursor: 'default' }}>Outline Button</button>
+        {/* Sample card */}
+        <div style={{ padding: 12, borderRadius: 'var(--mn-radius-lg, 0.75rem)', backgroundColor: 'var(--mn-color-card-dark, #0B0F23)', border: '1px solid var(--mn-border-dark, rgba(255,255,255,0.07))' }}>
+          <p style={{ margin: 0, fontSize: '0.875rem', fontWeight: 600, color: 'var(--mn-text-primary-dark, #F0F4FF)' }}>Card surface</p>
+          <p style={{ margin: '4px 0 0', fontSize: '0.75rem', color: 'var(--mn-text-secondary-dark, #94A3B8)' }}>Secondary text color</p>
+        </div>
+        {/* Radius preview */}
+        <div style={{ display: 'flex', gap: 8 }}>
+          {['radiusSm','radiusMd','radiusLg','radiusXl'].map(k => (
+            <div key={k} style={{ width: 32, height: 32, backgroundColor: 'var(--mn-color-accent, #8B5CF6)', borderRadius: tokens[k] ?? DEFAULT_TOKENS[k] }} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ActionBtn({ children, onClick, variant = 'primary', disabled = false }) {
+  const styles = {
+    primary: { backgroundColor: 'var(--mn-color-primary, #3B82F6)', color: '#fff', border: 'none' },
+    ghost:   { backgroundColor: 'rgba(255,255,255,0.06)', color: 'var(--mn-text-secondary-dark, #94A3B8)', border: 'none' },
+    outline: { backgroundColor: 'transparent', color: 'var(--mn-text-secondary-dark, #94A3B8)', border: '1px solid var(--mn-border-md-dark, rgba(255,255,255,0.13))' },
+  };
+  return (
+    <button onClick={onClick} disabled={disabled} style={{ ...styles[variant], padding: '6px 14px', borderRadius: 'var(--mn-radius-md, 0.5rem)', fontSize: '0.8125rem', fontWeight: 500, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, fontFamily: 'inherit' }}>
+      {children}
+    </button>
+  );
+}
+
+function PlaceholderTab({ label }) {
+  return (
+    <div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--mn-text-muted-dark, #64748B)', fontSize: '0.875rem' }}>
+      {label} — configure with your own content
+    </div>
+  );
+}