[{"_1":2,"_505":-5,"_506":-5},"loaderData",{"_3":4,"_96":97,"_247":248,"_504":-5},"root",{"_5":6,"_33":34,"_65":66},"ctx",{"_7":8,"_19":20,"_21":-5,"_22":23,"_24":25,"_26":27,"_28":27,"_29":27,"_30":31,"_32":27},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers",false,"preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","d7a4feed60b6196412e9d6920bf0c5ff91ea135c","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","WORKER_FINGERPRINT","963e45ace5b0a45db0aea6fd292ac66b","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":44,"_72":73,"_74":73,"_75":27,"_76":73,"_77":73,"_78":73,"_79":73,"_80":73,"_81":73,"_82":73,"_83":73,"_84":85,"_94":27,"_95":27},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_86":27,"_87":73,"_88":89,"_90":73,"_91":44,"_92":27,"_93":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/_app.x.$handle.$name",{"_98":99,"_100":101,"_102":42,"_103":73,"_104":-7,"_105":106,"_151":152,"_217":218,"_219":220,"_226":227,"_192":-5,"_243":-5,"_244":-5,"_245":27,"_246":27},"handle","jxnblk","name","css","branchName","path","version","project",{"_107":108,"_100":101,"_109":110,"_111":-5,"_112":27,"_113":114,"_115":116,"_117":118,"_12":119,"_120":121,"_122":123,"_124":125,"_126":31,"_14":127,"_128":129,"_130":129,"_131":132,"_133":132,"_134":132,"_135":129,"_136":129,"_21":137,"_140":141,"_150":27},"id","b769c17a-1ec4-11f0-9d95-569c3dd06744","createdAt",["D",1745249068805],"deletedAt","legacyEnvVars","privacy","public","description","procgen css utils","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/b234f578-449b-4a3a-d1c7-82c60571f900/square512","5e11e267-23cd-4ee4-86f4-3bf2a5ed69d7","pinnedFileId","d421ec66-1ec4-11f0-a808-569c3dd06744","pinPreview",true,"screenshotVersion",63,"likeCount","62a75f8d-be32-4eaa-989a-23f3433a7d42","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_98":99,"_138":139},"profileImageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512","branch",{"_104":125,"_100":42,"_107":142,"_143":108,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":101,"_149":99},"b76a0d9c-1ec4-11f0-9d95-569c3dd06744","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectUserId","projectName","userHandle","isOwned","tree",[153,174,185,196,206],{"_107":154,"_100":155,"_156":157,"_158":-5,"_159":142,"_160":125,"_161":123,"_109":162,"_104":163,"_164":165,"_166":167,"_168":27,"_169":170,"_171":172,"_103":173},"f8957b56-4301-11f0-a91d-76b3cceeab13","css.tsx","fileId","d0f315ea-4301-11f0-8df1-76b3cceeab13","parentId","branchId","branchVersion","latest",["D",1749233619298],7,"fileType","http","content","export default async function (req: Request): Promise {\n return new Response(\"/** css */\", {\n headers: {\n \"Content-Type\": \"text/css\",\n },\n });\n}","deleted","label","bcss","children",[],[155],{"_107":175,"_100":176,"_156":177,"_158":-5,"_159":142,"_160":178,"_161":123,"_109":179,"_104":180,"_164":165,"_166":181,"_168":27,"_169":182,"_171":183,"_103":184},"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",[],[176],{"_107":186,"_100":187,"_156":188,"_158":-5,"_159":142,"_160":189,"_161":123,"_109":190,"_104":191,"_164":192,"_166":193,"_168":27,"_169":-5,"_171":194,"_103":195},"d25a9a10-1f8a-11f0-9c03-569c3dd06744","notes","0bbe5bd6-1f89-11f0-a879-569c3dd06744",22,["D",1745334154348],5,"file","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",[],[187],{"_107":197,"_100":198,"_156":121,"_158":-5,"_159":142,"_160":199,"_161":123,"_109":200,"_104":201,"_164":165,"_166":202,"_168":27,"_169":203,"_171":204,"_103":205},"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",[],[198],{"_107":207,"_100":208,"_156":209,"_158":-5,"_159":142,"_160":210,"_161":123,"_109":211,"_104":212,"_164":165,"_166":213,"_168":27,"_169":214,"_171":215,"_103":216},"c89e4e0a-4301-11f0-b51b-76b3cceeab13","typography.css.tsx","3312a61a-1ec6-11f0-9a9c-569c3dd06744",55,["D",1749233538821],10,"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",[],[208],"files",[153,174,185,196,206],"counts",{"_221":31,"_222":223,"_224":31,"_225":31},"pulls","branches",2,"forks","envVars","contents",[228,231,234,237,240],{"_107":154,"_100":155,"_156":157,"_158":-5,"_159":142,"_160":125,"_161":123,"_109":229,"_104":163,"_164":165,"_166":167,"_168":27,"_169":170,"_103":230},["D",1749233619298],[155],{"_107":175,"_100":176,"_156":177,"_158":-5,"_159":142,"_160":178,"_161":123,"_109":232,"_104":180,"_164":165,"_166":181,"_168":27,"_169":182,"_103":233},["D",1749233516732],[176],{"_107":186,"_100":187,"_156":188,"_158":-5,"_159":142,"_160":189,"_161":123,"_109":235,"_104":191,"_164":192,"_166":193,"_168":27,"_169":-5,"_103":236},["D",1745334154348],[187],{"_107":197,"_100":198,"_156":121,"_158":-5,"_159":142,"_160":199,"_161":123,"_109":238,"_104":201,"_164":165,"_166":202,"_168":27,"_169":203,"_103":239},["D",1749233500605],[198],{"_107":207,"_100":208,"_156":209,"_158":-5,"_159":142,"_160":210,"_161":123,"_109":241,"_104":212,"_164":165,"_166":213,"_168":27,"_169":214,"_103":242},["D",1749233538821],[208],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_98":99,"_100":101,"_102":42,"_105":249,"_253":254,"_502":31,"_503":123},{"_107":108,"_100":101,"_109":250,"_111":-5,"_112":27,"_113":114,"_115":116,"_117":118,"_12":119,"_120":121,"_122":123,"_124":125,"_126":31,"_14":127,"_128":129,"_130":129,"_131":132,"_133":132,"_134":132,"_135":129,"_136":129,"_21":251,"_140":252,"_150":27},["D",1745249068805],{"_98":99,"_138":139},{"_104":125,"_100":42,"_107":142,"_143":108,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":101,"_149":99},"history",[255,260,269,277,286,295,302,311,319,324,333,338,343,351,359,367,375,383,391,399,406,413,421,429,437,445,453,461,469,476,485,493],{"_156":157,"_104":125,"_109":256,"_159":142,"_217":257},["D",1749233619298],[258],{"_107":154,"_159":142,"_156":157,"_100":155,"_166":167,"_164":165,"_104":163,"_158":-5,"_109":256,"_160":125,"_169":170,"_161":123,"_168":27,"_103":259},[155],{"_156":157,"_104":261,"_109":262,"_159":142,"_217":263},62,["D",1749233613756],[264],{"_107":265,"_159":142,"_156":157,"_100":155,"_166":266,"_164":165,"_104":267,"_158":-5,"_109":262,"_160":261,"_169":170,"_161":27,"_168":27,"_103":268},"f547f000-4301-11f0-a4cf-76b3cceeab13","export default async function (req: Request): Promise {\n return new Response(\"\", {\n headers: {\n \"Content-Type\": \"text/css\",\n },\n });\n}",6,[155],{"_156":157,"_104":270,"_109":271,"_159":142,"_217":272},61,["D",1749233607715],[273],{"_107":274,"_159":142,"_156":157,"_100":155,"_166":275,"_164":165,"_104":191,"_158":-5,"_109":271,"_160":270,"_169":170,"_161":27,"_168":27,"_103":276},"f1af87e6-4301-11f0-a276-76b3cceeab13","export default async function (req: Request): Promise {\n return new Response(\"\" {\n headers: {\n \"Content-Type\": \"text/css\",\n },\n });\n}",[155],{"_156":157,"_104":278,"_109":279,"_159":142,"_217":280},60,["D",1749233604208],[281],{"_107":282,"_159":142,"_156":157,"_100":155,"_166":283,"_164":165,"_104":284,"_158":-5,"_109":279,"_160":278,"_169":170,"_161":27,"_168":27,"_103":285},"ef979796-4301-11f0-a91d-76b3cceeab13","export default async function (req: Request): Promise {\n return new Response(\"\" {\n headers: {\n \"Content-Type\": \"text/css\",\n }\n \n });\n}",4,[155],{"_156":157,"_104":287,"_109":288,"_159":142,"_217":289},59,["D",1749233579880],[290],{"_107":291,"_159":142,"_156":157,"_100":155,"_166":292,"_164":165,"_104":293,"_158":-5,"_109":288,"_160":287,"_169":170,"_161":27,"_168":27,"_103":294},"e116de3e-4301-11f0-9f96-76b3cceeab13","export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",3,[155],{"_156":157,"_104":296,"_109":297,"_159":142,"_217":298},58,["D",1749233579793],[299],{"_107":300,"_159":142,"_156":157,"_100":155,"_166":73,"_164":165,"_104":223,"_158":-5,"_109":297,"_160":296,"_169":170,"_161":27,"_168":27,"_103":301},"e109e256-4301-11f0-9714-76b3cceeab13",[155],{"_156":157,"_104":303,"_109":304,"_159":142,"_217":305},57,["D",1749233555572],[306],{"_107":307,"_159":142,"_156":157,"_100":155,"_166":73,"_164":308,"_104":309,"_158":-5,"_109":304,"_160":303,"_169":170,"_161":27,"_168":27,"_103":310},"d29b8738-4301-11f0-8df1-76b3cceeab13","script",1,[155],{"_156":157,"_104":312,"_109":313,"_159":142,"_217":314},56,["D",1749233552805],[315],{"_107":316,"_159":142,"_156":157,"_100":317,"_166":73,"_164":308,"_104":31,"_158":-5,"_109":313,"_160":312,"_169":170,"_161":27,"_168":27,"_103":318},"d0f3154a-4301-11f0-8df1-76b3cceeab13","new-file-1299.tsx",[317],{"_156":209,"_104":210,"_109":320,"_159":142,"_217":321},["D",1749233538821],[322],{"_107":207,"_159":142,"_156":209,"_100":208,"_166":213,"_164":165,"_104":212,"_158":-5,"_109":320,"_160":210,"_169":214,"_161":123,"_168":27,"_103":323},[208],{"_156":209,"_104":325,"_109":326,"_159":142,"_217":327},54,["D",1749233528209],[328],{"_107":329,"_159":142,"_156":209,"_100":208,"_166":330,"_164":165,"_104":331,"_158":-5,"_109":326,"_160":325,"_169":214,"_161":27,"_168":27,"_103":332},"c24a5f12-4301-11f0-b3d3-76b3cceeab13","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: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}",9,[208],{"_156":177,"_104":178,"_109":334,"_159":142,"_217":335},["D",1749233516732],[336],{"_107":175,"_159":142,"_156":177,"_100":176,"_166":181,"_164":165,"_104":180,"_158":-5,"_109":334,"_160":178,"_169":182,"_161":123,"_168":27,"_103":337},[176],{"_156":121,"_104":199,"_109":339,"_159":142,"_217":340},["D",1749233500605],[341],{"_107":197,"_159":142,"_156":121,"_100":198,"_166":202,"_164":165,"_104":201,"_158":-5,"_109":339,"_160":199,"_169":203,"_161":123,"_168":27,"_103":342},[198],{"_156":209,"_104":344,"_109":345,"_159":142,"_217":346},51,["D",1749233498052],[347],{"_107":348,"_159":142,"_156":209,"_100":208,"_166":330,"_164":308,"_104":349,"_158":-5,"_109":345,"_160":344,"_169":214,"_161":27,"_168":27,"_103":350},"b050fe6a-4301-11f0-ae53-76b3cceeab13",8,[208],{"_156":209,"_104":352,"_109":353,"_159":142,"_217":354},50,["D",1749233430019],[355],{"_107":356,"_159":142,"_156":209,"_100":208,"_166":357,"_164":308,"_104":163,"_158":-5,"_109":353,"_160":352,"_169":214,"_161":27,"_168":27,"_103":358},"87c40a6e-4301-11f0-88cc-76b3cceeab13","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: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`)\nexport default async function (req: Request): Promise {\n}",[208],{"_156":209,"_104":360,"_109":361,"_159":142,"_217":362},49,["D",1749233409636],[363],{"_107":364,"_159":142,"_156":209,"_100":208,"_166":365,"_164":308,"_104":267,"_158":-5,"_109":361,"_160":360,"_169":214,"_161":27,"_168":27,"_103":366},"7b9dc45a-4301-11f0-8935-76b3cceeab13","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: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`)\nexport default async function (req: Request): Promise {\n}",[208],{"_156":209,"_104":368,"_109":369,"_159":142,"_217":370},48,["D",1749233379360],[371],{"_107":372,"_159":142,"_156":209,"_100":208,"_166":373,"_164":308,"_104":191,"_158":-5,"_109":369,"_160":368,"_169":214,"_161":27,"_168":27,"_103":374},"69922f26-4301-11f0-a413-76b3cceeab13","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: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`)\nexport default async function (req: Request): Promise {\n}",[208],{"_156":209,"_104":376,"_109":377,"_159":142,"_217":378},47,["D",1749233241854],[379],{"_107":380,"_159":142,"_156":209,"_100":208,"_166":381,"_164":308,"_104":284,"_158":-5,"_109":377,"_160":376,"_169":214,"_161":27,"_168":27,"_103":382},"179c26ea-4301-11f0-a03a-76b3cceeab13","const COLOPHON = \"/** Generated with https://TODO\";\n// TODO: \n// font-size\n// line-height\n// caps\n// bold\n// italic\nexport default async function (req: Request): Promise {\n}",[208],{"_156":177,"_104":384,"_109":385,"_159":142,"_217":386},46,["D",1749233188063],[387],{"_107":388,"_159":142,"_156":177,"_100":176,"_166":389,"_164":165,"_104":212,"_158":-5,"_109":385,"_160":384,"_169":182,"_161":27,"_168":27,"_103":390},"f78c83cc-4300-11f0-8f2a-76b3cceeab13","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\": \"\",\n }\n });\n}",[176],{"_156":121,"_104":392,"_109":393,"_159":142,"_217":394},45,["D",1747423117065],[395],{"_107":396,"_159":142,"_156":121,"_100":198,"_166":202,"_164":165,"_104":397,"_158":-5,"_109":393,"_160":392,"_169":203,"_161":27,"_168":27,"_103":398},"91294772-328a-11f0-b441-569c3dd06744",24,[198],{"_156":177,"_104":400,"_109":401,"_159":142,"_217":402},44,["D",1745336288233],[403],{"_107":404,"_159":142,"_156":177,"_100":176,"_166":389,"_164":165,"_104":331,"_158":-5,"_109":401,"_160":400,"_169":182,"_161":27,"_168":27,"_103":405},"ca3f7148-1f8f-11f0-8cfb-569c3dd06744",[176],{"_156":177,"_104":407,"_109":408,"_159":142,"_217":409},43,["D",1745336286245],[410],{"_107":411,"_159":142,"_156":177,"_100":176,"_166":389,"_164":308,"_104":349,"_158":-5,"_109":408,"_160":407,"_169":182,"_161":27,"_168":27,"_103":412},"c912342c-1f8f-11f0-951e-569c3dd06744",[176],{"_156":177,"_104":414,"_109":415,"_159":142,"_217":416},42,["D",1745336272786],[417],{"_107":418,"_159":142,"_156":177,"_100":176,"_166":419,"_164":308,"_104":163,"_158":-5,"_109":415,"_160":414,"_169":182,"_161":27,"_168":27,"_103":420},"c10ba98e-1f8f-11f0-9cd8-569c3dd06744","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.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\": \"\",\n }\n });\n}",[176],{"_156":177,"_104":422,"_109":423,"_159":142,"_217":424},41,["D",1745336257228],[425],{"_107":426,"_159":142,"_156":177,"_100":176,"_166":427,"_164":308,"_104":267,"_158":-5,"_109":423,"_160":422,"_169":182,"_161":27,"_168":27,"_103":428},"b7c45a56-1f8f-11f0-a3cb-569c3dd06744","const COLOPHON = \"/** Generated with https://space.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.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\": \"\",\n }\n });\n}",[176],{"_156":177,"_104":430,"_109":431,"_159":142,"_217":432},40,["D",1745336244345],[433],{"_107":434,"_159":142,"_156":177,"_100":176,"_166":435,"_164":308,"_104":191,"_158":-5,"_109":431,"_160":430,"_169":182,"_161":27,"_168":27,"_103":436},"b016ba1a-1f8f-11f0-87fd-569c3dd06744","const COLOPHON = \"/** Generated with https://space.val.run */\\n\";\n\n// original flexbox from basscss circa 2015\n// todo: generative breakpoints\nconst createCSS = (breakpoints: [number, number, number]) => (`\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\": \"\",\n }\n });\n}",[176],{"_156":177,"_104":438,"_109":439,"_159":142,"_217":440},39,["D",1745336180726],[441],{"_107":442,"_159":142,"_156":177,"_100":176,"_166":443,"_164":308,"_104":284,"_158":-5,"_109":439,"_160":438,"_169":182,"_161":27,"_168":27,"_103":444},"8a2b40be-1f8f-11f0-a9f0-569c3dd06744","// original flexbox from basscss circa 2015\nconst createCSS = (breakpoints: [number, number, number]) => (`\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\n const css = createCSS([640, 768, 1024]);\n return new Response(css, {\n headers: {\n \"Content-Type\": \"\",\n }\n });\n}",[176],{"_156":177,"_104":446,"_109":447,"_159":142,"_217":448},38,["D",1745336176157],[449],{"_107":450,"_159":142,"_156":177,"_100":176,"_166":451,"_164":308,"_104":293,"_158":-5,"_109":447,"_160":446,"_169":182,"_161":27,"_168":27,"_103":452},"87728972-1f8f-11f0-a620-569c3dd06744","// original flexbox from basscss circa 2015\nconst createCSS = (breakpoints: [number, number, number]) => (`\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\n const css = createCSS([640, 768, 1024]);\n return new Response(css, {\n headers: {\n \"Content-Type\": \"\",\n }\n \n });\n}",[176],{"_156":177,"_104":454,"_109":455,"_159":142,"_217":456},37,["D",1745336100398],[457],{"_107":458,"_159":142,"_156":177,"_100":176,"_166":459,"_164":308,"_104":223,"_158":-5,"_109":455,"_160":454,"_169":182,"_161":27,"_168":27,"_103":460},"5a4a54e8-1f8f-11f0-9aab-569c3dd06744","// original flexbox from basscss circa 2015\nconst createCSS = (breakpoints: [number, number, number]) => (`\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`);",[176],{"_156":177,"_104":462,"_109":463,"_159":142,"_217":464},36,["D",1745336081179],[465],{"_107":466,"_159":142,"_156":177,"_100":176,"_166":467,"_164":308,"_104":309,"_158":-5,"_109":463,"_160":462,"_169":182,"_161":27,"_168":27,"_103":468},"4ed5974e-1f8f-11f0-9d3b-569c3dd06744","// original flexbox from basscss circa 2015\nconst createCSS = (breakpoints: [number, number, number]) => (`\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 (--breakpoint-lg) { .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`);",[176],{"_156":177,"_104":470,"_109":471,"_159":142,"_217":472},35,["D",1745335912634],[473],{"_107":474,"_159":142,"_156":177,"_100":176,"_166":73,"_164":308,"_104":31,"_158":-5,"_109":471,"_160":470,"_169":182,"_161":27,"_168":27,"_103":475},"ea5f6c9a-1f8e-11f0-9c3c-569c3dd06744",[176],{"_156":121,"_104":477,"_109":478,"_159":142,"_217":479},34,["D",1745335328344],[480],{"_107":481,"_159":142,"_156":121,"_100":198,"_166":482,"_164":165,"_104":483,"_158":-5,"_109":478,"_160":477,"_169":203,"_161":27,"_168":27,"_103":484},"8e1bdf5a-1f8d-11f0-a70e-569c3dd06744","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];",23,[198],{"_156":121,"_104":486,"_109":487,"_159":142,"_217":488},33,["D",1745335320343],[489],{"_107":490,"_159":142,"_156":121,"_100":198,"_166":491,"_164":165,"_104":189,"_158":-5,"_109":487,"_160":486,"_169":203,"_161":27,"_168":27,"_103":492},"895709cc-1f8d-11f0-a70e-569c3dd06744","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];",[198],{"_156":121,"_104":494,"_109":495,"_159":142,"_217":496},32,["D",1745335314662],[497],{"_107":498,"_159":142,"_156":121,"_100":198,"_166":499,"_164":165,"_104":500,"_158":-5,"_109":495,"_160":494,"_169":203,"_161":27,"_168":27,"_103":501},"85f458d4-1f8d-11f0-8296-569c3dd06744","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 ].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];",21,[198],"page","hasNext","routes/_app","actionData","errors"]

History