From 3736d7278bd4d385cb7ebcaf0ecd0574a879208c Mon Sep 17 00:00:00 2001
From: Brian Kirkpatrick <bekirkpatrick@proton.me>
Date: Wed, 4 Mar 2026 14:18:44 -0800
Subject: [PATCH 1/8] finished pruning for lit-only demo

---
 README.md                       | 266 +++++++++++++++++---------------
 components/app-root.js          |  60 ++++---
 components/nav-bar.js           |  17 +-
 components/page-home.js         |  14 +-
 components/page-items.js        |  29 ++--
 controllers/store.js            |  23 ---
 index.html                      |   5 +-
 store/idb.js                    |  33 ----
 store/index.js                  |  42 -----
 store/middleware/persistence.js |   9 --
 10 files changed, 217 insertions(+), 281 deletions(-)
 delete mode 100644 controllers/store.js
 delete mode 100644 store/idb.js
 delete mode 100644 store/index.js
 delete mode 100644 store/middleware/persistence.js

diff --git a/README.md b/README.md
index 062e549..fb3507d 100644
--- a/README.md
+++ b/README.md
@@ -1,168 +1,113 @@
-# Lit + Zustand Architecture
+# Lit-Only Architecture (No Build)
 
-A simple (but modern & scalable) no-build web application architecture using Lit web components with Zustand state management and IndexedDB persistence.
+A minimal, no-build web application using only Lit web components with local state management.
+
+> **Note:** This is the `lit-only` branch. For the full-featured version with Zustand state management and IndexedDB persistence, see the `main` branch.
 
 ## For TSX/React Developers
 
-If you're coming from React/TSX, here's how this architecture maps to familiar concepts:
+If you're coming from React/TSX, here's how this minimal architecture maps to familiar concepts:
 
 | React/TSX Pattern | This Architecture |
 |-------------------|-------------------|
-| `useState` / `useReducer` | Zustand vanilla store |
-| `useEffect` + state subscription | `StoreController` (ReactiveController) |
-| Context API | Global Zustand store |
-| `localStorage` / `sessionStorage` | IndexedDB via persist middleware |
+| `useState` | Lit's `static properties` with `state: true` |
+| Props drilling | Property passing via `.prop=${value}` |
+| Custom events | `CustomEvent` with `bubbles: true` |
 | JSX | Lit's `html` tagged template literals |
 | CSS-in-JS / CSS Modules | Lit's `css` tagged template literals |
-| React Router | Simple route state in store |
+| React Router | Simple route state in root component |
 | Build step (Vite/Webpack) | Import maps (no build!) |
 
 ### Key Differences
 
 1. **No Virtual DOM**: Lit uses native Web Components with efficient DOM updates
 2. **No Build Step**: Import maps let you use npm packages directly from CDN
-3. **Reactive Controllers**: Replace hooks - attach to component lifecycle
-4. **Tagged Templates**: Instead of JSX, use `html\`<div>...</div>\``
+3. **Local State Only**: Each component manages its own state, parent manages shared state
+4. **Event-Based Communication**: Child components emit events, parent handles them
+5. **Tagged Templates**: Instead of JSX, use `html\`<div>...</div>\``
 
 ## Architecture Overview
 
 * **Lit-based web components** - Standards-based, framework-agnostic UI
 * **No-build tooling** - Import maps only, no bundler required
-* **Zustand state management** - Lightweight, vanilla JS store
-* **IndexedDB persistence** - Automatic state persistence with idb-keyval
+* **Local state management** - Component properties and state
+* **Event-driven** - CustomEvents for child-to-parent communication
 
-
-## Layout
+## Project Structure
 
 ```
-src/
-  store/
-    index.js          ← zustand store definition
-    middleware/
-      persistence.js  ← idb-keyval persist adapter
-      sync.js         ← optional cross-tab broadcast
-  components/
-    app-root.js
-    feature-a/
-      feature-a.js    ← Lit component
-      feature-a.css   ← adopted stylesheet or constructable
-  controllers/
-    fetch.js          ← ReactiveController for API calls
-    3d.js             ← optional Three/WebGPU controller
-  lib/
-    idb.js            ← thin idb-keyval wrapper/schema
-index.html
-importmap.json        ← extracted importmap (referenced via <script src>)
+components/
+  app-root.js       ← Root component with shared state
+  nav-bar.js        ← Navigation component
+  page-home.js      ← Home page component
+  page-items.js     ← Items page component
+index.html          ← Entry point with inline importmap
+README.md
+tasks.md
 ```
 
-## Data Flow Diagrams
+## Data Flow Pattern
 
-### Component-to-Store Pattern
+### Parent-to-Child (Props)
 
-```mermaid
-sequenceDiagram
-    participant User
-    participant LitComponent
-    participant StoreController
-    participant ZustandStore
-    participant IndexedDB
+```javascript
+// Parent passes data down
+html`<child-component .items=${this.items}></child-component>`
 
-    User->>LitComponent: Click button
-    LitComponent->>ZustandStore: Call action (e.g., addItem)
-    ZustandStore->>ZustandStore: Update state
-    ZustandStore->>IndexedDB: Persist (via middleware)
-    ZustandStore->>StoreController: Notify subscribers
-    StoreController->>LitComponent: requestUpdate()
-    LitComponent->>LitComponent: Re-render
-    LitComponent->>User: Show updated UI
+// Child receives via properties
+static properties = {
+  items: { type: Array }
+}
 ```
 
-### Store Subscription Pattern
+### Child-to-Parent (Events)
+
+```javascript
+// Child emits event
+this.dispatchEvent(new CustomEvent('add-item', {
+  detail: { item: newItem },
+  bubbles: true,
+  composed: true
+}))
+
+// Parent listens
+html`<child-component @add-item=${(e) => this.handleAdd(e.detail.item)}></child-component>`
+```
+
+## State Management Pattern
 
 ```mermaid
 graph TD
-    A[Zustand Store] -->|subscribe| B[StoreController]
-    B -->|selector function| C[Extract specific state]
-    C -->|value changed?| D{Compare}
-    D -->|Yes| E[host.requestUpdate]
-    D -->|No| F[Skip update]
-    E --> G[Lit re-renders component]
+    A[app-root] -->|.user, .items, .route| B[nav-bar]
+    A -->|.user, .items| C[page-home]
+    A -->|.items| D[page-items]
+    B -->|@navigate event| A
+    D -->|@add-item event| A
+    D -->|@remove-item event| A
     
     style A fill:#f9f,stroke:#333,stroke-width:2px
     style B fill:#bbf,stroke:#333,stroke-width:2px
-    style G fill:#bfb,stroke:#333,stroke-width:2px
-```
-
-### Complete Mental Model
-
-```
-┌─────────────────────────────────────────┐
-│           User Interaction              │
-└──────────────┬──────────────────────────┘
-               │ (events)
-               ▼
-┌─────────────────────────────────────────┐
-│        Lit Web Components               │
-│  - html`` templates (like JSX)          │
-│  - css`` styles (scoped)                │
-│  - Event handlers                       │
-└──────────────┬──────────────────────────┘
-               │ (actions)
-               ▼
-┌─────────────────────────────────────────┐
-│      StoreController (glue layer)       │
-│  - ReactiveController interface         │
-│  - Subscribes to store                  │
-│  - Triggers requestUpdate()             │
-└──────────────┬──────────────────────────┘
-               │ (selector)
-               ▼
-┌─────────────────────────────────────────┐
-│       Zustand Vanilla Store             │
-│  - Global state (like Context)          │
-│  - Actions (like reducers)              │
-│  - Subscriptions                        │
-└──────────────┬──────────────────────────┘
-               │ (persist middleware)
-               ▼
-┌─────────────────────────────────────────┐
-│  IndexedDB (via idb-keyval)             │
-│  - Automatic persistence                │
-│  - Async storage                        │
-└─────────────────────────────────────────┘
+    style C fill:#bfb,stroke:#333,stroke-width:2px
+    style D fill:#bfb,stroke:#333,stroke-width:2px
 ```
 
 ## Quick Start Example
 
-### 1. Define Store (like Redux/Zustand)
-
-```javascript
-// store/index.js
-import { createStore } from 'zustand/vanilla'
-import { persist } from 'zustand/middleware'
-
-export const store = createStore(
-  persist(
-    (set) => ({
-      count: 0,
-      increment: () => set(s => ({ count: s.count + 1 })),
-    }),
-    { name: 'my-store' }
-  )
-)
-```
-
-### 2. Create Component (like React component)
+### 1. Define a Component
 
 ```javascript
 // components/counter.js
 import { LitElement, html, css } from 'lit'
-import { StoreController } from '../controllers/store.js'
-import { store } from '../store/index.js'
 
 class Counter extends LitElement {
-  // Subscribe to store (like useSelector)
-  #count = new StoreController(this, store, s => s.count)
+  static properties = {
+    count: { type: Number, state: true }
+  }
+
+  constructor() {
+    super()
+    this.count = 0
+  }
 
   static styles = css`
     button { padding: 1rem; font-size: 1.2rem; }
@@ -171,8 +116,8 @@ class Counter extends LitElement {
   render() {
     return html`
       <div>
-        <p>Count: ${this.#count.value}</p>
-        <button @click=${() => store.getState().increment()}>
+        <p>Count: ${this.count}</p>
+        <button @click=${() => this.count++}>
           Increment
         </button>
       </div>
@@ -183,7 +128,7 @@ class Counter extends LitElement {
 customElements.define('my-counter', Counter)
 ```
 
-### 3. Use in HTML (no build step!)
+### 2. Use in HTML (no build step!)
 
 ```html
 <!DOCTYPE html>
@@ -192,9 +137,7 @@ customElements.define('my-counter', Counter)
   <script type="importmap">
   {
     "imports": {
-      "lit": "https://esm.sh/lit@3",
-      "zustand/vanilla": "https://esm.sh/zustand@5/vanilla",
-      "zustand/middleware": "https://esm.sh/zustand@5/middleware"
+      "lit": "https://esm.sh/lit@3"
     }
   }
   </script>
@@ -206,17 +149,88 @@ customElements.define('my-counter', Counter)
 </html>
 ```
 
+## Component Communication Patterns
+
+### Pattern 1: Shared State in Root
+
+```javascript
+class AppRoot extends LitElement {
+  static properties = {
+    items: { type: Array, state: true }
+  }
+
+  constructor() {
+    super()
+    this.items = []
+  }
+
+  addItem(item) {
+    this.items = [...this.items, item]
+  }
+
+  render() {
+    return html`
+      <child-component 
+        .items=${this.items}
+        @add=${(e) => this.addItem(e.detail.item)}
+      ></child-component>
+    `
+  }
+}
+```
+
+### Pattern 2: Local State in Component
+
+```javascript
+class MyComponent extends LitElement {
+  static properties = {
+    _draft: { type: String, state: true }
+  }
+
+  constructor() {
+    super()
+    this._draft = ''
+  }
+
+  render() {
+    return html`
+      <input 
+        .value=${this._draft}
+        @input=${e => this._draft = e.target.value}
+      />
+    `
+  }
+}
+```
+
 ## Benefits Over React/TSX
 
 ✅ **No build step** - Edit and refresh, instant feedback  
+✅ **Minimal dependencies** - Just Lit, nothing else  
 ✅ **Smaller bundle** - No framework runtime, just standards  
 ✅ **Better encapsulation** - Shadow DOM, scoped styles  
 ✅ **Framework agnostic** - Works anywhere, even in React apps  
 ✅ **Future-proof** - Built on web standards  
+✅ **Easy to learn** - Simple mental model, no complex state management
+
+## When to Use This vs. Full Stack
+
+### Use Lit-Only When:
+- Building small to medium apps
+- Don't need persistence
+- State is simple and hierarchical
+- Want maximum simplicity
+
+### Use Full Stack (main branch) When:
+- Need IndexedDB persistence
+- Complex state shared across many components
+- Need cross-tab synchronization
+- Want time-travel debugging
+- Building larger applications
 
 ## See Also
 
 - [tasks.md](./tasks.md) - Current issues and improvements
 - [Lit Documentation](https://lit.dev)
-- [Zustand Documentation](https://zustand.docs.pmnd.rs)
 - [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
+- [Import Maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)
diff --git a/components/app-root.js b/components/app-root.js
index 6fe53e9..88f59a6 100644
--- a/components/app-root.js
+++ b/components/app-root.js
@@ -1,44 +1,64 @@
 import { LitElement, html, css } from "lit";
-import { store} from "../store/index.js";
-import { StoreController } from "../controllers/store.js";
 import "./nav-bar.js";
 import "./page-home.js";
 import "./page-items.js";
 
 class AppRoot extends LitElement {
-    #hydrated = new StoreController(this, store, s => s._hydrated);
-    #user = new StoreController(this, store, s => s.user);
-    #route = new StoreController(this, store, s => s.route);
+    static properties = {
+        user: { type: Object, state: true },
+        route: { type: String, state: true },
+        items: { type: Array, state: true }
+    };
+
+    constructor() {
+        super();
+        this.user = null;
+        this.route = 'home';
+        this.items = [];
+    }
 
     static styles = css`
         :host {
             display: block;
             min-height: 100vh;
         }
-        
-        .loading {
-            display: grid;
-            place-items: center;
-            height: 100vh;
-            opacity: 0.4;
-        }
     `;
 
+    #navigate(route) {
+        this.route = route;
+    }
+
+    #addItem(item) {
+        this.items = [...this.items, item];
+    }
+
+    #removeItem(id) {
+        this.items = this.items.filter(i => i.id !== id);
+    }
+
     render() {
-        if (!this.#hydrated.value) {
-            return html`<div class="loading">loading...</div>`;
-        }
         return html`
-            <nav-bar .user=${this.#user.value}></nav-bar>
+            <nav-bar 
+                .user=${this.user}
+                .route=${this.route}
+                @navigate=${(e) => this.#navigate(e.detail.route)}
+            ></nav-bar>
             <main>${this.#renderRoute()}</main>
         `;
     }
 
     #renderRoute() {
-        switch (this.#route.value) {
-            case "home": return html`<page-home></page-home>`;
-            case "items": return html`<page-items></page-items>`;
-            default: return html`<page-home></page-home>`;
+        switch (this.route) {
+            case "home": 
+                return html`<page-home .user=${this.user} .items=${this.items}></page-home>`;
+            case "items": 
+                return html`<page-items 
+                    .items=${this.items}
+                    @add-item=${(e) => this.#addItem(e.detail.item)}
+                    @remove-item=${(e) => this.#removeItem(e.detail.id)}
+                ></page-items>`;
+            default: 
+                return html`<page-home .user=${this.user} .items=${this.items}></page-home>`;
         }
     }
 }
diff --git a/components/nav-bar.js b/components/nav-bar.js
index 1b6e241..6f192a1 100644
--- a/components/nav-bar.js
+++ b/components/nav-bar.js
@@ -1,13 +1,10 @@
 // components/nav-bar.js
 import { LitElement, html, css } from 'lit'
-import { store } from '../store/index.js'
-import { StoreController } from '../controllers/store.js'
 
 class NavBar extends LitElement {
-  #route = new StoreController(this, store, s => s.route)
-
   static properties = {
-    user: { type: Object }
+    user: { type: Object },
+    route: { type: String }
   }
 
   static styles = css`
@@ -35,14 +32,18 @@ class NavBar extends LitElement {
 
   #navigate(route, e) {
     e.preventDefault()
-    store.getState().navigate(route)
+    this.dispatchEvent(new CustomEvent('navigate', { 
+      detail: { route },
+      bubbles: true,
+      composed: true
+    }))
   }
 
   #link(route, label) {
     return html`
       <a
         href="/${route}"
-        ?active=${this.#route.value === route}
+        ?active=${this.route === route}
         @click=${(e) => this.#navigate(route, e)}
       >${label}</a>
     `
@@ -61,4 +62,4 @@ class NavBar extends LitElement {
   }
 }
 
-customElements.define('nav-bar', NavBar)
\ No newline at end of file
+customElements.define('nav-bar', NavBar)
diff --git a/components/page-home.js b/components/page-home.js
index 5d71b8a..3d5c616 100644
--- a/components/page-home.js
+++ b/components/page-home.js
@@ -1,11 +1,11 @@
 // components/page-home.js
 import { LitElement, html, css } from 'lit'
-import { store } from '../store/index.js'
-import { StoreController } from '../controllers/store.js'
 
 class PageHome extends LitElement {
-  #user  = new StoreController(this, store, s => s.user)
-  #items = new StoreController(this, store, s => s.items)
+  static properties = {
+    user: { type: Object },
+    items: { type: Array }
+  }
 
   static styles = css`
     :host { display: block; padding: 2rem 1.5rem; }
@@ -25,8 +25,8 @@ class PageHome extends LitElement {
   `
 
   render() {
-    const name = this.#user.value?.name ?? 'there'
-    const count = this.#items.value.length
+    const name = this.user?.name ?? 'there'
+    const count = this.items?.length ?? 0
 
     return html`
       <h1>Hey, ${name}</h1>
@@ -41,4 +41,4 @@ class PageHome extends LitElement {
   }
 }
 
-customElements.define('page-home', PageHome)
\ No newline at end of file
+customElements.define('page-home', PageHome)
diff --git a/components/page-items.js b/components/page-items.js
index efdcf96..f788396 100644
--- a/components/page-items.js
+++ b/components/page-items.js
@@ -1,16 +1,17 @@
 // components/page-items.js
 import { LitElement, html, css } from 'lit'
-import { store } from '../store/index.js'
-import { StoreController } from '../controllers/store.js'
 
 class PageItems extends LitElement {
-  #items = new StoreController(this, store, s => s.items)
-
   static properties = {
+    items: { type: Array },
     _draft: { type: String, state: true }
   }
 
-  _draft = ''
+  constructor() {
+    super();
+    this.items = [];
+    this._draft = '';
+  }
 
   static styles = css`
     :host { display: block; padding: 2rem 1.5rem; }
@@ -63,12 +64,22 @@ class PageItems extends LitElement {
   #add() {
     const name = this._draft.trim()
     if (!name) return
-    store.getState().addItem({ id: crypto.randomUUID(), name })
+    
+    this.dispatchEvent(new CustomEvent('add-item', {
+      detail: { item: { id: crypto.randomUUID(), name } },
+      bubbles: true,
+      composed: true
+    }))
+    
     this._draft = ''
   }
 
   #remove(id) {
-    store.getState().removeItem(id)
+    this.dispatchEvent(new CustomEvent('remove-item', {
+      detail: { id },
+      bubbles: true,
+      composed: true
+    }))
   }
 
   #onKeydown(e) {
@@ -76,7 +87,7 @@ class PageItems extends LitElement {
   }
 
   render() {
-    const items = this.#items.value
+    const items = this.items ?? []
 
     return html`
       <h1>Items</h1>
@@ -108,4 +119,4 @@ class PageItems extends LitElement {
   }
 }
 
-customElements.define('page-items', PageItems)
\ No newline at end of file
+customElements.define('page-items', PageItems)
diff --git a/controllers/store.js b/controllers/store.js
deleted file mode 100644
index 998294d..0000000
--- a/controllers/store.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export class StoreController {
-    constructor(host, store, selector) {
-      this.host = host
-      this.store = store
-      this.selector = selector
-      host.addController(this)
-    }
-  
-    hostConnected() {
-      this._unsub = this.store.subscribe(
-        (state) => {
-          const next = this.selector(state)
-          if (next !== this.value) {
-            this.value = next
-            this.host.requestUpdate()
-          }
-        }
-      )
-      this.value = this.selector(this.store.getState())
-    }
-  
-    hostDisconnected() { this._unsub?.() }
-  }
\ No newline at end of file
diff --git a/index.html b/index.html
index 51c53cd..879175b 100644
--- a/index.html
+++ b/index.html
@@ -8,10 +8,7 @@
     {
         "imports": {
             "lit": "https://esm.sh/lit@3",
-            "lit/decorators.js": "https://esm.sh/lit@3/decorators.js",
-            "zustand/vanilla": "https://esm.sh/zustand@5/vanilla",
-            "zustand/middleware": "https://esm.sh/zustand@5/middleware",
-            "idb-keyval": "https://esm.sh/idb-keyval@6"
+            "lit/decorators.js": "https://esm.sh/lit@3/decorators.js"
         }
     }
     </script>
diff --git a/store/idb.js b/store/idb.js
deleted file mode 100644
index e276f00..0000000
--- a/store/idb.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// lib/idb.js
-import { createStore, get, set, del, entries, clear } from 'idb-keyval'
-
-// Named stores — each maps to a distinct IDBObjectStore
-export const itemsStore = createStore('app-db', 'items')
-export const userStore  = createStore('app-db', 'user')
-export const cacheStore = createStore('app-db', 'cache')
-
-// Typed wrappers — keeps raw idb-keyval calls out of the rest of the app
-// and gives you one place to add validation, logging, or migration logic
-
-export const db = {
-  items: {
-    getAll:  ()          => entries(itemsStore),
-    get:     (id)        => get(id, itemsStore),
-    set:     (id, value) => set(id, value, itemsStore),
-    remove:  (id)        => del(id, itemsStore),
-    clear:   ()          => clear(itemsStore),
-  },
-
-  user: {
-    get:   ()      => get('user', userStore),
-    set:   (value) => set('user', value, userStore),
-    clear: ()      => del('user', userStore),
-  },
-
-  cache: {
-    get:   (key)         => get(key, cacheStore),
-    set:   (key, value)  => set(key, value, cacheStore),
-    remove: (key)        => del(key, cacheStore),
-    clear: ()            => clear(cacheStore),
-  }
-}
\ No newline at end of file
diff --git a/store/index.js b/store/index.js
deleted file mode 100644
index 86bedc5..0000000
--- a/store/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { createStore } from 'zustand/vanilla'
-import { persist, createJSONStorage } from 'zustand/middleware'
-import { get, set, del } from 'idb-keyval'
-
-const storage = createJSONStorage(() => ({
-  getItem: async (name) => {
-    const value = await get(name)
-    return value ?? null
-  },
-  setItem: async (name, value) => {
-    await set(name, value)
-  },
-  removeItem: async (name) => {
-    await del(name)
-  },
-}))
-
-export const store = createStore(
-  persist(
-    (set, get) => ({
-      _hydrated: false,
-      user: null,
-      items: [],
-      route: 'home',
-      setUser: (user) => set({ user }),
-      addItem: (item) => set(s => ({ items: [...s.items, item] })),
-      removeItem: (id) => set(s => ({ items: s.items.filter(i => i.id !== id) })),
-      navigate: (route) => set({ route }),
-    }),
-    {
-      name: 'app-store',
-      storage,
-      onRehydrateStorage: () => {
-        return (state, error) => {
-          if (!error) {
-            store.setState({ _hydrated: true })
-          }
-        }
-      },
-    }
-  )
-)
diff --git a/store/middleware/persistence.js b/store/middleware/persistence.js
deleted file mode 100644
index 75552f1..0000000
--- a/store/middleware/persistence.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// store/middleware/persistence.js
-import { db } from '../idb.js'
-
-export const makeIdbStorage = (storeName) =>
-  createJSONStorage(() => ({
-    getItem:    (name)        => db[storeName].get(name),
-    setItem:    (name, value) => db[storeName].set(name, value),
-    removeItem: (name)        => db[storeName].remove(name),
-  }))
\ No newline at end of file

From 3a819e6fe19e31b7df8f579f169cf521e55a0992 Mon Sep 17 00:00:00 2001
From: Brian Kirkpatrick <bekirkpatrick@proton.me>
Date: Wed, 4 Mar 2026 17:45:32 -0800
Subject: [PATCH 2/8] streamlining readme

---
 README.md | 214 ++++++++++--------------------------------------------
 1 file changed, 38 insertions(+), 176 deletions(-)

diff --git a/README.md b/README.md
index fb3507d..d2e4df2 100644
--- a/README.md
+++ b/README.md
@@ -1,95 +1,7 @@
-# Lit-Only Architecture (No Build)
+# zulip
 
-A minimal, no-build web application using only Lit web components with local state management.
+A minimal, no-build web app kit using only Lit-based web components via importmaps.
 
-> **Note:** This is the `lit-only` branch. For the full-featured version with Zustand state management and IndexedDB persistence, see the `main` branch.
-
-## For TSX/React Developers
-
-If you're coming from React/TSX, here's how this minimal architecture maps to familiar concepts:
-
-| React/TSX Pattern | This Architecture |
-|-------------------|-------------------|
-| `useState` | Lit's `static properties` with `state: true` |
-| Props drilling | Property passing via `.prop=${value}` |
-| Custom events | `CustomEvent` with `bubbles: true` |
-| JSX | Lit's `html` tagged template literals |
-| CSS-in-JS / CSS Modules | Lit's `css` tagged template literals |
-| React Router | Simple route state in root component |
-| Build step (Vite/Webpack) | Import maps (no build!) |
-
-### Key Differences
-
-1. **No Virtual DOM**: Lit uses native Web Components with efficient DOM updates
-2. **No Build Step**: Import maps let you use npm packages directly from CDN
-3. **Local State Only**: Each component manages its own state, parent manages shared state
-4. **Event-Based Communication**: Child components emit events, parent handles them
-5. **Tagged Templates**: Instead of JSX, use `html\`<div>...</div>\``
-
-## Architecture Overview
-
-* **Lit-based web components** - Standards-based, framework-agnostic UI
-* **No-build tooling** - Import maps only, no bundler required
-* **Local state management** - Component properties and state
-* **Event-driven** - CustomEvents for child-to-parent communication
-
-## Project Structure
-
-```
-components/
-  app-root.js       ← Root component with shared state
-  nav-bar.js        ← Navigation component
-  page-home.js      ← Home page component
-  page-items.js     ← Items page component
-index.html          ← Entry point with inline importmap
-README.md
-tasks.md
-```
-
-## Data Flow Pattern
-
-### Parent-to-Child (Props)
-
-```javascript
-// Parent passes data down
-html`<child-component .items=${this.items}></child-component>`
-
-// Child receives via properties
-static properties = {
-  items: { type: Array }
-}
-```
-
-### Child-to-Parent (Events)
-
-```javascript
-// Child emits event
-this.dispatchEvent(new CustomEvent('add-item', {
-  detail: { item: newItem },
-  bubbles: true,
-  composed: true
-}))
-
-// Parent listens
-html`<child-component @add-item=${(e) => this.handleAdd(e.detail.item)}></child-component>`
-```
-
-## State Management Pattern
-
-```mermaid
-graph TD
-    A[app-root] -->|.user, .items, .route| B[nav-bar]
-    A -->|.user, .items| C[page-home]
-    A -->|.items| D[page-items]
-    B -->|@navigate event| A
-    D -->|@add-item event| A
-    D -->|@remove-item event| A
-    
-    style A fill:#f9f,stroke:#333,stroke-width:2px
-    style B fill:#bbf,stroke:#333,stroke-width:2px
-    style C fill:#bfb,stroke:#333,stroke-width:2px
-    style D fill:#bfb,stroke:#333,stroke-width:2px
-```
 
 ## Quick Start Example
 
@@ -128,109 +40,59 @@ class Counter extends LitElement {
 customElements.define('my-counter', Counter)
 ```
 
-### 2. Use in HTML (no build step!)
+### 2. Use in App root (or other composition node)
 
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <script type="importmap">
-  {
-    "imports": {
-      "lit": "https://esm.sh/lit@3"
-    }
-  }
-  </script>
-</head>
-<body>
-  <script type="module" src="components/counter.js"></script>
-  <my-counter></my-counter>
-</body>
-</html>
-```
+```js
+import "./my-counter.js";
 
-## Component Communication Patterns
-
-### Pattern 1: Shared State in Root
-
-```javascript
 class AppRoot extends LitElement {
-  static properties = {
-    items: { type: Array, state: true }
-  }
-
-  constructor() {
-    super()
-    this.items = []
-  }
-
-  addItem(item) {
-    this.items = [...this.items, item]
-  }
-
+  ...
   render() {
-    return html`
-      <child-component 
-        .items=${this.items}
-        @add=${(e) => this.addItem(e.detail.item)}
-      ></child-component>
-    `
+    return html`<my-counter .count=${0}></my-counter>`;
   }
 }
 ```
 
-### Pattern 2: Local State in Component
+### 3. Define Data Flows
+
+#### Parent-to-Child (Props)
 
 ```javascript
-class MyComponent extends LitElement {
-  static properties = {
-    _draft: { type: String, state: true }
-  }
+// Parent passes data down
+html`<child-component .items=${this.items}></child-component>`
 
-  constructor() {
-    super()
-    this._draft = ''
-  }
-
-  render() {
-    return html`
-      <input 
-        .value=${this._draft}
-        @input=${e => this._draft = e.target.value}
-      />
-    `
-  }
+// Child receives via properties
+static properties = {
+  items: { type: Array }
 }
 ```
 
-## Benefits Over React/TSX
+#### Child-to-Parent (Events)
 
-✅ **No build step** - Edit and refresh, instant feedback  
-✅ **Minimal dependencies** - Just Lit, nothing else  
-✅ **Smaller bundle** - No framework runtime, just standards  
-✅ **Better encapsulation** - Shadow DOM, scoped styles  
-✅ **Framework agnostic** - Works anywhere, even in React apps  
-✅ **Future-proof** - Built on web standards  
-✅ **Easy to learn** - Simple mental model, no complex state management
+```javascript
+// Child emits event
+this.dispatchEvent(new CustomEvent('add-item', {
+  detail: { item: newItem },
+  bubbles: true,
+  composed: true
+}))
 
-## When to Use This vs. Full Stack
+// Parent listens
+html`<child-component @add-item=${(e) => this.handleAdd(e.detail.item)}></child-component>`
+```
 
-### Use Lit-Only When:
-- Building small to medium apps
-- Don't need persistence
-- State is simple and hierarchical
-- Want maximum simplicity
+## Benefits Over TSX
 
-### Use Full Stack (main branch) When:
-- Need IndexedDB persistence
-- Complex state shared across many components
-- Need cross-tab synchronization
-- Want time-travel debugging
-- Building larger applications
+1. **No build step** - Edit and refresh, instant feedback  
 
-## See Also
+1. **Minimal dependencies** - Just Lit, nothing else  
 
-- [tasks.md](./tasks.md) - Current issues and improvements
-- [Lit Documentation](https://lit.dev)
-- [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
-- [Import Maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)
+1. **Smaller bundle** - No framework runtime, just standards  
+
+1. **Better encapsulation** - Shadow DOM, scoped styles  
+
+1. **Framework agnostic** - Works anywhere, even in React apps  
+
+1. **Future-proof** - Built on web standards  
+
+1. **Easy to learn** - Simple mental model for state, with natural evolution into Zustand/IndexedDB or similar extensions

From 9ebc2ee5fe841bca531bf0eacb79fd2d3e64258e Mon Sep 17 00:00:00 2001
From: Brian Kirkpatrick <bekirkpatrick@proton.me>
Date: Wed, 4 Mar 2026 17:46:54 -0800
Subject: [PATCH 3/8] removing tasks from this branch

---
 tasks.md | 60 --------------------------------------------------------
 1 file changed, 60 deletions(-)
 delete mode 100644 tasks.md

diff --git a/tasks.md b/tasks.md
deleted file mode 100644
index edd6904..0000000
--- a/tasks.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Tasks & Issues
-
-## 1. Critical Issues
-
-- [ ] **1.1 Fix missing `del` import in store/index.js**
-  - Line 3 imports `get, set` from idb-keyval but `del` is used on line 13
-  - Add `del` to the import statement
-  - This will cause a ReferenceError when removeItem is called
-
-- [ ] **1.2 Fix hydration flag initialization**
-  - The `onRehydrateStorage` callback uses `store.setState()` before `store` is fully initialized
-  - Creates a circular reference issue preventing app from loading
-  - **Options:**
-    - A) Initialize `_hydrated: true` by default (simplest)
-    - B) Use Zustand's persist middleware built-in hydration detection
-    - C) Move hydration callback outside store creation
-
-- [ ] **1.3 Consolidate duplicate storage implementation**
-  - Storage is defined in both `store/index.js` AND `store/middleware/persistence.js`
-  - The middleware file exports `idbStorage` but it's not being used
-  - **Decision needed:** Use one or the other, not both
-
-## 2. Architectural Improvements
-
-- [ ] **2.1 Add error handling**
-  - Add try/catch blocks around IndexedDB operations
-  - Implement fallback if IndexedDB fails or is unavailable
-  - Add user feedback for errors (toast notifications?)
-
-- [ ] **2.2 Add partialize option to persist middleware**
-  - Currently saves ALL state including `_hydrated` flag and `route`
-  - Should use `partialize: (state) => ({ user: state.user, items: state.items })`
-  - Prevents unnecessary data in IndexedDB
-
-- [ ] **2.3 Add basic CSS reset to index.html**
-  - No base styles, margins, or font settings currently
-  - Consider adding minimal reset or normalize.css
-
-- [ ] **2.4 Add loading states for async operations**
-  - No loading indicators for add/remove item operations
-  - Consider adding optimistic updates
-
-## 3. Nice to Have
-
-- [ ] **3.1 Add TypeScript types** (optional)
-  - JSDoc comments for better IDE support
-  - Or migrate to .ts files with no-build setup
-
-- [ ] **3.2 Add cross-tab synchronization**
-  - README mentions optional `sync.js` middleware
-  - Implement BroadcastChannel for cross-tab state sync
-
-- [ ] **3.3 Add route history management**
-  - Integrate with browser history API
-  - Support back/forward navigation
-
-- [ ] **3.4 Add unit tests**
-  - Test store actions and selectors
-  - Test component rendering
-  - Test persistence layer

From 2178304c76f9c17886783fb6ae70f32b1e620529 Mon Sep 17 00:00:00 2001
From: Brian Kirkpatrick <bekirkpatrick@proton.me>
Date: Wed, 4 Mar 2026 18:11:14 -0800
Subject: [PATCH 4/8] updated/consolidated lit+zustand

---
 README.md                       | 224 ++++++++++----------------------
 components/app-root.js          |  11 --
 index.html                      |   4 +-
 store/idb.js                    |  33 -----
 store/index.js                  |  49 ++-----
 store/middleware/persistence.js |   9 --
 tasks.md                        |  60 ---------
 7 files changed, 83 insertions(+), 307 deletions(-)
 delete mode 100644 store/idb.js
 delete mode 100644 store/middleware/persistence.js
 delete mode 100644 tasks.md

diff --git a/README.md b/README.md
index 062e549..4b5f7ff 100644
--- a/README.md
+++ b/README.md
@@ -1,63 +1,25 @@
-# Lit + Zustand Architecture
+# zulip
 
-A simple (but modern & scalable) no-build web application architecture using Lit web components with Zustand state management and IndexedDB persistence.
-
-## For TSX/React Developers
-
-If you're coming from React/TSX, here's how this architecture maps to familiar concepts:
-
-| React/TSX Pattern | This Architecture |
-|-------------------|-------------------|
-| `useState` / `useReducer` | Zustand vanilla store |
-| `useEffect` + state subscription | `StoreController` (ReactiveController) |
-| Context API | Global Zustand store |
-| `localStorage` / `sessionStorage` | IndexedDB via persist middleware |
-| JSX | Lit's `html` tagged template literals |
-| CSS-in-JS / CSS Modules | Lit's `css` tagged template literals |
-| React Router | Simple route state in store |
-| Build step (Vite/Webpack) | Import maps (no build!) |
-
-### Key Differences
-
-1. **No Virtual DOM**: Lit uses native Web Components with efficient DOM updates
-2. **No Build Step**: Import maps let you use npm packages directly from CDN
-3. **Reactive Controllers**: Replace hooks - attach to component lifecycle
-4. **Tagged Templates**: Instead of JSX, use `html\`<div>...</div>\``
+A modern, no-build web application using Lit web components with Zustand state management.
 
 ## Architecture Overview
 
 * **Lit-based web components** - Standards-based, framework-agnostic UI
 * **No-build tooling** - Import maps only, no bundler required
 * **Zustand state management** - Lightweight, vanilla JS store
-* **IndexedDB persistence** - Automatic state persistence with idb-keyval
+* **StoreController** - Reactive controller that bridges Zustand and Lit
 
-
-## Layout
+## Project Structure
 
 ```
-src/
-  store/
-    index.js          ← zustand store definition
-    middleware/
-      persistence.js  ← idb-keyval persist adapter
-      sync.js         ← optional cross-tab broadcast
-  components/
-    app-root.js
-    feature-a/
-      feature-a.js    ← Lit component
-      feature-a.css   ← adopted stylesheet or constructable
-  controllers/
-    fetch.js          ← ReactiveController for API calls
-    3d.js             ← optional Three/WebGPU controller
-  lib/
-    idb.js            ← thin idb-keyval wrapper/schema
-index.html
-importmap.json        ← extracted importmap (referenced via <script src>)
+components/ -> standard lit components, including top-level "app-root"
+controllers/ -> lit reactive controllers (such as Zustand<->Lit bridge)
+store/ -> defines specific accessor sets
+index.html -> entry point with inline importmap and app-root
+README.md
 ```
 
-## Data Flow Diagrams
-
-### Component-to-Store Pattern
+## Data Flow Diagram
 
 ```mermaid
 sequenceDiagram
@@ -65,94 +27,61 @@ sequenceDiagram
     participant LitComponent
     participant StoreController
     participant ZustandStore
-    participant IndexedDB
 
     User->>LitComponent: Click button
     LitComponent->>ZustandStore: Call action (e.g., addItem)
     ZustandStore->>ZustandStore: Update state
-    ZustandStore->>IndexedDB: Persist (via middleware)
     ZustandStore->>StoreController: Notify subscribers
     StoreController->>LitComponent: requestUpdate()
     LitComponent->>LitComponent: Re-render
     LitComponent->>User: Show updated UI
 ```
 
-### Store Subscription Pattern
+## Example
 
-```mermaid
-graph TD
-    A[Zustand Store] -->|subscribe| B[StoreController]
-    B -->|selector function| C[Extract specific state]
-    C -->|value changed?| D{Compare}
-    D -->|Yes| E[host.requestUpdate]
-    D -->|No| F[Skip update]
-    E --> G[Lit re-renders component]
-    
-    style A fill:#f9f,stroke:#333,stroke-width:2px
-    style B fill:#bbf,stroke:#333,stroke-width:2px
-    style G fill:#bfb,stroke:#333,stroke-width:2px
-```
-
-### Complete Mental Model
-
-```
-┌─────────────────────────────────────────┐
-│           User Interaction              │
-└──────────────┬──────────────────────────┘
-               │ (events)
-               ▼
-┌─────────────────────────────────────────┐
-│        Lit Web Components               │
-│  - html`` templates (like JSX)          │
-│  - css`` styles (scoped)                │
-│  - Event handlers                       │
-└──────────────┬──────────────────────────┘
-               │ (actions)
-               ▼
-┌─────────────────────────────────────────┐
-│      StoreController (glue layer)       │
-│  - ReactiveController interface         │
-│  - Subscribes to store                  │
-│  - Triggers requestUpdate()             │
-└──────────────┬──────────────────────────┘
-               │ (selector)
-               ▼
-┌─────────────────────────────────────────┐
-│       Zustand Vanilla Store             │
-│  - Global state (like Context)          │
-│  - Actions (like reducers)              │
-│  - Subscriptions                        │
-└──────────────┬──────────────────────────┘
-               │ (persist middleware)
-               ▼
-┌─────────────────────────────────────────┐
-│  IndexedDB (via idb-keyval)             │
-│  - Automatic persistence                │
-│  - Async storage                        │
-└─────────────────────────────────────────┘
-```
-
-## Quick Start Example
-
-### 1. Define Store (like Redux/Zustand)
+### 1. Define Store (Zustand Vanilla)
 
 ```javascript
 // store/index.js
 import { createStore } from 'zustand/vanilla'
-import { persist } from 'zustand/middleware'
 
-export const store = createStore(
-  persist(
-    (set) => ({
-      count: 0,
-      increment: () => set(s => ({ count: s.count + 1 })),
-    }),
-    { name: 'my-store' }
-  )
-)
+export const store = createStore((set, get) => ({
+  count: 0,
+  increment: () => set(s => ({ count: s.count + 1 })),
+  decrement: () => set(s => ({ count: s.count - 1 })),
+}))
 ```
 
-### 2. Create Component (like React component)
+### 2. Create StoreController (Bridge)
+
+```javascript
+// controllers/store.js
+export class StoreController {
+  constructor(host, store, selector) {
+    this.host = host
+    this.store = store
+    this.selector = selector
+    host.addController(this)
+  }
+
+  hostConnected() {
+    this._unsub = this.store.subscribe((state) => {
+      const next = this.selector(state)
+      if (next !== this.value) {
+        this.value = next
+        this.host.requestUpdate()
+      }
+    })
+    this.value = this.selector(this.store.getState())
+  }
+
+  hostDisconnected() {
+    this._unsub?.()
+  }
+}
+```
+
+### 3. Create Component (Lit + StoreController)
 
 ```javascript
 // components/counter.js
@@ -165,16 +94,15 @@ class Counter extends LitElement {
   #count = new StoreController(this, store, s => s.count)
 
   static styles = css`
-    button { padding: 1rem; font-size: 1.2rem; }
+    button { padding: 1rem; font-size: 1.2rem; margin: 0.5rem; }
   `
 
   render() {
     return html`
       <div>
         <p>Count: ${this.#count.value}</p>
-        <button @click=${() => store.getState().increment()}>
-          Increment
-        </button>
+        <button @click=${() => store.getState().decrement()}>-</button>
+        <button @click=${() => store.getState().increment()}>+</button>
       </div>
     `
   }
@@ -183,40 +111,32 @@ class Counter extends LitElement {
 customElements.define('my-counter', Counter)
 ```
 
-### 3. Use in HTML (no build step!)
+### 4. Instantiate in parent (such as app-root)
 
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <script type="importmap">
-  {
-    "imports": {
-      "lit": "https://esm.sh/lit@3",
-      "zustand/vanilla": "https://esm.sh/zustand@5/vanilla",
-      "zustand/middleware": "https://esm.sh/zustand@5/middleware"
-    }
+```js
+import counter from "./counter.js":
+
+class AppRoot extends LitElement {
+  render() {
+    return html`
+      <counter></counter>
+    `;
   }
-  </script>
-</head>
-<body>
-  <script type="module" src="components/counter.js"></script>
-  <my-counter></my-counter>
-</body>
-</html>
+}
 ```
 
-## Benefits Over React/TSX
+## Benefits Over TSX
 
-✅ **No build step** - Edit and refresh, instant feedback  
-✅ **Smaller bundle** - No framework runtime, just standards  
-✅ **Better encapsulation** - Shadow DOM, scoped styles  
-✅ **Framework agnostic** - Works anywhere, even in React apps  
-✅ **Future-proof** - Built on web standards  
+1. **No build step** - Edit and refresh, instant feedback  
 
-## See Also
+1. **Smaller bundle** - No framework runtime, just standards  
 
-- [tasks.md](./tasks.md) - Current issues and improvements
-- [Lit Documentation](https://lit.dev)
-- [Zustand Documentation](https://zustand.docs.pmnd.rs)
-- [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
+1. **Better encapsulation** - Shadow DOM, scoped styles  
+
+1. **Framework agnostic** - Works anywhere, even in React apps  
+
+1. **Future-proof** - Built on web standards  
+
+1. **Familiar patterns** - Zustand works like Redux/Context  
+
+1. **Type-safe** - Can add JSDoc or TypeScript without build step
diff --git a/components/app-root.js b/components/app-root.js
index 6fe53e9..b9444a8 100644
--- a/components/app-root.js
+++ b/components/app-root.js
@@ -6,7 +6,6 @@ import "./page-home.js";
 import "./page-items.js";
 
 class AppRoot extends LitElement {
-    #hydrated = new StoreController(this, store, s => s._hydrated);
     #user = new StoreController(this, store, s => s.user);
     #route = new StoreController(this, store, s => s.route);
 
@@ -15,19 +14,9 @@ class AppRoot extends LitElement {
             display: block;
             min-height: 100vh;
         }
-        
-        .loading {
-            display: grid;
-            place-items: center;
-            height: 100vh;
-            opacity: 0.4;
-        }
     `;
 
     render() {
-        if (!this.#hydrated.value) {
-            return html`<div class="loading">loading...</div>`;
-        }
         return html`
             <nav-bar .user=${this.#user.value}></nav-bar>
             <main>${this.#renderRoute()}</main>
diff --git a/index.html b/index.html
index 51c53cd..91255c2 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,7 @@
         "imports": {
             "lit": "https://esm.sh/lit@3",
             "lit/decorators.js": "https://esm.sh/lit@3/decorators.js",
-            "zustand/vanilla": "https://esm.sh/zustand@5/vanilla",
-            "zustand/middleware": "https://esm.sh/zustand@5/middleware",
-            "idb-keyval": "https://esm.sh/idb-keyval@6"
+            "zustand/vanilla": "https://esm.sh/zustand@5/vanilla"
         }
     }
     </script>
diff --git a/store/idb.js b/store/idb.js
deleted file mode 100644
index e276f00..0000000
--- a/store/idb.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// lib/idb.js
-import { createStore, get, set, del, entries, clear } from 'idb-keyval'
-
-// Named stores — each maps to a distinct IDBObjectStore
-export const itemsStore = createStore('app-db', 'items')
-export const userStore  = createStore('app-db', 'user')
-export const cacheStore = createStore('app-db', 'cache')
-
-// Typed wrappers — keeps raw idb-keyval calls out of the rest of the app
-// and gives you one place to add validation, logging, or migration logic
-
-export const db = {
-  items: {
-    getAll:  ()          => entries(itemsStore),
-    get:     (id)        => get(id, itemsStore),
-    set:     (id, value) => set(id, value, itemsStore),
-    remove:  (id)        => del(id, itemsStore),
-    clear:   ()          => clear(itemsStore),
-  },
-
-  user: {
-    get:   ()      => get('user', userStore),
-    set:   (value) => set('user', value, userStore),
-    clear: ()      => del('user', userStore),
-  },
-
-  cache: {
-    get:   (key)         => get(key, cacheStore),
-    set:   (key, value)  => set(key, value, cacheStore),
-    remove: (key)        => del(key, cacheStore),
-    clear: ()            => clear(cacheStore),
-  }
-}
\ No newline at end of file
diff --git a/store/index.js b/store/index.js
index 86bedc5..3328f31 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,42 +1,13 @@
 import { createStore } from 'zustand/vanilla'
-import { persist, createJSONStorage } from 'zustand/middleware'
-import { get, set, del } from 'idb-keyval'
 
-const storage = createJSONStorage(() => ({
-  getItem: async (name) => {
-    const value = await get(name)
-    return value ?? null
-  },
-  setItem: async (name, value) => {
-    await set(name, value)
-  },
-  removeItem: async (name) => {
-    await del(name)
-  },
+export const store = createStore((set, get) => ({
+  user: null,
+  items: [],
+  route: 'home',
+  
+  // Actions
+  setUser: (user) => set({ user }),
+  addItem: (item) => set(s => ({ items: [...s.items, item] })),
+  removeItem: (id) => set(s => ({ items: s.items.filter(i => i.id !== id) })),
+  navigate: (route) => set({ route }),
 }))
-
-export const store = createStore(
-  persist(
-    (set, get) => ({
-      _hydrated: false,
-      user: null,
-      items: [],
-      route: 'home',
-      setUser: (user) => set({ user }),
-      addItem: (item) => set(s => ({ items: [...s.items, item] })),
-      removeItem: (id) => set(s => ({ items: s.items.filter(i => i.id !== id) })),
-      navigate: (route) => set({ route }),
-    }),
-    {
-      name: 'app-store',
-      storage,
-      onRehydrateStorage: () => {
-        return (state, error) => {
-          if (!error) {
-            store.setState({ _hydrated: true })
-          }
-        }
-      },
-    }
-  )
-)
diff --git a/store/middleware/persistence.js b/store/middleware/persistence.js
deleted file mode 100644
index 75552f1..0000000
--- a/store/middleware/persistence.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// store/middleware/persistence.js
-import { db } from '../idb.js'
-
-export const makeIdbStorage = (storeName) =>
-  createJSONStorage(() => ({
-    getItem:    (name)        => db[storeName].get(name),
-    setItem:    (name, value) => db[storeName].set(name, value),
-    removeItem: (name)        => db[storeName].remove(name),
-  }))
\ No newline at end of file
diff --git a/tasks.md b/tasks.md
deleted file mode 100644
index edd6904..0000000
--- a/tasks.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Tasks & Issues
-
-## 1. Critical Issues
-
-- [ ] **1.1 Fix missing `del` import in store/index.js**
-  - Line 3 imports `get, set` from idb-keyval but `del` is used on line 13
-  - Add `del` to the import statement
-  - This will cause a ReferenceError when removeItem is called
-
-- [ ] **1.2 Fix hydration flag initialization**
-  - The `onRehydrateStorage` callback uses `store.setState()` before `store` is fully initialized
-  - Creates a circular reference issue preventing app from loading
-  - **Options:**
-    - A) Initialize `_hydrated: true` by default (simplest)
-    - B) Use Zustand's persist middleware built-in hydration detection
-    - C) Move hydration callback outside store creation
-
-- [ ] **1.3 Consolidate duplicate storage implementation**
-  - Storage is defined in both `store/index.js` AND `store/middleware/persistence.js`
-  - The middleware file exports `idbStorage` but it's not being used
-  - **Decision needed:** Use one or the other, not both
-
-## 2. Architectural Improvements
-
-- [ ] **2.1 Add error handling**
-  - Add try/catch blocks around IndexedDB operations
-  - Implement fallback if IndexedDB fails or is unavailable
-  - Add user feedback for errors (toast notifications?)
-
-- [ ] **2.2 Add partialize option to persist middleware**
-  - Currently saves ALL state including `_hydrated` flag and `route`
-  - Should use `partialize: (state) => ({ user: state.user, items: state.items })`
-  - Prevents unnecessary data in IndexedDB
-
-- [ ] **2.3 Add basic CSS reset to index.html**
-  - No base styles, margins, or font settings currently
-  - Consider adding minimal reset or normalize.css
-
-- [ ] **2.4 Add loading states for async operations**
-  - No loading indicators for add/remove item operations
-  - Consider adding optimistic updates
-
-## 3. Nice to Have
-
-- [ ] **3.1 Add TypeScript types** (optional)
-  - JSDoc comments for better IDE support
-  - Or migrate to .ts files with no-build setup
-
-- [ ] **3.2 Add cross-tab synchronization**
-  - README mentions optional `sync.js` middleware
-  - Implement BroadcastChannel for cross-tab state sync
-
-- [ ] **3.3 Add route history management**
-  - Integrate with browser history API
-  - Support back/forward navigation
-
-- [ ] **3.4 Add unit tests**
-  - Test store actions and selectors
-  - Test component rendering
-  - Test persistence layer

From a961f387d6127175f00cf86d4c0928fea8150546 Mon Sep 17 00:00:00 2001
From: Brian Kirkpatrick <bekirkpatrick@proton.me>
Date: Wed, 4 Mar 2026 18:26:43 -0800
Subject: [PATCH 5/8] attempting to resurrect full beans

---
 TASKS.md                        | 60 +++++++++++++++++++++++++++++++++
 components/app-root.js          | 46 ++++++++++---------------
 components/nav-bar.js           | 17 +++++-----
 components/page-home.js         | 14 ++++----
 components/page-items.js        | 29 +++++-----------
 controllers/store-controller.js | 23 +++++++++++++
 index.html                      |  4 ++-
 store/idb.js                    | 33 ++++++++++++++++++
 store/persistence.js            |  9 +++++
 9 files changed, 170 insertions(+), 65 deletions(-)
 create mode 100644 TASKS.md
 create mode 100644 controllers/store-controller.js
 create mode 100644 store/idb.js
 create mode 100644 store/persistence.js

diff --git a/TASKS.md b/TASKS.md
new file mode 100644
index 0000000..edd6904
--- /dev/null
+++ b/TASKS.md
@@ -0,0 +1,60 @@
+# Tasks & Issues
+
+## 1. Critical Issues
+
+- [ ] **1.1 Fix missing `del` import in store/index.js**
+  - Line 3 imports `get, set` from idb-keyval but `del` is used on line 13
+  - Add `del` to the import statement
+  - This will cause a ReferenceError when removeItem is called
+
+- [ ] **1.2 Fix hydration flag initialization**
+  - The `onRehydrateStorage` callback uses `store.setState()` before `store` is fully initialized
+  - Creates a circular reference issue preventing app from loading
+  - **Options:**
+    - A) Initialize `_hydrated: true` by default (simplest)
+    - B) Use Zustand's persist middleware built-in hydration detection
+    - C) Move hydration callback outside store creation
+
+- [ ] **1.3 Consolidate duplicate storage implementation**
+  - Storage is defined in both `store/index.js` AND `store/middleware/persistence.js`
+  - The middleware file exports `idbStorage` but it's not being used
+  - **Decision needed:** Use one or the other, not both
+
+## 2. Architectural Improvements
+
+- [ ] **2.1 Add error handling**
+  - Add try/catch blocks around IndexedDB operations
+  - Implement fallback if IndexedDB fails or is unavailable
+  - Add user feedback for errors (toast notifications?)
+
+- [ ] **2.2 Add partialize option to persist middleware**
+  - Currently saves ALL state including `_hydrated` flag and `route`
+  - Should use `partialize: (state) => ({ user: state.user, items: state.items })`
+  - Prevents unnecessary data in IndexedDB
+
+- [ ] **2.3 Add basic CSS reset to index.html**
+  - No base styles, margins, or font settings currently
+  - Consider adding minimal reset or normalize.css
+
+- [ ] **2.4 Add loading states for async operations**
+  - No loading indicators for add/remove item operations
+  - Consider adding optimistic updates
+
+## 3. Nice to Have
+
+- [ ] **3.1 Add TypeScript types** (optional)
+  - JSDoc comments for better IDE support
+  - Or migrate to .ts files with no-build setup
+
+- [ ] **3.2 Add cross-tab synchronization**
+  - README mentions optional `sync.js` middleware
+  - Implement BroadcastChannel for cross-tab state sync
+
+- [ ] **3.3 Add route history management**
+  - Integrate with browser history API
+  - Support back/forward navigation
+
+- [ ] **3.4 Add unit tests**
+  - Test store actions and selectors
+  - Test component rendering
+  - Test persistence layer
diff --git a/components/app-root.js b/components/app-root.js
index c5226f9..2f3147f 100644
--- a/components/app-root.js
+++ b/components/app-root.js
@@ -1,9 +1,12 @@
 import { LitElement, html, css } from "lit";
+import { store} from "../store/index.js";
+import { StoreController } from "../controllers/store-controller.js";
 import "./nav-bar.js";
 import "./page-home.js";
 import "./page-items.js";
 
 class AppRoot extends LitElement {
+    #hydrated = new StoreController(this, store, s => s._hydrated);
     #user = new StoreController(this, store, s => s.user);
     #route = new StoreController(this, store, s => s.route);
 
@@ -12,43 +15,30 @@ class AppRoot extends LitElement {
             display: block;
             min-height: 100vh;
         }
+        
+        .loading {
+            display: grid;
+            place-items: center;
+            height: 100vh;
+            opacity: 0.4;
+        }
     `;
 
-    #navigate(route) {
-        this.route = route;
-    }
-
-    #addItem(item) {
-        this.items = [...this.items, item];
-    }
-
-    #removeItem(id) {
-        this.items = this.items.filter(i => i.id !== id);
-    }
-
     render() {
+        if (!this.#hydrated.value) {
+            return html`<div class="loading">loading...</div>`;
+        }
         return html`
-            <nav-bar 
-                .user=${this.user}
-                .route=${this.route}
-                @navigate=${(e) => this.#navigate(e.detail.route)}
-            ></nav-bar>
+            <nav-bar .user=${this.#user.value}></nav-bar>
             <main>${this.#renderRoute()}</main>
         `;
     }
 
     #renderRoute() {
-        switch (this.route) {
-            case "home": 
-                return html`<page-home .user=${this.user} .items=${this.items}></page-home>`;
-            case "items": 
-                return html`<page-items 
-                    .items=${this.items}
-                    @add-item=${(e) => this.#addItem(e.detail.item)}
-                    @remove-item=${(e) => this.#removeItem(e.detail.id)}
-                ></page-items>`;
-            default: 
-                return html`<page-home .user=${this.user} .items=${this.items}></page-home>`;
+        switch (this.#route.value) {
+            case "home": return html`<page-home></page-home>`;
+            case "items": return html`<page-items></page-items>`;
+            default: return html`<page-home></page-home>`;
         }
     }
 }
diff --git a/components/nav-bar.js b/components/nav-bar.js
index 6f192a1..9b44aa2 100644
--- a/components/nav-bar.js
+++ b/components/nav-bar.js
@@ -1,10 +1,13 @@
 // components/nav-bar.js
 import { LitElement, html, css } from 'lit'
+import { store } from '../store/index.js'
+import { StoreController } from "../controllers/store-controller.js";
 
 class NavBar extends LitElement {
+  #route = new StoreController(this, store, s => s.route)
+
   static properties = {
-    user: { type: Object },
-    route: { type: String }
+    user: { type: Object }
   }
 
   static styles = css`
@@ -32,18 +35,14 @@ class NavBar extends LitElement {
 
   #navigate(route, e) {
     e.preventDefault()
-    this.dispatchEvent(new CustomEvent('navigate', { 
-      detail: { route },
-      bubbles: true,
-      composed: true
-    }))
+    store.getState().navigate(route)
   }
 
   #link(route, label) {
     return html`
       <a
         href="/${route}"
-        ?active=${this.route === route}
+        ?active=${this.#route.value === route}
         @click=${(e) => this.#navigate(route, e)}
       >${label}</a>
     `
@@ -62,4 +61,4 @@ class NavBar extends LitElement {
   }
 }
 
-customElements.define('nav-bar', NavBar)
+customElements.define('nav-bar', NavBar)
\ No newline at end of file
diff --git a/components/page-home.js b/components/page-home.js
index 3d5c616..f6536e7 100644
--- a/components/page-home.js
+++ b/components/page-home.js
@@ -1,11 +1,11 @@
 // components/page-home.js
 import { LitElement, html, css } from 'lit'
+import { store } from '../store/index.js'
+import { StoreController } from "../controllers/store-controller.js";
 
 class PageHome extends LitElement {
-  static properties = {
-    user: { type: Object },
-    items: { type: Array }
-  }
+  #user  = new StoreController(this, store, s => s.user)
+  #items = new StoreController(this, store, s => s.items)
 
   static styles = css`
     :host { display: block; padding: 2rem 1.5rem; }
@@ -25,8 +25,8 @@ class PageHome extends LitElement {
   `
 
   render() {
-    const name = this.user?.name ?? 'there'
-    const count = this.items?.length ?? 0
+    const name = this.#user.value?.name ?? 'there'
+    const count = this.#items.value.length
 
     return html`
       <h1>Hey, ${name}</h1>
@@ -41,4 +41,4 @@ class PageHome extends LitElement {
   }
 }
 
-customElements.define('page-home', PageHome)
+customElements.define('page-home', PageHome)
\ No newline at end of file
diff --git a/components/page-items.js b/components/page-items.js
index f788396..dde3a1a 100644
--- a/components/page-items.js
+++ b/components/page-items.js
@@ -1,17 +1,16 @@
 // components/page-items.js
 import { LitElement, html, css } from 'lit'
+import { store } from '../store/index.js'
+import { StoreController } from "../controllers/store-controller.js";
 
 class PageItems extends LitElement {
+  #items = new StoreController(this, store, s => s.items)
+
   static properties = {
-    items: { type: Array },
     _draft: { type: String, state: true }
   }
 
-  constructor() {
-    super();
-    this.items = [];
-    this._draft = '';
-  }
+  _draft = ''
 
   static styles = css`
     :host { display: block; padding: 2rem 1.5rem; }
@@ -64,22 +63,12 @@ class PageItems extends LitElement {
   #add() {
     const name = this._draft.trim()
     if (!name) return
-    
-    this.dispatchEvent(new CustomEvent('add-item', {
-      detail: { item: { id: crypto.randomUUID(), name } },
-      bubbles: true,
-      composed: true
-    }))
-    
+    store.getState().addItem({ id: crypto.randomUUID(), name })
     this._draft = ''
   }
 
   #remove(id) {
-    this.dispatchEvent(new CustomEvent('remove-item', {
-      detail: { id },
-      bubbles: true,
-      composed: true
-    }))
+    store.getState().removeItem(id)
   }
 
   #onKeydown(e) {
@@ -87,7 +76,7 @@ class PageItems extends LitElement {
   }
 
   render() {
-    const items = this.items ?? []
+    const items = this.#items.value
 
     return html`
       <h1>Items</h1>
@@ -119,4 +108,4 @@ class PageItems extends LitElement {
   }
 }
 
-customElements.define('page-items', PageItems)
+customElements.define('page-items', PageItems)
\ No newline at end of file
diff --git a/controllers/store-controller.js b/controllers/store-controller.js
new file mode 100644
index 0000000..998294d
--- /dev/null
+++ b/controllers/store-controller.js
@@ -0,0 +1,23 @@
+export class StoreController {
+    constructor(host, store, selector) {
+      this.host = host
+      this.store = store
+      this.selector = selector
+      host.addController(this)
+    }
+  
+    hostConnected() {
+      this._unsub = this.store.subscribe(
+        (state) => {
+          const next = this.selector(state)
+          if (next !== this.value) {
+            this.value = next
+            this.host.requestUpdate()
+          }
+        }
+      )
+      this.value = this.selector(this.store.getState())
+    }
+  
+    hostDisconnected() { this._unsub?.() }
+  }
\ No newline at end of file
diff --git a/index.html b/index.html
index 91255c2..51c53cd 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,9 @@
         "imports": {
             "lit": "https://esm.sh/lit@3",
             "lit/decorators.js": "https://esm.sh/lit@3/decorators.js",
-            "zustand/vanilla": "https://esm.sh/zustand@5/vanilla"
+            "zustand/vanilla": "https://esm.sh/zustand@5/vanilla",
+            "zustand/middleware": "https://esm.sh/zustand@5/middleware",
+            "idb-keyval": "https://esm.sh/idb-keyval@6"
         }
     }
     </script>
diff --git a/store/idb.js b/store/idb.js
new file mode 100644
index 0000000..e276f00
--- /dev/null
+++ b/store/idb.js
@@ -0,0 +1,33 @@
+// lib/idb.js
+import { createStore, get, set, del, entries, clear } from 'idb-keyval'
+
+// Named stores — each maps to a distinct IDBObjectStore
+export const itemsStore = createStore('app-db', 'items')
+export const userStore  = createStore('app-db', 'user')
+export const cacheStore = createStore('app-db', 'cache')
+
+// Typed wrappers — keeps raw idb-keyval calls out of the rest of the app
+// and gives you one place to add validation, logging, or migration logic
+
+export const db = {
+  items: {
+    getAll:  ()          => entries(itemsStore),
+    get:     (id)        => get(id, itemsStore),
+    set:     (id, value) => set(id, value, itemsStore),
+    remove:  (id)        => del(id, itemsStore),
+    clear:   ()          => clear(itemsStore),
+  },
+
+  user: {
+    get:   ()      => get('user', userStore),
+    set:   (value) => set('user', value, userStore),
+    clear: ()      => del('user', userStore),
+  },
+
+  cache: {
+    get:   (key)         => get(key, cacheStore),
+    set:   (key, value)  => set(key, value, cacheStore),
+    remove: (key)        => del(key, cacheStore),
+    clear: ()            => clear(cacheStore),
+  }
+}
\ No newline at end of file
diff --git a/store/persistence.js b/store/persistence.js
new file mode 100644
index 0000000..bdb7dc1
--- /dev/null
+++ b/store/persistence.js
@@ -0,0 +1,9 @@
+// store/middleware/persistence.js
+import { db } from './idb.js'
+
+export const makeIdbStorage = (storeName) =>
+  createJSONStorage(() => ({
+    getItem:    (name)        => db[storeName].get(name),
+    setItem:    (name, value) => db[storeName].set(name, value),
+    removeItem: (name)        => db[storeName].remove(name),
+  }))
\ No newline at end of file

From 8b6f09ceadb0772ca8a10d432882083cbb7e62e2 Mon Sep 17 00:00:00 2001
From: Brian Kirkpatrick <bekirkpatrick@proton.me>
Date: Wed, 4 Mar 2026 18:35:20 -0800
Subject: [PATCH 6/8] fixed hdyration bug, think we're ready for issues

---
 store/index.js | 50 ++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 40 insertions(+), 10 deletions(-)

diff --git a/store/index.js b/store/index.js
index 3328f31..43b1d46 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,13 +1,43 @@
 import { createStore } from 'zustand/vanilla'
+import { persist, createJSONStorage } from 'zustand/middleware'
+import { get, set, del } from 'idb-keyval'
 
-export const store = createStore((set, get) => ({
-  user: null,
-  items: [],
-  route: 'home',
-  
-  // Actions
-  setUser: (user) => set({ user }),
-  addItem: (item) => set(s => ({ items: [...s.items, item] })),
-  removeItem: (id) => set(s => ({ items: s.items.filter(i => i.id !== id) })),
-  navigate: (route) => set({ route }),
+// Create IndexedDB storage adapter
+const storage = createJSONStorage(() => ({
+  getItem: async (name) => {
+    const value = await get(name)
+    return value ?? null
+  },
+  setItem: async (name, value) => {
+    await set(name, value)
+  },
+  removeItem: async (name) => {
+    await del(name)
+  },
 }))
+
+export const store = createStore(
+  persist(
+    (set, get) => ({
+      _hydrated: true,  // Start as true - persistence happens in background
+      user: null,
+      items: [],
+      route: 'home',
+      
+      // Actions
+      setUser: (user) => set({ user }),
+      addItem: (item) => set(s => ({ items: [...s.items, item] })),
+      removeItem: (id) => set(s => ({ items: s.items.filter(i => i.id !== id) })),
+      navigate: (route) => set({ route }),
+    }),
+    {
+      name: 'app-store',
+      storage,
+      partialize: (state) => ({
+        user: state.user,
+        items: state.items,
+        route: state.route,
+      }),
+    }
+  )
+)

From c25700d7cd72d6b7b5b3693a570fa11aea66d290 Mon Sep 17 00:00:00 2001
From: Brian Kirkpatrick <bekirkpatrick@proton.me>
Date: Wed, 4 Mar 2026 18:55:48 -0800
Subject: [PATCH 7/8] added some error handling

---
 TASKS.md                  | 45 +++++++++++-----------
 components/app-root.js    |  2 +
 components/error-toast.js | 79 +++++++++++++++++++++++++++++++++++++++
 store/index.js            | 57 ++++++++++++++++++++++++----
 4 files changed, 154 insertions(+), 29 deletions(-)
 create mode 100644 components/error-toast.js

diff --git a/TASKS.md b/TASKS.md
index edd6904..3ca75af 100644
--- a/TASKS.md
+++ b/TASKS.md
@@ -2,34 +2,35 @@
 
 ## 1. Critical Issues
 
-- [ ] **1.1 Fix missing `del` import in store/index.js**
-  - Line 3 imports `get, set` from idb-keyval but `del` is used on line 13
-  - Add `del` to the import statement
-  - This will cause a ReferenceError when removeItem is called
+- [x] **1.1 Fix missing `del` import in store/index.js** ✅ COMPLETE
+  - Line 3 now imports `get, set, del` from idb-keyval
+  - Used in removeItem function on line 13
+  - No more ReferenceError
 
-- [ ] **1.2 Fix hydration flag initialization**
-  - The `onRehydrateStorage` callback uses `store.setState()` before `store` is fully initialized
-  - Creates a circular reference issue preventing app from loading
-  - **Options:**
-    - A) Initialize `_hydrated: true` by default (simplest)
-    - B) Use Zustand's persist middleware built-in hydration detection
-    - C) Move hydration callback outside store creation
+- [x] **1.2 Fix hydration flag initialization** ✅ COMPLETE
+  - Implemented Option A: Initialize `_hydrated: true` by default
+  - Removed problematic `onRehydrateStorage` callback
+  - App now loads immediately without hanging on "loading..."
+  - Persistence happens in background automatically
 
-- [ ] **1.3 Consolidate duplicate storage implementation**
-  - Storage is defined in both `store/index.js` AND `store/middleware/persistence.js`
-  - The middleware file exports `idbStorage` but it's not being used
-  - **Decision needed:** Use one or the other, not both
+- [x] **1.3 Consolidate duplicate storage implementation** ✅ COMPLETE
+  - Single storage implementation in `store/index.js`
+  - Uses idb-keyval directly with createJSONStorage
+  - Clean, simple approach without extra middleware files
 
 ## 2. Architectural Improvements
 
-- [ ] **2.1 Add error handling**
-  - Add try/catch blocks around IndexedDB operations
-  - Implement fallback if IndexedDB fails or is unavailable
-  - Add user feedback for errors (toast notifications?)
+- [x] **2.1 Add error handling** ✅ COMPLETE
+  - Added try/catch blocks around all IndexedDB operations (getItem, setItem, removeItem)
+  - Implemented fallback: returns null on getItem error, silently fails on setItem/removeItem
+  - Added error state to store with auto-clear after 3 seconds
+  - Added validation in addItem and removeItem actions
+  - Created error-toast component with slide-in animation
+  - Toast shows error messages and allows manual dismissal
 
-- [ ] **2.2 Add partialize option to persist middleware**
-  - Currently saves ALL state including `_hydrated` flag and `route`
-  - Should use `partialize: (state) => ({ user: state.user, items: state.items })`
+- [x] **2.2 Add partialize option to persist middleware** ✅ COMPLETE
+  - Added partialize to exclude `_hydrated` flag from persistence
+  - Only persists: user, items, and route
   - Prevents unnecessary data in IndexedDB
 
 - [ ] **2.3 Add basic CSS reset to index.html**
diff --git a/components/app-root.js b/components/app-root.js
index 2f3147f..29454ec 100644
--- a/components/app-root.js
+++ b/components/app-root.js
@@ -4,6 +4,7 @@ import { StoreController } from "../controllers/store-controller.js";
 import "./nav-bar.js";
 import "./page-home.js";
 import "./page-items.js";
+import "./error-toast.js";
 
 class AppRoot extends LitElement {
     #hydrated = new StoreController(this, store, s => s._hydrated);
@@ -31,6 +32,7 @@ class AppRoot extends LitElement {
         return html`
             <nav-bar .user=${this.#user.value}></nav-bar>
             <main>${this.#renderRoute()}</main>
+            <error-toast></error-toast>
         `;
     }
 
diff --git a/components/error-toast.js b/components/error-toast.js
new file mode 100644
index 0000000..0e90eda
--- /dev/null
+++ b/components/error-toast.js
@@ -0,0 +1,79 @@
+// components/error-toast.js
+import { LitElement, html, css } from 'lit'
+import { store } from '../store/index.js'
+import { StoreController } from '../controllers/store-controller.js'
+
+class ErrorToast extends LitElement {
+  #error = new StoreController(this, store, s => s.error)
+
+  static styles = css`
+    :host {
+      position: fixed;
+      top: 1rem;
+      right: 1rem;
+      z-index: 1000;
+    }
+
+    .toast {
+      background: #ef4444;
+      color: white;
+      padding: 1rem 1.5rem;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      min-width: 300px;
+      animation: slideIn 0.3s ease-out;
+    }
+
+    @keyframes slideIn {
+      from {
+        transform: translateX(400px);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+
+    .message {
+      flex: 1;
+      font-size: 0.9rem;
+    }
+
+    .close {
+      background: none;
+      border: none;
+      color: white;
+      cursor: pointer;
+      font-size: 1.2rem;
+      padding: 0;
+      opacity: 0.8;
+    }
+
+    .close:hover {
+      opacity: 1;
+    }
+  `
+
+  render() {
+    if (!this.#error.value) {
+      return html``
+    }
+
+    return html`
+      <div class="toast">
+        <span class="message">${this.#error.value}</span>
+        <button 
+          class="close" 
+          @click=${() => store.getState().clearError()}
+          aria-label="Close"
+        >×</button>
+      </div>
+    `
+  }
+}
+
+customElements.define('error-toast', ErrorToast)
diff --git a/store/index.js b/store/index.js
index 43b1d46..feaea96 100644
--- a/store/index.js
+++ b/store/index.js
@@ -2,17 +2,32 @@ import { createStore } from 'zustand/vanilla'
 import { persist, createJSONStorage } from 'zustand/middleware'
 import { get, set, del } from 'idb-keyval'
 
-// Create IndexedDB storage adapter
+// Create IndexedDB storage adapter with error handling
 const storage = createJSONStorage(() => ({
   getItem: async (name) => {
-    const value = await get(name)
-    return value ?? null
+    try {
+      const value = await get(name)
+      return value ?? null
+    } catch (error) {
+      console.error('IndexedDB getItem error:', error)
+      return null // Fallback to null if IndexedDB fails
+    }
   },
   setItem: async (name, value) => {
-    await set(name, value)
+    try {
+      await set(name, value)
+    } catch (error) {
+      console.error('IndexedDB setItem error:', error)
+      // Silently fail - app continues to work without persistence
+    }
   },
   removeItem: async (name) => {
-    await del(name)
+    try {
+      await del(name)
+    } catch (error) {
+      console.error('IndexedDB removeItem error:', error)
+      // Silently fail
+    }
   },
 }))
 
@@ -23,12 +38,40 @@ export const store = createStore(
       user: null,
       items: [],
       route: 'home',
+      error: null,  // For error notifications
       
       // Actions
       setUser: (user) => set({ user }),
-      addItem: (item) => set(s => ({ items: [...s.items, item] })),
-      removeItem: (id) => set(s => ({ items: s.items.filter(i => i.id !== id) })),
+      
+      addItem: (item) => {
+        try {
+          if (!item || !item.name || !item.name.trim()) {
+            throw new Error('Item name is required')
+          }
+          set(s => ({ items: [...s.items, item], error: null }))
+        } catch (error) {
+          console.error('addItem error:', error)
+          set({ error: error.message })
+          setTimeout(() => set({ error: null }), 3000) // Clear after 3s
+        }
+      },
+      
+      removeItem: (id) => {
+        try {
+          if (!id) {
+            throw new Error('Item ID is required')
+          }
+          set(s => ({ items: s.items.filter(i => i.id !== id), error: null }))
+        } catch (error) {
+          console.error('removeItem error:', error)
+          set({ error: error.message })
+          setTimeout(() => set({ error: null }), 3000)
+        }
+      },
+      
       navigate: (route) => set({ route }),
+      
+      clearError: () => set({ error: null }),
     }),
     {
       name: 'app-store',

From 5baead043aef294ae72574399cd1a776e31ab076 Mon Sep 17 00:00:00 2001
From: Brian Kirkpatrick <bekirkpatrick@proton.me>
Date: Wed, 4 Mar 2026 18:58:22 -0800
Subject: [PATCH 8/8] added note on storybook task

---
 TASKS.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/TASKS.md b/TASKS.md
index 3ca75af..7a232fe 100644
--- a/TASKS.md
+++ b/TASKS.md
@@ -59,3 +59,8 @@
   - Test store actions and selectors
   - Test component rendering
   - Test persistence layer
+
+- [ ] **3.5 Add Storybook support**
+  - Introduces parallel build (vite internally) but core app remains no-build
+  - Storybook includes raw/native web component support
+  - Ensure individual components and layouts are properly organized, documented, demonstrated, and tested