{title}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_236":237,"_238":239},"routes/_app.x.$handle.$name",{"_94":93,"_32":44,"_102":84,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":120,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",24,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","1b00cae8-68da-11f1-8a18-1607ee4eb77e","name","fileType","content","# scoped-blob-viewer\n\nAn admin panel for **val-scoped** blob storage (`std/blob/main.ts`) — list, view,\nedit (text/JSON), preview images, upload, download, rename, copy, and delete.\nGated behind \"Log in with Val Town\" and restricted to an owner.\n\n## Two ways to use it\n\n### 1. This val's own panel\n\n`main.ts` mounts the panel for **this** val's scoped storage. Visit the val's\nHTTP endpoint and log in.\n\n### 2. Drop it into any other val\n\nScoped blob storage is bound to whichever val's runtime is **executing** the code,\nnot to where the source lives. So importing this panel into another val makes it\nread **that** val's storage automatically — no tokens, no registry.\n\n```ts\nimport { createBlobAdmin } from \"https://esm.town/v/nbbaier/scoped-blob-viewer/mod.ts\";\n\nexport default createBlobAdmin({ owner: \"nbbaier\" });\n```\n\nThat one HTTP val is now a full admin panel over the host val's scoped blobs.\n\n#### Options\n\n```ts\ncreateBlobAdmin({\n owner: \"nbbaier\", // string | string[] allowed in; omit = any logged-in VT user\n auth: true, // default true (Val Town OAuth). false = no auth, no gating.\n title: \"My Val Blobs\", // header / tab title\n});\n```\n\n#### Requirement when `auth` is on\n\nThe host val needs an `OAUTH_STATE_ENCRYPTION_KEY` env var (any random 32-byte hex\nstring) for `std/oauth` to encrypt session cookies. Generate one with\n`openssl rand -hex 32`.\n\n## Why you can't browse *arbitrary* vals from one panel\n\nEach val's scoped storage is an isolated namespace reached only with a\n**project-scoped API token** for that specific val (verified: the platform rejects\naccount tokens for scoped blobs, and `v2/blob` has no val/project parameter). There\nis no API to mint those tokens programmatically. The import approach above is the\nclean workaround — the panel runs *inside* the target val, so it already holds that\nval's scope.\n\n## Files\n\n- `mod.ts` — the reusable `createBlobAdmin()` factory (import this elsewhere).\n- `main.ts` — this val's own one-line consumer.","# scoped-blob-viewer\n\nAn admin panel for **val-scoped** blob storage (`std/blob/main.ts`) — list,\nview, edit (text/JSON), preview images, upload, download, rename, copy, and\ndelete. Gated behind \"Log in with Val Town\" and restricted to an owner.\n\n## Two ways to use it\n\n### 1. This val's own panel\n\n`main.ts` mounts the panel for **this** val's scoped storage. Visit the val's\nHTTP endpoint and log in.\n\n### 2. Drop it into any other val\n\nScoped blob storage is bound to whichever val's runtime is **executing** the\ncode, not to where the source lives. So importing this panel into another val\nmakes it read **that** val's storage automatically — no tokens, no registry.\n\n```ts\nimport { createBlobAdmin } from \"https://esm.town/v/nbbaier/scoped-blob-viewer/mod.ts\";\n\nexport default createBlobAdmin({ owner: \"nbbaier\" });\n```\n\nThat one HTTP val is now a full admin panel over the host val's scoped blobs.\n\n#### Options\n\n```ts\ncreateBlobAdmin({\n owner: \"nbbaier\", // string | string[] allowed in; omit = any logged-in VT user\n auth: true, // default true (Val Town OAuth). false = no auth, no gating.\n title: \"My Val Blobs\", // header / tab title\n});\n```\n\n#### Requirement when `auth` is on\n\nThe host val needs an `OAUTH_STATE_ENCRYPTION_KEY` env var (any random 32-byte\nhex string) for `std/oauth` to encrypt session cookies. Generate one with\n`openssl rand -hex 32`.\n\n## Why you can't browse _arbitrary_ vals from one panel\n\nEach val's scoped storage is an isolated namespace reached only with a\n**project-scoped API token** for that specific val (verified: the platform\nrejects account tokens for scoped blobs, and `v2/blob` has no val/project\nparameter). There is no API to mint those tokens programmatically. The import\napproach above is the clean workaround — the panel runs _inside_ the target val,\nso it already holds that val's scope.\n\n## Files\n\n- `mod.ts` — the reusable `createBlobAdmin()` factory (import this elsewhere).\n- `main.ts` — this val's own one-line consumer.","createdAt",["D",1781545404779],"branchVersion","branchId","312b9f03-2082-4458-8650-b643ff4498f4","id","eea1c52b-5aa1-4a5f-81a3-5488cf5018ec","scoped-blob-viewer",["D",1781542084872],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","An admin panel for val-scoped blob storage","imageUrl","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","5f80108f-7ca4-4327-b77b-089dbe4b5a82","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},"branch",{"_13":83,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"isOwned",51,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","nbbaier","handle","displayName","avatar","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":232,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":233,"_78":234,"_80":235,"_82":25},"tree",[194,196,197,198,199,200,201],"files",[194,195,196,197,198,199,200,201],"counts",{"_184":60,"_185":139,"_186":60,"_187":188,"_189":190},"contents",[125,126,127,128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":177,"_32":178,"_30":179,"_135":-5,"_40":41,"_39":180,"_137":120,"_37":181,"_13":60,"_33":182,"_34":-5,"_24":25,"_142":-5,"_27":183},{"_42":171,"_32":172,"_30":173,"_135":-5,"_40":41,"_39":169,"_137":25,"_37":174,"_13":60,"_33":20,"_34":175,"_24":25,"_142":-5,"_27":176},{"_42":167,"_32":28,"_30":31,"_135":-5,"_40":41,"_39":14,"_137":25,"_37":168,"_13":169,"_33":20,"_34":36,"_24":25,"_142":-5,"_27":170},{"_42":160,"_32":161,"_30":162,"_135":-5,"_40":41,"_39":163,"_137":25,"_37":164,"_13":60,"_33":20,"_34":165,"_24":25,"_142":-5,"_27":166},{"_42":153,"_32":154,"_30":155,"_135":-5,"_40":41,"_39":156,"_137":25,"_37":157,"_13":60,"_33":20,"_34":158,"_24":25,"_142":-5,"_27":159},{"_42":144,"_32":145,"_30":146,"_135":-5,"_40":41,"_39":147,"_137":25,"_37":148,"_13":149,"_33":150,"_34":151,"_24":25,"_142":-5,"_27":152},{"_42":132,"_32":133,"_30":134,"_135":-5,"_40":41,"_39":136,"_137":25,"_37":138,"_13":139,"_33":140,"_34":141,"_24":25,"_142":-5,"_27":143},"5042a11d-3bf2-4e9a-be1b-27d95b894d15","mod.ts","4fd8b2e4-68df-11f1-8b5c-1607ee4eb77e","parentId",21,"latest",["D",1781544594618],1,"script","/** @jsxImportSource npm:hono@4.6.14/jsx */\nimport { Hono } from \"npm:hono@4.6.14\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport {\n\tgetOAuthUserData,\n\toauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport type { FC } from \"npm:hono@4.6.14/jsx\";\n\n/**\n * Reusable admin panel for **val-scoped** blob storage (`std/blob/main.ts`).\n *\n * Drop it into ANY val to browse that val's own scoped blobs — because scoped\n * storage is bound to the *running* val's runtime token, the imported panel\n * automatically reads the host val's storage. No per-val tokens required.\n *\n * import { createBlobAdmin } from \"https://esm.town/v/nbbaier/scoped-blob-viewer/mod.ts\";\n * export default createBlobAdmin({ owner: \"nbbaier\" });\n *\n * When `auth` is enabled (default), the host val needs an\n * `OAUTH_STATE_ENCRYPTION_KEY` env var (any random 32-byte hex string) for\n * std/oauth to encrypt session cookies.\n */\n\nexport interface BlobAdminOptions {\n\t/**\n\t * Val Town username(s) allowed in. Others get 403. Omit to allow ANY\n\t * logged-in Val Town user (not recommended). Ignored when `auth` is false.\n\t */\n\towner?: string | string[];\n\t/** Gate behind \"Log in with Val Town\". Default true. Set false for no auth. */\n\tauth?: boolean;\n\t/** Title shown in the header / tab. Default \"Scoped Blob Admin\". */\n\ttitle?: string;\n}\n\nconst PAGE_SIZE = 50;\n// Largest blob we'll attempt to render/edit inline; bigger ones get download-only.\nconst INLINE_MAX = 1024 * 1024; // 1 MB\n\ntype BlobEntry = { key: string; size: number; lastModified: string };\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction formatBytes(n: number): string {\n\tif (n < 1024) return `${n} B`;\n\tif (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;\n\treturn `${(n / (1024 * 1024)).toFixed(2)} MB`;\n}\n\nfunction formatDate(iso: string): string {\n\ttry {\n\t\treturn new Date(iso).toLocaleString(\"en-US\", {\n\t\t\tdateStyle: \"medium\",\n\t\t\ttimeStyle: \"short\",\n\t\t});\n\t} catch {\n\t\treturn iso;\n\t}\n}\n\nconst IMAGE_EXT = [\"png\", \"jpg\", \"jpeg\", \"gif\", \"webp\", \"svg\", \"ico\", \"bmp\", \"avif\"];\nconst CONTENT_TYPES: Record = {\n\tpng: \"image/png\",\n\tjpg: \"image/jpeg\",\n\tjpeg: \"image/jpeg\",\n\tgif: \"image/gif\",\n\twebp: \"image/webp\",\n\tsvg: \"image/svg+xml\",\n\tico: \"image/x-icon\",\n\tbmp: \"image/bmp\",\n\tavif: \"image/avif\",\n\tjson: \"application/json\",\n\ttxt: \"text/plain\",\n\tmd: \"text/markdown\",\n\tcsv: \"text/csv\",\n\thtml: \"text/html\",\n\tcss: \"text/css\",\n\tjs: \"text/javascript\",\n\tts: \"text/typescript\",\n\txml: \"application/xml\",\n\tpdf: \"application/pdf\",\n};\n\nfunction extOf(key: string): string {\n\tconst base = key.split(\"/\").pop() ?? key;\n\tconst dot = base.lastIndexOf(\".\");\n\treturn dot >= 0 ? base.slice(dot + 1).toLowerCase() : \"\";\n}\n\nfunction contentTypeFor(key: string): string {\n\treturn CONTENT_TYPES[extOf(key)] ?? \"application/octet-stream\";\n}\n\nfunction isImage(key: string): boolean {\n\treturn IMAGE_EXT.includes(extOf(key));\n}\n\n// Decide if bytes look like UTF-8 text (no NUL, few replacement chars).\nfunction looksLikeText(bytes: Uint8Array): boolean {\n\tconst sample = bytes.subarray(0, Math.min(bytes.length, 4096));\n\tfor (const b of sample) {\n\t\tif (b === 0) return false; // NUL → binary\n\t}\n\tconst text = new TextDecoder(\"utf-8\", { fatal: false }).decode(sample);\n\tlet bad = 0;\n\tfor (const ch of text) if (ch === \"�\") bad++;\n\treturn bad / Math.max(text.length, 1) < 0.05;\n}\n\n// ---------------------------------------------------------------------------\n// Styles\n// ---------------------------------------------------------------------------\n\nconst STYLE = `\n:root{--bg:#0f1115;--panel:#181b22;--panel2:#1f232c;--border:#2a2f3a;--text:#e6e9ef;--muted:#8b93a3;--accent:#6ea8fe;--accent2:#3d7bf0;--danger:#f06e7b;--ok:#5fd08a}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",sans-serif}\na{color:var(--accent);text-decoration:none}\na:hover{text-decoration:underline}\nheader{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--panel)}\nheader h1{font-size:16px;margin:0;font-weight:600}\nheader h1 a{color:var(--text)}\nheader .spacer{flex:1}\nheader .who{color:var(--muted);font-size:13px}\n.container{max-width:1040px;margin:0 auto;padding:20px}\n.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:18px}\n.card h2{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}\ninput,textarea,button,select{font:inherit;color:inherit}\ninput[type=text],input[type=search],textarea{background:var(--panel2);border:1px solid var(--border);border-radius:7px;padding:8px 10px;color:var(--text);width:100%}\ntextarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;resize:vertical;min-height:280px;white-space:pre;tab-size:2}\ninput:focus,textarea:focus{outline:none;border-color:var(--accent)}\nbutton,.btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent2);border:1px solid var(--accent2);color:#fff;border-radius:7px;padding:8px 14px;cursor:pointer;font-weight:500}\nbutton:hover,.btn:hover{filter:brightness(1.08);text-decoration:none}\n.btn.ghost,button.ghost{background:transparent;border-color:var(--border);color:var(--text)}\n.btn.danger,button.danger{background:transparent;border-color:var(--danger);color:var(--danger)}\n.btn.danger:hover,button.danger:hover{background:var(--danger);color:#fff}\n.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\ntable{width:100%;border-collapse:collapse}\nth,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border)}\nth{color:var(--muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.03em}\ntd.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}\ntr:hover td{background:var(--panel2)}\n.key{font-family:ui-monospace,Menlo,monospace;word-break:break-all}\n.muted{color:var(--muted)}\n.empty{text-align:center;color:var(--muted);padding:40px 0}\n.pager{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted)}\n.pill{display:inline-block;background:var(--panel2);border:1px solid var(--border);border-radius:20px;padding:2px 10px;font-size:12px;color:var(--muted)}\nimg.preview{max-width:100%;border:1px solid var(--border);border-radius:8px;background:#fff}\n.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}\n.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}\n@media(max-width:640px){.grid2{grid-template-columns:1fr}}\n.banner{padding:10px 14px;border-radius:8px;margin-bottom:16px;border:1px solid}\n.banner.err{background:#2a1a1e;border-color:var(--danger);color:#f7b3bb}\n.banner.ok{background:#15261c;border-color:var(--ok);color:#a8e6c1}\ncode{font-family:ui-monospace,Menlo,monospace;background:var(--panel2);padding:1px 5px;border-radius:4px}\n`;\n\n// ---------------------------------------------------------------------------\n// Factory\n// ---------------------------------------------------------------------------\n\nexport function createBlobAdmin(options: BlobAdminOptions = {}) {\n\tconst auth = options.auth !== false;\n\tconst title = options.title ?? \"Scoped Blob Admin\";\n\tconst owners = options.owner == null\n\t\t? null\n\t\t: Array.isArray(options.owner)\n\t\t? options.owner\n\t\t: [options.owner];\n\n\tconst Layout: FC<{ title: string; user?: string | null }> = ({ title, user, children }) => (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t{title}\n\t\t\t\t

Diff · v24