attempting to resurrect full beans

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)