create-tinybase 0.2.4 → 0.3.0

package/templates/client/src/drawing/BrushSize.tsx.hbs

@@ -1,22 +1,19 @@
 {{includeFile template="client/src/drawing/brushSize.css.hbs" output="client/src/brushSize.css"}}
-import {useValue, useSetValueCallback, STORE_ID} from './SettingsStore';
-import './brushSize.css';
+{{addImport "import {useValueState, STORE_ID} from './SettingsStore';"}}
+{{addImport "import './brushSize.css';"}}
 
 export const BrushSize = () => {
-const size = useValue('brushSize', STORE_ID) ?? 5;
+const [size, setSize] = useValueState('brushSize', STORE_ID);
 
-const setSize = useSetValueCallback(
-'brushSize',
-(e: React.ChangeEvent<HTMLInputElement>) => parseInt(e.target.value),
-  [],
-  STORE_ID,
-  );
+const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  setSize(parseInt(e.target.value));
+  };
 
   return (
   <div id="brushSize">
     <label>Size:</label>
-    <input type="range" min="1" max="50" value={size} onChange={setSize} />
+    <input type="range" min="1" max="50" value={(size as number) ?? 5} onChange={handleChange} />
     <span id="brushSizeValue">{size}</span>
   </div>
   );
-  };
+  };

package/templates/client/src/drawing/Canvas.tsx.hbs

@@ -1,16 +1,18 @@
 {{includeFile template="client/src/drawing/canvas.css.hbs" output="client/src/canvas.css"}}
-import {useCallback, useEffect, useRef} from 'react';
-import {useTable, useStore, STORE_ID as CANVAS_STORE_ID} from './CanvasStore';
-import {useValues, STORE_ID as SETTINGS_STORE_ID} from './SettingsStore';
-import {getUniqueId} from 'tinybase';
-import './canvas.css';
+{{addImport "import {useCallback, useEffect, useRef} from 'react';"}}
+{{addImport "import {useSortedRowIds, useTable, useStore, type StrokeRow, STORE_ID as CANVAS_STORE_ID} from './CanvasStore';"}}
+{{addImport "import {useValues, STORE_ID as SETTINGS_STORE_ID} from './SettingsStore';"}}
+{{addImport "import {getHlcFunctions} from 'tinybase';"}}
+{{addImport "import './canvas.css';"}}
+
+const [getNextHlc] = getHlcFunctions();
 
 export const Canvas = () => {
 const canvasRef = useRef<HTMLCanvasElement>(null);
   const isDrawing = useRef(false);
   const currentStrokeId = useRef<string | null>(null);
-    const pointIndex = useRef(0);
-    const brush = useValues(SETTINGS_STORE_ID);
+    const {brushColor, brushSize} = useValues(SETTINGS_STORE_ID);
+    const sortedIds = useSortedRowIds('strokes', undefined, false, 0, undefined, CANVAS_STORE_ID);
     const strokes = useTable('strokes', CANVAS_STORE_ID);
     const store = useStore(CANVAS_STORE_ID);
 
@@ -24,77 +26,67 @@ const canvasRef = useRef<HTMLCanvasElement>(null);
     ctx.fillStyle = '#111';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-    Object.entries(strokes).forEach(([id, stroke]) => {
-    if (stroke) {
-    const points: Array<{x: number; y: number}> = [];
-      let i = 0;
-      while (stroke[`x${i}`] !== undefined && stroke[`y${i}`] !== undefined) {
-      points.push({x: stroke[`x${i}`] as number, y: stroke[`y${i}`] as number});
-      i++;
-      }
-      if (points.length > 0) {
-      ctx.strokeStyle = stroke.color as string;
-      ctx.lineWidth = (stroke.size as number) * 2;
-      ctx.lineCap = 'round';
-      ctx.lineJoin = 'round';
-      ctx.beginPath();
-      ctx.moveTo(points[0].x, points[0].y);
-      for (let i = 1; i < points.length; i++) { ctx.lineTo(points[i].x, points[i].y); } ctx.stroke(); } } }); }, [strokes]); useEffect(()=> {
-        draw();
-        }, [draw]);
-
-        const getPoint = (e: MouseEvent | TouchEvent) => {
-        const canvas = canvasRef.current;
-        if (!canvas) return null;
+    sortedIds.forEach((id) => {
+    const stroke = store?.getRow('strokes', id) as StrokeRow;
+    if (stroke?.points) {
+    const pointsArray = JSON.parse(stroke.points) as number[];
+    if (pointsArray.length >= 2) {
+    ctx.strokeStyle = stroke.color;
+    ctx.lineWidth = stroke.size * 2;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    ctx.moveTo(pointsArray[0], pointsArray[1]);
+    for (let i = 2; i < pointsArray.length; i +=2) { ctx.lineTo(pointsArray[i], pointsArray[i + 1]); } ctx.stroke(); } } }); }, [sortedIds, strokes, store]); useEffect(()=> {
+      draw();
+      }, [draw]);
 
-        const rect = canvas.getBoundingClientRect();
-        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
-        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+      const getPoint = (e: MouseEvent | TouchEvent) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return null;
 
-        return {
-        x: clientX - rect.left,
-        y: clientY - rect.top,
-        };
-        };
+      const rect = canvas.getBoundingClientRect();
+      const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+      const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
 
-        const handleStart = (e: React.MouseEvent | React.TouchEvent) => {
-        isDrawing.current = true;
-        pointIndex.current = 0;
-        currentStrokeId.current = getUniqueId();
+      return {
+      x: clientX - rect.left,
+      y: clientY - rect.top,
+      };
+      };
 
-        store.setRow('strokes', currentStrokeId.current, {
-        color: brush.brushColor,
-        size: brush.brushSize,
-        });
+      const handleStart = (e: React.MouseEvent | React.TouchEvent) => {
+      isDrawing.current = true;
+      currentStrokeId.current = getNextHlc();
 
-        const point = getPoint(e.nativeEvent);
-        if (point) {
-        store.setCell('strokes', currentStrokeId.current, 'x0', point.x);
-        store.setCell('strokes', currentStrokeId.current, 'y0', point.y);
-        pointIndex.current = 1;
-        }
-        };
+      const point = getPoint(e.nativeEvent);
+      if (point && store) {
+      store.setRow('strokes', currentStrokeId.current, {
+      color: brushColor,
+      size: brushSize,
+      points: JSON.stringify([point.x, point.y]),
+      });
+      }
+      };
 
-        const handleMove = (e: React.MouseEvent | React.TouchEvent) => {
-        if (isDrawing.current && currentStrokeId.current) {
-        const point = getPoint(e.nativeEvent);
-        if (point) {
-        const idx = pointIndex.current;
-        store.setCell('strokes', currentStrokeId.current, `x${idx}`, point.x);
-        store.setCell('strokes', currentStrokeId.current, `y${idx}`, point.y);
-        pointIndex.current++;
-        }
-        }
-        };
+      const handleMove = (e: React.MouseEvent | React.TouchEvent) => {
+      if (isDrawing.current && currentStrokeId.current && store) {
+      const point = getPoint(e.nativeEvent);
+      if (point) {
+      const pointsArray = JSON.parse(store.getCell('strokes', currentStrokeId.current, 'points') as string ?? '[]');
+      pointsArray.push(point.x, point.y);
+      store.setCell('strokes', currentStrokeId.current, 'points', JSON.stringify(pointsArray));
+      }
+      }
+      };
 
-        const handleEnd = () => {
-        isDrawing.current = false;
-        currentStrokeId.current = null;
-        pointIndex.current = 0;
-        };
+      const handleEnd = () => {
+      isDrawing.current = false;
+      currentStrokeId.current = null;
+      };
 
-        return (
-        <canvas ref={canvasRef} width={600} height={400} id="drawingCanvas" onMouseDown={handleStart} onMouseMove={handleMove} onMouseUp={handleEnd} onMouseLeave={handleEnd} onTouchStart={handleStart} onTouchMove={handleMove}
-          onTouchEnd={handleEnd} />
-        );
-        };
+      return (
+      <canvas ref={canvasRef} width={600} height={400} id="drawingCanvas" onMouseDown={handleStart} onMouseMove={handleMove} onMouseUp={handleEnd} onMouseLeave={handleEnd} onTouchStart={handleStart} onTouchMove={handleMove}
+        onTouchEnd={handleEnd} />
+      );
+      };

package/templates/client/src/drawing/CanvasStore.tsx.hbs

@@ -1,48 +1,127 @@
 {{#if schemas}}
-  import {createMergeableStore} from 'tinybase/with-schemas';
-  import * as UiReact from 'tinybase/ui-react/with-schemas';
-  import {type NoValuesSchema} from 'tinybase/with-schemas';
+  {{addImport "import {createMergeableStore, type Row} from 'tinybase/with-schemas';"}}
+  {{addImport "import * as UiReact from 'tinybase/ui-react/with-schemas';"}}
+  {{addImport "import {type NoValuesSchema} from 'tinybase/with-schemas';"}}
 {{else}}
-  import {createMergeableStore} from 'tinybase';
-  import {useCreateStore, useProvideStore, useAddRowCallback, useDelTableCallback, useRow, useRowIds, useStore, useTable} from 'tinybase/ui-react';
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
+  {{addImport "import {useCreateMergeableStore, useProvideStore, useDelTableCallback, useRow, useSortedRowIds, useStore, useTable} from 'tinybase/ui-react';"}}
 {{/if}}
-import {getUniqueId} from 'tinybase';
 
 export const STORE_ID = 'canvas';
 
 {{#if schemas}}
   const TABLES_SCHEMA = {
   strokes: {
-  color: {type: 'string'},
-  size: {type: 'number'},
+  color: {type: 'string', default: ''},
+  size: {type: 'number', default: 1},
+  points: {type: 'string', default: '[]'},
   },
   } as const;
 
   type Schemas = [typeof TABLES_SCHEMA, NoValuesSchema];
 
-  const {useCreateStore, useProvideStore, useAddRowCallback, useDelTableCallback, useRow, useRowIds, useStore, useTable} = UiReact as UiReact.WithSchemas<Schemas>;
+  const {useCreateMergeableStore, {{#if persist}}useCreatePersister, {{/if}}useDelTableCallback, useProvideStore, useRow, useSortedRowIds, useStore, useTable} = UiReact as UiReact.WithSchemas<Schemas>;
 {{/if}}
 
-export {useAddRowCallback, useDelTableCallback, useRow, useRowIds, useStore, useTable};
+export type StrokeRow = {{#if schemas}}Row<typeof TABLES_SCHEMA, 'strokes'>{{else}}{color: string; size: number; points: string}{{/if}};
 
-export const CanvasStore = () => {
-const store = useCreateStore(() =>
-createMergeableStore(STORE_ID){{#if schemas}}
+export {useDelTableCallback, useRow, useSortedRowIds, useStore, useTable};
+
+export const CanvasStore = ({onReady}: {onReady?: () => void}) => {
+const store = useCreateMergeableStore(() =>
+createMergeableStore(){{#if schemas}}
   .setTablesSchema(TABLES_SCHEMA){{/if}}
 .setDefaultContent([{strokes: {}}, {}]),
 );
 
 useProvideStore(STORE_ID, store);
 
+{{#if persist}}
+  {{#if persistLocalStorage}}
+    {{#if schemas}}
+      {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+
+    useCreatePersister(
+    store,
+    (store) => createLocalPersister(store, STORE_ID),
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+  {{#if persistSqlite}}
+    {{#if schemas}}
+      {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+    {{includeFile template="client/src/shared/sqlite.ts.hbs" output="client/src/sqlite.{{ext}}"}}
+    {{addImport "import {getDb} from './sqlite';"}}
+
+    useCreatePersister(
+    store,
+    async (store) => {
+    const {sqlite3, db} = await getDb();
+    return createSqliteWasmPersister(store, sqlite3, db, STORE_ID);
+    },
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+  {{#if persistPglite}}
+    {{#if schemas}}
+      {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+    {{includeFile template="client/src/shared/pglite.ts.hbs" output="client/src/pglite.{{ext}}"}}
+    {{addImport "import {getPgLite} from './pglite';"}}
+
+    useCreatePersister(
+    store,
+    async (store) => {
+    const pgLite = await getPgLite();
+    return await createPglitePersister(store, pgLite, 'canvas');
+    },
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+{{/if}}
+
 {{#if sync}}
   {{includeFile template="client/src/shared/config.ts.hbs" output="client/src/config.ts"}}
   {{addImport "import {SERVER} from './config';"}}
   {{addImport "import ReconnectingWebSocket from 'reconnecting-websocket';"}}
-  {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
-  {{addImport "import {useCreateSynchronizer} from 'tinybase/ui-react';"}}
-  {{addImport "import type {MergeableStore} from 'tinybase';"}}
+  {{#if schemas}}
+    {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client/with-schemas';"}}
+  {{else}}
+    {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
+  {{/if}}
+  {{#if schemas}}
+    {{addImport "import {useCreateSynchronizer} from 'tinybase/ui-react/with-schemas';"}}
+  {{else}}
+    {{addImport "import {useCreateSynchronizer} from 'tinybase/ui-react';"}}
+  {{/if}}
 
-  useCreateSynchronizer(store, async (store: MergeableStore) => {
+  useCreateSynchronizer(store, async (store) => {
   const serverPathId = location.pathname;
   const synchronizer = await createWsSynchronizer(
   store,
@@ -51,12 +130,19 @@ useProvideStore(STORE_ID, store);
   await synchronizer.startSync();
 
   synchronizer.getWebSocket().addEventListener('open', () => {
-  synchronizer.load().then(() => synchronizer.save());
+  synchronizer.load().then(() => {
+  synchronizer.save();
+  {{#unless persist}}onReady?.();{{/unless}}
+  });
   });
 
   return synchronizer;
   });
 {{/if}}
 
+{{#unless persist}}{{#unless sync}}
+    onReady?.();
+  {{/unless}}{{/unless}}
+
 return null;
 };

package/templates/client/src/drawing/ColorPicker.tsx.hbs

@@ -1,17 +1,10 @@
 {{includeFile template="client/src/drawing/colorPicker.css.hbs" output="client/src/colorPicker.css"}}
-import './colorPicker.css';
-import {useValue, useSetValueCallback, STORE_ID} from './SettingsStore';
+{{addImport "import './colorPicker.css';"}}
+{{addImport "import {useValueState, STORE_ID} from './SettingsStore';"}}
 
 export const ColorPicker = () => {
 const colors = ['#d81b60', '#1976d2', '#388e3c', '#f57c00', '#7b1fa2', '#fff'];
-const currentColor = useValue('brushColor', STORE_ID);
-
-const setColor = useSetValueCallback(
-'brushColor',
-(color: string) => color,
-[],
-STORE_ID,
-);
+const [currentColor, setColor] = useValueState('brushColor', STORE_ID);
 
 return (
 <div id="colorPicker">
@@ -21,4 +14,4 @@ return (
     ))}
 </div>
 );
-};
+};

package/templates/client/src/drawing/DrawingControls.tsx.hbs

@@ -1,18 +1,18 @@
 {{includeFile template="client/src/drawing/drawingControls.css.hbs" output="client/src/drawingControls.css"}}
-import './drawingControls.css';
-import {useDelTableCallback, STORE_ID} from './CanvasStore';
+{{addImport "import './drawingControls.css';"}}
+{{addImport "import {useDelTableCallback, STORE_ID} from './CanvasStore';"}}
 
 {{includeFile template="client/src/shared/Button.tsx.hbs" output="client/src/Button.{{ext}}"}}
-import {Button} from './Button';
+{{addImport "import {Button} from './Button';"}}
 
 {{includeFile template="client/src/drawing/ColorPicker.tsx.hbs" output="client/src/ColorPicker.{{ext}}"}}
-import {ColorPicker} from './ColorPicker';
+{{addImport "import {ColorPicker} from './ColorPicker';"}}
 
 {{includeFile template="client/src/drawing/BrushSize.tsx.hbs" output="client/src/BrushSize.{{ext}}"}}
-import {BrushSize} from './BrushSize';
+{{addImport "import {BrushSize} from './BrushSize';"}}
 
 export const DrawingControls = () => {
-const clearStrokes = useDelTableCallback('strokes', () => null, [], STORE_ID);
+const clearStrokes = useDelTableCallback('strokes', STORE_ID);
 
 return (
 <div id="drawingControls">
@@ -21,4 +21,4 @@ return (
   <Button onClick={clearStrokes} variant="primary">Clear</Button>
 </div>
 );
-};
+};

package/templates/client/src/drawing/SettingsStore.tsx.hbs

@@ -1,10 +1,10 @@
 {{#if schemas}}
-  import {createStore} from 'tinybase/with-schemas';
-  import * as UiReact from 'tinybase/ui-react/with-schemas';
-  import {type NoTablesSchema} from 'tinybase/with-schemas';
+  {{addImport "import {createStore} from 'tinybase/with-schemas';"}}
+  {{addImport "import * as UiReact from 'tinybase/ui-react/with-schemas';"}}
+  {{addImport "import {type NoTablesSchema} from 'tinybase/with-schemas';"}}
 {{else}}
-  import {createStore} from 'tinybase';
-  import {useCreateStore, useProvideStore, useValue, useSetValueCallback, useValues} from 'tinybase/ui-react';
+  {{addImport "import {createStore} from 'tinybase';"}}
+  {{addImport "import {useCreateStore, useProvideStore, useValueState, useValues} from 'tinybase/ui-react';"}}
 {{/if}}
 
 export const STORE_ID = 'settings';
@@ -17,12 +17,12 @@ export const STORE_ID = 'settings';
 
   type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
 
-  const {useCreateStore, useProvideStore, useValue, useSetValueCallback, useValues} = UiReact as UiReact.WithSchemas<Schemas>;
+  const {useCreateStore, {{#if persist}}useCreatePersister, {{/if}}useProvideStore, useValues, useValueState} = UiReact as UiReact.WithSchemas<Schemas>;
 {{/if}}
 
-export {useValue, useSetValueCallback, useValues};
+export {useValueState, useValues};
 
-export const SettingsStore = () => {
+export const SettingsStore = ({onReady}: {onReady?: () => void}) => {
 const store = useCreateStore(() =>
 createStore(){{#if schemas}}
   .setValuesSchema(VALUES_SCHEMA){{/if}}
@@ -32,5 +32,78 @@ createStore(){{#if schemas}}
 
 useProvideStore(STORE_ID, store);
 
+{{#if persist}}
+  {{#if persistLocalStorage}}
+    {{#if schemas}}
+      {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+
+    useCreatePersister(
+    store,
+    (store) => createLocalPersister(store, STORE_ID),
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+  {{#if persistSqlite}}
+    {{#if schemas}}
+      {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+    {{includeFile template="client/src/shared/sqlite.ts.hbs" output="client/src/sqlite.{{ext}}"}}
+    {{addImport "import {getDb} from './sqlite';"}}
+    useCreatePersister(
+    store,
+    async (store) => {
+    const {sqlite3, db} = await getDb();
+    return createSqliteWasmPersister(store, sqlite3, db, STORE_ID);
+    },
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+  {{#if persistPglite}}
+    {{#if schemas}}
+      {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+    {{includeFile template="client/src/shared/pglite.ts.hbs" output="client/src/pglite.{{ext}}"}}
+    {{addImport "import {getPgLite} from './pglite';"}}
+
+    useCreatePersister(
+    store,
+    async (store) => {
+    const pgLite = await getPgLite();
+    return await createPglitePersister(store, pgLite, STORE_ID);
+    },
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+{{/if}}
+
+{{#unless persist}}{{#unless sync}}
+    onReady?.();
+  {{/unless}}{{/unless}}
+
 return null;
 };

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

@@ -1,20 +1,30 @@
 {{includeFile template="client/src/drawing/settingsStore.ts.hbs" output="client/src/settingsStore.ts"}}
-import {settingsStore} from './settingsStore';
+{{addImport "import {settingsStore, settingsStoreReady} from './settingsStore';"}}
 
 {{includeFile template="client/src/drawing/canvasStore.ts.hbs" output="client/src/canvasStore.ts"}}
-import {canvasStore} from './canvasStore';
+{{addImport "import {canvasStore, canvasStoreReady} from './canvasStore';"}}
+
+{{includeFile template="client/src/shared/loading.ts.hbs" output="client/src/loading.{{ext}}"}}
+{{addImport "import {showLoading, hideLoading} from './loading';"}}
 
 {{includeFile template="client/src/drawing/drawingControls.ts.hbs" output="client/src/drawingControls.{{ext}}"}}
-import {createDrawingControls} from './drawingControls';
+{{addImport "import {createDrawingControls} from './drawingControls';"}}
 
 {{includeFile template="client/src/drawing/canvas.ts.hbs" output="client/src/canvas.{{ext}}"}}
-import {createCanvas} from './canvas';
+{{addImport "import {createCanvas} from './canvas';"}}
 
-const app = () => {
+export const app = async () => {
 const appContainer = document.getElementById('app')!;
 
+// Show loading spinner
+const loadingDiv = showLoading(appContainer);
+
+// Wait for stores to be ready
+await Promise.all([settingsStoreReady, canvasStoreReady]);
+
+// Remove loading spinner
+hideLoading(loadingDiv);
+
 appContainer.appendChild(createDrawingControls(settingsStore, canvasStore));
 appContainer.appendChild(createCanvas(settingsStore, canvasStore));
-};
-
-export {app};
+};

package/templates/client/src/drawing/brushSize.ts.hbs

@@ -1,6 +1,6 @@
 {{includeFile template="client/src/drawing/brushSize.css.hbs" output="client/src/brushSize.css"}}
-import './brushSize.css';
-import type {Store as SettingsStore} from './settingsStore';
+{{addImport "import './brushSize.css';"}}
+{{addImport "import type {SettingsStore} from './settingsStore';"}}
 
 export const createBrushSize = (store: SettingsStore): HTMLDivElement => {
 const container = document.createElement('div');
@@ -13,11 +13,15 @@ const sizeSlider = document.createElement('input');
 sizeSlider.type = 'range';
 sizeSlider.min = '1';
 sizeSlider.max = '50';
-sizeSlider.value = '5';
 
 const sizeLabel = document.createElement('span');
 sizeLabel.id = 'brushSizeValue';
-sizeLabel.textContent = '5';
+
+const updateSize = () => {
+const size = store.getValue('brushSize') ?? 5;
+sizeSlider.value = `${size}`;
+sizeLabel.textContent = `${size}`;
+};
 
 sizeSlider.addEventListener('input', () => {
 const size = parseInt(sizeSlider.value);
@@ -25,9 +29,12 @@ store.setValue('brushSize', size);
 sizeLabel.textContent = `${size}`;
 });
 
+store.addValueListener('brushSize', updateSize);
+updateSize();
+
 container.appendChild(label);
 container.appendChild(sizeSlider);
 container.appendChild(sizeLabel);
 
 return container;
-};
+};