@everystate/examples 1.0.0 → 1.0.1

package/everyState-view/004_03/quotesFetcher/store.js

@@ -0,0 +1,11 @@
+import { createEveryState } from '@everystate/core';
+import { createQueryClient } from '@everystate/core/queryClient';
+
+export const store = createEveryState({
+  quote: '',
+  author: '',
+  history: [],
+  message: 'Click the button to fetch a quote'
+});
+
+export const qc = createQueryClient(store);

package/everyState-view/004_04/quotesFetcher/actions.js

@@ -0,0 +1,66 @@
+// ─── Action registry ───────────────────────────────────────────
+// Every action is a dot-path key → function(store, qc).
+// Components reference actions as 'actions.<key>'.
+
+export const actions = {
+
+  'fetchQuote': async (store, qc) => {
+    store.set('message', 'Fetching...');
+    try {
+      const data = await qc.query('quote', async (signal) => {
+        const res = await fetch('https://dummyjson.com/quotes/random', { signal });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      });
+      store.set('quote', data.quote);
+      store.set('author', data.author);
+      store.set('message', '');
+      const history = store.get('history') || [];
+      store.set('history', [{ quote: data.quote, author: data.author }, ...history].slice(0, 10));
+    } catch (err) {
+      if (err.name !== 'AbortError') {
+        store.set('message', 'Error: ' + err.message);
+      }
+    }
+  },
+
+  'loadArchive': async (store, qc) => {
+    store.set('archive.status', 'Loading 50 quotes...');
+    try {
+      const data = await qc.query('archive', async (signal) => {
+        const res = await fetch('https://dummyjson.com/quotes?limit=50', { signal });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      });
+      const quotes = data.quotes.map(q => ({
+        quote: q.quote,
+        author: q.author,
+        id: '#' + q.id
+      }));
+      quotes.sort((a, b) => a.author.localeCompare(b.author));
+      const authors = [...new Set(quotes.map(q => q.author))];
+      store.set('archive.display', quotes);
+      store.set('archive.count', quotes.length);
+      store.set('archive.authorCount', authors.length);
+      store.set('archive.sortOrder', 'asc');
+      store.set('archive.status', '');
+    } catch (err) {
+      if (err.name !== 'AbortError') {
+        store.set('archive.status', 'Error: ' + err.message);
+      }
+    }
+  },
+
+  'sortArchive': (store) => {
+    const current = store.get('archive.sortOrder') || 'asc';
+    const next = current === 'asc' ? 'desc' : 'asc';
+    const display = [...(store.get('archive.display') || [])];
+    display.sort((a, b) => {
+      const cmp = a.author.localeCompare(b.author);
+      return next === 'asc' ? cmp : -cmp;
+    });
+    store.set('archive.display', display);
+    store.set('archive.sortOrder', next);
+  },
+
+};

package/everyState-view/004_04/quotesFetcher/app.js

@@ -0,0 +1,24 @@
+import { flatten } from '@everystate/view/resolve';
+import { mount } from '@everystate/view/project';
+import { createPerfMonitor, mountOverlay } from '@everystate/perf';
+import { store, qc } from './store.js';
+import { c } from './components.js';
+import { actions } from './actions.js';
+import { resolveTree, resolveActions } from './resolve.js';
+
+// 1. Resolve component tree from dot-path registry
+const spec = resolveTree(c, 'app');
+
+// 2. Resolve action handlers from dot-path registry
+const handlers = resolveActions(actions, store, qc);
+
+// 3. Flatten + Mount
+flatten(spec, store, 'view');
+mount(store, 'view', document.getElementById('app'), handlers);
+
+// 4. Perf overlay with state tree
+const perf = createPerfMonitor(store);
+mountOverlay(perf, document.body);
+
+// 5. Fire initial fetch
+handlers['actions.fetchQuote']();

package/everyState-view/004_04/quotesFetcher/components/archive.js

@@ -0,0 +1,40 @@
+// ─── Archive sub-registry ──────────────────────────────────────
+// 50-quote archive organized by author, with sort controls and stats.
+// Deepest path: archive.content.card.meta.author (5 levels from archive)
+//               archive.toolbar.actions.sortBtn   (4 levels from archive)
+//               archive.toolbar.stats.authors     (4 levels from archive)
+
+export const archiveComponents = {
+
+  // ── Section wrapper (level 1) ──
+  'archive':                                { tag: 'section', class: 'archive', children: ['archive.toolbar', 'archive.content'] },
+
+  // ── Toolbar (level 2) ──
+  'archive.toolbar':                        { tag: 'div', class: 'archive-toolbar', children: ['archive.toolbar.title', 'archive.toolbar.actions', 'archive.toolbar.stats'] },
+  'archive.toolbar.title':                  { tag: 'h2', class: 'section-heading', text: 'Quote Archive' },
+
+  // ── Toolbar → Actions (level 3) ──
+  'archive.toolbar.actions':                { tag: 'div', class: 'archive-actions', children: ['archive.toolbar.actions.loadBtn', 'archive.toolbar.actions.sortBtn'] },
+  'archive.toolbar.actions.loadBtn':        { tag: 'button', class: 'btn btn-primary', text: 'Load 50 Quotes', onClick: 'actions.loadArchive' },
+  'archive.toolbar.actions.sortBtn':        { tag: 'button', class: 'btn btn-secondary', text: '↕ Sort by Author', onClick: 'actions.sortArchive' },
+
+  // ── Toolbar → Stats (level 3) ──
+  'archive.toolbar.stats':                  { tag: 'div', class: 'archive-stats', children: ['archive.toolbar.stats.count', 'archive.toolbar.stats.authors'] },
+  'archive.toolbar.stats.count':            { tag: 'span', class: 'stat-badge', text: '{archive.count} quotes' },
+  'archive.toolbar.stats.authors':          { tag: 'span', class: 'stat-badge', text: '{archive.authorCount} authors' },
+
+  // ── Content (level 2) ──
+  'archive.content':                        { tag: 'div', class: 'archive-content', children: ['archive.content.status', 'archive.content.list'] },
+  'archive.content.status':                 { tag: 'p', class: 'archive-status', text: '{archive.status}' },
+  'archive.content.list':                   { tag: 'div', class: 'archive-list', forEach: 'archive.display', as: 'item', template: 'archive.content.card' },
+
+  // ── Quote card template (level 3 from content) ──
+  'archive.content.card':                   { tag: 'div', class: 'archive-card', children: ['archive.content.card.quote', 'archive.content.card.meta'] },
+  'archive.content.card.quote':             { tag: 'p', class: 'archive-quote-text', text: 'item.quote' },
+
+  // ── Card → Meta (level 4 from content) ──
+  'archive.content.card.meta':              { tag: 'div', class: 'archive-card-meta', children: ['archive.content.card.meta.author', 'archive.content.card.meta.id'] },
+  'archive.content.card.meta.author':       { tag: 'span', class: 'archive-card-author', text: 'item.author' },
+  'archive.content.card.meta.id':           { tag: 'span', class: 'archive-card-id', text: 'item.id' },
+
+};

package/everyState-view/004_04/quotesFetcher/components/fetcher.js

@@ -0,0 +1,29 @@
+// ─── Fetcher sub-registry ──────────────────────────────────────
+// Random quote fetcher with history list.
+// Nesting: fetcher → fetcher.card → fetcher.card.text (3 levels)
+//          fetcher → fetcher.history → fetcher.history.list → fetcher.history.item → fetcher.history.item.quote (5 levels)
+
+export const fetcherComponents = {
+
+  // ── Section wrapper ──
+  'fetcher':                        { tag: 'section', class: 'fetcher', children: ['fetcher.heading', 'fetcher.card', 'fetcher.history'] },
+  'fetcher.heading':                { tag: 'h2', class: 'section-heading', text: 'Random Quote' },
+
+  // ── Card (level 2) ──
+  'fetcher.card':                   { tag: 'div', class: 'card', children: ['fetcher.card.text', 'fetcher.card.author', 'fetcher.card.message', 'fetcher.card.btn'] },
+  'fetcher.card.text':              { tag: 'p', class: 'quote-text', text: '{quote}' },
+  'fetcher.card.author':            { tag: 'p', class: 'quote-author', text: '{author}' },
+  'fetcher.card.message':           { tag: 'p', class: 'message', text: '{message}' },
+  'fetcher.card.btn':               { tag: 'button', class: 'btn btn-primary', text: 'New Quote', onClick: 'actions.fetchQuote' },
+
+  // ── History (level 2) ──
+  'fetcher.history':                { tag: 'div', class: 'fetcher-history', children: ['fetcher.history.heading', 'fetcher.history.list'] },
+  'fetcher.history.heading':        { tag: 'h3', class: 'history-heading', text: 'Recent ({history.length})' },
+  'fetcher.history.list':           { tag: 'ul', class: 'history', forEach: 'history', as: 'item', template: 'fetcher.history.item' },
+
+  // ── History item template (level 3–4) ──
+  'fetcher.history.item':           { tag: 'li', class: 'history-item', children: ['fetcher.history.item.quote', 'fetcher.history.item.author'] },
+  'fetcher.history.item.quote':     { tag: 'span', class: 'hist-quote', text: 'item.quote' },
+  'fetcher.history.item.author':    { tag: 'span', class: 'hist-author', text: 'item.author' },
+
+};

package/everyState-view/004_04/quotesFetcher/components.js

@@ -0,0 +1,20 @@
+// ─── Component registry ────────────────────────────────────────
+// Root shell + merged sub-registries.
+// Complex subtrees extracted to components/fetcher.js and components/archive.js.
+
+import { fetcherComponents } from './components/fetcher.js';
+import { archiveComponents } from './components/archive.js';
+
+export const c = {
+
+  // ── App Shell ──
+  'app':                  { tag: 'div', class: 'quotes-app', children: ['app.header', 'fetcher', 'archive'] },
+  'app.header':           { tag: 'header', class: 'app-header', children: ['app.header.title', 'app.header.subtitle'] },
+  'app.header.title':     { tag: 'h1', text: '💬 Quote Explorer' },
+  'app.header.subtitle':  { tag: 'p', class: 'subtitle', text: 'Uniform Resource Architecture - everything is a dot path' },
+
+  // ── Merged sub-registries ──
+  ...fetcherComponents,
+  ...archiveComponents,
+
+};

package/everyState-view/004_04/quotesFetcher/index.css

@@ -0,0 +1,283 @@
+/* ─── Base ───────────────────────────────────────────────────── */
+:root {
+  --color-bg: #f0f2f5;
+  --color-surface: #ffffff;
+  --color-primary: #6750a4;
+  --color-primary-light: #e8def8;
+  --color-text: #1c1b1f;
+  --color-text-secondary: #49454f;
+  --color-text-muted: #79747e;
+  --color-border: #e0e0e0;
+  --color-divider: #cac4d0;
+  --radius: 12px;
+  --radius-sm: 8px;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  background: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.6;
+}
+
+/* ─── App Shell ──────────────────────────────────────────────── */
+.quotes-app {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+.app-header {
+  text-align: center;
+  margin-bottom: 2.5rem;
+}
+
+.app-header h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+
+.subtitle {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  margin-top: 0.25rem;
+}
+
+/* ─── Section Headings ───────────────────────────────────────── */
+.section-heading {
+  font-size: 1.35rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: var(--color-text);
+}
+
+/* ─── Buttons ────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.55rem 1.25rem;
+  border: none;
+  border-radius: 999px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.btn-primary:hover {
+  background: #7b68b6;
+  box-shadow: var(--shadow);
+}
+
+.btn-secondary {
+  background: var(--color-primary-light);
+  color: var(--color-primary);
+}
+
+.btn-secondary:hover {
+  background: #d9cdf0;
+}
+
+/* ─── Fetcher Section ────────────────────────────────────────── */
+.fetcher {
+  margin-bottom: 3rem;
+}
+
+.card {
+  background: var(--color-surface);
+  border-radius: var(--radius);
+  padding: 1.75rem;
+  box-shadow: var(--shadow);
+  margin-bottom: 1.5rem;
+}
+
+.quote-text {
+  font-size: 1.2rem;
+  font-style: italic;
+  line-height: 1.7;
+  color: var(--color-text);
+  margin-bottom: 0.75rem;
+}
+
+.quote-text::before { content: '\201C'; }
+.quote-text::after { content: '\201D'; }
+
+.quote-author {
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.quote-author::before { content: '- '; }
+
+.message {
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  min-height: 1.2em;
+  margin-bottom: 1rem;
+}
+
+/* ─── Fetcher History ────────────────────────────────────────── */
+.fetcher-history {
+  margin-top: 0.5rem;
+}
+
+.history-heading {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.75rem;
+}
+
+.history {
+  list-style: none;
+}
+
+.history-item {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.6rem 0;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.9rem;
+}
+
+.history-item:last-child {
+  border-bottom: none;
+}
+
+.hist-quote {
+  flex: 1;
+  color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hist-author {
+  color: var(--color-text-muted);
+  font-style: italic;
+  white-space: nowrap;
+}
+
+/* ─── Archive Section ────────────────────────────────────────── */
+.archive {
+  border-top: 2px solid var(--color-divider);
+  padding-top: 2rem;
+}
+
+.archive-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.archive-toolbar .section-heading {
+  margin-bottom: 0;
+  margin-right: auto;
+}
+
+.archive-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.archive-stats {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.stat-badge {
+  display: inline-flex;
+  align-items: center;
+  background: var(--color-primary-light);
+  color: var(--color-primary);
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+/* ─── Archive Content ────────────────────────────────────────── */
+.archive-content {
+  min-height: 100px;
+}
+
+.archive-status {
+  color: var(--color-text-muted);
+  font-style: italic;
+  text-align: center;
+  padding: 2rem 0;
+}
+
+.archive-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  gap: 1rem;
+}
+
+/* ─── Archive Card (deep composition) ────────────────────────── */
+.archive-card {
+  background: var(--color-surface);
+  border-radius: var(--radius-sm);
+  padding: 1rem 1.25rem;
+  box-shadow: var(--shadow);
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.archive-card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.archive-quote-text {
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--color-text);
+  margin-bottom: 0.75rem;
+  flex: 1;
+}
+
+.archive-card-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.archive-card-author {
+  font-style: italic;
+  color: var(--color-text-secondary);
+  font-size: 0.82rem;
+}
+
+.archive-card-author::before { content: '- '; }
+
+.archive-card-id {
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  font-family: monospace;
+}
+
+/* ─── Responsive ─────────────────────────────────────────────── */
+@media (max-width: 600px) {
+  .quotes-app { padding: 1rem; }
+  .app-header h1 { font-size: 1.5rem; }
+  .archive-toolbar { flex-direction: column; align-items: flex-start; }
+  .archive-list { grid-template-columns: 1fr; }
+}

package/everyState-view/004_04/quotesFetcher/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@everystate/view: Quote Explorer (Uniform Resource Architecture)</title>
+  <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>
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="app.js"></script>
+</body>
+</html>

package/everyState-view/004_04/quotesFetcher/resolve.js

@@ -0,0 +1,34 @@
+// ─── Unified resolver ──────────────────────────────────────────
+// Two functions, one pattern: dot paths → values.
+
+/**
+ * resolveTree - recursively builds a spec tree from the component registry.
+ * Replaces dot-path strings in children/template with resolved spec objects.
+ */
+export function resolveTree(registry, key) {
+  const node = registry[key];
+  if (!node) return null;
+  const resolved = { ...node };
+  if (Array.isArray(resolved.children)) {
+    resolved.children = resolved.children.map(child =>
+      typeof child === 'string' ? resolveTree(registry, child) : child
+    );
+  }
+  if (typeof resolved.template === 'string') {
+    resolved.template = resolveTree(registry, resolved.template);
+  }
+  return resolved;
+}
+
+/**
+ * resolveActions - builds a handlers map from the action registry.
+ * Maps 'actions.fetchQuote' → () => actions['fetchQuote'](store, ...deps)
+ * so mount() can wire onClick strings directly.
+ */
+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;
+}

package/everyState-view/004_04/quotesFetcher/store.js

@@ -0,0 +1,21 @@
+import { createEveryState } from '@everystate/core';
+import { createQueryClient } from '@everystate/core/queryClient';
+
+export const store = createEveryState({
+  // ── Fetcher ──
+  quote: '',
+  author: '',
+  history: [],
+  message: 'Click the button to fetch a quote',
+
+  // ── Archive ──
+  archive: {
+    display: [],
+    count: 0,
+    authorCount: 0,
+    sortOrder: 'none',
+    status: 'Click "Load Archive" to fetch 50 quotes'
+  }
+});
+
+export const qc = createQueryClient(store);