[{"_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.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.ts","extension","id","35ce4863-c8d1-4735-b997-c829ce0d15f8","fileId","4bb3581c-ac6f-11f1-be2d-1607ee4eb77e","parentId","branchId","1a44bbd4-418c-11f1-af64-42b51c65c3df","branchVersion",1497,"latest",true,"createdAt",["D",1789156473715],"version",6,"fileType","script","content","// Artifact workbench (markup + style). Full-screen by default: the chat hides while\n// the workbench is open; the workbench carries its own composer so the model can be\n// asked about the open artifact without leaving the editor. Preview sits to the RIGHT\n// of the code (configurable: right | left | bottom). Script: ui-artifacts-script.ts.\nexport const artifactHtml: string = `\n

\n \n artifact\n

\n live\n \n open ↗\n \n \n

\n \n

files⇪

drop files / zip here

\n \n \n

\n \n

editor settings

layout

\n hide chat while the workbench is open\n preview side \n default view \n preview share \n panel width (chat visible) \n

preview

\n live preview of unsaved edits\n live delay (ms) \n console \n console lines \n frame background \n run from server on open\n

editor

\n font size \n tab size \n insert spaces for Tab\n line numbers\n wrap long lines (hides line numbers)\n auto-indent on Enter\n auto-close brackets and quotes\n lint while typing\n syntax highlighting (CodeMirror, loaded from cdnjs)\n file tree\n

behavior

\n auto-save after edits\n auto-save delay (ms) \n save unsaved edits before asking the AI\n open the workbench when the AI creates an artifact\n reopen the last artifact after a reload\n show the AI reply inside the workbench\n automatically ask the AI to fix lint issues (max 2 rounds per artifact)\n automatically fix unhandled preview errors (script errors, rejections, missing files) rounds per artifact\n console lines sent to the AI \n

prompts

Placeholders: {{id}} {{title}} {{file}} {{files}} {{selection}} {{errors}}

\n ask (header button) \n fix from console \n ask about selection \n fix lint issues \n prefix for every workbench message \n integrate (after a swarm build) \n system focus block (server prompt \"workbench\") \n

\n`;\n\nexport const artifactStyle: string = `\n#apanel{position:fixed;top:0;right:0;height:100dvh;width:var(--ap-w,52vw);max-width:100vw;background:var(--s0);border-left:1px solid var(--line);z-index:30;display:flex;flex-direction:column;transition:transform .18s;}\n#apanel.closed{transform:translateX(100%);} body.ap-open:not(.ap-full) #main{margin-right:min(var(--ap-w,52vw),100vw);}\nbody.ap-full #apanel{width:100vw;border-left:0;} body.ap-full #main{display:none;} body.ap-full #ap-resize{display:none;}\n#ap-resize{position:absolute;left:-3px;top:0;width:6px;height:100%;cursor:col-resize;z-index:2;}\n#ap-hdr{display:flex;align-items:center;gap:8px;padding:5px 10px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);flex-wrap:wrap;}\n#ap-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}\n.ap-tabs{display:flex;gap:2px;} .ap-tab{background:none;border:1px solid var(--line);color:var(--dim2);font:inherit;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;cursor:pointer;} .ap-tab.on{border-color:var(--acc);color:var(--acc);}\n.ap-acts{display:flex;gap:4px;align-items:center;} .ap-acts .act-btn{text-decoration:none;} .ap-live{font-size:9px;letter-spacing:.1em;color:var(--dim);display:flex;align-items:center;gap:3px;} .ap-live input{accent-color:var(--acc);margin:0;}\n#ap-body{flex:1;display:flex;min-height:0;flex-direction:row;position:relative;}\n#apanel[data-view=\"preview\"] #ap-code,#apanel[data-view=\"preview\"] #ap-divider{display:none;} #apanel[data-view=\"code\"] #ap-prev,#apanel[data-view=\"code\"] #ap-divider{display:none;}\n#ap-code{order:0;} #ap-divider{order:1;} #ap-prev{order:2;}\n#apanel[data-side=\"left\"] #ap-code{order:2;} #apanel[data-side=\"left\"] #ap-prev{order:0;}\n#apanel[data-view=\"split\"] #ap-prev{flex:0 0 var(--ap-split,50%);} #apanel[data-view=\"split\"] #ap-divider{width:5px;cursor:col-resize;background:var(--line);}\n#apanel[data-side=\"bottom\"] #ap-body,#apanel.narrow #ap-body{flex-direction:column;} #apanel[data-side=\"bottom\"][data-view=\"split\"] #ap-divider,#apanel.narrow[data-view=\"split\"] #ap-divider{width:auto;height:5px;cursor:row-resize;}\n#ap-prev{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;}\n#ap-frame{flex:1;width:100%;border:0;background:var(--ap-bg,#fff);min-height:0;}\n#ap-console{max-height:34%;display:flex;flex-direction:column;border-top:1px solid var(--line);background:var(--s0);} #ap-console[hidden]{display:none;}\n#ap-con-h{display:flex;gap:6px;align-items:center;padding:3px 8px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);border-bottom:1px solid var(--line);} #ap-con-h span{flex:1;}\n#ap-con-body{overflow:auto;font-size:11px;line-height:1.45;padding:4px 8px;font-family:var(--mono);} .con-line{white-space:pre-wrap;word-break:break-word;border-bottom:1px solid var(--line);padding:1px 0;} .con-err{color:var(--err);} .con-warn{color:var(--warn);} .con-log{color:var(--dim);}\n#ap-code{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;}\n#ap-edrow{flex:1;display:flex;min-height:0;}\n#ap-tree{width:180px;flex-shrink:0;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--s0);position:relative;} #apanel.no-tree #ap-tree{display:none;}\n#ap-tree-h{display:flex;align-items:center;gap:2px;padding:3px 4px 3px 10px;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);} #ap-tree-h span{flex:1;} #ap-tree-h .ib{width:22px;height:22px;font-size:13px;}\n#ap-tree-b{flex:1;overflow:auto;padding:4px 0;font-size:11px;} .tr-d{color:var(--dim2);padding:2px 6px;cursor:pointer;white-space:nowrap;user-select:none;} .tr-d::before{content:\"▾ \";font-size:9px;} .tr-d.closed::before{content:\"▸ \";} .tr-f{padding:2px 6px;cursor:pointer;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tr-f:hover{color:var(--text);background:var(--s1);} .tr-f.on{color:var(--acc);background:var(--s1);} .tr-f.dirty::after{content:\" •\";color:var(--warn);} .tr-d.closed+.tr-kids{display:none;}\n#ap-drop{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(79,140,255,.12);border:1px dashed var(--acc);color:var(--acc);font-size:10px;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;} #ap-tree.drag #ap-drop{display:flex;}\n#ap-bin{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:auto;} #ap-bin[hidden]{display:none;} #ap-bin img{max-width:100%;max-height:100%;image-rendering:auto;} #ap-bin .bin-note{color:var(--dim2);font-size:11px;}\n#ap-find{display:flex;gap:4px;align-items:center;flex-wrap:wrap;background:var(--s1);border-bottom:1px solid var(--line);padding:4px 8px;flex-shrink:0;} #ap-find[hidden]{display:none;} #ap-find input{background:var(--bg);color:var(--text);border:1px solid var(--line2);font:inherit;font-size:11px;padding:3px 6px;width:150px;} #ap-find-n{font-size:10px;color:var(--dim2);min-width:40px;}\n#ap-jobs{display:flex;gap:4px;flex-wrap:wrap;padding:4px 10px;border-bottom:1px solid var(--line);font-size:10px;} #ap-jobs[hidden]{display:none;} .job{border:1px solid var(--line2);padding:1px 6px;color:var(--dim2);} .job.building{border-color:var(--warn);color:var(--warn);} .job.ok{border-color:rgba(198,255,127,.4);color:var(--acc2);} .job.issues,.job.error{border-color:var(--err);color:var(--err);}\n#ap-edwrap .CodeMirror.cm-s-omni{flex:1 1 0;height:auto;min-height:0;min-width:0;align-self:stretch;background:var(--bg);color:var(--text);font-family:var(--mono);font-size:var(--ap-fs,12px);line-height:1.5;} .cm-s-omni .CodeMirror-gutters{background:var(--bg);border-right:1px solid var(--line);} .cm-s-omni .CodeMirror-linenumber{color:var(--dim2);} .cm-s-omni .CodeMirror-cursor{border-left:1px solid var(--text);} .cm-s-omni .CodeMirror-selected{background:rgba(79,140,255,.2) !important;} .cm-s-omni .CodeMirror-matchingbracket{color:var(--acc2) !important;text-decoration:underline;} .cm-s-omni.CodeMirror-focused .CodeMirror-selected{background:rgba(79,140,255,.28) !important;} .cm-s-omni .CodeMirror-activeline-background{background:rgba(255,255,255,.03);} .cm-s-omni .CodeMirror-lines{padding:8px 0;}\n.cm-s-omni .cm-keyword{color:#c792ea;} .cm-s-omni .cm-atom,.cm-s-omni .cm-number{color:#f78c6c;} .cm-s-omni .cm-def,.cm-s-omni .cm-variable-2{color:#82aaff;} .cm-s-omni .cm-variable{color:var(--text);} .cm-s-omni .cm-property{color:#80cbc4;} .cm-s-omni .cm-operator{color:#89ddff;} .cm-s-omni .cm-comment{color:#546e7a;font-style:italic;} .cm-s-omni .cm-string,.cm-s-omni .cm-string-2{color:#c3e88d;} .cm-s-omni .cm-meta,.cm-s-omni .cm-qualifier{color:#ffcb6b;} .cm-s-omni .cm-builtin{color:#ffcb6b;} .cm-s-omni .cm-tag{color:#f07178;} .cm-s-omni .cm-attribute{color:#ffcb6b;} .cm-s-omni .cm-error{color:var(--err);} .cm-s-omni .cm-searching{background:rgba(255,179,71,.35);}\n#ap-edwrap{position:relative;flex:1 1 0;min-width:0;min-height:0;display:flex;} #ap-edwrap .CodeMirror-scroll{min-height:100%;}\n#ap-lint{font-size:10px;color:var(--warn);border-bottom:1px solid var(--line);} #ap-lint[hidden]{display:none;} #ap-lint-h{display:flex;gap:6px;align-items:center;padding:3px 8px;letter-spacing:.1em;text-transform:uppercase;} #ap-lint-h span{flex:1;} #ap-lint-b{margin:0;padding:2px 8px 5px;white-space:pre-wrap;max-height:96px;overflow:auto;font:inherit;color:var(--warn);}\n#ap-edwrap{flex:1;display:flex;min-height:0;background:var(--bg);font-family:var(--mono);font-size:var(--ap-fs,12px);line-height:1.5;}\n#ap-gutter{margin:0;padding:10px 6px 10px 8px;text-align:right;color:var(--dim2);user-select:none;overflow:hidden;border-right:1px solid var(--line);font:inherit;line-height:inherit;min-width:2.5em;} #apanel.no-gutter #ap-gutter{display:none;}\n#ap-editor{flex:1;width:100%;resize:none;border:0;outline:0;background:transparent;color:var(--text);font:inherit;line-height:inherit;padding:10px;tab-size:var(--ap-tab,2);white-space:pre;overflow:auto;} #apanel.wrap #ap-editor{white-space:pre-wrap;word-break:break-word;}\n#ap-bar{display:flex;gap:6px;align-items:center;padding:5px 8px;border-top:1px solid var(--line);flex-wrap:wrap;} #ap-state{flex:1;font-size:10px;color:var(--dim2);letter-spacing:.06em;} #ap-pos{font-size:10px;color:var(--dim2);}\n.act-btn.primary{border-color:var(--acc);color:var(--acc);}\n#ap-ask{border-top:1px solid var(--line);background:var(--s0);flex-shrink:0;}\n#ap-ask-row{display:flex;gap:6px;align-items:flex-end;padding:6px 10px;} #ap-ask-in{flex:1;resize:none;background:var(--bg);color:var(--text);border:1px solid var(--line2);font:inherit;font-size:12px;padding:6px 8px;line-height:1.4;max-height:120px;} #ap-ask-in:focus{border-color:var(--acc);outline:0;} #ap-ask-st{font-size:10px;color:var(--dim2);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;max-width:40%;overflow:hidden;text-overflow:ellipsis;}\n#ap-reply{border-bottom:1px solid var(--line);max-height:38vh;display:flex;flex-direction:column;} #ap-reply[hidden]{display:none;} #ap-reply-h{display:flex;gap:6px;align-items:center;padding:3px 10px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);} #ap-reply-h span{flex:1;} #ap-reply-b{overflow:auto;padding:4px 12px 8px;font-size:12px;}\n#ap-prompt{position:absolute;left:50%;top:40%;transform:translateX(-50%);background:var(--s1);border:1px solid var(--acc);padding:10px;display:flex;gap:6px;z-index:5;} #ap-prompt[hidden]{display:none;} #ap-prompt input{background:var(--bg);color:var(--text);border:1px solid var(--line2);font:inherit;font-size:12px;padding:4px 6px;min-width:240px;}\n#ap-set{position:absolute;top:0;right:0;height:100%;width:min(380px,100vw);background:var(--s0);border-left:1px solid var(--line);z-index:6;display:flex;flex-direction:column;transition:transform .18s;box-shadow:-8px 0 24px rgba(0,0,0,.3);} #ap-set.closed{transform:translateX(105%);box-shadow:none;}\n#ap-set-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);}\n#ap-set-b{overflow:auto;padding:6px 12px 24px;} #ap-set-b section{padding:10px 0;border-bottom:1px solid var(--line);} #ap-set-b h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);margin:0 0 8px;font-weight:500;}\n#ap-set-b label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--text);padding:4px 0;flex-wrap:wrap;} #ap-set-b label>input[type=checkbox]{order:-1;margin:0 8px 0 0;accent-color:var(--acc);} #ap-set-b label:has(input[type=checkbox]){justify-content:flex-start;}\n#ap-set-b select,#ap-set-b textarea{background:var(--s1);color:var(--text);border:1px solid var(--line2);font:inherit;font-size:12px;padding:4px 6px;} #ap-set-b textarea{width:100%;resize:vertical;line-height:1.45;font-family:var(--mono);font-size:11px;} #ap-set-b label:has(textarea){flex-direction:column;align-items:stretch;}\n#ap-set-b input[type=range]{flex:1;accent-color:var(--acc);} #ap-set-b output{min-width:36px;text-align:right;color:var(--dim);font-size:11px;}\n.app-card-edit{margin-left:6px;}\n#sb-artifacts{border-top:1px solid var(--line);padding:6px 0;} #sb-artifacts .sb-h{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);padding:2px 10px 4px;} .sb-art{display:block;width:100%;text-align:left;background:none;border:0;color:var(--dim);font:inherit;font-size:10px;padding:3px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sb-art:hover{color:var(--acc);}\n@media (max-width:900px){#apanel{width:100vw !important;} body.ap-open #main{margin-right:0;}}\n`;\n","deleted",false,"label",[14],"1a430fbe-418c-11f1-af64-42b51c65c3df",["D",1777220541701],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Free ai chat with inference router.","imageUrl","userId","2c6d46b0-54dd-11f0-a86c-6fbc2b29331a","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","850db142-aa5e-4914-bceb-1e2e085ae4c5","tursoName","1a430fbe418c11f1af6442b51c65c3df","tursoHostname","1a430fbe418c11f1af6442b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789508444194],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_104":100},"org",{"_9":10,"_98":-5,"_99":100,"_55":56,"_101":102,"_103":42},"branch",{"_35":88,"_11":89,"_22":28,"_90":45,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":12,"_97":10},"isOwned",1682,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yekJHRDE5SGVoUHUzUENQaXY2MTRkT3h0cncifQ","tier","free","canRestrictVals","profileImageUrl","ctx",{"_81":-5,"_138":139,"_140":141,"_142":143,"_144":42,"_145":42,"_146":42,"_147":32,"_148":-5,"_149":-7,"_150":-7,"_151":62,"_152":42,"_153":42,"_154":-5,"_155":42,"_156":42,"_157":42,"_158":-5},"ENV",{"_109":110,"_111":112,"_113":89,"_114":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]