[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_224":225,"_226":227},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_169":-5,"_20":170,"_22":171,"_172":173,"_174":175,"_26":176,"_24":177,"_178":-5,"_179":-5,"_180":56,"_181":182,"_183":56,"_184":-5,"_185":-5,"_186":187},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","want","name","untitled-5845","branchName","main","version","path","index.html","project",{"_33":115,"_13":14,"_44":116,"_117":-5,"_118":56,"_119":120,"_121":120,"_122":-5,"_123":-5,"_124":125,"_126":-5,"_127":56,"_128":-5,"_129":-5,"_130":131,"_132":133,"_134":-5,"_135":-5,"_136":-5,"_137":-5,"_138":139,"_140":139,"_141":142,"_143":142,"_144":142,"_145":139,"_146":139,"_147":148,"_149":150,"_151":152,"_153":56},"tree",[50,51],"file",{"_33":34,"_35":36,"_37":38,"_13":19,"_39":40,"_41":24,"_17":42,"_43":-5,"_44":45,"_46":47,"_48":-5,"_18":49},"contents",[],"upstream","pull","ahead","behind","envVars","id","d9580da8-18c1-11f1-9169-42dde27851f2","branchId","213ff3ae-18bf-11f1-b9ac-42dde27851f2","fileId","d5f64dd2-18c1-11f1-bf1f-42dde27851f2","content","\n\n \n \n \n Arena Web Dev App\n \n \n

\n \n \n","fileType",3,"parentId","createdAt",["D",1772735627925],"branchVersion",28,"label",[19],{"_33":60,"_13":61,"_37":62,"_43":-5,"_35":36,"_46":63,"_52":53,"_44":64,"_17":65,"_41":66,"_39":-5,"_55":56,"_48":-5,"_57":67,"_18":68},{"_33":34,"_13":19,"_37":38,"_43":-5,"_35":36,"_46":47,"_52":53,"_44":54,"_17":42,"_41":24,"_39":40,"_55":56,"_48":-5,"_57":58,"_18":59},"latest",true,["D",1772735627925],"deleted",false,"children",[],[19],"a4d0a3ce-18c1-11f1-8cd5-42dde27851f2","src","a04c3e58-18c1-11f1-80f6-42dde27851f2",7,["D",1772735539797],2,"directory",[69,70,71,72],[61],{"_33":98,"_13":99,"_37":100,"_43":62,"_35":36,"_46":101,"_52":53,"_44":102,"_17":103,"_41":66,"_39":-5,"_55":56,"_48":-5,"_57":104,"_18":105},{"_33":90,"_13":91,"_37":92,"_43":62,"_35":36,"_46":93,"_52":53,"_44":94,"_17":42,"_41":78,"_39":95,"_55":56,"_48":-5,"_57":96,"_18":97},{"_33":82,"_13":83,"_37":84,"_43":62,"_35":36,"_46":85,"_52":53,"_44":86,"_17":42,"_41":24,"_39":87,"_55":56,"_48":-5,"_57":88,"_18":89},{"_33":73,"_13":74,"_37":75,"_43":62,"_35":36,"_46":76,"_52":53,"_44":77,"_17":65,"_41":78,"_39":79,"_55":56,"_48":-5,"_57":80,"_18":81},"bb80ccd4-18c1-11f1-9f73-42dde27851f2","main.tsx","b895f22e-18c1-11f1-9f6f-42dde27851f2",14,["D",1772735577854],"script","import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./index.css\";\nimport { App } from \"./App\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n \n \n ,\n);",[],[61,74],"c117c3fa-18c1-11f1-9f73-42dde27851f2","index.css","be5b6b1c-18c1-11f1-9aef-42dde27851f2",18,["D",1772735587235],"@import url(\"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap\");\n@import \"tailwindcss\";\n\n:root {\n color-scheme: light;\n --page-wash: #f5eee0;\n --page-glow: rgba(236, 176, 144, 0.28);\n --panel: rgba(255, 251, 245, 0.78);\n --panel-edge: rgba(104, 85, 64, 0.16);\n --ink: #241e17;\n --muted: #6c6357;\n --frame: #7d6549;\n --sky: #8d98ab;\n --celestial: #d68b5f;\n --star: #de9c76;\n --trunk: #5f4432;\n --leaf: #688556;\n --leaf-alt: #8aa96d;\n --petal: #c47b74;\n --grass: #738d5d;\n --water: #6b8a8c;\n --path: #b19b83;\n}\n\nhtml {\n min-height: 100%;\n}\n\nbody {\n min-height: 100vh;\n margin: 0;\n background:\n radial-gradient(circle at top left, var(--page-glow) 0%, transparent 32%),\n radial-gradient(\n circle at bottom right,\n rgba(255, 255, 255, 0.55) 0%,\n transparent 26%\n ),\n linear-gradient(180deg, var(--page-wash) 0%, #f8f4ec 100%);\n color: var(--ink);\n font-family: \"IBM Plex Mono\", monospace;\n}\n\nbody::before {\n content: \"\";\n position: fixed;\n inset: 0;\n pointer-events: none;\n background-image:\n linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);\n background-size: 28px 28px;\n mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 88%);\n}\n\n#root {\n min-height: 100vh;\n}\n\n.garden-shell {\n background:\n radial-gradient(circle at top left, var(--page-glow) 0%, transparent 32%),\n radial-gradient(\n circle at bottom right,\n rgba(255, 255, 255, 0.55) 0%,\n transparent 26%\n ),\n linear-gradient(180deg, var(--page-wash) 0%, #f8f4ec 100%);\n}\n\n.font-display {\n font-family: \"Fraunces\", serif;\n letter-spacing: -0.04em;\n}\n\n.glass-panel {\n border: 1px solid var(--panel-edge);\n background: var(--panel);\n backdrop-filter: blur(12px);\n box-shadow: 0 24px 70px rgba(50, 40, 24, 0.08);\n}\n\n.ascii-screen {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: clamp(0.56rem, 0.48rem + 0.3vw, 0.76rem);\n line-height: 1.04;\n letter-spacing: 0.01em;\n}\n\n.ascii-line {\n white-space: pre;\n}\n\n.control-slider {\n accent-color: var(--frame);\n}\n\n.tone-frame {\n color: var(--frame);\n}\n\n.tone-sky {\n color: var(--sky);\n}\n\n.tone-celestial {\n color: var(--celestial);\n}\n\n.tone-star {\n color: var(--star);\n}\n\n.tone-bird {\n color: var(--ink);\n}\n\n.tone-trunk {\n color: var(--trunk);\n}\n\n.tone-leaf {\n color: var(--leaf);\n}\n\n.tone-leafAlt {\n color: var(--leaf-alt);\n}\n\n.tone-petal {\n color: var(--petal);\n}\n\n.tone-grass {\n color: var(--grass);\n}\n\n.tone-water {\n color: var(--water);\n}\n\n.tone-path {\n color: var(--path);\n}\n\n.reveal {\n animation: rise-in 700ms ease both;\n}\n\n@keyframes rise-in {\n from {\n opacity: 0;\n transform: translateY(18px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}",[],[61,83],"b5b1c3f8-18c1-11f1-9a9c-42dde27851f2","App.tsx","a77a1c0e-18c1-11f1-9f73-42dde27851f2",11,["D",1772735568113],"import { type CSSProperties, useEffect, useMemo, useState } from \"react\";\n\ntype Season = \"spring\" | \"summer\" | \"amber\" | \"winter\";\ntype Tone =\n | \"frame\"\n | \"sky\"\n | \"celestial\"\n | \"star\"\n | \"bird\"\n | \"trunk\"\n | \"leaf\"\n | \"leafAlt\"\n | \"petal\"\n | \"grass\"\n | \"water\"\n | \"path\";\n\ntype Cell = {\n char: string;\n tone: Tone;\n z: number;\n};\n\ntype GardenStats = {\n trees: number;\n branches: number;\n blooms: number;\n waterline: number;\n};\n\nconst INNER_WIDTH = 68;\nconst INNER_HEIGHT = 24;\n\nconst seasonThemes: Record = {\n spring: {\n \"--page-wash\": \"#f5eee0\",\n \"--page-glow\": \"rgba(236, 176, 144, 0.28)\",\n \"--panel\": \"rgba(255, 251, 245, 0.78)\",\n \"--panel-edge\": \"rgba(104, 85, 64, 0.16)\",\n \"--ink\": \"#241e17\",\n \"--muted\": \"#6c6357\",\n \"--frame\": \"#7d6549\",\n \"--sky\": \"#8d98ab\",\n \"--celestial\": \"#d68b5f\",\n \"--star\": \"#de9c76\",\n \"--trunk\": \"#5f4432\",\n \"--leaf\": \"#688556\",\n \"--leaf-alt\": \"#8aa96d\",\n \"--petal\": \"#c47b74\",\n \"--grass\": \"#738d5d\",\n \"--water\": \"#6b8a8c\",\n \"--path\": \"#b19b83\",\n } as CSSProperties,\n summer: {\n \"--page-wash\": \"#efe9d5\",\n \"--page-glow\": \"rgba(228, 187, 93, 0.24)\",\n \"--panel\": \"rgba(253, 249, 238, 0.78)\",\n \"--panel-edge\": \"rgba(92, 88, 62, 0.18)\",\n \"--ink\": \"#1f1f18\",\n \"--muted\": \"#65634f\",\n \"--frame\": \"#726746\",\n \"--sky\": \"#7a8ca1\",\n \"--celestial\": \"#c17e34\",\n \"--star\": \"#d09a4f\",\n \"--trunk\": \"#62462d\",\n \"--leaf\": \"#527249\",\n \"--leaf-alt\": \"#7d9358\",\n \"--petal\": \"#d7b259\",\n \"--grass\": \"#607c4f\",\n \"--water\": \"#5b7f8a\",\n \"--path\": \"#ac9474\",\n } as CSSProperties,\n amber: {\n \"--page-wash\": \"#f3e5d7\",\n \"--page-glow\": \"rgba(186, 92, 38, 0.26)\",\n \"--panel\": \"rgba(255, 248, 242, 0.78)\",\n \"--panel-edge\": \"rgba(105, 69, 47, 0.18)\",\n \"--ink\": \"#251812\",\n \"--muted\": \"#755745\",\n \"--frame\": \"#865d43\",\n \"--sky\": \"#8b7f83\",\n \"--celestial\": \"#c35f31\",\n \"--star\": \"#d5764d\",\n \"--trunk\": \"#684130\",\n \"--leaf\": \"#8a5b36\",\n \"--leaf-alt\": \"#b7793f\",\n \"--petal\": \"#d39b4d\",\n \"--grass\": \"#857148\",\n \"--water\": \"#6f7f8c\",\n \"--path\": \"#b08f74\",\n } as CSSProperties,\n winter: {\n \"--page-wash\": \"#edf0ef\",\n \"--page-glow\": \"rgba(112, 142, 160, 0.18)\",\n \"--panel\": \"rgba(249, 252, 253, 0.76)\",\n \"--panel-edge\": \"rgba(90, 106, 116, 0.18)\",\n \"--ink\": \"#1e2328\",\n \"--muted\": \"#61717b\",\n \"--frame\": \"#60717c\",\n \"--sky\": \"#80909d\",\n \"--celestial\": \"#c3d0d9\",\n \"--star\": \"#e1e8eb\",\n \"--trunk\": \"#53616b\",\n \"--leaf\": \"#9fb0b8\",\n \"--leaf-alt\": \"#b9c7ce\",\n \"--petal\": \"#dbe3e8\",\n \"--grass\": \"#839399\",\n \"--water\": \"#7f97a6\",\n \"--path\": \"#b7c0c5\",\n } as CSSProperties,\n};\n\nconst seasonCopy: Record = {\n spring: \"soft bloom pass / petal-heavy canopies / bright understory\",\n summer: \"dense crown pass / warm light pool / deeper water reflections\",\n amber: \"split-tone foliage / longer limbs / ember-like field texture\",\n winter: \"bare branch bias / moonlit sky pass / quiet frost accents\",\n};\n\nconst leafChars: Record = {\n spring: [\"o\", \"*\", \"+\", \".\"],\n summer: [\"o\", \"O\", \"+\", \"*\"],\n amber: [\"*\", \"o\", \"+\", \".\"],\n winter: [\".\", \"*\", \"+\", \"'\"],\n};\n\nfunction mulberry32(seed: number) {\n let t = seed >>> 0;\n return () => {\n t += 0x6d2b79f5;\n let value = Math.imul(t ^ (t >>> 15), t | 1);\n value ^= value + Math.imul(value ^ (value >>> 7), value | 61);\n return ((value ^ (value >>> 14)) >>> 0) / 4294967296;\n };\n}\n\nfunction createCanvas(width: number, height: number): Cell[][] {\n return Array.from(\n { length: height },\n () =>\n Array.from(\n { length: width },\n () => ({ char: \" \", tone: \"sky\" as Tone, z: -1000 }),\n ),\n );\n}\n\nfunction setCell(\n canvas: Cell[][],\n x: number,\n y: number,\n char: string,\n tone: Tone,\n z = 0,\n) {\n if (\n x < 0 || y < 0 || y >= canvas.length || x >= canvas[0].length ||\n char === \" \"\n ) {\n return;\n }\n\n if (z >= canvas[y][x].z) {\n canvas[y][x] = { char, tone, z };\n }\n}\n\nfunction drawLine(\n canvas: Cell[][],\n x1: number,\n y1: number,\n x2: number,\n y2: number,\n tone: Tone,\n z: number,\n) {\n const steps = Math.max(Math.abs(x2 - x1), Math.abs(y2 - y1), 1);\n\n for (let index = 0; index <= steps; index += 1) {\n const t = index / steps;\n const x = Math.round(x1 + (x2 - x1) * t);\n const y = Math.round(y1 + (y2 - y1) * t);\n const dx = x2 - x1;\n const dy = y2 - y1;\n const char = Math.abs(dx) <= Math.abs(dy) * 0.45\n ? \"|\"\n : dx > 0\n ? \"/\"\n : \"\\\\\";\n setCell(canvas, x, y, char, tone, z);\n }\n}\n\nfunction addLeafCluster(\n canvas: Cell[][],\n cx: number,\n cy: number,\n radius: number,\n z: number,\n season: Season,\n rng: () => number,\n stats: GardenStats,\n) {\n const glyphs = leafChars[season];\n\n for (let y = -radius; y <= radius; y += 1) {\n for (let x = -radius; x <= radius; x += 1) {\n const distance = Math.sqrt(x * x + y * y);\n\n if (distance > radius + rng() * 0.35 || rng() < 0.33) {\n continue;\n }\n\n const char = glyphs[Math.floor(rng() * glyphs.length)];\n const tone = season === \"winter\"\n ? (rng() > 0.72 ? \"petal\" : \"leaf\")\n : rng() > 0.76\n ? \"petal\"\n : rng() > 0.42\n ? \"leafAlt\"\n : \"leaf\";\n setCell(\n canvas,\n cx + x,\n cy + y,\n char,\n tone,\n z + radius - Math.round(distance),\n );\n stats.blooms += 1;\n }\n }\n}\n\nfunction growBranch(\n canvas: Cell[][],\n x: number,\n y: number,\n length: number,\n angle: number,\n depth: number,\n z: number,\n season: Season,\n rng: () => number,\n wind: number,\n stats: GardenStats,\n) {\n const x2 = x + Math.cos(angle) * length;\n const y2 = y + Math.sin(angle) * length;\n drawLine(\n canvas,\n Math.round(x),\n Math.round(y),\n Math.round(x2),\n Math.round(y2),\n \"trunk\",\n z + depth,\n );\n stats.branches += 1;\n\n if (depth <= 1 || length < 2.3) {\n addLeafCluster(\n canvas,\n Math.round(x2),\n Math.round(y2),\n Math.max(1, Math.round(length * 0.45)),\n z + depth,\n season,\n rng,\n stats,\n );\n return;\n }\n\n const spread = 0.36 + rng() * 0.2;\n const sway = wind * (0.04 + rng() * 0.05);\n const nextLength = length * (0.72 + rng() * 0.08);\n\n growBranch(\n canvas,\n x2,\n y2,\n nextLength,\n angle - spread - sway,\n depth - 1,\n z + 1,\n season,\n rng,\n wind,\n stats,\n );\n growBranch(\n canvas,\n x2,\n y2,\n nextLength,\n angle + spread + sway,\n depth - 1,\n z + 1,\n season,\n rng,\n wind,\n stats,\n );\n\n if (depth > 2 && rng() > 0.42) {\n growBranch(\n canvas,\n x2,\n y2,\n nextLength * 0.86,\n angle + (rng() - 0.5) * 0.42 + sway * 0.4,\n depth - 2,\n z + 1,\n season,\n rng,\n wind,\n stats,\n );\n }\n}\n\nfunction drawTree(\n canvas: Cell[][],\n trunkX: number,\n groundY: number,\n height: number,\n spread: number,\n season: Season,\n rng: () => number,\n wind: number,\n stats: GardenStats,\n) {\n const lean = (rng() - 0.5) * 0.24 + wind * 0.05;\n const trunkTopX = trunkX + Math.sin(lean) * (height * 0.18);\n const trunkTopY = groundY - height;\n drawLine(\n canvas,\n trunkX,\n groundY,\n Math.round(trunkTopX),\n Math.round(trunkTopY),\n \"trunk\",\n groundY + 4,\n );\n\n for (let offset = -1; offset <= 1; offset += 1) {\n if (rng() > 0.45) {\n setCell(canvas, trunkX + offset, groundY, \"_\", \"path\", groundY + 1);\n }\n }\n\n const depth = Math.max(3, Math.round(spread));\n growBranch(\n canvas,\n trunkTopX,\n trunkTopY,\n height * 0.38,\n -Math.PI / 2 + lean,\n depth,\n groundY + 5,\n season,\n rng,\n wind,\n stats,\n );\n stats.trees += 1;\n}\n\nfunction addCloud(canvas: Cell[][], x: number, y: number, rng: () => number) {\n const cloud = rng() > 0.5 ? \" .--. .-. \" : \" .-. .--. \";\n cloud.split(\"\").forEach((char, index) => {\n if (char !== \" \") {\n setCell(canvas, x + index, y, char, \"sky\", 3);\n }\n });\n}\n\nfunction addBirds(canvas: Cell[][], x: number, y: number, count: number) {\n for (let index = 0; index < count; index += 1) {\n setCell(canvas, x + index * 3, y + (index % 2), \"v\", \"bird\", 4);\n }\n}\n\nfunction addCelestial(canvas: Cell[][], season: Season) {\n const x = season === \"winter\" ? 53 : 10;\n const y = season === \"winter\" ? 4 : 3;\n const glyphs = season === \"winter\"\n ? [\".\", \"o\", \".\", \"o\"]\n : [\".\", \"O\", \"o\", \".\"];\n\n glyphs.forEach((char, index) => {\n setCell(\n canvas,\n x + (index % 2),\n y + Math.floor(index / 2),\n char,\n \"celestial\",\n 2,\n );\n });\n\n if (season === \"winter\") {\n for (let i = 0; i < 16; i += 1) {\n const sx = 5 + ((i * 11) % (INNER_WIDTH - 10));\n const sy = 1 + ((i * 7) % 8);\n setCell(canvas, sx, sy, i % 3 === 0 ? \"+\" : \".\", \"star\", 1);\n }\n }\n}\n\nfunction buildGarden(\n seed: number,\n season: Season,\n grove: number,\n detail: number,\n breeze: number,\n frame: number,\n) {\n const rng = mulberry32(seed);\n const canvas = createCanvas(INNER_WIDTH, INNER_HEIGHT);\n const stats: GardenStats = { trees: 0, branches: 0, blooms: 0, waterline: 0 };\n const groundY = INNER_HEIGHT - 5;\n const wind = Math.sin(frame * 0.8) * (breeze / 10);\n\n addCelestial(canvas, season);\n addCloud(canvas, 18, season === \"winter\" ? 2 : 4, rng);\n addCloud(canvas, 42, season === \"amber\" ? 5 : 3, rng);\n addBirds(canvas, 24, 6, season === \"winter\" ? 2 : 4);\n\n const pondWidth = 10 + detail * 2;\n const pondOffset = 6 + Math.floor(rng() * 14);\n const pondY = groundY + 1;\n stats.waterline = pondWidth;\n\n for (let y = groundY - 1; y < INNER_HEIGHT; y += 1) {\n for (let x = 0; x < INNER_WIDTH; x += 1) {\n const isPond = y >= pondY &&\n Math.abs(x - (pondOffset + pondWidth)) <\n pondWidth * 0.8 - (y - pondY) * 1.2;\n const isPath = y >= groundY && x > 3 && x < 17 &&\n y - groundY >= Math.abs(x - 10) * 0.12;\n\n if (isPond) {\n const char = y === pondY ? \"~\" : rng() > 0.52 ? \"_\" : \"~\";\n setCell(canvas, x, y, char, \"water\", 20 + y);\n } else if (isPath) {\n setCell(canvas, x, y, rng() > 0.6 ? \".\" : \":\", \"path\", 18 + y);\n } else {\n const char = y < groundY + 1\n ? (rng() > 0.58 ? \",\" : \"'\")\n : rng() > 0.55\n ? \";\"\n : \".\";\n const tone = rng() > 0.92 ? \"petal\" : \"grass\";\n setCell(canvas, x, y, char, tone, 18 + y);\n }\n }\n }\n\n const treeCount = 3 + grove;\n const anchors = Array.from({ length: treeCount }, (_, index) => {\n const spreadSlot = (INNER_WIDTH - 8) / (treeCount + 1);\n const x = 4 + Math.round((index + 1) * spreadSlot + (rng() - 0.5) * 5);\n const y = groundY - Math.round(rng() * 3);\n return { x, y };\n }).sort((a, b) => a.y - b.y);\n\n anchors.forEach(({ x, y }, index) => {\n const height = 6 + detail + Math.floor(rng() * 4) + (index % 2);\n const spread = 3 + Math.round(detail * 0.7 + rng() * 2);\n drawTree(canvas, x, y, height, spread, season, rng, wind, stats);\n });\n\n for (let x = 2; x < INNER_WIDTH - 2; x += 4) {\n if (rng() > 0.6) {\n setCell(\n canvas,\n x,\n groundY + 1 - Math.round(rng() * 2),\n rng() > 0.5 ? \"*\" : \"+\",\n \"petal\",\n 24,\n );\n }\n }\n\n const label = `[ ASCII GARDEN / ${season.toUpperCase()} / SEED ${seed} ]`;\n const paddedTop = `-${label}`.padEnd(INNER_WIDTH, \"-\").slice(0, INNER_WIDTH);\n const bottomNote =\n `-${stats.trees} trees | ${stats.branches} branch passes | ${stats.blooms} leaf cells`\n .padEnd(\n INNER_WIDTH,\n \"-\",\n );\n\n const lines: Cell[][] = [];\n lines.push([\n { char: \"+\", tone: \"frame\", z: 999 },\n ...paddedTop.split(\"\").map((char) => ({\n char,\n tone: \"frame\" as Tone,\n z: 999,\n })),\n { char: \"+\", tone: \"frame\", z: 999 },\n ]);\n\n canvas.forEach((row) => {\n lines.push([\n { char: \"|\", tone: \"frame\", z: 999 },\n ...row,\n { char: \"|\", tone: \"frame\", z: 999 },\n ]);\n });\n\n lines.push([\n { char: \"+\", tone: \"frame\", z: 999 },\n ...bottomNote.split(\"\").map((char) => ({\n char,\n tone: \"frame\" as Tone,\n z: 999,\n })),\n { char: \"+\", tone: \"frame\", z: 999 },\n ]);\n\n return { lines, stats };\n}\n\nfunction AsciiViewport({ lines }: { lines: Cell[][] }) {\n return (\n

\n {lines.map((line, rowIndex) => (\n

\n {line.map((cell, columnIndex) => (\n \n {cell.char === \" \" ? String.fromCharCode(160) : cell.char}\n \n ))}\n

\n ))}\n

\n );\n}\n\nexport function App() {\n const [season, setSeason] = useState(\"spring\");\n const [seed, setSeed] = useState(1987);\n const [grove, setGrove] = useState(3);\n const [detail, setDetail] = useState(4);\n const [breeze, setBreeze] = useState(5);\n const [frame, setFrame] = useState(0);\n\n useEffect(() => {\n const timer = window.setInterval(\n () => setFrame((value) => value + 1),\n 1400,\n );\n return () => window.clearInterval(timer);\n }, []);\n\n const scene = useMemo(\n () => buildGarden(seed, season, grove, detail, breeze, frame),\n [seed, season, grove, detail, breeze, frame],\n );\n\n return (\n \n

\n ascii ui greenhouse\n

\n A coded garden built from clean branching rules and quiet\n terminal charm.\n

\n This scene grows from a seeded tree algorithm: recursive trunk\n passes, seasonal leaf palettes, a layered ground pass, and a\n slow breeze loop that keeps the grove alive without breaking\n the ASCII silhouette.\n

\n\n

\n growth mode\n

{season}

\n {seasonCopy[season]}\n

\n grove density\n

{scene.stats.trees} trunks

\n balanced across foreground depth for cleaner overlap.\n

\n canopy cells\n

{scene.stats.blooms}

\n leaf clusters use seeded jitter to avoid noisy repetition.\n

\n\n

\n garden console\n

\n Tune the generator\n

\n \n setSeed(Math.floor(Math.random() * 9000) + 1000)}\n className=\"rounded-full border border-[color:var(--panel-edge)] bg-white/55 px-4 py-2 text-sm transition hover:-translate-y-0.5 hover:bg-white/80\"\n >\n randomize seed\n \n

\n\n

\n \n

\n seed\n {seed}\n

\n setSeed(Number(event.target.value))}\n />\n \n\n \n

\n grove size\n {grove}\n

\n setGrove(Number(event.target.value))}\n />\n \n\n \n

\n branch detail\n {detail}\n

\n setDetail(Number(event.target.value))}\n />\n \n\n \n

\n breeze\n {breeze}\n

\n setBreeze(Number(event.target.value))}\n />\n \n\n

\n season palette\n

\n {([\"spring\", \"summer\", \"amber\", \"winter\"] as Season[]).map((\n option,\n ) => (\n setSeason(option)}\n className={`rounded-full border px-4 py-2 text-sm transition ${\n season === option\n ? \"border-[color:var(--frame)] bg-white/80 text-[color:var(--ink)]\"\n : \"border-[color:var(--panel-edge)] bg-white/35 text-[color:var(--muted)] hover:bg-white/65\"\n }`}\n >\n [{option}]\n \n ))}\n

\n\n

\n algorithm sketch\n

\n{`root(seed)\n  -> place horizon + water + path\n  -> distribute trunk anchors by depth\n  -> recurse branch(angle, length, depth)\n  -> puff canopy clusters near tips\n  -> apply seasonal glyph palette\n  -> loop breeze offset every 1400ms`}\n

\n Layering keeps back trees readable instead of becoming a\n single noisy blob.\n

\n The pond, path, clouds, and petals are separate passes, so the\n viewport feels composed.\n

\n\n

\n \n

\n\n

\n branch passes\n

{scene.stats.branches}

\n water span\n

{scene.stats.waterline}

\n wind loop\n

\n {Math.abs(Math.sin(frame * 0.8) * breeze).toFixed(1)}\n

\n \n );\n}",[],[61,91],"c6a01354-18c1-11f1-bf1f-42dde27851f2","utils","c5214340-18c1-11f1-8cd5-42dde27851f2",20,["D",1772735596517],1,[106],[61,99],{"_33":107,"_13":108,"_37":109,"_43":100,"_35":36,"_46":110,"_52":53,"_44":111,"_17":65,"_41":78,"_39":112,"_55":56,"_48":-5,"_57":113,"_18":114},"cd91e854-18c1-11f1-94a1-42dde27851f2","cn.ts","cb1bd5e4-18c1-11f1-859d-42dde27851f2",23,["D",1772735608167],"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}",[],[61,99,108],"213f8a72-18bf-11f1-b9ac-42dde27851f2",["D",1772734460077],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","01999b42-6923-7516-b82f-33ca961b034d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01999b42-6923-7516-b82f-3505b8a0d6c5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_168":164},"org",{"_11":12,"_162":-5,"_163":164,"_124":125,"_165":166,"_167":56},"branch",{"_17":47,"_13":16,"_33":36,"_154":115,"_155":-5,"_156":-5,"_157":-5,"_158":-5,"_159":-5,"_160":14,"_161":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMzUVBmSlozZlNTS0gzRFFsaHhPZk84VDFPNyJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":115,"_13":14,"_44":220,"_117":-5,"_118":56,"_119":120,"_121":120,"_122":-5,"_123":-5,"_124":125,"_126":-5,"_127":56,"_128":-5,"_129":-5,"_130":131,"_132":133,"_134":-5,"_135":-5,"_136":-5,"_137":-5,"_138":139,"_140":139,"_141":142,"_143":142,"_144":142,"_145":139,"_146":139,"_147":221,"_149":222,"_151":223,"_153":56},[199,205],"files",[199,200,201,202,203,204,205],"counts",{"_190":131,"_191":103,"_192":131,"_32":193,"_194":195},[],{"_33":34,"_13":19,"_37":38,"_43":-5,"_35":36,"_46":47,"_52":53,"_44":188,"_17":42,"_41":24,"_39":40,"_55":56,"_48":-5,"_18":189},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1772735627925],[19],"pulls","branches","forks",{"_196":131,"_198":131},"connections",{"_196":131,"_197":131},"count","unfilledCount","emptyCount",{"_33":60,"_13":61,"_37":62,"_43":-5,"_35":36,"_46":63,"_52":53,"_44":64,"_17":65,"_41":66,"_39":-5,"_55":56,"_48":-5,"_57":218,"_18":219},{"_33":98,"_13":99,"_37":100,"_43":62,"_35":36,"_46":101,"_52":53,"_44":102,"_17":103,"_41":66,"_39":-5,"_55":56,"_48":-5,"_57":216,"_18":217},{"_33":107,"_13":108,"_37":109,"_43":100,"_35":36,"_46":110,"_52":53,"_44":111,"_17":65,"_41":78,"_39":112,"_55":56,"_48":-5,"_57":214,"_18":215},{"_33":90,"_13":91,"_37":92,"_43":62,"_35":36,"_46":93,"_52":53,"_44":94,"_17":42,"_41":78,"_39":95,"_55":56,"_48":-5,"_57":212,"_18":213},{"_33":82,"_13":83,"_37":84,"_43":62,"_35":36,"_46":85,"_52":53,"_44":86,"_17":42,"_41":24,"_39":87,"_55":56,"_48":-5,"_57":210,"_18":211},{"_33":73,"_13":74,"_37":75,"_43":62,"_35":36,"_46":76,"_52":53,"_44":77,"_17":65,"_41":78,"_39":79,"_55":56,"_48":-5,"_57":208,"_18":209},{"_33":34,"_13":19,"_37":38,"_43":-5,"_35":36,"_46":47,"_52":53,"_44":54,"_17":42,"_41":24,"_39":40,"_55":56,"_48":-5,"_57":206,"_18":207},[],[19],[],[61,74],[],[61,83],[],[61,91],[],[61,99,108],[201],[61,99],[200,202,203,204],[61],["D",1772734460077],{"_11":12,"_168":164},{"_11":12,"_162":-5,"_163":164,"_124":125,"_165":166,"_167":56},{"_17":47,"_13":16,"_33":36,"_154":115,"_155":-5,"_156":-5,"_157":-5,"_158":-5,"_159":-5,"_160":14,"_161":12},"ctx",{"_147":-5,"_185":257,"_258":259,"_260":261,"_262":56,"_263":56,"_264":56,"_265":53,"_266":-5,"_267":-7,"_268":-7,"_269":131,"_270":56,"_271":56,"_272":-5,"_273":56,"_274":56,"_275":56,"_276":-5},"ENV",{"_228":229,"_230":231,"_232":16,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256},"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"]