@everystate/examples 1.0.0 → 1.0.1

package/everyState-view/004_06/quoteExplorer/derived.js

@@ -0,0 +1,43 @@
+// ─── Derived state ──────────────────────────────────────────────
+// Subscribe to state.* and auto-compute derived values.
+// Pure recomputation: reads state.*, writes derived.*.
+// No intent knowledge, no view knowledge.
+
+export function mountDerived(store) {
+  const unsubs = [];
+
+  function recompute() {
+    const quotes = store.get('state.quotes') || [];
+    const author = store.get('state.selectedAuthor') || '';
+    const search = (store.get('state.searchTerm') || '').toLowerCase().trim();
+
+    // Filter: only when an author is selected
+    let filtered = [];
+    if (author) {
+      filtered = quotes.filter(q => q.author === author);
+      if (search) {
+        filtered = filtered.filter(q =>
+          q.text.toLowerCase().includes(search)
+        );
+      }
+    }
+
+    store.set('derived.filteredQuotes', filtered);
+    store.set('derived.quoteCount', filtered.length);
+    store.set('derived.favCount', quotes.filter(q => q.fav).length);
+
+    const totalAuthors = (store.get('state.authors') || []).length;
+    const favTotal = quotes.filter(q => q.fav).length;
+    store.set('derived.stats',
+      `${quotes.length} total quotes · ${totalAuthors} authors · ${favTotal} favorites`
+    );
+  }
+
+  // Recompute whenever any state.* path changes
+  unsubs.push(store.subscribe('state.*', recompute));
+
+  // Initial computation
+  recompute();
+
+  return () => unsubs.forEach(u => u());
+}

package/everyState-view/004_06/quoteExplorer/index.css

@@ -0,0 +1,346 @@
+/* ─── 004_06 Quote Explorer Pro ─────────────────────────────── */
+
+:root {
+  --bg: #0f172a;
+  --surface: #1e293b;
+  --surface-alt: #334155;
+  --border: #475569;
+  --text: #e2e8f0;
+  --text-muted: #94a3b8;
+  --accent: #38bdf8;
+  --accent-hover: #7dd3fc;
+  --danger: #ef4444;
+  --fav: #f43f5e;
+  --fav-muted: #64748b;
+  --success: #22c55e;
+  --radius: 8px;
+  --shadow: 0 4px 16px rgba(0,0,0,.3);
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+/* ── App layout ── */
+
+.app {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem 4rem;
+}
+
+/* ── Header ── */
+
+.app-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.app-header h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--accent), #a78bfa);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.subtitle {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  margin-top: 0.25rem;
+  letter-spacing: 0.04em;
+}
+
+/* ── Search bar ── */
+
+.search-bar {
+  margin-bottom: 1.5rem;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.7rem 1rem;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 0.95rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.search-input::placeholder {
+  color: var(--text-muted);
+}
+
+.search-input:focus {
+  border-color: var(--accent);
+}
+
+/* ── Author tags ── */
+
+.author-tags {
+  margin-bottom: 1.5rem;
+}
+
+.tags-label {
+  display: block;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.tags-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tag {
+  padding: 0.4rem 0.9rem;
+  background: var(--surface);
+  color: var(--accent);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.tag:hover {
+  background: var(--accent);
+  color: var(--bg);
+  border-color: var(--accent);
+}
+
+/* ── Detail panel ── */
+
+.detail-panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+  margin-bottom: 1.5rem;
+  animation: slideIn 0.25s ease-out;
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.detail-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.detail-heading {
+  font-size: 1.2rem;
+  font-weight: 600;
+  flex: 1;
+}
+
+.badge {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.6rem;
+  background: var(--accent);
+  color: var(--bg);
+  border-radius: 999px;
+  font-weight: 600;
+}
+
+.detail-quotes {
+  list-style: none;
+}
+
+.quote-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.6rem 0;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+
+.quote-item:last-child {
+  border-bottom: none;
+}
+
+.quote-text {
+  flex: 1;
+  font-size: 0.92rem;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.fav-btn {
+  background: none;
+  border: none;
+  font-size: 1.1rem;
+  cursor: pointer;
+  color: var(--fav-muted);
+  transition: color 0.15s, transform 0.15s;
+  padding: 0.2rem;
+  line-height: 1;
+}
+
+.fav-btn:hover {
+  color: var(--fav);
+  transform: scale(1.2);
+}
+
+.fav-btn.is-fav {
+  color: var(--fav);
+}
+
+/* ── Buttons ── */
+
+.btn {
+  padding: 0.45rem 0.9rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn:hover {
+  background: var(--surface-alt);
+}
+
+.btn-close {
+  font-size: 1rem;
+  padding: 0.2rem 0.5rem;
+  color: var(--text-muted);
+}
+
+.btn-close:hover {
+  color: var(--danger);
+  border-color: var(--danger);
+}
+
+.btn-secondary {
+  background: var(--surface);
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.btn-secondary:hover {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+/* ── Stats section ── */
+
+.stats-section {
+  margin-bottom: 1.5rem;
+}
+
+.stats-content {
+  margin-top: 0.75rem;
+  padding: 1rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.stats-text {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+}
+
+.stats-fav {
+  font-size: 0.9rem;
+  color: var(--fav);
+  margin-top: 0.3rem;
+}
+
+/* ── Activity log ── */
+
+.log-section {
+  margin-top: 1rem;
+}
+
+.log-heading {
+  font-size: 0.95rem;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+.log-list {
+  list-style: none;
+  max-height: 260px;
+  overflow-y: auto;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.5rem;
+}
+
+.log-entry {
+  display: flex;
+  gap: 0.6rem;
+  padding: 0.35rem 0.5rem;
+  font-size: 0.78rem;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+}
+
+.log-entry:last-child {
+  border-bottom: none;
+}
+
+.log-time {
+  color: var(--text-muted);
+  min-width: 70px;
+}
+
+.log-intent {
+  color: var(--accent);
+  font-weight: 600;
+  min-width: 110px;
+}
+
+.log-value {
+  color: var(--text);
+  opacity: 0.7;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Utility ── */
+
+.hidden {
+  display: none !important;
+}
+
+/* ── Scrollbar ── */
+
+.log-list::-webkit-scrollbar {
+  width: 5px;
+}
+
+.log-list::-webkit-scrollbar-track {
+  background: var(--surface);
+}
+
+.log-list::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}

package/everyState-view/004_06/quoteExplorer/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>004_06 - Quote Explorer Pro</title>
+  <link rel="stylesheet" href="index.css" />
+</head>
+<body>
+  <div id="app"></div>
+
+  <script type="importmap">
+  {
+    "imports": {
+      "@everystate/core":             "/everystate-core/index.js",
+      "@everystate/core/queryClient":  "/everystate-core/queryClient.js",
+      "@everystate/view/resolve":      "/everystate-view/resolve.js",
+      "@everystate/view/project":      "/everystate-view/project.js",
+      "@everystate/perf":              "/everystate-perf/index.js"
+    }
+  }
+  </script>
+  <script type="module" src="app.js"></script>
+</body>
+</html>

package/everyState-view/004_06/quoteExplorer/intents.js

@@ -0,0 +1,44 @@
+// ─── Intent handlers ────────────────────────────────────────────
+// Subscribe to intent.* paths and handle business logic.
+// Actions emit intents; this file processes them.
+// Refs are injected so handlers can toggle view node classes.
+
+export function mountIntents(store, refs) {
+  const unsubs = [];
+
+  // ── Select author → show detail panel ──
+  unsubs.push(store.subscribe('intent.selectAuthor', (author) => {
+    store.set('state.selectedAuthor', author);
+    store.set(`view.nodes.${refs.detail}.class`, 'detail-panel');
+  }));
+
+  // ── Close detail → hide panel, clear search ──
+  unsubs.push(store.subscribe('intent.closeDetail', () => {
+    store.set('state.selectedAuthor', '');
+    store.set('state.searchTerm', '');
+    store.set(`view.nodes.${refs.detail}.class`, 'detail-panel hidden');
+  }));
+
+  // ── Toggle favorite on a quote ──
+  unsubs.push(store.subscribe('intent.toggleFav', (id) => {
+    const quotes = store.get('state.quotes') || [];
+    store.set('state.quotes', quotes.map(q =>
+      q.id === id ? { ...q, fav: !q.fav } : q
+    ));
+  }));
+
+  // ── Toggle stats visibility ──
+  unsubs.push(store.subscribe('intent.toggleStats', () => {
+    const visible = store.get('ui.statsVisible');
+    store.set('ui.statsVisible', !visible);
+    if (!visible) {
+      store.set(`view.nodes.${refs.statsContent}.class`, 'stats-content');
+      store.set('ui.toggleLabel', '📊 Hide Stats');
+    } else {
+      store.set(`view.nodes.${refs.statsContent}.class`, 'stats-content hidden');
+      store.set('ui.toggleLabel', '📊 Show Stats');
+    }
+  }));
+
+  return () => unsubs.forEach(u => u());
+}

package/everyState-view/004_06/quoteExplorer/policies.js

@@ -0,0 +1,25 @@
+// ─── Policy subscriptions ───────────────────────────────────────
+// Cross-cutting concerns via wildcard subscribers.
+// intent.* captures every intent and logs it to the activity feed.
+// This is the "policy layer" pattern from the book (Ch 12, 17).
+
+export function mountPolicies(store) {
+  const unsubs = [];
+
+  // Activity log: capture all intents via wildcard
+  unsubs.push(store.subscribe('intent.*', ({ path, value }) => {
+    const log = store.get('derived.activityLog') || [];
+    const intent = path.replace('intent.', '');
+    const display = typeof value === 'object'
+      ? JSON.stringify(value)
+      : String(value ?? '');
+    const entry = {
+      time: new Date().toLocaleTimeString(),
+      intent,
+      value: display.length > 30 ? display.slice(0, 30) + '…' : display,
+    };
+    store.set('derived.activityLog', [entry, ...log].slice(0, 15));
+  }));
+
+  return () => unsubs.forEach(u => u());
+}

package/everyState-view/004_06/quoteExplorer/resolve.js

@@ -0,0 +1,51 @@
+// ─── Resolve utilities ──────────────────────────────────────────
+// Same pattern as 004_05: resolveTree, resolveActions, buildRefs.
+
+/**
+ * resolveTree(registry, key)
+ * Recursively builds a nested spec from the flat dot-path registry.
+ * String references in children/template are replaced with resolved specs.
+ */
+export function resolveTree(registry, key) {
+  const spec = registry[key];
+  if (!spec) return null;
+  const resolved = { ...spec };
+
+  if (Array.isArray(resolved.children)) {
+    resolved.children = resolved.children.map(childKey =>
+      typeof childKey === 'string' ? resolveTree(registry, childKey) : childKey
+    ).filter(Boolean);
+  }
+
+  if (typeof resolved.template === 'string') {
+    resolved.template = registry[resolved.template] || resolved.template;
+  }
+
+  return resolved;
+}
+
+/**
+ * resolveActions(actionRegistry, store, ...deps)
+ * Returns a flat map of 'actions.name' → handler(args...).
+ * Each handler pre-injects (store, ...deps) so callHandler only passes user args.
+ */
+export function resolveActions(actionRegistry, store, ...deps) {
+  const handlers = {};
+  for (const [key, fn] of Object.entries(actionRegistry)) {
+    handlers[`actions.${key}`] = (...args) => fn(store, ...deps, ...args);
+  }
+  return handlers;
+}
+
+/**
+ * buildRefs(nodes)
+ * Scans normalized view nodes for ref properties.
+ * Returns { refName → nodeId } so intent handlers can target view nodes.
+ */
+export function buildRefs(nodes) {
+  const refs = {};
+  for (const [id, node] of Object.entries(nodes)) {
+    if (node.ref) refs[node.ref] = id;
+  }
+  return refs;
+}

package/everyState-view/004_06/quoteExplorer/store.js

@@ -0,0 +1,44 @@
+// ─── Store: namespaced state tree ───────────────────────────────
+// state.*    = source of truth (user data)
+// derived.*  = auto-computed by subscribers
+// ui.*       = ephemeral UI flags
+// intent.*   = written by actions, consumed by intent handlers
+
+import { createEveryState } from '@everystate/core';
+
+export const store = createEveryState({
+  state: {
+    quotes: [
+      { id: 1,  author: 'Rumi',          text: 'Your heart is the size of an ocean. Go find yourself in its hidden depths.', fav: false },
+      { id: 2,  author: 'Rumi',          text: 'Respond to every call that excites your spirit.', fav: false },
+      { id: 3,  author: 'Rumi',          text: 'Everything in the universe is within you. Ask all from yourself.', fav: false },
+      { id: 4,  author: 'Rumi',          text: 'When I am silent, I have thunder hidden inside.', fav: false },
+      { id: 5,  author: 'Einstein',      text: 'Imagination is more important than knowledge.', fav: false },
+      { id: 6,  author: 'Einstein',      text: 'Life is like riding a bicycle. To keep your balance, you must keep moving.', fav: false },
+      { id: 7,  author: 'Einstein',      text: "If you can't explain it simply, you don't understand it well enough.", fav: false },
+      { id: 8,  author: 'Mother Teresa', text: 'Spread love everywhere you go.', fav: false },
+      { id: 9,  author: 'Mother Teresa', text: 'If you judge people, you have no time to love them.', fav: false },
+      { id: 10, author: 'Mother Teresa', text: 'Not all of us can do great things. But we can do small things with great love.', fav: false },
+      { id: 11, author: 'Muhammad Ali',  text: 'Float like a butterfly, sting like a bee.', fav: false },
+      { id: 12, author: 'Muhammad Ali',  text: "Don't count the days, make the days count.", fav: false },
+      { id: 13, author: 'Muhammad Ali',  text: 'Service to others is the rent you pay for your room here on earth.', fav: false },
+      { id: 14, author: 'Socrates',      text: 'The unexamined life is not worth living.', fav: false },
+      { id: 15, author: 'Socrates',      text: 'I know that I know nothing.', fav: false },
+      { id: 16, author: 'Socrates',      text: 'Wonder is the beginning of wisdom.', fav: false },
+    ],
+    authors: ['Rumi', 'Einstein', 'Mother Teresa', 'Muhammad Ali', 'Socrates'],
+    selectedAuthor: '',
+    searchTerm: '',
+  },
+  derived: {
+    filteredQuotes: [],
+    quoteCount: 0,
+    favCount: 0,
+    stats: '',
+    activityLog: [],
+  },
+  ui: {
+    statsVisible: false,
+    toggleLabel: '📊 Show Stats',
+  },
+});

package/everyState-view/004_07/quoteExplorer/app.js

@@ -0,0 +1,47 @@
+// ─── App: boot sequence ─────────────────────────────────────────
+// Simplified from 004_06:
+//   - No actions.js (eliminated)
+//   - No resolveActions (eliminated)
+//   - Auto-intent Proxy: any 'intent.*' onClick in a component spec
+//     auto-writes to the store. Zero handler registration needed.
+//   - 6 steps instead of 8
+
+import { flatten } from '@everystate/view/resolve';
+import { mount } from '@everystate/view/project';
+import { createPerfMonitor, mountOverlay } from '@everystate/perf';
+import { store } from './store.js';
+import { c } from './components.js';
+import { resolveTree, buildRefs } from './resolve.js';
+import { mountIntents } from './intents.js';
+import { mountDerived } from './derived.js';
+import { mountPolicies } from './policies.js';
+
+// 1. Resolve component tree + flatten into store
+const spec = resolveTree(c, 'app');
+const { nodes } = flatten(spec, store, 'view');
+const refs = buildRefs(nodes);
+console.log('[004_07 refs]', refs);
+
+// 2. Mount reactive subscribers (order: derived, policies, intents)
+mountDerived(store);
+mountPolicies(store);
+mountIntents(store, refs);
+
+// 3. Auto-intent handler: any 'intent.*' onClick writes directly to the store.
+//    Eliminates the entire actions.js file + resolveActions ceremony.
+const handlers = new Proxy({}, {
+  get(_, name) {
+    if (typeof name === 'string' && name.startsWith('intent.')) {
+      return (arg, event) => {
+        store.set(name, arg instanceof Event ? Date.now() : (arg ?? Date.now()));
+      };
+    }
+  }
+});
+
+// 4. Mount DOM
+mount(store, 'view', document.getElementById('app'), handlers);
+
+// 5. Perf overlay
+const perf = createPerfMonitor(store);
+mountOverlay(perf, document.body);