[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_309":310,"_311":312},"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",25,"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","backend/db.ts","latestPath","fileId","1f7c8fd0-6759-11f1-95fe-1607ee4eb77e","name","db.ts","fileType","script","content","import { 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: HTML for kind \"html\", Markdown for kind \"md\". */\n html: string;\n kind: ArtifactKind;\n createdBy: string;\n createdAt: number;\n};\n\nconst TABLE = \"artifacts_v1\";\nconst META = \"artifacts_meta_v1\";\n\nlet ready: Promise | null = null;\n\n/** Idempotent: creates the tables and seeds the example artifacts 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 html TEXT NOT NULL,\n kind TEXT NOT NULL DEFAULT 'html',\n created_by TEXT NOT NULL,\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 seedExamples();\n}\n\n// Seed example artifacts exactly once, ever — tracked with a marker row, not\n// \"is the table empty?\", so deleting the examples keeps them gone. Each example\n// gets a deterministic id inserted with OR IGNORE, so two isolates cold-starting\n// at the same time can't create duplicates. Markdown ids carry a \"_md\" suffix so\n// an example.html and example.md with the same basename never collide.\nasync function seedExamples() {\n const seen = await sqlite.execute(`SELECT 1 FROM ${META} WHERE key = 'seeded'`);\n if (seen.rows.length) return;\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 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 sqlite.execute({\n sql:\n `INSERT OR IGNORE INTO ${TABLE} (id, name, html, kind, created_by, created_at) VALUES (?, ?, ?, ?, ?, ?)`,\n args: [id, name, source, kind, \"example\", 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\nexport async function createArtifact(\n input: { name: string; html: string; kind: ArtifactKind; createdBy: string },\n): Promise {\n const id = newId();\n await sqlite.execute({\n sql:\n `INSERT INTO ${TABLE} (id, name, html, kind, created_by, created_at) VALUES (?, ?, ?, ?, ?, ?)`,\n args: [id, input.name, input.html, input.kind, input.createdBy, Date.now()],\n });\n return id;\n}\n\n/** List metadata only (no html) for the dashboard. */\nexport async function listArtifacts(): Promise {\n const { rows } = await sqlite.execute(\n `SELECT id, name, kind, created_by, 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:\n `SELECT id, name, html, kind, created_by, created_at FROM ${TABLE} WHERE id = ?`,\n args: [id],\n });\n if (!rows.length) return null;\n return { ...toArtifact(rows[0]), html: rows[0].html as string };\n}\n\nexport async function deleteArtifact(id: string): Promise {\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 createdBy: r.created_by as string,\n createdAt: Number(r.created_at),\n };\n}\n","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","createdAt",["D",1786048128291],"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=1789545599&sig=2316df07e67031dd48e537f6ce0c4c14b92716fed790ec83ecf27974cc65aa31","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":304,"_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":305,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":306,"_85":307,"_87":308,"_89":25},"tree",[185,188,192,200,201],"files",[185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201],"counts",{"_173":64,"_174":175,"_176":177,"_178":179,"_180":181},"contents",[132,133,134,135,136],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":168,"_32":169,"_30":170,"_139":-5,"_42":43,"_41":143,"_141":60,"_39":171,"_13":64,"_34":160,"_36":-5,"_24":25,"_146":-5,"_27":172},{"_44":162,"_32":163,"_30":164,"_139":-5,"_42":43,"_41":165,"_141":60,"_39":166,"_13":64,"_34":160,"_36":-5,"_24":25,"_146":-5,"_27":167},{"_44":155,"_32":156,"_30":157,"_139":-5,"_42":43,"_41":158,"_141":60,"_39":159,"_13":64,"_34":160,"_36":-5,"_24":25,"_146":-5,"_27":161},{"_44":149,"_32":150,"_30":151,"_139":-5,"_42":43,"_41":140,"_141":25,"_39":152,"_13":143,"_34":20,"_36":153,"_24":25,"_146":-5,"_27":154},{"_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},"07cd1383-1cce-44da-8a0b-67d449c8e4ae","main.tsx","parentId",23,"latest",["D",1781623108620],3,"http","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\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 { Layout } from \"./frontend/Layout.tsx\";\nimport { Landing } from \"./frontend/Landing.tsx\";\nimport { Dashboard } from \"./frontend/Dashboard.tsx\";\nimport { Viewer } from \"./frontend/Viewer.tsx\";\nimport { AccessDenied } from \"./frontend/AccessDenied.tsx\";\nimport { renderArtifact } from \"./backend/render.ts\";\n\n// The org this app gates to = whoever owns the val. Remix it into your own org\n// and it automatically becomes private to your team — nothing to configure.\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// Require a logged-in member of this val's org. Gates every read/write route.\nconst requireOrg = async (c: any, next: any) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.redirect(\"/auth/login\");\n if (!session.isOrgMember) {\n return page(\n \n \n ,\n 403,\n );\n }\n c.set(\"user\", session.user);\n await next();\n};\n\n// Public landing → dashboard for members, marketing for everyone else.\napp.get(\"/\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) {\n return page();\n }\n if (!session.isOrgMember) {\n return page(\n \n \n ,\n 403,\n );\n }\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\", requireOrg, 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 user = c.get(\"user\");\n const id = await createArtifact({\n name,\n html: source,\n kind,\n createdBy: user.username ?? user.id,\n });\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\", requireOrg, 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 the\n// artifact's scripts can never act as the logged-in viewer (mirrors Viewer).\napp.get(\"/a/:id/raw\", requireOrg, 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\", requireOrg, async (c) => {\n await deleteArtifact(c.req.param(\"id\"));\n return c.redirect(\"/\");\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 oauthMiddleware(app.fetch);\n","label","artifacts-demo",[138],"5929ca0f-2e62-4647-b9b1-a75dabd1fb74","README.md","4ab3ed06-6759-11f1-83da-1607ee4eb77e",["D",1781623108620],"# 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",[],[156,233],"ac07145a-6002-4124-a79c-4484e059545a","Landing.tsx","298bf75e-6759-11f1-914a-1607ee4eb77e",6,["D",1781376807190],"/** @jsxImportSource npm:hono@4/jsx */\nimport { LoginButton } from \"./components.tsx\";\n\nexport function Landing(props: { org: string }) {\n return (\n

\n \n Private to the{\" \"}\n @{props.org} team\n

\n Artifacts\n

\n A private place to host and share HTML pages with your team. Drop in an{\" \"}\n \n .html\n {\" \"}\n file and get a link only your teammates can open.\n

\n\n

\n \n

\n\n

\n \n \n \n

\n\n

Who can get in?

\n Access is controlled by Val Town org membership. When you log in, this\n app checks whether you belong to{\" \"}\n @{props.org}. Members see every\n artifact; everyone else is turned away. No passwords to share or rotate.\n

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

{props.title}

{props.body}

\n );\n}\n",[],[156,240],"a5434eb3-d7f3-4d2a-bc3c-40b284447b40","Dashboard.tsx","2f2b9a70-6759-11f1-bf2a-1607ee4eb77e",["D",1781623108620],"/** @jsxImportSource npm:hono@4/jsx */\nimport type { Artifact } from \"../backend/db.ts\";\nimport { LogoutForm } from \"./components.tsx\";\n\nexport function Dashboard(\n props: { user: any; 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 {props.user.username ?? props.user.email}\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 to your team\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

by {a.createdBy} · /a/{a.id}

\n \n

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

\n );\n}\n",[],[156,248],"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",[],[156,255],["D",1781376794906],[193,194,195,196,197,198,199],[156],"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",[],[163,266],"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",[],[163,273],"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",[],[163,280],["D",1781376837253],[189,190,191],[163],"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",[],[169,291],"d7bd22ed-2264-46ea-8f43-81e9eb71946f",["D",1786048128291],[],[169,33],["D",1781376790297],[186,187],[169],["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":342,"_343":344,"_345":346,"_347":25,"_348":25,"_349":25,"_350":60,"_351":-5,"_352":-7,"_353":-7,"_354":64,"_355":25,"_356":25,"_357":-5,"_358":25,"_359":25,"_360":25,"_361":-5},"ENV",{"_313":314,"_315":316,"_317":91,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341},"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 · v25