finished pruning for lit-only demo

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)
+customElements.define('page-items', PageItems)