[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_269":270,"_271":272},"routes/_app.x.$handle.$name",{"_104":103,"_31":44,"_112":90,"_26":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":125,"_126":127,"_128":24,"_129":130,"_131":59,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":54,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":24},"version",90,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/components/LabUI.tsx","latestPath","fileId","39bf4ee8-8cf0-11f1-bb46-1607ee4eb77e","name","LabUI.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport JSZip from \"https://esm.sh/jszip@3.10.1\";\n\nconst fontLink = \"https://fonts.googleapis.com/css2?family=Bangers&family=Caveat:wght@400;700&family=Chewy&family=Comic+Neue:wght@400;700&family=Nunito:wght@400;700;900&family=Patrick+Hand&family=Special+Elite&display=swap\";\n\nexport function escapeHTML(value: string) {\n return value.replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll('\"', \""\");\n}\n\nfunction downloadHTML(name: string, html: string) {\n const blob = new Blob([html], { type: \"text/html\" });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = name;\n link.click();\n URL.revokeObjectURL(url);\n}\n\nconst pageShell = (title: string, body: string, extraCSS = \"\") => `\n\n\n \n \n ${escapeHTML(title)}\n \n \n\n${body}\n`;\n\nexport function Board({ children }: { children: any }) {\n return (\n

\n {children}\n

\n );\n}\n\nexport function BackButton({ onBack }: { onBack: () => void }) {\n return ;\n}\n\nexport function LabShell({ title, subtitle, color, onBack, children }: any) {\n return (\n \n \n

WRITING LAB

{title}

{subtitle}

{children}

\n \n );\n}\n\nexport function Paper({ children, pin = \"red\" }: { children: any; pin?: string }) {\n return (\n

\n \n {children}\n

\n );\n}\n\nexport function Field({ label, value, onChange, placeholder, rows = 1 }: any) {\n const cls = \"w-full bg-[#fffef8] border-0 border-b-2 border-[#6f9bd1] focus:border-[#ef5138] focus:outline-none px-3 py-3 text-lg\";\n return (\n \n {label}\n {rows > 1\n ?

onChange(e.target.value)} placeholder={placeholder} />\n        : <input className={cls} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />}\n    </label>\n  );\n}\n\nexport function Tags({ items }: { items: { code: string; text: string }[] }) {\n  return (\n    <div className=\"bg-[#ffe17a] border-4 border-[#17233c] p-4 my-5 shadow-[5px_5px_0_#2878d0]\">\n      <p className=\"font-black text-lg mb-3\">🧱 HTML building blocks</p>\n      <div className=\"space-y-2\">\n        {items.map((item) => <div key={item.code} className=\"flex gap-3 items-start\"><code className=\"bg-[#17233c] text-white px-2 py-1 whitespace-nowrap\">{item.code}</code><p className=\"font-bold\">{item.text}</p></div>)}\n      </div>\n    </div>\n  );\n}\n\nexport function Preview({ html }: { html: string }) {\n  const previewHTML = html.replace(\"</body>\", `\n    <script>\n      document.addEventListener(\"click\", (event) => {\n        const link = event.target instanceof Element\n          ? event.target.closest('a[href^=\"#\"]')\n          : null;\n        if (!link) return;\n\n        const href = link.getAttribute(\"href\");\n        event.preventDefault();\n\n        if (href === \"#\") {\n          window.scrollTo({ top: 0, behavior: \"smooth\" });\n          return;\n        }\n\n        const target = document.getElementById(decodeURIComponent(href.slice(1)));\n        target?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n      });\n    </script>\n  </body>`);\n\n  return (\n    <div className=\"bg-[#17233c] border-[10px] border-[#ef5138] shadow-[9px_9px_0_#17233c] sticky top-20\">\n      <div className=\"text-white px-3 py-2 font-black text-sm\">● ● ●   LIVE WEBPAGE</div>\n      <iframe title=\"Live webpage preview\" className=\"w-full h-[650px] bg-white\" sandbox=\"allow-scripts allow-same-origin allow-presentation\" srcDoc={previewHTML} />\n    </div>\n  );\n}\n\nexport function safeAssetName(name: string) {\n  const dot = name.lastIndexOf(\".\");\n  const extension = dot >= 0 ? name.slice(dot).toLowerCase().replace(/[^a-z0-9.]/g, \"\") : \"\";\n  const base = (dot >= 0 ? name.slice(0, dot) : name)\n    .toLowerCase()\n    .trim()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-|-$/g, \"\") || \"media\";\n  return base + extension;\n}\n\nexport function youtubeEmbedUrl(value: string) {\n  if (!value.trim()) return \"\";\n  try {\n    const url = new URL(value.trim());\n    let id = \"\";\n    if (url.hostname === \"youtu.be\") id = url.pathname.slice(1).split(\"/\")[0];\n    if (url.hostname.endsWith(\"youtube.com\")) {\n      id = url.searchParams.get(\"v\") || \"\";\n      if (!id && (url.pathname.startsWith(\"/shorts/\") || url.pathname.startsWith(\"/embed/\"))) {\n        id = url.pathname.split(\"/\")[2] || \"\";\n      }\n    }\n    return /^[a-zA-Z0-9_-]{6,}$/.test(id)\n      ? \"https://firstpage.val.run/youtube/\" + id\n      : \"\";\n  } catch {\n    return \"\";\n  }\n}\n\nasync function downloadProject(name: string, html: string, assets: { file: File; path: string }[]) {\n  if (!assets.length) {\n    downloadHTML(name, html);\n    return;\n  }\n\n  const zip = new JSZip();\n  zip.file(\"index.html\", html);\n  assets.forEach(({ file, path }) => zip.file(path, file));\n  zip.file(\"README.txt\", \"Open index.html in a browser. Keep the media folder beside index.html.\");\n\n  const blob = await zip.generateAsync({ type: \"blob\" });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.download = name.replace(/\\.html$/, \".zip\");\n  link.click();\n  URL.revokeObjectURL(url);\n}\n\nexport function DownloadButton({\n  name,\n  html,\n  assets = [],\n}: {\n  name: string;\n  html: string;\n  assets?: { file: File; path: string }[];\n}) {\n  return (\n    <button\n      onClick={() => downloadProject(name, html, assets)}\n      className=\"w-full mt-5 bg-[#ef5138] text-white border-4 border-[#17233c] px-5 py-4 font-black text-lg shadow-[5px_5px_0_#17233c]\"\n    >\n      {assets.length ? \"Download my webpage and media (.zip)\" : \"Download my HTML page\"}\n    </button>\n  );\n}\n\n","createdAt",["D",1785509881394],"branchVersion","branchId","e61b9380-cdfc-422f-a63c-d1817f84669f","id","aef53a57-6458-4eeb-8180-aac88cdb3009","firstpage",["D",1785431448217],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A 20-minute HTML website maker for kids","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3c8e68aa-c2ee-49f5-a58d-a7c153163700/square512?exp=1789559999&sig=1b3caa46da01a2ce5b977c4f7667cd25a2fa2a750fb7d3b16a185cc4e0d2c645","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","019fb401-dc04-779a-98cc-bb5991078e25","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","aef53a5764584eeb8180aac88cdb3009","tursoHostname","aef53a5764584eeb8180aac88cdb3009-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789476033740],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_111":107},"org",{"_104":103,"_105":-5,"_106":107,"_18":55,"_108":109,"_110":24},"branch",{"_13":89,"_31":90,"_42":41,"_91":43,"_92":93,"_94":95,"_96":49,"_97":98,"_99":100,"_101":44,"_102":103},"isOwned",162,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",91,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","pchinjr","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":264,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":54,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":265,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":266,"_84":267,"_86":268,"_88":24},"tree",[185,194,195],"files",[185,186,187,188,189,190,191,192,193,194,195],"counts",{"_175":63,"_176":166,"_177":63,"_178":179,"_180":181},"contents",[147,148,149],"upstreamProject",{"_42":98,"_31":142,"_51":143,"_53":144,"_48":49,"_82":145},"upstreamBranch",{"_42":93,"_37":136,"_137":138,"_31":90,"_91":98,"_13":95,"_92":-5,"_94":-5,"_139":140,"_46":-5,"_88":24,"_48":49,"_102":141,"_64":100,"_101":142},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789559999&sig=919739a563bb9acb90fc6bc4f6c1789207958a7e1bd397d82b192d76e7e11de2",{"_104":141,"_111":146},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789559999&sig=5c07b77d973a9a7831cc1779f4bd4ec152796753863d0aeae4088e1e0ae03921",{"_42":169,"_31":170,"_29":171,"_152":-5,"_40":41,"_39":156,"_154":59,"_37":172,"_13":63,"_33":173,"_35":-5,"_23":24,"_159":-5,"_26":174},{"_42":161,"_31":162,"_29":163,"_152":-5,"_40":41,"_39":164,"_154":24,"_37":165,"_13":166,"_33":20,"_35":167,"_23":24,"_159":-5,"_26":168},{"_42":150,"_31":151,"_29":57,"_152":-5,"_40":41,"_39":153,"_154":59,"_37":155,"_13":156,"_33":157,"_35":158,"_23":24,"_159":44,"_26":160},"c3f39a70-86c4-4b1c-bb8f-27abf5629b75","index.ts","parentId",79,"latest",["D",1785507616781],1,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Give YouTube embeds a normal web origin, including when a downloaded\n// project is opened directly from Files or a local folder.\napp.get(\"/youtube/:id\", (c) => {\n  const id = c.req.param(\"id\");\n  if (!/^[a-zA-Z0-9_-]{6,}$/.test(id)) return c.text(\"Invalid YouTube video\", 400);\n\n  return c.html(`<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>YouTube video</title>\n  <style>\n    html, body, iframe { width: 100%; height: 100%; margin: 0; border: 0; }\n    body { background: #000; }\n  </style>\n</head>\n<body>\n  <iframe\n    src=\"https://www.youtube-nocookie.com/embed/${id}\"\n    title=\"YouTube video\"\n    referrerpolicy=\"strict-origin-when-cross-origin\"\n    allow=\"accelerometer; autoplay; encrypted-media; picture-in-picture\"\n    allowfullscreen\n  ></iframe>\n</body>\n</html>`);\n});\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[151],"9c4e316d-365d-46d5-b3c1-e277208f2f13","README.md","019fb401-dc04-779a-98cc-b5616de19757",84,["D",1785508025800],2,"# HTML Writing Lab\n\nA collection of beginner-friendly HTML writing activities for young web makers.\n\n## Activities\n\n- Make Your First Website\n- Tell a Hypertext Story\n- Choose Your Own Adventure\n- Make a Web Poem\n- Build a Whole Website\n- HTML Snippet Board\n\nThe activities introduce HTML structure, text, links, images, audio, video, and simple page-to-page navigation. Each builder includes a live preview and produces downloadable HTML.\n\nLive site: https://firstpage.val.run/\n",[162],"17ae220a-6dc4-4ed9-bfd2-7ab3f582c2d3","frontend","019fb401-dc04-779a-98cc-ad389a503384",["D",1785431448217],"directory",[170],"pulls","branches","forks","envVars",{"_182":63,"_184":63},"connections",{"_182":63,"_183":63},"count","unfilledCount","emptyCount",{"_42":169,"_31":170,"_29":171,"_152":-5,"_40":41,"_39":156,"_154":59,"_37":261,"_13":63,"_33":173,"_35":-5,"_23":24,"_159":-5,"_197":262,"_26":263},{"_42":257,"_31":243,"_29":237,"_152":171,"_40":41,"_39":156,"_154":59,"_37":258,"_13":63,"_33":173,"_35":-5,"_23":24,"_159":-5,"_197":259,"_26":260},{"_42":248,"_31":249,"_29":250,"_152":237,"_40":41,"_39":251,"_154":24,"_37":252,"_13":253,"_33":34,"_35":254,"_23":24,"_159":-5,"_197":255,"_26":256},{"_42":244,"_31":32,"_29":30,"_152":237,"_40":41,"_39":14,"_154":24,"_37":245,"_13":63,"_33":34,"_35":36,"_23":24,"_159":-5,"_197":246,"_26":247},{"_42":234,"_31":235,"_29":236,"_152":237,"_40":41,"_39":238,"_154":24,"_37":239,"_13":215,"_33":34,"_35":240,"_23":24,"_159":-5,"_197":241,"_26":242},{"_42":227,"_31":228,"_29":229,"_152":171,"_40":41,"_39":230,"_154":59,"_37":231,"_13":63,"_33":173,"_35":-5,"_23":24,"_159":-5,"_197":232,"_26":233},{"_42":220,"_31":221,"_29":222,"_152":171,"_40":41,"_39":156,"_154":59,"_37":223,"_13":63,"_33":20,"_35":224,"_23":24,"_159":-5,"_197":225,"_26":226},{"_42":212,"_31":213,"_29":214,"_152":171,"_40":41,"_39":215,"_154":59,"_37":216,"_13":156,"_33":34,"_35":217,"_23":24,"_159":-5,"_197":218,"_26":219},{"_42":203,"_31":204,"_29":205,"_152":171,"_40":41,"_39":206,"_154":59,"_37":207,"_13":208,"_33":34,"_35":209,"_23":24,"_159":-5,"_197":210,"_26":211},{"_42":161,"_31":162,"_29":163,"_152":-5,"_40":41,"_39":164,"_154":24,"_37":200,"_13":166,"_33":20,"_35":167,"_23":24,"_159":-5,"_197":201,"_26":202},{"_42":150,"_31":151,"_29":57,"_152":-5,"_40":41,"_39":153,"_154":59,"_37":196,"_13":156,"_33":157,"_35":158,"_23":24,"_159":44,"_197":198,"_26":199},["D",1785507616781],"children",[],[151],["D",1785508025800],[],[162],"55b836cf-367f-4bc6-a7f1-ac60212817fe","root.tsx","019fb401-dc04-779a-98cc-aa62523f023e",44,["D",1785442667213],4,"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <meta name=\"description\" content=\"Creative HTML writing activities for young web makers.\" />\n          <title>HTML Writing Lab</title>\n          <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n          <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"anonymous\" />\n          <link href=\"https://fonts.googleapis.com/css2?family=Bangers&family=Caveat:wght@400;700&family=Cinzel+Decorative:wght@700&family=Comic+Neue:wght@400;700&family=Chewy&family=Merriweather:wght@400;700&family=Nunito:wght@400;700;900&family=Patrick+Hand&family=Special+Elite&display=swap\" rel=\"stylesheet\" />\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"m-0\">\n          <main><div id=\"root\" /></main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n",[],[170,204],"463cef6c-51d1-479d-85ed-e149b82cdebb","index.tsx","019fb401-dc04-779a-98cc-a762fe5dac82",39,["D",1785442604236],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/Modules.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(<App />);",[],[170,213],"8c55a443-331e-4e9e-b0ca-7929ca69f4e8","favicon.svg","019fb401-dc04-779a-98cc-a25e10fe4579",["D",1785431448217],"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#4a90e2\" />\n  <circle cx=\"16\" cy=\"16\" r=\"8\" fill=\"#ffffff\" opacity=\"0.3\" />\n</svg>",[],[170,221],"3372875a-be47-46dd-afbe-73c8a72d5266","modules","23cafa60-8cf0-11f1-b00c-1607ee4eb77e",89,["D",1785509844509],[],[170,228],"e227b479-422e-41ea-8b43-7e0166037593","Modules.tsx","8f199b98-8c53-11f1-9c08-1607ee4eb77e","019fb401-dc04-779a-98cc-9f7db0f3fea4",88,["D",1785509642159],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport JSZip from \"https://esm.sh/jszip@3.10.1\";\nimport { FirstWebsiteApp } from \"./App.tsx\";\n\ntype ModuleName = \"hub\" | \"first\" | \"hypertext\" | \"adventure\" | \"poetry\" | \"advanced\" | \"reference\";\n\nconst fontLink = \"https://fonts.googleapis.com/css2?family=Bangers&family=Caveat:wght@400;700&family=Chewy&family=Comic+Neue:wght@400;700&family=Nunito:wght@400;700;900&family=Patrick+Hand&family=Special+Elite&display=swap\";\n\nfunction escapeHTML(value: string) {\n  return value.replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll('\"', \""\");\n}\n\nfunction downloadHTML(name: string, html: string) {\n  const blob = new Blob([html], { type: \"text/html\" });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.download = name;\n  link.click();\n  URL.revokeObjectURL(url);\n}\n\nconst pageShell = (title: string, body: string, extraCSS = \"\") => `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>${escapeHTML(title)}</title>\n  <link href=\"${fontLink}\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n    body { max-width: 780px; margin: 0 auto; padding: 32px; color: #17233c; background: #fff8e8; font-family: Nunito, sans-serif; line-height: 1.65; }\n    h1, h2 { color: #7048a8; }\n    a { color: #b92d45; font-weight: 800; }\n    img, video { max-width: 100%; border-radius: 16px; }\n    section { margin: 32px 0; padding: 24px; background: white; border: 3px solid #17233c; }\n    ${extraCSS}\n  </style>\n</head>\n<body>${body}</body>\n</html>`;\n\nfunction Board({ children }: { children: any }) {\n  return (\n    <div className=\"min-h-screen bg-[#b97842] border-[14px] border-[#6e4325] text-[#17233c]\" style={{ backgroundImage: \"radial-gradient(#8f562d 1.5px, transparent 1.5px)\", backgroundSize: \"12px 12px\" }}>\n      {children}\n    </div>\n  );\n}\n\nfunction BackButton({ onBack }: { onBack: () => void }) {\n  return <button onClick={onBack} className=\"fixed z-50 top-4 right-4 bg-[#ffe17a] border-4 border-[#17233c] px-4 py-2 font-black shadow-[4px_4px_0_#ef5138]\">← All activities</button>;\n}\n\nfunction LabShell({ title, subtitle, color, onBack, children }: any) {\n  return (\n    <Board>\n      <BackButton onBack={onBack} />\n      <header className=\"max-w-7xl mx-auto px-4 pt-20 md:pt-8 pb-5\">\n        <div className={`inline-block ${color} border-4 border-[#17233c] px-6 py-4 -rotate-1 shadow-[8px_8px_0_#17233c]`}>\n          <p className=\"font-black tracking-widest text-sm\">WRITING LAB</p>\n          <h1 className=\"text-4xl md:text-5xl font-black\">{title}</h1>\n          <p className=\"font-bold mt-1\">{subtitle}</p>\n        </div>\n      </header>\n      <main className=\"max-w-7xl mx-auto px-4 pb-12\">{children}</main>\n    </Board>\n  );\n}\n\nfunction Paper({ children, pin = \"red\" }: { children: any; pin?: string }) {\n  return (\n    <section className=\"bg-[#fffdf3] border-4 border-[#17233c] p-5 md:p-7 shadow-[9px_9px_0_#f0c85a] relative\">\n      <span className={`absolute -top-4 left-8 w-6 h-6 rounded-full border-2 shadow ${pin === \"blue\" ? \"bg-[#2878d0] border-[#174d84]\" : \"bg-[#ef5138] border-[#8f2618]\"}`} />\n      {children}\n    </section>\n  );\n}\n\nfunction Field({ label, value, onChange, placeholder, rows = 1 }: any) {\n  const cls = \"w-full bg-[#fffef8] border-0 border-b-2 border-[#6f9bd1] focus:border-[#ef5138] focus:outline-none px-3 py-3 text-lg\";\n  return (\n    <label className=\"block mb-4\">\n      <span className=\"block font-black mb-1\">{label}</span>\n      {rows > 1\n        ? <textarea rows={rows} className={cls} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />\n        : <input className={cls} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />}\n    </label>\n  );\n}\n\nfunction Tags({ items }: { items: { code: string; text: string }[] }) {\n  return (\n    <div className=\"bg-[#ffe17a] border-4 border-[#17233c] p-4 my-5 shadow-[5px_5px_0_#2878d0]\">\n      <p className=\"font-black text-lg mb-3\">🧱 HTML building blocks</p>\n      <div className=\"space-y-2\">\n        {items.map((item) => <div key={item.code} className=\"flex gap-3 items-start\"><code className=\"bg-[#17233c] text-white px-2 py-1 whitespace-nowrap\">{item.code}</code><p className=\"font-bold\">{item.text}</p></div>)}\n      </div>\n    </div>\n  );\n}\n\nfunction Preview({ html }: { html: string }) {\n  const previewHTML = html.replace(\"</body>\", `\n    <script>\n      document.addEventListener(\"click\", (event) => {\n        const link = event.target instanceof Element\n          ? event.target.closest('a[href^=\"#\"]')\n          : null;\n        if (!link) return;\n\n        const href = link.getAttribute(\"href\");\n        event.preventDefault();\n\n        if (href === \"#\") {\n          window.scrollTo({ top: 0, behavior: \"smooth\" });\n          return;\n        }\n\n        const target = document.getElementById(decodeURIComponent(href.slice(1)));\n        target?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n      });\n    </script>\n  </body>`);\n\n  return (\n    <div className=\"bg-[#17233c] border-[10px] border-[#ef5138] shadow-[9px_9px_0_#17233c] sticky top-20\">\n      <div className=\"text-white px-3 py-2 font-black text-sm\">● ● ●   LIVE WEBPAGE</div>\n      <iframe title=\"Live webpage preview\" className=\"w-full h-[650px] bg-white\" sandbox=\"allow-scripts allow-same-origin allow-presentation\" srcDoc={previewHTML} />\n    </div>\n  );\n}\n\nfunction safeAssetName(name: string) {\n  const dot = name.lastIndexOf(\".\");\n  const extension = dot >= 0 ? name.slice(dot).toLowerCase().replace(/[^a-z0-9.]/g, \"\") : \"\";\n  const base = (dot >= 0 ? name.slice(0, dot) : name)\n    .toLowerCase()\n    .trim()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-|-$/g, \"\") || \"media\";\n  return base + extension;\n}\n\nfunction youtubeEmbedUrl(value: string) {\n  if (!value.trim()) return \"\";\n  try {\n    const url = new URL(value.trim());\n    let id = \"\";\n    if (url.hostname === \"youtu.be\") id = url.pathname.slice(1).split(\"/\")[0];\n    if (url.hostname.endsWith(\"youtube.com\")) {\n      id = url.searchParams.get(\"v\") || \"\";\n      if (!id && (url.pathname.startsWith(\"/shorts/\") || url.pathname.startsWith(\"/embed/\"))) {\n        id = url.pathname.split(\"/\")[2] || \"\";\n      }\n    }\n    return /^[a-zA-Z0-9_-]{6,}$/.test(id)\n      ? \"https://firstpage.val.run/youtube/\" + id\n      : \"\";\n  } catch {\n    return \"\";\n  }\n}\n\nasync function downloadProject(name: string, html: string, assets: { file: File; path: string }[]) {\n  if (!assets.length) {\n    downloadHTML(name, html);\n    return;\n  }\n\n  const zip = new JSZip();\n  zip.file(\"index.html\", html);\n  assets.forEach(({ file, path }) => zip.file(path, file));\n  zip.file(\"README.txt\", \"Open index.html in a browser. Keep the media folder beside index.html.\");\n\n  const blob = await zip.generateAsync({ type: \"blob\" });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.download = name.replace(/\\.html$/, \".zip\");\n  link.click();\n  URL.revokeObjectURL(url);\n}\n\nfunction DownloadButton({\n  name,\n  html,\n  assets = [],\n}: {\n  name: string;\n  html: string;\n  assets?: { file: File; path: string }[];\n}) {\n  return (\n    <button\n      onClick={() => downloadProject(name, html, assets)}\n      className=\"w-full mt-5 bg-[#ef5138] text-white border-4 border-[#17233c] px-5 py-4 font-black text-lg shadow-[5px_5px_0_#17233c]\"\n    >\n      {assets.length ? \"Download my webpage and media (.zip)\" : \"Download my HTML page\"}\n    </button>\n  );\n}\n\nfunction ModuleHub({ choose }: { choose: (module: ModuleName) => void }) {\n  const cards = [\n    { id: \"first\", icon: \"🧱\", title: \"Make Your First Website\", text: \"Build two pages about something you love.\", color: \"bg-[#ffe17a]\" },\n    { id: \"hypertext\", icon: \"🕸️\", title: \"Tell a Hypertext Story\", text: \"Connect scenes and mix words with pictures, sound, and video.\", color: \"bg-[#a9d8ff]\" },\n    { id: \"adventure\", icon: \"🗺️\", title: \"Choose Your Own Adventure\", text: \"Write choices that send readers down different paths.\", color: \"bg-[#b9e6bd]\" },\n    { id: \"poetry\", icon: \"✍️\", title: \"Make a Web Poem\", text: \"Use spacing, emphasis, pictures, and sound to perform a poem.\", color: \"bg-[#ffb8c2]\" },\n    { id: \"advanced\", icon: \"🛠️\", title: \"Build a Whole Website\", text: \"Use a visual editor to create, connect, preview, and download multiple pages.\", color: \"bg-[#ffca8a]\" },\n    { id: \"reference\", icon: \"📌\", title: \"HTML Snippet Board\", text: \"Find, understand, and copy useful HTML building blocks.\", color: \"bg-[#d7c0f4]\" },\n  ] as const;\n  return (\n    <Board>\n      <main className=\"max-w-6xl mx-auto px-4 py-8 md:py-12\">\n        <div className=\"bg-[#fffdf3] border-4 border-[#17233c] p-6 md:p-8 shadow-[10px_10px_0_#ef5138] relative mb-8\">\n          <span className=\"absolute -top-4 left-1/2 w-7 h-7 rounded-full bg-[#f3c623] border-2 border-[#8a6312]\" />\n          <p className=\"text-[#2878d0] font-black tracking-widest\">WELCOME TO THE</p>\n          <h1 className=\"text-4xl md:text-6xl font-black\">HTML Writing Lab</h1>\n          <p className=\"text-xl font-bold mt-2\">Choose an activity. Write something that could only exist on the web.</p>\n        </div>\n        <div className=\"grid md:grid-cols-2 gap-6\">\n          {cards.map((card, i) => (\n            <button key={card.id} onClick={() => choose(card.id)} className={`${card.color} border-4 border-[#17233c] p-6 text-left shadow-[7px_7px_0_#17233c] hover:-translate-y-1 transition-transform relative ${i % 2 ? \"rotate-[0.4deg]\" : \"-rotate-[0.4deg]\"}`}>\n              <span className=\"absolute -top-3 right-8 w-6 h-6 rounded-full bg-[#ef5138] border-2 border-[#8f2618]\" />\n              <span className=\"text-5xl\">{card.icon}</span>\n              <h2 className=\"text-2xl font-black mt-3\">{card.title}</h2>\n              <p className=\"font-bold mt-2\">{card.text}</p>\n            </button>\n          ))}\n        </div>\n      </main>\n    </Board>\n  );\n}\n\nfunction HypertextLab({ onBack }: { onBack: () => void }) {\n  const [title, setTitle] = useState(\"The Door Behind the Bookshelf\");\n  const [opening, setOpening] = useState(\"I pulled the oldest book, and the whole shelf swung open.\");\n  const [scene, setScene] = useState(\"Behind it was a blue hallway humming like a refrigerator.\");\n  const [ending, setEnding] = useState(\"At the end of the hallway, I found a room full of tiny suns.\");\n  const [image, setImage] = useState(\"🚪\");\n  const [imageUrl, setImageUrl] = useState(\"\");\n  const [imageAlt, setImageAlt] = useState(\"An old wooden door\");\n  const [audio, setAudio] = useState(\"\");\n  const [video, setVideo] = useState(\"\");\n  const [imageFile, setImageFile] = useState<File | null>(null);\n  const [audioFile, setAudioFile] = useState<File | null>(null);\n  const [videoFile, setVideoFile] = useState<File | null>(null);\n\n  const imagePath = imageFile ? \"media/\" + safeAssetName(imageFile.name) : \"\";\n  const audioPath = audioFile ? \"media/\" + safeAssetName(audioFile.name) : \"\";\n  const videoPath = videoFile ? \"media/\" + safeAssetName(videoFile.name) : \"\";\n  const youtubeVideo = youtubeEmbedUrl(video);\n  const html = useMemo(() => pageShell(title, `\n    <h1>${escapeHTML(title)}</h1>\n    <p>${escapeHTML(opening)} <a href=\"#discovery\">Follow the strange sound ↓</a></p>\n    ${imageUrl ? `<img src=\"${escapeHTML(imageUrl)}\" alt=\"${escapeHTML(imageAlt)}\">` : `<div role=\"img\" aria-label=\"${escapeHTML(imageAlt)}\" style=\"font-size:7rem\">${escapeHTML(image)}</div>`}\n    <section id=\"discovery\">\n      <h2>The discovery</h2>\n      <p>${escapeHTML(scene)}</p>\n      ${audio ? `<audio controls src=\"${escapeHTML(audio)}\">Your browser cannot play this sound.</audio>` : \"\"}\n      ${youtubeVideo ? `<iframe class=\"youtube\" src=\"${escapeHTML(youtubeVideo)}\" title=\"YouTube video\" referrerpolicy=\"strict-origin-when-cross-origin\" allow=\"accelerometer; autoplay; encrypted-media; picture-in-picture\" allowfullscreen></iframe>` : video ? `<video controls src=\"${escapeHTML(video)}\">Your browser cannot play this video.</video>` : \"\"}\n      <p><a href=\"#ending\">See what happened next ↓</a></p>\n    </section>\n    <section id=\"ending\"><h2>The ending</h2><p>${escapeHTML(ending)}</p><a href=\"#\">Read it again ↑</a></section>\n  `, `html { scroll-behavior:smooth; } audio { width:100%; margin:16px 0; } .youtube { width:100%; aspect-ratio:16/9; border:0; margin:16px 0; }`), [title, opening, scene, ending, image, imageUrl, imageAlt, audio, video, youtubeVideo]);\n\n  let downloadableHTML = html;\n  if (imageFile && imageUrl) downloadableHTML = downloadableHTML.replaceAll(imageUrl, imagePath);\n  if (audioFile && audio) downloadableHTML = downloadableHTML.replaceAll(audio, audioPath);\n  if (videoFile && video) downloadableHTML = downloadableHTML.replaceAll(video, videoPath);\n\n  const assets = [\n    ...(imageFile ? [{ file: imageFile, path: imagePath }] : []),\n    ...(audioFile ? [{ file: audioFile, path: audioPath }] : []),\n    ...(videoFile ? [{ file: videoFile, path: videoPath }] : []),\n  ];\n\n  return (\n    <LabShell title=\"Tell a Hypertext Story\" subtitle=\"Make a story readers move through instead of only reading top to bottom.\" color=\"bg-[#a9d8ff]\" onBack={onBack}>\n      <div className=\"grid lg:grid-cols-2 gap-7 items-start\">\n        <Paper>\n          <h2 className=\"text-3xl font-black\">1. Write three connected scenes</h2>\n          <p className=\"font-bold mb-4\">Links can jump to named places inside the same page. That gives your reader control over movement.</p>\n          <Tags items={[\n            { code: \"<a>\", text: \"Creates the words a reader can click.\" },\n            { code: \"href=\\\"#ending\\\"\", text: \"Jumps to the element named ending.\" },\n            { code: \"id=\\\"ending\\\"\", text: \"Gives a place on the page a name.\" },\n            { code: \"<section>\", text: \"Groups one scene or part of the story.\" },\n          ]} />\n          <Field label=\"Story title\" value={title} onChange={setTitle} />\n          <Field label=\"Opening scene\" rows={3} value={opening} onChange={setOpening} />\n          <Field label=\"What does the reader discover?\" rows={3} value={scene} onChange={setScene} />\n          <Field label=\"How does it end?\" rows={3} value={ending} onChange={setEnding} />\n          <h2 className=\"text-3xl font-black mt-8\">2. Tell it with more than words</h2>\n          <Tags items={[\n            { code: \"<img>\", text: \"Embeds a picture.\" },\n            { code: \"<audio controls>\", text: \"Adds a playable sound.\" },\n            { code: \"<video controls>\", text: \"Adds a playable video.\" },\n            { code: \"alt=\\\"…\\\"\", text: \"Describes a picture for readers who cannot see it.\" },\n          ]} />\n          <Field label=\"Simple picture or emoji\" value={image} onChange={setImage} />\n          <Field label=\"Describe the picture\" value={imageAlt} onChange={setImageAlt} />\n\n          <details className=\"mb-3 bg-[#eef7ff] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🖼️ Add a picture</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {imageFile ? `Chosen: ${imageFile.name}` : \"Choose from Photos or Files\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"image/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (imageUrl.startsWith(\"blob:\")) URL.revokeObjectURL(imageUrl);\n                setImageFile(file);\n                setImageUrl(URL.createObjectURL(file));\n              }} />\n            </label>\n            {imageFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(imageUrl); setImageFile(null); setImageUrl(\"\"); }} className=\"mb-3 underline font-bold\">Remove picture</button>}\n            <Field label=\"Or use a picture web address\" value={imageFile ? \"\" : imageUrl} onChange={(value: string) => { setImageFile(null); setImageUrl(value); }} placeholder=\"https://example.com/picture.jpg\" />\n          </details>\n\n          <details className=\"mb-3 bg-[#eef7ff] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🔊 Add a sound</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {audioFile ? `Chosen: ${audioFile.name}` : \"Choose an audio file from this device\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"audio/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (audio.startsWith(\"blob:\")) URL.revokeObjectURL(audio);\n                setAudioFile(file);\n                setAudio(URL.createObjectURL(file));\n              }} />\n            </label>\n            {audioFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(audio); setAudioFile(null); setAudio(\"\"); }} className=\"mb-3 underline font-bold\">Remove sound</button>}\n            <Field label=\"Or use a sound web address\" value={audioFile ? \"\" : audio} onChange={(value: string) => { setAudioFile(null); setAudio(value); }} placeholder=\"https://example.com/sound.mp3\" />\n          </details>\n\n          <details className=\"mb-3 bg-[#eef7ff] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🎥 Add a video</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {videoFile ? `Chosen: ${videoFile.name}` : \"Choose a video from this device\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"video/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (video.startsWith(\"blob:\")) URL.revokeObjectURL(video);\n                setVideoFile(file);\n                setVideo(URL.createObjectURL(file));\n              }} />\n            </label>\n            {videoFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(video); setVideoFile(null); setVideo(\"\"); }} className=\"mb-3 underline font-bold\">Remove video</button>}\n            <Field label=\"Or paste a direct video or YouTube address\" value={videoFile ? \"\" : video} onChange={(value: string) => { setVideoFile(null); setVideo(value); }} placeholder=\"https://youtube.com/watch?v=...\" />\n            {video && !videoFile && video.includes(\"youtu\") && !youtubeVideo && <p className=\"text-sm font-bold text-[#8f2618]\">That does not look like a complete YouTube address yet.</p>}\n            {videoFile && videoFile.size > 50 * 1024 * 1024 && <p className=\"text-sm font-bold text-[#8f2618]\">This video is larger than 50 MB, so creating the ZIP may take a while.</p>}\n          </details>\n          <p className=\"text-sm font-bold bg-[#ffdfdf] border-2 border-[#ef5138] p-3\">Ask a grown-up before using media from the web. Use files you made or have permission to share.</p>\n          <DownloadButton name=\"my-hypertext-story.html\" html={downloadableHTML} assets={assets} />\n        </Paper>\n        <Preview html={html} />\n      </div>\n    </LabShell>\n  );\n}\n\nfunction AdventureLab({ onBack }: { onBack: () => void }) {\n  const [title, setTitle] = useState(\"The Mystery of Moonlight Mountain\");\n  const [opening, setOpening] = useState(\"You reach a fork in the trail just as the sun disappears.\");\n  const [choiceA, setChoiceA] = useState(\"Enter the glowing cave\");\n  const [choiceB, setChoiceB] = useState(\"Climb toward the old tower\");\n  const [endingA, setEndingA] = useState(\"Inside the cave, you discover a friendly dragon guarding a library.\");\n  const [endingB, setEndingB] = useState(\"The tower is actually a telescope pointed at a brand-new planet.\");\n  const [pictureA, setPictureA] = useState(\"🐉\");\n  const [pictureB, setPictureB] = useState(\"🔭\");\n  const html = useMemo(() => pageShell(title, `\n    <h1>${escapeHTML(title)}</h1>\n    <section id=\"start\"><div class=\"scene\">🏔️</div><p>${escapeHTML(opening)}</p>\n      <div class=\"choices\"><a href=\"#path-a\">${escapeHTML(choiceA)}</a><a href=\"#path-b\">${escapeHTML(choiceB)}</a></div>\n    </section>\n    <section id=\"path-a\"><div class=\"scene\">${escapeHTML(pictureA)}</div><h2>${escapeHTML(choiceA)}</h2><p>${escapeHTML(endingA)}</p><a href=\"#start\">↩ Try the other path</a></section>\n    <section id=\"path-b\"><div class=\"scene\">${escapeHTML(pictureB)}</div><h2>${escapeHTML(choiceB)}</h2><p>${escapeHTML(endingB)}</p><a href=\"#start\">↩ Try the other path</a></section>\n  `, `.scene{font-size:7rem;text-align:center}.choices{display:grid;gap:16px}.choices a{display:block;padding:18px;background:#ffe17a;border:3px solid #17233c;text-decoration:none}section:not(#start){margin-top:80px}html{scroll-behavior:smooth}`), [title, opening, choiceA, choiceB, endingA, endingB, pictureA, pictureB]);\n  return (\n    <LabShell title=\"Choose Your Own Adventure\" subtitle=\"Write choices, link paths, and let the reader decide what happens.\" color=\"bg-[#b9e6bd]\" onBack={onBack}>\n      <div className=\"grid lg:grid-cols-2 gap-7 items-start\">\n        <Paper pin=\"blue\">\n          <h2 className=\"text-3xl font-black\">Build one beginning and two paths</h2>\n          <Tags items={[\n            { code: \"<a href=\\\"#path-a\\\">\", text: \"Turns a choice into a link to one ending.\" },\n            { code: \"id=\\\"path-a\\\"\", text: \"Names the place where that path begins.\" },\n            { code: \"<div>\", text: \"Groups a picture or set of choices.\" },\n            { code: \"<section>\", text: \"Keeps each story path together.\" },\n          ]} />\n          <Field label=\"Adventure title\" value={title} onChange={setTitle} />\n          <Field label=\"The opening problem\" rows={3} value={opening} onChange={setOpening} />\n          <div className=\"grid md:grid-cols-2 gap-4\">\n            <div className=\"bg-[#dff0ff] border-4 border-[#17233c] p-4\">\n              <h3 className=\"font-black text-xl mb-3\">Path A</h3>\n              <Field label=\"Choice\" value={choiceA} onChange={setChoiceA} />\n              <Field label=\"Picture or emoji\" value={pictureA} onChange={setPictureA} />\n              <Field label=\"What happens?\" rows={4} value={endingA} onChange={setEndingA} />\n            </div>\n            <div className=\"bg-[#ffe4ac] border-4 border-[#17233c] p-4\">\n              <h3 className=\"font-black text-xl mb-3\">Path B</h3>\n              <Field label=\"Choice\" value={choiceB} onChange={setChoiceB} />\n              <Field label=\"Picture or emoji\" value={pictureB} onChange={setPictureB} />\n              <Field label=\"What happens?\" rows={4} value={endingB} onChange={setEndingB} />\n            </div>\n          </div>\n          <p className=\"font-bold mt-5\">Extension idea: download the page, copy one path, give it a new <code>id</code>, and link another choice to it.</p>\n          <DownloadButton name=\"my-choose-your-own-adventure.html\" html={html} />\n        </Paper>\n        <Preview html={html} />\n      </div>\n    </LabShell>\n  );\n}\n\nfunction PoetryLab({ onBack }: { onBack: () => void }) {\n  const [title, setTitle] = useState(\"Rain on the Playground\");\n  const [stanza1, setStanza1] = useState(\"Silver drops tap the slide\\nand race along the rails.\");\n  const [stanza2, setStanza2] = useState(\"The blacktop holds the sky\\nin a hundred shining puddles.\");\n  const [whisper, setWhisper] = useState(\"Then the sun whispers: come back outside.\");\n  const [picture, setPicture] = useState(\"🌧️\");\n  const [pictureAlt, setPictureAlt] = useState(\"A picture chosen for the poem\");\n  const [pictureUrl, setPictureUrl] = useState(\"\");\n  const [sound, setSound] = useState(\"\");\n  const [pictureFile, setPictureFile] = useState<File | null>(null);\n  const [soundFile, setSoundFile] = useState<File | null>(null);\n  const picturePath = pictureFile ? \"media/\" + safeAssetName(pictureFile.name) : \"\";\n  const soundPath = soundFile ? \"media/\" + safeAssetName(soundFile.name) : \"\";\n  const lines = (value: string) => escapeHTML(value).replaceAll(\"\\n\", \"<br>\");\n  const html = useMemo(() => pageShell(title, `\n    <article class=\"poem\">\n      <h1>${escapeHTML(title)}</h1>\n      ${pictureUrl ? `<img class=\"poem-picture\" src=\"${escapeHTML(pictureUrl)}\" alt=\"${escapeHTML(pictureAlt)}\">` : `<div class=\"picture\" role=\"img\" aria-label=\"${escapeHTML(pictureAlt)}\">${escapeHTML(picture)}</div>`}\n      <p class=\"stanza\">${lines(stanza1)}</p>\n      <p class=\"stanza\">${lines(stanza2)}</p>\n      <details><summary>Open the final line</summary><p class=\"whisper\"><em>${escapeHTML(whisper)}</em></p></details>\n      ${sound ? `<audio controls src=\"${escapeHTML(sound)}\">Your browser cannot play this sound.</audio>` : \"\"}\n    </article>\n  `, `.poem{max-width:600px;margin:auto;text-align:center}.poem h1{font-family:Caveat,cursive;font-size:4rem}.picture{font-size:7rem}.poem-picture{max-height:360px;object-fit:contain}.stanza{font-family:Merriweather,serif;font-size:1.25rem;margin:44px 0;white-space:normal}.whisper{font-family:Caveat,cursive;font-size:2rem;color:#7048a8}details{margin-top:50px;padding:20px;border:3px dashed #7048a8}summary{cursor:pointer;font-weight:bold}audio{width:100%;margin-top:30px}`), [title, stanza1, stanza2, whisper, picture, pictureAlt, pictureUrl, sound]);\n\n  let downloadableHTML = html;\n  if (pictureFile && pictureUrl) downloadableHTML = downloadableHTML.replaceAll(pictureUrl, picturePath);\n  if (soundFile && sound) downloadableHTML = downloadableHTML.replaceAll(sound, soundPath);\n  const assets = [\n    ...(pictureFile ? [{ file: pictureFile, path: picturePath }] : []),\n    ...(soundFile ? [{ file: soundFile, path: soundPath }] : []),\n  ];\n\n  return (\n    <LabShell title=\"Make a Web Poem\" subtitle=\"Use line breaks, space, emphasis, revelation, pictures, and sound.\" color=\"bg-[#ffb8c2]\" onBack={onBack}>\n      <div className=\"grid lg:grid-cols-2 gap-7 items-start\">\n        <Paper>\n          <h2 className=\"text-3xl font-black\">Write a poem the reader can experience</h2>\n          <Tags items={[\n            { code: \"<article>\", text: \"Wraps one complete piece of writing.\" },\n            { code: \"<br>\", text: \"Makes a deliberate line break.\" },\n            { code: \"<em>\", text: \"Gives words spoken emphasis.\" },\n            { code: \"<details>\", text: \"Hides something until the reader opens it.\" },\n            { code: \"<summary>\", text: \"Creates the clickable label for hidden details.\" },\n            { code: \"<audio>\", text: \"Lets the poem include voice, music, or atmosphere.\" },\n          ]} />\n          <Field label=\"Poem title\" value={title} onChange={setTitle} />\n          <Field label=\"First stanza — press Enter for line breaks\" rows={4} value={stanza1} onChange={setStanza1} />\n          <Field label=\"Second stanza\" rows={4} value={stanza2} onChange={setStanza2} />\n          <Field label=\"A final line the reader must reveal\" rows={2} value={whisper} onChange={setWhisper} />\n          <Field label=\"A picture or emoji\" value={picture} onChange={setPicture} />\n          <Field label=\"Describe the picture\" value={pictureAlt} onChange={setPictureAlt} />\n\n          <details className=\"mb-3 bg-[#fff0f3] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🖼️ Add a picture</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {pictureFile ? `Chosen: ${pictureFile.name}` : \"Choose from Photos or Files\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"image/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (pictureUrl.startsWith(\"blob:\")) URL.revokeObjectURL(pictureUrl);\n                setPictureFile(file);\n                setPictureUrl(URL.createObjectURL(file));\n              }} />\n            </label>\n            {pictureFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(pictureUrl); setPictureFile(null); setPictureUrl(\"\"); }} className=\"mb-3 underline font-bold\">Remove picture</button>}\n            <Field label=\"Or use a picture web address\" value={pictureFile ? \"\" : pictureUrl} onChange={(value: string) => { setPictureFile(null); setPictureUrl(value); }} placeholder=\"https://example.com/picture.jpg\" />\n          </details>\n\n          <details className=\"mb-3 bg-[#fff0f3] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🔊 Add a reading or sound</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {soundFile ? `Chosen: ${soundFile.name}` : \"Choose an audio file from this device\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"audio/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (sound.startsWith(\"blob:\")) URL.revokeObjectURL(sound);\n                setSoundFile(file);\n                setSound(URL.createObjectURL(file));\n              }} />\n            </label>\n            {soundFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(sound); setSoundFile(null); setSound(\"\"); }} className=\"mb-3 underline font-bold\">Remove sound</button>}\n            <Field label=\"Or use a sound web address\" value={soundFile ? \"\" : sound} onChange={(value: string) => { setSoundFile(null); setSound(value); }} placeholder=\"https://example.com/my-reading.mp3\" />\n          </details>\n          <div className=\"bg-[#d7c0f4] border-4 border-[#17233c] p-4 font-bold\">\n            Try reading it aloud. Where should the page leave empty space? Which line deserves emphasis? What should the reader uncover for themselves?\n          </div>\n          <DownloadButton name=\"my-web-poem.html\" html={downloadableHTML} assets={assets} />\n        </Paper>\n        <Preview html={html} />\n      </div>\n    </LabShell>\n  );\n}\n\ntype AdvancedPage = {\n  id: string;\n  title: string;\n  file: string;\n  content: string;\n};\n\nconst advancedCopyStyles = \".advanced-copy h1{font-size:2.5rem;font-weight:900;margin:0 0 1rem}.advanced-copy h2{font-size:1.75rem;font-weight:900;margin:1.5rem 0 .5rem}.advanced-copy p{margin:.75rem 0}.advanced-copy ul{list-style:disc;margin:1rem 0 1rem 2rem}.advanced-copy ol{list-style:decimal;margin:1rem 0 1rem 2rem}.advanced-copy a{color:#2878d0;text-decoration:underline;font-weight:800}.advanced-copy img{max-width:100%;border-radius:14px;margin:1rem 0}.advanced-copy blockquote{border-left:5px solid #f0c85a;padding-left:1rem;font-style:italic}\";\n\nfunction makeAdvancedHTML(siteTitle: string, page: AdvancedPage, pages: AdvancedPage[]) {\n  const navigation = pages\n    .map((item) => '      <a href=\"' + item.file + '\">' + escapeHTML(item.title) + \"</a>\")\n    .join(\"\\n\");\n\n  return '<!DOCTYPE html>\\n'\n    + '<html lang=\"en\">\\n'\n    + '<head>\\n'\n    + '  <meta charset=\"UTF-8\">\\n'\n    + '  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\\n'\n    + \"  <title>\" + escapeHTML(page.title) + \" · \" + escapeHTML(siteTitle) + \"</title>\\n\"\n    + '  <style>\\n'\n    + '    * { box-sizing: border-box; }\\n'\n    + '    body { max-width: 860px; margin: 0 auto; padding: 32px; background: #fff8e8; color: #17233c; font-family: Arial, sans-serif; line-height: 1.65; }\\n'\n    + '    nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; padding: 16px; background: #ffe17a; border: 3px solid #17233c; }\\n'\n    + '    nav a { color: #17233c; font-weight: bold; }\\n'\n    + '    main { background: white; border: 3px solid #17233c; padding: 28px; }\\n'\n    + '    h1 { font-size: 2.5rem; } h2 { font-size: 1.75rem; margin-top: 1.5rem; }\\n'\n    + '    a { color: #2878d0; } img { max-width: 100%; border-radius: 14px; }\\n'\n    + '    blockquote { border-left: 5px solid #f0c85a; padding-left: 1rem; font-style: italic; }\\n'\n    + '  </style>\\n'\n    + '</head>\\n'\n    + '<body>\\n'\n    + '  <header>\\n'\n    + \"    <strong>\" + escapeHTML(siteTitle) + \"</strong>\\n\"\n    + '    <nav>\\n'\n    + navigation + \"\\n\"\n    + '    </nav>\\n'\n    + '  </header>\\n'\n    + '  <main>\\n'\n    + page.content.split(\"\\n\").map((line) => \"    \" + line).join(\"\\n\") + \"\\n\"\n    + '  </main>\\n'\n    + '</body>\\n'\n    + '</html>\\n';\n}\n\nfunction AdvancedWebsiteLab({ onBack }: { onBack: () => void }) {\n  const [siteTitle, setSiteTitle] = useState(\"My Amazing Website\");\n  const [pages, setPages] = useState<AdvancedPage[]>([\n    {\n      id: \"home\",\n      title: \"Home\",\n      file: \"index.html\",\n      content: \"<h1>Welcome to my website!</h1><p>Start writing here. Highlight words and use the toolbar to format them.</p>\",\n    },\n    {\n      id: \"about\",\n      title: \"About\",\n      file: \"about.html\",\n      content: \"<h1>About this website</h1><p>Tell your visitors what this website is about.</p>\",\n    },\n  ]);\n  const [activeId, setActiveId] = useState(\"home\");\n  const [mode, setMode] = useState<\"html\" | \"preview\">(\"html\");\n  const activePage = pages.find((page) => page.id === activeId) || pages[0];\n\n  function updatePage(values: Partial<AdvancedPage>) {\n    setPages((current) => current.map((page) => page.id === activePage.id ? { ...page, ...values } : page));\n  }\n\n  function addPage() {\n    let number = 2;\n    while (pages.some((page) => page.file === \"page-\" + number + \".html\")) number += 1;\n    const page = {\n      id: crypto.randomUUID(),\n      title: \"Page \" + number,\n      file: \"page-\" + number + \".html\",\n      content: \"<h1>Page \" + number + \"</h1><p>Write something wonderful here.</p>\",\n    };\n    setPages((current) => [...current, page]);\n    setActiveId(page.id);\n    setMode(\"html\");\n  }\n\n  function deletePage() {\n    if (activePage.file === \"index.html\") return;\n    const remaining = pages.filter((page) => page.id !== activePage.id);\n    setPages(remaining);\n    setActiveId(\"home\");\n  }\n\n  async function downloadSite() {\n    const zip = new JSZip();\n    pages.forEach((page) => zip.file(page.file, makeAdvancedHTML(siteTitle, page, pages)));\n    zip.file(\"README.txt\", \"Open index.html in a browser to see your website. Keep all HTML files together so the page links work.\");\n    const blob = await zip.generateAsync({ type: \"blob\" });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement(\"a\");\n    link.href = url;\n    link.download = \"my-whole-website.zip\";\n    link.click();\n    URL.revokeObjectURL(url);\n  }\n\n  return (\n    <LabShell\n      title=\"Build a Whole Website\"\n      subtitle=\"An advanced visual editor for making and connecting as many pages as you need.\"\n      color=\"bg-[#ffca8a]\"\n      onBack={onBack}\n    >\n      <style>{advancedCopyStyles}</style>\n      <div className=\"grid lg:grid-cols-[260px_minmax(0,1fr)] gap-6 items-start\">\n        <aside className=\"bg-[#fffdf3] border-4 border-[#17233c] p-4 shadow-[7px_7px_0_#f0c85a]\">\n          <Field label=\"Website name\" value={siteTitle} onChange={setSiteTitle} />\n          <div className=\"flex items-center justify-between gap-2 mb-3\">\n            <h2 className=\"text-xl font-black\">Your pages</h2>\n            <button onClick={addPage} className=\"bg-[#218c5b] text-white border-2 border-[#17233c] px-3 py-2 font-black\">+ Add</button>\n          </div>\n          <div className=\"space-y-2\">\n            {pages.map((page) => (\n              <button\n                key={page.id}\n                onClick={() => setActiveId(page.id)}\n                className={\"w-full border-3 border-[#17233c] p-3 text-left font-black \" + (page.id === activePage.id ? \"bg-[#ffe17a] shadow-[3px_3px_0_#17233c]\" : \"bg-white\")}\n              >\n                <span className=\"block\">{page.title}</span>\n                <code className=\"text-xs font-normal\">{page.file}</code>\n              </button>\n            ))}\n          </div>\n          <button onClick={downloadSite} className=\"w-full mt-5 bg-[#ef5138] text-white border-3 border-[#17233c] p-3 font-black shadow-[4px_4px_0_#17233c]\">\n            Download the whole website (.zip)\n          </button>\n        </aside>\n\n        <section className=\"bg-[#fffdf3] border-4 border-[#17233c] shadow-[8px_8px_0_#17233c] overflow-hidden\">\n          <div className=\"bg-[#17233c] text-white p-3 flex flex-wrap items-center justify-between gap-3\">\n            <div className=\"flex gap-2\">\n              <button onClick={() => setMode(\"html\")} className={\"px-4 py-2 border-2 border-white font-black \" + (mode === \"html\" ? \"bg-[#ffe17a] text-[#17233c]\" : \"\")}></> HTML</button>\n              <button onClick={() => setMode(\"preview\")} className={\"px-4 py-2 border-2 border-white font-black \" + (mode === \"preview\" ? \"bg-[#ffe17a] text-[#17233c]\" : \"\")}>👀 Preview</button>\n            </div>\n            <span className=\"font-bold\">{activePage.file}</span>\n          </div>\n\n          <div className=\"p-4 md:p-6\">\n            <div className=\"flex flex-wrap gap-3 items-end mb-5\">\n              <div className=\"flex-1 min-w-[220px]\">\n                <Field label=\"Page name\" value={activePage.title} onChange={(title: string) => updatePage({ title })} />\n              </div>\n              {activePage.file !== \"index.html\" && (\n                <button onClick={deletePage} className=\"mb-4 px-3 py-2 border-2 border-[#8f2618] text-[#8f2618] font-black\">Delete page</button>\n              )}\n            </div>\n\n            {mode === \"html\" ? (\n              <div>\n                <div className=\"bg-[#ffe17a] border-3 border-[#17233c] p-4 mb-3\">\n                  <h2 className=\"text-xl font-black\">Edit this page’s HTML</h2>\n                  <p className=\"font-bold\">This is the HTML inside the page’s <code><main></code> area. The website name and navigation are added automatically.</p>\n                  <div className=\"flex flex-wrap gap-2 mt-3 text-sm\">\n                    {[\"<h1>\", \"<h2>\", \"<p>\", \"<strong>\", \"<em>\", \"<a>\", \"<img>\", \"<ul>\", \"<li>\"].map((tag) => (\n                      <code key={tag} className=\"bg-[#17233c] text-white px-2 py-1\">{tag}</code>\n                    ))}\n                  </div>\n                </div>\n                <textarea\n                  value={activePage.content}\n                  onChange={(event) => updatePage({ content: event.target.value })}\n                  spellCheck={false}\n                  aria-label=\"Page HTML\"\n                  className=\"w-full min-h-[560px] resize-y bg-[#263d2d] text-[#fffdf3] border-[10px] border-[#9b6537] p-5 font-mono text-base leading-relaxed focus:outline-none focus:ring-4 focus:ring-[#2878d0]\"\n                />\n                <p className=\"mt-3 text-sm font-bold\">Changes here appear immediately when you switch to Write or Preview.</p>\n              </div>\n            ) : (\n              <div className=\"bg-[#fff8e8] border-[10px] border-[#ef5138] min-h-[600px] p-5 md:p-8\">\n                <div className=\"font-black text-xl mb-4\">{siteTitle}</div>\n                <nav className=\"flex flex-wrap gap-3 bg-[#ffe17a] border-3 border-[#17233c] p-3 mb-7\">\n                  {pages.map((page) => (\n                    <button key={page.id} onClick={() => setActiveId(page.id)} className={\"underline font-black \" + (page.id === activePage.id ? \"text-[#ef5138]\" : \"\")}>\n                      {page.title}\n                    </button>\n                  ))}\n                </nav>\n                <main\n                  className=\"advanced-copy bg-white border-3 border-[#17233c] p-6\"\n                  onClick={(event) => {\n                    const link = (event.target as Element).closest?.(\"a\");\n                    const targetPage = link ? pages.find((page) => page.file === link.getAttribute(\"href\")) : undefined;\n                    if (targetPage) {\n                      event.preventDefault();\n                      setActiveId(targetPage.id);\n                    }\n                  }}\n                  dangerouslySetInnerHTML={{ __html: activePage.content }}\n                />\n              </div>\n            )}\n          </div>\n        </section>\n      </div>\n    </LabShell>\n  );\n}\n\nconst snippets = [\n  { group: \"Page\", name: \"HTML document\", code: \"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n  <meta charset=\\\"UTF-8\\\">\\n  <title>My Page</title>\\n</head>\\n<body>\\n  Your page goes here.\\n</body>\\n</html>\", use: \"The complete starting structure for a webpage.\" },\n  { group: \"Text\", name: \"Main heading\", code: \"<h1>My Big Title</h1>\", use: \"Names the page with its most important heading.\" },\n  { group: \"Text\", name: \"Section heading\", code: \"<h2>A New Section</h2>\", use: \"Introduces a smaller section inside the page.\" },\n  { group: \"Text\", name: \"Paragraph\", code: \"<p>Write your sentences here.</p>\", use: \"Groups sentences into a paragraph.\" },\n  { group: \"Text\", name: \"Emphasis\", code: \"<em>This part matters.</em>\", use: \"Adds spoken emphasis, usually displayed in italics.\" },\n  { group: \"Text\", name: \"Strong importance\", code: \"<strong>Do not forget this.</strong>\", use: \"Marks text as especially important.\" },\n  { group: \"Text\", name: \"Line break\", code: \"First line<br>\\nSecond line\", use: \"Starts a new line without starting a new paragraph.\" },\n  { group: \"Lists\", name: \"Numbered list\", code: \"<ol>\\n  <li>First thing</li>\\n  <li>Second thing</li>\\n</ol>\", use: \"Creates a list where order matters.\" },\n  { group: \"Lists\", name: \"Bullet list\", code: \"<ul>\\n  <li>One idea</li>\\n  <li>Another idea</li>\\n</ul>\", use: \"Creates a list where order does not matter.\" },\n  { group: \"Links\", name: \"Link to a website\", code: \"<a href=\\\"https://example.com\\\">Visit the site</a>\", use: \"Makes clickable text that opens another website.\" },\n  { group: \"Links\", name: \"Link to another page\", code: \"<a href=\\\"facts.html\\\">Read my facts</a>\", use: \"Connects one HTML file to another.\" },\n  { group: \"Links\", name: \"Jump link\", code: \"<a href=\\\"#ending\\\">Jump to the ending</a>\\n\\n<section id=\\\"ending\\\">\\n  The ending goes here.\\n</section>\", use: \"Moves the reader to a named place on the same page.\" },\n  { group: \"Media\", name: \"Picture\", code: \"<img src=\\\"picture.jpg\\\" alt=\\\"Describe the picture\\\">\", use: \"Embeds a picture and describes it accessibly.\" },\n  { group: \"Media\", name: \"Audio player\", code: \"<audio controls src=\\\"sound.mp3\\\">\\n  Your browser cannot play this sound.\\n</audio>\", use: \"Adds controls for playing sound.\" },\n  { group: \"Media\", name: \"Video player\", code: \"<video controls src=\\\"movie.mp4\\\">\\n  Your browser cannot play this video.\\n</video>\", use: \"Adds controls for playing video.\" },\n  { group: \"Interactive\", name: \"Reveal hidden writing\", code: \"<details>\\n  <summary>Open the secret</summary>\\n  <p>The hidden words appear here.</p>\\n</details>\", use: \"Lets a reader open and close extra content without JavaScript.\" },\n  { group: \"Structure\", name: \"Navigation\", code: \"<nav>\\n  <a href=\\\"index.html\\\">Home</a>\\n  <a href=\\\"facts.html\\\">Facts</a>\\n</nav>\", use: \"Groups the main links used to move around a website.\" },\n  { group: \"Structure\", name: \"Section\", code: \"<section>\\n  <h2>Section title</h2>\\n  <p>Section content.</p>\\n</section>\", use: \"Groups content that belongs to the same idea.\" },\n  { group: \"Style\", name: \"Simple page styles\", code: \"<style>\\n  body {\\n    background: lightyellow;\\n    color: navy;\\n    font-family: sans-serif;\\n  }\\n</style>\", use: \"Adds CSS that changes the appearance of the page.\" },\n];\n\nfunction ReferenceLab({ onBack }: { onBack: () => void }) {\n  const [search, setSearch] = useState(\"\");\n  const [group, setGroup] = useState(\"All\");\n  const groups = [\"All\", ...Array.from(new Set(snippets.map((s) => s.group)))];\n  const shown = snippets.filter((s) => (group === \"All\" || s.group === group) && `${s.name} ${s.use} ${s.code}`.toLowerCase().includes(search.toLowerCase()));\n  return (\n    <LabShell title=\"HTML Snippet Board\" subtitle=\"Find a building block, learn what it does, then copy it into your page.\" color=\"bg-[#d7c0f4]\" onBack={onBack}>\n      <Paper pin=\"blue\">\n        <div className=\"grid md:grid-cols-[1fr_auto] gap-3 mb-5\">\n          <Field label=\"Search the snippets\" value={search} onChange={setSearch} placeholder=\"Try: picture, link, list…\" />\n          <label className=\"font-black\">Category\n            <select value={group} onChange={(e) => setGroup(e.target.value)} className=\"block mt-1 bg-white border-3 border-[#17233c] px-4 py-3\">\n              {groups.map((g) => <option key={g}>{g}</option>)}\n            </select>\n          </label>\n        </div>\n        <div className=\"grid lg:grid-cols-2 gap-5\">\n          {shown.map((snippet, i) => (\n            <article key={snippet.name} className={`${i % 3 === 0 ? \"bg-[#ffe17a]\" : i % 3 === 1 ? \"bg-[#dff0ff]\" : \"bg-[#dff5df]\"} border-4 border-[#17233c] p-4 shadow-[5px_5px_0_#665b4a]`}>\n              <p className=\"text-xs font-black tracking-widest\">{snippet.group.toUpperCase()}</p>\n              <h2 className=\"text-2xl font-black\">{snippet.name}</h2>\n              <p className=\"font-bold my-2\">{snippet.use}</p>\n              <pre className=\"bg-[#263d2d] text-white border-4 border-[#9b6537] p-3 overflow-auto text-sm\"><code>{snippet.code}</code></pre>\n              <button onClick={() => navigator.clipboard.writeText(snippet.code)} className=\"mt-3 bg-white border-3 border-[#17233c] px-3 py-2 font-black\">Copy snippet</button>\n            </article>\n          ))}\n        </div>\n        {!shown.length && <p className=\"text-xl font-black text-center py-10\">No snippets match that search yet.</p>}\n      </Paper>\n    </LabShell>\n  );\n}\n\nexport function App() {\n  const [module, setModule] = useState<ModuleName>(\"hub\");\n  if (module === \"hub\") return <ModuleHub choose={setModule} />;\n  if (module === \"first\") return <><BackButton onBack={() => setModule(\"hub\")} /><FirstWebsiteApp /></>;\n  if (module === \"hypertext\") return <HypertextLab onBack={() => setModule(\"hub\")} />;\n  if (module === \"adventure\") return <AdventureLab onBack={() => setModule(\"hub\")} />;\n  if (module === \"poetry\") return <PoetryLab onBack={() => setModule(\"hub\")} />;\n  if (module === \"advanced\") return <AdvancedWebsiteLab onBack={() => setModule(\"hub\")} />;\n  return <ReferenceLab onBack={() => setModule(\"hub\")} />;\n}\n",[],[170,243,235],"components","731769bb-2e24-45ed-aaff-0e22b5e8dea8",["D",1785509881394],[],[170,243,32],"9e11e45e-fa08-40e7-bf4f-2cc0c88dbae0","App.tsx","019fb401-dc04-779a-98cc-9577409b5cee",57,["D",1785506358228],37,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport JSZip from \"https://esm.sh/jszip@3.10.1\";\n\ntype Topic = { name: string; icon: string; example: string; page: string; prompt: string };\ntype Project = {\n  topic: string;\n  subject: string;\n  title: string;\n  intro: string;\n  sectionTitle: string;\n  sectionText: string;\n  facts: string[];\n  secondPage: string;\n  secondTitle: string;\n  secondText: string;\n  font: string;\n  background: string;\n  ink: string;\n  accent: string;\n  image: string;\n  imageAlt: string;\n};\n\nconst topics: Topic[] = [\n  { name: \"Food\", icon: \"🍕\", example: \"homemade pizza\", page: \"My Recipe\", prompt: \"a food you love\" },\n  { name: \"Gaming\", icon: \"🎮\", example: \"Minecraft\", page: \"Tips & Tricks\", prompt: \"a game you enjoy\" },\n  { name: \"Animals\", icon: \"🐯\", example: \"red pandas\", page: \"Amazing Facts\", prompt: \"an animal you love\" },\n  { name: \"Arts & Crafts\", icon: \"🎨\", example: \"paper airplanes\", page: \"Project Gallery\", prompt: \"something you make\" },\n  { name: \"Books\", icon: \"📚\", example: \"The Wild Robot\", page: \"Favorite Characters\", prompt: \"a book you recommend\" },\n  { name: \"Movies\", icon: \"🎬\", example: \"an animated movie\", page: \"My Review\", prompt: \"a movie you love\" },\n  { name: \"Music\", icon: \"🎵\", example: \"playing drums\", page: \"My Playlist\", prompt: \"music you enjoy\" },\n  { name: \"My Own Topic\", icon: \"💡\", example: \"anything at all\", page: \"More About It\", prompt: \"your own great idea\" },\n];\n\nconst topicPaper = [\"bg-[#ffe17a]\", \"bg-[#a9d8ff]\", \"bg-[#b9e6bd]\", \"bg-[#ffb8c2]\", \"bg-[#d7c0f4]\", \"bg-[#ffca8a]\", \"bg-[#aee5df]\", \"bg-[#fffdf3]\"];\n\nconst initial: Project = {\n  topic: \"\",\n  subject: \"\",\n  title: \"\",\n  intro: \"\",\n  sectionTitle: \"Why I like it\",\n  sectionText: \"\",\n  facts: [\"\", \"\", \"\"],\n  secondPage: \"More Facts\",\n  secondTitle: \"More things to know\",\n  secondText: \"\",\n  font: \"friendly\",\n  background: \"cream\",\n  ink: \"navy\",\n  accent: \"red\",\n  image: \"🌟\",\n  imageAlt: \"A star\",\n};\n\nconst fonts: Record<string, string> = {\n  friendly: \"'Nunito', sans-serif\",\n  comic: \"'Comic Neue', cursive\",\n  bubble: \"'Chewy', cursive\",\n  storybook: \"'Merriweather', serif\",\n  marker: \"'Patrick Hand', cursive\",\n  handwriting: \"'Caveat', cursive\",\n  typewriter: \"'Special Elite', monospace\",\n  poster: \"'Bangers', fantasy\",\n  adventure: \"'Cinzel Decorative', fantasy\",\n  clean: \"Verdana, Arial, sans-serif\",\n};\nconst fontLabels: Record<string, string> = {\n  friendly: \"Friendly\", comic: \"Comic\", bubble: \"Bubble\", storybook: \"Storybook\", marker: \"Marker\",\n  handwriting: \"Handwriting\", typewriter: \"Typewriter\", poster: \"Big Poster\", adventure: \"Adventure\", clean: \"Super Clear\",\n};\nconst fontStylesheet = \"https://fonts.googleapis.com/css2?family=Bangers&family=Caveat:wght@400;700&family=Cinzel+Decorative:wght@700&family=Comic+Neue:wght@400;700&family=Chewy&family=Merriweather:wght@400;700&family=Nunito:wght@400;700;900&family=Patrick+Hand&family=Special+Elite&display=swap\";\n\nconst colors: Record<string, string> = {\n  cream: \"#fff8e8\", sky: \"#e5f4ff\", mint: \"#e7f8ef\", blush: \"#fff0f0\", night: \"#17233c\",\n  navy: \"#17233c\", plum: \"#502b5f\", forest: \"#174d3b\", charcoal: \"#27272a\", white: \"#ffffff\",\n  red: \"#ef5138\", blue: \"#2878d0\", green: \"#218c5b\", purple: \"#7c4dcc\", orange: \"#e87822\",\n};\nconst steps = [\"Topic\", \"Home page\", \"New page\", \"Links\", \"Design\", \"Finish\"];\n\nfunction esc(value: string) {\n  return value.replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll('\"', \""\");\n}\n\nfunction fileName(value: string) {\n  return value.toLowerCase().trim().replace(/[^a-z0-9]+/g, \"-\").replace(/^-|-$/g, \"\") || \"more\";\n}\n\nfunction AppHeader({ step, setStep }: { step: number; setStep: (n: number) => void }) {\n  return (\n    <header className=\"max-w-7xl mx-auto px-4 pt-5 pb-4 flex flex-wrap items-center gap-4\">\n      <button onClick={() => setStep(0)} className=\"text-left mr-auto bg-[#fffdf3] border-4 border-[#17233c] px-6 py-3 shadow-[6px_6px_0_#ef5138] -rotate-1 relative\">\n        <span className=\"absolute -top-3 left-1/2 w-5 h-5 rounded-full bg-[#f3c623] border-2 border-[#8a6312] shadow\" />\n        <span className=\"text-3xl font-black text-[#17233c]\">Make a <span className=\"text-[#ef5138]\">Page!</span></span>\n        <span className=\"block text-xs font-black tracking-widest text-[#2878d0]\">YOUR FIRST WEBSITE</span>\n      </button>\n      <div className=\"flex items-center gap-2\" aria-label={`Step ${step + 1} of ${steps.length}`}>\n        {steps.map((label, i) => (\n          <button\n            key={label}\n            onClick={() => i < step && setStep(i)}\n            title={label}\n            className={`h-3 rounded-full transition-all ${i === step ? \"w-10 bg-[#ef5138]\" : i < step ? \"w-3 bg-[#218c5b]\" : \"w-3 bg-[#dfcfad]\"}`}\n          />\n        ))}\n        <span className=\"ml-2 text-sm font-bold text-[#665b4a]\">{step + 1} of {steps.length}</span>\n      </div>\n    </header>\n  );\n}\n\nfunction LessonCard({ eyebrow, title, children }: { eyebrow: string; title: string; children: any }) {\n  return (\n    <section className=\"bg-[#fffdf3] border-4 border-[#17233c] rounded-sm p-5 md:p-7 shadow-[10px_10px_0_#f0c85a] relative\">\n      <span className=\"absolute -top-4 left-8 w-6 h-6 rounded-full bg-[#ef5138] border-2 border-[#8f2618] shadow-md\" aria-hidden=\"true\" />\n      <span className=\"inline-block bg-[#2878d0] text-white px-3 py-1 -rotate-1 shadow-[3px_3px_0_#17233c] text-xs font-black tracking-widest uppercase mb-2\">{eyebrow}</span>\n      <h1 className=\"text-3xl md:text-4xl font-black text-[#17233c] mt-1 mb-3\">{title}</h1>\n      {children}\n    </section>\n  );\n}\n\nfunction Field({ label, value, onChange, placeholder, area = false }: any) {\n  const props = {\n    value,\n    onChange: (e: any) => onChange(e.target.value),\n    placeholder,\n    className: \"w-full bg-[#fffef8] border-0 border-b-2 border-[#6f9bd1] focus:border-[#ef5138] focus:outline-none rounded-none px-4 py-3 text-lg text-[#17233c] shadow-[inset_0_-1px_0_#bfd2e8]\",\n  };\n  return (\n    <label className=\"block mb-4\">\n      <span className=\"block font-black text-[#17233c] mb-1\">{label}</span>\n      {area ? <textarea {...props} rows={3} /> : <input {...props} />}\n    </label>\n  );\n}\n\nfunction CodeNote({ children }: { children: any }) {\n  return <div className=\"bg-[#263d2d] text-white border-[10px] border-[#9b6537] rounded-sm px-4 py-3 font-mono text-sm overflow-x-auto shadow-[inset_0_0_12px_#15251a,4px_4px_0_#5c3b22]\">{children}</div>;\n}\n\nfunction TagLesson({ title = \"New HTML building blocks\", tags }: { title?: string; tags: { tag: string; meaning: string; example?: string }[] }) {\n  return (\n    <aside className=\"my-5 bg-[#ffe17a] border-4 border-[#17233c] p-4 shadow-[5px_5px_0_#2878d0] rotate-[0.3deg]\">\n      <p className=\"font-black text-lg mb-3\">🧱 {title}</p>\n      <div className=\"space-y-3\">\n        {tags.map((item) => (\n          <div key={item.tag} className=\"grid grid-cols-[auto_1fr] gap-3 items-start\">\n            <code className=\"bg-[#17233c] text-white px-2 py-1 text-sm font-bold\">{item.tag}</code>\n            <div><p className=\"font-bold\">{item.meaning}</p>{item.example && <code className=\"text-xs text-[#502b5f] break-all\">{item.example}</code>}</div>\n          </div>\n        ))}\n      </div>\n    </aside>\n  );\n}\n\nfunction Preview({ project, page = \"home\", onNavigate }: { project: Project; page?: \"home\" | \"second\"; onNavigate?: (page: \"home\" | \"second\") => void }) {\n  const dark = project.background === \"night\";\n  const bg = colors[project.background];\n  const ink = dark ? \"#ffffff\" : colors[project.ink];\n  const accent = colors[project.accent];\n  return (\n    <section className=\"bg-[#f4e3b2] border-[10px] border-[#ef5138] overflow-hidden shadow-[10px_10px_0_#17233c]\">\n      <span className=\"absolute top-1 left-1/2 z-10 w-5 h-5 rounded-full bg-[#f3c623] border-2 border-[#8a6312]\" aria-hidden=\"true\" />\n      <div className=\"bg-[#17233c] text-white px-4 py-2 flex gap-2 items-center\">\n        <span className=\"w-3 h-3 rounded-full bg-[#ef5138]\" /><span className=\"w-3 h-3 rounded-full bg-[#f0c85a]\" /><span className=\"w-3 h-3 rounded-full bg-[#4caf70]\" />\n        <span className=\"ml-2 text-xs font-bold\">My website</span>\n      </div>\n      <div className=\"min-h-[420px] p-6 md:p-8\" style={{ background: bg, color: ink, fontFamily: (fonts[project.font] || fonts.friendly) }}>\n        <nav className=\"flex gap-4 mb-8 font-bold\" style={{ color: accent }}>\n          <button onClick={() => onNavigate?.(\"home\")} className=\"underline\">Home</button>\n          <button onClick={() => onNavigate?.(\"second\")} className=\"underline\">{project.secondPage || \"More\"}</button>\n        </nav>\n        {page === \"home\" ? (\n          <>\n            {project.image.startsWith(\"data:image/\") ? <img src={project.image} alt={project.imageAlt} className=\"max-h-64 max-w-full rounded-2xl mb-5 object-cover\" /> : <div className=\"text-6xl mb-4\" role=\"img\" aria-label={project.imageAlt}>{project.image}</div>}\n            <h1 className=\"text-4xl md:text-5xl font-black mb-4\" style={{ color: accent }}>{project.title || \"My Awesome Website\"}</h1>\n            <p className=\"text-lg mb-7\">{project.intro || \"My introduction will appear here.\"}</p>\n            <h2 className=\"text-2xl font-black mb-2\">{project.sectionTitle}</h2>\n            <p className=\"mb-6\">{project.sectionText || \"This is where I can explain why my topic is interesting.\"}</p>\n            <h2 className=\"text-2xl font-black mb-2\">Three things to know</h2>\n            <ol className=\"list-decimal ml-6 space-y-1\">\n              {project.facts.map((fact, i) => <li key={i}>{fact || `Interesting fact ${i + 1}`}</li>)}\n            </ol>\n          </>\n        ) : (\n          <>\n            <h1 className=\"text-4xl md:text-5xl font-black mb-5\" style={{ color: accent }}>{project.secondTitle || project.secondPage}</h1>\n            <p className=\"text-lg\">{project.secondText || \"More information will go on this page.\"}</p>\n            <p className=\"mt-10 underline font-bold\" style={{ color: accent }}>← Back to home</p>\n          </>\n        )}\n      </div>\n    </section>\n  );\n}\n\nfunction ButtonRow({ back, next, nextDisabled = false, nextLabel = \"Next →\" }: any) {\n  return (\n    <div className=\"flex gap-3 mt-6\">\n      {back && <button onClick={back} className=\"px-5 py-3 rounded-xl border-2 border-[#17233c] font-black text-[#17233c] bg-white\">← Back</button>}\n      <button disabled={nextDisabled} onClick={next} className=\"flex-1 px-5 py-3 rounded-xl border-2 border-[#17233c] font-black text-white bg-[#ef5138] shadow-[3px_3px_0_#17233c] disabled:opacity-40 disabled:shadow-none\">{nextLabel}</button>\n    </div>\n  );\n}\n\nexport function FirstWebsiteApp() {\n  const [step, setStep] = useState(0);\n  const [page, setPage] = useState<\"home\" | \"second\">(\"home\");\n  const [project, setProject] = useState<Project>(() => {\n    try { return JSON.parse(localStorage.getItem(\"firstpage-project\") || \"\") || initial; } catch { return initial; }\n  });\n  const update = (values: Partial<Project>) => setProject((old) => ({ ...old, ...values }));\n\n  useEffect(() => localStorage.setItem(\"firstpage-project\", JSON.stringify(project)), [project]);\n  useEffect(() => setPage(step === 2 ? \"second\" : \"home\"), [step]);\n\n  const chosen = useMemo(() => topics.find((t) => t.name === project.topic), [project.topic]);\n  const secondFile = `${fileName(project.secondPage)}.html`;\n\n  function selectTopic(topic: Topic) {\n    update({ topic: topic.name, subject: \"\", secondPage: topic.page, image: topic.icon, imageAlt: `An icon representing ${topic.name}` });\n  }\n\n  function makeHTML(which: \"home\" | \"second\") {\n    const nav = `  <nav>\n    <a href=\"index.html\">Home</a>\n    <a href=\"${secondFile}\">${esc(project.secondPage)}</a>\n  </nav>`;\n\n    const style = `  <style>\n    body {\n      max-width: 760px;\n      margin: 40px auto;\n      padding: 24px;\n      background: ${colors[project.background]};\n      color: ${project.background === \"night\" ? \"#fff\" : colors[project.ink]};\n      font-family: ${fonts[project.font] || fonts.friendly};\n      line-height: 1.6;\n    }\n\n    nav {\n      display: flex;\n      gap: 18px;\n      margin-bottom: 40px;\n    }\n\n    a,\n    h1 {\n      color: ${colors[project.accent]};\n    }\n\n    h1 {\n      font-size: 3rem;\n    }\n\n    .hero {\n      font-size: 5rem;\n    }\n\n    img {\n      max-width: 100%;\n      border-radius: 18px;\n    }\n  </style>`;\n\n    const imageMarkup = project.image.startsWith(\"data:image/\")\n      ? `  <img\n    src=\"${project.image}\"\n    alt=\"${esc(project.imageAlt)}\"\n  >`\n      : `  <div\n    class=\"hero\"\n    role=\"img\"\n    aria-label=\"${esc(project.imageAlt)}\"\n  >\n    ${esc(project.image)}\n  </div>`;\n\n    const body = which === \"home\"\n      ? `${nav}\n\n${imageMarkup}\n\n  <h1>${esc(project.title)}</h1>\n  <p>${esc(project.intro)}</p>\n\n  <h2>${esc(project.sectionTitle)}</h2>\n  <p>${esc(project.sectionText)}</p>\n\n  <h2>Three things to know</h2>\n  <ol>\n${project.facts.map((fact) => `    <li>${esc(fact)}</li>`).join(\"\\n\")}\n  </ol>`\n      : `${nav}\n\n  <h1>${esc(project.secondTitle)}</h1>\n  <p>${esc(project.secondText)}</p>\n\n  <a href=\"index.html\">← Back to home</a>`;\n\n    return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta\n    name=\"viewport\"\n    content=\"width=device-width, initial-scale=1.0\"\n  >\n  <title>${esc(which === \"home\" ? project.title : project.secondTitle)}</title>\n  <link\n    href=\"${fontStylesheet}\"\n    rel=\"stylesheet\"\n  >\n${style}\n</head>\n<body>\n${body}\n</body>\n</html>\n`;\n  }\n\n  async function download() {\n    const zip = new JSZip();\n    zip.file(\"index.html\", makeHTML(\"home\"));\n    zip.file(secondFile, makeHTML(\"second\"));\n    zip.file(\"README.txt\", \"Open index.html in a browser to see your website. You made this!\");\n    const blob = await zip.generateAsync({ type: \"blob\" });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement(\"a\");\n    a.href = url;\n    a.download = `${fileName(project.subject || \"my-first-website\")}.zip`;\n    a.click();\n    URL.revokeObjectURL(url);\n  }\n\n  function uploadImage(file?: File) {\n    if (!file || !file.type.startsWith(\"image/\")) return;\n    const reader = new FileReader();\n    reader.onload = () => {\n      const img = new Image();\n      img.onload = () => {\n        const scale = Math.min(1, 1200 / Math.max(img.width, img.height));\n        const canvas = document.createElement(\"canvas\");\n        canvas.width = Math.round(img.width * scale); canvas.height = Math.round(img.height * scale);\n        canvas.getContext(\"2d\")?.drawImage(img, 0, 0, canvas.width, canvas.height);\n        update({ image: canvas.toDataURL(\"image/jpeg\", 0.82), imageAlt: file.name.replace(/\\.[^.]+$/, \"\").replaceAll(\"-\", \" \") });\n      };\n      img.src = String(reader.result);\n    };\n    reader.readAsDataURL(file);\n  }\n\n  function startOver() {\n    if (confirm(\"Start over with a brand-new website?\")) {\n      setProject(initial); setStep(0); localStorage.removeItem(\"firstpage-project\");\n    }\n  }\n\n  return (\n    <div className=\"min-h-screen bg-[#b97842] text-[#17233c] border-[14px] border-[#6e4325]\" style={{ backgroundImage: \"radial-gradient(#8f562d 1.5px, transparent 1.5px)\", backgroundSize: \"12px 12px\" }}>\n      <AppHeader step={step} setStep={setStep} />\n      <main className=\"max-w-7xl mx-auto px-4 pb-12\">\n        {step === 0 && (\n          <LessonCard eyebrow=\"Step 1 · Choose your subject\" title=\"What are you really into?\">\n            <p className=\"text-lg mb-5\">Pick something you could talk about all day. There are no wrong answers.</p>\n            <TagLesson title=\"Every webpage starts with a structure\" tags={[\n              { tag: \"<html>\", meaning: \"Wraps the whole webpage.\" },\n              { tag: \"<head>\", meaning: \"Holds information for the browser, like the page title.\" },\n              { tag: \"<body>\", meaning: \"Holds everything people can see on the page.\" },\n            ]} />\n            <div className=\"grid grid-cols-2 md:grid-cols-4 gap-3\">\n              {topics.map((topic, i) => (\n                <button key={topic.name} onClick={() => selectTopic(topic)} className={`p-4 rounded-sm border-4 border-[#17233c] text-left transition-transform hover:-translate-y-1 relative ${topicPaper[i]} ${project.topic === topic.name ? \"shadow-[7px_7px_0_#ef5138] -rotate-1\" : \"shadow-[4px_4px_0_#665b4a]\"}`}>\n                  <span className=\"absolute -top-2 right-3 w-4 h-4 rounded-full bg-[#ef5138] border border-[#8f2618]\" aria-hidden=\"true\" />\n                  <span className=\"text-4xl block mb-2\">{topic.icon}</span>\n                  <span className=\"font-black\">{topic.name}</span>\n                </button>\n              ))}\n            </div>\n            {chosen && (\n              <div className=\"mt-6 max-w-xl\">\n                <Field label={`What ${chosen.prompt} will your website be about?`} value={project.subject} onChange={(subject: string) => update({ subject, title: subject ? `All About ${subject}` : \"\" })} placeholder={`For example: ${chosen.example}`} />\n                <ButtonRow next={() => setStep(1)} nextDisabled={!project.subject.trim()} nextLabel=\"Let’s make a website →\" />\n              </div>\n            )}\n          </LessonCard>\n        )}\n\n        {step > 0 && step < 5 && (\n          <div className=\"grid lg:grid-cols-[minmax(0,1fr)_minmax(380px,1fr)] gap-6 items-start\">\n            <div>\n              {step === 1 && (\n                <LessonCard eyebrow=\"Step 2 · Home page\" title=\"Tell people what your site is about\">\n                  <p className=\"mb-5 text-lg\">A heading is the biggest idea on a page. Paragraphs add the details.</p>\n                  <TagLesson tags={[\n                    { tag: \"<h1>\", meaning: \"The one big heading that names the page.\", example: \"<h1>All About Red Pandas</h1>\" },\n                    { tag: \"<h2>\", meaning: \"A smaller heading that starts a section.\" },\n                    { tag: \"<p>\", meaning: \"A paragraph of sentences.\" },\n                    { tag: \"<ol>\", meaning: \"Starts a numbered list.\" },\n                    { tag: \"<li>\", meaning: \"One item inside a list.\" },\n                  ]} />\n                  <Field label=\"Your big heading\" value={project.title} onChange={(title: string) => update({ title })} placeholder=\"All About Red Pandas\" />\n                  <CodeNote><h1><span className=\"text-[#f0c85a]\">{project.title || \"Your title\"}</span></h1></CodeNote>\n                  <div className=\"mt-4\"><Field area label=\"Introduce your topic\" value={project.intro} onChange={(intro: string) => update({ intro })} placeholder=\"Tell your visitor what this website is about.\" /></div>\n                  <Field label=\"Name your first section\" value={project.sectionTitle} onChange={(sectionTitle: string) => update({ sectionTitle })} />\n                  <Field area label=\"What do you want to say here?\" value={project.sectionText} onChange={(sectionText: string) => update({ sectionText })} placeholder=\"I like this because…\" />\n                  <p className=\"font-black mb-2\">Add three facts</p>\n                  {project.facts.map((fact, i) => <Field key={i} label={`Fact ${i + 1}`} value={fact} onChange={(value: string) => { const facts = [...project.facts]; facts[i] = value; update({ facts }); }} placeholder=\"Something interesting\" />)}\n                  <ButtonRow back={() => setStep(0)} next={() => setStep(2)} nextDisabled={!project.title.trim() || !project.intro.trim()} />\n                </LessonCard>\n              )}\n              {step === 2 && (\n                <LessonCard eyebrow=\"Step 3 · Add another page\" title=\"Websites can have more than one page\">\n                  <p className=\"mb-5 text-lg\">Your second page is another HTML file. What should visitors discover there?</p>\n                  <TagLesson tags={[\n                    { tag: \"<!DOCTYPE html>\", meaning: \"Tells the browser this is a modern HTML document.\" },\n                    { tag: \"<title>\", meaning: \"Names the page in the browser tab.\" },\n                    { tag: \"<meta>\", meaning: \"Gives the browser useful page information.\" },\n                  ]} />\n                  <Field label=\"Page name\" value={project.secondPage} onChange={(secondPage: string) => update({ secondPage })} placeholder=\"Amazing Facts\" />\n                  <p className=\"text-sm font-bold mb-4\">File name: <code className=\"bg-[#e5f4ff] px-2 py-1 rounded\">{secondFile}</code></p>\n                  <Field label=\"Page heading\" value={project.secondTitle} onChange={(secondTitle: string) => update({ secondTitle })} placeholder=\"More Amazing Facts\" />\n                  <Field area label=\"What goes on this page?\" value={project.secondText} onChange={(secondText: string) => update({ secondText })} placeholder=\"Share more information, a review, instructions, or favorites.\" />\n                  <ButtonRow back={() => setStep(1)} next={() => setStep(3)} nextDisabled={!project.secondPage.trim() || !project.secondText.trim()} />\n                </LessonCard>\n              )}\n              {step === 3 && (\n                <LessonCard eyebrow=\"Step 4 · Connect your pages\" title=\"Links turn pages into a website\">\n                  <p className=\"text-lg mb-5\">The <code><a></code> tag makes a link. Its <code>href</code> tells the browser which file to open.</p>\n                  <TagLesson tags={[\n                    { tag: \"<nav>\", meaning: \"Groups the links people use to move around a website.\" },\n                    { tag: \"<a>\", meaning: \"Makes text clickable as a link.\" },\n                    { tag: \"href=\\\"…\\\"\", meaning: \"Points the link to another file or website.\" },\n                  ]} />\n                  <div className=\"space-y-4\">\n                    <CodeNote><a href=\"<span className=\"text-[#f0c85a]\">{secondFile}</span>\">{project.secondPage}</a></CodeNote>\n                    <div className=\"text-center text-3xl\">↕</div>\n                    <CodeNote><a href=\"<span className=\"text-[#f0c85a]\">index.html</span>\">Back to home</a></CodeNote>\n                  </div>\n                  <div className=\"mt-6 bg-[#e7f8ef] border-2 border-[#218c5b] rounded-2xl p-4\">\n                    <p className=\"font-black text-[#174d3b]\">Try the navigation in your preview!</p>\n                    <div className=\"flex gap-3 mt-3\">\n                      <button onClick={() => setPage(\"home\")} className=\"px-4 py-2 bg-white border-2 border-[#174d3b] rounded-xl font-bold\">Home</button>\n                      <button onClick={() => setPage(\"second\")} className=\"px-4 py-2 bg-white border-2 border-[#174d3b] rounded-xl font-bold\">{project.secondPage}</button>\n                    </div>\n                  </div>\n                  <ButtonRow back={() => setStep(2)} next={() => setStep(4)} />\n                </LessonCard>\n              )}\n              {step === 4 && (\n                <LessonCard eyebrow=\"Step 5 · Design studio\" title=\"Make it look like yours\">\n                  <p className=\"text-lg mb-5\">HTML gives your site structure. CSS controls colors, fonts, and backgrounds.</p>\n                  <TagLesson title=\"HTML for pictures, CSS for style\" tags={[\n                    { tag: \"<img>\", meaning: \"Places a picture on the page.\" },\n                    { tag: \"src=\\\"…\\\"\", meaning: \"Tells the browser where the picture is.\" },\n                    { tag: \"alt=\\\"…\\\"\", meaning: \"Describes the picture when it cannot be seen.\" },\n                    { tag: \"<style>\", meaning: \"Holds CSS rules for fonts, colors, and backgrounds.\" },\n                  ]} />\n                  <p className=\"font-black mb-2\">Choose an image</p>\n                  <div className=\"flex flex-wrap gap-2 mb-4\">\n                    {[\"🌟\", \"🎮\", \"🐯\", \"🍕\", \"🎨\", \"📚\", \"🎬\", \"🎵\", \"🚀\", \"🌊\"].map((icon) => <button key={icon} onClick={() => update({ image: icon, imageAlt: `A ${icon} illustration` })} className={`text-3xl p-3 rounded-xl border-2 ${project.image === icon ? \"border-[#ef5138] bg-[#fff0e8]\" : \"border-[#b6a98e] bg-white\"}`}>{icon}</button>)}\n                  </div>\n                  <label className=\"block mb-4 border-2 border-dashed border-[#2878d0] bg-[#e5f4ff] rounded-xl p-4 text-center font-black cursor-pointer\">\n                    Upload a picture from this device\n                    <input className=\"sr-only\" type=\"file\" accept=\"image/*\" onChange={(e: any) => uploadImage(e.target.files?.[0])} />\n                  </label>\n                  <Field label=\"Describe the image for someone who cannot see it\" value={project.imageAlt} onChange={(imageAlt: string) => update({ imageAlt })} placeholder=\"A red panda sitting in a tree\" />\n                  <p className=\"font-black mb-2\">Font</p>\n                  <div className=\"grid grid-cols-2 gap-2 mb-5\">\n                    {Object.keys(fonts).map((font) => <button key={font} onClick={() => update({ font })} className={`p-3 rounded-xl border-2 capitalize ${project.font === font ? \"border-[#2878d0] bg-[#e5f4ff]\" : \"border-[#b6a98e] bg-white\"}`} style={{ fontFamily: fonts[font] }}>{fontLabels[font]}</button>)}\n                  </div>\n                  {([\"background\", \"ink\", \"accent\"] as const).map((kind) => (\n                    <div key={kind} className=\"mb-5\">\n                      <p className=\"font-black mb-2 capitalize\">{kind === \"ink\" ? \"Text color\" : `${kind} color`}</p>\n                      <div className=\"flex flex-wrap gap-2\">\n                        {(kind === \"background\" ? [\"cream\", \"sky\", \"mint\", \"blush\", \"night\"] : kind === \"ink\" ? [\"navy\", \"plum\", \"forest\", \"charcoal\"] : [\"red\", \"blue\", \"green\", \"purple\", \"orange\"]).map((color) => (\n                          <button key={color} title={color} onClick={() => update({ [kind]: color })} className={`w-11 h-11 rounded-full border-4 ${project[kind] === color ? \"border-[#17233c] scale-110\" : \"border-white shadow\"}`} style={{ background: colors[color] }}><span className=\"sr-only\">{color}</span></button>\n                        ))}\n                      </div>\n                    </div>\n                  ))}\n                  <CodeNote>body {\"{\"}<br />  background: <span className=\"text-[#f0c85a]\">{colors[project.background]}</span>;<br />  font-family: <span className=\"text-[#f0c85a]\">{fonts[project.font] || fonts.friendly}</span>;<br />{\"}\"}</CodeNote>\n                  <ButtonRow back={() => setStep(3)} next={() => setStep(5)} nextLabel=\"Finish my website →\" />\n                </LessonCard>\n              )}\n            </div>\n            <div className=\"lg:sticky lg:top-4 self-start\">\n              <Preview project={project} page={page} onNavigate={setPage} />\n              {step === 3 && <p className=\"text-center mt-3 text-sm font-bold\">Use the lesson buttons to switch preview pages.</p>}\n            </div>\n          </div>\n        )}\n\n        {step === 5 && (\n          <div className=\"grid lg:grid-cols-[0.8fr_1.2fr] gap-6 items-start\">\n            <LessonCard eyebrow=\"Step 6 · You did it!\" title=\"You made a website!\">\n              <p className=\"text-lg mb-5\">It has two pages, headings, paragraphs, facts, links, an image, colors, and your own style.</p>\n              <TagLesson title=\"The building blocks you used\" tags={[\n                { tag: \"<h1> <h2>\", meaning: \"Headings organize the big ideas.\" },\n                { tag: \"<p> <ol> <li>\", meaning: \"Paragraphs and lists hold your information.\" },\n                { tag: \"<nav> <a>\", meaning: \"Navigation and links connect your pages.\" },\n                { tag: \"<img> <style>\", meaning: \"Images and CSS give the site personality.\" },\n              ]} />\n              <ul className=\"space-y-3 mb-6\">\n                {[\"A home page\", `A ${project.secondPage} page`, \"Links between both pages\", \"Your colors, font, and image\"].map((x) => <li key={x} className=\"font-bold flex gap-3\"><span className=\"text-[#218c5b]\">✓</span>{x}</li>)}\n              </ul>\n              <button onClick={download} className=\"w-full px-5 py-4 rounded-xl border-2 border-[#17233c] font-black text-white bg-[#ef5138] shadow-[4px_4px_0_#17233c]\">Download my website (.zip)</button>\n              <button onClick={() => setStep(4)} className=\"w-full mt-3 px-5 py-3 rounded-xl border-2 border-[#17233c] font-black bg-white\">Keep customizing</button>\n              <div className=\"mt-6 bg-[#e5f4ff] rounded-2xl p-4 border-2 border-[#2878d0]\">\n                <p className=\"font-black\">Before you share</p>\n                <p className=\"text-sm\">Ask a grown-up for help. Don’t put your full name, address, school, phone number, or other private information on a public website.</p>\n              </div>\n            </LessonCard>\n            <div>\n              <div className=\"flex gap-2 mb-3\">\n                <button onClick={() => setPage(\"home\")} className={`px-4 py-2 rounded-xl border-2 font-bold ${page === \"home\" ? \"bg-[#17233c] text-white\" : \"bg-white\"}`}>Home</button>\n                <button onClick={() => setPage(\"second\")} className={`px-4 py-2 rounded-xl border-2 font-bold ${page === \"second\" ? \"bg-[#17233c] text-white\" : \"bg-white\"}`}>{project.secondPage}</button>\n              </div>\n              <Preview project={project} page={page} onNavigate={setPage} />\n            </div>\n          </div>\n        )}\n        <footer className=\"mt-10 flex justify-between gap-4 text-sm text-[#665b4a]\">\n          <button onClick={startOver} className=\"underline font-bold\">Start over</button>\n          <a href=\"/source\" className=\"underline font-bold\">View source & remix</a>\n        </footer>\n      </main>\n    </div>\n  );\n}\n",[],[170,243,249],"3006dc29-560d-4e61-97e6-769d16e5a5f7",["D",1785431448217],[187,188,189],[170,243],["D",1785431448217],[186,190,191,192,193],[170],["D",1785431448217],["D",1789476033740],{"_104":103,"_111":107},{"_104":103,"_105":-5,"_106":107,"_18":55,"_108":109,"_110":24},{"_13":89,"_31":90,"_42":41,"_91":43,"_92":93,"_94":95,"_96":49,"_97":98,"_99":100,"_101":44,"_102":103},"ctx",{"_82":-5,"_133":302,"_303":304,"_305":306,"_307":24,"_308":24,"_309":24,"_310":59,"_311":-5,"_312":-7,"_313":-7,"_314":63,"_315":24,"_316":24,"_317":-5,"_318":24,"_319":24,"_320":24,"_321":-5},"ENV",{"_273":274,"_275":276,"_277":90,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301},"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"]
</article></body></html>

Diff · v90