[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_218":219,"_220":221},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":58,"_122":-5,"_123":-5,"_124":125},"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":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",51,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","blob-admin.tsx","latestPath","fileId","561d0752-7fc0-11f1-8a32-1607ee4eb77e","name","fileType","script","content","/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/\nimport { Hono } from \"npm:hono@4.0.8\";\nimport { jsxRenderer } from \"npm:hono@4.0.8/jsx-renderer\";\nimport { HTTPException } from \"npm:hono@4.0.8/http-exception\";\n\nimport { BlobAdminOptions, syntaxHighlight, viewerCss } from \"./helper.ts\";\n\nconst ActionLink = ({ href, label }: { href: string; label: string }) => (\n \n {label}\n \n);\n\n/**\n * Builds a ready-to-serve Hono app for listing, creating, viewing, editing,\n * uploading to, downloading from, and deleting blobs.\n *\n * ⚠️ Security: this app has NO authentication of its own. Anyone who can\n * reach it can read and delete every blob in the store you pass in. Always\n * wrap the returned app's `fetch` in an auth layer before exporting it as a\n * val's default handler — see the README for the recommended pattern.\n */\nexport function createBlobAdmin(\n { blob, valName = \"Your Val's\" }: BlobAdminOptions,\n) {\n const app = new Hono();\n\n app.use(\n jsxRenderer(({ children }) => (\n \n \n {valName} Blob Admin\n \n \n \n

{children}

\n \n \n )),\n );\n\n // --- Home: table of every blob in the store ---\n app.get(\"/\", async (c) => {\n const blobs = await blob.list();\n\n return c.render(\n

`{valName}` Blob Admin

\n\n

\n New Blob\n Upload Blob\n

\n\n \n \n \n \n \n \n \n \n \n \n \n \n {blobs.map((b) => {\n const key = encodeURIComponent(b.key);\n return (\n \n \n \n \n \n \n \n \n );\n })}\n \n

Name	Size (kb)	Last Modified	Edit	Delete	Download
\n {b.key}\n	{Math.round(b.size / 1000)}	\n {new Date(b.lastModified).toLocaleString(\"en-CA\", {\n timeZone: \"Canada/Eastern\",\n dateStyle: \"short\",\n timeStyle: \"short\"\n })}\n

,\n );\n });\n\n // --- Create a blob from a text field ---\n app.get(\"/create\", (c) =>\n c.render(\n

\n Key\n \n Content\n

\n        <input type=\"submit\" value=\"Create\" />\n      </form>,\n    ));\n\n  app.post(\"/create\", async (c) => {\n    const { key, content } = await c.req.parseBody() as {\n      key: string;\n      content: string;\n    };\n\n    const alreadyExists = await blob.get(key).then(() => true, () => false);\n    if (alreadyExists) {\n      throw new HTTPException(400, { message: `key ${key} already exists` });\n    }\n\n    await blob.set(key, content);\n    return c.redirect(\"/\");\n  });\n\n  // --- Upload a file directly as a blob (key = file name) ---\n  app.get(\"/upload\", (c) =>\n    c.render(\n      <form method=\"POST\" enctype=\"multipart/form-data\">\n        <input name=\"file\" type=\"file\" />\n        <input type=\"submit\" value=\"Upload\" />\n      </form>,\n    ));\n\n  app.post(\"/upload\", async (c) => {\n    const { file } = await c.req.parseBody();\n    if (!(file instanceof File)) {\n      return c.text(\"Invalid file\", 400);\n    }\n\n    await blob.set(file.name, await file.arrayBuffer());\n    return c.redirect(\"/\");\n  });\n\n  // --- View a blob's content, pretty-printed and highlighted if it's JSON ---\n  app.get(\"/view/:key\", async (c) => {\n    const key = c.req.param(\"key\");\n    const text = await (await blob.get(key)).text();\n\n    let prettyJson: string | undefined;\n    try {\n      prettyJson = JSON.stringify(JSON.parse(text), null, 2);\n    } catch {\n      // Not valid JSON — fall back to plain text rendering below.\n    }\n\n    return c.render(\n      <div>\n        <style>{viewerCss}</style>\n        <h1>{key}</h1>\n        {prettyJson\n          ? (\n            <pre\n              dangerouslySetInnerHTML={{ __html: syntaxHighlight(prettyJson) }}\n            />\n          )\n          : <pre>{text + \"\\n\"}</pre>}\n      </div>,\n    );\n  });\n\n  // --- Edit a blob's content, or rename its key ---\n  app.get(\"/edit/:key\", async (c) => {\n    const key = c.req.param(\"key\");\n    const content = await (await blob.get(key)).text();\n\n    return c.render(\n      <form method=\"POST\">\n        <input name=\"new_key\" value={key} />\n        <textarea name=\"content\">{content}

\n \n

404: Blob Not Found

\n No blob exists with the key {blobKey}.\n

\n ← Back to all blobs\n

\n);\n\n/**\n * Builds a ready-to-serve Hono app for listing, creating, viewing, editing,\n * uploading to, downloading from, and deleting blobs.\n *\n * ⚠️ Security: this app has NO authentication of its own. Anyone who can\n * reach it can read and delete every blob in the store you pass in. Always\n * wrap the returned app's `fetch` in an auth layer before exporting it as a\n * val's default handler — see the README for the recommended pattern.\n */\nexport function createBlobAdmin(\n { blob, valName = \"Your Val's\" }: BlobAdminOptions,\n) {\n const app = new Hono();\n\n app.use(\n jsxRenderer(({ children }) => (\n \n \n {valName} Blob Admin\n \n \n \n

{children}

\n \n \n )),\n );\n\n // --- Home: table of every blob in the store ---\n app.get(\"/\", async (c) => {\n const blobs = await blob.list();\n\n return c.render(\n

`{valName}` Blob Admin

\n\n

\n New Blob\n Upload Blob\n

\n\n \n \n \n \n \n \n \n \n \n \n \n \n {blobs.map((b) => {\n const key = encodeURIComponent(b.key);\n return (\n \n \n \n \n \n \n \n \n );\n })}\n \n

Name	Size (kb)	Last Modified	Edit	Delete	Download
\n {b.key}\n	{Math.round(b.size / 1000)}	\n {new Date(b.lastModified).toLocaleString(\"en-CA\", {\n timeZone: \"Canada/Eastern\",\n dateStyle: \"short\",\n timeStyle: \"short\"\n })}\n

,\n );\n });\n\n // --- Create a blob from a text field ---\n app.get(\"/create\", (c) =>\n c.render(\n

\n Key\n \n Content\n

\n \n

,\n );\n });\n\n app.post(\"/edit/:key\", async (c) => {\n const key = c.req.param(\"key\");\n const { content, new_key } = await c.req.parseBody() as {\n content: string;\n new_key: string;\n };\n\n await blob.set(key, content);\n if (new_key !== key) {\n await blob.move(key, new_key);\n }\n return c.redirect(\"/\");\n });\n\n // --- Delete a blob (with a confirmation step) ---\n app.get(\"/delete/:key\", (c) => {\n const key = c.req.param(\"key\");\n return c.render(\n ,\n );\n });\n\n app.post(\"/delete/:key\", async (c) => {\n await blob.delete(c.req.param(\"key\"));\n return c.redirect(\"/\");\n });\n\n // --- Download a blob's raw content ---\n app.get(\"/download/:key\", (c) => blob.get(c.req.param(\"key\")));\n\n return app;\n}","createdAt",["D",1784245265403],"branchVersion","branchId","262386e9-a9ac-46f9-a03b-d01f8b617a46","id","0b45b565-af42-463d-85fb-fdef24b7b40d","val_scoped_blob_admin",["D",1784053743735],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","354e78a1-5c0c-4900-b140-d249df71fc38","pinnedFileId","601f1b10-7fc9-11f1-8358-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","7418eb80-7666-4f00-aa43-5c71d89e5806","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",64,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","gwoods22","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJmOGRvdmRqYzZXdW5MWFVsZzFCSjRUcTVsZiIsImluaXRpYWxzIjoiR1cifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":214,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":215,"_80":216,"_82":217,"_84":25},"tree",[189,190,191,192,193,194],"files",[189,190,191,192,193,194],"counts",{"_179":62,"_180":176,"_181":62,"_182":183,"_184":185},"contents",[126,127,128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":171,"_32":172,"_30":173,"_135":-5,"_41":42,"_40":174,"_137":58,"_38":175,"_13":176,"_33":20,"_35":177,"_24":25,"_142":-5,"_27":178},{"_43":167,"_32":28,"_30":31,"_135":-5,"_41":42,"_40":14,"_137":25,"_38":168,"_13":169,"_33":34,"_35":37,"_24":25,"_142":-5,"_27":170},{"_43":160,"_32":161,"_30":56,"_135":-5,"_41":42,"_40":162,"_137":25,"_38":163,"_13":164,"_33":34,"_35":165,"_24":25,"_142":-5,"_27":166},{"_43":152,"_32":153,"_30":154,"_135":-5,"_41":42,"_40":155,"_137":58,"_38":156,"_13":157,"_33":34,"_35":158,"_24":25,"_142":-5,"_27":159},{"_43":144,"_32":145,"_30":146,"_135":-5,"_41":42,"_40":147,"_137":58,"_38":148,"_13":149,"_33":140,"_35":150,"_24":25,"_142":-5,"_27":151},{"_43":132,"_32":133,"_30":134,"_135":-5,"_41":42,"_40":136,"_137":25,"_38":138,"_13":139,"_33":140,"_35":141,"_24":25,"_142":-5,"_27":143},"04309f6e-88cb-412a-8e27-4f612e38c9e2","minimal.tsx","e414a18c-7fb1-11f1-a5ef-1607ee4eb77e","parentId",47,"latest",["D",1784218764026],6,"http","/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/\nimport { modifyFetchHandler } from \"https://esm.town/v/andreterron/codeOnValTown\";\nimport { passwordAuth } from \"https://esm.town/v/pomdtr/password_auth/main.tsx\";\nimport { verifyToken } from \"https://esm.town/v/pomdtr/verifyToken\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono@4.0.8\";\nimport { jsxRenderer } from \"npm:hono@4.0.8/jsx-renderer\";\nimport { HTTPException } from \"npm:hono@4.0.8/http-exception\";\n\nconst app = new Hono(), val = parseVal(import.meta.url), enc = encodeURIComponent;\nconst A = ({ href, label }: { href: string; label: string }) => {label};\nconst css = `pre{outline:1px solid #ccc;padding:5px;margin:15px;white-space:pre-wrap}.string{color:green}.number{color:darkorange}.boolean{color:blue}.null{color:magenta}.key{color:red}`;\nconst hl = (j: string) => j.replace(/&/g, \"&\").replace(//g, \">\").replace(/(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g, (m) => `${m}`);\n\napp.use(jsxRenderer(({ children }) => {val.name} Blob Admin

{children}

));\n\napp.get(\"/\", async (c) => c.render(

`{val.name}` Blob Admin

New Blob Upload Blob

{(await blob.list()).map((b) => { const k = enc(b.key); return ; })}

Name	Size (kb)	Last Modified	Edit	Delete	Download
{b.key}	{Math.round(b.size / 1000)}	{new Date(b.lastModified).toLocaleString(\"en-CA\",{timeZone:\"Canada/Eastern\",dateStyle:\"short\",timeStyle:\"short\"})}

));\n\napp.get(\"/create\", (c) => c.render(

KeyContent

<input type=\"submit\" value=\"Create\" /></form>));\napp.post(\"/create\", async (c) => {\n  const { key, content } = await c.req.parseBody() as { key: string; content: string };\n  const exists = await blob.get(key).then(() => true, () => false);\n  if (exists) throw new HTTPException(400, { message: `key ${key} already exists` });\n  await blob.set(key, content);\n  return c.redirect(\"/\");\n});\n\napp.get(\"/upload\", (c) => c.render(<form method=\"POST\" enctype=\"multipart/form-data\"><input name=\"file\" type=\"file\" /><input type=\"submit\" value=\"Upload\" /></form>));\napp.post(\"/upload\", async (c) => {\n  const { file } = await c.req.parseBody();\n  if (!(file instanceof File)) return c.text(\"Invalid file\", 400);\n  await blob.set(file.name, await file.arrayBuffer());\n  return c.redirect(\"/\");\n});\n\napp.get(\"/view/:key\", async (c) => {\n  const key = c.req.param(\"key\"), text = await (await blob.get(key)).text();\n  let j: string, isJson = true;\n  try { j = JSON.stringify(JSON.parse(text), null, 2); } catch { isJson = false; }\n  return c.render(<div><style>{css}</style><h1>{key}</h1>{isJson ? <pre dangerouslySetInnerHTML={{ __html: hl(j!) }} /> : <pre>{text + \"\\n\"}</pre>}</div>);\n});\n\napp.get(\"/edit/:key\", async (c) => {\n  const key = c.req.param(\"key\");\n  return c.render(<form method=\"POST\"><input name=\"new_key\" value={key} /><textarea name=\"content\">{await (await blob.get(key)).text()}

);\n});\napp.post(\"/edit/:key\", async (c) => {\n const key = c.req.param(\"key\"), { content, new_key } = await c.req.parseBody() as { content: string; new_key: string };\n await blob.set(key, content);\n if (new_key !== key) await blob.move(key, new_key);\n return c.redirect(\"/\");\n});\n\napp.get(\"/delete/:key\", (c) => c.render());\napp.post(\"/delete/:key\", async (c) => { await blob.delete(c.req.param(\"key\")); return c.redirect(\"/\"); });\n\napp.get(\"/download/:key\", (c) => blob.get(c.req.param(\"key\")));\n\nexport default modifyFetchHandler(passwordAuth(app.fetch, { verifyPassword: verifyToken }));","label",[133],"a488d26b-0a96-4723-b4a4-fad130a927f9","main.tsx","fd8ab606-7fb1-11f1-aae8-1607ee4eb77e",43,["D",1784218604924],8,"/**\n * Val-scoped Blob Admin — standalone demo / your personal admin panel.\n *\n * This file wires `createBlobAdmin()` up to THIS val's own project-scoped\n * blob storage and puts it behind Val Town's password auth (sign in with\n * your own Val Town API token — see README for details).\n *\n * Want this admin UI in your OWN val instead of copy-pasting this file?\n * See the README for the ~6-line snippet you need.\n */\n/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/\nimport { modifyFetchHandler } from \"https://esm.town/v/andreterron/codeOnValTown\";\nimport { passwordAuth } from \"https://esm.town/v/pomdtr/password_auth/main.tsx\";\nimport { verifyToken } from \"https://esm.town/v/pomdtr/verifyToken\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\"; // val-scoped blobs\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nimport { createBlobAdmin } from \"./blob-admin.tsx\";\n\nconst val = parseVal(import.meta.url);\n\nconst app = createBlobAdmin({ blob, valName: val.name });\n\nexport default modifyFetchHandler(\n passwordAuth(app.fetch, { verifyPassword: verifyToken }),\n);",[145],"c275217a-f16f-4f0b-a0d9-7a28d161cdd0","helper.ts","48a4b9e4-7fc0-11f1-994f-1607ee4eb77e",44,["D",1784218626069],9,"/**\n * Shared types + small utilities used by the blob admin UI.\n */\n\n/** One entry returned by a blob store's `list()`. */\ninterface BlobListItem {\n key: string;\n size: number;\n lastModified: string;\n}\n\n/**\n * Shape of the blob client the admin UI needs. This matches Val Town's own\n * std blob modules, so you can pass either one straight in without wrapping\n * anything:\n *\n * import { blob } from \"https://esm.town/v/std/blob/main.ts\"; // val-scoped\n * import { blob } from \"https://esm.town/v/std/blob/global.ts\"; // account-global\n */\ninterface BlobStore {\n list(prefix?: string): Promise;\n get(key: string): Promise;\n set(key: string, value: BodyInit): Promise;\n delete(key: string): Promise;\n move(previous: string, next: string): Promise;\n}\n\nexport interface BlobAdminOptions {\n /**\n * The blob client this admin panel reads/writes/deletes from. Pass in\n * your OWN val's blob import — the panel only ever touches whatever\n * store you give it, never reaches out and grabs one itself:\n *\n * import { blob } from \"https://esm.town/v/std/blob/main.ts\"; // val-scoped (recommended)\n * import { blob } from \"https://esm.town/v/std/blob/global.ts\"; // account-global\n */\n blob: BlobStore;\n /** Shown in the page title and header. Defaults to \"Blob Admin\". */\n valName?: string;\n}\n\n// --- JSON syntax highlighting for the blob viewer ---\n// No dependencies — just regex-based token wrapping, rendered with `viewerCss`.\n\nexport const viewerCss = `\npre {\n outline: 1px solid #ccc;\n padding: 5px;\n margin: 15px;\n white-space: pre-wrap;\n}\n.string { color: green; }\n.number { color: darkorange; }\n.boolean { color: blue; }\n.null { color: magenta; }\n.key { color: red; }`;\n\n// Matches JSON strings (incl. object keys), booleans, null, and numbers.\nconst JSON_TOKEN =\n /(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g;\n\n/** Wraps each JSON token in a `` so `viewerCss` can color it. */\nexport function syntaxHighlight(json: string): string {\n const escaped = json\n .replace(/&/g, \"&\")\n .replace(//g, \">\");\n\n return escaped.replace(JSON_TOKEN, (match) => {\n let cls = \"number\";\n if (/^\"/.test(match)) {\n cls = /:$/.test(match) ? \"key\" : \"string\";\n } else if (/true|false/.test(match)) {\n cls = \"boolean\";\n } else if (/null/.test(match)) {\n cls = \"null\";\n }\n return `${match}`;\n });\n}",[153],"36d62460-b908-49d6-acef-de3630ce0df0","example.tsx",49,["D",1784235867930],3,"/**\n * EXAMPLE: this is the full snippet you'd put in your own val to get a\n * blob admin panel for your OWN blobs — no copy-pasting the full app.\n *\n * Swap the import path below for the real one:\n * https://esm.town/v/gwoods22/val_scoped_blob_admin/blob-admin.tsx\n */\n/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/\nimport { passwordAuth } from \"https://esm.town/v/pomdtr/password_auth/main.tsx\";\nimport { verifyToken } from \"https://esm.town/v/pomdtr/verifyToken\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\"; // your val's own blobs\nimport { createBlobAdmin } from \"https://esm.town/v/gwoods22/val_scoped_blob_admin/blob-admin.tsx\";\n\nconst app = createBlobAdmin({ blob, valName: \"My App's\" });\n\n// createBlobAdmin has no auth of its own — always wrap it before exporting.\nexport default passwordAuth(app.fetch, { verifyPassword: verifyToken });\n",[161],"de975232-974b-40d5-abb9-6852814d73aa",["D",1784245265403],15,[28],"354763c9-9a69-410a-9109-0f303e0c6ba6","README.md","79d75cea-8003-11f1-8c88-1607ee4eb77e",50,["D",1784235885039],1,"# Val-Scoped Blob Admin\n\nA little admin UI for browsing, creating, viewing, editing, uploading to,\ndownloading from, and deleting [Val Town blobs](https://docs.val.town/std/blob) —\nright from your browser.\n\nThis is a fork of Steve Krouse's\n[Global Blob Admin](https://www.val.town/x/stevekrouse/blob_admin_app), updated to:\n\n- add **JSON syntax highlighting** when viewing a blob (numbers, strings, keys,\n booleans, and `null` are colored)\n- work against **val-scoped** blob storage (`std/blob/main.ts`) instead of only\n account-global blobs, so you can run one of these per-project and it only\n ever sees that project's blobs\n\n## How it's organized\n\n| File | What it does |\n| ------------------- | -------------------------------------------------------------------------------------------------- |\n| `helper.ts` | Shared types (`BlobStore`, `BlobAdminOptions`) + the JSON syntax highlighter. Plain TS, no Val Town–specific code. |\n| `blob-admin.tsx` | `createBlobAdmin()` — builds the Hono app (all the routes/pages). This is the reusable part. |\n| `main.tsx` | Standalone demo: wires `createBlobAdmin()` to this val's own blobs, behind password auth. This is what's deployed at this val's URL. |\n| `example.tsx` | The exact snippet you'd copy into your own val (see below). |\n| `minimal.tsx` | A single-file, compact version of the same app for quick reference/remixing without the multi-file split. |\n\nThe refactor's whole point is that `blob-admin.tsx` doesn't know anything\nabout *this* val — you give it a blob client and it gives you back a Hono app.\n`main.tsx` is just one particular way of using it.\n\n## Using this in your own val\n\nYou don't need to copy the full app. Import `createBlobAdmin` and pass it\n**your own val's blob import** — that's the whole integration:\n\n```tsx\n/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/\nimport { passwordAuth } from \"https://esm.town/v/pomdtr/password_auth/main.tsx\";\nimport { verifyToken } from \"https://esm.town/v/pomdtr/verifyToken\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\"; // your val's own blobs\nimport { createBlobAdmin } from \"https://esm.town/v/gwoods22/val_scoped_blob_admin/blob-admin.tsx\";\n\nconst app = createBlobAdmin({ blob, valName: \"My App's\" });\n\n// createBlobAdmin has no auth of its own — always wrap it before exporting.\nexport default passwordAuth(app.fetch, { verifyPassword: verifyToken });\n```\n\nThat's it — no copy-pasting the routes, the JSX, or the syntax highlighter.\nSee `example.tsx` in this val for the same snippet, ready to remix.\n\n### Why you pass in your own `blob`\n\n`createBlobAdmin()` takes a `blob` client as a required option instead of\nimporting one itself. Two reasons, both about security:\n\n1. **Scoping.** Val Town's `std/blob/main.ts` import is scoped to *the val\n it's imported into* — when your val imports it, it can only ever reach\n your val's blobs. If this library imported its own `blob` client instead,\n every val using it would be sharing (and could accidentally clobber) the\n same storage.\n2. **No hidden network access.** The library never reaches out on its own —\n it only ever touches whatever store object you hand it. You can audit\n exactly what it does to your data by reading `blob-admin.tsx`.\n\nIf you'd rather manage blobs globally across your whole account, swap the\nimport for `https://esm.town/v/std/blob/global.ts` — same shape, so nothing\nelse changes.\n\n### Add your own auth\n\n`createBlobAdmin()` deliberately ships with **no authentication**. This admin\npanel can read, overwrite, and delete every blob in whatever store you give\nit, so an unauthenticated deployment means anyone with the URL has full\nread/write/delete access to that data.\n\nThe example above uses Val Town's built-in `passwordAuth` + `verifyToken`\npattern (same as this val's own `main.tsx`), which is a nice fit for personal\nprojects: the \"password\" you sign in with is your own Val Town API token, so\nonly you can get in. You're of course free to swap in any other auth\nmiddleware that wraps a `fetch` handler.\n\n## Local development\n\nEverything here is plain Hono + JSX, no build step. Edit `blob-admin.tsx`\nto change routes or markup, `helper.ts` for shared types/utilities, and\n`main.tsx` to change how the standalone deployment of this val is configured.\n`minimal.tsx` is a self-contained, single-file version kept around for anyone\nwho'd rather grab one compact file than wire up the multi-file split.\n",[172],"pulls","branches","forks","envVars",{"_186":62,"_188":62},"connections",{"_186":62,"_187":62},"count","unfilledCount","emptyCount",{"_43":171,"_32":172,"_30":173,"_135":-5,"_41":42,"_40":174,"_137":58,"_38":211,"_13":176,"_33":20,"_35":177,"_24":25,"_142":-5,"_196":212,"_27":213},{"_43":167,"_32":28,"_30":31,"_135":-5,"_41":42,"_40":14,"_137":25,"_38":208,"_13":169,"_33":34,"_35":37,"_24":25,"_142":-5,"_196":209,"_27":210},{"_43":160,"_32":161,"_30":56,"_135":-5,"_41":42,"_40":162,"_137":25,"_38":205,"_13":164,"_33":34,"_35":165,"_24":25,"_142":-5,"_196":206,"_27":207},{"_43":152,"_32":153,"_30":154,"_135":-5,"_41":42,"_40":155,"_137":58,"_38":202,"_13":157,"_33":34,"_35":158,"_24":25,"_142":-5,"_196":203,"_27":204},{"_43":144,"_32":145,"_30":146,"_135":-5,"_41":42,"_40":147,"_137":58,"_38":199,"_13":149,"_33":140,"_35":150,"_24":25,"_142":-5,"_196":200,"_27":201},{"_43":132,"_32":133,"_30":134,"_135":-5,"_41":42,"_40":136,"_137":25,"_38":195,"_13":139,"_33":140,"_35":141,"_24":25,"_142":-5,"_196":197,"_27":198},["D",1784218764026],"children",[],[133],["D",1784218604924],[],[145],["D",1784218626069],[],[153],["D",1784235867930],[],[161],["D",1784245265403],[],[28],["D",1784235885039],[],[172],["D",1784053743735],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_123":251,"_252":253,"_254":255,"_256":25,"_257":25,"_258":25,"_259":58,"_260":-5,"_261":-7,"_262":-7,"_263":62,"_264":25,"_265":25,"_266":-5,"_267":25,"_268":25,"_269":25,"_270":-5},"ENV",{"_222":223,"_224":225,"_226":86,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250},"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 · v51