create-tinybase 1.0.1 → 1.1.0

package/cli.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-import{existsSync as f}from"fs";import{dirname as k,join as u}from"path";import{createCLI as x,detectPackageManager as R}from"tinycreate";import{fileURLToPath as S}from"url";const P=k(S(import.meta.url)),C={welcomeMessage:`\u{1F389} Welcome to TinyBase!
-`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinybase-app",validate:e=>{if(e.length===0)return"Project name is required";const t=u(process.cwd(),e);return f(t)?`Directory "${e}" already exists. Please choose a different name.`:!0}},{type:"select",name:"appType",message:"App type:",choices:[{title:"Todo app",value:"todos"},{title:"Chat app",value:"chat"},{title:"Drawing app",value:"drawing"},{title:"Tic-tac-toe game",value:"game"}],initial:0},{type:"select",name:"language",message:"Language:",choices:[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],initial:0},{type:"select",name:"framework",message:"Framework:",choices:[{title:"React",value:"react"},{title:"Vanilla",value:"vanilla"}],initial:0},{type:(e,t)=>t.language==="typescript"?"confirm":null,name:"schemas",message:"Include store schemas?",initial:!1},{type:"select",name:"syncType",message:"Synchronization:",choices:[{title:"None",value:"none"},{title:"Via remote demo server (stateless)",value:"remote"},{title:"Via local node server (stateless)",value:"node"},{title:"Via local DurableObjects server (stateful)",value:"durable-objects"}],initial:1},{type:"select",name:"persistenceType",message:"Persistence:",choices:[{title:"None",value:"none"},{title:"Local Storage",value:"local-storage"},{title:"SQLite",value:"sqlite"},{title:"PGlite",value:"pglite"}],initial:1},{type:"confirm",name:"prettier",message:"Include Prettier?",initial:!0},{type:"confirm",name:"eslint",message:"Include ESLint?",initial:!0},{type:(e,t)=>t.syncType!=="node"&&t.syncType!=="durable-objects"?"confirm":null,name:"installAndRun",message:"Install dependencies and start dev server?",initial:!0}],createContext:e=>{const{projectName:t,language:s,framework:n,appType:o,prettier:m,eslint:g,schemas:l,syncType:d,persistenceType:y,installAndRun:p}=e,i=s==="typescript",v=!i,c=n==="react",b=i?c?"tsx":"ts":c?"jsx":"js",a=d||"remote",T=a!=="none",h=a==="node"||a==="durable-objects",j=a==="durable-objects"?"durable-objects":"node",w=a==="durable-objects",r=y||"local-storage";return{projectName:t,language:s,framework:n,appType:o,prettier:m,eslint:g,schemas:i&&(l===!0||l==="true"),syncType:a,sync:T,server:h,serverType:j,isDurableObject:w,persistenceType:r,persist:r!=="none",persistLocalStorage:r==="local-storage",persistSqlite:r==="sqlite",persistPglite:r==="pglite",installAndRun:p===!0||p==="true",typescript:i,javascript:v,react:c,ext:b}},createDirectories:async(e,t)=>{const{mkdir:s}=await import("fs/promises"),{join:n}=await import("path"),o=t.server;await s(n(e,"client/src"),{recursive:!0}),await s(n(e,"client/public"),{recursive:!0}),o&&await s(n(e,"server"),{recursive:!0})},getFiles:()=>[{template:"README.md.hbs",output:"README.md",prettier:!0}],processIncludedFile:(e,t)=>{const{javascript:s}=t,n=e.prettier??/\.(js|jsx|ts|tsx|css|json|html|md)$/.test(e.output),o=e.transpile??(/\.(ts|tsx)\.hbs$/.test(e.template)&&s===!0);return{...e,prettier:n,transpile:o}},templateRoot:u(P,"templates"),installCommand:"{pm} install",devCommand:"{pm} run dev",workingDirectory:"client",onSuccess:(e,t)=>{const s=t.syncType,n=s==="node"||s==="durable-objects",o=R();console.log("Next steps:"),console.log(),n&&(console.log("To run the server:"),console.log(`  cd ${e}/server`),console.log(`  ${o} install`),console.log(`  ${o} run dev`),console.log()),console.log("To run the client:"),console.log(`  cd ${e}/client`),console.log(`  ${o} install`),console.log(`  ${o} run dev`)}};x(C).catch(e=>{console.error(e),process.exit(1)});
+import{existsSync as q}from"fs";import{dirname as N,join as b}from"path";import{createCLI as z,detectPackageManager as J}from"tinycreate";import{fileURLToPath as B}from"url";const O=N(B(import.meta.url)),_={welcomeMessage:`\u{1F389} Welcome to TinyBase!
+`,questions:[{type:"text",name:"projectName",message:"Project name:",initial:"my-tinybase-app",validate:e=>{if(e.length===0)return"Project name is required";const s=b(process.cwd(),e);return q(s)?`Directory "${e}" already exists. Please choose a different name.`:!0}},{type:"select",name:"appType",message:"App type:",choices:[{title:"Todo app",value:"todos"},{title:"Chat app",value:"chat"},{title:"Drawing app",value:"drawing"},{title:"Tic-tac-toe game",value:"game"}],initial:0},{type:"select",name:"language",message:"Language:",choices:[{title:"TypeScript",value:"typescript"},{title:"JavaScript",value:"javascript"}],initial:0},{type:"select",name:"framework",message:"Framework:",choices:[{title:"React",value:"react"},{title:"Vanilla",value:"vanilla"},{title:"Svelte (experimental)",value:"svelte"}],initial:0},{type:(e,s)=>s.language==="typescript"?"confirm":null,name:"schemas",message:"Include store schemas?",initial:!1},{type:"select",name:"syncType",message:"Synchronization:",choices:[{title:"None",value:"none"},{title:"Via remote demo server (stateless)",value:"remote"},{title:"Via local node server (stateless)",value:"node"},{title:"Via local DurableObjects server (stateful)",value:"durable-objects"}],initial:1},{type:"select",name:"persistenceType",message:"Persistence:",choices:[{title:"None",value:"none"},{title:"Local Storage",value:"local-storage"},{title:"SQLite",value:"sqlite"},{title:"PGlite",value:"pglite"}],initial:1},{type:"confirm",name:"prettier",message:"Include Prettier?",initial:!0},{type:"confirm",name:"eslint",message:"Include ESLint?",initial:!0},{type:(e,s)=>s.syncType!=="node"&&s.syncType!=="durable-objects"?"confirm":null,name:"installAndRun",message:"Install dependencies and start dev server?",initial:!0}],createContext:e=>{const{projectName:s,language:o,framework:a,appType:t,prettier:w,eslint:f,schemas:g,syncType:x,persistenceType:T,installAndRun:d}=e,p=o==="typescript",j=!p,n=a==="react",r=a==="vanilla",m=a==="svelte",i=p?"ts":"js",c=m?"svelte":p?n?"tsx":"ts":n?"jsx":"js",y=m?i:c,l=x||"remote",E=l!=="none",R=l==="node"||l==="durable-objects",k=l==="durable-objects"?"durable-objects":"node",C=l==="durable-objects",u=T||"local-storage",$=u!=="none",D=u==="local-storage",v=u==="sqlite",S=u==="pglite",P=n||m||v||S,h=t==="chat"?"chat interface":t==="drawing"?"drawing canvas":t==="game"?"game":"todo list",F=n?"React":r?"Vanilla JS":"Svelte",A=n?"React-based":r?"vanilla JavaScript":"Svelte-based",L=n?"Entry point that bootstraps and renders the React app":m?"Entry point that bootstraps and mounts the Svelte app":"Entry point that bootstraps the app",M=r?"app":"App",I=r?i:c,V=n?`Main React component that renders the ${h}`:r?"Main application logic":`Main Svelte component that renders the ${h}`;return{projectName:s,language:o,framework:a,appType:t,prettier:w,eslint:f,schemas:p&&(g===!0||g==="true"),syncType:l,sync:E,server:R,serverType:k,isDurableObject:C,persistenceType:u,persist:$,persistLocalStorage:D,persistSqlite:v,persistPglite:S,needsViteConfig:P,frameworkName:F,clientFrameworkDescription:A,entryFileDescription:L,appFileStem:M,appFileExt:I,appFileDescription:V,primaryStoreStem:n?t==="chat"?"ChatStore":t==="drawing"?"CanvasStore":"Store":t==="chat"?"chatStore":t==="drawing"?"canvasStore":"store",primaryStoreExt:n?c:i,primaryStoreDescription:`TinyBase ${t==="chat"?"chat messages":t==="drawing"?"drawing canvas":"main"} store configuration`,needsSettingsStore:t==="chat"||t==="drawing",settingsStoreStem:n?"SettingsStore":"settingsStore",settingsStoreExt:n?c:i,configExt:n?c:i,installAndRun:d===!0||d==="true",typescript:p,javascript:j,react:n,vanilla:r,svelte:m,scriptExt:i,componentExt:c,entryExt:y,ext:y}},createDirectories:async(e,s)=>{const{mkdir:o}=await import("fs/promises"),{join:a}=await import("path"),t=s.server;await o(a(e,"client/src"),{recursive:!0}),await o(a(e,"client/public"),{recursive:!0}),t&&await o(a(e,"server"),{recursive:!0})},getFiles:()=>[{template:"README.md.hbs",output:"README.md",prettier:!0}],processIncludedFile:(e,s)=>{const{javascript:o}=s,a=e.prettier??/\.(js|jsx|ts|tsx|css|json|html|md)$/.test(e.output),t=e.transpile??(/\.(ts|tsx)\.hbs$/.test(e.template)&&o===!0);return{...e,prettier:a,transpile:t}},templateRoot:b(O,"templates"),installCommand:"{pm} install",devCommand:"{pm} run dev",workingDirectory:"client",onSuccess:(e,s)=>{const o=s.syncType,a=o==="node"||o==="durable-objects",t=J();console.log("Next steps:"),console.log(),a&&(console.log("To run the server:"),console.log(`  cd ${e}/server`),console.log(`  ${t} install`),console.log(`  ${t} run dev`),console.log()),console.log("To run the client:"),console.log(`  cd ${e}/client`),console.log(`  ${t} install`),console.log(`  ${t} run dev`)}};z(_).catch(e=>{console.error(e),process.exit(1)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tinybase",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "author": "jamesgpearce",
   "repository": {
     "type": "git",
@@ -17,6 +17,7 @@
     "state",
     "data",
     "react",
+    "svelte",
     "sqlite",
     "pglite",
     "durable-objects"

package/templates/README.md.hbs

@@ -5,7 +5,7 @@
 
 # {{projectName}}
 
-A TinyBase app built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}} and {{#if react}}React{{else}}Vanilla JS{{/if}}.
+A TinyBase app built with {{#if typescript}}TypeScript{{else}}JavaScript{{/if}} and {{frameworkName}}.
 
 ## Getting Started
 
@@ -43,26 +43,19 @@ This project is organized into {{#if server}}two main directories{{else}}a singl
 
 ### Client
 
-The `client` directory contains your {{#if react}}React-based{{else}}vanilla JavaScript{{/if}} web application,
+The `client` directory contains your {{clientFrameworkDescription}} web application,
 built with Vite and {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}.
 
 #### Key Files
 
-- **`index.html`** - The main HTML file that loads your app
-- **`src/index.{{ext}}`** - Entry point that bootstraps the application{{#if react}} and renders the React component tree{{/if}}
-- **`src/{{#if react}}App{{else}}app{{/if}}.{{ext}}`** - {{#if react}}Main React component that renders the {{#if (eq appType "todos")}}todo list{{else if (eq appType "chat")}}chat interface{{else if (eq appType "drawing")}}drawing
-    canvas{{else if (eq appType "game")}}game{{/if}}
-{{else}}Main application logic{{/if}}
--
-**`src/{{#if react}}{{#if (eq appType "chat")}}ChatStore{{else if (eq appType "drawing")}}CanvasStore{{else}}Store{{/if}}{{else}}{{#if (eq appType "chat")}}chatStore{{else if (eq appType "drawing")}}canvasStore{{else}}store{{/if}}{{/if}}.{{ext}}`**
-- TinyBase {{#if (eq appType "chat")}}chat messages{{else if (eq appType "drawing")}}drawing canvas{{else}}main{{/if}} store configuration
-{{#if (eq appType "chat")}}
-  - **`src/{{#if react}}SettingsStore{{else}}settingsStore{{/if}}.{{ext}}`** - TinyBase settings store (not synchronized)
+- **`index.html`**: The main HTML file that loads your app
+- **`src/index.{{entryExt}}`**: {{entryFileDescription}}
+- **`src/{{appFileStem}}.{{appFileExt}}`**: {{appFileDescription}}
+- **`src/{{primaryStoreStem}}.{{primaryStoreExt}}`**: {{primaryStoreDescription}}
+{{#if needsSettingsStore}}
+  - **`src/{{settingsStoreStem}}.{{settingsStoreExt}}`**: TinyBase settings store (not synchronized)
 {{/if}}
-{{#if (eq appType "drawing")}}
-  - **`src/{{#if react}}SettingsStore{{else}}settingsStore{{/if}}.{{ext}}`** - TinyBase settings store (not synchronized)
-{{/if}}
-- **`src/config.{{ext}}`** - Configuration settings{{#if server}} (including server connection URL){{/if}}
+- **`src/config.{{configExt}}`**: Configuration settings{{#if server}} (including server connection URL){{/if}}
 
 #### How It Works
 
@@ -101,7 +94,7 @@ The app uses **TinyBase** to manage application state in a reactive data store.
 
 {{/if}}
 {{#if react}}
-  **React Integration** - TinyBase provides React hooks that automatically subscribe
+  **React Integration**: TinyBase provides React hooks that automatically subscribe
   to store changes and trigger re-renders when data updates. This means your UI
   stays in sync with your data with minimal boilerplate.
 
@@ -112,6 +105,12 @@ The app uses **TinyBase** to manage application state in a reactive data store.
   {{else}}`Game` uses TinyBase hooks to manage game state{{/if}} to interact
   with the store.
 
+{{/if}}
+{{#if svelte}}
+  **Svelte Integration**: TinyBase provides Svelte stores and helpers that keep the
+  UI reactive as data changes. Components subscribe declaratively so the interface
+  stays synchronized with the underlying TinyBase store.
+
 {{/if}}
 {{#if server}}
   ### Server
@@ -120,7 +119,7 @@ The app uses **TinyBase** to manage application state in a reactive data store.
 
   #### Key Files
 
-  - **`index.{{ext}}`** - Server entry point
+  - **`index.{{ext}}`**: Server entry point
 
   #### How It Works
 
@@ -157,4 +156,4 @@ The app uses **TinyBase** to manage application state in a reactive data store.
 ## Learn More
 
 - [TinyBase Documentation](https://tinybase.org)
-- [TinyBase Examples](https://tinybase.org/demos/)
+- [TinyBase Examples](https://tinybase.org/demos/)

package/templates/client/.npmrc.hbs

@@ -0,0 +1 @@
+legacy-peer-deps=true

package/templates/client/index.html.hbs

@@ -8,6 +8,12 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap" />
   {{includeFile template="client/public/favicon.svg" output="client/public/favicon.svg"}}
+  {{#if typescript}}{{includeFile template="client/public/ts.svg" output="client/public/ts.svg"}}{{else}}{{includeFile template="client/public/js.svg" output="client/public/js.svg"}}{{/if}}
+  {{#if react}}{{includeFile template="client/public/react.svg" output="client/public/react.svg"}}{{/if}}
+  {{#if svelte}}{{includeFile template="client/public/svelte.svg" output="client/public/svelte.svg"}}{{/if}}
+  {{#if persistSqlite}}{{includeFile template="client/public/sqlite.svg" output="client/public/sqlite.svg"}}{{/if}}
+  {{#if persistPglite}}{{includeFile template="client/public/pglite.svg" output="client/public/pglite.svg"}}{{/if}}
+  {{#if sync}}{{includeFile template="client/public/sync.svg" output="client/public/sync.svg"}}{{/if}}
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   <title>
     TinyBase {{#if (eq appType "chat")}}Chat{{else if (eq appType "drawing")}}Drawing{{else if (eq appType "game")}}Game{{else}}Todos{{/if}}
@@ -69,6 +75,22 @@
 
     #topBarInfo {
       position: relative;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    #topBarTech {
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+    }
+
+    .topBarTechIcon {
+      width: 1.25rem;
+      height: 1.25rem;
+      display: block;
+      flex-shrink: 0;
     }
 
     #infoIcon {
@@ -155,6 +177,27 @@
         TinyBase {{#if (eq appType "chat")}}Chat{{else if (eq appType "drawing")}}Drawing{{else if (eq appType "game")}}Game{{else}}Todos{{/if}}
       </div>
       <div id="topBarInfo">
+        <div id="topBarTech">
+          {{#if typescript}}
+            <img src="/ts.svg" class="topBarTechIcon" title="Written in TypeScript" />
+          {{else}}
+            <img src="/js.svg" class="topBarTechIcon" title="Written in JavaScript" />
+          {{/if}}
+          {{#if react}}
+            <img src="/react.svg" class="topBarTechIcon" title="Built with React" />
+          {{/if}}
+          {{#if svelte}}
+            <img src="/svelte.svg" class="topBarTechIcon" title="Built with Svelte" />
+          {{/if}}
+          {{#if persistSqlite}}
+            <img src="/sqlite.svg" class="topBarTechIcon" title="Persists data to SQLite" />
+          {{else if persistPglite}}
+            <img src="/pglite.svg" class="topBarTechIcon" title="Persists data to PGlite" />
+          {{/if}}
+          {{#if sync}}
+            <img src="/sync.svg" class="topBarTechIcon" title="Data synchronization enabled" />
+          {{/if}}
+        </div>
         <div id="infoIcon">
           i
           <div id="infoTooltip">
@@ -165,22 +208,16 @@
             {{else if (eq appType "drawing")}}
               A collaborative drawing canvas showcasing TinyBase's state synchronization.
             {{else if (eq appType "game")}}
-              A tic-tac-toe game demonstrating turn-based logic and computed game state.
+              A tic-tac-toe game demonstrating turn-based logic and computed game state using TinyBase.
             {{/if}}
-            <br><br>
-            Built with: {{#if typescript}}TypeScript{{#if schemas}} (using typed store schemas){{/if}}{{else}}JavaScript{{/if}}{{#if react}} and React{{/if}}.{{#if persist}}
-              <br><br>
-              Persistence: {{#if persistLocalStorage}}Local Storage{{else if persistSqlite}}SQLite{{else if persistPglite}}PGlite{{/if}}.{{/if}}{{#if sync}}
-              <br><br>
-              Sync: {{#if (eq syncType "remote")}}Remote{{else if (eq syncType "node")}}Node.js Server{{else if (eq syncType "durable-objects")}}Durable Objects{{/if}}.{{/if}}
           </div>
         </div>
       </div>
     </div>
     <div id="app"></div>
   </div>
-  {{includeFile template="client/src/index.tsx.hbs" output="client/src/index.{{ext}}"}}
-  <script type="module" src="/src/index.{{ext}}"></script>
+  {{includeFile template="client/src/index.tsx.hbs" output="client/src/index.{{entryExt}}"}}
+  <script type="module" src="/src/index.{{entryExt}}"></script>
 </body>
 
 </html>

package/templates/client/package.json.hbs

@@ -6,7 +6,12 @@
   {{includeFile template="client/index.html.hbs" output="client/index.html"}}
   "dev": "vite"
   {{#if typescript}}
-    "build": "tsc && vite build"
+    {{#if svelte}}
+      "build": "svelte-check --tsconfig ./tsconfig.json && vite build"
+      "check": "svelte-check --tsconfig ./tsconfig.json"
+    {{else}}
+      "build": "tsc && vite build"
+    {{/if}}
   {{else}}
     "build": "vite build"
   {{/if}}
@@ -26,6 +31,10 @@
   {{#if typescript}}
     "typescript": "^5.9.3"
     "@types/node": "^25.3.5"
+    {{#if svelte}}
+      "@tsconfig/svelte": "^5.0.5"
+      "svelte-check": "^4.3.1"
+    {{/if}}
     {{#if react}}
       "@types/react": "^19.2.14"
       "@types/react-dom": "^19.2.3"
@@ -34,6 +43,10 @@
   {{#if react}}
     "@vitejs/plugin-react": "^5.1.4"
   {{/if}}
+  {{#if svelte}}
+    "@sveltejs/vite-plugin-svelte": "^6.2.1"
+    "svelte": "^5.53.11"
+  {{/if}}
   {{#if persistSqlite}}
     "vite-plugin-static-copy": "^3.2.0"
   {{/if}}
@@ -55,9 +68,9 @@
   {{/if}}
 {{/list}}
 },
-"dependencies": {
+  "dependencies": {
 {{#list}}
-  "tinybase": "^8.0.0"
+  "tinybase": "{{#if svelte}}beta{{else}}^8.0.0{{/if}}"
   {{#if react}}
     "react": "^19.2.4"
     "react-dom": "^19.2.4"
@@ -77,18 +90,14 @@
 {{#if prettier}}
   {{includeFile template="client/.prettierrc.json.hbs" output="client/.prettierrc.json"}}
 {{/if}}
+{{#if svelte}}
+  {{includeFile template="client/.npmrc.hbs" output="client/.npmrc"}}
+{{/if}}
 {{#if eslint}}
   {{includeFile template="client/eslint.config.js.hbs" output="client/eslint.config.js"}}
 {{/if}}
-{{#if react}}
+{{#if needsViteConfig}}
   {{includeFile template="client/vite.config.js.hbs" output="client/vite.config.js"}}
-{{else}}
-  {{#if persistSqlite}}
-    {{includeFile template="client/vite.config.js.hbs" output="client/vite.config.js"}}
-  {{/if}}
-  {{#if persistPglite}}
-    {{includeFile template="client/vite.config.js.hbs" output="client/vite.config.js"}}
-  {{/if}}
 {{/if}}
 {{#if typescript}}
   {{includeFile template="client/tsconfig.json.hbs" output="client/tsconfig.json"}}

package/templates/client/public/browser.svg

@@ -0,0 +1,81 @@
+<?xml version="1.0" ?>
+
+<svg width="800px" height="800px" viewBox="0 0 64 64" id="svg5" version="1.1" xml:space="preserve"
+  xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+
+  <defs id="defs2" />
+
+  <g id="layer1" transform="translate(-96,-96)">
+
+    <path d="m 106.00001,105 h 49 v 6 h -49 z" id="path27750"
+      style="fill:#3e4f59;fill-opacity:1;fill-rule:evenodd;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1" />
+
+    <path d="m 106.00001,111 h 49 v 40 h -49 z" id="path27752"
+      style="fill:#acbec2;fill-opacity:1;fill-rule:evenodd;stroke-width:2.00001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1" />
+
+    <path d="m 106.00001,111 v 40 h 29.76953 a 28.484051,41.392605 35.599482 0 0 18.625,-40 z" id="path27754"
+      style="fill:#e8edee;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.00002;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1" />
+
+    <path
+      d="m 108.00001,104 c -1.64501,0 -3,1.355 -3,3 v 40 c 0,0.55229 0.44772,1 1,1 0.55229,0 1,-0.44771 1,-1 v -40 c 0,-0.56413 0.43587,-1 1,-1 h 45 c 0.56413,0 1,0.43587 1,1 v 3 h -42 c -0.55228,0 -1,0.44772 -1,1 0,0.55229 0.44772,1 1,1 h 42 v 37 c 0,0.56413 -0.43587,1 -1,1 h -49 c -0.55228,0 -1,0.44772 -1,1 0,0.55229 0.44772,1 1,1 h 49 c 1.64501,0 3,-1.35499 3,-3 0,-14 0,-28 0,-42 0,-1.645 -1.35499,-3 -3,-3 z"
+      id="path27756"
+      style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1" />
+
+    <path
+      d="m 151.00001,107 c -0.55229,0 -1,0.44772 -1,1 0,0.55229 0.44771,1 1,1 0.55229,0 1,-0.44771 1,-1 0,-0.55228 -0.44771,-1 -1,-1 z"
+      id="path27758"
+      style="color:#000000;fill:#ed7161;fill-opacity:1;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1;-inkscape-stroke:none" />
+
+    <path
+      d="m 147.00001,107 c -0.55229,0 -1,0.44772 -1,1 0,0.55229 0.44771,1 1,1 0.55229,0 1,-0.44771 1,-1 0,-0.55228 -0.44771,-1 -1,-1 z"
+      id="path27760"
+      style="color:#000000;fill:#ecba16;fill-opacity:1;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1;-inkscape-stroke:none" />
+
+    <path
+      d="m 143.00001,107 c -0.55229,0 -1,0.44772 -1,1 0,0.55229 0.44771,1 1,1 0.55229,0 1,-0.44771 1,-1 0,-0.55228 -0.44771,-1 -1,-1 z"
+      id="path27762"
+      style="color:#000000;fill:#42b05c;fill-opacity:1;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1;-inkscape-stroke:none" />
+
+    <path d="m 101.00001,150 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 1,1 0 0 0 1,-1 1,1 0 0 0 -1,-1 z" id="path27764"
+      style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1;-inkscape-stroke:none" />
+
+    <path
+      d="m 109.00001,110 c -0.55228,0 -1,0.44772 -1,1 0,0.55229 0.44772,1 1,1 0.55229,0 1,-0.44771 1,-1 0,-0.55228 -0.44771,-1 -1,-1 z"
+      id="path27766"
+      style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1;-inkscape-stroke:none" />
+
+    <path d="m 119.00597,137.50137 10.99308,6 v -13 l -10.99308,-6 z" id="path2282"
+      style="fill:#0588e2;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1" />
+
+    <path d="m 140.99213,137.50137 -10.99308,6 v -13 l 10.99308,-6 z" id="path2284"
+      style="fill:#fe73c5;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1" />
+
+    <path
+      d="m 136.08392,127.18103 -6.08399,3.32031 v 13 l 8.51367,-4.64648 a 15.440572,16.753496 0 0 0 0.16016,-2.39258 15.440572,16.753496 0 0 0 -2.58984,-9.28125 z"
+      id="path20371"
+      style="fill:#fe93d3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1" />
+
+    <path d="m 129.99905,130.50137 10.99308,-6 -10.99308,-6 -10.99308,6 z" id="path2292"
+      style="fill:#ffa221;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1" />
+
+    <path
+      d="m 126.90228,120.19275 -7.89649,4.30859 10.99414,6 6.08399,-3.32031 a 15.440572,16.753496 0 0 0 -9.18164,-6.98828 z"
+      id="ellipse20373"
+      style="fill:#ffc343;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1" />
+
+    <path d="m 133.99061,128.32572 3.00151,-1.64374 v 5.31936 l -2.99885,1.32115 z" id="path8715"
+      style="color:#000000;fill:#0588e2;fill-opacity:1;fill-rule:evenodd;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1;-inkscape-stroke:none" />
+
+    <path
+      d="m 136.51165,125.80407 -3.00195,1.64454 a 1.0001,1.0001 0 0 0 -0.51953,0.87695 l 0.004,4.99805 a 1.0001,1.0001 0 0 0 1.40235,0.91406 l 2.99804,-1.32031 a 1.0001,1.0001 0 0 0 0.59756,-0.91602 v -5.32031 a 1.0001,1.0001 0 0 0 -1.48047,-0.87696 z m -0.51953,2.56641 v 2.97852 l -1,0.43945 -0.002,-2.87109 z"
+      id="path8717"
+      style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1;-inkscape-stroke:none" />
+
+    <path
+      d="m 129.99798,117.50134 c -0.16504,0 -0.32911,0.0414 -0.47852,0.12305 l -10.99218,6 c -0.28424,0.15583 -0.44913,0.41533 -0.5,0.69336 -6.7e-4,0.003 -9.6e-4,0.005 -0.002,0.008 -0.008,0.0446 -0.0138,0.0896 -0.0156,0.13476 -7e-4,0.0148 -0.004,0.0253 -0.004,0.041 v 13 c 4.4e-4,0.36567 0.20041,0.70195 0.52149,0.87695 l 10.99218,6 c 0.0519,0.0284 0.10496,0.0499 0.15821,0.0684 0.13097,0.0453 0.26303,0.0585 0.39257,0.0488 a 1.0001,1.0001 0 0 0 0.0469,-0.008 c 0.1217,-0.015 0.2386,-0.0491 0.3457,-0.10547 a 1.0001,1.0001 0 0 0 0.0156,-0.004 l 0.0176,-0.01 0.0137,-0.006 c 0.002,-0.001 0.004,-0.003 0.006,-0.004 l 3.15234,-1.7207 a 1,1 0 0 0 0.39844,-1.35742 1,1 0 0 0 -1.35547,-0.39844 L 131,141.81522 v -10.7207 l 8.99212,-4.90959 v 10.72266 l -3.77148,2.05859 a 1,1 0 0 0 -0.39844,1.35743 1,1 0 0 0 1.35742,0.39843 l 4.29102,-2.34375 a 1.0001,1.0001 0 0 0 0.52148,-0.87695 v -13 a 1.0001,1.0001 0 0 0 -0.41797,-0.79102 c -0.0259,-0.031 -0.0579,-0.061 -0.10351,-0.0859 l -10.99219,-6 c -0.1493,-0.0819 -0.31543,-0.12308 -0.48047,-0.12308 z m 0.002,2.13867 8.90625,4.86133 -8.90625,4.86133 -2.84961,-1.55469 c -0.23241,-0.12684 -0.50564,-0.15638 -0.75976,-0.082 -0.25442,0.0748 -0.46871,0.24766 -0.59571,0.48047 -0.26501,0.48485 -0.0866,1.09273 0.39844,1.35742 l 2.80664,1.53125 v 10.72266 l -8.99414,-4.91016 v -10.72266 l 2.74805,1.50196 c 0.48485,0.26501 1.09273,0.0866 1.35742,-0.39844 0.26501,-0.48485 0.0866,-1.09273 -0.39844,-1.35742 l -2.62114,-1.42972 z"
+      id="path8707"
+      style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1" />
+
+  </g>
+
+</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/pglite.svg

@@ -0,0 +1,8 @@
+<svg width="368" height="305" viewBox="40 40 288 225" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M304 104.551L304 232.47C304 236.891 300.413 240.475 295.991 240.47L263.968 240.432C259.734 240.427 256.272 237.134 255.995 232.971C255.998 232.813 256 232.655 256 232.496L255.999 184.498C255.999 171.244 245.239 160.499 231.984 160.499C219.138 160.499 208.636 150.406 208 137.717V64.5095L264.03 64.5507C286.109 64.5669 304 82.4708 304 104.551ZM207.97 48.5095L208 48.5095L264.041 48.5507C294.953 48.5734 320 73.6388 320 104.551L320 232.47C320 245.735 309.238 256.485 295.972 256.47L263.949 256.432C257.835 256.425 252.258 254.132 248.024 250.363C243.775 254.177 238.158 256.497 231.998 256.496L71.9984 256.486C58.7442 256.485 48 245.74 48 232.486V104.498C48 73.57 73.0722 48.4979 104 48.498L191.97 48.4986H192H193.142H207.97V48.5095ZM144 64.4983L144 120.523C144 133.777 154.745 144.523 168 144.523H192L192 142.914C192 161.462 207.036 176.498 225.584 176.498C233.533 176.498 239.977 182.942 239.977 190.891L239.977 232.432C239.977 232.623 239.98 232.813 239.984 233.003C239.722 237.185 236.247 240.496 231.999 240.496L191.726 240.494L192 184.534C192.022 180.116 188.457 176.517 184.039 176.495C179.621 176.473 176.022 180.038 176 184.456L175.726 240.459L175.726 240.492L127.9 240.489V184.495C127.9 180.077 124.318 176.495 119.9 176.495C115.482 176.495 111.9 180.077 111.9 184.495V240.488L71.9995 240.486C67.5814 240.485 64 236.904 64 232.486V104.498C64 82.4066 81.9087 64.4979 104 64.498L144 64.4983ZM268.04 112.715C268.04 106.088 262.667 100.715 256.04 100.715C249.412 100.715 244.04 106.088 244.04 112.715C244.04 119.343 249.412 124.715 256.04 124.715C262.667 124.715 268.04 119.343 268.04 112.715Z"
+    fill="#131517" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M304 104.551L304 232.47C304 236.891 300.413 240.475 295.991 240.47L263.968 240.432C259.734 240.427 256.272 237.134 255.995 232.971C255.998 232.813 256 232.655 256 232.496L255.999 184.498C255.999 171.244 245.239 160.499 231.984 160.499C219.138 160.499 208.636 150.406 208 137.717V64.5095L264.03 64.5507C286.109 64.5669 304 82.4708 304 104.551ZM144 64.4983L144 120.523C144 133.778 154.745 144.523 168 144.523H192L192 142.914C192 161.462 207.036 176.498 225.584 176.498C233.533 176.498 239.977 182.942 239.977 190.891L239.977 232.432C239.977 232.623 239.98 232.813 239.984 233.003C239.722 237.185 236.247 240.496 231.999 240.496L191.726 240.494L192 184.534C192.022 180.116 188.457 176.517 184.039 176.495C179.621 176.473 176.022 180.038 176 184.456L175.726 240.459L175.726 240.492L127.9 240.489V184.495C127.9 180.077 124.318 176.495 119.9 176.495C115.482 176.495 111.9 180.077 111.9 184.495V240.488L71.9995 240.486C67.5814 240.485 64 236.904 64 232.486V104.498C64 82.4066 81.9087 64.4979 104 64.498L144 64.4983ZM268.04 112.715C268.04 106.088 262.667 100.715 256.04 100.715C249.412 100.715 244.04 106.088 244.04 112.715C244.04 119.343 249.412 124.715 256.04 124.715C262.667 124.715 268.04 119.343 268.04 112.715Z"
+    fill="#F6F95C" />
+</svg>

package/templates/client/public/react.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
+  <title>React Logo</title>
+  <circle cx="0" cy="0" r="2.05" fill="#61dafb" />
+  <g stroke="#61dafb" stroke-width="1" fill="none">
+    <ellipse rx="11" ry="4.2" />
+    <ellipse rx="11" ry="4.2" transform="rotate(60)" />
+    <ellipse rx="11" ry="4.2" transform="rotate(120)" />
+  </g>
+</svg>

package/templates/client/public/sqlite.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg viewBox="0 0 256 256" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg2985" version="1.1"
+  inkscape:version="0.48.4 r9939" width="256" height="256" xml:space="preserve"
+  sodipodi:docname="sqlite-square-icon.svg">
+  <metadata id="metadata2991">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs2989">
+    <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
+      gradientTransform="matrix(-4.02e-6,-91.8907,-91.8907,4.02e-6,85.8809,161.434)" spreadMethod="pad"
+      id="linearGradient3027">
+      <stop style="stop-opacity:1;stop-color:#97d9f6" offset="0" id="stop3029" />
+      <stop style="stop-opacity:1;stop-color:#0f80cc" offset="0.920245" id="stop3031" />
+      <stop style="stop-opacity:1;stop-color:#0f80cc" offset="1" id="stop3033" />
+    </linearGradient>
+    <linearGradient inkscape:collect="always" xlink:href="#linearGradient3027" id="linearGradient5421"
+      gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.02e-7,-9.18907,-9.18907,4.02e-7,8.58809,16.1434)"
+      spreadMethod="pad" x1="-15.614694" y1="-9.1082983" x2="-6.7410073" y2="-9.1082983" />
+    <linearGradient inkscape:collect="always" xlink:href="#linearGradient3027" id="linearGradient3003"
+      gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.02e-7,-9.18907,-9.18907,4.02e-7,8.58809,16.1434)"
+      spreadMethod="pad" x1="-15.614694" y1="-9.1082983" x2="-6.7410073" y2="-9.1082983" />
+  </defs>
+  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10"
+    gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920"
+    inkscape:window-height="1017" id="namedview2987" showgrid="false" inkscape:zoom="0.73710525" inkscape:cx="217.03271"
+    inkscape:cy="157.19018" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1"
+    inkscape:current-layer="g2993" fit-margin-top="10" fit-margin-left="10" fit-margin-right="10" fit-margin-bottom="10"
+    inkscape:snap-page="true" inkscape:snap-bbox="true" />
+  <g id="g2993" inkscape:groupmode="layer" inkscape:label="ink_ext_XXXXXX"
+    transform="matrix(1.25,0,0,-1.25,-41.57475,299.78375)">
+    <g id="g2998" transform="matrix(1.5512433,0,0,1.5512433,-16.326028,-27.718348)">
+      <path
+        d="m 103.096,71.5961 c -0.057,0.7219 -0.091,1.191 -0.091,1.191 0,0 -2.189,14.7578 -4.7948,19.1617 -0.4122,0.6981 0.0449,3.5653 1.1953,7.8121 0.6725,-1.1629 3.5115,-6.1371 4.0815,-7.7398 0.642,-1.8121 0.777,-2.3313 0.777,-2.3313 0,0 -1.557,8.0114 -4.112,12.6862 0.56,1.89 1.229,3.979 1.986,6.212 0.968,-1.698 3.285,-5.809 3.795,-7.235 0.103,-0.293 0.19,-0.542 0.268,-0.77 0.025,0.137 0.05,0.274 0.075,0.411 -0.585,2.482 -1.734,6.801 -3.307,9.992 3.49,18.165 15.393,42.445 27.596,53.278 l -79.6048,0 c -5.3352,0 -9.7004,-4.366 -9.7004,-9.701 l 0,-87.7892 c 0,-5.3347 4.3652,-9.7 9.7004,-9.7 l 52.4298,0 c -0.378,4.5762 -0.504,9.6391 -0.294,14.5223"
+        style="fill:#0f80cc;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3005"
+        inkscape:connector-curvature="0" />
+      <path
+        d="m 99.4055,99.7609 c 0.6725,-1.1629 3.5115,-6.1371 4.0815,-7.7398 0.642,-1.8121 0.777,-2.3313 0.777,-2.3313 0,0 -1.557,8.0114 -4.112,12.6862 0.56,1.89 1.229,3.979 1.986,6.212 0.885,-1.553 2.896,-5.12 3.623,-6.81 0.027,0.319 0.054,0.638 0.082,0.954 -0.644,2.475 -1.622,5.715 -2.874,8.254 3.214,16.725 13.559,38.625 24.704,50.448 l -76.7128,0 c -3.7883,0 -6.8711,-3.082 -6.8711,-6.871 l 0,-81.3841 c 17.3738,6.668 38.323,12.7633 56.3529,12.502 -0.6693,2.5812 -1.4315,4.9152 -2.2318,6.2679 -0.4122,0.6981 0.0449,3.5653 1.1953,7.8121"
+        style="fill:url(#linearGradient3003);fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3035"
+        inkscape:connector-curvature="0" />
+      <path
+        d="m 149.133,167.137 c -5.452,4.862 -12.053,2.909 -18.568,-2.873 -0.967,-0.859 -1.932,-1.812 -2.892,-2.83 -11.145,-11.823 -21.49,-33.723 -24.704,-50.448 1.252,-2.539 2.23,-5.779 2.874,-8.254 0.165,-0.635 0.314,-1.231 0.433,-1.738 0.283,-1.1999 0.435,-1.978 0.435,-1.978 0,0 -0.1,0.3781 -0.51,1.567 -0.078,0.228 -0.165,0.477 -0.268,0.77 -0.044,0.121 -0.105,0.268 -0.172,0.425 -0.727,1.69 -2.738,5.257 -3.623,6.81 -0.757,-2.233 -1.426,-4.322 -1.986,-6.212 2.555,-4.6748 4.112,-12.6862 4.112,-12.6862 0,0 -0.135,0.5192 -0.777,2.3313 -0.57,1.6027 -3.409,6.5769 -4.0815,7.7398 -1.1504,-4.2468 -1.6075,-7.114 -1.1953,-7.8121 0.8003,-1.3527 1.5625,-3.6867 2.2318,-6.2679 1.512,-5.8149 2.563,-12.8938 2.563,-12.8938 0,0 0.034,-0.4691 0.091,-1.191 -0.21,-4.8832 -0.084,-9.9461 0.294,-14.5223 0.501,-6.0578 1.444,-11.2617 2.646,-14.0468 l 0.816,0.4449 c -1.765,5.4871 -2.482,12.6781 -2.168,20.9711 0.475,12.6761 3.392,27.9629 8.782,43.896 9.106,24.052 21.74,43.35 33.303,52.566 -10.539,-9.518 -24.803,-40.327 -29.073,-51.736 -4.781,-12.776 -8.169,-24.7651 -10.211,-36.2518 3.523,10.7687 14.914,15.3976 14.914,15.3976 0,0 5.587,6.8903 12.116,16.7342 -3.911,-0.892 -10.333,-2.419 -12.484,-3.323 -3.173,-1.331 -4.028,-1.785 -4.028,-1.785 0,0 10.278,6.259 19.096,9.093 12.127,19.1 25.339,46.234 12.034,58.103"
+        style="fill:#003b57;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3045"
+        inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

package/templates/client/public/svelte.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 98.1 118" style="enable-background:new 0 0 98.1 118;" xml:space="preserve">
+  <style type="text/css">
+    .st0 {
+      fill: #FF3E00;
+    }
+
+    .st1 {
+      fill: #FFFFFF;
+    }
+  </style>
+  <path class="st0" d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3
+	c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1
+	c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6" />
+  <path class="st1" d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1
+	c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72
+	c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7
+	c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5
+	c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1
+	c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1
+	c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5
+	c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9" />
+</svg>

package/templates/client/public/sync.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff">
+  <path
+    d="M160-160v-80h110l-16-14q-52-46-73-105t-21-119q0-111 66.5-197.5T400-790v84q-72 26-116 88.5T240-478q0 45 17 87.5t53 78.5l10 10v-98h80v240H160Zm400-10v-84q72-26 116-88.5T720-482q0-45-17-87.5T650-648l-10-10v98h-80v-240h240v80H690l16 14q49 49 71.5 106.5T800-482q0 111-66.5 197.5T560-170Z" />
+</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/chat/App.svelte.hbs

@@ -0,0 +1,31 @@
+{{includeFile template="client/src/chat/settingsStore.ts.hbs" output="client/src/settingsStore.ts"}}
+{{includeFile template="client/src/chat/chatStore.ts.hbs" output="client/src/chatStore.ts"}}
+{{includeFile template="client/src/shared/Loading.svelte.hbs" output="client/src/Loading.svelte"}}
+{{includeFile template="client/src/chat/UsernameInput.svelte.hbs" output="client/src/UsernameInput.svelte"}}
+{{includeFile template="client/src/chat/Messages.svelte.hbs" output="client/src/Messages.svelte"}}
+{{includeFile template="client/src/chat/MessageInput.svelte.hbs" output="client/src/MessageInput.svelte"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import {onMount} from 'svelte';
+import Loading from './Loading.svelte';
+import MessageInput from './MessageInput.svelte';
+import Messages from './Messages.svelte';
+import UsernameInput from './UsernameInput.svelte';
+import {chatStoreReady} from './chatStore';
+import {settingsStoreReady} from './settingsStore';
+
+let loading = $state(true);
+
+onMount(async () => {
+await Promise.all([settingsStoreReady, chatStoreReady]);
+loading = false;
+});
+</script>
+
+{#if loading}
+  <Loading />
+{:else}
+  <UsernameInput />
+  <Messages />
+  <MessageInput />
+{/if}

package/templates/client/src/chat/Message.svelte.hbs

@@ -0,0 +1,17 @@
+{{includeFile template="client/src/chat/message.css.hbs" output="client/src/message.css"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './message.css';
+{{#if typescript}}import type {MessageRow} from './chatStore';{{/if}}
+
+let {message}{{#if typescript}}: {message: MessageRow}{{/if}} = $props();
+
+const getTime = (timestamp{{#if typescript}}: number{{/if}}) =>
+  new Date(timestamp).toLocaleTimeString();
+</script>
+
+<div class="message">
+  <span class="username">{message.username}:</span>
+  <span class="text">{message.text}</span>
+  <span class="time">{getTime(message.timestamp)}</span>
+</div>

package/templates/client/src/chat/MessageInput.svelte.hbs

@@ -0,0 +1,53 @@
+{{includeFile template="client/src/shared/button.css.hbs" output="client/src/button.css"}}
+{{includeFile template="client/src/shared/input.css.hbs" output="client/src/input.css"}}
+{{includeFile template="client/src/chat/messageInput.css.hbs" output="client/src/messageInput.css"}}
+
+<script{{#if typescript}} lang="ts"{{/if}}>
+import './button.css';
+import './input.css';
+import './messageInput.css';
+import {onMount} from 'svelte';
+import {chatStore} from './chatStore';
+import {settingsStore} from './settingsStore';
+
+let message = $state('');
+let input{{#if typescript}}: HTMLInputElement | undefined{{/if}};
+
+const sendMessage = () => {
+const text = message.trim();
+if (!text) {
+return;
+}
+
+const username =
+  {{#if typescript}}(settingsStore.getValue('username') as string | undefined) ?? 'Anonymous'{{else}}settingsStore.getValue('username') ?? 'Anonymous'{{/if}};
+
+chatStore.addRow('messages', {
+username,
+text,
+timestamp: Date.now(),
+});
+
+message = '';
+input?.focus();
+};
+
+const handleSubmit = (event{{#if typescript}}: SubmitEvent{{/if}}) => {
+event.preventDefault();
+sendMessage();
+};
+
+onMount(() => {
+input?.focus();
+});
+</script>
+
+<form id="messageInput" onsubmit={handleSubmit}>
+  <input
+    bind:this={input}
+    bind:value={message}
+    type="text"
+    placeholder="Type a message..."
+  />
+  <button class="primary" type="submit">Send</button>
+</form>