[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_166":167,"_168":169},"routes/_app.x.$handle.$name",{"_95":94,"_31":43,"_103":85,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":57,"_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",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",19,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","migrateBlobStorage.ts","latestPath","fileId","d48b6b98-86b8-11f1-938d-1607ee4eb77e","name","fileType","script","content","import { blob as legacyBlob } from \"https://esm.town/v/std/blob/global.ts\";\nimport { blob as scopedBlob } from \"https://esm.town/v/std/blob/main.ts\";\n\nconst storagePrefix = \"susie-draw/users\";\n\nasync function readBytes(\n store: typeof legacyBlob,\n key: string,\n): Promise {\n const response = await store.get(key);\n return await response.arrayBuffer();\n}\n\nasync function sha256(bytes: ArrayBuffer): Promise {\n const digest = await crypto.subtle.digest(\"SHA-256\", bytes);\n return Array.from(new Uint8Array(digest))\n .map((byte) => byte.toString(16).padStart(2, \"0\"))\n .join(\"\");\n}\n\n/**\n * Copy every Susie Draw blob from legacy account-global storage into this\n * val's project-scoped storage. The migration is safe to rerun: destination\n * keys are overwritten with the same source bytes and verified after writing.\n *\n * Legacy blobs are deliberately retained as a rollback copy.\n */\nexport default async function migrateBlobStorage() {\n const entries = await legacyBlob.list(storagePrefix);\n let copiedBytes = 0;\n\n for (const entry of entries) {\n const sourceBytes = await readBytes(legacyBlob, entry.key);\n const sourceHash = await sha256(sourceBytes);\n\n await scopedBlob.set(entry.key, sourceBytes);\n\n const destinationBytes = await readBytes(scopedBlob, entry.key);\n const destinationHash = await sha256(destinationBytes);\n\n if (\n sourceBytes.byteLength !== destinationBytes.byteLength ||\n sourceHash !== destinationHash\n ) {\n throw new Error(`Blob verification failed for ${entry.key}`);\n }\n\n copiedBytes += sourceBytes.byteLength;\n }\n\n return {\n prefix: storagePrefix,\n blobsFound: entries.length,\n blobsCopiedAndVerified: entries.length,\n bytesCopied: copiedBytes,\n legacyBlobsDeleted: 0,\n };\n}\n","createdAt",["D",1784826382312],"branchVersion","branchId","4f7d4d36-5837-11f1-8c48-ee650bb23af1","id","4f7ca12e-5837-11f1-8c48-ee650bb23af1","susie-draw",["D",1779713000520],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Layered HTML drawing MVP.","imageUrl","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","4f7ffe32-5837-11f1-8c48-ee650bb23af1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},"branch",{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"isOwned",41,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pchinjr","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":162,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":163,"_79":164,"_81":165,"_83":24},"tree",[153,154],"files",[153,154],"counts",{"_143":131,"_144":61,"_145":131,"_146":147,"_148":149},"contents",[125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":134,"_31":135,"_29":55,"_128":-5,"_39":40,"_38":136,"_129":24,"_36":137,"_13":138,"_32":139,"_34":140,"_23":24,"_132":141,"_26":142},{"_41":127,"_31":27,"_29":30,"_128":-5,"_39":40,"_38":14,"_129":24,"_36":130,"_13":131,"_32":33,"_34":35,"_23":24,"_132":-5,"_26":133},"554b6d9d-14ad-4959-9fc8-ab11e9002c44","parentId","latest",["D",1784826382312],0,"label",[27],"d55d9b9e-5905-11f1-9572-ee650bb23af1","main.ts",18,["D",1779801701446],17,"http","import { blob } from \"https://esm.town/v/std/blob\";\n\ntype GalleryItem = {\n id: string;\n title: string;\n createdAt: string;\n updatedAt: string;\n thumbnailPng: string;\n};\n\ntype SavedDrawing = GalleryItem & {\n deviceId: string;\n reference: {\n kind: \"builtin\" | \"upload\";\n id?: string;\n name: string;\n dataUrl: string;\n };\n layers: {\n tracePng: string;\n colorPng: string;\n };\n settings: {\n activeMode?: \"trace\" | \"color\" | \"erase\";\n activeLayer: \"trace\" | \"color\";\n brushTool?: \"draw\" | \"erase\";\n brushSize: string;\n brushColor: string;\n referenceOpacity: string;\n };\n};\n\n// Browser-generated device IDs partition saved drawings without requiring accounts.\nconst storagePrefix = \"susie-draw/users\";\nconst galleryLimit = 10;\n\nfunction jsonResponse(data: unknown, init: ResponseInit = {}): Response {\n return new Response(JSON.stringify(data), {\n ...init,\n headers: {\n \"content-type\": \"application/json; charset=utf-8\",\n ...init.headers,\n },\n });\n}\n\nfunction badRequest(message: string): Response {\n return jsonResponse({ error: message }, { status: 400 });\n}\n\nfunction notFound(): Response {\n return jsonResponse({ error: \"Not found\" }, { status: 404 });\n}\n\nfunction validId(value: string | null): value is string {\n return typeof value === \"string\" && /^[a-zA-Z0-9_-]{8,80}$/.test(value);\n}\n\nfunction indexKey(deviceId: string): string {\n return `${storagePrefix}/${deviceId}/index.json`;\n}\n\nfunction drawingKey(deviceId: string, drawingId: string): string {\n return `${storagePrefix}/${deviceId}/drawings/${drawingId}.json`;\n}\n\nasync function getGallery(deviceId: string): Promise {\n const index = await blob.getJSON(indexKey(deviceId));\n return Array.isArray(index) ? index as GalleryItem[] : [];\n}\n\nasync function setGallery(deviceId: string, items: GalleryItem[]): Promise {\n await blob.setJSON(indexKey(deviceId), items);\n}\n\nfunction normalizeGalleryItem(drawing: SavedDrawing): GalleryItem {\n return {\n id: drawing.id,\n title: drawing.title || \"Untitled drawing\",\n createdAt: drawing.createdAt,\n updatedAt: drawing.updatedAt,\n thumbnailPng: drawing.thumbnailPng,\n };\n}\n\nasync function handleApi(request: Request, url: URL): Promise {\n const pathParts = url.pathname.split(\"/\").filter(Boolean);\n\n if (request.method === \"GET\" && url.pathname === \"/api/gallery\") {\n const deviceId = url.searchParams.get(\"deviceId\");\n if (!validId(deviceId)) return badRequest(\"A valid deviceId is required.\");\n const items = await getGallery(deviceId);\n return jsonResponse({ items });\n }\n\n if (pathParts[0] === \"api\" && pathParts[1] === \"drawings\") {\n if (request.method === \"POST\" && pathParts.length === 2) {\n const drawing = await request.json().catch(() => null) as SavedDrawing | null;\n if (!drawing || !validId(drawing.deviceId) || !validId(drawing.id)) {\n return badRequest(\"A valid drawing payload is required.\");\n }\n\n const now = new Date().toISOString();\n const existingItems = await getGallery(drawing.deviceId);\n const existing = existingItems.find((item) => item.id === drawing.id);\n const saved: SavedDrawing = {\n ...drawing,\n title: drawing.title || \"Untitled drawing\",\n createdAt: existing?.createdAt || drawing.createdAt || now,\n updatedAt: now,\n };\n await blob.setJSON(drawingKey(saved.deviceId, saved.id), saved);\n\n // Keep a compact index for gallery reads and prune old full drawing blobs.\n const nextItems = [\n normalizeGalleryItem(saved),\n ...existingItems.filter((item) => item.id !== saved.id),\n ].sort((a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt));\n\n const keep = nextItems.slice(0, galleryLimit);\n const drop = nextItems.slice(galleryLimit);\n await Promise.all(drop.map((item) => blob.delete(drawingKey(saved.deviceId, item.id))));\n await setGallery(saved.deviceId, keep);\n return jsonResponse({ item: normalizeGalleryItem(saved), items: keep });\n }\n\n const drawingId = pathParts[2];\n const deviceId = url.searchParams.get(\"deviceId\");\n if (!validId(deviceId) || !validId(drawingId)) return badRequest(\"A valid deviceId and drawing id are required.\");\n\n if (request.method === \"GET\" && pathParts.length === 3) {\n const drawing = await blob.getJSON(drawingKey(deviceId, drawingId));\n if (!drawing) return notFound();\n return jsonResponse({ drawing });\n }\n\n if (request.method === \"DELETE\" && pathParts.length === 3) {\n await blob.delete(drawingKey(deviceId, drawingId));\n const items = (await getGallery(deviceId)).filter((item) => item.id !== drawingId);\n await setGallery(deviceId, items);\n return jsonResponse({ items });\n }\n }\n\n return notFound();\n}\n\nconst html = String.raw`\n\n\n \n \n Susie Draw\n \n\n\n

Susie Draw

\n Drawing\n \n

\n Transparent image\n \n

\n \n \n

\n \n

\n Tool\n

\n \n \n \n

\n Brush size\n \n \n

\n Brush color\n \n

\n Reference opacity\n \n

\n \n

\n \n \n

Autosave ready

\n \n

\n \n \n

\n \n\n`;\n\nexport default async function handler(request: Request): Promise {\n const url = new URL(request.url);\n if (url.pathname.startsWith(\"/api/\")) {\n return await handleApi(request, url);\n }\n\n return new Response(html, {\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n },\n });\n}\n","susiedraw",[135],"pulls","branches","forks","envVars",{"_150":131,"_152":131},"connections",{"_150":131,"_151":131},"count","unfilledCount","emptyCount",{"_41":134,"_31":135,"_29":55,"_128":-5,"_39":40,"_38":136,"_129":24,"_36":159,"_13":138,"_32":139,"_34":140,"_23":24,"_132":141,"_156":160,"_26":161},{"_41":127,"_31":27,"_29":30,"_128":-5,"_39":40,"_38":14,"_129":24,"_36":155,"_13":131,"_32":33,"_34":35,"_23":24,"_132":-5,"_156":157,"_26":158},["D",1784826382312],"children",[],[27],["D",1779801701446],[],[135],["D",1779713000520],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"ctx",{"_77":-5,"_122":199,"_200":201,"_202":203,"_204":24,"_205":24,"_206":24,"_207":57,"_208":-5,"_209":-7,"_210":-7,"_211":131,"_212":24,"_213":24,"_214":-5,"_215":24,"_216":24,"_217":24,"_218":-5},"ENV",{"_170":171,"_172":173,"_174":85,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198},"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"]

Saved drawings

Diff · v19