@evgkch/reactive-dom 0.1.0

package/examples/monitor/app.js

@@ -0,0 +1,260 @@
+import * as R from "@evgkch/reactive";
+import * as UI from "@evgkch/reactive-dom";
+
+if (typeof document !== "undefined" && document.getElementById("app")) {
+  R.configure({ log: true });
+  UI.configure({ log: true });
+}
+
+// ── состояние ──────────────────────────────────────────────────────────────
+
+const filter  = R.Value("all");
+const cpu     = R.Value(42);
+const mem     = R.Value(61);
+const uptime  = R.Value(0);
+
+const tasks = R.List([
+  R.Struct({ text: "infiltrate server",  done: false }),
+  R.Struct({ text: "extract data",       done: true  }),
+  R.Struct({ text: "cover tracks",       done: false }),
+]);
+
+// fake metrics — change every second (only in browser)
+if (typeof document !== "undefined" && document.getElementById("app")) {
+  setInterval(() => {
+    cpu.set(Math.max(10, Math.min(99, cpu.get() + Math.floor(Math.random() * 11) - 5)));
+    mem.set(Math.max(20, Math.min(95, mem.get() + Math.floor(Math.random() * 7) - 3)));
+    uptime.update((n) => n + 1);
+  }, 1000);
+}
+
+// ── утилиты ───────────────────────────────────────────────────────────────
+
+function fmtUptime(s) {
+  const h = String(Math.floor(s / 3600)).padStart(2, '0');
+  const m = String(Math.floor((s % 3600) / 60)).padStart(2, '0');
+  const sec = String(s % 60).padStart(2, '0');
+  return `${h}:${m}:${sec}`;
+}
+
+function barClass(val) {
+  if (val >= 85) return 'crit';
+  if (val >= 65) return 'warn';
+  return '';
+}
+
+// ── TaskItem ──────────────────────────────────────────────────────────────
+
+const TaskItem = UI.List(
+  `<li>
+    <input type="checkbox" class="task-check" data-ref="check" />
+    <span class="task-text"  data-ref="text"></span>
+    <span class="task-status" data-ref="status"></span>
+    <button class="task-remove" data-ref="remove">kill</button>
+  </li>`,
+  (props, refs, ctx) => {
+    const check = refs.check;
+
+    ctx.batch(() => {
+      refs.text.textContent   = props.item.text;
+      check.checked           = props.item.done;
+      refs.el.className       = props.item.done ? "done" : "";
+      refs.status.textContent = props.item.done ? "DONE" : "RUNNING";
+
+      const f = filter.get();
+      refs.el.style.display =
+        f === "all"    ? "" :
+        f === "active" ? (props.item.done ? "none" : "") :
+        f === "done"   ? (props.item.done ? "" : "none") : "";
+    });
+
+    check.onchange = () => { props.item.done = check.checked; };
+    refs.remove.onclick = () => tasks.splice(tasks.indexOf(props.item), 1);
+  }
+);
+
+// ── App ───────────────────────────────────────────────────────────────────
+
+const App = UI.Struct(
+  `<div class="monitor">
+
+    <div class="titlebar">
+      <div class="titlebar-left">
+        <span class="dot dot-red"></span>
+        <span class="dot dot-yellow"></span>
+        <span class="dot dot-green"></span>
+        <span class="titlebar-title">SYS://TASK_MONITOR</span>
+      </div>
+      <div class="titlebar-right" data-ref="uptime">UP 00:00:00</div>
+    </div>
+
+    <div class="metrics">
+      <div class="metric">
+        <div class="metric-label">CPU</div>
+        <div class="metric-bar"><div class="metric-fill" data-ref="cpu-bar"></div></div>
+        <div class="metric-val" data-ref="cpu-val">0%</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">MEM</div>
+        <div class="metric-bar"><div class="metric-fill" data-ref="mem-bar"></div></div>
+        <div class="metric-val" data-ref="mem-val">0%</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">PROCS</div>
+        <div class="metric-bar"><div class="metric-fill" data-ref="procs-bar" style="background:#4488ff"></div></div>
+        <div class="metric-val" data-ref="procs-val">0</div>
+      </div>
+    </div>
+
+    <div class="input-row">
+      <span class="prompt">$</span>
+      <input class="new-input" data-ref="input" placeholder="spawn process..." />
+      <span class="kbd-hint">↵ enter</span>
+    </div>
+
+    <ul class="task-list" data-ref="list"></ul>
+    <p class="empty"  data-ref="empty">no processes running</p>
+
+    <div class="statusbar">
+      <div class="status-left" data-ref="stats">
+        <span>procs: <span data-ref="total">0</span></span>
+        <span>running: <span data-ref="running">0</span></span>
+        <span>done: <span data-ref="done-count">0</span></span>
+      </div>
+      <div class="filters" data-ref="filters">
+        <button data-filter="all">all</button>
+        <button data-filter="active">running</button>
+        <button data-filter="done">done</button>
+      </div>
+    </div>
+
+    <div class="hotkeys">
+      <div class="hotkey"><kbd>↵</kbd> spawn</div>
+      <div class="hotkey"><kbd>1</kbd> all</div>
+      <div class="hotkey"><kbd>2</kbd> running</div>
+      <div class="hotkey"><kbd>3</kbd> done</div>
+      <div class="hotkey"><kbd>⌫</kbd> kill last</div>
+      <div class="hotkey"><kbd>ESC</kbd> clear</div>
+    </div>
+
+  </div>`,
+
+  (props, refs, ctx) => {
+    const input = refs.input;
+
+    // ── список ──────────────────────────────────────────────────────────
+    ctx.list(refs.list, tasks, (item) => ({ item }), TaskItem, {
+      onAdd: (el) =>
+        el.animate([
+          { opacity: 0, transform: "translateX(-8px)" },
+          { opacity: 1, transform: "translateX(0)" }
+        ], 160),
+      onRemove: (el, done) =>
+        el.animate([
+          { opacity: 1, transform: "translateX(0)" },
+          { opacity: 0, transform: "translateX(8px)" }
+        ], 130).finished.then(done),
+    });
+
+    // ── метрики ──────────────────────────────────────────────────────────
+    ctx.batch(() => {
+      const v = cpu.get();
+      refs['cpu-bar'].style.width = v + '%';
+      refs['cpu-bar'].className = 'metric-fill ' + barClass(v);
+      refs['cpu-val'].textContent = v + '%';
+    });
+
+    ctx.batch(() => {
+      const v = mem.get();
+      refs['mem-bar'].style.width = v + '%';
+      refs['mem-bar'].className = 'metric-fill ' + barClass(v);
+      refs['mem-val'].textContent = v + '%';
+    });
+
+    ctx.batch(() => {
+      const total = tasks.length;
+      const max   = Math.max(total, 1);
+      refs['procs-bar'].style.width = Math.min(total / 10 * 100, 100) + '%';
+      refs['procs-val'].textContent = total;
+    });
+
+    ctx.batch(() => {
+      refs.uptime.textContent = 'UP ' + fmtUptime(uptime.get());
+    });
+
+    // ── статистика ────────────────────────────────────────────────────────
+    ctx.batch(() => {
+      let running = 0;
+      tasks.forEach(t => { if (!t.done) running++ });
+      const total = tasks.length;
+      const done  = total - running;
+      refs.total.textContent      = total;
+      refs.running.textContent    = running;
+      refs['done-count'].textContent = done;
+      refs.empty.style.display    = total === 0 ? 'block' : 'none';
+    });
+
+    // ── фильтры ──────────────────────────────────────────────────────────
+    ctx.batch(() => {
+      refs.filters.querySelectorAll('[data-filter]').forEach(btn => {
+        btn.className = filter.get() === btn.getAttribute('data-filter') ? 'active' : '';
+      });
+    });
+
+    refs.filters.addEventListener('click', e => {
+      const f = e.target?.getAttribute?.('data-filter');
+      if (f) filter.set(f);
+    });
+
+    // ── добавление ───────────────────────────────────────────────────────
+    function addTask() {
+      const text = input.value.trim();
+      if (!text) return;
+      tasks.push(R.Struct({ text, done: false }));
+      input.value = '';
+    }
+
+    input.addEventListener('keydown', e => {
+      if (e.key === 'Enter') addTask();
+    });
+
+    // ── горячие клавиши ──────────────────────────────────────────────────
+    document.addEventListener('keydown', e => {
+      // не перехватываем когда фокус в инпуте (кроме ESC и Backspace)
+      const inInput = document.activeElement === input;
+
+      if (e.key === 'Escape') {
+        input.value = '';
+        input.blur();
+        return;
+      }
+
+      if (inInput) return;
+
+      if (e.key === '1') { filter.set('all');    return; }
+      if (e.key === '2') { filter.set('active'); return; }
+      if (e.key === '3') { filter.set('done');   return; }
+
+      if (e.key === 'Backspace') {
+        // kill last — удалить последний незавершённый процесс
+        for (let i = tasks.length - 1; i >= 0; i--) {
+          if (!tasks[i].done) {
+            tasks.splice(i, 1);
+            break;
+          }
+        }
+        return;
+      }
+
+      // любой printable символ → фокус на инпут
+      if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+        input.focus();
+      }
+    });
+  }
+);
+
+export { App, filter, tasks };
+if (typeof document !== "undefined" && document.getElementById("app")) {
+  document.getElementById("app").appendChild(App({}));
+}

package/examples/monitor/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">
+<title>Monitor — reactive-dom</title>
+<script type="importmap">
+{
+  "imports": {
+    "@evgkch/reactive": "/node_modules/@evgkch/reactive/dist/index.js",
+    "@evgkch/reactive-dom": "/dist/index.js"
+  }
+}
+</script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="./app.js"></script>
+</body>
+</html>

package/examples/monitor/styles.css

@@ -0,0 +1,425 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+:root {
+    --bg: #080808;
+    --surface: #0f0f0f;
+    --border: #2a2a2a;
+    --ink: #d0d0d0;
+    --muted: #666;
+    --dim: #444;
+    --accent: #39ff14;
+    --red: #ff3333;
+    --yellow: #ffcc00;
+    --blue: #4488ff;
+}
+
+body {
+    font-family: "JetBrains Mono", monospace;
+    background: var(--bg);
+    color: var(--ink);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem 1rem;
+    font-size: 12px;
+    line-height: 1.5;
+}
+
+/* ── монитор — основной контейнер ── */
+.monitor {
+    width: 100%;
+    max-width: 480px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+}
+
+/* ── строка с рамкой ── */
+.row {
+    display: flex;
+    align-items: stretch;
+    border-bottom: 1px solid var(--border);
+}
+
+.row:last-child {
+    border-bottom: none;
+}
+
+.cell {
+    padding: 0.5rem 0.75rem;
+    flex: 1;
+}
+
+.cell + .cell {
+    border-left: 1px solid var(--border);
+}
+
+/* ── заголовок ── */
+.titlebar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.4rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg);
+}
+
+.titlebar-left {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.dot-red {
+    background: var(--red);
+}
+.dot-yellow {
+    background: var(--yellow);
+}
+.dot-green {
+    background: var(--accent);
+}
+
+.titlebar-title {
+    font-size: 11px;
+    font-weight: 700;
+    color: var(--ink);
+    letter-spacing: 0.1em;
+    margin-left: 0.5rem;
+}
+
+.titlebar-right {
+    font-size: 10px;
+    color: var(--muted);
+    letter-spacing: 0.05em;
+}
+
+/* ── метрики ── */
+.metrics {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    border-bottom: 1px solid var(--border);
+}
+
+.metric {
+    padding: 0.5rem 0.75rem;
+    border-right: 1px solid var(--border);
+}
+
+.metric:last-child {
+    border-right: none;
+}
+
+.metric-label {
+    font-size: 10px;
+    color: var(--muted);
+    letter-spacing: 0.08em;
+    margin-bottom: 0.25rem;
+}
+
+.metric-bar {
+    height: 3px;
+    background: var(--border);
+    margin-bottom: 0.2rem;
+    position: relative;
+}
+
+.metric-fill {
+    height: 100%;
+    background: var(--accent);
+    transition: width 0.8s ease;
+}
+
+.metric-fill.warn {
+    background: var(--yellow);
+}
+.metric-fill.crit {
+    background: var(--red);
+}
+
+.metric-val {
+    font-size: 11px;
+    font-weight: 700;
+    color: var(--ink);
+}
+
+/* ── input ── */
+.input-row {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--border);
+    padding: 0 0.75rem;
+    background: var(--bg);
+}
+
+.prompt {
+    color: var(--accent);
+    font-weight: 700;
+    margin-right: 0.5rem;
+    flex-shrink: 0;
+    font-size: 12px;
+}
+
+.new-input {
+    flex: 1;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 12px;
+    background: transparent;
+    border: none;
+    padding: 0.55rem 0;
+    color: var(--ink);
+    outline: none;
+    caret-color: var(--accent);
+}
+
+.new-input::placeholder {
+    color: var(--dim);
+}
+
+.kbd-hint {
+    font-size: 10px;
+    color: var(--dim);
+    flex-shrink: 0;
+}
+
+/* ── task list ── */
+.task-list {
+    list-style: none;
+    min-height: 2rem;
+}
+
+.task-list li {
+    display: grid;
+    grid-template-columns: 18px 1fr auto auto;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.45rem 0.75rem;
+    border-bottom: 1px solid #1a1a1a;
+    transition: background 0.1s;
+    cursor: default;
+    visibility: visible;
+    opacity: 1;
+}
+
+.task-list li:last-child {
+    border-bottom: none;
+}
+.task-list li:hover {
+    background: #131313;
+}
+.task-list li.done {
+    opacity: 0.5;
+}
+.task-list li.selected {
+    background: #141a14;
+}
+
+/* checkbox */
+.task-check {
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border: 1px solid var(--muted);
+    cursor: pointer;
+    position: relative;
+    flex-shrink: 0;
+    transition: border-color 0.1s;
+}
+
+.task-check:hover {
+    border-color: var(--accent);
+}
+.task-check:checked {
+    border-color: var(--accent);
+}
+
+.task-check:checked::after {
+    content: "✓";
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    color: var(--accent);
+    font-weight: 700;
+}
+
+/* text */
+.task-text {
+    font-size: 12px;
+    word-break: break-word;
+    color: var(--ink);
+}
+
+.task-list li.done .task-text {
+    color: var(--muted);
+    text-decoration: line-through;
+    text-decoration-color: #444;
+}
+
+/* status badge */
+.task-status {
+    font-size: 10px;
+    letter-spacing: 0.06em;
+    color: var(--muted);
+    flex-shrink: 0;
+    width: 52px;
+    text-align: right;
+}
+
+.task-list li:not(.done) .task-status {
+    color: var(--blue);
+}
+.task-list li.done .task-status {
+    color: var(--dim);
+}
+
+/* remove */
+.task-remove {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 10px;
+    background: none;
+    border: none;
+    color: var(--dim);
+    cursor: pointer;
+    padding: 0.1rem 0.2rem;
+    opacity: 0;
+    transition:
+        opacity 0.1s,
+        color 0.1s;
+    flex-shrink: 0;
+}
+
+.task-list li:hover .task-remove {
+    opacity: 1;
+}
+.task-remove:hover {
+    color: var(--red);
+}
+
+/* ── footer ── */
+.statusbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.35rem 0.75rem;
+    border-top: 1px solid var(--border);
+    background: var(--bg);
+}
+
+.status-left {
+    font-size: 10px;
+    color: var(--muted);
+    display: flex;
+    gap: 1rem;
+}
+
+.status-left span {
+    color: var(--ink);
+}
+
+.filters {
+    display: flex;
+    gap: 0;
+}
+
+.filters button {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 10px;
+    background: none;
+    border: 1px solid transparent;
+    color: var(--muted);
+    cursor: pointer;
+    padding: 0.15rem 0.5rem;
+    letter-spacing: 0.05em;
+    transition:
+        color 0.1s,
+        border-color 0.1s;
+}
+
+.filters button:hover {
+    color: var(--ink);
+}
+
+.filters button.active {
+    color: var(--accent);
+    border-color: var(--border);
+}
+
+/* ── hotkeys panel ── */
+.hotkeys {
+    display: flex;
+    gap: 1rem;
+    padding: 0.35rem 0.75rem;
+    border-top: 1px solid var(--border);
+    background: var(--bg);
+    flex-wrap: wrap;
+}
+
+.hotkey {
+    font-size: 10px;
+    color: var(--dim);
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.hotkey kbd {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 9px;
+    background: var(--border);
+    color: var(--ink);
+    padding: 0.1rem 0.3rem;
+    border-radius: 2px;
+    border-bottom: 1px solid #333;
+}
+
+/* ── empty ── */
+.empty {
+    padding: 1.25rem 0.75rem;
+    font-size: 11px;
+    color: var(--dim);
+    border-bottom: 1px solid #1a1a1a;
+}
+
+.empty::before {
+    content: "// ";
+    color: var(--border);
+}
+
+/* ── анимация курсора в title ── */
+.cursor {
+    display: inline-block;
+    width: 7px;
+    height: 13px;
+    background: var(--accent);
+    margin-left: 3px;
+    vertical-align: middle;
+    animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+}