@everystate/examples 1.0.0 → 1.0.1

package/everyState-view/004_05/quoteExplorer/actions.js

@@ -0,0 +1,58 @@
+// ─── Actions ──────────────────────────────────────────────────
+// Every action receives (store, refs, ...clickArgs).
+// refs = { refName: nodeId } - stable handles to view nodes.
+//
+// PROOF 1 - Conditional rendering:
+//   The action toggles a view node's class via store.set().
+//   No showIf. No v-if. The logic lives HERE, behind the dot path.
+//
+// PROOF 2 - Parameterized components:
+//   The action writes data to store paths.
+//   Specs interpolate those paths via {selectedAuthor}, {statsText}, etc.
+//   No props. No passing data down. The store IS the parameter bus.
+
+export const actions = {
+
+  // ── Select an author (parameterization + conditional show) ──────
+  'selectAuthor': (store, refs, authorName) => {
+    // Parameterization: write to store → specs interpolate
+    store.set('selectedAuthor', authorName);
+    const allQuotes = store.get('quotes');
+    const filtered = allQuotes.filter(q => q.author === authorName);
+    store.set('selectedQuotes', filtered);
+
+    // Conditional rendering: show the detail panel
+    store.set(`view.nodes.${refs.detail}.class`, 'detail-panel');
+  },
+
+  // ── Close detail (conditional hide) ────────────────────────────
+  'closeDetail': (store, refs) => {
+    // Conditional rendering: hide the detail panel
+    store.set(`view.nodes.${refs.detail}.class`, 'detail-panel hidden');
+    store.set('selectedAuthor', '');
+    store.set('selectedQuotes', []);
+  },
+
+  // ── Toggle stats (conditional toggle + parameterization) ───────
+  'toggleStats': (store, refs) => {
+    const visible = store.get('statsVisible');
+    store.set('statsVisible', !visible);
+
+    if (!visible) {
+      // Conditional rendering: show
+      store.set(`view.nodes.${refs.statsContent}.class`, 'stats-content');
+      store.set('toggleLabel', '📊 Hide Stats');
+
+      // Parameterization: compute stats and write to store
+      const quotes = store.get('quotes');
+      const authors = store.get('authors');
+      store.set('statsText',
+        `${quotes.length} quotes from ${authors.length} authors`
+      );
+    } else {
+      // Conditional rendering: hide
+      store.set(`view.nodes.${refs.statsContent}.class`, 'stats-content hidden');
+      store.set('toggleLabel', '📊 Show Stats');
+    }
+  },
+};

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

@@ -0,0 +1,27 @@
+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 { actions } from './actions.js';
+import { resolveTree, resolveActions, buildRefs } from './resolve.js';
+
+// 1. Resolve component tree from dot-path registry
+const spec = resolveTree(c, 'app');
+
+// 2. Flatten into store → get normalized nodes
+const { nodes } = flatten(spec, store, 'view');
+
+// 3. Build refs: { refName → nodeId } for conditional rendering
+const refs = buildRefs(nodes);
+console.log('[refs]', refs);
+
+// 4. Resolve actions with refs as dependency
+const handlers = resolveActions(actions, store, refs);
+
+// 5. Mount
+mount(store, 'view', document.getElementById('app'), handlers);
+
+// 6. Perf overlay
+const perf = createPerfMonitor(store);
+mountOverlay(perf, document.body);

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

@@ -0,0 +1,83 @@
+// --- Component Registry ---------------------------------------
+// Flat dot-path map. Every component is one key → one spec.
+//
+// ref: 'name' - gives actions a stable handle to this view node.
+// Actions use refs to toggle classes for conditional rendering.
+
+export const c = {
+
+  //- - Root --
+  'app': {
+    tag: 'div', class: 'app',
+    children: ['app.header', 'app.tags', 'app.detail', 'app.stats']
+  },
+
+  // -- Header --
+  '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: 'Conditional rendering & parameterization - no showIf, no props'
+  },
+
+  // -- Author Tags (forEach over string array) --
+  '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: 'authors',
+    as: 'author',
+    template: {
+      tag: 'button',
+      class: 'tag',
+      text: 'author',
+      onClick: 'actions.selectAuthor(author)'
+    }
+  },
+
+  // -- Detail Panel (CONDITIONAL - hidden by default via class) --
+  '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', text: '{selectedAuthor}' },
+  'app.detail.bar.count': {
+    tag: 'span', class: 'badge', text: '{selectedQuotes.length} quotes'
+  },
+  'app.detail.bar.close': {
+    tag: 'button', class: 'btn btn-close', text: '✕', onClick: 'actions.closeDetail'
+  },
+  'app.detail.quotes': {
+    tag: 'ul', class: 'detail-quotes',
+    forEach: 'selectedQuotes',
+    as: 'item',
+    template: {
+      tag: 'li', class: 'detail-quote', text: 'item.text'
+    }
+  },
+
+  // -- Stats Section (CONDITIONAL - content hidden by default) --
+  'app.stats': {
+    tag: 'div', class: 'stats-section',
+    children: ['app.stats.toggle', 'app.stats.content']
+  },
+  'app.stats.toggle': {
+    tag: 'button', class: 'btn btn-secondary',
+    text: '{toggleLabel}', onClick: 'actions.toggleStats'
+  },
+  'app.stats.content': {
+    tag: 'div', class: 'stats-content hidden', ref: 'statsContent',
+    children: ['app.stats.content.text']
+  },
+  'app.stats.content.text': { tag: 'p', class: 'stats-text', text: '{statsText}' },
+};

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

@@ -0,0 +1,231 @@
+/* ─── 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-accent: #b4261e;
+  --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 ──────────────────────────────────────────────── */
+.app {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+.app-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.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;
+}
+
+/* ─── Author Tags ────────────────────────────────────────────── */
+.author-tags {
+  margin-bottom: 1.5rem;
+}
+
+.tags-label {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.tags-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.45rem 1rem;
+  border: 2px solid var(--color-primary-light);
+  border-radius: 999px;
+  background: var(--color-surface);
+  color: var(--color-primary);
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.tag:hover {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary);
+}
+
+/* ─── Buttons ────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 1.1rem;
+  border: none;
+  border-radius: 999px;
+  font-size: 0.88rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.btn-secondary {
+  background: var(--color-primary-light);
+  color: var(--color-primary);
+}
+
+.btn-secondary:hover {
+  background: #d9cdf0;
+}
+
+.btn-close {
+  background: none;
+  color: var(--color-text-muted);
+  font-size: 1.1rem;
+  padding: 0.3rem 0.6rem;
+  border-radius: 50%;
+}
+
+.btn-close:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--color-accent);
+}
+
+/* ─── Detail Panel (CONDITIONAL) ─────────────────────────────── */
+.detail-panel {
+  background: var(--color-surface);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  box-shadow: var(--shadow-md);
+  margin-bottom: 1.5rem;
+  border-left: 4px solid var(--color-primary);
+  animation: slideIn 0.2s ease-out;
+}
+
+.detail-panel.hidden {
+  display: none;
+}
+
+@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;
+}
+
+.detail-bar h2 {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: var(--color-primary);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  background: var(--color-primary-light);
+  color: var(--color-primary);
+  padding: 0.2rem 0.65rem;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 500;
+}
+
+.detail-bar .btn-close {
+  margin-left: auto;
+}
+
+.detail-quotes {
+  list-style: none;
+}
+
+.detail-quote {
+  padding: 0.65rem 0;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.95rem;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+
+.detail-quote:last-child {
+  border-bottom: none;
+}
+
+.detail-quote::before {
+  content: '\201C';
+  color: var(--color-primary);
+  font-weight: 700;
+  margin-right: 0.15rem;
+}
+
+.detail-quote::after {
+  content: '\201D';
+  color: var(--color-primary);
+  font-weight: 700;
+  margin-left: 0.05rem;
+}
+
+/* ─── Stats Section (CONDITIONAL) ────────────────────────────── */
+.stats-section {
+  margin-top: 1rem;
+}
+
+.stats-content {
+  margin-top: 0.75rem;
+  background: var(--color-surface);
+  border-radius: var(--radius-sm);
+  padding: 1rem 1.25rem;
+  box-shadow: var(--shadow);
+  animation: slideIn 0.2s ease-out;
+}
+
+.stats-content.hidden {
+  display: none;
+}
+
+.stats-text {
+  color: var(--color-text-secondary);
+  font-size: 0.95rem;
+}
+
+/* ─── Responsive ─────────────────────────────────────────────── */
+@media (max-width: 600px) {
+  .app { padding: 1rem; }
+  .app-header h1 { font-size: 1.5rem; }
+  .tags-row { gap: 0.4rem; }
+  .tag { font-size: 0.82rem; padding: 0.35rem 0.75rem; }
+}

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

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@everystate/view: 004_05 - Conditional Rendering & Parameterization</title>
+  <script type="importmap">
+    {
+      "imports": {
+        "@everystate/core": "../../../../everystate-core/index.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_05/quoteExplorer/resolve.js

@@ -0,0 +1,50 @@
+// ─── Unified resolver ──────────────────────────────────────────
+// Three 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.selectAuthor' → () => actions['selectAuthor'](store, ...deps)
+ */
+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 - scans normalized nodes for `ref` properties.
+ * Returns { refName: nodeId } so actions can target view nodes by name.
+ *
+ * This is the key to conditional rendering:
+ *   spec:   { tag: 'div', class: 'panel hidden', ref: 'detail', ... }
+ *   refs:   { detail: 'v5' }
+ *   action: store.set(`view.nodes.${refs.detail}.class`, 'panel')
+ */
+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_05/quoteExplorer/store.js

@@ -0,0 +1,33 @@
+import { createEveryState } from '@everystate/core';
+
+export const store = createEveryState({
+  // ── Quote data (hardcoded - focus is the pattern, not the API) ──
+  quotes: [
+    { author: 'Rumi', text: 'Your heart is the size of an ocean. Go find yourself in its hidden depths.' },
+    { author: 'Rumi', text: 'Respond to every call that excites your spirit.' },
+    { author: 'Rumi', text: 'Everything in the universe is within you. Ask all from yourself.' },
+    { author: 'Rumi', text: 'When I am silent, I have thunder hidden inside.' },
+    { author: 'Einstein', text: 'Imagination is more important than knowledge.' },
+    { author: 'Einstein', text: 'Life is like riding a bicycle. To keep your balance, you must keep moving.' },
+    { author: 'Einstein', text: "If you can't explain it simply, you don't understand it well enough." },
+    { author: 'Mother Teresa', text: 'Spread love everywhere you go.' },
+    { author: 'Mother Teresa', text: 'If you judge people, you have no time to love them.' },
+    { author: 'Mother Teresa', text: 'Not all of us can do great things. But we can do small things with great love.' },
+    { author: 'Muhammad Ali', text: 'Float like a butterfly, sting like a bee.' },
+    { author: 'Muhammad Ali', text: "Don't count the days, make the days count." },
+    { author: 'Muhammad Ali', text: 'Service to others is the rent you pay for your room here on earth.' },
+    { author: 'Socrates', text: 'The unexamined life is not worth living.' },
+    { author: 'Socrates', text: 'I know that I know nothing.' },
+    { author: 'Socrates', text: 'Wonder is the beginning of wisdom.' },
+  ],
+  authors: ['Rumi', 'Einstein', 'Mother Teresa', 'Muhammad Ali', 'Socrates'],
+
+  // ── Parameterized state (written by actions, read by specs via {path}) ──
+  selectedAuthor: '',
+  selectedQuotes: [],
+
+  // ── Conditional state (drives class toggles) ──
+  statsVisible: false,
+  statsText: '',
+  toggleLabel: '📊 Show Stats',
+});

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

@@ -0,0 +1,21 @@
+// ─── Actions: thin intent emitters ──────────────────────────────
+// Actions extract values from DOM events and emit clean intents.
+// All business logic lives in intents.js, not here.
+
+export const actions = {
+  'selectAuthor': (store, refs, authorName) => {
+    store.set('intent.selectAuthor', authorName);
+  },
+
+  'closeDetail': (store, refs) => {
+    store.set('intent.closeDetail', Date.now());
+  },
+
+  'toggleFav': (store, refs, quoteId) => {
+    store.set('intent.toggleFav', quoteId);
+  },
+
+  'toggleStats': (store, refs) => {
+    store.set('intent.toggleStats', Date.now());
+  },
+};

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

@@ -0,0 +1,44 @@
+// ─── App: boot sequence ─────────────────────────────────────────
+// 1. Resolve component tree from flat dot-path registry
+// 2. Flatten into store (normalize → view.nodes.*)
+// 3. Build refs (refName → nodeId)
+// 4. Mount reactive subscribers: derived, policies, intents
+// 5. Resolve actions (thin intent emitters)
+// 6. Mount DOM
+// 7. Performance overlay
+
+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 { actions } from './actions.js';
+import { resolveTree, resolveActions, buildRefs } from './resolve.js';
+import { mountIntents } from './intents.js';
+import { mountDerived } from './derived.js';
+import { mountPolicies } from './policies.js';
+
+// 1. Resolve component tree
+const spec = resolveTree(c, 'app');
+
+// 2. Flatten into store
+const { nodes } = flatten(spec, store, 'view');
+
+// 3. Build refs
+const refs = buildRefs(nodes);
+console.log('[004_06 refs]', refs);
+
+// 4. Mount reactive subscribers (order matters: derived first, then policies, then intents)
+mountDerived(store);
+mountPolicies(store);
+mountIntents(store, refs);
+
+// 5. Resolve actions (thin intent emitters with store + refs pre-injected)
+const handlers = resolveActions(actions, store, refs);
+
+// 6. Mount DOM
+mount(store, 'view', document.getElementById('app'), handlers);
+
+// 7. Perf overlay
+const perf = createPerfMonitor(store);
+mountOverlay(perf, document.body);

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

@@ -0,0 +1,80 @@
+// ─── Component registry ─────────────────────────────────────────
+// Flat dot-path keyed specs. Every component is a resource.
+// children/template are dot-path strings or inline objects.
+// onClick values use 'actions.*' dot paths into the action registry.
+// {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: 'actions.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: 'actions.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: 'actions.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: 'actions.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' },
+      ]
+    }
+  },
+};