[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_243":244,"_245":246},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_108":89,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":26,"_123":124,"_125":24,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":26,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":24,"_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":26},"version",9,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":26,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_23":26},"previous","deleted",true,"deletedHere",false,"path","frontend/AccessDenied.tsx","latestPath","fileId","342adc48-6759-11f1-be6c-1607ee4eb77e","name","AccessDenied.tsx","fileType","script","content","/** @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","createdAt",["D",1781376825007],"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","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",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":-5,"_104":105,"_106":24},"branch",{"_13":88,"_32":89,"_43":42,"_90":44,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":45,"_97":98},"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=1789549199&sig=85ec03bbe2ae9af315fa5e89fceebe840b59020b3ec43df39e2ab37ef0d215ad","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":238,"_47":-5,"_48":26,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":24,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":239,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":240,"_83":241,"_85":242,"_87":26},"tree",[168,170,177],"files",[168,169,170,171,172,173,174,175,176,177],"counts",{"_158":62,"_159":139,"_160":136,"_161":162,"_163":164},"contents",[130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":152,"_32":153,"_30":154,"_135":-5,"_41":42,"_40":155,"_137":24,"_38":156,"_13":62,"_34":150,"_36":-5,"_23":26,"_142":-5,"_27":157},{"_43":145,"_32":146,"_30":147,"_135":-5,"_41":42,"_40":148,"_137":24,"_38":149,"_13":62,"_34":150,"_36":-5,"_23":26,"_142":-5,"_27":151},{"_43":133,"_32":134,"_30":57,"_135":-5,"_41":42,"_40":136,"_137":26,"_38":138,"_13":139,"_34":140,"_36":141,"_23":26,"_142":143,"_27":144},"aabfa83d-8d16-440a-91b9-c22d9fee0f38","main.tsx","parentId",2,"latest",["D",1781376687822],1,"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\";\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 file.\napp.post(\"/upload\", requireOrg, async (c) => {\n const form = await c.req.formData();\n const file = form.get(\"file\");\n const html = file instanceof File\n ? await file.text()\n : (form.get(\"html\")?.toString() ?? \"\");\n if (!html.trim()) return c.json({ error: \"Empty HTML\" }, 400);\n const rawName = form.get(\"name\")?.toString()\n || (file instanceof File ? file.name : \"\")\n || \"untitled\";\n const name = rawName.replace(/\\.html?$/i, \"\").trim().slice(0, 80) || \"untitled\";\n const user = c.get(\"user\");\n const id = await createArtifact({\n name,\n html,\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 — only ever loaded as the sandboxed iframe's source.\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(artifact.html, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\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",[134],"d7f9be9e-b52f-4fac-a791-c3a9eea8781e","frontend","84591506-8494-4a4c-bb02-86fe0fa9f7ec",4,["D",1781376794906],"directory",[146],"f21e7a0a-9b8d-4e09-be62-f7880b77ea61","backend","8e92c53c-11df-463e-aac7-0a8b38124988",3,["D",1781376790297],[153],"pulls","branches","forks","envVars",{"_165":62,"_167":62},"connections",{"_165":62,"_166":62},"count","unfilledCount","emptyCount",{"_43":152,"_32":153,"_30":154,"_135":-5,"_41":42,"_40":155,"_137":24,"_38":235,"_13":62,"_34":150,"_36":-5,"_23":26,"_142":-5,"_179":236,"_27":237},{"_43":228,"_32":229,"_30":230,"_135":154,"_41":42,"_40":155,"_137":26,"_38":231,"_13":62,"_34":35,"_36":232,"_23":26,"_142":-5,"_179":233,"_27":234},{"_43":145,"_32":146,"_30":147,"_135":-5,"_41":42,"_40":148,"_137":24,"_38":225,"_13":62,"_34":150,"_36":-5,"_23":26,"_142":-5,"_179":226,"_27":227},{"_43":221,"_32":33,"_30":31,"_135":147,"_41":42,"_40":14,"_137":26,"_38":222,"_13":62,"_34":35,"_36":37,"_23":26,"_142":-5,"_179":223,"_27":224},{"_43":213,"_32":214,"_30":215,"_135":147,"_41":42,"_40":216,"_137":26,"_38":217,"_13":62,"_34":35,"_36":218,"_23":26,"_142":-5,"_179":219,"_27":220},{"_43":205,"_32":206,"_30":207,"_135":147,"_41":42,"_40":208,"_137":26,"_38":209,"_13":62,"_34":35,"_36":210,"_23":26,"_142":-5,"_179":211,"_27":212},{"_43":198,"_32":199,"_30":200,"_135":147,"_41":42,"_40":148,"_137":24,"_38":201,"_13":62,"_34":35,"_36":202,"_23":26,"_142":-5,"_179":203,"_27":204},{"_43":190,"_32":191,"_30":192,"_135":147,"_41":42,"_40":193,"_137":26,"_38":194,"_13":62,"_34":35,"_36":195,"_23":26,"_142":-5,"_179":196,"_27":197},{"_43":182,"_32":183,"_30":184,"_135":147,"_41":42,"_40":185,"_137":26,"_38":186,"_13":62,"_34":35,"_36":187,"_23":26,"_142":-5,"_179":188,"_27":189},{"_43":133,"_32":134,"_30":57,"_135":-5,"_41":42,"_40":136,"_137":26,"_38":178,"_13":139,"_34":140,"_36":141,"_23":26,"_142":143,"_179":180,"_27":181},["D",1781376687822],"children",[],[134],"8bd07bfe-d32d-4c50-b61e-3ea3bd1f3c25","components.tsx","2463a970-6759-11f1-8517-1607ee4eb77e",5,["D",1781376798507],"/** @jsxImportSource npm:hono@4/jsx */\n\nexport function LoginButton() {\n return (\n \n $\"\"$ \n Log in with Val Town\n \n );\n}\n\nexport function LogoutForm(props: { label?: string }) {\n return (\n

\n \n {props.label ?? \"Log out\"}\n \n \n );\n}\n",[],[146,183],"78a2ee30-4039-442f-b8f2-95833611f3bf","Viewer.tsx","321c422a-6759-11f1-bfa9-1607ee4eb77e",8,["D",1781376821427],"/** @jsxImportSource npm:hono@4/jsx */\nimport type { Artifact } from \"../backend/db.ts\";\n\nexport function Viewer(props: { artifact?: Artifact; notFound?: boolean }) {\n if (props.notFound || !props.artifact) {\n return (\n

\n That artifact doesn't exist.{\" \"}\n Back to artifacts\n

\n );\n }\n const a = props.artifact;\n return (\n

\n \n ← all\n \n \n {a.name}\n \n \n by {a.createdBy}\n \n

\n \n

\n );\n}\n",[],[146,191],"b3c314e8-5a8b-4215-a3a1-0f48744aa917","Layout.tsx","2239ebe6-6759-11f1-96b7-1607ee4eb77e",["D",1781376794906],"/** @jsxImportSource npm:hono@4/jsx */\n\nexport function Layout(\n props: { title: string; bare?: boolean; children: any },\n) {\n return (\n \n \n \n \n {props.title}\n \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",[],[146,199],"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",[],[146,206],"1d9b46a9-c22d-46da-bde5-4fa09fcd8858","Dashboard.tsx","2f2b9a70-6759-11f1-bf2a-1607ee4eb77e",7,["D",1781376816624],"/** @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}\n \n

\n\n \n \n

\n Drop an HTML file here\n

\n or click to choose · published instantly to your team\n

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

\n No artifacts yet. Drop an HTML file above to create your 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

{a.name}

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

\n \n

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

\n );\n}\n",[],[146,214],"6f33c177-1c05-48b3-96b0-52365a95bdaf",["D",1781376825007],[],[146,33],["D",1781376794906],[171,172,173,174,175,176],[146],"1672de06-d6b1-4bd7-8805-c6f9f349aaba","db.ts","1f7c8fd0-6759-11f1-95fe-1607ee4eb77e",["D",1781376790297],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { listFiles, readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport type Artifact = {\n id: string;\n name: string;\n html: string;\n createdBy: string;\n createdAt: number;\n};\n\nconst TABLE = \"artifacts_v1\";\n\nlet ready: Promise | null = null;\n\n/** Idempotent: creates the table 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 created_by TEXT NOT NULL,\n created_at INTEGER NOT NULL\n )`,\n );\n await seedExamples();\n}\n\n// Seed examples/*.html on first run so a fresh remix isn't empty. These are\n// real files in the val — edit or delete them and they won't come back.\nasync function seedExamples() {\n const { rows } = await sqlite.execute(`SELECT COUNT(*) AS n FROM ${TABLE}`);\n if (Number(rows[0].n) > 0) return;\n const files = await listFiles();\n const examples = files\n .filter((f: any) =>\n f.type === \"file\" && f.path.startsWith(\"examples/\") &&\n f.path.endsWith(\".html\")\n )\n .map((f: any) => f.path as string)\n .sort();\n for (const path of examples) {\n const html = await readFile(path);\n const name = path.replace(/^examples\\//, \"\").replace(/\\.html$/, \"\");\n await createArtifact({ name, html, createdBy: \"example\" });\n }\n}\n\nfunction newId() {\n return crypto.randomUUID().replace(/-/g, \"\").slice(0, 10);\n}\n\nexport async function createArtifact(\n input: { name: string; html: string; createdBy: string },\n): Promise {\n const id = newId();\n await sqlite.execute({\n sql:\n `INSERT INTO ${TABLE} (id, name, html, created_by, created_at) VALUES (?, ?, ?, ?, ?)`,\n args: [id, input.name, input.html, 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, 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, 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 createdBy: r.created_by as string,\n createdAt: Number(r.created_at),\n };\n}\n",[],[153,229],["D",1781376790297],[169],[153],["D",1781376559300],["D",1789500689328],{"_99":98,"_107":103},{"_99":98,"_100":101,"_102":103,"_18":-5,"_104":105,"_106":24},{"_13":88,"_32":89,"_43":42,"_90":44,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":45,"_97":98},"ctx",{"_81":-5,"_127":276,"_277":278,"_279":280,"_281":26,"_282":26,"_283":26,"_284":24,"_285":-5,"_286":-7,"_287":-7,"_288":62,"_289":26,"_290":26,"_291":-5,"_292":26,"_293":26,"_294":26,"_295":-5},"ENV",{"_247":248,"_249":250,"_251":89,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275},"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 · v9