@evgkch/reactive-dom 0.1.0 → 0.2.0

package/examples/monitor/styles.css

@@ -1,425 +0,0 @@
-@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;
-    }
-}

package/examples/stream/app.js

@@ -1,136 +0,0 @@
-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 levelFilter = R.Value("all");
-const logs = R.List([]);
-
-const LEVELS = ["info", "warn", "err"];
-const MESSAGES = [
-  "Connection established",
-  "Handshake complete",
-  "Buffer overflow risk",
-  "Retry attempt 3",
-  "Cache miss",
-  "Timeout after 2000ms",
-  "Invalid payload",
-  "Rate limit exceeded",
-  "Endpoint unreachable",
-  "Auth failed",
-];
-
-function fmtTime(ts) {
-  const d = new Date(ts);
-  return (
-    String(d.getHours()).padStart(2, "0") +
-    ":" +
-    String(d.getMinutes()).padStart(2, "0") +
-    ":" +
-    String(d.getSeconds()).padStart(2, "0") +
-    "." +
-    String(Math.floor(d.getMilliseconds() / 100)).padStart(1, "0")
-  );
-}
-
-function addRandomLog() {
-  const level = LEVELS[Math.floor(Math.random() * LEVELS.length)];
-  const msg = MESSAGES[Math.floor(Math.random() * MESSAGES.length)];
-  logs.push(R.Struct({ ts: Date.now(), level, msg }));
-}
-
-let timer;
-if (typeof document !== "undefined" && document.getElementById("app")) {
-  timer = setInterval(addRandomLog, 800);
-}
-
-const LogLine = UI.List(
-  `<li>
-    <span class="log-ts" data-ref="ts"></span>
-    <span class="log-level" data-ref="level"></span>
-    <span class="log-msg" data-ref="msg"></span>
-  </li>`,
-  (props, refs, ctx) => {
-    ctx.batch(() => {
-      const { level, msg, ts } = props.item;
-      refs.ts.textContent = fmtTime(ts);
-      refs.level.textContent = level.toUpperCase();
-      refs.level.className = "log-level " + level;
-      refs.msg.textContent = msg;
-
-      const f = levelFilter.get();
-      refs.el.style.display =
-        f === "all" ? "" : f === level ? "" : "none";
-    });
-  }
-);
-
-const App = UI.Struct(
-  `<div class="panel">
-    <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://STREAM</span>
-      </div>
-      <div class="titlebar-right" data-ref="count">0 events</div>
-    </div>
-    <div class="stream-toolbar">
-      <div class="stream-filters" data-ref="filters">
-        <button data-level="all">all</button>
-        <button data-level="info">info</button>
-        <button data-level="warn">warn</button>
-        <button data-level="err">err</button>
-      </div>
-      <button class="stream-clear" data-ref="clear">clear</button>
-    </div>
-    <ul class="log-list" data-ref="list"></ul>
-    <p class="empty-logs" data-ref="empty">waiting for events...</p>
-  </div>`,
-  (props, refs, ctx) => {
-    ctx.list(refs.list, logs, (item) => ({ item }), LogLine, {
-      onAdd: (el) => {
-        el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 120 });
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            const list = refs.list;
-            list.scrollTop = list.scrollHeight;
-          });
-        });
-      },
-    });
-
-    // React to list changes only (count, empty) — Watch fires on push/splice, no Batch on every add
-    function updateCount() {
-      refs.count.textContent = logs.length + " event" + (logs.length !== 1 ? "s" : "");
-      refs.empty.style.display = logs.length === 0 ? "block" : "none";
-    }
-    updateCount();
-    ctx.watch(logs, updateCount);
-
-    ctx.batch(() => {
-      const current = levelFilter.get();
-      for (const btn of refs.filters.querySelectorAll("[data-level]")) {
-        btn.className = current === btn.getAttribute("data-level") ? "active" : "";
-      }
-    });
-
-    refs.filters.addEventListener("click", (e) => {
-      const level = e.target?.getAttribute?.("data-level");
-      if (level) levelFilter.set(level);
-    });
-
-    refs.clear.addEventListener("click", () => {
-      logs.splice(0, logs.length);
-    });
-  }
-);
-
-export { App, logs, levelFilter };
-if (typeof document !== "undefined" && document.getElementById("app")) {
-  document.getElementById("app").appendChild(App({}));
-}

package/examples/stream/index.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Stream — 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=JetBrains+Mono:wght@400;500;700&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>