npm - @everystate/examples - Versions diffs - 1.0.0 → 1.0.1 - Mend

@everystate/examples 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

package/everyState-css/001-stateDrivenCSS/index.html ADDED Viewed

@@ -0,0 +1,377 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>001 State-Driven CSS - @everystate/css</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body { height: 100%; }
+  body { font-family: system-ui, -apple-system, sans-serif; transition: background 0.3s, color 0.3s; }
+</style>
+<script type="importmap">
+  {
+    "imports": {
+      "@everystate/core": "../../../everystate-core/index.js",
+      "@everystate/perf": "../../../everystate-perf/index.js"
+    }
+  }
+</script>
+</head>
+<body>
+<div class="page">
+  <header class="header">
+    <h1>State-Driven CSS</h1>
+    <p>Every style on this page lives in an EveryState store. No Tailwind. No CSS-in-JS. Just paths.</p>
+  </header>
+  <section class="controls">
+    <h2>1. Theme Swap (one <code>store.set</code> call)</h2>
+    <div class="btn-row">
+      <button onclick="setTheme('light')">Light</button>
+      <button onclick="setTheme('dark')">Dark</button>
+      <button onclick="setTheme('ocean')">Ocean</button>
+    </div>
+    <h2>2. Live Token Edit</h2>
+    <p>Change the primary color token - every component using it updates:</p>
+    <div class="btn-row">
+      <input type="color" id="primaryPicker" value="#3b82f6" oninput="setToken(this.value)">
+      <span id="tokenLabel">#3b82f6</span>
+    </div>
+    <h2>3. State-Conditional Styles</h2>
+    <p>Toggle user plan - styles react to application state, not CSS classes:</p>
+    <div class="btn-row">
+      <button onclick="setPlan('free')">Free Plan</button>
+      <button onclick="setPlan('pro')">Pro Plan</button>
+    </div>
+  </section>
+  <section class="cards">
+    <div class="card">
+      <h3>Card A</h3>
+      <p>Hover me. My hover color comes from <code>css.card.hover.background</code>.</p>
+    </div>
+    <div class="card">
+      <h3>Card B</h3>
+      <p>My background, padding, border-radius - all state paths.</p>
+    </div>
+    <div class="card premium">
+      <h3>Premium Feature</h3>
+      <p>Only visible on Pro plan. Controlled by <code>css.premium.display</code>.</p>
+    </div>
+  </section>
+  <section class="controls">
+    <h2>4. Style Inspector</h2>
+    <p>The entire stylesheet as a state tree:</p>
+    <pre id="inspector"></pre>
+  </section>
+  <section class="controls">
+    <h2>5. Change Log (wildcard subscription on <code>css.*</code>)</h2>
+    <pre id="changelog"></pre>
+  </section>
+  <section class="controls">
+    <h2>6. Event Sequence Tests</h2>
+    <button onclick="runTests()">Run Tests</button>
+    <pre id="testLog"></pre>
+  </section>
+</div>
+<script type="module">
+import { createEveryState } from '@everystate/core';
+import { createPerfMonitor, mountOverlay } from '@everystate/perf';
+// ============================================================
+// Inline Style Engine (from @everystate/css)
+// ============================================================
+const CSS_PROPERTIES = new Set([
+  'background','color','padding','margin','border','borderRadius',
+  'boxShadow','fontSize','fontWeight','fontFamily','lineHeight',
+  'letterSpacing','textAlign','textDecoration','textTransform',
+  'display','position','top','right','bottom','left','zIndex',
+  'width','height','minWidth','maxWidth','minHeight','maxHeight',
+  'overflow','opacity','cursor','transition','transform',
+  'gap','flexDirection','alignItems','justifyContent','flexWrap',
+  'gridTemplateColumns','gridTemplateRows','gridGap',
+  'borderColor','borderWidth','borderStyle','outline',
+  'backgroundImage','backgroundSize','backgroundPosition',
+  'whiteSpace','wordBreak','overflowWrap',
+]);
+const PSEUDO_CLASSES = new Set([
+  'hover','focus','active','disabled','visited',
+  'firstChild','lastChild','nthChild',
+]);
+function camelToKebab(s) {
+  return s.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+function createStyleEngine(store, { namespace = 'css', id = 'everystate-css' } = {}) {
+  const sheet = document.createElement('style');
+  sheet.id = id;
+  document.head.appendChild(sheet);
+  const ruleMap = new Map();
+  function upsertRule(selector, prop, value) {
+    if (!ruleMap.has(selector)) {
+      const idx = sheet.sheet.insertRule(`${selector} {}`, sheet.sheet.cssRules.length);
+      ruleMap.set(selector, { index: idx, rule: sheet.sheet.cssRules[idx] });
+    }
+    ruleMap.get(selector).rule.style.setProperty(camelToKebab(prop), value);
+  }
+  function pathToCSS(fullPath, value) {
+    const path = fullPath.startsWith(namespace + '.')
+      ? fullPath.slice(namespace.length + 1)
+      : fullPath;
+    const segments = path.split('.');
+    const prop = segments[segments.length - 1];
+    if (!CSS_PROPERTIES.has(prop)) return;
+    const selectorParts = [];
+    let pseudo = '';
+    for (let i = 0; i < segments.length - 1; i++) {
+      const seg = segments[i];
+      if (PSEUDO_CLASSES.has(seg)) { pseudo = ':' + seg; }
+      else { selectorParts.push('.' + seg); }
+    }
+    const selector = (selectorParts.length ? selectorParts.join('') : ':root') + pseudo;
+    upsertRule(selector, prop, value);
+  }
+  store.subscribe(`${namespace}.*`, ({ path, value }) => {
+    if (typeof value === 'string' || typeof value === 'number') {
+      pathToCSS(path, String(value));
+    } else if (typeof value === 'object' && value !== null) {
+      walkLeaves(path, value);
+    }
+  });
+  function walkLeaves(prefix, obj) {
+    for (const [k, v] of Object.entries(obj)) {
+      const p = `${prefix}.${k}`;
+      if (typeof v === 'object' && v !== null) walkLeaves(p, v);
+      else pathToCSS(p, String(v));
+    }
+  }
+  return { sheet, upsertRule, pathToCSS };
+}
+// ============================================================
+// Themes
+// ============================================================
+const themes = {
+  light: {
+    page: { background: '#f8fafc', color: '#1e293b', padding: '2rem 2rem 4rem', maxWidth: '800px', margin: '0 auto' },
+    header: { padding: '2rem 0', borderBottom: '1px solid #e2e8f0', marginBottom: '2rem' },
+    card: {
+      background: '#ffffff', color: '#1e293b', padding: '1.5rem', borderRadius: '0.75rem',
+      boxShadow: '0 1px 3px rgba(0,0,0,0.08)', transition: 'box-shadow 0.2s, transform 0.2s', cursor: 'pointer',
+      hover: { boxShadow: '0 8px 25px rgba(0,0,0,0.12)', transform: 'translateY(-2px)' }
+    },
+    cards: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1rem', marginBottom: '2rem' },
+    controls: { marginBottom: '2rem' },
+  },
+  dark: {
+    page: { background: '#0f172a', color: '#e2e8f0', padding: '2rem 2rem 4rem', maxWidth: '800px', margin: '0 auto' },
+    header: { padding: '2rem 0', borderBottom: '1px solid #334155', marginBottom: '2rem' },
+    card: {
+      background: '#1e293b', color: '#e2e8f0', padding: '1.5rem', borderRadius: '0.75rem',
+      boxShadow: '0 1px 3px rgba(0,0,0,0.3)', transition: 'box-shadow 0.2s, transform 0.2s', cursor: 'pointer',
+      hover: { boxShadow: '0 8px 25px rgba(0,0,0,0.5)', transform: 'translateY(-2px)' }
+    },
+    cards: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1rem', marginBottom: '2rem' },
+    controls: { marginBottom: '2rem' },
+  },
+  ocean: {
+    page: { background: '#0c4a6e', color: '#e0f2fe', padding: '2rem 2rem 4rem', maxWidth: '800px', margin: '0 auto' },
+    header: { padding: '2rem 0', borderBottom: '1px solid #0369a1', marginBottom: '2rem' },
+    card: {
+      background: '#075985', color: '#e0f2fe', padding: '1.5rem', borderRadius: '0.75rem',
+      boxShadow: '0 1px 3px rgba(0,0,0,0.2)', transition: 'box-shadow 0.2s, transform 0.2s', cursor: 'pointer',
+      hover: { boxShadow: '0 8px 25px rgba(0,0,0,0.35)', transform: 'translateY(-2px)' }
+    },
+    cards: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1rem', marginBottom: '2rem' },
+    controls: { marginBottom: '2rem' },
+  },
+};
+// ============================================================
+// Boot: store -> perf -> engine -> subscriptions (correct order)
+// ============================================================
+const store = createEveryState();
+// Perf monitor wraps store BEFORE any subscriptions
+const perf = createPerfMonitor(store);
+mountOverlay(perf, document.body);
+const engine = createStyleEngine(store);
+// Fullscreen body styles (theme controls html+body, not just .page)
+function syncBody() {
+  const bg = store.get('css.page.background');
+  const fg = store.get('css.page.color');
+  if (bg) document.body.style.background = bg;
+  if (fg) document.body.style.color = fg;
+}
+store.subscribe('css.*', ({ path }) => {
+  if (path === 'css.page.background' || path === 'css.page.color' || path === 'css.page') syncBody();
+});
+// Controls typography
+store.set('css.controls.h2.fontSize', '1.1rem');
+store.set('css.controls.h2.marginBottom', '0.5rem');
+store.set('css.controls.h2.marginTop', '1rem');
+store.set('css.controls.p.marginBottom', '0.5rem');
+store.set('css.controls.p.fontSize', '0.9rem');
+store.set('css.controls.p.opacity', '0.8');
+// Button row
+store.set('css.btn-row', { display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap', marginBottom: '1rem' });
+// Button styles
+store.set('css.btn-row.button.padding', '0.5rem 1rem');
+store.set('css.btn-row.button.borderRadius', '0.5rem');
+store.set('css.btn-row.button.border', '1px solid rgba(128,128,128,0.3)');
+store.set('css.btn-row.button.cursor', 'pointer');
+store.set('css.btn-row.button.fontSize', '0.9rem');
+store.set('css.btn-row.button.background', 'rgba(128,128,128,0.15)');
+store.set('css.btn-row.button.color', 'inherit');
+store.set('css.btn-row.button.transition', 'background 0.2s');
+store.set('css.btn-row.button.hover.background', 'rgba(128,128,128,0.3)');
+// Inspector pre
+store.set('css.controls.pre.background', 'rgba(0,0,0,0.08)');
+store.set('css.controls.pre.padding', '1rem');
+store.set('css.controls.pre.borderRadius', '0.5rem');
+store.set('css.controls.pre.fontSize', '0.8rem');
+store.set('css.controls.pre.overflow', 'auto');
+store.set('css.controls.pre.maxHeight', '300px');
+store.set('css.controls.pre.whiteSpace', 'pre-wrap');
+store.set('css.controls.pre.border', '1px solid rgba(128,128,128,0.15)');
+// Premium: hidden by default
+store.set('css.premium.display', 'none');
+// Apply light theme first
+let currentTheme = 'light';
+function applyTheme(name) {
+  currentTheme = name;
+  const t = themes[name];
+  for (const [component, styles] of Object.entries(t)) {
+    store.set(`css.${component}`, styles);
+  }
+}
+applyTheme('light');
+syncBody();
+// ============================================================
+// User actions
+// ============================================================
+let changeLog = [];
+store.subscribe('css.*', ({ path, value }) => {
+  if (typeof value === 'string' || typeof value === 'number') {
+    changeLog.unshift(`${path} = ${value}`);
+    if (changeLog.length > 30) changeLog.length = 30;
+    document.getElementById('changelog').textContent = changeLog.join('\n');
+  }
+});
+function updateInspector() {
+  document.getElementById('inspector').textContent = JSON.stringify(store.get('css'), null, 2);
+}
+store.subscribe('css.*', () => requestAnimationFrame(updateInspector));
+updateInspector();
+window.setTheme = function(name) { applyTheme(name); };
+window.setToken = function(hex) {
+  document.getElementById('tokenLabel').textContent = hex;
+  store.set('css.card.background', hex);
+  store.set('css.btn-row.button.hover.background', hex + '44');
+};
+window.setPlan = function(plan) {
+  store.set('css.premium.display', plan === 'pro' ? 'block' : 'none');
+};
+// ============================================================
+// Event Sequence Tests
+// ============================================================
+window.runTests = function() {
+  const log = document.getElementById('testLog');
+  const results = [];
+  let pass = 0, fail = 0;
+  function assert(label, condition) {
+    if (condition) { pass++; results.push('  OK  ' + label); }
+    else { fail++; results.push('  FAIL  ' + label); }
+  }
+  // Test 1: theme swap fires wildcard
+  {
+    let fired = false;
+    const unsub = store.subscribe('css.*', () => { fired = true; });
+    store.set('css.page.background', '#000');
+    assert('theme swap fires css.* wildcard', fired);
+    unsub();
+    applyTheme(currentTheme);
+  }
+  // Test 2: set/get round-trip
+  {
+    store.set('css.card.padding', '2rem');
+    assert('set/get round-trip', store.get('css.card.padding') === '2rem');
+    applyTheme(currentTheme);
+  }
+  // Test 3: subtree set populates children
+  {
+    store.set('css.card', { background: '#aaa', color: '#111' });
+    assert('subtree set: background', store.get('css.card.background') === '#aaa');
+    assert('subtree set: color', store.get('css.card.color') === '#111');
+    applyTheme(currentTheme);
+  }
+  // Test 4: premium toggle
+  {
+    store.set('css.premium.display', 'block');
+    assert('premium visible on pro', store.get('css.premium.display') === 'block');
+    store.set('css.premium.display', 'none');
+    assert('premium hidden on free', store.get('css.premium.display') === 'none');
+  }
+  // Test 5: subscriber fires in order
+  {
+    const seq = [];
+    const u1 = store.subscribe('css.card.padding', () => seq.push('A'));
+    const u2 = store.subscribe('css.*', () => seq.push('B'));
+    store.set('css.card.padding', '99px');
+    assert('exact fires before wildcard', seq[0] === 'A' && seq[1] === 'B');
+    u1(); u2();
+    applyTheme(currentTheme);
+  }
+  // Test 6: unsubscribe stops notifications
+  {
+    let count = 0;
+    const unsub = store.subscribe('css.page.color', () => count++);
+    store.set('css.page.color', '#000');
+    unsub();
+    store.set('css.page.color', '#fff');
+    assert('unsubscribe stops notifications', count === 1);
+    applyTheme(currentTheme);
+  }
+  log.textContent = results.join('\n') + `\n\n${pass} passed, ${fail} failed`;
+};
+</script>
+</body>
+</html>