[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_331":332,"_333":334},"routes/_app.x.$handle.$name",{"_104":103,"_32":46,"_112":92,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":125,"_126":127,"_128":25,"_129":130,"_131":61,"_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",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","01a02085-194d-7488-9979-b3881fa44e47","name","App.tsx","fileType","script","content","/** @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\";\nimport { deleteFirstWebsite, listFirstWebsites, saveFirstWebsite, type SavedFirstWebsite } from \"../storage.ts\";\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 = {\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 = {\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 = {\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

\n \n

\n {steps.map((label, i) => (\n 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 {step + 1} of {steps.length}\n

\n );\n}\n\nfunction LessonCard({ eyebrow, title, children }: { eyebrow: string; title: string; children: any }) {\n return (\n

\n \n {eyebrow}\n

{title}

\n {children}\n

\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 \n {label}\n {area ?

: <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 HTMLUnderneath({\n  html,\n  file,\n  focusTags = [],\n  explanation,\n  compact = false,\n}: {\n  html: string;\n  file: string;\n  focusTags?: string[];\n  explanation: string;\n  compact?: boolean;\n}) {\n  const lines = html.trimEnd().split(\"\\n\");\n  const isFocused = (line: string) =>\n    focusTags.some((tag) =>\n      line.includes(`<${tag}`) || line.includes(`</${tag}>`)\n    );\n\n  return (\n    <section\n      className=\"mt-6 w-full max-w-full min-w-0 bg-[#e5f4ff] border-4 border-[#17233c] p-4 shadow-[5px_5px_0_#2878d0]\"\n      aria-labelledby={`html-underneath-${file.replace(/[^a-z0-9]/gi, \"-\")}`}\n    >\n      <p className=\"text-xs font-black tracking-widest text-[#174d84]\">HTML UNDERNEATH</p>\n      <h2\n        id={`html-underneath-${file.replace(/[^a-z0-9]/gi, \"-\")}`}\n        className=\"text-2xl font-black\"\n      >\n        This code constructs <code>{file}</code>\n      </h2>\n      <p className=\"font-bold my-2\">{explanation}</p>\n      {focusTags.length > 0 && (\n        <p className=\"text-sm font-bold mb-3\">\n          The highlighted lines contain the{\" \"}\n          {focusTags.map((tag, index) => (\n            <span key={tag}>\n              {index > 0 && (index === focusTags.length - 1 ? \" and \" : \", \")}\n              <code className=\"bg-white px-1 border border-[#17233c]\"><{tag}></code>\n            </span>\n          ))}{\" \"}\n          elements used in this step.\n        </p>\n      )}\n      <pre\n        tabIndex={0}\n        aria-label={`Current HTML source for ${file}`}\n        className={`w-full max-w-full bg-[#263d2d] text-white border-[8px] border-[#9b6537] p-4 overflow-auto text-sm leading-relaxed ${compact ? \"max-h-[420px]\" : \"max-h-[560px]\"}`}\n      >\n        <code>\n          {lines.map((line, index) => (\n            <span\n              key={index}\n              className={`block min-w-max px-1 ${isFocused(line) ? \"bg-[#ffe17a] text-[#17233c] font-bold\" : \"\"}`}\n            >\n              {line || \" \"}\n              {\"\\n\"}\n            </span>\n          ))}\n        </code>\n      </pre>\n    </section>\n  );\n}\n\nfunction PageConstructionModel() {\n  return (\n    <section className=\"my-6 bg-[#e5f4ff] border-4 border-[#17233c] p-5 shadow-[6px_6px_0_#2878d0]\" aria-labelledby=\"page-construction-title\">\n      <p className=\"text-xs font-black tracking-widest text-[#174d84]\">HOW A WEBPAGE IS MADE</p>\n      <h2 id=\"page-construction-title\" className=\"text-2xl font-black mb-2\">HTML elements are the building pieces</h2>\n      <p className=\"font-bold mb-4\">\n        A webpage starts as an HTML document. The document contains elements that tell the browser what each piece is. The browser reads those elements and constructs the webpage you see.\n      </p>\n      <ol className=\"grid md:grid-cols-3 gap-3\" aria-label=\"How HTML becomes a webpage\">\n        <li className=\"bg-[#263d2d] text-white border-3 border-[#17233c] p-4\">\n          <p className=\"font-black text-[#ffe17a]\">1. HTML document</p>\n          <code className=\"block mt-2\"><h1>Red Pandas</h1><br /><p>They are excellent climbers.</p></code>\n        </li>\n        <li className=\"bg-[#ffe17a] border-3 border-[#17233c] p-4\">\n          <p className=\"font-black\">2. The browser reads it</p>\n          <p className=\"mt-2 font-bold\">It recognizes a heading element followed by a paragraph element.</p>\n        </li>\n        <li className=\"bg-white border-3 border-[#17233c] p-4\">\n          <p className=\"font-black text-sm text-[#2878d0]\">3. The webpage</p>\n          <p className=\"text-2xl font-black mt-2\">Red Pandas</p>\n          <p>They are excellent climbers.</p>\n        </li>\n      </ol>\n      <p className=\"mt-4 font-black\">\n        The tags are not shown on the finished page, but they are still underneath it doing the work.\n      </p>\n    </section>\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            <button onClick={() => onNavigate?.(\"home\")} className=\"mt-10 underline font-bold\" style={{ color: accent }}>← Back to home</button>\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\nfunction ProjectLibrary({\n  projects,\n  onCreate,\n  onOpen,\n  onDelete,\n}: {\n  projects: SavedFirstWebsite[];\n  onCreate: () => void;\n  onOpen: (project: SavedFirstWebsite) => void;\n  onDelete: (project: SavedFirstWebsite) => void;\n}) {\n  return (\n    <div className=\"min-h-screen bg-[#b97842] text-[#17233c] border-[14px] border-[#6e4325] p-5 md:p-10\" style={{ backgroundImage: \"radial-gradient(#8f562d 1.5px, transparent 1.5px)\", backgroundSize: \"12px 12px\" }}>\n      <main className=\"max-w-5xl mx-auto\">\n        <section className=\"bg-[#fffdf3] border-4 border-[#17233c] p-6 md:p-8 shadow-[10px_10px_0_#ef5138]\">\n          <p className=\"text-[#2878d0] font-black tracking-widest\">YOUR SAVED WORK</p>\n          <div className=\"flex flex-wrap gap-4 items-center justify-between\">\n            <div>\n              <h1 className=\"text-4xl md:text-5xl font-black\">My websites</h1>\n              <p className=\"font-bold mt-2\">Your projects stay saved in this browser on this device.</p>\n            </div>\n            <button onClick={onCreate} className=\"bg-[#218c5b] text-white border-4 border-[#17233c] px-5 py-4 font-black text-lg shadow-[5px_5px_0_#17233c]\">\n              + New website\n            </button>\n          </div>\n        </section>\n        {projects.length === 0 ? (\n          <section className=\"mt-7 bg-[#ffe17a] border-4 border-[#17233c] p-7 shadow-[7px_7px_0_#2878d0]\">\n            <h2 className=\"text-2xl font-black\">No saved websites yet</h2>\n            <p className=\"font-bold mt-2\">Make your first one. It will save automatically while you work.</p>\n          </section>\n        ) : (\n          <div className=\"grid md:grid-cols-2 gap-6 mt-7\">\n            {projects.map((saved) => (\n              <article key={saved.id} className=\"bg-[#fffdf3] border-4 border-[#17233c] p-5 shadow-[6px_6px_0_#f0c85a]\">\n                <button onClick={() => onOpen(saved)} className=\"w-full text-left\">\n                  <h2 className=\"text-2xl font-black\">{saved.name || \"Untitled website\"}</h2>\n                  <p className=\"font-bold text-sm mt-2\">Last saved {new Date(saved.updatedAt).toLocaleString()}</p>\n                  <p className=\"mt-3 underline font-black text-[#2878d0]\">Keep working →</p>\n                </button>\n                <button onClick={() => onDelete(saved)} className=\"mt-4 text-sm underline font-bold text-[#8f2618]\">Delete this website</button>\n              </article>\n            ))}\n          </div>\n        )}\n      </main>\n    </div>\n  );\n}\n\nexport function FirstWebsiteApp() {\n  const [step, setStep] = useState(0);\n  const [page, setPage] = useState<\"home\" | \"second\">(\"home\");\n  const [finishView, setFinishView] = useState<\"webpage\" | \"html\">(\"webpage\");\n  const [project, setProject] = useState<Project>(initial);\n  const [projectId, setProjectId] = useState<string | null>(null);\n  const [projects, setProjects] = useState<SavedFirstWebsite[]>([]);\n  const [libraryReady, setLibraryReady] = useState(false);\n  const [saveStatus, setSaveStatus] = useState<\"saving\" | \"saved\" | \"error\">(\"saved\");\n  const update = (values: Partial<Project>) => setProject((old) => ({ ...old, ...values }));\n\n  async function refreshProjects() {\n    setProjects(await listFirstWebsites());\n  }\n\n  useEffect(() => {\n    (async () => {\n      let saved = await listFirstWebsites();\n      const legacy = localStorage.getItem(\"firstpage-project\");\n      if (legacy && saved.length === 0) {\n        try {\n          const legacyProject = JSON.parse(legacy) as Project;\n          const recovered: SavedFirstWebsite = {\n            id: crypto.randomUUID(),\n            name: legacyProject.title || legacyProject.subject || \"Recovered website\",\n            updatedAt: Date.now(),\n            step: 0,\n            project: legacyProject,\n          };\n          await saveFirstWebsite(recovered);\n          localStorage.removeItem(\"firstpage-project\");\n          saved = [recovered];\n        } catch {\n          // Ignore invalid legacy data and leave it untouched.\n        }\n      }\n      setProjects(saved);\n      setLibraryReady(true);\n    })().catch(() => {\n      setLibraryReady(true);\n      setSaveStatus(\"error\");\n    });\n  }, []);\n\n  useEffect(() => {\n    if (!projectId) return;\n    setSaveStatus(\"saving\");\n    const timer = window.setTimeout(async () => {\n      try {\n        await saveFirstWebsite({\n          id: projectId,\n          name: project.title || project.subject || \"Untitled website\",\n          updatedAt: Date.now(),\n          step,\n          project,\n        });\n        setSaveStatus(\"saved\");\n      } catch {\n        setSaveStatus(\"error\");\n      }\n    }, 500);\n    return () => window.clearTimeout(timer);\n  }, [projectId, project, step]);\n\n  useEffect(() => {\n    setPage(step === 2 ? \"second\" : \"home\");\n    window.scrollTo({ top: 0, left: 0, behavior: \"auto\" });\n  }, [step]);\n\n  function createProject() {\n    setProject({ ...initial, facts: [...initial.facts] });\n    setStep(0);\n    setProjectId(crypto.randomUUID());\n    setSaveStatus(\"saving\");\n  }\n\n  function openProject(saved: SavedFirstWebsite) {\n    setProject(saved.project as Project);\n    setStep(saved.step || 0);\n    setProjectId(saved.id);\n    setSaveStatus(\"saved\");\n  }\n\n  async function removeProject(saved: SavedFirstWebsite) {\n    if (!confirm(`Delete “${saved.name}” from this browser?`)) return;\n    await deleteFirstWebsite(saved.id);\n    await refreshProjects();\n  }\n\n  async function showProjects() {\n    await refreshProjects();\n    setProjectId(null);\n  }\n\n  const chosen = useMemo(() => topics.find((t) => t.name === project.topic), [project.topic]);\n  const secondFile = `${fileName(project.secondPage)}.html`;\n\n  if (!libraryReady) {\n    return <div className=\"min-h-screen grid place-items-center bg-[#b97842] font-black text-2xl\">Opening your saved websites…</div>;\n  }\n  if (!projectId) {\n    return <ProjectLibrary projects={projects} onCreate={createProject} onOpen={openProject} onDelete={removeProject} />;\n  }\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            <PageConstructionModel />\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                  <HTMLUnderneath\n                    html={makeHTML(\"home\")}\n                    file=\"index.html\"\n                    focusTags={[\"h1\", \"h2\", \"p\", \"ol\", \"li\"]}\n                    explanation=\"Every field above adds content to an HTML element in the document. The browser reads these elements together and constructs the heading, paragraphs, sections, and list in the preview.\"\n                    compact\n                  />\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                  <HTMLUnderneath\n                    html={makeHTML(\"second\")}\n                    file={secondFile}\n                    focusTags={[\"html\", \"head\", \"title\", \"body\", \"h1\", \"p\"]}\n                    explanation=\"This is a second complete HTML document. A website can be made from several HTML files, and the browser constructs a separate webpage from each file.\"\n                    compact\n                  />\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                  <HTMLUnderneath\n                    html={makeHTML(\"home\")}\n                    file=\"index.html\"\n                    focusTags={[\"nav\", \"a\"]}\n                    explanation=\"The navigation is made from link elements inside a navigation element. Each href names another HTML file, so the browser knows which document to open next.\"\n                    compact\n                  />\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                  <HTMLUnderneath\n                    html={makeHTML(\"home\")}\n                    file=\"index.html\"\n                    focusTags={[\"style\", \"img\", \"div\"]}\n                    explanation=\"The content is still constructed from HTML elements. An uploaded picture uses an image element; an emoji picture uses a labeled div element. The style element contains CSS that tells the browser how those elements should look.\"\n                    compact\n                  />\n                  <ButtonRow back={() => setStep(3)} next={() => { setFinishView(\"webpage\"); 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-[minmax(0,0.8fr)_minmax(0,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 className=\"min-w-0 max-w-full\">\n              <section className=\"max-w-full bg-[#fffdf3] border-4 border-[#17233c] p-4 mb-4 shadow-[5px_5px_0_#2878d0]\" aria-labelledby=\"finished-site-view\">\n                <h2 id=\"finished-site-view\" className=\"text-2xl font-black\">See the webpage and the HTML underneath</h2>\n                <p className=\"font-bold mt-1\">\n                  The browser did not receive a picture of this page. It read your HTML document and constructed everything in the webpage view.\n                </p>\n                <div className=\"flex flex-wrap gap-2 mt-4\" role=\"group\" aria-label=\"Choose webpage or HTML view\">\n                  <button\n                    onClick={() => setFinishView(\"webpage\")}\n                    aria-pressed={finishView === \"webpage\"}\n                    className={`px-4 py-2 rounded-xl border-2 font-black ${finishView === \"webpage\" ? \"bg-[#17233c] text-white\" : \"bg-white\"}`}\n                  >\n                    👀 Webpage\n                  </button>\n                  <button\n                    onClick={() => setFinishView(\"html\")}\n                    aria-pressed={finishView === \"html\"}\n                    className={`px-4 py-2 rounded-xl border-2 font-black ${finishView === \"html\" ? \"bg-[#17233c] text-white\" : \"bg-white\"}`}\n                  >\n                    </> HTML underneath\n                  </button>\n                </div>\n              </section>\n              <div className=\"flex gap-2 mb-3\" role=\"group\" aria-label=\"Choose a page\">\n                <button onClick={() => setPage(\"home\")} aria-pressed={page === \"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\")} aria-pressed={page === \"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              {finishView === \"webpage\" ? (\n                <Preview project={project} page={page} onNavigate={setPage} />\n              ) : (\n                <HTMLUnderneath\n                  html={makeHTML(page)}\n                  file={page === \"home\" ? \"index.html\" : secondFile}\n                  explanation=\"This is the complete HTML document used for this page. Every visible heading, paragraph, list, image, and link comes from an element in this source.\"\n                />\n              )}\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","/** @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\";\nimport { deleteFirstWebsite, listFirstWebsites, saveFirstWebsite, type SavedFirstWebsite } from \"../storage.ts\";\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 HTMLUnderneath({\n  html,\n  file,\n  focusTags = [],\n  explanation,\n  compact = false,\n}: {\n  html: string;\n  file: string;\n  focusTags?: string[];\n  explanation: string;\n  compact?: boolean;\n}) {\n  const lines = html.trimEnd().split(\"\\n\");\n  const isFocused = (line: string) =>\n    focusTags.some((tag) =>\n      line.includes(`<${tag}`) || line.includes(`</${tag}>`)\n    );\n\n  return (\n    <section\n      className=\"mt-6 w-full max-w-full min-w-0 bg-[#e5f4ff] border-4 border-[#17233c] p-4 shadow-[5px_5px_0_#2878d0]\"\n      aria-labelledby={`html-underneath-${file.replace(/[^a-z0-9]/gi, \"-\")}`}\n    >\n      <p className=\"text-xs font-black tracking-widest text-[#174d84]\">HTML UNDERNEATH</p>\n      <h2\n        id={`html-underneath-${file.replace(/[^a-z0-9]/gi, \"-\")}`}\n        className=\"text-2xl font-black\"\n      >\n        This code constructs <code>{file}</code>\n      </h2>\n      <p className=\"font-bold my-2\">{explanation}</p>\n      {focusTags.length > 0 && (\n        <p className=\"text-sm font-bold mb-3\">\n          The highlighted lines contain the{\" \"}\n          {focusTags.map((tag, index) => (\n            <span key={tag}>\n              {index > 0 && (index === focusTags.length - 1 ? \" and \" : \", \")}\n              <code className=\"bg-white px-1 border border-[#17233c]\"><{tag}></code>\n            </span>\n          ))}{\" \"}\n          elements used in this step.\n        </p>\n      )}\n      <pre\n        tabIndex={0}\n        aria-label={`Current HTML source for ${file}`}\n        className={`w-full max-w-full bg-[#263d2d] text-white border-[8px] border-[#9b6537] p-4 overflow-auto text-sm leading-relaxed ${compact ? \"max-h-[420px]\" : \"max-h-[560px]\"}`}\n      >\n        <code>\n          {lines.map((line, index) => (\n            <span\n              key={index}\n              className={`block min-w-max px-1 ${isFocused(line) ? \"bg-[#ffe17a] text-[#17233c] font-bold\" : \"\"}`}\n            >\n              {line || \" \"}\n              {\"\\n\"}\n            </span>\n          ))}\n        </code>\n      </pre>\n    </section>\n  );\n}\n\nfunction PageConstructionModel() {\n  return (\n    <section className=\"my-6 bg-[#e5f4ff] border-4 border-[#17233c] p-5 shadow-[6px_6px_0_#2878d0]\" aria-labelledby=\"page-construction-title\">\n      <p className=\"text-xs font-black tracking-widest text-[#174d84]\">HOW A WEBPAGE IS MADE</p>\n      <h2 id=\"page-construction-title\" className=\"text-2xl font-black mb-2\">HTML elements are the building pieces</h2>\n      <p className=\"font-bold mb-4\">\n        A webpage starts as an HTML document. The document contains elements that tell the browser what each piece is. The browser reads those elements and constructs the webpage you see.\n      </p>\n      <ol className=\"grid md:grid-cols-3 gap-3\" aria-label=\"How HTML becomes a webpage\">\n        <li className=\"bg-[#263d2d] text-white border-3 border-[#17233c] p-4\">\n          <p className=\"font-black text-[#ffe17a]\">1. HTML document</p>\n          <code className=\"block mt-2\"><h1>Red Pandas</h1><br /><p>They are excellent climbers.</p></code>\n        </li>\n        <li className=\"bg-[#ffe17a] border-3 border-[#17233c] p-4\">\n          <p className=\"font-black\">2. The browser reads it</p>\n          <p className=\"mt-2 font-bold\">It recognizes a heading element followed by a paragraph element.</p>\n        </li>\n        <li className=\"bg-white border-3 border-[#17233c] p-4\">\n          <p className=\"font-black text-sm text-[#2878d0]\">3. The webpage</p>\n          <p className=\"text-2xl font-black mt-2\">Red Pandas</p>\n          <p>They are excellent climbers.</p>\n        </li>\n      </ol>\n      <p className=\"mt-4 font-black\">\n        The tags are not shown on the finished page, but they are still underneath it doing the work.\n      </p>\n    </section>\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            <button onClick={() => onNavigate?.(\"home\")} className=\"mt-10 underline font-bold\" style={{ color: accent }}>← Back to home</button>\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\nfunction ProjectLibrary({\n  projects,\n  onCreate,\n  onOpen,\n  onDelete,\n}: {\n  projects: SavedFirstWebsite[];\n  onCreate: () => void;\n  onOpen: (project: SavedFirstWebsite) => void;\n  onDelete: (project: SavedFirstWebsite) => void;\n}) {\n  return (\n    <div className=\"min-h-screen bg-[#b97842] text-[#17233c] border-[14px] border-[#6e4325] p-5 md:p-10\" style={{ backgroundImage: \"radial-gradient(#8f562d 1.5px, transparent 1.5px)\", backgroundSize: \"12px 12px\" }}>\n      <main className=\"max-w-5xl mx-auto\">\n        <section className=\"bg-[#fffdf3] border-4 border-[#17233c] p-6 md:p-8 shadow-[10px_10px_0_#ef5138]\">\n          <p className=\"text-[#2878d0] font-black tracking-widest\">YOUR SAVED WORK</p>\n          <div className=\"flex flex-wrap gap-4 items-center justify-between\">\n            <div>\n              <h1 className=\"text-4xl md:text-5xl font-black\">My websites</h1>\n              <p className=\"font-bold mt-2\">Your projects stay saved in this browser on this device.</p>\n            </div>\n            <button onClick={onCreate} className=\"bg-[#218c5b] text-white border-4 border-[#17233c] px-5 py-4 font-black text-lg shadow-[5px_5px_0_#17233c]\">\n              + New website\n            </button>\n          </div>\n        </section>\n        {projects.length === 0 ? (\n          <section className=\"mt-7 bg-[#ffe17a] border-4 border-[#17233c] p-7 shadow-[7px_7px_0_#2878d0]\">\n            <h2 className=\"text-2xl font-black\">No saved websites yet</h2>\n            <p className=\"font-bold mt-2\">Make your first one. It will save automatically while you work.</p>\n          </section>\n        ) : (\n          <div className=\"grid md:grid-cols-2 gap-6 mt-7\">\n            {projects.map((saved) => (\n              <article key={saved.id} className=\"bg-[#fffdf3] border-4 border-[#17233c] p-5 shadow-[6px_6px_0_#f0c85a]\">\n                <button onClick={() => onOpen(saved)} className=\"w-full text-left\">\n                  <h2 className=\"text-2xl font-black\">{saved.name || \"Untitled website\"}</h2>\n                  <p className=\"font-bold text-sm mt-2\">Last saved {new Date(saved.updatedAt).toLocaleString()}</p>\n                  <p className=\"mt-3 underline font-black text-[#2878d0]\">Keep working →</p>\n                </button>\n                <button onClick={() => onDelete(saved)} className=\"mt-4 text-sm underline font-bold text-[#8f2618]\">Delete this website</button>\n              </article>\n            ))}\n          </div>\n        )}\n      </main>\n    </div>\n  );\n}\n\nexport function FirstWebsiteApp() {\n  const [step, setStep] = useState(0);\n  const [page, setPage] = useState<\"home\" | \"second\">(\"home\");\n  const [finishView, setFinishView] = useState<\"webpage\" | \"html\">(\"webpage\");\n  const [project, setProject] = useState<Project>(initial);\n  const [projectId, setProjectId] = useState<string | null>(null);\n  const [projects, setProjects] = useState<SavedFirstWebsite[]>([]);\n  const [libraryReady, setLibraryReady] = useState(false);\n  const [saveStatus, setSaveStatus] = useState<\"saving\" | \"saved\" | \"error\">(\"saved\");\n  const update = (values: Partial<Project>) => setProject((old) => ({ ...old, ...values }));\n\n  async function refreshProjects() {\n    setProjects(await listFirstWebsites());\n  }\n\n  useEffect(() => {\n    (async () => {\n      let saved = await listFirstWebsites();\n      const legacy = localStorage.getItem(\"firstpage-project\");\n      if (legacy && saved.length === 0) {\n        try {\n          const legacyProject = JSON.parse(legacy) as Project;\n          const recovered: SavedFirstWebsite = {\n            id: crypto.randomUUID(),\n            name: legacyProject.title || legacyProject.subject || \"Recovered website\",\n            updatedAt: Date.now(),\n            step: 0,\n            project: legacyProject,\n          };\n          await saveFirstWebsite(recovered);\n          localStorage.removeItem(\"firstpage-project\");\n          saved = [recovered];\n        } catch {\n          // Ignore invalid legacy data and leave it untouched.\n        }\n      }\n      setProjects(saved);\n      setLibraryReady(true);\n    })().catch(() => {\n      setLibraryReady(true);\n      setSaveStatus(\"error\");\n    });\n  }, []);\n\n  useEffect(() => {\n    if (!projectId) return;\n    setSaveStatus(\"saving\");\n    const timer = window.setTimeout(async () => {\n      try {\n        await saveFirstWebsite({\n          id: projectId,\n          name: project.title || project.subject || \"Untitled website\",\n          updatedAt: Date.now(),\n          step,\n          project,\n        });\n        setSaveStatus(\"saved\");\n      } catch {\n        setSaveStatus(\"error\");\n      }\n    }, 500);\n    return () => window.clearTimeout(timer);\n  }, [projectId, project, step]);\n\n  useEffect(() => {\n    setPage(step === 2 ? \"second\" : \"home\");\n    window.scrollTo({ top: 0, left: 0, behavior: \"auto\" });\n  }, [step]);\n\n  function createProject() {\n    setProject({ ...initial, facts: [...initial.facts] });\n    setStep(0);\n    setProjectId(crypto.randomUUID());\n    setSaveStatus(\"saving\");\n  }\n\n  function openProject(saved: SavedFirstWebsite) {\n    setProject(saved.project as Project);\n    setStep(saved.step || 0);\n    setProjectId(saved.id);\n    setSaveStatus(\"saved\");\n  }\n\n  async function removeProject(saved: SavedFirstWebsite) {\n    if (!confirm(`Delete “${saved.name}” from this browser?`)) return;\n    await deleteFirstWebsite(saved.id);\n    await refreshProjects();\n  }\n\n  async function showProjects() {\n    await refreshProjects();\n    setProjectId(null);\n  }\n\n  const chosen = useMemo(() => topics.find((t) => t.name === project.topic), [project.topic]);\n  const secondFile = `${fileName(project.secondPage)}.html`;\n\n  if (!libraryReady) {\n    return <div className=\"min-h-screen grid place-items-center bg-[#b97842] font-black text-2xl\">Opening your saved websites…</div>;\n  }\n  if (!projectId) {\n    return <ProjectLibrary projects={projects} onCreate={createProject} onOpen={openProject} onDelete={removeProject} />;\n  }\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 a new website? Your current website will stay saved.\")) {\n      createProject();\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            <PageConstructionModel />\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                  <HTMLUnderneath\n                    html={makeHTML(\"home\")}\n                    file=\"index.html\"\n                    focusTags={[\"h1\", \"h2\", \"p\", \"ol\", \"li\"]}\n                    explanation=\"Every field above adds content to an HTML element in the document. The browser reads these elements together and constructs the heading, paragraphs, sections, and list in the preview.\"\n                    compact\n                  />\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                  <HTMLUnderneath\n                    html={makeHTML(\"second\")}\n                    file={secondFile}\n                    focusTags={[\"html\", \"head\", \"title\", \"body\", \"h1\", \"p\"]}\n                    explanation=\"This is a second complete HTML document. A website can be made from several HTML files, and the browser constructs a separate webpage from each file.\"\n                    compact\n                  />\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                  <HTMLUnderneath\n                    html={makeHTML(\"home\")}\n                    file=\"index.html\"\n                    focusTags={[\"nav\", \"a\"]}\n                    explanation=\"The navigation is made from link elements inside a navigation element. Each href names another HTML file, so the browser knows which document to open next.\"\n                    compact\n                  />\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                  <HTMLUnderneath\n                    html={makeHTML(\"home\")}\n                    file=\"index.html\"\n                    focusTags={[\"style\", \"img\", \"div\"]}\n                    explanation=\"The content is still constructed from HTML elements. An uploaded picture uses an image element; an emoji picture uses a labeled div element. The style element contains CSS that tells the browser how those elements should look.\"\n                    compact\n                  />\n                  <ButtonRow back={() => setStep(3)} next={() => { setFinishView(\"webpage\"); 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-[minmax(0,0.8fr)_minmax(0,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 className=\"min-w-0 max-w-full\">\n              <section className=\"max-w-full bg-[#fffdf3] border-4 border-[#17233c] p-4 mb-4 shadow-[5px_5px_0_#2878d0]\" aria-labelledby=\"finished-site-view\">\n                <h2 id=\"finished-site-view\" className=\"text-2xl font-black\">See the webpage and the HTML underneath</h2>\n                <p className=\"font-bold mt-1\">\n                  The browser did not receive a picture of this page. It read your HTML document and constructed everything in the webpage view.\n                </p>\n                <div className=\"flex flex-wrap gap-2 mt-4\" role=\"group\" aria-label=\"Choose webpage or HTML view\">\n                  <button\n                    onClick={() => setFinishView(\"webpage\")}\n                    aria-pressed={finishView === \"webpage\"}\n                    className={`px-4 py-2 rounded-xl border-2 font-black ${finishView === \"webpage\" ? \"bg-[#17233c] text-white\" : \"bg-white\"}`}\n                  >\n                    👀 Webpage\n                  </button>\n                  <button\n                    onClick={() => setFinishView(\"html\")}\n                    aria-pressed={finishView === \"html\"}\n                    className={`px-4 py-2 rounded-xl border-2 font-black ${finishView === \"html\" ? \"bg-[#17233c] text-white\" : \"bg-white\"}`}\n                  >\n                    </> HTML underneath\n                  </button>\n                </div>\n              </section>\n              <div className=\"flex gap-2 mb-3\" role=\"group\" aria-label=\"Choose a page\">\n                <button onClick={() => setPage(\"home\")} aria-pressed={page === \"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\")} aria-pressed={page === \"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              {finishView === \"webpage\" ? (\n                <Preview project={project} page={page} onNavigate={setPage} />\n              ) : (\n                <HTMLUnderneath\n                  html={makeHTML(page)}\n                  file={page === \"home\" ? \"index.html\" : secondFile}\n                  explanation=\"This is the complete HTML document used for this page. Every visible heading, paragraph, list, image, and link comes from an element in this source.\"\n                />\n              )}\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","createdAt",["D",1787252141119],"branchVersion","branchId","e0644a25-146c-4078-bc5c-2676eed9614f","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=1789595999&sig=b55eb83fada13be477d392114184763f541366cdfa5002a89a848debcdb29491","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",1789563036726],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_111":107},"org",{"_104":103,"_105":-5,"_106":107,"_18":57,"_108":109,"_110":25},"branch",{"_13":91,"_32":92,"_44":43,"_93":45,"_94":95,"_96":97,"_98":51,"_99":45,"_100":67,"_101":46,"_102":103},"isOwned",9,"feature-multi-project-save","projectId","forkedBranchId","e61b9380-cdfc-422f-a63c-d1817f84669f","forkedBranchVersion",140,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pchinjr","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":326,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":327,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":328,"_86":329,"_88":330,"_90":25},"tree",[189,206,207],"files",[189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207],"counts",{"_178":65,"_179":180,"_181":65,"_182":183,"_184":185},"contents",[152,153,154],"upstreamProject",{"_44":145,"_32":146,"_53":147,"_55":148,"_50":51,"_84":149},"upstreamBranch",{"_44":95,"_39":136,"_137":138,"_32":139,"_93":45,"_13":140,"_94":141,"_96":142,"_143":144,"_48":-5,"_90":25,"_50":51,"_102":103,"_66":67,"_101":46},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1785431448217],"updatedAt",["D",1787253076961],"main",162,"961078ea-f528-11ef-aa68-569c3dd06744",91,"lockfileKey","1787253077208-esm.town_v_pchinjr_firstpage@162-main","96102714-f528-11ef-aa68-569c3dd06744","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789595999&sig=18aeddca3c1af95e36337c6aea2eb1cd1f097b3d06250b7665ca0274d3dfffd8",{"_104":150,"_111":151},"templates","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789595999&sig=5ce53d553f31a4c291a4ca5660b7f712b9aba9a0d43f432f1aaacd8970ef293d",{"_44":172,"_32":173,"_30":174,"_158":-5,"_42":43,"_41":159,"_160":61,"_39":175,"_13":65,"_34":176,"_36":-5,"_24":25,"_164":-5,"_27":177},{"_44":166,"_32":167,"_30":168,"_158":-5,"_42":43,"_41":159,"_160":61,"_39":169,"_13":65,"_34":20,"_36":170,"_24":25,"_164":-5,"_27":171},{"_44":155,"_32":156,"_30":157,"_158":-5,"_42":43,"_41":159,"_160":61,"_39":161,"_13":65,"_34":162,"_36":163,"_24":25,"_164":-5,"_27":165},"9f2fa539-7f6a-435b-bd55-d127909c7501","index.ts","01a02085-194d-7488-9979-f6554acbcbf8","parentId",1,"latest",["D",1787251988821],"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",[156],"6f44bf34-de1c-4640-b669-5a40cde4ba63","README.md","01a02085-194d-7488-9979-f1bb42346d50",["D",1787251988821],"# 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\n## Architecture decision records\n\n### ADR-001: Sanitize student-authored HTML before rendering\n\n- **Status:** Accepted\n- **Date:** 2026-08-01\n\n#### Context\n\nThe advanced website activity stores each page body as an HTML string. React does not interpret a string as elements by default, so the visual editor and preview use `dangerouslySetInnerHTML` to turn that string into rendered HTML.\n\nThat API is necessary for the current visual editing experience, but unsanitized HTML is an injection sink. A script element inserted through `innerHTML` normally does not execute, but event attributes such as `onerror`, dangerous URL schemes such as `javascript:`, and other active markup can still execute in the application document.\n\nAlthough projects currently remain in the student's browser, students may paste examples from the web and future versions may support importing or sharing projects. User-authored HTML must therefore be treated as untrusted.\n\n#### Decision\n\nAll advanced-page HTML is sanitized with DOMPurify before it:\n\n1. Enters the WYSIWYG editor.\n2. Enters the visual preview.\n3. Is included in a downloaded website.\n4. Is accepted as rich HTML from the clipboard.\n\nThe sanitizer uses an allowlist intended for the lesson:\n\n- Elements: headings, paragraphs, emphasis, links, images, lists, blockquotes, and line breaks.\n- Attributes: `href`, `src`, `alt`, and `title`.\n\nScripts, event-handler attributes, embeds, styles, data attributes, ARIA attributes, and unsupported elements are removed. Toolbar-created web links and image URLs must use `http://` or `https://`. Internal page links continue to use controlled relative filenames.\n\nRaw text may still be written in HTML mode so students can see and correct their source, but only sanitized output is rendered or downloaded.\n\n#### Consequences\n\n- Student-authored HTML cannot execute JavaScript in the main First Page application through the supported editor flow.\n- Pasting formatted text continues to work, but unsupported formatting is removed.\n- Advanced users cannot add scripts, iframes, custom CSS, forms, or arbitrary attributes in this activity.\n- Adding a new supported HTML feature requires deliberately expanding the sanitizer allowlist.\n- Sanitization is the primary control. A sandboxed preview iframe and a strict Content Security Policy remain recommended defense-in-depth improvements.\n\n",[167],"b7df42da-c0fb-4e16-8edf-f1416d6a7509","frontend","01a02085-194d-7488-9979-ed61e32b72d7",["D",1787251988821],"directory",[173],"pulls","branches",2,"forks","envVars",{"_186":65,"_188":65},"connections",{"_186":65,"_187":65},"count","unfilledCount","emptyCount",{"_44":172,"_32":173,"_30":174,"_158":-5,"_42":43,"_41":159,"_160":61,"_39":323,"_13":65,"_34":176,"_36":-5,"_24":25,"_164":-5,"_209":324,"_27":325},{"_44":319,"_32":306,"_30":301,"_158":174,"_42":43,"_41":159,"_160":61,"_39":320,"_13":65,"_34":176,"_36":-5,"_24":25,"_164":-5,"_209":321,"_27":322},{"_44":314,"_32":33,"_30":31,"_158":301,"_42":43,"_41":14,"_160":25,"_39":315,"_13":316,"_34":35,"_36":38,"_24":25,"_164":-5,"_209":317,"_27":318},{"_44":307,"_32":308,"_30":309,"_158":301,"_42":43,"_41":159,"_160":61,"_39":310,"_13":65,"_34":35,"_36":311,"_24":25,"_164":-5,"_209":312,"_27":313},{"_44":298,"_32":299,"_30":300,"_158":301,"_42":43,"_41":159,"_160":61,"_39":302,"_13":65,"_34":35,"_36":303,"_24":25,"_164":-5,"_209":304,"_27":305},{"_44":294,"_32":251,"_30":246,"_158":174,"_42":43,"_41":159,"_160":61,"_39":295,"_13":65,"_34":176,"_36":-5,"_24":25,"_164":-5,"_209":296,"_27":297},{"_44":287,"_32":288,"_30":289,"_158":246,"_42":43,"_41":159,"_160":61,"_39":290,"_13":65,"_34":35,"_36":291,"_24":25,"_164":-5,"_209":292,"_27":293},{"_44":280,"_32":281,"_30":282,"_158":246,"_42":43,"_41":159,"_160":61,"_39":283,"_13":65,"_34":35,"_36":284,"_24":25,"_164":-5,"_209":285,"_27":286},{"_44":273,"_32":274,"_30":275,"_158":246,"_42":43,"_41":159,"_160":61,"_39":276,"_13":65,"_34":35,"_36":277,"_24":25,"_164":-5,"_209":278,"_27":279},{"_44":266,"_32":267,"_30":268,"_158":246,"_42":43,"_41":159,"_160":61,"_39":269,"_13":65,"_34":35,"_36":270,"_24":25,"_164":-5,"_209":271,"_27":272},{"_44":259,"_32":260,"_30":261,"_158":246,"_42":43,"_41":159,"_160":61,"_39":262,"_13":65,"_34":35,"_36":263,"_24":25,"_164":-5,"_209":264,"_27":265},{"_44":252,"_32":253,"_30":254,"_158":246,"_42":43,"_41":159,"_160":61,"_39":255,"_13":65,"_34":35,"_36":256,"_24":25,"_164":-5,"_209":257,"_27":258},{"_44":243,"_32":244,"_30":245,"_158":246,"_42":43,"_41":159,"_160":61,"_39":247,"_13":65,"_34":35,"_36":248,"_24":25,"_164":-5,"_209":249,"_27":250},{"_44":236,"_32":237,"_30":238,"_158":174,"_42":43,"_41":159,"_160":61,"_39":239,"_13":65,"_34":20,"_36":240,"_24":25,"_164":-5,"_209":241,"_27":242},{"_44":229,"_32":230,"_30":231,"_158":174,"_42":43,"_41":159,"_160":61,"_39":232,"_13":65,"_34":35,"_36":233,"_24":25,"_164":-5,"_209":234,"_27":235},{"_44":222,"_32":223,"_30":224,"_158":174,"_42":43,"_41":159,"_160":61,"_39":225,"_13":65,"_34":35,"_36":226,"_24":25,"_164":-5,"_209":227,"_27":228},{"_44":215,"_32":216,"_30":217,"_158":174,"_42":43,"_41":180,"_160":61,"_39":218,"_13":65,"_34":35,"_36":219,"_24":25,"_164":-5,"_209":220,"_27":221},{"_44":166,"_32":167,"_30":168,"_158":-5,"_42":43,"_41":159,"_160":61,"_39":212,"_13":65,"_34":20,"_36":170,"_24":25,"_164":-5,"_209":213,"_27":214},{"_44":155,"_32":156,"_30":157,"_158":-5,"_42":43,"_41":159,"_160":61,"_39":208,"_13":65,"_34":162,"_36":163,"_24":25,"_164":-5,"_209":210,"_27":211},["D",1787251988821],"children",[],[156],["D",1787251988821],[],[167],"d324095d-8946-4dc1-8c06-4ca3b9d59344","storage.ts","8820711a-9cc8-11f1-a3e8-1607ee4eb77e",["D",1787252051629],"export type SavedFirstWebsite = {\n  id: string;\n  name: string;\n  updatedAt: number;\n  step: number;\n  project: Record<string, unknown>;\n};\n\nconst DB_NAME = \"firstpage\";\nconst DB_VERSION = 1;\nconst STORE = \"projects\";\n\nfunction openDatabase(): Promise<IDBDatabase> {\n  return new Promise((resolve, reject) => {\n    const request = indexedDB.open(DB_NAME, DB_VERSION);\n    request.onupgradeneeded = () => {\n      const db = request.result;\n      if (!db.objectStoreNames.contains(STORE)) {\n        const store = db.createObjectStore(STORE, { keyPath: \"id\" });\n        store.createIndex(\"updatedAt\", \"updatedAt\");\n      }\n    };\n    request.onsuccess = () => resolve(request.result);\n    request.onerror = () => reject(request.error);\n  });\n}\n\nfunction requestResult<T>(request: IDBRequest<T>): Promise<T> {\n  return new Promise((resolve, reject) => {\n    request.onsuccess = () => resolve(request.result);\n    request.onerror = () => reject(request.error);\n  });\n}\n\nexport async function listFirstWebsites(): Promise<SavedFirstWebsite[]> {\n  const db = await openDatabase();\n  try {\n    const projects = await requestResult(db.transaction(STORE, \"readonly\").objectStore(STORE).getAll()) as SavedFirstWebsite[];\n    return projects.sort((a, b) => b.updatedAt - a.updatedAt);\n  } finally {\n    db.close();\n  }\n}\n\nexport async function getFirstWebsite(id: string): Promise<SavedFirstWebsite | undefined> {\n  const db = await openDatabase();\n  try {\n    return await requestResult(db.transaction(STORE, \"readonly\").objectStore(STORE).get(id));\n  } finally {\n    db.close();\n  }\n}\n\nexport async function saveFirstWebsite(project: SavedFirstWebsite): Promise<void> {\n  const db = await openDatabase();\n  try {\n    await requestResult(db.transaction(STORE, \"readwrite\").objectStore(STORE).put(project));\n  } finally {\n    db.close();\n  }\n}\n\nexport async function deleteFirstWebsite(id: string): Promise<void> {\n  const db = await openDatabase();\n  try {\n    await requestResult(db.transaction(STORE, \"readwrite\").objectStore(STORE).delete(id));\n  } finally {\n    db.close();\n  }\n}\n",[],[173,216],"4607e4f3-12be-431b-bdc1-92c1d28e7131","root.tsx","01a02085-194d-7488-9979-ebd77b1c7034",["D",1787251988821],"/** @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",[],[173,223],"4ecddde0-3178-45ec-b369-cf420635f8f2","index.tsx","01a02085-194d-7488-9979-e4d56315c2c0",["D",1787251988821],"/** @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 />);",[],[173,230],"c9f2fa18-58b4-4f42-9f25-9545e4475825","favicon.svg","01a02085-194d-7488-9979-e1e3a8826645",["D",1787251988821],"<?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>",[],[173,237],"07c1f1b2-6e89-4350-b46d-6bf0621a0156","types.ts","01a02085-194d-7488-9979-d8ee79a3fb62","01a02085-194d-7488-9979-dd8a2dee9f5a",["D",1787251988821],"export type ModuleName =\n  | \"hub\"\n  | \"first\"\n  | \"hypertext\"\n  | \"adventure\"\n  | \"poetry\"\n  | \"advanced\"\n  | \"reference\";\n",[],[173,251,244],"modules","44326765-f21e-4356-8438-9e34cdb350c6","ReferenceLab.tsx","01a02085-194d-7488-9979-d5d2cc1b628f",["D",1787251988821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Field, LabShell, Paper } from \"../components/LabUI.tsx\";\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\ntype Snippet = (typeof snippets)[number];\n\nconst previewOverrides: Record<string, string> = {\n  \"Link to a website\": '<a href=\"#demo-destination\">Visit the site</a><p id=\"demo-destination\">The link brought you here.</p>',\n  \"Link to another page\": '<a href=\"#demo-page\">Read my facts</a><section id=\"demo-page\"><h2>Facts</h2><p>This represents another page.</p></section>',\n  \"Picture\": '<img src=\"data:image/svg+xml,%3Csvg xmlns=\\'http://www.w3.org/2000/svg\\' width=\\'500\\' height=\\'240\\'%3E%3Crect width=\\'100%25\\' height=\\'100%25\\' rx=\\'24\\' fill=\\'%23d7c0f4\\'/%3E%3Ctext x=\\'50%25\\' y=\\'54%25\\' text-anchor=\\'middle\\' font-size=\\'38\\'%3EMy picture%3C/text%3E%3C/svg%3E\" alt=\"A purple example picture\">',\n  \"Audio player\": '<audio controls>\\n  Your browser cannot play this sound.\\n</audio><p>An audio player gives the reader play and volume controls.</p>',\n  \"Video player\": '<video controls width=\"420\" poster=\"data:image/svg+xml,%3Csvg xmlns=\\'http://www.w3.org/2000/svg\\' width=\\'500\\' height=\\'280\\'%3E%3Crect width=\\'100%25\\' height=\\'100%25\\' fill=\\'%2317233c\\'/%3E%3Ctext x=\\'50%25\\' y=\\'54%25\\' text-anchor=\\'middle\\' fill=\\'white\\' font-size=\\'34\\'%3EVideo%3C/text%3E%3C/svg%3E\">\\n  Your browser cannot play this video.\\n</video>',\n  \"Navigation\": '<nav><a href=\"#home\">Home</a><a href=\"#facts\">Facts</a></nav><section id=\"home\"><h2>Home</h2></section><section id=\"facts\"><h2>Facts</h2></section>',\n  \"Simple page styles\": '<style>body { background: lightyellow; color: navy; font-family: sans-serif; }</style><p>This paragraph is wearing the page styles.</p>',\n};\n\nfunction snippetPreview(snippet: Snippet) {\n  const example = previewOverrides[snippet.name] || snippet.code;\n  if (example.trimStart().startsWith(\"<!DOCTYPE\")) return example;\n\n  return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <style>\n    * { box-sizing: border-box; }\n    body { margin: 0; padding: 18px; background: #fffef8; color: #17233c; font: 16px/1.5 Arial, sans-serif; }\n    h1 { margin: 0 0 12px; font-size: 2rem; }\n    h2 { margin: 8px 0; font-size: 1.4rem; }\n    p { margin: 8px 0; }\n    a { color: #1d62b4; font-weight: bold; }\n    nav { display: flex; gap: 16px; padding: 10px; background: #ffe17a; border: 2px solid #17233c; }\n    img, video { display: block; max-width: 100%; max-height: 180px; }\n    audio { width: 100%; }\n    section { margin-top: 24px; }\n    summary { cursor: pointer; font-weight: bold; }\n  </style>\n</head>\n<body>\n  ${example}\n</body>\n</html>`;\n}\n\nexport function ReferenceLab({ onBack }: { onBack: () => void }) {\n  const [search, setSearch] = useState(\"\");\n  const [group, setGroup] = useState(\"All\");\n  const [copied, setCopied] = useState<string | null>(null);\n  const [copyError, setCopyError] = useState(\"\");\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\n  async function copySnippet(snippet: Snippet) {\n    setCopyError(\"\");\n    try {\n      await navigator.clipboard.writeText(snippet.code);\n    } catch {\n      const temporary = document.createElement(\"textarea\");\n      temporary.value = snippet.code;\n      temporary.style.position = \"fixed\";\n      temporary.style.opacity = \"0\";\n      document.body.appendChild(temporary);\n      temporary.select();\n      const copiedWithFallback = document.execCommand(\"copy\");\n      temporary.remove();\n      if (!copiedWithFallback) {\n        setCopyError(\"Copy did not work. Select the code and copy it manually.\");\n        return;\n      }\n    }\n\n    setCopied(snippet.name);\n    window.setTimeout(\n      () => setCopied((current) => current === snippet.name ? null : current),\n      1800,\n    );\n  }\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              <div className=\"mt-3\">\n                <p className=\"text-xs font-black tracking-widest mb-1\">SEE IT IN USE</p>\n                <iframe\n                  title={`${snippet.name} example`}\n                  srcDoc={snippetPreview(snippet)}\n                  sandbox=\"\"\n                  loading=\"lazy\"\n                  className=\"w-full h-52 bg-white border-3 border-[#17233c]\"\n                />\n              </div>\n              <div className=\"mt-3 flex flex-wrap items-center gap-3\">\n                <button\n                  onClick={() => copySnippet(snippet)}\n                  className=\"bg-white border-3 border-[#17233c] px-3 py-2 font-black focus:outline-none focus:ring-4 focus:ring-[#2878d0]\"\n                >\n                  {copied === snippet.name ? \"✓ Copied!\" : \"Copy snippet\"}\n                </button>\n                {copied === snippet.name && (\n                  <span aria-hidden=\"true\" className=\"inline-block bg-[#ffca8a] border-2 border-[#17233c] px-3 py-1 font-black shadow-[3px_3px_0_#ef5138] motion-safe:animate-bounce\">\n                    ✨ Snippet charm!\n                  </span>\n                )}\n              </div>\n            </article>\n          ))}\n        </div>\n        <p className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {copied ? `${copied} snippet copied to the clipboard.` : copyError}\n        </p>\n        {copyError && <p role=\"alert\" className=\"mt-5 bg-[#ffdfdf] border-3 border-[#8f2618] p-3 font-black\">{copyError}</p>}\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\n",[],[173,251,253],"69a721b0-bfc0-4e3f-82e3-db4cb6ba2509","PoetryLab.tsx","01a02085-194d-7488-9979-d15416f28c17",["D",1787251988821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DownloadButton, Field, LabShell, Paper, Preview, Tags, escapeHTML, pageShell, safeAssetName } from \"../components/LabUI.tsx\";\n\nexport function 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\n",[],[173,251,260],"0197f33b-ebf4-4bb0-a3a3-45ab7a9a0cbd","ModuleHub.tsx","01a02085-194d-7488-9979-cecf687c64f2",["D",1787251988821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Board } from \"../components/LabUI.tsx\";\nimport type { ModuleName } from \"./types.ts\";\n\nexport function ModuleHub({ choose }: { choose: (module: ModuleName) => void }) {\n  const cards = [\n    { id: \"first\", icon: \"🧱\", tag: \"Level 1\", title: \"Make Your First Website\", text: \"Build two pages about something you love.\", color: \"bg-[#ffe17a]\" },\n    { id: \"hypertext\", icon: \"🕸️\", tag: \"Level 1\", title: \"Tell a Hypertext Story\", text: \"Connect scenes and mix words with pictures, sound, and video.\", color: \"bg-[#a9d8ff]\" },\n    { id: \"adventure\", icon: \"🗺️\", tag: \"Level 2\", title: \"Choose Your Own Adventure\", text: \"Write choices that send readers down different paths.\", color: \"bg-[#b9e6bd]\" },\n    { id: \"poetry\", icon: \"✍️\", tag: \"Level 2\", title: \"Make a Web Poem\", text: \"Use spacing, emphasis, pictures, and sound to perform a poem.\", color: \"bg-[#ffb8c2]\" },\n    { id: \"advanced\", icon: \"🛠️\", tag: \"Level 3\", 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: \"📌\", tag: \"Reference\", 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              <div className=\"flex items-center justify-between gap-3\">\n                <span className=\"text-5xl\" aria-hidden=\"true\">{card.icon}</span>\n                <span className=\"bg-[#17233c] text-white border-2 border-white px-3 py-1 text-sm font-black tracking-widest uppercase shadow-[3px_3px_0_#ef5138]\">\n                  {card.tag}\n                </span>\n              </div>\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\n",[],[173,251,267],"c568f4bf-d9f1-4f3a-8e19-a91c39ec631d","HypertextLab.tsx","01a02085-194d-7488-9979-c9498d379d6a",["D",1787251988821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DownloadButton, Field, LabShell, Paper, Preview, Tags, escapeHTML, pageShell, safeAssetName, youtubeEmbedUrl } from \"../components/LabUI.tsx\";\n\nexport function 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\n",[],[173,251,274],"04e8d036-57ba-4b22-af9e-450e310f30f2","AdventureLab.tsx","01a02085-194d-7488-9979-c7a9cb18ad3c",["D",1787251988821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n  DownloadButton,\n  Field,\n  LabShell,\n  Paper,\n  Tags,\n  escapeHTML,\n  pageShell,\n} from \"../components/LabUI.tsx\";\n\ntype Choice = {\n  id: string;\n  text: string;\n  destinationKey: string;\n};\n\ntype Scene = {\n  key: string;\n  id: string;\n  title: string;\n  text: string;\n  picture: string;\n  ending: boolean;\n  endingType: string;\n  choices: Choice[];\n};\n\ntype ViewMode = \"plan\" | \"play\" | \"html\";\n\nconst initialScenes: Scene[] = [\n  {\n    key: \"start\",\n    id: \"beginning\",\n    title: \"The Beginning\",\n    text: \"You reach a fork in the trail just as the sun disappears.\",\n    picture: \"🏔️\",\n    ending: false,\n    endingType: \"\",\n    choices: [\n      { id: \"choice-cave\", text: \"Enter the glowing cave\", destinationKey: \"cave\" },\n      { id: \"choice-tower\", text: \"Climb toward the old tower\", destinationKey: \"tower\" },\n    ],\n  },\n  {\n    key: \"cave\",\n    id: \"glowing-cave\",\n    title: \"The Glowing Cave\",\n    text: \"A friendly dragon guards two tunnels and an enormous shelf of books.\",\n    picture: \"🐉\",\n    ending: false,\n    endingType: \"\",\n    choices: [\n      { id: \"choice-library\", text: \"Ask about the books\", destinationKey: \"library\" },\n      { id: \"choice-woods\", text: \"Take the dark tunnel\", destinationKey: \"woods\" },\n    ],\n  },\n  {\n    key: \"tower\",\n    id: \"old-tower\",\n    title: \"The Old Tower\",\n    text: \"The tower is actually a telescope pointed at a brand-new planet.\",\n    picture: \"🔭\",\n    ending: true,\n    endingType: \"Mystery\",\n    choices: [],\n  },\n  {\n    key: \"library\",\n    id: \"dragon-library\",\n    title: \"The Dragon Library\",\n    text: \"The dragon gives you a library card that opens books into other worlds.\",\n    picture: \"📚\",\n    ending: true,\n    endingType: \"Victory\",\n    choices: [],\n  },\n  {\n    key: \"woods\",\n    id: \"lost-woods\",\n    title: \"Lost in the Woods\",\n    text: \"The tunnel leads outside, but now every tree looks exactly the same.\",\n    picture: \"🌲\",\n    ending: true,\n    endingType: \"Disaster\",\n    choices: [],\n  },\n];\n\nfunction slugify(value: string) {\n  return value\n    .toLowerCase()\n    .trim()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-|-$/g, \"\") || \"new-scene\";\n}\n\nfunction uniqueSceneId(title: string, scenes: Scene[]) {\n  const base = slugify(title);\n  let id = base;\n  let number = 2;\n  while (scenes.some((scene) => scene.id === id)) {\n    id = base + \"-\" + number;\n    number += 1;\n  }\n  return id;\n}\n\nfunction endingIcon(type: string) {\n  if (type === \"Victory\") return \"🏆\";\n  if (type === \"Mystery\") return \"🔮\";\n  if (type === \"Funny\") return \"😂\";\n  if (type === \"Disaster\") return \"💥\";\n  return \"🏁\";\n}\n\nfunction sceneMarkup(scene: Scene, scenes: Scene[]) {\n  const choices = scene.choices\n    .map((choice) => {\n      const destination = scenes.find((item) => item.key === choice.destinationKey);\n      const href = destination ? \"#\" + destination.id : \"#\";\n      return \"        <li><a href=\\\"\" + escapeHTML(href) + \"\\\">\" + escapeHTML(choice.text || \"Continue\") + \"</a></li>\";\n    })\n    .join(\"\\n\");\n\n  const ending = scene.ending\n    ? \"      <p class=\\\"ending\\\">\" + endingIcon(scene.endingType) + \" \" + escapeHTML(scene.endingType || \"The End\") + \"</p>\\n      <a href=\\\"#beginning\\\">Play again</a>\"\n    : \"      <ul class=\\\"choices\\\">\\n\" + choices + \"\\n      </ul>\";\n\n  return \"    <section id=\\\"\" + escapeHTML(scene.id) + \"\\\">\\n\"\n    + \"      <div class=\\\"picture\\\" role=\\\"img\\\" aria-label=\\\"Picture for \" + escapeHTML(scene.title) + \"\\\">\" + escapeHTML(scene.picture) + \"</div>\\n\"\n    + \"      <h2>\" + escapeHTML(scene.title) + \"</h2>\\n\"\n    + \"      <p>\" + escapeHTML(scene.text) + \"</p>\\n\"\n    + ending + \"\\n\"\n    + \"    </section>\";\n}\n\nfunction buildAdventureHTML(title: string, scenes: Scene[]) {\n  const body = \"\\n  <main>\\n\"\n    + \"    <h1>\" + escapeHTML(title) + \"</h1>\\n\"\n    + \"    <p class=\\\"instructions\\\">Choose a path to move through the story.</p>\\n\"\n    + scenes.map((scene) => sceneMarkup(scene, scenes)).join(\"\\n\\n\") + \"\\n\"\n    + \"  </main>\\n  \";\n\n  const css = `\n    html { scroll-behavior: smooth; }\n    section { display: none; min-height: 420px; }\n    section:first-of-type { display: block; }\n    section:target { display: block; }\n    main:has(section:target) section:first-of-type:not(:target) { display: none; }\n    .picture { font-size: 7rem; text-align: center; }\n    .choices { display: grid; gap: 14px; padding: 0; list-style: none; }\n    .choices a { display: block; padding: 16px; background: #ffe17a; border: 3px solid #17233c; text-decoration: none; }\n    .ending { padding: 16px; background: #d7c0f4; border: 3px solid #17233c; font-size: 1.25rem; font-weight: bold; }\n  `;\n\n  return pageShell(title, body, css);\n}\n\nexport function AdventureLab({ onBack }: { onBack: () => void }) {\n  const [title, setTitle] = useState(\"The Mystery of Moonlight Mountain\");\n  const [scenes, setScenes] = useState<Scene[]>(initialScenes);\n  const [selectedKey, setSelectedKey] = useState(\"start\");\n  const [mode, setMode] = useState<ViewMode>(\"plan\");\n  const [playKey, setPlayKey] = useState(\"start\");\n  const [history, setHistory] = useState<string[]>([]);\n  const [discovered, setDiscovered] = useState<string[]>([]);\n  const [htmlView, setHtmlView] = useState<\"scene\" | \"whole\">(\"scene\");\n\n  const selected = scenes.find((scene) => scene.key === selectedKey) || scenes[0];\n  const playing = scenes.find((scene) => scene.key === playKey) || scenes[0];\n  const generatedHTML = useMemo(() => buildAdventureHTML(title, scenes), [title, scenes]);\n\n  const incoming = useMemo(() => {\n    const counts: Record<string, number> = {};\n    scenes.forEach((scene) => { counts[scene.key] = 0; });\n    scenes.forEach((scene) => scene.choices.forEach((choice) => {\n      if (choice.destinationKey in counts) counts[choice.destinationKey] += 1;\n    }));\n    return counts;\n  }, [scenes]);\n\n  const reachable = useMemo(() => {\n    const found = new Set<string>();\n    const queue = [\"start\"];\n    while (queue.length) {\n      const key = queue.shift()!;\n      if (found.has(key)) continue;\n      found.add(key);\n      const scene = scenes.find((item) => item.key === key);\n      scene?.choices.forEach((choice) => {\n        if (choice.destinationKey) queue.push(choice.destinationKey);\n      });\n    }\n    return found;\n  }, [scenes]);\n\n  const checks = useMemo(() => {\n    const messages: string[] = [];\n    const duplicateIds = scenes.filter((scene, index) => scenes.findIndex((item) => item.id === scene.id) !== index);\n    if (!scenes.some((scene) => scene.ending)) messages.push(\"Your adventure needs at least one ending.\");\n    if (duplicateIds.length) messages.push(\"Two scenes have the same HTML id. Give every scene a different id.\");\n    scenes.forEach((scene) => {\n      if (!reachable.has(scene.key)) messages.push(scene.title + \" cannot be reached from the beginning yet.\");\n      if (!scene.ending && scene.choices.length === 0) messages.push(scene.title + \" needs a choice or must be marked as an ending.\");\n      scene.choices.forEach((choice) => {\n        if (!choice.text.trim()) messages.push(scene.title + \" has a choice with no clickable words.\");\n        if (!choice.destinationKey) messages.push(scene.title + \" has a choice that does not lead anywhere.\");\n      });\n    });\n    return messages;\n  }, [scenes, reachable]);\n\n  function updateScene(key: string, values: Partial<Scene>) {\n    setScenes((current) => current.map((scene) => scene.key === key ? { ...scene, ...values } : scene));\n  }\n\n  function addScene(title = \"New Scene\") {\n    const scene: Scene = {\n      key: crypto.randomUUID(),\n      id: uniqueSceneId(title, scenes),\n      title,\n      text: \"What happens in this part of the story?\",\n      picture: \"✨\",\n      ending: false,\n      endingType: \"\",\n      choices: [],\n    };\n    setScenes((current) => [...current, scene]);\n    setSelectedKey(scene.key);\n    return scene;\n  }\n\n  function addChoice() {\n    updateScene(selected.key, {\n      choices: [...selected.choices, { id: crypto.randomUUID(), text: \"\", destinationKey: \"\" }],\n    });\n  }\n\n  function updateChoice(choiceId: string, values: Partial<Choice>) {\n    updateScene(selected.key, {\n      choices: selected.choices.map((choice) => choice.id === choiceId ? { ...choice, ...values } : choice),\n    });\n  }\n\n  function createDestination(choiceId: string) {\n    const scene = addScene(\"New Scene\");\n    setScenes((current) => current.map((item) => item.key === selected.key\n      ? { ...item, choices: item.choices.map((choice) => choice.id === choiceId ? { ...choice, destinationKey: scene.key } : choice) }\n      : item));\n  }\n\n  function deleteScene() {\n    if (selected.key === \"start\") return;\n    setScenes((current) => current\n      .filter((scene) => scene.key !== selected.key)\n      .map((scene) => ({ ...scene, choices: scene.choices.map((choice) => choice.destinationKey === selected.key ? { ...choice, destinationKey: \"\" } : choice) })));\n    setSelectedKey(\"start\");\n  }\n\n  function choose(destinationKey: string) {\n    if (!destinationKey) return;\n    setHistory((current) => [...current, playKey]);\n    setPlayKey(destinationKey);\n    const destination = scenes.find((scene) => scene.key === destinationKey);\n    if (destination?.ending) setDiscovered((current) => current.includes(destinationKey) ? current : [...current, destinationKey]);\n  }\n\n  function restart() {\n    setPlayKey(\"start\");\n    setHistory([]);\n  }\n\n  function goBack() {\n    const previous = history[history.length - 1];\n    if (!previous) return;\n    setPlayKey(previous);\n    setHistory((current) => current.slice(0, -1));\n  }\n\n  function renderMapScene(scene: Scene) {\n    return (\n      <li key={scene.key} className={\"mb-4 border-3 border-[#17233c] p-3 \" + (selected.key === scene.key ? \"bg-[#ffe17a] shadow-[4px_4px_0_#17233c]\" : \"bg-white\")}>\n        <div className=\"flex items-start justify-between gap-3\">\n          <button onClick={() => setSelectedKey(scene.key)} className=\"text-left font-black underline\">\n            <span className=\"text-2xl mr-2\">{scene.picture}</span>{scene.title}\n          </button>\n          {scene.ending\n            ? <span className=\"shrink-0 bg-[#d7c0f4] border-2 border-[#17233c] px-2 py-1 text-xs font-black\">ENDING</span>\n            : <span className=\"shrink-0 text-xs font-bold\">{scene.choices.length} choice{scene.choices.length === 1 ? \"\" : \"s\"}</span>}\n        </div>\n        <p className=\"mt-1 text-xs font-bold text-[#665b4a]\">← {incoming[scene.key] || 0} link{incoming[scene.key] === 1 ? \"\" : \"s\"} arrive here</p>\n        {!scene.ending && scene.choices.length > 0 && (\n          <ul className=\"mt-3 space-y-2 border-t-2 border-[#b6a98e] pt-3\">\n            {scene.choices.map((choice) => (\n              <li key={choice.id} className=\"grid grid-cols-[1fr_auto] gap-2 items-center text-sm\">\n                <span className=\"font-bold\">“{choice.text || \"Untitled choice\"}”</span>\n                {choice.destinationKey ? (\n                  <button\n                    onClick={() => setSelectedKey(choice.destinationKey)}\n                    className=\"bg-[#dff0ff] border-2 border-[#17233c] px-2 py-1 text-right font-black\"\n                    aria-label={(choice.text || \"Untitled choice\") + \" leads to \" + (scenes.find((item) => item.key === choice.destinationKey)?.title || \"missing scene\")}\n                  >\n                    → {scenes.find((item) => item.key === choice.destinationKey)?.title || \"Missing scene\"}\n                  </button>\n                ) : <span className=\"text-[#8f2618] font-black\">→ nowhere yet</span>}\n              </li>\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  return (\n    <LabShell title=\"Choose Your Own Adventure\" subtitle=\"Plan scenes, connect choices with links, and create as many endings as your story needs.\" color=\"bg-[#b9e6bd]\" onBack={onBack}>\n      <div className=\"flex flex-wrap gap-2 mb-5\">\n        <button onClick={() => setMode(\"plan\")} className={\"border-3 border-[#17233c] px-5 py-3 font-black \" + (mode === \"plan\" ? \"bg-[#ffe17a]\" : \"bg-white\")}>🗺️ Plan & Write</button>\n        <button onClick={() => { setMode(\"play\"); restart(); }} className={\"border-3 border-[#17233c] px-5 py-3 font-black \" + (mode === \"play\" ? \"bg-[#ffe17a]\" : \"bg-white\")}>🎮 Play</button>\n        <button onClick={() => setMode(\"html\")} className={\"border-3 border-[#17233c] px-5 py-3 font-black \" + (mode === \"html\" ? \"bg-[#ffe17a]\" : \"bg-white\")}></> HTML</button>\n      </div>\n\n      {mode === \"plan\" && (\n        <div className=\"grid lg:grid-cols-[340px_minmax(0,1fr)] gap-6 items-start\">\n          <aside className=\"space-y-5 lg:sticky lg:top-20\">\n            <Paper pin=\"blue\">\n              <Field label=\"Adventure title\" value={title} onChange={setTitle} />\n              <div className=\"flex justify-between gap-3 items-center\">\n                <h2 className=\"text-2xl font-black\">Story map</h2>\n                <button onClick={() => addScene()} className=\"bg-[#218c5b] text-white border-2 border-[#17233c] px-3 py-2 font-black\">+ Scene</button>\n              </div>\n              <p className=\"text-sm font-bold my-2\">Each scene appears once. Its choice arrows show exactly where readers go next.</p>\n              <ol className=\"mt-4\">\n                {scenes.filter((scene) => reachable.has(scene.key)).map(renderMapScene)}\n              </ol>\n              {scenes.filter((scene) => !reachable.has(scene.key)).length > 0 && (\n                <div className=\"mt-4 border-t-3 border-[#17233c] pt-3\">\n                  <p className=\"font-black\">Unconnected scenes</p>\n                  {scenes.filter((scene) => !reachable.has(scene.key)).map((scene) => (\n                    <button key={scene.key} onClick={() => setSelectedKey(scene.key)} className=\"block underline font-bold\">{scene.picture} {scene.title}</button>\n                  ))}\n                </div>\n              )}\n            </Paper>\n\n            <div className={(checks.length ? \"bg-[#fff0f0]\" : \"bg-[#e7f8ef]\") + \" border-4 border-[#17233c] p-4 shadow-[5px_5px_0_#17233c]\"}>\n              <h2 className=\"text-xl font-black\">Story check</h2>\n              {checks.length ? <ul className=\"list-disc ml-5 mt-2 space-y-2 font-bold\">{checks.map((message) => <li key={message}>{message}</li>)}</ul> : <p className=\"font-bold mt-2\">✓ Every scene is connected and every path can reach an ending.</p>}\n            </div>\n          </aside>\n\n          <Paper>\n            <div className=\"flex flex-wrap justify-between gap-3\">\n              <div>\n                <p className=\"text-sm font-black tracking-widest\">EDITING SCENE</p>\n                <h2 className=\"text-3xl font-black\">{selected.picture} {selected.title}</h2>\n                <p className=\"font-bold text-sm\">Linked to from {incoming[selected.key] || 0} choice{incoming[selected.key] === 1 ? \"\" : \"s\"}</p>\n              </div>\n              {selected.key !== \"start\" && <button onClick={deleteScene} className=\"text-[#8f2618] underline font-black\">Delete scene</button>}\n            </div>\n\n            <Tags items={[\n              { code: '<section id=\"' + selected.id + '\">', text: \"Gives this scene a destination name.\" },\n              { code: '<a href=\"#scene-id\">', text: \"Makes a choice lead to another scene.\" },\n            ]} />\n\n            <Field label=\"Scene title\" value={selected.title} onChange={(value: string) => updateScene(selected.key, { title: value })} />\n            <Field label=\"HTML id\" value={selected.id} onChange={(value: string) => updateScene(selected.key, { id: slugify(value) })} />\n            <Field label=\"Picture or emoji\" value={selected.picture} onChange={(value: string) => updateScene(selected.key, { picture: value })} />\n            <Field label=\"What happens in this scene?\" rows={5} value={selected.text} onChange={(value: string) => updateScene(selected.key, { text: value })} />\n\n            <label className=\"flex gap-3 items-center bg-[#d7c0f4] border-3 border-[#17233c] p-4 font-black cursor-pointer\">\n              <input type=\"checkbox\" checked={selected.ending} onChange={(event) => updateScene(selected.key, { ending: event.target.checked, choices: event.target.checked ? [] : selected.choices })} className=\"w-6 h-6\" />\n              This scene is an ending\n            </label>\n\n            {selected.ending ? (\n              <label className=\"block mt-4 font-black\">Ending type\n                <select value={selected.endingType} onChange={(event) => updateScene(selected.key, { endingType: event.target.value })} className=\"block mt-1 w-full bg-white border-3 border-[#17233c] px-4 py-3\">\n                  {[\"Victory\", \"Mystery\", \"Funny\", \"Disaster\", \"Custom\"].map((type) => <option key={type}>{type}</option>)}\n                </select>\n              </label>\n            ) : (\n              <div className=\"mt-6\">\n                <div className=\"flex justify-between gap-3 items-center mb-3\">\n                  <h3 className=\"text-2xl font-black\">Choices</h3>\n                  <button onClick={addChoice} className=\"bg-[#2878d0] text-white border-2 border-[#17233c] px-3 py-2 font-black\">+ Choice</button>\n                </div>\n                {selected.choices.length === 0 && <p className=\"font-bold bg-[#fff0f0] border-2 border-[#ef5138] p-3\">Add a choice so readers can continue, or mark this scene as an ending.</p>}\n                <div className=\"space-y-4\">\n                  {selected.choices.map((choice, index) => (\n                    <div key={choice.id} className=\"bg-[#dff0ff] border-3 border-[#17233c] p-4\">\n                      <div className=\"flex justify-between gap-3\">\n                        <h4 className=\"font-black\">Choice {index + 1}</h4>\n                        <button onClick={() => updateScene(selected.key, { choices: selected.choices.filter((item) => item.id !== choice.id) })} className=\"underline font-bold\">Remove</button>\n                      </div>\n                      <Field label=\"Clickable words\" value={choice.text} onChange={(value: string) => updateChoice(choice.id, { text: value })} placeholder=\"Enter the glowing cave\" />\n                      <label className=\"block font-black\">This choice leads to\n                        <select value={choice.destinationKey} onChange={(event) => updateChoice(choice.id, { destinationKey: event.target.value })} className=\"block mt-1 w-full bg-white border-3 border-[#17233c] px-4 py-3\">\n                          <option value=\"\">Choose a scene…</option>\n                          {scenes.filter((scene) => scene.key !== selected.key).map((scene) => <option key={scene.key} value={scene.key}>{scene.title}{scene.ending ? \" — Ending\" : \"\"}</option>)}\n                        </select>\n                      </label>\n                      <button onClick={() => createDestination(choice.id)} className=\"mt-3 underline font-black\">Or create a new scene for this choice →</button>\n                      <code className=\"block mt-3 bg-[#263d2d] text-white p-3 overflow-x-auto\"><a href=\"#{escapeHTML(scenes.find((scene) => scene.key === choice.destinationKey)?.id || \"scene-id\")}\">{choice.text || \"Choice words\"}</a></code>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n          </Paper>\n        </div>\n      )}\n\n      {mode === \"play\" && (\n        <div className=\"max-w-3xl mx-auto\">\n          <div className=\"bg-[#17233c] text-white border-[10px] border-[#ef5138] shadow-[9px_9px_0_#17233c]\">\n            <div className=\"px-4 py-2 font-black\">● ● ●   PLAYING YOUR ADVENTURE</div>\n            <main className=\"bg-[#fff8e8] text-[#17233c] min-h-[560px] p-7 md:p-10 text-center\">\n              <div className=\"text-8xl\" role=\"img\" aria-label={playing.title}>{playing.picture}</div>\n              <h2 className=\"text-4xl font-black my-4\">{playing.title}</h2>\n              <p className=\"text-xl mb-8\">{playing.text}</p>\n              {playing.ending ? (\n                <div>\n                  <p className=\"bg-[#d7c0f4] border-3 border-[#17233c] p-5 text-2xl font-black\">{endingIcon(playing.endingType)} {playing.endingType || \"The End\"}</p>\n                  <button onClick={restart} className=\"mt-5 bg-[#ef5138] text-white border-3 border-[#17233c] px-5 py-3 font-black\">Play again</button>\n                </div>\n              ) : (\n                <div className=\"grid gap-4\">\n                  {playing.choices.map((choice) => <button key={choice.id} disabled={!choice.destinationKey} onClick={() => choose(choice.destinationKey)} className=\"bg-[#ffe17a] border-3 border-[#17233c] p-4 font-black text-lg disabled:opacity-40\">{choice.text || \"Untitled choice\"}</button>)}\n                </div>\n              )}\n            </main>\n          </div>\n          <div className=\"flex flex-wrap justify-between gap-3 mt-5\">\n            <button onClick={goBack} disabled={!history.length} className=\"bg-white border-3 border-[#17233c] px-4 py-2 font-black disabled:opacity-40\">← Back one choice</button>\n            <p className=\"font-black\">Endings discovered: {discovered.length} of {scenes.filter((scene) => scene.ending).length}</p>\n            <button onClick={restart} className=\"bg-white border-3 border-[#17233c] px-4 py-2 font-black\">Restart</button>\n          </div>\n        </div>\n      )}\n\n      {mode === \"html\" && (\n        <Paper pin=\"blue\">\n          <div className=\"flex flex-wrap justify-between gap-4 items-center\">\n            <div>\n              <h2 className=\"text-3xl font-black\">See how the links make branches</h2>\n              <p className=\"font-bold\">Compare each choice’s <code>href</code> with the destination scene’s <code>id</code>.</p>\n            </div>\n            <div className=\"flex gap-2\">\n              <button onClick={() => setHtmlView(\"scene\")} className={\"border-2 border-[#17233c] px-3 py-2 font-black \" + (htmlView === \"scene\" ? \"bg-[#ffe17a]\" : \"bg-white\")}>Selected scene</button>\n              <button onClick={() => setHtmlView(\"whole\")} className={\"border-2 border-[#17233c] px-3 py-2 font-black \" + (htmlView === \"whole\" ? \"bg-[#ffe17a]\" : \"bg-white\")}>Whole adventure</button>\n            </div>\n          </div>\n          {htmlView === \"scene\" && (\n            <label className=\"block mt-5 font-black\">Scene to inspect\n              <select value={selectedKey} onChange={(event) => setSelectedKey(event.target.value)} className=\"block mt-1 bg-white border-3 border-[#17233c] px-4 py-3\">\n                {scenes.map((scene) => <option key={scene.key} value={scene.key}>{scene.title}</option>)}\n              </select>\n            </label>\n          )}\n          <pre className=\"mt-5 bg-[#263d2d] text-white border-[10px] border-[#9b6537] p-5 overflow-auto max-h-[680px] text-sm\"><code>{htmlView === \"whole\" ? generatedHTML : sceneMarkup(selected, scenes)}</code></pre>\n          <DownloadButton name=\"my-choose-your-own-adventure.html\" html={generatedHTML} />\n        </Paper>\n      )}\n    </LabShell>\n  );\n}\n",[],[173,251,281],"c3b51474-22b5-4545-acbb-4da5b1ce3477","AdvancedWebsiteLab.tsx","01a02085-194d-7488-9979-c1d84668a37c",["D",1787251988821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport JSZip from \"https://esm.sh/jszip@3.10.1\";\nimport DOMPurify from \"https://esm.sh/dompurify@3.3.0\";\nimport { escapeHTML, Field, LabShell } from \"../components/LabUI.tsx\";\n\ntype AdvancedPage = {\n  id: string;\n  title: string;\n  file: string;\n  content: string;\n};\n\nconst advancedCopyStyles =\n  \".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\nconst sanitizerOptions = {\n  ALLOWED_TAGS: [\"h1\", \"h2\", \"p\", \"strong\", \"b\", \"em\", \"i\", \"a\", \"img\", \"ul\", \"ol\", \"li\", \"blockquote\", \"br\"],\n  ALLOWED_ATTR: [\"href\", \"src\", \"alt\", \"title\"],\n  ALLOW_DATA_ATTR: false,\n  ALLOW_ARIA_ATTR: false,\n};\n\nfunction sanitizeAdvancedHTML(value: string) {\n  return DOMPurify.sanitize(value, sanitizerOptions);\n}\n\nfunction safeWebAddress(value: string) {\n  try {\n    const url = new URL(value.trim());\n    return url.protocol === \"https:\" || url.protocol === \"http:\";\n  } catch {\n    return false;\n  }\n}\n\nfunction makeAdvancedHTML(\n  siteTitle: string,\n  page: AdvancedPage,\n  pages: AdvancedPage[],\n) {\n  const navigation = pages\n    .map((item) =>\n      '      <a href=\"' + item.file + '\">' + escapeHTML(item.title) + \"</a>\"\n    )\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) +\n    \"</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    sanitizeAdvancedHTML(page.content).split(\"\\n\").map((line) => \"    \" + line).join(\"\\n\") + \"\\n\" +\n    \"  </main>\\n\" +\n    \"</body>\\n\" +\n    \"</html>\\n\";\n}\n\nexport function 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.</p>\",\n    },\n    {\n      id: \"about\",\n      title: \"About\",\n      file: \"about.html\",\n      content:\n        \"<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<\"write\" | \"html\" | \"preview\">(\"write\");\n  const activePage = pages.find((page) => page.id === activeId) || pages[0];\n  const editorRef = useRef<HTMLDivElement | null>(null);\n  const selectionRef = useRef<Range | null>(null);\n\n  function updatePage(values: Partial<AdvancedPage>) {\n    setPages((current) =>\n      current.map((page) =>\n        page.id === activePage.id ? { ...page, ...values } : page\n      )\n    );\n  }\n\n  function rememberSelection() {\n    const editor = editorRef.current;\n    const selection = window.getSelection();\n    if (!editor || !selection || selection.rangeCount === 0) return;\n    const range = selection.getRangeAt(0);\n    if (editor.contains(range.commonAncestorContainer)) {\n      selectionRef.current = range.cloneRange();\n    }\n  }\n\n  function restoreSelection() {\n    const selection = window.getSelection();\n    const range = selectionRef.current;\n    if (!selection || !range) return;\n    selection.removeAllRanges();\n    selection.addRange(range);\n  }\n\n  function commitEditor() {\n    const editor = editorRef.current;\n    if (!editor) return;\n    const content = sanitizeAdvancedHTML(editor.innerHTML);\n    setPages((current) =>\n      current.map((page) =>\n        page.id === activePage.id ? { ...page, content } : page\n      )\n    );\n  }\n\n  function switchMode(nextMode: \"write\" | \"html\" | \"preview\") {\n    if (mode === \"write\") commitEditor();\n    setMode(nextMode);\n  }\n\n  function switchPage(pageId: string) {\n    if (mode === \"write\") commitEditor();\n    setActiveId(pageId);\n  }\n\n  function format(command: string, value?: string) {\n    const editor = editorRef.current;\n    if (!editor) return;\n    editor.focus();\n    restoreSelection();\n    document.execCommand(command, false, value);\n    rememberSelection();\n  }\n\n  function insertLink() {\n    const address = prompt(\"Paste an http:// or https:// web address:\");\n    if (!address) return;\n    if (!safeWebAddress(address)) {\n      alert(\"Please use a complete http:// or https:// address.\");\n      return;\n    }\n    format(\"createLink\", address.trim());\n  }\n\n  function insertImage() {\n    const address = prompt(\"Paste an http:// or https:// picture address:\");\n    if (!address) return;\n    if (!safeWebAddress(address)) {\n      alert(\"Please use a complete http:// or https:// picture address.\");\n      return;\n    }\n    format(\"insertImage\", address.trim());\n  }\n\n  function pasteSanitizedHTML(event: any) {\n    event.preventDefault();\n    const clipboard = event.clipboardData;\n    const pastedHTML = clipboard?.getData(\"text/html\");\n    const pastedText = clipboard?.getData(\"text/plain\") || \"\";\n    const safeContent = pastedHTML\n      ? sanitizeAdvancedHTML(pastedHTML)\n      : escapeHTML(pastedText).replaceAll(\"\\n\", \"<br>\");\n    document.execCommand(\"insertHTML\", false, safeContent);\n    rememberSelection();\n  }\n\n  function addPage() {\n    if (mode === \"write\") commitEditor();\n    let number = 2;\n    while (pages.some((page) => page.file === \"page-\" + number + \".html\")) {\n      number += 1;\n    }\n    const page = {\n      id: crypto.randomUUID(),\n      title: \"Page \" + number,\n      file: \"page-\" + number + \".html\",\n      content: \"<h1>Page \" + number +\n        \"</h1><p>Write something wonderful here.</p>\",\n    };\n    setPages((current) => [...current, page]);\n    setActiveId(page.id);\n    setMode(\"write\");\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) =>\n      zip.file(page.file, makeAdvancedHTML(siteTitle, page, pages))\n    );\n    zip.file(\n      \"README.txt\",\n      \"Open index.html in a browser to see your website. Keep all HTML files together so the page links work.\",\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 = \"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\n            label=\"Website name\"\n            value={siteTitle}\n            onChange={setSiteTitle}\n          />\n          <div className=\"flex items-center justify-between gap-2 mb-3\">\n            <h2 className=\"text-xl font-black\">Your pages</h2>\n            <button\n              onClick={addPage}\n              className=\"bg-[#218c5b] text-white border-2 border-[#17233c] px-3 py-2 font-black\"\n            >\n              + Add\n            </button>\n          </div>\n          <div className=\"space-y-2\">\n            {pages.map((page) => (\n              <button\n                key={page.id}\n                onClick={() => switchPage(page.id)}\n                className={\"w-full border-3 border-[#17233c] p-3 text-left font-black \" +\n                  (page.id === activePage.id\n                    ? \"bg-[#ffe17a] shadow-[3px_3px_0_#17233c]\"\n                    : \"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\n            onClick={downloadSite}\n            className=\"w-full mt-5 bg-[#ef5138] text-white border-3 border-[#17233c] p-3 font-black shadow-[4px_4px_0_#17233c]\"\n          >\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\n                onClick={() => switchMode(\"write\")}\n                className={\"px-4 py-2 border-2 border-white font-black \" +\n                  (mode === \"write\" ? \"bg-[#ffe17a] text-[#17233c]\" : \"\")}\n              >\n                ✏️ Write\n              </button>\n              <button\n                onClick={() => switchMode(\"html\")}\n                className={\"px-4 py-2 border-2 border-white font-black \" +\n                  (mode === \"html\" ? \"bg-[#ffe17a] text-[#17233c]\" : \"\")}\n              >\n                </> HTML\n              </button>\n              <button\n                onClick={() => switchMode(\"preview\")}\n                className={\"px-4 py-2 border-2 border-white font-black \" +\n                  (mode === \"preview\" ? \"bg-[#ffe17a] text-[#17233c]\" : \"\")}\n              >\n                👀 Preview\n              </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\n                  label=\"Page name\"\n                  value={activePage.title}\n                  onChange={(title: string) => updatePage({ title })}\n                />\n              </div>\n              {activePage.file !== \"index.html\" && (\n                <button\n                  onClick={deletePage}\n                  className=\"mb-4 px-3 py-2 border-2 border-[#8f2618] text-[#8f2618] font-black\"\n                >\n                  Delete page\n                </button>\n              )}\n            </div>\n\n            {mode === \"write\" ? (\n              <>\n                <div data-editor-toolbar className=\"flex flex-wrap gap-2 bg-[#dff0ff] border-3 border-[#17233c] p-3\">\n                  <button onMouseDown={(event) => event.preventDefault()} onClick={() => format(\"formatBlock\", \"h1\")} className=\"bg-white border-2 border-[#17233c] px-3 py-2 font-black\">Title</button>\n                  <button onMouseDown={(event) => event.preventDefault()} onClick={() => format(\"formatBlock\", \"h2\")} className=\"bg-white border-2 border-[#17233c] px-3 py-2 font-black\">Heading</button>\n                  <button onMouseDown={(event) => event.preventDefault()} onClick={() => format(\"formatBlock\", \"p\")} className=\"bg-white border-2 border-[#17233c] px-3 py-2 font-black\">Paragraph</button>\n                  <button onMouseDown={(event) => event.preventDefault()} onClick={() => format(\"bold\")} className=\"bg-white border-2 border-[#17233c] px-3 py-2 font-black\">Bold</button>\n                  <button onMouseDown={(event) => event.preventDefault()} onClick={() => format(\"italic\")} className=\"bg-white border-2 border-[#17233c] px-3 py-2 italic font-black\">Italic</button>\n                  <button onMouseDown={(event) => event.preventDefault()} onClick={() => format(\"insertUnorderedList\")} className=\"bg-white border-2 border-[#17233c] px-3 py-2 font-black\">• List</button>\n                  <button onMouseDown={(event) => event.preventDefault()} onClick={insertLink} className=\"bg-white border-2 border-[#17233c] px-3 py-2 font-black\">🔗 Web link</button>\n                  <button onMouseDown={(event) => event.preventDefault()} onClick={insertImage} className=\"bg-white border-2 border-[#17233c] px-3 py-2 font-black\">🖼️ Picture</button>\n                  <select\n                    defaultValue=\"\"\n                    onFocus={restoreSelection}\n                    onChange={(event) => {\n                      const page = pages.find((item) => item.id === event.target.value);\n                      if (page) format(\"insertHTML\", '<a href=\"' + page.file + '\">' + escapeHTML(page.title) + \"</a>\");\n                      event.currentTarget.value = \"\";\n                    }}\n                    className=\"bg-white border-2 border-[#17233c] px-3 py-2 font-black\"\n                    aria-label=\"Insert a link to another page\"\n                  >\n                    <option value=\"\" disabled>Link to a page…</option>\n                    {pages.filter((page) => page.id !== activePage.id).map((page) => <option key={page.id} value={page.id}>{page.title}</option>)}\n                  </select>\n                </div>\n                <div\n                  ref={editorRef}\n                  id=\"advanced-editor\"\n                  key={activePage.id}\n                  contentEditable\n                  suppressContentEditableWarning\n                  onInput={rememberSelection}\n                  onPaste={pasteSanitizedHTML}\n                  onKeyUp={rememberSelection}\n                  onMouseUp={rememberSelection}\n                  onBlur={(event) => {\n                    const next = event.relatedTarget;\n                    if (next instanceof Element && next.closest(\"[data-editor-toolbar]\")) return;\n                    commitEditor();\n                  }}\n                  dangerouslySetInnerHTML={{ __html: sanitizeAdvancedHTML(activePage.content) }}\n                  className=\"advanced-copy min-h-[520px] bg-white border-3 border-[#17233c] p-6 focus:outline-none focus:ring-4 focus:ring-[#2878d0]\"\n                />\n                <p className=\"mt-3 text-sm font-bold\">Select some words, then use the toolbar. Changes also appear in HTML mode. Pasted HTML is cleaned before it enters the editor.</p>\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\">\n                      Edit this page’s HTML\n                    </h2>\n                    <p className=\"font-bold\">\n                      This is the HTML inside the page’s{\" \"}\n                      <code><main></code>{\" \"}\n                      area. The website name and navigation are added\n                      automatically.\n                    </p>\n                    <div className=\"flex flex-wrap gap-2 mt-3 text-sm\">\n                      {[\n                        \"<h1>\",\n                        \"<h2>\",\n                        \"<p>\",\n                        \"<strong>\",\n                        \"<em>\",\n                        \"<a>\",\n                        \"<img>\",\n                        \"<ul>\",\n                        \"<li>\",\n                      ].map((tag) => (\n                        <code\n                          key={tag}\n                          className=\"bg-[#17233c] text-white px-2 py-1\"\n                        >\n                          {tag}\n                        </code>\n                      ))}\n                    </div>\n                  </div>\n                  <textarea\n                    value={activePage.content}\n                    onChange={(event) =>\n                      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\">\n                    Changes here appear when you switch to Preview. Scripts, event handlers, embeds, styles, and unsafe addresses are removed before rendering or download.\n                  </p>\n                </div>\n              )\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\n                        key={page.id}\n                        onClick={() => switchPage(page.id)}\n                        className={\"underline font-black \" +\n                          (page.id === activePage.id ? \"text-[#ef5138]\" : \"\")}\n                      >\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\n                        ? pages.find((page) =>\n                          page.file === link.getAttribute(\"href\")\n                        )\n                        : undefined;\n                      if (targetPage) {\n                        event.preventDefault();\n                        setActiveId(targetPage.id);\n                      }\n                    }}\n                    dangerouslySetInnerHTML={{ __html: sanitizeAdvancedHTML(activePage.content) }}\n                  />\n                </div>\n              )}\n          </div>\n        </section>\n      </div>\n    </LabShell>\n  );\n}",[],[173,251,288],"bf9f98ba-bb32-4b3d-80c9-b84852bd43b9",["D",1787251988821],[195,196,197,198,199,200,201],[173,251],"9793f710-b36d-41bc-be2a-7a69aec1c347","Modules.tsx","01a02085-194d-7488-9979-b86c6716d4c1","01a02085-194d-7488-9979-becb4aca1b80",["D",1787251988821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { FirstWebsiteApp } from \"./App.tsx\";\nimport { BackButton } from \"./LabUI.tsx\";\nimport { AdventureLab } from \"../modules/AdventureLab.tsx\";\nimport { AdvancedWebsiteLab } from \"../modules/AdvancedWebsiteLab.tsx\";\nimport { HypertextLab } from \"../modules/HypertextLab.tsx\";\nimport { ModuleHub } from \"../modules/ModuleHub.tsx\";\nimport { PoetryLab } from \"../modules/PoetryLab.tsx\";\nimport { ReferenceLab } from \"../modules/ReferenceLab.tsx\";\nimport type { ModuleName } from \"../modules/types.ts\";\n\nexport function App() {\n  const [module, setModule] = useState<ModuleName>(\"hub\");\n  const goHome = () => setModule(\"hub\");\n\n  if (module === \"hub\") return <ModuleHub choose={setModule} />;\n  if (module === \"first\") {\n    return (\n      <>\n        <BackButton onBack={goHome} />\n        <FirstWebsiteApp />\n      </>\n    );\n  }\n  if (module === \"hypertext\") return <HypertextLab onBack={goHome} />;\n  if (module === \"adventure\") return <AdventureLab onBack={goHome} />;\n  if (module === \"poetry\") return <PoetryLab onBack={goHome} />;\n  if (module === \"advanced\") return <AdvancedWebsiteLab onBack={goHome} />;\n  return <ReferenceLab onBack={goHome} />;\n}\n",[],[173,306,299],"components","2a9acbf1-29ad-491a-bda0-518e04b8b8fd","LabUI.tsx","01a02085-194d-7488-9979-b71785e07fd5",["D",1787251988821],"/** @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\nexport const 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\nexport function 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\nexport function 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\nexport function 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\nexport function 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\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    <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\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",[],[173,306,308],"33e14afb-3d0f-467c-ba2d-ad39244399a1",["D",1787252141119],5,[],[173,306,33],"cc643eb0-1c02-4eae-9fe2-a07e02f40b7a",["D",1787251988821],[191,192,193],[173,306],["D",1787251988821],[190,194,202,203,204,205],[173],["D",1785431448217],["D",1789563036726],{"_104":103,"_111":107},{"_104":103,"_105":-5,"_106":107,"_18":57,"_108":109,"_110":25},{"_13":91,"_32":92,"_44":43,"_93":45,"_94":95,"_96":97,"_98":51,"_99":45,"_100":67,"_101":46,"_102":103},"ctx",{"_84":-5,"_133":364,"_365":366,"_367":368,"_369":25,"_370":25,"_371":25,"_372":61,"_373":-5,"_374":-7,"_375":-7,"_376":65,"_377":25,"_378":25,"_379":-5,"_380":25,"_381":25,"_382":25,"_383":-5},"ENV",{"_335":336,"_337":338,"_339":139,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355,"_356":357,"_358":359,"_360":361,"_362":363},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v7