diff --git a/crates/openpencil-shell-core/src/codegen.rs b/crates/openpencil-shell-core/src/codegen.rs
index d10543e31..1a0aa7f1e 100644
--- a/crates/openpencil-shell-core/src/codegen.rs
+++ b/crates/openpencil-shell-core/src/codegen.rs
@@ -1,22 +1,36 @@
 //! Code generation — Rust ports of `packages/pen-codegen/src/`.
 //! v1 ships the simplest of the 9 TS generators: `css-variables`,
-//! which emits the design's `Document.var_table` as CSS custom
-//! properties. Future generators (React + Tailwind, HTML, Vue,
-//! Svelte, Flutter, SwiftUI, Compose, React Native) live behind
-//! the same `Codegen` trait so a single dispatcher (eventually a
-//! `op codegen <target>` CLI) can fan out by target enum.
+//! which emits the design's variable table as CSS custom properties.
+//! Future generators (React + Tailwind, HTML, Vue, Svelte, Flutter,
+//! SwiftUI, Compose, React Native) live behind the same `Codegen`
+//! trait so a single dispatcher (eventually a `op codegen <target>`
+//! CLI) can fan out by target enum.
+//!
+//! All generators consume the canonical `jian_ops_schema::PenDocument`
+//! and walk `PenNode` via `op_editor_core::PenNodeExt`. The spine here
+//! holds the `Codegen` trait, the `CssVariables` generator, shared
+//! node-accessor helpers, and the test suite; per-framework markup
+//! generators live in the sibling `codegen_targets` module.
 
-use crate::document::{Document, Node, NodeKind, VariableScalar, VariableValue};
-use crate::Color;
+pub use crate::codegen_targets::{
+    Compose, Flutter, Html, React, ReactNative, Svelte, SwiftUi, Vue,
+};
 
-/// One generator. Implementations are pure (read `Document`, return
-/// `String`); the CLI / panel layer owns file-write side effects.
+use jian_ops_schema::node::PenNode;
+use jian_ops_schema::style::PenFill;
+use jian_ops_schema::variable::{VariableScalar, VariableValue};
+use jian_ops_schema::PenDocument;
+use op_editor_core::pen_node_ext::PenNodeExt;
+
+/// One generator. Implementations are pure (read `PenDocument`,
+/// return `String`); the CLI / panel layer owns file-write side
+/// effects.
 pub trait Codegen {
     fn target_label(&self) -> &'static str;
-    fn generate(&self, doc: &Document) -> String;
+    fn generate(&self, doc: &PenDocument) -> String;
 }
 
-/// CSS custom properties generator. Walks `doc.var_table` and emits
+/// CSS custom properties generator. Walks `doc.variables` and emits
 /// `:root { --name: value; }`. Color variables stay as their hex
 /// string; number/bool/string variables stringify their scalar.
 /// Themed values emit ONE entry per theme combination using a
@@ -28,14 +42,17 @@ impl Codegen for CssVariables {
     fn target_label(&self) -> &'static str {
         "css-variables"
     }
-    fn generate(&self, doc: &Document) -> String {
+    fn generate(&self, doc: &PenDocument) -> String {
         let mut out = String::new();
         out.push_str("/* Generated by OpenPencil — codegen::CssVariables */\n");
+        let Some(variables) = doc.variables.as_ref() else {
+            return out;
+        };
         // Pass 1: scalar (theme-agnostic) variables go under :root.
         let mut root_scalars: Vec<(String, String)> = Vec::new();
-        for v in &doc.var_table.variables {
-            if let VariableValue::Scalar(s) = &v.value {
-                root_scalars.push((v.name.clone(), scalar_to_css(s)));
+        for (name, def) in variables {
+            if let VariableValue::Scalar(s) = &def.value {
+                root_scalars.push((name.clone(), scalar_to_css(s)));
             }
         }
         if !root_scalars.is_empty() {
@@ -50,8 +67,8 @@ impl Codegen for CssVariables {
         // entry from variable A and another from B share one block.
         use std::collections::BTreeMap;
         let mut themed: BTreeMap<Vec<(String, String)>, Vec<(String, String)>> = BTreeMap::new();
-        for v in &doc.var_table.variables {
-            if let VariableValue::Themed(entries) = &v.value {
+        for (name, def) in variables {
+            if let VariableValue::Themed(entries) = &def.value {
                 for e in entries {
                     let key: Vec<(String, String)> = e
                         .theme
@@ -61,7 +78,7 @@ impl Codegen for CssVariables {
                     themed
                         .entry(key)
                         .or_default()
-                        .push((v.name.clone(), scalar_to_css(&e.value)));
+                        .push((name.clone(), scalar_to_css(&e.value)));
                 }
             }
         }
@@ -85,484 +102,244 @@ impl Codegen for CssVariables {
     }
 }
 
-/// HTML + inline-CSS generator. Walks the active page's node tree
-/// and emits `<div>` per Rect/Frame/Group with absolute positioning
-/// and inline style; ellipses get `border-radius: 50%`; text nodes
-/// emit `<span>`. Bare minimum useful — refining to semantic tags
-/// + flex containers is a follow-up.
-pub struct Html;
+// --- Shared node-accessor helpers (canonical-schema flavour) -------
+//
+// shell-core's flat `Node` exposed `bounds` / `fill` / `stroke` /
+// `corner_radius` / `text` / `hidden` directly. The canonical
+// `PenNode` is a 12-variant enum: these helpers give the markup
+// generators the same flat view through `PenNodeExt`.
 
-impl Codegen for Html {
-    fn target_label(&self) -> &'static str {
-        "html"
-    }
-    fn generate(&self, doc: &Document) -> String {
-        let mut out = String::new();
-        out.push_str("<!-- Generated by OpenPencil — codegen::Html -->\n");
-        out.push_str("<!DOCTYPE html>\n<html><head><meta charset=\"utf-8\"></head>\n<body>\n");
-        if let Some(page) = doc.pages.get(doc.active_page_index) {
-            for node in &page.children {
-                emit_node_html(&mut out, node, 1);
-            }
-        }
-        out.push_str("</body></html>\n");
-        out
+/// Top-level node forest the generators walk: the first page's
+/// children when the document is paged, otherwise the bare
+/// `children` fallback.
+pub(crate) fn root_nodes(doc: &PenDocument) -> &[PenNode] {
+    match doc.pages.as_ref().and_then(|p| p.first()) {
+        Some(page) => &page.children,
+        None => &doc.children,
     }
 }
 
-fn emit_node_html(out: &mut String, node: &Node, depth: usize) {
-    if node.hidden {
-        return;
+/// True when the node is explicitly hidden (`visible == false`).
+/// A missing `visible` flag means shown.
+pub(crate) fn node_hidden(node: &PenNode) -> bool {
+    node.base().visible == Some(false)
+}
+
+/// Document-space origin of the node (`base.x` / `base.y`, 0 default).
+pub(crate) fn node_origin(node: &PenNode) -> (f64, f64) {
+    let base = node.base();
+    (base.x.unwrap_or(0.0), base.y.unwrap_or(0.0))
+}
+
+/// Literal pixel size of the node. Keyword / expression sizing is not
+/// a concrete number, so it reads as 0 — same degrade the TS
+/// generators apply for `fit_content` / `$var` widths.
+pub(crate) fn node_size(node: &PenNode) -> (f64, f64) {
+    match node {
+        PenNode::Line(n) => {
+            // A line has no width/height field — derive its box from
+            // the (x,y)→(x2,y2) span so absolute layout still works.
+            let base = node.base();
+            let x1 = base.x.unwrap_or(0.0);
+            let y1 = base.y.unwrap_or(0.0);
+            let x2 = n.x2.unwrap_or(x1);
+            let y2 = n.y2.unwrap_or(y1);
+            ((x2 - x1).abs(), (y2 - y1).abs())
+        }
+        _ => (
+            node.width_px().unwrap_or(0.0),
+            node.height_px().unwrap_or(0.0),
+        ),
     }
-    let indent = "  ".repeat(depth);
-    let tag = match node.kind {
-        NodeKind::Text => "span",
-        _ => "div",
+}
+
+/// Node rotation in radians (`base.rotation`, 0 default). The
+/// canonical schema stores rotation in degrees; the editor / TS
+/// renderer treat that field as degrees too, so emit it verbatim and
+/// let the per-target helper pick `deg` vs `rad`.
+pub(crate) fn node_rotation_deg(node: &PenNode) -> f64 {
+    node.base().rotation.unwrap_or(0.0)
+}
+
+/// Corner radius in document px. Uniform `CornerRadius` reads as-is;
+/// per-corner radii collapse to their first value (CSS shorthand is
+/// a follow-up). Variants without a corner-radius field read 0.
+pub(crate) fn node_corner_radius(node: &PenNode) -> f64 {
+    use jian_ops_schema::node::CornerRadius;
+    let uniform = |c: &Option<CornerRadius>| match c {
+        Some(CornerRadius::Uniform(r)) => *r,
+        Some(CornerRadius::PerCorner(arr)) => arr.first().copied().unwrap_or(0.0),
+        None => 0.0,
     };
-    let mut style = format!(
-        "position:absolute;left:{}px;top:{}px;width:{}px;height:{}px",
-        node.bounds.origin.x,
-        node.bounds.origin.y,
-        node.bounds.size.x,
-        node.bounds.size.y,
-    );
-    if let Some(fill) = node.fill {
-        style.push_str(&format!(";background:{}", color_to_css(fill)));
-    }
-    if let Some(stroke) = node.stroke {
-        style.push_str(&format!(
-            ";border:{}px solid {}",
-            stroke.width,
-            color_to_css(stroke.color)
-        ));
-    }
-    if node.corner_radius > 0.0 {
-        style.push_str(&format!(";border-radius:{}px", node.corner_radius));
-    }
-    if matches!(node.kind, NodeKind::Ellipse) {
-        style.push_str(";border-radius:50%");
-    }
-    if node.rotation.abs() > f32::EPSILON {
-        style.push_str(&format!(";transform:rotate({}rad)", node.rotation));
-    }
-    let body = node.text.clone().unwrap_or_default();
-    if node.children.is_empty() && body.is_empty() {
-        out.push_str(&format!("{indent}<{tag} style=\"{style}\"></{tag}>\n"));
-    } else {
-        out.push_str(&format!("{indent}<{tag} style=\"{style}\">"));
-        if !body.is_empty() {
-            out.push_str(&html_escape(&body));
-        }
-        if !node.children.is_empty() {
-            out.push('\n');
-            for c in &node.children {
-                emit_node_html(out, c, depth + 1);
-            }
-            out.push_str(&indent);
-        }
-        out.push_str(&format!("</{tag}>\n"));
+    match node {
+        PenNode::Frame(n) => uniform(&n.container.corner_radius),
+        PenNode::Group(n) => uniform(&n.container.corner_radius),
+        PenNode::Rectangle(n) => uniform(&n.container.corner_radius),
+        PenNode::Ellipse(n) => n.corner_radius.unwrap_or(0.0),
+        PenNode::Polygon(n) => n.corner_radius.unwrap_or(0.0),
+        _ => 0.0,
     }
 }
 
-/// Vue 3 Single File Component generator. Wraps the page's node
-/// tree in a `<template>` block (HTML-like) + an empty `<script
-/// setup>` placeholder + a `<style>` block carrying any
-/// design-variables-derived custom properties. Mirrors TS
-/// `pen-codegen::vue-generator`.
-pub struct Vue;
+/// Children of the node (empty slice for leaf variants).
+pub(crate) fn node_children(node: &PenNode) -> &[PenNode] {
+    node.children().map(|v| v.as_slice()).unwrap_or(&[])
+}
 
-impl Codegen for Vue {
-    fn target_label(&self) -> &'static str {
-        "vue"
-    }
-    fn generate(&self, doc: &Document) -> String {
-        let mut out = String::new();
-        out.push_str("<!-- Generated by OpenPencil — codegen::Vue -->\n");
-        out.push_str("<template>\n");
-        if let Some(page) = doc.pages.get(doc.active_page_index) {
-            for n in &page.children {
-                emit_node_html(&mut out, n, 1);
+/// True when the node renders as text (`Text` variant).
+pub(crate) fn node_is_text(node: &PenNode) -> bool {
+    matches!(node, PenNode::Text(_))
+}
+
+/// True when the node renders as an ellipse.
+pub(crate) fn node_is_ellipse(node: &PenNode) -> bool {
+    matches!(node, PenNode::Ellipse(_))
+}
+
+/// Plain-text body of a node. `Text` variants flatten their
+/// `TextContent` (joining styled segments); every other variant has
+/// no inline body.
+pub(crate) fn node_text(node: &PenNode) -> Option<String> {
+    use jian_ops_schema::node::TextContent;
+    match node {
+        PenNode::Text(n) => Some(match &n.content {
+            TextContent::Plain(s) => s.clone(),
+            TextContent::Styled(segs) => {
+                segs.iter().map(|s| s.text.as_str()).collect::<String>()
             }
-        }
-        out.push_str("</template>\n\n");
-        out.push_str("<script setup lang=\"ts\">\n// generated\n</script>\n\n");
-        out.push_str("<style scoped>\n");
-        out.push_str(&CssVariables.generate(doc));
-        out.push_str("</style>\n");
-        out
+        }),
+        PenNode::TextInput(n) => n.value.clone().or_else(|| n.placeholder.clone()),
+        _ => None,
     }
 }
 
-/// Svelte component generator. Markup + `<style>` block — Svelte
-/// allows top-level markup without a wrapping template tag. Same
-/// design-variables-as-CSS-vars pattern as Vue.
-pub struct Svelte;
+/// First solid-fill color of a node as a `#hex` / `rgba()` string,
+/// when the node carries one. Gradient / image fills are not a flat
+/// color — they read as `None` (same degrade as the TS generators).
+pub(crate) fn node_fill_css(node: &PenNode) -> Option<String> {
+    let fills = node_fills(node)?;
+    first_solid_color(fills)
+}
 
-impl Codegen for Svelte {
-    fn target_label(&self) -> &'static str {
-        "svelte"
-    }
-    fn generate(&self, doc: &Document) -> String {
-        let mut out = String::new();
-        out.push_str("<!-- Generated by OpenPencil — codegen::Svelte -->\n");
-        out.push_str("<script lang=\"ts\">\n// generated\n</script>\n\n");
-        if let Some(page) = doc.pages.get(doc.active_page_index) {
-            for n in &page.children {
-                emit_node_html(&mut out, n, 0);
-            }
-        }
-        out.push_str("\n<style>\n");
-        out.push_str(&CssVariables.generate(doc));
-        out.push_str("</style>\n");
-        out
+/// Borrow the node's fill list, when its variant carries fills.
+fn node_fills(node: &PenNode) -> Option<&Vec<PenFill>> {
+    match node {
+        PenNode::Frame(n) => n.container.fill.as_ref(),
+        PenNode::Group(n) => n.container.fill.as_ref(),
+        PenNode::Rectangle(n) => n.container.fill.as_ref(),
+        PenNode::Ellipse(n) => n.fill.as_ref(),
+        PenNode::Polygon(n) => n.fill.as_ref(),
+        PenNode::Path(n) => n.fill.as_ref(),
+        PenNode::Text(n) => n.fill.as_ref(),
+        PenNode::TextInput(n) => n.fill.as_ref(),
+        PenNode::IconFont(n) => n.fill.as_ref(),
+        PenNode::Line(_) | PenNode::Image(_) | PenNode::Ref(_) => None,
     }
 }
 
-/// React + inline-style JSX generator. Emits one functional
-/// component named `Page` returning a fragment of absolute-
-/// positioned `<div>`s + text spans. Same per-node mapping as the
-/// HTML target; the wrapper is JSX. Mirrors TS
-/// `pen-codegen::react-generator` minus Tailwind class generation.
-pub struct React;
-
-impl Codegen for React {
-    fn target_label(&self) -> &'static str {
-        "react"
-    }
-    fn generate(&self, doc: &Document) -> String {
-        let mut out = String::new();
-        out.push_str("// Generated by OpenPencil — codegen::React\n");
-        out.push_str("import React from 'react';\n\n");
-        out.push_str("export default function Page() {\n");
-        out.push_str("  return (\n    <>\n");
-        if let Some(page) = doc.pages.get(doc.active_page_index) {
-            for n in &page.children {
-                emit_node_jsx(&mut out, n, 3);
-            }
-        }
-        out.push_str("    </>\n  );\n}\n");
-        out
-    }
+/// First `Solid` fill's color string in a fill list.
+fn first_solid_color(fills: &[PenFill]) -> Option<String> {
+    fills.iter().find_map(|f| match f {
+        PenFill::Solid(body) => Some(body.color.clone()),
+        _ => None,
+    })
 }
 
-fn emit_node_jsx(out: &mut String, node: &Node, depth: usize) {
-    if node.hidden {
-        return;
-    }
-    let indent = "  ".repeat(depth);
-    let tag = if matches!(node.kind, NodeKind::Text) {
-        "span"
-    } else {
-        "div"
+/// Stroke description of a node: `(color, width)`. Present only when
+/// the variant carries a `PenStroke` with a solid fill and a uniform
+/// thickness. Per-side thickness collapses to its first value.
+pub(crate) fn node_stroke_css(node: &PenNode) -> Option<(String, f32)> {
+    use jian_ops_schema::style::StrokeThickness;
+    let stroke = match node {
+        PenNode::Frame(n) => n.container.stroke.as_ref(),
+        PenNode::Group(n) => n.container.stroke.as_ref(),
+        PenNode::Rectangle(n) => n.container.stroke.as_ref(),
+        PenNode::Ellipse(n) => n.stroke.as_ref(),
+        PenNode::Polygon(n) => n.stroke.as_ref(),
+        PenNode::Path(n) => n.stroke.as_ref(),
+        PenNode::Line(n) => n.stroke.as_ref(),
+        PenNode::TextInput(n) => n.stroke.as_ref(),
+        PenNode::IconFont(n) => n.stroke.as_ref(),
+        PenNode::Text(_) | PenNode::Image(_) | PenNode::Ref(_) => None,
+    }?;
+    let width = match &stroke.thickness {
+        StrokeThickness::Uniform(w) => *w,
+        StrokeThickness::PerSide(arr) => arr.first().copied().unwrap_or(0.0),
+        StrokeThickness::Sided(s) => s.top.or(s.right).or(s.bottom).or(s.left).unwrap_or(0.0),
     };
-    // JSX style is an object literal — semicolons → commas, camelCase keys.
-    let style = format!(
-        "position: 'absolute', left: {}, top: {}, width: {}, height: {}{}{}{}{}",
-        node.bounds.origin.x,
-        node.bounds.origin.y,
-        node.bounds.size.x,
-        node.bounds.size.y,
-        node.fill
-            .map(|c| format!(", background: '{}'", color_to_css(c)))
-            .unwrap_or_default(),
-        node.stroke
-            .map(|s| format!(", border: '{}px solid {}'", s.width, color_to_css(s.color)))
-            .unwrap_or_default(),
-        if node.corner_radius > 0.0 {
-            format!(", borderRadius: {}", node.corner_radius)
-        } else {
-            String::new()
-        },
-        if matches!(node.kind, NodeKind::Ellipse) {
-            ", borderRadius: '50%'".to_string()
-        } else {
-            String::new()
-        },
-    );
-    let body = node.text.clone().unwrap_or_default();
-    if node.children.is_empty() && body.is_empty() {
-        out.push_str(&format!("{indent}<{tag} style={{{{{style}}}}} />\n"));
-    } else {
-        out.push_str(&format!("{indent}<{tag} style={{{{{style}}}}}>"));
-        if !body.is_empty() {
-            out.push_str(&html_escape(&body));
-        }
-        if !node.children.is_empty() {
-            out.push('\n');
-            for c in &node.children {
-                emit_node_jsx(out, c, depth + 1);
-            }
-            out.push_str(&indent);
-        }
-        out.push_str(&format!("</{tag}>\n"));
-    }
-}
-
-/// Flutter / Dart generator. Emits a `Stack` whose children are
-/// `Positioned`-wrapped `Container`s sized + coloured per node.
-/// Text uses `Text(...)` with a `TextStyle`. Mirrors TS
-/// `pen-codegen::flutter-generator`.
-pub struct Flutter;
-
-impl Codegen for Flutter {
-    fn target_label(&self) -> &'static str {
-        "flutter"
-    }
-    fn generate(&self, doc: &Document) -> String {
-        let mut out = String::new();
-        out.push_str("// Generated by OpenPencil — codegen::Flutter\n");
-        out.push_str("import 'package:flutter/material.dart';\n\n");
-        out.push_str("Widget buildPage() {\n  return Stack(children: [\n");
-        if let Some(page) = doc.pages.get(doc.active_page_index) {
-            for n in &page.children {
-                emit_node_flutter(&mut out, n, 2);
-            }
-        }
-        out.push_str("  ]);\n}\n");
-        out
-    }
-}
-
-fn emit_node_flutter(out: &mut String, node: &Node, depth: usize) {
-    if node.hidden {
-        return;
-    }
-    let indent = "  ".repeat(depth);
-    let inner = match node.kind {
-        NodeKind::Text => {
-            let body = node.text.clone().unwrap_or_default();
-            format!("Text({:?})", body)
-        }
-        _ => {
-            let color = node
-                .fill
-                .map(|c| {
-                    let r = (c.r.clamp(0.0, 1.0) * 255.0).round() as u8;
-                    let g = (c.g.clamp(0.0, 1.0) * 255.0).round() as u8;
-                    let b = (c.b.clamp(0.0, 1.0) * 255.0).round() as u8;
-                    let a = (c.a.clamp(0.0, 1.0) * 255.0).round() as u8;
-                    format!("Color.fromARGB({},{},{},{})", a, r, g, b)
-                })
-                .unwrap_or_else(|| "null".into());
-            format!(
-                "Container(width: {}, height: {}, decoration: BoxDecoration(color: {}))",
-                node.bounds.size.x, node.bounds.size.y, color
-            )
-        }
-    };
-    out.push_str(&format!(
-        "{indent}Positioned(left: {}, top: {}, child: {}),\n",
-        node.bounds.origin.x, node.bounds.origin.y, inner
-    ));
-    for c in &node.children {
-        emit_node_flutter(out, c, depth);
-    }
-}
-
-/// SwiftUI generator. Emits a `ZStack` of `Rectangle`/`Ellipse`/
-/// `Text` views with `.frame` + `.offset` modifiers. Mirrors TS
-/// `pen-codegen::swiftui-generator`.
-pub struct SwiftUi;
-
-impl Codegen for SwiftUi {
-    fn target_label(&self) -> &'static str {
-        "swiftui"
-    }
-    fn generate(&self, doc: &Document) -> String {
-        let mut out = String::new();
-        out.push_str("// Generated by OpenPencil — codegen::SwiftUi\n");
-        out.push_str("import SwiftUI\n\nstruct Page: View {\n  var body: some View {\n");
-        out.push_str("    ZStack {\n");
-        if let Some(page) = doc.pages.get(doc.active_page_index) {
-            for n in &page.children {
-                emit_node_swiftui(&mut out, n, 3);
-            }
-        }
-        out.push_str("    }\n  }\n}\n");
-        out
-    }
-}
-
-fn emit_node_swiftui(out: &mut String, node: &Node, depth: usize) {
-    if node.hidden {
-        return;
-    }
-    let indent = "  ".repeat(depth);
-    let view = match node.kind {
-        NodeKind::Text => {
-            let body = node.text.clone().unwrap_or_default();
-            format!("Text({:?})", body)
-        }
-        NodeKind::Ellipse => "Ellipse()".to_string(),
-        _ => "Rectangle()".to_string(),
-    };
-    let color = node
+    let color = stroke
         .fill
-        .map(|c| {
-            format!(
-                ".foregroundColor(Color(red: {:.3}, green: {:.3}, blue: {:.3}, opacity: {:.3}))",
-                c.r, c.g, c.b, c.a
-            )
-        })
-        .unwrap_or_default();
-    let cx = node.bounds.origin.x + node.bounds.size.x / 2.0;
-    let cy = node.bounds.origin.y + node.bounds.size.y / 2.0;
-    out.push_str(&format!(
-        "{indent}{view}{color}.frame(width: {}, height: {}).position(x: {}, y: {})\n",
-        node.bounds.size.x, node.bounds.size.y, cx, cy
-    ));
-    for c in &node.children {
-        emit_node_swiftui(out, c, depth);
-    }
+        .as_ref()
+        .and_then(|fills| first_solid_color(fills))
+        .unwrap_or_else(|| "#000000".to_string());
+    Some((color, width))
 }
 
-/// Android Jetpack Compose generator. Emits a `Box` with
-/// `Modifier.offset`/`size` per node + a single fill color.
-/// Mirrors TS `pen-codegen::compose-generator`.
-pub struct Compose;
+// --- CSS scalar / colour helpers -----------------------------------
 
-impl Codegen for Compose {
-    fn target_label(&self) -> &'static str {
-        "compose"
-    }
-    fn generate(&self, doc: &Document) -> String {
-        let mut out = String::new();
-        out.push_str("// Generated by OpenPencil — codegen::Compose\n");
-        out.push_str("import androidx.compose.foundation.*\n");
-        out.push_str("import androidx.compose.foundation.layout.*\n");
-        out.push_str("import androidx.compose.material3.Text\n");
-        out.push_str("import androidx.compose.runtime.Composable\n");
-        out.push_str("import androidx.compose.ui.Modifier\n");
-        out.push_str("import androidx.compose.ui.graphics.Color\n");
-        out.push_str("import androidx.compose.ui.unit.dp\n\n");
-        out.push_str("@Composable\nfun Page() {\n  Box(modifier = Modifier.fillMaxSize()) {\n");
-        if let Some(page) = doc.pages.get(doc.active_page_index) {
-            for n in &page.children {
-                emit_node_compose(&mut out, n, 2);
+/// Parse a `#rgb` / `#rrggbb` / `#rrggbbaa` / `rgba(...)` colour
+/// string into normalized `(r, g, b, a)` floats in `0.0..=1.0`.
+/// Returns `None` for anything not understood — callers fall back to
+/// emitting the raw string verbatim, which is valid CSS for named
+/// colours or `var(--ref)`.
+pub(crate) fn parse_color(s: &str) -> Option<(f32, f32, f32, f32)> {
+    let t = s.trim();
+    if let Some(hex) = t.strip_prefix('#') {
+        let h = hex.as_bytes();
+        let nyb = |c: u8| -> Option<u8> {
+            match c {
+                b'0'..=b'9' => Some(c - b'0'),
+                b'a'..=b'f' => Some(c - b'a' + 10),
+                b'A'..=b'F' => Some(c - b'A' + 10),
+                _ => None,
             }
-        }
-        out.push_str("  }\n}\n");
-        out
+        };
+        let pair = |hi: u8, lo: u8| -> Option<f32> {
+            Some((nyb(hi)? * 16 + nyb(lo)?) as f32 / 255.0)
+        };
+        return match h.len() {
+            3 => Some((
+                pair(h[0], h[0])?,
+                pair(h[1], h[1])?,
+                pair(h[2], h[2])?,
+                1.0,
+            )),
+            6 => Some((
+                pair(h[0], h[1])?,
+                pair(h[2], h[3])?,
+                pair(h[4], h[5])?,
+                1.0,
+            )),
+            8 => Some((
+                pair(h[0], h[1])?,
+                pair(h[2], h[3])?,
+                pair(h[4], h[5])?,
+                pair(h[6], h[7])?,
+            )),
+            _ => None,
+        };
     }
+    None
 }
 
-fn emit_node_compose(out: &mut String, node: &Node, depth: usize) {
-    if node.hidden {
-        return;
-    }
-    let indent = "  ".repeat(depth);
-    match node.kind {
-        NodeKind::Text => {
-            let body = node.text.clone().unwrap_or_default();
-            out.push_str(&format!(
-                "{indent}Text(text = {:?}, modifier = Modifier.offset(x = {}.dp, y = {}.dp))\n",
-                body, node.bounds.origin.x, node.bounds.origin.y
-            ));
-        }
-        _ => {
-            let color = node
-                .fill
-                .map(|c| {
-                    let r = (c.r.clamp(0.0, 1.0) * 255.0).round() as u8;
-                    let g = (c.g.clamp(0.0, 1.0) * 255.0).round() as u8;
-                    let b = (c.b.clamp(0.0, 1.0) * 255.0).round() as u8;
-                    let a = (c.a.clamp(0.0, 1.0) * 255.0).round() as u8;
-                    format!(".background(Color({}, {}, {}, {}))", r, g, b, a)
-                })
-                .unwrap_or_default();
-            out.push_str(&format!(
-                "{indent}Box(modifier = Modifier.offset(x = {}.dp, y = {}.dp).size(width = {}.dp, height = {}.dp){})\n",
-                node.bounds.origin.x, node.bounds.origin.y,
-                node.bounds.size.x, node.bounds.size.y,
-                color
-            ));
-        }
-    }
-    for c in &node.children {
-        emit_node_compose(out, c, depth);
-    }
-}
-
-/// React Native generator. Emits a default-exported functional
-/// component with absolute-positioned `<View>`s + `<Text>`s using
-/// React Native's `StyleSheet.flatten`-friendly inline style.
-/// Mirrors TS `pen-codegen::react-native-generator`.
-pub struct ReactNative;
-
-impl Codegen for ReactNative {
-    fn target_label(&self) -> &'static str {
-        "react-native"
-    }
-    fn generate(&self, doc: &Document) -> String {
-        let mut out = String::new();
-        out.push_str("// Generated by OpenPencil — codegen::ReactNative\n");
-        out.push_str("import React from 'react';\n");
-        out.push_str("import { View, Text } from 'react-native';\n\n");
-        out.push_str("export default function Page() {\n  return (\n    <View style={{ flex: 1 }}>\n");
-        if let Some(page) = doc.pages.get(doc.active_page_index) {
-            for n in &page.children {
-                emit_node_rn(&mut out, n, 3);
-            }
-        }
-        out.push_str("    </View>\n  );\n}\n");
-        out
-    }
-}
-
-fn emit_node_rn(out: &mut String, node: &Node, depth: usize) {
-    if node.hidden {
-        return;
-    }
-    let indent = "  ".repeat(depth);
-    let style = format!(
-        "position: 'absolute', left: {}, top: {}, width: {}, height: {}{}{}",
-        node.bounds.origin.x,
-        node.bounds.origin.y,
-        node.bounds.size.x,
-        node.bounds.size.y,
-        node.fill
-            .map(|c| format!(", backgroundColor: '{}'", color_to_css(c)))
-            .unwrap_or_default(),
-        if node.corner_radius > 0.0 {
-            format!(", borderRadius: {}", node.corner_radius)
-        } else {
-            String::new()
-        },
-    );
-    match node.kind {
-        NodeKind::Text => {
-            let body = node.text.clone().unwrap_or_default();
-            out.push_str(&format!(
-                "{indent}<Text style={{{{{style}}}}}>{}</Text>\n",
-                html_escape(&body)
-            ));
-        }
-        _ => {
-            if node.children.is_empty() {
-                out.push_str(&format!("{indent}<View style={{{{{style}}}}} />\n"));
+/// Normalize a colour string for emission as a CSS value. Hex /
+/// rgba inputs round-trip through `parse_color`; anything else
+/// (named colour, `var(--ref)`) passes through verbatim.
+pub(crate) fn color_to_css(s: &str) -> String {
+    match parse_color(s) {
+        Some((r, g, b, a)) => {
+            let to_u8 = |c: f32| (c.clamp(0.0, 1.0) * 255.0).round() as u8;
+            if a >= 0.999 {
+                format!("rgb({},{},{})", to_u8(r), to_u8(g), to_u8(b))
             } else {
-                out.push_str(&format!("{indent}<View style={{{{{style}}}}}>\n"));
-                for c in &node.children {
-                    emit_node_rn(out, c, depth + 1);
-                }
-                out.push_str(&format!("{indent}</View>\n"));
+                format!("rgba({},{},{},{:.3})", to_u8(r), to_u8(g), to_u8(b), a)
             }
         }
+        None => s.to_string(),
     }
 }
 
-fn color_to_css(c: Color) -> String {
-    let r = (c.r.clamp(0.0, 1.0) * 255.0).round() as u8;
-    let g = (c.g.clamp(0.0, 1.0) * 255.0).round() as u8;
-    let b = (c.b.clamp(0.0, 1.0) * 255.0).round() as u8;
-    if c.a >= 0.999 {
-        format!("rgb({},{},{})", r, g, b)
-    } else {
-        format!("rgba({},{},{},{:.3})", r, g, b, c.a)
-    }
-}
-
-fn html_escape(s: &str) -> String {
+pub(crate) fn html_escape(s: &str) -> String {
     s.replace('&', "&amp;")
         .replace('<', "&lt;")
         .replace('>', "&gt;")
@@ -572,11 +349,21 @@ fn html_escape(s: &str) -> String {
 fn scalar_to_css(s: &VariableScalar) -> String {
     match s {
         VariableScalar::Bool(b) => b.to_string(),
-        VariableScalar::Num(n) => n.to_string(),
+        VariableScalar::Num(n) => fmt_num(*n),
         VariableScalar::Str(s) => s.clone(),
     }
 }
 
+/// Format an `f64` the way the TS generators print numbers — drop a
+/// trailing `.0` so `12.0` renders as `12`.
+pub(crate) fn fmt_num(n: f64) -> String {
+    if n.fract() == 0.0 && n.is_finite() {
+        format!("{}", n as i64)
+    } else {
+        format!("{}", n)
+    }
+}
+
 fn css_ident(name: &str) -> String {
     name.chars()
         .map(|c| if c.is_ascii_alphanumeric() || c == '-' { c } else { '-' })
@@ -586,8 +373,49 @@ fn css_ident(name: &str) -> String {
 #[cfg(test)]
 mod tests {
     use super::*;
-    use crate::document::{ThemedValue, Variable, VariableKind, VariableTable};
-    use std::collections::{BTreeMap, HashMap};
+    use jian_ops_schema::node::{
+        EllipseNode, PenNodeBase, RectangleNode, TextContent, TextNode,
+    };
+    use jian_ops_schema::page::PenPage;
+    use jian_ops_schema::sizing::SizingBehavior;
+    use jian_ops_schema::style::{PenFill, SolidFillBody};
+    use jian_ops_schema::variable::{
+        ThemedValue, VariableDefinition, VariableKind, VariableScalar, VariableValue,
+    };
+    use std::collections::BTreeMap;
+
+    /// Bare empty document — no variables, no pages, no children.
+    fn empty_doc() -> PenDocument {
+        PenDocument {
+            version: "0.8.0".into(),
+            name: None,
+            themes: None,
+            variables: None,
+            pages: None,
+            children: Vec::new(),
+            format_version: None,
+            id: None,
+            app: None,
+            routes: None,
+            state: None,
+            lifecycle: None,
+            logic_modules: None,
+        }
+    }
+
+    /// Replace the document's node forest with a single page holding
+    /// `nodes`, mirroring the old `page.children` test helper.
+    fn doc_with_nodes(nodes: Vec<PenNode>) -> PenDocument {
+        let mut doc = empty_doc();
+        doc.pages = Some(vec![PenPage {
+            id: "p1".into(),
+            name: "Page 1".into(),
+            children: nodes,
+            state: None,
+            lifecycle: None,
+        }]);
+        doc
+    }
 
     fn axis(name: &str, value: &str) -> BTreeMap<String, String> {
         let mut m = BTreeMap::new();
@@ -595,27 +423,121 @@ mod tests {
         m
     }
 
+    fn solid(color: &str) -> Vec<PenFill> {
+        vec![PenFill::Solid(SolidFillBody {
+            color: color.into(),
+            explain: None,
+            opacity: None,
+            blend_mode: None,
+        })]
+    }
+
+    /// A rectangle at `(x,y)` sized `w×h` with an optional fill.
+    fn rect(id: &str, x: f64, y: f64, w: f64, h: f64, fill: Option<&str>) -> PenNode {
+        let mut container = jian_ops_schema::node::ContainerProps::default();
+        container.width = Some(SizingBehavior::Number(w));
+        container.height = Some(SizingBehavior::Number(h));
+        container.fill = fill.map(solid);
+        PenNode::Rectangle(RectangleNode {
+            base: PenNodeBase {
+                id: id.into(),
+                x: Some(x),
+                y: Some(y),
+                ..Default::default()
+            },
+            container,
+            children: None,
+            state: None,
+            bindings: None,
+            events: None,
+            lifecycle: None,
+            semantics: None,
+            gestures: None,
+            route: None,
+        })
+    }
+
+    fn ellipse(id: &str, x: f64, y: f64, w: f64, h: f64) -> PenNode {
+        PenNode::Ellipse(EllipseNode {
+            base: PenNodeBase {
+                id: id.into(),
+                x: Some(x),
+                y: Some(y),
+                ..Default::default()
+            },
+            width: Some(SizingBehavior::Number(w)),
+            height: Some(SizingBehavior::Number(h)),
+            corner_radius: None,
+            inner_radius: None,
+            start_angle: None,
+            sweep_angle: None,
+            fill: None,
+            stroke: None,
+            effects: None,
+            state: None,
+            bindings: None,
+            events: None,
+            lifecycle: None,
+            semantics: None,
+            gestures: None,
+            route: None,
+        })
+    }
+
+    fn text(id: &str, x: f64, y: f64, w: f64, h: f64, body: &str) -> PenNode {
+        PenNode::Text(TextNode {
+            base: PenNodeBase {
+                id: id.into(),
+                x: Some(x),
+                y: Some(y),
+                ..Default::default()
+            },
+            width: Some(SizingBehavior::Number(w)),
+            height: Some(SizingBehavior::Number(h)),
+            content: TextContent::Plain(body.into()),
+            font_family: None,
+            font_size: None,
+            font_weight: None,
+            font_style: None,
+            letter_spacing: None,
+            line_height: None,
+            text_align: None,
+            text_align_vertical: None,
+            text_growth: None,
+            underline: None,
+            strikethrough: None,
+            fill: None,
+            effects: None,
+            state: None,
+            bindings: None,
+            events: None,
+            lifecycle: None,
+            semantics: None,
+            gestures: None,
+            route: None,
+        })
+    }
+
+    fn color_def(value: &str) -> VariableDefinition {
+        VariableDefinition {
+            kind: VariableKind::Color,
+            value: VariableValue::Scalar(VariableScalar::Str(value.into())),
+        }
+    }
+
     #[test]
     fn css_variables_emits_root_scalars() {
-        let mut doc = Document::empty();
-        doc.var_table = VariableTable {
-            variables: vec![
-                Variable {
-                    name: "primary".into(),
-                    kind: VariableKind::Color,
-                    value: VariableValue::Scalar(VariableScalar::Str("#0066ff".into())),
-                },
-                Variable {
-                    name: "spacing".into(),
-                    kind: VariableKind::Number,
-                    value: VariableValue::Scalar(VariableScalar::Num(12.0)),
-                },
-            ],
-            themes: Vec::new(),
-            active_theme: BTreeMap::new(),
-            fill_refs: HashMap::new(),
-            stroke_refs: HashMap::new(),
-        };
+        let mut doc = empty_doc();
+        let mut vars = BTreeMap::new();
+        vars.insert("primary".to_string(), color_def("#0066ff"));
+        vars.insert(
+            "spacing".to_string(),
+            VariableDefinition {
+                kind: VariableKind::Number,
+                value: VariableValue::Scalar(VariableScalar::Num(12.0)),
+            },
+        );
+        doc.variables = Some(vars);
         let css = CssVariables.generate(&doc);
         assert!(css.contains(":root {"));
         assert!(css.contains("--primary: #0066ff;"));
@@ -624,10 +546,11 @@ mod tests {
 
     #[test]
     fn css_variables_emits_per_theme_block() {
-        let mut doc = Document::empty();
-        doc.var_table = VariableTable {
-            variables: vec![Variable {
-                name: "bg".into(),
+        let mut doc = empty_doc();
+        let mut vars = BTreeMap::new();
+        vars.insert(
+            "bg".to_string(),
+            VariableDefinition {
                 kind: VariableKind::Color,
                 value: VariableValue::Themed(vec![
                     ThemedValue {
@@ -639,12 +562,9 @@ mod tests {
                         theme: Some(axis("mode", "dark")),
                     },
                 ]),
-            }],
-            themes: Vec::new(),
-            active_theme: BTreeMap::new(),
-            fill_refs: HashMap::new(),
-            stroke_refs: HashMap::new(),
-        };
+            },
+        );
+        doc.variables = Some(vars);
         let css = CssVariables.generate(&doc);
         assert!(css.contains(":root[data-mode=\"light\"]"));
         assert!(css.contains(":root[data-mode=\"dark\"]"));
@@ -654,12 +574,10 @@ mod tests {
 
     #[test]
     fn css_variables_sanitises_non_ident_chars() {
-        let mut doc = Document::empty();
-        doc.var_table.variables.push(Variable {
-            name: "primary.color".into(),
-            kind: VariableKind::Color,
-            value: VariableValue::Scalar(VariableScalar::Str("#f00".into())),
-        });
+        let mut doc = empty_doc();
+        let mut vars = BTreeMap::new();
+        vars.insert("primary.color".to_string(), color_def("#f00"));
+        doc.variables = Some(vars);
         let css = CssVariables.generate(&doc);
         // Dot replaced with dash so the result is a valid CSS ident.
         assert!(css.contains("--primary-color: #f00;"));
@@ -667,7 +585,7 @@ mod tests {
 
     #[test]
     fn html_emits_doctype_and_body() {
-        let doc = Document::empty();
+        let doc = empty_doc();
         let html = Html.generate(&doc);
         assert!(html.contains("<!DOCTYPE html>"));
         assert!(html.contains("<body>"));
@@ -677,15 +595,7 @@ mod tests {
 
     #[test]
     fn html_emits_div_per_node_with_position_and_fill() {
-        use crate::document::{Node, NodeKind};
-        use crate::{Color, Rect};
-        let mut doc = Document::empty();
-        let page = doc.pages.get_mut(0).unwrap();
-        page.children.clear();
-        let mut n = Node::leaf("n10", NodeKind::Rect, "r");
-        n.bounds = Rect::xywh(20.0, 30.0, 100.0, 50.0);
-        n.fill = Some(Color { r: 1.0, g: 0.0, b: 0.0, a: 1.0 });
-        page.children.push(n);
+        let doc = doc_with_nodes(vec![rect("n10", 20.0, 30.0, 100.0, 50.0, Some("#ff0000"))]);
         let html = Html.generate(&doc);
         assert!(html.contains("left:20px"));
         assert!(html.contains("top:30px"));
@@ -695,15 +605,7 @@ mod tests {
 
     #[test]
     fn html_emits_span_for_text_and_escapes_body() {
-        use crate::document::{Node, NodeKind};
-        use crate::Rect;
-        let mut doc = Document::empty();
-        let page = doc.pages.get_mut(0).unwrap();
-        page.children.clear();
-        let mut t = Node::leaf("n10", NodeKind::Text, "t");
-        t.bounds = Rect::xywh(0.0, 0.0, 100.0, 24.0);
-        t.text = Some("Hello & <world>".into());
-        page.children.push(t);
+        let doc = doc_with_nodes(vec![text("n10", 0.0, 0.0, 100.0, 24.0, "Hello & <world>")]);
         let html = Html.generate(&doc);
         assert!(html.contains("<span"));
         assert!(html.contains("Hello &amp; &lt;world&gt;"));
@@ -711,7 +613,7 @@ mod tests {
 
     #[test]
     fn vue_emits_template_script_style_blocks() {
-        let doc = Document::empty();
+        let doc = empty_doc();
         let s = Vue.generate(&doc);
         assert!(s.contains("<template>"));
         assert!(s.contains("</template>"));
@@ -721,7 +623,7 @@ mod tests {
 
     #[test]
     fn svelte_emits_script_then_markup_then_style() {
-        let doc = Document::empty();
+        let doc = empty_doc();
         let s = Svelte.generate(&doc);
         let script_pos = s.find("<script").unwrap();
         let style_pos = s.find("<style>").unwrap();
@@ -731,26 +633,17 @@ mod tests {
 
     #[test]
     fn vue_includes_variable_css_in_style_block() {
-        use crate::document::{Variable, VariableKind, VariableScalar, VariableTable, VariableValue};
-        let mut doc = Document::empty();
-        doc.var_table = VariableTable {
-            variables: vec![Variable {
-                name: "primary".into(),
-                kind: VariableKind::Color,
-                value: VariableValue::Scalar(VariableScalar::Str("#abc".into())),
-            }],
-            themes: Vec::new(),
-            active_theme: std::collections::BTreeMap::new(),
-            fill_refs: HashMap::new(),
-            stroke_refs: HashMap::new(),
-        };
+        let mut doc = empty_doc();
+        let mut vars = BTreeMap::new();
+        vars.insert("primary".to_string(), color_def("#abc"));
+        doc.variables = Some(vars);
         let s = Vue.generate(&doc);
         assert!(s.contains("--primary: #abc;"));
     }
 
     #[test]
     fn react_emits_functional_component_with_jsx_fragment() {
-        let doc = Document::empty();
+        let doc = empty_doc();
         let s = React.generate(&doc);
         assert!(s.contains("import React from 'react';"));
         assert!(s.contains("export default function Page()"));
@@ -760,15 +653,7 @@ mod tests {
 
     #[test]
     fn flutter_emits_stack_with_positioned_children() {
-        use crate::document::{Node, NodeKind};
-        use crate::{Color, Rect};
-        let mut doc = Document::empty();
-        let page = doc.pages.get_mut(0).unwrap();
-        page.children.clear();
-        let mut n = Node::leaf("n10", NodeKind::Rect, "r");
-        n.bounds = Rect::xywh(5.0, 10.0, 100.0, 50.0);
-        n.fill = Some(Color { r: 1.0, g: 0.0, b: 0.0, a: 1.0 });
-        page.children.push(n);
+        let doc = doc_with_nodes(vec![rect("n10", 5.0, 10.0, 100.0, 50.0, Some("#ff0000"))]);
         let s = Flutter.generate(&doc);
         assert!(s.contains("import 'package:flutter/material.dart';"));
         assert!(s.contains("Stack(children:"));
@@ -779,14 +664,7 @@ mod tests {
 
     #[test]
     fn swiftui_emits_zstack_with_positioned_views() {
-        use crate::document::{Node, NodeKind};
-        use crate::Rect;
-        let mut doc = Document::empty();
-        let page = doc.pages.get_mut(0).unwrap();
-        page.children.clear();
-        let mut n = Node::leaf("n10", NodeKind::Rect, "r");
-        n.bounds = Rect::xywh(0.0, 0.0, 100.0, 50.0);
-        page.children.push(n);
+        let doc = doc_with_nodes(vec![rect("n10", 0.0, 0.0, 100.0, 50.0, None)]);
         let s = SwiftUi.generate(&doc);
         assert!(s.contains("import SwiftUI"));
         assert!(s.contains("ZStack {"));
@@ -796,29 +674,14 @@ mod tests {
 
     #[test]
     fn swiftui_emits_ellipse_for_ellipse_kind() {
-        use crate::document::{Node, NodeKind};
-        use crate::Rect;
-        let mut doc = Document::empty();
-        let page = doc.pages.get_mut(0).unwrap();
-        page.children.clear();
-        let mut n = Node::leaf("n10", NodeKind::Ellipse, "e");
-        n.bounds = Rect::xywh(0.0, 0.0, 20.0, 20.0);
-        page.children.push(n);
+        let doc = doc_with_nodes(vec![ellipse("n10", 0.0, 0.0, 20.0, 20.0)]);
         let s = SwiftUi.generate(&doc);
         assert!(s.contains("Ellipse()"));
     }
 
     #[test]
     fn compose_emits_composable_box_with_offset_size() {
-        use crate::document::{Node, NodeKind};
-        use crate::{Color, Rect};
-        let mut doc = Document::empty();
-        let page = doc.pages.get_mut(0).unwrap();
-        page.children.clear();
-        let mut n = Node::leaf("n10", NodeKind::Rect, "r");
-        n.bounds = Rect::xywh(5.0, 10.0, 100.0, 50.0);
-        n.fill = Some(Color { r: 1.0, g: 0.0, b: 0.0, a: 1.0 });
-        page.children.push(n);
+        let doc = doc_with_nodes(vec![rect("n10", 5.0, 10.0, 100.0, 50.0, Some("#ff0000"))]);
         let s = Compose.generate(&doc);
         assert!(s.contains("@Composable"));
         assert!(s.contains("Modifier.offset(x = 5.dp, y = 10.dp)"));
@@ -828,14 +691,7 @@ mod tests {
 
     #[test]
     fn react_native_emits_view_tree_with_absolute_positions() {
-        use crate::document::{Node, NodeKind};
-        use crate::Rect;
-        let mut doc = Document::empty();
-        let page = doc.pages.get_mut(0).unwrap();
-        page.children.clear();
-        let mut n = Node::leaf("n10", NodeKind::Rect, "r");
-        n.bounds = Rect::xywh(0.0, 0.0, 80.0, 40.0);
-        page.children.push(n);
+        let doc = doc_with_nodes(vec![rect("n10", 0.0, 0.0, 80.0, 40.0, None)]);
         let s = ReactNative.generate(&doc);
         assert!(s.contains("import { View, Text } from 'react-native';"));
         assert!(s.contains("export default function Page()"));
@@ -846,22 +702,28 @@ mod tests {
 
     #[test]
     fn html_skips_hidden_nodes() {
-        use crate::document::{Node, NodeKind};
-        let mut doc = Document::empty();
-        let page = doc.pages.get_mut(0).unwrap();
-        page.children.clear();
-        let mut n = Node::leaf("n10", NodeKind::Rect, "hidden");
-        n.hidden = true;
-        page.children.push(n);
+        let mut hidden = rect("n10", 0.0, 0.0, 10.0, 10.0, None);
+        hidden.base_mut().visible = Some(false);
+        hidden.base_mut().name = Some("hidden".into());
+        let doc = doc_with_nodes(vec![hidden]);
         let html = Html.generate(&doc);
         assert!(!html.contains("hidden"));
     }
 
     #[test]
     fn css_variables_empty_doc_emits_header_only() {
-        let doc = Document::empty();
+        let doc = empty_doc();
         let css = CssVariables.generate(&doc);
         assert!(css.contains("Generated by OpenPencil"));
         assert!(!css.contains(":root"));
     }
+
+    #[test]
+    fn falls_back_to_bare_children_when_unpaged() {
+        let mut doc = empty_doc();
+        doc.children = vec![rect("n10", 1.0, 2.0, 30.0, 40.0, None)];
+        let html = Html.generate(&doc);
+        assert!(html.contains("left:1px"));
+        assert!(html.contains("width:30px"));
+    }
 }
diff --git a/crates/openpencil-shell-core/src/codegen_targets.rs b/crates/openpencil-shell-core/src/codegen_targets.rs
new file mode 100644
index 000000000..727021842
--- /dev/null
+++ b/crates/openpencil-shell-core/src/codegen_targets.rs
@@ -0,0 +1,496 @@
+//! Per-framework markup generators — the React / Vue / Svelte / HTML
+//! / Flutter / SwiftUI / Compose / React Native targets carved off
+//! `codegen.rs` to keep both files under the 800-line cap.
+//!
+//! All generators consume the canonical `jian_ops_schema::PenDocument`
+//! and walk `PenNode` through the flat-view accessors in the parent
+//! `codegen` module (`node_origin` / `node_size` / `node_fill_css` /
+//! …) so the per-target emit logic stays variant-agnostic.
+
+use crate::codegen::{
+    color_to_css, fmt_num, html_escape, node_children, node_corner_radius, node_fill_css,
+    node_hidden, node_is_ellipse, node_is_text, node_origin, node_rotation_deg, node_size,
+    node_stroke_css, node_text, parse_color, root_nodes, Codegen, CssVariables,
+};
+use jian_ops_schema::node::PenNode;
+use jian_ops_schema::PenDocument;
+
+/// HTML + inline-CSS generator. Walks the document's node tree and
+/// emits `<div>` per Rect/Frame/Group with absolute positioning and
+/// inline style; ellipses get `border-radius: 50%`; text nodes emit
+/// `<span>`. Bare minimum useful — refining to semantic tags + flex
+/// containers is a follow-up.
+pub struct Html;
+
+impl Codegen for Html {
+    fn target_label(&self) -> &'static str {
+        "html"
+    }
+    fn generate(&self, doc: &PenDocument) -> String {
+        let mut out = String::new();
+        out.push_str("<!-- Generated by OpenPencil — codegen::Html -->\n");
+        out.push_str("<!DOCTYPE html>\n<html><head><meta charset=\"utf-8\"></head>\n<body>\n");
+        for node in root_nodes(doc) {
+            emit_node_html(&mut out, node, 1);
+        }
+        out.push_str("</body></html>\n");
+        out
+    }
+}
+
+fn emit_node_html(out: &mut String, node: &PenNode, depth: usize) {
+    if node_hidden(node) {
+        return;
+    }
+    let indent = "  ".repeat(depth);
+    let tag = if node_is_text(node) { "span" } else { "div" };
+    let (x, y) = node_origin(node);
+    let (w, h) = node_size(node);
+    let mut style = format!(
+        "position:absolute;left:{}px;top:{}px;width:{}px;height:{}px",
+        fmt_num(x),
+        fmt_num(y),
+        fmt_num(w),
+        fmt_num(h),
+    );
+    if let Some(fill) = node_fill_css(node) {
+        style.push_str(&format!(";background:{}", color_to_css(&fill)));
+    }
+    if let Some((color, width)) = node_stroke_css(node) {
+        style.push_str(&format!(
+            ";border:{}px solid {}",
+            width,
+            color_to_css(&color)
+        ));
+    }
+    let radius = node_corner_radius(node);
+    if radius > 0.0 {
+        style.push_str(&format!(";border-radius:{}px", fmt_num(radius)));
+    }
+    if node_is_ellipse(node) {
+        style.push_str(";border-radius:50%");
+    }
+    let rotation = node_rotation_deg(node);
+    if rotation.abs() > f64::EPSILON {
+        style.push_str(&format!(";transform:rotate({}deg)", fmt_num(rotation)));
+    }
+    let body = node_text(node).unwrap_or_default();
+    let children = node_children(node);
+    if children.is_empty() && body.is_empty() {
+        out.push_str(&format!("{indent}<{tag} style=\"{style}\"></{tag}>\n"));
+    } else {
+        out.push_str(&format!("{indent}<{tag} style=\"{style}\">"));
+        if !body.is_empty() {
+            out.push_str(&html_escape(&body));
+        }
+        if !children.is_empty() {
+            out.push('\n');
+            for c in children {
+                emit_node_html(out, c, depth + 1);
+            }
+            out.push_str(&indent);
+        }
+        out.push_str(&format!("</{tag}>\n"));
+    }
+}
+
+/// Vue 3 Single File Component generator. Wraps the node tree in a
+/// `<template>` block (HTML-like) + an empty `<script setup>`
+/// placeholder + a `<style>` block carrying any
+/// design-variables-derived custom properties. Mirrors TS
+/// `pen-codegen::vue-generator`.
+pub struct Vue;
+
+impl Codegen for Vue {
+    fn target_label(&self) -> &'static str {
+        "vue"
+    }
+    fn generate(&self, doc: &PenDocument) -> String {
+        let mut out = String::new();
+        out.push_str("<!-- Generated by OpenPencil — codegen::Vue -->\n");
+        out.push_str("<template>\n");
+        for n in root_nodes(doc) {
+            emit_node_html(&mut out, n, 1);
+        }
+        out.push_str("</template>\n\n");
+        out.push_str("<script setup lang=\"ts\">\n// generated\n</script>\n\n");
+        out.push_str("<style scoped>\n");
+        out.push_str(&CssVariables.generate(doc));
+        out.push_str("</style>\n");
+        out
+    }
+}
+
+/// Svelte component generator. Markup + `<style>` block — Svelte
+/// allows top-level markup without a wrapping template tag. Same
+/// design-variables-as-CSS-vars pattern as Vue.
+pub struct Svelte;
+
+impl Codegen for Svelte {
+    fn target_label(&self) -> &'static str {
+        "svelte"
+    }
+    fn generate(&self, doc: &PenDocument) -> String {
+        let mut out = String::new();
+        out.push_str("<!-- Generated by OpenPencil — codegen::Svelte -->\n");
+        out.push_str("<script lang=\"ts\">\n// generated\n</script>\n\n");
+        for n in root_nodes(doc) {
+            emit_node_html(&mut out, n, 0);
+        }
+        out.push_str("\n<style>\n");
+        out.push_str(&CssVariables.generate(doc));
+        out.push_str("</style>\n");
+        out
+    }
+}
+
+/// React + inline-style JSX generator. Emits one functional
+/// component named `Page` returning a fragment of absolute-
+/// positioned `<div>`s + text spans. Same per-node mapping as the
+/// HTML target; the wrapper is JSX. Mirrors TS
+/// `pen-codegen::react-generator` minus Tailwind class generation.
+pub struct React;
+
+impl Codegen for React {
+    fn target_label(&self) -> &'static str {
+        "react"
+    }
+    fn generate(&self, doc: &PenDocument) -> String {
+        let mut out = String::new();
+        out.push_str("// Generated by OpenPencil — codegen::React\n");
+        out.push_str("import React from 'react';\n\n");
+        out.push_str("export default function Page() {\n");
+        out.push_str("  return (\n    <>\n");
+        for n in root_nodes(doc) {
+            emit_node_jsx(&mut out, n, 3);
+        }
+        out.push_str("    </>\n  );\n}\n");
+        out
+    }
+}
+
+fn emit_node_jsx(out: &mut String, node: &PenNode, depth: usize) {
+    if node_hidden(node) {
+        return;
+    }
+    let indent = "  ".repeat(depth);
+    let tag = if node_is_text(node) { "span" } else { "div" };
+    let (x, y) = node_origin(node);
+    let (w, h) = node_size(node);
+    let radius = node_corner_radius(node);
+    // JSX style is an object literal — semicolons → commas, camelCase keys.
+    let style = format!(
+        "position: 'absolute', left: {}, top: {}, width: {}, height: {}{}{}{}{}",
+        fmt_num(x),
+        fmt_num(y),
+        fmt_num(w),
+        fmt_num(h),
+        node_fill_css(node)
+            .map(|c| format!(", background: '{}'", color_to_css(&c)))
+            .unwrap_or_default(),
+        node_stroke_css(node)
+            .map(|(c, sw)| format!(", border: '{}px solid {}'", sw, color_to_css(&c)))
+            .unwrap_or_default(),
+        if radius > 0.0 {
+            format!(", borderRadius: {}", fmt_num(radius))
+        } else {
+            String::new()
+        },
+        if node_is_ellipse(node) {
+            ", borderRadius: '50%'".to_string()
+        } else {
+            String::new()
+        },
+    );
+    let body = node_text(node).unwrap_or_default();
+    let children = node_children(node);
+    if children.is_empty() && body.is_empty() {
+        out.push_str(&format!("{indent}<{tag} style={{{{{style}}}}} />\n"));
+    } else {
+        out.push_str(&format!("{indent}<{tag} style={{{{{style}}}}}>"));
+        if !body.is_empty() {
+            out.push_str(&html_escape(&body));
+        }
+        if !children.is_empty() {
+            out.push('\n');
+            for c in children {
+                emit_node_jsx(out, c, depth + 1);
+            }
+            out.push_str(&indent);
+        }
+        out.push_str(&format!("</{tag}>\n"));
+    }
+}
+
+/// Flutter / Dart generator. Emits a `Stack` whose children are
+/// `Positioned`-wrapped `Container`s sized + coloured per node.
+/// Text uses `Text(...)` with a `TextStyle`. Mirrors TS
+/// `pen-codegen::flutter-generator`.
+pub struct Flutter;
+
+impl Codegen for Flutter {
+    fn target_label(&self) -> &'static str {
+        "flutter"
+    }
+    fn generate(&self, doc: &PenDocument) -> String {
+        let mut out = String::new();
+        out.push_str("// Generated by OpenPencil — codegen::Flutter\n");
+        out.push_str("import 'package:flutter/material.dart';\n\n");
+        out.push_str("Widget buildPage() {\n  return Stack(children: [\n");
+        for n in root_nodes(doc) {
+            emit_node_flutter(&mut out, n, 2);
+        }
+        out.push_str("  ]);\n}\n");
+        out
+    }
+}
+
+/// Flatten a colour string into `Color.fromARGB(a,r,g,b)`. Falls
+/// back to `null` when the colour is not a parseable hex / rgba.
+fn flutter_color(color: &str) -> String {
+    match parse_color(color) {
+        Some((r, g, b, a)) => {
+            let to_u8 = |c: f32| (c.clamp(0.0, 1.0) * 255.0).round() as u8;
+            format!(
+                "Color.fromARGB({},{},{},{})",
+                to_u8(a),
+                to_u8(r),
+                to_u8(g),
+                to_u8(b)
+            )
+        }
+        None => "null".into(),
+    }
+}
+
+fn emit_node_flutter(out: &mut String, node: &PenNode, depth: usize) {
+    if node_hidden(node) {
+        return;
+    }
+    let indent = "  ".repeat(depth);
+    let (x, y) = node_origin(node);
+    let (w, h) = node_size(node);
+    let inner = if node_is_text(node) {
+        let body = node_text(node).unwrap_or_default();
+        format!("Text({:?})", body)
+    } else {
+        let color = node_fill_css(node)
+            .map(|c| flutter_color(&c))
+            .unwrap_or_else(|| "null".into());
+        format!(
+            "Container(width: {}, height: {}, decoration: BoxDecoration(color: {}))",
+            fmt_num(w),
+            fmt_num(h),
+            color
+        )
+    };
+    out.push_str(&format!(
+        "{indent}Positioned(left: {}, top: {}, child: {}),\n",
+        fmt_num(x),
+        fmt_num(y),
+        inner
+    ));
+    for c in node_children(node) {
+        emit_node_flutter(out, c, depth);
+    }
+}
+
+/// SwiftUI generator. Emits a `ZStack` of `Rectangle`/`Ellipse`/
+/// `Text` views with `.frame` + `.position` modifiers. Mirrors TS
+/// `pen-codegen::swiftui-generator`.
+pub struct SwiftUi;
+
+impl Codegen for SwiftUi {
+    fn target_label(&self) -> &'static str {
+        "swiftui"
+    }
+    fn generate(&self, doc: &PenDocument) -> String {
+        let mut out = String::new();
+        out.push_str("// Generated by OpenPencil — codegen::SwiftUi\n");
+        out.push_str("import SwiftUI\n\nstruct Page: View {\n  var body: some View {\n");
+        out.push_str("    ZStack {\n");
+        for n in root_nodes(doc) {
+            emit_node_swiftui(&mut out, n, 3);
+        }
+        out.push_str("    }\n  }\n}\n");
+        out
+    }
+}
+
+fn emit_node_swiftui(out: &mut String, node: &PenNode, depth: usize) {
+    if node_hidden(node) {
+        return;
+    }
+    let indent = "  ".repeat(depth);
+    let view = if node_is_text(node) {
+        let body = node_text(node).unwrap_or_default();
+        format!("Text({:?})", body)
+    } else if node_is_ellipse(node) {
+        "Ellipse()".to_string()
+    } else {
+        "Rectangle()".to_string()
+    };
+    let color = node_fill_css(node)
+        .and_then(|c| parse_color(&c))
+        .map(|(r, g, b, a)| {
+            format!(
+                ".foregroundColor(Color(red: {:.3}, green: {:.3}, blue: {:.3}, opacity: {:.3}))",
+                r, g, b, a
+            )
+        })
+        .unwrap_or_default();
+    let (x, y) = node_origin(node);
+    let (w, h) = node_size(node);
+    let cx = x + w / 2.0;
+    let cy = y + h / 2.0;
+    out.push_str(&format!(
+        "{indent}{view}{color}.frame(width: {}, height: {}).position(x: {}, y: {})\n",
+        fmt_num(w),
+        fmt_num(h),
+        fmt_num(cx),
+        fmt_num(cy)
+    ));
+    for c in node_children(node) {
+        emit_node_swiftui(out, c, depth);
+    }
+}
+
+/// Android Jetpack Compose generator. Emits a `Box` with
+/// `Modifier.offset`/`size` per node + a single fill color.
+/// Mirrors TS `pen-codegen::compose-generator`.
+pub struct Compose;
+
+impl Codegen for Compose {
+    fn target_label(&self) -> &'static str {
+        "compose"
+    }
+    fn generate(&self, doc: &PenDocument) -> String {
+        let mut out = String::new();
+        out.push_str("// Generated by OpenPencil — codegen::Compose\n");
+        out.push_str("import androidx.compose.foundation.*\n");
+        out.push_str("import androidx.compose.foundation.layout.*\n");
+        out.push_str("import androidx.compose.material3.Text\n");
+        out.push_str("import androidx.compose.runtime.Composable\n");
+        out.push_str("import androidx.compose.ui.Modifier\n");
+        out.push_str("import androidx.compose.ui.graphics.Color\n");
+        out.push_str("import androidx.compose.ui.unit.dp\n\n");
+        out.push_str("@Composable\nfun Page() {\n  Box(modifier = Modifier.fillMaxSize()) {\n");
+        for n in root_nodes(doc) {
+            emit_node_compose(&mut out, n, 2);
+        }
+        out.push_str("  }\n}\n");
+        out
+    }
+}
+
+fn emit_node_compose(out: &mut String, node: &PenNode, depth: usize) {
+    if node_hidden(node) {
+        return;
+    }
+    let indent = "  ".repeat(depth);
+    let (x, y) = node_origin(node);
+    let (w, h) = node_size(node);
+    if node_is_text(node) {
+        let body = node_text(node).unwrap_or_default();
+        out.push_str(&format!(
+            "{indent}Text(text = {:?}, modifier = Modifier.offset(x = {}.dp, y = {}.dp))\n",
+            body,
+            fmt_num(x),
+            fmt_num(y)
+        ));
+    } else {
+        let color = node_fill_css(node)
+            .and_then(|c| parse_color(&c))
+            .map(|(r, g, b, a)| {
+                let to_u8 = |c: f32| (c.clamp(0.0, 1.0) * 255.0).round() as u8;
+                format!(
+                    ".background(Color({}, {}, {}, {}))",
+                    to_u8(r),
+                    to_u8(g),
+                    to_u8(b),
+                    to_u8(a)
+                )
+            })
+            .unwrap_or_default();
+        out.push_str(&format!(
+            "{indent}Box(modifier = Modifier.offset(x = {}.dp, y = {}.dp).size(width = {}.dp, height = {}.dp){})\n",
+            fmt_num(x),
+            fmt_num(y),
+            fmt_num(w),
+            fmt_num(h),
+            color
+        ));
+    }
+    for c in node_children(node) {
+        emit_node_compose(out, c, depth);
+    }
+}
+
+/// React Native generator. Emits a default-exported functional
+/// component with absolute-positioned `<View>`s + `<Text>`s using
+/// React Native's `StyleSheet.flatten`-friendly inline style.
+/// Mirrors TS `pen-codegen::react-native-generator`.
+pub struct ReactNative;
+
+impl Codegen for ReactNative {
+    fn target_label(&self) -> &'static str {
+        "react-native"
+    }
+    fn generate(&self, doc: &PenDocument) -> String {
+        let mut out = String::new();
+        out.push_str("// Generated by OpenPencil — codegen::ReactNative\n");
+        out.push_str("import React from 'react';\n");
+        out.push_str("import { View, Text } from 'react-native';\n\n");
+        out.push_str(
+            "export default function Page() {\n  return (\n    <View style={{ flex: 1 }}>\n",
+        );
+        for n in root_nodes(doc) {
+            emit_node_rn(&mut out, n, 3);
+        }
+        out.push_str("    </View>\n  );\n}\n");
+        out
+    }
+}
+
+fn emit_node_rn(out: &mut String, node: &PenNode, depth: usize) {
+    if node_hidden(node) {
+        return;
+    }
+    let indent = "  ".repeat(depth);
+    let (x, y) = node_origin(node);
+    let (w, h) = node_size(node);
+    let radius = node_corner_radius(node);
+    let style = format!(
+        "position: 'absolute', left: {}, top: {}, width: {}, height: {}{}{}",
+        fmt_num(x),
+        fmt_num(y),
+        fmt_num(w),
+        fmt_num(h),
+        node_fill_css(node)
+            .map(|c| format!(", backgroundColor: '{}'", color_to_css(&c)))
+            .unwrap_or_default(),
+        if radius > 0.0 {
+            format!(", borderRadius: {}", fmt_num(radius))
+        } else {
+            String::new()
+        },
+    );
+    if node_is_text(node) {
+        let body = node_text(node).unwrap_or_default();
+        out.push_str(&format!(
+            "{indent}<Text style={{{{{style}}}}}>{}</Text>\n",
+            html_escape(&body)
+        ));
+    } else {
+        let children = node_children(node);
+        if children.is_empty() {
+            out.push_str(&format!("{indent}<View style={{{{{style}}}}} />\n"));
+        } else {
+            out.push_str(&format!("{indent}<View style={{{{{style}}}}}>\n"));
+            for c in children {
+                emit_node_rn(out, c, depth + 1);
+            }
+            out.push_str(&format!("{indent}</View>\n"));
+        }
+    }
+}
diff --git a/crates/openpencil-shell-core/src/lib.rs b/crates/openpencil-shell-core/src/lib.rs
index 07e962073..082671613 100644
--- a/crates/openpencil-shell-core/src/lib.rs
+++ b/crates/openpencil-shell-core/src/lib.rs
@@ -20,6 +20,7 @@ pub mod agent_settings_state;
 pub mod chat_models;
 pub mod chat_provider;
 pub mod codegen;
+mod codegen_targets;
 pub mod document;
 pub mod figma;
 // Phase 3 strangler reorg: i18n extracted into the op-i18n crate. Re-exported