@zenith-open/zenithcms-plugin-ai-architect-ui 1.0.0-beta.10 → 1.0.0-beta.8

package/dist/AIWriterPage.d.ts

@@ -0,0 +1,2 @@
+declare const AIWriterPage: () => import("react/jsx-runtime").JSX.Element;
+export default AIWriterPage;

package/dist/AIWriterPage.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { Sparkles, Send, Loader2, Copy, Zap, Terminal, Cpu, PenTool, ShieldCheck, Search, Image as ImageIcon, CheckCircle2, AlertCircle, ChevronRight, RotateCcw, Save, Download, Code2, Wand2, Hash } from 'lucide-react';
+import api from '../lib/api';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '../lib/utils';
+import toast from 'react-hot-toast';
+import { useTheme } from '../context/ThemeContext';
+import { PageHeader } from '../components/ui/PageHeader';
+// ── Tool Definitions ───────────────────────────────────────────────────────────
+const TOOLS = [
+    { id: 'seo', name: 'SEO Analysis', icon: Search, endpoint: '/content-tools/seo-analysis', desc: 'Score title, meta, content', color: 'text-amber-400' },
+    { id: 'quality', name: 'Quality Audit', icon: ShieldCheck, endpoint: '/content-tools/quality', desc: 'Readability + word structure', color: 'text-z-active-text' },
+    { id: 'improve', name: 'Refine Text', icon: Wand2, endpoint: '/content-tools/ai/improve', desc: 'AI-powered rewrite', color: 'text-purple-400' },
+    { id: 'meta', name: 'Meta Generator', icon: Hash, endpoint: '/content-tools/ai/meta-description', desc: 'Auto SEO meta description', color: 'text-z-active-text' },
+    { id: 'alt', name: 'Alt Text', icon: ImageIcon, endpoint: '/content-tools/ai/alt-text', desc: 'Generate image alt text', color: 'text-pink-400' },
+];
+const MODES = [
+    { id: 'writer', label: 'Writer', icon: PenTool, desc: 'Generate content from a prompt' },
+    { id: 'architect', label: 'Architect', icon: Cpu, desc: 'Design a collection schema with AI' },
+    { id: 'tools', label: 'Tools', icon: Zap, desc: 'SEO, quality, meta & more' },
+];
+// ── Result Renderers ──────────────────────────────────────────────────────────
+function SeoResultView({ data }) {
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex items-end gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary mb-1", children: "SEO Score" }), _jsx("span", { className: cn('text-5xl font-black tabular-nums', data.score >= 70 ? 'text-z-active-text' : data.score >= 45 ? 'text-amber-400' : 'text-red-400'), children: data.score }), _jsx("span", { className: "text-lg text-z-secondary font-black", children: "/100" })] }), _jsx("div", { className: "flex-1 h-2 bg-z-hover rounded-full overflow-hidden mb-3", children: _jsx("div", { className: cn('h-full transition-all duration-700', data.score >= 70 ? 'bg-z-accent' : data.score >= 45 ? 'bg-amber-500' : 'bg-red-500'), style: { width: `${data.score}%` } }) })] }), data.passed?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-active-text/70", children: "Passing" }), data.passed.map((p, i) => (_jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(CheckCircle2, { size: 11, className: "text-z-active-text flex-shrink-0" }), p] }, i)))] })), data.issues?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-red-500/70", children: "Issues" }), data.issues.map((p, i) => (_jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(AlertCircle, { size: 11, className: "text-red-500 flex-shrink-0" }), p] }, i)))] })), data.suggestions?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-amber-500/70", children: "Suggestions" }), data.suggestions.map((p, i) => (_jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(ChevronRight, { size: 11, className: "text-amber-500 flex-shrink-0" }), p] }, i)))] }))] }));
+}
+function QualityResultView({ data }) {
+    const gradeColor = { A: 'text-z-active-text', B: 'text-z-active-text', C: 'text-amber-400', D: 'text-orange-400', F: 'text-red-400' };
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex items-start gap-6", children: [_jsxs("div", { children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary mb-1", children: "Grade" }), _jsx("span", { className: cn('text-6xl font-black', gradeColor[data.grade] || 'text-white'), children: data.grade })] }), _jsx("div", { className: "grid grid-cols-3 gap-3 flex-1 pt-1", children: [
+                            { label: 'Words', val: data.wordCount },
+                            { label: 'Sentences', val: data.sentenceCount },
+                            { label: 'Avg Words/Sent', val: data.avgWordsPerSentence },
+                        ].map(m => (_jsxs("div", { className: "bg-z-hover border border-z-border p-3", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-widest text-z-secondary mb-1", children: m.label }), _jsx("p", { className: "text-lg font-black text-white tabular-nums", children: m.val })] }, m.label))) })] }), data.issues?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-red-500/70", children: "Issues" }), data.issues.map((p, i) => _jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(AlertCircle, { size: 11, className: "text-red-500 flex-shrink-0" }), p] }, i))] })), data.suggestions?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-active-text/70", children: "Suggestions" }), data.suggestions.map((p, i) => _jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(CheckCircle2, { size: 11, className: "text-z-active-text flex-shrink-0" }), p] }, i))] }))] }));
+}
+function SchemaResultView({ data }) {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3 flex-wrap", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-black text-white tracking-tight", children: data.name }), _jsxs("p", { className: "text-[9px] text-z-secondary font-mono mt-0.5", children: ["/", data.slug] })] }), _jsxs("div", { className: "flex gap-2", children: [data.drafts && _jsx("span", { className: "px-2 py-0.5 text-[7px] font-black uppercase tracking-widest bg-z-accent/10 border border-z-accent/20 text-z-active-text", children: "Drafts" }), data.timestamps && _jsx("span", { className: "px-2 py-0.5 text-[7px] font-black uppercase tracking-widest bg-gray-500/10 border border-gray-500/20 text-z-muted", children: "Timestamps" })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: [data.fields?.length || 0, " Fields"] }), data.fields?.map((f, i) => (_jsxs("div", { className: "flex items-center justify-between px-3 py-2 bg-z-hover border border-z-border hover:border-z-border-strong transition-colors group", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-[9px] font-mono text-z-active-text", children: f.name }), f.required && _jsx("span", { className: "text-[6px] font-black text-red-500 uppercase tracking-wider", children: "required" })] }), _jsx("span", { className: "text-[8px] text-gray-600 uppercase tracking-widest font-black", children: f.type })] }, i)))] })] }));
+}
+// ── Main Component ─────────────────────────────────────────────────────────────
+const AIWriterPage = () => {
+    const { theme } = useTheme();
+    const dark = theme === 'dark';
+    const [mode, setMode] = useState('writer');
+    const [prompt, setPrompt] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [result, setResult] = useState(null);
+    const [activeTool, setActiveTool] = useState('seo');
+    const [history, setHistory] = useState([]);
+    const [schemaForSave, setSchemaForSave] = useState(null);
+    const [savingSchema, setSavingSchema] = useState(false);
+    const textareaRef = useRef(null);
+    // Auto-resize textarea
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+            textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 300)}px`;
+        }
+    }, [prompt]);
+    const handleExecute = async () => {
+        if (!prompt.trim() && activeTool !== 'alt')
+            return;
+        setLoading(true);
+        setResult(null);
+        setSchemaForSave(null);
+        try {
+            let res;
+            let resultData;
+            if (mode === 'architect') {
+                res = await api.post('/system/ai-architect', { prompt });
+                resultData = res.data.data.schema;
+                setSchemaForSave(resultData);
+            }
+            else if (mode === 'writer') {
+                res = await api.post('/content-tools/ai/generate', { prompt });
+                resultData = res.data.data.text;
+            }
+            else {
+                const tool = TOOLS.find(t => t.id === activeTool);
+                let payload = { content: prompt };
+                if (activeTool === 'improve') {
+                    payload = { text: prompt, instruction: 'Make it more professional, clear, and concise. Improve grammar and flow.' };
+                }
+                else if (activeTool === 'meta') {
+                    payload = { title: 'Content', content: prompt };
+                }
+                else if (activeTool === 'seo') {
+                    payload = { title: prompt.split('\n')[0]?.substring(0, 60), content: prompt, description: prompt.substring(0, 160) };
+                }
+                else if (activeTool === 'alt') {
+                    payload = { imageUrl: prompt };
+                }
+                res = await api.post(tool.endpoint, payload);
+                const d = res.data.data;
+                if (activeTool === 'seo')
+                    resultData = d;
+                else if (activeTool === 'quality')
+                    resultData = d;
+                else if (activeTool === 'improve')
+                    resultData = d.text;
+                else if (activeTool === 'meta')
+                    resultData = d.description;
+                else if (activeTool === 'alt')
+                    resultData = d.altText;
+            }
+            setResult(resultData);
+            setHistory(prev => [{
+                    id: Date.now().toString(),
+                    mode,
+                    prompt: prompt.substring(0, 80),
+                    result: resultData,
+                    timestamp: new Date()
+                }, ...prev.slice(0, 19)]);
+            toast.success('Generated');
+        }
+        catch (err) {
+            const msg = err?.response?.data?.error?.message || err?.response?.data?.message || 'AI request failed';
+            toast.error(msg);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter')
+            handleExecute();
+    };
+    const saveSchemaToDb = async () => {
+        if (!schemaForSave)
+            return;
+        setSavingSchema(true);
+        try {
+            await api.post('/schemas', schemaForSave);
+            toast.success(`Collection "${schemaForSave.name}" created!`);
+            setSchemaForSave(null);
+        }
+        catch (err) {
+            toast.error(err?.response?.data?.error?.message || 'Failed to save schema');
+        }
+        finally {
+            setSavingSchema(false);
+        }
+    };
+    const copyResult = () => {
+        const text = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
+        navigator.clipboard.writeText(text);
+        toast.success('Copied to clipboard');
+    };
+    const downloadResult = () => {
+        const text = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
+        const ext = mode === 'architect' ? 'json' : 'txt';
+        const blob = new Blob([text], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `zenith-ai-output.${ext}`;
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+    const renderResult = () => {
+        if (!result)
+            return null;
+        if (mode === 'architect')
+            return _jsx(SchemaResultView, { data: result });
+        if (mode === 'tools' && activeTool === 'seo')
+            return _jsx(SeoResultView, { data: result });
+        if (mode === 'tools' && activeTool === 'quality')
+            return _jsx(QualityResultView, { data: result });
+        return (_jsx(motion.div, { initial: { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, className: "whitespace-pre-wrap text-[12px] leading-relaxed text-gray-300 font-sans", children: typeof result === 'string' ? result : JSON.stringify(result, null, 2) }));
+    };
+    const activePlaceholder = mode === 'architect'
+        ? 'Describe a collection schema... e.g., "An e-commerce product with variants, pricing, and inventory tracking"'
+        : mode === 'writer'
+            ? 'Describe the content you want to generate... e.g., "Write a compelling blog intro about sustainable fashion"'
+            : activeTool === 'alt'
+                ? 'Paste an image URL to generate alt text...'
+                : activeTool === 'meta'
+                    ? 'Paste your content to generate a meta description...'
+                    : 'Paste text to analyze...';
+    return (_jsxs("div", { className: "flex flex-col h-[calc(100vh-64px)] overflow-hidden", children: [_jsx(PageHeader, { title: "AI Architect", description: "Generate content, design schemas, and analyze text quality", actions: _jsx("div", { className: cn('flex p-0.5 border', dark ? 'bg-black border-z-border' : 'bg-z-panel border-z-border'), children: MODES.map(m => (_jsxs("button", { onClick: () => { setMode(m.id); setResult(null); setSchemaForSave(null); }, title: m.desc, className: cn('flex items-center gap-2 px-4 py-2 text-[9px] font-black uppercase tracking-widest transition-all', mode === m.id
+                            ? (dark ? 'bg-white text-black' : 'bg-gray-900 text-white')
+                            : (dark ? 'text-z-secondary hover:text-white' : 'text-z-secondary hover:text-z-primary')), children: [_jsx(m.icon, { size: 11 }), _jsx("span", { className: "hidden sm:inline", children: m.label })] }, m.id))) }) }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsxs("div", { className: cn('w-56 flex-shrink-0 border-r flex flex-col hidden lg:flex', dark ? 'border-z-border bg-black' : 'border-z-border bg-gray-50'), children: [_jsx("div", { className: cn('px-4 py-3 border-b flex-shrink-0', dark ? 'border-z-border' : 'border-z-border'), children: _jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: "History" }) }), _jsxs("div", { className: "flex-1 overflow-y-auto p-2 space-y-1", children: [history.length === 0 && (_jsx("p", { className: "text-[8px] text-gray-600 uppercase tracking-widest p-2 text-center mt-4", children: "No history yet" })), history.map(h => (_jsxs("button", { onClick: () => { setResult(h.result); setSchemaForSave(h.mode === 'architect' ? h.result : null); }, className: cn('w-full text-left p-2.5 border border-transparent transition-all', dark ? 'hover:bg-z-hover hover:border-z-border' : 'hover:bg-white hover:border-z-border'), children: [_jsx("div", { className: "flex items-center gap-1.5 mb-1", children: _jsx("span", { className: cn('text-[7px] font-black uppercase tracking-widest', h.mode === 'architect' ? 'text-purple-400' : h.mode === 'tools' ? 'text-amber-400' : 'text-z-active-text'), children: h.mode }) }), _jsx("p", { className: "text-[9px] text-z-secondary truncate", children: h.prompt })] }, h.id)))] })] }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0 border-r", style: { borderColor: dark ? 'rgba(255,255,255,0.08)' : '#e5e7eb' }, children: [_jsx(AnimatePresence, { children: mode === 'tools' && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, className: cn('flex-shrink-0 border-b overflow-hidden', dark ? 'border-z-border' : 'border-z-border'), children: _jsx("div", { className: "p-3 flex gap-2 flex-wrap", children: TOOLS.map(tool => (_jsxs("button", { onClick: () => { setActiveTool(tool.id); setResult(null); }, title: tool.desc, className: cn('flex items-center gap-2 px-3 py-2 text-[9px] font-black uppercase tracking-widest border transition-all', activeTool === tool.id
+                                                ? (dark ? 'bg-white text-black border-white' : 'bg-gray-900 text-white border-gray-900')
+                                                : (dark ? 'border-z-border text-z-secondary hover:text-white hover:border-white/20' : 'border-z-border text-z-secondary hover:border-gray-400 hover:text-z-primary')), children: [_jsx(tool.icon, { size: 11, className: activeTool === tool.id ? '' : tool.color }), tool.name] }, tool.id))) }) })) }), _jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [_jsxs("div", { className: cn('flex-shrink-0 flex items-center gap-3 px-5 py-3 border-b', dark ? 'border-z-border' : 'border-z-border'), children: [_jsx(Terminal, { size: 12, className: "text-z-secondary" }), _jsx("span", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: mode === 'architect' ? 'Schema Prompt' : mode === 'writer' ? 'Content Prompt' : TOOLS.find(t => t.id === activeTool)?.name }), _jsx("span", { className: "ml-auto text-[8px] text-gray-600 uppercase tracking-widest hidden sm:block", children: "\u2318 + Enter to run" })] }), _jsx("textarea", { ref: textareaRef, value: prompt, onChange: e => setPrompt(e.target.value), onKeyDown: handleKeyDown, placeholder: activePlaceholder, className: cn('flex-1 w-full p-5 text-sm outline-none resize-none font-sans leading-relaxed', dark
+                                            ? 'bg-transparent text-white placeholder:text-gray-700'
+                                            : 'bg-transparent text-z-primary placeholder:text-z-muted') }), _jsx("div", { className: cn('flex-shrink-0 p-4 border-t', dark ? 'border-z-border' : 'border-z-border'), children: _jsxs("div", { className: "flex items-center gap-3", children: [prompt.trim() && (_jsx("button", { onClick: () => { setPrompt(''); setResult(null); }, className: "p-2.5 text-gray-600 hover:text-white transition-colors border border-transparent hover:border-white/10", title: "Clear", children: _jsx(RotateCcw, { size: 14 }) })), _jsx("button", { onClick: handleExecute, disabled: loading || (!prompt.trim() && activeTool !== 'alt'), className: cn('flex-1 py-3 font-black uppercase tracking-widest text-[10px] transition-all flex items-center justify-center gap-2.5', 'bg-z-accent hover:opacity-90 text-white', 'disabled:opacity-40 disabled:cursor-not-allowed', 'shadow-sm hover:shadow-sm'), children: loading
+                                                        ? _jsxs(_Fragment, { children: [_jsx(Loader2, { size: 13, className: "animate-spin" }), " Generating\u2026"] })
+                                                        : _jsxs(_Fragment, { children: [_jsx(Send, { size: 13 }), " ", mode === 'architect' ? 'Design Schema' : mode === 'writer' ? 'Generate Content' : 'Analyze'] }) })] }) })] })] }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsxs("div", { className: cn('flex-shrink-0 flex items-center justify-between px-5 py-3 border-b', dark ? 'border-z-border' : 'border-z-border'), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx(Sparkles, { size: 12, className: result ? 'text-z-active-text' : 'text-z-secondary' }), _jsx("span", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: "Output" }), result && _jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-z-accent shadow-sm" })] }), result && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: copyResult, title: "Copy", className: "p-2 text-z-secondary hover:text-white transition-colors border border-transparent hover:border-white/10", children: _jsx(Copy, { size: 13 }) }), _jsx("button", { onClick: downloadResult, title: "Download", className: "p-2 text-z-secondary hover:text-white transition-colors border border-transparent hover:border-white/10", children: _jsx(Download, { size: 13 }) }), mode === 'architect' && (_jsx("button", { onClick: () => { setResult(null); setSchemaForSave(null); }, title: "Clear", className: "p-2 text-z-secondary hover:text-white transition-colors border border-transparent hover:border-white/10", children: _jsx(RotateCcw, { size: 13 }) }))] }))] }), _jsx("div", { className: "flex-1 overflow-auto p-6", children: loading ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-4", children: [_jsxs("div", { className: "relative", children: [_jsx(Loader2, { size: 32, className: "animate-spin text-z-active-text" }), _jsx("div", { className: "absolute inset-0 blur-xl bg-z-accent/20 animate-pulse" })] }), _jsx("p", { className: "text-[9px] font-black uppercase tracking-[0.4em] text-z-secondary animate-pulse", children: mode === 'architect' ? 'Designing Schema…' : mode === 'writer' ? 'Writing Content…' : 'Analyzing…' })] })) : !result ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-5 opacity-30", children: [_jsx(Cpu, { size: 40, className: "text-z-secondary" }), _jsxs("div", { className: "text-center space-y-1", children: [_jsx("p", { className: "text-[9px] font-black uppercase tracking-[0.4em] text-z-secondary", children: "Awaiting Input" }), _jsx("p", { className: "text-[8px] text-gray-600 uppercase tracking-widest", children: mode === 'architect' ? 'Describe a collection to generate a schema' : mode === 'writer' ? 'Write a prompt to generate content' : 'Paste content to analyze' })] })] })) : (_jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.2 }, children: renderResult() }, JSON.stringify(result).substring(0, 50)) })) }), _jsx(AnimatePresence, { children: result && mode === 'architect' && schemaForSave && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, className: cn('flex-shrink-0 border-t overflow-hidden', dark ? 'border-z-border' : 'border-z-border'), children: _jsxs("div", { className: "px-5 py-3 flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-[8px] text-z-secondary uppercase tracking-widest", children: "Schema looks good? Save it as a live collection." }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { onClick: () => {
+                                                            const text = JSON.stringify(schemaForSave, null, 2);
+                                                            navigator.clipboard.writeText(text);
+                                                            toast.success('Schema copied as JSON');
+                                                        }, className: cn('px-4 py-2 border text-[9px] font-black uppercase tracking-widest flex items-center gap-2 transition-all', dark ? 'border-z-border text-z-muted hover:text-white hover:border-white/20' : 'border-z-border text-z-secondary hover:border-gray-400'), children: [_jsx(Code2, { size: 11 }), " Copy JSON"] }), _jsxs("button", { onClick: saveSchemaToDb, disabled: savingSchema, className: "px-5 py-2 bg-z-accent hover:opacity-90 text-white text-[9px] font-black uppercase tracking-widest flex items-center gap-2 transition-all disabled:opacity-50 shadow-sm", children: [savingSchema ? _jsx(Loader2, { size: 11, className: "animate-spin" }) : _jsx(Save, { size: 11 }), "Save Collection"] })] })] }) })) })] })] })] }));
+};
+export default AIWriterPage;

package/dist/SettingsAi.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SettingsAiProps {
+    settings: Record<string, any>;
+    setSettings: (s: any) => void;
+    theme: 'light' | 'dark';
+}
+declare const SettingsAi: React.FC<SettingsAiProps>;
+export default SettingsAi;

package/dist/SettingsAi.js

@@ -0,0 +1,245 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Lock, Loader2, CheckCircle2, AlertCircle, ExternalLink, Eye, EyeOff, Cpu, Zap, ChevronRight, Info, TestTube2 } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import api from '../../lib/api';
+import toast from 'react-hot-toast';
+const PROVIDERS = [
+    {
+        id: 'openrouter',
+        name: 'OpenRouter',
+        color: 'text-z-active-text',
+        description: 'Unified gateway to 200+ models from any provider via one API key',
+        docsUrl: 'https://openrouter.ai/keys',
+        keyPlaceholder: 'sk-or-v1-...',
+        keyField: 'openRouterApiKey',
+        badge: 'Recommended',
+        models: [
+            { value: 'anthropic/claude-3.5-sonnet', label: 'Claude 3.5 Sonnet', tier: 'pro' },
+            { value: 'anthropic/claude-3.5-haiku', label: 'Claude 3.5 Haiku', tier: 'pro' },
+            { value: 'anthropic/claude-3-opus', label: 'Claude 3 Opus', tier: 'ultra' },
+            { value: 'openai/gpt-4o', label: 'GPT-4o', tier: 'pro' },
+            { value: 'openai/gpt-4o-mini', label: 'GPT-4o Mini', tier: 'free' },
+            { value: 'openai/gpt-4-turbo', label: 'GPT-4 Turbo', tier: 'pro' },
+            { value: 'google/gemini-pro-1.5', label: 'Gemini 1.5 Pro', tier: 'pro' },
+            { value: 'google/gemini-flash-1.5', label: 'Gemini 1.5 Flash', tier: 'free' },
+            { value: 'meta-llama/llama-3.3-70b-instruct', label: 'Llama 3.3 70B', tier: 'free' },
+            { value: 'mistralai/mistral-large', label: 'Mistral Large', tier: 'pro' },
+            { value: 'mistralai/mixtral-8x7b-instruct', label: 'Mixtral 8x7B', tier: 'free' },
+            { value: 'deepseek/deepseek-r1', label: 'DeepSeek R1', tier: 'pro' },
+            { value: 'x-ai/grok-beta', label: 'Grok Beta', tier: 'pro' },
+            { value: 'cohere/command-r-plus', label: 'Cohere Command R+', tier: 'pro' },
+            { value: 'perplexity/llama-3.1-sonar-large-128k-online', label: 'Perplexity Sonar Large', tier: 'pro' },
+        ],
+    },
+    {
+        id: 'openai',
+        name: 'OpenAI',
+        color: 'text-z-active-text',
+        description: 'Direct access to GPT-4o, o1, and all OpenAI models',
+        docsUrl: 'https://platform.openai.com/api-keys',
+        keyPlaceholder: 'sk-proj-...',
+        keyField: 'openaiApiKey',
+        models: [
+            { value: 'gpt-4o', label: 'GPT-4o', tier: 'pro' },
+            { value: 'gpt-4o-mini', label: 'GPT-4o Mini', tier: 'free' },
+            { value: 'gpt-4-turbo', label: 'GPT-4 Turbo', tier: 'pro' },
+            { value: 'o1-preview', label: 'o1 Preview', tier: 'ultra' },
+            { value: 'o1-mini', label: 'o1 Mini', tier: 'pro' },
+            { value: 'o3-mini', label: 'o3 Mini', tier: 'pro' },
+        ],
+    },
+    {
+        id: 'anthropic',
+        name: 'Anthropic',
+        color: 'text-orange-400',
+        description: 'Direct access to Claude models with vision and context support',
+        docsUrl: 'https://console.anthropic.com/settings/keys',
+        keyPlaceholder: 'sk-ant-...',
+        keyField: 'anthropicApiKey',
+        models: [
+            { value: 'claude-3-5-sonnet-20241022', label: 'Claude 3.5 Sonnet', tier: 'pro' },
+            { value: 'claude-3-5-haiku-20241022', label: 'Claude 3.5 Haiku', tier: 'free' },
+            { value: 'claude-3-opus-20240229', label: 'Claude 3 Opus', tier: 'ultra' },
+        ],
+    },
+    {
+        id: 'google',
+        name: 'Google Gemini',
+        color: 'text-z-active-text',
+        description: 'Gemini Pro/Flash with long context and multimodal capabilities',
+        docsUrl: 'https://aistudio.google.com/app/apikey',
+        keyPlaceholder: 'AIza...',
+        keyField: 'googleApiKey',
+        models: [
+            { value: 'gemini-1.5-pro-latest', label: 'Gemini 1.5 Pro', tier: 'pro' },
+            { value: 'gemini-1.5-flash-latest', label: 'Gemini 1.5 Flash', tier: 'free' },
+            { value: 'gemini-2.0-flash-exp', label: 'Gemini 2.0 Flash', tier: 'pro' },
+        ],
+    },
+    {
+        id: 'groq',
+        name: 'Groq',
+        color: 'text-pink-400',
+        description: 'Ultra-fast inference with LPU hardware — 800+ tokens/sec',
+        docsUrl: 'https://console.groq.com/keys',
+        keyPlaceholder: 'gsk_...',
+        keyField: 'groqApiKey',
+        badge: 'Fastest',
+        models: [
+            { value: 'llama-3.3-70b-versatile', label: 'Llama 3.3 70B', tier: 'free' },
+            { value: 'llama-3.1-8b-instant', label: 'Llama 3.1 8B Instant', tier: 'free' },
+            { value: 'mixtral-8x7b-32768', label: 'Mixtral 8x7B', tier: 'free' },
+            { value: 'gemma2-9b-it', label: 'Gemma 2 9B', tier: 'free' },
+        ],
+    },
+    {
+        id: 'nvidia',
+        name: 'NVIDIA NIM',
+        color: 'text-green-400',
+        description: 'NVIDIA-hosted models with GPU-accelerated inference',
+        docsUrl: 'https://build.nvidia.com/explore/discover',
+        keyPlaceholder: 'nvapi-...',
+        keyField: 'nvidiaApiKey',
+        models: [
+            { value: 'meta/llama-3.1-405b-instruct', label: 'Llama 3.1 405B', tier: 'ultra' },
+            { value: 'meta/llama-3.1-70b-instruct', label: 'Llama 3.1 70B', tier: 'pro' },
+            { value: 'meta/llama-3.1-8b-instruct', label: 'Llama 3.1 8B', tier: 'free' },
+            { value: 'mistralai/mistral-large-2-instruct', label: 'Mistral Large 2', tier: 'pro' },
+            { value: 'nvidia/llama-3.1-nemotron-70b-instruct', label: 'Nemotron 70B', tier: 'pro' },
+        ],
+    },
+    {
+        id: 'together',
+        name: 'Together AI',
+        color: 'text-yellow-400',
+        description: 'Open-source models on fast distributed inference infrastructure',
+        docsUrl: 'https://api.together.xyz/settings/api-keys',
+        keyPlaceholder: 'together-...',
+        keyField: 'togetherApiKey',
+        models: [
+            { value: 'meta-llama/Llama-3.3-70B-Instruct-Turbo', label: 'Llama 3.3 70B Turbo', tier: 'pro' },
+            { value: 'mistralai/Mixtral-8x7B-Instruct-v0.1', label: 'Mixtral 8x7B', tier: 'free' },
+            { value: 'deepseek-ai/DeepSeek-R1', label: 'DeepSeek R1', tier: 'pro' },
+        ],
+    },
+    {
+        id: 'mistral',
+        name: 'Mistral AI',
+        color: 'text-amber-400',
+        description: 'Direct access to Mistral, Codestral, and Pixtral models',
+        docsUrl: 'https://console.mistral.ai/api-keys',
+        keyPlaceholder: 'mistral-...',
+        keyField: 'mistralApiKey',
+        models: [
+            { value: 'mistral-large-latest', label: 'Mistral Large', tier: 'pro' },
+            { value: 'mistral-small-latest', label: 'Mistral Small', tier: 'free' },
+            { value: 'codestral-latest', label: 'Codestral', tier: 'pro' },
+            { value: 'pixtral-large-latest', label: 'Pixtral Large', tier: 'ultra' },
+        ],
+    },
+    {
+        id: 'cohere',
+        name: 'Cohere',
+        color: 'text-teal-400',
+        description: 'Enterprise-grade models optimized for search and RAG workflows',
+        docsUrl: 'https://dashboard.cohere.com/api-keys',
+        keyPlaceholder: 'co_...',
+        keyField: 'cohereApiKey',
+        models: [
+            { value: 'command-r-plus', label: 'Command R+', tier: 'ultra' },
+            { value: 'command-r', label: 'Command R', tier: 'pro' },
+            { value: 'command-light', label: 'Command Light', tier: 'free' },
+        ],
+    },
+    {
+        id: 'xai',
+        name: 'xAI / Grok',
+        color: 'text-gray-300',
+        description: "Elon Musk's xAI Grok model with real-time X/Twitter integration",
+        docsUrl: 'https://console.x.ai/',
+        keyPlaceholder: 'xai-...',
+        keyField: 'xaiApiKey',
+        models: [
+            { value: 'grok-beta', label: 'Grok Beta', tier: 'pro' },
+            { value: 'grok-vision-beta', label: 'Grok Vision Beta', tier: 'pro' },
+        ],
+    },
+];
+const TIER_BADGE = {
+    free: 'bg-z-active-bg text-z-active-text border-z-accent/20',
+    pro: 'bg-z-accent/10 text-z-active-text border-z-accent/20',
+    ultra: 'bg-purple-500/10 text-purple-400 border-purple-500/20',
+};
+const SettingsAi = ({ settings, setSettings, theme }) => {
+    const dark = theme === 'dark';
+    const [validating, setValidating] = useState(false);
+    const [testResult, setTestResult] = useState(null);
+    const [showKeys, setShowKeys] = useState({});
+    const [expandedProvider, setExpandedProvider] = useState('openrouter');
+    const [dynamicModels, setDynamicModels] = useState({});
+    const [fetchingModels, setFetchingModels] = useState(null);
+    const activeProvider = PROVIDERS.find(p => {
+        const key = settings[p.keyField]?.trim();
+        return key && key !== '[MASKED_CREDENTIAL]';
+    }) || PROVIDERS.find(p => p.id === 'openrouter');
+    const handleValidate = async () => {
+        setValidating(true);
+        setTestResult(null);
+        try {
+            const providerId = settings.aiProvider || 'openrouter';
+            const providerConfig = PROVIDERS.find(p => p.id === providerId);
+            const apiKeyField = providerConfig ? providerConfig.keyField : 'openRouterApiKey';
+            const apiKey = settings[apiKeyField];
+            const res = await api.post('/system/settings/ai/validate', {
+                provider: providerId,
+                model: settings.aiModel,
+                apiKey: apiKey
+            });
+            setTestResult({ ok: true, msg: res.data.message || 'API Key is valid' });
+            toast.success('AI connection verified');
+        }
+        catch (err) {
+            const msg = err?.response?.data?.error?.message || err?.response?.data?.message || 'Connection failed';
+            setTestResult({ ok: false, msg });
+            toast.error('AI connection failed');
+        }
+        finally {
+            setValidating(false);
+        }
+    };
+    const handleFetchModels = async (providerId, apiKeyField) => {
+        setFetchingModels(providerId);
+        try {
+            const apiKey = settings[apiKeyField];
+            const res = await api.post('/system/settings/ai/models', {
+                provider: providerId,
+                apiKey: apiKey
+            });
+            const models = res.data?.data || [];
+            setDynamicModels(prev => ({ ...prev, [providerId]: models }));
+            toast.success(`Fetched ${models.length} models for ${providerId}`);
+        }
+        catch (err) {
+            const msg = err?.response?.data?.error?.message || err?.response?.data?.message || 'Failed to fetch models';
+            toast.error(msg);
+        }
+        finally {
+            setFetchingModels(null);
+        }
+    };
+    const toggleKey = (id) => setShowKeys(prev => ({ ...prev, [id]: !prev[id] }));
+    const inp = (dark) => cn('w-full border px-3 py-2.5 text-sm font-semibold outline-none transition-colors rounded-none focus-visible:ring-2 focus-visible:ring-z-active-border focus-visible:ring-offset-1 focus-visible:ring-offset-black', dark
+        ? 'bg-black border-z-border text-white placeholder:text-gray-700 focus:border-z-accent'
+        : 'bg-z-panel border-z-border text-z-primary placeholder:text-z-muted focus:border-z-accent');
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: cn('p-5 border space-y-4 shadow-sm', dark ? 'bg-z-panel backdrop-blur-md border-z-border' : 'bg-z-input border-z-border'), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx(Cpu, { size: 14, className: "text-z-active-text" }), _jsx("span", { className: cn('text-sm font-semibold  ', dark ? 'text-white' : 'text-z-primary'), children: "Active Model" }), _jsx("span", { className: "ml-auto text-sm text-z-secondary", children: "Used by all AI features" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-semibold text-z-secondary", children: "AI Provider" }), _jsx("select", { value: settings.aiProvider || 'openrouter', onChange: e => setSettings({ ...settings, aiProvider: e.target.value, aiModel: PROVIDERS.find(p => p.id === e.target.value)?.models[0]?.value || '' }), className: inp(dark), children: PROVIDERS.map(p => _jsx("option", { value: p.id, children: p.name }, p.id)) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-semibold text-z-secondary", children: "Model" }), _jsx("select", { value: settings.aiModel || '', onChange: e => setSettings({ ...settings, aiModel: e.target.value }), className: inp(dark), children: (dynamicModels[settings.aiProvider || 'openrouter'] || PROVIDERS.find(p => p.id === (settings.aiProvider || 'openrouter'))?.models || []).map(m => (_jsxs("option", { value: m.value, children: [m.label, " ", m.tier ? `(${m.tier})` : ''] }, m.value))) })] })] }), _jsxs("div", { className: "flex items-center gap-3 pt-1", children: [_jsxs("button", { onClick: handleValidate, disabled: validating, className: "px-4 py-2 bg-z-accent hover:opacity-90 shadow-sm text-white text-sm font-semibold flex items-center gap-2 disabled:opacity-50 transition-all", children: [validating ? _jsx(Loader2, { size: 11, className: "animate-spin" }) : _jsx(TestTube2, { size: 11 }), "Test Connection"] }), testResult && (_jsxs("div", { className: cn('flex items-center gap-2 text-sm font-semibold  ', testResult.ok ? 'text-z-active-text' : 'text-red-400'), children: [testResult.ok ? _jsx(CheckCircle2, { size: 11 }) : _jsx(AlertCircle, { size: 11 }), testResult.msg] }))] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Lock, { size: 12, className: "text-z-secondary" }), _jsx("span", { className: "text-sm font-semibold text-z-secondary", children: "Provider API Keys" }), _jsx("span", { className: "ml-auto text-sm text-gray-600", children: "All keys encrypted at rest" })] }), PROVIDERS.map(provider => {
+                        const isExpanded = expandedProvider === provider.id;
+                        const keyValue = settings[provider.keyField] || '';
+                        const hasKey = keyValue.trim() && keyValue !== '[MASKED_CREDENTIAL]';
+                        const isMasked = keyValue === '[MASKED_CREDENTIAL]';
+                        return (_jsxs("div", { className: cn('border transition-all shadow-sm', isExpanded
+                                ? (dark ? 'border-white/15 bg-black/80 backdrop-blur-md shadow-sm' : 'border-z-border-strong bg-white')
+                                : ('z-card-interactive')), children: [_jsxs("button", { onClick: () => setExpandedProvider(isExpanded ? '' : provider.id), className: "w-full flex items-center gap-3 px-4 py-3 text-left", children: [_jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [_jsx("div", { className: cn('w-2 h-2 rounded-full flex-shrink-0', hasKey || isMasked ? 'bg-z-accent shadow-sm' : 'bg-gray-700') }), _jsx("div", { className: cn('text-sm font-semibold', provider.color), children: provider.name }), provider.badge && (_jsx("span", { className: "text-sm font-semibold px-1.5 py-0.5 bg-z-active-bg border border-z-active-border text-z-active-text", children: provider.badge })), _jsx("span", { className: "text-sm text-gray-600 truncate hidden sm:block", children: provider.description })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [isMasked && _jsx("span", { className: "text-sm text-z-active-text font-semibold", children: "Configured" }), hasKey && !isMasked && _jsx("span", { className: "text-sm text-z-active-text font-semibold", children: "Active" }), _jsx(ChevronRight, { size: 12, className: cn('text-z-secondary transition-transform', isExpanded && 'rotate-90') })] })] }), isExpanded && (_jsxs("div", { className: "px-4 pb-4 space-y-3 border-t", style: { borderColor: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)' }, children: [_jsx("p", { className: "text-sm text-z-secondary pt-3", children: provider.description }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-sm font-semibold text-z-secondary", children: "API Key" }), _jsxs("a", { href: provider.docsUrl, target: "_blank", rel: "noopener noreferrer", className: "text-sm text-z-active-text hover:text-z-active-text flex items-center gap-1 transition-colors", children: ["Get Key ", _jsx(ExternalLink, { size: 9 })] })] }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: showKeys[provider.id] ? 'text' : 'password', value: keyValue, onChange: e => setSettings({ ...settings, [provider.keyField]: e.target.value }), placeholder: isMasked ? '••••••••••••••••' : provider.keyPlaceholder, className: cn(inp(dark), 'pr-10 font-mono') }), _jsx("button", { type: "button", onClick: () => toggleKey(provider.id), className: "absolute right-3 top-1/2 -translate-y-1/2 text-z-secondary hover:text-white transition-colors", children: showKeys[provider.id] ? _jsx(EyeOff, { size: 13 }) : _jsx(Eye, { size: 13 }) })] }), isMasked && (_jsxs("p", { className: "text-sm text-amber-500/70 flex items-center gap-1", children: [_jsx(Lock, { size: 9 }), " Key is stored \u2014 enter a new value to replace it"] }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("label", { className: "text-sm font-semibold text-z-secondary", children: ["Available Models ", dynamicModels[provider.id] ? `(${dynamicModels[provider.id].length})` : ''] }), _jsxs("button", { type: "button", onClick: () => handleFetchModels(provider.id, provider.keyField), disabled: fetchingModels === provider.id || (!hasKey && !isMasked), className: "text-sm text-z-active-text hover:text-z-active-text flex items-center gap-1 disabled:opacity-50 transition-colors", children: [fetchingModels === provider.id ? _jsx(Loader2, { size: 9, className: "animate-spin" }) : _jsx(Zap, { size: 9 }), "Fetch Models"] })] }), _jsx("div", { className: "flex flex-wrap gap-1.5 max-h-[120px] overflow-y-auto pr-2 custom-scrollbar", children: (dynamicModels[provider.id] || provider.models).map(m => (_jsx("span", { title: m.value, className: cn('text-sm font-semibold   px-2 py-1 border', m.tier ? TIER_BADGE[m.tier] : 'bg-z-hover border-white/10 text-z-muted'), children: m.label }, m.value))) })] })] }))] }, provider.id));
+                    })] }), _jsxs("div", { className: cn('flex gap-3 p-4 border', dark ? 'bg-z-accent/5 border-z-accent/15' : 'bg-z-active-bg border-z-active-border'), children: [_jsx(Info, { size: 12, className: "text-z-active-text flex-shrink-0 mt-0.5" }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-semibold text-z-active-text", children: "Provider Priority" }), _jsx("p", { className: "text-sm text-z-secondary leading-relaxed", children: "The AI engine auto-selects providers in this order: OpenRouter \u2192 xAI \u2192 NVIDIA NIM \u2192 Groq \u2192 Together AI \u2192 Mistral \u2192 Cohere \u2192 OpenAI \u2192 Anthropic \u2192 Google Gemini. Set the \"Active Model\" above to override. Keys are never sent to the client." })] })] })] }));
+};
+export default SettingsAi;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './plugin';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './plugin';

package/dist/plugin-ai-architect-ui/src/AIWriterPage.js

@@ -1,55 +1,60 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-import { Sparkles, Send, Loader2, Copy, Zap, Terminal, Cpu, PenTool, ShieldCheck, Search, Image as ImageIcon, CheckCircle2, AlertCircle, ChevronRight, RotateCcw, Save, Download, Code2, Wand2, Hash } from 'lucide-react';
-import api from '../../admin/src/lib/api';
-import { motion, AnimatePresence } from 'framer-motion';
-import { cn } from '../../admin/src/lib/utils';
-import toast from 'react-hot-toast';
-import { useTheme } from '../../admin/src/context/ThemeContext';
-import { PageHeader } from '../../admin/src/components/ui/PageHeader';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const api_1 = __importDefault(require("../../admin/src/lib/api"));
+const framer_motion_1 = require("framer-motion");
+const utils_1 = require("../../admin/src/lib/utils");
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const ThemeContext_1 = require("../../admin/src/context/ThemeContext");
+const PageHeader_1 = require("../../admin/src/components/ui/PageHeader");
 // ── Tool Definitions ───────────────────────────────────────────────────────────
 const TOOLS = [
-    { id: 'seo', name: 'SEO Analysis', icon: Search, endpoint: '/content-tools/seo-analysis', desc: 'Score title, meta, content', color: 'text-amber-400' },
-    { id: 'quality', name: 'Quality Audit', icon: ShieldCheck, endpoint: '/content-tools/quality', desc: 'Readability + word structure', color: 'text-z-active-text' },
-    { id: 'improve', name: 'Refine Text', icon: Wand2, endpoint: '/content-tools/ai/improve', desc: 'AI-powered rewrite', color: 'text-purple-400' },
-    { id: 'meta', name: 'Meta Generator', icon: Hash, endpoint: '/content-tools/ai/meta-description', desc: 'Auto SEO meta description', color: 'text-z-active-text' },
-    { id: 'alt', name: 'Alt Text', icon: ImageIcon, endpoint: '/content-tools/ai/alt-text', desc: 'Generate image alt text', color: 'text-pink-400' },
+    { id: 'seo', name: 'SEO Analysis', icon: lucide_react_1.Search, endpoint: '/content-tools/seo-analysis', desc: 'Score title, meta, content', color: 'text-amber-400' },
+    { id: 'quality', name: 'Quality Audit', icon: lucide_react_1.ShieldCheck, endpoint: '/content-tools/quality', desc: 'Readability + word structure', color: 'text-z-active-text' },
+    { id: 'improve', name: 'Refine Text', icon: lucide_react_1.Wand2, endpoint: '/content-tools/ai/improve', desc: 'AI-powered rewrite', color: 'text-purple-400' },
+    { id: 'meta', name: 'Meta Generator', icon: lucide_react_1.Hash, endpoint: '/content-tools/ai/meta-description', desc: 'Auto SEO meta description', color: 'text-z-active-text' },
+    { id: 'alt', name: 'Alt Text', icon: lucide_react_1.Image, endpoint: '/content-tools/ai/alt-text', desc: 'Generate image alt text', color: 'text-pink-400' },
 ];
 const MODES = [
-    { id: 'writer', label: 'Writer', icon: PenTool, desc: 'Generate content from a prompt' },
-    { id: 'architect', label: 'Architect', icon: Cpu, desc: 'Design a collection schema with AI' },
-    { id: 'tools', label: 'Tools', icon: Zap, desc: 'SEO, quality, meta & more' },
+    { id: 'writer', label: 'Writer', icon: lucide_react_1.PenTool, desc: 'Generate content from a prompt' },
+    { id: 'architect', label: 'Architect', icon: lucide_react_1.Cpu, desc: 'Design a collection schema with AI' },
+    { id: 'tools', label: 'Tools', icon: lucide_react_1.Zap, desc: 'SEO, quality, meta & more' },
 ];
 // ── Result Renderers ──────────────────────────────────────────────────────────
 function SeoResultView({ data }) {
-    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex items-end gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary mb-1", children: "SEO Score" }), _jsx("span", { className: cn('text-5xl font-black tabular-nums', data.score >= 70 ? 'text-z-active-text' : data.score >= 45 ? 'text-amber-400' : 'text-red-400'), children: data.score }), _jsx("span", { className: "text-lg text-z-secondary font-black", children: "/100" })] }), _jsx("div", { className: "flex-1 h-2 bg-z-hover rounded-full overflow-hidden mb-3", children: _jsx("div", { className: cn('h-full transition-all duration-700', data.score >= 70 ? 'bg-z-accent' : data.score >= 45 ? 'bg-amber-500' : 'bg-red-500'), style: { width: `${data.score}%` } }) })] }), data.passed?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-active-text/70", children: "Passing" }), data.passed.map((p, i) => (_jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(CheckCircle2, { size: 11, className: "text-z-active-text flex-shrink-0" }), p] }, i)))] })), data.issues?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-red-500/70", children: "Issues" }), data.issues.map((p, i) => (_jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(AlertCircle, { size: 11, className: "text-red-500 flex-shrink-0" }), p] }, i)))] })), data.suggestions?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-amber-500/70", children: "Suggestions" }), data.suggestions.map((p, i) => (_jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(ChevronRight, { size: 11, className: "text-amber-500 flex-shrink-0" }), p] }, i)))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-end gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary mb-1", children: "SEO Score" }), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-5xl font-black tabular-nums', data.score >= 70 ? 'text-z-active-text' : data.score >= 45 ? 'text-amber-400' : 'text-red-400'), children: data.score }), (0, jsx_runtime_1.jsx)("span", { className: "text-lg text-z-secondary font-black", children: "/100" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 h-2 bg-z-hover rounded-full overflow-hidden mb-3", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('h-full transition-all duration-700', data.score >= 70 ? 'bg-z-accent' : data.score >= 45 ? 'bg-amber-500' : 'bg-red-500'), style: { width: `${data.score}%` } }) })] }), data.passed?.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-active-text/70", children: "Passing" }), data.passed.map((p, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 11, className: "text-z-active-text flex-shrink-0" }), p] }, i)))] })), data.issues?.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-red-500/70", children: "Issues" }), data.issues.map((p, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { size: 11, className: "text-red-500 flex-shrink-0" }), p] }, i)))] })), data.suggestions?.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-amber-500/70", children: "Suggestions" }), data.suggestions.map((p, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 11, className: "text-amber-500 flex-shrink-0" }), p] }, i)))] }))] }));
 }
 function QualityResultView({ data }) {
     const gradeColor = { A: 'text-z-active-text', B: 'text-z-active-text', C: 'text-amber-400', D: 'text-orange-400', F: 'text-red-400' };
-    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex items-start gap-6", children: [_jsxs("div", { children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary mb-1", children: "Grade" }), _jsx("span", { className: cn('text-6xl font-black', gradeColor[data.grade] || 'text-white'), children: data.grade })] }), _jsx("div", { className: "grid grid-cols-3 gap-3 flex-1 pt-1", children: [
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary mb-1", children: "Grade" }), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-6xl font-black', gradeColor[data.grade] || 'text-white'), children: data.grade })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-3 flex-1 pt-1", children: [
                             { label: 'Words', val: data.wordCount },
                             { label: 'Sentences', val: data.sentenceCount },
                             { label: 'Avg Words/Sent', val: data.avgWordsPerSentence },
-                        ].map(m => (_jsxs("div", { className: "bg-z-hover border border-z-border p-3", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-widest text-z-secondary mb-1", children: m.label }), _jsx("p", { className: "text-lg font-black text-white tabular-nums", children: m.val })] }, m.label))) })] }), data.issues?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-red-500/70", children: "Issues" }), data.issues.map((p, i) => _jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(AlertCircle, { size: 11, className: "text-red-500 flex-shrink-0" }), p] }, i))] })), data.suggestions?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-active-text/70", children: "Suggestions" }), data.suggestions.map((p, i) => _jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(CheckCircle2, { size: 11, className: "text-z-active-text flex-shrink-0" }), p] }, i))] }))] }));
+                        ].map(m => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-z-hover border border-z-border p-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-[8px] font-black uppercase tracking-widest text-z-secondary mb-1", children: m.label }), (0, jsx_runtime_1.jsx)("p", { className: "text-lg font-black text-white tabular-nums", children: m.val })] }, m.label))) })] }), data.issues?.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-red-500/70", children: "Issues" }), data.issues.map((p, i) => (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { size: 11, className: "text-red-500 flex-shrink-0" }), p] }, i))] })), data.suggestions?.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-active-text/70", children: "Suggestions" }), data.suggestions.map((p, i) => (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 11, className: "text-z-active-text flex-shrink-0" }), p] }, i))] }))] }));
 }
 function SchemaResultView({ data }) {
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3 flex-wrap", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-black text-white tracking-tight", children: data.name }), _jsxs("p", { className: "text-[9px] text-z-secondary font-mono mt-0.5", children: ["/", data.slug] })] }), _jsxs("div", { className: "flex gap-2", children: [data.drafts && _jsx("span", { className: "px-2 py-0.5 text-[7px] font-black uppercase tracking-widest bg-z-accent/10 border border-z-accent/20 text-z-active-text", children: "Drafts" }), data.timestamps && _jsx("span", { className: "px-2 py-0.5 text-[7px] font-black uppercase tracking-widest bg-gray-500/10 border border-gray-500/20 text-z-muted", children: "Timestamps" })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: [data.fields?.length || 0, " Fields"] }), data.fields?.map((f, i) => (_jsxs("div", { className: "flex items-center justify-between px-3 py-2 bg-z-hover border border-z-border hover:border-z-border-strong transition-colors group", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-[9px] font-mono text-z-active-text", children: f.name }), f.required && _jsx("span", { className: "text-[6px] font-black text-red-500 uppercase tracking-wider", children: "required" })] }), _jsx("span", { className: "text-[8px] text-gray-600 uppercase tracking-widest font-black", children: f.type })] }, i)))] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-3 flex-wrap", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-black text-white tracking-tight", children: data.name }), (0, jsx_runtime_1.jsxs)("p", { className: "text-[9px] text-z-secondary font-mono mt-0.5", children: ["/", data.slug] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [data.drafts && (0, jsx_runtime_1.jsx)("span", { className: "px-2 py-0.5 text-[7px] font-black uppercase tracking-widest bg-z-accent/10 border border-z-accent/20 text-z-active-text", children: "Drafts" }), data.timestamps && (0, jsx_runtime_1.jsx)("span", { className: "px-2 py-0.5 text-[7px] font-black uppercase tracking-widest bg-gray-500/10 border border-gray-500/20 text-z-muted", children: "Timestamps" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: [data.fields?.length || 0, " Fields"] }), data.fields?.map((f, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 bg-z-hover border border-z-border hover:border-z-border-strong transition-colors group", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[9px] font-mono text-z-active-text", children: f.name }), f.required && (0, jsx_runtime_1.jsx)("span", { className: "text-[6px] font-black text-red-500 uppercase tracking-wider", children: "required" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-[8px] text-gray-600 uppercase tracking-widest font-black", children: f.type })] }, i)))] })] }));
 }
 // ── Main Component ─────────────────────────────────────────────────────────────
 const AIWriterPage = () => {
-    const { theme } = useTheme();
+    const { theme } = (0, ThemeContext_1.useTheme)();
     const dark = theme === 'dark';
-    const [mode, setMode] = useState('writer');
-    const [prompt, setPrompt] = useState('');
-    const [loading, setLoading] = useState(false);
-    const [result, setResult] = useState(null);
-    const [activeTool, setActiveTool] = useState('seo');
-    const [history, setHistory] = useState([]);
-    const [schemaForSave, setSchemaForSave] = useState(null);
-    const [savingSchema, setSavingSchema] = useState(false);
-    const textareaRef = useRef(null);
+    const [mode, setMode] = (0, react_1.useState)('writer');
+    const [prompt, setPrompt] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [result, setResult] = (0, react_1.useState)(null);
+    const [activeTool, setActiveTool] = (0, react_1.useState)('seo');
+    const [history, setHistory] = (0, react_1.useState)([]);
+    const [schemaForSave, setSchemaForSave] = (0, react_1.useState)(null);
+    const [savingSchema, setSavingSchema] = (0, react_1.useState)(false);
+    const textareaRef = (0, react_1.useRef)(null);
     // Auto-resize textarea
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (textareaRef.current) {
             textareaRef.current.style.height = 'auto';
             textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 300)}px`;
@@ -65,12 +70,12 @@ const AIWriterPage = () => {
             let res;
             let resultData;
             if (mode === 'architect') {
-                res = await api.post('/system/ai-architect', { prompt });
+                res = await api_1.default.post('/system/ai-architect', { prompt });
                 resultData = res.data.data.schema;
                 setSchemaForSave(resultData);
             }
             else if (mode === 'writer') {
-                res = await api.post('/content-tools/ai/generate', { prompt });
+                res = await api_1.default.post('/content-tools/ai/generate', { prompt });
                 resultData = res.data.data.text;
             }
             else {
@@ -88,7 +93,7 @@ const AIWriterPage = () => {
                 else if (activeTool === 'alt') {
                     payload = { imageUrl: prompt };
                 }
-                res = await api.post(tool.endpoint, payload);
+                res = await api_1.default.post(tool.endpoint, payload);
                 const d = res.data.data;
                 if (activeTool === 'seo')
                     resultData = d;
@@ -109,11 +114,11 @@ const AIWriterPage = () => {
                     result: resultData,
                     timestamp: new Date()
                 }, ...prev.slice(0, 19)]);
-            toast.success('Generated');
+            react_hot_toast_1.default.success('Generated');
         }
         catch (err) {
             const msg = err?.response?.data?.error?.message || err?.response?.data?.message || 'AI request failed';
-            toast.error(msg);
+            react_hot_toast_1.default.error(msg);
         }
         finally {
             setLoading(false);
@@ -128,12 +133,12 @@ const AIWriterPage = () => {
             return;
         setSavingSchema(true);
         try {
-            await api.post('/schemas', schemaForSave);
-            toast.success(`Collection "${schemaForSave.name}" created!`);
+            await api_1.default.post('/schemas', schemaForSave);
+            react_hot_toast_1.default.success(`Collection "${schemaForSave.name}" created!`);
             setSchemaForSave(null);
         }
         catch (err) {
-            toast.error(err?.response?.data?.error?.message || 'Failed to save schema');
+            react_hot_toast_1.default.error(err?.response?.data?.error?.message || 'Failed to save schema');
         }
         finally {
             setSavingSchema(false);
@@ -142,7 +147,7 @@ const AIWriterPage = () => {
     const copyResult = () => {
         const text = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
         navigator.clipboard.writeText(text);
-        toast.success('Copied to clipboard');
+        react_hot_toast_1.default.success('Copied to clipboard');
     };
     const downloadResult = () => {
         const text = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
@@ -159,12 +164,12 @@ const AIWriterPage = () => {
         if (!result)
             return null;
         if (mode === 'architect')
-            return _jsx(SchemaResultView, { data: result });
+            return (0, jsx_runtime_1.jsx)(SchemaResultView, { data: result });
         if (mode === 'tools' && activeTool === 'seo')
-            return _jsx(SeoResultView, { data: result });
+            return (0, jsx_runtime_1.jsx)(SeoResultView, { data: result });
         if (mode === 'tools' && activeTool === 'quality')
-            return _jsx(QualityResultView, { data: result });
-        return (_jsx(motion.div, { initial: { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, className: "whitespace-pre-wrap text-[12px] leading-relaxed text-gray-300 font-sans", children: typeof result === 'string' ? result : JSON.stringify(result, null, 2) }));
+            return (0, jsx_runtime_1.jsx)(QualityResultView, { data: result });
+        return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, className: "whitespace-pre-wrap text-[12px] leading-relaxed text-gray-300 font-sans", children: typeof result === 'string' ? result : JSON.stringify(result, null, 2) }));
     };
     const activePlaceholder = mode === 'architect'
         ? 'Describe a collection schema... e.g., "An e-commerce product with variants, pricing, and inventory tracking"'
@@ -175,18 +180,18 @@ const AIWriterPage = () => {
                 : activeTool === 'meta'
                     ? 'Paste your content to generate a meta description...'
                     : 'Paste text to analyze...';
-    return (_jsxs("div", { className: "flex flex-col h-[calc(100vh-64px)] overflow-hidden", children: [_jsx(PageHeader, { title: "AI Architect", description: "Generate content, design schemas, and analyze text quality", actions: _jsx("div", { className: cn('flex p-0.5 border', dark ? 'bg-black border-z-border' : 'bg-z-panel border-z-border'), children: MODES.map(m => (_jsxs("button", { onClick: () => { setMode(m.id); setResult(null); setSchemaForSave(null); }, title: m.desc, className: cn('flex items-center gap-2 px-4 py-2 text-[9px] font-black uppercase tracking-widest transition-all', mode === m.id
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-[calc(100vh-64px)] overflow-hidden", children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, { title: "AI Architect", description: "Generate content, design schemas, and analyze text quality", actions: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('flex p-0.5 border', dark ? 'bg-black border-z-border' : 'bg-z-panel border-z-border'), children: MODES.map(m => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => { setMode(m.id); setResult(null); setSchemaForSave(null); }, title: m.desc, className: (0, utils_1.cn)('flex items-center gap-2 px-4 py-2 text-[9px] font-black uppercase tracking-widest transition-all', mode === m.id
                             ? (dark ? 'bg-white text-black' : 'bg-gray-900 text-white')
-                            : (dark ? 'text-z-secondary hover:text-white' : 'text-z-secondary hover:text-z-primary')), children: [_jsx(m.icon, { size: 11 }), _jsx("span", { className: "hidden sm:inline", children: m.label })] }, m.id))) }) }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsxs("div", { className: cn('w-56 flex-shrink-0 border-r flex flex-col hidden lg:flex', dark ? 'border-z-border bg-black' : 'border-z-border bg-gray-50'), children: [_jsx("div", { className: cn('px-4 py-3 border-b flex-shrink-0', dark ? 'border-z-border' : 'border-z-border'), children: _jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: "History" }) }), _jsxs("div", { className: "flex-1 overflow-y-auto p-2 space-y-1", children: [history.length === 0 && (_jsx("p", { className: "text-[8px] text-gray-600 uppercase tracking-widest p-2 text-center mt-4", children: "No history yet" })), history.map(h => (_jsxs("button", { onClick: () => { setResult(h.result); setSchemaForSave(h.mode === 'architect' ? h.result : null); }, className: cn('w-full text-left p-2.5 border border-transparent transition-all', dark ? 'hover:bg-z-hover hover:border-z-border' : 'hover:bg-white hover:border-z-border'), children: [_jsx("div", { className: "flex items-center gap-1.5 mb-1", children: _jsx("span", { className: cn('text-[7px] font-black uppercase tracking-widest', h.mode === 'architect' ? 'text-purple-400' : h.mode === 'tools' ? 'text-amber-400' : 'text-z-active-text'), children: h.mode }) }), _jsx("p", { className: "text-[9px] text-z-secondary truncate", children: h.prompt })] }, h.id)))] })] }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0 border-r", style: { borderColor: dark ? 'rgba(255,255,255,0.08)' : '#e5e7eb' }, children: [_jsx(AnimatePresence, { children: mode === 'tools' && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, className: cn('flex-shrink-0 border-b overflow-hidden', dark ? 'border-z-border' : 'border-z-border'), children: _jsx("div", { className: "p-3 flex gap-2 flex-wrap", children: TOOLS.map(tool => (_jsxs("button", { onClick: () => { setActiveTool(tool.id); setResult(null); }, title: tool.desc, className: cn('flex items-center gap-2 px-3 py-2 text-[9px] font-black uppercase tracking-widest border transition-all', activeTool === tool.id
+                            : (dark ? 'text-z-secondary hover:text-white' : 'text-z-secondary hover:text-z-primary')), children: [(0, jsx_runtime_1.jsx)(m.icon, { size: 11 }), (0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline", children: m.label })] }, m.id))) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 overflow-hidden", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('w-56 flex-shrink-0 border-r flex flex-col hidden lg:flex', dark ? 'border-z-border bg-black' : 'border-z-border bg-gray-50'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('px-4 py-3 border-b flex-shrink-0', dark ? 'border-z-border' : 'border-z-border'), children: (0, jsx_runtime_1.jsx)("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: "History" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-y-auto p-2 space-y-1", children: [history.length === 0 && ((0, jsx_runtime_1.jsx)("p", { className: "text-[8px] text-gray-600 uppercase tracking-widest p-2 text-center mt-4", children: "No history yet" })), history.map(h => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => { setResult(h.result); setSchemaForSave(h.mode === 'architect' ? h.result : null); }, className: (0, utils_1.cn)('w-full text-left p-2.5 border border-transparent transition-all', dark ? 'hover:bg-z-hover hover:border-z-border' : 'hover:bg-white hover:border-z-border'), children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1.5 mb-1", children: (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-[7px] font-black uppercase tracking-widest', h.mode === 'architect' ? 'text-purple-400' : h.mode === 'tools' ? 'text-amber-400' : 'text-z-active-text'), children: h.mode }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-[9px] text-z-secondary truncate", children: h.prompt })] }, h.id)))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col min-w-0 border-r", style: { borderColor: dark ? 'rgba(255,255,255,0.08)' : '#e5e7eb' }, children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: mode === 'tools' && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, className: (0, utils_1.cn)('flex-shrink-0 border-b overflow-hidden', dark ? 'border-z-border' : 'border-z-border'), children: (0, jsx_runtime_1.jsx)("div", { className: "p-3 flex gap-2 flex-wrap", children: TOOLS.map(tool => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => { setActiveTool(tool.id); setResult(null); }, title: tool.desc, className: (0, utils_1.cn)('flex items-center gap-2 px-3 py-2 text-[9px] font-black uppercase tracking-widest border transition-all', activeTool === tool.id
                                                 ? (dark ? 'bg-white text-black border-white' : 'bg-gray-900 text-white border-gray-900')
-                                                : (dark ? 'border-z-border text-z-secondary hover:text-white hover:border-white/20' : 'border-z-border text-z-secondary hover:border-gray-400 hover:text-z-primary')), children: [_jsx(tool.icon, { size: 11, className: activeTool === tool.id ? '' : tool.color }), tool.name] }, tool.id))) }) })) }), _jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [_jsxs("div", { className: cn('flex-shrink-0 flex items-center gap-3 px-5 py-3 border-b', dark ? 'border-z-border' : 'border-z-border'), children: [_jsx(Terminal, { size: 12, className: "text-z-secondary" }), _jsx("span", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: mode === 'architect' ? 'Schema Prompt' : mode === 'writer' ? 'Content Prompt' : TOOLS.find(t => t.id === activeTool)?.name }), _jsx("span", { className: "ml-auto text-[8px] text-gray-600 uppercase tracking-widest hidden sm:block", children: "\u2318 + Enter to run" })] }), _jsx("textarea", { ref: textareaRef, value: prompt, onChange: e => setPrompt(e.target.value), onKeyDown: handleKeyDown, placeholder: activePlaceholder, className: cn('flex-1 w-full p-5 text-sm outline-none resize-none font-sans leading-relaxed', dark
+                                                : (dark ? 'border-z-border text-z-secondary hover:text-white hover:border-white/20' : 'border-z-border text-z-secondary hover:border-gray-400 hover:text-z-primary')), children: [(0, jsx_runtime_1.jsx)(tool.icon, { size: 11, className: activeTool === tool.id ? '' : tool.color }), tool.name] }, tool.id))) }) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col overflow-hidden", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex-shrink-0 flex items-center gap-3 px-5 py-3 border-b', dark ? 'border-z-border' : 'border-z-border'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Terminal, { size: 12, className: "text-z-secondary" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: mode === 'architect' ? 'Schema Prompt' : mode === 'writer' ? 'Content Prompt' : TOOLS.find(t => t.id === activeTool)?.name }), (0, jsx_runtime_1.jsx)("span", { className: "ml-auto text-[8px] text-gray-600 uppercase tracking-widest hidden sm:block", children: "\u2318 + Enter to run" })] }), (0, jsx_runtime_1.jsx)("textarea", { ref: textareaRef, value: prompt, onChange: e => setPrompt(e.target.value), onKeyDown: handleKeyDown, placeholder: activePlaceholder, className: (0, utils_1.cn)('flex-1 w-full p-5 text-sm outline-none resize-none font-sans leading-relaxed', dark
                                             ? 'bg-transparent text-white placeholder:text-gray-700'
-                                            : 'bg-transparent text-z-primary placeholder:text-z-muted') }), _jsx("div", { className: cn('flex-shrink-0 p-4 border-t', dark ? 'border-z-border' : 'border-z-border'), children: _jsxs("div", { className: "flex items-center gap-3", children: [prompt.trim() && (_jsx("button", { onClick: () => { setPrompt(''); setResult(null); }, className: "p-2.5 text-gray-600 hover:text-white transition-colors border border-transparent hover:border-white/10", title: "Clear", children: _jsx(RotateCcw, { size: 14 }) })), _jsx("button", { onClick: handleExecute, disabled: loading || (!prompt.trim() && activeTool !== 'alt'), className: cn('flex-1 py-3 font-black uppercase tracking-widest text-[10px] transition-all flex items-center justify-center gap-2.5', 'bg-z-accent hover:opacity-90 text-white', 'disabled:opacity-40 disabled:cursor-not-allowed', 'shadow-sm hover:shadow-sm'), children: loading
-                                                        ? _jsxs(_Fragment, { children: [_jsx(Loader2, { size: 13, className: "animate-spin" }), " Generating\u2026"] })
-                                                        : _jsxs(_Fragment, { children: [_jsx(Send, { size: 13 }), " ", mode === 'architect' ? 'Design Schema' : mode === 'writer' ? 'Generate Content' : 'Analyze'] }) })] }) })] })] }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsxs("div", { className: cn('flex-shrink-0 flex items-center justify-between px-5 py-3 border-b', dark ? 'border-z-border' : 'border-z-border'), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx(Sparkles, { size: 12, className: result ? 'text-z-active-text' : 'text-z-secondary' }), _jsx("span", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: "Output" }), result && _jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-z-accent shadow-sm" })] }), result && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: copyResult, title: "Copy", className: "p-2 text-z-secondary hover:text-white transition-colors border border-transparent hover:border-white/10", children: _jsx(Copy, { size: 13 }) }), _jsx("button", { onClick: downloadResult, title: "Download", className: "p-2 text-z-secondary hover:text-white transition-colors border border-transparent hover:border-white/10", children: _jsx(Download, { size: 13 }) }), mode === 'architect' && (_jsx("button", { onClick: () => { setResult(null); setSchemaForSave(null); }, title: "Clear", className: "p-2 text-z-secondary hover:text-white transition-colors border border-transparent hover:border-white/10", children: _jsx(RotateCcw, { size: 13 }) }))] }))] }), _jsx("div", { className: "flex-1 overflow-auto p-6", children: loading ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-4", children: [_jsxs("div", { className: "relative", children: [_jsx(Loader2, { size: 32, className: "animate-spin text-z-active-text" }), _jsx("div", { className: "absolute inset-0 blur-xl bg-z-accent/20 animate-pulse" })] }), _jsx("p", { className: "text-[9px] font-black uppercase tracking-[0.4em] text-z-secondary animate-pulse", children: mode === 'architect' ? 'Designing Schema…' : mode === 'writer' ? 'Writing Content…' : 'Analyzing…' })] })) : !result ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-5 opacity-30", children: [_jsx(Cpu, { size: 40, className: "text-z-secondary" }), _jsxs("div", { className: "text-center space-y-1", children: [_jsx("p", { className: "text-[9px] font-black uppercase tracking-[0.4em] text-z-secondary", children: "Awaiting Input" }), _jsx("p", { className: "text-[8px] text-gray-600 uppercase tracking-widest", children: mode === 'architect' ? 'Describe a collection to generate a schema' : mode === 'writer' ? 'Write a prompt to generate content' : 'Paste content to analyze' })] })] })) : (_jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.2 }, children: renderResult() }, JSON.stringify(result).substring(0, 50)) })) }), _jsx(AnimatePresence, { children: result && mode === 'architect' && schemaForSave && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, className: cn('flex-shrink-0 border-t overflow-hidden', dark ? 'border-z-border' : 'border-z-border'), children: _jsxs("div", { className: "px-5 py-3 flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-[8px] text-z-secondary uppercase tracking-widest", children: "Schema looks good? Save it as a live collection." }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { onClick: () => {
+                                            : 'bg-transparent text-z-primary placeholder:text-z-muted') }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('flex-shrink-0 p-4 border-t', dark ? 'border-z-border' : 'border-z-border'), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [prompt.trim() && ((0, jsx_runtime_1.jsx)("button", { onClick: () => { setPrompt(''); setResult(null); }, className: "p-2.5 text-gray-600 hover:text-white transition-colors border border-transparent hover:border-white/10", title: "Clear", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { size: 14 }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleExecute, disabled: loading || (!prompt.trim() && activeTool !== 'alt'), className: (0, utils_1.cn)('flex-1 py-3 font-black uppercase tracking-widest text-[10px] transition-all flex items-center justify-center gap-2.5', 'bg-z-accent hover:opacity-90 text-white', 'disabled:opacity-40 disabled:cursor-not-allowed', 'shadow-sm hover:shadow-sm'), children: loading
+                                                        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { size: 13, className: "animate-spin" }), " Generating\u2026"] })
+                                                        : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Send, { size: 13 }), " ", mode === 'architect' ? 'Design Schema' : mode === 'writer' ? 'Generate Content' : 'Analyze'] }) })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex-shrink-0 flex items-center justify-between px-5 py-3 border-b', dark ? 'border-z-border' : 'border-z-border'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 12, className: result ? 'text-z-active-text' : 'text-z-secondary' }), (0, jsx_runtime_1.jsx)("span", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: "Output" }), result && (0, jsx_runtime_1.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-z-accent shadow-sm" })] }), result && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("button", { onClick: copyResult, title: "Copy", className: "p-2 text-z-secondary hover:text-white transition-colors border border-transparent hover:border-white/10", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 13 }) }), (0, jsx_runtime_1.jsx)("button", { onClick: downloadResult, title: "Download", className: "p-2 text-z-secondary hover:text-white transition-colors border border-transparent hover:border-white/10", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 13 }) }), mode === 'architect' && ((0, jsx_runtime_1.jsx)("button", { onClick: () => { setResult(null); setSchemaForSave(null); }, title: "Clear", className: "p-2 text-z-secondary hover:text-white transition-colors border border-transparent hover:border-white/10", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { size: 13 }) }))] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-auto p-6", children: loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col items-center justify-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { size: 32, className: "animate-spin text-z-active-text" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 blur-xl bg-z-accent/20 animate-pulse" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-[9px] font-black uppercase tracking-[0.4em] text-z-secondary animate-pulse", children: mode === 'architect' ? 'Designing Schema…' : mode === 'writer' ? 'Writing Content…' : 'Analyzing…' })] })) : !result ? ((0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col items-center justify-center gap-5 opacity-30", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Cpu, { size: 40, className: "text-z-secondary" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center space-y-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-[9px] font-black uppercase tracking-[0.4em] text-z-secondary", children: "Awaiting Input" }), (0, jsx_runtime_1.jsx)("p", { className: "text-[8px] text-gray-600 uppercase tracking-widest", children: mode === 'architect' ? 'Describe a collection to generate a schema' : mode === 'writer' ? 'Write a prompt to generate content' : 'Paste content to analyze' })] })] })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.2 }, children: renderResult() }, JSON.stringify(result).substring(0, 50)) })) }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: result && mode === 'architect' && schemaForSave && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, className: (0, utils_1.cn)('flex-shrink-0 border-t overflow-hidden', dark ? 'border-z-border' : 'border-z-border'), children: (0, jsx_runtime_1.jsxs)("div", { className: "px-5 py-3 flex items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-[8px] text-z-secondary uppercase tracking-widest", children: "Schema looks good? Save it as a live collection." }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => {
                                                             const text = JSON.stringify(schemaForSave, null, 2);
                                                             navigator.clipboard.writeText(text);
-                                                            toast.success('Schema copied as JSON');
-                                                        }, className: cn('px-4 py-2 border text-[9px] font-black uppercase tracking-widest flex items-center gap-2 transition-all', dark ? 'border-z-border text-z-muted hover:text-white hover:border-white/20' : 'border-z-border text-z-secondary hover:border-gray-400'), children: [_jsx(Code2, { size: 11 }), " Copy JSON"] }), _jsxs("button", { onClick: saveSchemaToDb, disabled: savingSchema, className: "px-5 py-2 bg-z-accent hover:opacity-90 text-white text-[9px] font-black uppercase tracking-widest flex items-center gap-2 transition-all disabled:opacity-50 shadow-sm", children: [savingSchema ? _jsx(Loader2, { size: 11, className: "animate-spin" }) : _jsx(Save, { size: 11 }), "Save Collection"] })] })] }) })) })] })] })] }));
+                                                            react_hot_toast_1.default.success('Schema copied as JSON');
+                                                        }, className: (0, utils_1.cn)('px-4 py-2 border text-[9px] font-black uppercase tracking-widest flex items-center gap-2 transition-all', dark ? 'border-z-border text-z-muted hover:text-white hover:border-white/20' : 'border-z-border text-z-secondary hover:border-gray-400'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Code2, { size: 11 }), " Copy JSON"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: saveSchemaToDb, disabled: savingSchema, className: "px-5 py-2 bg-z-accent hover:opacity-90 text-white text-[9px] font-black uppercase tracking-widest flex items-center gap-2 transition-all disabled:opacity-50 shadow-sm", children: [savingSchema ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { size: 11, className: "animate-spin" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Save, { size: 11 }), "Save Collection"] })] })] }) })) })] })] })] }));
 };
-export default AIWriterPage;
+exports.default = AIWriterPage;

package/dist/plugin-ai-architect-ui/src/SettingsAi.js

@@ -1,9 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Lock, Loader2, CheckCircle2, AlertCircle, ExternalLink, Eye, EyeOff, Cpu, Zap, ChevronRight, Info, TestTube2 } from 'lucide-react';
-import { cn } from '../../admin/src/lib/utils';
-import api from '../../admin/src/lib/api';
-import toast from 'react-hot-toast';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../admin/src/lib/utils");
+const api_1 = __importDefault(require("../../admin/src/lib/api"));
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
 const PROVIDERS = [
     {
         id: 'openrouter',
@@ -173,12 +178,12 @@ const TIER_BADGE = {
 };
 const SettingsAi = ({ settings, setSettings, theme }) => {
     const dark = theme === 'dark';
-    const [validating, setValidating] = useState(false);
-    const [testResult, setTestResult] = useState(null);
-    const [showKeys, setShowKeys] = useState({});
-    const [expandedProvider, setExpandedProvider] = useState('openrouter');
-    const [dynamicModels, setDynamicModels] = useState({});
-    const [fetchingModels, setFetchingModels] = useState(null);
+    const [validating, setValidating] = (0, react_1.useState)(false);
+    const [testResult, setTestResult] = (0, react_1.useState)(null);
+    const [showKeys, setShowKeys] = (0, react_1.useState)({});
+    const [expandedProvider, setExpandedProvider] = (0, react_1.useState)('openrouter');
+    const [dynamicModels, setDynamicModels] = (0, react_1.useState)({});
+    const [fetchingModels, setFetchingModels] = (0, react_1.useState)(null);
     const activeProvider = PROVIDERS.find(p => {
         const key = settings[p.keyField]?.trim();
         return key && key !== '[MASKED_CREDENTIAL]';
@@ -191,18 +196,18 @@ const SettingsAi = ({ settings, setSettings, theme }) => {
             const providerConfig = PROVIDERS.find(p => p.id === providerId);
             const apiKeyField = providerConfig ? providerConfig.keyField : 'openRouterApiKey';
             const apiKey = settings[apiKeyField];
-            const res = await api.post('/system/settings/ai/validate', {
+            const res = await api_1.default.post('/system/settings/ai/validate', {
                 provider: providerId,
                 model: settings.aiModel,
                 apiKey: apiKey
             });
             setTestResult({ ok: true, msg: res.data.message || 'API Key is valid' });
-            toast.success('AI connection verified');
+            react_hot_toast_1.default.success('AI connection verified');
         }
         catch (err) {
             const msg = err?.response?.data?.error?.message || err?.response?.data?.message || 'Connection failed';
             setTestResult({ ok: false, msg });
-            toast.error('AI connection failed');
+            react_hot_toast_1.default.error('AI connection failed');
         }
         finally {
             setValidating(false);
@@ -212,34 +217,34 @@ const SettingsAi = ({ settings, setSettings, theme }) => {
         setFetchingModels(providerId);
         try {
             const apiKey = settings[apiKeyField];
-            const res = await api.post('/system/settings/ai/models', {
+            const res = await api_1.default.post('/system/settings/ai/models', {
                 provider: providerId,
                 apiKey: apiKey
             });
             const models = res.data?.data || [];
             setDynamicModels(prev => ({ ...prev, [providerId]: models }));
-            toast.success(`Fetched ${models.length} models for ${providerId}`);
+            react_hot_toast_1.default.success(`Fetched ${models.length} models for ${providerId}`);
         }
         catch (err) {
             const msg = err?.response?.data?.error?.message || err?.response?.data?.message || 'Failed to fetch models';
-            toast.error(msg);
+            react_hot_toast_1.default.error(msg);
         }
         finally {
             setFetchingModels(null);
         }
     };
     const toggleKey = (id) => setShowKeys(prev => ({ ...prev, [id]: !prev[id] }));
-    const inp = (dark) => cn('w-full border px-3 py-2.5 text-sm font-semibold outline-none transition-colors rounded-none focus-visible:ring-2 focus-visible:ring-z-active-border focus-visible:ring-offset-1 focus-visible:ring-offset-black', dark
+    const inp = (dark) => (0, utils_1.cn)('w-full border px-3 py-2.5 text-sm font-semibold outline-none transition-colors rounded-none focus-visible:ring-2 focus-visible:ring-z-active-border focus-visible:ring-offset-1 focus-visible:ring-offset-black', dark
         ? 'bg-black border-z-border text-white placeholder:text-gray-700 focus:border-z-accent'
         : 'bg-z-panel border-z-border text-z-primary placeholder:text-z-muted focus:border-z-accent');
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: cn('p-5 border space-y-4 shadow-sm', dark ? 'bg-z-panel backdrop-blur-md border-z-border' : 'bg-z-input border-z-border'), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx(Cpu, { size: 14, className: "text-z-active-text" }), _jsx("span", { className: cn('text-sm font-semibold  ', dark ? 'text-white' : 'text-z-primary'), children: "Active Model" }), _jsx("span", { className: "ml-auto text-sm text-z-secondary", children: "Used by all AI features" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-semibold text-z-secondary", children: "AI Provider" }), _jsx("select", { value: settings.aiProvider || 'openrouter', onChange: e => setSettings({ ...settings, aiProvider: e.target.value, aiModel: PROVIDERS.find(p => p.id === e.target.value)?.models[0]?.value || '' }), className: inp(dark), children: PROVIDERS.map(p => _jsx("option", { value: p.id, children: p.name }, p.id)) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-semibold text-z-secondary", children: "Model" }), _jsx("select", { value: settings.aiModel || '', onChange: e => setSettings({ ...settings, aiModel: e.target.value }), className: inp(dark), children: (dynamicModels[settings.aiProvider || 'openrouter'] || PROVIDERS.find(p => p.id === (settings.aiProvider || 'openrouter'))?.models || []).map(m => (_jsxs("option", { value: m.value, children: [m.label, " ", m.tier ? `(${m.tier})` : ''] }, m.value))) })] })] }), _jsxs("div", { className: "flex items-center gap-3 pt-1", children: [_jsxs("button", { onClick: handleValidate, disabled: validating, className: "px-4 py-2 bg-z-accent hover:opacity-90 shadow-sm text-white text-sm font-semibold flex items-center gap-2 disabled:opacity-50 transition-all", children: [validating ? _jsx(Loader2, { size: 11, className: "animate-spin" }) : _jsx(TestTube2, { size: 11 }), "Test Connection"] }), testResult && (_jsxs("div", { className: cn('flex items-center gap-2 text-sm font-semibold  ', testResult.ok ? 'text-z-active-text' : 'text-red-400'), children: [testResult.ok ? _jsx(CheckCircle2, { size: 11 }) : _jsx(AlertCircle, { size: 11 }), testResult.msg] }))] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Lock, { size: 12, className: "text-z-secondary" }), _jsx("span", { className: "text-sm font-semibold text-z-secondary", children: "Provider API Keys" }), _jsx("span", { className: "ml-auto text-sm text-gray-600", children: "All keys encrypted at rest" })] }), PROVIDERS.map(provider => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('p-5 border space-y-4 shadow-sm', dark ? 'bg-z-panel backdrop-blur-md border-z-border' : 'bg-z-input border-z-border'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Cpu, { size: 14, className: "text-z-active-text" }), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-sm font-semibold  ', dark ? 'text-white' : 'text-z-primary'), children: "Active Model" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-auto text-sm text-z-secondary", children: "Used by all AI features" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-semibold text-z-secondary", children: "AI Provider" }), (0, jsx_runtime_1.jsx)("select", { value: settings.aiProvider || 'openrouter', onChange: e => setSettings({ ...settings, aiProvider: e.target.value, aiModel: PROVIDERS.find(p => p.id === e.target.value)?.models[0]?.value || '' }), className: inp(dark), children: PROVIDERS.map(p => (0, jsx_runtime_1.jsx)("option", { value: p.id, children: p.name }, p.id)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-semibold text-z-secondary", children: "Model" }), (0, jsx_runtime_1.jsx)("select", { value: settings.aiModel || '', onChange: e => setSettings({ ...settings, aiModel: e.target.value }), className: inp(dark), children: (dynamicModels[settings.aiProvider || 'openrouter'] || PROVIDERS.find(p => p.id === (settings.aiProvider || 'openrouter'))?.models || []).map(m => ((0, jsx_runtime_1.jsxs)("option", { value: m.value, children: [m.label, " ", m.tier ? `(${m.tier})` : ''] }, m.value))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 pt-1", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleValidate, disabled: validating, className: "px-4 py-2 bg-z-accent hover:opacity-90 shadow-sm text-white text-sm font-semibold flex items-center gap-2 disabled:opacity-50 transition-all", children: [validating ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { size: 11, className: "animate-spin" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.TestTube2, { size: 11 }), "Test Connection"] }), testResult && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex items-center gap-2 text-sm font-semibold  ', testResult.ok ? 'text-z-active-text' : 'text-red-400'), children: [testResult.ok ? (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 11 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { size: 11 }), testResult.msg] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-3", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { size: 12, className: "text-z-secondary" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-semibold text-z-secondary", children: "Provider API Keys" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-auto text-sm text-gray-600", children: "All keys encrypted at rest" })] }), PROVIDERS.map(provider => {
                         const isExpanded = expandedProvider === provider.id;
                         const keyValue = settings[provider.keyField] || '';
                         const hasKey = keyValue.trim() && keyValue !== '[MASKED_CREDENTIAL]';
                         const isMasked = keyValue === '[MASKED_CREDENTIAL]';
-                        return (_jsxs("div", { className: cn('border transition-all shadow-sm', isExpanded
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('border transition-all shadow-sm', isExpanded
                                 ? (dark ? 'border-white/15 bg-black/80 backdrop-blur-md shadow-sm' : 'border-z-border-strong bg-white')
-                                : ('z-card-interactive')), children: [_jsxs("button", { onClick: () => setExpandedProvider(isExpanded ? '' : provider.id), className: "w-full flex items-center gap-3 px-4 py-3 text-left", children: [_jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [_jsx("div", { className: cn('w-2 h-2 rounded-full flex-shrink-0', hasKey || isMasked ? 'bg-z-accent shadow-sm' : 'bg-gray-700') }), _jsx("div", { className: cn('text-sm font-semibold', provider.color), children: provider.name }), provider.badge && (_jsx("span", { className: "text-sm font-semibold px-1.5 py-0.5 bg-z-active-bg border border-z-active-border text-z-active-text", children: provider.badge })), _jsx("span", { className: "text-sm text-gray-600 truncate hidden sm:block", children: provider.description })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [isMasked && _jsx("span", { className: "text-sm text-z-active-text font-semibold", children: "Configured" }), hasKey && !isMasked && _jsx("span", { className: "text-sm text-z-active-text font-semibold", children: "Active" }), _jsx(ChevronRight, { size: 12, className: cn('text-z-secondary transition-transform', isExpanded && 'rotate-90') })] })] }), isExpanded && (_jsxs("div", { className: "px-4 pb-4 space-y-3 border-t", style: { borderColor: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)' }, children: [_jsx("p", { className: "text-sm text-z-secondary pt-3", children: provider.description }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-sm font-semibold text-z-secondary", children: "API Key" }), _jsxs("a", { href: provider.docsUrl, target: "_blank", rel: "noopener noreferrer", className: "text-sm text-z-active-text hover:text-z-active-text flex items-center gap-1 transition-colors", children: ["Get Key ", _jsx(ExternalLink, { size: 9 })] })] }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: showKeys[provider.id] ? 'text' : 'password', value: keyValue, onChange: e => setSettings({ ...settings, [provider.keyField]: e.target.value }), placeholder: isMasked ? '••••••••••••••••' : provider.keyPlaceholder, className: cn(inp(dark), 'pr-10 font-mono') }), _jsx("button", { type: "button", onClick: () => toggleKey(provider.id), className: "absolute right-3 top-1/2 -translate-y-1/2 text-z-secondary hover:text-white transition-colors", children: showKeys[provider.id] ? _jsx(EyeOff, { size: 13 }) : _jsx(Eye, { size: 13 }) })] }), isMasked && (_jsxs("p", { className: "text-sm text-amber-500/70 flex items-center gap-1", children: [_jsx(Lock, { size: 9 }), " Key is stored \u2014 enter a new value to replace it"] }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("label", { className: "text-sm font-semibold text-z-secondary", children: ["Available Models ", dynamicModels[provider.id] ? `(${dynamicModels[provider.id].length})` : ''] }), _jsxs("button", { type: "button", onClick: () => handleFetchModels(provider.id, provider.keyField), disabled: fetchingModels === provider.id || (!hasKey && !isMasked), className: "text-sm text-z-active-text hover:text-z-active-text flex items-center gap-1 disabled:opacity-50 transition-colors", children: [fetchingModels === provider.id ? _jsx(Loader2, { size: 9, className: "animate-spin" }) : _jsx(Zap, { size: 9 }), "Fetch Models"] })] }), _jsx("div", { className: "flex flex-wrap gap-1.5 max-h-[120px] overflow-y-auto pr-2 custom-scrollbar", children: (dynamicModels[provider.id] || provider.models).map(m => (_jsx("span", { title: m.value, className: cn('text-sm font-semibold   px-2 py-1 border', m.tier ? TIER_BADGE[m.tier] : 'bg-z-hover border-white/10 text-z-muted'), children: m.label }, m.value))) })] })] }))] }, provider.id));
-                    })] }), _jsxs("div", { className: cn('flex gap-3 p-4 border', dark ? 'bg-z-accent/5 border-z-accent/15' : 'bg-z-active-bg border-z-active-border'), children: [_jsx(Info, { size: 12, className: "text-z-active-text flex-shrink-0 mt-0.5" }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-semibold text-z-active-text", children: "Provider Priority" }), _jsx("p", { className: "text-sm text-z-secondary leading-relaxed", children: "The AI engine auto-selects providers in this order: OpenRouter \u2192 xAI \u2192 NVIDIA NIM \u2192 Groq \u2192 Together AI \u2192 Mistral \u2192 Cohere \u2192 OpenAI \u2192 Anthropic \u2192 Google Gemini. Set the \"Active Model\" above to override. Keys are never sent to the client." })] })] })] }));
+                                : ('z-card-interactive')), children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setExpandedProvider(isExpanded ? '' : provider.id), className: "w-full flex items-center gap-3 px-4 py-3 text-left", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-2 h-2 rounded-full flex-shrink-0', hasKey || isMasked ? 'bg-z-accent shadow-sm' : 'bg-gray-700') }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('text-sm font-semibold', provider.color), children: provider.name }), provider.badge && ((0, jsx_runtime_1.jsx)("span", { className: "text-sm font-semibold px-1.5 py-0.5 bg-z-active-bg border border-z-active-border text-z-active-text", children: provider.badge })), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-600 truncate hidden sm:block", children: provider.description })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [isMasked && (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-z-active-text font-semibold", children: "Configured" }), hasKey && !isMasked && (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-z-active-text font-semibold", children: "Active" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 12, className: (0, utils_1.cn)('text-z-secondary transition-transform', isExpanded && 'rotate-90') })] })] }), isExpanded && ((0, jsx_runtime_1.jsxs)("div", { className: "px-4 pb-4 space-y-3 border-t", style: { borderColor: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)' }, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-z-secondary pt-3", children: provider.description }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-semibold text-z-secondary", children: "API Key" }), (0, jsx_runtime_1.jsxs)("a", { href: provider.docsUrl, target: "_blank", rel: "noopener noreferrer", className: "text-sm text-z-active-text hover:text-z-active-text flex items-center gap-1 transition-colors", children: ["Get Key ", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 9 })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { type: showKeys[provider.id] ? 'text' : 'password', value: keyValue, onChange: e => setSettings({ ...settings, [provider.keyField]: e.target.value }), placeholder: isMasked ? '••••••••••••••••' : provider.keyPlaceholder, className: (0, utils_1.cn)(inp(dark), 'pr-10 font-mono') }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => toggleKey(provider.id), className: "absolute right-3 top-1/2 -translate-y-1/2 text-z-secondary hover:text-white transition-colors", children: showKeys[provider.id] ? (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 13 }) })] }), isMasked && ((0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-amber-500/70 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { size: 9 }), " Key is stored \u2014 enter a new value to replace it"] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("label", { className: "text-sm font-semibold text-z-secondary", children: ["Available Models ", dynamicModels[provider.id] ? `(${dynamicModels[provider.id].length})` : ''] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => handleFetchModels(provider.id, provider.keyField), disabled: fetchingModels === provider.id || (!hasKey && !isMasked), className: "text-sm text-z-active-text hover:text-z-active-text flex items-center gap-1 disabled:opacity-50 transition-colors", children: [fetchingModels === provider.id ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { size: 9, className: "animate-spin" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Zap, { size: 9 }), "Fetch Models"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-1.5 max-h-[120px] overflow-y-auto pr-2 custom-scrollbar", children: (dynamicModels[provider.id] || provider.models).map(m => ((0, jsx_runtime_1.jsx)("span", { title: m.value, className: (0, utils_1.cn)('text-sm font-semibold   px-2 py-1 border', m.tier ? TIER_BADGE[m.tier] : 'bg-z-hover border-white/10 text-z-muted'), children: m.label }, m.value))) })] })] }))] }, provider.id));
+                    })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex gap-3 p-4 border', dark ? 'bg-z-accent/5 border-z-accent/15' : 'bg-z-active-bg border-z-active-border'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { size: 12, className: "text-z-active-text flex-shrink-0 mt-0.5" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-z-active-text", children: "Provider Priority" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-z-secondary leading-relaxed", children: "The AI engine auto-selects providers in this order: OpenRouter \u2192 xAI \u2192 NVIDIA NIM \u2192 Groq \u2192 Together AI \u2192 Mistral \u2192 Cohere \u2192 OpenAI \u2192 Anthropic \u2192 Google Gemini. Set the \"Active Model\" above to override. Keys are never sent to the client." })] })] })] }));
 };
-export default SettingsAi;
+exports.default = SettingsAi;

package/dist/plugin-ai-architect-ui/src/index.js

@@ -1 +1,17 @@
-export * from './plugin';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./plugin"), exports);

package/dist/plugin-ai-architect-ui/src/plugin.js

@@ -1,2 +1,10 @@
-export { default as AIWriterPage } from './AIWriterPage';
-export { default as SettingsAi } from './SettingsAi';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsAi = exports.AIWriterPage = void 0;
+var AIWriterPage_1 = require("./AIWriterPage");
+Object.defineProperty(exports, "AIWriterPage", { enumerable: true, get: function () { return __importDefault(AIWriterPage_1).default; } });
+var SettingsAi_1 = require("./SettingsAi");
+Object.defineProperty(exports, "SettingsAi", { enumerable: true, get: function () { return __importDefault(SettingsAi_1).default; } });

package/dist/plugin.d.ts

@@ -0,0 +1,2 @@
+export { default as AIWriterPage } from './AIWriterPage';
+export { default as SettingsAi } from './SettingsAi';

package/dist/plugin.js

@@ -0,0 +1,2 @@
+export { default as AIWriterPage } from './AIWriterPage';
+export { default as SettingsAi } from './SettingsAi';

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@zenith-open/zenithcms-plugin-ai-architect-ui",
-  "version": "1.0.0-beta.10",
-  "type": "module",
+  "version": "1.0.0-beta.8",
   "description": "AI Copilot and SEO Architect UI Plugin for Zenith CMS",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",