@uistate/core 5.1.1 → 5.3.0

package/examples/032-todo-app-with-eventTest/app/actions/index.js

@@ -1,153 +0,0 @@
-// actions/index.js - minimal action registry (10 core ops)
-// Each action is a pure function: (ctx, ...args) => any
-// ctx: { store, get(path), set(path, value), event, el }
-
-export function set(ctx, path, value){
-  ctx.set(String(path), value);
-}
-
-export function inc(ctx, path, by = 1){
-  const v = Number(ctx.get(String(path)) || 0);
-  ctx.set(String(path), v + Number(by));
-}
-
-export function dec(ctx, path, by = 1){
-  const v = Number(ctx.get(String(path)) || 0);
-  ctx.set(String(path), v - Number(by));
-}
-
-export function toggle(ctx, path){
-  const v = !!ctx.get(String(path));
-  ctx.set(String(path), !v);
-}
-
-export function clamp(ctx, path, min, max){
-  let v = Number(ctx.get(String(path)) || 0);
-  if (min != null) v = Math.max(v, Number(min));
-  if (max != null) v = Math.min(v, Number(max));
-  ctx.set(String(path), v);
-}
-
-export function push(ctx, path, value){
-  const arr = Array.isArray(ctx.get(String(path))) ? ctx.get(String(path)) : [];
-  ctx.set(String(path), [...arr, value]);
-}
-
-export function pushFrom(ctx, toArrayPath, fromPath){
-  const arr = Array.isArray(ctx.get(String(toArrayPath))) ? ctx.get(String(toArrayPath)) : [];
-  const v = ctx.get(String(fromPath));
-  ctx.set(String(toArrayPath), [...arr, v]);
-}
-
-export function pushFromIfNotEmpty(ctx, toArrayPath, fromPath){
-  const arr = Array.isArray(ctx.get(String(toArrayPath))) ? ctx.get(String(toArrayPath)) : [];
-  let v = ctx.get(String(fromPath));
-  if (v == null) return;
-  v = String(v).trim();
-  if (v.length === 0) return;
-  ctx.set(String(toArrayPath), [...arr, v]);
-}
-
-export function removeAt(ctx, path, index){
-  const arr = Array.isArray(ctx.get(String(path))) ? ctx.get(String(path)) : [];
-  const i = Number(index);
-  if (i >= 0 && i < arr.length){
-    const next = arr.slice(0, i).concat(arr.slice(i + 1));
-    ctx.set(String(path), next);
-  }
-}
-
-export function pop(ctx, path){
-  const arr = Array.isArray(ctx.get(String(path))) ? ctx.get(String(path)) : [];
-  if (arr.length === 0) return;
-  ctx.set(String(path), arr.slice(0, -1));
-}
-
-export function sortBy(ctx, path, key){
-  const arr = Array.isArray(ctx.get(String(path))) ? ctx.get(String(path)) : [];
-  let next;
-  if (key == null || key === ''){
-    next = [...arr].sort();
-  } else {
-    next = [...arr].sort((a,b) => {
-      const av = a?.[key]; const bv = b?.[key];
-      if (av < bv) return -1; if (av > bv) return 1; return 0;
-    });
-  }
-  ctx.set(String(path), next);
-}
-
-export function lengthTo(ctx, fromPath, toPath){
-  const v = ctx.get(String(fromPath));
-  const len = Array.isArray(v) || typeof v === 'string' ? v.length : (v && typeof v === 'object' ? Object.keys(v).length : 0);
-  ctx.set(String(toPath), len);
-}
-
-export function setFrom(ctx, path, eventField){
-  // eventField like 'target.value' or 'detail.value'
-  let cur = ctx.event;
-  for (const part of String(eventField).split('.')){
-    if (cur == null) break;
-    cur = cur[part];
-  }
-  ctx.set(String(path), cur);
-}
-
-export function fetchJson(ctx, url, toPath){
-  // minimal fire-and-forget; caller can chain a separate set if desired
-  fetch(String(url), { signal: ctx.event?.signal }).then(r => r.json()).then(data => {
-    if (toPath) ctx.set(String(toPath), data);
-  }).catch(() => {});
-}
-
-// Demo-only: mutate the global behaviors whitelist array (shared by installer)
-export function guardWhitelist(ctx, ...patterns){
-  const arr = (window && window.behaviorsWhitelist) || [];
-  arr.splice(0, arr.length, ...patterns.map(String));
-  try { ctx.set('ui.guard.whitelist', patterns.map(String)); } catch {}
-}
-
-export function clearWhitelist(){
-  const arr = (window && window.behaviorsWhitelist) || [];
-  arr.splice(0, arr.length);
-  try { window.stateTrackerStore?.set?.('ui.guard.whitelist', []); } catch {}
-}
-
-export function resetWhitelist(){
-  const def = (window && window.behaviorsWhitelistDefault) || [];
-  const arr = (window && window.behaviorsWhitelist) || [];
-  arr.splice(0, arr.length, ...def.map(String));
-  try { window.stateTrackerStore?.set?.('ui.guard.whitelist', [...def]); } catch {}
-}
-
-export function mergeWhitelist(ctx, ...patterns){
-  const arr = (window && window.behaviorsWhitelist) || [];
-  const set = new Set(arr.map(String));
-  patterns.map(String).forEach(p => set.add(p));
-  const next = Array.from(set);
-  arr.splice(0, arr.length, ...next);
-  try { window.stateTrackerStore?.set?.('ui.guard.whitelist', [...next]); } catch {}
-}
-
-export function toggleTheme(ctx){
-  try {
-    const cur = ctx.get('ui.theme');
-    const next = (cur === 'dark') ? 'light' : 'dark';
-    ctx.set('ui.theme', next);
-    console.log('[beh] theme ->', next);
-  } catch {}
-}
-
-// Diagnostics
-export function log(ctx, ...args){
-  try { console.log('[beh]', ...args); } catch {}
-}
-
-export function logPath(ctx, path){
-  try { console.log('[beh]', String(path), ctx.get(String(path))); } catch {}
-}
-
-export const registry = {
-  set, inc, dec, toggle, clamp, push, pushFrom, pushFromIfNotEmpty, removeAt, pop, sortBy, setFrom, fetchJson, lengthTo,
-  guardWhitelist, clearWhitelist, resetWhitelist, mergeWhitelist, toggleTheme, log, logPath,
-};

package/examples/032-todo-app-with-eventTest/app/bridges.js

@@ -1,113 +0,0 @@
-// 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/examples/032-todo-app-with-eventTest/app/router.js

@@ -1,26 +0,0 @@
-// 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/examples/032-todo-app-with-eventTest/app/store.js

@@ -1,15 +0,0 @@
-// 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/examples/032-todo-app-with-eventTest/app/views/home.js

@@ -1,46 +0,0 @@
-// 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/examples/032-todo-app-with-eventTest/app/views/todoDemo.js

@@ -1,69 +0,0 @@
-// 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/examples/032-todo-app-with-eventTest/devtools/dock.js

@@ -1,41 +0,0 @@
-// 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/examples/032-todo-app-with-eventTest/devtools/stateTracker.dock.js

@@ -1,10 +0,0 @@
-// 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() });
-  }
-// }