[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_105":106,"_107":108},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","ziggyware","name","free-ai","path","ui-artifacts-script.ts","project",{"_22":45,"_11":12,"_33":46,"_47":-5,"_48":42,"_49":50,"_51":50,"_52":53,"_54":-5,"_55":56,"_57":-5,"_58":42,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":42},"file",{"_22":23,"_11":14,"_24":25,"_26":-5,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":-5,"_13":44},"permalink","https://www.val.town/x/ziggyware/free-ai/code/ui-artifacts-script.ts","extension","id","3f6005d5-653a-4da1-890d-77f6ec92fb31","fileId","95c94474-ac98-11f1-8e6d-1607ee4eb77e","parentId","branchId","1a44bbd4-418c-11f1-af64-42b51c65c3df","branchVersion",1600,"latest",true,"createdAt",["D",1789451489104],"version",9,"fileType","script","content","// Workbench logic. Editor = CodeMirror 5 (cdnjs, lazy) behind a tiny ED facade with a\n// textarea fallback, so every feature (live preview, find, selection → AI) works either\n// way. Files may live in folders (a/b/c.js); binaries are stored as data: URLs.\nexport const artifactScript: string = String.raw`\nconst ART = (() => {\n const $ = (id) => document.getElementById(id);\n const el = $('apanel'), frame = $('ap-frame'), treeB = $('ap-tree-b'), ta = $('ap-editor'), gutter = $('ap-gutter'), state = $('ap-state'), pos = $('ap-pos'), title = $('ap-title'), openA = $('ap-open'), lint = $('ap-lint'), bin = $('ap-bin'), edwrap = $('ap-edwrap');\n const con = $('ap-console'), conBody = $('ap-con-body'), liveCb = $('ap-livecb'), askIn = $('ap-ask-in'), askSt = $('ap-ask-st'), askGo = $('ap-ask-go'), reply = $('ap-reply'), replyB = $('ap-reply-b'), setEl = $('ap-set'), jobsEl = $('ap-jobs');\n const EKEY = 'omni.editor';\n const PDEF = {\n pAsk: 'Update artifact #{{id}} ({{title}}): ',\n pFix: 'Fix artifact #{{id}} ({{title}}). The preview console shows:\\n{{errors}}\\nFind the root cause in the files, apply the smallest correct fix with update_artifact, and say what was wrong.',\n pSel: 'In {{file}} of artifact #{{id}}, about this selection:\\n\\n{{selection}}\\n\\n',\n pPrefix: '',\n pLint: 'Artifact #{{id}} ({{title}}) has lint issues. Fix every one with update_artifact (batched edits; write real implementations, never remove features), then re-check:\\n{{lint}}',\n pIntegrate: 'Integration pass on artifact #{{id}}: independent builders wrote the files against manifest.json. Fix every lint issue below, verify each import path exists and each imported name is exported with the same signature, remove duplicate definitions, make index.html load scripts in dependency order, and check the acceptance list. read_artifact only what you need, then ONE update_artifact with batched edits. Report ≤6 lines.\\n\\nLint issues:\\n{{issues}}',\n };\n const DEF = { hideChat: true, side: 'right', defaultView: 'split', split: 50, width: 52, live: true, liveDelay: 700, console: 'auto', consoleMax: 200, previewBg: '#ffffff', runOnOpen: true,\n fontSize: 12, tabSize: 2, softTabs: true, lineNumbers: true, wrap: false, autoIndent: true, closeBrackets: true, lintOnType: false, codemirror: true, showTree: true,\n autoSave: false, autoSaveDelay: 1500, saveBeforeAsk: true, autoOpen: true, reopen: true, focusReply: true, errorsToAI: 6, autoFixLint: true, autoFixErrors: true, autoFixRounds: 3, ...PDEF };\n let E = { ...DEF };\n try { E = { ...DEF, ...JSON.parse(localStorage.getItem(EKEY) || '{}') }; } catch {}\n let cur = null, active = null, viewMode = E.defaultView, liveTimer = null, saveTimer = null, lastErrors = [], listCache = [], closedDirs = new Set();\n const isBin = (p, c) => (c !== undefined ? String(c).startsWith('data:') : /\\.(png|jpe?g|gif|webp|ico|woff2?|ttf|otf|mp3|ogg|wav|mp4|webm|bin|wasm)$/i.test(p));\n const post = (path, body) => fetch(path, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });\n\n // ─── editor facade: CodeMirror 5 when available, textarea otherwise ─────────\n let cm = null, cmLoading = null;\n const MODES = { js: 'javascript', mjs: 'javascript', ts: 'text/typescript', json: { name: 'javascript', json: true }, html: 'htmlmixed', htm: 'htmlmixed', css: 'css', svg: 'xml', xml: 'xml', md: 'markdown', glsl: 'x-shader/x-fragment', frag: 'x-shader/x-fragment', vert: 'x-shader/x-vertex', wgsl: 'text/x-csrc', txt: null, csv: null };\n const modeFor = (p) => { const ext = (p.split('.').pop() || '').toLowerCase(); return ext in MODES ? MODES[ext] : null; };\n function loadCM() {\n if (window.CodeMirror) return Promise.resolve(true);\n if (cmLoading) return cmLoading;\n const base = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/';\n const css = document.createElement('link'); css.rel = 'stylesheet'; css.href = base + 'codemirror.min.css'; document.head.appendChild(css);\n const js = (f) => new Promise((res, rej) => { const s = document.createElement('script'); s.src = base + f; s.onload = res; s.onerror = rej; document.head.appendChild(s); });\n cmLoading = js('codemirror.min.js').then(() => Promise.all(['mode/javascript/javascript.min.js', 'mode/xml/xml.min.js', 'mode/css/css.min.js', 'mode/htmlmixed/htmlmixed.min.js', 'mode/clike/clike.min.js', 'mode/markdown/markdown.min.js', 'addon/edit/closebrackets.min.js', 'addon/edit/matchbrackets.min.js', 'addon/search/searchcursor.min.js', 'addon/selection/active-line.min.js'].map(js))).then(() => true).catch(() => { cmLoading = null; return false; });\n return cmLoading;\n }\n const ED = {\n get: () => cm ? cm.getValue() : ta.value,\n set: (v) => { if (cm) { cm.setValue(v); cm.clearHistory(); } else ta.value = v; renderGutter(); },\n sel: () => cm ? cm.getSelection() : ta.value.slice(ta.selectionStart, ta.selectionEnd),\n cursor: () => { if (cm) { const c = cm.getCursor(); return [c.line + 1, c.ch + 1, cm.getSelection().length]; } const v = ta.value.slice(0, ta.selectionStart).split('\\n'); return [v.length, v[v.length - 1].length + 1, ta.selectionEnd - ta.selectionStart]; },\n focus: () => (cm || ta).focus(),\n mode: (p) => { if (cm) cm.setOption('mode', modeFor(p) || 'text/plain'); },\n apply: () => { if (cm) { cm.setOption('lineNumbers', !!E.lineNumbers); cm.setOption('lineWrapping', !!E.wrap); cm.setOption('tabSize', E.tabSize); cm.setOption('indentUnit', E.tabSize); cm.setOption('indentWithTabs', !E.softTabs); cm.setOption('autoCloseBrackets', !!E.closeBrackets); cm.setOption('smartIndent', !!E.autoIndent); cm.refresh(); } },\n refresh: () => { if (cm) { cm.setSize('100%', '100%'); cm.refresh(); } },\n };\n async function ensureEditor() {\n if (!E.codemirror || cm) { if (!E.codemirror && cm) { cm.getWrapperElement().remove(); cm = null; ta.hidden = false; gutter.hidden = false; } return; }\n if (!(await loadCM())) return;\n if (cm || !E.codemirror) return;\n ta.hidden = true; gutter.hidden = true;\n cm = CodeMirror((node) => edwrap.insertBefore(node, ta), { value: ta.value, theme: 'omni', lineNumbers: !!E.lineNumbers, lineWrapping: !!E.wrap, tabSize: E.tabSize, indentUnit: E.tabSize, indentWithTabs: !E.softTabs, autoCloseBrackets: !!E.closeBrackets, matchBrackets: true, smartIndent: !!E.autoIndent, styleActiveLine: true, extraKeys: { 'Cmd-S': () => save(), 'Ctrl-S': () => save(), 'Cmd-Enter': () => reload(true), 'Ctrl-Enter': () => reload(true), 'Cmd-F': () => findToggle(true), 'Ctrl-F': () => findToggle(true), 'Esc': () => { if (!$('ap-find').hidden) findToggle(false); }, Tab: (c) => { if (c.somethingSelected()) c.indentSelection('add'); else c.replaceSelection(E.softTabs ? ' '.repeat(E.tabSize) : '\\t', 'end'); }, 'Shift-Tab': (c) => c.indentSelection('subtract') } });\n cm.setSize('100%', '100%');\n cm.on('change', (_, ch) => { if (ch.origin !== 'setValue') onEdit(); });\n // CodeMirror measures once; any change of the wrapper's box (window resize, split drag, tree toggle, side change) needs a refresh\n if (window.ResizeObserver) new ResizeObserver(() => { if (cm) cm.refresh(); }).observe(edwrap);\n cm.on('cursorActivity', updPos);\n if (active) ED.mode(active);\n }\n\n // ─── settings ───────────────────────────────────────────────────────────────\n function applyE() {\n const root = document.documentElement;\n root.style.setProperty('--ap-w', E.width + 'vw'); root.style.setProperty('--ap-split', E.split + '%'); root.style.setProperty('--ap-fs', E.fontSize + 'px'); root.style.setProperty('--ap-tab', E.tabSize); root.style.setProperty('--ap-bg', E.previewBg);\n el.dataset.side = E.side; el.classList.toggle('wrap', !!E.wrap); el.classList.toggle('no-gutter', !E.lineNumbers || !!E.wrap); el.classList.toggle('no-tree', !E.showTree);\n liveCb.checked = !!E.live;\n document.body.classList.toggle('ap-full', !!E.hideChat && document.body.classList.contains('ap-open'));\n if (E.console === 'open') con.hidden = false; else if (E.console === 'hidden') con.hidden = true;\n renderGutter(); ED.apply(); if (!el.classList.contains('closed')) ensureEditor();\n }\n function saveE() { try { localStorage.setItem(EKEY, JSON.stringify(E)); } catch {} applyE(); }\n function syncE() {\n setEl.querySelectorAll('[data-e]').forEach(inp => { const k = inp.dataset.e; if (inp.type === 'checkbox') inp.checked = !!E[k]; else inp.value = E[k] ?? ''; const o = inp.nextElementSibling; if (o && o.tagName === 'OUTPUT') o.textContent = E[k] + (k === 'split' || k === 'width' ? '%' : ''); });\n const wb = $('ap-p-workbench'); const S = window.SETTINGS ? SETTINGS.current() : null;\n if (S && S.prompts && S.prompts.workbench) wb.value = S.prompts.workbench; else fetch('?prompts').then(r => r.json()).then(j => { if (!wb.value) wb.value = j.defaults.workbench || ''; wb.dataset.def = j.defaults.workbench || ''; }).catch(() => {});\n }\n setEl.addEventListener('input', (e) => {\n const inp = e.target; const k = inp.dataset && inp.dataset.e;\n if (inp.id === 'ap-p-workbench' && window.SETTINGS) { const S = SETTINGS.current(); S.prompts = { ...(S.prompts || {}) }; if (inp.value.trim() && inp.value.trim() !== (inp.dataset.def || '').trim()) S.prompts.workbench = inp.value; else delete S.prompts.workbench; SETTINGS.set('prompts', S.prompts); return; }\n if (!k) return;\n let v = inp.type === 'checkbox' ? inp.checked : inp.value; if (inp.type === 'range' || k === 'tabSize') v = Number(v);\n E[k] = v; saveE(); const o = inp.nextElementSibling; if (o && o.tagName === 'OUTPUT') o.textContent = v + (k === 'split' || k === 'width' ? '%' : '');\n if (k === 'live') reload(!v);\n });\n function toggleSettings(open) { const o = open ?? setEl.classList.contains('closed'); setEl.classList.toggle('closed', !o); if (o) syncE(); }\n function resetPrompts() { Object.assign(E, PDEF); saveE(); syncE(); }\n function resetSettings() { E = { ...DEF }; saveE(); syncE(); }\n const tpl = (s, v) => String(s || '').replace(/\\{\\{(\\w+)\\}\\}/g, (_, k) => v[k] ?? '');\n function vars() {\n const f = cur && cur.files.find(x => x.path === active);\n return cur ? { id: cur.id, title: cur.title, file: active || '', files: cur.files.map(x => x.path).join(', '), selection: ED.sel(), errors: lastErrors.slice(-E.errorsToAI).join('\\n'), content: f ? f.content : '' } : {};\n }\n\n // ─── console capture ────────────────────────────────────────────────────────\n // JSON.stringify(errorInstance) === \"{}\" — message/stack are non-enumerable own properties on Error, so the\n // previous version of this hook silently swallowed the ONE thing an artifact's own catch(e){console.error(...)}\n // actually passes: the Error object itself. Confirmed against a real failure mode (init.js's own error\n // boundary logging \"Initialization error:\", e) — this is why the console panel showed \"Initialization error: {}\"\n // instead of the TypeError/SyntaxError text. Fix: serialize Error instances (and error-shaped plain objects —\n // some transpiled/bundled code throws non-Error objects with .message/.stack) via their stack/message, not JSON.\n // Item 10: an artifact's own bug (a runaway console.log/error in a loop) can flood postMessage far\n // faster than the parent's conBody DOM cap (consoleMax, trimmed one child at a time in the handler\n // below) can keep up with — every flooded message still round-trips through structured-clone\n // postMessage and a DOM append before its turn to be trimmed. A hard per-load counter stops posting\n // once a runaway is evident, with one final message announcing the cutoff so it's visible, not silent.\n const HOOK = '