create-tinyjoin 0.0.5 → 0.1.0

package/README.md

@@ -1,20 +1,36 @@
 # create-tinyjoin
 
-Scaffold a small local todo app with TinyJoin, TypeScript, and Vite:
+Scaffold a small local todo app with TinyJoin and Vite:
 
 ```sh
 npm create tinyjoin@latest
 ```
 
 The generated project is ready to run at its root and needs no database server,
-account, or credentials. Choose whether its todos should remain after reloads or
-start fresh each time.
+account, or credentials. Choose TypeScript or JavaScript, and whether its todos
+should remain after reloads or start fresh each time.
+
+Your app should look something like this:
+
+![Todo App](screenshots/todos.png)
+
+- Task list with add/complete/delete
+- Single TinyJoin database with one `todos` table
+- Demonstrates basic CRUD operations in SQL
+- Automatic multi-tab access for saved data
+- Offline production app loading after the first online visit
+- Perfect starter example
+
+It shares its markup and styling with the equivalent
+[create-tinybase](https://github.com/tinyplex/create-tinybase) vanilla
+TypeScript starter, with the TinyJoin accent color and system fonts.
 
 For agents and CI, every option can be supplied non-interactively:
 
 ```sh
 npm create tinyjoin@latest -- --non-interactive \
   --projectName my-tinyjoin-app \
+  --language typescript \
   --storage opfs \
   --installAndRun false
 ```
@@ -25,15 +41,65 @@ usage.
 `npm run build` assembles the publishable `create-tinyjoin` package under
 `dist/`.
 
+## Generated structure
+
+The generated project is a single Vite application at its root (`.ts` below
+becomes `.js` when JavaScript is chosen):
+
+- `index.html` loads the app and defines its theme variables.
+- `vite.config.ts` enables production offline loading through `tinyjoinOffline()`.
+- `src/index.ts` bootstraps the app on load.
+- `src/app.ts` builds the app shell, showing a spinner until the database opens.
+- `src/database.ts` opens the database, defines the `todos` table, and adds the
+  starter todos on the first visit.
+- `src/todoInput.ts`, `src/todoList.ts`, and `src/todoItem.ts` are the todo
+  interface, each with a colocated stylesheet.
+- `src/topBar.ts`, `src/title.ts`, `src/info.ts`, `src/loading.ts`,
+  `src/button.ts`, and `src/input.ts` are the shared interface pieces.
+
+## TypeScript and JavaScript
+
+The templates are written once, in TypeScript. Choosing JavaScript strips their
+types with `ts-blank-space` and renames the outputs to `.js`, exactly as
+`create-tinybase` does: `getFiles` marks each `.ts` template `transpile` when
+the JavaScript language is chosen, and `tinycreate` blanks the types during
+post-processing. A JavaScript project also drops `tsconfig.json`, the
+`typescript` devDependency, and the `tsc --noEmit` step from its build script.
+
+## Offline builds
+
+Generated applications use `tinyjoinOffline()` from `tinyjoin/vite`. The
+production build includes the application and complete database runtime in
+its offline copy, including files loaded only when persistent storage opens.
+There are no remote font requests. Development remains a normal Vite session;
+use `npm run build` and `npm run preview` to test offline behavior.
+
+New application versions wait for open tabs to close before activating. This
+keeps existing pages on their matching build; it does not migrate database
+schemas. Applications with their own service worker can use the plugin's
+manifest mode. Offline loading and saved local data do not synchronize with
+a server or another device.
+
 ## Development
 
 ```sh
+npm run spell           # cspell over the sources, templates, and docs
 npm run typecheck       # generator and test TypeScript
-npm test                # CLI, template, and package-boundary tests
+npm test                # CLI, template, snapshot, and package-boundary tests
 npm run test:generated  # generated apps against published TinyJoin
 npm run test:e2e        # real generated-app behavior in Chromium
 ```
 
+`npm run publishPackage` runs all of the above before publishing. Add project
+vocabulary to `cspell.json` rather than disabling the check.
+
+`npm test` compares every generated file, for both languages and both storage
+modes, against the snapshots in `test/__snapshots__`. Run
+`npx vitest run test/cli.test.ts -u` to accept intentional template changes.
+`npm run test:generated` installs and builds all four combinations, and
+`npm run test:e2e` then drives the two saved apps in Chromium and tests offline
+production loading for all four combinations.
+
 Run the local generator from this repository's parent directory with:
 
 ```sh

package/cli.js

@@ -1,15 +1,15 @@
 #!/usr/bin/env node
-import{existsSync as c}from"node:fs";import{dirname as l,join as r}from"node:path";import{fileURLToPath as p}from"node:url";import{createCLI as u,detectPackageManager as m}from"tinycreate";const g=r(l(p(import.meta.url)),"templates"),s=process.argv.slice(2),i=[{title:"Save data across reloads (recommended)",value:"opfs"},{title:"Start fresh each time",value:"memory"}],d={command:"npm create tinyjoin@latest --",nonInteractiveFlag:"--non-interactive",options:{projectName:{type:"string",required:!0},storage:{values:i.map(({value:e})=>e),required:!0,default:"opfs"},installAndRun:{values:[!0,!1],required:!0,recommendedForAgents:!1}}};(s.includes("--help")||s.includes("-h"))&&(console.log(`create-tinyjoin
+import{existsSync as g}from"node:fs";import{dirname as m,join as a}from"node:path";import{fileURLToPath as d}from"node:url";import{createCLI as f,detectPackageManager as y}from"tinycreate";const h=a(m(d(import.meta.url)),"templates"),r=process.argv.slice(2),c=[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],p=[{title:"Save data across reloads (recommended)",value:"opfs"},{title:"Start fresh each time",value:"memory"}],v={command:"npm create tinyjoin@latest --",nonInteractiveFlag:"--non-interactive",options:{projectName:{type:"string",required:!0},language:{values:c.map(({value:t})=>t),required:!0,default:"typescript"},storage:{values:p.map(({value:t})=>t),required:!0,default:"opfs"},installAndRun:{values:[!0,!1],required:!0,recommendedForAgents:!1}}};(r.includes("--help")||r.includes("-h"))&&(console.log(`create-tinyjoin
 
 Interactively scaffold a TinyJoin application:
   npm create tinyjoin@latest
 
 Run non-interactively:
   npm create tinyjoin@latest -- --non-interactive \\
-    --projectName my-tinyjoin-app --storage opfs \\
+    --projectName my-tinyjoin-app --language typescript --storage opfs \\
     --installAndRun false
 
 Agent and automation commands:
   --list-options  Print the current option catalog as JSON
-  --help          Show this help`),process.exit(0)),s.includes("--list-options")&&(console.log(JSON.stringify(d,null,2)),process.exit(0));const f={welcomeMessage:`\u{1F389} Welcome to TinyJoin!
-`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinyjoin-app",validate:a},{type:"select",name:"storage",message:"Todo data:",choices:[...i],initial:0},{type:"confirm",name:"installAndRun",message:"Install dependencies and start the app?",initial:!0}],createContext:e=>{const t=String(e.projectName??"").trim(),n=a(t);if(n!==!0)throw new TypeError(n);const o=h(e.storage===0?"opfs":e.storage??"opfs","storage",["opfs","memory"]);return{projectName:t,installAndRun:e.installAndRun===!0||e.installAndRun==="true",storage:o,usesOpfs:o==="opfs",storageName:y(t),tinyjoinDependency:process.env.CREATE_TINYJOIN_DEPENDENCY??"^0.0.5"}},getFiles:()=>[{template:"README.md.hbs",output:"README.md",prettier:!0},{template:"AGENTS.md.hbs",output:"AGENTS.md",prettier:!0},{template:"client/package.json.hbs",output:"package.json",prettier:!0},{template:"client/.gitignore.hbs",output:".gitignore"},{template:"client/index.html.hbs",output:"index.html",prettier:!0},{template:"client/tsconfig.json.hbs",output:"tsconfig.json",prettier:!0},{template:"client/src/database.ts.hbs",output:"src/database.ts",prettier:!0},{template:"client/src/main.ts.hbs",output:"src/main.ts",prettier:!0},{template:"client/src/style.css.hbs",output:"src/style.css",prettier:!0}],templateRoot:g,installCommand:"{pm} install",devCommand:"{pm} run dev",workingDirectory:".",onSuccess:e=>{const t=m();console.log("Next steps:"),console.log(`  cd ${e}`),console.log(`  ${t} install`),console.log(`  ${t} run dev`)}};u(f).catch(e=>{console.error(e instanceof Error?e.message:String(e)),process.exit(1)});function a(e){return!/^[a-z0-9][a-z0-9._-]*$/i.test(e)||e==="."||e===".."?"Use letters, numbers, dots, dashes, or underscores without path separators.":c(r(process.cwd(),e))?`Directory "${e}" already exists. Choose a different name.`:!0}function h(e,t,n){const o=typeof e=="string"?e:"";if(!n.includes(o))throw new TypeError(`${j(t)} must be one of: ${n.join(", ")}.`);return o}function y(e){const t=e.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")||"app",n="tinyjoin-",o="-db-v1";return`${n}${t.slice(0,64-n.length-o.length)}${o}`}function j(e){return`${e.charAt(0).toUpperCase()}${e.slice(1)}`}
+  --help          Show this help`),process.exit(0)),r.includes("--list-options")&&(console.log(JSON.stringify(v,null,2)),process.exit(0));const j={welcomeMessage:`\u{1F389} Welcome to TinyJoin!
+`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinyjoin-app",validate:l},{type:"select",name:"language",message:"Language:",choices:[...c],initial:0},{type:"select",name:"storage",message:"Todo data:",choices:[...p],initial:0},{type:"confirm",name:"installAndRun",message:"Install dependencies and start the app?",initial:!0}],createContext:t=>{const n=String(t.projectName??"").trim(),o=l(n);if(o!==!0)throw new TypeError(o);const e=u(t.language===0?"typescript":t.language??"typescript","language",["typescript","javascript"]),s=u(t.storage===0?"opfs":t.storage??"opfs","storage",["opfs","memory"]),i=e==="typescript";return{projectName:n,installAndRun:t.installAndRun===!0||t.installAndRun==="true",language:e,typescript:i,javascript:!i,scriptExt:i?"ts":"js",ext:i?"ts":"js",storage:s,usesOpfs:s==="opfs",storageName:b(n),tinyjoinDependency:process.env.CREATE_TINYJOIN_DEPENDENCY??"^0.1.0"}},getFiles:t=>{const{ext:n,typescript:o}=t,e=i=>({template:`client/src/${i}.ts.hbs`,output:`src/${i}.${n}`,prettier:!0,transpile:!o}),s=i=>({template:`client/src/${i}.css.hbs`,output:`src/${i}.css`,prettier:!0});return[{template:"README.md.hbs",output:"README.md",prettier:!0},{template:"AGENTS.md.hbs",output:"AGENTS.md",prettier:!0},{template:"client/package.json.hbs",output:"package.json",prettier:!0},{template:"client/.gitignore.hbs",output:".gitignore"},{template:"client/index.html.hbs",output:"index.html",prettier:!0},{template:"client/vite.config.ts.hbs",output:`vite.config.${n}`,prettier:!0,transpile:!o},...o?[{template:"client/tsconfig.json.hbs",output:"tsconfig.json",prettier:!0}]:[],{template:"client/public/favicon.svg",output:"public/favicon.svg"},o?{template:"client/public/ts.svg",output:"public/ts.svg"}:{template:"client/public/js.svg",output:"public/js.svg"},e("index"),e("app"),e("topBar"),s("topBar"),e("title"),s("title"),e("info"),s("info"),e("loading"),s("loading"),e("error"),s("error"),e("button"),s("button"),e("input"),s("input"),e("database"),e("todoInput"),s("todoInput"),e("todoList"),s("todoList"),e("todoItem"),s("todoItem")]},templateRoot:h,installCommand:"{pm} install",devCommand:"{pm} run dev",workingDirectory:".",onSuccess:t=>{const n=y();console.log("Next steps:"),console.log(`  cd ${t}`),console.log(`  ${n} install`),console.log(`  ${n} run dev`)}};f(j).catch(t=>{console.error(t instanceof Error?t.message:String(t)),process.exit(1)});function l(t){return!/^[a-z0-9][a-z0-9._-]*$/i.test(t)||t==="."||t===".."?"Use letters, numbers, dots, dashes, or underscores without path separators.":g(a(process.cwd(),t))?`Directory "${t}" already exists. Choose a different name.`:!0}function u(t,n,o){const e=typeof t=="string"?t:"";if(!o.includes(e))throw new TypeError(`${x(n)} must be one of: ${o.join(", ")}.`);return e}function b(t){const n=t.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")||"app",o="tinyjoin-",e="-db-v2";return`${o}${n.slice(0,64-o.length-e.length)}${e}`}function x(t){return`${t.charAt(0).toUpperCase()}${t.slice(1)}`}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tinyjoin",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "author": "jamesgpearce",
   "repository": {
     "type": "git",

package/templates/AGENTS.md.hbs

@@ -1,15 +1,70 @@
-# {{projectName}}
+# TinyJoin Application Guide
 
-This is a generated TinyJoin TypeScript/Vite starter.
+This project was generated by `create-tinyjoin`. Preserve its working data
+lifecycle while adapting the application to the user's requirements.
 
-- Run the app from this directory with `npm run dev`.
-- Keep database setup in `src/database.ts` and application UI in `src/main.ts`.
-- Keep schema setup safe to run again when the app reloads.
-- Use TinyJoin's `sql` tagged template or parameter arrays for application
-  values. Do not concatenate user input into SQL.
-- Generate stable row identifiers in application code.
-- Keep the database client open while the app is running and close it during
-  page teardown.
-- Validate changes with `npm run build`.
+## Selected Architecture
 
-Current TinyJoin documentation: https://tinyjoin.org
+- **Application**: todo list
+- **Language**: {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}
+- **UI**: Vanilla JS
+- **Data**: TinyJoin relational database in the browser
+- **Persistence**: {{#if usesOpfs}}saved in this browser across reloads{{else}}kept for the current visit only{{/if}}
+
+The database client is opened once in `src/database.{{ext}}` and shared through
+the `databaseReady` promise. Reuse it within the application.{{#if usesOpfs}}
+Tabs share the saved database automatically; keep its name stable.{{/if}}
+
+One atomic script creates the schema and inserts starter rows. Only
+`TABLE_ALREADY_EXISTS` is ignored, so concurrent first visits cannot seed
+twice and an existing empty table stays empty. Preserve this behavior.
+
+Await writes, preserve drafts on failure, and keep errors visible. Retry at
+startup reloads the page to create a fresh client. Do not automatically replay
+a failed write: a storage failure can leave its commit outcome uncertain.
+If the browser restores a cached page after teardown, the `pageshow` handler
+reloads it so the app creates a fresh client instead of reusing a closed one.
+
+## Key Files
+
+- `README.md` explains how to run the generated project.
+- `src/database.{{ext}}` opens the database and defines the `todos` table.
+- `src/app.{{ext}}` contains the main application UI.
+- `src/todoList.{{ext}}` reads the `todos` table and subscribes to its changes.
+- `vite.config.{{ext}}` enables offline production builds with `tinyjoinOffline()`.
+
+The production app caches its complete build after an online visit. Keep the
+offline plugin configured when changing build output. It waits for open tabs
+to close before activating an update; do not force updates into running tabs.
+For an existing service worker, use the plugin's manifest mode and integrate
+its assets there instead of adding a competing registration. Offline caching
+does not migrate a saved schema or synchronize data to a server.
+
+## Working Method
+
+1. Read `README.md` and `src/database.{{ext}}` before making changes.
+2. Keep application data in TinyJoin rather than duplicating it in UI state.
+3. Use `$1` parameter arrays for application
+   values. Do not concatenate user input into SQL.
+4. Generate stable row identifiers in application code.
+5. Keep the schema safe to run again when the app reloads.
+6. Keep the database client open while the app is running and close it during
+   page teardown.
+7. Run the build after edits.
+
+## Verification
+
+Run:
+
+```sh
+npm run build
+```
+
+Change data in the running app, reload the page, and confirm the change
+{{#if usesOpfs}}remains{{else}}resets, as this starter was generated without persistence{{/if}}.
+For offline verification, use `npm run preview`, wait for the browser's offline
+copy to finish installing, close the page, disconnect the network, and reopen
+the same URL. Verify loading, edits, and reloads; the development server does
+not install offline support.
+
+Current TinyJoin documentation: https://tinyjoin.org/llms.txt

package/templates/README.md.hbs

@@ -1,29 +1,90 @@
 # {{projectName}}
 
-A small local todo app built with TinyJoin, TypeScript, and Vite.
+A TinyJoin todo app built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}} and Vanilla JS.
 
-## Start it
+## Getting Started
 
-```sh
+To start the web client with Vite, run the following commands:
+
+```bash
 npm install
 npm run dev
 ```
 
-Your app will open at the address Vite prints in the terminal. It needs no
-database server, account, or credentials.
+PNPM, Yarn, and Bun should also work. Your app will be available at
+`http://localhost:5173`, or whichever port Vite specifies in the console. It
+needs no database server, account, or credentials.
+
+After that, start hacking!
+
+## Structure
+
+This project is a single web application, built with Vite and
+{{#if typescript}}TypeScript{{else}}JavaScript{{/if}}.
+
+### Key Files
+
+- **`index.html`**: The main HTML file that loads your app
+- **`vite.config.{{ext}}`**: Production build and offline support
+- **`src/index.{{ext}}`**: Entry point that bootstraps the app
+- **`src/app.{{ext}}`**: Main application logic
+- **`src/database.{{ext}}`**: TinyJoin database and `todos` table setup
+- **`src/todoInput.{{ext}}`**, **`src/todoList.{{ext}}`**,
+  **`src/todoItem.{{ext}}`**: The todo interface
+- **`src/topBar.{{ext}}`**, **`src/button.{{ext}}`**, **`src/input.{{ext}}`**,
+  **`src/loading.{{ext}}`**: Shared interface pieces
+
+#### How It Works
+
+The app uses **TinyJoin** to keep application state in a small relational
+database that runs entirely in the browser. The interface reads rows with
+ordinary SQL queries, writes them with parameterized statements, and subscribes
+to the `todos` table so that every change re-renders the list.
 
 {{#if usesOpfs}}
-Todos are saved locally in this browser and remain after a reload.
+**Persistence** is enabled. Your data is automatically saved and restored when
+you reload the page. Tabs share the same saved database, and changes appear
+in every open tab.
+
+The browser can clear or evict saved data, so keep a separate copy of anything
+irreplaceable. Deleting all todos leaves the list empty after a reload; the
+example rows are added only when the table is first created.
 {{else}}
-Todos are kept for the current visit and start fresh after a reload.
+**Persistence** is not enabled. Your todos are kept for the current visit and
+start fresh after a reload.
 {{/if}}
 
-## Start editing
+Startup failures replace the loading spinner with a message and **Retry**.
+Failed changes show an error; a failed addition keeps the text you entered.
+Writes are not automatically retried.
+
+## Offline Use
+
+Build and preview the app to try offline support:
+
+```sh
+npm run build
+npm run preview
+```
+
+The production app downloads a local copy on its first online visit. Once
+that download finishes, you can close it, reopen it without a connection,
+and keep using your todos.{{#unless usesOpfs}} Your selected data mode still
+starts with a fresh todo list each visit.{{/unless}} The development server
+does not install an offline copy.
+
+Deploy the contents of `dist/` to an HTTPS host. Offline loading is set up by
+`tinyjoinOffline()` in `vite.config.{{ext}}`; no extra application code is needed.
+New versions wait until all open tabs close before taking over, so a working
+tab keeps its matching application files. A new deployment does not migrate
+saved database schemas. Offline use does not synchronize data with a server
+or another device.
 
-- `src/database.ts` opens the database and defines the `todos` table.
-- `src/main.ts` contains the todo UI and its queries.
-- `src/style.css` contains the app styles.
+If you later add your own service worker, use the plugin's manifest mode to
+integrate its cached files with that worker instead of registering two for
+the same application. See the [offline guide](https://tinyjoin.org/guides/offline/).
 
-Run `npm run build` to check the TypeScript and create a production build.
+## Learn More
 
-Learn more at [tinyjoin.org](https://tinyjoin.org).
+- [TinyJoin Documentation](https://tinyjoin.org)
+- [TinyJoin Demos](https://tinyjoin.org/demos/)

package/templates/client/index.html.hbs

@@ -1,51 +1,54 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      name="description"
-      content="A small local todo app built with TinyJoin"
-    />
-    <title>{{projectName}}</title>
-  </head>
-  <body>
-    <main>
-      <header>
-        <p class="eyebrow">TinyJoin starter</p>
-        <h1>Todos</h1>
-        <p class="intro">
-          {{#if usesOpfs}}Your list is saved locally in this browser.{{else}}Your list starts fresh each time you load the app.{{/if}}
-        </p>
-      </header>
 
-      <form data-testid="todo-form">
-        <label for="todo-title">What needs doing?</label>
-        <div class="composer">
-          <input
-            id="todo-title"
-            data-testid="todo-title"
-            name="title"
-            type="text"
-            maxlength="120"
-            placeholder="Add a todo"
-            autocomplete="off"
-            required
-          />
-          <button type="submit">Add</button>
-        </div>
-      </form>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <title>TinyJoin Todos</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
 
-      <p class="status" data-testid="status" role="status" aria-live="polite">
-        Opening your todos…
-      </p>
-      <p class="error" data-testid="error" role="alert" hidden></p>
-      <ul data-testid="todos" aria-live="polite" aria-busy="true"></ul>
+    body {
+      user-select: none;
+      margin: 0;
+      padding: 0;
+      font-family: system-ui, sans-serif;
+    }
+
+    #root {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+
+    #app {
+      max-width: 60rem;
+      width: 100%;
+      margin: 0 auto;
+      padding: 2rem 1.5rem;
+    }
+
+    body {
+      --hue: 270;
+      --fg: oklch(85% 0.01 var(--hue));
+      --fg2: oklch(60% 0.01 var(--hue));
+      --bg: oklch(20% 0.01 var(--hue));
+      --bg2: oklch(25% 0.01 var(--hue));
+      --border: oklch(30% 0.01 var(--hue));
+      --bg-header: oklch(30% 0.008 var(--hue) / 0.5);
+      --accent: #7c3aed;
+      color: var(--fg);
+      background: var(--bg);
+    }
+  </style>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/index.{{ext}}"></script>
+</body>
 
-      <footer>
-        Built with <a href="https://tinyjoin.org">TinyJoin</a>.
-      </footer>
-    </main>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
 </html>

package/templates/client/package.json.hbs

@@ -8,14 +8,16 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc --noEmit && vite build",
+    "build": "{{#if typescript}}tsc --noEmit && {{/if}}vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "tinyjoin": "{{tinyjoinDependency}}"
   },
   "devDependencies": {
+{{#if typescript}}
     "typescript": "^7.0.2",
-    "vite": "^8.2.1"
+{{/if}}
+    "vite": "^8.3.0"
   }
 }

package/templates/client/public/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 1200 1200" stroke-linejoin="round" stroke="#fff" stroke-width="50">
+  <path d="M0 150a500 150 0 00223 125 100 100 0 0179 84l48 291v250a100 100 0 00100 100h100a100 100 0 00100-100V650l48-291a100 100 0 0179-84 500 150 0 00223-125A500 150 0 000 150z" fill="#7C3AED" />
+  <path
+    d="M0 150a500 150 0 00223 125 100 100 0 0179 84 700 700 0 01-12.5 160A500 150 0 010 383zm0 233a500 150 0 00289.5 136A700 700 0 01206 738.5 500 150 0 010 617zm0 234a500 150 0 00206 121.5 700 700 0 01-81 81.5 500 500 0 00225-90v170a100 100 0 00100 100A500 150 0 010 850zm1000-467a500 150 0 01-223 125 100 100 0 00-79 84 700 700 0 0012.5 160A500 150 0 001000 383zm0 233a500 150 0 01-289.5 136A700 700 0 00794 738.5 500 150 0 001000 617zm0 234a500 150 0 01-206 121.5 700 700 0 0081 81.5 500 500 0 01-225-90v170a100 100 0 01-100 100 500 150 0 00450-150z" />
+  <path d="M350 730a500 500 0 01-225 90 700 700 0 00177-461l48 291zm300 0a500 500 0 00225 90 700 700 0 01-177-461l-48 291z" fill="#fff" />
+</svg>

package/templates/client/public/js.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
+  <rect width="630" height="630" fill="#f7df1e" />
+  <path
+    d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z" />
+</svg>

package/templates/client/public/ts.svg

@@ -0,0 +1,6 @@
+<svg fill="none" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
+  <rect fill="#3178c6" height="512" width="512" />
+  <path clip-rule="evenodd"
+    d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z"
+    fill="#fff" fill-rule="evenodd" />
+</svg>

package/templates/client/src/app.ts.hbs

@@ -0,0 +1,37 @@
+import {databaseReady} from './database';
+import {createTopBar} from './topBar';
+import {showLoading, hideLoading} from './loading';
+import {createTodoInput} from './todoInput';
+import {createTodoList} from './todoList';
+import {createButton} from './button';
+import {createError, showError} from './error';
+
+export const app = async (root: HTMLElement) => {
+  const appElement = document.createElement('div');
+  appElement.id = 'app';
+  root.replaceChildren(createTopBar(), appElement);
+
+  // Show loading spinner
+  const loadingDiv = showLoading(appElement);
+
+  try {
+    const database = await databaseReady;
+    const todoInputContainer = createTodoInput(database);
+    appElement.appendChild(todoInputContainer);
+
+    const input = todoInputContainer.querySelector('input')!;
+    input.focus();
+
+    appElement.appendChild(createTodoList(database));
+  } catch (error) {
+    const message = createError();
+    message.id = 'startupError';
+    showError(message, error, 'Could not open your todos.');
+    appElement.append(
+      message,
+      createButton('Retry', () => location.reload(), 'primary'),
+    );
+  } finally {
+    hideLoading(loadingDiv);
+  }
+};

package/templates/client/src/button.css.hbs

@@ -0,0 +1,30 @@
+button {
+  padding: 0.5rem 1rem;
+  border: 1px solid #666;
+  border-radius: 0.25rem;
+  background: #222;
+  color: #fff;
+  font-family: inherit;
+  font-weight: 800;
+  cursor: pointer;
+  margin: 0.5rem;
+}
+
+button:hover {
+  border-color: #7c3aed;
+}
+
+button:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+
+button.primary {
+  background: #7c3aed;
+  border: none;
+  padding: 0.75rem 1.5rem;
+}
+
+button.primary:hover {
+  background: #6d28d9;
+}

package/templates/client/src/button.ts.hbs

@@ -0,0 +1,19 @@
+import './button.css';
+
+export const createButton = (
+  text: string,
+  onClick: (() => void) | null,
+  variant: 'default' | 'primary' = 'default',
+  type: 'button' | 'submit' = 'button',
+): HTMLButtonElement => {
+  const button = document.createElement('button');
+  button.textContent = text;
+  button.type = type;
+  if (variant === 'primary') {
+    button.className = 'primary';
+  }
+  if (onClick) {
+    button.addEventListener('click', onClick);
+  }
+  return button;
+};