[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_312":313,"_314":315},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",30,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/upload.client.ts","latestPath","fileId","38b33616-6759-11f1-ad57-1607ee4eb77e","name","upload.client.ts","fileType","script","content","// Drag-and-drop / file-picker uploader for the dashboard, plus a small\n// confirm() for delete forms. Kept out of the markup per house style.\n\nconst zone = document.getElementById(\"dropzone\");\nconst input = document.getElementById(\"fileInput\") as HTMLInputElement | null;\nconst statusEl = document.getElementById(\"dropStatus\");\n\nfunction setStatus(msg: string) {\n if (statusEl) statusEl.textContent = msg;\n}\n\nif (zone && input) {\n const highlight = (on: boolean) =>\n zone.classList.toggle(\"border-blue-400\", on);\n\n zone.addEventListener(\"dragover\", (e) => {\n e.preventDefault();\n highlight(true);\n });\n zone.addEventListener(\"dragleave\", (e) => {\n // dragleave also fires when the pointer moves onto a child element; only\n // clear the highlight when it actually leaves the zone.\n if (!zone.contains((e as DragEvent).relatedTarget as Node | null)) {\n highlight(false);\n }\n });\n zone.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n highlight(false);\n const files = (e as DragEvent).dataTransfer?.files;\n if (files && files.length) uploadAll(files);\n });\n input.addEventListener(\"change\", () => {\n if (input.files && input.files.length) uploadAll(input.files);\n });\n}\n\nasync function uploadAll(files: FileList) {\n const list = [...files].filter(\n (f) =>\n /\\.(html?|md|markdown)$/i.test(f.name) ||\n f.type === \"text/html\" ||\n f.type === \"text/markdown\",\n );\n if (!list.length) {\n setStatus(\"Please drop .html or .md files.\");\n return;\n }\n setStatus(`Uploading ${list.length} file${list.length > 1 ? \"s\" : \"\"}…`);\n let lastUrl = \"\";\n try {\n for (const file of list) {\n const body = new FormData();\n body.set(\"file\", file);\n body.set(\"name\", file.name);\n const res = await fetch(\"/upload\", { method: \"POST\", body });\n if (!res.ok) throw new Error(await res.text());\n lastUrl = (await res.json()).url;\n }\n } catch (err) {\n setStatus(\n \"Upload failed: \" + (err instanceof Error ? err.message : String(err)),\n );\n return;\n }\n location.href = list.length === 1 ? lastUrl : \"/\";\n}\n\n// Confirm before submitting any form marked with data-confirm.\nfor (\n const form of document.querySelectorAll(\"form[data-confirm]\")\n) {\n form.addEventListener(\"submit\", (e) => {\n if (!confirm(form.getAttribute(\"data-confirm\") || \"Are you sure?\")) {\n e.preventDefault();\n }\n });\n}\n","// Drag-and-drop / file-picker uploader for the dashboard, plus a small\n// confirm() for delete forms. Kept out of the markup per house style.\n\nconst zone = document.getElementById(\"dropzone\");\nconst input = document.getElementById(\"fileInput\") as HTMLInputElement | null;\nconst statusEl = document.getElementById(\"dropStatus\");\n\nfunction setStatus(msg: string) {\n if (statusEl) statusEl.textContent = msg;\n}\n\nif (zone && input) {\n const highlight = (on: boolean) =>\n zone.classList.toggle(\"border-blue-400\", on);\n\n zone.addEventListener(\"dragover\", (e) => {\n e.preventDefault();\n highlight(true);\n });\n zone.addEventListener(\"dragleave\", (e) => {\n // dragleave also fires when the pointer moves onto a child element; only\n // clear the highlight when it actually leaves the zone.\n if (!zone.contains((e as DragEvent).relatedTarget as Node | null)) {\n highlight(false);\n }\n });\n zone.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n highlight(false);\n const files = (e as DragEvent).dataTransfer?.files;\n if (files && files.length) uploadAll(files);\n });\n input.addEventListener(\"change\", () => {\n if (input.files && input.files.length) uploadAll(input.files);\n });\n}\n\nasync function uploadAll(files: FileList) {\n const list = [...files].filter(\n (f) =>\n /\\.(html?|md|markdown)$/i.test(f.name) ||\n f.type === \"text/html\" ||\n f.type === \"text/markdown\",\n );\n if (!list.length) {\n setStatus(\"Please drop .html or .md files.\");\n return;\n }\n setStatus(`Uploading ${list.length} file${list.length > 1 ? \"s\" : \"\"}…`);\n let lastUrl = \"\";\n try {\n for (const file of list) {\n const body = new FormData();\n body.set(\"file\", file);\n body.set(\"name\", file.name);\n const res = await fetch(\"/upload\", { method: \"POST\", body });\n if (!res.ok) throw new Error(await res.text());\n lastUrl = (await res.json()).url;\n }\n } catch (err) {\n setStatus(\n \"Upload failed: \" + (err instanceof Error ? err.message : String(err)),\n );\n return;\n }\n location.href = list.length === 1 ? lastUrl : \"/dashboard\";\n}\n\n// Confirm before submitting any form marked with data-confirm.\nfor (\n const form of document.querySelectorAll(\"form[data-confirm]\")\n) {\n form.addEventListener(\"submit\", (e) => {\n if (!confirm(form.getAttribute(\"data-confirm\") || \"Are you sure?\")) {\n e.preventDefault();\n }\n });\n}\n","createdAt",["D",1786048234784],"branchVersion","branchId","b06b90cc-3145-4e0c-a601-5498a45bf388","id","d790bcce-8376-49d3-8ba5-0bbcf66987bc","team-artifacts",["D",1781376559300],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Host and share HTML and Markdown artifacts with your team","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","95d06ed2-6758-11f1-8f78-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019aa807-52c2-709c-928b-2029bae9a558","tursoName","d790bcce837649d38ba50bbcf66987bc","tursoHostname","d790bcce837649d38ba50bbcf66987bc-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789500689328],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":-5,"_106":107,"_108":60},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",50,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","templates","handle","displayName","Templates","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789563599&sig=a969511699ef574c42d646a130422bcd8ffa020e1e59bd8fb5bde6db2cea72c1","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":307,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":308,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":309,"_85":310,"_87":311,"_89":25},"tree",[186,189,193,201,202],"files",[186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202],"counts",{"_174":64,"_175":176,"_177":178,"_179":180,"_181":182},"contents",[132,133,134,135,136],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":169,"_32":170,"_30":171,"_139":-5,"_42":43,"_41":154,"_141":60,"_39":172,"_13":64,"_34":161,"_36":-5,"_24":25,"_146":-5,"_27":173},{"_44":163,"_32":164,"_30":165,"_139":-5,"_42":43,"_41":166,"_141":60,"_39":167,"_13":64,"_34":161,"_36":-5,"_24":25,"_146":-5,"_27":168},{"_44":157,"_32":158,"_30":159,"_139":-5,"_42":43,"_41":143,"_141":60,"_39":160,"_13":64,"_34":161,"_36":-5,"_24":25,"_146":-5,"_27":162},{"_44":149,"_32":150,"_30":151,"_139":-5,"_42":43,"_41":152,"_141":25,"_39":153,"_13":154,"_34":20,"_36":155,"_24":25,"_146":-5,"_27":156},{"_44":137,"_32":138,"_30":58,"_139":-5,"_42":43,"_41":140,"_141":25,"_39":142,"_13":143,"_34":144,"_36":145,"_24":25,"_146":147,"_27":148},"b2ff6093-5787-4e11-90ed-fc34fbefd20f","main.tsx","parentId",26,"latest",["D",1786048149865],4,"http","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nimport {\n createArtifact,\n deleteArtifact,\n getArtifact,\n initDb,\n listArtifacts,\n} from \"./backend/db.ts\";\nimport { renderArtifact } from \"./backend/render.ts\";\nimport { Dashboard } from \"./frontend/Dashboard.tsx\";\nimport { Landing } from \"./frontend/Landing.tsx\";\nimport { Layout } from \"./frontend/Layout.tsx\";\nimport { Viewer } from \"./frontend/Viewer.tsx\";\n\nconst ORG = parseVal().username;\n\nawait initDb();\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err)); // surface real stack traces\n\n// Render a JSX page as a full HTML document.\nconst page = (node: any, status = 200) =>\n new Response(\"\" + node.toString(), {\n status,\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n\n// Val Town Access can restrict this entire app to designated team members.\n// It runs before this handler, so the app itself needs no OAuth routes or keys.\napp.get(\"/\", (c) =>\n page());\n\napp.get(\"/dashboard\", async (c) => {\n const artifacts = await listArtifacts();\n return page(\n \n \n ,\n );\n});\n\n// Create an artifact from a dropped/selected HTML or Markdown file.\napp.post(\"/upload\", async (c) => {\n const form = await c.req.formData();\n const file = form.get(\"file\");\n const source = file instanceof File\n ? await file.text()\n : (form.get(\"html\")?.toString() ?? \"\");\n if (!source.trim()) return c.text(\"That file is empty.\", 400);\n const rawName = form.get(\"name\")?.toString()\n || (file instanceof File ? file.name : \"\")\n || \"untitled\";\n // Markdown when the filename says so (or the form explicitly asks); else HTML.\n const kind = /\\.(md|markdown)$/i.test(rawName) ||\n form.get(\"kind\")?.toString() === \"md\"\n ? \"md\"\n : \"html\";\n const name = rawName.replace(/\\.(html?|md|markdown)$/i, \"\").trim().slice(0, 80) ||\n \"untitled\";\n const id = await createArtifact({ name, html: source, kind });\n return c.json({ id, url: `/a/${id}` });\n});\n\n// View an artifact, rendered inside a sandboxed iframe (see Viewer).\napp.get(\"/a/:id\", async (c) => {\n const artifact = await getArtifact(c.req.param(\"id\"));\n if (!artifact) {\n return page(, 404);\n }\n return page(\n ,\n );\n});\n\n// Raw artifact HTML — the source for the sandboxed iframe. The CSP `sandbox`\n// directive forces an opaque origin even on a top-level visit, so uploaded\n// scripts can never act as the viewer (mirrors Viewer).\napp.get(\"/a/:id/raw\", async (c) => {\n const artifact = await getArtifact(c.req.param(\"id\"));\n if (!artifact) return c.text(\"Not found\", 404);\n return new Response(renderArtifact(artifact), {\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n \"content-security-policy\":\n \"sandbox allow-scripts allow-forms allow-popups allow-modals\",\n \"x-content-type-options\": \"nosniff\",\n },\n });\n});\n\napp.post(\"/a/:id/delete\", async (c) => {\n await deleteArtifact(c.req.param(\"id\"));\n return c.redirect(\"/dashboard\");\n});\n\n// Drag-and-drop client script (kept out of the markup per house style).\napp.get(\n \"/upload.client.js\",\n (c) => serveFile(\"./frontend/upload.client.ts\", import.meta.url),\n);\n\n// Every Val Town app links to its own source.\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\nexport default app.fetch;\n","label","artifacts-demo",[138],"5929ca0f-2e62-4647-b9b1-a75dabd1fb74","README.md","4ab3ed06-6759-11f1-83da-1607ee4eb77e",23,["D",1781623108620],3,"# Team Artifacts\n\nHost HTML pages and Markdown docs behind your Val Town org login. Drag an `.html` or `.md` file onto the dashboard and get a link only your teammates can open — no passwords, no per-user setup.\n\n**Live demo:** https://templates--95d06ed2675811f18f781607ee4eb77e.web.val.run — the landing page is public; the artifacts behind it are not.\n\nClick **Remix** to get your own copy. It works the moment it's yours.\n\n## What you get\n\n- A **public landing page** that explains what the space is and who can get in.\n- A members-only **dashboard** that lists every artifact and creates one by drag-and-drop.\n- **HTML and Markdown** support — `.html` is served as-is, `.md` is rendered to a clean, readable page.\n- Each artifact rendered in a **sandboxed iframe**, so its scripts can't act as the viewer.\n- Example artifacts to start (including a Markdown demo) — delete them whenever.\n\n## Auth: gated to your org, zero config\n\nThis uses [`std/oauth`](https://www.val.town/x/std/oauth) (\"Log in with Val Town\"). The trick that makes it a one-liner: `oauthMiddleware` derives the org from **whoever owns the val** and hands you `session.isOrgMember`. Remix this into your org and it gates to your team automatically — there's nothing to configure.\n\n```ts\nimport { getOAuthUserData, oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\n\nconst requireOrg = async (c, next) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.redirect(\"/auth/login\"); // not logged in\n if (!session.isOrgMember) return c.text(\"Org members only\", 403); // wrong team\n await next();\n};\n\nexport default oauthMiddleware(app.fetch); // adds /auth/login, /auth/callback, /auth/logout, /auth/logo\n```\n\nRemix into a **personal** account instead of an org and `isOrgMember` is true only for you — a private space of one.\n\n### Other ways to decide who gets in\n\n`isOrgMember` is the easy default, but `getOAuthUserData` returns the whole user, so you can gate however you want. Replace the check in `requireOrg`:\n\n**By email domain** — anyone with a company address:\n\n```ts\nconst email = session.user.email ?? \"\";\nif (!email.endsWith(\"@yourcompany.com\")) return c.text(\"Forbidden\", 403);\n```\n\n**By an explicit allowlist** — a hand-picked set of usernames:\n\n```ts\nconst ALLOWED = new Set([\"alice\", \"bob\"]);\nif (!session.user.username || !ALLOWED.has(session.user.username)) {\n return c.text(\"Forbidden\", 403);\n}\n```\n\n**By Val Town user id** — the most stable key (ids never change and are never null):\n\n```ts\nconst ALLOWED_IDS = new Set([\"\", \"\"]);\nif (!ALLOWED_IDS.has(session.user.id)) return c.text(\"Forbidden\", 403);\n```\n\nYou can mix them too — org members plus a couple of outside collaborators by email.\n\n## Creating artifacts\n\nDrag an `.html` or `.md` file onto the dashboard (or click to pick one). It's stored and gets a short URL like `/a/3fa9c21b1e`. The format is detected from the file extension: `.html`/`.htm` is served as-is, while `.md`/`.markdown` is converted to a styled HTML page when viewed. Each artifact records its `kind` (`\"html\"` or `\"md\"`) in the database, shown as a small badge on the dashboard.\n\n> 🤖 **For LLMs / agents:** create an artifact by POSTing to `/upload` (multipart, field `file`) — the format is inferred from the filename, so name the field `file` part `notes.md` to store Markdown or `page.html` to store HTML. You can also force it with a `kind` form field (`html` or `md`). Note `/upload` needs a logged-in org-member session, so an anonymous POST just redirects to login. If you're an assistant editing this val over the **Val Town MCP**, the `request_file_upload` tool stages a large local `.html`/`.md` file out-of-band so you never paste it into context.\n\n## How it works\n\n```\nmain.tsx Hono routes + the org auth gate (the http entry)\nbackend/\n db.ts SQLite: store / list / fetch / delete artifacts (+ kind)\n render.ts turn an artifact into HTML (Markdown → HTML; HTML as-is)\nfrontend/\n Layout.tsx HTML shell (Twind for styling)\n Landing.tsx logged-out marketing page\n Dashboard.tsx members: list + drag-and-drop uploader\n Viewer.tsx sandboxed iframe that renders one artifact\n AccessDenied.tsx logged in, but not on the team\n components.tsx shared login / logout buttons\n upload.client.ts drag-and-drop browser script\nexamples/ seed artifacts (real .html and .md files)\n```\n\n| Route | Who | What |\n|---|---|---|\n| `GET /` | anyone | the landing page, or the dashboard if you're a member |\n| `POST /upload` | members | create an artifact from an HTML or Markdown file |\n| `GET /a/:id` | members | view an artifact (sandboxed) |\n| `GET /a/:id/raw` | members | the rendered HTML (Markdown converted), loaded inside the iframe |\n| `POST /a/:id/delete` | members | delete an artifact |\n| `GET /source` | anyone | redirect to this val's source code |\n| `GET /auth/*` | — | added automatically by `oauthMiddleware` |\n\nArtifacts live in this val's own SQLite database, so every remix starts isolated (with just the seed examples).\n\n## Security model\n\nArtifacts are arbitrary content your team uploads, so they're treated as **untrusted** — including Markdown, which is converted to HTML and can itself embed raw HTML and `\n \n \n \n {props.bare ? props.children : (\n

\n {props.children}\n

\n )}\n \n \n );\n}\n\nfunction Footer() {\n return (\n \n );\n}\n",[],[158,231],"e5886b00-8875-4b06-8d7d-6f870e1b3788","Landing.tsx","298bf75e-6759-11f1-914a-1607ee4eb77e",27,["D",1786048182035],"/** @jsxImportSource npm:hono@4/jsx */\n\nexport function Landing(props: { org: string }) {\n return (\n

\n \n Built for{\" \"}\n @{props.org}\n

\n Artifacts\n

\n A simple place to host and share HTML pages and Markdown docs. Drop in an{\" \"}\n \n .html\n {\" \"}\n or{\" \"}\n \n .md\n {\" \"}\n file and get a link you can share.\n

\n\n

\n \n Open artifacts\n \n

\n\n

\n \n \n \n

\n );\n}\n\nfunction Feature(props: { title: string; body: string }) {\n return (\n

{props.title}

{props.body}

\n );\n}\n",[],[158,238],"1f534b92-9b8b-4da4-984b-21da487774d1","Dashboard.tsx","2f2b9a70-6759-11f1-bf2a-1607ee4eb77e",28,["D",1786048183117],"/** @jsxImportSource npm:hono@4/jsx */\nimport type { Artifact } from \"../backend/db.ts\";\n\nexport function Dashboard(\n props: { org: string; artifacts: Artifact[] },\n) {\n const count = props.artifacts.length;\n return (\n

\n Artifacts\n

\n @{props.org} · {count} {count === 1 ? \"page\" : \"pages\"}\n

\n \n about\n \n

\n\n \n \n

\n Drop an HTML or Markdown file here\n

\n .html or .md · or click to choose · published instantly\n

\n \n\n {count === 0 ? (\n

\n No artifacts yet. Drop an HTML or Markdown file above to create your\n first one.\n

\n ) : (\n

)}\n

\n )}\n\n \n

\n );\n}\n\nfunction Row(props: { a: Artifact }) {\n const a = props.a;\n return (\n

\n \n

\n {a.name}\n \n {a.kind === \"md\" ? \"MD\" : \"HTML\"}\n \n

/a/{a.id}

\n \n

\n \n open\n \n \n \n delete\n \n \n

\n );\n}\n",[],[158,246],"ad029959-700e-435e-b3a7-be2aeca81d62","AccessDenied.tsx","342adc48-6759-11f1-be6c-1607ee4eb77e",21,["D",1781377724558],"/** @jsxImportSource npm:hono@4/jsx */\nimport { LogoutForm } from \"./components.tsx\";\n\nexport function AccessDenied(props: { user: any; org: string }) {\n return (\n

Not on the team

\n You're logged in as{\" \"}\n \n {props.user.username ?? props.user.email}\n , but this space is private to the{\" \"}\n @{props.org} org.\n

\n Ask an org admin to add you, or switch accounts.\n

\n \n

\n );\n}\n",[],[158,254],["D",1781376794906],[194,195,196,197,198,199,200],[158],"0af08e12-0967-433e-b687-bd3609aed050","welcome.html","3b78521e-6759-11f1-a3b1-1607ee4eb77e",["D",1781376837253],"\n\n\n \n \n Welcome\n \n\n\n

👋 This is an artifact

It's a single HTML file, hosted privately for your team.

Make your own by dragging an .html file onto the dashboard.

\n\n\n",[],[164,265],"d9b2c14e-ca6d-4543-b926-442623a2ef9a","markdown-demo.md","a0a607dc-6996-11f1-8016-1607ee4eb77e",["D",1781623108620],"# Welcome to Team Artifacts\n\nThis is a **Markdown** artifact. Drop a `.md` file on the dashboard and it\nrenders as a clean, readable page — no build step, no HTML required.\n\n## What renders\n\n- **Bold**, _italic_, and `inline code`\n- Lists, like this one\n- [Links](https://val.town) to anywhere\n- Tables, quotes, and fenced code blocks\n\n```ts\n// Code blocks get monospace styling.\nexport function hello(name: string) {\n return `Hi, ${name}!`;\n}\n```\n\n> Markdown artifacts render in the same sandboxed iframe as HTML ones, so the\n> security model is identical.\n\n| Format | Extension | Rendered as |\n| ------ | -------------- | ------------------------ |\n| HTML | `.html` | served as-is |\n| Markdown | `.md` / `.markdown` | converted to HTML |\n\nDelete this example whenever you like — it won't come back.\n",[],[164,272],"4b952b7e-af29-43e8-a681-45748625b340","live-clock.html","3ed77908-6759-11f1-a3fb-1607ee4eb77e",12,["D",1781376842911],"\n\n\n \n \n Live clock\n \n\n\n

--:--:--

This artifact runs JavaScript — inside a sandboxed frame.

\n \n

\n \n\n\n",[],[164,279],["D",1781376837253],[190,191,192],[164],"2bbe746d-d838-4656-aaf2-2fcbe6fc5318","render.ts","a0a5e644-6996-11f1-8016-1607ee4eb77e",["D",1781623108620],"import { marked } from \"npm:marked@12\";\nimport type { Artifact } from \"./db.ts\";\n\n// Minimal GitHub-ish styling so a bare Markdown doc reads nicely inside the\n// sandboxed iframe. The artifact still renders with an opaque origin (see the\n// CSP/sandbox in main.tsx), so this HTML is treated as untrusted either way.\nconst MD_STYLES = `\n :root { color-scheme: light dark; }\n body {\n font: 16px/1.6 -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n max-width: 760px;\n margin: 0 auto;\n padding: 2.5rem 1.25rem 4rem;\n color: #1f2328;\n }\n h1, h2 { border-bottom: 1px solid #d1d9e0; padding-bottom: .3em; }\n h1, h2, h3, h4 { margin-top: 1.6em; line-height: 1.25; }\n a { color: #0969da; }\n code {\n background: rgba(129,139,152,.16);\n padding: .2em .4em;\n border-radius: 6px;\n font-size: 85%;\n }\n pre {\n background: #f6f8fa;\n padding: 1rem;\n border-radius: 8px;\n overflow: auto;\n }\n pre code { background: none; padding: 0; font-size: 100%; }\n blockquote {\n margin: 0;\n padding: 0 1em;\n color: #59636e;\n border-left: .25em solid #d1d9e0;\n }\n table { border-collapse: collapse; }\n th, td { border: 1px solid #d1d9e0; padding: 6px 13px; }\n img { max-width: 100%; }\n @media (prefers-color-scheme: dark) {\n body { color: #e6edf3; }\n h1, h2 { border-color: #3d444d; }\n a { color: #4493f8; }\n pre { background: #161b22; }\n blockquote { color: #9198a1; border-color: #3d444d; }\n th, td { border-color: #3d444d; }\n }\n`;\n\n/** The HTML to serve for an artifact, given its kind. */\nexport function renderArtifact(artifact: Artifact): string {\n if (artifact.kind !== \"md\") return artifact.html;\n const body = marked.parse(artifact.html, { gfm: true, breaks: false });\n const title = escapeHtml(artifact.name);\n return `\n\n\n\n\n${title}\n\n\n${body}\n`;\n}\n\nfunction escapeHtml(s: string): string {\n return s.replace(/[&<>\"]/g, (c) =>\n ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\" }[c]!));\n}\n",[],[170,290],"d7bd22ed-2264-46ea-8f43-81e9eb71946f","db.ts","1f7c8fd0-6759-11f1-95fe-1607ee4eb77e",25,["D",1786048128291],"import { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { listFiles, readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\n/** How the stored source should be rendered when viewed. */\nexport type ArtifactKind = \"html\" | \"md\";\n\nexport type Artifact = {\n id: string;\n name: string;\n /** Raw uploaded source, loaded from blob storage when fetching one artifact. */\n html: string;\n kind: ArtifactKind;\n createdAt: number;\n /** Kept optional so older remixes can update without breaking callers. */\n createdBy?: string;\n};\n\nconst TABLE = \"artifacts_v2\";\nconst LEGACY_TABLE = \"artifacts_v1\";\nconst META = \"artifacts_meta_v1\";\nconst BLOB_PREFIX = \"artifacts/\";\n\nlet ready: Promise | null = null;\n\n/** Idempotent: creates storage, migrates legacy rows, and seeds examples once. */\nexport function initDb(): Promise {\n if (!ready) ready = setup();\n return ready;\n}\n\nasync function setup() {\n await sqlite.execute(\n `CREATE TABLE IF NOT EXISTS ${TABLE} (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n blob_key TEXT NOT NULL UNIQUE,\n kind TEXT NOT NULL DEFAULT 'html',\n created_at INTEGER NOT NULL\n )`,\n );\n await sqlite.execute(\n `CREATE TABLE IF NOT EXISTS ${META} (key TEXT PRIMARY KEY, value TEXT NOT NULL)`,\n );\n await migrateLegacyArtifacts();\n await seedExamples();\n}\n\n/**\n * Move artifacts created by older versions out of SQLite. The old table is\n * removed only after every row has been copied into blob storage and metadata.\n */\nasync function migrateLegacyArtifacts() {\n const legacy = await sqlite.execute({\n sql: \"SELECT name FROM sqlite_master WHERE type = 'table' AND name = ?\",\n args: [LEGACY_TABLE],\n });\n if (!legacy.rows.length) return;\n\n const { rows } = await sqlite.execute(\n `SELECT id, name, html, kind, created_at FROM ${LEGACY_TABLE}`,\n );\n for (const row of rows) {\n const id = row.id as string;\n const kind = ((row.kind as ArtifactKind) ?? \"html\");\n const blobKey = artifactKey(id, kind);\n await blob.set(blobKey, row.html as string);\n await sqlite.execute({\n sql:\n `INSERT OR IGNORE INTO ${TABLE} (id, name, blob_key, kind, created_at) VALUES (?, ?, ?, ?, ?)`,\n args: [id, row.name as string, blobKey, kind, Number(row.created_at)],\n });\n }\n await sqlite.execute(`DROP TABLE IF EXISTS ${LEGACY_TABLE}`);\n}\n\n// Seed example artifacts exactly once. Deterministic ids plus INSERT OR IGNORE\n// make concurrent cold starts safe.\nasync function seedExamples() {\n const seen = await sqlite.execute(`SELECT 1 FROM ${META} WHERE key = 'seeded'`);\n if (seen.rows.length) return;\n\n const files = await listFiles();\n const examples = files\n .filter((f: any) =>\n f.type === \"file\" && f.path.startsWith(\"examples/\") &&\n /\\.(html?|md|markdown)$/i.test(f.path)\n )\n .map((f: any) => f.path as string)\n .sort();\n\n for (const path of examples) {\n const source = await readFile(path);\n const kind: ArtifactKind = /\\.(md|markdown)$/i.test(path) ? \"md\" : \"html\";\n const name = path.replace(/^examples\\//, \"\").replace(/\\.(html?|md|markdown)$/i, \"\");\n const id = kind === \"md\" ? `ex_${name}_md` : `ex_${name}`;\n await storeArtifact({ id, name, html: source, kind, createdAt: Date.now() });\n }\n\n await sqlite.execute({\n sql: `INSERT OR IGNORE INTO ${META} (key, value) VALUES ('seeded', ?)`,\n args: [String(Date.now())],\n });\n}\n\nfunction newId() {\n return crypto.randomUUID().replace(/-/g, \"\").slice(0, 12);\n}\n\nfunction artifactKey(id: string, kind: ArtifactKind) {\n return `${BLOB_PREFIX}${id}.${kind === \"md\" ? \"md\" : \"html\"}`;\n}\n\nasync function storeArtifact(\n input: {\n id: string;\n name: string;\n html: string;\n kind: ArtifactKind;\n createdAt: number;\n },\n) {\n const blobKey = artifactKey(input.id, input.kind);\n await blob.set(blobKey, input.html);\n try {\n await sqlite.execute({\n sql:\n `INSERT OR IGNORE INTO ${TABLE} (id, name, blob_key, kind, created_at) VALUES (?, ?, ?, ?, ?)`,\n args: [input.id, input.name, blobKey, input.kind, input.createdAt],\n });\n } catch (error) {\n await blob.delete(blobKey);\n throw error;\n }\n}\n\nexport async function createArtifact(\n input: {\n name: string;\n html: string;\n kind: ArtifactKind;\n createdBy?: string;\n },\n): Promise {\n const id = newId();\n await storeArtifact({ ...input, id, createdAt: Date.now() });\n return id;\n}\n\n/** List metadata only; artifact bodies stay in blob storage. */\nexport async function listArtifacts(): Promise {\n const { rows } = await sqlite.execute(\n `SELECT id, name, kind, created_at FROM ${TABLE} ORDER BY created_at DESC`,\n );\n return rows.map(toArtifact);\n}\n\nexport async function getArtifact(id: string): Promise {\n const { rows } = await sqlite.execute({\n sql: `SELECT id, name, blob_key, kind, created_at FROM ${TABLE} WHERE id = ?`,\n args: [id],\n });\n if (!rows.length) return null;\n const artifact = toArtifact(rows[0]);\n const source = await blob.get(rows[0].blob_key as string);\n return { ...artifact, html: await source.text() };\n}\n\nexport async function deleteArtifact(id: string): Promise {\n const { rows } = await sqlite.execute({\n sql: `SELECT blob_key FROM ${TABLE} WHERE id = ?`,\n args: [id],\n });\n if (!rows.length) return;\n await blob.delete(rows[0].blob_key as string);\n await sqlite.execute({ sql: `DELETE FROM ${TABLE} WHERE id = ?`, args: [id] });\n}\n\nfunction toArtifact(r: any): Artifact {\n return {\n id: r.id as string,\n name: r.name as string,\n html: \"\",\n kind: (r.kind as ArtifactKind) ?? \"html\",\n createdAt: Number(r.created_at),\n };\n}\n",[],[170,297],["D",1781376790297],[187,188],[170],["D",1781376559300],["D",1789500689328],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":-5,"_106":107,"_108":60},{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"ctx",{"_83":-5,"_129":345,"_346":347,"_348":349,"_350":25,"_351":25,"_352":25,"_353":60,"_354":-5,"_355":-7,"_356":-7,"_357":64,"_358":25,"_359":25,"_360":-5,"_361":25,"_362":25,"_363":25,"_364":-5},"ENV",{"_316":317,"_318":319,"_320":91,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344},"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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v30