[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_254":255,"_256":257},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_17":18,"_43":-7,"_161":-5,"_19":162,"_163":164,"_165":166,"_167":168,"_169":170,"_21":171,"_172":-5,"_173":-5,"_174":24,"_175":176,"_177":123,"_178":-5,"_179":-5,"_180":181},"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":24,"_30":-5},"handle","jxnblk","name","css","branchName","main","path","notes","project",{"_37":109,"_13":14,"_41":110,"_111":-5,"_112":24,"_113":114,"_115":114,"_116":117,"_118":119,"_30":70,"_120":121,"_122":123,"_124":-5,"_125":126,"_127":26,"_45":46,"_128":-5,"_129":-5,"_130":-5,"_131":-5,"_132":133,"_134":133,"_135":136,"_137":136,"_138":136,"_139":133,"_140":133,"_56":141,"_142":143,"_144":145,"_146":24},"file",{"_66":67,"_13":18,"_68":21,"_69":24,"_108":-5},"isDirectory",false,"page",0,"history",[31,32,33,34,35,36],"hasNext","userId",{"_37":101,"_39":40,"_41":102,"_43":103,"_45":46,"_47":94,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":-5,"_54":-5,"_55":-5,"_56":104,"_21":105,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":106},{"_37":94,"_39":40,"_41":95,"_43":96,"_45":46,"_47":87,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":-5,"_54":-5,"_55":-5,"_56":97,"_21":98,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":99},{"_37":87,"_39":40,"_41":88,"_43":89,"_45":46,"_47":80,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":-5,"_54":-5,"_55":-5,"_56":90,"_21":91,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":92},{"_37":80,"_39":40,"_41":81,"_43":82,"_45":46,"_47":73,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":-5,"_54":-5,"_55":-5,"_56":83,"_21":84,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":85},{"_37":73,"_39":40,"_41":74,"_43":75,"_45":46,"_47":38,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":-5,"_54":-5,"_55":-5,"_56":76,"_21":77,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":78},{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":-5,"_54":-5,"_55":-5,"_56":57,"_21":58,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":64},"id","0bc01fb6-1f89-11f0-a879-569c3dd06744","branchId","b76a0d9c-1ec4-11f0-9d95-569c3dd06744","createdAt",["D",1745333391639],"version",17,"orgId","62a75f8d-be32-4eaa-989a-23f3433a7d42","parentId","f68dc9ee-1eee-11f0-bf6d-569c3dd06744","incomingCommitId","aiChatMessageId","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle","source","clientLabel","user",{"_37":70,"_45":46,"_11":12,"_71":72},{"_66":67,"_13":18,"_68":21,"_69":24},"pull","merge","revert","multiple","commits",[65],{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":-5,"_54":-5,"_55":-5,"_56":57,"_21":58,"_59":-5,"_60":-5,"_61":-5},"fileId","0bbe5bd6-1f89-11f0-a879-569c3dd06744","fileType","deleted","5e11e267-23cd-4ee4-86f4-3bf2a5ed69d7","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789590275&sig=3b60f2783555c03de868a25b93b35a50f4a6d7d49a2c3959d8f8a03da1160c27","2a17a9b6-1f89-11f0-b7f5-569c3dd06744",["D",1745333442543],18,{"_37":70,"_45":46,"_11":12,"_71":72},{"_66":67,"_13":18,"_68":21,"_69":24},[79],{"_37":73,"_39":40,"_41":74,"_43":75,"_45":46,"_47":38,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":-5,"_54":-5,"_55":-5,"_56":76,"_21":77,"_59":-5,"_60":-5,"_61":-5},"320f4836-1f89-11f0-a879-569c3dd06744",["D",1745333455913],19,{"_37":70,"_45":46,"_11":12,"_71":72},{"_66":67,"_13":18,"_68":21,"_69":24},[86],{"_37":80,"_39":40,"_41":81,"_43":82,"_45":46,"_47":73,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":-5,"_54":-5,"_55":-5,"_56":83,"_21":84,"_59":-5,"_60":-5,"_61":-5},"7aeb6d8c-1f89-11f0-8029-569c3dd06744",["D",1745333578148],20,{"_37":70,"_45":46,"_11":12,"_71":72},{"_66":67,"_13":18,"_68":21,"_69":24},[93],{"_37":87,"_39":40,"_41":88,"_43":89,"_45":46,"_47":80,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":-5,"_54":-5,"_55":-5,"_56":90,"_21":91,"_59":-5,"_60":-5,"_61":-5},"8f35dbf6-1f89-11f0-8be4-569c3dd06744",["D",1745333612192],21,{"_37":70,"_45":46,"_11":12,"_71":72},{"_66":67,"_13":18,"_68":21,"_69":24},[100],{"_37":94,"_39":40,"_41":95,"_43":96,"_45":46,"_47":87,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":-5,"_54":-5,"_55":-5,"_56":97,"_21":98,"_59":-5,"_60":-5,"_61":-5},"d25c85dc-1f8a-11f0-9c03-569c3dd06744",["D",1745334154348],22,{"_37":70,"_45":46,"_11":12,"_71":72},{"_66":67,"_13":18,"_68":21,"_69":24},[107],{"_37":101,"_39":40,"_41":102,"_43":103,"_45":46,"_47":94,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":-5,"_54":-5,"_55":-5,"_56":104,"_21":105,"_59":-5,"_60":-5,"_61":-5},"deletedAtVersion","b769c17a-1ec4-11f0-9d95-569c3dd06744",["D",1745249068805],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","procgen css utils","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/b234f578-449b-4a3a-d1c7-82c60571f900/square512?exp=1789590275&sig=7b626cd3cefdf392756e409e83dd70024d1d1a99021c5d2a954b9dbc747612a1","pinnedFileId","d421ec66-1ec4-11f0-a808-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion",63,"likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_160":72},"org",{"_11":12,"_155":156,"_71":72,"_30":70,"_157":158,"_159":24},"branch",{"_43":126,"_13":16,"_37":40,"_147":109,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":14,"_154":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Brent Jackson","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_37":109,"_13":14,"_41":250,"_111":-5,"_112":24,"_113":114,"_115":114,"_116":117,"_118":119,"_30":70,"_120":121,"_122":123,"_124":-5,"_125":126,"_127":26,"_45":46,"_128":-5,"_129":-5,"_130":-5,"_131":-5,"_132":133,"_134":133,"_135":136,"_137":136,"_138":136,"_139":133,"_140":133,"_56":251,"_142":252,"_144":253,"_146":24},"tree",[202,203,204,205,206],"files",[202,203,204,205,206],"counts",{"_191":26,"_192":193,"_194":26,"_195":196,"_197":198},"contents",[],{"_37":182,"_13":18,"_66":67,"_47":-5,"_39":40,"_183":103,"_184":123,"_41":185,"_43":186,"_68":21,"_187":188,"_69":24,"_189":-5,"_17":190},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},"d25a9a10-1f8a-11f0-9c03-569c3dd06744","branchVersion","latest",["D",1745334154348],5,"content","notes\n\n- base reset\n- typography utils \n - h1-h6\n - bold, regular, italic\n - caps\n- flexbox\n- grid\n\n---\n\ncolors\n\nsimple options for generative color palettes:\n\n- dominant color + hello-color style procgen \n- existing color palettes referenced by name. e.g. highlightjs, prism, colorbrewer, etc.\n- existing css libs: just ask an llm to produce it\n- remake palx","label",[18],"pulls","branches",2,"forks","envVars",{"_199":26,"_201":26},"connections",{"_199":26,"_200":26},"count","unfilledCount","emptyCount",{"_37":241,"_13":242,"_66":243,"_47":-5,"_39":40,"_183":126,"_184":123,"_41":244,"_43":245,"_68":213,"_187":246,"_69":24,"_189":247,"_216":248,"_17":249},{"_37":231,"_13":232,"_66":233,"_47":-5,"_39":40,"_183":234,"_184":123,"_41":235,"_43":236,"_68":213,"_187":237,"_69":24,"_189":238,"_216":239,"_17":240},{"_37":182,"_13":18,"_66":67,"_47":-5,"_39":40,"_183":103,"_184":123,"_41":228,"_43":186,"_68":21,"_187":188,"_69":24,"_189":-5,"_216":229,"_17":230},{"_37":219,"_13":220,"_66":121,"_47":-5,"_39":40,"_183":221,"_184":123,"_41":222,"_43":223,"_68":213,"_187":224,"_69":24,"_189":225,"_216":226,"_17":227},{"_37":207,"_13":208,"_66":209,"_47":-5,"_39":40,"_183":210,"_184":123,"_41":211,"_43":212,"_68":213,"_187":214,"_69":24,"_189":215,"_216":217,"_17":218},"c89e4e0a-4301-11f0-b51b-76b3cceeab13","typography.css.tsx","3312a61a-1ec6-11f0-9a9c-569c3dd06744",55,["D",1749233538821],10,"http","const COLOPHON = \"/** Generated with https://TODO\";\n\n// TODO: \n// font-size\n// line-height\n// caps\n// bold\n// italic\nconst createCSS = () => (`\n${COLOPHON}\n\n:root {\n --font-size-1: 32px;\n --font-size-2: 24px;\n --font-size-3: 20px;\n --font-size-4: 16px;\n --font-size-5: 14px;\n --font-size-6: 12px;\n}\n\n.h1 { font-size: var(--font-size-1) }\n.h2 { font-size: var(--font-size-2) }\n.h3 { font-size: var(--font-size-3) }\n.h4 { font-size: var(--font-size-4) }\n.h5 { font-size: var(--font-size-5) }\n.h6 { font-size: var(--font-size-6) }\n\n.line-height-1 { line-height: 1 }\n.line-height-2 { line-height: 1.25 }\n.line-height-3 { line-height: 1.5 }\n\n.caps {\n text-transform: uppercase;\n letter-spacing: 0.2em;\n}\n.bold { font-weight: bold }\n.italic { font-style: italic }\n`)\nexport default async function (req: Request): Promise {\n const css = createCSS();\n\n return new Response(css, {\n headers: {\n \"Content-Type\": \"text/css\",\n }\n });\n}","typography","children",[],[208],"b1d694e8-4301-11f0-826b-76b3cceeab13","space.css.tsx",52,["D",1749233500605],25,"const COLOPHON = \"/** Generated with https://space.val.run */\\n\";\n\nclass Config {\n space: number[];\n breakpoints: number[];\n hyphenate: boolean;\n responsive: boolean;\n\n constructor (space: number[], breakpoints: number[], hyphenate: boolean = false, responsive: boolean = false) {\n this.space = space;\n this.breakpoints = breakpoints;\n this.hyphenate = hyphenate;\n this.responsive = responsive;\n }\n\n GetVars () {\n const vars = [\n \" --space-0:0;\"\n ];\n for (let i = 0; i < this.space.length; i++) {\n vars.push(` --space-${i + 1}:${this.space[i]}px;`);\n }\n return [\n \":root{\",\n ...vars,\n \"}\",\n \"\",\n ].join(\"\\n\");\n }\n\n GetSpaceDeclarations () {\n const steps = [0, ...this.space];\n const declarations = [];\n const hyp = this.hyphenate ? \"-\" : \"\";\n\n for (let i = 0; i < steps.length; i++) {\n for (let j = 0; j < props.length; j++) {\n let prop = props[j];\n let [cn, ...properties] = prop;\n for (let p = 0; p < properties.length; p++) {\n let classname = [ \".\", cn, hyp, i ].join(\"\");\n declarations.push(`${classname} { ${properties[p]}:var(--space-${i}) }`);\n }\n }\n declarations.push(\"\"); // newlines\n }\n const margins = props.slice(0, 7);\n for (let i = 0; i < margins.length; i++) {\n let [cn, ...properties] = margins[i];\n for (let p = 0; p < properties.length; p++) {\n // auto margins are always hyphenated\n let classname = [\".\", cn, \"-auto\"].join(\"\");\n declarations.push(`${classname} { ${properties[p]}:auto }`);\n }\n }\n\n return declarations; \n }\n\n GetResponsiveStyles (spaceDeclarations: string[]) {\n if (!this.responsive) return \"\";\n \n const media = [];\n const tshirts = [\"sm\",\"md\",\"lg\",\"xl\",\"2xl\",\"3xl\",\"4xl\"];\n for (let i = 0; i < this.breakpoints.length; i++) {\n let bp = this.breakpoints[i];\n let tshirt = tshirts[i];\n let prefix = `.${tshirt}\\\\:`;\n media.push([\n \"\",\n `@media screen and (min-width:${bp}px){`,\n spaceDeclarations.map(dec => {\n if (dec === \"\") return \"\";\n return \" \" + prefix + dec.replace(/^\\./, \"\");\n }).join(\"\\n\"),\n \"}\",\n \"\",\n ].join(\"\\n\"));\n }\n return media.join(\"\\n\");\n }\n\n // comment me\n GenerateCSS () {\n const vars = this.GetVars();\n const space = this.GetSpaceDeclarations();\n const responsive = this.GetResponsiveStyles(space);\n\n return [\n COLOPHON,\n vars,\n space.join(\"\\n\"),\n responsive,\n ].join(\"\\n\");\n }\n}\n\nfunction getParams (url: URL): [number[], number[], boolean, boolean] {\n let params = url.searchParams;\n let space = params.get(\"space\");\n let breakpoints = params.get(\"breakpoints\");\n let hyphenate = params.get(\"hyphenate\");\n let responsive = params.get(\"responsive\") ?? !!breakpoints;\n if (space) space = space.split(\",\").map(Number);\n else space = defaults.space;\n if (breakpoints) breakpoints = breakpoints.split(\",\").map(Number);\n else breakpoints = defaults.breakpoints;\n return [space, breakpoints, Boolean(hyphenate), Boolean(responsive)];\n}\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n let [space, breakpoints, hyphenate, responsive] = getParams(url);\n const config = new Config(space, breakpoints, hyphenate, responsive);\n\n const css = config.GenerateCSS();\n\n return new Response(css, {\n headers: {\n \"Content-Type\": \"text/css\",\n },\n });\n}\n\nconst defaults = {\n space: [\n 4,\n 8,\n 16,\n 32,\n 64,\n 128,\n 256,\n 512,\n ],\n breakpoints: [\n 640,\n 768,\n 1024,\n 1280,\n ],\n};\n\nconst props = [\n [\"m\", \"margin\"],\n [\"mx\", \"margin-left\", \"margin-right\"],\n [\"my\", \"margin-top\", \"margin-bottom\"],\n [\"mt\", \"margin-top\"],\n [\"mr\", \"margin-right\"],\n [\"mb\", \"margin-bottom\"],\n [\"ml\", \"margin-left\"],\n [\"p\", \"padding\"],\n [\"px\", \"padding-left\", \"padding-right\"],\n [\"py\", \"padding-top\", \"padding-bottom\"],\n [\"pt\", \"padding-top\"],\n [\"pr\", \"padding-right\"],\n [\"pb\", \"padding-bottom\"],\n [\"pl\", \"padding-left\"],\n [\"gap\", \"gap\"],\n];","space",[],[220],["D",1745334154348],[],[18],"bb735af4-4301-11f0-9318-76b3cceeab13","flexbox.css.tsx","ea5f6d80-1f8e-11f0-9c3c-569c3dd06744",53,["D",1749233516732],11,"const COLOPHON = \"/** Generated with https://flexbox.val.run */\\n\";\n\n// original flexbox from basscss circa 2015\n// todo: generative breakpoints + flex-column breakpoints\nconst createCSS = (breakpoints: [number, number, number]) => (`\n${COLOPHON}\n\n.flex { display: flex }\n@media (min-width: ${breakpoints[0]}px) { .sm\\:flex { display: flex } }\n@media (min-width: ${breakpoints[1]}px) { .md\\:flex { display: flex } }\n@media (min-width: ${breakpoints[2]}px) { .lg\\:flex { display: flex } }\n\n.flex-column { flex-direction: column }\n.flex-wrap { flex-wrap: wrap }\n\n.items-start { align-items: flex-start }\n.items-end { align-items: flex-end }\n.items-center { align-items: center }\n.items-baseline { align-items: baseline }\n.items-stretch { align-items: stretch }\n\n.self-start { align-self: flex-start }\n.self-end { align-self: flex-end }\n.self-center { align-self: center }\n.self-baseline { align-self: baseline }\n.self-stretch { align-self: stretch }\n\n.justify-start { justify-content: flex-start }\n.justify-end { justify-content: flex-end }\n.justify-center { justify-content: center }\n.justify-between { justify-content: space-between }\n.justify-around { justify-content: space-around }\n.justify-evenly { justify-content: space-evenly }\n\n.content-start { align-content: flex-start }\n.content-end { align-content: flex-end }\n.content-center { align-content: center }\n.content-between { align-content: space-between }\n.content-around { align-content: space-around }\n.content-stretch { align-content: stretch }\n\n/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */\n.flex-auto {\n flex: 1 1 auto;\n min-width: 0; /* 1 */\n min-height: 0; /* 1 */\n}\n.flex-none { flex: none }\n\n.order-0 { order: 0 }\n.order-1 { order: 1 }\n.order-2 { order: 2 }\n.order-3 { order: 3 }\n.order-last { order: 99999 }\n`);\n\n\nexport default async function (req: Request): Promise {\n // todo: parse params\n const css = createCSS([640, 768, 1024]);\n return new Response(css, {\n headers: {\n \"Content-Type\": \"text/css\",\n }\n });\n}","flexbox",[],[232],"f8957b56-4301-11f0-a91d-76b3cceeab13","css.tsx","d0f315ea-4301-11f0-8df1-76b3cceeab13",["D",1749233619298],7,"export default async function (req: Request): Promise {\n return new Response(\"/** css */\", {\n headers: {\n \"Content-Type\": \"text/css\",\n },\n });\n}","bcss",[],[242],["D",1745249068805],{"_11":12,"_160":72},{"_11":12,"_155":156,"_71":72,"_30":70,"_157":158,"_159":24},{"_43":126,"_13":16,"_37":40,"_147":109,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":14,"_154":12},"ctx",{"_56":-5,"_179":287,"_288":289,"_290":291,"_292":24,"_293":24,"_294":24,"_295":123,"_296":-5,"_297":-7,"_298":-7,"_299":26,"_300":24,"_301":24,"_302":-5,"_303":24,"_304":24,"_305":24,"_306":-5},"ENV",{"_258":259,"_260":261,"_262":16,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

History · notes