[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_176":177,"_178":179},"routes/_app.x.$handle.$name",{"_109":108,"_33":57,"_118":99,"_28":119,"_13":14,"_120":-5,"_11":121,"_122":123,"_124":125,"_126":127,"_128":129,"_22":-5,"_130":-5,"_131":-5,"_132":26,"_133":134,"_135":26,"_136":-5,"_137":-5,"_138":139},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_55":56,"_33":57,"_39":58,"_59":-5,"_60":26,"_61":62,"_63":62,"_64":65,"_66":-5,"_18":67,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":75,"_76":77,"_78":-5,"_79":-5,"_80":-5,"_81":-5,"_82":83,"_84":83,"_85":86,"_87":86,"_88":86,"_89":83,"_90":83,"_91":92,"_93":94,"_95":96,"_97":26},"version",1,"changes",[19,20,21],"aiChatInfo","userId",{"_22":50,"_24":-7,"_25":26,"_27":26,"_28":51,"_30":51},{"_22":44,"_24":-7,"_25":26,"_27":26,"_28":45,"_30":45},{"_22":23,"_24":-7,"_25":26,"_27":26,"_28":29,"_30":29},"file",{"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":14,"_42":43,"_25":26},"previous","deleted",false,"deletedHere","path","frontend/directions.ts","latestPath","fileId","019fa425-873b-728a-b847-5054bbc4115d","name","directions.ts","fileType","script","content","// The three palette directions being riffed on. Each keeps the house DNA\n// (Fullerfont handwriting + wobbly ballpoint strokes) and adds color a\n// different way: colored INK, highlighter WASHES, or colored STROKES.\n\nexport interface Accent {\n name: string;\n hex: string; // light-mode color\n dark: string; // dark-mode color\n role: string;\n}\n\nexport interface Direction {\n id: string;\n name: string;\n tagline: string;\n paper: string;\n paperDark: string;\n ink: string;\n inkDark: string;\n faint: string;\n faintDark: string;\n accents: Accent[];\n /** draw card/button borders in accent colors (felt-tip) */\n colorStrokes: boolean;\n /** translucent highlighter washes behind text (highlighter) */\n wash: boolean;\n}\n\nexport const DIRECTIONS: Direction[] = [\n {\n id: \"quatro\",\n name: \"quatro\",\n tagline: \"the Bic 4-colour pen: black ink, with blue / red / green doing real jobs\",\n paper: \"#fdfbf4\",\n paperDark: \"#191817\",\n ink: \"#24211d\",\n inkDark: \"#e9e6df\",\n faint: \"#9a938a\",\n faintDark: \"#6f6a63\",\n accents: [\n { name: \"blue\", hex: \"#2049c7\", dark: \"#7f9bff\", role: \"links + primary\" },\n { name: \"red\", hex: \"#d0342c\", dark: \"#ff7a70\", role: \"danger + no\" },\n { name: \"green\", hex: \"#187a3f\", dark: \"#5fce8b\", role: \"success + grow\" },\n { name: \"ink\", hex: \"#24211d\", dark: \"#e9e6df\", role: \"everything else\" },\n ],\n colorStrokes: false,\n wash: false,\n },\n {\n id: \"highlighter\",\n name: \"highlighter\",\n tagline: \"everything stays ink — color arrives as fluorescent swipes behind the words\",\n paper: \"#fffef8\",\n paperDark: \"#1b1b19\",\n ink: \"#232323\",\n inkDark: \"#ececec\",\n faint: \"#a3a39b\",\n faintDark: \"#71716b\",\n accents: [\n { name: \"yellow\", hex: \"#ffe93c\", dark: \"#ffe93c\", role: \"the default mark\" },\n { name: \"pink\", hex: \"#ff87b8\", dark: \"#ff87b8\", role: \"love it\" },\n { name: \"green\", hex: \"#6ee787\", dark: \"#6ee787\", role: \"go\" },\n { name: \"orange\", hex: \"#ffb340\", dark: \"#ffb340\", role: \"careful\" },\n ],\n colorStrokes: false,\n wash: true,\n },\n {\n id: \"felt-tip\",\n name: \"felt-tip\",\n tagline: \"the strokes themselves change pens — cards and marks drawn in marker colors\",\n paper: \"#fbf7ef\",\n paperDark: \"#1c1a20\",\n ink: \"#2a2436\",\n inkDark: \"#efeaf6\",\n faint: \"#9d94a8\",\n faintDark: \"#6e6779\",\n accents: [\n { name: \"purple\", hex: \"#6a3fd6\", dark: \"#a98cff\", role: \"primary\" },\n { name: \"orange\", hex: \"#ee7712\", dark: \"#ffa14d\", role: \"energy\" },\n { name: \"teal\", hex: \"#0d8f8f\", dark: \"#4ecfcb\", role: \"calm\" },\n { name: \"magenta\", hex: \"#d0338f\", dark: \"#ff7ac2\", role: \"play\" },\n ],\n colorStrokes: true,\n wash: false,\n },\n];\n\n/** hex + alpha → rgba() string */\nexport function hexA(hex: string, a: number): string {\n const n = parseInt(hex.slice(1), 16);\n return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;\n}\n","createdAt",["D",1785165350720],"branchVersion","branchId","cc238b07-ed16-42c9-b2a1-eb57969739ee",{"_31":46,"_33":47,"_35":36,"_37":48,"_39":49,"_41":14,"_42":43,"_25":26},"frontend/pen.tsx","019fa425-873b-728a-b847-4e2e8b77adb0","pen.tsx","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// Hand-drawn primitives — the wobbly rounded-rect is a faithful port of\n// dcm31/ballpointPenCard (exact corner transition points, bezier smoothing).\nimport React, { useMemo } from \"https://esm.sh/react@18.2.0\";\n\ntype Pt = { x: number; y: number; t: boolean };\n\nfunction jig(x: number, y: number, mag: number, exact = false): Pt {\n if (exact) return { x, y, t: true };\n const w = (Math.random() - 0.5) * mag * 1.25;\n return { x: x + w, y: y + w, t: false };\n}\n\nfunction smooth(points: Pt[], close = true): string {\n if (!points.length) return \"\";\n let d = `M ${points[0].x},${points[0].y}`;\n for (let i = 1; i < points.length - 1; i++) {\n const p0 = points[i - 1], p1 = points[i], p2 = points[i + 1];\n if (p1.t) { d += ` L ${p1.x},${p1.y}`; continue; }\n const d01 = Math.hypot(p1.x - p0.x, p1.y - p0.y);\n const d12 = Math.hypot(p2.x - p1.x, p2.y - p1.y);\n const s = 0.25, fa = s * d01 / (d01 + d12), fb = s * d12 / (d01 + d12);\n d += ` C ${p1.x - fa * (p2.x - p0.x)},${p1.y - fa * (p2.y - p0.y)} ${p1.x + fb * (p2.x - p0.x)},${p1.y + fb * (p2.y - p0.y)} ${p1.x},${p1.y}`;\n }\n d += ` L ${points[points.length - 1].x},${points[points.length - 1].y}`;\n return close ? d + \" Z\" : d;\n}\n\nexport function roundedRectPath(w: number, h: number, r: number, mag: number, n = 8): string {\n const p: Pt[] = [];\n const tp = {\n tr: { x: w - r, y: 0 }, rt: { x: w, y: r }, rb: { x: w, y: h - r }, br: { x: w - r, y: h },\n bl: { x: r, y: h }, lb: { x: 0, y: h - r }, lt: { x: 0, y: r }, tl: { x: r, y: 0 },\n };\n // top edge\n p.push(jig(tp.tl.x, tp.tl.y, 0, true));\n for (let i = 1; i < n; i++) { const t = i / n; p.push(jig(r + t * (w - 2 * r), 0, mag)); }\n p.push(jig(tp.tr.x, tp.tr.y, 0, true));\n // top-right corner\n p.push(jig(tp.tr.x, tp.tr.y, 0, true));\n for (let i = 1; i < n; i++) { const t = i / n; const a = -Math.PI / 2 + t * (Math.PI / 2); p.push(jig(w - r + Math.cos(a) * r, r + Math.sin(a) * r, mag * 0.8)); }\n p.push(jig(tp.rt.x, tp.rt.y, 0, true));\n // right edge\n p.push(jig(tp.rt.x, tp.rt.y, 0, true));\n for (let i = 1; i < n; i++) { const t = i / n; p.push(jig(w, r + t * (h - 2 * r), mag)); }\n p.push(jig(tp.rb.x, tp.rb.y, 0, true));\n // bottom-right corner\n p.push(jig(tp.rb.x, tp.rb.y, 0, true));\n for (let i = 1; i < n; i++) { const t = i / n; const a = t * (Math.PI / 2); p.push(jig(w - r + Math.cos(a) * r, h - r + Math.sin(a) * r, mag * 0.8)); }\n p.push(jig(tp.br.x, tp.br.y, 0, true));\n // bottom edge\n p.push(jig(tp.br.x, tp.br.y, 0, true));\n for (let i = 1; i < n; i++) { const t = i / n; p.push(jig(w - r - t * (w - 2 * r), h, mag)); }\n p.push(jig(tp.bl.x, tp.bl.y, 0, true));\n // bottom-left corner\n p.push(jig(tp.bl.x, tp.bl.y, 0, true));\n for (let i = 1; i < n; i++) { const t = i / n; const a = Math.PI / 2 + t * (Math.PI / 2); p.push(jig(r + Math.cos(a) * r, h - r + Math.sin(a) * r, mag * 0.8)); }\n p.push(jig(tp.lb.x, tp.lb.y, 0, true));\n // left edge\n p.push(jig(tp.lb.x, tp.lb.y, 0, true));\n for (let i = 1; i < n; i++) { const t = i / n; p.push(jig(0, h - r - t * (h - 2 * r), mag)); }\n p.push(jig(tp.lt.x, tp.lt.y, 0, true));\n // top-left corner\n p.push(jig(tp.lt.x, tp.lt.y, 0, true));\n for (let i = 1; i < n; i++) { const t = i / n; const a = Math.PI + t * (Math.PI / 2); p.push(jig(r + Math.cos(a) * r, r + Math.sin(a) * r, mag * 0.8)); }\n p.push(jig(tp.tl.x, tp.tl.y, 0, true));\n return smooth(p);\n}\n\nexport function circlePath(rad: number, mag: number, n = 30): string {\n const p: Pt[] = [];\n for (let i = 0; i <= n; i++) {\n const a = (i / n) * Math.PI * 2;\n p.push(jig(Math.cos(a) * rad, Math.sin(a) * rad, i === 0 || i === n ? 0 : mag, i === 0 || i === n));\n }\n return smooth(p);\n}\n\n/** back-and-forth \"coloring in\" scribble that fills a circle of radius rad */\nexport function scribblePath(rad: number, step = 6.5): string {\n const pts: string[] = [];\n let dir = 1;\n for (let y = -rad + step; y < rad; y += step) {\n const half = Math.sqrt(Math.max(0, rad * rad - y * y)) - 2;\n const x0 = -half * dir, x1 = half * dir;\n const jy = () => y + (Math.random() - 0.5) * 2.4;\n pts.push(`${x0 + (Math.random() - 0.5) * 3},${jy()}`);\n pts.push(`${x1 + (Math.random() - 0.5) * 3},${jy()}`);\n dir *= -1;\n }\n return \"M \" + pts.join(\" L \");\n}\n\n/** horizontal squiggle for underlines / dividers */\nexport function squigglePath(width: number, amp = 2.4, step = 9): string {\n const p: Pt[] = [];\n for (let x = 0; x <= width; x += step) {\n p.push(jig(x, amp + 2, amp, x === 0 || x + step > width));\n }\n return smooth(p, false);\n}\n\n// ---------- components ----------\n\nexport function WobblyBox({\n w = 260, h = 120, r = 26, stroke = \"#333\", fill = \"transparent\",\n sw = 3.4, mag = 2.5, nonce = 0, style, children,\n}: {\n w?: number; h?: number; r?: number; stroke?: string; fill?: string;\n sw?: number; mag?: number; nonce?: number;\n style?: React.CSSProperties; children?: React.ReactNode;\n}) {\n const d = useMemo(() => roundedRectPath(w, h, Math.min(r, h / 2 - 1), mag), [w, h, r, mag, nonce]);\n return (\n

\n \n \n \n \n

\n {children}\n

\n );\n}\n\nexport function Scribble({ hex, ink, size = 76, nonce = 0 }: { hex: string; ink: string; size?: number; nonce?: number }) {\n const r = size / 2 - 8;\n const outline = useMemo(() => circlePath(r, 1.7), [r, nonce]);\n const fill = useMemo(() => scribblePath(r - 3), [r, nonce]);\n return (\n \n );\n}\n\nexport function Squiggle({ width = 120, color = \"#333\", sw = 2.6, nonce = 0 }: { width?: number; color?: string; sw?: number; nonce?: number }) {\n const d = useMemo(() => squigglePath(width), [width, nonce]);\n return (\n \n );\n}\n\n// hand-drawn marks: polylines on a 24×24 grid, jittered at render time\nconst MARKS: Record = {\n arrow: [[[3, 12], [19, 12]], [[14, 6], [20, 12], [14, 18]]],\n check: [[[4, 13], [9, 18], [20, 5]]],\n star: [[[12, 3], [14.6, 9.2], [21, 9.8], [16.2, 14], [17.8, 20.5], [12, 17], [6.2, 20.5], [7.8, 14], [3, 9.8], [9.4, 9.2], [12, 3]]],\n heart: [[[12, 20], [4.5, 12.5], [3.5, 8], [6.5, 4.5], [10, 5], [12, 8], [14, 5], [17.5, 4.5], [20.5, 8], [19.5, 12.5], [12, 20]]],\n sprout: [[[12, 21], [12, 10]], [[12, 13], [7, 10.5], [5, 5.5], [10, 7], [12, 10]], [[12, 11], [17, 8.5], [19, 3.5], [14, 5], [12, 8]]],\n bolt: [[[13, 2], [6, 13], [11, 13], [9, 22], [18, 10], [13, 10], [13, 2]]],\n};\n\nexport const MARK_NAMES = Object.keys(MARKS);\n\nexport function Mark({ name, color, size = 30, nonce = 0 }: { name: string; color: string; size?: number; nonce?: number }) {\n const paths = useMemo(\n () =>\n (MARKS[name] ?? MARKS.star).map(\n (line) => \"M \" + line.map(([x, y]) => `${x + (Math.random() - 0.5) * 1.3},${y + (Math.random() - 0.5) * 1.3}`).join(\" L \"),\n ),\n [name, nonce],\n );\n return (\n \n );\n}\n",["D",1785165350720],{"_31":52,"_33":51,"_35":53,"_37":-5,"_39":54,"_41":14,"_42":43,"_25":26},"frontend","019fa425-873b-728a-b847-4bddc0a0a23b","directory",["D",1785165350720],"id","e09a1d87-4af6-4f26-ac68-90b8a13ce22a","slopify",["D",1785165346995],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","famous poems vs. their slop rewrites, side by side","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","10966440-89ce-11f1-8da1-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_109":108,"_117":113},"org",{"_109":108,"_110":111,"_112":113,"_18":67,"_114":115,"_116":26},"branch",{"_13":98,"_33":99,"_55":43,"_100":56,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":57,"_107":108},"isOwned",16,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789581599&sig=aa89c75ccb14b30f67f191d970081889e190f659b15ae1946f2f2fd355e8fba5","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_55":56,"_33":57,"_39":172,"_59":-5,"_60":26,"_61":62,"_63":62,"_64":65,"_66":-5,"_18":67,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":75,"_76":77,"_78":-5,"_79":-5,"_80":-5,"_81":-5,"_82":83,"_84":83,"_85":86,"_87":86,"_88":86,"_89":83,"_90":83,"_91":173,"_93":174,"_95":175,"_97":26},"tree",[157],"files",[157,158,159],"counts",{"_147":75,"_148":14,"_149":75,"_150":151,"_152":153},"contents",[140],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_55":141,"_33":51,"_31":52,"_142":-5,"_42":43,"_41":14,"_143":71,"_39":144,"_13":75,"_35":53,"_37":-5,"_25":26,"_145":-5,"_28":146},"5ab32bfd-4aaa-4b95-b723-da79c46296e3","parentId","latest",["D",1785165350720],"label",[51],"pulls","branches","forks","envVars",{"_154":75,"_156":75},"connections",{"_154":75,"_155":75},"count","unfilledCount","emptyCount",{"_55":141,"_33":51,"_31":52,"_142":-5,"_42":43,"_41":14,"_143":71,"_39":169,"_13":75,"_35":53,"_37":-5,"_25":26,"_145":-5,"_162":170,"_28":171},{"_55":165,"_33":34,"_31":32,"_142":52,"_42":43,"_41":14,"_143":71,"_39":166,"_13":75,"_35":36,"_37":38,"_25":26,"_145":-5,"_162":167,"_28":168},{"_55":160,"_33":47,"_31":46,"_142":52,"_42":43,"_41":14,"_143":71,"_39":161,"_13":75,"_35":36,"_37":48,"_25":26,"_145":-5,"_162":163,"_28":164},"6a784ac3-f0c8-4304-a21f-859c9285bd3e",["D",1785165350720],"children",[],[51,47],"f94bdd56-7946-4001-89a6-4b88a61aab68",["D",1785165350720],[],[51,34],["D",1785165350720],[158,159],[51],["D",1785165346995],{"_109":108,"_117":113},{"_109":108,"_110":111,"_112":113,"_18":67,"_114":115,"_116":26},{"_13":98,"_33":99,"_55":43,"_100":56,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":57,"_107":108},"ctx",{"_91":-5,"_137":209,"_210":211,"_212":213,"_214":26,"_215":26,"_216":26,"_217":71,"_218":-5,"_219":-7,"_220":-7,"_221":75,"_222":26,"_223":26,"_224":-5,"_225":26,"_226":26,"_227":26,"_228":-5},"ENV",{"_180":181,"_182":183,"_184":99,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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 · v1