\" + escapeHTML(choice.text || \"Continue\") + \"

\";\n })\n .join(\"\\n\");\n\n const ending = scene.ending\n ? \"

\" + endingIcon(scene.endingType) + \" \" + escapeHTML(scene.endingType || \"The End\") + \"

\\n Play again\"\n : \"

\\n\" + choices + \"\\n \";\n\n return \"

\\n\"\n + \"

\" + escapeHTML(scene.picture) + \"

\\n\"\n + \"

\" + escapeHTML(scene.title) + \"

\\n\"\n + \"

\" + escapeHTML(scene.text) + \"

\\n\"\n + ending + \"\\n\"\n + \"

\";\n}\n\nfunction buildAdventureHTML(title: string, scenes: Scene[]) {\n const body = \"\\n

\\n\"\n + \"

\" + escapeHTML(title) + \"

\\n\"\n + \"

Choose a path to move through the story.

\\n\"\n + scenes.map((scene) => sceneMarkup(scene, scenes)).join(\"\\n\\n\") + \"\\n\"\n + \"

\\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(initialScenes);\n const [selectedKey, setSelectedKey] = useState(\"start\");\n const [mode, setMode] = useState(\"plan\");\n const [playKey, setPlayKey] = useState(\"start\");\n const [history, setHistory] = useState([]);\n const [discovered, setDiscovered] = useState([]);\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 = {};\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();\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) {\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) {\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

\n \n {scene.ending\n ? ENDING\n : {scene.choices.length} choice{scene.choices.length === 1 ? \"\" : \"s\"}}\n

← {incoming[scene.key] || 0} link{incoming[scene.key] === 1 ? \"\" : \"s\"} arrive here

\n {!scene.ending && scene.choices.length > 0 && (\n

\n “{choice.text || \"Untitled choice\"}”\n {choice.destinationKey ? (\n 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 \n ) : → nowhere yet}\n

\n )}\n

\n );\n }\n\n return (\n \n

\n \n \n \n

\n\n {mode === \"plan\" && (\n

\n \n \n

Story map

\n \n

Each scene appears once. Its choice arrows show exactly where readers go next.

\n {scenes.filter((scene) => reachable.has(scene.key)).map(renderMapScene)}\n \n {scenes.filter((scene) => !reachable.has(scene.key)).length > 0 && (\n

Unconnected scenes

\n {scenes.filter((scene) => !reachable.has(scene.key)).map((scene) => (\n \n ))}\n

\n )}\n \n\n

Story check

\n {checks.length ?

{message}

✓ Every scene is connected and every path can reach an ending.

}\n

\n\n \n

EDITING SCENE

{selected.picture} {selected.title}

Linked to from {incoming[selected.key] || 0} choice{incoming[selected.key] === 1 ? \"\" : \"s\"}

\n {selected.key !== \"start\" && }\n

\n\n ', text: \"Gives this scene a destination name.\" },\n { code: '', text: \"Makes a choice lead to another scene.\" },\n ]} />\n\n updateScene(selected.key, { title: value })} />\n updateScene(selected.key, { id: slugify(value) })} />\n updateScene(selected.key, { picture: value })} />\n updateScene(selected.key, { text: value })} />\n\n \n 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 \n\n {selected.ending ? (\n Ending type\n \n \n ) : (\n

Choices

\n \n

\n {selected.choices.length === 0 &&

Add a choice so readers can continue, or mark this scene as an ending.

}\n

\n {selected.choices.map((choice, index) => (\n

Choice {index + 1}

\n \n

\n updateChoice(choice.id, { text: value })} placeholder=\"Enter the glowing cave\" />\n This choice leads to\n \n \n \n

<a href=\"#{escapeHTML(scenes.find((scene) => scene.key === choice.destinationKey)?.id || \"scene-id\")}\">{choice.text || \"Choice words\"}</a>

\n ))}\n

\n )}\n \n

\n )}\n\n {mode === \"play\" && (\n

● ● ● PLAYING YOUR ADVENTURE

{playing.picture}

{playing.title}

{playing.text}

\n {playing.ending ? (\n

{endingIcon(playing.endingType)} {playing.endingType || \"The End\"}

\n \n

\n ) : (\n

\n {playing.choices.map((choice) => )}\n

\n )}\n

\n \n

Endings discovered: {discovered.length} of {scenes.filter((scene) => scene.ending).length}

\n \n

\n )}\n\n {mode === \"html\" && (\n \n

See how the links make branches

Compare each choice’s href with the destination scene’s id.

\n \n \n

\n {htmlView === \"scene\" && (\n Scene to inspect\n \n \n )}\n

{htmlView === \"whole\" ? generatedHTML : sceneMarkup(selected, scenes)}

\n \n \n )}\n \n );\n}\n","deleted","label",[81,82,62],"frontend","modules",{"_36":102,"_13":81,"_63":103,"_65":-5,"_67":68,"_69":70,"_71":72,"_38":104,"_17":32,"_74":105,"_76":-5,"_78":54,"_79":-5,"_92":106,"_18":107},{"_36":95,"_13":96,"_63":97,"_65":-5,"_67":68,"_69":70,"_71":72,"_38":98,"_17":32,"_74":24,"_76":99,"_78":54,"_79":-5,"_92":100,"_18":101},{"_36":86,"_13":87,"_63":88,"_65":-5,"_67":68,"_69":70,"_71":72,"_38":89,"_17":32,"_74":90,"_76":91,"_78":54,"_79":-5,"_92":93,"_18":94},"9f2fa539-7f6a-435b-bd55-d127909c7501","index.ts","01a02085-194d-7488-9979-f6554acbcbf8",["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(`\n\n\n \n \n YouTube video\n \n\n\n \n\n`);\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","children",[],[87],"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",[],[96],"b7df42da-c0fb-4e16-8edf-f1416d6a7509","01a02085-194d-7488-9979-ed61e32b72d7",["D",1787251988821],"directory",[108,109,110,111,112,113],[81],{"_36":199,"_13":200,"_63":201,"_65":103,"_67":68,"_69":70,"_71":72,"_38":202,"_17":32,"_74":105,"_76":-5,"_78":54,"_79":-5,"_92":203,"_18":204},{"_36":143,"_13":82,"_63":66,"_65":103,"_67":68,"_69":70,"_71":72,"_38":144,"_17":32,"_74":105,"_76":-5,"_78":54,"_79":-5,"_92":145,"_18":146},{"_36":136,"_13":137,"_63":138,"_65":103,"_67":68,"_69":70,"_71":72,"_38":139,"_17":32,"_74":24,"_76":140,"_78":54,"_79":-5,"_92":141,"_18":142},{"_36":129,"_13":130,"_63":131,"_65":103,"_67":68,"_69":70,"_71":72,"_38":132,"_17":32,"_74":75,"_76":133,"_78":54,"_79":-5,"_92":134,"_18":135},{"_36":122,"_13":123,"_63":124,"_65":103,"_67":68,"_69":70,"_71":72,"_38":125,"_17":32,"_74":75,"_76":126,"_78":54,"_79":-5,"_92":127,"_18":128},{"_36":114,"_13":115,"_63":116,"_65":103,"_67":68,"_69":117,"_71":72,"_38":118,"_17":32,"_74":75,"_76":119,"_78":54,"_79":-5,"_92":120,"_18":121},"d324095d-8946-4dc1-8c06-4ca3b9d59344","storage.ts","8820711a-9cc8-11f1-a3e8-1607ee4eb77e",2,["D",1787252051629],"export type SavedFirstWebsite = {\n id: string;\n name: string;\n updatedAt: number;\n step: number;\n project: Record;\n};\n\nconst DB_NAME = \"firstpage\";\nconst DB_VERSION = 1;\nconst STORE = \"projects\";\n\nfunction openDatabase(): Promise {\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(request: IDBRequest): Promise {\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 {\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 {\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 {\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 {\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",[],[81,115],"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(\"\")}\n \n \n \n \n \n HTML Writing Lab\n \n \n \n \n `);\n\n return (\n

● ● ● LIVE WEBPAGE