@everystate/examples 1.0.0 → 1.0.1

package/everyState-view/004_08/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 directly by UI events, 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_08_V2/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_V2/components/appDetail.js

@@ -0,0 +1,8 @@
+import { div } from "./utils/elements.js";
+
+export const appDetail = {
+    ...div,
+    class: 'detail-panel',
+    ref: 'detail',
+    children: ['app.detail.bar', 'app.detail.quotes']
+}

package/everyState-view/004_08_V2/components/appDetailBar.js

@@ -0,0 +1,7 @@
+import { div } from "./utils/elements.js";
+
+export const appDetailBar = {
+    ...div,
+    class: 'detail-bar',
+    children: ['app.detail.bar.heading', 'app.detail.bar.count', 'app.detail.bar.close']
+}

package/everyState-view/004_08_V2/components/appDetailBarClose.js

@@ -0,0 +1,8 @@
+import { button } from "./utils/elements.js";
+
+export const appDetailBarClose = {
+     ...button,
+     class: 'btn btn-close',
+     text: '✕',
+     onClick: 'intent.closeDetail'
+}

package/everyState-view/004_08_V2/components/appDetailBarCount.js

@@ -0,0 +1,7 @@
+import { span } from "./utils/elements.js";
+
+export const appDetailBarCount = {
+    ...span,
+    class: 'badge',
+    text: '{derived.quoteCount} quotes'
+}

package/everyState-view/004_08_V2/components/appDetailBarHeading.js

@@ -0,0 +1,7 @@
+import { h2 } from "./utils/elements.js";
+
+export const appDetailBarHeading = {
+    ...h2,
+    class: 'detail-heading',
+    text: '{state.selectedAuthor}'
+}

package/everyState-view/004_08_V2/components/appDetailQuotes.js

@@ -0,0 +1,15 @@
+import { ul, li, span, button } from "./utils/elements.js";
+
+export const appDetailQuotes = {
+    ...ul,
+    class: 'detail-quotes',
+    forEach: 'derived.filteredQuotes', as: 'item',
+    template: {
+      ...li,
+      class: 'quote-item',
+      children: [
+        { ...span, class: 'quote-text', text: 'item.text' },
+        { ...button, class: 'fav-btn', classIf: { 'is-fav': 'item.fav' }, text: '♥', onClick: 'intent.toggleFav(item.id)' }
+      ]
+    }
+}

package/everyState-view/004_08_V2/components/appHeader.js

@@ -0,0 +1,7 @@
+import { header } from './utils/elements.js';
+
+export const appHeader = {
+    ...header,
+    class: 'app-header',
+    children: ['app.header.title', 'app.header.subtitle']
+};

package/everyState-view/004_08_V2/components/appHeaderSubtitle.js

@@ -0,0 +1,7 @@
+import { p } from "./utils/elements.js";
+
+export const appHeaderSubtitle = {
+    ...p,
+    class: 'subtitle',
+    text: 'Intent-driven · Derived state · Policy subscriptions'
+};

package/everyState-view/004_08_V2/components/appHeaderTitle.js

@@ -0,0 +1,7 @@
+import { h1 } from "./utils/elements.js";
+
+export const appHeaderTitle = {
+    ...h1,
+    class: 'app-header h1',
+    text: '💬 Quote Explorer Pro'
+};

package/everyState-view/004_08_V2/components/appLog.js

@@ -0,0 +1,7 @@
+import { div } from "./utils/elements.js";
+
+export const appLog = {
+    ...div,
+    class: 'log-section',
+    children: ['app.log.heading', 'app.log.list']
+}

package/everyState-view/004_08_V2/components/appLogHeading.js

@@ -0,0 +1,7 @@
+import { h3 } from "./utils/elements.js";
+
+export const appLogHeading = {
+    ...h3,
+    class: 'log-heading',
+    text: '📋 Activity Log'
+}

package/everyState-view/004_08_V2/components/appLogList.js

@@ -0,0 +1,16 @@
+import { ul, li, span } from "./utils/elements.js";
+
+export const appLogList = {
+    ...ul,
+    class: 'log-list',
+    forEach: 'derived.activityLog', as: 'entry',
+    template: {
+        ...li,
+        class: 'log-entry',
+        children: [
+        { ...span, class: 'log-time', text: 'entry.time' },
+        { ...span, class: 'log-intent', text: 'entry.intent' },
+        { ...span, class: 'log-value', text: 'entry.value' },
+        ]
+    }
+}

package/everyState-view/004_08_V2/components/appSearch.js

@@ -0,0 +1,7 @@
+import { div } from "./utils/elements.js";
+
+export const appSearch = {
+    ...div,
+    class: 'search-bar',
+    children: ['app.search.input']
+}

package/everyState-view/004_08_V2/components/appSearchInput.js

@@ -0,0 +1,9 @@
+import { input } from "./utils/elements.js";
+
+export const appSearchInput = {
+    ...input,
+    class: 'search-input',
+    type: 'text',
+    placeholder: 'Search quotes...',
+    bind: 'state.searchTerm'
+};

package/everyState-view/004_08_V2/components/appStats.js

@@ -0,0 +1,7 @@
+import { div } from "./utils/elements.js";
+
+export const appStats = {
+    ...div,
+    class: 'stats-section',
+    children: ['app.stats.toggle', 'app.stats.content']
+}

package/everyState-view/004_08_V2/components/appStatsContent.js

@@ -0,0 +1,8 @@
+import { div } from "./utils/elements.js";
+
+export const appStatsContent = {
+    ...div,
+    class: 'stats-content hidden',
+    ref: 'statsContent',
+    children: ['app.stats.content.text', 'app.stats.content.favcount']
+}

package/everyState-view/004_08_V2/components/appStatsContentFavcount.js

@@ -0,0 +1,7 @@
+import { p } from "./utils/elements.js";
+
+export const appStatsContentFavcount = {
+    ...p,
+    class: 'stats-fav',
+    text: '❤ {derived.favCount} favorites'
+}

package/everyState-view/004_08_V2/components/appStatsContentText.js

@@ -0,0 +1,7 @@
+import { p } from "./utils/elements.js";
+
+export const appStatsContentText = {
+    ...p,
+    class: 'stats-text',
+    text: '{derived.stats}'
+}

package/everyState-view/004_08_V2/components/appStatsToggle.js

@@ -0,0 +1,8 @@
+import { button } from "./utils/elements.js";
+
+export const appStatsToggle = {
+    ...button,
+    class: 'btn btn-secondary',
+    text: '{ui.toggleLabel}',
+    onClick: 'intent.toggleStats'
+}

package/everyState-view/004_08_V2/components/appTags.js

@@ -0,0 +1,7 @@
+import { div } from "./utils/elements.js";
+
+export const appTags = {
+    ...div,
+    class: 'author-tags',
+    children: ['app.tags.label', 'app.tags.row']
+};

package/everyState-view/004_08_V2/components/appTagsLabel.js

@@ -0,0 +1,7 @@
+import { label } from "./utils/elements.js";
+
+export const appTagsLabel = {
+    ...label,
+    class: 'tags-label',
+    text: 'Tags'
+};

package/everyState-view/004_08_V2/components/appTagsRow.js

@@ -0,0 +1,15 @@
+import { div, button } from "./utils/elements.js";
+import { cssClasses } from "./utils/css.js";
+
+export const appTagsRow = {
+    ...div,
+    class: 'tags-row',
+    forEach: 'state.authors',
+    as: 'author',
+    template: {
+        ...button,
+        class: 'tag',
+        text: 'author',
+        onClick: 'intent.selectAuthor(author)'
+    }
+}

package/everyState-view/004_08_V2/components/index.js

@@ -0,0 +1,59 @@
+// components/index.js
+import { appHeader } from "./appHeader.js";
+import { appHeaderTitle } from './appHeaderTitle.js';
+import { appHeaderSubtitle } from './appHeaderSubtitle.js';
+import { appSearch } from './appSearch.js';
+import { appSearchInput } from './appSearchInput.js';
+import { appTags } from './appTags.js';
+import { appTagsLabel } from './appTagsLabel.js';
+import { appTagsRow } from './appTagsRow.js';
+import { appDetail } from './appDetail.js';
+import { appDetailBar } from './appDetailBar.js';
+import { appDetailBarHeading } from './appDetailBarHeading.js';
+import { appDetailBarCount } from './appDetailBarCount.js';
+import { appDetailBarClose } from './appDetailBarClose.js';
+import { appDetailQuotes } from './appDetailQuotes.js';
+import { appStats } from './appStats.js';
+import { appStatsToggle } from './appStatsToggle.js';
+import { appStatsContent } from './appStatsContent.js';
+import { appStatsContentText } from './appStatsContentText.js';
+import { appStatsContentFavcount } from './appStatsContentFavcount.js';
+import { appLog } from "./appLog.js";
+import { appLogHeading } from "./appLogHeading.js";
+import { appLogList } from "./appLogList.js";
+
+export {
+  appHeader,
+  appHeaderTitle,
+  appHeaderSubtitle,
+  appSearch,
+  appSearchInput,
+  appTags,
+  appTagsLabel,
+  appTagsRow,
+  appDetail,
+  appDetailBar,
+  appDetailBarHeading,
+  appDetailBarCount,
+  appDetailBarClose,
+  appDetailQuotes,
+  appStats,
+  appStatsToggle,
+  appStatsContent,
+  appStatsContentText,
+  appStatsContentFavcount,
+  appLog,
+  appLogHeading,
+  appLogList,
+};
+
+/*
+// Optional: Group them logically
+export const header = {
+  app: appHeader,
+  title: appHeaderTitle,
+  subtitle: appHeaderSubtitle
+};
+
+export const searchBar = appSearch;
+*/

package/everyState-view/004_08_V2/components/utils/css.js

@@ -0,0 +1,88 @@
+// Composable CSS classes
+// Atomic building blocks. Each export is a minimal spec object representing a single css class
+// Compose with obbject spread:
+//   { ...cssAppHeader }
+// The state engine hydrates text, bindings, and handlers via
+// dot-path addressing - elements don't need content at birth.
+// Observer before observed.
+
+export const cssClasses = {
+    appHeader: `
+        app-header
+        text-align-center
+        margin-bottom-2rem`,
+    appHeaderTitle: `
+        app-header-title
+        font-size-2rem
+        font-weight-700
+        background-linear-gradient-135deg-var-accent-a78bfa
+        background-clip-text
+        -webkit-background-clip-text
+        -webkit-text-fill-color-transparent`,
+    appHeaderSubtitle: `
+        app-header-subtitle
+        color-var-text-muted
+        font-size-0_85rem
+        margin-top-0_25rem
+        letter-spacing-0_04em`,
+    appSearch: `
+        app-search
+        margin-bottom-1_5rem`,
+    appSearchInput: `
+        app-search-input
+        width-100p
+        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`,
+    appTags: `
+        app-tags
+        margin-bottom-1_5rem`,
+    appTagsLabel: `
+        app-tags-label
+        display-block
+        font-size-0_8rem
+        color-var-text-muted
+        margin-bottom-0_5rem
+        text-transform-uppercase
+        letter-spacing-0_06em`,
+    appTagsRow: `
+        app-tags-row
+        display-flex
+        flex-wrap
+        gap-0_5rem`,
+    tag: `
+        tag
+        padding-0_4rem-0_9rem
+        background-var-accent
+        color-white
+        border-none
+        border-radius-0_25rem
+        cursor-pointer
+        font-size-0_85rem
+        transition-background-0_2s`,
+    appDetail: `
+        app-detail
+        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`,
+    appDetailBar: `
+        detail-bar
+        display-flex
+        align-items-center
+        gap-0_75rem
+        margin-bottom-1rem
+        padding-bottom-0_75rem
+        border-bottom-1px-solid-var-border`,
+    appDetailBarHeading: 'detail-bar-heading',
+    appDetailBarCount: 'detail-bar-count',
+    appDetailBarClose: 'detail-bar-close',
+    appDetailQuotes: 'detail-quotes',
+}

package/everyState-view/004_08_V2/components/utils/elements.js

@@ -0,0 +1,87 @@
+// ─── Composable HTML Elements ────────────────────────────────────
+// Atomic building blocks. Each export is a minimal spec object
+// representing a single HTML element. Compose with object spread:
+//
+//   { ...div, class: 'card', children: ['child1', 'child2'] }
+//
+// The state engine hydrates text, bindings, and handlers via
+// dot-path addressing - elements don't need content at birth.
+// Observer before observed.
+
+// ── Document sections ──
+export const header  = { tag: 'header' };
+export const footer  = { tag: 'footer' };
+export const main    = { tag: 'main' };
+export const nav     = { tag: 'nav' };
+export const section = { tag: 'section' };
+export const article = { tag: 'article' };
+export const aside   = { tag: 'aside' };
+
+// ── Headings ──
+export const h1 = { tag: 'h1' };
+export const h2 = { tag: 'h2' };
+export const h3 = { tag: 'h3' };
+export const h4 = { tag: 'h4' };
+export const h5 = { tag: 'h5' };
+export const h6 = { tag: 'h6' };
+
+// ── Block content ──
+export const div        = { tag: 'div' };
+export const p          = { tag: 'p' };
+export const blockquote = { tag: 'blockquote' };
+export const pre        = { tag: 'pre' };
+export const code       = { tag: 'code' };
+export const hr         = { tag: 'hr' };
+
+// ── Inline content ──
+export const span   = { tag: 'span' };
+export const a      = { tag: 'a' };
+export const strong = { tag: 'strong' };
+export const em     = { tag: 'em' };
+export const small  = { tag: 'small' };
+export const mark   = { tag: 'mark' };
+export const time   = { tag: 'time' };
+export const abbr   = { tag: 'abbr' };
+
+// ── Lists ──
+export const ul = { tag: 'ul' };
+export const ol = { tag: 'ol' };
+export const li = { tag: 'li' };
+export const dl = { tag: 'dl' };
+export const dt = { tag: 'dt' };
+export const dd = { tag: 'dd' };
+
+// ── Forms ──
+export const form     = { tag: 'form' };
+export const input    = { tag: 'input' };
+export const textarea = { tag: 'textarea' };
+export const select   = { tag: 'select' };
+export const option   = { tag: 'option' };
+export const label    = { tag: 'label' };
+export const fieldset = { tag: 'fieldset' };
+export const legend   = { tag: 'legend' };
+export const button   = { tag: 'button' };
+export const output   = { tag: 'output' };
+
+// ── Media ──
+export const img    = { tag: 'img' };
+export const video  = { tag: 'video' };
+export const audio  = { tag: 'audio' };
+export const canvas = { tag: 'canvas' };
+export const svg    = { tag: 'svg' };
+
+// ── Table ──
+export const table = { tag: 'table' };
+export const thead = { tag: 'thead' };
+export const tbody = { tag: 'tbody' };
+export const tfoot = { tag: 'tfoot' };
+export const tr    = { tag: 'tr' };
+export const th    = { tag: 'th' };
+export const td    = { tag: 'td' };
+
+// ── Interactive / Semantic ──
+export const details = { tag: 'details' };
+export const summary = { tag: 'summary' };
+export const dialog  = { tag: 'dialog' };
+export const progress = { tag: 'progress' };
+export const meter   = { tag: 'meter' };

package/everyState-view/004_08_V2/components.js

@@ -0,0 +1,79 @@
+// 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).
+
+import {
+  appHeader,
+  appHeaderTitle,
+  appHeaderSubtitle,
+  appSearch,
+  appSearchInput,
+  appTags,
+  appTagsLabel,
+  appTagsRow,
+  appDetail,
+  appDetailBar,
+  appDetailBarHeading,
+  appDetailBarCount,
+  appDetailBarClose,
+  appDetailQuotes,
+  appStats,
+  appStatsToggle,
+  appStatsContent,
+  appStatsContentText,
+  appStatsContentFavcount,
+  appLog,
+  appLogHeading,
+  appLogList,
+  } from "./components/index.js";
+
+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':                   appHeader,
+  'app.header.title':             appHeaderTitle,
+  'app.header.subtitle':          appHeaderSubtitle,
+
+  // Search (two-way bind - no action needed)
+  'app.search':                   appSearch,
+  'app.search.input':             appSearchInput,
+
+  // Author Tags
+  'app.tags':                     appTags,
+  'app.tags.label':               appTagsLabel,
+  'app.tags.row':                 appTagsRow,
+
+  // Detail Panel (conditional - hidden by default)
+  'app.detail':                   appDetail,
+  'app.detail.bar':               appDetailBar,
+  'app.detail.bar.heading':       appDetailBarHeading,
+  'app.detail.bar.count':         appDetailBarCount,
+  'app.detail.bar.close':         appDetailBarClose,
+  'app.detail.quotes':            appDetailQuotes,
+
+  // Stats Section (conditional toggle)
+  'app.stats':                    appStats,
+  'app.stats.toggle':             appStatsToggle,
+  'app.stats.content':            appStatsContent,
+  'app.stats.content.text':       appStatsContentText,
+  'app.stats.content.favcount':   appStatsContentFavcount,
+
+  // Activity Log (policy-driven via intent.* wildcard)
+  'app.log':                      appLog,
+  'app.log.heading':              appLogHeading,
+  'app.log.list':                 appLogList,
+};