@uistate/examples 1.0.0

package/eventState/031-todo-app-with-eventTest/app/bridges.js

@@ -0,0 +1,113 @@
+// bridges.app.js
+// App-level intent → domain bridges and derived wildcard bridges
+// Mirrors patterns proven in examples 300d (intent bridge) and 300e (derived wildcard).
+
+import store from './store.js';
+
+// ------------------------------
+// Selection: intent → domain
+// ------------------------------
+store.subscribe('intent.selection.toggle', (payload) => {
+  const cur = store.get('ui.selection.ids') || [];
+  const set = new Set(Array.isArray(cur) ? cur : []);
+  let id, checked;
+  if (payload && typeof payload === 'object') { id = payload.id; checked = payload.checked; }
+  else { id = payload; checked = undefined; }
+  const key = String(id);
+  if (checked === undefined) {
+    // toggle membership
+    if (set.has(key)) set.delete(key); else set.add(key);
+  } else {
+    if (checked) set.add(key); else set.delete(key);
+  }
+  const next = Array.from(set);
+  store.set('ui.selection.ids', next);
+});
+
+// Derived: selection count
+store.subscribe('ui.selection.ids', () => {
+  const ids = store.get('ui.selection.ids') || [];
+  const next = Array.isArray(ids) ? ids.length : 0;
+  if (store.get('ui.selection.count') !== next) store.set('ui.selection.count', next);
+});
+
+// ------------------------------
+// Quotes: async fetch with last-request-wins
+// ------------------------------
+let quotesReqId = 0;
+store.subscribe('intent.quotes.load', ({ url, ttlMs }) => {
+  quotesReqId += 1;
+  const myId = quotesReqId;
+  store.set('ui.quotes.loading', true);
+  store.set('ui.quotes.error', null);
+
+  const doFetch = (globalThis.fetch ? globalThis.fetch(String(url)) : Promise.reject(new Error('fetch unavailable')));
+  doFetch
+    .then(async (res) => {
+      if (myId !== quotesReqId) return; // stale
+      if (!res.ok) throw new Error('HTTP ' + (res.status || 'error'));
+      const data = await res.json();
+      store.set('ui.quotes.data', data);
+    })
+    .catch((err) => {
+      if (myId !== quotesReqId) return; // stale
+      store.set('ui.quotes.error', String(err && err.message || err));
+    })
+    .finally(() => {
+      if (myId !== quotesReqId) return; // stale
+      store.set('ui.quotes.loading', false);
+    });
+});
+
+// Derived: quotes empty
+const updateQuotesEmpty = () => {
+  const d = store.get('ui.quotes?.data') ?? store.get('ui.quotes.data');
+  const empty = Array.isArray(d) ? d.length === 0 : (d == null);
+  if (store.get('ui.quotes.empty') !== empty) store.set('ui.quotes.empty', empty);
+};
+store.subscribe('ui.quotes.data', updateQuotesEmpty);
+store.subscribe('ui.quotes.error', updateQuotesEmpty);
+
+// ------------------------------
+// Items: derived helpers for repeaters
+// ------------------------------
+const updateItemsMeta = () => {
+  const items = store.get('ui.items');
+  const count = Array.isArray(items) ? items.length : 0;
+  if (store.get('ui.itemsCount') !== count) store.set('ui.itemsCount', count);
+  const empty = count === 0;
+  if (store.get('ui.empty') !== empty) store.set('ui.empty', empty);
+};
+store.subscribe('ui.items', updateItemsMeta);
+try { updateItemsMeta(); } catch {}
+
+// ------------------------------
+// Todos: imperative renderer-friendly bridges
+// ------------------------------
+// Add todo
+store.subscribe('intent.todo.add', ({ text }) => {
+  const items = store.get('domain.todos.items') || [];
+  const nextId = items.reduce((m, t) => Math.max(m, Number(t?.id || 0)), 0) + 1;
+  const todo = { id: nextId, text: String(text || '').trim(), done: false };
+  if (!todo.text) return;
+  store.set('domain.todos.items', [...items, todo]);
+});
+
+// Toggle todo
+store.subscribe('intent.todo.toggle', ({ id }) => {
+  const items = store.get('domain.todos.items') || [];
+  const out = items.map(t => (String(t?.id) === String(id)) ? { ...t, done: !t.done } : t);
+  store.set('domain.todos.items', out);
+});
+
+// Clear completed
+store.subscribe('intent.todo.clearCompleted', () => {
+  const items = store.get('domain.todos.items') || [];
+  store.set('domain.todos.items', items.filter(t => !t.done));
+});
+
+// UI filter
+store.subscribe('intent.ui.filter', ({ filter }) => {
+  const f = (filter === 'active' || filter === 'completed') ? filter : 'all';
+  store.set('ui.todos.filter', f);
+});

package/eventState/031-todo-app-with-eventTest/app/router.js

@@ -0,0 +1,26 @@
+// app/router.js — App-specific router configuration
+import { createRouter } from '../runtime/core/router.js';
+import { upgradeEventState } from '../runtime/extensions/eventState.plus.js';
+import store from './store.js';
+import * as Home from './views/home.js';
+import * as TodoDemo from './views/todoDemo.js';
+
+// Upgrade store for setMany support
+const storePlus = upgradeEventState(store);
+
+// Create and start router
+const router = createRouter({
+  routes: [
+    { path: '/', view: 'home', component: Home },
+    { path: '/todo-demo', view: 'todo-demo', component: TodoDemo },
+  ],
+  store: storePlus,
+  rootSelector: '[data-route-root]',
+  fallback: { path: '/', view: 'home', component: Home },
+  debug: import.meta?.env?.DEV || false,
+});
+
+router.start();
+
+// Export router API
+export const { navigate, navigateQuery, navigatePath } = router;

package/eventState/031-todo-app-with-eventTest/app/store.js

@@ -0,0 +1,15 @@
+// store.js — singleton eventState store for the SPA
+import { createEventState } from '../runtime/core/eventStateNew.js';
+
+const initial = {
+  ui: {
+    route: { path: '/', view: 'home', params: {}, query: {}, transitioning: false },
+    todos: { filter: 'all' },
+  },
+  domain: {
+    todos: { items: [] },
+  },
+};
+
+const store = createEventState(initial);
+export default store;

package/eventState/031-todo-app-with-eventTest/app/views/home.js

@@ -0,0 +1,46 @@
+// views/home.js — Home route
+export async function boot({ store, el, signal }){
+  // Artificial 1-second delay to show the loader
+  await new Promise(resolve => setTimeout(resolve, 1000));
+
+  const container = document.createElement('main');
+  container.style.cssText = 'max-width: 600px; margin: 2rem auto; padding: 0 1rem;';
+  container.innerHTML = `
+    <h1>Home works!</h1>
+    <p>This is the home page of the todo app example.</p>
+    <p><a href="/todo-demo" data-link>Go to Todo App Demo →</a></p>
+    
+    <hr style="margin: 2rem 0;">
+    
+    <h2>Telemetry Test</h2>
+    <p>Counter: <strong id="counter-display">0</strong></p>
+    <button id="increment-btn" class="btn">Increment Counter</button>
+  `;
+  el.appendChild(container);
+
+  // Initialize counter in store
+  if (store.get('ui.test.counter') === undefined) {
+    store.set('ui.test.counter', 0);
+  }
+
+  // Counter display subscription
+  const counterDisplay = container.querySelector('#counter-display');
+  const updateDisplay = () => {
+    const count = store.get('ui.test.counter') || 0;
+    counterDisplay.textContent = count;
+  };
+  const unsub = store.subscribe('ui.test.counter', updateDisplay);
+  updateDisplay();
+
+  // Increment button
+  const incrementBtn = container.querySelector('#increment-btn');
+  incrementBtn.addEventListener('click', () => {
+    const current = store.get('ui.test.counter') || 0;
+    console.log('[TEST] Incrementing counter from', current, 'to', current + 1);
+    store.set('ui.test.counter', current + 1);
+  });
+
+  // Cleanup on navigation
+  if (signal) signal.addEventListener('abort', () => { unsub(); });
+  return () => { unsub(); };
+}

package/eventState/031-todo-app-with-eventTest/app/views/todoDemo.js

@@ -0,0 +1,69 @@
+// views/todoDemo.js — Minimal Todo app demo (imperative renderer, no bootstrap)
+export async function boot({ store, el, signal }){
+  const main = document.createElement('main');
+  main.innerHTML = `
+    <h1>Todo app demo</h1>
+    <section class="beh-section">
+      <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap">
+        <input id="newTodo" placeholder="New todo" />
+        <button id="addTodo" class="btn">Add</button>
+        <div style="display:flex; gap:6px; align-items:center">
+          <button id="fAll" class="btn">All</button>
+          <button id="fActive" class="btn">Active</button>
+          <button id="fCompleted" class="btn">Completed</button>
+          <button id="clearCompleted" class="btn" style="background:#b91c1c; color:white">Clear Completed</button>
+        </div>
+        <span id="filterBadge" style="padding:2px 6px; border:1px solid #888; border-radius:8px; font-size:.85em; color:#555">filter: all</span>
+      </div>
+      <ul id="todos" style="margin-top:10px; padding-left: 18px;"></ul>
+    </section>
+  `;
+  el.appendChild(main);
+
+  const input = main.querySelector('#newTodo');
+  const ul = main.querySelector('#todos');
+  const btnAdd = main.querySelector('#addTodo');
+  const btnAll = main.querySelector('#fAll');
+  const btnAct = main.querySelector('#fActive');
+  const btnDone = main.querySelector('#fCompleted');
+  const btnClear = main.querySelector('#clearCompleted');
+
+  // Intents from UI
+  btnAdd?.addEventListener('click', () => {
+    const text = (input?.value || '').trim();
+    if (!text) return; store.set('intent.todo.add', { text }); input.value = '';
+  });
+  input?.addEventListener('keydown', (e) => { if (e.key === 'Enter') btnAdd?.click(); });
+  btnAll?.addEventListener('click', () => store.set('intent.ui.filter', { filter: 'all' }));
+  btnAct?.addEventListener('click', () => store.set('intent.ui.filter', { filter: 'active' }));
+  btnDone?.addEventListener('click', () => store.set('intent.ui.filter', { filter: 'completed' }));
+  btnClear?.addEventListener('click', () => store.set('intent.todo.clearCompleted'));
+
+  // Render
+  const itemsPath = 'domain.todos.items';
+  const filterPath = 'ui.todos.filter';
+  function render(){
+    const items = store.get(itemsPath) || [];
+    const filter = store.get(filterPath) || 'all';
+    const badge = main.querySelector('#filterBadge');
+    if (badge) badge.textContent = `filter: ${filter}`;
+    ul.replaceChildren();
+    let rows = items;
+    if (filter === 'active') rows = items.filter(t => !t.done);
+    else if (filter === 'completed') rows = items.filter(t => !!t.done);
+    rows.forEach((t) => {
+      const li = document.createElement('li');
+      li.style.display = 'flex'; li.style.gap = '8px'; li.style.alignItems = 'center';
+      const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = !!t.done;
+      cb.addEventListener('change', () => store.set('intent.todo.toggle', { id: t.id }));
+      const span = document.createElement('span'); span.textContent = t.text; if (t.done) span.style.textDecoration = 'line-through';
+      li.appendChild(cb); li.appendChild(span); ul.appendChild(li);
+    });
+  }
+  const off1 = store.subscribe(itemsPath, render);
+  const off2 = store.subscribe(filterPath, render);
+  render();
+
+  if (signal) signal.addEventListener('abort', () => { try { off1 && off1(); off2 && off2(); } catch {} });
+  return () => { try { off1 && off1(); off2 && off2(); } catch {} };
+}

package/eventState/031-todo-app-with-eventTest/devtools/dock.js

@@ -0,0 +1,41 @@
+// dev-dock.dev.js — shared dev dock for buttons (DEV only)
+// if (import.meta && import.meta.env && import.meta.env.DEV) {
+  const DOCK_ID = 'dev-dock-root';
+  const STYLE_ID = 'dev-dock-style';
+  const CSS = `
+  #${DOCK_ID} { position: fixed; left: 10px; bottom: 10px; z-index: 2147483200; pointer-events: auto;
+    display: inline-flex; flex-direction: row; gap: 6px; align-items: center; background: rgba(17,17,17,.85);
+    border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
+  #${DOCK_ID} .dock-btn { appearance: none; border: 1px solid rgba(255,255,255,.15); background: #222; color: #eee;
+    font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
+  #${DOCK_ID} .dock-btn:hover { background: #2a2a2a; }
+  #${DOCK_ID} > button { cursor: pointer; }
+  #${DOCK_ID} .dock-sep { width: 1px; height: 18px; background: rgba(255,255,255,.12); margin: 0 4px; }
+  `;
+
+  // Style
+  let style = document.getElementById(STYLE_ID);
+  if (!style){ style = document.createElement('style'); style.id = STYLE_ID; style.textContent = CSS; document.head.appendChild(style); }
+
+  // Root
+  let root = document.getElementById(DOCK_ID);
+  if (!root){ root = document.createElement('div'); root.id = DOCK_ID; document.body.appendChild(root); }
+
+  const registry = new Map();
+  function register({ id, label, title = '', onClick }){
+    // De-dup by id (helps during HMR)
+    try { const exist = root.querySelector(`[data-dock-id="${id}"]`); if (exist) exist.remove(); } catch {}
+    const btn = document.createElement('button');
+    btn.type = 'button'; btn.className = 'dock-btn'; btn.textContent = label; if (title) btn.title = title;
+    btn.setAttribute('data-dock-id', id);
+    btn.addEventListener('click', (e) => { try { onClick?.(e); } catch (err) { console.warn('[dev-dock] button error', err); } });
+    root.appendChild(btn);
+    registry.set(id, btn);
+    return () => { try { btn.remove(); } catch{}; registry.delete(id); };
+  }
+  function separator(){ const sep = document.createElement('div'); sep.className = 'dock-sep'; root.appendChild(sep); return () => sep.remove(); }
+
+  window.__devdock = { register, separator, root };
+  // Notify listeners that the dock is ready
+  try { window.dispatchEvent(new CustomEvent('devdock:ready')); } catch {}
+// }

package/eventState/031-todo-app-with-eventTest/devtools/stateTracker.dock.js

@@ -0,0 +1,10 @@
+// stateTracker.dock.dev.js — register a State toggle in dev dock and hide pill (DEV only)
+// if (import.meta && import.meta.env && import.meta.env.DEV) {
+  const st = window.stateTracker?.instance;
+  const dock = window.__devdock;
+  if (dock && st) {
+    // Hide the pill; dev dock becomes the control surface
+    try { st.elements?.pill?.style && (st.elements.pill.style.display = 'none'); } catch {}
+    dock.register({ id: 'state-tracker', label: 'State', title: 'Toggle State Tracker', onClick: () => st.toggle() });
+  }
+// }

package/eventState/031-todo-app-with-eventTest/devtools/stateTracker.js

@@ -0,0 +1,246 @@
+// stateTracker.js — OCP-friendly utility widget
+// Purpose: When imported, renders a floating button you can click to cycle between
+// the four corners of the viewport. Double-click toggles a full-height sidebar
+// that opens on the left or right depending on the button's current horizontal corner.
+//
+// Design:
+// - No external deps. Pure JS + a single <style> tag for cosmetics.
+// - Open/Closed: exposes installStateTracker(opts) returning an uninstall function.
+//   Auto-installs on import with defaults, but can be disabled via global flag.
+// - Minimal footprint and no global CSS leakage (scoped class names).
+
+(function(){
+  const AUTO_INSTALL = true; // set to false if you prefer manual install only
+
+  const STYLE_CSS = `
+    .stt-pill { pointer-events: auto; position: fixed; display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px;
+      background: rgba(17,17,17,.9); backdrop-filter: saturate(120%) blur(4px); box-shadow: 0 2px 10px rgba(0,0,0,.25);
+      border: 1px solid rgba(255,255,255,.12); z-index: 2147483600;
+    }
+    .stt-btn { width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center;
+      font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #fff; background: #111;
+      border: 1px solid rgba(255,255,255,.15); cursor: pointer; user-select: none;
+    }
+    .stt-btn:hover { background: #1a1a1a; }
+    .stt-btn:active { transform: translateY(1px); }
+
+    .stt-corner-top-left { top: 12px; left: 12px; }
+    .stt-corner-top-right { top: 12px; right: 12px; }
+    .stt-corner-bottom-right { bottom: 12px; right: 12px; }
+    .stt-corner-bottom-left { bottom: 12px; left: 12px; }
+
+    .stt-sidebar { pointer-events: auto; position: fixed; top: 0; height: 100vh; width: min(80vw, 320px);
+      background: var(--stt-sidebar-bg, #181818); color: var(--stt-sidebar-fg, #eee);
+      border-inline: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 24px rgba(0,0,0,.25);
+      transform: translateX(var(--stt-x, 0)); transition: transform 180ms ease, opacity 180ms ease;
+      opacity: var(--stt-opacity, 0); will-change: transform, opacity; z-index: 2147483600;
+    }
+    .stt-sidebar.right { right: 0; --stt-x: 100%; }
+    .stt-sidebar.left { left: 0; --stt-x: -100%; }
+    .stt-open .stt-sidebar { --stt-x: 0; --stt-opacity: 1; }
+
+    .stt-sidebar header { padding: 8px 10px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.08);
+      display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+    .stt-header-title { font-size: 12px; font-weight: 700; letter-spacing: .3px; opacity: .9; }
+    .stt-header-actions { display: inline-flex; gap: 6px; }
+    .stt-icon-btn { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
+      font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #eee; background: #222;
+      border: 1px solid rgba(255,255,255,.12); cursor: pointer; user-select: none; }
+    .stt-icon-btn:hover { background: #2a2a2a; }
+    .stt-sidebar .stt-content { padding: 12px 14px; font-size: 12px; line-height: 1.35;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      white-space: pre; overflow: auto; max-height: calc(100vh - 48px);
+    }
+    /* Inline tools inside sidebar */
+    .stt-row { display: flex; gap: 6px; padding: 6px 0; flex-wrap: wrap; }
+    .stt-btn-sm { height: 28px; padding: 4px 10px; border-radius: 6px;
+      font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #eee; background: #222;
+      border: 1px solid rgba(255,255,255,.12); cursor: pointer; user-select: none; }
+    .stt-btn-sm:hover { background: #2a2a2a; }
+  `;
+
+  const CORNERS = ['top-left','top-right','bottom-right','bottom-left'];
+
+  function createEl(tag, cls){ const el = document.createElement(tag); if (cls) el.className = cls; return el; }
+
+  function installStateTracker({
+    corner = 'bottom-right',
+    appendTo = document.body,
+    title = 'ST',
+    store = undefined,
+    pathPrefix = 'ui.stateTracker',
+  } = {}){
+    if (!appendTo) appendTo = document.body;
+    // Allow global opt-in binding without importing store here (keeps OCP)
+    if (!store && typeof window !== 'undefined' && window.stateTrackerStore){
+      store = window.stateTrackerStore;
+    }
+
+    // Inject style once
+    let styleEl = document.getElementById('stt-style');
+    if (!styleEl){
+      styleEl = document.createElement('style');
+      styleEl.id = 'stt-style';
+      styleEl.textContent = STYLE_CSS;
+      document.head.appendChild(styleEl);
+    }
+
+    const pill = createEl('div', 'stt-pill');
+    const btnMove = createEl('button', 'stt-btn stt-btn-move');
+    btnMove.type = 'button'; btnMove.title = 'Move'; btnMove.textContent = '◷';
+    const btnToggle = createEl('button', 'stt-btn stt-btn-toggle');
+    btnToggle.type = 'button'; btnToggle.title = 'Toggle'; btnToggle.textContent = title;
+    pill.appendChild(btnMove);
+    pill.appendChild(btnToggle);
+
+    const sidebar = createEl('aside', 'stt-sidebar');
+    const header = createEl('header');
+    const hTitle = createEl('div', 'stt-header-title'); hTitle.textContent = 'State Tracker';
+    const hActions = createEl('div', 'stt-header-actions');
+    const btnCopy = createEl('button', 'stt-icon-btn'); btnCopy.type = 'button'; btnCopy.title = 'Copy state'; btnCopy.textContent = '⎘';
+    const btnClose = createEl('button', 'stt-icon-btn'); btnClose.type = 'button'; btnClose.title = 'Close'; btnClose.textContent = '×';
+    hActions.appendChild(btnCopy); hActions.appendChild(btnClose);
+    header.appendChild(hTitle); header.appendChild(hActions);
+    const content = createEl('div', 'stt-content');
+    // Helper to create a button with safe handler
+    function mkBtn(label, title, handler){
+      const b = document.createElement('button');
+      b.className = 'stt-btn-sm'; b.type = 'button'; b.textContent = label; if (title) b.title = title;
+      b.addEventListener('click', (e) => { try { handler && handler(e); } catch(err){ console.warn('[stateTracker]', err); } });
+      return b;
+    }
+
+    // State JSON directly visible (no accordion)
+    const pre = document.createElement('pre');
+    pre.className = 'stt-pre';
+    pre.textContent = 'Loading state…';
+    content.appendChild(pre);
+    sidebar.appendChild(header); sidebar.appendChild(content);
+
+    document.body.appendChild(pill);
+    document.body.appendChild(sidebar);
+
+    function applyCorner(){
+      pill.classList.remove(
+        'stt-corner-top-left','stt-corner-top-right','stt-corner-bottom-right','stt-corner-bottom-left'
+      );
+      const cls = `stt-corner-${corner}`;
+      pill.classList.add(cls);
+      const isRight = corner.includes('right');
+      sidebar.classList.toggle('right', isRight);
+      sidebar.classList.toggle('left', !isRight);
+    }
+
+    let open = false;
+    function setOpen(v){
+      open = !!v;
+      document.documentElement.classList.toggle('stt-open', open);
+      if (store && typeof store.set === 'function'){
+        try { store.set(`${pathPrefix}.open`, open); } catch {}
+      }
+    }
+
+    applyCorner();
+
+    // Render full state tree (if store provided), throttled to animation frame
+    let scheduled = false;
+    function renderState(){
+      if (!store) return;
+      try {
+        const obj = store.get();
+        pre.textContent = JSON.stringify(obj, null, 2);
+      } catch (e) {
+        pre.textContent = '[stateTracker] Unable to render state: ' + (e && e.message ? e.message : e);
+      }
+    }
+    function scheduleRender(){
+      if (scheduled) return; scheduled = true;
+      requestAnimationFrame(() => { scheduled = false; renderState(); });
+    }
+    if (store){ renderState(); }
+
+    // Left button: move between corners
+    btnMove.addEventListener('click', (e) => {
+      console.log('[stateTracker] move click', { corner });
+      const idx = CORNERS.indexOf(corner);
+      corner = CORNERS[(idx + 1) % CORNERS.length];
+      applyCorner();
+      if (store && typeof store.set === 'function'){
+        try { store.set(`${pathPrefix}.corner`, corner); } catch {}
+      }
+    });
+
+    // Right button: toggle sidebar
+    btnToggle.addEventListener('click', (e) => {
+      console.log('[stateTracker] toggle click', { openBefore: open });
+      setOpen(!open);
+      console.log('[stateTracker] toggle result', { openAfter: open });
+      if (open && store) scheduleRender();
+    });
+
+    // Close via header close button or ESC
+    btnClose.addEventListener('click', () => setOpen(false));
+    window.addEventListener('keydown', (e) => { if (e.key === 'Escape') setOpen(false); });
+
+    // Copy state structure
+    async function copyState(){
+      try {
+        // ensure latest state text
+        renderState();
+        const text = pre.textContent || '';
+        if (navigator.clipboard && navigator.clipboard.writeText){
+          await navigator.clipboard.writeText(text);
+        } else {
+          const ta = document.createElement('textarea');
+          ta.value = text; document.body.appendChild(ta); ta.select();
+          document.execCommand('copy'); ta.remove();
+        }
+        const old = btnCopy.textContent; btnCopy.textContent = '✓';
+        setTimeout(() => { btnCopy.textContent = old; }, 900);
+      } catch(err){
+        console.warn('[stateTracker] copy failed', err);
+      }
+    }
+    btnCopy.addEventListener('click', copyState);
+
+    // Subscribe to all store changes to refresh view (if store provided)
+    let unsubscribe = null;
+    if (store && typeof store.subscribe === 'function'){
+      try {
+        unsubscribe = store.subscribe('*', () => { if (open) scheduleRender(); });
+      } catch {}
+    }
+
+    // Clean up function
+    const uninstall = () => {
+      try { pill.remove(); } catch {}
+      try { sidebar.remove(); } catch {}
+      window.removeEventListener('keydown', () => {});
+      if (unsubscribe){ try { unsubscribe(); } catch {} }
+    };
+
+    return {
+      setCorner(next){ if (CORNERS.includes(next)){ corner = next; applyCorner(); } },
+      getCorner(){ return corner; },
+      isOpen(){ return open; },
+      open(){ setOpen(true); },
+      close(){ setOpen(false); },
+      toggle(){ setOpen(!open); },
+      uninstall,
+      elements: { pill, btnMove, btnToggle, sidebar },
+    };
+  }
+
+  // Auto-install on import (but still export installer)
+  const api = { installStateTracker };
+  if (AUTO_INSTALL) {
+    // Guard against SSR/non-DOM contexts
+    if (typeof document !== 'undefined' && document.body){
+      api.instance = installStateTracker();
+    }
+  }
+
+  // UMD-lite export
+  if (typeof module !== 'undefined' && module.exports){ module.exports = api; }
+  else if (typeof window !== 'undefined'){ window.stateTracker = api; }
+})();

package/eventState/031-todo-app-with-eventTest/devtools/telemetry.js

@@ -0,0 +1,104 @@
+// telemetry.dev.js — dev-only console buffer + copy-to-clipboard button
+// Safe to include in production: it will bail out immediately when not in DEV.
+
+import store from '../app/store.js';
+
+// if (import.meta && import.meta.env && import.meta.env.DEV) {
+  const MAX = 500;
+  const buf = [];
+  const orig = {
+    log: console.log.bind(console),
+    warn: console.warn.bind(console),
+    error: console.error.bind(console),
+    info: console.info.bind(console),
+    debug: console.debug.bind(console),
+  };
+
+  function push(level, args){
+    buf.push({ t: Date.now(), level, args: Array.from(args) });
+    if (buf.length > MAX) buf.shift();
+  }
+
+  console.log = (...a) => { push('log', a); orig.log(...a); };
+  console.warn = (...a) => { push('warn', a); orig.warn(...a); };
+  console.error = (...a) => { push('error', a); orig.error(...a); };
+  console.info = (...a) => { push('info', a); orig.info(...a); };
+  console.debug = (...a) => { push('debug', a); orig.debug(...a); };
+
+  // Expose a simple API
+  window.__telemetry = {
+    get: () => buf.slice(),
+    clear: () => { buf.length = 0; },
+    copy: async () => {
+      try {
+        const text = JSON.stringify(buf, null, 2);
+        await navigator.clipboard.writeText(text);
+        orig.info('[telemetry] Copied console buffer to clipboard (', buf.length, 'entries )');
+      } catch (e) {
+        orig.warn('[telemetry] Clipboard copy failed', e);
+      }
+    }
+  };
+
+  // Register with shared dev dock if available
+  if (window.__devdock && typeof window.__devdock.register === 'function'){
+    window.__devdock.register({ id: 'copy-console', label: 'Console', title: 'Copy console buffer', onClick: () => window.__telemetry.copy() });
+  } else {
+    // Fallback: simple floating button
+    const dockId = 'dev-tools-dock';
+    let dock = document.getElementById(dockId);
+    if (!dock){
+      dock = document.createElement('div');
+      dock.id = dockId;
+      Object.assign(dock.style, {
+        position: 'fixed', left: '10px', bottom: '10px', zIndex: 9999,
+        display: 'flex', gap: '6px', alignItems: 'center',
+      });
+      document.body.appendChild(dock);
+    }
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.textContent = 'Copy Console';
+    Object.assign(btn.style, {
+      appearance: 'none', border: '1px solid #ddd', background: '#fff',
+      borderRadius: '6px', padding: '6px 10px', cursor: 'pointer',
+      boxShadow: '0 1px 2px rgba(0,0,0,0.06)'
+    });
+    btn.addEventListener('click', () => window.__telemetry.copy());
+    dock.appendChild(btn);
+  }
+
+  // ============================================
+  // SITEWIDE TELEMETRY: Log all state changes
+  // ============================================
+  if (typeof window !== 'undefined') {
+    if (!store) {
+      orig.error('[telemetry] Store is undefined!');
+    } else if (!store.subscribe) {
+      orig.error('[telemetry] Store has no subscribe method!', store);
+    } else {
+      // Log all state changes (except noisy ones)
+      store.subscribe('*', (detail) => {
+        const { path, value } = detail;
+        
+        // Skip transitioning state (too noisy)
+        if (path === 'ui.route.transitioning') return;
+        
+        // Skip intent paths here (logged separately below)
+        if (path.startsWith('intent.')) return;
+        
+        // Format like existing telemetry
+        console.log(`[state] ${path}`, value);
+      });
+
+      // Log all intents separately (more prominent)
+      store.subscribe('intent.*', (detail) => {
+        const { path, value } = detail;
+        const intentName = path.replace('intent.', '');
+        console.log(`[intent] ${intentName}`, value);
+      });
+
+      orig.info('[telemetry] Sitewide state tracking enabled');
+    }
+  }
+// }