[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_113":114,"_115":116},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","pikachu","name","Quickstart-Full-Stack","path","frontend/pages/features/page-blob.tsx","project",{"_22":50,"_11":12,"_35":51,"_52":-5,"_53":44,"_54":55,"_56":55,"_57":58,"_59":60,"_61":62,"_63":64,"_65":34,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/pikachu/Quickstart-Full-Stack/code/frontend/pages/features/page-blob.tsx","extension","id","eb780f59-c172-47cc-b760-ef97d908f289","page-blob.tsx","fileId","092bd26e-4c96-11f1-b531-ee650bb23af1","parentId","39a158b8-a580-11f1-a64f-1607ee4eb77e","branchId","5a0a7ac8-4895-11f1-80ec-42b51c65c3df","branchVersion",379,"latest",true,"createdAt",["D",1788212990992],"version",14,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@19.2.0 */\n// page-blob.tsx — Blob Storage demo: interactive write/read/list explorer.\n// Wrapper internals (namespacing, JSON helpers, binary support) live in the\n// Docs section — this page stays demo-only.\n//\n// Uses native / instead of Astryx TextInput/Field: those two\n// components throw `requestAnimationFrame is not defined` under Deno SSR\n// (see astryx/ssr-shims.ts doc comment) — native form controls sidestep the\n// bug entirely and match the val's \"no hydration\" design. Each input gets the\n// shared `.field-input` class (defined once in app.tsx) so it still matches\n// Astryx's field tokens (radius, border, background) instead of looking like\n// unstyled browser chrome. Every standalone Button/input is wrapped in an\n// HStack — Stack's default cross-axis alignment is `stretch`, so an\n// unwrapped single child stretches to the Panel's full width.\n\nimport { Button, Heading, HStack, Link, Text, VStack } from \"../../astryx/components.ts\";\nimport { PageLinks, PageShell, Panel } from \"../kit.tsx\";\nimport type { AppProps } from \"../../types.ts\";\n\nconst LINKS = [\n { href: \"https://docs.val.town/reference/std/blob/\", label: \"Blob docs\" },\n { href: \"https://www.val.town/pricing\", label: \"Pricing\" },\n { href: \"https://www.val.town/limits\", label: \"Limits\" },\n];\n\nexport function BlobPage({ user }: AppProps) {\n return (\n \n \n Blob Storage\n \n Val Town Blob is a key-value store shared across all your Apps. 10 MB free / 1 GB Pro,\n backed by Cloudflare R2. Unlike SQLite (App-scoped), Blob is account-scoped — always\n prefix keys to avoid collisions.\n \n \n \n\n {!user && (\n \n \n Sign in with Val Town to try the live write/read/list demo below.\n Sign in with Val Town\n \n \n )}\n\n \n Write a value\n \n \n \n Keys are namespaced to your username ({user?.username ?? \"you\"}/…) so concurrent demo\n visitors never collide.\n \n \n \n \n