@everystate/examples 1.0.0 → 1.0.1

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

@@ -0,0 +1,78 @@
+// ─── App: boot sequence ─────────────────────────────────────────
+// 004_08: Fully transparent auto-intent.
+//
+// No Proxy. No actions.js. No runtime metaprogramming.
+// intentHandlers() scans the component registry at boot time and
+// builds a plain handlers map: { 'intent.X': fn } for every
+// onClick/onDblClick/onEnter/onBlur target starting with 'intent.'.
+//
+// The result is a regular object. console.log(handlers) shows every key.
+// grep 'intent.' finds the spec, the handler, and the subscriber.
+
+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';
+
+// ─── intentHandlers: scan registry, build plain handlers map ────
+// Walks all component specs + nested templates. For every event
+// target starting with 'intent.', registers a handler that calls
+// store.set(intentPath, resolvedArg). Returns a plain object.
+
+function intentHandlers(store, components) {
+  const handlers = {};
+  const seen = new Set();
+  const EVENT_KEYS = ['onClick', 'onDblClick', 'onEnter', 'onBlur'];
+
+  function scan(spec) {
+    if (!spec || typeof spec !== 'object') return;
+    for (const key of EVENT_KEYS) {
+      const target = spec[key];
+      if (typeof target === 'string' && target.startsWith('intent.')) {
+        const name = target.replace(/\(.*\)$/, '');
+        if (!seen.has(name)) {
+          seen.add(name);
+          handlers[name] = (arg, event) => {
+            store.set(name, arg instanceof Event ? Date.now() : (arg ?? Date.now()));
+          };
+        }
+      }
+    }
+    // Recurse into templates and template children
+    if (spec.template) scan(spec.template);
+    if (Array.isArray(spec.template?.children)) {
+      spec.template.children.forEach(scan);
+    }
+  }
+
+  Object.values(components).forEach(scan);
+  return handlers;
+}
+
+// ─── Boot ───────────────────────────────────────────────────────
+
+// 1. Resolve component tree + flatten into store
+const spec = resolveTree(c, 'app');
+const { nodes } = flatten(spec, store, 'view');
+const refs = buildRefs(nodes);
+
+// 2. Mount reactive subscribers (order: derived, policies, intents)
+mountDerived(store);
+mountPolicies(store);
+mountIntents(store, refs);
+
+// 3. Build handlers from registry (plain object, fully inspectable)
+const handlers = intentHandlers(store, c);
+console.log('[004_08 intent handlers]', Object.keys(handlers));
+
+// 4. Mount DOM
+mount(store, 'view', document.getElementById('app'), handlers);
+
+// 5. Perf overlay
+const perf = createPerfMonitor(store);
+mountOverlay(perf, document.body);

package/everyState-view/004_08/quoteExplorer/components.js

@@ -0,0 +1,85 @@
+// ─── Component registry ─────────────────────────────────────────
+// Flat dot-path keyed specs. Every component is a resource.
+// children/template are dot-path strings or inline objects.
+//
+// KEY CHANGE from 004_06:
+//   onClick targets use 'intent.*' directly instead of 'actions.*'.
+//   The view engine's auto-intent handler writes the resolved arg
+//   to the store at the intent path. No actions.js file needed.
+//
+// {path} interpolation reads from the store at mount time.
+// ref: stable handle for intent handlers to toggle view node classes.
+// bind: two-way binding to a store path (no action needed).
+
+export const c = {
+  // ── Root ──
+  'app': {
+    tag: 'div', class: 'app',
+    children: ['app.header', 'app.search', 'app.tags', 'app.detail', 'app.stats', 'app.log']
+  },
+
+  // ── Header ──
+  'app.header':          { tag: 'header', class: 'app-header', children: ['app.header.title', 'app.header.subtitle'] },
+  'app.header.title':    { tag: 'h1', text: '💬 Quote Explorer Pro' },
+  'app.header.subtitle': { tag: 'p', class: 'subtitle', text: 'Intent-driven · Derived state · Policy subscriptions' },
+
+  // ── Search (two-way bind - no action needed) ──
+  'app.search':       { tag: 'div', class: 'search-bar', children: ['app.search.input'] },
+  'app.search.input': { tag: 'input', class: 'search-input', placeholder: 'Search quotes…', bind: 'state.searchTerm' },
+
+  // ── Author Tags ──
+  'app.tags':       { tag: 'div', class: 'author-tags', children: ['app.tags.label', 'app.tags.list'] },
+  'app.tags.label': { tag: 'span', class: 'tags-label', text: 'Pick an author:' },
+  'app.tags.list':  {
+    tag: 'div', class: 'tags-row',
+    forEach: 'state.authors', as: 'author',
+    template: { tag: 'button', class: 'tag', text: 'author', onClick: 'intent.selectAuthor(author)' }
+  },
+
+  // ── Detail Panel (conditional - hidden by default) ──
+  'app.detail': {
+    tag: 'div', class: 'detail-panel hidden', ref: 'detail',
+    children: ['app.detail.bar', 'app.detail.quotes']
+  },
+  'app.detail.bar':         { tag: 'div', class: 'detail-bar', children: ['app.detail.bar.heading', 'app.detail.bar.count', 'app.detail.bar.close'] },
+  'app.detail.bar.heading': { tag: 'h2', class: 'detail-heading', text: '{state.selectedAuthor}' },
+  'app.detail.bar.count':   { tag: 'span', class: 'badge', text: '{derived.quoteCount} quotes' },
+  'app.detail.bar.close':   { tag: 'button', class: 'btn btn-close', text: '✕', onClick: 'intent.closeDetail' },
+  'app.detail.quotes': {
+    tag: 'ul', class: 'detail-quotes',
+    forEach: 'derived.filteredQuotes', as: 'item',
+    template: {
+      tag: 'li', class: 'quote-item',
+      children: [
+        { tag: 'span', class: 'quote-text', text: 'item.text' },
+        { tag: 'button', class: 'fav-btn', classIf: { 'is-fav': 'item.fav' }, text: '♥', onClick: 'intent.toggleFav(item.id)' }
+      ]
+    }
+  },
+
+  // ── Stats Section (conditional toggle) ──
+  'app.stats':              { tag: 'div', class: 'stats-section', children: ['app.stats.toggle', 'app.stats.content'] },
+  'app.stats.toggle':       { tag: 'button', class: 'btn btn-secondary', text: '{ui.toggleLabel}', onClick: 'intent.toggleStats' },
+  'app.stats.content':      {
+    tag: 'div', class: 'stats-content hidden', ref: 'statsContent',
+    children: ['app.stats.content.text', 'app.stats.content.favcount']
+  },
+  'app.stats.content.text':     { tag: 'p', class: 'stats-text', text: '{derived.stats}' },
+  'app.stats.content.favcount': { tag: 'p', class: 'stats-fav', text: '❤ {derived.favCount} favorites' },
+
+  // ── Activity Log (policy-driven via intent.* wildcard) ──
+  'app.log':         { tag: 'div', class: 'log-section', children: ['app.log.heading', 'app.log.list'] },
+  'app.log.heading': { tag: 'h3', class: 'log-heading', text: '📋 Activity Log' },
+  'app.log.list':    {
+    tag: 'ul', class: 'log-list',
+    forEach: 'derived.activityLog', as: 'entry',
+    template: {
+      tag: 'li', class: 'log-entry',
+      children: [
+        { tag: 'span', class: 'log-time', text: 'entry.time' },
+        { tag: 'span', class: 'log-intent', text: 'entry.intent' },
+        { tag: 'span', class: 'log-value', text: 'entry.value' },
+      ]
+    }
+  },
+};

package/everyState-view/004_08/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.
+//
+// KEY CHANGE from 004_06: uses setMany() for atomic batch writes.
+
+export function mountDerived(store) {
+  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)
+        );
+      }
+    }
+
+    const totalAuthors = (store.get('state.authors') || []).length;
+    const favTotal = quotes.filter(q => q.fav).length;
+
+    store.setMany({
+      'derived.filteredQuotes': filtered,
+      'derived.quoteCount': filtered.length,
+      'derived.favCount': favTotal,
+      'derived.stats': `${quotes.length} total quotes · ${totalAuthors} authors · ${favTotal} favorites`,
+    });
+  }
+
+  // Recompute whenever any state.* path changes
+  const unsub = store.subscribe('state.*', recompute);
+
+  // Initial computation
+  recompute();
+
+  return unsub;
+}

package/everyState-view/004_08/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_08/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_08 - Quote Explorer Pro (transparent auto-intent)</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_08/quoteExplorer/intents.js

@@ -0,0 +1,51 @@
+// ─── Intent handlers ────────────────────────────────────────────
+// Subscribe to intent.* paths and handle business logic.
+// UI events emit intents directly (no actions.js intermediary).
+// Refs are injected so handlers can toggle view node classes.
+//
+// KEY CHANGES from 004_06:
+//   - setMany() for atomic batching (fewer subscriber fires)
+//   - Cleaner unsubs with const off = [...] pattern
+
+export function mountIntents(store, refs) {
+  const off = [
+
+    // ── Select author -> show detail panel ──
+    store.subscribe('intent.selectAuthor', (author) => {
+      store.setMany({
+        'state.selectedAuthor': author,
+        [`view.nodes.${refs.detail}.class`]: 'detail-panel',
+      });
+    }),
+
+    // ── Close detail -> hide panel, clear search ──
+    store.subscribe('intent.closeDetail', () => {
+      store.setMany({
+        'state.selectedAuthor': '',
+        'state.searchTerm': '',
+        [`view.nodes.${refs.detail}.class`]: 'detail-panel hidden',
+      });
+    }),
+
+    // ── Toggle favorite on a quote ──
+    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 ──
+    store.subscribe('intent.toggleStats', () => {
+      const visible = store.get('ui.statsVisible');
+      store.setMany({
+        'ui.statsVisible': !visible,
+        [`view.nodes.${refs.statsContent}.class`]: visible ? 'stats-content hidden' : 'stats-content',
+        'ui.toggleLabel': visible ? '📊 Show Stats' : '📊 Hide Stats',
+      });
+    }),
+
+  ];
+
+  return () => off.forEach(u => u());
+}

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

@@ -0,0 +1,21 @@
+// ─── 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) {
+  // Activity log: capture all intents via wildcard
+  return 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));
+  });
+}

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

@@ -0,0 +1,39 @@
+// ─── Resolve utilities ──────────────────────────────────────────
+// Reduced from 004_06: resolveActions is gone (no actions.js).
+// Only resolveTree + buildRefs remain.
+
+/**
+ * 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;
+}
+
+/**
+ * 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;
+}