[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_177":178,"_179":180},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_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",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":60,"_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",153,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","index.tsx","latestPath","fileId","70a4872e-2d1b-11f0-b80f-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/preact */\nimport { JSX, FunctionalComponent } from \"npm:preact\";\nimport { render } from \"npm:preact-render-to-string\";\n\n\nexport default function handler(request: Request) {\n return new Response(render(\n \n \n Your App Title\n \n \n \n \n ), {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n })\n}\n\nfunction App() {\n return (\n

Hello, Mono!

This is a simple Mono app.

\n \n

\n )\n}\n\ninterface BoxProps extends JSX.HTMLAttributes {\n gap?: number | string;\n alignX?: 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';\n alignY?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'first baseline' | 'last baseline' | 'start' | 'end' | 'self-start' | 'self-end';\n w?: number | string;\n h?: number | string;\n p?: number | string;\n m?: number | string;\n}\n\nconst toCssValue = (value?: number | string): string | undefined => {\n if (value === undefined || value === null) return undefined;\n return typeof value === 'number' ? `${value}px` : value;\n};\n\nconst mapPosition = (pos: string): string =>\n pos === 'start' ? 'flex-start'\n : pos === 'end' ? 'flex-end'\n : pos;\n\n\nconst VStack: FunctionalComponent = (props) => {\n const { gap, alignX, alignY, w, h, p, m, style, className, children, ...rest } = props\n const computedStyle = {\n display: 'flex',\n flexDirection: 'column',\n gap: toCssValue(gap),\n justifyContent: alignY ? mapPosition(alignY) : undefined,\n alignItems: alignX ? mapPosition(alignX) : undefined,\n width: toCssValue(w),\n height: toCssValue(h),\n padding: toCssValue(p),\n margin: toCssValue(m),\n ...(style as Record),\n }\n\n return (\n

\n {children}\n

\n )\n}\n\n\nexport const HStack: FunctionalComponent = (props) => {\n const { gap, alignX, alignY, w, h, p, m, style, className, children, ...rest } = props\n\n const computedStyle = {\n display: 'flex',\n flexDirection: 'row',\n gap: toCssValue(gap),\n justifyContent: alignX ? mapPosition(alignX) : undefined,\n alignItems: alignY ? mapPosition(alignY) : undefined,\n width: toCssValue(w),\n height: toCssValue(h),\n padding: toCssValue(p),\n margin: toCssValue(m),\n ...(style as Record),\n };\n\n return (\n

\n {children}\n

\n );\n};\n\ninterface ImageProps extends Omit, 'width' | 'height'> {\n src: string;\n w?: number | string;\n h?: number | string;\n fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';\n}\n\n\nexport const Image: FunctionalComponent = (props) => {\n const { src, w, h, fit, children, style, className, ...rest } = props;\n const altText = children?.toString() || '';\n const computedStyle = {\n objectFit: fit,\n width: typeof w === 'number' ? `${w}px` : w,\n height: typeof w === 'number' ? `${h}px` : h,\n ...(style as Record),\n };\n\n return (\n \n );\n};\n\n\ninterface HeaderProps extends JSX.HTMLAttributes {\n size?: \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\";\n p?: number | string;\n m?: number | string;\n}\n\nexport const Header: FunctionalComponent = (props) => {\n const { size = 1, p, m, style, className, children, ...rest } = props;\n const Tag = (`h${size}` as keyof JSX.IntrinsicElements) as any;\n const computedStyle = {\n padding: toCssValue(p),\n margin: toCssValue(m),\n ...(style as Record),\n };\n return (\n \n {children}\n \n );\n};\n\ninterface TextProps extends JSX.HTMLAttributes {\n alignX?: 'start' | 'center' | 'end';\n p?: number | string;\n m?: number | string;\n}\n\n\nexport const Text: FunctionalComponent = (props) => {\n const { alignX, p, m, style, className, children, ...rest } = props;\n const computedStyle = {\n textAlign: alignX === 'start' ? 'left' : alignX === 'end' ? 'right' : alignX,\n padding: toCssValue(p),\n margin: toCssValue(m),\n ...(style as Record),\n };\n return (\n

\n {children}\n

\n );\n};\n\n/**\n * Props for the Button component.\n */\ninterface ButtonProps extends JSX.ButtonHTMLAttributes {\n /** Visual variant (primary, secondary, outline) */\n variant?: 'primary' | 'secondary' | 'outline';\n /** Optional padding around the button */\n p?: number | string;\n /** Optional margin around the button */\n m?: number | string;\n}\n\nexport const GenericButton: FunctionalComponent = (props) => {\n const { variant = 'primary', p, m, style, className, children, ...rest } = props;\n const computedStyle = {\n padding: toCssValue(p),\n margin: toCssValue(m),\n ...(style as Record),\n };\n\n return (\n \n {children}\n \n );\n};\n\nconst Button = function (props: ButtonProps) {\n return ;\n}\nButton.Outline = function (props: ButtonProps) {\n return ;\n}\nButton.Primary = function (props: ButtonProps) {\n return ;\n}\nButton.Secondary = function (props: ButtonProps) {\n return ;\n}\n\n\ninterface LinkProps extends JSX.AnchorHTMLAttributes {\n p?: number | string;\n m?: number | string;\n}\n\nexport const Link: FunctionalComponent = (props) => {\n const { p, m, style, className, children, ...rest } = props;\n const computedStyle = {\n padding: toCssValue(p),\n margin: toCssValue(m),\n ...(style as Record),\n };\n\n return (\n \n {children}\n \n );\n};\n\nfunction Sample() {\n return (\n\n \n

\n Stripe logo\n \n\n \n

\n Use your email and password to access your dashboard.\n\n {/* \n\n \n \n {/* */}\n\n \n Set up Touch ID to make your account more secure.\n If you have the hardware, you can sign into Stripe using your fingerprint.\n \n \n \n \n )\n}\n","/** @jsxImportSource https://esm.sh/preact */\nimport { JSX, FunctionalComponent } from \"npm:preact\";\nimport { render } from \"npm:preact-render-to-string\";\n\n\nexport default function handler(request: Request) {\n return new Response(render(\n \n \n Your App Title\n \n \n \n \n ), {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n })\n}\n\nfunction App() {\n return (\n

Hello, Mono!

This is a simple Mono app.

\n \n

\n {children}\n

\n )\n}\n\n\nconst HStack: FunctionalComponent = (props) => {\n const { gap, alignX, alignY, w, h, p, m, style, className, children, ...rest } = props\n\n const computedStyle = {\n display: 'flex',\n flexDirection: 'row',\n gap: toCssValue(gap),\n justifyContent: alignX ? mapPosition(alignX) : undefined,\n alignItems: alignY ? mapPosition(alignY) : undefined,\n width: toCssValue(w),\n height: toCssValue(h),\n padding: toCssValue(p),\n margin: toCssValue(m),\n ...(style as Record),\n };\n\n return (\n

\n {children}\n

\n );\n};\n\ninterface ImageProps extends Omit, 'width' | 'height'> {\n src: string;\n w?: number | string;\n h?: number | string;\n fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';\n}\n\n\nconst Image: FunctionalComponent = (props) => {\n const { src, w, h, fit, children, style, className, ...rest } = props;\n const altText = children?.toString() || '';\n const computedStyle = {\n objectFit: fit,\n width: typeof w === 'number' ? `${w}px` : w,\n height: typeof w === 'number' ? `${h}px` : h,\n ...(style as Record),\n };\n\n return (\n \n );\n};\n\n\ninterface HeaderProps extends JSX.HTMLAttributes {\n size?: \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\";\n p?: number | string;\n m?: number | string;\n}\n\nconst Header: FunctionalComponent = (props) => {\n const { size = 1, p, m, style, className, children, ...rest } = props;\n const Tag = (`h${size}` as keyof JSX.IntrinsicElements) as any;\n const computedStyle = {\n padding: toCssValue(p),\n margin: toCssValue(m),\n ...(style as Record),\n };\n return (\n \n {children}\n \n );\n};\n\ninterface TextProps extends JSX.HTMLAttributes {\n alignX?: 'start' | 'center' | 'end';\n p?: number | string;\n m?: number | string;\n}\n\n\nconst Text: FunctionalComponent = (props) => {\n const { alignX, p, m, style, className, children, ...rest } = props;\n const computedStyle = {\n textAlign: alignX === 'start' ? 'left' : alignX === 'end' ? 'right' : alignX,\n padding: toCssValue(p),\n margin: toCssValue(m),\n ...(style as Record),\n };\n return (\n

\n {children}\n

\n );\n};\n\n/**\n * Props for the Button component.\n */\ninterface ButtonProps extends JSX.ButtonHTMLAttributes {\n /** Visual variant (primary, secondary, outline) */\n variant?: 'primary' | 'secondary' | 'outline';\n /** Optional padding around the button */\n p?: number | string;\n /** Optional margin around the button */\n m?: number | string;\n}\n\nconst GenericButton: FunctionalComponent = (props) => {\n const { variant = 'primary', p, m, style, className, children, ...rest } = props;\n const computedStyle = {\n padding: toCssValue(p),\n margin: toCssValue(m),\n ...(style as Record),\n };\n\n return (\n \n {children}\n \n );\n};\n\nconst Button = function (props: ButtonProps) {\n return ;\n}\nButton.Outline = function (props: ButtonProps) {\n return ;\n}\nButton.Primary = function (props: ButtonProps) {\n return ;\n}\nButton.Secondary = function (props: ButtonProps) {\n return ;\n}\n\n\ninterface LinkProps extends JSX.AnchorHTMLAttributes {\n p?: number | string;\n m?: number | string;\n}\n\nconst Link: FunctionalComponent = (props) => {\n const { p, m, style, className, children, ...rest } = props;\n const computedStyle = {\n padding: toCssValue(p),\n margin: toCssValue(m),\n ...(style as Record),\n };\n\n return (\n \n {children}\n \n );\n};\n\nfunction Sample() {\n return (\n\n \n

\n Stripe logo\n \n\n \n

\n Use your email and password to access your dashboard.\n\n {/* \n\n \n \n {/* */}\n\n \n Set up Touch ID to make your account more secure.\n If you have the hardware, you can sign into Stripe using your fingerprint.\n \n \n \n \n )\n}\n","createdAt",["D",1747173324494],"branchVersion","branchId","b916423c-2d1a-11f0-9e04-569c3dd06744","id","b915f318-2d1a-11f0-9e04-569c3dd06744","meow",["D",1746825324608],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","2dc5aaf5-547d-47c8-b5bc-2bb7aa692b7b","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion",187,"likeCount",0,"orgId","d6259b83-cb32-40aa-9de5-feef709cccf2","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":54,"_99":100,"_101":25},"branch",{"_13":60,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","probablycorey","handle","displayName","avatar","https://www.gravatar.com/avatar/?d=mp","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":173,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":60,"_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":174,"_80":175,"_82":176,"_84":25},"tree",[160,161,162],"files",[160,161,162],"counts",{"_150":62,"_151":146,"_152":62,"_153":154,"_155":156},"contents",[125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":143,"_32":144,"_30":145,"_129":-5,"_41":42,"_40":146,"_130":57,"_38":147,"_13":62,"_33":20,"_35":148,"_24":25,"_133":-5,"_27":149},{"_43":135,"_32":136,"_30":137,"_129":-5,"_41":42,"_40":138,"_130":57,"_38":139,"_13":140,"_33":20,"_35":141,"_24":25,"_133":-5,"_27":142},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":25,"_38":131,"_13":132,"_33":34,"_35":37,"_24":25,"_133":-5,"_27":134},"f92fce1a-3044-11f0-b6ac-569c3dd06744","parentId","latest",["D",1747173324494],148,"label",[28],"4db1fe88-2d1e-11f0-a20f-569c3dd06744","deno.json","70a16c7e-2d1b-11f0-b605-569c3dd06744",9,["D",1746826862417],2,"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": true,\n \"strict\": true,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"fmt\": {\n \"semiColons\": false,\n \"lineWidth\": 120\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n },\n \"imports\": {\n \"mono-jsx\": \"npm:mono-jsx@^0.4.0\"\n }\n}",[136],"709d7722-2d1b-11f0-8103-569c3dd06744",".vtignore","709d77d6-2d1b-11f0-8103-569c3dd06744",1,["D",1746825632516],".git\n.DS_Store\nnode_modules\nvendor",[144],"pulls","branches","forks","envVars",{"_157":62,"_159":62},"connections",{"_157":62,"_158":62},"count","unfilledCount","emptyCount",{"_43":143,"_32":144,"_30":145,"_129":-5,"_41":42,"_40":146,"_130":57,"_38":170,"_13":62,"_33":20,"_35":148,"_24":25,"_133":-5,"_164":171,"_27":172},{"_43":135,"_32":136,"_30":137,"_129":-5,"_41":42,"_40":138,"_130":57,"_38":167,"_13":140,"_33":20,"_35":141,"_24":25,"_133":-5,"_164":168,"_27":169},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":25,"_38":163,"_13":132,"_33":34,"_35":37,"_24":25,"_133":-5,"_164":165,"_27":166},["D",1747173324494],"children",[],[28],["D",1746826862417],[],[136],["D",1746825632516],[],[144],["D",1746825324608],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":60,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_78":-5,"_122":210,"_211":212,"_213":214,"_215":25,"_216":25,"_217":25,"_218":57,"_219":-5,"_220":-7,"_221":-7,"_222":62,"_223":25,"_224":25,"_225":-5,"_226":25,"_227":25,"_228":25,"_229":-5},"ENV",{"_181":182,"_183":184,"_185":85,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]

Diff · v153