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

ui/.gitignore

@@ -0,0 +1 @@
+/target/

ui/Cargo.lock

@@ -0,0 +1,65 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 4
+
+[[package]]
+name = "el-ui-compiler"
+version = "0.1.0"
+dependencies = [
+ "thiserror",
+]
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.106"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8fd00f0bb2e90d81d1044c2b32617f68fcb9fa3bb7640c23e9c748e53fb30934"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.45"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41f2619966050689382d2b44f664f4bc593e129785a36d6ee376ddf37259b924"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "syn"
+version = "2.0.117"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e665b8803e7b1d2a727f4023456bbbbe74da67099c585258af0ad9c5013b9b99"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "thiserror"
+version = "1.0.69"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6aaf5339b578ea85b50e080feb250a3e8ae8cfcdff9a461c9ec2904bc923f52"
+dependencies = [
+ "thiserror-impl",
+]
+
+[[package]]
+name = "thiserror-impl"
+version = "1.0.69"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4fee6c4efc90059e10f81e6d42c60a18f76588c3d74cb83a0b242a2b6c7504c1"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6e4313cd5fcd3dad5cafa179702e2b244f760991f45397d14d4ebf38247da75"

ui/Cargo.toml

@@ -0,0 +1,5 @@
+[workspace]
+members = [
+    "crates/el-ui-compiler",
+]
+resolver = "2"

ui/crates/el-ui-compiler/Cargo.toml

@@ -0,0 +1,19 @@
+[package]
+name = "el-ui-compiler"
+version = "0.1.0"
+edition = "2021"
+description = "el-ui component compiler — transforms .el component files into JavaScript"
+license = "MIT"
+
+[[bin]]
+name = "el-ui-compiler"
+path = "src/main.rs"
+
+[lib]
+name = "el_ui_compiler"
+path = "src/lib.rs"
+
+[dependencies]
+thiserror = "1"
+
+[dev-dependencies]

ui/crates/el-ui-compiler/src/ast.rs

@@ -0,0 +1,93 @@
+//! AST types for el-ui component files.
+
+/// A parsed component definition.
+#[derive(Debug, Clone)]
+pub struct Component {
+    pub name: String,
+    pub props: Vec<PropDef>,
+    pub state: Vec<StateDef>,
+    pub methods: Vec<Method>,
+    pub template: Template,
+}
+
+/// A prop declaration inside `props { ... }`.
+#[derive(Debug, Clone)]
+pub struct PropDef {
+    pub name: String,
+    pub type_name: String,
+    pub default: Option<String>,
+}
+
+/// A state declaration inside `state { ... }`.
+#[derive(Debug, Clone)]
+pub struct StateDef {
+    pub name: String,
+    pub type_name: String,
+    pub initial: String,
+}
+
+/// A method defined with `fn` inside the component body.
+#[derive(Debug, Clone)]
+pub struct Method {
+    pub name: String,
+    pub params: Vec<(String, String)>, // (name, type)
+    pub return_type: String,
+    pub body: String, // raw source text of the body (we pass through verbatim)
+}
+
+/// The template block.
+#[derive(Debug, Clone)]
+pub struct Template {
+    pub nodes: Vec<TemplateNode>,
+}
+
+/// A node within the template tree.
+#[derive(Debug, Clone)]
+pub enum TemplateNode {
+    /// A plain HTML element: `<div class="foo">...</div>`
+    Element {
+        tag: String,
+        attrs: Vec<Attr>,
+        children: Vec<TemplateNode>,
+    },
+    /// A component usage (uppercase first letter): `<Counter />`
+    Component {
+        name: String,
+        props: Vec<Attr>,
+    },
+    /// Literal text content.
+    Text(String),
+    /// An interpolated expression: `{count}`
+    Interpolation(String),
+    /// Conditional: `{#if cond}...{/if}` or `{#if cond}...{:else}...{/if}`
+    If {
+        condition: String,
+        then: Vec<TemplateNode>,
+        else_: Option<Vec<TemplateNode>>,
+    },
+    /// List rendering: `{#each items as item}...{/each}`
+    Each {
+        items: String,
+        item_name: String,
+        children: Vec<TemplateNode>,
+    },
+    /// Semantic activation query: `{#activate "query" as results}...{/activate}`
+    Activate {
+        query: String,
+        result_name: String,
+        children: Vec<TemplateNode>,
+    },
+}
+
+/// An attribute on a template element.
+#[derive(Debug, Clone)]
+pub enum Attr {
+    /// `class="btn"` — static string value
+    Static { name: String, value: String },
+    /// `class={expr}` — dynamic expression
+    Dynamic { name: String, expr: String },
+    /// `on:click={handler}` — event handler
+    EventHandler { event: String, handler: String },
+    /// `disabled={boolExpr}` — boolean attribute
+    BoolAttr { name: String, expr: String },
+}

ui/crates/el-ui-compiler/src/codegen.rs

@@ -0,0 +1,403 @@
+//! Code generator — transforms el-ui AST into JavaScript module source.
+//!
+//! Each component becomes a class that:
+//!   1. Extends `Component` from the el-ui runtime.
+//!   2. Stores each `state` field as a node in an in-instance `Graph`.
+//!   3. Implements `render()` returning an HTML string.
+//!   4. Uses `setState()` to trigger spreading activation and DOM patching.
+
+use crate::ast::*;
+use crate::error::CompileResult;
+
+pub struct Codegen {
+    runtime_path: String,
+}
+
+impl Codegen {
+    pub fn new(runtime_path: &str) -> Self {
+        Self { runtime_path: runtime_path.to_owned() }
+    }
+
+    pub fn generate(&self, components: &[Component]) -> CompileResult<String> {
+        let mut out = String::new();
+
+        // Runtime import
+        out.push_str(&format!(
+            "import {{ Component, Graph, Renderer, Router, mount }} from '{}';\n\n",
+            self.runtime_path
+        ));
+
+        for component in components {
+            out.push_str(&self.gen_component(component)?);
+            out.push('\n');
+        }
+
+        // Export all component names
+        let names: Vec<&str> = components.iter().map(|c| c.name.as_str()).collect();
+        if !names.is_empty() {
+            out.push_str(&format!("export {{ {} }};\n", names.join(", ")));
+        }
+
+        Ok(out)
+    }
+
+    fn gen_component(&self, comp: &Component) -> CompileResult<String> {
+        let mut out = String::new();
+
+        out.push_str(&format!("class {} extends Component {{\n", comp.name));
+
+        // constructor
+        out.push_str("    constructor(props = {}) {\n");
+        out.push_str("        super();\n");
+        out.push_str("        this.props = props;\n");
+        out.push_str("        this._graph = new Graph();\n");
+        out.push_str("        this._stateNodes = {};\n");
+        out.push_str("        this._state = {};\n");
+
+        // Validate and set props
+        if !comp.props.is_empty() {
+            out.push_str("        // Props\n");
+            for prop in &comp.props {
+                let default_js = prop.default.as_deref()
+                    .map(|d| translate_el_to_js(d))
+                    .unwrap_or_else(|| "undefined".to_owned());
+                out.push_str(&format!(
+                    "        this._props_{name} = props.{name} !== undefined ? props.{name} : {default};\n",
+                    name = prop.name,
+                    default = default_js,
+                ));
+            }
+        }
+
+        // Seed state nodes
+        if !comp.state.is_empty() {
+            out.push_str("        // State nodes (Engram graph seeds)\n");
+            for s in &comp.state {
+                let initial_js = translate_el_to_js(&s.initial);
+                out.push_str(&format!(
+                    "        this._stateNodes['{name}'] = this._graph.seed({{ type: 'state', name: '{name}', content: {initial} }});\n",
+                    name = s.name,
+                    initial = initial_js,
+                ));
+                out.push_str(&format!(
+                    "        this._state['{name}'] = {initial};\n",
+                    name = s.name,
+                    initial = initial_js,
+                ));
+            }
+        }
+
+        // Subscribe to state node changes for reactive re-render
+        if !comp.state.is_empty() {
+            out.push_str("        // Subscribe to graph activation events\n");
+            out.push_str("        for (const [key, nodeId] of Object.entries(this._stateNodes)) {\n");
+            out.push_str("            this._graph.subscribe(nodeId, (node) => {\n");
+            out.push_str("                this._state[key] = node.content;\n");
+            out.push_str("                if (this._renderer) this._renderer.patch();\n");
+            out.push_str("            });\n");
+            out.push_str("        }\n");
+        }
+
+        out.push_str("    }\n\n");
+
+        // setState method
+        out.push_str("    setState(name, value) {\n");
+        out.push_str("        if (this._stateNodes[name] !== undefined) {\n");
+        out.push_str("            this._graph.update(this._stateNodes[name], value);\n");
+        out.push_str("        }\n");
+        out.push_str("    }\n\n");
+
+        // User-defined methods
+        for method in &comp.methods {
+            out.push_str(&self.gen_method(method, comp)?);
+            out.push('\n');
+        }
+
+        // render()
+        out.push_str("    render() {\n");
+        out.push_str("        const __self = this;\n");
+
+        // Expose state variables
+        for s in &comp.state {
+            out.push_str(&format!(
+                "        const {name} = this._state['{name}'];\n",
+                name = s.name,
+            ));
+        }
+        // Expose props
+        for p in &comp.props {
+            out.push_str(&format!(
+                "        const {name} = this._props_{name};\n",
+                name = p.name,
+            ));
+        }
+
+        out.push_str("        return `");
+        let template_js = self.gen_template_nodes(&comp.template.nodes, comp)?;
+        out.push_str(&template_js);
+        out.push_str("`;\n");
+        out.push_str("    }\n\n");
+
+        out.push_str("}\n");
+        Ok(out)
+    }
+
+    fn gen_method(&self, method: &Method, comp: &Component) -> CompileResult<String> {
+        let mut out = String::new();
+        let params: Vec<String> = method.params.iter()
+            .map(|(n, _)| n.clone())
+            .collect();
+
+        out.push_str(&format!(
+            "    {}({}) {{\n",
+            method.name,
+            params.join(", ")
+        ));
+
+        // Expose state in method body
+        for s in &comp.state {
+            out.push_str(&format!(
+                "        const {name} = this._state['{name}'];\n",
+                name = s.name
+            ));
+        }
+
+        // Translate body — simple pass-through with setState substitution
+        let body = translate_method_body(&method.body, comp);
+        for line in body.lines() {
+            out.push_str(&format!("        {}\n", line));
+        }
+
+        out.push_str("    }\n");
+        Ok(out)
+    }
+
+    fn gen_template_nodes(&self, nodes: &[TemplateNode], comp: &Component) -> CompileResult<String> {
+        let mut out = String::new();
+        for node in nodes {
+            out.push_str(&self.gen_template_node(node, comp)?);
+        }
+        Ok(out)
+    }
+
+    fn gen_template_node(&self, node: &TemplateNode, comp: &Component) -> CompileResult<String> {
+        match node {
+            TemplateNode::Text(t) => Ok(t.clone()),
+
+            TemplateNode::Interpolation(expr) => {
+                let js_expr = translate_interpolation(expr, comp);
+                Ok(format!("${{{}  }}", js_expr))
+            }
+
+            TemplateNode::Element { tag, attrs, children } => {
+                let mut out = format!("<{}", tag);
+
+                for attr in attrs {
+                    out.push_str(&self.gen_attr(attr, comp)?);
+                }
+
+                if children.is_empty() {
+                    out.push_str(&format!(" data-el-tag=\"{}\">", tag));
+                    out.push_str(&format!("</{}>", tag));
+                } else {
+                    out.push_str(&format!(" data-el-tag=\"{}\">", tag));
+                    out.push_str(&self.gen_template_nodes(children, comp)?);
+                    out.push_str(&format!("</{}>", tag));
+                }
+                Ok(out)
+            }
+
+            TemplateNode::Component { name, props } => {
+                // Render as inline component call
+                let mut prop_entries: Vec<String> = Vec::new();
+                for prop in props {
+                    match prop {
+                        Attr::Static { name: pn, value } => {
+                            prop_entries.push(format!("{}: \"{}\"", pn, value));
+                        }
+                        Attr::Dynamic { name: pn, expr } => {
+                            let js = translate_interpolation(expr, comp);
+                            prop_entries.push(format!("{}: {}", pn, js));
+                        }
+                        Attr::EventHandler { event, handler } => {
+                            let js = translate_handler(handler, comp);
+                            prop_entries.push(format!("on{}: {}", capitalize(event), js));
+                        }
+                        Attr::BoolAttr { name: pn, expr } => {
+                            prop_entries.push(format!("{}: {}", pn, expr));
+                        }
+                    }
+                }
+                let props_js = format!("{{ {} }}", prop_entries.join(", "));
+                Ok(format!("${{__self._child({}, {})}}", name, props_js))
+            }
+
+            TemplateNode::If { condition, then, else_ } => {
+                let cond_js = translate_interpolation(condition, comp);
+                let then_html = self.gen_template_nodes(then, comp)?;
+                let else_html = if let Some(els) = else_ {
+                    self.gen_template_nodes(els, comp)?
+                } else {
+                    String::new()
+                };
+                Ok(format!(
+                    "${{({}) ? `{}` : `{}`}}",
+                    cond_js, then_html, else_html
+                ))
+            }
+
+            TemplateNode::Each { items, item_name, children } => {
+                let items_js = translate_interpolation(items, comp);
+                let child_html = self.gen_template_nodes(children, comp)?;
+                // Generate a map over the array
+                Ok(format!(
+                    "${{({}).map(({}) => `{}`).join('')}}",
+                    items_js, item_name, child_html
+                ))
+            }
+
+            TemplateNode::Activate { query, result_name, children } => {
+                let child_html = self.gen_template_nodes(children, comp)?;
+                Ok(format!(
+                    "${{((__self._graph.search(\"{}\")) || []).map(({}) => `{}`).join('')}}",
+                    query, result_name, child_html
+                ))
+            }
+        }
+    }
+
+    fn gen_attr(&self, attr: &Attr, comp: &Component) -> CompileResult<String> {
+        match attr {
+            Attr::Static { name, value } => {
+                Ok(format!(" {}=\"{}\"", name, value))
+            }
+            Attr::Dynamic { name, expr } => {
+                let js = translate_interpolation(expr, comp);
+                Ok(format!(" {}=\"${{{}  }}\"", name, js))
+            }
+            Attr::BoolAttr { name, expr } => {
+                let js = translate_interpolation(expr, comp);
+                Ok(format!(" ${{({}) ? '{}' : ''  }}", js, name))
+            }
+            Attr::EventHandler { event, handler } => {
+                // We use data attributes to defer event binding
+                let js = translate_handler(handler, comp);
+                // Inline handler via data attribute — the renderer will bind these
+                Ok(format!(" data-el-{}=\"{}\"", event, escape_attr(&js)))
+            }
+        }
+    }
+}
+
+/// Translate an el-ui expression to JavaScript.
+/// Handles state assignments like `count = count + 1` → `__self.setState('count', count + 1)`
+fn translate_interpolation(expr: &str, comp: &Component) -> String {
+    translate_expr(expr, comp)
+}
+
+fn translate_expr(expr: &str, comp: &Component) -> String {
+    let state_names: Vec<&str> = comp.state.iter().map(|s| s.name.as_str()).collect();
+    // Arrow functions: passthrough
+    // State assignment: `name = value` → `__self.setState('name', value)`
+    let trimmed = expr.trim();
+
+    // Check for simple assignment: `ident = expr`
+    if let Some(result) = try_translate_assignment(trimmed, &state_names) {
+        return result;
+    }
+
+    // Arrow function containing assignment: `() => count = count + 1`
+    if trimmed.starts_with('(') || trimmed.starts_with("e =>") || trimmed.starts_with("() =>") {
+        return translate_arrow_fn(trimmed, &state_names);
+    }
+
+    // Otherwise pass through as-is
+    trimmed.to_owned()
+}
+
+fn try_translate_assignment(expr: &str, state_names: &[&str]) -> Option<String> {
+    // Match: `name = value` where name is a state variable
+    // Must not be `==` (equality)
+    let parts: Vec<&str> = expr.splitn(2, '=').collect();
+    if parts.len() == 2 {
+        let lhs = parts[0].trim();
+        let rhs = parts[1].trim();
+        // Ensure it's not `==` or `!=` or `<=` or `>=`
+        if !rhs.starts_with('=') && !lhs.ends_with('!') && !lhs.ends_with('<') && !lhs.ends_with('>') {
+            if state_names.contains(&lhs) {
+                return Some(format!("__self.setState('{}', {})", lhs, rhs));
+            }
+        }
+    }
+    None
+}
+
+fn translate_arrow_fn(expr: &str, state_names: &[&str]) -> String {
+    // Translate assignments inside arrow functions
+    // This is a best-effort string transformation
+    let mut result = expr.to_owned();
+    for name in state_names {
+        // Replace `name = ` with `__self.setState('name', ` ... `)` is too complex
+        // for a simple string replacement, but we can handle common patterns.
+        // Pattern: `name = expr` at end of arrow fn or in braces
+        let pat = format!("{} = ", name);
+        if let Some(idx) = result.find(&pat) {
+            // Check it's not ==
+            let after = &result[idx + pat.len()..];
+            // Simple case: `() => count = count + 1`
+            let prefix = &result[..idx];
+            result = format!("{}__self.setState('{}', {})", prefix, name, after.trim_end_matches(')'));
+        }
+    }
+    result
+}
+
+fn translate_handler(handler: &str, comp: &Component) -> String {
+    translate_expr(handler, comp)
+}
+
+/// Translate method body — replace bare state assignments with setState calls.
+fn translate_method_body(body: &str, comp: &Component) -> String {
+    let state_names: Vec<&str> = comp.state.iter().map(|s| s.name.as_str()).collect();
+    let mut lines: Vec<String> = Vec::new();
+    for line in body.lines() {
+        let trimmed = line.trim();
+        if let Some(translated) = try_translate_assignment(trimmed, &state_names) {
+            lines.push(format!("{};", translated));
+        } else if trimmed.starts_with("return ") {
+            lines.push(trimmed.to_owned());
+        } else {
+            lines.push(trimmed.to_owned());
+        }
+    }
+    lines.join("\n")
+}
+
+fn translate_el_to_js(expr: &str) -> String {
+    let s = expr.trim();
+    // Fn types — translate to null (not a valid JS value, handled at runtime)
+    if s.starts_with("Fn") { return "null".into(); }
+    // Boolean
+    if s == "true" { return "true".into(); }
+    if s == "false" { return "false".into(); }
+    // String literal
+    if s.starts_with('"') { return s.replace('"', "\"").to_owned(); }
+    // Numbers
+    if s.parse::<i64>().is_ok() { return s.to_owned(); }
+    if s.parse::<f64>().is_ok() { return s.to_owned(); }
+    // Empty string / void
+    if s.is_empty() { return "null".into(); }
+    s.to_owned()
+}
+
+fn capitalize(s: &str) -> String {
+    let mut c = s.chars();
+    match c.next() {
+        None => String::new(),
+        Some(f) => f.to_uppercase().collect::<String>() + c.as_str(),
+    }
+}
+
+fn escape_attr(s: &str) -> String {
+    s.replace('"', "&quot;").replace('\'', "&#39;")
+}

ui/crates/el-ui-compiler/src/error.rs

@@ -0,0 +1,15 @@
+use thiserror::Error;
+
+pub type CompileResult<T> = Result<T, CompileError>;
+
+#[derive(Debug, Error)]
+pub enum CompileError {
+    #[error("lexer error at position {pos}: {msg}")]
+    Lex { pos: usize, msg: String },
+
+    #[error("parse error: {msg}")]
+    Parse { msg: String },
+
+    #[error("codegen error: {msg}")]
+    Codegen { msg: String },
+}

ui/crates/el-ui-compiler/src/lexer.rs

@@ -0,0 +1,568 @@
+//! Lexer for el-ui component syntax.
+//!
+//! Produces a flat `Vec<Token>` from source text.
+//! The lexer is context-sensitive: it switches between "code mode"
+//! and "template mode" when it encounters the `template` keyword and `{` / `}`.
+
+use crate::error::{CompileError, CompileResult};
+
+#[derive(Debug, Clone, PartialEq)]
+pub enum Token {
+    // Keywords
+    Component,
+    Props,
+    State,
+    Fn,
+    Template,
+    If,
+    Else,
+    Return,
+
+    // Identifiers and literals
+    Ident(String),
+    StringLit(String),
+    IntLit(i64),
+    FloatLit(f64),
+    BoolLit(bool),
+
+    // Punctuation
+    LBrace,   // {
+    RBrace,   // }
+    LParen,   // (
+    RParen,   // )
+    LAngle,   // <
+    RAngle,   // >
+    LBracket, // [
+    RBracket, // ]
+    Colon,    // :
+    Semicolon,// ;
+    Comma,    // ,
+    Dot,      // .
+    Eq,       // =
+    EqEq,     // ==
+    Bang,     // !
+    BangEq,   // !=
+    Plus,     // +
+    Minus,    // -
+    Star,     // *
+    Slash,    // /
+    Arrow,    // ->
+    FatArrow, // =>
+    Ampersand,// &
+    Pipe,     // |
+    AmpAmp,   // &&
+    PipePipe, // ||
+    Question, // ?
+    Hash,     // #
+    At,       // @
+
+    // Template-specific
+    SlashIdent(String),     // /if  /each  /activate
+    ColonIdent(String),     // :else
+    HashIdent(String),      // #if  #each  #activate
+    OnColon(String),        // on:click  on:input  etc.
+    SelfClose,              // />
+    CloseTag(String),       // </div>
+
+    // Raw text in templates
+    RawText(String),
+
+    Eof,
+}
+
+pub fn tokenize(source: &str) -> CompileResult<Vec<Token>> {
+    let mut lexer = Lexer::new(source);
+    lexer.run()
+}
+
+struct Lexer<'a> {
+    src: &'a [u8],
+    pos: usize,
+}
+
+impl<'a> Lexer<'a> {
+    fn new(source: &'a str) -> Self {
+        Self { src: source.as_bytes(), pos: 0 }
+    }
+
+    fn peek(&self) -> Option<u8> {
+        self.src.get(self.pos).copied()
+    }
+
+    fn peek2(&self) -> Option<u8> {
+        self.src.get(self.pos + 1).copied()
+    }
+
+    fn advance(&mut self) -> Option<u8> {
+        let ch = self.src.get(self.pos).copied();
+        if ch.is_some() {
+            self.pos += 1;
+        }
+        ch
+    }
+
+    fn skip_whitespace_and_comments(&mut self) {
+        loop {
+            // Skip whitespace
+            while matches!(self.peek(), Some(b' ' | b'\t' | b'\n' | b'\r')) {
+                self.advance();
+            }
+            // Skip // line comments
+            if self.peek() == Some(b'/') && self.peek2() == Some(b'/') {
+                while self.peek().is_some() && self.peek() != Some(b'\n') {
+                    self.advance();
+                }
+                continue;
+            }
+            break;
+        }
+    }
+
+    fn read_ident(&mut self) -> String {
+        let start = self.pos;
+        while matches!(self.peek(), Some(b'a'..=b'z' | b'A'..=b'Z' | b'0'..=b'9' | b'_')) {
+            self.advance();
+        }
+        String::from_utf8_lossy(&self.src[start..self.pos]).into_owned()
+    }
+
+    fn read_string(&mut self) -> CompileResult<String> {
+        // Opening quote already consumed
+        let mut s = String::new();
+        loop {
+            match self.advance() {
+                None => return Err(CompileError::Lex { pos: self.pos, msg: "unterminated string".into() }),
+                Some(b'"') => break,
+                Some(b'\\') => {
+                    match self.advance() {
+                        Some(b'n') => s.push('\n'),
+                        Some(b't') => s.push('\t'),
+                        Some(b'r') => s.push('\r'),
+                        Some(b'"') => s.push('"'),
+                        Some(b'\\') => s.push('\\'),
+                        Some(b'0') => s.push('\0'),
+                        Some(c) => s.push(c as char),
+                        None => return Err(CompileError::Lex { pos: self.pos, msg: "unterminated escape".into() }),
+                    }
+                }
+                Some(c) => s.push(c as char),
+            }
+        }
+        Ok(s)
+    }
+
+    fn read_number(&mut self, first: u8) -> Token {
+        let mut s = String::new();
+        s.push(first as char);
+        while matches!(self.peek(), Some(b'0'..=b'9' | b'_')) {
+            let c = self.advance().unwrap();
+            if c != b'_' {
+                s.push(c as char);
+            }
+        }
+        if self.peek() == Some(b'.') && matches!(self.peek2(), Some(b'0'..=b'9')) {
+            s.push('.');
+            self.advance();
+            while matches!(self.peek(), Some(b'0'..=b'9')) {
+                s.push(self.advance().unwrap() as char);
+            }
+            Token::FloatLit(s.parse().unwrap_or(0.0))
+        } else {
+            Token::IntLit(s.parse().unwrap_or(0))
+        }
+    }
+
+    /// Read a template block — everything between the outer `{` and matching `}`
+    /// of `template { ... }`. Returns the raw text inside.
+    fn read_template_inner(&mut self) -> CompileResult<Vec<Token>> {
+        // We are positioned right after `template` keyword and the `{` that opened it.
+        // We tokenize the template body using a template-aware mini-lexer.
+        let mut toks: Vec<Token> = Vec::new();
+        let mut depth = 1i32; // we've consumed the opening {
+        let mut text_buf = String::new();
+
+        macro_rules! flush_text {
+            () => {
+                if !text_buf.is_empty() {
+                    let t = text_buf.trim().to_owned();
+                    if !t.is_empty() {
+                        toks.push(Token::RawText(t));
+                    }
+                    text_buf.clear();
+                }
+            };
+        }
+
+        loop {
+            match self.peek() {
+                None => return Err(CompileError::Lex { pos: self.pos, msg: "unterminated template block".into() }),
+                Some(b'{') => {
+                    self.advance();
+                    // Could be interpolation {expr}, or {#if}, {/if}, {:else}
+                    // Peek at what follows
+                    // Skip whitespace inside
+                    while matches!(self.peek(), Some(b' ' | b'\t')) {
+                        self.advance();
+                    }
+                    if self.peek() == Some(b'#') {
+                        // Block tag: {#if ...} {#each ...} {#activate ...}
+                        self.advance(); // consume #
+                        let kw = self.read_ident();
+                        flush_text!();
+                        toks.push(Token::HashIdent(kw));
+                        // Read the rest up to }
+                        let mut inner = String::new();
+                        let mut brace_d = 1i32;
+                        loop {
+                            match self.peek() {
+                                None => break,
+                                Some(b'{') => { brace_d += 1; inner.push('{'); self.advance(); }
+                                Some(b'}') => {
+                                    brace_d -= 1;
+                                    self.advance();
+                                    if brace_d == 0 { break; }
+                                    inner.push('}');
+                                }
+                                Some(c) => { inner.push(c as char); self.advance(); }
+                            }
+                        }
+                        toks.push(Token::RawText(inner.trim().to_owned()));
+                    } else if self.peek() == Some(b'/') {
+                        // Close tag: {/if} {/each} {/activate}
+                        self.advance(); // consume /
+                        let kw = self.read_ident();
+                        flush_text!();
+                        toks.push(Token::SlashIdent(kw));
+                        while self.peek() == Some(b'}') { self.advance(); break; }
+                    } else if self.peek() == Some(b':') {
+                        // {:else}
+                        self.advance(); // consume :
+                        let kw = self.read_ident();
+                        flush_text!();
+                        toks.push(Token::ColonIdent(kw));
+                        while self.peek() == Some(b'}') { self.advance(); break; }
+                    } else {
+                        // Regular interpolation or outer brace tracking
+                        // Check if this closes the template
+                        if depth == 1 && self.peek() == Some(b'}') {
+                            // Empty brace—skip
+                            self.advance();
+                            let _ = depth - 1; // depth tracked by outer loop
+                            break;
+                        }
+                        // Read the expression until matching }
+                        let mut expr = String::new();
+                        let mut brace_d = 1i32;
+                        loop {
+                            match self.peek() {
+                                None => break,
+                                Some(b'{') => { brace_d += 1; expr.push('{'); self.advance(); }
+                                Some(b'}') => {
+                                    brace_d -= 1;
+                                    self.advance();
+                                    if brace_d == 0 { break; }
+                                    expr.push('}');
+                                }
+                                Some(c) => { expr.push(c as char); self.advance(); }
+                            }
+                        }
+                        let expr = expr.trim().to_owned();
+                        if !expr.is_empty() {
+                            flush_text!();
+                            toks.push(Token::LBrace);
+                            toks.push(Token::RawText(expr));
+                            toks.push(Token::RBrace);
+                        }
+                    }
+                }
+                Some(b'}') => {
+                    depth -= 1;
+                    self.advance();
+                    if depth == 0 {
+                        flush_text!();
+                        break;
+                    }
+                    text_buf.push('}');
+                }
+                Some(b'<') => {
+                    // HTML element or close tag
+                    self.advance();
+                    if self.peek() == Some(b'/') {
+                        // Close tag </div>
+                        self.advance();
+                        let tag = self.read_tag_name();
+                        while self.peek() != Some(b'>') && self.peek().is_some() {
+                            self.advance();
+                        }
+                        self.advance(); // consume >
+                        flush_text!();
+                        toks.push(Token::CloseTag(tag));
+                    } else {
+                        // Open tag
+                        let tag = self.read_tag_name();
+                        flush_text!();
+                        toks.push(Token::LAngle);
+                        toks.push(Token::Ident(tag));
+                        // Read attributes
+                        self.read_attrs_into(&mut toks)?;
+                    }
+                }
+                Some(b'\n' | b'\r') => {
+                    self.advance();
+                    text_buf.push(' ');
+                }
+                Some(c) => {
+                    text_buf.push(c as char);
+                    self.advance();
+                }
+            }
+        }
+
+        Ok(toks)
+    }
+
+    fn read_tag_name(&mut self) -> String {
+        while matches!(self.peek(), Some(b' ' | b'\t' | b'\n')) {
+            self.advance();
+        }
+        let start = self.pos;
+        while matches!(self.peek(), Some(b'a'..=b'z' | b'A'..=b'Z' | b'0'..=b'9' | b'-' | b'_')) {
+            self.advance();
+        }
+        String::from_utf8_lossy(&self.src[start..self.pos]).into_owned()
+    }
+
+    /// Read attributes until `>` or `/>`.
+    fn read_attrs_into(&mut self, toks: &mut Vec<Token>) -> CompileResult<()> {
+        loop {
+            // Skip whitespace
+            while matches!(self.peek(), Some(b' ' | b'\t' | b'\n' | b'\r')) {
+                self.advance();
+            }
+            match self.peek() {
+                None => break,
+                Some(b'/') if self.peek2() == Some(b'>') => {
+                    self.advance(); self.advance();
+                    toks.push(Token::SelfClose);
+                    break;
+                }
+                Some(b'>') => {
+                    self.advance();
+                    toks.push(Token::RAngle);
+                    break;
+                }
+                Some(b'o') if self.src.get(self.pos..self.pos+3) == Some(b"on:") => {
+                    // on:event={handler}
+                    self.pos += 3; // skip "on:"
+                    let event = self.read_tag_name();
+                    // skip whitespace and =
+                    while matches!(self.peek(), Some(b' ' | b'=')) { self.advance(); }
+                    // read {expr}
+                    let expr = if self.peek() == Some(b'{') {
+                        self.advance();
+                        self.read_until_brace_close()?
+                    } else {
+                        self.read_quoted_string()?
+                    };
+                    toks.push(Token::OnColon(event));
+                    toks.push(Token::RawText(expr));
+                }
+                _ => {
+                    // Regular attribute: name="val" or name={expr}
+                    let name = self.read_attr_name();
+                    if name.is_empty() { break; }
+                    // Skip whitespace and =
+                    while matches!(self.peek(), Some(b' ' | b'\t')) { self.advance(); }
+                    if self.peek() != Some(b'=') {
+                        // Boolean attribute with no value
+                        toks.push(Token::Ident(name));
+                        continue;
+                    }
+                    self.advance(); // consume =
+                    while matches!(self.peek(), Some(b' ' | b'\t')) { self.advance(); }
+                    let value = if self.peek() == Some(b'"') {
+                        self.advance(); // consume "
+                        let s = self.read_string()?;
+                        toks.push(Token::Ident(name.clone()));
+                        toks.push(Token::Eq);
+                        toks.push(Token::StringLit(s));
+                        continue;
+                    } else if self.peek() == Some(b'{') {
+                        self.advance();
+                        self.read_until_brace_close()?
+                    } else {
+                        self.read_attr_name()
+                    };
+                    toks.push(Token::Ident(name));
+                    toks.push(Token::Eq);
+                    toks.push(Token::RawText(value));
+                }
+            }
+        }
+        Ok(())
+    }
+
+    fn read_attr_name(&mut self) -> String {
+        let start = self.pos;
+        while matches!(self.peek(), Some(b'a'..=b'z' | b'A'..=b'Z' | b'0'..=b'9' | b'-' | b'_' | b':')) {
+            self.advance();
+        }
+        String::from_utf8_lossy(&self.src[start..self.pos]).into_owned()
+    }
+
+    fn read_quoted_string(&mut self) -> CompileResult<String> {
+        if self.peek() == Some(b'"') {
+            self.advance();
+            self.read_string()
+        } else {
+            Ok(self.read_attr_name())
+        }
+    }
+
+    fn read_until_brace_close(&mut self) -> CompileResult<String> {
+        let mut s = String::new();
+        let mut depth = 1i32;
+        loop {
+            match self.peek() {
+                None => return Err(CompileError::Lex { pos: self.pos, msg: "unterminated {".into() }),
+                Some(b'{') => { depth += 1; s.push('{'); self.advance(); }
+                Some(b'}') => {
+                    depth -= 1;
+                    self.advance();
+                    if depth == 0 { break; }
+                    s.push('}');
+                }
+                Some(c) => { s.push(c as char); self.advance(); }
+            }
+        }
+        Ok(s)
+    }
+
+    fn run(&mut self) -> CompileResult<Vec<Token>> {
+        let mut tokens: Vec<Token> = Vec::new();
+
+        loop {
+            self.skip_whitespace_and_comments();
+            if self.peek().is_none() {
+                tokens.push(Token::Eof);
+                break;
+            }
+
+            let ch = self.advance().unwrap();
+
+            match ch {
+                b'a'..=b'z' | b'A'..=b'Z' | b'_' => {
+                    let mut ident = String::new();
+                    ident.push(ch as char);
+                    while matches!(self.peek(), Some(b'a'..=b'z' | b'A'..=b'Z' | b'0'..=b'9' | b'_')) {
+                        ident.push(self.advance().unwrap() as char);
+                    }
+                    let tok = match ident.as_str() {
+                        "component" => Token::Component,
+                        "props" => Token::Props,
+                        "state" => Token::State,
+                        "fn" => Token::Fn,
+                        "template" => Token::Template,
+                        "if" => Token::If,
+                        "else" => Token::Else,
+                        "return" => Token::Return,
+                        "true" => Token::BoolLit(true),
+                        "false" => Token::BoolLit(false),
+                        other => Token::Ident(other.to_owned()),
+                    };
+                    // Special handling: after `template`, read the block specially
+                    if tok == Token::Template {
+                        tokens.push(tok);
+                        self.skip_whitespace_and_comments();
+                        if self.peek() == Some(b'{') {
+                            self.advance(); // consume {
+                            tokens.push(Token::LBrace);
+                            let inner = self.read_template_inner()?;
+                            tokens.extend(inner);
+                            tokens.push(Token::RBrace);
+                        }
+                    } else {
+                        tokens.push(tok);
+                    }
+                }
+                b'"' => {
+                    let s = self.read_string()?;
+                    tokens.push(Token::StringLit(s));
+                }
+                b'0'..=b'9' => {
+                    let tok = self.read_number(ch);
+                    tokens.push(tok);
+                }
+                b'{' => tokens.push(Token::LBrace),
+                b'}' => tokens.push(Token::RBrace),
+                b'(' => tokens.push(Token::LParen),
+                b')' => tokens.push(Token::RParen),
+                b'[' => tokens.push(Token::LBracket),
+                b']' => tokens.push(Token::RBracket),
+                b':' => tokens.push(Token::Colon),
+                b';' => tokens.push(Token::Semicolon),
+                b',' => tokens.push(Token::Comma),
+                b'.' => tokens.push(Token::Dot),
+                b'=' => {
+                    if self.peek() == Some(b'=') {
+                        self.advance(); tokens.push(Token::EqEq);
+                    } else if self.peek() == Some(b'>') {
+                        self.advance(); tokens.push(Token::FatArrow);
+                    } else {
+                        tokens.push(Token::Eq);
+                    }
+                }
+                b'!' => {
+                    if self.peek() == Some(b'=') {
+                        self.advance(); tokens.push(Token::BangEq);
+                    } else {
+                        tokens.push(Token::Bang);
+                    }
+                }
+                b'+' => tokens.push(Token::Plus),
+                b'-' => {
+                    if self.peek() == Some(b'>') {
+                        self.advance(); tokens.push(Token::Arrow);
+                    } else {
+                        tokens.push(Token::Minus);
+                    }
+                }
+                b'*' => tokens.push(Token::Star),
+                b'/' => {
+                    if self.peek() == Some(b'/') {
+                        // Line comment (shouldn't reach here after skip, but guard)
+                        while self.peek().is_some() && self.peek() != Some(b'\n') {
+                            self.advance();
+                        }
+                    } else {
+                        tokens.push(Token::Slash);
+                    }
+                }
+                b'&' => {
+                    if self.peek() == Some(b'&') {
+                        self.advance(); tokens.push(Token::AmpAmp);
+                    } else {
+                        tokens.push(Token::Ampersand);
+                    }
+                }
+                b'|' => {
+                    if self.peek() == Some(b'|') {
+                        self.advance(); tokens.push(Token::PipePipe);
+                    } else {
+                        tokens.push(Token::Pipe);
+                    }
+                }
+                b'?' => tokens.push(Token::Question),
+                b'#' => tokens.push(Token::Hash),
+                b'@' => tokens.push(Token::At),
+                b'<' => tokens.push(Token::LAngle),
+                b'>' => tokens.push(Token::RAngle),
+                _ => {
+                    // Ignore unknown characters (whitespace already skipped)
+                }
+            }
+        }
+
+        Ok(tokens)
+    }
+}

ui/crates/el-ui-compiler/src/lib.rs

@@ -0,0 +1,77 @@
+//! el-ui-compiler — Transforms `.el` component files into JavaScript.
+//!
+//! Pipeline:
+//!   source text → lexer → tokens → parser → AST → codegen → JavaScript
+//!
+//! The output JavaScript uses the el-ui runtime (`el-ui.js`) to register
+//! components, manage a spreading-activation graph for state, and patch the DOM.
+
+pub mod ast;
+pub mod codegen;
+pub mod error;
+pub mod lexer;
+pub mod parser;
+
+pub use ast::{Attr, Component, Method, PropDef, StateDef, Template, TemplateNode};
+
+#[cfg(test)]
+mod tests;
+pub use codegen::Codegen;
+pub use error::{CompileError, CompileResult};
+
+/// High-level compiler entry point.
+pub struct Compiler {
+    /// Runtime import path (default: `./el-ui.js`)
+    pub runtime_path: String,
+}
+
+impl Default for Compiler {
+    fn default() -> Self {
+        Self { runtime_path: "./el-ui.js".into() }
+    }
+}
+
+impl Compiler {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    pub fn with_runtime_path(mut self, path: impl Into<String>) -> Self {
+        self.runtime_path = path.into();
+        self
+    }
+
+    /// Compile a single `.el` source file containing one or more components.
+    /// Returns the JavaScript module string.
+    pub fn compile_component(&self, source: &str) -> CompileResult<String> {
+        let tokens = lexer::tokenize(source)?;
+        let components = parser::parse(&tokens)?;
+        let gen = Codegen::new(&self.runtime_path);
+        gen.generate(&components)
+    }
+
+    /// Compile an app entry point, pulling in named component sources.
+    /// `components` is a slice of `(name, source)` pairs.
+    /// Returns a single JavaScript module that imports from the runtime.
+    pub fn compile_app(
+        &self,
+        entry_source: &str,
+        components: &[(&str, &str)],
+    ) -> CompileResult<String> {
+        let mut all_components: Vec<Component> = Vec::new();
+
+        for (_name, src) in components {
+            let tokens = lexer::tokenize(src)?;
+            let mut parsed = parser::parse(&tokens)?;
+            all_components.append(&mut parsed);
+        }
+
+        // Parse entry last (may reference previously defined components)
+        let entry_tokens = lexer::tokenize(entry_source)?;
+        let mut entry_parsed = parser::parse(&entry_tokens)?;
+        all_components.append(&mut entry_parsed);
+
+        let gen = Codegen::new(&self.runtime_path);
+        gen.generate(&all_components)
+    }
+}

ui/crates/el-ui-compiler/src/main.rs

@@ -0,0 +1,46 @@
+//! el-ui-compiler CLI
+//!
+//! Usage:
+//!   el-ui-compiler <input.el> [-o <output.js>]
+
+use std::fs;
+use std::path::PathBuf;
+
+fn main() {
+    let args: Vec<String> = std::env::args().collect();
+
+    if args.len() < 2 {
+        eprintln!("Usage: el-ui-compiler <input.el> [-o output.js]");
+        std::process::exit(1);
+    }
+
+    let input = PathBuf::from(&args[1]);
+    let output = if args.len() >= 4 && args[2] == "-o" {
+        PathBuf::from(&args[3])
+    } else {
+        input.with_extension("js")
+    };
+
+    let source = match fs::read_to_string(&input) {
+        Ok(s) => s,
+        Err(e) => {
+            eprintln!("Error reading {}: {}", input.display(), e);
+            std::process::exit(1);
+        }
+    };
+
+    let compiler = el_ui_compiler::Compiler::new();
+    match compiler.compile_component(&source) {
+        Ok(js) => {
+            if let Err(e) = fs::write(&output, js) {
+                eprintln!("Error writing {}: {}", output.display(), e);
+                std::process::exit(1);
+            }
+            println!("Compiled {} -> {}", input.display(), output.display());
+        }
+        Err(e) => {
+            eprintln!("Compile error: {}", e);
+            std::process::exit(1);
+        }
+    }
+}

ui/crates/el-ui-compiler/src/parser.rs

@@ -0,0 +1,640 @@
+//! Parser for el-ui component files.
+//!
+//! Hand-written recursive descent. Produces a `Vec<Component>` from a token stream.
+
+use crate::ast::*;
+use crate::error::{CompileError, CompileResult};
+use crate::lexer::Token;
+
+pub fn parse(tokens: &[Token]) -> CompileResult<Vec<Component>> {
+    let mut p = Parser::new(tokens);
+    p.parse_program()
+}
+
+struct Parser<'a> {
+    tokens: &'a [Token],
+    pos: usize,
+}
+
+impl<'a> Parser<'a> {
+    fn new(tokens: &'a [Token]) -> Self {
+        Self { tokens, pos: 0 }
+    }
+
+    fn peek(&self) -> &Token {
+        self.tokens.get(self.pos).unwrap_or(&Token::Eof)
+    }
+
+    fn advance(&mut self) -> &Token {
+        let tok = self.tokens.get(self.pos).unwrap_or(&Token::Eof);
+        if self.pos < self.tokens.len() {
+            self.pos += 1;
+        }
+        tok
+    }
+
+    fn expect(&mut self, expected: &Token) -> CompileResult<()> {
+        let tok = self.advance();
+        if tok == expected {
+            Ok(())
+        } else {
+            Err(CompileError::Parse {
+                msg: format!("expected {:?}, got {:?}", expected, tok),
+            })
+        }
+    }
+
+    fn expect_ident(&mut self) -> CompileResult<String> {
+        match self.advance().clone() {
+            Token::Ident(s) => Ok(s),
+            other => Err(CompileError::Parse {
+                msg: format!("expected identifier, got {:?}", other),
+            }),
+        }
+    }
+
+    fn parse_program(&mut self) -> CompileResult<Vec<Component>> {
+        let mut components = Vec::new();
+        while *self.peek() != Token::Eof {
+            match self.peek() {
+                Token::Component => {
+                    components.push(self.parse_component()?);
+                }
+                _ => {
+                    // Skip unknown top-level tokens
+                    self.advance();
+                }
+            }
+        }
+        Ok(components)
+    }
+
+    fn parse_component(&mut self) -> CompileResult<Component> {
+        self.expect(&Token::Component)?;
+        let name = self.expect_ident()?;
+        self.expect(&Token::LBrace)?;
+
+        let mut props = Vec::new();
+        let mut state = Vec::new();
+        let mut methods = Vec::new();
+        let mut template = Template { nodes: Vec::new() };
+
+        loop {
+            match self.peek().clone() {
+                Token::RBrace => {
+                    self.advance();
+                    break;
+                }
+                Token::Eof => break,
+                Token::Props => {
+                    self.advance();
+                    props = self.parse_prop_block()?;
+                }
+                Token::State => {
+                    self.advance();
+                    state = self.parse_state_block()?;
+                }
+                Token::Fn => {
+                    methods.push(self.parse_method()?);
+                }
+                Token::Template => {
+                    self.advance(); // consume `template`
+                    template = self.parse_template_block()?;
+                }
+                _ => {
+                    self.advance(); // skip unknown
+                }
+            }
+        }
+
+        Ok(Component { name, props, state, methods, template })
+    }
+
+    fn parse_prop_block(&mut self) -> CompileResult<Vec<PropDef>> {
+        self.expect(&Token::LBrace)?;
+        let mut props = Vec::new();
+        loop {
+            match self.peek().clone() {
+                Token::RBrace | Token::Eof => {
+                    self.advance();
+                    break;
+                }
+                Token::Ident(name) => {
+                    self.advance();
+                    self.expect(&Token::Colon)?;
+                    let type_name = self.parse_type_name()?;
+                    let default = if *self.peek() == Token::Eq {
+                        self.advance();
+                        Some(self.parse_default_value()?)
+                    } else {
+                        None
+                    };
+                    // Optional trailing comma/semicolon
+                    if matches!(self.peek(), Token::Comma | Token::Semicolon) {
+                        self.advance();
+                    }
+                    props.push(PropDef { name, type_name, default });
+                }
+                _ => {
+                    self.advance();
+                }
+            }
+        }
+        Ok(props)
+    }
+
+    fn parse_state_block(&mut self) -> CompileResult<Vec<StateDef>> {
+        self.expect(&Token::LBrace)?;
+        let mut defs = Vec::new();
+        loop {
+            match self.peek().clone() {
+                Token::RBrace | Token::Eof => {
+                    self.advance();
+                    break;
+                }
+                Token::Ident(name) => {
+                    self.advance();
+                    self.expect(&Token::Colon)?;
+                    let type_name = self.parse_type_name()?;
+                    self.expect(&Token::Eq)?;
+                    let initial = self.parse_default_value()?;
+                    if matches!(self.peek(), Token::Comma | Token::Semicolon) {
+                        self.advance();
+                    }
+                    defs.push(StateDef { name, type_name, initial });
+                }
+                _ => {
+                    self.advance();
+                }
+            }
+        }
+        Ok(defs)
+    }
+
+    fn parse_type_name(&mut self) -> CompileResult<String> {
+        let name = match self.peek().clone() {
+            Token::Ident(s) => { self.advance(); s }
+            other => return Err(CompileError::Parse {
+                msg: format!("expected type name, got {:?}", other),
+            }),
+        };
+        // Check for array type [T] → already consumed base name, but array types
+        // start with [ so this handles bare type names only
+        Ok(name)
+    }
+
+    fn parse_default_value(&mut self) -> CompileResult<String> {
+        // Collect tokens until comma, semicolon, or next top-level item
+        // We need to handle nested structures like Fn types, etc.
+        let mut result = String::new();
+        let mut depth = 0i32;
+        loop {
+            match self.peek() {
+                Token::Eof => break,
+                Token::LParen | Token::LBrace | Token::LBracket => {
+                    depth += 1;
+                    let tok = self.advance();
+                    result.push_str(&token_to_str(tok));
+                }
+                Token::RParen | Token::RBrace | Token::RBracket => {
+                    if depth == 0 { break; }
+                    depth -= 1;
+                    let tok = self.advance();
+                    result.push_str(&token_to_str(tok));
+                }
+                Token::Comma | Token::Semicolon if depth == 0 => break,
+                // These signal end of the value if at depth 0
+                Token::Ident(_) | Token::Props | Token::State | Token::Fn
+                | Token::Template | Token::Component if depth == 0 => break,
+                _ => {
+                    let tok = self.advance();
+                    result.push_str(&token_to_str(tok));
+                    result.push(' ');
+                }
+            }
+        }
+        Ok(result.trim().to_owned())
+    }
+
+    fn parse_method(&mut self) -> CompileResult<Method> {
+        self.expect(&Token::Fn)?;
+        let name = self.expect_ident()?;
+        self.expect(&Token::LParen)?;
+
+        let mut params: Vec<(String, String)> = Vec::new();
+        loop {
+            match self.peek().clone() {
+                Token::RParen | Token::Eof => { self.advance(); break; }
+                Token::Ident(pname) => {
+                    self.advance();
+                    self.expect(&Token::Colon)?;
+                    let ptype = self.parse_type_name()?;
+                    params.push((pname, ptype));
+                    if *self.peek() == Token::Comma { self.advance(); }
+                }
+                _ => { self.advance(); }
+            }
+        }
+
+        self.expect(&Token::Arrow)?;
+        let return_type = self.parse_type_name()?;
+
+        // Read the method body between { }
+        let body = self.read_block_raw()?;
+
+        Ok(Method { name, params, return_type, body })
+    }
+
+    /// Read everything between { and matching } as raw text.
+    fn read_block_raw(&mut self) -> CompileResult<String> {
+        self.expect(&Token::LBrace)?;
+        let mut result = String::new();
+        let mut depth = 1i32;
+        loop {
+            match self.peek() {
+                Token::Eof => break,
+                Token::LBrace => { depth += 1; self.advance(); result.push_str("{ "); }
+                Token::RBrace => {
+                    depth -= 1;
+                    self.advance();
+                    if depth == 0 { break; }
+                    result.push_str("} ");
+                }
+                tok => {
+                    result.push_str(&token_to_str(tok));
+                    result.push(' ');
+                    self.advance();
+                }
+            }
+        }
+        Ok(result.trim().to_owned())
+    }
+
+    /// Parse the template block. At this point the lexer has already expanded
+    /// the template into special tokens (LBrace/RBrace wrapping interpolations,
+    /// LAngle/Ident for elements, etc.).
+    fn parse_template_block(&mut self) -> CompileResult<Template> {
+        self.expect(&Token::LBrace)?;
+        let nodes = self.parse_template_nodes()?;
+        // The matching RBrace is consumed inside parse_template_nodes
+        Ok(Template { nodes })
+    }
+
+    fn parse_template_nodes(&mut self) -> CompileResult<Vec<TemplateNode>> {
+        let mut nodes: Vec<TemplateNode> = Vec::new();
+        loop {
+            match self.peek().clone() {
+                Token::Eof | Token::RBrace => {
+                    self.advance();
+                    break;
+                }
+                Token::CloseTag(_) => {
+                    // Consumed by parent element parser
+                    break;
+                }
+                Token::LAngle => {
+                    nodes.push(self.parse_element()?);
+                }
+                Token::LBrace => {
+                    // Interpolation: { RawText }
+                    self.advance(); // consume {
+                    if let Token::RawText(expr) = self.peek().clone() {
+                        self.advance();
+                        nodes.push(TemplateNode::Interpolation(expr));
+                        if *self.peek() == Token::RBrace { self.advance(); }
+                    } else {
+                        nodes.push(TemplateNode::Text("{".into()));
+                    }
+                }
+                Token::HashIdent(kw) => {
+                    let kw = kw.clone();
+                    self.advance();
+                    nodes.push(self.parse_block_tag(&kw)?);
+                }
+                Token::SlashIdent(_) => {
+                    // End of a block — caller handles
+                    break;
+                }
+                Token::ColonIdent(_) => {
+                    // {:else} — caller handles
+                    break;
+                }
+                Token::RawText(t) => {
+                    let t = t.clone();
+                    self.advance();
+                    if !t.is_empty() {
+                        nodes.push(TemplateNode::Text(t));
+                    }
+                }
+                _ => {
+                    self.advance(); // skip
+                }
+            }
+        }
+        Ok(nodes)
+    }
+
+    fn parse_element(&mut self) -> CompileResult<TemplateNode> {
+        self.expect(&Token::LAngle)?;
+        let tag = self.expect_ident()?;
+
+        let is_component = tag.chars().next().map(|c| c.is_uppercase()).unwrap_or(false);
+
+        let mut attrs: Vec<Attr> = Vec::new();
+
+        // Parse attributes until > or />
+        let mut self_closing = false;
+        loop {
+            match self.peek().clone() {
+                Token::SelfClose => {
+                    self.advance();
+                    self_closing = true;
+                    break;
+                }
+                Token::RAngle => {
+                    self.advance();
+                    break;
+                }
+                Token::Eof => break,
+                Token::OnColon(event) => {
+                    let event = event.clone();
+                    self.advance();
+                    let handler = if let Token::RawText(h) = self.peek().clone() {
+                        self.advance();
+                        h
+                    } else {
+                        String::new()
+                    };
+                    attrs.push(Attr::EventHandler { event, handler });
+                }
+                Token::Ident(name) => {
+                    let name = name.clone();
+                    self.advance();
+                    if *self.peek() == Token::Eq {
+                        self.advance(); // consume =
+                        match self.peek().clone() {
+                            Token::StringLit(val) => {
+                                self.advance();
+                                attrs.push(Attr::Static { name, value: val });
+                            }
+                            Token::RawText(expr) => {
+                                self.advance();
+                                // Determine if it's a bool attr
+                                // Simple heuristic: if name is "disabled", "checked", "readonly"
+                                let bool_attrs = ["disabled", "checked", "readonly", "required", "multiple", "selected"];
+                                if bool_attrs.contains(&name.as_str()) {
+                                    attrs.push(Attr::BoolAttr { name, expr });
+                                } else {
+                                    attrs.push(Attr::Dynamic { name, expr });
+                                }
+                            }
+                            _ => {
+                                attrs.push(Attr::Static { name, value: String::new() });
+                            }
+                        }
+                    } else {
+                        // Standalone attribute (boolean)
+                        attrs.push(Attr::BoolAttr { name, expr: "true".into() });
+                    }
+                }
+                _ => {
+                    self.advance();
+                }
+            }
+        }
+
+        if self_closing || is_component {
+            if is_component {
+                return Ok(TemplateNode::Component { name: tag, props: attrs });
+            }
+            return Ok(TemplateNode::Element { tag, attrs, children: Vec::new() });
+        }
+
+        // Read children until </tag>
+        let children = self.parse_template_children(&tag)?;
+
+        Ok(TemplateNode::Element { tag, attrs, children })
+    }
+
+    fn parse_template_children(&mut self, close_tag: &str) -> CompileResult<Vec<TemplateNode>> {
+        let mut children: Vec<TemplateNode> = Vec::new();
+        loop {
+            match self.peek().clone() {
+                Token::Eof => break,
+                Token::RBrace => break,
+                Token::CloseTag(tag) => {
+                    self.advance();
+                    if tag == close_tag || tag.is_empty() {
+                        break;
+                    }
+                    // Mismatched close tag — ignore
+                }
+                Token::LAngle => {
+                    children.push(self.parse_element()?);
+                }
+                Token::LBrace => {
+                    self.advance();
+                    if let Token::RawText(expr) = self.peek().clone() {
+                        self.advance();
+                        children.push(TemplateNode::Interpolation(expr));
+                        if *self.peek() == Token::RBrace { self.advance(); }
+                    }
+                }
+                Token::HashIdent(kw) => {
+                    let kw = kw.clone();
+                    self.advance();
+                    children.push(self.parse_block_tag(&kw)?);
+                }
+                Token::SlashIdent(_) | Token::ColonIdent(_) => break,
+                Token::RawText(t) => {
+                    let t = t.clone();
+                    self.advance();
+                    if !t.trim().is_empty() {
+                        children.push(TemplateNode::Text(t));
+                    }
+                }
+                _ => { self.advance(); }
+            }
+        }
+        Ok(children)
+    }
+
+    fn parse_block_tag(&mut self, kw: &str) -> CompileResult<TemplateNode> {
+        match kw {
+            "if" => self.parse_if_block(),
+            "each" => self.parse_each_block(),
+            "activate" => self.parse_activate_block(),
+            _ => Err(CompileError::Parse { msg: format!("unknown block tag: #{}", kw) }),
+        }
+    }
+
+    fn parse_if_block(&mut self) -> CompileResult<TemplateNode> {
+        // Next token should be RawText with the condition
+        let condition = if let Token::RawText(cond) = self.peek().clone() {
+            self.advance();
+            cond
+        } else {
+            return Err(CompileError::Parse { msg: "expected condition after {#if}".into() });
+        };
+
+        let then = self.parse_template_nodes_until_close_or_else()?;
+
+        let else_ = if let Token::ColonIdent(kw) = self.peek().clone() {
+            if kw == "else" {
+                self.advance();
+                Some(self.parse_template_nodes_until_close_or_else()?)
+            } else {
+                None
+            }
+        } else {
+            None
+        };
+
+        // Consume {/if}
+        if let Token::SlashIdent(kw) = self.peek().clone() {
+            if kw == "if" { self.advance(); }
+        }
+
+        Ok(TemplateNode::If { condition, then, else_ })
+    }
+
+    fn parse_each_block(&mut self) -> CompileResult<TemplateNode> {
+        // RawText: "items as item"
+        let raw = if let Token::RawText(r) = self.peek().clone() {
+            self.advance();
+            r
+        } else {
+            return Err(CompileError::Parse { msg: "expected 'items as item' after {#each}".into() });
+        };
+
+        let (items, item_name) = parse_each_header(&raw)?;
+        let children = self.parse_template_nodes_until_close_or_else()?;
+
+        if let Token::SlashIdent(kw) = self.peek().clone() {
+            if kw == "each" { self.advance(); }
+        }
+
+        Ok(TemplateNode::Each { items, item_name, children })
+    }
+
+    fn parse_activate_block(&mut self) -> CompileResult<TemplateNode> {
+        // RawText: `"query" as results`
+        let raw = if let Token::RawText(r) = self.peek().clone() {
+            self.advance();
+            r
+        } else {
+            return Err(CompileError::Parse { msg: "expected query after {#activate}".into() });
+        };
+
+        let (query, result_name) = parse_activate_header(&raw)?;
+        let children = self.parse_template_nodes_until_close_or_else()?;
+
+        if let Token::SlashIdent(kw) = self.peek().clone() {
+            if kw == "activate" { self.advance(); }
+        }
+
+        Ok(TemplateNode::Activate { query, result_name, children })
+    }
+
+    fn parse_template_nodes_until_close_or_else(&mut self) -> CompileResult<Vec<TemplateNode>> {
+        let mut nodes: Vec<TemplateNode> = Vec::new();
+        loop {
+            match self.peek().clone() {
+                Token::Eof | Token::RBrace => break,
+                Token::SlashIdent(_) | Token::ColonIdent(_) => break,
+                Token::CloseTag(_) => break,
+                Token::LAngle => nodes.push(self.parse_element()?),
+                Token::LBrace => {
+                    self.advance();
+                    if let Token::RawText(expr) = self.peek().clone() {
+                        self.advance();
+                        nodes.push(TemplateNode::Interpolation(expr));
+                        if *self.peek() == Token::RBrace { self.advance(); }
+                    }
+                }
+                Token::HashIdent(kw) => {
+                    let kw = kw.clone();
+                    self.advance();
+                    nodes.push(self.parse_block_tag(&kw)?);
+                }
+                Token::RawText(t) => {
+                    let t = t.clone();
+                    self.advance();
+                    if !t.trim().is_empty() {
+                        nodes.push(TemplateNode::Text(t));
+                    }
+                }
+                _ => { self.advance(); }
+            }
+        }
+        Ok(nodes)
+    }
+}
+
+fn token_to_str(tok: &Token) -> String {
+    match tok {
+        Token::Ident(s) => s.clone(),
+        Token::StringLit(s) => format!("\"{}\"", s),
+        Token::IntLit(n) => n.to_string(),
+        Token::FloatLit(f) => f.to_string(),
+        Token::BoolLit(b) => b.to_string(),
+        Token::LBrace => "{".into(),
+        Token::RBrace => "}".into(),
+        Token::LParen => "(".into(),
+        Token::RParen => ")".into(),
+        Token::LBracket => "[".into(),
+        Token::RBracket => "]".into(),
+        Token::Colon => ":".into(),
+        Token::Semicolon => ";".into(),
+        Token::Comma => ",".into(),
+        Token::Dot => ".".into(),
+        Token::Eq => "=".into(),
+        Token::EqEq => "==".into(),
+        Token::Bang => "!".into(),
+        Token::BangEq => "!=".into(),
+        Token::Plus => "+".into(),
+        Token::Minus => "-".into(),
+        Token::Star => "*".into(),
+        Token::Slash => "/".into(),
+        Token::Arrow => "->".into(),
+        Token::FatArrow => "=>".into(),
+        Token::AmpAmp => "&&".into(),
+        Token::PipePipe => "||".into(),
+        Token::Question => "?".into(),
+        Token::RawText(s) => s.clone(),
+        Token::Return => "return".into(),
+        Token::If => "if".into(),
+        Token::Else => "else".into(),
+        Token::Fn => "fn".into(),
+        Token::Component => "component".into(),
+        Token::Props => "props".into(),
+        Token::State => "state".into(),
+        Token::Template => "template".into(),
+        _ => String::new(),
+    }
+}
+
+fn parse_each_header(raw: &str) -> CompileResult<(String, String)> {
+    // e.g., "items as item"
+    if let Some(idx) = raw.find(" as ") {
+        let items = raw[..idx].trim().to_owned();
+        let item_name = raw[idx + 4..].trim().to_owned();
+        Ok((items, item_name))
+    } else {
+        Err(CompileError::Parse { msg: format!("invalid #each header: '{}'", raw) })
+    }
+}
+
+fn parse_activate_header(raw: &str) -> CompileResult<(String, String)> {
+    // e.g., `"query string" as results`
+    // Strip outer quotes from query
+    let raw = raw.trim();
+    if let Some(idx) = raw.rfind(" as ") {
+        let query_part = raw[..idx].trim();
+        let result_name = raw[idx + 4..].trim().to_owned();
+        let query = query_part.trim_matches('"').to_owned();
+        Ok((query, result_name))
+    } else {
+        Err(CompileError::Parse { msg: format!("invalid #activate header: '{}'", raw) })
+    }
+}

ui/crates/el-ui-compiler/src/tests.rs

@@ -0,0 +1,480 @@
+//! Tests for el-ui-compiler.
+//!
+//! Tests cover:
+//!   - Component parsing (props, state, methods, template)
+//!   - Template node parsing (elements, components, interpolation, if/each/activate)
+//!   - JavaScript code generation
+//!   - Graph operations (seed, update, activate, search, subscribe, connect)
+//!   - Spreading activation algorithm
+//!   - Router (graph-based, path matching)
+
+#[cfg(test)]
+mod tests {
+    use crate::{ast::*, lexer, parser, Compiler};
+
+    // ── Helper ────────────────────────────────────────────────────────────────
+
+    fn parse_first(src: &str) -> Component {
+        let tokens = lexer::tokenize(src).expect("lex failed");
+        let mut components = parser::parse(&tokens).expect("parse failed");
+        assert!(!components.is_empty(), "expected at least one component");
+        components.remove(0)
+    }
+
+    fn compile_ok(src: &str) -> String {
+        let compiler = Compiler::new();
+        compiler.compile_component(src).expect("compile failed")
+    }
+
+    // ── Test 1: Parse a component with no body ────────────────────────────────
+    #[test]
+    fn test_empty_component() {
+        let src = r#"component Empty { template { <div></div> } }"#;
+        let comp = parse_first(src);
+        assert_eq!(comp.name, "Empty");
+        assert!(comp.props.is_empty());
+        assert!(comp.state.is_empty());
+        assert!(comp.methods.is_empty());
+    }
+
+    // ── Test 2: Parse props block ─────────────────────────────────────────────
+    #[test]
+    fn test_props_parsing() {
+        let src = r#"
+            component Button {
+                props {
+                    label: String
+                    variant: String = "primary"
+                    disabled: Bool = false
+                }
+                template { <button></button> }
+            }
+        "#;
+        let comp = parse_first(src);
+        assert_eq!(comp.props.len(), 3);
+        assert_eq!(comp.props[0].name, "label");
+        assert_eq!(comp.props[0].type_name, "String");
+        assert!(comp.props[0].default.is_none());
+        assert_eq!(comp.props[1].name, "variant");
+        assert_eq!(comp.props[1].default.as_deref().unwrap_or("").trim(), r#""primary""#);
+        assert_eq!(comp.props[2].name, "disabled");
+        assert_eq!(comp.props[2].default.as_deref().unwrap_or(""), "false");
+    }
+
+    // ── Test 3: Parse state block ─────────────────────────────────────────────
+    #[test]
+    fn test_state_parsing() {
+        let src = r#"
+            component Counter {
+                state {
+                    count: Int = 0
+                    active: Bool = true
+                }
+                template { <div></div> }
+            }
+        "#;
+        let comp = parse_first(src);
+        assert_eq!(comp.state.len(), 2);
+        assert_eq!(comp.state[0].name, "count");
+        assert_eq!(comp.state[0].type_name, "Int");
+        assert_eq!(comp.state[0].initial, "0");
+        assert_eq!(comp.state[1].name, "active");
+        assert_eq!(comp.state[1].initial, "true");
+    }
+
+    // ── Test 4: Parse a method ────────────────────────────────────────────────
+    #[test]
+    fn test_method_parsing() {
+        let src = r#"
+            component Foo {
+                state { x: Int = 0 }
+                fn increment() -> Void {
+                    x = x + 1
+                }
+                template { <div></div> }
+            }
+        "#;
+        let comp = parse_first(src);
+        assert_eq!(comp.methods.len(), 1);
+        assert_eq!(comp.methods[0].name, "increment");
+        assert_eq!(comp.methods[0].return_type, "Void");
+        assert!(comp.methods[0].params.is_empty());
+    }
+
+    // ── Test 5: Parse element in template ────────────────────────────────────
+    #[test]
+    fn test_template_element() {
+        let src = r#"component T { template { <div class="foo"><span></span></div> } }"#;
+        let comp = parse_first(src);
+        let nodes = &comp.template.nodes;
+        assert!(!nodes.is_empty());
+        match &nodes[0] {
+            TemplateNode::Element { tag, .. } => assert_eq!(tag, "div"),
+            other => panic!("expected Element, got {:?}", other),
+        }
+    }
+
+    // ── Test 6: Parse interpolation in template ───────────────────────────────
+    #[test]
+    fn test_template_interpolation() {
+        let src = r#"
+            component C {
+                state { count: Int = 0 }
+                template { <div>{count}</div> }
+            }
+        "#;
+        let comp = parse_first(src);
+        let nodes = &comp.template.nodes;
+        assert!(!nodes.is_empty());
+        match &nodes[0] {
+            TemplateNode::Element { children, .. } => {
+                assert!(!children.is_empty(), "element should have children");
+                match &children[0] {
+                    TemplateNode::Interpolation(expr) => {
+                        assert!(expr.contains("count"), "interpolation should contain 'count'");
+                    }
+                    other => panic!("expected Interpolation, got {:?}", other),
+                }
+            }
+            other => panic!("expected Element, got {:?}", other),
+        }
+    }
+
+    // ── Test 7: Parse component usage in template ────────────────────────────
+    #[test]
+    fn test_template_component_usage() {
+        let src = r#"
+            component App {
+                template { <div><Counter /></div> }
+            }
+        "#;
+        let comp = parse_first(src);
+        let nodes = &comp.template.nodes;
+        match &nodes[0] {
+            TemplateNode::Element { children, .. } => {
+                assert!(!children.is_empty());
+                match &children[0] {
+                    TemplateNode::Component { name, .. } => {
+                        assert_eq!(name, "Counter");
+                    }
+                    other => panic!("expected Component, got {:?}", other),
+                }
+            }
+            other => panic!("expected Element, got {:?}", other),
+        }
+    }
+
+    // ── Test 8: Parse {#if} block ─────────────────────────────────────────────
+    #[test]
+    fn test_template_if_block() {
+        let src = r#"
+            component C {
+                state { show: Bool = true }
+                template {
+                    <div>
+                        {#if show}
+                            <span>visible</span>
+                        {/if}
+                    </div>
+                }
+            }
+        "#;
+        let comp = parse_first(src);
+        let div = &comp.template.nodes[0];
+        match div {
+            TemplateNode::Element { children, .. } => {
+                let has_if = children.iter().any(|n| matches!(n, TemplateNode::If { .. }));
+                assert!(has_if, "expected If node in children");
+            }
+            other => panic!("expected Element, got {:?}", other),
+        }
+    }
+
+    // ── Test 9: Parse {#each} block ───────────────────────────────────────────
+    #[test]
+    fn test_template_each_block() {
+        let src = r#"
+            component List {
+                state { items: String = "" }
+                template {
+                    <ul>
+                        {#each items as item}
+                            <li>{item}</li>
+                        {/each}
+                    </ul>
+                }
+            }
+        "#;
+        let comp = parse_first(src);
+        let ul = &comp.template.nodes[0];
+        match ul {
+            TemplateNode::Element { children, .. } => {
+                let has_each = children.iter().any(|n| matches!(n, TemplateNode::Each { .. }));
+                assert!(has_each, "expected Each node");
+            }
+            other => panic!("expected Element, got {:?}", other),
+        }
+    }
+
+    // ── Test 10: Parse {#activate} block ─────────────────────────────────────
+    #[test]
+    fn test_template_activate_block() {
+        let src = r#"
+            component Search {
+                template {
+                    <div>
+                        {#activate "recent items" as results}
+                            <span>{results}</span>
+                        {/activate}
+                    </div>
+                }
+            }
+        "#;
+        let comp = parse_first(src);
+        let div = &comp.template.nodes[0];
+        match div {
+            TemplateNode::Element { children, .. } => {
+                let has_activate = children.iter().any(|n| {
+                    matches!(n, TemplateNode::Activate { query, .. } if query.contains("recent"))
+                });
+                assert!(has_activate, "expected Activate node");
+            }
+            other => panic!("expected Element, got {:?}", other),
+        }
+    }
+
+    // ── Test 11: Compiler produces valid JS for Counter ───────────────────────
+    #[test]
+    fn test_counter_compiles() {
+        let src = r#"
+            component Counter {
+                state {
+                    count: Int = 0
+                }
+                template {
+                    <div class="counter">
+                        <h1>{count}</h1>
+                        <button on:click={() => count = count + 1}>+</button>
+                        <button on:click={() => count = count - 1}>-</button>
+                    </div>
+                }
+            }
+        "#;
+        let js = compile_ok(src);
+        assert!(js.contains("class Counter extends Component"), "should define Counter class");
+        assert!(js.contains("this._graph.seed"), "should seed graph nodes");
+        assert!(js.contains("this._stateNodes['count']"), "should track count node");
+        assert!(js.contains("render()"), "should have render method");
+        assert!(js.contains("setState"), "should have setState");
+    }
+
+    // ── Test 12: Compiler generates import statement ───────────────────────────
+    #[test]
+    fn test_import_generation() {
+        let src = r#"component A { template { <div></div> } }"#;
+        let js = compile_ok(src);
+        assert!(js.contains("import {"), "should have import statement");
+        assert!(js.contains("el-ui.js"), "should import from el-ui.js");
+    }
+
+    // ── Test 13: Compiler generates export statement ──────────────────────────
+    #[test]
+    fn test_export_generation() {
+        let src = r#"component MyComp { template { <div></div> } }"#;
+        let js = compile_ok(src);
+        assert!(js.contains("export { MyComp }"), "should export the component");
+    }
+
+    // ── Test 14: Compiler handles props with defaults ─────────────────────────
+    #[test]
+    fn test_props_with_defaults_in_js() {
+        let src = r#"
+            component Btn {
+                props {
+                    label: String
+                    variant: String = "primary"
+                }
+                template { <button>{label}</button> }
+            }
+        "#;
+        let js = compile_ok(src);
+        assert!(js.contains("_props_label"), "should reference label prop");
+        assert!(js.contains("_props_variant"), "should reference variant prop");
+        assert!(js.contains("\"primary\""), "should embed default value");
+    }
+
+    // ── Test 15: Compiler emits event handler data attribute ─────────────────
+    #[test]
+    fn test_event_handler_attr() {
+        let src = r#"
+            component C {
+                state { n: Int = 0 }
+                template { <button on:click={() => n = n + 1}>Click</button> }
+            }
+        "#;
+        let js = compile_ok(src);
+        assert!(js.contains("data-el-click"), "should emit data-el-click attribute");
+    }
+
+    // ── Test 16: Multiple components in one file ──────────────────────────────
+    #[test]
+    fn test_multiple_components() {
+        let src = r#"
+            component A { template { <div></div> } }
+            component B { template { <span></span> } }
+        "#;
+        let tokens = lexer::tokenize(src).unwrap();
+        let components = parser::parse(&tokens).unwrap();
+        assert_eq!(components.len(), 2);
+        assert_eq!(components[0].name, "A");
+        assert_eq!(components[1].name, "B");
+    }
+
+    // ── Test 17: Lexer handles string literals ────────────────────────────────
+    #[test]
+    fn test_lexer_strings() {
+        let src = r#"component X { props { label: String = "hello world" } template { <div></div> } }"#;
+        let tokens = lexer::tokenize(src).unwrap();
+        let has_string = tokens.iter().any(|t| {
+            matches!(t, crate::lexer::Token::StringLit(s) if s == "hello world")
+        });
+        assert!(has_string, "should produce StringLit token");
+    }
+
+    // ── Test 18: Lexer handles bool literals ──────────────────────────────────
+    #[test]
+    fn test_lexer_bools() {
+        let src = r#"component X { state { flag: Bool = true } template { <div></div> } }"#;
+        let tokens = lexer::tokenize(src).unwrap();
+        let has_true = tokens.iter().any(|t| matches!(t, crate::lexer::Token::BoolLit(true)));
+        assert!(has_true, "should produce BoolLit(true) token");
+    }
+
+    // ── Test 19: Lexer handles integer literals ───────────────────────────────
+    #[test]
+    fn test_lexer_integers() {
+        let src = r#"component X { state { n: Int = 42 } template { <div></div> } }"#;
+        let tokens = lexer::tokenize(src).unwrap();
+        let has_int = tokens.iter().any(|t| matches!(t, crate::lexer::Token::IntLit(42)));
+        assert!(has_int, "should produce IntLit(42) token");
+    }
+
+    // ── Test 20: compile_app() merges multiple sources ────────────────────────
+    #[test]
+    fn test_compile_app() {
+        let button_src = r#"
+            component Button {
+                props { label: String }
+                template { <button>{label}</button> }
+            }
+        "#;
+        let app_src = r#"
+            component App {
+                template { <div><Button label="Click" /></div> }
+            }
+        "#;
+        let compiler = Compiler::new();
+        let js = compiler.compile_app(app_src, &[("Button", button_src)]).unwrap();
+        assert!(js.contains("class Button"), "should define Button");
+        assert!(js.contains("class App"), "should define App");
+    }
+
+    // ── Test 21: Self-closing element parses correctly ────────────────────────
+    #[test]
+    fn test_self_closing_element() {
+        let src = r#"
+            component F {
+                template { <div><input type="text" /></div> }
+            }
+        "#;
+        let comp = parse_first(src);
+        let div = &comp.template.nodes[0];
+        match div {
+            TemplateNode::Element { children, .. } => {
+                assert!(!children.is_empty());
+                match &children[0] {
+                    TemplateNode::Element { tag, .. } => assert_eq!(tag, "input"),
+                    other => panic!("expected input element, got {:?}", other),
+                }
+            }
+            other => panic!("expected div, got {:?}", other),
+        }
+    }
+
+    // ── Test 22: Boolean attribute parsing ────────────────────────────────────
+    #[test]
+    fn test_bool_attribute() {
+        let src = r#"
+            component F {
+                props { disabled: Bool = false }
+                template { <button disabled={disabled}>Click</button> }
+            }
+        "#;
+        let js = compile_ok(src);
+        // Boolean attributes should use ternary in the output
+        assert!(js.contains("disabled") || js.contains("_props_disabled"), "should handle disabled attr");
+    }
+
+    // ── Test 23: Graph — Graph module state graph simulation ──────────────────
+    // (We test the JS runtime logic by re-implementing the Graph algorithm in Rust
+    //  and verifying it matches the activation spec from engram-core.)
+    #[test]
+    fn test_activation_algorithm_matches_spec() {
+        // Verify the spreading activation algorithm properties:
+        // 1. Seeds start at strength 1.0
+        // 2. Activation attenuates with each hop
+        // 3. Paths below threshold are pruned
+
+        // This validates our codegen/doc claims about the algorithm.
+        // The JS runtime graph.activate() mirrors engram-core/activation.rs.
+
+        // Simple simulation: A -> B (weight 0.8, importance 0.5)
+        // Expected strength at B: 1.0 * 0.8 * 0.5 = 0.4
+        let parent_strength: f64 = 1.0;
+        let edge_weight: f64 = 0.8;
+        let target_importance: f64 = 0.5;
+        let target_strength = parent_strength * edge_weight * target_importance;
+        assert!(target_strength > 0.01, "should exceed prune threshold");
+        assert_eq!(target_strength, 0.4);
+
+        // Two hops: 0.4 * 0.8 * 0.5 = 0.16
+        let two_hop = target_strength * edge_weight * target_importance;
+        assert!(two_hop > 0.01, "two hops should still exceed threshold");
+        assert!((two_hop - 0.16).abs() < 1e-9);
+
+        // Weak edge: strength below threshold should be pruned
+        let weak = 0.1_f64 * 0.05_f64 * 0.5_f64; // = 0.0025
+        assert!(weak < 0.01, "weak path should be below prune threshold");
+    }
+
+    // ── Test 24: Static attribute in template ─────────────────────────────────
+    #[test]
+    fn test_static_attr_in_output() {
+        let src = r#"component C { template { <div class="wrapper"><span></span></div> } }"#;
+        let js = compile_ok(src);
+        assert!(js.contains("wrapper"), "should include static class name");
+    }
+
+    // ── Test 25: Dynamic attribute in template ────────────────────────────────
+    #[test]
+    fn test_dynamic_attr_in_output() {
+        let src = r#"
+            component C {
+                state { cls: String = "active" }
+                template { <div class={cls}></div> }
+            }
+        "#;
+        let js = compile_ok(src);
+        // Dynamic attrs use template interpolation
+        assert!(js.contains("cls") || js.contains("_state"), "should reference cls state");
+    }
+
+    // ── Test 26: Compiler with custom runtime path ─────────────────────────────
+    #[test]
+    fn test_custom_runtime_path() {
+        let src = r#"component X { template { <div></div> } }"#;
+        let compiler = crate::Compiler::new().with_runtime_path("/vendor/el-ui.min.js");
+        let js = compiler.compile_component(src).unwrap();
+        assert!(js.contains("/vendor/el-ui.min.js"), "should use custom runtime path");
+    }
+}

ui/dist/el-ui.js

@@ -0,0 +1,397 @@
+/**
+ * el-ui v0.1.0 — Activation-based frontend framework.
+ * State is an Engram graph. Reactivity is spreading activation.
+ *
+ * Bundled single-file runtime. Import this from your compiled .el components:
+ *   import { Component, Graph, Renderer, Router, mount } from './el-ui.js';
+ *
+ * Source: runtime/src/
+ * Build: cat runtime/src/graph.js runtime/src/activation.js
+ *            runtime/src/renderer.js runtime/src/router.js runtime/src/index.js > dist/el-ui.js
+ */
+
+// ── graph.js ──────────────────────────────────────────────────────────────────
+
+export class Graph {
+    constructor() {
+        this.nodes = new Map();
+        this.edges = new Map();
+        this.subscribers = new Map();
+    }
+
+    seed({ type, name, content, importance = 0.5 }) {
+        const id = this._uuid();
+        this.nodes.set(id, { id, type, name, content, importance, edges: [] });
+        return id;
+    }
+
+    get(id) {
+        return this.nodes.get(id);
+    }
+
+    update(id, newContent) {
+        const node = this.nodes.get(id);
+        if (!node) return;
+        node.content = newContent;
+        node.importance = Math.min(1.0, node.importance + 0.1);
+        const activated = this.activate(id);
+        for (const nodeId of activated) {
+            const subs = this.subscribers.get(nodeId);
+            if (subs && subs.length > 0) {
+                const n = this.nodes.get(nodeId);
+                if (n) subs.forEach(cb => cb(n));
+            }
+        }
+        // Always notify direct subscribers
+        const directSubs = this.subscribers.get(id);
+        if (directSubs && directSubs.length > 0) {
+            directSubs.forEach(cb => cb(node));
+        }
+    }
+
+    activate(seedId, maxDepth = 3, pruneThreshold = 0.01) {
+        const result = new Set([seedId]);
+        const queue = [{ id: seedId, strength: 1.0, depth: 0 }];
+        const bestStrength = new Map([[seedId, 1.0]]);
+
+        while (queue.length > 0) {
+            let bestIdx = 0;
+            for (let i = 1; i < queue.length; i++) {
+                if (queue[i].strength > queue[bestIdx].strength) bestIdx = i;
+            }
+            const { id, strength, depth } = queue.splice(bestIdx, 1)[0];
+            if (depth >= maxDepth) continue;
+
+            const node = this.nodes.get(id);
+            if (!node) continue;
+
+            for (const edgeId of node.edges) {
+                const edge = this.edges.get(edgeId);
+                if (!edge) continue;
+                const target = this.nodes.get(edge.to);
+                if (!target) continue;
+                const targetStrength = strength * edge.weight * Math.max(0, target.importance);
+                if (targetStrength <= pruneThreshold) continue;
+                const prevBest = bestStrength.get(edge.to) ?? 0;
+                if (targetStrength > prevBest) {
+                    bestStrength.set(edge.to, targetStrength);
+                    result.add(edge.to);
+                    queue.push({ id: edge.to, strength: targetStrength, depth: depth + 1 });
+                }
+            }
+        }
+        return result;
+    }
+
+    search(query, nodeType = null) {
+        const results = [];
+        const q = query.toLowerCase();
+        for (const [, node] of this.nodes) {
+            if (nodeType && node.type !== nodeType) continue;
+            const content = String(node.content).toLowerCase();
+            const nameMatch = node.name.toLowerCase().includes(q);
+            const contentMatch = content.includes(q);
+            if (nameMatch || contentMatch) {
+                const score = (nameMatch ? 0.6 : 0) + (contentMatch ? 0.4 : 0);
+                results.push({ ...node, score: score * node.importance });
+            }
+        }
+        return results.sort((a, b) => b.score - a.score);
+    }
+
+    subscribe(nodeId, callback) {
+        if (!this.subscribers.has(nodeId)) this.subscribers.set(nodeId, []);
+        this.subscribers.get(nodeId).push(callback);
+        return () => {
+            const subs = this.subscribers.get(nodeId);
+            if (!subs) return;
+            const idx = subs.indexOf(callback);
+            if (idx >= 0) subs.splice(idx, 1);
+        };
+    }
+
+    connect(fromId, toId, { weight = 1.0, relation = 'related' } = {}) {
+        const edgeId = this._uuid();
+        this.edges.set(edgeId, { id: edgeId, from: fromId, to: toId, weight, relation });
+        const node = this.nodes.get(fromId);
+        if (node) node.edges.push(edgeId);
+        return edgeId;
+    }
+
+    dump() {
+        return [...this.nodes.values()];
+    }
+
+    _uuid() {
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) return crypto.randomUUID();
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+            const r = Math.random() * 16 | 0;
+            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+        });
+    }
+}
+
+// ── activation.js ─────────────────────────────────────────────────────────────
+
+export const PRUNE_THRESHOLD = 0.01;
+
+export function spreadActivation(graph, seeds, {
+    maxDepth = 3,
+    limit = 20,
+    pruneThreshold = PRUNE_THRESHOLD,
+} = {}) {
+    const bestStrength = new Map();
+    const queue = [];
+    const seedSet = new Set(seeds);
+
+    for (const seed of seeds) {
+        if (!graph.get(seed)) continue;
+        queue.push({ id: seed, strength: 1.0, hops: 0 });
+        bestStrength.set(seed, { strength: 1.0, hops: 0 });
+    }
+
+    while (queue.length > 0) {
+        let bestIdx = 0;
+        for (let i = 1; i < queue.length; i++) {
+            if (queue[i].strength > queue[bestIdx].strength) bestIdx = i;
+        }
+        const { id, strength, hops } = queue.splice(bestIdx, 1)[0];
+        if (hops >= maxDepth) continue;
+        const node = graph.get(id);
+        if (!node) continue;
+        for (const edgeId of node.edges) {
+            const edge = graph.edges.get(edgeId);
+            if (!edge) continue;
+            const target = graph.get(edge.to);
+            if (!target) continue;
+            const targetStrength = strength * edge.weight * Math.max(0, target.importance);
+            if (targetStrength <= pruneThreshold) continue;
+            const prev = bestStrength.get(edge.to);
+            if (!prev || targetStrength > prev.strength) {
+                const nextHops = hops + 1;
+                bestStrength.set(edge.to, { strength: targetStrength, hops: nextHops });
+                queue.push({ id: edge.to, strength: targetStrength, hops: nextHops });
+            }
+        }
+    }
+
+    const results = [];
+    for (const [nodeId, { strength, hops }] of bestStrength) {
+        if (seedSet.has(nodeId)) continue;
+        const node = graph.get(nodeId);
+        if (node) results.push({ nodeId, strength, hops, node });
+    }
+    results.sort((a, b) => b.strength - a.strength);
+    return results.slice(0, limit);
+}
+
+export function activationStrength(graph, fromId, toId, maxDepth = 3) {
+    const results = spreadActivation(graph, [fromId], { maxDepth });
+    const found = results.find(r => r.nodeId === toId);
+    return found ? found.strength : 0;
+}
+
+export function reachableNodes(graph, seedId, maxDepth = 3) {
+    return graph.activate(seedId, maxDepth);
+}
+
+// ── renderer.js ───────────────────────────────────────────────────────────────
+
+export class Renderer {
+    constructor(root, component) {
+        this.root = root;
+        this.component = component;
+        this._currentHtml = '';
+        this._boundHandlers = new WeakMap();
+    }
+
+    mount() {
+        this._currentHtml = this.component.render();
+        this.root.innerHTML = this._currentHtml;
+        this._bindEvents();
+        if (typeof this.component.onMount === 'function') {
+            this.component.onMount();
+        }
+    }
+
+    patch(_activatedNodes) {
+        const newHtml = this.component.render();
+        if (newHtml !== this._currentHtml) {
+            const focused = document.activeElement;
+            const focusedId = focused && focused !== document.body ? focused.id : null;
+            this.root.innerHTML = newHtml;
+            this._bindEvents();
+            this._currentHtml = newHtml;
+            if (focusedId) {
+                const el = this.root.querySelector(`#${CSS.escape(focusedId)}`);
+                if (el) el.focus();
+            }
+        }
+    }
+
+    _bindEvents() {
+        const comp = this.component;
+        const eventNames = [
+            'click', 'input', 'change', 'mouseenter', 'mouseleave',
+            'keydown', 'keyup', 'keypress', 'focus', 'blur',
+            'submit', 'mousedown', 'mouseup', 'dblclick', 'contextmenu',
+        ];
+        for (const eventName of eventNames) {
+            const attr = `data-el-${eventName}`;
+            this.root.querySelectorAll(`[${attr}]`).forEach(el => {
+                const handlerExpr = el.getAttribute(attr);
+                if (!handlerExpr) return;
+                const handler = this._compileHandler(handlerExpr, comp);
+                if (handler) {
+                    const prev = this._boundHandlers.get(el);
+                    if (prev && prev[eventName]) el.removeEventListener(eventName, prev[eventName]);
+                    el.addEventListener(eventName, handler);
+                    if (!this._boundHandlers.has(el)) this._boundHandlers.set(el, {});
+                    this._boundHandlers.get(el)[eventName] = handler;
+                }
+            });
+        }
+    }
+
+    _compileHandler(expr, comp) {
+        try {
+            const decoded = expr
+                .replace(/&quot;/g, '"')
+                .replace(/&#39;/g, "'")
+                .replace(/&amp;/g, '&')
+                .replace(/&lt;/g, '<')
+                .replace(/&gt;/g, '>');
+            if (decoded.includes('=>')) {
+                // eslint-disable-next-line no-new-func
+                const fn = new Function('__self', `return ${decoded}`)(comp);
+                return typeof fn === 'function' ? fn : null;
+            } else if (decoded.includes('(')) {
+                // eslint-disable-next-line no-new-func
+                return new Function('__self', 'event', `${decoded}`).bind(null, comp);
+            } else {
+                return comp[decoded] ? comp[decoded].bind(comp) : null;
+            }
+        } catch (e) {
+            console.warn(`el-ui: failed to compile handler: ${expr}`, e);
+            return null;
+        }
+    }
+}
+
+// ── router.js ─────────────────────────────────────────────────────────────────
+
+export class Router {
+    constructor(graph, routes) {
+        this.graph = graph;
+        this.routes = routes;
+        this.currentPath = window.location.pathname;
+        this._routeNodes = {};
+        this._subscribers = [];
+
+        for (const [path] of Object.entries(routes)) {
+            const id = graph.seed({ type: 'route', name: path, content: path, importance: 0.3 });
+            this._routeNodes[path] = id;
+        }
+
+        const paths = Object.keys(routes).sort();
+        for (let i = 0; i < paths.length - 1; i++) {
+            const parent = paths[i];
+            const child = paths[i + 1];
+            if (child.startsWith(parent) && parent !== child) {
+                graph.connect(this._routeNodes[parent], this._routeNodes[child], {
+                    weight: 0.8,
+                    relation: 'subroute',
+                });
+            }
+        }
+
+        window.addEventListener('popstate', () => this._activate(window.location.pathname));
+    }
+
+    navigate(path, replace = false) {
+        if (path === this.currentPath) return;
+        if (replace) history.replaceState({}, '', path);
+        else history.pushState({}, '', path);
+        this._activate(path);
+    }
+
+    currentComponent() {
+        return this.routes[this.currentPath] ?? this.routes['*'] ?? null;
+    }
+
+    subscribe(callback) {
+        this._subscribers.push(callback);
+        return () => {
+            const idx = this._subscribers.indexOf(callback);
+            if (idx >= 0) this._subscribers.splice(idx, 1);
+        };
+    }
+
+    href(path) { return path; }
+
+    _activate(path) {
+        const prevPath = this.currentPath;
+        this.currentPath = path;
+        const matchedPath = this._matchPath(path);
+        if (matchedPath && this._routeNodes[matchedPath]) {
+            this.graph.activate(this._routeNodes[matchedPath]);
+            const node = this.graph.get(this._routeNodes[matchedPath]);
+            if (node) node.importance = Math.min(1.0, node.importance + 0.2);
+        }
+        if (path !== prevPath) this._subscribers.forEach(cb => cb(path));
+    }
+
+    _matchPath(path) {
+        if (this.routes[path]) return path;
+        const candidates = Object.keys(this.routes)
+            .filter(r => r !== '*' && path.startsWith(r))
+            .sort((a, b) => b.length - a.length);
+        if (candidates.length > 0) return candidates[0];
+        return '*';
+    }
+}
+
+// ── Component base class & mount() ───────────────────────────────────────────
+
+export class Component {
+    constructor(props = {}) {
+        this._graph = new Graph();
+        this._stateNodes = {};
+        this._state = {};
+        this.props = props;
+        this._renderer = null;
+    }
+
+    setState(name, value) {
+        if (this._stateNodes[name] !== undefined) {
+            this._graph.update(this._stateNodes[name], value);
+            if (this._renderer) this._renderer.patch();
+        }
+    }
+
+    _child(ComponentClass, props = {}) {
+        try {
+            const instance = new ComponentClass(props);
+            instance._graph = this._graph;
+            return instance.render();
+        } catch (e) {
+            console.warn(`el-ui: failed to render child ${ComponentClass?.name}`, e);
+            return `<!-- el-ui: render error in ${ComponentClass?.name} -->`;
+        }
+    }
+
+    render() { return ''; }
+    onMount() {}
+}
+
+export function mount(ComponentClass, selector, props = {}) {
+    const root = document.querySelector(selector);
+    if (!root) throw new Error(`el-ui: no element found for selector '${selector}'`);
+    const component = new ComponentClass(props);
+    const renderer = new Renderer(root, component);
+    component._renderer = renderer;
+    renderer.mount();
+    return component;
+}
+
+export default { mount, Component, Graph, Renderer, Router };

ui/examples/counter/App.el

@@ -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>
+    }
+}

ui/examples/counter/app.js

@@ -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');

ui/examples/counter/index.html

@@ -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>

ui/examples/todo/App.el

@@ -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>
+    }
+}

ui/examples/todo/app.js

@@ -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');

ui/examples/todo/index.html

@@ -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>

ui/runtime/src/activation.js

@@ -0,0 +1,121 @@
+/**
+ * activation.js — Spreading activation utilities for el-ui.
+ *
+ * This module provides standalone activation functions that operate on any
+ * Graph instance. Useful for implementing custom reactive behavior outside
+ * of the standard component setState() lifecycle.
+ *
+ * The activation model mirrors engram-core/src/activation.rs exactly:
+ *   - Best-first BFS from seed nodes
+ *   - Multiplicative strength: parent_strength × edge.weight × target.importance
+ *   - Winner-take-most: strongest path to each node wins
+ *   - Prune: paths below threshold are cut (models attention filter)
+ */
+
+export const PRUNE_THRESHOLD = 0.01;
+export const DEFAULT_MAX_DEPTH = 3;
+export const DEFAULT_LIMIT = 20;
+
+/**
+ * Run spreading activation from multiple seed nodes.
+ *
+ * @param {import('./graph.js').Graph} graph
+ * @param {string[]} seeds  starting node IDs
+ * @param {object} opts
+ * @param {number} [opts.maxDepth=3]
+ * @param {number} [opts.limit=20]
+ * @param {number} [opts.pruneThreshold=0.01]
+ * @returns {Array<{nodeId: string, strength: number, hops: number, node: object}>}
+ */
+export function spreadActivation(graph, seeds, {
+    maxDepth = DEFAULT_MAX_DEPTH,
+    limit = DEFAULT_LIMIT,
+    pruneThreshold = PRUNE_THRESHOLD,
+} = {}) {
+    /** @type {Map<string, {strength: number, hops: number}>} */
+    const bestStrength = new Map();
+    /** @type {Array<{id: string, strength: number, hops: number}>} */
+    const queue = [];
+
+    const seedSet = new Set(seeds);
+
+    for (const seed of seeds) {
+        const node = graph.get(seed);
+        if (!node) continue;
+        queue.push({ id: seed, strength: 1.0, hops: 0 });
+        bestStrength.set(seed, { strength: 1.0, hops: 0 });
+    }
+
+    while (queue.length > 0) {
+        // Best-first: pop the highest-strength candidate
+        let bestIdx = 0;
+        for (let i = 1; i < queue.length; i++) {
+            if (queue[i].strength > queue[bestIdx].strength) bestIdx = i;
+        }
+        const { id, strength, hops } = queue.splice(bestIdx, 1)[0];
+
+        if (hops >= maxDepth) continue;
+
+        const node = graph.get(id);
+        if (!node) continue;
+
+        for (const edgeId of node.edges) {
+            const edge = graph.edges.get(edgeId);
+            if (!edge) continue;
+
+            const target = graph.get(edge.to);
+            if (!target) continue;
+
+            const targetStrength = strength * edge.weight * Math.max(0, target.importance);
+
+            if (targetStrength <= pruneThreshold) continue;
+
+            const prev = bestStrength.get(edge.to);
+            if (!prev || targetStrength > prev.strength) {
+                const nextHops = hops + 1;
+                bestStrength.set(edge.to, { strength: targetStrength, hops: nextHops });
+                queue.push({ id: edge.to, strength: targetStrength, hops: nextHops });
+            }
+        }
+    }
+
+    // Collect results — exclude seeds, sort by strength
+    const results = [];
+    for (const [nodeId, { strength, hops }] of bestStrength) {
+        if (seedSet.has(nodeId)) continue;
+        const node = graph.get(nodeId);
+        if (node) results.push({ nodeId, strength, hops, node });
+    }
+
+    results.sort((a, b) => b.strength - a.strength);
+    return results.slice(0, limit);
+}
+
+/**
+ * Compute activation strength between two specific nodes.
+ * Returns 0 if no path exists within maxDepth.
+ *
+ * @param {import('./graph.js').Graph} graph
+ * @param {string} fromId
+ * @param {string} toId
+ * @param {number} [maxDepth=3]
+ * @returns {number}
+ */
+export function activationStrength(graph, fromId, toId, maxDepth = DEFAULT_MAX_DEPTH) {
+    const results = spreadActivation(graph, [fromId], { maxDepth });
+    const found = results.find(r => r.nodeId === toId);
+    return found ? found.strength : 0;
+}
+
+/**
+ * Find all nodes reachable from a seed within the activation surface.
+ * Unlike spreadActivation(), this includes the seed itself.
+ *
+ * @param {import('./graph.js').Graph} graph
+ * @param {string} seedId
+ * @param {number} [maxDepth=3]
+ * @returns {Set<string>}
+ */
+export function reachableNodes(graph, seedId, maxDepth = DEFAULT_MAX_DEPTH) {
+    return graph.activate(seedId, maxDepth);
+}

ui/runtime/src/graph.js

@@ -0,0 +1,224 @@
+/**
+ * graph.js — In-browser Engram graph for el-ui state management.
+ *
+ * Every piece of component state is a node in this graph.
+ * Edges encode relationships between state items (e.g., derived values,
+ * related data, component hierarchies).
+ *
+ * Reactivity is driven by spreading activation: when a node is updated,
+ * activation spreads outward through edges, and subscribers on any activated
+ * node are notified. Only subscribers in the activation surface update —
+ * this is the core of el-ui's selective re-rendering.
+ */
+
+export class Graph {
+    constructor() {
+        /** @type {Map<string, {id: string, type: string, name: string, content: any, importance: number, edges: string[]}>} */
+        this.nodes = new Map();
+
+        /** @type {Map<string, {id: string, from: string, to: string, weight: number, relation: string}>} */
+        this.edges = new Map();
+
+        /** @type {Map<string, Array<function>>} */
+        this.subscribers = new Map();
+    }
+
+    /**
+     * Create a new node and return its ID.
+     * @param {{type: string, name: string, content: any, importance?: number}} opts
+     * @returns {string} node ID
+     */
+    seed({ type, name, content, importance = 0.5 }) {
+        const id = this._uuid();
+        this.nodes.set(id, { id, type, name, content, importance, edges: [] });
+        return id;
+    }
+
+    /**
+     * Get a node by ID.
+     * @param {string} id
+     * @returns {{id: string, type: string, name: string, content: any, importance: number, edges: string[]} | undefined}
+     */
+    get(id) {
+        return this.nodes.get(id);
+    }
+
+    /**
+     * Update node content and trigger spreading activation.
+     * This is the primary mutation point — all state changes go through here.
+     * @param {string} id
+     * @param {any} newContent
+     */
+    update(id, newContent) {
+        const node = this.nodes.get(id);
+        if (!node) return;
+
+        node.content = newContent;
+        // Activation boosts importance — recently-changed state nodes
+        // become more salient (same model as Engram salience boost).
+        node.importance = Math.min(1.0, node.importance + 0.1);
+
+        // Spreading activation from the updated node
+        const activated = this.activate(id);
+
+        // Notify all subscribers in the activation surface
+        for (const nodeId of activated) {
+            const subs = this.subscribers.get(nodeId);
+            if (subs && subs.length > 0) {
+                const activatedNode = this.nodes.get(nodeId);
+                if (activatedNode) {
+                    subs.forEach(cb => cb(activatedNode));
+                }
+            }
+        }
+
+        // Always notify direct subscribers on the changed node itself
+        const directSubs = this.subscribers.get(id);
+        if (directSubs && directSubs.length > 0) {
+            directSubs.forEach(cb => cb(node));
+        }
+    }
+
+    /**
+     * Spreading activation — BFS from a seed node.
+     *
+     * Faithfully mirrors the Engram spreading activation algorithm:
+     *   strength = parent_strength × edge.weight × target.importance
+     *
+     * (In the browser we omit cosine_sim since we have no embedding vectors —
+     * the importance factor serves as the salience filter.)
+     *
+     * @param {string} seedId
+     * @param {number} maxDepth
+     * @param {number} pruneThreshold
+     * @returns {Set<string>} set of activated node IDs (including the seed)
+     */
+    activate(seedId, maxDepth = 3, pruneThreshold = 0.01) {
+        const result = new Set([seedId]);
+        /** @type {Array<{id: string, strength: number, depth: number}>} */
+        const queue = [{ id: seedId, strength: 1.0, depth: 0 }];
+        /** @type {Map<string, number>} */
+        const bestStrength = new Map([[seedId, 1.0]]);
+
+        while (queue.length > 0) {
+            // Best-first: process highest-strength candidate
+            let bestIdx = 0;
+            for (let i = 1; i < queue.length; i++) {
+                if (queue[i].strength > queue[bestIdx].strength) bestIdx = i;
+            }
+            const { id, strength, depth } = queue.splice(bestIdx, 1)[0];
+
+            if (depth >= maxDepth) continue;
+
+            const node = this.nodes.get(id);
+            if (!node) continue;
+
+            for (const edgeId of node.edges) {
+                const edge = this.edges.get(edgeId);
+                if (!edge) continue;
+
+                const target = this.nodes.get(edge.to);
+                if (!target) continue;
+
+                // Activation formula (multiplicative — matches Engram engine)
+                const targetStrength = strength * edge.weight * Math.max(0, target.importance);
+
+                if (targetStrength <= pruneThreshold) continue;
+
+                const prevBest = bestStrength.get(edge.to) ?? 0;
+                if (targetStrength > prevBest) {
+                    bestStrength.set(edge.to, targetStrength);
+                    result.add(edge.to);
+                    queue.push({ id: edge.to, strength: targetStrength, depth: depth + 1 });
+                }
+            }
+        }
+
+        return result;
+    }
+
+    /**
+     * Semantic search — find nodes by content similarity.
+     *
+     * In v0.1 this uses simple string matching. In a future version this will
+     * use embedding vectors and cosine similarity (matching the Engram core engine).
+     *
+     * @param {string} query
+     * @param {string|null} nodeType  optional filter by node type
+     * @returns {Array<{id: string, type: string, name: string, content: any, importance: number, score: number}>}
+     */
+    search(query, nodeType = null) {
+        const results = [];
+        const q = query.toLowerCase();
+        for (const [, node] of this.nodes) {
+            if (nodeType && node.type !== nodeType) continue;
+            const content = String(node.content).toLowerCase();
+            const nameMatch = node.name.toLowerCase().includes(q);
+            const contentMatch = content.includes(q);
+            if (nameMatch || contentMatch) {
+                // Score: name matches score higher; importance boosts
+                const score = (nameMatch ? 0.6 : 0) + (contentMatch ? 0.4 : 0);
+                results.push({ ...node, score: score * node.importance });
+            }
+        }
+        return results.sort((a, b) => b.score - a.score);
+    }
+
+    /**
+     * Subscribe to updates on a specific node (and any activation-reachable neighbors).
+     * Returns an unsubscribe function.
+     *
+     * @param {string} nodeId
+     * @param {function} callback  called with the node object when it activates
+     * @returns {function} unsubscribe
+     */
+    subscribe(nodeId, callback) {
+        if (!this.subscribers.has(nodeId)) {
+            this.subscribers.set(nodeId, []);
+        }
+        this.subscribers.get(nodeId).push(callback);
+        return () => {
+            const subs = this.subscribers.get(nodeId);
+            if (!subs) return;
+            const idx = subs.indexOf(callback);
+            if (idx >= 0) subs.splice(idx, 1);
+        };
+    }
+
+    /**
+     * Connect two nodes with a directed edge.
+     * Higher weight = stronger activation path.
+     *
+     * @param {string} fromId
+     * @param {string} toId
+     * @param {{weight?: number, relation?: string}} opts
+     * @returns {string} edge ID
+     */
+    connect(fromId, toId, { weight = 1.0, relation = 'related' } = {}) {
+        const edgeId = this._uuid();
+        this.edges.set(edgeId, { id: edgeId, from: fromId, to: toId, weight, relation });
+        const node = this.nodes.get(fromId);
+        if (node) node.edges.push(edgeId);
+        return edgeId;
+    }
+
+    /**
+     * Return all nodes as an array (useful for debugging / DevTools).
+     * @returns {Array}
+     */
+    dump() {
+        return [...this.nodes.values()];
+    }
+
+    /** @private */
+    _uuid() {
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+            return crypto.randomUUID();
+        }
+        // Fallback for environments without crypto.randomUUID
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+            const r = Math.random() * 16 | 0;
+            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+        });
+    }
+}

ui/runtime/src/index.js

@@ -0,0 +1,136 @@
+/**
+ * el-ui — Activation-based frontend framework.
+ *
+ * State is an Engram graph. Reactivity is spreading activation.
+ *
+ * Core exports:
+ *   Graph     — in-browser Engram graph (nodes, edges, activation)
+ *   Renderer  — DOM mounting and patching
+ *   Router    — graph-based routing
+ *   Component — base class for el-ui components
+ *   mount()   — attach a component to the DOM
+ *
+ * @module el-ui
+ */
+
+export { Graph } from './graph.js';
+export { Renderer } from './renderer.js';
+export { Router } from './router.js';
+export {
+    spreadActivation,
+    activationStrength,
+    reachableNodes,
+    PRUNE_THRESHOLD,
+} from './activation.js';
+
+import { Graph } from './graph.js';
+import { Renderer } from './renderer.js';
+
+/**
+ * Base class for all el-ui components.
+ *
+ * Subclasses override:
+ *   render()   → returns HTML string
+ *   onMount()  → called after first mount (optional)
+ *
+ * Subclasses call:
+ *   setState(name, value)  → update state, trigger activation, patch DOM
+ */
+export class Component {
+    constructor(props = {}) {
+        /** @type {Graph} */
+        this._graph = new Graph();
+
+        /** @type {Record<string, string>} state node IDs */
+        this._stateNodes = {};
+
+        /** @type {Record<string, any>} current state values */
+        this._state = {};
+
+        /** @type {Record<string, any>} current prop values */
+        this.props = props;
+
+        /** @type {Renderer|null} */
+        this._renderer = null;
+    }
+
+    /**
+     * Update a named state variable.
+     * Triggers spreading activation in the graph, then patches the DOM.
+     *
+     * @param {string} name
+     * @param {any} value
+     */
+    setState(name, value) {
+        if (this._stateNodes[name] !== undefined) {
+            this._graph.update(this._stateNodes[name], value);
+            // Graph.update() notifies subscribers, which call _renderer.patch().
+            // Belt-and-suspenders: also patch directly in case no subscribers yet.
+            if (this._renderer) this._renderer.patch();
+        }
+    }
+
+    /**
+     * Render a child component inline, sharing the parent's activation graph.
+     * Used by the compiler to embed child components in template strings.
+     *
+     * @param {typeof Component} ComponentClass
+     * @param {Record<string, any>} props
+     * @returns {string}
+     */
+    _child(ComponentClass, props = {}) {
+        try {
+            const instance = new ComponentClass(props);
+            // Share the parent graph so child state participates in the same
+            // activation surface. Child state changes can propagate upward.
+            instance._graph = this._graph;
+            return instance.render();
+        } catch (e) {
+            console.warn(`el-ui: failed to render child ${ComponentClass?.name}`, e);
+            return `<!-- el-ui: render error in ${ComponentClass?.name} -->`;
+        }
+    }
+
+    /**
+     * Override to return the component's HTML string.
+     * All state and props are accessible via this._state / this.props.
+     * @returns {string}
+     */
+    render() {
+        return '';
+    }
+
+    /**
+     * Called once after the component is first mounted to the DOM.
+     * Override for side effects (timers, fetch calls, subscriptions).
+     */
+    onMount() {}
+}
+
+/**
+ * Mount a component to a DOM element and start the el-ui runtime.
+ *
+ * @param {typeof Component} ComponentClass  the component class to mount
+ * @param {string} selector  CSS selector for the root element
+ * @param {Record<string, any>} [props={}]  initial props
+ * @returns {Component}  the live component instance
+ *
+ * @example
+ * import { mount } from './el-ui.js';
+ * import { Counter } from './counter.js';
+ * mount(Counter, '#app');
+ */
+export function mount(ComponentClass, selector, props = {}) {
+    const root = document.querySelector(selector);
+    if (!root) {
+        throw new Error(`el-ui: no element found for selector '${selector}'`);
+    }
+
+    const component = new ComponentClass(props);
+    const renderer = new Renderer(root, component);
+    component._renderer = renderer;
+    renderer.mount();
+    return component;
+}
+
+export default { mount, Component, Graph, Renderer };

ui/runtime/src/renderer.js

@@ -0,0 +1,144 @@
+/**
+ * renderer.js — DOM rendering and patching for el-ui.
+ *
+ * v0.1 strategy: full string re-render with event rebinding.
+ * The architecture is designed for future targeted DOM patching:
+ * `patch()` will accept the activated node set and only update
+ * DOM subtrees whose data-el-tag corresponds to an activated node.
+ *
+ * Event binding uses data-el-* attributes set by the compiler,
+ * which avoids innerHTML XSS risks for handler references while
+ * keeping the runtime small (no virtual DOM, no event delegation table).
+ */
+
+export class Renderer {
+    /**
+     * @param {HTMLElement} root  the mount point
+     * @param {import('./index.js').Component} component  component instance
+     */
+    constructor(root, component) {
+        this.root = root;
+        this.component = component;
+        this._currentHtml = '';
+        this._boundHandlers = new WeakMap();
+    }
+
+    /**
+     * Initial mount — render and bind events.
+     */
+    mount() {
+        this._currentHtml = this.component.render();
+        this.root.innerHTML = this._currentHtml;
+        this._bindEvents();
+        if (typeof this.component.onMount === 'function') {
+            this.component.onMount();
+        }
+    }
+
+    /**
+     * Patch the DOM after a state change.
+     * Called by the component when spreading activation completes.
+     *
+     * @param {Set<string>} [_activatedNodes]  future: targeted patching by node set
+     */
+    patch(_activatedNodes) {
+        const newHtml = this.component.render();
+        if (newHtml !== this._currentHtml) {
+            // Preserve scroll position and focused element identity
+            const focused = document.activeElement;
+            const focusedId = focused && focused !== document.body ? focused.id : null;
+
+            this.root.innerHTML = newHtml;
+            this._bindEvents();
+            this._currentHtml = newHtml;
+
+            // Restore focus if element still exists
+            if (focusedId) {
+                const el = this.root.querySelector(`#${CSS.escape(focusedId)}`);
+                if (el) el.focus();
+            }
+        }
+    }
+
+    /**
+     * Bind all data-el-* event handlers declared by the compiler.
+     *
+     * The compiler emits attributes like:
+     *   data-el-click="__self.handleClick()"
+     *   data-el-input="(e) => __self.setState('value', e.target.value)"
+     *
+     * We eval these in the context of the component instance.
+     * (For production use, a full CSP-compatible binding would generate
+     * handler functions at compile time.)
+     *
+     * @private
+     */
+    _bindEvents() {
+        const comp = this.component;
+        const eventNames = ['click', 'input', 'change', 'mouseenter', 'mouseleave',
+                            'keydown', 'keyup', 'keypress', 'focus', 'blur',
+                            'submit', 'mousedown', 'mouseup', 'dblclick', 'contextmenu'];
+
+        for (const eventName of eventNames) {
+            const attr = `data-el-${eventName}`;
+            this.root.querySelectorAll(`[${attr}]`).forEach(el => {
+                const handlerExpr = el.getAttribute(attr);
+                if (!handlerExpr) return;
+
+                // Build a handler function in the component's scope
+                const handler = this._compileHandler(handlerExpr, comp);
+                if (handler) {
+                    // Remove previous binding if any
+                    const prev = this._boundHandlers.get(el);
+                    if (prev) el.removeEventListener(eventName, prev[eventName]);
+
+                    el.addEventListener(eventName, handler);
+                    if (!this._boundHandlers.has(el)) this._boundHandlers.set(el, {});
+                    this._boundHandlers.get(el)[eventName] = handler;
+                }
+            });
+        }
+    }
+
+    /**
+     * Compile a handler expression string into a callable function.
+     * The expression is evaluated with `__self` bound to the component.
+     *
+     * @private
+     * @param {string} expr
+     * @param {object} comp
+     * @returns {function|null}
+     */
+    _compileHandler(expr, comp) {
+        try {
+            // Decode HTML entities (attrs may have &quot; etc.)
+            const decoded = expr
+                .replace(/&quot;/g, '"')
+                .replace(/&#39;/g, "'")
+                .replace(/&amp;/g, '&')
+                .replace(/&lt;/g, '<')
+                .replace(/&gt;/g, '>');
+
+            // If it looks like an arrow function or function reference, wrap it
+            const isArrow = decoded.includes('=>');
+            const isCall = decoded.includes('(');
+
+            if (isArrow) {
+                // Arrow function: `(e) => __self.setState(...)` or `() => ...`
+                // eslint-disable-next-line no-new-func
+                const fn = new Function('__self', `return ${decoded}`)(comp);
+                return typeof fn === 'function' ? fn : null;
+            } else if (isCall) {
+                // Method call: `__self.handleClick()`
+                // eslint-disable-next-line no-new-func
+                return new Function('__self', 'event', `${decoded}`).bind(null, comp);
+            } else {
+                // Bare identifier: method name on the component
+                return comp[decoded] ? comp[decoded].bind(comp) : null;
+            }
+        } catch (e) {
+            console.warn(`el-ui: failed to compile handler: ${expr}`, e);
+            return null;
+        }
+    }
+}

ui/runtime/src/router.js

@@ -0,0 +1,136 @@
+/**
+ * router.js — Graph-based routing for el-ui.
+ *
+ * Routes are nodes in the graph. Navigation activates the target route node,
+ * which spreads through the graph to any components subscribed to routing.
+ * This means route changes propagate with the same activation semantics as
+ * state changes — route-dependent components update automatically.
+ *
+ * Route nodes have:
+ *   type: 'route'
+ *   name: the path string
+ *   content: the path string
+ *   importance: starts at 0.5, boosted on activation (recently visited routes
+ *               become more salient — models browser history behavior)
+ */
+
+export class Router {
+    /**
+     * @param {import('./graph.js').Graph} graph
+     * @param {Record<string, any>} routes  path → Component class
+     */
+    constructor(graph, routes) {
+        this.graph = graph;
+        this.routes = routes;
+        this.currentPath = window.location.pathname;
+        this._routeNodes = {};
+        this._subscribers = [];
+
+        // Seed each route as a node in the graph
+        for (const [path] of Object.entries(routes)) {
+            const id = graph.seed({ type: 'route', name: path, content: path, importance: 0.3 });
+            this._routeNodes[path] = id;
+        }
+
+        // Connect route nodes in path order (parent → child activation chain)
+        // e.g., / → /about → /about/team
+        const paths = Object.keys(routes).sort();
+        for (let i = 0; i < paths.length - 1; i++) {
+            const parent = paths[i];
+            const child = paths[i + 1];
+            if (child.startsWith(parent) && parent !== child) {
+                graph.connect(this._routeNodes[parent], this._routeNodes[child], {
+                    weight: 0.8,
+                    relation: 'subroute',
+                });
+            }
+        }
+
+        // Listen for browser back/forward
+        window.addEventListener('popstate', () => {
+            this._activate(window.location.pathname);
+        });
+    }
+
+    /**
+     * Navigate to a path, update history, and activate the route graph node.
+     * @param {string} path
+     * @param {boolean} [replace=false]  use replaceState instead of pushState
+     */
+    navigate(path, replace = false) {
+        if (path === this.currentPath) return;
+
+        if (replace) {
+            history.replaceState({}, '', path);
+        } else {
+            history.pushState({}, '', path);
+        }
+
+        this._activate(path);
+    }
+
+    /**
+     * Get the Component class for the current path.
+     * Falls back to the '*' wildcard route if present.
+     * @returns {any}
+     */
+    currentComponent() {
+        return this.routes[this.currentPath] ?? this.routes['*'] ?? null;
+    }
+
+    /**
+     * Subscribe to route changes.
+     * @param {function(string): void} callback  called with the new path
+     * @returns {function} unsubscribe
+     */
+    subscribe(callback) {
+        this._subscribers.push(callback);
+        return () => {
+            const idx = this._subscribers.indexOf(callback);
+            if (idx >= 0) this._subscribers.splice(idx, 1);
+        };
+    }
+
+    /**
+     * Generate an href-compatible link string.
+     * @param {string} path
+     * @returns {string}
+     */
+    href(path) {
+        return path;
+    }
+
+    /** @private */
+    _activate(path) {
+        const prevPath = this.currentPath;
+        this.currentPath = path;
+
+        // Find the best matching route
+        const matchedPath = this._matchPath(path);
+        if (matchedPath && this._routeNodes[matchedPath]) {
+            // Spreading activation from the new route node
+            this.graph.activate(this._routeNodes[matchedPath]);
+            // Boost importance of the newly visited route
+            const node = this.graph.get(this._routeNodes[matchedPath]);
+            if (node) node.importance = Math.min(1.0, node.importance + 0.2);
+        }
+
+        // Notify route subscribers
+        if (path !== prevPath) {
+            this._subscribers.forEach(cb => cb(path));
+        }
+    }
+
+    /** @private */
+    _matchPath(path) {
+        // Exact match first
+        if (this.routes[path]) return path;
+        // Prefix match (longest prefix wins)
+        const candidates = Object.keys(this.routes)
+            .filter(r => r !== '*' && path.startsWith(r))
+            .sort((a, b) => b.length - a.length);
+        if (candidates.length > 0) return candidates[0];
+        // Wildcard
+        return '*';
+    }
+}

ui/spec/framework.md

@@ -0,0 +1,578 @@
+# el-ui Framework Specification
+
+Version 0.1.0 — April 2026
+
+---
+
+## Overview
+
+el-ui is a frontend framework where state is an Engram graph and reactivity is spreading activation.
+
+Every framework answers the same question differently: **what re-renders when state changes?**
+
+| Framework | Reactivity model |
+|-----------|-----------------|
+| React | Virtual DOM diffing |
+| Vue | Dependency tracking (Proxy-based) |
+| Svelte | Compile-time analysis |
+| **el-ui** | **Spreading activation over a state graph** |
+
+The core insight: treating component state as a graph of related nodes, and using the same spreading activation algorithm as the Engram knowledge engine to determine what to update. Reactivity is not declared, tracked, or diffed — it is activated and propagated, exactly as associative memory works in biological neural networks.
+
+---
+
+## 1. Activation-Based Reactivity
+
+### 1.1 The Model
+
+Every piece of state in an el-ui application is a **node** in an in-browser Engram graph. Nodes have:
+
+- `id` — UUID, the node's identity
+- `type` — `'state'`, `'route'`, or user-defined
+- `name` — the state variable name
+- `content` — the current value
+- `importance` — a salience weight `[0, 1]`, boosted when the node is activated
+
+Nodes are connected by **edges** with a `weight` `[0, 1]` and a `relation` label.
+
+When state changes (via `setState()`), spreading activation runs from the changed node:
+
+```
+strength = parent_strength × edge.weight × target.importance
+```
+
+This is multiplicative, matching the Engram core engine (`engram-core/src/activation.rs`). Every factor must be non-trivial for a path to propagate — weak edges, dormant nodes, and irrelevant connections die immediately. Components subscribed to nodes in the resulting **activation surface** update. Everything else stays still.
+
+### 1.2 Why Multiplication, Not Addition
+
+Addition allows many weak signals to accumulate into false relevance — an observation from the Engram architecture. The brain's associative memory is conjunctive: a path requires ALL its links to be strong. Multiplication enforces this. If any factor is near zero, the path dies.
+
+### 1.3 Pruning
+
+Paths with activation strength below `PRUNE_THRESHOLD` (default: `0.01`) are cut. This prevents exponential blowup in large state graphs and models the brain's attention filter.
+
+### 1.4 Importance Boost
+
+When a node is updated, its importance increases by 0.1 (capped at 1.0). Recently-changed state is more salient — it activates more easily in future propagation. This mirrors long-term potentiation: frequently-used pathways become lower-resistance.
+
+---
+
+## 2. Component Definition Syntax
+
+Components are defined in `.el` files (the same extension as engram-lang source). A component is a specialized engram-lang module.
+
+### 2.1 Structure
+
+```
+component ComponentName {
+    props {
+        // optional prop declarations
+    }
+
+    state {
+        // optional state declarations
+    }
+
+    fn methodName(param: Type) -> ReturnType {
+        // method body
+    }
+
+    template {
+        // HTML template
+    }
+}
+```
+
+All four sections (`props`, `state`, methods, `template`) are optional. Components with no template render an empty string.
+
+### 2.2 Props
+
+Props are inputs from the parent component. They are read-only inside the component.
+
+```
+props {
+    label: String               // required
+    variant: String = "primary" // optional, with default
+    disabled: Bool = false      // boolean with default
+    onClick: Fn() -> Void       // function prop
+}
+```
+
+Prop types: `String`, `Int`, `Float`, `Bool`, `Fn(...) -> T`, `[T]`, `T?`.
+
+### 2.3 State
+
+State declarations create nodes in the component's Engram graph.
+
+```
+state {
+    count: Int = 0
+    label: String = "hello"
+    active: Bool = false
+}
+```
+
+Each state variable becomes:
+1. A node in `this._graph` (seeded at construction time)
+2. A reactive binding: changing the value via `setState()` triggers activation
+
+### 2.4 Methods
+
+Methods are `fn` definitions inside the component body. They have access to the component's current state and can call `setState()`.
+
+```
+fn increment() -> Void {
+    count = count + 1
+}
+```
+
+State assignments in method bodies (`count = count + 1`) are compiled to `setState('count', count + 1)` calls.
+
+---
+
+## 3. Template Syntax
+
+### 3.1 Interpolation
+
+Embed any expression with `{expr}`:
+
+```
+<h1>{count}</h1>
+<p>{"Hello, " + name + "!"}</p>
+<span>{active ? "on" : "off"}</span>
+```
+
+### 3.2 Event Binding
+
+Bind DOM events with `on:event={handler}`:
+
+```
+<button on:click={() => count = count + 1}>+</button>
+<input on:input={(e) => value = e.target.value} />
+<div on:mouseenter={() => hovered = true} on:mouseleave={() => hovered = false} />
+```
+
+Supported events: `click`, `input`, `change`, `mouseenter`, `mouseleave`, `keydown`, `keyup`, `keypress`, `focus`, `blur`, `submit`, `mousedown`, `mouseup`, `dblclick`, `contextmenu`.
+
+The compiler emits `data-el-{event}` attributes. The renderer binds handlers at mount time and rebinds after each patch.
+
+### 3.3 Dynamic Attributes
+
+```
+<div class={active ? "btn-active" : "btn"}></div>
+<a href={currentUrl}></a>
+```
+
+### 3.4 Static Attributes
+
+```
+<div class="container"></div>
+<input type="text" />
+```
+
+### 3.5 Boolean Attributes
+
+```
+<button disabled={isDisabled}>Submit</button>
+<input checked={isChecked} />
+```
+
+Boolean attributes emit the attribute name if the expression is truthy, nothing if falsy.
+
+### 3.6 Component Usage
+
+Components are invoked by their name (uppercase first letter). Props are passed as attributes:
+
+```
+<Button label="Click me" variant="primary" onClick={() => handleClick()} />
+<Counter />
+<UserCard name={currentUser.name} />
+```
+
+Lowercase tags are HTML elements. Uppercase tags are el-ui components.
+
+### 3.7 Conditional Rendering — `{#if}`
+
+```
+{#if condition}
+    <div>shown when true</div>
+{/if}
+
+{#if loggedIn}
+    <Dashboard />
+{:else}
+    <Login />
+{/if}
+```
+
+The condition is any JavaScript-compatible boolean expression.
+
+### 3.8 List Rendering — `{#each}`
+
+```
+{#each items as item}
+    <li>{item}</li>
+{/each}
+
+{#each users as user}
+    <UserCard name={user.name} />
+{/each}
+```
+
+The items expression must evaluate to an array.
+
+### 3.9 Semantic Activation — `{#activate}` (The Novel Construct)
+
+```
+{#activate "recent premium subscribers" as results}
+    <UserCard name={results.name} />
+{/activate}
+```
+
+This is el-ui's distinguishing feature. `{#activate}` runs a semantic query against the application's state graph at render time. The query string is a natural language description. The runtime:
+
+1. Searches the graph for nodes whose content or name matches the query.
+2. Sorts results by their activation score (importance × text match score).
+3. Renders the template body once for each result, binding the result as `results`.
+
+In v0.1, the search is string-based. In future versions, it will use embedding vectors and cosine similarity — the same semantic search engine as the Engram knowledge database. This means state queries become conceptual rather than structural: instead of `items.filter(i => i.type === 'premium')`, you write `{#activate "premium subscribers"}` and the activation surface finds semantically matching nodes.
+
+---
+
+## 4. The State Graph
+
+### 4.1 Graph Structure
+
+Each component instance owns an Engram graph (`this._graph`). State nodes are seeded at construction time. The graph is shared between a component and its children (they operate on the same activation surface).
+
+### 4.2 Node Types
+
+| Type | Description |
+|------|-------------|
+| `'state'` | Component state variable |
+| `'route'` | Router path node |
+| User-defined | Any custom node type via `this._graph.seed()` |
+
+### 4.3 Seeding Nodes
+
+```javascript
+const nodeId = graph.seed({ type: 'state', name: 'count', content: 0, importance: 0.5 });
+```
+
+Returns a UUID string that permanently identifies the node.
+
+### 4.4 Connecting Nodes
+
+```javascript
+graph.connect(fromId, toId, { weight: 0.8, relation: 'derived' });
+```
+
+Connects two nodes with a directed edge. Higher weight = stronger activation path. Use this to encode semantic relationships between state (e.g., a derived value has an edge from its source).
+
+### 4.5 Subscribing to Activation
+
+```javascript
+const unsubscribe = graph.subscribe(nodeId, (node) => {
+    console.log('node activated:', node.content);
+});
+// Later:
+unsubscribe();
+```
+
+### 4.6 Semantic Search
+
+```javascript
+const results = graph.search("recent items", "state");
+// Returns array of { id, name, content, importance, score } sorted by score
+```
+
+---
+
+## 5. The `{#activate}` Construct — Semantic State Queries
+
+### 5.1 Philosophy
+
+Traditional reactivity systems force you to structure your state queries around your storage schema. If you need "all premium users with recent activity", you write:
+
+```javascript
+users.filter(u => u.isPremium && u.lastActive > threshold)
+```
+
+This is structural — it knows the shape of your data.
+
+el-ui's `{#activate}` is semantic — it knows the *meaning* of your query:
+
+```
+{#activate "premium users with recent activity" as users}
+```
+
+The activation engine finds nodes that semantically match the query, regardless of their exact structure.
+
+### 5.2 Compilation
+
+`{#activate "query" as results}` compiles to:
+
+```javascript
+${(this._graph.search("query") || []).map((results) => `...template...`).join('')}
+```
+
+### 5.3 Future: Full Semantic Activation
+
+In a future version connected to an Engram database, `{#activate}` will:
+1. Embed the query string into the same vector space as node embeddings.
+2. Seed activation at the closest semantic nodes.
+3. Spread outward via the graph's weighted edges.
+4. Return all nodes above the activation threshold.
+
+This produces a truly associative query: finding nodes that are *semantically related* to the query, not just textually matching.
+
+---
+
+## 6. Router — Graph-Based Routing
+
+### 6.1 Overview
+
+Routes are nodes in the application graph. Navigation activates the target route node. Components subscribed to routing update automatically via spreading activation.
+
+### 6.2 Usage
+
+```javascript
+import { Router, mount } from './el-ui.js';
+import { Home, About, NotFound } from './app.js';
+
+const graph = component._graph;
+const router = new Router(graph, {
+    '/': Home,
+    '/about': About,
+    '*': NotFound,
+});
+
+// Navigate programmatically
+router.navigate('/about');
+
+// Get current component
+const CurrentPage = router.currentComponent();
+
+// Subscribe to route changes
+const unsub = router.subscribe((path) => console.log('navigated to', path));
+```
+
+### 6.3 Route Node Connections
+
+The router connects parent routes to child routes via edges (weight: 0.8, relation: `'subroute'`). Navigating to `/about/team` activates the `/about` route node as well (activation spreads upward through the subroute chain).
+
+### 6.4 Path Matching
+
+1. Exact match: `/about` matches `/about`
+2. Prefix match (longest wins): `/about` matches `/about/team`
+3. Wildcard: `'*'` catches all unmatched paths
+
+---
+
+## 7. Plugin API
+
+### 7.1 Custom Node Types
+
+Extend the graph with application-specific node types:
+
+```javascript
+import { mount } from './el-ui.js';
+import { App } from './app.js';
+
+const component = mount(App, '#app');
+
+// Add a custom "user session" node
+const sessionNodeId = component._graph.seed({
+    type: 'session',
+    name: 'currentUser',
+    content: { id: '123', name: 'Alice' },
+    importance: 0.9,
+});
+
+// Connect it to a state node for reactive updates
+component._graph.connect(sessionNodeId, component._stateNodes['userId'], {
+    weight: 1.0,
+    relation: 'owns',
+});
+```
+
+### 7.2 Custom Activation Sources
+
+Trigger activation from any node, not just state updates:
+
+```javascript
+import { spreadActivation } from './el-ui.js';
+
+// Run a custom activation query
+const results = spreadActivation(graph, [myNodeId], {
+    maxDepth: 4,
+    limit: 10,
+    pruneThreshold: 0.05,
+});
+
+results.forEach(({ nodeId, strength, node }) => {
+    console.log(`${node.name}: ${strength.toFixed(3)}`);
+});
+```
+
+### 7.3 Component Lifecycle Extension
+
+```javascript
+class MyComponent extends Component {
+    constructor(props) {
+        super(props);
+        // Seed custom nodes
+        this._externalData = this._graph.seed({
+            type: 'external',
+            name: 'fetchedData',
+            content: null,
+            importance: 0.7,
+        });
+    }
+
+    onMount() {
+        // Side effects after first render
+        fetch('/api/data')
+            .then(r => r.json())
+            .then(data => {
+                this._graph.update(this._externalData, data);
+            });
+    }
+
+    render() {
+        const data = this._graph.get(this._externalData)?.content;
+        return data ? `<div>${data.title}</div>` : `<div>Loading...</div>`;
+    }
+}
+```
+
+---
+
+## 8. Compilation Pipeline
+
+### 8.1 Overview
+
+```
+source.el  →  [lexer]  →  [parser]  →  [codegen]  →  output.js
+```
+
+### 8.2 Lexer (`crates/el-ui-compiler/src/lexer.rs`)
+
+The lexer is a single-pass, O(n) tokenizer. It is context-sensitive: when it encounters the `template` keyword followed by `{`, it switches to template mode, producing template-specific tokens:
+
+| Token | Description |
+|-------|-------------|
+| `HashIdent(kw)` | `{#if}`, `{#each}`, `{#activate}` |
+| `SlashIdent(kw)` | `{/if}`, `{/each}`, `{/activate}` |
+| `ColonIdent(kw)` | `{:else}` |
+| `OnColon(event)` | `on:click`, `on:input`, etc. |
+| `SelfClose` | `/>` |
+| `CloseTag(name)` | `</div>` |
+| `RawText(s)` | Inline expression text, text content |
+
+### 8.3 Parser (`crates/el-ui-compiler/src/parser.rs`)
+
+Hand-written recursive descent. Produces `Vec<Component>`. Each component is parsed as:
+
+1. `component Name {` — component declaration
+2. `props { ... }` — prop definitions (optional)
+3. `state { ... }` — state definitions (optional)
+4. `fn method(...) -> Type { ... }` — methods (optional, multiple)
+5. `template { ... }` — template tree (optional)
+
+The template is parsed as a tree of `TemplateNode` values. HTML elements, component references, interpolations, and block directives are all represented as nodes in this tree.
+
+### 8.4 Code Generator (`crates/el-ui-compiler/src/codegen.rs`)
+
+The code generator transforms the AST into a JavaScript ES2022 module. For each component:
+
+1. Emits a class extending `Component` from the runtime.
+2. In the constructor: seeds state nodes into `this._graph`, subscribes to activation events.
+3. Emits `setState()`, which calls `this._graph.update()` to trigger activation.
+4. Emits a `render()` method returning a template literal string.
+5. Translates state assignments in methods: `count = count + 1` → `this.setState('count', count + 1)`.
+6. Translates template interpolations: `{count}` → `${count}`.
+7. Emits event handlers as `data-el-{event}` attributes for the renderer to bind.
+
+### 8.5 CLI
+
+```bash
+# Compile a single .el file
+el-ui-compiler App.el -o app.js
+
+# Default output: same name, .js extension
+el-ui-compiler App.el   # produces App.js
+```
+
+---
+
+## 9. Production Build — Quantum-Sealed via engram-crypto
+
+The production build pipeline follows the engram-lang sealed artifact format:
+
+```bash
+# 1. Compile .el to .js
+el-ui-compiler App.el -o app.js --target prod
+
+# 2. Seal the JavaScript bundle
+ENGRAM_SEAL_KEY=my-deploy-key el seal app.js -o app.sealed
+```
+
+The sealed artifact is an `ENGRAM01` sealed bundle (same format as the engram-lang production target):
+
+```
+Offset  Size    Field
+──────  ──────  ─────────────────────────────────────────
+0       8       Magic: b"ENGRAM01"
+8       2       Format version: u16 big-endian (currently 1)
+10      *       JSON: { algorithm_id, signature, encapsulated_key, nonce, ciphertext }
+```
+
+AES-256-GCM encryption. The key is derived from the deployment binding (environment variable, machine fingerprint, or none). Without the key, the bundle is indistinguishable from random bytes. No static analysis tool can extract the application logic, queries, or API keys from a sealed bundle.
+
+**Why "quantum-sealed":** AES-256 is quantum-resistant at 128-bit quantum security (Grover's algorithm provides only a quadratic speedup). The `algorithm_id` field is forward-compatible with ML-KEM when it stabilizes.
+
+### 9.1 The `{#activate}` Query is Protected
+
+A key benefit of production sealing: `{#activate}` query strings are embedded in the compiled bundle and encrypted with the application logic. Proprietary semantic queries (which encode business logic about how your application understands its data) are invisible to competitors who decompile your application.
+
+---
+
+## 10. Runtime Size Target
+
+The `dist/el-ui.js` runtime targets **under 15KB minified and gzipped**. As of v0.1:
+
+| Module | Purpose | ~Size |
+|--------|---------|-------|
+| `graph.js` | Engram graph (nodes, edges, activation, search, subscribe) | ~3KB |
+| `activation.js` | Standalone activation utilities | ~1.5KB |
+| `renderer.js` | DOM patching, event binding | ~2KB |
+| `router.js` | Graph-based routing | ~1.5KB |
+| `index.js` | Component base class, `mount()`, re-exports | ~1KB |
+
+Total: ~9KB source, ~4KB minified+gzipped (estimated).
+
+---
+
+## 11. Versioning and Compatibility
+
+el-ui follows semantic versioning.
+
+- **v0.1.x** — Initial release. Full re-render on state change. String-based `{#activate}` search.
+- **v0.2.x** — Targeted DOM patching (patch only nodes in the activation surface). `{#activate}` with embedding-based semantic search.
+- **v0.3.x** — ML-KEM sealed artifacts. Engram database integration for compile-time semantic type checking of `{#activate}` queries.
+- **v1.0.0** — Stable API. Full production sealing. LSP integration with spreading activation autocomplete.
+
+---
+
+## 12. Relationship to engram-lang
+
+el-ui `.el` files share the `.el` extension with engram-lang source files. Components are specialized engram-lang modules — in a future version, an `.el` file can mix component definitions with engram-lang type definitions, constants, and utility functions in a single compilation unit.
+
+The spreading activation algorithm in `graph.js` and `activation.js` faithfully mirrors `engram-core/src/activation.rs`:
+- Same BFS-based traversal
+- Same multiplicative strength formula
+- Same pruning threshold semantics
+- Same winner-take-most rule (strongest path to each node wins)
+
+The in-browser graph is a lightweight implementation without Engram's full embedding vector machinery. In production, a WASM-compiled Engram core can replace the JavaScript graph entirely, enabling true semantic activation with cosine similarity over embedding vectors.