CORE // ARTIFACT NEXUS

\n\n \n \n\n\n

\n \n\n\\`;\n },\n\n combineBlocks: (blocks) => {\n const htmlBlocks = blocks.filter(b => ['html', 'xml', 'svg'].includes(b.lang));\n const cssBlocks = blocks.filter(b => b.lang === 'css');\n const jsBlocks = blocks.filter(b => ['js', 'javascript', 'jsx'].includes(b.lang));\n\n if (htmlBlocks.length > 0) {\n let combined = htmlBlocks.map(b => b.code).join('\\\\n');\n \n if (cssBlocks.length > 0) {\n const styles = cssBlocks.map(b => b.code).join('\\\\n');\n if (!combined.includes('\\`);\n }\n }\n \n if (jsBlocks.length > 0) {\n const scripts = jsBlocks.map(b => b.code).join('\\\\n');\n if (!combined.includes('\\`);\n }\n }\n \n return combined;\n }\n\n if (jsBlocks.length > 0) {\n return this.createHTMLWrapper(jsBlocks.map(b => b.code).join('\\\\n'));\n }\n\n if (cssBlocks.length > 0) {\n return \\`\n\n

CSS Styling Applied

This artifact contains CSS styles. Apply them to HTML elements to see the effects.

\\`;\n }\n\n return null;\n },\n\n analyze: (text) => {\n const blocks = this.extractBlocks(text);\n \n if (blocks.length === 0) {\n return {\n success: false,\n mode: 'no_code',\n message: 'No code blocks detected in content',\n blocks: []\n };\n }\n\n // Strategy 1: Find largest HTML block\n const htmlBlocks = blocks.filter(b => ['html', 'xml', 'svg'].includes(b.lang));\n if (htmlBlocks.length > 0) {\n const largest = htmlBlocks.reduce((a, b) => a.code.length > b.code.length ? a : b);\n if (this.isValidHTML(largest.code)) {\n return {\n success: true,\n mode: 'single_html',\n html: largest.code,\n message: \\`Rendering largest HTML block (\\${largest.code.length} chars)\\`,\n blocks\n };\n }\n }\n\n // Strategy 2: Try combining all blocks\n const combined = this.combineBlocks(blocks);\n if (combined && this.isValidHTML(combined)) {\n return {\n success: true,\n mode: 'combined',\n html: combined,\n message: \\`Combined \\${blocks.length} blocks into runnable HTML\\`,\n blocks\n };\n }\n\n // Strategy 3: Pure JavaScript blocks\n const jsBlocks = blocks.filter(b => ['js', 'javascript', 'jsx'].includes(b.lang));\n if (jsBlocks.length > 0) {\n const jsWrapper = this.createHTMLWrapper(jsBlocks.map(b => b.code).join('\\\\n'));\n return {\n success: true,\n mode: 'javascript_wrapped',\n html: jsWrapper,\n message: \\`Wrapped \\${jsBlocks.length} JavaScript block(s) in HTML\\`,\n blocks\n };\n }\n\n // Strategy 4: CSS only\n const cssBlocks = blocks.filter(b => b.lang === 'css');\n if (cssBlocks.length > 0) {\n const cssWrapper = this.combineBlocks(blocks);\n return {\n success: true,\n mode: 'css_demo',\n html: cssWrapper,\n message: 'Displaying CSS styles in demo page',\n blocks\n };\n }\n\n return {\n success: false,\n mode: 'unsupported',\n message: \\`Found \\${blocks.length} code block(s) but couldn't determine how to render them. Supported: HTML, JavaScript, CSS.\\`,\n blocks\n };\n }\n };\n\n const RenderBadge = ({ mode, success }) => {\n const labels = {\n single_html: 'HTML',\n combined: 'Multi-Block',\n javascript_wrapped: 'JS→HTML',\n css_demo: 'CSS Demo',\n no_code: 'No Code',\n unsupported: 'Unsupported'\n };\n \n const className = success ? 'success' : 'error';\n return React.createElement('span', { className: \\`render-badge \\${className}\\` }, labels[mode] || mode);\n };\n\n const ArtifactRenderer = ({ content }) => {\n const [analysis, setAnalysis] = useState(null);\n\n useEffect(() => {\n const result = CodeParser.analyze(content);\n setAnalysis(result);\n }, [content]);\n\n if (!analysis) {\n return React.createElement('div', { className: 'text-zinc-500 text-center py-8' }, 'Analyzing code blocks...');\n }\n\n return React.createElement('div', { className: 'space-y-6' },\n React.createElement('div', { className: 'artifact-card p-6' },\n React.createElement('div', { className: 'flex items-center justify-between mb-4' },\n React.createElement('div', { className: 'flex items-center' },\n React.createElement('span', { \n className: \\`status-indicator \\${analysis.success ? 'active' : ''}\\`,\n style: { background: analysis.success ? 'var(--accent)' : 'var(--error)' }\n }),\n React.createElement('span', { className: 'text-sm font-mono text-zinc-400' }, analysis.message)\n ),\n React.createElement(RenderBadge, { mode: analysis.mode, success: analysis.success })\n ),\n \n React.createElement('div', { className: 'text-xs font-mono text-zinc-600' },\n \\`Detected \\${analysis.blocks.length} code block(s): \\`,\n analysis.blocks.map(b => b.lang).join(', ')\n )\n ),\n\n analysis.success && React.createElement('iframe', {\n srcDoc: analysis.html,\n className: 'iframe-container',\n sandbox: 'allow-scripts allow-modals',\n style: { minHeight: '600px' }\n }),\n\n !analysis.success && React.createElement('div', { \n className: 'artifact-card p-8 text-center'\n },\n React.createElement('div', { className: 'text-6xl mb-4' }, '⚠️'),\n React.createElement('h3', { className: 'text-2xl font-bold mb-2' }, 'Unable to Render'),\n React.createElement('p', { className: 'text-zinc-500' }, \n 'This artifact contains code blocks that cannot be automatically rendered.'\n ),\n analysis.blocks.length > 0 && React.createElement('div', { className: 'mt-6' },\n React.createElement('p', { className: 'text-sm text-zinc-600 mb-4' }, 'Detected blocks:'),\n React.createElement('div', { className: 'flex flex-wrap gap-2 justify-center' },\n analysis.blocks.map((b, i) => \n React.createElement('span', { \n key: i,\n className: 'px-3 py-1 bg-zinc-900 rounded-full text-xs font-mono border border-zinc-800'\n }, b.lang)\n )\n )\n )\n ),\n\n React.createElement('details', { className: 'artifact-card p-6' },\n React.createElement('summary', { className: 'cursor-pointer text-sm font-bold uppercase tracking-widest text-zinc-500 hover:text-accent transition-colors' }, \n 'View Raw Code Blocks'\n ),\n React.createElement('div', { className: 'mt-6 space-y-4' },\n analysis.blocks.map((block, i) => \n React.createElement('div', { key: i, className: 'code-block' },\n React.createElement('div', { className: 'text-[9px] text-zinc-700 uppercase mb-2' }, \n \\`Block \\${i + 1}: \\${block.lang} (\\${block.code.length} chars)\\`\n ),\n React.createElement('pre', { className: 'text-xs overflow-x-auto' }, block.code)\n )\n )\n )\n )\n );\n };\n\n function App() {\n const [artifacts, setArtifacts] = useState([]);\n const [loading, setLoading] = useState(true);\n const [editor, setEditor] = useState(false);\n const [form, setForm] = useState({ title: '', content: '' });\n const [previewMode, setPreviewMode] = useState(false);\n\n const load = useCallback(async () => {\n const res = await fetch('/api/artifacts');\n const data = await res.json();\n setArtifacts(data);\n setLoading(false);\n }, []);\n\n useEffect(() => { load(); }, [load]);\n\n const publish = async () => {\n if (!form.content.trim()) return;\n setLoading(true);\n \n const analysis = CodeParser.analyze(form.content);\n \n await fetch('/api/artifacts', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n ...form,\n parsed_type: analysis.mode,\n render_mode: analysis.success ? 'iframe' : 'text'\n })\n });\n \n setForm({ title: '', content: '' });\n setEditor(false);\n setPreviewMode(false);\n await load();\n };\n\n return React.createElement('div', { className: 'max-w-5xl mx-auto px-6 py-16' },\n React.createElement('header', { className: 'flex justify-between items-center mb-24' },\n React.createElement('div', null,\n React.createElement('h1', { className: 'text-4xl font-bold tracking-tighter' }, \n 'CORE // ARTIFACT NEXUS'\n ),\n React.createElement('p', { className: 'text-[10px] uppercase tracking-[0.5em] text-zinc-600 font-bold mt-1' }, \n 'Advanced_AI_Response_Parser_v2'\n )\n ),\n React.createElement('button', { \n className: 'btn-primary',\n onClick: () => {\n setEditor(!editor);\n setPreviewMode(false);\n }\n }, editor ? 'Cancel' : 'New_Artifact')\n ),\n\n editor && React.createElement(motion.div, {\n initial: { opacity: 0, y: 20 },\n animate: { opacity: 1, y: 0 },\n className: 'artifact-card p-10 mb-24'\n },\n React.createElement('input', {\n className: 'w-full bg-transparent text-3xl font-bold outline-none mb-6 placeholder:text-zinc-800',\n placeholder: 'Artifact_Title',\n value: form.title,\n onChange: e => setForm({ ...form, title: e.target.value })\n }),\n React.createElement('textarea', {\n className: 'w-full h-80 bg-transparent font-mono text-sm outline-none resize-none placeholder:text-zinc-800 no-scrollbar mb-6',\n placeholder: 'Paste AI response with code blocks...',\n value: form.content,\n onChange: e => setForm({ ...form, content: e.target.value })\n }),\n \n React.createElement('div', { className: 'flex gap-4' },\n React.createElement('button', {\n className: 'flex-1 py-5 bg-zinc-800 text-white font-black uppercase text-xs tracking-widest rounded-2xl hover:bg-zinc-700 transition-colors',\n onClick: () => setPreviewMode(!previewMode)\n }, previewMode ? 'Hide_Preview' : 'Preview_Render'),\n \n React.createElement('button', {\n className: 'flex-1 py-5 bg-white text-black font-black uppercase text-xs tracking-widest rounded-2xl hover:bg-teal-400 transition-colors',\n onClick: publish\n }, 'Publish_Artifact')\n ),\n\n previewMode && form.content && React.createElement(motion.div, {\n initial: { opacity: 0, height: 0 },\n animate: { opacity: 1, height: 'auto' },\n className: 'mt-8'\n },\n React.createElement('h3', { className: 'text-sm font-bold uppercase tracking-widest text-zinc-500 mb-4' }, \n 'Live Preview'\n ),\n React.createElement(ArtifactRenderer, { content: form.content })\n )\n ),\n\n loading && React.createElement('div', { className: 'text-center py-20 text-zinc-600' }, \n 'Loading artifacts...'\n ),\n\n React.createElement('div', { className: 'space-y-32' },\n artifacts.map(item => React.createElement(motion.article, {\n key: item.id,\n initial: { opacity: 0 },\n whileInView: { opacity: 1 },\n viewport: { once: true }\n },\n React.createElement('div', { className: 'mb-8' },\n React.createElement('h2', { className: 'text-5xl font-bold tracking-tighter mb-2 italic' }, \n item.title\n ),\n React.createElement('div', { className: 'flex items-center gap-4' },\n React.createElement('p', { className: 'text-[10px] font-mono text-zinc-600' }, \n new Date(Number(item.created)).toLocaleString('en-US', { \n dateStyle: 'full', \n timeStyle: 'short' \n })\n ),\n item.parsed_type && React.createElement(RenderBadge, { \n mode: item.parsed_type, \n success: item.render_mode === 'iframe' \n })\n )\n ),\n React.createElement(ArtifactRenderer, { content: item.content })\n ))\n )\n );\n }\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(React.createElement(App));\n \n \n \n `);\n});\n\nexport default app.fetch;","deleted","label",[100],"permalink","https://www.val.town/x/ziggyware/untitled-487/code/new-file-8852.ts","extension","actionData","errors"]