Cool Work Bags!

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_237":238,"_239":240},"routes/_app.x.$handle.$name",{"_95":94,"_32":46,"_104":85,"_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":122,"_123":-5,"_124":-5,"_125":126},"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":-5,"_58":25,"_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",32,"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","components/Page.tsx","latestPath","fileId","8b6213c4-59f2-11f1-936a-ee650bb23af1","name","Page.tsx","fileType","script","content","/** @jsxImportSource npm:hono/jsx */\nimport type { Bag } from \"../data/bags.ts\";\nimport { Card } from \"./Card.tsx\";\n\nconst TWIND_THEME = {\n extend: {\n colors: {\n paper: \"#f4efe5\",\n ink: \"#161412\",\n muted: \"#766d60\",\n line: \"#2a261f\",\n red: \"#d44a2f\",\n acid: \"#d7e75d\",\n blue: \"#2457a6\",\n },\n fontFamily: {\n sans: ['\"Spectral\"', \"Georgia\", \"serif\"],\n display: ['\"Bodoni Moda\"', \"Didot\", \"serif\"],\n mono: ['\"IBM Plex Mono\"', \"monospace\"],\n },\n boxShadow: {\n paper: \"6px 6px 0 rgba(22,20,18,0.92)\",\n \"paper-hover\": \"9px 12px 0 #2457a6\",\n mark: \"5px 5px 0 #2a261f\",\n chip: \"3px 3px 0 #2a261f\",\n \"chip-active\": \"3px 3px 0 #d44a2f\",\n pill: \"6px 6px 0 #2a261f\",\n \"pill-hover\": \"9px 9px 0 #2a261f\",\n tweet: \"4px 4px 0 rgba(22,20,18,0.18)\",\n },\n animation: {\n rise: \"rise 0.42s ease forwards\",\n },\n keyframes: {\n rise: {\n \"0%\": { opacity: \"0\", transform: \"translateY(18px)\" },\n \"100%\": { opacity: \"1\", transform: \"translateY(0)\" },\n },\n },\n },\n};\n\nconst TWIND_BOOT = `\ntwind.install({ theme: ${JSON.stringify(TWIND_THEME)} });\n`;\n\nconst GLOBAL_CSS = `\n html, body { margin: 0; }\n body {\n color: #161412;\n font-family: 'Spectral', Georgia, serif;\n background:\n linear-gradient(90deg, rgba(22,20,18,0.055) 1px, transparent 1px) 0 0 / 38px 38px,\n linear-gradient(rgba(22,20,18,0.04) 1px, transparent 1px) 0 0 / 38px 38px,\n radial-gradient(circle at 14% 18%, rgba(215,231,93,0.42), transparent 23rem),\n radial-gradient(circle at 82% 5%, rgba(212,74,47,0.2), transparent 25rem),\n #f4efe5;\n padding-bottom: 96px;\n }\n *, *::before, *::after { box-sizing: border-box; }\n .image-missing .photo::after {\n content: 'Image unavailable';\n position: absolute; inset: 0;\n display: grid; place-items: center;\n padding: 24px; text-align: center;\n font-family: 'IBM Plex Mono', monospace;\n background: repeating-linear-gradient(-45deg, #f8f2e8, #f8f2e8 10px, #eadcc6 10px, #eadcc6 20px);\n }\n .hero-grid {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(300px, clamp(300px, 30vw, 440px));\n gap: clamp(24px, 5vw, 72px);\n align-items: end;\n padding-top: 32px;\n }\n .hero-copy { min-width: 0; }\n .hero-title {\n margin: 0;\n font-family: 'Spectral', Georgia, serif;\n font-weight: 600;\n font-size: clamp(86px, 12.4vw, 188px);\n line-height: 0.84;\n }\n /* Twitter's script swaps the blockquote for an iframe, so constrain both states. */\n .tweet-card {\n justify-self: end;\n width: 100%;\n max-width: 440px;\n min-width: 0;\n min-height: 380px;\n }\n .tweet-card .twitter-tweet,\n .tweet-card iframe {\n margin: 0 !important;\n width: 100% !important;\n max-width: 100% !important;\n }\n @media (max-width: 1040px) {\n .hero-grid {\n grid-template-columns: 1fr;\n align-items: start;\n gap: 24px;\n }\n .hero-title { font-size: clamp(64px, 15.5vw, 142px); }\n .tweet-card {\n justify-self: start;\n min-height: 330px;\n transform: none !important;\n box-shadow: none !important;\n }\n }\n @media (max-width: 520px) {\n .hero-title { font-size: clamp(56px, 18vw, 90px); }\n .tweet-card { min-height: 300px; }\n }\n`;\n\nexport type PageProps = {\n bags: Bag[];\n sourceUrl: string;\n remixUrl: string;\n filterScriptUrl: string;\n tweetUrl: string;\n};\n\nconst SHELL = \"w-[min(1480px,calc(100vw-28px))] mx-auto\";\n\nexport function Page(\n { bags, sourceUrl, remixUrl, filterScriptUrl, tweetUrl }: PageProps,\n) {\n return (\n \n \n \n \n Cool Work Bags!\n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction FilterButton(\n { filter, active, children }: {\n filter: string;\n active?: boolean;\n children: unknown;\n },\n) {\n const base =\n \"min-h-[42px] px-[14px] border-2 border-line font-mono text-[12px] uppercase cursor-pointer shadow-chip\";\n const cls = active\n ? `${base} active bg-ink text-paper shadow-chip-active`\n : `${base} bg-[#fff8e7] text-ink`;\n return (\n \n );\n}\n\n// Val Town's official VT ligature, lifted verbatim from val.town/favicon.svg.\nfunction ValTownGlyph() {\n return (\n \n \n \n );\n}\n","/** @jsxImportSource npm:hono/jsx */\nimport type { Bag } from \"../data/bags.ts\";\nimport { Card } from \"./Card.tsx\";\n\nconst TWIND_THEME = {\n extend: {\n colors: {\n paper: \"#f4efe5\",\n ink: \"#161412\",\n muted: \"#766d60\",\n line: \"#2a261f\",\n red: \"#d44a2f\",\n acid: \"#d7e75d\",\n blue: \"#2457a6\",\n },\n fontFamily: {\n sans: ['\"Spectral\"', \"Georgia\", \"serif\"],\n display: ['\"Bodoni Moda\"', \"Didot\", \"serif\"],\n mono: ['\"IBM Plex Mono\"', \"monospace\"],\n },\n boxShadow: {\n paper: \"6px 6px 0 rgba(22,20,18,0.92)\",\n \"paper-hover\": \"9px 12px 0 #2457a6\",\n mark: \"5px 5px 0 #2a261f\",\n chip: \"3px 3px 0 #2a261f\",\n \"chip-active\": \"3px 3px 0 #d44a2f\",\n pill: \"6px 6px 0 #2a261f\",\n \"pill-hover\": \"9px 9px 0 #2a261f\",\n tweet: \"4px 4px 0 rgba(22,20,18,0.18)\",\n },\n animation: {\n rise: \"rise 0.42s ease forwards\",\n },\n keyframes: {\n rise: {\n \"0%\": { opacity: \"0\", transform: \"translateY(18px)\" },\n \"100%\": { opacity: \"1\", transform: \"translateY(0)\" },\n },\n },\n },\n};\n\nconst TWIND_BOOT = `\ntwind.install({ theme: ${JSON.stringify(TWIND_THEME)} });\n`;\n\nconst GLOBAL_CSS = `\n html, body { margin: 0; }\n body {\n color: #161412;\n font-family: 'Spectral', Georgia, serif;\n background:\n linear-gradient(90deg, rgba(22,20,18,0.055) 1px, transparent 1px) 0 0 / 38px 38px,\n linear-gradient(rgba(22,20,18,0.04) 1px, transparent 1px) 0 0 / 38px 38px,\n radial-gradient(circle at 14% 18%, rgba(215,231,93,0.42), transparent 23rem),\n radial-gradient(circle at 82% 5%, rgba(212,74,47,0.2), transparent 25rem),\n #f4efe5;\n padding-bottom: 96px;\n }\n *, *::before, *::after { box-sizing: border-box; }\n .image-missing .photo::after {\n content: 'Image unavailable';\n position: absolute; inset: 0;\n display: grid; place-items: center;\n padding: 24px; text-align: center;\n font-family: 'IBM Plex Mono', monospace;\n background: repeating-linear-gradient(-45deg, #f8f2e8, #f8f2e8 10px, #eadcc6 10px, #eadcc6 20px);\n }\n [data-filter].active {\n background: #161412 !important;\n color: #f4efe5 !important;\n box-shadow: 3px 3px 0 #d44a2f !important;\n }\n .hero-grid {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(300px, clamp(300px, 30vw, 440px));\n gap: clamp(24px, 5vw, 72px);\n align-items: end;\n padding-top: 32px;\n }\n .hero-copy { min-width: 0; }\n .hero-title {\n margin: 0;\n font-family: 'Spectral', Georgia, serif;\n font-weight: 600;\n font-size: clamp(86px, 12.4vw, 188px);\n line-height: 0.84;\n }\n /* Twitter's script swaps the blockquote for an iframe, so constrain both states. */\n .tweet-card {\n justify-self: end;\n width: 100%;\n max-width: 440px;\n min-width: 0;\n min-height: 380px;\n }\n .tweet-card .twitter-tweet,\n .tweet-card iframe {\n margin: 0 !important;\n width: 100% !important;\n max-width: 100% !important;\n }\n @media (max-width: 1040px) {\n .hero-grid {\n grid-template-columns: 1fr;\n align-items: start;\n gap: 24px;\n }\n .hero-title { font-size: clamp(64px, 15.5vw, 142px); }\n .tweet-card {\n justify-self: start;\n min-height: 330px;\n transform: none !important;\n box-shadow: none !important;\n }\n }\n @media (max-width: 520px) {\n .hero-title { font-size: clamp(56px, 18vw, 90px); }\n .tweet-card { min-height: 300px; }\n }\n`;\n\nexport type PageProps = {\n bags: Bag[];\n sourceUrl: string;\n remixUrl: string;\n filterScriptUrl: string;\n tweetUrl: string;\n};\n\nconst SHELL = \"w-[min(1480px,calc(100vw-28px))] mx-auto\";\n\nexport function Page(\n { bags, sourceUrl, remixUrl, filterScriptUrl, tweetUrl }: PageProps,\n) {\n return (\n \n \n \n \n Cool Work Bags!\n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction FilterButton(\n { filter, active, children }: {\n filter: string;\n active?: boolean;\n children: unknown;\n },\n) {\n const base =\n \"min-h-[42px] px-[14px] border-2 border-line font-mono text-[12px] uppercase cursor-pointer shadow-chip\";\n const cls = active\n ? `${base} active bg-ink text-paper shadow-chip-active`\n : `${base} bg-[#fff8e7] text-ink`;\n return (\n \n );\n}\n\n// Val Town's official VT ligature, lifted verbatim from val.town/favicon.svg.\nfunction ValTownGlyph() {\n return (\n \n \n \n );\n}\n","createdAt",["D",1779905851639],"branchVersion","branchId","dac1d8dc-59de-11f1-8e50-ee650bb23af1","id","dac1083a-59de-11f1-8e50-ee650bb23af1","cool-work-bags",["D",1779894911288],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Cool work bag picks, inspired by replies to @adelwu_'s tweet.","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_103":99},"org",{"_95":94,"_96":97,"_98":99,"_18":56,"_100":101,"_102":25},"branch",{"_13":14,"_32":85,"_44":43,"_86":45,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":46,"_93":94},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789581599&sig=aa89c75ccb14b30f67f191d970081889e190f659b15ae1946f2f2fd355e8fba5","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":233,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":-5,"_58":25,"_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":234,"_80":235,"_82":236,"_84":25},"tree",[181,183,186,188,189],"files",[181,182,183,184,185,186,187,188,189],"counts",{"_171":62,"_172":150,"_173":62,"_174":175,"_176":177},"contents",[127,128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_44":166,"_32":167,"_30":168,"_135":-5,"_42":43,"_41":139,"_137":122,"_39":169,"_13":62,"_34":158,"_36":-5,"_24":25,"_142":-5,"_27":170},{"_44":160,"_32":161,"_30":162,"_135":-5,"_42":43,"_41":163,"_137":122,"_39":164,"_13":62,"_34":158,"_36":-5,"_24":25,"_142":-5,"_27":165},{"_44":153,"_32":154,"_30":155,"_135":-5,"_42":43,"_41":156,"_137":122,"_39":157,"_13":62,"_34":158,"_36":-5,"_24":25,"_142":-5,"_27":159},{"_44":145,"_32":146,"_30":147,"_135":-5,"_42":43,"_41":148,"_137":122,"_39":149,"_13":150,"_34":20,"_36":151,"_24":25,"_142":-5,"_27":152},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":122,"_39":138,"_13":139,"_34":140,"_36":141,"_24":25,"_142":143,"_27":144},"126200e4-59f5-11f1-822e-ee650bb23af1","main.tsx","dac82840-59de-11f1-8e50-ee650bb23af1","parentId",22,"latest",["D",1779904453515],12,"http","/** @jsxImportSource npm:hono/jsx */\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { bags } from \"./data/bags.ts\";\nimport { Page } from \"./components/Page.tsx\";\n\n// Public URLs for this val. Hardcoded rather than introspected because they're stable\n// and we want a single, obvious place to update on a fork.\nconst VAL_HANDLE = \"dcm31\";\nconst VAL_NAME = \"cool-work-bags\";\nconst VAL_URL = `https://www.val.town/x/${VAL_HANDLE}/${VAL_NAME}`;\nconst SOURCE_FILE_URL = `${VAL_URL}/code/main.tsx`;\nconst REMIX_URL = VAL_URL;\nconst FILTER_SCRIPT_URL = `https://esm.town/v/${VAL_HANDLE}/${VAL_NAME}/client/filter.ts`;\nconst TWEET_URL = \"https://twitter.com/adelwu_/status/2058717752081420355\";\n\n// Blob keys for image cache. Bump the version segment to invalidate cached upstream images.\nconst BLOB_PREFIX = \"carry-market/images/v2\";\nconst blobKeyFor = (i: number) => `${BLOB_PREFIX}/${i}`;\n\nconst app = new Hono();\n\n// Surface real stack traces in logs instead of swallowing errors.\napp.onError((err) => Promise.reject(err));\n\napp.get(\"/\", (c) =>\n c.html(\n ,\n )\n);\n\napp.get(\"/image\", async (c) => {\n const i = Number(c.req.query(\"i\"));\n const bag = bags[i];\n if (!bag) return c.notFound();\n\n const key = blobKeyFor(i);\n const typeKey = `${key}.type`;\n\n // Cache hit: serve the cached image bytes.\n const cached = await blob.get(key).catch(() => null);\n if (cached?.ok) {\n const contentType = await blob.get(typeKey)\n .then((r) => r.ok ? r.text() : \"image/jpeg\")\n .catch(() => \"image/jpeg\");\n return new Response(await cached.arrayBuffer(), {\n headers: {\n \"content-type\": contentType,\n \"cache-control\": \"public, max-age=604800, immutable\",\n },\n });\n }\n\n // Cache miss: fetch upstream, validate, store, serve. Some CDNs require extra\n // headers — those are declared per-bag in data/bags.ts.\n try {\n const upstream = await fetch(bag.image, {\n headers: {\n \"user-agent\": \"Mozilla/5.0\",\n accept: \"image/avif,image/webp,image/*,*/*;q=0.8\",\n ...bag.fetchHeaders,\n },\n });\n const contentType = upstream.headers.get(\"content-type\") ?? \"\";\n if (upstream.ok && contentType.startsWith(\"image/\")) {\n const bytes = new Uint8Array(await upstream.arrayBuffer());\n await blob.set(key, bytes);\n await blob.set(typeKey, contentType);\n return new Response(bytes, {\n headers: {\n \"content-type\": contentType,\n \"cache-control\": \"public, max-age=604800, immutable\",\n },\n });\n }\n } catch {\n // fall through to placeholder\n }\n\n return new Response(fallbackSvg(bag.name), {\n headers: {\n \"content-type\": \"image/svg+xml; charset=utf-8\",\n \"cache-control\": \"public, max-age=3600\",\n },\n });\n});\n\n// View-source route: bounce to the val's code page on val.town. Pairs with the\n// \"Remix on Val Town\" pill + footer \"view source\" link per townie best practices.\napp.get(\"/source\", () =>\n new Response(null, {\n status: 302,\n headers: { Location: SOURCE_FILE_URL },\n })\n);\n\nfunction fallbackSvg(name: string): string {\n const safe = name\n .replaceAll(\"&\", \"&\")\n .replaceAll(\"<\", \"<\")\n .replaceAll(\">\", \">\")\n .replaceAll('\"', \""\");\n return ``;\n}\n\nexport default app.fetch;\n","label","coolworkbags",[133],"a2cd3c9a-59f3-11f1-9b46-ee650bb23af1","README.md","a49484f8-59f2-11f1-9dfa-ee650bb23af1",19,["D",1779903836837],1,"# cool-work-bags\n\nOutbound catalog of cool work bags, inspired by replies to\n[@adelwu_'s tweet](https://twitter.com/adelwu_/status/2058717752081420355). Every\ncard links out to the original store; images are proxied + cached so flaky CDNs\ndon't break the page.\n\n## File layout\n\n```\nmain.tsx Hono app: /, /image, /source\ncomponents/Page.tsx Full-page JSX layout, Twind theme, tweet embed, remix pill\ncomponents/Card.tsx Single-bag card\ndata/bags.ts Bag[] data + Tier type + per-bag fetchHeaders for picky CDNs\nclient/filter.ts Browser-side tier filter + free-text search\n```\n\n## Routes\n\n- `GET /` — the catalog page\n- `GET /image?i=N` — image proxy with blob caching, with per-bag header overrides\n- `GET /source` — 302 to the val's code page on val.town\n\n## Image cache\n\nCached under blob keys `carry-market/images/v2/{i}` and\n`carry-market/images/v2/{i}.type` (the `carry-market` prefix is preserved so the\ncache survived the rename). Bump the `BLOB_PREFIX` version segment in\n`main.tsx` to invalidate everything; delete a single key to refresh one bag.\n\n## Adding a bag\n\nAppend an entry to `bags` in `data/bags.ts`. The index becomes the `/image?i=N`\nidentifier and the animation-delay seed, so prefer appending over inserting.\n\nIf the image upstream needs special headers (e.g. a Referer), add a\n`fetchHeaders` field on that entry rather than monkey-patching the handler.\n",[146],"4c7509dc-59f2-11f1-841f-ee650bb23af1","data","1d064ac0-bb88-4887-b48d-13aff995df9c",10,["D",1779903262465],"directory",[154],"570c954a-59f2-11f1-9f1d-ee650bb23af1","components","98860df2-c265-4e0e-86dd-66e7b7016749",11,["D",1779903280245],[161],"5e8f2fe4-59f2-11f1-92f4-ee650bb23af1","client","4b028e3e-6506-4950-8360-39675a95ce68",["D",1779903292828],[167],"pulls","branches","forks","envVars",{"_178":62,"_180":62},"connections",{"_178":62,"_179":62},"count","unfilledCount","emptyCount",{"_44":166,"_32":167,"_30":168,"_135":-5,"_42":43,"_41":139,"_137":122,"_39":230,"_13":62,"_34":158,"_36":-5,"_24":25,"_142":-5,"_191":231,"_27":232},{"_44":221,"_32":222,"_30":223,"_135":168,"_42":43,"_41":224,"_137":122,"_39":225,"_13":226,"_34":35,"_36":227,"_24":25,"_142":-5,"_191":228,"_27":229},{"_44":160,"_32":161,"_30":162,"_135":-5,"_42":43,"_41":163,"_137":122,"_39":218,"_13":62,"_34":158,"_36":-5,"_24":25,"_142":-5,"_191":219,"_27":220},{"_44":211,"_32":212,"_30":213,"_135":162,"_42":43,"_41":163,"_137":122,"_39":214,"_13":62,"_34":35,"_36":215,"_24":25,"_142":-5,"_191":216,"_27":217},{"_44":207,"_32":33,"_30":31,"_135":162,"_42":43,"_41":14,"_137":122,"_39":208,"_13":156,"_34":35,"_36":38,"_24":25,"_142":-5,"_191":209,"_27":210},{"_44":153,"_32":154,"_30":155,"_135":-5,"_42":43,"_41":156,"_137":122,"_39":204,"_13":62,"_34":158,"_36":-5,"_24":25,"_142":-5,"_191":205,"_27":206},{"_44":197,"_32":198,"_30":199,"_135":155,"_42":43,"_41":156,"_137":122,"_39":200,"_13":62,"_34":35,"_36":201,"_24":25,"_142":-5,"_191":202,"_27":203},{"_44":145,"_32":146,"_30":147,"_135":-5,"_42":43,"_41":148,"_137":122,"_39":194,"_13":150,"_34":20,"_36":151,"_24":25,"_142":-5,"_191":195,"_27":196},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":122,"_39":190,"_13":139,"_34":140,"_36":141,"_24":25,"_142":143,"_191":192,"_27":193},["D",1779904453515],"children",[],[133],["D",1779903836837],[],[146],"4c7471fc-59f2-11f1-841f-ee650bb23af1","bags.ts","4c7472ce-59f2-11f1-841f-ee650bb23af1",["D",1779903262465],"// Outbound bag catalog. Each entry renders one card and one /image?i=N proxy result.\n// `fetchHeaders` is folded in per-bag for CDNs that need a Referer or other coaxing\n// (replaces the runtime monkey-patch that lived at the bottom of the old main.ts).\n\nexport type Tier = \"entry\" | \"sweet\" | \"serious\" | \"icon\";\n\nexport type Bag = {\n name: string;\n price: string;\n link: string;\n image: string;\n tier: Tier;\n /** Extra headers merged into the upstream fetch for this bag's image. */\n fetchHeaders?: Record;\n};\n\nexport const tierLabels: Record = {\n entry: \"Under $200\",\n sweet: \"$200-$499\",\n serious: \"$500-$999\",\n icon: \"$1k+ Icons\",\n};\n\nexport const tierOrder: Tier[] = [\"entry\", \"sweet\", \"serious\", \"icon\"];\n\nexport const vibes = [\n \"16-inch laptop candidate\",\n \"Comfy-strap energy\",\n \"Interior-pocket hopeful\",\n \"Leather-adjacent work flex\",\n \"Slimmer carry profile\",\n];\n\nexport const bags: Bag[] = [\n { name: \"Garbags\", price: \"$50-$100\", link: \"https://www.garbags.com/collections/computer-bag\", image: \"https://www.garbags.com/cdn/shop/collections/computer_bag_3.0.jpg?v=1772557128\", tier: \"entry\" },\n { name: \"BDG Cindy Shoulder Bag\", price: \"$70\", link: \"https://www.urbanoutfitters.com/shop/bdg-cindy-shoulder-bag\", image: \"https://images.urbndata.com/is/image/UrbanOutfitters/101211381_501_b\", tier: \"entry\" },\n { name: \"Banana Republic Factory Laptop Bag\", price: \"$70-$100\", link: \"https://bananarepublicfactory.gapfactory.com/browse/product.do?pid=8882240710000\", image: \"https://content.gapinc.com/b/0059/706/309/cn59706309.png?width=960\", tier: \"entry\" },\n { name: \"Timbuk2 Top Loader Laptop Bag\", price: \"~$100-$160\", link: \"https://www.timbuk2.com\", image: \"https://www.timbuk2.com/cdn/shop/products/timbuk2-authority-laptop-backpack-deluxe-eco-black-deluxe-1825-3-1120-front_1_c2f35867-ec02-43b3-8ff2-5e6c0f57fc78_1024x1024.png?v=1664825257\", tier: \"entry\" },\n { name: \"Bellroy Bag\", price: \"~$100-$250\", link: \"https://bellroy.com/collections/bags\", image: \"https://bellroy-product-images.imgix.net//bellroy_dot_com_gallery_image/USD/BTKA-BLK-202/0?w=1000&h=1000&fit=clip&auto=format\", tier: \"entry\" },\n { name: \"Radley Bags\", price: \"~$100-$300\", link: \"https://www.radley.co.uk\", image: \"https://shop.simon.com/cdn/shop/files/c9c134ce09ca4562a34ddcbd3f68791d_1000x1000.jpg?v=1770664385\", tier: \"entry\" },\n { name: \"BEIS Work Tote\", price: \"~$120-160\", link: \"https://beistravel.com/collections/totes\", image: \"https://beistravel.com/cdn/shop/collections/IMG-1_0000_Beis-TopDownOrganization-1472.jpg?v=1776977181\", tier: \"entry\" },\n { name: \"Poppy and Peonies Totes\", price: \"$125\", link: \"https://us.poppyandpeonies.com/collections/totes\", image: \"https://us.poppyandpeonies.com/cdn/shop/files/PoppyPeonies_Ecomm_WorkTote_Cognac_FV.png?crop=center&height=1200&v=1756950400&width=1200\", tier: \"entry\" },\n { name: \"Chrome Industries Bag\", price: \"$100-$200\", link: \"https://chromeindustries.com/collections/commute-bags\", image: \"https://chromeindustries.com/cdn/shop/collections/CommuteBags-3200x1600_0cbfe326-901f-4072-a1d5-f21d7e3fee9f.jpg?v=1712429865&width=2048\", tier: \"entry\" },\n { name: \"Charles Keith XL Calla Tote\", price: \"$149\", link: \"https://www.charleskeith.com/us/CK2-30671782_EP.BRW.html\", image: \"https://www.charleskeith.com/on/demandware.static/-/Sites-ck-products/default/dw4bc21cd3/images/hi-res/2025-L6-CK2-30671782-R3-1.jpg\", tier: \"entry\" },\n { name: \"Osprey Comet Pack\", price: \"$160\", link: \"https://www.osprey.com/comet-30-comet30f22-456?size=O%2FS&color=Black\", image: \"https://images.reddb.ai/products/product-3393/B09ZNLYWXW-3534.webp\", tier: \"entry\" },\n { name: \"Peak Design EDC\", price: \"$150-$200\", link: \"https://www.peakdesign.com/collections/everyday-bags\", image: \"https://cdn.shopify.com/s/files/1/2986/1172/files/Homepage-Collections-Mobile-Products-New.jpg?v=1726030184\", tier: \"entry\" },\n { name: \"Lululemon Triple Compartment Tote Bag 18L\", price: \"$168\", link: \"https://shop.lululemon.com/p/bags/Triple-Compartment-Tote-Bag-18L/_/prod20000687\", image: \"https://shop.simon.com/cdn/shop/files/523d1b9771a14fc0bd41aa599c7be9e0.webp?v=1775085306\", tier: \"entry\" },\n { name: \"Alpaka Metro Backpack Pro 24L\", price: \"$179\", link: \"https://www.alpakagear.com/products/metro-backpack-pro\", image: \"https://alpakagear.com/cdn/shop/files/METROBACKPACK24LVX42GREENSTOREPHOTO_d3120188-cafd-48c8-bb9c-703f939ad682.jpg?v=1775039639&width=2048\", tier: \"entry\" },\n { name: \"Timbuk2 Authority Pack\", price: \"$180\", link: \"https://www.timbuk2.com/products/1825-authority-laptop-backpack-deluxe\", image: \"https://www.timbuk2.com/cdn/shop/products/timbuk2-authority-laptop-backpack-deluxe-eco-black-deluxe-1825-3-1120-front_1_c2f35867-ec02-43b3-8ff2-5e6c0f57fc78_1024x1024.png?v=1664825257\", tier: \"entry\" },\n { name: \"Longchamp Le Pliage\", price: \"$180\", link: \"https://www.longchamp.com/us/en/products/tote-bag-l-L1899979163.html\", image: \"https://www.longchamp.com/dw/image/v2/BCVX_PRD/on/demandware.static/-/Sites-LC-master-catalog/default/dw23a7b09d/images/DIS/L1899979163_0.png?sw=800&sh=800&sm=fit\", tier: \"entry\" },\n { name: \"Uptown Vertical Tote\", price: \"$195\", link: \"https://www.leatherology.com/products/uptown-vertical-tote-black-pebble?variant=46726707314936\", image: \"https://www.leatherology.com/cdn/shop/files/Uptown-Vertical-Tote-037-332-1.jpg?v=1776462890\", tier: \"entry\" },\n { name: \"Cote&Ciel Bag\", price: \"~$200-$400\", link: \"https://coteetciel.com\", image: \"https://cdn.shopify.com/s/files/1/0100/8382/7748/files/29004_3.jpg?v=1666011224\", tier: \"sweet\" },\n { name: \"Waterfield Bag\", price: \"~$200-$400\", link: \"https://www.sfbags.com/collections/bags\", image: \"https://www.sfbags.com/cdn/shop/files/Lifestyle-1_f811776e-4adb-4a2f-9425-c7208929a8cd.jpg?v=1742360110\", tier: \"sweet\" },\n { name: \"Aer Tech Pack\", price: \"$219\", link: \"https://aersf.com/products/tech-pack-3\", image: \"https://aersf.com/cdn/shop/files/1AER31015_techpack3_34hero_1200x1200.jpg?v=1708907861\", tier: \"sweet\" },\n { name: \"Saddleback Leather Tote\", price: \"$249\", link: \"https://saddlebackleather.com/leather-tote-u\", image: \"https://cdn11.bigcommerce.com/s-uiywfsyvbe/products/386/images/13220/saddleback-leather-tote-full-grain-chestnut__68739.1719596119.386.513.jpg?c=1\", tier: \"sweet\" },\n { name: \"Free People Emerson Tote\", price: \"$250\", link: \"https://www.freepeople.com/shop/we-the-free-emerson-tote-bag/\", image: \"https://images.urbndata.com/is/image/FreePeople/100053782_001_a?$a15-pdp-detail-shot$\", tier: \"sweet\" },\n { name: \"Stuart & Lau Slim Briefcase\", price: \"$260\", link: \"https://stuartandlau.com/products/the-cary-briefcase-slim-black\", image: \"https://stuartandlau.com/cdn/shop/products/StuartandLau_TheCaryBriefcase-Slim_Black_01.jpg?v=1659449337\", tier: \"sweet\" },\n { name: \"Troubadour Apex Backpack\", price: \"$279\", link: \"https://www.troubadourgoods.com/products/apex-backpack-4-0?variant=47431234715880\", image: \"https://www.macworld.com/wp-content/uploads/2025/10/Troubadour-Apex-4.0-Backpack-contents.jpg?quality=50&strip=all&w=1024\", tier: \"sweet\" },\n { name: \"Evergoods CPL 24L\", price: \"$285\", link: \"https://evergoods.us/products/civic-panel-loader\", image: \"https://evergoods.us/cdn/shop/files/CIVIC-PANEL-LOADER-CPL24-BLACK-FRONT-min_4_600x.png?v=1773457391\", tier: \"sweet\" },\n { name: \"Freja Bag\", price: \"$300-$400\", link: \"https://frejanyc.com/collections/for-work\", image: \"https://frejanyc.com/cdn/shop/collections/laf-oat-6.png?v=1732486716\", tier: \"sweet\" },\n { name: \"Everyother Thursday\", price: \"$329\", link: \"https://everyotherthursday.com/products/leather-max-bag\", image: \"https://everyotherthursday.com/cdn/shop/files/MaxBagfrontbrown_e13783c5-a536-411b-bfe9-1e9293e47a9c.jpg?v=1771346034\", tier: \"sweet\" },\n { name: \"Mismo Tote\", price: \"$350-500\", link: \"https://www.shinola.com/collections/tote-bags?page=1\", image: \"https://www.shinola.com/cdn/shop/collections/WomensLeather-ToteBags_HeroLifestyle.png?v=1744225246\", tier: \"sweet\" },\n { name: 'Cuyana System Tote 16\"', price: \"$378\", link: \"https://cuyana.com/products/system-tote-16-inch-v2?variant=46713890767163\", image: \"https://cuyana.com/cdn/shop/products/PDP_White_Hero_900x900_FA21_SystemTote13_Black_Hero_2977.jpg?v=1687316906\", tier: \"sweet\" },\n { name: \"Freitag Bag\", price: \"$380\", link: \"https://freitag.ch/en_US/products/bags/laptop-bags\", image: \"https://res.cloudinary.com/dlwdq84ig/image/upload/v1715323068/r4rsdhmchcqtjvkgtnvi.jpg\", tier: \"sweet\" },\n { name: \"Filson Rugged Twill Original Briefcase\", price: \"$499\", link: \"https://www.filson.com/products/rugged-twill-original-briefcase-black\", image: \"https://www.filson.com/cdn/shop/files/5925fabb6db852ee3f7c53cf976a2c84a610f7b32513908a091392156f60fb37.jpg?v=1771003618\", tier: \"sweet\" },\n { name: \"Mismo MS Backpack\", price: \"$500\", link: \"https://www.mismo.dk/collections/m-s-backpack\", image: \"https://cdn.shopify.com/s/files/1/0163/6166/collections/Backpack_Eclipse.jpg?v=1758954558\", tier: \"serious\" },\n { name: \"Marge Sherwood Grandma Bag\", price: \"$530\", link: \"https://www.wconcept.com/product/-margesherwood-grandma-large-used-pull-up-tote-bag-black-/720640613.html\", image: \"https://cdn.wconcept.com/products/7206406/13/720640613_7.jpg\", tier: \"serious\" },\n { name: \"Cuyana Double Loop Satchel\", price: \"$589\", link: \"https://cuyana.com/products/double-loop-satchel?variant=48382217650491\", image: \"https://cuyana.com/cdn/shop/files/PLP_Hero_1080x1350_SU24_DoubleLoopSatchel_Cappuccino_0985.jpg?v=1713567724\", tier: \"serious\" },\n { name: \"DeMellier London Bag\", price: \"$600-$700\", link: \"https://demellierlondon.com/collections/totes-work-bags\", image: \"https://sfycdn.speedsize.com/3b1a9c38-857f-40c4-8824-32979d6c828f/https://demellierlondon.com/cdn/shop/files/menu_banners_600x750-34_fc2c7cfd-549e-48f1-ae23-61f5433e0f2b.jpg?v=1779268629&width=550\", tier: \"serious\" },\n { name: \"Polene Cyme\", price: \"$620\", link: \"https://eng.polene-paris.com/collections/cyme\", image: \"https://eng.polene-paris.com/cdn/shop/collections/CYME_4dce185b-5a0c-4631-aa1e-9c327bfe2547.jpg?v=1777540292\", tier: \"serious\" },\n { name: \"Tumi Alpha Bravo Surveillance Flap Backpack\", price: \"$650\", link: \"https://www.tumi.com/p/surveillance-flap-backpack-01564881041/\", image: \"https://cdn11.bigcommerce.com/s-u6oc10dkpd/images/stencil/1280x1280/products/21071/110404/BLACK-1564881041___31989.1761934149.jpg?c=1\", tier: \"serious\" },\n { name: \"Songmont Yore Bag\", price: \"$659\", link: \"https://songmontofficial.com/products/large-yore-tote-bag-onyx\", image: \"https://songmontofficial.com/cdn/shop/files/large-yore-tote-bag-onyx-1.jpg?v=1769424181\", tier: \"serious\" },\n { name: \"Shinola Bag\", price: \"$600-$900\", link: \"https://www.shinola.com/collections/tote-bags?page=1\", image: \"https://www.shinola.com/cdn/shop/collections/WomensLeather-ToteBags_HeroLifestyle.png?v=1744225246\", tier: \"serious\" },\n { name: \"Hardgraft Bag\", price: \"$600-$1200\", link: \"https://www.hardgraft.com/collections/bags\", image: \"https://www.hardgraft.com/cdn/shop/files/hardgraft-logo-1024.jpg?v=1755265433\", tier: \"serious\" },\n { name: \"Filson Heritage Leather Original Briefcase\", price: \"$800\", link: \"https://www.filson.com/products/heritage-leather-original-briefcase-ballard-brown\", image: \"https://www.filson.com/cdn/shop/files/b2e72ac8949b427f0b3a269f5d045168a952e1b01f1454c78eb80905c716f4b6.png?v=1778106704\", tier: \"serious\" },\n { name: \"Coronado Leather CEO Briefcase\", price: \"$850\", link: \"https://coronadoleather.com/collections/the-ceo-collection-made-in-usa-luggage\", image: \"https://coronadoleather.com/cdn/shop/collections/AMERICANA-banner.jpg?v=1771570298&width=2048\", tier: \"serious\" },\n { name: \"Kaai Pyramid Bag\", price: \"$895\", link: \"https://kaaibags.com/collections/work-bags/products/pyramid-black\", image: \"https://kaaibags.com/cdn/shop/files/PyramidBlack_01_1200x1200.jpg?v=1761036554\", tier: \"serious\" },\n { name: \"Carl Friedrik Double Palissy Leather Bag\", price: \"$996\", link: \"https://www.carlfriedrik.com/products/palissy-double-leather-briefcase?colour=cognac\", image: \"https://cdn.shopify.com/s/files/1/0572/2777/2040/files/carl-friedrik-palissy-double-swatch-black.jpg?v=1708109239\", tier: \"serious\" },\n { name: \"Basader\", price: \"$1,200\", link: \"https://basader.com/collections/soft-leather-messenger-bags\", image: \"https://basader.com/cdn/shop/collections/Minimal_3.jpg?v=1689691608\", tier: \"icon\" },\n { name: \"Gsongim Bag\", price: \"$1,300\", link: \"https://www.gsongim.com/products/belted-gireogi-tote-bag-copy?Title=Default+Title\", image: \"https://cdn.shopify.com/s/files/1/0763/0032/1074/files/2025.11.07_gireogi-1_2_1.jpg?v=1763426602\", tier: \"icon\" },\n { name: \"Porter Yoshida Daypack\", price: \"$1,450\", link: \"https://sonofastag.com/products/porter-yoshida-co-monochrome-daypack-olive\", image: \"https://sonofastag.com/cdn/shop/files/PORTERYOSHIDA_755059725.jpg?v=1754065229&width=1500\", tier: \"icon\" },\n // Mulberry: Frasers' Amplience CDN (Mulberry's own demandware CDN was flaky from the Val runtime).\n { name: \"Mulberry Bayswater\", price: \"$1,495\", link: \"https://www.mulberry.com/us/shop/bayswater\", image: \"https://cdn.media.amplience.net/i/frasersdev/70399703_o.jpg?v=20251105120605\", tier: \"icon\" },\n { name: \"Kikany Leather Bag\", price: \"$1,515\", link: \"https://www.kikany.com/shop/p/explorer-z9zgt\", image: \"http://static1.squarespace.com/static/66db069e22e6554cb69ef151/66ea92d404eeb96df7e87594/66ea9f51bfb92448a3e2eeed/1773680008120/Explorer_front.jpg?format=1500w\", tier: \"icon\" },\n // Rimowa: their CDN gates on Referer/Accept-Language. We hand them what they want.\n { name: \"Rimowa Never Still Collection\", price: \"$1500-$1800\", link: \"https://www.rimowa.com/us/en/never-still-collection/\", image: \"https://www.rimowa.com/on/demandware.static/-/Sites-rimowa-master-catalog-final/default/dw802d5994/images/large/52500071_1.png\", tier: \"icon\", fetchHeaders: { \"accept-language\": \"en-US,en;q=0.9\", referer: \"https://www.rimowa.com/\" } },\n { name: \"Goyard Tote\", price: \"$1500+\", link: \"https://www.goyard.com/eu_fr/sac-anjou-croc-gm.html#ANJCROGMLCG01TY01P\", image: \"https://www.goyard.com/media/catalog/product/cache/c380ea5850068f3a53e7eddd46ac1706/A/N/ANJCROGMLCG03TY01P_1_1_4142.jpg\", tier: \"icon\" },\n { name: \"Ferragamo Tote\", price: \"$2,100\", link: \"https://www.ferragamo.com/shop/us/en/women/handbags/totes-1\", image: \"https://cdn.ferragamo.com/resource/blob/1130162/2cb5db8504c27a2f223989857d16a977/ogfallbackimage-data.jpg\", tier: \"icon\" },\n { name: \"Acne Studios Camero\", price: \"$2,400\", link: \"https://www.acnestudios.com/us/en/camero-camera/C10235-900.html?g=man\", image: \"https://www.acnestudios.com/dw/image/v2/AAXV_PRD/on/demandware.static/-/Sites-acne-product-catalog/default/dw78f07aaf/images/C1/C10235-/2000x/C10235-900_A.jpg?sw=1120&sh=1680\", tier: \"icon\" },\n { name: \"Balenciaga Le City Bag\", price: \"$2500+\", link: \"https://www.balenciaga.com/en-us/women/bags-for-women/le-city-bags-for-women\", image: \"https://balenciaga.dam.kering.com/asset/a7402ba5-62b4-484e-ab23-9f7e53b279a6/Thumbnail/THUMBNAIL_872640WMRTN1000_X.jpg\", tier: \"icon\" },\n { name: \"Celine Soft 16 Large\", price: \"~$2500+ resale\", link: \"https://www.vestiairecollective.com/celine\", image: \"https://images.vestiairecollective.com/cdn-cgi/image/w=1246,q=80,f=auto,/produit/black-leather-soft-16-celine-handbag-51552961-1_2.jpg\", tier: \"icon\" },\n { name: \"Khaite Crosby Bag\", price: \"$3,600\", link: \"https://khaite.com/collections/crosby-bag\", image: \"https://cdn.shopify.com/s/files/1/1519/7996/files/Khaite_logo_Black.jpg?v=1765215074\", tier: \"icon\" },\n { name: \"The Row Tote\", price: \"$5000+??\", link: \"https://www.therow.com/collections/women-tote-bags-backpacks\", image: \"https://www.therow.com/cdn/shop/files/W2122W012BBLCSF.jpg?v=1773677437\", tier: \"icon\" },\n];\n",[],[154,198],["D",1779903262465],[187],[154],"53b96df4-59f8-11f1-ab64-ee650bb23af1",["D",1779905851639],[],[161,33],"570c6264-59f2-11f1-9f1d-ee650bb23af1","Card.tsx","570c6336-59f2-11f1-9f1d-ee650bb23af1",["D",1779903280245],"/** @jsxImportSource npm:hono/jsx */\nimport type { Bag } from \"../data/bags.ts\";\nimport { tierLabels, vibes } from \"../data/bags.ts\";\n\nexport function Card({ bag, index }: { bag: Bag; index: number }) {\n return (\n \n \n \n \n {tierLabels[bag.tier]}\n \n \n

{bag.price}

{bag.name}

{vibes[index % vibes.length]}

\n \n Visit Store ↗\n \n

Diff · v32