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-view/001/counter/index.css ADDED Viewed

@@ -0,0 +1,31 @@
+body {
+  font-family: system-ui, sans-serif;
+  background: #0f172a;
+  color: #e2e8f0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+}
+.counter {
+  text-align: center;
+}
+.counter h1 {
+  font-size: 4rem;
+  color: #38bdf8;
+  margin: 0 0 1rem;
+}
+.counter button {
+  font-size: 1.5rem;
+  padding: 0.5rem 2rem;
+  background: #38bdf8;
+  color: #0f172a;
+  border: none;
+  border-radius: 8px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.counter button:hover {
+  background: #7dd3fc;
+}

package/everyState-view/001/counter/index.html ADDED Viewed

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@everystate/view: Increment Demo</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"
+      }
+    }
+  </script>
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module">
+    import { createEveryState } from '@everystate/core';
+    import { flatten } from '@everystate/view/resolve';
+    import { mount } from '@everystate/view/project';
+    // 1. Data
+    const store = createEveryState({ count: 0 });
+    // 2. View
+    flatten({
+      tag: 'div',
+      class: 'counter',
+      children: [
+        { tag: 'h1', text: '{count}' },
+        { tag: 'button', text: '+', onClick: 'increment' }
+      ]
+    }, store, 'view');
+    // 3. Handlers
+    const handlers = {
+      increment() {
+        store.set('count', store.get('count') + 1);
+      }
+    };
+    // 4. Mount
+    mount(store, 'view', document.getElementById('app'), handlers);
+  </script>
+</body>
+</html>

package/everyState-view/002/datatable/index.css ADDED Viewed

@@ -0,0 +1,70 @@
+body {
+  font-family: system-ui, sans-serif;
+  background: #0f172a;
+  color: #e2e8f0;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  min-height: 100vh;
+  margin: 0;
+  padding: 3rem 1rem;
+}
+.datatable {
+  width: 100%;
+  max-width: 640px;
+}
+.datatable h1 {
+  color: #38bdf8;
+  font-size: 1.6rem;
+  margin: 0 0 0.25rem;
+}
+.subtitle {
+  color: #64748b;
+  font-size: 0.85rem;
+  margin: 0 0 1.5rem;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background: #1e293b;
+  border-radius: 12px;
+  overflow: hidden;
+}
+thead {
+  background: #334155;
+}
+th {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #94a3b8;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.2s;
+}
+th:hover {
+  color: #38bdf8;
+}
+td {
+  padding: 0.7rem 1rem;
+  font-size: 0.9rem;
+  border-top: 1px solid #1e293b;
+}
+tbody tr {
+  transition: background 0.15s;
+}
+tbody tr:hover {
+  background: #334155;
+}

package/everyState-view/002/datatable/index.html ADDED Viewed

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@everystate/view: DataTable Demo</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"
+      }
+    }
+  </script>
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module">
+    import { createEveryState } from '@everystate/core';
+    import { flatten } from '@everystate/view/resolve';
+    import { mount } from '@everystate/view/project';
+    // 1. Data
+    const store = createEveryState({
+      sortBy: 'name',
+      sortDir: 'asc',
+      rows: [
+        { name: 'Alice',   role: 'Engineer',  age: 32 },
+        { name: 'Bob',     role: 'Designer',  age: 28 },
+        { name: 'Charlie', role: 'Manager',   age: 45 },
+        { name: 'Diana',   role: 'Engineer',  age: 29 },
+        { name: 'Eve',     role: 'Designer',  age: 37 },
+        { name: 'Frank',   role: 'Manager',   age: 51 },
+      ],
+      sorted: []
+    });
+    // Derived: sort rows whenever sortBy/sortDir/rows change
+    function applySort() {
+      const rows = store.get('rows') || [];
+      const col = store.get('sortBy');
+      const dir = store.get('sortDir');
+      const sorted = [...rows].sort((a, b) => {
+        const va = a[col], vb = b[col];
+        if (typeof va === 'number') return dir === 'asc' ? va - vb : vb - va;
+        return dir === 'asc'
+          ? String(va).localeCompare(String(vb))
+          : String(vb).localeCompare(String(va));
+      });
+      store.set('sorted', sorted);
+    }
+    applySort();
+    store.subscribe('sortBy', applySort);
+    store.subscribe('sortDir', applySort);
+    store.subscribe('rows', applySort);
+    // 2. View
+    flatten({
+      tag: 'div',
+      class: 'datatable',
+      children: [
+        { tag: 'h1', text: 'Team Directory' },
+        { tag: 'p', class: 'subtitle', text: '{rows.length} members · click a column to sort' },
+        {
+          tag: 'table',
+          children: [
+            {
+              tag: 'thead',
+              children: [{
+                tag: 'tr',
+                children: [
+                  { tag: 'th', text: 'Name ↕', onClick: 'sortByCol(name)' },
+                  { tag: 'th', text: 'Role ↕', onClick: 'sortByCol(role)' },
+                  { tag: 'th', text: 'Age ↕',  onClick: 'sortByCol(age)' }
+                ]
+              }]
+            },
+            {
+              tag: 'tbody',
+              forEach: 'sorted',
+              as: 'row',
+              template: {
+                tag: 'tr',
+                children: [
+                  { tag: 'td', text: 'row.name' },
+                  { tag: 'td', text: 'row.role' },
+                  { tag: 'td', text: 'row.age' }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    }, store, 'view');
+    // 3. Handlers
+    const handlers = {
+      sortByCol(col) {
+        if (!col || typeof col !== 'string') return;
+        const current = store.get('sortBy');
+        if (current === col) {
+          store.set('sortDir', store.get('sortDir') === 'asc' ? 'desc' : 'asc');
+        } else {
+          store.set('sortBy', col);
+          store.set('sortDir', 'asc');
+        }
+      }
+    };
+    // 4. Mount
+    mount(store, 'view', document.getElementById('app'), handlers);
+  </script>
+</body>
+</html>

package/everyState-view/003/todo/index.css ADDED Viewed

@@ -0,0 +1,260 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #0f172a;
+  color: #e2e8f0;
+  min-height: 100vh;
+}
+header {
+  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  border-bottom: 1px solid #334155;
+  padding: 1.5rem 2rem;
+}
+header h1 {
+  color: #38bdf8;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+header p {
+  color: #94a3b8;
+  font-size: 0.9rem;
+  margin-top: 0.25rem;
+}
+.layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1px;
+  background: #334155;
+  height: calc(100vh - 90px);
+}
+.panel {
+  background: #0f172a;
+  padding: 1.5rem;
+  overflow: auto;
+}
+.panel h2 {
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #64748b;
+  margin-bottom: 1rem;
+}
+/* ── Live App (left panel) ── */
+.todo-app {
+  background: #1e293b;
+  border-radius: 12px;
+  padding: 1.5rem;
+  border: 1px solid #334155;
+}
+.todo-app h2 {
+  color: #f1f5f9;
+  font-size: 1.2rem;
+  text-transform: none;
+  letter-spacing: 0;
+  margin-bottom: 1rem;
+}
+.input-row {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.input-row input {
+  flex: 1;
+  padding: 0.6rem 0.8rem;
+  background: #0f172a;
+  border: 1px solid #475569;
+  border-radius: 8px;
+  color: #e2e8f0;
+  font-size: 0.9rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+.input-row input:focus {
+  border-color: #38bdf8;
+}
+.input-row button,
+.todo-actions button {
+  padding: 0.6rem 1rem;
+  background: #38bdf8;
+  color: #0f172a;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.input-row button:hover,
+.todo-actions button:hover {
+  background: #7dd3fc;
+}
+.todo-list {
+  list-style: none;
+  margin-bottom: 1rem;
+}
+.todo-list li {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.65rem 0.8rem;
+  border-radius: 8px;
+  margin-bottom: 0.4rem;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  transition: all 0.2s;
+}
+.todo-list li:hover {
+  border-color: #475569;
+}
+.todo-list li.done span {
+  text-decoration: line-through;
+  color: #64748b;
+}
+.todo-list li .toggle {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid #475569;
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s;
+  font-size: 12px;
+  color: transparent;
+  user-select: none;
+  padding: 0;
+  line-height: 1;
+}
+.todo-list li .toggle:hover {
+  border-color: #38bdf8;
+}
+.todo-list li.done .toggle {
+  background: #38bdf8;
+  border-color: #38bdf8;
+  color: #0f172a;
+}
+.todo-list li .edit-input {
+  flex: 1;
+  padding: 0.2rem 0.5rem;
+  background: #1e293b;
+  border: 1px solid #38bdf8;
+  border-radius: 4px;
+  color: #e2e8f0;
+  font-size: 0.9rem;
+  outline: none;
+}
+.todo-list li span {
+  flex: 1;
+  font-size: 0.9rem;
+}
+.todo-list li button {
+  padding: 0.3rem 0.6rem;
+  background: transparent;
+  border: 1px solid #475569;
+  color: #94a3b8;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.75rem;
+}
+.todo-list li button:hover {
+  border-color: #ef4444;
+  color: #ef4444;
+}
+.stats {
+  display: flex;
+  gap: 1.5rem;
+  font-size: 0.85rem;
+  color: #94a3b8;
+  padding-top: 0.5rem;
+  border-top: 1px solid #334155;
+}
+.stats span strong {
+  color: #38bdf8;
+}
+/* ── State Inspector (right panel) ── */
+.state-inspector {
+  background: #1e293b;
+  border-radius: 12px;
+  padding: 1rem;
+  border: 1px solid #334155;
+  font-family: "Fira Code", "Consolas", monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  overflow: auto;
+  max-height: calc(100vh - 180px);
+}
+.state-path {
+  color: #38bdf8;
+}
+.state-value {
+  color: #a5f3fc;
+}
+.state-string {
+  color: #86efac;
+}
+.state-number {
+  color: #fbbf24;
+}
+.state-bool {
+  color: #c084fc;
+}
+.state-null {
+  color: #64748b;
+}
+.state-key {
+  color: #94a3b8;
+}
+.state-bracket {
+  color: #64748b;
+}
+.tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.tab {
+  padding: 0.4rem 0.8rem;
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 6px;
+  color: #94a3b8;
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+.tab.active {
+  background: #38bdf822;
+  border-color: #38bdf8;
+  color: #38bdf8;
+}
+.ssr-output {
+  background: #1e293b;
+  border-radius: 12px;
+  padding: 1rem;
+  border: 1px solid #334155;
+  font-family: "Fira Code", "Consolas", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #a5f3fc;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow: auto;
+  max-height: calc(100vh - 180px);
+}