README.md

@@ -86,16 +86,12 @@ export class StoreController {
 ```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 {
-  static properties = {
-    count: { type: Number, state: true }
-  }
-
-  constructor() {
-    super()
-    this.count = 0
-  }
+  // Subscribe to store (like useSelector)
+  #count = new StoreController(this, store, s => s.count)
 
   static styles = css`
     button { padding: 1rem; font-size: 1.2rem; margin: 0.5rem; }

TASKS.md

@@ -1,66 +0,0 @@
-# Tasks & Issues
-
-## 1. Critical Issues
-
-- [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
-
-- [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
-
-- [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
-
-- [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
-
-- [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**
-  - 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
-
-- [ ] **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

components/app-root.js

@@ -1,13 +1,11 @@
 import { LitElement, html, css } from "lit";
 import { store} from "../store/index.js";
-import { StoreController } from "../controllers/store-controller.js";
+import { StoreController } from "../controllers/store.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);
     #user = new StoreController(this, store, s => s.user);
     #route = new StoreController(this, store, s => s.route);
 
@@ -16,23 +14,12 @@ 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>
-            <error-toast></error-toast>
         `;
     }
 

components/error-toast.js

@@ -1,79 +0,0 @@
-// 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)

components/nav-bar.js

@@ -1,7 +1,7 @@
 // components/nav-bar.js
 import { LitElement, html, css } from 'lit'
 import { store } from '../store/index.js'
-import { StoreController } from "../controllers/store-controller.js";
+import { StoreController } from '../controllers/store.js'
 
 class NavBar extends LitElement {
   #route = new StoreController(this, store, s => s.route)

components/page-home.js

@@ -1,7 +1,7 @@
 // components/page-home.js
 import { LitElement, html, css } from 'lit'
 import { store } from '../store/index.js'
-import { StoreController } from "../controllers/store-controller.js";
+import { StoreController } from '../controllers/store.js'
 
 class PageHome extends LitElement {
   #user  = new StoreController(this, store, s => s.user)

components/page-items.js

@@ -1,7 +1,7 @@
 // components/page-items.js
 import { LitElement, html, css } from 'lit'
 import { store } from '../store/index.js'
-import { StoreController } from "../controllers/store-controller.js";
+import { StoreController } from '../controllers/store.js'
 
 class PageItems extends LitElement {
   #items = new StoreController(this, store, s => s.items)

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>

store/idb.js

@@ -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),
-  }
-}

store/index.js

@@ -1,86 +1,13 @@
 import { createStore } from 'zustand/vanilla'
-import { persist, createJSONStorage } from 'zustand/middleware'
-import { get, set, del } from 'idb-keyval'
 
-// Create IndexedDB storage adapter with error handling
-const storage = createJSONStorage(() => ({
-  getItem: async (name) => {
-    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) => {
-    try {
-      await set(name, value)
-    } catch (error) {
-      console.error('IndexedDB setItem error:', error)
-      // Silently fail - app continues to work without persistence
-    }
-  },
-  removeItem: async (name) => {
-    try {
-      await del(name)
-    } catch (error) {
-      console.error('IndexedDB removeItem error:', error)
-      // Silently fail
-    }
-  },
+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: true,  // Start as true - persistence happens in background
-      user: null,
-      items: [],
-      route: 'home',
-      error: null,  // For error notifications
-      
-      // Actions
-      setUser: (user) => set({ user }),
-      
-      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',
-      storage,
-      partialize: (state) => ({
-        user: state.user,
-        items: state.items,
-        route: state.route,
-      }),
-    }
-  )
-)

store/persistence.js

@@ -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),
-  }))