first draft but not working yet

components/page-home.js

@@ -0,0 +1,44 @@
+// 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 styles = css`
+    :host { display: block; padding: 2rem 1.5rem; }
+    h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
+    p  { color: #64748b; margin: 0 0 2rem; }
+    .summary {
+      display: flex;
+      gap: 1rem;
+    }
+    .stat {
+      padding: 1rem 1.5rem;
+      border: 1px solid #e2e8f0;
+      border-radius: 8px;
+    }
+    .stat-value { font-size: 2rem; font-weight: 700; }
+    .stat-label { font-size: 0.8rem; color: #94a3b8; margin-top: 0.25rem; }
+  `
+
+  render() {
+    const name = this.#user.value?.name ?? 'there'
+    const count = this.#items.value.length
+
+    return html`
+      <h1>Hey, ${name}</h1>
+      <p>Here's what's going on.</p>
+      <div class="summary">
+        <div class="stat">
+          <div class="stat-value">${count}</div>
+          <div class="stat-label">Items</div>
+        </div>
+      </div>
+    `
+  }
+}
+
+customElements.define('page-home', PageHome)