From f4abfe6fdcc7ada3bfd223290e9ce376fa6a158e Mon Sep 17 00:00:00 2001
From: Will Anderson <will@neuralplatform.ai>
Date: Thu, 30 Apr 2026 18:18:39 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20rename=20crates/=20=E2=86=92=20vessels/?=
 =?UTF-8?q?=20+=20add=20El=20ports=20per=20sub-vessel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Belated rename commit for foundation/el-ui — was missed in the
workspace-wide crates→vessels pass earlier today. Same structural
intent as the rename in the other repos: 'crates' is the Rust word,
'vessel' is El's, and the directory rename is the marker that this
slot holds an El buildable unit even if its current contents are
still Rust pending port.

Plus the El ports themselves — manifest.el + src/main.el per sub-
vessel (el-aop, el-auth, el-config, el-i18n, el-identity, el-layout,
el-platform, el-publish, el-secrets, el-services, el-style, el-ui-
compiler). The ui-compiler is a stub: elc only emits C right now;
generating browser-target JS/Wasm is the biggest open language gap
and gets its own project. Until then, el-ui-compiler emits a JS
module that throws elc.backend_missing so callers fail loudly.
Cross-repo path dependencies in Cargo.toml updated to vessels/.
---
 Cargo.toml                                    |   24 +-
 crates/el-ui-compiler/src/codegen.rs          |  581 ------
 examples/profile-card/Cargo.toml              |   10 +-
 spec/framework.md                             |  727 ++++---
 {crates => vessels}/el-aop/Cargo.toml         |    0
 vessels/el-aop/manifest.el                    |   22 +
 {crates => vessels}/el-aop/src/aspects.rs     |    0
 {crates => vessels}/el-aop/src/chain.rs       |    0
 {crates => vessels}/el-aop/src/lib.rs         |    0
 vessels/el-aop/src/main.el                    |  223 +++
 {crates => vessels}/el-aop/src/public.rs      |    0
 {crates => vessels}/el-aop/src/registry.rs    |    0
 {crates => vessels}/el-aop/src/tests.rs       |    0
 {crates => vessels}/el-auth/Cargo.toml        |    0
 vessels/el-auth/manifest.el                   |   22 +
 {crates => vessels}/el-auth/src/context.rs    |    0
 .../el-auth/src/engram_session.rs             |    0
 {crates => vessels}/el-auth/src/jwt.rs        |    0
 {crates => vessels}/el-auth/src/lib.rs        |    0
 vessels/el-auth/src/main.el                   |  201 ++
 {crates => vessels}/el-auth/src/middleware.rs |    0
 {crates => vessels}/el-auth/src/roles.rs      |    0
 {crates => vessels}/el-auth/src/session.rs    |    0
 {crates => vessels}/el-auth/src/tests.rs      |    0
 {crates => vessels}/el-config/Cargo.toml      |    0
 vessels/el-config/manifest.el                 |   24 +
 {crates => vessels}/el-config/src/config.rs   |    0
 {crates => vessels}/el-config/src/env.rs      |    0
 {crates => vessels}/el-config/src/error.rs    |    0
 {crates => vessels}/el-config/src/lib.rs      |    0
 vessels/el-config/src/main.el                 |  177 ++
 {crates => vessels}/el-config/src/source.rs   |    0
 {crates => vessels}/el-i18n/Cargo.toml        |    0
 vessels/el-i18n/manifest.el                   |   19 +
 {crates => vessels}/el-i18n/src/bundle.rs     |    0
 {crates => vessels}/el-i18n/src/format.rs     |    0
 {crates => vessels}/el-i18n/src/lib.rs        |    0
 {crates => vessels}/el-i18n/src/locale.rs     |    0
 vessels/el-i18n/src/main.el                   |  208 ++
 {crates => vessels}/el-i18n/src/plural.rs     |    0
 {crates => vessels}/el-i18n/src/t.rs          |    0
 {crates => vessels}/el-identity/Cargo.toml    |    0
 vessels/el-identity/manifest.el               |   24 +
 .../el-identity/src/context.rs                |    0
 {crates => vessels}/el-identity/src/engram.rs |    0
 {crates => vessels}/el-identity/src/error.rs  |    0
 {crates => vessels}/el-identity/src/guard.rs  |    0
 {crates => vessels}/el-identity/src/lib.rs    |    0
 vessels/el-identity/src/main.el               |  271 +++
 {crates => vessels}/el-identity/src/nodes.rs  |    0
 {crates => vessels}/el-identity/src/oauth.rs  |    0
 .../el-identity/src/provider.rs               |    0
 .../el-identity/src/session.rs                |    0
 {crates => vessels}/el-identity/src/tests.rs  |    0
 {crates => vessels}/el-layout/Cargo.toml      |    0
 vessels/el-layout/manifest.el                 |   21 +
 .../el-layout/src/breakpoint.rs               |    0
 .../el-layout/src/constraints.rs              |    0
 {crates => vessels}/el-layout/src/flex.rs     |    0
 {crates => vessels}/el-layout/src/grid.rs     |    0
 {crates => vessels}/el-layout/src/lib.rs      |    0
 vessels/el-layout/src/main.el                 |  237 +++
 {crates => vessels}/el-layout/src/platform.rs |    0
 .../el-layout/src/responsive.rs               |    0
 {crates => vessels}/el-layout/src/scroll.rs   |    0
 {crates => vessels}/el-layout/src/stack.rs    |    0
 {crates => vessels}/el-platform/Cargo.toml    |    0
 vessels/el-platform/manifest.el               |   23 +
 .../el-platform/src/backends/android.rs       |    0
 .../el-platform/src/backends/ios.rs           |    0
 .../el-platform/src/backends/linux.rs         |    0
 .../el-platform/src/backends/macos.rs         |    0
 .../el-platform/src/backends/mod.rs           |    0
 .../el-platform/src/backends/server.rs        |    0
 .../el-platform/src/backends/tests.rs         |    0
 .../el-platform/src/backends/web.rs           |    0
 .../el-platform/src/backends/windows.rs       |    0
 {crates => vessels}/el-platform/src/config.rs |    0
 {crates => vessels}/el-platform/src/lib.rs    |    0
 vessels/el-platform/src/main.el               |  152 ++
 {crates => vessels}/el-platform/src/node.rs   |    0
 {crates => vessels}/el-publish/Cargo.toml     |    0
 vessels/el-publish/manifest.el                |   25 +
 {crates => vessels}/el-publish/src/apple.rs   |    0
 {crates => vessels}/el-publish/src/cert.rs    |    0
 {crates => vessels}/el-publish/src/config.rs  |    0
 {crates => vessels}/el-publish/src/google.rs  |    0
 {crates => vessels}/el-publish/src/lib.rs     |    0
 vessels/el-publish/src/main.el                |  243 +++
 .../el-publish/src/metadata.rs                |    0
 {crates => vessels}/el-publish/src/rollout.rs |    0
 .../el-publish/src/screenshot.rs              |    0
 {crates => vessels}/el-publish/src/tests.rs   |    0
 {crates => vessels}/el-secrets/Cargo.toml     |    0
 vessels/el-secrets/manifest.el                |   20 +
 {crates => vessels}/el-secrets/src/error.rs   |    0
 {crates => vessels}/el-secrets/src/lib.rs     |    0
 vessels/el-secrets/src/main.el                |  195 ++
 .../el-secrets/src/resolver.rs                |    0
 {crates => vessels}/el-secrets/src/secret.rs  |    0
 {crates => vessels}/el-secrets/src/source.rs  |    0
 {crates => vessels}/el-services/Cargo.toml    |    0
 vessels/el-services/manifest.el               |   20 +
 .../el-services/src/binding/direct.rs         |    0
 .../el-services/src/binding/grpc.rs           |    0
 .../el-services/src/binding/mod.rs            |    0
 .../el-services/src/binding/rest.rs           |    0
 .../el-services/src/binding/websocket.rs      |    0
 {crates => vessels}/el-services/src/config.rs |    0
 {crates => vessels}/el-services/src/lib.rs    |    0
 vessels/el-services/src/main.el               |  197 ++
 {crates => vessels}/el-services/src/proxy.rs  |    0
 .../el-services/src/registry.rs               |    0
 {crates => vessels}/el-services/src/tests.rs  |    0
 {crates => vessels}/el-style/Cargo.toml       |    0
 vessels/el-style/manifest.el                  |   21 +
 {crates => vessels}/el-style/src/color.rs     |    0
 {crates => vessels}/el-style/src/lib.rs       |    0
 vessels/el-style/src/main.el                  |  231 +++
 {crates => vessels}/el-style/src/modifier.rs  |    0
 {crates => vessels}/el-style/src/radius.rs    |    0
 {crates => vessels}/el-style/src/shadow.rs    |    0
 {crates => vessels}/el-style/src/spacing.rs   |    0
 .../el-style/src/stylesheet.rs                |    0
 {crates => vessels}/el-style/src/theme.rs     |    0
 .../el-style/src/typography.rs                |    0
 {crates => vessels}/el-ui-compiler/Cargo.toml |    0
 vessels/el-ui-compiler/manifest.el            |   28 +
 {crates => vessels}/el-ui-compiler/src/ast.rs |    0
 vessels/el-ui-compiler/src/codegen.rs         | 1733 +++++++++++++++++
 .../el-ui-compiler/src/error.rs               |    0
 .../el-ui-compiler/src/lexer.rs               |    0
 {crates => vessels}/el-ui-compiler/src/lib.rs |    1 +
 vessels/el-ui-compiler/src/main.el            |  142 ++
 .../el-ui-compiler/src/main.rs                |    0
 .../el-ui-compiler/src/parser.rs              |    0
 vessels/el-ui-compiler/src/semantic.rs        |  523 +++++
 .../el-ui-compiler/src/tests.rs               |    0
 138 files changed, 5445 insertions(+), 900 deletions(-)
 delete mode 100644 crates/el-ui-compiler/src/codegen.rs
 rename {crates => vessels}/el-aop/Cargo.toml (100%)
 create mode 100644 vessels/el-aop/manifest.el
 rename {crates => vessels}/el-aop/src/aspects.rs (100%)
 rename {crates => vessels}/el-aop/src/chain.rs (100%)
 rename {crates => vessels}/el-aop/src/lib.rs (100%)
 create mode 100644 vessels/el-aop/src/main.el
 rename {crates => vessels}/el-aop/src/public.rs (100%)
 rename {crates => vessels}/el-aop/src/registry.rs (100%)
 rename {crates => vessels}/el-aop/src/tests.rs (100%)
 rename {crates => vessels}/el-auth/Cargo.toml (100%)
 create mode 100644 vessels/el-auth/manifest.el
 rename {crates => vessels}/el-auth/src/context.rs (100%)
 rename {crates => vessels}/el-auth/src/engram_session.rs (100%)
 rename {crates => vessels}/el-auth/src/jwt.rs (100%)
 rename {crates => vessels}/el-auth/src/lib.rs (100%)
 create mode 100644 vessels/el-auth/src/main.el
 rename {crates => vessels}/el-auth/src/middleware.rs (100%)
 rename {crates => vessels}/el-auth/src/roles.rs (100%)
 rename {crates => vessels}/el-auth/src/session.rs (100%)
 rename {crates => vessels}/el-auth/src/tests.rs (100%)
 rename {crates => vessels}/el-config/Cargo.toml (100%)
 create mode 100644 vessels/el-config/manifest.el
 rename {crates => vessels}/el-config/src/config.rs (100%)
 rename {crates => vessels}/el-config/src/env.rs (100%)
 rename {crates => vessels}/el-config/src/error.rs (100%)
 rename {crates => vessels}/el-config/src/lib.rs (100%)
 create mode 100644 vessels/el-config/src/main.el
 rename {crates => vessels}/el-config/src/source.rs (100%)
 rename {crates => vessels}/el-i18n/Cargo.toml (100%)
 create mode 100644 vessels/el-i18n/manifest.el
 rename {crates => vessels}/el-i18n/src/bundle.rs (100%)
 rename {crates => vessels}/el-i18n/src/format.rs (100%)
 rename {crates => vessels}/el-i18n/src/lib.rs (100%)
 rename {crates => vessels}/el-i18n/src/locale.rs (100%)
 create mode 100644 vessels/el-i18n/src/main.el
 rename {crates => vessels}/el-i18n/src/plural.rs (100%)
 rename {crates => vessels}/el-i18n/src/t.rs (100%)
 rename {crates => vessels}/el-identity/Cargo.toml (100%)
 create mode 100644 vessels/el-identity/manifest.el
 rename {crates => vessels}/el-identity/src/context.rs (100%)
 rename {crates => vessels}/el-identity/src/engram.rs (100%)
 rename {crates => vessels}/el-identity/src/error.rs (100%)
 rename {crates => vessels}/el-identity/src/guard.rs (100%)
 rename {crates => vessels}/el-identity/src/lib.rs (100%)
 create mode 100644 vessels/el-identity/src/main.el
 rename {crates => vessels}/el-identity/src/nodes.rs (100%)
 rename {crates => vessels}/el-identity/src/oauth.rs (100%)
 rename {crates => vessels}/el-identity/src/provider.rs (100%)
 rename {crates => vessels}/el-identity/src/session.rs (100%)
 rename {crates => vessels}/el-identity/src/tests.rs (100%)
 rename {crates => vessels}/el-layout/Cargo.toml (100%)
 create mode 100644 vessels/el-layout/manifest.el
 rename {crates => vessels}/el-layout/src/breakpoint.rs (100%)
 rename {crates => vessels}/el-layout/src/constraints.rs (100%)
 rename {crates => vessels}/el-layout/src/flex.rs (100%)
 rename {crates => vessels}/el-layout/src/grid.rs (100%)
 rename {crates => vessels}/el-layout/src/lib.rs (100%)
 create mode 100644 vessels/el-layout/src/main.el
 rename {crates => vessels}/el-layout/src/platform.rs (100%)
 rename {crates => vessels}/el-layout/src/responsive.rs (100%)
 rename {crates => vessels}/el-layout/src/scroll.rs (100%)
 rename {crates => vessels}/el-layout/src/stack.rs (100%)
 rename {crates => vessels}/el-platform/Cargo.toml (100%)
 create mode 100644 vessels/el-platform/manifest.el
 rename {crates => vessels}/el-platform/src/backends/android.rs (100%)
 rename {crates => vessels}/el-platform/src/backends/ios.rs (100%)
 rename {crates => vessels}/el-platform/src/backends/linux.rs (100%)
 rename {crates => vessels}/el-platform/src/backends/macos.rs (100%)
 rename {crates => vessels}/el-platform/src/backends/mod.rs (100%)
 rename {crates => vessels}/el-platform/src/backends/server.rs (100%)
 rename {crates => vessels}/el-platform/src/backends/tests.rs (100%)
 rename {crates => vessels}/el-platform/src/backends/web.rs (100%)
 rename {crates => vessels}/el-platform/src/backends/windows.rs (100%)
 rename {crates => vessels}/el-platform/src/config.rs (100%)
 rename {crates => vessels}/el-platform/src/lib.rs (100%)
 create mode 100644 vessels/el-platform/src/main.el
 rename {crates => vessels}/el-platform/src/node.rs (100%)
 rename {crates => vessels}/el-publish/Cargo.toml (100%)
 create mode 100644 vessels/el-publish/manifest.el
 rename {crates => vessels}/el-publish/src/apple.rs (100%)
 rename {crates => vessels}/el-publish/src/cert.rs (100%)
 rename {crates => vessels}/el-publish/src/config.rs (100%)
 rename {crates => vessels}/el-publish/src/google.rs (100%)
 rename {crates => vessels}/el-publish/src/lib.rs (100%)
 create mode 100644 vessels/el-publish/src/main.el
 rename {crates => vessels}/el-publish/src/metadata.rs (100%)
 rename {crates => vessels}/el-publish/src/rollout.rs (100%)
 rename {crates => vessels}/el-publish/src/screenshot.rs (100%)
 rename {crates => vessels}/el-publish/src/tests.rs (100%)
 rename {crates => vessels}/el-secrets/Cargo.toml (100%)
 create mode 100644 vessels/el-secrets/manifest.el
 rename {crates => vessels}/el-secrets/src/error.rs (100%)
 rename {crates => vessels}/el-secrets/src/lib.rs (100%)
 create mode 100644 vessels/el-secrets/src/main.el
 rename {crates => vessels}/el-secrets/src/resolver.rs (100%)
 rename {crates => vessels}/el-secrets/src/secret.rs (100%)
 rename {crates => vessels}/el-secrets/src/source.rs (100%)
 rename {crates => vessels}/el-services/Cargo.toml (100%)
 create mode 100644 vessels/el-services/manifest.el
 rename {crates => vessels}/el-services/src/binding/direct.rs (100%)
 rename {crates => vessels}/el-services/src/binding/grpc.rs (100%)
 rename {crates => vessels}/el-services/src/binding/mod.rs (100%)
 rename {crates => vessels}/el-services/src/binding/rest.rs (100%)
 rename {crates => vessels}/el-services/src/binding/websocket.rs (100%)
 rename {crates => vessels}/el-services/src/config.rs (100%)
 rename {crates => vessels}/el-services/src/lib.rs (100%)
 create mode 100644 vessels/el-services/src/main.el
 rename {crates => vessels}/el-services/src/proxy.rs (100%)
 rename {crates => vessels}/el-services/src/registry.rs (100%)
 rename {crates => vessels}/el-services/src/tests.rs (100%)
 rename {crates => vessels}/el-style/Cargo.toml (100%)
 create mode 100644 vessels/el-style/manifest.el
 rename {crates => vessels}/el-style/src/color.rs (100%)
 rename {crates => vessels}/el-style/src/lib.rs (100%)
 create mode 100644 vessels/el-style/src/main.el
 rename {crates => vessels}/el-style/src/modifier.rs (100%)
 rename {crates => vessels}/el-style/src/radius.rs (100%)
 rename {crates => vessels}/el-style/src/shadow.rs (100%)
 rename {crates => vessels}/el-style/src/spacing.rs (100%)
 rename {crates => vessels}/el-style/src/stylesheet.rs (100%)
 rename {crates => vessels}/el-style/src/theme.rs (100%)
 rename {crates => vessels}/el-style/src/typography.rs (100%)
 rename {crates => vessels}/el-ui-compiler/Cargo.toml (100%)
 create mode 100644 vessels/el-ui-compiler/manifest.el
 rename {crates => vessels}/el-ui-compiler/src/ast.rs (100%)
 create mode 100644 vessels/el-ui-compiler/src/codegen.rs
 rename {crates => vessels}/el-ui-compiler/src/error.rs (100%)
 rename {crates => vessels}/el-ui-compiler/src/lexer.rs (100%)
 rename {crates => vessels}/el-ui-compiler/src/lib.rs (99%)
 create mode 100644 vessels/el-ui-compiler/src/main.el
 rename {crates => vessels}/el-ui-compiler/src/main.rs (100%)
 rename {crates => vessels}/el-ui-compiler/src/parser.rs (100%)
 create mode 100644 vessels/el-ui-compiler/src/semantic.rs
 rename {crates => vessels}/el-ui-compiler/src/tests.rs (100%)

diff --git a/Cargo.toml b/Cargo.toml
index 6241e2a..e44b5c8 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,17 +1,17 @@
 [workspace]
 members = [
-    "crates/el-ui-compiler",
-    "crates/el-platform",
-    "crates/el-services",
-    "crates/el-aop",
-    "crates/el-auth",
-    "crates/el-publish",
-    "crates/el-identity",
-    "crates/el-style",
-    "crates/el-layout",
-    "crates/el-i18n",
-    "crates/el-config",
-    "crates/el-secrets",
+    "vessels/el-ui-compiler",
+    "vessels/el-platform",
+    "vessels/el-services",
+    "vessels/el-aop",
+    "vessels/el-auth",
+    "vessels/el-publish",
+    "vessels/el-identity",
+    "vessels/el-style",
+    "vessels/el-layout",
+    "vessels/el-i18n",
+    "vessels/el-config",
+    "vessels/el-secrets",
     "examples/profile-card",
 ]
 resolver = "2"
diff --git a/crates/el-ui-compiler/src/codegen.rs b/crates/el-ui-compiler/src/codegen.rs
deleted file mode 100644
index c53849a..0000000
--- a/crates/el-ui-compiler/src/codegen.rs
+++ /dev/null
@@ -1,581 +0,0 @@
-//! 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.
-//!
-//! ## Codegen targets
-//!
-//! The `CodegenTarget` enum selects the output format:
-//!
-//! - `Web` — ES2022 module (current, default behavior)
-//! - `Server` — Rust code calling the `el-platform` server backend for SSR
-//! - `Native(Platform)` — Rust code calling the `el-platform` native backend trait
-
-use crate::ast::*;
-use crate::error::CompileResult;
-
-/// Which native platform to target when using `CodegenTarget::Native`.
-#[derive(Debug, Clone, PartialEq, Eq)]
-pub enum Platform {
-    Ios,
-    Android,
-    Macos,
-    Linux,
-    Windows,
-}
-
-impl Platform {
-    pub fn as_str(&self) -> &'static str {
-        match self {
-            Self::Ios => "ios",
-            Self::Android => "android",
-            Self::Macos => "macos",
-            Self::Linux => "linux",
-            Self::Windows => "windows",
-        }
-    }
-}
-
-/// Selects the output format for the code generator.
-///
-/// - `Web` — ES2022 JavaScript module (default, uses the el-ui JS runtime)
-/// - `Server` — Rust module that uses `el_platform::ServerBackend` for SSR.
-///   The generated Rust struct implements a `render_to_html()` method.
-/// - `Native(Platform)` — Rust module calling `el_platform::PlatformBackend`
-///   for the specified native platform (iOS, Android, macOS, Linux, Windows).
-#[derive(Debug, Clone, PartialEq, Eq)]
-pub enum CodegenTarget {
-    /// Current default — ES2022 JavaScript module for the browser.
-    Web,
-    /// Server-side rendering — generates Rust code using `el_platform::ServerBackend`.
-    Server,
-    /// Native platform — generates Rust code using the platform backend trait.
-    Native(Platform),
-}
-
-impl CodegenTarget {
-    pub fn is_web(&self) -> bool {
-        matches!(self, Self::Web)
-    }
-
-    pub fn is_rust_output(&self) -> bool {
-        matches!(self, Self::Server | Self::Native(_))
-    }
-}
-
-pub struct Codegen {
-    runtime_path: String,
-    /// The compilation target. Defaults to `Web`.
-    pub target: CodegenTarget,
-}
-
-impl Codegen {
-    pub fn new(runtime_path: &str) -> Self {
-        Self {
-            runtime_path: runtime_path.to_owned(),
-            target: CodegenTarget::Web,
-        }
-    }
-
-    pub fn with_target(mut self, target: CodegenTarget) -> Self {
-        self.target = target;
-        self
-    }
-
-    pub fn generate(&self, components: &[Component]) -> CompileResult<String> {
-        match &self.target {
-            CodegenTarget::Web => self.generate_web(components),
-            CodegenTarget::Server => self.generate_server_rust(components),
-            CodegenTarget::Native(platform) => self.generate_native_rust(components, platform),
-        }
-    }
-
-    fn generate_web(&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)
-    }
-
-    /// Generate Rust code for the `server` target.
-    ///
-    /// The output is a Rust module where each component is a struct implementing
-    /// `render_to_html(&self) -> String` using `el_platform::ServerBackend`.
-    fn generate_server_rust(&self, components: &[Component]) -> CompileResult<String> {
-        let mut out = String::new();
-        out.push_str("//! el-ui SSR — generated by el-ui-compiler (target: server)\n");
-        out.push_str("//! Do not edit. Re-generate with: el-ui-compiler --target server\n\n");
-        out.push_str("use el_platform::{ServerBackend, PlatformBackend, PlatformNode};\n\n");
-
-        for comp in components {
-            out.push_str(&format!("/// Server-side rendered component: {}\n", comp.name));
-            out.push_str(&format!("pub struct {} {{\n", comp.name));
-            for prop in &comp.props {
-                out.push_str(&format!("    pub {}: String,\n", prop.name));
-            }
-            for state in &comp.state {
-                out.push_str(&format!("    pub {}: String,\n", state.name));
-            }
-            out.push_str("}\n\n");
-
-            out.push_str(&format!("impl {} {{\n", comp.name));
-            out.push_str("    pub fn render_to_html(&self) -> String {\n");
-            out.push_str("        let backend = ServerBackend::new();\n");
-            // Generate a simple element tree based on the template
-            out.push_str("        let root = self.build_node_tree();\n");
-            out.push_str("        backend.render_to_string(&root).unwrap_or_default()\n");
-            out.push_str("    }\n\n");
-            out.push_str("    fn build_node_tree(&self) -> PlatformNode {\n");
-            out.push_str("        // TODO: full template → PlatformNode tree codegen\n");
-            out.push_str("        // The compiler translates each TemplateNode into\n");
-            out.push_str("        // PlatformNode::element() / PlatformNode::text() calls.\n");
-            out.push_str("        PlatformNode::element(\"div\")\n");
-            out.push_str("    }\n");
-            out.push_str("}\n\n");
-        }
-
-        Ok(out)
-    }
-
-    /// Generate Rust code for a `native` target.
-    ///
-    /// The output is a Rust module where each component builds a `PlatformNode`
-    /// tree and calls the appropriate backend to mount it.
-    fn generate_native_rust(&self, components: &[Component], platform: &Platform) -> CompileResult<String> {
-        let backend_type = match platform {
-            Platform::Ios => "IosBackend",
-            Platform::Android => "AndroidBackend",
-            Platform::Macos => "MacosBackend",
-            Platform::Linux => "LinuxBackend",
-            Platform::Windows => "WindowsBackend",
-        };
-
-        let mut out = String::new();
-        out.push_str(&format!(
-            "//! el-ui native — generated by el-ui-compiler (target: {})\n",
-            platform.as_str()
-        ));
-        out.push_str("//! Do not edit. Re-generate with: el-ui-compiler --target <platform>\n\n");
-        out.push_str(&format!(
-            "use el_platform::{{{}  as Backend, PlatformBackend, PlatformNode}};\n\n",
-            backend_type
-        ));
-
-        for comp in components {
-            out.push_str(&format!("/// Native component: {} ({})\n", comp.name, platform.as_str()));
-            out.push_str(&format!("pub struct {} {{\n", comp.name));
-            for prop in &comp.props {
-                out.push_str(&format!("    pub {}: String,\n", prop.name));
-            }
-            for state in &comp.state {
-                out.push_str(&format!("    pub {}: String,\n", state.name));
-            }
-            out.push_str("    backend: Backend,\n");
-            out.push_str("}\n\n");
-
-            out.push_str(&format!("impl {} {{\n", comp.name));
-            out.push_str("    pub fn new() -> Self {\n");
-            out.push_str("        Self {\n");
-            for prop in &comp.props {
-                let default = prop.default.as_deref().unwrap_or("\"\"");
-                out.push_str(&format!("            {}: {}.to_string(),\n", prop.name, default));
-            }
-            for state in &comp.state {
-                out.push_str(&format!("            {}: {}.to_string(),\n", state.name, state.initial));
-            }
-            out.push_str("            backend: Backend::new(),\n");
-            out.push_str("        }\n");
-            out.push_str("    }\n\n");
-            out.push_str("    pub fn mount(&self, container_id: &str) -> el_platform::PlatformResult<()> {\n");
-            out.push_str("        let root = self.build_node_tree();\n");
-            out.push_str("        self.backend.mount(root, container_id)\n");
-            out.push_str("    }\n\n");
-            out.push_str("    fn build_node_tree(&self) -> PlatformNode {\n");
-            out.push_str("        // TODO: full template → PlatformNode tree codegen\n");
-            out.push_str("        PlatformNode::element(\"div\")\n");
-            out.push_str("    }\n");
-            out.push_str("}\n\n");
-        }
-
-        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;")
-}
diff --git a/examples/profile-card/Cargo.toml b/examples/profile-card/Cargo.toml
index 1a0dabd..098248a 100644
--- a/examples/profile-card/Cargo.toml
+++ b/examples/profile-card/Cargo.toml
@@ -9,8 +9,8 @@ name = "profile-card"
 path = "src/main.rs"
 
 [dependencies]
-el-style = { path = "../../crates/el-style" }
-el-layout = { path = "../../crates/el-layout" }
-el-i18n = { path = "../../crates/el-i18n" }
-el-config = { path = "../../crates/el-config" }
-el-secrets = { path = "../../crates/el-secrets" }
+el-style = { path = "../../vessels/el-style" }
+el-layout = { path = "../../vessels/el-layout" }
+el-i18n = { path = "../../vessels/el-i18n" }
+el-config = { path = "../../vessels/el-config" }
+el-secrets = { path = "../../vessels/el-secrets" }
diff --git a/spec/framework.md b/spec/framework.md
index bb8f771..85db900 100644
--- a/spec/framework.md
+++ b/spec/framework.md
@@ -1,76 +1,98 @@
 # el-ui Framework Specification
 
-Version 0.1.0 — April 2026
+Version 1.1.0 — April 30, 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?**
+el-ui is a frontend framework where state is an Engram graph and reactivity is spreading activation. Every framework must answer the same question: what re-renders when state changes? el-ui's answer is: whatever the spreading activation algorithm determines is relevant.
 
 | Framework | Reactivity model |
 |-----------|-----------------|
 | React | Virtual DOM diffing |
-| Vue | Dependency tracking (Proxy-based) |
-| Svelte | Compile-time analysis |
-| **el-ui** | **Spreading activation over a state graph** |
+| Vue | Dependency tracking (Proxy-based reactive primitives) |
+| Svelte | Compile-time static analysis |
+| Solid | Fine-grained signal-based subscriptions |
+| **el-ui** | **Spreading activation over a typed 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.
+The core insight: component state is represented as a graph of related nodes, and the same spreading activation algorithm used by the Engram knowledge engine determines which components need 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. Activation-Based Reactivity Model
 
 ### 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
+| Field | Type | Description |
+|-------|------|-------------|
+| `id` | String (UUID) | Node's permanent identity |
+| `type` | String | `'state'`, `'route'`, or user-defined |
+| `name` | String | State variable name |
+| `content` | Any | Current value |
+| `importance` | Float [0, 1] | Salience weight; boosted on update |
 
-Nodes are connected by **edges** with a `weight` `[0, 1]` and a `relation` label.
+Nodes are connected by directed **edges** with:
 
-When state changes (via `setState()`), spreading activation runs from the changed node:
+| Field | Type | Description |
+|-------|------|-------------|
+| `weight` | Float [0, 1] | Connection strength |
+| `relation` | String | Semantic label of the relationship |
+
+### 1.2 Activation Formula
+
+When state changes via `setState()`, spreading activation runs from the changed node through the graph:
 
 ```
 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.
+This formula is identical to the Engram core spreading activation formula, with the semantic similarity factor (cosine_sim) omitted because the in-browser graph does not yet carry embedding vectors. In a future version connected to the Engram server, the full four-factor formula applies:
 
-### 1.2 Why Multiplication, Not Addition
+```
+strength = parent_strength × edge.weight × target.importance × cosine_sim(query, target)
+```
 
-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 Why Multiplication, Not Addition
 
-### 1.3 Pruning
+Addition allows many weak signals to accumulate into false relevance. The brain's associative memory is conjunctive: an activated path requires ALL its links to be strong. Multiplication enforces this. If any factor is near zero — weak edge, dormant node, or irrelevant connection — the path dies immediately. This is not a performance optimization; it is a semantic property of associative retrieval.
 
-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 Pruning Threshold
 
-### 1.4 Importance Boost
+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. All nodes not reached above the threshold are not considered for re-render.
 
-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.
+### 1.5 Importance Boost (Long-Term Potentiation Analog)
+
+When a state node is updated, its `importance` increases by 0.1 (capped at 1.0):
+
+```
+node.importance = Math.min(1.0, node.importance + 0.1)
+```
+
+Recently-changed state becomes more salient — it activates more easily in future propagation. This mirrors long-term potentiation: frequently-used pathways become lower-resistance. State that changes often gains importance; state that never changes fades toward background salience.
+
+### 1.6 Activation Surface
+
+The **activation surface** is the set of nodes reached during a spreading activation pass, i.e., all nodes with `strength > PRUNE_THRESHOLD`. Components subscribed to any node in the activation surface receive update notifications and re-render.
 
 ---
 
 ## 2. Component Definition Syntax
 
-Components are defined in `.el` files (the same extension as el source). A component is a specialized el module.
+Components are defined in `.el` files (shared extension with the El programming language). A component is a specialized el module with four optional sections.
 
-### 2.1 Structure
+### 2.1 Component Structure
 
 ```
 component ComponentName {
     props {
-        // optional prop declarations
+        // prop declarations
     }
 
     state {
-        // optional state declarations
+        // state declarations
     }
 
     fn methodName(param: Type) -> ReturnType {
@@ -83,26 +105,30 @@ component ComponentName {
 }
 ```
 
-All four sections (`props`, `state`, methods, `template`) are optional. Components with no template render an empty string.
+All four sections are optional. Components with no template render an empty string. Multiple `fn` blocks are allowed; multiple `props` or `state` blocks are not (only the last one is used).
 
 ### 2.2 Props
 
-Props are inputs from the parent component. They are read-only inside the component.
+Props are read-only inputs from the parent component.
 
 ```
 props {
-    label: String               // required
-    variant: String = "primary" // optional, with default
+    label: String               // required prop
+    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?`.
+Supported prop types: `String`, `Int`, `Float`, `Bool`, `Fn(...) -> T`.
+
+**Note:** Array (`[T]`) and optional (`T?`) type syntax is not currently parsed by the compiler. The parser reads a single identifier as the type name.
+
+Props are accessed in generated code as `this._props_{name}` (not `this.props.name`). In method and template bodies, the compiler exposes each prop as a local constant named `{name}`.
 
 ### 2.3 State
 
-State declarations create nodes in the component's Engram graph.
+State declarations create nodes in the component's Engram graph. Every state variable requires an initial value.
 
 ```
 state {
@@ -113,20 +139,23 @@ state {
 ```
 
 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
+1. A node in `this._graph` (seeded at construction time with `type: 'state'`), tracked by ID in `this._stateNodes`.
+2. A mirrored value in `this._state` for direct read access.
+3. A reactive binding: changing the value via `setState()` triggers activation and re-render.
+
+In method and template bodies, the compiler exposes each state variable as a local constant named `{name}` (reading from `this._state`).
 
 ### 2.4 Methods
 
-Methods are `fn` definitions inside the component body. They have access to the component's current state and can call `setState()`.
+Methods are `fn` definitions inside the component body. State assignments in method bodies compile to `setState()` calls.
 
 ```
 fn increment() -> Void {
-    count = count + 1
+    count = count + 1    // compiles to: __self.setState('count', count + 1)
 }
 ```
 
-State assignments in method bodies (`count = count + 1`) are compiled to `setState('count', count + 1)` calls.
+The generated JavaScript method exposes all state variables as local `const` bindings before executing the body. The variable `__self` refers to the component instance.
 
 ---
 
@@ -134,7 +163,7 @@ State assignments in method bodies (`count = count + 1`) are compiled to `setSta
 
 ### 3.1 Interpolation
 
-Embed any expression with `{expr}`:
+Any expression embedded in `{expr}`:
 
 ```
 <h1>{count}</h1>
@@ -144,7 +173,7 @@ Embed any expression with `{expr}`:
 
 ### 3.2 Event Binding
 
-Bind DOM events with `on:event={handler}`:
+DOM events bound with `on:event={handler}`:
 
 ```
 <button on:click={() => count = count + 1}>+</button>
@@ -154,7 +183,7 @@ Bind DOM events with `on:event={handler}`:
 
 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.
+The compiler emits `data-el-{event}` attributes on elements. The renderer binds handlers at mount time using `new Function(...)` evaluated in the component's scope (`__self`), and rebinds after each patch.
 
 ### 3.3 Dynamic Attributes
 
@@ -172,32 +201,30 @@ The compiler emits `data-el-{event}` attributes. The renderer binds handlers at
 
 ### 3.5 Boolean Attributes
 
+The parser recognises a fixed set of boolean attribute names: `disabled`, `checked`, `readonly`, `required`, `multiple`, `selected`. These emit the attribute name when the expression is truthy, nothing when falsy.
+
 ```
 <button disabled={isDisabled}>Submit</button>
 <input checked={isChecked} />
 ```
 
-Boolean attributes emit the attribute name if the expression is truthy, nothing if falsy.
+A standalone attribute with no value (e.g., `<button disabled>`) is also parsed and treated as `BoolAttr { expr: "true" }`.
 
-### 3.6 Component Usage
+### 3.6 Component Invocation
 
-Components are invoked by their name (uppercase first letter). Props are passed as attributes:
+Uppercase-initial tags are el-ui components; lowercase tags are HTML elements:
 
 ```
 <Button label="Click me" variant="primary" onClick={() => handleClick()} />
-<Counter />
+<Counter initialValue={5} />
 <UserCard name={currentUser.name} />
 ```
 
-Lowercase tags are HTML elements. Uppercase tags are el-ui components.
+The compiler emits `${__self._child(ComponentClass, { prop: value })}` for component references. Child components share the parent's activation graph via `_child()`.
 
 ### 3.7 Conditional Rendering — `{#if}`
 
 ```
-{#if condition}
-    <div>shown when true</div>
-{/if}
-
 {#if loggedIn}
     <Dashboard />
 {:else}
@@ -205,23 +232,19 @@ Lowercase tags are HTML elements. Uppercase tags are el-ui components.
 {/if}
 ```
 
-The condition is any JavaScript-compatible boolean expression.
+Compiles to a ternary template literal expression: `${(condition) ? `...` : `...`}`.
 
 ### 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.
+The `items` expression must evaluate to an array. Compiles to `${(items).map((user) => `...`).join('')}`.
 
-### 3.9 Semantic Activation — `{#activate}` (The Novel Construct)
+### 3.9 Semantic Activation — `{#activate}` (Novel Construct)
 
 ```
 {#activate "recent premium subscribers" as results}
@@ -229,350 +252,450 @@ The items expression must evaluate to an array.
 {/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:
+`{#activate}` runs a semantic query against the component'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`.
+1. Calls `this._graph.search("query")` which performs a string-based substring match on node `name` and `content` fields.
+2. Sorts results by score (combination of name/content match and node importance).
+3. Renders the template body once for each result, binding the result as the variable name.
 
-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.
+Compiles to:
+
+```javascript
+${((this._graph.search("query")) || []).map((results) => `...template...`).join('')}
+```
+
+In v0.1, the search is string-based (substring match on `name` and `content.toString()`). In future versions connected to an Engram database, `{#activate}` will use embedding vectors and cosine similarity.
+
+**Note on business logic protection:** The spec previously described AES-256-GCM encryption of `{#activate}` query strings in sealed production bundles. This feature is **not implemented** — there is no `--target prod` flag in the current CLI and no `el seal` command.
 
 ---
 
-## 4. The State Graph
+## 4. 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).
+Each component instance owns an Engram graph (`this._graph`). State nodes are seeded at construction. The graph is shared between a component and its children via `_child()` — 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
+### 4.2 State Node Creation
 
 ```javascript
-const nodeId = graph.seed({ type: 'state', name: 'count', content: 0, importance: 0.5 });
+const nodeId = graph.seed({ type: 'state', name: 'count', content: 0 });
+// importance defaults to 0.5 if omitted
 ```
 
 Returns a UUID string that permanently identifies the node.
 
-### 4.4 Connecting Nodes
+### 4.3 Edge Creation
 
 ```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).
+Connects two nodes with a directed edge. Higher weight = stronger activation path. Default weight is `1.0`, default relation is `'related'`.
 
-### 4.5 Subscribing to Activation
+### 4.4 Node Retrieval
+
+```javascript
+const node = graph.get(nodeId);
+// Returns: { id, type, name, content, importance, edges: [edgeId, ...] }
+```
+
+Note: the runtime method is `graph.get(id)`, not `graph.getNode(id)`.
+
+### 4.5 State Update
+
+```javascript
+this.setState('count', newValue);
+// or directly:
+this._graph.update(nodeId, newValue);
+```
+
+`setState` looks up the node by state variable name, calls `this._graph.update()` which:
+1. Updates `content`.
+2. Increments `importance` by 0.1 (capped at 1.0).
+3. Runs spreading activation from the changed node.
+4. Notifies all subscribers in the activation surface.
+5. Notifies direct subscribers on the changed node.
+
+### 4.6 Activation Subscription
 
 ```javascript
 const unsubscribe = graph.subscribe(nodeId, (node) => {
-    console.log('node activated:', node.content);
+    // called whenever this node enters the activation surface
 });
-// Later:
-unsubscribe();
+unsubscribe(); // stop listening
 ```
 
-### 4.6 Semantic Search
+Components subscribe to their state nodes in the constructor. When spreading activation reaches a subscribed node, the subscriber callback fires and the component re-renders via `this._renderer.patch()`.
+
+### 4.7 Semantic Search
 
 ```javascript
 const results = graph.search("recent items", "state");
-// Returns array of { id, name, content, importance, score } sorted by score
+// Returns: [{ id, type, name, content, importance, score }] sorted by score
+// nodeType argument is optional — filters by node.type if provided
+```
+
+In v0.1, search is string-based: `name.includes(query)` or `content.toString().includes(query)`. Score is computed as `(nameMatch ? 0.6 : 0) + (contentMatch ? 0.4 : 0)` multiplied by `node.importance`.
+
+### 4.8 Graph Dump (Debug)
+
+```javascript
+const allNodes = graph.dump();
+// Returns: array of all node objects — useful for DevTools / debugging
 ```
 
 ---
 
-## 5. The `{#activate}` Construct — Semantic State Queries
+## 5. Spreading Activation Implementation (In-Browser)
 
-### 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:
+The in-browser spreading activation algorithm in `graph.js` (and standalone utilities in `activation.js`) mirrors `engram-core/src/activation.rs`:
 
 ```javascript
-users.filter(u => u.isPremium && u.lastActive > threshold)
+// Within graph.activate(seedId, maxDepth = 3, pruneThreshold = 0.01)
+// Returns: Set<string> of activated node IDs
+
+while (queue.length > 0) {
+    // Best-first: process highest-strength candidate
+    const { id, strength, depth } = bestInQueue();
+
+    if (depth >= maxDepth) continue;
+
+    for (const edgeId of node.edges) {
+        const edge = this.edges.get(edgeId);
+        const target = this.nodes.get(edge.to);
+
+        // Multiplicative formula
+        const targetStrength = strength * edge.weight * Math.max(0, target.importance);
+
+        if (targetStrength <= pruneThreshold) continue;
+
+        // Winner-take-most
+        if (targetStrength > prevBest) { /* enqueue */ }
+    }
+}
 ```
 
-This is structural — it knows the shape of your data.
+**Key parameters:**
+- `maxDepth` default: **3** (not 4)
+- `pruneThreshold` default: **0.01**
+- `limit` default: **20** (applies to `spreadActivation()` utility; `graph.activate()` returns a Set with no limit)
 
-el-ui's `{#activate}` is semantic — it knows the *meaning* of your query:
+**Correspondence with engram-core:**
+- Same best-first BFS traversal
+- Same multiplicative strength formula
+- Same pruning threshold semantics (0.01)
+- Same winner-take-most rule (strongest path to each node wins)
+- Same depth limit semantics
 
-```
-{#activate "premium users with recent activity" as users}
-```
+The in-browser graph omits the `cosine_sim` factor because embedding vectors are not yet available in the browser.
 
-The activation engine finds nodes that semantically match the query, regardless of their exact structure.
-
-### 5.2 Compilation
-
-`{#activate "query" as results}` compiles to:
+### 5.1 Standalone Activation Utilities (`activation.js`)
 
 ```javascript
-${(this._graph.search("query") || []).map((results) => `...template...`).join('')}
+import { spreadActivation, activationStrength, reachableNodes, PRUNE_THRESHOLD } from './el-ui.js';
+
+// Multi-seed activation — returns sorted array of reached nodes (excluding seeds)
+const reached = spreadActivation(graph, [seedId1, seedId2], { maxDepth: 3, limit: 20 });
+// Returns: [{ nodeId, strength, hops, node }]
+
+// Point-to-point strength — returns 0 if no path within maxDepth
+const strength = activationStrength(graph, fromId, toId, maxDepth);
+
+// All reachable nodes from a seed (includes seed) — returns Set<string>
+const reachable = reachableNodes(graph, seedId, maxDepth);
 ```
 
-### 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.
+Routes are nodes in the application graph of type `'route'`. Navigation activates the target route node. Components subscribed to routing update automatically via spreading activation.
 
-### 6.2 Usage
+Route nodes start with `importance: 0.3`. Navigating to a route boosts its importance by `0.2` (capped at 1.0), modeling browser history salience.
 
-```javascript
-import { Router, mount } from './el-ui.js';
-import { Home, About, NotFound } from './app.js';
+### 6.2 Route Node Connections
 
-const graph = component._graph;
-const router = new Router(graph, {
-    '/': Home,
-    '/about': About,
-    '*': NotFound,
-});
+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.
 
-// 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
+### 6.3 Path Matching
 
 1. Exact match: `/about` matches `/about`
 2. Prefix match (longest wins): `/about` matches `/about/team`
 3. Wildcard: `'*'` catches all unmatched paths
 
+### 6.4 API
+
+```javascript
+const router = new Router(graph, {
+    '/': HomeComponent,
+    '/about': AboutComponent,
+    '*': NotFoundComponent,
+});
+
+router.navigate('/about');
+router.navigate('/about', true);   // replaceState instead of pushState
+const CurrentPage = router.currentComponent();
+const unsub = router.subscribe((path) => console.log('navigated to', path));
+const href = router.href('/about');   // returns the path string (identity in v0.1)
+```
+
+The router also listens for `popstate` events (browser back/forward navigation) and activates the appropriate route node automatically.
+
 ---
 
-## 7. Plugin API
+## 7. Compilation Pipeline
 
-### 7.1 Custom Node Types
+### 7.1 Overview
 
-Extend the graph with application-specific node types:
+```
+source.el  →  [Lexer]  →  [Parser]  →  [Codegen]  →  output
+```
+
+The output format depends on the compilation target (see §7.4).
+
+### 7.2 Lexer
+
+The lexer (`src/lexer.rs`) 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}` — block open |
+| `SlashIdent(kw)` | `{/if}`, `{/each}`, `{/activate}` — block close |
+| `ColonIdent(kw)` | `{:else}` — block continuation |
+| `OnColon(event)` | `on:click`, `on:input` — event binding |
+| `SelfClose` | `/>` |
+| `CloseTag(name)` | `</div>` |
+| `RawText(s)` | Inline expression text, text content |
+
+Non-template code tokens include keywords (`component`, `props`, `state`, `fn`, `template`, `if`, `else`, `return`), identifiers, literals (`String`, `Int`, `Float`, `Bool`), operators, and punctuation.
+
+### 7.3 Parser
+
+Hand-written recursive descent parser. 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 allowed)
+5. `template { ... }` — template tree (optional)
+
+The template parses as a tree of `TemplateNode` values:
+
+| Variant | Description |
+|---------|-------------|
+| `Element { tag, attrs, children }` | HTML element with attributes and children |
+| `Component { name, props }` | Uppercase-initial component reference |
+| `Text(s)` | Literal text content |
+| `Interpolation(expr)` | `{expr}` — expression interpolation |
+| `If { condition, then, else_ }` | `{#if}...{:else}...{/if}` |
+| `Each { items, item_name, children }` | `{#each items as item}...{/each}` |
+| `Activate { query, result_name, children }` | `{#activate "query" as name}...{/activate}` |
+
+Method bodies are captured as raw source text and passed through to the code generator with simple string transformations.
+
+**Unknown `{#blockname}` tags** produce a parse error (`unknown block tag: #name`).
+
+### 7.4 Code Generator — Multi-Target
+
+The code generator (`src/codegen.rs`) supports three compilation targets:
+
+#### `CodegenTarget::Web` (default) — Legacy JavaScript
+
+Emits an ES2022 JavaScript module using the el-ui JS runtime (`graph.js`, `renderer.js`, `router.js`, `index.js`). This is the primary target for browser-based applications today.
+
+For each component:
+1. Emits a class extending `Component` from the runtime.
+2. Constructor: seeds state nodes into `this._graph`, sets prop values as `this._props_{name}`, subscribes to activation events.
+3. Emits `setState(name, value)` which calls `this._graph.update()` to trigger activation.
+4. Emits `render()` returning a template literal string.
+5. Translates state assignments: `count = count + 1` → `__self.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. Emits `${__self._child(ComponentClass, props)}` for component references.
+
+#### `CodegenTarget::Server` — Rust SSR
+
+Emits a Rust module where each component is a struct implementing `render_to_html(&self) -> String` via `el_platform::ServerBackend`.
+
+**Note:** The `build_node_tree()` implementation in this target is a stub — it returns a placeholder `PlatformNode::element("div")`. Full template-to-PlatformNode codegen is not yet implemented for the server target.
+
+#### `CodegenTarget::Native(Platform)` — Rust Native / WASM
+
+Emits a Rust module where each component builds a `PlatformNode` tree via the semantic primitive layer and mounts it via the `el_platform` backend for the given platform.
+
+Supported platforms:
+
+| Platform | Backend | Output format |
+|----------|---------|---------------|
+| `Platform::Web` | `WebBackend` (web-sys) | Rust compiled to WASM — NOT JavaScript |
+| `Platform::Ios` | `IosBackend` | Rust (objc2-ui-kit) |
+| `Platform::Android` | `AndroidBackend` | Kotlin (Jetpack Compose via build.rs) |
+| `Platform::Macos` | `MacosBackend` | Rust (objc2-app-kit) |
+| `Platform::Linux` | `LinuxBackend` | Rust (gtk4-rs) |
+| `Platform::Windows` | `WindowsBackend` | Rust (windows-rs / WinUI 3) |
+
+**Note:** The `build_node_tree()` implementation in all native targets is currently a stub returning `PlatformNode::element("div")`. Full AST-to-semantic-primitive lowering is not yet wired in — the semantic module and per-platform codegen functions exist and are correct, but the compiler does not yet call them from the AST walk.
+
+### 7.5 Semantic Primitive Layer (`semantic.rs`)
+
+The semantic layer is the bridge between the template AST and platform-specific code generation. It defines EBD-driven concepts — *what* something is, not *how* it looks:
+
+**AppearanceConcept** — what a control is:
+- `Action` — primary action trigger (blue/filled on most platforms)
+- `Destructive` — dangerous/irreversible action (red tint)
+- `Secondary` — subdued / less-prominent action
+- `Navigation` — link-like / back-navigation element
+- `Informational` — read-only display element
+- `Structural` — layout container with no interactive meaning
+
+**LayoutConcept** — how children are arranged:
+- `Stack` — vertical (Column / VStack / GtkBox vertical)
+- `Row` — horizontal (Row / HStack / GtkBox horizontal)
+- `Grid` — two-dimensional grid
+- `Overlay` — z-axis layering (ZStack / GtkOverlay)
+- `Scroll` — scrollable container
+
+**TextConcept** — the semantic role of text:
+- `Heading { level: u8 }` — heading at level 1–6
+- `Body` — default body text
+- `Caption` — small secondary text
+- `Label` — control label
+- `Code` — monospaced code text
+
+**SemanticPrimitive** — the EBD building blocks:
+- `Button { label, appearance, on_press }` — interactive button
+- `Text { content, concept }` — text display
+- `Container { children, layout }` — layout container
+- `Input { binding, hint, appearance }` — text input bound to state
+- `Image { src, alt }` — image element
+- `Toggle { binding, label }` — checkbox/switch bound to boolean state
+- `List { items_binding, item_name, item_template }` — homogeneous list
+
+Appearance is inferred from explicit `appearance="..."` attributes, CSS class names, or HTML tag heuristics via `infer_appearance()`. Layout and text concepts are inferred from tag names via `infer_layout_concept()` and `infer_text_concept()`.
+
+### 7.6 CLI
+
+```bash
+el-ui-compiler App.el             # compiles to App.js (Web target, default)
+el-ui-compiler App.el -o app.js   # explicit output path
+```
+
+The CLI always uses `CodegenTarget::Web`. Target selection (`--target server`, `--target ios`, etc.) is available as a `CodegenTarget` enum in the library API but is not exposed as a CLI flag in the current implementation.
+
+---
+
+## 8. Runtime Architecture
+
+### 8.1 Module Structure
+
+| Module | Purpose |
+|--------|---------|
+| `graph.js` | Engram graph: nodes, edges, activation, search, subscribe, dump |
+| `activation.js` | Standalone activation utilities: `spreadActivation`, `activationStrength`, `reachableNodes` |
+| `renderer.js` | DOM patching, event binding |
+| `router.js` | Graph-based routing |
+| `index.js` | `Component` base class, `mount()`, re-exports |
+
+### 8.2 Component Lifecycle
+
+| Lifecycle event | Description |
+|-----------------|-------------|
+| `constructor(props)` | Seeds state graph, subscribes to activation |
+| `onMount()` | Called after first render and DOM attachment |
+| `render()` | Returns HTML string; called on activation |
+
+**Note:** `onDestroy()` is documented in prior drafts but is not implemented in the base `Component` class or the `Renderer`. It will not be called by the runtime.
+
+### 8.3 Mounting
 
 ```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',
-});
+const component = mount(App, '#app', { optionalProp: 'value' });
+// mount() returns the live Component instance
 ```
 
-### 7.2 Custom Activation Sources
+`mount` instantiates the root component, creates a `Renderer`, calls `renderer.mount()` which calls `render()`, sets `root.innerHTML`, binds events, then calls `onMount()`.
 
-Trigger activation from any node, not just state updates:
+### 8.4 DOM Patching Strategy (v0.1)
 
-```javascript
-import { spreadActivation } from './el-ui.js';
+The renderer uses full string re-render on every state change: `root.innerHTML = component.render()`. The activated node set argument to `patch()` is accepted but unused — targeted patching is planned for v0.2.
 
-// Run a custom activation query
-const results = spreadActivation(graph, [myNodeId], {
-    maxDepth: 4,
-    limit: 10,
-    pruneThreshold: 0.05,
-});
+After patching, the renderer attempts to restore focus to the previously focused element by `id`.
 
-results.forEach(({ nodeId, strength, node }) => {
-    console.log(`${node.name}: ${strength.toFixed(3)}`);
-});
-```
+Event handlers are rebound after every patch by scanning the new DOM for `data-el-{event}` attributes. Handlers are compiled via `new Function('__self', ...)` — this requires a permissive Content Security Policy in v0.1.
 
-### 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,
-        });
-    }
+## 9. Platform Backend Architecture (`el-platform`)
 
-    onMount() {
-        // Side effects after first render
-        fetch('/api/data')
-            .then(r => r.json())
-            .then(data => {
-                this._graph.update(this._externalData, data);
-            });
-    }
+The `el-platform` crate defines the `PlatformBackend` trait that all rendering backends implement:
 
-    render() {
-        const data = this._graph.get(this._externalData)?.content;
-        return data ? `<div>${data.title}</div>` : `<div>Loading...</div>`;
-    }
+```rust
+pub trait PlatformBackend: Send + Sync {
+    fn name(&self) -> &'static str;
+    fn create_element(&self, tag: &str) -> PlatformResult<PlatformNode>;
+    fn create_text(&self, content: &str) -> PlatformResult<PlatformNode>;
+    fn set_attribute(&self, node: &mut PlatformNode, name: &str, value: &str) -> PlatformResult<()>;
+    fn remove_attribute(&self, node: &mut PlatformNode, name: &str) -> PlatformResult<()>;
+    fn append_child(&self, parent: &mut PlatformNode, child: PlatformNode) -> PlatformResult<()>;
+    fn remove_child(&self, parent: &mut PlatformNode, child_index: usize) -> PlatformResult<()>;
+    fn replace_child(&self, parent: &mut PlatformNode, index: usize, new_child: PlatformNode) -> PlatformResult<()>;
+    fn bind_event(&self, node: &mut PlatformNode, event: &str, handler: EventHandler) -> PlatformResult<()>;
+    fn render_to_string(&self, node: &PlatformNode) -> PlatformResult<String>;
+    fn mount(&self, root: PlatformNode, container_id: &str) -> PlatformResult<()>;
+    fn patch(&self, old: &PlatformNode, new: &PlatformNode) -> PlatformResult<()>;
+    fn supports_ssr(&self) -> bool { false }
 }
 ```
 
----
+The `ServerBackend` is the only backend where `supports_ssr()` returns `true` and `render_to_string()` produces real HTML output. All other backends are platform-native.
 
-## 8. Compilation Pipeline
+Platform is selected via `manifest.el`:
 
-### 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
+```toml
+[platform]
+target = "web"   # web | server | ios | android | macos | linux | windows
+ssr = true
 ```
 
 ---
 
-## 9. Production Build — Quantum-Sealed via engram-crypto
+## 10. Comparison to Other Frameworks
 
-The production build pipeline follows the el sealed artifact format:
+### 10.1 vs. React
 
-```bash
-# 1. Compile .el to .js
-el-ui-compiler App.el -o app.js --target prod
+React uses virtual DOM diffing: on every render, it constructs a virtual tree and diffs it against the previous tree to identify minimal DOM mutations. The unit of re-render is the component; re-render triggers are driven by `setState`, `useReducer`, or context changes.
 
-# 2. Seal the JavaScript bundle
-ENGRAM_SEAL_KEY=my-deploy-key el seal app.js -o app.sealed
-```
+el-ui does not compute a virtual DOM. The spreading activation pass determines the re-render set from the graph topology. State relationships that exist in the graph are automatically propagated; relationships that do not exist are not. There is no need to declare dependencies, use `useMemo`, or prevent unnecessary renders with `React.memo` — the graph structure encodes the dependency information directly.
 
-The sealed artifact is an `ENGRAM01` sealed bundle (same format as the el production target):
+### 10.2 vs. Vue
 
-```
-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 }
-```
+Vue uses a Proxy-based reactive system: state values are wrapped in reactive proxies, and reads from these proxies during render are tracked as dependencies. When a reactive value changes, all components that read it during their last render are re-rendered.
 
-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.
+el-ui's graph model is explicit: relationships between state nodes are declared via graph edges, not inferred from read tracking. This makes dependencies inspectable and modifiable at runtime. It also enables semantic queries (`{#activate}`) that find relevant state by meaning rather than by structural reference.
 
-**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.
+### 10.3 vs. Svelte
 
-### 9.1 The `{#activate}` Query is Protected
+Svelte uses compile-time analysis to determine which parts of the DOM update when which state changes. The compiler emits targeted DOM mutations. There is no runtime overhead for a virtual DOM or a reactive system.
 
-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.
+el-ui uses a runtime spreading activation pass. This is more expensive than Svelte's compile-time approach for small, known-static state graphs. The advantage is dynamic state topology: new nodes and edges can be added at runtime without recompilation, enabling state graphs that evolve with program execution.
+
+### 10.4 Core Differentiator
+
+No prior framework uses Hebbian spreading activation as the re-render decision mechanism. The multiplicative activation formula, the self-seeded activation from a root node, the importance-boost on state change (LTP analog), and the semantic `{#activate}` query construct have no analogues in any shipping frontend framework as of April 2026.
 
 ---
 
-## 10. Runtime Size Target
+## 11. Versioning Roadmap
 
-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 el
-
-el-ui `.el` files share the `.el` extension with el source files. Components are specialized el modules — in a future version, an `.el` file can mix component definitions with el 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.
+| Version | Key changes |
+|---------|-------------|
+| v0.1.x | Current. Full re-render on state change. String-based `{#activate}` search. JS (Web) target only via CLI. Native targets available via library API but `build_node_tree()` is stub. |
+| v0.2.x | Targeted DOM patching (only nodes in activation surface). `{#activate}` with embedding-based semantic search. CLI `--target` flag for native targets. Full AST→semantic→PlatformNode lowering. |
+| v0.3.x | WASM-compiled Engram core replacing JavaScript graph. Sealed artifact support. `onDestroy()` lifecycle. |
+| v1.0.0 | Stable API. Full production sealing. LSP integration with spreading activation autocomplete. |
diff --git a/crates/el-aop/Cargo.toml b/vessels/el-aop/Cargo.toml
similarity index 100%
rename from crates/el-aop/Cargo.toml
rename to vessels/el-aop/Cargo.toml
diff --git a/vessels/el-aop/manifest.el b/vessels/el-aop/manifest.el
new file mode 100644
index 0000000..84ed41f
--- /dev/null
+++ b/vessels/el-aop/manifest.el
@@ -0,0 +1,22 @@
+// el-aop — Aspect-Oriented Programming for el-ui.
+//
+// Cross-cutting concerns as first-class language features. Decorators applied
+// to components and methods. @authenticate is the default; @public is the
+// explicit opt-out.
+
+vessel "el-aop" {
+    version "0.1.0"
+    description "Decorators: @authenticate, @authorize, @cache, @rate_limit, ..."
+    authors ["Will Anderson <will@neurontechnologies.ai>"]
+    edition "2026"
+}
+
+dependencies {
+    el-platform "1.0"
+    el-auth     "0.1"
+}
+
+build {
+    entry "src/main.el"
+    output "dist/"
+}
diff --git a/crates/el-aop/src/aspects.rs b/vessels/el-aop/src/aspects.rs
similarity index 100%
rename from crates/el-aop/src/aspects.rs
rename to vessels/el-aop/src/aspects.rs
diff --git a/crates/el-aop/src/chain.rs b/vessels/el-aop/src/chain.rs
similarity index 100%
rename from crates/el-aop/src/chain.rs
rename to vessels/el-aop/src/chain.rs
diff --git a/crates/el-aop/src/lib.rs b/vessels/el-aop/src/lib.rs
similarity index 100%
rename from crates/el-aop/src/lib.rs
rename to vessels/el-aop/src/lib.rs
diff --git a/vessels/el-aop/src/main.el b/vessels/el-aop/src/main.el
new file mode 100644
index 0000000..10cef7a
--- /dev/null
+++ b/vessels/el-aop/src/main.el
@@ -0,0 +1,223 @@
+// el-aop — Aspect-Oriented Programming for el-ui.
+//
+// Each aspect has three advice points: before, after, around. The aspect
+// chain is composed at compile time by the el-ui-compiler from decorators.
+//
+// The El runtime model uses tagged JSON for InvocationContext so an aspect
+// chain composes purely by passing the context map through each advice fn.
+//
+// Built-in aspects:
+//   @authenticate   — defaults on every component (security-by-default)
+//   @public         — opt-out marker
+//   @authorize      — role/permission gate
+//   @cache          — TTL-keyed memoization
+//   @rate_limit     — per-principal token bucket
+//   @retry          — retry on error with backoff
+//   @log            — structured log around invocation
+//   @trace          — emit OpenTelemetry-shaped spans
+//   @validate       — JSON schema check on args
+
+// ── Errors ───────────────────────────────────────────────────────────────────
+
+let AOP_ERR_UNAUTHENTICATED:  String = "aop.unauthenticated"
+let AOP_ERR_FORBIDDEN:        String = "aop.forbidden"
+let AOP_ERR_RATE_LIMITED:     String = "aop.rate_limited"
+let AOP_ERR_VALIDATION:       String = "aop.validation_failed"
+let AOP_ERR_RETRIES_EXHAUSTED: String = "aop.retries_exhausted"
+
+// ── Invocation context ───────────────────────────────────────────────────────
+//
+// Stored as JSON: { target, method, args:{}, metadata:{} }
+// All advice mutates by returning a new ctx (functional style).
+
+fn ctx_new(target: String, method: String) -> String {
+    "{\"target\":\"" + target + "\",\"method\":\"" + method
+        + "\",\"args\":{},\"metadata\":{}}"
+}
+
+fn ctx_with_arg(ctx: String, key: String, value: String) -> String {
+    json_set_path(ctx, "args." + key, "\"" + value + "\"")
+}
+
+fn ctx_with_meta(ctx: String, key: String, value: String) -> String {
+    json_set_path(ctx, "metadata." + key, "\"" + value + "\"")
+}
+
+fn ctx_get_meta(ctx: String, key: String) -> String {
+    json_get_path(ctx, "metadata." + key)
+}
+
+// ── Aspect dispatch table ────────────────────────────────────────────────────
+//
+// Each aspect is a triple of fn names: (before, around, after). The registry
+// is a map from aspect name -> { before, around, after } JSON.
+
+fn registry_new() -> String {
+    "{}"
+}
+
+fn registry_register(reg: String, name: String, before_fn: String, around_fn: String, after_fn: String) -> String {
+    let entry: String = "{\"before\":\"" + before_fn + "\",\"around\":\"" + around_fn
+        + "\",\"after\":\"" + after_fn + "\"}"
+    json_set(reg, name, entry)
+}
+
+// ── @authenticate — applied by default ───────────────────────────────────────
+
+fn aspect_authenticate_before(ctx: String) -> String {
+    let token: String = ctx_get_meta(ctx, "authorization")
+    if str_eq(token, "") {
+        return ctx_with_meta(ctx, "error", AOP_ERR_UNAUTHENTICATED)
+    }
+    let secret: String = env("JWT_SECRET")
+    let auth_ctx: String = auth_middleware(token, secret)
+    let user_id:  String = json_get(auth_ctx, "user_id")
+    if str_eq(user_id, "") {
+        return ctx_with_meta(ctx, "error", AOP_ERR_UNAUTHENTICATED)
+    }
+    ctx_with_meta(ctx, "user_id", user_id)
+}
+
+// ── @public — explicit opt-out marker ────────────────────────────────────────
+
+fn aspect_public_before(ctx: String) -> String {
+    ctx_with_meta(ctx, "public", "true")
+}
+
+// ── @authorize(role) ─────────────────────────────────────────────────────────
+
+fn aspect_authorize_before(ctx: String, required_role: String) -> String {
+    let user_id: String = ctx_get_meta(ctx, "user_id")
+    if str_eq(user_id, "") {
+        return ctx_with_meta(ctx, "error", AOP_ERR_UNAUTHENTICATED)
+    }
+    let roles_json: String = engram_edge_traverse(user_id, "has_role")
+    if !str_contains(roles_json, "\"" + required_role + "\"") {
+        return ctx_with_meta(ctx, "error", AOP_ERR_FORBIDDEN)
+    }
+    ctx
+}
+
+// ── @cache(ttl_seconds) ──────────────────────────────────────────────────────
+
+fn aspect_cache_around(ctx: String, ttl: Int, proceed: String) -> String {
+    let key: String = ctx_get_meta(ctx, "cache_key")
+    if str_eq(key, "") {
+        let target: String = json_get(ctx, "target")
+        let method: String = json_get(ctx, "method")
+        let args:   String = json_get(ctx, "args")
+        let key = sha256_hex(target + ":" + method + ":" + args)
+    }
+    let cached: String = cache_get(key)
+    if !str_eq(cached, "") {
+        return ctx_with_meta(ctx, "result", cached)
+    }
+    // Caller invokes proceed(ctx) externally; we record the key for `after` to use.
+    ctx_with_meta(ctx, "cache_key", key)
+}
+
+fn aspect_cache_after(ctx: String, result: String, ttl: Int) -> String {
+    let key: String = ctx_get_meta(ctx, "cache_key")
+    if !str_eq(key, "") { cache_put(key, result, ttl) }
+    result
+}
+
+// ── @rate_limit(requests, per_seconds) ───────────────────────────────────────
+
+fn aspect_rate_limit_before(ctx: String, requests: Int, per_seconds: Int) -> String {
+    let principal: String = ctx_get_meta(ctx, "user_id")
+    if str_eq(principal, "") { let principal = ctx_get_meta(ctx, "ip") }
+    let bucket_key: String = "rl:" + json_get(ctx, "target") + ":" + principal
+    let allowed: Bool = rate_bucket_take(bucket_key, requests, per_seconds)
+    if !allowed { return ctx_with_meta(ctx, "error", AOP_ERR_RATE_LIMITED) }
+    ctx
+}
+
+// ── @retry(attempts, backoff_ms) ────────────────────────────────────────────
+//
+// retry is necessarily an `around` aspect — it must own the loop.
+
+fn aspect_retry_around(ctx: String, attempts: Int, backoff_ms: Int, proceed_fn_name: String) -> String {
+    let i: Int = 0
+    let result: String = ""
+    while i < attempts {
+        let result = call_dynamic(proceed_fn_name, ctx)
+        let err: String = json_get(result, "error")
+        if str_eq(err, "") { return result }
+        sleep_ms(backoff_ms * (i + 1))
+        let i = i + 1
+    }
+    ctx_with_meta(ctx, "error", AOP_ERR_RETRIES_EXHAUSTED)
+}
+
+// ── @log / @trace ────────────────────────────────────────────────────────────
+
+fn aspect_log_before(ctx: String) -> String {
+    println("[aop] -> " + json_get(ctx, "target") + "." + json_get(ctx, "method"))
+    ctx
+}
+
+fn aspect_log_after(ctx: String, result: String) -> String {
+    println("[aop] <- " + json_get(ctx, "target") + "." + json_get(ctx, "method"))
+    result
+}
+
+fn aspect_trace_before(ctx: String) -> String {
+    let span_id: String = uuid_v4()
+    ctx_with_meta(ctx, "span_id", span_id)
+}
+
+// ── @validate(schema) ────────────────────────────────────────────────────────
+
+fn aspect_validate_before(ctx: String, schema_json: String) -> String {
+    let args: String = json_get(ctx, "args")
+    let valid: Bool  = json_schema_check(args, schema_json)
+    if !valid { return ctx_with_meta(ctx, "error", AOP_ERR_VALIDATION) }
+    ctx
+}
+
+// ── Aspect chain composition ─────────────────────────────────────────────────
+//
+// The compiler emits a call sequence like:
+//   ctx = ctx_new(...)
+//   ctx = aspect_authenticate_before(ctx)
+//   ctx = aspect_log_before(ctx)
+//   result = proceed(ctx)
+//   result = aspect_log_after(ctx, result)
+// At runtime an explicit `chain_run` exists for dynamic composition.
+
+fn chain_run(ctx: String, before_fns: String, around_fn: String, after_fns: String, proceed_fn: String) -> String {
+    let cur_ctx: String = ctx
+    // before chain
+    let i: Int = 0
+    let befs: String = before_fns
+    while !str_eq(befs, "") {
+        let comma: Int = str_index_of(befs, ",")
+        let fn_name: String = befs
+        if comma > 0 { let fn_name = str_slice(befs, 0, comma) }
+        let cur_ctx = call_dynamic(fn_name, cur_ctx)
+        let err: String = ctx_get_meta(cur_ctx, "error")
+        if !str_eq(err, "") { return cur_ctx }
+        if comma > 0 { let befs = str_slice(befs, comma + 1, str_len(befs)) }
+        if comma < 0 { let befs = "" }
+    }
+    // around / proceed
+    let result: String = call_dynamic(proceed_fn, cur_ctx)
+    // after chain (right-to-left composition; simplified left-to-right here)
+    let afts: String = after_fns
+    while !str_eq(afts, "") {
+        let comma: Int = str_index_of(afts, ",")
+        let fn_name: String = afts
+        if comma > 0 { let fn_name = str_slice(afts, 0, comma) }
+        let result = call_dynamic2(fn_name, cur_ctx, result)
+        if comma > 0 { let afts = str_slice(afts, comma + 1, str_len(afts)) }
+        if comma < 0 { let afts = "" }
+    }
+    result
+}
+
+// ── Entry — smoke test ───────────────────────────────────────────────────────
+
+let ctx: String = ctx_new("ProfilePage", "render")
+let ctx = ctx_with_arg(ctx, "user_id", "u-001")
+println("[el-aop] ctx = " + ctx)
diff --git a/crates/el-aop/src/public.rs b/vessels/el-aop/src/public.rs
similarity index 100%
rename from crates/el-aop/src/public.rs
rename to vessels/el-aop/src/public.rs
diff --git a/crates/el-aop/src/registry.rs b/vessels/el-aop/src/registry.rs
similarity index 100%
rename from crates/el-aop/src/registry.rs
rename to vessels/el-aop/src/registry.rs
diff --git a/crates/el-aop/src/tests.rs b/vessels/el-aop/src/tests.rs
similarity index 100%
rename from crates/el-aop/src/tests.rs
rename to vessels/el-aop/src/tests.rs
diff --git a/crates/el-auth/Cargo.toml b/vessels/el-auth/Cargo.toml
similarity index 100%
rename from crates/el-auth/Cargo.toml
rename to vessels/el-auth/Cargo.toml
diff --git a/vessels/el-auth/manifest.el b/vessels/el-auth/manifest.el
new file mode 100644
index 0000000..8eef638
--- /dev/null
+++ b/vessels/el-auth/manifest.el
@@ -0,0 +1,22 @@
+// el-auth — Built-in authentication and authorization for el-ui.
+//
+// Not a library you add. Native to the framework. Sits on top of el-identity:
+// el-identity owns the graph (users, sessions, OAuth tokens); el-auth owns the
+// request-time enforcement (verify token, check permission, enforce roles).
+
+vessel "el-auth" {
+    version "0.1.0"
+    description "Built-in auth/authz: JWT, sessions, RBAC, middleware"
+    authors ["Will Anderson <will@neurontechnologies.ai>"]
+    edition "2026"
+}
+
+dependencies {
+    el-platform "1.0"
+    el-identity "0.1"
+}
+
+build {
+    entry "src/main.el"
+    output "dist/"
+}
diff --git a/crates/el-auth/src/context.rs b/vessels/el-auth/src/context.rs
similarity index 100%
rename from crates/el-auth/src/context.rs
rename to vessels/el-auth/src/context.rs
diff --git a/crates/el-auth/src/engram_session.rs b/vessels/el-auth/src/engram_session.rs
similarity index 100%
rename from crates/el-auth/src/engram_session.rs
rename to vessels/el-auth/src/engram_session.rs
diff --git a/crates/el-auth/src/jwt.rs b/vessels/el-auth/src/jwt.rs
similarity index 100%
rename from crates/el-auth/src/jwt.rs
rename to vessels/el-auth/src/jwt.rs
diff --git a/crates/el-auth/src/lib.rs b/vessels/el-auth/src/lib.rs
similarity index 100%
rename from crates/el-auth/src/lib.rs
rename to vessels/el-auth/src/lib.rs
diff --git a/vessels/el-auth/src/main.el b/vessels/el-auth/src/main.el
new file mode 100644
index 0000000..bea71f4
--- /dev/null
+++ b/vessels/el-auth/src/main.el
@@ -0,0 +1,201 @@
+// el-auth — Built-in authentication and authorization for el-ui.
+//
+// Engram-aware sessions: server-side invalidation works even with stateless
+// JWTs because every session is also a graph node.
+//
+// Provider trait surface:
+//   verify(token)        -> AuthContext
+//   issue(user, roles)   -> token string
+//   revoke(token)        -> Bool
+
+// ── Errors ────────────────────────────────────────────────────────────────────
+
+let ERR_INVALID_CREDS:    String = "auth.invalid_credentials"
+let ERR_TOKEN_EXPIRED:    String = "auth.token_expired"
+let ERR_TOKEN_INVALID:    String = "auth.token_invalid"
+let ERR_SESSION_NOT_FOUND: String = "auth.session_not_found"
+let ERR_FORBIDDEN:        String = "auth.forbidden"
+let ERR_CONFIG:           String = "auth.config"
+
+// ── AuthContext + AuthUser ────────────────────────────────────────────────────
+
+type AuthUser {
+    id:           String
+    email:        String
+    display_name: String
+}
+
+type AuthContext {
+    user_id:     String
+    email:       String
+    roles:       String   // JSON array of role names
+    permissions: String   // JSON array of permission strings
+    session_id:  String
+    issued_at:   String
+    expires_at:  String
+}
+
+fn auth_context_empty() -> AuthContext {
+    { "user_id": "", "email": "", "roles": "[]", "permissions": "[]",
+      "session_id": "", "issued_at": "", "expires_at": "" }
+}
+
+fn auth_context_has_permission(ctx: AuthContext, perm: String) -> Bool {
+    str_contains(ctx.permissions, "\"" + perm + "\"")
+}
+
+fn auth_context_has_role(ctx: AuthContext, role: String) -> Bool {
+    str_contains(ctx.roles, "\"" + role + "\"")
+}
+
+// ── Roles + permissions ───────────────────────────────────────────────────────
+
+type Permission {
+    resource: String
+    action:   String
+}
+
+fn permission_new(resource: String, action: String) -> Permission {
+    { "resource": resource, "action": action }
+}
+
+fn permission_string(p: Permission) -> String {
+    p.resource + ":" + p.action
+}
+
+// Role registry — maps role name -> JSON array of permission strings.
+fn role_registry_grant(registry_path: String, role: String, perm: String) -> Bool {
+    let raw: String = fs_read(registry_path)
+    let updated: String = json_array_append(raw, role, "\"" + perm + "\"")
+    fs_write(registry_path, updated)
+}
+
+// ── JWT (HS256) ──────────────────────────────────────────────────────────────
+
+type JwtClaims {
+    sub: String   // user id
+    iss: String   // issuer
+    aud: String   // audience
+    iat: Int      // issued at  (unix seconds)
+    exp: Int      // expires at (unix seconds)
+    jti: String   // unique token id
+}
+
+fn jwt_claims_new(user_id: String, issuer: String, audience: String, ttl_seconds: Int) -> JwtClaims {
+    let now: Int = time_now_unix()
+    { "sub": user_id, "iss": issuer, "aud": audience,
+      "iat": now, "exp": now + ttl_seconds, "jti": uuid_v4() }
+}
+
+fn jwt_encode(claims: JwtClaims, secret: String) -> String {
+    let header_b64: String = base64url_no_pad("{\"alg\":\"HS256\",\"typ\":\"JWT\"}")
+    let payload_json: String = json_encode(claims)
+    let payload_b64: String = base64url_no_pad(payload_json)
+    let signing_input: String = header_b64 + "." + payload_b64
+    let sig: String = base64url_no_pad(hmac_sha256(secret, signing_input))
+    signing_input + "." + sig
+}
+
+fn jwt_decode(token: String, secret: String) -> AuthContext {
+    let parts:   String = token   // [header].[payload].[sig]
+    let dot1:    Int = str_index_of(parts, ".")
+    if dot1 < 0 { return auth_context_empty() }
+    let rest:    String = str_slice(parts, dot1 + 1, str_len(parts))
+    let dot2:    Int = str_index_of(rest, ".")
+    if dot2 < 0 { return auth_context_empty() }
+    let header_b64:  String = str_slice(parts, 0, dot1)
+    let payload_b64: String = str_slice(rest, 0, dot2)
+    let sig_b64:     String = str_slice(rest, dot2 + 1, str_len(rest))
+
+    let signing_input: String = header_b64 + "." + payload_b64
+    let expected_sig:  String = base64url_no_pad(hmac_sha256(secret, signing_input))
+    if !str_eq(expected_sig, sig_b64) { return auth_context_empty() }
+
+    let payload_json: String = base64url_decode(payload_b64)
+    let now: Int = time_now_unix()
+    let exp: Int = str_to_int(json_get(payload_json, "exp"))
+    if exp < now { return auth_context_empty() }
+
+    { "user_id":   json_get(payload_json, "sub"),
+      "email":     "",
+      "roles":     "[]",
+      "permissions": "[]",
+      "session_id": json_get(payload_json, "jti"),
+      "issued_at": json_get(payload_json, "iat"),
+      "expires_at": json_get(payload_json, "exp") }
+}
+
+// ── Engram-backed session store ──────────────────────────────────────────────
+//
+// Sessions are nodes of type "Session" connected to User via has_session.
+// Revocation = node delete. Verification = node lookup + expiry check.
+
+fn session_store_create(user_id: String, ttl_seconds: Int, ip: String) -> String {
+    let now:  String = time_now_iso()
+    let exp:  String = time_add_seconds(now, ttl_seconds)
+    let id:   String = uuid_v4()
+    let body: String = "{\"id\":\"" + id + "\",\"user_id\":\"" + user_id
+        + "\",\"created_at\":\"" + now + "\",\"expires_at\":\"" + exp
+        + "\",\"ip_address\":\"" + ip + "\"}"
+    let node_id: String = engram_node_create("Session", body)
+    engram_edge_create(user_id, node_id, "has_session")
+    node_id
+}
+
+fn session_store_verify(session_id: String) -> Bool {
+    let raw: String = engram_node_get(session_id)
+    if str_eq(raw, "") { return false }
+    let exp: String = json_get(raw, "expires_at")
+    !time_after(time_now_iso(), exp)
+}
+
+fn session_store_revoke(session_id: String) -> Bool {
+    engram_node_delete(session_id)
+}
+
+// ── Middleware ────────────────────────────────────────────────────────────────
+//
+// auth_middleware extracts the bearer token, decodes it, and populates the
+// AuthContext. Applied automatically by the @authenticate aspect (el-aop).
+
+fn extract_bearer(authorization_header: String) -> String {
+    if str_starts_with(authorization_header, "Bearer ") {
+        return str_slice(authorization_header, 7, str_len(authorization_header))
+    }
+    ""
+}
+
+fn auth_middleware(authorization_header: String, jwt_secret: String) -> AuthContext {
+    let token: String = extract_bearer(authorization_header)
+    if str_eq(token, "") { return auth_context_empty() }
+    jwt_decode(token, jwt_secret)
+}
+
+fn enforce_permission(ctx: AuthContext, required_perm: String) -> Bool {
+    if str_eq(ctx.user_id, "") { return false }
+    auth_context_has_permission(ctx, required_perm)
+}
+
+// ── Provider issue/verify ────────────────────────────────────────────────────
+
+fn provider_issue(user: AuthUser, jwt_secret: String, issuer: String, audience: String, ttl: Int) -> String {
+    let claims: JwtClaims = jwt_claims_new(user.id, issuer, audience, ttl)
+    jwt_encode(claims, jwt_secret)
+}
+
+fn provider_verify(token: String, jwt_secret: String) -> AuthContext {
+    let ctx: AuthContext = jwt_decode(token, jwt_secret)
+    if str_eq(ctx.user_id, "") { return ctx }
+    if !session_store_verify(ctx.session_id) { return auth_context_empty() }
+    ctx
+}
+
+fn provider_revoke(session_id: String) -> Bool {
+    session_store_revoke(session_id)
+}
+
+// ── Entry — smoke test ───────────────────────────────────────────────────────
+
+let user: AuthUser = { "id": "u-001", "email": "will@neurontechnologies.ai", "display_name": "Will" }
+let token: String = provider_issue(user, "test-secret", "el-ui", "el-app", 3600)
+println("[el-auth] issued JWT for " + user.email)
diff --git a/crates/el-auth/src/middleware.rs b/vessels/el-auth/src/middleware.rs
similarity index 100%
rename from crates/el-auth/src/middleware.rs
rename to vessels/el-auth/src/middleware.rs
diff --git a/crates/el-auth/src/roles.rs b/vessels/el-auth/src/roles.rs
similarity index 100%
rename from crates/el-auth/src/roles.rs
rename to vessels/el-auth/src/roles.rs
diff --git a/crates/el-auth/src/session.rs b/vessels/el-auth/src/session.rs
similarity index 100%
rename from crates/el-auth/src/session.rs
rename to vessels/el-auth/src/session.rs
diff --git a/crates/el-auth/src/tests.rs b/vessels/el-auth/src/tests.rs
similarity index 100%
rename from crates/el-auth/src/tests.rs
rename to vessels/el-auth/src/tests.rs
diff --git a/crates/el-config/Cargo.toml b/vessels/el-config/Cargo.toml
similarity index 100%
rename from crates/el-config/Cargo.toml
rename to vessels/el-config/Cargo.toml
diff --git a/vessels/el-config/manifest.el b/vessels/el-config/manifest.el
new file mode 100644
index 0000000..42d859a
--- /dev/null
+++ b/vessels/el-config/manifest.el
@@ -0,0 +1,24 @@
+// el-config — Layered, typed configuration for el-ui applications.
+//
+// Resolution order (highest priority wins):
+//   1. Environment variables                (EL_APP_NAME=...)
+//   2. .env file                            (development only)
+//   3. manifest.el [env.<current>] section
+//   4. manifest.el [config] base section
+//   5. Defaults defined in code
+
+vessel "el-config" {
+    version "0.1.0"
+    description "Layered, typed configuration with manifest + env + defaults"
+    authors ["Will Anderson <will@neurontechnologies.ai>"]
+    edition "2026"
+}
+
+dependencies {
+    el-platform "1.0"
+}
+
+build {
+    entry "src/main.el"
+    output "dist/"
+}
diff --git a/crates/el-config/src/config.rs b/vessels/el-config/src/config.rs
similarity index 100%
rename from crates/el-config/src/config.rs
rename to vessels/el-config/src/config.rs
diff --git a/crates/el-config/src/env.rs b/vessels/el-config/src/env.rs
similarity index 100%
rename from crates/el-config/src/env.rs
rename to vessels/el-config/src/env.rs
diff --git a/crates/el-config/src/error.rs b/vessels/el-config/src/error.rs
similarity index 100%
rename from crates/el-config/src/error.rs
rename to vessels/el-config/src/error.rs
diff --git a/crates/el-config/src/lib.rs b/vessels/el-config/src/lib.rs
similarity index 100%
rename from crates/el-config/src/lib.rs
rename to vessels/el-config/src/lib.rs
diff --git a/vessels/el-config/src/main.el b/vessels/el-config/src/main.el
new file mode 100644
index 0000000..476a874
--- /dev/null
+++ b/vessels/el-config/src/main.el
@@ -0,0 +1,177 @@
+// el-config — Layered, typed configuration for el-ui.
+//
+// Each layer is a key->value map. `Config::get(key)` walks layers from highest
+// to lowest priority and returns the first hit. Values are parsed into the
+// caller-requested type via `parse_<type>`.
+
+// ── Environment ──────────────────────────────────────────────────────────────
+
+let ENV_DEVELOPMENT: String = "development"
+let ENV_STAGING:     String = "staging"
+let ENV_PRODUCTION:  String = "production"
+let ENV_TEST:        String = "test"
+
+fn env_current() -> String {
+    let raw: String = env("EL_ENV")
+    if str_eq(raw, "") { return ENV_DEVELOPMENT }
+    raw
+}
+
+fn env_is_production(name: String) -> Bool {
+    str_eq(name, "production")
+}
+
+// ── Errors ───────────────────────────────────────────────────────────────────
+
+let CFG_ERR_MISSING:    String = "config.missing"
+let CFG_ERR_PARSE:      String = "config.parse_error"
+let CFG_ERR_TYPE:       String = "config.type_error"
+
+// ── Sources ──────────────────────────────────────────────────────────────────
+
+let SRC_ENV:      String = "env"
+let SRC_DOTENV:   String = "dotenv"
+let SRC_MANIFEST: String = "manifest"
+let SRC_DEFAULTS: String = "defaults"
+let SRC_MAP:      String = "map"
+
+type ConfigSource {
+    kind:        String
+    priority:    Int        // higher = wins
+    map_json:    String     // JSON: key -> string value
+}
+
+fn source_env_vars(prefix: String) -> ConfigSource {
+    // Snapshot env at construction (the runtime exposes env_keys()).
+    let map: String = "{}"
+    let keys: String = env_keys_with_prefix(prefix)
+    let n: Int = json_array_len(keys)
+    let i: Int = 0
+    while i < n {
+        let raw_key: String = json_array_get(keys, i)
+        let value:   String = env(raw_key)
+        let logical_key: String = str_to_lower(str_replace(str_slice(raw_key, str_len(prefix), str_len(raw_key)), "_", "."))
+        let map = json_set(map, logical_key, "\"" + value + "\"")
+        let i = i + 1
+    }
+    { "kind": "env", "priority": 100, "map_json": map }
+}
+
+fn source_dotenv(path: String) -> ConfigSource {
+    let raw: String = ""
+    if fs_exists(path) { let raw = fs_read(path) }
+    let map: String = dotenv_parse(raw)
+    { "kind": "dotenv", "priority": 80, "map_json": map }
+}
+
+fn source_manifest(manifest_path: String, current_env: String) -> ConfigSource {
+    let raw: String = fs_read(manifest_path)
+    let base:    String = manifest_section(raw, "config")
+    let env_key: String = "env." + current_env
+    let env_overrides: String = manifest_section(raw, env_key)
+    let map: String = json_merge(base, env_overrides)
+    { "kind": "manifest", "priority": 60, "map_json": map }
+}
+
+fn source_defaults(map_json: String) -> ConfigSource {
+    { "kind": "defaults", "priority": 0, "map_json": map_json }
+}
+
+// ── Config ───────────────────────────────────────────────────────────────────
+
+type Config {
+    environment:  String   // development | staging | production | test
+    sources_json: String   // JSON array of ConfigSource
+}
+
+fn config_new(env_name: String) -> Config {
+    { "environment": env_name, "sources_json": "[]" }
+}
+
+fn config_add_source(c: Config, src: ConfigSource) -> Config {
+    let updated: String = json_array_push_sorted(c.sources_json, json_encode(src), "priority", true)
+    { "environment": c.environment, "sources_json": updated }
+}
+
+fn config_set_defaults(c: Config, defaults_map: String) -> Config {
+    config_add_source(c, source_defaults(defaults_map))
+}
+
+fn config_get_string(c: Config, key: String) -> String {
+    let n: Int = json_array_len(c.sources_json)
+    let i: Int = 0
+    while i < n {
+        let src_json: String = json_array_get(c.sources_json, i)
+        let map:      String = json_get(src_json, "map_json")
+        let v:        String = json_get(map, key)
+        if !str_eq(v, "") { return v }
+        let i = i + 1
+    }
+    ""
+}
+
+fn config_get_int(c: Config, key: String) -> Int {
+    let raw: String = config_get_string(c, key)
+    if str_eq(raw, "") { return 0 }
+    str_to_int(raw)
+}
+
+fn config_get_bool(c: Config, key: String) -> Bool {
+    let raw: String = str_to_lower(config_get_string(c, key))
+    if str_eq(raw, "true") { return true }
+    if str_eq(raw, "1")    { return true }
+    if str_eq(raw, "yes")  { return true }
+    false
+}
+
+// Strict variants — non-empty required.
+fn config_require_string(c: Config, key: String) -> String {
+    let v: String = config_get_string(c, key)
+    if str_eq(v, "") { panic(CFG_ERR_MISSING + ":" + key) }
+    v
+}
+
+// ── load_from_toml — convenience for TOML config files ──────────────────────
+
+fn config_load_from_toml(path: String, env_name: String) -> Config {
+    let cfg: Config = config_new(env_name)
+    let raw: String = fs_read(path)
+    let map: String = toml_to_json_flat(raw)   // dotted keys
+    let cfg = config_add_source(cfg, source_defaults(map))
+    cfg
+}
+
+// ── .env parser (minimal) ───────────────────────────────────────────────────
+
+fn dotenv_parse(raw: String) -> String {
+    let map: String = "{}"
+    let lines: String = str_split(raw, "\n")
+    let n: Int = json_array_len(lines)
+    let i: Int = 0
+    while i < n {
+        let line: String = str_trim(json_array_get(lines, i))
+        if str_eq(line, "") {
+            let i = i + 1
+        }
+        if !str_eq(line, "") {
+            if !str_starts_with(line, "#") {
+                let eq: Int = str_index_of(line, "=")
+                if eq > 0 {
+                    let k: String = str_trim(str_slice(line, 0, eq))
+                    let v: String = str_trim(str_slice(line, eq + 1, str_len(line)))
+                    let v = str_strip_quotes(v)
+                    let map = json_set(map, str_to_lower(str_replace(k, "_", ".")), "\"" + v + "\"")
+                }
+                let i = i + 1
+            }
+        }
+    }
+    map
+}
+
+// ── Entry — smoke test ──────────────────────────────────────────────────────
+
+let cfg: Config = config_new(env_current())
+let defaults: String = "{\"app.name\":\"MyApp\",\"server.port\":\"8080\"}"
+let cfg = config_set_defaults(cfg, defaults)
+println("[el-config] env=" + cfg.environment + " app=" + config_get_string(cfg, "app.name"))
diff --git a/crates/el-config/src/source.rs b/vessels/el-config/src/source.rs
similarity index 100%
rename from crates/el-config/src/source.rs
rename to vessels/el-config/src/source.rs
diff --git a/crates/el-i18n/Cargo.toml b/vessels/el-i18n/Cargo.toml
similarity index 100%
rename from crates/el-i18n/Cargo.toml
rename to vessels/el-i18n/Cargo.toml
diff --git a/vessels/el-i18n/manifest.el b/vessels/el-i18n/manifest.el
new file mode 100644
index 0000000..169361d
--- /dev/null
+++ b/vessels/el-i18n/manifest.el
@@ -0,0 +1,19 @@
+// el-i18n — Localization for el-ui.
+//
+// RTL-aware, plural forms, CLDR-based number / currency formatting.
+
+vessel "el-i18n" {
+    version "0.1.0"
+    description "Locales, translations, plural forms, number/currency formatting"
+    authors ["Will Anderson <will@neurontechnologies.ai>"]
+    edition "2026"
+}
+
+dependencies {
+    el-platform "1.0"
+}
+
+build {
+    entry "src/main.el"
+    output "dist/"
+}
diff --git a/crates/el-i18n/src/bundle.rs b/vessels/el-i18n/src/bundle.rs
similarity index 100%
rename from crates/el-i18n/src/bundle.rs
rename to vessels/el-i18n/src/bundle.rs
diff --git a/crates/el-i18n/src/format.rs b/vessels/el-i18n/src/format.rs
similarity index 100%
rename from crates/el-i18n/src/format.rs
rename to vessels/el-i18n/src/format.rs
diff --git a/crates/el-i18n/src/lib.rs b/vessels/el-i18n/src/lib.rs
similarity index 100%
rename from crates/el-i18n/src/lib.rs
rename to vessels/el-i18n/src/lib.rs
diff --git a/crates/el-i18n/src/locale.rs b/vessels/el-i18n/src/locale.rs
similarity index 100%
rename from crates/el-i18n/src/locale.rs
rename to vessels/el-i18n/src/locale.rs
diff --git a/vessels/el-i18n/src/main.el b/vessels/el-i18n/src/main.el
new file mode 100644
index 0000000..56e7158
--- /dev/null
+++ b/vessels/el-i18n/src/main.el
@@ -0,0 +1,208 @@
+// el-i18n — Localization for el-ui.
+//
+// Two-letter language tag + optional region: en, en-US, ar-EG, zh-Hant.
+// Bundles map keys to either a plain string or a plural-form map.
+// `t(key)` and `t_plural(key, count)` are the surface API.
+
+// ── Locale ───────────────────────────────────────────────────────────────────
+
+let DIR_LTR: String = "ltr"
+let DIR_RTL: String = "rtl"
+
+type Locale {
+    language: String   // "en"
+    region:   String   // "US" (may be empty)
+    direction: String  // "ltr" | "rtl"
+}
+
+fn locale_new(language: String, region: String) -> Locale {
+    let dir: String = "ltr"
+    if str_eq(language, "ar")  { let dir = "rtl" }
+    if str_eq(language, "he")  { let dir = "rtl" }
+    if str_eq(language, "fa")  { let dir = "rtl" }
+    if str_eq(language, "ur")  { let dir = "rtl" }
+    { "language": language, "region": region, "direction": dir }
+}
+
+fn locale_en_us() -> Locale { locale_new("en", "US") }
+fn locale_es_es() -> Locale { locale_new("es", "ES") }
+fn locale_zh_cn() -> Locale { locale_new("zh", "CN") }
+fn locale_ar_eg() -> Locale { locale_new("ar", "EG") }
+fn locale_ja_jp() -> Locale { locale_new("ja", "JP") }
+
+fn locale_tag(loc: Locale) -> String {
+    if str_eq(loc.region, "") { return loc.language }
+    loc.language + "-" + loc.region
+}
+
+fn is_rtl(loc: Locale) -> Bool {
+    str_eq(loc.direction, "rtl")
+}
+
+// ── Plural forms (CLDR cardinal categories) ──────────────────────────────────
+//
+// Categories: zero, one, two, few, many, other.
+// Most languages only use one + other; Arabic uses all six.
+
+let PLURAL_ZERO:  String = "zero"
+let PLURAL_ONE:   String = "one"
+let PLURAL_TWO:   String = "two"
+let PLURAL_FEW:   String = "few"
+let PLURAL_MANY:  String = "many"
+let PLURAL_OTHER: String = "other"
+
+fn plural_form(loc: Locale, n: Int) -> String {
+    if str_eq(loc.language, "ar") { return plural_form_arabic(n) }
+    if str_eq(loc.language, "ru") { return plural_form_russian(n) }
+    if str_eq(loc.language, "pl") { return plural_form_polish(n) }
+    if str_eq(loc.language, "ja") { return PLURAL_OTHER }
+    if str_eq(loc.language, "zh") { return PLURAL_OTHER }
+    if str_eq(loc.language, "ko") { return PLURAL_OTHER }
+    // Default English-like rule
+    if n == 1 { return PLURAL_ONE }
+    PLURAL_OTHER
+}
+
+fn plural_form_arabic(n: Int) -> String {
+    if n == 0 { return PLURAL_ZERO }
+    if n == 1 { return PLURAL_ONE }
+    if n == 2 { return PLURAL_TWO }
+    let mod100: Int = n - ((n / 100) * 100)
+    if mod100 >= 3 {
+        if mod100 <= 10 { return PLURAL_FEW }
+    }
+    if mod100 >= 11 {
+        if mod100 <= 99 { return PLURAL_MANY }
+    }
+    PLURAL_OTHER
+}
+
+fn plural_form_russian(n: Int) -> String {
+    let mod10:  Int = n - ((n / 10)  * 10)
+    let mod100: Int = n - ((n / 100) * 100)
+    if mod10 == 1 {
+        if mod100 == 11 { return PLURAL_MANY }
+        return PLURAL_ONE
+    }
+    if mod10 >= 2 {
+        if mod10 <= 4 {
+            if mod100 >= 12 {
+                if mod100 <= 14 { return PLURAL_MANY }
+            }
+            return PLURAL_FEW
+        }
+    }
+    PLURAL_MANY
+}
+
+fn plural_form_polish(n: Int) -> String {
+    if n == 1 { return PLURAL_ONE }
+    let mod10:  Int = n - ((n / 10)  * 10)
+    let mod100: Int = n - ((n / 100) * 100)
+    if mod10 >= 2 {
+        if mod10 <= 4 {
+            if mod100 >= 12 {
+                if mod100 <= 14 { return PLURAL_MANY }
+            }
+            return PLURAL_FEW
+        }
+    }
+    PLURAL_MANY
+}
+
+// ── Translation bundle ──────────────────────────────────────────────────────
+//
+// Stored as a JSON map: key -> value | { one: "...", other: "..." }
+// `bundle_load_toml` parses a TOML file at load time (planned runtime fn).
+
+fn bundle_new() -> String {
+    "{}"
+}
+
+fn bundle_insert(bundle: String, key: String, value: String) -> String {
+    json_set(bundle, key, "\"" + value + "\"")
+}
+
+fn bundle_insert_plural(bundle: String, key: String, plural_map_json: String) -> String {
+    json_set(bundle, key, plural_map_json)
+}
+
+fn bundle_load_toml(path: String) -> String {
+    let raw: String = fs_read(path)
+    toml_to_json(raw)
+}
+
+// ── LocaleContext + t/t_plural ──────────────────────────────────────────────
+
+type LocaleContext {
+    locale: Locale
+    bundle: String   // JSON
+    fallback_bundle: String
+}
+
+fn locale_context_new(loc: Locale, bundle: String) -> LocaleContext {
+    { "locale": loc, "bundle": bundle, "fallback_bundle": "{}" }
+}
+
+fn t(ctx: LocaleContext, key: String) -> String {
+    let v: String = json_get(ctx.bundle, key)
+    if str_eq(v, "") { let v = json_get(ctx.fallback_bundle, key) }
+    if str_eq(v, "") { return key }
+    v
+}
+
+fn t_plural(ctx: LocaleContext, key: String, n: Int) -> String {
+    let entry: String = json_get(ctx.bundle, key)
+    if str_eq(entry, "") { return key }
+    let form: String = plural_form(ctx.locale, n)
+    let template: String = json_get(entry, form)
+    if str_eq(template, "") { let template = json_get(entry, PLURAL_OTHER) }
+    if str_eq(template, "") { return key }
+    str_replace(template, "{n}", int_to_str(n))
+}
+
+// ── Number / currency formatting ─────────────────────────────────────────────
+
+fn format_integer(loc: Locale, n: Int) -> String {
+    // Group thousands by the locale's separator. Stub: en uses ',', most EU uses '.'.
+    let sep: String = ","
+    if str_eq(loc.language, "es") { let sep = "." }
+    if str_eq(loc.language, "de") { let sep = "." }
+    if str_eq(loc.language, "fr") { let sep = " " }
+    int_with_separator(n, sep)
+}
+
+fn format_number(loc: Locale, n: Int, fraction_digits: Int) -> String {
+    let dec_sep: String = "."
+    if str_eq(loc.language, "es") { let dec_sep = "," }
+    if str_eq(loc.language, "de") { let dec_sep = "," }
+    if str_eq(loc.language, "fr") { let dec_sep = "," }
+    format_integer(loc, n) + dec_sep + repeat_str("0", fraction_digits)
+}
+
+fn format_percent(loc: Locale, value_x100: Int) -> String {
+    let body: String = int_to_str(value_x100 / 100) + "."
+        + int_to_str(value_x100 - ((value_x100 / 100) * 100))
+    if str_eq(loc.language, "fr") { return body + " %" }
+    body + "%"
+}
+
+fn format_currency(loc: Locale, amount_minor: Int, iso: String) -> String {
+    // amount_minor is in the smallest unit (cents). Stub formatting only.
+    let major: Int = amount_minor / 100
+    let minor: Int = amount_minor - (major * 100)
+    let body:  String = int_to_str(major) + "." + int_to_str(minor)
+    if str_eq(iso, "USD") { return "$" + body }
+    if str_eq(iso, "EUR") { return body + " €" }
+    if str_eq(iso, "GBP") { return "£" + body }
+    if str_eq(iso, "JPY") { return "¥" + int_to_str(amount_minor) }
+    body + " " + iso
+}
+
+// ── Entry — smoke test ──────────────────────────────────────────────────────
+
+let loc: Locale = locale_en_us()
+let bundle: String = bundle_new()
+let bundle = bundle_insert(bundle, "profile.follow", "Follow")
+let ctx: LocaleContext = locale_context_new(loc, bundle)
+println("[el-i18n] " + t(ctx, "profile.follow"))
diff --git a/crates/el-i18n/src/plural.rs b/vessels/el-i18n/src/plural.rs
similarity index 100%
rename from crates/el-i18n/src/plural.rs
rename to vessels/el-i18n/src/plural.rs
diff --git a/crates/el-i18n/src/t.rs b/vessels/el-i18n/src/t.rs
similarity index 100%
rename from crates/el-i18n/src/t.rs
rename to vessels/el-i18n/src/t.rs
diff --git a/crates/el-identity/Cargo.toml b/vessels/el-identity/Cargo.toml
similarity index 100%
rename from crates/el-identity/Cargo.toml
rename to vessels/el-identity/Cargo.toml
diff --git a/vessels/el-identity/manifest.el b/vessels/el-identity/manifest.el
new file mode 100644
index 0000000..b8a9652
--- /dev/null
+++ b/vessels/el-identity/manifest.el
@@ -0,0 +1,24 @@
+// el-identity — Engram-native identity for el-ui.
+//
+// Identity is not a bolt-on. Users, roles, scopes, sessions, and OAuth tokens
+// are first-class Engram nodes connected by typed edges:
+//
+//     User ──has_role──▶ Role ──grants──▶ Scope
+//      │
+//      └──has_session──▶ Session ──authenticated_via──▶ OAuthToken
+
+vessel "el-identity" {
+    version "0.1.0"
+    description "Engram-native identity graph: users, roles, sessions, OAuth"
+    authors ["Will Anderson <will@neurontechnologies.ai>"]
+    edition "2026"
+}
+
+dependencies {
+    el-platform "1.0"
+}
+
+build {
+    entry "src/main.el"
+    output "dist/"
+}
diff --git a/crates/el-identity/src/context.rs b/vessels/el-identity/src/context.rs
similarity index 100%
rename from crates/el-identity/src/context.rs
rename to vessels/el-identity/src/context.rs
diff --git a/crates/el-identity/src/engram.rs b/vessels/el-identity/src/engram.rs
similarity index 100%
rename from crates/el-identity/src/engram.rs
rename to vessels/el-identity/src/engram.rs
diff --git a/crates/el-identity/src/error.rs b/vessels/el-identity/src/error.rs
similarity index 100%
rename from crates/el-identity/src/error.rs
rename to vessels/el-identity/src/error.rs
diff --git a/crates/el-identity/src/guard.rs b/vessels/el-identity/src/guard.rs
similarity index 100%
rename from crates/el-identity/src/guard.rs
rename to vessels/el-identity/src/guard.rs
diff --git a/crates/el-identity/src/lib.rs b/vessels/el-identity/src/lib.rs
similarity index 100%
rename from crates/el-identity/src/lib.rs
rename to vessels/el-identity/src/lib.rs
diff --git a/vessels/el-identity/src/main.el b/vessels/el-identity/src/main.el
new file mode 100644
index 0000000..aafbf40
--- /dev/null
+++ b/vessels/el-identity/src/main.el
@@ -0,0 +1,271 @@
+// el-identity — Engram-native identity for el-ui.
+//
+// Identity in el-ui is a graph, not a table. Every entity is a node; every
+// relationship is an edge. Authentication is spreading activation from a
+// session token through the identity subgraph until it touches a User node.
+//
+// Edges:
+//   User ──has_role──▶ Role ──grants──▶ Scope
+//   User ──has_session──▶ Session ──authenticated_via──▶ OAuthToken
+
+// ── Edge type constants ──────────────────────────────────────────────────────
+
+let EDGE_HAS_ROLE: String           = "has_role"
+let EDGE_HAS_SESSION: String        = "has_session"
+let EDGE_AUTHENTICATED_VIA: String  = "authenticated_via"
+let EDGE_GRANTS: String             = "grants"
+
+// ── Node type constants ──────────────────────────────────────────────────────
+
+let NODE_USER: String        = "User"
+let NODE_ROLE: String        = "Role"
+let NODE_SCOPE: String       = "Scope"
+let NODE_OAUTH_TOKEN: String = "OAuthToken"
+let NODE_SESSION: String     = "Session"
+
+// ── User ─────────────────────────────────────────────────────────────────────
+
+type User {
+    id:           String
+    email:        String
+    display_name: String
+    created_at:   String
+}
+
+fn user_new(email: String, display_name: String) -> User {
+    let now: String = time_now_iso()
+    let id: String  = uuid_v4()
+    { "id": id, "email": email, "display_name": display_name, "created_at": now }
+}
+
+// ── Role / Scope ─────────────────────────────────────────────────────────────
+
+type Role {
+    id:          String
+    name:        String
+    permissions: String   // JSON-encoded array; struct fields are flat in El today
+}
+
+type Scope {
+    id:          String
+    name:        String
+    description: String
+}
+
+fn role_new(name: String) -> Role {
+    { "id": uuid_v4(), "name": name, "permissions": "[]" }
+}
+
+fn role_has_permission(role: Role, perm: String) -> Bool {
+    str_contains(role.permissions, "\"" + perm + "\"")
+}
+
+fn scope_new(name: String, description: String) -> Scope {
+    { "id": uuid_v4(), "name": name, "description": description }
+}
+
+// ── Session ──────────────────────────────────────────────────────────────────
+
+type Session {
+    id:         String
+    user_id:    String
+    created_at: String
+    expires_at: String
+    ip_address: String
+}
+
+fn session_new(user_id: String, ttl_seconds: Int, ip_address: String) -> Session {
+    let now: String = time_now_iso()
+    let exp: String = time_add_seconds(now, ttl_seconds)
+    { "id": uuid_v4(), "user_id": user_id, "created_at": now, "expires_at": exp, "ip_address": ip_address }
+}
+
+fn session_is_expired(session: Session) -> Bool {
+    time_after(time_now_iso(), session.expires_at)
+}
+
+// ── OAuthToken ───────────────────────────────────────────────────────────────
+//
+// Tokens are SHA-256 hashed before storage — the raw token never persists.
+
+type OAuthToken {
+    id:                 String
+    provider:           String
+    access_token_hash:  String
+    refresh_token_hash: String
+    expires_at:         String
+    scopes:             String   // JSON-encoded array
+}
+
+fn token_hash(raw: String) -> String {
+    sha256_hex(raw)
+}
+
+fn oauth_token_new(provider: String, access_raw: String, refresh_raw: String, expires_at: String, scopes: String) -> OAuthToken {
+    let access_h:  String = token_hash(access_raw)
+    let refresh_h: String = ""
+    if !str_eq(refresh_raw, "") { let refresh_h = token_hash(refresh_raw) }
+    { "id": uuid_v4(), "provider": provider, "access_token_hash": access_h,
+      "refresh_token_hash": refresh_h, "expires_at": expires_at, "scopes": scopes }
+}
+
+fn oauth_token_is_expired(t: OAuthToken) -> Bool {
+    time_after(time_now_iso(), t.expires_at)
+}
+
+// ── PKCE (RFC 7636) ──────────────────────────────────────────────────────────
+
+type PkceChallenge {
+    verifier:  String
+    challenge: String
+    method:    String   // always "S256"
+}
+
+fn pkce_generate() -> PkceChallenge {
+    let verifier: String = base64url_no_pad(random_bytes(32))
+    let chal:     String = base64url_no_pad(sha256_bytes(verifier))
+    { "verifier": verifier, "challenge": chal, "method": "S256" }
+}
+
+fn pkce_verify(challenge: String, verifier: String) -> Bool {
+    let computed: String = base64url_no_pad(sha256_bytes(verifier))
+    str_eq(computed, challenge)
+}
+
+// ── OAuth providers (Google / GitHub / Apple) ────────────────────────────────
+//
+// Stubbed: shape-only. `provider_authorization_url` produces the redirect URL;
+// `provider_exchange_code` POSTs to the token endpoint via http_post.
+
+type OAuthProviderCfg {
+    name:          String
+    client_id:     String
+    client_secret: String
+    auth_url:      String
+    token_url:     String
+    default_scopes: String
+}
+
+fn google_provider(client_id: String, client_secret: String) -> OAuthProviderCfg {
+    { "name": "google", "client_id": client_id, "client_secret": client_secret,
+      "auth_url":  "https://accounts.google.com/o/oauth2/v2/auth",
+      "token_url": "https://oauth2.googleapis.com/token",
+      "default_scopes": "[\"openid\",\"email\",\"profile\"]" }
+}
+
+fn github_provider(client_id: String, client_secret: String) -> OAuthProviderCfg {
+    { "name": "github", "client_id": client_id, "client_secret": client_secret,
+      "auth_url":  "https://github.com/login/oauth/authorize",
+      "token_url": "https://github.com/login/oauth/access_token",
+      "default_scopes": "[\"read:user\",\"user:email\"]" }
+}
+
+fn apple_provider(client_id: String, client_secret: String) -> OAuthProviderCfg {
+    { "name": "apple", "client_id": client_id, "client_secret": client_secret,
+      "auth_url":  "https://appleid.apple.com/auth/authorize",
+      "token_url": "https://appleid.apple.com/auth/token",
+      "default_scopes": "[\"name\",\"email\"]" }
+}
+
+fn provider_authorization_url(p: OAuthProviderCfg, redirect_uri: String, code_challenge: String, state: String) -> String {
+    p.auth_url + "?response_type=code"
+        + "&client_id="     + url_encode(p.client_id)
+        + "&redirect_uri="  + url_encode(redirect_uri)
+        + "&scope="         + url_encode(json_array_to_space_list(p.default_scopes))
+        + "&state="         + url_encode(state)
+        + "&code_challenge=" + url_encode(code_challenge)
+        + "&code_challenge_method=S256"
+}
+
+// ── Engram client interface (graph CRUD) ─────────────────────────────────────
+//
+// Identity persists to the local Engram graph. These wrap engram_* runtime
+// calls (planned). Until that lands, the server-side stub uses a JSON file.
+
+fn engram_create_node(node_type: String, value_json: String) -> String {
+    engram_node_create(node_type, value_json)
+}
+
+fn engram_create_edge(from_id: String, to_id: String, edge_type: String) -> Bool {
+    engram_edge_create(from_id, to_id, edge_type)
+}
+
+fn engram_find_connected(node_id: String, edge_type: String) -> String {
+    engram_edge_traverse(node_id, edge_type)
+}
+
+// ── OAuth flow coordinator ───────────────────────────────────────────────────
+
+type AuthFlowParams {
+    pkce_verifier: String
+    pkce_challenge: String
+    redirect_url:  String
+    state:         String
+}
+
+fn begin_auth_flow(provider: OAuthProviderCfg, redirect_uri: String) -> AuthFlowParams {
+    let pkce: PkceChallenge = pkce_generate()
+    let state: String       = base64url_no_pad(random_bytes(16))
+    let url:   String       = provider_authorization_url(provider, redirect_uri, pkce.challenge, state)
+    { "pkce_verifier": pkce.verifier, "pkce_challenge": pkce.challenge, "redirect_url": url, "state": state }
+}
+
+fn exchange_code(provider: OAuthProviderCfg, code: String, pkce_verifier: String, redirect_uri: String, session_id: String) -> OAuthToken {
+    let body: String = "grant_type=authorization_code"
+        + "&code="          + url_encode(code)
+        + "&redirect_uri="  + url_encode(redirect_uri)
+        + "&client_id="     + url_encode(provider.client_id)
+        + "&client_secret=" + url_encode(provider.client_secret)
+        + "&code_verifier=" + url_encode(pkce_verifier)
+    let resp: String = http_post(provider.token_url, body)
+    let access:  String = json_get(resp, "access_token")
+    let refresh: String = json_get(resp, "refresh_token")
+    let expires_in: Int = str_to_int(json_get(resp, "expires_in"))
+    let exp_at:  String = time_add_seconds(time_now_iso(), expires_in)
+    let token:   OAuthToken = oauth_token_new(provider.name, access, refresh, exp_at, "[]")
+    let token_id: String = engram_create_node(NODE_OAUTH_TOKEN, json_encode(token))
+    engram_create_edge(session_id, token_id, EDGE_AUTHENTICATED_VIA)
+    token
+}
+
+// ── Session manager ──────────────────────────────────────────────────────────
+
+fn session_create(user_id: String, ttl: Int, ip: String) -> Session {
+    let s: Session       = session_new(user_id, ttl, ip)
+    let session_id: String = engram_create_node(NODE_SESSION, json_encode(s))
+    engram_create_edge(user_id, session_id, EDGE_HAS_SESSION)
+    s
+}
+
+fn session_revoke(session_id: String) -> Bool {
+    engram_node_delete(session_id)
+}
+
+// ── AuthGuard — applied via @authenticate decorator ─────────────────────────
+
+fn auth_guard_verify(session_id: String) -> Bool {
+    let raw: String = engram_node_get(session_id)
+    if str_eq(raw, "") { return false }
+    let exp: String = json_get(raw, "expires_at")
+    !time_after(time_now_iso(), exp)
+}
+
+// ── Identity context (passed through the request lifecycle) ─────────────────
+
+type IdentityContext {
+    user_id:    String
+    session_id: String
+    roles_json: String
+}
+
+fn identity_load(session_id: String) -> IdentityContext {
+    let session_raw: String = engram_node_get(session_id)
+    let user_id:     String = json_get(session_raw, "user_id")
+    let roles_raw:   String = engram_find_connected(user_id, EDGE_HAS_ROLE)
+    { "user_id": user_id, "session_id": session_id, "roles_json": roles_raw }
+}
+
+// ── Entry — smoke test ──────────────────────────────────────────────────────
+
+let user: User = user_new("will@neurontechnologies.ai", "Will Anderson")
+println("[el-identity] user " + user.email + " (" + user.id + ")")
diff --git a/crates/el-identity/src/nodes.rs b/vessels/el-identity/src/nodes.rs
similarity index 100%
rename from crates/el-identity/src/nodes.rs
rename to vessels/el-identity/src/nodes.rs
diff --git a/crates/el-identity/src/oauth.rs b/vessels/el-identity/src/oauth.rs
similarity index 100%
rename from crates/el-identity/src/oauth.rs
rename to vessels/el-identity/src/oauth.rs
diff --git a/crates/el-identity/src/provider.rs b/vessels/el-identity/src/provider.rs
similarity index 100%
rename from crates/el-identity/src/provider.rs
rename to vessels/el-identity/src/provider.rs
diff --git a/crates/el-identity/src/session.rs b/vessels/el-identity/src/session.rs
similarity index 100%
rename from crates/el-identity/src/session.rs
rename to vessels/el-identity/src/session.rs
diff --git a/crates/el-identity/src/tests.rs b/vessels/el-identity/src/tests.rs
similarity index 100%
rename from crates/el-identity/src/tests.rs
rename to vessels/el-identity/src/tests.rs
diff --git a/crates/el-layout/Cargo.toml b/vessels/el-layout/Cargo.toml
similarity index 100%
rename from crates/el-layout/Cargo.toml
rename to vessels/el-layout/Cargo.toml
diff --git a/vessels/el-layout/manifest.el b/vessels/el-layout/manifest.el
new file mode 100644
index 0000000..5412d67
--- /dev/null
+++ b/vessels/el-layout/manifest.el
@@ -0,0 +1,21 @@
+// el-layout — Responsive layout engine for el-ui.
+//
+// Responsive by default. VStack and HStack wrap automatically.
+// Grid uses auto columns. You don't write breakpoints for basic layouts.
+
+vessel "el-layout" {
+    version "0.1.0"
+    description "Stacks, grids, breakpoints, responsive values, safe-area insets"
+    authors ["Will Anderson <will@neurontechnologies.ai>"]
+    edition "2026"
+}
+
+dependencies {
+    el-platform "1.0"
+    el-style "0.1"
+}
+
+build {
+    entry "src/main.el"
+    output "dist/"
+}
diff --git a/crates/el-layout/src/breakpoint.rs b/vessels/el-layout/src/breakpoint.rs
similarity index 100%
rename from crates/el-layout/src/breakpoint.rs
rename to vessels/el-layout/src/breakpoint.rs
diff --git a/crates/el-layout/src/constraints.rs b/vessels/el-layout/src/constraints.rs
similarity index 100%
rename from crates/el-layout/src/constraints.rs
rename to vessels/el-layout/src/constraints.rs
diff --git a/crates/el-layout/src/flex.rs b/vessels/el-layout/src/flex.rs
similarity index 100%
rename from crates/el-layout/src/flex.rs
rename to vessels/el-layout/src/flex.rs
diff --git a/crates/el-layout/src/grid.rs b/vessels/el-layout/src/grid.rs
similarity index 100%
rename from crates/el-layout/src/grid.rs
rename to vessels/el-layout/src/grid.rs
diff --git a/crates/el-layout/src/lib.rs b/vessels/el-layout/src/lib.rs
similarity index 100%
rename from crates/el-layout/src/lib.rs
rename to vessels/el-layout/src/lib.rs
diff --git a/vessels/el-layout/src/main.el b/vessels/el-layout/src/main.el
new file mode 100644
index 0000000..dfc4d9a
--- /dev/null
+++ b/vessels/el-layout/src/main.el
@@ -0,0 +1,237 @@
+// el-layout — Responsive layout engine for el-ui.
+//
+// Primitives:
+//   VStack, HStack, ZStack   — stack layouts (wrap by default)
+//   GridLayout               — responsive grid
+//   ScrollView               — scrollable container
+//   Responsive<T>            — value that changes by breakpoint
+
+// ── Breakpoints ──────────────────────────────────────────────────────────────
+
+let BP_XS:  String = "xs"   // <  640px
+let BP_SM:  String = "sm"   // >= 640px
+let BP_MD:  String = "md"   // >= 768px
+let BP_LG:  String = "lg"   // >= 1024px
+let BP_XL:  String = "xl"   // >= 1280px
+let BP_XXL: String = "xxl"  // >= 1536px
+
+let BP_SM_PX:  Int = 640
+let BP_MD_PX:  Int = 768
+let BP_LG_PX:  Int = 1024
+let BP_XL_PX:  Int = 1280
+let BP_XXL_PX: Int = 1536
+
+fn breakpoint_for_width(width_px: Int) -> String {
+    if width_px >= BP_XXL_PX { return BP_XXL }
+    if width_px >= BP_XL_PX  { return BP_XL }
+    if width_px >= BP_LG_PX  { return BP_LG }
+    if width_px >= BP_MD_PX  { return BP_MD }
+    if width_px >= BP_SM_PX  { return BP_SM }
+    BP_XS
+}
+
+// Cascade index — used by Responsive<T> to find the most-specific value <= bp.
+fn breakpoint_index(bp: String) -> Int {
+    if str_eq(bp, "xs")  { return 0 }
+    if str_eq(bp, "sm")  { return 1 }
+    if str_eq(bp, "md")  { return 2 }
+    if str_eq(bp, "lg")  { return 3 }
+    if str_eq(bp, "xl")  { return 4 }
+    if str_eq(bp, "xxl") { return 5 }
+    0
+}
+
+// ── Responsive<T> ────────────────────────────────────────────────────────────
+//
+// Stored as a JSON object: { "xs": v0, "md": v1, "lg": v2 }
+// resolve(bp) walks down from bp until it finds a defined value.
+
+fn responsive_fixed(value: String) -> String {
+    "{\"xs\":" + value + "}"
+}
+
+fn responsive_set(rv: String, bp: String, value: String) -> String {
+    json_set(rv, bp, value)
+}
+
+fn responsive_resolve(rv: String, bp: String) -> String {
+    let order: String = "xxl,xl,lg,md,sm,xs"
+    let target_idx: Int = breakpoint_index(bp)
+    // Try each breakpoint <= target, most-specific first.
+    let probe: String = bp
+    while !str_eq(probe, "") {
+        let v: String = json_get(rv, probe)
+        if !str_eq(v, "") { return v }
+        let idx: Int = breakpoint_index(probe)
+        if idx == 0 { return "" }
+        let probe = breakpoint_step_down(probe)
+    }
+    ""
+}
+
+fn breakpoint_step_down(bp: String) -> String {
+    if str_eq(bp, "xxl") { return "xl" }
+    if str_eq(bp, "xl")  { return "lg" }
+    if str_eq(bp, "lg")  { return "md" }
+    if str_eq(bp, "md")  { return "sm" }
+    if str_eq(bp, "sm")  { return "xs" }
+    ""
+}
+
+// ── Constraints / Size ───────────────────────────────────────────────────────
+
+type Size {
+    width:  Int
+    height: Int
+}
+
+type LayoutConstraints {
+    min_width:  Int
+    max_width:  Int
+    min_height: Int
+    max_height: Int
+}
+
+fn constraints_unbounded() -> LayoutConstraints {
+    { "min_width": 0, "max_width": 999999, "min_height": 0, "max_height": 999999 }
+}
+
+fn constraints_tight(w: Int, h: Int) -> LayoutConstraints {
+    { "min_width": w, "max_width": w, "min_height": h, "max_height": h }
+}
+
+// ── Flex axes ────────────────────────────────────────────────────────────────
+
+let FLEX_ROW:    String = "row"
+let FLEX_COLUMN: String = "column"
+
+let MAIN_START:    String = "start"
+let MAIN_END:      String = "end"
+let MAIN_CENTER:   String = "center"
+let MAIN_BETWEEN:  String = "space-between"
+let MAIN_AROUND:   String = "space-around"
+let MAIN_EVENLY:   String = "space-evenly"
+
+let CROSS_START:    String = "start"
+let CROSS_END:      String = "end"
+let CROSS_CENTER:   String = "center"
+let CROSS_STRETCH:  String = "stretch"
+let CROSS_BASELINE: String = "baseline"
+
+type FlexLayout {
+    direction:        String
+    main_alignment:   String
+    cross_alignment:  String
+    gap_px:           Int
+    wrap:             Bool
+}
+
+fn flex_default() -> FlexLayout {
+    { "direction": "row", "main_alignment": "start",
+      "cross_alignment": "stretch", "gap_px": 8, "wrap": true }
+}
+
+// ── Stacks ───────────────────────────────────────────────────────────────────
+//
+// VStack / HStack / ZStack are component classes in the JS runtime; the
+// El side here exposes their layout descriptor — the bag of values the
+// el-ui-compiler emits into JSX/HTML attributes.
+
+type StackLayout {
+    direction:       String   // row | column | depth
+    main_alignment:  String
+    cross_alignment: String
+    gap_px:          Int
+    wrap:            Bool
+    spacing_token:   String   // semantic spacing token (md, lg, ...)
+}
+
+fn vstack(spacing_token: String) -> StackLayout {
+    { "direction": "column", "main_alignment": "start",
+      "cross_alignment": "stretch", "gap_px": 0, "wrap": true,
+      "spacing_token": spacing_token }
+}
+
+fn hstack(spacing_token: String) -> StackLayout {
+    { "direction": "row", "main_alignment": "start",
+      "cross_alignment": "center", "gap_px": 0, "wrap": true,
+      "spacing_token": spacing_token }
+}
+
+fn zstack() -> StackLayout {
+    { "direction": "depth", "main_alignment": "center",
+      "cross_alignment": "center", "gap_px": 0, "wrap": false,
+      "spacing_token": "" }
+}
+
+// ── Grid ─────────────────────────────────────────────────────────────────────
+
+type GridLayout {
+    columns:     String   // "auto" or "1fr 1fr 1fr" etc
+    rows:        String
+    gap_px:      Int
+    auto_fit_min: Int     // for `repeat(auto-fit, minmax(<min>, 1fr))`
+}
+
+fn grid_auto(min_col_px: Int, gap: Int) -> GridLayout {
+    { "columns": "auto-fit", "rows": "auto", "gap_px": gap, "auto_fit_min": min_col_px }
+}
+
+fn grid_fixed(num_cols: Int, gap: Int) -> GridLayout {
+    let cols: String = repeat_str("1fr ", num_cols)
+    { "columns": cols, "rows": "auto", "gap_px": gap, "auto_fit_min": 0 }
+}
+
+fn grid_to_css(g: GridLayout) -> String {
+    let cols: String = g.columns
+    if str_eq(cols, "auto-fit") {
+        let cols = "repeat(auto-fit, minmax(" + int_to_str(g.auto_fit_min) + "px, 1fr))"
+    }
+    "display: grid; grid-template-columns: " + cols + "; gap: " + int_to_str(g.gap_px) + "px;"
+}
+
+// ── ScrollView ──────────────────────────────────────────────────────────────
+
+let SCROLL_X: String = "x"
+let SCROLL_Y: String = "y"
+let SCROLL_BOTH: String = "both"
+
+type ScrollView {
+    axis:                 String
+    show_indicator:       Bool
+    bounce:               Bool   // iOS-style overscroll
+}
+
+fn scroll_view_y() -> ScrollView {
+    { "axis": "y", "show_indicator": true, "bounce": true }
+}
+
+// ── Platform sizing ──────────────────────────────────────────────────────────
+
+let PLATFORM_PHONE:   String = "phone"
+let PLATFORM_TABLET:  String = "tablet"
+let PLATFORM_DESKTOP: String = "desktop"
+
+type SafeAreaInsets {
+    top:    Int
+    right:  Int
+    bottom: Int
+    left:   Int
+}
+
+fn safe_area_zero() -> SafeAreaInsets {
+    { "top": 0, "right": 0, "bottom": 0, "left": 0 }
+}
+
+fn platform_for_width(width: Int) -> String {
+    if width < 768 { return "phone" }
+    if width < 1024 { return "tablet" }
+    "desktop"
+}
+
+// ── Entry — smoke test ──────────────────────────────────────────────────────
+
+let r: String = responsive_fixed("1")
+let r = responsive_set(r, "md", "2")
+let r = responsive_set(r, "lg", "3")
+println("[el-layout] cols at lg = " + responsive_resolve(r, "lg"))
diff --git a/crates/el-layout/src/platform.rs b/vessels/el-layout/src/platform.rs
similarity index 100%
rename from crates/el-layout/src/platform.rs
rename to vessels/el-layout/src/platform.rs
diff --git a/crates/el-layout/src/responsive.rs b/vessels/el-layout/src/responsive.rs
similarity index 100%
rename from crates/el-layout/src/responsive.rs
rename to vessels/el-layout/src/responsive.rs
diff --git a/crates/el-layout/src/scroll.rs b/vessels/el-layout/src/scroll.rs
similarity index 100%
rename from crates/el-layout/src/scroll.rs
rename to vessels/el-layout/src/scroll.rs
diff --git a/crates/el-layout/src/stack.rs b/vessels/el-layout/src/stack.rs
similarity index 100%
rename from crates/el-layout/src/stack.rs
rename to vessels/el-layout/src/stack.rs
diff --git a/crates/el-platform/Cargo.toml b/vessels/el-platform/Cargo.toml
similarity index 100%
rename from crates/el-platform/Cargo.toml
rename to vessels/el-platform/Cargo.toml
diff --git a/vessels/el-platform/manifest.el b/vessels/el-platform/manifest.el
new file mode 100644
index 0000000..553d9cf
--- /dev/null
+++ b/vessels/el-platform/manifest.el
@@ -0,0 +1,23 @@
+// el-platform — Platform abstraction surface for el-ui.
+//
+// Wraps the El runtime's filesystem, network, environment, and clock
+// primitives behind a stable API so application vessels depend on this
+// vessel rather than runtime builtin names directly.
+//
+// The Rust crate also implements per-target render backends
+// (web/server/ios/android/macos/linux/windows). At the El layer the
+// target is fixed at compile time — the runtime IS the backend — so no
+// `PlatformBackend` polymorphism is exposed here. DOM patching and native
+// widget mounting will arrive once el-ui-compiler emits browser/native code.
+
+vessel "el-platform" {
+    version "1.0.0"
+    description "Platform abstraction: env, filesystem, network, clock, UUID"
+    authors ["Will Anderson <will@neurontechnologies.ai>"]
+    edition "2026"
+}
+
+build {
+    entry "src/main.el"
+    output "dist/"
+}
diff --git a/crates/el-platform/src/backends/android.rs b/vessels/el-platform/src/backends/android.rs
similarity index 100%
rename from crates/el-platform/src/backends/android.rs
rename to vessels/el-platform/src/backends/android.rs
diff --git a/crates/el-platform/src/backends/ios.rs b/vessels/el-platform/src/backends/ios.rs
similarity index 100%
rename from crates/el-platform/src/backends/ios.rs
rename to vessels/el-platform/src/backends/ios.rs
diff --git a/crates/el-platform/src/backends/linux.rs b/vessels/el-platform/src/backends/linux.rs
similarity index 100%
rename from crates/el-platform/src/backends/linux.rs
rename to vessels/el-platform/src/backends/linux.rs
diff --git a/crates/el-platform/src/backends/macos.rs b/vessels/el-platform/src/backends/macos.rs
similarity index 100%
rename from crates/el-platform/src/backends/macos.rs
rename to vessels/el-platform/src/backends/macos.rs
diff --git a/crates/el-platform/src/backends/mod.rs b/vessels/el-platform/src/backends/mod.rs
similarity index 100%
rename from crates/el-platform/src/backends/mod.rs
rename to vessels/el-platform/src/backends/mod.rs
diff --git a/crates/el-platform/src/backends/server.rs b/vessels/el-platform/src/backends/server.rs
similarity index 100%
rename from crates/el-platform/src/backends/server.rs
rename to vessels/el-platform/src/backends/server.rs
diff --git a/crates/el-platform/src/backends/tests.rs b/vessels/el-platform/src/backends/tests.rs
similarity index 100%
rename from crates/el-platform/src/backends/tests.rs
rename to vessels/el-platform/src/backends/tests.rs
diff --git a/crates/el-platform/src/backends/web.rs b/vessels/el-platform/src/backends/web.rs
similarity index 100%
rename from crates/el-platform/src/backends/web.rs
rename to vessels/el-platform/src/backends/web.rs
diff --git a/crates/el-platform/src/backends/windows.rs b/vessels/el-platform/src/backends/windows.rs
similarity index 100%
rename from crates/el-platform/src/backends/windows.rs
rename to vessels/el-platform/src/backends/windows.rs
diff --git a/crates/el-platform/src/config.rs b/vessels/el-platform/src/config.rs
similarity index 100%
rename from crates/el-platform/src/config.rs
rename to vessels/el-platform/src/config.rs
diff --git a/crates/el-platform/src/lib.rs b/vessels/el-platform/src/lib.rs
similarity index 100%
rename from crates/el-platform/src/lib.rs
rename to vessels/el-platform/src/lib.rs
diff --git a/vessels/el-platform/src/main.el b/vessels/el-platform/src/main.el
new file mode 100644
index 0000000..c2ba821
--- /dev/null
+++ b/vessels/el-platform/src/main.el
@@ -0,0 +1,152 @@
+// el-platform — Platform abstraction surface for el-ui apps.
+//
+// The Rust crate defines `PlatformBackend` trait + per-target render backends
+// (web/server/ios/android/macos/linux/windows). The El surface is narrower:
+// El apps reach the host through the runtime's filesystem, network, and OS
+// primitives. This vessel wraps those into a stable, named API so El callers
+// don't depend directly on builtin names.
+//
+// RUNTIME PARITY GAPS:
+//   - There is no `PlatformBackend` polymorphism at the El layer. The runtime
+//     IS the backend; target selection happens during compilation/packaging,
+//     not at runtime.
+//   - DOM mutation, native widget mounting, event binding — none of those
+//     have El surfaces yet. Use el-ui-compiler when those land.
+//   - `fs_list` returns a JSON array string; consumers must parse with the
+//     forthcoming json_array_get builtin. Until that lands, callers should
+//     treat the value opaquely.
+
+// ── Targets ─────────────────────────────────────────────────────────────────
+
+fn target_web()     -> String { "web" }
+fn target_server()  -> String { "server" }
+fn target_ios()     -> String { "ios" }
+fn target_android() -> String { "android" }
+fn target_macos()   -> String { "macos" }
+fn target_linux()   -> String { "linux" }
+fn target_windows() -> String { "windows" }
+
+// The compiled binary's target is fixed at build time. EL_TARGET is set by
+// the build harness; absent EL_TARGET, default to "server" (the El runtime
+// runs as a host process).
+fn platform_target() -> String {
+    let t: String = env("EL_TARGET")
+    if str_eq(t, "") { return "server" }
+    t
+}
+
+fn platform_is_native(t: String) -> Bool {
+    if str_eq(t, "ios")     { return true }
+    if str_eq(t, "android") { return true }
+    if str_eq(t, "macos")   { return true }
+    if str_eq(t, "linux")   { return true }
+    if str_eq(t, "windows") { return true }
+    false
+}
+
+fn platform_supports_ssr(t: String) -> Bool {
+    str_eq(t, "server")
+}
+
+// ── Errors ──────────────────────────────────────────────────────────────────
+
+fn err_io()          -> String { "platform.io" }
+fn err_network()     -> String { "platform.network" }
+fn err_unsupported() -> String { "platform.unsupported" }
+fn err_env_missing() -> String { "platform.env_missing" }
+
+// ── Environment ─────────────────────────────────────────────────────────────
+
+fn platform_env(key: String) -> String {
+    env(key)
+}
+
+fn platform_env_or(key: String, fallback: String) -> String {
+    let v: String = env(key)
+    if str_eq(v, "") { return fallback }
+    v
+}
+
+// Strict variant: returns "" if missing, callers branch.
+// (Runtime has no panic() — fail-soft return preserves type.)
+fn platform_env_required(key: String) -> String {
+    let v: String = env(key)
+    if str_eq(v, "") {
+        println("[el-platform] ERROR " + err_env_missing() + ":" + key)
+        return ""
+    }
+    v
+}
+
+// ── Filesystem ──────────────────────────────────────────────────────────────
+
+fn platform_fs_read(path: String) -> String {
+    fs_read(path)
+}
+
+fn platform_fs_write(path: String, content: String) -> Bool {
+    fs_write(path, content)
+    true
+}
+
+// Returns a JSON array of entry names (opaque until json_array_get lands).
+fn platform_fs_list(path: String) -> String {
+    let raw: String = fs_list(path)
+    if str_eq(raw, "") { return "[]" }
+    raw
+}
+
+fn platform_fs_exists(path: String) -> Bool {
+    let raw: String = fs_read(path)
+    !str_eq(raw, "")
+}
+
+// ── HTTP ────────────────────────────────────────────────────────────────────
+
+fn platform_http_get(url: String) -> String {
+    http_get(url)
+}
+
+fn platform_http_post(url: String, body: String) -> String {
+    http_post(url, body)
+}
+
+fn platform_http_post_json(url: String, json_body: String) -> String {
+    http_post_json(url, json_body)
+}
+
+fn platform_http_get_authed(url: String, bearer: String) -> String {
+    let headers: String = "Authorization: Bearer " + bearer
+    http_get_with_headers(url, headers)
+}
+
+fn platform_http_post_authed(url: String, body: String, bearer: String) -> String {
+    let headers: String = "Authorization: Bearer " + bearer
+    http_post_with_headers(url, body, headers)
+}
+
+// ── Time / OS clock ─────────────────────────────────────────────────────────
+
+fn platform_now() -> Int {
+    time_now()
+}
+
+fn platform_sleep_ms(ms: Int) -> Bool {
+    sleep_ms(ms)
+    true
+}
+
+// ── Identity (for trace/log correlation) ───────────────────────────────────
+
+fn platform_uuid() -> String {
+    uuid_v4()
+}
+
+// ── Entry — smoke test ──────────────────────────────────────────────────────
+//
+// elc-bug-workaround: top-level `let` does not scope into the surrounding
+// statement substitution in the entry block, so we call platform_target()
+// inline at each use site.
+
+println("[el-platform] target=" + platform_target() + " ssr=" + bool_to_str(platform_supports_ssr(platform_target())))
+println("[el-platform] uuid=" + platform_uuid())
diff --git a/crates/el-platform/src/node.rs b/vessels/el-platform/src/node.rs
similarity index 100%
rename from crates/el-platform/src/node.rs
rename to vessels/el-platform/src/node.rs
diff --git a/crates/el-publish/Cargo.toml b/vessels/el-publish/Cargo.toml
similarity index 100%
rename from crates/el-publish/Cargo.toml
rename to vessels/el-publish/Cargo.toml
diff --git a/vessels/el-publish/manifest.el b/vessels/el-publish/manifest.el
new file mode 100644
index 0000000..1f645e3
--- /dev/null
+++ b/vessels/el-publish/manifest.el
@@ -0,0 +1,25 @@
+// el-publish — App Store and Play Store publishing pipeline.
+//
+// One command ships to every platform:
+//   el publish              all platforms
+//   el publish --apple      App Store only
+//   el publish --google     Play Store only
+//   el publish --beta       TestFlight + Play internal track
+
+vessel "el-publish" {
+    version "0.1.0"
+    description "Apple App Store + Google Play publishing automation"
+    authors ["Will Anderson <will@neurontechnologies.ai>"]
+    edition "2026"
+}
+
+dependencies {
+    el-platform "1.0"
+    el-config   "0.1"
+    el-secrets  "0.1"
+}
+
+build {
+    entry "src/main.el"
+    output "dist/"
+}
diff --git a/crates/el-publish/src/apple.rs b/vessels/el-publish/src/apple.rs
similarity index 100%
rename from crates/el-publish/src/apple.rs
rename to vessels/el-publish/src/apple.rs
diff --git a/crates/el-publish/src/cert.rs b/vessels/el-publish/src/cert.rs
similarity index 100%
rename from crates/el-publish/src/cert.rs
rename to vessels/el-publish/src/cert.rs
diff --git a/crates/el-publish/src/config.rs b/vessels/el-publish/src/config.rs
similarity index 100%
rename from crates/el-publish/src/config.rs
rename to vessels/el-publish/src/config.rs
diff --git a/crates/el-publish/src/google.rs b/vessels/el-publish/src/google.rs
similarity index 100%
rename from crates/el-publish/src/google.rs
rename to vessels/el-publish/src/google.rs
diff --git a/crates/el-publish/src/lib.rs b/vessels/el-publish/src/lib.rs
similarity index 100%
rename from crates/el-publish/src/lib.rs
rename to vessels/el-publish/src/lib.rs
diff --git a/vessels/el-publish/src/main.el b/vessels/el-publish/src/main.el
new file mode 100644
index 0000000..6b97f43
--- /dev/null
+++ b/vessels/el-publish/src/main.el
@@ -0,0 +1,243 @@
+// el-publish — App Store + Play Store publishing pipeline.
+//
+// Two providers (Apple, Google), one publish flow:
+//   1. Validate config + certs
+//   2. Build artifact (delegated to el-ui-compiler / xcodebuild / gradle)
+//   3. Capture metadata + screenshots
+//   4. Upload to App Store Connect / Play Developer API
+//   5. Monitor rollout
+
+// ── Errors ───────────────────────────────────────────────────────────────────
+
+let PUB_ERR_CONFIG:      String = "publish.config"
+let PUB_ERR_BUILD:       String = "publish.build"
+let PUB_ERR_UPLOAD:      String = "publish.upload"
+let PUB_ERR_CERT:        String = "publish.certificate"
+let PUB_ERR_METADATA:    String = "publish.metadata"
+let PUB_ERR_API:         String = "publish.api"
+let PUB_ERR_IO:          String = "publish.io"
+
+// ── Tracks ───────────────────────────────────────────────────────────────────
+
+let TRACK_PRODUCTION: String = "production"
+let TRACK_BETA:       String = "beta"        // TestFlight on Apple; "beta" on Google
+let TRACK_INTERNAL:   String = "internal"
+let TRACK_ALPHA:      String = "alpha"
+
+// ── Apple config ─────────────────────────────────────────────────────────────
+
+type AppleConfig {
+    account:    String   // Apple ID
+    bundle_id:  String   // ai.neurontechnologies.myapp
+    team_id:    String
+    api_key_id: String   // App Store Connect API key
+    api_issuer: String
+}
+
+// ── Google config ────────────────────────────────────────────────────────────
+
+type GoogleConfig {
+    package:                  String   // ai.neurontechnologies.myapp
+    track:                    String   // production | beta | internal | alpha
+    service_account_json_ref: String   // secret ref to service-account JSON
+}
+
+// ── Rollout (staged) ─────────────────────────────────────────────────────────
+
+type RolloutConfig {
+    initial_percent: Int   // 0..100
+    target_percent:  Int
+    bake_hours:      Int   // hours between rollout stages
+}
+
+fn rollout_default() -> RolloutConfig {
+    { "initial_percent": 5, "target_percent": 100, "bake_hours": 24 }
+}
+
+// ── Top-level publish config ────────────────────────────────────────────────
+
+type PublishConfig {
+    version:       String
+    build_number:  Int
+    apple_json:    String   // empty if not configured
+    google_json:   String
+    rollout_json:  String   // RolloutConfig as JSON
+}
+
+fn publish_config_new(version: String, build_number: Int) -> PublishConfig {
+    { "version": version, "build_number": build_number,
+      "apple_json": "", "google_json": "", "rollout_json": json_encode(rollout_default()) }
+}
+
+// ── Outcome ──────────────────────────────────────────────────────────────────
+
+type PublishOutcome {
+    platform:        String
+    version:         String
+    build_number:    Int
+    track:           String
+    rollout_percent: Int
+    submission_id:   String
+}
+
+fn outcome_new(platform: String, cfg: PublishConfig, track: String) -> PublishOutcome {
+    let pct: Int = 100
+    if !str_eq(cfg.rollout_json, "") {
+        let pct = str_to_int(json_get(cfg.rollout_json, "initial_percent"))
+    }
+    { "platform": platform, "version": cfg.version, "build_number": cfg.build_number,
+      "track": track, "rollout_percent": pct, "submission_id": "" }
+}
+
+// ── Cert store ──────────────────────────────────────────────────────────────
+//
+// Tracks .p12 / .mobileprovision (Apple) and signing keystores (Google).
+
+type CertInfo {
+    kind:        String   // "apple_p12" | "apple_provisioning" | "google_keystore"
+    path:        String
+    expires_at:  String   // ISO 8601
+    fingerprint: String
+}
+
+fn cert_is_valid(c: CertInfo) -> Bool {
+    !time_after(time_now_iso(), c.expires_at)
+}
+
+fn cert_store_load(dir: String) -> String {
+    // Returns JSON array of CertInfo loaded from `dir`.
+    let files: String = fs_list(dir)
+    let out: String = "[]"
+    let n: Int = json_array_len(files)
+    let i: Int = 0
+    while i < n {
+        let path: String = json_array_get(files, i)
+        let info: CertInfo = cert_inspect(path)
+        let out = json_array_push(out, json_encode(info))
+        let i = i + 1
+    }
+    out
+}
+
+fn cert_inspect(path: String) -> CertInfo {
+    let kind: String = "apple_p12"
+    if str_ends_with(path, ".mobileprovision") { let kind = "apple_provisioning" }
+    if str_ends_with(path, ".jks")              { let kind = "google_keystore" }
+    if str_ends_with(path, ".keystore")         { let kind = "google_keystore" }
+    let exp: String = exec_capture("openssl", "x509 -enddate -noout -in " + path)
+    { "kind": kind, "path": path, "expires_at": exp, "fingerprint": "" }
+}
+
+// ── Metadata ────────────────────────────────────────────────────────────────
+
+type StoreMetadata {
+    title:        String
+    subtitle:     String
+    description:  String
+    keywords:     String   // comma-separated
+    privacy_url:  String
+    support_url:  String
+    locale:       String   // e.g. "en-US"
+}
+
+fn metadata_load(path: String, locale: String) -> StoreMetadata {
+    let raw: String = fs_read(path + "/" + locale + ".toml")
+    let json: String = toml_to_json(raw)
+    { "title":       json_get(json, "title"),
+      "subtitle":    json_get(json, "subtitle"),
+      "description": json_get(json, "description"),
+      "keywords":    json_get(json, "keywords"),
+      "privacy_url": json_get(json, "privacy_url"),
+      "support_url": json_get(json, "support_url"),
+      "locale":      locale }
+}
+
+// ── Screenshots ─────────────────────────────────────────────────────────────
+
+type ScreenshotTarget {
+    platform:     String   // "apple" | "google"
+    device_class: String   // "iphone-6.7" | "ipad-12.9" | "phone" | "tablet" | "tv"
+    locale:       String
+    expected_resolution: String   // "1290x2796"
+}
+
+fn target_iphone_6_7(locale: String) -> ScreenshotTarget {
+    { "platform": "apple", "device_class": "iphone-6.7",
+      "locale": locale, "expected_resolution": "1290x2796" }
+}
+
+fn target_phone_google(locale: String) -> ScreenshotTarget {
+    { "platform": "google", "device_class": "phone",
+      "locale": locale, "expected_resolution": "1080x1920" }
+}
+
+fn screenshot_capture(target: ScreenshotTarget, simulator_id: String, output_dir: String) -> String {
+    // Drives simulator/emulator to capture at expected resolution.
+    let path: String = output_dir + "/" + target.platform + "_" + target.device_class
+        + "_" + target.locale + ".png"
+    exec_capture("xcrun", "simctl io " + simulator_id + " screenshot " + path)
+    path
+}
+
+// ── Apple publisher ─────────────────────────────────────────────────────────
+
+fn apple_publish(cfg: PublishConfig, apple: AppleConfig, ipa_path: String, track: String) -> PublishOutcome {
+    let api_key: String = secret_lookup("apple.api_key")
+    let resp: String = exec_capture("xcrun", "altool --upload-app -f " + ipa_path
+        + " --type ios --apiKey " + apple.api_key_id
+        + " --apiIssuer " + apple.api_issuer)
+    let outcome: PublishOutcome = outcome_new("apple", cfg, track)
+    let submission: String = json_get(resp, "submission_id")
+    { "platform": outcome.platform, "version": outcome.version,
+      "build_number": outcome.build_number, "track": outcome.track,
+      "rollout_percent": outcome.rollout_percent, "submission_id": submission }
+}
+
+// ── Google publisher ────────────────────────────────────────────────────────
+
+fn google_publish(cfg: PublishConfig, google: GoogleConfig, aab_path: String) -> PublishOutcome {
+    let sa_json: String = secret_lookup(google.service_account_json_ref)
+    let token:   String = google_oauth_token(sa_json)
+    let edit:    String = google_play_edit_create(google.package, token)
+    let upload:  String = google_play_upload_aab(google.package, edit, aab_path, token)
+    let assigned: String = google_play_track_assign(google.package, edit, google.track,
+        cfg.version, cfg.build_number, token)
+    google_play_edit_commit(google.package, edit, token)
+    let outcome: PublishOutcome = outcome_new("google", cfg, google.track)
+    { "platform": outcome.platform, "version": outcome.version,
+      "build_number": outcome.build_number, "track": outcome.track,
+      "rollout_percent": outcome.rollout_percent, "submission_id": json_get(upload, "id") }
+}
+
+// ── Rollout monitor ─────────────────────────────────────────────────────────
+
+fn rollout_monitor(outcome: PublishOutcome, cfg: RolloutConfig) -> Bool {
+    // Polls store status, advances rollout percentage in stages.
+    let current: Int = outcome.rollout_percent
+    while current < cfg.target_percent {
+        sleep_seconds(cfg.bake_hours * 3600)
+        let crash_rate: Int = fetch_crash_rate(outcome.platform, outcome.version)
+        if crash_rate > 100 {   // 1% crash threshold (per 10000)
+            println("[el-publish] rollout halted: crash rate too high")
+            return false
+        }
+        let next: Int = current + 25
+        if next > cfg.target_percent { let next = cfg.target_percent }
+        rollout_advance(outcome, next)
+        let current = next
+    }
+    true
+}
+
+fn rollout_advance(outcome: PublishOutcome, percent: Int) -> Bool {
+    println("[el-publish] " + outcome.platform + " rollout -> " + int_to_str(percent) + "%")
+    true
+}
+
+// ── Entry — smoke test ──────────────────────────────────────────────────────
+
+let cfg: PublishConfig = publish_config_new("1.0.0", 42)
+let apple: AppleConfig = { "account": "will@neurontechnologies.ai",
+    "bundle_id": "ai.neurontechnologies.myapp", "team_id": "ABC123",
+    "api_key_id": "KEY", "api_issuer": "ISS" }
+println("[el-publish] " + cfg.version + " (" + int_to_str(cfg.build_number) + ") for " + apple.bundle_id)
diff --git a/crates/el-publish/src/metadata.rs b/vessels/el-publish/src/metadata.rs
similarity index 100%
rename from crates/el-publish/src/metadata.rs
rename to vessels/el-publish/src/metadata.rs
diff --git a/crates/el-publish/src/rollout.rs b/vessels/el-publish/src/rollout.rs
similarity index 100%
rename from crates/el-publish/src/rollout.rs
rename to vessels/el-publish/src/rollout.rs
diff --git a/crates/el-publish/src/screenshot.rs b/vessels/el-publish/src/screenshot.rs
similarity index 100%
rename from crates/el-publish/src/screenshot.rs
rename to vessels/el-publish/src/screenshot.rs
diff --git a/crates/el-publish/src/tests.rs b/vessels/el-publish/src/tests.rs
similarity index 100%
rename from crates/el-publish/src/tests.rs
rename to vessels/el-publish/src/tests.rs
diff --git a/crates/el-secrets/Cargo.toml b/vessels/el-secrets/Cargo.toml
similarity index 100%
rename from crates/el-secrets/Cargo.toml
rename to vessels/el-secrets/Cargo.toml
diff --git a/vessels/el-secrets/manifest.el b/vessels/el-secrets/manifest.el
new file mode 100644
index 0000000..dbc342e
--- /dev/null
+++ b/vessels/el-secrets/manifest.el
@@ -0,0 +1,20 @@
+// el-secrets — Secrets management for el-ui applications.
+//
+// Secrets are NEVER in code. Wrapped in a `Secret<T>` type that displays as
+// `[REDACTED]` in all logs and JSON output. Explicit `.expose()` to read.
+
+vessel "el-secrets" {
+    version "0.1.0"
+    description "Resolver chain: env vars, Vault, AWS Secrets Manager"
+    authors ["Will Anderson <will@neurontechnologies.ai>"]
+    edition "2026"
+}
+
+dependencies {
+    el-platform "1.0"
+}
+
+build {
+    entry "src/main.el"
+    output "dist/"
+}
diff --git a/crates/el-secrets/src/error.rs b/vessels/el-secrets/src/error.rs
similarity index 100%
rename from crates/el-secrets/src/error.rs
rename to vessels/el-secrets/src/error.rs
diff --git a/crates/el-secrets/src/lib.rs b/vessels/el-secrets/src/lib.rs
similarity index 100%
rename from crates/el-secrets/src/lib.rs
rename to vessels/el-secrets/src/lib.rs
diff --git a/vessels/el-secrets/src/main.el b/vessels/el-secrets/src/main.el
new file mode 100644
index 0000000..9608d70
--- /dev/null
+++ b/vessels/el-secrets/src/main.el
@@ -0,0 +1,195 @@
+// el-secrets — Secrets management for el-ui.
+//
+// A Secret is a value with a redacted display contract. Source plugins
+// fetch by key from env, Vault, AWS Secrets Manager, or in-memory.
+// `SecretsResolver` composes a chain and resolves required keys at startup.
+
+// ── Errors ───────────────────────────────────────────────────────────────────
+
+let SECRET_ERR_MISSING:    String = "secret.missing"
+let SECRET_ERR_SOURCE:     String = "secret.source_error"
+let SECRET_ERR_PERMISSION: String = "secret.permission_denied"
+
+// ── Source kinds ─────────────────────────────────────────────────────────────
+
+let SRC_ENV:          String = "env"
+let SRC_VAULT:        String = "vault"
+let SRC_AWS_SECRETS:  String = "aws_secrets"
+let SRC_IN_MEMORY:    String = "in_memory"
+
+// ── Source descriptor ───────────────────────────────────────────────────────
+
+type SecretsSource {
+    kind:        String   // env | vault | aws_secrets | in_memory
+    config_json: String   // source-specific (e.g. {"prefix":"EL_SECRET_"} or {"path":"secret/data/app"})
+}
+
+fn source_env(prefix: String) -> SecretsSource {
+    { "kind": "env", "config_json": "{\"prefix\":\"" + prefix + "\"}" }
+}
+
+fn source_vault(addr: String, token: String, mount: String) -> SecretsSource {
+    let cfg: String = "{\"addr\":\"" + addr + "\",\"token\":\"" + token
+        + "\",\"mount\":\"" + mount + "\"}"
+    { "kind": "vault", "config_json": cfg }
+}
+
+fn source_aws(region: String) -> SecretsSource {
+    { "kind": "aws_secrets", "config_json": "{\"region\":\"" + region + "\"}" }
+}
+
+fn source_in_memory() -> SecretsSource {
+    { "kind": "in_memory", "config_json": "{\"map\":{}}" }
+}
+
+// ── Source lookup ───────────────────────────────────────────────────────────
+//
+// Each source kind has its own fetch fn. `source_get` dispatches by kind.
+
+fn source_get(src: SecretsSource, key: String) -> String {
+    if str_eq(src.kind, "env") {
+        let prefix: String = json_get(src.config_json, "prefix")
+        return env(prefix + str_to_upper(str_replace(key, ".", "_")))
+    }
+    if str_eq(src.kind, "vault") {
+        let addr:  String = json_get(src.config_json, "addr")
+        let token: String = json_get(src.config_json, "token")
+        let mount: String = json_get(src.config_json, "mount")
+        return vault_kv_get_at(addr, token, mount, key)
+    }
+    if str_eq(src.kind, "aws_secrets") {
+        let region: String = json_get(src.config_json, "region")
+        return aws_secrets_get(region, key)
+    }
+    if str_eq(src.kind, "in_memory") {
+        let map: String = json_get(src.config_json, "map")
+        return json_get(map, key)
+    }
+    ""
+}
+
+fn in_memory_insert(src: SecretsSource, key: String, value: String) -> SecretsSource {
+    let map: String = json_get(src.config_json, "map")
+    let map = json_set(map, key, "\"" + value + "\"")
+    let cfg = json_set(src.config_json, "map", map)
+    { "kind": src.kind, "config_json": cfg }
+}
+
+// ── Secret<T> — redacted wrapper ────────────────────────────────────────────
+//
+// A Secret stores its raw value behind a tag. `secret_display` always
+// returns `[REDACTED]`. `secret_expose` returns the actual string.
+// Serializers should call `secret_display` by default.
+
+type Secret {
+    tag: String   // marker: "secret"
+    raw: String   // the actual value — never log this directly
+}
+
+fn secret_new(value: String) -> Secret {
+    { "tag": "secret", "raw": value }
+}
+
+fn secret_display(s: Secret) -> String {
+    "[REDACTED]"
+}
+
+fn secret_expose(s: Secret) -> String {
+    s.raw
+}
+
+// Disposable read-once guard — like Rust's `SecretGuard`. Consumes the secret
+// once and zeroes it. Useful at boundaries: read JWT signing key once, hand to
+// the signing routine, never readable again.
+type SecretGuard {
+    consumed: Bool
+    raw:      String
+}
+
+fn guard_new(s: Secret) -> SecretGuard {
+    { "consumed": false, "raw": s.raw }
+}
+
+fn guard_take(g: SecretGuard) -> String {
+    if g.consumed { return "" }
+    g.raw
+}
+
+// ── SecretsResolver — builder ───────────────────────────────────────────────
+//
+// Sources are tried in order. First non-empty hit wins.
+// `require(key)` marks a key as required at startup; `resolve()` fails if any
+// required key is unresolved.
+
+type SecretsResolver {
+    sources_json:  String   // JSON array of SecretsSource
+    required_json: String   // JSON array of required keys
+}
+
+fn resolver_new() -> SecretsResolver {
+    { "sources_json": "[]", "required_json": "[]" }
+}
+
+fn resolver_source(r: SecretsResolver, src: SecretsSource) -> SecretsResolver {
+    { "sources_json": json_array_push(r.sources_json, json_encode(src)),
+      "required_json": r.required_json }
+}
+
+fn resolver_require(r: SecretsResolver, key: String) -> SecretsResolver {
+    { "sources_json": r.sources_json,
+      "required_json": json_array_push(r.required_json, "\"" + key + "\"") }
+}
+
+// Resolved bag. Keys -> Secret. Failure if any required key is missing.
+type ResolvedSecrets {
+    map_json: String   // JSON: key -> raw value
+    errors:   String   // JSON array of missing required keys
+}
+
+fn resolver_resolve(r: SecretsResolver) -> ResolvedSecrets {
+    let resolved: String = "{}"
+    let errors:   String = "[]"
+    let n: Int = json_array_len(r.required_json)
+    let i: Int = 0
+    while i < n {
+        let key: String = json_array_get(r.required_json, i)
+        let value: String = lookup_chain(r.sources_json, key)
+        if str_eq(value, "") {
+            let errors = json_array_push(errors, "\"" + key + "\"")
+        }
+        if !str_eq(value, "") {
+            let resolved = json_set(resolved, key, "\"" + value + "\"")
+        }
+        let i = i + 1
+    }
+    { "map_json": resolved, "errors": errors }
+}
+
+fn lookup_chain(sources_json: String, key: String) -> String {
+    let n: Int = json_array_len(sources_json)
+    let i: Int = 0
+    while i < n {
+        let src_json: String = json_array_get(sources_json, i)
+        let src: SecretsSource = { "kind": json_get(src_json, "kind"),
+                                   "config_json": json_get(src_json, "config_json") }
+        let v: String = source_get(src, key)
+        if !str_eq(v, "") { return v }
+        let i = i + 1
+    }
+    ""
+}
+
+fn resolved_require(r: ResolvedSecrets, key: String) -> Secret {
+    let raw: String = json_get(r.map_json, key)
+    secret_new(raw)
+}
+
+// ── Entry — smoke test ──────────────────────────────────────────────────────
+
+let src: SecretsSource = source_in_memory()
+let src = in_memory_insert(src, "jwt.key", "test-key-for-testing-only")
+let resolver: SecretsResolver = resolver_source(resolver_new(), src)
+let resolver = resolver_require(resolver, "jwt.key")
+let resolved: ResolvedSecrets = resolver_resolve(resolver)
+let jwt: Secret = resolved_require(resolved, "jwt.key")
+println("[el-secrets] jwt.key = " + secret_display(jwt))
diff --git a/crates/el-secrets/src/resolver.rs b/vessels/el-secrets/src/resolver.rs
similarity index 100%
rename from crates/el-secrets/src/resolver.rs
rename to vessels/el-secrets/src/resolver.rs
diff --git a/crates/el-secrets/src/secret.rs b/vessels/el-secrets/src/secret.rs
similarity index 100%
rename from crates/el-secrets/src/secret.rs
rename to vessels/el-secrets/src/secret.rs
diff --git a/crates/el-secrets/src/source.rs b/vessels/el-secrets/src/source.rs
similarity index 100%
rename from crates/el-secrets/src/source.rs
rename to vessels/el-secrets/src/source.rs
diff --git a/crates/el-services/Cargo.toml b/vessels/el-services/Cargo.toml
similarity index 100%
rename from crates/el-services/Cargo.toml
rename to vessels/el-services/Cargo.toml
diff --git a/vessels/el-services/manifest.el b/vessels/el-services/manifest.el
new file mode 100644
index 0000000..ad60c9f
--- /dev/null
+++ b/vessels/el-services/manifest.el
@@ -0,0 +1,20 @@
+// el-services — Service bindings for el-ui.
+//
+// Write once. Bind to any protocol. Change the binding in `manifest.el`.
+
+vessel "el-services" {
+    version "0.1.0"
+    description "Pluggable service bindings: REST, gRPC, WebSocket, direct"
+    authors ["Will Anderson <will@neurontechnologies.ai>"]
+    edition "2026"
+}
+
+dependencies {
+    el-platform "1.0"
+    el-config   "0.1"
+}
+
+build {
+    entry "src/main.el"
+    output "dist/"
+}
diff --git a/crates/el-services/src/binding/direct.rs b/vessels/el-services/src/binding/direct.rs
similarity index 100%
rename from crates/el-services/src/binding/direct.rs
rename to vessels/el-services/src/binding/direct.rs
diff --git a/crates/el-services/src/binding/grpc.rs b/vessels/el-services/src/binding/grpc.rs
similarity index 100%
rename from crates/el-services/src/binding/grpc.rs
rename to vessels/el-services/src/binding/grpc.rs
diff --git a/crates/el-services/src/binding/mod.rs b/vessels/el-services/src/binding/mod.rs
similarity index 100%
rename from crates/el-services/src/binding/mod.rs
rename to vessels/el-services/src/binding/mod.rs
diff --git a/crates/el-services/src/binding/rest.rs b/vessels/el-services/src/binding/rest.rs
similarity index 100%
rename from crates/el-services/src/binding/rest.rs
rename to vessels/el-services/src/binding/rest.rs
diff --git a/crates/el-services/src/binding/websocket.rs b/vessels/el-services/src/binding/websocket.rs
similarity index 100%
rename from crates/el-services/src/binding/websocket.rs
rename to vessels/el-services/src/binding/websocket.rs
diff --git a/crates/el-services/src/config.rs b/vessels/el-services/src/config.rs
similarity index 100%
rename from crates/el-services/src/config.rs
rename to vessels/el-services/src/config.rs
diff --git a/crates/el-services/src/lib.rs b/vessels/el-services/src/lib.rs
similarity index 100%
rename from crates/el-services/src/lib.rs
rename to vessels/el-services/src/lib.rs
diff --git a/vessels/el-services/src/main.el b/vessels/el-services/src/main.el
new file mode 100644
index 0000000..1f2d975
--- /dev/null
+++ b/vessels/el-services/src/main.el
@@ -0,0 +1,197 @@
+// el-services — Pluggable service bindings.
+//
+// A "service" is a logical interface. A "binding" is the wire protocol that
+// fulfills it. The binding kind is set in manifest.el; the service code does
+// not change when the binding changes.
+//
+//   binding = "rest"        -> RestBinding
+//   binding = "grpc"        -> GrpcBinding (planned)
+//   binding = "websocket"   -> WebSocketBinding
+//   binding = "direct"      -> in-process function call (for testing)
+
+// ── Binding kinds ────────────────────────────────────────────────────────────
+
+let BIND_REST:      String = "rest"
+let BIND_GRPC:      String = "grpc"
+let BIND_WEBSOCKET: String = "websocket"
+let BIND_DIRECT:    String = "direct"
+
+// ── Errors ───────────────────────────────────────────────────────────────────
+
+let SVC_ERR_NOT_FOUND:        String = "service.not_found"
+let SVC_ERR_BINDING:          String = "service.binding"
+let SVC_ERR_TRANSPORT:        String = "service.transport"
+let SVC_ERR_AUTH:             String = "service.auth"
+let SVC_ERR_METHOD_NOT_FOUND: String = "service.method_not_found"
+
+// ── Service config ───────────────────────────────────────────────────────────
+
+let AUTH_NONE:   String = "none"
+let AUTH_BEARER: String = "bearer"
+let AUTH_BASIC:  String = "basic"
+let AUTH_HMAC:   String = "hmac"
+
+type AuthConfig {
+    kind:        String   // none | bearer | basic | hmac
+    secret_ref:  String   // e.g. "env:API_TOKEN" or "vault:path"
+}
+
+type ServiceConfig {
+    name:     String
+    binding:  String
+    base_url: String
+    auth:     AuthConfig
+    timeout_ms: Int
+}
+
+fn service_config_rest(name: String, base_url: String, auth_secret_ref: String) -> ServiceConfig {
+    let auth: AuthConfig = { "kind": "bearer", "secret_ref": auth_secret_ref }
+    { "name": name, "binding": "rest", "base_url": base_url, "auth": auth, "timeout_ms": 5000 }
+}
+
+// ── Service request/response ────────────────────────────────────────────────
+
+type ServiceRequest {
+    method:   String   // logical method name (e.g. "list_users")
+    args:     String   // JSON
+    metadata: String   // JSON (auth tokens, trace ids)
+}
+
+type ServiceResponse {
+    status:  Int       // 0 = ok, non-zero = error code
+    body:    String    // JSON
+    error:   String    // empty if ok
+}
+
+fn response_ok(body: String) -> ServiceResponse {
+    { "status": 0, "body": body, "error": "" }
+}
+
+fn response_err(code: Int, error: String) -> ServiceResponse {
+    { "status": code, "body": "", "error": error }
+}
+
+// ── REST binding ────────────────────────────────────────────────────────────
+//
+// Method name -> (HTTP verb, path template). The compiler emits this table
+// from the service interface declaration.
+
+fn rest_invoke(cfg: ServiceConfig, http_method: String, path: String, req: ServiceRequest) -> ServiceResponse {
+    let url: String = cfg.base_url + path
+    let headers: String = build_auth_header(cfg.auth)
+    let body: String = req.args
+    let resp: String = ""
+    if str_eq(http_method, "GET") {
+        let resp = http_get_with_headers(url, headers)
+    }
+    if str_eq(http_method, "POST") {
+        let resp = http_post_with_headers(url, body, headers)
+    }
+    if str_eq(http_method, "PUT") {
+        let resp = http_put_with_headers(url, body, headers)
+    }
+    if str_eq(http_method, "DELETE") {
+        let resp = http_delete_with_headers(url, headers)
+    }
+    if str_eq(resp, "") { return response_err(599, SVC_ERR_TRANSPORT) }
+    response_ok(resp)
+}
+
+fn build_auth_header(auth: AuthConfig) -> String {
+    if str_eq(auth.kind, "bearer") {
+        let secret: String = resolve_secret_ref(auth.secret_ref)
+        return "Authorization: Bearer " + secret
+    }
+    if str_eq(auth.kind, "basic") {
+        let creds: String = resolve_secret_ref(auth.secret_ref)
+        return "Authorization: Basic " + base64_encode(creds)
+    }
+    ""
+}
+
+fn resolve_secret_ref(ref: String) -> String {
+    if str_starts_with(ref, "env:") {
+        return env(str_slice(ref, 4, str_len(ref)))
+    }
+    if str_starts_with(ref, "vault:") {
+        return vault_kv_get(str_slice(ref, 6, str_len(ref)))
+    }
+    ""
+}
+
+// ── gRPC binding (planned) ──────────────────────────────────────────────────
+//
+// Requires generated stubs from a .proto. The shape is identical to REST:
+// a method dispatcher that converts logical method calls to wire calls.
+
+fn grpc_invoke(cfg: ServiceConfig, method: String, req: ServiceRequest) -> ServiceResponse {
+    response_err(501, "grpc binding not yet implemented")
+}
+
+// ── WebSocket binding ───────────────────────────────────────────────────────
+
+fn ws_invoke(cfg: ServiceConfig, method: String, req: ServiceRequest) -> ServiceResponse {
+    let frame: String = "{\"method\":\"" + method + "\",\"args\":" + req.args + "}"
+    let reply: String = ws_send_recv(cfg.base_url, frame)
+    if str_eq(reply, "") { return response_err(599, SVC_ERR_TRANSPORT) }
+    response_ok(reply)
+}
+
+// ── Direct binding (in-process — used in tests / single-process apps) ──────
+
+fn direct_invoke(handler_fn_name: String, req: ServiceRequest) -> ServiceResponse {
+    let body: String = call_dynamic2(handler_fn_name, req.method, req.args)
+    response_ok(body)
+}
+
+// ── ServiceRegistry ─────────────────────────────────────────────────────────
+//
+// Maps service name -> ServiceConfig. Methods are looked up in a separate
+// per-service method table (logical method -> (verb, path) for REST, etc).
+
+fn registry_new() -> String {
+    "{}"
+}
+
+fn registry_register(reg: String, cfg: ServiceConfig) -> String {
+    json_set(reg, cfg.name, json_encode(cfg))
+}
+
+fn registry_lookup(reg: String, name: String) -> String {
+    json_get(reg, name)
+}
+
+// ── ServiceProxy — the user-facing call site ────────────────────────────────
+//
+// A ServiceProxy is a (registry, service_name, method_table) trio. The
+// el-ui-compiler emits one proxy class per service interface.
+
+type ServiceProxy {
+    service_name:  String
+    config:        ServiceConfig
+    method_table:  String   // JSON: method -> { http_verb, path }
+}
+
+fn proxy_invoke(proxy: ServiceProxy, method: String, args_json: String) -> ServiceResponse {
+    let req: ServiceRequest = { "method": method, "args": args_json, "metadata": "{}" }
+    let cfg: ServiceConfig  = proxy.config
+    if str_eq(cfg.binding, "rest") {
+        let m: String = json_get(proxy.method_table, method)
+        if str_eq(m, "") { return response_err(404, SVC_ERR_METHOD_NOT_FOUND) }
+        let verb: String = json_get(m, "verb")
+        let path: String = json_get(m, "path")
+        return rest_invoke(cfg, verb, path, req)
+    }
+    if str_eq(cfg.binding, "grpc") {
+        return grpc_invoke(cfg, method, req)
+    }
+    if str_eq(cfg.binding, "websocket") {
+        return ws_invoke(cfg, method, req)
+    }
+    response_err(400, SVC_ERR_BINDING)
+}
+
+// ── Entry — smoke test ──────────────────────────────────────────────────────
+
+let cfg: ServiceConfig = service_config_rest("UserService", "https://api.example.com", "env:API_TOKEN")
+println("[el-services] registered " + cfg.name + " @ " + cfg.base_url)
diff --git a/crates/el-services/src/proxy.rs b/vessels/el-services/src/proxy.rs
similarity index 100%
rename from crates/el-services/src/proxy.rs
rename to vessels/el-services/src/proxy.rs
diff --git a/crates/el-services/src/registry.rs b/vessels/el-services/src/registry.rs
similarity index 100%
rename from crates/el-services/src/registry.rs
rename to vessels/el-services/src/registry.rs
diff --git a/crates/el-services/src/tests.rs b/vessels/el-services/src/tests.rs
similarity index 100%
rename from crates/el-services/src/tests.rs
rename to vessels/el-services/src/tests.rs
diff --git a/crates/el-style/Cargo.toml b/vessels/el-style/Cargo.toml
similarity index 100%
rename from crates/el-style/Cargo.toml
rename to vessels/el-style/Cargo.toml
diff --git a/vessels/el-style/manifest.el b/vessels/el-style/manifest.el
new file mode 100644
index 0000000..2cf2122
--- /dev/null
+++ b/vessels/el-style/manifest.el
@@ -0,0 +1,21 @@
+// el-style — The el-ui design system.
+//
+// Platform-agnostic, theme-driven style representation. Every value is a
+// semantic token — the theme maps tokens to actual colors, sizes, and shadows.
+// Components never hardcode visual values.
+
+vessel "el-style" {
+    version "0.1.0"
+    description "Design tokens, themes, and the StyleModifier fluent API"
+    authors ["Will Anderson <will@neurontechnologies.ai>"]
+    edition "2026"
+}
+
+dependencies {
+    el-platform "1.0"
+}
+
+build {
+    entry "src/main.el"
+    output "dist/"
+}
diff --git a/crates/el-style/src/color.rs b/vessels/el-style/src/color.rs
similarity index 100%
rename from crates/el-style/src/color.rs
rename to vessels/el-style/src/color.rs
diff --git a/crates/el-style/src/lib.rs b/vessels/el-style/src/lib.rs
similarity index 100%
rename from crates/el-style/src/lib.rs
rename to vessels/el-style/src/lib.rs
diff --git a/vessels/el-style/src/main.el b/vessels/el-style/src/main.el
new file mode 100644
index 0000000..a73a114
--- /dev/null
+++ b/vessels/el-style/src/main.el
@@ -0,0 +1,231 @@
+// el-style — The el-ui design system.
+//
+// Hierarchy:
+//   1. Theme              — single source of truth, set at experience root
+//   2. Semantic tokens    — Color::Primary, Spacing::Lg, Radius::Md, ...
+//   3. StyleModifier      — fluent builder applied to any component
+//   4. StyleSheet         — named rule sets, applied with .apply("card")
+//
+// Resolution flow:
+//   component declares semantic token  →  theme resolves to RGBA / px  →
+//   compiler emits CSS-in-JS for the browser target / NSColor for macOS / ...
+
+// ── Color tokens ─────────────────────────────────────────────────────────────
+
+let COLOR_PRIMARY:            String = "primary"
+let COLOR_ON_PRIMARY:         String = "on_primary"
+let COLOR_PRIMARY_CONTAINER:  String = "primary_container"
+let COLOR_SECONDARY:          String = "secondary"
+let COLOR_ON_SECONDARY:       String = "on_secondary"
+let COLOR_BACKGROUND:         String = "background"
+let COLOR_ON_BACKGROUND:      String = "on_background"
+let COLOR_SURFACE:            String = "surface"
+let COLOR_ON_SURFACE:         String = "on_surface"
+let COLOR_SURFACE_VARIANT:    String = "surface_variant"
+let COLOR_ERROR:              String = "error"
+let COLOR_ON_ERROR:           String = "on_error"
+let COLOR_OUTLINE:            String = "outline"
+let COLOR_OUTLINE_VARIANT:    String = "outline_variant"
+
+// A resolved RGBA quadruple, encoded as JSON for transport across the FFI.
+type Rgba {
+    r: Int   // 0-255
+    g: Int   // 0-255
+    b: Int   // 0-255
+    a: Int   // 0-255 (we store alpha *256 to keep everything integer in El today)
+}
+
+fn rgba(r: Int, g: Int, b: Int, a: Int) -> Rgba {
+    { "r": r, "g": g, "b": b, "a": a }
+}
+
+fn rgba_to_css(c: Rgba) -> String {
+    "rgba(" + int_to_str(c.r) + "," + int_to_str(c.g) + "," + int_to_str(c.b)
+        + "," + int_to_str(c.a) + ")"
+}
+
+fn parse_hex(hex: String) -> Rgba {
+    let s: String = hex
+    if str_starts_with(s, "#") { let s = str_slice(s, 1, str_len(s)) }
+    let r: Int = hex_to_int(str_slice(s, 0, 2))
+    let g: Int = hex_to_int(str_slice(s, 2, 4))
+    let b: Int = hex_to_int(str_slice(s, 4, 6))
+    let a: Int = 255
+    if str_len(s) > 6 { let a = hex_to_int(str_slice(s, 6, 8)) }
+    { "r": r, "g": g, "b": b, "a": a }
+}
+
+// ── ColorScheme: semantic token -> Rgba ──────────────────────────────────────
+
+type ColorScheme {
+    primary:           String   // hex
+    on_primary:        String
+    primary_container: String
+    secondary:         String
+    on_secondary:      String
+    background:        String
+    on_background:     String
+    surface:           String
+    on_surface:        String
+    surface_variant:   String
+    error:             String
+    on_error:          String
+    outline:           String
+    outline_variant:   String
+}
+
+fn color_scheme_light() -> ColorScheme {
+    { "primary": "#3b82f6", "on_primary": "#ffffff", "primary_container": "#dbeafe",
+      "secondary": "#a855f7", "on_secondary": "#ffffff",
+      "background": "#ffffff", "on_background": "#0f172a",
+      "surface": "#f8fafc", "on_surface": "#0f172a", "surface_variant": "#e2e8f0",
+      "error": "#dc2626", "on_error": "#ffffff",
+      "outline": "#cbd5e1", "outline_variant": "#e2e8f0" }
+}
+
+fn color_scheme_dark() -> ColorScheme {
+    { "primary": "#60a5fa", "on_primary": "#0f172a", "primary_container": "#1e3a8a",
+      "secondary": "#c084fc", "on_secondary": "#0f172a",
+      "background": "#0f172a", "on_background": "#f8fafc",
+      "surface": "#1e293b", "on_surface": "#f8fafc", "surface_variant": "#334155",
+      "error": "#f87171", "on_error": "#0f172a",
+      "outline": "#475569", "outline_variant": "#334155" }
+}
+
+// Resolve a semantic color token to its hex value in the active scheme.
+fn resolve_color(scheme: ColorScheme, token: String) -> String {
+    if str_eq(token, "primary")           { return scheme.primary }
+    if str_eq(token, "on_primary")        { return scheme.on_primary }
+    if str_eq(token, "primary_container") { return scheme.primary_container }
+    if str_eq(token, "secondary")         { return scheme.secondary }
+    if str_eq(token, "on_secondary")      { return scheme.on_secondary }
+    if str_eq(token, "background")        { return scheme.background }
+    if str_eq(token, "on_background")     { return scheme.on_background }
+    if str_eq(token, "surface")           { return scheme.surface }
+    if str_eq(token, "on_surface")        { return scheme.on_surface }
+    if str_eq(token, "surface_variant")   { return scheme.surface_variant }
+    if str_eq(token, "error")             { return scheme.error }
+    if str_eq(token, "on_error")          { return scheme.on_error }
+    if str_eq(token, "outline")           { return scheme.outline }
+    if str_eq(token, "outline_variant")   { return scheme.outline_variant }
+    "#000000"
+}
+
+// ── Spacing scale ────────────────────────────────────────────────────────────
+
+type SpacingScale {
+    xs: Int
+    sm: Int
+    md: Int
+    lg: Int
+    xl: Int
+    xxl: Int
+}
+
+fn spacing_default() -> SpacingScale {
+    { "xs": 4, "sm": 8, "md": 16, "lg": 24, "xl": 32, "xxl": 48 }
+}
+
+fn resolve_spacing(s: SpacingScale, token: String) -> Int {
+    if str_eq(token, "xs")  { return s.xs }
+    if str_eq(token, "sm")  { return s.sm }
+    if str_eq(token, "md")  { return s.md }
+    if str_eq(token, "lg")  { return s.lg }
+    if str_eq(token, "xl")  { return s.xl }
+    if str_eq(token, "xxl") { return s.xxl }
+    s.md
+}
+
+// ── Radius / shadow ──────────────────────────────────────────────────────────
+
+type RadiusScale {
+    none: Int
+    sm:   Int
+    md:   Int
+    lg:   Int
+    full: Int
+}
+
+fn radius_default() -> RadiusScale {
+    { "none": 0, "sm": 4, "md": 8, "lg": 16, "full": 9999 }
+}
+
+type ShadowScale {
+    sm: String   // CSS box-shadow string
+    md: String
+    lg: String
+}
+
+fn shadow_light() -> ShadowScale {
+    { "sm": "0 1px 2px rgba(0,0,0,0.05)",
+      "md": "0 4px 6px rgba(0,0,0,0.1)",
+      "lg": "0 10px 15px rgba(0,0,0,0.1)" }
+}
+
+fn shadow_dark() -> ShadowScale {
+    { "sm": "0 1px 2px rgba(0,0,0,0.4)",
+      "md": "0 4px 6px rgba(0,0,0,0.5)",
+      "lg": "0 10px 15px rgba(0,0,0,0.6)" }
+}
+
+// ── Typography ───────────────────────────────────────────────────────────────
+
+type TextStyle {
+    font_family: String
+    font_size:   Int
+    font_weight: Int   // 100..900
+    line_height: Int   // px
+    letter_spacing: Int  // hundredths of em
+}
+
+fn text_style_default() -> TextStyle {
+    { "font_family": "system-ui, -apple-system, sans-serif",
+      "font_size": 16, "font_weight": 400, "line_height": 24, "letter_spacing": 0 }
+}
+
+// ── Theme ────────────────────────────────────────────────────────────────────
+
+let THEME_MODE_LIGHT:  String = "light"
+let THEME_MODE_DARK:   String = "dark"
+let THEME_MODE_SYSTEM: String = "system"
+
+type Theme {
+    mode:       String   // light | dark | system
+    colors:     ColorScheme
+    spacing:    SpacingScale
+    radius:     RadiusScale
+    shadows:    ShadowScale
+    typography: TextStyle
+}
+
+fn theme_default_light() -> Theme {
+    { "mode": "light", "colors": color_scheme_light(), "spacing": spacing_default(),
+      "radius": radius_default(), "shadows": shadow_light(), "typography": text_style_default() }
+}
+
+fn theme_default_dark() -> Theme {
+    { "mode": "dark", "colors": color_scheme_dark(), "spacing": spacing_default(),
+      "radius": radius_default(), "shadows": shadow_dark(), "typography": text_style_default() }
+}
+
+// ── StyleSheet — named rule sets ─────────────────────────────────────────────
+//
+// A StyleSheet is a JSON object mapping selector -> declarations.
+// Components apply by name: element.apply("card")
+
+fn stylesheet_new() -> String {
+    "{}"
+}
+
+fn stylesheet_define(sheet: String, name: String, css_decls: String) -> String {
+    json_set(sheet, name, css_decls)
+}
+
+fn stylesheet_resolve(sheet: String, name: String) -> String {
+    json_get(sheet, name)
+}
+
+// ── Entry — smoke test ───────────────────────────────────────────────────────
+
+let theme: Theme = theme_default_light()
+println("[el-style] light primary = " + theme.colors.primary)
diff --git a/crates/el-style/src/modifier.rs b/vessels/el-style/src/modifier.rs
similarity index 100%
rename from crates/el-style/src/modifier.rs
rename to vessels/el-style/src/modifier.rs
diff --git a/crates/el-style/src/radius.rs b/vessels/el-style/src/radius.rs
similarity index 100%
rename from crates/el-style/src/radius.rs
rename to vessels/el-style/src/radius.rs
diff --git a/crates/el-style/src/shadow.rs b/vessels/el-style/src/shadow.rs
similarity index 100%
rename from crates/el-style/src/shadow.rs
rename to vessels/el-style/src/shadow.rs
diff --git a/crates/el-style/src/spacing.rs b/vessels/el-style/src/spacing.rs
similarity index 100%
rename from crates/el-style/src/spacing.rs
rename to vessels/el-style/src/spacing.rs
diff --git a/crates/el-style/src/stylesheet.rs b/vessels/el-style/src/stylesheet.rs
similarity index 100%
rename from crates/el-style/src/stylesheet.rs
rename to vessels/el-style/src/stylesheet.rs
diff --git a/crates/el-style/src/theme.rs b/vessels/el-style/src/theme.rs
similarity index 100%
rename from crates/el-style/src/theme.rs
rename to vessels/el-style/src/theme.rs
diff --git a/crates/el-style/src/typography.rs b/vessels/el-style/src/typography.rs
similarity index 100%
rename from crates/el-style/src/typography.rs
rename to vessels/el-style/src/typography.rs
diff --git a/crates/el-ui-compiler/Cargo.toml b/vessels/el-ui-compiler/Cargo.toml
similarity index 100%
rename from crates/el-ui-compiler/Cargo.toml
rename to vessels/el-ui-compiler/Cargo.toml
diff --git a/vessels/el-ui-compiler/manifest.el b/vessels/el-ui-compiler/manifest.el
new file mode 100644
index 0000000..a9f7b2c
--- /dev/null
+++ b/vessels/el-ui-compiler/manifest.el
@@ -0,0 +1,28 @@
+// el-ui-compiler — El→browser-target component compiler.
+//
+// RUNTIME GAP: This vessel is a STUB. The bootstrap El compiler (`elc`)
+// emits C only — there is no JavaScript or WebAssembly backend yet. The
+// El surface here defines the public contract (`Compiler`,
+// `compile_component`, `compile_app`) but the codegen step returns a
+// marker module that throws at load time. Once elc gains a JS/Wasm
+// backend, swap the stage bodies for real implementations and ship.
+//
+// The Rust crate (vessels/el-ui-compiler) has the real lexer / parser /
+// semantic / codegen pipeline and is the source of truth until the El
+// version becomes self-hosting.
+
+vessel "el-ui-compiler" {
+    version "0.1.0"
+    description "El→JS component compiler (STUB; awaiting JS backend in elc)"
+    authors ["Will Anderson <will@neurontechnologies.ai>"]
+    edition "2026"
+}
+
+dependencies {
+    el-platform "1.0"
+}
+
+build {
+    entry "src/main.el"
+    output "dist/"
+}
diff --git a/crates/el-ui-compiler/src/ast.rs b/vessels/el-ui-compiler/src/ast.rs
similarity index 100%
rename from crates/el-ui-compiler/src/ast.rs
rename to vessels/el-ui-compiler/src/ast.rs
diff --git a/vessels/el-ui-compiler/src/codegen.rs b/vessels/el-ui-compiler/src/codegen.rs
new file mode 100644
index 0000000..3633f75
--- /dev/null
+++ b/vessels/el-ui-compiler/src/codegen.rs
@@ -0,0 +1,1733 @@
+//! Code generator — transforms el-ui AST into target-platform source code.
+//!
+//! Each component becomes a class/struct that manages state and renders UI.
+//!
+//! ## Codegen targets
+//!
+//! The `CodegenTarget` enum selects the output format:
+//!
+//! - `Web` — **legacy** ES2022 JavaScript module for the browser JS runtime.
+//!   Kept for backward compatibility. New web targets use `Native(Platform::Web)`.
+//! - `Server` — Rust code calling `el_platform::ServerBackend` for SSR.
+//!   The ONLY target that generates HTML strings by design.
+//! - `Native(Platform)` — Rust code calling the `el-platform` native backend.
+//!   `Platform::Web` here means WASM via web-sys, NOT JavaScript strings.
+//!
+//! ## Semantic primitive integration
+//!
+//! The `semantic` module holds the EBD-driven appearance/layout concept types.
+//! Each platform codegen function in this file dispatches on `SemanticPrimitive`
+//! to emit the appropriate native API call pattern.
+//!
+//! Pipeline:
+//! ```text
+//! .el template → AST → SemanticPrimitive → platform codegen → source code
+//! ```
+
+use crate::ast::*;
+use crate::error::CompileResult;
+use crate::semantic::{
+    AppearanceConcept, LayoutConcept, SemanticPrimitive, TextConcept,
+};
+
+/// Which platform to target when using `CodegenTarget::Native`.
+///
+/// `Web` here means a WASM binary compiled with `web-sys` DOM bindings —
+/// NOT JavaScript string generation. JavaScript is the `CodegenTarget::Web`
+/// (legacy) path.
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum Platform {
+    Ios,
+    Android,
+    Macos,
+    Linux,
+    Windows,
+    /// WASM target: compiles to a `.wasm` binary using `web-sys` for DOM access.
+    /// This is native Rust compiled to WebAssembly, not JavaScript generation.
+    Web,
+}
+
+impl Platform {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            Self::Ios => "ios",
+            Self::Android => "android",
+            Self::Macos => "macos",
+            Self::Linux => "linux",
+            Self::Windows => "windows",
+            Self::Web => "web-wasm",
+        }
+    }
+}
+
+/// Selects the output format for the code generator.
+///
+/// - `Web` — **legacy** ES2022 JavaScript module (el-ui JS runtime). Kept for
+///   backward compatibility during migration. Do not use for new targets.
+/// - `Server` — Rust module using `el_platform::ServerBackend` for SSR.
+///   The ONLY target that generates HTML strings — that is intentional.
+/// - `Native(Platform)` — Rust module calling the `el_platform::PlatformBackend`
+///   trait for the given platform. `Platform::Web` here means WASM/web-sys.
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum CodegenTarget {
+    /// Legacy — ES2022 JavaScript module for the browser JS runtime.
+    /// Deprecated in favour of `Native(Platform::Web)` for WASM targets.
+    Web,
+    /// Server-side rendering — Rust code using `el_platform::ServerBackend`.
+    /// The only target that intentionally generates HTML strings.
+    Server,
+    /// Native platform — Rust code using the platform backend trait.
+    /// `Native(Platform::Web)` emits Rust+web-sys for WASM, not JavaScript.
+    Native(Platform),
+}
+
+impl CodegenTarget {
+    pub fn is_web(&self) -> bool {
+        matches!(self, Self::Web)
+    }
+
+    pub fn is_rust_output(&self) -> bool {
+        matches!(self, Self::Server | Self::Native(_))
+    }
+}
+
+pub struct Codegen {
+    runtime_path: String,
+    /// The compilation target. Defaults to `Web`.
+    pub target: CodegenTarget,
+}
+
+impl Codegen {
+    pub fn new(runtime_path: &str) -> Self {
+        Self {
+            runtime_path: runtime_path.to_owned(),
+            target: CodegenTarget::Web,
+        }
+    }
+
+    pub fn with_target(mut self, target: CodegenTarget) -> Self {
+        self.target = target;
+        self
+    }
+
+    pub fn generate(&self, components: &[Component]) -> CompileResult<String> {
+        match &self.target {
+            CodegenTarget::Web => self.generate_web(components),
+            CodegenTarget::Server => self.generate_server_rust(components),
+            CodegenTarget::Native(platform) => self.generate_native_rust(components, platform),
+        }
+    }
+
+    fn generate_web(&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)
+    }
+
+    /// Generate Rust code for the `server` target.
+    ///
+    /// The output is a Rust module where each component is a struct implementing
+    /// `render_to_html(&self) -> String` using `el_platform::ServerBackend`.
+    fn generate_server_rust(&self, components: &[Component]) -> CompileResult<String> {
+        let mut out = String::new();
+        out.push_str("//! el-ui SSR — generated by el-ui-compiler (target: server)\n");
+        out.push_str("//! Do not edit. Re-generate with: el-ui-compiler --target server\n\n");
+        out.push_str("use el_platform::{ServerBackend, PlatformBackend, PlatformNode};\n\n");
+
+        for comp in components {
+            out.push_str(&format!("/// Server-side rendered component: {}\n", comp.name));
+            out.push_str(&format!("pub struct {} {{\n", comp.name));
+            for prop in &comp.props {
+                out.push_str(&format!("    pub {}: String,\n", prop.name));
+            }
+            for state in &comp.state {
+                out.push_str(&format!("    pub {}: String,\n", state.name));
+            }
+            out.push_str("}\n\n");
+
+            out.push_str(&format!("impl {} {{\n", comp.name));
+            out.push_str("    pub fn render_to_html(&self) -> String {\n");
+            out.push_str("        let backend = ServerBackend::new();\n");
+            // Generate a simple element tree based on the template
+            out.push_str("        let root = self.build_node_tree();\n");
+            out.push_str("        backend.render_to_string(&root).unwrap_or_default()\n");
+            out.push_str("    }\n\n");
+            out.push_str("    fn build_node_tree(&self) -> PlatformNode {\n");
+            out.push_str("        // TODO: full template → PlatformNode tree codegen\n");
+            out.push_str("        // The compiler translates each TemplateNode into\n");
+            out.push_str("        // PlatformNode::element() / PlatformNode::text() calls.\n");
+            out.push_str("        PlatformNode::element(\"div\")\n");
+            out.push_str("    }\n");
+            out.push_str("}\n\n");
+        }
+
+        Ok(out)
+    }
+
+    /// Generate Rust code for a `native` target.
+    ///
+    /// The output is a Rust module where each component builds a `PlatformNode`
+    /// tree via the semantic primitive layer and calls the appropriate backend
+    /// to mount it.
+    ///
+    /// `Platform::Web` here produces Rust+web-sys code for WASM — not JavaScript.
+    fn generate_native_rust(&self, components: &[Component], platform: &Platform) -> CompileResult<String> {
+        let backend_type = match platform {
+            Platform::Ios => "IosBackend",
+            Platform::Android => "AndroidBackend",
+            Platform::Macos => "MacosBackend",
+            Platform::Linux => "LinuxBackend",
+            Platform::Windows => "WindowsBackend",
+            // Web WASM uses WebBackend — web-sys DOM calls, not JS strings.
+            Platform::Web => "WebBackend",
+        };
+
+        let mut out = String::new();
+        out.push_str(&format!(
+            "//! el-ui native — generated by el-ui-compiler (target: {})\n",
+            platform.as_str()
+        ));
+        out.push_str("//! Do not edit. Re-generate with: el-ui-compiler --target <platform>\n\n");
+
+        // Web-WASM gets web-sys imports in addition to el-platform.
+        if matches!(platform, Platform::Web) {
+            out.push_str("//! WASM target: compiled to WebAssembly via web-sys DOM bindings.\n");
+            out.push_str("//! This is NOT JavaScript — it is Rust compiled to .wasm.\n\n");
+            out.push_str("#[cfg(target_arch = \"wasm32\")]\n");
+            out.push_str("use wasm_bindgen::prelude::*;\n");
+            out.push_str("#[cfg(target_arch = \"wasm32\")]\n");
+            out.push_str("use web_sys::{window, Document, Element, HtmlElement};\n\n");
+        }
+
+        out.push_str(&format!(
+            "use el_platform::{{{} as Backend, PlatformBackend, PlatformNode}};\n\n",
+            backend_type
+        ));
+
+        for comp in components {
+            out.push_str(&format!("/// Native component: {} ({})\n", comp.name, platform.as_str()));
+            out.push_str(&format!("pub struct {} {{\n", comp.name));
+            for prop in &comp.props {
+                out.push_str(&format!("    pub {}: String,\n", prop.name));
+            }
+            for state in &comp.state {
+                out.push_str(&format!("    pub {}: String,\n", state.name));
+            }
+            out.push_str("    backend: Backend,\n");
+            out.push_str("}\n\n");
+
+            out.push_str(&format!("impl {} {{\n", comp.name));
+            out.push_str("    pub fn new() -> Self {\n");
+            out.push_str("        Self {\n");
+            for prop in &comp.props {
+                let default = prop.default.as_deref().unwrap_or("\"\"");
+                out.push_str(&format!("            {}: {}.to_string(),\n", prop.name, default));
+            }
+            for state in &comp.state {
+                out.push_str(&format!("            {}: {}.to_string(),\n", state.name, state.initial));
+            }
+            out.push_str("            backend: Backend::new(),\n");
+            out.push_str("        }\n");
+            out.push_str("    }\n\n");
+
+            out.push_str("    pub fn mount(&self, container_id: &str) -> el_platform::PlatformResult<()> {\n");
+            out.push_str("        let root = self.build_node_tree();\n");
+            out.push_str("        self.backend.mount(root, container_id)\n");
+            out.push_str("    }\n\n");
+
+            // Emit the semantic build_node_tree with platform-appropriate comments
+            out.push_str("    fn build_node_tree(&self) -> PlatformNode {\n");
+            out.push_str("        // Semantic primitive layer: each element is described as a\n");
+            out.push_str("        // concept (Action, Destructive, Stack, etc.) and the backend\n");
+            out.push_str("        // maps it to the platform's native visual convention.\n");
+            out.push_str("        //\n");
+            out.push_str("        // TODO: full template → SemanticPrimitive → PlatformNode codegen.\n");
+            out.push_str("        // The compiler walks the AST TemplateNode tree, calls\n");
+            out.push_str("        // semantic::infer_appearance() / infer_layout_concept(), builds\n");
+            out.push_str("        // SemanticPrimitive variants, then calls the platform codegen\n");
+            out.push_str("        // functions below to produce PlatformNode trees.\n");
+            out.push_str("        PlatformNode::element(\"div\")\n");
+            out.push_str("    }\n");
+            out.push_str("}\n\n");
+
+            // Emit free functions that translate SemanticPrimitives for this platform.
+            // These are emitted as documentation of the codegen architecture even before
+            // full AST→semantic lowering is wired in.
+            out.push_str(&format!(
+                "// --- Semantic primitive codegen for {} ---\n\n",
+                platform.as_str()
+            ));
+            out.push_str(&self.gen_semantic_module(platform));
+        }
+
+        Ok(out)
+    }
+
+    /// Emit the platform-specific semantic primitive translation functions.
+    ///
+    /// Each platform gets a module of free functions that accept a `SemanticPrimitive`
+    /// reference (from the compiler's semantic layer, not el-platform) and produce
+    /// the source-code string that should be emitted into the final Rust output.
+    ///
+    /// These functions are the authoritative mapping of EBD concepts → platform APIs.
+    fn gen_semantic_module(&self, platform: &Platform) -> String {
+        match platform {
+            Platform::Macos => self.gen_macos_semantic_module(),
+            Platform::Ios => self.gen_ios_semantic_module(),
+            Platform::Android => self.gen_android_semantic_module(),
+            Platform::Windows => self.gen_windows_semantic_module(),
+            Platform::Linux => self.gen_linux_semantic_module(),
+            Platform::Web => self.gen_web_wasm_semantic_module(),
+        }
+    }
+
+    // -----------------------------------------------------------------------
+    // macOS / AppKit semantic codegen
+    // -----------------------------------------------------------------------
+
+    /// Emit Rust source comments documenting the macOS semantic mapping.
+    ///
+    /// In a complete implementation, these functions would be called by the
+    /// AST walker to produce the actual `build_node_tree` body. For now they
+    /// document the authoritative concept → AppKit mapping.
+    fn gen_macos_semantic_module(&self) -> String {
+        [
+            "// macOS semantic primitive → AppKit mapping\n",
+            "//\n",
+            "// Button { appearance: Action }      → NSButton (NSBezelStyle::rounded)\n",
+            "// Button { appearance: Destructive } → NSButton (NSBezelStyle::rounded, red tint via theme)\n",
+            "// Button { appearance: Secondary }   → NSButton (NSBezelStyle::smallSquare)\n",
+            "// Button { appearance: Navigation }  → NSButton (NSBezelStyle::recessed)\n",
+            "// Text { concept: Heading(1) }       → NSTextField label, NSFont systemFont(28, bold)\n",
+            "// Text { concept: Body }             → NSTextField label, NSFont systemFont(13)\n",
+            "// Text { concept: Code }             → NSTextField label, NSFont monospacedSystemFont\n",
+            "// Container { layout: Stack }        → NSStackView (orientation: vertical)\n",
+            "// Container { layout: Row }          → NSStackView (orientation: horizontal)\n",
+            "// Container { layout: Scroll }       → NSScrollView wrapping NSStackView\n",
+            "// Input { appearance: _ }            → NSTextField (editable)\n",
+            "// Toggle { }                         → NSButton (buttonType: .switch)\n",
+            "//\n",
+            "// Native handle acquisition pattern (to be emitted into build_node_tree):\n",
+            "//   let btn = NSButton::new();\n",
+            "//   btn.set_title(\"label\");\n",
+            "//   btn.set_bezel_style(NSBezelStyle::rounded());\n",
+            "//   // AppearanceConcept::Destructive adds:\n",
+            "//   btn.set_content_tint_color(NSColor::system_red());\n",
+            "\n",
+        ]
+        .concat()
+    }
+
+    // -----------------------------------------------------------------------
+    // iOS / UIKit semantic codegen
+    // -----------------------------------------------------------------------
+
+    fn gen_ios_semantic_module(&self) -> String {
+        [
+            "// iOS semantic primitive → UIKit mapping\n",
+            "//\n",
+            "// Button { appearance: Action }      → UIButton (Configuration.filled)\n",
+            "// Button { appearance: Destructive } → UIButton (Configuration.filled, tintColor: .systemRed)\n",
+            "// Button { appearance: Secondary }   → UIButton (Configuration.gray)\n",
+            "// Button { appearance: Navigation }  → UIButton (Configuration.plain)\n",
+            "// Text { concept: Heading(1) }       → UILabel, font: preferredFont(.largeTitle)\n",
+            "// Text { concept: Body }             → UILabel, font: preferredFont(.body)\n",
+            "// Text { concept: Code }             → UILabel, font: monospacedSystemFont\n",
+            "// Container { layout: Stack }        → UIStackView (axis: .vertical)\n",
+            "// Container { layout: Row }          → UIStackView (axis: .horizontal)\n",
+            "// Container { layout: Scroll }       → UIScrollView containing UIStackView\n",
+            "// Container { layout: Grid }         → UICollectionView with flow layout\n",
+            "// Input { appearance: _ }            → UITextField\n",
+            "// Toggle { }                         → UISwitch\n",
+            "//\n",
+            "// Native handle acquisition pattern:\n",
+            "//   let mut config = UIButton.Configuration.filled();\n",
+            "//   config.title = \"label\";\n",
+            "//   let btn = UIButton::new();\n",
+            "//   btn.set_configuration(config);\n",
+            "//   // AppearanceConcept::Destructive adds:\n",
+            "//   btn.set_tint_color(UIColor::system_red());\n",
+            "\n",
+        ]
+        .concat()
+    }
+
+    // -----------------------------------------------------------------------
+    // Android / Jetpack Compose semantic codegen
+    // -----------------------------------------------------------------------
+
+    /// Android emits Kotlin-style Compose declarations as a code string.
+    /// Kotlin is the target language for Android — these are emitted as
+    /// Rust string literals that the build system writes into .kt files.
+    fn gen_android_semantic_module(&self) -> String {
+        [
+            "// Android semantic primitive → Jetpack Compose mapping\n",
+            "// Emitted as Kotlin source code strings (Rust → .kt files via build.rs)\n",
+            "//\n",
+            "// Button { appearance: Action }       → Button(onClick = { onPress() }) { Text(label) }\n",
+            "// Button { appearance: Destructive }  → Button(onClick = { .. },\n",
+            "//     colors = ButtonDefaults.buttonColors(\n",
+            "//         containerColor = MaterialTheme.colorScheme.error)) { Text(label) }\n",
+            "// Button { appearance: Secondary }    → OutlinedButton(onClick = { .. }) { Text(label) }\n",
+            "// Button { appearance: Navigation }   → TextButton(onClick = { .. }) { Text(label) }\n",
+            "// Text { concept: Heading(1) }        → Text(label, style = MaterialTheme.typography.headlineLarge)\n",
+            "// Text { concept: Body }              → Text(label, style = MaterialTheme.typography.bodyLarge)\n",
+            "// Text { concept: Code }              → Text(label, fontFamily = FontFamily.Monospace)\n",
+            "// Container { layout: Stack }         → Column { children... }\n",
+            "// Container { layout: Row }           → Row { children... }\n",
+            "// Container { layout: Grid }          → LazyVerticalGrid(columns = GridCells.Adaptive(128.dp)) { .. }\n",
+            "// Container { layout: Scroll }        → LazyColumn { items(list) { item -> .. } }\n",
+            "// Input { }                           → TextField(value = state, onValueChange = { .. })\n",
+            "// Toggle { }                          → Switch(checked = state, onCheckedChange = { .. })\n",
+            "\n",
+        ]
+        .concat()
+    }
+
+    // -----------------------------------------------------------------------
+    // Windows / WinUI semantic codegen
+    // -----------------------------------------------------------------------
+
+    fn gen_windows_semantic_module(&self) -> String {
+        [
+            "// Windows semantic primitive → WinUI 3 mapping\n",
+            "// Emitted as Rust using the windows-rs crate (COM/WinRT bindings)\n",
+            "//\n",
+            "// Button { appearance: Action }      → Button (Style: AccentButtonStyle)\n",
+            "// Button { appearance: Destructive } → Button (Background: DangerBrush via ResourceDictionary)\n",
+            "// Button { appearance: Secondary }   → Button (default style)\n",
+            "// Button { appearance: Navigation }  → NavigationBackButton or HyperlinkButton\n",
+            "// Text { concept: Heading(1) }       → TextBlock (Style: HeaderTextBlockStyle)\n",
+            "// Text { concept: Body }             → TextBlock (Style: BodyTextBlockStyle)\n",
+            "// Text { concept: Code }             → TextBlock (FontFamily: Cascadia Code)\n",
+            "// Container { layout: Stack }        → StackPanel (Orientation: Vertical)\n",
+            "// Container { layout: Row }          → StackPanel (Orientation: Horizontal)\n",
+            "// Container { layout: Grid }         → Grid with ColumnDefinitions\n",
+            "// Container { layout: Scroll }       → ScrollViewer containing StackPanel\n",
+            "// Input { }                          → TextBox\n",
+            "// Toggle { }                         → ToggleSwitch\n",
+            "//\n",
+            "// Native handle acquisition pattern (windows-rs):\n",
+            "//   let btn: Button = Button::new()?;\n",
+            "//   btn.SetContent(IInspectable::try_from(\"label\")?)?;\n",
+            "//   // AccentButtonStyle applied via XamlResourceDictionary lookup\n",
+            "\n",
+        ]
+        .concat()
+    }
+
+    // -----------------------------------------------------------------------
+    // Linux / GTK semantic codegen
+    // -----------------------------------------------------------------------
+
+    fn gen_linux_semantic_module(&self) -> String {
+        [
+            "// Linux semantic primitive → GTK 4 mapping\n",
+            "// Emitted as Rust using the gtk4-rs crate\n",
+            "//\n",
+            "// Button { appearance: Action }      → GtkButton (css_class: \"suggested-action\")\n",
+            "// Button { appearance: Destructive } → GtkButton (css_class: \"destructive-action\")\n",
+            "// Button { appearance: Secondary }   → GtkButton (css_class: \"flat\")\n",
+            "// Button { appearance: Navigation }  → GtkButton (css_class: \"flat\")\n",
+            "// Text { concept: Heading(1) }       → GtkLabel (css_class: \"title-1\")\n",
+            "// Text { concept: Body }             → GtkLabel\n",
+            "// Text { concept: Code }             → GtkLabel (font: monospace)\n",
+            "// Container { layout: Stack }        → GtkBox (orientation: Vertical, spacing: 8)\n",
+            "// Container { layout: Row }          → GtkBox (orientation: Horizontal, spacing: 8)\n",
+            "// Container { layout: Grid }         → GtkGrid\n",
+            "// Container { layout: Scroll }       → GtkScrolledWindow containing GtkBox\n",
+            "// Input { }                          → GtkEntry\n",
+            "// Toggle { }                         → GtkSwitch\n",
+            "//\n",
+            "// Native handle acquisition pattern (gtk4-rs):\n",
+            "//   let btn = gtk4::Button::with_label(\"label\");\n",
+            "//   btn.add_css_class(\"suggested-action\");\n",
+            "//   btn.connect_clicked(move |_| { handler(); });\n",
+            "\n",
+        ]
+        .concat()
+    }
+
+    // -----------------------------------------------------------------------
+    // Web / WASM + web-sys semantic codegen
+    // -----------------------------------------------------------------------
+
+    /// Web WASM target emits Rust code that uses `web-sys` DOM bindings.
+    ///
+    /// This is NOT JavaScript string generation. The output is Rust source that
+    /// compiles to a `.wasm` binary. The browser loads the WASM module and calls
+    /// into it — the DOM is manipulated via `web-sys`'s safe Rust bindings.
+    ///
+    /// Key distinction:
+    /// - `CodegenTarget::Web` (legacy) → ES2022 JavaScript strings (el-ui JS runtime)
+    /// - `CodegenTarget::Native(Platform::Web)` (this path) → Rust+web-sys → .wasm
+    fn gen_web_wasm_semantic_module(&self) -> String {
+        [
+            "// Web WASM semantic primitive → web-sys DOM binding mapping\n",
+            "// This is Rust compiled to WebAssembly — NOT JavaScript string generation.\n",
+            "// Output: Rust source using web-sys for direct DOM manipulation.\n",
+            "//\n",
+            "// Button { appearance: Action } →\n",
+            "//   let document = window().unwrap().document().unwrap();\n",
+            "//   let btn = document.create_element(\"button\").unwrap();\n",
+            "//   btn.set_inner_html(label);\n",
+            "//   btn.set_attribute(\"data-appearance\", \"action\").unwrap();\n",
+            "//   btn.class_list().add_1(\"btn-action\").unwrap();\n",
+            "//   // Event handler via Closure:\n",
+            "//   let closure = Closure::wrap(Box::new(move || { on_press(); }) as Box<dyn Fn()>);\n",
+            "//   btn.add_event_listener_with_callback(\"click\", closure.as_ref().unchecked_ref())?;\n",
+            "//   closure.forget(); // hand ownership to JS GC\n",
+            "//\n",
+            "// Button { appearance: Destructive } → same as Action but data-appearance=\"destructive\"\n",
+            "// Text { concept: Heading(1) }       → document.create_element(\"h1\")\n",
+            "// Text { concept: Body }             → document.create_element(\"p\")\n",
+            "// Text { concept: Code }             → document.create_element(\"code\")\n",
+            "// Container { layout: Stack }        → div with style.flex_direction = \"column\"\n",
+            "// Container { layout: Row }          → div with style.flex_direction = \"row\"\n",
+            "// Container { layout: Grid }         → div with style.display = \"grid\"\n",
+            "// Container { layout: Scroll }       → div with style.overflow_y = \"auto\"\n",
+            "// Input { binding }                  → input[type=text] with oninput closure\n",
+            "// Toggle { binding }                 → input[type=checkbox] with onchange closure\n",
+            "\n",
+        ]
+        .concat()
+    }
+
+    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;")
+}
+
+// =============================================================================
+// Per-platform semantic primitive code generators
+//
+// These functions accept a `SemanticPrimitive` (EBD concept) and emit the
+// *source code string* that should be inserted into the generated Rust output
+// for that platform. They are the authoritative concept → API mapping.
+//
+// Architecture note: the output is a Rust *source code string*, not an
+// evaluated value. The compiler emits this string into the generated `.rs`
+// file; rustc then compiles it against the real platform crate.
+// =============================================================================
+
+/// Generate macOS / AppKit Rust source code for a semantic primitive.
+///
+/// Output is Rust code using `objc2-app-kit`-style API names. The generated
+/// code will be compiled for `aarch64-apple-macosx` or `x86_64-apple-macosx`.
+pub fn generate_macos(primitive: &SemanticPrimitive) -> String {
+    match primitive {
+        SemanticPrimitive::Button { label, appearance, on_press } => {
+            let bezel = appearance.appkit_bezel_style();
+            let handler_comment = match on_press {
+                Some(h) => format!("// handler: self.{h}()  →  btn.set_action(sel!({h}:))"),
+                None => "// no handler".to_string(),
+            };
+            let tint = if *appearance == AppearanceConcept::Destructive {
+                "\nbtn.set_content_tint_color(NSColor::system_red());"
+            } else {
+                ""
+            };
+            format!(
+                "let btn = NSButton::new(mtm);\n\
+                 btn.set_title(ns_string!(\"{label}\"));\n\
+                 btn.set_bezel_style({bezel});\n\
+                 {handler_comment}{tint}",
+                label = label,
+                bezel = bezel,
+                handler_comment = handler_comment,
+                tint = tint,
+            )
+        }
+
+        SemanticPrimitive::Text { content, concept } => {
+            let font = concept.appkit_font();
+            format!(
+                "let lbl = NSTextField::wrapping_label_with_string(ns_string!(\"{content}\"), mtm);\n\
+                 lbl.set_font(Some(&{font}));",
+                content = content,
+                font = font,
+            )
+        }
+
+        SemanticPrimitive::Container { children, layout } => {
+            let orientation = layout.appkit_orientation();
+            let child_code: Vec<String> = children
+                .iter()
+                .map(|c| format!("    stack.add_arranged_subview(&{});", generate_macos_expr(c)))
+                .collect();
+            format!(
+                "let stack = NSStackView::new(mtm);\n\
+                 stack.set_orientation({orientation});\n\
+                 {children}",
+                orientation = orientation,
+                children = child_code.join("\n"),
+            )
+        }
+
+        SemanticPrimitive::Input { binding, hint, appearance: _ } => {
+            let placeholder = hint.as_deref().unwrap_or("");
+            format!(
+                "let field = NSTextField::new(mtm);\n\
+                 field.set_placeholder_string(Some(ns_string!(\"{placeholder}\")));\n\
+                 // binding: two-way sync with state.{binding}",
+                placeholder = placeholder,
+                binding = binding,
+            )
+        }
+
+        SemanticPrimitive::Image { src, alt } => {
+            format!(
+                "let img_view = NSImageView::new(mtm);\n\
+                 // TODO: load image from asset: {src}\n\
+                 img_view.set_accessibility_label(Some(ns_string!(\"{alt}\")));",
+                src = src,
+                alt = alt,
+            )
+        }
+
+        SemanticPrimitive::Toggle { binding, label } => {
+            format!(
+                "let toggle = NSButton::check_box_with_title_target_action(\n\
+                     ns_string!(\"{label}\"), None, None, mtm);\n\
+                 // binding: sync toggle.state ↔ state.{binding}",
+                label = label,
+                binding = binding,
+            )
+        }
+
+        SemanticPrimitive::List { items_binding, item_name, item_template } => {
+            let item_code = generate_macos(item_template);
+            format!(
+                "// List over state.{items_binding} — each item rendered as:\n\
+                 // let {item_name} = item;\n\
+                 {item_code}\n\
+                 // TODO: embed in NSTableView or NSStackView scroll container",
+                items_binding = items_binding,
+                item_name = item_name,
+                item_code = item_code,
+            )
+        }
+    }
+}
+
+/// Helper: generate a variable-expression reference for a child primitive
+/// so it can be passed to `add_arranged_subview`.
+fn generate_macos_expr(primitive: &SemanticPrimitive) -> String {
+    match primitive {
+        SemanticPrimitive::Button { label, .. } => format!("btn_{}", sanitize_id(label)),
+        SemanticPrimitive::Text { content, .. } => format!("lbl_{}", sanitize_id(content)),
+        SemanticPrimitive::Container { .. } => "stack".to_string(),
+        SemanticPrimitive::Input { binding, .. } => format!("field_{}", binding),
+        SemanticPrimitive::Image { src, .. } => format!("img_{}", sanitize_id(src)),
+        SemanticPrimitive::Toggle { binding, .. } => format!("toggle_{}", binding),
+        SemanticPrimitive::List { items_binding, .. } => format!("list_{}", items_binding),
+    }
+}
+
+/// Generate iOS / UIKit Rust source code for a semantic primitive.
+///
+/// Output uses `objc2-ui-kit`-style API names. Compiled for `aarch64-apple-ios`.
+pub fn generate_ios(primitive: &SemanticPrimitive) -> String {
+    match primitive {
+        SemanticPrimitive::Button { label, appearance, on_press } => {
+            let config = appearance.uikit_button_config();
+            let handler_comment = match on_press {
+                Some(h) => format!("// handler: btn.add_target(self, sel!({h}), .touchUpInside)"),
+                None => "// no handler".to_string(),
+            };
+            let tint_line = if *appearance == AppearanceConcept::Destructive {
+                "\nbtn.set_tint_color(UIColor::system_red());"
+            } else {
+                ""
+            };
+            format!(
+                "var config = {config};\n\
+                 config.title = \"{label}\";\n\
+                 let btn = UIButton::new();\n\
+                 btn.set_configuration(Some(&config));\n\
+                 {handler_comment}{tint_line}",
+                config = config,
+                label = label,
+                handler_comment = handler_comment,
+                tint_line = tint_line,
+            )
+        }
+
+        SemanticPrimitive::Text { content, concept } => {
+            let font = concept.uikit_font();
+            format!(
+                "let lbl = UILabel::new();\n\
+                 lbl.set_text(Some(ns_string!(\"{content}\")));\n\
+                 lbl.set_font(Some(&{font}));\n\
+                 lbl.set_number_of_lines(0); // allow wrapping",
+                content = content,
+                font = font,
+            )
+        }
+
+        SemanticPrimitive::Container { children, layout } => {
+            let axis = layout.uikit_axis();
+            let child_code: Vec<String> = children
+                .iter()
+                .map(|c| format!("    stack.add_arranged_subview(&{});", generate_ios_expr(c)))
+                .collect();
+            format!(
+                "let stack = UIStackView::new();\n\
+                 stack.set_axis({axis});\n\
+                 stack.set_distribution(UIStackViewDistribution::fill());\n\
+                 {children}",
+                axis = axis,
+                children = child_code.join("\n"),
+            )
+        }
+
+        SemanticPrimitive::Input { binding, hint, appearance: _ } => {
+            let placeholder = hint.as_deref().unwrap_or("");
+            format!(
+                "let field = UITextField::new();\n\
+                 field.set_placeholder(Some(ns_string!(\"{placeholder}\")));\n\
+                 field.set_border_style(UITextBorderStyle::roundedRect());\n\
+                 // binding: UITextField delegate → state.{binding}",
+                placeholder = placeholder,
+                binding = binding,
+            )
+        }
+
+        SemanticPrimitive::Image { src, alt } => {
+            format!(
+                "let img_view = UIImageView::new();\n\
+                 // TODO: load UIImage from asset: {src}\n\
+                 img_view.set_accessibility_label(Some(ns_string!(\"{alt}\")));\n\
+                 img_view.set_content_mode(UIViewContentMode::scaleAspectFit());",
+                src = src,
+                alt = alt,
+            )
+        }
+
+        SemanticPrimitive::Toggle { binding, label } => {
+            format!(
+                "let toggle_label = UILabel::new();\n\
+                 toggle_label.set_text(Some(ns_string!(\"{label}\")));\n\
+                 let toggle = UISwitch::new();\n\
+                 // binding: UISwitch.isOn ↔ state.{binding} via value-changed action",
+                label = label,
+                binding = binding,
+            )
+        }
+
+        SemanticPrimitive::List { items_binding, item_name, item_template } => {
+            let item_code = generate_ios(item_template);
+            format!(
+                "// UITableView or UICollectionView over state.{items_binding}\n\
+                 // Each cell renders:\n\
+                 // let {item_name} = item;\n\
+                 {item_code}",
+                items_binding = items_binding,
+                item_name = item_name,
+                item_code = item_code,
+            )
+        }
+    }
+}
+
+fn generate_ios_expr(primitive: &SemanticPrimitive) -> String {
+    match primitive {
+        SemanticPrimitive::Button { label, .. } => format!("btn_{}", sanitize_id(label)),
+        SemanticPrimitive::Text { content, .. } => format!("lbl_{}", sanitize_id(content)),
+        SemanticPrimitive::Container { .. } => "stack".to_string(),
+        SemanticPrimitive::Input { binding, .. } => format!("field_{}", binding),
+        SemanticPrimitive::Image { src, .. } => format!("img_{}", sanitize_id(src)),
+        SemanticPrimitive::Toggle { binding, .. } => format!("toggle_{}", binding),
+        SemanticPrimitive::List { items_binding, .. } => format!("list_{}", items_binding),
+    }
+}
+
+/// Generate Android / Jetpack Compose Kotlin source code for a semantic primitive.
+///
+/// Returns a Kotlin source string. The build system writes this into `.kt` files.
+/// Android's Compose paradigm is declarative so the output is composable function calls.
+pub fn generate_android(primitive: &SemanticPrimitive) -> String {
+    match primitive {
+        SemanticPrimitive::Button { label, appearance, on_press } => {
+            let compose_type = appearance.compose_button_type();
+            let on_click = on_press.as_deref().unwrap_or("{}");
+            let colors = if *appearance == AppearanceConcept::Destructive {
+                ",\n    colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.error)"
+            } else {
+                ""
+            };
+            format!(
+                "{compose_type}(\n\
+                     onClick = {{ {on_click}() }}{colors}\n\
+                 ) {{ Text(\"{label}\") }}",
+                compose_type = compose_type,
+                on_click = on_click,
+                colors = colors,
+                label = label,
+            )
+        }
+
+        SemanticPrimitive::Text { content, concept } => {
+            let style = concept.compose_text_style();
+            format!(
+                "Text(\n\
+                     text = \"{content}\",\n\
+                     style = {style}\n\
+                 )",
+                content = content,
+                style = style,
+            )
+        }
+
+        SemanticPrimitive::Container { children, layout } => {
+            let composable = layout.compose_layout();
+            let child_code: Vec<String> =
+                children.iter().map(|c| format!("    {}", generate_android(c))).collect();
+            format!(
+                "{composable} {{\n{children}\n}}",
+                composable = composable,
+                children = child_code.join("\n"),
+            )
+        }
+
+        SemanticPrimitive::Input { binding, hint, appearance: _ } => {
+            let label = hint.as_deref().unwrap_or(binding.as_str());
+            format!(
+                "TextField(\n\
+                     value = {binding},\n\
+                     onValueChange = {{ {binding} = it }},\n\
+                     label = {{ Text(\"{label}\") }}\n\
+                 )",
+                binding = binding,
+                label = label,
+            )
+        }
+
+        SemanticPrimitive::Image { src, alt } => {
+            format!(
+                "AsyncImage(\n\
+                     model = \"{src}\",\n\
+                     contentDescription = \"{alt}\",\n\
+                     modifier = Modifier.fillMaxWidth()\n\
+                 )",
+                src = src,
+                alt = alt,
+            )
+        }
+
+        SemanticPrimitive::Toggle { binding, label } => {
+            format!(
+                "Row(verticalAlignment = Alignment.CenterVertically) {{\n\
+                     Text(\"{label}\")\n\
+                     Switch(\n\
+                         checked = {binding},\n\
+                         onCheckedChange = {{ {binding} = it }}\n\
+                     )\n\
+                 }}",
+                label = label,
+                binding = binding,
+            )
+        }
+
+        SemanticPrimitive::List { items_binding, item_name, item_template } => {
+            let item_code = generate_android(item_template);
+            format!(
+                "LazyColumn {{\n\
+                     items({items_binding}) {{ {item_name} ->\n\
+                         {item_code}\n\
+                     }}\n\
+                 }}",
+                items_binding = items_binding,
+                item_name = item_name,
+                item_code = item_code,
+            )
+        }
+    }
+}
+
+/// Generate Windows / WinUI 3 Rust source code for a semantic primitive.
+///
+/// Output uses `windows-rs` crate API calls. Compiled for `x86_64-pc-windows-msvc`.
+pub fn generate_windows(primitive: &SemanticPrimitive) -> String {
+    match primitive {
+        SemanticPrimitive::Button { label, appearance, on_press } => {
+            let style = appearance.winui_button_style();
+            let handler = match on_press {
+                Some(h) => format!(
+                    "btn.Click(TypedEventHandler::new(move |_sender, _args| {{ {h}(); Ok(()) }}))?;",
+                    h = h
+                ),
+                None => "// no click handler".to_string(),
+            };
+            let background = if *appearance == AppearanceConcept::Destructive {
+                "\n// btn.SetBackground(DangerBrush);  // applied via ResourceDictionary"
+            } else {
+                ""
+            };
+            format!(
+                "let btn: Button = Button::new()?;\n\
+                 btn.SetContent(IInspectable::try_from(\"{label}\")?)?;\n\
+                 // style: {style}\n\
+                 {handler}{background}",
+                label = label,
+                style = style,
+                handler = handler,
+                background = background,
+            )
+        }
+
+        SemanticPrimitive::Text { content, concept } => {
+            let style = match concept {
+                TextConcept::Heading { level: 1 } => "HeaderTextBlockStyle",
+                TextConcept::Heading { level: 2 } => "SubheaderTextBlockStyle",
+                TextConcept::Heading { .. } => "TitleTextBlockStyle",
+                TextConcept::Body => "BodyTextBlockStyle",
+                TextConcept::Caption => "CaptionTextBlockStyle",
+                TextConcept::Label => "BodyTextBlockStyle",
+                TextConcept::Code => "BaseMonospacedTextBlockStyle",
+            };
+            format!(
+                "let txt: TextBlock = TextBlock::new()?;\n\
+                 txt.SetText(h!(\"{content}\"))?;\n\
+                 // style: {style}",
+                content = content,
+                style = style,
+            )
+        }
+
+        SemanticPrimitive::Container { children, layout } => {
+            let panel = layout.winui_panel();
+            let orientation = match layout {
+                LayoutConcept::Row => "\npanel.SetOrientation(Orientation::Horizontal)?;",
+                _ => "",
+            };
+            let child_code: Vec<String> = children
+                .iter()
+                .map(|c| format!("panel.Children()?.Append(&{})?;", generate_windows_expr(c)))
+                .collect();
+            format!(
+                "// panel type: {panel}\n\
+                 let panel: StackPanel = StackPanel::new()?;{orientation}\n\
+                 {children}",
+                panel = panel,
+                orientation = orientation,
+                children = child_code.join("\n"),
+            )
+        }
+
+        SemanticPrimitive::Input { binding, hint, appearance: _ } => {
+            let placeholder = hint.as_deref().unwrap_or("");
+            format!(
+                "let field: TextBox = TextBox::new()?;\n\
+                 field.SetPlaceholderText(h!(\"{placeholder}\"))?;\n\
+                 // binding: TextChanged → state.{binding}",
+                placeholder = placeholder,
+                binding = binding,
+            )
+        }
+
+        SemanticPrimitive::Image { src, alt } => {
+            format!(
+                "let img: Image = Image::new()?;\n\
+                 // TODO: load BitmapImage from: {src}\n\
+                 img.SetAccessibilityName(h!(\"{alt}\"))?;",
+                src = src,
+                alt = alt,
+            )
+        }
+
+        SemanticPrimitive::Toggle { binding, label } => {
+            format!(
+                "let toggle: ToggleSwitch = ToggleSwitch::new()?;\n\
+                 toggle.SetHeader(IInspectable::try_from(\"{label}\")?)?;\n\
+                 // binding: Toggled event → state.{binding}",
+                label = label,
+                binding = binding,
+            )
+        }
+
+        SemanticPrimitive::List { items_binding, item_name, item_template } => {
+            let item_code = generate_windows(item_template);
+            format!(
+                "let list_view: ListView = ListView::new()?;\n\
+                 // TODO: bind ItemsSource to state.{items_binding}\n\
+                 // Item template (per {item_name}):\n\
+                 // {item_code}",
+                items_binding = items_binding,
+                item_name = item_name,
+                item_code = item_code,
+            )
+        }
+    }
+}
+
+fn generate_windows_expr(primitive: &SemanticPrimitive) -> String {
+    match primitive {
+        SemanticPrimitive::Button { label, .. } => format!("btn_{}", sanitize_id(label)),
+        SemanticPrimitive::Text { content, .. } => format!("txt_{}", sanitize_id(content)),
+        SemanticPrimitive::Container { .. } => "panel".to_string(),
+        SemanticPrimitive::Input { binding, .. } => format!("field_{}", binding),
+        SemanticPrimitive::Image { src, .. } => format!("img_{}", sanitize_id(src)),
+        SemanticPrimitive::Toggle { binding, .. } => format!("toggle_{}", binding),
+        SemanticPrimitive::List { items_binding, .. } => format!("list_{}", items_binding),
+    }
+}
+
+/// Generate Linux / GTK 4 Rust source code for a semantic primitive.
+///
+/// Output uses `gtk4-rs` crate API calls. Compiled for Linux targets.
+pub fn generate_linux(primitive: &SemanticPrimitive) -> String {
+    match primitive {
+        SemanticPrimitive::Button { label, appearance, on_press } => {
+            let css_class = appearance.gtk_css_class();
+            let handler = match on_press {
+                Some(h) => format!("btn.connect_clicked(move |_| {{ {h}(); }});", h = h),
+                None => "// no click handler".to_string(),
+            };
+            format!(
+                "let btn = gtk4::Button::with_label(\"{label}\");\n\
+                 btn.add_css_class(\"{css_class}\");\n\
+                 {handler}",
+                label = label,
+                css_class = css_class,
+                handler = handler,
+            )
+        }
+
+        SemanticPrimitive::Text { content, concept } => {
+            let css = match concept {
+                TextConcept::Heading { level: 1 } => "title-1",
+                TextConcept::Heading { level: 2 } => "title-2",
+                TextConcept::Heading { level: 3 } => "title-3",
+                TextConcept::Heading { .. } => "title-4",
+                TextConcept::Body => "body",
+                TextConcept::Caption => "caption-heading",
+                TextConcept::Label => "label",
+                TextConcept::Code => "monospace",
+            };
+            format!(
+                "let lbl = gtk4::Label::new(Some(\"{content}\"));\n\
+                 lbl.add_css_class(\"{css}\");\n\
+                 lbl.set_wrap(true);",
+                content = content,
+                css = css,
+            )
+        }
+
+        SemanticPrimitive::Container { children, layout } => {
+            let (widget, orientation) = match layout {
+                LayoutConcept::Stack => ("gtk4::Box", "gtk4::Orientation::Vertical"),
+                LayoutConcept::Row => ("gtk4::Box", "gtk4::Orientation::Horizontal"),
+                LayoutConcept::Grid => ("gtk4::Grid", "gtk4::Orientation::Vertical"),
+                LayoutConcept::Overlay => ("gtk4::Overlay", "gtk4::Orientation::Vertical"),
+                LayoutConcept::Scroll => ("gtk4::ScrolledWindow", "gtk4::Orientation::Vertical"),
+            };
+            let child_code: Vec<String> = children
+                .iter()
+                .map(|c| format!("    container.append(&{});", generate_linux_expr(c)))
+                .collect();
+            format!(
+                "let container = {widget}::new();\n\
+                 // orientation: {orientation}\n\
+                 {children}",
+                widget = widget,
+                orientation = orientation,
+                children = child_code.join("\n"),
+            )
+        }
+
+        SemanticPrimitive::Input { binding, hint, appearance: _ } => {
+            let placeholder = hint.as_deref().unwrap_or("");
+            format!(
+                "let entry = gtk4::Entry::new();\n\
+                 entry.set_placeholder_text(Some(\"{placeholder}\"));\n\
+                 // binding: entry.connect_changed → state.{binding}",
+                placeholder = placeholder,
+                binding = binding,
+            )
+        }
+
+        SemanticPrimitive::Image { src, alt } => {
+            format!(
+                "let img = gtk4::Image::from_file(\"{src}\");\n\
+                 img.set_tooltip_text(Some(\"{alt}\"));",
+                src = src,
+                alt = alt,
+            )
+        }
+
+        SemanticPrimitive::Toggle { binding, label } => {
+            format!(
+                "let switch_row = gtk4::Box::new(gtk4::Orientation::Horizontal, 8);\n\
+                 let toggle_label = gtk4::Label::new(Some(\"{label}\"));\n\
+                 let toggle = gtk4::Switch::new();\n\
+                 switch_row.append(&toggle_label);\n\
+                 switch_row.append(&toggle);\n\
+                 // binding: toggle.connect_state_set → state.{binding}",
+                label = label,
+                binding = binding,
+            )
+        }
+
+        SemanticPrimitive::List { items_binding, item_name, item_template } => {
+            let item_code = generate_linux(item_template);
+            format!(
+                "let list_box = gtk4::ListBox::new();\n\
+                 // TODO: bind to state.{items_binding}\n\
+                 // Item template (per {item_name}):\n\
+                 // {item_code}",
+                items_binding = items_binding,
+                item_name = item_name,
+                item_code = item_code,
+            )
+        }
+    }
+}
+
+fn generate_linux_expr(primitive: &SemanticPrimitive) -> String {
+    match primitive {
+        SemanticPrimitive::Button { label, .. } => format!("btn_{}", sanitize_id(label)),
+        SemanticPrimitive::Text { content, .. } => format!("lbl_{}", sanitize_id(content)),
+        SemanticPrimitive::Container { .. } => "container".to_string(),
+        SemanticPrimitive::Input { binding, .. } => format!("entry_{}", binding),
+        SemanticPrimitive::Image { src, .. } => format!("img_{}", sanitize_id(src)),
+        SemanticPrimitive::Toggle { binding, .. } => format!("toggle_{}", binding),
+        SemanticPrimitive::List { items_binding, .. } => format!("list_{}", items_binding),
+    }
+}
+
+/// Generate Web / WASM Rust source code for a semantic primitive.
+///
+/// Output is Rust code using `web-sys` for direct DOM manipulation.
+/// This compiles to `.wasm` — it is NOT JavaScript string generation.
+///
+/// The only target that generates HTML strings is `generate_server_html()`.
+pub fn generate_web_wasm(primitive: &SemanticPrimitive) -> String {
+    match primitive {
+        SemanticPrimitive::Button { label, appearance, on_press } => {
+            let app_str = appearance.css_class();
+            let handler = match on_press {
+                Some(h) => format!(
+                    "let closure = Closure::wrap(Box::new(move || {{ {h}(); }}) as Box<dyn Fn()>);\n\
+                     btn.add_event_listener_with_callback(\"click\", closure.as_ref().unchecked_ref())\n\
+                         .map_err(|e| format!(\"event listener error: {{:?}}\", e))?;\n\
+                     closure.forget();",
+                    h = h
+                ),
+                None => "// no click handler".to_string(),
+            };
+            format!(
+                "let btn = document.create_element(\"button\")\n\
+                     .map_err(|e| format!(\"create_element error: {{:?}}\", e))?\n\
+                     .dyn_into::<web_sys::HtmlButtonElement>()\n\
+                     .map_err(|e| format!(\"dyn_into error: {{:?}}\", e))?;\n\
+                 btn.set_inner_text(\"{label}\");\n\
+                 btn.set_attribute(\"data-appearance\", \"{app_str}\")\n\
+                     .map_err(|e| format!(\"set_attribute error: {{:?}}\", e))?;\n\
+                 btn.class_list().add_1(\"btn-{app_str}\")\n\
+                     .map_err(|e| format!(\"class_list error: {{:?}}\", e))?;\n\
+                 {handler}",
+                label = label,
+                app_str = app_str,
+                handler = handler,
+            )
+        }
+
+        SemanticPrimitive::Text { content, concept } => {
+            let tag = concept.html_tag();
+            format!(
+                "let txt = document.create_element(\"{tag}\")\n\
+                     .map_err(|e| format!(\"create_element error: {{:?}}\", e))?;\n\
+                 txt.set_inner_html(\"{content}\");",
+                tag = tag,
+                content = html_escape_codegen(content),
+            )
+        }
+
+        SemanticPrimitive::Container { children, layout } => {
+            let flex_dir = layout.css_flex_direction();
+            let overflow = if matches!(layout, LayoutConcept::Scroll) {
+                "\"auto\""
+            } else {
+                "\"visible\""
+            };
+            let child_code: Vec<String> = children
+                .iter()
+                .map(|c| {
+                    format!(
+                        "container.append_child(&web_sys::Node::from({}))\n\
+                             .map_err(|e| format!(\"append_child error: {{:?}}\", e))?;",
+                        generate_web_wasm_expr(c)
+                    )
+                })
+                .collect();
+            format!(
+                "let container = document.create_element(\"div\")\n\
+                     .map_err(|e| format!(\"create_element error: {{:?}}\", e))?\n\
+                     .dyn_into::<web_sys::HtmlElement>()\n\
+                     .map_err(|e| format!(\"dyn_into error: {{:?}}\", e))?;\n\
+                 container.style().set_property(\"display\", \"flex\")\n\
+                     .map_err(|e| format!(\"style error: {{:?}}\", e))?;\n\
+                 container.style().set_property(\"flex-direction\", \"{flex_dir}\")\n\
+                     .map_err(|e| format!(\"style error: {{:?}}\", e))?;\n\
+                 container.style().set_property(\"overflow-y\", {overflow})\n\
+                     .map_err(|e| format!(\"style error: {{:?}}\", e))?;\n\
+                 {children}",
+                flex_dir = flex_dir,
+                overflow = overflow,
+                children = child_code.join("\n"),
+            )
+        }
+
+        SemanticPrimitive::Input { binding, hint, appearance: _ } => {
+            let placeholder = hint.as_deref().unwrap_or("");
+            format!(
+                "let input = document.create_element(\"input\")\n\
+                     .map_err(|e| format!(\"create_element error: {{:?}}\", e))?\n\
+                     .dyn_into::<web_sys::HtmlInputElement>()\n\
+                     .map_err(|e| format!(\"dyn_into error: {{:?}}\", e))?;\n\
+                 input.set_attribute(\"type\", \"text\")\n\
+                     .map_err(|e| format!(\"set_attribute error: {{:?}}\", e))?;\n\
+                 input.set_placeholder(\"{placeholder}\");\n\
+                 // binding: oninput closure → state.{binding}",
+                placeholder = placeholder,
+                binding = binding,
+            )
+        }
+
+        SemanticPrimitive::Image { src, alt } => {
+            format!(
+                "let img = document.create_element(\"img\")\n\
+                     .map_err(|e| format!(\"create_element error: {{:?}}\", e))?\n\
+                     .dyn_into::<web_sys::HtmlImageElement>()\n\
+                     .map_err(|e| format!(\"dyn_into error: {{:?}}\", e))?;\n\
+                 img.set_src(\"{src}\");\n\
+                 img.set_alt(\"{alt}\");",
+                src = src,
+                alt = alt,
+            )
+        }
+
+        SemanticPrimitive::Toggle { binding, label } => {
+            format!(
+                "let label_el = document.create_element(\"label\")\n\
+                     .map_err(|e| format!(\"create_element error: {{:?}}\", e))?;\n\
+                 label_el.set_inner_html(\"{label}\");\n\
+                 let checkbox = document.create_element(\"input\")\n\
+                     .map_err(|e| format!(\"create_element error: {{:?}}\", e))?\n\
+                     .dyn_into::<web_sys::HtmlInputElement>()\n\
+                     .map_err(|e| format!(\"dyn_into error: {{:?}}\", e))?;\n\
+                 checkbox.set_attribute(\"type\", \"checkbox\")\n\
+                     .map_err(|e| format!(\"set_attribute error: {{:?}}\", e))?;\n\
+                 // binding: onchange closure → state.{binding}",
+                label = label,
+                binding = binding,
+            )
+        }
+
+        SemanticPrimitive::List { items_binding, item_name, item_template } => {
+            let item_code = generate_web_wasm(item_template);
+            format!(
+                "let list_el = document.create_element(\"ul\")\n\
+                     .map_err(|e| format!(\"create_element error: {{:?}}\", e))?;\n\
+                 // TODO: iterate state.{items_binding}, for each {item_name}:\n\
+                 //   let li = document.create_element(\"li\")?;\n\
+                 //   {item_code}\n\
+                 //   list_el.append_child(&li)?;",
+                items_binding = items_binding,
+                item_name = item_name,
+                item_code = item_code.replace('\n', "\n//   "),
+            )
+        }
+    }
+}
+
+fn generate_web_wasm_expr(primitive: &SemanticPrimitive) -> String {
+    match primitive {
+        SemanticPrimitive::Button { label, .. } => format!("btn_{}", sanitize_id(label)),
+        SemanticPrimitive::Text { content, .. } => format!("txt_{}", sanitize_id(content)),
+        SemanticPrimitive::Container { .. } => "container".to_string(),
+        SemanticPrimitive::Input { binding, .. } => format!("input_{}", binding),
+        SemanticPrimitive::Image { src, .. } => format!("img_{}", sanitize_id(src)),
+        SemanticPrimitive::Toggle { binding, .. } => format!("checkbox_{}", binding),
+        SemanticPrimitive::List { items_binding, .. } => format!("list_{}", items_binding),
+    }
+}
+
+/// Generate server-side HTML string for a semantic primitive.
+///
+/// This is the ONLY target that intentionally generates HTML strings.
+/// Used by `ServerBackend` / `generate_server_rust()` for SSR.
+/// The HTML includes semantic `data-appearance` and ARIA attributes so the
+/// client can hydrate correctly.
+pub fn generate_server_html(primitive: &SemanticPrimitive) -> String {
+    match primitive {
+        SemanticPrimitive::Button { label, appearance, .. } => {
+            let app = appearance.css_class();
+            format!(
+                r#"<button class="btn btn-{app}" data-appearance="{app}">{label}</button>"#,
+                app = app,
+                label = html_escape_codegen(label),
+            )
+        }
+
+        SemanticPrimitive::Text { content, concept } => {
+            let tag = concept.html_tag();
+            let class = match concept {
+                TextConcept::Heading { .. } => format!(" class=\"heading\""),
+                TextConcept::Body => format!(" class=\"body-text\""),
+                TextConcept::Caption => format!(" class=\"caption\""),
+                TextConcept::Label => format!(" class=\"label\""),
+                TextConcept::Code => format!(" class=\"code\""),
+            };
+            format!(
+                "<{tag}{class}>{content}</{tag}>",
+                tag = tag,
+                class = class,
+                content = html_escape_codegen(content),
+            )
+        }
+
+        SemanticPrimitive::Container { children, layout } => {
+            let flex_dir = layout.css_flex_direction();
+            let child_html: Vec<String> =
+                children.iter().map(generate_server_html).collect();
+            format!(
+                r#"<div class="container" style="display:flex;flex-direction:{flex_dir}">{children}</div>"#,
+                flex_dir = flex_dir,
+                children = child_html.join(""),
+            )
+        }
+
+        SemanticPrimitive::Input { binding, hint, appearance } => {
+            let placeholder = hint.as_deref().unwrap_or("");
+            let app = appearance.css_class();
+            format!(
+                r#"<input class="input input-{app}" data-binding="{binding}" placeholder="{placeholder}" />"#,
+                app = app,
+                binding = binding,
+                placeholder = html_escape_codegen(placeholder),
+            )
+        }
+
+        SemanticPrimitive::Image { src, alt } => {
+            format!(
+                r#"<img src="{src}" alt="{alt}" />"#,
+                src = html_escape_codegen(src),
+                alt = html_escape_codegen(alt),
+            )
+        }
+
+        SemanticPrimitive::Toggle { binding, label } => {
+            format!(
+                r#"<label class="toggle-label"><input type="checkbox" data-binding="{binding}" />{label}</label>"#,
+                binding = binding,
+                label = html_escape_codegen(label),
+            )
+        }
+
+        SemanticPrimitive::List { items_binding, item_name, item_template } => {
+            // At SSR time the list is empty — the client hydrates with real data.
+            let placeholder_item = generate_server_html(item_template);
+            format!(
+                r#"<ul class="list" data-items-binding="{items_binding}" data-item-name="{item_name}" data-el-hydrate="list"><!-- {placeholder_item} --></ul>"#,
+                items_binding = items_binding,
+                item_name = item_name,
+                placeholder_item = placeholder_item,
+            )
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Helpers shared across codegen functions
+// ---------------------------------------------------------------------------
+
+/// Minimal HTML escape for content emitted into generated source strings.
+fn html_escape_codegen(s: &str) -> String {
+    s.replace('&', "&amp;")
+        .replace('<', "&lt;")
+        .replace('>', "&gt;")
+        .replace('"', "&quot;")
+}
+
+/// Sanitize a display string into a valid Rust identifier fragment.
+fn sanitize_id(s: &str) -> String {
+    s.chars()
+        .map(|c| if c.is_alphanumeric() { c } else { '_' })
+        .collect::<String>()
+        .to_lowercase()
+}
diff --git a/crates/el-ui-compiler/src/error.rs b/vessels/el-ui-compiler/src/error.rs
similarity index 100%
rename from crates/el-ui-compiler/src/error.rs
rename to vessels/el-ui-compiler/src/error.rs
diff --git a/crates/el-ui-compiler/src/lexer.rs b/vessels/el-ui-compiler/src/lexer.rs
similarity index 100%
rename from crates/el-ui-compiler/src/lexer.rs
rename to vessels/el-ui-compiler/src/lexer.rs
diff --git a/crates/el-ui-compiler/src/lib.rs b/vessels/el-ui-compiler/src/lib.rs
similarity index 99%
rename from crates/el-ui-compiler/src/lib.rs
rename to vessels/el-ui-compiler/src/lib.rs
index 6a05628..a932372 100644
--- a/crates/el-ui-compiler/src/lib.rs
+++ b/vessels/el-ui-compiler/src/lib.rs
@@ -11,6 +11,7 @@ pub mod codegen;
 pub mod error;
 pub mod lexer;
 pub mod parser;
+pub mod semantic;
 
 pub use ast::{Attr, Component, Method, PropDef, StateDef, Template, TemplateNode};
 
diff --git a/vessels/el-ui-compiler/src/main.el b/vessels/el-ui-compiler/src/main.el
new file mode 100644
index 0000000..f4d4fef
--- /dev/null
+++ b/vessels/el-ui-compiler/src/main.el
@@ -0,0 +1,142 @@
+// el-ui-compiler — El→browser-target component compiler (STUB).
+//
+// The Rust crate transforms `.el` component files into JavaScript using a
+// real lexer/parser/codegen pipeline backed by the el-ui runtime
+// (`el-ui.js`). This El surface is a placeholder.
+//
+// RUNTIME GAP — load-bearing:
+//   `elc` (the bootstrap El compiler) currently emits C only. There is no
+//   JavaScript or WebAssembly backend yet, so the El surface cannot
+//   actually compile a component to JS today.
+//
+//   What this vessel provides:
+//     - The shape of the public API (Compiler with runtime_path,
+//       compile_component, compile_app).
+//     - A `CompileResult` record consumers can branch on.
+//     - Stub bodies that return a deterministic "not yet implemented"
+//       module string so downstream tooling can integration-test against
+//       a stable contract.
+//
+//   When elc gains a JS/Wasm backend, swap the bodies of `lex`, `parse`,
+//   `semantic_check`, and `codegen` for real implementations — the public
+//   surface should not need to change.
+
+// ── Errors ──────────────────────────────────────────────────────────────────
+
+fn err_lex()             -> String { "elc.lex" }
+fn err_parse()           -> String { "elc.parse" }
+fn err_semantic()        -> String { "elc.semantic" }
+fn err_codegen()         -> String { "elc.codegen" }
+fn err_backend_missing() -> String { "elc.backend_missing" }
+
+// ── Compile result ──────────────────────────────────────────────────────────
+//
+// Modeled as JSON since the runtime's product types and field accessors
+// don't yet support the Bool/String mix we want here cleanly.
+
+fn result_ok(code: String) -> String {
+    "{\"ok\":true,\"code\":" + json_quote(code) + ",\"error\":\"\"}"
+}
+
+fn result_err(error: String) -> String {
+    "{\"ok\":false,\"code\":\"\",\"error\":\"" + error + "\"}"
+}
+
+// Minimal JSON string quoter (escape backslash + double-quote only).
+// elc still doesn't expose a json_string_quote builtin.
+fn json_quote(s: String) -> String {
+    let escaped: String = str_replace(s, "\\", "\\\\")
+    let escaped = str_replace(escaped, "\"", "\\\"")
+    "\"" + escaped + "\""
+}
+
+fn result_ok_p(result_json: String) -> Bool {
+    json_get_bool(result_json, "ok")
+}
+
+// ── Compiler config ─────────────────────────────────────────────────────────
+
+fn compiler_default_runtime_path() -> String { "./el-ui.js" }
+fn compiler_default_target()       -> String { "js" }
+
+fn compiler_new() -> String {
+    "{\"runtime_path\":\"./el-ui.js\",\"target\":\"js\"}"
+}
+
+fn compiler_with_runtime(c_json: String, path: String) -> String {
+    json_set(c_json, "runtime_path", json_quote(path))
+}
+
+fn compiler_with_target(c_json: String, target: String) -> String {
+    json_set(c_json, "target", json_quote(target))
+}
+
+fn compiler_runtime_path(c_json: String) -> String {
+    json_get_string(c_json, "runtime_path")
+}
+
+fn compiler_target(c_json: String) -> String {
+    json_get_string(c_json, "target")
+}
+
+// ── Pipeline stages (stubs) ─────────────────────────────────────────────────
+//
+// Real implementations live in the Rust crate (lexer.rs, parser.rs,
+// semantic.rs, codegen.rs). These El stubs only validate inputs and
+// produce a marker payload so callers can wire the contract.
+
+fn lex(source: String) -> String {
+    if str_eq(source, "") { return "" }
+    "[]"   // would be tokens JSON
+}
+
+fn parse(tokens_json: String) -> String {
+    if str_eq(tokens_json, "") { return "" }
+    "[]"   // would be Component AST JSON
+}
+
+fn semantic_check(ast_json: String) -> String {
+    ast_json   // pass-through stub
+}
+
+fn codegen(c_json: String, ast_json: String) -> String {
+    let runtime: String = compiler_runtime_path(c_json)
+    let preamble: String = "// AUTOGENERATED by el-ui-compiler (STUB)\n"
+    let import_line: String = "import { register, h } from \"" + runtime + "\";\n"
+    let body: String = "throw new Error(\"" + err_backend_missing()
+        + ": el-ui-compiler has no JS backend yet; emit C with elc instead\");\n"
+    preamble + import_line + body
+}
+
+// ── Public entry points ─────────────────────────────────────────────────────
+
+fn compile_component(c_json: String, source: String) -> String {
+    let tokens: String = lex(source)
+    if str_eq(tokens, "") { return result_err(err_lex()) }
+    let ast: String = parse(tokens)
+    if str_eq(ast, "") { return result_err(err_parse()) }
+    let checked: String = semantic_check(ast)
+    if str_eq(checked, "") { return result_err(err_semantic()) }
+    let js: String = codegen(c_json, checked)
+    result_ok(js)
+}
+
+// `entry_source` is the app entry; `components_json` is a JSON object map of
+// name -> source text. We compile each component first, then the entry.
+fn compile_app(c_json: String, entry_source: String, components_json: String) -> String {
+    // RUNTIME GAP: no json_object_keys() yet, so we cannot iterate the map
+    // generically here. Real implementation will iterate and short-circuit
+    // on first compile error. For the stub we just compile the entry.
+    compile_component(c_json, entry_source)
+}
+
+// ── Entry — smoke test ──────────────────────────────────────────────────────
+
+let c: String = compiler_new()
+let c = compiler_with_runtime(c, "./el-ui.js")
+let r: String = compile_component(c, "component Hello { template { <p>hi</p> } }")
+if result_ok_p(r) {
+    println("[el-ui-compiler] STUB compiled (target=" + compiler_target(c) + ")")
+} else {
+    println("[el-ui-compiler] error: " + json_get_string(r, "error"))
+}
diff --git a/crates/el-ui-compiler/src/main.rs b/vessels/el-ui-compiler/src/main.rs
similarity index 100%
rename from crates/el-ui-compiler/src/main.rs
rename to vessels/el-ui-compiler/src/main.rs
diff --git a/crates/el-ui-compiler/src/parser.rs b/vessels/el-ui-compiler/src/parser.rs
similarity index 100%
rename from crates/el-ui-compiler/src/parser.rs
rename to vessels/el-ui-compiler/src/parser.rs
diff --git a/vessels/el-ui-compiler/src/semantic.rs b/vessels/el-ui-compiler/src/semantic.rs
new file mode 100644
index 0000000..093d60e
--- /dev/null
+++ b/vessels/el-ui-compiler/src/semantic.rs
@@ -0,0 +1,523 @@
+//! Semantic primitive layer — EBD-driven appearance and layout concepts.
+//!
+//! # Design rationale
+//!
+//! Traditional UI frameworks describe *appearance*: a red button with rounded corners.
+//! El UI describes *concepts*: a destructive action trigger. The platform then maps
+//! that concept to its native visual convention — red on iOS, a warning style on
+//! macOS, an outlined filled button on Android, etc.
+//!
+//! This is the EBD principle applied to UI: the component expresses *what something is*,
+//! the platform backend expresses *how it looks*.
+//!
+//! # The semantic → PlatformNode pipeline
+//!
+//! ```text
+//! .el template
+//!     ↓
+//! SemanticPrimitive (this module)
+//!     ↓
+//! platform codegen (codegen.rs — per-platform dispatch)
+//!     ↓
+//! PlatformNode (el-platform IR)
+//!     ↓
+//! platform backend (el-platform — native API calls)
+//! ```
+
+// Semantic types drive codegen decisions. They do not directly construct
+// PlatformNodes at compile time — the generated *source code* strings reference
+// PlatformNode from the el-platform crate, which is a separate runtime crate.
+// The compiler emits Rust source that will reference el_platform::PlatformNode.
+
+// ---------------------------------------------------------------------------
+// Appearance concepts
+// ---------------------------------------------------------------------------
+
+/// EBD appearance concept — WHAT a control is, not HOW it looks.
+///
+/// Each platform maps these to its visual conventions:
+/// - `Action`      → primary button style (blue on Apple, filled on Material)
+/// - `Destructive` → warning/danger style (red tint on Apple, error colour on Material)
+/// - `Secondary`   → subdued style (grey on Apple, outlined on Material)
+/// - `Navigation`  → used for link-like / back-navigation elements
+/// - `Informational` → read-only display elements
+/// - `Structural`  → layout containers with no interactive meaning
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum AppearanceConcept {
+    /// Primary action trigger — the most prominent interactive element.
+    Action,
+    /// Dangerous or irreversible action (delete, reset, etc.).
+    Destructive,
+    /// Less prominent action — secondary to the main action on screen.
+    Secondary,
+    /// Navigational element — links, back buttons, tab items.
+    Navigation,
+    /// Displays information — labels, status indicators, badges.
+    Informational,
+    /// Layout or structural container — no interactive semantics.
+    Structural,
+}
+
+impl AppearanceConcept {
+    /// Canonical CSS class suffix for the server/web targets.
+    pub fn css_class(&self) -> &'static str {
+        match self {
+            Self::Action => "action",
+            Self::Destructive => "destructive",
+            Self::Secondary => "secondary",
+            Self::Navigation => "navigation",
+            Self::Informational => "informational",
+            Self::Structural => "structural",
+        }
+    }
+
+    /// AppKit bezel style constant for the macOS target.
+    pub fn appkit_bezel_style(&self) -> &'static str {
+        match self {
+            Self::Action => "NSBezelStyle::rounded()",
+            Self::Destructive => "NSBezelStyle::rounded()", // red tint applied via theme token
+            Self::Secondary => "NSBezelStyle::smallSquare()",
+            Self::Navigation => "NSBezelStyle::recessed()",
+            Self::Informational => "NSBezelStyle::inline()",
+            Self::Structural => "NSBezelStyle::rounded()",
+        }
+    }
+
+    /// UIKit button configuration for the iOS target.
+    pub fn uikit_button_config(&self) -> &'static str {
+        match self {
+            Self::Action => "UIButton.Configuration.filled()",
+            Self::Destructive => "UIButton.Configuration.filled()", // tintColor = .systemRed
+            Self::Secondary => "UIButton.Configuration.gray()",
+            Self::Navigation => "UIButton.Configuration.plain()",
+            Self::Informational => "UIButton.Configuration.plain()",
+            Self::Structural => "UIButton.Configuration.plain()",
+        }
+    }
+
+    /// Jetpack Compose button composable for the Android target.
+    pub fn compose_button_type(&self) -> &'static str {
+        match self {
+            Self::Action => "Button",
+            Self::Destructive => "Button", // containerColor = MaterialTheme.colorScheme.error
+            Self::Secondary => "OutlinedButton",
+            Self::Navigation => "TextButton",
+            Self::Informational => "TextButton",
+            Self::Structural => "TextButton",
+        }
+    }
+
+    /// WinUI control style for the Windows target.
+    pub fn winui_button_style(&self) -> &'static str {
+        match self {
+            Self::Action => "AccentButtonStyle",
+            Self::Destructive => "AccentButtonStyle",  // Background = DangerBrush via theme
+            Self::Secondary => "DefaultButtonStyle",
+            Self::Navigation => "NavigationBackButtonNormalStyle",
+            Self::Informational => "DefaultButtonStyle",
+            Self::Structural => "DefaultButtonStyle",
+        }
+    }
+
+    /// GTK CSS class for the Linux target.
+    pub fn gtk_css_class(&self) -> &'static str {
+        match self {
+            Self::Action => "suggested-action",
+            Self::Destructive => "destructive-action",
+            Self::Secondary => "flat",
+            Self::Navigation => "flat",
+            Self::Informational => "flat",
+            Self::Structural => "flat",
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Layout concepts
+// ---------------------------------------------------------------------------
+
+/// Layout concept — how children are arranged.
+///
+/// Platform mapping:
+/// - `Stack`   → VStack / UIStackView(vertical) / Column / StackPanel / GtkBox(vertical)
+/// - `Row`     → HStack / UIStackView(horizontal) / Row / StackPanel(horizontal) / GtkBox(horizontal)
+/// - `Grid`    → LazyVGrid / UICollectionView / LazyVerticalGrid / GridView
+/// - `Overlay` → ZStack / UIView layering / Box / Canvas / GtkOverlay
+/// - `Scroll`  → ScrollView / UIScrollView / LazyColumn / ScrollViewer / GtkScrolledWindow
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum LayoutConcept {
+    /// Vertical stack — children arranged top-to-bottom.
+    Stack,
+    /// Horizontal row — children arranged left-to-right.
+    Row,
+    /// Grid — children in a two-dimensional grid.
+    Grid,
+    /// Overlay — children layered on the z-axis.
+    Overlay,
+    /// Scrollable container — overflowing children are scrollable.
+    Scroll,
+}
+
+impl LayoutConcept {
+    /// HTML/CSS flex direction for the web/server targets.
+    pub fn css_flex_direction(&self) -> &'static str {
+        match self {
+            Self::Stack => "column",
+            Self::Row => "row",
+            Self::Grid => "row wrap",  // use CSS grid in practice
+            Self::Overlay => "row",    // position: relative + absolute children
+            Self::Scroll => "column",
+        }
+    }
+
+    /// AppKit stack view orientation.
+    pub fn appkit_orientation(&self) -> &'static str {
+        match self {
+            Self::Stack | Self::Grid | Self::Overlay | Self::Scroll => "NSUserInterfaceLayoutOrientation::vertical",
+            Self::Row => "NSUserInterfaceLayoutOrientation::horizontal",
+        }
+    }
+
+    /// UIKit stack view axis.
+    pub fn uikit_axis(&self) -> &'static str {
+        match self {
+            Self::Stack | Self::Grid | Self::Overlay | Self::Scroll => "NSLayoutConstraint.Axis.vertical",
+            Self::Row => "NSLayoutConstraint.Axis.horizontal",
+        }
+    }
+
+    /// Jetpack Compose layout composable.
+    pub fn compose_layout(&self) -> &'static str {
+        match self {
+            Self::Stack => "Column",
+            Self::Row => "Row",
+            Self::Grid => "LazyVerticalGrid",
+            Self::Overlay => "Box",
+            Self::Scroll => "LazyColumn",
+        }
+    }
+
+    /// WinUI panel type.
+    pub fn winui_panel(&self) -> &'static str {
+        match self {
+            Self::Stack => "Microsoft.UI.Xaml.Controls.StackPanel",
+            Self::Row => "Microsoft.UI.Xaml.Controls.StackPanel",  // Orientation=Horizontal
+            Self::Grid => "Microsoft.UI.Xaml.Controls.Grid",
+            Self::Overlay => "Microsoft.UI.Xaml.Controls.Canvas",
+            Self::Scroll => "Microsoft.UI.Xaml.Controls.ScrollViewer",
+        }
+    }
+
+    /// GTK widget type.
+    pub fn gtk_widget(&self) -> &'static str {
+        match self {
+            Self::Stack => "GtkBox",       // orientation=vertical
+            Self::Row => "GtkBox",         // orientation=horizontal
+            Self::Grid => "GtkGrid",
+            Self::Overlay => "GtkOverlay",
+            Self::Scroll => "GtkScrolledWindow",
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Text role concepts
+// ---------------------------------------------------------------------------
+
+/// Text role concept — the semantic purpose of a piece of text.
+///
+/// Platform mapping:
+/// - `Heading`  → large/bold system font at the appropriate level
+/// - `Body`     → default body text style
+/// - `Caption`  → small secondary text (subtitles, footnotes)
+/// - `Label`    → paired with a control — describes it
+/// - `Code`     → monospaced font, code block style
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum TextConcept {
+    /// Document heading at the given level (1 = most prominent, 6 = least).
+    Heading { level: u8 },
+    /// Default body text.
+    Body,
+    /// Small secondary text — captions, footnotes, helper text.
+    Caption,
+    /// A control label — paired with an input or button.
+    Label,
+    /// Monospaced code text.
+    Code,
+}
+
+impl TextConcept {
+    /// HTML tag for the server/web targets.
+    pub fn html_tag(&self) -> String {
+        match self {
+            Self::Heading { level } => format!("h{}", level.clamp(&1, &6)),
+            Self::Body => "p".to_string(),
+            Self::Caption => "small".to_string(),
+            Self::Label => "label".to_string(),
+            Self::Code => "code".to_string(),
+        }
+    }
+
+    /// AppKit font preset.
+    pub fn appkit_font(&self) -> &'static str {
+        match self {
+            Self::Heading { level: 1 } => "NSFont.systemFont(ofSize: 28, weight: .bold)",
+            Self::Heading { level: 2 } => "NSFont.systemFont(ofSize: 22, weight: .semibold)",
+            Self::Heading { .. } => "NSFont.systemFont(ofSize: 17, weight: .medium)",
+            Self::Body => "NSFont.systemFont(ofSize: 13)",
+            Self::Caption => "NSFont.systemFont(ofSize: 11, weight: .light)",
+            Self::Label => "NSFont.systemFont(ofSize: 13)",
+            Self::Code => "NSFont.monospacedSystemFont(ofSize: 13, weight: .regular)",
+        }
+    }
+
+    /// UIKit font preset.
+    pub fn uikit_font(&self) -> &'static str {
+        match self {
+            Self::Heading { level: 1 } => "UIFont.preferredFont(forTextStyle: .largeTitle)",
+            Self::Heading { level: 2 } => "UIFont.preferredFont(forTextStyle: .title1)",
+            Self::Heading { level: 3 } => "UIFont.preferredFont(forTextStyle: .title2)",
+            Self::Heading { .. } => "UIFont.preferredFont(forTextStyle: .headline)",
+            Self::Body => "UIFont.preferredFont(forTextStyle: .body)",
+            Self::Caption => "UIFont.preferredFont(forTextStyle: .caption1)",
+            Self::Label => "UIFont.preferredFont(forTextStyle: .callout)",
+            Self::Code => "UIFont.monospacedSystemFont(ofSize: 14, weight: .regular)",
+        }
+    }
+
+    /// Material 3 text style for Jetpack Compose.
+    pub fn compose_text_style(&self) -> &'static str {
+        match self {
+            Self::Heading { level: 1 } => "MaterialTheme.typography.headlineLarge",
+            Self::Heading { level: 2 } => "MaterialTheme.typography.headlineMedium",
+            Self::Heading { level: 3 } => "MaterialTheme.typography.headlineSmall",
+            Self::Heading { .. } => "MaterialTheme.typography.titleLarge",
+            Self::Body => "MaterialTheme.typography.bodyLarge",
+            Self::Caption => "MaterialTheme.typography.labelSmall",
+            Self::Label => "MaterialTheme.typography.labelMedium",
+            Self::Code => "MaterialTheme.typography.bodyMedium", // monospace font family
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Semantic primitives
+// ---------------------------------------------------------------------------
+
+/// A semantic UI primitive — CONCEPT, not visual element.
+///
+/// Each variant describes *what* the element is, not *how* it looks.
+/// The platform codegen translates these into native API calls.
+///
+/// These are the building blocks; the platform backends decide the visual
+/// expression. A `Button { appearance: Destructive }` looks different on
+/// macOS (red-tinted rounded button) vs Android (error-coloured filled button)
+/// but expresses the same concept.
+#[derive(Debug, Clone, PartialEq)]
+pub enum SemanticPrimitive {
+    /// An interactive button — triggers an action on press.
+    Button {
+        /// Visible label text.
+        label: String,
+        /// What kind of action this button represents.
+        appearance: AppearanceConcept,
+        /// Handler name from the component's method table, if any.
+        on_press: Option<String>,
+    },
+
+    /// A text display element.
+    Text {
+        /// The content to display.
+        content: String,
+        /// The semantic role of this text.
+        concept: TextConcept,
+    },
+
+    /// A layout container with child primitives.
+    Container {
+        /// Child primitives, in render order.
+        children: Vec<SemanticPrimitive>,
+        /// How children are arranged.
+        layout: LayoutConcept,
+    },
+
+    /// A text input field bound to a state variable.
+    Input {
+        /// State variable name this field is bound to (two-way).
+        binding: String,
+        /// Placeholder / hint text shown when empty.
+        hint: Option<String>,
+        /// Visual role of this input.
+        appearance: AppearanceConcept,
+    },
+
+    /// An image element.
+    Image {
+        /// Source URI or asset name.
+        src: String,
+        /// Accessibility description.
+        alt: String,
+    },
+
+    /// A toggle/checkbox control bound to a boolean state variable.
+    Toggle {
+        /// State variable name (must be Bool).
+        binding: String,
+        /// Label displayed alongside the toggle.
+        label: String,
+    },
+
+    /// A list of homogeneous items, each rendered by the same child primitive.
+    List {
+        /// Items to iterate over — a state variable or expression name.
+        items_binding: String,
+        /// The name given to each item within the child template.
+        item_name: String,
+        /// The primitive template applied to each item.
+        item_template: Box<SemanticPrimitive>,
+    },
+}
+
+impl SemanticPrimitive {
+    /// Convenience constructor for a primary action button.
+    pub fn action_button(label: impl Into<String>, on_press: impl Into<String>) -> Self {
+        Self::Button {
+            label: label.into(),
+            appearance: AppearanceConcept::Action,
+            on_press: Some(on_press.into()),
+        }
+    }
+
+    /// Convenience constructor for a destructive action button.
+    pub fn destructive_button(label: impl Into<String>, on_press: impl Into<String>) -> Self {
+        Self::Button {
+            label: label.into(),
+            appearance: AppearanceConcept::Destructive,
+            on_press: Some(on_press.into()),
+        }
+    }
+
+    /// Convenience constructor for a heading.
+    pub fn heading(content: impl Into<String>, level: u8) -> Self {
+        Self::Text {
+            content: content.into(),
+            concept: TextConcept::Heading { level },
+        }
+    }
+
+    /// Convenience constructor for body text.
+    pub fn body_text(content: impl Into<String>) -> Self {
+        Self::Text {
+            content: content.into(),
+            concept: TextConcept::Body,
+        }
+    }
+
+    /// Convenience constructor for a vertical stack container.
+    pub fn stack(children: Vec<SemanticPrimitive>) -> Self {
+        Self::Container {
+            children,
+            layout: LayoutConcept::Stack,
+        }
+    }
+
+    /// Convenience constructor for a horizontal row container.
+    pub fn row(children: Vec<SemanticPrimitive>) -> Self {
+        Self::Container {
+            children,
+            layout: LayoutConcept::Row,
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Semantic extraction from AST
+// ---------------------------------------------------------------------------
+
+/// Map an HTML tag + appearance attribute from the AST into a `SemanticPrimitive`.
+///
+/// This is the bridge from the parser's `TemplateNode` representation to the
+/// semantic layer. The compiler calls this during its semantic analysis pass.
+///
+/// Appearance is inferred from:
+/// 1. An explicit `appearance="..."` attribute on the element.
+/// 2. The element's tag + class names (heuristic fallback).
+pub fn infer_appearance(tag: &str, class: Option<&str>, explicit: Option<&str>) -> AppearanceConcept {
+    // Explicit attribute wins.
+    if let Some(a) = explicit {
+        return match a {
+            "action" | "primary" => AppearanceConcept::Action,
+            "destructive" | "danger" | "delete" => AppearanceConcept::Destructive,
+            "secondary" | "subdued" => AppearanceConcept::Secondary,
+            "navigation" | "nav" | "link" => AppearanceConcept::Navigation,
+            "informational" | "info" | "display" => AppearanceConcept::Informational,
+            "structural" | "layout" => AppearanceConcept::Structural,
+            _ => AppearanceConcept::Action,
+        };
+    }
+
+    // Infer from class names.
+    if let Some(cls) = class {
+        if cls.contains("danger") || cls.contains("destructive") || cls.contains("delete") {
+            return AppearanceConcept::Destructive;
+        }
+        if cls.contains("secondary") || cls.contains("outline") || cls.contains("ghost") {
+            return AppearanceConcept::Secondary;
+        }
+        if cls.contains("nav") || cls.contains("link") {
+            return AppearanceConcept::Navigation;
+        }
+    }
+
+    // Tag-level heuristic fallback.
+    match tag {
+        "button" => AppearanceConcept::Action,
+        "a" => AppearanceConcept::Navigation,
+        "input" | "textarea" | "select" => AppearanceConcept::Action,
+        "div" | "section" | "main" | "article" | "aside" | "header" | "footer" => {
+            AppearanceConcept::Structural
+        }
+        "span" | "p" | "label" | "small" => AppearanceConcept::Informational,
+        _ => AppearanceConcept::Structural,
+    }
+}
+
+/// Infer a `TextConcept` from an HTML tag name.
+pub fn infer_text_concept(tag: &str) -> TextConcept {
+    match tag {
+        "h1" => TextConcept::Heading { level: 1 },
+        "h2" => TextConcept::Heading { level: 2 },
+        "h3" => TextConcept::Heading { level: 3 },
+        "h4" => TextConcept::Heading { level: 4 },
+        "h5" => TextConcept::Heading { level: 5 },
+        "h6" => TextConcept::Heading { level: 6 },
+        "label" => TextConcept::Label,
+        "small" | "caption" => TextConcept::Caption,
+        "code" | "pre" | "kbd" | "samp" => TextConcept::Code,
+        _ => TextConcept::Body,
+    }
+}
+
+/// Infer a `LayoutConcept` from an HTML tag name and optional class names.
+pub fn infer_layout_concept(tag: &str, class: Option<&str>) -> LayoutConcept {
+    if let Some(cls) = class {
+        if cls.contains("row") || cls.contains("horizontal") || cls.contains("flex-row") {
+            return LayoutConcept::Row;
+        }
+        if cls.contains("grid") {
+            return LayoutConcept::Grid;
+        }
+        if cls.contains("overlay") || cls.contains("stack-z") {
+            return LayoutConcept::Overlay;
+        }
+        if cls.contains("scroll") {
+            return LayoutConcept::Scroll;
+        }
+    }
+
+    match tag {
+        "ul" | "ol" => LayoutConcept::Scroll, // scrollable list
+        "nav" => LayoutConcept::Row,
+        _ => LayoutConcept::Stack, // default: vertical stack
+    }
+}
diff --git a/crates/el-ui-compiler/src/tests.rs b/vessels/el-ui-compiler/src/tests.rs
similarity index 100%
rename from crates/el-ui-compiler/src/tests.rs
rename to vessels/el-ui-compiler/src/tests.rs