feat: el-ui — activation-based frontend framework, spreading activation reactivity, graph state

2026-04-27 19:15:53 -05:00
commit ea56ad6e09
25 changed files with 4642 additions and 0 deletions
@@ -0,0 +1,23 @@
+component Counter {
+    state {
+        count: Int = 0
+    }
+
+    template {
+        <div class="counter">
+            <h1 class="count">{count}</h1>
+            <div class="buttons">
+                <button on:click={() => count = count + 1}>+</button>
+                <button on:click={() => count = count - 1}>-</button>
+            </div>
+        </div>
+    }
+}
+
+component App {
+    template {
+        <div class="app">
+            <Counter />
+        </div>
+    }
+}
@@ -0,0 +1,61 @@
+import { Component, Graph, Renderer, Router, mount } from './el-ui.js';
+
+class Counter extends Component {
+    constructor(props = {}) {
+        super();
+        this.props = props;
+        this._graph = new Graph();
+        this._stateNodes = {};
+        this._state = {};
+        // State nodes (Engram graph seeds)
+        this._stateNodes['count'] = this._graph.seed({ type: 'state', name: 'count', content: 0 });
+        this._state['count'] = 0;
+        // Subscribe to graph activation events
+        for (const [key, nodeId] of Object.entries(this._stateNodes)) {
+            this._graph.subscribe(nodeId, (node) => {
+                this._state[key] = node.content;
+                if (this._renderer) this._renderer.patch();
+            });
+        }
+    }
+
+    setState(name, value) {
+        if (this._stateNodes[name] !== undefined) {
+            this._graph.update(this._stateNodes[name], value);
+        }
+    }
+
+    render() {
+        const __self = this;
+        const count = this._state['count'];
+        return `<div class="counter" data-el-tag="div"><h1 class="count" data-el-tag="h1">${count  }</h1><div class="buttons" data-el-tag="div"><button data-el-click="() => __self.setState(&#39;count&#39;, count + 1)" data-el-tag="button">+</button><button data-el-click="() => __self.setState(&#39;count&#39;, count - 1)" data-el-tag="button">-</button></div></div>`;
+    }
+
+}
+
+class App extends Component {
+    constructor(props = {}) {
+        super();
+        this.props = props;
+        this._graph = new Graph();
+        this._stateNodes = {};
+        this._state = {};
+    }
+
+    setState(name, value) {
+        if (this._stateNodes[name] !== undefined) {
+            this._graph.update(this._stateNodes[name], value);
+        }
+    }
+
+    render() {
+        const __self = this;
+        return `<div class="app" data-el-tag="div">${__self._child(Counter, {  })}</div>`;
+    }
+
+}
+
+export { Counter, App };
+
+// Mount the app
+mount(App, '#app');
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Counter — el-ui</title>
+    <style>
+        :root {
+            --bg: #080b0f;
+            --bg2: #0d1117;
+            --text: #e8edf3;
+            --text2: #7a8a9a;
+            --accent: #38bdf8;
+            --accent-dim: rgba(56,189,248,0.12);
+            --accent-glow: rgba(56,189,248,0.4);
+            --border: rgba(255,255,255,0.08);
+            --radius: 8px;
+        }
+
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+
+        body {
+            background: var(--bg);
+            color: var(--text);
+            font-family: 'DM Mono', 'JetBrains Mono', 'Fira Code', monospace;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+        }
+
+        .app {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .counter {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 32px;
+            padding: 48px 64px;
+            background: var(--bg2);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+        }
+
+        .count {
+            font-size: 72px;
+            font-weight: 700;
+            font-variant-numeric: tabular-nums;
+            color: var(--accent);
+            text-shadow: 0 0 40px var(--accent-glow);
+            min-width: 120px;
+            text-align: center;
+            letter-spacing: -0.03em;
+        }
+
+        .buttons {
+            display: flex;
+            gap: 16px;
+        }
+
+        button {
+            background: var(--accent-dim);
+            border: 1px solid var(--accent);
+            color: var(--accent);
+            font-size: 24px;
+            font-family: inherit;
+            width: 56px;
+            height: 56px;
+            border-radius: var(--radius);
+            cursor: pointer;
+            transition: background 0.15s, box-shadow 0.15s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        button:hover {
+            background: rgba(56,189,248,0.22);
+            box-shadow: 0 0 16px var(--accent-glow);
+        }
+
+        button:active {
+            transform: scale(0.95);
+        }
+
+        .el-badge {
+            position: fixed;
+            bottom: 16px;
+            right: 16px;
+            font-size: 10px;
+            color: var(--text2);
+            opacity: 0.5;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+        }
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    <div class="el-badge">el-ui · spreading activation</div>
+    <script type="module" src="./app.js"></script>
+</body>
+</html>
@@ -0,0 +1,54 @@
+component TodoItem {
+    props {
+        text: String
+        done: Bool = false
+    }
+
+    state {
+        completed: Bool = false
+    }
+
+    template {
+        <li class={completed ? "item done" : "item"}>
+            <input type="checkbox" on:change={() => completed = !completed} />
+            <span>{text}</span>
+        </li>
+    }
+}
+
+component TodoApp {
+    state {
+        newItem: String = ""
+        items: String = ""
+    }
+
+    fn addItem() -> Void {
+        if newItem != "" {
+            items = items + newItem + ";"
+            newItem = ""
+        }
+    }
+
+    template {
+        <div class="todo-app">
+            <h1>Todos</h1>
+            <div class="input-row">
+                <input
+                    type="text"
+                    value={newItem}
+                    on:input={(e) => newItem = e.target.value}
+                    placeholder="Add a todo..."
+                />
+                <button on:click={() => addItem()}>Add</button>
+            </div>
+        </div>
+    }
+}
+
+component App {
+    template {
+        <div class="app">
+            <TodoApp />
+        </div>
+    }
+}
@@ -0,0 +1,108 @@
+import { Component, Graph, Renderer, Router, mount } from './el-ui.js';
+
+class TodoItem extends Component {
+    constructor(props = {}) {
+        super();
+        this.props = props;
+        this._graph = new Graph();
+        this._stateNodes = {};
+        this._state = {};
+        // Props
+        this._props_text = props.text !== undefined ? props.text : undefined;
+        this._props_done = props.done !== undefined ? props.done : false;
+        // State nodes (Engram graph seeds)
+        this._stateNodes['completed'] = this._graph.seed({ type: 'state', name: 'completed', content: false });
+        this._state['completed'] = false;
+        // Subscribe to graph activation events
+        for (const [key, nodeId] of Object.entries(this._stateNodes)) {
+            this._graph.subscribe(nodeId, (node) => {
+                this._state[key] = node.content;
+                if (this._renderer) this._renderer.patch();
+            });
+        }
+    }
+
+    setState(name, value) {
+        if (this._stateNodes[name] !== undefined) {
+            this._graph.update(this._stateNodes[name], value);
+        }
+    }
+
+    render() {
+        const __self = this;
+        const completed = this._state['completed'];
+        const text = this._props_text;
+        const done = this._props_done;
+        return `<li class="${completed ? "item done" : "item"  }" data-el-tag="li"><input type="checkbox" data-el-change="() => __self.setState(&#39;completed&#39;, !completed)" data-el-tag="input"></input><span data-el-tag="span">${text  }</span></li>`;
+    }
+
+}
+
+class TodoApp extends Component {
+    constructor(props = {}) {
+        super();
+        this.props = props;
+        this._graph = new Graph();
+        this._stateNodes = {};
+        this._state = {};
+        // State nodes (Engram graph seeds)
+        this._stateNodes['newItem'] = this._graph.seed({ type: 'state', name: 'newItem', content: "" });
+        this._state['newItem'] = "";
+        this._stateNodes['items'] = this._graph.seed({ type: 'state', name: 'items', content: "" });
+        this._state['items'] = "";
+        // Subscribe to graph activation events
+        for (const [key, nodeId] of Object.entries(this._stateNodes)) {
+            this._graph.subscribe(nodeId, (node) => {
+                this._state[key] = node.content;
+                if (this._renderer) this._renderer.patch();
+            });
+        }
+    }
+
+    setState(name, value) {
+        if (this._stateNodes[name] !== undefined) {
+            this._graph.update(this._stateNodes[name], value);
+        }
+    }
+
+    addItem() {
+        const newItem = this._state['newItem'];
+        const items = this._state['items'];
+        if newItem != "" { items = items + newItem + ";" newItem = "" }
+    }
+
+    render() {
+        const __self = this;
+        const newItem = this._state['newItem'];
+        const items = this._state['items'];
+        return `<div class="todo-app" data-el-tag="div"><h1 data-el-tag="h1">Todos</h1><div class="input-row" data-el-tag="div"><input type="text" value="${newItem  }" data-el-input="(e) => __self.setState(&#39;newItem&#39;, e.target.value)" placeholder="Add a todo..." data-el-tag="input"></input><button data-el-click="() => addItem()" data-el-tag="button">Add</button></div></div>`;
+    }
+
+}
+
+class App extends Component {
+    constructor(props = {}) {
+        super();
+        this.props = props;
+        this._graph = new Graph();
+        this._stateNodes = {};
+        this._state = {};
+    }
+
+    setState(name, value) {
+        if (this._stateNodes[name] !== undefined) {
+            this._graph.update(this._stateNodes[name], value);
+        }
+    }
+
+    render() {
+        const __self = this;
+        return `<div class="app" data-el-tag="div">${__self._child(TodoApp, {  })}</div>`;
+    }
+
+}
+
+export { TodoItem, TodoApp, App };
+
+// Mount the app
+mount(App, '#app');
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Todos — el-ui</title>
+    <style>
+        :root {
+            --bg: #080b0f;
+            --bg2: #0d1117;
+            --bg3: #111820;
+            --text: #e8edf3;
+            --text2: #7a8a9a;
+            --accent: #38bdf8;
+            --accent-dim: rgba(56,189,248,0.10);
+            --accent-glow: rgba(56,189,248,0.35);
+            --border: rgba(255,255,255,0.08);
+            --radius: 8px;
+            --green: #4ade80;
+            --green-dim: rgba(74,222,128,0.12);
+        }
+
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+
+        body {
+            background: var(--bg);
+            color: var(--text);
+            font-family: 'DM Mono', 'Fira Code', monospace;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            min-height: 100vh;
+            padding: 64px 16px;
+        }
+
+        .app { width: 100%; max-width: 480px; }
+
+        .todo-app {
+            background: var(--bg2);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            overflow: hidden;
+        }
+
+        h1 {
+            font-size: 16px;
+            font-weight: 600;
+            letter-spacing: 0.06em;
+            text-transform: uppercase;
+            color: var(--text2);
+            padding: 20px 20px 16px;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .input-row {
+            display: flex;
+            gap: 0;
+            border-bottom: 1px solid var(--border);
+        }
+
+        input[type="text"] {
+            flex: 1;
+            background: transparent;
+            border: none;
+            color: var(--text);
+            font-family: inherit;
+            font-size: 13px;
+            padding: 14px 16px;
+            outline: none;
+        }
+
+        input[type="text"]::placeholder { color: var(--text2); }
+
+        input[type="text"]:focus {
+            background: rgba(255,255,255,0.02);
+        }
+
+        button {
+            background: var(--accent-dim);
+            border: none;
+            border-left: 1px solid var(--border);
+            color: var(--accent);
+            font-family: inherit;
+            font-size: 12px;
+            font-weight: 600;
+            letter-spacing: 0.06em;
+            text-transform: uppercase;
+            padding: 0 20px;
+            cursor: pointer;
+            transition: background 0.15s;
+        }
+
+        button:hover {
+            background: rgba(56,189,248,0.18);
+        }
+
+        .item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px 16px;
+            border-bottom: 1px solid var(--border);
+            font-size: 13px;
+            list-style: none;
+            transition: background 0.1s;
+        }
+
+        .item:last-child { border-bottom: none; }
+
+        .item:hover { background: rgba(255,255,255,0.02); }
+
+        .item.done span {
+            text-decoration: line-through;
+            color: var(--text2);
+        }
+
+        input[type="checkbox"] {
+            accent-color: var(--green);
+            width: 14px;
+            height: 14px;
+            cursor: pointer;
+        }
+
+        .el-badge {
+            position: fixed;
+            bottom: 16px;
+            right: 16px;
+            font-size: 10px;
+            color: var(--text2);
+            opacity: 0.4;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+        }
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    <div class="el-badge">el-ui · spreading activation</div>
+    <script type="module" src="./app.js"></script>
+</body>
+</html>